/* ══ 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.

   ALEX SAID: "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);
  /* ALEX SAID (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)}
#psipanel .psi-roster-node text{font-family:var(--hud-mono);font-size:19px;font-weight:500}
/* 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-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}
#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}
}
/* ⚠ (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. */
@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} }