/* Current forecast component. */
.forecast-meteogram{--mf-temp:#c04459;--mf-rain:#297dab;--mf-ink:var(--ink,var(--text));--mf-muted:var(--muted);--mf-paper:var(--surface);--mf-line:var(--border);--mf-control-paper:#fff;--mf-control-wash:#f7f9f7;--mf-control-ink:#4b5b53;--mf-control-muted:#64756c;--mf-control-line:#e1e8e2;width:100%;min-width:0}
.mf-card{background:var(--mf-paper);border:1px solid var(--mf-line);border-radius:20px;box-shadow:0 8px 28px #193c2810;overflow:hidden;color:var(--mf-ink)}
.mf-card *{box-sizing:border-box}.mf-card [hidden]{display:none!important}
.mf-topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;padding:1.5rem 1.5rem .75rem}
.mf-ranges{display:flex;padding:.2rem;gap:.25rem;border:1px solid var(--mf-control-line);border-radius:.55rem;background:var(--mf-control-wash);flex-shrink:0}
.mf-card button{font:inherit;cursor:pointer}.mf-ranges button{border:1px solid transparent;border-radius:.4rem;min-height:2.2rem;padding:.4rem .65rem;color:var(--mf-control-muted);background:transparent;font-size:.78rem;font-weight:650;white-space:nowrap}.mf-ranges button[aria-pressed=true]{background:var(--mf-control-paper);border-color:var(--mf-control-line);color:var(--mf-control-ink);box-shadow:0 1px 4px #18342512}
.mf-days{display:flex;justify-content:flex-end;gap:.25rem;min-width:0;padding:.25rem 0 .25rem;overflow-x:auto;scrollbar-width:thin;background:transparent}.mf-day{flex:1 0 150px;min-width:0;min-height:64px;text-align:left;padding:.6rem .65rem;border:1px solid transparent;border-radius:.4rem;color:var(--mf-control-ink);background:transparent;position:relative;touch-action:manipulation}.mf-day[aria-pressed=true]{background:var(--mf-control-wash);border-color:var(--mf-control-line);box-shadow:0 1px 4px #18342512}.mf-day strong{display:block;font-size:.78rem;font-weight:650;line-height:1.4}.mf-day small{display:block;margin-top:.3rem;color:var(--mf-control-muted);font-size:.7rem;line-height:1.4;font-variant-numeric:tabular-nums;white-space:nowrap}.mf-day b{color:var(--mf-control-ink);font-weight:600}.mf-day svg{width:22px;height:22px;float:right;margin-left:.4rem;opacity:.85}
@media(hover:hover){.mf-day:hover,.mf-ranges button:not([aria-pressed=true]):hover{background:var(--mf-control-wash);color:var(--mf-control-ink)}}
.mf-scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;touch-action:pan-x pan-y}.mf-plot{min-width:100%}.mf-plot>svg{display:block;width:100%;height:390px;user-select:none}.mf-plot text{font-family:inherit;fill:var(--mf-muted);font-size:11px;font-variant-numeric:tabular-nums}.mf-plot .mf-temperature{fill:var(--mf-temp);font-size:13px;font-weight:750;paint-order:stroke;stroke:var(--mf-paper);stroke-width:5px;stroke-linejoin:round}.mf-plot .mf-axis-label{font-size:10px;font-weight:700;letter-spacing:.5px}.mf-plot .mf-day-label{fill:var(--mf-ink);font-weight:700;font-size:12px}.mf-cursor{pointer-events:none}.mf-cursor line{stroke:var(--accent);stroke-width:1;stroke-dasharray:3 4}.mf-cursor circle{fill:var(--mf-paper);stroke:var(--mf-temp);stroke-width:3}
.mf-interaction{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 22px 12px;min-height:34px}.mf-hint{font-size:11px;color:var(--mf-muted)}.mf-reset{font-size:12px!important;color:var(--accent);padding:8px 0;border:0;background:none;text-decoration:underline;min-height:44px}
.mf-detail{margin:0 18px;display:grid;grid-template-columns:1.5fr repeat(3,1fr);border-radius:12px;background:var(--surface-soft);padding:16px 18px;gap:18px;min-height:86px}.mf-detail div{min-width:0}.mf-detail span{display:block;font-size:11px;color:var(--mf-muted);margin-bottom:5px}.mf-detail strong{display:block;font-size:16px;line-height:1.35;font-variant-numeric:tabular-nums}.mf-detail .mf-moment strong{font-size:13px}.mf-detail .mf-moment span{color:var(--mf-ink)}.mf-detail small{font-size:11px;color:var(--mf-muted);display:block;margin-top:3px}

.mf-table{border-top:1px solid var(--mf-line);font-size:12px}.mf-table summary{cursor:pointer;padding:15px 22px;color:var(--mf-muted);min-height:44px}.mf-table-scroll{overflow:auto;max-height:300px}.mf-table table{width:100%;border-collapse:collapse;white-space:nowrap;font-variant-numeric:tabular-nums}.mf-table td,.mf-table th{padding:10px 15px;border-bottom:1px solid var(--mf-line);text-align:left}.mf-table th{background:var(--surface-soft);position:sticky;top:0}.mf-table caption{text-align:left;padding:10px 15px}
.mf-status{padding:50px 22px;text-align:center;color:var(--mf-muted)}.mf-status a{display:block;margin-top:12px}.mf-card :focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
[data-theme=dark] .forecast-meteogram{--mf-temp:#f28b9b;--mf-rain:#6dbceb;--mf-control-paper:#17271f;--mf-control-wash:#1c2e25;--mf-control-ink:#d9e1dc;--mf-control-muted:#a2b6a9;--mf-control-line:#31463a}
@media(max-width:640px){.mf-card{border-radius:16px}.mf-topbar{grid-template-columns:1fr;gap:10px;align-items:stretch}.mf-ranges{justify-self:end}.mf-days{justify-content:flex-start;padding:.25rem 0 .5rem}.mf-detail{grid-template-columns:repeat(3,minmax(0,1fr));margin:0 10px;padding:13px 12px;gap:12px 8px}.mf-detail .mf-moment{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--mf-line);padding-bottom:10px}.mf-detail .mf-moment span{margin:0}.mf-detail strong{font-size:14px}.mf-detail span,.mf-detail small{font-size:10px}.mf-interaction{padding:0 12px 8px;flex-wrap:wrap;gap:0}.mf-hint{font-size:10px}.mf-table summary{padding:13px 14px}.mf-plot>svg{height:390px}}

.mf-card button:disabled{opacity:.5;cursor:default}

/* Match the station chart's range control sizes at the same breakpoints. */
@media(max-width:767px){.mf-topbar{padding:.85rem .85rem .55rem}.mf-ranges{gap:0;padding:3px}.mf-ranges button{min-height:2.2rem;padding:.34rem .5rem;font-size:.7rem}.mf-days{padding:.2rem .85rem .6rem}.mf-day{flex-basis:140px}.mf-day strong{font-size:.7rem}.mf-day small{font-size:.68rem}}
@media(max-width:360px){.mf-topbar{padding:.6rem .6rem .55rem}.mf-ranges button{min-height:2rem;padding:.3rem .35rem;font-size:.68rem}.mf-days{padding-inline:.6rem}}

/* Keep hourly readouts steady while scrubbing; long descriptions stay on one line. */
.mf-detail span,.mf-detail strong,.mf-detail small{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mf-detail small{line-height:1.4}
@media(max-width:640px){.mf-detail .mf-moment>span{flex-shrink:0}}

/* A complete seven-day overview, including its day selectors, fits at 1000 px. */
@media(min-width:1000px){.mf-card[data-range="7"] .mf-days{display:grid;grid-template-columns:repeat(var(--mf-day-count,7),minmax(0,1fr))}.mf-card[data-range="7"] .mf-day{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:center;column-gap:.2rem}.mf-card[data-range="7"] .mf-day strong{grid-column:1;grid-row:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mf-card[data-range="7"] .mf-day small{grid-column:1/-1;grid-row:2;overflow:hidden;text-overflow:ellipsis}.mf-card[data-range="7"] .mf-day svg{grid-column:2;grid-row:1;float:none;margin:0}}
@media(min-width:1000px) and (max-width:1199px){.mf-card[data-range="7"] .mf-day{padding:.55rem .2rem}.mf-card[data-range="7"] .mf-day strong{font-size:.7rem}.mf-card[data-range="7"] .mf-day small{font-size:.65rem}.mf-card[data-range="7"] .mf-day svg{width:18px;height:18px}}

@media(min-width:641px){.mf-topbar>.mf-days{grid-column:1;grid-row:1}.mf-topbar>.mf-ranges{grid-column:2;grid-row:1;justify-self:end}}

/* Keep the short day selector aligned with the range controls. Long timelines
   retain their left edge so the first day is always reachable while scrolling. */
@media(min-width:641px) and (max-width:999px){.mf-card[data-range="7"] .mf-days{justify-content:flex-start}}

/* Keep the shorter day set grouped at the right edge instead of stretching
   each button across the empty header space. */
@media(min-width:641px) and (max-width:999px){.mf-card[data-range="3"] .mf-day{flex:0 0 130px}}
@media(min-width:1000px){.mf-card[data-range="3"] .mf-day{flex:0 0 150px}}

/* Keep the forecast frame and detail block compact, with restrained control corners. */
.mf-card,.mf-detail{border-radius:3px}
.mf-ranges,.mf-ranges button,.mf-day{border-radius:4px}

/* Fitted charts select hours directly; enlarged timelines support native panning. */
.mf-card[data-pannable="false"] .mf-scroll{overflow-x:hidden;touch-action:pan-y;cursor:crosshair}
.mf-card[data-pannable="false"] .mf-plot{touch-action:pan-y}
.mf-card[data-pannable="true"] .mf-scroll{overflow-x:auto;touch-action:pan-x pan-y;cursor:grab}
.mf-card[data-pannable="true"] .mf-plot{touch-action:pan-x pan-y}
.mf-chart{position:relative}
.mf-zoom{justify-self:end;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:10px;border:1px solid color-mix(in srgb,var(--mf-control-line) 65%,transparent);border-radius:4px;background:color-mix(in srgb,var(--mf-control-paper) 75%,transparent);color:var(--mf-control-ink);box-shadow:0 2px 8px #1834250d}
.mf-zoom svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mf-day-rain::before{content:' · '}

@media(max-width:640px){.mf-card .mf-days{display:none}.mf-topbar{grid-template-columns:minmax(0,1fr) auto}.mf-zoom{grid-column:1;grid-row:1}.mf-ranges{grid-column:2;grid-row:1}}

/* Omit the empty reset row when the full forecast is visible. */
.mf-interaction:has(.mf-reset[hidden]){display:none}