/* CM-iTAD Graph Theme — D3 force-directed visualization
   Aligned with main.css palette: blue #2E89D9, yellow #F4B73B
*/
:root {
  --c-bg:        #0a0e1a;
  --c-bg-2:      #0f1424;
  --c-surface:   #14192a;
  --c-surface-2: #1a2138;
  --c-border:    rgba(86,174,232,0.14);
  --c-border-hi: rgba(86,174,232,0.32);
  --c-text:      #e8eaf0;
  --c-text-dim:  #8a92a6;
  --c-text-mute: #5a6275;
  --c-blue:      #2E89D9;
  --c-blue-hi:   #56AEE8;
  --c-blue-deep: #1F5FA8;
  --c-yellow:    #F4B73B;
  --c-yellow-hi: #FFD27A;
  --c-rose:      #E05A6F;
  --c-mint:      #4FD1A8;
  --sb-w: 304px;
  --dp-w: 340px;
}

* { box-sizing: border-box; }
html, body { height: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; overflow: hidden;
  background: var(--c-bg);
  background-image:
    radial-gradient(900px 500px at 75% 15%, rgba(46,137,217,0.10), transparent 60%),
    radial-gradient(700px 400px at 15% 80%, rgba(244,183,59,0.06), transparent 60%);
  font-family: 'Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  color: var(--c-text);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;        /* no Android pull-to-refresh on canvas */

  /* CSS Grid layout: sidebar | graph | (detail panel slides over) */
  display: grid;
  grid-template-columns: var(--sb-w) 1fr;
  grid-template-rows: 100vh;
}
/* Universal touch-friendly defaults — apply on desktop too (zero impact) */
button, a, label, input { touch-action: manipulation; }
/* No long-press iOS context menu / no text selection on canvas + chrome */
#graph-canvas, #sidebar, #legend, #detail-panel,
.graph-mobile-toggle, .graph-mobile-home, .graph-mobile-backdrop {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
/* Allow text selection inside the detail panel BODY (paper title, authors) */
#detail-panel h2, #detail-panel .meta, #detail-panel #dp-lineages,
#sidebar #search-box {
  -webkit-user-select: text; user-select: text;
}
/* Sidebar inner scroll never bubbles to body */
#sidebar { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* ───────── SVG canvas ───────── */
#graph-canvas {
  width: 100%; height: 100%;
  display: block;
  background: transparent;
  grid-column: 2;
  grid-row: 1;
}
#graph-canvas .node circle {
  stroke: rgba(255,255,255,0.45);
  stroke-width: 0.6px; cursor: pointer;
  transition: stroke 0.12s, stroke-width 0.12s;
}
#graph-canvas .node circle:hover {
  stroke: var(--c-yellow);
  stroke-width: 2px;
  filter: drop-shadow(0 0 6px rgba(244,183,59,0.55));
}
#graph-canvas .node text {
  font-size: 8.5px; fill: #d8e0ee;
  pointer-events: none; font-weight: 500;
  text-shadow: 0 0 4px #000, 0 0 4px #000;
}

/* ───────── Sidebar ───────── */
#sidebar {
  grid-column: 1; grid-row: 1;
  width: var(--sb-w); height: 100vh;
  background: rgba(15,20,36,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--c-text);
  overflow-y: auto;
  border-right: 1px solid var(--c-border);
  z-index: 10;
  display: flex; flex-direction: column;
  padding: 1.1rem 1.2rem 1.2rem;
}

#sidebar .sb-brand {
  display: flex; align-items: center; gap: 0.7rem;
  padding-bottom: 0.9rem; margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--c-border);
  text-decoration: none;
}
#sidebar .sb-brand:hover { opacity: 0.92; }
#sidebar .sb-brand img.logo-png {
  height: 56px; max-height: 56px; max-width: 180px;
  width: auto; display: block; object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
  flex-shrink: 0;
}
/* Defensive global cap in case main.css fails to load on this page. */
img.logo-png { max-height: 64px; max-width: 200px;
               height: auto; width: auto; object-fit: contain; }
#sidebar .sb-brand .sb-tagline {
  font-size: 0.62rem; font-weight: 700; color: var(--c-text-mute);
  letter-spacing: 0.16em; text-transform: uppercase;
  padding-left: 0.6rem; border-left: 1px solid rgba(255,255,255,0.12);
  line-height: 1.3;
}

.ctrl-group { margin-bottom: 1.3rem; }
.ctrl-group h3 {
  font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--c-text-mute);
  margin-bottom: 0.6rem; font-weight: 600;
  display: flex; align-items: center; gap: 0.4rem;
}
.ctrl-group h3::before {
  content: ""; width: 3px; height: 11px; border-radius: 1px;
  background: linear-gradient(180deg, var(--c-blue-hi), var(--c-yellow));
}

#sidebar label {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.83rem; padding: 0.32rem 0.5rem;
  margin: 0.1rem -0.5rem; cursor: pointer;
  border-radius: 4px; transition: background 0.12s, color 0.12s;
  color: var(--c-text-dim);
}
#sidebar label:hover { background: rgba(86,174,232,0.06); color: var(--c-text); }
#sidebar input[type=radio], #sidebar input[type=checkbox] {
  appearance: none; -webkit-appearance: none;
  width: 13px; height: 13px; border-radius: 50%;
  border: 1.5px solid var(--c-text-mute);
  background: transparent;
  flex-shrink: 0; cursor: pointer; position: relative;
  transition: border-color 0.12s;
}
#sidebar input[type=radio]:checked {
  border-color: var(--c-yellow);
  background: var(--c-yellow);
  box-shadow: 0 0 0 3px rgba(244,183,59,0.18);
}
#sidebar input[type=radio]:checked::after {
  content: ""; position: absolute; inset: 2px;
  border-radius: 50%; background: var(--c-bg);
}
#sidebar label:has(input:checked) { color: var(--c-text); }

/* ───────── Toggle-button group (replaces checkbox labels) ───────── */
#sidebar .btn-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
  margin: 0.1rem -0.1rem;
}
#sidebar label.btn-toggle {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.65rem;
  margin: 0;
  border: 1px solid var(--c-border-hi);
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.78rem;
  background: rgba(255,255,255,0.03);
  color: var(--c-text-dim);
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
  user-select: none;
  line-height: 1.2;
  white-space: nowrap;
}
#sidebar label.btn-toggle input[type=checkbox] {
  display: none;
}
#sidebar label.btn-toggle:hover {
  border-color: var(--c-blue-hi);
  color: var(--c-text);
  background: rgba(86,174,232,0.06);
}
#sidebar label.btn-toggle:has(input:checked) {
  background: rgba(46,137,217,0.22);
  border-color: var(--c-blue-hi);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(86,174,232,0.55);
}
#sidebar label.btn-toggle small {
  color: inherit;
  opacity: 0.65;
  margin-left: 0.35rem;
  font-size: 0.66rem;
}

#search-box {
  width: 100%; padding: 0.5rem 0.75rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--c-border-hi);
  color: var(--c-text); border-radius: 5px;
  font-size: 0.85rem; font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#search-box:focus {
  outline: none; border-color: var(--c-blue-hi);
  box-shadow: 0 0 0 3px rgba(46,137,217,0.18);
}
#search-box::placeholder { color: var(--c-text-mute); }

.sb-back {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--c-border);
}
.sb-back a {
  color: var(--c-blue-hi); font-size: 0.82rem;
  text-decoration: none; font-weight: 500;
}
.sb-back a:hover { color: var(--c-yellow); }

/* ───────── Status / Loading overlay ───────── */
#status-overlay {
  position: fixed;
  left: calc(var(--sb-w) + 50%);
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5; pointer-events: none;
  text-align: center;
  font-size: 0.95rem; color: var(--c-text-dim);
}
#status-overlay.error { color: var(--c-rose); }
#status-overlay .spin {
  display: inline-block; width: 28px; height: 28px;
  border: 2.5px solid rgba(86,174,232,0.18);
  border-top-color: var(--c-blue-hi);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  margin-bottom: 0.6rem;
}
@keyframes spin { to { transform: rotate(360deg); } }
#status-overlay.hidden { display: none; }

/* ───────── Tooltip ───────── */
#tooltip {
  position: fixed; pointer-events: none; display: none;
  background: rgba(15,20,36,0.96);
  backdrop-filter: blur(8px);
  border: 1px solid var(--c-border-hi);
  color: var(--c-text);
  padding: 0.55rem 0.8rem;
  border-radius: 6px;
  font-size: 0.78rem; line-height: 1.45;
  max-width: 280px; z-index: 50;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
#tooltip strong { color: var(--c-yellow); font-family: 'JetBrains Mono',monospace; }
#tooltip em { color: var(--c-blue-hi); font-style: normal; }

/* ───────── Legend ───────── */
#legend {
  position: fixed; bottom: 1rem;
  left: calc(var(--sb-w) + 1rem);
  background: rgba(15,20,36,0.88);
  backdrop-filter: blur(10px);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 0.65rem 1rem;
  font-size: 0.72rem; color: var(--c-text-dim);
  max-width: calc(100vw - var(--sb-w) - 2rem);
  display: flex; flex-wrap: wrap; gap: 0.45rem 0.9rem;
  z-index: 8;
}
.leg-item {
  display: flex; align-items: center; gap: 5px;
  white-space: nowrap;
}
.leg-dot {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0; box-shadow: 0 0 0 1px rgba(255,255,255,0.18);
}

/* ───────── Detail panel ───────── */
#detail-panel {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: var(--dp-w);
  background: rgba(15,20,36,0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--c-text); overflow-y: auto;
  padding: 1.4rem 1.3rem;
  border-left: 1px solid var(--c-border);
  z-index: 30;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -8px 0 32px rgba(0,0,0,0.4);
}
#detail-panel.open { transform: translateX(0); }
#detail-panel h2 {
  font-size: 1rem; color: var(--c-text);
  margin-bottom: 1rem; line-height: 1.4; padding-right: 1.5rem;
  letter-spacing: -0.01em;
}
#detail-panel .meta {
  font-size: 0.78rem; color: var(--c-text-mute);
  margin-bottom: 0.4rem; letter-spacing: 0.04em;
}
#detail-panel .meta span { color: var(--c-text); font-weight: 500; }
/* "← Back to Graph" labelled pill — primary close affordance */
#detail-panel .dp-back-btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-bottom: 1rem;
  padding: 0.5rem 1rem 0.5rem 0.85rem;
  background: linear-gradient(135deg, rgba(46,137,217,0.20), rgba(86,174,232,0.10));
  border: 1px solid rgba(86,174,232,0.45);
  border-radius: 999px;
  color: var(--c-blue-hi);
  font-family: inherit; font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  min-height: 36px;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
#detail-panel .dp-back-btn:hover {
  color: var(--c-yellow);
  border-color: rgba(244,183,59,0.55);
  background: linear-gradient(135deg, rgba(244,183,59,0.18), rgba(255,210,122,0.10));
}
#detail-panel .dp-back-btn:hover .dp-arrow { transform: translateX(-3px); }
#detail-panel .dp-back-btn:active { transform: scale(0.97); }
#detail-panel .dp-back-btn .dp-arrow {
  transition: transform 0.18s; font-size: 1rem; line-height: 1; font-weight: 700;
}
#detail-panel .dp-back-btn .dp-back-label { line-height: 1; }

#detail-panel .close-btn {
  position: absolute; top: 0.7rem; right: 0.9rem;
  background: rgba(255,255,255,0.05); border: none;
  color: var(--c-text-dim); width: 30px; height: 30px;
  border-radius: 50%; font-size: 1.2rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
#detail-panel .close-btn:hover { background: rgba(244,183,59,0.18); color: var(--c-yellow); }

#detail-panel .badge {
  display: inline-block; padding: 0.2rem 0.65rem; border-radius: 99px;
  font-size: 0.72rem; margin: 0.15rem 0.15rem 0.15rem 0; font-weight: 600;
  border: 1px solid transparent;
}
#detail-panel .badge.cat {
  background: rgba(244,183,59,0.10); color: var(--c-yellow);
  border-color: rgba(244,183,59,0.25);
}
#detail-panel .badge.dom {
  background: rgba(79,209,168,0.10); color: var(--c-mint);
  border-color: rgba(79,209,168,0.25);
}
#detail-panel a {
  color: var(--c-blue-hi); font-size: 0.85rem;
}
#detail-panel .rel-section {
  margin-top: 1rem; padding-top: 0.9rem;
  border-top: 1px solid var(--c-border);
}
#detail-panel .rel-section > div:first-child {
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c-text-mute); margin-bottom: 0.5rem; font-weight: 600;
}
#detail-panel .rel-chip {
  display: inline-block;
  background: rgba(46,137,217,0.10);
  border: 1px solid rgba(46,137,217,0.25);
  color: var(--c-blue-hi);
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  font-size: 0.74rem;
  margin: 0.15rem;
  font-family: 'JetBrains Mono',monospace;
}
#detail-panel .wiki-link {
  display: block; margin-top: 1.2rem;
  padding: 0.65rem 1rem;
  background: linear-gradient(135deg, var(--c-blue) 0%, var(--c-blue-deep) 100%);
  color: #fff; text-align: center;
  border-radius: 6px; text-decoration: none;
  font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 14px rgba(46,137,217,0.30);
  transition: transform 0.15s, box-shadow 0.2s;
}
#detail-panel .wiki-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(46,137,217,0.45);
}

/* legacy class hooks kept for back-compat */
.link.lineage   { stroke:#E05A6F; stroke-opacity:0.85; }
.link.infra     { stroke:#F4B73B; stroke-opacity:0.85; }
.link.method    { stroke:#4FD1A8; stroke-opacity:0.65; }
.link.domain    { stroke:#56AEE8; stroke-opacity:0.45; }
.link.category  { stroke:#a98bff; stroke-opacity:0.45; }
.link.temporal  { stroke:#8a92a6; stroke-opacity:0.30; }

/* ───────── Mobile-only chrome ─────────
   These elements are display:none on desktop, so they cost nothing in
   the desktop layout pass. They become visible at <=768px below. */
.graph-mobile-toggle,
.graph-mobile-home,
.graph-mobile-backdrop { display: none; }

/* ───────── Tablet — narrow sidebar ─────────
   720–960px keeps the desktop layout but trims the side panels. */
@media (max-width: 960px) and (min-width: 769px) {
  :root { --sb-w: 264px; --dp-w: 300px; }
  #sidebar { padding: 0.85rem; }
}

/* ───────── Mobile (≤ 768px) ─────────
   The 300px sidebar can't share a 375px screen with the graph. Switch
   to a single-column layout where the canvas takes the full viewport
   and the sidebar becomes a bottom-sheet drawer toggled by an FAB. */
@media (max-width: 768px) {
  body {
    /* Single column — sidebar overlays from the bottom */
    grid-template-columns: 1fr;
    grid-template-rows: 100vh;
  }
  #graph-canvas {
    grid-column: 1; grid-row: 1;
  }

  /* Top-left "Home" link — sized for Apple HIG 44pt minimum */
  .graph-mobile-home {
    display: flex; align-items: center;
    position: fixed; top: max(0.55rem, env(safe-area-inset-top));
    left: max(0.7rem, env(safe-area-inset-left));
    z-index: 50;
    min-height: 44px;
    padding: 0.7rem 1.1rem;
    background: rgba(15,20,36,0.85); backdrop-filter: blur(8px);
    border: 1px solid var(--c-border-hi); border-radius: 999px;
    color: var(--c-blue-hi); text-decoration: none;
    font-size: 0.88rem; font-weight: 600; letter-spacing: 0.02em;
    box-shadow: 0 2px 10px rgba(0,0,0,0.35);
    transition: transform 0.12s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .graph-mobile-home:active {
    transform: scale(0.96);
    background: rgba(46,137,217,0.25);
  }

  /* Top-right "Controls" toggle */
  .graph-mobile-toggle {
    display: flex; align-items: center; gap: 0.5rem;
    position: fixed; top: max(0.55rem, env(safe-area-inset-top));
    right: max(0.7rem, env(safe-area-inset-right));
    z-index: 60;
    min-height: 44px;
    padding: 0.65rem 1.1rem 0.65rem 0.95rem;
    background: linear-gradient(135deg, var(--c-blue), var(--c-blue-deep));
    border: 1px solid rgba(255,255,255,0.18); border-radius: 999px;
    color: #fff; font-family: inherit;
    font-size: 0.88rem; font-weight: 600; letter-spacing: 0.04em;
    box-shadow: 0 4px 14px rgba(46,137,217,0.42);
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .graph-mobile-toggle:active {
    transform: scale(0.96);
    box-shadow: 0 2px 8px rgba(46,137,217,0.55);
  }
  .graph-mobile-toggle .t-bar {
    display: block; width: 14px; height: 2px; background: #fff;
    border-radius: 1px; margin: 2px 0;
    transition: transform 0.18s, opacity 0.18s;
  }
  .graph-mobile-toggle[aria-expanded="true"] .t-bar:nth-of-type(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .graph-mobile-toggle[aria-expanded="true"] .t-bar:nth-of-type(2) { opacity: 0; }
  .graph-mobile-toggle[aria-expanded="true"] .t-bar:nth-of-type(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
  .graph-mobile-toggle[aria-expanded="true"] .t-label::before {
    content: "Done"; }
  .graph-mobile-toggle .t-label { display: inline; }
  .graph-mobile-toggle[aria-expanded="true"] .t-label { font-size: 0; }
  .graph-mobile-toggle[aria-expanded="true"] .t-label::before { font-size: 0.82rem; }

  /* Backdrop behind the sidebar drawer */
  .graph-mobile-backdrop {
    display: block; position: fixed; inset: 0;
    background: rgba(5,8,15,0.55); backdrop-filter: blur(2px);
    z-index: 40; opacity: 0; pointer-events: none;
    transition: opacity 0.22s;
  }
  body.controls-open .graph-mobile-backdrop {
    opacity: 1; pointer-events: auto;
  }

  /* Sidebar as bottom-sheet */
  #sidebar {
    grid-column: 1; grid-row: 1;
    position: fixed; left: 0; right: 0; bottom: 0;
    width: 100%; height: 78vh; max-height: 78vh;
    border-right: none;
    border-top: 1px solid var(--c-border-hi);
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.2,0.7,0.2,1);
    z-index: 50;
    padding: 0.9rem 1rem 1.4rem;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.45);
  }
  body.controls-open #sidebar { transform: translateY(0); }
  /* Drag handle hint */
  #sidebar::before {
    content: ""; display: block; width: 38px; height: 4px;
    background: rgba(255,255,255,0.22); border-radius: 2px;
    margin: 0 auto 0.7rem;
  }
  #sidebar .sb-brand { display: none; } /* logo already in the home pill */
  #sidebar .ctrl-group { margin-bottom: 1rem; }
  #sidebar .ctrl-group h3 { font-size: 0.66rem; }

  /* Larger tap targets for radio/checkbox labels (Apple HIG ≥44pt) */
  #sidebar label {
    display: flex; align-items: center;
    min-height: 44px;
    padding: 0.7rem 0.6rem;
    font-size: 0.94rem;
    border-radius: 8px;
    margin: 0.1rem 0;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.12s;
  }
  #sidebar label:active { background: rgba(86,174,232,0.10); }
  #sidebar input[type="radio"],
  #sidebar input[type="checkbox"] {
    width: 20px; height: 20px; margin-right: 0.6rem;
    accent-color: var(--c-blue-hi);
  }
  .btn-toggle {
    min-height: 44px;
    padding: 0.7rem 0.9rem;
    font-size: 0.92rem;
    -webkit-tap-highlight-color: transparent;
  }
  .btn-toggle:active { transform: scale(0.97); }

  /* Search input — 16px to suppress iOS auto-zoom + 44px min height */
  #search-box {
    font-size: 16px;
    min-height: 44px;
    padding: 0.7rem 0.85rem;
  }

  /* Sidebar back link */
  .sb-back a, #sidebar a {
    min-height: 44px; display: inline-flex; align-items: center;
    padding: 0.5rem 0.6rem;
  }

  /* Detail panel becomes full-screen sheet */
  #detail-panel {
    position: fixed; inset: 0; width: 100%; max-width: 100%;
    height: 100vh; max-height: 100vh;
    border-left: none; border-radius: 0;
    transform: translateY(100%);
    transition: transform 0.26s cubic-bezier(0.2,0.7,0.2,1);
    padding: 2.6rem 1.1rem 1.4rem;
  }
  #detail-panel.open { transform: translateY(0); }
  /* Drag handle visual hint — also signals "swipe down to dismiss" */
  #detail-panel::before {
    content: ""; display: block;
    position: absolute; top: 0.55rem; left: 50%;
    transform: translateX(-50%);
    width: 44px; height: 4px;
    background: rgba(255,255,255,0.28); border-radius: 2px;
  }
  /* Make the back-pill bigger + more prominent on mobile */
  #detail-panel .dp-back-btn {
    margin-top: 0.4rem; margin-bottom: 1.1rem;
    min-height: 44px;
    padding: 0.65rem 1.15rem 0.65rem 0.95rem;
    font-size: 0.92rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  }
  /* Hide the small × on mobile — labelled pill is the primary affordance */
  #detail-panel .close-btn-x { display: none; }

  /* Legend repositioned (desktop puts it next to the sidebar) */
  #legend {
    left: 0.6rem; right: auto; bottom: 0.6rem;
    padding: 0.45rem 0.6rem; font-size: 0.62rem;
    max-width: calc(100vw - 1.2rem);
  }

  /* Status overlay */
  #status-overlay { padding: 1rem; text-align: center; }

  /* Allow native pinch-zoom on the canvas alongside D3 zoom */
  #graph-canvas { touch-action: pan-x pan-y; }

  /* Bigger node hit-targets via wide TRANSPARENT stroke. SVG hit-testing
     under pointer-events: visiblePainted counts paint area (fill +
     stroke), so a 14px-wide near-transparent stroke gives every node a
     finger-friendly hit radius without changing the visual size. The
     existing thin opaque stroke on top stays the visible outline. */
  #graph-canvas .node circle {
    stroke-width: 14px;
    stroke: rgba(255,255,255,0.001);
    paint-order: stroke fill;
    cursor: pointer;
  }
  /* Visual outline on tap/hover */
  #graph-canvas .node circle:hover,
  #graph-canvas .node circle:active {
    stroke: var(--c-yellow);
    stroke-width: 14px;
    filter: drop-shadow(0 0 8px rgba(244,183,59,0.6));
  }
}

/* iPhone-SE-class very small phones */
@media (max-width: 380px) {
  .graph-mobile-home { font-size: 0.76rem; padding: 0.4rem 0.7rem; }
  .graph-mobile-toggle { font-size: 0.76rem; padding: 0.4rem 0.75rem 0.4rem 0.6rem; }
  #sidebar { height: 84vh; max-height: 84vh; }
}

/* ── Landscape on small phones — short height, wide aspect ──────────
   When rotated, 78vh of a 320–500px-tall screen is only 250–390px,
   which barely fits 6 control groups. Drop drawer to 92vh of dynamic
   viewport height so it dominates the screen while open (the user
   came here to use the controls); the canvas stays available
   immediately after dismissing. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  #sidebar {
    height: 92vh; max-height: 92vh;
    padding: 0.7rem 1rem 1rem;
  }
  /* Ensure 2-column layout for control groups in landscape so they fit
     side-by-side instead of forcing scroll. */
  #sidebar .ctrl-group { display: inline-block; vertical-align: top;
                          width: 48%; margin-right: 1%; margin-bottom: 0.6rem; }
  #sidebar .ctrl-group:nth-of-type(odd) { margin-right: 1%; }
  #sidebar h3 { font-size: 0.6rem; }
  /* Mobile chrome — pull both pills to the same row */
  .graph-mobile-home,
  .graph-mobile-toggle { padding: 0.32rem 0.7rem; font-size: 0.76rem; }
  /* Detail panel in landscape — center column instead of full screen */
  #detail-panel { padding: 2.2rem 1rem 1rem; }
}

/* ── iOS Safari URL-bar fix ─────────────────────────────────────────
   The graph canvas + drawers use 100vh; iOS Safari counts hidden URL
   bar in vh, pushing content. 100dvh follows the actual visible area.
   Fall back to vh on browsers that don't support dvh. */
@supports (height: 100dvh) {
  body { grid-template-rows: 100dvh; }
  #sidebar, #detail-panel { height: 100dvh; max-height: 100dvh; }
  @media (max-width: 768px) {
    #sidebar { height: 78dvh; max-height: 78dvh; }
  }
  @media (max-width: 380px) {
    #sidebar { height: 84dvh; max-height: 84dvh; }
  }
  @media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    #sidebar { height: 92dvh; max-height: 92dvh; }
  }
}