/* storm-charles.promptugal.news: one stylesheet, no dependencies. Tokens first; the dashboard (app/storm.js) uses the same names. */
:root {
  --paper: #f7f7f5; --surface: #ffffff; --surface-2: #f0f0ec; --ink: #16181d; --ink-2: #4a505c;
  --line: #d9dad6; --line-2: #c4c6c1; --accent: #c8102e; --focus: #1d5fd1; --st-gold: #b7862b;
  --ok: #1d7a46; --ok-soft: #e3f3ea; --bad: #b3261e; --bad-soft: #fbe7e5; --warn: #a15c00; --warn-soft: #fdf0dc;
  --sent: #1d5fd1; --sent-soft: #e5eefc; --wait: #6b6f7a; --warm: #c45a00;
  --red: #c8102e; --orange: #e07000; --yellow: #d9b300;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #0f1115; --surface: #171a20; --surface-2: #1f232b; --ink: #eceef2; --ink-2: #a7adb9;
  --line: #2c313b; --line-2: #3a404c; --accent: #ff4d5e; --focus: #7aa7ff;
  --ok: #5ccf8d; --ok-soft: #12291c; --bad: #ff8a80; --bad-soft: #341614; --warn: #ffb74d; --warn-soft: #2e2210;
  --sent: #7aa7ff; --sent-soft: #142139; --wait: #8b909b; --warm: #ff9a4d;
} }
:root[data-theme="dark"] {
  --paper: #0f1115; --surface: #171a20; --surface-2: #1f232b; --ink: #eceef2; --ink-2: #a7adb9;
  --line: #2c313b; --line-2: #3a404c; --accent: #ff4d5e; --focus: #7aa7ff;
  --ok: #5ccf8d; --ok-soft: #12291c; --bad: #ff8a80; --bad-soft: #341614; --warn: #ffb74d; --warn-soft: #2e2210;
  --sent: #7aa7ff; --sent-soft: #142139; --wait: #8b909b; --warm: #ff9a4d;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 var(--sans); }
a { color: var(--focus); }
img, svg { max-width: 100%; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
header.top { background: var(--ink); color: var(--paper); }
header.top .wrap { display: flex; align-items: center; gap: 12px; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; }
header.top a { color: inherit; text-decoration: none; }
.brand { font-weight: 800; letter-spacing: .02em; }
.brand b { color: var(--accent); }
.live { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 var(--sans); text-transform: uppercase; letter-spacing: .08em; background: var(--accent); color: #fff; padding: 4px 8px; border-radius: 3px; }
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .live::before { animation: none; } }
nav.top { margin-left: auto; display: flex; gap: 14px; font-size: 14px; flex-wrap: wrap; }
.notice { background: var(--warn-soft); color: var(--ink); border-bottom: 1px solid var(--line); font-size: 14px; }
.notice .wrap { padding-top: 8px; padding-bottom: 8px; }
.banner { background: var(--surface); border-bottom: 3px solid var(--accent); }
.banner .wrap { padding-top: 22px; padding-bottom: 18px; }
.kicker { font: 700 13px/1.2 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin: 0 0 6px; }
.banner h1 { font-size: clamp(26px, 4.4vw, 44px); line-height: 1.12; margin: 0 0 10px; }
.banner .src { color: var(--ink-2); font-size: 14px; margin: 0; }
.grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; padding: 22px 0; }
@media (max-width: 860px) { .grid { grid-template-columns: minmax(0, 1fr); } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 16px; min-width: 0; }
.card h2 { font-size: 18px; margin: 0 0 10px; }
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { padding: 10px 0; border-top: 1px solid var(--line); }
.feed li:first-child { border-top: 0; }
.feed time { font: 700 13px/1 var(--mono); color: var(--accent); margin-right: 8px; }
.feed .lbl { font: 600 11px/1 var(--sans); text-transform: uppercase; letter-spacing: .06em; padding: 2px 6px; border-radius: 3px; background: var(--surface-2); color: var(--ink-2); margin-right: 6px; }
.feed .lbl.official { background: var(--ok-soft); color: var(--ok); }
.feed .lbl.signal { background: var(--sent-soft); color: var(--sent); }
.feed .via { display: block; color: var(--ink-2); font-size: 13px; margin-top: 2px; }
.kv { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.kv li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.kv li:first-child { border-top: 0; }
.kv b { text-align: right; }
.lvl { display: inline-block; padding: 1px 7px; border-radius: 3px; font: 700 12px/1.5 var(--sans); text-transform: uppercase; color: #fff; }
.lvl.red { background: var(--red); } .lvl.orange { background: var(--orange); } .lvl.yellow { background: var(--yellow); color: #111; }
main.doc { padding: 22px 0 40px; }
.doc article { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 20px; }
.doc table { border-collapse: collapse; width: 100%; font-size: 14px; display: block; overflow-x: auto; }
.doc th, .doc td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.doc th { background: var(--surface-2); }
.doc pre { background: var(--surface-2); padding: 12px; overflow-x: auto; border-radius: 6px; font: 13px/1.45 var(--mono); }
.doc code { font-family: var(--mono); font-size: .92em; }
.doc blockquote { margin: 0 0 1em; padding: 4px 14px; border-left: 4px solid var(--line-2); color: var(--ink-2); }
.meta { color: var(--ink-2); font-size: 14px; }
footer.agent { border-top: 1px solid var(--line); color: var(--ink-2); font-size: 13px; }
footer.agent .wrap { padding-top: 14px; padding-bottom: 24px; }
.data-list { columns: 2 280px; font: 13px/1.6 var(--mono); padding-left: 18px; }

/* ---- round 1 (incident.designer@): the home page as the weather presenter. See design/round-1.md ---- */
:root { --rain: #1d5fd1; --hatch: rgba(22,24,29,.16); --on-orange: #111; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --red: #e5324b; --orange: #f08a1c; --yellow: #e6c229; --rain: #7aa7ff; --hatch: rgba(236,238,242,.2); } }
:root[data-theme="dark"] { --red: #e5324b; --orange: #f08a1c; --yellow: #e6c229; --rain: #7aa7ff; --hatch: rgba(236,238,242,.2); }
.banner .stand { margin: 10px 0 0; max-width: 78ch; font-size: 17px; }
.banner .lbl, .feed .lbl { font: 600 11px/1 var(--sans); text-transform: uppercase; letter-spacing: .06em; padding: 3px 6px; border-radius: 3px; background: var(--surface-2); color: var(--ink-2); margin-right: 6px; white-space: nowrap; }
.banner .lbl.official { background: var(--ok-soft); color: var(--ok); }
.prov { color: var(--ink-2); font-size: 12px; white-space: nowrap; }
.prov a { color: inherit; }
.lvl.orange { color: var(--on-orange); }
.lvl.obs { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line-2); }
aside .card + .card { margin-top: 16px; }

.wx-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; padding: 18px 0 0; }
.wx-tile { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--line-2); border-radius: 8px; padding: 12px 14px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wx-tile.t-red { border-top-color: var(--red); } .wx-tile.t-orange { border-top-color: var(--orange); } .wx-tile.t-yellow { border-top-color: var(--yellow); }
.wx-tile p { margin: 0; }
.wx-th { font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wx-state { margin-left: auto; font: 600 12px/1.4 var(--mono); color: var(--ink-2); }
.wx-state.on { color: var(--accent); }
.wx-big { font: 700 22px/1.2 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.wx-big small { display: block; font: 400 14px/1.4 var(--sans); color: var(--ink-2); letter-spacing: 0; }
.wx-pt { font-size: 14px; }
.wx-pt[lang="pt"] { font-style: italic; }
.wx-also { font-size: 13px; color: var(--ink-2); }
.wx-src { margin-top: auto !important; padding-top: 4px; }

.wx-day { margin-top: 16px; padding: 0; }
.wx-head { padding: 14px 16px 6px; }
.wx-head h2 { margin: 0 0 2px; }
.wx-head p { margin: 0; }
.wx-nowtxt { font-family: var(--mono); font-size: 13px; color: var(--accent); }
.wx-scroll { overflow-x: auto; border-top: 1px solid var(--line); }
.wx-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.wx-strip { --lab: 132px; min-width: 980px; }
.wx-row { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr); border-top: 1px solid var(--line); }
.wx-row:first-child { border-top: 0; }
.wx-lab { position: sticky; left: 0; z-index: 3; background: var(--surface); padding: 5px 8px 5px 16px; border-right: 1px solid var(--line-2); font-size: 13px; line-height: 1.25; display: flex; flex-direction: column; justify-content: center; }
.wx-lab i { color: var(--ink-2); font-size: 11.5px; font-style: normal; }
.wx-lab i[lang="pt"] { font-style: italic; }
.wx-track { position: relative; min-height: 34px; background: repeating-linear-gradient(to right, transparent 0, transparent calc(100% / 24 - 1px), var(--line) calc(100% / 24 - 1px), var(--line) calc(100% / 24)); }
.wx-hours .wx-track { display: grid; grid-template-columns: repeat(24, 1fr); min-height: 0; background: none; position: sticky; }
.wx-hours span { font: 600 11px/22px var(--mono); color: var(--ink-2); padding-left: 3px; border-left: 1px solid var(--line-2); margin-left: -1px; }
.wx-group { background: var(--surface-2); }
.wx-group .wx-lab { background: var(--surface-2); text-transform: uppercase; letter-spacing: .06em; font-size: 11px; color: var(--ink-2); }
.wx-group .wx-track { min-height: 0; background: none; padding: 5px 10px; font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }
.wx-group .wx-track span:first-child { position: sticky; left: calc(var(--lab) + 10px); display: inline-block; max-width: min(820px, 100vw - var(--lab) - 28px); }
.wx-bar { position: absolute; top: 4px; bottom: 4px; border-radius: 4px; overflow: hidden; display: flex; align-items: center; padding: 0 7px; font: 500 12.5px/1.15 var(--sans); font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); min-width: 0; }
.wx-bar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx-bar b { font-weight: 800; }
.wx-bar.cut-l { border-top-left-radius: 0; border-bottom-left-radius: 0; } .wx-bar.cut-r { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.wx-bar.w-red { background: var(--red); color: #fff; } .wx-bar.w-orange { background: var(--orange); color: var(--on-orange); } .wx-bar.w-yellow { background: var(--yellow); color: #111; }
.wx-bar[class*=" w-"] b { text-transform: uppercase; letter-spacing: .05em; font-size: 11px; margin-right: 4px; }
.wx-bar.taf { color: var(--ink); background: color-mix(in srgb, var(--ink) calc(var(--k, 0%) * .55 + 7%), var(--surface)); box-shadow: inset 0 0 0 1px var(--line-2); }
.wx-bar.taf i { color: var(--ink-2); font-style: normal; }
.wx-bar.taf.becmg { background-image: repeating-linear-gradient(135deg, var(--hatch) 0 2px, transparent 2px 6px); background-size: var(--tr) 100%; background-repeat: no-repeat; }
.wx-bar.hyp { background: transparent; color: var(--ink); border: 2px dashed var(--accent); box-shadow: none; }
.wx-bar.hyp b { text-transform: uppercase; letter-spacing: .05em; font-size: 11px; color: var(--accent); margin-right: 4px; }
.wx-bar.hyp.ease { border-color: var(--line-2); color: var(--ink-2); }
.wx-cells .wx-track { display: grid; grid-template-columns: repeat(24, 1fr); }
.wx-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3px 0; font: 12.5px/1.15 var(--mono); background: color-mix(in srgb, var(--ink) calc(var(--k, 0%) * .55), transparent); }
.wx-cell b { font-weight: 700; } .wx-cell i { font-style: normal; font-size: 10.5px; color: var(--ink-2); }
.wx-cells.rain .wx-cell { background: color-mix(in srgb, var(--rain) calc(var(--k, 0%) * .5), transparent); }
.wx-now { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--focus); z-index: 2; pointer-events: none; }
.wx-table { padding: 10px 16px 14px; border-top: 1px solid var(--line); font-size: 14px; }
.wx-table summary { cursor: pointer; color: var(--focus); }
.wx-table table { border-collapse: collapse; width: 100%; font-size: 13px; margin: 10px 0; display: block; overflow-x: auto; }
.wx-table th, .wx-table td { border: 1px solid var(--line); padding: 5px 7px; text-align: left; vertical-align: top; }
.wx-table th { background: var(--surface-2); }
.wx-table code { font: 12px/1.4 var(--mono); word-break: break-word; }

.feed li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; }
.feed time { margin: 2px 0 0; }
.feed time small { display: block; font: 400 11px/1.5 var(--sans); color: var(--ink-2); }
.kv.src li { flex-direction: column; gap: 2px; }
@media (max-width: 640px) {
  .wx-strip { --lab: 84px; min-width: 860px; }
  .wx-lab { padding-left: 10px; font-size: 12px; }
  .wx-big { font-size: 20px; }
  .banner .stand { font-size: 16px; }
  nav.top { margin-left: 0; width: 100%; }
}

/* ---- round 2 (incident.designer@): the wind chart (one axis) and where (district by district). design/round-2.md ---- */
.wx-en { font-size: 14px; }
.wx-chart { display: block; width: 100%; min-width: 760px; height: auto; font-family: var(--sans); }
.wx-chart .grid { stroke: var(--line); stroke-width: 1; } .wx-chart .grid.day { stroke: var(--line-2); } .wx-chart .tick { stroke: var(--line-2); }
.wx-chart .ax { fill: var(--ink-2); font-size: 11px; font-family: var(--mono); } .wx-chart .ax.b { font-weight: 700; fill: var(--ink); }
.wx-chart .lab { fill: var(--ink); font-size: 11.5px; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.wx-chart .lab.red { font-weight: 700; }
.wx-chart .warned { fill: var(--red); fill-opacity: .16; } .wx-chart .warned-l { stroke: var(--red); stroke-width: 2; }
.wx-chart .taf line { stroke: var(--ink-2); stroke-width: 2.5; stroke-linecap: butt; } .wx-chart .taf .mean { stroke-width: 1; }
.wx-chart .taf .hit { stroke: transparent; stroke-width: 14; }
.wx-chart .taf.tempo line:not(.hit) { stroke-dasharray: 7 4; } .wx-chart .taf.prob line:not(.hit) { stroke-dasharray: 2 4; }
.wx-chart .obs { fill: none; stroke: var(--focus); stroke-width: 2; stroke-linejoin: round; }
.wx-chart .obs-g { fill: var(--surface); stroke: var(--focus); stroke-width: 2; } .wx-chart .obs-last { fill: var(--focus); stroke: var(--surface); stroke-width: 2; }
.wx-chart .obs-hit { fill: transparent; }
.wx-chart .gnow { stroke: var(--focus); stroke-width: 1.5; stroke-dasharray: 3 3; }
.wx-legend { list-style: none; margin: 0; padding: 10px 16px 14px; border-top: 1px solid var(--line); font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.wx-legend .k { display: inline-block; width: 22px; height: 0; vertical-align: middle; margin: 0 5px 0 0; border-top: 3px solid var(--ink-2); }
.wx-legend .k:not(:first-child) { margin-left: 10px; }
.wx-legend .k.warned { height: 10px; border: 0; border-bottom: 2px solid var(--red); background: color-mix(in srgb, var(--red) 18%, transparent); }
.wx-legend .k.tempo { border-top-style: dashed; } .wx-legend .k.prob { border-top-style: dotted; }
.wx-legend .k.obs { border-top: 2px solid var(--focus); } .wx-legend .k.obsg { width: 9px; height: 9px; border: 2px solid var(--focus); border-radius: 50%; }
.wx-legend .prov { margin-left: 6px; }
.wx-drow .wx-track { min-height: 35px; }
.wx-drow.here .wx-lab { box-shadow: inset 3px 0 0 var(--accent); }
.wx-d { position: absolute; height: 8px; border-radius: 2px; }
.wx-d.w-red { background: var(--red); } .wx-d.w-orange { background: var(--orange); } .wx-d.w-yellow { background: var(--yellow); }
.wx-where .wx-strip { --lab: 168px; }
@media (max-width: 640px) { .wx-where .wx-strip { --lab: 112px; } }

/* ---- round 3 (incident.designer@): the day in phases (phones first). design/round-3.md ---- */
.wx-phases { display: none; padding: 4px 16px 12px; border-top: 1px solid var(--line); }
.wx-phases ol { list-style: none; margin: 0; padding: 0; }
.wx-phases li { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; padding: 9px 0 9px 10px; border-top: 1px solid var(--line); border-left: 5px solid var(--line-2); margin-left: -2px; }
.wx-phases li:first-child { border-top: 0; }
.wx-phases li.p-red { border-left-color: var(--red); } .wx-phases li.p-orange { border-left-color: var(--orange); } .wx-phases li.p-yellow { border-left-color: var(--yellow); }
.wx-phases li.now { background: var(--surface-2); } .wx-phases li.past { opacity: .55; }
.wx-phases li > time { font: 700 15px/1.2 var(--mono); }
.wx-phases li > time small { display: block; font: 400 11.5px/1.5 var(--mono); color: var(--ink-2); }
.wx-phases p { margin: 0; }
.wx-chip { white-space: nowrap; margin-right: 8px; font-size: 14px; line-height: 1.9; }
.wx-ph-taf { font-size: 13px; color: var(--ink-2); }
.wx-phases > .meta { margin-top: 8px; font-size: 12.5px; }
.wx-phases .prov { white-space: normal; }
@media (max-width: 760px) { .wx-phases { display: block; } }
.wx-foot { margin: 16px 0 24px; }
.grid { padding-bottom: 6px; }
.wx-where { margin-top: 0; }

/* ---- round 4 (incident.designer@): document pages, focus, phone density. design/round-4.md, design/README.md ---- */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
a { text-underline-offset: 2px; }
.doc article { font-variant-numeric: tabular-nums; }
.doc article h1 { font-size: clamp(24px, 3.4vw, 34px); line-height: 1.15; margin: .2em 0 .5em; letter-spacing: -.01em; }
.doc article h2 { font-size: 21px; line-height: 1.25; margin: 1.6em 0 .5em; padding-top: .7em; border-top: 1px solid var(--line); }
.doc article h3 { font-size: 17px; margin: 1.3em 0 .4em; }
.doc article > p, .doc article > ul, .doc article > ol, .doc article > blockquote { max-width: 86ch; }
.doc article li { margin: .2em 0; }
.doc tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.doc th { white-space: nowrap; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
.doc td:first-child { font-family: var(--mono); font-size: 13px; }
.doc td code, .doc p code, .doc li code { background: var(--surface-2); padding: 1px 4px; border-radius: 3px; overflow-wrap: anywhere; }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: 1.5em 0; }
@media (max-width: 640px) {
  .doc article { padding: 14px; border-radius: 0; border-left: 0; border-right: 0; margin: 0 -16px; }
  .wx-tiles { gap: 8px; padding-top: 12px; }
  .wx-tile { padding: 9px 12px; gap: 2px; border-top-width: 3px; }
  .wx-tile .wx-big { font-size: 18px; }
  .wx-tile .wx-pt, .wx-tile .wx-en { font-size: 13px; }
  .wx-tile.t-obs .wx-also { display: none; }
}
header.top { background: #16181d; color: #f7f7f5; } /* the masthead stays dark in both themes (it was turning light in dark mode) */

/* ---- round 5 (incident.designer@): the frame (masthead, theme switch), changes strip, feed labels. design/round-5.md ---- */
header.top .wrap { padding-top: 7px; padding-bottom: 7px; gap: 6px 12px; }
nav.top a { padding: 3px 0; opacity: .88; } nav.top a:hover { opacity: 1; text-decoration: underline; }
.theme { font: 600 12px/1 var(--mono); color: inherit; background: transparent; border: 1px solid rgba(247,247,245,.35); border-radius: 3px; padding: 4px 7px; cursor: pointer; }
.theme:hover { border-color: rgba(247,247,245,.8); }
.notice .wrap { padding-top: 6px; padding-bottom: 6px; }
.wx-changes { margin-top: 14px; padding: 9px 14px; border: 1px solid var(--line); border-left: 4px solid var(--focus); border-radius: 6px; background: var(--surface); }
.wx-changes h2 { font: 700 12px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2); margin: 0 0 4px; }
.wx-changes ul { list-style: none; margin: 0 0 4px; padding: 0; font-size: 13.5px; line-height: 1.5; display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 0 22px; }
.wx-changes li { overflow-wrap: anywhere; }
.wx-changes li time { font: 700 12.5px/1 var(--mono); color: var(--focus); margin-right: 4px; }
.wx-changes .prov { white-space: normal; }
.wx-tile .wx-en .prov { white-space: nowrap; }
.feed a.when { text-decoration: none; }
.feed a.when:hover time { text-decoration: underline; }
.lbl.l-fact { background: var(--ok-soft); color: var(--ok); }
.lbl.l-evidence { background: var(--sent-soft); color: var(--sent); }
.lbl.l-hypothesis { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); border: 0; outline: 1px dashed var(--surface); outline-offset: -1px; }
.wx-lab code { font: 400 10.5px/1 var(--mono); color: var(--ink-2); margin-left: 2px; }
@media (max-width: 640px) {
  header.top .wrap { flex-wrap: wrap; }
  .theme { margin-left: auto; }
  nav.top { margin-left: 0; width: 100%; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; gap: 16px; scrollbar-width: none; }
  .wx-changes ul { grid-template-columns: minmax(0, 1fr); }
}
.wx-changes summary { font: 700 12px/1.6 var(--sans); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2); cursor: pointer; }
.wx-changes[open] summary { margin-bottom: 4px; }
@media (max-width: 640px) { .brand { font-size: 15px; } .live { font-size: 11px; padding: 3px 6px; } .theme { padding: 3px 6px; } header.top .wrap { flex-wrap: wrap; } }

/* ---- round 6 (incident.designer@): decisions on the same hours as the warnings. design/round-6.md ---- */
a.wx-bar { text-decoration: none; }
a.wx-bar:hover span { text-decoration: underline; }
.wx-bar.dec { box-shadow: none; }
.wx-bar.dec b { text-transform: uppercase; letter-spacing: .05em; font-size: 10.5px; margin-right: 5px; opacity: .8; }
.wx-bar.dec.d-fact { background: var(--ink); color: var(--paper); }
.wx-bar.dec.d-evidence { background: var(--sent-soft); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--sent); }
.wx-bar.dec.d-hypothesis { background: transparent; color: var(--ink); border: 2px dashed var(--accent); }
.wx-dec .wx-track { min-height: 32px; }
footer.agent a { color: inherit; }

/* ---- round 7 (incident.designer@): status words, three times on a tile, the model rows say what they are. design/round-7.md ---- */
.wx-state b { font-family: var(--sans); text-transform: uppercase; letter-spacing: .06em; font-size: 11px; padding: 2px 5px; border-radius: 3px; background: var(--surface-2); color: var(--ink-2); margin-right: 5px; }
.wx-state.on b { background: var(--accent); color: #fff; }
.wx-times { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12.5px; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 6px !important; margin-top: auto !important; }
.wx-times b { color: var(--ink); font-family: var(--mono); font-weight: 600; }
.wx-times + .wx-src { margin-top: 0 !important; padding-top: 0; }

/* ---- round 8 (incident.designer@): the lede, the changes block trimmed, links to radar and satellite, what we measured. design/round-8.md ---- */
.wx-lede { margin: 8px 0 4px !important; font-size: 16px; line-height: 1.5; max-width: 110ch; }
.wx-lede .prov { white-space: normal; }
.wx-lede .prov::before { content: "["; } .wx-lede .prov::after { content: "]"; }
.wx-changes ul { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.wx-changes details.more { font-size: 13px; margin: 2px 0 4px; }
.wx-changes details.more summary { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--focus); }
@media (max-width: 640px) { .wx-changes ul { grid-template-columns: minmax(0, 1fr); } .wx-lede { font-size: 15px; } }

/* ---- round 9 (incident.designer@): decisions' hours from the data; "hours not stated". design/round-9.md ---- */
.wx-bar.dec i { font-style: normal; font-family: var(--mono); font-size: 11.5px; opacity: .85; margin-right: 6px; }
.wx-bar.dec.d-nohours { background: transparent; color: var(--ink); border: 1.5px dotted var(--ink-2); box-shadow: none; border-radius: 4px; }

/* ---- round 10 (incident.designer@): the nav in five sections; MeteoAlarm's link and disclaimer. design/round-10.md ---- */
header.top .wrap { flex-wrap: wrap; }
.theme { margin-left: auto; }
nav.top { margin-left: 0; width: 100%; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; gap: 0; font-size: 13.5px; scrollbar-width: thin; border-top: 1px solid rgba(247,247,245,.14); padding-top: 5px; }
.navg { display: inline-flex; align-items: baseline; gap: 11px; padding: 0 14px; border-left: 1px solid rgba(247,247,245,.22); }
.navg:first-child { padding-left: 0; border-left: 0; }
.navg b { font: 700 10.5px/1 var(--sans); text-transform: uppercase; letter-spacing: .09em; color: #a7adb9; }
.wx-cap { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); margin: 8px 0 0; max-width: 150ch; }
.wx-cap a, .wx-times a { color: inherit; }
nav.top { font-size: 13px; } .navg { gap: 9px; padding: 0 10px; }
@media (max-width: 640px) { .brand { font-size: 14px; } .theme { font-size: 11px; } }

/* ---- round 11 (incident.designer@): the district grid; the Decided band folds; the footer's small print. design/round-11.md ---- */
footer.agent .cap { display: block; font-size: 11.5px; line-height: 1.45; margin-top: 6px; opacity: .9; }
.wx-fold > summary { display: block; cursor: pointer; border-top: 1px solid var(--line); padding: 7px 16px; font-size: 13px; color: var(--focus); background: var(--surface); }
.wx-fold > summary span { position: sticky; left: 16px; display: inline-block; max-width: min(900px, 100vw - 48px); }
.wx-fold > summary::before { content: "+ "; font-family: var(--mono); } .wx-fold[open] > summary::before { content: "- "; }
.wx-fold > summary::-webkit-details-marker { display: none; }
.wx-gridwrap { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; padding: 12px 16px 16px; border-top: 1px solid var(--line); align-items: start; }
.wx-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.wx-cellmap { border: 1px solid var(--line); border-top: 4px solid var(--line-2); border-radius: 5px; padding: 5px 7px 6px; font-size: 12px; line-height: 1.5; min-height: 64px; background: var(--surface); min-width: 0; }
.wx-cellmap.c-red { border-top-color: var(--red); } .wx-cellmap.c-orange { border-top-color: var(--orange); }
.wx-cellmap.here { outline: 2px solid var(--accent); outline-offset: 1px; }
.wx-cellmap b { display: block; font-size: 13px; line-height: 1.3; margin-bottom: 2px; }
.wx-cellmap code { font: 400 10px/1 var(--mono); color: var(--ink-2); }
.wx-cellmap span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx-cellmap span i { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
.wx-cellmap .lvl { font-size: 10px; padding: 0 4px; }
.wx-cellmap .none { color: var(--ink-2); }
.wx-isles h3 { font-size: 13px; margin: 0 0 6px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.wx-islerow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
@media (max-width: 900px) { .wx-gridwrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .wx-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; } .wx-cellmap { padding: 4px; font-size: 10.5px; min-height: 58px; } .wx-cellmap b { font-size: 11px; } .wx-cellmap span i { display: none; } .wx-cellmap code { display: none; } }
.wx-cellmap > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx-cellmap span.lvl { display: inline-block; overflow: visible; }
.wx-cellmap > span { white-space: normal; overflow: visible; } .wx-cellmap span i { white-space: nowrap; }

/* ---- round 12 (incident.designer@): before and after now in the strips; a shorter first screen; the switch on phones. design/round-12.md ---- */
.wx-past { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--paper) 55%, transparent); pointer-events: none; z-index: 1; }
.wx-hours .wx-past { background: none; }
.wx-hours .wx-track { position: relative; }
.wx-side { position: absolute; top: -1px; font: 600 9.5px/11px var(--sans); font-style: normal; text-transform: uppercase; letter-spacing: .06em; color: var(--focus); background: var(--surface); padding: 0 5px; white-space: nowrap; z-index: 2; }
.wx-hours .wx-track { padding-top: 11px; }
.wx-hours .wx-now { top: 0; }
.banner .wrap { padding-top: 16px; padding-bottom: 14px; }
.banner h1 { font-size: clamp(24px, 3.5vw, 38px); max-width: 30em; }
.banner .stand { font-size: 16px; margin-top: 8px; }
@media (max-width: 640px) { .theme span { display: none; } header.top .wrap { row-gap: 5px; } }