/* Constellation, restyled to the Skaraz Data design system v1.1 ("the quiet instrument").
   Tokens copied from src/styles/site.css (source: skaraz-data/brand/tokens.json).
   Night ocean (dark) is the default; Daylight steel (light) follows the stored "sd-theme"
   choice or the OS preference, set on <html data-theme> before first paint (index.html).
   index (teal) = the index, thresholds, links, focus. trigger (amber) = triggers and payouts only.
   The older variable names (--bg, --panel, --accent, ...) are kept and mapped onto the tokens. */
@font-face { font-family: "Switzer"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/switzer-400.woff2") format("woff2"); }
@font-face { font-family: "Switzer"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/switzer-500.woff2") format("woff2"); }

:root {
  --ground: #0d1b24; --surface: #132733; --line: #1d3442; --ink: #e6edf0; --muted: #8fa3b0;
  --index: #3fa7bd; --trigger: #e8a33d; --ink-on-trigger: #0d1b24; --miss: #d9705c;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --ground: #eceff0; --surface: #ffffff; --line: #cfd6da; --ink: #14202a; --muted: #5a6670;
  --index: #0b5d73; --trigger: #b86e0e; --ink-on-trigger: #ffffff; --miss: #b2452f;
  color-scheme: light;
}
:root {
  --bg: var(--ground);
  --panel: color-mix(in oklab, var(--surface) 94%, transparent);
  --panelSolid: var(--surface);
  --inset: var(--ground);
  --hair: var(--line);
  --border: var(--line);
  --border-strong: color-mix(in oklab, var(--line) 55%, var(--muted));
  --text: var(--ink);
  --accent: var(--index);
  --ok: var(--index);
  --warn: var(--trigger);
  --sans: "Switzer", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ground); color: var(--ink);
  font-family: var(--sans); letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; font-synthesis: none; }
a { color: var(--index); }
input[type=range], input[type=checkbox] { accent-color: var(--index); }
:focus-visible { outline: 2px solid var(--index); outline-offset: 2px; border-radius: 2px; }
#map { position: absolute; inset: 0; }

.panel {
  position: absolute;
  z-index: 2;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 16px 18px;
}
#controls { top: 14px; left: 14px; width: 296px; max-height: calc(100% - 28px); overflow-y: auto; }
#controls h1 { font-size: 20px; font-weight: 400; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 6px; text-wrap: balance; }
#controls .sub { color: var(--muted); font-size: 13px; line-height: 1.45; margin: 0 0 14px; }
#controls h2 { font: 400 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 14px 0 8px; }

.layer-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; }
.layer-row .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.layer-row button { margin-left: auto; background: none; border: 1px solid var(--border); color: var(--accent); border-radius: 5px; font-size: 11px; padding: 2px 7px; cursor: pointer; }
.layer-row button:hover { border-color: var(--accent); }

.opacity { display: block; font-size: 12px; color: var(--muted); margin-top: 12px; }
.opacity input { width: 100%; margin-top: 6px; }
.toggle { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-top: 12px; cursor: pointer; }

.legend { margin-top: 14px; }
.legend.hidden, .detail.hidden { display: none; }
/* ⚠ THE GENERIC RULE, missing until 2026-09-03. `.hidden` was defined only for .legend,
   .detail and .modal, so the other ten `classList.add("hidden")` calls in app.js did
   NOTHING: the empty DATE/SEASON box stayed on screen for the wind POC, whose index is one
   peak per cell and has no frames, and the sources button stayed clickable on a POC with no
   case study, opening the PREVIOUS peril's claims. !important because several of these
   elements set their own display (flex, block) and would otherwise win. */
.hidden, [hidden] { display: none !important; }
.ramp-row { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 2px 0; }
.ramp-row .sw { width: 22px; height: 12px; border-radius: 2px; flex: none; }

.detail { top: 14px; right: 14px; width: 320px; max-height: calc(100% - 28px); overflow-y: auto; }
.detail h2 { margin: 0 0 4px; padding-right: 22px; font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; }
.detail .peril { color: var(--muted); font: 400 11px/1.4 var(--mono); margin-bottom: 12px; text-transform: uppercase; letter-spacing: .05em; }
.detail .close { position: absolute; top: 10px; right: 12px; background: none; border: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.metric { background: var(--inset); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.metric .k { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.metric .v { font: 500 18px/1.2 var(--mono); margin-top: 2px; }
.section { margin-top: 14px; }
.section h3 { font: 400 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 6px; }
table.ladder { width: 100%; border-collapse: collapse; font-size: 12px; }
table.ladder th, table.ladder td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--border); }
.badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; }
.badge.ok { background: color-mix(in oklab, var(--index) 16%, var(--surface)); color: var(--ok); }
.badge.na { background: #33291200; color: var(--warn); border: 1px solid var(--warn); }
.stages { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.stages span { font-size: 10px; background: var(--inset); border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; color: var(--muted); }

/* pipeline drill-down + district score */
.drill { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.drill select, #scoreYear { background: var(--inset); color: var(--fg, var(--text)); border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; font-size: 12px; }
.drill input[type=range] { flex: 1; min-width: 90px; }
.scoreRamp { display: flex; gap: 2px; margin: 8px 0 4px; }
.scoreRamp .sw { width: 16px; height: 12px; border-radius: 2px; }

.drill label { font-size: 11px; color: var(--muted); width: 38px; flex: none; }
.section.case strong { font-size: 13px; color: var(--fg, var(--text)); }
.section.case .src { font-size: 10px; margin-top: 6px; }
.section.case .src a { color: var(--accent); }

/* pipeline flow (replaces the raw stage-name dump) */
.flow { display: flex; flex-direction: column; gap: 4px; }
.flow .frow { display: flex; gap: 6px; }
.fstep { background: var(--inset); border: 1px solid var(--border); border-radius: 5px; padding: 5px 8px; font-size: 11px; color: var(--fg, var(--text)); flex: 1; text-align: center; }
.fstep.in { background: color-mix(in srgb, var(--accent) 12%, var(--panelSolid)); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.farrow { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); text-align: center; padding: 1px 0; }

/* district time-series popup */
.maplibregl-popup-content { background: var(--panelSolid); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 10px; }
/* .peril has a light color only when scoped under .detail; inside the popup it fell back
   to MapLibre's default black-on-white and vanished on the dark popup. Style it here. */
.dpopup .peril { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin: 2px 0 4px; }
.pcap { font-size: 10px; line-height: 1.5; color: var(--muted); margin: 4px 0; }
.pcap b { color: var(--text); }
.maplibregl-popup-tip { border-top-color: var(--panelSolid) !important; border-bottom-color: var(--panelSolid) !important; }
.maplibregl-popup-close-button { color: var(--muted); font-size: 16px; }
.dpopup strong { color: var(--text); font-size: 13px; }
.dpopup .chart { display: block; margin: 6px 0; }
.pseasons { display: flex; flex-direction: column; gap: 3px; }
.srow { display: flex; justify-content: space-between; font-size: 11px; color: var(--text); border-top: 1px solid var(--hair); padding-top: 3px; }
.tip { font-size: 10px; opacity: 0.8; margin-top: 6px; }

/* larger district popup */
.maplibregl-popup-content { min-width: 300px; }
.dpopup { max-width: 460px; }
.dpopup .chart { display: block; margin: 8px 0; width: 100%; height: auto; }
.pexplain { font-size: 11px; line-height: 1.5; color: var(--muted); margin-top: 8px; border-top: 1px solid var(--hair); padding-top: 6px; }
.pexplain b { color: var(--text); }
.srow span:last-child { color: var(--muted); }
.srow b { color: var(--text); }

/* ---- restructured layout (2026-07-10) ---------------------------------- */
.fld { margin: 12px 0; }
.flbl { display:block; font: 400 10.5px/1.4 var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:5px; }
.hint2 { text-transform:none; letter-spacing:0; }
.row { display:flex; gap:8px; align-items:center; }
.row select { flex:1; min-width:0; }
select { background:var(--inset); color:var(--text); border:1px solid var(--border-strong); border-radius:4px; padding:7px 8px; font: 400 13px/1.2 var(--sans); max-width:100%; text-overflow:ellipsis; }
#layerSelect { max-width:200px; }
.btn { background:transparent; color:var(--ink); border:1px solid var(--border-strong); border-radius:999px; padding:7px 13px; font: 500 12.5px/1 var(--sans); cursor:pointer; transition: border-color 150ms ease, background-color 150ms ease; }
.btn:hover { border-color:var(--ink); }
.btn:active { transform: scale(0.97); }
.btn.wide { width:100%; display:flex; justify-content:space-between; align-items:center; text-align:left; padding:10px 14px; margin: 2px 0 4px; }
.hint { display:block; font-size:10px; color:var(--muted); margin-top:5px; }
.unit { font-size:10px; color:var(--muted); font-weight:normal; text-transform:none; letter-spacing:0; }

/* pipeline flow doubles as the map-layer control */
.flowtip { font-size:10px; color:var(--muted); margin:0 0 6px; }
.fstep.map { cursor:pointer; }
.fstep.map:hover { border-color:var(--accent); }
.fstep.active { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.fstep.disabled { opacity:0.4; cursor:default; }
.fstep.disabled:hover { border-color:var(--border); }

/* detail panel copy */
.how { font-size:11.5px; color:var(--muted); line-height:1.55; margin:0; }
.how b, .fine b { color:var(--text); }
.fine { font-size:10px; color:var(--muted); line-height:1.5; margin:6px 0 0; }
.fine.caveat { border-left:2px solid var(--border-strong); padding-left:7px; color:var(--muted); }

/* backtest & basis-risk panel */
.tiles { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; margin:2px 0 8px; }
.tile { background:var(--inset); border:1px solid var(--border); border-radius:8px; padding:8px 6px; text-align:center; }
.tile .v { font: 500 16px/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.tile .k { font: 400 8.5px/1.3 var(--mono); text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin-top:2px; }
.tile.good .v { color:var(--ink); } .tile.warn .v { color:var(--ink); } .tile.gap .v { color:var(--index); }
.grid16 { display:grid; grid-template-columns:repeat(8,1fr); gap:3px; margin-top:2px; }
.yr { font: 500 8.5px/1 var(--mono); text-align:center; border-radius:3px; padding:4px 0; color:var(--ink-on-trigger); }
.yr.tp { background:var(--trigger); } .yr.fp { background:transparent; color:var(--trigger); box-shadow: inset 0 0 0 1px var(--trigger); } .yr.tn { background:var(--line); color:var(--muted); } .yr.miss { background:var(--miss); color:#fff; }
.gridkey { display:flex; gap:10px; flex-wrap:wrap; font-size:9px; color:var(--muted); margin-top:6px; }
.gridkey span { display:flex; align-items:center; gap:4px; }
.gridkey i { width:9px; height:9px; border-radius:2px; display:inline-block; }
.gridkey i.tp { background:var(--trigger); } .gridkey i.fp { box-shadow: inset 0 0 0 1px var(--trigger); } .gridkey i.tn { background:var(--line); } .gridkey i.miss { background:var(--miss); }

/* per-year rows collapsed under a disclosure in the popup */
.pdetails { margin-top:6px; }
.pdetails summary { font-size:11px; color:var(--accent); cursor:pointer; }
.pseasons { margin-top:5px; }

/* sources modal */
.modal { position:absolute; inset:0; z-index:6; background:color-mix(in oklab, var(--ground) 72%, transparent); display:flex; align-items:center; justify-content:center; }
.modal.hidden { display:none; }
.modalCard { position:relative; width:min(460px,92%); max-height:min(82vh,780px); display:flex; flex-direction:column;
  background:var(--surface); color:var(--text); border:1px solid var(--border-strong); border-radius:6px; padding:22px 24px; box-shadow:0 10px 40px rgb(0 0 0 / .25); }
.modalCard h3 { margin:0 22px 8px 0; font-size:18px; font-weight:500; line-height:1.3; letter-spacing:-0.02em; text-wrap: balance; }
.modalCard .close { position:absolute; top:8px; right:12px; }
.msum { font-size:12px; color:var(--muted); line-height:1.55; margin:6px 0; }
.msrc { font-size:11px; margin-top:12px; color:var(--muted); }
.msrc a { color:var(--accent); }

/* Case-study modal: optional body paragraphs and a caveats block. POCs that carry only a
   `summary` are unaffected: these selectors simply have nothing to match.
   The card is height-capped and the BODY scrolls: the NZ case study is four paragraphs and
   four caveats, which grew the card past the viewport and covered the map with no way to
   reach the bottom. */
#modalBody { overflow-y:auto; overscroll-behavior:contain; padding-right:6px; }
#modalBody .mbody { margin:9px 0 0; font-size:12px; line-height:1.6; color:var(--text); }
#modalBody .mcav { margin:14px 0 0; padding:10px 12px; border-left:2px solid var(--border-strong);
  background:var(--ground); border-radius:4px; }
#modalBody .mcav b { display:block; font: 400 10.5px/1.4 var(--mono); letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
#modalBody .mcav ul { margin:0; padding-left:16px; }
#modalBody .mcav li { margin:4px 0; font-size:11.5px; line-height:1.55; color:var(--muted); }
/* threshold suffix on a physical-unit legend (e.g. "Cat 2  ≥ 89") */
.ramp-row .rlvl { color:var(--muted); font-variant-numeric:tabular-nums; margin-left:4px; }

/* ---- v3 identity: brand bar, kicker, site links ---------------------------------------- */
.brandbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin: -2px 0 16px; }
.brand { display:inline-flex; text-decoration:none; }
.sd-logo { display:block; width:138px; height:auto; }
.sd-logo .lg-t { fill: var(--trigger); }
.sd-logo .lg-i { fill: var(--ink); }
.sd-logo .lg-x { fill: var(--index); }
.themeBtn { display:inline-grid; place-items:center; width:34px; height:34px; flex:none; border:1px solid var(--line); border-radius:999px;
  background:transparent; color:var(--muted); cursor:pointer; transition: color 150ms ease, border-color 150ms ease; }
.themeBtn svg { width:16px; height:16px; }
.themeBtn:hover { color:var(--ink); border-color:var(--border-strong); }
.kicker { font: 400 11px/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--index); margin:0 0 4px; }
.panelLinks { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:16px; padding-top:12px; border-top:1px solid var(--line); }
.panelLinks a { font-size:12.5px; color:var(--muted); text-decoration:none; }
.panelLinks a:hover { color:var(--ink); }
.panelLinks a:last-child { color:var(--index); }
.ramp-row, .srow, .gridkey, .hint, .unit, .opacity, .toggle { font-variant-numeric: tabular-nums; }
.close { color: var(--muted); background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 4px; }
.close:hover { color: var(--ink); }
.maplibregl-ctrl-group { background: var(--surface); border: 1px solid var(--line); box-shadow: none !important; }
.maplibregl-ctrl-group button + button { border-top-color: var(--line); }
:root:not([data-theme="light"]) .maplibregl-ctrl-group .maplibregl-ctrl-icon { filter: invert(1) brightness(.9); }
.maplibregl-ctrl-attrib { background: color-mix(in oklab, var(--surface) 80%, transparent) !important; color: var(--muted); }
.maplibregl-ctrl-attrib a { color: var(--muted); }

/* ---- phones: controls on top, detail as a bottom sheet ------------------------------------ */
@media (max-width: 720px) {
  .panel { padding: 12px 14px; }
  #controls { top: 8px; left: 8px; right: 8px; width: auto; max-height: 34%; }
  #controls .sub { display: none; }
  #controls h1 { font-size: 17px; margin-bottom: 4px; }
  .brandbar { margin-bottom: 10px; }
  .fld { margin: 8px 0; }
  #layerSelect { max-width: none; }
  .detail { top: auto; bottom: 8px; left: 8px; right: 8px; width: auto; max-height: 36%; }
  .detail h2 { font-size: 16px; }
  .brandbar .sd-logo { width: 118px; }
  .maplibregl-ctrl-bottom-right { display: none; }
  .maplibregl-popup-content { min-width: 0; }
  .dpopup { max-width: calc(100vw - 48px); }
}