/* PSI FOCUS v2 — one image as the PSI chapter, everything else a switch away (a6, 2026-09-30).
   Canonical in park-map-template; a site copies it VERBATIM and links it AFTER css/psi-hud.css.
   Every rule is keyed on #psipanel.psi-mode-focus (or .psi-focus-wait), the classes the PSI-FOCUS block
   in src/psi-stage.js sets. With neither class present ('full' mode) not one rule here matches, and the
   chapter is the v4 HUD.
   ⛔ HIDE, NEVER DELETE: every rule that hides something uses display:none on a node that stays in the
   DOM. data-psi-show on the panel lists what PSI_SHOW turned back on; .psi-focus-keep marks a named tile. */

/* ── while the paper's image is probed: the columns wait, so the full HUD never flashes ─────────── */
#psipanel.psi-focus-wait > .psi-rail{visibility:hidden}

/* ── what is hidden in focus, each with the PSI_SHOW name that brings it back ──────────────────── */
/* the columns, unless something in them is asked for */
#psipanel.psi-mode-focus:not([data-psi-rail-l]) .psi-rail-l,
#psipanel.psi-mode-focus:not([data-psi-rail-r]) .psi-rail-r{display:none}
/* 'headline' and 'roster': the metric row, and the roster-changed strip within it */
#psipanel.psi-mode-focus:not([data-psi-show~="headline"]):not([data-psi-show~="roster"]) .psi-rail-l .psi-tiles{display:none}
#psipanel.psi-mode-focus:not([data-psi-show~="headline"]) .psi-tiles > .psi-tile:not(.psi-tile-warn){display:none}
#psipanel.psi-mode-focus:not([data-psi-show~="roster"]) .psi-tiles > .psi-tile-warn{display:none}
/* 'method': "What a point on this line is", and the method pointer under the small chart */
#psipanel.psi-mode-focus:not([data-psi-show~="method"]) .psi-rail-l > .psi-hud-badge{display:none}
#psipanel.psi-mode-focus:not([data-psi-show~="method"]) .psi-methodnote{display:none}
/* 'chart': the small index chart */
#psipanel.psi-mode-focus:not([data-psi-show~="chart"]) .psi-rail-l > .psi-panel{display:none}
/* 'tiles', or one tile by name */
#psipanel.psi-mode-focus:not([data-psi-tiles]) .psi-hud-tiles{display:none}
#psipanel.psi-mode-focus:not([data-psi-show~="tiles"]) .psi-tile-ch:not(.psi-focus-keep){display:none}
/* 'mininav': the other-chapters row in each panel; without it, a panel lists only the kept chapters */
#psipanel.psi-mode-focus:not([data-psi-show~="mininav"]) .psi-full-nav .psi-hud-nav-i:not(.psi-focus-keep){display:none}
/* 'csv': the download button */
#psipanel.psi-mode-focus:not([data-psi-show~="csv"]) .psid-foot{display:none}
/* 'caption': the vista's own caption card, which sits outside the panel */
body[data-view="psi"]:has(#psipanel.psi-mode-focus:not([data-psi-show~="caption"])) #caption{display:none}

/* ── the stage: between the header and the chapter bar, and between the columns when they show ─── */
#psipanel .psi-stage{
  --pf-gap:16px;--pf-rail:calc(var(--hud-rail-w,min(352px,26vw)) + var(--pf-gap));
  position:fixed;z-index:0;top:var(--hud-top,76px);bottom:var(--psi-focus-bot,140px);
  left:calc(16px + var(--sal,0px));right:calc(16px + var(--sar,0px));
  display:flex;flex-direction:column;align-items:center;gap:14px;min-height:0;
  pointer-events:none}
#psipanel .psi-stage > *{pointer-events:auto}
#psipanel[data-psi-rail-l] .psi-stage{left:calc(24px + var(--sal,0px) + var(--pf-rail))}
#psipanel[data-psi-rail-r] .psi-stage{right:calc(20px + var(--sar,0px) + var(--pf-rail))}
/* one image fills the stage; with two, the stage scrolls and each keeps its own height */
#psipanel .psi-stage > *{flex:1 1 auto;min-height:0}
#psipanel .psi-stage:has(> :nth-child(2)){overflow-y:auto;overscroll-behavior:contain}
#psipanel .psi-stage:not(:has(> :nth-child(2))){justify-content:center}
#psipanel .psi-stage:has(> :nth-child(2)) > *{flex:none}
#psipanel .psi-stage:has(> :nth-child(2)) > .psi-focus{height:max(420px,100%)}
/* the terrain, dimmed behind it */
#psipanel .psi-stage::before{content:"";position:fixed;inset:0;background:rgba(3,7,5,.55);pointer-events:none;z-index:-1}

/* ── the paper's figure: its own image on its own white ground, never tinted ────────────────────── */
#psipanel .psi-paper{margin:0;width:min(1040px,100%);max-height:100%;display:flex;flex-direction:column;
  padding:14px;border-radius:12px;background:linear-gradient(180deg,rgba(6,11,9,.80) 0,rgba(6,11,9,.90) 100%);
  border:1px solid var(--hud-line,rgba(240,240,234,.09));border-top-color:rgba(0,190,90,.2);
  box-shadow:0 20px 60px rgba(0,0,0,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#psipanel .psi-stage > .psi-paper{flex:0 1 auto}
/* The image gives way first (it keeps its aspect and centres); the caption keeps about four lines and
   scrolls inside itself, so neither runs under the chapter bar. */
#psipanel .psi-paper-img{flex:0 1 auto;min-height:120px;display:flex;justify-content:center}
#psipanel .psi-paper-img img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  border-radius:6px;background:#fff}
#psipanel .psi-paper figcaption{flex:0 0 auto;max-height:7.6em;overflow:auto;margin:12px 4px 2px;
  color:var(--hud-dim,rgba(240,240,234,.72));font-family:var(--hud-sans,"Hanken Grotesk",system-ui,sans-serif);
  font-size:var(--hud-fs-base,13px);line-height:1.5}
#psipanel .psi-paper figcaption b{color:var(--hud-text,#F0F0EA)}
#psipanel .psi-paper-src{display:block;margin-top:6px;color:var(--hud-faint,rgba(240,240,234,.52))}

/* ── our long view ──────────────────────────────────────────────────────────────────────────────── */
#psipanel .psi-focus{
  font-family:var(--hud-sans,"Hanken Grotesk",system-ui,sans-serif);color:var(--hud-text,#F0F0EA);
  display:flex;flex-direction:column;gap:10px;min-width:0;width:100%;
  padding:16px 18px 14px;border-radius:12px;
  background:linear-gradient(180deg,rgba(6,11,9,.80) 0,rgba(6,11,9,.90) 100%);
  border:1px solid var(--hud-line,rgba(240,240,234,.09));border-top-color:rgba(0,190,90,.2);
  box-shadow:0 20px 60px rgba(0,0,0,.45)}
#psipanel .psi-focus-h{flex:none}
#psipanel .psi-focus-t{margin:0;font-family:var(--hud-serif,"Fraunces",Georgia,serif);font-weight:500;
  font-size:22px;line-height:1.2;color:var(--hud-bright,#F4F3EE)}
#psipanel .psi-focus-note{margin:4px 0 0;font-size:var(--hud-fs-base,13px);line-height:1.45;color:var(--hud-dim,rgba(240,240,234,.72))}
#psipanel .psi-focus-plot{flex:1 1 auto;min-height:0;position:relative}
#psipanel .psi-focus-plot .pl-focus-svg{display:block;position:absolute;inset:0;overflow:visible}
#psipanel .psi-focus-cap{flex:none;margin:0;font-size:var(--hud-fs-sm,12px);line-height:1.45;color:var(--hud-faint,rgba(240,240,234,.52))}

/* the key: every line's colour and name ('badges' adds its Red List badge), in the order the lines end */
#psipanel .psi-focus-key{flex:none;list-style:none;margin:0;padding:8px 0 0;border-top:1px solid var(--hud-line,rgba(240,240,234,.09));
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:5px 16px}
#psipanel .psi-focus-k{display:flex;align-items:center;gap:8px;min-width:0;font-size:var(--hud-fs-base,13px);line-height:1.3}
#psipanel .psi-focus-sw{flex:none;width:20px;height:4px;border-radius:2px}
#psipanel .psi-focus-k-psi .psi-focus-sw{height:5px;background:#F0F0EA;box-shadow:0 0 0 1.5px #070F07}
#psipanel .psi-focus-k-psi .psi-focus-kn{font-weight:700}
#psipanel .psi-focus-kn{min-width:0;overflow-wrap:anywhere}
#psipanel .psi-focus-k .psi-iucn{flex:none;margin-left:auto;font-family:var(--hud-mono,ui-monospace,monospace);
  font-size:var(--hud-fs-micro,10px);font-weight:600;line-height:1;padding:3px 5px;border-radius:3px;
  color:#070F07;background:var(--hud-green,#00BE5A)}
#psipanel .psi-focus-k .psi-iucn[data-code="CR"],#psipanel .psi-focus-k .psi-iucn[data-code="EN"]{background:#E8663D;color:#F0F0EA}
#psipanel .psi-focus-k .psi-iucn[data-code="VU"]{background:#E8A33D;color:#070F07}
#psipanel .psi-focus-k .psi-iucn[data-code="NT"]{background:#C8D65A;color:#070F07}
#psipanel .psi-focus-k .psi-iucn[data-code="—"],#psipanel .psi-focus-k .psi-iucn[data-code="DD"]{background:rgba(240,240,234,.38);color:#070F07}

/* the chart's ink; one user unit is one CSS pixel (the SVG is drawn at its box's size) */
#psipanel .psi-focus .pl-tick line{stroke:rgba(240,240,234,.10)}
#psipanel .psi-focus .pl-tick text,#psipanel .psi-focus .pl-xl{fill:rgba(240,240,234,.66);font-family:var(--hud-mono,ui-monospace,monospace);font-size:12px}
#psipanel .psi-focus .pl-axis,#psipanel .psi-focus .pl-xmaj{stroke:rgba(240,240,234,.45);stroke-width:1}
#psipanel .psi-focus .pl-xmin{stroke:rgba(240,240,234,.3);stroke-width:1}
#psipanel .psi-focus .pl-ev line{stroke:#F0F0EA;stroke-dasharray:5 4;stroke-width:1.2;opacity:.8}
#psipanel .psi-focus .pl-ev text{fill:#F0F0EA;font-size:13px}
#psipanel .psi-focus .pl-start line{stroke:var(--hud-green,#00BE5A);stroke-width:1.4;opacity:.9}
#psipanel .psi-focus .pl-start-t{fill:var(--hud-green,#00BE5A);font-size:13px;font-weight:600}
#psipanel .psi-focus .pl-start-x{fill:var(--hud-green,#00BE5A);font-family:var(--hud-mono,ui-monospace,monospace);font-size:12px;font-weight:700}
#psipanel .psi-focus .pl-psi{fill:none;stroke:#F0F0EA;stroke-width:4;stroke-linejoin:round;stroke-linecap:round}
#psipanel .psi-focus .pl-psi-halo{stroke:#070F07;stroke-width:7.5;opacity:.85}
#psipanel .psi-focus .pl-psi-dot{fill:#F0F0EA;stroke:#070F07;stroke-width:1.5}
#psipanel .psi-focus .pl-sp path{stroke-linejoin:round}

@media (max-width:1120px){ #psipanel .psi-focus-t{font-size:18px} #psipanel .psi-focus{padding:12px 14px 10px;gap:8px} }
/* A SHORT WINDOW (1280x720, 1440x746): a key below the plot left the plot ~150px tall. There the key
   becomes a column to the plot's right, and the plot takes the height. */
@media (min-width:901px) and (max-height:820px){
  #psipanel .psi-focus{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto;
    grid-template-areas:"h h" "plot key" "cap cap";column-gap:14px}
  #psipanel .psi-focus-h{grid-area:h}
  #psipanel .psi-focus-plot{grid-area:plot}
  #psipanel .psi-focus-key{grid-area:key;grid-template-columns:minmax(0,1fr);align-content:start;gap:4px;
    width:clamp(150px,30%,210px);padding:0 0 0 12px;border-top:0;border-left:1px solid var(--hud-line,rgba(240,240,234,.09));
    overflow-y:auto;min-height:0}
  #psipanel .psi-focus-k{font-size:var(--hud-fs-sm,12px)}
  #psipanel .psi-focus-cap{grid-area:cap}
  #psipanel .psi-paper figcaption{max-height:6.2em}
}
/* ── phone: the stage is the first thing in the chapter's flow, full width ────────────────────────── */
@media (max-width:900px){
  #psipanel .psi-stage{position:relative;inset:auto;display:block;margin:0 0 14px;overflow:visible}
  #psipanel .psi-stage::before{display:none}
  #psipanel .psi-stage > * + *{margin-top:14px}
  #psipanel .psi-stage:has(> :nth-child(2)) > .psi-focus{height:auto}
  #psipanel .psi-paper{width:auto;padding:10px;border-radius:0;border-left:0;border-right:0;box-shadow:none}
  #psipanel .psi-paper-img{min-height:0}
  #psipanel .psi-paper figcaption{max-height:none;overflow:visible;font-size:var(--hud-fs-sm,12px)}
  #psipanel .psi-focus{position:relative;border-radius:0;border-left:0;border-right:0;box-shadow:none;
    padding:14px 12px 12px}
  #psipanel .psi-focus-t{font-size:19px}
  #psipanel .psi-focus-plot{flex:none;height:min(50vh,320px)}
  #psipanel .psi-focus-key{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px 12px}
  #psipanel .psi-focus .pl-ev text,#psipanel .psi-focus .pl-start-t{font-size:12px}
  #psipanel .psi-focus .pl-tick text,#psipanel .psi-focus .pl-xl,#psipanel .psi-focus .pl-start-x{font-size:11px}
}