/* Weather Tracker. Uses the site's tokens (styles.css). Series colours are a validated categorical palette
   (fixed order, one slot per source by sort order), tuned for the site's light cream surface. */
.wx [hidden] { display: none !important; }
.wx {
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300; --s7: #6250d6;
  --grid: var(--line); --good: var(--live); --meh: #8A5A1E; --bad: var(--danger);
}
.wx-head h1 { margin-bottom: 4px; }
.wx-lede { max-width: 70ch; margin-top: 0; }
.wx-scroll { overflow-x: auto; }

/* day picker + metric switch */
.wx-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 24px; }
.wx-nav { display: flex; gap: 6px; align-items: center; }
.wx-btn { display: inline-block; padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--panel); line-height: 1.2; }
.wx-btn:hover { border-color: var(--accent); text-decoration: none; }
.wx-btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.wx-nav input[type="date"] { padding: 6px 8px; color-scheme: light; }
.wx-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.wx-seg label { flex-direction: row; margin: 0; color: var(--text); font-size: .92rem; }
.wx-seg input { position: absolute; opacity: 0; pointer-events: none; }
.wx-seg span { padding: 7px 12px; cursor: pointer; border-left: 1px solid var(--line); }
.wx-seg label:first-child span { border-left: 0; }
.wx-seg input:checked + span { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.wx-seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }
.wx-title { border: 0; margin: 18px 0 2px; padding: 0; font-size: 1.35rem; }
.wx-note { margin: 0 0 8px; }

/* chart */
.wx-figure { position: relative; margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 12px 8px; }
.wx-chart svg { display: block; width: 100%; height: auto; overflow: visible; font: 12px system-ui, -apple-system, "Segoe UI", sans-serif; }
.wx-chart .grid line { stroke: var(--grid); stroke-width: 1; }
.wx-chart .axis text { fill: var(--muted); }
.wx-chart .axis text.strong { fill: var(--text); font-weight: 600; }
.wx-chart .future { fill: var(--text); opacity: .045; }
.wx-chart .future-label { fill: var(--muted); font-size: 11px; }
.wx-chart .series path { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.wx-chart .series circle { stroke: var(--panel); stroke-width: 2; }
.wx-chart .series.off { display: none; }
.wx-chart .actual .aref { stroke: var(--olive); stroke-width: 1.5; stroke-dasharray: 5 4; }
.wx-chart .abox { fill: var(--olive); }
.wx-chart .abox.pending { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 4; }
.wx-chart .atick { stroke: var(--on-dark); stroke-width: 2.5; stroke-linecap: round; }
.wx-chart .avalue { fill: var(--on-dark); font-family: var(--font-head); font-weight: 700; font-size: 17px; }
.wx-chart .avalue.small { font-size: 12px; }
.wx-chart .apending { fill: var(--muted); font-size: 12px; }
.wx-chart .alabel { fill: var(--olive); font-weight: 700; }
.wx-chart .alabel.small { font-size: 10.5px; }
.wx-chart .asub { fill: var(--muted); }
@media (max-width: 600px) { .wx-chart .avalue { font-size: 13px; } }
.wx-chart .cross { stroke: var(--muted); stroke-width: 1; opacity: 0; }
.wx-chart .cross.on { opacity: .6; }
.wx-chart .hit { fill: transparent; cursor: crosshair; }
.wx-empty { padding: 48px 12px; text-align: center; color: var(--muted); }
.wx-tip { position: absolute; z-index: 2; pointer-events: none; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: .85rem; box-shadow: 0 6px 18px rgba(0,0,0,.25); min-width: 190px; }
.wx-tip h4 { margin: 0 0 4px; font-size: .85rem; }
.wx-tip table { border-collapse: collapse; width: 100%; }
.wx-tip td { padding: 1px 0; }
.wx-tip td.v { text-align: right; padding-left: 12px; font-variant-numeric: tabular-nums; font-weight: 600; }

/* legend: always present; doubles as show/hide toggles */
.wx-legend { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.wx-legend button { background: none; border: 0; padding: 2px 0; color: var(--text); font-weight: 400; font-size: .88rem; display: inline-flex; align-items: center; gap: 6px; }
.wx-legend button[aria-pressed="false"] { color: var(--muted); text-decoration: line-through; }
.wx-legend button[aria-pressed="false"] .sw { opacity: .3; }
.wx-legend .nodata { color: var(--muted); font-size: .88rem; }
.sw { display: inline-block; width: 14px; height: 4px; border-radius: 2px; flex: none; }
.sw.dot { width: 10px; height: 10px; border-radius: 50%; }
.wx-legend .sw-actual { width: 12px; height: 12px; background: var(--olive); border-radius: 3px; }
.c1 { background: var(--s1); } .c2 { background: var(--s2); } .c3 { background: var(--s3); } .c4 { background: var(--s4); }
.c5 { background: var(--s5); } .c6 { background: var(--s6); } .c7 { background: var(--s7); }

/* tables */
.wx-details { margin-top: 10px; }
.wx-details summary { cursor: pointer; color: var(--accent); font-size: .92rem; }
.wx-table { font-variant-numeric: tabular-nums; }
.wx-table th, .wx-table td { white-space: nowrap; }
.wx-table td.num, .wx-table th.num { text-align: right; }
.wx-table .src { display: inline-flex; align-items: center; gap: 8px; }
.wx-table .err { font-size: .78rem; margin-left: 4px; }
.err.good { color: var(--good); } .err.meh { color: var(--meh); } .err.bad { color: var(--bad); }
.wx-table tr.total td { font-weight: 600; border-top: 2px solid var(--line); }
.wx-week th a { color: var(--text); }
/* Yesterday (each call + its miss) | Actual (one tall cell) | Today ... : the actual is the dividing line */
.wx-week th.past, .wx-week td.past { background: var(--thead); }
.wx-week td.past .err { margin-left: 4px; font-size: .82rem; font-weight: 700; }
.wx-week td.past.closest { box-shadow: inset 0 0 0 2px var(--olive); }
.wx-week td.past .wx-closest { display: block; font-size: .66rem; line-height: 1.1; text-transform: uppercase; letter-spacing: .1em; color: var(--olive); font-weight: 700; }
.wx-week th.actual { background: var(--olive); color: var(--on-dark); text-align: center; }
.wx-week td.actual { background: var(--olive); color: var(--on-dark); text-align: center; vertical-align: middle; border-bottom-color: var(--olive); min-width: 104px; }
.wx-week td.actual .n { display: block; font-family: var(--font-head); font-weight: 700; font-size: 2.4rem; line-height: 1; font-variant-numeric: tabular-nums; }
.wx-week td.actual .s { display: block; margin-top: 6px; font-size: .85rem; }
.wx-week td.actual .s + .s { margin-top: 2px; opacity: .85; }
.wx-week tr.total td.actual { font-size: .78rem; font-weight: 400; vertical-align: top; }
.wx-week th.today a { color: var(--accent); }
.wx-week td .pop { color: var(--muted); font-size: .8rem; margin-left: 4px; }
.wx-week td .ico { margin-right: 4px; }
.wx-week td.lo { color: var(--muted); }
.wx-table td.dim { color: var(--muted); }
.wx-inline { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; }
.wx-inline select { font: inherit; padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); }

/* sources */
.wx-sources { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.wx-sources li { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.wx-sources .top { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.wx-sources .top a { color: var(--text); }
.wx-sources p { margin: 4px 0 0; font-size: .86rem; color: var(--muted); }
.wx-sources .st-ok { color: var(--good); }
.wx-sources .st-bad { color: var(--bad); }
.wx-sources .st-wait { color: var(--meh); }
.wx-sources code { font-size: .8rem; }
.wx-admin { margin-top: 12px; }
.wx-how li { margin-bottom: 6px; max-width: 80ch; }