/* ══ PSI HUD v4 — THE VISTA IN ITS MOST SERIOUS MODE ═══════════════════════════════════════════════
   Landed 2026-09-29 on terai-arc as the reference; the six sibling PSI sites take this file verbatim.
   Loaded AFTER css/styles.css, so at equal specificity it wins; every selector is scoped to #psipanel.

   THE BRIEF: "look at how we did it in the earth dashboard … extremely dense but easily navigable, all
   data and tables and information accessible … so many layers of data with no scroll or menu system
   necessary. pop ups that took the whole screen … the menu items fall around the central display, and
   when they are clicked on a full screen immersive thing pops up, or the opposite side menu is replaced.
   … the psi page itself is supposed to stand out. find a way to stylistically blend the vista format and
   text feel with the bloomberg style earth dashboard data depth and display."

   SO: the dashboard contributes the STRUCTURE — two full-height HUD columns either side of the terrain,
   metric tiles with mono micro-labels, a 2-column grid of chapter tiles, dataset-explorer lists, sticky
   ✕ CLOSE headers, full-screen glass panels, the slide/scale motion. The vista contributes the TYPE and
   the SURFACES — Fraunces for chapter titles, species names and the hero figure; Hanken Grotesk 13px/1.55
   at .72 for running text (exactly #caption's voice on the Overview tab); the vista's glass, radii and
   hairlines. Mono labels are JetBrains Mono, self-hosted below, never under 9px on this site.

   ⛔⛔ THE RULE THAT MAKES THIS LAYOUT TRUE: A COLUMN HAS A FIXED BUDGET AND CONTENT MUST FIT OR LEAVE.
   `overflow:hidden` on a column is deliberate and is NOT a way to hide overflow — tools/check_psi_surface
   measures the fixed furniture against the box and fails, so anything that does not fit must move into a
   full-screen panel. The one thing allowed to scroll is the roster list, with a fade edge, on a site with
   more species than fit. The chapter tiles never scroll: they ARE the menu. */

/* ── the mono, self-hosted ────────────────────────────────────────────────────────────────────────
   One variable woff2 (wght 100–800), copied from landseed-launch-site where it was already self-hosted;
   licence notice appended to public/fonts/OFL.txt. Self-hosting is a data-protection requirement: a
   Google Fonts request transmits the visitor's IP to the US. No external request is made by this file. */
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;
  src:url(../public/fonts/jetbrains-mono-latin.woff2) format("woff2")}

#psipanel{
  --hud-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --hud-serif:"Fraunces",Georgia,serif;
  --hud-sans:var(--sans,"Hanken Grotesk",system-ui,sans-serif);
  --hud-text:#F0F0EA;--hud-bright:#F4F3EE;
  --hud-dim:rgba(240,240,234,.72);--hud-faint:rgba(240,240,234,.52);--hud-ghost:rgba(240,240,234,.38);
  --hud-green:#00BE5A;--hud-moss:#2D5A27;--hud-forest:#0D1F0D;--hud-warm:#E88C6A;--hud-amber:#E8B64C;
  --hud-line:rgba(240,240,234,.09);--hud-edge:rgba(0,190,90,.16);--hud-edge-hi:rgba(0,190,90,.38);
  --hud-tint:rgba(0,190,90,.06);--hud-card:rgba(6,13,8,.55);
  --hud-glass:linear-gradient(180deg,rgba(6,11,9,.64) 0,rgba(6,11,9,.82) 100%);
  --hud-ease:cubic-bezier(.16,1,.3,1);
  /* THE BRIEF (2026-09-29): "all displays beautiful, large, clear, easily navigable … large is better
     than small, as long as it is easy to navigate." Density comes from the layout, not from small type:
     mono labels 10px, running text never under the caption's 13px, panel prose 14.5px. */
  --hud-fs-micro:10px;--hud-fs-xs:11px;--hud-fs-sm:12px;--hud-fs-base:13px;--hud-fs-md:14.5px;
  --hud-fs-hero:40px;--hud-fs-name:16.5px;--hud-row:46px;
  --hud-pill-bg:rgba(0,190,90,.1);--hud-pill-line:rgba(0,190,90,.42);--hud-pill-ink:var(--alive,#00FF64);
  --hud-rail-w:min(352px,26vw);--hud-top:calc(76px + var(--sat,0px));--hud-bottom:20px;
  --psi-dockzone:0px;                                 /* the v3 dock is gone; nothing clears it */
}

/* ── the two columns ──────────────────────────────────────────────────────────────────────────────
   Full height between the header and the bottom edge. The vista's tab bar and the data credit stack
   in the CENTRE band between them (see the end of this file), so neither column has to stop short. */
#psipanel .psi-rail{
  position:fixed;top:var(--hud-top);bottom:var(--hud-bottom);width:var(--hud-rail-w);
  display:flex;flex-direction:column;gap:8px;overflow:hidden;
  padding:12px 12px 12px;border-radius:12px;
  background:var(--hud-glass);
  backdrop-filter:blur(14px) saturate(.92);-webkit-backdrop-filter:blur(14px) saturate(.92);
  border:1px solid var(--hud-line);border-top-color:rgba(0,190,90,.2);
  box-shadow:0 20px 60px rgba(0,0,0,.45)}
@media (max-width:1300px){#psipanel{--hud-fs-hero:34px}}
@media (max-height:799px){#psipanel{--hud-fs-name:15px;--hud-row:40px}}
#psipanel .psi-rail-l{left:calc(24px + var(--sal,0px))}
#psipanel .psi-rail-r{right:calc(20px + var(--sar,0px));position:fixed}

/* a column header is one mono line: what this column is, and how many of the thing it holds */
#psipanel .psi-railh{flex:none;display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  margin:0 2px;font-family:var(--hud-mono);font-size:var(--hud-fs-micro);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--hud-green)}
#psipanel .psi-railh span{color:var(--hud-faint);font-weight:500;letter-spacing:.08em;text-transform:none}

/* ── metric tiles: INDEX · SINCE · SPECIES · SPAN ─────────────────────────────────────────────────
   Four tiles in one row, each its own hairline object (the dashboard's .metric-xs), the index figure in
   Fraunces because it is the one number on the page a reader will quote. */
#psipanel .psi-tiles{flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;
  border:0;border-radius:0;background:none;overflow:visible}
/* ⚠ A WARNING IS NOT A NUMBER AND DOES NOT FIT A NUMBER'S TILE. When the roster changed, psi.js makes
   the "Since" tile a warn tile: value "—", sub "not comparable · roster changed". In a 79px column that
   sub ran to four lines and the tile beside it ellipsed "2012–2022". So a warn tile becomes a one-line
   strip under the row, and the row is three columns (:has; without it the strip still spans, and the
   fourth cell is empty rather than wrong). A site whose roster held keeps four tiles in one row. */
#psipanel .psi-tiles:has(.psi-tile-warn){grid-template-columns:1.2fr 1fr 1.2fr}
#psipanel .psi-tile{display:flex;flex-direction:column;gap:3px;min-width:0;padding:8px 9px 8px;
  border:1px solid var(--hud-line);border-left:1px solid var(--hud-line);border-radius:6px;
  background:var(--hud-card);transition:border-color .2s ease,box-shadow .2s ease}
#psipanel .psi-tile:first-child{border-left:1px solid var(--hud-line)}
#psipanel .psi-tile:hover{border-color:var(--hud-edge-hi);box-shadow:0 0 22px rgba(0,190,90,.06)}
#psipanel .psi-tile-k{font-family:var(--hud-mono);font-size:var(--hud-fs-micro);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--hud-faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#psipanel .psi-tile-v{font-family:var(--hud-sans);font-size:18px;font-weight:700;letter-spacing:-.03em;
  line-height:1.05;color:var(--hud-text);font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#psipanel .psi-tile:first-child .psi-tile-v{font-family:var(--hud-serif);font-weight:500;font-size:var(--hud-fs-hero);
  letter-spacing:-.015em;line-height:1;color:var(--hud-bright)}
#psipanel .psi-tile-s{font-family:var(--hud-sans);font-size:var(--hud-fs-xs);line-height:1.3;
  color:var(--hud-faint)}
#psipanel .psi-tile-warn .psi-tile-v{color:var(--hud-faint)}
#psipanel .psi-tile-warn .psi-tile-s{color:var(--hud-amber)}
/* (after .psi-tile, so the strip's display:grid wins over the tile's flex column) */
#psipanel .psi-tile-warn{grid-column:1 / -1;grid-row:2;display:grid;grid-template-columns:auto auto 1fr;
  align-items:baseline;gap:0 9px;padding:5px 9px}
#psipanel .psi-tile-warn .psi-tile-v{font-size:14px;line-height:1.2}
#psipanel .psi-tile-warn .psi-tile-s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--hud-fs-sm)}

/* ── the unit of the line, echoed from the measurement badge ──────────────────────────────────── */
#psipanel .psi-hud-badge{flex:none;padding:6px 10px 7px;border-left:2px solid rgba(0,190,90,.6);
  background:rgba(240,240,234,.035);border-radius:0 6px 6px 0}
#psipanel .psi-hud-badge--missing{border-left-color:#E8663D}
/* ⚠ AT 720px TALL THE COLUMN'S BUDGET IS 600px AND THE ECHO IS THE ONE BLOCK THAT IS ALREADY SOMEWHERE
   ELSE: it is a clone of the badge that leads the "How to read" panel, whose tile is two blocks down.
   Measured 2026-09-29 at 1280×720: with it, the last three chapter tiles were below the column's edge;
   without it, every tile and the whole roster fit. The chart takes the room instead. */
@media (max-height:799px){
  #psipanel .psi-rail-l > .psi-hud-badge{display:none}
  /* while a species or reserve is open on a short screen, the context strip and the tiles are the
     column; the chart comes back the moment the card closes */
  #psipanel .psi-rail-l[data-ctx] > .psi-panel{display:none}
  #psipanel .psi-hud-ctx .psi-hud-nav{max-height:76px}
}
#psipanel .psi-hud-badge .psid-badge-h{margin:0 0 3px;font-family:var(--hud-mono);font-size:var(--hud-fs-micro);
  font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--hud-faint)}
#psipanel .psi-hud-badge .psid-badge-m{margin:0;font-family:var(--hud-sans);font-size:var(--hud-fs-base);
  line-height:1.45;color:var(--hud-dim)}

/* ── the trajectory, as a featured card ──────────────────────────────────────────────────────────
   ⛔ flex:none + overflow:hidden on purpose: min-height:0 once let the card shrink while its SVG went on
   painting through the block below it, and no gate saw it. The card keeps its content height. */
#psipanel .psi-rail-l .psi-panel{position:relative;flex:none;display:flex;flex-direction:column;gap:4px;
  margin:0;max-width:none;overflow:hidden;padding:9px 10px 2px;border:1px solid var(--hud-line);
  border-radius:6px;background:var(--hud-card)}
#psipanel .psi-rail-l .psi-panel::before,#psipanel .psi-rail-l .psi-panel::after{content:"";position:absolute;
  width:9px;height:9px;border:0 solid rgba(0,190,90,.42);pointer-events:none}
#psipanel .psi-rail-l .psi-panel::before{top:5px;left:5px;border-width:1px 0 0 1px}
#psipanel .psi-rail-l .psi-panel::after{bottom:5px;right:5px;border-width:0 1px 1px 0}
#psipanel .psi-h{margin:0 2px;font-family:var(--hud-serif);font-size:15px;font-weight:500;letter-spacing:-.01em;
  line-height:1.25;color:var(--hud-bright)}
/* the chart takes the height the viewport gives it: 96px at 720 tall, 128 at 768, 220 at 900 and up,
   so a tall window shows a taller chart and a short one still shows every chapter tile */
/* overflow VISIBLE: the last year label is centred on the last point, 16 user units from the viewBox
   edge, and at 21 units of type it needs ~25 — it spills into the card's padding instead of clipping
   to "202" (seen 2026-09-29 at 1440×900) */
#psipanel .psi-rail-l .psi-panel > svg{flex:none;width:100%;height:auto;overflow:visible;max-height:none}
/* ⛔ SVG TEXT IS SIZED IN USER UNITS, NOT SCREEN PIXELS. The chart's viewBox is 640 wide and it is
   drawn at ~326px, so a "9px" here is 4.6px on screen — measured 2026-09-29, illegible. 19 user units
   is 9.7px at 1440 and 9.1px at 1280 (a 307px column), which is the floor. The rotated y-axis unit
   label runs along a 182-unit axis and cannot be that large without leaving the box; it stays small,
   and the unit it names is also the INDEX tile's label and the card's title. */
#psipanel .psi-tick text,#psipanel .psi-xlab,#psipanel .psi-nlab,#psipanel .psi-axis{
  font-family:var(--hud-mono);font-size:21px;letter-spacing:.02em}
/* CSS transform overrides the attribute: the unit label moves 9 units left so the 21-unit tick figures clear it */
#psipanel .psi-axis-y{font-size:12px;transform:translate(5px,28px) rotate(-90deg)}
/* ⛔ THERE ARE NO ROSTER-NODE LABELS ANY MORE, so the two rules that styled them are gone with
   them (2026-09-30). psi.js emits the node as a <circle> plus a <title>; the count a reader used
   to read in ink on the line is now in that <title> and in each point's own tooltip. The rule that
   gave those labels a fill (a6, earlier the same day) fixed a real defect — black text on a dark
   chart — in text this change then removed entirely; it is deleted as dead, not as wrong.
   ⚠ check_css_selectors CANNOT SEE THIS. It matches class TOKENS, and `psi-roster-node` is still
   very much in the sources, so `.psi-roster-node text` reads as reachable while matching nothing.
   A descendant selector whose element child disappears is invisible to that gate by construction. */
#psipanel .psi-roster-node circle{fill:rgba(6,13,8,.9);stroke:var(--hud-green);stroke-width:2px}
/* what the card does not carry stays in the DOM and goes to a panel (scope, caveat, provenance, break)
   or is hidden here (the roster's own heading, restated by the right column's header) */
#psipanel .psi-rail-l .psi-scope,#psipanel .psi-rail-l .psi-caveat,#psipanel .psi-rail-l .psi-prov,
#psipanel .psi-rail-l .psi-h3,#psipanel .psi-rail-l .psi-break,#psipanel .psi-rail-l .psi-icon-note{display:none}

/* ── the chapter tiles: the menu that falls around the terrain ────────────────────────────────── */
/* the grid takes whatever height the column has left (a tall window gets taller tiles, like the
   dashboard's .ds-grid filling its column), never less than 36px a row and never more than 64 */
#psipanel .psi-hud-tiles{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:minmax(40px,64px);align-content:start;gap:3px;margin:0}
@supports (grid-auto-rows:minmax(40px,1fr)){
  #psipanel .psi-hud-tiles{grid-auto-rows:minmax(40px,1fr);max-height:calc(var(--psi-tile-rows,6) * 67px)}}
#psipanel .psi-tile-ch{position:relative;display:flex;flex-direction:column;justify-content:center;gap:2px;
  min-width:0;min-height:40px;padding:6px 20px 6px 9px;text-align:left;cursor:pointer;
  font-family:var(--hud-sans);color:var(--hud-text);
  border:1px solid var(--hud-line);border-radius:6px;background:var(--hud-card);
  transition:border-color .15s ease,background .15s ease,transform .15s ease}
#psipanel .psi-tile-ch::after{content:"\25B8";position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-family:var(--hud-mono);font-size:var(--hud-fs-xs);color:rgba(0,190,90,.35);transition:color .15s ease}
#psipanel .psi-tile-ch:hover{border-color:var(--hud-edge-hi);background:var(--hud-tint);transform:translateY(-1px)}
#psipanel .psi-tile-ch:hover::after{color:var(--hud-green)}
#psipanel .psi-tile-ch:active{transform:none}
#psipanel .psi-tile-ch[aria-expanded="true"]{border-color:var(--hud-green);background:rgba(0,190,90,.1)}
#psipanel .psi-tile-ch:focus-visible{outline:2px solid var(--hud-green);outline-offset:1px}
#psipanel .psi-tile-ch-l{font-size:13px;font-weight:600;line-height:1.2;color:var(--hud-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#psipanel .psi-tile-ch-s{font-family:var(--hud-mono);font-size:var(--hud-fs-micro);letter-spacing:.04em;
  line-height:1.2;color:var(--hud-ghost);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#psipanel .psi-tile-ch-s:empty{display:none}

/* ── the right column: finder, what moved, the roster ─────────────────────────────────────────── */
#psipanel .psi-hud-find{flex:none;display:flex;flex-direction:column;gap:4px}
#psipanel .psi-hud-find-i{width:100%;height:32px;padding:0 11px;box-sizing:border-box;
  font-family:var(--hud-sans);font-size:var(--hud-fs-base);letter-spacing:0;color:var(--hud-text);
  background:rgba(240,240,234,.05);border:1px solid var(--hud-line);border-radius:6px;outline:0;
  -webkit-appearance:none;appearance:none;transition:border-color .15s ease}
#psipanel .psi-hud-find-i::placeholder{color:var(--hud-ghost)}
#psipanel .psi-hud-find-i:focus{border-color:var(--hud-edge-hi)}
#psipanel .psi-hud-find-i::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
#psipanel .psi-hud-hits[hidden]{display:none}

/* mini-nav pills: the dashboard's .mini-nav-item, in the vista's ink */
/* ⭐ ONE PILL, THE VISTA'S: these are #cap-links' .cap-link tokens — the same background, hairline,
   ink, face, weight and radius — so a chapter chip on a panel and a link under the Overview caption
   are the same object. No second visual system. */
#psipanel .psi-hud-nav{display:flex;flex-wrap:wrap;gap:6px}
#psipanel .psi-hud-nav-i,#psipanel .psid-dt-links button{font-family:var(--hud-sans);font-size:12px;font-weight:600;
  letter-spacing:0;color:var(--hud-pill-ink);padding:6px 12px;border:1px solid var(--hud-pill-line);border-radius:999px;
  background:var(--hud-pill-bg);cursor:pointer;transition:.2s;line-height:1.2;
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
#psipanel .psi-hud-nav-i:hover,#psipanel .psid-dt-links button:hover{background:var(--hud-green);color:var(--hud-forest);border-color:var(--hud-green)}
#psipanel .psi-hud-nav-i.is-on{background:var(--hud-green);color:var(--hud-forest);border-color:var(--hud-green)}
#psipanel .psi-hud-nav-i:focus-visible{outline:2px solid var(--hud-green);outline-offset:1px}

/* what moved: rising and falling as section rules, one dense line per species */
#psipanel .psi-moved{flex:none;display:flex;flex-direction:column;gap:1px;min-height:0;overflow:visible;
  margin:0;padding:0 2px;scrollbar-gutter:auto}
#psipanel .psi-mv-h{margin:5px 0 2px;padding-bottom:2px;border-bottom:1px solid var(--hud-line);
  font-family:var(--hud-mono);font-size:var(--hud-fs-micro);font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--hud-faint)}
#psipanel .psi-mv-l{list-style:none;margin:0;padding:0}
#psipanel .psi-mv{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:baseline;
  padding:2px 0;font-size:var(--hud-fs-sm);line-height:1.35}
#psipanel .psi-mv-n{font-family:var(--hud-serif);font-weight:500;font-size:14px;color:var(--hud-text);
  overflow-wrap:break-word;white-space:normal}
#psipanel .psi-mv-p{font-family:var(--hud-mono);font-size:var(--hud-fs-sm);font-weight:700;
  font-variant-numeric:tabular-nums}
#psipanel .psi-mv.up .psi-mv-p{color:var(--hud-green)}
#psipanel .psi-mv.down .psi-mv-p{color:var(--hud-warm)}
#psipanel .psi-mv-h:has(+ .psi-mv-l > .psi-mv.up){color:var(--hud-green)}
#psipanel .psi-mv-h:has(+ .psi-mv-l > .psi-mv.down){color:var(--hud-warm)}
#psipanel .psi-mv-y{font-family:var(--hud-mono);font-size:var(--hud-fs-micro);color:var(--hud-ghost);
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
#psipanel .psi-mv-note{margin:3px 0 0;font-size:var(--hud-fs-xs);line-height:1.35;color:var(--hud-faint)}

/* ⚠ THE ROSTER MAY SCROLL, THE COLUMN DOES NOT, and those are different claims. On this site nine rows
   fit; a thirteen-species site scrolls this list behind a fade edge (set by psi-stage only when the list
   actually overflows) and a stable gutter, which is an ordinary control a reader can see. */
#psipanel .psi-rail-r .psi-roster{list-style:none;margin:0;padding:0;flex:1 1 auto;min-height:0;
  overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;
  scrollbar-color:rgba(0,190,90,.18) transparent}
#psipanel .psi-rail-r .psi-roster[data-scrolls]{
  -webkit-mask-image:linear-gradient(#000 calc(100% - 22px),transparent);
  mask-image:linear-gradient(#000 calc(100% - 22px),transparent)}
#psipanel .psi-rail-r .psi-sp{display:grid;grid-template-columns:auto 1fr auto 52px;grid-template-rows:auto auto;
  gap:0 7px;align-items:center;height:var(--hud-row);padding:0 3px;border-bottom:1px solid var(--hud-line);
  cursor:pointer;transition:background .16s ease}
#psipanel .psi-rail-r .psi-sp:last-child{border-bottom:0}
#psipanel .psi-rail-r .psi-sp[hidden]{display:none}
#psipanel .psi-rail-r .psi-sp:hover,#psipanel .psi-rail-r .psi-sp[data-hl]{background:var(--hud-tint)}
#psipanel .psi-rail-r .psi-sp:focus-visible{outline:2px solid var(--hud-green);outline-offset:-2px}
#psipanel .psi-sp-name{grid-column:2;grid-row:1;align-self:end;font-family:var(--hud-serif);font-weight:500;
  font-size:var(--hud-fs-name);line-height:1.1;color:var(--hud-bright);overflow-wrap:break-word;white-space:normal}
#psipanel .psi-sp-bin{grid-column:2;grid-row:2;align-self:start;font-family:var(--hud-sans);font-style:italic;
  font-size:var(--hud-fs-xs);line-height:1.2;color:var(--hud-faint);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
#psipanel .psi-sp-ico{grid-column:1;grid-row:1 / span 2;width:27px;height:27px;opacity:.92}
/* SITE-LOCAL (this record): "Giant South American River Turtle" is 33 characters, longer than the
   name cell of a 352px column at 16.5px, and rendered "Giant South American …" at 1440×900 (seen
   2026-09-29). The name is not made smaller; the ROW grows — the name may take a second line and the
   row's height becomes a minimum, so every other row keeps --hud-row. */
#psipanel .psi-rail-r .psi-sp{height:auto;min-height:var(--hud-row)}
#psipanel .psi-sp-name{white-space:normal;overflow-wrap:anywhere}
#psipanel .psi-rail-r .psi-iucn{grid-column:3;grid-row:1 / span 2;font-family:var(--hud-mono);
  font-size:var(--hud-fs-micro);font-weight:700;letter-spacing:.1em;padding:3px 6px;border-radius:3px;
  border:1px solid rgba(240,240,234,.2);color:var(--hud-dim)}
#psipanel .psi-rail-r .psi-sp svg:not(.psi-sp-ico svg){grid-column:4;grid-row:1 / span 2;width:52px;height:22px}
#psipanel .psi-rail-r .psi-sparkline{stroke:var(--hud-faint);stroke-width:1.4}
#psipanel .psi-rail-r .psi-sp:hover .psi-sparkline,#psipanel .psi-rail-r .psi-sp[data-hl] .psi-sparkline{stroke:var(--hud-green)}
#psipanel .psi-rail-r .psi-nospark{font-family:var(--hud-mono);font-size:var(--hud-fs-micro);color:var(--hud-ghost);
  grid-column:4;grid-row:1 / span 2;width:52px;line-height:1.2}
#psipanel .psi-rail-r .psi-icon-note{flex:none;margin:2px 2px 0;font-size:var(--hud-fs-micro);line-height:1.4;
  color:var(--hud-faint);max-width:none}

/* ── the detail card: a species or a reserve REPLACES the right column ───────────────────────── */
#psipanel .psi-rail-r[data-detail] > :not(#psidDetail){visibility:hidden}
#psipanel .psi-rail-r #psidDetail{position:absolute;inset:0;left:0;top:0;right:0;bottom:0;width:auto;
  max-height:none;margin:0;padding:0;z-index:2;display:flex;flex-direction:column;overflow:hidden;
  border:0;border-radius:12px;box-shadow:none;background:var(--hud-glass);
  backdrop-filter:blur(14px) saturate(.92);-webkit-backdrop-filter:blur(14px) saturate(.92);
  opacity:1;transform:none;pointer-events:auto;transition:none;color:var(--hud-text);font-family:var(--hud-sans)}
#psipanel #psidDetail[hidden]{display:none}
#psipanel .psi-rail-r #psidDetail.open{animation:hudSlideInRight .5s var(--hud-ease) both}
/* the sticky ✕ CLOSE: the button's own glyph is replaced by CSS so its text node and aria-label stay as
   psi-deep wrote them */
#psipanel .psid-dt-x{position:static;align-self:flex-end;margin:12px 12px 0;width:auto;height:auto;
  font-size:0;line-height:0;padding:5px 8px;border-radius:4px;border:1px solid var(--hud-line);
  background:rgba(6,13,8,.6);color:var(--hud-faint);cursor:pointer;transition:color .15s ease,border-color .15s ease}
#psipanel .psid-dt-x::before{content:"\2715  CLOSE";font-family:var(--hud-mono);font-size:var(--hud-fs-micro);
  font-weight:500;letter-spacing:.14em;line-height:1}
#psipanel .psid-dt-x:hover{color:var(--hud-text);border-color:var(--hud-edge-hi)}
#psipanel .psid-dt-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:2px 14px 16px;scrollbar-width:thin;scrollbar-color:rgba(0,190,90,.18) transparent}
#psipanel .psid-dt-k{margin:0 0 5px;font-family:var(--hud-mono);font-size:var(--hud-fs-micro);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--hud-green)}
#psipanel .psid-dt-n{margin:0 0 4px;font-family:var(--hud-serif);font-weight:500;font-size:26px;line-height:1.05;
  letter-spacing:-.01em;color:var(--hud-bright)}
#psipanel .psid-dt-sub{margin:0 0 10px;font-size:var(--hud-fs-base);line-height:1.4;color:var(--hud-dim)}
#psipanel .psid-dt-spark{margin:0 0 6px}
#psipanel .psid-dt-spark svg{width:100%;height:46px;display:block}
#psipanel .psid-dt-spark .psi-sparkline{stroke:var(--hud-green);stroke-width:1.6}
#psipanel .psid-dt-range{margin:2px 0 0;font-family:var(--hud-mono);font-size:var(--hud-fs-sm);color:var(--hud-dim);
  font-variant-numeric:tabular-nums}
#psipanel .psid-dt-range span{color:var(--hud-ghost)}
#psipanel .psid-dt h4,#psipanel .psid-dt-tr h4{margin:12px 0 6px;padding-top:8px;border-top:1px solid var(--hud-line);
  font-family:var(--hud-mono);font-size:var(--hud-fs-micro);font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--hud-faint)}
#psipanel .psid-dt-tr{margin-top:6px}
#psipanel .psid-dt-meth{margin:6px 0 0;font-size:var(--hud-fs-sm);line-height:1.45;color:var(--hud-faint)}
#psipanel .psid-dt-loo{margin-top:8px;padding:8px 10px;border-left:2px solid var(--hud-green);
  background:var(--hud-tint);border-radius:0 6px 6px 0}
#psipanel .psid-dt-loo h4{margin-top:0;padding-top:0;border-top:0}
#psipanel .psid-dt-loo p{margin:0;font-size:var(--hud-fs-base);line-height:1.45;color:var(--hud-dim)}
#psipanel .psid-dt-loo p b{color:var(--hud-text);font-variant-numeric:tabular-nums}
#psipanel .psid-dt-loo p.psid-dt-meth{margin-top:5px;color:var(--hud-ghost)}
#psipanel .psid-dt-crit .psid-dl{margin:0}
#psipanel .psid-dt-links{margin-top:2px}
#psipanel .psid-dt-links{display:flex;flex-wrap:wrap;gap:6px}
#psipanel .psid-dt-empty{padding:12px 14px;color:var(--hud-dim)}

/* KV rows — the dashboard's .dc-row, wherever psi-deep renders a definition list */
#psipanel .psid-dl{display:grid;grid-template-columns:1fr auto;gap:0 12px;margin:0}
#psipanel .psid-dl dt,#psipanel .psid-dl dd{padding:4px 0;border-bottom:1px solid rgba(240,240,234,.06);margin:0}
#psipanel .psid-dl dt{font-size:var(--hud-fs-base);color:var(--hud-dim)}
#psipanel .psid-dl dd{font-family:var(--hud-mono);font-size:var(--hud-fs-sm);font-weight:500;color:var(--hud-text);
  text-align:right;font-variant-numeric:tabular-nums}

/* dense tables, in the card and in the panels: mono caps headers, tabular figures, first column pinned */
#psipanel .psid-scroll{margin:0;padding:0;overflow:auto;overscroll-behavior:contain;
  border:1px solid var(--hud-line);border-radius:6px;scrollbar-width:thin;scrollbar-color:rgba(0,190,90,.18) transparent}
#psipanel .psid-table{width:100%;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}
#psipanel .psid-table th{position:sticky;top:0;z-index:2;padding:6px 8px;text-align:left;white-space:nowrap;
  font-family:var(--hud-mono);font-size:var(--hud-fs-micro);font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--hud-faint);background:rgba(8,16,10,.98);border-bottom:1px solid var(--hud-line)}
#psipanel .psid-table td{padding:6px 9px;font-size:var(--hud-fs-base);line-height:1.4;color:var(--hud-text);
  border-bottom:1px solid rgba(240,240,234,.06);vertical-align:top}
#psipanel .psid-table tbody tr:last-child td{border-bottom:0}
#psipanel .psid-table tbody tr:hover td{background:rgba(0,190,90,.05)}
#psipanel .psid-table th[scope="row"]{position:static;font-family:var(--hud-mono);font-size:var(--hud-fs-sm);
  letter-spacing:.02em;text-transform:none;color:var(--hud-text);background:rgba(8,16,10,.96);
  border-bottom:1px solid rgba(240,240,234,.06)}
#psipanel .psid-table th:first-child,#psipanel .psid-table td:first-child{position:sticky;left:0;z-index:1;
  background:rgba(8,16,10,.96)}
#psipanel .psid-table thead th:first-child{z-index:3}
#psipanel .psid-table th:first-child::after,#psipanel .psid-table td:first-child::after{content:"";position:absolute;
  top:0;right:0;bottom:0;width:1px;background:var(--hud-line)}
#psipanel .psid-table .psid-c{text-align:center;white-space:nowrap}
#psipanel .psid-nm i{display:block;font-size:var(--hud-fs-xs);color:var(--hud-faint)}
#psipanel .psid-u{font-size:var(--hud-fs-sm);color:var(--hud-dim)}
#psipanel .psid-carried{color:var(--hud-amber)}

/* ── the context strip on the left, while a detail is open ───────────────────────────────────── */
#psipanel .psi-rail-l[data-ctx] > .psi-tiles,#psipanel .psi-rail-l[data-ctx] > .psi-hud-badge{display:none}
#psipanel .psi-hud-ctx{flex:none;order:-1;padding:9px 11px 9px;border:1px solid var(--hud-edge);border-radius:8px;
  background:var(--hud-tint);animation:hudSlideInLeft .5s var(--hud-ease) both}
#psipanel .psi-hud-ctx.leaving{animation:hudSlideOut .25s ease both}
#psipanel .psi-hud-ctx .psid-dt-k{margin-bottom:3px}
#psipanel .psi-hud-ctx .psid-dt-n{font-size:22px;margin-bottom:2px}
#psipanel .psi-hud-ctx .psid-dt-sub{margin-bottom:0;font-size:var(--hud-fs-sm);color:var(--hud-dim)}
#psipanel .psi-hud-ctx .psid-dt-range{margin-top:3px}
#psipanel .psi-hud-ctx .psi-hud-nav{margin-top:10px;max-height:150px;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(0,190,90,.18) transparent}

/* ── the full-screen panels ──────────────────────────────────────────────────────────────────────
   "a full screen immersive thing pops up": a dim over the terrain (still visible), and a glass card that
   scales in from .98. CI's .sheet gives the element and the open/close classes; this makes it a screen. */
/* ⚠ #psipanel IS A STACKING CONTEXT AT z 24, AND THE VISTA'S TAB BAR IS z 25. Nothing inside this
   section can paint over #chapters or the data credit (z 26 in this view), whatever its own z-index
   says — measured 2026-09-29: the tab bar sat on top of the first cut's panel. That is the right
   stacking: the tab bar is the site's navigation and the credit is a licence notice, and neither may be
   covered. So the CARD ends above them — its bottom edge reads the same --credit-h the tab bar is
   lifted by, plus the tab bar's MEASURED height (--psi-navh, published by psi-stage), and the dim
   behind it covers the rest of the screen. */
#psipanel .psi-sheet{position:fixed;inset:0;left:0;top:0;right:0;bottom:0;width:auto;max-width:none;
  max-height:none;transform:none;margin:0;border:0;border-radius:0;box-shadow:none;z-index:33;
  display:flex;align-items:flex-start;justify-content:center;
  padding:var(--hud-top) 24px calc(38px + var(--credit-h,0px) + var(--psi-navh,47px) + var(--sab,0px));
  background:rgba(3,8,5,.5);backdrop-filter:blur(8px) saturate(.9);-webkit-backdrop-filter:blur(8px) saturate(.9);
  opacity:0;pointer-events:none;transition:opacity .25s ease}
#psipanel .psi-sheet[hidden]{display:none}
#psipanel .psi-sheet.open{opacity:1;pointer-events:auto;transform:none!important;transition:opacity .4s var(--hud-ease)}
#psipanel .psi-sheet.leaving{opacity:0;pointer-events:none}
#psipanel .psi-full-card{position:relative;width:min(1260px,100%);max-height:100%;display:flex;flex-direction:column;min-height:0;
  border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,rgba(6,12,8,.93),rgba(4,9,6,.965));
  border:1px solid var(--hud-line);border-top-color:rgba(0,190,90,.24);box-shadow:0 30px 90px rgba(0,0,0,.6)}
#psipanel .psi-full-card::before,#psipanel .psi-full-card::after{content:"";position:absolute;width:12px;height:12px;
  border:0 solid rgba(0,190,90,.45);pointer-events:none;z-index:3}
#psipanel .psi-full-card::before{top:7px;left:7px;border-width:1px 0 0 1px}
#psipanel .psi-full-card::after{bottom:7px;right:7px;border-width:0 1px 1px 0}
#psipanel .psi-sheet.open .psi-full-card{animation:psiFullIn .4s var(--hud-ease) both}
#psipanel .psi-sheet.leaving .psi-full-card{animation:psiFullOut .25s ease both}
@keyframes psiFullIn{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
@keyframes psiFullOut{to{opacity:0;transform:scale(.985)}}

#psipanel .psi-sheet .sheet-top{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  padding:14px 22px 12px 26px;border-bottom:1px solid var(--hud-line);background:none}
#psipanel .psi-full-head{flex:1 1 auto;min-width:0;order:1}
#psipanel .psi-sheet .sheet-top .pk{display:block;font-family:var(--hud-serif);font-size:24px;font-weight:500;
  letter-spacing:-.01em;line-height:1.15;text-transform:none;color:var(--hud-bright);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#psipanel .psi-full-nav{order:3;flex-basis:100%;justify-content:flex-start;min-width:0}
#psipanel .psi-sheet .dm-btn.plain{flex:none;order:2;padding:7px 13px;border:1px solid rgba(240,240,234,.24);border-radius:999px;
  font-family:var(--hud-sans);font-size:12px;font-weight:600;letter-spacing:0;
  text-transform:uppercase;color:var(--hud-text);background:rgba(6,13,8,.6);cursor:pointer}
#psipanel .psi-sheet .dm-btn.plain::before{content:"\2715  "}
#psipanel .psi-sheet .dm-btn.plain:hover{color:var(--hud-text);border-color:var(--hud-edge-hi);background:rgba(6,13,8,.6)}
#psipanel .psi-sheet .sheet-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:18px 26px 26px;scrollbar-width:thin;scrollbar-color:rgba(0,190,90,.18) transparent;
  font-family:var(--hud-sans);color:var(--hud-text)}

/* chapter typography inside a panel: Fraunces titles, the caption's running voice, mono captions */
#psipanel .psi-sheet .psid-sec,#psipanel .psi-sheet .psid-cadence,#psipanel .psi-sheet .psid-foot,
#psipanel .psi-sheet .psi-prov,#psipanel .psi-sheet .psi-scope,#psipanel .psi-sheet .psi-caveat,
#psipanel .psi-sheet .psi-break,#psipanel .psi-sheet .psid-badge{max-width:none;margin:0;padding:0;border:0}
#psipanel .psi-sheet .psi-sheet-wrap > * + *{margin-top:20px;padding-top:18px;border-top:1px solid var(--hud-line)}
#psipanel .psi-sheet h3{margin:0 0 10px;font-family:var(--hud-serif);font-size:26px;font-weight:500;letter-spacing:-.01em;
  line-height:1.15;color:var(--hud-bright)}
#psipanel .psi-sheet h4{margin:18px 0 8px;padding-top:10px;border-top:1px solid var(--hud-line);
  font-family:var(--hud-mono);font-size:var(--hud-fs-micro);font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--hud-faint)}
#psipanel .psi-sheet p,#psipanel .psi-sheet li,#psipanel .psi-sheet dd,#psipanel .psi-sheet dt{
  font-size:var(--hud-fs-md);line-height:1.6;color:var(--hud-dim)}
#psipanel .psi-sheet .psid-lede{margin:0 0 14px;max-width:80ch}
#psipanel .psi-sheet .psid-rule{margin:0 0 12px;padding:10px 14px;max-width:80ch;border-left:2px solid rgba(0,190,90,.5);
  background:var(--hud-tint);border-radius:0 6px 6px 0;font-size:var(--hud-fs-md);line-height:1.55;color:var(--hud-dim)}
#psipanel .psi-sheet [data-psi-dup]{display:none}
#psipanel .psi-sheet .psid-lede b,#psipanel .psi-sheet p b{color:var(--hud-text)}
#psipanel .psi-sheet .psid-warn{margin:0 0 12px;max-width:80ch;color:var(--hud-amber)}
#psipanel .psi-sheet .psid-cap,#psipanel .psi-sheet .psid-caveat,#psipanel .psi-sheet .psid-dt-meth,
#psipanel .psi-sheet .psid-withheld,#psipanel .psi-sheet .psid-global,#psipanel .psi-sheet .psid-badge-c,
#psipanel .psi-sheet .psid-badge-p,#psipanel .psi-sheet .psid-badge-s{
  font-size:var(--hud-fs-base);line-height:1.5;color:var(--hud-faint);max-width:80ch;margin:10px 0 0}
#psipanel .psi-sheet .psid-badge-c{margin-top:8px}
#psipanel .psi-sheet .psid-badge-h{margin:0 0 6px;font-family:var(--hud-mono);font-size:var(--hud-fs-micro);
  letter-spacing:.18em;text-transform:uppercase;color:var(--hud-faint)}
#psipanel .psi-sheet .psid-badge-m,#psipanel .psi-sheet .psid-mandate,#psipanel .psi-sheet .psi-caveat p,
#psipanel .psi-sheet .psi-break,#psipanel .psi-sheet .psi-scope,#psipanel .psi-sheet .psi-prov{
  margin:0;max-width:80ch;font-size:var(--hud-fs-md);line-height:1.55;color:var(--hud-dim)}
#psipanel .psi-sheet .psi-caveat h3,#psipanel .psi-sheet .psi-break b{color:var(--hud-bright)}
#psipanel .psi-sheet .psi-prov + .psi-prov,#psipanel .psi-sheet .psi-scope + .psi-prov{margin-top:8px}
#psipanel .psi-sheet .psid-badge{padding:12px 14px;border-left:2px solid var(--hud-green);background:var(--hud-tint);
  border-radius:0 6px 6px 0}
#psipanel .psi-sheet .psid-badge--missing{border-left-color:#E8663D}
#psipanel .psi-sheet .psid-quote{margin:8px 0 0;padding:0 0 0 14px;border-left:2px solid rgba(0,190,90,.5);
  font-size:var(--hud-fs-md);line-height:1.62;color:rgba(240,240,234,.8);max-width:none;
  column-count:2;column-gap:36px;orphans:3;widows:3}
#psipanel .psi-sheet .psid-facts{display:flex;flex-wrap:wrap;gap:6px 26px;margin:0 0 12px;padding:0}
#psipanel .psi-sheet .psid-facts dd{font-family:var(--hud-serif);font-size:30px;font-weight:500;letter-spacing:-.01em;
  line-height:1.05;color:var(--hud-bright);font-variant-numeric:tabular-nums}
#psipanel .psi-sheet .psid-facts dt{font-family:var(--hud-mono);font-size:var(--hud-fs-micro);letter-spacing:.06em;
  color:var(--hud-ghost);margin-top:3px;line-height:1.3}
#psipanel .psi-sheet .psid-dl{max-width:80ch;grid-template-columns:max-content 1fr}
#psipanel .psi-sheet .psid-dl dt{font-family:var(--hud-mono);font-size:var(--hud-fs-xs);letter-spacing:.06em;
  text-transform:uppercase;color:var(--hud-faint);padding:6px 0}
#psipanel .psi-sheet .psid-dl dd{font-family:var(--hud-sans);font-size:var(--hud-fs-base);text-align:left;
  color:var(--hud-text);padding:6px 0}
#psipanel .psi-sheet .psid-scroll{max-height:calc(100vh - 250px)}
#psipanel .psi-sheet .psid-table td{font-size:var(--hud-fs-base);padding:7px 11px}
#psipanel .psi-sheet .psid-table th{padding:8px 10px}
#psipanel .psi-sheet .psid-nm{font-family:var(--hud-serif);font-weight:500;font-size:15px}
#psipanel .psi-sheet .psid-nm i{font-family:var(--hud-sans);font-size:var(--hud-fs-xs)}
#psipanel .psi-sheet .psid-srcnote{font-size:var(--hud-fs-xs);color:var(--hud-faint);max-width:52ch}
/* leave-one-out: one bar per species, name in Fraunces, figure in mono */
#psipanel .psi-sheet .psid-loo{gap:4px;max-width:900px}
#psipanel .psi-sheet .psid-loo li{grid-template-columns:minmax(10em,16em) 1fr minmax(9em,auto);gap:12px;
  font-size:var(--hud-fs-base);line-height:1.3}
#psipanel .psi-sheet .psid-loo-n{font-family:var(--hud-serif);font-weight:500;font-size:16px;color:var(--hud-text)}
#psipanel .psi-sheet .psid-loo-b{font-family:var(--hud-sans);font-size:var(--hud-fs-xs);color:var(--hud-faint);opacity:1}
#psipanel .psi-sheet .psid-loo-bar{height:12px;border-radius:2px}
#psipanel .psi-sheet .psid-loo-v{font-family:var(--hud-mono);font-size:var(--hud-fs-base);color:var(--hud-text)}
#psipanel .psi-sheet .psid-loo-v i{color:var(--hud-faint)}
/* the timeline and the notes */
#psipanel .psi-sheet .psid-time{gap:8px;max-width:80ch}
#psipanel .psi-sheet .psid-time li{grid-template-columns:5.5em 1fr;gap:12px}
#psipanel .psi-sheet .psid-time b{font-family:var(--hud-mono);font-size:var(--hud-fs-base);color:var(--hud-green)}
#psipanel .psi-sheet .psid-time span{font-size:var(--hud-fs-md);line-height:1.5;color:var(--hud-text)}
#psipanel .psi-sheet .psid-cite{font-family:var(--hud-mono);font-size:var(--hud-fs-xs);color:var(--hud-faint);opacity:1}
#psipanel .psi-sheet .psid-notelist{max-width:none;column-count:2;column-gap:36px}
#psipanel .psi-sheet .psid-notelist li{font-size:var(--hud-fs-base);break-inside:avoid}
/* recovery framework and protection split: keep their own grids, in the panel's ink */
#psipanel .psi-sheet .psid-rf-row,#psipanel .psi-sheet .psid-rf-cat{font-size:var(--hud-fs-base)}
#psipanel .psi-sheet .psid-rf-rows,#psipanel .psi-sheet .psid-rf-cats{max-width:980px}
#psipanel .psi-sheet .psid-rf-row b,#psipanel .psi-sheet .psid-rf-cat b{font-family:var(--hud-mono);font-size:var(--hud-fs-base)}
#psipanel .psi-sheet .psid-rf-bands,#psipanel .psi-sheet .psid-rf-cn2,#psipanel .psi-sheet .psid-rf-cw em{
  font-family:var(--hud-mono);font-size:var(--hud-fs-xs);color:var(--hud-faint)}
#psipanel .psi-sheet .psid-rf-sp em{color:var(--hud-ghost)}
#psipanel .psi-sheet .psid-ps-sp{font-size:var(--hud-fs-base)}
/* the download: a pill, like every other control here */
#psipanel .psi-sheet .psid-foot{margin-top:16px}
#psipanel .psi-sheet .psid-csv{font-family:var(--hud-sans);font-size:12px;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--hud-pill-ink);border:1px solid var(--hud-pill-line);border-radius:999px;
  padding:7px 13px;background:var(--hud-pill-bg)}
#psipanel .psi-sheet .psid-csv:hover{border-color:var(--hud-green);color:var(--hud-green)}
/* the survey network block (Min Shan) in the panel's ink */
#psipanel .psi-sheet .psi-network h3{font-family:var(--hud-serif)}
#psipanel .psi-sheet .cn-lede{font-size:var(--hud-fs-md);line-height:1.55;color:var(--hud-dim);max-width:80ch}
#psipanel .psi-sheet .cn-row{font-size:var(--hud-fs-base)}

/* ── the centre band: the vista's tab bar and the data credit, between the columns ──────────────
   The tab bar is the site's navigation and is not moved; it is only kept on one row, and lifted above
   the credit, in the gap the columns leave. The credit — a licence obligation — sits under it, centred
   in the same gap, so it is always in view and never under a column. */
@media (min-width:901px){
  /* the site's own rule under ~1100px pins #chapters left:8px/right:8px (full width); in this view it
     stays centred in the gap — measured 2026-09-29 at 1024×900: pinned, it sat over the left column */
  body[data-view="psi"] #chapters{left:50%;right:auto;transform:translateX(-50%);
    max-width:calc(100vw - 2*min(352px,26vw) - 56px);bottom:calc(34px + var(--credit-h,0px))}
  body[data-view="psi"] #keytoggle{bottom:calc(34px + var(--credit-h,0px))}
  /* ⚠ THE DISCLOSURE IS NOT ELLIPSED AND NOT SHRUNK: 9px is this site's floor and the strip is ~600
     characters, which is 2,600px of text — five lines in the 570px gap at 1280 and still three lines
     at the full window width, so a two-line budget does not exist at this width without breaking the
     floor. It is given the whole gap less 20px of clear air on each side, and the tab bar sits 8px
     above it, at every width. */
  body[data-view="psi"] #datacredit{left:50%;transform:translateX(-50%);bottom:12px;
    width:max-content;max-width:calc(100vw - 2*min(352px,26vw) - 84px);white-space:normal;text-align:left}
}

/* ── motion: the columns slide in from their own side; nothing moves for anyone who asked for none ── */
@keyframes hudSlideInLeft{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
@keyframes hudSlideInRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes hudSlideOut{to{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:no-preference){
  body[data-view="psi"] #psipanel[data-staged] .psi-rail-l{animation:hudSlideInLeft .5s var(--hud-ease) both}
  body[data-view="psi"] #psipanel[data-staged] .psi-rail-r{animation:hudSlideInRight .5s var(--hud-ease) .15s both}
  body[data-view="psi"] #psipanel[data-staged] .psi-rail > *{
    animation:psi-rise .5s cubic-bezier(.16,.84,.34,1) both;animation-delay:var(--psi-in,0ms)}
  body[data-view="psi"] #psipanel[data-staged] .psi-rail > .psi-hud-ctx{animation:hudSlideInLeft .5s var(--hud-ease) both}
  body[data-view="psi"] #psipanel[data-staged] .psi-rail > .psi-hud-ctx.leaving{animation:hudSlideOut .25s ease both}
  body[data-view="psi"] #psipanel[data-staged] .psi-rail > #psidDetail{animation:none}
  body[data-view="psi"] #psipanel[data-staged] .psi-rail > #psidDetail.open{animation:hudSlideInRight .5s var(--hud-ease) both}
}
@media (prefers-reduced-motion:reduce){
  #psipanel .psi-rail,#psipanel .psi-rail > *,#psipanel .psi-sheet,#psipanel .psi-full-card,#psipanel #psidDetail,
  #psipanel .psi-hud-ctx{animation:none!important;transition:none!important}
}

/* ── narrow screens: columns cannot be columns, so the chapter becomes one scroll ───────────────
   The HUD stacks — left column, then right — and the panels are full-screen anyway. */
@media (max-width:900px){
  #psipanel .psi-rail{position:static;width:auto;max-width:none;max-height:none;transform:none;
    border-radius:0;border-left:0;border-right:0;box-shadow:none;overflow:visible;margin:0 0 14px}
  #psipanel .psi-rail-r{position:static}
  #psipanel .psi-rail-r .psi-roster{overflow:visible;flex:none}
  #psipanel .psi-rail-r .psi-roster[data-scrolls]{-webkit-mask-image:none;mask-image:none}
  #psipanel .psi-rail-l .psi-scope,#psipanel .psi-rail-l .psi-caveat,#psipanel .psi-rail-l .psi-prov,
  #psipanel .psi-rail-l .psi-break{display:block}
  #psipanel .psi-rail-l .psi-panel > svg{max-height:none}
  #psipanel .psi-rail-r #psidDetail{position:fixed;inset:0;border-radius:0;z-index:40;
    padding-top:var(--sat,0px);padding-bottom:var(--sab,0px)}
  #psipanel .psi-rail-r[data-detail] > :not(#psidDetail){visibility:visible}
  #psipanel .psi-sheet{padding:calc(8px + var(--sat,0px)) 8px calc(8px + var(--sab,0px));align-items:stretch}
  #psipanel .psi-full-card{max-height:none}
  #psipanel .psi-full-card{border-radius:10px}
  #psipanel .psi-sheet .sheet-top{padding:12px 14px 10px}
  #psipanel .psi-sheet .sheet-body{padding:14px 14px 22px}
  #psipanel .psi-sheet .psid-quote,#psipanel .psi-sheet .psid-notelist{column-count:1}
  /* ⛔ PORTED FROM GERMANY (4d7cb08 + 5d2b2dc + 8a97e4d) via terai-arc d4dfbbc — jurua lap 2, 2026-09-30, 390x844:
     10 of 10 panels ended at y 694-814 under the pills (608) and the credit (667); the species card was
     transparent (rgba 0,0,0,0) and ran to y=1093. #psipanel is a stacking context at z 24, so nothing in it
     paints over #chapters (27) or the credit (26): reserve the header, nav and credit zone. The rail's
     backdrop-filter and fill-mode slide-in make it the containing block for the fixed card, so both are
     dropped while a detail is open; the card is opaque. */
  #psipanel .psi-sheet{padding:calc(56px + var(--sat,0px)) 8px
    calc(34px + var(--credit-h,0px) + var(--psi-navh,44px) + var(--sab,0px))}
  /* ⚠ the second selector out-ranks the slide-in rule (body[data-view] #psipanel[data-staged] .psi-rail-r) */
  #psipanel .psi-rail-r[data-detail],
  body[data-view="psi"] #psipanel[data-staged] .psi-rail-r[data-detail]{backdrop-filter:none;-webkit-backdrop-filter:none;animation:none}
  #psipanel .psi-rail-r #psidDetail{top:calc(56px + var(--sat,0px));left:8px;right:8px;
    bottom:calc(34px + var(--credit-h,0px) + var(--psi-navh,44px) + var(--sab,0px));border-radius:10px;
    background:rgba(6,11,9,.97);border:1px solid var(--hud-line);padding:0}
  /* The credit is a translucent plate over a SCROLLING chapter here, so the roster read through it. */
  body[data-view="psi"] #datacredit{background:rgba(8,16,11,.96)}
  #psipanel .psi-sheet .sheet-top .pk{white-space:normal;font-size:21px}
}
/* ⚠ (LAST, so it beats the base grid rule and the @supports rule above.) AT 1024 WIDE THE COLUMN IS 266px AND A TWO-COLUMN TILE HAS 88px FOR ITS LABEL — five of eleven
   labels ellipsed (measured by check_psi_surface, 2026-09-29). The menu goes to one column, at the
   36px minimum row, and the badge echo yields the height: 11 tiles + metrics + chart = 748px of the
   780 the column has at 1024×900. The hero figure steps to 30px so "159.1" fits a 95px tile. */
/* ── SITE-LOCAL (this record): the metric row at every width ──────────────────────────────────
   Measured 2026-09-29 at 1440×900 in the 352px column: four tiles in one row gave the INDEX value
   54px of content width and it rendered "1…" — the one number on the page a reader will quote,
   ellipsed — while "SINCE 2000" and "2000–2020" lost their tails. The type is not made smaller
   (never smaller); the layout the ≤1120 block below already uses takes over at every width: INDEX
   as a full-width strip, the three remaining tiles share the row under it, SPAN widest because a
   year range is the longest value. The ≤1120 block re-states the strip and lowers the hero, and it
   must stay last. Any site whose index carries three digits and a decimal will hit the same wall. */
#psipanel .psi-tiles,#psipanel .psi-tiles:has(.psi-tile-warn){grid-template-columns:1fr .8fr 1.2fr}
#psipanel .psi-tile:first-child{grid-column:1 / -1;grid-row:1;display:grid;grid-template-columns:auto auto 1fr;
  align-items:baseline;gap:0 10px;padding:6px 9px}
#psipanel .psi-tile-warn{grid-row:3}

@media (max-width:1120px){
  #psipanel{--hud-fs-hero:30px}
  #psipanel .psi-hud-tiles{grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(36px,52px)}
  #psipanel .psi-tile-ch{min-height:36px;padding-top:4px;padding-bottom:4px}
  #psipanel .psi-rail-l > .psi-hud-badge{display:none}
  /* the metric row cannot be three tiles in 240px ("15…", "SPECI…", "2012–…" at 1024×900, seen
     2026-09-29): the INDEX tile becomes a full-width strip like the warn tile, SPECIES and SPAN share
     the row under it, and the chart keeps to 96px so eleven one-column tiles still fit */
  #psipanel .psi-tiles,#psipanel .psi-tiles:has(.psi-tile-warn){grid-template-columns:repeat(2,minmax(0,1fr))}
  #psipanel .psi-tile:first-child{grid-column:1 / -1;grid-row:1;display:grid;grid-template-columns:auto auto 1fr;
    align-items:baseline;gap:0 10px;padding:6px 9px}
  #psipanel .psi-tile:first-child .psi-tile-v{font-size:30px;line-height:1}
  #psipanel .psi-tile-warn{grid-row:3}
  #psipanel .psi-rail-l .psi-panel > svg{max-height:96px}
  /* the species name has 106px beside a sparkline in a 266px column; the sparkline (aria-hidden, a
     graphic — the numbers are in the card) goes, and the name gets 165px */
  #psipanel .psi-rail-r .psi-sp{grid-template-columns:auto 1fr auto auto}
  #psipanel .psi-rail-r .psi-sp svg:not(.psi-sp-ico svg){display:none}
  #psipanel .psi-rail-r .psi-nospark{width:auto}
  #psipanel .psi-mv-n{font-size:13px;white-space:normal;line-height:1.15}
  /* 240px holds neither "White-rumped Vulture" at 16.5px beside its badge nor "not comparable ·
     roster changed" beside SINCE and "—" (both ellipsed at 1024×900, seen 2026-09-29): the name
     drops to 14px, a rising/falling name may wrap, and the warn caveat takes its own line */
  #psipanel{--hud-fs-name:14px}
  #psipanel .psi-tile-warn{grid-template-columns:auto 1fr;row-gap:1px}
  #psipanel .psi-tile-warn .psi-tile-s{grid-column:1 / -1;font-size:var(--hud-fs-xs);white-space:normal;line-height:1.25}
}

/* ══ END PSI HUD v4 ═══════════════════════════════════════════════════════════════════════════════ */

/* 720px tall: a 10-species roster is 360px in a 350px box, so the last name sat sliced under the fade.
   34px minimum rows still hold the 12.5px name over the binomial (c6, germany 4fcb06a, 2026-09-29). */
@media (max-height:740px){ #psipanel .psi-rail-r .psi-sp{height:auto;min-height:34px} }
/* phone: the chart takes its natural height — the panel scrolls, nothing needs the room, and the desktop caps
   (96/84/80px) that came later than the phone reset drew its labels at ~6px (a6, 2026-09-30, 390x844) */
@media (max-width:900px){ html body #psipanel .psi-rail-l .psi-panel > svg{max-height:none} }
/* THE BRIEF 2026-09-30: the index numeral in Hanken Grotesk (brand canon; self-hosted; every digit
   one advance, so a value's width depends on its length, never on WHICH digits it has). Fraunces is not in
   identity/brand.md and its digits ran 17.2–25.6px at 40px: 146.8 fitted one cell and not another. */
#psipanel .psi-tile:first-child .psi-tile-v{font-family:var(--hud-sans);font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums lining-nums}
/* ...and the index column is never narrower than its own number (min-content), so any length fits.
   ⛔ THE NON-WARN DEFAULT IS NOT IN HERE, AND THAT IS THE FIX, NOT AN OMISSION. It used to read
   `minmax(min-content,1fr) repeat(3,minmax(0,1fr))`, which turned the three-column desktop row into
   FOUR columns on any site without a .psi-tile-warn tile. The index column then took min-content and
   the remaining three split what was left, at 73.7px on Jurua and 33px on Min Shan — narrower than
   the content they hold. Measured live on Jurua 2026-09-30: the survey span "2000–2020" rendered 83px
   of ink into a 54px box, at 1440x900 as well as 1440x746.
   ⚠ AND IT WAS NOT ONLY THE METRIC ROW. A taller metric row (174.7px on Min Shan against 141.5px
   here) squeezed the chapter-tile grid below it, so the eleventh tile, "What is absent", ran 19.7px
   past the column's bottom edge at 1440x746 and 31.9px at 1280x720. Restoring this default fixes
   both, because both were the same cause.
   ⭐ WHY THE ORIGINAL CHANGE'S OWN MEASUREMENT MISSED IT: it measured the INDEX NUMERAL's ink box
   against its cell and confirmed the number never clips, which is true and is still true. The damage
   was to the SIBLING tiles' content and to the grid underneath. A change verified against the defect
   it fixes is blind to the defect it causes.
   ⛔ check_psi_surface does NOT cover this row — it measures chapter tiles only — so a gate gap,
   not a gate failure, is why it shipped. Alternatives measured before choosing: repeat(4,
   minmax(min-content,1fr)) clears the metric row on both sites but still leaves "What is absent"
   5.4px past the bottom at 1440x746 and 17.6px at 1280x720 on Min Shan. */
@media (min-width:1121px){
  #psipanel .psi-tiles:has(.psi-tile-warn){grid-template-columns:minmax(min-content,1.2fr) minmax(0,1fr) minmax(0,1.2fr)}
}