/* The Weather face (incident.weather@web-summit.dinis). Tokens only (design/README.md): no hex colour here.
   IPMA's red, orange and yellow are used only for IPMA's levels, always with the level written.
   Observed: solid --focus. IPMA's automatic forecast: outlined, grey. Our hypothesis: dashed --accent, and it says so. */
main.doc:has(#wx) { padding-top: 0; }
main.doc:has(#wx) > .wrap { max-width: none; padding: 0; }   /* this page pads its own sections (--pad) */
.wxc { --pad: clamp(14px, 2.4vw, 40px); font-family: var(--sans); color: var(--ink); }
.wxc p { margin: 0; }
.wxc h2 { font-size: clamp(20px, 1.5vw + 12px, 28px); margin: 0 0 14px; letter-spacing: -.01em; }
.wxc h2 .meta { display: inline-block; font-weight: 400; font-size: 14px; margin-left: 8px; letter-spacing: 0; }
.wxc h2 .lbl { font-size: 13px; vertical-align: 4px; }
.wxc-hero .wxc-h time span { font-family: var(--sans); font-size: 14px; }
.wxc h3 { font-size: 16px; margin: 0 0 6px; }
.wxc .meta { color: var(--ink-2); font-size: 14px; }
.wxc time, .wxc .wxc-st { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.wxc-st { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.wxc-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.wxc-eyebrow .lbl, .wxc-eyebrow .lvl { letter-spacing: 0; vertical-align: 1px; }
.wxc-arrow { fill: currentColor; vertical-align: -1px; margin-right: 3px; flex: none; }
.wxc svg .i-cloud { fill: color-mix(in srgb, var(--ink-2) 35%, transparent); stroke: var(--ink-2); stroke-width: 1.2; }
.wxc svg .i-drop { stroke: var(--rain); stroke-width: 1.8; stroke-linecap: round; fill: none; }
.wxc svg .i-line { stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; fill: none; }

/* the hero: what is in force now, and the decision */
.wxc-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(16px, 2.5vw, 44px); padding: clamp(18px, 3vw, 44px) var(--pad); background: linear-gradient(160deg, color-mix(in srgb, var(--focus) 16%, var(--surface)), var(--surface) 62%); border-bottom: 1px solid var(--line); border-top: 6px solid var(--line-2); }
.wxc-hero.h-red { border-top-color: var(--red); } .wxc-hero.h-orange { border-top-color: var(--orange); } .wxc-hero.h-yellow { border-top-color: var(--yellow); }
.wxc-hero .kicker { margin: 0 0 6px; }
.wxc-hero .wxc-h { font-size: clamp(30px, 3.6vw + 10px, 64px); line-height: 1.02; margin: 0 0 18px; letter-spacing: -.025em; }
.wxc-hero .wxc-h time { display: block; font: 500 clamp(15px, .6vw + 12px, 20px)/1.4 var(--mono); letter-spacing: 0; color: var(--ink-2); margin-top: 8px; }
.wxc-hero .wxc-h .meta { font-weight: 400; letter-spacing: 0; }
.wxc-sub { font-size: 13px !important; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); margin: 16px 0 8px !important; }
.wxc-ws { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.wxc-w { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-left: 8px solid var(--line-2); border-radius: 8px; padding: 10px 14px; }
.wxc-w.w-red { border-left-color: var(--red); } .wxc-w.w-orange { border-left-color: var(--orange); } .wxc-w.w-yellow { border-left-color: var(--yellow); }
.wxc-w-i { color: var(--ink-2); padding-top: 2px; }
.wxc-w-h { font-size: clamp(17px, .5vw + 14px, 22px); line-height: 1.3; }
.wxc-w-h .lvl { font-size: 13px; vertical-align: 2px; }
.wxc-w-t { font-size: 14px; margin-top: 2px !important; }
.wxc-ws.next .wxc-w { background: color-mix(in srgb, var(--surface) 60%, transparent); }
.wxc-ws.next .wxc-w-h { font-size: 16px; }
.wxc-hero-side { display: grid; gap: 14px; align-content: start; }
.wxc-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wxc-tiles.three { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 12px; }
.wxc-tile { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wxc-big { font-size: clamp(28px, 1.6vw + 16px, 44px); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.wxc-big small { font-size: 14px; font-weight: 500; color: var(--ink-2); margin-left: 4px; letter-spacing: 0; }
.wxc-big .wxc-arrow { width: .55em; height: .55em; color: var(--focus); margin-right: 6px; }
.wxc-tile .meta { font-size: 13px; }
.wxc-decision { background: var(--ink); color: var(--paper); border-radius: 8px; padding: 14px 16px; display: grid; gap: 6px; }
.wxc-decision .wxc-eyebrow, .wxc-decision .prov, .wxc-decision .prov a { color: color-mix(in srgb, var(--paper) 72%, var(--ink)); }
.wxc-dtext { font-size: clamp(17px, .6vw + 13px, 22px); font-weight: 600; line-height: 1.3; }
.wxc-decision.flat { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--ink); margin-bottom: 12px; }
.wxc-decision.flat .wxc-eyebrow, .wxc-decision.flat .prov, .wxc-decision.flat .prov a { color: var(--ink-2); }
.wxc-decision.flat .wxc-dtext { font-size: 17px; font-weight: 500; }

/* sections */
.wxc-sec { padding: clamp(18px, 2.4vw, 34px) var(--pad); border-bottom: 1px solid var(--line); min-width: 0; }
.wxc-pair { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.wxc-pair > .wxc-sec + .wxc-sec { border-left: 1px solid var(--line); }
.wxc-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.wxc-pair .wxc-two.wide { grid-template-columns: 1fr; }
.wxc-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 0; }
.wxc-list > li { padding: 9px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.4; }
.wxc-list.tight > li { padding: 4px 0; border: 0; }
.wxc-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px 28px; margin-bottom: 12px; }
.wxc-col h3 { padding-top: 8px; border-top: 4px solid var(--line-2); }
.wxc-col.c-off h3 { border-top-color: var(--ink); } .wxc-col.c-on h3 { border-top-color: var(--focus); }
.wxc-col.c-lim h3 { border-top: 4px double var(--ink-2); } .wxc-col.c-open h3 { border-top-style: dotted; }
.wxc-col h3 .meta { font-weight: 400; }

/* today, hour by hour */
.wxc-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.wxc-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.wxc-grid { min-width: 1120px; }
.wxc-row { display: grid; grid-template-columns: 172px repeat(24, minmax(38px, 1fr)); border-top: 1px solid var(--line); align-items: stretch; }
.wxc-row:first-child { border-top: 0; }
.wxc-lab { position: sticky; left: 0; z-index: 2; background: var(--surface); padding: 8px 10px; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.wxc-lab b { font-size: 14px; display: flex; align-items: center; gap: 6px; }
.wxc-lab b svg { width: 18px; height: 18px; color: var(--ink-2); }
.wxc-lab i { font-style: normal; font-size: 11px; color: var(--ink-2); line-height: 1.25; }
.wxc-c { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1px; padding: 6px 1px; font-size: 13px; font-variant-numeric: tabular-nums; border-left: 1px solid color-mix(in srgb, var(--line) 55%, transparent); min-width: 0; }
.wxc-c b { font-weight: 600; } .wxc-c i { font-style: normal; font-size: 10px; color: var(--ink-2); }
.wxc-c .wxc-arrow { margin: 0; color: var(--ink-2); }
.wxc-c.now { background: color-mix(in srgb, var(--focus) 12%, transparent); box-shadow: inset 2px 0 0 var(--focus); }
.wxc-head .wxc-c { font-family: var(--mono); padding: 7px 1px; color: var(--ink-2); }
.wxc-head .wxc-c.now b, .wxc-head .wxc-c.now i { color: var(--focus); font-weight: 700; }
.wxc-c.obs b { color: var(--ink); }
.wxc-c.auto { color: var(--ink-2); background-image: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--ink-2) 7%, transparent) 5px 6px); }
.wxc-c.auto b { font-weight: 400; }
.wxc-c.quiet i { font-size: 10px; }
.wxc-bar { display: block; width: 62%; max-width: 26px; border-radius: 3px 3px 0 0; background: var(--rain); }
.wxc-bar.auto { background: transparent; border: 1.5px solid var(--ink-2); border-bottom: 0; }
.wxc-rain .wxc-c { min-height: 70px; }
.wxc-warn { grid-template-rows: 40px; }
.wxc-warn > * { grid-row: 1; }
.wxc-warn .wxc-c.bg { padding: 0; }
.wxc-band { z-index: 1; margin: 5px 1px; border-radius: 5px; display: flex; align-items: center; gap: 6px; padding: 0 8px; font-size: 13px; overflow: hidden; white-space: nowrap; color: var(--paper); }
.wxc-band b { text-transform: uppercase; font-size: 12px; letter-spacing: .04em; }
.wxc-band span { font-family: var(--mono); font-size: 12px; }
.wxc-band.w-red { background: var(--red); color: var(--on-red); } .wxc-band.w-orange { background: var(--orange); color: var(--on-orange); } .wxc-band.w-yellow { background: var(--yellow); color: var(--on-orange); }
.wxc-band.ended { opacity: .55; }
/* earlier today, from IPMA's messages we kept: IPMA's colour, faded and outlined, the level written; a tick where a message replaced another */
.wxc-rec, .wxc-rec.wxc-warn { grid-template-rows: 36px; } .wxc-rec .wxc-lab { line-height: 1.15; } .wxc-rec .wxc-lab b { font-size: 12px; font-weight: 600; } .wxc-rec .wxc-lab i { font-size: 10px; }
.wxc-band.rec { opacity: .45; margin: 4px 1px; font-size: 11px; } .wxc-band.rec b { font-size: 10px; }
.wxc-mark { position: relative; z-index: 2; } .wxc-mark i { position: absolute; top: 2px; bottom: 2px; width: 0; border-left: 2px dashed var(--ink); }
.wxc-mark .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wxc-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 10px 0; padding: 0; font-size: 13px; color: var(--ink-2); }
.wxc-legend .k { display: inline-block; width: 22px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.k-warn { background: linear-gradient(90deg, var(--yellow) 0 33%, var(--orange) 33% 66%, var(--red) 66%); }
.k-obs { background: var(--rain); }
.k-auto { border: 1.5px solid var(--ink-2); background-image: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, var(--ink-2) 25%, transparent) 4px 5px); }
.wxc-note { background: var(--surface-2); border-radius: 8px; padding: 10px 14px; font-size: 14px; line-height: 1.5; max-width: 110ch; margin: 0 0 10px !important; }

/* a hypothesis never looks like a fact: dashed, and it says so */
.wxc-hyp { background: color-mix(in srgb, var(--accent) 4%, var(--paper)); }
.wxc-sec.wxc-hyp { border: 2px dashed var(--accent); margin: clamp(14px, 2vw, 28px) var(--pad); border-radius: 10px; padding: 16px 18px; }
.wxc-hyp-say { font-size: 14px; color: var(--ink-2); margin-bottom: 10px !important; max-width: 100ch; }
.wxc-hyp-line { font-size: clamp(16px, .4vw + 14px, 19px); line-height: 1.45; margin-bottom: 8px !important; max-width: 100ch; font-style: italic; }
.wxc-hyp details { margin: 6px 0 10px; font-size: 14px; }
.wxc-hyp summary { cursor: pointer; color: var(--focus); }
.wxc-hyp ul { margin: 4px 0; padding-left: 18px; }
.wxc-hyp.inline { border: 2px dashed var(--accent); border-radius: 8px; padding: 10px 14px; font-size: 15px; line-height: 1.5; }

/* Madeira: horizontal bars */
.wxc-hbars { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 7px; }
.wxc-hbars li { display: grid; grid-template-columns: minmax(90px, 150px) minmax(60px, 1fr) minmax(0, 200px); gap: 10px; align-items: center; font-size: 14px; }
.wxc-hb-t { background: var(--surface-2); border-radius: 3px; height: 16px; }
.wxc-hb { display: block; height: 100%; background: var(--rain); border-radius: 3px; min-width: 2px; }
.wxc-hb-v { font-variant-numeric: tabular-nums; }
.wxc-two > div { min-width: 0; }
.wxc-hb-v i { font-style: normal; font-size: 12px; color: var(--ink-2); font-family: var(--mono); display: block; }

/* the last changes */
.wxc-feed { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 0 32px; }
.wxc-feed li { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.45; }
.wxc-feed-t { font-family: var(--mono); font-weight: 700; text-decoration: none; color: var(--ink); }
.wxc-foot { padding: 16px var(--pad) 8px; font-size: 14px; color: var(--ink-2); max-width: 120ch; line-height: 1.5; }

@media (max-width: 1100px) { .wxc-pair { grid-template-columns: 1fr; } .wxc-pair > .wxc-sec + .wxc-sec { border-left: 0; } .wxc-pair .wxc-two.wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .wxc-hero { grid-template-columns: 1fr; }
  .wxc-two, .wxc-pair .wxc-two.wide { grid-template-columns: 1fr; }
  .wxc-row { grid-template-columns: 104px repeat(24, 44px); }
  .wxc-grid { min-width: 0; width: max-content; }
  .wxc-warn { grid-template-rows: 50px; } .wxc-band { margin: 9px 1px; } .wxc-rec, .wxc-rec.wxc-warn { grid-template-rows: 48px; } .wxc-band.rec { margin: 12px 1px; }
  .wxc-lab { padding: 6px 8px; } .wxc-lab b { font-size: 13px; } .wxc-lab i { font-size: 10px; }
  .wxc-hbars li { grid-template-columns: 96px minmax(40px, 1fr); } .wxc-hb-v { grid-column: 1 / -1; margin-top: -4px; }
  .wxc-feed li { grid-template-columns: 70px minmax(0, 1fr); }
}
@media (max-width: 420px) { .wxc-tiles { grid-template-columns: 1fr 1fr; gap: 8px; } .wxc-tile { padding: 10px; } .wxc-w { padding: 8px 10px; gap: 8px; } }
@media (max-width: 760px) { .wxc-chart { min-width: 680px; } }
@media print { .wxc-scroll { overflow: visible; } .wxc-grid { min-width: 0; } }

/* the wind chart: one axis; warned in IPMA's colour with the level written; observed solid; automatic forecast grey and dashed */
.wxc-lead { font-size: 17px; margin-bottom: 10px !important; }
.wxc-scroll.plain { border: 0; background: transparent; }
.wxc-chart { display: block; width: 100%; height: auto; max-height: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.wxc-chart .c-grid { stroke: var(--line); stroke-width: 1; }
.wxc-chart .c-tick { fill: var(--ink-2); font: 11px var(--mono); }
.wxc-chart .c-win { opacity: .07; } .wxc-chart .c-win.w-red { fill: var(--red); } .wxc-chart .c-win.w-orange { fill: var(--orange); } .wxc-chart .c-win.w-yellow { fill: var(--yellow); }
.wxc-chart .c-warn { stroke-width: 3; } .wxc-chart .c-warn.more { stroke-width: 1.5; stroke-dasharray: 2 4; }
.wxc-chart .c-warn.w-red { stroke: var(--red); } .wxc-chart .c-warn.w-orange { stroke: var(--orange); } .wxc-chart .c-warn.w-yellow { stroke: var(--yellow); }
.wxc-chart .c-lab { fill: var(--ink); font: 600 12px var(--sans); }
.wxc-chart .c-mean { fill: none; stroke: var(--focus); stroke-width: 2; stroke-linejoin: round; }
.wxc-chart .c-auto { fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 6 5; }
.wxc-chart .c-gust { fill: var(--focus); stroke: var(--surface); stroke-width: 2; }
.wxc-chart .c-now { stroke: var(--focus); stroke-width: 1.5; }
.wxc-chart .c-nowt { fill: var(--focus); font: 700 11px var(--mono); }
.k-warnline { background: var(--red); height: 3px !important; vertical-align: 3px !important; border-radius: 0 !important; }
.k-dot { background: var(--focus); width: 10px !important; height: 10px !important; border-radius: 50% !important; }
.k-line { background: var(--focus); height: 2px !important; vertical-align: 3px !important; }
.k-dash { height: 0 !important; border-top: 2px dashed var(--ink-2); vertical-align: 3px !important; border-radius: 0 !important; }
.wxc-table { margin: 4px 0 10px; font-size: 14px; }
.wxc-table summary { cursor: pointer; color: var(--focus); }
.wxc-table table { border-collapse: collapse; margin-top: 8px; min-width: 520px; }
.wxc-table th, .wxc-table td { text-align: left; padding: 4px 14px 4px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.wxc-chart .c-meanp { fill: var(--surface); stroke: var(--focus); stroke-width: 2; }
.wxc { container-type: inline-size; }
.wxc-pair.even { grid-template-columns: 1fr; }
.wxc-pair.even > .wxc-sec + .wxc-sec { border-left: 0; }
@container (min-width: 1560px) { .wxc-pair.even { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wxc-pair.even > .wxc-sec + .wxc-sec { border-left: 1px solid var(--line); } }
.wxc-chart .c-bar { fill: var(--rain); }
.wxc-chart .c-val { fill: var(--ink); font: 600 11px var(--sans); }
.wxc-chart .c-strip.w-red { fill: var(--red); } .wxc-chart .c-strip.w-orange { fill: var(--orange); } .wxc-chart .c-strip.w-yellow { fill: var(--yellow); }
.wxc-chart .c-striplab { font: 700 12px var(--sans); fill: var(--on-orange); } .wxc-chart .c-striplab.w-red { fill: var(--on-red); }
.wxc-table table + table { margin-top: 14px; }
.wxc-strip3 { background: var(--surface); border: 1px solid var(--line); border-left: 8px solid var(--ink); border-radius: 8px; padding: 10px 14px; display: grid; gap: 4px; margin: 0 0 10px; font-size: 16px; line-height: 1.45; }
.wxc-strip3 b { margin-right: 6px; }
.wxc-st b { color: var(--ink); }
.wxc-list > li:target { background: color-mix(in srgb, var(--focus) 10%, transparent); outline: 2px solid var(--focus); outline-offset: 4px; }
.wxc-pt { display: inline; font-size: 13px; color: var(--ink-2); }
.wxc-pt summary { display: inline; cursor: pointer; color: var(--focus); text-decoration: underline dotted; }
.wxc-pt[open] { display: block; margin-top: 2px; }
.wxc-days { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: -6px 0 6px; padding: 0; font-size: 14px; color: var(--ink-2); }
.wxc-days li { display: flex; align-items: center; gap: 6px; }
@media (max-width: 860px) { .wxc-w-i { display: none; } .wxc-hero .wxc-h { margin-bottom: 12px; } .wxc-sub { margin-top: 10px !important; } }
.wxc-say { font-size: clamp(18px, .9vw + 14px, 26px); line-height: 1.3; margin: -6px 0 14px !important; max-width: 60ch; }
.wxc-where { margin: 0 0 6px !important; }
.wxc-tile.old { opacity: .62; }
.wxc-strip3 small { font: 11px var(--mono); color: var(--ink-2); white-space: nowrap; }
.wxc-rec { margin: -8px 0 12px !important; }
.wxc-sec.wxc-hyp > details > summary { cursor: pointer; color: var(--ink); }
.wxc-sec.wxc-hyp > details > summary h2 { display: inline; margin: 0; font-size: 20px; }
.wxc-sec.wxc-hyp > details[open] > summary { margin-bottom: 12px; }
.wxc-days { margin-top: 0; }

/* round 7 (incident.designer@'s art direction, design/round-32.md): the level is the largest thing; one row of equal tiles; no dark block; about two screens, the rest folds */
.wxc-hero { display: block; border-top: 0; background: var(--paper); padding-top: clamp(12px, 1.6vw, 24px); }
.wxc-top { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.wxc-top .kicker { margin: 0; } .wxc-clock { font: 14px var(--mono); color: var(--ink-2); }
.wxc-level { border-radius: 10px; padding: clamp(14px, 2vw, 28px) clamp(14px, 2.2vw, 32px); background: var(--surface); border: 1px solid var(--line); margin-bottom: 12px; }
.wxc-level.w-red { background: var(--red); color: var(--on-red); border-color: transparent; } .wxc-level.w-orange { background: var(--orange); color: var(--on-orange); border-color: transparent; } .wxc-level.w-yellow { background: var(--yellow); color: var(--on-yellow, var(--on-orange)); border-color: transparent; }
.wxc-hero .wxc-level .wxc-h { margin: 0 0 6px; padding: 0; border: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; font-size: inherit; letter-spacing: 0; line-height: 1; }
.wxc-word { font-size: clamp(54px, 8vw, 132px); font-weight: 800; text-transform: uppercase; letter-spacing: -.03em; line-height: .9; }
.wxc-h1b { font-size: clamp(19px, 1.4vw + 12px, 34px); font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
.wxc-level .wxc-say { margin: 8px 0 0 !important; max-width: none; font-size: clamp(16px, .7vw + 13px, 24px); }
.wxc-days { margin: 0 0 12px; }
.wxc-hero .wxc-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 6px; }
.wxc-hero .wxc-tile { justify-content: flex-start; }
.wxc-hero-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(16px, 2.5vw, 44px); align-items: start; }
.wxc-w-t > .meta { margin-top: 2px; font-size: 13px; }
.wxc-fold { border-bottom: 1px solid var(--line); }
.wxc-fold > summary { cursor: pointer; padding: 16px var(--pad); list-style-position: inside; }
.wxc-fold > summary h2 { display: inline; font-size: clamp(18px, 1vw + 12px, 22px); margin: 0; }
.wxc-fold > summary:hover h2 { text-decoration: underline; }
.wxc-fold > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.wxc-fold > .wxc-sec > h2:first-child, .wxc-fold > .wxc-sec > h2 + .wxc-rec { display: none; }
.wxc-fold > .wxc-sec, .wxc-fold .wxc-pair > .wxc-sec { padding-top: 4px; border-bottom: 0; }
.wxc-fold .wxc-pair .wxc-sec > h2 { font-size: 18px; }
@media (max-width: 860px) {
  .wxc-hero-cols { grid-template-columns: 1fr; }
  .wxc-hero .wxc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .wxc-hero .wxc-tile { padding: 8px 10px; gap: 1px; } .wxc-hero .wxc-tile .meta, .wxc-hero .wxc-tile > p:last-child { display: none; }
  .wxc-hero .wxc-big { font-size: 24px; } .wxc-hero .wxc-eyebrow { font-size: 10px; }
}
.wxc-age { font: 12px var(--mono); color: var(--ink-2); }
.wxc-feed li > div > p:first-child { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 860px) { .wxc-ws.next .wxc-w-t { display: none; } .wxc-ws.next .wxc-w { padding: 6px 10px; } .wxc-ws { gap: 6px; } }
.wxc-band.d-fact { background: var(--ink); color: var(--paper); text-decoration: none; }
.wxc-band.d-evidence { background: var(--surface); color: var(--ink); border: 2px solid var(--ink); text-decoration: none; }
.wxc-band.open { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-style: dotted; }
.wxc-band[href]:hover, .wxc-band[href]:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.wxc-dec .wxc-lab b { font-weight: 600; font-size: 13px; }
.k-dec { background: var(--ink); }
.wxc-dec { grid-template-rows: minmax(40px, auto); }
.wxc-dec .wxc-lab { padding-top: 4px; padding-bottom: 4px; } .wxc-dec .wxc-lab b { line-height: 1.2; }
.wxc-band em { font-style: normal; font-size: 12px; opacity: .85; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wxc-dec .wxc-band { align-self: center; min-height: 28px; }
.wxc-c.warned { box-shadow: inset 0 -4px 0 var(--line-2); } .wxc-c.warned b { font-weight: 700; }
.wxc-c.warned.w-red { box-shadow: inset 0 -4px 0 var(--red); } .wxc-c.warned.w-orange { box-shadow: inset 0 -4px 0 var(--orange); } .wxc-c.warned.w-yellow { box-shadow: inset 0 -4px 0 var(--yellow); }
/* where: dots at label spots, IPMA's colours for IPMA's levels, the level written beside every name */
.wxc-where2 { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 12px 40px; align-items: start; }
.wxc-map { display: block; height: min(560px, 70vh); width: auto; max-width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.wxc-map .c-dot { fill: var(--surface-2); stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 3 3; }
.wxc-map .c-dot.w-red { fill: var(--red); stroke: var(--surface); stroke-dasharray: none; stroke-width: 2; } .wxc-map .c-dot.w-orange { fill: var(--orange); stroke: var(--surface); stroke-dasharray: none; stroke-width: 2; } .wxc-map .c-dot.w-yellow { fill: var(--yellow); stroke: var(--surface); stroke-dasharray: none; stroke-width: 2; }
.wxc-map .here .c-dot { stroke: var(--ink); stroke-width: 3; }
.wxc-map .c-lab { font: 600 13px var(--sans); fill: var(--ink); } .wxc-map .here .c-lab { font-weight: 800; font-size: 15px; }
.wxc-map .c-sub { font: 11px var(--mono); fill: var(--ink-2); text-transform: uppercase; }
.wxc-list.cols { display: block; columns: 2 220px; column-gap: 28px; margin-bottom: 14px; } .wxc-list.cols > li { break-inside: avoid; }
@media (max-width: 860px) { .wxc-where2 { grid-template-columns: 1fr; } .wxc-map { height: auto; width: 100%; max-height: 520px; } }
.wxc-map .c-in { font: 700 11px var(--sans); fill: var(--on-orange); pointer-events: none; } .wxc-map .c-in.w-red { fill: var(--on-red); }
.wxc-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: -4px 0 12px; }
.wxc-switch button { font: 600 14px var(--sans); padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); cursor: pointer; }
.wxc-switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.wxc-switch button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.wxc-gustline { font-size: 15px; line-height: 1.5; margin: 8px 0 !important; }
.wxc-up { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: clamp(16px, .6vw + 13px, 22px); margin: 0 0 12px !important; padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.wxc-up .lvl { font-size: 14px; align-self: center; } .wxc-up > span:not(.lvl) { color: var(--ink-2); font-size: .85em; }
.wxc-c.notyet i { font-size: 9px; line-height: 1.1; text-align: center; opacity: .8; }
/* IPMA's two channels differ: said plainly, under the band; what the open-data feed still lists is outlined, never filled */
.wxc-differ { border: 2px solid var(--ink); border-radius: 8px; background: var(--surface); padding: 10px 14px; margin: 0 0 12px; display: grid; gap: 4px; font-size: 16px; line-height: 1.45; }
.wxc-band.stale { background: var(--surface); color: var(--ink); border: 2px dashed var(--ink-2); }
.wxc-band.stale.w-red { border-color: var(--red); } .wxc-band.stale.w-orange { border-color: var(--orange); } .wxc-band.stale.w-yellow { border-color: var(--yellow); }
.wxc-strip3 i { font-size: 13px; color: var(--ink-2); }

/* the date: long on a desk, short on a phone (round 45, note 9) */
.wxc-ds { display: none; }
@media (max-width: 560px) { .wxc-dl { display: none; } .wxc-ds { display: inline; } }

/* round 45, notes 1, 3, 4: the communiqué in one line under the band; the other warnings in force inside the band; a tile's hour from before the warning began */
.wxc-comm { font-size: 14px; color: var(--ink-2); margin: 0 0 8px !important; display: flex; flex-wrap: wrap; gap: 0 6px; }
.wxc-comm span { font-family: var(--mono); font-size: 13px; }
.wxc-comm a span { font-family: var(--sans); font-size: 14px; font-weight: 600; }
.wxc-summit { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 0 0 12px !important; padding: 8px 14px; border-left: 3px solid var(--ink); background: var(--surface); font-size: 15px; }
.wxc-summit-d { flex: 1 1 32em; } .wxc-summit .prov { white-space: normal; }
.wxc-new { font-weight: 600; white-space: nowrap; }
.wxc-go { display: flex; flex-direction: column; gap: 4px; }
.wxc-ptn { color: var(--ink-2); font-size: 14px; } .wxc-ptn a { font-size: 16px; }
.wxc-meas .old { opacity: .6; }
.wxc-chg { margin: 0 0 8px !important; font-size: 15px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.wxc-chg .lvl { font-size: 12px; }
.wxc-meas { margin: 0 0 12px !important; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; font-size: 15px; }
.wxc-meas b { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.wxc-level .wxc-also { margin: 6px 0 0 !important; font-size: clamp(14px, .4vw + 12px, 18px); }
.wxc-also-l { text-transform: uppercase; font-weight: 700; font-size: .85em; letter-spacing: .04em; border: 1.5px solid currentColor; border-radius: 4px; padding: 0 5px; }
.wxc-pre { display: block; font-family: var(--sans); color: var(--ink); font-weight: 600; }

/* round 45, note 6: a long bar keeps its label in view when the strip is scrolled (the label sticks beside the row's name) */
.wxc-band { overflow: clip; }
.wxc-bl { font-style: normal; position: sticky; left: 173px; display: inline-flex; align-items: center; gap: 6px; flex: none; background: inherit; padding: 0 6px 0 8px; margin-left: -8px; z-index: 1; }
@media (max-width: 860px) { .wxc-bl { left: 105px; } }
/* round 45, note 8: on paper the 24 hours share the page's width */
@media print { .wxc-row { grid-template-columns: 96px repeat(24, minmax(0, 1fr)); } .wxc-grid { width: auto; min-width: 0; } .wxc-c { font-size: 9px; } .wxc-bl { position: static; } }

/* round 45, note 2: the first screen in two parts, so the hour strip can sit between them on a desk */
.wxc-hero-top { border-bottom: 0; padding-bottom: 0; }
.wxc-hero-rest { padding-top: 0; }
@media (min-width: 1100px) { .wxc-hero-rest { padding-top: clamp(12px, 1.6vw, 24px); border-top: 1px solid var(--line); } }

/* the team at work (data/agents/now.json): not weather, so no IPMA colour; ink, lines and links only */
.wxc-team { margin: 24px 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius, 8px); background: var(--surface); }
.wxc-team .wxc-sub { margin-top: 0; }
.wxc-team-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 24px; }
.wxc-team h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); margin: 8px 0 6px; }
.wxc-team ul { list-style: none; margin: 0; padding: 0; }
.wxc-team li { padding: 5px 0; border-top: 1px solid var(--line); font-size: 14.5px; overflow-wrap: anywhere; }
.wxc-team li b { font-family: var(--mono); font-size: 13px; }
.wxc-team code { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }
.wxc-team time { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.wxc-team-more { display: none; margin: 6px 0 0; font-size: 14px; font-weight: 600; }
@media (max-width: 600px) { .wxc-team li:nth-child(n+5) { display: none; } .wxc-team-more { display: block; } }
.wxc-team-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0 !important; font-weight: 600; }
@media (max-width: 600px) { .wxc-team-cols > div:first-child li:nth-child(n+6) { display: none; } }