/* Wyglad domyslny "kafelki" - /uslugi/kafeliki/projekt/<id>, bez przyrostka.
   Jeden z siedmiu arkuszy panelu; pozostale w styl-w1..w6.css.
   Jasne tlo, biale karty, polecenia jako plytki w siatce. Przy kilkunastu
   komendach lista jedna pod druga robi sie dluga i trzeba jej szukac
   wzrokiem - plytki mieszcza je w dwoch rzedach, a pole argumentow siedzi
   pod przyciskiem, nie obok niego. */

/* Paleta, typografia i ksztalty sa we wspolnym pliku tokeny.css obok -
   czytaja go i kafeliki, i strony uslug, wiec ich kolory nie moga sie
   rozjechac. Arkusz kafelikow zostaje wlasny: uklad (siatka kafelkow
   z poleceniami) nie ma nic wspolnego z ukladem stron uslug.

   ZANIM ZMIENISZ KOLOR: zmien go w tokeny.css, nie tutaj. */
:root {
    /* Jedyna zmienna wylacznie panelowa - pasek tytulu kafelka polecenia.
       Alias, bo ton jest ten sam, co wyrozniony naglowek na tamtych stronach. */
    --naglowek-kafelka: var(--naglowek);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 1.2rem;
    background: var(--tlo);
    color: var(--tekst);
    font-family: Segoe UI, system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

header {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--karta);
    border-radius: 12px;
    padding: .9rem 1.2rem;
    margin-bottom: 1.2rem;
}

h1 { font-size: 1.2rem; margin: 0; }
h2 { font-size: .95rem; margin: 0 0 .8rem 0; font-weight: 600; }

header form { margin-left: auto; }

/* Plakietka tunelu stoi tam, gdzie przy logowaniu haslem stoi "Wyloguj" -
   to samo miejsce odpowiada na to samo pytanie "jak tu wszedlem". Kolor
   inny niz reszta naglowka, bo ma rzucac sie w oczy przy pierwszym
   spojrzeniu, a nie przy czytaniu. */
.tunel {
    margin-left: auto;
    font-size: .84rem;
    color: var(--ok);
    border: 1px solid var(--ok);
    border-radius: 999px;
    padding: .2rem .7rem;
    cursor: help;
}

.opis { color: var(--przygaszony); font-size: .84rem; font-weight: 400; }

/* #zywe znika z ukladu (display:contents), zeby stan i log trafily w rozne
   komorki siatki - w HTML sa jednym blokiem, bo razem sie odswiezaja. */
main {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
        "odsw odsw"
        "pol  pol"
        "stan log"
        "opc  log";
    align-items: start;
}

/* Karta bez sekcji polecen (projekt obserwowany, podglad, pomiar) nie ma
   wiersza "pol". Pusty wiersz nie byl nieszkodliwy: automatyczne
   rozmieszczenie wkladalo w niego pierwsza sekcje na cala szerokosc bez
   nazwanego obszaru - historie pobran - NAD stan programu. Bez niego taka
   sekcja laduje pod stanem, logiem i opcjami, tak jak okazje u scrapera. */
main:not(:has(.polecenia)) {
    grid-template-areas:
        "odsw odsw"
        "stan log"
        "opc  log";
}

#zywe { display: contents; }
.polecenia { grid-area: pol; }
.odswiezanie { grid-area: odsw; }

/* Naglowek i przyciski w jednej linii: to jedna sprawa ("kiedy odswiezy
   i co z tym zrobic"), a rozbita na dwa wiersze zabierala pasowi
   wysokosc dwa razy wieksza, niz jest wart. Zawijaja sie dopiero na
   waskim ekranie. */
.odswiezanie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem .9rem;
}

.odswiezanie h2 { margin: 0; }

/* Akapit z przyciskami jest blokiem, wiec bez tego bralby cala szerokosc
   i spychal sam siebie do drugiego wiersza. */
.odswiezanie .sterowanie {
    flex: 0 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.stan { grid-area: stan; }
.sekcja-logu { grid-area: log; }
.sekcja-opcji { grid-area: opc; }

section {
    background: var(--karta);
    border-radius: 12px;
    /* Margines wewnetrzny kafelka: 30% mniej niz pierwotne 1rem/1.2rem. */
    padding: .7rem .85rem;
    margin: 0;
    box-shadow: 0 1px 3px rgba(31, 39, 51, .1);
}

.polecenia { display: flex; flex-wrap: wrap; gap: .8rem; }
.polecenia h2 { flex: 1 1 100%; }

/* Grupy polecen: sterowanie programem, akcje bez argumentow,
   akcje z argumentami. Podzial wychodzi z rejestru komend
   projektu (strona.py), a nie z listy nazw w panelu. */
/* Komunikaty siedza w kafelku polecen, bo dotycza wlasnie ich: zielony
   "Wyslano" i czerwony "w kanale czeka" opisuja los przycisku, ktory sie
   przed chwila nacisnelo. Puste pojemniki znikaja, zeby nie zostawialy
   odstepu nad grupami. */
/* Kafelek polecen jest flexem, wiec bez tego komunikat nie zajmowalby
   calej szerokosci, tylko stawal w rzedzie obok grup polecen. */
#komunikat { flex: 1 1 100%; margin-bottom: .6rem; }
#komunikat:empty { display: none; margin: 0; }

#komunikat p { margin: 0; }

/* Pojemnik kanalu nie ma nic do pokazania: ze polecenie czeka, mowi zolty
   przycisk i przygaszony panel. Zostaje w HTML jako nosnik danych dla
   skryptu (nazwa polecenia i wiek kanalu w atrybutach). */
#kanal { display: none; }

/* Polecenie czeka w kanale: kafelek obwiedziony, przyciski wylaczone.
   Serwer i tak odmowilby wysylki (kanal.wyslij), wiec przycisk nie ma
   czego oferowac - blokada mowi to, zanim sie go nacisnie. */
.polecenia.zajete { box-shadow: inset 0 0 0 2px var(--ostrzezenie); }

.komenda button[disabled] {
    opacity: .45;
    cursor: not-allowed;
}

/* <summary> nie da sie wylaczyc atrybutem - rozwijanie polecenia przy
   zajetym kanale i tak nie mialoby po co konczyc sie OK. */
.polecenia.zajete summary {
    opacity: .45;
    pointer-events: none;
}

/* --- panel czeka na odbior polecenia ---------------------------------- */

/* Dopoki polecenie czeka w kanale, panel niczego nie przyjmie - i ma to
   mowic caly, a nie jednym kafelkiem. Stan, log i opcje ida na szaro:
   dane sa prawdziwe i nadal sie odswiezaja, ale nie o nie teraz chodzi.
   Pasek odswiezania zostaje kolorowy i klikalny SWIADOMIE - to jedyny
   sposob, zeby sprawdzic, czy program juz polecenie odebral, czyli
   dokladnie to, na co sie w tej chwili czeka. */
body.czeka .stan,
body.czeka .sekcja-logu,
body.czeka .sekcja-opcji {
    filter: grayscale(1);
    opacity: .6;
}

/* Przyciski pozostalych polecen traca takze kolor - samo przygaszenie
   zostawialo pol kafelka w blekicie i zolty przycisk sie w nim gubil. */
body.czeka .komenda:not(.czeka) button,
body.czeka .komenda:not(.czeka) summary { filter: grayscale(1); }

/* Wyslane polecenie: jedyny kolor na przygaszonej stronie. Zolty, bo to
   nie blad (czerwien) ani gotowe (zielen) - to "w toku". Ciemny tekst,
   bo bialy na zoltym jest nieczytelny. */
.komenda.czeka button,
.komenda.czeka summary,
details.komenda.czeka[open] > summary {
    background: var(--czekanie);
    color: var(--tekst);
    opacity: 1;
}

/* Licznik od wyslania, doklejany przez skrypt do nazwy polecenia.
   Cyfry tabelaryczne, zeby nazwa nie drgala co sekunde. */
.komenda.czeka .licznik-zywy {
    margin-left: .45rem;
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    /* Wersaliki przyciskow robily z "2m05s" napis "2M05S" - jednostki
       czasu pisze sie mala litera i tak sie je czyta. */
    text-transform: none;
}

/* Ta sama siatka co grupy polecen: przyciski odswiezania stoja nad nimi
   w tej samej kolumnie, wiec musza miec te sama szerokosc - inaczej
   pierwszy kafelek wyglada jak z innego panelu. */
.polecenia .grupa,
.sterowanie {
    /* Siatka, nie flex: kolumny sa rowne niezaleznie od tego, ile plytek
       zostalo w ostatnim rzedzie, a odstepy takie same w obu osiach. */
    /* Zawezone do sekcji polecen: klase .grupa ma tez grupa kafelkow
       przegladu (nizej w pliku) i jej kolumny 26rem wygrywaly tu kolejnoscia,
       rozciagajac przyciski na cwierc ekranu. */
    /* Pelna szerokosc w siatce polecen, ktora jest flexem. */
    flex: 1 1 100%;
    display: grid;
    /* Tyle, zeby najdluzsza nazwa polecenia (USUN_DOJAZDY) zmiescila sie
       w jednej linii RAZEM z wypelnieniem przycisku - przy 10.5rem brakowalo
       kilkunastu pikseli i nazwa lamala sie na dwie linie. Stala szerokosc,
       nie 1fr: rozciagniete na pol ekranu przyciski byly nieczytelnym pasem. */
    grid-template-columns: repeat(auto-fill, 12.5rem);
    gap: .8rem;
    align-items: start;
}

/* Naglowek grupy zajmuje caly rzad, a nie pierwsza komorke siatki. */
.grupa h3 { grid-column: 1 / -1; }

h3 {
    font-size: .8rem;
    font-weight: 600;
    color: var(--przygaszony);
    margin: 0;
}

/* Nazwa polecenia z argumentami to <summary>, zeby rozwijanie dzialalo bez
   JavaScriptu - musi wiec wygladac dokladnie jak przycisk, bo nim jest.
   Otwarty wiersz zmienia kolor: inaczej po rozwinieciu kilku polecen nie
   widac, ktore z pol naleza do ktorego. */
details.komenda { display: block; }

/* Rozwiniete polecenie zajmuje caly rzad siatki: w kolumnie o szerokosci
   jednego przycisku pola byly waskie, opisy argumentow zawijaly sie w kilka
   linii, a Anuluj spadal pod OK. Sam przycisk zostaje szerokosci plytki
   (ta sama wartosc co kolumna siatki wyzej), zeby nie urosl w pas. */
details.komenda[open] { grid-column: 1 / -1; }

/* Rozwiniete polecenie dostaje przyciemnione podloze pod przyciskiem
   i polami: sam kolor przycisku nie wystarczal, zeby pola argumentow
   czytaly sie jako czesc tego kafelka. Podloze wychodzi poza kafelek
   cieniem bez rozmycia, a nie paddingiem - wymiary sie nie zmieniaja,
   wiec siatka nie drga (z tego powodu odrzucono kiedys ramke). */
details.komenda[open] {
    background: var(--tlo);
    box-shadow: 0 0 0 .5rem var(--tlo);
    border-radius: var(--promien-kontrolki);
}
details.komenda[open] > summary { width: 12.5rem; }

summary { list-style: none; display: inline-block; text-align: center; }
summary::-webkit-details-marker { display: none; }

/* Kazdy argument w osobnym wierszu, OK i Anuluj pod nimi: obok siebie
   pola wygladaly na jedna kontrolke, a przyciski na nalezace do
   ostatniego pola. */
.argumenty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .4rem;
    margin-top: .4rem;
}

.argumenty .przyciski { display: flex; gap: .4rem; }

/* OK i Anuluj nie sa nazwami polecen - nie potrzebuja ich szerokosci. */
.argumenty button { min-width: 0; }

.argumenty .liczba { width: 5rem; }

/* Pole tekstowe i lista jednej szerokosci, jedno pod drugim: globalne
   width: 100% pola ciagnelo je przez caly ekran, a lista zostawala waska. */
.argumenty input[size],
.argumenty select { width: min(36rem, 100%); }

/* Na przyciemnionym podlozu rozwinietego kafelka jasna ramka pola ginela,
   a lista nie miala zadnej reguly i wygladala jak systemowa kontrolka
   z innej strony. Zawezone do argumentow - logowanie zostaje bez zmian. */
.argumenty input:not([type=checkbox]),
.argumenty select {
    background: #fff;
    color: var(--tekst);
    border: 1px solid var(--przygaszony);
    border-radius: var(--promien-kontrolki);
    padding: .45rem .6rem;
    font-family: inherit;
    font-size: inherit;
}

.potwierdzenie {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .85rem;
}

details.komenda[open] > summary { background: #1b3f8f; }

/* Os czasu w sekcji stanu: godzina, znak, zdarzenie. Siatka na poziomie
   listy (li ma display: contents), zeby wszystkie godziny i znaki staly
   w jednej kolumnie niezaleznie od dlugosci opisu. */
/* Historia etapow i polecen: kafelek wysuwany po najechaniu na wiersz,
   a nie natywny dymek - dymek nie umie kolumn ani przewijania, a tego
   jest do dwudziestu wierszy. Pokazuje sie takze po wejsciu klawiatura
   (:focus-within, stad tabindex na wierszu). Na dotyku hovera nie ma -
   tam zostaje tabela, a historia jest wygoda, nie jedynym zrodlem.
   Ten sam kafelek niesie liste plikow kolejki i odbioru (data-lista) -
   tam tresc sklada serwer, a nie skrypt. */
.stan-pozycje .info[data-historia],
.stan-pozycje .info[data-lista] {
    position: relative;
    cursor: help;
}

.historia {
    position: absolute;
    z-index: 5;
    top: 100%;
    left: 0;
    min-width: 16rem;
    max-width: 24rem;
    max-height: 16rem;
    overflow-y: auto;
    display: none;
    background: var(--karta);
    border: 1px solid var(--ramka);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(31, 39, 51, .18);
    padding: .5rem .6rem;
    font-size: .85rem;
    font-weight: 400;
    color: var(--tekst);
}

.info[data-historia]:hover > .historia,
.info[data-historia]:focus-within > .historia,
.info[data-historia]:focus > .historia,
.info[data-lista]:hover > .historia,
.info[data-lista]:focus-within > .historia,
.info[data-lista]:focus > .historia { display: block; }

.historia p { margin: 0; color: var(--przygaszony); }

/* Nazwy plikow nie maja spacji, a kafelek ma twarda szerokosc - bez
   lamania w dowolnym miejscu dluga nazwa nagrania wyszlaby za ramke. */
.historia .co { overflow-wrap: anywhere; }

.historia .wpisy {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .15rem .6rem;
}

.historia .wpisy li { display: contents; }

.historia .odstep {
    color: var(--przygaszony);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.stan-pozycje {
    /* Wieksza niz reszta strony: to jest odpowiedz na pytanie, po ktore
       sie tu wchodzi, a nie tlo dla przyciskow. */
    font-size: 1.05rem;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: max-content max-content 1fr;
    gap: .35rem .9rem;
    align-items: baseline;
}

.stan-pozycje li { display: contents; }

.stan-pozycje .nazwa {
    color: var(--przygaszony);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.stan-pozycje .licznik {
    color: var(--przygaszony);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    /* Do prawej: wartosci roznia sie dlugoscia (od "teraz" po
       "5h53m37s"), a rownane do lewej rozjezdzaja sie na koncach. */
    text-align: right;
}

/* Biezacy etap i termin zaplanowany - jedyne dwa wiersze, ktore mowia
   o "teraz" i "potem"; reszta osi to historia. */
/* Stan obecny to jedyny wiersz mowiacy o TERAZ - reszta to
   historia albo plan. */
.stan-pozycje .teraz .licznik,
.stan-pozycje .teraz .info { color: var(--tekst); }

.stan-pozycje .blad .info { color: var(--blad); }

/* Linia miedzy czescia wspolna a wlasna kafelka i karty
   (strona._uporzadkuj_kafelek). Wiersze sa display:contents, wiec linia
   jest osobnym elementem na cala szerokosc siatki. */
.stan-pozycje li.rozdzielacz {
    display: block;
    grid-column: 1 / -1;
    height: 0;
    margin: .2rem 0;
    border-top: 1px solid var(--ramka);
}

/* Pelny tekst ostatniego bledu na karcie - Traceback ma zachowac swoje
   linie, inaczej zlewa sie w jeden nieczytelny akapit. */
.caly-blad {
    display: block;
    white-space: pre-wrap;
    font-family: Consolas, monospace;
    font-size: .8rem;
}

/* Staly znacznik czasu w miejscu dawnego licznika: dokladna data
   i "ile temu" siedza w dymku. */
.stempel { cursor: help; }

/* Zakladki logu na polach wyboru: przelaczanie dziala bez JavaScriptu,
   a skrypt dokleda tylko zapamietanie wyboru miedzy odswiezeniami. Pole
   jest schowane, ale zostaje w ukladzie strony - inaczej klawiatura nie
   umialaby na nie wejsc. */
.zakladki { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }

.zakl {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.zakladki label {
    cursor: pointer;
    padding: .2rem .6rem;
    border: 1px solid transparent;
    color: var(--przygaszony);
    font-size: .9rem;
    font-weight: 600;
}

.zakladki label:hover { color: var(--tekst); }

/* Zakladka bez ani jednego wpisu nie ma po co przyciagac wzroku. */
.zakladki label.uwagi { color: var(--ostrzezenie); }
.zakladki label.bledy { color: var(--blad); }
.zakladki label.pusta { color: var(--przygaszony); }

#zakl-log:checked ~ .zakladki label[for="zakl-log"],
#zakl-uwagi:checked ~ .zakladki label[for="zakl-uwagi"],
#zakl-bledy:checked ~ .zakladki label[for="zakl-bledy"] {
    color: var(--tekst);
    border-color: var(--ramka);
}

#zakl-log:focus-visible ~ .zakladki label[for="zakl-log"],
#zakl-uwagi:focus-visible ~ .zakladki label[for="zakl-uwagi"],
#zakl-bledy:focus-visible ~ .zakladki label[for="zakl-bledy"] {
    outline: 2px solid var(--akcent);
}

#zakl-log:checked ~ .tresc-uwagi,
#zakl-log:checked ~ .tresc-bledy,
#zakl-uwagi:checked ~ .tresc-log,
#zakl-uwagi:checked ~ .tresc-bledy,
#zakl-bledy:checked ~ .tresc-log,
#zakl-bledy:checked ~ .tresc-uwagi { display: none; }

/* Jedna linia logu to jeden blok: filtr chowa cale wiersze, a znak konca
   linii zostawiony po schowanym wierszu robilby w logu dziure. */
.log .wiersz { display: block; }

/* Poziom linii logu. Kolory te same w obu zakladkach - ostrzezenie ma
   wygladac tak samo niezaleznie od tego, gdzie sie na nie patrzy.
   Debug przygaszony, info pelnym kolorem tekstu: roznice "to wazne / to
   szum" niesie jasnosc, bez dokladania barw do palety. Linia, ktorej
   poziomu panel nie rozpoznal, zostaje przy kolorze tekstu - panel nie
   udaje, ze wie, czym ona jest. */
.poziom-blad { color: var(--blad); }
.poziom-uwaga { color: var(--ostrzezenie); }
.poziom-info { color: var(--tekst); }
.poziom-debug { color: var(--przygaszony); }

/* Przyciski glebokosci - prawy koniec paska zakladek. Komplet na kazda
   zakladke, bo kazda czyta inny plik; arkusz pokazuje ten, ktory pasuje
   do zakladki wybranej. */
.narzedzia-logu {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.narzedzia-logu.dla-bledow { display: none; }

#zakl-uwagi:checked ~ .zakladki .dla-logu,
#zakl-bledy:checked ~ .zakladki .dla-logu { display: none; }

#zakl-uwagi:checked ~ .zakladki .dla-bledow,
#zakl-bledy:checked ~ .zakladki .dla-bledow { display: flex; }

/* Filtry poziomu stoja przy nazwie pliku, ktorego dotycza - i znikaja
   razem z ta zakladka: w wyciagu jeden poziom na zakladke, wiec nie ma
   tam czego odsiewac. */
.filtry {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-right: .3rem;
}

#zakl-uwagi:checked ~ .zakladki .filtry,
#zakl-bledy:checked ~ .zakladki .filtry { display: none; }

/* Pole wyboru schowane, ale zostaje w ukladzie strony - inaczej klawiatura
   nie umialaby na nie wejsc (tak samo jak przy zakladkach). Kwadracik
   rysuje etykieta, bo samego pola nie widac. */
.filtr {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.filtry label {
    cursor: pointer;
    color: var(--przygaszony);
    font-size: .82rem;
    font-weight: 600;
}

.filtry label::before {
    content: "";
    display: inline-block;
    width: .72em;
    height: .72em;
    margin-right: .3em;
    border: 1px solid currentColor;
    border-radius: 3px;
}

#filtr-info:checked ~ .zakladki label[for="filtr-info"],
#filtr-debug:checked ~ .zakladki label[for="filtr-debug"] {
    color: var(--tekst);
}

#filtr-info:checked ~ .zakladki label[for="filtr-info"]::before,
#filtr-debug:checked ~ .zakladki label[for="filtr-debug"]::before {
    background: var(--akcent);
    border-color: var(--akcent);
}

#filtr-info:focus-visible ~ .zakladki label[for="filtr-info"],
#filtr-debug:focus-visible ~ .zakladki label[for="filtr-debug"] {
    outline: 2px solid var(--akcent);
}

/* Odznaczony filtr chowa wiersze swojego poziomu. Ostrzezenia, bledy
   i linie o nierozpoznanym poziomie nie maja wlasnego filtra i nie znikaja
   nigdy - filtr nie moze schowac bledu. */
#filtr-info:not(:checked) ~ .log .poziom-info,
#filtr-debug:not(:checked) ~ .log .poziom-debug { display: none; }

/* Przyciski glebokosci nie sa poleceniem do programu, wiec maja wygladac
   jak przelacznik w naglowku, a nie jak STOP obok. */
.narzedzia-logu button {
    background: var(--tlo);
    color: var(--tekst);
    font-size: .78rem;
    padding: .15rem .5rem;
    border-radius: 6px;
}

.narzedzia-logu button:hover { background: #e2e7ef; }

/* Wylaczony przycisk mowi, ze dalej w te strone nie ma dokad isc:
   dwadziescia linii albo caly plik, wiec i tlo ma zostac nieruszone. */
.narzedzia-logu button[disabled] {
    background: var(--tlo);
    opacity: .45;
    cursor: not-allowed;
}

/* Wszystkie przyciski maja jeden kroj, wielkosc i wypelnienie (regula
   `button, summary` nizej). Plytka polecenia rozni sie WYLACZNIE tym, ze
   przycisk wypelnia jej szerokosc - to uklad, nie formatowanie. */
.komenda > button,
.komenda > summary {
    width: 100%;
    min-width: 0;
    /* Nazwa dluzsza niz plytka ma sie zawinac, a nie zostac ucieta:
       ucieta nazwa polecenia nie mowi, ktore polecenie sie naciska. */
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Plytka polecenia nie rysuje wlasnej obwodki ani wypelnienia: obwiedzione
   byly tylko polecenia z argumentami, wiec trzeci rzad wygladal inaczej niz
   dwa pierwsze, choc niczym sie nie rozni. Przynaleznosc pol argumentow do
   polecenia niesie kolor rozwinietego przycisku i podloze rozwinietego
   kafelka (wyzej), nie ramka. */
.komenda {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .45rem;
}

pre {
    background: #f7f9fc;
    border: 1px solid var(--ramka);
    border-radius: 8px;
    padding: .75rem;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.45;
    color: #2b3441;
}

.log { max-height: 32rem; overflow-y: auto; }
.opcje { max-height: 16rem; overflow-y: auto; color: var(--przygaszony); }

/* --- okazje cenowe: pelna tresc na karcie projektu ----------------------
   Sekcja NIE ma nazwanego obszaru siatki: wystawia ja jeden projekt, a
   pusty obszar u wszystkich pozostalych zostawialby na dole strony dziure
   wielkosci odstepu. Auto-umieszczenie stawia ja pod ostatnim rzedem, a
   rozpiecie na obie kolumny daje ofercie cala szerokosc - opis ma cztery
   linie i w polowie ekranu lamalby sie na osiem. */
.sekcja-okazji,
.sekcja-historii { grid-column: 1 / -1; }

.sekcja-okazji p,
.sekcja-historii p { margin: .15rem 0; }

/* Historia pobran ma ten sam uklad listy co okazje: w lewej kolumnie
   godzina pobrania zamiast ceny, po prawej opis w liniach. Jedna siatka
   dla obu list, zeby dwie sekcje tego samego szkieletu nie roznily sie
   wygladem. */
.okazje,
.pobrania {
    list-style: none;
    margin: .7rem 0 0 0;
    padding: 0;
    display: grid;
    /* Cena w kolumnie, nie w linii opisu: ceny czyta sie z gory na dol
       (lista jest posortowana od najtanszej), a wtopione w zdanie
       przestaja tworzyc te kolumne. */
    grid-template-columns: max-content 1fr;
    gap: .5rem .9rem;
    align-items: baseline;
}

.okazje li,
.pobrania li { display: contents; }

.okazje .cena,
.pobrania .kiedy {
    font-size: 1.05rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
}

.pobrania .kiedy { font-weight: 400; }

/* Kazda linia opisu w osobnym wierszu: czlonow jest kilka i zlane w jeden
   akapit przestaja sie od siebie roznic. */
.okazje .tresc,
.pobrania .tresc { display: flex; flex-direction: column; gap: .1rem; }
.okazje .linia,
.pobrania .linia { color: var(--przygaszony); font-size: .88rem; }
.okazje .linia:first-child,
.pobrania .linia:first-child { color: var(--tekst); font-size: 1rem; }
.okazje .hotel,
.pobrania .nazwa { font-weight: 600; }

/* Kreska miedzy ofertami: jedna oferta to piec linii, wiec bez niej
   sasiedzi zlewaja sie w jeden blok tekstu. */
.okazje li + li .cena,
.okazje li + li .tresc,
.pobrania li + li .kiedy,
.pobrania li + li .tresc {
    border-top: 1px solid var(--ramka);
    padding-top: .5rem;
}

button,
summary {
    background: var(--akcent);
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: .5rem .9rem;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.2;
    /* Wersaliki na wszystkim, co sie naciska. Nazwy polecen sa nimi
       z natury (STOP, ODSWIEZ), wiec reszta przyciskow rownala do nich. */
    text-transform: uppercase;
    letter-spacing: .03em;
    cursor: pointer;
    /* Zaden przycisk nie rysuje obwodki WOKOL siebie. Natywny pierscien
       focusa zostawal po kliknieciu mysza i wygladal jak osobny stan
       przycisku - a przycisk juz sie odsluzyl i o niczym nie mowi. */
    outline: none;
}

/* Jedyna reakcja na kursor: ciemniejszy odcien wlasnego tla. To samo
   dla <summary>, bo to takze przycisk - wczesniej zmienial sie tylko
   przy przyciskach i rozwijane polecenia wygladaly na martwe. */
button:hover,
summary:hover { background: #2559c4; }

/* Wejscie klawiatura musi byc widoczne, inaczej Tab jest zgadywanka.
   Obwodka WEWNETRZNA (inset): nie zmienia rozmiaru ani polozenia
   przycisku, wiec siatka plytek nie drga przy przechodzeniu Tabem.
   currentColor trafia sama w oba warianty - biala na przyciskach
   kolorowych, ciemna na jasnym przycisku naglowka. */
button:focus-visible,
summary:focus-visible { box-shadow: inset 0 0 0 2px currentColor; }

header button { background: var(--tlo); color: var(--tekst); font-weight: 400; }
header button:hover { background: #e2e7ef; }

input {
    background: #fff;
    color: var(--tekst);
    border: 1px solid var(--ramka);
    border-radius: 8px;
    padding: .45rem .6rem;
    font-family: inherit;
    width: 100%;
}

input[type=checkbox] { width: auto; }

/* Blad odczytu maluje caly kafelek, nie tylko napis pod nim. */
.odswiezanie.zle {
    background: #fdeced;
    box-shadow: inset 0 0 0 1px var(--blad);
}

.sterowanie {
    color: var(--przygaszony);
    font-size: .82rem;
    margin: 0;
    /* Bez wciecia: inaczej przyciski nie staja w linii z plytkami polecen. */
    padding: 0;
}

/* Cyfry tabelaryczne, zeby dopisek w naglowku nie drgal przy kazdej
   sekundzie. Komunikaty ida do #polaczenie, nie tutaj. */
#licznik { font-variant-numeric: tabular-nums; }

/* Stan polaczenia pod paskiem, a nie w liczniku. Pusty znika zupelnie,
   zeby nie zostawial dziury w ukladzie. */
#polaczenie { margin: .35rem 0 0 0; font-size: .85rem; }
#polaczenie:empty { display: none; }

/* Wcisniety przycisk wstrzymania wyglada tak samo jak rozwiniete
   polecenie - jeden jezyk na "to jest teraz aktywne". */
#pauza[aria-pressed="true"] {
    background: #1b3f8f;
}

.blad { color: var(--blad); }
.ostrzezenie { color: var(--ostrzezenie); }
.ok { color: var(--ok); }
.wersja {
    color: var(--przygaszony);
    font-size: .78rem;
    margin-top: 1.4rem;
    text-align: center;
}

a { color: var(--akcent); }

@media (max-width: 62rem) {
    main {
        grid-template-columns: 1fr;
        grid-template-areas: "odsw" "stan" "pol" "log" "opc";
    }

    main:not(:has(.polecenia)) {
        grid-template-areas: "odsw" "stan" "log" "opc";
    }
}

/* --- przeglad: kafelek na projekt ---------------------------------------
   Kafelki lamia sie do siatki po szerokosci ekranu, a nie do stalej liczby
   kolumn: przy dwoch projektach maja stanac obok siebie, przy szesciu -
   w dwoch rzedach, a na telefonie jeden pod drugim. Siatka glownej strony
   projektu (stan, log, opcje) tu nie obowiazuje, stad wlasny uklad. */
main.przeglad {
    grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
    grid-template-areas: none;
}

main.przeglad .odswiezanie { grid-area: auto; grid-column: 1 / -1; }

/* Grupa tematyczna (rejestr.grupy): wiersz na cala szerokosc przegladu
   z wlasna siatka kafelkow. Wlasna, a nie podsiatka strony, bo grupa
   z jednym kafelkiem ma go miec po lewej, a nie rozciagnietego. Minimum
   kafelka nie wieksze niz ekran - telefon nie ma przewijac w bok. */
.grupa {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr));
    gap: 1.1rem;
    align-items: start;
}

.grupa .tytul-grupy {
    grid-column: 1 / -1;
    margin: .4rem 0 -.3rem 0;
    font-size: 1rem;
    color: var(--przygaszony);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.grupa .ocena-grupy {
    margin-left: .6rem;
    font-size: .84rem;
    text-transform: none;
    letter-spacing: 0;
}

.grupa .ocena-grupy .blad { color: var(--blad); }
.grupa .ocena-grupy .ostrzezenie { color: var(--ostrzezenie); }

/* Kafelek nie jest klikalny jako calosc - droga na podstrone to jego
   tytul (strona.kafelek), a droga na sam serwis to wiersz "Strona".
   Sekcja stanu w srodku oddaje karcie tlo i cien, zeby nie bylo karty
   w karcie. */
.kafelek {
    display: block;
    background: var(--karta);
    border-radius: 12px;
    padding: .7rem .85rem;
    color: inherit;
}

.kafelek .stan { background: none; box-shadow: none; padding: 0; }

/* Naglowek kafelka: nazwa projektu i jego opis odciete linia od tabeli
   liczb pod nimi. Bez tego oddzielenia nazwa gubila sie w gestym kafelku,
   bo stala w jednej linii z opisem i niczym sie od niego nie roznila. */
/* Delikatne tlo pod tytulem i opisem: naglowek ma sie odcinac od tabeli
   liczb, ale nie udawac osobnej karty - stad ton tla strony, a nie biel
   i cien. */
.kafelek .naglowek-kafelka {
    margin: -.7rem -.85rem .6rem -.85rem;
    padding: .55rem .85rem .5rem .85rem;
    background: var(--naglowek-kafelka);
    border-bottom: 1px solid var(--ramka);
    border-radius: 12px 12px 0 0;
}

.kafelek .tytul {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .01em;
}

/* Tytul prowadzi na podstrone i ma to byc widac bez najezdzania: kolor
   akcentu i strzalka. 22.09.2026 odnosnik z tytulu zdjeto, bo cel byl
   niewidoczny - tu jest widoczny, wiec tamten powod odpada. */
.kafelek .tytul a {
    color: var(--akcent);
    text-decoration: none;
}

.kafelek .tytul a::after { content: "\00a0\203a"; }
.kafelek .tytul a:hover { text-decoration: underline; }

.kafelek .naglowek-kafelka .opis {
    margin: .15rem 0 0 0;
    font-size: .92rem;
    font-weight: 500;
    color: var(--akcent);
}

/* Odnosniki w tresci kafelka - numery ofert, "Strona" - w kolorze
   akcentu, zeby bylo widac, ze to jedyne miejsca, ktore stad prowadza. */
.kafelek .stan a { color: var(--akcent); }

/* Kafelek: dwie kolumny zamiast trzech - nazwa i wartosc. Opis jest
   podpunktem pod wartoscia, a nie osobna kolumna, ktora rozpychala
   kafelek i lamala liczby. */
.kafelek .stan-pozycje { grid-template-columns: max-content 1fr; }

.kafelek .stan-pozycje .wartosc {
    font-variant-numeric: tabular-nums;
}

.kafelek .stan-pozycje .podpunkt {
    display: block;
    font-size: .82rem;
    color: var(--przygaszony);
}

/* Punkt przed podpunktem: bez niego druga linia wygladala jak urwany
   ciag dalszy wartosci, a nie jak jej uzupelnienie. */
.kafelek .stan-pozycje .podpunkt::before {
    content: "\2022\00a0";
}

/* Dwa stopnie oceny (alarm.py): czerwony to "zajmij sie tym teraz", zolty
   to "obejrzyj przy okazji". Kolor bierze pasek naglowka, a nie cale
   wnetrze: kafelek jest gesty od liczb i kolorowe tlo pod nimi
   utrudnialoby czytanie. Bez oceny pasek zostaje neutralny. */
.kafelek.alarm .naglowek-kafelka { background: #fbe3e5; }
.kafelek.uwaga .naglowek-kafelka { background: #fbeed6; }

/* Powod stoi w naglowku, pod opisem: kolor paska mowi "cos jest nie
   tak", a dopiero slowa mowia co - bez nich trzeba by czytac cala tabele. */
.kafelek .powod {
    display: block;
    font-size: .84rem;
    font-weight: 600;
    margin: .25rem 0 0 0;
}

.kafelek.alarm .powod { color: var(--blad); }
.kafelek.uwaga .powod { color: var(--ostrzezenie); }

/* Powrot na przeglad to jedyna droga miedzy projektami (strona.py). */
.powrot {
    color: var(--akcent);
    text-decoration: none;
    font-size: .84rem;
}

.powrot:hover { text-decoration: underline; }