/* Pogoda Predykcja – mobile first. Tokeny z raportu statycznego (ciemny briefing). */
:root{--bg:#0a0f18;--pan:#0e1420;--pan2:#121a28;--ln:#1f2a3a;--ln2:#2a3850;--tx:#dfe6ee;--mu:#8b98a9;--mu2:#b9c4d1;--ac:#4fc3f7;--wa:#ff8a65;--ok:#7bd88f;--hi:#ff6b6b;--mid:#ffc857;
--r:8px;--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--barH:56px;--tabsH:52px;--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--barH) + var(--tabsH) + 8px)}
body{margin:0;background:var(--bg);color:var(--tx);font:15px/1.55 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-variant-numeric:tabular-nums;overflow-x:hidden}
a{color:var(--ac);text-decoration:none}a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:4px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:-9999px;top:0;background:var(--ac);color:#000;padding:10px 14px;z-index:100}.skip:focus{left:8px;top:8px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1180px;margin:0 auto;padding:var(--s4) var(--s3) var(--s6)}

/* pasek górny + zakładki (sticky) */
.bar{position:sticky;top:0;z-index:1000;background:rgba(10,15,24,.94);backdrop-filter:saturate(1.2) blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--ln)}
.bar-in{max-width:1180px;margin:0 auto;height:var(--barH);display:flex;align-items:center;gap:var(--s2);padding:0 var(--s3)}
.brand{display:flex;align-items:center;gap:8px;color:var(--tx);font-weight:700;white-space:nowrap;min-height:44px}
.brand:hover{text-decoration:none}.brand-dot{width:10px;height:10px;border-radius:50%;background:var(--ac);box-shadow:0 0 0 3px rgba(79,195,247,.18)}
.brand-t{display:none;font-size:15px;letter-spacing:-.01em}.brand-t b{color:var(--ac);font-weight:700}
.search{position:relative;flex:1;min-width:0}
.search input{width:100%;height:44px;border:1px solid var(--ln2);border-radius:var(--r);background:var(--pan);color:var(--tx);font:inherit;font-size:16px;padding:0 12px 0 38px;outline:none;-webkit-appearance:none;appearance:none}
.search input:focus{border-color:var(--ac);box-shadow:0 0 0 3px rgba(79,195,247,.18)}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}
.search-i{position:absolute;left:11px;top:13px;width:18px;height:18px;color:var(--mu);pointer-events:none}
.q-list{position:absolute;left:0;right:0;top:48px;margin:0;padding:4px;list-style:none;background:var(--pan2);border:1px solid var(--ln2);border-radius:var(--r);box-shadow:0 12px 32px rgba(0,0,0,.5);max-height:min(60vh,420px);overflow:auto;z-index:1100}
.q-list li{padding:10px 12px;border-radius:6px;cursor:pointer;min-height:44px;display:flex;flex-direction:column;justify-content:center}
.q-list li[aria-selected=true],.q-list li:hover{background:#18324f}
.q-list .q-n{font-weight:600}.q-list .q-a{color:var(--mu);font-size:12.5px}
.q-list .q-empty{color:var(--mu);cursor:default}
.ibtn{flex:none;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--ln2);border-radius:var(--r);background:var(--pan);color:var(--ac);cursor:pointer;padding:0}
.ibtn svg{width:22px;height:22px}.ibtn:hover{border-color:var(--ac)}.ibtn[aria-busy=true] svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.tabs{max-width:1180px;margin:0 auto;height:var(--tabsH);display:flex;gap:6px;padding:0 var(--s3) 8px}
.tabs button{flex:1;min-height:44px;border:1px solid var(--ln);background:var(--pan);color:var(--mu2);border-radius:var(--r);font:600 14px/1.1 inherit;font-family:inherit;cursor:pointer;padding:0 6px}
.tabs button[aria-selected=true]{background:#13304f;color:#fff;border-color:var(--ac)}
.tabs button:hover{border-color:var(--ln2)}

/* nagłówek */
.hero{min-height:420px}
.eyebrow{font:600 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ac);margin-top:4px}
h1{font-size:clamp(26px,7vw,40px);line-height:1.12;margin:8px 0 4px;font-weight:800;letter-spacing:-.02em;overflow-wrap:anywhere}
h1 small{display:block;font-size:14px;font-weight:500;color:var(--mu);letter-spacing:0;margin-top:4px}
.sub{color:var(--mu);font-size:13px;margin:0;min-height:20px}
.verdict{margin-top:var(--s4);background:linear-gradient(180deg,#111b2b,#0e1522);border:1px solid var(--ln);border-left:3px solid var(--ac);padding:14px 16px;border-radius:var(--r);font-size:16px;line-height:1.6;min-height:120px}
.verdict b{color:#fff}
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2);margin-top:var(--s3);min-height:204px}
.kpi{background:var(--pan);border:1px solid var(--ln);border-radius:var(--r);padding:10px 12px;min-width:0}
.kpi .l{color:var(--mu);font-size:11px;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .v{font-size:19px;font-weight:700;margin-top:2px;white-space:nowrap}
.kpi .n{color:var(--mu);font-size:12px;line-height:1.35}
.src{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s3);min-height:26px}
.chip{display:inline-flex;align-items:center;gap:5px;font:600 11px/1 var(--mono);padding:5px 8px;border-radius:20px;background:#121c2b;border:1px solid var(--ln);color:var(--mu2)}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)}
.chip.off{color:var(--mu);text-decoration:line-through}.chip.off::before{background:var(--hi)}
.chip.stale::before{background:var(--mid)}

/* sekcje */
.sec{margin-top:var(--s6)}
h2{font-size:20px;margin:0 0 6px;font-weight:700;letter-spacing:-.01em}
h2 .num{font:600 12px var(--mono);color:var(--ac);margin-right:10px;vertical-align:3px}
.lead{color:var(--mu2);margin:0 0 var(--s3);max-width:860px;font-size:14px}
.hint-mouse{display:none}
@media (hover:hover) and (pointer:fine){.hint-mouse{display:block}.hint-touch{display:none}}
.touch .hint-mouse{display:none}.touch .hint-touch{display:block}

/* pasek dni */
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:124px;gap:var(--s2);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-bottom:8px;min-height:226px;scrollbar-width:thin;scrollbar-color:var(--ln2) transparent}
.day{scroll-snap-align:start;background:var(--pan);border:1px solid var(--ln);border-radius:var(--r);padding:10px 10px 9px;font-size:12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.day.wk{background:var(--pan2)}.day.today{border-color:#2c5a80}
.dh{display:flex;justify-content:space-between;color:var(--mu);font-weight:600}.dh .dn{color:var(--tx)}
.dt{display:flex;align-items:center;justify-content:space-between;margin-top:2px}
.dt svg{width:34px;height:34px;flex:none}
.tx{font-size:26px;font-weight:700;line-height:1.05}.tn{color:#7fb6ff;font-weight:600;font-size:15px}
.rng{color:var(--mu);font-size:10.5px;font-family:var(--mono)}
.pt{font-size:11px;font-weight:600;padding:2px 6px;border-radius:4px;display:inline-block;background:#1a2433;color:var(--mu);margin:3px 0 2px;align-self:flex-start;white-space:nowrap}
.pt.rain{background:#13304f;color:#8cc8ff}.pt.snow{background:#e3f2fd;color:#0a1a2e}.pt.sleet{background:#2b3a55;color:#d7e9ff}.pt.frz{background:#3a1a2a;color:#ffb3c7}
.kv{display:flex;justify-content:space-between;color:var(--mu);line-height:1.5}.kv b{color:var(--tx);font-weight:600;font-family:var(--mono);font-size:11.5px}
.wind{display:flex;gap:6px;align-items:center;margin:4px 0 6px;color:var(--ac);line-height:1.2}.wind svg{width:16px;height:16px;flex:none;transition:transform .3s}.wind span{color:var(--tx);font-weight:600}.wind em{font-style:normal;color:var(--mu);font-weight:400;font-size:11px}
.cf{height:4px;background:#1c2636;border-radius:2px;overflow:hidden;margin-top:auto}.cfb{height:100%;width:0}.cfb.hi{background:var(--ok)}.cfb.mid{background:var(--mid)}.cfb.lo{background:var(--hi)}
.cfl{color:var(--mu);font-size:10.5px;margin-top:3px}
.ice-w{color:#ffb3c7}.ice-m{color:var(--mid)}

/* tygodnie (miesiąc) */
.weeks{display:grid;grid-template-columns:1fr;gap:var(--s2)}
.week{background:var(--pan);border:1px solid var(--ln);border-radius:var(--r);padding:12px 14px;display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center}
.week h3{margin:0;font-size:15px}.week .wa{font:700 22px/1 var(--mono);text-align:right}.week .wa.pos{color:var(--wa)}.week .wa.neg{color:var(--ac)}
.week .wmeta{grid-column:1/-1;color:var(--mu);font-size:12.5px}
.terc{grid-column:1/-1;display:flex;height:22px;border-radius:4px;overflow:hidden;font:600 11px/22px var(--mono);color:#0a0f18}
.terc i{font-style:normal;text-align:center;white-space:nowrap;overflow:hidden;min-width:0}
.terc .b{background:#4fa3e0}.terc .n{background:#9aa7b6}.terc .a{background:#f39a55}
.terc-l{grid-column:1/-1;display:flex;justify-content:space-between;color:var(--mu);font-size:11px}

/* wykresy */
.charts{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3)}
.chart{margin:0;background:var(--pan);border:1px solid var(--ln);border-radius:var(--r);padding:10px 10px 8px;min-width:0;position:relative}
.chart h3{margin:0 2px 6px;font-size:14.5px;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:32px}
.chart h3 span{min-width:0}
.cbody{position:relative;height:240px;touch-action:pan-y;border-radius:4px}
.cbody:focus-visible{outline-offset:4px}
.cbody .u-over{touch-action:pan-y}
.reset{height:32px;min-width:64px;padding:0 10px;border:1px solid var(--ac);border-radius:6px;background:#0e2236;color:var(--ac);font:600 12px inherit;font-family:inherit;cursor:pointer;visibility:hidden;flex:none}
.reset.on{visibility:visible}
/* rozszerzenie celu dotyku do 44 px bez zmiany wyglądu */
.reset{position:relative}.reset::after{content:"";position:absolute;inset:-6px -2px}
.legend{display:flex;flex-wrap:wrap;gap:4px 12px;margin:6px 2px 0;color:var(--mu);font-size:11.5px;line-height:1.4}
.legend span{display:inline-flex;align-items:center;gap:5px}.legend i{display:inline-block;width:14px;height:3px;border-radius:2px}
.legend i.band{height:10px;opacity:.5}.legend i.dash{background:transparent!important;border-top:2px dashed}.legend i.bar{height:10px;width:8px}
.cap{color:var(--mu);font-size:12px;margin:4px 2px 0}
.tip{position:absolute;left:0;top:0;z-index:5;pointer-events:none;background:rgba(14,20,32,.96);border:1px solid var(--ln2);border-radius:6px;padding:6px 8px;font-size:11.5px;line-height:1.45;min-width:120px;max-width:200px;box-shadow:0 6px 18px rgba(0,0,0,.45);display:none}
.tip.on{display:block}.tip b{display:block;color:#fff;font-size:12px;margin-bottom:2px}.tip div{display:flex;justify-content:space-between;gap:10px;white-space:nowrap}.tip i{font-style:normal;color:var(--mu)}.tip em{font-style:normal;font-family:var(--mono)}
.wheel-hint{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,15,24,.7);color:var(--tx);font-size:13px;border-radius:4px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:6}
.wheel-hint.on{opacity:1}
.u-select{background:rgba(79,195,247,.15)}
.uplot{font-family:inherit}
.u-cursor-x{border-right:1px dashed rgba(223,230,238,.5)!important}.u-cursor-y{display:none}

/* mapa */
.mapbox{background:var(--pan);border:1px solid var(--ln);border-radius:var(--r);padding:8px;position:relative}
.map{height:380px;border-radius:6px;background:#0c1220;z-index:1}
.map-origin{margin:8px 2px 0;font-size:14px;min-height:42px;color:var(--mu2)}.map-origin b{color:#fff}
.map-ctl{display:flex;align-items:center;gap:6px;margin-top:6px}
.map-ctl input[type=range]{flex:1;min-width:0;height:44px;accent-color:var(--ac);background:transparent}
.map-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;align-items:center;margin:4px 2px 0;font-size:13px}
.map-meta output{font:600 13px var(--mono);color:var(--tx)}
.layers{display:flex;flex-wrap:wrap;gap:2px 12px}.layers label{display:inline-flex;align-items:center;gap:6px;min-height:36px;color:var(--mu2);cursor:pointer}
.layers input{width:18px;height:18px;accent-color:var(--ac)}
.scale{display:flex;align-items:center;gap:8px;margin:6px 2px 2px;color:var(--mu);font:11px var(--mono)}
.scale-bar{flex:1;height:8px;border-radius:4px;background:linear-gradient(90deg,#3b2a7a,#2f5fb3 20%,#4fa3e0 35%,#a8d8f0 45%,#e8eef2 50%,#f6d38b 60%,#f39a55 70%,#d9534f 85%,#8e1f3a)}
.lockbtn{position:absolute;right:16px;top:16px;z-index:500}
.lockbtn .ibtn{background:rgba(14,20,32,.92)}
.leaflet-container{background:#0c1220;font:inherit}
.tiles-dark{filter:invert(1) hue-rotate(180deg) brightness(.8) contrast(.9) saturate(.35)}
.leaflet-control-attribution{background:rgba(10,15,24,.8)!important;color:var(--mu)!important;font-size:10px}
.leaflet-control-attribution a{color:var(--ac)!important}
.leaflet-bar a{background:var(--pan2);color:var(--tx);border-color:var(--ln2);width:36px;height:36px;line-height:36px}
.leaflet-bar a:hover{background:#18324f;color:#fff}
.hl{font:800 18px/1 system-ui,sans-serif;text-shadow:0 0 4px #000,0 0 2px #000;text-align:center}
.hl.L{color:#ff8a80}.hl.H{color:#7fb6ff}.hl small{display:block;font:600 9px var(--mono);color:#dfe6ee}
.flow-l{font:700 11px/1.2 system-ui,sans-serif;color:#fff;text-shadow:0 0 3px #000,0 0 6px #000;white-space:nowrap}
.flow-l.warm{color:#ffd0b5}.flow-l.cold{color:#bfe6ff}
.pin{width:14px;height:14px;border-radius:50%;background:#ffd23f;border:2px solid #0a0f18;box-shadow:0 0 0 2px #ffd23f}

/* stany */
.err{margin-top:var(--s4);background:#2a1418;border:1px solid #5a2a32;border-radius:var(--r);padding:14px 16px}
.err p{margin:0 0 10px}
.btn{min-height:44px;padding:0 16px;border:1px solid var(--ac);background:#0e2236;color:var(--ac);border-radius:var(--r);font:600 14px inherit;font-family:inherit;cursor:pointer}
.toast{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:2000;background:var(--pan2);border:1px solid var(--ln2);border-radius:var(--r);padding:10px 14px;font-size:14px;max-width:calc(100% - 24px);box-shadow:0 8px 24px rgba(0,0,0,.5)}
.sk{display:inline-block;border-radius:4px;background:linear-gradient(90deg,#141c2a 0,#1b2536 40%,#141c2a 80%);background-size:300% 100%;animation:sh 1.4s ease infinite;color:transparent!important}
.sk-t{width:60%;max-width:340px}.sk-line{width:80%;max-width:520px}.sk-p{display:block;height:84px}
.skel{background:linear-gradient(90deg,#0e1420 0,#152032 40%,#0e1420 80%);background-size:300% 100%;animation:sh 1.4s ease infinite;border-color:var(--ln)}
@keyframes sh{0%{background-position:100% 0}100%{background-position:0 0}}
.loading .cbody,.loading .map{opacity:.55;transition:opacity .2s}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* metoda + stopka */
.meth{background:var(--pan);border:1px solid var(--ln);border-radius:var(--r);padding:0 16px;color:var(--mu2);font-size:14px}
.meth summary{min-height:48px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:var(--tx)}
.meth p{margin:0 0 12px}
.foot{border-top:1px solid var(--ln);color:var(--mu);font-size:12px;padding-top:var(--s3);padding-bottom:var(--s5)}
.foot p{margin:0 0 6px}

@media (min-width:480px){.brand-t{display:inline}}
@media (min-width:600px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr));min-height:136px}.weeks{grid-template-columns:repeat(2,1fr)}.hero{min-height:360px}}
@media (min-width:900px){
  .wrap{padding:var(--s5) var(--s5) var(--s6)}
  .bar-in,.tabs{padding-left:var(--s5);padding-right:var(--s5)}
  .tabs{justify-content:flex-start}.tabs button{flex:0 0 160px}
  .kpis{grid-template-columns:repeat(6,minmax(0,1fr));min-height:84px}.hero{min-height:300px}
  .strip{grid-auto-flow:row;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-columns:auto;overflow:visible}
  .charts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cbody{height:280px}
  .map{height:600px}
  .weeks{grid-template-columns:repeat(3,1fr)}
  .verdict{font-size:17px;min-height:96px}
}
@media (min-width:1200px){.strip.n16{grid-template-columns:repeat(8,minmax(0,1fr))}}