/* ============================================================
   SEROKI.PARTY — landing pogodowy.

   Jedna długa strona: baner → prognoza godzinowa → prognoza dzienna → mapa.
   Bez headera, menu i stopki nawigacyjnej.

   RWD: mobile-first. Bazowe reguły opisują TELEFON PIONOWO, a kolejne
   @media (min-width) rozbudowują układ w górę. Dzięki temu najsłabsze
   urządzenie dostaje najprostszy CSS, a nie stos nadpisań.

   Motyw: jasny + automatyczny ciemny (prefers-color-scheme) + ręczny
   przełącznik ([data-theme] na <html>), który ma pierwszeństwo.
   ============================================================ */

/* --- Font: IBM Plex Sans lokalnie (latin + latin-ext dla PL) ----- */
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../../fonts/ibm-plex-sans-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../../fonts/ibm-plex-sans-latin-ext-500-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../../fonts/ibm-plex-sans-latin-ext-600-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../../fonts/ibm-plex-sans-latin-ext-700-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../../fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../../fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../../fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../../fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* --- Zmienne motywu ---------------------------------------------
   Pełna paleta JASNA na gołym :root. Motyw ciemny redefiniuje TYLKO
   te tokeny — raz dla systemowego „dark" (z wyłączeniem ręcznego
   wyboru „light"), raz dla ręcznego [data-theme="dark"], żeby
   przełącznik wygrywał w obie strony. */
:root {
  --font:'IBM Plex Sans', system-ui, -apple-system, sans-serif;

  --bg:      #f0f0f3;
  --fg:      #23262e;
  --muted:   #6f7480;
  --line:    #c2ccee;
  --hover:   #e7e7ec;
  --accent:  #4a6cf0;
  --accent-weak:#eef1fd;
  --card:    #ffffff;
  --row-border:#e3e3e8;

  --radius:12px;
  --shadow:0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:0 10px 34px rgba(0,0,0,.16);

  /* Szerokość treści landingu — jedna wartość dla wszystkich sekcji. */
  --wrap:1180px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#181a20; --fg:#e6e8ee; --muted:#9aa0ad; --line:#2a2d36; --hover:#22252e;
    --accent:#7a92f5; --accent-weak:#232842; --card:#21242e; --row-border:#2f333d;
    --shadow:0 4px 16px rgba(0,0,0,.4); --shadow-lg:0 10px 34px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  --bg:#181a20; --fg:#e6e8ee; --muted:#9aa0ad; --line:#2a2d36; --hover:#22252e;
  --accent:#7a92f5; --accent-weak:#232842; --card:#21242e; --row-border:#2f333d;
  --shadow:0 4px 16px rgba(0,0,0,.4); --shadow-lg:0 10px 34px rgba(0,0,0,.5);
}

/* --- Reset ------------------------------------------------------- */
* { box-sizing:border-box; }
body {
  margin:0; font-family:var(--font); font-size:16px; line-height:1.55;
  color:var(--fg); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* Telefon poziomo/wycięcia — treść nie może wchodzić pod notch. */
  padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right);
  /* Ochrona przed poziomym scrollem całej strony (wymóg: szerokie elementy
     przewijają się WEWNĄTRZ własnych kontenerów, nie rozpychają <body>). */
  overflow-x:hidden;
}
button, input, select { font-family:inherit; font-size:inherit; color:inherit; }
a { color:inherit; }
img, svg { max-width:100%; }

/* Wspólny kontener szerokości dla wszystkich sekcji strony. */
.wrap { width:100%; max-width:var(--wrap); margin:0 auto; padding:0 14px; }

/* ================================================================
   PASEK GÓRNY — nazwa + hamburger. Nie jest to „header aplikacji",
   tylko minimalny pasek nad banerem: przyklejony, przezroczysty,
   z rozmyciem tła pod spodem.
   ================================================================ */
.top {
  position:sticky; top:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 0;
  /* Fallback NAJPIERW: color-mix() nie działa na Safari <16.2 i starszym
     Firefoksie — bez tej linii pasek byłby tam przezroczysty i treść
     przewijałaby się pod napisami. Przeglądarki bez color-mix() zignorują
     drugą deklarację i zostaną przy nieprzezroczystym tle. */
  background:var(--bg);
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  padding-top:max(8px, env(safe-area-inset-top));
}
.top.is-stuck { border-bottom-color:var(--line); }
.top-in { display:flex; align-items:center; justify-content:space-between;
  gap:10px; width:100%; max-width:var(--wrap); margin:0 auto; padding:0 14px; }
.top-brand { display:flex; align-items:baseline; gap:8px; min-width:0; }
.top-name {
  font-size:17px; font-weight:700; letter-spacing:-.02em; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.top-place { font-size:13px; color:var(--muted); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.top-actions { display:flex; align-items:center; gap:6px; flex:none; }

/* Przyciski paska: hamburger i motyw. 44×44 px — minimalny cel dotykowy
   wg wytycznych dostępności (mniejszy jest trudny do trafienia palcem). */
.icon-btn {
  appearance:none; border:1px solid var(--line); background:var(--card);
  width:44px; height:44px; border-radius:11px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--fg); transition:background .12s, border-color .12s;
  flex:none; padding:0;
}
.icon-btn:hover { background:var(--hover); }
.icon-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.icon-btn svg { display:block; }

/* Ikona motywu: pokazujemy słońce ALBO księżyc, zależnie od aktywnego motywu. */
.theme-moon { display:none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-sun  { display:none; }
  :root:not([data-theme="light"]) .theme-moon { display:block; }
}
:root[data-theme="dark"] .theme-sun  { display:none; }
:root[data-theme="dark"] .theme-moon { display:block; }
:root[data-theme="light"] .theme-sun  { display:block; }
:root[data-theme="light"] .theme-moon { display:none; }

/* ================================================================
   1. BANER — aktualne warunki
   ================================================================ */
.hero {
  border-radius:20px; border:1px solid var(--line);
  background:linear-gradient(135deg, #cfe4fb 0%, #e4ecfe 45%, #f3eefe 100%);
  color:#16234a; padding:18px 16px; margin:10px 0 18px;
}
.hero.is-night {
  background:linear-gradient(135deg, #253052 0%, #333c6b 45%, #453f75 100%);
  color:#eef1fd;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero {
    background:linear-gradient(135deg, #1f2740 0%, #242a3c 45%, #2b2b45 100%);
    color:#e6e8ee;
  }
}
:root[data-theme="dark"] .hero {
  background:linear-gradient(135deg, #1f2740 0%, #242a3c 45%, #2b2b45 100%);
  color:#e6e8ee;
}

.hero-head { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 10px; margin-bottom:6px; }
.hero-place { font-size:20px; font-weight:700; letter-spacing:-.02em; }
.hero-region { font-size:13px; opacity:.7; }
.hero-date { font-size:13px; opacity:.75; margin-left:auto; }

/* Blok „ikona + temperatura". Na telefonie ikona obok liczby, ale mniejsza. */
.hero-main { display:flex; align-items:center; gap:12px; min-width:0; }
.hero-icon { width:88px; height:88px; flex:none; line-height:0; }
.hero-now { min-width:0; }
.hero-temp {
  font-size:clamp(52px, 17vw, 76px); font-weight:600; line-height:1;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.hero-deg { font-weight:300; opacity:.6; }
.hero-desc { font-size:17px; font-weight:600; margin-top:4px; }
.hero-feels { font-size:14px; opacity:.75; margin-top:2px; }

/* Kafle danych — „szkiełka" na gradiencie. Telefon: 2 kolumny. */
.tiles { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; margin-top:14px; }
.tile {
  display:flex; align-items:center; gap:9px; padding:10px 11px;
  border-radius:13px; background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.65); min-width:0;
}
.hero.is-night .tile { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.12); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tile {
    background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.12);
  }
}
:root[data-theme="dark"] .tile {
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.12);
}
.tile-ico { flex:none; line-height:0; opacity:.9; }
.tile-hum   .tile-ico { color:#3d8fd0; }
.tile-press .tile-ico { color:#6b7c92; }
.tile-wind  .tile-ico { color:#5aa0b8; }
.tile-ico-scale { color:var(--pm, #8a8f9a); }
.tile-body { min-width:0; display:flex; flex-direction:column; }
.tile-val { font-size:20px; font-weight:600; line-height:1.15; white-space:nowrap;
  font-variant-numeric:tabular-nums; }
.tile-unit { font-size:12.5px; font-weight:500; opacity:.6; margin-left:2px; }
.tile-label { font-size:11.8px; opacity:.78; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
/* Pyły i UV: lewa krawędź w kolorze oceny (GIOŚ / WHO) — od razu widać, czy źle.
   Reguły motywu ustawiają border-color dla wszystkich krawędzi i mają wyższą
   specyficzność, więc akcent przywracamy WPROST poniżej. */
.tile-scale { border-left:4px solid var(--pm, #8a8f9a); }
.hero.is-night .tile-scale { border-left-color:var(--pm, #8a8f9a); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tile-scale { border-left-color:var(--pm, #8a8f9a); }
}
:root[data-theme="dark"] .tile-scale { border-left-color:var(--pm, #8a8f9a); }

/* Pasek wschód/zachód słońca pod kaflami. */
.hero-sun {
  display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:12px;
  font-size:13px; opacity:.8;
}
.hero-sun span { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }

/* Ostrzeżenie o nieświeżych danych. */
.stale {
  margin:0 0 12px; padding:9px 12px; border-radius:var(--radius);
  background:#fff6e5; color:#8a5d00; font-size:14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stale { background:#3a2f18; color:#e8c98a; }
}
:root[data-theme="dark"] .stale { background:#3a2f18; color:#e8c98a; }

/* ================================================================
   Sekcje
   ================================================================ */
.section { margin:0 0 22px; }
.section-title {
  font-size:16px; font-weight:700; margin:0 0 10px; letter-spacing:-.01em;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.section-hint { font-size:12.5px; font-weight:400; color:var(--muted); }

/* --- 2. Prognoza godzinowa ---
   BAZOWO (telefon) poziomy scroller ze scroll-snap: 24 kolumny na wąskim
   ekranie byłyby nieczytelnymi paskami, więc tam przewijanie jest właściwe.
   Od szerokości, na której doba mieści się czytelnie (patrz media niżej),
   przechodzimy na siatkę 24 równych kolumn BEZ poziomego suwaka. */
.hours {
  display:flex; gap:6px; overflow-x:auto; padding:2px 2px 8px;
  scroll-snap-type:x proximity;
  /* Płynne przewijanie palcem na iOS + brak „łapania" scrolla strony. */
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
  scrollbar-width:thin;
}
.hour {
  flex:0 0 auto; width:64px; scroll-snap-align:start;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 4px; border-radius:12px; border:1px solid var(--row-border);
  background:var(--card);
  min-width:0;   /* pozwala kolumnie zejść poniżej szerokości treści w siatce */
}
.hour.is-now { border-color:var(--accent); background:var(--accent-weak); }
.hour-time { font-size:12px; color:var(--muted); white-space:nowrap; }
.hour.is-now .hour-time { font-weight:700; color:var(--accent); }
.hour-icon { width:34px; height:34px; line-height:0; }
.hour-temp { font-size:15.5px; font-weight:600; font-variant-numeric:tabular-nums; }
.hour-precip {
  display:flex; align-items:center; gap:2px;
  font-size:11px; color:#3d8fd0; font-weight:600; white-space:nowrap;
}
.hour-precip.is-dry { color:var(--muted); opacity:.5; font-weight:400; }

/* --- 3. Prognoza dzienna --- */
.days { display:flex; flex-direction:column; gap:6px; }
/* Telefon: nazwa | ikona | opad | min | max (pasek ukryty — patrz min-width). */
.day {
  display:grid; grid-template-columns:64px 34px 1fr auto auto;
  align-items:center; gap:8px;
  padding:9px 11px; border-radius:13px; border:1px solid var(--row-border);
  background:var(--card);
}
.day.is-today { border-color:var(--accent); background:var(--accent-weak); }
.day-name { font-size:14px; font-weight:600; line-height:1.2; }
.day-date { display:block; font-size:11px; font-weight:500; color:var(--muted);
  letter-spacing:.02em; white-space:nowrap; }
.day-icon { width:34px; height:34px; line-height:0; }
.day-precip { display:flex; align-items:baseline; gap:5px; min-width:0; font-size:12.5px; }
.day-prob { color:#3d8fd0; font-weight:600; }
.day-mm { color:var(--muted); white-space:nowrap; }
.day-bar { display:none; }   /* pokazywany od tabletu w górę */
.day-min, .day-max { font-size:15px; font-weight:600; text-align:right;
  font-variant-numeric:tabular-nums; min-width:38px; }
.day-min { color:var(--muted); }

/* --- 4. Mapa --- */
.map-head { display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.map-head .section-title { margin:0; }

/* Przełącznik warstw — segmentowy. */
.layers { display:inline-flex; padding:3px; gap:2px;
  background:var(--hover); border:1px solid var(--line); border-radius:11px; }
.layer-btn {
  appearance:none; border:none; background:none; cursor:pointer;
  font-size:14px; font-weight:600; color:var(--muted);
  padding:8px 14px; border-radius:9px; transition:.12s; min-height:38px;
}
.layer-btn:hover { color:var(--fg); }
.layer-btn.is-active { background:var(--card); color:var(--accent); box-shadow:0 1px 3px rgba(0,0,0,.12); }
.layer-btn:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }

/* min-height na WRAPIE (nie tylko na #map): gdy mapa nie wystartuje, ramka i tak
   ma wymiar, więc komunikat o błędzie (absolutny) jest widoczny, a układ się nie
   zapada. Wysokość w dvh — na iOS pasek adresu zmienia vh w trakcie scrolla. */
.map-wrap {
  position:relative; border:1px solid var(--line); border-radius:16px;
  overflow:hidden; background:var(--hover);
  height:min(70dvh, 520px); min-height:340px;
}
#map { width:100%; height:100%; }
/* Placeholder do czasu leniwego załadowania Leafletu. */
.map-ph {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:14px; text-align:center; padding:16px;
}
#map .leaflet-control-zoom a { background:var(--card); color:var(--fg); border-color:var(--line); }
#map .leaflet-control-zoom a:hover { background:var(--hover); }
#map .leaflet-control-attribution { background:rgba(255,255,255,.78); font-size:10.5px; color:#4a4f5a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #map .leaflet-control-attribution {
    background:rgba(24,26,32,.8); color:#9aa0ad; }
  :root:not([data-theme="light"]) #map .leaflet-control-attribution a { color:#9db1fb; }
}
:root[data-theme="dark"] #map .leaflet-control-attribution {
  background:rgba(24,26,32,.8); color:#9aa0ad; }
:root[data-theme="dark"] #map .leaflet-control-attribution a { color:#9db1fb; }

.map-empty {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:500; max-width:80%; text-align:center;
  background:var(--card); border:1px solid var(--line); border-radius:11px;
  padding:11px 14px; font-size:14px; color:var(--muted); box-shadow:var(--shadow);
}

/* Pasek animacji radaru. */
.map-anim {
  position:absolute; left:10px; right:10px; bottom:10px; z-index:600;
  display:flex; align-items:center; gap:9px;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:7px 10px; box-shadow:var(--shadow);
}
.anim-play {
  appearance:none; border:none; cursor:pointer; flex:none;
  width:36px; height:36px; border-radius:9px;
  background:var(--accent); color:#fff; font-size:13px; line-height:1;
}
.anim-play:hover { filter:brightness(1.08); }
.anim-range { flex:1 1 auto; min-width:0; accent-color:var(--accent); cursor:pointer; height:24px; }
.anim-time { flex:none; font-size:13px; font-weight:600;
  font-variant-numeric:tabular-nums; min-width:66px; text-align:right; }

/* Legendy. Na telefonie legenda siedzi NAD paskiem animacji. */
.legend {
  position:absolute; left:10px; bottom:10px; z-index:600;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:7px 10px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:5px; max-width:180px;
}
/* KRYTYCZNE: `display:flex` powyżej ma wyższą specyficzność niż wbudowany
   `display:none` atrybutu [hidden], więc bez tej reguły ukrywanie legendy
   w JS (l.hidden = …) NIE działa — obie legendy rysują się jedna na drugiej,
   a burzowa (późniejsza w HTML) zasłania opadową. To samo dotyczy paska
   animacji radaru. */
.legend[hidden], .map-anim[hidden] { display:none; }
.map-anim:not([hidden]) ~ .legend { bottom:66px; }
.legend-title { font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:var(--muted); }
.legend-scale { display:block; height:9px; border-radius:99px; }
.legend-rain { background:linear-gradient(90deg,#c8e6ff 0%,#4aa3e0 40%,#1f5fbf 70%,#7b3fa0 100%); }
/* Te same barwy co HEAT_GRADIENT w map.js — kolor na mapie i w legendzie musi
   znaczyć to samo. */
.legend-storm { background:linear-gradient(90deg,#8bbf3d 0%,#c9cf2a 30%,#e5b911 55%,#e58100 78%,#e50000 100%); }
.legend-ends { display:flex; justify-content:space-between; font-size:10.5px; color:var(--muted); }

.map-note { font-size:12px; color:var(--muted); margin:10px 0 0; line-height:1.5; }
.map-note a { color:var(--accent); }

/* Stopka — minimalna, tylko źródła danych. */
.foot { padding:8px 0 26px; font-size:12px; color:var(--muted); line-height:1.6; }
.foot a { color:var(--accent); }

/* Komunikat o braku danych. */
.empty {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; margin:12px 0;
}
.empty h2 { margin:0 0 6px; font-size:17px; }
.empty p { margin:0; color:var(--muted); font-size:14.5px; }
.empty code { background:var(--hover); padding:1px 5px; border-radius:5px; font-size:13px; }

/* ================================================================
   SZUFLADA USTAWIEŃ (hamburger)
   Wysuwana z prawej; na telefonie pełna szerokość, wyżej — panel 380px.
   ================================================================ */
.backdrop {
  position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transition:opacity .2s, visibility .2s;
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
.backdrop.is-open { opacity:1; visibility:visible; }

.drawer {
  position:fixed; top:0; right:0; bottom:0; z-index:1001;
  width:min(100%, 400px);
  background:var(--bg); border-left:1px solid var(--line);
  box-shadow:var(--shadow-lg);
  transform:translateX(100%); transition:transform .24s ease;
  display:flex; flex-direction:column;
  padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom);
}
.drawer.is-open { transform:translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .drawer, .backdrop { transition:none; }
}
.drawer-head {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; border-bottom:1px solid var(--line); flex:none;
}
.drawer-title { font-size:16px; font-weight:700; }
.drawer-body { padding:14px; overflow-y:auto; flex:1 1 auto; -webkit-overflow-scrolling:touch; }
.drawer-sec { margin-bottom:20px; }
.drawer-sec:last-child { margin-bottom:0; }
.drawer-sec-title {
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); margin:0 0 8px;
}

/* Lista miejscowości do wyboru. */
.loc-list { display:flex; flex-direction:column; gap:6px; }
.loc-item {
  display:flex; align-items:center; gap:9px; width:100%;
  padding:11px 12px; border-radius:11px; border:1px solid var(--row-border);
  background:var(--card); cursor:pointer; text-align:left;
  text-decoration:none; color:inherit; min-height:46px;
}
.loc-item:hover { border-color:var(--accent); }
.loc-item.is-active { border-color:var(--accent); background:var(--accent-weak); }
.loc-main { min-width:0; flex:1 1 auto; }
.loc-name { font-size:14.5px; font-weight:600; display:block;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.loc-meta { font-size:11.5px; color:var(--muted); display:block;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.loc-temp { font-size:15px; font-weight:600; flex:none; font-variant-numeric:tabular-nums; }
.loc-badge {
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--accent); background:var(--accent-weak); border-radius:5px;
  padding:1px 5px; flex:none;
}
/* Przycisk usuwania w trybie administratora. */
.loc-del {
  appearance:none; border:none; background:none; cursor:pointer; flex:none;
  width:32px; height:32px; border-radius:8px; color:var(--muted);
  display:inline-flex; align-items:center; justify-content:center;
}
.loc-del:hover { background:var(--hover); color:#d15b5b; }

/* Formularze w szufladzie. */
.field { margin-bottom:10px; }
.field label { display:block; font-size:12.5px; font-weight:600; margin-bottom:4px; }
.input {
  width:100%; padding:11px 12px; border-radius:10px;
  border:1px solid var(--line); background:var(--card); color:var(--fg);
  /* 16px — poniżej tej wartości Safari na iOS ZOOMUJE stronę przy fokusie. */
  font-size:16px; min-height:44px;
}
.input:focus { outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent); }
.btn {
  appearance:none; cursor:pointer; border-radius:10px; padding:11px 15px;
  border:1px solid var(--line); background:var(--card); color:var(--fg);
  font-size:14.5px; font-weight:600; min-height:44px;
}
.btn:hover { background:var(--hover); }
.btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.btn-primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-primary:hover { filter:brightness(1.07); background:var(--accent); }
.btn-row { display:flex; gap:8px; flex-wrap:wrap; }
.btn[disabled], .btn-primary[disabled] { opacity:.55; cursor:not-allowed; }

/* Wyniki wyszukiwania geokodera. */
.geo-results { display:flex; flex-direction:column; gap:5px; margin-top:8px; }
.geo-item {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 11px; border-radius:10px; border:1px solid var(--row-border);
  background:var(--card); cursor:pointer; text-align:left; width:100%;
  min-height:44px;
}
.geo-item:hover { border-color:var(--accent); background:var(--accent-weak); }
.geo-name { font-size:14px; font-weight:600; }
.geo-meta { font-size:11.5px; color:var(--muted); }
.geo-coords { font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; flex:none; }

/* Komunikaty w szufladzie. */
.msg { padding:9px 11px; border-radius:9px; font-size:13.5px; margin-bottom:10px; }
.msg-err { background:#fdeaea; color:#a13636; }
.msg-ok  { background:#e8f6ee; color:#276b45; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .msg-err { background:#3a2224; color:#e79b9b; }
  :root:not([data-theme="light"]) .msg-ok  { background:#1e3328; color:#8fd0aa; }
}
:root[data-theme="dark"] .msg-err { background:#3a2224; color:#e79b9b; }
:root[data-theme="dark"] .msg-ok  { background:#1e3328; color:#8fd0aa; }
.hint { font-size:12px; color:var(--muted); margin:6px 0 0; line-height:1.5; }

/* ================================================================
   RWD — rozbudowa układu w górę (mobile-first).
   ================================================================ */

/* --- Telefon POZIOMO / duży telefon (≥560px) ---
   Ekran jest niski, więc mapa nie może brać 70% wysokości. */
@media (min-width:560px) {
  .tiles { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .hero-icon { width:104px; height:104px; }
  .hour { width:68px; }
  .day { grid-template-columns:72px 36px 1fr auto auto; }
}
/* Niski ekran w poziomie — ograniczamy mapę, żeby nie wypełniała całego kadru. */
@media (max-height:520px) and (orientation:landscape) {
  .map-wrap { height:min(80dvh, 380px); min-height:260px; }
  .hero-temp { font-size:clamp(44px, 11vh, 62px); }
  .hero-icon { width:80px; height:80px; }
}

/* --- Tablet (≥760px) --- */
@media (min-width:760px) {
  body { font-size:16px; }
  .wrap, .top-in { padding:0 20px; }
  .hero { padding:22px 24px; margin:14px 0 22px; }
  .hero-place { font-size:23px; }
  .hero-icon { width:120px; height:120px; }
  .hero-desc { font-size:19px; }
  .tiles { gap:10px; margin-top:16px; }
  .tile { padding:12px 13px; }
  .tile-val { font-size:22px; }
  .tile-label { font-size:12.5px; }
  .section-title { font-size:17px; }
  .hour { width:72px; padding:10px 5px; }
  .hour-icon { width:36px; height:36px; }
  /* Od tabletu wraca pasek zakresu temperatur — jest miejsce na wspólną skalę. */
  .day { grid-template-columns:92px 40px minmax(80px,104px) 44px 1fr 44px;
         gap:10px; padding:10px 14px; }
  .day-bar {
    display:block; position:relative; height:7px; border-radius:99px;
    background:var(--row-border); overflow:hidden;
  }
  .day-bar-fill {
    position:absolute; top:0; bottom:0; border-radius:99px;
    background:linear-gradient(90deg, #5aa9e6 0%, #7ec86a 45%, #f5c445 75%, #f08a4b 100%);
  }
  .day-name { font-size:15px; }
  .map-wrap { height:min(66dvh, 620px); }
  .top-name { font-size:19px; }
  .top-place { font-size:14px; }
}

/* --- Desktop (≥1060px) --- */
@media (min-width:1060px) {
  .hero {
    display:grid; grid-template-columns:minmax(260px,auto) 1fr;
    gap:26px; align-items:center; padding:24px 30px;
  }
  /* Nagłówek banera rozpięty na obie kolumny. */
  .hero-head { grid-column:1 / -1; margin-bottom:0; }
  .hero-icon { width:136px; height:136px; }
  .hero-desc { font-size:20px; }
  .tiles { grid-template-columns:repeat(3, minmax(0,1fr)); margin-top:0; }
  .hero-sun { grid-column:1 / -1; margin-top:4px; }
  .map-wrap { height:min(70dvh, 720px); }

  /* CAŁA DOBA BEZ SUWAKA. Od tej szerokości pasek godzin przestaje być
     scrollerem i staje się siatką 24 RÓWNYCH kolumn rozłożonych na dostępną
     przestrzeń — minmax(0,1fr) pozwala im zejść poniżej szerokości treści.
     Wyliczenie przy 1060px: (1016 - 23×4) / 24 ≈ 38 px na kolumnę, co mieści
     „14:00" przy zmniejszonym foncie. Poniżej tego progu zostaje przewijanie,
     bo kolumny zrobiłyby się nieczytelnymi paskami. */
  .hours {
    display:grid; grid-template-columns:repeat(24, minmax(0,1fr));
    gap:4px; overflow-x:visible; padding:2px 0 4px;
  }
  /* Kolumny są teraz wąskie, więc wnętrze musi się zwęzić razem z nimi:
     mniejszy font, ciaśniejszy padding, mniejsza ikona. */
  .hour {
    width:auto; padding:8px 2px; gap:2px; border-radius:10px;
    overflow:hidden;   /* bez tego dłuższa treść rozpycha kolumnę */
    cursor:help;       /* dymek ze szczegółami — tylko tam, gdzie jest hover */
  }
  .hour:hover, .hour:focus-visible { border-color:var(--accent); outline:none; }
  .hour-time { font-size:10.5px; letter-spacing:-.02em; }
  .hour-icon { width:26px; height:26px; }
  .hour-temp { font-size:13.5px; letter-spacing:-.02em; }
  .hour-precip { font-size:9.5px; gap:1px; }
  .hour-precip svg { width:9px; height:9px; }
  /* Podpowiedź „przesuń w bok" traci sens bez suwaka. */
  .section-hint { display:none; }
}

/* --- Bardzo szeroko (≥1400px) ---
   Pasek ma tu ~1276 px, czyli ~49 px na kolumnę — wraca normalna wielkość
   treści, wciąż bez poziomego suwaka. */
@media (min-width:1400px) {
  :root { --wrap:1320px; }
  .hours { gap:5px; }
  .hour { padding:9px 3px; gap:3px; }
  .hour-time { font-size:11.5px; }
  .hour-icon { width:30px; height:30px; }
  .hour-temp { font-size:15px; }
  .hour-precip { font-size:10.5px; }
  .hour-precip svg { width:10px; height:10px; }
}

/* --- Dymek nad godziną (tylko wskaźnik precyzyjny) --- */
.tip {
  position:fixed; z-index:1200; max-width:230px; pointer-events:none;
  background:var(--card); border:1px solid var(--line); border-radius:11px;
  padding:9px 11px; box-shadow:var(--shadow-lg); font-size:13px;
  opacity:0; transition:opacity .12s;
}
.tip.is-on { opacity:1; }
.tip-head { display:flex; align-items:baseline; gap:6px; margin-bottom:4px; }
.tip-time { font-size:12px; color:var(--muted); font-weight:700; flex:none; }
.tip-desc { font-size:14px; font-weight:700; }
.tip-row { display:flex; justify-content:space-between; gap:12px; }
.tip-key { color:var(--muted); }
.tip-val { font-weight:600; font-variant-numeric:tabular-nums; }

/* --- Animacje ikon pogody --- */
@keyframes ww-drop-fall {
  0%   { transform:translateY(-2px); opacity:0; }
  25%  { opacity:1; }
  100% { transform:translateY(5px); opacity:0; }
}
@keyframes ww-spin { to { transform:rotate(360deg); } }
@keyframes ww-bolt-flash { 0%,72%,100% { opacity:1; } 80%,88% { opacity:.25; } }

.ww-drop, .ww-snow {
  animation:ww-drop-fall 1.5s linear infinite;
  animation-delay:calc(var(--i, 0) * .25s);
}
.ww-rays { transform-origin:center; animation:ww-spin 28s linear infinite; }
.ww-bolt { animation:ww-bolt-flash 3.5s ease-in-out infinite; }
.ww-cloud-back { opacity:.55; }

/* Szanujemy ustawienie systemowe — bez wyjątków. */
@media (prefers-reduced-motion: reduce) {
  .ww-drop, .ww-snow, .ww-rays, .ww-bolt { animation:none; }
  * { scroll-behavior:auto !important; }
}

/* --- Druk --- */
@media print {
  .top, .drawer, .backdrop, .map-wrap, .map-head, .map-note { display:none !important; }
  body { background:#fff; color:#000; }
  .hero { background:none !important; color:#000 !important; border:1px solid #999; }
}