/* Optional chart-table presentation. Forecast calculations stay in the shared app. */
:root {
  color-scheme:light;
  --ink:#f6f7f2; --panel:#fffefa; --panel2:#e9eee8; --surface-hi:#fff;
  --text:#142f3e; --mute:#49616b; --faint:#5b7078; --line:#a9babd; --hair:#ccd5d2;
  --aqua:#08758b; --aqua-text:#05677a; --aqua-rgb:8,117,139; --viz:#08758b;
  --moss:#227552; --gold:#966214; --gold-rgb:150,98,20; --rust:#b44030;
  --silver:#647c84; --silver-dark:#35535f; --steel:#637f95; --band-hi:#a8d8cc;
  --on-accent:#fff; --shadow-rgb:20,47,62; --tint-rgb:20,47,62;
  --disp:'Arial',sans-serif; --head:'Arial',sans-serif; --numeral:'Arial',sans-serif;
  --mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace;
  --r:0px; --rs:0px;
}
:root[data-theme="dark"] { color-scheme:dark; }
body { font-size:15px; }
.wrap { max-width:1200px; padding:0 36px; }
.chart-header { padding:28px 0 0; }
.brandrow { flex-wrap:nowrap; padding:0 0 23px; gap:22px; border-bottom:2px solid var(--text); }
.chart-brand { display:flex; align-items:center; gap:12px; color:var(--text); text-decoration:none; font:bold 36px/1 Arial,sans-serif; letter-spacing:-2px; }
.chart-brand svg { width:36px; height:36px; }
.brand-dot { color:var(--aqua-text); }
.theme-choices { display:flex; margin-left:auto; gap:3px; padding:3px; border:1px solid var(--line); background:var(--panel); }
.theme-choices button { min-height:38px; min-width:90px; border:1px solid transparent; padding:7px 12px; background:transparent; color:var(--mute); font:12px var(--mono); cursor:pointer; }
.theme-choices button span { margin-right:5px; }
.theme-choices button[aria-pressed="true"] { color:var(--ink); background:var(--text); border-color:var(--text); }
.theme-choices button:hover { border-color:var(--aqua-text); }
.chart-intro { display:grid; grid-template-columns:1fr 240px; gap:50px; padding:31px 0 27px; align-items:center; }
h1 { font-family:Arial,sans-serif; font-size:clamp(36px,4.7vw,60px); font-weight:800; line-height:1.03; letter-spacing:-.055em; max-width:none; margin:0 0 13px; }
h1 span { color:var(--aqua-text); }
.lede { font-size:16px; max-width:59ch; line-height:1.6; margin:0; color:var(--mute); }
.chart-meta { display:flex; gap:16px; justify-content:space-between; align-items:center; padding:12px 0; border-top:1px solid var(--hair); border-bottom:1px solid var(--line); }
.stamp { border:0; background:none; padding:0; border-radius:0; font-size:10px; color:var(--mute); letter-spacing:.04em; }
.stamp::before { content:''; display:inline-block; width:6px; height:6px; background:var(--aqua-text); margin-right:9px; border-radius:50%; }
.credit { margin:0; font-size:10px; letter-spacing:0; text-transform:none; color:var(--mute); }
main > section:nth-of-type(n + 4)::before { display:none; }
section { margin:32px 0; }
.daysection { margin-top:23px; }
.shead { border-bottom:1px solid var(--line); padding-bottom:11px; margin-bottom:16px; gap:12px; }
.shead h2 { font:700 15px var(--disp); letter-spacing:.015em; text-transform:none; }
.shead h2::before { font-size:10px; border:1px solid var(--line); padding:3px 4px; }
.shead .note { color:var(--mute); font-size:10px; letter-spacing:.025em; text-transform:none; }
.shead .note::before,.shead .note::after { content:none; }
.pills { gap:0; border-top:1px solid var(--hair); border-left:1px solid var(--hair); }
.pill { border:0; border-right:1px solid var(--hair); border-bottom:1px solid var(--hair); box-shadow:none; background:var(--panel); border-radius:0; }
.pill:hover { transform:none; background:var(--panel2); }
.pill[aria-pressed="true"] { background:var(--panel2); box-shadow:inset 0 3px 0 var(--aqua); }
.pill .pn { font-family:var(--body); font-size:14px; letter-spacing:0; text-transform:none; }
.pill .pv { font:600 24px/1.2 var(--numeral); margin-top:10px; }
.pill .pb { font-size:10px; letter-spacing:0; color:var(--mute); }
.pill .pillmain { padding:16px 34px 15px 16px; min-height:140px; }
.pill .star { width:32px; height:32px; top:7px; right:5px; }
.showmore { border:0; border-right:1px solid var(--hair); border-bottom:1px solid var(--hair); min-height:44px; font-size:10px; }
.prob,.fanwrap,.card,.day,.signal,details,.tscroll { box-shadow:none; border-radius:0; }
.prob::before,.prob::after,.fanwrap::before,.fanwrap::after { display:none; }
.prob { border-top:3px solid var(--aqua); }
.logviz b { font-size:58px; letter-spacing:-.055em; }
.logrows .loggate { font-family:var(--body); font-weight:600; text-transform:none; }
.legend { letter-spacing:.01em; text-transform:none; gap:8px 15px; }
.legend span { background:none; border:0; border-radius:0; padding:2px 0; }
.daypills { gap:0; border-bottom:1px solid var(--line); }
.daypill { border-radius:0; box-shadow:none; border:0; background:transparent; border-bottom:3px solid transparent; }
.daypill[aria-pressed="true"] { background:var(--panel2); border-color:var(--aqua); box-shadow:none; }
.hourpill { border-radius:0; box-shadow:none; }
.day .med { font-family:var(--numeral); }
@media(min-width:860px) { .hero { grid-template-columns:290px minmax(0,1fr); gap:16px; } }
@media(max-width:699px) {
  .wrap { padding:0 18px; }
  .chart-header { padding-top:19px; }
  .brandrow { padding:0 0 18px; gap:10px; min-height:0; }
  .chart-brand { font-size:30px; gap:8px; }
  .chart-brand svg { width:29px; height:29px; }
  .theme-choices button { min-width:65px; min-height:38px; padding:7px; font-size:11px; }
  .theme-choices button span { margin-right:2px; }
  .chart-intro { display:block; padding:25px 0 22px; }
  h1 { font-size:42px; margin:0 0 12px; }
  .lede { font-size:14px; line-height:1.55; }
  .chart-meta { flex-wrap:wrap; gap:7px; padding:10px 0; }
  .stamp,.credit { font-size:9px; }
  .daysection { margin-top:18px; }
  section { margin:27px 0; }
  .pill .pillmain { min-height:132px; padding-left:12px; }
  .pill .pn { font-size:13px; }
  .shead .note { font-size:10px; }
  .logviz b { font-size:52px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; } }
@media(max-width:699px) {
  .chart-meta { flex-direction:column; align-items:flex-start; }
  .credit { line-height:1.5; }
}
/* Second pass: stronger daylight ink and a consistent five-step clarity scale. */
:root:not([data-theme="dark"]) { --text:#102c3b; --mute:#304d5a; --faint:#405d68; --aqua-text:#055c70; }
.forecast-sources { margin-top:14px; border:0; background:none; box-shadow:none; max-width:620px; }
.forecast-sources[open] { box-shadow:none; }
.forecast-sources summary { padding:0; display:flex; justify-content:flex-start; flex-wrap:wrap; gap:6px 12px; font:11px/1.6 var(--body); letter-spacing:0; text-transform:none; color:var(--text); }
.forecast-sources summary span { color:var(--aqua-text); text-decoration:underline; text-underline-offset:3px; }
.forecast-sources summary::after { content:'+'; font-size:14px; }
.forecast-sources[open] summary::after { content:'−'; }
.forecast-sources>div { padding:8px 0 0; }
.forecast-sources p { font:12px/1.6 var(--body); color:var(--mute); margin:6px 0 0; }
.pill .clarity-name { font:700 24px/1.15 var(--body); color:var(--text); margin:12px 0 9px; letter-spacing:-.035em; }
.site-sea-state { font:11px/1.5 var(--body); color:var(--mute); margin-top:7px; }
.site-sea-state b { font-weight:600; }
.pill .pb { font-family:var(--body); font-size:11px; text-transform:none; margin-top:8px; }
.pill .spark { margin-top:10px; }
.pill .pillmain { min-height:190px; }
.pill .pn::before { display:none; }
.hero-clarity { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--hair); padding:13px 0; }
.hero-clarity>span { font:600 14px var(--body); }
.prob .lab,.logrows dt,.logrows dd,.logviz-note,.prob .verdict { font-family:var(--body); letter-spacing:0; text-transform:none; }
.prob .lab { font-size:12px; font-weight:600; }
.logviz { border-bottom:0; }
.logviz b { font-family:var(--body); font-weight:750; color:var(--text); }
.logviz b span { font-size:22px; font-weight:500; color:var(--mute); }
.logviz-note { font-size:11px; }
.logrows dt { font-size:12px; }
.logrows dd { font-size:13px; }
.logrows .loggaterow dd { font-size:12px; }
.prob .verdict { font-size:13px; line-height:1.6; color:var(--mute); }
@media(max-width:699px) {
  .pill .clarity-name { font-size:23px; }
  .forecast-sources summary { font-size:11px; }
  .hero-clarity { justify-content:flex-start; gap:16px; }
}
/* Five distinct chart inks restore quick comparison without losing the scale. */
:root {
  --clarity-1:#a12e43; --clarity-2:#80518c; --clarity-3:#4b6383;
  --clarity-4:#08715c; --clarity-5:#1654a0;
}
:root[data-theme="dark"] { --clarity-1:#ff91a2; --clarity-2:#d4a4e4; --clarity-3:#adc2e2; --clarity-4:#75d6b3; --clarity-5:#8ebeff; }
.pill { border-left:4px solid var(--state); background:color-mix(in srgb,var(--state) 4%,var(--panel)); }
.pill:hover { background:color-mix(in srgb,var(--state) 9%,var(--panel)); }
.pill[aria-pressed="true"] { outline:2px solid var(--text); outline-offset:-2px; box-shadow:none; background:color-mix(in srgb,var(--state) 8%,var(--panel)); }
.pill .clarity-reading { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px; margin:12px 0 9px; color:var(--state); }
.clarity-reading b { font:750 34px/1 var(--body); letter-spacing:-.04em; }
.clarity-reading small { font-size:17px; font-weight:500; }
.pill .clarity-reading .clarity-name { color:var(--state); font:600 14px/1.2 var(--body); margin:0; letter-spacing:0; }
.hero-clarity>span { color:var(--clarity-color); }
.site-sea-state.sea-caution { font-size:12px; font-weight:600; padding:4px 6px; border-left:2px solid currentColor; background:color-mix(in srgb,currentColor 8%,var(--panel)); }

/* Cool caution ink keeps brown and ochre out of the chart view. */
:root:not([data-theme="dark"]) { --gold:#76518e; --gold-rgb:118,81,142; --silt:#526b80; }

/* Working forecast, with the existing theviz identity and quieter structure. */
.chart-header { padding-top:25px; }
.chart-brand { font:700 21px/1 'Copperplate','Copperplate Gothic Bold','Trebuchet MS',Arial,sans-serif; letter-spacing:.035em; gap:9px; }
.chart-brand img { width:26px; height:26px; border-radius:50%; }
.brandrow { border-bottom:1px solid var(--line); padding-bottom:18px; }
.chart-intro { display:block; padding:24px 0 20px; }
h1 { font-size:30px; line-height:1.2; font-weight:700; letter-spacing:-.025em; margin-bottom:8px; }
.lede { font-size:15px; max-width:66ch; }
.forecast-sources { margin-top:10px; }
.chart-meta { border-top:0; padding:0 0 14px; }
.shead h2::before { display:none; }
.shead h2 { font-size:17px; letter-spacing:0; }
.shead { border-bottom:0; margin-bottom:13px; padding-bottom:0; }
.pills { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px; border:0; }
.pill { border:0; border-bottom:1px solid var(--hair); background:transparent; }
.pill:hover { background:color-mix(in srgb,var(--state) 4%,var(--ink)); }
.pill[aria-pressed="true"] { outline:none; background:color-mix(in srgb,var(--state) 6%,var(--ink)); box-shadow:inset 3px 0 0 var(--state); }
.pill .pillmain { display:grid; grid-template-columns:minmax(0,1fr) 110px; align-items:center; gap:7px 14px; min-height:145px; padding:15px 16px; }
.pill .pn { grid-column:1/-1; padding-right:24px; font-size:14px; }
.pill .clarity-reading { grid-column:1; grid-row:2; margin:0; gap:5px 9px; }
.clarity-reading b { font-size:32px; }
.pill .clarity-rating { grid-column:2; grid-row:2; justify-content:flex-end; }
.pill .clarity-steps i { width:13px; }
.pill .pb { grid-column:1; grid-row:3; margin:0; }
.pill .spark { grid-column:2; grid-row:3; margin:0; height:18px; }
.pill .site-sea-state { grid-column:1/-1; grid-row:4; margin:0; }
.pill .site-sea-state.sea-caution { padding:3px 6px; }
.showmore { border:0; border-bottom:1px solid var(--hair); font-family:var(--body); text-transform:none; letter-spacing:0; }
.prob { background:transparent; border:0; border-top:2px solid var(--line); padding:18px 0; }
.fanwrap { border:0; padding:16px 0; background:transparent; }
.card:not(.mapcard),.signal { border:0; border-top:1px solid var(--hair); background:transparent; }
.baseline-link { font:12px var(--body); color:var(--mute); text-underline-offset:3px; }
.site-footer { flex-wrap:wrap; }
@media(max-width:699px) {
  .chart-header { padding-top:18px; }
  .chart-brand { font-size:20px; }
  .chart-intro { padding:20px 0 16px; }
  h1 { font-size:26px; max-width:18ch; }
  .lede { font-size:14px; }
  .pills { grid-template-columns:minmax(0,1fr); gap:0; }
  .pill .pillmain { min-height:140px; padding:14px 10px; }
  .pill .clarity-reading .clarity-name { font-size:13px; }
}
/* Compact comparison rows: forecast detail stays in the selected-site view. */
.pill .pillmain { grid-template-columns:minmax(0,1fr) 120px; gap:3px 10px; min-height:80px; padding:10px 40px 10px 12px; }
.pill .pn { grid-column:1; grid-row:1; padding:0; font-size:13px; line-height:1.25; }
.pill .clarity-reading { grid-column:2; grid-row:1; justify-content:flex-end; flex-wrap:nowrap; gap:6px; }
.pill .clarity-reading b { font-size:25px; }
.pill .clarity-reading small { font-size:13px; }
.pill .clarity-reading .clarity-name { font-size:11px; white-space:nowrap; }
.pill .site-sea-state { grid-column:1/-1; grid-row:2; font-size:11px; line-height:1.4; }
.pill .site-sea-state.sea-caution { font-size:11px; padding:1px 5px; }
.pill .pb { grid-column:1; grid-row:3; font-size:10px; line-height:1.4; }
.pill .clarity-rating { grid-column:2; grid-row:3; gap:7px; }
.pill .clarity-fraction { font-size:10px; }
.pill .clarity-steps i { height:5px; }
.pill .spark { display:none; }
.pill .star { top:9px; right:4px; }
@media(max-width:359px) {
  .pill .pillmain { grid-template-columns:minmax(0,1fr) 108px; padding-left:8px; gap:3px 6px; }
  .pill .clarity-reading b { font-size:23px; }
  .pill .pn { font-size:12px; }
  .pill .clarity-steps i { width:11px; }
}
/* Chart plate: entry status and water clarity have separate visual roles. */
:root { --clarity-1:#626f79; --clarity-2:#566b83; --clarity-3:#375b83; --clarity-4:#126b80; --clarity-5:#095bad; --entry-caution:#d5a020; }
:root[data-theme="dark"] { --clarity-1:#b3bcc3; --clarity-2:#b4c4d6; --clarity-3:#9fbce0; --clarity-4:#78d1df; --clarity-5:#82bcff; --entry-caution:#f0c260; }
 :root:not([data-theme="dark"]) body { background-image:linear-gradient(90deg,rgba(var(--tint-rgb),.012) 1px,transparent 1px),linear-gradient(rgba(var(--tint-rgb),.012) 1px,transparent 1px); background-size:80px 80px; background-repeat:repeat; }
.pills { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.pill { border:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--panel); }
.pill:hover { background:var(--panel2); }
.pill[aria-pressed="true"] { background:var(--surface-hi); outline:2px solid var(--text); outline-offset:-2px; box-shadow:none; }
.pill .pillmain { grid-template-columns:minmax(0,1fr) 62px; grid-template-rows:minmax(18px,auto) auto auto; min-height:115px; padding:13px 12px 11px; gap:7px 10px; }
.pill .pn { grid-column:1/-1; grid-row:1; padding-right:20px; font-size:13px; font-weight:600; line-height:1.3; }
.pill .site-sea-state { grid-column:1/-1; grid-row:2; display:flex; align-items:center; gap:6px; margin:0; color:var(--text); font:600 13px/1.3 var(--body); }
.site-sea-state i { width:6px; height:6px; background:currentColor; flex:none; border-radius:50%; }
.pill .site-sea-state[data-entry="go"] { color:var(--moss); }
.pill .site-sea-state[data-entry="marginal"] i { background:var(--entry-caution); }
.pill .site-sea-state[data-entry="no-go"] { color:var(--rust); }
.pill .clarity-reading { display:flex; flex-direction:column; align-items:flex-start; grid-column:1; grid-row:3; gap:2px; margin:0; color:var(--viz-color); }
.pill .clarity-reading b { font:600 26px/1 var(--body); letter-spacing:-.03em; }
.pill .clarity-reading small { font-size:13px; font-weight:400; }
.pill .clarity-reading .clarity-name { margin:0; padding:0; border:0; border-radius:0; background:none; color:var(--mute); font:10px/1.2 var(--mono); letter-spacing:.03em; text-transform:uppercase; }
.pill .pb { display:none; }
.pill .spark { display:block; grid-column:2; grid-row:3; width:100%; height:22px; margin:0; opacity:.8; align-self:center; }
.pill .star { top:8px; right:4px; width:28px; height:28px; }
.showmore { border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper); }
.prob,.fanwrap { background:var(--panel); border:1px solid var(--line); padding:18px; }
.prob::before,.prob::after,.fanwrap::before,.fanwrap::after { display:block; opacity:.4; width:8px; height:8px; }
.shead { border-bottom:1px solid var(--line); padding-bottom:9px; }
@media(min-width:1000px) { .pills { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:359px) { .pill .pillmain { padding:12px 9px; grid-template-columns:minmax(0,1fr) 42px; gap:7px; } .pill .pn { font-size:12px; } .pill .site-sea-state { font-size:12px; } }

/* Quiet favourites, compact time controls and a more legible calibration credit. */
.chart-brand svg{width:27px;height:27px;flex:none}
.pill .star{color:var(--mute);opacity:.42;font-size:13px;width:30px;height:30px;top:5px;right:3px}
.pill .star[aria-pressed="true"]{color:var(--mute);opacity:.58}
.pill .star:hover,.pill .star:focus-visible{opacity:1;color:var(--text)}
.daypill{min-height:0;padding:8px 12px;gap:2px}
.daypill .dpn{font-size:12px}
.daypill .dpv{font-size:11px}
.daypill.outlook .dpn,.daypill.outlook .dpv{opacity:1}
.hourpills{margin-top:7px;gap:4px}
.hourpill{padding:5px 7px 4px;min-width:55px}
.hourpill .hpt{font-size:11px}
.hourpill .hpv{font-size:10px}
.credit{font:12px/1.5 var(--body);color:var(--text)}
.credit a{font-weight:600}
:root{--gold:#996407;--gold-rgb:153,100,7}

@media(max-width:699px){.daypill{padding:7px 11px}.credit{font-size:12px}.chart-meta{gap:8px}}

.brandrow{flex-wrap:wrap}

/* Keep Classic's expressive welcome above the practical chart-table forecast. */
h1{font-family:'Superclarendon','Clarendon','Bookman Old Style',Georgia,serif;font-size:clamp(34px,7vw,52px);font-weight:700;line-height:1.06;letter-spacing:-.01em;max-width:19ch;margin:4px 0 15px}
h1 em{font-style:normal;color:#0b93be}
:root[data-theme="dark"] h1 em{color:#29c4e8}
.chart-brand img{width:26px;height:26px;border-radius:50%;flex:none}
.credit{font-size:11.5px}
@media(max-width:699px){h1{font-size:34px;max-width:19ch}.credit{font-size:11.5px}}

/* Ink inherits Classic’s palette and background from styles.css. */
:root[data-theme="dark"] { --entry-caution:var(--gold); }

/* Selector review: separate each target and make the active choice obvious. */
.daypills{gap:8px;border-bottom:0;padding-bottom:2px}
.daypill{min-height:64px;padding:11px 16px;gap:5px;border:1px solid var(--line);border-radius:2px;background:var(--panel);text-align:left}
.daypill .dpn{font-size:13px;color:var(--text)}
.daypill .dpv{font-size:12px;color:var(--mute)}
.daypill[aria-pressed="true"]{border-color:var(--aqua-text);background:color-mix(in srgb,var(--aqua) 9%,var(--panel));box-shadow:inset 0 -3px var(--aqua)}
.daypill[aria-pressed="true"] .dpn{font-weight:700}
.daypill:hover{border-color:var(--aqua-text)}
.hourpills{margin-top:14px;gap:8px;padding:2px 1px 5px}
.hourpill{min-width:72px;min-height:56px;padding:9px 11px 8px;gap:5px;border-radius:2px}
.hourpill .hpt{font-size:12px;color:var(--text)}
.hourpill .hpv{font-size:11px;color:var(--mute)}
.hourpill[aria-pressed="true"]{background:color-mix(in srgb,var(--aqua) 12%,var(--panel));box-shadow:inset 0 2px var(--aqua)}
.daypill:focus-visible,.hourpill:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}
@media(max-width:699px){.daypill{min-width:106px;padding:10px 13px}.daypills{gap:8px}.hourpills{margin-top:12px}.hourpill{min-width:70px;flex:0 0 auto}}

/* Daylight Paper: dark chart inks, white instruments and crisp boundaries. */
:root:not([data-theme="dark"]){
  --ink:#f7fafb;--panel:#ffffff;--panel2:#e5edf2;--surface-hi:#ffffff;
  --text:#102535;--mute:#2b4352;--faint:#3e5664;--line:#a9bbc6;--hair:#c7d3db;--chart-grid:#dce4e9;
  --aqua:#087598;--aqua-text:#005c83;--aqua-rgb:8,117,152;--viz:#005c83;
  --moss:#146344;--rust:#982b2f;--gold:#8b5b00;--gold-rgb:139,91,0;--entry-caution:#8b5b00;
  --clarity-1:#425664;--clarity-2:#354e6b;--clarity-3:#204c78;--clarity-4:#005c73;--clarity-5:#064b8c;
}
:root:not([data-theme="dark"]) h1 em{color:#006f97}
:root:not([data-theme="dark"]) .pill .spark{opacity:1}
.chart-header>h1{margin-top:28px}
.chart-header>.lede{margin-bottom:16px}
.chart-header>.forecast-sources{margin-bottom:20px}
.chart-header .theme-switch{flex:none}
.feedback-box summary{font:600 15px/1.4 var(--body);letter-spacing:0;text-transform:none;color:var(--text)}
@media(max-width:699px){
  .prob .logviz b{font-size:30px;line-height:1.1}
  .prob .logviz b span{font-size:15px}
  .pill .clarity-reading b{font-size:22px}
}
/* A compact instrument switch: two words, one quiet enclosure. */
#themeToggle.theme-switch{gap:2px;padding:3px;border:1px solid var(--line);border-radius:5px;background:var(--panel)}
#themeToggle.theme-switch button{display:inline-flex;align-items:center;justify-content:center;gap:0;min-width:50px;min-height:28px;padding:5px 9px;border:1px solid transparent;border-radius:3px;background:transparent;box-shadow:none;color:var(--mute);font:500 12px/1.2 var(--body);letter-spacing:.01em}
#themeToggle.theme-switch button[aria-pressed="true"]{background:var(--panel2);border-color:var(--hair);color:var(--text);font-weight:700;box-shadow:none}
#themeToggle.theme-switch button:hover{background:var(--panel2);color:var(--text)}
#themeToggle.theme-switch button:focus-visible{outline:2px solid var(--aqua-text);outline-offset:1px}
.pill .pb{display:block;grid-column:1/-1;grid-row:4;margin:0;color:var(--mute);font-size:11px;line-height:1.3}
.pill .pillmain{grid-template-rows:minmax(18px,auto) auto auto auto}
@media(max-width:699px){.chart-header>h1{margin-top:22px}}
@media(max-width:359px){.chart-brand{font-size:18px;gap:7px}.brandrow{gap:10px}}

/* Keep the desktop workspace structure while using the Chart presentation. */
@media(min-width:1100px){
  .wrap:has(> #app)>.chart-header{align-items:start;row-gap:0}
  .wrap:has(> #app) .chart-header>h1{margin:0;grid-row:2/4}
  .wrap:has(> #app) .chart-header>.lede{grid-row:2;margin-bottom:12px}
  .wrap:has(> #app) .chart-header>.forecast-sources{grid-column:2;grid-row:3;margin-bottom:18px}
  .wrap:has(> #app) .chart-meta{grid-column:1/-1;margin-top:14px;width:100%;border:0;padding-bottom:0}
  .wrap:has(> #app) .chart-meta .stamp{margin:0}
  .wrap:has(> #app) .chart-meta .credit{font-size:11.5px;letter-spacing:0}
  #app .pill .pillmain{display:grid;min-height:116px;gap:5px 10px;padding:12px 12px 10px}
  #app .pill .pv{margin:0}
  #app .pill .pb{grid-column:1/-1;grid-row:4;margin:0;font-size:10.5px}
  #app .pill .spark{margin:0;height:22px}
  #app .prob .hero-clarity{grid-column:1;grid-row:3;justify-content:flex-start;margin:0;padding:6px 0;border:0}
  #app .prob .hero-clarity>span{font-size:12px}
  #app .prob .logremark-lab{grid-row:4}
  #app .prob .verdict{grid-row:5}
  #app .prob .logrows{grid-row:1/6}
  #app .daypills{gap:8px}
  #app .daypill{min-height:64px}
}

/* Weather context and stirring use a cool chart ink, separate from entry gates. */
:root:not([data-theme="dark"]){--gate-go:#16834f;--gate-caution:#d59510;--gate-stop:#c63c45}
:root:not([data-theme="dark"]) .fan-gate{opacity:1}
:root:not([data-theme="dark"]) .fan-gate[data-gate="go"]{fill:var(--gate-go)}
:root:not([data-theme="dark"]) .fan-gate[data-gate="caution"]{fill:var(--gate-caution)}
:root:not([data-theme="dark"]) .fan-gate[data-gate="stop"]{fill:var(--gate-stop)}
:root{--advisory:#586684;--advisory-rgb:88,102,132;--stir:var(--advisory)}
:root[data-theme="dark"]{--advisory:#a7bad8;--advisory-rgb:167,186,216}
.advflag{color:var(--advisory);background:color-mix(in srgb,var(--advisory) calc(7% + var(--over)*10%),var(--panel));border-color:color-mix(in srgb,var(--advisory) calc(24% + var(--over)*24%),var(--hair))}
.advchip{color:var(--advisory);background:color-mix(in srgb,var(--advisory) 8%,var(--panel));border-color:color-mix(in srgb,var(--advisory) 28%,var(--hair))}