/* =============================================================================
 * malavi.css: the MalAvi site's styles.
 *
 * Split out of the original single-file design preview. Colors are defined once
 * as custom properties on :root and consumed only through those tokens, so the
 * light/dark toggle can override in both directions. The three parasite-genus
 * colors are Okabe-Ito (colorblind-safe) with a five-step sequential ramp each
 * for the choropleths.
 * ============================================================================= */

/* League Gothic, recovered from the original MalAvi site's own web directory.
   The typeface MalAvi wore for fifteen years. SIL OFL, so embedded rather than fetched. */
@font-face {
  font-family: "League Gothic";
  src: url(../fonts/league-gothic.woff) format("woff");
  font-weight: 400; font-style: normal; font-display: block;
}

/* ---------------------------------------------------------------------------
   Tokens. Neutrals carry a violet bias so they read as chosen. The three
   parasite-genus colors are the Okabe-Ito colorblind-safe vermillion / blue /
   bluish-green, re-stepped per theme; each also has a five-step sequential ramp
   for the choropleths. Components style through these tokens only, never inside
   a media query, so the viewer's toggle can override in both directions.
   --------------------------------------------------------------------------- */
:root {
  --paper:#F4F3F8; --surface:#FFFFFF; --surface-2:#ECEAF3; --surface-3:#E2DFEC;
  --ink:#17141F; --ink-2:#443E55; --ink-3:#6E677F;
  --rule:#D8D4E4; --rule-soft:#E6E3EE;
  --accent:#5B4BA6; --accent-ink:#FFFFFF; --accent-wash:#EDEAF8;

  --g-p:#D55E00; --g-h:#0072B2; --g-l:#009E73;
  --t-local:#E69F00; --t-else:#CC79A7; --t-undet:#9A94A6;
  --p1:#FBE7D6; --p2:#F3C49E; --p3:#EA9C63; --p4:#E17A2E; --p5:#D55E00;
  --h1:#D9E9F5; --h2:#A9CDE9; --h3:#6FAAD8; --h4:#3389C4; --h5:#0072B2;
  --l1:#D6EFE7; --l2:#A3DCC9; --l3:#66C4A6; --l4:#2FAE87; --l5:#009E73;
  --map-none:#E4E1EC; --map-land:#E2DFEC; --map-land-edge:#CFCADF; --map-sea:#F7F6FA;

  --ok:#1F7A4D; --warn:#9A6410; --stop:#A63A3A;
  --ok-wash:#E4F2EA; --warn-wash:#F7EEDC; --stop-wash:#F7E7E7;
  --shadow:0 1px 2px rgba(23,20,31,.05), 0 8px 24px -12px rgba(23,20,31,.18);
  --radius:10px; --measure:68ch;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:#17141F; --surface:#201C2B; --surface-2:#2A2537; --surface-3:#332C42;
    --ink:#ECEAF4; --ink-2:#B4AECA; --ink-3:#8B8499;
    --rule:#362F47; --rule-soft:#2B2539;
    --accent:#A99CF0; --accent-ink:#17141F; --accent-wash:#292244;
    --g-p:#DB6A16; --g-h:#3B82D0; --g-l:#17A06F;
    --t-local:#F0B033; --t-else:#D98BB8; --t-undet:#7C7589;
    --p1:#3A2312; --p2:#6B3D14; --p3:#9C5514; --p4:#C06416; --p5:#DB6A16;
    --h1:#16263B; --h2:#1E3F63; --h3:#26598C; --h4:#2F6EB0; --h5:#3B82D0;
    --l1:#102E24; --l2:#14503C; --l3:#177255; --l4:#178D65; --l5:#17A06F;
    --map-none:#2A2537; --map-land:#332C42; --map-land-edge:#443B57; --map-sea:#1D1927;
    --ok:#5FC08C; --warn:#DCA84A; --stop:#E38080;
    --ok-wash:#1C3129; --warn-wash:#332A18; --stop-wash:#35211F;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
  }
}
:root[data-theme="light"] {
  --paper:#F4F3F8; --surface:#FFFFFF; --surface-2:#ECEAF3; --surface-3:#E2DFEC;
  --ink:#17141F; --ink-2:#443E55; --ink-3:#6E677F;
  --rule:#D8D4E4; --rule-soft:#E6E3EE;
  --accent:#5B4BA6; --accent-ink:#FFFFFF; --accent-wash:#EDEAF8;
  --g-p:#D55E00; --g-h:#0072B2; --g-l:#009E73;
  --t-local:#E69F00; --t-else:#CC79A7; --t-undet:#9A94A6;
  --p1:#FBE7D6; --p2:#F3C49E; --p3:#EA9C63; --p4:#E17A2E; --p5:#D55E00;
  --h1:#D9E9F5; --h2:#A9CDE9; --h3:#6FAAD8; --h4:#3389C4; --h5:#0072B2;
  --l1:#D6EFE7; --l2:#A3DCC9; --l3:#66C4A6; --l4:#2FAE87; --l5:#009E73;
  --map-none:#E4E1EC; --map-land:#E2DFEC; --map-land-edge:#CFCADF; --map-sea:#F7F6FA;
  --ok:#1F7A4D; --warn:#9A6410; --stop:#A63A3A;
  --ok-wash:#E4F2EA; --warn-wash:#F7EEDC; --stop-wash:#F7E7E7;
  --shadow:0 1px 2px rgba(23,20,31,.05), 0 8px 24px -12px rgba(23,20,31,.18);
}
:root[data-theme="dark"] {
  --paper:#17141F; --surface:#201C2B; --surface-2:#2A2537; --surface-3:#332C42;
  --ink:#ECEAF4; --ink-2:#B4AECA; --ink-3:#8B8499;
  --rule:#362F47; --rule-soft:#2B2539;
  --accent:#A99CF0; --accent-ink:#17141F; --accent-wash:#292244;
  --g-p:#DB6A16; --g-h:#3B82D0; --g-l:#17A06F;
    --t-local:#F0B033; --t-else:#D98BB8; --t-undet:#7C7589;
  --p1:#3A2312; --p2:#6B3D14; --p3:#9C5514; --p4:#C06416; --p5:#DB6A16;
  --h1:#16263B; --h2:#1E3F63; --h3:#26598C; --h4:#2F6EB0; --h5:#3B82D0;
  --l1:#102E24; --l2:#14503C; --l3:#177255; --l4:#178D65; --l5:#17A06F;
  --map-none:#2A2537; --map-land:#332C42; --map-land-edge:#443B57; --map-sea:#1D1927;
  --ok:#5FC08C; --warn:#DCA84A; --stop:#E38080;
  --ok-wash:#1C3129; --warn-wash:#332A18; --stop-wash:#35211F;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
}

* { box-sizing: border-box; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.display { font-family:"League Gothic", ui-sans-serif, sans-serif; font-weight:400;
  letter-spacing:.01em; text-transform:uppercase; line-height:.92; text-wrap:balance; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums; }
.sci { font-style: italic; }
a { color: var(--accent); text-underline-offset:3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px;
}

.preview-flag {
  background:var(--accent-wash); color:var(--ink-2); border-bottom:1px solid var(--rule);
  font-size:12.5px; padding:7px 20px; text-align:center; letter-spacing:.02em;
}
.preview-flag strong { color:var(--ink); }

/* ---- Masthead ---- */
.masthead { position:sticky; top:0; z-index:30;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--rule); }
.masthead-inner { max-width:1140px; margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:11px; margin-right:auto; cursor:pointer; }
.brand img { width:34px; height:34px; display:block; }
@media (prefers-color-scheme: dark) { .brand img { filter: invert(1) brightness(.92); } }
:root[data-theme="dark"] .brand img { filter: invert(1) brightness(.92); }
:root[data-theme="light"] .brand img { filter:none; }
.wordmark { font-size:34px; line-height:.8; }
.wordmark .lo { color:var(--accent); }
.brand-sub { font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); margin-top:3px; }
nav.primary { display:flex; gap:2px; flex-wrap:wrap; align-items:center; }
/* Buttons switch views inside the single-page app; anchors leave for a real page
   (how-it-works.html, curating.html). They must be indistinguishable in the bar --
   styled separately they read as stray hyperlinks crowded against the tabs. The
   anchors stay anchors rather than becoming buttons so they can still be opened in
   a new tab, copied, and followed with JavaScript off. */
nav.primary button,
nav.primary a { font:inherit; font-size:14px; background:none; border:0; cursor:pointer;
  color:var(--ink-2); padding:7px 11px; border-radius:7px;
  text-decoration:none; line-height:normal; white-space:nowrap; display:inline-block; }
nav.primary button:hover,
nav.primary a:hover { background:var(--surface-2); color:var(--ink); }
nav.primary button[aria-current="page"],
nav.primary a[aria-current="page"] { background:var(--accent); color:var(--accent-ink); }
.theme-toggle { font:inherit; font-size:13px; cursor:pointer; background:var(--surface);
  color:var(--ink-2); border:1px solid var(--rule); border-radius:7px; padding:6px 10px; line-height:1; }

main { max-width:1140px; margin:0 auto; padding:38px 20px 96px; }
.view { display:none; }
.view.active { display:block; animation:rise .28s ease both; }
@keyframes rise { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .view.active { animation:none; } * { transition:none !important; } }

.stack { display:flex; flex-direction:column; gap:38px; }
h1.page { font-size:clamp(38px,6vw,58px); margin:0 0 8px; }
h2.section-title { font-size:30px; margin:0 0 6px; }
h3 { font-size:17px; margin:0 0 8px; letter-spacing:-.01em; }
p { margin:0 0 12px; max-width:var(--measure); color:var(--ink-2); }
p.lead { font-size:17.5px; }
.eyebrow { font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3); margin:0 0 10px; }
.card { background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow); }
.card > :first-child { margin-top:0; }
.card > :last-child { margin-bottom:0; }
/* Known issues (About). Each entry is a short title followed by a full sentence
   that can run to a list of lineage names, so the entries need separating from
   one another and the title needs to read as a label rather than as the start of
   the sentence. Bulletless: these are independent notes, not a sequence. */
.issues { list-style:none; padding:0; margin:16px 0 0;
  display:flex; flex-direction:column; gap:14px; }
.issues li { border-left:2px solid var(--rule); padding-left:14px;
  color:var(--ink-2); font-size:14.5px; line-height:1.55; max-width:74ch; }
.issues li b { display:block; color:var(--ink); font-weight:600; margin-bottom:3px; }
.chip { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; padding:4px 11px;
  border-radius:999px; border:1px solid var(--rule); background:var(--surface); color:var(--ink-2); }
.dot { width:7px; height:7px; border-radius:50%; background:var(--ok); }
/* The release badge is the one thing a returning user checks first, so it is
   sized to be read at a glance rather than tucked away as fine print. */
.chip.release { font-size:16px; padding:9px 18px; gap:10px; color:var(--ink);
  box-shadow:var(--shadow); }
.chip.release .dot { width:9px; height:9px; }
.chip.release b { font-weight:600; font-variant-numeric:tabular-nums; }
.chip.release .lbl { color:var(--ink-3); font-size:13px; letter-spacing:.09em;
  text-transform:uppercase; }
.btn { font:inherit; font-size:14px; cursor:pointer; border-radius:8px; padding:9px 17px;
  border:1px solid transparent; background:var(--accent); color:var(--accent-ink); text-decoration:none;
  display:inline-flex; align-items:center; gap:8px; }
.btn.ghost { background:var(--surface); color:var(--ink-2); border-color:var(--rule); }
.btn.big { font-size:15.5px; padding:12px 22px; }
.btn:hover { filter:brightness(1.06); }
.btn-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* ---- Stats ---- */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:1px;
  background:var(--rule-soft); border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; }
.stat { background:var(--surface); padding:16px 18px; }
.stat .n { font-size:30px; line-height:1; }
.stat .k { font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); margin-top:7px; }

/* ---- Donuts ---- */
.donuts { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; }
.donut { background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius);
  padding:18px; text-align:center; }
.donut svg { display:block; margin:0 auto 8px; }
.donut .val { font-size:27px; line-height:1; }
.donut .lab { font-size:14px; margin-top:2px; }
.donut .sub { font-size:12px; color:var(--ink-3); margin-top:4px; }

/* ---- Rank comparison bars ----
   One card per taxonomic rank, so the four groups are unmistakably separate, and
   every bar carries its own genus label -- the reader never has to travel to a
   legend to decode a color. */
.ranks { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; }
.rank-card { background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--radius); padding:16px 18px; }
.rank-card h4 { margin:0 0 14px; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); padding-bottom:9px;
  border-bottom:1px solid var(--rule-soft); }
.rank-bars { display:grid; gap:11px; }
.rbar .glab { font-size:12px; color:var(--ink-2); display:flex;
  justify-content:space-between; gap:10px; margin-bottom:4px; }
.rbar .glab .v { color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.rbar .track { background:var(--surface-3); border-radius:3px; overflow:hidden; }
.rbar .fill { height:9px; border-radius:3px; display:block; }

/* ---- Maps ----
   The maps are the most interactive thing on the page, so this block breaks out
   of the text column and runs wider than the rest of the layout. */
.breakout { width:min(1460px, calc(100vw - 40px)); margin-left:50%; transform:translateX(-50%); }
.maps { display:grid; grid-template-columns:repeat(auto-fit,minmax(380px,1fr)); gap:18px; }
.map-panel { background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); padding:18px; }
.map-panel h4 { margin:0 0 2px; font-size:16px; }
.map-panel .cap { font-size:12.5px; color:var(--ink-3); margin:0 0 12px; }
.map-panel svg { width:100%; height:auto; display:block; }
.map-panel path { stroke:var(--surface); stroke-width:.4; vector-effect:non-scaling-stroke; }
.map-panel path:hover { stroke:var(--ink); stroke-width:1; }
.scale { display:flex; align-items:center; gap:5px; margin-top:11px; font-size:11px; color:var(--ink-3); flex-wrap:wrap; }
.scale i { width:26px; height:11px; border-radius:2px; display:inline-block; }
.map-tip { font-size:12.5px; color:var(--ink-2); min-height:1.5em; margin-top:8px; }

.legend { display:flex; gap:18px; flex-wrap:wrap; font-size:13px; color:var(--ink-2); }
.legend i { width:10px; height:10px; border-radius:2px; display:inline-block; margin-right:7px; }
.sw-p { background:var(--g-p); } .sw-h { background:var(--g-h); } .sw-l { background:var(--g-l); }
.genus-bar { display:flex; gap:2px; height:12px; margin:6px 0 12px; }
.genus-bar span { border-radius:2px; }

/* ---- Table index + tables ---- */
.tindex { display:grid; gap:1px; background:var(--rule-soft); border:1px solid var(--rule);
  border-radius:var(--radius); overflow:hidden; }
.tindex-row { background:var(--surface); padding:15px 18px; display:flex; gap:16px;
  align-items:flex-start; flex-wrap:wrap; }
.tindex-row:hover { background:var(--surface-2); }
.tindex-main { flex:1; min-width:260px; }
.tindex-main a { font-size:15.5px; font-weight:600; cursor:pointer; }
.tindex-main p { margin:3px 0 0; font-size:13.5px; color:var(--ink-3); max-width:62ch; }
.tindex-actions { display:flex; gap:7px; align-items:center; }
.mini { font:inherit; font-size:12px; cursor:pointer; background:var(--surface);
  color:var(--ink-2); border:1px solid var(--rule); border-radius:6px; padding:5px 10px; text-decoration:none; }
.mini:hover { background:var(--surface-3); color:var(--ink); }
.rowcount { font-size:12px; color:var(--ink-3); white-space:nowrap; }

.tbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.tbar select, .tbar input { font:inherit; font-size:13.5px; padding:7px 10px;
  border:1px solid var(--rule); border-radius:7px; background:var(--surface); color:var(--ink); }
.pager { display:flex; gap:6px; align-items:center; margin-left:auto; }
.pager button { font:inherit; font-size:13px; cursor:pointer; background:var(--surface);
  color:var(--ink-2); border:1px solid var(--rule); border-radius:6px; padding:5px 11px; }
.pager button:disabled { opacity:.4; cursor:default; }
.pager .pos { font-size:12.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; padding:0 4px; }

.table-wrap { overflow-x:auto; border:1px solid var(--rule); border-radius:var(--radius); background:var(--surface); }
table { border-collapse:collapse; width:100%; font-size:13.5px; }
thead th { background:var(--surface-2); text-align:left; font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); font-weight:600; padding:9px 12px;
  white-space:nowrap; border-bottom:1px solid var(--rule); }
thead tr.colfilters th { padding:6px 8px; background:var(--surface); }
thead tr.colfilters input { width:100%; min-width:78px; font:inherit; font-size:12px;
  padding:5px 7px; border:1px solid var(--rule); border-radius:5px;
  background:var(--paper); color:var(--ink); }
tbody td { padding:8px 12px; border-bottom:1px solid var(--rule-soft); color:var(--ink-2); white-space:nowrap; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover td { background:var(--surface-2); }
td.key { font-family: ui-monospace, Menlo, Consolas, monospace; color:var(--ink); font-weight:600; }
td.num { text-align:right; font-variant-numeric:tabular-nums; }
td.wrap { white-space:normal; min-width:280px; }
/* A cytochrome b sequence is ~479 characters. Left on one line it would make the
   Grand Lineage Summary scroll sideways for a screen and a half, so it wraps
   inside a capped column and breaks between bases rather than at spaces (there
   are none). Monospace so the bases line up down the rows. */
td.seq { font-family: ui-monospace, Menlo, Consolas, monospace; font-size:11px;
  line-height:1.5; white-space:normal; overflow-wrap:anywhere; word-break:break-all;
  min-width:300px; max-width:380px; color:var(--ink-3); }
.genus-pill { display:inline-flex; align-items:center; gap:6px; }
.genus-pill i { width:8px; height:8px; border-radius:2px; flex:none; }
.empty { padding:28px; text-align:center; color:var(--ink-3); }

/* ---- Checker ---- */
.lookup-box { display:grid; gap:10px; }
.lookup-box textarea { width:100%; min-height:130px; resize:vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12.5px; line-height:1.7; padding:13px 14px; border-radius:var(--radius);
  border:1px solid var(--rule); background:var(--surface); color:var(--ink); }
.result { display:none; margin-top:14px; }
.result.show { display:block; }
.verdict { display:flex; gap:11px; align-items:flex-start; padding:14px 16px;
  border-radius:var(--radius); border:1px solid; margin-bottom:10px; }
.verdict .mark { font-size:17px; line-height:1.4; }
.verdict h4 { margin:0 0 3px; font-size:15px; }
.verdict p { margin:0; font-size:13.5px; max-width:none; }
.v-ok { background:var(--ok-wash); border-color:color-mix(in srgb,var(--ok) 40%,transparent); color:var(--ink); }
.v-warn { background:var(--warn-wash); border-color:color-mix(in srgb,var(--warn) 40%,transparent); color:var(--ink); }
.v-stop { background:var(--stop-wash); border-color:color-mix(in srgb,var(--stop) 40%,transparent); color:var(--ink); }
.checklist { list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--rule-soft);
  border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; }
.checklist li { display:flex; gap:10px; align-items:baseline; background:var(--surface);
  padding:9px 14px; font-size:13.5px; color:var(--ink-2); }
.checklist .tag { font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  padding:2px 7px; border-radius:4px; flex:none; min-width:58px; text-align:center; }
.t-pass { background:var(--ok-wash); color:var(--ok); }
.t-warn { background:var(--warn-wash); color:var(--warn); }
.t-fail { background:var(--stop-wash); color:var(--stop); }

/* ---- Naming a new lineage ----
   Only appears under a "looks like a new lineage" result. The acronym tags reuse
   the checklist pills, so a proposed name reads as one more line of the same
   report rather than as a separate form. */
/* .naming is the panel the sequence checker grows under a "new lineage" result;
   .naming-out is the answer itself, which also stands alone in the "Check a
   name" card. Everything about the ANSWER is keyed on .naming-out so both places
   render identically. */
.naming { margin-top:12px; padding:14px 16px; border:1px solid var(--rule);
  border-radius:var(--radius); background:var(--surface-2); }
.naming .eyebrow { margin-bottom:8px; }
.naming input, .lookup-box input { font:inherit; font-size:14px; padding:9px 12px;
  flex:1 1 220px; border-radius:8px; border:1px solid var(--rule);
  background:var(--surface); color:var(--ink); }
.fine { font-size:12.5px; color:var(--ink-3); margin:10px 0 0; max-width:none; }
.naming-out .checklist { margin-top:10px; }
.naming-out .checklist .tag { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing:.04em; min-width:70px; }

/* ---- Submit ---- */
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.step { background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); padding:20px; }
.step .num { font-size:34px; color:var(--accent); line-height:1; }
.step h3 { margin:10px 0 6px; font-size:18px; }
.step p { font-size:14px; margin:0; }
.pull { border-left:3px solid var(--accent); background:var(--accent-wash);
  padding:15px 19px; border-radius:0 var(--radius) var(--radius) 0; }
.pull p { margin:0; max-width:none; }
.pull strong { color:var(--ink); }
details.more { border:1px solid var(--rule); border-radius:var(--radius); background:var(--surface); }
details.more + details.more { margin-top:9px; }
details.more summary { cursor:pointer; padding:14px 18px; font-weight:600; font-size:14.5px; list-style:none; }
details.more summary::-webkit-details-marker { display:none; }
details.more summary::before { content:"+"; color:var(--accent); margin-right:10px; font-weight:400; }
details.more[open] summary::before { content:"–"; }
details.more .body { padding:0 18px 18px; }
details.more .body > :first-child { margin-top:0; }
details.more .body ul { padding-left:19px; font-size:14px; color:var(--ink-2); }
details.more .body li { margin-bottom:6px; }
details.more .body li::marker { color:var(--ink-3); }
dl.fields { display:grid; grid-template-columns:max-content 1fr; gap:9px 20px; margin:0; font-size:14px; }
dl.fields dt { font-weight:600; color:var(--ink); }
dl.fields dd { margin:0; color:var(--ink-2); }
@media (max-width:560px) { dl.fields { grid-template-columns:1fr; gap:2px; }
  dl.fields dd { margin-bottom:11px; } }

.files { display:grid; gap:1px; background:var(--rule-soft); border:1px solid var(--rule);
  border-radius:var(--radius); overflow:hidden; }
.files a { display:flex; gap:14px; align-items:center; flex-wrap:wrap; background:var(--surface);
  padding:13px 17px; text-decoration:none; color:inherit; }
.files a:hover { background:var(--surface-2); }
.files .nm { font-weight:600; font-size:14.5px; min-width:180px; }
.files .ds { font-size:13px; color:var(--ink-3); flex:1; }
.files .fm { font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
  border:1px solid var(--rule); border-radius:4px; padding:2px 7px; }

/* Tools that are planned but not released yet. Muted rather than hidden, so the
   toolkit shows what is coming without implying any of it is downloadable. The
   row is not a working link, so it must not present itself as one. */
.files a.wip { cursor:default; opacity:.72; }
.files a.wip:hover { background:var(--surface); }
.badge-wip { display:inline-block; margin-left:8px; font-size:10px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--warn);
  background:var(--warn-wash); border:1px solid var(--warn); border-radius:4px;
  padding:1px 6px; vertical-align:2px; }

/* ---- The Curators (a journal-style masthead: citable recognition) ---- */
.board-group + .board-group { margin-top:22px; }
.board-group h3 { font-size:12px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 10px; }
.people { display:grid; gap:1px; background:var(--rule-soft); border:1px solid var(--rule);
  border-radius:var(--radius); overflow:hidden; }
.person { background:var(--surface); padding:13px 17px; display:flex; gap:16px;
  align-items:baseline; flex-wrap:wrap; }
.person .nm { font-size:15px; color:var(--ink); font-weight:600; }
.person .role { font-size:13.5px; color:var(--ink-2); }
.person .aff { font-size:13px; color:var(--ink-3); }
.person .yrs { font-size:12.5px; color:var(--ink-3); margin-left:auto;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.person.vacant .nm { color:var(--ink-3); font-weight:400; font-style:italic; }

/* ---- Queue / contributors ---- */
.status-track, .board { display:grid; gap:1px; background:var(--rule-soft);
  border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; }
/* Both lists grow without bound as submissions and contributors accumulate, so
   cap their height and let them scroll internally rather than pushing the rest
   of the page down. max-height is in rem so it tracks the user's font size, and
   the value is a deliberate half-row (about 8.5 rows) so a clipped row is
   visible at the fold and the list reads as scrollable. overflow-y:auto adds no
   scrollbar until the content actually overflows, so short lists look normal. */
.status-track, .board { max-height:34rem; overflow-y:auto; }
.status-row { background:var(--surface); padding:13px 17px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.status-row .ref { font-size:14px; color:var(--ink); min-width:210px; }
.status-row .ref small { display:block; color:var(--ink-3); font-size:12px; }
.pill { font-size:11px; letter-spacing:.07em; text-transform:uppercase; padding:3px 10px; border-radius:999px; }
.p-queue { background:var(--surface-2); color:var(--ink-3); }
.p-check { background:var(--warn-wash); color:var(--warn); }
.p-live { background:var(--ok-wash); color:var(--ok); }
.status-row .when { font-size:12.5px; color:var(--ink-3); margin-left:auto; }
.board-row { display:grid; grid-template-columns:34px 1fr auto auto; gap:16px; align-items:center;
  background:var(--surface); padding:12px 17px; }
.board-row .rank { font-size:19px; color:var(--ink-3); text-align:right; }
.board-row .who { font-size:14.5px; color:var(--ink); }
.board-row .who small { display:block; color:var(--ink-3); font-size:12px; }
.board-row .metric { font-size:15px; font-variant-numeric:tabular-nums; color:var(--ink); }
.board-row .metric small { color:var(--ink-3); font-size:11px; display:block;
  letter-spacing:.07em; text-transform:uppercase; }

footer.site { border-top:1px solid var(--rule); margin-top:60px; padding:26px 20px 60px;
  color:var(--ink-3); font-size:13px; }
footer.site .inner { max-width:1140px; margin:0 auto; display:flex; gap:22px; flex-wrap:wrap; }
footer.site a { color:var(--ink-2); }

@media (max-width:640px) {
  .wordmark { font-size:28px; }
  nav.primary button, nav.primary a { padding:6px 8px; font-size:13px; }
  .board-row { grid-template-columns:26px 1fr auto; }
  .rank-row { grid-template-columns:1fr; }
  .rank-row .rlab { text-align:left; }
}

/* ---------------------------------------------------------------------------
   Map page. Leaflet draws into .leaflet-wrap; the controls sit above it in one
   wrapping row so they stack at phone width. Genus colors come from the same
   --g-* tokens as every other figure.
   --------------------------------------------------------------------------- */
.mapctl { display:flex; flex-wrap:wrap; gap:14px 22px; align-items:flex-end; }
.mapctl label { display:flex; flex-direction:column; gap:6px; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); min-width:220px; flex:1 1 220px; }
.mapctl .combo { position:relative; display:block; }
.mapctl .combo input { font:inherit; font-size:14px; letter-spacing:0; text-transform:none; width:100%;
  box-sizing:border-box; padding:8px 30px 8px 10px; border:1px solid var(--rule); border-radius:8px;
  background:var(--surface); color:var(--ink); }
.mapctl .combo-clear { position:absolute; right:4px; top:50%; transform:translateY(-50%); border:0;
  background:none; color:var(--ink-3); cursor:pointer; font-size:17px; line-height:1; padding:4px 7px; }
.mapctl .combo-clear:hover { color:var(--ink); }
.mapctl .combo-list { position:absolute; z-index:1100; left:0; right:0; top:calc(100% + 4px); max-height:300px;
  overflow:auto; margin:0; padding:4px 0; list-style:none; background:var(--surface); border:1px solid var(--rule);
  border-radius:8px; box-shadow:0 8px 24px -12px rgba(0,0,0,.35); }
.mapctl .combo-list li { padding:6px 10px; cursor:pointer; font-size:14px; letter-spacing:0; text-transform:none; color:var(--ink); }
.mapctl .combo-list li:hover, .mapctl .combo-list li[aria-selected="true"] { background:var(--accent-wash); }
.mapctl .combo-list li.sci { font-style:italic; }
.mapctl .combo-list li.more { color:var(--ink-3); cursor:default; font-style:italic; }
.mapctl .toggles { display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--ink-2); padding-bottom:6px; }
.mapctl .toggles label { flex:0 0 auto; min-width:0; flex-direction:row; align-items:center; gap:8px; font-size:13px; text-transform:none; letter-spacing:0; }
.mapctl .toggles input { margin:0; accent-color:var(--accent); }
.mapctl .toggles label[hidden] { display:none; }
.mapctl button.ghost { font:inherit; font-size:13.5px; padding:8px 14px; border:1px solid var(--rule);
  border-radius:8px; background:var(--surface); color:var(--ink-2); cursor:pointer; }
.mapctl button.ghost:hover { border-color:var(--ink-3); color:var(--ink); }
.map-summary { margin:-18px 0 0; font-size:14px; color:var(--ink-2); }
.leaflet-wrap { width:100%; height:min(72vh, 640px); min-height:320px; border:1px solid var(--rule);
  border-radius:var(--radius); overflow:hidden; background:var(--map-sea); }
/* The map's own element carries BOTH classes (Leaflet adds .leaflet-container to the
   element it is given), so the selector has no space in it. It had one until 2026-10-02
   and so matched nothing: the sea was Leaflet's default gray (#ddd) in both themes, the
   site's --map-sea never applied. Two classes also outrank Leaflet's own rule, whose
   stylesheet is loaded after this one. */
.leaflet-wrap.leaflet-container { background:var(--map-sea); font-family:inherit; }
/* In the equal-area projection the world has an edge, and the sea is drawn as a shape
   inside it. What lies outside that shape is not sea, so it takes the page's surface. */
.leaflet-wrap.leaflet-container.equal-area { background:var(--surface); }
.leaflet-wrap .leaflet-popup-content-wrapper { background:var(--surface); color:var(--ink); border-radius:8px; }
.leaflet-wrap .leaflet-popup-tip { background:var(--surface); }
.leaflet-wrap .leaflet-bar a { background:var(--surface); color:var(--ink); border-color:var(--rule); }
.leaflet-wrap .leaflet-bar a:hover { background:var(--surface-2); }
.leaflet-wrap .leaflet-control-attribution { background:color-mix(in srgb, var(--surface) 80%, transparent); color:var(--ink-3); font-size:10px; }
.leaflet-wrap .leaflet-control-attribution a { color:var(--ink-2); }
.leaflet-wrap .leaflet-popup-content { font:13px/1.45 inherit; margin:10px 12px; max-width:340px; }
.leaflet-wrap .leaflet-popup-content b { font-weight:600; }
.leaflet-wrap .leaflet-popup-content table { border-collapse:collapse; margin-top:6px; font-size:12.5px; }
.leaflet-wrap .leaflet-popup-content td { padding:1px 8px 1px 0; vertical-align:top; white-space:nowrap; }
.leaflet-wrap .tx-dot { display:inline-block; width:9px; height:9px; border-radius:50%; border:1px solid rgba(0,0,0,.25); vertical-align:-1px; }
.leaflet-wrap .leaflet-popup-content .sci { font-style:italic; }
.map-legend { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:-22px; font-size:13px; color:var(--ink-2); }
.map-legend i { display:inline-block; width:11px; height:11px; border-radius:50%; margin-right:6px;
  vertical-align:-1px; border:1px solid rgba(0,0,0,.25); }