/* =====================================================================
   EO36 Energy -- arkusz stylow dashboardu zbiorczego.

   Paleta jest ta sama, co w dashboardach Pstryk, Deye i Solcast (jeden
   zestaw barw, walidowany pod kontrast WCAG i slepote barw), dzieki czemu
   ekran na scianie wyglada jak przedluzenie tamtych stron, a nie obcy
   element. Jasna i ciemna wersja sa dobrane osobno, wg roli -- ciemna nie
   jest automatycznym odwroceniem jasnej.

   Uklad: jedna kolumna na telefonie (pion), siatka 2x2 na tablecie
   (poziomo). Wartosci liczbowe skaluja sie przez clamp(), wiec ten sam
   ekran czyta sie i z 6 cali, i z 15 cali.
   ===================================================================== */

body.viz-root {
  color-scheme: light;
  --strona:         #f9f9f7;
  --powierzchnia:   #fcfcfb;
  --tekst-1:        #0b0b0b;
  --tekst-2:        #52514e;
  --tekst-3:        #898781;
  --siatka:         #e1e0d9;
  --os:             #c3c2b7;
  --obramowanie:    rgba(11, 11, 11, 0.10);
  --cien:           0 1px 2px rgba(11, 11, 11, 0.04);
  --akcent:         #2a78d6;
  --akcent-tekst:   #2160b0;
  --aktywny-tlo:    #e2e9f2;
  --aktywny-obram:  #9ec1ea;
  --szary-tlo:      #e1e0d9;
  --tor-paska:      #e2e9f2;
  --pasek-limit:    #d03b3b;
  --seria-1:        #2a78d6;   /* dach wschodni, linia ceny sprzedazy */
  --seria-2:        #eb6834;   /* dach zachodni */
  --seria-3:        #0d9488;   /* szacowana produkcja */
  --status-dobry:   #0ca30c;
  --status-zly:     #d03b3b;
  --status-uwaga:   #fab219;
  --kropka-uwaga:   #b87a00;   /* ciemniejszy bursztyn: na jasnym tle czytelny */
  --neutralny:      #898781;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) body.viz-root {
    color-scheme: dark;
    --strona:         #0d0d0d;
    --powierzchnia:   #1a1a19;
    --tekst-1:        #ffffff;
    --tekst-2:        #c3c2b7;
    --tekst-3:        #898781;
    --siatka:         #2c2c2a;
    --os:             #383835;
    --obramowanie:    rgba(255, 255, 255, 0.10);
    --cien:           none;
    --akcent:         #3987e5;
    --akcent-tekst:   #5da0ec;
    --aktywny-tlo:    #202e3e;
    --aktywny-obram:  #284b75;
    --szary-tlo:      #2c2c2a;
    --tor-paska:      #202e3e;
    --pasek-limit:    #e05c5c;
    --seria-1:        #3987e5;
    --seria-2:        #d95926;
    --seria-3:        #19a38b;
  }
}
:root[data-theme="dark"] body.viz-root {
  color-scheme: dark;
  --strona:         #0d0d0d;
  --powierzchnia:   #1a1a19;
  --tekst-1:        #ffffff;
  --tekst-2:        #c3c2b7;
  --tekst-3:        #898781;
  --siatka:         #2c2c2a;
  --os:             #383835;
  --obramowanie:    rgba(255, 255, 255, 0.10);
  --cien:           none;
  --akcent:         #3987e5;
  --akcent-tekst:   #5da0ec;
  --aktywny-tlo:    #202e3e;
  --aktywny-obram:  #284b75;
  --szary-tlo:      #2c2c2a;
  --tor-paska:      #202e3e;
  --pasek-limit:    #e05c5c;
  --seria-1:        #3987e5;
  --seria-2:        #d95926;
  --seria-3:        #19a38b;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.viz-root {
  background: var(--strona);
  color: var(--tekst-1);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

/* --- naglowek -------------------------------------------------------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  max-width: 1400px; margin: 0 auto; padding: 12px 16px 4px;
}
.topbar h1 { font-size: 19px; margin: 0; font-weight: 650; letter-spacing: 0.01em; }
.topbar h1 .znaczek { color: var(--tekst-3); font-weight: 500; }
.topbar-status {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13px; color: var(--tekst-2);
}
.zegar {
  font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600;
  color: var(--tekst-1);
}
/* --- data, godzina i slonce ------------------------------------------- */
/* "Kiedy" i "slonce" to dwie NIEPODZIELNE grupy: rozjechany w polowie
   wiersz "wschod ... zachod" nie znaczy nic, a data bez godziny to polowa
   informacji. Kazda jest wiec inline-flex bez zawijania i przy ciasnym
   naglowku schodzi w calosci do nastepnej linii. */
.kiedy {
  display: inline-flex; align-items: baseline; gap: 8px;
  color: var(--tekst-2);
}
.slonce {
  display: inline-flex; align-items: center; gap: 11px;
  color: var(--tekst-2);
}
/* Slonce bierze kolor glownej ikony pogody (--akcent-tekst), a nie bursztyn:
   bursztyn w tej palecie znaczy "uwaga" (--kropka-uwaga) i swiecilby
   ostrzezeniem w naglowku, w ktorym nic sie nie dzieje. */
.slonce-glif { width: 15px; height: 15px; flex: none; color: var(--akcent-tekst); }
.slonce-glif svg { display: block; width: 100%; height: 100%; }
/* Dlugosc dnia jest najwazniejsza liczba w tej grupie, wiec dostaje ten sam
   stopien co zegar; godziny wschodu i zachodu zostaja ciche. */
.slonce-dlugosc {
  color: var(--tekst-1); font-weight: 600; font-variant-numeric: tabular-nums;
}
.slonce-godz { display: inline-flex; align-items: baseline; gap: 4px; }
.slonce-etykieta { color: var(--tekst-3); }
.kropka {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--tekst-3); flex: none;
}
.kropka.ok    { background: var(--status-dobry); }
.kropka.uwaga { background: var(--kropka-uwaga); }
.kropka.blad  { background: var(--status-zly); }
button.przycisk {
  font: inherit; font-size: 13px; color: var(--tekst-2);
  background: var(--powierzchnia); border: 1px solid var(--obramowanie);
  border-radius: 8px; padding: 5px 10px; cursor: pointer;
}
button.przycisk:hover { color: var(--tekst-1); }
form.wyloguj { margin: 0; }

.noscript-info {
  max-width: 1400px; margin: 0 auto; padding: 8px 16px;
  font-size: 13.5px; color: var(--tekst-2);
}

/* --- siatka kart ------------------------------------------------------ */
main.siatka {
  max-width: 1400px; margin: 0 auto; padding: 8px 16px 24px;
  display: grid; gap: 14px;
}
.karta {
  background: var(--powierzchnia); border: 1px solid var(--obramowanie);
  border-radius: 12px; padding: 14px 16px; box-shadow: var(--cien);
  min-width: 0;
  /* Karta jest wlasnym kontenerem zapytan: jej uklad zalezy od tego, ile ma
     miejsca ONA, a nie cala strona. Dzieki temu ten sam arkusz obsluguje
     telefon (karta ~360 px), kolumne tabletu (~630 px) i polowe 27-calowego
     monitora, bez zgadywania rozdzielczosci w @media. */
  container-type: inline-size;
}
.karta-naglowek {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.karta-naglowek h2 { font-size: 15px; margin: 0; font-weight: 650; }
.zrodlo {
  font-size: 11.5px; color: var(--tekst-2); border: 1px solid var(--obramowanie);
  border-radius: 999px; padding: 1px 8px;
}
.karta-naglowek .stan-zrodla {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--tekst-2);
}
.pusto-karta { font-size: 13.5px; color: var(--tekst-3); padding: 6px 0; }

/* --- liczba-hero + kafle --------------------------------------------- */
/* Domyslnie (waska karta): hero nad kaflami. Kafel ma min. 132 px, wiec
   dopiero karta szersza niz ~520 px zmiesci obok hero sensowna siatke. */
.hero-siatka {
  display: grid; grid-template-columns: 1fr;
  gap: 14px; align-items: stretch;
}
@container (min-width: 520px) {
  .hero-siatka {
    grid-template-columns: minmax(158px, 0.85fr) 2.4fr;
    align-items: center;
  }
}
.hero { display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.hero-liczba {
  font-size: clamp(34px, 5.4vw, 52px); font-weight: 650;
  letter-spacing: -0.02em; line-height: 1.05; font-variant-numeric: tabular-nums;
}
.hero-jednostka { font-size: 12.5px; color: var(--tekst-2); }
.hero-odznaka {
  margin-top: 7px; display: flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--tekst-2); flex-wrap: wrap;
}
.symbol { font-size: 12px; line-height: 1; }
.symbol.dobry     { color: var(--status-dobry); }
.symbol.zly       { color: var(--status-zly); }
.symbol.uwaga     { color: var(--kropka-uwaga); }
.symbol.neutralny { color: var(--neutralny); }

.kpi-siatka {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 9px;
}
/* Falownik ma dokladnie cztery kafle -- przy trzech kolumnach czwarty
   spadalby samotnie do drugiego rzedu i karta rosla o nic. Ceny tez ida
   po cztery w rzedzie: osiem kafli to dwa rzedy zamiast trzech. */
@container (min-width: 500px) {
  .karta-deye .kpi-siatka { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container (min-width: 560px) {
  .karta-pstryk .kpi-siatka { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.kafel {
  border: 1px solid var(--obramowanie); border-radius: 10px;
  padding: 8px; background: var(--powierzchnia);
  display: flex; flex-direction: column; min-width: 0;
  /* Kafel jest wlasnym kontenerem: wielkosc tekstu zalezy od tego, ile ma
     ON szerokosci, a nie od szerokosci karty. Dzieki temu kafel 105 px
     (osiem kafli Pstryka w czterech kolumnach) miesci "13,16 kWh" bez
     ucinania, a kafel 174 px na telefonie dostaje wieksze cyfry. */
  container-type: inline-size;
}
.kafel .etykieta { font-size: 11px; color: var(--tekst-2); }
.kafel .wartosc {
  font-size: 17px; font-weight: 600; margin-top: 2px;
  letter-spacing: -0.01em; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.kafel .dopisek {
  font-size: 10.5px; color: var(--tekst-3); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@container (min-width: 128px) {
  .kafel .etykieta { font-size: 11.5px; }
  .kafel .wartosc { font-size: 19px; }
  .kafel .dopisek { font-size: 11.5px; }
}
@container (min-width: 170px) {
  .kafel .wartosc { font-size: 21px; }
}
/* Jednostka mniejszym stopniem: liczba zostaje duza i czytelna z drugiego
   konca pokoju, a "kWh" nie zabiera miejsca, ktorego w kaflu 105 px nie ma. */
.kafel .wartosc .jedn, .pasek-wartosc .jedn {
  font-size: 0.7em; font-weight: 500; color: var(--tekst-2);
}

/* --- paski (SOC baterii, pobor z sieci) ------------------------------- */
/* Pojedyncza wartosc wzgledem limitu to miernik, nie wykres: dlugosc
   wypelnienia niesie informacje, kolor jest tylko akcentem. Tor jest
   jasniejszym stopniem tego samego koloru, wiec stan czyta sie na calej
   dlugosci paska, takze przy malym wypelnieniu. */
.kafel-pasek { margin-top: 9px; gap: 7px; }
.pasek-naglowek {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.pasek-wartosc { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pasek-tor { height: 11px; border-radius: 6px; overflow: hidden; background: var(--tor-paska); }
.pasek-wypelnienie {
  height: 100%; width: 0; background: var(--akcent); border-radius: 6px;
  transition: width 220ms ease, background-color 220ms ease;
}
.pasek-wypelnienie.przekroczenie { background: var(--pasek-limit); }

/* --- tryb pracy falownika -------------------------------------------- */
/* Kompaktowo: na scianie to jeden z wielu wskaznikow, nie bohater ekranu. */
.praca {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 8px 12px; margin-bottom: 10px;
  border-radius: 10px; border: 1px solid transparent;
  background: var(--szary-tlo); font-size: 15px;
}
.praca.aktywne {
  background: var(--aktywny-tlo); border-color: var(--aktywny-obram);
  color: var(--akcent-tekst); font-size: 17px; font-weight: 650;
  letter-spacing: -0.01em;
}
.praca.wyszarzone { color: var(--tekst-2); font-weight: 500; }

/* --- pasek ladowania EV (Tesla) --------------------------------------- */
/* Jedna informacja: laduje albo nie. Ikona i slowo niosa znaczenie, kolor
   tylko je wzmacnia -- czerwony i zielony sa nierozroznialne przy
   deuteranopii, wiec kolor nigdy nie jest jedynym nosnikiem. */
.ladowanie {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--obramowanie); background: var(--powierzchnia);
}
.ladowanie .ikona { width: 26px; height: 26px; flex: none; }
.ladowanie .opis { font-size: 16px; font-weight: 600; }
.ladowanie .prad {
  margin-left: auto; font-size: 15px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--tekst-2);
}
.ladowanie.tak {
  background: var(--status-dobry); border-color: var(--status-dobry);
  color: #0b0b0b;
}
.ladowanie.tak .prad { color: #0b0b0b; }
.ladowanie.nie { background: var(--szary-tlo); color: var(--tekst-2); }
.ladowanie.brak { background: var(--szary-tlo); color: var(--tekst-2); }

/* --- karta pogody (Open-Meteo) ---------------------------------------- */
/* Warunki biezace to jedna wyrozniona linijka, a pod nia szesc kafli dni.
   Ikony sa inline SVG dziedziczace currentColor -- CSP dashboardu dopuszcza
   tylko wlasne pliki i data:, wiec zadnych obrazkow z zewnatrz tu nie ma. */
.pg-teraz {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: 10px;
  background: var(--aktywny-tlo); border: 1px solid var(--aktywny-obram);
}
.pg-ikona { width: 42px; height: 42px; flex: none; color: var(--akcent-tekst); }
.pg-ikona svg { display: block; width: 100%; height: 100%; }
/* Temperatura i opis w jednej linii, wyrownane do linii pisma. W kolumnie
   (jak bylo) sam opis dokladal ~19 px wysokosci, ktorych na 1280x800
   brakowalo w calym ukladzie; w rzedzie liczy sie tylko wyzszy z dwoch
   elementow, czyli sama liczba. flex-wrap zostaje na wypadek waskiej karty,
   gdzie "13° Umiarkowany deszcz" nie ma jak sie zmiescic obok siebie. */
.pg-teraz-opis { min-width: 0; display: flex; align-items: baseline;
  flex-wrap: wrap; gap: 2px 8px; }
.pg-temp {
  font-size: 30px; font-weight: 650; line-height: 1.05;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.pg-stan { font-size: 12.5px; color: var(--tekst-2); }
.pg-teraz-bok {
  margin-left: auto; flex: none; text-align: right;
  font-size: 12px; color: var(--tekst-3);
}
.pg-wiatr {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600; color: var(--tekst-1);
  font-variant-numeric: tabular-nums;
}
.pg-wiatr svg { width: 14px; height: 14px; flex: none; color: var(--tekst-2); }

/* Trzy kolumny to najmniejsza sensowna siatka na telefonie (karta ~350 px
   daje ~110 px na kafel). Dopiero przy 420 px szesc dni miesci sie w jednym
   rzedzie -- i to jest wlasnie powod, dla ktorego prog jest w jednostkach
   kontenera, a nie ekranu: na tablecie karta jest waska kolumna, mimo ze
   ekran ma 1280 px. */
.pg-dni {
  display: grid; gap: 7px; margin-top: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pg-dzien {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 0; padding: 6px 5px; text-align: center;
  border: 1px solid var(--obramowanie); border-radius: 10px;
}
.pg-dzien.dzis { background: var(--aktywny-tlo); border-color: var(--aktywny-obram); }
.pg-dzien-nazwa {
  max-width: 100%; font-size: 11px; color: var(--tekst-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pg-dzien.dzis .pg-dzien-nazwa { color: var(--akcent-tekst); font-weight: 600; }
.pg-dzien-ikona { width: 26px; height: 26px; color: var(--tekst-2); }
.pg-dzien-ikona svg { display: block; width: 100%; height: 100%; }
.pg-dzien-temp {
  font-size: 17px; font-weight: 650; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.pg-dzien-zakres {
  font-size: 10.5px; color: var(--tekst-3); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* align-self: stretch, nie domyslne "center" z kafla: przy center wiersz
   wiatru dostaje szerokosc fit-content, ktora w kolumnowym flexie wychodzi
   MIĘKSZA od swojej tresci -- "13,6 kn" kurczylo sie do 41 px i liczba
   zachodzila na glif. Rozciagniety na cala szerokosc kafla ma zapas. */
.pg-dzien-wiatr {
  display: flex; align-items: center; justify-content: center; gap: 3px;
  align-self: stretch; min-width: 0;
  font-size: 11px; color: var(--tekst-2); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pg-dzien-wiatr svg { width: 11px; height: 11px; flex: none; color: var(--tekst-3); }
.pg-dzien-porywy {
  font-size: 10px; color: var(--tekst-3); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Porywy to szczegol, nie druga rownorzedna liczba: na wezszym kaflu
   schodza z drogi, bo wiatr sredni jest wazniejszy niz jego szczyt. */
@container (max-width: 620px) {
  .pg-dzien-porywy { display: none; }
}
/* Szesc kafli dopiero od 420 px: przy trzech kafel ma ~110 px, przy szesciu
   ~86 px, a tyle wlasnie trzeba na "13,6 kn" z glifem. */
@container (min-width: 420px) {
  .pg-dni { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pg-ikona { width: 52px; height: 52px; }
  .pg-temp { font-size: 36px; }
  .pg-stan { font-size: 13.5px; }
  .pg-teraz-bok { font-size: 12.5px; }
}

/* --- wykresy ---------------------------------------------------------- */
.wykres-owijka { position: relative; width: 100%; overflow: hidden; }
.wykres-ceny    { height: clamp(190px, 26vh, 250px); }
.wykres-prognoza { height: clamp(190px, 26vh, 250px); }
canvas { display: block; }
.pusto {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; text-align: center; padding: 0 20px;
  color: var(--tekst-3); font-size: 13.5px;
}
.pusto[hidden] { display: none; }
.legenda {
  display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px;
  color: var(--tekst-2); margin: 2px 0 8px;
}
.klucz { display: inline-flex; align-items: center; gap: 5px; }
.klucz-slupek { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }
.klucz-linia  { width: 18px; height: 2px; border-radius: 1px; display: inline-block; }
.klucz-wstega { width: 18px; height: 11px; border-radius: 2px; display: inline-block; }

/* --- stopka ----------------------------------------------------------- */
footer {
  max-width: 1400px; margin: 0 auto; padding: 0 16px 18px;
  font-size: 12px; color: var(--tekst-2); text-align: center;
}
footer .blad-tekst { color: var(--status-zly); }

/* Bez przygaszania przy odswiezaniu: dane zmieniaja sie co najwyzej kilka
   razy na minute, wiec miganie opacity bylo by tylko szumem. */

/* --- tablet poziomo: siatka 2x2 --------------------------------------- */
@media (min-width: 1000px) {
  body.viz-root { font-size: 15.5px; }
  /* Prawa kolumna ma dzis trzy karty: falownik, waski pasek ladowania i pod
     nim pogode. Solcast obejmuje dwa wiersze, wiec rosnie razem z nimi --
     wysokosc, ktora wczesniej marnowal rozciagniety pasek Tesli, dostaje
     teraz wykres PV. */
  main.siatka {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    grid-template-areas:
      "pstryk  deye"
      "solcast tesla"
      "solcast pogoda";
    align-items: start;
  }
  .karta-pstryk  { grid-area: pstryk; }
  .karta-deye    { grid-area: deye; }
  .karta-solcast { grid-area: solcast; }
  .karta-tesla   { grid-area: tesla; }
  .karta-pogoda  { grid-area: pogoda; }
}

/* Ekran na scianie: calosc ma sie zmiescic bez przewijania. Siatka dostaje
   dokladnie tyle wysokosci, ile zostaje po naglowku i stopce, a wykresy
   rosna, zeby wypelnic karty. Rzad nie kurczy sie ponizej swojej tresci --
   gdyby ekran byl naprawde niski, przewija sie sam main, wiec zegar i stopka
   zostaja na miejscu. Dlatego body ma TU sztywna wysokosc, a nie min-height:
   przy min-height roslo by razem z trescia i przewijalaby sie cala strona.
   Prog 560 px wysokosci odsiewa telefony w poziomie, gdzie ten podzial
   zostawilby karty bez miejsca na cokolwiek -- tam obowiazuje zwykly
   przewijany dokument. */
@media (min-width: 1000px) and (min-height: 560px) {
  body.viz-root { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
  .topbar, footer, .noscript-info { flex: none; }
  /* W kontenerze flex "margin: 0 auto" wylacza rozciaganie w poprzek osi --
     bez jawnego width:100% naglowek i siatka skurczylyby sie do szerokosci
     swojej tresci. */
  .topbar, main.siatka, footer, .noscript-info { width: 100%; }
  /* Rama strony tez oddaje miejsce kartom. Na ekranie na scianie naglowek
     i stopka to jedna linijka kazdy -- 18 px odstepu pod stopka i 24 px pod
     siatka niczego nie poprawialy, a razem z gornym marginesem zabieraly
     ~40 px, ktorych potem brakowalo karcie pogody. */
  .topbar { padding: 8px 16px 2px; }
  footer { padding: 0 16px 8px; }
  main.siatka {
    flex: 1 1 auto; min-height: 0; overflow: auto;
    padding: 8px 16px 10px;
    /* Wiersz srodkowy to sam pasek Tesli -- jego wysokosc jest stala i znana
       (max-content), wiec nie bierze udzialu w podziale. Skrajne dziela
       reszte po polowie, ale kazdy ma podloge min-content: gdy okno jest
       nizsze, niz wynosi suma minimow, grid rozciaga sie PONAD okno i
       przewija sie sam main, zamiast sciskac karty.
       Podloga jest tu istotna, bo bez niej "1fr" rozdaje po rowno takze
       wtedy, gdy miejsca brakuje -- a wtedy wiersz zbieral sie do 30 px
       i pasek Tesli wylewal sie z karty (cicha awaria ukladu, widoczna
       tylko na ekranie).
       Skrajne wiersze musza byc "1fr", a nie "max-content": przy
       max-content wiersz pierwszy nigdy nie rosnie, wiec na 1920x1200
       wykres cen stal na podlodze 71 px, podczas gdy wykres PV (w karcie
       Solcasta, ktora obejmuje wiersze 2 i 3) rozciagal sie do 489 px. */
    grid-template-rows: minmax(min-content, 1fr) max-content minmax(min-content, 1fr);
    align-items: stretch;
  }
  .karta { display: flex; flex-direction: column; min-height: 0; padding: 10px 16px; }
  .karta > [id$="-tresc"] { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
  .hero-siatka, .legenda, .karta-naglowek, .praca, .pasek-naglowek { flex: none; }
  /* Wykres zabiera resztke wysokosci karty; min-height chroni go przed
     zniknieciem, gdy kafelki urosna (dluga nazwa, wieksza czcionka).
     Wysokosc ustawiamy na OPAKOWANIU, nigdy na kanwie: Chart.js sam
     rozciaga kanwe do rodzica, a jednoczesne height:100% na kanwie i
     flex-grow na opakowaniu tworzy petle zmiany rozmiaru (kanwa rosnie,
     opakowanie rosnie, kanwa rosnie...). */
  /* To jest PODLOGA, nie wysokosc: opakowanie ma flex: 1 1 0, wiec na
     wyzszym ekranie wykres i tak rosnie. Na 1280x800 wiazacym ograniczeniem
     okazal sie Solcast -- jego karta obejmuje wiersze 2 i 3, wiec to jego
     min-content (410 px) wyznaczal ich sume, a nie pogoda (254 px). 76 px
     to wysokosc, na ktorej slupki, linia i os sa jeszcze czytelne z kilku
     metrow; kazdy piksel wiecej wypychal calosc poza okno. */
  .wykres-owijka { flex: 1 1 0; min-height: 70px; }
  .wykres-ceny, .wykres-prognoza { height: auto; min-height: 70px; }
  /* UWAGA, nie poszerzac tu kolumny hero Solcasta. Plakietka jest dluga
     ("szacunki nieaktualne · 3,2 h temu · p10-p90: 0,73-3,53 kW") i kusi,
     zeby dac jej wiecej miejsca, ale kafelki obok ida wtedy na
     repeat(auto-fit, minmax(132px, 1fr)): kazde 34 px zabrane z ich kolumny
     to progu 3x132+2x9 = 414 px ubytek i piec kafli spada z dwoch rzedow na
     trzy. Karta rosla wtedy z 410 do 472 px -- czyli "poprawka" na plakietke
     kosztowala wiecej, niz dawala. Wysokosc bierzemy z legendy i wykresu. */
  /* Cztery pozycje legendy Solcasta potrzebuja 565 px, a karta ma 550 px
     miejsca -- brakuje 15 px i legenda zawijala sie do dwoch linii (52 px
     zamiast 26 px). Zbiorczo 12 px pisma i odstep 10 px mieszcza je w jednej
     linii, a na wykres zostaje wiecej miejsca. */
  .legenda { font-size: 12px; gap: 10px; }
  /* Pasek ladowania to jedna informacja -- "laduje / nie laduje" -- i tyle
     miejsca ma zajmowac. Wczesniej rosl do 200 px i centrowal sie w karcie,
     przez co sam zabieral pol prawej kolumny; dzis jego wiersz jest "auto",
     a pasek siedzi tuz pod naglowkiem. */
  /* ...a cala karta to jedna linia: tytul z kropka stanu po lewej, pasek po
     prawej. Naglowek nad paskiem to dodatkowe ~40 px czystej ramy na karte,
     ktora niesie jedno slowo -- "laduje / nie laduje". */
  .karta-tesla { flex-direction: row; align-items: center; gap: 12px; }
  .karta-tesla .karta-naglowek { flex: none; margin-bottom: 0; }
  .karta-tesla .ladowanie { flex: 1 1 auto; min-width: 0; padding: 6px 12px; }
  .karta-tesla .ladowanie .ikona { width: 22px; height: 22px; }
  .karta-tesla .ladowanie .opis { font-size: 15px; }
  .karta-tesla .ladowanie .prad { font-size: 13px; }
  /* Karta pogody rosnie razem z wierszem: kafle dni rozciagaja sie na cala
     zostala wysokosc i centruja swoja tresc, zamiast zostawiac pod soba
     pusta plame. */
  .karta-pogoda .pg-dni { flex: 1 1 auto; align-content: stretch; }
  .karta-pogoda .pg-dzien { justify-content: center; }
}

/* --- strona logowania -------------------------------------------------- */
.login-ekran {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
}
.login-karta {
  width: 100%; max-width: 360px;
  background: var(--powierzchnia); border: 1px solid var(--obramowanie);
  border-radius: 12px; box-shadow: var(--cien); padding: 22px 20px 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.login-tytul { font-size: 20px; margin: 0; font-weight: 650; letter-spacing: 0.01em; }
.login-tytul .znaczek { color: var(--tekst-3); font-weight: 500; }
.login-wstep { margin: -8px 0 0; font-size: 13px; color: var(--tekst-2); }

/* Komunikat bledu jest pusty przy pierwszym wejsciu -- pusty akapit nie
   moze zostawiac po sobie odstepu. */
.login-blad {
  margin: 0; font-size: 13px; color: var(--status-zly);
  border-left: 2px solid var(--status-zly); padding-left: 9px;
}
.login-blad:empty { display: none; }

.login-pole { display: flex; flex-direction: column; gap: 4px; }
.login-pole .etykieta { font-size: 12.5px; color: var(--tekst-2); }
.login-pole input {
  font: inherit; font-size: 16px;   /* 16px: Safari na iOS nie przybliza pola */
  color: var(--tekst-1); background: var(--strona);
  border: 1px solid var(--os); border-radius: 8px; padding: 9px 11px;
  width: 100%; min-width: 0;
}
.login-pole input:focus-visible {
  outline: 2px solid var(--akcent); outline-offset: 1px; border-color: var(--akcent);
}

.login-przycisk {
  font: inherit; font-size: 15px; font-weight: 600;
  color: #ffffff; background: var(--akcent);
  border: 0; border-radius: 8px; padding: 11px 14px; cursor: pointer;
  margin-top: 2px;
}
.login-przycisk:hover { background: var(--akcent-tekst); }
.login-przycisk:focus-visible { outline: 2px solid var(--tekst-1); outline-offset: 2px; }