*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    /* page background */
    --bg:        transparent;
    --bg-2:      #c3c3c3;

    /* brand teal — panels, pills, cards, tooltips, chips, muted text */
    --brand:     #1d2e32cc;
    --ink:       #2c3333;   /* dark teal accent: logo, active rows, spinners */
    --border:    #383838;

    /* text on dark panels */
    --text:      #e2e8f0;
    --text-dim:  #cbd5e1;   /* secondary text on dark panels */
    --white:     #ffffff;
    --slate:     #64748b;   /* secondary grey inside cards */

    /* accents */
    --accent:    #38bdf8;   /* counts, headings, tooltip titles */
    --highlight: #ffd400;   /* hover emphasis */
    --sky:       #7dd3fc;    /* light-blue links in cards */
    --violet:    #7c3aed;
    --violet-2:  #c4b5fd;    /* light-purple text */
    --green:     #00ff88;
    --amber:     #f59e0b;

    /* misc chrome */
    --pin:       #0d0d2b;   /* sticky "Show All" legend row */
  }

  html {
    background-color: transparent!important;
  }
  body {
    background-color: transparent!important;

  
    color: var(--text);
    font-family: 'Inter', "Segoe UI", Arial, sans-serif;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;


  }


  /* ── Sidebar brand (logo + stats), replaces the old top bar ─────────── */
  .brand {
    padding: 16px 20px 14px;
    border-bottom: 0;
    flex-shrink: 0;
  }

  .logo {
    display: flex;
    align-items: center;
  }

  .logo h1 {
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-size: 24px!important;
    color: #395b64;
    line-height: 1;
  }

  .health-word { font-weight: 400; }
  .map-word { font-weight: 600; }

  .rx-mark { height: 31px; width: auto; flex-shrink: 0; }

  .acu-cell-link {
    display: inline-flex;
    line-height: 0;
  }

  .brand-divider {
    width: 1px;
    height: 28px;
    margin: 0 17px;
    background: rgba(44, 51, 51, 0.22);
  }

  .product-lockup {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    line-height: 1;
    text-decoration: none;
  }

  .product-lockup:hover h1 { color: #395b64; }

  .logo svg { flex-shrink: 0; }

  /* ── Main layout ─────────────────────────────────── */
  main {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    overflow: hidden;
  }

#acu-cell-logo{
width: 150px;
}


  /* ── Left panel ──────────────────────────────────── */
  .left-panel {
    width: 390px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 0;
    overflow: hidden;
  }

  .search-section {
    padding: 20px;
    padding-top: 0;
    border-bottom: 0;
  }

  .search-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--brand);
    text-transform: uppercase;
    margin-bottom: 10px;
  }

  .search-row {
    display: flex;
    gap: 8px;
  }

  /* Input + loop button joined into one rounded pill (acu-cell style). */
  .search-pill {
    flex: 1;
    display: flex;
    align-items: stretch;
    background: var(--brand);
    border: none;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    transition: box-shadow 0.2s;
  }

  .search-pill:focus-within {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45), 0 0 0 3px #00e5ff22;
  }

  #query {
    flex: 1;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 10px 18px;
    padding-right: 2px;
    box-shadow: inset -16.8px 0 16.8px -10px rgba(0, 0, 0, 0.233);
    color: var(--text);
    font-size: 14px;
    outline: none;
  }

  #query::placeholder { color: #ddd; }

  /* the loop button sits flush inside the pill; the pill's rounding clips its right end */
  #search-btn { border-radius: 0; }
  /* nudge the glyph off the clipped edge so it sits optically centred in what is visible */
  #search-btn svg { transform: translateX(-3px); }
  /* standalone reset button: shares the question pills' fill and radius so it reads as part of the
     same family, rather than a bare glyph floating beside the search pill */
  #clear-btn {
    flex: 0 0 auto;
    width: auto;
    min-height: 38px;
    padding: 5px 11px;
    /* two stacked words rather than a glyph: "Reset graph" says what it does, and stacking keeps
       the button as narrow as the search pill is tall */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    background: rgba(57, 91, 100, 0.10);
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--brand);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  #clear-btn:hover { background: rgba(57, 91, 100, 0.20); color: var(--ink); }
  #clear-btn:hover::after { opacity: 0; }

  .search-btn {
    background: #036da2;
    border: none;
    border-radius: 8px;
    padding: 10px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    /* named properties, not `all`: `all` animates layout properties too, for no visible gain */
    transition: background-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
  }

  .search-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #ffffff22, transparent);
    opacity: 0;
    transition: opacity 0.2s;
  }

  .search-btn:hover::after { opacity: 1; }
  .search-btn:hover { background: #8b0000; }
  .search-btn:active { transform: scale(0.97); }
  .search-btn:disabled { opacity: 0.5; cursor: not-allowed; }

  .sliders-row {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: var(--brand);
  }

  .sliders-row .slider-label { white-space: nowrap; }

  /* the live value reads as a value, not as more label text */
  #overview-pct-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    background: rgba(57, 91, 100, 0.12);
    border-radius: 6px;
    padding: 2px 7px;
    white-space: nowrap;
  }

  /* Custom track/thumb: the native control renders as an OS widget and ignores the palette.
     --fill is set from JS so the filled portion tracks the value on WebKit (Firefox uses
     ::-moz-range-progress instead, which needs no JS). */
  .sliders-row input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 18px;
    background: transparent;
    cursor: pointer;
  }

  .sliders-row input[type=range]::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 3px;
    background: linear-gradient(var(--brand), var(--brand)) 0 / var(--fill, 100%) 100% no-repeat,
                rgba(57, 91, 100, 0.22);
  }

  .sliders-row input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    margin-top: -5px;                /* centres the thumb on the 5px track */
    border-radius: 50%;
    background: var(--white);
    border: 3px solid var(--brand);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    transition: transform 0.12s ease;
  }

  .sliders-row input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.12); }

  .sliders-row input[type=range]::-moz-range-track {
    height: 5px; border-radius: 3px; background: rgba(57, 91, 100, 0.22);
  }
  .sliders-row input[type=range]::-moz-range-progress {
    height: 5px; border-radius: 3px; background: var(--brand);
  }
  .sliders-row input[type=range]::-moz-range-thumb {
    width: 15px; height: 15px; border-radius: 50%;
    background: var(--white); border: 3px solid var(--brand);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  }

  /* example queries */
  /* One question per row, each stretched to the panel width: as a wrapping row the cards sized to
     their text, so a short question left a ragged gap beside it. */
  .examples {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;                /* filled cards need more air between them than outlines did */
  }

  /* Soft filled cards rather than outlines: at this density a column of outlined lozenges reads as
     one striped wall, and a 20px radius fights the questions that wrap to two lines. */
  .example-chip {
    position: relative;
    font-size: 12.5px;
    line-height: 1.45;
    padding: 8px 12px 8px 14px;      /* extra left room for the hover bar */
    border-radius: 10px;
    background: rgba(57, 91, 100, 0.10);   /* var(--brand) at 10% */
    border: 1px solid transparent;
    color: var(--ink);                     /* --brand was too light against the 10% fill */
    cursor: pointer;
    overflow: hidden;
    /* named properties, not `all`: `all` also animates layout and fires on every hover */
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
  }

  .example-chip::before {              /* accent bar wipes in from the left on hover */
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--brand);
    transform: scaleY(0);
    transition: transform 0.15s ease;
  }

  .example-chip:hover {
    background: rgba(57, 91, 100, 0.19);
    color: var(--ink);
    transform: translateX(2px);
  }

  .example-chip:hover::before { transform: scaleY(1); }


  /* ── Answer section ──────────────────────────────── */
  .answer-section {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    padding-top: 0;
    padding-right: 2px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }

  /* hidden by default; the mobile breakpoint at the end of this file turns it on */
  .mobile-notice { display: none; }

  .answer-section::-webkit-scrollbar { width: 4px; }
  .answer-section::-webkit-scrollbar-track { background: transparent; }
  .answer-section::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

  .answer-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 90%;
    gap: 16px;
    opacity: 0.8;
    display: none!important;
  }

  .answer-placeholder svg { width: 48px; height: 48px; }
  .answer-placeholder p { font-size: 13px; color: var(--brand); text-align: center; }

  /* loading */
  .loading-ring {
    display: none;
    justify-content: center;
    align-items: center;
    padding: 40px;
  }

  .loading-ring.active { display: flex; flex-direction: column; gap: 16px; }

  .ring {
    width: 44px;
    height: 44px;
    border: 3px solid var(--border);
    border-top-color: var(--ink);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }

  @keyframes spin { to { transform: rotate(360deg); } }

  .loading-text {
    font-size: 12px;
    color: var(--brand);
    animation: pulse 1.5s ease-in-out infinite;
  }

  @keyframes pulse { 0%,100%{opacity:0.4} 50%{opacity:1} }

  /* answer card */
  .answer-card {
    display: none;
    background: var(--brand);
    border: none;
    border-radius: 12px;
    overflow: hidden;
    /* lifts off the page like the search pill and the graph panels, instead of sitting flat */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    animation: fadeUp 0.4s ease;
  }

  .answer-card.active { display: block; }

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .answer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: #ffffff05;
  }

  .answer-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--white);
    text-transform: uppercase;
  }

  .answer-body {
    padding: 16px;
    font-size: 14px;
    line-height: 1.7;
  }

  /* Four levels, four jobs: white = which entity this block is about, grey = which direction the
     relationships run, amber = the relationship itself, blue = a clickable entity. Everything used
     to land on one blue, which is why the panel read as mush. */
  .answer-body h1,.answer-body h2,.answer-body h3 {
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 5px;
    margin: 18px 0 8px;
  }

  .answer-body p { margin-bottom: 10px; }
  .answer-body ul,.answer-body ol { padding-left: 18px; margin-bottom: 10px; }
  .answer-body li { margin-bottom: 4px; }
  .answer-body strong { color: var(--violet-2); }
  /* the direction line ("Zinc ->" / "-> Zinc") is a bold on its own inside a paragraph */
  .answer-body p > strong {
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  /* the relationship name, inside a bullet */
  .answer-body li > strong { color: var(--amber); font-weight: 600; }

  /* Entity names in the connections panel focus that entity in the graph. They must look clickable:
     an inert list of names beside a live graph is the whole reason this panel felt pointless. */
  .answer-body a[href^="#n/"] {
    color: var(--sky);
    text-decoration: none;
    border-bottom: 1px dotted rgba(125, 211, 252, 0.45);
    cursor: pointer;
    transition: color 0.12s ease, border-color 0.12s ease;
  }
  .answer-body a[href^="#n/"]:hover {
    color: var(--white);
    border-bottom-color: var(--white);
  }

  /* qualifiers are an aside on the claim, not part of the relationship's name */
  .answer-body em {
    color: var(--text-dim);
    opacity: 0.75;
    font-size: 12.5px;
    font-style: normal;
  }
  .answer-body code {
    background: #1e1e4a;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
  }

  /* seeds */
  /* ── Right panel / graph ─────────────────────────── */
  .right-panel {
    flex: 1;
    position: relative;
    overflow: hidden;
  }

  #graph-container {
    position: absolute;
    inset: 0;
  }

  /* rich HTML edge labels (overlay above the canvas; canvas keeps mouse events) */
  #edge-label-layer {
    position: absolute; inset: 0; overflow: hidden;
    pointer-events: none; z-index: 5;
  }
  .edge-label {
    position: absolute;
    /* Pinned at the origin: the label's position is carried in the transform, not in left/top, so a
       re-seat on every canvas frame stays on the compositor instead of dirtying layout. */
    left: 0;
    top: 0;
    /* positionEdgeLabels() replaces this inline, adding the offset, the line's angle and the zoom */
    transform: translate(-50%, -50%);
    transform-origin: 50% 50%;
    will-change: transform;
    padding: 6px 11px 3px;
    font: 600 11px/1 Inter, sans-serif;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #eef5ff;
    white-space: nowrap;
    border-radius: 999px;
    background: linear-gradient(165deg, rgba(38,52,74,.97) 0%, rgba(17,24,44,.97) 100%);
    border: 1px solid rgba(125,211,252,.30);
    border-top-color: rgba(198,232,255,.55);      /* bevel: lit top edge */
    border-bottom-color: rgba(0,0,0,.55);          /* bevel: shaded bottom edge */
    box-shadow:
      0 3px 8px rgba(0,0,0,.55),                    /* drop shadow */
      0 1px 2px rgba(0,0,0,.40),
      0 0 0 3px rgba(0,229,255,.05),                /* faint cyan halo */
      inset 0 1px 0 rgba(255,255,255,.14),          /* inner top highlight */
      inset 0 -1px 0 rgba(0,0,0,.35);               /* inner bottom shade */
    text-shadow: 0 1px 2px rgba(0,0,0,.70);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    pointer-events: auto;      /* labels are hoverable (the layer itself stays click-through);
                                  nothing to click since the card shows everything an edge has */
    cursor: default;           /* don't inherit the pointer from a pill sitting underneath */
  }
  .edge-label:hover {
    border-color: var(--highlight);
    color: var(--white);
    box-shadow:
      0 3px 10px rgba(0,0,0,.60),
      0 0 0 3px rgba(255,212,0,.16),
      inset 0 1px 0 rgba(255,255,255,.18),
      inset 0 -1px 0 rgba(0,0,0,.35);
  }

  .graph-summary {
    position: absolute;
    top: 14px;
    left: 16px;
    z-index: 3;
    max-width: min(420px, calc(100% - 92px));
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    background: var(--brand);
    backdrop-filter: blur(8px);
    pointer-events: none;
    box-shadow: 0 8px 18px #00000055;
  }

  .graph-summary-title {
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .graph-summary-detail {
    margin-top: 4px;
    color: var(--text-dim);
    font-size: 12px;
    line-height: 1.35;
  }
  .graph-summary-detail .count { color: var(--accent); }

  /* The sample slider lives in the summary box now: separated by a hairline, light on dark, and it
     must take the pointer even though the box around it is deliberately click-through. */
  .graph-summary .sliders-row {
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-dim);
    pointer-events: auto;
  }
  /* already 11px via .sliders-row — it was the lowercase that made it read smaller than "TOP 100%" */
  .graph-summary .slider-label { font-size: 11px; font-weight: 700; text-transform: uppercase; }
  .graph-summary #overview-pct-label { color: var(--white); background: rgba(255, 255, 255, 0.14); }
  .graph-summary .sliders-row input[type=range]::-webkit-slider-runnable-track {
    background: linear-gradient(var(--accent), var(--accent)) 0 / var(--fill, 100%) 100% no-repeat,
                rgba(255, 255, 255, 0.18);
  }
  .graph-summary .sliders-row input[type=range]::-webkit-slider-thumb { border-color: var(--accent); }
  .graph-summary .sliders-row input[type=range]::-moz-range-track    { background: rgba(255, 255, 255, 0.18); }
  .graph-summary .sliders-row input[type=range]::-moz-range-progress { background: var(--accent); }
  .graph-summary .sliders-row input[type=range]::-moz-range-thumb    { border-color: var(--accent); }

  /* graph empty state */
  .graph-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    pointer-events: none;
    transition: opacity 0.3s;
  }

  .graph-empty.hidden { opacity: 0; }

  .graph-empty-icon {
    width: 80px;
    height: 80px;
    opacity: 0.15;
  }

  .graph-empty-text {
    font-size: 13px;
    color: var(--brand);
    opacity: 0.6;
  }

  /* ── Rich graph loader (fetch + physics stabilization) ───────────────── */
  .graph-loader {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 20;
    pointer-events: none;
  }
  .graph-loader.visible { display: flex; }
  .graph-loader-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    min-width: 260px;
    padding: 26px 30px;
    background: var(--brand);
    border: none;
    border-radius: 14px;
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  }
  .graph-loader-ring {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 3px solid rgba(0,229,255,0.15);
    border-top-color: var(--ink);
    animation: spin 0.9s linear infinite;
  }
  .graph-loader-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--white);
    letter-spacing: 0.02em;
  }
  .graph-loader-stats {
    display: flex;
    gap: 18px;
    font-size: 12px;
    color: var(--text-dim);
  }
  .graph-loader-stats b { color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 700; }
  .graph-loader-bar {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
  }
  .graph-loader-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 3px;
    background: var(--brand);
    transition: width 0.2s ease;
  }
  .graph-loader-phase {
    font-size: 11px;
    color: var(--text-dim);
    opacity: 0.85;
    font-variant-numeric: tabular-nums;
  }
  /* busy (indeterminate) mode: just the spinner + title, no stats/progress */
  .graph-loader.busy .graph-loader-stats,
  .graph-loader.busy .graph-loader-bar,
  .graph-loader.busy .graph-loader-phase { display: none; }

  /* chip mode: a small top-right pill for the staged reveal, so the graph filling in
     underneath stays fully visible instead of being covered by the loader panel */
  /* tucked under the summary box at top-left, not floating opposite it */
  .graph-loader.chip { align-items: flex-start; justify-content: flex-start; padding: 80px 16px 14px 16px; }
  .graph-loader.chip .graph-loader-card {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px 15px;
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  }
  .graph-loader.chip .graph-loader-ring {
    width: 15px; height: 15px; border-width: 2px;
    border-color: rgba(56,189,248,0.2);          /* same blue as the summary counts */
    border-top-color: var(--accent);
  }
  .graph-loader.chip .graph-loader-title { font-size: 12px; font-variant-numeric: tabular-nums; }
  .graph-loader.chip .graph-loader-stats,
  .graph-loader.chip .graph-loader-bar,
  .graph-loader.chip .graph-loader-phase { display: none; }

  /* ── Legend ──────────────────────────────────────── */
  /* A chip, not loose text: bare bold type on the canvas reads as a stray node label and collides
     with the graph when it fills the viewport. */
  .graph-bottom {
    position: absolute;
    bottom: 14px;
    left: 16px;
    /* Bounded on both sides. With only `left` it is shrink-to-fit, free to grow past the viewport,
       so nothing inside it ever has a reason to contract. Items still pack left. */
    right: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .graph-note {
    min-width: 0;            /* the flex-item default that otherwise refuses to shrink below its text */
    max-width: 540px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    line-height: 1.4;
    color: #4a4a4a;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 6px 11px;
    pointer-events: none;
    overflow: hidden;
  }

  /* The ellipsis has to live on the box whose INLINE content overflows. .graph-note is a flex
     container — it has no inline content of its own, so text-overflow on it does nothing and the
     text just gets clipped flat. min-width:0 undoes a flex item's default refusal to shrink below
     its own text width. */
  .graph-note > span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .graph-note::before {
    content: "!";
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #d9a400;
    color: var(--white);
    font-size: 10px;
    font-weight: 700;
    display: grid;
    place-items: center;
  }

  .graph-footer {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #4a4a4a;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    flex: 0 0 auto;          /* the note gives way first; the footer keeps its links intact */
  }

  .footer-separator {
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
  }

  .graph-footer a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* ── Methodology panel ───────────────────────────── */
  .modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;                      /* above the tooltips, which sit at 100/101 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
  }
  .modal-backdrop[hidden] { display: none; }

  .modal-card {
    position: relative;
    width: 100%;
    max-width: 920px;
    max-height: 88vh;
    overflow-y: auto;
    overscroll-behavior: contain;      /* scrolling the panel never scrolls the graph behind it */
    border: 1px solid rgba(125, 211, 252, 0.25);
    border-radius: 20px;
    background: #17282d;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
    color: var(--text);
    font-size: 13.5px;
    line-height: 1.6;
  }
  .modal-card::-webkit-scrollbar { width: 8px; }
  .modal-card::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.28); border-radius: 4px; }
  .modal-card::-webkit-scrollbar-track { background: transparent; }

  .modal-title {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--white);
    margin-bottom: 10px;
    padding-right: 28px;               /* clear of the close button */
  }
  .modal-card h3 {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--accent);
    margin-top: 18px;
    margin-bottom: 4px;
  }
  .modal-card p { color: var(--text-dim); }
  .modal-card b { color: var(--white); font-weight: 700; }
  .modal-card em, .modal-card i { color: var(--white); font-style: italic; }

  .modal-close {
    position: sticky;
    z-index: 2;
    top: 16px;
    float: right;
    margin: 0 16px -38px 0;
    width: 36px;
    height: 36px;
    background: rgba(8, 18, 21, 0.72);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50%;
    color: var(--white);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  .modal-close:hover { background: rgba(255,255,255,0.12); color: var(--white); }

  .methodology-hero {
    padding: 34px 38px 30px;
    background:
      radial-gradient(circle at 88% 10%, rgba(56, 189, 248, 0.18), transparent 34%),
      linear-gradient(135deg, rgba(57, 91, 100, 0.96), rgba(23, 40, 45, 0.9));
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  .methodology-kicker {
    margin-bottom: 8px;
    color: var(--accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .methodology-lead {
    max-width: 720px;
    color: #dce8ec !important;
    font-size: 15px;
    line-height: 1.65;
  }

  .methodology-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin: 0;
    background: rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  .methodology-stat {
    min-height: 92px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px 20px;
    background: rgba(11, 28, 32, 0.88);
  }

  .methodology-stat b {
    color: var(--accent);
    font-size: 24px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
  }

  .methodology-stat span {
    margin-top: 5px;
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .methodology-flow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 30px 34px;
  }

  .methodology-step {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 14px;
    padding: 19px;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  }

  .methodology-step-number {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(56, 189, 248, 0.14);
    border: 1px solid rgba(56, 189, 248, 0.28);
    color: var(--accent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
  }

  .methodology-step:nth-child(3n + 2) .methodology-step-number {
    background: rgba(0, 168, 120, 0.14);
    border-color: rgba(0, 168, 120, 0.32);
    color: #5ee0b5;
  }

  .methodology-step:nth-child(3n) .methodology-step-number {
    background: rgba(224, 152, 12, 0.14);
    border-color: rgba(224, 152, 12, 0.32);
    color: #f7bd50;
  }

  .methodology-step h3 {
    margin: 0 0 5px;
    color: var(--white);
    font-size: 14px;
    line-height: 1.35;
  }

  .methodology-step p {
    color: #bfcdd2;
    font-size: 12.5px;
    line-height: 1.58;
  }

  .methodology-models {
    margin: 0 34px 26px;
    padding: 24px;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 16px;
    background: rgba(8, 24, 28, 0.64);
  }

  .methodology-models-heading {
    margin-bottom: 16px;
  }

  .methodology-models-heading .methodology-kicker {
    margin-bottom: 3px;
  }

  .methodology-models-heading h3 {
    margin: 0;
    color: var(--white);
    font-size: 16px;
  }

  .methodology-model-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .methodology-model-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 15px;
    align-items: center;
    min-height: 126px;
    padding: 18px;
    border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
    border-radius: 14px;
    background: linear-gradient(145deg, color-mix(in srgb, currentColor 12%, transparent), rgba(255,255,255,0.018));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  }

  .methodology-model-openai { color: #10a37f; }
  .methodology-model-claude { color: #d97757; }

  .methodology-model-logo {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: currentColor;
    box-shadow: 0 7px 18px rgba(0,0,0,0.28);
  }

  .methodology-model-logo svg {
    width: 29px;
    height: 29px;
    color: var(--white);
    fill: currentColor;
  }

  .methodology-model-card h4 {
    margin: 0 0 6px;
    color: currentColor;
    font-size: 15px;
    line-height: 1.3;
  }

  .methodology-model-card p {
    color: #c4d1d5;
    font-size: 12px;
    line-height: 1.55;
  }

  .methodology-example {
    margin: 0 34px 26px;
    padding: 24px;
    border: 1px solid rgba(56, 189, 248, 0.22);
    border-radius: 16px;
    background:
      radial-gradient(circle at 50% 0, rgba(56, 189, 248, 0.12), transparent 52%),
      rgba(9, 24, 29, 0.78);
  }

  .methodology-example-label {
    color: var(--accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-align: center;
    text-transform: uppercase;
  }

  .methodology-quote {
    margin: 8px auto 20px;
    max-width: 600px;
    color: var(--white) !important;
    font-size: 14px;
    font-style: italic;
    text-align: center;
  }

  .methodology-triple {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
  }

  .methodology-node {
    padding: 10px 16px;
    border: 2px solid rgba(255,255,255,0.55);
    border-radius: 999px;
    color: #071012;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    box-shadow: 0 6px 16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.4);
  }

  .methodology-node-source {
    background: linear-gradient(135deg, #4f8ef7, #4fb3e8);
  }

  .methodology-node-target {
    background: linear-gradient(135deg, #e0980c, #eae64a);
  }

  .methodology-relation {
    position: relative;
    min-width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--white);
    text-align: center;
  }

  .methodology-relation::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
    transform: translateY(-50%);
  }

  .methodology-relation::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -1px;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--accent);
    border-right: 2px solid var(--accent);
    transform: translateY(-50%) rotate(45deg);
  }

  .methodology-relation b,
  .methodology-relation small {
    position: relative;
    z-index: 1;
    padding: 1px 8px;
    background: #10252a;
  }

  .methodology-relation b {
    color: var(--white);
    font-size: 12px;
    text-transform: uppercase;
  }

  .methodology-relation small {
    color: var(--text-dim);
    font-size: 9.5px;
  }

  .methodology-example-note {
    margin-top: 19px;
    color: #9fb1b7 !important;
    font-size: 11.5px;
    text-align: center;
  }

  .methodology-boundary {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 14px;
    margin: 0 34px 26px;
    padding: 20px;
    border: 1px solid rgba(224, 152, 12, 0.28);
    border-radius: 14px;
    background: rgba(224, 152, 12, 0.075);
  }

  .methodology-boundary-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #d9a400;
    color: var(--white);
    font-size: 17px;
    font-weight: 800;
  }

  .methodology-boundary h3 {
    margin: 0 0 4px;
    color: #ffd978;
    font-size: 14px;
  }

  .methodology-boundary p {
    color: #cfcbc0;
    font-size: 12.5px;
    line-height: 1.6;
  }

  .methodology-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 34px 28px;
    border-top: 1px solid rgba(255,255,255,0.08);
    background: rgba(8, 20, 23, 0.38);
  }

  .methodology-footer div {
    display: flex;
    flex-direction: column;
  }

  .methodology-footer b {
    font-size: 13px;
  }

  .methodology-footer span {
    color: var(--text-dim);
    font-size: 11.5px;
  }

  .methodology-footer a {
    flex: 0 0 auto;
    padding: 9px 14px;
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 9px;
    background: rgba(56, 189, 248, 0.12);
    color: var(--white);
    font-size: 11.5px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }

  .methodology-footer a:hover {
    background: rgba(56, 189, 248, 0.22);
    border-color: rgba(56, 189, 248, 0.7);
  }

  @media (max-width: 720px) {
    .modal-backdrop { padding: 10px; }
    .modal-card { max-height: 94vh; border-radius: 14px; }
    .methodology-hero { padding: 28px 22px 24px; }
    .modal-title { font-size: 25px; }
    .methodology-stats { grid-template-columns: repeat(2, 1fr); }
    .methodology-flow { grid-template-columns: 1fr; padding: 22px 18px; }
    .methodology-models {
      margin-right: 18px;
      margin-left: 18px;
    }
    .methodology-model-grid { grid-template-columns: 1fr; }
    .methodology-example,
    .methodology-boundary { margin-right: 18px; margin-left: 18px; }
    .methodology-triple { flex-direction: column; }
    .methodology-relation { width: 2px; min-width: 2px; height: 66px; }
    .methodology-relation::before {
      top: 0;
      bottom: 0;
      left: 0;
      right: auto;
      width: 2px;
      height: auto;
      transform: none;
    }
    .methodology-relation::after {
      top: auto;
      right: auto;
      bottom: 0;
      left: -3px;
      transform: rotate(135deg);
    }
    .methodology-relation b,
    .methodology-relation small { white-space: nowrap; }
    .methodology-footer {
      align-items: flex-start;
      flex-direction: column;
      padding-right: 22px;
      padding-left: 22px;
    }
  }

  .graph-footer a:hover {
    color: var(--brand);
  }

  /* relationship panel (when present) stacked above the type panel, bottom-right */
  .legend-stack {
    position: absolute;
    bottom: 46px;            /* clearance above the disclaimer/footer row */
    right: 16px;
    width: 220px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .legend {
    background: var(--brand);
    border: none;
    border-radius: 10px;
    padding: 12px 14px;
    backdrop-filter: blur(8px);
  }
  .legend.legend-hidden { display: none; }
  /* the relationship list is transient — keep it shorter so the type list stays reachable */
  #edge-legend .legend-items { max-height: 180px; }

  .legend-title {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 8px;
  }

  .legend-items {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 386px;       /* shortened with the lift, so the panel's top edge stays put */
    overflow-y: auto;
    padding: 0 4px;          /* left+right room so the negative-margin rows & dot rings aren't clipped */
  }
  .legend-items::-webkit-scrollbar { width: 6px; }
  .legend-items::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

  .legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;                                  /* +2px */
    /* Plain light text: the former warm-yellow + glow softened every glyph edge at 13px, and with a
       coloured dot and a coloured count each row carried three competing colours. */
    color: var(--text);
    cursor: pointer;
    border-radius: 5px;
    padding: 2px 4px;
    margin: 0 -4px;
    transition: background-color 0.12s ease, color 0.12s ease;
  }
  .legend-item:hover  { background: rgba(255,255,255,0.09); color: var(--white); }
  .legend-item:hover .legend-count { opacity: 1; }
  /* cyan-on-ink was unreadable; keep the tint but let the text stay light */
  .legend-item.active { background: rgba(56,189,248,0.20); color: var(--white); }
  .legend-item.active .legend-count { opacity: 1; color: var(--white); }
  /* Selected filters lift out of the list on a white glow. The Show-All row keeps the cyan state,
     since its "active" means the opposite thing: nothing is filtered. */
  .legend-item.active:not(.legend-all) {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45), 0 0 10px rgba(255, 255, 255, 0.35);
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.45);
  }
  .legend-item.active:not(.legend-all) .legend-count { opacity: 1; color: #fff; }
  /* keep the "Show All" reset row pinned to the top while the list scrolls, casting a shadow
     DOWN onto the rows sliding beneath it so it reads as a layer above them, not part of them */
  /* A LIGHTER tint of the panel, not a near-black bar: --pin read as a hole punched in the panel
     rather than as the control sitting above it. */
  .legend-item.legend-all {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(255, 255, 255, 0.10);
    color: var(--white);
    font-weight: 600;
    box-shadow: 0 6px 9px -5px rgba(0, 0, 0, 0.55);
  }
  .legend-item.legend-all:hover {
    background: rgba(255, 255, 255, 0.16);
  }
  .legend-item.legend-all.active {
    background: rgba(56, 189, 248, 0.24);
  }
  /* With nothing filtered there is nothing to show all of — the row keeps its place (and its
     total), but stops labelling an action that would do nothing. */
  .legend-item.legend-all.active .legend-name { visibility: hidden; }
  /* while a type is selected, pulse the "Show All" dot from black to bright vivid yellow and back */
  @keyframes pulse-showall {
    0%, 100% { background: #000; }
    50%      { background: var(--highlight); }
  }
  .legend-item.pulse-all .legend-dot { animation: pulse-showall 1.5s ease-in-out infinite; }
  /* the relationship list marks its rows with a dash, so it pulses the line itself */
  /* Colour only. The shadow was animated too, which repaints a blur 60×/s for as long as any filter
     is selected — the glow is held at a fixed size instead and only its hue moves. */
  @keyframes pulse-showall-dash {
    0%, 100% { border-top-color: #fff;             box-shadow: 0 0 7px rgba(255,255,255,0.6); }
    50%      { border-top-color: var(--highlight); box-shadow: 0 0 7px rgba(255,255,255,0.6); }
  }
  .legend-item.pulse-all .legend-dash { animation: pulse-showall-dash 1.5s ease-in-out infinite; }

  .legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 6px currentColor;
  }
  /* relationships are lines, not entities — a dash reads as one, and keeps the two lists distinct */
  .legend-dash {
    width: 11px;
    height: 0;
    flex-shrink: 0;
    border-top: 2px solid var(--sky);
    box-shadow: 0 0 6px var(--sky);
  }
  .legend-dash-all { border-top-color: #fff; box-shadow: 0 0 6px rgba(255,255,255,0.6); }

  .legend-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; }
  /* the count is secondary to the name: recede it, and bring it back on hover/active */
  .legend-count {
    color: var(--text-dim);
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    transition: opacity 0.12s ease, color 0.12s ease;
  }

  /* ── Graph controls ──────────────────────────────── */
  .graph-controls {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;   /* the lone zoom buttons stay under the RIGHT end of the top row */
    gap: 6px;
  }

  /* share and Fit act on different things, so they read as two controls rather than a pair.
     Top-aligned, so the label hanging below Share does not push its button out of line with Fit. */
  .ctrl-row { display: flex; gap: 50px; align-items: flex-start; }

  /* The label is positioned, not stacked: in flow it added its own height to the row and pushed the
     zoom buttons below down by that much, opening a gap under Fit. */
  .ctrl-labeled { position: relative; display: flex; }
  .ctrl-label {
    position: absolute;
    top: calc(100% + 10px);          /* clears the 5px the triangle overhangs below its row */
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand);
    line-height: 1;
    white-space: nowrap;     /* wider than the 48px button; wrapping it would stack two words */
  }

  .ctrl-btn {
    width: 48px;
    height: 48px;
    background: var(--brand);
    border: 1px solid transparent;     /* the old #383838 border only muddied the edge */
    border-radius: 15px;
    color: var(--white);
    font-size: 25px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    transition: background-color 0.15s ease, transform 0.1s ease;
    backdrop-filter: blur(8px);
  }

  /* Lighten the FILL on hover, never the glyph: the old rule set the text to --ink over the teal
     fill, so the icon nearly vanished at the moment of pointing at it. */
  .ctrl-btn:hover  { background: #4a737e; }
  .ctrl-btn:active { transform: scale(0.94); }
  /* the share control is the one action here that leaves the page, so it reads as a solid button
     rather than another dark chip in the stack */
  /* Triangular, so it reads as its own action rather than a fourth chip in the square stack.
     clip-path rather than borders: the shape has to clip the fill and the hover state with it. */
  .ctrl-btn.share-btn {
    position: relative;              /* the two stacked glyphs are positioned against this */
    width: 58px;                     /* 20% up on the 48px the other controls use */
    height: 58px;
    /* ...but it must not MEASURE bigger, or the row grows and pushes the zoom buttons down. The
       extra 10px is pulled back out of the flow, so the triangle overhangs its own row instead. */
    margin-block: -5px;
    background: var(--accent);
    color: var(--white);
    border-radius: 0;
    clip-path: polygon(50% 4%, 100% 96%, 0 96%);
    box-shadow: none;                /* a box-shadow is clipped away by the path, so it only muddies the edge */
    /* the usable area is the lower half of the triangle, so the glyph sits low and small */
    align-items: flex-end;
    padding-bottom: 4px;
  }
  .ctrl-btn.share-btn svg { width: 31px; height: 31px; }
  /* .ctrl-btn:hover would otherwise repaint it teal and lose the distinction. One rule, not the
     two that were quietly overriding each other. */
  .ctrl-btn.share-btn:hover { background: #000000; }
  /* Hover swaps the share mark for the entity eye — same icon, so the gesture reads as "look at
     this view". The two are STACKED and cross-faded rather than toggled with display, which cannot
     be transitioned. Both sit at the same spot, so neither moves during the swap. */
  .ctrl-btn.share-btn .share-glyph,
  .ctrl-btn.share-btn .share-eye {
    position: absolute;
    left: 50%;
    bottom: 4px;
    transform: translateX(-50%);
    transition: opacity 250ms ease;
  }
  .ctrl-btn.share-btn .share-eye         { opacity: 0; }
  .ctrl-btn.share-btn:hover .share-glyph { opacity: 0; }
  .ctrl-btn.share-btn:hover .share-eye   { opacity: 1; }
  /* a title attribute alone is invisible on a click, so the button confirms the copy itself */
  .ctrl-btn.copied { background: #2f7d4f; color: var(--white); }

  /* ── Node tooltip ────────────────────────────────── */
  .node-tooltip {
    position: fixed;
    background: #1d2e32;              /* --brand at half luminance, so the card reads over the graph */
    border: none;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 12px;
    width: max-content;               /* card sizes to its content in BOTH directions… */
    max-width: 420px;
    max-height: calc(100vh - 24px);   /* …with the window as the only limit */
    overflow-y: auto;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    pointer-events: none;             /* JS flips this on only when the content actually overflows */
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 100ms ease, visibility 0s linear 100ms;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px #00000088;
  }

  /* The entrance is played from JS (showNodeTip -> tooltip.animate). A CSS animation would only run
     when .visible is ADDED, and moving pill-to-pill never removes it — the card is one reused
     element that just gets repositioned — so the motion fired on maybe one hover in ten. */
  .node-tooltip.visible { opacity: 1; visibility: visible; transition: visibility 0s; }
  /* only a card whose hints overrun the window takes the pointer, so it can be scrolled */
  .node-tooltip.scrollable { pointer-events: auto; }
  .node-tooltip::-webkit-scrollbar { width: 8px; }
  .node-tooltip::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.28); border-radius: 4px; }
  .node-tooltip::-webkit-scrollbar-track { background: transparent; }
  .node-tooltip b { color: var(--accent); font-size: 13px; display: block; margin-bottom: 4px; }
  .node-tooltip i { color: var(--white); font-size: 11px; }
  .node-tooltip .hint { color: var(--white); margin-top: 6px; line-height: 1.5; }

  /* Hanging indent: the bullet sits in the gutter and every wrapped line lines up with the first
     word, instead of running back underneath the bullet. The bullet is drawn here rather than
     baked into the text so the indent can be measured against a known width. */
  .node-tooltip .hint .note,
  .edge-tooltip .notes .note {
    padding-left: 13px;
    text-indent: -13px;
  }
  .node-tooltip .hint .note::before,
  .edge-tooltip .notes .note::before {
    content: "•";
    display: inline-block;
    width: 13px;
    text-indent: 0;
    color: currentColor;
  }
  .node-tooltip .hint .note + .note { margin-top: 4px; }

  /* every note is traceable: a link back to the document the claim was extracted from */
  .note-src {
    color: var(--sky);
    text-decoration: underline;
    white-space: nowrap;
    cursor: pointer;
  }
  .note-src:hover { color: var(--white); }

  /* the separator stays neutral so the coloured role words read as the content */
  .node-tooltip .role-sep,
  .edge-tooltip .role-sep { color: var(--text-dim); opacity: 0.6; }

  /* ── Edge tooltip (rich relationship card) ───────── */
  .edge-tooltip {
    position: fixed;
    background: #1d2e32;              /* matches the node tooltip */
    border: none;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 12px;
    max-width: 460px;
    pointer-events: none;
    z-index: 101;
    opacity: 0;
    visibility: hidden;
    transition: opacity 100ms ease, visibility 0s linear 100ms;
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 40px #000000aa;
  }
  .edge-tooltip.visible { opacity: 1; visibility: visible; transition: opacity 100ms ease, visibility 0s; }
  /* same scrollbar as the hover card: thin, pale thumb, no track */
  .edge-tooltip { scroll-behavior: smooth; overscroll-behavior: contain; scrollbar-gutter: stable; }
  .edge-tooltip::-webkit-scrollbar { width: 8px; }
  .edge-tooltip::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.28); border-radius: 4px; }
  .edge-tooltip::-webkit-scrollbar-track { background: transparent; }
  .edge-tooltip .rel {
    color: var(--accent); font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px;
  }
  /* the header of a pinned card is a drag handle to reposition it */
  .edge-tooltip.pinned .rel { cursor: move; user-select: none; padding-right: 22px; }
  .edge-tooltip.dragging { user-select: none; }
  .edge-tooltip .dir {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    color: #e2e8f0; font-size: 12px; margin-bottom: 8px; line-height: 1.4;
  }
  .edge-tooltip .dir .ep { font-weight: 600; color: var(--white); }
  .edge-tooltip .dir .arrow { color: var(--white); }
  .edge-tooltip .chips { display: flex; flex-wrap: wrap; gap: 5px; }
  .edge-tooltip .chip {
    background: #1e293bcc; border: 1px solid var(--border); border-radius: 999px;
    padding: 3px 9px; font-size: 11px; color: var(--white);
  }
  .edge-tooltip .chip .k { color: var(--white); }
  /* pinned edge card (click-to-open, interactive) */
  .edge-tooltip.pinned {
    pointer-events: auto;
    max-width: 360px; max-height: 62vh; overflow-y: auto;
    border-color: #00e5ff55; box-shadow: 0 12px 48px #000000cc;
  }
  .edge-tooltip .edge-close {
    position: absolute; top: 8px; right: 10px;
    background: none; border: none; color: var(--brand);
    font-size: 18px; line-height: 1; cursor: pointer;
  }
  .edge-tooltip .edge-close:hover { color: var(--white); }
  .edge-tooltip .src { margin-top: 8px; font-size: 10.5px; color: var(--white); line-height: 1.4; }
  /* entity's own attributes (key=value facts) shown as a definition list in the node card */
  .edge-tooltip .attrs { margin-top: 9px; border-top: 1px solid #ffffff14; padding-top: 8px; }
  .edge-tooltip .attrs-title {
    font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase;
    color: var(--white); font-weight: 700; margin-bottom: 5px;
  }
  .edge-tooltip .attr-row { display: flex; gap: 10px; align-items: baseline; line-height: 1.5; padding: 1px 0; }
  .edge-tooltip .attr-k {
    flex: 0 0 auto; font-size: 10.5px; color: var(--white); font-weight: 600;
    text-transform: capitalize; white-space: nowrap;
  }
  .edge-tooltip .attr-v { flex: 1 1 auto; font-size: 11.5px; color: var(--white); font-weight: 600; word-break: break-word; }
  /* why this relationship was drawn — body text now, not a one-line source label */
  .edge-tooltip .why { font-size: 11.5px; color: #dbe4f0; line-height: 1.5; }
  .edge-tooltip .why + .why { margin-top: 6px; }
  .edge-tooltip .err { color: #fca5a5; font-size: 11px; }
  /* the hover card's notes, repeated at the foot of the node card so one card holds everything */
  .edge-tooltip .notes { margin-top: 9px; border-top: 1px solid #ffffff14; padding-top: 8px; }
  .edge-tooltip .note { font-size: 11.5px; color: var(--white); line-height: 1.5; }
  .edge-tooltip .note + .note { margin-top: 4px; }
  /* per-absorbed-entity relations in the node card */
  .edge-tooltip .node-relations { margin-top: 6px; }
  .edge-tooltip .nrel-group { border-top: 1px solid #ffffff10; }
  .edge-tooltip .nrel-group:first-child { border-top: none; }
  .edge-tooltip .nrel-entity {
    display: flex; align-items: center; gap: 7px;
    color: var(--sky); font-weight: 600; font-size: 12px; padding: 6px 2px;
  }
  .edge-tooltip .nrel-entity[data-toggle] { cursor: pointer; user-select: none; }
  .edge-tooltip .nrel-entity[data-toggle]:hover { color: #bae6fd; }
  .edge-tooltip .nrel-caret { color: var(--ink); font-size: 10px; width: 9px; flex: 0 0 auto; }
  .edge-tooltip .nrel-name { flex: 1 1 auto; }
  .edge-tooltip .nrel-count {
    flex: 0 0 auto; color: #93a4bd; font-size: 10.5px; font-weight: 500;
    background: #1e293bcc; border-radius: 999px; padding: 1px 8px;
  }
  .edge-tooltip .nrel-empty { color: var(--slate); font-weight: 500; }
  .edge-tooltip .nrel-body { padding: 0 0 6px 16px; }
  .edge-tooltip .nrel-line { font-size: 11.5px; color: #d5deec; line-height: 1.55; }
  .edge-tooltip .nrel-arrow { color: var(--ink); font-weight: 700; }
  .edge-tooltip .nrel-dot { color: var(--slate); }
  .edge-tooltip .nrel-line b { color: #eaf2ff; font-weight: 600; }
  .edge-tooltip .nrel-none { font-size: 10.5px; color: var(--slate); font-style: italic; }
  .edge-tooltip .spinner {
    display: inline-block; width: 11px; height: 11px; border: 2px solid #ffffff33;
    border-top-color: var(--ink); border-radius: 50%; animation: spin .7s linear infinite;
    vertical-align: middle; margin-right: 4px;
  }

  /* Server-rendered SEO question links reuse the .example-chip look; as <a> they need these. */
  a.example-chip { text-decoration: none; display: inline-block; }

  /* ---------------------------------------------------------------------------
     Mobile: the graph canvas needs a pointer and room the viewport does not have,
     so .right-panel is dropped and the sidebar becomes the whole page. Nothing is
     removed from the DOM - the text answer and the SEO question links are exactly
     what a phone (and a mobile crawler) is meant to get.
     --------------------------------------------------------------------------- */
  @media (max-width: 860px) {
    body,
    main {
      height: auto;
      overflow: visible;       /* body is overflow:hidden/100vh on desktop, which would clip the text */
    }

    .right-panel { display: none; }

    .left-panel {
      width: 100%;
      overflow: visible;
    }

    .answer-section {
      overflow-y: visible;     /* the page scrolls now, not this pane */
      padding-right: 20px;
    }

    /* body is background-color:transparent, so a translucent fill would take on whatever the
       parent page paints and wash out - this one is opaque on purpose. */
    .mobile-notice {
      display: block;
      margin: 0 20px 14px;
      padding: 11px 13px;
      border: 1px solid rgba(56, 189, 248, 0.55);
      border-left: 3px solid var(--brand);
      border-radius: 10px;
      background: #0b1f2a;
      font-size: 12.5px;
      line-height: 1.5;
    }

    .mobile-notice strong {
      display: block;
      margin-bottom: 3px;
      color: #fff;
      font-weight: 700;
    }

    .mobile-notice span { color: #cbd5e1; }
  }