/* OEMatic Serwis — system wzorców W1–W4.
   ════════════════════════════════════════════════════════════════════

   JEDNO ŹRÓDŁO PRAWDY. Zasada (decyzja właściciela D-UX-07, rozszerzona
   2026-08-16): każda wartość powtarzająca się choć raz jest tokenem,
   każdy układ powtarzający się choć raz jest klasą. Wpisanie liczby albo
   koloru literałem niżej w pliku, albo w szablonie, jest błędem do
   naprawy — nie stylem lokalnym.

   POCHODZENIE LICZB: wszystkie odczytane przez getComputedStyle z makiety
   projektanta (1440×900). Żadna nie jest przybliżona ani dobrana „na oko".
   Makieta referencyjna: docs/specyfikacja/3-makieta/SYSTEM-WZORCOW.html
   (89 warunków weryfikowanych automatycznie).

   JEDNA LINIA = JEDEN ROZMIAR PISMA (decyzja właściciela 2026-08-16,
   D-UX-12): tekst leżący w jednej linii ma jeden token --fs-*. Tekst pod
   tekstem (nazwa nad metą) to dwie linie i może się różnić. Kontrolki
   (przycisk, plakietka, znacznik) mają własny token i nie liczą się jako
   tekst linii. Zasada wygrywa z makietą projektanta tam, gdzie ta miała
   11/14/10 w jednej linii — układ z makiety zostaje, rozmiary wyrównane.

   Zmiana wyglądu = edycja bloku :root. Nic więcej.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ── KOLORY: atrament i papier ─────────────────────────────────── */
  --ink:        #17212b;   /* tekst główny */
  --ink-2:      #34464c;   /* tekst drugorzędny */
  --ink-3:      #5a6c70;   /* tekst pomocniczy, etykiety */
  --paper:      #ffffff;
  --canvas:     #e8efed;   /* tło poza kartami */
  --surface:    #f5f7f6;   /* pasek nagłówka sekcji */
  --surface-2:  #edf2f1;   /* nagłówek tabeli, nawigacja słowników */
  --line:       #d5dfdd;   /* obrys kart i wierszy */
  --field-line: #829b96;   /* obrys pól i przycisków — kontrast ≥3:1 (WCAG 1.4.11) */
  --topbar-bg:  #fbfdfc;

  /* ── KOLORY: ciemna szyna nawigacji ────────────────────────────── */
  --dark:        #0d2430;
  --dark-active: #1a4652;
  --reverse:     #f7fbfa;
  --rail-text:   #b9cecc;
  --rail-muted:  #87a4a4;
  --rail-line:   rgba(255, 255, 255, 0.08);
  --rail-box:    rgba(255, 255, 255, 0.063);
  --rail-box-bg: rgba(255, 255, 255, 0.03);
  --rail-hover:  rgba(255, 255, 255, 0.04);

  /* ── KOLORY: akcent ────────────────────────────────────────────── */
  --teal:        #146c73;
  --teal-deep:   #0f5e64;
  --teal-pale:   #cde4e1;
  --teal-bright: #6ecac0;   /* jasny akcent na ciemnym tle */
  --on-bright:   #0a3036;   /* tekst NA jasnym akcencie */
  --teal-soft:   #e4f0ee;   /* wypełnienie kropek kroków */
  --teal-wash:   #edf4f2;   /* tło stopki i wyróżnień */
  --focus:       #0b7e86;

  /* ── KOLORY: znaczenie ─────────────────────────────────────────── */
  --amber:       #8a5a17;
  --amber-bg:    #fbf2e5;
  --amber-line:  #f0d9ba;
  --danger:      #b54747;
  --danger-pale: #fff1f1;
  --success:     #547231;
  --mid-bg:      #e1f0ee;
  --mid-line:    #c5dfdc;

  /* ── KOLORY: statusy ────────────────────────────────────────────
     Zmierzone: tło plakietki mają TYLKO info/wait/done. Status pracy
     (Diagnoza/Naprawa/Weryfikacja) to sam tekst + kropka, bez tła. */
  --st-info-fg: #315f79; --st-info-bg: #e8f1f5; --st-info-dot: #5e91ad;
  --st-work-fg: #0d5e64;                        --st-work-dot: #146c73;
  --st-wait-fg: #845611; --st-wait-bg: #fbf2e4; --st-wait-dot: #8a5a17;
  --st-done-fg: #526f32; --st-done-bg: #edf4e6; --st-done-dot: #547231;

  /* ── ROZMIARY PISMA ────────────────────────────────────────────── */
  --fs-9:     9px;      /* meta, podpisy, mikroetykiety */
  --fs-10:    10px;     /* etykiety tabel, nawigacja słowników */
  --fs-brand: 10.88px;  /* podpis marki, etykiety kroków */
  --fs-11:    11px;     /* etykiety pól, wartości faktów */
  --fs-12:    12px;     /* treść tabel, przyciski */
  --fs-13:    13px;     /* pole wyszukiwania, kwoty */
  --fs-14:    14px;     /* cytat, tytuł sekcji formularza */
  --fs-15:    15px;     /* tytuł kroku, kwota brutto */
  --fs-16:    16px;     /* marka, tytuł karty */
  --fs-17:    17px;     /* tytuł karty procesu */
  --fs-18:    18px;     /* tytuł wybranego słownika */
  --fs-19:    19px;     /* tytuł w pasku górnym */
  --fs-28:    28px;     /* tytuł strony */

  /* ── GRUBOŚCI PISMA ────────────────────────────────────────────── */
  --fw-normal: 400;
  --fw-mid:    500;   /* nazwy w tabeli, podpisy */
  --fw-semi:   650;   /* wartości faktów */
  --fw-bold:   700;
  --fw-link:   750;   /* odnośnik-akcja w wierszu */
  --fw-heavy:  800;   /* etykiety, plakietki */
  --fw-black:  850;   /* numer zlecenia w plakietce */
  --fw-max:    900;   /* etykieta wiersza, marka */
  --fw-h1:     730;
  --fw-h2:     720;

  /* ── ODSTĘPY ───────────────────────────────────────────────────── */
  --s2: 2px;   --s4: 4px;   --s6: 6px;   --s7: 7px;   --s8: 8px;
  --s9: 9px;   --s10: 10px; --s11: 11px; --s12: 12px; --s14: 14px;
  --s15: 15px; --s16: 16px; --s18: 18px; --s20: 20px; --s22: 22px;
  --s24: 24px;

  /* ── PROMIENIE ─────────────────────────────────────────────────── */
  --r-xs:     5px;
  --r-sm:     6px;
  --r-md:     7px;
  --r-lg:     8px;
  --r-xl:     9px;
  --r-card:   10px;
  --r-pill:   999px;
  --r-circle: 50%;

  /* ── CIENIE I OBRYSY FOKUSU ────────────────────────────────────── */
  --shadow-primary:       0 5px 14px #146c7320;
  --shadow-primary-hover: 0 7px 18px #146c7328;
  --shadow-focus:         0 0 0 3px #146c7314;
  --outline-focus:        3px solid #0b7e864d;

  /* ── WYMIARY UKŁADU ────────────────────────────────────────────── */
  --rail-w:      178px;
  --topbar-h:    52px;
  --ftab-h:      34px;   /* zakladka filtra; bylo 41 z pomiaru :4174, wlasciciel 2026-08-16: kompaktowo (D-UX-13) */   /* bylo 64 z pomiaru :4174; wlasciciel 2026-08-16: kompaktowo (D-UX-13). Minimum = pole/przycisk 42 + 2x5 */
  --brand-h:     76px;
  --row-h:       48px;
  --field-h:     44px;
  /* Szerokość pola wynika z LICZBY ZNAKÓW, jaką pole może pomieścić — nie
     z miejsca w siatce i nie z oka. Wyprowadzone: znaki × 6.8px (cyfra przy
     --fs-12) + 24px padding + 2px obrys + 17px strzałki pola liczbowego.
     Przydział robi web/pola.py na podstawie deklaracji formularza, więc to
     samo pole ma tę samą szerokość na każdym ekranie. */
  --field-w-xs:   88px;  /* do 6 znaków  — procent, liczba miesięcy, sztuki */
  --field-w-sm:  160px;  /* do 16 znaków — kwota, data, numer telefonu */
  --field-w-md:  248px;  /* do 32 znaków — numer seryjny, katalogowy, NIP */
  /* powyżej 32 znaków oraz każdy wybór z listy → pełna kolumna siatki:
     tekst opcji jest daną, nie stałą, więc nie wolno go przycinać */
  --pagination-h: 56px;  /* pasek stronicowania */
  --publiczny-w:  560px; /* karta widoku publicznego (W5) */
  --btn-h:       40px;   /* domyślna wysokość przycisku */
  --btn-h-top:   42px;   /* przycisk w pasku górnym (równo z polem) */
  --btn-h-card:  34px;   /* akcja w nagłówku karty → renderuje 37px */
  --content-pad: 22px 24px 48px;
  --gutter:      14px;   /* odstęp między kolumnami siatek */

  /* ── PISMO ─────────────────────────────────────────────────────── */
  --font: "Segoe UI Variable Text", "Aptos", "Segoe UI", sans-serif;
  --mono: "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
}

/* ═══ PODSTAWY ═══════════════════════════════════════════════════ */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--canvas); color: var(--ink);
  font-family: var(--font); -webkit-font-smoothing: antialiased;
  /* Podstawa skali. Bez tego kazdy element bez wlasnej klasy dziedziczyl
     16 px domyslnych przegladarki - wartosc spoza systemu, ktorej nikt nie
     wybral. Widac to bylo na surowym <input type="file">: trzy rozne
     rozmiary pisma w jednym wierszu. */
  font-size: var(--fs-12);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ═══ ROLE TEKSTU ════════════════════════════════════════════════
   Każda kombinacja rozmiar+waga+kolor użyta więcej niż raz ma tutaj
   JEDNĄ nazwę. Komponenty jej nie powtarzają.
   ════════════════════════════════════════════════════════════════ */
.t-meta  { font-size: var(--fs-9);  font-weight: var(--fw-normal); color: var(--ink-3); }
.t-label { font-size: var(--fs-11); font-weight: var(--fw-heavy);  color: var(--ink-2); }
.t-sub   { font-size: var(--fs-11); font-weight: var(--fw-normal); color: var(--ink-3); }  /* podtytuł pod h2 karty */
.t-name  { font-size: var(--fs-11); font-weight: var(--fw-bold);   color: var(--ink); }

/* ═══ POWŁOKA APLIKACJI (base.html) ══════════════════════════════
   Zmierzone: przewija się OBSZAR TREŚCI, nie strona. Dlatego pasek
   górny ma pełną szerokość, a treść pod nim mniej o zarezerwowany
   pasek przewijania (scrollbar-gutter: stable).
   ════════════════════════════════════════════════════════════════ */
.shell { display: grid; grid-template-columns: var(--rail-w) 1fr; height: 100vh; overflow: hidden; }
.frame { display: flex; flex-direction: column; min-width: 0; height: 100vh; overflow: hidden; }

/* ── szyna nawigacji ──────────────────────────────────────────── */
.rail {
  background: var(--dark); display: flex; flex-direction: column;
  height: 100vh; border-right: 1px solid var(--rail-line);
}
.brand {
  display: flex; align-items: center; gap: var(--s10);
  height: var(--brand-h); padding: 0 var(--s18); width: 100%;
  background: none; border: none; border-bottom: 1px solid var(--rail-line);
  text-align: left; color: inherit;
}
.brand-mark {
  width: 34px; height: 34px; border-radius: var(--r-circle);
  border: 2px solid var(--teal-bright);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.brand-mark::after {
  content: ""; width: var(--s2); height: var(--s2);
  border-radius: var(--r-circle); background: var(--teal-bright);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: var(--fs-16); font-weight: var(--fw-max); color: var(--reverse); letter-spacing: -0.025em; }
.brand-text span {
  font-size: var(--fs-brand); font-weight: var(--fw-semi); color: var(--teal-bright);
  letter-spacing: 0.12em; text-transform: uppercase; margin-top: 1px;
}

.rail-nav { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s14) var(--s10); }
.rail-nav a {
  display: flex; align-items: center; gap: var(--s9);
  min-height: var(--row-h); padding: 0 var(--s10); width: 100%;
  border-radius: var(--r-lg);
  font-size: var(--fs-12); font-weight: var(--fw-normal); color: var(--rail-text);
}
.rail-nav a svg { width: 20px; height: 20px; flex-shrink: 0; }
.rail-nav a:hover { background: var(--rail-hover); color: var(--reverse); }
.rail-nav a.active { background: var(--dark-active); color: #effaf8; }
/* Plakietka alarmu w nawigacji (P-15: „padlo" musi byc widoczne z kazdego
   ekranu). Geometria z makiety projektanta (.rail-badge). */
.rail-badge {
  margin-left: auto; background: var(--teal-bright); color: var(--on-bright);
  font-size: var(--fs-9); font-weight: var(--fw-heavy);
  min-width: 20px; height: 20px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center; padding: 0 var(--s4);
}
.rail-spacer { flex: 1; }
.rail-status {
  display: flex; align-items: center; gap: var(--s9);
  padding: 13px 0; margin: 0 var(--s14);
  border-top: 1px solid var(--rail-line);
  font-size: var(--fs-11); color: var(--rail-muted);
}
.rail-dot {
  width: var(--s8); height: var(--s8); border-radius: var(--r-circle);
  background: var(--teal-bright); flex-shrink: 0;
  box-shadow: 0 0 0 var(--r-xs) rgba(100, 196, 185, 0.086);
}
.rail-status strong { display: block; font-size: var(--fs-11); font-weight: var(--fw-bold); color: #d8e6e4; }
.rail-user {
  display: flex; align-items: center; gap: var(--s9);
  padding: var(--s11) var(--s8); margin: 0 var(--s10) var(--s14);
  width: calc(100% - 20px);
  border: 1px solid var(--rail-box); border-radius: var(--r-xl); background: var(--rail-box-bg);
}
.avatar {
  width: 30px; height: 30px; border-radius: var(--r-circle); flex-shrink: 0;
  background: var(--teal-bright); color: var(--on-bright);
  font-size: var(--fs-10); font-weight: var(--fw-heavy);
  display: flex; align-items: center; justify-content: center;
}
.rail-user .who { overflow: hidden; text-align: left; }
/* Odnosnik w stopce szyny. Powstal, bo "Wyloguj" musi isc POST-em (GET-owe
   wylogowanie da sie wywolac obcym obrazkiem), a <button> nie wyglada jak
   tekst. Klasa zamiast stylu inline: te same wartosci sluza teraz trzem
   miejscom - wyloguj, haslo i kazde kolejne. */
.rail-link {
  background: none; border: none; padding: 0;
  color: inherit; font: inherit; text-decoration: underline; cursor: pointer;
}
/* Formularz, ktory ma sie zachowywac jak slowo w zdaniu - uzywany tam,
   gdzie akcja musi isc POST-em, a wyglada jak odnosnik w tekscie. */
.wtresci { display: inline; }
.rail-user .who strong { display: block; font-size: var(--fs-11); font-weight: var(--fw-bold); color: #d8e6e4; white-space: nowrap; }
/* .t-meta na ciemnym tle wymaga jaśniejszego odcienia */
.rail .t-meta { color: var(--rail-muted); display: block; margin-top: var(--s2); }

/* ── pasek górny ──────────────────────────────────────────────── */
.topbar {
  background: var(--topbar-bg); border-bottom: 1px solid var(--line);
  height: var(--topbar-h); padding: 0 26px;
  display: flex; align-items: center; gap: var(--s14); flex-shrink: 0;
}
.topbar-title { flex-shrink: 0; }
.topbar-title h1 { font-size: var(--fs-19); font-weight: var(--fw-h1); letter-spacing: -0.03em; }
.topbar-title .t-meta { display: block; margin-top: 1px; }
.search {
  flex: 1; min-width: 200px; height: var(--btn-h-top);
  background: var(--paper); border: 1px solid var(--field-line); border-radius: var(--r-lg);
  display: flex; align-items: center; gap: var(--s9); padding: 0 var(--s12);
}
.search:focus-within { box-shadow: var(--shadow-focus); border-color: var(--focus); }
/* D-UX-19 (2026-08-17): KAZDE pole wprowadzania ma jeden rozmiar pisma -
   --fs-12 (szukanie w pasku, filtr slownika, pola formularzy). Makieta miala
   13/11/12; decyzja wlasciciela: ujednolicic. */
.search input {
  border: none; outline: none; flex: 1; background: transparent;
  font-size: var(--fs-12); color: var(--ink); font-family: inherit;
}
.search input::placeholder { color: #93a3a0; }
.ico-16 { width: 16px; height: 16px; color: var(--ink-3); flex-shrink: 0; }

/* ── obszar treści ────────────────────────────────────────────── */
.main { flex: 1; min-width: 0; min-height: 0; }
.main.flush  { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.main.padded { padding: var(--content-pad); overflow-y: auto; scrollbar-gutter: stable; scrollbar-width: thin; }

/* ── komunikaty (messages framework) ──────────────────────────── */
.komunikaty { padding: var(--s12) var(--s24) 0; display: flex; flex-direction: column; gap: var(--s8);   position: sticky; top: 0; z-index: 2; /* D-UX-16: widoczne po skoku do kotwicy */ }
.komunikat {
  padding: var(--s11) var(--s14); border-radius: var(--r-lg);
  font-size: var(--fs-12); font-weight: var(--fw-mid);
  background: var(--teal-wash); border: 1px solid var(--teal-pale); color: var(--ink);
}
.komunikat--error   { background: var(--danger-pale); border-color: #eecccc; color: var(--danger); }
.komunikat--warning { background: var(--st-wait-bg);  border-color: var(--amber-line); color: var(--st-wait-fg); }

/* ═══ PRZYCISKI ══════════════════════════════════════════════════
   Trzy wysokości, wszystkie przez min-height — tekst nie rozsadzi.
   ════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s7);
  min-height: var(--btn-h); padding: var(--s9) var(--s15);
  border: 1px solid transparent; border-radius: var(--r-lg);
  font-size: var(--fs-12); font-weight: var(--fw-bold); line-height: 17.4px;
  white-space: nowrap; background: none;
}
.btn svg { width: 15px; height: 15px; }
.btn-primary { background: var(--teal); color: #fff; border-color: var(--teal); box-shadow: var(--shadow-primary); }
.btn-primary:hover { background: var(--teal-deep); box-shadow: var(--shadow-primary-hover); }
.btn-primary:focus-visible { outline: var(--outline-focus); outline-offset: var(--s2); }
.btn-ghost { color: var(--ink-2); border-color: var(--field-line); }
.btn-ghost:hover { background: var(--surface-2); }
/* zmierzone: część akcji ma białe tło i ciemniejszy tekst — druga warstwa nacisku */
.btn-ghost.emphasis { background: var(--paper); color: var(--ink); }
.btn-topbar { min-height: var(--btn-h-top); }
.btn-sm     { min-height: var(--btn-h-card); }
.btn-danger { color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger-pale); }

/* ═══ PLAKIETKI ══════════════════════════════════════════════════ */
.pill {
  display: inline-flex; align-items: center; gap: var(--s6);
  height: 28px; font-size: var(--fs-12); font-weight: var(--fw-mid);
  color: var(--ink-2); white-space: nowrap;
}
.pill .dot { width: var(--s6); height: var(--s6); border-radius: var(--r-circle); flex-shrink: 0; }
.pill.work .dot { background: var(--st-work-dot); }
.pill.wait { color: var(--st-wait-fg); background: var(--st-wait-bg); padding: 0 var(--s8); border-radius: var(--r-sm); }
.pill.wait .dot { background: var(--st-wait-dot); }
.pill.done { color: var(--st-done-fg); background: var(--st-done-bg); padding: 0 var(--s8); border-radius: var(--r-sm); }
.pill.done .dot { background: var(--st-done-dot); }
.pill.late { color: var(--danger); background: var(--danger-pale); padding: 0 var(--s8); border-radius: var(--r-sm); }
.pill.late .dot { background: var(--danger); }
/* wypełniona pigułka statusu w nagłówku karty */
.pill-solid {
  display: inline-flex; align-items: center; gap: var(--s6);
  padding: var(--s4) var(--s9); border-radius: var(--r-pill);
  background: var(--teal); color: var(--reverse);
  font-size: var(--fs-10); font-weight: var(--fw-heavy);
}
.pill-solid .dot { width: var(--r-xs); height: var(--r-xs); border-radius: var(--r-circle); background: currentColor; }
/* plakietka informacyjna (typ pliku, wersja) */
.badge { font-size: var(--fs-10); font-weight: var(--fw-heavy); padding: var(--s4) var(--s9); border-radius: var(--r-pill); white-space: nowrap; }
.badge-light { color: var(--amber);      background: var(--amber-bg); border: 1px solid var(--amber-line); }
.badge-mid   { color: var(--st-work-fg); background: var(--mid-bg);   border: 1px solid var(--mid-line); }
/* kółko-znacznik (numer kroku, „i", „?") — rozmiar przez modyfikator */
.marker {
  border-radius: var(--r-circle); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--fw-heavy);
}
.marker svg { width: 14px; height: 14px; }  /* ptaszek wykonanego etapu */
.marker-20 { width: 20px; height: 20px; font-size: var(--fs-11); }
.marker-25 { width: 25px; height: 25px; font-size: var(--fs-10); }
.marker-26 { width: 26px; height: 26px; font-size: var(--fs-14); }
.marker-28 { width: 28px; height: 28px; font-size: var(--fs-11); }
.marker.soft  { background: var(--teal-soft); color: var(--teal); }
.marker.solid { background: var(--teal);      color: var(--reverse); }
.marker.muted { background: var(--surface-2); color: var(--ink-3); }
.marker.ok    { background: var(--success);   color: var(--paper); }

/* ═══ KARTA ══════════════════════════════════════════════════════
   Zmierzone: karty BEZ cienia, tylko obrys. Odstęp między kartami 10px.
   ════════════════════════════════════════════════════════════════ */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); }
.card + .card { margin-top: var(--s10); }
.card-clip { overflow: hidden; }
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s16); flex-wrap: wrap; padding: var(--s7) var(--s14); min-height: 50px;
  border-bottom: 1px solid var(--line); background: var(--surface);
}
.card-head h2 { font-size: var(--fs-16); font-weight: var(--fw-bold); }
.card-actions { display: flex; align-items: center; gap: var(--s8); flex-wrap: wrap; }
.id-badge {
  font-size: var(--fs-12); font-weight: var(--fw-black); letter-spacing: -0.02em;
  padding: var(--r-xs) var(--s7); border-radius: var(--r-sm);
  border: 1px solid var(--teal-pale); color: var(--teal); background: var(--paper);
}
.overline {
  font-size: var(--fs-9); font-weight: var(--fw-heavy); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 3px;
}
/* stan pusty — jedna definicja dla wszystkich wzorców */
.empty { padding: 64px var(--s24); text-align: center; color: var(--ink-3); font-size: var(--fs-12); }
.empty strong { display: block; color: var(--ink); font-size: var(--fs-14); margin-bottom: var(--r-xs); }

/* ═══ W1 — LISTA ═════════════════════════════════════════════════ */
.filters {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  padding: var(--s4) var(--s24); background: var(--topbar-bg); border-bottom: 1px solid var(--line);  /* bylo s10 - D-UX-13 */
}
.ftab {
  display: inline-flex; align-items: center; gap: var(--s6);
  height: var(--ftab-h); padding: 0 var(--s16);
  border: none; border-bottom: 2px solid transparent; background: none;
  font-size: var(--fs-11); font-weight: var(--fw-normal); color: var(--ink-2);
}
.ftab .dot { width: var(--s6); height: var(--s6); border-radius: var(--r-circle); background: var(--ink-3); }
.ftab .n { font-size: var(--fs-11); font-weight: var(--fw-link); color: var(--ink-3); }  /* = .ftab, jedna linia */
.ftab:hover { color: var(--ink); }
.ftab.active { color: var(--teal); font-weight: var(--fw-link); border-bottom-color: var(--teal); }
.ftab.work .dot { background: var(--st-work-dot); }
.ftab.late .dot { background: var(--danger); }
.ftab.done .dot { background: var(--st-done-dot); }
.ftab.wait .dot { background: var(--st-wait-dot); }
/* Panel (workflow-card) osadzony w liscie W1 bez paddingu (main.flush) -
   dostaje wlasny margines, zeby nie dotykal krawedzi. */
.panel-w-liscie { padding: var(--s16) var(--s24) 0; }
.panel-w-liscie .workflow-card { border: 1px solid var(--line); border-radius: var(--r-lg); }

.push { flex: 1; }
.link-action { font-size: var(--fs-11); font-weight: var(--fw-bold); color: var(--teal); padding: var(--s7) var(--s4); }

/* Rejestr = SIATKA (jak w makiecie), nie <table>: odstęp między kolumnami
   jest częścią układu, a tabela HTML nie umie go oddać bez sztuczek.
   Zmierzone: 196.797 251.469 393.594 170.562 135.578 · gap 14 · padding 0 24. */
.ledger { display: flex; flex-direction: column; overflow: auto; scrollbar-gutter: stable; scrollbar-width: thin; }
.ledger-row {
  display: grid; grid-template-columns: 196.8fr 251.5fr 393.6fr 170.6fr 135.6fr;
  gap: var(--gutter); padding: 0 var(--s24); align-items: center;
  min-height: var(--row-h); border-bottom: 1px solid var(--line);
}
.ledger-head {
  min-height: 34px; background: var(--surface-2);
  font-size: var(--fs-10); font-weight: var(--fw-heavy);
  letter-spacing: 0.045em; text-transform: uppercase; color: var(--ink-3);
}
.ledger-body .ledger-row:hover { background: #f4f8f7; }

.rma-id    { font-size: var(--fs-12); font-weight: var(--fw-semi); letter-spacing: -0.02em; color: var(--ink-2); }
.cell-name { font-size: var(--fs-12); font-weight: var(--fw-mid); color: var(--ink-2); }
.cell-when { font-size: var(--fs-12); font-weight: var(--fw-mid); color: var(--ink-3); }
/* obiekt z ikoną (urządzenie) — używany w liście i w formularzu */
.obj { display: flex; align-items: center; gap: var(--s10); }
.obj-icon {
  width: 28px; height: 28px; border-radius: var(--r-md); flex-shrink: 0;
  background: var(--teal-pale); color: var(--teal-deep);
  display: flex; align-items: center; justify-content: center;
}
.obj-icon svg { width: 15px; height: 15px; }
.obj-name { font-size: var(--fs-12); font-weight: var(--fw-bold); color: var(--ink); }
.obj-sub  { font-size: var(--fs-10); font-weight: var(--fw-mid); color: var(--ink-3); margin-top: 1px; }

.pagination {
  display: flex; align-items: center; justify-content: space-between;
  /* min-height, nie height: rejestr jest kolumna flex, wiec sztywna wysokosc
     ustepuje pod flex-shrink i pasek zjezdza do 34 px. Ten sam blad co przy
     przyciskach - dlatego wysokosci w tym systemie sa minimalne, nie stale. */
  min-height: var(--pagination-h); flex-shrink: 0; padding: 0 var(--s24);
  border-top: 1px solid var(--line); background: var(--topbar-bg);
  font-size: var(--fs-10); font-weight: var(--fw-normal); color: var(--ink-3);
}
.pages { display: flex; align-items: center; gap: var(--s4); }
.page-btn {
  width: 32px; height: 32px; border: none; border-radius: var(--r-lg); background: none;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-10); font-weight: var(--fw-normal); color: var(--ink-2);
}
a.page-btn:hover { background: var(--surface-2); }
.page-btn.active { background: var(--teal); color: var(--paper); font-weight: var(--fw-heavy); }
/* Strzałka na skraju listy zostaje na miejscu — znikający przycisk przesunąłby
   sąsiednie numery pod kursor i użytkownik kliknąłby nie to, co chciał. */
.page-btn.disabled { color: var(--line); }
.page-gap { padding: 0 var(--s4); color: var(--ink-3); }
.page-btn svg { width: 14px; height: 14px; }

/* ═══ W2 — KARTA REKORDU ═════════════════════════════════════════ */
/* pasek przebiegu procesu */
.process { padding: var(--s18) var(--s22); }
.process-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: var(--s16); }
.process-head h2 { font-size: var(--fs-14); font-weight: var(--fw-bold); }
.process-head .count { font-size: var(--fs-14); font-weight: var(--fw-bold); color: var(--ink-3); }
.steps { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s8); }
.process-action { margin-top: var(--s16); padding-top: var(--s14); border-top: 1px solid var(--line); }
.step { display: flex; flex-direction: column; align-items: center; gap: var(--s8); text-align: center; flex: 1; position: relative; }
.step:not(:last-child)::after {
  content: ""; position: absolute; top: var(--gutter); left: calc(50% + 22px);
  width: calc(100% - 44px); height: 2px; background: var(--line);
}
.step.done:not(:last-child)::after { background: var(--success); }
.step-label { font-size: var(--fs-11); font-weight: var(--fw-bold); color: var(--ink-2); }
.step .t-meta { display: block; }
.step.now  .t-meta { color: var(--teal); font-weight: var(--fw-heavy); }
.step.done .t-meta { color: var(--success); }
/* Pasek przebiegu procesu (W2) i wybrany rekord (W3) mieszkają w makiecie
   (docs/specyfikacja/3-makieta/SYSTEM-WZORCOW.html) i wrócą tutaj razem
   z funkcją, która ich użyje. Reguła bez elementu to martwy kod i ryzyko
   rozjazdu — pilnuje tego test_design_system.py. */

/* siatka tożsamości: etykieta wiersza + cztery pola. Zmierzone 134/219/243/243. */
.facts { display: flex; flex-direction: column; }
.fact-row {
  display: grid; grid-template-columns: 134px 219px 243px 243px 1fr;
  align-items: center; padding: 0 var(--gutter); min-height: 45px;
  border-bottom: 1px solid var(--line);
}
.fact-row:last-child { border-bottom: none; }
.row-label { font-size: var(--fs-9); font-weight: var(--fw-max); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.fact-label { font-size: var(--fs-9); font-weight: var(--fw-heavy); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s4); }
.fact-value { font-size: var(--fs-11); font-weight: var(--fw-bold); color: var(--ink-2); }
.fact-value.link { color: var(--ink-2); display: inline-flex; align-items: center; gap: var(--r-xs); }
.fact-value.link svg { width: 14px; height: 14px; color: var(--teal-deep); flex-shrink: 0; }
.fact-value.link:hover { color: var(--teal-deep); }
.fact-value.late, .cell-when.late { color: var(--danger); text-decoration: underline dotted; text-underline-offset: var(--s2); }

/* Sekcja rekordu — wzorzec powtarzalny (4× w W2).
   Zmierzone: nagłówek grid 431.25px, padding 8/18, tło --surface; ciało 8/18/12. */
.rec-section header {
  display: grid; grid-template-columns: 431.25px 1fr; align-items: center;
  min-height: var(--row-h); padding: var(--s8) var(--s18); background: var(--surface);
}
.rec-section header h2 { font-size: var(--fs-12); font-weight: var(--fw-bold); }
.rec-section header em { font-style: normal; font-size: var(--fs-12); font-weight: var(--fw-normal); color: var(--ink-3); }  /* = h2, jedna linia */
.rec-body { padding: var(--s8) var(--s18) var(--s12); }
.rec-body blockquote { margin: 0 0 var(--s8) 40px; font-size: var(--fs-14); color: var(--ink); }

/* wiersz faktu: etykieta 260px + wartość */
.record-lines { display: grid; }
.fact { display: grid; grid-template-columns: 260px 1fr; align-items: center; padding: var(--s6) 0; min-height: 36px; }
.fact > span   { font-size: var(--fs-11); font-weight: var(--fw-normal); color: var(--ink-3); }  /* = strong, jedna linia */
.fact > strong { font-size: var(--fs-11); font-weight: var(--fw-semi);   color: var(--ink); }
.fact-action a, .fact-action button {
  display: inline-flex; align-items: center; gap: var(--s6);
  padding: 0; border: none; background: none; text-align: left;
  font-size: var(--fs-11); font-weight: var(--fw-link); color: var(--teal);
}
/* fakt z akcjami po prawej: etykieta | wartość | przyciski. Dla list
   rekordów (wersje pliku, protokoły, kandydaci do scalenia), gdzie po
   lewej ma stać PRAWDZIWA etykieta, a nie dana udająca etykietę. */
.fact-with-actions { grid-template-columns: 260px 1fr auto; gap: var(--s10); }
.fact-with-actions .row-actions { justify-content: flex-end; }
.compact-section-action { margin-top: var(--s8); display: flex; gap: var(--s8); flex-wrap: wrap; }

/* wiersz rekordu (zlecenie na karcie urządzenia/klienta) — układ z :4174
   `.related-order`: numer | nazwa+meta | plakietka | strzałka. Rozmiary
   wyrównane do jednej linii (D-UX-12): projektant miał 11/14, tu 11/11. */
.record-row {
  display: grid; grid-template-columns: 132px 1fr auto 24px; gap: var(--s12);
  align-items: center; padding: 0 var(--s14); min-height: 44px;
  color: inherit; text-align: left;
}
.record-row:hover { background: var(--surface); }
.record-row .rec-num { font-family: var(--mono); font-size: var(--fs-11); font-weight: var(--fw-heavy); color: var(--teal-deep); }
.record-row strong { display: block; font-size: var(--fs-11); font-weight: var(--fw-bold); color: var(--ink); }
.record-row small  { display: block; font-size: var(--fs-9);  font-weight: var(--fw-normal); color: var(--ink-3); }
.row-arrow { width: 30px; height: 34px; display: grid; place-items: center; border-radius: var(--r-lg); color: var(--ink-3); }
.row-arrow svg { width: 15px; height: 15px; }

/* nota integralności (możliwe duplikaty) — układ z :4174 `.integrity-note` */
.integrity-note { display: grid; grid-template-columns: 28px 1fr; gap: var(--s10); padding: var(--s10) 0; color: var(--ink-2); }
.integrity-note svg { width: 18px; height: 18px; color: var(--amber); }
.integrity-note strong { display: block; font-size: var(--fs-14); font-weight: var(--fw-bold); }
.integrity-note p { font-size: var(--fs-11); color: var(--ink-3); margin-top: 3px; }

/* lista dowodów (pliki) */
.evidence-list { display: flex; flex-direction: column; }
.evidence-row { display: grid; grid-template-columns: 42px 1fr auto auto; align-items: center; gap: var(--s10); padding: var(--s7) 0; }
.evidence-thumb {
  width: 42px; height: 42px; border-radius: var(--r-md); flex-shrink: 0;
  background: var(--surface-2); border: 1px solid var(--teal-pale); color: var(--ink-3);
  display: flex; align-items: center; justify-content: center;
}
.evidence-thumb svg { width: 16px; height: 16px; }

/* karta kroku procesu (wycena) — wyróżniona szarym tłem */
.workflow-card { background: var(--surface); padding: var(--s16) var(--s18); }
.workflow-title { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: var(--s15); }
.workflow-title h3 { font-size: var(--fs-17); font-weight: var(--fw-bold); }
.quote-summary { display: grid; grid-template-columns: 1fr 1fr 1fr; background: var(--surface); border: 1px solid var(--line); }
.quote-summary > div { padding: var(--s12); }
.quote-summary strong { display: block; font-size: var(--fs-13); font-weight: var(--fw-bold); margin-top: var(--s2); }
.quote-summary .total { background: var(--surface-2); }
.quote-summary .total strong { font-size: var(--fs-15); }
.body-copy { font-size: var(--fs-14); font-weight: var(--fw-normal); color: var(--ink); margin: var(--s12) 0; }
.decision-callout {
  display: flex; align-items: center; gap: var(--s12); padding: var(--s12);
  background: var(--teal-wash); border: 1px solid var(--teal-pale); flex-wrap: wrap;
}
.decision-callout strong { display: block; font-size: var(--fs-14); font-weight: var(--fw-bold); }
.decision-callout .grow { flex: 1; min-width: 200px; }

/* oś historii */
.timeline { display: flex; flex-direction: column; }
.timeline-row { display: flex; align-items: flex-start; padding-left: 29px; position: relative; min-height: var(--row-h); }
.timeline-row::before {
  content: ""; position: absolute; left: 3px; top: var(--r-xs);
  width: var(--s9); height: var(--s9); border-radius: var(--r-circle);
  background: var(--paper); border: 2px solid var(--teal);
}
.timeline-row:not(:last-child)::after {
  content: ""; position: absolute; left: var(--s7); top: var(--s16); bottom: -4px; width: 1px; background: var(--line);
}
.timeline-row strong { display: block; font-size: var(--fs-11); font-weight: var(--fw-bold); color: var(--ink); }

/* ═══ W3 — FORMULARZ ═════════════════════════════════════════════ */
.page-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s18); }
.page-head h2 { font-size: var(--fs-28); font-weight: var(--fw-h2); letter-spacing: -0.035em; }

.form-panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); }
.form-progress {
  display: grid; grid-template-columns: 26px 1fr 26px 1fr 26px;
  align-items: center; padding: 17px var(--s24) var(--s10);
}
.pline { height: 1px; background: var(--line); }
.plabel { font-size: var(--fs-brand); font-weight: var(--fw-normal); color: var(--ink-3); margin-top: var(--s6); white-space: nowrap; }
.form-section { padding: var(--s22) var(--s24); }
/* zwijana czesc "Nie ma na liscie? Zaloz tutaj" - <details>, zero JS (P-05) */
.form-more { margin-top: var(--s10); }
.form-more summary { cursor: pointer; font-size: var(--fs-11); font-weight: var(--fw-bold); color: var(--teal); padding: var(--s6) 0; }
.form-more[open] summary { margin-bottom: var(--s6); }
.form-section-title { display: flex; align-items: center; gap: var(--s11); margin-bottom: var(--s15); }
.form-section-title h3 { font-size: var(--fs-15); font-weight: var(--fw-bold); }
.form-section-title .grow { flex: 1; }
.form-submit {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--s15);
  padding: var(--s15) var(--s22); background: var(--teal-wash); flex-wrap: wrap;
}
.form-submit .note-left { margin-right: auto; }
.form-submit .note-left strong { display: block; font-size: var(--fs-14); font-weight: var(--fw-bold); }
.process-hint { font-size: var(--fs-10); color: var(--ink-3); margin: var(--s10) 3px 0; }

/* siatka pól: dwie równe kolumny, odstęp 13/16. Pełną szerokość ma tylko .field-wide */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px var(--s16); }
.field { display: flex; flex-direction: column; gap: var(--s7); }
.field-wide { grid-column: 1 / -1; }
/* Ograniczenie idzie na kontrolkę, nie na .field — etykieta ma zostać
   czytelna („Gwarancja (mies.)" nie mieści się w 88px i musiałaby się łamać). */
.field-xs input, .field-xs select { max-width: var(--field-w-xs); }
.field-sm input, .field-sm select { max-width: var(--field-w-sm); }
.field-md input, .field-md select { max-width: var(--field-w-md); }
.field select, .field input, .field textarea {
  min-height: var(--field-h); padding: var(--s10) var(--s12); width: 100%;
  border: 1px solid var(--field-line); border-radius: var(--r-lg); background: var(--paper);
  font-size: var(--fs-12); color: var(--ink); font-family: inherit;
}
.field select:hover, .field input:hover, .field textarea:hover { border-color: var(--teal); }
.field select:focus, .field input:focus, .field textarea:focus { outline: var(--outline-focus); outline-offset: 1px; border-color: var(--focus); }
.field textarea { min-height: 88px; resize: vertical; }
/* Wybor pliku. Przegladarka rysuje tu wlasny przycisk wlasnym pismem -
   bez tych regul w wierszu z plikiem sasiadowaly trzy rozne rozmiary,
   z czego dwa nie pochodzily z zadnej naszej decyzji. */
input[type="file"] { font-size: var(--fs-12); cursor: pointer; }
.field input[type="file"] { padding: var(--s10) var(--s12); }
input[type="file"]::file-selector-button {
  font: inherit; font-size: var(--fs-12); font-weight: var(--fw-bold);
  color: var(--teal); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: var(--r-xs) var(--s10); margin-right: var(--s10); cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--teal-wash); }
.field .help { font-size: var(--fs-10); color: var(--ink-3); }
.field.error input, .field.error select, .field.error textarea { border-color: var(--danger); background: var(--danger-pale); }
.field.error .err, p.err { font-size: var(--fs-11); font-weight: var(--fw-bold); color: var(--danger); }
p.err { margin-bottom: var(--s10); }

/* ═══ W4 — SŁOWNIK ═══════════════════════════════════════════════ */
.dict { display: grid; grid-template-columns: 220px 1fr; min-height: 560px; }
.dict-nav { background: var(--surface-2); padding: var(--s10); display: flex; flex-direction: column; gap: var(--s2); }
.dict-nav a {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: var(--s7) var(--s9); border-radius: var(--r-md);
  font-size: var(--fs-10); font-weight: var(--fw-normal); color: var(--ink-2);
}
.dict-nav a:hover { background: #ffffff9c; }
.dict-nav a.active { background: var(--dark); color: var(--reverse); font-weight: var(--fw-heavy); }
.dict-nav a em { font-style: normal; opacity: 0.7; }
.dict-main { padding: var(--s20); }
.dict-main-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s16); margin-bottom: var(--s4); }
.dict-main h3 { font-size: var(--fs-18); font-weight: var(--fw-bold); margin: var(--s4) 0 3px; }
.mini-search {
  display: flex; align-items: center; gap: var(--s7);
  width: 170px; height: 34px; padding: 0 var(--s9);
  border: 1px solid var(--field-line); border-radius: var(--r-lg); background: var(--paper);
}
.mini-search input { border: none; outline: none; flex: 1; min-width: 0; font-size: var(--fs-12); font-family: inherit; background: transparent; }

/* Podpowiedzi w trakcie pisania (D-UX-20): lista przyciskow pod polem
   szukania - kazdy wiersz w rytmie wiersza faktu (fs-11), tlo jak pole. */
.podpowiedzi:empty { display: none; }
.podpowiedzi-lista { list-style: none; margin: 0 0 var(--s12); padding: 0; border: 1px solid var(--field-line); border-radius: var(--r-lg); background: var(--paper); overflow: hidden; max-width: calc(50% - var(--s8)); }
.podpowiedz { display: block; width: 100%; text-align: left; padding: var(--s10) var(--s12); border: 0; border-bottom: 1px solid var(--line); background: transparent; font: inherit; font-size: var(--fs-11); font-weight: var(--fw-bold); color: var(--ink-2); cursor: pointer; }
.podpowiedzi-lista li:last-child .podpowiedz { border-bottom: 0; }
.podpowiedz:hover, .podpowiedz:focus-visible { background: var(--surface); color: var(--teal-deep); outline: none; }
.podpowiedzi-brak { font-size: var(--fs-11); color: var(--ink-3); margin: 0 0 var(--s12); }


/* tabela słownika: 138.3 153.7 199.8 78 78 192.1 · gap 14 · padding 10/15 */
.dtable { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); overflow: hidden; margin-top: var(--s12); }
.dtable-row {
  /* Piec kolumn, nie szesc: kolumna "Kolejnosc" zniknela razem z polem,
     ktorego uzytkownik nie wypelnia. Szerokosc po niej wraca do nazwy
     i nastepcy - to tam brakowalo miejsca. Proporcje z pomiaru makiety
     (POMIARY.json, wzorzec_w4) przeliczone bez usunietej kolumny. */
  display: grid; grid-template-columns: 138.3fr 190.7fr 240.8fr 78fr 192.1fr;
  gap: var(--gutter); padding: var(--s10) var(--s15); align-items: center;
  min-height: 61px; border-bottom: 1px solid var(--line); font-size: var(--fs-12);
}
.dtable-row:last-child { border-bottom: none; }
.dtable-head {
  min-height: 36px; background: var(--surface-2);
  font-size: var(--fs-10); font-weight: var(--fw-heavy);
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3);
}
.code { font-family: var(--mono); font-size: var(--fs-12); font-weight: var(--fw-semi); color: var(--ink); }
.name-cell { font-weight: var(--fw-bold); }
.row-actions { display: flex; gap: var(--s8); justify-content: flex-end; }
.rule-note {
  display: flex; align-items: center; gap: var(--s9); padding: var(--s11); margin-top: var(--s14);
  background: var(--teal-wash); border: 1px solid var(--teal-pale); border-radius: var(--r-lg);
}
.rule-note p { font-size: var(--fs-9); font-weight: var(--fw-normal); color: var(--ink); }

/* ═══ EKRAN LOGOWANIA (poza powłoką) ═════════════════════════════ */
.auth-wrap {
  min-height: 100vh; background: var(--canvas);
  display: flex; align-items: center; justify-content: center; padding: 40px var(--s20);
}
.auth-card { width: 100%; max-width: 380px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: 32px; }
.auth-card h1 { font-size: var(--fs-19); font-weight: var(--fw-h1); letter-spacing: -0.03em; margin-bottom: var(--s18); }
.auth-card .field + .field { margin-top: var(--s14); }
.auth-card .btn { width: 100%; margin-top: var(--s18); }
/* ═══ W5 — WIDOK PUBLICZNY (klient z linku) ══════════════════════
   Ta sama karta co logowanie, szersza: kwota, opis zakresu i dwie
   odpowiedzi nie mieszcza sie w 380 px bez lamania co drugie slowo.
   Marka powtorzona z logowania jako klasy, nie style inline. */
.auth-card-szeroka { max-width: var(--publiczny-w); }
.brand-publiczna { height: auto; padding: 0 0 var(--s18); border: none; }
.brand-mark-publiczna { border-color: var(--teal); }
/* Specyficznosc musi pobic `.brand-text strong` (0,1,1), inaczej marka
   na jasnej karcie dziedziczy kolor przeznaczony na ciemna szyne i nazwa
   jest praktycznie niewidoczna. Zlapane na zrzucie ekranu W5. */
.brand-text .brand-nazwa { color: var(--ink); }
.brand-text .brand-akcent { color: var(--teal); }
.publiczny-status { display: flex; align-items: center; gap: var(--s12); padding: var(--s16) 0; }
.publiczna-kwota { font-size: var(--fs-28); font-weight: var(--fw-h1); letter-spacing: -0.03em; }
.publiczne-akcje { display: flex; gap: var(--s12); margin-top: var(--s18); }
.publiczne-akcje .btn { margin-top: 0; }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; height: auto; overflow: visible; }
  .rail { position: relative; height: auto; }
  .frame { height: auto; overflow: visible; }
  .main.padded { overflow: visible; }
  .form-grid { grid-template-columns: 1fr; }
  .fact-row { grid-template-columns: 100px 1fr; row-gap: var(--s6); padding: var(--s10) var(--gutter); }
  .dict { grid-template-columns: 1fr; }
  .ledger-row { grid-template-columns: 1fr; row-gap: var(--s6); padding: var(--s12) var(--s24); }
  .ledger-head { display: none; }
}