, unmatched by the scroll-margin
selector above) and any browser find-on-page land flush under the bar, not
behind it. Mirrors the 3.25rem→3rem desktop/mobile step the scroll-margin
rules use. Landing-position only — no fold/CLS/paint change. */
html { scroll-padding-top: 3rem; }
/* Hide the redundant section heading immediately above the live card
(apex #weather, city #current-section) — the in-card city pin + page
H1 already announce it. Kept in the a11y tree + SEO, just zero visual
cost at the fold. Visually-hidden (not display:none) preserves the
landmark and the document outline. */
#weather > .section-h,
#current-section > h2 {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px; border: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* Pull the 7-day forecast strip UP into the fold (apex + all 17 city pages).
Rounds 1-9 won the north-star: at 375x667 the temp + condition + both chip
rows clear the fold, with the chips ending ~y436 — leaving ~230px of EMPTY
fold below them before anything else renders. That void is the single
biggest remaining information-scent waste: the next real datum (tomorrow's
forecast) sits below it, pushed down by (a) the card section's fat 2rem
bottom padding and (b) an oversized, full-marketing-weight forecast heading.
Per the priority order (item 1 then 2), the highest-value next move is to
fill that whitespace with the NEXT most valuable LIVE DATA — the forecast
tiles — so the first day cells (Today/Tomorrow hi-lo/rain) peek into the
fold and give the user a reason not to scroll yet.
Three mobile-only edits, all additive, no HTML/JS/ID changes:
1) Close the dead gap between the chips and #forecast: the card section's
trailing padding 2rem -> 0.75rem. */
.weather-section { padding-bottom: 0.75rem; }
/* 2) Zero the forecast section's OWN top padding so its heading couples
tight to the card section above it (apex #forecast.weather-section). */
#forecast.weather-section { padding-top: 0; }
/* 3) Shrink every visible section heading on mobile so the chrome above the
first datum costs far less fold. This reaches BOTH the apex .section-h
(#forecast/#cities/#alerts/#tropical) AND the city pages' bare section
(#forecast-section/#storm-section), which otherwise render at the
UA default ~1.5em with ~0.83em top/bottom margins — a ~56px block of
marketing-weight chrome sitting directly above the forecast tiles. We
do NOT touch #current-section's h2 (already sr-only'd, Round 1) or the
sr-only #weather .section-h. Desktop (>600px) is completely untouched. */
.section-h,
.cities-section h2,
.storm-section h2,
.info h2 {
font-size: 1.05rem; margin-bottom: 0.5rem; padding-bottom: 0.35rem;
}
#forecast-section > h2,
#storm-section > h2 {
font-size: 1.05rem;
margin: 0 0 0.5rem;
line-height: 1.25;
}
/* Force the 17-city overview to a fixed 2-column grid on phones (apex only —
city pages have no #city-grid). The base grid is
repeat(auto-fill, minmax(165px, 1fr)) (L344-348): inside the cities
section's 1.25rem side padding, a 375px viewport leaves ~335px of content
width, and two 165px tracks + the 0.6rem gap need ~340px — just over — so
auto-fill silently collapses the whole grid to ONE column on every phone,
stranding ~half the row width as empty gutter and doubling the scroll
needed to skim all 17 cities (the section's entire job). Pinning it to two
equal columns here packs the chips two-up: each track becomes ~163px (the
chips already render at that width — it's the base minmax floor), the
overview reads in half the vertical run, and the city the user just
highlighted (R2 .is-current) is reachable in far less scroll. Apex-only and
well below the fold, so zero fold/CLS/a11y/ID/JS impact; desktop (>600px,
where auto-fill correctly yields 3-4 columns) is untouched. */
.city-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
/* 17 chips in 2 columns = 9 rows. At ~80px/chip + 0.6rem gaps that's
~800px, but the trailing odd chip leaves the 9th row half-empty, so
reserve a slightly conservative ~720px here (overrides the 340px base
reserve) — enough to absorb the bulk of the first-paint jump without
opening a large empty gap if chips render a touch shorter. */
min-height: 720px;
}
/* Complete the established "data out-weighs the decorative weather glyph"
hierarchy (R9 mobile hero 2.6rem, R31 desktop hero 4rem, R32 forecast
cells) on the LAST surface that still inverts it: the R3 fixed 2-col
mobile 17-city grid, whose entire job is "skim 17 temps fast". The base
rule (L642) gives .cc-emoji 1.3rem vs .cc-temp 1.6rem (L641), so on a
phone the decorative glyph renders ~81% of the temp height AND is flung to
the chip's far-right edge by margin-left:auto — it competes with the temp
for first fixation and the gap between them reads as a layout artifact.
Dropping it to 1.05rem (~66% of the temp) makes the temperature the
unambiguous first fixation down both columns while keeping the glyph
plainly legible as a supporting cue. ZERO CLS / ZERO fold impact: this is
apex-only (city pages have no #city-grid), the grid is far below the fold,
and .cc-temp-row is align-items:baseline with its height driven by the
taller 1.6rem temp — a smaller emoji cannot grow the row. The base 1.3rem
stays for >600px, where chips are wider and 3-4-up with room. margin-left,
line-height, the emoji's aria-hidden, and every element ID are untouched. */
.cc-emoji { font-size: 1.05rem; }
/* Grow the city-picker button to a >=44px touch target on phones WITHOUT
moving it visually (apex only — the city pages' injected #picker-label is a
plain non-interactive label, not this button). The picker is the single
most-used mobile control — it's the only way to change city — yet its base
style (L165-171) is `padding:0` + `font-size:0.72rem`, so its rendered hit
area is just the ~16px line-box: about a third of the 44px minimum (WCAG
2.5.5 / Apple HIG), making the page's primary interaction the hardest to
tap. It also sits in the data card ABOVE THE FOLD, so this is the worst
ergonomics gap hiding behind the prior fold rounds. We enlarge the hit box
with symmetric padding and cancel its layout effect with an equal negative
margin, so the button's visual baseline, the chip row height, and therefore
the hard-won temperature position below it are ALL unchanged (zero added
fold height, zero CLS). inline-flex + align-items:center (base) means
min-height vertically centers the label inside the taller box. The button
is in a position:relative row whose dropdown anchors to top:100% of the
row, not the button, so the larger button does not shift the dropdown.
The negative margin is inset within the card's 1.5rem padding (it sits
0.5rem in on each side), so it cannot collide with the card edge. */
.city-picker-btn {
padding: 0.55rem 0.4rem;
margin: -0.55rem -0.4rem;
min-height: 44px;
}
}
/* ───── Desktop hero/forecast column (apex + all 17 city pages) ─────
Rounds 1-15 poured nearly all effort into the mobile fold; desktop
(>600px) has had essentially zero attention since the original base
styles, and the live-data hero — the page's whole reason to exist —
is the WORST-looking element on a wide screen. Every section shares
one `.container { max-width:1100px }`, so the .primary-card renders
~1050px wide and `.temp-emoji-row { justify-content:space-between }`
(base L174-177) pins the 7rem temp at the far-left edge and the 6rem
emoji ~950px away at the far-right edge with a vast empty gulf between
them. It reads as a layout bug, not a designed hero. The 7-day
forecast strip has the same disease: `repeat(7,1fr)` across ~1050px
makes each day-cell ~150px wide holding tiny centered content,
marooned in whitespace.
Fix (priority 2 — live data reads as the hero; sensible desktop
layout): cap the current-conditions hero and the forecast strip to a
tight ~680px reading column and seat the emoji directly beside the
temperature so temp + emoji form one dense focal unit, with the chip
row and forecast tiles aligned beneath at matching width. This is
desktop-only (min-width:601px), placed AFTER the max-width:600px
mobile block so it never reaches phones, and it touches NO base rule,
NO mobile rule, and NO preserved element ID — so the Rounds 1-10 fold
win cannot regress.
Selectors cover both layouts:
• apex — the card/chips are static HTML inside #weather.weather-section;
the forecast card is static inside #forecast.weather-section.
• city pages — city.js injects the .primary-card + .detail-chips INTO
the #city-current wrapper (so capping that wrapper caps both), and
injects the .forecast-card INTO #forecast (no .weather-section). */
@media (min-width: 601px) {
/* Constrain the live-conditions hero to a readable column instead of a
stretched full-width band, AND center that column. Round 16 capped the
card/chips/forecast to 680px but left them at margin-left:0, so inside the
1100px .container they pinned hard-LEFT with a ~370px dead void down the
entire right side of both the hero and the forecast — the live-data hero
(the page's whole reason to exist) read as a narrow band floating in empty
space, i.e. like a layout bug on any screen wider than ~1024px. Adding
margin-inline:auto centers the column so it reads as a deliberately
composed focal panel at every desktop width.
CRUCIAL cohesion detail: the matching SECTION HEADERS (.section-h, with the
full-width bottom-border separator) must be capped + centered to the SAME
680px so the header rule line shares the card's exact left/right edges. If
only the card centered, its header's separator would still span the full
1100px and start ~185px to the card's left — a worse misalignment than the
void it replaces. Capping the headers too makes header + card + chips +
forecast one clean centered column. Reaches both layouts: apex headers are
#weather/#forecast > h2; city headers are #current-section/#forecast-section
> h2 (the wrapper #city-current / #forecast holds the JS-injected card).
Desktop-only (after the max-width:600px block), no base/mobile rule, no
HTML, no JS, no preserved ID touched — the Rounds 1-10 fold win can't
regress, and on city pages the mobile-sr-only #current-section h2 is
untouched here (this block is >=601px only). */
/* ONE shared content column: cap the SECTION CONTAINERS (not inner cards) so
every section — the hero included — centers to the SAME width and all the
left/right edges align top-to-bottom. Inner cards/chips/forecast then fill
their column. This kills the old bug where the hero spanned ~1100 while the
cards sat in a 680 island ~190px to its right. */
.hero, #weather, #forecast, #cities, #alerts, #tropical,
#current-section, #forecast-section, #storm-section, .info,
.topbar .container {
max-width: 880px;
margin-inline: auto;
}
.primary-card, .detail-chips, .city-current, .forecast-card,
#weather > h2, #forecast > h2, #current-section > h2, #forecast-section > h2 {
max-width: none;
}
/* Current conditions (apex): big card on the LEFT + the 4 detail chips stacked
on the RIGHT, filling the column so the card no longer has an empty right
half. #weather holds .primary-card (#primary-card) + .detail-chips
(#detail-chips) as siblings; the spans the full row above them. */
#weather.weather-section {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
column-gap: 1.5rem; row-gap: 0.9rem; align-items: start;
}
#weather.weather-section > h2 { grid-column: 1 / -1; }
#weather > #primary-card { grid-column: 1; grid-row: 2; margin: 0; }
/* Chips as a 2x2 block that stretches to the card's natural height (no
align-items:stretch on the grid — that blew the card to 485px with an empty
lower half). The card keeps its real height; the chips fill the column. */
#weather > #detail-chips {
grid-column: 2; grid-row: 2; margin: 0; align-self: stretch;
display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0.6rem;
}
#weather > #detail-chips .chip {
display: flex; flex-direction: column; justify-content: center;
}
/* Seat the emoji beside the temperature (was flung to the far-right edge
by the base justify-content:space-between) so they read as one unit. */
.primary-card .temp-emoji-row {
justify-content: flex-start;
gap: 1.75rem;
align-items: center;
}
/* Tame the DESKTOP hero emoji so the temperature is unambiguously the hero —
carrying R9's mobile principle to desktop (apex #emoji.big-emoji + the
.big-emoji city.js injects on all 17 city pages). R9 (L963-977) documented
that an emoji nearly as tall as the temp "reads as a co-equal element
competing for first fixation" and capped it to 2.6rem on mobile, but desktop
was never addressed: the base .big-emoji is clamp(3.5rem,11vw,6rem) and
.big-temp is clamp(4rem,13vw,7rem), so across the whole desktop range the
glyph renders at ~82-86% of the temp height (at >=1100px both hit their caps
-> temp ~112px, emoji ~96px). Worse, the rule just above seats that near-
equal glyph DIRECTLY beside the temp (flex-start + 1.75rem gap + center), so
on the widest, most-composed view the two read as co-focal twins and the
headline number — the site's whole "live data is the hero" mandate — does not
clearly win. Cap the desktop glyph at 4rem (~64px) so the temp's clamped max
(~112px) is ~1.75x taller and the clear first fixation, while the emoji stays
plainly legible as a supporting glyph. The row is align-items:center and its
height is driven by the TALLER temp, so shrinking the emoji causes no row
reflow — zero CLS/fold/height change. Desktop-only (this @media is
min-width:601px); the mobile 2.6rem rule (L977) and the base clamp are
untouched. Pure font-size: no HTML/JS/ID change; ships to all 18 pages from
this one shared edit. */
.big-emoji { font-size: 4rem; }
/* Match the forecast strip to the hero column so its 7 day-cells aren't
marooned in whitespace — aligned, denser, visually tied to the hero. */
#forecast.weather-section .forecast-card,
#forecast > .forecast-card { max-width: none; margin: 0; }
/* ── Extend the centered 680px reading column to the WHOLE page ──
R12/R16 built a tight centered 680px column for the live-data hero +
7-day forecast (and crucially capped THOSE two section-header separators
to 680px so the rule lines share the card's edges, above). But the column
logic stopped there: every section BELOW the forecast — #cities, #alerts,
#tropical, the two .info blocks (apex), and #storm-section + the two
.info/.disclaimer blocks (city pages) — still rendered at the full
~1050px .container content width. Two failures resulted on any screen
wider than ~1024px: (1) HEADER-SEPARATOR DISCONTINUITY — the forecast
header's bottom-border is a centered ~680px rule, then the very next
header's separator is a full ~1050px rule starting ~185px to its left,
and every header further down likewise, so the careful rhythm R12
established broke exactly one section down and the page read as
"designed hero, then unstyled full-width dump." (2) PROSE MEASURE — the
alerts/tropical/info/sources body copy ran edge-to-edge at ~1050px, far
past a comfortable ~65-75ch measure (the design already caps .lede at
720px for exactly this reason, but nothing below the hero did).
Fix: cap + center to the SAME 680px token (a) every remaining section
HEADER so its separator shares the hero column's left/right edges
top-to-bottom, and (b) the prose/panel BODIES (alerts + tropical panels,
the section intro s, and the .info paragraphs/subheads/lists) so all
body copy gets the hero's measure. The one genuinely full-width thing
below the hero — the 17-city GRID, which WANTS its 3-4 columns — is
deliberately EXCLUDED from the cap and pinned back to full width
defensively, so its layout is untouched. The apex #cities header carries
.section-h AND matches `.cities-section h2`; capping that header (not the
grid) is exactly the alignment we want. The city #storm-section/.info
headers are reached by tag within their section. Desktop-only (this whole
block is min-width:601px, placed after the max-width:600px mobile block),
so the Rounds 1-15 above-the-fold mobile win is structurally untouchable;
no base rule, no mobile rule, no JS, no HTML, no preserved element ID is
changed — pure additive CSS that ships to all 18 pages from this one
shared edit. */
/* Body prose stays readable within the column (left-aligned, not re-centered). */
#alerts > p, #tropical > p, #storm-section > p,
.info > p, .info > ul { max-width: 70ch; }
.city-grid { max-width: none; }
}
/* ───── Coastal Bend Outlook card (apex + all 17 city pages) ─────
Additive block, placed AFTER the frozen "ONE shared content column"
@media(min-width:601px) block above — it does NOT modify that locked block.
#outlook ships as a NEW between
#weather and #forecast (apex) / injected before #forecast-section (city pages),
so it inherits the base .weather-section padding. The locked desktop block caps
#weather/#forecast/#cities/etc. to the 880px reading column but does NOT list
#outlook, so on desktop it would otherwise stretch full-width and break the
column rhythm a human just fixed — the desktop rule below realigns it to the
SAME 880px centered column (the prompt's exact additive hint). Uses ONLY the
existing token palette: navy card (#0f172a/#0c1a35), cyan #38bdf8 accent, amber
#f59e0b / red #ef4444 state accents, slate text (#e2e8f0/#cbd5e1/#94a3b8). */
.outlook-card {
background: linear-gradient(135deg, var(--bg-grad-a) 0%, var(--bg-grad-b) 100%);
border: 1px solid rgba(56, 189, 248, 0.22);
border-left: 3px solid var(--accent);
border-radius: 1rem;
padding: 1.25rem 1.4rem;
box-shadow: inset 0 0 0 1px var(--border-2);
}
.outlook-headline {
font-size: 1.12rem; font-weight: 700; color: var(--text-body);
margin: 0 0 0.55rem; line-height: 1.4;
}
.outlook-body { color: var(--text-2); line-height: 1.6; margin: 0 0 0.6rem; max-width: 70ch; }
.outlook-body:empty { display: none; }
/* The work-nudge is the cite-bait job call ("Concrete pour: GOOD — 78°F…"); give
it a faint cyan tint + inset rule so it reads as a distinct callout, not body
prose, while staying on-theme. Collapses cleanly when JS leaves it empty. */
.outlook-worknudge {
color: var(--text-body); font-size: 0.92rem; line-height: 1.5;
margin: 0 0 0.7rem; padding: 0.55rem 0.8rem;
background: rgba(56, 189, 248, 0.06);
border-radius: 0.6rem;
box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.16);
}
.outlook-worknudge:empty { display: none; }
.outlook-foot { font-size: 0.78rem; color: var(--text-muted); margin: 0; line-height: 1.5; }
.outlook-foot strong { color: var(--text-2); }
/* State accents — driven by an active NWS warning / freeze / OSHA high+extreme
heat / strong wind / rain, NOT by per-trade verdicts (a later round). Amber ties
to the brand logo bolt (#f59e0b); red matches the alerts-banner family. */
.outlook-card.is-warn { border-left-color: var(--warn); }
.outlook-card.is-alert { border-left-color: var(--bad); }
/* Dim while the selected city's read is being fetched (mirrors .primary-card.fetching). */
.outlook-card.fetching { opacity: 0.5; transition: opacity 220ms ease; }
/* Realign to the SAME 880px centered reading column as the locked block's
sections, so #outlook shares the hero/forecast left/right edges on desktop. */
@media (min-width: 601px) {
#outlook { max-width: 880px; margin-inline: auto; }
}
/* Windows High Contrast: the card's cyan border + inset shadow are force-stripped
like every other boundary; restore a real border so the Outlook stays a distinct
panel (mirrors the forced-colors block's treatment of .primary-card/.chip). */
@media (forced-colors: active) {
.outlook-card { border: 1px solid CanvasText; }
.outlook-worknudge { border: 1px solid CanvasText; }
}
/* ───── Contractor work-windows grid (R2 — apex + all 17 city pages) ─────
A compact, scannable 4-trade matrix (Concrete · Paint · Roofing · Tree work)
inside #outlook-card, AFTER #outlook-worknudge and BEFORE #outlook-foot, so it
inherits the card's 880px column AND sits above the disclaimer foot (the legal
pairing stays the last thing read). Each cell is the npclocal deep-link for that
trade+city. Verdict-first: the GOOD/CAUTION/NO-GO WORD is the high-contrast
signal, color is a SECONDARY cue (left-border accent), never the only one
(WCAG 1.4.1). Mobile-first 2-col → 4-col ≥601px (matching the column breakpoint).
Additive only; placed after the locked desktop block, touches no preserved ID.
Tokens: navy ground, cyan #38bdf8 default accent, green #22c55e/#86efac (the
universal GOOD/safe signal — the minimal new token, reads cleanly on navy),
amber #f59e0b/#fcd34d, red #ef4444/#fca5a5 — all already in the alerts family. */
.outlook-work { margin: 0 0 0.7rem; }
.outlook-work-h {
font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.1em; color: var(--text-muted); margin: 0 0 0.5rem; line-height: 1.4;
}
.outlook-work-sub { display: block; font-weight: 600; letter-spacing: 0.04em; text-transform: none; color: var(--text-faint); font-size: 0.7rem; margin-top: 0.15rem; }
.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.work-cell {
display: flex; flex-direction: column; gap: 0.25rem;
padding: 0.6rem 0.7rem; border-radius: 0.6rem; text-decoration: none;
background: rgba(148, 163, 184, 0.06);
box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.18);
}
.wc-top { display: flex; align-items: center; gap: 0.4rem; }
.wc-icon { font-size: 0.95rem; line-height: 1; }
.wc-trade { font-weight: 700; font-size: 0.82rem; color: var(--text-body); }
.wc-verdict { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; }
.wc-reason { font-size: 0.78rem; line-height: 1.4; color: var(--text-muted); }
.wc-cta { margin-top: 0.1rem; font-size: 0.72rem; font-weight: 600; color: var(--link); }
/* UNIFORM cards (the different-colored borders confused users). The ONLY status
cue is the colored VERDICT word inside each card — small, consistent, and still
color-blind-safe because the word itself says GOOD / CAUTION / NO-GO. */
.work-cell.wc-good .wc-verdict { color: var(--ok); }
.work-cell.wc-caution .wc-verdict { color: var(--warn); }
.work-cell.wc-no-go .wc-verdict { color: var(--bad); }
.work-cell.wc-na .wc-verdict { color: var(--text-muted); }
.work-cell.wc-na { opacity: 0.85; }
a.work-cell:hover, a.work-cell:focus-visible {
background: rgba(56, 189, 248, 0.10);
outline: 2px solid var(--focus-ring); outline-offset: 1px;
}
@media (min-width: 601px) { .work-grid { grid-template-columns: repeat(4, 1fr); gap: 0.6rem; } }
@media (forced-colors: active) {
.work-cell { border: 1px solid CanvasText; }
}
/* ───── Crew heat & exposure safety panel (R3 — apex + all 17 city pages) ─────
A distinct callout INSIDE #outlook-card, AFTER #outlook-work and BEFORE
#outlook-foot, so the disclaimer stays the last thing read. It inherits the
card's 880px reading column (the card itself is realigned by the additive
#outlook desktop rule above — this block adds NO new layout breakpoint and does
NOT touch the locked "ONE shared content column" block). Faint-cyan ground like
.outlook-worknudge so it reads as its own panel on the navy card. The zone pill
carries the OSHA word in a zone color; color is never the only signal — the
zone WORD is always text, and the panel's full read is spoken via aria-label.
Tokens reuse the alerts/work family: cyan #38bdf8, amber #fcd34d, red #ef4444,
green #86efac, slate text — the High-zone salmon #fca5a5 is already in use by
.work-cell.wc-no-go .wc-verdict, so no genuinely new token is introduced. */
.outlook-heat {
margin: 0 0 0.7rem; padding: 0.6rem 0.8rem;
background: rgba(56, 189, 248, 0.05);
border-radius: 0.6rem;
box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.14);
}
.outlook-heat:empty, .outlook-heat[hidden] { display: none; }
.oh-h {
font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.1em; color: var(--text-muted); margin: 0 0 0.4rem;
display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
}
.oh-ico { font-size: 0.95rem; line-height: 1; }
.oh-zone {
font-weight: 800; letter-spacing: 0.06em; font-size: 0.7rem;
padding: 0.05rem 0.4rem; border-radius: 0.3rem;
}
.oh-lower { color: var(--ok); }
.oh-moderate { color: var(--warn); }
.oh-high { color: var(--bad); }
.oh-extreme { color: var(--text); background: #ef4444; }
.oh-now { color: var(--text-body); font-size: 0.9rem; line-height: 1.5; margin: 0 0 0.35rem; }
.oh-guide { color: var(--text-2); font-size: 0.85rem; line-height: 1.5; margin: 0 0 0.35rem; }
.oh-guide:last-child { margin-bottom: 0; }
.oh-haz {
margin: 0; padding-left: 1.1rem; color: var(--warn);
font-size: 0.82rem; line-height: 1.45;
}
.oh-haz li { margin: 0.1rem 0; }
@media (forced-colors: active) {
.outlook-heat { border: 1px solid CanvasText; }
.oh-extreme { border: 1px solid CanvasText; }
}
/* loading + error states */
.loading {
color: var(--text-muted); font-style: italic; font-size: 0.9rem;
}
.result-error {
color: var(--bad); padding: 0.75rem 1rem; background: rgba(127,29,29,0.3);
border-radius: 0.6rem; box-shadow: inset 0 0 0 1px rgba(248,113,113,0.3);
}
/* ───── No-JS / failed-JS fallback panel (apex + all 17 city pages) ─────
The 18 JS-driven pages depend ENTIRELY on app.js / city.js to swap their
static "Loading conditions… / Loading forecast… / Loading…" placeholders for
live data. Any visitor with JS disabled — OR, more importantly, any case where
the script never executes (a Cloudflare 5xx on the asset, a content-blocker /
corporate proxy stripping it, a future parse error) — was permanently stranded
on frozen italic "Loading…" with no temperature, no explanation, and no path to
the data. A block (the first child of ) renders ONLY when
scripting is off, so it is invisible and weightless for the JS-on majority:
zero fold cost, zero CLS, no a11y-tree node when JS runs, no element-ID/JS
change. It reuses the existing .result-error panel token (.ns-panel below) so
it adds no new visual language, and — by linking weather.gov/crp + tdem.texas.gov
— turns a dead-end into a graceful fallback that honors the site's own
"the .gov sites are authoritative" stance. The wrapper carries .container in the
HTML so it gets the standard side padding on every page without depending on
section context. Defined once → ships to all 18 pages from this one shared file. */
.noscript-fallback { padding-top: 1.5rem; padding-bottom: 0.5rem; }
.noscript-fallback .ns-panel { padding: 1.1rem 1.25rem; }
.noscript-fallback h2 {
margin: 0 0 0.5rem; color: var(--bad); font-size: 1.1rem;
}
.noscript-fallback p { margin: 0 0 0.6rem; color: var(--bad); font-size: 0.95rem; line-height: 1.55; }
.noscript-fallback p:last-child { margin-bottom: 0; }
.noscript-fallback a { color: var(--text); text-decoration: underline; font-weight: 700; }
.noscript-fallback a:hover { color: var(--bad); }
/* ───── Accessibility: skip-to-content link (WCAG 2.4.1 Bypass Blocks, Level A) ─────
The last remaining Level-A gap, on all 18 pages: every page opens with a
position:sticky .topbar (brand home link + attribution link) and, on desktop,
a 5-item .quick-nav — so a keyboard or switch user tabs through 2 (mobile) to
7 (desktop) chrome controls on EVERY page before reaching the live temperature
the whole site exists to surface, and carried no id to target. Sixteen-
plus rounds put the data first VISUALLY; this finally makes FOCUS order honor
the same data-first priority, letting a keyboard user jump straight to the
weather in one keypress (href=#main → the now-id'd, tabindex=-1 ).
It reuses the file's two existing idioms so it adds no new visual language and
zero regression for pointer users: (a) the clip/1px visually-hidden pattern
(same as the mobile sr-only section headings) keeps it OUT of the layout until
focused — it never paints for mouse/touch, costs no fold height, and causes no
CLS; (b) on :focus it animates into the top-left as a solid cyan-on-navy pill
ABOVE the sticky bar (z-index:60 > the topbar's z-index:10) at a >=44px tap
height, carrying the same #38bdf8/#0a1018 theme and the focus-ring glow used
below. :focus (not :focus-visible) so it reliably appears for every keyboard
path. Shared file → ships to the apex + all 17 city pages from one rule. */
.skip-link {
position: absolute;
left: 0.75rem;
top: 0.75rem;
z-index: 60;
/* Hidden until focused: a 1px clipped box that sits in the DOM/a11y tree (so
it's the first tab stop) but paints nothing and reserves no space. */
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
transform: translateY(-150%);
background: var(--accent-fill);
color: var(--on-accent);
font-weight: 800;
font-size: 0.9rem;
letter-spacing: 0.01em;
border-radius: 0.6rem;
text-decoration: none;
box-shadow: 0 4px 16px rgba(2, 6, 23, 0.55), 0 0 0 4px rgba(56, 189, 248, 0.25);
transition: transform 140ms ease;
}
.skip-link:focus {
/* Reveal: restore real size + the comfortable >=44px tap pill and slide it in. */
width: auto;
height: auto;
padding: 0.75rem 1.1rem;
min-height: 44px;
display: inline-flex;
align-items: center;
overflow: visible;
clip: auto;
clip-path: none;
transform: translateY(0);
outline: none;
text-decoration: none;
color: var(--on-accent);
}
@media (prefers-reduced-motion: reduce) {
.skip-link { transition: none; }
}
/* ───── Accessibility: keyboard focus + reduced motion (apex + all 17 city pages) ─────
Priority-4 gap that no prior round touched: across all 18 pages there was
NOT ONE :focus-visible rule and NO prefers-reduced-motion handling. With
the north-star (data above the fold) won in Rounds 1-10, the next-weighted
dimension is accessibility — and the two highest-leverage, lowest-regression
wins are a visible keyboard-focus indicator on EVERY interactive element and
honoring a user's reduced-motion preference. Both are global (not fold-
specific), so they live outside the mobile @media block.
1) FOCUS RING. Several interactive controls suppress their chrome on this
dark theme — .city-picker-btn is `border:none; background:none`, the
.quick-nav/.city-chip/.alerts-banner are styled s — so the UA's thin
default outline is all but invisible against #0a1018, leaving keyboard
and switch users with no idea where focus is (WCAG 2.4.7 failure on every
page). A single :focus-visible rule paints a theme-matched cyan (#38bdf8)
2px outline with a 2px offset on every focusable element. :focus-visible
(not :focus) means MOUSE clicks never show the ring — only keyboard/AT
focus does — so there is zero visual regression for pointer users. The
offset + a faint glow keep it legible on both the dark page bg and the
lighter card/dropdown surfaces. The dropdown's own buttons get the ring
inset so it isn't clipped by the dropdown's `overflow:hidden`. */
:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
border-radius: 4px;
}
a:focus-visible,
.quick-nav a:focus-visible,
.city-chip:focus-visible,
.alerts-banner:focus-visible,
.city-picker-btn:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.25);
}
/* Dropdown buttons sit inside an overflow:hidden container, so an outset ring
would be clipped — inset it instead and lift contrast on the focused row. */
.city-picker-dropdown button:focus-visible {
outline: 2px solid #7dd3fc;
outline-offset: -2px;
background: var(--surface-3);
color: var(--text);
}
/* 2) REDUCED MOTION. Users who set prefers-reduced-motion (vestibular
sensitivity) should not get the smooth-scroll jump on every in-page anchor,
the "Detecting location…" pulse, or the active-tropical pulsing glow.
Neutralize them all: instant scroll, and animations collapsed to a single
static frame (kept at full opacity / no glow so nothing disappears).
They also should not get the .city-chip lift+scale (L592-605) or the
safety-critical .alerts-banner lift (L698-711) — those are positional/scale
transforms on interaction, exactly what WCAG 2.3.3 (Animation from
Interactions) targets, and the skip-link already carries its own
transition:none exemption (L1461) establishing this intent. Drop transform
from their transition lists (keeping the harmless sub-200ms color/shadow
fades for orientation) and zero the transformed states so no movement can
fire; the on-brand background/box-shadow feedback is preserved for everyone. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.detecting-pulse,
.tropical-pulse.active {
animation: none;
}
.city-chip { transition: background 120ms ease; }
.alerts-banner { transition: box-shadow 120ms ease; }
.city-chip:hover,
.city-chip:active,
.alerts-banner:hover,
.alerts-banner:active {
transform: none;
}
/* DESIGN-T: kill the time-of-day theme cross-fade for motion-sensitive users.
The exact-value 'reduce' query (this block) is the correct place — a phase
flip then snaps instantly with no animated color sweep. Zeroing the token
means the same selectors that opted into --tod-fade above get 0s here. */
:root { --tod-fade: 0s; }
}
/* ───── Accessibility: Windows High Contrast / forced-colors mode (all 18 pages) ─────
Priority-4 (accessibility) gap that NO prior round addressed: a grep confirms
zero forced-colors handling and zero CSS system-color keywords anywhere in this
file. EVERY boundary on the site — the .primary-card, the 4 .chip tiles, the
.forecast-card + its 7 .forecast-day cell dividers, the 17 .city-chip tiles, the
.city-picker-dropdown + its rows, the safety-critical .alerts-banner, and the
.storm-content / .tropical-* panels — is drawn with `box-shadow: inset 0 0 0 1px …`
(21 occurrences). When a user enables Windows High Contrast Mode (or any
forced-colors theme), the engine STRIPS box-shadow entirely and force-overrides
every background/border to the user's chosen system palette. The result today:
all of those inset-shadow "borders" disappear at once and the whole UI flattens
into one borderless wall — cards, chips, dropdown rows, and the forecast grid
become visually indistinguishable, and the red alerts banner loses the chrome that
sets it apart during a live NWS warning. That is a WCAG 1.4.11 (Non-text Contrast)
structural failure for low-vision users — notably on Windows, the platform where
HCM is most used.
This block runs ONLY when the OS forces colors (`@media (forced-colors: active)`),
so it is completely inert — zero bytes of effect — for the JS-on, non-HCM majority:
no fold, CLS, layout, element-ID, JS, or normal-theme color change, and it cannot
regress the above-the-fold win or any prior round. Inside HCM it re-expresses each
stripped boundary as a real `1px solid` border in the user's palette (CanvasText),
restores the forecast cell dividers (force-stripped the same way), and gives the
alerts banner a `Highlight`-colored border so it stays visually distinct. It also
re-asserts the keyboard focus ring in the system `Highlight` color (the base rule's
fixed #38bdf8 outline + rgba glow are force-overridden, so spell it out to guarantee
2.4.7 focus visibility survives). `forced-color-adjust:auto` is the default, so we
only ADD borders — the system still controls fills/text, keeping the user's theme
authoritative. The 1px borders sit where 1px inset shadows already sat, so even if
borders were honored normally (they're not) there'd be no reflow. Shared file →
all 18 pages from one edit. */
@media (forced-colors: active) {
/* Re-draw every boundary that relied on a now-stripped inset box-shadow. */
.primary-card,
.chip,
.forecast-card,
.city-chip,
.city-picker-dropdown,
.storm-content,
.tropical-storm,
.tropical-pulse,
.quick-nav a,
.alerts-banner-cta {
border: 1px solid CanvasText;
}
/* The 7 forecast cells are separated only by a left inset/border hairline that
HCM strips; restore it as a real divider so the strip doesn't read as one block. */
.forecast-day { border-left: 1px solid CanvasText; }
.forecast-day:first-child { border-left: none; }
/* Dropdown rows are divided by an inset hairline (stripped); restore a bottom rule. */
.city-picker-dropdown button { border-bottom: 1px solid CanvasText; }
.city-picker-dropdown button:last-child { border-bottom: none; }
/* Keep the safety-critical alerts banner visually distinct in HCM: a Highlight
border (vs the neutral CanvasText used elsewhere) sets it apart during a warning. */
.alerts-banner { border: 2px solid Highlight; }
/* Re-assert keyboard focus visibility (the fixed-cyan outline + glow are stripped). */
:focus-visible,
a:focus-visible,
.quick-nav a:focus-visible,
.city-chip:focus-visible,
.alerts-banner:focus-visible,
.city-picker-btn:focus-visible,
.city-picker-dropdown button:focus-visible {
outline: 2px solid Highlight;
outline-offset: 2px;
}
}
/* ───── Footer ───── */
.footer {
border-top: 1px solid var(--border);
padding: 1.5rem 1.25rem;
background: var(--topbar-bg);
margin-top: 2rem;
}
.footer p { margin: 0.25rem 0; color: var(--text-muted); font-size: 0.85rem; }
.footer .footer-sub { font-size: 0.78rem; }
/* ───── Coastal Bend Almanac (moon · plant-now zone 9a/9b · fortune) ─────
Additive, AFTER the locked desktop block — aligns #almanac to the same 880px
content column; on-theme cyan accents (npcweather palette, not emerald). */
@media (min-width: 601px) { #almanac { max-width: 880px; margin-inline: auto; } }
.almanac-card {
background: linear-gradient(135deg, var(--bg-grad-a) 0%, var(--bg-grad-b) 100%);
border-radius: 1rem;
padding: 1.25rem 1.5rem;
box-shadow: inset 0 0 0 1px var(--border);
display: grid;
gap: 0;
}
/* Each almanac row is its own block with a divider above it, so Moon / Plant /
Fortune / Sun / Fishing read as distinct sections instead of running together. */
.alm-row { display: grid; gap: 0.4rem; padding: 0.95rem 0; border-top: 1px solid var(--border); }
.alm-row:first-child { padding-top: 0.15rem; border-top: none; }
.alm-row:last-child { padding-bottom: 0.15rem; }
.alm-label {
margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--link-hover);
}
.alm-zone, .alm-fun { color: var(--text-faint); font-weight: 600; letter-spacing: 0.02em; }
.alm-moon { margin: 0; font-size: 1.05rem; color: var(--text-body); }
.alm-moon-emoji { font-size: 1.35rem; }
.alm-moon-name { font-weight: 600; color: var(--text); }
.alm-moon-illum { color: var(--text-muted); font-size: 0.92rem; }
.alm-plant-crops { margin: 0 0 0.45rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.alm-chip {
background: var(--accent-soft); color: var(--link-hover);
border-radius: 999px; padding: 0.22rem 0.65rem;
font-size: 0.85rem; font-weight: 600;
box-shadow: inset 0 0 0 1px var(--accent-line);
}
.alm-plant-note { margin: 0; color: var(--text-2); font-size: 0.92rem; line-height: 1.5; }
.alm-fortune { margin: 0; color: var(--text-body); font-style: italic; font-size: 1.02rem; line-height: 1.55; }
.alm-foot { margin: 0.25rem 0 0; color: var(--text-faint); font-size: 0.78rem; line-height: 1.45; }
/* ── Solunar fishing & feeding times (4th almanac row) ──────────────────────
On-theme cyan, dark storm palette. MAJOR windows read heavier than MINOR via
a left cyan bar + brighter type so the two best windows win first fixation. */
.alm-solunar { display: grid; gap: 0.5rem; }
.sl-head {
margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
font-size: 1.02rem; font-weight: 600; color: var(--text);
}
.sl-badge {
background: var(--accent-soft); color: var(--link-hover);
border-radius: 999px; padding: 0.16rem 0.6rem;
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
box-shadow: inset 0 0 0 1px var(--accent-line);
}
.sl-why { margin: -0.15rem 0 0; color: var(--link-hover); font-size: 0.86rem; font-weight: 600; }
.sl-wins { display: grid; gap: 0.4rem; }
.sl-win {
display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
padding: 0.5rem 0.7rem; border-radius: 0.6rem;
background: rgba(255,255,255,0.03);
box-shadow: inset 0 0 0 1px var(--border-2);
}
.sl-major {
background: var(--accent-soft);
box-shadow: inset 0 0 0 1px var(--accent-line);
border-left: 3px solid var(--accent);
}
.sl-when { font-size: 1.0rem; font-weight: 700; color: var(--text-body); font-variant-numeric: tabular-nums; }
.sl-major .sl-when { color: var(--text); }
.sl-tag {
font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
color: var(--text-muted); white-space: nowrap;
}
.sl-major .sl-tag { color: var(--link-hover); }
.sl-fish { font-size: 0.9rem; }
.sl-note { margin: 0.1rem 0 0; color: var(--text-muted); font-size: 0.85rem; line-height: 1.45; }
/* Additive, AFTER the locked "ONE shared content column" desktop block — aligns
the solunar row to the same 880px column. Does NOT modify the frozen block. */
@media (min-width: 601px) { #almanac-solunar { max-width: 880px; margin-inline: auto; } }
/* ───── UX uniformity pass (2026-06-26) ─────────────────────────────────────
Two composed-not-scattered fixes:
(1) The fishing-window rows were collapsing to a content-width, right-shifted
column — .sl-wins is display:grid with NO column template, so it gets an
auto track instead of stretching. Pin a single full-width 1fr track (and
stretch the solunar children) so the windows share the SAME left edge as
every other almanac row (Moon / Plant / Sun) and the section heading.
(2) Micro-label letter-spacing ranged 0.03–0.08em panel-to-panel; unify the
almanac/sun/solunar eyebrows to 0.06em so they match the water-panel
labels (already 0.06em) and read as one intentional system. */
.alm-solunar { justify-items: stretch; }
#almanac-solunar { max-width: none; margin-inline: 0; }
.sl-head { justify-content: flex-start; text-align: left; }
.sl-wins { grid-template-columns: 1fr; }
.sl-win { width: 100%; box-sizing: border-box; }
.alm-label, .sl-tag, .sun-lab, .sl-badge { letter-spacing: 0.06em; }
/* ── Sun today (5th almanac row, sits above solunar) ────────────────────────
Dark storm palette, cyan #38bdf8 accent on the sunrise/sunset values; a warm
amber tint on the golden-light line (the brand-mark amber) to read as "soft
light" without breaking the cyan-forward theme. Tabular numerals so the times
line up with the temps. Responsive: 3 even pills that wrap cleanly on mobile. */
.alm-sun { display: grid; gap: 0.5rem; }
.sun-times {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem;
}
.sun-cell {
display: flex; flex-direction: column; gap: 0.15rem;
padding: 0.5rem 0.6rem; border-radius: 0.6rem;
background: var(--accent-soft);
box-shadow: inset 0 0 0 1px var(--accent-line);
}
.sun-lab {
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
color: var(--text-muted); white-space: nowrap;
}
.sun-ico { font-size: 0.82rem; }
.sun-val {
font-size: 1.12rem; font-weight: 700; color: var(--link);
font-variant-numeric: tabular-nums; line-height: 1.1;
}
.sun-val-muted { color: var(--text-body); }
.sun-gold {
margin: 0; color: var(--text-2); font-size: 0.9rem; line-height: 1.5;
padding: 0.5rem 0.6rem; border-radius: 0.6rem;
background: var(--warm-soft);
box-shadow: inset 0 0 0 1px var(--warm-line);
}
.sun-gold-win { color: var(--warm); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The plain-language live phase line that opens the Sun row ("It's daytime in
Corpus Christi right now…"). One short 5th-grade sentence, the same phase the
page color is driven by, so the words and the theme always agree. The leading
sun/moon/dawn glyph is decorative (aria-hidden); the sentence carries the
meaning. Body text uses --text (passes 4.5:1 in both phases). */
.sun-phase {
margin: 0 0 0.1rem; display: flex; align-items: baseline; gap: 0.45rem;
font-size: 0.98rem; line-height: 1.45; color: var(--text-body); font-weight: 600;
}
.sun-phase .sun-phase-ico { font-size: 1.1rem; line-height: 1; flex-shrink: 0; }
.sun-phase b { color: var(--text); font-weight: 800; }
.sun-phase .sun-phase-tail { color: var(--text-muted); font-weight: 600; }
/* Additive, AFTER the locked "ONE shared content column" desktop block — aligns
the sun row to the same 880px column. Does NOT modify the frozen block. */
@media (min-width: 601px) { #almanac-sun { max-width: 880px; margin-inline: auto; } }
/* ───── Water & Drought Tracker (apex, backlog #7) ─────────────────────────────
Live reservoir read from /content/water.json. Same dark-storm card surface as
.almanac-card / .outlook-card (navy #0f172a→#0c1a35, cyan #38bdf8 accents). The
#water section ships hidden in markup and app.js un-hides it ONLY when the feed
has real data, so a 404/empty payload leaves no empty card. The Stage badge
carries the WORD always (color is never the only signal). Fill bars are a track
+ gradient fill whose width is set inline as a %. Mobile-first; the desktop
880px column rule below is ADDITIVE, placed after the frozen block — it does NOT
modify the locked "ONE shared content column" block. */
.water-card {
background: linear-gradient(135deg, var(--bg-grad-a) 0%, var(--bg-grad-b) 100%);
border-radius: 1rem;
padding: 1.25rem 1.5rem;
box-shadow: inset 0 0 0 1px var(--border);
display: grid;
gap: 0.9rem;
}
.water-top { display: grid; gap: 0.5rem; }
.water-badge {
justify-self: start;
display: inline-block;
font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em;
padding: 0.3rem 0.75rem; border-radius: 999px;
/* default (cyan) until a tier class lands; the JS always sets a class */
color: var(--link-hover); background: var(--accent-soft);
box-shadow: inset 0 0 0 1px rgba(56,189,248,0.35);
}
.water-badge.is-critical { color: var(--bad); background: rgba(239,68,68,0.16); box-shadow: inset 0 0 0 1px rgba(239,68,68,0.55); }
.water-badge.is-stage2 { color: var(--warn); background: rgba(245,158,11,0.16); box-shadow: inset 0 0 0 1px rgba(245,158,11,0.50); }
.water-badge.is-stage1 { color: var(--warn-2); background: rgba(234,179,8,0.14); box-shadow: inset 0 0 0 1px rgba(234,179,8,0.45); }
.water-badge.is-normal { color: var(--ok); background: rgba(34,197,94,0.14); box-shadow: inset 0 0 0 1px rgba(34,197,94,0.45); }
.water-headline { margin: 0; font-size: 1.08rem; font-weight: 600; color: var(--text); line-height: 1.4; }
/* Fill-bar primitives (track + gradient fill), reused by combined + each lake. */
.water-bar { height: 8px; border-radius: 4px; background: var(--accent-soft); overflow: hidden; }
.water-bar-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #38bdf8, #0ea5e9); }
/* Combined "both lakes together" block — the headline number, larger. */
.water-combined { display: grid; gap: 0.4rem; padding: 0.7rem 0.8rem; border-radius: 0.7rem;
background: rgba(56,189,248,0.06); box-shadow: inset 0 0 0 1px rgba(56,189,248,0.16); }
.wt-combined-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.wt-combined-lab { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.wt-combined-pct { font-size: 1.7rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; }
/* Two per-lake rows. */
.water-lakes { display: grid; gap: 0.6rem; }
.wt-lake { display: grid; gap: 0.35rem; padding: 0.6rem 0.75rem; border-radius: 0.6rem;
background: rgba(255,255,255,0.03); box-shadow: inset 0 0 0 1px var(--border-2); }
.wt-lake-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.wt-lake-name { font-size: 0.98rem; font-weight: 600; color: var(--text-body); }
.wt-lake-pct { font-size: 1.15rem; font-weight: 700; color: var(--link); font-variant-numeric: tabular-nums; }
.wt-lake-detail { margin: 0; font-size: 0.82rem; color: var(--text-muted); line-height: 1.45; font-variant-numeric: tabular-nums; }
.water-rain-note { margin: 0; color: var(--text-2); font-size: 0.92rem; line-height: 1.5; }
.water-gloss { margin: 0; color: var(--text-faint); font-size: 0.8rem; line-height: 1.45; font-style: italic; }
.water-updated { margin: 0; color: var(--text-faint); font-size: 0.78rem; }
.water-foot { margin: 0.1rem 0 0; color: var(--text-faint); font-size: 0.78rem; line-height: 1.45; }
@media (forced-colors: active) {
.water-card, .water-combined, .wt-lake { border: 1px solid CanvasText; }
.water-bar-fill { background: Highlight; }
}
/* Additive, AFTER the locked "ONE shared content column" desktop block — aligns
the water card to the same 880px column. Does NOT modify the frozen block. */
@media (min-width: 601px) { #water-card { max-width: 880px; margin-inline: auto; } }
/* OFFICIAL Stage 3 rules block (#water-rules). Sits INSIDE #water-card, after the
gloss and before the freshness stamp. app.js un-hides it ONLY under Stage 3. The
can't/can marks reuse the SAME critical-red / normal-green as the .water-badge
tiers (no new color system). Mobile: can't column FIRST (the urgent answer), can
second, stacked. Desktop side-by-side handled by the additive @media below. */
.water-rules {
display: grid;
gap: 0.75rem;
padding: 0.9rem 1rem;
border-radius: 0.7rem;
background: rgba(255,255,255,0.03);
box-shadow: inset 0 0 0 1px var(--border);
}
.water-rules-h { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text); letter-spacing: 0.01em; }
.water-rules-lead { margin: 0; font-size: 0.92rem; color: var(--text-2); line-height: 1.5; }
.water-rules-cols { display: grid; gap: 0.7rem; }
.wt-cant, .wt-can { display: grid; gap: 0.35rem; padding: 0.6rem 0.7rem; border-radius: 0.55rem; }
/* Reuse the badge tier colors so the rules match the Stage badge at a glance. */
.wt-cant { background: rgba(239,68,68,0.10); box-shadow: inset 0 0 0 1px rgba(239,68,68,0.30); }
.wt-can { background: rgba(34,197,94,0.09); box-shadow: inset 0 0 0 1px rgba(34,197,94,0.28); }
.wt-rules-cap { margin: 0 0 0.15rem; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; display: flex; align-items: center; gap: 0.4rem; }
.wt-cant .wt-rules-cap { color: var(--bad); }
.wt-can .wt-rules-cap { color: var(--ok); }
.wt-mark { font-size: 0.95rem; line-height: 1; font-weight: 900; }
.wt-rules-list { margin: 0; padding-left: 1.15rem; display: grid; gap: 0.4rem; }
.wt-rules-list li { font-size: 0.9rem; color: var(--text-body); line-height: 1.45; }
.water-rules-fine { margin: 0; font-size: 0.9rem; color: var(--orange); line-height: 1.5; }
.water-rules-myth { margin: 0; font-size: 0.88rem; color: var(--text-2); line-height: 1.5; }
.water-rules-scope { margin: 0; font-size: 0.84rem; color: var(--text-muted); line-height: 1.5; }
.water-rules-src { margin: 0; font-size: 0.82rem; color: var(--text-muted); line-height: 1.6; }
.water-rules-src a { color: var(--link-hover); }
@media (forced-colors: active) {
.water-rules, .wt-cant, .wt-can { border: 1px solid CanvasText; }
}
/* Additive, AFTER the locked "ONE shared content column" block — on desktop the
can't/can lists sit side by side; can't stays first (left). Does NOT modify the
frozen block. */
@media (min-width: 601px) {
.water-rules-cols { grid-template-columns: 1fr 1fr; gap: 0.8rem; align-items: start; }
}
/* Semantic status colors — THEMED so good/caution/no-go stay readable in BOTH
the dark (night) and light (day/dawn) palettes. Night = bright on dark; day = deep on light. */
:root { --ok: #86efac; --ok-strong: #4ade80; --bad: #fca5a5; --warn: #fcd34d; --warn-2: #fde68a; --orange: #fdba74; }
[data-tod="day"], [data-tod="dawn"] { --ok: #15803d; --ok-strong: #15803d; --bad: #b91c1c; --warn: #b45309; --warn-2: #b45309; --orange: #9a3412; }
/* ── Day/dawn contrast fixes: chips/badges/sun-row that hardcode dark-theme
accent fills get routed through the light-palette tokens so they stay readable
on white. Surgical, [data-tod] scoped — night is untouched. ── */
[data-tod="day"] .alm-chip, [data-tod="dawn"] .alm-chip,
[data-tod="day"] .sl-fish, [data-tod="dawn"] .sl-fish,
[data-tod="day"] .sl-when, [data-tod="dawn"] .sl-when,
[data-tod="day"] .eyebrow, [data-tod="dawn"] .eyebrow,
[data-tod="day"] .quick-nav a, [data-tod="dawn"] .quick-nav a {
background: var(--accent-soft); color: var(--link); box-shadow: inset 0 0 0 1px var(--accent-line);
}
[data-tod="day"] .sun-row, [data-tod="dawn"] .sun-row,
[data-tod="day"] .sun-cell, [data-tod="dawn"] .sun-cell,
[data-tod="day"] .sl-cell, [data-tod="dawn"] .sl-cell {
background: var(--surface-2);
}
[data-tod="day"] .sun-val, [data-tod="day"] .sun-lab, [data-tod="day"] .sun-ico,
[data-tod="dawn"] .sun-val, [data-tod="dawn"] .sun-lab, [data-tod="dawn"] .sun-ico { color: var(--text-body); }
[data-tod="day"] .sun-val-muted, [data-tod="dawn"] .sun-val-muted { color: var(--text-muted); }
[data-tod="day"] .sun-gold-win, [data-tod="dawn"] .sun-gold-win { color: var(--orange); }
[data-tod="day"] .wt-mark, [data-tod="day"] .wt-combined-lab,
[data-tod="dawn"] .wt-mark, [data-tod="dawn"] .wt-combined-lab { color: var(--text-body); }
/* ── 17-city heat-map tiles: each tile's background + text color are COMPUTED
per city in app.js (feels-like vs your city) and set inline. Name, temp, and
condition follow that computed text color so every tile stays readable
whatever its hue. No fixed colors here — the ring uses the accent token. ── */
.city-chip { position: relative; }
.city-chip .cc-name { padding-right: 15px; }
.cc-dot { position: absolute; top: 0.62rem; right: 0.7rem; width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); }
.city-chip.is-current .cc-dot { box-shadow: 0 0 0 2px var(--surface-2); }
.city-chip .cc-cond { opacity: 0.88; }
.city-chip .cc-you { opacity: 0.82; }
.city-chip.is-current { box-shadow: inset 0 0 0 2px var(--accent); }
/* ── Temperature trend (scrubbable SVG: past 12h + Now + forecast ahead). All
tile/line/text colors come from data (computed HSL) or theme tokens. ── */
@media (min-width: 601px) { #trend { max-width: 880px; margin-inline: auto; } }
.trend-sub { margin: 0 0 0.75rem; color: var(--text-2); font-size: 0.92rem; line-height: 1.5; }
.trend-card {
background: linear-gradient(135deg, var(--bg-grad-a) 0%, var(--bg-grad-b) 100%);
border-radius: 1rem; padding: 1rem 1.1rem 0.85rem; box-shadow: inset 0 0 0 1px var(--border);
}
.trend-readout { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; min-height: 1.9rem; margin-bottom: 0.35rem; }
.trend-ro-temp { font-size: 1.75rem; font-weight: 700; line-height: 1; }
.trend-ro-when { font-size: 0.82rem; color: var(--text-muted); font-weight: 600; }
.trend-ro-cond { font-size: 0.82rem; color: var(--text-2); }
.trend-chart { width: 100%; }
.trend-svg { width: 100%; height: auto; display: block; touch-action: pan-y; }
.trend-svg text { fill: var(--text-muted); }
.trend-tick { font-size: 9px; }
.trend-now-lab { font-size: 9px; font-weight: 800; letter-spacing: 0.1em; fill: var(--text-2); }
.trend-hl { font-size: 11px; font-weight: 700; fill: var(--text-body); }
.trend-foot { margin: 0.5rem 0 0; color: var(--text-faint); font-size: 0.76rem; line-height: 1.45; }
/* Trend chart keyboard focus ring (WCAG 2.4.7) — visible when tabbed to for arrow-key scrub. */
.trend-svg:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
/* Trend R1 council additions: round-temp gridlines, forecast "ahead" wash label,
the visible citable plain-language lede, scrub-dot grow. All tokenized. */
.trend-grid-lab { font-size: 8px; fill: var(--text-faint); }
.trend-ahead-lab { font-size: 8px; fill: var(--text-faint); letter-spacing: 0.08em; text-transform: uppercase; }
.trend-summary { margin: 0.2rem 0 0.7rem; color: var(--text); font-size: 1rem; line-height: 1.5; font-weight: 600; }
#trend-cur-dot { transition: r 0.08s ease; }
#trend-hit { touch-action: pan-y; }
/* ═══════════════════════════════════════════════════════════════════════════
LEGAL / POLICY PAGES — /privacy/, /terms/, /accessibility/
Shared prose styles for the footer-linked legal pages. TOKENS ONLY, so these
inherit the time-of-day theme exactly like every other surface (the inline
DESIGN-T proxy script themes the static pages; no app.js is loaded there).
═══════════════════════════════════════════════════════════════════════════ */
.legal { max-width: 760px; padding-bottom: 2rem; }
.legal .legal-updated { font-size: 0.82rem; color: var(--text-muted); margin: 0 0 1.5rem; }
.legal .lead-note {
background: var(--accent-soft);
box-shadow: inset 0 0 0 1px var(--accent-line);
border-radius: 12px; padding: 0.9rem 1.1rem; margin: 0 0 1.75rem;
}
.legal .lead-note p { color: var(--text-body); margin: 0; }
.legal-toc {
background: var(--surface);
box-shadow: inset 0 0 0 1px var(--border);
border-radius: 12px; padding: 1rem 1.25rem; margin: 0 0 2rem;
}
.legal-toc h2 {
font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
color: var(--text-muted); margin: 0 0 0.6rem; font-weight: 800;
}
.legal-toc ol { margin: 0; padding-left: 1.1rem; columns: 2; column-gap: 1.75rem; }
.legal-toc li { margin-bottom: 0.35rem; font-size: 0.9rem; break-inside: avoid; }
.legal h2 { font-size: 1.15rem; color: var(--text); margin: 1.9rem 0 0.5rem; scroll-margin-top: 1rem; }
.legal h3 { font-size: 1rem; color: var(--text); margin: 1.1rem 0 0.3rem; }
.legal p { color: var(--text-2); margin: 0 0 0.85rem; line-height: 1.65; }
.legal ul, .legal ol.legal-list { margin: 0 0 0.95rem; padding-left: 1.25rem; }
.legal li { color: var(--text-2); margin-bottom: 0.45rem; line-height: 1.6; }
.legal dl.legal-defs dt { font-weight: 700; color: var(--text); margin-top: 1rem; }
.legal dl.legal-defs dd { margin: 0.2rem 0 0; color: var(--text-2); }
.legal address { font-style: normal; color: var(--text-2); line-height: 1.6; }
@media (max-width: 560px) { .legal-toc ol { columns: 1; } }