/* =========================================================================
   AFFINAGE — research-resource surface (2026-05-07 redesign).
   Reference-database tone: HGNC/UniProt/Open Targets feel with restrained
   typographic distinction. Whitehead-Institute electric-violet brand,
   cool-neutral surfaces, traffic-light status (green/amber/red), and warm
   amber reserved for audit-flag disclosure (§3.3).
   ========================================================================= */

:root {
  /* Surface ramp — cool neutral with a slight violet undertone, NOT lavender-
     everywhere. Most of the page reads as off-white; the violet ramp is for
     accents only. */
  --paper:        #FBFAFD;
  --paper-2:      #F3F1F7;
  --paper-3:      #E5E2EC;
  --rule:         #C7C2D2;
  --rule-soft:    #DDD8E5;

  /* Ink ramp — cool-cast near-blacks for text, harmonising with violet. */
  --ink:          #0E0A1A;
  --ink-2:        #2A2434;
  --ink-3:        #5C5867;
  --ink-4:        #8A8693;

  /* Whitehead violet ramp — primary brand and interactive accent. */
  --violet:        #3704FF;   /* primary — links, focus, active state */
  --violet-2:      #2A03BF;   /* hover/deeper */
  --violet-mid:    #5F36FF;   /* mid-emphasis */
  --violet-light:  #8768FF;
  --violet-bg:     #EDE8FF;   /* lavender chip surface */
  --violet-bg-2:   #D7CDFF;
  --violet-deep:   #160266;   /* dark-surface interactive (chips, partners) */
  --violet-darker: #0B0133;   /* darkest — code blocks, prompt panels */

  /* Status — distinct hues so success / heads-up / danger don't blur. */
  --moss:         #2F6B45;
  --moss-bg:      #DCEDE0;
  --crimson:      #A33A2E;
  --crimson-2:    #7E2C22;
  --crimson-bg:   #F4E0DA;

  /* Audit-flag amber — reserved per spec §3.3 (distinct from R2 refusal). */
  --amber:        #A07A1F;
  --amber-text:   #6F5212;
  --amber-bg:     #FDF3E1;
  --amber-border: #DEC18A;

  /* Typography */
  --serif: "Fraunces", "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:  "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --gutter: clamp(1rem, 2vw, 2rem);
  --rad: 4px;
  --rad-lg: 6px;
  --content-max: 1180px;
  --content-narrow: 760px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  background-image:
    radial-gradient(900px 480px at 92% -120px, rgba(55, 4, 255, 0.045), transparent 65%),
    radial-gradient(700px 380px at -120px 60%, rgba(55, 4, 255, 0.025), transparent 70%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11", "tnum" 0;
}

a { color: var(--violet); text-decoration: none; }
a:hover { color: var(--violet-2); text-decoration: underline; text-underline-offset: 3px; }

::selection { background: var(--violet); color: var(--paper); }

code, pre {
  font-family: var(--mono);
  font-size: 0.86em;
}
code {
  background: var(--paper-2);
  padding: 0.05em 0.35em;
  border-radius: 3px;
  color: var(--ink-2);
}

/* =========================================================================
   MASTHEAD / NAV
   ========================================================================= */
.masthead {
  background: var(--paper);
  position: sticky; top: 0; z-index: 30;
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
}
.masthead-inner {
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0.85rem var(--gutter);
  max-width: var(--content-max); margin: 0 auto;
}
.masthead-rule {
  height: 1px; background: var(--rule);
}
.brand {
  display: flex; align-items: baseline; gap: 0.6rem;
  text-decoration: none; color: var(--ink);
}
.brand:hover { color: var(--ink); text-decoration: none; }
.brand-mark {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1;
}

/* Compact masthead search (every page except home). */
.masthead-search {
  position: relative;
  flex: 1;
  max-width: 320px;
}
.masthead-search-input {
  width: 100%;
  padding: 0.4rem 0.7rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 3px;
  font: inherit;
  font-size: 0.85rem;
  color: var(--ink);
  outline: none;
  transition: border-color 0.12s, background 0.12s;
}
.masthead-search-input:focus {
  border-color: var(--ink);
  background: var(--paper);
}
.masthead-search-input::placeholder {
  color: var(--ink-4);
}
.masthead-typeahead {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 3px;
  box-shadow: 0 8px 24px -12px rgba(22,19,17,0.25);
  z-index: 40;
  max-height: 60vh;
  overflow-y: auto;
}
.masthead-typeahead .ta-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 0.7rem;
  padding: 0.5rem 0.7rem;
  align-items: baseline;
  border-bottom: 1px solid var(--paper-3);
  text-decoration: none;
  color: var(--ink);
  font-size: 0.85rem;
}
.masthead-typeahead .ta-row:last-child { border-bottom: 0; }
.masthead-typeahead .ta-row:hover,
.masthead-typeahead .ta-row.active {
  background: var(--paper-2);
  text-decoration: none;
}
.masthead-typeahead .ta-sym {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--ink);
}
.masthead-typeahead .ta-name {
  color: var(--ink-3);
  font-size: 0.82rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.masthead-typeahead .ta-empty {
  padding: 0.7rem;
  color: var(--ink-4);
  font-style: italic;
  font-size: 0.85rem;
}

.nav-links {
  margin-left: auto;
  display: flex;
  gap: 1.4rem;
  font-family: var(--sans);
  font-size: 0.85rem;
}
.nav-links a {
  color: var(--ink-2);
  text-decoration: none;
  padding: 0.2rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s, color 0.15s;
}
.nav-links a:hover {
  color: var(--ink);
  text-decoration: none;
}
.nav-links a.active {
  color: var(--ink);
  border-bottom-color: var(--violet);
  font-weight: 500;
}
.nav-tag {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--ink-4);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  margin-left: 0.15rem;
  font-weight: 400;
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.foot {
  border-top: 1px solid var(--rule);
  padding: 2rem var(--gutter);
  margin-top: 4rem;
  background: var(--paper);
}
.foot-inner {
  max-width: var(--content-max); margin: 0 auto;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.foot-mark {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
}
.foot-links { display: flex; gap: 1.2rem; font-size: 0.85rem; }
.foot-links a { color: var(--ink-3); }
.foot-links a:hover { color: var(--violet); }

/* =========================================================================
   BREADCRUMB (shared)
   ========================================================================= */
.crumbs {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  margin-bottom: 1.5rem;
}
.crumbs a { color: var(--ink-3); }
.crumbs a:hover { color: var(--violet); }
.crumbs .sep { margin: 0 0.45rem; opacity: 0.5; }
.crumbs .crumb-current { color: var(--ink); font-weight: 500; }

/* =========================================================================
   SHARED PAGE SHELL (stats, about, api)
   ========================================================================= */
.page-shell {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 2.5rem var(--gutter) 3rem;
}
.page-shell-narrow {
  max-width: var(--content-narrow);
}
.page-head {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1rem;
  margin-bottom: 2rem;
}
.page-h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.8rem, 3vw, 2.2rem);
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.1;
}
.page-lede {
  margin-top: 0.6rem;
  font-size: 0.95rem;
  color: var(--ink-2);
  max-width: 60ch;
  line-height: 1.55;
}

/* =========================================================================
   HOMEPAGE
   ========================================================================= */
.home-shell {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding: 4rem var(--gutter) 4rem;
}
.home-intro p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 64ch;
}
.home-intro p em {
  font-style: italic;
  color: var(--ink);
  font-weight: 500;
}
.home-intro-after {
  margin-top: 0.5rem;
}
.home-hero {
  margin: 2.5rem 0;
  position: relative;
}
.home-search { position: relative; display: block; }
.home-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  border-radius: 3px;
  transition: box-shadow 0.15s;
}
.home-search-wrap:focus-within {
  box-shadow: 0 0 0 3px rgba(55, 4, 255, 0.10);
}
.home-search-input {
  flex: 1;
  min-width: 0;
  padding: 0.95rem 1.1rem;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.home-search-input::placeholder {
  color: var(--ink-4);
  font-style: italic;
  font-weight: 300;
}
.home-search-meta {
  padding: 0 1.1rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-3);
  white-space: nowrap;
  border-left: 1px solid var(--rule);
}
.home-typeahead {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 4px);
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 3px;
  box-shadow: 0 8px 28px -12px rgba(22,19,17,0.3);
  z-index: 25;
  max-height: 60vh;
  overflow-y: auto;
}
.home-typeahead .ta-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1rem;
  padding: 0.7rem 1rem;
  align-items: baseline;
  border-bottom: 1px solid var(--paper-3);
  text-decoration: none;
  color: var(--ink);
}
.home-typeahead .ta-row:last-child { border-bottom: 0; }
.home-typeahead .ta-row:hover,
.home-typeahead .ta-row.active {
  background: var(--paper-2);
  text-decoration: none;
}
.home-typeahead .ta-sym {
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 600;
}
.home-typeahead .ta-name {
  color: var(--ink-2);
  font-size: 0.92rem;
  line-height: 1.3;
}
.home-typeahead .ta-snippet {
  font-size: 0.78rem;
  color: var(--ink-3);
  margin-top: 0.18rem;
  line-height: 1.4;
}
.home-typeahead .ta-empty {
  padding: 0.95rem 1rem;
  color: var(--ink-3);
  font-style: italic;
  font-size: 0.9rem;
}

/* "Try X·Y·Z" line — sits directly under the search hero so it reads as
   sample inputs you could type, not a featured-genes section. */
.home-examples {
  margin-top: 0.85rem;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.55rem;
  font-size: 0.95rem;
  color: var(--ink-2);
}
.home-examples-label {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: -0.005em;
}

/* Homepage stats strip — 4 cells under the intro paragraph. Sets up the
   "this is a real resource" first impression before the search box. */
.home-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  margin: 2rem 0 1rem;
  overflow: hidden;
}
.hs-cell {
  background: var(--paper);
  padding: 0.85rem 1rem;
}
.hs-num {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hs-lbl {
  margin-top: 0.4rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}

/* Homepage qualitative blurbs — three columns, small headings + body. */
.home-blurbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 2rem 0 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-soft);
}
.blurb { min-width: 0; }
.blurb-h {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 0.4rem;
}
.blurb-h-link {
  color: var(--violet);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-style: dotted;
}
.blurb-h-link:hover { color: var(--violet-2); }
.blurb p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}

/* Homepage pipeline diagram — four steps + arrows. CSS-only, scales down
   to a vertical stack on narrow viewports. */
.home-pipeline {
  margin: 2rem 0 0.5rem;
}
.pipe {
  list-style: none;
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}
.pipe-step {
  flex: 1 1 140px;
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-left: 2px solid var(--violet);
  padding: 0.7rem 0.85rem;
  border-radius: 3px;
}
.pipe-step-final {
  border-left-color: var(--violet-deep);
  background: var(--violet-bg);
}
.pipe-h {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.pipe-d {
  margin-top: 0.25rem;
  font-size: 0.74rem;
  color: var(--ink-3);
  line-height: 1.4;
}
.pipe-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  color: var(--violet);
  font-size: 1rem;
  flex: 0 0 auto;
  padding: 0 0.1rem;
  user-select: none;
}

/* (.home-meta retired — replaced by the stats strip's "Build" cell.) */
.home-example {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--violet);
}
.home-example:hover { text-decoration: underline; text-underline-offset: 3px; }
.home-example-sep {
  margin: 0 0.45rem;
  color: var(--ink-4);
}

/* =========================================================================
   GENE PAGE
   ========================================================================= */
.gene-shell {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 2rem var(--gutter) 3.5rem;
}

/* Header */
.gene-head {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1.1rem;
}
.gene-symbol {
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}
.gene-fullname {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  color: var(--ink-2);
  line-height: 1.4;
  margin-top: 0.55rem;
  max-width: 44rem;
}
.gene-fullname a {
  color: var(--ink-2);
  border-bottom: 1px dotted var(--ink-3);
  text-decoration: none;
}
.gene-fullname a:hover {
  color: var(--violet);
  border-bottom-color: var(--violet);
  text-decoration: none;
}
.gene-chips {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.85rem;
}
.gene-head-right {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-3);
  text-align: right;
}
.gene-head-right dl {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.25rem 0.8rem;
  justify-content: end;
}
.gene-head-right dt {
  text-transform: uppercase;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--ink-4);
}
.gene-head-right dd {
  color: var(--ink-2);
  font-size: 0.8rem;
}

/* Status badges + audit-flag chip */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.22rem 0.55rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: var(--paper);
}
.badge .pip {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
/* Round-2 status: green for corrected, red family for refusal per spec §3.3
   so the audit-flag amber chip stays visually distinct from R2 refusal. */
.badge-r2-corrected { color: var(--moss); background: var(--moss-bg); }
.badge-r2-refused   { color: var(--crimson); background: var(--crimson-bg); }
.badge-audit {
  color: var(--amber-text);
  background: var(--amber-bg);
  border-color: var(--amber-border);
}

/* Audit-flag banner */
.audit-flag {
  margin: 1.25rem 0 0;
  padding: 0.95rem 1.1rem;
  border-radius: 4px;
  border-left: 3px solid var(--amber);
  background: var(--amber-bg);
  font-size: 0.88rem;
  line-height: 1.55;
}
.audit-flag-h {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-bottom: 0.35rem;
  flex-wrap: wrap;
}
.audit-flag-tag {
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--amber-text);
}
.audit-flag-meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.audit-flag-body { margin: 0 0 0.4rem; color: var(--ink); }
.audit-flag-foot {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-3);
  font-style: italic;
}

/* Counts strip */
.counts-strip {
  margin: 1rem 0 1.5rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--rule-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-size: 0.82rem;
  color: var(--ink-3);
}
.count-cell { font-family: var(--sans); cursor: help; }
.count-cell strong {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--ink);
  margin-right: 0.2rem;
}

/* Two-col layout */
.gene-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 2.5rem;
  margin-top: 1rem;
}
@media (max-width: 1024px) {
  .gene-grid { grid-template-columns: 1fr; gap: 2rem; }
}
.gene-main { min-width: 0; }
.gene-rail { min-width: 0; }

/* Gene-section frame: collapsible <details> with a section heading + subscript. */
.gene-section { margin-top: 2rem; }
.gene-section-details {
  border-top: 1px solid var(--rule);
  padding-top: 1.1rem;
}
.gene-section-details > summary {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.5rem 1rem;
  cursor: pointer;
  user-select: none;
  position: relative;
}
.gene-section-details > summary::-webkit-details-marker { display: none; }
.gene-section-h {
  grid-column: 1;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
}
.gene-section-sub {
  grid-row: 2;
  grid-column: 1;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-3);
  letter-spacing: 0;
}
.gene-section-sub a { color: var(--violet); }
.gene-section-toggle {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  width: 1rem;
  height: 1rem;
  position: relative;
  flex-shrink: 0;
}
.gene-section-toggle::before,
.gene-section-toggle::after {
  content: '';
  position: absolute;
  background: var(--ink-3);
  top: 50%; left: 50%;
  transition: transform 0.18s;
}
.gene-section-toggle::before {
  width: 10px; height: 1px;
  transform: translate(-50%, -50%);
}
.gene-section-toggle::after {
  width: 1px; height: 10px;
  transform: translate(-50%, -50%);
}
.gene-section-details[open] > summary .gene-section-toggle::after {
  transform: translate(-50%, -50%) scaleY(0);
}
.gene-section-details:hover > summary .gene-section-h { color: var(--violet); }
.gene-section-body { margin-top: 1rem; }

.explore-link {
  font-family: var(--sans);
  color: var(--violet);
  font-size: 0.78rem;
}

/* Description */
.description-text {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  max-width: 70ch;
}

/* Inline PMID link (light surfaces) */
.pmid-link {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.8em;
  padding: 0.04em 0.34em;
  background: var(--violet-bg);
  color: var(--violet);
  border-radius: 3px;
  text-decoration: none;
  margin: 0 0.05em;
  transition: background 0.12s, color 0.12s;
}
.pmid-link:hover {
  background: var(--violet);
  color: var(--paper);
  text-decoration: none;
}

/* Mechanistic history */
.history {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--rule);
}
.history-step {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1.1rem;
  padding: 1rem 0 1rem 1.1rem;
  border-bottom: 1px solid var(--rule-soft);
  position: relative;
}
.history-step:last-child { border-bottom: 0; }
.history-step::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 1.25rem;
  width: 9px; height: 9px;
  background: var(--violet);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--paper);
}
.history-year {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.hy-num {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
}
.hy-conf {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.1rem 0.4rem;
  border-radius: 2px;
}
.hy-conf.c-high   { background: var(--moss-bg); color: var(--moss); }
.hy-conf.c-medium { background: var(--amber-bg); color: var(--amber); }
.hy-conf.c-low    { background: var(--crimson-bg); color: var(--crimson); }

.history-claim {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
.history-evidence {
  margin: 0.45rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.history-pmids {
  margin: 0.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.history-gaps {
  margin: 0.7rem 0 0;
  padding: 0.55rem 0.8rem;
  background: var(--amber-bg);
  border-left: 2px solid var(--amber);
  border-radius: 0 3px 3px 0;
}
.history-gaps ul {
  margin: 0.3rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ink-2);
}
.history-gaps li { margin: 0.15rem 0; }
.hy-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin-right: 0.4rem;
}

/* Forward-looking open questions */
.forward-questions {
  list-style: disc;
  padding-left: 1.3rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink);
}
.forward-questions li { margin: 0.4rem 0; }

/* Mechanism profile */
.mech-axes {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.mech-axis-head {
  font-family: var(--mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  margin-bottom: 0.45rem;
}
.mech-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.mech-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  font-size: 0.82rem;
  color: var(--ink);
}
.mech-chip .chip-id {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--ink-3);
  padding-right: 0.35rem;
  border-right: 1px solid var(--rule);
}
.mech-chip .chip-count {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--paper);
  background: var(--ink);
  padding: 0.05rem 0.3rem;
  border-radius: 999px;
}
.mech-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.mech-partner,
.mech-complex {
  font-family: var(--mono);
  font-size: 0.78rem;
  padding: 0.18rem 0.5rem;
  border-radius: 3px;
}
.mech-partner {
  background: var(--violet-bg);
  color: var(--violet-deep);
  text-decoration: none;
}
.mech-partner:hover {
  background: var(--violet-deep);
  color: var(--paper);
  text-decoration: none;
}
.mech-complex {
  background: var(--moss-bg);
  color: var(--moss);
}
.mech-empty {
  font-style: italic;
  color: var(--ink-4);
  font-size: 0.9rem;
}

/* Evidence (sortable) table */
.evidence-table,
.corpus-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.evidence-table thead th,
.corpus-table thead th {
  text-align: left;
  padding: 0.55rem 0.6rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.evidence-table thead th.th-sort {
  cursor: pointer;
  user-select: none;
}
.evidence-table thead th.th-sort:hover { color: var(--ink); }
.evidence-table thead th.th-sort.active { color: var(--ink); }
.evidence-table thead th.th-sort.asc::after { content: ' ↑'; opacity: 0.6; }
.evidence-table thead th.th-sort.desc::after { content: ' ↓'; opacity: 0.6; }
.evidence-table tbody td,
.corpus-table tbody td {
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--paper-3);
  vertical-align: top;
  line-height: 1.45;
}
.evidence-table tbody tr:hover,
.corpus-table tbody tr:hover {
  background: var(--paper-2);
}
.evidence-table tbody tr:last-child td,
.corpus-table tbody tr:last-child td { border-bottom: 0; }
.ev-year, .corpus-year {
  font-family: var(--mono);
  color: var(--ink-3);
  font-size: 0.78rem;
  white-space: nowrap;
}
.ev-finding { color: var(--ink); }
.ev-method, .ev-journal { color: var(--ink-2); font-size: 0.82rem; }
.conf-pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  white-space: nowrap;
}
.conf-pill.c-high   { background: var(--moss-bg); color: var(--moss); }
.conf-pill.c-medium { background: var(--amber-bg); color: var(--amber); }
.conf-pill.c-low    { background: var(--crimson-bg); color: var(--crimson); }
.conf-pill.c-unset  { background: var(--paper-2); color: var(--ink-4); }
.ev-pmids { display: flex; flex-wrap: wrap; gap: 0.2rem; }
.corpus-cite {
  font-family: var(--mono);
  font-weight: 600;
  text-align: right;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.corpus-cite.zero { color: var(--ink-4); opacity: 0.5; }
.corpus-table th.num { text-align: right; }
.corpus-pmid a {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--violet);
}
.corpus-title { color: var(--ink); }
.preprint-pip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--amber-bg);
  color: var(--amber);
  padding: 0.05rem 0.32rem;
  border-radius: 2px;
  margin-left: 0.4rem;
  vertical-align: 1px;
}

/* =========================================================================
   GENE-PAGE SIDE RAIL (UniProt / DepMap / OpenCell / HPA / AlphaFold / OMIM)
   ========================================================================= */
.rail-card {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--rad);
  padding: 0.95rem 1.05rem;
  margin-bottom: 0.85rem;
}
.rail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.55rem;
  border-bottom: 1px solid var(--paper-3);
  padding-bottom: 0.4rem;
}
.rail-h {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
}
.rail-source {
  font-family: var(--mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-4);
}
.rail-source a { color: var(--ink-4); }
.rail-source a:hover { color: var(--violet); }
.rail-row {
  display: flex;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--ink-2);
  padding: 0.18rem 0;
  align-items: baseline;
}
.rail-row .k {
  font-family: var(--mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  min-width: 70px;
}
.rail-row .v { flex: 1; min-width: 0; word-wrap: break-word; }
.rail-row .v.mono { font-family: var(--mono); font-size: 0.78rem; color: var(--ink); }
.rail-tag {
  display: inline-block;
  padding: 0.14rem 0.45rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  border-radius: 3px;
  margin: 0.08rem 0.16rem 0.08rem 0;
}
.tag-ess    { background: var(--crimson-bg); color: var(--crimson); }
.tag-sel    { background: var(--amber-bg); color: var(--amber); }
.tag-noness { background: var(--moss-bg); color: var(--moss); }
.tag-nodata { background: var(--paper-2); color: var(--ink-4); font-style: italic; }
.tag-loc    { background: var(--moss-bg); color: var(--moss); }
.tag-ppi    { background: var(--violet-bg); color: var(--violet-deep); }
.tag-spec   { background: var(--amber-bg); color: var(--amber); }
.tag-spec.spec-low { background: var(--moss-bg); color: var(--moss); }
.tag-spec.spec-none { background: var(--paper-2); color: var(--ink-4); }
.tag-omim   { background: var(--crimson-bg); color: var(--crimson); }
.uniprot-fn {
  font-family: var(--serif);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-2);
  padding-top: 0.3rem;
}
.rail-driving { margin-top: 0.3rem; font-size: 0.78rem; color: var(--ink-3); }
.rail-omim-title { font-size: 0.82rem; }
.rail-sources-list {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}

/* =========================================================================
   STATS PAGE
   ========================================================================= */
.headline-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-bottom: 2rem;
  border-radius: var(--rad);
  overflow: hidden;
}
.headline-cell {
  background: var(--paper);
  padding: 1.2rem 1.3rem;
}
.headline-num {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 2.5vw, 2.2rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.headline-label {
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}
.headline-detail {
  margin-top: 0.35rem;
  font-size: 0.82rem;
  color: var(--ink-2);
}

.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.data-panel {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--rad);
  padding: 1.3rem 1.4rem;
}
.data-panel-wide { margin-bottom: 1.5rem; }
.data-panel-h {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink);
  margin-bottom: 0.25rem;
  letter-spacing: -0.005em;
}
.data-panel-sub {
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin-bottom: 1rem;
}
.data-panel-foot {
  font-size: 0.78rem;
  color: var(--ink-3);
  margin-top: 0.9rem;
  line-height: 1.5;
}
.ink-crimson { color: var(--crimson); font-weight: 500; }

.kv-table { width: 100%; border-collapse: collapse; }
.kv-table td { padding: 0.4rem 0; border-bottom: 1px solid var(--paper-3); }
.kv-table tr:last-child td { border-bottom: 0; }
.kv-table .kv-label { color: var(--ink-2); font-size: 0.9rem; }
.kv-table .kv-num {
  text-align: right;
  font-family: var(--mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.kv-table .kv-pct { color: var(--ink-3); font-weight: 400; font-size: 0.78rem; }
.kv-table tr.kv-total td {
  border-top: 1px solid var(--rule);
  border-bottom: 0;
  padding-top: 0.6rem;
  font-weight: 600;
}

.bar-row {
  display: grid;
  grid-template-columns: 80px 1fr 130px;
  gap: 0.7rem;
  align-items: center;
  padding: 0.32rem 0;
  font-size: 0.82rem;
}
.bar-row .lbl { color: var(--ink-2); font-size: 0.85rem; }
.bar-row .pct {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.bar-track {
  height: 14px;
  background: var(--paper-2);
  border-radius: 2px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  background: var(--ink);
  transition: width 0.6s ease;
}
.bar-fill.high   { background: var(--moss); }
.bar-fill.medium { background: var(--amber); }
.bar-fill.low    { background: var(--crimson); }

.histogram {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 200px;
  padding: 0 0.2rem;
  border-bottom: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.hist-bar {
  flex: 1;
  background: var(--violet-deep);
  position: relative;
  min-width: 3px;
  transition: opacity 0.15s;
}
.hist-bar:hover { opacity: 0.7; }
.hist-bar:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 100%; left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper);
  padding: 0.25rem 0.5rem;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 0.7rem;
  white-space: nowrap;
  z-index: 5;
  margin-bottom: 4px;
}
.hist-bar-recent { background: var(--crimson); }
.hist-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 0.4rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--ink-3);
}

.ledger {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
}
.ledger-row {
  display: grid;
  grid-template-columns: 1.2fr auto 1.2fr;
  gap: 1rem;
  align-items: baseline;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--paper-3);
}
.ledger-row:last-child { border-bottom: 0; }
.ledger-row-total {
  background: var(--paper-2);
  font-weight: 600;
}
.ledger-label { color: var(--ink); font-size: 0.95rem; }
.ledger-num {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.ledger-detail { color: var(--ink-3); font-size: 0.8rem; }

/* =========================================================================
   ABOUT PAGE
   ========================================================================= */
.about-meta {
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  border-radius: var(--rad);
  padding: 1rem 1.2rem;
  margin-bottom: 2rem;
}
.about-meta dl {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0.4rem 1rem;
  font-size: 0.9rem;
}
.about-meta dt {
  font-family: var(--mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  align-self: center;
}
.about-meta dd { color: var(--ink); }

.about-section { margin-top: 2.5rem; }
.about-section-h {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--ink);
  margin-bottom: 1rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--rule);
  letter-spacing: -0.005em;
}

.pipeline-stage {
  margin-bottom: 1.6rem;
  padding-left: 1rem;
  border-left: 2px solid var(--rule);
}
.pipeline-stage-head {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.pipeline-stage-num {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--violet);
  padding: 0.18rem 0.5rem;
  border-radius: 3px;
}
.pipeline-stage-h {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.pipeline-stage-meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-4);
  text-transform: lowercase;
  letter-spacing: 0.04em;
  margin-left: auto;
}
.pipeline-stage > p { font-size: 0.92rem; color: var(--ink-2); margin-bottom: 0.7rem; line-height: 1.6; }

.pipeline-substage {
  margin: 0.7rem 0 0.5rem;
  padding: 0.5rem 0.85rem;
  background: var(--paper-2);
  border-radius: 3px;
}
.pipeline-substage-h {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--violet);
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.pipeline-substage > p {
  font-size: 0.88rem;
  color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: 0.45rem;
}

.prompt-block { margin-top: 0.4rem; }
.prompt-block > summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--violet);
  padding: 0.2rem 0;
  user-select: none;
}
.prompt-block > summary::-webkit-details-marker { display: none; }
.prompt-block > summary::before {
  content: '▸ ';
  color: var(--ink-3);
  font-size: 0.7rem;
  transition: transform 0.18s;
  display: inline-block;
}
.prompt-block[open] > summary::before { content: '▾ '; }
.prompt-block:hover > summary { color: var(--violet-2); }
.prompt-text {
  margin-top: 0.5rem;
  padding: 0.85rem 1rem;
  background: var(--violet-darker);
  color: rgba(245, 242, 255, 0.92);
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.55;
  border-radius: 3px;
  overflow-x: auto;
  white-space: pre-wrap;
  max-height: 480px;
  overflow-y: auto;
}

.rule-list {
  padding-left: 1.4rem;
  margin: 0.5rem 0 1rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.rule-list li { margin: 0.3rem 0; }

/* =========================================================================
   API PAGE
   ========================================================================= */
.api-meta {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 0.4rem 1rem;
  margin-bottom: 1.2rem;
  font-size: 0.92rem;
}
.api-meta dt {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  align-self: center;
}
.api-meta dd { color: var(--ink); }
.api-meta code { font-size: 0.85em; }

.api-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  overflow: hidden;
}
.api-table thead th {
  text-align: left;
  padding: 0.55rem 0.8rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
}
.api-table tbody td {
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid var(--paper-3);
  vertical-align: top;
}
.api-table tbody tr:last-child td { border-bottom: 0; }
.api-table tbody td:first-child { white-space: nowrap; }
.api-table code {
  background: transparent;
  color: var(--violet);
  font-size: 0.85em;
  padding: 0;
}
.api-table tbody tr:hover { background: var(--paper-2); }

.api-sub {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  margin: 1.2rem 0 0.5rem;
}
.code-block {
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.55;
  background: var(--violet-darker);
  color: rgba(245, 242, 255, 0.92);
  padding: 0.95rem 1.1rem;
  border-radius: 3px;
  overflow-x: auto;
  white-space: pre-wrap;
}
.tool-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0 0;
  padding: 0;
}
.tool-list li {
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  padding: 0.25rem 0.55rem;
}
.tool-list code {
  background: transparent;
  color: var(--ink);
  font-size: 0.82rem;
  padding: 0;
}

.setup-steps {
  margin: 0 0 1rem;
  padding-left: 1.4rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.setup-steps li { margin: 0.4rem 0; }
.setup-steps em { color: var(--ink); font-style: italic; font-weight: 500; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 900px) {
  .gene-head { grid-template-columns: 1fr; gap: 1rem; }
  .gene-head-right { text-align: left; }
  .gene-head-right dl { justify-content: start; }
  .headline-row { grid-template-columns: repeat(2, 1fr); }
  .home-stats { grid-template-columns: repeat(2, 1fr); }
  .home-blurbs { grid-template-columns: 1fr; gap: 1rem; }
  .ledger-row { grid-template-columns: 1fr; }
  .masthead-search { display: none; }
}
@media (max-width: 640px) {
  :root { --gutter: 1rem; }
  body { font-size: 14px; }
  .nav-links { gap: 0.85rem; font-size: 0.78rem; }
  .nav-tag { display: none; }
  .gene-symbol { font-size: 2.2rem; }
  .history-step { grid-template-columns: 80px 1fr; gap: 0.7rem; }
  .headline-row { grid-template-columns: 1fr; }
  .home-stats { grid-template-columns: 1fr; }
  .home-search-meta { display: none; }
  .home-search-input { font-size: 1.05rem; padding: 0.8rem 0.9rem; }
  .pipe-arrow { display: none; }       /* arrows lose meaning when steps stack */
  .pipe-step { flex: 1 1 100%; }       /* steps stack vertically */

  /* Tables: allow horizontal scroll instead of breaking the layout. */
  .api-table, .corpus-table, .evidence-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .api-table tbody td:first-child { white-space: nowrap; }

  /* Gene page: tighten counts strip + section heading layout. */
  .gene-section-details > summary {
    grid-template-columns: 1fr auto;
  }
  .counts-strip { gap: 0.85rem 1.2rem; font-size: 0.78rem; }

  /* About page: pipeline stages narrower padding. */
  .pipeline-stage { padding-left: 0.7rem; }
  .pipeline-stage-head { gap: 0.5rem; }
  .pipeline-stage-meta { margin-left: 0; }

  /* Stats: ledger row stacks. */
  .ledger-row { grid-template-columns: 1fr; gap: 0.4rem; padding: 0.7rem 0.85rem; }

  /* Footer: stack instead of justify-between. */
  .foot-inner { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
}