/* Weather tab (js/weather-forecast.js): the call, one "now" line, the tire-window chart
 * and the stints. Tokens only; v2 tokens fall back for ?design=old. */
.wx-do { margin: 0; font-size: var(--v2-fs-lg, 18px); font-weight: 650; color: var(--text); }
.wx-why { margin: 2px 0 0; font-size: var(--v2-fs-sm, 13px); color: var(--text-2); font-weight: 500; }
.wx-nowline { margin: 0 0 8px; font-size: var(--v2-fs-sm, 13px); color: var(--text-2); font-variant-numeric: tabular-nums; }
.wx-win { font-size: 12px; font-weight: 600; fill: var(--text); }
.wx-ax-hi { fill: var(--text-2); }
/* A halo in the chart's own background, so the wetness line never runs through a label. */
.wx-win, .wx-ax-hi { paint-order: stroke; stroke: var(--v2-inset, var(--panel)); stroke-width: 4px; stroke-linejoin: round; }
.wx-stints { margin-top: var(--s3, 12px); overflow-x: auto; }
.wx-stints table { width: 100%; min-width: 0; border-collapse: collapse; font-size: var(--v2-fs-sm, 13px); }
.wx-stints th, .wx-stints td { padding: 6px 10px; text-align: left; white-space: nowrap; }
.wx-stints .num { text-align: right; font-variant-numeric: tabular-nums; }
.wx-stints .v2-pill { margin-left: 6px; }
.wx-explain, .wx-whatif { margin-top: var(--s3, 12px); }
.wx-x-h { margin: 10px 0 0; }
:where(html:not(.design-old)) .wx-do, :where(html:not(.design-old)) .wx-nowline, :where(html:not(.design-old)) .wx-win { font-family: var(--v2-font-display); }
/* The medium dashboard tile keeps the call, the now line and the graph. */
.rt-wx[data-size="M"] .wx-stints, .rt-wx[data-size="M"] .wx-stints + .wx-note { display: none; }
@media (max-width: 480px) {
    .wx-stints th, .wx-stints td { padding: 6px; white-space: normal; }
}

/* The timeline: focusable, with a readout under it (hover, tap or arrow keys). */
.wx-chart { touch-action: pan-y; cursor: crosshair; }
.wx-chart:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wx-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 0; font-size: 12px; }
.wx-lg::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 2px; vertical-align: -1px; }
.wx-lg-s::before { background: var(--dx-good, var(--accent)); opacity: .55; }
.wx-lg-m::before { background: var(--text-3, gray); opacity: .45; }
.wx-lg-w::before { background: var(--info); opacity: .6; }
.wx-lg-d::before { width: 14px; height: 0; border-top: 2px dashed var(--crit); border-radius: 0; vertical-align: 3px; }
.wx-read { margin: 4px 0 0; min-height: 1.5em; font-size: var(--v2-fs-sm, 13px); font-variant-numeric: tabular-nums; }

/* More options: try a forecast. A local preview, applied to the plan only on request. */
.wx-wi-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 120px; gap: 8px; align-items: center; margin-top: 8px; }
.wx-wi-row input[type="range"] { width: 100%; min-width: 0; accent-color: var(--accent); }
.wx-wi-row output { font-size: var(--v2-fs-sm, 13px); color: var(--text-2); }
.wx-wi-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.wx-wi-note { margin: 8px 0 0; font-size: var(--v2-fs-sm, 13px); }

/* Expand (the tile's header button, js/expand-panel.js) moves the panel out of .rt-wx, so these tile rules drop. */
.rt-wx[data-size="M"] #wxPanel .wx-whatif, .rt-wx[data-size="M"] #wxPanel .wx-read, .rt-wx[data-size="M"] #wxPanel .wx-explain { display: none; }
@media (max-width: 480px) {
    .wx-wi-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
/* The tile lets the graph fill: .wx-main sits between the panel and the chart. */
.rt-wx #wxPanel .wx-main { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-height: 0; }