/* 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}
/* PSI-BLEED: the map's labels, the viewpoint card and the scale card sit under the panel and showed
   through it; in focus they are hidden (not removed) while the PSI view is open */
body[data-view="psi"]:has(#psipanel.psi-mode-focus) :is(#labels,#locator,#cartos){visibility:hidden}

/* ── 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}
/* The image gives way, the caption does not: it is uncapped and
   does not shrink, so the whole credit line is read without scrolling (a 7.6em cap
   hid the last credit line on ndoki at 1440x900 with 86px of stage to spare). */
#psipanel .psi-paper figcaption{flex:0 0 auto;overflow:auto;margin:12px 4px 2px;
  scrollbar-width:thin;scrollbar-color:rgba(240,240,234,.38) transparent;
  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))}
/* The header's legibility scrim (.hud::before, 132px, z 30) ran 56px down over the figure's white ground
   (minshan, 1440x900). In this view the stage dims the map itself, so the scrim stops at the stage top. */
body[data-view="psi"] .hud::before{height:var(--hud-top,76px)}

/* ── 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){
  /* PSI-INSET: the chapter bar can wrap onto several rows. The chapter ends above its MEASURED top
     (--psi-focus-bot, which the block publishes from #chapters' box and re-measures when the bar changes
     size) and scrolls inside that, so no row of the chapter sits under the bar at rest. */
  body[data-view="psi"] #psipanel.psi-mode-focus{bottom:var(--psi-focus-bot,140px);overflow-y:auto;overscroll-behavior:contain}
  #psipanel .psi-stage{position:relative;inset:auto;display:block;margin:0 0 14px;overflow:visible}
  /* the desktop rail offsets are (attribute) more specific than the line above, so with a rail on they
     survived onto the relative stage and pushed it ~137px off the left edge at 390 (2026-09-30) */
  #psipanel[data-psi-rail-l] .psi-stage,#psipanel[data-psi-rail-r] .psi-stage{inset:auto}
  #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}
}