/* Samorejestracja wedlug ram z Figmy, strona 05, wezly 104:3508 i 109:4178.
 *
 * ZASADA warstwy tokenow: zero wartosci koloru, promienia, wysokosci kontrolki
 * i rozmiaru pisma poza var(). Wymiary UKLADU (szerokosc menu, progi lamania,
 * wysokosci komponentow ze specyfikacji Figmy) stoja tu wprost, bo sa czescia
 * specyfikacji komponentu, nie tokenami.
 *
 * TRZY CHROME, wprost z ram:
 *   telefon  do 767    pasek tozsamosci 44 + dolna nawigacja, gestosc dotyk
 *   tablet   768-1099  pasek tozsamosci 48 + menu zwiniete 72, gestosc komfort
 *   komputer od 1100   belka 64 + menu 212, gestosc kompakt
 */

* { box-sizing: border-box; }

:root { --ch: var(--h-dotyk); --cpx: var(--px-dotyk); }
@media (min-width: 768px)  { :root { --ch: var(--h-komfort); --cpx: var(--px-komfort); } }
@media (min-width: 1100px) { :root { --ch: var(--h-kompakt); --cpx: var(--px-kompakt); } }

body {
  margin: 0; background: var(--bg); color: var(--t1);
  font-family: var(--font-interfejs);
  font-size: var(--ts-bazowy); line-height: var(--lh-ciagly);
  min-height: 100dvh; display: flex; flex-direction: column;
}

/* widocznosc wedlug chrome */
.tylko-komputer { display: none !important; }
.tylko-telefon { display: flex !important; }
.tylko-dotyk { display: flex !important; }
.tylko-od-tabletu { display: none !important; }
@media (min-width: 768px) {
  .tylko-telefon { display: none !important; }
  .tylko-od-tabletu { display: flex !important; }
}
@media (min-width: 1100px) {
  .tylko-komputer { display: flex !important; }
  .tylko-dotyk { display: none !important; }
}
.ukryty { display: none !important; }

/* --- belka gorna, spec 84:1922 ----------------------------------------- */
.belka {
  height: var(--belka-h); align-items: center; gap: var(--o-6);
  padding: 0 28px; background: var(--card); border-bottom: 1px solid var(--line);
}
.belka-marka { display: flex; align-items: center; gap: 10px; width: var(--menu-w); }
.belka .logo { width: 32px; height: 32px; border-radius: 6px; } /* wyjatek skali promieni: znak marki, spec v8.4 */
.marka-teksty { display: flex; flex-direction: column; }
.marka-nazwa { font-size: var(--ts-tytul); font-weight: 600; line-height: var(--lh-tytul); }
.marka-wersja, .marka-dopisek {
  font-family: var(--font-dane); font-size: var(--ts-mikro); font-weight: 500;
  color: var(--t3); letter-spacing: var(--ls-plakietka); line-height: var(--lh-zbity);
}
.szukajka {
  flex: 1; max-width: 360px; height: var(--h-komfort);
  display: flex; align-items: center; gap: var(--o-3); padding: 0 14px;
  background: var(--gh); border: 1px solid var(--line); border-radius: var(--r-kontrolka);
  color: var(--t3); cursor: not-allowed;
}
.polaczenie { display: flex; align-items: center; gap: var(--o-3); color: var(--t2); font-size: var(--ts-bazowy); }
.dzwonek {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: none; border: 0; border-radius: var(--r-kontrolka); cursor: not-allowed;
}
.awatar {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--gh2); border-radius: var(--r-pigulka);
  box-shadow: 0 0 0 1px var(--lm-obrys);
  font-family: var(--font-dane); font-size: var(--ts-bazowy); font-weight: 500;
}

/* --- pasek tozsamosci, spec 141:3661 ----------------------------------- */
.pasek-tozsamosci {
  height: 44px; align-items: center; gap: 10px; padding: 0 var(--o-5);
  background: var(--card); border-bottom: 1px solid var(--line);
}
@media (min-width: 768px) { .pasek-tozsamosci { height: 48px; } }
.pasek-tozsamosci .logo { width: 20px; height: 20px; border-radius: var(--r-drobne); }
.pasek-tozsamosci .marka-nazwa { font-size: var(--ts-bazowy); }
.online { color: var(--t2); font-size: var(--ts-meta); }
.rozpychacz { flex: 1; }

/* --- korpus i menu boczne, spec 86:1989 -------------------------------- */
.korpus { display: flex; flex: 1; min-height: 0; align-items: stretch; }
.menu {
  flex-direction: column; gap: 2px; width: var(--menu-w);
  padding: var(--o-5) var(--o-5) var(--o-6);
  background: var(--card); border-right: 1px solid var(--line);
}
.menu-grupa {
  font-family: var(--font-dane); font-size: var(--ts-meta); font-weight: 500;
  letter-spacing: var(--ls-etykieta); color: var(--t3);
  padding: var(--o-3) var(--o-4) var(--o-1);
}
.menu-pozycja {
  display: flex; align-items: center; gap: 10px;
  height: var(--pozycja-menu-h); padding: 0 var(--o-4);
  border-radius: var(--r-kontrolka); color: var(--t1); text-decoration: none;
  font-size: var(--ts-bazowy);
}
.menu-pozycja img { opacity: .7; }
.menu-pozycja.aktywna { background: var(--lm); color: var(--onlm); font-weight: 600; }
.menu-pozycja.aktywna img { opacity: 1; }
.menu-pozycja.nieaktywna { color: var(--t3); cursor: not-allowed; }
/* tablet: menu zwiniete 72, same ikony, spec: znikaja etykiety */
@media (min-width: 768px) and (max-width: 1099px) {
  .menu { width: var(--menu-w-zwiniete); padding-inline: var(--o-4); }
  .menu-grupa { display: none; }
  .menu-pozycja { justify-content: center; padding: 0; }
  .menu-pozycja span { display: none; }
}

/* --- panel ------------------------------------------------------------- */
.panel {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--o-5);
  padding: var(--o-6) var(--o-7); overflow-y: auto;
}
@media (max-width: 767px) { .panel { padding: var(--o-3) var(--o-5) var(--o-6); } }
.naglowek-panelu { display: flex; align-items: center; gap: var(--o-4); }
.tytul-display {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: var(--ts-display); line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
@media (max-width: 767px) {
  .tytul-display { font-family: var(--font-interfejs); font-weight: 600; font-size: var(--ts-tytul); }
}
.odstepnik { width: 10px; }

/* --- segment pigulkowy, spec 8:44 -------------------------------------- */
.segment { border: 1px solid var(--line); border-radius: var(--r-pigulka); padding: 1px; }
.segment button {
  height: 26px; padding: 0 13px; background: none; border: 0; cursor: pointer;
  border-radius: var(--r-pigulka);
  font-family: var(--font-dane); font-size: var(--ts-meta); font-weight: 500;
  letter-spacing: var(--ls-etykieta); color: var(--t3);
}
.segment button[aria-selected="true"] { background: var(--gh2); color: var(--t1); }

/* --- slot stanu czynnosci, spec 75:1527 -------------------------------- */
.slot { border-radius: var(--r-kontrolka); }
.slot.spoczynek {
  background: var(--card); border: 1px solid var(--line);
  padding: 14px var(--o-7);
}
.slot-podpowiedz { margin: 0; color: var(--t3); font-size: var(--ts-bazowy); }
.slot.w-toku {
  background: var(--lmt); border: 1px solid var(--lm-obrys);
  padding: 14px var(--o-7);
}
.slot.w-toku .slot-podpowiedz { display: none; }
.slot.w-toku .slot-w-toku { display: flex; align-items: center; gap: var(--o-5); }
.slot-tresc { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--o-2); }
.slot-naglowek { display: flex; align-items: center; gap: var(--o-3); }
.etykieta-mono {
  font-family: var(--font-dane); font-size: var(--ts-meta); font-weight: 500;
  letter-spacing: var(--ls-etykieta); color: var(--t1);
}
.karta-wykresu > .etykieta-mono { color: var(--t3); }
.puls { animation: puls 1.6s var(--ruch-krzywa) infinite; }
@keyframes puls { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.slot-nazwa {
  font-size: var(--ts-tytul); font-weight: 600; line-height: var(--lh-tytul);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.slot-meta { font-size: var(--ts-meta); color: var(--t3); }
.zegar {
  font-family: var(--font-dane); font-weight: 500;
  font-size: var(--ts-kpi); letter-spacing: var(--ls-kpi); line-height: var(--lh-display);
  font-variant-numeric: tabular-nums;
}
/* akcja glowna: limonka, spec Przycisk 42:335. Wysokosc 40 przy slocie
   komputera, 56 na dotyku jako akcja glowna, promien 16 przy 56. */
.przycisk-stop {
  display: flex; align-items: center; justify-content: center; gap: var(--o-3);
  height: var(--h-komfort); min-width: 88px; max-width: 320px; padding: 0 var(--px-komfort);
  background: var(--lm); color: var(--onlm); border: 0; border-radius: var(--r-kontrolka);
  font: inherit; font-weight: 600; font-size: var(--ts-tytul); cursor: pointer;
  transition: background var(--ruch-szybko) var(--ruch-krzywa);
}
.przycisk-stop:hover { background: var(--lm-hover); }
.przycisk-stop:active { background: var(--lm-active); }
/* dotyk: karta W TOKU, spec 75:1568. Uklad pionowy, zegar 48, STOP 56 z poswiata. */
@media (max-width: 767px) {
  .slot.w-toku { padding: var(--o-6); border-radius: var(--r-karta); }
  .slot.w-toku .slot-w-toku { flex-direction: column; }
  .slot-tresc { align-items: center; text-align: center; }
  .slot-nazwa { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .zegar { font-size: 48px; letter-spacing: -0.96px; }
  .przycisk-stop {
    width: 100%; height: var(--h-hala); padding: 0 var(--px-hala);
    border-radius: var(--r-karta);
    /* poswiata akcji glownej dziedziczy kolor stanu przycisku, regula ze spec */
    box-shadow: 0 8px 12px var(--lmt);
  }
}

/* --- filtr na dotyku, spec 142:3668 ------------------------------------ */
.filtr-dotyk {
  align-self: flex-start;
  border: 1px solid var(--line); border-radius: var(--r-pigulka); padding: 2px; gap: 2px;
}
.filtr-dotyk button {
  height: 40px; padding: 0 14px; display: flex; align-items: center; gap: var(--o-2);
  background: none; border: 1px solid transparent; border-radius: var(--r-pigulka);
  font-family: var(--font-dane); font-size: var(--ts-meta); font-weight: 500;
  letter-spacing: var(--ls-etykieta); color: var(--t3); cursor: pointer;
}
.filtr-dotyk button em {
  font-style: normal; font-size: var(--ts-mikro); letter-spacing: var(--ls-plakietka); color: var(--t2);
}
.filtr-dotyk button[aria-selected="true"] {
  background: var(--lmt); border-color: var(--lm-obrys); color: var(--t1); font-weight: 600;
}

/* --- kolumny, lista, wykres -------------------------------------------- */
.kolumny { display: flex; gap: var(--o-5); align-items: flex-start; min-height: 0; }
.karta { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-karta); }
.karta-listy { flex: 1; min-width: 0; padding: var(--o-4); }
.karta-wykresu { width: 560px; padding: var(--o-4); flex-direction: column; gap: var(--o-1); }
@media (max-width: 767px) { .karta-listy { background: none; border: 0; padding: 0; } }

.czynnosci { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--o-2); }
.czynnosci li {
  display: flex; align-items: center; gap: var(--o-4);
  height: var(--ch-wiersz, 48px); padding: 0 var(--o-5);
  border-radius: var(--r-kontrolka);
}
.czynnosci li:hover { background: var(--gh0); }
.czynnosci .gwiazdka { width: 16px; height: 16px; opacity: .8; }
.czynnosci .nazwa {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.czynnosci .proces { color: var(--t3); font-size: var(--ts-meta); margin-left: var(--o-2); }
.czynnosci .czas {
  font-family: var(--font-dane); font-size: var(--ts-wartosc, 12px); font-weight: 500;
  color: var(--t3); font-variant-numeric: tabular-nums;
}
/* przycisk Start: WTORNY, spec: gh + obrys, 40x96, ikona 10, tekst 13/600 */
.czynnosci .start {
  display: flex; align-items: center; justify-content: center; gap: var(--o-2);
  height: var(--h-komfort); width: 96px;
  background: var(--gh); border: 1px solid var(--line); border-radius: var(--r-kontrolka);
  color: var(--t1); font: inherit; font-weight: 600; cursor: pointer;
  transition: background var(--ruch-szybko) var(--ruch-krzywa);
}
.czynnosci .start:hover { background: var(--gh-hover); }
.czynnosci .start:disabled { opacity: .45; cursor: default; }
/* dotyk, spec 65:591: wiersz 56, nazwa do dwoch linii, bez przycisku,
   caly wiersz jest celem dotyku */
@media (max-width: 767px) {
  .czynnosci li { height: 56px; padding: 0 var(--o-5); cursor: pointer; }
  .czynnosci .nazwa {
    white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    font-size: var(--ts-tytul); line-height: var(--lh-zbity);
  }
  .czynnosci .start { display: none; }
}

.wykres { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--o-1); }
.wykres li {
  display: flex; align-items: center; gap: var(--o-4);
  height: 40px; padding: var(--o-1) var(--o-4); border-radius: var(--r-kontrolka);
}
.wykres .w-nazwa {
  width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wykres .tor { flex: 1; height: 9px; background: var(--gh); border-radius: var(--r-pigulka); overflow: hidden; }
.wykres .slupek { height: 100%; background: var(--lmt); border-radius: var(--r-pigulka); }
.wykres .w-czas {
  width: 72px; text-align: right; font-family: var(--font-dane); font-weight: 500;
  font-size: var(--ts-wartosc, 12px); color: var(--t3); font-variant-numeric: tabular-nums;
}
.wykres li.w-toku .w-nazwa { font-weight: 600; }
.wykres li.w-toku .slupek { background: var(--lm); box-shadow: 0 0 0 1px var(--lm-obrys); }
.wykres li.w-toku .w-czas { color: var(--t1); font-size: var(--ts-bazowy); }

/* --- stopka panelu, spec 87:1992 --------------------------------------- */
.stopka {
  align-items: center; gap: var(--o-5); height: 44px; padding: 0 var(--o-7);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-karta);
  font-size: var(--ts-meta); color: var(--t2);
}
.zapisane { display: flex; align-items: center; gap: var(--o-2); color: var(--pos); }
.stopka-suma {
  flex: 1; text-align: center; font-family: var(--font-dane); font-weight: 500;
  font-size: var(--ts-wartosc, 12px); font-variant-numeric: tabular-nums;
}
.stopka-kto { color: var(--t3); }

/* --- dolna nawigacja, spec 87:1993 ------------------------------------- */
.dolna-nawigacja {
  background: var(--card); border-top: 1px solid var(--line);
  padding: 10px var(--o-3) 18px;
}
.naw-pozycja {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--o-1);
  background: none; border: 0; font: inherit; font-size: var(--ts-meta);
  color: var(--t3); text-decoration: none; cursor: pointer;
}
.naw-pozycja img { opacity: .7; }
.naw-pozycja.aktywna { color: var(--lm); font-weight: 600; }
.naw-pozycja.aktywna img { opacity: 1; }
.naw-pozycja.nieaktywna { cursor: not-allowed; }

/* --- logowanie i formularz --------------------------------------------- */
.karta-logowania { max-width: 380px; margin: var(--o-8) auto; padding: var(--o-6); width: 100%; }
.tytul-panelu { margin: 0 0 var(--o-5); font-size: var(--ts-lead); line-height: var(--lh-tytul); }
label { display: block; margin: var(--o-4) 0 var(--o-1); font-size: var(--ts-meta); color: var(--t2); }
input {
  width: 100%; height: var(--ch); padding: 0 var(--o-4);
  font: inherit; color: var(--t1);
  background: var(--gh0); border: 1px solid var(--bd); border-radius: var(--r-kontrolka);
}
input::placeholder { color: var(--t3); }
input:focus-visible, button:focus-visible, a:focus-visible {
  outline: var(--fokus-obrys) solid var(--lm);
  outline-offset: var(--fokus-odsuniecie);
}
.karta-logowania button[type="submit"] {
  width: 100%; height: var(--ch); margin-top: var(--o-5); padding: 0 var(--cpx);
  background: var(--lm); color: var(--onlm); border: 0; border-radius: var(--r-kontrolka);
  font: inherit; font-weight: 600; cursor: pointer;
}
.karta-logowania button[type="submit"]:hover { background: var(--lm-hover); }
.blad {
  margin: var(--o-4) 0 0;
  background: var(--no-tinta); color: var(--no); border: 1px solid var(--no-obrys);
  padding: var(--o-3) var(--o-4); border-radius: var(--r-plakietka); font-size: var(--ts-meta);
}

/* --- drugi skladnik i stany ekranu logowania ---------------------------- */
/* Krok kodu jest KROKIEM, nie polem obok hasla: dlatego dostaje wlasny
   blok z opisem, a pola logowania sa w nim wygaszone, nie ukryte. Czlowiek
   ma widziec, na ktore konto sie loguje. */
.krok-kodu {
  margin-top: var(--o-5); padding-top: var(--o-5);
  border-top: 1px solid var(--bd);
}
.krok-kodu h2 { margin: 0 0 var(--o-2); color: var(--t2); }
.krok-kodu .podpowiedz { margin: 0; color: var(--t3); font-size: var(--ts-meta); }
.krok-kodu input { letter-spacing: .12em; font-family: var(--font-dane); }
input:disabled { color: var(--t3); background: var(--gh0); cursor: not-allowed; }

/* Przycisk wtorny: pelne wypelnienie akcentem jest zarezerwowane dla jednej
   akcji glownej na ekran, regula R13 systemu wizualnego. */
.karta-logowania .przycisk-wtorny {
  width: 100%; height: var(--ch); margin-top: var(--o-3);
  background: transparent; color: var(--t2);
  border: 1px solid var(--bd); border-radius: var(--r-kontrolka);
  font: inherit; cursor: pointer;
}
.karta-logowania .przycisk-wtorny:hover { color: var(--t1); }
.karta-logowania button[type="submit"]:disabled { opacity: .6; cursor: progress; }

/* Brak polaczenia i brak dostepu to NIE jest zwykla pomylka przy hasle,
   wiec komunikat ma inny kolor: bledu sieci nie naprawi ponowne wpisanie
   hasla, a odebranego dostepu nie naprawi nic po stronie czlowieka. */
[data-stan="brak-polaczenia"] .blad,
[data-stan="brak-dostepu"] .blad {
  background: var(--nk-tinta); color: var(--nk); border-color: var(--nk-obrys);
}