/* ============================================================================
   base.css - system. Styluje ELEMENTY, nie klasy.

   Szablony są semantyczne (`header`, `nav`, `table`, `label`, `small`), więc
   nie potrzebują obudowy z div-ów i klas narzędziowych. Klasa pojawia się tu
   wyłącznie tam, gdzie znaczenia nie da się odczytać ze struktury - jest ich
   dziewięć (plus dwie odmiany noty) i każda ma powód wypisany przy regule.

   Reguła przenoszenia: komponent trafia tutaj dopiero wtedy, gdy używa go
   DRUGI ekran. `.notice`, `.button` i `h1 code` powstały przy ekranie planu
   i przeprowadziły się tu, gdy sięgnęły po nie wynik i status. Do tego czasu
   mieszkają w arkuszu swojego ekranu - system rośnie z użycia, nie z planów.

   Wszystkie wartości pochodzą z tokens.css. Wyjątków nie ma.
   ========================================================================= */

/* --- Dokument ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;

  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  /* Bez tego cyfry w tabeli "tańczą" przy każdym przeliczeniu - a to jest
     ekran, na którym liczby porównuje się wzrokiem, kolumna do kolumny. */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* Jedna szerokość i jedna lewa krawędź dla wszystkiego: nagłówka strony,
   treści i stopki. Wspólna oś jest tym, co czyta się jako "zaprojektowane",
   zanim ktokolwiek spojrzy na kolory. */
.shell {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

main.shell {
  flex: 1;
  padding-block: var(--space-7) var(--space-9);
}

/* --- Typografia ---------------------------------------------------------- */

h1, h2, h3 {
  margin: 0;
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  /* Duży tekst domyślnie wygląda na zbyt rozstrzelony - optyczna korekta,
     nie ozdoba. */
  letter-spacing: -0.012em;
}

h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-base); }

p, ul, ol { margin: 0 0 var(--space-5); }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

/* Rytm tekstu ciągłego: nagłówek należy do tego, co pod nim, więc odstęp nad
   nim musi być wyraźnie większy niż pod. Bez tej pary reguł nagłówek przykleja
   się do akapitu POPRZEDNIEGO i cała hierarchia dokumentu czyta się odwrotnie
   - widać to dopiero na regulaminie, nie na ekranie z tabelą. */
:is(h2, h3):not(:first-child) { margin-top: var(--space-7); }
:is(h1, h2, h3) + :is(p, ul, ol) { margin-top: var(--space-3); }

/* Tekst ciągły dostaje miarę; tabele i listy kontrolek nie - one mają
   wypełniać szerokość. */
main > p, main > ul, main > ol,
main > section > p, main > section > ul:not([class]) {
  max-width: var(--measure);
}

ul, ol { padding-left: var(--space-6); }
li + li { margin-top: var(--space-2); }

strong { font-weight: var(--fw-semi); }

small {
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--ink-muted);
}

/* Monospace = dane użytkownika. Delikatne tło, bo w zdaniu ciągłym sam krój
   ginie, a ramka byłaby krzykiem. */
code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.1em 0.32em;
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
  overflow-wrap: anywhere;
}

hr {
  height: 0;
  margin: var(--space-8) 0;
  border: 0;
  border-top: 1px solid var(--rule);
}

/* Nazwa pliku w tytule ekranu. Reguła stoi w systemie, a nie przy jednym
   ekranie, bo obowiązuje na wszystkich trzech krokach przepływu (plan,
   przetwarzanie, wynik) - a to, że nazwa wygląda wszędzie tak samo, jest
   właśnie tym, co robi z trzech stron jedną drogę. */
h1 code {
  padding: 0.12em 0.34em;
  border: 1px solid var(--rule);
  font-size: 0.78em;
  font-weight: var(--fw-medium);
  letter-spacing: 0;
}

/* --- Odnośniki ------------------------------------------------------------
   Podkreślenie zostaje. Odnośnik rozpoznawalny wyłącznie po kolorze przestaje
   istnieć dla części użytkowników, a w tekście prawnym to nie jest drobiazg. */

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
  transition: text-decoration-color var(--dur);
}

a:hover { text-decoration-color: currentColor; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --- Nagłówek strony ----------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}

.site-header > .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: 52px;
}

.site-header a { text-decoration: none; }

.brand {
  color: var(--ink);
  font-weight: var(--fw-semi);
  font-size: var(--fs-base);
  letter-spacing: -0.01em;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  font-size: var(--fs-sm);
}

.site-nav a { color: var(--ink-muted); }
.site-nav a:hover { color: var(--ink); text-decoration: underline; }

.site-nav form { display: inline; margin: 0; }

/* Wylogowanie musi być POST-em, ale wygląda jak reszta nawigacji - kształt
   przycisku sugerowałby, że to akcja porównywalna z "Clean the file".

   Selektor celowo powtarza `[type="submit"]`: bez tego ma równą szczegółowość
   co reguła przycisku podstawowego, a stoi w pliku wyżej, więc remis
   rozstrzygała kolejność - na niekorzyść tej reguły. */
.site-nav button[type="submit"] {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-muted);
  font: inherit;
  cursor: pointer;
}

.site-nav button[type="submit"]:hover { color: var(--ink); text-decoration: underline; }

/* --- Stopka -------------------------------------------------------------- */

.site-footer {
  margin-top: var(--space-9);
  border-top: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink-muted);
  font-size: var(--fs-xs);
}

.site-footer > .shell { padding-block: var(--space-6); }
.site-footer p { margin-bottom: var(--space-2); }
.site-footer a { color: var(--ink-muted); }
.site-footer a:hover { color: var(--ink); }

/* --- Komunikaty i noty ----------------------------------------------------
   Bez ikon i bez kolorowego tła na całą szerokość. Blok wyróżnia pionowa
   kreska i ledwo widoczne tło - tyle wystarczy, żeby oko go znalazło, i na
   tyle mało, żeby nie krzyczał na stronie, na której krzyczeć ma co innego. */

.messages,
.errors {
  margin: var(--space-6) 0 0;
  padding: var(--space-4) var(--space-5);
  list-style: none;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: var(--fs-sm);
}

.errors {
  border-color: var(--danger-rule);
  border-left-color: var(--danger);
  background: var(--danger-surface);
  color: var(--danger);
}

/* Nota - blok, który mówi coś o stanie danych albo zadania. Powstała na
   ekranie planu, ale używają jej trzy ekrany i fragment HTMX-a, więc mieszka
   w systemie. Odstęp ustawia miejsce użycia, nie sama nota: raz stoi pod
   nagłówkiem strony, raz w kontenerze, który ma własny rytm. */
.notice {
  max-width: var(--measure);
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: var(--fs-sm);
}

/* Nagłówek noty jest etykietą bloku, nie kolejnym stopniem hierarchii strony -
   stąd rozmiar przypisu i wersaliki zamiast wielkości `h2`. */
.notice > h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.notice > ul, .notice > ol { margin: 0; padding-left: var(--space-5); }
.notice li + li { margin-top: var(--space-2); }
.notice p + p { margin-top: var(--space-3); }

.notice--warn {
  border-color: var(--warn-rule);
  border-left-color: var(--warn);
  background: var(--warn-surface);
}

.notice--warn > h2 { color: var(--warn); }

.notice--danger {
  border-color: var(--danger-rule);
  border-left-color: var(--danger);
  background: var(--danger-surface);
}

.notice--danger > h2 { color: var(--danger); }

/* Nota, która nie jest przypisem, tylko treścią - ten sam blok, ale stopień
   pisma jak w tekście ciągłym. Powstała dla ostrzeżenia o charakterze wyniku
   na landingu: najważniejsze zdanie strony nie może być na niej najmniejsze. */
.notice--lead { font-size: var(--fs-base); }

/* --- Licznik przebiegów ---------------------------------------------------
   Wygląda tak samo na stronie głównej i w panelu konta, bo to JEST ta sama
   informacja. User, który widzi ją w dwóch miejscach, ma rozpoznać, że to
   jedna liczba, a nie dwie różne - a to rozstrzyga się wyglądem, zanim
   ktokolwiek przeczyta treść.

   Na stronie głównej blok jest przyspawany do formularza i tam nadpisuje go
   `upload.css`; forma podstawowa jest samodzielna. */
.quota {
  max-width: var(--measure-box);
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface-sunken);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
}

/* Sama liczba (albo zdanie o wyczerpaniu) zostaje w pełnej czerni - po to się
   na ten blok patrzy. */
.quota strong { color: var(--ink); }

.quota p { margin: 0; }
.quota p + p { margin-top: var(--space-2); }

/* --- Formularze ---------------------------------------------------------- */

label { cursor: pointer; }

/* Etykieta samodzielna (nad kontrolką) - blok, półgruba, mniejsza od tekstu.
   Etykieta owijająca kontrolkę zostaje w wierszu; rozpoznajemy ją po tym, że
   ma kontrolkę w środku. */
label:not(:has(input, select, textarea)) {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

input, select, textarea, button { font: inherit; }

input[type="text"],
input[type="search"],
input[type="email"],
select,
textarea {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  transition: border-color var(--dur);
}

input[type="text"]:hover,
input[type="search"]:hover,
select:hover { border-color: var(--ink-faint); }

select {
  appearance: none;
  padding-right: var(--space-6);
  background-image: var(--caret);
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  cursor: pointer;
}

input[type="checkbox"], input[type="radio"] {
  /* Natywna kontrolka przemalowana jedną linijką. Własny checkbox z SVG to
     kilkadziesiąt linijek i utrata zachowań, których prawie nikt nie odtwarza
     poprawnie: stanu nieokreślonego i trybu wysokiego kontrastu. */
  accent-color: var(--btn-bg);
  width: 15px;
  height: 15px;
  margin: 0;
  cursor: pointer;
}

input[type="file"] {
  max-width: 100%;
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

input[type="file"]::file-selector-button {
  margin-right: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}

input[type="file"]::file-selector-button:hover { background: var(--surface-hover); }

/* --- Przyciski ------------------------------------------------------------
   Jedna forma dla akcji podstawowej. Drugorzędnych na razie nie ma i nie
   wymyślamy ich na zapas.

   `.button` istnieje dla POBRANIA wyniku, które musi być odnośnikiem, a nie
   przyciskiem: to nawigacja do zasobu, więc ma działać przez środkowy przycisk
   myszy i „zapisz jako". Wygląd jest wspólny, bo dla użytkownika obie rzeczy
   są tym samym - głównym działaniem na ekranie. */

button[type="submit"],
.button {
  display: inline-block;
  text-decoration: none;
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  cursor: pointer;
  transition: background-color var(--dur);
}

button[type="submit"]:hover,
.button:hover { background: var(--btn-bg-hover); color: var(--btn-fg); }

/* --- Tabele ---------------------------------------------------------------
   `separate` zamiast `collapse`, bo przy przyklejonym nagłówku obramowania
   zebrane odklejają się od komórek podczas przewijania. Kreski rysujemy więc
   pojedynczo, na górnej krawędzi komórki. */

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--space-3) var(--space-4);
  background: var(--bg);
  color: var(--ink-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  /* Wersaliki z rozstrzeleniem: nagłówek kolumny ma być etykietą, a nie
     kolejnym wierszem danych o tej samej wadze wizualnej co reszta. */
  text-transform: uppercase;
  letter-spacing: 0.07em;
  text-align: left;
  white-space: nowrap;
  /* Kreska cieniem, nie obramowaniem - obramowanie przyklejonej komórki
     zostaje w miejscu, z którego komórka odjechała. */
  box-shadow: inset 0 -1px 0 var(--rule-strong);
}

tbody td {
  padding: var(--space-3) var(--space-4);
  vertical-align: top;
}

/* --- Dostępność ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}