/* AICAN app kit styles */
@import url('colors_and_type.css?v=20260612-9');

html, body, #root { height: 100%; margin: 0; }
body { background: var(--bg-0); color: var(--fg-1); }

.app { height: 100vh; display: grid; grid-template-columns: 56px 1fr; grid-template-rows: 48px 1fr; }
.app .sidebar { grid-row: 1 / span 2; background: var(--bg-1); border-right: 1px solid var(--line-1); display: flex; flex-direction: column; align-items: center; padding: 8px 0; gap: 4px; }
.app .topbar { background: var(--bg-1); border-bottom: 1px solid var(--line-1); display: flex; align-items: center; padding: 0 16px; gap: 16px; }
.app .main { background: var(--bg-0); overflow: auto; }

.sidebar .item {
  width: 40px; height: 40px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-3); cursor: pointer; position: relative;
}
.sidebar .item:hover { background: var(--bg-3); color: var(--fg-1); }
.sidebar .item.active { background: var(--accent-soft); color: var(--accent-1); }
.sidebar .item.active::before { content:''; position:absolute; left:-1px; top:8px; bottom:8px; width:2px; background: var(--accent-1); border-radius: 0 2px 2px 0; }
.sidebar .item svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sidebar .brand { margin-bottom: 8px; }

.topbar .brand-text { font-weight: 700; letter-spacing: -0.01em; font-size: 20px; color: var(--fg-1); }
.topbar .crumbs { font-family: var(--font-mono); font-size: 17px; color: var(--fg-2); font-weight: 500; }
.topbar .crumbs b { color: var(--fg-1); font-weight: 700; }
/* Clickable "Patient list" breadcrumb — looks like text, behaves like a link. */
.topbar .crumbs .crumb-link {
  font-family: inherit; font-size: inherit; font-weight: 500; color: var(--accent-1);
  background: none; border: none; padding: 0; cursor: pointer;
}
.topbar .crumbs .crumb-link:hover { text-decoration: underline; }
.topbar .right { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.topbar .ts { font-family: var(--font-mono); font-size: 16px; color: var(--fg-3); }
.topbar .av { width: 30px; height: 30px; border-radius: 999px; background: linear-gradient(135deg, var(--accent-1), var(--accent-3)); color:#fff; display:flex; align-items:center; justify-content:center; font-size: 16px; font-weight:700; overflow: hidden; }

/* Avatar menu (dropdown trigger + popover) */
.topbar .av-menu { position: relative; display: inline-flex; }
.av-trigger { padding: 0; border: 1px solid transparent; cursor: pointer; transition: box-shadow .15s ease, border-color .15s ease; }
.av-trigger:hover { box-shadow: 0 0 0 3px rgba(31,111,235,0.15); }
.av-trigger:focus-visible { outline: none; border-color: var(--accent-1); box-shadow: 0 0 0 3px rgba(31,111,235,0.30); }
.av-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 999px; }

.topbar .av-menu .av-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  z-index: 200;
  width: 280px;
  background: var(--bg-1); border: 1px solid var(--line-2);
  border-radius: var(--r-md); box-shadow: var(--sh-3);
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.av-pop-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px 12px; border-bottom: 1px solid var(--line-1); margin-bottom: 4px;
}
.av-pop-av { width: 36px; height: 36px; font-size: 17px; flex: 0 0 36px; }
.av-pop-id { min-width: 0; flex: 1; }
.av-pop-name { font-size: 18px; font-weight: 700; color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.av-pop-mail { font-size: 16px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.av-pop-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px; border: none; background: transparent;
  font-family: var(--font-sans); font-size: 17px; font-weight: 500; color: var(--fg-1);
  border-radius: var(--r-sm); cursor: pointer; text-align: left;
  transition: background .12s ease;
}
.av-pop-item:hover { background: var(--bg-3); }
.av-pop-item svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; flex-shrink: 0; color: var(--fg-3); }
.av-pop-item.av-pop-danger { color: var(--crit); }
.av-pop-item.av-pop-danger:hover { background: var(--crit-soft); }
.av-pop-item.av-pop-danger svg { color: var(--crit); }

.btn { font-family: var(--font-sans); font-size: 18px; font-weight: 600; height: 36px; padding: 0 16px; border-radius: var(--r-md); border: 1px solid transparent; display:inline-flex; align-items:center; gap: 6px; cursor:pointer; }
.btn.primary { background: var(--accent-1); color: var(--fg-on-accent); }
.btn.primary:hover { background: var(--accent-2); }
.btn.ghost { background: transparent; color: var(--fg-1); border-color: var(--line-2); }
.btn.ghost:hover { background: var(--bg-3); }
.btn.sm { height: 30px; padding: 0 12px; font-size: 17px; }
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; }
.btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.av-pop-item:disabled, .av-pop-item[disabled] { opacity: 0.5; cursor: not-allowed; }

.input { width: 100%; height: 36px; padding: 0 12px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-md); color: var(--fg-1); font-family: var(--font-sans); font-size: 18px; font-weight: 500; outline: none; }
.input:focus { border-color: var(--accent-1); box-shadow: 0 0 0 3px rgba(31,111,235,0.22); }

.eyebrow { font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em; color: var(--fg-2); }
.mono { font-family: var(--font-mono); }

/* Worklist */
.worklist { padding: 24px 32px; max-width: 1280px; margin: 0 auto; }
.worklist .header { display:flex; align-items:center; gap: 16px; margin-bottom: 20px; }
.worklist h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.01em; margin: 0; flex: 1; color: var(--fg-1); }
.worklist .filters { display:flex; gap: 8px; margin-bottom: 12px; align-items:center; }
.worklist .search { flex: 1; position: relative; max-width: 360px; }
.worklist .search svg { position: absolute; left: 10px; top: 11px; width: 14px; height: 14px; stroke: var(--fg-3); fill: none; stroke-width: 1.5; }
.worklist .search input { padding-left: 30px; }

.t { width: 100%; border-collapse: collapse; font-size: 18px; }
.t thead th { text-align:left; font-size: 16px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-2); font-weight: 700; padding: 12px; border-bottom: 1px solid var(--line-2); }
.t tbody td { padding: 14px 12px; border-bottom: 1px solid var(--line-1); color: var(--fg-1); font-weight: 500; }
.t tr { cursor: pointer; }
.t tr:hover td { background: var(--bg-2); }
.t tr.sel td { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent-1); }
.num { text-align:right; }

.chip { display:inline-flex; align-items:center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 16px; font-family: var(--font-mono); font-weight:700; }

/* Empty state — shown when the worklist has zero real cases. Replaces the
   old SAMPLE_CASES fallback that confused users with fake patient rows. */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 60px 24px; gap: 6px;
  background: var(--bg-1); border: 1px dashed var(--line-2); border-radius: var(--r-lg);
  margin-top: 8px;
}
.empty-icon {
  width: 56px; height: 56px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-1);
  display: flex; align-items: center; justify-content: center; margin-bottom: 8px;
}
.empty-icon svg { stroke: currentColor; fill: none; stroke-width: 1.75; }
.empty-title { font-size: 22px; font-weight: 700; color: var(--fg-1); margin: 0; }
.empty-sub { font-size: 18px; color: var(--fg-2); margin: 0; max-width: 360px; }
.chip.crit { background: var(--crit-soft); color: var(--crit); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.info { background: var(--info-soft); color: var(--info); }
.chip.accent { background: var(--accent-soft); color: var(--accent-1); }
.chip.neutral { background: var(--bg-3); color: var(--fg-2); }

/* Case workstation — header + tabs + single-pane body */
.case { padding: 20px; height: 100%; display: flex; flex-direction: column; gap: 14px; }
/* Case navigation bar — Back-to-list (left) + prev/next patient stepper (right). */
.case .case-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.case .case-nav-steps { display: flex; align-items: center; gap: 8px; }
.case .case-nav-pos { font-family: var(--font-mono); font-size: 15px; color: var(--fg-3); min-width: 48px; text-align: center; }
.case .case-nav .btn[disabled] { opacity: 0.4; cursor: default; }
.case .case-header { display: flex; align-items: center; gap: 16px; }
.case .case-header h1 { font-size: 22px; font-weight: 600; margin: 0; }
.case .case-header .meta { font-family: var(--font-mono); font-size: 15px; color: var(--fg-3); }

/* Tab strip */
.case .tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 0; margin-bottom: 0;
}
.case .tab {
  padding: 10px 14px; font-size: 16px; font-weight: 500; font-family: var(--font-sans);
  background: transparent; color: var(--fg-3); border: none; cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.case .tab:hover { color: var(--fg-1); background: var(--bg-2); }
.case .tab.active {
  color: var(--accent-1);
  border-bottom-color: var(--accent-1);
  font-weight: 600;
}
.case .tab-body {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}
.case .tab-body > .pane { flex: 1; min-height: 0; }
.pane {
  background: var(--bg-1);
  /* Thicker, higher-contrast border so each module is unmistakably its own
     surface — customers asked for clearer module separation. */
  border: 2px solid var(--line-3);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  display: flex; flex-direction: column; min-height: 0;
}

/* ─── Collapsible card wrapper (each case section) ──────────────────────
   The wrapper sits OUTSIDE the .pane so the existing pane header (.ph)
   stays visible whether the section is open or closed. The chevron
   toggle is absolutely positioned in the top-right of the wrapper so
   it sits over the pane header's right side without disturbing chips.
*/
.pane-wrap {
  position: relative;
  /* Reserve right-side padding inside the pane header so the chevron
     button doesn't overlap the .right area's contents. */
}
.pane-wrap > .pane > .ph { padding-right: 48px; }  /* room for chevron */
.pane-wrap .pane-toggle {
  position: absolute; top: 8px; right: 10px; z-index: 2;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--bg-1); color: var(--fg-2);
  font-size: 15px; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.pane-wrap .pane-toggle:hover {
  background: var(--bg-3); border-color: var(--line-3); color: var(--fg-1);
}
/* Hide the pane body when wrapper is closed. .pb is the standard body
   container used by every pane in this app. We also collapse the section
   header's bottom border so the closed card reads as a single horizontal
   strip. */
.pane-wrap.pane-closed > .pane > .pb { display: none; }
.pane-wrap.pane-closed > .pane { box-shadow: none; }
.pane-wrap.pane-closed > .pane > .ph { border-bottom: none; }
.pane-wrap.pane-closed > .pane > .ph .right { opacity: 0.6; }
/* Subtle hover effect on the whole closed card to signal "click to open". */
.pane-wrap.pane-closed > .pane:hover { background: var(--bg-2); cursor: default; }
.pane .ph {
  padding: 12px 16px; border-bottom: 1px solid var(--line-1);
  display: flex; align-items: center; gap: 8px;
  /* Light grey header band so each section's title row visually separates
     from its content area. */
  background: var(--bg-3);
  border-top-left-radius: var(--r-md); border-top-right-radius: var(--r-md);
}
.pane .ph .title { font-size: 17px; font-weight: 600; }
.pane .ph .src-tag { font-size: 15px; font-family: var(--font-mono); padding: 2px 6px; border-radius: 999px; letter-spacing: 0.05em; }
.pane .ph .right { margin-left: auto; display: flex; gap: 6px; align-items:center; }
.pane .pb { padding: 14px 16px; overflow: auto; flex: 1; min-height: 0; }
.pane .ph svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* Summary pane */
.summary-grid { display: grid; grid-template-columns: 96px 1fr; gap: 8px 14px; font-size: 16px; align-items: baseline; }
/* Patient-details field labels — each row gets its own colour via a per-field
   class set in CaseWorkstation.jsx (e.g. dt.f-diagnosis). The base style sets
   the typography; the colour modifier sets the hue. */
.summary-grid dt { font-size: 15px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-3); font-weight: 700; }
.summary-grid dt.f-diagnosis   { color: var(--accent-1); }   /* primary blue */
.summary-grid dt.f-receptors   { color: var(--indigo-1); }   /* indigo */
.summary-grid dt.f-stage       { color: var(--crit); }       /* red — severity */
.summary-grid dt.f-grade       { color: var(--warn); }       /* amber — severity */
.summary-grid dt.f-biomarkers  { color: var(--teal-1); }     /* teal — molecular */
.summary-grid dt.f-priorlines  { color: var(--fg-3); }       /* grey — history */
.summary-grid dt.f-performance { color: var(--fg-3); }       /* grey */
.summary-grid dd { margin: 0; color: var(--fg-1); }
.summary-grid dd.mono { font-family: var(--font-mono); }

/* NCCN options */
.opts { display: flex; flex-direction: column; gap: 8px; }
.opt { background: var(--bg-2); border: 1px solid var(--line-1); border-radius: var(--r-md); padding: 12px; }
.opt .top { display: flex; align-items: baseline; gap: 8px; }
.opt .name { font-size: 17px; font-weight: 600; font-family: var(--font-mono); }
.opt .pref { font-size: 15px; padding: 1px 6px; border-radius: 999px; font-family: var(--font-mono); margin-left: auto; }
.opt .pref.preferred { background: var(--accent-soft); color: var(--accent-1); }
.opt .pref.other { background: var(--bg-3); color: var(--fg-2); }
.opt .pref.rec { background: var(--accent-soft); color: var(--accent-1); }
.opt .meta { font-size: 15px; color: var(--fg-2); margin-top: 4px; }
.opt .cite { display: inline-flex; gap: 4px; align-items:center; font-size: 15px; font-family: var(--font-mono); color: var(--accent-1); margin-top: 6px; padding: 2px 6px; background: var(--accent-soft); border-radius: 4px; cursor: pointer; }
.opt .cite.nccn { color: var(--indigo-1); background: var(--indigo-soft); }

/* Drug summary table (Drug Summary pane — NCCN + TumorSimilis consolidated).
   Styled as an obvious bordered grid (vertical + horizontal lines, dark header
   row, capped column widths) so it reads unmistakably as a table rather than
   a loose row layout. */
.drug-summary {
  width: 100%; border-collapse: collapse; font-size: 16px;
  border: 1px solid var(--line-3); border-radius: var(--r-md);
  overflow: hidden; table-layout: fixed;
}
.drug-summary thead th {
  text-align: left; font-size: 16px; text-transform: uppercase; letter-spacing: 0.08em;
  color: #FFFFFF; font-weight: 700; padding: 10px 12px;
  background: var(--table-head);
  border-right: 1px solid rgba(255,255,255,0.14);
}
.drug-summary thead th:last-child { border-right: none; }
.drug-summary tbody td {
  padding: 12px; vertical-align: middle;
  border-top: 1px solid var(--line-2);
  border-right: 1px solid var(--line-2);
}
.drug-summary tbody td:last-child { border-right: none; }
.drug-summary tbody tr:nth-child(even) td { background: var(--bg-2); }
.drug-summary tbody tr:hover td { background: var(--accent-soft); }

/* Column widths — drug + category get room; tier/score narrow; the four
   per-source tick columns share what's left. */
.drug-summary col.col-drug    { width: 22%; }
.drug-summary col.col-cat     { width: 15%; }
.drug-summary col.col-tier    { width: 11%; }
.drug-summary col.col-score   { width: 10%; }
.drug-summary col.col-src     { width: 10.5%; }
.drug-summary col.col-ref     { width: 13%; }
/* Unified recommendation table (matches Dr Sindhu's interim-results format):
   # | Drug | Category | Source | Response | Rationale | Reference. The
   rationale column absorbs most of the width so the clinical reasoning reads
   on one line where possible. */
/* Per-source recommendation group (#9): each source (TumorSimilis, NCCN,
   AICAN) is its own table with a heading. */
.rec-group { margin-bottom: 18px; }
.rec-group-head {
  font-size: 16px; font-weight: 700; color: var(--fg-1);
  padding: 6px 0 8px; letter-spacing: 0.01em;
}
.rec-group-head .rec-group-sub {
  font-size: 15px; font-weight: 500; color: var(--fg-3);
  text-transform: uppercase; letter-spacing: 0.06em; margin-left: 4px;
}
.combined-table col.col-drug      { width: 20%; }
.combined-table col.col-cat       { width: 14%; }
.combined-table col.col-src       { width: 10%; }
.combined-table col.col-trend     { width: 11%; }
.combined-table col.col-rationale { width: 26%; }
.combined-table col.col-ref       { width: 12%; }
.drug-summary .num-cell {
  text-align: center; color: var(--fg-3);
  font-family: var(--font-mono); font-size: 16px;
}
.drug-summary .rationale-cell {
  font-size: 16px; color: var(--fg-2); line-height: 1.45;
  white-space: normal; word-break: break-word;
}

.drug-summary .drug-name {
  font-family: var(--font-mono); font-weight: 600; color: var(--fg-1); font-size: 18px;
}
.drug-summary .pref {
  font-size: 15px; padding: 4px 11px; border-radius: 999px;
  font-family: var(--font-mono); display: inline-block; font-weight: 600;
}
.drug-summary .pref.preferred { background: var(--ok-soft);    color: var(--ok); }
.drug-summary .pref.other     { background: var(--bg-3);       color: var(--fg-2); }
.drug-summary .pref.rec       { background: var(--accent-soft); color: var(--accent-1); }
.drug-summary .ts-cell  { font-family: var(--font-mono); text-align: center; }
.drug-summary .ts-score { font-weight: 700; color: var(--fg-2); font-size: 17px; }
.drug-summary .ts-score.high { color: var(--ok); }
.drug-summary .ts-score.med  { color: var(--warn); }
.drug-summary .ts-score.low  { color: var(--fg-3); }
.drug-summary .sources-cell { font-size: 15px; color: var(--fg-2); font-family: var(--font-mono); }
.drug-summary .dash         { color: var(--fg-4); text-align: center; display: block; }
.drug-summary .cat-cell     {
  font-family: var(--font-mono); font-size: 15px; color: var(--fg-2);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
}

/* Colored CATEGORY badge — one hue per pharmacologic class so drug classes are
   scannable at a glance. Theme-adaptive: rgba tint background + mid-tone text
   that reads on both light and dark themes. Slugs mirror _CAT_SLUG in
   CaseWorkstation.jsx. */
.cat-pill {
  display: inline-block; font-family: var(--font-mono); font-size: 15px;
  font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  /* CATEGORY reads as a LABEL, not a rating: outlined rectangular "tag" so it's
     visually distinct from the solid rounded RESPONSE/CONSENSUS status pills —
     even when the hue happens to match. The colour here only distinguishes drug
     class; it carries no good/bad meaning. */
  padding: 2px 9px; border-radius: 5px; border: 1.5px solid currentColor;
  /* Combined classes ("TARGETED + HORMONAL") are long; wrap inside the cell at
     15px instead of overflowing into the next column (table is layout:fixed). */
  white-space: normal; line-height: 1.4; max-width: 100%; text-align: center;
  overflow-wrap: anywhere;
}
.cat-pill.cat-chemo    { background: rgba(37,99,235,.14);  color: #2563eb; }
.cat-pill.cat-hormonal { background: rgba(147,51,234,.14); color: #9333ea; }
.cat-pill.cat-mab      { background: rgba(13,148,136,.16); color: #0d9488; }
.cat-pill.cat-adc      { background: rgba(202,138,4,.16);  color: #ca8a04; }
.cat-pill.cat-tki      { background: rgba(234,88,12,.15);  color: #ea580c; }
.cat-pill.cat-targeted { background: rgba(180,83,9,.15);   color: #b45309; }
.cat-pill.cat-immuno   { background: rgba(22,163,74,.16);  color: #16a34a; }
.cat-pill.cat-parp     { background: rgba(219,39,119,.14); color: #db2777; }
.cat-pill.cat-cdk      { background: rgba(79,70,229,.15);  color: #4f46e5; }
.cat-pill.cat-btk      { background: rgba(217,119,6,.16);  color: #d97706; }
.cat-pill.cat-prot     { background: rgba(8,145,178,.15);  color: #0891b2; }
.cat-pill.cat-imid     { background: rgba(225,29,72,.14);  color: #e11d48; }
.cat-pill.cat-mtor     { background: rgba(101,163,13,.18); color: #65a30d; }
.cat-pill.cat-pi3k     { background: rgba(124,58,237,.15); color: #7c3aed; }
.cat-pill.cat-regimen  { background: rgba(71,85,105,.18);  color: #64748b; }
.cat-pill.cat-none     { background: var(--bg-3);          color: var(--fg-3); }
/* Dark theme: brighten the deeper hues so they don't muddy against bg-0. */
[data-theme="dark"] .cat-pill.cat-chemo    { color: #60a5fa; }
[data-theme="dark"] .cat-pill.cat-hormonal { color: #c084fc; }
[data-theme="dark"] .cat-pill.cat-mab      { color: #2dd4bf; }
[data-theme="dark"] .cat-pill.cat-adc      { color: #facc15; }
[data-theme="dark"] .cat-pill.cat-tki      { color: #fb923c; }
[data-theme="dark"] .cat-pill.cat-targeted { color: #fbbf77; }
[data-theme="dark"] .cat-pill.cat-immuno   { color: #4ade80; }
[data-theme="dark"] .cat-pill.cat-parp     { color: #f472b6; }
[data-theme="dark"] .cat-pill.cat-cdk      { color: #818cf8; }
[data-theme="dark"] .cat-pill.cat-btk      { color: #fbbf24; }
[data-theme="dark"] .cat-pill.cat-prot     { color: #22d3ee; }
[data-theme="dark"] .cat-pill.cat-imid     { color: #fb7185; }
[data-theme="dark"] .cat-pill.cat-mtor     { color: #a3e635; }
[data-theme="dark"] .cat-pill.cat-pi3k     { color: #a78bfa; }
[data-theme="dark"] .cat-pill.cat-regimen  { color: #94a3b8; }

/* ── Decision-support header (redesign): Patient Snapshot + Top Recommendation ── */
.snapshot { background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  padding: 14px 18px; margin-bottom: 12px; }
.snap-head { font-size: 15px; font-weight: 800; letter-spacing: 0.10em; color: var(--fg-3);
  text-transform: uppercase; margin-bottom: 10px; }
/* Cancer (with risk, narrower) · Prior · Biomarkers. Prior treatment and
   Biomarkers share equal width so every prior regimen chip can show. */
.snap-grid { display: grid; grid-template-columns: 1.1fr 2fr 2fr; gap: 20px; align-items: start; }
.snap-cell { min-width: 0; }
.snap-lbl { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--fg-3); margin-bottom: 4px; }
.snap-cancer { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.snap-stage { font-size: 15px; font-weight: 800; color: #fff; background: var(--accent-1);
  padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.snap-cancer-name { font-size: 19px; font-weight: 700; color: var(--fg-1); line-height: 1.2; }
.snap-cancer-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.snap-sub { font-size: 15px; color: var(--fg-3); }
.snap-risk { display: inline-block; font-size: 15px; font-weight: 800; padding: 2px 10px;
  border-radius: 999px; letter-spacing: 0.04em; white-space: nowrap; }
.snap-risk.risk-high { background: var(--crit-soft); color: var(--crit); }
.snap-risk.risk-med  { background: var(--warn-soft); color: var(--warn); }
.snap-risk.risk-low  { background: var(--ok-soft);   color: var(--ok); }
/* Prior treatment — condensed count + lead chips, clickable to open timeline. */
.snap-prior-btn { display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 0; cursor: pointer; font: inherit; }
.snap-prior-count { font-size: 18px; font-weight: 800; color: var(--fg-1); line-height: 1.1; }
.snap-prior-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.prior-chip { font-size: 15px; font-weight: 700; font-family: var(--font-mono);
  padding: 2px 9px; border-radius: 999px; background: var(--bg-3); color: var(--fg-2);
  border: 1px solid var(--line-2); white-space: nowrap; }
.snap-prior-btn:hover .prior-chip { border-color: var(--accent-line); }
/* Prior-treatment timeline modal */
.prior-timeline { list-style: none; margin: 4px 0 0; padding: 0; counter-reset: none; }
.prior-timeline-item { display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-top: 1px solid var(--line-2); }
.prior-timeline-item:first-child { border-top: none; }
.prior-timeline-num { flex: 0 0 24px; height: 24px; border-radius: 999px; background: var(--bg-3);
  color: var(--fg-2); font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.prior-timeline-name { flex: 1; font-size: 15px; color: var(--fg-1); }
.prior-timeline-last { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--accent-1); background: var(--accent-soft); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.snap-bios { display: flex; flex-wrap: wrap; gap: 6px; }
.bio-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600;
  font-family: var(--font-mono); padding: 3px 10px; border-radius: 999px;
  background: var(--bg-3); color: var(--fg-2); border: 1px solid var(--line-2); }
.bio-chip .bio-dot { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 8px; }
.bio-chip.bio-alt { background: var(--accent-soft); color: var(--accent-1); border-color: var(--accent-line); }
.bio-chip.bio-alt .bio-dot { background: var(--accent-1); }
.bio-chip.bio-wt  { color: var(--fg-3); }
.bio-chip.bio-wt .bio-dot { background: var(--fg-4); }
.snap-muted { color: var(--fg-3); font-size: 15px; }

.toprec { border: 2px solid var(--accent-1); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--bg-1) 60%);
  padding: 0; margin-bottom: 14px; overflow: hidden; }
.toprec-flag { background: var(--accent-1); color: #fff; font-size: 15px; font-weight: 800;
  letter-spacing: 0.10em; text-transform: uppercase; padding: 5px 16px; }
/* Compact single-block layout — drug, then confidence/why/evidence stacked
   directly beneath it; the prose rationale is clamped so the card stays short. */
.toprec-body2 { padding: 12px 18px 14px; }
.toprec-drug { font-size: 22px; font-weight: 800; color: var(--accent-1); line-height: 1.2; }
.toprec-metrics { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.trc-pill { font-size: 15px; font-weight: 800; padding: 3px 11px; border-radius: 999px; letter-spacing: 0.02em; }
.trc-pill.conf-high { background: var(--ok-soft);   color: var(--ok); }
.trc-pill.conf-med  { background: var(--warn-soft); color: var(--warn); }
.trc-pill.conf-low  { background: var(--crit-soft); color: var(--crit); }
.trc-pill.trc-bio { background: var(--bg-3); color: var(--fg-2); border: 1px solid var(--line-2); font-weight: 700;
  font-family: var(--font-mono); }
.toprec-why { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.toprec-evi-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.toprec-why-lbl { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--fg-3); }
.why-factor { font-size: 15px; font-weight: 700; color: var(--ok); white-space: nowrap; }
.toprec-evi-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.evi-chip { font-size: 15px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  background: var(--bg-3); color: var(--fg-2); border: 1px solid var(--line-2); }
/* Full agent rationale — secondary, clamped to two lines so it never dominates
   the card. The complete text remains in the AICAN AI section below. */
.toprec-text2 { font-size: 16px; color: var(--fg-2); line-height: 1.5; margin-top: 10px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 760px) {
  .snap-grid { grid-template-columns: 1fr; }
}

.drug-summary .src-cell     { text-align: center; }
/* Origin tag (#9): 'AI' (accent) vs 'Report' (neutral) under the Source name
   so the doctor sees where each recommendation came from at a glance. */
.drug-summary .origin-tag {
  display: block; margin-top: 3px; font-size: 15px; font-weight: 700;
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em;
  padding: 1px 6px; border-radius: 999px;
}
.drug-summary .origin-tag.ai     { background: var(--accent-soft); color: var(--accent-1); }
.drug-summary .origin-tag.report { background: var(--bg-3);        color: var(--fg-2); }
/* A drug backed by both report + AI shows both origin tags stacked. */
.drug-summary .src-origins { display: inline-flex; flex-direction: column; gap: 4px; align-items: center; }
.drug-summary .src-origins .origin-tag { margin-top: 0; }
/* When report and AI disagree on a drug, each verdict shows with its source
   label so the conflict is explicit rather than hidden behind one badge. */
.drug-summary .resp-multi { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.drug-summary .resp-line  { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.drug-summary .resp-src-lbl {
  font-size: 15px; font-weight: 700; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-3);
}
.drug-summary .rationale-multi { display: flex; flex-direction: column; gap: 6px; }
.drug-summary .rationale-multi .resp-src-lbl { margin-right: 4px; }
.drug-summary .ref-cell     { text-align: center; font-family: var(--font-mono); }
.drug-summary .pubmed-link  {
  display: inline-block; font-size: 15px; font-weight: 600;
  color: var(--accent-1); text-decoration: none; white-space: nowrap;
  padding: 3px 9px; border-radius: 999px; background: var(--accent-soft);
}
.drug-summary .pubmed-link:hover { text-decoration: underline; }
/* "for <drug>" caption under a combo's PubMed link — flags that the citation
   only covers one component of the regimen, not the whole combination. */
.drug-summary .ref-wrap     { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.ref-matched  {
  font-size: 15px; font-weight: 600; color: var(--fg-3);
  font-style: italic; white-space: nowrap; cursor: help;
}

/* Bundled-guideline reference, shown beneath the PubMed link. Distinct indigo
   tone (vs the blue PubMed pill) so the two reference types read as separate
   at a glance. Collapsed to a one-line "Guideline · p.N"; click reveals the
   snippet detail. */
.drug-summary .guideline-ref { margin-top: 5px; }
.drug-summary .guideline-ref-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: inherit; font-size: 15px; font-weight: 600;
  color: var(--indigo-1); background: var(--indigo-soft);
  border: none; border-radius: 999px; padding: 3px 9px; cursor: pointer;
  white-space: nowrap;
}
.drug-summary .guideline-ref-btn:hover { text-decoration: underline; }
.drug-summary .guideline-ref-btn .gl-doc  { font-size: 15px; opacity: .8; }
.drug-summary .guideline-ref-btn .gl-chev { font-size: 15px; opacity: .7; }
.drug-summary .guideline-ref-detail {
  margin-top: 5px; max-width: 280px; text-align: left;
  font-family: var(--font-sans, inherit); line-height: 1.45;
}
.drug-summary .guideline-ref-detail .gl-where {
  display: block; font-size: 15px; font-weight: 700; color: var(--indigo-1);
}
.drug-summary .guideline-ref-detail .gl-snip {
  display: block; font-size: 15px; font-style: italic; color: var(--fg-2, #4a5568);
  margin-top: 2px;
}

/* Principles-of-Systemic-Therapy evidence — the guideline's cited trials for a
   drug, each linking to PubMed. Green tone keeps it separate from the blue
   PubMed pill and indigo guideline-page ref. Collapsed by default. */
.drug-summary .pst-ref { margin-top: 5px; }
.drug-summary .pst-ref-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: inherit; font-size: 15px; font-weight: 600;
  color: #16a34a; background: rgba(22,163,74,.14);
  border: none; border-radius: 999px; padding: 3px 9px; cursor: pointer;
  white-space: nowrap;
}
.drug-summary .pst-ref-btn:hover { text-decoration: underline; }
.drug-summary .pst-ref-btn .pst-doc  { font-size: 15px; opacity: .8; }
.drug-summary .pst-ref-btn .pst-chev { font-size: 15px; opacity: .7; }
.drug-summary .pst-ref-list {
  margin: 6px 0 0; padding: 0 0 0 18px; max-width: 320px; text-align: left;
  font-family: var(--font-sans, inherit);
}
.drug-summary .pst-ref-item {
  font-size: 15px; line-height: 1.45; color: var(--fg-2, #4a5568); margin-bottom: 6px;
}
.drug-summary .pst-ref-item .pst-cite { display: block; }
.drug-summary .pst-ref-item .pst-pm {
  display: inline-block; margin-top: 2px; font-size: 15px;
  padding: 1px 7px; background: var(--accent-soft);
}

/* "PubMed (N)" button for a regimen backed by multiple evidence sources —
   styled identically to the .pubmed-link pill but clickable to open the
   reference modal (combination trial + each component drug). */
.drug-summary .pubmed-count {
  border: none; cursor: pointer; font-family: inherit;
}
.drug-summary .pubmed-count:hover { background: var(--accent-1); color: #fff; text-decoration: none; }

/* Reference modal — lists every supporting study for a combination regimen and
   exactly which drug / combination each one supports. */
.ref-modal-list { list-style: none; margin: 4px 0 0; padding: 0; }
.ref-modal-item { padding: 10px 0; border-top: 1px solid var(--line-2); }
.ref-modal-item:first-child { border-top: none; }
.ref-modal-meta { font-size: 15px; color: var(--fg-3); margin-top: 2px; font-family: var(--font-mono); }
.ref-modal-supports { font-size: 15px; color: var(--fg-2); margin-top: 4px; display: flex; align-items: center; gap: 8px; }
.ref-type-tag {
  font-size: 15px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 1px 7px; border-radius: 999px;
}
.ref-type-tag.combo { background: var(--accent-soft); color: var(--accent-1); }
.ref-type-tag.drug  { background: var(--bg-3); color: var(--fg-2); }

/* ── Unified recommendation response badge (window.RecClass) ───────────────────
   One standardized 5-level scale across every source so the doctor can compare
   AI / PubMed / NCCN / TumorSimilis rows directly. Hover shows the original
   source label. Colours run strongest (solid green) → weakest (red). */
.std-resp {
  display: inline-block; font-family: var(--font-mono); font-size: 15px;
  font-weight: 700; letter-spacing: 0.03em; white-space: nowrap;
  padding: 4px 11px; border-radius: 999px; cursor: help; line-height: 1.5;
}
.std-resp.sr  { background: var(--ok);        color: #fff; }            /* STRONGLY RECOMMENDED */
.std-resp.rec { background: var(--ok-soft);   color: var(--ok); }       /* RECOMMENDED */
.std-resp.con { background: var(--warn-soft); color: var(--warn); }     /* CONSIDER */
.std-resp.lim { background: var(--bg-3);      color: var(--fg-2); }     /* LIMITED SUPPORT */
.std-resp.no  { background: var(--crit-soft); color: var(--crit); }     /* NOT RECOMMENDED */

/* ── Consensus — Top Recommendations table (cross-source ranking) ─────────────*/
.cons-group { margin-bottom: 18px; }
.cons-group .rec-group-head { color: var(--accent-1); }
.cons-table .cons-top { background: var(--accent-soft); }
.cons-table .cons-row td { vertical-align: middle; }
/* Column widths: a narrow # (was eating ~9%), the freed space goes to Drug. */
.cons-table col.cc-num  { width: 4%; }
.cons-table col.cc-drug { width: 30%; }
.cons-table col.cc-cat  { width: 13%; }
.cons-table col.cc-resp { width: 16%; }
.cons-table col.cc-ev   { width: 15%; }
.cons-table col.cc-cons { width: 16%; }
.cons-table col.cc-why  { width: 10%; }
.cons-table .num-cell { text-align: center; padding-left: 6px; padding-right: 6px; }
.evidence-cell { min-width: 130px; }
.evidence-wrap { display: flex; align-items: center; gap: 8px; cursor: help; }
.evidence-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--bg-3); overflow: hidden; min-width: 70px; }
.evidence-fill { height: 100%; border-radius: 999px; background: var(--accent-1); transition: width .3s; }
.evidence-fill.ev-strong   { background: var(--ok); }
.evidence-fill.ev-moderate { background: var(--accent-1); }
.evidence-fill.ev-single   { background: var(--warn); }
.evidence-fill.ev-conflict { background: var(--crit); }
.evidence-num { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--fg-2); min-width: 26px; text-align: right; }
.consensus-pill { display: inline-block; font-family: var(--font-mono); font-size: 15px; font-weight: 700;
  padding: 4px 11px; border-radius: 999px; white-space: nowrap; cursor: help; letter-spacing: .03em; }
.consensus-pill.strong   { background: var(--ok-soft);     color: var(--ok); }
.consensus-pill.moderate { background: var(--accent-soft); color: var(--accent-1); }
.consensus-pill.single   { background: var(--bg-3);        color: var(--fg-2); }
.consensus-pill.conflict { background: var(--crit-soft);   color: var(--crit); }
.why-toggle { background: transparent; border: 1px solid var(--line-1); border-radius: 6px; cursor: pointer;
  font-size: 15px; font-weight: 600; color: var(--accent-1); padding: 4px 11px; }
.why-toggle:hover { background: var(--accent-soft); }

/* ── Linked clinical report (link picker + linked chip) ───────────────────── */
.linked-chip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
  padding: 7px 12px; border-radius: var(--r-md); background: var(--ok-soft); border: 1px solid var(--ok); }
.linked-chip .lc-ok   { font-weight: 700; color: var(--ok); font-size: 15px; }
.linked-chip .lc-pid  { font-family: var(--font-mono); font-weight: 600; color: var(--fg-1); font-size: 15px; }
.linked-chip .lc-fields { font-size: 15px; color: var(--fg-3); font-family: var(--font-mono); }
.linked-chip .lc-unlink { margin-left: auto; background: transparent; border: 1px solid var(--ok);
  color: var(--ok); border-radius: 6px; padding: 2px 10px; font-size: 15px; font-weight: 600; cursor: pointer; }
.linked-chip .lc-unlink:hover:not(:disabled) { background: var(--ok); color: #fff; }
.link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.link-row { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--bg-1); border: 1px solid var(--line-1); border-radius: 8px; padding: 10px 12px; cursor: pointer; }
.link-row:hover { border-color: var(--accent-1); background: var(--accent-soft); }
.link-row .link-pid { font-family: var(--font-mono); font-weight: 700; color: var(--fg-1); }
.link-row .link-dx  { flex: 1; color: var(--fg-2); font-size: 15px; }
.link-row .link-rt  { font-size: 15px; font-weight: 700; padding: 2px 9px; border-radius: 999px; font-family: var(--font-mono); }
.link-row .link-rt.clin { background: var(--indigo-soft); color: var(--indigo-1); }
.link-row .link-rt.ts   { background: var(--teal-soft);   color: var(--teal-1); }
.why-row td { background: var(--bg-1); padding: 6px 12px 10px; }
.why-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.why-list li { font-size: 15px; color: var(--fg-2); display: flex; gap: 8px; align-items: baseline; }
.why-list .why-mark { font-weight: 800; }
.why-list .why-ok .why-mark { color: var(--ok); }
.why-list .why-no .why-mark { color: var(--crit); }
.why-list .why-src { color: var(--fg-3); font-family: var(--font-mono); font-size: 15px; }
/* Evidence-score breakdown inside the Why panel — explains how the number is built. */
.why-evidence { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line-2); }
.why-evidence-head { font-size: 15px; font-weight: 700; color: var(--fg-2); margin-bottom: 5px; }
.why-ev-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.why-ev-list li { font-size: 15px; color: var(--fg-2); display: flex; gap: 8px; align-items: baseline; }
.why-ev-list .ev-pts { font-family: var(--font-mono); font-weight: 800; min-width: 34px; text-align: right; }
.why-ev-list .ev-pos .ev-pts { color: var(--ok); }
.why-ev-list .ev-neg .ev-pts { color: var(--crit); }
.why-evidence-note { font-size: 15px; color: var(--fg-3); font-style: italic; margin-top: 6px; }

/* ── Recommendation legend (collapsible colour/label key) ──────────────────── */
.rec-legend { margin-top: 14px; border-top: 1px solid var(--line-1); padding-top: 10px; }
.rec-legend-toggle {
  background: transparent; border: none; cursor: pointer; font-size: 16px; font-weight: 600;
  color: var(--accent-1); padding: 4px 0; display: inline-flex; align-items: center; gap: 6px;
}
.rec-legend-toggle:hover { text-decoration: underline; }
.rec-legend-toggle .rl-caret { font-size: 15px; }
.rec-legend-body {
  display: flex; flex-wrap: wrap; gap: 22px 28px; margin-top: 12px;
  background: var(--bg-1); border: 1px solid var(--line-1);
  border-radius: var(--r-md); padding: 16px 18px;
}
.legend-group { min-width: 300px; flex: 1; }
.legend-group.legend-cats { flex-basis: 100%; }
.legend-head {
  font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fg-3); margin-bottom: 10px;
}
.legend-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.legend-row .std-resp, .legend-row .consensus-pill { flex-shrink: 0; }
.legend-desc { font-size: 15px; color: var(--fg-2); line-height: 1.4; }
.legend-evi { margin-top: 4px; }
.legend-cat-note { font-size: 15px; color: var(--fg-3); font-style: italic; margin: -4px 0 10px; }
.legend-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 8px 20px; }
.legend-cat-row { display: flex; align-items: center; gap: 10px; }
.legend-cat-row .cat-pill { flex-shrink: 0; min-width: 96px; text-align: center; }

/* ── Biomarker-matched candidates banner ──────────────────────────────────── */
.biomarker-banner { background: rgba(124,58,237,0.08); border: 1px solid rgba(124,58,237,0.28);
  border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; }
.biomarker-banner .bm-head { font-weight: 700; color: #7c3aed; font-size: 15px; margin-bottom: 6px; }
.biomarker-banner .bm-sub { font-weight: 500; color: var(--fg-3); font-size: 15px; }
.biomarker-banner .bm-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.biomarker-banner .bm-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; }
.biomarker-banner .bm-alt { font-weight: 600; color: var(--fg-1); }
.biomarker-banner .bm-arrow { color: #7c3aed; font-weight: 700; }
.biomarker-banner .bm-drugs { font-family: var(--font-mono); font-weight: 600; color: #6d28d9; }
.biomarker-banner .bm-src { margin-left: 6px; font-size: 15px; font-family: var(--font-mono);
  color: var(--fg-3); background: var(--bg-2); padding: 1px 8px; border-radius: 999px; cursor: help; }

/* ── Treatment timeline (#8) — FLOW-CHART: boxed nodes + arrows, wraps ─────── */
.tx-flow {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 2px;
}
.tx-flow .tx-step { display: inline-flex; align-items: center; gap: 4px; }
.tx-node {
  display: inline-flex; align-items: center;
  padding: 8px 14px; border-radius: 8px;
  border: 1.5px solid var(--line-2);
  border-left: 4px solid var(--accent-1);   /* flow-chart node accent bar */
  background: var(--bg-1); box-shadow: 0 1px 3px rgba(15,23,42,0.06);
  font-size: 15px; font-weight: 600; color: var(--fg-1); white-space: nowrap;
  transition: box-shadow .15s ease, transform .15s ease;
}
.tx-node:hover { box-shadow: 0 3px 9px rgba(15,23,42,0.11); transform: translateY(-1px); }
/* Line-of-therapy tag (1L / 2L / 3L …) inside each node. */
.tx-line {
  font-family: var(--font-mono); font-size: 15px; font-weight: 700; line-height: 1;
  color: var(--accent-1); background: var(--accent-soft);
  padding: 2px 6px; border-radius: 4px; margin-right: 9px; flex-shrink: 0; cursor: help;
}
.tx-arrow { color: var(--accent-1); font-size: 19px; font-weight: 700; margin: 0 3px; opacity: .7; }
.tx-current .tx-node {
  border-color: var(--ok); border-left-color: var(--ok);
  background: var(--ok-soft); color: var(--ok);
}

/* Observed worked / did-not-work outcome badge (Item #3) — green = the drug
   worked on this tumour, red = it did not. Used in the TumorSimilis pane and
   the combined recommendation table. Distinct from the high/low PREDICTION
   pills (.trend-pill). Not scoped to .drug-summary so it also styles the
   badge shown inline in the .ts-row drug label. */
.outcome {
  display: inline-block; font-size: 15px; font-weight: 700;
  font-family: var(--font-mono); padding: 2px 9px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap;
}
.outcome.worked { background: var(--ok-soft);   color: var(--ok); }
.outcome.failed { background: var(--crit-soft); color: var(--crit); }
/* Stacks the worked/did-not-work badge above the high/med/low pill in the
   Response column so both signals (#3) are visible per drug. */
.resp-stack { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
/* Combination-dependency tag (#3) under a drug's row in the TumorSimilis pane:
   "works only in combination (with X)" / "no response alone or in combination". */
.combo-tag { font-size: 15px; font-weight: 600; margin-top: 2px; font-family: var(--font-mono); }
.combo-tag.combo { color: var(--ok); }
.combo-tag.none  { color: var(--fg-3); }
/* Base PubMed link (used outside the drug-summary table, e.g. NCCN option
   cards). The .drug-summary .pubmed-link rule adds the pill background inside
   tables and overrides this via higher specificity. */
.pubmed-link { font-size: 15px; font-weight: 600; color: var(--accent-1); text-decoration: none; white-space: nowrap; }
.pubmed-link:hover { text-decoration: underline; }
.drug-summary .src-yes      {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--ok-soft); color: var(--ok);
  font-weight: 700; font-size: 16px;
}

/* Per-source mini-tables. Each source has its own block with a color-coded
   header strip so they're visually distinct as you scan down the column. */
.drug-summary-pane .src-note {
  font-size: 16px; color: var(--fg-3); margin: 0 0 14px;
}
.drug-summary-pane .src-block {
  margin-bottom: 16px; border: 1.5px solid var(--line-3);
  border-radius: var(--r-md); overflow: hidden;
}
.drug-summary-pane .src-block:last-child { margin-bottom: 0; }
.drug-summary-pane .src-block-head {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; color: #fff;
  border-bottom: 1px solid var(--line-2);
}
.drug-summary-pane .src-block-head .btn {
  background: rgba(255,255,255,0.15);
}
.drug-summary-pane .src-block-head .btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.28);
}
.drug-summary-pane .src-block-head.src-nccn   { background: var(--indigo-1); }
.drug-summary-pane .src-block-head.src-ts     { background: var(--teal-1); }
/* Predicted TS — striped to visually distinguish from a real assay */
.drug-summary-pane .src-block-head.src-ts-ai  {
  background: repeating-linear-gradient(
    45deg, var(--teal-1), var(--teal-1) 10px,
    #0d8a85 10px, #0d8a85 20px
  );
}
.drug-summary-pane .src-block-head.src-aican  { background: var(--accent-1); }
.drug-summary-pane .src-block-head.src-nccnai { background: var(--accent-3); }
.drug-summary-pane .src-block-title {
  font-size: 16px; font-weight: 700; letter-spacing: 0.02em;
}
.drug-summary-pane .src-block-sub {
  font-size: 15px; opacity: 0.9; font-family: var(--font-mono);
}
.drug-summary-pane .src-table { border: none; border-radius: 0; }
.drug-summary-pane .src-table thead th { background: var(--bg-3); color: var(--fg-1); }
.drug-summary-pane .src-empty {
  padding: 14px; color: var(--fg-3); font-size: 15px; font-style: italic;
  background: var(--bg-2);
}
.drug-summary .col-trend { width: 18%; }
.drug-summary .trend-pill {
  font-size: 15px; padding: 3px 10px; border-radius: 999px;
  font-family: var(--font-mono); display: inline-block; font-weight: 700;
  letter-spacing: 0.06em;
}
.drug-summary .trend-pill.high { background: var(--ok-soft);  color: var(--ok); }
.drug-summary .trend-pill.med  { background: var(--warn-soft); color: var(--warn); }
.drug-summary .trend-pill.low  { background: var(--bg-3);     color: var(--fg-3); }

/* TS bar */
/* Content (drug name + note) takes ~50% so long notes stop wrapping into a
   tall sliver; the score bar + value share the other ~50% instead of the bar
   stretching across the whole row and leaving a large empty gap. */
.ts-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 60px; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-1); }
.ts-row:last-child { border-bottom: none; }
.ts-row .drug { font-family: var(--font-mono); font-size: 16px; font-weight: 500; }
.ts-row .bar { height: 6px; background: var(--bg-3); border-radius: 999px; overflow: hidden; }
.ts-row .bar i { display: block; height: 100%; background: var(--accent-1); }
.ts-row .bar.warn i { background: var(--warn); }
.ts-row .bar.low i { background: var(--fg-3); }
.ts-row .score { font-family: var(--font-mono); font-size: 15px; text-align: right; color: var(--fg-1); }
.ts-row .meta-line { font-size: 15px; color: var(--fg-3); font-family: var(--font-mono); margin-top: 2px; }

/* Query pane */
.query { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.qmsgs { flex: 1; overflow: auto; padding: 4px 4px 12px; display: flex; flex-direction: column; gap: 12px; }
.qmsg { font-size: 16px; line-height: 1.55; }
.qmsg.user { color: var(--fg-2); padding-left: 12px; border-left: 2px solid var(--line-2); }
.qmsg.ai { color: var(--fg-1); }
.qmsg .who { font-size: 15px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-3); font-weight: 600; margin-bottom: 4px; }
.qmsg .cites { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.qmsg .cites span { font-family: var(--font-mono); font-size: 15px; padding: 2px 6px; border-radius: 4px; cursor: pointer; }
.qmsg .cites span.nccn { background: var(--indigo-soft); color: var(--indigo-1); }
.qmsg .cites span.ts { background: var(--accent-soft); color: var(--accent-1); }
.qmsg .cites span.rep { background: var(--bg-3); color: var(--fg-2); }
.qcompose { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line-1); }
.qcompose input { flex: 1; }

/* ─── AICAN chat — visually distinct question vs answer ──────────────────
   Requirements:
     - Both rows left-justified (so the conversation reads top-down)
     - Questions: monospace serif-style face, italic, indigo color
     - Answers: standard sans, near-black ink — the canonical content voice
     - Critical terms (bold / inline code in answers) highlighted in accent
*/
.qbubble-row.user .qbubble {
  font-family: var(--font-mono) !important;
  font-style: italic !important;
  color: var(--indigo-1) !important;
  background: var(--indigo-soft) !important;
  border: 1.5px solid var(--indigo-1) !important;
}
.qbubble-row.user .qbubble > div:first-child {
  font-family: var(--font-mono) !important;
  color: var(--indigo-1) !important;
}
.qbubble-row.ai .qbubble {
  font-family: var(--font-sans) !important;
  background: var(--bg-1) !important;
  border: 1.5px solid var(--line-3) !important;
  color: var(--fg-1) !important;
}
/* Critical-term highlight in answers — anything the LLM bolded or
   monospaced gets a soft accent pill so drug names / values / biomarkers
   pop visually. */
.qbubble-row.ai .qbubble strong,
.qbubble-row.ai .qbubble b {
  color: var(--crit);
  background: var(--crit-soft);
  padding: 1px 6px; border-radius: var(--r-xs);
  font-weight: 700;
}
.qbubble-row.ai .qbubble code {
  background: var(--accent-soft);
  color: var(--accent-3);
  padding: 1px 6px; border-radius: var(--r-xs);
  font-family: var(--font-mono);
}
.qbubble-row.ai .qbubble em {
  color: var(--teal-1);
  font-style: italic;
}
.disclaimer { font-size: 15px; color: var(--fg-3); font-family: var(--font-mono); padding: 4px 0 0; }

/* Upload modal */
.modal-scrim { position: fixed; inset: 0; background: rgba(14,31,51,0.42); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 24px; overflow-y: auto; }
.modal { background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--r-lg); width: 480px; max-width: 100%; max-height: calc(100vh - 48px); overflow-y: auto; padding: 24px; box-shadow: var(--sh-3); }
.modal h2 { margin: 0 0 4px; font-size: 20px; font-weight: 600; }
.modal p { font-size: 16px; color: var(--fg-2); margin: 0 0 18px; }
.drop { border: 1px dashed var(--line-3); border-radius: var(--r-md); padding: 28px; text-align: center; cursor: pointer; }
.drop:hover { border-color: var(--accent-1); background: var(--accent-soft); }
.drop svg { width: 28px; height: 28px; stroke: var(--fg-3); fill: none; stroke-width: 1.5; margin-bottom: 8px; }
.drop .hint { font-size: 15px; color: var(--fg-3); margin-top: 6px; font-family: var(--font-mono); }
.modal .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }

.parse-status { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r-md); font-size: 15px; color: var(--accent-1); font-family: var(--font-mono); }
.parse-status .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent-1); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ============================================================================
   PATIENT DE-IDENTIFICATION — pseudonym + PIN reveal
============================================================================ */
/* Per-row "Name hidden" affordance under the VRRX pseudonym. Muted by default,
   nudges toward accent on hover so it reads as a clickable reveal control. */
.reveal-name {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 2px; padding: 1px 0;
  background: none; border: none; cursor: pointer;
  font-size: 15px; color: var(--fg-3); font-family: var(--font-sans);
}
.reveal-name:hover { color: var(--accent-1); }
.reveal-name svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.75; }
/* Header Show/Hide-names toggle picks up an accent fill once names are shown. */
.reveal-toggle.on { background: var(--accent-soft); color: var(--accent-1); border-color: var(--accent-line); }
.reveal-toggle.on:hover { background: var(--accent-soft); }
/* PIN entry field — centered, spaced digits, masked. Self-contained so it
   doesn't depend on the (undefined) .ti class the other modals use. */
.pin-input {
  width: 100%; height: 48px; box-sizing: border-box;
  padding: 0 12px; text-align: center;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-md);
  color: var(--fg-1); font-family: var(--font-mono);
  font-size: 28px; font-weight: 700; letter-spacing: 0.5em; text-indent: 0.5em;
  outline: none;
}
.pin-input:focus { border-color: var(--accent-1); box-shadow: 0 0 0 3px rgba(31,111,235,0.22); }

/* ============================================================================
   WELCOME SPLASH — animated intro before login
============================================================================ */
@keyframes splash-pulse  { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .6; transform: scale(1.05); } }
@keyframes splash-spin   { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes splash-spin-r { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes splash-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes dot-spin      { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.splash {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 30%, #0c4a6e 60%, #164e63 100%);
  color: #fff; overflow: hidden;
  transition: opacity .5s ease;
}
.splash.phase-fade { opacity: 0; pointer-events: none; }

.splash-bg { position: absolute; inset: 0; pointer-events: none; }
.splash-bg .bubble { position: absolute; border-radius: 999px; animation: splash-pulse 4s ease-in-out infinite; }
.splash-bg .b1 { top: -80px; left: -80px; width: 384px; height: 384px; background: rgba(34,211,238,0.05); }
.splash-bg .b2 { top: 25%; right: 40px; width: 288px; height: 288px; background: rgba(59,130,246,0.05); animation-duration: 3s; animation-delay: .5s; }
.splash-bg .b3 { bottom: 40px; left: 25%; width: 320px; height: 320px; background: rgba(45,212,191,0.05); animation-duration: 3.5s; animation-delay: 1s; }

.splash-floats { position: absolute; inset: 0; pointer-events: none; color: rgba(255,255,255,0.05); }
.splash-floats .float { position: absolute; animation: splash-bounce 3s ease-in-out infinite; }
.splash-floats .f1 { top: 15%; left: 10%; }
.splash-floats .f2 { top: 20%; right: 15%; animation-duration: 2.5s; animation-delay: .3s; }
.splash-floats .f3 { bottom: 25%; left: 20%; animation-duration: 3.2s; animation-delay: .6s; }
.splash-floats .f4 { bottom: 20%; right: 10%; animation-duration: 2.8s; animation-delay: .9s; }

.splash-content { position: relative; z-index: 1; text-align: center; padding: 0 32px; }

.splash-logo-wrap { transition: transform .7s ease-out; }
.splash.phase-logo .splash-logo-wrap { transform: scale(1.1); }

.splash-logo { position: relative; width: 112px; height: 112px; margin: 0 auto 24px; }
.splash-logo .ring { position: absolute; border-radius: 24px; }
.splash-logo .r1 { inset: 0; border: 2px solid rgba(34,211,238,0.20); animation: splash-spin 8s linear infinite; }
.splash-logo .r2 { inset: 8px; border: 1px solid rgba(34,211,238,0.15); animation: splash-spin-r 6s linear infinite; }
.splash-logo .logo-inner {
  position: absolute; inset: 16px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(34,211,238,0.20), rgba(37,99,235,0.20));
  backdrop-filter: blur(14px);
  border: 1px solid rgba(34,211,238,0.30);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  color: rgb(103,232,249);
}
.splash-logo .logo-glow { position: absolute; inset: 0; border-radius: 24px; background: rgba(34,211,238,0.10); filter: blur(16px); }

.splash-title { font-size: 48px; font-weight: 800; letter-spacing: -0.02em; margin: 0; color: #fff; text-shadow: 0 4px 12px rgba(0,0,0,0.4); }
.splash-title .cyan { color: #22d3ee; }
.splash-subtitle { color: rgba(189,237,255,0.7); font-size: 15px; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; margin: 8px 0 0; }
.splash-by { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; }
.splash-by .line { width: 32px; height: 1px; background: rgba(34,211,238,0.30); }
.splash-by .by-text { color: rgba(255,255,255,0.30); font-size: 15px; font-weight: 700; letter-spacing: 0.4em; text-transform: uppercase; }

.splash-features {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  max-width: 540px; margin: 32px auto 0;
  transition: opacity .7s ease, transform .7s ease;
}
.splash.phase-logo .splash-features { opacity: 0; transform: translateY(20px); }
.splash-features .feature-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(255,255,255,0.05); backdrop-filter: blur(4px);
  border: 1px solid rgba(34,211,238,0.15);
  color: rgba(207,250,254,0.80); font-size: 15px; font-weight: 600;
  transition: opacity .5s ease, transform .5s ease;
}
.splash.phase-logo .splash-features .feature-tag { opacity: 0; transform: scale(0.8); }

.splash-loader {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 28px;
  color: rgba(103,232,249,0.40); font-size: 15px; font-weight: 500;
  transition: opacity .5s ease;
}
.splash.phase-logo .splash-loader { opacity: 0; }
.dot-spinner { display: inline-block; width: 16px; height: 16px; border-radius: 999px; border: 2px solid rgba(34,211,238,0.30); border-top-color: rgba(34,211,238,0.80); animation: dot-spin 1s linear infinite; }
.dot-spinner.small { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.40); border-top-color: #fff; }

/* ============================================================================
   LOGIN — 2-panel, light medical palette + soft card
============================================================================ */
.login {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: row;
  background: var(--bg-0); color: var(--fg-1); overflow: hidden;
}
@media (max-width: 800px) { .login { flex-direction: column; } }
.login-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 20% 30%, rgba(31,111,235,0.08), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(14,165,160,0.06), transparent 45%);
}

/* LEFT */
.login-left {
  position: relative; z-index: 1;
  width: 45%; display: flex; flex-direction: column;
  justify-content: center; align-items: center; padding: 32px;
}
@media (max-width: 800px) { .login-left { width: 100%; padding: 24px; } }
.login-brand { font-size: 96px; font-weight: 900; letter-spacing: 0.04em; margin: 0 0 12px; line-height: 1; }
.login-tagline { color: var(--fg-3); font-size: 15px; letter-spacing: 0.3em; text-align: center; margin: 0 0 40px; }
.login-ribbon { width: 384px; max-width: 80%; margin-bottom: 24px; }
.login-ribbon img { width: 100%; height: auto; display: block; }
.login-hint { color: var(--fg-3); font-size: 15px; text-align: center; max-width: 320px; line-height: 1.55; margin: 0; }

/* RIGHT */
.login-right { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; position: relative; z-index: 1; }
.login-card {
  width: 100%; max-width: 440px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-3);
  border-radius: 24px; padding: 32px;
  color: var(--fg-1);
}

.mode-toggle { display: flex; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; margin-bottom: 24px; background: var(--bg-2); }
.mode-toggle button {
  flex: 1; padding: 10px 12px; font-size: 15px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: transparent; color: var(--fg-3); border: none; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.mode-toggle button.active { background: var(--accent-1); color: var(--fg-on-accent); }

.login-card-title { margin: 0 0 4px; font-size: 22px; font-weight: 600; color: var(--fg-1); }
.login-card-sub   { margin: 0 0 20px; font-size: 15px; color: var(--fg-2); }

.login-error {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 12px;
  background: var(--crit-soft); border: 1px solid rgba(194,54,47,0.25);
  color: var(--crit); font-size: 15px; margin-bottom: 14px;
}

.login-form { display: flex; flex-direction: column; gap: 12px; }
.login-input {
  width: 100%; padding: 14px 16px; border-radius: 12px;
  background: var(--bg-2); border: 1px solid var(--line-2);
  color: var(--fg-1); font-size: 15px; font-family: var(--font-sans);
  outline: none; transition: border-color .2s ease, box-shadow .2s ease;
}
.login-input::placeholder { color: var(--fg-3); }
.login-input:focus { border-color: var(--accent-1); box-shadow: var(--sh-focus); }
.pw-toggle {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  background: transparent; border: none; cursor: pointer; color: var(--fg-3);
}

.login-submit {
  width: 100%; padding: 14px; border-radius: 12px; border: none;
  font-size: 15px; font-weight: 600; color: var(--fg-on-accent);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent-1);
  box-shadow: 0 4px 18px rgba(31,111,235,0.20);
  cursor: pointer; transition: transform .15s ease, opacity .2s ease, background .2s ease;
}
.login-submit:hover:not(:disabled) { transform: translateY(-1px); background: var(--accent-2); }
.login-submit:active:not(:disabled) { transform: translateY(0); background: var(--accent-3); }
.login-submit:disabled { opacity: 0.5; cursor: default; }

.login-demo { text-align: center; font-size: 15px; color: var(--fg-3); margin: 12px 0 0; }
.login-demo .mono { font-family: var(--font-mono); font-weight: 600; color: var(--fg-1); }

.login-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; }
.login-divider .hr { flex: 1; height: 1px; background: var(--line-2); }
.login-divider .label { color: var(--fg-3); font-size: 15px; text-transform: uppercase; letter-spacing: 0.1em; }

.login-vrrx { text-align: center; }
.login-vrrx img { height: 64px; width: auto; display: inline-block; }
.login-vrrx .vrrx-text { font-size: 15px; letter-spacing: 0.35em; text-transform: uppercase; color: var(--fg-1); margin: 8px 0 0; }
.login-vrrx .vrrx-bar { width: 64px; height: 2px; margin: 8px auto 0; border-radius: 999px; background: linear-gradient(90deg, #ec4899, #3b82f6, #f59e0b, #22c55e, #8b5cf6); }
.login-vrrx .vrrx-sub { font-size: 15px; color: var(--fg-3); margin: 8px 0 0; }

/* ============================================================================
   LANGUAGE SELECTOR — Globe dropdown in topbar
============================================================================ */
.lang-selector { position: relative; }
.lang-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px; border-radius: var(--r-md);
  background: transparent; color: var(--fg-2);
  border: 1px solid var(--line-2); cursor: pointer;
  font-size: 15px; font-weight: 500; font-family: var(--font-sans);
  transition: background .15s ease, color .15s ease;
}
.lang-trigger:hover { background: var(--bg-3); color: var(--fg-1); }
.lang-trigger .native { font-weight: 600; }

.lang-pop {
  position: absolute; right: 0; top: calc(100% + 6px);
  width: 280px; z-index: 50;
  background: var(--bg-1); border: 1px solid var(--line-2);
  border-radius: var(--r-md); box-shadow: var(--sh-2);
  display: flex; flex-direction: column;
}
.lang-pop-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid var(--line-1);
  font-size: 16px; font-weight: 600; color: var(--fg-1);
}
.lang-pop-head > span { display: inline-flex; align-items: center; gap: 6px; }
.lang-pop-head button { background: transparent; border: none; color: var(--fg-3); cursor: pointer; padding: 4px; }
.lang-pop-head button:hover { color: var(--fg-1); }

.lang-search {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 12px; padding: 8px 10px;
  background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: var(--r-md); color: var(--fg-3);
}
.lang-search input {
  flex: 1; background: transparent; border: none; outline: none;
  font-family: var(--font-sans); font-size: 16px; color: var(--fg-1);
}
.lang-search input::placeholder { color: var(--fg-3); }

.lang-list { max-height: 280px; overflow-y: auto; padding: 4px 8px 8px; }
.lang-item {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--r-md);
  background: transparent; border: none; cursor: pointer; text-align: left;
  font-family: var(--font-sans); transition: background .15s ease;
  color: var(--fg-1); border-left: 3px solid transparent;
}
.lang-item:hover { background: var(--bg-3); }
.lang-item.active { background: var(--accent-soft); border-left-color: var(--accent-1); color: var(--accent-1); }
.lang-item .native { font-size: 17px; font-weight: 600; flex-shrink: 0; }
.lang-item .english { font-size: 15px; color: var(--fg-3); margin-left: auto; }
.lang-item.active .english { color: var(--accent-2); }
.lang-item svg { flex-shrink: 0; color: var(--accent-1); margin-left: 6px; }

/* ============================================================================
   AI AGENTS VIEW — patient profile + 2 side-by-side recommendation cards
============================================================================ */
.agents-view { padding: 24px 32px; max-width: 1400px; margin: 0 auto; }
.agents-header { display: flex; align-items: baseline; gap: 16px; margin-bottom: 16px; }
.agents-header h1 { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }

.profile-card {
  background: var(--bg-1); border: 1px solid var(--line-1);
  border-radius: var(--r-md); padding: 18px 20px; margin-bottom: 18px;
}
.profile-card h3 { font-size: 17px; font-weight: 600; margin: 0 0 12px; color: var(--fg-1); }
.profile-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}
.profile-grid label { display: flex; flex-direction: column; gap: 4px; }
.profile-grid label.span2 { grid-column: span 2; }
.profile-grid label > span { font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-3); }
.profile-grid label .input { font-size: 16px; }

.agents-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 900px) { .agents-grid { grid-template-columns: 1fr; } }

.agent-card {
  background: var(--bg-1); border: 1px solid var(--line-1); border-radius: var(--r-md);
  display: flex; flex-direction: column; min-height: 320px;
}
.agent-head {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  border-bottom: 1px solid var(--line-1);
}
.agent-title { font-size: 17px; font-weight: 600; }
.agent-badge {
  font-size: 15px; font-weight: 600; font-family: var(--font-mono);
  letter-spacing: 0.08em; padding: 2px 8px; border-radius: 999px;
  border: 1px solid; text-transform: uppercase;
}
.agent-source { margin-left: auto; font-size: 15px; font-family: var(--font-mono); color: var(--fg-3); }
.agent-body { padding: 16px; flex: 1; min-height: 160px; }
.agent-hint, .agent-loading { font-size: 16px; color: var(--fg-3); display: inline-flex; align-items: center; gap: 8px; }
.agent-error {
  padding: 10px 12px; border-radius: var(--r-md);
  background: rgba(220,38,38,0.10); border: 1px solid rgba(220,38,38,0.25);
  color: var(--crit); font-size: 16px;
}
.agent-result .block { margin-bottom: 14px; }
.agent-result .block:last-child { margin-bottom: 0; }
/* Section labels inside AICAN AI / NCCN AI panes — each label gets its own
   semantic colour via a modifier class. Reading the column top-to-bottom
   the doctor sees: green (the recommendation), indigo (the reasoning),
   amber (the warnings), grey (the references) — visually distinct so the
   eye lands on the action first. */
.block-label {
  font-size: 15px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--fg-3); display: block; margin-bottom: 4px;
}
.block-label.bl-recommendation { color: var(--ok); }       /* green — the answer */
.block-label.bl-rationale      { color: var(--indigo-1); } /* indigo — the why */
.block-label.bl-caveats        { color: var(--warn); }     /* amber — the watch-out */
.block-label.bl-citations      { color: var(--fg-3); }     /* grey — the refs */
.agent-result p { font-size: 17px; line-height: 1.55; color: var(--fg-1); margin: 0; }
.agent-cites { display: flex; flex-wrap: wrap; gap: 6px; }
.cite-chip {
  font-size: 15px; font-family: var(--font-mono);
  padding: 2px 8px; border-radius: var(--r-md);
  background: var(--accent-soft); color: var(--accent-1);
}
.agent-confidence {
  margin-top: 12px; font-size: 15px; color: var(--fg-2);
  padding: 4px 8px; background: var(--bg-2); border-radius: var(--r-md); display: inline-block;
}
.agent-tail { margin-top: 8px; font-family: var(--font-mono); color: var(--fg-3); }
.agent-foot { padding: 12px 16px; border-top: 1px solid var(--line-1); display: flex; justify-content: flex-end; }

/* ── Agent card: confidence header + collapsible reasoning (#4 #5 #9) ─────── */
.agent-conf-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.agent-conf-lbl {
  font-size: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-3); white-space: nowrap;
}
.agent-conf-bar {
  flex: 1; max-width: 160px; height: 7px; border-radius: 999px;
  background: var(--bg-3); overflow: hidden;
}
.agent-conf-fill { height: 100%; border-radius: 999px; }
.agent-conf-fill.conf-high { background: var(--ok); }
.agent-conf-fill.conf-med  { background: var(--warn); }
.agent-conf-fill.conf-low  { background: var(--fg-3); }
.agent-conf-tag {
  font-size: 15px; font-weight: 800; letter-spacing: 0.03em;
  padding: 2px 9px; border-radius: 999px;
}
.agent-conf-tag.conf-high { background: var(--ok-soft);   color: var(--ok); }
.agent-conf-tag.conf-med  { background: var(--warn-soft); color: var(--warn); }
.agent-conf-tag.conf-low  { background: var(--bg-3);      color: var(--fg-2); }

.agent-why { margin-top: 12px; border-top: 1px solid var(--line-1); padding-top: 10px; }
.agent-why-toggle {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: transparent; border: 0; padding: 2px 0;
  font-size: 15px; font-weight: 700; color: var(--indigo-1);
  letter-spacing: 0.02em;
}
.agent-why-toggle:hover { text-decoration: underline; }
.agent-why-chev { font-size: 15px; }
.agent-why-hint {
  font-weight: 500; color: var(--fg-3); text-transform: uppercase;
  letter-spacing: 0.04em; font-size: 15px;
}
.agent-why-body { margin-top: 12px; }

/* ── AI-Chat starter prompts (#7) ────────────────────────────────────────── */
.qempty { padding: 24px 16px; text-align: center; }
.qprompts {
  display: flex; flex-direction: column; gap: 8px;
  max-width: 560px; margin: 16px auto 0;
}
.qprompt {
  display: flex; align-items: center; gap: 10px; text-align: left;
  width: 100%; padding: 10px 14px; cursor: pointer;
  background: var(--bg-1); border: 1px solid var(--line-2); border-radius: 10px;
  font-size: 15px; color: var(--fg-1); transition: border-color .12s, background .12s;
}
.qprompt:hover:not(:disabled) { border-color: var(--accent-1); background: var(--accent-soft); }
.qprompt:disabled { opacity: 0.55; cursor: default; }
.qprompt-ico { flex: 0 0 auto; font-size: 16px; }
.qprompt-txt { flex: 1; }

/* ── Markdown renderer (AI replies, AICAN/NCCN AI rationale) ─────────────── */
/* Mirrors how ChatGPT / Claude format LLM output: clear hierarchy, callout
   blocks, syntax-highlighted-ish code, readable bullets. */
.md { font-size: 17px; line-height: 1.6; color: var(--fg-1); }
.md > *:first-child { margin-top: 0; }
.md > *:last-child  { margin-bottom: 0; }

.md h1, .md h2, .md h3, .md h4 {
  margin: 14px 0 6px; font-weight: 700; color: var(--fg-1); line-height: 1.3;
}
.md h1 { font-size: 20px; }
.md h2 { font-size: 18px; color: var(--accent-1); }
.md h3 { font-size: 17px; }
.md h4 { font-size: 16px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-3); }

.md p { margin: 0 0 8px; }

.md strong, .md b {
  font-weight: 700;
  color: var(--accent-1);             /* highlight the LLM-bolded key terms */
  background: var(--accent-soft);
  padding: 0 3px; border-radius: 3px;
}
.md em, .md i { font-style: italic; color: var(--fg-2); }

.md ul, .md ol { margin: 4px 0 10px; padding-left: 22px; }
.md li { margin-bottom: 3px; }
.md ul li::marker { color: var(--accent-1); }
.md ol li::marker { color: var(--accent-1); font-weight: 700; }

.md code {
  font-family: var(--font-mono); font-size: 15.5px;
  background: var(--bg-2); color: var(--accent-1);
  padding: 1px 5px; border-radius: 4px;
  border: 1px solid var(--line-1);
}
.md pre {
  background: var(--bg-2); border: 1px solid var(--line-1); border-radius: 6px;
  padding: 10px 12px; overflow-x: auto; margin: 8px 0;
}
.md pre code { background: none; border: none; padding: 0; color: var(--fg-1); font-size: 15.5px; }

.md blockquote {
  margin: 8px 0; padding: 6px 12px;
  border-left: 3px solid var(--accent-1);
  background: var(--accent-soft); color: var(--fg-2);
  font-style: italic;
}

.md a { color: var(--accent-1); text-decoration: underline; text-underline-offset: 2px; }

.md table {
  border-collapse: collapse; margin: 10px 0; width: 100%;
  font-size: 16px;
}
.md table th, .md table td {
  padding: 6px 10px; border: 1px solid var(--line-1); text-align: left;
}
.md table th { background: var(--bg-2); font-weight: 700; color: var(--fg-2); }
.md table tr:nth-child(even) td { background: var(--bg-2); }

.md hr { border: none; border-top: 1px solid var(--line-1); margin: 12px 0; }

/* ── Cancer Types & Identification Guide ────────────────────────────────── */
.cancer-guide { padding: 24px 32px; }
.cg-banner {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(236,72,153,0.10), rgba(31,111,235,0.10));
  border: 1px solid var(--line-1); margin-bottom: 20px;
}
.cg-banner-icon {
  width: 44px; height: 44px; border-radius: 8px;
  background: linear-gradient(135deg, #ec4899, #f43f5e);
  display: flex; align-items: center; justify-content: center; color: white;
}
.cg-search-wrap { margin-bottom: 18px; }
.cg-search {
  width: 100%; padding: 12px 16px; border-radius: 10px;
  background: var(--bg-2); border: 1px solid var(--line-1);
  color: var(--fg-1); font-size: 18px; outline: none;
}
.cg-search:focus { border-color: var(--accent-1); }

.cg-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.cg-card {
  background: var(--bg-2); border: 1px solid var(--line-1);
  border-top: 3px solid; border-radius: 10px; padding: 16px;
  cursor: pointer; transition: transform 0.12s, border-color 0.12s;
}
.cg-card:hover { transform: translateY(-2px); border-color: var(--accent-1); }
.cg-card-head { display: flex; justify-content: space-between; align-items: flex-start; }
.cg-icon-square {
  width: 42px; height: 42px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: white;
}
.cg-pill {
  font-size: 15px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-1);
  border: 1px solid var(--accent-line);
}
.cg-card-stats { display: flex; gap: 8px; margin-bottom: 10px; }
.cg-card-stat {
  flex: 1; text-align: center; padding: 8px 6px; border-radius: 6px;
  background: var(--bg-3);
}
.cg-card-stat-label { font-size: 15px; color: var(--fg-3); }
.cg-card-stat-value { font-size: 20px; font-weight: 700; color: var(--fg-1); margin-top: 2px; }
.cg-card-link {
  background: none; border: none; padding: 0;
  font-weight: 600; font-size: 16px; cursor: pointer;
}

/* Detail view */
.cg-detail { padding: 24px 32px; max-width: 1100px; margin: 0 auto; }
.cg-detail-head {
  display: flex; flex-direction: column; gap: 14px;
  padding-bottom: 16px; margin-bottom: 20px;
  border-bottom: 3px solid;
}
.cg-detail-title-wrap { display: flex; gap: 14px; align-items: center; }
.cg-detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px;
}
.cg-stat { padding: 12px 16px; background: var(--bg-2); border: 1px solid var(--line-1); border-radius: 8px; }
.cg-stat-label { font-size: 15px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-3); margin-bottom: 4px; }
.cg-section { margin-bottom: 20px; }
.cg-section-title {
  font-size: 15px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--accent-1); margin-bottom: 8px;
}
.cg-section-body { font-size: 17px; line-height: 1.6; color: var(--fg-1); }
.cg-section-body ul { padding-left: 20px; margin: 0; }
.cg-section-body li { margin-bottom: 4px; }
.cg-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.cg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cg-chip {
  font-size: 15px; padding: 4px 10px; border-radius: 6px;
  background: var(--bg-3); color: var(--fg-2); border: 1px solid var(--line-1);
}
.cg-chip-tx { background: var(--accent-soft); color: var(--accent-1); border-color: var(--accent-line); }
.cg-chip-mut {
  font-family: var(--font-mono); font-size: 15px;
  background: rgba(236,72,153,0.12); color: #ec4899; border-color: rgba(236,72,153,0.3);
}

.cg-table {
  width: 100%; border-collapse: collapse; font-size: 16px; margin-top: 4px;
}
.cg-table th, .cg-table td {
  padding: 8px 10px; border: 1px solid var(--line-1); text-align: left;
  vertical-align: top;
}
.cg-table th { background: var(--bg-2); font-weight: 700; color: var(--fg-2); }
.cg-table tr:nth-child(even) td { background: var(--bg-2); }