/* RainSignal — frosted instruments over a live map.
   Glass earns its place here: every panel genuinely floats above the basemap, and the
   map stays readable through all of them. */

:root{
  --map-ground:#f7f7f7;
  --ground:#eef2f6;

  /* Glass. Translucent enough that the map reads through, opaque enough to hold text. */
  --glass:rgba(255,255,255,.72);
  --glass-solid:rgba(255,255,255,.78);
  --glass-hi:rgba(255,255,255,.9);      /* top highlight edge */
  --glass-line:rgba(16,28,40,.09);
  --glass-line-2:rgba(16,28,40,.055);

  --ink:#0f1a24;
  --ink-2:#445565;
  --ink-3:#5f7182;
  --ink-4:#8593a1;

  /* Sequential rain ramp: lightness falls monotonically, so it survives greyscale
     and colour-vision deficiency and never reads as a rainbow. */
  --r0:#93aec1; --r1:#6e9bb5; --r2:#4a85a4;
  --r3:#2e6e8f; --r4:#1a5878; --r5:#0d425f;

  --accent:#0e7c86;
  --accent-soft:rgba(14,124,134,.12);
  --warn:#9a5a15;
  --bad:#a8382a;
  --none:#b6c2cd;

  /* Layered depth: a close contact shadow plus a wide ambient one. */
  --lift:0 1px 2px rgba(16,28,40,.06), 0 8px 20px -8px rgba(16,28,40,.14);
  --lift-lg:0 1px 2px rgba(16,28,40,.07), 0 20px 48px -20px rgba(16,28,40,.26);

  --r-sm:9px; --r-md:13px; --r-lg:18px;

  /* Emil's stronger curves. The built-in easings are too weak to read as intentional. */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --t-press:150ms; --t-fast:180ms; --t-mid:260ms;

  --panel-w:394px;
  --head-h:58px;
  --legend-h:126px;
  --status-h:33px;
  --sheet-h:52dvh;
  --legend-h-m:66px;
  --ui:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--ui);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow:hidden;max-width:100vw;
}

/* Browser surfaces belong to the design, not the browser. */
::selection{background:rgba(14,124,134,.18)}
:root{scrollbar-color:rgba(16,28,40,.22) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(16,28,40,.18);border-radius:99px;
  border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(16,28,40,.3);background-clip:content-box}
input{caret-color:var(--accent)}
a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:#0a5d65}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:5px}
:focus:not(:focus-visible){outline:none}

.skip{position:fixed;left:12px;top:-60px;z-index:99;padding:10px 14px;border-radius:var(--r-sm);
  background:var(--accent);color:#fff;font-weight:600;transition:top var(--t-fast) var(--ease-out)}
.skip:focus{top:12px}

/* ------------------------------------------------------------------- map */
#map{position:absolute;inset:0;background:var(--map-ground)}
.maplibregl-ctrl-attrib{font:11px/1.4 var(--ui);background:rgba(255,255,255,.72)!important;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.maplibregl-ctrl-attrib a{color:var(--ink-3)}
.maplibregl-canvas:focus{outline:none}

/* A whisper of light at the top edge so the floating pills sit on something. */


/* ------------------------------------------------------- floating glass */
.glass{
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--glass-line);
  box-shadow:var(--lift), inset 0 1px 0 var(--glass-hi);
}

/* ------------------------------------------------------------- header */
/* Fixed height and fixed positions: the mark and the view switch must not move a
   pixel when the view changes. */
.head{
  position:fixed;top:0;left:0;right:0;height:var(--head-h);z-index:20;
  display:flex;align-items:center;gap:16px;padding:0 16px;
  background:rgba(255,255,255,.66);
  backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--glass-line);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 6px 20px -14px rgba(16,28,40,.4);
}
.brand{display:flex;align-items:center;gap:9px;flex:none;text-decoration:none;color:inherit}
.brand-mark{display:block;width:30px;height:30px}
.brand-name{font-weight:600;font-size:16px;letter-spacing:-.02em}

.views{display:flex;gap:2px;padding:3px;border-radius:11px;flex:none;
  background:rgba(16,28,40,.05);border:1px solid var(--glass-line-2)}
.view-btn{appearance:none;border:0;background:transparent;color:var(--ink-2);
  font-family:var(--ui);font-size:13px;font-weight:500;padding:6px 15px;border-radius:8px;
  cursor:pointer;transition:background var(--t-fast) var(--ease-out),
  color var(--t-fast) var(--ease-out),transform var(--t-press) var(--ease-out)}
.view-btn[aria-pressed="true"]{background:#fff;color:var(--ink);
  box-shadow:0 1px 2px rgba(16,28,40,.12)}
.view-btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .view-btn:hover{color:var(--ink)}
  .view-btn[aria-pressed="true"]:hover{background:#fff}
}

.status{margin-left:auto;display:flex;align-items:center;gap:8px;min-width:0;
  padding:7px 13px;border-radius:99px;background:rgba(255,255,255,.72);
  border:1px solid var(--glass-line);box-shadow:0 1px 2px rgba(16,28,40,.05)}
.status-dot{width:7px;height:7px;border-radius:99px;flex:none;background:var(--ink-4)}
/* the status reads as a sentence, so it takes the interface face, not the data face */
.status-text{font-family:var(--ui);font-size:12.5px;font-weight:500;color:var(--ink-2);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.status[data-state="fresh"] .status-dot{background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.status[data-state="stale"] .status-dot{background:var(--warn);box-shadow:0 0 0 3px rgba(154,90,21,.14)}
.status[data-state="stale"] .status-text{color:var(--warn)}
.status[data-state="error"] .status-dot{background:var(--bad)}
.status[data-state="error"] .status-text{color:var(--bad)}

/* --------------------------------------------------------------- views */
.stage{position:fixed;inset:var(--head-h) 0 0 0}
.view{position:absolute;inset:0}
.view[hidden]{display:none}

/* ------------------------------------------------- controls and legend */
.controls{position:absolute;left:14px;bottom:14px;z-index:6;display:flex;flex-direction:column;
  gap:10px;align-items:flex-start}
.switch{display:flex;padding:3px;gap:2px;border-radius:var(--r-md);
  background:var(--glass);backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid var(--glass-line);
  box-shadow:var(--lift),inset 0 1px 0 var(--glass-hi)}
.seg{appearance:none;border:0;background:transparent;color:var(--ink-2);font-family:var(--ui);
  font-size:12.5px;font-weight:500;padding:7px 13px;border-radius:10px;cursor:pointer;
  transition:background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out),
             transform var(--t-press) var(--ease-out)}
.seg[aria-pressed="true"]{background:var(--accent);color:#fff;
  box-shadow:0 1px 2px rgba(14,124,134,.3)}
.seg:active{transform:scale(.97)}

.legend{margin:0;padding:12px 14px;width:252px;height:var(--legend-h);
  display:flex;flex-direction:column;border-radius:var(--r-md);
  background:var(--glass);backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid var(--glass-line);
  box-shadow:var(--lift),inset 0 1px 0 var(--glass-hi)}
.legend figcaption{font-size:12px;font-weight:600;margin-bottom:8px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ramp{height:7px;border-radius:99px;margin-bottom:5px}
.ramp-ends{display:flex;justify-content:space-between;font-family:var(--mono);
  font-size:10.5px;color:var(--ink-3)}
.legend-note{margin:8px 0 0;font-size:11.5px;line-height:1.45;color:var(--ink-3);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

.zoom{position:absolute;right:calc(var(--panel-w) + 30px);bottom:14px;z-index:6;
  display:flex;flex-direction:column;padding:3px;gap:2px;border-radius:var(--r-md);
  background:var(--glass);backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid var(--glass-line);
  box-shadow:var(--lift),inset 0 1px 0 var(--glass-hi)}
.zoom button{width:32px;height:32px;display:grid;place-items:center;border:0;background:transparent;
  border-radius:9px;cursor:pointer;color:var(--ink-2);
  transition:background var(--t-fast) var(--ease-out),transform var(--t-press) var(--ease-out)}
.zoom svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.zoom button:active{transform:scale(.94)}

@media (hover:hover) and (pointer:fine){
  .seg:hover{color:var(--ink);background:rgba(16,28,40,.05)}
  .seg[aria-pressed="true"]:hover{background:#0a6a73;color:#fff}
  .zoom button:hover{background:rgba(16,28,40,.06);color:var(--ink)}
}

/* ----------------------------------------------------------- the panel */
.panel{
  position:absolute;top:14px;right:14px;bottom:14px;width:var(--panel-w);z-index:7;
  display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;
  background:var(--glass-solid);
  backdrop-filter:blur(30px) saturate(190%);-webkit-backdrop-filter:blur(30px) saturate(190%);
  border:1px solid var(--glass-line);
  box-shadow:var(--lift-lg),inset 0 1px 0 var(--glass-hi);
}
.panel-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:20px 20px 8px}
.pane[hidden]{display:none}

.lede{margin:0 0 6px;font-size:25px;line-height:1.16;font-weight:600;letter-spacing:-.025em;
  text-wrap:balance}
.sub{margin:0 0 18px;color:var(--ink-2);font-size:14px}
.sub strong{color:var(--ink);font-weight:600}

.search{position:relative;display:flex;align-items:center;margin-bottom:10px}
.search-icon{position:absolute;left:11px;width:16px;height:16px;fill:none;stroke:var(--ink-3);
  stroke-width:1.7;stroke-linecap:round;pointer-events:none}
#search{width:100%;font-family:var(--ui);font-size:14px;color:var(--ink);
  background:rgba(255,255,255,.7);border:1px solid var(--glass-line);border-radius:var(--r-sm);
  padding:10px 34px;transition:border-color var(--t-fast) var(--ease-out),
  background var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out)}
#search::placeholder{color:var(--ink-3)}
#search:focus{outline:none;border-color:var(--accent);background:#fff;
  box-shadow:0 0 0 3px var(--accent-soft)}
#search::-webkit-search-cancel-button{display:none}
.search-clear{position:absolute;right:6px;width:24px;height:24px;display:grid;place-items:center;
  background:transparent;border:0;border-radius:6px;cursor:pointer;
  transition:transform var(--t-press) var(--ease-out)}
.search-clear svg{width:14px;height:14px;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round}
.search-clear:active{transform:scale(.9)}

.results{list-style:none;margin:0;padding:0;max-height:min(48vh,440px);overflow-y:auto}
.res{width:100%;display:flex;align-items:center;gap:11px;padding:9px 10px;border:0;
  background:transparent;border-radius:var(--r-sm);cursor:pointer;text-align:left;
  font-family:var(--ui);color:var(--ink);
  transition:background var(--t-fast) var(--ease-out),transform var(--t-press) var(--ease-out)}
.res[data-active="true"]{background:rgba(16,28,40,.055)}
.res:active{transform:scale(.99)}
.res-swatch{width:10px;height:10px;border-radius:99px;flex:none;
  box-shadow:inset 0 0 0 1px rgba(16,28,40,.22)}
.res-name{flex:1;font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res-val{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.res-val[data-none="true"]{color:var(--ink-3)}
.results-empty{padding:14px 10px;color:var(--ink-3);font-size:13.5px}
@media (hover:hover) and (pointer:fine){ .res:hover{background:rgba(16,28,40,.055)} }

/* --------------------------------------------------------- the readout */
.back{display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;
  color:var(--ink-3);font-family:var(--ui);font-size:13px;cursor:pointer;padding:4px 0;
  margin-bottom:12px;transition:color var(--t-fast) var(--ease-out),transform var(--t-press) var(--ease-out)}
.back svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.back:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){ .back:hover{color:var(--ink)} }

.place{margin:0 0 2px;font-size:23px;font-weight:600;letter-spacing:-.022em}
.place-sub{margin:0 0 18px;font-size:12.5px;color:var(--ink-3);font-family:var(--mono)}

.answer{padding:18px 0 20px;border-top:1px solid var(--glass-line);
  border-bottom:1px solid var(--glass-line)}
.answer-label{font-size:12.5px;color:var(--ink-2);margin:0 0 10px}
.answer-figure{display:flex;align-items:baseline;gap:10px}
.answer-num{font-size:54px;line-height:.92;font-weight:700;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums}
.answer-unit{font-size:19px;font-weight:600;color:var(--ink-3)}
.answer-bar{height:6px;border-radius:99px;background:rgba(16,28,40,.08);margin:14px 0 12px;
  overflow:hidden}
.answer-fill{height:100%;border-radius:99px;transform-origin:left center;
  transform:scaleX(var(--fill,1));transition:transform 420ms var(--ease-out)}
.answer-say{margin:0;font-size:14.5px;line-height:1.5}
.answer-note{margin:8px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.45}

.block{padding:18px 0;border-bottom:1px solid var(--glass-line)}
.block h2{margin:0 0 4px;font-size:14px;font-weight:600;letter-spacing:-.01em}
.block .why{margin:0 0 14px;font-size:13px;color:var(--ink-2);line-height:1.5}

.obs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--glass-line-2);
  border:1px solid var(--glass-line-2);border-radius:var(--r-sm);overflow:hidden}
.obs div{background:rgba(255,255,255,.55);padding:10px 12px}
.obs dt{font-size:11.5px;color:var(--ink-3);margin-bottom:3px}
.obs dd{margin:0;font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums}
.obs dd small{font-size:11px;color:var(--ink-3);font-family:var(--ui)}

.trust-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px}
.trust-verdict{font-size:15px;font-weight:600}
.trust-scale{position:relative;height:22px;margin:0 0 10px}
.trust-track{position:absolute;left:0;right:0;top:8px;height:6px;border-radius:99px;
  background:linear-gradient(90deg,var(--bad),var(--warn),var(--accent))}
.trust-pin{position:absolute;top:2px;width:3px;height:18px;border-radius:2px;background:var(--ink);
  box-shadow:0 0 0 2px rgba(255,255,255,.9);transform:translateX(-50%)}
.trust-ends{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3)}
.catch{display:flex;gap:4px;margin:14px 0 8px;flex-wrap:wrap}
.pip{width:11px;height:11px;border-radius:3px;background:rgba(16,28,40,.1)}
.pip[data-on="true"]{background:var(--accent)}
.catch-say{margin:0;font-size:13px;color:var(--ink-2);line-height:1.5}

details{border-top:1px solid var(--glass-line);padding:14px 0}
details summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;
  font-size:12.5px;color:var(--ink-3);font-weight:500;padding:2px 0;
  transition:color var(--t-fast) var(--ease-out)}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"";width:14px;height:14px;flex:none;background:currentColor;
  -webkit-mask:var(--chev) center/14px no-repeat;mask:var(--chev) center/14px no-repeat;
  transition:transform var(--t-fast) var(--ease-out)}
details[open] summary::before{transform:rotate(90deg)}
@media (hover:hover) and (pointer:fine){ details summary:hover{color:var(--ink-2)} }
.tech{padding-top:10px}
.tech table{width:100%;border-collapse:collapse;font-size:12.5px}
.tech th,.tech td{padding:6px 0;text-align:left;border-bottom:1px solid var(--glass-line-2);
  vertical-align:top}
.tech td:last-child{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.tech th{color:var(--ink-3);font-weight:400}
.tech p{margin:10px 0 0;font-size:12px;color:var(--ink-3);line-height:1.5}

.flag{display:flex;gap:9px;padding:11px 12px;border-radius:var(--r-sm);font-size:12.5px;
  line-height:1.45;background:rgba(154,90,21,.08);border:1px solid rgba(154,90,21,.2);
  color:#7d4810;margin-top:14px}
.flag svg{width:15px;height:15px;flex:none;margin-top:1px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round}
.flag[data-kind="none"]{background:rgba(16,28,40,.04);border-color:var(--glass-line);color:var(--ink-2)}

.panel-foot{flex:none;padding:12px 20px 14px;border-top:1px solid var(--glass-line);
  background:rgba(255,255,255,.4)}
.panel-foot p{margin:0;font-size:11.5px;line-height:1.5;color:var(--ink-3)}
.panel-foot strong{color:var(--ink-2);font-weight:600}

.tooltip{position:fixed;z-index:40;pointer-events:none;padding:7px 10px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.92);border:1px solid var(--glass-line);color:var(--ink);
  font-size:12.5px;white-space:nowrap;box-shadow:var(--lift);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.tooltip span{font-family:var(--mono);color:var(--ink-2);font-variant-numeric:tabular-nums}

/* ------------------------------------------------------- one moment */
/* The readout settling when a place is chosen. Transition, not keyframe, so a fast
   second choice retargets instead of restarting. */
#pane-station{opacity:1;transform:none;filter:blur(0);
  transition:opacity var(--t-mid) var(--ease-out),transform var(--t-mid) var(--ease-out),
             filter var(--t-mid) var(--ease-out)}
#pane-station[data-entering="true"]{opacity:0;transform:translateY(8px);filter:blur(5px)}

/* --------------------------------------------------------- responsive */
/* =====================================================================
   How it works. A reading page, not the dashboard: these selectors are not
   used by index.html, so the dashboard cannot see them.
   ===================================================================== */
body.doc{overflow:auto;background:
  radial-gradient(120% 60% at 50% 0%, #f4f8fb 0%, var(--ground) 60%) fixed}
.doc-scroll{padding:calc(var(--head-h) + 26px) 20px 60px}
.doc .story{max-width:720px;margin:0 auto}
.doc .story h1{font-size:32px;line-height:1.12;letter-spacing:-.03em;margin:0 0 10px}
.doc .story h2{margin:36px 0 8px}
.doc .story h3{margin:0 0 8px;font-size:14px;font-weight:600;letter-spacing:-.005em}
.doc .view-btn{text-decoration:none}
.doc .view-btn[aria-current="page"]{background:#fff;color:var(--ink);
  box-shadow:0 1px 2px rgba(16,28,40,.12)}

.steps{margin:14px 0 12px;padding:0;list-style:none;counter-reset:st}
.steps li{counter-increment:st;position:relative;padding:0 0 14px 34px;
  font-size:15px;line-height:1.6;color:var(--ink-2)}
.steps li::before{content:counter(st);position:absolute;left:0;top:1px;width:22px;height:22px;
  border-radius:99px;background:var(--accent-soft);color:var(--accent);
  font-family:var(--mono);font-size:11px;font-weight:500;
  display:grid;place-items:center}
.steps b{color:var(--ink);font-weight:600}

.two{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--glass-line-2);
  border:1px solid var(--glass-line-2);border-radius:var(--r-md);overflow:hidden;margin:14px 0 4px}
.two > div{background:rgba(255,255,255,.55);padding:15px 16px}
.two ul{margin:0;padding-left:17px}
.two li{font-size:14px;line-height:1.55;color:var(--ink-2);margin-bottom:7px}
.two li:last-child{margin-bottom:0}

.terms{margin:14px 0 4px;display:grid;gap:1px;background:var(--glass-line-2);
  border:1px solid var(--glass-line-2);border-radius:var(--r-md);overflow:hidden}
.terms > div{background:rgba(255,255,255,.55);padding:15px 16px}
.terms dt{font-weight:600;font-size:15px;margin-bottom:5px}
.terms dd{margin:0;font-size:14px;line-height:1.6;color:var(--ink-2)}
.terms dd b{color:var(--ink);font-weight:600}
.terms dd b + *{margin-left:0}

.doc-foot{margin-top:30px;padding-top:18px;border-top:1px solid var(--glass-line);
  font-size:12.5px!important;color:var(--ink-3)!important}
.doc-back{margin-top:18px}
.doc-back a{font-size:14px;font-weight:500}

/* =====================================================================
   Mobile. A different arrangement, not a shrunk desktop: the map is a clean
   block at the top of a scrolling column and nothing floats over it.
   Every rule below sits inside a media query; desktop is untouched.
   ===================================================================== */
@media (max-width:900px){
  /* --- header: small, mark left, switch right ----------------------- */
  .head{height:var(--head-h);padding:0 10px;gap:10px;background:rgba(255,255,255,.84)}
  .brand{padding:6px 2px}
  .brand-mark{width:26px;height:26px}
  .brand-name{font-size:15px;letter-spacing:-.02em}
  .views{margin-left:auto;padding:2px;border-radius:9px}
  .view-btn{padding:0 13px;font-size:12.5px;min-height:32px;border-radius:7px;
    display:inline-flex;align-items:center;justify-content:center}

  /* freshness keeps working exactly as before, on its own readable strip */
  .status{position:fixed;top:var(--head-h);left:0;right:0;z-index:19;
    margin:0;border-radius:0;justify-content:center;padding:6px 12px;
    border:0;border-bottom:1px solid var(--glass-line);
    background:rgba(255,255,255,.84);
    backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
    box-shadow:none}
  .status-text{overflow:visible;text-overflow:clip;font-size:12px}

  .stage{top:calc(var(--head-h) + var(--status-h))}

  /* --- map view becomes a scrolling column -------------------------- */
  #pane-map:not([hidden]){display:flex;flex-direction:column;overflow-y:auto;
    overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;padding:0 0 10px}
  #map{position:relative;order:1;flex:none;height:42dvh;min-height:238px;overflow:hidden}
  .zoom{order:2}
  .controls{order:3}
  .panel{order:4}

  /* map toolbar: in the flow, directly under the map, never over it */
  .zoom{position:static;display:flex;flex-direction:row;justify-content:space-evenly;gap:6px;
    margin:8px 8px 0;padding:5px;border-radius:var(--r-md)}
  .zoom button{width:46px;height:42px;border-radius:9px}
  .zoom svg{width:19px;height:19px}

  /* mode switch full width, then a slim legend strip */
  .controls{position:static;display:flex;flex-direction:column;gap:7px;margin:8px 8px 0}
  .switch{width:100%;padding:3px}
  .seg{flex:1;padding:0 8px;min-height:40px;font-size:13px;
    display:inline-flex;align-items:center;justify-content:center}
  .legend{width:100%;height:var(--legend-h-m);padding:9px 12px;
    display:flex;flex-direction:column;justify-content:center}
  .legend figcaption{display:none}          /* the switch already names the mode */
  .ramp{height:7px;margin-bottom:5px}
  .ramp-ends{font-size:11px}
  .legend-note{display:none}

  /* --- readout sits in the flow, no longer a floating sheet --------- */
  .panel{position:static;width:auto;height:auto;max-height:none;
    margin:10px 8px 0;border-radius:var(--r-lg)}
  .panel-scroll{flex:none;overflow:visible;padding:16px 16px 6px}
  .results{max-height:none;overflow:visible}
  .panel-foot{padding:11px 16px 13px}
  .panel-foot p{font-size:11px}
  .panel-foot a{display:inline-block;padding:5px 0}
  .foot-links{gap:14px}
  .foot-links a{padding:7px 0}

  /* --- touch sizing ------------------------------------------------- */
  #search{padding:13px 40px;font-size:16px}   /* 16px stops iOS zooming on focus */
  .search-icon{left:13px;width:17px;height:17px}
  .search-clear{right:5px;width:40px;height:40px}
  .search-clear svg{width:15px;height:15px}
  .res{padding:12px 10px;gap:12px}
  .res-name{font-size:15px}
  .res-val{font-size:13px}
  .maplibregl-ctrl-attrib{font-size:11px!important}

  /* --- readout typography ------------------------------------------- */
  .lede{font-size:21px}
  .sub{font-size:14px}
  .answer-num{font-size:44px}
  .place{font-size:21px}

  /* --- how it works --------------------------------------------------- */
  .doc-scroll{padding:calc(var(--head-h) + 16px) 8px 40px}
  .doc .story{padding:20px 16px 18px}
  .doc .story h1{font-size:22px}
  .doc .story h2{font-size:16px;margin:26px 0 6px}
  .doc .story h3{font-size:13.5px}
  .steps li{font-size:13.5px;padding-left:30px}
  .steps li::before{width:20px;height:20px;font-size:10.5px}
  .two{grid-template-columns:1fr}
  .two > div{padding:13px 14px}
  .two li{font-size:13px}
  .terms > div{padding:13px 14px}
  .terms dt{font-size:14px}
  .terms dd{font-size:13px}
  .doc .view-btn{padding:0 10px;font-size:12px}
  .doc .views{flex-wrap:nowrap}

}

@media (max-width:560px){
  :root{--head-h:48px;--status-h:29px;--legend-h-m:52px}
  .obs{grid-template-columns:1fr 1fr}
  .obs div{padding:9px 11px}
  .obs dd{font-size:13.5px}
  .nonum{padding:12px}
  .missing-list li{font-size:11px}
}

@media (max-width:380px){
  #map{height:38dvh}
  .brand-name{display:none}
  .seg{font-size:12px}
  .obs{grid-template-columns:1fr}
  .story > h1{font-size:19px}
  .stat-num{font-size:27px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  #pane-station[data-entering="true"]{transform:none;filter:none}
}

/* ===================================================================== */
/* Analytics                                                              */
/* ===================================================================== */
.analytics-scroll{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;
  padding:26px 20px 40px}
.story{max-width:760px;margin:0 auto;
  background:var(--glass-solid);
  backdrop-filter:blur(30px) saturate(190%);-webkit-backdrop-filter:blur(30px) saturate(190%);
  border:1px solid var(--glass-line);border-radius:var(--r-lg);
  box-shadow:var(--lift-lg),inset 0 1px 0 var(--glass-hi);
  padding:34px 34px 30px}
.story > h1{margin:0 0 10px;font-size:30px;line-height:1.14;font-weight:600;
  letter-spacing:-.03em;text-wrap:balance}
.story .standfirst{margin:0 0 4px;font-size:16px;line-height:1.55;color:var(--ink-2);
  max-width:62ch}
.story h2{margin:34px 0 8px;font-size:18px;font-weight:600;letter-spacing:-.02em}
.story p{margin:0 0 12px;font-size:15px;line-height:1.6;color:var(--ink-2);max-width:66ch}
.story p strong{color:var(--ink);font-weight:600}
.story hr{border:0;border-top:1px solid var(--glass-line);margin:30px 0 0}

/* the one figure that carries a section, never a grid of tiles */
.stat-line{display:flex;align-items:baseline;gap:12px;margin:16px 0 6px}
.stat-num{font-size:42px;line-height:1;font-weight:700;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;color:var(--r4)}
.stat-say{font-size:15px;color:var(--ink-2)}

.chart{margin:16px 0 6px}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.ax-line{stroke:var(--glass-line);stroke-width:1}
.ax-txt{fill:var(--ink-3);font-size:11px;font-family:var(--mono)}
.bar-name{fill:var(--ink);font-size:13px;font-family:var(--ui);font-weight:500}
.bar-val{fill:var(--ink-2);font-size:12px;font-family:var(--mono);font-variant-numeric:tabular-nums}
.chart-key{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:10px;font-size:12.5px;
  color:var(--ink-2)}
.chart-key span{display:inline-flex;align-items:center;gap:7px}
.chart-key i{width:11px;height:11px;border-radius:3px;display:block}
.caption{margin:10px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.5;max-width:66ch}

.dots-100{display:grid;grid-template-columns:repeat(20,1fr);gap:3px;max-width:420px;margin:14px 0 10px}
.dots-100 i{aspect-ratio:1;border-radius:2px;background:rgba(16,28,40,.09);display:block}
.dots-100 i[data-on="true"]{background:var(--r4)}

.takeaways{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:2px}
.takeaways li{padding:14px 0;border-top:1px solid var(--glass-line-2)}
.takeaways b{display:block;font-size:15px;margin-bottom:3px}
.takeaways span{font-size:14px;color:var(--ink-2);line-height:1.55}

/* ===================================================================== */
/* Readout clarifications                                                 */
/* ===================================================================== */
/* Historical reliability and today's estimate are different claims. When there is
   no estimate the reliability block is visibly stood down so the two can never be
   read as one. */
.block[data-muted="true"]{opacity:.72}
.block[data-muted="true"] .trust-verdict{color:var(--ink-3)!important}

.nonum{display:flex;gap:10px;padding:13px 14px;border-radius:var(--r-sm);
  background:rgba(16,28,40,.045);border:1px solid var(--glass-line);margin:2px 0 0}
.nonum svg{width:16px;height:16px;flex:none;margin-top:1px;fill:none;stroke:var(--ink-3);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nonum p{margin:0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.nonum p + p{margin-top:7px}
.nonum b{color:var(--ink);font-weight:600}
.missing-list{margin:7px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:5px}
.missing-list li{font-family:var(--mono);font-size:11.5px;padding:2px 7px;border-radius:5px;
  background:rgba(16,28,40,.06);color:var(--ink-2)}

/* footer */
.panel-foot p{margin:0 0 7px}
.panel-foot p:last-child{margin:0}
.foot-links{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.foot-links a{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500}
.foot-links svg{width:13px;height:13px;fill:currentColor}

/* =====================================================================
   Mobile, part two. These rules must sit after the analytics and readout
   styles above: CSS resolves equal specificity by source order, and the
   earlier mobile block was being overridden by rules defined later in this
   file. Desktop is untouched -- everything here is inside a media query.
   ===================================================================== */
@media (max-width:900px){
  /* --- the document scrolls, not a pane inside it -------------------- */
  html,body{height:auto}
  body{overflow:visible;overflow-x:hidden;
    padding-top:calc(var(--head-h) + var(--status-h))}
  .stage{position:static;inset:auto}
  .view{position:static;inset:auto}
  #pane-map:not([hidden]){display:flex;flex-direction:column;overflow:visible;
    padding:0 0 12px}
  .analytics-scroll{position:static;inset:auto;overflow:visible;padding:10px 8px 30px}
  .panel{position:static}

  /* --- analytics type ------------------------------------------------ */
  .story{padding:20px 16px 18px;border-radius:var(--r-lg);max-width:none}
  .story > h1{font-size:20px;line-height:1.22;letter-spacing:-.022em}
  .story .standfirst{font-size:14px;line-height:1.55;max-width:none}
  .story h2{font-size:15.5px;margin:26px 0 6px}
  .story p{font-size:13.5px;line-height:1.6;max-width:none}
  .story hr{margin-top:24px}
  .dots-100{max-width:none;gap:2.5px;margin:12px 0 8px}
  .chart{margin:12px 0 4px}
  .chart-key{font-size:12px;gap:5px 14px;margin:8px 0 10px}
  .caption{font-size:12.5px;line-height:1.55;max-width:none}
  .takeaways li{padding:12px 0}
  .takeaways b{font-size:14px}
  .takeaways span{font-size:13px}
  .story a{display:inline-block;padding:6px 0}
  .tech table{font-size:11.5px}
  .tech th,.tech td{padding:6px 0}
  .tech p{font-size:11.5px}
  details summary{font-size:12.5px}

  /* --- the headline figure: one block, one left edge ----------------- */
  .stat-line{display:block;margin:16px 0 8px}
  .stat-num{display:block;font-size:34px;line-height:1.05;margin:0 0 5px;
    white-space:nowrap;letter-spacing:-.035em}
  .stat-say{display:block;font-size:13.5px;line-height:1.5;color:var(--ink-2);
    max-width:none}

  /* --- the comparison, as plain elements ----------------------------- */
  .mbars{display:grid;gap:16px;margin:14px 0 4px}
  .mbar b{display:block;font-size:14px;font-weight:600;margin-bottom:7px}
  .mbar p{margin:0 0 5px;font-size:12.5px;line-height:1.45;color:var(--ink-2);max-width:none}
  .mbar p + .mbar-track{margin-bottom:9px}
  .mbar-track{display:block;height:9px;border-radius:99px;
    background:rgba(16,28,40,.075);overflow:hidden}
  .mbar-track i{display:block;height:100%;border-radius:99px}
}

@media (max-width:380px){
  .story > h1{font-size:19px}
  .stat-num{font-size:30px}
}