/* Grid Watch brand: the quiet transit diagram.
   One face (Inter Tight, self-hosted, OFL) at every size, with tabular figures. A cool neutral ground, near-white
   panels and 1px hairlines; ink black for text and every button; colour is kept for data (bayou blue, traffic
   amber, the National Weather Service flood categories, camera teal) and red only for real warnings.
   Every colour below is a value from the colors block at the top of DESIGN.md; test/brand.test.mjs keeps them equal. */

/* Inter Tight, variable weight 100-900. Latin loads for most pages; latin-ext only when a character needs it. */
@font-face { font-family:"Inter Tight"; font-style:normal; font-weight:100 900; font-display:swap; src:url("/fonts/inter-tight-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Inter Tight"; font-style:normal; font-weight:100 900; font-display:swap; src:url("/fonts/inter-tight-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"Inter Tight"; font-style:italic; font-weight:100 900; font-display:swap; src:url("/fonts/inter-tight-italic-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Inter Tight"; font-style:italic; font-weight:100 900; font-display:swap; src:url("/fonts/inter-tight-italic-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* neutrals */
  --ground:#F2F4F7;
  --panel:#FBFCFD;
  --track:#E5E8ED;
  --track-hover:#DBDFE6;
  --hairline:#D8DCE3;
  --ink:#14171C;
  --ink-hover:#2D323A;
  --ink-2:#3B424D;
  --gray:#5D6573;
  --faint:#8C94A1;
  --edge:#7A8290;
  --white:#FFFFFF;
  --count-on-ink:#C5CBD4;
  --selection:#CFE0F7;
  /* data */
  --bayou-blue:#1D74D8;
  --bayou-label:#1A5FB4;
  --traffic-amber:#F2A20C;
  --minor-ring:#B26F00;
  --warning-red:#B42318;
  --warning-area:#D92D20;
  --flood-action:#FFE14D;
  --flood-minor:#FF8A00;
  --flood-moderate:#E5302A;
  --flood-major:#B04BE0;
  --camera:#148A8A;
  --source-ok:#178A55;
  --skyline-fill:#F7F8FA;
  --sun-halo:#FFF8E6;
  --water:#D6E4F5;
  /* shape and type */
  --r-btn:8px;
  --r-panel:14px;
  --r-chip:999px;
  --r-shield:4px;
  --font:'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* type scale, base 16: 13 / 14 / 16 / 18 / 22 / 30 / 40 */
  --t-xs:13px; --t-sm:14px; --t-md:16px; --t-lg:18px; --t-xl:22px; --t-2xl:30px; --t-3xl:40px;
}
* { box-sizing:border-box; }
html, body { margin:0; }
body { background:var(--ground); color:var(--ink); font:400 15px/1.5 var(--font); font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-feature-settings:"kern" 1; text-rendering:optimizeLegibility; }
:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
::selection { background:var(--selection); color:var(--ink); }

/* Buttons are flat: a soft track fill, or ink for the main action. No shadow, no border colour. */
button, .btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:36px; padding:7px 14px; border:1px solid transparent; border-radius:var(--r-btn);
  background:var(--track); color:var(--ink); font:500 var(--t-sm)/20px var(--font); font-variant-numeric:tabular-nums; letter-spacing:-.003em; text-decoration:none; cursor:pointer;
  transition:background-color .12s ease, border-color .12s ease, color .12s ease;
}
/* The font shorthand (ours above, the browser's on form fields) resets the figures; keep them tabular. */
input, select, textarea { font-variant-numeric:tabular-nums; }
button:hover, .btn:hover { background:var(--track-hover); }
button.primary, .btn.primary { background:var(--ink); border-color:var(--ink); color:var(--white); }
button.primary:hover, .btn.primary:hover { background:var(--ink-hover); border-color:var(--ink-hover); }
button.on, button[aria-pressed="true"]:not(.layer) { background:var(--ink); border-color:var(--ink); color:var(--white); }
button.on:hover, button[aria-pressed="true"]:not(.layer):hover { background:var(--ink-hover); border-color:var(--ink-hover); }
button.link { min-height:0; padding:0; border:0; background:none; font-weight:500; color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; text-decoration-color:var(--edge); }
button.link:hover { background:none; text-decoration-color:var(--ink); }
/* Disabled wins over every pressed and hover rule above (same or higher specificity, later in the file). */
button:disabled, .btn:disabled, button.primary:disabled, button.on:disabled, button[aria-pressed="true"]:not(.layer):disabled {
  background:var(--track); border-color:transparent; color:var(--gray); cursor:not-allowed;
}
button.link:disabled { background:none; }

/* ==== Components ====
   Shared classes for every page, named after the components in .impeccable/design.json without the ds- prefix.
   Values are DESIGN.md's (Components, Shapes, Typography, Focus and targets, The mark ramp, The Houston sky).
   Phone rules come first and apply at every width below 1024px; the desktop block further down applies from 1024px.
   test/fixtures/components.html shows each one. */

/* Column: 1216px of content with 32px sides on desktop; on phones 16px sides, at most 560px wide, centred. */
.wrap { box-sizing:content-box; max-width:528px; margin-inline:auto; padding-inline:16px; }

/* Header: a flat full-width strip on the ground with a hairline below, never floating or tinted. */
.hdr { background:var(--ground); border-bottom:1px solid var(--hairline); }
.hdr > .wrap { display:flex; align-items:center; gap:6px; height:60px; }
.hdr nav { display:none; gap:28px; }
.hdr nav a { padding:8px 0; border-radius:6px; color:var(--gray); font-size:14px; text-decoration:none; }
.hdr nav a:hover { color:var(--ink); }
.hdr nav a[aria-current="page"] { color:var(--ink); font-weight:500; }
/* Map button: the ink face is ::before with the real 8px corners, 34px tall inside a 44px hit area on phones
   (the full 36px on desktop). The element itself stays clear in every state, .btn or .btn.primary, so hover only
   changes the face, and the focus ring is drawn around the face. */
.hdr .btn, .hdr .btn:hover, .hdr .btn:active { position:relative; isolation:isolate; margin-left:auto; min-height:44px; height:44px; padding:0 14px; border:0; background:transparent; font-size:15px; }
.hdr .btn::before { content:""; position:absolute; z-index:-1; inset:5px 0; border-radius:var(--r-btn); background:var(--ink); transition:background-color .12s ease; }
.hdr .btn:hover::before, .hdr .btn:active::before { background:var(--ink-hover); }
.hdr .btn:focus-visible { outline:none; }
.hdr .btn:focus-visible::before { outline:2px solid var(--ink); outline-offset:2px; }
.hdr .menu { display:inline-flex; align-items:center; justify-content:center; flex:none; width:44px; min-height:44px; height:44px; padding:0; border:0; border-radius:var(--r-btn); background:transparent; color:var(--ink); }

/* Logo: the octagon Loop mark and the wordmark, "Houston" in gray. One markup:
     <a class="logo" href="/" aria-label="Grid Watch Houston, home"><svg ...mark...></svg>Grid Watch <span>Houston</span></a>
   and the footer's wordmark alone: <p class="logo">Grid Watch <span>Houston</span></p>.
   Inline, not flex, so the space before "Houston" stays a plain space; the mark is centred on the text by its
   vertical-align (the board's flex centring). A link is 44px tall. */
.logo { display:inline-block; margin:0; border-radius:6px; color:var(--ink); font:500 16px/20px var(--font); letter-spacing:-0.015em; text-decoration:none; white-space:nowrap; }
a.logo { padding-block:12px; }
.logo svg { width:20px; height:20px; margin-right:8px; vertical-align:-4.2px; }
.logo span { color:var(--gray); }

/* Footer: flat, full width, hairline above. */
.ftr { margin-top:72px; border-top:1px solid var(--hairline); }
.ftr > .wrap { display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding-block:22px 28px; }
.ftr p:not(.logo) { margin:0; color:var(--ink-2); font-size:14px; line-height:1.55; text-wrap:pretty; }
.ftr nav { display:flex; gap:22px; }
.ftr nav a { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; border-radius:6px; color:var(--ink-2); font-size:15px; text-decoration:none; }
.ftr nav a:hover { color:var(--ink); text-decoration:underline; }

/* Two-tone title (ink line, gray line, one weight), lead, meta line with faint slashes. */
.t2 { margin:0; color:var(--ink); font-size:30px; font-weight:500; line-height:1.16; letter-spacing:-0.025em; }
.t2 > span { display:block; color:var(--gray); }
h2.t2 { font-size:24px; }
.lead { margin:16px 0 0; color:var(--ink-2); font-size:17px; line-height:1.5; text-wrap:pretty; }
.meta { margin:0; color:var(--gray); font-size:14px; line-height:1.5; }
.meta b { color:var(--ink); font-weight:500; }
.meta a, .lead a { border-radius:6px; color:var(--ink); text-decoration-color:var(--faint); text-decoration-thickness:1px; text-underline-offset:3px; }
.meta a:hover, .lead a:hover { text-decoration-color:currentColor; }
.sl { padding:0 5px; color:var(--faint); }

/* Buttons: ink with white text, 8px radius; .secondary is the soft one on the control track. 48px on phones. */
.btn { gap:8px; min-height:48px; padding:0 18px; border:0; background-color:var(--ink); color:var(--white); font:500 16px/20px var(--font); font-variant-numeric:tabular-nums; letter-spacing:normal; }
.btn:hover, .btn:active { background-color:var(--ink-hover); }
.btn.secondary { background-color:var(--track); color:var(--ink); }
.btn.secondary:hover, .btn.secondary:active { background-color:var(--track-hover); }
.btn:disabled, .btn.primary:disabled, .btn.secondary:disabled { background-color:var(--track); color:var(--gray); cursor:not-allowed; }
/* An ink button on the control track or on the sky gradient takes the white ring inset at -4px, following its own
   radius, because an outward ink ring would sit on the track or the tinted sky (DESIGN.md Focus and targets). */
.chips .btn:not(.secondary):focus-visible, .sky-air .btn:not(.secondary):not(.panel .btn):focus-visible { outline-color:var(--white); outline-offset:-4px; }

/* Chips: pills on a control track, used as radio groups and tabs. The active chip is solid ink.
   Inline-block, not flex, so the space before the count is kept. Full-width shares on phones. */
.chips { display:flex; gap:2px; padding:3px; border-radius:var(--r-chip); background:var(--track); }
.chip { display:inline-block; flex:1; min-height:44px; height:44px; padding:0 6px; border:0; border-radius:var(--r-chip); background:transparent; color:var(--ink-2); font:500 15px/1 var(--font); font-variant-numeric:tabular-nums; letter-spacing:normal; white-space:nowrap; cursor:pointer; }
.chip:hover { background:var(--track-hover); color:var(--ink); }
.chip .n { margin-left:5px; color:var(--gray); font-weight:400; }
.chip:hover .n { color:var(--ink-2); }
.chip[aria-checked="true"], .chip[aria-selected="true"] { background:var(--ink); color:var(--white); }
.chip[aria-checked="true"] .n, .chip[aria-selected="true"] .n { color:var(--count-on-ink); }
.chip[aria-checked="true"]:focus-visible, .chip[aria-selected="true"]:focus-visible { outline-color:var(--white); outline-offset:-4px; }
.chip:disabled { background:transparent; color:var(--gray); cursor:not-allowed; }
.chip:disabled .n { color:var(--gray); }

/* Fields: white, 1px field-edge border, 8px radius. Errors are never red: aria-invalid turns the border ink,
   and a 14px ink-2 message (.in-msg, linked by aria-describedby) sits 6px below. */
.in { height:48px; padding:0 12px; border:1px solid var(--edge); border-radius:var(--r-btn); background:var(--white); color:var(--ink); font:400 16px/1.25 var(--font); font-variant-numeric:tabular-nums; caret-color:var(--ink); }
.in::placeholder { color:var(--gray); opacity:1; }
.in:hover { border-color:var(--gray); }
.in[aria-invalid="true"] { border-color:var(--ink); }
.in:disabled { background:var(--ground); border-color:var(--hairline); color:var(--gray); cursor:not-allowed; }
.in-msg { margin:6px 0 0; color:var(--ink-2); font-size:14px; line-height:1.5; }
/* Selects: a drawn ink chevron; 16px on phones so iOS does not zoom. select.sel, because map.html uses .sel
   on its Select tool button and for a selected drawing. */
select.sel { height:48px; padding:0 36px 0 12px; border:1px solid var(--edge); border-radius:var(--r-btn); background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2314171C' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 13px center; color:var(--ink); font:400 16px/1.25 var(--font); font-variant-numeric:tabular-nums; -webkit-appearance:none; appearance:none; cursor:pointer; }
select.sel:hover { border-color:var(--gray); }
select.sel[aria-invalid="true"] { border-color:var(--ink); }
select.sel:disabled { background-color:var(--ground); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235D6573' stroke-width='1.6'/%3E%3C/svg%3E"); border-color:var(--hairline); color:var(--gray); cursor:not-allowed; }

/* Hairline rows, not cards. Row links fill their row and are at least 44px tall. */
.rows { margin:0; padding:0; list-style:none; border-top:1px solid var(--hairline); }
.rows li { display:grid; grid-template-columns:minmax(0, 1fr) auto; column-gap:12px; padding:11px 0; border-bottom:1px solid var(--hairline); font-size:15px; line-height:1.4; }
.rows .r { text-align:right; white-space:nowrap; }
.rows .s { display:block; margin-top:2px; color:var(--gray); font-size:14px; }
.rows a { border-radius:6px; color:inherit; text-decoration-color:var(--hairline); text-decoration-thickness:1px; text-underline-offset:3px; }
.rows a:hover { text-decoration-color:currentColor; }
.rows li > a:first-child { display:block; min-height:44px; margin-block:-11px; padding-block:11px; }

/* Panel: only for the diagram, the Your area form and map overlays. */
.panel { padding:20px; border:1px solid var(--hairline); border-radius:var(--r-panel); background:var(--panel); }

/* The mark ramp at the 14px key and list size: the key icons from design.json's Mark Ramp, drawn as SVG so the
   fractional outlines stay exact at every pixel ratio (colours are the DESIGN.md tokens, written out because a
   data URL cannot read var()). Set --mk to resize, e.g. --mk:12px for the Traffic desk mark. */
.mk-major, .mk-minor, .mk-hazard, .mk-gauge, .mk-camera,
.mk-flood-action, .mk-flood-minor, .mk-flood-moderate, .mk-flood-major {
  display:inline-block; flex:none; width:var(--mk, 14px); height:var(--mk, 14px); vertical-align:middle; background:center / 100% 100% no-repeat;
}
/* Major crash: amber disc, r5.6 with a 1.3 ink outline. */
.mk-major { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='5.6' fill='%23F2A20C' stroke='%2314171C' stroke-width='1.3'/%3E%3C/svg%3E"); }
/* Minor crash: panel centre, r4.6 with a 2.4 minor-ring ring. */
.mk-minor { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='4.6' fill='%23FBFCFD' stroke='%23B26F00' stroke-width='2.4'/%3E%3C/svg%3E"); }
/* Road hazard: amber diamond, half-diagonal 6.4 with a 1.2 ink outline. */
.mk-hazard { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 .6 13.4 7 7 13.4.6 7z' fill='%23F2A20C' stroke='%2314171C' stroke-width='1.2'/%3E%3C/svg%3E"); }
/* Gauge: panel dot with a bayou-blue ring, r3.4 with 1.8, on a 2.5 blue line, 16 x 14. */
.mk-gauge { width:calc(var(--mk, 14px) * 16 / 14); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath d='M0 7h16' stroke='%231D74D8' stroke-width='2.5'/%3E%3Ccircle cx='8' cy='7' r='3.4' fill='%23FBFCFD' stroke='%231D74D8' stroke-width='1.8'/%3E%3C/svg%3E"); }
/* Gauge in flood, in the key: a disc in its NWS category colour, r5.6 with a 1.3 ink outline. */
.mk-flood-action { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='5.6' fill='%23FFE14D' stroke='%2314171C' stroke-width='1.3'/%3E%3C/svg%3E"); }
.mk-flood-minor { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='5.6' fill='%23FF8A00' stroke='%2314171C' stroke-width='1.3'/%3E%3C/svg%3E"); }
.mk-flood-moderate { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='5.6' fill='%23E5302A' stroke='%2314171C' stroke-width='1.3'/%3E%3C/svg%3E"); }
.mk-flood-major { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='5.6' fill='%23B04BE0' stroke='%2314171C' stroke-width='1.3'/%3E%3C/svg%3E"); }
/* Plate-reader camera: a 10 x 10 teal square with a 1.5 panel outline, never a circle. */
.mk-camera { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Crect x='2' y='2' width='10' height='10' fill='%23148A8A' stroke='%23FBFCFD' stroke-width='1.5'/%3E%3C/svg%3E"); }

/* Route shields: .i solid ink with white figures (Interstate), .o outlined (US, state and toll roads). */
.shield { display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:18px; padding:0 5px; margin-right:6px; border-radius:var(--r-shield); font:600 11.5px/1 var(--font); font-variant-numeric:tabular-nums; vertical-align:1px; }
.shield.i { background:var(--ink); color:var(--white); }
.shield.o { border:1.25px solid var(--ink); background:var(--panel); color:var(--ink); }

/* Warning banner: full width, warning red, first under the header on an active NWS warning day.
   Markup: section.warnbar[role=alert][aria-label="Weather warning"] > .wrap > svg, p.h, p.b, a.go.
   White on warning-red is 6.6:1; its link takes the white focus ring at 2px outward. */
.warnbar { padding:14px 0 16px; background:var(--warning-red); color:var(--white); }
.warnbar > .wrap { display:grid; grid-template-columns:22px minmax(0, 1fr); column-gap:12px; }
.warnbar > .wrap > svg { margin-top:1px; }
.warnbar p { margin:0; }
.warnbar .h { font-size:17px; font-weight:600; line-height:1.3; letter-spacing:-0.005em; }
.warnbar .h span { font-weight:400; }
.warnbar .b { grid-column:2; margin-top:4px; font-size:15px; line-height:1.45; text-wrap:pretty; }
.warnbar a { color:var(--white); text-decoration-color:color-mix(in srgb, var(--white) 70%, transparent); }
.warnbar .go { grid-column:2; justify-self:start; display:inline-flex; align-items:center; gap:8px; height:44px; margin-top:12px; padding:0 16px 0 18px; border:1.5px solid var(--white); border-color:color-mix(in srgb, var(--white) 85%, transparent); border-radius:var(--r-chip); font-size:15px; font-weight:600; text-decoration:none; white-space:nowrap; }
.warnbar .go:hover { background:color-mix(in srgb, var(--white) 12%, transparent); }
.warnbar :focus-visible { outline-color:var(--white); }

/* The Houston sky (DESIGN.md, The Houston sky). /sky.js mounts on .sky: it sets --sky-zenith, --sky-horizon and
   --sky-glow, data-warning, data-path-drawn and data-drift on it, and fills the data-sky-* hooks inside.
   .sky-air holds the gradient, the glow, the title block (.sky-head) and the drawing (.wrap > .sky-stage);
   the caption and the Pause button (.sky-cap) sit below it. .sky-desk and .sky-phone pick the drawing per layout.
   The stage is the content column, which is where the sun path runs (x 112..1328 of 1440, 16..374 of 390): the
   drawing is sized so those ends meet the column's edges and scales with it, with 1.1px strokes kept. The horizon
   and ground strip run past it to the band's edges, and the sunrise and sunset times are HTML at the column's
   edges so they stay 12.5px. */
.sky { background:var(--ground); }
.sky-air { position:relative; overflow:hidden; isolation:isolate; background:linear-gradient(180deg, var(--sky-zenith, var(--ground)), var(--sky-horizon, var(--ground))); }
.sky-air > .wrap { position:relative; z-index:1; }
.sky-head { padding-top:36px; }
.sky-stage { position:relative; margin-top:14px; }
.sky-draw { display:block; overflow:visible; width:calc(100% * 390 / 358); height:auto; margin-left:calc(-100% * 16 / 358); font-family:var(--font); }
.sky-draw .city path, .sky-horizon { vector-effect:non-scaling-stroke; }
.sky-ground { fill:var(--ground); }
.sky-horizon { fill:none; stroke:var(--ink); stroke-width:1; }
.sky-halo { fill:var(--sun-halo); }
.sky-sun { fill:var(--white); stroke:var(--ink); stroke-width:1.8; }
/* Until sky.js has painted the band (it sets data-palette), the sun has no place yet: hide it. */
.sky:not([data-palette]) [data-sky-sun] { display:none; }
.sky-now { fill:var(--ink); font-size:12.5px; font-weight:500; }
/* Flipped to the left of the sun (sky.js labelSide, late in the day, low in the sky) it sits on the passed path,
   so it takes a halo in the horizon colour, like the diagram's labels. */
.sky-now[text-anchor="end"] { paint-order:stroke; stroke:var(--sky-horizon, var(--ground)); stroke-width:4px; stroke-linejoin:round; }
.sky-times { position:absolute; left:0; right:0; bottom:1.5px; display:flex; justify-content:space-between; margin:0; color:var(--gray); font-size:12.5px; line-height:1; pointer-events:none; }
/* The passed path draws once on load, then stops; once sky.js marks it drawn it never replays. */
.sky-passed { animation:gw-trace 4.8s cubic-bezier(0.45, 0, 0.2, 1) 0.3s backwards; }
[data-path-drawn="true"] .sky-passed { animation:none; stroke-dashoffset:0; }
@keyframes gw-trace { from { stroke-dashoffset:1; } }
/* One soft glow centred on the sun (sky.js sets --sky-sun-x/-y), drifting by transform only. */
.sky-glow {
  position:absolute; z-index:0; width:640px; height:500px; border-radius:50%; pointer-events:none; will-change:transform;
  left:calc(50% + var(--sky-sun-x, 0px) - 320px); bottom:calc(var(--sky-sun-y, 0px) - 250px);
  background:radial-gradient(closest-side, var(--sky-glow, transparent), transparent);
  animation:gw-sun-phone 24s ease-in-out infinite alternate;
}
/* The board's stops (design.json sky.glowStops) in today's glow colour, where color-mix is supported. */
@supports (color:color-mix(in srgb, red 50%, transparent)) {
  .sky-glow { background:radial-gradient(closest-side, var(--sky-glow, transparent), color-mix(in srgb, var(--sky-glow, transparent) 70%, transparent) 28%, color-mix(in srgb, var(--sky-glow, transparent) 26%, transparent) 60%, transparent); }
}
[data-drift="off"] .sky-glow { animation-play-state:paused; }
@keyframes gw-sun-phone { from { transform:translate3d(-64px, 12px, 0) scale(0.92); } to { transform:translate3d(64px, -12px, 0) scale(1.08); } }
@keyframes gw-sun { from { transform:translate3d(-130px, 18px, 0) scale(0.92); } to { transform:translate3d(130px, -18px, 0) scale(1.08); } }
.sky-cap { display:flex; align-items:center; gap:12px; padding-top:2px; }
.sky-cap .meta { flex:1; min-width:0; }
/* Pause motion: a pill beside the caption, panel-white at rest, solid ink when paused. sky.js writes its label. */
.sky-pause { display:inline-flex; align-items:center; gap:8px; flex:none; min-height:44px; height:44px; padding:0 16px 0 14px; border:1px solid var(--hairline); border-radius:var(--r-chip); background:var(--panel); color:var(--ink); font:500 15px/1 var(--font); font-variant-numeric:tabular-nums; letter-spacing:normal; white-space:nowrap; cursor:pointer; }
.sky-pause:hover { background-color:var(--panel); border-color:var(--edge); }
.sky-pause[data-paused="true"] { background-color:var(--ink); border-color:var(--ink); color:var(--white); }
.sky-pause .ic-play, .sky-pause[data-paused="true"] .ic-pause { display:none; }
.sky-pause[data-paused="true"] .ic-play { display:inline; }
/* Warning day (Houston right now only): no skyline, path, glow, caption or Pause; the title on the plain ground. */
.sky[data-warning="true"] .sky-air { background:none; }
.sky[data-warning="true"] .sky-stage, .sky[data-warning="true"] .sky-glow, .sky[data-warning="true"] .sky-cap { display:none; }
.sky[data-warning="true"] .sky-head { padding-top:30px; padding-bottom:22px; }
@media not all and (min-width:1024px) { .sky .sky-desk { display:none; } }
/* The time beside the sun is inside the drawing, so it would grow and shrink with it. Its size in drawing units is
   12.5px divided by the drawing's scale (column / 358 on phones, column / 1216 on desktop). That curve is convex,
   so max() of its chords is within 1.5% of it: 320-390, 390-475 and 475-560px on phones (the column stops growing
   at 560px), 1024-1280px on desktop. */
@media not all and (min-width:1024px) { .sky-now { font-size:max(8.475px, calc(29.43px - 4.343vw), calc(23.507px - 2.8224vw), calc(19.187px - 1.9129vw)); } }
@media (min-width:1024px) { .sky-now { font-size:max(12.5px, calc(29.17px - 1.3021vw)); } }
@media (min-width:1024px) { .sky .sky-phone { display:none; } }
@media (prefers-reduced-motion: reduce) { .sky-pause, .sky-note { display:none; } }

/* ---- Desktop, from 1024px ---- */
@media (min-width:1024px) {
  .wrap { max-width:1216px; padding-inline:32px; }
  .hdr > .wrap { gap:40px; height:64px; }
  .hdr nav { display:flex; }
  .hdr .btn, .hdr .btn:hover, .hdr .btn:active { min-height:36px; height:36px; padding:0 16px; font-size:14px; }
  .hdr .btn::before { inset:0; }
  .hdr .menu { display:none; }
  .logo svg { width:22px; height:22px; margin-right:9px; vertical-align:-5.2px; }
  .ftr { margin-top:128px; }
  .ftr > .wrap { display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:24px; row-gap:16px; align-items:start; padding-block:28px 40px; }
  .ftr .logo { grid-column:1 / 5; }
  .ftr p:not(.logo) { grid-column:5 / 10; }
  .ftr nav { grid-column:10 / 13; justify-content:flex-end; gap:24px; }
  .ftr nav a { min-width:0; min-height:0; font-size:14px; }
  .t2 { font-size:34px; }
  .lead { margin-top:26px; max-width:42ch; line-height:1.55; }
  .sl { padding:0 6px; }
  .btn { min-height:40px; padding:0 16px; font-size:14px; }
  .btn.secondary { min-height:44px; }
  .in + .btn { min-height:44px; padding:0 20px; }
  .chips { display:inline-flex; }
  .chip { flex:none; min-height:32px; height:32px; padding:0 14px; font-size:14px; }
  .chip .n { margin-left:2px; }
  .in { height:44px; }
  select.sel { height:36px; padding:0 32px 0 12px; background-position:right 11px center; font-size:14px; font-weight:500; }
  .rows li { column-gap:14px; }
  .sky-head { padding-top:84px; }
  .sky-stage { margin-top:36px; }
  .sky-draw { width:calc(100% * 1440 / 1216); margin-left:calc(-100% * 112 / 1216); }
  .sky-glow { width:1400px; height:860px; left:calc(50% + var(--sky-sun-x, 0px) - 700px); bottom:calc(var(--sky-sun-y, 0px) - 430px); animation-name:gw-sun; }
  .sky-cap { justify-content:space-between; gap:24px; padding-top:6px; }
  .sky-pause { min-height:36px; height:36px; padding:0 14px 0 12px; font-size:14px; }
  .sky[data-warning="true"] .sky-head { padding-top:84px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; } }