/* pogodakrakow.pl, strona główna (projekt)
   Zasady: jeden akcent (kobalt), kolory jakości powietrza są semantyczne (skala GIOŚ).
   Promienie: panele 14px, elementy wewnętrzne 8px, chipy w pełni zaokrąglone. */

:root{
  --bg:#f4f6f8; --surface:#ffffff; --text:#11161d; --muted:#566170; --line:#e1e5ea;
  --accent:#1f5bd1; --accent-soft:#e8effc;
  --r:14px; --r-s:8px;
  --aq0:#2e9e3f; --aq1:#8cbf26; --aq2:#e3b505; --aq3:#e07b00; --aq4:#d32f2f; --aq5:#8e1b1b; --aqx:#9aa3ad;
  --warn-bg:#fff4e0; --warn-line:#e6a23c; --warn-text:#5b3a00;
  --rain:#3b82c4;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0e1116; --surface:#161b22; --text:#e6eaf0; --muted:#9aa4b2; --line:#252c36;
    --accent:#7aa5ff; --accent-soft:#1a2740;
    --warn-bg:#2e2210; --warn-line:#b07a1c; --warn-text:#f3d39b;
    --rain:#6aaee8;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.55 Geist,system-ui,-apple-system,"Segoe UI",sans-serif;font-variant-numeric:tabular-nums}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2{margin:0;letter-spacing:-.01em;line-height:1.2}
h2{font-size:1.25rem;font-weight:600}
p{margin:0}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.src{font-size:.82rem;color:var(--muted);margin-top:12px}
.lead{color:var(--muted);margin-top:6px;max-width:65ch}
.empty{color:var(--muted);padding:12px 0}
.ph{line-height:1}

/* ---------- nagłówek */
.top{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.top-in{display:flex;align-items:center;gap:24px;height:64px}
.brand{font-size:1.15rem;font-weight:500;color:var(--text);white-space:nowrap}
.brand b{font-weight:700;color:var(--accent)}
.brand:hover{text-decoration:none}
.nav{display:flex;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{color:var(--text);font-weight:500;font-size:.95rem;padding:8px 12px;border-radius:var(--r-s);white-space:nowrap}
.nav a:hover{background:var(--accent-soft);text-decoration:none}

/* ---------- ostrzeżenie */
.alert{display:flex;gap:12px;align-items:flex-start;margin-top:20px;padding:14px 16px;border-radius:var(--r);
  background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-text)}
.alert .ph{font-size:1.5rem}
.alert span{display:block;font-size:.92rem}

/* ---------- teraz */
.now{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px;margin-top:24px}
.now-main,.day-box,.panel,.block{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.now-main{padding:28px 28px 22px}
.now h1{font-size:1.6rem;font-weight:700}
.date{color:var(--muted);margin-top:2px}
.now-temp{display:flex;align-items:center;gap:18px;margin-top:18px}
.now-temp .ph{font-size:4.5rem;color:var(--accent)}
.big{font-size:5.5rem;font-weight:600;letter-spacing:-.04em;line-height:1}
.now-label{font-size:1.25rem;font-weight:500;margin-top:8px}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.facts div{min-width:0}
.facts dt{font-size:.82rem;color:var(--muted)}
.facts dd{margin:2px 0 0;font-size:1.1rem;font-weight:600}
.facts small{font-weight:500;color:var(--muted)}

.now-side{display:grid;gap:12px;align-content:start}
.day-box{padding:18px 20px}
.day-box h2{font-size:1rem;margin-bottom:6px}
.day-box p{font-size:1.05rem}
.hint{margin-top:8px!important;color:var(--rain);font-weight:500;display:flex;gap:6px;align-items:center}

.aq-chip{display:flex;align-items:center;gap:10px;padding:14px 20px;border-radius:999px;background:var(--surface);
  border:1px solid var(--line);color:var(--text);font-size:1.05rem}
.aq-chip:hover{text-decoration:none;border-color:var(--accent)}
.aq-chip .ph{margin-left:auto;color:var(--muted)}
.aq-dot{width:14px;height:14px;border-radius:50%;flex:none;background:var(--c,var(--aqx))}
.aq0{--c:var(--aq0)} .aq1{--c:var(--aq1)} .aq2{--c:var(--aq2)} .aq3{--c:var(--aq3)} .aq4{--c:var(--aq4)} .aq5{--c:var(--aq5)} .aqx{--c:var(--aqx)}

/* ---------- bloki */
.block{padding:24px 28px;margin-top:20px}
.block > h2{margin-bottom:16px}
.block > .lead{margin:-10px 0 16px}

/* godziny */
.hours{list-style:none;margin:0;padding:0 0 6px;display:grid;grid-auto-flow:column;grid-auto-columns:64px;gap:4px;
  overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin}
.hours li{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 0;border-radius:var(--r-s);scroll-snap-align:start}
.hours li.midnight{border-left:1px dashed var(--line);border-radius:0}
.h-time{font-size:.85rem;color:var(--muted)}
.hours .ph{font-size:1.75rem}
.h-temp{font-size:1.15rem;font-weight:600}
.h-rain{height:44px;width:14px;display:flex;align-items:flex-end}
.h-rain .bar{display:block;width:100%;background:var(--rain);border-radius:3px 3px 0 0}
.h-mm{font-size:.75rem;color:var(--rain);min-height:1em}
.legend{font-size:.82rem;color:var(--muted);margin-top:8px}

/* dni */
.days{list-style:none;margin:0;padding:0}
.days li{display:grid;grid-template-columns:96px 32px minmax(0,1.3fr) 44px minmax(80px,1fr) 44px 84px;align-items:center;gap:12px;padding:12px 0}
.days li + li{border-top:1px solid var(--line)}
.d-name small{color:var(--muted);margin-left:4px}
.days .ph{font-size:1.6rem}
.d-label{color:var(--muted)}
.d-min{text-align:right;color:var(--muted)}
.d-max{font-weight:600}
.d-range{position:relative;height:8px}
.d-range span{position:absolute;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,var(--rain),var(--accent))}
.d-rain{color:var(--rain);font-size:.9rem;text-align:right;white-space:nowrap}

/* powietrze */
.air{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:28px}
.air-verdict{display:flex;align-items:center;gap:10px;font-size:1.9rem;font-weight:600;margin-top:12px}
.air-verdict .aq-dot{width:20px;height:20px}
.air-advice{font-size:1.05rem;margin-top:8px;max-width:40ch}
.stations{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-content:start}
.stations li{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--r-s);background:var(--bg)}
.s-txt{display:flex;flex-direction:column;min-width:0}
.s-name{font-weight:500;line-height:1.3}
.s-cat{font-size:.85rem;color:var(--muted)}

/* miasto */
.city{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.city li{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:var(--r-s);background:var(--bg)}
.c-name{font-size:.9rem;color:var(--muted)}
.c-temp{font-size:1.8rem;font-weight:600}
.c-diff{font-size:.85rem;color:var(--muted)}

/* trio */
.trio{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:20px}
.panel{padding:22px 24px}
.panel h2{font-size:1.05rem;display:flex;gap:8px;align-items:center;margin-bottom:14px}
.panel h2 .ph{font-size:1.3rem;color:var(--accent)}
.kv{display:flex;justify-content:space-between;gap:12px;padding:6px 0}
.kv span{color:var(--muted)}
.w-val{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.w-val b{font-size:1.9rem;font-weight:600}
.lvl-n{color:var(--aq0);font-weight:600} .lvl-o{color:var(--aq3);font-weight:600} .lvl-a{color:var(--aq4);font-weight:600}
.gauge{position:relative;height:10px;margin:18px 0 12px;border-radius:999px;background:var(--bg)}
.g-level{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--rain)}
.g-mark{position:absolute;top:-5px;bottom:-5px;width:3px;border-radius:2px;background:var(--aq3)}
.g-mark.g-al,.g-key.g-al{background:var(--aq4)}
.g-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.85rem;color:var(--muted)}
.g-legend span{display:inline-flex;align-items:center;gap:6px}
.g-key{display:inline-block;width:3px;height:12px;border-radius:2px;background:var(--aq3)}
.kv b{white-space:nowrap;text-align:right}

/* trafność */
.verify{background:var(--accent-soft);border-color:transparent}
.link{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-weight:600}

/* stopka */
.foot{margin-top:40px;padding:32px 0 48px;border-top:1px solid var(--line);background:var(--surface)}
.foot-in{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px}
.foot h2{font-size:1rem;margin-bottom:8px}
.foot p{font-size:.88rem;color:var(--muted);max-width:80ch;margin-bottom:8px}

/* ---------- mobile */
@media (max-width: 860px){
  .now,.air,.trio{grid-template-columns:1fr}
  .city{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-in{grid-template-columns:1fr}
}
@media (max-width: 600px){
  .wrap{padding:0 16px}
  .top-in{gap:12px}
  .brand{font-size:1rem}
  .nav a{padding:8px 8px;font-size:.9rem}
  .now-main{padding:22px 20px 18px}
  .big{font-size:4.5rem}
  .now-temp .ph{font-size:3.5rem}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .block{padding:20px 18px}
  .days li{grid-template-columns:72px 28px 36px minmax(40px,1fr) 36px;gap:8px}
  .d-label,.d-rain{display:none}
  .stations{grid-template-columns:1fr}
}

/* ---------- wykresy poziome (24 h i dni) */
:root{--warm:#d9582b;--cool:#2f7fd0}
@media (prefers-color-scheme: dark){:root{--warm:#ff8a5c;--cool:#6aaee8}}
.chart-scroll{overflow-x:auto;overscroll-behavior-x:contain;margin:0 -4px;padding:0 4px 8px;scrollbar-width:thin}
.chart-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-s)}
.chart{position:relative}
.c-row{display:grid;grid-template-columns:repeat(var(--cols),var(--cw));text-align:center}
.c-times span{font-size:.85rem;color:var(--muted);padding-bottom:6px}
.c-times .is-day{color:var(--text);font-weight:700}
.c-icons{padding:2px 0 0}
.c-icons .ph{font-size:1.6rem;justify-self:center}
.c-svg{display:block;overflow:visible}
.c-mid{stroke:var(--line);stroke-width:1.5;stroke-dasharray:4 4}
.c-sep{stroke:var(--line);stroke-width:1}
.c-area{fill:var(--warm);opacity:.08}
.c-line{fill:none;stroke:var(--warm);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.c-pt{fill:var(--surface);stroke:var(--warm);stroke-width:2}
.c-val{font:600 14px Geist,system-ui,sans-serif;fill:var(--text);text-anchor:middle}
.c-base{stroke:var(--line);stroke-width:1}
.c-rain{fill:var(--rain)}
.c-mm{font:500 11px Geist,system-ui,sans-serif;fill:var(--rain);text-anchor:middle}
.c-wind span{font-size:.8rem;color:var(--muted);padding-top:6px}
.c-line.c-min{stroke:var(--cool)} .c-pt.c-min{stroke:var(--cool)}
.c-vmax{font-size:16px;font-weight:700}
.c-vmin{font-size:14px;font-weight:500;fill:var(--muted)}
.c-dnames span{display:flex;flex-direction:column;align-items:center;padding-bottom:8px}
.c-dnames b{font-size:1rem}
.c-dnames small{color:var(--muted);font-size:.8rem}
.c-icons-lg span{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 6px}
.c-icons-lg .ph{font-size:2rem}
.c-icons-lg small{font-size:.78rem;color:var(--muted);line-height:1.25;min-height:2.5em}
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.key{display:inline-block;width:18px;height:3px;border-radius:2px;vertical-align:middle}
.k-line,.k-max{background:var(--warm)} .k-min{background:var(--cool)}
.k-rain{width:10px;height:12px;background:var(--rain)}
.k-wind{width:auto;height:auto;font-size:.78rem;color:var(--text);font-weight:600}

/* ---------- kierunki wiatru */
.c-wind span{display:flex;flex-direction:column;align-items:center;gap:2px}
.w-arrow{display:inline-block;font-size:1.05rem;color:var(--text);transition:none}
.c-dwind{padding-top:10px;border-top:1px solid var(--line);margin-top:4px}
.c-dwind span{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 4px 0}
.c-dwind .w-lg{font-size:1.5rem;color:var(--accent)}
.c-dwind b{font-size:1rem}
.c-dwind b small{font-weight:500;color:var(--muted);font-size:.75rem}
.c-dwind > span > small{font-size:.75rem;color:var(--muted);line-height:1.3}
.k-wind{display:inline-flex;align-items:center;gap:3px;font-size:.78rem;font-weight:600;color:var(--text)}

/* ---------- warianty ikon (porównanie) */
.iset{font-size:.85rem;font-weight:500;color:var(--muted);margin-left:8px}
.c-icons .ic{display:flex;justify-content:center;align-items:center;height:34px}
.c-icons .ic .ph,.c-icons .ic .ph-duotone{font-size:1.6rem}
.c-icons-lg span{min-height:96px}
.c-icons-lg img{display:block}
.c-icons-lg .ph-duotone{font-size:2.2rem}
.tone-sun{color:#f0a500} .tone-night{color:#6d7fd8} .tone-cloud{color:#7d8a9c} .tone-rain{color:#2f7fd0}
.tone-snow{color:#4fb0e3} .tone-storm{color:#7b5cf0} .tone-fog{color:#9aa3ad}

/* ---------- ikony MET w sekcji teraz */
.now-temp img{width:96px;height:96px;flex:none}
@media (max-width:600px){.now-temp img{width:72px;height:72px}}

/* ---------- pas nocy na wykresach godzinowych */
:root{--night:rgba(40,60,100,.09);--night-text:#4a5568}
@media (prefers-color-scheme: dark){:root{--night:rgba(140,160,210,.10);--night-text:#aab4c3}}
.chart{padding-top:22px}
.night{position:absolute;top:0;bottom:0;background:var(--night);border-radius:6px;z-index:0}
.night span{position:absolute;top:3px;left:0;right:0;text-align:center;font-size:.72rem;color:var(--night-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 6px}
.night b{text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.chart .c-row,.chart .c-svg{position:relative;z-index:1}
.k-night{width:16px;height:12px;background:var(--night);border:1px solid var(--line)}

/* ---------- wykres skompresowany (72 h) */
.chart.compact .c-row span{display:flex;justify-content:center;white-space:nowrap;overflow:visible}
.chart.compact .c-times span{font-size:.75rem}
.chart.compact .c-icons .ic{height:30px}
.chart.compact .c-val{font-size:12px}
.chart.compact .c-wind span{font-size:.72rem;flex-direction:column;align-items:center}
.chart.compact .c-mm{font-size:10px}

/* ---------- część 6-godzinna prognozy */
.c-line.c-dash{stroke-dasharray:6 5;opacity:.85}
.k-dash{width:18px;height:0;border-top:2.5px dashed var(--warm);background:none}

/* ---------- podpisy dnia i nocy: wyrównane do momentu wschodu / zachodu */
.daylight{position:absolute;top:0;bottom:0;z-index:0}
.night span,.daylight span{position:absolute;top:3px;left:0;right:0;text-align:left;font-size:.72rem;color:var(--night-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 6px}
.daylight b{text-transform:uppercase;letter-spacing:.06em;font-weight:600;color:#b7791f}
@media (prefers-color-scheme: dark){.daylight b{color:#f0c060}}

/* ---------- wiersz dat nad wykresem */
.chart.has-dates{padding-top:48px}
.chart.has-dates .night,.chart.has-dates .daylight{top:24px}
.c-date{position:absolute;top:0;height:22px;line-height:22px;padding:0 8px;font-size:.85rem;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;border-left:2px solid var(--line);z-index:1}
.c-date:first-of-type{border-left-color:transparent}
.daylight span{color:#b7791f}
@media (prefers-color-scheme: dark){.daylight span{color:#f0c060}}

/* ---------- temperatura odczuwalna (fiolet: inny niż temperatura i opad) */
:root{--feels:#8a63c9}
@media (prefers-color-scheme: dark){:root{--feels:#b9a0ee}}
.c-feels{fill:none;stroke:var(--feels);stroke-width:1.5;stroke-linecap:round;opacity:.75}
.c-fpt{fill:var(--surface);stroke:var(--feels);stroke-width:1.2;opacity:.9}
.c-fval{font:500 11px Geist,system-ui,sans-serif;fill:var(--feels);text-anchor:middle}
.k-feels{background:var(--feels);height:2px;opacity:.85}

/* ---------- legenda wykresów: każda pozycja w całości, bez rozrywania */
.lgd{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 20px;font-size:.85rem;color:var(--muted)}
.lgd li{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.lgd .key{flex:none}
.k-arrow{font-size:.95rem;color:var(--text)}
.lgd-note{font-size:.8rem;color:var(--muted);margin-top:6px}

/* ---------- zakładki prognozy godzinowej (bez JS: radio + :checked) */
.htabs .tab-r{position:absolute;opacity:0;pointer-events:none}
.tab-labels{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px;padding:4px;background:var(--bg);border-radius:var(--r-s);width:fit-content;max-width:100%}
.tab-labels label{padding:8px 16px;border-radius:6px;font-weight:600;font-size:.95rem;color:var(--muted);cursor:pointer;white-space:nowrap}
.tab-labels label:hover{color:var(--text)}
.tab-panel{display:none}
#h24:checked ~ .panels .tp-h24, #hjt:checked ~ .panels .tp-hjt, #hpj:checked ~ .panels .tp-hpj{display:block}
#h24:checked ~ .tab-labels label[for="h24"], #hjt:checked ~ .tab-labels label[for="hjt"], #hpj:checked ~ .tab-labels label[for="hpj"]{background:var(--surface);color:var(--accent);box-shadow:0 1px 2px rgba(16,24,40,.08)}
#h24:focus-visible ~ .tab-labels label[for="h24"], #hjt:focus-visible ~ .tab-labels label[for="hjt"], #hpj:focus-visible ~ .tab-labels label[for="hpj"]{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:600px){.tab-labels label{padding:8px 10px;font-size:.88rem}}

/* ---------- jak się ubrać */
.outfit{border-left:4px solid var(--accent)}
.outfit-head{display:flex;gap:14px;align-items:center}
.outfit-ico{font-size:2.2rem;color:var(--accent);background:var(--accent-soft);border-radius:12px;padding:10px}
.outfit-kicker{font-size:.85rem;font-weight:600;color:var(--accent)}
.outfit h2{font-size:1.25rem;margin:2px 0 0}
.outfit-text{margin-top:14px;font-size:1.05rem;line-height:1.6;max-width:75ch}
.outfit-chips{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.outfit-chips li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--bg);font-weight:500;font-size:.92rem}
.outfit-chips .ph{font-size:1.15rem;color:var(--accent)}

/* ---------- ciśnienie: warstwa ukryta domyślnie, włączana z legendy */
:root{--pres:#23866f}
@media (prefers-color-scheme: dark){:root{--pres:#5cc9a7}}
.c-pres{display:none}
.show-pressure .c-pres{display:inline}
.c-pline{fill:none;stroke:var(--pres);stroke-width:2;stroke-dasharray:1 5;stroke-linecap:round}
.c-ppt{fill:var(--surface);stroke:var(--pres);stroke-width:1.2}
.c-pval{font:600 10.5px Geist,system-ui,sans-serif;fill:var(--pres);text-anchor:middle}
.k-pres{width:18px;height:0;border-top:2.5px dotted var(--pres);background:none}
.lgd-toggle{display:inline-flex;align-items:center;gap:7px;font:inherit;color:inherit;background:var(--bg);border:1px solid var(--line);
  border-radius:999px;padding:3px 10px 3px 8px;cursor:pointer;white-space:nowrap}
.lgd-toggle:hover{border-color:var(--pres);color:var(--text)}
.lgd-toggle[aria-pressed="true"]{border-color:var(--pres);color:var(--text);background:var(--surface)}
.lgd-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lgd-state{font-size:.75rem;font-weight:600;color:var(--pres)}

/* ---------- linia pionowa i dymek po najechaniu */
.chart{cursor:crosshair}
.hv-line{display:none;position:absolute;top:0;bottom:0;width:0;border-left:1.5px solid var(--text);opacity:.35;z-index:3;pointer-events:none}
.hv-tip{display:none;position:absolute;top:30px;z-index:4;pointer-events:none;min-width:190px;padding:10px 12px;border-radius:10px;
  background:var(--surface);border:1px solid var(--line);box-shadow:0 6px 20px rgba(16,24,40,.16);font-size:.85rem;line-height:1.5}
.hv-tip > b{display:block;font-size:.9rem}
.hv-tip span{display:flex;align-items:center;gap:6px;white-space:nowrap;color:var(--muted)}
.hv-tip span b{margin-left:auto;padding-left:12px;color:var(--text)}
.hv-tip .hv-sky{color:var(--text);margin-bottom:4px}
.kk{display:inline-block;width:12px;height:3px;border-radius:2px;flex:none}
.k-t{background:var(--warm)} .k-f{background:var(--feels)} .k-r{background:var(--rain);height:9px;width:6px}
.k-w{background:var(--text);height:2px} .k-p{border-top:2.5px dotted var(--pres);height:0}

/* ---------- przełączniki serii: temperatura i odczuwalna (domyślnie widoczne) */
.hide-temp .c-temp-el{display:none}
.hide-feels .c-feelsg{display:none}
.lgd-toggle[data-series="temp"]:hover,.lgd-toggle[data-series="temp"][aria-pressed="true"]{border-color:var(--warm)}
.lgd-toggle[data-series="feels"]:hover,.lgd-toggle[data-series="feels"][aria-pressed="true"]{border-color:var(--feels)}
.lgd-toggle[aria-pressed="false"]{opacity:.7}
.lgd-toggle[data-series="temp"] .lgd-state{color:var(--warm)} .lgd-toggle[data-series="feels"] .lgd-state{color:var(--feels)}

/* ============================================================
   OPRAWA GRAFICZNA (v17): niebo w sekcji "Teraz", sylwetka miasta,
   ikony nagłówków, kolory temperatury, łuk słońca, ciemna stopka.
   Zasada: grafika coś mówi (pora dnia, pogoda, temperatura, położenie słońca).
   ============================================================ */
:root{--sun:#f2b705;--violet:#7b5cf0;--green:#2e9e3f}
@media (prefers-color-scheme: dark){:root{--violet:#a38bff;--green:#5cc46c}}

/* tło strony: delikatna poświata u góry */
body{background:radial-gradient(1200px 420px at 50% -160px,var(--accent-soft),transparent 70%),var(--bg);background-repeat:no-repeat}

/* nagłówek: cienki pasek kolorów i znak */
.top::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--rain) 40%,var(--sun) 75%,var(--warm))}
.brand{display:inline-flex;align-items:center;gap:8px}
.brand-mark{width:28px;height:28px;flex:none;color:var(--accent)}

/* ---------- "Teraz": niebo zależne od pory dnia i pogody */
.now-main{position:relative;overflow:hidden;padding-bottom:64px;
  background:linear-gradient(165deg,#cfe5ff 0%,#eef6ff 55%,#fffaf0 100%);border-color:#d6e4f5}
.now-main > *:not(.skyline){position:relative;z-index:1}
.sky-day.sky-cloud{background:linear-gradient(165deg,#cfdbea 0%,#e9eff6 60%,#f8fafc 100%);border-color:#d6dfea}
.sky-day.sky-rain{background:linear-gradient(165deg,#c4d1e0 0%,#e3eaf2 60%,#f4f7fa 100%);border-color:#d3dce7}
.sky-day.sky-fog{background:linear-gradient(180deg,#e4e6ea 0%,#f3f4f6 60%,#fbfbfc 100%);border-color:#e1e4e8}
.sky-day.sky-snow{background:linear-gradient(165deg,#dceaf8 0%,#f3f8fd 60%,#ffffff 100%);border-color:#d8e5f2}
.sky-day.sky-storm{background:linear-gradient(165deg,#b4bed2 0%,#dde2ec 60%,#f1f3f7 100%);border-color:#c9d0de}
.sky-dusk{background:linear-gradient(170deg,#ffd8ae 0%,#f9c9c4 40%,#d4dcf3 100%);border-color:#f0d2c4}
.sky-dusk.sky-cloud,.sky-dusk.sky-rain,.sky-dusk.sky-fog{background:linear-gradient(170deg,#ead3c2 0%,#e5d6dc 45%,#d9dfea 100%)}
.sky-night{background:linear-gradient(165deg,#13203b 0%,#22355c 65%,#2e4672 100%);border-color:#22355c;color:#eef2fa}
.sky-night.sky-clear{background:
  radial-gradient(1.5px 1.5px at 72% 18%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 84% 34%,#fff 50%,transparent 51%),
  radial-gradient(1.5px 1.5px at 62% 40%,#dfe7ff 50%,transparent 51%),radial-gradient(1px 1px at 92% 12%,#fff 50%,transparent 51%),
  radial-gradient(1px 1px at 55% 14%,#fff 50%,transparent 51%),
  linear-gradient(165deg,#0f1a33 0%,#1c2d52 65%,#283f6b 100%)}
.sky-night.sky-cloud,.sky-night.sky-rain,.sky-night.sky-fog,.sky-night.sky-snow,.sky-night.sky-storm{background:linear-gradient(165deg,#1d2533 0%,#2b3546 65%,#364256 100%);border-color:#2b3546}
.now-main .facts{border-top-color:rgba(17,22,29,.10)}
.sky-night .date,.sky-night .src,.sky-night .facts dt,.sky-night .facts small{color:#b4c0d6}
.sky-night .facts{border-top-color:rgba(255,255,255,.14)}
.now-temp img{filter:drop-shadow(0 6px 14px rgba(20,40,80,.18))}

/* sylwetka Krakowa (SVG z index.php) */
.skyline{position:absolute;left:0;right:0;bottom:0;width:100%;height:58px;fill:#1f5bd1;opacity:.12;z-index:0}
.sky-dusk .skyline{fill:#7a3e5a;opacity:.16}
.sky-night .skyline{fill:#060c1a;opacity:.55}

/* tryb ciemny: ciemniejsze wersje nieba */
@media (prefers-color-scheme: dark){
  .now-main{background:linear-gradient(165deg,#1a3150 0%,#18243a 60%,#161b22 100%);border-color:#24344d}
  .sky-day.sky-cloud,.sky-day.sky-rain,.sky-day.sky-fog,.sky-day.sky-storm{background:linear-gradient(165deg,#24303f 0%,#1b222c 60%,#161b22 100%);border-color:#2a3442}
  .sky-dusk{background:linear-gradient(170deg,#4a3226 0%,#3a2a3a 45%,#1d2436 100%);border-color:#4a3a3a}
  .now-main .facts{border-top-color:rgba(255,255,255,.10)}
  .skyline{fill:#7aa5ff;opacity:.08}
}

/* karty dni z ikoną */
.day-box{position:relative;padding-right:76px;transition:border-color .15s}
.day-box:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.db-ico{position:absolute;right:16px;top:50%;transform:translateY(-50%)}
.db-ico img{display:block;width:44px;height:44px}

/* ---------- nagłówki sekcji z ikoną w kolorowym kafelku */
.h-ic{display:flex;align-items:center;gap:10px}
.hi{flex:none;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;font-size:1.2rem;
  color:var(--hc);background:color-mix(in srgb,var(--hc) 14%,transparent)}
.hi-blue{--hc:var(--accent)} .hi-warm{--hc:var(--warm)} .hi-green{--hc:var(--green)} .hi-violet{--hc:var(--violet)}
.panel h2 .ph{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;font-size:1.1rem;background:var(--accent-soft)}

/* ---------- powietrze: kafelki stacji w kolorze kategorii */
.stations li{background:color-mix(in srgb,var(--c,var(--aqx)) 11%,var(--surface));border:1px solid color-mix(in srgb,var(--c,var(--aqx)) 22%,transparent)}
.air-verdict{color:var(--c)}
.air-verdict .aq-dot{box-shadow:0 0 0 6px color-mix(in srgb,var(--c) 20%,transparent)}
.aq-dot{box-shadow:0 0 0 3px color-mix(in srgb,var(--c,var(--aqx)) 18%,transparent)}

/* ---------- stacje w mieście: pasek w kolorze temperatury */
.city li{position:relative;overflow:hidden;background:color-mix(in srgb,var(--tc,var(--aqx)) 7%,var(--surface));border:1px solid var(--line)}
.city li::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--tc,var(--aqx))}
.c-temp{color:color-mix(in srgb,var(--tc,var(--text)) 55%,var(--text))}

/* ---------- Wisła: fala w tle */
.wisla{position:relative;overflow:hidden}
.wisla::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46px;opacity:.13;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 46'%3E%3Cpath d='M0 18q15-10 30 0t30 0 30 0 30 0V46H0z' fill='%233b82c4'/%3E%3Cpath d='M0 30q15-8 30 0t30 0 30 0 30 0V46H0z' fill='%233b82c4'/%3E%3C/svg%3E") repeat-x bottom/120px 46px}
.wisla > *{position:relative;z-index:1}
.wisla h2 .ph{color:var(--rain);background:color-mix(in srgb,var(--rain) 14%,transparent)}

/* ---------- Słońce: łuk dnia */
.sun-arc{display:block;width:100%;max-width:260px;height:auto;margin:-4px auto 6px}
.sa-track{fill:none;stroke:var(--line);stroke-width:2;stroke-dasharray:3 5}
.sa-done{fill:none;stroke:var(--sun);stroke-width:2.5;stroke-linecap:round}
.sa-hor{stroke:var(--muted);stroke-width:1;opacity:.5}
.sa-sun{fill:var(--sun);stroke:color-mix(in srgb,var(--sun) 30%,transparent);stroke-width:8;paint-order:stroke}
.sa-moon{fill:#8fa0c8}
.panel h2 .ph-sun-horizon{color:#d99a00;background:color-mix(in srgb,var(--sun) 18%,transparent)}

/* ---------- trafność: tło z akcentem i "tarczą" */
.verify{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--accent-soft),color-mix(in srgb,var(--accent-soft) 40%,var(--surface)))}
.verify::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;
  border:18px solid color-mix(in srgb,var(--accent) 10%,transparent);box-shadow:0 0 0 26px color-mix(in srgb,var(--accent) 5%,transparent)}
.verify > *{position:relative;z-index:1}

/* ---------- porada: lekki gradient */
.outfit{background:linear-gradient(110deg,color-mix(in srgb,var(--accent-soft) 70%,var(--surface)),var(--surface) 60%)}

/* ---------- stopka: ciemna, z sylwetką miasta */
:root{--foot:#101a2e}
@media (prefers-color-scheme: dark){:root{--foot:#0a0f18}}
.foot{position:relative;margin-top:96px;background:var(--foot);border-top:0;color:#dfe6f2}
.foot .brand{display:block;color:#fff} .foot .brand b{color:#8db4ff}
.foot p{color:#a9b5c9} .foot a{color:#8db4ff}
.foot h2{color:#fff}
.foot-sky{top:auto;bottom:calc(100% - 1px);height:80px;fill:var(--foot);opacity:1}
@media (prefers-color-scheme: dark){.foot-sky{fill:var(--foot);opacity:1}}

@media (max-width:600px){
  .now-main{padding-bottom:52px}
  .skyline{height:44px}
  .foot-sky{height:44px}
  .day-box{padding-right:64px}
  .db-ico img{width:38px;height:38px}
  .hi{width:30px;height:30px;font-size:1.05rem}
}
@media (prefers-reduced-motion: reduce){.day-box{transition:none}}

/* ============================================================
   ARCHIWUM (/archiwum/...) + "ten dzień w historii" na stronie głównej
   ============================================================ */
.nav a[aria-current="page"]{background:var(--accent-soft);color:var(--accent)}
.arch h1{font-size:1.7rem}
.crumbs-nav ol{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px;font-size:.88rem;color:var(--muted)}
.crumbs-nav li+li::before{content:"›";margin:0 6px 0 2px;color:var(--muted)}
.crumbs-nav a{color:var(--muted)} .crumbs-nav a:hover{color:var(--accent)}
.arch-head .ah-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.ah-nav{display:flex;gap:8px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--bg);border:1px solid var(--line);color:var(--text);font-weight:500;font-size:.92rem}
.pill:hover{border-color:var(--accent);text-decoration:none}
.jump{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:16px}
.jump label{display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:var(--muted)}
.jump select,.jump button{font:inherit;font-size:.95rem;padding:8px 12px;border-radius:var(--r-s);border:1px solid var(--line);background:var(--surface);color:var(--text)}
.jump button{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;cursor:pointer}
.arch-sum{margin-top:16px;font-size:1.05rem;line-height:1.6;max-width:85ch}

/* kafelki statystyk */
.tiles{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.tiles li{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:2px;padding:14px 16px 12px;border-radius:var(--r-s);border:1px solid var(--line);
  background:color-mix(in srgb,var(--tc,var(--aqx)) 9%,var(--surface))}
.tiles li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--tc,var(--aqx))}
.tiles span{font-size:.82rem;color:var(--muted)}
.tiles b{font-size:1.5rem;font-weight:600;letter-spacing:-.01em}
.tiles small{font-size:.82rem;color:var(--muted)}

/* kalendarz miesiąca */
.cal-row,.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal-head span{font-size:.8rem;font-weight:600;color:var(--muted);text-align:center;padding-bottom:4px}
.cal-cell{position:relative;display:flex;flex-direction:column;min-height:96px;padding:8px 10px;border-radius:var(--r-s);border:1px solid var(--line);
  background:var(--an,var(--surface))}
@media (prefers-color-scheme: dark){.cal-cell{background:color-mix(in srgb,var(--an,var(--surface)) 22%,var(--surface))}}
.cal-cell.we .cd{color:var(--warm)}
.cal-empty{border:0;background:none}
.cal-none{background:var(--bg);border-style:dashed}
.cal-none small{font-size:.72rem;color:var(--muted);margin-top:auto}
.cd{font-style:normal;font-size:.82rem;font-weight:600;color:var(--muted)}
.cd sup{color:var(--accent)}
.cx{font-size:1.25rem;font-weight:700;margin-top:4px;line-height:1.1}
.cn{font-size:.95rem;font-weight:500;color:var(--cool)}
.cfx{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin-top:auto;padding-top:4px;font-size:.78rem}
.cp{display:inline-flex;align-items:center;gap:2px;color:var(--rain);font-weight:600}
.cp.heavy{background:color-mix(in srgb,var(--rain) 16%,transparent);padding:0 5px;border-radius:5px}
.cs{color:var(--violet);font-size:.95rem} .cf{color:var(--muted);font-size:.95rem}
.prelim{border-style:dashed}
.cal-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-size:.84rem;color:var(--muted)}
.cal-legend span{display:inline-flex;align-items:center;gap:6px}
.lg-sw{display:inline-block;width:18px;height:12px;border-radius:3px;border:1px solid var(--line)}

/* wykres miesiąca / roku (SVG) */
.mchart,.ychart{display:block;overflow:visible}
.mg{stroke:var(--line);stroke-width:1}
.mg0{stroke:var(--muted);stroke-dasharray:3 3;opacity:.6}
.mt{font:500 11px Geist,system-ui,sans-serif;fill:var(--muted);text-anchor:end}
.md{font:500 11px Geist,system-ui,sans-serif;fill:var(--muted);text-anchor:middle}
.md.we{fill:var(--warm);font-weight:700}
.mbar{fill:url(#tgrad)}
.mbar.prelim{opacity:.6;stroke:var(--muted);stroke-dasharray:3 2}
.mrain{fill:var(--rain)}
.mmm{font:600 10px Geist,system-ui,sans-serif;fill:var(--rain);text-anchor:middle}
.mn{fill:none;stroke-width:2;stroke-dasharray:6 4;stroke-linecap:round}
.mn-x{stroke:var(--warm)} .mn-n{stroke:var(--cool)}
.mv{font:700 12px Geist,system-ui,sans-serif;fill:var(--text);text-anchor:middle}
.mvn{font-weight:500;fill:var(--muted)}
.mpn{stroke:var(--text);stroke-width:2;opacity:.45}
.mchart a:hover .mbar{filter:brightness(1.08)}
.k-bar{width:12px;height:16px;border-radius:3px;background:linear-gradient(var(--warm),var(--sun),var(--cool))}
.k-nx{width:18px;height:0;border-top:2px dashed var(--warm);background:none}
.k-nn{width:18px;height:0;border-top:2px dashed var(--cool);background:none}
.ybar{stroke:color-mix(in srgb,var(--text) 18%,transparent);stroke-width:.5}
.ybar.cur{stroke:var(--text);stroke-width:2}
.ychart a:hover .ybar{stroke:var(--text);stroke-width:1.5}

/* karty miesięcy */
.mcards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.mcards li{border-radius:var(--r-s);border:1px solid var(--line);background:var(--an,var(--surface))}
@media (prefers-color-scheme: dark){.mcards li{background:color-mix(in srgb,var(--an,var(--surface)) 22%,var(--surface))}}
.mcards a,.mcards li.off{display:flex;flex-direction:column;gap:2px;padding:12px 14px;color:var(--text)}
.mcards a:hover{text-decoration:none;box-shadow:inset 0 0 0 2px var(--accent);border-radius:var(--r-s)}
.mcards b{text-transform:capitalize}
.mc-t{font-size:1.3rem;font-weight:700} .mc-t small{font-size:.95rem;font-weight:500;color:var(--cool)}
.mc-a,.mc-p{font-size:.82rem;color:var(--muted)} .mc-p{color:var(--rain)}
.mcards li.off{opacity:.5}

/* paski klimatu */
.stripes{display:flex;height:130px;border-radius:var(--r-s);overflow:hidden;border:1px solid var(--line)}
.stripes a{flex:1 1 0;min-width:0;position:relative}
.stripes a span{position:absolute;left:50%;bottom:6px;transform:translateX(-50%) rotate(-90deg);transform-origin:center;font-size:.6rem;color:#11161d;opacity:0;white-space:nowrap}
.stripes a:hover{outline:2px solid var(--text);outline-offset:-2px;z-index:1}
.stripes a:hover span{opacity:.8}
.stripes a.part{opacity:.55}
.stripes-axis{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted);margin-top:6px}
.ylist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px}
.ylist a{display:block;text-align:center;padding:8px 0;border-radius:var(--r-s);border:1px solid var(--line);background:var(--an);color:#11161d;font-weight:600}
.ylist a:hover{text-decoration:none;border-color:var(--text)}

/* tabela danych */
.raw summary{cursor:pointer;font-weight:600;color:var(--accent)}
.table-scroll{overflow-x:auto;margin-top:12px}
.dtab{border-collapse:collapse;width:100%;font-size:.9rem;white-space:nowrap}
.dtab th,.dtab td{padding:6px 10px;border-bottom:1px solid var(--line);text-align:right}
.dtab th:first-child,.dtab td:first-child{text-align:left}
.dtab th{font-size:.8rem;color:var(--muted);font-weight:600}

/* strona główna: ten dzień w historii */
.hist-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.hist-grid li{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:var(--r-s);border:1px solid var(--line);
  background:color-mix(in srgb,var(--tc,var(--accent)) 8%,var(--surface))}
.hist-grid li::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--tc,var(--line))}
.hg-l{font-size:.82rem;color:var(--muted)}
.hist-grid b{font-size:1.45rem;font-weight:600}
.hist-grid small{font-size:.82rem;color:var(--muted)}

@media (max-width:860px){.hist-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){
  .arch h1{font-size:1.35rem}
  .cal-row,.cal-grid{gap:3px}
  .cal-cell{min-height:70px;padding:5px 4px;text-align:center;align-items:center}
  .cx{font-size:.98rem} .cn{font-size:.8rem}
  .cfx{justify-content:center;font-size:.68rem}
  .cfx .cs,.cfx .cf{display:none}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles b{font-size:1.25rem}
  .stripes{height:90px}
}

/* ============================================================
   JAK SIĘ UBRAĆ: oś dnia + legenda (inc/ubior.php: ub_timeline, ub_legend)
   ============================================================ */
.ubi{flex:none;display:inline-block;vertical-align:middle}
.ubi-ubr{color:var(--text)} .ubi-zim{color:#3b6fd8} .ubi-deszcz{color:var(--rain)} .ubi-slonce{color:#d99a00} .ubi-wiatr{color:#6b7a90}
@media (prefers-color-scheme: dark){.ubi-zim{color:#7fa6ff}.ubi-slonce{color:#f0c060}.ubi-wiatr{color:#a8b4c6}}
.ub-wrap{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:24px;align-items:stretch}
.ub-main{min-width:0;display:flex;flex-direction:column}
.ub-main .outfit-text{max-width:70ch}
.ub-axis{margin-top:18px;padding:14px 12px 6px;border-radius:var(--r-s);background:var(--surface);border:1px solid var(--line)}
.ubt{display:block;width:100%;height:auto;min-width:440px}
.ubt-pl{font:700 16px Geist,system-ui,sans-serif;fill:var(--text);text-anchor:middle}
.ubt-lv{font:600 14px Geist,system-ui,sans-serif;fill:var(--text);text-anchor:middle}
.ubt-ax{font:500 12.5px Geist,system-ui,sans-serif;fill:var(--muted);text-anchor:middle}
.ubt-fv{font:700 14px Geist,system-ui,sans-serif;fill:#11161d;text-anchor:middle}
.ubt-sep{stroke:var(--line);stroke-width:1.5;stroke-dasharray:4 4}
.ubt-rain{fill:var(--rain)}
.ubt-now{stroke:var(--text);stroke-width:2}
.ubt-nowt{fill:var(--text);font-weight:600}
.ubt-pastov{fill:var(--surface);opacity:.6}
.ubt-past{opacity:.35}

.ubl{align-self:start;padding:12px 12px 10px;border-radius:var(--r-s);background:var(--bg);border:1px solid var(--line);font-size:.82rem}
.ubl h3{margin:0;font-size:.95rem}
.ubl-sub{color:var(--muted);margin:2px 0 8px}
.ubl ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ubl li{display:flex;align-items:center;gap:8px;padding:3px 6px;border-radius:6px;opacity:.45}
.ubl li.on{opacity:1;background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.ubl-sw{flex:none;width:12px;height:20px;border-radius:3px}
.ubl-t,.ubl-acc span{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.ubl-t b,.ubl-acc b{font-size:.82rem}
.ubl small{color:var(--muted);font-size:.74rem}
.ubl-i{margin-left:auto;display:flex;gap:2px}
.ubl-acc{margin-top:8px!important;padding-top:8px!important;border-top:1px solid var(--line)}
.ubl-rain{flex:none;width:18px;height:8px;border-radius:2px;background:var(--rain)}
.ubl-note{margin-top:8px;color:var(--muted);font-size:.74rem;line-height:1.4}
@media (max-width:960px){
  .ub-wrap{grid-template-columns:1fr}
  .ubl ul.ubl-lv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ubl ul.ubl-acc{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:480px){.ubl ul.ubl-lv,.ubl ul.ubl-acc{grid-template-columns:1fr}}

/* dymki [data-tt] (skrypt w layout_footer) */
.tt{position:fixed;z-index:50;max-width:280px;padding:6px 10px;border-radius:8px;background:#11161d;color:#fff;font-size:.82rem;line-height:1.35;
  pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .08s,transform .08s;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.tt.on{opacity:1;transform:none}
@media (prefers-color-scheme: dark){.tt{background:#e6eaf0;color:#11161d}}
@media (prefers-reduced-motion: reduce){.tt{transition:none}}
[data-tt]{cursor:help}
.ubt-hit{fill:transparent;cursor:crosshair}
.ubt-hit:hover{fill:color-mix(in srgb,var(--text) 8%,transparent)}

/* legenda "jak się ubrać": na telefonie zwinięta (nagłówek + 2 poziomy), przycisk rozwija */
.ubl-more{display:none}
@media (max-width:600px){
  .ubl:not(.open) .ubl-body{max-height:104px;overflow:hidden;
    -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
  .ubl-more{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:6px;padding:8px 12px;border-radius:var(--r-s);
    border:1px solid var(--line);background:var(--surface);color:var(--accent);font:inherit;font-size:.86rem;font-weight:600;cursor:pointer}
  .ubl-more::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
  .ubl.open .ubl-more::after{transform:translateY(2px) rotate(-135deg)}
}

/* zakładki prognozy godzinowej: na telefonie zawsze 3 w jednym rzędzie (tekst łamie się w 2 linie) */
@media (max-width:600px){
  .tab-labels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:4px}
  .tab-labels label{display:flex;align-items:center;justify-content:center;text-align:center;white-space:normal;
    flex-direction:column;padding:6px 4px;font-size:.84rem;line-height:1.2;min-height:46px}
  .tab-labels .tl-sep{display:none}
  .tab-labels .tl-2{font-size:.76rem;font-weight:500;opacity:.85}
}

/* ---------- menu na telefonie (hamburger) */
.nav-btn{display:none}
@media (max-width:820px){
  .top-in{position:relative}
  .nav-btn{display:inline-flex;flex:none;flex-direction:column;justify-content:center;gap:5px;margin-left:auto;width:44px;height:44px;padding:0 11px;
    border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface);cursor:pointer}
  .nav-btn span{display:block;height:2px;border-radius:2px;background:var(--text);transition:transform .15s,opacity .15s}
  .nav-open .nav-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-open .nav-btn span:nth-child(2){opacity:0}
  .nav-open .nav-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav{display:none;position:absolute;top:100%;left:-20px;right:-20px;margin:0;flex-direction:column;gap:2px;padding:8px 16px 14px;
    background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgba(16,24,40,.12);overflow:visible}
  .nav-open .nav{display:flex}
  .nav a{padding:12px 12px;font-size:1rem;border-radius:var(--r-s)}
}
@media (max-width:600px){.nav{left:-16px;right:-16px}}
@media (prefers-reduced-motion: reduce){.nav-btn span{transition:none}}

/* ---------- dolny pasek nawigacji (telefon, strona główna) */
.bnav{display:none}
section[id],[id].block{scroll-margin-top:76px}
@media (max-width:820px){
  .bnav{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
    padding:4px 4px calc(4px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--surface) 92%,transparent);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(16,24,40,.08);
    transition:transform .2s ease}
  .bnav.hid{transform:translateY(110%)}
  .bnav a{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-radius:10px;color:var(--muted);font-size:.7rem;font-weight:600;line-height:1.1}
  .bnav a:hover{text-decoration:none}
  .bnav .ph{font-size:1.35rem}
  .bnav a.on{color:var(--accent);background:var(--accent-soft)}
  .bnav-dot{position:absolute;top:5px;left:calc(50% + 7px);width:9px;height:9px;border-radius:50%;background:var(--c,var(--aqx));box-shadow:0 0 0 2px var(--surface)}
  body:has(.bnav){padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .nav-open .bnav{transform:translateY(110%)}
}
@media (prefers-reduced-motion: reduce){.bnav{transition:none}}

/* pigułki porady z ikonami SVG (inc/porada-ai.php: porada_chips) */
.outfit-chips li .ubi{flex:none}
.outfit-chips li.off{color:var(--muted)}
.outfit-chips li.off .ubi{opacity:.55}

/* ---------- podstrony, przełącznik języka, blok "zobacz też" */
.nav-lang{display:inline-flex;gap:2px;margin-left:8px;padding-left:10px;border-left:1px solid var(--line)}
.nav .nav-lang a{padding:8px 6px;font-size:.8rem;font-weight:700;color:var(--muted)}
@media (max-width:820px){.nav-lang{margin:6px 0 0;padding:8px 0 0 4px;border-left:0;border-top:1px solid var(--line)}}
.sub h1{font-size:1.7rem}
.sub .lead{max-width:75ch}
.related{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.related a{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:var(--r-s);border:1px solid var(--line);background:var(--bg);color:var(--text)}
.related a:hover{text-decoration:none;border-color:var(--accent)}
.related .ph{font-size:1.5rem;color:var(--accent)}
.related span{display:flex;flex-direction:column;line-height:1.25}
.related small{color:var(--muted);font-size:.82rem}
.answer{font-size:1.15rem;line-height:1.55;margin-top:12px;max-width:75ch}
.answer b{font-weight:700}
.sub-tiles{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.sub-tiles li{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:var(--r-s);border:1px solid var(--line);
  background:color-mix(in srgb,var(--tc,var(--accent)) 8%,var(--surface))}
.sub-tiles li::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--tc,var(--line))}
.sub-tiles span{font-size:.82rem;color:var(--muted)} .sub-tiles b{font-size:1.6rem;font-weight:700} .sub-tiles small{font-size:.82rem;color:var(--muted)}
.aqh{display:inline-flex;gap:1px}
.aqh i{display:inline-block;width:6px;height:16px;border-radius:2px;background:var(--c,var(--aqx))}
.dp-title{font-size:1.5rem;margin:0}
h1.dp-title{font-size:1.7rem}
.dp-sum{display:flex;gap:14px;align-items:center;margin-top:10px}
.dp-sum img{flex:none}
.dp-t{font-size:2.2rem;font-weight:700;line-height:1} .dp-t small{font-size:1.2rem;color:var(--cool);font-weight:600}
.ldays{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ldays li{display:grid;grid-template-columns:90px 44px 110px 90px 1fr;align-items:center;gap:10px;padding:6px 12px;border-radius:var(--r-s);border:1px solid var(--line);background:var(--an,var(--surface))}
@media (prefers-color-scheme: dark){.ldays li{background:color-mix(in srgb,var(--an,var(--surface)) 22%,var(--surface))}}
.ldays li.far{border-style:dashed}
.ld-d{display:flex;flex-direction:column;line-height:1.2} .ld-d small{color:var(--muted)}
.ld-t{font-size:1.2rem;font-weight:700} .ld-t small{font-size:.95rem;color:var(--cool);font-weight:600}
.ld-p{color:var(--rain);font-weight:600;font-size:.9rem} .ld-a{color:var(--muted);font-size:.85rem;text-align:right}
@media (max-width:600px){.ldays li{grid-template-columns:70px 36px 1fr auto}.ld-a{display:none}}
.prog{height:12px;border-radius:999px;background:var(--bg);border:1px solid var(--line);overflow:hidden;margin-top:14px;max-width:520px}
.prog span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--rain))}
.method{margin:0;padding-left:20px;display:grid;gap:6px;max-width:80ch}
.more-l{margin:-6px 0 14px;font-size:.92rem;font-weight:600}
.more-l a{display:inline-flex;align-items:center;gap:4px}
.ub-main .more-l{margin:10px 0 0}

/* /teraz/: dymek nad przebiegiem dnia */
.tchart{position:relative;min-width:520px}
.tchart svg{cursor:crosshair}
.tc-line{stroke:var(--text);stroke-width:1.5;opacity:.4}
.tc-tip{top:8px;min-width:200px}

/* godzina bieżąca i wiek pomiaru w sekcji "Teraz" */
.date .clock{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.sky-night .date .clock{color:#eef2fa}
.obs-age{white-space:nowrap}