/* US Event Monitor - reader styles: what is US's own, on top of Design V2.
 *
 * 🔴 DESIGN V2 IS ONE LOOK (Van approved 2026-10-12, PM-13; his choice "A", PM-18: V2's layout and colours with D45's
 * shapes). Its tokens and shared components (header, footer, status, tag, figures, rows, chips, live dot) are
 * em-tokens-v2.css, generated by the V2 GLOBAL lane and copied here byte for byte by tools/build-v2-shared.mjs (its
 * --check is in verify). Every page links it BEFORE this file. Nothing it defines is defined again here: a change to the
 * shared look is made in Global's file and re-copied, never patched in this one.
 *
 * What stays here is US's own: the D37 Active bands, the map's line tokens, the status classes the GPU map's indices use
 * (.st-0 .. .st-4), the search box in the header, and every US page's own rules below.
 *
 * ONE THEME (D22): light only. There is no dark block, no toggle, and no colour-scheme media query here or in any page;
 * test/web-shell.test.ts fails on any of them. The map reads its colours from the tokens, so O6 is a token change.
 *
 * D45 (Van, 2026-10-04), as A keeps it: no pills, square corners, a status is a colour edge bar plus its word, choices
 * are flat words with an underline, and nothing is lifted off the page by a shadow. test/web-d45.test.ts holds it.
 */
/* US-only tokens. D37: Active is shaded by 24 hours of reports, deepest = most (the dashboard and the apex map); on the
   dark ground the light end is the deep indigo and the deep end the bright one. */
:root{--s1-light:#2E3768;--s1-deep:#7F8EE0;--a0:var(--s1-light);--a1:var(--s1);--a2:var(--s1-deep)}
/* Design V2's map lines on the light surfaces (PM, 2026-10-12): white county lines at 0.6, white state lines, ink region
   lines (county-map.js palette(); unset, the renderer derives them from the inks as before). Widths are the renderer's
   device-pixel classes: 1 one pass, 2 three passes, 3 five passes. Command View (dark) keeps its own. */
:root:not([data-surface=command]){--map-county:#0A0D1399;--map-county-w:1;--map-state:#FFFFFF;--map-state-w:2;--map-region:#ECE8E0;--map-region-w:2}
/* U23 (D69, Van: the apex is the look standard): US declares NO palette of its own. Paper, surfaces, inks, rules, accent and
   the status hues are the shared set (global tokens.ts, G13, regenerated into em-tokens-v2.css: paper #0A0D13, surface
   #10141C, ink3 #8A93A3 clearing 4.5:1, the blue accent), and so are the body's 15/1.5 and the focus ring. One theme
   (D22): no toggle, no second theme. The map panels keep their own Slate base (assets/map/slate.json). */
html,body{background:var(--paper);color:var(--ink)}
input,select,textarea{background:var(--surface2);color:var(--ink);border-color:var(--rule2)}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans)}
body{min-height:100vh;display:flex;flex-direction:column}
main{flex:1 0 auto;min-width:0}
a{color:var(--accent)}
/* P4.7: every control shows where the keyboard is; the skip link appears when it is reached. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.skip,.skip-map{position:absolute;left:-9999px;top:8px;z-index:20;background:var(--surface);color:var(--accent);padding:8px 12px;border:1px solid var(--accent);font-weight:600}
.skip:focus,.skip-map:focus{left:16px}
main:focus{outline:0}
button,input,select{font:inherit;color:inherit}

/* The header is Global's (em-tokens-v2.css). US adds: it stays at the top while a page scrolls on a wide screen, and its
   search box is a real form with an input ("/" focuses it, shell.js). */
header.hd{position:sticky;top:0;z-index:5}
/* D74: US's search is its own form just before .hr, which holds only the account link (the same on every host); the
   search takes the free space's push to the right, so the two sit together at the header's right end. */
.hd > form.srch{display:flex;margin-left:auto}
.hd > form.srch + .hr{margin-left:14px}
.hd .srch input{flex:1;min-width:0;border:0;background:none;padding:0;font-size:13px;color:var(--ink)}
.hd .srch input::placeholder{color:var(--ink3);opacity:1}.hd .srch input:focus{outline:0}.hd .srch:focus-within{border-color:var(--ink2)}
.grow{flex-grow:1}
/* On a narrower screen Global's header wraps (the tabs take their own line) and hides its search; US keeps the search,
   on a line of its own under the tabs: it is how a reader finds a county or a ZIP code (the rail is gone, U1). */
@media (max-width:1100px){
  .hd .hr{display:contents}
  .hd .si{order:1;margin-left:auto;height:40px;display:flex;align-items:center}
  .hd > form.srch{display:flex;order:4;flex:0 0 100%;width:auto;height:40px;margin:4px 0 10px}
}
/* The GPU map's status indices as classes: each sets the colour a status mark (.st) and an edge bar draw with. */
.st-0{--c:var(--s0)}.st-1{--c:var(--s1)}.st-2{--c:var(--s2)}.st-3{--c:var(--s3)}.st-4{--c:transparent}
.st-4 .st::before{background:repeating-linear-gradient(135deg,var(--hatch) 0 1.5px,transparent 1.5px 3.5px);box-shadow:0 0 0 1px var(--hatch) inset}

/* Components (mockup). */
.label{font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--ink3)}
.muted{color:var(--ink2)}
.mono{font-family:var(--mono)}
.serif{font-family:var(--serif)}
.badge{font-size:12px;font-weight:700;padding:0 0 0 7px;border-left:4px solid var(--ink2);white-space:nowrap;color:var(--ink);line-height:1.5}
.b-warn{border-left-color:var(--s3)}
.b-unusual{border-left-color:var(--s2)}
.b-active{border-left-color:var(--s1)}
.b-conf{border-left-color:var(--ink2)}
.b-rep{border-left-style:dashed;color:var(--ink2)}
.b-blind{border-left:0;padding-left:11px;background:repeating-linear-gradient(135deg,var(--hatch) 0 2px,var(--s4) 2px 4px) left top/4px 100% no-repeat}
.card{background:var(--surface);border:1px solid var(--line)}
.legend .sw{width:18px;height:12px;display:inline-block;flex-shrink:0}
.dot{width:10px;height:10px;border-radius:5px;display:inline-block;flex-shrink:0}
.legend{display:flex;flex-direction:column;gap:8px;font-size:13px}
.legend div{display:flex;align-items:center;gap:10px}
.btn{height:40px;padding:0 16px;border:1px solid var(--line);background:var(--surface);font-weight:600;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* The beta door: a page in the shell, one field, no account wording (PM, 2026-10-01). */
.door{max-width:420px;margin:72px auto;padding:28px 30px;display:flex;flex-direction:column;gap:12px}
.door .btn{justify-content:center}
.door h1{margin:0;font-family:var(--serif);font-size:32px;font-weight:600;letter-spacing:-.3px}
.door label{font-size:14px;font-weight:600}
.door input{height:44px;border:1px solid var(--line);padding:0 12px;background:var(--bg)}
.door .err{color:var(--s3);font-size:14px;font-weight:600}
.door .note{font-size:13px;color:var(--ink2)}

/* Plain reading page (not found, not configured). */
.page{max-width:880px;margin:0 auto;padding:40px 32px 64px}
.page h1{font-family:var(--serif);font-size:38px;font-weight:600;margin:0 0 10px;letter-spacing:-.4px}

/* Dashboard (mockup #scr-dashboard). */
.dash{display:grid;grid-template-columns:minmax(0,1fr) 400px;height:calc(100vh - 56px - 45px);min-height:640px}
.rail{background:var(--surface);border-right:1px solid var(--line);padding:22px 16px;display:flex;flex-direction:column;gap:14px;overflow:auto}
.regions{display:flex;flex-direction:column;gap:4px}
.rbtn{display:flex;flex-direction:column;gap:4px;text-align:left;width:100%;padding:10px 12px;border:1px solid transparent;background:transparent;cursor:pointer}
.rbtn:hover{background:var(--chip)}
.rbtn.on{background:var(--sel);box-shadow:inset 3px 0 0 var(--ink)}
.rbtn .row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.rbtn .name{font-size:15px;font-weight:600}
.rbtn .stats{display:flex;gap:10px;font-size:12px;color:var(--ink2);flex-wrap:wrap}
.filters{display:flex;gap:0 2px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.filters button{padding:6px 8px;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;background:transparent;font-size:12px;font-weight:600;cursor:pointer;color:var(--ink2);display:inline-flex;align-items:center;gap:5px}
.filters button:hover{color:var(--ink)}
.filters button.on{color:var(--ink);border-bottom-color:var(--ink)}
/* The map column: the live bar and the breaking strip above, in the page's flow, then the map's stage (the canvas and
   what is laid over it: title, tools, popup, notes). Nothing is laid over the strip, and the strip never over the map
   (Van, 2026-10-09: floating over the map it was lost, its controls hard to see and to hit). */
.mapwrap{position:relative;min-width:0;display:flex;flex-direction:column}
.mapstage{position:relative;flex:1 1 auto;min-height:0}
#map-dashboard{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}
/* The map's heading, its reset button, the hint and our own notes sit ABOVE the map's stage in the page's flow (Van,
   2026-10-09: floating over the canvas they covered counties when zoomed). Over the counties: only the popup. */
/* Design V2 (U1): ONE slim row above the map holds the heading and the two dropdowns; the legend is a slim row below it
   (PM, 2026-10-12: Van's rule over the mockup, nothing that stays put floats on the map). */
.maptop{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:16px 28px 10px;background:var(--surface)}
.maphead{min-width:0}
.maphead h1{margin:2px 0 0;font-size:34px}
.maptools{display:flex;gap:8px;align-items:center;flex:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sel{position:relative;display:inline-flex;align-items:center;height:40px;border:1px solid var(--rule2);border-radius:var(--radius);background:var(--surface);font-size:13.5px;font-weight:600}
.sel::after{content:"";position:absolute;right:13px;top:50%;width:7px;height:7px;margin-top:-6px;border-right:1.5px solid var(--ink2);border-bottom:1.5px solid var(--ink2);transform:rotate(45deg);pointer-events:none}
.sel{padding:0 34px 0 12px}.sel-v{white-space:nowrap}
.sel select{position:absolute;inset:0;width:100%;height:100%;margin:0;border:0;opacity:0;cursor:pointer;font-size:16px;-webkit-appearance:none;appearance:none}
.sel:hover{border-color:var(--ink2)}.sel:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.maptools .domsel-k{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.maptools .domsel-box{border-color:var(--rule2);border-radius:var(--radius)}
.maptools .domsel-v::before{content:"Show: "}
.lbtn{border:0;background:none;padding:0 4px;font-size:13px;font-weight:600;color:var(--accent);cursor:pointer}.lbtn:hover{text-decoration:underline}
.maplegend{padding:10px 28px 12px;border-top:1px solid var(--rule);background:var(--surface)}
.maplegend .legend{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 18px;font-size:12.5px}
.maplegend .st{font-weight:500;font-size:12.5px}.maplegend .st .muted,.maplegend .lg-a .muted{font-weight:400;font-size:12px}
.lg-a{display:inline-flex;align-items:center;gap:6px}
.ramp{display:inline-flex;gap:2px}.ramp i{width:12px;height:8px}
.hovercard{position:absolute;right:24px;bottom:24px;width:360px;max-width:calc(100% - 48px);padding:16px 18px;background:var(--surface);border:1px solid var(--line);display:none;flex-direction:column;gap:8px}
.hovercard.show{display:flex}
.hc-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;gap:8px}
.hc-title{font-size:22px;font-weight:600;line-height:1.2}
.hc-what{font-size:14px;line-height:1.45}
.hc-link{font-size:14px;font-weight:600}
.doms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.doms span{font-size:12px;padding:5px 0;border-top:1px solid var(--line);display:flex;align-items:center;gap:6px}
.dot-blind{background:repeating-linear-gradient(135deg,var(--hatch) 0 2px,var(--s4) 2px 4px);border:1px solid var(--line)}
.hint{padding:0 24px 8px;font-size:13px;color:var(--ink2);background:var(--surface)}
.mapnote{margin:0 24px 8px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);font-size:14px}
.feed{background:var(--surface);border-left:1px solid var(--rule);display:flex;flex-direction:column;min-height:0}
.ftop{padding:22px 20px 18px;border-bottom:1px solid var(--rule)}
.feed .figs a.fig{color:inherit;text-decoration:none}.feed .figs a.fig:hover b{text-decoration:underline}
/* Van's A: the chips are flat words, the chosen one underlined in ink (2 px), over a hairline. */
.chips{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:16px;border-bottom:1px solid var(--rule)}
.chip{height:30px;padding:0 2px;border:0;background:none;font-size:12.5px;font-weight:600;color:var(--ink2);cursor:pointer;display:inline-flex;align-items:center}
.chip:hover{color:var(--ink)}.chip.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
.feedhead{padding:18px 20px 10px;display:flex;justify-content:space-between;align-items:baseline;font-size:12px}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kpis button{background:var(--surface);padding:10px 12px;border:0;text-align:left;cursor:pointer}
.kpis button:hover{background:var(--chip)}
.kpis button.on{background:var(--sel);box-shadow:inset 0 -3px 0 var(--ink)}
.kpis b{display:block;font-size:20px;font-family:var(--sans);font-variant-numeric:tabular-nums;font-weight:500}
.kpis span{font-size:11px;color:var(--ink2)}
.feed-filters{padding:12px 18px}
.list{overflow:auto;flex-grow:1;min-height:200px;padding:0 20px}
/* Design V2's row: the headline in the serif with its age at the right; the status and place under it. */
.item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:14px 0;border-top:1px solid var(--rule);text-decoration:none;color:inherit}
.item:first-child{border-top:0}
.item:hover{background:linear-gradient(90deg,transparent,var(--hover) 8%,var(--hover) 92%,transparent)}
.item .hl{font-family:var(--serif);font-size:17.5px;line-height:1.3;color:var(--ink)}
.item .mt{grid-column:1/-1;display:flex;gap:12px;align-items:center;font-size:12.5px;color:var(--ink2);flex-wrap:wrap}
.item .bd{grid-column:1/-1;font-size:12.5px;color:var(--ink3)}
.item .go{grid-column:1/-1;font-size:12.5px;font-weight:600;color:var(--accent)}
.item:hover .go,.item:focus-visible .go{text-decoration:underline}
.item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.item.opening{background:var(--sel)}.item.opening .go{text-decoration:none;color:var(--ink2)}
.empty{padding:24px 20px;font-size:14px;color:var(--ink2)}
/* The legend sits under the list in the right-hand column (Van, 2026-10-03), where "What We Can't See" was. */
.feed .legend{margin:12px 16px 16px;padding:12px 14px;background:var(--chip)}
.feed .legend div{flex-wrap:wrap;row-gap:0}.feed .legend div .muted{flex-basis:100%;padding-left:26px;font-size:12px}
body.no-gpu .dash{height:auto;min-height:0}
/* U9: on a phone the dashboard is phone.ts's block (at the end of this sheet); the strip, map and feed are not shown. */
@media (max-width:599px){body.is-dashboard .skip-map,body.is-dashboard .strip,body.is-dashboard .dash{display:none}}
body.no-gpu .mapwrap{min-height:180px}

/* County pages (mockup #scr-county). */
.wrap{max-width:1280px;margin:0 auto;padding:28px 32px 64px}
.crumb{font-size:13px;color:var(--ink2);display:flex;gap:8px;flex-wrap:wrap}
.crumb a{color:var(--ink2);text-decoration:none}
.county .title{display:flex;align-items:flex-end;gap:16px;margin:10px 0 22px;flex-wrap:wrap}
.county .title h1{margin:0;font-family:var(--serif);font-size:44px;font-weight:600;letter-spacing:-.5px;line-height:1.05}
.county .title .badge{margin-bottom:8px}
.dbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-8px 0 18px;padding:10px 14px;border:1px solid var(--line);background:var(--surface);font-size:14px}
.dbar .pl{font-family:var(--mono);font-size:12px;color:var(--accent);overflow-wrap:anywhere}
.vers{display:inline-flex;border:1px solid var(--line);overflow:hidden;flex-wrap:wrap}
.vers a{padding:6px 10px;font-size:13px;text-decoration:none;color:var(--ink);border-right:1px solid var(--line)}
.vers a:last-child{border-right:0}
.vers a.on{background:var(--accent);color:var(--accent-ink);font-weight:600}
.late{padding:10px 14px;background:var(--chip);font-size:14px}
.county .cols{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:28px}
.county .brief{padding:24px 28px}
.facts{margin:10px 0;padding-left:18px;font-family:var(--serif);font-size:19px;line-height:1.6}
.fine{font-size:12.5px}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:24px 0}
.tile{padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.tile .top2{display:flex;justify-content:space-between;align-items:center;gap:6px;flex-wrap:wrap}
.tile b{font-size:15px}
.tile p{margin:0;font-size:13px;color:var(--ink2)}
.box{padding:18px 20px;margin-bottom:18px}
.box h2{margin:0 0 12px;font-size:18px}
.box h3{margin:0 0 10px;font-size:16px}
.box ul{margin:0;padding-left:18px;font-size:14px;display:flex;flex-direction:column;gap:6px}
.warn{border-left:3px solid var(--s3);background:var(--chip);padding:10px 14px;margin-bottom:10px;font-size:14px}
.warn .w-event{font-weight:700;margin-bottom:4px}
.warn .q{margin:0 0 6px;font-size:14px}
.warn .q-body{white-space:pre-line;color:var(--ink)}
.warn .src{font-size:12px;color:var(--ink2);margin-top:4px}
.held{border:1px dashed var(--ink2);padding:12px 14px;font-size:14px;margin-top:10px}
.items{list-style:none;padding-left:0!important}
.items li{padding:6px 0;border-top:1px solid var(--line)}
.items li:first-child{border-top:0}
.side{display:flex;flex-direction:column}
.meet{display:flex;flex-direction:column;gap:12px;font-size:14px}
.meet > div{display:flex;gap:14px}
.meet .when{width:150px;flex-shrink:0;font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--ink2)}
/* D38 (US-WEB-COUNTY): each topic and the records its status rests on. Text, links and <details>; no hover buttons (PM-6). */
.county .rests{font-family:var(--serif);font-size:26px;font-weight:600;margin:30px 0 4px}
.county .topic .top2{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.county .topic h2{display:inline-flex;align-items:center;gap:8px}
.county .tile .top2 a{display:inline-flex;align-items:center;gap:7px}
.county .topic h2{margin:0;font-size:19px}
.county .topic h3{font-size:14px;margin:16px 0 6px}
.county .topic h4{font-size:12.5px;margin:12px 0 2px;color:var(--ink2);font-weight:600}
.county .topic .tline{margin:6px 0 10px;font-family:var(--serif);font-size:17px;line-height:1.45}
.county .topic .items{font-size:14px;margin:6px 0}
.county .topic .ev{font-size:12.5px;margin-left:6px}
.county .topic .meas b{font-weight:600}
.county details.more{margin-top:6px;font-size:14px}
.county details.more > summary{cursor:pointer;color:var(--accent);font-weight:600;font-size:13.5px;padding:4px 0}
.county details.srcs{border-top:1px solid var(--line);margin-top:12px;padding-top:6px}
.county .tile .top2 a{color:inherit;text-decoration:none}
.county .tile .top2 a:focus-visible b,.county .tile .top2 a:active b{text-decoration:underline}
.county .topic + .topic{margin-top:14px}
/* /counties (US-WEB-COUNTY): every county as a list. */
.counties .ccount{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:12px 0}
.counties .cfilter{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0}
.counties .cfilter select,.counties .cfilter button{font:inherit;padding:6px 10px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.counties .csort{margin:6px 0 12px}
.counties .ctab th[scope=row]{font-weight:500}
.counties .ctab td.n,.counties .ctab th.n{text-align:right;font-family:var(--sans);font-variant-numeric:tabular-nums}
.county .watch{display:inline-flex;flex-wrap:wrap;gap:6px;margin-left:6px;align-items:baseline}
.county .warnfirst{border-left:4px solid var(--s3)}
/* P3.5 written pieces (writing.ts, shown only when WRITING_SHOWN is on): the text as prose, its note and sources plain. */
.written > p:not(.written-note){font-family:var(--serif);font-size:18px;line-height:1.55;margin:8px 0}
.written .written-note{margin-top:12px}
.written .written-sources{font-size:14px}
.written .bversion{border-top:1px solid var(--line);margin-top:10px;padding-top:6px}
.county .past .pbrief{margin:-4px 0 6px;font-size:12.5px}
.county .warnfirst h2{margin-top:0}
.county .gauge-note{margin:10px 0 4px;padding:8px 12px;border-left:3px solid var(--line);background:var(--chip);font-size:13.5px;line-height:1.5}
.county .events .evline{margin:0;font-size:14.5px;line-height:1.5}
.county .events .evline b{font-size:15px}
.county .topic.one{padding:12px 18px}
.county .topic.one .oneline{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.county .topic.one h2{font-size:16px}
.county .topic.one .tline{margin:0;font-size:15px;flex:1 1 260px}
.county .topic.one details.srcs{margin-top:8px;padding-top:4px}
.mapcard{overflow:hidden;margin-bottom:18px}
.mapbox{position:relative}
#map-county{width:100%;height:340px;display:block;cursor:pointer}
.mapcard .cap{padding:10px 14px;font-size:12px}
.mapcard.no-gpu .mapbox{display:none}
.past a,.cal a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:13px}
.past a:first-child{border-top:0}
.more{margin-top:10px;font-size:13px;font-weight:600}
.cal{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0 24px}
.legend-row{flex-direction:row;flex-wrap:wrap;margin-top:24px}

/* Event pages (mockup #scr-event). */
.event .eh{margin:10px 0 6px}
.event .eh h1{margin:0;font-family:var(--serif);font-size:40px;font-weight:600;letter-spacing:-.5px;line-height:1.1}
.event .meta{display:flex;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--ink2);margin:10px 0 18px;align-items:center}
.event .reported{margin:-6px 0 16px;font-family:var(--serif);font-size:18px}
.perma{font-family:var(--mono);font-size:12px;padding:3px 8px;background:var(--chip);color:var(--ink);overflow-wrap:anywhere}
.event .cols{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:28px}
.sec{padding:22px 26px;margin-bottom:18px}
.sec h2{margin:0 0 12px;font-size:18px}
.held.withdrawn{border-color:var(--s3);margin-bottom:18px}
.event > .held{margin-bottom:18px}
.conf-row{padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.conf-row:first-child{border-top:0}
.sources{margin:0;padding-left:20px;font-size:14px;display:flex;flex-direction:column;gap:6px}
.upd{display:flex;gap:14px;padding:10px 0;border-top:1px solid var(--line)}
.upd:first-child{border-top:0}
.upd .t{width:150px;flex-shrink:0;font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--ink2)}
.upd .b{display:flex;flex-direction:column;gap:2px;font-size:14px}

/* The Ledger (mockup #scr-ledger). Its weave colours are the mockup's light values, scoped here. */
.ledger{--l-a1:#1F3F66;--l-a2:#2F6CB0;--l-a3:#6FA8E8;--l-e:var(--s4);--l-u:#C0473A;max-width:1440px}
.ledger .hd{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.ledger .hd h1{font-family:var(--serif);font-size:38px;font-weight:600;margin:6px 0 0;letter-spacing:-.4px}
.ledger .sub{color:var(--ink2);margin:4px 0 14px;font-size:14px;max-width:900px}
.ledger .ctl{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.ledger .ctl select{height:36px;border:1px solid var(--line);background:var(--surface);padding:0 8px;font-size:14px}
.views{display:inline-flex;border:1px solid var(--line);overflow:hidden}
.views button{border:0;background:transparent;padding:8px 14px;font-size:14px;font-weight:600;cursor:pointer;border-right:1px solid var(--line)}
.views button:last-child{border-right:0}
.views button.on{background:var(--ink);color:var(--surface)}
.ledger .ask input{height:36px;border:1px solid var(--line);padding:0 12px;background:var(--surface);width:240px}
.said{font-size:13px;padding:8px 12px;background:var(--chip);margin-bottom:10px}
.states{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--ink2);margin:8px 0 12px;align-items:center}
.states span{display:flex;align-items:center;gap:6px}
.states u{width:14px;height:10px;display:inline-block;text-decoration:none}
.stage{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;align-items:start}
.canvasbox{position:relative;background:var(--surface);border:1px solid var(--line);padding:10px 10px 10px 0;overflow:hidden}
#weave,#clock,#strata{display:block;width:100%}
.canvasbox canvas[hidden],.drift[hidden]{display:none!important}
.drift{padding:20px 24px;font-size:14px;color:var(--ink2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--surface);font-size:12px;padding:6px 8px;display:none;white-space:nowrap}
.panel{padding:16px 18px}
.panel h3{margin:0 0 4px;font-size:16px}
.panel .label{margin:12px 0 4px}
.poll{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:8px;font-size:13px;padding:5px 0;border-top:1px solid var(--line);align-items:center}
.cap{font-size:13px;padding:7px 0;border-top:1px solid var(--line)}
.cap .k{font-family:var(--mono);font-size:11px;color:var(--ink2)}
.minute{margin-top:18px;padding:18px 20px}
.mhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mhead h3{margin:0;font-size:18px}
.mcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:12px}
.mcols h4{margin:0 0 8px;font-size:13px;color:var(--ink2)}
.mi{font-size:13.5px;padding:8px 10px;border:1px solid var(--line);margin-bottom:8px;background:var(--surface)}
.later{display:none;margin-top:6px;font-size:12px;padding:4px 8px;background:#3A2C10;color:#F2C46D}
.hind .later{display:block}
.mode{font-size:11px;font-weight:700;letter-spacing:.6px;padding:4px 8px;background:var(--chip)}
.scrub{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.note{font-size:12.5px;color:var(--ink2)}
.ask-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:18px 0}
.ask-form input{height:40px;border:1px solid var(--line);padding:0 12px;background:var(--surface);min-width:260px}

/* ZIP lookup (P5.1, no accounts). */
.zipform,.findform{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}
.zipline{display:flex;gap:8px}
.zipform input,.findform input{height:40px;border:1px solid var(--line);padding:0 10px;background:var(--bg);width:100%;min-width:0;font-weight:400}
.zip .zipform,.find .findform{margin-top:20px;max-width:360px}

/* Region and state pages (P4.4). */
.area h1{font-family:var(--serif);font-size:40px;font-weight:600;margin:10px 0 16px;letter-spacing:-.4px}
.area .cols{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:28px}
.area-counts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.ac{padding:14px 16px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.ac b{font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:26px;font-weight:500}
/* C6 (US-WEB-COUNTY): every count is a link to the counties it counts. */
a.ac{color:inherit;text-decoration:none}
.area .citynote{margin:-4px 0 14px;max-width:70ch}
.area .cities{margin:-4px 0 14px}
a.ac b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.dtab td.n a{color:inherit}
.area .list{margin:16px 0}
.area .tline{margin:4px 0 12px;font-family:var(--serif);font-size:17px}
.area details.more{margin-top:6px;font-size:14px}
.area details.more > summary{cursor:pointer;color:var(--accent);font-weight:600;font-size:13.5px;padding:4px 0}
.dtab{width:100%;border-collapse:collapse;font-size:13px}
.dtab th,.dtab td{padding:7px 6px;border-top:1px solid var(--line);text-align:left}
.dtab thead th{font-size:11px;color:var(--ink2)}
.dtab td.n{font-family:var(--sans);font-variant-numeric:tabular-nums;text-align:right}
.cols3{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0 20px}
#map-area{width:100%;height:360px;display:block;cursor:pointer}

@media (max-width:1180px){
  .dash{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(560px,calc(100vh - 56px - 45px)) auto;height:auto}
  .feed{grid-column:auto;border-left:0;border-top:1px solid var(--rule)}
}
@media (max-width:1100px){
  .county .cols,.event .cols,.area .cols,.stage{grid-template-columns:minmax(0,1fr)}
  .area-counts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dtab{display:block;overflow-x:auto}
  .mcols{grid-template-columns:minmax(0,1fr)}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .wrap{padding:20px 16px 48px}
  .county .title h1{font-size:32px}
  .event .eh h1{font-size:28px}
  .upd{flex-direction:column;gap:2px}
  .sec{padding:18px 18px}
  /* The box takes the map's own shape (the US frame is 1022 x 602) plus room for its heading, instead of 70% of a tall
     screen: on a 375 px phone the old box left the map in its top half with dead space below (live screenshots, 2026-10-01). */
  .dash{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;min-height:0}
  /* Heading above the map and the button below it, so nothing covers the counties; only the canvas takes the frame's
     shape (no min-height: with aspect-ratio it widened the box past a 375 px screen). */
  .mapwrap{display:flex;flex-direction:column;gap:8px;padding:0 0 12px}
  .mapstage,.maptop{display:contents}
  .mapwrap .maphead,.mapwrap .maptools{position:static;padding:0 16px}
  .mapwrap .maphead{order:-1}
  #map-dashboard{position:relative;inset:auto;height:auto;aspect-ratio:1022/640}
  .mapwrap .mapnote{position:static;margin:0 16px}
  .rail{border-right:0;border-bottom:1px solid var(--line);padding:14px 16px}
  .regions{flex-direction:row;overflow-x:auto}
  .rbtn{width:auto;min-width:160px;flex-shrink:0}
  .dom-filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
  .dom-filters button{flex-shrink:0}
  .filters button,.views button,.kpis button{min-height:40px}
  .rail{gap:10px}
  .rail .legend,.rail > .grow{display:none}
  .feed{grid-column:auto}
  .maphead{left:16px;top:12px}
  .maphead h1{font-size:22px}
  .maptools{right:12px;top:auto;bottom:12px}
  .hovercard{left:12px;bottom:12px;max-width:calc(100% - 24px)}
  .hint{display:none}
}
@media (max-width:860px){
  .srch{height:44px}
  .page{padding:28px 16px 48px}
  .door{margin:40px 16px;padding:24px 20px}
}
/* P6.3 Command View. U23b (D69, the PM 2026-10-22: "the apex is the standard" for everything): no palette of its own; it
   reads the shared set like every page (its red text on the surface 4.92:1, every ink >= 4.5:1). The map reads the tokens
   from <html>; its county, state and region lines stay the renderer's own (the line tokens are set for the other pages). */
.cmd{display:grid;grid-template-columns:340px minmax(0,1fr) 360px;grid-template-rows:clamp(520px,calc(100vh - 350px),900px) auto}
.cmd .col{background:var(--surface);overflow:auto;padding:18px}
.cmd .left{border-right:1px solid var(--line)}
.cmd .right{border-left:1px solid var(--line)}
.cmd .sec{margin-bottom:22px}
.cmd .label{margin-bottom:6px}
.cmd .w{color:inherit;text-decoration:none;padding:12px 6px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:5px;font-size:13px}
.cmd .w:first-of-type{border-top:0}
.cmd .w:hover,.cmd .w:focus-visible{background:var(--chip)}
.cmd .w .badge{align-self:flex-start}
.cmd .w q{font-size:14px;font-weight:600;quotes:'\201C' '\201D'}
.cmd .w .pl{font-family:var(--mono);font-size:11px;color:var(--accent)}
.cmd .mapc{position:relative;background:var(--bg)}
.cmd #map-command{position:absolute;inset:0;width:100%;height:100%;display:block}
.cmdbar{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 24px;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid var(--line);background:var(--surface)}
.cmdbar h1{margin:0 0 2px;font-size:22px;font-weight:700}
.cmdbar .cmd-counts{margin-top:8px}
.cmd table{width:100%;border-collapse:collapse;font-size:13px}
.cmd td,.cmd th{text-align:left;padding:7px 4px;border-top:1px solid var(--line);vertical-align:top}
.cmd th{font-size:11px;color:var(--ink2);font-weight:700}
.cmd .n{font-family:var(--sans);font-variant-numeric:tabular-nums;text-align:right}
.cmd .hot{color:var(--s3)}
.cmd .bar{height:6px;background:var(--line);position:relative;min-width:60px;margin-top:6px}
.cmd .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--s3)}
.cmd .blind{margin:0;padding-left:18px;font-size:13px;display:flex;flex-direction:column;gap:6px}
.cmd .blind details{display:inline}
.cmd .blind summary{display:inline;cursor:pointer;color:var(--accent);margin-left:6px}
.cmd .bottom{grid-column:1 / 4;border-top:1px solid var(--line);background:var(--surface);padding:14px 20px}
.cmd .tlhead{display:flex;justify-content:space-between;gap:12px}
.cmd .ticks{display:flex;justify-content:space-between;font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:11px;color:var(--ink2);margin-top:8px}
/* The PM, 2026-10-22: no label overlaps another (command.ts timelineLayout: up to three rows, then "+N more"); each dot
   sits at its story's own time, a label never drags it; a title is at most two lines, so every row is the same height. */
.cmd .tlw{position:relative;margin-top:8px;border-top:1px solid var(--line)}
.cmd .tl-dots{position:relative;height:0}
.cmd .tl-dots i{position:absolute;top:-5px;width:9px;height:9px;margin-left:-4px;border-radius:5px;background:var(--ink2)}
.cmd .tl{list-style:none;margin:0;padding:0;position:relative;min-height:calc(var(--rows,1) * 88px + 36px)}
.cmd .tl>li{position:absolute;left:var(--x);top:calc(12px + var(--row,0) * 88px);width:170px;display:flex;flex-direction:column;gap:3px;font-size:12px}
.cmd .tl b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cmd .tl .more summary{cursor:pointer;color:var(--accent);font-size:12px}
.cmd .tl .more ul{list-style:none;margin:4px 0 0;padding:6px 8px;width:260px;background:var(--surface2);border:1px solid var(--rule2);position:relative;z-index:2;max-height:220px;overflow:auto}
.cmd .tl .more li{display:flex;flex-direction:column;gap:1px;padding:4px 0}
.cmd .tl a{color:inherit;text-decoration:none}
.cmd .tl a:hover b{text-decoration:underline}
.cmd-scope{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;font-size:13px}
.cmd-scope select,.cmd-scope input{background:var(--surface);color:var(--ink);border:1px solid var(--line);height:34px;padding:0 8px;font:inherit}
.cmd-counts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:12px}
.cmd-empty{max-width:900px;margin:0 auto;padding:40px 20px;display:flex;flex-direction:column;gap:16px}
.cmd-empty h1{margin:0}
.cmd .no-gpu #map-command{display:none}
@media (max-width:1100px){
  .cmd{grid-template-columns:1fr;grid-template-rows:auto}
  .cmd .mapc{order:-1;min-height:0;aspect-ratio:1.6}
  .cmd .left,.cmd .right{border:0;border-top:1px solid var(--line)}
  .cmd .bottom{grid-column:auto}
  .cmd .tlw{border-top:0}
  .cmd .tl-dots{display:none}
  .cmd .tl{min-height:0}
  .cmd .tl>li{position:static;width:auto;padding:8px 0;border-top:1px solid var(--line)}
  .cmd .ticks{display:none}
}
.sample-banner{position:sticky;top:0;z-index:30;background:#5A3D00;color:#FFF;text-align:center;font:700 13px/1.2 var(--mono);letter-spacing:.8px;padding:7px 12px}
/* The ?live=1 PROTOTYPE (PM and Van, 2026-10-02): a live bar, a breaking strip over the map, a figures row, Active shaded
   by 24 hours of reports (D37: indigo, deeper = more), new arrivals sliding in. Motion grammar shared with Global's
   Monitor: a pulse is a live warning, a ring is something new, every age ticks. Off unless the page asks (?live=1). */
/* D37 indigo is site-wide (base :root); the live surface needs no colour of its own. */
.is-live .kpis{display:none}
.livebar{display:flex;align-items:center;gap:14px;padding:7px 24px;background:var(--surface);border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink2)}
.livebar b{color:var(--ink);font-size:11.5px}
.livebar .ldot{width:9px;height:9px;border-radius:5px;background:#1E8E3E;box-shadow:0 0 0 0 rgba(30,142,62,.55);animation:ldot 2s infinite}
@keyframes ldot{0%{box-shadow:0 0 0 0 rgba(30,142,62,.55)}70%{box-shadow:0 0 0 8px rgba(30,142,62,0)}100%{box-shadow:0 0 0 0 rgba(30,142,62,0)}}
.is-live .mapnote{border-left:4px solid var(--s2)}
/* The breaking strip: an opaque white panel above the map with a hairline under it; D45 (square, no pills). */
.breaking{list-style:none;margin:0;padding:8px 24px 10px;display:flex;flex-direction:column;gap:6px;background:var(--surface);border-bottom:1px solid var(--line)}
.breaking li{display:flex;gap:8px;align-items:center;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--s3);padding:6px 10px;font-size:13px;min-width:0}
.breaking li.ev{border-left-color:var(--ink2)}
.breaking li.old{border-left-color:var(--line);color:var(--ink2)}
.breaking li.more{border:0;padding:0 2px;font-size:12px;color:var(--ink2)}
.breaking a{color:inherit;text-decoration:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:8px;row-gap:2px;align-items:baseline;min-width:0;flex:1}
.breaking .p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink2)}
.breaking .k{font-weight:700;white-space:nowrap}
.breaking .q{grid-column:1 / 4;color:var(--ink);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.breaking .age{font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:12px;color:var(--ink2);white-space:nowrap}
.figures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.figures div{background:var(--surface);padding:10px 12px}
.figures b{display:block;font-size:20px;font-family:var(--sans);font-variant-numeric:tabular-nums;font-weight:500}
.figures a{color:inherit;text-decoration:none;display:block}.figures a:hover b,.figures a:focus-visible b{text-decoration:underline}
.figures span{font-size:11px;color:var(--ink2)}
.item .age{font-family:var(--sans);font-variant-numeric:tabular-nums}
.item.fresh{animation:slidein .45s ease-out;background:color-mix(in srgb,var(--s3) 9%,var(--surface))}
@keyframes slidein{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.sw3{display:inline-flex;margin-right:8px;vertical-align:-2px}.sw3 i{width:8px;height:12px;display:inline-block}
.dom-filters button .n{font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:11px;color:var(--ink2);margin-left:4px}
@media (prefers-reduced-motion:reduce){.livebar .ldot,.item.fresh{animation:none}}
@media (max-width:860px){.breaking{padding:8px 16px 10px}.livebar{padding:7px 16px;flex-wrap:wrap}}
/* Van, 2026-10-03: the breaking strip can be dismissed card by card and collapsed. */
.breaking li.bar{background:none;border:0;padding:0;gap:8px;font-size:12px}
.breaking li.bar .label{margin-right:auto}
/* The strip's controls are buttons that look like buttons: a square, a hairline, the ink, 32 px (44 on a phone). */
.breaking li.bar button{border:1px solid var(--line);background:var(--surface);min-height:32px;padding:0 12px;font-size:12px;font-weight:600;cursor:pointer;color:var(--ink)}
.breaking li.bar button:hover{border-color:var(--ink)}
.breaking li .x{order:2;flex:none;width:32px;height:32px;border:1px solid var(--line);background:var(--surface);font-size:18px;line-height:1;color:var(--ink);cursor:pointer}
.breaking li .x:hover,.breaking li .x:focus-visible{background:var(--chip);color:var(--ink)}
.breaking li.bar button:focus-visible,.breaking li .x:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* Design V2 (U1): the live bar and the breaking strip are ONE slim row under the header, across the page, in the flow
   (D47 behaviour kept: one card per warning, Dismiss all, cards leave at 30 minutes). On a phone it stacks. */
.strip{display:flex;align-items:center;gap:18px;min-height:45px;padding:0 32px;border-bottom:1px solid var(--rule);background:var(--surface);font-size:13px;white-space:nowrap;overflow:hidden}
.strip .livebar{padding:0;border:0;flex:none;gap:8px}
.strip .livebar b{font-weight:600;font-size:12.5px}
.strip .livebar #lbNewest,.strip .livebar #lbChecked{display:none}
.strip .livebar .ldot{width:7px;height:7px;border-radius:0}
.strip .breaking{flex-direction:row;align-items:center;gap:0;padding:0;border:0;flex:1;min-width:0;overflow:hidden}
.strip .breaking li{border:0;border-left:1px solid var(--rule2);padding:0 6px 0 14px;margin-left:14px;gap:8px;flex:none;min-width:0;font-size:13px}
.strip .breaking li:first-child{border-left:0;margin-left:0;padding-left:0}
.strip .breaking li.bar{order:9;margin-left:auto;border-left:0;padding-left:14px}
.strip .breaking li.bar .label{display:none}
.strip .breaking li.bar button{min-height:28px;padding:0 10px}
.strip .breaking a{display:flex;align-items:center;gap:8px;min-width:0}
.strip .breaking .k{font-weight:600}.strip .breaking .p{color:var(--ink2)}.strip .breaking .age{color:var(--ink3)}
.strip .breaking .q{display:none}
.strip .breaking li .x{width:24px;height:24px;font-size:15px;border-color:var(--rule2)}
.strip .breaking li.old,.strip .breaking li.more{color:var(--ink2);border-left:1px solid var(--rule2)}
.st.r{--c:var(--ink3);color:var(--ink2)}
/* The strip and the dashboard's rows on a phone: after the rules above, so they win. */
@media (max-width:860px){
  .strip{flex-direction:column;align-items:stretch;gap:6px;padding:8px 16px 10px;white-space:normal}
  .strip .livebar{flex-wrap:wrap}
  .strip .breaking{flex-direction:column;align-items:stretch;gap:6px}
  .strip .breaking li,.strip .breaking li.old,.strip .breaking li.more{border-left:0;margin-left:0;padding:0}
  .strip .breaking li.bar{order:-1;margin-left:0}
  .strip .breaking a{flex-wrap:wrap}
  .strip .breaking .q{display:block;flex-basis:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .maptop{flex-direction:column;align-items:stretch}
  .maptools{flex-wrap:wrap}
  .maplegend{padding:10px 16px}
  .ftop,.list{padding-left:16px;padding-right:16px}
  .strip .breaking li .x{width:44px;height:44px;margin:-9px 0}
  .strip .breaking li.bar button{min-height:44px}
  .chip{height:44px;padding:0 4px}
}
/* Item 4: a "Reported by {outlet} and N more" label may wrap in the list rather than push the time off the row. */
.item .badge{white-space:normal}
.hc-rec{font-size:13px;line-height:1.4;border-left:3px solid var(--line);padding-left:8px}
.hc-rec a{color:var(--ink);font-weight:600}
/* Topic glyphs (glyphs.ts) on the "Show On The Map" chips: the chips are the legend for the map's badges. */
.dom-filters button .glyph{vertical-align:-3px;margin-right:5px}
.glyph{display:inline-block;flex:none}

/* P4.7 phone first (US-WEB-COUNTY): county, event, area, city and /counties pages at phone width. Every tap target
   is at least 44 px tall; tables become labelled rows instead of scrolling sideways. Not the dashboard map (US web's). */
@media (max-width:860px){
  .county .crumb a,.event .crumb a,.area .crumb a,.counties .crumb a{display:inline-flex;align-items:center;min-height:44px}
  .county .dbar .btn{height:auto;min-height:44px}
  .county .tile .top2 a{min-height:44px}
  .county .items li > a,.event .sources li > a,.area .items li > a,.county .meet a,.area .src a,.county .src a,.area .cities a,.county .held a,.county .evline a,.county .past a,.counties .csort a,.county .ev{display:inline-flex;align-items:center;min-height:44px}
  .county details.more > summary,.area details.more > summary,.event details > summary{display:list-item;min-height:44px;padding:12px 0;box-sizing:border-box}
  .counties .cfilter select,.counties .cfilter button{min-height:44px}
  .counties .ccount a{display:inline-flex;align-items:center;min-height:44px}
  .county .tline a,.county .muted a{display:inline-flex;align-items:center;min-height:44px}
  .county div.more a,.county .cap a,.event .cap a{display:inline-flex;align-items:center;min-height:44px}
}
@media (max-width:600px){
  table.collapse{display:block}
  table.collapse thead{display:none}
  table.collapse tbody{display:block}
  table.collapse tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;padding:8px 0;border-top:1px solid var(--line)}
  table.collapse th[scope=row]{grid-column:1 / -1;border:0;padding:4px 0;font-size:15px}
  table.collapse td{display:flex;justify-content:space-between;align-items:center;gap:8px;border:0;padding:0;text-align:left;min-height:44px}
  table.collapse td::before{content:attr(data-label);font-family:var(--sans,inherit);font-size:12px;color:var(--ink2)}
  table.collapse td a,table.collapse th a{display:inline-flex;align-items:center;min-height:44px}
}
/* A framed map's markers (map-focus.ts): a 44 px target around a 12 px square with an edge colour by kind (D45: no pin,
   no rounding). Positioned by county-map.js every frame; what each marks is also said on the page. */
.map-markers{position:absolute;pointer-events:none;overflow:hidden}
.map-markers .mk{position:absolute;left:-22px;top:-22px;width:44px;height:44px;pointer-events:auto;display:block}
.map-markers .mk::after{content:'';position:absolute;left:16px;top:16px;width:12px;height:12px;box-sizing:border-box;border:3px solid var(--ink2);background:var(--surface)}
.map-markers .mk-warning::after{border-color:var(--s3)}
.map-markers .mk-unusual::after{border-color:var(--s2)}
.map-markers .mk-event::after{border-color:var(--ink)}
.map-markers .mk-reading::after{border-color:var(--s1-deep)}
.map-markers .mk-place::after{border-color:var(--ink);background:var(--ink)}
.map-markers a.mk:focus-visible{outline:2px solid var(--accent);outline-offset:-8px}
/* P4.7 phone first (375 px) on the dashboard, the map, Command View, the beta door and the shared header: every control
   a reader taps is at least 44 px (WCAG 2.5.5); the header scrolls away instead of holding a seventh of the screen; a
   finger on the map scrolls the page (no touch handler, no touch-action:none), and a tap opens the county's popup.
   test/web-phone.test.ts holds the rules. */
@media (max-width:860px){
  .hd{position:static}
  .nv,.nv a{min-height:44px}
  .wm{padding:12px 0;margin:-12px 0}
  .si{display:inline-block;padding:12px 4px;margin:-12px -4px}
  .hd .sw a{min-height:38px}
  .skip,.skip-map{min-height:44px;display:flex;align-items:center}
  .btn,.zipform input,.zipform button,.findform input,.door input{height:44px;min-height:44px}
  .filters button,.views button,.kpis button,.cmd-scope select,.cmd-scope input,.cmd-scope button{min-height:44px;min-width:44px;justify-content:center}
  .wm,.si{min-height:44px}
  .breaking li .x{width:44px;height:44px;margin:-9px -10px -9px 0}
  .breaking li.bar button{min-height:44px;padding:0 10px}
  .hc-link{display:inline-block;padding:12px 0;margin:-12px 0}
  /* The popup sits under the map on a phone, never over it: the map stays tappable and a second tap just changes it. */
  .hovercard{position:static;width:auto;max-width:none;margin:0 16px}
  .counties .cfilter select,.counties .cfilter button{min-height:44px}
  /* Command View: the can't-see lists and the outage and gauge tables are lists of counties to tap, not prose. */
  .cmd .blind summary{min-height:44px;display:flex;align-items:center}
  .cmd .blind details a,.cmd td a,.cmd .sec li > a{display:inline-flex;align-items:center;min-height:44px}
}

/* D45 (Van, 2026-10-04; US-WEB-COUNTY): the county and event pages as one-screen dashboards, to the approved mockups.
   White, neutral greys, one connected panel with hairline dividers, square corners, no pills anywhere: a status is a
   colour edge bar (the map's tokens) plus the plain word; tabs are flat labels with a straight underline. */
body.dashpage{background:var(--paper)}
.cdash{--d-ink:var(--ink);--d-mut:var(--ink2);--d-rule:var(--rule2);--d-hair:var(--rule);--d-tint:var(--surface2);--d-sel:var(--sel);max-width:1240px;margin:0 auto;padding:20px 16px 40px;color:var(--d-ink)}
.cdash *,.cdash *::before,.cdash *::after{border-radius:0}
.cdash .muted{color:var(--d-mut)}
.cdash .fine{font-size:12px}
.cdash a{color:var(--d-ink)}
.cdash .dpanel{border:1px solid var(--d-rule);background:var(--surface)}
.cdash .dhd{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:14px 18px;border-bottom:1px solid var(--d-rule)}
.cdash .crumb{display:block;font-size:12px;color:var(--d-mut);margin:0 0 4px}
.cdash .crumb a{color:var(--d-mut)}
.cdash h1{font-family:inherit;font-size:22px;font-weight:600;margin:0;letter-spacing:0;line-height:1.25}
.cdash h1 .hday{font-weight:400;color:var(--d-mut)}
.cdash .sub{font-size:12px;color:var(--d-mut);margin:3px 0 0}
.cdash .sub a{color:var(--d-mut)}
.cdash .mix{display:flex;width:220px;height:10px;flex:none}
.cdash .dday{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:8px 18px;border-bottom:1px solid var(--d-hair);font-size:13px}
.cdash .dday .vers{display:flex;flex-wrap:wrap;gap:0;border:0}
.cdash .dday .vers a{padding:2px 8px;border:0;border-left:1px solid var(--d-hair);color:var(--d-mut);text-decoration:none;background:none}
.cdash .dday .vers a.on{color:var(--d-ink);background:none;font-weight:600;box-shadow:inset 0 -2px 0 var(--d-ink)}
.cdash .vfold summary{cursor:pointer;color:var(--d-ink)}
.cdash .vfold .vers{flex-direction:column;margin-top:4px;max-height:240px;overflow:auto}
.cdash .vfold .vers a{border-left:0;border-top:1px solid var(--d-hair);padding:6px 8px;min-height:32px}
.cdash .vfold .vers a.on{box-shadow:inset 3px 0 0 var(--d-ink)}
.cdash .dday .grow{flex:1}
.cdash .late{margin:0;padding:8px 18px;border-bottom:1px solid var(--d-hair);box-shadow:inset 6px 0 0 var(--s2);font-size:13px}
.cdash .dtabs{display:flex;border-bottom:1px solid var(--d-rule);overflow-x:auto}
.cdash .dtabs a{padding:10px 18px;color:var(--d-mut);text-decoration:none;border-right:1px solid var(--d-hair);font-size:13px;white-space:nowrap}
.cdash .dtabs a.on{color:var(--d-ink);box-shadow:inset 0 -3px 0 var(--d-ink)}
.cdash .dtabs a:hover{background:var(--d-tint);color:var(--d-ink)}
.cdash .dstrip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--d-rule)}
.cdash .dstrip > div{padding:10px 18px;border-right:1px solid var(--d-hair);min-width:0}
.cdash .dstrip > div:last-child{border-right:0}
.cdash .dstrip .edge{box-shadow:inset 6px 0 0 var(--bar);padding-left:24px}
.cdash .k{font-size:11px;color:var(--d-mut);margin:0;font-weight:400;letter-spacing:.02em;text-transform:none}
.cdash .n{font-size:24px;font-weight:600;margin:2px 0 0;line-height:1.2}
.cdash .v{font-size:15px;font-weight:600;margin:2px 0 0}
.cdash .ks{font-size:11px;color:var(--d-mut);margin:2px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cdash .dbody{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
.cdash .dleft{border-right:1px solid var(--d-rule);min-width:0}
.cdash .dpane{min-width:0}
.cdash .thead,.cdash .trow{display:grid;grid-template-columns:6px 150px 134px minmax(0,1fr) 150px;align-items:center}
.cdash .thead{background:var(--d-tint);border-bottom:1px solid var(--d-hair);height:30px}
.cdash .thead > span,.cdash .trow > span:not(.bar){padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cdash .thead .tlane{display:flex;justify-content:space-between}
.cdash .trow{min-height:44px;border-bottom:1px solid var(--d-hair);color:inherit;text-decoration:none;font-size:14px}
.cdash .trow:hover{background:var(--d-tint)}
.cdash .trow.sel{background:var(--d-sel)}
.cdash .trow .tn{display:flex;align-items:center;gap:6px}
.cdash .trow .st{font-size:13px;font-weight:600}
.cdash .trow .tl{font-size:13.5px}
.cdash .bar{display:block;height:100%;min-height:12px;background:var(--bar)}
.cdash .st-0{--bar:var(--s0)}.cdash .st-1{--bar:var(--s1)}.cdash .st-2{--bar:var(--s2)}.cdash .st-3{--bar:var(--s3)}
.cdash .st-4{--bar:var(--hatch)}
.cdash .trow .st::before,.cdash .phd .st::before{display:none}
.cdash .st-4 > .bar,.cdash .mix .st-4{background:repeating-linear-gradient(135deg,var(--hatch) 0 2px,var(--surface) 2px 6px)}
.cdash .mix span{display:block;height:100%;background:var(--bar)}
.cdash .lane{display:block;overflow:visible}
.cdash .lane line{stroke:var(--d-hair);stroke-width:1}
.cdash .lane rect{fill:#9A9A9A}
.cdash .lane.st-1 rect,.cdash .lane.st-2 rect,.cdash .lane.st-3 rect{fill:var(--bar)}
.cdash .lnote{margin:0;padding:8px 18px}
.cdash .smark{display:inline-flex;align-items:stretch;gap:6px}
.cdash .smark .bar{width:5px;min-height:16px;height:auto}
.cdash .smark b{font-size:13px;font-weight:600}
.cdash .sec{padding:14px 18px;border-bottom:1px solid var(--d-hair)}
.cdash .pane > .sec:last-child{border-bottom:0}
.cdash .sec h2,.cdash .pane h2{font-family:inherit;font-size:17px;font-weight:600;margin:0 0 8px}
.cdash .sec h3.k{margin:0 0 6px}
.cdash .pane.topic{padding:14px 18px}
.cdash .back{display:inline-block;font-size:13px;margin-bottom:10px}
.cdash .phd{display:flex;align-items:center;gap:10px;margin:0 0 4px}
.cdash .phd .bar{width:5px;min-height:22px;height:22px;flex:none}
.cdash .phd h2{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:17px}
.cdash .phd .st{font-size:13px}
.cdash .pane .tline{margin:6px 0 10px;font-family:inherit;font-size:15px;line-height:1.5}
.cdash .pane h3{font-size:13px;margin:14px 0 6px}
.cdash .pane h4{font-size:12.5px;margin:12px 0 2px;color:var(--d-mut);font-weight:600}
.cdash .items li{border-top:1px solid var(--d-hair);font-size:14px}
.cdash .facts{font-family:inherit;font-size:14.5px;line-height:1.55;margin:6px 0;padding-left:18px}
.cdash .dmap{border:0;border-bottom:1px solid var(--d-hair);margin:0;background:var(--surface)}
.cdash #map-county{height:260px}
.cdash canvas.no-gpu{display:none}
.cdash .dmap .cap{padding:8px 18px;margin:0;font-size:12px}
.cdash .written{border:0;border-bottom:1px solid var(--d-hair);padding:14px 18px;margin:0;background:var(--surface)}
.cdash .written h2{font-size:12px;font-weight:400;color:var(--d-mut);margin:0 0 6px}
.cdash .written p{font-family:inherit;font-size:14.5px;line-height:1.6;margin:0 0 8px;overflow-wrap:anywhere}
.cdash .written .written-note{font-size:12px;line-height:1.5}
.cdash .written-sources li,.cdash .written details{font-size:13px;overflow-wrap:anywhere}
.cdash .events .evline{margin:0;font-size:14px}
.cdash .warnfirst{box-shadow:inset 6px 0 0 var(--s3);padding:14px 18px 6px 24px}
.cdash .wrows{border-bottom:1px solid var(--d-rule)}
.cdash .wrow{grid-template-columns:6px minmax(0,1fr) auto}
.cdash .wrow .wn,.cdash .wrow .we{padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font-size:13.5px}
.cdash .wrow .we{font-size:12px}
.cdash .warnfirst h2{font-family:inherit;font-size:15px;margin:0 0 8px}
.cdash .warn{border-left:0;background:var(--d-tint);padding:10px 14px}
.cdash .badge{background:none!important;border:0!important;color:var(--d-mut)!important;padding:0 0 0 6px;box-shadow:inset 3px 0 0 var(--d-rule);font-weight:600}
.cdash .badge.b-active{color:var(--d-ink)!important;box-shadow:inset 3px 0 0 var(--s1)}
.cdash .badge.b-warn{color:var(--d-ink)!important;box-shadow:inset 3px 0 0 var(--s3)}
.cdash .srow{display:grid;grid-template-columns:5px 170px minmax(0,1fr);gap:0 10px;align-items:center;min-height:40px;border-top:1px solid var(--d-hair);text-decoration:none;font-size:13.5px}
.cdash .past a{border-top:1px solid var(--d-hair)}
.cdash .more a{font-size:13px}
.cdash details.more > summary,.cdash details.srcs > summary{color:var(--d-ink)}
.cdash .dfoot{border-top:1px solid var(--d-rule);padding:10px 18px;font-size:12px;color:var(--d-mut)}
.cdash .dfoot b{color:var(--d-ink);font-weight:600;margin-right:6px}
.cdash .mono{font-family:var(--mono);font-size:11.5px}
.cdash .pane{scroll-margin-top:72px}
.cdash.js .pane{display:none}
.cdash.js .pane.on{display:block}
@media (max-width:860px){
  .cdash{padding:12px 0 24px}
  .cdash .dpanel{border-left:0;border-right:0}
  .cdash .dhd{padding:12px 16px}
  .cdash .mix{display:none}
  .cdash .dstrip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cdash .dstrip > div:nth-child(2){border-right:0}
  .cdash .dstrip > div:nth-child(-n+2){border-bottom:1px solid var(--d-hair)}
  .cdash .dbody{grid-template-columns:1fr}
  .cdash .dleft{border-right:0;border-bottom:1px solid var(--d-rule)}
  .cdash .thead{display:none}
  .cdash .trow{grid-template-columns:6px minmax(0,1fr) auto;grid-template-areas:"b n s" "b l l";padding:6px 0}
  .cdash .wrow{grid-template-areas:"b n n" "b e e"}.cdash .wrow .wn{grid-area:n}.cdash .wrow .we{grid-area:e}
  .cdash .trow > .bar{grid-area:b}.cdash .trow .tn{grid-area:n}.cdash .trow .st{grid-area:s}.cdash .trow .tl{grid-area:l;font-size:13px}
  .cdash .tlane{display:none!important}
  .cdash .dtabs a{padding:12px 14px;min-height:44px;box-sizing:border-box}
  .cdash .srow{grid-template-columns:5px 120px minmax(0,1fr)}
}
/* D45 event page: notices as edge-barred lines, sources as rows, the timeline, the decisions, the county now. */
.cdash .notice{padding:8px 18px 8px 24px;border-bottom:1px solid var(--d-hair);box-shadow:inset 6px 0 0 var(--bar);font-size:13.5px}
.cdash .reported{margin:0;font-family:inherit;font-size:14px}
.cdash h2.k,.cdash h3.k{font-family:inherit;font-size:11px;font-weight:400;color:var(--d-mut);margin:0 0 6px;letter-spacing:.02em}
.cdash .srow.ev{grid-template-columns:4px minmax(0,1fr) 150px;min-height:48px;align-items:stretch}
.cdash .srow.ev > span:not(.bar){padding:6px 0;align-self:center}
.cdash .srow.ev > span:last-child{text-align:right}
.cdash .srow.ev:last-child{border-bottom:1px solid var(--d-hair)}
.cdash .unfold{display:block;overflow:visible}
.cdash .unfold line{stroke:var(--d-hair);stroke-width:2}
.cdash .unfold .m{fill:var(--s1)}
.cdash .unfold .d{fill:var(--d-ink)}
.cdash .unfold text{font-size:11px;fill:var(--d-mut)}
.cdash .dl{display:grid;grid-template-columns:130px minmax(0,1fr);gap:6px 10px;font-size:13px}
.cdash .nowrows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
.cdash .nrow{display:grid;grid-template-columns:4px minmax(0,1fr) auto;gap:0 8px;align-items:center;min-height:32px;border-top:1px solid var(--d-hair);text-decoration:none;font-size:13px}
.cdash.event .dleft .sec:last-child{border-bottom:0}
@media (max-width:860px){
  .cdash .srow.ev{grid-template-columns:4px minmax(0,1fr)}
  .cdash .srow.ev > span:last-child{grid-column:2;text-align:left;padding-top:0}
  .cdash .dl{grid-template-columns:1fr}
  .cdash .nrow{min-height:44px}
}
/* D45 area pages (region, state, city): a strip of five counts, rows by topic or by state with each status's count
   linked to its list, county rows worst first, the framed map, warnings and events on the right. */
.cdash .dstrip.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.cdash .dstrip > a{display:block;padding:10px 18px;border-right:1px solid var(--d-hair);min-width:0;color:inherit;text-decoration:none}
.cdash .dstrip > a:last-child{border-right:0}
.cdash .dstrip > a:hover{background:var(--d-tint)}
.cdash .dstrip > a.edge{padding-left:24px}
.cdash .dleft > .dtabs{border-bottom:1px solid var(--d-hair)}
.cdash .thead.arow,.cdash .trow.arow{grid-template-columns:6px 170px minmax(60px,1fr) repeat(5,78px)}
.cdash .trow.arow{color:inherit}
.cdash .trow.arow:hover{background:none}
.cdash .trow.arow .tn a{color:inherit}
.cdash .dist{display:flex;height:10px;margin:0 10px;min-width:0}
.cdash .dist span{display:block;height:100%;background:var(--bar)}
.cdash .dist .st-4{background:repeating-linear-gradient(135deg,var(--hatch) 0 2px,var(--surface) 2px 6px)}
.cdash .cn{text-align:right;padding:0 10px;font-variant-numeric:tabular-nums;font-size:13.5px;text-decoration:none;color:var(--d-ink)}
.cdash a.cn:not(.z){font-weight:600;box-shadow:inset -3px 0 0 var(--bar)}
.cdash .tline{font-family:inherit;font-size:14px;line-height:1.5}
.cdash .thead .cn{box-shadow:none;text-align:right}
.cdash a.cn:hover{background:var(--d-tint)}
.cdash .rowsbox{max-height:620px;overflow:auto}
.cdash .trow.crow{grid-template-columns:6px minmax(0,220px) 140px minmax(0,1fr)}
.cdash .dside{min-width:0}
.cdash .dside .warn{margin:8px 0}
.cdash .pane .list{border:0;padding:14px 18px;margin:0}
@media (max-width:860px){
  .cdash .dstrip.five{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cdash .dstrip.five > a{border-bottom:1px solid var(--d-hair)}
  .cdash .thead.arow{display:none}
  .cdash .trow.arow{grid-template-columns:6px repeat(5,minmax(0,1fr));grid-template-areas:"b n n n n n" "b c0 c1 c2 c3 c4"}
  .cdash .trow.arow .tn{grid-area:n}
  .cdash .trow.arow .dist{display:none}
  .cdash .trow.arow .cn{min-height:44px;display:flex;flex-direction:column;align-items:flex-end;justify-content:center}
  .cdash .trow.arow .cn::before{content:attr(data-l);font-size:10px;font-weight:400;color:var(--d-mut)}
  .cdash .trow.crow{grid-template-columns:6px minmax(0,1fr) auto;grid-template-areas:"b n s" "b l l"}
  .cdash .trow.crow .tl{grid-area:l}
}
/* D45 /counties: the toolbar and the list as rows with edge bars (no table; at phone width each row wraps). */
.cdash .ctools{display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px;padding:8px 18px;border-bottom:1px solid var(--d-hair)}
.cdash .ctools .cfilter,.cdash .ctools .csort{margin:0;font-size:13px}
.cdash .ctools select,.cdash .ctools button{border:1px solid var(--d-rule);background:var(--surface2);color:var(--ink);padding:4px 8px;font:inherit}
.cdash .clist{list-style:none;margin:0;padding:0}
.cdash .thead.clrow,.cdash .trow.clrow{grid-template-columns:6px minmax(0,1.4fr) minmax(0,1fr) 150px 170px}
.cdash .trow.clrow{min-height:36px}
.cdash .trow.clrow > a,.cdash .trow.clrow > span:not(.bar){padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cdash .clrow .rn{text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:860px){
  .cdash .thead.clrow{display:none}
  .cdash .trow.clrow{grid-template-columns:6px minmax(0,1fr) auto;grid-template-areas:"b c s" "b t r";padding:4px 0}
  .cdash .trow.clrow > a:first-of-type{grid-area:c;min-height:44px;display:flex;align-items:center}
  .cdash .trow.clrow > a.muted{grid-area:t}
  .cdash .trow.clrow .st{grid-area:s}
  .cdash .trow.clrow .rn{grid-area:r}
}
/* "Show On The Map" (0.9.35 one dropdown; 0.9.36 styled, Van: "there is no formatting to it"). Built like the ZIP field
   above it: its name over a 40 px hairline box (44 on a phone), square (D45). The box shows the choice in ink, its count
   muted in the site's figures face, and a chevron; hover darkens the edge, focus draws the site's ring. The native
   select lies over the whole box, invisible, so a click, the keyboard and a screen reader all use the real control. */
.domsel{display:flex;flex-direction:column;gap:6px}
.domsel-k{font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
.domsel-box{position:relative;display:flex;align-items:center;height:40px;padding:0 34px 0 10px;border:1px solid var(--line);background:var(--surface);cursor:pointer;transition:border-color .12s ease}
.domsel-box:hover{border-color:var(--ink2)}
.domsel-box:focus-within{border-color:var(--ink);outline:2px solid var(--accent);outline-offset:2px}
.domsel-face{display:flex;align-items:baseline;gap:8px;min-width:0;overflow:hidden;white-space:nowrap}
.domsel-v{font-size:14px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.domsel-n{font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:12px;color:var(--ink2)}
.domsel-chev{position:absolute;right:12px;top:50%;width:12px;height:12px;margin-top:-6px;color:var(--ink2);pointer-events:none}
.domsel-box:hover .domsel-chev,.domsel-box:focus-within .domsel-chev{color:var(--ink)}
.domsel select{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer;font-size:16px;-webkit-appearance:none;appearance:none}
@media (max-width:860px){.domsel-box{height:44px}}
/* 0.9.36: the live bar's parts (statuses, newest story, checked, clock, reporting) each stay on one line; the bar wraps
   between them, never inside one ("Statuses updated 8 min / ago"). */
.livebar{flex-wrap:wrap;row-gap:2px}
.livebar > span{white-space:nowrap}

/* P9 (A) freight and economy (economy.ts): its row among the topics and its pane's items, each an edge bar plus the line. */
.cdash .elist .erow{display:grid;grid-template-columns:4px minmax(0,1fr);gap:0 10px;align-items:stretch;padding:6px 0}
.cdash .elist .erow .bar{min-height:100%}
.cdash .elist .erow .k{display:inline-block;margin-bottom:2px}

/* Design V2 county page (U2; county-v2.ts) with D45's shapes (Van chose "A", 2026-10-12): the crumb, the name and day
   line, the summary and figures, ONE list of topics that open to their records, the events; beside them the county and
   its neighbours, the last four weeks and what we can't see. The topic bodies keep the .county rules above. */
.cv2{padding-top:0}
.cv2 .crumb{display:block;padding-top:28px;margin:0;font-size:13px;color:var(--ink3)}.cv2 .crumb a{color:var(--ink2)}
.cv2 .chd{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cv2 .chd h1.t{margin:6px 0 8px}.cv2 .hday{color:var(--ink3);font-weight:400}
.daynav{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--ink2);flex-wrap:wrap}
.daynav a{color:var(--ink2);text-decoration:none}.daynav a:hover{color:var(--ink);text-decoration:underline}.daynav b{color:var(--ink);font-weight:600}
.cv2 .late{margin:16px 0 0}
.cty{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;padding-top:20px}
.cmain{min-width:0}
.cv2 .summary{font-family:var(--serif);font-size:19px;line-height:1.45;color:var(--ink2);max-width:720px;margin:4px 0 0}
.cv2 .figs{margin-top:24px;flex-wrap:wrap;row-gap:12px}.cv2 a.fig{color:inherit;text-decoration:none}.cv2 a.fig:hover b{text-decoration:underline}
.cwarn{margin-top:28px}.cwarn h2.t{font-size:20px;margin:0 0 10px}
.topics{border-top:1px solid var(--ink);margin-top:28px}
.secth{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:14px 0 4px}
.tp{border-bottom:1px solid var(--rule);scroll-margin-top:72px}
.tp > summary{display:grid;grid-template-columns:28px 170px 150px minmax(0,1fr) 100px 20px;gap:14px;align-items:center;padding:16px 0;cursor:pointer;list-style:none}
/* the 24-hour lane (PM, 2026-10-12): square marks in muted ink, a warning's in its status colour; ends said once */
.tp .ln{position:relative;display:block;min-width:0}
.tp .lax{position:absolute;left:0;right:0;bottom:100%;margin-bottom:3px;font-size:10.5px;color:var(--ink3);white-space:nowrap;text-align:center}
.tp .lane{display:block;width:100%;height:10px}
.tp .lane line{stroke:var(--rule2);stroke-width:1}
.tp .lane rect{fill:var(--ink2);fill-opacity:1}
.tp .lane.st-3 rect{fill:var(--s3)}
.tp > summary::-webkit-details-marker{display:none}
.tp > summary:hover{background:var(--hover)}
.tp > summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tp .g{width:28px;height:28px;display:grid;place-items:center;color:var(--ink2)}
.tp .nm{font-weight:600;font-size:14.5px}
/* the evidence wraps to two lines at most, never cut mid-sentence (PM, 2026-10-12) */
.tp .ev{font-size:13.5px;line-height:1.4;color:var(--ink2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tp .ch::before{content:"+";color:var(--ink3);font-size:18px}.tp[open] > summary .ch::before{content:"\2212"}
.tp[open] > summary .ev{-webkit-line-clamp:unset}
.tp-x{padding:0 0 20px 42px}
.tp-x .back,.tp-x .phd,.tp-x > .pane > .tline{display:none}
.cv2 .bar{display:block;height:100%;min-height:12px;background:var(--bar)}
.cv2 .st-0{--bar:var(--s0)}.cv2 .st-1{--bar:var(--s1)}.cv2 .st-2{--bar:var(--s2)}.cv2 .st-3{--bar:var(--s3)}.cv2 .st-4{--bar:var(--hatch)}
.cv2 .smark{display:inline-flex;align-items:stretch;gap:6px}.cv2 .smark .bar{width:4px;min-height:16px;height:auto}.cv2 .smark b{font-size:13px;font-weight:600}
.cv2 .elist .erow{display:grid;grid-template-columns:4px minmax(0,1fr);gap:0 10px;align-items:stretch;padding:6px 0}
.cv2 .elist .erow .bar{min-height:100%}.cv2 .elist .erow .k{display:inline-block;margin-bottom:2px}
.cevents{margin-top:36px}
.cevents > h2{font-family:var(--serif);font-weight:500;font-size:24px;letter-spacing:-.01em;margin:0 0 6px}
.cevents .evline{margin:0;padding:14px 0;border-top:1px solid var(--rule);font-size:14.5px;line-height:1.5}
/* U17 (Van, 2026-10-21): a page's citation sits in the footer band, left, in its small grey type; the Atlas line stays right (on a phone, under it) */
footer.foot .cite{min-width:0;overflow-wrap:anywhere}footer.foot .cite b{font-weight:600}footer.foot .cite .mono{font-size:inherit}
/* Van, 2026-10-21: a page's data credits (the live map's) in the same band, compact, on a line of their own under the cite line */
footer.foot .credit{flex:1 1 100%;font-size:11.5px;line-height:1.45}footer.foot .credit a{text-decoration:underline;text-underline-offset:2px}
@media (max-width:599px){footer.foot .cite{order:2}footer.foot .credit{order:3}}
.aside{min-width:0}
.aside h3{font-size:13px;font-weight:600;color:var(--ink3);margin:0 0 10px}
.aside .blk{padding:0 0 24px;margin-bottom:24px;border-bottom:1px solid var(--rule)}.aside .blk.last{border-bottom:0}
.aside .mapbox{border:1px solid var(--rule)}.aside #map-county{height:260px}
.aside .cap{margin:8px 0 0}
.cv2 .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;max-width:340px}
.cv2 .cal .cd{display:block;aspect-ratio:1;padding:0;border:0;background:var(--bar)}
.cv2 .cal .cd.st-4{background:repeating-linear-gradient(135deg,var(--hatch) 0 2px,var(--surface) 2px 5px)}
.cv2 .cal .cd.none{background:none;box-shadow:inset 0 0 0 1px var(--rule2)}
.cv2 .cal .cd.today{box-shadow:0 0 0 2px var(--ink)}
.cv2 .cal a.cd:hover{box-shadow:0 0 0 2px var(--ink2)}
.cv2 .cantsee ul{padding-left:0}
@media (max-width:1100px){.cty{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){
  .cv2 .crumb{padding-top:18px}
  .tp > summary{grid-template-columns:28px minmax(0,1fr) auto;grid-template-areas:"g nm st" "g ev ev" "g ln ln";gap:4px 12px;padding:12px 0}
  .tp .ln{grid-area:ln}.tp .lax{position:static;text-align:left;margin:0 0 2px}
  .tp .g{grid-area:g}.tp .nm{grid-area:nm}.tp > summary .st{grid-area:st}.tp .ev{grid-area:ev;white-space:normal}.tp .ch{display:none}
  .tp-x{padding-left:0}
  .cv2 .figs{display:grid;grid-template-columns:1fr 1fr}
  .cv2 .fig{padding:0 16px}.cv2 .fig:nth-child(odd){border-left:0;padding-left:0}
  .tp > summary{min-height:44px}
}
/* U3 "Weather radar, live" (radar.ts, radar.js): a second framed map with the radar canvas laid over it, never on the
   GPU renderer; NWS's reflectivity steps in the key: light blue, green, yellow, red, as the tiles draw them (sampled 2026-10-12). */
.rbox{position:relative;border:1px solid var(--rule)}
.rbox #map-radar{display:block;width:100%;height:220px}
.rbox .radar-ov{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* Van, 2026-10-21: the radar block never changes height while it plays (loading, playing, the last loop, failed): one
   line of caption, never wrapping (a long one ends in an ellipsis), and a map that cannot be drawn keeps the map's height. */
.rcap{display:flex;justify-content:space-between;gap:10px;flex-wrap:nowrap;margin:8px 0 0;height:1.5em;line-height:1.5em;overflow:hidden}
.rcap .rst{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rbox #map-radar.no-gpu + .map-nogl{box-sizing:border-box;height:220px;min-height:220px}
.rkey{display:inline-flex;align-items:center;gap:2px;white-space:nowrap}
.rkey i{display:inline-block;width:10px;height:6px}
.rkey .r1{background:#5878B4}.rkey .r2{background:#40CF80}.rkey .r3{background:#E7D34A}.rkey .r4{background:#C7372F}
.rcredit{margin:2px 0 0}
.cv2 .past{display:block}.cv2 .past a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--rule)}
/* U4 the major-city page (city.ts): the county page's V2 frame; the city's counties are rows that link, the topics open
   to their counties. */
a.tp.crow{display:grid;grid-template-columns:200px 160px minmax(0,1fr) 20px;gap:14px;align-items:center;padding:16px 0;color:inherit;text-decoration:none}
a.tp.crow:hover{background:var(--hover)}
a.tp.crow .ch{color:var(--ink3);font-size:18px}a.tp.crow .ch::before{content:none}
.city .tp > summary{grid-template-columns:28px 170px 150px minmax(0,1fr) 20px}
.city .tp-x .items li{display:flex;justify-content:space-between;gap:12px}
.clist{margin-top:20px}
@media (max-width:860px){
  a.tp.crow{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nm st" "ev ev";gap:4px 12px;padding:12px 0}
  a.tp.crow .nm{grid-area:nm}a.tp.crow .st{grid-area:st}a.tp.crow .ev{grid-area:ev}a.tp.crow .ch{display:none}
  .city .tp > summary{grid-template-areas:"g nm st" "g ev ev"}
}
/* U5/U8 cameras (cameras.ts): stills from our cache, square (A), the owner's credit under each. A still that cannot be
   read gives way to "Camera unavailable right now" in the same frame (shell.js marks the figure down). */
.ccams{margin-top:36px}
.camgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cam{margin:0}.cam img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--hover)}
.camimg{position:relative}.cam .camdown{display:none}
.cam.down img{visibility:hidden}
.cam.down .camdown{display:flex;position:absolute;inset:0;margin:0;align-items:center;justify-content:center;padding:12px;background:var(--surface);border:1px solid var(--rule);color:var(--ink2);font-size:13px;text-align:center}
.cammore{margin:12px 0 0;font-size:14px;font-weight:600}
.cam .camat:empty{display:none}
.cam figcaption b:empty{min-height:1.45em}
.cam figcaption{display:flex;flex-direction:column;gap:2px;margin-top:8px;font-size:13px}.cam figcaption span{color:var(--ink3);font-size:12px}
.camlinks{margin-top:10px;font-size:14px}
@media (max-width:860px){.camgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* U7 (PM, 2026-10-12): every US page outside screens 3, 4 and 4b on Design V2's reading template, with A's shapes. The
   D45 frame (.cdash: event, region, state and city lists, every county as a list) keeps its markup, its addresses and
   panes being behaviour that is tested; this restyles it: no outer panel, figures free between hairlines (no tiles),
   tabs as flat words with an ink underline, serif titles, links in ink and underlined only when pointed at, quoted
   warnings on an edge bar without a fill. The plain pages (.page: the door, not found, ZIP, find, every day) likewise. */
.cdash{--d-ink:var(--ink);--d-mut:var(--ink2);--d-rule:var(--rule);--d-hair:var(--rule);--d-tint:var(--hover);--d-sel:var(--hover);max-width:1280px;padding:28px 32px 48px}
body.dashpage{background:var(--bg)}
.cdash .dpanel{border:0;background:none}
.cdash .dhd{padding:0 0 20px;border-bottom:0;align-items:flex-end}
.cdash .crumb{font-size:13px;color:var(--ink3);margin:0 0 6px}.cdash .crumb a{color:var(--ink2)}
.cdash h1{font-family:var(--serif);font-weight:500;font-size:40px;letter-spacing:-.02em;line-height:1.08;margin:0}
.cdash .sub{font-size:13px;color:var(--ink2);margin-top:6px}
.cdash a{color:var(--ink);text-decoration:none}.cdash a:hover{text-decoration:underline}
.cdash .dstrip,.cdash .dstrip.five{display:flex;flex-wrap:wrap;gap:12px 0;padding:4px 0 22px;border-bottom:1px solid var(--ink)}
.cdash .dstrip > div,.cdash .dstrip > a,.cdash .dstrip > a.edge,.cdash .dstrip .edge{display:flex;flex-direction:column;padding:0 28px;border:0;border-left:1px solid var(--rule);box-shadow:none;background:none;min-width:0}
.cdash .dstrip > :first-child,.cdash .dstrip > a.edge:first-child,.cdash .dstrip > .edge:first-child{padding-left:0;border-left:0}
.cdash .dstrip .k{order:2;font-size:12.5px;color:var(--ink2);margin:2px 0 0}
.cdash .dstrip .n{order:1;font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums;margin:0}
.cdash .dstrip .v{order:1;font-size:17px;font-weight:600;line-height:1.3;margin:0}
.cdash .dstrip .ks{order:3;font-size:12px;color:var(--ink3)}
.cdash .dstrip .st-3 .n{color:var(--warn)}
.cdash .dstrip > a:hover{background:none;text-decoration:none}.cdash .dstrip > a:hover .n{text-decoration:underline}
.cdash .dtabs,.cdash .dleft > .dtabs{display:flex;gap:0 18px;border-bottom:1px solid var(--rule)}
.cdash .dtabs a{padding:12px 2px 10px;border-right:0;color:var(--ink2);font-size:13px;font-weight:600}
.cdash .dtabs a.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
.cdash .dtabs a:hover{background:none;color:var(--ink);text-decoration:none}
.cdash .dbody{gap:0 48px;padding-top:8px}
.cdash .dleft{border-right:0}
.cdash .sec{padding:18px 0;border-bottom:1px solid var(--rule)}
.cdash .sec h2,.cdash .pane h2{font-family:var(--serif);font-weight:500;font-size:22px;letter-spacing:-.01em}
.cdash .dmap{border:1px solid var(--rule);margin:18px 0 0;background:var(--surface)}
.cdash .dmap .cap{padding:8px 12px}
.cdash .warnfirst{box-shadow:none;padding:18px 0 6px}
.cdash .warn,.page .warn{background:none;border-left:0;box-shadow:inset 4px 0 0 var(--warn);padding:6px 0 6px 16px}
.cdash .dfoot{border-top:1px solid var(--rule);padding:16px 0;font-size:12.5px;color:var(--ink3)}
.counties .cfilter select,.counties .cfilter button{border-color:var(--rule2)}
.cdash .thead{background:none;border-bottom:1px solid var(--ink)}
.cdash .late,.late{background:none;box-shadow:inset 4px 0 0 var(--s2);padding:8px 0 8px 16px}
.said{background:none;box-shadow:inset 4px 0 0 var(--rule2);padding:6px 0 6px 16px}
.page{max-width:960px;padding:36px 32px 64px}
.page h1{font-family:var(--serif);font-weight:500;font-size:44px;letter-spacing:-.02em;line-height:1.05;margin:6px 0 14px}
.page h2{font-family:var(--serif);font-weight:500;font-size:24px;letter-spacing:-.01em}
.page a{text-decoration:none}.page a:hover{text-decoration:underline}
.door.card{border:0;background:none;padding:0}
.door h1{font-weight:500;font-size:40px}
@media (max-width:860px){
  .cdash{padding:20px 16px 40px}
  .cdash h1,.page h1{font-size:32px}
  .cdash .dstrip,.cdash .dstrip.five{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 0}
  .cdash .dstrip > div,.cdash .dstrip > a,.cdash .dstrip > a.edge,.cdash .dstrip .edge{padding:0 16px;border-left:1px solid var(--rule);border-bottom:0}
  .cdash .dstrip > :nth-child(odd),.cdash .dstrip > a.edge:nth-child(odd),.cdash .dstrip > .edge:nth-child(odd){padding-left:0;border-left:0}
}
/* A map that cannot be drawn (PM, 2026-10-12): no WebGL, or its counties did not load. The canvas gives way to the quiet
   panel the page put beside it (map-focus.ts mapNoGl), in the surface colour, never a black box. */
.map-nogl{display:none}
canvas.no-gpu{display:none!important}
canvas.no-gpu + .map-nogl{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:160px;margin:0;padding:20px;background:var(--surface);color:var(--ink2);font-size:13px;line-height:1.45;text-align:center}
.map-nogl a{color:var(--ink)}
#map-apex.no-gpu + .map-nogl{position:absolute;inset:0}
body.no-gpu .mapstage{display:flex;flex-direction:column}#map-dashboard.no-gpu + .map-nogl{flex:1 1 auto}
/* U9 (Van, 2026-10-14, "Option B w location"; us/guide/mockups/US-Mobile-Options.html tab B): the US Monitor on a phone.
   Below 600 px only: the phone blocks (phone.ts) replace the dashboard's strip, map and feed and the state page's frame.
   From 600 px they are never shown and the desktop pages are as they were. A's shapes (square). */
.phone{display:none}
@media (max-width:599px){
  .phone{display:block;padding-bottom:8px}
  body.has-phone .cdash.area{display:none}
  .ph-loc{padding:10px 16px 0}
  .ph-loc .loc{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;border:0;background:none;color:var(--accent);font-size:14px;font-weight:600;cursor:pointer}
  .ph-loc .loc[disabled]{color:var(--ink3)}
  .ph-loc .locmsg{margin:0 0 4px;font-size:13px}
  /* the alerts: one line, a tap opens the list in place */
  .ph-dash .al{display:flex;align-items:center;gap:10px;width:calc(100% - 32px);margin:8px 16px 0;padding:0 14px;min-height:52px;text-align:left;background:var(--surface);border:1px solid var(--rule2);border-left:4px solid var(--s3);cursor:pointer;font:inherit;color:var(--ink)}
  .ph-dash .al .n{font-weight:700;color:var(--s3);font-size:16px;min-width:1ch}
  .ph-dash .al .t{flex:1;min-width:0;font-size:14px;line-height:1.3}
  .ph-dash .al .t small{display:block;color:var(--ink3);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ph-dash .al .chev{color:var(--ink3);font-size:20px;transition:transform .15s}
  .ph-dash .al[aria-expanded=true] .chev{transform:rotate(90deg)}
  .ph-dash .alist{margin:0 16px;background:var(--surface);border:1px solid var(--rule2);border-top:0}
  .ph-dash .ar{display:block;padding:11px 14px;border-top:1px solid var(--rule);color:var(--ink);text-decoration:none}
  .ph-dash .ar:first-child{border-top:0}
  .ph-dash .ar .h{display:block;font-size:14px;font-weight:600;line-height:1.3}
  .ph-dash .ar .m{display:block;font-size:12.5px;color:var(--ink2);margin-top:2px}
  .ph-dash .ar .m .pl{color:var(--s3);font-weight:600}
  .ph-dash .afoot{display:flex;justify-content:space-between;align-items:center;padding:0 14px;min-height:48px;border-top:1px solid var(--rule)}
  .ph-dash .afoot button{border:0;background:none;padding:0;min-height:44px;font:inherit;font-size:13.5px;cursor:pointer}
  .ph-dash .afoot .lk{color:var(--accent);font-weight:600}
  .ph-dash .afoot .seen{color:var(--ink3)}
  .phone .sh{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:20px 16px 6px}
  .phone .sh h2{margin:0;font-family:var(--serif);font-weight:500;font-size:22px}
  .phone .sh span{font-size:12.5px;color:var(--ink3)}
  .phone .sh span b{color:var(--ink)}.phone .sh span b.w{color:var(--s3)}
  /* the state tile map: 12 columns, every tile at least 28 px, a link to its state */
  .ph-dash .tm{padding:8px 1px 4px}
  /* PM, 2026-10-14: a 3 px gap between every tile, so neighbours never fuse; at 375 px a tile is ~28 px, 32 px from a 425 px screen */
  .ph-dash .tgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px;max-width:456px;margin:0 auto}
  .ph-dash .tile{box-sizing:border-box;width:100%;min-width:0;padding:0;margin:0;border:0;aspect-ratio:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;font-weight:700;line-height:1;color:var(--ink);text-decoration:none;background:var(--s0)}
  .ph-dash .tile small{font-size:9px;font-weight:700;margin-top:2px}
  .ph-dash .tile.t-0{background:var(--s0);color:var(--ink2)}
  /* U16: on the bright amber, red and deep-blue tiles the text is the dark paper (white read 2.5 to 3.7 : 1 on them) */
  .ph-dash .tile.t-1{background:var(--a1);color:#fff}.ph-dash .tile.t-1.b-0{background:var(--a0);color:var(--ink)}.ph-dash .tile.t-1.b-2{background:var(--a2);color:var(--paper)}
  .ph-dash .tile.t-2{background:var(--s2);color:var(--paper)}
  .ph-dash .tile.t-3{background:var(--s3);color:var(--paper)}
  .ph-dash .tile.t-4{background:repeating-linear-gradient(135deg,var(--hatch) 0 1.5px,var(--surface) 1.5px 4px);color:var(--ink2);box-shadow:0 0 0 1px var(--hatch) inset}
  .ph-dash .tile:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
  .ph-dash .tlegend{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;padding:8px 12px 0;font-size:11.5px;color:var(--ink2)}
  .ph-dash .tlegend .tk{display:inline-block;width:10px;height:10px;margin-right:4px;vertical-align:-1px}
  .tk-3{background:var(--s3)}.tk-2{background:var(--s2)}.tk-1{background:var(--a1)}.tk-0{background:var(--s0)}.tk-4{background:repeating-linear-gradient(135deg,var(--hatch) 0 1.5px,var(--surface) 1.5px 3.5px);box-shadow:0 0 0 1px var(--hatch) inset}
  .ph-dash .thint{text-align:center;font-size:12.5px;color:var(--ink3);margin:6px 16px 0}
  /* rows: Latest, a state's counties */
  .phone .rows{background:var(--surface);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
  .phone .r{display:flex;align-items:center;gap:12px;padding:0 16px;min-height:58px;border-top:1px solid var(--rule);color:var(--ink);text-decoration:none}
  .phone .r:first-child{border-top:0}
  .phone .r .stb{width:4px;align-self:stretch;margin:12px 0;flex:none;background:var(--s0)}
  .phone .stb.st-1{background:var(--a1)}.phone .stb.st-2{background:var(--s2)}.phone .stb.st-3{background:var(--s3)}
  .phone .r .tx{flex:1;min-width:0;padding:9px 0}
  .phone .r .nm{display:block;font-size:15px;font-weight:600;line-height:1.25}
  .phone .r .ds{display:block;font-size:12.5px;color:var(--ink2);margin-top:2px;line-height:1.35}
  .phone .r .go{color:var(--ink3);font-size:18px}
  .phone .sw{font-weight:600}.phone .sw-0,.phone .sw-4{color:var(--ink3)}.phone .sw-1{color:var(--a2)}.phone .sw-2{color:var(--s2)}.phone .sw-3{color:var(--s3)}
  .phone .more{display:block;width:100%;padding:14px 16px;min-height:48px;border:0;background:none;text-align:left;color:var(--accent);font:inherit;font-weight:600;font-size:14px;text-decoration:none;cursor:pointer}
  .phone .empty{padding:16px;color:var(--ink2);font-size:14px;margin:0}
  /* a state on a phone */
  .ph-state .back{display:flex;align-items:center;min-height:44px;padding:4px 16px 0;color:var(--accent);font-weight:600;font-size:14px;text-decoration:none}
  .ph-state .sth{padding:0 16px 4px}
  .ph-state .sth h1{margin:0;font-family:var(--serif);font-weight:500;font-size:30px}
  .ph-state .sth p{margin:4px 0 0;font-size:13px;color:var(--ink2)}
  .ph-state .sth .w{color:var(--s3);font-weight:600}
  .ph-state .seg{display:flex;margin:12px 16px 8px;border-bottom:1px solid var(--rule)}
  .ph-state .seg button{flex:1;min-height:44px;border:0;background:none;font:inherit;font-size:14px;font-weight:600;color:var(--ink2);cursor:pointer}
  .ph-state .seg button.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
  .ph-state .pmap{margin:0 0 8px;background:var(--surface);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
  .ph-state #map-phone{display:block;width:100%;height:min(110vw,520px);touch-action:pan-x pan-y}
  .ph-state .pmap p{margin:6px 16px 8px}
  /* the county sheet: up from the bottom, over a dim; closes by the x, the dim, a swipe down or Back */
  .ph-dim{position:fixed;inset:0;background:rgba(14,17,22,.32);opacity:0;transition:opacity .2s;z-index:30}
  .ph-dim.on{opacity:1}
  .ph-sheet{position:fixed;left:0;right:0;bottom:0;z-index:31;max-height:85vh;overflow:auto;background:var(--surface);border-top:1px solid var(--rule2);padding:8px 16px calc(18px + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .22s ease}
  .ph-sheet.on{transform:none}
  .ph-sheet .grab{width:36px;height:4px;background:var(--rule2);margin:2px auto 10px}
  .ph-sheet .x{position:absolute;right:4px;top:4px;width:44px;height:44px;border:0;background:none;font-size:24px;color:var(--ink3);cursor:pointer}
  .ph-sheet h3{margin:0;padding-right:44px;font-family:var(--serif);font-weight:500;font-size:24px}
  .ph-sheet .sub{margin:2px 0 0;font-size:13px;color:var(--ink3)}
  .ph-sheet .stat{margin:12px 0 0;font-size:14px}
  .ph-sheet .stat .tag{display:inline-block;background:var(--s3);color:var(--paper);font-size:12px;font-weight:700;padding:3px 7px}
  .ph-sheet .what{margin:8px 0 0;font-size:14px;line-height:1.45;color:var(--ink2)}
  .ph-sheet .sfigs{display:flex;gap:22px;margin-top:14px;padding-top:12px;border-top:1px solid var(--rule)}
  .ph-sheet .sfigs:empty{display:none}
  .ph-sheet .sfigs div{font-size:12px;color:var(--ink3)}
  .ph-sheet .sfigs b{display:block;font-size:20px;color:var(--ink);font-weight:700}
  .ph-sheet .open{display:flex;align-items:center;justify-content:center;margin-top:16px;min-height:48px;background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:15px;text-decoration:none}
}
/* U11 Rivers (rivers.ts; Van D58 (1), PM-27; spec US-County-Rivers-Roads.html "Rivers"). A self-contained panel: it lays
   itself out by its own width (a container query, never the page's), so it fits whichever county layout Van picks; every
   colour is a token (light and dark ready). Wide: the map beside the rows; narrow: the map first, the rows stacked. */
:root{--water:#4FA3D9;--water-band:#1E3A52;--water-track:var(--surface2)}
.rivers{container-type:inline-size;margin-top:36px}
.rivers .rv-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px}
@container (min-width:640px){.rivers .rv-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:22px}}
.rivers .rv-map,.rivers .rv-rows{background:var(--surface);border:1px solid var(--rule);min-width:0}
.rivers .rv-map{align-self:start}
.rivers .rv-map .mapbox{position:relative}
.rivers #map-rivers{display:block;width:100%;height:300px}
.rivers .leg{display:flex;flex-wrap:wrap;gap:4px 14px;padding:10px 14px;border-top:1px solid var(--rule);font-size:12px;color:var(--ink2)}
.rivers .leg i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px;background:var(--water)}
.rivers .leg i.gw-flood{background:var(--s3)}.rivers .leg i.gw-above{background:var(--s2)}
.rivers .g{display:grid;grid-template-columns:1fr;gap:4px 14px;padding:13px 16px;border-top:1px solid var(--rule);align-items:center;scroll-margin-top:72px}
@container (min-width:420px){.rivers .g{grid-template-columns:minmax(0,1fr) 150px}}
.rivers .rv-rows > .g:first-child{border-top:0}
.rivers .g .nm{font-size:15px;font-weight:600;line-height:1.3}
.rivers .g .ds{font-size:12.5px;color:var(--ink2);margin-top:2px}
.rivers .g .fc{font-size:12px;color:var(--ink3);margin-top:3px}
.rivers .gw{font-weight:600}.rivers .gw-flood{color:var(--s3)}.rivers .gw-above{color:var(--s2)}.rivers .gw-within,.rivers .gw-below,.rivers .gw-no-usual{color:var(--ink3)}
.rivers .bar{position:relative;height:30px}
.rivers .bar .tr{position:absolute;left:0;right:0;top:12px;height:6px;background:var(--water-track)}
.rivers .bar .nb{position:absolute;top:12px;height:6px;background:var(--water-band)}
.rivers .bar .fs{position:absolute;top:6px;width:2px;height:18px;background:var(--s3)}
.rivers .bar .now{position:absolute;top:9px;width:12px;height:12px;border-radius:50%;margin-left:-6px;background:var(--water);border:2px solid var(--surface);box-shadow:0 0 0 1px var(--water)}
.rivers .bar .now.gw-flood{background:var(--s3);box-shadow:0 0 0 1px var(--s3)}
.rivers .bar .now.gw-above{background:var(--s2);box-shadow:0 0 0 1px var(--s2)}
.rivers details.more{border-top:1px solid var(--rule)}
.rivers details.more > summary{padding:12px 16px;cursor:pointer;color:var(--accent);font-weight:600;font-size:14px;min-height:44px;box-sizing:border-box}
.rivers > p{margin:8px 0 0}
/* a gauge on the map: a round dot (every other marker is a square, D45), coloured by its word */
.map-markers .mk-gauge::after,.map-markers .mk-gauge-above::after,.map-markers .mk-gauge-flood::after{border-radius:50%;border:2px solid var(--surface);background:var(--water);box-shadow:0 0 0 1px var(--water)}
.map-markers .mk-gauge-above::after{background:var(--s2);box-shadow:0 0 0 1px var(--s2)}
.map-markers .mk-gauge-flood::after{background:var(--s3);box-shadow:0 0 0 1px var(--s3)}
/* U15 / D60 the county ops wall (county-wall.ts) around U14 round 3's ONE primary map: every section of the county page in
   panels, on the page's own dark tokens (U16). Square throughout (D45); the map's controls sit on it as the PM's spec draws them. */
.wrap.county.wall{max-width:none;margin:0;padding:10px 14px 10px}
.ow{display:grid;gap:10px;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) 400px;grid-template-rows:auto 340px 340px;
  grid-template-areas:"band band band band" "map map map side" "map map map side" "warn warn warn side" "topics topics topics side" "rows rows rows side" "cams cams cams events"}
.ow:not(.has-warn){grid-template-areas:"band band band band" "map map map side" "map map map side" "topics topics topics side" "rows rows rows side" "cams cams cams events"}
.ow:not(.has-warn):not(.has-rows){grid-template-areas:"band band band band" "map map map side" "map map map side" "topics topics topics side" "cams cams cams events"}
.ow.has-warn:not(.has-rows){grid-template-areas:"band band band band" "map map map side" "map map map side" "warn warn warn side" "topics topics topics side" "cams cams cams events"}
.ow:not(.has-cams) .ow-events{grid-column:1/-1}
.owp{background:var(--surface);border:1px solid var(--rule);overflow:hidden;min-width:0;min-height:0;display:flex;flex-direction:column}
.owh{display:flex;align-items:baseline;gap:10px;padding:9px 13px 8px;border-bottom:1px solid var(--rule)}
.owh h2{font:700 13.5px var(--sans);color:var(--ink);margin:0;white-space:nowrap}
.owh .sub{font-size:11.5px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.owb{flex:1;min-height:0;position:relative}
.ow-band{grid-area:band;padding:12px 16px;display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;gap:6px 26px;align-items:center}
.ow-band .crumb{grid-column:1/-1;margin:0;padding:0}
.ow-band .chd{margin:0}
.ow-band .chd h1.t{font-size:34px;margin:0;line-height:1.05}
.ow-band .summary{margin:0;font-size:14.5px;line-height:1.45;color:var(--ink2)}
.ow-band .figs{margin:0;display:flex;gap:24px;border:0}
.ow-band .figs .fig{border:0;padding:0;min-width:0}
.ow-band .late{grid-column:1/-1}
.ow-side{grid-area:side}
.ow-side .owb{overflow:auto;padding:10px 12px}
.ow-side .blk{margin:0 0 14px;padding:0;border:0}
.ow-warn{grid-area:warn}.ow-warn .owb{padding:4px 12px 10px}
.ow-topics{grid-area:topics}.ow-topics .owb{padding:4px 12px 10px}
.ow-topics section.topics{margin:0;border:0;padding:0}
.ow-topics section.topics>.secth{display:none}
.ow-rows{grid-area:rows}.ow-rows .owb{padding:4px 12px 10px}
.ow-cams{grid-area:cams}.ow-cams .owb{padding:8px 12px}
.ow-cams section.ccams{margin:0;padding:0;border:0}
.ow-cams .camgrid{grid-template-columns:repeat(6,minmax(0,1fr))}
.ow-events{grid-area:events}.ow-events .owb{padding:8px 12px}
.ow-events section.cevents{margin:0;padding:0;border:0}
/* the map: its controls on it (the PM's round-3 spec), glass over the base, square */
.ow-map{grid-area:map}
.ow .lm{overflow:hidden}
.ow .owb .lv-map{position:absolute;inset:0;background:#E9E6DF}
.wall.lm-slate .ow .owb .lv-map{background:#262D38}
.lm-layers,.lm-base,.lm-time,.lm-count{position:absolute;z-index:3;display:flex;background:color-mix(in srgb,var(--surface) 88%,transparent);border:1px solid var(--rule2);color:var(--ink);font:600 12px var(--sans)}
.lm-layers{left:10px;top:10px;gap:2px;padding:3px;flex-wrap:wrap;max-width:calc(100% - 150px)}
.lm-base{right:10px;top:10px;gap:2px;padding:3px}
.lm-layers button,.lm-base button{display:flex;align-items:center;gap:6px;padding:6px 10px;min-height:30px;background:none;border:0;color:var(--ink3);font:inherit;cursor:pointer}
.lm-layers button.on,.lm-base button.on{color:var(--ink);background:rgba(255,255,255,.08)}
.lm-layers i{width:8px;height:8px;opacity:.35}
.lm-layers button.on i{opacity:1}
.lm-layers .c-radar{background:#4FD07A}.lm-layers .c-warnings{background:#FF5A4F}.lm-layers .c-traffic{background:#E8913A}.lm-layers .c-aircraft{background:#FFD27A}.lm-layers .c-rivers{background:#5EC8FF}.lm-layers .c-cameras{background:#7FD3FF}
.lm-time{left:10px;bottom:30px;align-items:center;gap:12px;padding:6px 12px;max-width:min(560px,calc(100% - 300px))}
.lm-time[hidden]{display:none}
.lm-time .lm-play{width:24px;height:24px;display:grid;place-items:center;background:none;border:0;color:var(--ink);cursor:pointer;font-size:12px}
.lm-track{flex:1;display:flex;align-items:center;height:18px;min-width:120px;cursor:pointer}
.lm-track i{flex:1;height:3px;margin:0 1px;background:rgba(255,255,255,.14)}
.lm-track i.on{background:#F2C46D}
.lm-time .t{font:500 12px var(--mono);color:var(--ink2);min-width:96px;text-align:right}
.lm-time .key{display:flex;align-items:center;gap:6px;font-weight:400;font-size:11px;color:var(--ink3)}
.lm-time .key b{display:block;width:64px;height:6px;background:linear-gradient(90deg,#a6dcf5,#55b4ea,#1f78c8,#f2d64b,#ef8a2c,#d8341c)}
.lm-count{right:52px;bottom:30px;gap:14px;padding:6px 12px;font:500 11.5px var(--mono);color:var(--ink2)}
.lm-count b{color:var(--ink);font-weight:600}
body.wallpage footer.foot{margin-top:0;padding-top:10px;padding-bottom:12px}
.wall .maplibregl-popup-content{background:var(--paper);color:var(--ink);border:1px solid var(--rule2);border-radius:0;font-size:12px;line-height:1.4;padding:10px 12px}
.wall .maplibregl-popup-tip{display:none}
.wall .lm-pop b{display:block;font-size:13px}
.wall .lm-pop small{display:block;margin-top:2px;color:var(--ink2);font-size:12px}
.wall .lm-pop small.em{color:var(--warn)}
.wall .lm-pop img{display:block;margin-top:8px;max-width:100%;height:auto;background:var(--paper)}
.wall .maplibregl-ctrl-group{background:color-mix(in srgb,var(--surface) 88%,transparent);border:1px solid var(--rule2);border-radius:0}
.wall .maplibregl-ctrl-group button+button{border-top-color:rgba(255,255,255,.1)}
.wall .maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:invert(.85)}
.wall .maplibregl-ctrl-bottom-right{bottom:22px}
.wall .maplibregl-ctrl-scale{background:rgba(255,255,255,.85);color:#0E1116;border-color:#0E1116}
@media (max-width:1279px){.ow{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 340px}
  .ow,.ow:not(.has-warn),.ow:not(.has-warn):not(.has-rows),.ow.has-warn:not(.has-rows){grid-template-rows:auto 560px;grid-template-areas:"band band band" "map map side" "warn warn side" "topics topics side" "rows rows side" "cams cams events"}}
@media (max-width:599px){.wrap.county.wall{padding:8px 10px 20px}
  .ow,.ow:not(.has-warn),.ow:not(.has-warn):not(.has-rows),.ow.has-warn:not(.has-rows){display:flex;flex-direction:column;gap:8px}
  .ow-band{display:block;padding:12px}.ow-band .chd h1.t{font-size:28px}.ow-band .summary{margin:8px 0}.ow-band .figs{flex-wrap:wrap;gap:12px 20px;margin:8px 0}
  .ow-map{height:480px;flex:none}
  .lm-layers{max-width:calc(100% - 20px)}.lm-layers button{padding:4px 7px;min-height:26px;font-size:11px}.lm-base{top:auto;bottom:74px;right:10px}
  .lm-time{max-width:calc(100% - 20px);right:10px}.lm-time .key{display:none}.lm-count{display:none}
  .ow-cams .camgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* U21 (Van, 2026-10-21, D61) the county wall A, for every reader: the band; the map panels (radar always the big one, the
   panels without data left out and the rest reflowing); the side column (warnings and alerts, river gauges, the neighbours,
   the four weeks, what we can't see); below, every other section. Square (D45). */
.owa{display:grid;gap:10px;grid-template-columns:minmax(0,1fr) 400px;grid-template-areas:"band band" "maps side" "below side";align-items:start}
.owa .ow-band{grid-area:band}
.ow-live{display:flex;flex-direction:column;align-items:flex-end;gap:6px;font:500 12px var(--mono);color:var(--ink3);white-space:nowrap}
.ow-live .dot{display:inline-flex;align-items:center;gap:6px;color:#2FBF71;font:600 12px var(--sans)}
.ow-live .dot::before{content:"";width:7px;height:7px;background:#2FBF71}
.ow-live b{font:500 17px var(--mono);color:var(--ink)}
.ow-live .lm-base{position:static;background:var(--surface2);border:1px solid var(--rule2)}
.ow-view{display:flex;gap:2px;font:600 12px var(--sans)}
.ow-view a{padding:4px 9px;color:var(--ink3);text-decoration:none;border:1px solid var(--rule2)}
.ow-view a.on{color:var(--ink);background:var(--surface2)}
.ow-band{grid-template-columns:minmax(0,auto) minmax(0,1fr) auto auto}
.ow-maps{grid-area:maps;display:grid;gap:10px;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
.ow-maps.n0{grid-template-columns:1fr;grid-template-rows:600px}
.ow-maps.n1{grid-template-rows:560px}
.ow-maps.n2{grid-template-rows:repeat(2,330px)}
.ow-maps.n3{grid-template-rows:repeat(3,262px)}
.ow-maps .ow-radar{grid-row:1/-1}
.ow-maps .owb{overflow:hidden}
.ow-maps .owh .r{margin-left:auto;font:500 11.5px var(--mono);color:var(--ink2);white-space:nowrap}
.ow-maps .lm-time{left:10px;right:52px;bottom:30px;max-width:520px}
.ow-side{grid-area:side;display:flex;flex-direction:column;gap:10px;min-width:0}
.ow-side .ow-list .owb{max-height:330px;overflow:auto}
.ow-side .ow-around .owb{padding:10px 12px}
.ow-side .blk{margin:0 0 14px;padding:0;border:0}
.ow-alerts,.ow-gauges{list-style:none;margin:0;padding:0}
.ow-alerts li{display:grid;gap:2px;padding:9px 13px 9px 15px;border-top:1px solid var(--rule);border-left:4px solid var(--ink3)}
.ow-alerts li:first-child{border-top:0}
.ow-alerts li.w{border-left-color:var(--s3)}.ow-alerts li.a{border-left-color:var(--s2)}.ow-alerts li.y{border-left-color:#D9C24A}
.ow-alerts b{font:700 13px var(--sans);color:var(--ink)}
.ow-alerts .d{font-size:12px;line-height:1.45;color:var(--ink2)}
.ow-alerts .x{font:500 11px var(--mono);color:var(--ink3)}
.ow-gauges li{border-top:1px solid var(--rule)}.ow-gauges li:first-child{border-top:0}
.ow-gauges a{padding:8px 13px;color:inherit;text-decoration:none}
.ow-gauges a:hover{background:var(--hover)}
.ow-gauges .t{font:600 12.5px var(--sans);color:var(--ink);line-height:1.3}
.ow-gauges .d{font-size:11.5px;color:var(--ink3)}
.ow-gauges b{font:600 14px var(--mono);color:var(--water)}
.ow-empty{margin:0;padding:12px 13px;font-size:12.5px;color:var(--ink2)}
.ow-below{grid-area:below;display:flex;flex-direction:column;gap:10px;min-width:0}
.ow-below .ow-warn .owb,.ow-below .ow-topics .owb,.ow-below .ow-rows .owb{padding:4px 12px 10px}
.ow-below .ow-topics section.topics{margin:0;border:0;padding:0}.ow-below .ow-topics section.topics>.secth{display:none}
.ow-below .ow-cams .owb,.ow-below .ow-events .owb{padding:8px 12px}
.ow-below section.ccams,.ow-below section.cevents{margin:0;padding:0;border:0}
.ow-below .camgrid{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1279px){.owa{grid-template-columns:minmax(0,1fr) 340px}.ow-maps{grid-template-columns:1fr}.ow-maps.n1,.ow-maps.n2,.ow-maps.n3{grid-template-rows:auto}
  .ow-maps .ow-radar{grid-row:auto;height:440px}.ow-maps .owp:not(.ow-radar){height:320px}}
@media (max-width:599px){.owa{display:flex;flex-direction:column;align-items:stretch}.ow-live{align-items:flex-start}.ow-maps .ow-radar{height:440px}.ow-maps .owp:not(.ow-radar){height:300px}
  .ow-maps .lm-time .key{display:none}.ow-below .camgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.owa .owb .lv-map{position:absolute;inset:0;background:#262D38}
.owa .ow-band .summary{grid-column:1/-1;grid-row:3;max-width:none}
.ow-gauges a{display:flex;align-items:center;gap:10px}
.ow-gauges .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ow-gauges b{flex:none}
/* U22 the home county control: quiet, in the day line */
.daynav .homeset{display:inline-flex;align-items:center;gap:6px;color:var(--ink3);font-size:12.5px}
.daynav .homeset b{color:var(--ink2);font-weight:600}
.daynav form.home{display:inline;margin:0}
/* D85: "Alert me about …", the alert sign-up, compact beside the day links and under a state's heading; a full touch
   target on a phone. */
.btn.getalerts{height:32px;padding:0 12px;font-size:13px;gap:6px;white-space:nowrap}
.btn.getalerts:hover{color:var(--accent-ink);filter:brightness(1.08)}
.alerts-row{margin:10px 0 0}
@media (max-width:700px){.btn.getalerts{height:auto;min-height:44px}}
.daynav form.home button{background:none;border:0;padding:0;font:inherit;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.owa .ow-band{grid-template-columns:minmax(0,1fr) auto auto}
.owa .ow-band .chd{min-width:0}.owa .ow-band .daynav{flex-wrap:wrap;row-gap:4px}
/* Van, 2026-10-21: a camera opens outside the map, in a viewer over the page (livemap.mjs openCamera); on the map only a
   ring on the chosen one, and on hover only its name */
dialog.lm-cam{width:min(960px,92vw);max-height:92vh;padding:0;border:1px solid var(--rule2);background:var(--surface);color:var(--ink);overflow:auto}
dialog.lm-cam::backdrop{background:rgba(10,13,19,.74)}
dialog.lm-cam .bar{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--rule)}
dialog.lm-cam .bar b{font:700 15px var(--sans);flex:1;min-width:0}
dialog.lm-cam .x{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--rule2);background:var(--surface2);color:var(--ink);font-size:20px;line-height:1;cursor:pointer}
dialog.lm-cam .x:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
dialog.lm-cam .img{background:var(--surface);padding:14px;min-height:200px;display:grid;place-items:center}
/* PM, 2026-10-21: the still in a dark frame, so an owner's white "no feed" image does not blaze on the dark page (no placeholder detection: Van, 10-14) */
dialog.lm-cam img{display:block;max-width:100%;max-height:64vh;width:auto;height:auto;object-fit:contain;border:1px solid var(--rule2);background:var(--surface2)}
dialog.lm-cam .down{margin:0;padding:40px 14px;color:var(--ink2)}
dialog.lm-cam .meta{margin:0;padding:9px 14px 12px;font-size:12.5px;color:var(--ink2)}
.wall .maplibregl-popup.lm-tip .maplibregl-popup-content{padding:4px 8px;font-size:12px;font-weight:600}
/* U20 scrollbars on dark (Van picked 5 + 7, 2026-10-21; shell.js draws them): the timeline rail, a 1 px line with a 9 px
   dot where you are, and the "12 of 48" chip while you scroll or hover. The native bar is hidden on these lists only. */
#list[data-sb],.rowsbox[data-sb],.ow-side .owb[data-sb],.cmd .col[data-sb],.vfold .vers[data-sb],.cmd .tl .more ul[data-sb]{scrollbar-width:none}
#list[data-sb]::-webkit-scrollbar,.rowsbox[data-sb]::-webkit-scrollbar,.ow-side .owb[data-sb]::-webkit-scrollbar,.cmd .col[data-sb]::-webkit-scrollbar,.vfold .vers[data-sb]::-webkit-scrollbar,.cmd .tl .more ul[data-sb]::-webkit-scrollbar{display:none}
.sb-host{position:relative}
.sb-rail{position:absolute;width:16px;z-index:3;cursor:pointer}
.sb-rail[hidden],.sb-chip[hidden]{display:none}
.sb-rail::before{content:"";position:absolute;right:7px;top:0;bottom:0;width:1px;background:var(--rule2);transition:background .2s}
.sb-rail.on::before{background:var(--hatch)}
.sb-dot{position:absolute;right:3px;width:9px;height:9px;border-radius:50%;background:var(--ink3);border:2px solid var(--surface);cursor:grab;transition:background .2s,transform .2s}
.sb-dot:active{cursor:grabbing}
.sb-rail.on .sb-dot{background:var(--accent);transform:scale(1.15)}
.sb-chip{position:absolute;z-index:3;font:500 11.5px/1.3 var(--mono);color:var(--ink);background:color-mix(in srgb,var(--paper) 92%,transparent);border:1px solid var(--rule2);padding:3px 8px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .25s}
.sb-chip.on{opacity:1}
@media (prefers-reduced-motion:reduce){.sb-rail::before,.sb-dot,.sb-chip{transition:none}.sb-rail.on .sb-dot{transform:none}}
/* a finger is never taken (P4.7): on a touch screen the rail only shows where you are; the finger scrolls the list */
@media (pointer:coarse){.sb-rail{pointer-events:none}}
/* D61 (Van, 2026-10-21): every map and data credit in one box at the foot of the wall's right column, a source a line */
.lv-credits{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 12px;margin:0;font-size:12px;line-height:1.45;color:var(--ink2)}
.lv-credits dt{color:var(--ink3);font-weight:600}
.lv-credits dd{margin:0}
.lv-credits a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.wall-b .ow-credits .lv-credits{margin-top:6px}
/* 0.9.69: a gauge's 3-hour trend beside its level (092), and NWS's gauge page link on its row */
.ow-gauges i.tr{font-style:normal;margin-right:5px;color:var(--ink3)}
.ow-gauges i.tr-rising{color:var(--accent)}
.rivers .fc a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* D63 (Van, 2026-10-22): a map card's expand control at the right end of its title bar; the card zooms to fill the screen
   (livemap.mjs) and back. Square, quiet, the accent under the pointer; the twin holds the card's place in the grid. */
.owh .ow-x{margin-left:auto;flex:none;align-self:center;display:inline-flex;align-items:center;justify-content:center;width:26px;height:22px;padding:0;background:none;border:1px solid var(--rule2);color:var(--ink2);cursor:pointer}
.owh .r+.ow-x{margin-left:10px}
.owh .ow-x:hover,.owh .ow-x:focus-visible{color:var(--accent);border-color:var(--accent)}
.owh .ow-x:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.owh .ow-x .i-shut,.owh .ow-x[aria-expanded="true"] .i-open{display:none}
.owh .ow-x[aria-expanded="true"] .i-shut{display:inline}
.ow-maps .owp:not(.ow-full) .owh{cursor:zoom-in}
.owp.ow-full{position:fixed;z-index:70;margin:0;border-color:var(--rule2)}
.ow-twin{visibility:hidden}
/* D93: a docked map on a phone (livemap.mjs PHONE, class ow-inert) lets the page have the touch: a vertical swipe scrolls
   the page and a pinch zooms the page, never the map; a tap on its zoom buttons falls through to the map, which opens it.
   Nothing here is visible. */
.lv-map.ow-inert,.lv-map.ow-inert .maplibregl-canvas-container,.lv-map.ow-inert .maplibregl-canvas{touch-action:pan-y pinch-zoom}
.lv-map.ow-inert .maplibregl-control-container,.lv-map.ow-inert .maplibregl-ctrl{pointer-events:none}
.lv-map.ow-inert:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* D96 (Van, 2026-10-23: "let's try the phone map hiding"): a docked card on a phone (class ow-docked, livemap.mjs) hides
   the map's own controls - zoom, the radar's play/time strip, layer and base toggles inside the card - which only work
   open; they return full screen. The card's expand control, the scale and every credit stay. */
.owp.ow-docked .maplibregl-ctrl-group,.owp.ow-docked .lm-time,.owp.ow-docked .lm-layers,.owp.ow-docked .lm-base{display:none}
html.ow-lock{overflow:hidden;scrollbar-gutter:stable}html.ow-lock body{overflow:hidden}
.cmd .tl .more.r ul{margin-left:-90px}

/* ---------- D101: The Archive's photostrip on a county page (archive.ts, archive.js; Design handoff B,
   lane/design 89d414cd). A muted sepia, so a historic record never reads as a status colour. THE APPROVED DISPLAY: every image
   is shown WHOLE, letterboxed in a dark frame (contain, never cover), with no filter or blend. ---------- */
:root{--arch:#B89668;--arch-ink:#D8C3A0}
.arch-fit{display:flex;align-items:center;justify-content:center;background:#07090D;aspect-ratio:1.4;overflow:hidden}
.arch-fit img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.arch-panel{margin-top:16px}
/* the header's count and span: the wall's small right-aligned meta (the maps' .r), not the body's text */
.arch-panel .owh .r{margin-left:auto;font:500 11.5px var(--mono);color:var(--ink2);white-space:nowrap}
.arch-ruler{position:relative;height:34px;margin:12px 18px 4px;border-bottom:1px solid var(--rule2)}
.arch-ruler button{position:absolute;top:0;transform:translateX(-50%);border:0;background:none;padding:0;font:600 11.5px/1 var(--sans);color:var(--ink3);cursor:pointer}
.arch-ruler button:hover{color:var(--arch-ink)}
.arch-ruler i{position:absolute;bottom:-4px;width:2px;height:12px;background:var(--arch);opacity:.6;transform:translateX(-1px)}
.arch-film-wrap{position:relative}
.arch-film{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding:10px 18px 6px;scrollbar-width:thin;scrollbar-color:var(--rule2) transparent}
.arch-fr{flex:0 0 280px;margin:0;scroll-snap-align:start;cursor:zoom-in}
.arch-fr .arch-fit{width:280px;height:200px;aspect-ratio:auto}
.arch-fr:hover .arch-fit,.arch-fr:focus-visible .arch-fit{outline:1px solid var(--arch)}
.arch-fr:focus-visible{outline:none}
.arch-fr figcaption{padding:6px 2px 0;font-size:12.5px;color:var(--ink2)}
.arch-fr figcaption b{color:var(--arch-ink);margin-right:4px}
.arch-fr small{display:block;padding:2px 2px 0;font-size:11px;color:var(--ink3)}
.arch-film-b{position:absolute;top:50%;transform:translateY(-60%);z-index:2;width:34px;height:54px;border:1px solid var(--rule2);background:rgba(10,13,19,.85);color:var(--ink);font-size:22px;cursor:pointer}
.arch-film-b.l{left:0}.arch-film-b.r{right:0}
.arch-foot{padding:4px 18px 12px;margin:0}
/* the photo viewer: the wall's camera viewer (dialog.lm-cam) with a link on its line */
.arch-view .meta a{color:var(--accent);font-weight:600}
.arch-view .bar b{font-family:var(--serif);font-weight:500;font-size:17px}
/* on a phone (D93's width): the strip swipes sideways with the next photo peeking; an up-and-down swipe over it still
   moves the page and it never pulls the page sideways; the ‹ › go; the ruler stays, smaller; the count gets its own
   line; the viewer is full width */
@media (max-width:767px){
  .arch-panel{margin-top:12px}
  .arch-panel .owh{flex-wrap:wrap;row-gap:2px}
  .arch-panel .owh .r{flex-basis:100%;margin-left:0}
  .arch-film{padding:8px 16px 4px;gap:10px;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scroll-padding-left:16px}
  .arch-fr{flex-basis:78vw}
  .arch-fr .arch-fit{width:78vw;height:calc(78vw * .7)}
  .arch-film-b{display:none}
  .arch-ruler{margin:10px 16px 2px;height:30px}
  .arch-ruler button{font-size:10.5px}
  .arch-ruler button.odd{display:none}
  .arch-foot{padding:4px 16px 12px}
  dialog.lm-cam.arch-view{width:100vw;max-width:100vw;max-height:100dvh;margin:auto 0;border-left:0;border-right:0}
  dialog.lm-cam.arch-view .img{padding:8px}
  dialog.lm-cam.arch-view img{max-height:62dvh}
}
/* D101 item 8: the stream's historic record (the apex's US Feed window, the dashboard's list, the phone's Latest): a
   sepia edge and badge, never a status colour; its photos whole and letterboxed, "+N" for more */
.arch-note{box-shadow:inset 3px 0 0 var(--arch)!important;background:linear-gradient(90deg,rgba(184,150,104,.10),transparent 70%)!important}
.item.arch-note{padding-left:12px}
.aw-it .b.archive{background:var(--arch);color:#1A1408;border-color:var(--arch)}
.tag.arch{box-shadow:inset 4px 0 0 var(--arch);color:var(--arch-ink)}
.phone .r .stb.st-arch{background:var(--arch)}
.arch-note-strip{display:flex;gap:4px;align-items:center;margin-top:6px}
.arch-note-strip .arch-fit{height:46px;width:64px;aspect-ratio:auto}
.arch-note-strip .more{font:600 12px/1 var(--sans);color:var(--arch-ink);padding-left:4px}