/* mampogode.pl – niebo u góry zmienia kolor z pogodą i porą dnia; pod nim białe karty z kolorowymi akcentami. */
:root{
  --bg:#F2F6FC; --surface:#FFFFFF; --surface-2:#F6F8FC; --line:#E3E9F2; --line-soft:#EDF1F7;
  --fg:#0F1A2E; --muted:#5B6B82; --accent:#2F6BFF; --accent-soft:#EAF0FF;
  --warm:#F05A28; --hot:#E11D48; --cold:#2F6BFF; --rain:#1E88E5; --sun:#FFB020;
  --font-ui:Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-d:"Bricolage Grotesque", Manrope, system-ui, sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--font-ui); font-size:15px; line-height:1.45}
[hidden]{display:none !important}
img{max-width:100%}
a{color:var(--accent)}
button{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:1180px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.ic{display:block; flex:none}

/* nagłówek */
.top{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line)}
.top .wrap{display:flex; align-items:center; gap:16px; padding-block:10px}
.logo{display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--fg); font-family:var(--font-d); font-weight:800; font-size:23px; letter-spacing:-0.02em; white-space:nowrap}
.search{position:relative; flex:1 1 360px; max-width:480px}
.search-box{display:flex; align-items:center; gap:8px; height:44px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); padding:0 16px; color:var(--muted)}
.search-box:focus-within{border-color:var(--accent); background:#fff}
.search input{flex:1; min-width:0; border:0; background:transparent; font:inherit; font-size:15px; color:var(--fg); outline:none}
.sugg{position:absolute; left:0; right:0; top:50px; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 16px 40px rgba(15,26,46,.16); list-style:none; margin:0; padding:6px; max-height:340px; overflow:auto}
.sugg li a{display:block; padding:10px 12px; border-radius:10px; text-decoration:none; color:var(--fg); font-weight:700}
.sugg li a:hover,.sugg li a.on{background:var(--accent-soft)}
.sugg .err{padding:10px 12px; color:var(--muted)}
.icon-btn{width:44px; height:44px; border-radius:50%; border:0; background:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; margin-left:auto}
.only-phone{display:none}

/* niebo */
.hero{color:#fff; position:relative; overflow:hidden; padding-block:28px 64px}
.hero::after{content:""; position:absolute; inset:auto -10% -60px -10%; height:120px; background:var(--bg); border-radius:50% 50% 0 0 / 100% 100% 0 0}
.sky-sun{background:radial-gradient(circle at 85% 0%, #FFD36E 0, rgba(255,211,110,0) 38%), linear-gradient(160deg,#1E6BFF 0%,#3D9BFF 55%,#7CC4FF 100%)}
.sky-cloud{background:radial-gradient(circle at 80% 10%, rgba(255,255,255,.35) 0, rgba(255,255,255,0) 40%), linear-gradient(160deg,#4F6FA8 0%,#7B9AC9 60%,#A9C1E3 100%)}
.sky-rain{background:radial-gradient(circle at 20% 0%, rgba(120,180,255,.35) 0, rgba(120,180,255,0) 45%), linear-gradient(160deg,#2B3F5E 0%,#4A6489 60%,#7690B5 100%)}
.sky-snow{background:linear-gradient(160deg,#6E8FC4 0%,#A8C0E6 60%,#DCE8F8 100%)}
.sky-night{background:radial-gradient(circle at 80% 15%, rgba(255,232,150,.25) 0, rgba(255,232,150,0) 25%), linear-gradient(160deg,#0A1638 0%,#1B2E66 60%,#33508F 100%)}
.hero-in{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:end}
.hero h1{margin:0; font-family:var(--font-d); font-size:40px; font-weight:800; letter-spacing:-0.02em; display:flex; align-items:center; gap:8px; line-height:1.1}
.hero-date{margin:4px 0 0; opacity:.85; font-weight:600}
.now-temp{display:flex; align-items:center; gap:14px; margin-top:10px}
.now-temp .t{font-family:var(--font-d); font-size:104px; font-weight:700; line-height:.9; letter-spacing:-0.05em}
.tside{display:flex; flex-direction:column; gap:4px; font-size:17px; font-weight:600}
.tside b{font-family:var(--font-d); font-size:22px}
.now-sum{margin:12px 0 0; font-size:16px; font-weight:600; opacity:.95}
.hero .ic{filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}
.stats{display:grid; grid-template-columns:repeat(2, minmax(0,160px)); gap:10px}
.stat{background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.28); border-radius:16px; padding:10px 14px; backdrop-filter:blur(6px)}
.stat span{display:block; font-size:12px; font-weight:700; opacity:.85; text-transform:uppercase; letter-spacing:.05em}
.stat b{display:flex; align-items:center; gap:6px; font-family:var(--font-d); font-size:20px; font-weight:700}
.stat .ic{filter:none}
.star{border:0; background:rgba(255,255,255,.18); cursor:pointer; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff}
.star[aria-pressed="true"]{color:#FFD36E}
.fav-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; font-size:13px}
.fav-row span{opacity:.85; align-self:center}
.fav-chip{height:30px; padding:0 12px; border-radius:999px; background:rgba(255,255,255,.2); color:#fff; text-decoration:none; font-weight:700; display:inline-flex; align-items:center}
.fav-chip.on{background:#fff; color:var(--accent)}

/* karty */
main.wrap{position:relative; z-index:2; margin-top:-40px; display:flex; flex-direction:column; gap:18px; padding-bottom:40px}
.card{background:var(--surface); border-radius:24px; box-shadow:0 1px 2px rgba(15,26,46,.06), 0 10px 30px rgba(15,26,46,.07)}
.cards{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.cards .card{padding:20px 22px; display:flex; flex-direction:column; gap:12px}
.cards h2{margin:0; font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.n-head{display:flex; align-items:center; gap:14px}
.n-badge{flex:none; width:68px; height:68px; border-radius:20px; display:flex; align-items:center; justify-content:center; font-family:var(--font-d); font-size:28px; font-weight:800; color:#fff}
.n-badge.cold{background:linear-gradient(135deg,#2F6BFF,#22B8F0)}
.n-badge.warm{background:linear-gradient(135deg,#F05A28,#FFB020)}
.n-badge.even{background:linear-gradient(135deg,#10B981,#34D399)}
.n-title{margin:0; font-family:var(--font-d); font-size:24px; font-weight:800; line-height:1.15; letter-spacing:-0.01em}
.gauge{position:relative; height:14px; border-radius:999px; background:linear-gradient(90deg,#2F6BFF,#22B8F0 30%,#D9E3F0 50%,#FFB020 70%,#F05A28); margin-top:18px}
.g-norm{position:absolute; top:-4px; bottom:-4px; width:3px; border-radius:2px; background:var(--fg); transform:translateX(-50%)}
.g-dot{position:absolute; top:50%; width:24px; height:24px; border-radius:50%; background:#fff; border:5px solid var(--fg); transform:translate(-50%,-50%); box-shadow:0 2px 6px rgba(0,0,0,.2)}
.g-dot b{position:absolute; bottom:24px; left:50%; transform:translateX(-50%); font-family:var(--font-d); font-size:15px; white-space:nowrap}
.g-scale{display:flex; justify-content:space-between; font-size:12px; font-weight:700; color:var(--muted)}
.sub{margin:0; font-size:14px; color:var(--muted)}
.recs{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.rec{border-radius:16px; padding:10px 14px; color:#fff}
.rec.hot{background:linear-gradient(135deg,#E11D48,#F97316)}
.rec.coldr{background:linear-gradient(135deg,#1D4ED8,#06B6D4)}
.rec span{display:block; font-size:12px; font-weight:700; opacity:.9; text-transform:uppercase; letter-spacing:.05em}
.rec b{font-family:var(--font-d); font-size:30px; font-weight:800; line-height:1.1}
.rec small{display:block; font-weight:700; opacity:.9}
.fact{margin:0; font-size:15px; line-height:1.5}
.fact b{color:var(--accent)}

/* prognoza */
.fc{padding:18px 20px 20px; display:flex; flex-direction:column; gap:14px}
.fc-head{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between}
.fc-head h2{margin:0; font-family:var(--font-d); font-size:22px; font-weight:800}
.fc-tools{display:flex; gap:8px; flex-wrap:wrap}
.seg{display:flex; gap:4px; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:4px}
.seg button{height:36px; padding:0 16px; border-radius:999px; border:0; background:transparent; font-weight:800; font-size:14px; cursor:pointer; color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--accent); color:#fff; box-shadow:0 4px 10px rgba(47,107,255,.35)}
.seo-days{margin:0; padding-left:18px; columns:2; font-size:14px; color:var(--muted)}
.note{margin:0; font-size:13px; color:var(--muted)}

.dlist{display:flex; flex-direction:column}
.drow{display:grid; grid-template-columns:120px 184px minmax(0,1fr) 80px 70px 18px; align-items:center; gap:14px; width:100%; padding:10px 12px; border:0; border-radius:16px; background:transparent; text-align:left; color:var(--fg); cursor:pointer}
.drow:hover{background:var(--surface-2)}
.dwrap{border-top:1px solid var(--line-soft)}
.dwrap:first-child{border-top:0}
.dwrap.open{background:var(--surface-2); border-radius:18px; border-color:transparent}
.dwrap.open + .dwrap{border-color:transparent}
.dn b{font-family:var(--font-d); font-size:18px; font-weight:800}
.dn .dd{display:block; color:var(--muted); font-size:13px; font-weight:600}
.pory{display:grid; grid-template-columns:repeat(4, 40px); gap:6px; justify-items:center}
.pusty{width:34px; height:34px}
.range{display:grid; grid-template-columns:38px minmax(0,1fr) 38px; align-items:center; gap:8px; font-family:var(--font-d); font-weight:700; font-size:17px}
.range .lo{color:var(--muted); text-align:right}
.track{position:relative; height:8px; border-radius:999px; background:#E8EDF5}
.track i{position:absolute; top:0; bottom:0; border-radius:999px}
.mm{display:flex; align-items:center; justify-content:flex-end; gap:4px; color:var(--rain); font-weight:800}
.ww{display:flex; align-items:center; justify-content:flex-end; gap:4px; font-weight:700; color:var(--muted)}
.chev{color:var(--muted); transition:transform .15s}
.dwrap.open .chev{transform:rotate(180deg)}
.hours{padding:0 12px 10px}
.hrow{display:grid; grid-template-columns:120px 184px minmax(0,1fr) 80px 70px 18px; align-items:center; gap:14px; padding:6px 0; border-top:1px dashed var(--line); font-size:15px}
.hrow .h{font-weight:700; color:var(--muted); padding-left:12px}
.hrow .tt{font-family:var(--font-d); font-weight:700; font-size:17px}

.meteo{width:100%}
.meteo svg{display:block; width:100%; height:auto}
.meteo text{font-family:var(--font-ui); font-size:11px; font-weight:700; fill:var(--muted)}
.meteo .m-day{font-family:var(--font-d); font-size:14px; font-weight:800; fill:var(--fg)}
.meteo .m-hour{font-size:11px}
.meteo .m-tl{font-family:var(--font-d); font-size:14px; font-weight:800}
.meteo .m-min{fill:var(--muted)}
.meteo .m-night{fill:#EDF2FB}
.meteo .m-grid{stroke:#E6ECF4}
.meteo .m-base{stroke:#9AA9BE}
.meteo .m-bar{fill:#1E88E5}
.meteo .m-arrow{fill:none; stroke:var(--fg); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.meteo .m-w{fill:var(--fg); font-size:12px}

footer{padding-block:8px 28px}
footer .src{margin:0; font-size:12px; color:var(--muted); max-width:90ch}
footer a{color:var(--muted)}
.toast{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--fg); color:#fff; padding:12px 18px; border-radius:14px; font-weight:700; font-size:14px; z-index:40}
.city-links{display:flex; flex-wrap:wrap; gap:8px}
.city-links a{height:34px; padding:0 12px; border-radius:999px; border:1px solid var(--line); background:#fff; display:inline-flex; align-items:center; text-decoration:none; color:var(--fg); font-weight:700}

@media (max-width: 900px){
  .hero-in{grid-template-columns:minmax(0,1fr)}
  .stats{grid-template-columns:repeat(4, minmax(0,1fr))}
  .cards{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 720px){
  .only-phone{display:flex}
  .logo{margin-right:auto; font-size:21px}
  .search{display:none; flex-basis:100%; max-width:none; order:5}
  .top.search-open .wrap{flex-wrap:wrap}
  .top.search-open .search{display:block}
  .hero{padding-block:18px 56px}
  .hero h1{font-size:30px}
  .now-temp .t{font-size:84px}
  .stats{grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px}
  .stat b{font-size:17px}
  .cards .card{padding:16px}
  .n-title{font-size:20px}
  .n-badge{width:58px; height:58px; font-size:24px}
  .fc{padding:14px 10px 16px}
  .fc-head h2{font-size:19px; padding-left:6px}
  .drow, .hrow{grid-template-columns:44px 112px minmax(0,1fr) 34px 26px; gap:6px; padding:9px 6px}
  .chev{display:none}
  .pory{grid-template-columns:repeat(4, 26px); gap:2px}
  .pory .ic, .pusty{width:26px; height:26px}
  .dn b{font-size:16px}
  .dn .dd{font-size:11px}
  .range{grid-template-columns:24px minmax(0,1fr) 24px; gap:4px; font-size:14px}
  .mm{font-size:13px}
  .mm .ic{display:none}
  .ww{font-size:13px}
  .hrow{padding:6px}
  .hrow .h{padding-left:0; font-size:13px}
  .hrow .tt{font-size:15px}
  .hours{padding:0 4px 8px}
}
@media (prefers-reduced-motion: reduce){*{transition:none !important}}