/* Brace For It V2 design system (brand kit rev 2, Oct 25, 2026). Source of truth: Brand Kit artifact + design/v2/brand.
   Dark "Radar console" is the site theme. Print uses paper. Status = word + shape + pips + source, colour last.
   No status is green: green (--signal) is the brand only. Watch/Warning (solid squares) come only from the NWS. */
@font-face { font-family: "Space Grotesk"; src: url(/assets/fonts/space-grotesk-wght-v1.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url(/assets/fonts/atkinson-hyperlegible-next-wght-v1.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(/assets/fonts/jetbrains-mono-wght-v1.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --bg: #060a0d; --panel: #0b1217; --panel-2: #0e171d; --line: #1c2a33; --edge: #557080;
  --ink: #d7e3ea; --ink-2: #a9bac5; --muted: #8597a3;
  --signal: #46f0a0; --on-signal: #04150c;
  /* six statuses (Brand Director, Oct 25): lightness falls in order in every colour-vision simulation; ours outlined, NWS solid */
  --prep: #eceffe; --headsup: #ffc700; --close: #eca039; --advisory: #dc7716; --watch: #d74c3c; --warning: #ca033a;
  --on-prep: #060a0d; --on-headsup: #060a0d; --on-close: #060a0d; --on-advisory: #060a0d; --on-watch: #060a0d; --on-warning: #ffffff;
  --paper: #f3f1ea; --paper-ink: #14181b;
  /* readiness levels (Oct 28): one blue ramp by lightness for the first three, violet for Fully Braced only. Never a status
     colour. Each level also has its own mark (plan-start.mjs levelMark), so nothing rests on hue. */
  --lvl-0: #6f8db3; --lvl-1: #93b2d9; --lvl-2: #c3d8f2; --braced: #b49bff; --on-braced: #0b0716;
  /* rain bands on the live US radar (W64): one brand hue, dark to white; never a status colour. Words + dBZ carry the meaning. */
  --rain-1: #173c47; --rain-2: #136b57; --rain-3: #22a874; --rain-4: #46f0a0; --rain-5: #c1fbe0; --rain-6: #ffffff;
  --map-land: #0d1820; --map-line: #2a3d49;
  /* materials (tools revamp, Oct 28): real object colours for the code-rendered tool illustrations only. Never meaning, never UI.
     Matte neutrals under overcast daylight; floodwater is murky olive-brown, never the preparedness blue. */
  --m-paint: #9aa6ad; --m-paint-2: #5b6870; --m-paint-3: #3a454c; --m-glass: #141d23; --m-glass-hi: #46596a;
  --m-tire: #121517; --m-tire-2: #2a3034; --m-rim: #b3bbc0; --m-rim-2: #59636a; --m-trim: #1d2327; --m-lamp: #dcd6c2; --m-tail: #6e2b2b;
  --m-road: #20262a; --m-road-2: #15191c; --m-curb: #3a4247;
  --m-water: #5f7a86; --m-water-2: #3e5560; --m-water-3: #24343c; --m-water-hi: #9fb6c0;
  --m-brass: #c29a52; --m-brass-2: #8a6a33; --m-brass-3: #5a4420; --m-steel: #b9c1c6; --m-steel-2: #79838a; --m-steel-3: #4a535a;
  --m-copper: #c07d52; --m-copper-2: #8a5232; --m-copper-3: #5a331f; --m-copper-hi: #e0a57c;
  --m-grip: #8c3b2e; --m-grip-2: #5e241c; --m-iron: #7b4636; --m-iron-2: #4f2a20; --m-gaspipe: #c8b25a; --m-gaspipe-2: #8c7a35;
  --m-panel: #c9cfd2; --m-panel-2: #8f989e; --m-breaker: #1e2326; --m-label: #f1efe6;
  --m-bark: #5d4a3a; --m-bark-2: #3b2e24; --m-bark-3: #261d17; --m-leaf: #5f7353; --m-leaf-2: #3d4e37; --m-leaf-dead: #8b7656; --m-fungus: #c9a46b; --m-soil: #4a3b2c; --m-grass: #4f6145;
  --m-jug: #d9e1e3; --m-jug-2: #9fb0b5; --m-cap: #e9e9e4; --m-can: #a9b1b4; --m-label-a: #b9895a; --m-label-b: #7f8f6a; --m-label-c: #a35f4c; --m-cloth: #5b6a78; --m-kit: #e5e2d8;
  --m-gen: #3e4a42; --m-gen-2: #2a332d; --m-house: #2b353c; --m-house-2: #1b2328; --m-lawn: #24302a; --m-concrete: #3d4549;
  --m-cell: #8a3434; --m-cell-2: #4e1d1f; --m-o2: #c7dde6; --m-co: #c49a62; --m-co-2: #8a6b44;  /* CO: one amber everywhere (the scene, the cell, the clip) */
  --f-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-text: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-data: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --t-xs: 12px; --t-sm: 14px; --t-md: 17px; --t-lg: 21px; --t-h3: 21px;
  --t-h2: clamp(26px, 4vw, 34px); --t-h1: clamp(36px, 6.5vw, 56px); --t-reading: clamp(40px, 9vw, 72px);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --tap: 44px; --wrap: 1160px; --r-sm: 4px; --r-md: 8px; --r-lg: 12px;
  --ease: cubic-bezier(.2, 0, 0, 1); --ease-in: cubic-bezier(.4, 0, 1, 1);
  --d1: 120ms; --d2: 200ms; --d3: 320ms; --d4: 480ms;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body.v2 { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--t-md)/1.55 var(--f-text); }
body.v2::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background-image: linear-gradient(rgba(215,227,234,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(215,227,234,.035) 1px, transparent 1px); background-size: 40px 40px; }
.v2 a { color: var(--signal); text-underline-offset: 3px; }
.v2 :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }
.v2 img, .v2 svg { max-width: 100%; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--signal); color: var(--on-signal); padding: 10px 14px; border-radius: var(--r-md); font-weight: 700; }
.skip:focus { left: 16px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* type */
.v2 h1, .v2 h2, .v2 h3 { font-family: var(--f-display); font-weight: 700; margin: 0; text-wrap: balance; }
.v2 h1, .h1 { font-size: var(--t-h1); line-height: 1.05; letter-spacing: -.02em; }
.v2 h2, .h2 { font-size: var(--t-h2); line-height: 1.15; }
.v2 h3, .h3 { font-size: var(--t-h3); line-height: 1.25; }
.eyebrow { font: 500 var(--t-xs)/1.4 var(--f-data); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lead { font-size: var(--t-lg); line-height: 1.45; color: var(--ink-2); max-width: 62ch; }
.small { font-size: var(--t-sm); color: var(--muted); line-height: 1.45; }
.data, .num { font-family: var(--f-data); font-variant-numeric: tabular-nums; }
.reading { font: 700 var(--t-reading)/1 var(--f-data); }
.prose { max-width: 66ch; }
.prose p { margin: 0 0 var(--s4); }

/* readiness level marks (plan-start.mjs levelMark): shape first, the ramp second */
.lvmark { width: 16px; height: 16px; flex: none; color: var(--lvl-0); }
.lvmark.lv1 { color: var(--lvl-1); } .lvmark.lv2 { color: var(--lvl-2); } .lvmark.lv3 { color: var(--braced); }
.lvmark.big { width: 40px; height: 40px; }

/* layout */
.section { padding-block: var(--s7); }
.stack { display: grid; gap: var(--s4); }
.stack-lg { display: grid; gap: var(--s6); }
.row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.grid-2 { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-3 { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); min-width: 0; }
.panel.inset { background: var(--panel-2); }
.panel.hero { position: relative; }
.panel.hero::before, .panel.hero::after { content: ""; position: absolute; width: 12px; height: 12px; border: 0 solid var(--edge); }
.panel.hero::before { left: -1px; top: -1px; border-left-width: 2px; border-top-width: 2px; border-top-left-radius: var(--r-lg); }
.panel.hero::after { right: -1px; bottom: -1px; border-right-width: 2px; border-bottom-width: 2px; border-bottom-right-radius: var(--r-lg); }
.divider { border: 0; border-top: 1px solid var(--line); margin: var(--s5) 0; }

/* buttons + fields */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 0 20px; border-radius: var(--r-md);
  font: 700 16px/1.2 var(--f-display); text-decoration: none; cursor: pointer; border: 1.5px solid var(--edge); background: transparent; color: var(--ink); }
.btn.primary { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }
.btn.block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.link-btn { background: none; border: 0; padding: 0; min-height: var(--tap); color: var(--signal); font: inherit; text-decoration: underline; cursor: pointer; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 700; }
.field .hint { font-size: var(--t-sm); color: var(--muted); }
.field .err { font-size: var(--t-sm); color: var(--ink); border-left: 3px solid var(--ink); padding-left: 8px; font-weight: 700; }
.v2 input[type=text], .v2 input[type=email], .v2 input[type=tel], .v2 input[type=number], .v2 input:not([type]), .v2 select, .v2 textarea {
  min-height: 48px; width: 100%; padding: 10px 12px; border-radius: var(--r-md); border: 1.5px solid var(--edge); background: var(--panel-2); color: var(--ink); font: 400 var(--t-md) var(--f-text); }
.v2 input.zip, .v2 input.code { font-family: var(--f-data); letter-spacing: .08em; font-size: 20px; }
.check { display: flex; gap: 10px; align-items: flex-start; min-height: var(--tap); padding: 10px 0; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--signal); flex: none; }
.choice { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 12px; width: 100%; text-align: left; border: 1.5px solid var(--edge); border-radius: var(--r-md);
  background: transparent; color: var(--ink); font: 400 var(--t-md) var(--f-text); cursor: pointer; }
.choice[aria-pressed="true"], .choice[aria-checked="true"] { border-color: var(--ink); background: var(--panel-2); font-weight: 700; }
.choice .box { width: 22px; height: 22px; flex: none; border: 2px solid var(--edge); border-radius: 4px; display: grid; place-items: center; font: 700 14px var(--f-data); }
.choice[aria-pressed="true"] .box, .choice[aria-checked="true"] .box { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.choice[aria-pressed="true"] .box::after, .choice[aria-checked="true"] .box::after { content: "✓"; }

/* chips */
.chip { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 var(--f-data); letter-spacing: .04em; padding: 6px 8px; border-radius: var(--r-sm); border: 1px solid var(--edge); color: var(--ink-2); white-space: nowrap; }
.chip.pro { border-style: dashed; }
.chip.life { border-color: var(--ink); color: var(--ink); }
.chip.sample { border-style: dashed; color: var(--muted); }
.chip.partner { border-style: dotted; }

/* ---------- status: word + shape + pips + source; colour last ---------- */
.status { display: inline-flex; align-items: center; gap: 10px; }
.status .ico { width: 28px; height: 28px; flex: none; color: var(--lv); }
.status .word { font: 700 22px/1.1 var(--f-display); }
.status .pips { font: 700 12px/1 var(--f-data); letter-spacing: .14em; color: var(--lv); }
.status .src { font: 500 var(--t-xs)/1.3 var(--f-data); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
[data-level=prep] { --lv: var(--prep); --on-lv: var(--on-prep); }
[data-level=headsup] { --lv: var(--headsup); --on-lv: var(--on-headsup); }
[data-level=close] { --lv: var(--close); --on-lv: var(--on-close); }
[data-level=advisory] { --lv: var(--advisory); --on-lv: var(--on-advisory); }
[data-level=watch] { --lv: var(--watch); --on-lv: var(--on-watch); }
[data-level=warning] { --lv: var(--warning); --on-lv: var(--on-warning); }
/* the band is the only element allowed to use a status fill as background. It swaps, never tweens. */
.band { background: var(--lv, var(--panel)); color: var(--on-lv, var(--ink)); }
.band .wrap { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding-block: 12px; }
.band .ico { color: currentColor; width: 30px; height: 30px; flex: none; }
.band .word { font: 700 clamp(20px, 4vw, 26px)/1.15 var(--f-display); }
.band .src { font: 500 var(--t-xs)/1.3 var(--f-data); letter-spacing: .06em; text-transform: uppercase; opacity: .92; }
.band .pips { margin-left: auto; font: 700 13px/1 var(--f-data); letter-spacing: .14em; }

/* NWS product, shown as issued, on its own paper card */
.nws-card { background: var(--paper); color: var(--paper-ink); border-radius: var(--r-md); padding: var(--s4); font: 400 16px/1.55 var(--f-text); }
.nws-card .from { font: 700 12px/1.4 var(--f-data); letter-spacing: .06em; text-transform: uppercase; color: #3f4a54; margin-bottom: 6px; }
.nws-card a { color: #0b5a3a; }
.nws-card pre { white-space: pre-wrap; font: 400 14px/1.5 var(--f-data); margin: 8px 0 0; }

/* tool explainer: what · why · helps · how, one line each, under or beside the tool */
.explainer { display: grid; gap: 6px; margin: 0; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel-2); font-size: var(--t-sm); color: var(--ink-2); }
.explainer div { display: grid; grid-template-columns: 64px 1fr; gap: 8px; }
.explainer dt { font: 700 var(--t-xs)/1.6 var(--f-data); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.explainer dd { margin: 0; }
/* "Medical supplies" (owner, Oct 30): a reminder, never a checkbox. Nothing about it is saved (nomed.mjs). */
.medrem { margin: var(--s4) 0; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-left: 3px solid var(--edge); border-radius: var(--r-lg); background: var(--panel-2); font-size: var(--t-sm); line-height: 1.5; color: var(--ink-2); }
.medrem .medrem-h { margin: 0 0 4px; font: 700 var(--t-sm)/1.4 var(--f-text); color: var(--ink); }
.medrem p { margin: 0; }
/* one line where a page is at its length budget (/kit-builder): heading and text run together */
.medrem[data-compact] { margin: var(--s1) 0 var(--s2); padding: 6px var(--s3); }
.medrem[data-compact] .medrem-h, .medrem[data-compact] p { display: inline; }
.medrem[data-compact] .medrem-h { margin: 0 6px 0 0; }

/* header */
.site-head { position: sticky; top: 0; z-index: 20; background: rgba(6,10,13,.94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); }
.site-head .wrap { display: flex; align-items: center; gap: var(--s4); min-height: 60px; }
.site-head .logo { display: inline-flex; align-items: center; min-height: var(--tap); }
.site-head .logo img { height: 34px; width: auto; display: block; }
.site-head nav { display: flex; gap: 4px; margin-left: auto; }
.site-head nav a, .site-head .acct, .site-head .share { min-height: var(--tap); display: inline-flex; align-items: center; padding: 0 10px; border-radius: var(--r-md); color: var(--ink); text-decoration: none; font: 700 15px var(--f-display); background: none; border: 0; cursor: pointer; }
.site-head nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; text-decoration-color: var(--signal); }
.site-head .share svg { width: 20px; height: 20px; }
.site-head .share { min-width: var(--tap); justify-content: center; }
@media (max-width: 720px) {
  .site-head nav { display: none; }
  .site-head .acct { margin-left: auto; }
  .site-head .logo img { height: 30px; }
  .v2 .tabbar { display: grid; }   /* .v2 so it beats the base display:none below (phones had no main nav, found Oct 25) */
}
.tabbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; grid-template-columns: repeat(3, 1fr); background: rgba(11,18,23,.97); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); }
.tabbar a { min-height: 56px; display: grid; place-items: center; gap: 2px; padding-top: 6px; color: var(--ink-2); text-decoration: none; font: 700 12px var(--f-display); }
.tabbar a svg { width: 22px; height: 22px; }
.tabbar a[aria-current="page"] { color: var(--ink); }
.tabbar a[aria-current="page"] svg { color: var(--signal); }
/* the Back tab: only in an iPhone home-screen app (standalone, no browser bar, no back gesture to rely on) */
.tabbar .tab-back { display: none; min-height: 56px; place-items: center; gap: 2px; padding: 6px 0 0; border: 0; background: none; color: var(--ink-2); font: 700 12px var(--f-display); cursor: pointer; }
.tabbar .tab-back svg { width: 22px; height: 22px; }
@media (display-mode: standalone) { @supports (-webkit-touch-callout: none) { .tabbar .tab-back { display: grid; } .tabbar { grid-template-columns: repeat(4, 1fr); } } }
@media (max-width: 720px) { body.v2 { padding-bottom: 72px; } html { scroll-padding-bottom: 80px; } }

/* footer */
.site-foot { border-top: 1px solid var(--line); margin-top: var(--s7); padding-block: var(--s6) var(--s7); color: var(--muted); font-size: var(--t-sm); }
.site-foot .wrap { display: grid; gap: var(--s4); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.site-foot nav a { color: var(--ink-2); min-height: var(--tap); display: inline-flex; align-items: center; }
.site-foot .nws-line { color: var(--ink-2); }

/* notices */
.notice { border: 1px solid var(--edge); border-radius: var(--r-md); padding: 12px 14px; color: var(--ink-2); font-size: var(--t-sm); }
.notice.delayed { border-left: 4px solid var(--headsup); }
.empty { border: 1px dashed var(--edge); border-radius: var(--r-md); padding: var(--s5); color: var(--muted); text-align: center; }

/* motion: instruments, not alarms. Nothing blinks or loops on content. */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: v2rise var(--d3) var(--ease) both; }
}
@keyframes v2rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media print {
  body.v2 { background: #fff; color: #111; font-size: 12pt; padding: 0; }
  body.v2::before, .site-head, .tabbar, .site-foot nav, .noprint { display: none !important; }
  .panel { border-color: #bbb; background: #fff; }
  .v2 a { color: #111; }
}

/* Go-live: internal review notes stay on previews only (hidden without JS too) */
[data-compliance] { display: none; }
.is-preview [data-compliance] { display: inline; }

/* Beta bar (Nov 1–30, 2026) and the Beta feedback form (beta.js) */
.beta-bar { background: var(--panel-2); border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.beta-bar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-height: var(--tap); padding-block: 4px; }
.beta-bar a { color: var(--ink); font-weight: 700; display: inline-flex; align-items: center; min-height: var(--tap); }
.beta-tag { font: 700 12px/1 var(--f-data); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); border: 1.5px solid var(--ink-2); border-radius: var(--r-sm); padding: 4px 6px; }
.site-head .beta-tag { margin-left: calc(-1 * var(--s4) + 8px); flex: none; }
.site-head .beta-tag[hidden] { display: none; }
@media (max-width: 560px) { .beta-txt { display: none; } }
.beta-dlg { border: 1px solid var(--edge); border-radius: var(--r-lg); background: var(--panel); color: var(--ink); padding: 0; width: min(520px, calc(100vw - 32px)); }
.beta-dlg::backdrop { background: rgba(0,0,0,.6); }
.beta-dlg form { display: grid; gap: var(--s3); padding: var(--s5); }
.beta-dlg h2 { font-size: var(--t-h3); margin: 0; }
.beta-dlg .opts3 { display: grid; gap: 8px; }
.beta-dlg textarea { width: 100%; min-height: 110px; }
.beta-dlg .row { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; }
.beta-dlg .note { font-size: var(--t-sm); color: var(--muted); margin: 0; }
.beta-dlg .done { font-weight: 700; margin: 0; }
.beta-dlg .choice .box { border-radius: 50%; }