/* SwissIsoform v2 site styling — Tailwind handles layout; this file
   carries the things Tailwind can't (or shouldn't) express inline:
   evidence-grid cells, ORF-type chip colors, line-clamp helpers. */

/* ----- Landing hero + gene search ------------------------------------ */

.landing-hero { margin: 4px 0 30px; }
.landing-title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
  margin: 0 0 10px;
}
.landing-desc {
  font-size: 15px;
  line-height: 1.6;
  color: #475569;
  max-width: 730px;
  margin: 0 0 20px;
}
.landing-stats { display: flex; flex-wrap: wrap; gap: 30px; margin: 0 0 22px; }
.landing-stats .stat { display: flex; flex-direction: column; }
.stat-num { font-size: 22px; font-weight: 700; color: #0f172a; line-height: 1.1; }
.stat-lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #94a3b8;
  margin-top: 2px;
}
.landing-search { max-width: 520px; margin: 0 0 12px; }
#gene-search {
  width: 100%;
  font-size: 15px;
  padding: 11px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
#gene-search::placeholder { color: #94a3b8; }
#gene-search:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); }

/* ----- Functional query — UniProt keyword facet ---------------------- */
.kw-facet { position: relative; margin-top: 8px; }
#kw-input, #tag-input {
  width: 100%;
  font-size: 14px;
  padding: 9px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
#kw-input::placeholder, #tag-input::placeholder { color: #94a3b8; }
#kw-input:focus, #tag-input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); }

.kw-dropdown {
  position: absolute;
  z-index: 20;
  left: 0; right: 0;
  margin-top: 4px;
  max-height: 280px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  padding: 4px;
}
.kw-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #1e293b;
  font-size: 13px;
  cursor: pointer;
}
.kw-option:hover { background: #eef2ff; }
.kw-option-count { color: #94a3b8; font-size: 12px; font-variant-numeric: tabular-nums; }

.kw-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.kw-selected { display: flex; flex-wrap: wrap; gap: 6px; }
.kw-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px 3px 10px;
  border-radius: 999px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  color: #3730a3;
  font-size: 12.5px;
  font-weight: 600;
}
.kw-tag-x {
  border: 0;
  background: transparent;
  color: #6366f1;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.kw-tag-x:hover { color: #312e81; }
.kw-mode { font-size: 12.5px; color: #64748b; display: inline-flex; align-items: center; gap: 8px; }
.kw-mode label { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }
.kw-clear {
  border: 0; background: transparent; color: #64748b;
  font-size: 12.5px; cursor: pointer; text-decoration: underline;
}
.kw-clear:hover { color: #1e293b; }
.result-count { font-size: 12.5px; color: #64748b; margin: 8px 0 0; }

/* ----- Search + refine — two columns; controls fill the space to the
   right of the search bars (wraps below on narrow screens) -------------- */
.search-and-refine {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 28px;
  margin: 0 0 12px;
}
.search-and-refine .landing-search { margin: 0; flex: 0 1 520px; }
.refine-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 4px;
}
.refine-label { font-size: 12.5px; color: #64748b; margin-right: 2px; }
.cat-filter, .sort-control { display: inline-flex; align-items: center; gap: 6px; }
.cat-toggles { display: inline-flex; gap: 4px; }
.cat-toggle {
  width: 26px;
  height: 26px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #fff;
  color: #94a3b8;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.cat-toggle:hover { border-color: #a5b4fc; color: #6366f1; }
.cat-toggle.active {
  background: #4f46e5;
  border-color: #4f46e5;
  color: #fff;
}

#sort-mode {
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  cursor: pointer;
}
#sort-mode:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); }

/* Per-card keyword chips (clickable — adds the term to the filter). */
.gene-card-kw { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.kw-chip {
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.kw-chip:hover { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; }
.kw-toggle {
  border: 0;
  background: transparent;
  color: #6366f1;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 5px;
  cursor: pointer;
}
.kw-toggle:hover { text-decoration: underline; }

.landing-examples { font-size: 13px; color: #64748b; margin: 0; }
.landing-examples a { color: #4f46e5; text-decoration: none; }
.landing-examples a:hover { text-decoration: underline; }
#no-results { display: none; color: #64748b; font-size: 14px; padding: 24px 0; }

/* ----- Evidence grid cells ------------------------------------------- */

.ev-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.25rem;
  border-radius: 0.25rem;
  font-size: 11px;
  line-height: 1.1;
  text-align: center;
  cursor: help;
  border: 1px solid transparent;
  transition: filter 0.1s;
}

.ev-cell:hover {
  filter: brightness(0.95);
}

.ev-cell .ev-label {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.ev-cell .ev-state {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  margin-top: 1px;
}

.ev-true {
  background: #dcfce7;
  color: #14532d;
  border-color: #86efac;
}

.ev-false {
  background: #fee2e2;
  color: #7f1d1d;
  border-color: #fca5a5;
}

.ev-none {
  background: #f1f5f9;
  color: #475569;
  border-color: #e2e8f0;
}

/* ----- ORF-type chips ------------------------------------------------- */

.orf-chip {
  border: 1px solid currentColor;
  background: white;
}

.orf-extended    { color: #1e40af; background: #dbeafe; border-color: #93c5fd; }
.orf-truncated   { color: #9a3412; background: #ffedd5; border-color: #fdba74; }
.orf-uorf        { color: #6b21a8; background: #f3e8ff; border-color: #d8b4fe; }
.orf-internal    { color: #115e59; background: #ccfbf1; border-color: #5eead4; }
.orf-novel       { color: #831843; background: #fce7f3; border-color: #f9a8d4; }
.orf-annotated   { color: #1f2937; background: #e5e7eb; border-color: #d1d5db; }

/* ----- Line clamp (used on gene cards) ------------------------------- */

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ----- Mol* viewer frame --------------------------------------------- */

.molstar-frame {
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  overflow: hidden;
  background: #0f172a;
}

/* ── V2 isoform page ── */

.iso-shell { max-width: 1100px; margin: 0 auto; padding: 16px; }
.iso-head h1 { margin-bottom: 0; }
.iso-head-line { color: #444; font-size: 14px; line-height: 1.5; }
.iso-head-meta { color: #666; font-weight: 400; font-size: 16px; }
.iso-head-tis { margin-top: 4px; }

/* Layout: transcript graph (full row), then protein graph (full row), then
   dual-Mol* folding row whose internal grid is the 2-col side-by-side. */
.iso-panels {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0;
}
.iso-panel {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 12px;
  background: #fafbfc;
}
.iso-panel-h {
  font-size: 13px;
  font-weight: 600;
  color: #555;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.protein-caption { font-size: 12px; color: #64748b; line-height: 1.45; margin: 0 0 8px; }
.protein-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 0 0 4px; }
.domain-toggle {
  font-size: 12px;
  font-weight: 500;
  color: #334155;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 3px 10px;
  cursor: pointer;
}
.domain-toggle:hover { background: #e2e8f0; }
.iso-panel .plotly-graph { width: 100%; min-height: 280px; }
.iso-panel-folding .folding-placeholder { min-height: 280px; display: flex; align-items: center; justify-content: center; }
/* Dual Mol* lives below the two graph rows; its inner ``.folding-grid``
   is the 2-col side-by-side viewer layout. */
.iso-folding-row .folding-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px) {
  .iso-folding-row .folding-grid { grid-template-columns: 1fr; }
}

.synthesis {
  border-left: 4px solid #2563eb;
  padding: 8px 16px;
  background: #f8faff;
  margin: 16px 0;
}
.syn-headline { margin: 4px 0 8px; }
.syn-narrative { line-height: 1.55; }
.syn-findings { margin: 8px 0; padding-left: 22px; }
.syn-caveats { margin-top: 10px; color: #666; font-size: 13px; }

/* Keyed-dict synthesis layout (hypothesis → relevance → tags → confidence). */
.syn-block { margin: 0 0 12px; }
.syn-label {
  display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: #94a3b8; margin-bottom: 2px;
}
.syn-prose { line-height: 1.55; }
.syn-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.iso-tag-chip {
  font-size: 12px; font-weight: 600; color: #3730a3;
  background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 999px;
  padding: 2px 10px;
}
.syn-confidence { font-size: 13px; margin-top: 8px; }
.syn-confidence .syn-label { display: inline; }
.conf-high   { color: #15803d; }
.conf-medium { color: #b45309; }
.conf-low    { color: #64748b; }

/* AI-summary dropdown (pinned to the top of the isoform page) */
.synthesis-dd { padding: 0; overflow: hidden; border-radius: 4px; }
.synthesis-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-weight: 500;
  color: #1e3a8a;
  user-select: none;
}
.synthesis-summary::-webkit-details-marker { display: none; }
.synthesis-summary::after {
  content: "▾";
  margin-left: auto;
  color: #2563eb;
  transition: transform .15s ease;
}
.synthesis-dd[open] .synthesis-summary::after { transform: rotate(180deg); }
.synthesis-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: #2563eb;
  border-radius: 3px;
  padding: 2px 7px;
  flex-shrink: 0;
}
.synthesis-headline-inline {
  font-weight: 600;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.synthesis-dd[open] .synthesis-headline-inline { white-space: normal; }
.synthesis-body { padding: 0 16px 12px; }

/* 12 evidence tiles */
.evidence-tiles { margin-top: 24px; }
.evidence-tiles > h2 { margin-bottom: 8px; }
.tile-row { margin-top: 16px; }
.tile-row-h {
  font-size: 12px;
  font-weight: 600;
  color: #777;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* Thematic card groups (replaces the E/F axis sections). */
.tile-group { margin-top: 18px; }
.tile-group:first-of-type { margin-top: 12px; }
.tile-group-h {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tile-group-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: #eef2f7;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}
.tile-grid {
  display: grid;
  /* Fixed 3 columns → a group of 2–3 tiles fills a clean single row. */
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 640px) {
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
}
.evidence-tile {
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  transition: box-shadow 0.15s;
}
.evidence-tile:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.07); }
.evidence-tile.axis-E { border-left: 3px solid #2563eb; }
.evidence-tile.axis-F { border-left: 3px solid #16a34a; }

/* ── CDLMPS category boxes — one colored panel per category. Flag + all
   submodule cards are always visible; only the LLM reasoning collapses. ── */
.cat-box {
  --cat-accent: #64748b;
  --cat-accent-bg: #f1f5f9;
  margin-top: 16px;
  border: 1px solid #e5e7eb;
  border-left: 4px solid var(--cat-accent);
  border-radius: 8px;
  background: #fff;
  padding: 12px 14px 14px;
}
.cat-box:first-of-type { margin-top: 10px; }
.cat-C { --cat-accent: #059669; --cat-accent-bg: #ecfdf5; }  /* Conservation — emerald */
.cat-D { --cat-accent: #2563eb; --cat-accent-bg: #eff6ff; }  /* Detection — blue */
.cat-L { --cat-accent: #7c3aed; --cat-accent-bg: #f5f3ff; }  /* Localization — violet */
.cat-M { --cat-accent: #e11d48; --cat-accent-bg: #fff1f2; }  /* Mutation Landscape — rose */
.cat-P { --cat-accent: #d97706; --cat-accent-bg: #fffbeb; }  /* Predicted Structure — amber */
.cat-S { --cat-accent: #0891b2; --cat-accent-bg: #ecfeff; }  /* Structural Characteristics — cyan */

.cat-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cat-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--cat-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.cat-name { font-size: 14px; font-weight: 600; color: #1e293b; }

/* Verdict flag — semantic colors, independent of the category accent. */
.cat-flag {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.cat-flag::before { content: "\2691"; line-height: 1; }  /* ⚑ */
.cat-flag-interesting { color: #166534; background: #dcfce7; border-color: #bbf7d0; }
.cat-flag-neutral { color: #475569; background: #f1f5f9; border-color: #e2e8f0; }
.cat-flag-not_interesting { color: #991b1b; background: #fee2e2; border-color: #fecaca; }
.cat-flag-pending { color: #94a3b8; background: transparent; border: 1px dashed #cbd5e1; }
.cat-flag-pending::before { content: "\2690"; }  /* ⚐ hollow — not yet assessed */

/* CDLMPS lineup — the six category letters, replacing the old E/F badges.
   A letter "fires" (interesting / not_interesting) with a semantic colour;
   neutral + unscored stay quiet. Reuses the .cat-flag-* hue palette. */
.cdlmps {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.cdlmps-label {
  margin-right: 5px;
  font-family: inherit;
  font-weight: 600;
  color: #64748b;
  letter-spacing: normal;
}
.cdlmps-letter { color: #e2e8f0; }  /* default — faded, like pending */
.cdlmps-interesting { color: #16a34a; }      /* fires — vivid green */
.cdlmps-not_interesting { color: #dc2626; }  /* fires — vivid red */
.cdlmps-neutral { color: #cbd5e1; }          /* doesn't fire — greyed out */
.cdlmps-pending { color: #e2e8f0; }          /* not assessed — faintest */

/* Collapsible LLM reasoning — the only disclosure inside a category box. */
.cat-reasoning { margin: 0 0 10px; }
.cat-reasoning-summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cat-accent);
  user-select: none;
}
.cat-reasoning-summary::-webkit-details-marker { display: none; }
.cat-reasoning-summary::after { content: "\25be"; transition: transform 0.15s ease; }  /* ▾ */
.cat-reasoning[open] .cat-reasoning-summary::after { transform: rotate(180deg); }
.cat-reasoning-body {
  margin: 6px 0 0;
  padding: 8px 10px;
  background: var(--cat-accent-bg);
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #334155;
}
.cat-reasoning-empty { color: #94a3b8; font-style: italic; }

/* Tiles inside a category adopt its accent (overrides the blue/green axis). */
.cat-box .evidence-tile,
.cat-box .evidence-tile.axis-E,
.cat-box .evidence-tile.axis-F { border-left: 3px solid var(--cat-accent); }
.tile-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.tile-id { font-size: 11px; font-weight: 700; color: #666; }
.tile-label { font-size: 13px; font-weight: 500; color: #222; }
.tile-headline {
  padding: 4px 12px 10px;
  font-size: 12px;
  color: #444;
  font-family: ui-monospace, monospace;
}
/* Tagline: a muted metric label + the emphasized value on the tile face. */
.tile-headline-label { color: #8a94a6; font-weight: 500; }
.tile-headline-value { color: #1e293b; font-weight: 600; }
/* Tile body content lives in a <template>; this is belt-and-suspenders
   in case the markup is ever rendered inline. */
.tile-body { display: none; }

/* Evidence modal lightbox — single <dialog> shared by all 12 tiles. */
.evidence-modal {
  max-width: 720px;
  width: 90vw;
  max-height: 85vh;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 0;
  background: #fff;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
  overflow: hidden;
}
.evidence-modal::backdrop {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}
.evidence-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}
.evidence-modal-head h3 {
  margin: 0;
  font-size: 16px;
  color: #111827;
  font-weight: 600;
}
.evidence-modal-close {
  background: transparent;
  border: none;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: #6b7280;
  padding: 0 4px;
}
.evidence-modal-close:hover { color: #111827; }
.evidence-modal-body {
  padding: 18px 22px 24px;
  overflow-y: auto;
  max-height: calc(85vh - 60px);
  font-size: 13px;
  line-height: 1.5;
}

.tile-hint {
  background: #eff6ff;
  border-left: 3px solid #2563eb;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 0 0 12px;
  font-size: 12px;
  color: #1e3a8a;
}
.tile-hint-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2563eb;
  color: white;
  text-align: center;
  font-size: 11px;
  line-height: 16px;
  margin-right: 6px;
  vertical-align: middle;
  font-style: italic;
  font-weight: 700;
}
.evidence-tile.axis-F .tile-hint {
  background: #f0fdf4;
  border-left-color: #16a34a;
  color: #14532d;
}
.evidence-tile.axis-F .tile-hint-icon {
  background: #16a34a;
}
.tile-metrics summary, .tile-hits summary {
  cursor: pointer;
  font-weight: 600;
  color: #374151;
  margin-top: 8px;
  font-size: 12px;
}
.metrics-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 8px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}
.metrics-table th {
  text-align: left;
  padding: 6px 10px;
  color: #374151;
  font-weight: 500;
  width: 70%;
  border-bottom: 1px solid #f3f4f6;
}
.metrics-table td.metric-val {
  text-align: right;
  padding: 6px 10px;
  font-family: ui-monospace, monospace;
  color: #111827;
  font-weight: 500;
  border-bottom: 1px solid #f3f4f6;
}
.metrics-table tr:last-child th, .metrics-table tr:last-child td {
  border-bottom: none;
}
.metrics-table tr:nth-child(even) { background: #f9fafb; }
.hits-list { margin: 6px 0 0; padding-left: 18px; }
.hits-list li { padding: 2px 0; font-size: 11px; }

.variants-section { margin-top: 24px; }
.variants-scroll {
  max-height: 360px;
  overflow: auto;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
}
.variants-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: #fff;
}
.variants-table th {
  text-align: left;
  padding: 6px 10px;
  color: #374151;
  font-weight: 600;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}
.variants-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  box-shadow: inset 0 -1px 0 #e5e7eb;
}
.variants-table th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.variants-table th.sortable:hover { background: #f1f5f9; }
.variants-table th.sortable:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: -2px;
}
.variants-table th .sort-caret {
  display: inline-block;
  width: 10px;
  color: #cbd5e1;
  font-size: 9px;
}
.variants-table th .sort-caret::after { content: "\2195"; }  /* ↕ neutral */
.variants-table th[aria-sort="ascending"] .sort-caret {
  color: #334155;
}
.variants-table th[aria-sort="ascending"] .sort-caret::after { content: "\25B2"; }  /* ▲ */
.variants-table th[aria-sort="descending"] .sort-caret {
  color: #334155;
}
.variants-table th[aria-sort="descending"] .sort-caret::after { content: "\25BC"; }  /* ▼ */

/* SAE F8 card — reuses .variants-scroll / .variants-table / .sortable inside the modal. */
.evidence-modal-wide { max-width: 960px; }
.sae-modal-intro { font-size: 12px; color: #475569; line-height: 1.6; margin: 0 0 14px; }
.sae-about-link { color: #4f46e5; text-decoration: none; font-weight: 600; white-space: nowrap; }
.sae-about-link:hover { text-decoration: underline; }
.sae-part { margin-top: 18px; }
.sae-part:first-of-type { margin-top: 4px; }
.sae-part-h { font-size: 13px; font-weight: 700; color: #0f172a; margin: 0 0 2px; padding-bottom: 4px; border-bottom: 1px solid #e5e7eb; }
.sae-part-note { font-size: 11px; color: #6b7280; margin: 4px 0 10px; }
.sae-tbl-h { font-size: 12px; font-weight: 600; color: #334155; margin: 12px 0 4px; }
.sae-scroll { max-height: 240px; }
.variants-table td.sae-desc { color: #475569; max-width: 360px; }
.sae-foot { margin-top: 12px; }
/* Collapse each SAE table to its top 10 rows; the expander toggles `.collapsed`.
   :nth-child tracks live DOM order, so after a sort this shows the current top 10. */
.sae-table-block.collapsed .variants-scroll tbody tr:nth-child(n+11) { display: none; }
/* Generic / "unknown" features (grouped last by data.py) stay hidden while collapsed,
   even when a table has fewer than 10 non-generic rows. Revealed on "Show all". */
.sae-table-block.collapsed .variants-scroll tbody tr.sae-generic { display: none; }
.sae-expand-btn {
  margin-top: 6px;
  font-size: 11px;
  color: #4338ca;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 4px;
  padding: 3px 10px;
  cursor: pointer;
}
.sae-expand-btn:hover { background: #e0e7ff; }
.variants-table td {
  padding: 6px 10px;
  color: #111827;
  border-bottom: 1px solid #f3f4f6;
}
.variants-table td.var-num, .variants-table td.var-mono {
  font-family: ui-monospace, monospace;
}
.variants-table tr:last-child td { border-bottom: none; }
.variants-table tr.var-pathogenic { background: #fef2f2; }
.variants-table tr.var-pathogenic td { color: #991b1b; }
.variants-table a { color: #2563eb; text-decoration: none; }
.variants-table a:hover { text-decoration: underline; }
.var-count { font-size: 11px; color: #6b7280; margin-top: 6px; }

.var-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  color: #374151;
  background: #e5e7eb;
}
.var-badge-clinvar { background: #dbeafe; color: #1e40af; }
.var-badge-gnomad  { background: #dcfce7; color: #166534; }
.var-badge-cosmic  { background: #fae8ff; color: #86198f; }

.empty { color: #888; font-style: italic; }
.placeholder { color: #999; font-style: italic; padding: 8px 0; }
.crumbs { font-size: 13px; color: #666; margin-bottom: 8px; }
.crumbs a { color: #2563eb; text-decoration: none; }
.crumb-current { color: #000; font-weight: 600; }

/* ── Landing page isoform dropdown ── */
/* Per-isoform change tags shown inside the dropdown rows. */
.iso-tags-row { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; }
.iso-tag-chip.sm {
  font-size: 11px; font-weight: 600; color: #3730a3;
  background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 999px;
  padding: 0 7px; white-space: nowrap;
}

.iso-dropdown { margin-top: 8px; }
.iso-dropdown summary { cursor: pointer; list-style: none; padding: 4px 0; }
.iso-dropdown summary::-webkit-details-marker { display: none; }
.iso-dropdown summary::after { content: '▾'; margin-left: 6px; font-size: 11px; color: #666; }
.iso-dropdown[open] summary::after { content: '▴'; }
.iso-dropdown ul { list-style: none; padding-left: 8px; margin-top: 6px; border-left: 2px solid #ddd; }
.iso-dropdown li { padding: 4px 0; }
.iso-dropdown a { display: block; padding: 6px 8px; border-radius: 4px; font-size: 13px; color: #333; text-decoration: none; }
.iso-dropdown a:hover { background: #f0f4ff; color: #1d4ed8; }
.chip-orf { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; margin-right: 6px; }
.chip-orf.chip-extended { background: #dbeafe; color: #1e40af; }
.chip-orf.chip-truncated { background: #fee2e2; color: #991b1b; }
.chip-orf.chip-other { background: #f3f4f6; color: #374151; }
.iso-chip { font-size: 10px; padding: 1px 6px; border-radius: 3px; margin-right: 6px; font-weight: 600; }
.iso-chip.ext { background: #dbeafe; color: #1e40af; }
.iso-chip.trunc { background: #fee2e2; color: #991b1b; }
.iso-chip.other { background: #f3f4f6; color: #374151; }

/* ── Dual Mol* folding panel ── */
.folding-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.folding-half {
  border: 1px solid #e7e7e7;
  border-radius: 6px;
  padding: 8px;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.folding-caption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  margin-bottom: 6px;
}
.folding-title {
  font-weight: 600;
  color: #333;
}
.folding-diff-hint {
  color: #666;
  font-size: 10px;
}
.folding-diff-hint.diff-on {
  color: #b91c1c;
  font-weight: 600;
}
.molstar-viewer-mini {
  width: 100%;
  height: 260px;
  position: relative;
  background: #0f172a;
  border-radius: 4px;
  overflow: hidden;
}
.folding-download {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  color: #2563eb;
}
.folding-download:hover { text-decoration: underline; }
.folding-explore { color: #64748b; font-style: italic; }
.molstar-fallback {
  padding: 12px;
  font-size: 11px;
  color: #e2e8f0;
  background: #1e293b;
  text-align: center;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.molstar-fallback-error {
  color: #fecaca;
  background: #4c1d1d;
}
/* ── Single superimposed Mol* folding viewer ── */
.molstar-viewer-single {
  width: 100%;
  height: 460px;
  position: relative;
  background: #0f172a;
  border-radius: 4px;
  overflow: hidden;
}
.folding-legend {
  display: flex;
  gap: 1.5rem;
  font-size: .8rem;
  color: #475569;
  margin-top: .5rem;
}
.folding-legend .swatch {
  display: inline-block;
  width: .8rem;
  height: .8rem;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: .25rem;
}
.folding-legend .swatch.grey { background: #9ca3af; }
.folding-legend .swatch.red { background: #d62728; }

/* ── PAE (predicted aligned error) heatmaps ── */
.pae-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.pae-viewer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 120px;
}
.pae-figure { margin: 0; display: flex; flex-direction: column; align-items: center; }
.pae-canvas {
  width: 100%;
  max-width: 362px;
  height: auto;
  image-rendering: auto;
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  background: #fff;
}
.pae-caption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
  color: #64748b;
  margin-top: 4px;
  text-align: center;
}
.pae-legend { display: inline-flex; align-items: center; gap: .3rem; }
.pae-swatch {
  display: inline-block;
  width: 2.5rem;
  height: .55rem;
  border-radius: 2px;
  vertical-align: middle;
  /* mirrors the JS ramp: 0 Å dark green → ~white at PAE_MAX */
  background: linear-gradient(to right, rgb(0, 68, 27), rgb(90, 174, 97), rgb(247, 252, 245));
  border: 1px solid #cbd5e1;
}
.pae-empty, .pae-fallback {
  font-size: 11px;
  color: #94a3b8;
  padding: 24px 8px;
  text-align: center;
}
.pae-fallback { color: #b91c1c; }

/* ── Differential-region evidence panel ──────────────────────────── */
.diff-evidence { margin: 1.5rem 0; }
.diff-evidence h2 { margin-bottom: .15rem; }
.diff-evidence-sub { font-size: .85rem; color: #64748b; margin: 0 0 .75rem; }
.diff-tabs { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid #e2e8f0; margin-bottom: .75rem; }
.diff-tab {
  font-size: .8rem; padding: .35rem .7rem; border: none; background: transparent;
  color: #64748b; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.diff-tab:hover { color: #1e293b; }
.diff-tab.active { color: #4338ca; border-bottom-color: #4338ca; font-weight: 600; }
.diff-tabpanel { display: none; }
.diff-tabpanel.active { display: block; }
.diff-subtitle { font-size: .8rem; color: #64748b; margin: 0 0 .5rem; }
.diff-warn {
  font-size: .8rem; color: #92400e; background: #fffbeb; border: 1px solid #fde68a;
  border-radius: 6px; padding: .4rem .6rem; margin: 0 0 .6rem;
}
.diff-seq {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem;
  word-break: break-all; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px;
  padding: .4rem .6rem; margin: 0 0 .6rem; color: #334155;
}
.diff-metrics { border-collapse: collapse; width: 100%; max-width: 560px; }
.diff-metrics tr { border-bottom: 1px solid #f1f5f9; }
.diff-metrics .dm-label { padding: .3rem .6rem .3rem 0; color: #475569; font-size: .85rem; }
.diff-metrics .dm-val { padding: .3rem 0; text-align: right; font-variant-numeric: tabular-nums;
  font-weight: 600; color: #1e293b; font-size: .85rem; }
.diff-metrics.hl { background: #f5f3ff; border-radius: 6px; }
.diff-hits { list-style: none; padding: 0; margin: .6rem 0 0; display: flex; flex-direction: column; gap: .25rem; }
.diff-hits li { font-size: .82rem; color: #334155; }
.diff-hit-kind {
  display: inline-block; font-size: .68rem; text-transform: uppercase; letter-spacing: .03em;
  padding: .05rem .35rem; border-radius: 4px; margin-right: .4rem; color: #fff; font-weight: 600;
  /* Fallback background. The text is white, so a kind with no rule below would
     render white-on-white — invisible except when selected. */
  background: #64748b;
}
.diff-hit-domain { background: #2ca02c; }
/* Secondary structure. Unlike the badges above these are LIGHT fills, so each
   overrides the base class's white text with a dark tone of its own hue —
   reusing the site's existing light-chip palette (.ev-true / .ev-false /
   .orf-extended) rather than inventing new colors. */
.diff-hit-helix  { background: #fee2e2; color: #7f1d1d; }  /* alpha helix — light red */
.diff-hit-strand { background: #dcfce7; color: #14532d; }  /* beta strand — light green */
.diff-hit-motif { background: #9467bd; }
.diff-hit-peptide { background: #0891b2; }
.diff-hit-gained { background: #16a34a; }
.diff-hit-lost { background: #b45309; }
.diff-hit-validated { background: #0e7490; }
.diff-hit-span { color: #94a3b8; font-family: ui-monospace, monospace; font-size: .75rem; margin-left: .3rem; }

/* comparative biophysics (differential vs shared) */
.diff-compare { border-collapse: collapse; width: 100%; max-width: 620px; }
.diff-compare th { text-align: right; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em;
  color: #94a3b8; padding: .2rem .6rem .35rem; border-bottom: 1px solid #e2e8f0; }
.diff-compare th:first-child { text-align: left; }
.diff-compare td { padding: .28rem .6rem; font-size: .85rem; border-bottom: 1px solid #f1f5f9; }
.diff-compare .dm-label { color: #475569; }
.diff-compare .dm-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: #1e293b; }
.diff-compare .dm-shared { color: #94a3b8; font-weight: 500; }
.diff-compare .dm-ratio { color: #4338ca; }
.diff-compare tr.cmp-hot { background: #f5f3ff; }
.diff-compare tr.cmp-hot .dm-ratio { font-weight: 700; }
.diff-conf { font-size: .72rem; color: #64748b; background: #f1f5f9; border-radius: 4px;
  padding: .05rem .4rem; margin-left: .5rem; font-family: ui-monospace, monospace; }

/* per-criterion differential evidence, rendered inside the evidence modal */
.crit-evidence { margin: .75rem 0 0; }
.crit-about { display: flex; gap: .5rem; align-items: flex-start; font-size: .85rem; line-height: 1.45;
  color: #334155; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: .55rem .7rem; margin: 0 0 .9rem; }
.crit-about-icon { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: #6366f1; color: #fff; font-size: .72rem; font-weight: 700; line-height: 1.05rem;
  text-align: center; margin-top: .05rem; }
.crit-sec { margin: 0 0 1rem; }
.crit-sec.hl { background: #f5f3ff; border-radius: 8px; padding: .5rem .65rem; }
.crit-sec-h { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: #475569; margin: 0 0 .15rem; }
.crit-sec-sub { font-size: .78rem; color: #64748b; margin: 0 0 .45rem; }
.crit-warn { font-size: .8rem; color: #9a3412; background: #fff7ed; border: 1px solid #fed7aa;
  border-radius: 6px; padding: .35rem .55rem; margin: 0 0 .5rem; }
.crit-compare { border-collapse: collapse; width: 100%; max-width: 620px; margin-bottom: .35rem; }
.crit-compare th { text-align: right; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em;
  color: #94a3b8; padding: .15rem .55rem .3rem; border-bottom: 1px solid #e2e8f0; }
.crit-compare th:first-child { text-align: left; }
.crit-compare td { padding: .25rem .55rem; font-size: .84rem; border-bottom: 1px solid #f1f5f9; }
.crit-compare .dm-label { color: #475569; }
.crit-compare .dm-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: #1e293b; }
.crit-compare .dm-shared { color: #94a3b8; font-weight: 500; }
.crit-compare .dm-ratio { color: #4338ca; }
.crit-compare tr.cmp-hot { background: #f5f3ff; }
.crit-compare tr.cmp-hot .dm-ratio { font-weight: 700; }
.crit-metrics { border-collapse: collapse; width: 100%; max-width: 560px; }
.crit-metrics tr { border-bottom: 1px solid #f1f5f9; }
.crit-metrics .dm-label { padding: .26rem .6rem .26rem 0; color: #475569; font-size: .84rem; }
.crit-metrics .dm-val { padding: .26rem 0; text-align: right; font-variant-numeric: tabular-nums;
  font-weight: 600; color: #1e293b; font-size: .84rem; }
/* paired two-column listing (P3 secondary structure: unique | shared core) */
.crit-pairs { border-collapse: collapse; width: 100%; table-layout: fixed; margin-top: .4rem; }
.crit-pairs th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em;
  color: #94a3b8; padding: .15rem .55rem .3rem; border-bottom: 1px solid #e2e8f0; width: 50%; }
.crit-pairs td { padding: .28rem .55rem; font-size: .82rem; border-bottom: 1px solid #f1f5f9;
  vertical-align: top; }
.crit-pairs td.dm-shared { color: #94a3b8; }
.crit-pairs .sse-span { font-variant-numeric: tabular-nums; font-weight: 600; color: #1e293b;
  margin: 0 .35rem; }
.crit-pairs td.dm-shared .sse-span { color: #64748b; font-weight: 500; }
.crit-pairs .sse-detail { color: #64748b; }
.crit-pairs .sse-empty { color: #cbd5e1; }
.crit-hits { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-direction: column; gap: .25rem; }
.crit-hits li { font-size: .82rem; color: #334155; }
.crit-seq { font-family: ui-monospace, monospace; font-size: .72rem; color: #64748b; word-break: break-all;
  background: #f8fafc; border-radius: 6px; padding: .4rem .55rem; margin: .4rem 0 0; }
.evidence-sub { font-size: .8rem; font-weight: 400; color: #94a3b8; }

/* two-box modal layout: Comparison + Details */
.crit-box { border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; padding: .7rem .8rem;
  margin: .85rem 0 0; }
.crit-box-h { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: #94a3b8; margin: 0 0 .55rem; }
.crit-grp { margin: 0 0 .8rem; }
.crit-grp:last-child { margin-bottom: 0; }
.crit-grp.hl { background: #f5f3ff; border-radius: 8px; padding: .5rem .6rem; }
.crit-grp-t { font-size: .82rem; font-weight: 600; color: #334155; margin: 0 0 .1rem; }
.crit-grp-s { font-size: .76rem; color: #94a3b8; margin: 0 0 .4rem; }
/* glossary term: links to /about with a hover tip */
.metric-term { color: #475569; text-decoration: none; border-bottom: 1px dotted #cbd5e1; cursor: help; }
.metric-term:hover { color: #4338ca; border-bottom-color: #6366f1; }

/* variant LoF / impact flagging */
.variants-table tr.var-lof { background: #fff7ed; }
.impact-lof { display:inline-block; font-size:.7rem; font-weight:700; color:#fff; background:#ea580c;
  padding:.05rem .4rem; border-radius:4px; }
.impact-dmg { display:inline-block; font-size:.7rem; font-weight:600; color:#fff; background:#dc2626;
  padding:.05rem .4rem; border-radius:4px; }
.var-foot { font-size:.78rem; color:#64748b; margin:.5rem 0 0; max-width:680px; line-height:1.4; }

.variants-table .am-na { font-size:.78rem; color:#94a3b8; font-style:italic; cursor:help;
  border-bottom:1px dotted #cbd5e1; }

/* ---- About / glossary page ---- */
.about-shell { max-width: 880px; }
.about-head h1 { font-size: 1.6rem; font-weight: 700; margin: 0 0 .5rem; }
.about-lede { font-size: .95rem; line-height: 1.6; color: #334155; margin: 0 0 1rem; }
.about-sec { margin: 2rem 0; }
.about-sec > h2 { font-size: 1.15rem; font-weight: 700; color: #0f172a; margin: 0 0 .6rem;
  padding-bottom: .3rem; border-bottom: 1px solid #e2e8f0; }
.about-sec p { font-size: .9rem; line-height: 1.6; color: #334155; margin: 0 0 .6rem; }
.about-list { margin: .4rem 0 .6rem 1.1rem; padding: 0; }
.about-list li { font-size: .9rem; line-height: 1.6; color: #334155; margin-bottom: .45rem; }
.about-shell code { font-family: ui-monospace, monospace; font-size: .82em; background: #f1f5f9;
  border-radius: 4px; padding: .05rem .3rem; color: #0f172a; }
.about-axes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1rem; }
@media (max-width: 720px) { .about-axes { grid-template-columns: 1fr; } }
.about-axis-h { font-size: .95rem; font-weight: 700; margin: 0 0 .6rem; padding-left: .55rem; }
.about-axis-h.axis-E { border-left: 3px solid #2563eb; }
.about-axis-h.axis-F { border-left: 3px solid #16a34a; }
/* CDLMPS category grid on the About page. */
.about-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; margin-top: 1rem; }
@media (max-width: 720px) { .about-cats { grid-template-columns: 1fr; } }
.about-cat-h { font-size: .95rem; font-weight: 700; margin: 0 0 .4rem; display: flex; align-items: center; gap: .5rem; }
.about-cat-letter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4rem; height: 1.4rem; border-radius: 6px;
  font-family: ui-monospace, monospace; font-weight: 700; font-size: .78rem;
  color: #fff; background: #64748b;
}
.about-cat-h.cat-C .about-cat-letter { background: #2563eb; }
.about-cat-h.cat-D .about-cat-letter { background: #0891b2; }
.about-cat-h.cat-L .about-cat-letter { background: #7c3aed; }
.about-cat-h.cat-M .about-cat-letter { background: #dc2626; }
.about-cat-h.cat-P .about-cat-letter { background: #16a34a; }
.about-cat-h.cat-S .about-cat-letter { background: #ca8a04; }

.about-crit { margin: 0; }
.about-crit dt { font-size: .88rem; font-weight: 600; color: #0f172a; margin-top: .7rem; }
.about-crit dd { font-size: .84rem; line-height: 1.5; color: #475569; margin: .1rem 0 0; }
.about-code { display: inline-block; font-family: ui-monospace, monospace; font-size: .72rem;
  font-weight: 700; color: #fff; background: #64748b; border-radius: 4px; padding: .05rem .35rem;
  margin-right: .3rem; }
.about-glossary dt { scroll-margin-top: 5rem; font-size: .92rem; font-weight: 700; color: #0f172a; margin-top: 1rem;
  display: flex; align-items: center; gap: .5rem; }
.about-glossary dd { font-size: .88rem; line-height: 1.6; color: #475569; margin: .2rem 0 0; }
.about-warn-chip { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: #9a3412; background: #ffedd5; border: 1px solid #fed7aa; border-radius: 4px; padding: .05rem .4rem; }

/* References — hanging-indent numbered list, muted, with clickable DOIs. */
.about-refs { margin: .6rem 0 0; padding: 0; list-style: none; counter-reset: ref; }
.about-refs li {
  counter-increment: ref;
  position: relative;
  padding: .3rem 0 .3rem 2.4rem;
  font-size: .82rem;
  line-height: 1.55;
  color: #475569;
  border-top: 1px solid #f1f5f9;
  scroll-margin-top: 5rem;  /* clear any sticky header when jumped to */
}
.about-refs li:first-child { border-top: none; }
.about-refs li::before {
  content: counter(ref);
  position: absolute;
  left: 0;
  top: .3rem;
  width: 1.7rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #94a3b8;
}
.about-refs li:target { background: #eff6ff; border-radius: 4px; }
.about-refs em { color: #334155; }

/* Plain-language opener, then the jargon restatement. */
.about-lede-sub { color: #64748b; font-size: .88rem; }

/* Sticky in-page table of contents — a compact wrapping link bar that pins to the
   top of the viewport while you scroll the long metrics reference. */
.about-toc {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .75rem;
  margin: 0 0 1.5rem; padding: .55rem .75rem;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(6px);
  border: 1px solid #e2e8f0; border-radius: 8px;
}
.about-toc-h {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: #94a3b8;
}
.about-toc a {
  font-size: .8rem; color: #475569; text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 1px;
}
.about-toc a:hover { color: #4f46e5; border-bottom-color: #c7d2fe; }
@media (max-width: 720px) { .about-toc { position: static; } }

/* Collapsible glossary groups — each is a self-contained <summary> + <dl> unit,
   so the ~400-line metrics reference is scannable instead of a wall of text. */
.about-gloss { margin: .4rem 0 .9rem; border-top: 1px solid #f1f5f9; }
.about-gloss > summary {
  cursor: pointer; list-style: none; padding: .6rem 0 .6rem .55rem;
  scroll-margin-top: 4rem;
}
.about-gloss > summary::-webkit-details-marker { display: none; }
.about-gloss > summary::before {
  content: "▸"; display: inline-block; width: 1em; margin-left: -.2em;
  color: #94a3b8; transition: transform .12s ease;
}
.about-gloss[open] > summary::before { transform: rotate(90deg); }
.about-gloss > summary:hover { color: #4f46e5; }
.about-gloss > .about-glossary { margin-left: .55rem; padding-bottom: .5rem; }
.ref-doi { color: #2563eb; text-decoration: none; word-break: break-all; }
.ref-doi:hover { text-decoration: underline; }

/* Inline citation markers — e.g. [esmc] — jump to the bibliography entry. */
.ref-cite { color: #2563eb; text-decoration: none; font-weight: 600; white-space: nowrap; }
.ref-cite:hover { text-decoration: underline; }

/* --- Gene page (combined protein-residue figure + isoform cards) --- */
.gene-head-fn { color: #475569; font-size: 13px; line-height: 1.5; margin-top: 6px; }
.gene-head-fn a { color: #2563eb; text-decoration: none; }
.gene-head-fn a:hover { text-decoration: underline; }
.gene-protein-panel { margin-bottom: 20px; }
.gene-protein-panel .plotly-graph { width: 100%; min-height: 320px; }
.gene-isoforms { margin-top: 8px; }
.gene-iso-list { margin-top: 4px; }
.gene-iso-list ul { margin-bottom: 6px; }
.iso-group-h {
  font-size: 11px; font-weight: 600; color: #64748b;
  text-transform: uppercase; letter-spacing: 0.03em; margin: 12px 0 2px;
}

/* ===== Variant query (vq-) ============================================
   Landing-page drop zone + scan results. Lives here rather than in Tailwind
   utilities because tailwind.css is a committed, purged subset with no build
   step — a class not already in that file silently does nothing.
   ---------------------------------------------------------------------- */

/* ----- Landing layout: all grid filters left, drop zone right ---------- */
.vq-controls {
  flex: 0 1 520px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* .search-and-refine sets `flex: 0 1 520px` on the search block. Inside a
   COLUMN parent that basis becomes a height, which collapses the facets — so
   neutralise it. Three classes to outrank `.search-and-refine .landing-search`. */
.search-and-refine .vq-controls .landing-search {
  flex: 0 0 auto;
  width: 100%;
}
/* Category + Sort side by side now that they sit under the search rather than
   beside it; stacked they made this column tall and unbalanced. */
.vq-controls .refine-col {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding-top: 0;
}

/* ----- Drop zone -------------------------------------------------------
   Dashed-at-rest, solid-when-active, echoing .cat-flag-pending. No spinner:
   the codebase has no animation anywhere, and a ~0.5 s scan doesn't need one. */
.vq-drop {
  flex: 1 1 300px;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 16px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #fafbfc;
  transition: border-color 0.15s, background 0.15s;
}
.vq-drop.is-over,
.vq-drop.is-busy { border-style: solid; border-color: #6366f1; background: #eef2ff; }
.vq-drop.is-error { border-style: solid; border-color: #fca5a5; background: #fef2f2; }
.vq-drop-title {
  font-size: 13px; font-weight: 600; color: #334155;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.vq-drop-hint { font-size: 12.5px; color: #64748b; margin: 0; }
.vq-drop-hint code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }
.vq-drop-btn {
  display: inline-block;
  font-size: 12.5px;
  padding: 4px 10px;
  border: 1px solid #c7d2fe;
  border-radius: 4px;
  background: #eef2ff;
  color: #3730a3;
  cursor: pointer;
}
.vq-drop-btn:hover { background: #e0e7ff; }
.vq-drop-status { font-size: 12.5px; color: #475569; margin: 0; min-height: 1.2em; }
.vq-drop.is-error .vq-drop-status { color: #b91c1c; }
.vq-drop-note { font-size: 11px; color: #94a3b8; margin: 0; }

/* ----- Results page ---------------------------------------------------- */
.vq-shell { max-width: 980px; }
.vq-head h1 { font-size: 1.6rem; font-weight: 700; margin: 0 0 4px; }
.vq-sub { font-size: 12.5px; color: #64748b; margin: 0 0 2px; }
.vq-sub code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* The funnel is the point of the page when there are no hits: 0.08% of real
   somatic variants land in an ORF, so "nothing found" is the normal answer and
   has to show its working. */
.vq-funnel { display: flex; flex-wrap: wrap; gap: 0; margin: 14px 0 4px; }
.vq-step {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 16px 8px 0; margin-right: 16px;
  border-right: 1px solid #e2e8f0;
}
.vq-step:last-child { border-right: 0; margin-right: 0; }
.vq-step-num { font-size: 1.15rem; font-weight: 700; color: #1e293b; }
.vq-step-lbl { font-size: 11px; color: #64748b; text-transform: uppercase; letter-spacing: 0.03em; }
.vq-step.is-hit .vq-step-num { color: #3730a3; }
.vq-drops { font-size: 12px; color: #94a3b8; margin: 2px 0 0; }

.vq-genes { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 0; }
.vq-gene {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
  padding: 8px 12px;
  border: 1px solid #e2e8f0; border-radius: 6px; background: #fff;
}
.vq-gene-name { font-weight: 600; font-size: 14px; }
.vq-gene-meta { font-size: 12px; color: #64748b; }
.vq-gene-nopage { font-size: 11.5px; color: #94a3b8; font-style: italic; }
.vq-raw { margin-top: 20px; font-size: 12px; }
.vq-raw summary { cursor: pointer; color: #64748b; }
.vq-raw pre {
  margin: 8px 0 0; padding: 10px 12px; overflow: auto; max-height: 420px;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
}