/*! Virus Atlas — © 2026 Saranga Sumathipala. All rights reserved.
 *  Proprietary. No licence granted; see LICENSE. */
/* ======================================================================
   Virus Atlas — design system
   Materials, depth and motion in the idiom of modern desktop software:
   Apple's vibrancy (translucent, blurred, saturated surfaces over a tinted
   backdrop) and Microsoft Fluent's acrylic + reveal highlight.
   The type ramp is the host system's own, so this renders in SF Pro on macOS
   and Segoe UI Variable on Windows.
   ====================================================================== */

:root {
  color-scheme: dark;

  /* --- type ------------------------------------------------------------ */
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text",
             "Segoe UI Variable Text", "Segoe UI", system-ui, Inter, sans-serif;
  --font-display: ui-serif, "New York", Newsreader, Georgia, serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Code",
          "JetBrains Mono", Menlo, monospace;
  --serif: var(--font-display);

  /* --- palette --------------------------------------------------------- */
  --bg: #0a0e1a;
  --bg-2: #121829;
  --tint: 215;                       /* hue the whole UI is tinted toward */

  --text: #eef1f8;
  --text-dim: #a9b2c7;
  --text-faint: #717b93;

  --accent: #4f9bff;
  --accent-2: #a87bff;
  --accent-soft: rgba(79, 155, 255, .16);
  --accent-line: rgba(79, 155, 255, .42);

  /* --- materials (vibrancy / acrylic) ---------------------------------- */
  --mat-thick: rgba(23, 30, 48, .72);
  --mat-thin: rgba(26, 34, 54, .82);
  --mat-blur: saturate(180%) blur(28px);
  --surface: rgba(255, 255, 255, .035);
  --surface-2: rgba(255, 255, 255, .06);
  --surface-3: rgba(255, 255, 255, .09);

  --border: rgba(255, 255, 255, .09);
  --border-strong: rgba(255, 255, 255, .17);
  --edge-light: rgba(255, 255, 255, .10);   /* top inner highlight */

  /* --- evidence tiers --------------------------------------------------- */
  --t-established: #ff6b6b;
  --t-probable: #ffa94d;
  --t-possible: #ffd43b;
  --t-animal: #4dd4ac;
  --t-none: #5b6478;
  --t-unknown: #4a5160;

  /* --- shape & depth ---------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --radius: var(--r-lg);
  --radius-sm: var(--r-sm);

  --shadow-1: 0 1px 2px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.20);
  --shadow-2: 0 2px 6px rgba(0,0,0,.30), 0 10px 28px rgba(0,0,0,.32);
  --shadow-3: 0 8px 20px rgba(0,0,0,.36), 0 30px 70px rgba(0,0,0,.46);
  --shadow: var(--shadow-2);

  /* --- motion ----------------------------------------------------------- */
  --ease-spring: cubic-bezier(.22, 1, .36, 1);
  --ease-std: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 120ms;
  --t-mid: 220ms;
  --t-slow: 380ms;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eef1f7;
  --bg-2: #f7f9fc;
  --text: #0f1626;
  --text-dim: #4a5368;
  --text-faint: #78839a;
  --accent: #0a64da;
  --accent-2: #7a44d8;
  --accent-soft: rgba(10, 100, 218, .11);
  --accent-line: rgba(10, 100, 218, .35);

  --mat-thick: rgba(255, 255, 255, .72);
  --mat-thin: rgba(255, 255, 255, .86);
  --surface: rgba(15, 22, 38, .025);
  --surface-2: rgba(15, 22, 38, .05);
  --surface-3: rgba(15, 22, 38, .08);
  --border: rgba(15, 22, 38, .10);
  --border-strong: rgba(15, 22, 38, .20);
  --edge-light: rgba(255, 255, 255, .80);

  --t-established: #d12f2f;
  --t-probable: #b85f05;
  --t-possible: #8a6d00;
  --t-animal: #0c7f61;
  --t-none: #8c95a8;
  --t-unknown: #b9c0cc;

  --shadow-1: 0 1px 2px rgba(16,24,48,.07), 0 2px 6px rgba(16,24,48,.06);
  --shadow-2: 0 2px 6px rgba(16,24,48,.08), 0 10px 26px rgba(16,24,48,.09);
  --shadow-3: 0 10px 24px rgba(16,24,48,.12), 0 30px 64px rgba(16,24,48,.14);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Mica-like backdrop: large, slow, very low-contrast colour fields that give
   the translucent panels something to pick up. Fixed, so panels feel like
   glass over a desktop rather than over scrolling content. */
body::before {
  content: "";
  position: fixed;
  inset: -20vmax;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42vmax 38vmax at 12% -6%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 62%),
    radial-gradient(40vmax 34vmax at 92% 2%, color-mix(in srgb, var(--accent-2) 20%, transparent), transparent 60%),
    radial-gradient(46vmax 40vmax at 78% 98%, color-mix(in srgb, var(--t-animal) 12%, transparent), transparent 64%),
    radial-gradient(38vmax 32vmax at 4% 86%, color-mix(in srgb, var(--t-probable) 10%, transparent), transparent 62%);
  filter: blur(16px);
  opacity: .9;
  animation: drift 48s var(--ease-std) infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-2.5%, 1.6%, 0) scale(1.06); }
}

h1, h2, h3, h4 { margin: 0; line-height: 1.22; font-weight: 600; letter-spacing: -.012em; }
p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

::selection { background: var(--accent-soft); }

/* Scrollbars, trimmed to match the chrome. */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 99px;
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: content-box; }

/* ---------------------------------------------------------------- material */

.material {
  background: var(--mat-thick);
  -webkit-backdrop-filter: var(--mat-blur);
  backdrop-filter: var(--mat-blur);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-2), inset 0 1px 0 var(--edge-light);
}

/* Fluent "reveal": a soft highlight that follows the pointer across a
   surface, driven by --mx/--my which app.js updates on pointermove. */
.reveal { position: relative; isolation: isolate; }
.reveal::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease-std);
  background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%),
              color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
}
.reveal:hover::before { opacity: 1; }

/* ----------------------------------------------------------------- topbar */

.topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 18px;
  padding: 11px 20px;
  background: var(--mat-thick);
  -webkit-backdrop-filter: var(--mat-blur);
  backdrop-filter: var(--mat-blur);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--edge-light) inset, var(--shadow-1);
}

.brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand-mark { width: 32px; height: 32px; flex: none; overflow: visible; }
.brand-mark .capsid {
  fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5;
  transform-origin: 20px 20px;
  animation: pulse 5.5s var(--ease-std) infinite;
}
.brand-mark .core { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; }
.brand-mark .spikes path {
  stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; fill: none; opacity: .55;
}
.brand-mark .spike-heads circle {
  fill: var(--accent); opacity: .85;
  transform-origin: 20px 20px;
  animation: spin 26s linear infinite;
}
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes spin { to { transform: rotate(360deg); } }

.brand-text h1 { font-size: 15px; letter-spacing: -.02em; }
.brand-text p { font-size: 11px; color: var(--text-faint); }

/* ----------------------------------------------------------------- search */

.search { position: relative; flex: 1 1 auto; max-width: 680px; }
.search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; pointer-events: none;
  fill: none; stroke: var(--text-faint); stroke-width: 1.8; stroke-linecap: round;
  transition: stroke var(--t-fast) var(--ease-std);
}
.search:focus-within .search-icon { stroke: var(--accent); }

#q {
  width: 100%;
  padding: 9px 42px 9px 36px;
  font: inherit; font-size: 13px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  transition: background var(--t-mid) var(--ease-std),
              border-color var(--t-mid) var(--ease-std),
              box-shadow var(--t-mid) var(--ease-std);
}
#q::placeholder { color: var(--text-faint); }
#q:focus {
  background: var(--surface-3);
  border-color: var(--accent-line);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
#q::-webkit-search-cancel-button { filter: grayscale(1) opacity(.5); }

.search kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 10px; color: var(--text-faint);
  padding: 2px 6px; border: 1px solid var(--border); border-radius: 5px;
  background: var(--surface);
}

.results {
  position: absolute; left: 0; right: 0; top: calc(100% + 9px);
  max-height: min(66vh, 560px); overflow-y: auto;
  padding: 6px;
  background: var(--mat-thin);
  -webkit-backdrop-filter: var(--mat-blur);
  backdrop-filter: var(--mat-blur);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3), inset 0 1px 0 var(--edge-light);
  z-index: 70;
  transform-origin: top center;
  animation: pop var(--t-mid) var(--ease-spring);
}
@keyframes pop {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.result {
  display: grid; grid-template-columns: 10px 1fr auto; gap: 11px;
  align-items: start; width: 100%; text-align: left;
  padding: 8px 10px; border: 0; border-radius: var(--r-sm);
  background: transparent; cursor: pointer;
  transition: background var(--t-fast) var(--ease-std);
}
.result:hover, .result.active { background: var(--surface-2); }
.result.active { box-shadow: inset 0 0 0 1px var(--accent-line); }
.result .dot { margin-top: 6px; }
.result-name { font-weight: 550; font-size: 13px; }
.result-name em { font-style: normal; color: var(--accent); font-weight: 680; }
.result-sub { font-size: 11.5px; color: var(--text-faint); margin-top: 1px; }
.result-rank {
  font-family: var(--mono); font-size: 9.5px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-faint); white-space: nowrap; padding-top: 3px;
}
.results-empty, .results-note { padding: 13px; font-size: 12.5px; color: var(--text-faint); }

/* ---------------------------------------------------------------- buttons */

.topbar-actions { display: flex; gap: 7px; flex: 0 0 auto; }

.btn {
  position: relative;
  padding: 8px 13px;
  font-size: 12.5px; font-weight: 550;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--edge-light);
  transition: background var(--t-fast) var(--ease-std),
              border-color var(--t-fast) var(--ease-std),
              transform var(--t-fast) var(--ease-spring);
}
.btn:hover { background: var(--surface-3); border-color: var(--border-strong); }
.btn:active { transform: scale(.96); }
.btn[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}
.btn-icon { padding: 8px; display: grid; place-items: center; }
.btn-icon svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round;
}

.chip {
  padding: 5px 11px; font-size: 11.5px; font-weight: 500;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 99px; cursor: pointer; white-space: nowrap;
  transition: all var(--t-fast) var(--ease-std);
}
.chip:hover { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }
.chip:active { transform: scale(.96); }

.link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--accent); font-weight: 550; text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px;
}

/* ----------------------------------------------------------------- layout */

.layout {
  display: grid;
  grid-template-columns: minmax(300px, .82fr) minmax(460px, 1.3fr);
  gap: 16px;
  padding: 16px 20px 8px;
  align-items: start;
  max-width: 1860px;
  margin: 0 auto;
  transition: grid-template-columns var(--t-slow) var(--ease-out);
}
/* Exactly one panel owns the left column, chosen by data-view. Previously
   each panel had its own rule hiding the others, which let a panel open on
   top of another with no way back. */
.layout[data-view="radial"] { grid-template-columns: minmax(420px, 1.25fr) minmax(400px, .95fr); }
.layout[data-view="travel"] { grid-template-columns: minmax(400px, 1.1fr) minmax(400px, 1fr); }
.layout[data-view="dx"] { grid-template-columns: minmax(400px, 1.1fr) minmax(400px, 1fr); }
.layout[data-view="radial"] .tree-panel,
.layout[data-view="travel"] .tree-panel,
.layout[data-view="dx"] .tree-panel { display: none; }
.layout.tree-hidden { grid-template-columns: 1fr; }
.layout.tree-hidden .tree-panel { display: none; }

.panel {
  background: var(--mat-thick);
  -webkit-backdrop-filter: var(--mat-blur);
  backdrop-filter: var(--mat-blur);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2), inset 0 1px 0 var(--edge-light);
  overflow: hidden;
  animation: rise var(--t-slow) var(--ease-out) both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.panel-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-2), transparent);
}
.panel-head h2 { font-size: 12.5px; letter-spacing: .005em; }
.panel-head .sub { font-size: 11.5px; color: var(--text-faint); margin-top: 3px; }

/* ------------------------------------------------------------------- tree */

.tree-tools {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 9px 13px; border-bottom: 1px solid var(--border);
}

.tree {
  height: calc(100vh - 268px);
  min-height: 420px;
  overflow: auto;
  padding: 7px 6px 18px;
}

.tree-node { position: relative; }

.tree-row {
  display: grid;
  grid-template-columns: 18px 10px 1fr auto;
  gap: 8px; align-items: center;
  width: 100%; padding: 5px 9px 5px 0;
  border: 0; border-radius: var(--r-sm);
  background: transparent; cursor: pointer; text-align: left;
  transition: background var(--t-fast) var(--ease-std);
}
.tree-row:hover { background: var(--surface-2); }
.tree-row.selected {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 26%, transparent),
    color-mix(in srgb, var(--accent) 13%, transparent));
  box-shadow: inset 0 0 0 1px var(--accent-line);
  color: #fff;
}
:root[data-theme="light"] .tree-row.selected { color: var(--text); }

.twist { width: 18px; height: 18px; display: grid; place-items: center; color: var(--text-faint); }
.twist svg { width: 9px; height: 9px; fill: currentColor; transition: transform var(--t-mid) var(--ease-spring); }
.tree-node.open > .tree-row .twist svg { transform: rotate(90deg); }
.twist.leaf svg { display: none; }
.twist.leaf::after {
  content: ""; width: 3px; height: 3px; border-radius: 50%;
  background: var(--text-faint); opacity: .5;
}

.dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--t-none);
  box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--t-none) 20%, transparent);
}
.dot[data-tier="established"] { background: var(--t-established); box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--t-established) 24%, transparent); }
.dot[data-tier="probable"]    { background: var(--t-probable);    box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--t-probable) 24%, transparent); }
.dot[data-tier="possible"]    { background: var(--t-possible);    box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--t-possible) 24%, transparent); }
.dot[data-tier="animal-only"] { background: var(--t-animal);      box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--t-animal) 24%, transparent); }
.dot[data-tier="unassessed"] {
  background: transparent;
  border: 1.5px dashed var(--t-unknown);
  box-shadow: none;
}

.tree-label { min-width: 0; }
.tree-name { font-size: 13px; font-weight: 450; }
.tree-name .binomial, .binomial { font-style: italic; }
.tree-common { font-size: 11px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-row[data-rank="family"] .tree-name,
.tree-row[data-rank="genus"] .tree-name { font-weight: 600; }
.tree-row[data-rank="serogroup"] .tree-name { color: var(--accent); font-weight: 600; }
.tree-row[data-rank="clade"] .tree-name { font-weight: 550; }

.row-right { display: flex; align-items: center; gap: 8px; }
.rank-tag {
  font-family: var(--mono); font-size: 9px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-faint);
  padding: 2px 6px; border: 1px solid var(--border); border-radius: 5px; white-space: nowrap;
}
.tree-row[data-rank="serogroup"] .rank-tag,
.tree-row[data-rank="clade"] .rank-tag { color: var(--accent); border-color: var(--accent-line); }
.count { font-family: var(--mono); font-size: 10px; color: var(--text-faint); }

.kids { display: none; margin-left: 15px; border-left: 1px solid var(--border); padding-left: 3px; }
.tree-node.open > .kids { display: block; animation: unfold var(--t-mid) var(--ease-out); }
@keyframes unfold { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.loading-kid { padding: 5px 0 5px 28px; font-size: 11.5px; color: var(--text-faint); }

.legend {
  display: flex; flex-wrap: wrap; gap: 6px 15px;
  padding: 10px 15px; border-top: 1px solid var(--border);
  background: var(--surface);
}
.legend-item { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-dim); }
.legend-item b { font-family: var(--mono); font-size: 10.5px; color: var(--text); font-weight: 500; }

/* ---------------------------------------------------------------- article */

.side {
  position: sticky; top: 76px;
  height: calc(100vh - 100px);
  overflow-y: auto;
  scroll-behavior: smooth;
}

.side-empty { padding: 64px 38px; text-align: center; }
.side-empty h3 { font-family: var(--serif); font-size: 21px; margin-bottom: 11px; }
.side-empty p { font-size: 13.5px; color: var(--text-dim); max-width: 46ch; margin: 0 auto 12px; }
.side-empty .hint { font-size: 12.5px; color: var(--text-faint); }

.detail { padding: 0 0 48px; animation: fadeUp var(--t-slow) var(--ease-out); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  font-size: 11px; color: var(--text-faint); margin-bottom: 12px;
}
.crumbs button {
  background: none; border: 0; padding: 2px 5px; cursor: pointer;
  color: var(--text-faint); border-radius: 6px;
  transition: all var(--t-fast) var(--ease-std);
}
.crumbs button:hover { color: var(--accent); background: var(--accent-soft); }
.crumbs .sep { opacity: .4; }
.crumbs .crumb-rank {
  font-family: var(--mono); font-size: 8.5px; text-transform: uppercase;
  letter-spacing: .07em; opacity: .55; margin-right: 2px;
}

.detail-common { font-size: 14px; color: var(--text-dim); font-weight: 450; }

.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; font-size: 11.5px; font-weight: 550;
  border-radius: 99px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-dim);
  box-shadow: inset 0 1px 0 var(--edge-light);
}
.badge .dot { width: 7px; height: 7px; box-shadow: none; }
.badge[data-tier="established"] { color: var(--t-established); border-color: color-mix(in srgb, var(--t-established) 42%, transparent); background: color-mix(in srgb, var(--t-established) 13%, transparent); }
.badge[data-tier="probable"]    { color: var(--t-probable);    border-color: color-mix(in srgb, var(--t-probable) 42%, transparent);    background: color-mix(in srgb, var(--t-probable) 13%, transparent); }
.badge[data-tier="possible"]    { color: var(--t-possible);    border-color: color-mix(in srgb, var(--t-possible) 45%, transparent);    background: color-mix(in srgb, var(--t-possible) 13%, transparent); }
.badge[data-tier="animal-only"] { color: var(--t-animal);      border-color: color-mix(in srgb, var(--t-animal) 42%, transparent);      background: color-mix(in srgb, var(--t-animal) 13%, transparent); }
.badge[data-tier="unassessed"] {
  color: var(--text-faint);
  border-style: dashed;
  border-color: color-mix(in srgb, var(--t-unknown) 55%, transparent);
  background: none;
}
.badge.accent { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }

.tier-note {
  font-size: 12px; color: var(--text-dim);
  padding: 9px 12px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-sm);
}

.headline { font-family: var(--serif); font-size: 16px; line-height: 1.52; color: var(--text); }

/* tier distribution bar */
.dist-bar {
  display: flex; height: 8px; border-radius: 99px; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--border);
}
.dist-bar span { display: block; transition: width var(--t-slow) var(--ease-out); }
.dist-bar span[data-tier="established"] { background: var(--t-established); }
.dist-bar span[data-tier="probable"] { background: var(--t-probable); }
.dist-bar span[data-tier="possible"] { background: var(--t-possible); }
.dist-bar span[data-tier="animal-only"] { background: var(--t-animal); }
.dist-bar span[data-tier="no-evidence"] { background: var(--t-none); opacity: .5; }
.dist-bar span[data-tier="unassessed"] {
  background: repeating-linear-gradient(135deg,
    var(--t-unknown) 0 3px, transparent 3px 6px);
  opacity: .55;
}
.dist-keys { display: flex; flex-wrap: wrap; gap: 5px 14px; margin-top: 9px; }
.dist-key { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-dim); }
.dist-key b { font-family: var(--mono); font-weight: 500; color: var(--text); }

/* sections */
.sections { padding: 4px 26px 0; }
.section { padding: 18px 0; border-bottom: 1px solid var(--border); }
.section:last-child { border-bottom: 0; }
.section > h3 {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .11em; color: var(--accent);
  margin-bottom: 11px;
}
.section p { font-size: 13.5px; color: var(--text-dim); }
.section p + p { margin-top: 9px; }

.facts { display: grid; gap: 12px; }
.fact { display: grid; grid-template-columns: 126px 1fr; gap: 14px; align-items: start; }
.fact dt { font-size: 11.5px; color: var(--text-faint); padding-top: 1px; font-weight: 500; }
.fact dd { margin: 0; font-size: 13.5px; color: var(--text-dim); }
.fact .seg { font-family: var(--mono); font-size: 10px; color: var(--text-faint); display: inline-block; min-width: 14px; }

.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill {
  padding: 3px 9px; font-size: 11.5px; border-radius: 7px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim);
}

.evidence { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.evidence li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; font-size: 13.5px; color: var(--text-dim); }
.evidence li::before {
  content: ""; margin-top: 7px; width: 7px; height: 7px; border-radius: 2px;
  background: color-mix(in srgb, var(--accent) 70%, transparent);
}

.refs { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ref {
  display: flex; gap: 9px; align-items: baseline;
  padding: 9px 11px; font-size: 12.5px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--ease-std);
}
.ref:hover { border-color: var(--border-strong); }
.ref-n { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); flex: none; }
.ref-links { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.ref-links a {
  font-family: var(--mono); font-size: 10.5px; padding: 2px 7px; border-radius: 5px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.ref-links a:hover { text-decoration: none; background: color-mix(in srgb, var(--accent) 26%, transparent); }

/* row lists */
.rows { display: grid; gap: 5px; }
.row-btn {
  display: grid; grid-template-columns: 10px 1fr auto; gap: 11px; align-items: center;
  width: 100%; text-align: left;
  padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-2); cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-std),
              background var(--t-fast) var(--ease-std),
              transform var(--t-fast) var(--ease-spring);
}
.row-btn:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.row-btn:active { transform: scale(.99); }
.row-main { min-width: 0; }
.row-name { font-size: 13px; font-weight: 550; }
.row-sub { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }
.row-meta { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); white-space: nowrap; }

/* isolate table */
.iso-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.iso-table th {
  text-align: left; font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint);
  padding: 0 10px 8px 0; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.iso-table td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--border); color: var(--text-dim); vertical-align: top; }
.iso-table tr:last-child td { border-bottom: 0; }
.iso-name { color: var(--text); font-weight: 500; }
.iso-abbr { font-family: var(--mono); font-size: 11px; color: var(--text-faint); }
.tag-e {
  display: inline-block; font-family: var(--mono); font-size: 9px;
  padding: 1px 5px; border-radius: 4px; letter-spacing: .05em;
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line);
}
.iso-table a { font-family: var(--mono); font-size: 11px; }

/* --------------------------------------------------------- live evidence */

.section > h3 .live-src {
  font-family: var(--font-ui); text-transform: none; letter-spacing: 0;
  font-size: 10.5px; color: var(--accent); margin-left: 8px;
  padding: 1px 8px; border-radius: 99px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.live-status, .live-summary, .live-foot { font-size: 12.5px; color: var(--text-dim); }
.live-summary { margin-bottom: 12px; }
.live-foot { margin-top: 12px; color: var(--text-faint); font-size: 11.5px; }

.ground { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 12px; }
.ground-label { font-size: 11px; color: var(--text-faint); margin-right: 2px; }

.papers { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.paper {
  display: grid; grid-template-columns: 20px 1fr; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border);
  transition: border-color var(--t-fast) var(--ease-std), transform var(--t-fast) var(--ease-spring);
}
.paper:hover { border-color: var(--border-strong); transform: translateX(2px); }
.paper[data-focus="title"] { border-left: 2px solid var(--accent-line); }
.paper[data-focus="weak"] { opacity: .7; }
.paper-title { font-size: 12.5px; font-weight: 550; color: var(--text); line-height: 1.4; }
.paper-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 11px; color: var(--text-faint); margin-top: 4px; }
.flag-human, .flag-weak { font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; padding: 1px 6px; border-radius: 4px; }
.flag-human {
  color: var(--t-established);
  background: color-mix(in srgb, var(--t-established) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--t-established) 38%, transparent);
}
.flag-weak { color: var(--text-faint); border: 1px solid var(--border); }
.paper-abs { margin-top: 7px; }
.paper-abs summary {
  font-family: var(--mono); font-size: 10px; color: var(--accent);
  cursor: pointer; letter-spacing: .05em; text-transform: uppercase;
}
.paper-abs p { font-size: 12px; color: var(--text-dim); margin-top: 7px; }

/* ------------------------------------------------------------------ modal */

.modal[hidden], .results[hidden] { display: none; }

.modal {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: 28px;
  background: color-mix(in srgb, var(--bg) 58%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  animation: fade var(--t-mid) var(--ease-std);
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  width: min(1000px, 100%); max-height: 88vh; display: flex; flex-direction: column;
  background: var(--mat-thin);
  -webkit-backdrop-filter: var(--mat-blur);
  backdrop-filter: var(--mat-blur);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-3), inset 0 1px 0 var(--edge-light);
  overflow: hidden;
  animation: sheet var(--t-slow) var(--ease-spring);
}
@keyframes sheet {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 15px 19px; border-bottom: 1px solid var(--border);
}
.modal-head h2 { font-size: 15px; }
.modal-body { overflow-y: auto; padding: 18px 19px 26px; }

.tier-block { margin-bottom: 26px; }
.tier-block > header { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.tier-block > header h3 { font-size: 13.5px; }
.tier-block .tier-sub { font-size: 12px; color: var(--text-faint); margin-bottom: 11px; }
.tier-grid { display: grid; gap: 7px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

/* ----------------------------------------------------------------- footer */

.footnote {
  max-width: 1860px; margin: 0 auto;
  padding: 14px 24px 30px; font-size: 11px; color: var(--text-faint);
}
.footnote code { font-family: var(--mono); font-size: 10.5px; }

/* --------------------------------------------------------------- a11y/motion */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
/* ======================================================================
   Figure engine + editorial overhaul
   ====================================================================== */

:root {
  --fig-env: #6ea8ff;        /* envelope / membrane */
  --fig-capsid: #a776ff;     /* capsid */
  --fig-nuc: #ffb347;        /* nucleic acid */
  --fig-spike: #4dd4ac;      /* surface projections */
  --fig-ink: #e8ecf8;        /* label text */
  --fig-fill: rgba(110,168,255,.10);
  --fig-geo: rgba(255,255,255,.07);
  --fig-geo-line: rgba(255,255,255,.14);
  --serif: "Newsreader", Georgia, serif;
}
:root[data-theme="light"] {
  --fig-env: #2f6fe4;
  --fig-capsid: #7c3fd4;
  --fig-nuc: #c97a12;
  --fig-spike: #128a6b;
  --fig-ink: #141a2e;
  --fig-fill: rgba(47,111,228,.09);
  --fig-geo: rgba(20,26,46,.06);
  --fig-geo-line: rgba(20,26,46,.16);
}

/* --- shared figure chrome ------------------------------------------- */

.fig { width: 100%; height: auto; display: block; overflow: visible; }

.plates { padding: 4px 26px 0; display: grid; gap: 18px; }

.plate {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  overflow: hidden;
}
.plate-art { padding: 18px 20px 6px; }
.plate figcaption {
  padding: 10px 18px 14px;
  font-size: 12px; line-height: 1.5; color: var(--text-dim);
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 30%, transparent);
}
.plate figcaption b {
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent); margin-right: 5px;
}
.plate figcaption strong { color: var(--text); font-weight: 600; }

/* --- virion schematic ------------------------------------------------ */

.fig-virion .env {
  fill: var(--fig-fill); stroke: var(--fig-env); stroke-width: 2.6;
}
.fig-virion .env-in {
  fill: none; stroke: var(--fig-env); stroke-width: 1.2; opacity: .55;
  stroke-dasharray: 3 3;
}
.fig-virion path.env[stroke-width="30"] { fill: none; }
.fig-virion .capsid {
  fill: color-mix(in srgb, var(--fig-capsid) 14%, transparent);
  stroke: var(--fig-capsid); stroke-width: 2.2;
}
.fig-virion .capsid-facet {
  fill: none; stroke: var(--fig-capsid); stroke-width: 1; opacity: .4;
}
.fig-virion .cap-dot { fill: var(--fig-capsid); opacity: .34; }
.fig-virion .nuc {
  fill: none; stroke: var(--fig-nuc); stroke-width: 2.1;
  stroke-linecap: round; opacity: .92;
}
.fig-virion .nuc-core {
  fill: none; stroke: var(--fig-nuc); stroke-width: 3; stroke-linecap: round;
}
.fig-virion .spk { stroke: var(--fig-spike); stroke-width: 1.8; fill: none; }
.fig-virion .spk-head {
  fill: var(--fig-spike); stroke: none; opacity: .9;
}
.fig-virion .spk-hair {
  stroke: var(--fig-spike); stroke-width: 1; fill: none; opacity: .6;
}
.fig-virion .tail, .fig-virion .baseplate {
  fill: color-mix(in srgb, var(--fig-capsid) 20%, transparent);
  stroke: var(--fig-capsid); stroke-width: 1.8;
}
.fig-virion .tail-ring { stroke: var(--fig-capsid); stroke-width: .8; opacity: .5; }
.fig-virion .fibre {
  fill: none; stroke: var(--fig-spike); stroke-width: 1.8; stroke-linecap: round;
}
.fig-virion .lateral {
  fill: color-mix(in srgb, var(--fig-nuc) 16%, transparent);
  stroke: var(--fig-nuc); stroke-width: 1.4; opacity: .8;
}
.fig-virion .leader {
  stroke: var(--text-faint); stroke-width: 1; fill: none; opacity: .6;
}
.fig-virion .leader-dot { fill: var(--text-faint); opacity: .75; }
.fig-lab {
  font-family: Inter, sans-serif; font-size: 11px; font-weight: 500;
  fill: var(--text-dim);
}
.fig-in {
  font-family: Inter, sans-serif; font-size: 10px; font-weight: 500;
  fill: var(--fig-ink); opacity: .78;
}
.fig-virion .scale path { stroke: var(--text-faint); stroke-width: 1.2; fill: none; }
.fig-virion .scale text {
  font-family: var(--mono); font-size: 10px; fill: var(--text-dim);
}
.fig-virion .scale .scale-sub {
  font-family: Inter, sans-serif; font-size: 9px; fill: var(--text-faint);
}

/* --- genome map ------------------------------------------------------ */

.fig-genome .gen-track {
  fill: var(--surface-2); stroke: var(--border); stroke-width: 1;
}
.fig-genome .gen-name {
  font-family: var(--mono); font-size: 10px; fill: var(--text);
}
.fig-genome .gen-desc, .fig-genome .gen-foot {
  font-family: Inter, sans-serif; font-size: 9.5px; fill: var(--text-faint);
}

/* --- transmission cycle --------------------------------------------- */

.fig-cycle .cyc-disc {
  fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1.4;
}
.fig-cycle .flow {
  fill: none; stroke: var(--accent); stroke-width: 1.8; opacity: .75;
}
.fig-cycle .arrowhead { fill: var(--accent); opacity: .9; }
.fig-cycle .flow-lab {
  font-family: Inter, sans-serif; font-size: 9.5px; fill: var(--accent);
  font-weight: 500;
}
.fig-cycle .cyc-lab {
  font-family: Inter, sans-serif; font-size: 11px; font-weight: 600; fill: var(--text);
}
.fig-cycle .cyc-sub {
  font-family: Inter, sans-serif; font-size: 9.5px; fill: var(--text-faint);
}

/* --- organism cartoons ---------------------------------------------- */

.icon .ic, .host-ico .ic { }
.icon .ic *, .host-ico * {
  fill: none; stroke: var(--fig-ink); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.icon .ic ellipse:first-of-type,
.icon .ic rect { fill: color-mix(in srgb, var(--fig-env) 20%, transparent); }
.icon .ic .wing, .host-ico .wing {
  fill: color-mix(in srgb, var(--fig-env) 14%, transparent); opacity: .9;
}
.icon .ic .dot, .host-ico .dot { fill: var(--fig-ink); stroke: none; }
.icon .ic .nucleus, .host-ico .nucleus {
  fill: color-mix(in srgb, var(--fig-capsid) 28%, transparent);
}
.icon .ic .hair, .icon .ic .tail { stroke-width: 1.6; opacity: .8; }
.icon .ic .fleece, .icon .ic .muzzle {
  fill: color-mix(in srgb, var(--fig-nuc) 14%, transparent);
}

.host-strip { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 0; }
.host-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 7px; font-size: 11.5px; font-weight: 500;
  color: var(--text-dim);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px;
}
.host-ico { width: 17px; height: 17px; flex: none; }

/* --- distribution map ----------------------------------------------- */

.fig-map { background: transparent; }
.fig-map .geo {
  fill: var(--fig-geo); stroke: var(--fig-geo-line); stroke-width: .5;
}
.fig-map .geo.on {
  fill: color-mix(in srgb, var(--t-established) 58%, transparent);
  stroke: color-mix(in srgb, var(--t-established) 80%, transparent);
  stroke-width: .7;
}
.fig-map .geo-dot {
  fill: none; stroke: var(--t-established); stroke-width: 1.4; opacity: .9;
}
.fig-map .map-note {
  font-family: Inter, sans-serif; font-size: 15px; font-weight: 600;
  fill: var(--t-established); opacity: .85;
}
.map-slot, .map-loading { min-height: 60px; }
.map-loading { font-size: 12px; color: var(--text-faint); padding: 20px 0; }
.map-eradicated {
  padding: 26px 20px; text-align: center; font-size: 13px; color: var(--text-dim);
  background: var(--surface-2); border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
}
.map-eradicated strong { color: var(--t-animal); }

/* --- tier bar -------------------------------------------------------- */

.fig-tierbar { height: 10px; border-radius: 3px; overflow: hidden; }
.fig-tierbar .tb[data-tier="established"] { fill: var(--t-established); }
.fig-tierbar .tb[data-tier="probable"]    { fill: var(--t-probable); }
.fig-tierbar .tb[data-tier="possible"]    { fill: var(--t-possible); }
.fig-tierbar .tb[data-tier="animal-only"] { fill: var(--t-animal); }
.fig-tierbar .tb[data-tier="no-evidence"] { fill: var(--t-none); opacity: .5; }

/* --- hero ------------------------------------------------------------ */

.hero {
  position: relative;
  padding: 22px 26px 24px;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(900px 300px at 85% -40%, var(--hero-wash), transparent 70%),
    linear-gradient(180deg, var(--surface-2), transparent);
  --hero-wash: rgba(110,168,255,.12);
}
.hero[data-tier="established"] { --hero-wash: color-mix(in srgb, var(--t-established) 16%, transparent); }
.hero[data-tier="probable"]    { --hero-wash: color-mix(in srgb, var(--t-probable) 15%, transparent); }
.hero[data-tier="possible"]    { --hero-wash: color-mix(in srgb, var(--t-possible) 14%, transparent); }
.hero[data-tier="animal-only"] { --hero-wash: color-mix(in srgb, var(--t-animal) 14%, transparent); }

.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 360px);
  gap: 22px; align-items: start;
}
.hero-art { padding-top: 4px; }

.kicker {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 9px;
}
.hero h2 {
  font-family: var(--serif); font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.1;
}
.hero h2.binomial { font-style: italic; }
.hero .detail-common {
  font-family: var(--serif); font-size: 17px; color: var(--text-dim);
  margin-top: 6px;
}
.hero .badges { margin-top: 14px; }
.hero .headline {
  font-family: var(--serif); font-size: 16.5px; line-height: 1.55;
  color: var(--text); margin-top: 16px; max-width: 62ch;
}
.hero .tier-note {
  margin-top: 12px; font-size: 12px; color: var(--text-faint);
  padding-left: 11px; border-left: 2px solid var(--border-strong);
  background: none; border-radius: 0;
}
.hero .dist { margin-top: 16px; max-width: 520px; }
.hero-group h2 { font-size: clamp(24px, 3vw, 34px); }

/* --- editorial sections --------------------------------------------- */

.sections { max-width: 76ch; }
.section > h3 { color: var(--accent); }
.section p { font-size: 14px; line-height: 1.62; }
.sections .section:first-child p:first-of-type::first-letter { }

.fact dt { font-weight: 500; }

/* --- tree panel trim ------------------------------------------------- */

.tree-panel .tree-tools {
  padding: 9px 14px; border-bottom: 1px solid var(--border);
  justify-content: flex-start;
}
.btn-treetoggle { display: none; }
.layout.tree-hidden { grid-template-columns: 1fr; }
.layout.tree-hidden .tree-panel { display: none; }

/* --- responsive ------------------------------------------------------ */

@media (max-width: 1240px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { max-width: 420px; }
}
@media (max-width: 1080px) {
  .btn-treetoggle { display: grid; }
}
@media (max-width: 760px) {
  .hero { padding: 18px 16px 20px; }
  .plates { padding: 4px 16px 0; }
  .plate-art { padding: 14px 12px 4px; }
  .plate figcaption { padding: 10px 14px 12px; }
}

/* Figure labels sit over artwork, so they get a knockout halo in the card
   colour -- the standard trick for labelling a dense schematic. */
.fig-in, .fig-lab {
  paint-order: stroke;
  stroke: var(--bg-2);
  stroke-width: 3.5px;
  stroke-linejoin: round;
}

/* Tube-drawn particles: widths must be classes, since a stylesheet rule beats
   a presentation attribute. */
.fig-virion .env-tube {
  fill: none; stroke: var(--fig-env); stroke-width: 30; stroke-linecap: round;
  opacity: .5;
}
.fig-virion .env-tube-in {
  fill: none; stroke: var(--fig-env); stroke-width: 18; stroke-linecap: round;
  opacity: .5;
}
.fig-virion .nuc-tube {
  fill: none; stroke: var(--fig-nuc); stroke-width: 5;
  stroke-dasharray: 7 5; stroke-linecap: round;
}
/* ======================================================================
   Radial taxonomy tree
   ====================================================================== */

.radial-panel { display: flex; flex-direction: column; }
.radial-panel[hidden] { display: none; }

.radial { display: flex; flex-direction: column; min-height: 0; }

.rad-bar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.rad-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px;
  font-size: 11px; color: var(--text-faint); min-width: 0;
}
.rad-crumbs button {
  background: none; border: 0; padding: 2px 6px; cursor: pointer;
  color: var(--text-faint); border-radius: 6px; font-size: 11px;
  transition: all var(--t-fast) var(--ease-std);
}
.rad-crumbs button:hover { color: var(--accent); background: var(--accent-soft); }
.rad-crumbs button.now { color: var(--text); font-weight: 600; }
.rad-crumbs .sep { opacity: .4; }

.rad-ctrl { display: flex; align-items: center; gap: 8px; }
.rad-ctrl label {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--text-faint);
}
.rad-ctrl select {
  font: inherit; font-size: 11.5px; color: var(--text);
  padding: 4px 8px; border-radius: 7px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 var(--edge-light);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-std);
}
.rad-ctrl select:hover { border-color: var(--border-strong); }
.rad-ctrl select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.rad-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  height: calc(100vh - 290px);
  overflow: hidden;
}

.rad-svg {
  width: 100%; height: 100%; display: block;
  cursor: grab; touch-action: none;
}
.rad-svg:active { cursor: grabbing; }

/* --- rings ------------------------------------------------------------ */

.rad-ring {
  fill: none;
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 2 6;
  opacity: .8;
}
.rad-ring-lab {
  font-family: var(--mono); font-size: 8.5px;
  letter-spacing: .08em; text-transform: uppercase;
  fill: var(--text-faint); opacity: .75;
}

/* --- links ------------------------------------------------------------ */

.rad-link {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1.1;
  stroke-linecap: round;
  transition: stroke var(--t-mid) var(--ease-std),
              stroke-width var(--t-mid) var(--ease-std),
              opacity var(--t-mid) var(--ease-std);
}
.rad-link[data-tier="established"] { stroke: color-mix(in srgb, var(--t-established) 62%, transparent); }
.rad-link[data-tier="probable"]    { stroke: color-mix(in srgb, var(--t-probable) 58%, transparent); }
.rad-link[data-tier="possible"]    { stroke: color-mix(in srgb, var(--t-possible) 52%, transparent); }
.rad-link[data-tier="animal-only"] { stroke: color-mix(in srgb, var(--t-animal) 52%, transparent); }

.radial.has-hover .rad-link { opacity: .22; }
.radial.has-hover .rad-link.lit {
  opacity: 1;
  stroke: var(--accent);
  stroke-width: 2.4;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 60%, transparent));
}

/* --- nodes ------------------------------------------------------------ */

.rad-dot {
  fill: var(--bg-2);
  stroke: var(--t-none);
  stroke-width: 1.6;
  cursor: pointer;
  transition: fill var(--t-fast) var(--ease-std),
              stroke var(--t-fast) var(--ease-std),
              r var(--t-mid) var(--ease-spring);
}
.rad-node[data-tier="established"] .rad-dot { stroke: var(--t-established); fill: color-mix(in srgb, var(--t-established) 34%, var(--bg-2)); }
.rad-node[data-tier="probable"]    .rad-dot { stroke: var(--t-probable);    fill: color-mix(in srgb, var(--t-probable) 32%, var(--bg-2)); }
.rad-node[data-tier="possible"]    .rad-dot { stroke: var(--t-possible);    fill: color-mix(in srgb, var(--t-possible) 30%, var(--bg-2)); }
.rad-node[data-tier="animal-only"] .rad-dot { stroke: var(--t-animal);      fill: color-mix(in srgb, var(--t-animal) 30%, var(--bg-2)); }

.rad-node.profiled .rad-dot { stroke-width: 2.6; }
/* A lineage base is where a wedge starts, not where it branches from. */
.rad-node.is-lineage .rad-dot { stroke-width: 2.4; }
.rad-node:hover .rad-dot { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--accent) 70%, transparent)); }
.rad-node.is-root .rad-dot { display: none; }

.rad-stub {
  fill: none; stroke: var(--text-faint); stroke-width: 1.2;
  stroke-dasharray: 2 3; opacity: .7; pointer-events: none;
}

.radial.has-hover .rad-node { opacity: .3; transition: opacity var(--t-mid) var(--ease-std); }
.radial.has-hover .rad-node.lit,
.radial.has-hover .rad-node:has(.lit) { opacity: 1; }

/* --- labels ----------------------------------------------------------- */

.rad-lab {
  font-family: var(--font-ui);
  font-size: 9.5px;
  fill: var(--text-dim);
  dominant-baseline: middle;
  cursor: pointer;
  paint-order: stroke;
  stroke: var(--bg);
  stroke-width: 3px;
  stroke-linejoin: round;
  transition: fill var(--t-fast) var(--ease-std);
}
.rad-lab.sp { font-style: italic; fill: var(--text-faint); }
.rad-lab:hover { fill: var(--accent); }
.radial.has-hover .rad-lab { opacity: .3; transition: opacity var(--t-mid) var(--ease-std); }
.radial.has-hover .rad-lab.lit { opacity: 1; fill: var(--accent); font-weight: 650; }

/* --- hub -------------------------------------------------------------- */

.hub-stop-0 { stop-color: var(--accent); stop-opacity: .22; }
.hub-stop-1 { stop-color: var(--accent); stop-opacity: 0; }

.rad-hub {
  fill: var(--mat-thin);
  stroke: var(--accent-line);
  stroke-width: 1.4;
  transition: opacity var(--t-mid) var(--ease-std);
}
.rad-hub-glow { pointer-events: none; }

/* Split mode: no ancestor at the centre, so no hub to draw around. The ring
   is dashed to read as "open", not as a node the lineages descend from. */
.radial.is-split .rad-hub,
.rad-svg.is-split .rad-hub {
  fill: none;
  stroke: var(--border);
  stroke-dasharray: 3 6;
  opacity: .8;
}
.radial.is-split .rad-hub-glow,
.rad-svg.is-split .rad-hub-glow { opacity: .35; }
.radial.is-split .rad-hub-name,
.rad-svg.is-split .rad-hub-name {
  font-size: 9.5px; font-weight: 600; fill: var(--text-faint);
}
.radial.is-split .rad-hub-sub,
.rad-svg.is-split .rad-hub-sub { fill: var(--text-faint); opacity: .8; }

/* --- lineage brackets (split mode) ------------------------------------ */

.rad-arc-band {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 3.5;
  stroke-linecap: round;
  cursor: pointer;
}
.rad-arc[data-tier="established"] .rad-arc-band { stroke: var(--t-established); }
.rad-arc[data-tier="probable"]    .rad-arc-band { stroke: var(--t-probable); }
.rad-arc[data-tier="possible"]    .rad-arc-band { stroke: var(--t-possible); }
.rad-arc[data-tier="animal-only"] .rad-arc-band { stroke: var(--t-animal); }

.rad-arc-lab {
  font-family: var(--mono); font-size: 8.4px; letter-spacing: .05em;
  text-transform: uppercase; fill: var(--text-dim);
  text-anchor: middle; pointer-events: none;
  paint-order: stroke; stroke: var(--bg-1); stroke-width: 2.6px;
}
.radial.has-hover .rad-arc { opacity: .3; transition: opacity var(--t-mid) var(--ease-std); }
.radial.has-hover .rad-arc.lit,
.radial.has-hover .rad-arc:has(.lit) { opacity: 1; }
.radial.has-hover .rad-arc.lit .rad-arc-lab { fill: var(--accent); }
.rad-hub-name {
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 650;
  fill: var(--text); pointer-events: none;
}
.rad-hub-sub {
  font-family: var(--mono); font-size: 8px; letter-spacing: .06em;
  text-transform: uppercase; fill: var(--text-faint); pointer-events: none;
}

/* --- tooltip ---------------------------------------------------------- */

.rad-tip {
  position: absolute; left: 0; top: 0; z-index: 5;
  pointer-events: none;
  max-width: 300px;
  padding: 9px 12px;
  display: grid; gap: 2px;
  background: var(--mat-thin);
  -webkit-backdrop-filter: var(--mat-blur);
  backdrop-filter: var(--mat-blur);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  animation: pop var(--t-fast) var(--ease-spring);
}
.rad-tip[hidden] { display: none; }
.rad-tip b { font-size: 12.5px; color: var(--text); }
.rad-tip span { font-size: 11px; color: var(--text-faint); }
.rad-tip .tip-sg { color: var(--accent); }
.rad-tip em { font-size: 10.5px; color: var(--accent); font-style: normal; }

/* --- footer / loading -------------------------------------------------- */

.rad-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  padding: 9px 15px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  font-size: 11px; color: var(--text-faint);
}
.rad-stat { font-family: var(--mono); color: var(--text-dim); white-space: nowrap; }
.rad-note { max-width: 62ch; }

.rad-spin {
  position: absolute; inset: 0;
  display: none; place-items: center;
  pointer-events: none;
}
.radial.loading .rad-spin { display: grid; }
.rad-spin::after {
  content: "";
  width: 34px; height: 34px; border-radius: 50%;
  border: 2.5px solid var(--border-strong);
  border-top-color: var(--accent);
  animation: spin 760ms linear infinite;
}
.radial.loading .rad-svg { opacity: .45; transition: opacity var(--t-mid) var(--ease-std); }

@media (max-width: 1080px) {
  .rad-stage { height: 62vh; }
  .rad-note { display: none; }
}

/* ======================================================================
   Motion: figure entrances, living schematics, reveal
   ====================================================================== */

/* Figures fade and lift in rather than snapping into place. */
.plate { animation: plateIn var(--t-slow) var(--ease-out) both; }
.plates .plate:nth-child(2) { animation-delay: 70ms; }
.plates .plate:nth-child(3) { animation-delay: 140ms; }
.plates .plate:nth-child(4) { animation-delay: 210ms; }
@keyframes plateIn {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.hero-art .fig-virion { animation: artIn 620ms var(--ease-spring) both; }
@keyframes artIn {
  from { opacity: 0; transform: scale(.9) rotate(-6deg); }
  to   { opacity: 1; transform: none; }
}

/* A virion with radial symmetry turns slowly, like a specimen on a stage.
   Shapes with a defined axis (bullet, rod, filament, phage) stay still. */
.fig-virion[data-shape="spherical"] .spikes-g,
.fig-virion[data-shape="pleomorphic"] .spikes-g,
.fig-virion[data-shape="icosahedral"] .spikes-g {
  transform-origin: 186px 150px;
  animation: spin 90s linear infinite;
}
.fig-virion .nuc { animation: breathe 7s var(--ease-std) infinite; transform-origin: 186px 150px; }
@keyframes breathe { 0%,100% { opacity: .92; } 50% { opacity: .62; } }

/* Transmission arrows flow in the direction of spread. */
.fig-cycle .flow {
  stroke-dasharray: 5 7;
  animation: flow 1.1s linear infinite;
}
@keyframes flow { to { stroke-dashoffset: -12; } }
.fig-cycle .cyc-disc { transition: fill var(--t-fast) var(--ease-std); }
.fig-cycle .cyc-node:hover .cyc-disc { fill: var(--accent-soft); }

/* Map countries wash in. */
.fig-map .geo.on { animation: washIn 700ms var(--ease-out) both; }
@keyframes washIn { from { opacity: 0; } to { opacity: 1; } }
.fig-map .geo { transition: fill var(--t-fast) var(--ease-std); }
.fig-map .geo.on:hover { fill: color-mix(in srgb, var(--t-established) 85%, transparent); }

/* Hero wash tints the whole header by evidence tier. */
.hero { position: relative; overflow: hidden; }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 120% at 88% -20%, var(--hero-wash), transparent 70%);
  opacity: .9;
}
.hero > * { position: relative; z-index: 1; }

/* Reveal highlight sits under content. */
.plate > *, .row-btn > *, .paper > *, .ref > * { position: relative; z-index: 1; }

/* When tips are packed too tightly to label them all, the survivors are the
   ones carrying evidence; the rest appear on hover. */
.radial.tight-labels .rad-lab,
.rad-svg.tight-labels .rad-lab { font-weight: 550; }
.radial.tight-labels .rad-lab.sp,
.rad-svg.tight-labels .rad-lab.sp { fill: var(--text-dim); }

/* ======================================================================
   Tier provenance and the correction control
   ====================================================================== */

/* Every tier says where it came from. A tier nobody checked must not look
   like a finding, so "not assessed" gets a dashed, inert treatment while a
   correction the reader made gets the accent. */

.prov { margin-top: 12px; }

.prov-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  text-align: left;
  font: inherit;
  color: var(--text-dim);
  background: var(--mat-thin);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-std),
              background var(--t-fast) var(--ease-std);
}
.prov-head:hover { border-color: var(--border-strong); background: var(--mat-reg); }
.prov-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.prov-label {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-faint); white-space: nowrap;
}
.prov-why { font-size: 11.5px; line-height: 1.45; color: var(--text-dim); }
.prov-cta {
  font-size: 11px; font-weight: 600; color: var(--accent); white-space: nowrap;
  opacity: 0; transition: opacity var(--t-fast) var(--ease-std);
}
.prov-head:hover .prov-cta,
.prov-head:focus-visible .prov-cta { opacity: 1; }

.prov[data-basis="none"] .prov-head { border-style: dashed; }
.prov[data-basis="override"] .prov-head {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--accent-soft);
}
.prov[data-basis="override"] .prov-label { color: var(--accent); }

.prov-was {
  margin: 5px 0 0;
  font-family: var(--mono); font-size: 10px; color: var(--text-faint);
}

/* --- the editor ------------------------------------------------------- */

.correct {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 14px;
  background: var(--mat-reg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
}
.correct-intro { margin: 0; font-size: 11.5px; line-height: 1.55; color: var(--text-dim); }
.correct-intro code {
  font-family: var(--mono); font-size: 10.5px;
  padding: 1px 4px; border-radius: 4px; background: var(--mat-thin);
}
.correct label {
  display: grid; gap: 5px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-faint);
}
.correct label .opt { text-transform: none; letter-spacing: 0; opacity: .75; }
.correct select,
.correct input {
  font: inherit; font-size: 13px; text-transform: none; letter-spacing: 0;
  color: var(--text);
  padding: 8px 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.correct select:focus-visible,
.correct input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.correct-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.btn-primary {
  color: var(--bg-1);
  background: var(--accent);
  border-color: transparent;
  font-weight: 600;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-quiet { color: var(--text-faint); background: none; border-color: transparent; }

.correct-msg { margin: 0; min-height: 1em; font-size: 11.5px; color: var(--text-faint); }
.correct-msg.is-error { color: var(--t-established); }

@media (max-width: 860px) {
  .prov-head { grid-template-columns: 1fr; }
  .prov-cta { opacity: 1; }
}

/* One ICTV species often has several accepted virus names; all of them have to
   be visible or the page looks like the wrong record. */
.detail-synonyms {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  margin: 4px 0 0;
  font-size: 12px; color: var(--text-faint);
}
.detail-synonyms span {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; opacity: .8;
}
.detail-synonyms b { font-weight: 550; color: var(--text-dim); }
.detail-synonyms i { opacity: .4; font-style: normal; }

/* --- pathogen index filter -------------------------------------------- */

.pix-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-bottom: 10px;
}
.pix-q {
  flex: 1 1 260px; min-width: 0;
  font: inherit; font-size: 13.5px; color: var(--text);
  padding: 9px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.pix-q:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pix-toggle {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--text-dim); cursor: pointer; white-space: nowrap;
}
.pix-count {
  font-family: var(--mono); font-size: 10.5px; color: var(--text-faint);
  white-space: nowrap;
}
.pix-note {
  margin: 0 0 16px; font-size: 11.5px; line-height: 1.55; color: var(--text-faint);
  max-width: 76ch;
}

/* ======================================================================
   Travel exposure and live signals
   ====================================================================== */

.travel-panel { display: flex; flex-direction: column; min-height: 0; }
.travel-panel[hidden] { display: none; }

.travel-form {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  padding: 0 var(--pad) 14px;
  border-bottom: 1px solid var(--border);
}
.travel-form label {
  display: grid; gap: 5px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-faint);
}
.travel-form .opt { text-transform: none; letter-spacing: 0; opacity: .75; }
.travel-form input {
  font: inherit; font-size: 13.5px; text-transform: none; letter-spacing: 0;
  color: var(--text); padding: 8px 10px; min-width: 150px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.travel-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.travel-out { overflow-y: auto; padding: 16px var(--pad) var(--pad); }
.travel-hint, .travel-note {
  margin: 0 0 14px; font-size: 12.5px; line-height: 1.6; color: var(--text-faint);
  max-width: 76ch;
}
.travel-summary h3 { margin: 0 0 4px; font-size: 20px; }
.travel-counts { margin: 0 0 20px; font-size: 12.5px; color: var(--text-dim); }

.travel-block { margin-bottom: 22px; }
.travel-block h4 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-dim);
}
.travel-block h4 .count {
  font-size: 9.5px; padding: 1px 6px; border-radius: 999px;
  background: var(--mat-thin); color: var(--text-faint);
}
.travel-cosmo { opacity: .82; }
.travel-live { padding: 14px; border-radius: var(--r-md); background: var(--accent-soft); }

.trows { display: grid; gap: 4px; }
.trow {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: start; gap: 10px;
  width: 100%; padding: 9px 11px; text-align: left; font: inherit;
  background: var(--mat-thin); border: 1px solid var(--border);
  border-radius: var(--r-sm); cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-std),
              background var(--t-fast) var(--ease-std);
}
.trow:hover { border-color: var(--border-strong); background: var(--mat-reg); }
.trow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.trow .dot { margin-top: 5px; }
.trow-main { display: grid; gap: 2px; min-width: 0; }
.trow-name { font-size: 13.5px; font-weight: 550; color: var(--text); }
.trow-sp { font-family: var(--serif); font-style: italic; font-size: 11.5px; color: var(--text-faint); }
.trow-sub { font-size: 11.5px; line-height: 1.5; color: var(--text-dim); }
.trow-meta { display: grid; gap: 3px; justify-items: end; }
.trow-inc, .trow-win, .trow-inf {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 999px; white-space: nowrap;
}
.trow-inc { color: var(--text-faint); background: var(--mat-thin); }
.trow-inf { color: var(--text-faint); border: 1px dashed var(--border-strong); }
.trow[data-window="plausible"] { border-color: color-mix(in srgb, var(--t-established) 45%, transparent); }
.trow[data-window="plausible"] .trow-win { color: var(--t-established); background: color-mix(in srgb, var(--t-established) 14%, transparent); }
.trow[data-window="late"] { opacity: .6; }
.trow[data-window="late"] .trow-win,
.trow[data-window="early"] .trow-win { color: var(--text-faint); background: var(--mat-thin); }
.trow[data-window="early"] { opacity: .78; }

.travel-caveat {
  margin: 26px 0 0; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: 11.5px; line-height: 1.6; color: var(--text-faint); max-width: 78ch;
}

/* --- signal lists ----------------------------------------------------- */

.sig-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.sig-list li {
  display: grid; grid-template-columns: auto 1fr; gap: 10px;
  align-items: baseline; font-size: 12.5px; line-height: 1.5;
}
.sig-date {
  font-family: var(--mono); font-size: 10px; color: var(--text-faint); white-space: nowrap;
}
.sig-body { display: grid; gap: 2px; }
.sig-list a { color: var(--text-dim); }
.sig-list a:hover { color: var(--accent); }
.sig-tag {
  font-family: var(--mono); font-size: 9.5px; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: .05em;
}
.sig-full { max-height: none; }
.sig[data-kind="non-viral"], .sig[data-kind="unmatched"] { opacity: .55; }
.sig-src { font-family: var(--mono); font-size: 10px; color: var(--text-faint); }

@media (max-width: 860px) {
  .trow { grid-template-columns: auto 1fr; }
  .trow-meta { grid-column: 2; justify-items: start; grid-auto-flow: column; }
}
.travel-prov { color: var(--text-faint); font-size: 11.5px; }

/* --- Nextstrain builds ------------------------------------------------ */

.gb-note { margin: 0 0 12px; font-size: 11.5px; line-height: 1.6; color: var(--text-faint); max-width: 74ch; }
.gb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gb {
  display: grid; gap: 3px;
  padding: 11px 13px;
  background: var(--mat-thin);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.gb > a { font-size: 13.5px; font-weight: 550; color: var(--text); }
.gb > a:hover { color: var(--accent); }
.gb-meta, .gb-row {
  font-family: var(--mono); font-size: 10.5px; color: var(--text-faint);
  line-height: 1.6;
}
.gb-row i { font-style: normal; text-transform: uppercase; letter-spacing: .05em; opacity: .75; }
.gb-row b, .gb-meta b { color: var(--text-dim); }


/* ----------------------------------------------------------------------
   [hidden] must win
   ----------------------------------------------------------------------
   An author `display` declaration beats the user-agent `[hidden]` rule no
   matter how low its specificity. Any panel given `display: flex` therefore
   stayed in the grid while hidden, held its column, and pushed the article
   panel down a row. This has now bitten twice -- once on the modal, once on
   the travel panel -- so it is closed for everything that can be hidden. */
.panel[hidden],
.section[hidden],
[hidden] { display: none !important; }

/* Evidence grade: a reservoir detection is not a human case, and must not
   look like one. */
.trow-ev {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 999px; white-space: nowrap;
}
.trow-ev[data-ev="reservoir"] {
  color: var(--t-animal);
  background: color-mix(in srgb, var(--t-animal) 14%, transparent);
}
.trow-ev[data-ev="human-serology"],
.trow-ev[data-ev="vector"] {
  color: var(--t-possible);
  background: color-mix(in srgb, var(--t-possible) 14%, transparent);
}
.trow:has(.trow-ev) { border-style: dashed; }

/* ======================================================================
   Virology data blocks
   ====================================================================== */

.muted { color: var(--text-faint); font-size: 12px; line-height: 1.6; }

/* --- Baltimore group -------------------------------------------------- */
.balt { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.balt-roman {
  font-family: var(--serif); font-size: 34px; line-height: 1;
  color: var(--accent); padding: 10px 16px;
  border: 1px solid var(--accent-line); border-radius: var(--r-md);
  background: var(--accent-soft);
}
.balt-body h4 { margin: 0 0 6px; font-size: 14px; }
.balt-body p { margin: 0 0 7px; font-size: 12.5px; line-height: 1.65; }

/* --- receptors -------------------------------------------------------- */
.rc-row { display: grid; grid-template-columns: 130px 1fr; gap: 12px; margin-bottom: 9px; }
.rc-row > i {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; font-style: normal; color: var(--text-faint);
  padding-top: 3px;
}
.rc-row p { margin: 0; font-size: 12.5px; line-height: 1.6; }
.rc-row > div { display: flex; flex-wrap: wrap; gap: 5px; }
.rc-note {
  margin: 12px 0 0; padding: 11px 13px;
  font-size: 12.5px; line-height: 1.65;
  background: var(--mat-thin); border-left: 2px solid var(--accent-line);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* --- biosafety -------------------------------------------------------- */
.bsl { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.bsl-badge {
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  padding: 9px 13px; border-radius: var(--r-md); white-space: nowrap;
  border: 1px solid;
}
.bsl[data-bsl="1"] .bsl-badge { color: var(--t-animal); border-color: color-mix(in srgb, var(--t-animal) 45%, transparent); background: color-mix(in srgb, var(--t-animal) 12%, transparent); }
.bsl[data-bsl="2"] .bsl-badge { color: var(--t-possible); border-color: color-mix(in srgb, var(--t-possible) 45%, transparent); background: color-mix(in srgb, var(--t-possible) 12%, transparent); }
.bsl[data-bsl="3"] .bsl-badge { color: var(--t-probable); border-color: color-mix(in srgb, var(--t-probable) 50%, transparent); background: color-mix(in srgb, var(--t-probable) 14%, transparent); }
.bsl[data-bsl="4"] .bsl-badge { color: var(--t-established); border-color: color-mix(in srgb, var(--t-established) 55%, transparent); background: color-mix(in srgb, var(--t-established) 16%, transparent); }
.bsl[data-bsl=""] .bsl-badge { color: var(--muted); border-style: dashed; }
.bsl-body p { margin: 0 0 7px; font-size: 12.5px; line-height: 1.65; }
.bsl-sa, .bsl-vax {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .03em;
  padding: 5px 9px; border-radius: var(--r-sm); display: inline-block;
}
.bsl-sa { color: var(--t-established); background: color-mix(in srgb, var(--t-established) 12%, transparent); }
.bsl-vax { color: var(--accent); background: var(--accent-soft); }
.bsl-caveat { margin-top: 9px !important; }

/* --- countermeasures -------------------------------------------------- */
.cm-none {
  font-family: var(--mono); font-size: 12px; color: var(--t-established);
  padding: 9px 12px; margin: 0 0 12px;
  background: color-mix(in srgb, var(--t-established) 10%, transparent);
  border-radius: var(--r-sm);
}
.cm-group { margin-bottom: 12px; }
.cm-group > i {
  display: block; margin-bottom: 5px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; font-style: normal; color: var(--text-faint);
}
.cm-list { margin: 0; padding-left: 18px; }
.cm-list li { font-size: 12.5px; line-height: 1.6; margin-bottom: 3px; }
.cm-note {
  margin: 12px 0 0; padding: 11px 13px;
  font-size: 12.5px; line-height: 1.65;
  background: var(--mat-thin); border-left: 2px solid var(--accent-line);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.cm-caveat { margin-top: 10px; }

/* --- cross-reactivity ------------------------------------------------- */
.xr { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.xr:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.xr h4 {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px;
  margin: 0 0 8px; font-size: 14px;
}
.xr-extent {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-faint);
  padding: 2px 7px; border-radius: 999px; background: var(--mat-thin);
}
.xr p { margin: 0 0 7px; font-size: 12.5px; line-height: 1.65; }
.xr p > i { color: var(--text-faint); font-style: normal; font-weight: 600; }

.pill-link { cursor: pointer; border-style: dashed; }
.pill-link:hover { color: var(--accent); border-color: var(--accent); }

/* --- differential panel ----------------------------------------------- */
.dx-panel { display: flex; flex-direction: column; min-height: 0; }
.dx-panel[hidden] { display: none; }
.dx-form {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  padding: 0 var(--pad) 14px; border-bottom: 1px solid var(--border);
}
.dx-form label {
  display: grid; gap: 5px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-faint);
}
.dx-form .opt { text-transform: none; letter-spacing: 0; opacity: .75; }
.dx-form input, .dx-form select {
  font: inherit; font-size: 13.5px; text-transform: none; letter-spacing: 0;
  color: var(--text); padding: 8px 10px; min-width: 130px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.dx-form input:focus-visible, .dx-form select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.dx-out { overflow-y: auto; padding: 16px var(--pad) var(--pad); }
.trow-score {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  color: var(--accent); padding: 1px 6px; border-radius: 999px;
  background: var(--accent-soft);
}

/* ======================================================================
   Antiviral therapy
   ====================================================================== */

.th-guides {
  margin-bottom: 16px; padding: 12px 14px;
  background: var(--accent-soft); border-radius: var(--r-sm);
}
.th-guides > i {
  display: block; margin-bottom: 7px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; font-style: normal; color: var(--accent);
}
.th-guides ul { margin: 0; padding-left: 17px; }
.th-guides li { font-size: 12.5px; line-height: 1.6; margin-bottom: 3px; }

.th-agent, .th-inv {
  margin-bottom: 14px; padding: 13px 15px;
  background: var(--mat-thin); border: 1px solid var(--border);
  border-left-width: 3px; border-radius: var(--r-sm);
}
.th-agent[data-grade="established"] { border-left-color: var(--t-animal); }
.th-agent[data-grade="supported"]   { border-left-color: var(--t-possible); }
.th-agent[data-grade="conflicting"] { border-left-color: var(--t-established); }
.th-agent[data-grade="observational"],
.th-agent[data-grade="historical"]  { border-left-color: var(--border-strong); }
.th-agent[data-grade="preclinical"] { border-left-color: var(--t-unknown); }

.th-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; margin-bottom: 5px; }
.th-head h4 { margin: 0; font-size: 14px; }
.th-grade, .th-status {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
.th-grade { background: var(--mat-reg); color: var(--text-dim); }
.th-agent[data-grade="established"] .th-grade { color: var(--t-animal); background: color-mix(in srgb, var(--t-animal) 14%, transparent); }
.th-agent[data-grade="conflicting"] .th-grade { color: var(--t-established); background: color-mix(in srgb, var(--t-established) 14%, transparent); }
.th-status { color: var(--text-faint); border: 1px solid var(--border); }
.th-class { margin: 0 0 6px; font-size: 11.5px; color: var(--text-faint); font-style: italic; }
.th-agent p, .th-inv p { margin: 0 0 6px; font-size: 12.5px; line-height: 1.65; }
.th-agent p > i, .th-inv p > i { color: var(--text-faint); font-style: normal; font-weight: 600; }
.th-trials { font-family: var(--mono); font-size: 10.5px; }
.th-refs { margin: 7px 0 0; padding-left: 16px; }
.th-refs li { font-size: 11.5px; line-height: 1.55; margin-bottom: 3px; }
.th-pmid { font-family: var(--mono); font-size: 9.5px; color: var(--text-faint); white-space: nowrap; }
.th-invgroup { margin-top: 16px; }
.th-invgroup > i {
  display: block; margin-bottom: 8px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; font-style: normal; color: var(--text-faint);
}
.th-inv { background: none; border-style: dashed; border-left-width: 1px; }
.th-inv h4 { margin: 0 0 5px; font-size: 13px; font-weight: 550; }
.th-note {
  margin: 14px 0 0; padding: 12px 14px;
  font-size: 12.5px; line-height: 1.65;
  background: var(--mat-thin); border-left: 2px solid var(--accent-line);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.th-caveat { margin-top: 12px; }
.trow-scope {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 999px; white-space: nowrap;
  color: var(--text-faint); background: var(--mat-thin);
}
.trow-scope[data-scope="regional"] {
  color: var(--accent); background: var(--accent-soft);
}

/* Attribution that survives a screenshot or a saved page. */
.byline { color: var(--text-faint); }
.copyright {
  display: block; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 11px; line-height: 1.6; color: var(--text-faint);
}
.copyright b { color: var(--text-dim); font-weight: 600; }
.copyright a { color: var(--text-faint); text-decoration: underline; }
.copyright a:hover { color: var(--accent); }
.correct-warn {
  margin: 0; padding: 9px 11px;
  font-size: 11.5px; line-height: 1.55;
  color: var(--t-probable);
  background: color-mix(in srgb, var(--t-probable) 12%, transparent);
  border-radius: var(--r-sm);
}
.correct-warn code { font-family: var(--mono); font-size: 10.5px; }