/* styles/layout.css — Screens, topbar, sidebar, graph, inspector, panels, modals */

/* ── SCREENS ── */
.screen { display:none; width:100%; min-height:100vh; flex-direction:column; }
.screen.active { display:flex; }
#screen-tree.active,
#screen-tg.active { height:100vh; overflow:hidden; min-height:0; }

/* ── HOME ── */
.home-bg { position:fixed; inset:0; z-index:0; pointer-events:none; }
.home-grid {
  position:absolute; inset:0;
  background-image: linear-gradient(var(--border) 1px,transparent 1px),
                    linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size: 48px 48px; opacity:.5;
}
.home-glow {
  position:absolute; top:-200px; left:50%; transform:translateX(-50%);
  width:800px; height:600px;
  background:radial-gradient(ellipse,rgba(79,142,247,.12) 0%,transparent 70%);
}
.home-nav {
  position:relative; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 40px;
}
.logo { display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:1.15rem; color:var(--text); }
.nav-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.home-hero {
  position:relative; z-index:5; flex:1;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:60px 24px 80px; max-width:920px; margin:0 auto; width:100%;
}
.hero-badge { display:inline-block; padding:4px 14px; border-radius:20px; background:rgba(79,142,247,.12); border:1px solid rgba(79,142,247,.3); color:var(--accent); font-size:.74rem; font-weight:500; letter-spacing:.08em; margin-bottom:28px; }
.hero-title { font-family:var(--font-display); font-size:clamp(2.4rem,6vw,4.4rem); line-height:1.1; margin-bottom:20px; }
.hero-title em { color:var(--accent); font-style:italic; }
.hero-sub { font-size:1.02rem; color:var(--text-muted); max-width:520px; line-height:1.6; margin-bottom:40px; }
.hero-cta { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-bottom:72px; }
.feature-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; width:100%; }
.feature-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px 20px; text-align:left; transition:border-color var(--transition),transform var(--transition); }
.feature-card:hover { border-color:var(--border-2); transform:translateY(-2px); }
.feature-icon { font-size:1.5rem; margin-bottom:10px; }
.feature-card h3 { font-size:.88rem; font-weight:600; margin-bottom:5px; }
.feature-card p  { font-size:.78rem; color:var(--text-muted); line-height:1.5; }
.existing-trees { width:100%; margin-top:48px; text-align:left; }
.existing-trees h2 { font-family:var(--font-display); font-size:1.4rem; margin-bottom:14px; }
.trees-list { display:flex; flex-direction:column; gap:8px; }
.tree-item { display:flex; align-items:center; justify-content:space-between; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:13px 18px; cursor:pointer; transition:border-color var(--transition); }
.tree-item:hover { border-color:var(--accent); }
.tree-item-info h4 { font-size:.88rem; font-weight:600; }
.tree-item-info span { font-size:.73rem; color:var(--text-muted); font-family:var(--font-mono); }

/* ── PANEL PAGES ── */
.panel-page { flex:1; display:flex; flex-direction:column; align-items:center; padding:40px 24px 60px; max-width:540px; margin:0 auto; width:100%; position:relative; z-index:5; }
.back-btn { align-self:flex-start; display:flex; align-items:center; gap:6px; color:var(--text-muted); font-size:.84rem; padding:6px 0; margin-bottom:24px; transition:color var(--transition); }
.back-btn:hover { color:var(--text); }
.panel-card { width:100%; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl); padding:36px 32px; }
.panel-title { font-family:var(--font-display); font-size:1.8rem; margin-bottom:8px; }
.panel-sub   { color:var(--text-muted); font-size:.86rem; line-height:1.5; margin-bottom:26px; }

/* ── TOKEN CARD ── */
.tokens-card { text-align:center; }
.tokens-header { margin-bottom:22px; }
.success-icon { width:50px; height:50px; border-radius:50%; background:var(--tg-pos-soft); border:2px solid var(--success); color:var(--success); font-size:1.3rem; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.tokens-tree-name { font-family:var(--font-display); font-size:1.1rem; color:var(--text-muted); }
.warning-box { display:flex; align-items:flex-start; gap:10px; background:var(--tg-chal-soft); border:1px solid var(--tg-chal-dim); border-radius:var(--radius); padding:11px 13px; color:var(--warning); font-size:.8rem; text-align:left; margin-bottom:22px; }
.token-group { margin-bottom:14px; text-align:left; }
.token-label { display:flex; align-items:center; gap:8px; font-size:.76rem; color:var(--text-muted); margin-bottom:5px; }
.token-badge { font-size:.62rem; font-weight:700; letter-spacing:.08em; padding:2px 7px; border-radius:4px; font-family:var(--font-mono); }
.token-badge.master { background:var(--tg-dang-dim); color:#f87171; border:1px solid var(--tg-dang-dim); }
.token-badge.edit   { background:rgba(79,142,247,.2);  color:var(--accent); border:1px solid rgba(79,142,247,.3); }
.token-badge.tree-id{ background:var(--tg-pos-soft); color:var(--success); border:1px solid var(--tg-pos-dim); }
.token-display { display:flex; align-items:center; background:var(--bg-3); border:1px solid var(--border); border-radius:var(--radius); padding:9px 13px; gap:10px; }
.token-display code { font-family:var(--font-mono); font-size:.86rem; flex:1; user-select:all; color:var(--text); }
.copy-btn { color:var(--text-muted); font-size:.95rem; padding:3px 7px; border-radius:4px; transition:color var(--transition); }
.copy-btn:hover { color:var(--accent); }

/* ── IMPORT SCREEN ── */
.divider { display:flex; align-items:center; gap:12px; color:var(--text-faint); font-size:.78rem; margin:18px 0; }
.divider::before,.divider::after { content:''; flex:1; border-top:1px solid var(--border); }
.file-drop-zone { border:2px dashed var(--border-2); border-radius:var(--radius-lg); padding:34px 22px; text-align:center; cursor:pointer; transition:border-color var(--transition),background var(--transition); }
.file-drop-zone:hover { border-color:var(--accent); background:rgba(79,142,247,.04); }
.file-drop-zone svg { color:var(--text-faint); margin-bottom:10px; }
.file-drop-zone p   { font-size:.86rem; color:var(--text-muted); margin-bottom:4px; }
.file-hint { font-size:.73rem; color:var(--text-faint); }

/* ── TOPBAR ── */
.topbar { height:var(--topbar-h); background:var(--surface); border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 12px; gap:6px; position:relative; z-index:100; flex-shrink:0;
  /* Safe area for iPhone notch (standalone PWA mode) */
  padding-top: env(safe-area-inset-top, 0px); }
.topbar-left   { display:flex; align-items:center; gap:10px; min-width:0; flex:1; }
.topbar-center { flex:1; max-width:300px; }
.topbar-right  { display:flex; align-items:center; gap:4px; flex-shrink:0; flex-wrap:nowrap; }
.topbar-sep    { width:1px; height:18px; background:var(--border); margin:0 3px; flex-shrink:0; }
.tree-title-wrap { display:flex; align-items:center; gap:7px; min-width:0; }
.tree-title   { font-size:.86rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }
.tree-id-badge { font-family:var(--font-mono); font-size:.68rem; background:rgba(79,142,247,.12); color:var(--accent); border:1px solid rgba(79,142,247,.2); padding:2px 7px; border-radius:4px; white-space:nowrap; }

/* ── GRAPH LAYOUT ── */
.graph-layout { flex:1; display:flex; overflow:hidden; position:relative; min-height:0; }
.sidebar { width:var(--sidebar-w); background:var(--surface); border-right:1px solid var(--border); overflow-y:auto; flex-shrink:0; padding:10px 8px; display:flex; flex-direction:column; gap:3px; }
.sidebar-section { margin-bottom:6px; }
.sidebar-label { font-size:.62rem; font-weight:700; letter-spacing:.1em; color:var(--text-faint); padding:6px 8px 3px; text-transform:uppercase; }
/* ── Legend ──────────────────────────────────────────────────────────────── */
.legend-section-header {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none;
}
.legend-toggle-btn {
  font-size: .68rem; color: var(--text-faint); background: none; border: none;
  cursor: pointer; padding: 0 4px; line-height: 1; transition: transform .18s;
}
.legend-toggle-btn.collapsed { transform: rotate(-90deg); }
.legend-body { overflow: hidden; transition: max-height .22s ease; max-height: 300px; }
.legend-body.collapsed { max-height: 0; }
.legend-item {
  display: flex; align-items: center; gap: 8px;
  font-size: .73rem; color: var(--text-muted); padding: 3px 8px;
  transition: color .12s;
}
.legend-item:hover { color: var(--text); }
/* Line swatch — theme-aware via CSS variables */
.legend-line {
  width: 28px; height: 2px; border-radius: 1px; flex-shrink: 0;
  background: var(--edge-parentchild, #64748b); /* default */
}
/* Marriage — solid indigo */
.legend-line.marriage    { background: var(--edge-marriage,    #6366f1); }
/* Divorce — dashed red: 8px on, 4px off (matches edgeDash divorce: 8,4) */
.legend-line.divorce {
  background: repeating-linear-gradient(90deg,
    var(--edge-divorce,#ef4444) 0px, var(--edge-divorce,#ef4444) 8px,
    transparent 8px, transparent 12px);
}
/* Partnership — dotted purple: 4px on, 4px off (matches edgeDash partnership: 4,4) */
.legend-line.partnership {
  background: repeating-linear-gradient(90deg,
    var(--edge-partnership,#8b5cf6) 0px, var(--edge-partnership,#8b5cf6) 4px,
    transparent 4px, transparent 8px);
}
/* Parent–Child — solid slate */
.legend-line.parentchild { background: var(--edge-parentchild, #64748b); }
.legend-line.adoption {
  /* Amber dashed — matches edgeDash adoption: 6,3 pattern */
  border: none;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--edge-adoption, #f59e0b) 0px,
    var(--edge-adoption, #f59e0b) 6px,
    transparent 6px,
    transparent 9px
  );
}
.legend-line.sibling  { background: var(--edge-sibling,  #10b981); }
/* Remarriage — solid blue (matches edgeColor remarriage) */
.legend-line.remarriage { background: var(--edge-remarriage, #3b82f6); }
/* Twin / Triplet — rendered on the sibling line; the legend pairs the green
   sibling colour with a 👶 multi-birth marker so users can read the distinction
   even though twins/triplets are persisted as sibling edges. */
.legend-line.twin     { background: var(--edge-sibling,  #10b981); }
.legend-line.triplet  { background: var(--edge-sibling,  #10b981); }
.legend-multi-marker  { font-size:.7rem; margin-left:-4px; flex-shrink:0; }
/* Unknown / unspecified relationship — neutral grey dotted (2px on, 3px off) */
.legend-line.unknown-rel {
  background: repeating-linear-gradient(90deg,
    rgba(148,163,184,0.7) 0px, rgba(148,163,184,0.7) 2px,
    transparent 2px, transparent 5px);
}
/* Placeholder/unknown link — short-dash grey, matches stroke-dasharray 5,3 in ghost node */
.legend-line.placeholder-edge {
  background: repeating-linear-gradient(
    90deg,
    rgba(100,116,139,0.55) 0px,
    rgba(100,116,139,0.55) 5px,
    transparent 5px,
    transparent 8px
  );
}
.stat-row { display:flex; justify-content:space-between; padding:3px 8px; font-size:.76rem; color:var(--text-muted); }
.stat-row span:last-child { color:var(--text); font-weight:600; font-family:var(--font-mono); }

/* ── GRAPH CANVAS ── */
.graph-container { flex:1; position:relative; overflow:hidden; background:var(--bg); cursor:grab;
  /* RC-G1: claim all touch gestures so the browser's native pan/double-tap-zoom
     does not fight the app's custom single-finger pan + two-finger pinch handlers.
     Without this, iOS Safari/Chrome apply their own gestures → inconsistent touch
     behaviour across devices. 'none' makes touch behaviour identical everywhere. */
  touch-action: none; -webkit-user-select: none; user-select: none; }
.graph-container:active { cursor:grabbing; }
.graph-svg { width:100%; height:100%; display:block; }
.graph-empty { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; }
.graph-empty.hidden { display:none; }
.empty-icon  { font-size:3rem; margin-bottom:14px; opacity:.3; }
.empty-title { font-size:.95rem; font-weight:600; color:var(--text-muted); margin-bottom:4px; }
.empty-sub   { font-size:.8rem; color:var(--text-faint); margin-bottom:14px; }
.graph-empty .btn-accent { pointer-events:all; }
.zoom-controls { position:absolute; bottom:18px; right:18px; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.zoom-controls button { width:34px; height:34px; font-size:1.05rem; color:var(--text-muted); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:center; transition:color .12s,background .12s; font-family:var(--font-mono); }
.zoom-controls button:last-child { border-bottom:none; }
.zoom-controls button:hover { color:var(--text); background:var(--bg-4); }

/* ── INSPECTOR ── */
.inspector { width:var(--inspector-w); background:var(--surface); border-left:1px solid var(--border); overflow-y:auto; flex-shrink:0; animation:slideRight .2s ease; }
.inspector-header { display:flex; align-items:center; justify-content:space-between; padding:12px 15px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--surface); z-index:5; }
.inspector-header span { font-size:.83rem; font-weight:600; }
#inspector-content { padding:14px; }
.inspector-avatar { width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.7rem; margin:0 auto 12px; border:2px solid var(--border); }
.inspector-name  { text-align:center; font-family:var(--font-display); font-size:1.05rem; margin-bottom:3px; }
.inspector-sub   { text-align:center; font-size:.76rem; color:var(--text-muted); margin-bottom:14px; font-weight:500; letter-spacing:.01em; }
.inspector-tag   { display:inline-flex; align-items:center; gap:4px; font-size:.68rem; padding:2px 7px; border-radius:4px; font-weight:600; margin-bottom:14px; }
.inspector-tag.living  { background:var(--tg-pos-soft); color:var(--success); border:1px solid var(--tg-pos-dim); }
.inspector-tag.deceased{ background:rgba(100,116,139,.18); color:var(--text); border:1px solid rgba(100,116,139,.4); font-weight:600; }
.info-row { display:flex; align-items:flex-start; gap:9px; padding:8px 0; border-bottom:1px solid var(--border-2, var(--border)); font-size:.79rem; }
.info-row:last-of-type { border-bottom:none; }
.info-icon  { font-size:.88rem; flex-shrink:0; width:16px; }
.info-label { color:var(--text-muted); width:72px; flex-shrink:0; font-size:.74rem; font-weight:500; }
.info-value { color:var(--text); word-break:break-word; font-weight:500; }
.inspector-actions { display:flex; flex-direction:column; gap:5px; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
.inspector-actions button { display:flex; align-items:center; gap:8px; padding:7px 11px; border-radius:7px; font-size:.78rem; color:var(--text-muted); background:var(--bg-3); border:1px solid var(--border); transition:all .15s; }
.inspector-actions button:hover { color:var(--text); border-color:var(--border-2); background:var(--bg-4); }
.inspector-actions button.danger:hover { color:var(--danger); border-color:var(--tg-dang-dim); background:var(--tg-dang-soft); }

/* ── MOBILE BOTTOM NAV ── */
.bottom-nav { display:none; height:var(--bottom-nav-h); background:var(--surface); border-top:1px solid var(--border); justify-content:space-around; align-items:center; position:relative; z-index:100; flex-shrink:0;
  /* Safe area inset for iPhone notch/home indicator */
  padding-bottom: env(safe-area-inset-bottom, 0px); }
.bottom-nav button { display:flex; flex-direction:column; align-items:center; gap:3px; padding:5px 10px; border-radius:7px; color:var(--text-muted); font-size:.62rem; transition:color .12s; }
.bottom-nav button:hover { color:var(--accent); }

/* ── PANELS ── */
.panel-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:200; backdrop-filter:blur(2px); }
.panel-overlay.active { display:block; }
.slide-panel { position:fixed; top:0; right:-100%; bottom:0; width:330px; max-width:100vw; background:var(--surface); border-left:1px solid var(--border); z-index:210; transition:right .3s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; box-shadow:var(--shadow-lg); }
.slide-panel.open { right:0; }
.slide-panel-header { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border); flex-shrink:0; }
.slide-panel-header h3 { font-size:.88rem; font-weight:600; }
.slide-panel-body { flex:1; overflow-y:auto; padding:14px 18px; }
.access-section { margin-bottom:22px; }
.access-section h4,.history-section h4 { font-size:.72rem; font-weight:700; letter-spacing:.08em; color:var(--text-faint); text-transform:uppercase; margin-bottom:10px; }
#history-tokens { display:flex; flex-direction:column; gap:7px; margin-bottom:9px; }
.history-token-item { background:var(--bg-3); border:1px solid var(--border); border-radius:7px; padding:9px 11px; }
.history-token-item .tok-label { font-size:.72rem; color:var(--text-muted); margin-bottom:3px; }
.history-token-item code { font-family:var(--font-mono); font-size:.78rem; color:var(--text); }
#history-list { display:flex; flex-direction:column; gap:7px; }
.history-entry { background:var(--bg-3); border:1px solid var(--border); border-radius:7px; padding:9px 11px; font-size:.76rem; }
.history-entry .entry-who  { font-weight:600; margin-bottom:2px; }
.history-entry .entry-time { color:var(--text-faint); font-size:.7rem; margin-bottom:3px; }
.history-entry .entry-change { color:var(--text-muted); }

/* ── CONTEXT MENU ── */
.context-menu { position:fixed; z-index:500; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:4px; box-shadow:var(--shadow-lg); min-width:175px; animation:fadeIn .1s ease; }
.context-menu button { display:flex; align-items:center; gap:9px; width:100%; padding:7px 11px; border-radius:5px; font-size:.8rem; color:var(--text-muted); transition:color .12s,background .12s; text-align:left; }
.context-menu button:hover { color:var(--text); background:var(--bg-4); }
.context-menu button.danger:hover { color:var(--danger); background:var(--tg-dang-soft); }
.ctx-sep { height:1px; background:var(--border); margin:3px 7px; }

/* ── MODALS ── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:300; backdrop-filter:blur(3px); }
.modal-overlay.active { display:block; }
.modal { display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(.97); z-index:310; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl); width:100%; max-width:510px; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-lg); opacity:0; transition:transform .15s ease,opacity .15s ease; }
.modal.active { display:flex; flex-direction:column; transform:translate(-50%,-50%) scale(1); opacity:1; }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:16px 22px; border-bottom:1px solid var(--border); flex-shrink:0; }
.modal-header h3 { font-size:.95rem; font-weight:600; }
.modal-body   { padding:18px 22px; flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
/* BUG-4 FIX: explicit overflow-y:auto ensures modal body scrolls when
   content (TG profile tabs, attachment sliders, form fields) exceeds max-height. */
.modal-footer { display:flex; justify-content:flex-end; gap:9px; padding:12px 22px; border-top:1px solid var(--border); flex-shrink:0; }

/* ── TG SCREEN ── */
.tg-layout { flex:1; display:flex; overflow:hidden; min-height:0; }
.tg-sidebar { width:200px; background:var(--surface); border-right:1px solid var(--border); overflow-y:auto; flex-shrink:0; padding:12px 8px; }
.tg-main    { flex:1; overflow-y:auto; padding:20px 22px; }
.tg-footer  { padding:12px 22px; background:var(--bg-2); border-top:1px solid var(--border); font-size:.68rem; color:var(--text-faint); text-align:center; line-height:1.5; flex-shrink:0; }
.tg-nav-item { display:flex; align-items:center; gap:8px; padding:8px 9px; border-radius:6px; font-size:.78rem; color:var(--text-muted); cursor:pointer; transition:all .12s; margin-bottom:2px; }
.tg-nav-item:hover  { color:var(--text); background:var(--bg-4); }
.tg-nav-item.active { color:var(--tg-accent-text); background:var(--tg-accent-soft); }
.tg-stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:22px; }
.tg-stat-card  { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:13px 15px; }
.tg-stat-label { font-size:.68rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:.07em; margin-bottom:5px; }
.tg-stat-val   { font-size:1.5rem; font-weight:700; font-family:var(--font-mono); color:var(--text); }
.tg-section-title { font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.tg-section-title::after { content:''; flex:1; height:1px; background:var(--border); }
.tg-pattern-list { display:flex; flex-direction:column; gap:7px; margin-bottom:20px; }
.tg-pattern-row  { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:9px 13px; display:flex; align-items:center; gap:11px; transition:border-color .12s; }
.tg-pattern-row:hover { border-color:var(--tg-accent-dim); }
.tg-pattern-label { flex:1; font-size:.8rem; color:var(--text); }
.tg-bar-wrap { width:100px; height:4px; background:var(--bg-4); border-radius:2px; overflow:hidden; flex-shrink:0; }
.tg-bar { height:100%; border-radius:2px; background:linear-gradient(90deg,#8b5cf6,#6366f1); transition:width .6s cubic-bezier(.34,1.56,.64,1); }
.tg-pct { font-size:.7rem; font-family:var(--font-mono); color:var(--text-muted); width:32px; text-align:right; flex-shrink:0; }
.tg-cat-badge { font-size:.62rem; padding:2px 6px; border-radius:3px; font-weight:600; letter-spacing:.05em; flex-shrink:0; text-transform:uppercase; }
.cat-emotional   { background:var(--tg-chal-soft);  color:var(--tg-chal-text); }
.cat-behavioral  { background:var(--tg-pos-soft);  color:#34d399; }
.cat-health      { background:var(--tg-dang-soft); color:#f87171; }
.cat-relationship{ background:var(--tg-accent-soft);  color:var(--tg-accent-text); }
.cat-attachment  { background:rgba(79,142,247,.15);  color:#4f8ef7; }
.cat-lifestyle   { background:rgba(251,146,60,.15);  color:#fb923c; }
.cat-unknown     { background:rgba(100,116,139,.15); color:#94a3b8; }
.tg-disclaimer-box { background:var(--tg-accent-soft); border:1px solid var(--tg-accent-dim); border-radius:var(--radius); padding:10px 13px; font-size:.73rem; color:var(--text-muted); line-height:1.5; margin-bottom:14px; }
.tg-patterns-editor { display:flex; flex-direction:column; gap:9px; margin-bottom:10px; }
.tg-pattern-entry { background:var(--bg-3); border:1px solid var(--border); border-radius:var(--radius); padding:10px 12px; position:relative; }
.tg-pat-top  { display:flex; align-items:flex-start; gap:8px; margin-bottom:7px; }
.tg-pat-input { flex:1; background:none; border:none; font-size:.82rem; color:var(--text); outline:none; width:100%; }
.tg-pat-input::placeholder { color:var(--text-faint); }
.tg-pat-meta { display:flex; gap:5px; align-items:center; flex-wrap:wrap; }
.tg-meta-sel { background:var(--bg-4); border:1px solid var(--border); border-radius:4px; padding:3px 7px; font-size:.7rem; color:var(--text-muted); outline:none; cursor:pointer; }
.tg-remove-btn { position:absolute; top:7px; right:7px; color:var(--text-faint); font-size:.88rem; padding:2px 5px; border-radius:3px; transition:color .12s; }
.tg-remove-btn:hover { color:var(--danger); }
.tg-add-pattern-btn { display:flex; align-items:center; justify-content:center; gap:6px; padding:8px; border-radius:var(--radius); font-size:.78rem; color:var(--tg-accent-text); background:var(--tg-accent-soft); border:1px dashed var(--tg-accent-dim); cursor:pointer; transition:all .15s; width:100%; }
.tg-add-pattern-btn:hover { background:var(--tg-accent-soft); border-style:solid; }
.tg-keyword-chips { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:12px; }
.tg-chip { font-size:.7rem; padding:3px 9px; border-radius:11px; background:var(--bg-4); border:1px solid var(--border); color:var(--text-muted); cursor:pointer; transition:all .12s; }
.tg-chip:hover { background:var(--tg-accent-soft); border-color:var(--tg-accent-dim); color:var(--tg-accent-text); }
.tg-att-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; margin-bottom:14px; }
.tg-att-card { background:var(--surface); border:2px solid var(--border); border-radius:var(--radius); padding:11px; cursor:pointer; transition:all .15s; text-align:center; }
.tg-att-card:hover { border-color:var(--tg-accent-dim); }
.tg-att-card.selected { border-color:#8b5cf6; background:var(--tg-accent-soft); }
.tg-att-card .att-icon { font-size:1.3rem; display:block; margin-bottom:4px; }
.tg-att-card .att-name { font-size:.78rem; font-weight:600; color:var(--text); }
.tg-att-card .att-desc { font-size:.66rem; color:var(--text-muted); margin-top:2px; }
.tg-privacy-chip { display:inline-flex; align-items:center; gap:5px; font-size:.7rem; color:var(--success); background:var(--tg-pos-soft); border:1px solid var(--tg-pos-dim); padding:3px 9px; border-radius:10px; }

/* ── SYNC ── */
.sync-indicator { display:flex; align-items:center; gap:5px; padding:4px 9px; border-radius:7px; border:1px solid var(--border); cursor:pointer; font-size:.73rem; font-weight:600; color:var(--text-muted); transition:all .15s; white-space:nowrap; }
.sync-indicator:hover { background:var(--bg-4); color:var(--text); }
.sync-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.sync-dot.synced  { background:var(--success); }
.sync-dot.syncing { background:var(--accent); animation:syncPulse 1s ease-in-out infinite; }
.sync-dot.pending { background:var(--warning); animation:syncPulse 1.4s ease-in-out infinite; }
.sync-dot.offline { background:var(--text-faint); }
.sync-pending-badge { background:var(--warning); color:#000; font-size:.6rem; font-weight:700; padding:1px 5px; border-radius:8px; }
.offline-bar { display:none; position:fixed; top:0; left:0; right:0; z-index:9999; background:#92400e; color:#fef3c7; font-size:.75rem; font-weight:600; text-align:center; padding:7px 16px; animation:fadeIn .3s ease; }
.offline-bar.visible { display:block; }
.sync-status-card { background:var(--bg-3); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; margin-bottom:14px; }
.sync-status-row  { display:flex; align-items:center; justify-content:space-between; padding:5px 0; font-size:.78rem; border-bottom:1px solid var(--border); }
.sync-status-row:last-child { border-bottom:none; }
.sync-status-label { color:var(--text-muted); }
.sync-chip { font-size:.68rem; font-weight:700; padding:2px 8px; border-radius:9px; letter-spacing:.04em; }
.chip-green { background:var(--tg-pos-soft);  color:var(--success); border:1px solid var(--tg-pos-dim); }
.chip-red   { background:var(--tg-dang-soft); color:var(--danger);  border:1px solid var(--tg-dang-dim); }
.chip-blue  { background:rgba(79,142,247,.12);  color:var(--accent);  border:1px solid rgba(79,142,247,.3); }
.chip-gray  { background:rgba(100,116,139,.12); color:var(--text-muted); border:1px solid var(--border); }
.sync-toggle-row   { background:var(--bg-3); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; margin-bottom:12px; }
.sync-toggle-label { display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; }
.toggle-switch { width:38px; height:22px; border-radius:11px; background:var(--bg-4); border:1px solid var(--border); position:relative; flex-shrink:0; cursor:pointer; transition:background .2s,border-color .2s; }
.toggle-switch::after { content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--text-faint); transition:transform .2s,background .2s; }
.toggle-switch.on { background:rgba(79,142,247,.25); border-color:rgba(79,142,247,.5); }
.toggle-switch.on::after { transform:translateX(16px); background:var(--accent); }
.sync-info-box { background:rgba(79,142,247,.04); border:1px solid rgba(79,142,247,.15); border-radius:var(--radius); padding:11px 13px; }

/* ── Theme-responsive layout dimensions ───────────────────────────
   These use CSS vars set per-theme in tokens.css.
   Overrides must come after base declarations, so they live here. */

/* ── Home page section spacing tweaks per theme ─────────────────── */

/* ── TG screen layout per theme ─────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════
   TRANSGENERATIONAL V1.5 — New component CSS
   All new classes for profile tabs, tag system, analytics, etc.
   ══════════════════════════════════════════════════════════════ */

/* ── Profile modal tab bar ──────────────────────────────────── */
.tg-profile-tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}
.tg-profile-tab {
  display: flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: 6px;
  font-size: .72rem; font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-3); border: 1px solid var(--border);
  cursor: pointer; transition: all .12s ease; white-space: nowrap;
}
.tg-profile-tab span { display: none; }
@media (min-width: 500px) { .tg-profile-tab span { display: inline; } }
.tg-profile-tab:hover  { color: var(--text); border-color: var(--border-2); }
.tg-profile-tab.active {
  color: var(--tg-accent-text);
  background: var(--tg-accent-soft);
  border-color: var(--tg-accent-dim);
}

/* ── Person list (My Patterns tab) ─────────────────────────── */
.tg-person-list { display: flex; flex-direction: column; gap: 6px; }
.tg-person-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; transition: border-color .12s, background .12s;
}
.tg-person-row:hover  { border-color: var(--tg-accent-dim); background: var(--bg-4); }
.tg-person-glyph      { font-size: 1.3rem; flex-shrink: 0; }
.tg-person-info       { flex: 1; min-width: 0; }
.tg-person-name       { font-size: .84rem; font-weight: 600; color: var(--text); }
.tg-person-meta       { font-size: .7rem; color: var(--text-faint); margin-top: 1px; }
.tg-person-chips      { font-size: .9rem; flex-shrink: 0; min-width: 40px; }
.tg-person-progress   { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.tg-progress-bar      { width: 60px; height: 3px; background: var(--bg-4); border-radius: 2px; overflow: hidden; }
.tg-progress-fill     { height: 100%; background: linear-gradient(90deg,#8b5cf6,#6366f1); border-radius: 2px; transition: width .4s ease; }
.tg-progress-label    { font-size: .68rem; color: var(--text-faint); font-family: var(--font-mono); white-space: nowrap; }
.tg-person-arrow      { color: var(--text-faint); font-size: 1rem; flex-shrink: 0; }

/* ── Family view cards ──────────────────────────────────────── */
.tg-gen-header {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  color: var(--accent); text-transform: uppercase;
  margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.tg-family-card {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; font-size: .78rem;
  transition: border-color .12s, box-shadow .12s; min-width: 150px;
}
.tg-family-card:hover,
.tg-family-card.hover { border-color: var(--tg-accent-dim); box-shadow: 0 2px 8px var(--tg-accent-soft); }
.tg-family-name { font-weight: 600; color: var(--text); white-space: nowrap; }
.tg-family-obs  { font-size: .66rem; color: var(--text-faint); margin-top: 1px; }

/* ── Repetition blocks ──────────────────────────────────────── */
.tg-rep-block {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px;
}
.tg-rep-header {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 8px; flex-wrap: wrap;
}
.tg-rep-count {
  font-size: .68rem; padding: 2px 8px; border-radius: 9px;
  background: var(--tg-chal-soft); color: var(--tg-chal-text); margin-left: auto;
}
.tg-rep-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; border-top: 1px solid var(--border); font-size: .79rem;
}
.tg-rep-arrow { color: var(--accent); font-weight: 700; }
.tg-gen-tag {
  font-size: .66rem; color: var(--text-muted);
  background: var(--bg-4); padding: 1px 5px;
  border-radius: 3px; font-family: var(--font-mono); flex-shrink: 0;
}

/* ── Tag cloud (personality, hobbies, fears, etc.) ──────────── */
.tg-tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.tg-tag-btn {
  display: inline-flex; align-items: center;
  padding: 5px 11px; border-radius: 20px;
  font-size: .74rem; font-weight: 500; cursor: pointer;
  background: var(--bg-3); border: 1px solid var(--border);
  color: var(--text-muted); transition: all .12s ease;
  user-select: none;
}
.tg-tag-btn:hover {
  background: var(--tg-accent-soft);
  border-color: var(--tg-accent-dim);
  color: var(--tg-accent-text);
}
.tg-tag-btn.selected {
  background: var(--tg-accent-soft);
  border-color: var(--tg-accent);
  color: #c4b5fd;
}
.tg-trait-tag {
  display: inline-block; font-size: .68rem;
  padding: 2px 8px; border-radius: 9px;
  background: var(--bg-4); border: 1px solid var(--border);
  color: var(--text-muted); margin: 2px;
}

/* ── Attachment card — full detail (dashboard view) ─────────── */
.tg-att-card-full {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; transition: border-color .12s;
}
.tg-att-icon   { font-size: 2rem; margin-bottom: 6px; }
.tg-att-name   { font-size: .9rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.tg-att-desc   { font-size: .74rem; color: var(--text-muted); line-height: 1.4; margin-bottom: 10px; }
.tg-att-traits { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-bottom: 10px; }

/* ── Analytics dashboard: extended stat grid ───────────────── */
.tg-analytics-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px; margin-bottom: 20px;
}
.tg-analytics-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
}
.tg-analytics-title {
  font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-faint);
  margin-bottom: 10px;
}
.tg-analytics-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px; font-size: .78rem;
}
.tg-analytics-label { flex: 1; color: var(--text-muted); }
.tg-analytics-val   { font-family: var(--font-mono); font-size: .78rem; color: var(--text); min-width: 32px; text-align: right; }

/* ── Profile completeness ring ──────────────────────────────── */
.tg-completeness {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: var(--bg-3);
  border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 14px;
}
.tg-completeness-ring {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700; font-family: var(--font-mono);
  background: conic-gradient(var(--tg-accent-bar) var(--pct, 0%), var(--bg-4) var(--pct, 0%));
  flex-shrink: 0;
}
.tg-completeness-inner {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-3); display: flex; align-items: center;
  justify-content: center; font-size: .65rem; font-weight: 700; color: var(--tg-accent-text);
}
.tg-completeness-info { flex: 1; }
.tg-completeness-name { font-size: .82rem; font-weight: 600; color: var(--text); }
.tg-completeness-sub  { font-size: .7rem; color: var(--text-faint); margin-top: 1px; }

/* ── Analytics percentage bars ─────────────────────────────── */
.analytics-bar-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--border);
  font-size: .8rem;
}
.analytics-bar-row:last-child { border-bottom: none; }
.analytics-bar-label { flex: 1; color: var(--text-muted); }
.analytics-bar-track {
  width: 100px; height: 5px; background: var(--bg-4);
  border-radius: 3px; overflow: hidden; flex-shrink: 0;
}
.analytics-bar-fill  { height: 100%; border-radius: 3px; transition: width .6s ease; }
.analytics-bar-pct   {
  font-family: var(--font-mono); font-size: .74rem;
  color: var(--text); width: 36px; text-align: right; flex-shrink: 0;
}

/* ── Responsive mobile ──────────────────────────────────────── */
@media (max-width: 640px) {
  .tg-profile-tabs { gap: 3px; }
  .tg-profile-tab  { padding: 4px 8px; font-size: .68rem; }
  .tg-person-progress { display: none; }
  .tg-analytics-grid  { grid-template-columns: 1fr; }
  .tg-att-grid { grid-template-columns: 1fr 1fr; }
  .tg-tag-btn  { font-size: .7rem; padding: 4px 9px; }
}

/* ── V2.0 additions ──────────────────────────────────────────────────── */

/* Strength category badge */
.cat-strength {
  background: var(--tg-pos-soft);
  color: var(--success);
  border: 1px solid var(--tg-pos-dim);
}
.cat-talent {
  background: var(--tg-accent-soft);
  color: var(--tg-accent-text);
  border: 1px solid var(--tg-accent-dim);
}
.cat-challenge {
  background: var(--tg-chal-soft);
  color: var(--warning);
  border: 1px solid var(--tg-chal-dim);
}

/* Weighted attachment row */
.tg-att-weight-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  user-select: none;
}
.tg-att-weight-row:hover  { border-color: var(--border-2); background: var(--bg-4); }
.tg-att-weight-row.active { border-color: rgba(79,142,247,.45); background: rgba(79,142,247,.06); }
.tg-att-weight-row input[type=range] { cursor: pointer; }

/* Strengths/talents tag selected states — per-category accent colors */
.tg-tag-btn.selected.strength-tag {
  background: var(--tg-pos-soft);
  border-color: var(--tg-pos-dim);
  color: var(--success);
}
.tg-tag-btn.selected.talent-tag {
  background: var(--tg-accent-soft);
  border-color: var(--tg-accent-dim);
  color: var(--tg-accent-text);
}
.tg-tag-btn.selected.challenge-tag {
  background: var(--tg-chal-soft);
  border-color: var(--tg-chal-dim);
  color: var(--warning);
}

/* ── Placeholder / Unknown parent node styles ───────────────────────────── */

/* Ghost node in graph — handled via SVG stroke-dasharray in graph-engine.js */
.node-placeholder { cursor: pointer; }
.node-placeholder:hover circle { opacity: 0.9; }

/* Inspector tag for placeholder status */
.inspector-tag.placeholder {
  background: rgba(100,116,139,.12);
  color:       rgba(148,163,184,.9);
  border:      1px solid rgba(100,116,139,.3);
  font-style:  italic;
  letter-spacing: .02em;
}

/* Sidebar legend entry for placeholders */
.legend-placeholder-dot {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px dashed rgba(100,116,139,0.6);
  display: inline-block; flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS — Complete mobile-first audit fix
   320px  — smallest Android phones
   375px  — iPhone SE / standard
   414px  — iPhone Pro Max / large Android
   640px  — large phone / small tablet portrait
   768px  — tablet portrait
   900px  — tablet landscape / small laptop
   1280px — desktop
   2560px — 4K / large desktop
   ══════════════════════════════════════════════════════════════ */

/* ── 4K / Wide screens — cap content width ─────────────────────────── */
.home-hero,
.panel-page,
.existing-trees {
  max-width: min(920px, 90vw);
}
.topbar,
.graph-layout,
.tg-layout {
  max-width: 100%;
}
@media (min-width: 2560px) {
  html { font-size: 17px; }
  .home-hero  { max-width: 1100px; }
  .feature-grid { grid-template-columns: repeat(4, 1fr); }
  .tg-main  { max-width: 1400px; margin: 0 auto; }
  .modal    { max-width: 620px; }
}

/* ── Desktop (1280px+) ─────────────────────────────────────────────── */
@media (min-width: 1280px) {
  :root { --sidebar-w: 220px; --inspector-w: 300px; }
}

/* ── Tablet landscape / small laptop (900px) ───────────────────────── */
@media (max-width: 900px) {
  .sidebar { display: none; }
  .home-nav { padding: 14px 18px; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .tg-sidebar { width: 170px !important; }
}

/* ── Tablet portrait (768px) ───────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --inspector-w: 260px; }
  .panel-card { padding: 28px 22px; }
  .home-hero  { padding: 48px 20px 64px; }
  .hero-cta   { gap: 10px; }
  .tg-main    { padding: 16px 16px; }
  .tg-stats-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}

/* ── Large phone / small tablet portrait (640px) ───────────────────── */
@media (max-width: 640px) {
  /* Bottom nav — already shown here */
  .bottom-nav { display: flex; }
  #screen-tree.active { padding-bottom: 0; }
  .graph-layout { height: calc(100vh - var(--topbar-h) - var(--bottom-nav-h)); }

  /* Inspector — slide over graph as overlay panel on mobile */
  .inspector {
    position: fixed;
    top: var(--topbar-h);
    right: -100%;
    bottom: var(--bottom-nav-h);
    width: min(320px, 92vw);
    z-index: 150;
    transition: right 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
  }
  .inspector.open { right: 0; }
  /* Backdrop for inspector */
  .inspector-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 140;
    backdrop-filter: blur(2px);
  }
  .inspector-backdrop.active { display: block; }

  /* TG layout — sidebar becomes bottom drawer */
  .tg-layout { flex-direction: column; }
  .tg-sidebar {
    width: 100% !important;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 8px 8px 4px;
    /* Horizontal scrolling nav on mobile */
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 4px;
  }
  /* TG nav items become horizontal chips on mobile */
  .tg-nav-item {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 7px 12px;
    border-radius: 20px;
    font-size: .76rem;
    background: var(--bg-3);
    border: 1px solid var(--border);
  }
  .tg-nav-item.active {
    border-color: var(--tg-accent);
  }
  .tg-main { padding: 14px 14px; }
  .tg-stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .tg-footer { display: none; }

  /* Forms — stack form-row grid to single column on mobile */
  .form-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* Modals — full-width with safe margins on 320px+ */
  .modal {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    max-height: 88vh;
    /* Override absolute centering for small screens */
    top: 50%;
    left: 10px;
    right: 10px;
    transform: translateY(-50%);
  }
  .modal-body   { padding: 14px 16px; }
  .modal-header { padding: 13px 16px; }
  .modal-footer { padding: 10px 16px; }

  /* Home nav */
  .home-nav { padding: 12px 16px; gap: 6px; }
  .nav-actions { gap: 5px; }

  /* Zoom controls — larger touch targets */
  .zoom-controls button { width: 44px; height: 44px; font-size: 1.1rem; }

  /* Topbar adjustments */
  .tree-id-badge { display: none; }
  .topbar-center { display: none; }

  /* BUG-1 FIX: overflow-y:hidden clips position:absolute dropdowns —
     the lang and gen theme menus become invisible on phones.
     CSS cannot mix overflow-x:auto + overflow-y:visible on the same element.
     Fix: use overflow:visible (no scrolling container) instead, and hide
     non-essential buttons so everything fits without scrolling. */
  .topbar-right  {
    flex-wrap: nowrap;
    overflow: visible;   /* ← allows dropdowns to appear below topbar */
    gap: 3px;
  }
  .topbar-sep { display: none; }

  /* BUG-2 FIX: History and export are not immediately reachable on mobile
     (history is in the slide panel, export is in Settings).
     Hiding them frees ~96px, keeping topbar-right ≤240px on a 375px phone.
     They remain visible on tablet (640px+) and desktop. */
  .topbar-right .history-btn,
  .topbar-right .export-btn { display: none; }

  /* Slide panel full-width on small phones */
  .slide-panel { width: min(330px, 94vw); }
}

/* ── 414px — Large phone ────────────────────────────────────────────── */
@media (max-width: 414px) {
  .hero-title { font-size: clamp(1.8rem, 8vw, 2.6rem); }
  .hero-sub   { font-size: .92rem; }
  .hero-cta .btn-primary-lg,
  .hero-cta .btn-ghost-lg { width: 100%; justify-content: center; }
  .hero-cta   { flex-direction: column; align-items: stretch; }
  .feature-grid { grid-template-columns: 1fr; }
  .panel-card { padding: 20px 16px; }
  .tg-profile-tab span { display: none; }
  .tg-stats-grid { grid-template-columns: 1fr 1fr; }

  /* Inspector actions — stack vertically, full width */
  .inspector-actions button { font-size: .76rem; padding: 9px 11px; }

  /* BUG-3 FIX: Gen theme label text not needed at 414px —
     the icon ⊙ alone identifies the selector.
     Saves ~22px per gen selector without losing functionality.
     Country flag+code stays (flags ARE the identifier for lang). */
  #home-gen-label,
  #tree-gen-label,
  #tg-gen-label,
  #hub-gen-label { display: none; }

  /* Tighten lang-btn padding at this size */
  .lang-btn { padding: 4px 7px; font-size: .73rem; }
}

/* ── 375px — Standard phone ────────────────────────────────────────── */
@media (max-width: 375px) {
  html { font-size: 14px; }
  .home-nav { padding: 10px 12px; }
  .tree-title { max-width: 100px; font-size: .8rem; }
  .topbar { padding: 0 8px; gap: 4px; }
  .tg-section-title { font-size: .65rem; }
  .tg-stat-val { font-size: 1.3rem; }
  .modal-header h3 { font-size: .88rem; }
  .form-group label { font-size: .78rem; }
  .form-group input,
  .form-group select,
  .form-group textarea { font-size: .86rem; padding: 8px 10px; }
}

/* ── 320px — Smallest phone ────────────────────────────────────────── */
@media (max-width: 320px) {
  html { font-size: 13px; }
  :root {
    --topbar-h: 48px;
    --bottom-nav-h: 56px;
  }
  .home-nav { padding: 8px 10px; }
  .logo span { display: none; }  /* hide logo text, keep icon */
  .nav-actions .btn { padding: 6px 10px; font-size: .76rem; }
  .hero-badge { font-size: .65rem; padding: 3px 10px; }
  .hero-title { font-size: 1.7rem; }
  .panel-card { padding: 16px 12px; }
  .panel-title { font-size: 1.4rem; }
  .tg-stats-grid { grid-template-columns: 1fr 1fr; }
  .tg-stat-val { font-size: 1.1rem; }
  .tg-main { padding: 10px; }
  .modal { width: calc(100vw - 8px); left: 4px; right: 4px; }
  .modal-body   { padding: 12px; }
  .modal-footer { padding: 8px 12px; gap: 6px; }
  .modal-footer .btn-ghost { display: none; }
  /* NOK-011 FIX: When keyboard appears on mobile, viewport shrinks.
     Using dvh (dynamic viewport height) means the modal height tracks
     the available space excluding the keyboard. Falls back to vh on
     browsers that don't support dvh. The modal-body scrolls internally
     so the footer (with Save button) always remains visible. */
  .modal { max-height: min(88dvh, 88vh); }
  .modal-body { overscroll-behavior: contain; }  /* on 320px cancel via × only */
  .bottom-nav button { padding: 4px 6px; font-size: .58rem; }
  .zoom-controls { bottom: 10px; right: 10px; }
  .zoom-controls button { width: 44px; height: 44px; }

  /* Inspector — narrower on 320px */
  .inspector { width: calc(100vw - 8px); }

  /* Context menu — full width on 320px */
  .context-menu { min-width: calc(100vw - 20px); left: 10px !important; }
}

/* ══════════════════════════════════════════════════════════════
   INSIGHT SECTION — Family Intelligence Guide (Homepage)
   ══════════════════════════════════════════════════════════════ */

.insight-section {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  padding: 72px 28px 80px;
  box-sizing: border-box;
}

/* ── Header ── */
.insight-header {
  text-align: center;
  margin-bottom: 52px;
}
.insight-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.insight-title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 1.22;
  color: var(--text);
  margin: 0 0 16px;
  font-weight: 400;
}
.insight-title em {
  color: var(--accent);
  font-style: italic;
}
.insight-subtitle {
  font-size: .9rem;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 620px;
  margin: 0 auto;
}
.insight-subtitle strong { color: var(--text); }
.insight-subtitle em { color: var(--accent-soft); font-style: italic; }

/* ── Two-column cards ── */
.insight-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 52px;
}
.insight-card {
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  border: 1px solid var(--border);
}
.insight-card--primary {
  background: var(--tg-neu-soft);
  border-color: var(--tg-neu-soft);
}
.insight-card--secondary {
  background: var(--tg-accent-soft);
  border-color: var(--tg-accent-soft);
}
.insight-card-icon {
  font-size: 1.8rem;
  margin-bottom: 12px;
}
.insight-card h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--text);
  margin: 0 0 12px;
  font-weight: 600;
}
.insight-card p {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
}
.insight-card p em  { color: var(--accent-soft); font-style: italic; }
.insight-card p strong { color: var(--text); }
.insight-book-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}
.insight-chip {
  font-size: .68rem;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--tg-neu-soft);
  border: 1px solid var(--tg-neu-dim);
  color: rgba(180,185,240,.85);
  white-space: nowrap;
}

/* ── List ── */
.insight-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.insight-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.insight-list-icon {
  font-size: .95rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.insight-list em { color: var(--accent-soft); font-style: italic; }

/* ── Steps ── */
.insight-steps-header {
  margin-bottom: 28px;
}
.insight-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 52px;
}
.insight-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 20px;
  transition: border-color var(--transition);
}
.insight-step:hover { border-color: var(--tg-neu-dim); }
.insight-step-num {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent);
  opacity: .55;
  flex-shrink: 0;
  line-height: 1;
  padding-top: 2px;
}
.insight-step-body h4 {
  font-size: .9rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 7px;
}
.insight-step-body p {
  font-size: .79rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}
.insight-step-body strong { color: var(--text); }
.insight-step-body em { color: var(--accent-soft); font-style: italic; }

/* ── Divider ── */
.insight-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: 0 0 48px;
}

/* ── Tips grid ── */
.insight-tips-header { margin-bottom: 28px; }
.insight-tips-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 52px;
}
.insight-tip {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 18px;
  transition: border-color var(--transition), transform .15s;
}
.insight-tip:hover {
  border-color: var(--tg-accent-dim);
  transform: translateY(-1px);
}
.insight-tip-icon {
  font-size: 1.4rem;
  margin-bottom: 10px;
}
.insight-tip h4 {
  font-size: .84rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px;
  line-height: 1.35;
}
.insight-tip p {
  font-size: .76rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* ── Questions ── */
.insight-questions-header { margin-bottom: 28px; }
.insight-questions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 52px;
}
.insight-q-block {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.insight-q-category {
  font-size: .71rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 10px 16px;
  background: var(--tg-neu-soft);
  border-bottom: 1px solid var(--border);
  color: var(--accent);
}
.insight-q-list {
  padding: 4px 0;
}
.insight-q-item {
  padding: 11px 16px;
  font-size: .79rem;
  color: var(--text-muted);
  line-height: 1.55;
  border-bottom: 1px solid rgba(255,255,255,.035);
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.insight-q-item:last-child { border-bottom: none; }
.insight-q-mark {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--accent);
  opacity: .4;
  flex-shrink: 0;
  line-height: 1;
  margin-top: -2px;
}
.insight-q-item em { color: var(--accent-soft); font-style: italic; }

/* ── Final callout ── */
.insight-callout {
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--tg-neu-soft) 0%, var(--tg-accent-soft) 100%);
  border: 1px solid var(--tg-neu-dim);
  padding: 4px;
}
.insight-callout-inner {
  padding: 32px 36px;
  text-align: center;
}
.insight-callout-icon { font-size: 2.2rem; margin-bottom: 14px; }
.insight-callout h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--text);
  margin: 0 0 12px;
  font-weight: 400;
}
.insight-callout p {
  font-size: .84rem;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 600px;
  margin: 0 auto;
}
.insight-callout p strong { color: var(--text); }
.insight-callout p em {
  color: var(--text-muted);
  font-style: italic;
  opacity: .85;
}

/* ══ RESPONSIVE ══════════════════════════════════════════════ */
@media (max-width: 900px) {
  .insight-tips-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .insight-section { padding: 48px 18px 60px; }
  .insight-cols { grid-template-columns: 1fr; }
  .insight-steps { grid-template-columns: 1fr; }
  .insight-tips-grid { grid-template-columns: 1fr; }
  .insight-questions-grid { grid-template-columns: 1fr; }
  .insight-callout-inner { padding: 22px 20px; }
  .insight-title { font-size: 1.6rem; }
}
@media (max-width: 414px) {
  .insight-book-chips { gap: 4px; }
  .insight-chip { font-size: .62rem; }
  .insight-q-item { font-size: .74rem; }
}

/* ══════════════════════════════════════════════════════════════
   TG WORKSPACE SYSTEM — V3.0
   ══════════════════════════════════════════════════════════════ */

/* ── Hub screen ── */
.ws-hub-main {
  flex: 1;
  overflow-y: auto;
  padding: 28px 28px 40px;
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* ── Hub header ── */
.ws-hub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 16px;
  flex-wrap: wrap;
}
.ws-hub-title {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ── Disclaimer banner ── */
.ws-hub-disclaimer {
  font-size: .74rem;
  color: var(--text-muted);
  background: var(--tg-accent-soft);
  border: 1px solid var(--tg-accent-soft);
  border-radius: var(--radius);
  padding: 9px 14px;
  margin-bottom: 24px;
  line-height: 1.5;
}

/* ── Workspace grid ── */
.ws-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 36px;
}

/* ── Workspace card ── */
.ws-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 18px 14px;
  cursor: pointer;
  transition: border-color .15s, transform .12s, box-shadow .15s;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.ws-card:hover {
  border-color: var(--tg-accent-dim);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.ws-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.ws-card-icon { font-size: 1.4rem; }
.ws-card-meta { display: flex; gap: 5px; flex-wrap: wrap; }
.ws-badge {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 8px;
}
.ws-badge--default  { background: var(--tg-neu-soft); color: rgba(165,175,255,.9); border: 1px solid var(--tg-neu-dim); }
.ws-badge--private  { background: var(--tg-pos-soft);  color: var(--tg-pos-bar);  border: 1px solid var(--tg-pos-dim); }
.ws-badge--shared   { background: var(--tg-chal-soft);  color: var(--tg-chal-bar);  border: 1px solid var(--tg-chal-dim); }

.ws-card-name {
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  line-height: 1.3;
}
.ws-card-desc {
  font-size: .76rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ws-card-stats {
  display: flex;
  gap: 12px;
  margin: 6px 0 4px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.ws-card-stat { text-align: center; }
.ws-card-stat-val {
  display: block;
  font-size: .95rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--accent);
}
.ws-card-stat-label {
  font-size: .62rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ws-card-footer {
  font-size: .68rem;
  color: var(--text-faint);
  margin-top: 2px;
}
.ws-card-open-btn {
  margin-top: 10px;
  width: 100%;
  padding: 8px;
  background: var(--tg-accent-soft);
  border: 1px solid var(--tg-accent-dim);
  border-radius: var(--radius);
  color: #c4b5fd;
  font-size: .78rem;
  cursor: pointer;
  transition: background .12s;
  font-family: var(--font-body);
}
.ws-card-open-btn:hover { background: var(--tg-accent-dim); }

/* ── Hub info section ── */
.ws-hub-info {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-top: 8px;
}
.ws-hub-info-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 14px;
}
.ws-hub-info-item strong {
  display: block;
  font-size: .8rem;
  color: var(--text);
  margin-bottom: 4px;
}
.ws-hub-info-item p {
  font-size: .74rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

/* ── Workspace info banner (inside TG screen) ── */
.ws-info-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--tg-accent-soft);
  border-bottom: 1px solid var(--tg-accent-soft);
  padding: 6px 16px;
  font-size: .76rem;
}
.ws-info-icon { font-size: .95rem; }
.ws-info-text { flex: 1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ws-info-name { font-weight: 600; color: var(--text); }
.ws-info-meta { color: var(--text-faint); font-size: .68rem; }
.ws-info-settings-btn,
.ws-info-exit-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  padding: 3px 9px;
  font-size: .71rem;
  cursor: pointer;
  transition: all .12s;
  font-family: var(--font-body);
  white-space: nowrap;
}
.ws-info-settings-btn:hover,
.ws-info-exit-btn:hover {
  background: var(--bg-4);
  color: var(--text);
}

/* ── Delete button ── */
.btn-danger-ghost {
  background: none;
  border: 1px solid rgba(239,68,68,.3);
  color: #f87171;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all .12s;
  font-family: var(--font-body);
}
.btn-danger-ghost:hover { background: rgba(239,68,68,.08); }

/* ══ RESPONSIVE ══ */
@media (max-width: 768px) {
  .ws-hub-info { grid-template-columns: 1fr; }
  .ws-grid     { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ws-hub-main { padding: 16px 14px 32px; }
  .ws-hub-header { flex-direction: column; align-items: flex-start; }
}