/* ─────────────────────────────────────────────────────────────────────
   platform.css — shared styles for the NeuroPathIQ Version 1.2 research
   platform (site/platform/*.html).

   Design direction: a scientific research application, not an enterprise
   dashboard. A researcher lives in this interface for hours — reading,
   comparing, following evidence — not glancing at KPIs. That means: dense
   information over big padded cards, a serif face for reading content
   (titles, evidence, explanations) paired with the system sans for UI
   chrome, flat bordered panels over drop-shadowed "widgets," and the
   relationship graph treated as the actual centerpiece rather than one
   tile among many.

   Same class names as the prior dashboard-styled version (JS across
   platform/*.js generates markup against these selectors) — only the
   visual values changed, plus a handful of new density-oriented
   components (.timeline, .meta-line) that didn't exist before.
───────────────────────────────────────────────────────────────────── */

/* ── Design tokens ── */
:root {
  --bg:#F7F7F5;--bg2:#FFFFFF;--bg3:#F0F0EC;
  --border:#E4E2DC;--border2:#CBC7BC;
  --accent:#1D4ED8;--accent2:#1E3A8A;--accent-bg:#EEF2FF;
  --text1:#181611;--text2:#3F3B33;--text3:#6B665C;--text4:#9C968A;
  --success:#166534;--success-bg:#F0FDF4;
  --warning:#92400E;--warning-bg:#FFFBEB;
  --danger:#991B1B;--danger-bg:#FEF2F2;
  --sidebar-w:200px;
  --radius:4px;--radius-lg:6px;
  --shadow:0 1px 2px rgba(24,22,17,0.06);
  --shadow-md:0 2px 6px rgba(24,22,17,0.09);
  --font:-apple-system,'Segoe UI',system-ui,sans-serif;
  --font-serif:Georgia,'Iowan Old Style','Palatino Linotype','Book Antiqua',serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text1);font-family:var(--font);font-size:13px;line-height:1.5;min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg3)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}

/* ── Top site nav ──
   Brought into visual alignment with the approved homepage nav (same
   brand mark color/size, same nav-link type scale/weight) — this file's
   own --accent/--text* tokens are intentionally left untouched (they
   still drive badges, buttons, active states, etc. everywhere else), so
   the handful of exact-brand values below are scoped to these selectors
   only, not promoted into the shared token system. */
.site-nav{background:var(--bg2);border-bottom:1px solid var(--border);height:56px;display:flex;align-items:center;padding:0 24px;gap:20px;position:sticky;top:0;z-index:200;flex-shrink:0}
.site-logo{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:#0D1117;text-decoration:none;flex-shrink:0}
.site-logo-mark{width:28px;height:28px;background:#0969DA;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.site-logo-mark svg{width:15px;height:15px}
.site-logo span{color:#0969DA}
.site-nav-links{display:flex;gap:6px}
.site-nav-links a{font-size:13px;font-weight:700;color:#57606A;padding:5px 10px;border-radius:var(--radius);transition:color .12s}
.site-nav-links a:hover{color:#0D1117;text-decoration:none}
.site-nav-right{margin-left:auto;display:flex;gap:8px;align-items:center}
.nbtn{display:inline-flex;padding:4px 12px;border-radius:var(--radius);font-size:11px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:var(--bg2);color:var(--text2);text-decoration:none;transition:all .12s}
.nbtn:hover{background:var(--bg3);color:var(--text1);text-decoration:none}
.nbtn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.nbtn-primary:hover{background:var(--accent2);border-color:var(--accent2);color:#fff}

/* ── Disclaimer bar ── */
.disclaimer-bar{background:var(--bg3);border-bottom:1px solid var(--border);padding:5px 18px;font-size:10.5px;color:var(--text3);text-align:center;line-height:1.5;flex-shrink:0}
.disclaimer-bar a{color:var(--text2);font-weight:600}

/* ── Platform layout ── */
.platform{display:flex;flex:1;min-height:0}
.sidebar{width:var(--sidebar-w);background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.topbar{background:var(--bg2);border-bottom:1px solid var(--border);padding:0 18px;height:44px;display:flex;align-items:center;gap:10px;flex-shrink:0}
.content{flex:1;overflow-y:auto;padding:18px 22px;background:var(--bg)}

/* ── Sidebar internals ── */
.sb-logo{padding:14px 14px 10px;border-bottom:1px solid var(--border)}
.sb-logo-name{font-family:var(--font-serif);font-size:14px;font-weight:700;color:var(--text1)}
.sb-logo-name span{color:var(--accent)}
.sb-logo-sub{font-size:9.5px;color:var(--text4);margin-top:1px;text-transform:uppercase;letter-spacing:.06em}
.nav-section{font-size:9.5px;font-weight:700;color:var(--text3);padding:12px 14px 3px;text-transform:uppercase;letter-spacing:.08em}
/* Phase 1E.5E: sidebar items were reported too thin/subdued on actual
   rendered screenshots even after prior contrast passes (which never
   touched this file — .nav-item's color was already var(--text2), the
   issue was pure size/weight). Bumped from 12px/regular to 15px/500 so the
   sidebar reads at a comparable scale to the top nav (.site-nav-links a is
   13px/700) instead of noticeably smaller. .nav-item/.nav-subitem are
   consumed only by layout.js's shared sidebar chrome (grep-confirmed
   against every JS/HTML file) — this affects the persistent sidebar frame
   on every platform page, including Relationship Explorer's, but never its
   protected canvas/graph/node-panel content, which lives in separate
   classes (.graph-*, .np-*, #node-panel, .conn-chip) untouched here. */
.nav-item{display:flex;align-items:center;gap:8px;padding:7px 14px;font-size:15px;font-weight:500;color:var(--text2);cursor:pointer;border-left:2px solid transparent;transition:all .1s}
.nav-item:hover{background:var(--bg3);color:var(--text1);text-decoration:none}
.nav-item.active{color:var(--accent);border-left-color:var(--accent);background:var(--accent-bg);font-weight:700}
.nav-icon{width:14px;height:14px;flex-shrink:0;opacity:.75;display:inline-flex;align-items:center;justify-content:center;font-size:12px}
.nav-item.active .nav-icon{opacity:1}

/* ── Diseases parent/child submenu (Phase 1E.2) — restrained, no new icon library ── */
.nav-parent-row{display:flex;align-items:stretch}
.nav-parent-row .nav-item-parent{flex:1;min-width:0}
.nav-toggle{background:none;border:none;padding:0 12px;color:var(--text3);cursor:pointer;font-size:10px;flex-shrink:0;transition:color .1s}
.nav-toggle:hover{color:var(--text1)}
.nav-submenu{display:flex;flex-direction:column;padding-bottom:2px}
/* Phase 1E.5E: disease submenu entries (ALS, Parkinson's Disease, ...) were
   the palest, smallest text in the sidebar (var(--text3) at 11.5px) despite
   being real navigation destinations, not metadata — darkened to
   var(--text2) (~11:1 contrast, vs. ~5.7:1 before) at a comfortably
   readable 14px/500, one step below the 15px/500 top-level items so the
   "Diseases" parent row still reads as visually stronger than its
   children, per this phase's explicit hierarchy requirement. */
.nav-subitem{display:block;padding:6px 14px 6px 30px;font-size:14px;font-weight:500;color:var(--text2);border-left:2px solid transparent;transition:all .1s}
.nav-subitem:hover{background:var(--bg3);color:var(--text1);text-decoration:none}
.nav-subitem.active{color:var(--accent);border-left-color:var(--accent);background:var(--accent-bg);font-weight:700}

/* ── Topbar ── */
.search-wrap{flex:1;max-width:360px;position:relative}
.search-wrap input{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:5px 10px 5px 28px;font-size:12px;color:var(--text1);outline:none;transition:border-color .15s;font-family:var(--font)}
.search-wrap input::placeholder{color:var(--text4)}
.search-wrap input:focus{border-color:var(--accent);background:var(--bg2)}
.search-icon{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--text4);pointer-events:none}
.btn{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg2);color:var(--text2);font-size:11px;font-weight:500;cursor:pointer;transition:all .12s;white-space:nowrap;font-family:var(--font)}
.btn:hover{background:var(--bg3);border-color:var(--border2);color:var(--text1)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn:disabled:hover{background:var(--bg2);border-color:var(--border);color:var(--text2)}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent2);border-color:var(--accent2);color:#fff}

/* ── Page header ── */
.page-wrap{max-width:1320px;margin:0 auto;width:100%}
.page-wrap.wide{max-width:1600px}
.kg-crumb{font-size:9.5px;font-weight:700;color:var(--text4);text-transform:uppercase;letter-spacing:.09em;margin-bottom:5px;display:flex;align-items:center;gap:5px}
.kg-crumb .crumb-sep{color:var(--border2);font-weight:400}
.sec-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--border);padding-bottom:10px}
.sec-title{font-family:var(--font-serif);font-size:17px;font-weight:700;color:var(--text1);display:flex;align-items:center;gap:8px;letter-spacing:-.01em}
.sec-sub{font-size:11px;color:var(--text3);margin-top:3px;line-height:1.5}
.page-purpose{font-size:11.5px;color:var(--text3);margin-top:4px;line-height:1.5;max-width:600px}
.page-intro{border-left:2px solid var(--accent);padding:4px 0 4px 12px;margin-bottom:14px;font-size:11.5px;color:var(--text3);line-height:1.6;max-width:820px}

/* ── Pills ── */
.filters{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.pill{font-size:11px;font-weight:500;padding:3px 11px;border-radius:99px;border:1px solid var(--border);color:var(--text3);cursor:pointer;background:var(--bg2);transition:all .12s}
.pill:hover{border-color:var(--border2);color:var(--text1);background:var(--bg3)}
.pill.active{background:var(--text1);color:var(--bg2);border-color:var(--text1)}

/* ── Cards (generic — trial list, search results) ── */
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:11px 13px;margin-bottom:8px;cursor:pointer;transition:border-color .12s;box-shadow:none}
.card:hover{border-color:var(--border2)}
.card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:3px}
.card-title{font-family:var(--font-serif);font-size:13.5px;font-weight:700;color:var(--text1);line-height:1.4}
.card-meta{font-size:11px;color:var(--text3);margin-bottom:0}
.card-body{font-size:12px;color:var(--text2);line-height:1.6;margin-top:8px}
/* Clinical Trials Final QA Correction: bounded preview of a source
   brief_summary — some ClinicalTrials.gov summaries run to many paragraphs
   and dominated the expanded card. Pure CSS multi-line clamp: the full
   source string is still in the DOM unmodified (see page-clinical-
   trials.js's trialCardHtml — no JS substring/truncation of the stored
   text), only its rendered presentation is bounded; the browser adds the
   ellipsis itself only when the text genuinely overflows the clamp, never
   on a summary short enough to already fit. */
.card-body-clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;text-overflow:ellipsis}

/* ── Badges ── */
.badge{font-size:10px;font-weight:600;padding:1px 7px;border-radius:3px;white-space:nowrap;flex-shrink:0;display:inline-block;text-transform:uppercase;letter-spacing:.03em}
.badge-blue{background:var(--accent-bg);color:var(--accent2)}
.badge-green{background:var(--success-bg);color:var(--success)}
.badge-amber{background:var(--warning-bg);color:var(--warning)}
.badge-gray{background:var(--bg3);color:var(--text3)}

/* ── Progress (legacy, kept for compatibility) ── */
.prog-wrap{margin:6px 0}
.prog-row{display:flex;justify-content:space-between;font-size:10px;color:var(--text3);margin-bottom:3px;font-weight:500}
.prog-bg{background:var(--bg3);border-radius:99px;height:4px;overflow:hidden}
.prog-fill{height:100%;border-radius:99px}

/* ── Graph — the visual centrepiece on Relationship Explorer ── */
.graph-area{display:grid;grid-template-columns:1fr 300px;gap:14px;align-items:start}
.graph-wrap{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--bg2);position:relative}
#graph-canvas{display:block;width:100%;cursor:pointer}
/* Phase 3B: switched from --font-mono to the regular sans-serif family —
   monospace made this read as debug output rather than researcher-facing
   status text. Weight/color otherwise unchanged; still a small, unobtrusive
   overlay, not a new component. */
/* Graph Footer Status Collision fix: reserve the exact width
   .graph-zoom-hint needs (its own ~170px content + a comfortable gap) on
   the right edge of .graph-hint's box, so the two bottom-corner overlays
   can never occupy the same pixels regardless of canvas width or status-
   text length. .graph-hint truncates its own text with an ellipsis rather
   than overlapping — verified colliding at 1280px/1100px/1000px before this
   fix (up to -180px overlap), clear at 1440px/900px+ only by coincidence of
   that specific text length. Font sizes/colors from the prior readability
   pass are unchanged. */
.graph-hint{position:absolute;bottom:8px;left:10px;right:190px;font-size:12.5px;font-weight:500;color:var(--text2);pointer-events:none;background:rgba(255,255,255,.9);padding:2px 7px;border-radius:3px;font-family:var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.graph-zoom-hint{position:absolute;bottom:8px;right:10px;font-size:12px;color:var(--text3);pointer-events:none;background:rgba(255,255,255,.9);padding:2px 7px;border-radius:3px}
/* Phase 3B: ambient "Disease context: {Name}" label shown at the top of the
   canvas in Knowledge Graph mode — communicates the research context
   without drawing a synthetic Disease->Gene scientific edge (Section 9). */
.graph-context-badge{position:absolute;top:8px;left:10px;font-size:10.5px;font-weight:600;color:var(--accent);background:rgba(255,255,255,.92);padding:3px 9px;border-radius:3px;display:none}
.graph-context-badge.visible{display:inline-block}
/* Phase 3B.4 (Section 1/2/9): the Knowledge Graph Overview panel's ranked
   pathway list — each row is a real <button> reusing selectNode() (same
   mechanism as .conn-chip/.suggestion-chip elsewhere in this panel), styled
   as a full-width list row rather than a pill/chip since it carries two
   lines (name + observed-gene count). overflow-wrap keeps long pathway
   names from causing horizontal overflow on narrow viewports; block layout
   means no fixed width to truncate against. */
.kg-pathway-list{display:flex;flex-direction:column}
.kg-pathway-row{display:block;width:100%;text-align:left;background:none;border:none;font:inherit;font-family:var(--font);padding:6px 6px;border-radius:var(--radius);cursor:pointer;transition:background-color .1s}
.kg-pathway-row:hover{background:var(--accent-bg)}
.kg-pathway-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;background:var(--accent-bg)}
.kg-pathway-row-name{display:block;font-size:13.5px;font-weight:600;color:var(--text1);overflow-wrap:anywhere}
.kg-pathway-row-meta{display:block;font-size:12px;color:var(--text2);margin-top:1px}
/* Phase 3B: Knowledge Graph / Literature Evidence mode control — a compact
   segmented pair, not a toolbar. Reuses existing tokens only (no new colors). */
.mode-toggle{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius-lg);padding:2px;background:var(--bg2);flex-shrink:0}
.mode-tab{border:none;background:none;font:inherit;font-family:var(--font);font-size:12.5px;font-weight:500;color:var(--text2);padding:5px 11px;border-radius:4px;cursor:pointer;white-space:nowrap}
.mode-tab[aria-pressed="true"]{background:var(--accent);color:#fff}
.mode-tab:not([aria-pressed="true"]):hover{color:var(--text1)}
.mode-tab:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.graph-search-wrap{position:relative;margin-bottom:8px;width:270px;max-width:100%}
.graph-search-wrap input{width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:5px 10px;font-size:12px;color:var(--text1);outline:none;font-family:var(--font)}
.graph-search-wrap input:focus{border-color:var(--accent)}
.graph-search-results{position:absolute;top:100%;left:0;right:0;margin-top:3px;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius);box-shadow:var(--shadow-md);z-index:20;max-height:220px;overflow-y:auto;display:none}
.graph-search-results.open{display:block}
.graph-search-result{padding:6px 10px;font-size:12px;color:var(--text2);cursor:pointer;display:flex;justify-content:space-between;gap:8px}
.graph-search-result:hover{background:var(--accent-bg);color:var(--text1)}

/* ── Suggested-entities chips — replaces the empty "click a node" default
   state with concrete starting points (highest-degree entities already
   present in the loaded graph data). ── */
.suggestion-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.suggestion-chip{font-size:11px;padding:4px 10px;border-radius:99px;border:1px solid var(--border2);color:var(--text2);cursor:pointer;background:var(--bg2);transition:all .12s;font-weight:500}
.suggestion-chip:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
.graph-legend{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.gl-item{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--text2)}
.gl-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
/* Phase 2B: edge-class legend swatches — a short line segment standing in
   for the canvas edge style (solid = literature observation, dashed =
   ontology relationship), matching .gl-dot's node-type-swatch pattern. */
.gl-line{width:16px;height:0;border-top:2px solid var(--text3);flex-shrink:0}
.gl-line-dashed{border-top-style:dashed}
/* Phase 3A: subtle grouping divider between the node-type legend items and
   the edge-class legend items — a thin vertical rule, not a second row. */
.gl-divider{width:1px;align-self:stretch;background:var(--border);margin:0 2px}
#node-panel{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px;max-height:calc(100vh - 180px);overflow-y:auto}
.np-title{font-family:var(--font-serif);font-size:15px;font-weight:700;color:var(--text1);margin-bottom:3px;line-height:1.3}
.np-type{font-size:9.5px;font-weight:700;padding:1px 7px;border-radius:3px;display:inline-block;margin-bottom:8px;text-transform:uppercase;letter-spacing:.03em}
.np-desc{font-size:12px;color:var(--text2);line-height:1.6;margin-bottom:8px}
.conn-chip{font-size:12px;padding:3px 9px;border-radius:99px;border:1px solid var(--border);color:var(--text2);cursor:pointer;background:var(--bg3);transition:all .12s;font-weight:500}
.conn-chip:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
.node-connections{display:flex;flex-wrap:wrap;gap:5px}

/* ── Panel section labels (Ontology / Relationships / etc.) ── */
.panel-label{font-size:9.5px;font-weight:700;color:var(--text4);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px}

/* ── Compact relationship card — Discover / Knowledge Feed / node panel rows ──
   Replaces the old padded-box-within-a-card pattern (a whole bordered
   "mech-box" just to say "co_occurs") with one dense meta line, matching
   how a citation or database record reads, not a dashboard tile. */
.conn-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;margin-bottom:0;cursor:pointer;transition:border-color .12s,background-color .12s;position:relative}
.conn-card:hover,.conn-card:focus-visible{border-color:var(--accent);background:var(--accent-bg)}
.conn-card:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.conn-card::after{content:'→';position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--accent);font-size:12px;opacity:0;transition:opacity .12s}
.conn-card:hover::after,.conn-card:focus-visible::after{opacity:1}

/* Phase 4C: rel-row (Entity Explorer) and card-header (Clinical Trials
   disclosure toggle) were made keyboard-focusable but had no visible focus
   indicator — matching the same outline convention as every other custom
   focusable row above. */
.rel-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;background:var(--accent-bg)}
.card-header:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Knowledge Feed rows: the arrow is a permanent affordance (not hover-only
   like .conn-card above) so a clickable row reads as interactive without
   requiring a mouse — muted in the resting state, brightening to accent on
   hover/keyboard focus. */
.timeline-group-row::after,.record-item::after{content:'→';position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--text4);font-size:12px;transition:color .12s}
.timeline-group-row:hover::after,.record-item:hover::after,.timeline-group-row:focus-visible::after,.record-item:focus-visible::after{color:var(--accent)}
.timeline-group-row:focus-visible,.record-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;background:var(--accent-bg)}
.record-item{position:relative}
.conn-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;gap:8px}
.conn-title{font-family:var(--font-serif);font-size:13px;font-weight:700;color:var(--text1);margin-bottom:4px;line-height:1.35}
.meta-line{font-size:11px;color:var(--text3);display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.meta-line .sep{color:var(--border2)}
.meta-line strong{color:var(--text2);font-weight:600}

/* Legacy box components — kept defined (still referenced by a few inline
   detail views) but visually flattened to match the meta-line density. */
.mech-box{background:transparent;border:none;padding:0;margin-bottom:4px}
.mech-label{font-size:9.5px;font-weight:700;color:var(--text4);text-transform:uppercase;letter-spacing:.06em;display:inline;margin-right:5px}
.mech-text{font-size:11px;color:var(--text2);font-weight:500;display:inline;font-family:var(--font-mono)}
.entity-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.entity{font-size:10.5px;font-weight:500;padding:1px 7px;border-radius:3px;background:var(--bg3);color:var(--text2);font-variant-numeric:tabular-nums}
/* Phase 1E.9: Pathway Convergence's gene chips became real <button>
   elements (previously click-only <span>s pretending to be controls — no
   keyboard activation, no button semantics). Scoped to button.entity
   (element+class) so it never touches the non-interactive <span
   class="entity"> identifier badges elsewhere (Entity Explorer,
   Relationship Explorer's node panel) — those stay exactly as they were.
   Phase 3B.7: gene chips became real navigation (<a>) instead of an inline
   state toggle (<button>) — see pathwayCardHtml() — so the hover/focus
   treatment is now shared with a.entity via the same selectors, rather than
   being duplicated. text-decoration is reset here since <a> carries an
   underline by default that .entity's pill styling never wants. */
button.entity,a.entity{border:none;font:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;text-decoration:none;display:inline-block}
button.entity:hover,a.entity:hover{background:var(--border2)}
button.entity:focus-visible,a.entity:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
button.entity[aria-pressed="true"]{background:var(--accent-bg);color:var(--accent2);font-weight:700}

/* Entity Details Link Discoverability Correction — a clear secondary
   action (normal interface text size/color, medium weight), still visually
   subordinate to primary blue buttons (no background/border/padding of its
   own). Same :focus-visible outline convention as every other custom
   interactive element on this page. */
.entity-details-link{display:inline-block;margin-left:8px;font-size:13px;font-weight:500;color:var(--accent)}
.entity-details-link:hover{color:var(--accent2);text-decoration:underline}
.entity-details-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.entity-div{color:var(--text4);font-size:12px;font-weight:700}

/* ── Card grid (Discover) — dense multi-column, no oversized empty tiles ── */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.card-grid .conn-card{margin-bottom:0}

/* Discover Literature Card Grid Final Balance Correction — the base
   .card-grid above uses auto-fill(minmax(240px,1fr)), which happens to fit
   5 columns at Discover's typical content width, splitting each 8-card
   literature section into an unbalanced 5+3. Scoped to these two sections'
   own unique ids only (#discover-pathway-convergence already has its own
   inline grid-template-columns override in discover.html and is untouched
   by this rule) so no other .card-grid usage on the platform is affected. */
#discover-strong-literature.card-grid,
#discover-recently-observed.card-grid{grid-template-columns:repeat(4,1fr)}
@media(max-width:1024px){
  #discover-strong-literature.card-grid,
  #discover-recently-observed.card-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  #discover-strong-literature.card-grid,
  #discover-recently-observed.card-grid{grid-template-columns:1fr}
}

/* ── Diseases index — fixed 3-column desktop grid (Phase 1E.1). auto-fill
   on a fixed six-item set produced an uneven 5+1 split at typical content
   widths; a fixed column count keeps it a clean, even 3×2 regardless of
   container width. Responsive collapse in the shared breakpoints below. */
.diseases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.diseases-grid .conn-card{margin-bottom:0}

/* Diseases index coverage cards (Phase 1E.2) — reuses .conn-card/.stat;
   the card has its own always-visible "Explore disease →" CTA text (not
   just an on-hover affordance, so it works on touch devices too), so the
   inherited .conn-card::after hover arrow is suppressed here to avoid a
   duplicate arrow. */
.coverage-card{padding:14px 16px;text-decoration:none;display:block}
.coverage-card::after{content:none}
.coverage-card .conn-title{font-family:var(--font-serif);font-size:15px;font-weight:700;color:var(--text1);margin-bottom:10px}
.coverage-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 14px}
.coverage-cta{margin-top:12px;padding-top:10px;border-top:1px solid var(--border);font-size:11.5px;font-weight:600;color:var(--accent)}

/* ── Timeline (Knowledge Feed) — graph activity read as a chronological
   research log, not a grid of KPI tiles or a news feed. Entries are
   grouped by date: one date label + one rail dot per day, with every
   relationship/evidence item that happened that day listed underneath —
   avoids repeating the same date ten times when a batch of relationships
   was added in one pass (real in the production data). ── */
.timeline{display:flex;flex-direction:column}
.timeline-group{display:grid;grid-template-columns:78px 10px 1fr;gap:0}
.timeline-group-date{font-size:10px;color:var(--text4);font-family:var(--font-mono);padding-top:2px;text-align:right;padding-right:10px;white-space:nowrap;font-variant-numeric:tabular-nums}
.timeline-group-rail{position:relative;display:flex;justify-content:center}
.timeline-group-rail::before{content:'';position:absolute;top:0;bottom:0;width:1px;background:var(--border)}
.timeline-group:first-child .timeline-group-rail::before{top:6px}
.timeline-group:last-child .timeline-group-rail::before{bottom:calc(100% - 12px)}
.timeline-group-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);margin-top:1px;flex-shrink:0;z-index:1;position:relative}
.timeline-group-items{padding:0 0 16px 12px}
.timeline-group-row{padding:5px 22px 5px 0;cursor:pointer;border-radius:var(--radius);transition:background-color .1s;position:relative}
.timeline-group-row:hover{background:var(--accent-bg)}
.timeline-group-title{font-family:var(--font-serif);font-size:12.5px;font-weight:700;color:var(--text1);line-height:1.4}
.timeline-group-meta{font-size:11px;color:var(--text3);line-height:1.5}

/* ── Record list (Knowledge Feed's non-temporal ontology sample) — a dense
   citation-style list, deliberately WITHOUT a date column or timeline rail
   since public_ontology_relationships carries no timestamp; using the
   timeline visual here would falsely imply recency. ── */
.record-list{display:flex;flex-direction:column}
.record-item{padding:7px 22px 7px 0;border-bottom:1px solid var(--border);cursor:pointer}
.record-item:last-child{border-bottom:none}
.record-item:hover{background:var(--accent-bg)}
.record-title{font-family:var(--font-serif);font-size:12.5px;font-weight:700;color:var(--text1);margin-bottom:2px;line-height:1.4}
.record-meta{font-size:11px;color:var(--text3);line-height:1.5}

/* ── Section subgroup ── */
.subsec{margin-bottom:24px}
.subsec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px;gap:12px;flex-wrap:wrap}
.subsec-title{font-family:var(--font-serif);font-size:13px;font-weight:700;color:var(--text1);display:flex;align-items:center;gap:7px}
.subsec-sub{font-size:10.5px;color:var(--text4);margin-top:1px}
.empty-state{font-size:11.5px;color:var(--text4);padding:4px 0;text-align:left;grid-column:1/-1;border-left:2px solid var(--border);padding-left:10px;line-height:1.6}

/* ── Skeleton loading state ── */
.skeleton{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:11px 13px;margin-bottom:0}
.skeleton-line{height:8px;border-radius:3px;background:linear-gradient(90deg,var(--bg3) 25%,var(--border) 37%,var(--bg3) 63%);background-size:400% 100%;animation:skeleton-shimmer 1.4s ease infinite;margin-bottom:6px}
.skeleton-line:last-child{margin-bottom:0}
@keyframes skeleton-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (prefers-reduced-motion: reduce){.skeleton-line{animation:none}}

/* ── Entity Explorer ── */
.search-box{width:100%;max-width:360px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:5px 10px;font-size:12px;color:var(--text1);outline:none;font-family:var(--font);margin-bottom:4px;display:block}
.search-box:focus{border-color:var(--accent);background:var(--bg2)}

/* ── Unified search — inline ambiguous/no-match states (Final V1 Remove
   Public Entity Explorer & Complete Unified Search). Shared by the global
   Platform topbar dropdown (#search-results-dropdown, positioned absolute
   under .search-wrap) and the homepage's inline block
   (#search-inline-result, positioned in normal flow) — see common.js's
   searchResultStateHtml(). ── */
.search-results-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-md);z-index:50;max-height:280px;overflow-y:auto}
.search-results-dropdown:empty{display:none;border:none}
.search-candidates-label{font-size:11px;color:var(--text3);padding:8px 10px 4px}
.search-candidate-row{display:block;width:100%;text-align:left;background:none;border:none;border-top:1px solid var(--border);padding:8px 10px;cursor:pointer;font-family:var(--font)}
.search-candidate-row:first-of-type{border-top:none}
.search-candidate-row:hover,.search-candidate-row:focus-visible{background:var(--bg3)}
.search-candidate-name{display:block;font-size:12.5px;font-weight:500;color:var(--text1)}
.search-candidate-meta{display:block;font-size:11px;color:var(--text3);margin-top:1px}
.search-no-match{padding:10px;font-size:11.5px;color:var(--text2)}

/* ── Trial cards ── */
.trial-status-dot{width:5px;height:5px;border-radius:50%;display:inline-block}
.pager{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:12px}
.pager-info{font-size:11px;color:var(--text3);font-variant-numeric:tabular-nums}

/* ── Footer ── */
.platform-footer{background:var(--bg2);border-top:1px solid var(--border);padding:14px 22px;flex-shrink:0}
.platform-footer-inner{max-width:1320px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.platform-footer-brand{font-family:var(--font-serif);font-size:11px;font-weight:700;color:var(--text2)}
.platform-footer-brand span{color:var(--accent)}
.platform-footer-links{display:flex;gap:14px;flex-wrap:wrap}
.platform-footer-links a{font-size:10.5px;color:var(--text3)}
.platform-footer-links a:hover{color:var(--text1)}
.platform-footer-copy{font-size:10.5px;color:var(--text4)}

/* ── Mobile sidebar toggle ── */
.sb-toggle{display:none;background:none;border:none;padding:6px;cursor:pointer;color:var(--text2)}
@media(max-width:900px){
  .platform{position:relative}
  .sidebar{position:fixed;top:56px;left:calc(var(--sidebar-w) * -1);height:calc(100vh - 56px);z-index:100;transition:left .2s}
  .sidebar.open{left:0;box-shadow:var(--shadow-md)}
  .sb-toggle{display:flex}
  .graph-area{grid-template-columns:1fr}
  .timeline-item{grid-template-columns:56px 10px 1fr}
  .timeline-date{font-size:9px;padding-right:6px}
  .diseases-grid{grid-template-columns:repeat(2,1fr)}
}
/* ── Disease Page (Researcher Experience Phase 1B) ──
   Additive only — reuses .card/.conn-card/.badge/.meta-line/.entity/
   .panel-label/.subsec-* everywhere it already fits. New rules below cover
   exactly what didn't already exist: header summary counts, the literature-
   vs-ontology distinction, pathway convergence weight, and the deterministic
   "Why Connected" step chain. */
.disease-hero{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 20px;margin-bottom:16px}
.disease-hero-name{font-family:var(--font-serif);font-size:22px;font-weight:700;color:var(--text1);letter-spacing:-.01em}
.disease-hero-desc{font-size:12.5px;color:var(--text2);line-height:1.6;margin-top:6px;max-width:70ch}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.stat{display:flex;flex-direction:column;gap:2px}
.stat-value{font-family:var(--font-serif);font-size:19px;font-weight:700;color:var(--text1);font-variant-numeric:tabular-nums}
/* Phase 1E.5E: darkened from var(--text4) (~2.9:1, fails WCAG AA) to
   var(--text3) (~5.7:1, passes AA) and bumped 10px->12px. .stat-label is
   ALSO used by the Diseases index coverage cards (site/diseases/index.html)
   — checked and confirmed safe to change globally: this is a pure color/
   size change on a leaf text node with no width/height/flex impact, so it
   improves both surfaces identically with zero layout risk, and the
   Diseases index is explicitly not otherwise touched this phase. Stays
   visibly quieter than .stat-value (19px/700/var(--text1)) — still clearly
   secondary, just no longer pale. */
.stat-label{font-size:12px;color:var(--text3);text-transform:uppercase;letter-spacing:.05em}

/* Literature-observation vs ontology-derived — the one distinction that
   must never be visually ambiguous anywhere on this page. */
.badge-indigo{background:#EEF0FF;color:var(--accent2)}

.gene-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 4px;border-bottom:1px solid var(--border)}
.gene-row:last-child{border-bottom:none}
.gene-row-name{font-size:13px;font-weight:600;color:var(--text1)}
/* Phase 1E.5D bumped this from var(--text3)/11px to var(--text2)/11.5px;
   Phase 1E.5E's actual-browser screenshot review found that still too
   small — pushed further into this phase's "SUPPORTING ROW TEXT" 14-15px
   target. Stays visibly secondary to gene-row-name via weight+color alone
   (600/var(--text1)/18:1 vs. 400/var(--text2)/11:1) rather than via size,
   per this phase's explicit "establish hierarchy using weight, not just
   size" guidance — gene-row-name itself is intentionally left unchanged
   (not named anywhere in this phase's instructions as needing enlargement).
   .gene-row-meta remains exclusive to this file (grep-confirmed). */
.gene-row-meta{font-size:14.5px;color:var(--text2);margin-top:3px;line-height:1.5}
.gene-row-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.why-connected-panel{padding:10px 4px 12px}

.pathway-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:11px 13px;margin-bottom:8px}
.pathway-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pathway-card-name{font-family:var(--font-serif);font-size:13.5px;font-weight:700;color:var(--text1)}
.pathway-conv-bar{height:4px;border-radius:2px;background:var(--bg3);margin:7px 0 2px;overflow:hidden}
.pathway-conv-bar-fill{height:100%;background:var(--accent);border-radius:2px}
/* Phase 3B.5 (Section 3): the bar's calculation/relative widths are
   unchanged — this only labels what it already visualizes (the same
   transparent distinct-observed-gene count stated in the meta-line just
   above it), so a researcher doesn't have to infer that from an unlabeled
   blue bar. Deliberately as muted as .pathway-genes-hint — a caption, not a
   legend or a claim of scientific weighting. */
.pathway-conv-bar-label{font-size:10px;color:var(--text4)}
.pathway-genes{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
/* Phase 3B.2 (Section E): compact discoverability hint for the gene-chip
   area — a new researcher otherwise has no textual cue that the chips
   (button.entity, already interactive — cursor/hover/focus states predate
   this phase) are clickable.
   Phase 3B.6: the original 10.5px/--text4 treatment read as disabled/help
   text rather than an actionable navigation cue, so the gene-investigation
   route (Disease -> Pathway -> Gene -> Gene-centered Knowledge Graph) was
   easy to miss. Restyled to the site's link/accent blue at the same
   "readable" body size already used elsewhere on this page (.meta-line-
   readable/.gene-row-meta, 14.5px) with semi-bold weight — clearly readable
   as a cue, without exceeding the primary "Explore in Knowledge Graph" .btn
   (11px) in visual weight, since a plain-text instruction at this size/color
   still reads as secondary to an actual bordered/filled button. Still plain
   text, not a link/button — the gene chips remain the only interactive
   controls (Section "Important semantic behavior"). */
.pathway-genes-hint{font-size:14.5px;font-weight:600;color:var(--accent);margin-top:6px}

/* Phase 1E.5E — scoped modifier for .meta-line (SHARED with Clinical
   Trials/page-clinical-trials.js and common.js's relationship-card helper,
   both used elsewhere including protected Research Activity/Discover/
   Knowledge Feed — grep-confirmed, so the base .meta-line rule below is
   left untouched). Applied only via page-disease.js to the pathway card's
   "N distinct ...-observed genes participate..." line and the Biological
   Process value line — the two pieces of pathway-card supporting text this
   phase's screenshot review flagged as too small/pale at the base
   .meta-line size (11px/var(--text3)). */
.meta-line.meta-line-readable{font-size:14.5px;color:var(--text2);line-height:1.5}

/* Deterministic "Why Connected?" path — arrow-joined steps, never implying
   a single paper asserted the whole chain. */
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 14px;background:var(--bg3);border-radius:var(--radius)}
.chain-step{font-size:12px;color:var(--text1);background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:5px 10px}
.chain-step strong{font-weight:700}
/* Phase 1E.5D darkened this from var(--text4) to var(--text3); Phase
   1E.5E's screenshot review found the connector labels ("→ participates in
   (Reactome) →") still read as too faint next to the now much darker
   chain-note beneath them — darkened one step further to var(--text2).
   Still the plainest/lightest-weight element in the chain (no bold, no
   border/background box), so the boxed .chain-step entity names remain the
   visual anchor of the diagram. .chain-arrow remains exclusive to this
   file (grep-confirmed). */
.chain-arrow{color:var(--text2);font-size:13px}
/* Phase 1E.5D darkened this methodology/Why-Connected disclaimer text (e.g.
   "Scientific publications establish the literature-observation step...",
   "No authoritative Reactome pathway participation is currently recorded
   for ...") from var(--text4) to var(--text2) at 12.5px. Phase 1E.5E's
   actual-browser screenshot review found 12.5px still read as small for
   text this scientifically important — pushed into the "IMPORTANT
   SCIENTIFIC BODY / EXPLANATORY COPY" 15-16px target, with line-height
   correspondingly opened up rather than compressed (this phase explicitly
   prioritizes readability over vertical compactness). .chain-note remains
   exclusive to this file (grep-confirmed) — no other page is affected. */
.chain-note{font-size:15.5px;color:var(--text2);margin-top:10px;line-height:1.6}

.section-block{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 18px;margin-bottom:14px}
.show-more-btn{margin-top:8px}

/* Phase 1E.5D introduced this scoped modifier at 12.5px (the base .subsec-sub
   rule, shared with Discover/Knowledge Feed per the comment below, is
   deliberately left untouched — those pages are protected). Phase 1E.5E's
   actual-browser screenshot review found 12.5px still too small for the
   Pathway Convergence / Literature-Observed Genes / Literature-Observed
   Biomarkers section explanations — these are core scientific
   interpretation, not fine print — so this pushes into the 15-16px
   "IMPORTANT SCIENTIFIC BODY" target used consistently with .chain-note
   above. Applied via page-disease.js's class="subsec-sub subsec-sub-readable"
   (two classes beat .subsec-sub's one-class specificity, so no !important
   is needed). */
.subsec-sub.subsec-sub-readable{font-size:15.5px;color:var(--text2);line-height:1.6;margin-top:6px}

/* Phase 1E.5E — scoped modifier for .panel-label (SHARED with Entity
   Explorer and Relationship Explorer's node panel — grep-confirmed; the
   Relationship Explorer is explicitly protected, so the base .panel-label
   rule above is left untouched). Applied only via page-disease.js to the
   "Biological Process" field caption inside pathway cards, which screenshot
   review found too pale at the base 9.5px/var(--text4). Stays a label
   (uppercase/tracked/bold, inherited unchanged from .panel-label) rather
   than competing with the actual GO process name beside it, which already
   renders via .meta-line strong{color:var(--text2)}. */
.panel-label.panel-label-readable{font-size:12.5px;color:var(--text3)}

/* Relationship Explorer Final Visual Readability Pass — .panel-label-readable
   above was previously scoped to Disease Page only (Relationship Explorer
   was explicitly protected at the time). This phase extends the exact same
   modifier to Relationship Explorer's node-panel section labels (Knowledge
   Graph Overview, Pathways Shown, Disease Context, Relationships, etc.) via
   page-relationship-explorer.js's class="panel-label panel-label-readable" —
   no new rule needed, no other page affected.

   Two new modifiers follow the identical established pattern for the two
   remaining SHARED components this pass touches:
   .page-purpose (also used by Clinical Trials/Discover/Knowledge Feed,
   left untouched — those pages don't apply the new modifier class) and
   .np-desc (also used by Entity page, left untouched for the same reason).
   Applied only via relationship-explorer.html's static markup and
   page-relationship-explorer.js respectively. */
.page-purpose.page-purpose-readable{font-size:15.5px;color:var(--text2);line-height:1.5}
.np-desc.np-desc-readable{font-size:14.5px;color:var(--text2);line-height:1.5}

/* Discover Final Visual Readability + Terminology Pass — .page-purpose-
   readable above is reused as-is for Discover's supporting sentence (its
   15.5px target matches this page's own 15-16px ask exactly). Everything
   else below is new, following the same scoped-modifier discipline:
   .sec-title/.page-intro/.subsec-title/.subsec-sub are all SHARED with
   other platform pages (Clinical Trials, Entity, Disease, Knowledge Feed —
   grep-confirmed), so each gets its own new modifier class applied only in
   discover.html's static markup — no other page's .sec-title/.page-intro/
   .subsec-title/.subsec-sub is affected. .subsec-sub-md is deliberately a
   DIFFERENT class from Disease Page's existing .subsec-sub-readable
   (15.5px) rather than reusing it — this page's target range (13.5-14.5px)
   is genuinely smaller, and Disease Page's existing modifier stays
   untouched at its own value. */
.sec-title.sec-title-lg{font-size:23px}
.page-intro.page-intro-readable{font-size:15px;color:var(--text2);line-height:1.55}
.subsec-title.subsec-title-lg{font-size:19px}
.subsec-sub.subsec-sub-md{font-size:14px;color:var(--text2)}

/* The three Discover card sections below are scoped via their own unique
   container ids (#discover-pathway-convergence/#discover-strong-literature/
   #discover-recently-observed — each id appears nowhere else in the
   codebase, grep-confirmed) rather than new classes threaded through
   page-discover.js/common.js's relCardHtml(), so no other page's
   .pathway-card/.badge/.entity/.conn-title/.meta-line is affected even
   though relCardHtml() itself is defined in the shared common.js. */
#discover-pathway-convergence .pathway-card-name{font-size:15.5px}
#discover-pathway-convergence .badge{font-size:12px}
#discover-pathway-convergence .entity{font-size:12.5px}
/* The convergence statement already carries .meta-line-readable (14.5px,
   applied by page-discover.js) and is left alone; this targets only the
   OTHER plain .meta-line use on this card — the Biological Process value —
   without touching the readable one. */
#discover-pathway-convergence .meta-line:not(.meta-line-readable){font-size:13px;color:var(--text2)}

#discover-strong-literature .conn-title,
#discover-recently-observed .conn-title{font-size:15px}
/* Entity-type metadata (e.g. "gene · disease") sits inside .conn-head;
   the publication-count line is .conn-card's other direct-child .meta-line
   — same class name, two different roles, so the structural nesting is
   what distinguishes them (relCardHtml()'s literal markup in common.js). */
#discover-strong-literature .conn-head .meta-line,
#discover-recently-observed .conn-head .meta-line{font-size:12px;color:var(--text2)}
#discover-strong-literature .conn-card>.meta-line,
#discover-recently-observed .conn-card>.meta-line{font-size:13px;color:var(--text2)}

@media(max-width:900px){
  .stat-row{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:600px){
  .disease-hero{padding:14px 16px}
  .disease-hero-name{font-size:18px}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .chain{flex-direction:column;align-items:flex-start}
  .diseases-grid{grid-template-columns:1fr}
}

@media(max-width:600px){
  .site-nav-links{display:none}
  .content{padding:12px}
  .platform-footer-inner{flex-direction:column;align-items:flex-start}
}