/* ============================================================
   Traxome — transparent clinical-genomics interpreter
   Design language: calm, editorial, Apple-inspired restraint.
   Light canvas · one accent · generous whitespace · hairline
   borders · soft depth · semantic colour reserved for verdicts.
   Progressive disclosure via the Patient/Clinician/Researcher lens.
   ============================================================ */

:root {
  /* Canvas & surfaces */
  --bg:            #f5f5f7;   /* Apple off-white */
  --bg-2:          #ffffff;
  --surface:       #ffffff;
  --surface-2:     #f5f5f7;
  --surface-3:     #ececee;
  --glass:         rgba(255,255,255,.72);

  /* Ink */
  --text:          #1d1d1f;
  --text-secondary:#515154;
  --text-tertiary: #86868b;

  /* Lines */
  --border:        #e3e3e6;
  --border-strong: #d2d2d7;

  /* One accent — refined blue */
  --accent:        #0071e3;
  --accent-hover:  #0062c4;
  --accent-press:  #0056ad;
  --accent-bg:     #eaf3fe;
  --accent-bg-2:   #d3e6fc;
  --accent-line:   #a9cef7;
  --accent-soft:   #e8f2fe;   /* pale-blue fill — calm sibling of the solid accent (chips, soft buttons) */
  --accent-ink:    #084c96;   /* deep readable blue for text/icons on pale blue (AAA on --accent-soft) */

  /* Semantic — verdict tiers only (calm, modern) */
  --red:      #c8332a;  --red-bg:   #fdecea;  --red-border:   #f5cdc8;  --red-ink: #93231c;
  --green:    #1a7f37;  --green-bg: #e7f5ec;  --green-border: #bfe3c9;  --green-ink: #0f5c27;
  --amber:    #a9640c;  --amber-bg: #fbf1e0;  --amber-border: #f0d8ac;  --amber-ink: #7a4708;
  --grey:     #6e6e73;  --grey-bg:  #f0f0f2;  --grey-border:  #dcdce0;

  /* Elevation — very soft */
  --sh-1: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.05);
  --sh-2: 0 2px 6px rgba(0,0,0,.06), 0 14px 40px rgba(0,0,0,.09);
  --sh-focus: 0 0 0 4px rgba(0,113,227,.22);

  /* Radius — generous */
  --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-xl: 24px; --r-pill: 980px;

  /* Type — SF Pro on Apple, graceful fallback */
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif;
  --mono: 'SF Mono', ui-monospace, 'JetBrains Mono', 'Roboto Mono', Menlo, Consolas, monospace;

  /* 8pt grid */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;

  --appbar-h: 82px;               /* taller bar to carry the larger type */
  --content-max: 1180px;
  --appbar-max: 1320px;           /* align the bar with the (wider) home hero column */

  --ease: cubic-bezier(.32,.72,.36,1);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable both-edges; }
/* Clip (not hidden) horizontal overflow: `hidden` turns html/body into scroll
   containers, which breaks `position: sticky` on the appbar (it scrolls away on
   mobile). `clip` contains any stray wide element without creating a scroll box. */
html, body { overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 13.6px; line-height: 1.5;
  color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }
code { font-family: var(--mono); font-size: .9em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:-999px; top:8px; z-index:200; background:var(--accent); color:#fff; padding:8px 16px; border-radius:var(--r); }
.skip-link:focus { left:8px; }
[hidden] { display: none !important; }

/* ============================================================
   TOP BAR — light, translucent, blurred
   ============================================================ */
.appbar {
  position: sticky; top: 0; z-index: 100;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
}
.appbar-inner {
  display: flex; align-items: center; gap: var(--s5);
  height: var(--appbar-h); padding: 0 var(--s6);
  max-width: var(--appbar-max); margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: var(--s3); background: none; border: none; padding: 0; color: var(--text); text-decoration: none; flex: none; cursor: pointer; }
.brand-mark { display: block; width: 48px; height: 48px; border-radius: 13px; overflow: hidden; flex: none; }
.brand-mark svg { width: 100%; height: 100%; display: block; }
.wordmark { font-size: 21.8px; font-weight: 600; letter-spacing: -0.03em; }

.omnisearch {
  flex: 1 1 auto; min-width: 0; max-width: 1080px;
  display: flex; align-items: center; gap: var(--s3);
  background: var(--surface-2); border: 1px solid transparent;
  border-radius: var(--r-pill); padding: 6px 6px 6px var(--s5);
  transition: background .18s var(--ease), box-shadow .18s var(--ease), border-color .18s;
}
.omnisearch:focus-within { background: var(--surface); border-color: var(--accent-line); box-shadow: var(--sh-focus); }
.omnisearch .lens { flex: none; color: var(--text-tertiary); width: 30px; height: 30px; }
.omnisearch input { flex: 1; min-width: 0; border: none; outline: none; background: none; color: var(--text); font-size: 16.8px; letter-spacing: -0.01em; }
.omnisearch input::placeholder { color: var(--text-tertiary); }
.kbd-hint { flex: none; font-family: var(--mono); font-size: 11.8px; line-height: 1; color: var(--text-tertiary); border: 1px solid var(--border-strong); border-radius: 7px; padding: 5px 10px; background: var(--surface); cursor: pointer; transition: background .14s, color .14s, border-color .14s; }
.kbd-hint:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.kbd-hint.big { font-size: 14.3px; padding: 7px 12px; }
/* Top-bar submit — same accent circular arrow as the homepage's .home-go. */
.omni-go { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; border: none; cursor: pointer; box-shadow: var(--sh-1); transition: background .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease); }
.omni-go svg { width: 19px; height: 19px; display: block; }
.omni-go:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 5px 15px rgba(0,0,0,.2); }
.omni-go:active { transform: translateY(0); background: var(--accent-press); }
.omni-go:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }
.omni-go:active { background: var(--accent-press); }
.omni-go:disabled { background: var(--border-strong); cursor: default; }

.mainnav { flex: none; display: flex; gap: 3px; }
.mainnav a {
  background: none; border: none; color: var(--text-secondary); text-decoration: none; cursor: pointer;
  font-size: 16.8px; font-weight: 450; padding: 9px var(--s4);
  border-radius: var(--r-sm); transition: background .14s, color .14s; white-space: nowrap;
}
.mainnav a:hover { background: var(--surface-3); color: var(--text); }
.mainnav a[aria-current="page"] { color: var(--text); font-weight: 550; }
.nav-toggle { display: none; background: none; border: none; color: var(--text); padding: 6px; }

/* ============================================================
   LENS SWITCH — Patient · Clinician · Researcher segmented control
   ============================================================ */
.lens-switch {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--surface-3); border-radius: var(--r-pill);
  padding: 3px; flex: none;
}
.lens-switch button {
  position: relative; background: none; border: none;
  font-size: 15.1px; font-weight: 500; color: var(--text-secondary);
  padding: 8px var(--s4); border-radius: var(--r-pill);
  transition: color .18s var(--ease);
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
.lens-switch button .lens-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .55; }
.lens-switch button[aria-pressed="true"] {
  background: var(--surface); color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.lens-switch button[aria-pressed="true"] .lens-dot { opacity: 1; }
.lens-switch button[data-mode="patient"][aria-pressed="true"]    { color: var(--green-ink); }
.lens-switch button[data-mode="clinician"][aria-pressed="true"]  { color: var(--accent); }
.lens-switch button[data-mode="researcher"][aria-pressed="true"] { color: #6b3fa0; }

/* ============================================================
   LAYOUT: single centered column, search-first
   ============================================================ */
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(26,127,55,.5); animation: pulse 2.6s var(--ease) infinite; flex: none; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(26,127,55,.4);} 70%{box-shadow:0 0 0 6px rgba(26,127,55,0);} 100%{box-shadow:0 0 0 0 rgba(26,127,55,0);} }
@media (prefers-reduced-motion: reduce){ .live-dot{ animation: none; } }

.workspace {
  min-width: 0; width: 100%; max-width: var(--content-max);
  margin: 0 auto; padding: var(--s5) var(--s6) var(--s8);
  display: flex; flex-direction: column; min-height: calc(100vh - var(--appbar-h));
}

/* Top-bar search is hidden on the home screen (the hero search is the focus). Without
   it as the flex spacer, push the lens + nav group to the right so the bar reads as a
   normal full-width navbar (brand left, menu right) instead of clustering on the left. */
body[data-home="true"] .appbar .omnisearch { display: none; }
body[data-home="true"] .appbar .lens-switch { margin-left: auto; }
/* The home hero uses a wider column than dossiers so the title reads on two lines. */
body[data-home="true"] .workspace { max-width: 1320px; }
/* On results the search is shown — give the bar more room so it isn't squeezed to its
   min-width by the lens switch + nav (home keeps the tighter 1320 the user likes). */
body:not([data-home="true"]) .appbar-inner { max-width: 1680px; }
.mobilemenu { display: none; }

/* Views */
.view { display: none; }
.view.active { display: block; animation: fade .32s var(--ease); }
.view.active#view-interpret { display: flex; flex-direction: column; flex: 1; }
@keyframes fade { from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:none;} }
@media (prefers-reduced-motion: reduce){ .view.active{ animation:none; } }

.page-head { max-width: 720px; margin-bottom: var(--s6); }
.page-head h1 { font-size: 27.3px; letter-spacing: -0.03em; font-weight: 600; }
.page-lede { color: var(--text-secondary); font-size: 14.6px; line-height: 1.55; margin-top: var(--s3); }

.section-label { font-size: 14.6px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); font-weight: 600; margin-bottom: var(--s4); }

.health-note {
  display: none; align-items: center; gap: var(--s2); margin-top: var(--s6);
  background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary);
  border-radius: var(--r); padding: var(--s3) var(--s4); font-size: 11.8px;
}
.health-note.show { display: flex; }
.health-note svg { flex: none; color: var(--text-tertiary); }

/* ============================================================
   RESULTS — shared
   ============================================================ */
#results { margin-top: 0; }
#results:empty { margin: 0; }

.result-topbar { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s5); flex-wrap: wrap; }
.back-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 6px var(--s3) 6px 10px; font-size: 15.3px; font-weight: 500; color: var(--text-secondary); transition: background .14s, color .14s; }
.back-btn:hover { background: var(--surface-2); color: var(--text); }
.result-crumb { font-size: 15.3px; color: var(--text-tertiary); }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-1); }

/* Verdict banner */
.verdict {
  padding: var(--s6); margin-bottom: var(--s4);
  position: relative; overflow: hidden;
  border: 1px solid var(--border);
}
.verdict::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grey); }
.verdict.red::before    { background: var(--red); }
.verdict.green::before  { background: var(--green); }
.verdict.amber::before  { background: var(--amber); }
.verdict.grey::before   { background: var(--grey); }
.verdict-grid { display: grid; grid-template-columns: 1fr auto; gap: var(--s6); align-items: start; }
@media (max-width: 820px){ .verdict-grid { grid-template-columns: 1fr; } }

.verdict-head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 11.3px; letter-spacing: -0.01em; padding: 5px var(--s3); border-radius: var(--r-pill); border: 1px solid transparent; white-space: nowrap; }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pill.red   { color: var(--red);   background: var(--red-bg);   border-color: var(--red-border); }
.pill.green { color: var(--green-ink); background: var(--green-bg); border-color: var(--green-border); }
.pill.amber { color: var(--amber-ink); background: var(--amber-bg); border-color: var(--amber-border); }
.pill.grey  { color: var(--grey);  background: var(--grey-bg);  border-color: var(--grey-border); }

.verdict-gene { font-size: 25.5px; font-weight: 600; letter-spacing: -0.03em; margin-top: var(--s3); }
.verdict-gene .pc { color: var(--text-secondary); font-weight: 450; font-family: var(--mono); font-size: 17.3px; letter-spacing: -0.02em; }
.verdict-ids { color: var(--text-tertiary); font-size: 11.3px; font-family: var(--mono); margin-top: var(--s2); }
.verdict-ids a { color: var(--text-secondary); }
.verdict-sentence { font-size: 15px; line-height: 1.6; margin-top: var(--s4); color: var(--text); max-width: 62ch; }
.verdict-sentence b { font-weight: 600; }

.score-dial { display: flex; flex-direction: column; align-items: center; gap: var(--s1); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s5); min-width: 150px; }
.score-dial .n { font-size: 40px; font-weight: 650; line-height: .95; font-variant-numeric: tabular-nums; letter-spacing: -0.04em; }
.score-dial.red .n { color: var(--red); } .score-dial.green .n { color: var(--green); } .score-dial.amber .n { color: var(--amber); } .score-dial.grey .n { color: var(--text); }
.score-dial .lbl { font-size: 9.6px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; margin-top: 4px; }
.score-dial .split { font-size: 10.9px; color: var(--text-secondary); margin-top: 2px; }
.score-dial .split b { color: var(--text); font-weight: 600; }

/* Deterministic "sources disagree" reconciliation cue — display only, never alters the verdict */
.reconcile-cue { border-color: var(--amber-border); background: var(--amber-bg); padding: var(--s4) var(--s5); margin-bottom: var(--s4); }
.reconcile-cue .rec-head { display: flex; align-items: center; gap: var(--s2); color: var(--amber-ink); }
.reconcile-cue .rec-head b { font-size: 13px; font-weight: 650; letter-spacing: -0.01em; }
.reconcile-cue .rec-note { font-size: 12.6px; line-height: 1.6; color: var(--text-secondary); margin-top: var(--s2); max-width: 70ch; }
.reconcile-cue .rec-note b { color: var(--text); font-weight: 600; }
.rec-grid { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s3); }
.rec-row { display: flex; align-items: center; gap: var(--s2); font-size: 12.4px; }
.rec-src { color: var(--text-secondary); }
.rec-src a { color: var(--text); }
.rec-says { font-family: var(--mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; padding: 2px 7px; border-radius: 999px; border: 1px solid; }
.rec-says.pathogenic { color: var(--red);   background: var(--red-bg);   border-color: var(--red-border); }
.rec-says.benign     { color: var(--green); background: var(--green-bg); border-color: var(--green-border); }

/* Structured FDA-label view (Option 2 wired in) — additive; raw label stays authoritative */
.struct-tag { font-size: 11.5px; line-height: 1.5; padding: 6px 10px; border-radius: var(--r-md); margin: var(--s3) 0; border: 1px solid; display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.conf-chip { font-size: 10.5px; font-weight: 650; padding: 1px 8px; border-radius: 999px; border: 1px solid; white-space: nowrap; margin-left: auto; }
.conf-chip.ok { color: var(--green-ink); background: var(--green-bg); border-color: var(--green-border); }
.conf-chip.warn { color: var(--amber-ink); background: var(--amber-bg); border-color: var(--amber-border); }

/* Patient plain-language card (Item 4) — a calm auto-simplified TL;DR; source stays authoritative */
.plain-card { background: var(--surface); border: 1px solid var(--accent-line); border-left: 3px solid var(--accent); border-radius: var(--r-lg); padding: var(--s5) var(--s6); margin-bottom: var(--s4); box-shadow: var(--sh-1); }
.plain-head { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); }
.plain-badge { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.plain-tag { font-size: 10.5px; color: var(--text-tertiary); }
.plain-headline { font-size: 17px; line-height: 1.45; font-weight: 600; letter-spacing: -.01em; margin: 0; color: var(--text); max-width: 68ch; }
.plain-exp { font-size: 14px; line-height: 1.65; color: var(--text-secondary); margin: var(--s3) 0 0; max-width: 72ch; }
.plain-sub { margin-top: var(--s4); }
.plain-sub .micro { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--text-tertiary); }
.plain-sub ul { margin: var(--s2) 0 0; }
.plain-sub.watch { border-top: 1px solid var(--border); padding-top: var(--s3); }
.plain-sub.watch .micro { color: var(--amber); }
.struct-tag b { font-weight: 650; }
.struct-tag.unverified { color: var(--amber-ink); background: var(--amber-bg); border-color: var(--amber-border); }
.struct-tag.verified   { color: var(--green-ink); background: var(--green-bg); border-color: var(--green-border); }
.it-wrap { overflow-x: auto; margin-top: var(--s2); }
.it-table { width: 100%; border-collapse: collapse; font-size: 12.4px; }
.it-table th { text-align: left; font-weight: 600; color: var(--text-tertiary); font-size: 10.4px; text-transform: uppercase; letter-spacing: .04em; padding: 4px 8px; border-bottom: 1px solid var(--border); }
.it-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.it-table .it-with { font-weight: 550; color: var(--text); min-width: 9rem; }
.it-table .it-eff { color: var(--text-secondary); line-height: 1.5; }
.it-table .it-sev { white-space: nowrap; }
.it-table .sev { font-size: 10.5px; font-weight: 600; text-transform: capitalize; padding: 1px 7px; border-radius: 999px; background: var(--grey-bg); color: var(--text-secondary); border: 1px solid var(--grey-border); }
.it-table .sev.sev-high { color: var(--red);   background: var(--red-bg);   border-color: var(--red-border); }
.it-table .sev.sev-mid  { color: var(--amber); background: var(--amber-bg); border-color: var(--amber-border); }
.it-table .sev.sev-low  { color: var(--green); background: var(--green-bg); border-color: var(--green-border); }

/* Patient-tier "what this means" card */
.plainhelp { display: flex; gap: var(--s4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s5) var(--s6); margin-bottom: var(--s4); box-shadow: var(--sh-1); }
.plainhelp .ph-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--green-bg); color: var(--green-ink); }
.plainhelp h3 { font-size: 14.6px; margin-bottom: 6px; }
.plainhelp p { font-size: 13.2px; line-height: 1.6; color: var(--text-secondary); max-width: 64ch; }
.plainhelp .ph-next { margin-top: var(--s3); font-size: 12.3px; color: var(--text-secondary); display: flex; align-items: flex-start; gap: 8px; }
.plainhelp .ph-next svg { flex: none; margin-top: 2px; color: var(--accent); }

/* ---------- Accordion sections ---------- */
.section { margin-bottom: var(--s3); }
.section > .sec-head {
  display: flex; align-items: center; gap: var(--s3); width: 100%;
  background: var(--surface); border: 1px solid var(--border); text-align: left;
  padding: var(--s4) var(--s5); font-size: 18.2px; font-weight: 550; color: var(--text);
  border-radius: var(--r-lg); transition: background .14s var(--ease), border-color .14s;
}
/* When open, the header connects to its body — pull them together (no big gap). */
.section.open > .sec-head { border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom-color: transparent; padding-bottom: var(--s1); }
.section > .sec-head:hover { background: var(--surface-2); }
.sec-head .chev { flex: none; margin-left: auto; color: var(--text-tertiary); transition: transform .22s var(--ease); }
.section.open .sec-head .chev { transform: rotate(180deg); }
.sec-head .sig { flex: none; font-size: 11.8px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); background: var(--accent-bg); border: 1px solid var(--accent-bg-2); padding: 3px 9px; border-radius: var(--r-pill); }
.sec-head .count { flex: none; color: var(--text-tertiary); font-size: 14.6px; font-weight: 450; }
.sec-body { display: none; padding: var(--s2) var(--s6) var(--s5); border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--r-lg) var(--r-lg); background: var(--surface); }
.sec-body > :first-child { margin-top: 0; }
.section.open .sec-body { display: block; }
.section.signature.open > .sec-head { background: var(--accent-bg); border-color: var(--accent-line); color: var(--accent); }
.section.signature.open .sec-body { border-color: var(--accent-line); }

/* ---------- Glass-box ACMG explorer ---------- */
.acmg-intro { color: var(--text-secondary); font-size: 12.7px; margin-bottom: var(--s4); max-width: 72ch; line-height: 1.6; }
.acmg-list { display: flex; flex-direction: column; gap: var(--s2); }
.acmg-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); transition: background .14s, opacity .18s, border-color .14s; }
.acmg-row.off { opacity: .45; background: var(--surface-2); }
.acmg-code { font-family: var(--mono); font-size: 10.5px; font-weight: 600; white-space: nowrap; padding: 3px 8px; border-radius: 7px; border: 1px solid; }
.acmg-code.pos { color: var(--red);   background: var(--red-bg);   border-color: var(--red-border); }
.acmg-code.neg { color: var(--green-ink); background: var(--green-bg); border-color: var(--green-border); }
.acmg-crit { font-size: 12.7px; color: var(--text); }
.acmg-contrib { font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 12.7px; }
.acmg-contrib.pos { color: var(--red); } .acmg-contrib.neg { color: var(--green); }

.switch { position: relative; display: inline-block; width: 38px; height: 22px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track { position: absolute; inset: 0; background: var(--border-strong); border-radius: var(--r-pill); transition: background .2s var(--ease); }
.switch .track::before { content:""; position:absolute; height:18px; width:18px; left:2px; top:2px; background:#fff; border-radius:50%; transition:transform .2s var(--ease); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.switch input:checked + .track { background: var(--green); }
.switch input:checked + .track::before { transform: translateX(16px); }
.switch input:focus-visible + .track { box-shadow: var(--sh-focus); }

.whatif { margin-top: var(--s4); padding: var(--s4) var(--s5); border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--border); display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; transition: background .2s var(--ease), border-color .2s; }
.whatif .live-score { font-size: 25.5px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--text); letter-spacing: -0.03em; }
.whatif .live-tier { display: inline-flex; }
.whatif .note { color: var(--text-secondary); font-size: 11.3px; flex: 1 1 240px; line-height: 1.5; }
.whatif.changed { background: var(--amber-bg); border-color: var(--amber-border); }
.reset-btn { background: var(--surface); border: 1px solid var(--border-strong); color: var(--text-secondary); border-radius: var(--r-pill); padding: 6px var(--s4); font-size: 11.8px; font-weight: 500; }
.reset-btn:hover { color: var(--text); }

/* ---------- Evidence grid ---------- */
.evidence-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s3); }
.ev { border: 1px solid var(--border); border-radius: var(--r); padding: var(--s4); background: var(--surface); display: flex; flex-direction: column; gap: var(--s1); }
.ev .ev-label { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); font-weight: 600; }
.ev .ev-value { font-size: 14.6px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.ev .ev-sub { font-size: 11.3px; color: var(--text-secondary); line-height: 1.45; }
.ev .ev-src { font-size: 10.9px; margin-top: var(--s1); }
.ev.pos { box-shadow: inset 3px 0 0 var(--red); } .ev.neg { box-shadow: inset 3px 0 0 var(--green); }

.anc { margin-top: var(--s2); display: flex; flex-direction: column; gap: 6px; }
.anc-row { display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: var(--s3); font-size: 11.3px; }
.anc-row .anc-name { color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anc-bar { height: 7px; background: var(--surface-3); border-radius: var(--r-pill); overflow: hidden; }
.anc-bar > span { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill); }
.anc-row .anc-af { font-family: var(--mono); color: var(--text-secondary); font-variant-numeric: tabular-nums; }

.domain-track { position: relative; height: 30px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); margin-top: var(--s2); overflow: hidden; }
.domain-track .dom { position: absolute; top: 0; height: 100%; background: var(--accent-bg-2); border-right: 1px solid var(--surface); font-size: 9.5px; color: var(--accent); display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; padding: 0 4px; }

/* ---------- Tables ---------- */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r); }
table.data { width: 100%; border-collapse: collapse; font-size: 12.7px; }
table.data th, table.data td { padding: var(--s3) var(--s4); text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.data thead th { background: var(--surface-2); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); font-weight: 600; position: sticky; top: 0; }
table.data thead th.sortable { cursor: pointer; user-select: none; }
table.data thead th.sortable:hover { color: var(--text); }
table.data thead th .arrow { color: var(--accent); font-size: 9.5px; }
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }

.tier-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 10.9px; font-weight: 600; padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid transparent; }
.tier-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tier-chip.red   { color: var(--red);   background: var(--red-bg);   border-color: var(--red-border); }
.tier-chip.green { color: var(--green-ink); background: var(--green-bg); border-color: var(--green-border); }
.tier-chip.amber { color: var(--amber-ink); background: var(--amber-bg); border-color: var(--amber-border); }
.tier-chip.grey  { color: var(--grey);  background: var(--grey-bg);  border-color: var(--grey-border); }

/* ---------- Reference / trial lists ---------- */
.ref-list { display: flex; flex-direction: column; gap: var(--s2); }
/* Clinical-trials list scrolls within its own card so a top-10 list stays compact. */
.trials-scroll { max-height: 430px; overflow-y: auto; padding-right: var(--s2); }
.trials-scroll::-webkit-scrollbar { width: 8px; }
.trials-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }
.ref { border: 1px solid var(--border); border-radius: var(--r); padding: var(--s3) var(--s4); transition: border-color .14s, background .14s; }
.ref:hover { border-color: var(--border-strong); background: var(--surface-2); }
.ref a.ref-title { font-weight: 550; color: var(--text); font-size: 13.2px; }
.ref:hover a.ref-title { color: var(--accent); }
.ref .ref-meta { color: var(--text-tertiary); font-size: 11.3px; margin-top: 3px; }
.ref .ref-meta .j { font-style: italic; }
.trial-status { font-size: 9.6px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill); text-transform: uppercase; letter-spacing: .02em; margin-right: var(--s2); }
.trial-status.recruiting { color: var(--green-ink); background: var(--green-bg); }
.trial-status.active { color: var(--accent); background: var(--accent-bg); }
.trial-status.other { color: var(--text-secondary); background: var(--surface-2); }
/* Clinical-trials filter bar (phase + recruiting status) + link out to ClinicalTrials.gov */
.trials-note { font-size: 11.8px; color: var(--text-tertiary); margin: 0 0 var(--s3); }
.trials-note b { color: var(--text); }
.trials-pager { margin-top: var(--s4); }
/* Paginated (5/page) trials don't need the inner scroll — let the 5 rows flow (patents keep it). */
.trials-card .trials-scroll { max-height: none; overflow: visible; padding-right: 0; }
.trials-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: var(--s3); }
.trials-all { font: inherit; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-secondary); cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.trials-all:hover { border-color: var(--accent-line); color: var(--accent); }
.trials-all.cur { background: var(--accent); border-color: var(--accent); color: #fff; }
.trials-filter { font: inherit; font-size: 12px; font-weight: 500; padding: 5px 26px 5px 11px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 10px center; color: var(--text); cursor: pointer; -webkit-appearance: none; appearance: none; }
.trials-filter:hover { border-color: var(--accent-line); }
.trials-filter:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--sh-focus); }
.trials-shown { font-size: 11.3px; color: var(--text-tertiary); margin-left: auto; }
.trial-row[hidden] { display: none; }
.trials-more { display: inline-flex; align-items: center; gap: 5px; margin-top: var(--s3); font-size: 12.7px; font-weight: 600; color: var(--accent); }
.trials-more:hover { text-decoration: underline; }

/* ---------- Phenotype ---------- */
.match-cell { display: flex; flex-wrap: wrap; gap: 4px; white-space: normal; }
.match-tag { font-size: 10px; background: var(--surface-2); color: var(--text-secondary); padding: 2px 8px; border-radius: 6px; }
.hpo-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--r-pill); padding: 5px var(--s3); font-size: 11.8px; font-weight: 450; }
.hpo-chip .hpo-id { font-family: var(--mono); font-size: 10px; color: var(--text-tertiary); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.gene-link { font-weight: 550; color: var(--accent); background: none; border: none; padding: 0; font-size: 12.7px; }
.gene-link:hover { text-decoration: underline; }
.inline-link { font-weight: 550; color: var(--accent); background: none; border: none; padding: 0; font-size: inherit; }
.inline-link:hover { text-decoration: underline; }

/* ---------- Pharmacogenomics ---------- */
.pgx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s3); }
.pgx-card { border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s5); background: var(--surface); box-shadow: var(--sh-1); }
.pgx-card .drug { font-size: 16.4px; font-weight: 600; letter-spacing: -0.02em; text-transform: capitalize; }
.pgx-card .pheno { color: var(--text-secondary); font-size: 11.8px; margin-top: 2px; }
.pgx-flow { display: flex; align-items: center; gap: var(--s2); margin: var(--s3) 0; font-size: 11.8px; flex-wrap: wrap; }
.pgx-flow .arr { color: var(--text-tertiary); }
.pgx-class { font-size: 9.6px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-secondary); border: 1px solid var(--border); }
.pgx-rec { border-radius: var(--r); padding: var(--s3) var(--s4); font-size: 12.7px; line-height: 1.5; border: 1px solid; margin: var(--s3) 0; }
.pgx-rec.avoid   { background: var(--red-bg);   border-color: var(--red-border);   color: var(--red-ink); }
.pgx-rec.caution { background: var(--amber-bg); border-color: var(--amber-border); color: var(--amber-ink); }
.pgx-rec.standard{ background: var(--green-bg); border-color: var(--green-border); color: var(--green-ink); }
.pgx-rec.neutral { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.pgx-meta { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s3); font-size: 11.3px; color: var(--text-tertiary); gap: var(--s3); }
.pgx-filter { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); }
.pgx-filter label { font-size: 11.3px; color: var(--text-secondary); font-weight: 500; }
.pgx-filter select { font-family: inherit; font-size: 11.8px; padding: 7px var(--s3); border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text); }
/* Patient-view PGx: plain phenotype → outcome rows, traffic-light coded. */
.pgx-plain-list { display: flex; flex-direction: column; gap: var(--s2); margin: var(--s3) 0; }
.pgx-plain { display: flex; gap: var(--s4); align-items: baseline; padding: 10px var(--s4); border-radius: var(--r); background: var(--surface-2); border-left: 3px solid var(--border-strong); }
.pgx-plain-ph { font-weight: 600; min-width: 160px; flex: none; }
.pgx-plain-txt { color: var(--text-secondary); }
.pgx-plain.standard { border-left-color: var(--green-ink); }
.pgx-plain.caution  { border-left-color: var(--amber-ink); }
.pgx-plain.avoid    { border-left-color: var(--red-ink); }
.pgx-plain.neutral  { border-left-color: var(--text-tertiary); }
@media (max-width: 560px){ .pgx-plain { flex-direction: column; gap: 3px; } .pgx-plain-ph { min-width: 0; } }

/* Gene dossier (interpret view) — title row + "View in Gene Explorer" button. */
.gene-dossier-titlerow { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.btn-explorer { display: inline-flex; align-items: center; gap: 7px; background: var(--accent); color: #fff; border: none; border-radius: var(--r-pill); padding: 8px 15px; font-size: 13px; font-weight: 500; box-shadow: var(--sh-1); transition: background .15s var(--ease), transform .15s var(--ease); }
.btn-explorer:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn-explorer svg { flex: none; }

/* ---------- Gene card ---------- */
.gene-summary { font-size: 17.3px; color: var(--text-secondary); line-height: 1.65; max-width: 74ch; }
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: var(--s4); margin-top: var(--s4); }
.kv .k { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); font-weight: 600; }
.kv .v { font-size: 12.7px; color: var(--text); font-family: var(--mono); margin-top: 2px; }
.links-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.link-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 11.8px; font-weight: 500; color: var(--accent); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 6px var(--s4); background: var(--surface); transition: background .14s, border-color .14s; }
.link-btn:hover { background: var(--accent-bg); border-color: var(--accent-line); text-decoration: none; }

/* ---------- Buttons ---------- */
.btn-primary { display: inline-flex; align-items: center; gap: var(--s2); background: var(--accent); color: #fff; border: none; border-radius: var(--r-pill); padding: var(--s3) var(--s5); font-size: 12.7px; font-weight: 500; transition: background .15s var(--ease); }
.btn-primary:hover { background: var(--accent-hover); text-decoration: none; }
.btn-primary:disabled { background: var(--border-strong); cursor: default; }
.btn-ghost { display: inline-flex; align-items: center; gap: var(--s2); background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--r-pill); padding: var(--s3) var(--s5); font-size: 12.7px; font-weight: 500; transition: background .14s; }
.btn-ghost:hover { background: var(--surface-2); text-decoration: none; }
.result-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }

/* ---------- Loading / error / empty ---------- */
.loading { display: flex; flex-direction: column; align-items: center; gap: var(--s4); padding: var(--s8) 0; color: var(--text-secondary); }
.spinner { width: 30px; height: 30px; border: 3px solid var(--surface-3); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .spinner{ animation: none; } }
.loading .step { font-size: 12.3px; }
.error-box { display: flex; align-items: flex-start; gap: var(--s3); background: var(--red-bg); border: 1px solid var(--red-border); color: var(--red-ink); border-radius: var(--r-lg); padding: var(--s5); font-size: 12.7px; }
.error-box svg { flex: none; margin-top: 2px; }
.error-box h3 { color: var(--red-ink); font-size: 13.6px; margin-bottom: 4px; }
.empty-note { color: var(--text-tertiary); font-size: 15.5px; }
.note-line { color: var(--text-tertiary); font-size: 14.6px; margin-top: var(--s3); line-height: 1.5; }
.sub-h { font-size: 10.9px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary); font-weight: 600; margin: var(--s5) 0 var(--s2); }
.sub-h:first-child { margin-top: 0; }

/* ---------- Provenance ---------- */
.provenance { margin-top: var(--s5); padding: var(--s4) var(--s5); border: 1px dashed var(--border-strong); border-radius: var(--r); background: var(--surface); font-size: 11.3px; color: var(--text-secondary); }
.provenance .prov-head { font-weight: 600; color: var(--text); margin-bottom: var(--s2); display: flex; align-items: center; gap: var(--s2); }
.provenance .src-list { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.provenance .src-list span b { color: var(--text); font-weight: 550; }

/* ============================================================
   LITERATURE FEED
   ============================================================ */
.lit-search { display: flex; align-items: center; gap: var(--s2); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-pill); padding: 8px 8px 8px var(--s4); box-shadow: var(--sh-1); max-width: 640px; transition: border-color .16s, box-shadow .16s; }
.lit-search:focus-within { border-color: var(--accent-line); box-shadow: var(--sh-focus); }
.lit-search .lens { flex: none; color: var(--text-tertiary); }
.lit-search input { flex: 1; border: none; outline: none; background: none; font-size: 13.6px; color: var(--text); min-width: 0; }
.lit-search input::placeholder { color: var(--text-tertiary); }
.lit-spin { flex: none; width: 16px; height: 16px; border: 2px solid var(--surface-3); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }

/* "Search in Google Scholar / Google Patents" links — under the search bar + at each section's foot */
.lit-scholar-row { margin: 10px 0 0; padding-left: 2px; }
.lit-ext { display: inline-flex; align-items: center; gap: 6px; font-size: 12.8px; font-weight: 500; color: var(--accent); text-decoration: none; white-space: nowrap; }
.lit-ext:hover { color: var(--accent-hover); text-decoration: underline; }
.lit-ext svg { flex: none; opacity: .85; }
.lit-ext-row { display: flex; justify-content: center; margin: var(--s4) 0 var(--s6); padding-top: var(--s4); border-top: 1px dashed var(--border); }

.lit-example-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
/* Breathing room between a search box and the results it produces. */
#gene-results:not(:empty), #lit-results:not(:empty) { margin-top: var(--s6); }
#results:not(:empty) { margin-top: var(--s2); }   /* the workspace padding already gives the top gap */
.lex-label { font-size: 11.3px; color: var(--text-tertiary); font-weight: 500; }
.lex { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 5px var(--s3); font-size: 11.3px; color: var(--text-secondary); transition: background .14s, border-color .14s, color .14s; }
.lex:hover { background: var(--accent-bg); border-color: var(--accent-line); color: var(--accent); }

.lit-controls { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin: var(--s5) 0 var(--s4); flex-wrap: wrap; }
.seg { display: inline-flex; background: var(--surface-3); border-radius: var(--r-pill); padding: 3px; gap: 2px; }
.seg-btn { background: none; border: none; border-radius: var(--r-pill); padding: 6px var(--s4); font-size: 11.8px; font-weight: 500; color: var(--text-secondary); transition: color .16s; }
.seg-btn:hover { color: var(--text); }
.seg-btn.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.lit-live { display: inline-flex; align-items: center; gap: var(--s2); font-size: 11.3px; color: var(--text-tertiary); }
.lit-live .live-dot { width: 7px; height: 7px; }

.lit-feed { display: flex; flex-direction: column; gap: var(--s3); }
.lit-count { font-size: 11.8px; color: var(--text-tertiary); margin-bottom: var(--s3); }
.lit-count b { color: var(--text); }
.lit-group-n { font-size: 10.5px; font-weight: 600; color: var(--text-tertiary); text-transform: none; letter-spacing: 0; margin-left: 8px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border); vertical-align: middle; }
.lit-group { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); margin: var(--s5) 0 var(--s3); padding-bottom: var(--s2); border-bottom: 1px solid var(--border); }

/* Trace rail — cross-entity connectedness ("the tracking layer") */
.results-layout { display: grid; grid-template-columns: 1fr; gap: var(--s5); align-items: start; }
.results-layout.has-trace { grid-template-columns: minmax(0, 1fr) 460px; }
/* Results + graph use the full nav width (out to the About tab), not the narrower dossier width. */
body:not([data-home="true"]) .workspace { max-width: 1600px; }
.trace-rail { position: sticky; top: 82px; align-self: start; display: flex; flex-direction: column; gap: var(--s4); }
.rail-sec { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s4); box-shadow: var(--sh-1); }
.rail-h { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: var(--s3); }
.trace-steps { display: flex; flex-direction: column; gap: 1px; }
.trace-step { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 4px 6px; border-radius: 7px; font-size: 12.4px; font-weight: 600; color: var(--text-secondary); text-align: left; width: 100%; cursor: pointer; font-family: inherit; }
button.trace-step:hover { background: var(--surface-2); color: var(--text); }
.trace-step.cur { color: var(--text); font-weight: 680; cursor: default; }
.trace-step .tdot { width: 8px; height: 8px; border-radius: 99px; background: var(--text-tertiary); flex: none; }
.trace-step.cur .tdot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.trace-step .tlbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conn-group { margin-bottom: var(--s3); }
.conn-group:last-child { margin-bottom: 0; }
.conn-lbl { font-size: 11px; font-weight: 650; color: var(--text-secondary); margin-bottom: 5px; display: flex; align-items: center; gap: 6px; }
.conn-n { font-size: 10px; font-variant-numeric: tabular-nums; color: var(--text-tertiary); background: var(--surface-2); border: 1px solid var(--border); border-radius: 99px; padding: 0 6px; }
.conn-chip, .conn-more { display: inline-flex; align-items: center; font-size: 11.4px; font-weight: 550; border-radius: 7px; padding: 3px 8px; margin: 0 4px 4px 0; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-family: inherit; }
.conn-chip:hover { border-color: var(--accent-line); background: var(--accent-bg); color: var(--accent); }
.conn-more { color: var(--text-tertiary); border-style: dashed; }
.conn-more:hover { color: var(--accent); border-color: var(--accent-line); }
@media (max-width: 900px) {
  .results-layout.has-trace { grid-template-columns: 1fr; }
  .trace-rail { position: static; order: -1; flex-direction: row; flex-wrap: wrap; }
  .trace-rail .rail-sec { flex: 1; min-width: 240px; }
  .trace-steps { flex-direction: row; flex-wrap: wrap; gap: 4px; }
}
.paper { display: grid; grid-template-columns: 34px 1fr; gap: var(--s4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s4) var(--s5); box-shadow: var(--sh-1); transition: border-color .14s, box-shadow .14s, transform .14s var(--ease); }
.paper:hover { border-color: var(--border-strong); box-shadow: var(--sh-2); transform: translateY(-1px); }
.paper-idx { font-family: var(--mono); font-size: 11.8px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; padding-top: 2px; }
.paper-body { min-width: 0; }
.paper-title { font-size: 18.2px; font-weight: 550; line-height: 1.4; color: var(--text); letter-spacing: -0.01em; }
a.paper-title:hover { color: var(--accent); }
.paper-authors { font-size: 11.8px; color: var(--text-secondary); margin-top: var(--s2); line-height: 1.5; }
.paper-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.paper-venue { font-size: 11.3px; color: var(--text-tertiary); }
.paper-venue .j { font-style: italic; }
.chip-sm { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 550; padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid transparent; }
.chip-sm.cited { color: var(--accent); background: var(--accent-bg); border-color: var(--accent-bg-2); }
.chip-sm.oa { color: var(--green-ink); background: var(--green-bg); border-color: var(--green-border); }
.chip-sm.preprint { color: var(--amber-ink); background: var(--amber-bg); border-color: var(--amber-border); }
.chip-sm.db { color: var(--text-secondary); background: var(--surface-2); border-color: var(--border); font-family: var(--mono); }
.chip-sm.patent { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent-line); font-weight: 650; }

/* Patents (drug card meta + literature-tab feed) */
.patent-num { font-family: var(--mono); font-size: 11px; color: var(--text-secondary); }
.ref-meta .pat-inv { color: var(--text-tertiary); }
/* Jurisdiction badge (US / EP / WO·PCT …) — makes the issuing office explicit on every patent */
.chip-sm.jur { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent-line); font-family: var(--mono); font-weight: 650; letter-spacing: .02em; }
.jur-tag { display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 650; color: var(--accent-ink); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r-pill); padding: 0 6px; margin-right: 2px; }
.patent-alt { font-size: 11px; color: var(--text-tertiary); margin-left: 6px; }
/* Subscription (paywalled) article marker — neutral so it doesn't compete with the green OA chip */
.chip-sm.sub { color: var(--text-tertiary); background: var(--surface-2); border-color: var(--border); }
.seg-btn:disabled { opacity: .38; cursor: default; }
.seg.seg-mode { background: var(--accent-soft); }
.seg.seg-mode .seg-btn.active { color: var(--accent-ink); }
.chip-sm.doi { color: var(--text-tertiary); background: var(--surface); border-color: var(--border); font-family: var(--mono); }

/* ============================================================
   CONDITION EXPLAINER (multi-source, plain-language)
   ============================================================ */
.cond-hero { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s7) var(--s6); box-shadow: var(--sh-1); margin-bottom: var(--s4); }
.cond-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; color: var(--green-ink); background: var(--green-bg); border: 1px solid var(--green-border); padding: 4px 11px; border-radius: var(--r-pill); }
.cond-title { font-size: 30.9px; font-weight: 650; letter-spacing: -0.03em; margin-top: var(--s4); }
.cond-def { font-size: 15.5px; line-height: 1.62; color: var(--text); margin-top: var(--s4); max-width: 68ch; }
.cond-def-src { font-size: 11.3px; color: var(--text-tertiary); margin-top: var(--s4); }
.cond-also { font-size: 11.8px; color: var(--text-secondary); margin-top: var(--s2); }
.cond-also b { color: var(--text); font-weight: 550; }

.cond-cols { display: grid; grid-template-columns: 1fr; gap: var(--s3); }
.cond-section { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.cond-sec-head { display: flex; align-items: center; gap: var(--s3); width: 100%; text-align: left; background: var(--surface); border: none; padding: var(--s4) var(--s5); font-size: 14.1px; font-weight: 550; color: var(--text); }
.cond-sec-head:hover { background: var(--surface-2); }
.cond-sec-head .cs-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-secondary); display: grid; place-items: center; }
.cond-sec-head .cs-ic svg { width: 16px; height: 16px; }
.cond-sec-head .chev { margin-left: auto; color: var(--text-tertiary); transition: transform .22s var(--ease); }
.cond-section.open .cond-sec-head .chev { transform: rotate(180deg); }
.cond-sec-body { display: none; padding: 0 var(--s5) var(--s5) 64px; }
.cond-section.open .cond-sec-body { display: block; }
.cond-text { font-size: 17.3px; line-height: 1.7; color: var(--text); max-width: 74ch; }
.cond-src-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--text-tertiary); margin-top: var(--s3); }
.cond-src-tag svg { color: var(--green); }

/* Patient essentials — a scannable grid of wide topic cards with bulleted points */
.essentials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: var(--s4); }
@media (max-width: 620px) { .essentials-grid { grid-template-columns: 1fr; } }
.essential-card { min-width: 0; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); padding: var(--s5) var(--s6); display: flex; flex-direction: column; gap: var(--s4); }
.essential-card.careful { border-color: var(--amber-border); background: linear-gradient(180deg, var(--amber-bg) 0%, var(--surface) 40%); }
.ec-head { display: flex; align-items: center; gap: var(--s3); }
.ec-ic { flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--accent-bg); border: 1px solid var(--accent-line); color: var(--accent); display: grid; place-items: center; }
.ec-ic svg { width: 20px; height: 20px; }
.essential-card.careful .ec-ic { background: #fff; border-color: var(--amber-border); color: var(--amber-ink); }
.ec-label { font-size: 12.6px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.ec-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ec-list li { position: relative; padding-left: 20px; font-size: 13px; line-height: 1.55; color: var(--text-secondary); overflow-wrap: anywhere; }
.ec-list li::before { content: ''; position: absolute; left: 3px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .8; }
.essential-card.careful .ec-list li::before { background: var(--amber); }
.ec-p { margin: 0; font-size: 10.5px; line-height: 1.6; color: var(--text-secondary); }
.ec-src { font-size: 9.5px; color: var(--text-tertiary); margin-top: 2px; }

/* FDA-label prose rendered as readable bullets, with definition links + an alcohol callout. */
.label-prose li { font-size: 12.7px; line-height: 1.55; }
.gloss-link { color: var(--accent); border-bottom: 1px dotted var(--accent-line); }
.gloss-link:hover { border-bottom-style: solid; text-decoration: none; }
/* In-label section cross-reference ("see CONTRAINDICATIONS") → link to the full FDA label. */
.ref-link { color: var(--accent); font-variant: small-caps; letter-spacing: .02em; border-bottom: 1px solid var(--accent-line); }
.ref-link:hover { border-bottom-color: var(--accent); text-decoration: none; }
.label-full { margin-top: 10px; font-size: 11.8px; }
.alcohol-bullet { list-style: none; padding: 9px 12px !important; margin-bottom: 4px; background: var(--amber-bg); border: 1px solid var(--amber-border); border-radius: var(--r-sm); color: var(--text); font-size: 12.7px; line-height: 1.55; }
.alcohol-bullet::before { display: none !important; }
.alcohol-bullet b { color: var(--amber-ink); }
.ec-src a { color: var(--text-secondary); }

.caution { display: flex; align-items: flex-start; gap: var(--s3); border: 1px solid var(--amber-border); background: var(--amber-bg); border-radius: var(--r); padding: var(--s4) var(--s5); margin-bottom: var(--s3); font-size: 11.8px; color: var(--amber-ink); line-height: 1.55; }
.caution svg { flex: none; margin-top: 1px; color: var(--amber); }

/* Clinical references (synonyms + cross-refs) — clinician/researcher tier */
.xref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: var(--s3); margin-top: var(--s2); }
.xref { border: 1px solid var(--border); border-radius: var(--r); padding: var(--s3) var(--s4); }
.xref .xref-k { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); font-weight: 600; }
.xref .xref-v { font-size: 12.3px; margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; }
.syn-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s2); }
.syn-tag { font-size: 10.9px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-secondary); padding: 3px 9px; border-radius: var(--r-pill); }
.cond-disclaimer { font-size: 11.3px; color: var(--text-tertiary); line-height: 1.6; border-top: 1px solid var(--border); margin-top: var(--s5); padding-top: var(--s4); }

/* ============================================================
   PROSE (Methods + About)
   ============================================================ */
.prose { max-width: 760px; }
.prose h1 { font-size: 29.1px; letter-spacing: -0.03em; }
.prose h2 { font-size: 20px; margin: var(--s7) 0 var(--s3); padding-bottom: var(--s2); border-bottom: 1px solid var(--border); }
.prose h2:first-of-type { margin-top: var(--s6); }
.prose p { color: var(--text); margin: var(--s3) 0; line-height: 1.7; }
.prose .muted { color: var(--text-secondary); }
.prose ul { color: var(--text-secondary); line-height: 1.75; padding-left: var(--s5); }
.prose strong { color: var(--text); font-weight: 600; }
.eq-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: var(--s5); margin: var(--s4) 0; overflow-x: auto; box-shadow: var(--sh-1); }
.callout { background: var(--accent-bg); border: 1px solid var(--accent-bg-2); border-radius: var(--r); padding: var(--s4) var(--s5); font-size: 12.3px; color: var(--text); margin: var(--s4) 0; line-height: 1.6; }
.weights-tbl td.w { font-family: var(--mono); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.weights-tbl td.w.pos { color: var(--red); } .weights-tbl td.w.neg { color: var(--green); }
.weights-tbl td.code { font-family: var(--mono); font-size: 11.3px; white-space: nowrap; }
.pipeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: var(--s3); margin: var(--s5) 0; }
.pipe-step { border: 1px solid var(--border); border-radius: var(--r); padding: var(--s4) var(--s5); background: var(--surface); }
.pipe-step .n { color: var(--accent); font-weight: 600; font-size: 11.8px; }
.pipe-step h4 { font-size: 13.2px; margin: var(--s1) 0; }
.pipe-step p { font-size: 11.3px; margin: 0; color: var(--text-secondary); }

/* ============================================================
   FOOTER
   ============================================================ */
/* Full-bleed footer: spans the whole page (like the appbar) instead of sitting in the centered
   content column; the inner wrapper re-centers the content. Safe because html/body use overflow-x: clip. */
.site-footer { border-top: 1px solid var(--border); margin-top: var(--s8); padding: var(--s6) 0 var(--s7); width: 100vw; margin-left: calc(50% - 50vw); background: var(--surface-2); }
.footer-inner { max-width: 1320px; margin: 0 auto; padding: 0 var(--s6); }
.disclaimer { display: flex; align-items: flex-start; gap: var(--s3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: var(--s4) var(--s5); font-size: 11.8px; color: var(--text-secondary); line-height: 1.6; max-width: 820px; }
.disclaimer svg { flex: none; color: var(--amber); margin-top: 1px; }
.disclaimer b { color: var(--text); font-weight: 600; }
.footer-meta { margin-top: var(--s4); font-size: 10.9px; color: var(--text-tertiary); display: flex; gap: var(--s4); flex-wrap: wrap; }
.site-footer .footer-disclaimer { margin-top: var(--s4); max-width: none; }
.footer-bottom { margin-top: var(--s4); display: flex; justify-content: space-between; align-items: center; gap: var(--s4); flex-wrap: wrap; font-size: 11.6px; color: var(--text-tertiary); }
.footer-bottom .footer-gh { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); text-decoration: none; font-weight: 500; transition: color .15s var(--ease); }
.footer-bottom .footer-gh:hover { color: var(--text); }
/* Unregistered-trademark mark — subtle superscript on the Traxome wordmark */
.tm { font-size: 0.52em; vertical-align: super; font-weight: 500; letter-spacing: 0; opacity: .65; margin-left: 1px; }
/* Demo-video link (About) — compact, sits just under the preview */
.demo-video { margin: 0 0 1.25rem; }
.demo-video a { display: inline-flex; align-items: center; gap: 6px; font-size: 13.2px; font-weight: 550; color: var(--accent); text-decoration: none; }
.demo-video a:hover { color: var(--accent-hover); text-decoration: underline; }
.demo-video svg { flex: none; }

/* About — full databases & sources catalog. Native <details> so it collapses/expands anywhere,
   works without JS and is keyboard-accessible. Outer = the whole list; each category nests its own. */
.src-catalog { margin: var(--s6) 0 var(--s4); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.src-catalog > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); user-select: none; }
.src-catalog > summary::-webkit-details-marker { display: none; }
.src-catalog > summary:hover { background: var(--surface-2); }
.src-catalog > summary:focus-visible { outline: 2px solid var(--accent-line); outline-offset: -2px; }
.src-chev { flex: none; color: var(--text-tertiary); transition: transform .2s var(--ease); }
.src-catalog[open] > summary .src-chev { transform: rotate(90deg); }
.src-cat-title { font-size: 15px; font-weight: 650; color: var(--text); }
.src-count { margin-left: auto; font-size: 11.6px; color: var(--text-tertiary); text-align: right; }
.src-catalog-body { padding: 0 var(--s5) var(--s4); border-top: 1px solid var(--border); }
.src-intro { font-size: 12.8px; color: var(--text-secondary); line-height: 1.55; margin: var(--s4) 0 var(--s2); max-width: 760px; }
.src-group { border-top: 1px solid var(--border); }
.src-group > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--s2); padding: var(--s3) 0; font-weight: 640; font-size: 13.4px; color: var(--accent-ink); user-select: none; }
.src-group > summary::-webkit-details-marker { display: none; }
.src-group > summary::before { content: "\203A"; color: var(--text-tertiary); font-weight: 700; transition: transform .2s var(--ease); display: inline-block; width: 10px; }
.src-group[open] > summary::before { transform: rotate(90deg); }
.src-group > summary:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; border-radius: var(--r-sm); }
.src-gcount { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text-secondary); font-size: 10.5px; font-weight: 600; }
.src-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); padding: var(--s1) 0 var(--s4); }
.src { border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); padding: var(--s3) var(--s4) 14px; }
.src-name { font-weight: 650; font-size: 13.6px; color: var(--accent); text-decoration: none; }
.src-name[href]:hover { text-decoration: underline; }
.src-name[href]::after { content: " \2197"; font-size: .82em; color: var(--text-tertiary); }
.src-name-plain { color: var(--text); }
.src-what { font-size: 12.4px; line-height: 1.45; color: var(--text); margin: 4px 0 9px; }
.src-what a { color: var(--accent); }
.src-meta { margin: 0; display: grid; gap: 7px; }
.src-meta > div { display: grid; gap: 1px; }
.src-meta dt { font-size: 9.4px; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; color: var(--text-tertiary); }
.src-meta dd { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--text-secondary); }
@media (max-width: 720px) { .src-list { grid-template-columns: 1fr; } .src-count { display: none; } }

/* ============================================================
   HOME — search-first
   ============================================================ */
.home { max-width: 1240px; margin: clamp(20px, 7vh, 84px) auto 0; text-align: center; }
.home-title { font-size: clamp(30px, 4.2vw, 54px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 650; max-width: 1180px; margin: 0 auto; text-wrap: balance; }
/* narrower elements stay centered within the wider home hero */
.home-lede, .home-lens-hint { margin-left: auto; margin-right: auto; }
.home-lede { font-size: 16.4px; color: var(--text-secondary); line-height: 1.5; margin: var(--s4) auto 0; max-width: 580px; }
.home-search { display: flex; align-items: center; gap: var(--s3); margin: var(--s6) auto 0; max-width: 720px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-pill); padding: 8px 8px 8px var(--s5); box-shadow: var(--sh-1); transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
.home-search:focus-within { border-color: var(--accent-line); box-shadow: var(--sh-focus); }
.home-search .lens { flex: none; color: var(--text-tertiary); }
.home-search input { flex: 1; border: none; outline: none; background: none; font-size: 16.4px; color: var(--text); min-width: 0; letter-spacing: -0.01em; }
.home-search input::placeholder { color: var(--text-tertiary); }
/* Home submit — a proper, prominent accent button (replaces the tiny ↵ hint). */
.home-go { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.16);
  transition: background .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease); }
.home-go svg { width: 21px; height: 21px; display: block; }
.home-go:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 5px 15px rgba(0,0,0,.2); }
.home-go:active { transform: translateY(0); background: var(--accent-press); }
.home-go:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }
/* Home lens selector — makes the lens explicit and shows what each one actually delivers.
   Active state is driven by the same html[data-mode] the header switch uses, so the two stay in sync. */
.home-lenses { max-width: 720px; margin: var(--s5) auto 0; }
.home-lenses-lead { font-size: 13.4px; color: var(--text-secondary); margin: 0 0 var(--s3); font-weight: 550; }
.home-lenses-lead span { color: var(--text-tertiary); font-weight: 400; }
.home-lens-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.home-lens-tile {
  display: flex; flex-direction: column; gap: 5px; text-align: left; cursor: pointer;
  padding: var(--s3) var(--s4) 14px; border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface);
  transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease), transform .1s var(--ease);
}
.home-lens-tile:hover { border-color: var(--border-strong); background: var(--surface-2); }
.home-lens-tile:active { transform: translateY(1px); }
.home-lens-tile:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }
.hlt-name { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 640; color: var(--text); letter-spacing: -0.01em; }
.hlt-name .lens-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .38; flex: none; }
.hlt-desc { font-size: 11.9px; line-height: 1.42; color: var(--text-tertiary); }
/* active lens — tinted in the lens's own colour (green / blue / purple, matching the header switch) */
html[data-mode="patient"]    .home-lens-tile[data-mode="patient"]    { border-color: var(--green-border);  background: var(--green-bg);   box-shadow: inset 0 0 0 1px var(--green-border); }
html[data-mode="clinician"]  .home-lens-tile[data-mode="clinician"]  { border-color: var(--accent-line);   background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
html[data-mode="researcher"] .home-lens-tile[data-mode="researcher"] { border-color: #ddd0ee;              background: #f4effb;           box-shadow: inset 0 0 0 1px #ddd0ee; }
html[data-mode="patient"]    .home-lens-tile[data-mode="patient"]    .hlt-name { color: var(--green-ink); }
html[data-mode="clinician"]  .home-lens-tile[data-mode="clinician"]  .hlt-name { color: var(--accent-ink); }
html[data-mode="researcher"] .home-lens-tile[data-mode="researcher"] .hlt-name { color: #6b3fa0; }
html[data-mode="patient"]    .home-lens-tile[data-mode="patient"]    .lens-dot,
html[data-mode="clinician"]  .home-lens-tile[data-mode="clinician"]  .lens-dot,
html[data-mode="researcher"] .home-lens-tile[data-mode="researcher"] .lens-dot { opacity: 1; }
html[data-mode="patient"]    .home-lens-tile[data-mode="patient"]    .hlt-desc,
html[data-mode="clinician"]  .home-lens-tile[data-mode="clinician"]  .hlt-desc,
html[data-mode="researcher"] .home-lens-tile[data-mode="researcher"] .hlt-desc { color: var(--text-secondary); }
@media (max-width: 620px) { .home-lens-row { grid-template-columns: 1fr; } .home-lenses { max-width: 460px; } }
.home-examples { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; margin-top: var(--s6); }
/* The chip row is reused inside dossier sections — drop the home-page top margin there. */
#results .home-examples, .sec-body .home-examples { margin-top: 0; }
.home-ex { display: inline-flex; align-items: center; gap: var(--s2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 8px var(--s4); font-size: 12.3px; color: var(--text); transition: border-color .14s, background .14s, transform .14s var(--ease); }
.home-ex:hover { border-color: var(--accent-line); background: var(--accent-bg); transform: translateY(-1px); }
.home-ex .ex-k { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); }

/* ---- Home DNA strand: example queries flow along an animated 3D double helix ---- */
.dna-lab { position: relative; width: 100%; max-width: 1152px; height: 228px; margin: var(--s6) auto 0; overflow: hidden; border-radius: 28px;
  background: radial-gradient(88% 130% at 50% 44%, rgba(99,102,241,0.08), rgba(16,185,129,0.045) 46%, transparent 72%); }
.dna-helix { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dna-track { position: absolute; inset: 0; }
.dna-chip { position: absolute; top: 0; left: 0; will-change: transform; box-shadow: var(--sh-1); cursor: pointer; z-index: 1; font-size: 14.8px; padding: 10px var(--s5); }
.dna-chip .ex-k { font-size: 11.4px; }
.dna-chip:hover, .dna-chip:focus-visible { border-color: var(--accent-line); background: var(--accent-bg); box-shadow: 0 6px 18px rgba(0,0,0,.15); outline: none; z-index: 2; }
/* Reduced-motion / fallback: lay the examples out as a static centered row. */
.dna-lab.static { height: auto; overflow: visible; }
.dna-lab.static .dna-helix { display: none; }
.dna-lab.static .dna-track { position: static; display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; }
.dna-lab.static .dna-chip { position: static; box-shadow: none; }

.home .health-note { justify-content: center; max-width: 640px; margin: var(--s7) auto 0; text-align: left; }

/* ============================================================
   LENS TABS (shown atop a dossier result)
   ============================================================ */
.lenstabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin-bottom: var(--s5); }
.lenstab { text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s4) var(--s4); transition: border-color .16s var(--ease), background .16s, box-shadow .16s; display: flex; flex-direction: column; gap: 3px; }
.lenstab:hover { border-color: var(--border-strong); }
.lenstab b { font-size: 17.7px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 7px; }
.lenstab b .lt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-tertiary); }
.lenstab small { font-size: 14.2px; color: var(--text-tertiary); }
.lenstab[aria-checked="true"] { border-color: var(--accent-line); background: var(--accent-bg); box-shadow: var(--sh-1); }
.lenstab[aria-checked="true"] b { color: var(--accent); }
.lenstab[data-mode="patient"][aria-checked="true"] b, .lenstab[data-mode="patient"][aria-checked="true"] b .lt-dot { color: var(--green-ink); background: none; }
.lenstab[data-mode="patient"][aria-checked="true"] b .lt-dot { background: var(--green); }
.lenstab[data-mode="researcher"][aria-checked="true"] b { color: #6b3fa0; }
.lenstab[data-mode="researcher"][aria-checked="true"] b .lt-dot { background: #6b3fa0; }
.lenstab[data-mode="clinician"][aria-checked="true"] b .lt-dot { background: var(--accent); }
@media (max-width: 720px){ .lenstabs { grid-template-columns: 1fr; } .lenstab small { display: none; } .lenstab { flex-direction: row; align-items: center; } }

/* ============================================================
   DOSSIER — shared hero
   ============================================================ */
.dossier-hero { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s5) var(--s6); box-shadow: var(--sh-1); margin-bottom: var(--s4); }
/* subtle Traxome brand stamp, top-right — ties the header card to the product */
.dossier-hero::after { content: 'Traxome'; position: absolute; top: var(--s5); right: var(--s5); font-size: 9.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-tertiary); padding-left: 19px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%230a84ff' stroke-width='6' stroke-linecap='round'%3E%3Cpath d='M22 13 C 42 24, 42 40, 22 51'/%3E%3Cpath d='M42 13 C 22 24, 22 40, 42 51'/%3E%3Cpath d='M22 32 H 42'/%3E%3C/g%3E%3C/svg%3E") no-repeat left center / 14px 14px; opacity: .75; pointer-events: none; }
.dossier-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; color: var(--accent); background: var(--accent-bg); border: 1px solid var(--accent-bg-2); padding: 4px 11px; border-radius: var(--r-pill); }
.dossier-title { font-size: 26.6px; font-weight: 650; letter-spacing: -0.03em; margin-top: var(--s3); }
.dossier-def { font-size: 13.3px; line-height: 1.6; color: var(--text-secondary); margin-top: var(--s4); max-width: 74ch; }
.dossier-areas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s4); }
.area-tag { font-size: 10.9px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-secondary); padding: 3px 10px; border-radius: var(--r-pill); }

/* Resource cards (patient + clinician + researcher external links) */
.res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: var(--s3); }
.res-card { display: flex; align-items: center; gap: var(--s3); border: 1px solid var(--border); border-radius: var(--r); padding: var(--s4); background: var(--surface); transition: border-color .14s, background .14s; }
.res-card:hover { border-color: var(--accent-line); background: var(--accent-bg); text-decoration: none; }
.res-card .rc-txt { min-width: 0; }
.res-card .rc-name { font-weight: 600; font-size: 13.2px; color: var(--text); }
.res-card .rc-note { font-size: 11.3px; color: var(--text-secondary); margin-top: 2px; }
.res-card .rc-org { font-size: 10px; color: var(--text-tertiary); margin-top: 3px; }
.res-card .rc-arrow { margin-left: auto; color: var(--text-tertiary); flex: none; }

/* Drug cards (clinician) */
.drug-list { display: flex; flex-direction: column; gap: var(--s3); }
.drug-card { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1); overflow: hidden; }
.drug-head { display: flex; align-items: flex-start; gap: var(--s3); width: 100%; text-align: left; background: none; border: none; padding: var(--s4) var(--s5); }
.drug-head:hover { background: var(--surface-2); }
.drug-id { min-width: 0; flex: 1; }
.drug-name { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; text-transform: capitalize; }
.drug-moa { display: block; font-size: 11.8px; color: var(--text-secondary); margin-top: 3px; }
.drug-stage { flex: none; font-size: 10px; font-weight: 600; padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid; white-space: nowrap; }
.drug-stage.approved { color: var(--green-ink); background: var(--green-bg); border-color: var(--green-border); }
.drug-stage.trial { color: var(--amber-ink); background: var(--amber-bg); border-color: var(--amber-border); }
.drug-chev { flex: none; color: var(--text-tertiary); transition: transform .2s var(--ease); align-self: center; }
.drug-card.open .drug-chev { transform: rotate(180deg); }
.drug-body { display: none; padding: 0 var(--s5) var(--s5); border-top: 1px solid var(--border); margin-top: -1px; }
.drug-card.open .drug-body { display: block; padding-top: var(--s4); }
.drug-field { margin-top: var(--s3); border-top: 1px solid var(--border); padding-top: var(--s3); }
.drug-field:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.df-head { display: flex; align-items: center; gap: var(--s2); width: 100%; background: none; border: 0; padding: 3px 0; text-align: left; cursor: pointer; color: inherit; }
.df-head:hover .df-k { color: var(--text-secondary); }
.df-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.drug-field .df-k { font-size: 12.7px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); font-weight: 600; }
.df-n { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--text-tertiary); background: var(--surface-2); border: 1px solid var(--border); border-radius: 99px; padding: 0 7px; line-height: 1.5; }
.df-chev { margin-left: auto; color: var(--text-tertiary); flex: none; transition: transform .16s ease; }
.drug-field.open .df-chev { transform: rotate(180deg); }
.drug-field .df-v { display: none; font-size: 16.4px; line-height: 1.55; color: var(--text); margin-top: var(--s3); max-width: 80ch; }
.drug-field.open .df-v { display: block; }
.drug-boxed { color: var(--red-ink); background: var(--red-bg); border: 1px solid var(--red-border); border-radius: var(--r-sm); padding: 8px var(--s3); font-size: 11.3px; line-height: 1.5; margin-top: var(--s3); }
.drug-boxed b { color: var(--red-ink); }

/* Controlled-substance (DEA schedule) warning — a regulatory/safety notice; buy links are suppressed. */
.drug-controlled { display: flex; align-items: flex-start; gap: var(--s3); color: var(--amber-ink); background: var(--amber-bg); border: 1px solid var(--amber-border); border-radius: var(--r-sm); padding: 9px var(--s3); font-size: 11.8px; line-height: 1.55; margin: var(--s3) 0; }
.drug-controlled b { color: var(--amber-ink); }
.drug-controlled .cc-badge { flex: none; align-self: flex-start; background: var(--amber-ink); color: #fff; font-weight: 700; font-size: 10.5px; letter-spacing: .02em; text-transform: uppercase; border-radius: 6px; padding: 3px 8px; white-space: nowrap; }
.drug-controlled .cc-text { flex: 1; }
.drug-controlled .cc-src { display: block; margin-top: 3px; opacity: .85; }
.drug-controlled a { color: var(--amber-ink); text-decoration: underline; }
.drug-src { font-size: 10.9px; margin-top: var(--s4); }
.more-drugs { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.more-drug { font-size: 11.3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 4px var(--s3); color: var(--text-secondary); }
.more-drug a { color: inherit; }

/* Risk-gene table (researcher) */
.arch-summary { display: flex; flex-wrap: wrap; gap: var(--s3); margin: 0 0 var(--s4); }
.arch-stat { border: 1px solid var(--border); border-radius: var(--r); padding: var(--s3) var(--s4); background: var(--surface); min-width: 120px; }
.arch-stat .n { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.arch-stat .l { font-size: 10.9px; color: var(--text-secondary); margin-top: 2px; }
.gene-score-bar { height: 6px; background: var(--surface-3); border-radius: var(--r-pill); overflow: hidden; width: 72px; display: inline-block; vertical-align: middle; }
.gene-score-bar > span { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill); }
.arch-chip { font-size: 9.6px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid transparent; white-space: nowrap; }
.arch-chip.mend { color: var(--red-ink); background: var(--red-bg); border-color: var(--red-border); }
.arch-chip.gwas { color: var(--accent); background: var(--accent-bg); border-color: var(--accent-bg-2); }
.arch-chip.drug { color: #6b3fa0; background: #f2ecfb; border-color: #e0d3f4; }
.arch-chip.emerg { color: var(--text-secondary); background: var(--surface-2); border-color: var(--border); }
.ev-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ev-chip { font-size: 9.6px; color: var(--text-secondary); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.druggable-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.xref-chip { font-size: 11.3px; color: var(--text-secondary); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 3px 10px; }
.xref-chip b { color: var(--text); font-weight: 600; }

/* ── Drug-discovery intelligence (researcher lens) ── */
.disc-verdict { display: inline-flex; align-items: center; gap: 8px; font-size: 12.7px; font-weight: 600; padding: 5px 12px 5px 10px; border-radius: var(--r-pill); border: 1px solid; margin: 4px 0 var(--s2); }
.disc-verdict .disc-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.disc-verdict.disc-clinical  { color: var(--green-ink); background: var(--green-bg); border-color: var(--green-border); }
.disc-verdict.disc-discovery { color: var(--accent); background: var(--accent-bg); border-color: var(--accent-line); }
.disc-verdict.disc-none      { color: var(--text-tertiary); background: var(--surface-2); border-color: var(--border); }
.disc-mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: var(--s2); margin-top: var(--s2); }
.disc-mod { border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: var(--r-sm); padding: 8px 10px; background: var(--surface); }
.disc-mod.clinical  { border-left-color: var(--green); }
.disc-mod.discovery { border-left-color: var(--accent-line); }
.disc-mod-h { font-size: 12.5px; font-weight: 600; color: var(--text); }
.disc-mod-a { font-size: 11px; font-weight: 600; margin-top: 2px; }
.disc-mod.clinical  .disc-mod-a { color: var(--green-ink); }
.disc-mod.discovery .disc-mod-a { color: var(--accent); }
.disc-mod-b { font-size: 10.6px; color: var(--text-tertiary); margin-top: 3px; }
.disc-stats { display: flex; flex-wrap: wrap; gap: 6px var(--s5); margin-top: 6px; font-size: 12.7px; color: var(--text-secondary); }
.disc-stats b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.disc-phase-bar { display: flex; height: 10px; border-radius: var(--r-pill); overflow: hidden; margin-top: var(--s3); background: var(--surface-2); }
.disc-seg { display: block; min-width: 3px; }
.disc-legend { display: flex; flex-wrap: wrap; gap: 4px var(--s3); margin-top: 6px; }
.disc-leg { font-size: 11px; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 5px; }
.disc-leg b { color: var(--text); font-variant-numeric: tabular-nums; }
.disc-swatch { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.disc-seg.approved, .disc-swatch.approved, .phase-pill.approved { background: var(--green); }
.disc-seg.p3, .disc-swatch.p3 { background: #2e8b8b; }
.disc-seg.p2, .disc-swatch.p2 { background: #3f77c0; }
.disc-seg.p1, .disc-swatch.p1 { background: #6b6bc7; }
.disc-seg.pre, .disc-swatch.pre { background: var(--border-strong); }
.disc-drug-wrap { overflow-x: auto; margin-top: var(--s2); }
.disc-drugs { width: 100%; border-collapse: collapse; font-size: 12.7px; }
.disc-drugs th { text-align: left; font-weight: 600; color: var(--text-tertiary); font-size: 10.4px; text-transform: uppercase; letter-spacing: .04em; padding: 4px 10px 4px 0; border-bottom: 1px solid var(--border); white-space: nowrap; }
.disc-drugs td { padding: 6px 10px 6px 0; border-bottom: 1px solid var(--border); vertical-align: middle; }
.disc-drugs tr:last-child td { border-bottom: none; }
.disc-act { color: var(--text-secondary); font-size: 11.6px; }
.phase-pill { display: inline-block; font-size: 10.6px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill); color: #fff; white-space: nowrap; }
.phase-pill.p3 { background: #2e8b8b; } .phase-pill.p2 { background: #3f77c0; } .phase-pill.p1 { background: #6b6bc7; }
.phase-pill.pre { background: var(--surface-3); color: var(--text-secondary); }
.trial-card { border: 1px solid var(--border); border-radius: var(--r); padding: var(--s3) var(--s4); }
.trial-card:hover { border-color: var(--border-strong); }

/* ============================================================
   BANNERS (decision-support + spelling correction)
   ============================================================ */
.ds-banner { margin-top: var(--s5); font-size: 10.9px; color: var(--text-tertiary); border-top: 1px solid var(--border); padding-top: var(--s3); }
.corrected-note { margin-top: var(--s3); font-size: 12.3px; color: var(--text-secondary); background: var(--amber-bg); border: 1px solid var(--amber-border); border-radius: var(--r-sm); padding: 6px var(--s3); display: inline-block; }
.corrected-note b { color: var(--amber-ink); }
.arch-chip.clin { color: var(--amber-ink); background: var(--amber-bg); border-color: var(--amber-border); }
.drug-access { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.drug-access .sep { color: var(--text-tertiary); margin: 0 2px; }

/* ============================================================
   GENE EXPLORER
   ============================================================ */
.gene-hero .dossier-title { font-family: var(--mono); letter-spacing: -0.02em; }
.gene-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s3); margin-top: var(--s5); }
.gf { border: 1px solid var(--border); border-radius: var(--r); padding: var(--s3) var(--s4); background: var(--surface-2); }
.gf-k { font-size: 9.6px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); font-weight: 600; }
.gf-v { font-size: 12.7px; font-weight: 600; color: var(--text); margin-top: 3px; font-family: var(--mono); letter-spacing: -0.01em; }

.gene-model-wrap { margin-top: var(--s5); border: 1px solid var(--border); border-radius: var(--r); padding: var(--s4) var(--s5); background: var(--surface); }
.gm-head { display: flex; justify-content: space-between; align-items: center; font-size: 10.9px; color: var(--text-secondary); margin-bottom: var(--s3); flex-wrap: wrap; gap: var(--s2); }
.gm-head span:first-child { font-family: var(--mono); }
.gm-strand { font-weight: 600; color: var(--accent); }
.genemodel { display: block; width: 100%; height: 40px; overflow: visible; }
.genemodel .gm-intron { stroke: var(--border-strong); stroke-width: 1.4; }
.genemodel .gm-utr { fill: var(--accent-bg-2); }
.genemodel .gm-cds { fill: var(--accent); }
.gm-axis { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; color: var(--text-tertiary); margin-top: 6px; }
.gm-legend { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s3); font-size: 10.9px; color: var(--text-secondary); }
.gm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.gm-lg { width: 14px; height: 10px; border-radius: 2px; display: inline-block; }
.gm-lg.cds { background: var(--accent); }
.gm-lg.utr { background: var(--accent-bg-2); }
.gm-lg.intron { width: 14px; height: 2px; border-radius: 0; background: var(--border-strong); }

.browser-links { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }
.browser-btn { display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--border); border-radius: var(--r); padding: 8px var(--s4); background: var(--surface); transition: border-color .14s, background .14s; text-decoration: none; }
.browser-btn:hover { border-color: var(--accent-line); background: var(--accent-bg); text-decoration: none; }
.browser-btn b { font-size: 12.7px; font-weight: 600; color: var(--text); }
.browser-btn:hover b { color: var(--accent); }
.browser-btn small { font-size: 10.5px; color: var(--text-tertiary); }

/* ============================================================
   RESEARCHER HOME TOOLS + BATCH PANEL
   ============================================================ */
.home-tools { max-width: 720px; margin: 0 auto; text-align: left; }
.home-tool-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
@media (max-width: 640px){ .home-tool-row { grid-template-columns: 1fr; } }
.home-tool { display: flex; align-items: center; gap: var(--s3); text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s4) var(--s5); box-shadow: var(--sh-1); transition: border-color .16s var(--ease), transform .16s var(--ease); }
.home-tool:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.home-tool .ht-ic { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); }
.home-tool .ht-ic svg { width: 20px; height: 20px; }
.home-tool .ht-txt { display: flex; flex-direction: column; }
.home-tool .ht-txt b { font-size: 13.6px; font-weight: 600; }
.home-tool .ht-txt small { font-size: 10.9px; color: var(--text-tertiary); }
.batch-panel { margin-top: var(--s3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s4); box-shadow: var(--sh-1); }
.batch-panel textarea { width: 100%; min-height: 96px; resize: vertical; border: 1px solid var(--border-strong); border-radius: var(--r); padding: var(--s3) var(--s4); font-family: var(--mono); font-size: 11.8px; color: var(--text); background: var(--surface-2); line-height: 1.6; }
.batch-panel textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; background: var(--surface); }
.batch-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s3); }

/* ============================================================
   SUBSTANCE — chemistry + mechanism
   ============================================================ */
.chem-grid { display: grid; grid-template-columns: 180px 1fr; gap: var(--s5); align-items: start; }
@media (max-width: 620px){ .chem-grid { grid-template-columns: 1fr; } }
.chem-img { width: 100%; max-width: 180px; border: 1px solid var(--border); border-radius: var(--r); background: #fff; padding: var(--s2); }
.chem-facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.gf-v.mono-wrap { font-family: var(--mono); font-size: 9.8px; white-space: normal; word-break: break-all; line-height: 1.45; }
.chem-active { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; background: var(--accent-bg); border: 1px solid var(--accent-line); border-radius: var(--r-sm); padding: 10px 14px; margin-bottom: var(--s4); font-size: 11.2px; line-height: 1.5; color: var(--text); }
.chem-active b { font-weight: 650; }
/* Active constituents of an extract (ashwagandha → withanolides) */
.const-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s3); }
.const-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; border: 1px solid var(--border); border-radius: var(--r); padding: var(--s3); background: var(--surface); transition: border-color .14s, box-shadow .14s; text-decoration: none; }
.const-card:hover { border-color: var(--accent-line); box-shadow: var(--sh-1); text-decoration: none; }
.const-img { width: 100%; max-width: 120px; height: 92px; object-fit: contain; background: #fff; border-radius: var(--r-sm); }
.const-name { font-weight: 600; font-size: 10.5px; color: var(--text); line-height: 1.25; }
.const-formula { font-family: var(--mono); font-size: 9.5px; color: var(--text-secondary); }
.moa-list { margin: var(--s2) 0 0; padding-left: var(--s5); font-size: 12.7px; line-height: 1.7; color: var(--text); }
.moa-list li { margin: 2px 0; }

/* Buy / price cards — prominent, tappable, one flagged as showing a real price */
/* Over-the-counter relief list (patient view) */
.otc-list { display: flex; flex-direction: column; gap: var(--s2); }
.otc-item { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s4); justify-content: space-between; border: 1px solid var(--border); border-radius: var(--r); padding: var(--s3) var(--s4); background: var(--surface); }
.otc-info { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; min-width: 0; }
.otc-name { font-weight: 600; font-size: 15px; color: var(--text); }
.otc-moa { font-size: 12.5px; color: var(--text-tertiary); }
.otc-buy { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 13px; }
.otc-buy-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); margin-right: 2px; }
.otc-buy .sep { color: var(--text-tertiary); margin: 0 1px; }
.buy-field { margin-top: var(--s4); }
.buy-field:first-child { margin-top: 0; }
.buy-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s3); margin-top: var(--s2); }
.buy-card { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--border); border-radius: var(--r); padding: var(--s3) var(--s4); background: var(--surface); transition: border-color .14s, background .14s, box-shadow .14s; text-decoration: none; }
.buy-card:hover { border-color: var(--accent-line); background: var(--accent-bg); box-shadow: var(--sh-1); text-decoration: none; }
.buy-card.has-price { border-color: var(--green-border); background: var(--green-bg); }
.buy-card.has-price:hover { border-color: var(--green); }
.buy-name { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13.6px; color: var(--text); }
.buy-name svg { color: var(--text-secondary); flex: none; }
.buy-card.has-price .buy-name svg { color: var(--green-ink); }
.buy-note { font-size: 11.3px; color: var(--text-secondary); line-height: 1.45; }
.buy-go { margin-top: 2px; font-size: 11.3px; font-weight: 550; color: var(--accent); display: inline-flex; align-items: center; gap: 3px; }
.buy-card.has-price .buy-go { color: var(--green-ink); }

/* Adverse-event frequency chips (FAERS) */
.ae-wrap { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: var(--s3); }
.ae-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.8px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 4px 10px; }
.ae-chip b { font-family: var(--mono); font-size: 10.5px; color: var(--text-secondary); font-weight: 600; }

/* Collapsible FDA-label prose (Show more) */
.clampwrap { margin-top: 2px; }
.clamptext { font-size: 16.4px; line-height: 1.6; color: var(--text); white-space: pre-line; }
.clamptext.clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-more { margin-top: 6px; background: none; border: none; padding: 0; color: var(--accent); font-size: 11.8px; font-weight: 550; cursor: pointer; }
.clamp-more:hover { text-decoration: underline; }

/* ============================================================
   3D STRUCTURE VIEWER (Gene Explorer)
   ============================================================ */
.struct-tabs { display: inline-flex; background: var(--surface-3); border-radius: var(--r-pill); padding: 3px; gap: 2px; margin-bottom: var(--s3); }
.struct-tabs button { background: none; border: none; border-radius: var(--r-pill); padding: 6px var(--s4); font-size: 11.8px; font-weight: 500; color: var(--text-secondary); }
.struct-tabs button.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.struct-3d { position: relative; width: 100%; height: 420px; border: 1px solid var(--border); border-radius: var(--r); background: #fff; overflow: hidden; }
.struct-3d canvas { border-radius: var(--r); }
.struct-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--s3); font-size: 10.9px; color: var(--text-secondary); }
.struct-legend .pl { width: 13px; height: 13px; border-radius: 3px; display: inline-block; margin-left: 8px; }
.struct-legend .pl.p1 { background: #0053D6; } .struct-legend .pl.p2 { background: #65CBF3; }
.struct-legend .pl.p3 { background: #FFDB13; } .struct-legend .pl.p4 { background: #FF7D45; }
/* Glossary info tooltips — a small (i) that explains a platform term on hover/tap */
.infotip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 5px; color: var(--text-tertiary); cursor: help; vertical-align: middle; border-radius: 50%; flex: none; }
.infotip:hover, .infotip.open, .infotip:focus-visible { color: var(--accent); outline: none; }
.infotip-pop { position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(4px); width: 252px; max-width: 70vw; background: #1d1d1f; color: #fff; font-family: var(--sans); font-size: 11.2px; font-weight: 400; line-height: 1.5; text-transform: none; letter-spacing: normal; padding: 11px 13px; border-radius: 11px; box-shadow: 0 8px 28px rgba(0,0,0,.28); opacity: 0; visibility: hidden; transition: opacity .14s, transform .14s; z-index: 60; pointer-events: none; text-align: left; white-space: normal; }
.infotip:hover .infotip-pop, .infotip:focus-within .infotip-pop, .infotip.open .infotip-pop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.infotip-pop b { color: #fff; font-weight: 650; }
.infotip-pop::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #1d1d1f; }
.infotip-more { display: inline-block; margin-top: 7px; background: none; border: none; padding: 0; font: inherit; font-weight: 600; color: #7db4ff; cursor: pointer; }
.infotip-more:hover, .infotip-more:focus-visible { text-decoration: underline; outline: none; }
.glossary dt.gloss-flash { animation: gloss-flash 1.8s var(--ease); border-radius: 6px; }
@keyframes gloss-flash { 0%, 35% { background: var(--accent-bg); box-shadow: 0 0 0 6px var(--accent-bg); } 100% { background: transparent; box-shadow: 0 0 0 6px transparent; } }

/* Disambiguation bar (multi-meaning terms) */
.disambig-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 var(--s5); padding: var(--s3) var(--s4); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); }
.disambig-bar .dis-label { font-size: 11.3px; font-weight: 600; color: var(--text-secondary); }
.disambig-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-pill); padding: 5px var(--s3); font-size: 11.8px; color: var(--text); cursor: pointer; transition: border-color .14s, background .14s; }
.disambig-chip:hover { border-color: var(--accent-line); background: var(--accent-bg); }
.disambig-chip.active { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); font-weight: 550; cursor: default; }
.disambig-chip .dis-hint { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-tertiary); }
.disambig-chip.active .dis-hint { color: var(--accent); }

.struct-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.struct-style, .struct-dl { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.struct-style button, .struct-dl button { background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 5px var(--s3); font-size: 10.9px; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: background .14s, color .14s, border-color .14s; }
.struct-style button:hover, .struct-dl button:hover { border-color: var(--accent-line); color: var(--accent); }
.struct-dl button:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.struct-style button.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.struct-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s3); }
.struct-dl .dl-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); margin-right: 2px; }
.struct-desc { font-size: 12.7px; line-height: 1.55; color: var(--text-secondary); margin: 0 0 var(--s3); max-width: 82ch; }
.struct-desc b { color: var(--text); font-weight: 600; }
.struct-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); margin-top: var(--s3); }
.struct-tool { display: inline-flex; align-items: center; gap: var(--s2); }
.struct-tool .tool-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); }
.struct-bg { display: inline-flex; gap: 5px; }
.bg-sw { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border-strong); cursor: pointer; padding: 0; transition: transform .1s, box-shadow .12s; }
.bg-sw:hover { transform: scale(1.08); }
.bg-sw.active { box-shadow: 0 0 0 2px var(--accent); border-color: var(--accent); }
.bg-sw.sw-light { background: #ffffff; } .bg-sw.sw-dark { background: #0b1020; } .bg-sw.sw-black { background: #000000; }
.struct-spin-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 5px var(--s3); font-size: 11.3px; font-weight: 500; color: var(--text-secondary); cursor: pointer; }
.struct-spin-btn:hover { border-color: var(--accent-line); color: var(--accent); }
.struct-spin-btn.active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.struct-hint { font-size: 10.9px; color: var(--text-tertiary); margin-left: auto; }
.struct-spin { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; background: rgba(255,255,255,.72); font-size: 11.8px; color: var(--text-secondary); z-index: 5; }
.struct-spin-ring { width: 20px; height: 20px; border: 2.5px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: struct-spin .7s linear infinite; }
@keyframes struct-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .struct-spin-ring { animation: none; } }

/* ============================================================
   GLOSSARY (Methods page)
   ============================================================ */
.glossary { margin: var(--s4) 0 0; }
.glossary dt { font-weight: 600; color: var(--text); margin-top: var(--s4); font-size: 13.6px; }
.glossary dd { margin: 4px 0 0; color: var(--text-secondary); line-height: 1.6; font-size: 13.2px; }
.glossary dd b { color: var(--text); font-weight: 600; }

/* ============================================================
   AUDIENCE LENS — progressive disclosure by mode
   Depth tiers: all (always) · patient · clinician · researcher.
   patient  → hide clinician + researcher
   clinician→ hide patient + researcher
   researcher→ hide patient
   ============================================================ */
html[data-mode="patient"]    [data-tier="clinician"],
html[data-mode="patient"]    [data-tier="researcher"] { display: none !important; }
html[data-mode="clinician"]  [data-tier="patient"],
html[data-mode="clinician"]  [data-tier="researcher"] { display: none !important; }
html[data-mode="researcher"] [data-tier="patient"] { display: none !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
.omnisearch { min-width: 190px; }   /* never let the big nav squeeze the search shut */
/* The full 50%-larger bar needs a wide screen; scale it back on laptops so the
   search box keeps its width and nothing overflows. */
@media (max-width: 1600px) {
  .wordmark { font-size: 18.5px; }
  .brand-mark { width: 42px; height: 42px; }
  .omnisearch { max-width: 680px; padding: 8px var(--s3) 8px var(--s4); }
  .omnisearch input { font-size: 14.3px; }
  .omnisearch .lens { width: 24px; height: 24px; }
  .mainnav a { font-size: 13px; padding: 8px var(--s3); }
  .lens-switch button { font-size: 12.6px; padding: 7px var(--s3); }
  .kbd-hint { font-size: 11.4px; }
}
@media (max-width: 1180px) {
  .mainnav { display: none; }
  .nav-toggle { display: inline-flex; }
  .mobilemenu.open { display: flex; flex-direction: column; padding: var(--s2) var(--s5) var(--s4); gap: 2px; border-top: 1px solid var(--border); background: var(--glass); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
  .mobilemenu a { background: none; border: none; text-align: left; text-decoration: none; padding: 10px var(--s2); font-size: 13.6px; color: var(--text); border-radius: var(--r-sm); }
  .mobilemenu a:hover { background: var(--surface-3); }
  /* Keep the lens labels visible — dots-only is not an obvious control. Just compact. */
  .lens-switch button { padding: 5px 9px; font-size: 13.1px; }
}

@media (max-width: 720px) {
  /* Two-row bar: [brand · search · menu] then the lens control on its own row. The search
     grows from a 0 flex-basis (not its long placeholder) so the hamburger never drops to a
     line of its own — the header stays ~2 rows instead of 3. */
  .appbar-inner { flex-wrap: wrap; height: auto; gap: var(--s3); row-gap: 9px; padding: 9px var(--s4); }
  .kbd-hint { display: none; }
  .omnisearch { flex: 1 1 0; min-width: 0; padding: 5px 5px 5px var(--s4); }
  .omnisearch input { font-size: 16px; }        /* >=16px so iOS doesn't zoom on focus */
  .omni-go { width: 34px; height: 34px; }
  .omni-go svg { width: 17px; height: 17px; }
  .lens-switch { order: 10; flex: 1 1 100%; padding: 3px; justify-content: stretch; }
  .lens-switch button { flex: 1 1 0; justify-content: center; padding: 8px 6px; font-size: 13px; gap: 6px; }
  .workspace { padding: var(--s4) var(--s4) var(--s6); }
  .verdict { padding: var(--s5); }
  .home-title { font-size: 27.3px; }
  .home-lede { font-size: 14.6px; }
  .page-head h1 { font-size: 22.8px; }
  .cond-title { font-size: 23.7px; }
  .cond-sec-body { padding-left: var(--s5); }
  .acmg-row { grid-template-columns: auto 1fr auto; }

  /* The big lens CARDS duplicate the always-visible lens pills in the bar — drop them on
     phones (they alone add ~180px of chrome above every dossier). */
  .lenstabs { display: none; }
  /* Tighter, calmer section headers + bodies; the "Signature" badge and its info tip are
     the main things that crowd (and overflow) a narrow header, and the accent styling
     already flags a signature section — so hide them on phones. */
  .section > .sec-head { padding: 12px var(--s4); font-size: 15.4px; gap: var(--s2); }
  .sec-head .sig, .sec-head .infotip { display: none; }
  .sec-head .count { font-size: 13px; }
  .sec-body { padding: var(--s2) var(--s4) var(--s4); }
  /* On phones a centred tooltip near the right edge overflows the page — and even a *hidden*
     one expands the horizontal scroll width. Pin tooltips to a full-width strip at the bottom
     of the screen (position:fixed inside the viewport) so they never overflow either way. */
  .infotip-pop { position: fixed; left: 12px; right: 12px; bottom: 14px; top: auto; width: auto; max-width: none; transform: translateY(8px); }
  .infotip:hover .infotip-pop, .infotip.open .infotip-pop, .infotip:focus-within .infotip-pop { transform: translateY(0); }
  .infotip-pop::after { display: none; }
}
@media (max-width: 520px) {
  .acmg-row { grid-template-columns: auto 1fr; grid-template-areas: "code crit" "contrib sw"; row-gap: var(--s2); }
  .acmg-code { grid-area: code; } .acmg-crit { grid-area: crit; } .acmg-contrib { grid-area: contrib; } .switch { grid-area: sw; justify-self: end; }
  .paper { grid-template-columns: 1fr; } .paper-idx { display: none; }
  .wordmark { display: none; }               /* free space; keep the mark + labelled lens */
}

/* ═══════════════════════════════════════════════════════════════════════════
   Knowledge graph + target-intelligence dashboard
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── mini graph (in the trace rail) ── */
.kg-mini { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; display: flex; flex-direction: column; }
.kg-mini-head { display: flex; align-items: center; justify-content: space-between; padding: 10px var(--s4) 8px; border-bottom: 1px solid var(--border); }
.kg-mini-title { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); }
button.kg-mini-title { font-family: inherit; background: none; border: 0; padding: 0; cursor: pointer; transition: color .12s; -webkit-tap-highlight-color: transparent; }
button.kg-mini-title:hover { color: var(--accent); }
button.kg-mini-title:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 3px; border-radius: 4px; }
.kg-mini-expand { font-size: 11px; font-weight: 600; color: var(--accent); background: none; border: 0; cursor: pointer; font-family: inherit; padding: 2px 4px; border-radius: 6px; }
.kg-mini-expand:hover { background: var(--accent-bg); }
.kg-mini-stage { position: relative; height: 340px; touch-action: pan-y; }   /* let a vertical swipe scroll the dossier past the mini map (horizontal drags still reach the canvas) */
.kg-mini-legend { display: flex; flex-wrap: wrap; gap: 7px 16px; padding: 10px var(--s4) 12px; border-top: 1px solid var(--border); }
.kg-mini-legend .kg-leg { font-size: 12px; }
.kg-mini-legend .kg-dot { width: 11px; height: 11px; }
.kg-mini.kg-mini-empty .kg-mini-stage, .kg-mini.kg-mini-empty .kg-mini-legend { display: none; }

.trace-path { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 10px var(--s4) 12px; }
.trace-path[hidden] { display: none; }
.trace-path-h { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 7px; }
.trace-path .trace-steps { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
.trace-path .trace-step { width: auto; padding: 2px 7px; font-size: 12px; border-radius: 99px; }
.trace-path .trace-step.cur { background: var(--accent-bg); color: var(--accent); }
.trace-sep { color: var(--text-tertiary); font-size: 11px; }

/* ── graph canvas (shared by mini + full) ── */
.kg-svg { display: block; width: 100%; height: 100%; color: var(--border-strong); cursor: grab; background:
  radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 60%),
  radial-gradient(circle at 75% 80%, color-mix(in srgb, #7c4dcc 5%, transparent), transparent 55%); }
.kg-svg:active { cursor: grabbing; }
.kg-edge { transition: opacity .12s; }
.kg-node { cursor: pointer; }
.kg-node .kg-c { transition: r .12s, stroke-width .12s; filter: drop-shadow(0 1px 2px rgba(0,0,0,.16)); }
.kg-node:hover .kg-c { stroke-width: 2.6px; }
.kg-c.sel { stroke: #111 !important; stroke-width: 3px !important; }
.kg-lbl { fill: var(--text); paint-order: stroke; stroke: color-mix(in srgb, var(--surface) 78%, transparent); stroke-width: 1.8px; stroke-linejoin: round; text-anchor: middle; pointer-events: none; font-family: var(--sans, inherit); }
.kg-busy .kg-svg { opacity: .6; }
.kg-tip { position: absolute; transform: translate(-50%, -100%); background: #1d1d1f; color: #fff; border-radius: 8px; padding: 5px 9px; font-size: 11.5px; pointer-events: none; z-index: 5; display: flex; flex-direction: column; line-height: 1.35; box-shadow: var(--sh-2); white-space: nowrap; }
.kg-tip b { font-weight: 650; } .kg-tip span { opacity: .7; font-size: 10.3px; }

.kg-leg { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-secondary); }
.kg-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }

/* ── full-screen explorer ── */
body.kg-lock { overflow: hidden; }
.kg-overlay { position: fixed; inset: 0; z-index: 120; background: color-mix(in srgb, var(--text) 45%, transparent); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 2.5vh 2.5vw; animation: kg-fade .16s var(--ease); }
/* Suppress the mobile tap flash + text-selection callout on the interactive graph chrome */
.kg-svg, .kg-node, .kg-btn, .kg-search-go, button.kg-leg, .kg-disc, button.kg-disc-chip, .kg-menu-item, .kg-mini-expand, .kg-title-link { -webkit-tap-highlight-color: transparent; }
.kg-svg, .kg-full-head, .kg-full-tools, .kg-legend, .kg-side-h, .kg-btn, button.kg-leg, button.kg-disc-chip { -webkit-user-select: none; user-select: none; }
@keyframes kg-fade { from { opacity: 0; } to { opacity: 1; } }
.kg-full { width: 100%; height: 95vh; height: 95dvh; max-width: 1500px; background: var(--surface); border-radius: var(--r-xl); box-shadow: 0 24px 70px rgba(0,0,0,.34); display: flex; flex-direction: column; overflow: hidden; }
.kg-full-head { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--s6); border-bottom: 1px solid var(--border); }
.kg-full-title { font-size: 16.5px; font-weight: 680; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; }
.kg-glyph { color: var(--accent); }
.kg-full-sub { font-size: 12.7px; font-weight: 500; color: var(--text-tertiary); }
/* Clickable title (overlay only) → opens the dedicated Traxome Graph tab */
button.kg-title-link { font-family: inherit; background: none; border: 0; padding: 2px 4px; margin: -2px -4px; color: inherit; cursor: pointer; border-radius: 8px; text-align: left; transition: color .12s; }
button.kg-title-link:hover { color: var(--accent); }
button.kg-title-link:hover .kg-full-sub { color: var(--accent); opacity: .8; }
button.kg-title-link:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }
.kg-full-tools { display: flex; gap: 8px; min-width: 0; }   /* min-width:0 lets the search shrink instead of clipping the buttons */
.kg-full-body { flex: 1; display: grid; grid-template-columns: 1fr 340px; min-height: 0; }
.kg-stage-wrap { position: relative; min-width: 0; }
.kg-stage { position: absolute; inset: 0; touch-action: none; }
.kg-legend { position: absolute; left: 18px; bottom: 16px; display: flex; flex-wrap: wrap; gap: 8px 17px; background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(4px); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 11px 19px; box-shadow: var(--sh-1); max-width: 60%; }
.kg-legend .kg-leg { font-size: 15px; }
.kg-legend .kg-dot, .kg-legend .kg-leg .kg-dot { width: 13px; height: 13px; }
.kg-side { border-left: 1px solid var(--border); overflow-y: auto; background: var(--surface-2); display: flex; flex-direction: column; }
.kg-side-sec { padding: var(--s5) var(--s5); border-bottom: 1px solid var(--border); }
.kg-side-disc { flex: 1; }
.kg-side-h { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 10px; display: flex; align-items: baseline; gap: 8px; }
.kg-side-note { font-size: 9.6px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-tertiary); }
/* Toolbar action button — soft-blue secondary chip in the accent family of the solid enter circle */
.kg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 12.5px; font-weight: 600; line-height: 1; letter-spacing: -.005em; font-family: inherit; padding: 7px 13px; border-radius: var(--r-pill); border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease), box-shadow .16s var(--ease), transform .12s var(--ease); }
/* Icon in its own span so the JS that rewrites the Select label never clobbers the SVG; icons track
   currentColor (flip to white on the solid state for free) and one line controls stroke weight. */
.kg-btn__icon { flex: 0 0 auto; width: 16px; height: 16px; display: inline-flex; }
.kg-btn__icon svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kg-btn__label { display: inline-block; }
.kg-btn:hover { background: var(--accent-bg-2); border-color: var(--accent); color: var(--accent-ink); }
.kg-btn:active { transform: translateY(.5px); }
.kg-btn:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--sh-focus); }
/* Active toggle (Select .on) and any .primary → solid accent, an exact match to the enter circle */
.kg-btn.on, .kg-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: var(--sh-1); }
.kg-btn.on:hover, .kg-btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.kg-btn.on:active, .kg-btn.primary:active { background: var(--accent-press); border-color: var(--accent-press); }
/* Disabled (e.g. Undo with nothing to undo) — leaves the blue family for inert gray so it never
   reads as a calm blue action. */
.kg-btn:disabled, .kg-btn[disabled] { background: var(--surface-2); color: var(--text-tertiary); border-color: var(--border); cursor: default; box-shadow: none; transform: none; }
.kg-btn:disabled:hover, .kg-btn[disabled]:hover { background: var(--surface-2); color: var(--text-tertiary); border-color: var(--border); }

.kg-info-empty, .kg-disc-load, .kg-disc-empty { font-size: 12.7px; color: var(--text-tertiary); line-height: 1.5; }
.kg-info-h { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.kg-info-kind { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-tertiary); }
.kg-info-title { font-size: 17px; font-weight: 680; letter-spacing: -.01em; line-height: 1.2; }
.kg-info-sub { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
.kg-info-acts { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 8px; }
.kg-info-hint { font-size: 10.6px; color: var(--text-tertiary); }

.kg-disc-types { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.kg-disc-chip { font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 99px; background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary); }
.kg-disc-chip b { color: var(--text); }
.kg-disc { background: var(--surface); border: 1.5px solid var(--border-strong); border-radius: var(--r); padding: 10px 12px; margin-bottom: 8px; cursor: pointer; transition: box-shadow .14s, transform .1s; }
.kg-disc:hover { box-shadow: var(--sh-1); transform: translateY(-1px); }
.kg-disc-t { font-size: 9.6px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 4px; }
.kg-disc-title { font-size: 13px; font-weight: 640; line-height: 1.3; margin-bottom: 6px; }
.kg-disc-path { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin-bottom: 6px; }
.kg-pth { font-size: 10.6px; font-weight: 600; padding: 1px 7px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); }
.kg-pth.k-gene { color: #7c4dcc; } .kg-pth.k-condition { color: var(--accent); } .kg-pth.k-substance { color: var(--green-ink); }
.kg-arrow { color: var(--text-tertiary); font-size: 10px; }
.kg-disc-detail { font-size: 11.7px; color: var(--text-secondary); line-height: 1.45; }
.t-repurposing { color: #1a7f37; } .t-shared_mechanism { color: #0071e3; }
.t-off_target { color: #a9640c; } .t-indication_leap { color: #7c4dcc; } .t-similar_leap { color: #2e8b8b; }
.kg-disc.t-repurposing { border-color: #1a7f37; } .kg-disc.t-shared_mechanism { border-color: #0071e3; }
.kg-disc.t-off_target { border-color: #a9640c; } .kg-disc.t-indication_leap { border-color: #7c4dcc; } .kg-disc.t-similar_leap { border-color: #2e8b8b; }

/* ── target-intelligence dashboard ── */
.intel-skel { display: flex; align-items: center; gap: 10px; font-size: 12.7px; color: var(--text-tertiary); padding: 8px 0; }
.spin { width: 15px; height: 15px; border: 2px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: kgspin .7s linear infinite; flex: none; }
@keyframes kgspin { to { transform: rotate(360deg); } }
.intel-class { display: inline-block; font-size: 11px; font-weight: 600; color: var(--text-secondary); background: var(--surface-2); border: 1px solid var(--border); border-radius: 99px; padding: 2px 10px; margin: 6px 0; }
.sub-note { font-weight: 500; font-size: 10px; text-transform: none; letter-spacing: 0; color: var(--text-tertiary); }

.score-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3); margin-top: var(--s2); }
.score-group { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); padding: 8px 10px; }
.score-group-h { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 6px; }
.score-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2.5px 0; font-size: 11.6px; color: var(--text-secondary); }
.score-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--border-strong); }
.score-dot.favourable { background: var(--green); } .score-dot.unfavourable { background: var(--red); } .score-dot.neutral { background: var(--border-strong); }

.pw-row { display: flex; flex-wrap: wrap; gap: 5px; }
.pw-chip { font-size: 11.3px; color: var(--text-secondary); background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; padding: 3px 9px; text-decoration: none; }
.pw-chip:hover { border-color: var(--accent-line); color: var(--accent); background: var(--accent-bg); }

.intel-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); margin-top: var(--s2); }
.intel-col { min-width: 0; }
.safety-list { display: flex; flex-direction: column; gap: 3px; }
.safety-item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-secondary); }
.safety-dir { font-size: 9px; width: 15px; text-align: center; flex: none; }
.safety-dir.increase { color: var(--red); } .safety-dir.decrease { color: var(--accent); } .safety-dir.bidirectional { color: var(--amber); }
.para-list { display: flex; flex-direction: column; gap: 5px; }
.para-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.para-row .gene-link { flex: none; min-width: 52px; }
.para-bar { flex: 1; height: 6px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.para-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--amber), var(--red)); }
.para-pct { font-family: var(--mono); font-size: 10.6px; color: var(--text-tertiary); flex: none; width: 40px; text-align: right; }
.micro-note { font-size: 10.4px; color: var(--text-tertiary); margin-top: 6px; }

.hallmark-list { display: flex; flex-direction: column; gap: 4px; }
.hallmark { display: flex; align-items: center; gap: 8px; font-size: 12.3px; color: var(--text); }
.hall-impact { font-size: 9.5px; font-weight: 700; text-transform: uppercase; padding: 1px 7px; border-radius: 99px; flex: none; }
.hall-impact.promotes { color: var(--red-ink); background: var(--red-bg); border: 1px solid var(--red-border); }
.hall-impact.suppresses { color: var(--green-ink); background: var(--green-bg); border: 1px solid var(--green-border); }
.sim-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.sim-k { font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: var(--text-tertiary); flex: none; width: 58px; }

@media (max-width: 900px) {
  .kg-mini-stage { height: 240px; }
  .kg-full-body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .kg-side { border-left: 0; border-top: 1px solid var(--border); max-height: 38vh; }
  .intel-two { grid-template-columns: 1fr; }
}

/* ── Traxome-graph toolbar: search, grow, interactive legend, node count ── */
.kg-search { position: relative; display: flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid transparent; border-radius: 99px; padding: 3px 3px 3px 4px; min-width: 200px; }
.kg-search:focus-within { background: var(--surface); border-color: var(--accent-line); box-shadow: var(--sh-focus); }
.kg-search input { width: 528px; max-width: 50vw; min-width: 0; font: inherit; font-size: 13.5px; padding: 7px 6px 7px 14px; border: 0; background: none; color: var(--text); }
.kg-search input:focus { outline: none; }
.kg-search-go { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s; }
.kg-search-go:hover { background: var(--accent-hover); }
.kg-count { position: absolute; right: 16px; bottom: 14px; font-size: 11px; font-weight: 600; color: var(--text-secondary); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(4px); border: 1px solid var(--border); border-radius: 99px; padding: 5px 11px; box-shadow: var(--sh-1); }
button.kg-leg { background: none; border: 0; cursor: pointer; font: inherit; font-size: 11px; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 5px; padding: 2px 6px; border-radius: 99px; transition: opacity .12s, background .12s; }
button.kg-leg:hover { background: var(--surface-2); }
button.kg-leg.off { opacity: .38; text-decoration: line-through; }

/* ── Traxome Graph tab (in-page explorer) ── */
.graph-page-host { height: calc(100vh - 132px); height: calc(100dvh - 132px); min-height: 460px; }
.kg-page { height: 100%; }
.kg-page .kg-full { height: 100%; border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--sh-1); }
.graph-prompt { display: flex; align-items: center; justify-content: center; min-height: 60vh; padding: var(--s6); }
.graph-prompt-inner { max-width: 560px; text-align: center; }
.graph-prompt-glyph { font-size: 44px; color: var(--accent); line-height: 1; margin-bottom: var(--s3); }
.graph-prompt-inner h2 { font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin-bottom: var(--s3); }
.graph-prompt-inner p { font-size: 15px; color: var(--text-secondary); line-height: 1.55; margin-bottom: var(--s5); }
.graph-prompt-input { display: flex; gap: 8px; max-width: 460px; margin: 0 auto var(--s4); }
.graph-prompt-input input { flex: 1; font: inherit; font-size: 15px; padding: 11px 18px; border: 1px solid var(--border-strong); border-radius: 99px; background: var(--surface); color: var(--text); }
.graph-prompt-input input:focus { outline: none; border-color: var(--accent-line); box-shadow: var(--sh-focus); }
.graph-prompt-input button { flex: none; font: inherit; font-weight: 600; font-size: 14px; padding: 11px 20px; border-radius: 99px; border: none; background: var(--accent); color: #fff; cursor: pointer; }
.graph-prompt-input button:hover { background: var(--accent-hover); }
.graph-prompt-ex { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
@media (max-width: 900px) {
  .graph-page-host { height: auto; }
  .kg-page .kg-full { height: 78vh; height: 78dvh; }
  /* Touch-friendly control sizes on tablets/phones */
  .kg-btn { min-height: 38px; }
  button.kg-leg, .kg-legend .kg-leg { padding: 7px 9px; min-height: 34px; }
  .kg-mini-expand { padding: 7px 9px; min-height: 32px; }
}

/* ── Phones (≤640px): the graph explorer overlay + in-page tab ── */
@media (max-width: 640px) {
  /* Overlay → true fullscreen on dynamic viewport height, clear of the notch + home indicator */
  .kg-overlay { padding: 0; align-items: stretch; }
  .kg-full { height: 100dvh; max-height: 100dvh; max-width: none; border-radius: 0; }
  .kg-page .kg-full { height: calc(100dvh - 92px); }

  /* Header reflows: title row, then a full-width search, then the buttons wrap onto their own row */
  .kg-full-head { flex-wrap: wrap; gap: 8px; padding: calc(10px + env(safe-area-inset-top)) var(--s4) 10px; }
  .kg-full-title { flex: 1 1 100%; min-width: 0; font-size: 15px; }
  .kg-full-tools { flex: 1 1 100%; flex-wrap: wrap; gap: 6px; }
  .kg-search { flex: 1 1 100%; order: -1; }
  .kg-search input { width: 100%; max-width: none; min-width: 0; font-size: 16px; }  /* 16px stops iOS focus-zoom */
  .kg-btn { flex: 1 1 auto; justify-content: center; }

  /* The graph fills the whole screen below the header; the Selection/Discoveries panel scrolls up
     from beneath it (single scroll container = the body). */
  .kg-full-body { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .kg-stage-wrap { height: 100%; }
  .kg-side { max-height: none; overflow: visible; border-top: 3px solid var(--border-strong); padding-bottom: calc(var(--s5) + env(safe-area-inset-bottom)); }

  /* Legend → thin bottom strip instead of a floating box that covers the graph */
  .kg-legend { left: 10px; right: 10px; bottom: 10px; max-width: none; gap: 5px 12px; padding: 7px 11px; }
  .kg-legend .kg-leg { font-size: 12px; }
  .kg-legend .kg-dot, .kg-legend .kg-leg .kg-dot { width: 11px; height: 11px; }
  .kg-count { right: 10px; bottom: 56px; }

  /* Mini map (in the dossier) + graph-tab prompt */
  .kg-mini-stage { height: 280px; }
  .graph-prompt-input input, #graph-seed-q { font-size: 16px; }
}

/* ── graph node context menu + discovery-type toggle filters ── */
.kg-menu { position: absolute; z-index: 30; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r); box-shadow: var(--sh-2); padding: 4px; min-width: 150px; display: flex; flex-direction: column; }
.kg-menu-item { text-align: left; font: inherit; font-size: 12.7px; font-weight: 500; color: var(--text); background: none; border: 0; padding: 7px 10px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.kg-menu-item:hover { background: var(--accent-bg); color: var(--accent); }
.kg-svg .kg-node { cursor: pointer; }
button.kg-disc-chip { font: inherit; font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary); cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
button.kg-disc-chip:hover { border-color: var(--border-strong); }
button.kg-disc-chip b { color: var(--text); }
button.kg-disc-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
button.kg-disc-chip.on b { color: #fff; }
button.kg-disc-chip.all.on { background: var(--text); border-color: var(--text); }

/* ── biochemistry card (substance dossier) ── */
.biochem-card { margin-bottom: var(--s4); border-color: var(--border); }
.biochem-inner { padding: var(--s5) var(--s6); }
.biochem-h { font-size: 13px; font-weight: 700; letter-spacing: .01em; display: flex; align-items: center; gap: 8px; margin-bottom: var(--s3); }
.biochem-glyph { color: #e8590c; font-size: 15px; }
.area-tag.aa { color: #b34700; background: #fff2e8; border-color: #ffd8b0; }
.bc-precursors { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.bc-chip { font: inherit; font-size: 12.5px; font-weight: 600; padding: 4px 11px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: default; }
button.bc-chip { cursor: pointer; }
.bc-chip.amino_acid { color: #b34700; background: #fff2e8; border-color: #ffd8b0; }
button.bc-chip.amino_acid:hover { background: #ffe3cc; }
.bc-chip.compound { color: var(--text-secondary); background: var(--surface-2); }
.bc-chip.cofactor { color: var(--text-tertiary); background: var(--surface-2); border-style: dashed; }
.bc-pathway { font-size: 13.3px; color: var(--text-secondary); line-height: 1.5; margin-top: var(--s3); }
.bc-source { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.bc-src-row { display: flex; gap: 10px; font-size: 13px; color: var(--text-secondary); line-height: 1.45; }
.bc-src-k { flex: none; width: 42px; font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); padding-top: 3px; }

/* ── marquee select, group-selection ring, pinned discovery, brand note ── */
.kg-marquee-box { position: absolute; z-index: 6; border: 1.5px dashed var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 4px; pointer-events: none; }
.kg-c.msel { stroke: var(--accent) !important; stroke-width: 3px !important; stroke-dasharray: 3 2.5; }
.kg-disc.pinned { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); }
.kg-disc-open { font-size: 11px; font-weight: 600; color: var(--accent); margin-top: 6px; opacity: 0; transition: opacity .12s; }
.kg-disc:hover .kg-disc-open, .kg-disc.pinned .kg-disc-open { opacity: 1; }
.brand-note { font-size: 13.3px; color: var(--text-secondary); line-height: 1.5; margin: 8px 0 2px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.brand-note b { color: var(--text); }
.brand-pill { flex: none; font-size: 9.6px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); background: var(--accent-bg); border: 1px solid var(--accent-line); border-radius: 99px; padding: 2px 8px; }

/* ── literature/patent pagination (Google-style) ── */
.lit-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: var(--s5); justify-content: center; }
.lit-pg { font: inherit; font-size: 13px; font-weight: 600; min-width: 34px; padding: 7px 11px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text-secondary); cursor: pointer; transition: border-color .12s, color .12s, background .12s; }
.lit-pg:hover:not(:disabled):not(.cur) { border-color: var(--accent-line); color: var(--accent); background: var(--accent-bg); }
.lit-pg.cur { background: var(--accent); border-color: var(--accent); color: #fff; cursor: default; }
.lit-pg:disabled { opacity: .4; cursor: default; }
.lit-pg-gap { color: var(--text-tertiary); padding: 0 2px; }

/* ── HPO phenotype definitions (phenotype view) ── */
.hpo-defs { display: flex; flex-direction: column; gap: 10px; margin-top: var(--s4); border-top: 1px solid var(--border); padding-top: var(--s4); }
.hpo-def-h { font-size: 13.5px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.hpo-def p { font-size: 13.3px; color: var(--text-secondary); line-height: 1.55; margin: 3px 0 0; max-width: 74ch; }

/* "searched the active ingredient" note in the patents feed (brand → generic resolution) */
.lit-resolved { color: var(--accent-ink); }
.lit-resolved b { color: var(--accent-ink); }