/* ŻABOD 0.20 — Observatorium UX. Additive visual layer; map and gradient engines remain unchanged. */
:root {
  --obs-bg:#06100b;
  --obs-bg-2:#09180f;
  --obs-panel:#0c1d14;
  --obs-panel-2:#10271a;
  --obs-panel-raised:#143321;
  --obs-line:rgba(149,205,162,.16);
  --obs-line-strong:rgba(149,205,162,.3);
  --obs-ink:#edf7ef;
  --obs-muted:#9db5a4;
  --obs-green:#77dc58;
  --obs-green-bright:#a4f57e;
  --obs-green-deep:#1a5f32;
  --obs-blue:#42bbdb;
  --obs-shadow:0 24px 70px rgba(0,0,0,.28);
  --bg:var(--obs-bg); --panel:var(--obs-panel); --ink:var(--obs-ink); --muted:var(--obs-muted); --green:#39a956; --green-dark:#267b3e; --line:var(--obs-line); --shadow:var(--obs-shadow);
  color-scheme:dark;
}
:root[data-theme="light"] {
  --obs-bg:#edf3ed; --obs-bg-2:#e4eee5; --obs-panel:#ffffff; --obs-panel-2:#f5faf5; --obs-panel-raised:#eaf5eb;
  --obs-line:rgba(31,88,48,.15); --obs-line-strong:rgba(31,88,48,.28); --obs-ink:#173322; --obs-muted:#617868;
  --obs-green:#268845; --obs-green-bright:#217a3d; --obs-green-deep:#dff2e2; --obs-blue:#087da4;
  --obs-shadow:0 18px 46px rgba(23,61,34,.09); --bg:var(--obs-bg); --panel:var(--obs-panel); --ink:var(--obs-ink); --muted:var(--obs-muted); --green:#278847; --green-dark:#1c6e36; --line:var(--obs-line); --shadow:var(--obs-shadow);
  color-scheme:light;
}
* { box-sizing:border-box; }
html { min-width:320px; background:var(--obs-bg); }
body.zabod-v020 { margin:0; color:var(--obs-ink); background:radial-gradient(ellipse at 66% -15%,rgba(39,111,59,.25),transparent 36%),radial-gradient(ellipse at 0% 55%,rgba(23,83,43,.13),transparent 40%),var(--obs-bg); font-family:"KievitPro",Inter,ui-sans-serif,system-ui,sans-serif; min-height:100vh; }
:root[data-theme="light"] body.zabod-v020 { background:radial-gradient(ellipse at 65% -10%,rgba(119,205,132,.19),transparent 35%),var(--obs-bg); }
button,input,select { font:inherit; }
button { -webkit-tap-highlight-color:transparent; }
button:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid var(--obs-green); outline-offset:3px; }
.hidden { display:none!important; }
.topbar { z-index:50; position:sticky; top:0; width:100%; min-height:76px; display:grid; grid-template-columns:170px minmax(0,1fr) auto; align-items:center; gap:22px; padding:10px clamp(16px,2.4vw,38px); background:color-mix(in srgb,var(--obs-bg) 91%,transparent); backdrop-filter:blur(18px); border-bottom:1px solid var(--obs-line); }
.brand { min-width:0; display:flex; align-items:center; text-decoration:none; }
.brand-logo { width:154px; height:48px; max-width:100%; object-fit:contain; object-position:left center; }
.brand-logo-light { display:none; }
:root[data-theme="light"] .brand-logo-dark { display:none; }
:root[data-theme="light"] .brand-logo-light { display:block; }
:root[data-theme="dark"] .brand-logo-dark { filter:brightness(0) saturate(100%) invert(80%) sepia(83%) saturate(1198%) hue-rotate(38deg) brightness(98%) contrast(103%); }
.mode-switch { display:flex; min-width:0; flex-wrap:nowrap; justify-self:stretch; align-items:center; gap:5px; padding:0; border:0; border-radius:0; background:transparent; overflow:visible; }
.mode-btn,.nav-summary { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; white-space:nowrap; padding:0 13px; border:1px solid transparent; border-radius:11px; background:transparent; color:var(--obs-muted); font-size:13px; font-weight:650; cursor:pointer; transition:background .18s,border-color .18s,color .18s,transform .18s; }
.mode-btn:hover,.nav-summary:hover { color:var(--obs-ink); background:var(--obs-panel-2); border-color:var(--obs-line); }
.mode-btn.active { color:var(--obs-green-bright); background:rgba(58,169,86,.13); border-color:rgba(119,220,88,.23); box-shadow:inset 0 0 0 1px rgba(119,220,88,.035); }
.mode-btn.active::after { content:""; position:absolute; left:14px; right:14px; bottom:-7px; height:2px; border-radius:2px; background:var(--obs-green); }
.nav-summary { background:var(--obs-green-deep); color:var(--obs-ink); border-color:var(--obs-line); }
.nav-summary-icon { display:grid; place-items:center; width:21px; height:21px; border-radius:6px; color:var(--obs-green-bright); background:rgba(119,220,88,.11); font-size:15px; }
.nav-comingsoon { opacity:.64; border-style:dashed; border-color:var(--obs-line); }
.nav-comingsoon span { display:inline-block; font-size:9px; border:1px solid var(--obs-line-strong); border-radius:5px; padding:2px 4px; }
.topbar-actions { min-width:0; display:flex; justify-self:end; align-items:center; gap:10px; width:auto; }
.top-clock { display:flex; align-items:center; gap:8px; white-space:nowrap; color:var(--obs-muted); font-size:11px; font-variant-numeric:tabular-nums; }
.clock-dot,.status-pulse { flex:0 0 auto; width:6px; height:6px; border-radius:50%; background:var(--obs-green); box-shadow:0 0 0 4px rgba(119,220,88,.1); }
.search { position:relative; display:block; width:clamp(180px,17vw,260px); justify-self:end; }
.search input { width:100%; height:40px; border:1px solid var(--obs-line); border-radius:12px; padding:0 13px 0 36px; outline:none; color:var(--obs-ink); background:var(--obs-panel); font-size:12px; box-shadow:inset 0 1px 0 rgba(255,255,255,.015); }
.search input::placeholder { color:var(--obs-muted); }
.search input:focus { border-color:var(--obs-green); box-shadow:0 0 0 3px rgba(119,220,88,.1); }
.search-icon { position:absolute; z-index:1; left:12px; top:4px; font-size:24px; line-height:30px; color:var(--obs-muted); }
.search-results { position:absolute; z-index:100; top:calc(100% + 8px); left:0; right:0; min-width:260px; max-height:330px; overflow:auto; background:var(--obs-panel); color:var(--obs-ink); border:1px solid var(--obs-line-strong); border-radius:13px; box-shadow:var(--obs-shadow); }
.search-result { color:var(--obs-ink); background:transparent; border-bottom:1px solid var(--obs-line); padding:11px 13px; }
.search-result:hover,.search-result:focus { background:var(--obs-panel-raised); }
.theme-toggle { flex:0 0 auto; display:grid; place-items:center; width:42px; height:42px; border-radius:13px; border:1px solid var(--obs-line); background:var(--obs-panel); color:var(--obs-green-bright); cursor:pointer; font-size:20px; transition:transform .18s,border-color .18s; }
.theme-toggle:hover { transform:translateY(-1px); border-color:var(--obs-green); }
.app-shell { width:min(1920px,100%); margin:0 auto; padding:18px clamp(14px,2vw,30px) 24px; display:grid; grid-template-columns:minmax(320px, .72fr) minmax(0,1.85fr); gap:clamp(14px,1.4vw,22px); align-items:start; }
.right-rail.sidebar-column { grid-column:1; grid-row:1; display:flex; flex-direction:column; gap:12px; min-width:0; width:auto; }
.sidebar-kicker-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:3px 3px 4px; }
.eyebrow { color:var(--obs-green-bright); font-size:9px; font-weight:850; letter-spacing:.14em; text-transform:uppercase; }
.selected-location-context { margin-top:4px; color:var(--obs-muted); font-size:11px; }
.live-pill { display:inline-flex; align-items:center; gap:7px; flex:0 0 auto; color:var(--obs-muted); font-size:9px; font-weight:750; letter-spacing:.08em; padding:6px 8px; border:1px solid var(--obs-line); border-radius:99px; }
.live-pill i { width:5px; height:5px; display:inline-block; border-radius:50%; background:var(--obs-green); }
.map-card { grid-column:2; grid-row:1; min-width:0; border:0; border-radius:0; background:transparent; box-shadow:none; overflow:visible; }
.map-toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:3px 2px 2px; }
.map-heading { min-width:0; }
.map-title-row { display:flex; align-items:baseline; flex-wrap:wrap; gap:12px; margin-top:3px; }
.map-title-row h1 { margin:0; color:var(--obs-ink); font-size:clamp(20px,2vw,28px); line-height:1.15; letter-spacing:-.035em; font-weight:750; }
.map-heading-sub { margin-top:5px; color:var(--obs-muted); font-size:10px; letter-spacing:.015em; }
.map-status-inline { display:inline-flex; max-width:100%; align-items:center; color:var(--obs-muted); font-size:10px; }
.map-toolbar-actions { display:flex; align-items:center; gap:10px; }
.map-tool-button { display:grid; place-items:center; flex:0 0 auto; width:36px; height:36px; border:1px solid var(--obs-line); border-radius:10px; background:var(--obs-panel); color:var(--obs-muted); cursor:pointer; font-size:21px; }
.map-tool-button:hover { color:var(--obs-green-bright); border-color:var(--obs-green); }
.map-data-count { white-space:nowrap; font-size:10px; color:var(--obs-muted); }
.map-control-rail { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; padding:10px 12px; border:1px solid var(--obs-line); border-radius:13px; background:color-mix(in srgb,var(--obs-panel) 85%,transparent); }
.forecast-rail { display:flex; align-items:center; gap:13px; width:auto; padding:0; margin:0; border:0; background:transparent; }
.forecast-rail-head { display:flex; align-items:center; justify-content:flex-start; }
.forecast-rail-title { white-space:nowrap; color:var(--obs-muted); font-size:9px; letter-spacing:.11em; font-weight:800; }
.forecast-days { display:flex; align-items:center; flex-wrap:nowrap; gap:5px; }
.forecast-day { min-width:42px; padding:7px 9px; border:1px solid var(--obs-line); border-radius:8px; color:var(--obs-muted); background:var(--obs-panel); font-size:10px; font-weight:750; cursor:pointer; }
.forecast-day.active { color:var(--obs-ink); background:rgba(54,167,83,.2); border-color:var(--obs-green); box-shadow:0 0 0 1px rgba(119,220,88,.08); }
.forecast-day:disabled,.forecast-day.unavailable { opacity:.28; cursor:not-allowed; }
.map-controls-inline { display:flex; align-items:center; justify-content:flex-end; gap:10px; min-width:0; }
.pollen-controls { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:0; border:0; background:transparent; }
.pollen-controls label { color:var(--obs-muted); font-size:9px; letter-spacing:.08em; font-weight:850; }
.pollen-controls select { padding:7px 9px; color:var(--obs-ink); background:var(--obs-panel-2); border:1px solid var(--obs-line); border-radius:8px; font-size:11px; }
.forecast-map-meta { color:var(--obs-green-bright); font-size:10px; font-weight:750; }
.map-workspace { display:grid; grid-template-columns:104px minmax(0,1fr); gap:11px; align-items:stretch; }
.parameter-rail { display:flex; flex-direction:column; gap:8px; min-width:0; min-height:0; max-height:calc(100vh - 220px); overflow:auto; overscroll-behavior:contain; padding:10px 7px; border:1px solid var(--obs-line); border-radius:14px; background:var(--obs-panel); scrollbar-width:thin; scrollbar-color:var(--obs-line-strong) transparent; }
.rail-label { flex:0 0 auto; text-align:center; color:var(--obs-muted); font-size:8px; line-height:1.3; font-weight:850; letter-spacing:.1em; }
.tile-bar { display:flex; flex-direction:column; gap:5px; padding:0; min-width:0; }
.param-rail-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px; min-width:0; }
.param-tile.related-param { border-style:dashed; border-color:var(--obs-line); opacity:.5; cursor:not-allowed; min-width:0; }
.param-tile.related-param .tile-name { font-size:8px; }
.param-tile.related-param .tile-unit { font-size:6px; }
.param-group-label { padding:8px 2px 2px; margin-top:3px; color:var(--obs-muted); border-top:1px solid var(--obs-line); font-size:7px; font-weight:850; text-align:center; letter-spacing:.08em; text-transform:uppercase; }
.param-tile { position:relative; width:100%; min-width:0; min-height:65px; height:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:7px 3px; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--obs-muted); text-align:center; cursor:pointer; transition:background .15s,border-color .15s,color .15s,transform .15s; }
.param-tile:hover { background:var(--obs-panel-raised); border-color:var(--obs-line); color:var(--obs-ink); transform:translateY(-1px); }
.param-tile.active { color:var(--obs-green-bright); background:rgba(59,169,82,.14); border-color:rgba(119,220,88,.3); box-shadow:inset 2px 0 0 var(--obs-green); }
.tile-icon { width:auto; font-size:19px; line-height:1.05; margin:0; }
.tile-name { align-self:auto; font-size:9px; font-weight:650; line-height:1.15; overflow-wrap:anywhere; }
.tile-unit { align-self:auto; color:var(--obs-muted); font-size:8px; line-height:1; opacity:.75; }
.rail-separator { height:1px; flex:0 0 auto; background:var(--obs-line); margin:3px 2px; }
.layer-panel { position:static; display:grid; gap:6px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; font-size:9px; color:var(--obs-muted); }
.layer-panel-title { display:none; }
.layer-toggle { display:flex; align-items:center; gap:5px; font-size:9px; cursor:pointer; }
.layer-toggle input { accent-color:var(--obs-green); width:12px; height:12px; margin:0; }
.layer-toggle .layer-switch { display:none; }
.rain-controls { min-width:0; padding:9px 7px; border:1px solid var(--obs-line); border-radius:10px; background:var(--obs-panel-2); color:var(--obs-muted); font-size:9px!important; }
.rain-controls[hidden] { display:none!important; }
.rain-controls-title { color:var(--obs-green-bright); font-size:8px; line-height:1.3; font-weight:850; letter-spacing:.05em; }
.rain-slider-row { display:grid; grid-template-columns:1fr; gap:5px; margin:8px 0; }
.rain-slider-row>span { display:none; }
.rain-slider-row input { width:100%; min-width:0; accent-color:var(--obs-green); }
.rain-slider-row strong { color:var(--obs-ink); text-align:center; font-size:10px; }
.rain-controls-meta { display:flex; flex-direction:column; gap:3px; font-size:8px; }
.rain-grs-gradient { height:6px; margin:7px 0 3px; border-radius:99px; }
.rain-grs-gradient-labels { display:flex; justify-content:space-between; font-size:7px; }
.rain-data-meta { display:grid; grid-template-columns:1fr; gap:5px; margin-top:7px; }
.rain-data-meta div { display:grid; gap:2px; }
.rain-data-meta span { color:var(--obs-muted); font-size:7px; }
.rain-data-meta strong { color:var(--obs-ink); font-size:8px; overflow-wrap:anywhere; }
.future-layer-stack { display:flex; flex-direction:column; gap:4px; }
.future-layer { min-width:0; display:grid; justify-items:center; gap:2px; padding:8px 3px; border:1px dashed var(--obs-line); border-radius:9px; opacity:.52; text-align:center; color:var(--obs-muted); }
.future-layer>span:first-child { font-size:16px; line-height:1; }
.future-layer>span:nth-child(2) { font-size:8px; line-height:1.1; }
.future-layer b { font-size:6px; letter-spacing:.06em; font-weight:800; }
.map-stage { min-width:0; display:flex; flex-direction:column; gap:8px; }
.map-card .map { position:relative; margin:0; width:100%; height:clamp(520px,calc(100vh - 270px),850px); min-height:500px; max-height:none; aspect-ratio:auto; overflow:hidden; border:1px solid var(--obs-line); border-radius:16px; background:radial-gradient(ellipse at 46% 43%,#173d2a 0%,#0d281b 58%,#07170f 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.025),var(--obs-shadow); }
:root[data-theme="light"] .map-card .map { background:radial-gradient(ellipse at 50% 38%,#e2f1dd 0%,#d0e6d0 64%,#c1dbc5 100%); }
.map-svg { position:absolute; inset:0; width:100%; height:100%; display:block; }
.voivodeship-outline { fill:rgba(43,106,59,.055); stroke:rgba(151,218,154,.29); stroke-width:1.25; }
:root[data-theme="light"] .voivodeship-outline { fill:rgba(48,132,70,.04); stroke:rgba(40,105,53,.28); }
.station-layer { position:absolute; inset:0; }
.station-wrap .station { border-radius:9px; box-shadow:0 0 0 2px rgba(237,255,239,.92),0 5px 13px rgba(0,0,0,.3); }
.station-wrap .station-label { color:#e8f6eb; text-shadow:0 1px 3px rgba(0,0,0,.9),0 -1px 3px rgba(0,0,0,.8); font-weight:700; }
:root[data-theme="light"] .station-wrap .station-label { color:#122d1a; text-shadow:0 1px 3px rgba(255,255,255,.98),0 -1px 3px rgba(255,255,255,.98); }
.forecast-map-meta { position:absolute; top:12px; right:12px; z-index:5; padding:8px 10px; border:1px solid var(--obs-line-strong); border-radius:9px; background:rgba(5,17,10,.8); backdrop-filter:blur(12px); }
:root[data-theme="light"] .forecast-map-meta { color:#14592b; background:rgba(249,255,249,.88); }
.map-status { position:absolute; left:12px; bottom:12px; z-index:8; max-width:70%; padding:7px 10px; border:1px solid var(--obs-line); border-radius:8px; color:var(--obs-muted); background:rgba(6,17,10,.76); font-size:9px; backdrop-filter:blur(12px); }
.map-control-rail .layer-panel-rail,.map-control-rail .layer-active-config { width:auto; }
.map-control-rail .rain-controls { width:min(380px,100%); }
.legend-card { padding:9px 12px 10px; border:1px solid var(--obs-line); border-radius:12px; background:var(--obs-panel); }
.legend-heading { display:flex; justify-content:space-between; margin-bottom:7px; color:var(--obs-muted); font-size:8px; font-weight:850; letter-spacing:.1em; }
.legend-heading #legendUnit { color:var(--obs-ink); }
.legend-labels { display:flex; justify-content:space-between; margin-bottom:4px; color:var(--obs-muted); font-size:9px; }
.legend-card .gradient { height:8px; border-radius:99px; }
.legend-ticks { height:26px; }
.legend-tick { color:var(--obs-muted); font-size:8px; }
.legend-tick i { height:5px; background:var(--obs-line-strong); }
.location-detail-panel,.sidebar-forecast-card,.environment-section,.side-status-card { min-width:0; border:1px solid var(--obs-line); border-radius:15px; background:linear-gradient(145deg,color-mix(in srgb,var(--obs-panel-2) 88%,transparent),var(--obs-panel)); box-shadow:0 12px 35px rgba(0,0,0,.09); }
.location-detail-panel { flex:0 0 auto; padding:18px; overflow:visible; min-height:0; }
.detail-panel { color:var(--obs-ink); }
.detail-meta { color:var(--obs-muted); font-size:9px; letter-spacing:.1em; font-weight:800; text-transform:uppercase; }
.detail-title { margin:5px 0 0; color:var(--obs-ink); font-size:24px; line-height:1.15; letter-spacing:-.03em; }
.detail-main { margin-top:15px; }
.detail-main .detail-value { margin:0; color:var(--obs-green-bright); font-size:clamp(42px,4vw,62px); font-weight:750; line-height:1; letter-spacing:-.065em; font-variant-numeric:tabular-nums; }
.detail-main .detail-label { margin-top:7px; color:var(--obs-ink); font-size:13px; }
.wind-card { margin:16px 0 0; padding:12px 13px; border:1px solid var(--obs-line); border-radius:12px; background:rgba(119,220,88,.035); color:var(--obs-ink); }
.wind-arrow-large { color:var(--obs-green-bright); }
.wind-big { font-size:21px; font-weight:750; color:var(--obs-ink); }
.metric-label { color:var(--obs-muted); font-size:8px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:10px; }
.metric { min-width:0; padding:10px; border:1px solid var(--obs-line); border-radius:10px; background:rgba(135,193,146,.045); }
.metric-value { margin-top:5px; color:var(--obs-ink); font-size:16px; font-weight:750; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.metric-note { margin-top:4px; color:var(--obs-muted); font-size:10px; }
.detail-meta.update { margin-top:13px; font-size:9px; }
.panel-empty { min-height:230px; display:grid; place-content:center; text-align:center; color:var(--obs-muted); }
.panel-empty h2 { margin:8px 0 3px; color:var(--obs-ink); font-size:19px; }
.panel-empty p { max-width:250px; line-height:1.5; font-size:12px; margin:0 auto; }
.frog { font-size:35px; }
.location-card { display:grid; gap:10px; }
.location-card button,.meteorogram-open { border:1px solid var(--obs-line-strong); color:var(--obs-ink); background:var(--obs-panel-raised); border-radius:9px; padding:9px 11px; cursor:pointer; font-size:11px; }
.location-card button:hover,.meteorogram-open:hover { border-color:var(--obs-green); }
.location-coords { color:var(--obs-muted); line-height:1.6; font-size:10px; }
.sidebar-forecast-card { padding:14px; }
.sidebar-card-head,.section-title-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sidebar-card-head h2,.section-title-row h2 { margin:3px 0 0; color:var(--obs-ink); font-size:16px; letter-spacing:-.02em; }
.small-icon-button { flex:0 0 auto; width:31px; height:31px; border:1px solid var(--obs-line); border-radius:9px; background:var(--obs-panel-2); color:var(--obs-green-bright); cursor:pointer; }
.sidebar-forecast-preview { min-width:0; margin-top:12px; }
.sidebar-hourly-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
.sidebar-hour { display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; padding:9px 4px; border:1px solid var(--obs-line); border-radius:9px; background:rgba(119,220,88,.035); }
.sidebar-hour:first-child { background:rgba(119,220,88,.1); border-color:rgba(119,220,88,.23); }
.sidebar-hour-time { color:var(--obs-muted); font-size:9px; }
.sidebar-hour-icon { font-size:17px; line-height:1.1; }
.sidebar-hour-temp { color:var(--obs-ink); font-size:16px; font-weight:750; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.sidebar-hour-rain { color:var(--obs-blue); font-size:8px; }
.sidebar-forecast-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:11px; padding-top:10px; border-top:1px solid var(--obs-line); color:var(--obs-muted); font-size:8px; }
.sidebar-forecast-footer button { border:0; padding:0; background:transparent; color:var(--obs-green-bright); font-size:10px; cursor:pointer; white-space:nowrap; }
.sidebar-forecast-footer button span { margin-left:4px; }
.preview-empty { display:flex; align-items:center; gap:8px; padding:12px 2px; color:var(--obs-muted); font-size:11px; }
.preview-pulse { width:7px; height:7px; border-radius:50%; background:var(--obs-green); box-shadow:0 0 0 5px rgba(119,220,88,.09); animation:obs-pulse 1.7s ease-in-out infinite; }
@keyframes obs-pulse { 50% { box-shadow:0 0 0 8px rgba(119,220,88,0); opacity:.65; } }
.environment-section { padding:14px; }
.environment-tiles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:11px; }
.environment-tile { position:relative; min-width:0; display:grid; grid-template-columns:25px minmax(0,1fr); align-items:start; gap:8px; padding:10px 8px; border:1px solid var(--obs-line); border-radius:10px; background:rgba(119,220,88,.035); }
.environment-icon { display:grid; place-items:center; width:25px; height:25px; border-radius:8px; background:rgba(119,220,88,.09); color:var(--obs-green-bright); font-size:16px; }
.environment-tile>div { min-width:0; display:flex; flex-direction:column; gap:3px; }
.environment-name { color:var(--obs-muted); font-size:8px; line-height:1.2; }
.environment-tile strong { color:var(--obs-ink); font-size:16px; line-height:1.1; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.environment-tile small { color:var(--obs-green-bright); font-size:8px; line-height:1.2; }
.environment-tile.future { opacity:.74; border-style:dashed; }
.environment-tile.future small { color:var(--obs-muted); }
.future-tag { position:absolute; right:5px; top:5px; color:var(--obs-muted); font-size:6px; font-weight:800; letter-spacing:.04em; }
.side-status-card { padding:12px 14px; }
.side-card-label { display:flex; align-items:center; gap:8px; margin-bottom:8px; color:var(--obs-muted); font-size:8px; font-weight:850; letter-spacing:.12em; }
.side-status-card .data-source-status { display:flex; align-items:center; gap:10px; width:100%; padding:8px 0 2px; border:0; border-radius:0; background:transparent; box-shadow:none; color:var(--obs-ink); cursor:pointer; }
.data-health-dot { width:7px; height:7px; flex:0 0 auto; border-radius:50%; background:var(--obs-muted); }
.status-success .data-health-dot { background:#50d878; box-shadow:0 0 0 4px rgba(80,216,120,.1); }
.status-partial .data-health-dot { background:#e8bb47; box-shadow:0 0 0 4px rgba(232,187,71,.1); }
.status-error .data-health-dot { background:#f26767; box-shadow:0 0 0 4px rgba(242,103,103,.1); }
.data-source-copy { min-width:0; display:flex; flex-direction:column; gap:3px; }
.data-source-kind { color:var(--obs-green-bright); font-size:9px; font-weight:850; letter-spacing:.08em; }
.data-source-detail,.data-source-updated { color:var(--obs-muted); font-size:9px; line-height:1.35; overflow-wrap:anywhere; }
.status-expand { margin-left:auto; color:var(--obs-muted); }
.data-source-details { margin-top:9px; border-top:1px solid var(--obs-line); padding-top:9px; color:var(--obs-muted); font-size:10px; }
.data-source-details ul { margin:6px 0 0; padding-left:16px; }
.data-source-details li { margin:4px 0; }
.forecast-context { margin-top:8px; padding:9px; border:1px solid var(--obs-line); border-radius:9px; }
.forecast-context-label { color:var(--obs-green-bright); font-size:9px; font-weight:850; }
.forecast-context span:last-child { display:block; margin-top:4px; color:var(--obs-muted); font-size:10px; line-height:1.35; }
.history-hub { grid-column:1/-1; grid-row:1; min-width:0; color:var(--obs-ink); }
.history-hub-head { padding:8px 0 20px; }
.history-hub-head h1 { margin:6px 0; font-size:32px; letter-spacing:-.04em; }
.history-hub-head p { margin:0; color:var(--obs-muted); font-size:13px; }
.history-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.history-card { border:1px solid var(--obs-line); border-radius:16px; background:var(--obs-panel); color:var(--obs-ink); padding:12px 18px; text-align:left; box-shadow:var(--obs-shadow); min-height:0; }
.history-card-zabod { cursor:pointer; }
.history-card-zabod:hover { border-color:var(--obs-green); transform:translateY(-2px); }
.history-card h2 { margin:5px 0; font-size:22px; }
.history-card p { color:var(--obs-muted); line-height:1.35; font-size:12px; margin:5px 0 8px; }
.history-card-icon { color:var(--obs-green-bright); font-size:20px; line-height:1; }
.history-card-kicker,.history-card-meta { color:var(--obs-muted); font-size:10px; }
.history-card-cta { display:inline-block; margin-top:8px; color:var(--obs-green-bright); font-size:11px; font-weight:800; }
.history-card-disabled { opacity:.65; }
.history-zabod-panel { margin-top:18px; padding:18px; border:1px solid var(--obs-line); border-radius:16px; background:var(--obs-panel); }
.history-panel-head,.history-compare-head { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.history-panel-head h2,.history-compare-head h3 { margin:5px 0; }
.history-back,.history-compare-head button { border:1px solid var(--obs-line); border-radius:9px; padding:9px 12px; background:var(--obs-panel-2); color:var(--obs-ink); cursor:pointer; }
.history-archive-toolbar { display:flex; align-items:end; gap:13px; flex-wrap:wrap; margin:18px 0; }
.history-filter-group { display:grid; gap:5px; color:var(--obs-muted); font-size:9px; }
.history-filter-group select,.history-compare-controls select { min-height:36px; max-width:100%; border:1px solid var(--obs-line); border-radius:8px; padding:7px 9px; color:var(--obs-ink); background:var(--obs-panel-2); }
.history-toolbar-note { color:var(--obs-muted); font-size:10px; }
.history-archive-layout { display:grid; grid-template-columns:minmax(240px,.75fr) minmax(0,1.4fr); gap:12px; }
.history-snapshot-list,.history-snapshot-detail,.history-compare-panel { min-width:0; padding:12px; border:1px solid var(--obs-line); border-radius:12px; background:var(--obs-panel-2); }
.history-snapshot-list { max-height:520px; overflow:auto; }
.history-compare-panel { margin-top:14px; }
.history-compare-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:12px 0; }
.history-compare-controls label { display:grid; gap:5px; color:var(--obs-muted); font-size:9px; }
.history-compare-result,.history-empty { color:var(--obs-muted); font-size:11px; line-height:1.5; }
.footer { display:flex; justify-content:space-between; gap:14px; width:auto; margin:0; padding:12px clamp(16px,2.4vw,38px) 18px; color:var(--obs-muted); font-size:9px; }
.footer b { color:var(--obs-green-bright); font-weight:800; }

/* Dialog and charts adapt to the new dark/light palette. */
.forecast-summary-overlay,.meteorogram-overlay { background:rgba(1,8,4,.78); backdrop-filter:blur(9px); }
.forecast-summary-sheet,.meteorogram-sheet { color:var(--obs-ink); background:var(--obs-panel); border-color:var(--obs-line-strong); box-shadow:0 30px 100px rgba(0,0,0,.45); }
.forecast-summary-head h2 { color:var(--obs-ink); }
.forecast-summary-card { background:var(--obs-panel-2); border-color:var(--obs-line); }
.forecast-summary-card-title h3 { color:var(--obs-ink); }
.forecast-summary-card-title p,.summary-legend,.summary-axis,.summary-x { color:var(--obs-muted); }
.forecast-summary-close,.meteorogram-close { color:var(--obs-ink); background:var(--obs-panel-2); border-color:var(--obs-line); }
.forecast-summary-foot { border-color:var(--obs-line); color:var(--obs-muted); }
:root[data-theme="dark"] .summary-grid-line-major { stroke:#31513d; }
:root[data-theme="dark"] .summary-grid-line-minor { stroke:#1e3a2a; }
:root[data-theme="light"] .summary-grid-line-major { stroke:#cfdfd0; }
:root[data-theme="light"] .summary-grid-line-minor { stroke:#e2ebe3; }
:root[data-theme="light"] .map-status { color:#244830; background:rgba(247,255,247,.9); }
:root[data-theme="light"] .detail-grid .metric { background:#f4faf4; }
:root[data-theme="light"] .wind-card { background:#f4faf4; }
:root[data-theme="light"] .param-tile.active { color:#176832; background:#e0f4e3; }
:root[data-theme="light"] .param-tile:hover { color:#173322; background:#f2f9f2; }
:root[data-theme="light"] .environment-tile { background:#f6fbf6; }
:root[data-theme="light"] .environment-tile strong { color:#173322; }
:root[data-theme="light"] .environment-tile small { color:#267b3e; }
:root[data-theme="light"] .mode-btn.active { color:#176832; background:#e4f5e7; }
:root[data-theme="light"] .nav-summary { color:#174c2a; }

@media(max-width:1450px) {
  .topbar { grid-template-columns:145px minmax(0,1fr); gap:12px 18px; }
  .brand-logo { width:140px; }
  .topbar-actions { grid-column:2; grid-row:2; justify-self:stretch; width:100%; }
  .mode-switch { grid-column:2; grid-row:1; justify-self:stretch; }
  .top-clock { margin-right:auto; }
  .app-shell { grid-template-columns:minmax(300px,.76fr) minmax(0,1.7fr); }
}
@media(max-width:1120px) {
  .topbar { position:relative; grid-template-columns:1fr; gap:10px; }
  .brand { justify-self:start; }
  .mode-switch { grid-column:1; grid-row:auto; flex-wrap:wrap; }
  .topbar-actions { grid-column:1; grid-row:auto; display:grid; grid-template-columns:1fr minmax(200px,300px) 42px; }
  .top-clock { grid-column:1; grid-row:1; }
  .search { grid-column:2; grid-row:1; width:100%; }
  .theme-toggle { grid-column:3; grid-row:1; }
  .app-shell { grid-template-columns:minmax(270px,.7fr) minmax(0,1.3fr); padding-top:12px; }
  .map-workspace { grid-template-columns:92px minmax(0,1fr); gap:8px; }
  .parameter-rail { padding:8px 5px; }
  .future-layer-stack { display:none; }
  .map-card .map { height:clamp(470px,calc(100vh - 300px),740px); }
}
@media(max-width:820px) {
  .topbar { padding:12px 14px; }
  .topbar-actions { grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) 42px; }
  .top-clock { font-size:10px; }
  .mode-switch { overflow-x:auto; flex-wrap:nowrap; padding:2px 0 6px; scrollbar-width:thin; }
  .mode-btn,.nav-summary { min-height:38px; padding:0 11px; font-size:11px; }
  .app-shell { display:flex; flex-direction:column; padding:12px 12px 20px; }
  .map-card { order:1; width:100%; }
  .right-rail.sidebar-column { order:2; width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
  .sidebar-kicker-row,.location-detail-panel { grid-column:1/-1; }
  .sidebar-forecast-card,.environment-section,.side-status-card { min-width:0; }
  .sidebar-forecast-card { grid-column:1; }
  .environment-section { grid-column:2; grid-row:2; }
  .side-status-card { grid-column:1/-1; }
  .map-card .map { height:clamp(430px,70vh,680px); min-height:430px; }
  .parameter-rail { max-height:660px; }
  .future-layer-stack { display:flex; }
  .history-hub { order:1; }
}
@media(max-width:560px) {
  .topbar { gap:8px; }
  .brand-logo { width:126px; height:40px; }
  .mode-switch { gap:3px; }
  .mode-btn,.nav-summary { flex:0 0 auto; min-height:35px; padding:0 9px; font-size:10px; }
  .nav-summary-icon { display:none; }
  .topbar-actions { grid-template-columns:1fr 42px; gap:8px; }
  .top-clock { grid-column:1/-1; grid-row:1; }
  .search { grid-column:1; grid-row:2; width:100%; }
  .theme-toggle { grid-column:2; grid-row:2; width:40px; height:40px; }
  .app-shell { padding:9px 8px 18px; gap:14px; }
  .map-toolbar { align-items:flex-start; padding-bottom:10px; }
  .map-title-row { display:block; }
  .map-title-row h1 { font-size:21px; }
  .map-status-inline { margin-top:5px; font-size:9px; }
  .map-heading-sub,.map-data-count { display:none; }
  .map-control-rail { align-items:flex-start; flex-direction:column; padding:8px; gap:8px; }
  .forecast-rail { flex-direction:column; align-items:flex-start; gap:6px; width:100%; }
  .forecast-days { width:100%; gap:4px; }
  .forecast-day { flex:1 1 0; min-width:0; padding:8px 3px; font-size:9px; }
  .map-controls-inline { width:100%; justify-content:space-between; }
  .map-workspace { grid-template-columns:70px minmax(0,1fr); gap:6px; }
  .parameter-rail { max-height:600px; padding:7px 4px; border-radius:11px; gap:6px; }
  .param-tile { min-height:57px; padding:5px 2px; }
  .tile-icon { font-size:17px; }
  .tile-name { font-size:8px; }
  .tile-unit { font-size:7px; }
  .param-rail-pair { grid-template-columns:1fr; }
  .param-tile.related-param { min-height:44px; }
  .future-layer { padding:6px 2px; }
  .future-layer>span:nth-child(2) { font-size:7px; }
  .map-card .map { height:clamp(390px,62vh,560px); min-height:390px; border-radius:12px; }
  .station-wrap { width:42px; }
  .station-wrap .station { width:36px; height:24px; }
  .station-wrap .station-value { font-size:8px; }
  .station-wrap .station-label { font-size:8px; }
  .legend-card { padding:8px 9px; }
  .legend-ticks { height:27px; }
  .right-rail.sidebar-column { grid-template-columns:1fr; }
  .sidebar-kicker-row,.location-detail-panel,.sidebar-forecast-card,.environment-section,.side-status-card { grid-column:1; }
  .sidebar-forecast-card { grid-row:auto; }
  .environment-section { grid-row:auto; }
  .sidebar-forecast-footer { align-items:flex-start; }
  .environment-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .history-grid,.history-archive-layout,.history-compare-controls { grid-template-columns:1fr; }
  .history-hub-head h1 { font-size:26px; }
  .history-zabod-panel { padding:12px; }
  .history-panel-head,.history-compare-head { align-items:flex-start; flex-direction:column; }
  .footer { flex-direction:column; padding:12px 12px 18px; }
  .forecast-summary-grid { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}


/* ŻABOD 0.20.1 — geography alignment, icon-led parameter rail and typography. */
@font-face {
  font-family:"KievitPro Book";
  src:url("/frontend/fonts/KievitPro-Book.ttf") format("truetype");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}

/* A 900×800 map footprint matches the EPSG:2180 viewBox aspect ratio.
   The station overlay uses the same coordinate proportions as the SVG, so
   reducing its width no longer spreads points across letterboxed space. */
.map-workspace {
  grid-template-columns:76px minmax(0,900px);
  justify-content:center;
  gap:10px;
}
.parameter-rail {
  position:relative;
  z-index:20;
  width:76px;
  max-height:none;
  height:100%;
  align-self:stretch;
  overflow:visible;
  padding:10px 5px;
  gap:8px;
}
.map-stage {
  position:relative;
  z-index:1;
  width:100%;
  max-width:900px;
  min-width:0;
  justify-self:center;
}
.map-card .map {
  width:100%;
  max-width:900px;
  height:auto;
  min-height:0;
  max-height:none;
  aspect-ratio:9 / 8;
  margin:0;
  background:transparent !important;
  border-color:transparent;
  box-shadow:none;
}

/* Parameter selector: small category icons; full choices slide out over the map. */
.rail-label { font-size:9px; line-height:1.25; letter-spacing:.05em; }
.tile-bar { display:flex; flex-direction:column; align-items:center; gap:7px; overflow:visible; }
.param-group-label { display:none!important; }
.param-category { position:relative; width:42px; height:42px; flex:0 0 42px; }
.param-category-trigger {
  position:relative; display:grid; place-items:center; width:42px; height:42px;
  border:1px solid var(--obs-line); border-radius:12px; background:var(--obs-panel-2);
  color:var(--obs-muted); cursor:pointer; font-size:22px; line-height:1;
  transition:background .16s,border-color .16s,color .16s,transform .16s;
}
.param-category-trigger:hover,.param-category-trigger:focus-visible,.param-category.is-open .param-category-trigger {
  color:var(--obs-green-bright); border-color:var(--obs-green); background:var(--obs-panel-raised);
}
.param-category-trigger.has-active { box-shadow:inset 0 0 0 1px var(--obs-green); color:var(--obs-green-bright); }
.param-category-trigger i { position:absolute; right:4px; bottom:4px; width:5px; height:5px; border-radius:50%; background:var(--obs-green); opacity:0; }
.param-category-trigger.has-active i { opacity:1; }
.param-flyout {
  position:fixed; z-index:1200; left:0; top:0; display:none;
  max-height:calc(100dvh - 16px); overflow:auto; overscroll-behavior:contain;
  width:min(300px,calc(100vw - 90px)); padding:10px;
  border:1px solid var(--obs-line-strong); border-radius:14px;
  background:color-mix(in srgb,var(--obs-panel) 96%,transparent);
  color:var(--obs-ink); box-shadow:var(--obs-shadow); backdrop-filter:blur(18px);
}
.param-category:hover > .param-flyout,
.param-category:focus-within > .param-flyout,
.param-category.is-open > .param-flyout { display:block; animation:param-flyout-in .16s ease-out both; }
.param-category.open-up > .param-flyout { top:auto; bottom:0; }
@keyframes param-flyout-in { from { opacity:0; transform:translateX(-5px); } to { opacity:1; transform:translateX(0); } }
.param-flyout-head { display:flex; align-items:center; gap:9px; padding:3px 4px 10px; margin-bottom:7px; border-bottom:1px solid var(--obs-line); }
.param-flyout-head>span { font-size:20px; }
.param-flyout-head strong { font-size:14px; }
.param-flyout-head small { margin-left:auto; color:var(--obs-muted); font-size:11px; }
.param-flyout-options { display:grid; grid-template-columns:1fr; gap:5px; }
.param-flyout-pair { display:grid; grid-template-columns:minmax(0,1fr) 118px; gap:6px; }
.param-flyout .param-tile {
  display:grid; grid-template-columns:30px minmax(0,1fr) auto; grid-template-rows:auto;
  width:100%; min-height:49px; height:auto; padding:8px 9px; gap:8px; align-items:center;
  border:1px solid var(--obs-line); border-radius:10px; background:var(--obs-panel-2);
  color:var(--obs-ink); text-align:left; transform:none;
}
.param-flyout .param-tile:hover { border-color:var(--obs-green); background:var(--obs-panel-raised); }
.param-flyout .param-tile.future-param,
.param-flyout .param-tile.future-param:disabled {
  opacity:.58; cursor:not-allowed; border-style:dashed; border-color:var(--obs-line-strong);
  background:color-mix(in srgb,var(--obs-panel-2) 78%,transparent); box-shadow:none;
}
.param-flyout .param-tile.future-param .tile-unit { color:var(--obs-green-bright); font-size:10px; font-weight:800; letter-spacing:.06em; }
.param-flyout .param-tile.active { border-color:var(--obs-green); color:var(--obs-green-bright); background:rgba(58,169,86,.15); box-shadow:inset 3px 0 0 var(--obs-green); }
.param-flyout .tile-icon { grid-row:1; width:30px; font-size:21px; text-align:center; }
.param-flyout .tile-name { align-self:center; font-size:13px; line-height:1.25; overflow-wrap:normal; }
.param-flyout .tile-unit { align-self:center; font-size:11px; line-height:1.2; white-space:nowrap; }
.param-flyout .related-param { min-width:0; grid-template-columns:1fr; justify-items:center; text-align:center; }
.param-flyout .related-param .tile-icon { grid-row:auto; width:auto; }
.param-flyout .related-param .tile-name { font-size:12px; }
.param-flyout .related-param .tile-unit { white-space:normal; font-size:9px; }

/* Real layers become icon controls too; the RainGRS settings are a flyout. */
.layer-panel { display:flex; flex-direction:column; align-items:center; gap:7px; }
.layer-toggle {
  position:relative; display:grid; place-items:center; width:40px; height:40px; margin:0;
  border:1px solid var(--obs-line); border-radius:11px; background:var(--obs-panel-2);
  color:var(--obs-muted); cursor:pointer; font-size:20px;
}
.layer-toggle input { position:absolute; right:3px; top:3px; width:10px; height:10px; margin:0; opacity:.0; cursor:pointer; }
.layer-toggle .layer-icon { display:grid; place-items:center; width:100%; height:100%; font-size:20px; line-height:1; }
.layer-toggle .layer-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.layer-toggle:has(input:checked) { border-color:var(--obs-green); color:var(--obs-green-bright); background:rgba(58,169,86,.14); box-shadow:inset 0 0 0 1px rgba(119,220,88,.12); }
.layer-toggle:focus-within { outline:2px solid var(--obs-green); outline-offset:2px; }
.future-layer-stack { display:flex; flex-direction:column; gap:6px; align-items:center; }
.future-layer { width:40px; height:38px; padding:0; display:grid; place-items:center; border-radius:10px; opacity:.44; }
.future-layer>span:first-child { font-size:19px; }
.future-layer>span:nth-child(2),.future-layer>b { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.future-layer:hover { opacity:.8; border-color:var(--obs-line-strong); }
.rail-separator { width:100%; margin:3px 0; }
#rainControls {
  position:absolute; z-index:90; left:calc(100% + 10px); top:50%; transform:translateY(-50%);
  width:min(330px,calc(100vw - 90px)); padding:12px; font-size:12px!important;
  border-color:var(--obs-line-strong); background:var(--obs-panel); box-shadow:var(--obs-shadow);
}
#rainControls[hidden] { display:none!important; }
#rainControls .rain-controls-title { font-size:11px; }
#rainControls .rain-controls-meta,#rainControls .rain-data-meta { font-size:11px; }
#rainControls .rain-slider-row>span { display:inline; }

/* Improve readability throughout the interface, without changing station labels. */
.top-clock {
  font-family:"KievitPro Book","KievitPro",sans-serif;
  font-size:15px;
  line-height:1.35;
  font-weight:300;
  letter-spacing:.005em;
  color:var(--obs-ink);
}
.top-clock time { font-size:inherit; font-weight:inherit; }
.mode-btn,.nav-summary { font-size:14px; }
.search input { font-size:14px; }
.eyebrow,.rail-label,.param-group-label,.forecast-rail-title,.detail-meta,.side-card-label,.metric-label,.data-source-kind,.history-card-kicker,.history-card-meta { font-size:11px; }
.selected-location-context,.map-heading-sub,.map-status-inline,.map-data-count,.forecast-map-meta,.live-pill { font-size:12px; }
.forecast-day { font-size:12px; min-height:36px; }
.pollen-controls label { font-size:11px; }
.pollen-controls select { font-size:13px; }
.sidebar-card-head h2,.section-title-row h2 { font-size:18px; }
.sidebar-hour-time { font-size:11px; }
.sidebar-hour-icon { font-size:20px; }
.sidebar-hour-temp { font-size:18px; }
.sidebar-hour-rain { font-size:10px; }
.sidebar-forecast-footer { font-size:11px; }
.sidebar-forecast-footer button { font-size:12px; }
.environment-name { font-size:11px; }
.environment-tile strong { font-size:18px; }
.environment-tile small { font-size:10px; }
.side-card-label,.data-source-detail,.data-source-updated,.data-source-details { font-size:11px; }
.forecast-context-label { font-size:11px; }
.forecast-context span:last-child { font-size:12px; }
.search-result-name { font-size:14px; }
.search-result-meta { font-size:12px; }
.search-result-coords { font-size:11px; }
.search-loading,.search-empty { font-size:13px; }
.location-card .location-coords { font-size:14px; }
.history-hub-head p,.history-card p { font-size:14px; }
.history-card h2,.history-panel-head h2 { font-size:24px; }
.history-card-meta,.history-card-cta,.history-detail-note,.history-detail-head span,.history-toolbar-note,.history-compare-controls label,.history-filter-group,.history-compare-result,.history-empty { font-size:12px; }
.history-snapshot span,.history-detail-head span,.history-detail-note { font-size:14px; }
.history-snapshot,.history-data-row { font-size:14px; }
.history-snapshot b { font-size:14px; }
.detail-label { font-size:15px; }
.metric-label { font-size:12px; letter-spacing:.045em; }
.metric-value { font-size:17px; }
.detail-meta.update { font-size:12px; }
.location-card button { font-size:14px; }
.forecast-summary-meta,.summary-legend,.summary-axis,.summary-x,.forecast-summary-foot { font-size:12px; }
.forecast-summary-card-title p { font-size:13px; }
.summary-loading,.summary-empty { font-size:17px; }
.footer { font-size:12px; }

@media (max-width:1100px) {
  .topbar { gap:12px; }
  .top-clock { font-size:14px; }
  .map-workspace { grid-template-columns:50px minmax(0,900px); gap:8px; }
  .parameter-rail { width:68px; padding:8px 5px; }
  .param-category,.param-category-trigger { width:40px; height:40px; }
  .param-category { flex-basis:40px; }
}
@media (max-width:900px) {
  .app-shell { grid-template-columns:minmax(0,1fr); }
  .map-workspace { grid-template-columns:48px minmax(0,900px); gap:8px; }
  .map-stage { max-width:900px; }
  .top-clock { grid-column:auto; font-size:14px; }
}
@media (max-width:640px) {
  .map-workspace { grid-template-columns:44px minmax(0,1fr); gap:7px; }
  .parameter-rail { width:44px; padding:7px 2px; gap:6px; }
  .param-category,.param-category-trigger { width:38px; height:38px; }
  .param-category { flex-basis:38px; }
  .param-category-trigger { font-size:20px; }
  .layer-toggle,.future-layer { width:36px; height:36px; }
  .param-flyout { left:calc(100% + 7px); width:min(280px,calc(100vw - 65px)); }
  #rainControls { left:calc(100% + 7px); width:min(280px,calc(100vw - 65px)); }
  .param-flyout .tile-name { font-size:12px; }
  .param-flyout .tile-unit { font-size:10px; }
  .top-clock { font-size:13px; }
}


/* 0.20.1 readability completion: every visible label outside city annotations. */
.legend-heading { font-size:11px; letter-spacing:.07em; }
.legend-labels { font-size:12px; }
.legend-tick { font-size:11px; }
.map-status { font-size:12px; line-height:1.35; }
.forecast-map-meta { font-size:13px; line-height:1.35; }
.map-data-count,.map-status-inline { line-height:1.35; }
.metric-note { font-size:12px; line-height:1.35; }
.panel-empty p { font-size:14px; }
.location-card button,.meteorogram-open { font-size:14px; }
.preview-empty { font-size:13px; }
.forecast-rail-head,.map-control-rail { font-size:13px; }
.rain-controls-title { font-size:11px; }
.rain-controls-meta,.rain-grs-gradient-labels,.rain-data-meta { font-size:11px; }
.side-card-label { letter-spacing:.08em; }
.forecast-context-label { font-size:11px; }
@media (max-width:760px) {
  .legend-heading { font-size:10px; }
  .legend-labels { font-size:11px; }
  .legend-tick { font-size:10px; }
  .top-clock { font-size:12px; }
  .mode-btn,.nav-summary { font-size:13px; }
}

/* Keep the hover target connected to its flyout even in the 10px visual gap. */
.param-flyout::before { content:""; position:absolute; left:-11px; top:0; bottom:0; width:12px; }
@media (max-width:1100px) {
  .map-workspace { grid-template-columns:68px minmax(0,calc(100% - 76px)); }
}
@media (max-width:900px) {
  .map-workspace { grid-template-columns:64px minmax(0,calc(100% - 72px)); }
}
@media (max-width:640px) {
  .map-workspace { grid-template-columns:44px minmax(0,calc(100% - 51px)); }
}

@media (max-width:900px) {
  .future-layer-stack { display:none; }
}
@media (max-width:640px) {
  .map-workspace { grid-template-columns:minmax(0,1fr); gap:9px; }
  .parameter-rail {
    width:100%; height:auto; max-height:none; align-self:auto;
    flex-direction:row; align-items:center; justify-content:flex-start;
    flex-wrap:nowrap; overflow:visible; padding:8px; gap:7px;
  }
  .parameter-rail .rail-label,.parameter-rail .rail-separator { display:none; }
  .tile-bar { flex-direction:row; flex:0 0 auto; gap:5px; }
  .param-category,.param-category-trigger { width:38px; height:38px; }
  .param-category { flex-basis:38px; }
  .layer-panel { flex-direction:row; flex:0 0 auto; gap:5px; }
  .layer-toggle { width:36px; height:36px; }
  .future-layer-stack { display:none!important; }
  .param-flyout { position:absolute; z-index:1200; left:0; top:calc(100% + 7px); bottom:auto; right:auto; max-height:calc(100dvh - 100px); width:min(286px,calc(100vw - 32px)); }
  .param-category.open-up > .param-flyout { left:0; top:calc(100% + 7px); bottom:auto; }
  #rainControls { left:0; top:calc(100% + 7px); bottom:auto; transform:none; width:min(286px,calc(100vw - 32px)); }
  .map-stage { max-width:900px; }
}

/* ŻABOD 0.20.4 — use the available horizontal canvas and keep controls below overlays. */
@media (min-width: 761px) {
  .map-workspace {
    grid-template-columns:76px minmax(0,1fr);
    justify-content:stretch;
    gap:10px;
    width:100%;
  }
  .map-stage {
    width:100%;
    max-width:none;
    min-width:0;
    justify-self:stretch;
  }
  .map-card .map {
    width:100%;
    max-width:none;
    height:auto;
    min-height:0;
    aspect-ratio:9 / 8;
  }
}

/* When a chart/dialog is open, it must visually sit above the sticky date rail
   and the parameter rail instead of allowing those controls to cover data. */
.map-card:has(.meteorogram-overlay:not(.hidden)) .map-stage,
.map-card:has(.forecast-summary-overlay:not(.hidden)) .map-stage {
  position:relative;
  z-index:30;
}
.map-card:has(.meteorogram-overlay:not(.hidden)) .map-control-rail,
.map-card:has(.forecast-summary-overlay:not(.hidden)) .map-control-rail {
  position:relative;
  z-index:0;
}
.map-card:has(.meteorogram-overlay:not(.hidden)) .parameter-rail,
.map-card:has(.forecast-summary-overlay:not(.hidden)) .parameter-rail {
  z-index:1;
}
@media (max-width:760px) {
  .map-workspace { grid-template-columns:minmax(0,1fr); }
  .map-card .map { width:100%; max-width:none; aspect-ratio:9 / 8; height:auto; }
}


/* ŻABOD 0.20.4 — viewport dashboard, vivid atmospheric background and RainGRS-aligned map. */
.top-clock,
.top-clock time {
  font-family:"KievitPro",sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:.015em;
  color:var(--obs-ink);
  font-variant-numeric:tabular-nums;
}

/* Smooth, layered color fields: no hard gradient bands. */
body.zabod-v020 {
  position:relative;
  background-color:var(--obs-bg);
  background-image:
    radial-gradient(ellipse 76% 68% at 16% 9%, rgba(26,119,55,.30) 0%, rgba(26,119,55,.17) 27%, transparent 72%),
    radial-gradient(ellipse 70% 76% at 84% 22%, rgba(0,116,86,.19) 0%, rgba(0,116,86,.10) 32%, transparent 74%),
    radial-gradient(ellipse 84% 75% at 48% 100%, rgba(49,105,32,.20) 0%, rgba(31,81,39,.11) 34%, transparent 76%),
    linear-gradient(125deg,#06110a 0%,#091b10 36%,#0b2015 68%,#07150d 100%);
  background-attachment:fixed;
}
:root[data-theme="light"] body.zabod-v020 {
  background-color:var(--obs-bg);
  background-image:
    radial-gradient(ellipse 82% 74% at 12% 4%, rgba(104,230,65,.42) 0%, rgba(104,230,65,.22) 29%, transparent 72%),
    radial-gradient(ellipse 76% 78% at 91% 20%, rgba(0,190,127,.31) 0%, rgba(0,190,127,.15) 34%, transparent 74%),
    radial-gradient(ellipse 88% 82% at 48% 104%, rgba(174,231,55,.35) 0%, rgba(117,203,74,.16) 37%, transparent 78%),
    radial-gradient(ellipse 54% 52% at 53% 42%, rgba(184,255,218,.40) 0%, transparent 72%),
    linear-gradient(125deg,#f1ffe7 0%,#e0f7d8 42%,#e1f8ec 73%,#f4ffe9 100%);
}
/* Small, monochrome SVG turbulence creates a subtle film grain without a bitmap asset. */
body.zabod-v020::after {
  content:"";
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:.052;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size:180px 180px;
  mix-blend-mode:soft-light;
}
:root[data-theme="light"] body.zabod-v020::after { opacity:.045; mix-blend-mode:multiply; }

/* Header shares the dashboard's content width instead of forming a full-bleed strip. */
.topbar {
  width:min(1860px,calc(100% - 2 * clamp(14px,2vw,30px)));
  margin:0 auto;
  padding-left:0;
  padding-right:0;
  border-radius:0 0 16px 16px;
  background:color-mix(in srgb,var(--obs-panel) 86%,transparent);
  border-left:1px solid var(--obs-line);
  border-right:1px solid var(--obs-line);
}

/* Desktop behaves like a BI dashboard: the viewport is fixed and panels own any overflow. */
@media (min-width:821px) {
  html, body.zabod-v020 { width:100%; height:100%; min-height:0; }
  body.zabod-v020 { display:flex; flex-direction:column; overflow:hidden; }
  .topbar { flex:0 0 auto; }
  .app-shell {
    flex:1 1 auto;
    min-height:0;
    height:auto;
    margin:0 auto;
    padding:clamp(8px,1.1vh,16px) clamp(14px,2vw,30px);
    align-items:stretch;
    overflow:hidden;
  }
  .right-rail.sidebar-column {
    min-height:0;
    height:100%;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:var(--obs-line-strong) transparent;
    padding-right:3px;
  }
  .map-card {
    min-height:0;
    height:100%;
    display:flex;
    flex-direction:column;
    overflow:visible;
  }
  .map-toolbar { flex:0 0 auto; padding-bottom:clamp(5px, .8vh, 12px); }
  .map-control-rail { flex:0 0 auto; margin-bottom:clamp(5px, .7vh, 10px); padding:clamp(5px,.7vh,10px) 10px; }
  .map-workspace { flex:1 1 auto; min-height:0; height:auto; align-items:stretch; }
  .parameter-rail { height:100%; min-height:0; max-height:none; overflow-y:auto; }
  .map-stage { min-height:0; height:100%; }
  .map-card .map {
    flex:1 1 auto;
    min-height:0;
    height:100%;
    max-height:none;
    aspect-ratio:auto;
  }
  .legend-card { flex:0 0 auto; }
  .footer { display:none; }
  .app-shell.history-active { overflow-y:auto; }
  .app-shell.history-active .history-hub { min-height:0; overflow:visible; }
}

@media (min-width:821px) and (max-height:900px) {
  .topbar { min-height:62px; padding-top:6px; padding-bottom:6px; }
  .brand-logo { height:40px; }
  .mode-btn,.nav-summary { min-height:36px; padding-inline:10px; }
  .theme-toggle { width:36px; height:36px; }
  .search input { height:36px; }
  .app-shell { gap:12px; }
  .right-rail.sidebar-column { gap:7px; }
  .sidebar-forecast-card { padding:10px; }
  .location-detail-panel { padding:12px; }
  .map-title-row h1 { font-size:clamp(18px,1.6vw,24px); }
  .map-heading-sub { display:none; }
  .map-data-count { font-size:9px; }
}

@media (max-width:820px) {
  .topbar { width:calc(100% - 16px); padding-left:12px; padding-right:12px; border-radius:0 0 14px 14px; }
  body.zabod-v020 { min-height:100dvh; height:auto; overflow-x:hidden; overflow-y:auto; display:block; }
  .app-shell { height:auto; min-height:0; overflow:visible; }
  .footer { display:flex; }
}


/* ŻABOD 0.20.5 — accessible parameter flyouts and future parameters. */
@media (min-width:641px) {
  .parameter-rail { overflow-x:visible; overflow-y:auto; }
  .param-flyout { width:min(320px,calc(100vw - 110px)); }
}
@media (min-width:641px) and (max-height:760px) {
  .parameter-rail { gap:6px; padding-top:7px; padding-bottom:7px; }
  .param-category,.param-category-trigger { width:40px; height:40px; }
  .param-category { flex-basis:40px; }
}


/* 0.20.6 — compact forecast vital ranges */
.detail-forecast-head { display:grid; grid-template-columns:minmax(0,1fr); gap:3px; }
.detail-forecast-head .detail-meta { margin:0; }
.detail-forecast-head .detail-title { margin:1px 0 0; font-size:clamp(22px,2vw,30px); line-height:1.05; }
.detail-forecast-head .detail-main { margin:7px 0 5px; display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; }
.detail-forecast-head .detail-value { font-size:clamp(28px,3vw,40px); letter-spacing:-.055em; }
.detail-forecast-head .detail-label { margin:0; font-size:11px; }
.forecast-vitals { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; margin-top:10px; }
.forecast-vital { min-width:0; padding:7px 8px 6px; border:1px solid var(--obs-line); border-radius:9px; background:color-mix(in srgb,var(--obs-panel-raised) 48%,transparent); }
.forecast-vital-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:6px; }
.forecast-vital-head>span { min-width:0; color:var(--obs-muted); font-size:10px; font-weight:700; line-height:1.2; }
.forecast-vital-head>strong { flex:0 0 auto; color:var(--obs-ink); font-size:12px; line-height:1.15; font-weight:800; font-variant-numeric:tabular-nums; text-align:right; }
.forecast-vital-track { position:relative; height:5px; border-radius:99px; background:var(--obs-line); overflow:visible; }
.forecast-vital-range-fill,.forecast-vital-point-fill { position:absolute; top:0; bottom:0; border-radius:99px; background:linear-gradient(90deg,#8ad7e6 0%,#f1f6eb 45%,#6cdb7b 100%); }
.forecast-vital-point-fill { left:0; background:linear-gradient(90deg,#5ca6d9,#73e26f); }
.forecast-vital-point-dot,.forecast-vital-gust-dot { position:absolute; top:50%; width:10px; height:10px; transform:translate(-50%,-50%); border:2px solid var(--obs-panel); border-radius:50%; background:var(--obs-ink); box-shadow:0 0 0 1px var(--obs-line-strong); }
.forecast-vital-gust-dot { width:11px; height:11px; background:#ffc928; box-shadow:0 0 0 1px rgba(255,201,40,.25); }
.forecast-vital-scale { display:flex; justify-content:space-between; margin-top:4px; color:var(--obs-muted); font-size:8px; line-height:1; font-variant-numeric:tabular-nums; }
.forecast-vital-aqi .forecast-vital-point-fill { background:linear-gradient(90deg,#55d77d 0%,#c8d94a 35%,#ffb84a 60%,#ef665c 100%); }
.vital-separator { color:var(--obs-muted); font-weight:500; }
.environment-section { display:none!important; }
@media (min-width:1100px) {
  .forecast-vitals { gap:6px; }
  .forecast-vital { padding:6px 8px 5px; }
}
@media (max-width:700px) {
  .forecast-vital-head { align-items:flex-start; }
  .forecast-vital-head>span { font-size:10px; }
  .forecast-vital-head>strong { font-size:11px; }
}

/* ŻABOD 0.20.8 — bolder type, map-matched vital gradients and hover flyouts. */
.top-clock,
.top-clock time { font-size:clamp(17px,1.25vw,21px); }
.topbar-actions { gap:12px; }
.top-clock { margin-right:clamp(8px,1.2vw,20px); }
.mode-btn,.nav-summary { font-size:clamp(15px,1vw,17px); padding-inline:clamp(12px,1.05vw,18px); }
.search input { font-size:16px; }
.search input::placeholder { font-size:15px; }
.theme-toggle { font-size:23px; }

/* Readability pass: increase text outside the geographic map by ~50%. */
.detail-forecast-head .detail-meta { font-size:15px; line-height:1.3; }
.detail-forecast-head .detail-title { font-size:clamp(27px,2.2vw,36px); }
.detail-forecast-head .detail-value { font-size:clamp(36px,3.2vw,48px); }
.detail-forecast-head .detail-label { font-size:15px; line-height:1.25; }
.forecast-vitals { gap:9px; }
.forecast-vital { padding:9px 11px 8px; border-radius:11px; }
.forecast-vital-head { margin-bottom:8px; gap:10px; }
.forecast-vital-head>span { font-size:15px; line-height:1.25; }
.forecast-vital-head>strong { font-size:17px; line-height:1.2; }
.forecast-vital-track { height:7px; }
.forecast-vital-point-dot,.forecast-vital-gust-dot { width:12px; height:12px; }
.forecast-vital-gust-dot { width:13px; height:13px; }
.forecast-vital-scale { margin-top:6px; font-size:12px; line-height:1.1; }
.forecast-vital-scale span { white-space:nowrap; }

.eyebrow,.sidebar-card-head .eyebrow,.side-card-label { font-size:13px; letter-spacing:.09em; }
.sidebar-card-head h2 { font-size:22px; line-height:1.2; }
.sidebar-forecast-card { padding:16px; }
.sidebar-forecast-preview { margin-top:14px; }
.preview-empty { font-size:16px; }
.sidebar-forecast-footer { font-size:13px; }
.sidebar-forecast-footer button { font-size:14px; }
.location-card button,.meteorogram-open { font-size:16px; }
.live-pill { font-size:12px; }
.selected-location-context { font-size:15px; }
.map-status,.forecast-map-meta,.map-data-count,.map-status-inline { font-size:14px; }
.legend-heading { font-size:14px; }
.legend-labels { font-size:14px; }
.legend-tick { font-size:13px; }
.forecast-rail-head,.map-control-rail { font-size:15px; }
.rain-controls-title { font-size:14px; }
.rain-controls-meta,.rain-grs-gradient-labels,.rain-data-meta { font-size:13px; }
.param-flyout-head>strong { font-size:18px; }
.param-flyout-head>small { font-size:13px; }
.param-flyout .tile-name { font-size:16px; }
.param-flyout .tile-unit { font-size:13px; }
.param-flyout .related-param .tile-name { font-size:14px; }
.param-flyout .related-param .tile-unit { font-size:12px; }
.param-flyout .param-tile { min-height:56px; }
.rail-label { font-size:11px; }
.footer { font-size:14px; }

@media (max-width:760px) {
  .top-clock,.top-clock time { font-size:16px; }
  .mode-btn,.nav-summary { font-size:14px; }
  .search input { font-size:15px; }
  .detail-forecast-head .detail-meta { font-size:14px; }
  .detail-forecast-head .detail-title { font-size:28px; }
  .detail-forecast-head .detail-value { font-size:38px; }
  .detail-forecast-head .detail-label { font-size:14px; }
  .forecast-vital-head>span { font-size:14px; }
  .forecast-vital-head>strong { font-size:16px; }
  .forecast-vital-scale { font-size:11px; }
  .sidebar-card-head h2 { font-size:20px; }
  .sidebar-forecast-footer { font-size:12px; }
  .param-flyout .tile-name { font-size:15px; }
  .param-flyout .tile-unit { font-size:12px; }
}
@media (max-width:420px) {
  .top-clock,.top-clock time { font-size:14px; }
  .forecast-vital { padding:8px 9px 7px; }
  .forecast-vital-head>span { font-size:13px; }
  .forecast-vital-head>strong { font-size:15px; }
  .forecast-vital-scale { font-size:10px; }
}


/* ŻABOD 0.20.8 — compact API cycle badge, title-row meteorogram action,
   stable control-rail height, and a location panel that uses the freed space. */
.forecast-period-badge:not([hidden]) {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  max-width:250px;
  padding:7px 11px;
  border:1px solid var(--obs-line);
  border-radius:10px;
  color:var(--obs-green-bright);
  background:color-mix(in srgb,var(--obs-panel) 92%,transparent);
  font-size:12px;
  font-weight:750;
  line-height:1.2;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.forecast-period-badge[hidden] { display:none !important; }

@media (min-width:821px) {
  .location-detail-panel {
    flex:1 1 auto;
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:var(--obs-line-strong) transparent;
  }
  .sidebar-forecast-card { flex:0 0 auto; }
}
.detail-title-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px 12px;
}
.detail-title-row .detail-title { min-width:0; margin:1px 0 0; }
.meteorogram-open-inline {
  flex:0 0 auto;
  padding:7px 10px;
  font-size:13px;
  font-weight:750;
  white-space:nowrap;
}
.detail-forecast-head .detail-main { margin-top:8px; }

.map-control-rail {
  box-sizing:border-box;
  min-height:64px;
  align-items:center;
}
.map-control-rail .forecast-rail { min-height:34px; }
.map-control-rail .map-controls-inline { align-self:center; }

@media (max-width:1120px) {
  .forecast-period-badge:not([hidden]) {
    grid-column:1/-1;
    grid-row:2;
    justify-self:start;
    max-width:100%;
  }
}
@media (max-width:820px) {
  .location-detail-panel {
    flex:0 0 auto;
    max-height:none;
    overflow:visible;
  }
  .map-control-rail { min-height:64px; }
  .topbar-actions { grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) 42px; }
  .top-clock { grid-column:1/-1; grid-row:1; }
  .forecast-period-badge:not([hidden]) { grid-column:1/-1; grid-row:2; }
  .search { grid-column:1; grid-row:3; width:100%; }
  .theme-toggle { grid-column:2; grid-row:3; }
}
@media (max-width:560px) {
  .topbar-actions { grid-template-columns:minmax(0,1fr) 42px; }
  .top-clock { grid-column:1/-1; grid-row:1; }
  .forecast-period-badge:not([hidden]) { grid-column:1/-1; grid-row:2; justify-self:stretch; }
  .search { grid-column:1; grid-row:3; width:100%; }
  .theme-toggle { grid-column:2; grid-row:3; }
  .detail-title-row .detail-title { font-size:clamp(25px,6vw,32px); }
  .meteorogram-open-inline { font-size:12px; padding:7px 9px; }
  .map-control-rail { min-height:64px; }
}


/* ŻABOD 0.20.9 — responsive map geometry. JS fits the map into the available
   stage area while preserving the 900:800 viewBox ratio, so SVG geography and
   HTML station markers remain aligned. */
@media (min-width:821px) {
  .map-stage { display:flex; flex-direction:column; align-items:stretch; min-width:0; min-height:0; height:auto; flex:1 1 auto; overflow:visible; }
  .map-card .map { flex:0 0 auto; width:100%; height:auto; min-height:0; max-height:none; aspect-ratio:9 / 8; align-self:center; }
}
@media (max-width:820px) {
  .map-card .map { width:100%; height:auto; aspect-ratio:9 / 8; }
}

/* ŻABOD 0.20.11 — restrained micro-interactions (CSS only; no layout or data changes). */
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .mode-btn,
  .nav-summary,
  .theme-toggle,
  .forecast-day,
  .location-card button,
  .meteorogram-open,
  .map-tool-button,
  .param-category-trigger {
    transition: background-color .2s ease, border-color .2s ease, color .2s ease,
      box-shadow .2s ease, transform .2s ease;
  }

  .mode-btn:hover:not(:disabled),
  .nav-summary:hover,
  .forecast-day:hover:not(:disabled):not(.unavailable),
  .location-card button:hover,
  .meteorogram-open:hover,
  .map-tool-button:hover,
  .param-category-trigger:hover {
    transform: translateY(-1px);
  }

  .theme-toggle span {
    display: inline-block;
    transition: transform .28s cubic-bezier(.2,.8,.2,1);
  }
  .theme-toggle:hover span { transform: rotate(14deg) scale(1.06); }

  .mode-btn.active,
  .forecast-day.active,
  .param-tile.active {
    transition: background-color .22s ease, border-color .22s ease, color .22s ease,
      box-shadow .22s ease;
  }
}

/* Keyboard focus remains visible; reduced-motion users get no added motion. */
@media (prefers-reduced-motion:reduce) {
  .theme-toggle span { transition:none!important; }
}



/* v0.20.15 — selected map value is echoed as a larger gradient badge in the location panel. */
.detail-main .detail-value-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  padding: 7px 15px 9px;
  border-radius: 13px;
  color: var(--station-text-color, #fff);
  background: var(--station-color, var(--obs-green-bright));
  border: 3px solid rgba(255,255,255,.96);
  box-shadow: 0 4px 14px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.12);
  font-size: clamp(38px, 3.8vw, 54px);
  letter-spacing: -.055em;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(255,255,255,.16);
  font-variant-numeric: tabular-nums;
}
.detail-main .detail-value-badge .station-value {
  display: inline-block;
  white-space: nowrap;
}
.detail-main .detail-value-badge.station-value-transition .station-value {
  animation: station-value-change-in 520ms cubic-bezier(.18,.85,.28,1.18) both;
}
@media (max-width: 720px) {
  .detail-main .detail-value-badge { font-size: clamp(32px, 7vw, 44px); padding: 6px 12px 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .detail-main .detail-value-badge .station-value { animation: none !important; }
}

/* v0.20.16 — current observations share the forecast detail visual language. */
.detail-forecast-head .detail-main { align-items:center; gap:12px; }
.detail-forecast-head .detail-value-badge {
  display:inline-flex; align-items:center; justify-content:center;
  width:fit-content; max-width:100%; padding:10px 18px 12px;
  border-radius:13px; border:3px solid rgba(255,255,255,.96);
  color:var(--station-text-color,#fff); background:var(--station-color,#287a42);
  box-shadow:0 4px 14px rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.12);
  font-size:clamp(48px,4.5vw,68px); font-weight:900; line-height:1;
  letter-spacing:-.055em; font-variant-numeric:tabular-nums;
}
.detail-forecast-head .detail-value-badge .station-value { display:inline-block; white-space:nowrap; }
.current-detail-head .detail-meta { letter-spacing:.08em; font-weight:800; }
.current-vitals { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.current-vitals .current-wind-vital { grid-column:1 / -1; }
.current-vitals .current-vital { min-height:56px; display:flex; flex-direction:column; justify-content:center; }
.current-vitals .current-vital .forecast-vital-head { margin:0; }
.current-wind-direction { display:flex; align-items:center; gap:12px; color:var(--obs-muted); font-size:12px; font-weight:700; }
.current-wind-direction .wind-arrow-large { width:30px; height:30px; font-size:26px; flex:0 0 30px; }
.current-detail-head .detail-label { font-size:15px; line-height:1.25; }
@media (max-width:420px) { .current-vitals { grid-template-columns:minmax(0,1fr); } .current-vitals .current-wind-vital { grid-column:auto; } }
@media (prefers-reduced-motion:reduce) { .detail-value-badge.station-value-transition .station-value { animation:none!important; } }


/* v0.20.18 — make current-data value genuinely prominent.
   Set the inner span explicitly: inherited sizing was being overridden by
   generic .detail-value rules, leaving the number visually tiny. */
.current-detail-head .detail-value-badge {
  min-width: 150px;
  min-height: 78px;
  padding: 10px 25px 12px !important;
  font-size: 52px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -.055em;
  border-width: 3px;
  border-radius: 17px;
}
.current-detail-head .detail-value-badge .station-value {
  font-size: 52px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}
.current-detail-head .detail-label {
  margin-top: 9px;
  font-size: 20px !important;
  line-height: 1.3 !important;
}
.current-detail-head .detail-label,
.current-detail-head .detail-value-label,
.current-detail-head .detail-meta + .detail-title-row + .detail-label {
  font-size: 19px !important;
  line-height: 1.25;
}
.layer-panel { position:relative; }
#rainControls {
  position:absolute;
  z-index:120;
  left:calc(100% + 9px);
  top:0;
  transform:none;
  width:min(330px,calc(100vw - 90px));
  border:1px solid var(--obs-line-strong);
  border-radius:13px;
  background:var(--obs-panel);
  box-shadow:var(--obs-shadow);
}
#rainControls[hidden] { display:none !important; }
@media (max-width:720px) {
  .current-detail-head .detail-value-badge { min-width:138px; min-height:72px; padding:9px 20px 11px !important; font-size:46px !important; }
  .current-detail-head .detail-value-badge .station-value { font-size:46px !important; }
  .current-detail-head .detail-label { font-size:19px !important; }
  #rainControls { left:0; top:calc(100% + 8px); width:min(286px,calc(100vw - 32px)); }
}


/* ŻABOD 0.20.19 — shared prominent value styling for current + forecast. */
.detail-forecast-head .detail-value-badge {
  min-width:150px; min-height:78px; padding:10px 25px 12px !important;
  font-size:52px !important; font-weight:900 !important; line-height:1 !important;
  letter-spacing:-.055em; border-width:3px; border-radius:17px;
}
.detail-forecast-head .detail-value-badge .station-value {
  font-size:52px !important; font-weight:900 !important; line-height:1 !important;
}
.detail-forecast-head .detail-label { font-size:20px !important; line-height:1.3 !important; }

/* RainGRS is a proper parameter-style flyout, portalled outside the scrolling rail. */
#rainControls {
  position:fixed !important; z-index:2500 !important;
  left:var(--rain-flyout-left, 80px) !important;
  top:var(--rain-flyout-top, 100px) !important;
  transform:none !important;
  width:min(360px, calc(100vw - 100px)) !important;
  max-height:calc(100dvh - 32px); overflow:auto; box-sizing:border-box;
  padding:14px !important; border:1px solid var(--obs-line-strong) !important;
  border-radius:15px !important; background:var(--obs-panel) !important;
  box-shadow:var(--obs-shadow) !important; color:var(--obs-ink);
}
#rainControls[hidden] { display:none !important; }
#rainControls .rain-controls-title { font-size:13px !important; font-weight:850; margin-bottom:10px; }
#rainControls .rain-slider-row { display:grid; grid-template-columns:38px minmax(0,1fr) 48px; align-items:center; gap:9px; }
#rainControls .rain-slider-row input { min-width:0; width:100%; }
#rainControls .rain-controls-meta, #rainControls .rain-data-meta { font-size:11px !important; }
#rainControls .rain-data-meta { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#rainControls .rain-data-meta div { min-width:0; }
@media (max-width:600px) {
  #rainControls { left:12px !important; right:12px !important; top:var(--rain-flyout-top, 100px) !important; width:auto !important; max-height:calc(100dvh - 130px); }
  .detail-forecast-head .detail-value-badge { min-width:138px; min-height:72px; padding:9px 20px 11px !important; font-size:46px !important; }
  .detail-forecast-head .detail-value-badge .station-value { font-size:46px !important; }
}

/* Keep layer glyphs optically aligned despite different emoji glyph metrics. */
.layer-toggle .layer-icon {
  width:26px !important; height:26px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  font-size:21px !important; line-height:1 !important;
  flex:0 0 26px; text-align:center;
}
.layer-toggle { box-sizing:border-box; flex:0 0 40px; }


/* ŻABOD 0.20.20 — optical alignment for layer rail icons.
   Fixed icon viewport prevents emoji glyph metrics from shifting controls horizontally. */
.parameter-rail .layer-panel {
  align-items: center !important;
  width: 100%;
}
.parameter-rail .layer-toggle {
  box-sizing: border-box;
  flex: 0 0 40px;
  width: 40px !important;
  min-width: 40px;
  height: 40px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  place-items: center !important;
  justify-self: center;
  overflow: hidden;
}
.parameter-rail .layer-toggle .layer-icon {
  box-sizing: border-box;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: center;
  align-self: center;
  width: 26px !important;
  min-width: 26px;
  height: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  font-size: 20px;
  transform: none;
}
.parameter-rail .layer-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}


/* ŻABOD 0.20.21 — single shared rail geometry and surfaces.
   Both selector groups use the same 42px control box and one center axis. */
.parameter-rail {
  box-sizing: border-box;
  align-items: stretch;
  background: #0c1d1400 !important;
}
.parameter-rail .tile-bar,
.parameter-rail .layer-panel,
.parameter-rail .future-layer-stack {
  width: 100% !important;
  min-width: 0;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start;
  gap: 7px !important;
  margin-inline: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.parameter-rail .tile-bar {
  border-top: 0 !important;
}
.map-card.mode-current .parameter-rail .tile-bar,
.map-card.mode-forecast .parameter-rail .tile-bar {
  background: transparent !important;
  border-top: 0 !important;
}
.parameter-rail .param-category,
.parameter-rail .param-category-trigger,
.parameter-rail .layer-toggle,
.parameter-rail .future-layer {
  box-sizing: border-box !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  flex: 0 0 42px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  position: relative;
  left: auto !important;
  right: auto !important;
  transform: none;
}
.parameter-rail .param-category-trigger,
.parameter-rail .layer-toggle,
.parameter-rail .future-layer {
  display: grid !important;
  place-items: center !important;
  border-radius: 12px;
  background: var(--obs-panel-2) !important;
  border: 1px solid var(--obs-line) !important;
  color: var(--obs-muted);
}
.parameter-rail .param-category-trigger:hover,
.parameter-rail .param-category-trigger:focus-visible,
.parameter-rail .param-category.is-open .param-category-trigger,
.parameter-rail .layer-toggle:hover,
.parameter-rail .future-layer:hover {
  background: var(--obs-panel-raised) !important;
  border-color: var(--obs-green) !important;
}
.parameter-rail .layer-toggle:has(input:checked) {
  background: color-mix(in srgb, var(--obs-green) 15%, var(--obs-panel-2)) !important;
  border: 2px solid var(--obs-green) !important;
  color: var(--obs-green-bright) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--obs-green-bright) 28%, transparent) !important;
}
.parameter-rail .layer-toggle .layer-icon {
  display: grid !important;
  place-items: center !important;
  width: 26px !important;
  min-width: 26px !important;
  height: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  transform: none !important;
}
.parameter-rail .rail-label,
.parameter-rail .rail-separator {
  width: 100%;
  box-sizing: border-box;
}
.parameter-rail .rail-separator {
  background: var(--obs-line) !important;
  margin: 3px 0 !important;
}

/* ŻABOD 0.21 — compact hourly blocks for “Zobacz szczegóły!” */
.meteorogram-sheet { width:min(98vw,1800px); max-width:1800px; }
.meteorogram-chart { overflow:auto; max-height:calc(100vh - 130px); }
.meteo-compact-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 2px 14px; color:var(--obs-ink); }
.meteo-compact-toolbar>div:first-child { display:grid; gap:4px; }
.meteo-compact-toolbar strong { font-size:18px; }
.meteo-compact-toolbar small { color:var(--obs-muted); font-size:11px; }
.meteo-horizon-controls { display:flex; gap:5px; }
.meteo-horizon-controls button { border:1px solid var(--obs-line-strong); border-radius:8px; padding:7px 12px; color:var(--obs-ink); background:var(--obs-panel-2); cursor:pointer; }
.meteo-horizon-controls button.active { color:#06140a; background:var(--obs-green-bright); border-color:var(--obs-green-bright); }
.meteo-block-matrix { display:grid; grid-template-columns:138px repeat(var(--meteo-cols),minmax(47px,1fr)); min-width:max-content; gap:2px; color:var(--obs-ink); font-variant-numeric:tabular-nums; }
.meteo-block-corner,.meteo-day-head,.meteo-hour-head { display:flex; align-items:center; justify-content:center; min-height:30px; padding:4px; border:1px solid var(--obs-line); background:var(--obs-panel-2); color:var(--obs-muted); font-size:11px; }
.meteo-day-head { color:var(--obs-cyan,var(--obs-green-bright)); font-weight:800; text-transform:capitalize; }
.meteo-hour-head { font-size:10px; color:var(--obs-ink); }
.meteo-hour-head.is-night { color:#8aa8ff; background:#10182a; }
.meteo-block-section { grid-column:1/-1; padding:7px 10px 4px; margin-top:5px; color:var(--obs-green-bright); border-bottom:1px solid var(--obs-line-strong); font-size:10px; font-weight:850; letter-spacing:.13em; }
.meteo-block-spacer { display:none; }
.meteo-block-row { display:contents; }
.meteo-block-label { position:sticky; left:0; z-index:2; display:flex; flex-direction:column; justify-content:center; gap:2px; padding:5px 8px; border:1px solid var(--obs-line); background:var(--obs-panel); }
.meteo-block-label strong { font-size:11px; }
.meteo-block-label small,.meteo-block-label em { color:var(--obs-muted); font-size:9px; font-style:normal; }
.meteo-block-cells { display:contents; }
.meteo-block { display:flex; min-height:43px; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:3px 1px; border:1px solid var(--obs-line); border-radius:4px; background:var(--meteo-block-bg,transparent); text-align:center; }
.meteo-block strong { font-size:13px; line-height:1.05; white-space:nowrap; }
.meteo-block strong small { margin-left:2px; font-size:8px; font-weight:500; }
.meteo-block-sub { color:var(--obs-ink); font-size:8px; line-height:1.1; }
.meteo-block.is-missing { color:var(--obs-muted); background:var(--obs-panel-2); }
.meteo-condition { display:flex; min-height:43px; flex-direction:column; justify-content:center; align-items:center; gap:2px; border:1px solid var(--obs-line); background:var(--obs-panel-2); text-align:center; }
.meteo-condition strong { font-size:18px; line-height:1; }
.meteo-condition small { max-width:100%; padding:0 2px; color:var(--obs-muted); font-size:8px; }
.meteo-daily-wrap { grid-column:1/-1; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:7px; padding:4px 0; }
.meteo-daily-card { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; padding:10px; border:1px solid var(--obs-line-strong); border-radius:8px; background:var(--obs-panel-2); }
.meteo-daily-card>div { display:grid; gap:4px; align-content:start; }
.meteo-daily-card strong { font-size:12px; }
.meteo-daily-card small,.meteo-daily-sums span { color:var(--obs-muted); font-size:10px; }
.meteo-daily-sums strong { color:var(--obs-cyan,var(--obs-green-bright)); font-size:16px; }
.meteo-legend { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:12px 2px; color:var(--obs-muted); font-size:10px; }
.meteo-legend>strong { color:var(--obs-ink); }
.legend-swatch { display:inline-block; width:10px; height:10px; margin-right:4px; border-radius:3px; vertical-align:-1px; }
.legend-swatch.temp { background:linear-gradient(90deg,#36c9ff,#38e879,#ffd23f,#ff654e); }
.legend-swatch.rain { background:#1c9bff; }
.legend-swatch.cloud { background:#6496a5; }
.meteo-more-note { padding:6px 2px; color:var(--obs-muted); font-size:10px; }
@media(max-width:700px) { .meteo-block-matrix { grid-template-columns:108px repeat(var(--meteo-cols),minmax(44px,1fr)); } .meteo-block-label strong { font-size:10px; } .meteo-block strong { font-size:11px; } .meteo-compact-toolbar strong { font-size:15px; } }


/* ŻABOD 0.21.1 — denser hourly matrix, high contrast and larger type */
.meteo-block-matrix { grid-template-columns:116px repeat(var(--meteo-cols),36px); gap:1px; }
.meteo-block-corner,.meteo-day-head,.meteo-hour-head { min-height:34px; padding:3px 1px; font-size:12px; font-weight:300; }
.meteo-day-head { font-weight:300; letter-spacing:.015em; }
.meteo-hour-head { font-size:12px; font-weight:300; }
.meteo-block-section { font-size:12px; font-weight:300; letter-spacing:.09em; padding:8px 8px 5px; }
.meteo-block-label { padding:4px 6px; gap:3px; }
.meteo-block-label strong { font-size:13px; font-weight:300; line-height:1.15; }
.meteo-block-label small,.meteo-block-label em { font-size:10px; font-weight:300; }
.meteo-block { min-height:48px; padding:3px 0; border-radius:3px; border-color:rgba(150,190,175,.32); box-shadow:inset 0 0 0 1px rgba(0,0,0,.10); }
.meteo-block strong { font-size:16px; font-weight:300; line-height:1.08; text-shadow:0 1px 2px rgba(0,0,0,.72); }
.meteo-block strong small { font-size:9px; font-weight:300; }
.meteo-block-sub { font-size:10px; font-weight:300; color:#f1fff7; text-shadow:0 1px 2px rgba(0,0,0,.8); }
.meteo-block.is-missing { background:#17221d; color:#b9c9c0; }
.meteo-condition { min-height:48px; border-color:rgba(150,190,175,.32); }
.meteo-condition strong { font-size:24px; font-weight:300; }
.meteo-condition small { color:#e1eee6; font-size:10px; font-weight:300; }
.meteo-daily-card strong { font-size:14px; font-weight:300; }
.meteo-daily-card small,.meteo-daily-sums span { font-size:11px; font-weight:300; }
.meteo-daily-sums strong { font-size:18px; font-weight:300; }
.meteo-legend { font-size:12px; font-weight:300; }
.meteo-legend>strong { font-weight:300; }
.meteo-more-note { font-size:12px; font-weight:300; }
.meteo-wind-arrow { display:inline-block; font-size:22px; line-height:1; color:#f1fff8; text-shadow:0 1px 3px rgba(0,0,0,.9); vertical-align:-2px; }
.meteo-sunshine { min-height:48px; justify-content:center; background:linear-gradient(180deg,rgba(255,210,35,.04),var(--meteo-block-bg))!important; }
.meteo-sunshine-bar { display:block; width:78%; height:7px; border-radius:2px; background:linear-gradient(90deg,#51420a,#ffe13b); opacity:calc(.25 + var(--sunshine-strength) * .75); box-shadow:0 0 9px rgba(255,218,40,.28); }
@media(max-width:700px) { .meteo-block-matrix { grid-template-columns:100px repeat(var(--meteo-cols),34px); } .meteo-block-label strong { font-size:12px; } .meteo-block strong { font-size:14px; } }

/* ŻABOD 0.21.2: compact meteorogram labels, solar events and map-consistent wind arrows */
.meteo-block strong small { display:none !important; }
.meteo-block strong { white-space:nowrap; }
.meteo-hour-head { position:relative; display:flex; flex-direction:column; gap:1px; line-height:1; }
.meteo-hour-head.is-day { background:linear-gradient(180deg,rgba(255,211,52,.20),var(--obs-panel-2)); color:#fff2a6; }
.meteo-hour-head.is-night { background:linear-gradient(180deg,rgba(25,42,85,.66),#10182a); color:#c5d5ff; }
.meteo-solar-event { display:block; height:11px; font-size:10px; line-height:11px; font-weight:300; }
.meteo-solar-event.sunrise { color:#ffe36b; }
.meteo-solar-event.sunset { color:#ff9b78; }
.meteo-wind-arrow { display:inline-grid; place-items:center; width:22px; height:22px; font-size:20px; line-height:1; color:var(--obs-green-bright); transform-origin:center; filter:drop-shadow(0 0 2px rgba(0,0,0,.85)); }

/* ŻABOD 0.21.2.3: contrast-first values, compact condition icons, no solar glyphs */
.meteo-block strong { color:var(--meteo-block-fg, #050b08); text-shadow:none; }
.meteo-block-sub { color:var(--meteo-block-fg, #050b08); text-shadow:none; }
.meteo-wind-arrow { color:var(--meteo-block-fg, #050b08); filter:none; }
.meteo-condition small { display:none !important; }
.meteo-hour-head .meteo-solar-event { display:none !important; }


/* 0.21.2.5: targeted meteorogram contrast rules; preserve full observatory stylesheet */
.meteo-block strong, .meteo-block-sub { color:var(--meteo-block-fg, #050b08); text-shadow:none; }
.meteo-wind-arrow { color:var(--meteo-block-fg, #050b08); filter:none; }
.meteo-condition small { display:none; }
.meteo-hour-head .meteo-solar-event { display:none; }

/* ŻABOD 0.21.2.6 — cloud cover blue-to-grey scale and viewport-safe meteorogram */
.meteo-cloud-scale { display:flex; align-items:center; justify-content:center; }
.meteo-cloud-scale strong { display:block; min-height:1em; }
.meteorogram-overlay:not(.hidden) {
  position:fixed;
  top:var(--zabod-header-height,72px);
  right:0;
  bottom:0;
  left:0;
  box-sizing:border-box;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:12px 16px 16px;
  overflow:auto;
  z-index:1000;
}
.meteorogram-sheet {
  box-sizing:border-box;
  width:min(1600px,100%);
  max-height:calc(100vh - var(--zabod-header-height,72px) - 28px);
  overflow:auto;
  margin:0 auto;
}
@media (max-width:760px) {
  .meteorogram-overlay:not(.hidden) { padding:8px; }
  .meteorogram-sheet { max-height:calc(100vh - var(--zabod-header-height,72px) - 16px); }
}

/* ŻABOD 0.21.5 — meteorogram readability, sticky timeline and header-safe overlays */
:root { --zabod-header-height: 76px; }
.meteorogram-overlay:not(.hidden),
.forecast-summary-overlay:not(.hidden) {
  top: var(--zabod-header-height) !important;
  bottom: 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
  overflow: auto !important;
}
.meteorogram-overlay:not(.hidden) { padding: 10px 16px 14px !important; align-items: stretch !important; }
.meteorogram-sheet {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  margin: 0 auto !important;
}
.forecast-summary-overlay:not(.hidden) { display: flex !important; align-items: flex-start !important; justify-content: center !important; padding: 12px 16px !important; }
.forecast-summary-sheet { height: 100% !important; max-height: 100% !important; min-height: 0 !important; }

/* Sticky date and hour rows inside the meteorogram scroller. */
.meteorogram-chart { min-height: 0; }
.meteo-block-matrix { --meteo-header-row-height: 35px; }
.meteo-day-head, .meteo-block-matrix > .meteo-block-corner:first-child {
  position: sticky;
  top: 0;
  z-index: 12;
}
.meteo-hour-head, .meteo-hour-corner {
  position: sticky;
  top: var(--meteo-header-row-height);
  z-index: 11;
}
.meteo-block-matrix > .meteo-block-corner:first-child, .meteo-hour-corner { left: 0; }
.meteo-day-head { background:#0c1b11; }
.meteo-block-corner { background:#0c1b11; }
.meteo-hour-head { background-color:#102016; }
.meteo-hour-head.is-night { background-color:#10182a; }

/* Bold only the requested primary values; ranges and descriptions stay regular. */
.meteo-hour-head { font-weight: 800 !important; }
.meteo-row-temperature .meteo-block > strong,
.meteo-row-precipitation .meteo-block > strong,
.meteo-row-wind .meteo-block > strong,
.meteo-row-visibility .meteo-block > strong,
.meteo-row-aqi .meteo-block > strong { font-weight: 800 !important; }
.meteo-row-temperature .meteo-block-sub,
.meteo-row-precipitation .meteo-block-sub { font-weight: 300 !important; }
.meteo-row-pressure .meteo-block > strong { font-weight: 300 !important; }

/* Sky and atmosphere blocks are 5px shorter; flex alignment keeps values centered. */
.meteo-row-cloud .meteo-block,
.meteo-row-cloud-high .meteo-block,
.meteo-row-cloud-mid .meteo-block,
.meteo-row-cloud-low .meteo-block,
.meteo-row-sunshine .meteo-block,
.meteo-row-pressure .meteo-block,
.meteo-row-visibility .meteo-block,
.meteo-row-aqi .meteo-block { min-height: 43px !important; }
@media (max-width:760px) {
  :root { --zabod-header-height: 76px; }
  .meteorogram-overlay:not(.hidden) { padding: 8px !important; }
  .forecast-summary-overlay:not(.hidden) { padding: 8px !important; }
}


/* ŻABOD 0.21.6 — sticky header legibility, loading state and map-aligned contrast */
.meteo-hour-head, .meteo-hour-corner, .meteo-day-head,
.meteo-block-matrix > .meteo-block-corner:first-child {
  isolation:isolate;
  background-color:rgba(10, 27, 17, .97) !important;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 2px 5px rgba(0,0,0,.35);
}
.meteo-hour-head.is-day { background:linear-gradient(180deg,rgba(35,58,33,.97),rgba(10,27,17,.97)) !important; }
.meteo-hour-head.is-night { background:linear-gradient(180deg,rgba(23,32,55,.98),rgba(10,20,16,.98)) !important; }
.meteo-hour-head { z-index:15 !important; }
.meteo-day-head, .meteo-block-matrix > .meteo-block-corner:first-child { z-index:16 !important; }
.meteo-hour-corner { z-index:17 !important; }
.meteorogram-loading { min-height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--obs-ink,#e9f5ed); text-align:center; background:rgba(7,19,12,.94); border:1px solid var(--obs-line,#244333); border-radius:10px; }
.meteorogram-loading small { color:var(--obs-muted,#a7b9ad); }
.meteorogram-loading-spinner { width:28px; height:28px; border:3px solid rgba(150,210,165,.22); border-top-color:var(--obs-green-bright,#8be66f); border-radius:50%; animation:zabod-spin .8s linear infinite; }
@keyframes zabod-spin { to { transform:rotate(360deg); } }


/* ŻABOD 0.21.8 — compact forecast rail and transparent map canvas. */
.map-heading-sub { display:none !important; }
.forecast-rail { flex:1 1 auto; min-width:0; }
.forecast-days { flex:1 1 auto; min-width:0; }
.forecast-day { flex:1 1 0; min-width:0; height:36px; min-height:36px; padding:3px 3px; display:flex; align-items:center; justify-content:center; white-space:nowrap; font-size:16px; line-height:1; }
.map-title-row .map-status-inline { font-size:clamp(16px,1.5vw,19px); }
@media (max-width:820px) { .forecast-day { font-size:clamp(11px,2.1vw,15px); } }


/* ŻABOD 0.22.3 — subtelna poświata tła mapy oparta na medianie aktywnej warstwy. */
.map-card .map {
  --map-data-tint: #7b897e;
  background: radial-gradient(ellipse at 50% 38%,
    color-mix(in srgb, var(--map-bg-1, #e2f1dd) 91%, var(--map-data-tint) 9%) 0%,
    color-mix(in srgb, var(--map-bg-2, #d0e6d0) 96%, var(--map-data-tint) 4%) 64%,
    var(--map-bg-2, #c1dbc5) 100%) !important;
  transition: background 260ms ease;
}
:root[data-theme="dark"] .map-card .map {
  background: radial-gradient(ellipse at 50% 38%,
    color-mix(in srgb, #0f1b14 93%, var(--map-data-tint) 7%) 0%,
    color-mix(in srgb, #15251a 97%, var(--map-data-tint) 3%) 64%,
    #15251a 100%) !important;
}
@media (prefers-reduced-motion: reduce) {
  .map-card .map { transition: none; }
}


/* WRO uses the same flyout-tile surface and dimensions as its neighbour;
   only the text stack is compact because the paired WRO tile is narrower. */
.param-flyout .param-tile.wro-param {
  grid-template-columns:22px minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:6px;
  row-gap:2px;
  min-width:0;
  min-height:49px;
  height:auto;
  padding:8px 9px;
  border:1px solid var(--obs-line);
  border-radius:10px;
  background:var(--obs-panel-2);
  color:var(--obs-ink);
  box-shadow:none;
}
.param-flyout .param-tile.wro-param .tile-icon {
  grid-column:1;
  grid-row:1 / 3;
  width:22px;
  align-self:center;
  font-size:21px;
}
.param-flyout .param-tile.wro-param .tile-name {
  grid-column:2;
  grid-row:1;
  min-width:0;
  align-self:end;
  font-size:13px;
  line-height:1.1;
}
.param-flyout .param-tile.wro-param .tile-unit {
  grid-column:2;
  grid-row:2;
  min-width:0;
  align-self:start;
  justify-self:start;
  font-size:9px;
  line-height:1.1;
  white-space:normal;
  overflow-wrap:anywhere;
}
.param-flyout .param-tile.wro-param:hover {
  border-color:var(--obs-green);
  background:var(--obs-panel-raised);
  color:var(--obs-ink);
}
.param-flyout .param-tile.wro-param.active {
  border-color:var(--obs-green);
  color:var(--obs-green-bright);
  background:rgba(58,169,86,.15);
  box-shadow:inset 3px 0 0 var(--obs-green);
}

/* ŻABOD 0.24 — historical climate corner */
.history-card-meteo { cursor:pointer; width:100%; font:inherit; text-align:left; }
.history-card-meteo:hover { border-color:var(--obs-green); transform:translateY(-2px); }
.history-climate-panel { grid-column:1/-1; margin-top:16px; min-width:0; }
.climate-source-note { color:var(--obs-muted); font-size:12px; margin:6px 0 0; }
.climate-toolbar { display:grid; grid-template-columns:minmax(180px,1.4fr) minmax(180px,1.3fr) minmax(135px,.8fr) minmax(135px,.8fr) auto; gap:10px; align-items:end; padding:16px; margin:14px 0; border:1px solid var(--obs-line); border-radius:14px; background:var(--obs-panel); }
.climate-toolbar label { display:flex; flex-direction:column; gap:7px; color:var(--obs-muted); font-size:10px; font-weight:800; letter-spacing:.08em; }
.climate-toolbar select,.climate-toolbar input { min-width:0; width:100%; border:1px solid var(--obs-line); border-radius:9px; padding:10px; background:var(--obs-panel-raised,var(--obs-panel)); color:var(--obs-ink); font:inherit; font-size:12px; }
.climate-toolbar button { border:0; border-radius:9px; background:var(--obs-green); color:#102016; padding:11px 14px; font-weight:800; cursor:pointer; white-space:nowrap; }
.climate-summary { display:grid; grid-template-columns:repeat(var(--climate-stat-count, 5),minmax(0,1fr)); gap:10px; margin:12px 0; }
.climate-stat { border:1px solid var(--obs-line); border-radius:12px; padding:13px 15px; background:var(--obs-panel); min-width:0; }
.climate-stat span { display:block; color:var(--obs-muted); font-size:10px; text-transform:uppercase; letter-spacing:.07em; }
.climate-stat strong { display:block; margin-top:7px; font-size:22px; letter-spacing:-.04em; }
.climate-chart { min-height:270px; overflow:hidden; border:1px solid var(--obs-line); border-radius:16px; padding:12px; background:var(--obs-panel); }
.climate-chart svg { display:block; width:100%; height:auto; min-height:260px; }
.climate-chart-legend { display:flex; flex-wrap:wrap; gap:14px; padding:8px 4px 2px; color:var(--obs-muted); font-size:11px; }
.climate-legend-line { display:inline-block; width:18px; height:3px; border-radius:3px; margin-right:5px; vertical-align:middle; background:currentColor; }
.climate-footnote { color:var(--obs-muted); font-size:11px; line-height:1.6; margin:12px 2px; }
@media(max-width:900px){.climate-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}.climate-toolbar button{width:100%}.climate-summary{grid-template-columns:repeat(var(--climate-stat-count, 5),minmax(130px,1fr));overflow-x:auto;padding-bottom:4px}}
@media(max-width:560px){.climate-toolbar{grid-template-columns:1fr}.climate-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.history-grid{grid-template-columns:1fr}}
.climate-legend-bar { display:inline-block; width:12px; height:12px; border:1px solid #b5ff65; border-radius:4px; margin-right:6px; vertical-align:-2px; background:linear-gradient(180deg,rgba(165,245,108,.95),rgba(56,169,106,.48)); box-shadow:0 0 0 1px rgba(181,255,101,.12); }

/* 0.24.6 — kompaktowe kafelki archiwum */
.history-grid .history-card { display:flex; flex-direction:column; align-items:flex-start; }
.history-grid .history-card-meta { margin-top:auto; padding-top:4px; }
:root { --climate-bar-outline: var(--obs-green-bright); }


/* 0.24.11 — creator support link at the bottom of the dashboard sidebar. */
.sidebar-support-link{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:9px;
  min-height:34px; margin-top:7px; padding:7px 10px; border:1px solid var(--obs-line);
  border-radius:10px; color:var(--obs-muted); background:color-mix(in srgb,var(--obs-panel) 82%,transparent);
  font-size:11px; font-weight:700; text-decoration:none; transition:border-color .15s,color .15s,background .15s;
}
.sidebar-support-link>span:first-child{font-size:14px}
.sidebar-support-link:hover{color:var(--obs-green-bright);border-color:var(--obs-green);background:var(--obs-panel-raised)}
.sidebar-support-arrow{margin-left:auto;color:var(--obs-green-bright)}
@media(min-width:821px){
  .right-rail.sidebar-column{height:100%;min-height:0}
  .location-detail-panel{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
}
@media(max-width:820px){
  .location-detail-panel{flex:0 0 auto;overflow:visible}
  .sidebar-support-link{margin-top:0;margin-bottom:2px}
}