/* ============================================================
   Funkcja 1 — POGODA za oknem.
   Warstwa tła (deszcz/śnieg/chmury/gwiazdy) LEŻY ZA treścią tablicy
   (z-index:-1), więc pokazuje się tylko w tłach/przerwach układu i NIGDY
   nie zasłania danych. Chip w nagłówku + rozwijany panel szczegółów wzorowane
   na istniejącym menu ⚙ (fixed dropdown), żeby nie rozpychać tablicy.
   Kolory z palety tablicy (var(--amber) itd.) — spójnie z resztą.
   ============================================================ */

/* ---------- warstwa atmosfery (za treścią) ---------- */
#wxAtmos{
  position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  transition:background 1.2s ease;
}
/* delikatny welon koloru zależny od pogody/pory — widoczny w przerwach układu */
#wxAtmos.wx-noc{     background:radial-gradient(120% 80% at 50% -10%, rgba(20,32,60,.55), transparent 70%); }
#wxAtmos.wx-zmierzch{background:radial-gradient(120% 80% at 50% -10%, rgba(60,34,24,.40), transparent 70%); }
#wxAtmos.wx-deszcz{  background:linear-gradient(180deg, rgba(30,44,66,.35), transparent 60%); }
#wxAtmos.wx-snieg{   background:linear-gradient(180deg, rgba(40,52,70,.30), transparent 60%); }
#wxAtmos.wx-mgla{    background:linear-gradient(180deg, rgba(90,100,115,.22), rgba(90,100,115,.10)); }

/* gwiazdy (noc, pogodnie) */
#wxAtmos .wx-star{position:absolute;width:2px;height:2px;border-radius:50%;
  background:#fff;opacity:.15;animation:wxTwinkle 4s infinite}
@keyframes wxTwinkle{0%,100%{opacity:.12}50%{opacity:.75}}

/* deszcz */
#wxAtmos .wx-rain{position:absolute;top:-12%;width:1px;height:16px;
  background:linear-gradient(transparent,rgba(150,180,220,.45));
  animation:wxFall linear infinite}
@keyframes wxFall{to{transform:translateY(115vh)}}

/* śnieg */
#wxAtmos .wx-snow{position:absolute;top:-5%;width:5px;height:5px;border-radius:50%;
  background:rgba(230,238,248,.72);animation:wxSnow linear infinite}
@keyframes wxSnow{to{transform:translateY(112vh) translateX(18px)}}

/* chmury (powolny dryf) */
#wxAtmos .wx-cloud{position:absolute;border-radius:50%;filter:blur(14px);
  background:radial-gradient(circle,rgba(150,165,190,.20),transparent 70%);
  animation:wxDrift linear infinite}
@keyframes wxDrift{from{transform:translateX(-25vw)}to{transform:translateX(125vw)}}

/* mgła (miękkie pasmo) */
#wxAtmos .wx-fog{position:absolute;left:-10%;right:-10%;height:40%;
  background:linear-gradient(90deg,transparent,rgba(180,190,205,.16),transparent);
  filter:blur(8px);animation:wxDrift 40s linear infinite}

/* redukcja ruchu: bez spadających cząstek (nie zawisają w połowie) */
@media(prefers-reduced-motion:reduce){
  #wxAtmos .wx-rain,#wxAtmos .wx-snow,#wxAtmos .wx-cloud,#wxAtmos .wx-fog{display:none}
  #wxAtmos .wx-star{animation:none;opacity:.5}
}

/* ---------- chip pogody w nagłówku (obok zegara) ---------- */
.wx-chip{
  font-family:"JetBrains Mono",monospace;font-size:.85rem;font-weight:500;line-height:1;
  color:var(--ink-dim);background:var(--bg-panel);border:1px solid var(--line-bright);
  border-radius:8px;padding:.46em .55em;cursor:pointer;display:inline-flex;align-items:center;gap:.35em;
  white-space:nowrap;opacity:.85;transition:opacity .2s,color .2s,border-color .2s}
.wx-chip:hover,.wx-chip[aria-expanded="true"]{opacity:1;color:var(--amber);border-color:var(--amber-dim)}
.wx-chip .wx-ico{font-size:1em}
.wx-chip .wx-temp b{color:var(--ink);font-weight:700}

/* dodatkowe wartości widoczne od razu na pasku (odczuwalna / wiatr / wilgotność) */
.wx-chip .wx-fields{display:inline-flex;align-items:center;gap:.55em;margin-left:.15em}
.wx-chip .wx-f{display:inline-flex;align-items:baseline;gap:.3em;white-space:nowrap;
  padding-left:.55em;border-left:1px solid var(--line-bright)}
.wx-chip .wx-f i{font-style:normal;font-size:.62em;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint)}
/* graficzna strzałka kierunku wiatru (N do góry) */
.wx-arrow{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;
  vertical-align:-0.12em;color:var(--amber)}
.wx-arrow svg{width:.72em;height:.9em;fill:currentColor}
/* Dopiero na wąskim ekranie (telefon PIONOWO) chowamy pola, żeby nie rozpychać
   nagłówka. Telefon POZIOMO (~844 px, główne urządzenie) pokazuje wszystko —
   tytuł „Gryfice ↔ Trzebiatów" i tak skraca się wielokropkiem, robiąc miejsce. */
@media (max-width:600px){ .wx-chip .wx-f.wx-opt{display:none} }
@media (max-width:460px){ .wx-chip .wx-fields{display:none} }   /* bardzo wąsko: sam temp + ikona */

/* ---------- panel szczegółów (fixed dropdown, jak menu ⚙) ---------- */
#wxPanel{
  position:fixed;right:.7rem;top:calc(env(safe-area-inset-top,0px) + 3rem);z-index:55;
  width:min(20rem,86vw);
  background:rgba(17,22,31,.97);border:1px solid var(--line-bright);border-radius:12px;
  padding:.85em .95em;color:var(--ink);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 12px 40px rgba(0,0,0,.5);
  opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;transform-origin:top right;
  transition:opacity .2s ease,transform .2s ease}
#wxPanel.open{opacity:1;transform:none;pointer-events:auto}

#wxPanel .wx-head{display:flex;align-items:center;gap:.5em;margin-bottom:.6em}
#wxPanel .wx-head .wx-big{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:2.1rem;
  color:var(--ink);line-height:1}
#wxPanel .wx-head .wx-emoji{font-size:1.8rem;line-height:1}
#wxPanel .wx-head .wx-desc{font-family:"Barlow",sans-serif;font-size:.82rem;color:var(--ink-dim);
  margin-left:auto;text-align:right;line-height:1.2;max-width:9em}

#wxPanel .wx-grid{display:grid;grid-template-columns:1fr 1fr;gap:.4em .8em;
  font-family:"JetBrains Mono",monospace;font-size:.76rem;color:var(--ink-dim)}
#wxPanel .wx-grid .k{color:var(--ink-faint);letter-spacing:.04em}
#wxPanel .wx-grid b{color:var(--ink);font-weight:600}

#wxPanel .wx-sun{display:flex;justify-content:space-between;margin-top:.7em;padding-top:.6em;
  border-top:1px dashed var(--line);font-family:"JetBrains Mono",monospace;font-size:.72rem;
  color:var(--ink-faint)}
#wxPanel .wx-sun b{color:var(--amber-dim);font-weight:600}
#wxPanel .wx-foot{margin-top:.5em;font-family:"JetBrains Mono",monospace;font-size:.6rem;
  letter-spacing:.06em;color:var(--ink-faint);text-transform:uppercase;text-align:right}
#wxPanel .wx-foot.err{color:var(--red)}

/* ============================================================
   STACJA POGODOWA w karcie głównej (gdy „tor wolny") — środek karty zamiast
   pustego miejsca wypełnia duża pogoda. Wsuwa się pionowo (kaskada) po zjeździe
   wszystkich pociągów; wjazd pociągu → app.js wraca do trybu tablicy.
   ============================================================ */
/* W trybie stacji pogodowej nie pokazujemy nagłówka „STAN ODCINKA" nad kartą —
   stan odcinka ma własny boks (a) wewnątrz stacji. */
.now-card:has(.idle.wx-station) .eyebrow{display:none}

.now-card .idle.wx-station{
  flex:1;align-items:stretch;justify-content:space-between;text-align:left;
  gap:.55rem;padding:.1rem 0 0;width:100%;
}
/* Każda sekcja to osobny, czytelny BOKS — delikatne tło + obwódka je oddzielają,
   a justify-content:space-between „rozstrzeliwuje" je na wysokość karty. */
.wx-station .wx-box{background:rgba(255,255,255,.025);border:1px solid var(--line);
  border-radius:11px;padding:.55rem .8rem}

/* (b) DZIŚ — GŁÓWNY boks pogody: data + wielka ikona/temperatura + wschód/zachód
   obok + dane. Rozstrzelony i czytelny z daleka (boks „Tor wolny" usunięty — miejsce
   oddane tutaj). */
.wx-today{display:flex;flex-direction:column;gap:.7rem;justify-content:center}
.wx-st-date{font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:1.75rem;letter-spacing:.01em;color:var(--amber);line-height:1}

/* HERO: NAJWAŻNIEJSZE — wielka ikona + temperatura; wschód/zachód po prawej przy temp. */
.wx-hero{display:flex;align-items:center;gap:1rem}
.wx-hero .wx-hero-ico{font-size:6.4rem;line-height:1;flex:none}
.wx-hero .wx-hero-temp{font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:8rem;line-height:.8;color:var(--ink)}
.wx-hero .wx-hero-sub{font-family:"Barlow",sans-serif;font-size:1.45rem;color:var(--ink-dim);
  line-height:1.2;align-self:center;font-weight:500}
/* wschód/zachód: mniejsze, przy dużej temperaturze z prawej, bez napisu — sama
   ikonka + jaśniejsza godzina */
.wx-sun-side{margin-left:auto;align-self:center;display:flex;flex-direction:column;gap:.25em;
  text-align:right;font-family:"JetBrains Mono",monospace;font-size:1.2rem;color:var(--ink-dim);
  line-height:1.15;flex:none}
.wx-sun-side .wx-sun-i{white-space:nowrap}
.wx-sun-side .wx-sun-i b{color:var(--amber);font-weight:700;margin-left:.15em}

/* DODATKOWE DANE — JEDEN rząd „ikona + duża wartość + mniejsza wartość", bez opisów
   tekstowych. Grupy: wiatr/porywy, wilgotność/zachmurzenie, opady/widoczność. */
.wx-st-info{display:flex;flex-flow:row wrap;align-items:center;gap:.4rem 1.9rem;
  font-family:"JetBrains Mono",monospace;border-top:1px solid var(--line);padding-top:.6rem}
.wx-st-info .wx-mg{display:inline-flex;align-items:baseline;gap:.45em;white-space:nowrap}
.wx-st-info .wx-mg .wx-mg-ic{font-size:1.55rem;line-height:1;align-self:center}
.wx-st-info .wx-mg .wx-mg-v{font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:2.4rem;line-height:.9;color:var(--ink)}
.wx-st-info .wx-mg .wx-mg-v .wx-arrow{font-size:.5em;vertical-align:-0.05em}
.wx-st-info .wx-mg .wx-mg-s{font-size:1.1rem;color:var(--ink-faint)}

/* (c) PROGNOZA — 3 kolejne dni w rzędzie: dzień + ikonka + temperatura */
.wx-forecast{display:flex;gap:.4rem}
.wx-forecast .wx-fc-day{flex:1;display:flex;flex-direction:column;align-items:center;gap:.1rem;
  min-width:0}
.wx-forecast .wx-fc-day + .wx-fc-day{border-left:1px solid var(--line)}
.wx-fc-dow{font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-faint)}
.wx-fc-ico{font-size:1.9rem;line-height:1.05}
.wx-fc-t{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1.5rem;color:var(--ink);
  line-height:1}

/* (d) URODZINY — dziś (dodatek do pogody) */
.wx-st-alm{display:flex;flex-direction:column;gap:.3rem}
.wx-st-alm .wx-alm{font-family:"Barlow",sans-serif;font-size:1.1rem;color:var(--ink-dim);line-height:1.25}
.wx-st-alm .wx-alm i{font-style:normal;font-family:"JetBrains Mono",monospace;font-size:.62em;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-right:.5em}
/* „urodziny dziś" — kompaktowy, wygaszony pasek; avatary em-owe (skalują się z fontem). */
.wx-st-alm .wx-alm-fr{display:flex;align-items:center;flex-wrap:wrap;gap:.3em .8em;font-size:.92rem}
.wx-friends{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.4em 1em}
.wx-friend{display:inline-flex;align-items:center;gap:.45em}
.wx-friend .wx-av{width:2em;height:2em;border-radius:50%;object-fit:cover;flex:none;
  border:1px solid var(--line-bright);background:var(--bg-panel)}
.wx-friend .wx-av-x{display:inline-flex;align-items:center;justify-content:center;font-size:1.1em;border:none}
.wx-friend .wx-fn{color:var(--ink);font-weight:400}
.wx-friend .wx-fn small{color:var(--ink-faint);font-weight:400}
.wx-st-alm .wx-remind{color:var(--amber);font-weight:600}

/* WOW-przejście pociąg ⇄ stacja pogodowa: CAŁA karta obraca się jak wielka klapka
   tablicy dworcowej (split-flap) — spada z górnej krawędzi z lekkim „odbiciem". */
@keyframes wxCardFlip{
  0%  { transform:perspective(1600px) rotateX(-90deg); opacity:0; filter:blur(3px) }
  45% { opacity:1 }
  72% { transform:perspective(1600px) rotateX(10deg);  filter:blur(0) }
  100%{ transform:perspective(1600px) rotateX(0);       opacity:1 }
}
.now-card.wx-flip{ transform-origin:top center; backface-visibility:hidden; z-index:2;
  animation:wxCardFlip .72s cubic-bezier(.34,1.15,.44,1) both; }
@media(prefers-reduced-motion:reduce){ .now-card.wx-flip{ animation:none } }