/* ==========================================================================
   ASYSTENT LIKWIDACJI SZKÓD — arkusz wspólny czterech ekranów makiety.

   Paleta i typografia przejęte 1:1 z „makieta-rdzen-v1.html" (projekt ops app)
   i z „makieta-wydanie-one-page.html" (poprzednia wersja tej makiety).
   Palety NIE rozszerzam. Jedyny kolor spoza niej to żółto-czarna taśma paska
   makiety (#f6c945 / #18181a) — ona też pochodzi z rdzenia.

   Jeden arkusz zamiast czterech kopii: rozjazd wizualny między ekranami
   byłby wtedy kwestią czasu, a mają wyglądać jak rodzeństwo.
   ========================================================================== */
:root{
  --bg-page:#f9f9f7; --bg-surface:#fcfcfb; --bg-raised:#ffffff;
  --text-primary:#18140f; --text-secondary:#544f47; --text-muted:#8c867c;
  --border:rgba(24,20,15,0.11); --border-strong:rgba(24,20,15,0.18);
  --accent:#8a6b28; --accent-hover:#6e5620; --accent-soft:rgba(138,107,40,0.10); --accent-soft-2:rgba(138,107,40,0.20);
  --on-accent:#ffffff;
  --accent2:#0d7d72; --accent2-soft:rgba(13,125,114,0.10);
  --accent3:#3d5a80; --accent3-soft:rgba(61,90,128,0.10);
  --good:#0ca30c; --good-soft:rgba(12,163,12,0.12); --good-ink:#0a7a0a;
  --warning:#b9790a; --warning-soft:rgba(250,178,25,0.20); --warning-ink:#7a5205;
  --critical:#d03b3b; --critical-soft:rgba(208,59,59,0.10); --critical-ink:#a52c2c;
  --grid-line:#e6e4dc; --sidebar-bg:#efece2;
  --shadow-card:0 1px 2px rgba(24,20,15,0.04), 0 10px 28px -16px rgba(24,20,15,0.16);
  --radius-lg:16px; --radius-md:10px; --radius-sm:7px;
  /* KRÓJ PODSTAWOWY — Calibri (właściciel, 15-09-2026: „czcionka bardzo maszynowa
     wygląda, najlepiej calibri"). Kolejność stosu jest celowa i nie wolno jej skracać:
       1) 'Calibri'  — na stanowiskach działu z pakietem Office (Windows) rysuje się
          prawdziwa Calibri, bez pobierania czegokolwiek z sieci;
       2) 'Carlito'  — krój METRYCZNIE ZGODNY z Calibri (te same szerokości znaków),
          dostępny w Google Fonts; sprawdzone 15-09-2026 zapytaniem do
          fonts.googleapis.com/css2?family=Carlito — odpowiedź 200 z krojami
          latin/latin-ext, 400 i 700, prosty i kursywa. Bez tego macOS (brak Calibri)
          zjechałby na czcionkę systemową i oba działy widziałyby co innego;
       3) dopiero potem systemowe.
     UWAGA WYNIKAJĄCA Z KROJU: Calibri i Carlito mają TYLKO grubości 400 i 700.
     Zapisy `font-weight:500` schodzą do 400, a `600` i `800` do 700 — hierarchia
     nagłówków opiera się więc dalej na rozmiarze i odstępach, nie na czterech
     stopniach grubości. Rozmiarów ani układu przy tej zmianie NIE ruszam. */
  --font-display:'Calibri','Carlito',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Calibri','Carlito',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* Stała szerokość ZOSTAJE, ale wyłącznie tam, gdzie niesie znaczenie: numery
     rejestracyjne, daty, kwoty, telefony, identyfikatory spraw, zakresy komórek
     arkusza i rusztowanie makiety. Zmierzone 15-09 przed zmianą: 951 elementów
     na 13 ekranach renderowało się czcionką stałej szerokości — to ona, a nie krój
     tekstu, dawała wrażenie maszyny. */
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg-page); color:var(--text-primary); font-family:var(--font-body); font-size:13.5px; line-height:1.5; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display); margin:0}
p{margin:0}
[hidden]{display:none!important}
button{font-family:inherit}
a{color:var(--accent-hover)}

/* ==========================================================================
   PASEK MAKIETY — celowo NIE wygląda jak produkt (czarne tło, monospace,
   taśma ostrzegawcza). Wzorzec: .rev z makieta-rdzen-v1.html.
   ========================================================================== */
/* ZOSTAJE CELOWO: pasek makiety, notatka projektowa (.note), czarna plakietka
   w panelu (.lewa-mk) i pole zastępcze (.plc-mono) mówią „to nie jest produkt".
   Maszynowy krój jest tu sygnałem, a nie usterką — gdyby wyglądały jak interfejs,
   dział odczytałby rusztowanie makiety jako gotową funkcję. */
.mk{background:#18181a; color:#f2f0e6; font-family:var(--font-mono); border-bottom:2px solid #000; position:sticky; top:0; z-index:50}
.mk-tape{height:7px; background:repeating-linear-gradient(135deg,#f6c945 0 16px,#18181a 16px 32px)}
.mk-in{max-width:1400px; margin:0 auto; padding:7px 20px 8px; display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.mk-title{display:flex; align-items:center; gap:9px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#f6c945; white-space:nowrap}
.mk-title svg{width:14px;height:14px}
.mk-note{font-size:10px; line-height:1.5; color:#a9a599; flex:1 1 300px; min-width:0}
.mk-note b{color:#e8e4d6; font-weight:700}
.mk-adr{margin-left:auto; font-size:10px; color:#a9a599; white-space:nowrap}
.mk-adr code{color:#f6c945}

/* ==========================================================================
   PRODUKT — pasek aplikacji
   ========================================================================== */
.appbar{background:var(--bg-raised); border-bottom:1px solid var(--border); padding:8px 20px}
.appbar-in{max-width:1400px; margin:0 auto; display:flex; align-items:center; gap:18px}
.appbar img{height:30px; width:auto; display:block}
.appbar .div{width:1px; height:26px; background:var(--grid-line)}
.appbar h1{font-size:15px; font-weight:800; letter-spacing:-.01em}
.appbar h1 span{display:block; font-family:var(--font-body); font-size:11px; font-weight:400; color:var(--text-muted); letter-spacing:0}
.appbar .who{margin-left:auto; display:flex; align-items:center; gap:12px; font-size:11.5px; color:var(--text-muted)}
.appbar .who b{color:var(--text-secondary); font-weight:600}
.appbar .av{width:26px;height:26px;border-radius:50%;background:var(--accent-soft);border:1px solid var(--accent-soft-2);color:var(--accent-hover);display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:10.5px}
.home{display:inline-flex; align-items:center; gap:6px; text-decoration:none; color:var(--text-secondary); font-family:var(--font-display); font-weight:700; font-size:11.5px; border:1px solid var(--border-strong); background:var(--bg-page); border-radius:var(--radius-sm); padding:5px 10px}
.home:hover{background:var(--bg-raised); color:var(--accent-hover); border-color:var(--accent-soft-2)}
.home svg{width:12px;height:12px}

.wrap{max-width:1400px; margin:0 auto; padding:10px 20px 14px}
.cols{display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:16px; align-items:start}

/* ==========================================================================
   KARTY, POLA, PRZYCISKI
   ========================================================================== */
.card{background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); overflow:hidden}
.card-h{display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--border); background:var(--bg-surface)}
/* Numer KROKU (1, 2, 3) — jedna cyfra w kółku. Stała szerokość nie daje tu nic,
   bo nie ma czego wyrównywać w kolumnie, a dokłada się do wrażenia maszyny. */
.card-h .no{width:21px;height:21px;border-radius:6px;background:var(--text-primary);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-size:10.5px;font-weight:700;flex:0 0 auto}
/* Plakietka EKRANU (który to moduł) musi wyglądać inaczej niż plakietka KROKU
   (który to etap na tym ekranie). Wyglądały identycznie, więc „3 Szkody w obsłudze"
   obok „1 Karta szkody" czytało się jako kroki jednej sekwencji. Zgłoszone przez
   grafika 07-09-2026, rejestr 100. */
.card-h .no.ekran{background:transparent; color:var(--text-muted); border:1.5px solid var(--border-strong);
  font-family:var(--font-display); font-size:9.5px; font-weight:800; letter-spacing:.04em; width:auto; padding:0 7px; height:19px}
.card-h h2{font-size:14px; font-weight:800}
.card-h .hint{margin-left:auto; font-size:11px; color:var(--text-muted)}
.card-b{padding:11px 16px 10px}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:8px 14px}
.fld{min-width:0}
.fld label,.fld .lb,.cond .lb{display:flex; align-items:center; gap:6px; font-family:var(--font-display); font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); margin-bottom:4px}
.fld .req{color:var(--critical); font-size:12px; line-height:1}
/* Numer pola na papierowej karcie — jedna cyfra w plakietce przy etykiecie.
   To etykieta, nie dana do przepisania; stała szerokość niczego nie porządkuje. */
.fld .num,.cond .num{font-family:var(--font-display); font-size:9.5px; font-weight:700; text-transform:none; color:var(--text-secondary); background:var(--bg-page); border:1px solid var(--border); border-radius:3px; padding:0 4px}
.inp{display:block; width:100%; border:1.5px solid var(--border-strong); background:var(--bg-page); border-radius:var(--radius-sm); padding:7px 10px; font-family:var(--font-body); font-size:14px; color:var(--text-primary)}
.inp:focus{outline:3px solid var(--accent-soft-2); border-color:var(--accent); background:#fff}
/* ZOSTAJE: duże pola przepisywane z dokumentu — numer rejestracyjny (.big)
   i liczby: przebieg, kwota, numer szkody (.num). To jest sedno pracy działu. */
.inp.big{font-family:var(--font-mono); font-size:19px; font-weight:700; letter-spacing:.06em; padding:9px 11px}
.inp.num{font-family:var(--font-mono); font-size:19px; font-weight:700; padding:9px 11px}
.hint{font-size:10.5px; color:var(--text-muted); margin-top:4px; line-height:1.45}
.hint b{color:var(--text-secondary); font-weight:600}
.hint.acc{color:var(--accent-hover)}

.pull{display:flex; align-items:center; gap:11px; background:var(--accent2-soft); border:1px solid rgba(13,125,114,.28); border-left:4px solid var(--accent2); border-radius:var(--radius-sm); padding:8px 12px; margin:8px 0}
.pull .ic{width:24px;height:24px;border-radius:6px;background:var(--accent2);color:#fff;display:grid;place-items:center;flex:0 0 auto}
.pull .ic svg{width:13px;height:13px}
.pull .t{min-width:0}
.pull .t b{display:block; font-family:var(--font-display); font-size:14.5px; font-weight:800; line-height:1.25}
.pull .t span{display:block; font-size:10.5px; color:#2c6d66; margin-top:1px}
.pull .st{margin-left:auto; flex:0 0 auto}

/* PLAKIETKI STANU — 90 wystąpień w plikach HTML, największe pojedyncze źródło
   „maszynowości": to są SŁOWA („brak decyzji TU", „zgłoszona"), nie dane.
   Wersaliki i odstęp międzyliterowy zostają — one niosą rolę plakietki. */
.chip{display:inline-flex; align-items:center; gap:4px; font-family:var(--font-body); font-size:9.5px; font-weight:700; letter-spacing:.03em; padding:2px 7px; border-radius:99px; text-transform:uppercase; white-space:nowrap}
.chip svg{width:10px;height:10px}
.c-good{background:var(--good-soft); color:var(--good-ink); border:1px solid rgba(12,163,12,.3)}
.c-warn{background:var(--warning-soft); color:var(--warning-ink); border:1px dashed var(--warning)}
.c-crit{background:var(--critical-soft); color:var(--critical-ink); border:1px solid rgba(208,59,59,.35)}
.c-mut{background:var(--bg-page); color:var(--text-muted); border:1px solid var(--border)}
.c-acc{background:var(--accent-soft); color:var(--accent-hover); border:1px solid var(--accent-soft-2)}
.c-a3{background:var(--accent3-soft); color:#2f4763; border:1px solid rgba(61,90,128,.3)}
.c-lock{background:#2b2723; color:#f0ede4; border:1px solid #000}

.seg{display:flex; gap:6px}
.fld .seg{max-width:300px}
.seg label{flex:1; position:relative}
.seg input{position:absolute; opacity:0; width:0; height:0}
.seg span{display:block; text-align:center; border:1.5px solid var(--border-strong); background:var(--bg-raised); border-radius:var(--radius-sm); padding:8px 6px; font-family:var(--font-display); font-weight:700; font-size:12.5px; color:var(--text-secondary); cursor:pointer}
.seg input:checked + span{background:var(--accent); border-color:var(--accent); color:#fff}
.seg input:focus-visible + span{outline:3px solid var(--accent-soft-2)}
.seg.sm span{padding:6px 5px; font-size:11.5px}

.cond{display:flex; align-items:center; gap:14px; border:1.5px dashed var(--warning); background:var(--warning-soft); border-radius:var(--radius-md); padding:8px 12px; margin-top:9px}
.cond .lb{color:var(--warning-ink); margin:0; flex:0 0 auto}
.cond .seg{flex:0 0 auto; width:220px}
.cond .hint{color:var(--warning-ink); margin:0; flex:1; min-width:0}

.actbar{display:flex; align-items:center; gap:12px; padding:8px 16px; border-top:1px solid var(--border); background:var(--bg-surface); flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:var(--radius-sm); font-family:var(--font-display); font-weight:700; font-size:13px; padding:10px 15px; border:1px solid transparent; cursor:pointer; text-decoration:none}
.btn svg{width:15px;height:15px}
.btn-pri{background:var(--accent); color:var(--on-accent)}
.btn-pri:hover{background:var(--accent-hover)}
.btn-sec{background:var(--bg-raised); color:var(--text-primary); border-color:var(--border-strong)}
.btn-sec:hover{border-color:var(--accent-soft-2); color:var(--accent-hover)}
.btn-sm{font-size:11.5px; padding:6px 10px}
.btn-xs{font-size:11px; padding:5px 9px}
.btn[disabled]{opacity:.45; cursor:not-allowed}
/* ZOSTAJE: plakietka klawisza — odwzorowuje napis na klawiaturze, nie tekst ekranu. */
.kbd{font-family:var(--font-mono); font-size:10px; background:var(--bg-page); border:1px solid var(--border-strong); border-bottom-width:2px; border-radius:4px; padding:1px 5px; color:var(--text-secondary)}

.sheets{display:flex; flex-direction:column; gap:8px}
.sh{display:flex; gap:10px; align-items:flex-start; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg-raised); padding:9px 11px}
.sh .st{width:22px;height:22px;border-radius:6px;flex:0 0 auto;display:grid;place-items:center}
.sh .st svg{width:12px;height:12px}
.sh.wait .st{background:var(--bg-page); border:1.5px dashed var(--border-strong); color:var(--text-muted)}
.sh.done{background:var(--good-soft); border-color:rgba(12,163,12,.3)}
.sh.done .st{background:var(--good); color:#fff}
.sh .t{min-width:0; flex:1}
.sh .t > b{display:block; font-family:var(--font-display); font-size:12.5px; font-weight:800; line-height:1.3}
.sh .t > span{display:block; font-size:10.5px; color:var(--text-muted); margin-top:2px; line-height:1.45}
.sh.done .t span{color:var(--good-ink)}
/* ZOSTAJE we WSZYSTKICH znacznikach <code>: to są zakresy komórek arkusza
   ('2026'!A18), nazwy blokad i identyfikatory — pracownik ma je przepisać albo
   odnaleźć w arkuszu co do znaku. Dotyczy .sh .t code, .note code, .rule code,
   .body-prev code i .tu .b .why code. */
.sh .t code{font-family:var(--font-mono); font-size:10px; background:var(--bg-page); border:1px solid var(--border); border-radius:3px; padding:0 4px}
.sh.done .t code{background:rgba(255,255,255,.6)}

/* notatka projektowa — element PRZEGLĄDOWY, nie produkt */
.note{font-family:var(--font-mono); font-size:10.5px; line-height:1.6; color:#4a463d; background:#f1efe8; border:1px dashed #b3ada0; border-radius:4px; padding:9px 11px}
.note .nl{display:block; font-size:9px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#8c867c; margin-bottom:5px}
.note b{color:#18140f}
.note code{background:#e6e3d9; border-radius:3px; padding:0 3px}

.banner{display:flex; gap:9px; align-items:flex-start; border-radius:var(--radius-md); padding:10px 12px; font-size:12px; line-height:1.5}
.banner svg{width:16px;height:16px;flex:0 0 auto;margin-top:1px}
.ban-good{background:var(--good-soft); border:1px solid rgba(12,163,12,.3); color:var(--good-ink)}
.ban-warn{background:var(--warning-soft); border:1px solid rgba(185,121,10,.35); color:var(--warning-ink)}
.ban-crit{background:var(--critical-soft); border:1px solid rgba(208,59,59,.35); color:var(--critical-ink)}
.ban-info{background:var(--accent3-soft); border:1px solid rgba(61,90,128,.3); color:#2f4763}
.ban-lock{background:#25262b; border:1px solid #000; color:#e8e6dd}
.banner b{font-weight:700}

.ask{border:2px solid var(--accent); border-radius:var(--radius-lg); background:var(--accent-soft); padding:14px 16px}
.ask h3{font-size:15.5px; font-weight:800; margin-bottom:4px}
.ask p{font-size:12px; color:var(--text-secondary)}
.ask-row{display:flex; flex-direction:column; gap:9px; margin-top:11px}
.ask-opt{min-width:0; background:var(--bg-raised); border:1.5px solid var(--border-strong); border-radius:var(--radius-md); padding:11px 13px}
.ask-opt.pri{border-color:var(--accent); border-width:2px}
.ask-opt b{display:block; font-family:var(--font-display); font-size:13px; font-weight:800; margin-bottom:3px}
.ask-opt span{display:block; font-size:11px; color:var(--text-muted); line-height:1.5}
.ask-opt .foot{margin-top:9px}

/* ==========================================================================
   LISTA / TABELA
   ========================================================================== */
.legend{display:flex; gap:14px; flex-wrap:wrap; align-items:center; font-size:11.5px; color:var(--text-secondary)}
.legend i{width:11px;height:11px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:-1px;border:1px solid}
.legend .ly{background:var(--warning-soft); border-color:rgba(185,121,10,.5)}
.legend .lg{background:var(--good-soft); border-color:rgba(12,163,12,.45)}

table.t{width:100%; border-collapse:collapse; font-size:12.5px}
table.t th{text-align:left; font-family:var(--font-display); font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); padding:9px 10px; border-bottom:1.5px solid var(--border-strong); background:var(--bg-surface); white-space:nowrap}
table.t td{padding:9px 10px; border-bottom:1px solid var(--border); vertical-align:middle}
table.t tr:last-child td{border-bottom:0}
tr.row-y td{background:var(--warning-soft)}
tr.row-g td{background:var(--good-soft)}
tr.row-y td:first-child{box-shadow:inset 4px 0 0 var(--warning)}
tr.row-g td:first-child{box-shadow:inset 4px 0 0 var(--good)}
.veh b{display:block; font-family:var(--font-display); font-size:13px; font-weight:800; line-height:1.25}
/* ZOSTAJE stała szerokość: numer rejestracyjny jest przepisywany z papieru i
   porównywany znak po znaku — tu 0/O i 1/I muszą się różnić. */
.plate{display:inline-block; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.04em; background:var(--bg-raised); border:1px solid var(--border-strong); border-radius:4px; padding:1px 6px; margin-top:3px}
.cust b{display:block; font-weight:600}
/* ZOSTAJE: numer telefonu — ciąg cyfr do odczytania i wybrania, nie tekst. */
.cust span{display:block; font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted); margin-top:1px}
/* ZOSTAJE: daty w tabeli stoją jedna pod drugą — równa szerokość cyfry trzyma
   dzień, miesiąc i rok w kolumnie i pozwala porównać wiersze wzrokiem. */
.dt{font-family:var(--font-mono); font-size:12px; white-space:nowrap}
.dt small{display:block; font-family:var(--font-body); font-size:10px; color:var(--text-muted)}
/* ZOSTAJE: pole daty w wierszu tabeli — ta sama dana co .dt, ten sam powód. */
.cellinp{width:112px; border:1.5px solid var(--border-strong); background:var(--bg-raised); border-radius:var(--radius-sm); padding:5px 7px; font-family:var(--font-mono); font-size:12px; color:var(--text-primary)}
.cellinp.empty{border-color:var(--warning); border-style:dashed; background:rgba(255,255,255,.7)}
.cellinp:focus{outline:3px solid var(--accent-soft-2); border-color:var(--accent)}
td.act{text-align:right; white-space:nowrap}
.rowtag{display:block; font-size:10px; color:var(--warning-ink); margin-top:4px; line-height:1.4}

.subhead{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:11px}
.subhead h2{font-size:18px; font-weight:800; letter-spacing:-.01em}
/* Licznik „9 pozycji" — liczba ze słowem, czytana raz, nieporównywana z niczym. */
.count{font-family:var(--font-body); font-size:11px; color:var(--text-muted); background:var(--bg-raised); border:1px solid var(--border); border-radius:99px; padding:3px 9px}
.stats{display:flex; gap:8px; margin-left:auto; flex-wrap:wrap}

/* filtry z licznikami (sekcja 64.4) */
.filters{display:flex; gap:7px; flex-wrap:wrap; align-items:center; background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-md); padding:8px 10px; margin-bottom:11px}
.filters .flab{font-family:var(--font-display); font-size:9.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); margin-right:3px}
.fbtn{display:inline-flex; align-items:center; gap:7px; border:1.5px solid var(--border-strong); background:var(--bg-page); border-radius:99px; padding:5px 11px 5px 12px; font-family:var(--font-display); font-size:12px; font-weight:700; color:var(--text-secondary); cursor:pointer}
/* Licznik w pigułce filtra stoi w jednym rzędzie z proporcjonalnym podpisem
   filtra — dwie czcionki w jednym przycisku widać jako usterkę składu. */
.fbtn u{font-style:normal; text-decoration:none; font-family:var(--font-body); font-size:10.5px; font-weight:700; background:var(--bg-raised); border:1px solid var(--border); border-radius:99px; padding:0 6px; color:var(--text-primary)}
.fbtn:hover{border-color:var(--accent-soft-2)}
.fbtn[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:#fff}
.fbtn[aria-pressed="true"] u{background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.35); color:#fff}
.fbtn.warn{border-color:rgba(185,121,10,.55); color:var(--warning-ink); background:var(--warning-soft)}
.fbtn.warn u{background:rgba(255,255,255,.65); border-color:rgba(185,121,10,.3); color:var(--warning-ink)}

/* ==========================================================================
   STRONA GŁÓWNA — kafelki
   ========================================================================== */
.hero{max-width:1400px; margin:0 auto; padding:13px 20px 0}
.hero h2{font-size:21px; font-weight:800; letter-spacing:-.015em}
.hero p{font-size:12.5px; color:var(--text-secondary); margin-top:4px; max-width:760px}
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:1400px; margin:0 auto; padding:12px 20px 0}
.tile{display:flex; flex-direction:column; gap:9px; text-decoration:none; color:inherit; background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:16px 17px 14px; min-height:0}
.tile:hover{border-color:var(--accent-soft-2); box-shadow:0 1px 2px rgba(24,20,15,.05), 0 16px 34px -18px rgba(138,107,40,.45)}
.tile .top{display:flex; align-items:center; gap:10px}
.tile .ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;background:var(--accent-soft);color:var(--accent-hover);border:1px solid var(--accent-soft-2)}
.tile .ic svg{width:17px;height:17px}
.tile.t2 .ic{background:var(--accent2-soft); color:#0d7d72; border-color:rgba(13,125,114,.28)}
.tile.t3 .ic{background:var(--accent3-soft); color:#2f4763; border-color:rgba(61,90,128,.28)}
.tile h3{font-size:16.5px; font-weight:800; letter-spacing:-.01em}
/* Adres ekranu na kafelku („/wydanie") — podpis pomocniczy, nie dana z dokumentu. */
.tile .adr{font-family:var(--font-body); font-size:10px; color:var(--text-muted); margin-left:auto}
.tile .desc{font-size:12px; color:var(--text-secondary); line-height:1.55; flex:1}
.tile .cnt{display:flex; align-items:baseline; gap:8px; border-top:1px dashed var(--border-strong); padding-top:9px}
.tile .cnt b{font-family:var(--font-display); font-size:27px; font-weight:800; line-height:1; color:var(--accent-hover)}
.tile.t2 .cnt b{color:#0b6a61}
.tile.t3 .cnt b{color:#2f4763}
.tile .cnt span{font-size:12px; color:var(--text-secondary)}
.tile .cnt2{display:flex; gap:6px; flex-wrap:wrap; margin-top:2px}
.tile .go{display:flex; align-items:center; gap:6px; font-family:var(--font-display); font-weight:800; font-size:12.5px; color:var(--accent-hover)}
.tile .go svg{width:14px;height:14px}
.foot{max-width:1400px; margin:0 auto; padding:12px 20px 12px; display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start}

/* ==========================================================================
   EKRAN „NUMER SZKODY I PISMA"
   ========================================================================== */
.cols-c{display:grid; grid-template-columns:390px minmax(0,1fr); gap:16px; align-items:start}
.search{position:relative}
.search .inp{padding-left:32px; font-size:13px}
.search svg{position:absolute; left:10px; top:50%; margin-top:-7px; width:14px; height:14px; color:var(--text-muted)}
.qlist{list-style:none; margin:0; padding:0; max-height:620px; overflow:auto}
.qlist li{border-bottom:1px solid var(--border)}
.qlist li:last-child{border-bottom:0}
.qi{display:flex; gap:10px; align-items:flex-start; width:100%; text-align:left; background:transparent; border:0; padding:9px 14px; cursor:pointer; border-left:4px solid transparent}
.qi:hover{background:var(--bg-surface)}
.qi[aria-current="true"]{background:var(--accent-soft); border-left-color:var(--accent)}
/* „14 dni" — tekst wyśrodkowany w stałej ramce 46 px, więc cyfry i tak nie stoją
   w kolumnie; stała szerokość nie kupuje tu porównywalności, tylko surowość. */
.qi .age{flex:0 0 auto; width:46px; font-family:var(--font-body); font-size:10px; font-weight:700; color:var(--warning-ink); background:var(--warning-soft); border:1px solid rgba(185,121,10,.3); border-radius:4px; padding:2px 0; text-align:center; margin-top:2px}
.qi .age.old{color:var(--critical-ink); background:var(--critical-soft); border-color:rgba(208,59,59,.35)}
.qi .b{min-width:0; flex:1}
.qi .b b{display:block; font-family:var(--font-display); font-size:13px; font-weight:800; line-height:1.25; color:var(--text-primary)}
.qi .b em{display:block; font-style:normal; font-size:11.5px; color:var(--text-secondary); margin-top:1px}
/* ZOSTAJE: trzecia linia pozycji kolejki to „wydanie 12.08.2026 · S-2026-0187",
   czyli data i identyfikator sprawy. */
.qi .b i{display:block; font-style:normal; font-size:10px; color:var(--text-muted); margin-top:3px; font-family:var(--font-mono)}

.reqs{display:flex; gap:7px; flex-wrap:wrap; margin-top:8px}
/* Pigułka „zdjęcia: brak" — zdanie o stanie dokumentu, nie identyfikator. */
.req-i{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-family:var(--font-body); border-radius:99px; padding:3px 9px; border:1px solid}
.req-i svg{width:11px;height:11px}
.req-i.ok{background:var(--good-soft); color:var(--good-ink); border-color:rgba(12,163,12,.3)}
.req-i.no{background:var(--critical-soft); color:var(--critical-ink); border-color:rgba(208,59,59,.35)}

.tu{display:flex; gap:12px; align-items:flex-start; border:1.5px dashed var(--accent3); background:var(--accent3-soft); border-radius:var(--radius-md); padding:11px 13px}
.tu .ic{width:30px;height:30px;border-radius:8px;background:var(--accent3);color:#fff;display:grid;place-items:center;flex:0 0 auto}
.tu .ic svg{width:15px;height:15px}
.tu .b{flex:1; min-width:0}
.tu .b .k{font-family:var(--font-display); font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#2f4763}
.tu .b h4{font-size:17px; font-weight:800; margin-top:2px}
/* ZOSTAJE: adres e-mail towarzystwa — pomyłka w jednym znaku kieruje pismo w próżnię. */
.tu .b .mail{font-family:var(--font-mono); font-size:12px; color:#2f4763; margin-top:2px; word-break:break-all}
.tu .b .why{font-size:10.5px; color:#3f5877; margin-top:4px}
.tu .b .why code{background:rgba(255,255,255,.6); border-radius:3px; padding:0 4px; font-family:var(--font-mono)}
.tu select{border:1.5px solid var(--border-strong); background:var(--bg-raised); border-radius:var(--radius-sm); padding:6px 8px; font-family:var(--font-body); font-size:12px; color:var(--text-primary); max-width:210px}
.tu select:focus{outline:3px solid var(--accent-soft-2); border-color:var(--accent)}

.mail-h{display:grid; grid-template-columns:78px 1fr; gap:5px 10px; font-size:12.5px; align-items:center}
.mail-h .k{font-family:var(--font-display); font-size:9.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); text-align:right}
/* ZOSTAJE: nagłówki wiadomości (adresat, temat z numerem sprawy) — pole adresowe. */
.mail-h .v{font-family:var(--font-mono); font-size:12px; background:var(--bg-page); border:1px solid var(--border); border-radius:var(--radius-sm); padding:6px 9px; min-width:0; word-break:break-word}
.mail-h .v.fixed{background:#f1efe8; border-style:dashed; border-color:#b3ada0}
.mail-h .v.fixed b{color:var(--accent-hover)}
.body-prev{border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-page); padding:10px 12px; font-size:12px; line-height:1.6; color:var(--text-secondary); max-height:168px; overflow:auto; position:relative}
.body-prev p + p{margin-top:8px}
.body-prev code{font-family:var(--font-mono); font-size:11px; background:var(--accent-soft); border-radius:3px; padding:0 4px; color:var(--accent-hover)}
/* Stopka podglądu treści („dalszy ciąg w PDF") — zdanie do przeczytania. */
.cut{font-family:var(--font-body); font-size:10px; color:var(--text-muted); border-top:1px dashed var(--border-strong); margin-top:9px; padding-top:7px}
.att{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:6px}
.att li{display:flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-raised); padding:7px 10px; font-size:12px}
.att li svg{width:14px;height:14px;color:var(--text-muted);flex:0 0 auto}
.att li b{font-weight:600}
.att li .chip{margin-left:auto}
.out{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start}
/* Dwie kolumny trzymamy do 1080 px — laptop 1280 i 1200 ma je zachować.
   Same karty wyjściowe łamiemy wcześniej, bo Pismo 1 potrzebuje szerokości. */
@media (max-width:1360px){ .out{grid-template-columns:1fr} }
@media (max-width:1080px){
  .cols,.cols-c{grid-template-columns:1fr}
  .qlist{max-height:none}
}
/* Trzy kafelki mieszczą się obok siebie także na laptopie 1280 px — łamiemy je
   dopiero poniżej 900 px, żeby strona główna nie zaczęła się przewijać. */
@media (max-width:900px){ .tiles{grid-template-columns:1fr} .foot{grid-template-columns:1fr} }

/* ==========================================================================
   EKRAN „POTWIERDŹ ODBIÓR"
   Komponenty dopisane do arkusza wspólnego, nie do osobnego pliku — ten ekran
   ma być rodzeństwem trzech pozostałych, a nie ich kuzynem. Żadnego koloru
   spoza palety.
   ========================================================================== */

/* Pasek sprawy — CZĘŚĆ TYLKO DO ODCZYTU. Celowo wygląda inaczej niż pola
   formularza (tło powierzchni, brak ramek pól), żeby pracownik od razu
   widział, czego na tym ekranie nie zmienia. */
.caseh{display:flex; align-items:center; gap:0; flex-wrap:wrap; padding:7px 16px; border-bottom:1px solid var(--border); background:var(--bg-surface)}
.caseh .cell{padding:0 16px; border-left:1px solid var(--grid-line); min-width:0}
.caseh .cell:first-child{padding-left:0; border-left:0}
.caseh .k{display:block; font-family:var(--font-display); font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin-bottom:2px}
.caseh .v{display:block; font-family:var(--font-display); font-size:14px; font-weight:800; line-height:1.25; white-space:nowrap}
.caseh .v small{display:block; font-family:var(--font-body); font-size:10.5px; font-weight:400; color:var(--text-muted); margin-top:1px}
/* ZOSTAJE: identyfikator sprawy i numer rejestracyjny w pasku sprawy. */
.caseh .v.mono{font-family:var(--font-mono); font-size:13px; letter-spacing:.03em}
.caseh .veh-b{display:flex; align-items:center; gap:9px}
.caseh .ro{margin-left:auto; padding-left:16px}

/* Lista wyboru, w której KAŻDY stan niesie swój skutek. Trzy stany
   odpowiedzialności i pełnomocnictwa (68.2) różnią się nie nazwą, tylko tym,
   co po nich robi automat — więc skutek stoi przy opcji, nie w legendzie obok. */
.opts{display:flex; flex-direction:column; gap:5px}
/* Uwaga: .opt jest elementem <label> WEWNĄTRZ .fld, a reguła `.fld label`
   narzuca wersaliki, 10 px i kolor wyciszony. Bez tego zerowania opisy skutków
   szły wersalikami i łamały się na dwie linie — ekran przestawał się mieścić. */
.fld .opt,.opt{display:flex; align-items:center; gap:9px; border:1.5px solid var(--border-strong); background:var(--bg-raised); border-radius:var(--radius-sm); padding:6px 10px; cursor:pointer; min-width:0;
  text-transform:none; letter-spacing:normal; font-family:var(--font-body); font-size:13px; font-weight:400; color:var(--text-primary); margin-bottom:0}
.opt input{position:absolute; opacity:0; width:0; height:0}
.opt .dot{width:11px; height:11px; border-radius:50%; flex:0 0 auto; border:1px solid}
.opt .dot.d-good{background:var(--good-soft); border-color:var(--good)}
.opt .dot.d-warn{background:var(--warning-soft); border-color:var(--warning)}
.opt .dot.d-crit{background:var(--critical-soft); border-color:var(--critical)}
.opt .dot.d-mut{background:var(--bg-page); border-color:var(--border-strong)}
.opt .tx{min-width:0; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.opt .tx b{font-family:var(--font-display); font-size:12px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; white-space:nowrap}
.opt .tx em{font-style:normal; font-size:10.5px; color:var(--text-muted); line-height:1.35}
.opt:hover{border-color:var(--accent-soft-2)}
.opt:has(input:checked){border-color:var(--accent); border-width:1.5px; background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent)}
.opt:has(input:checked) .tx em{color:var(--text-secondary)}
.opt:has(input:focus-visible){outline:3px solid var(--accent-soft-2)}

/* Pole z odniesieniem do wartości już zapisanej w rejestrze — pracownik ma
   widzieć, z czym porównuje, bez otwierania arkusza. */
.withref{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; align-items:stretch}
.ref{display:flex; flex-direction:column; justify-content:center; background:var(--bg-page); border:1px dashed var(--border-strong); border-radius:var(--radius-sm); padding:5px 11px; white-space:nowrap}
.ref .k{font-family:var(--font-display); font-size:9px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted)}
/* ZOSTAJE: wartość z rejestru, z którą pracownik PORÓWNUJE to, co wpisuje. */
.ref .v{font-family:var(--font-mono); font-size:15px; font-weight:700; color:var(--text-secondary); margin-top:1px}

/* Blok blokady walidacyjnej — pojawia się POD polem, którego dotyczy. */
.err{margin-top:6px}
.err[hidden]{display:none}

/* Trzy arkusze w poziomie — na tym ekranie podsumowanie stoi na dole,
   pod polami, a nie w kolumnie bocznej jak przy wydaniu. */
.sheets.row{flex-direction:row; gap:10px}
.sheets.row .sh{flex:1 1 0; min-width:0}
.sheets.row .sh .t span{white-space:normal}
@media (max-width:1080px){ .sheets.row{flex-direction:column} }

/* ============================================================================
   KOLUMNA „Numer szkody" w liście spraw w toku  (rejestr, sekcja 70)
   Żółty znaczy DOKŁADNIE JEDNO: szkoda jest zgłoszona, a numeru jeszcze nie ma
   — czyli to jest do uzupełnienia i prowadzi wprost na ekran uzupełnienia.
   Sprawa NIEZGŁOSZONA nie jest żółta: brakuje w niej zgłoszenia, nie numeru.
   Gdyby żółte było każde puste pole, kolor przestałby cokolwiek znaczyć.
   Kolory wyłącznie z palety --warning* — palety nie rozszerzamy (61.1).
   ========================================================================== */
/* ZOSTAJE: numer szkody to identyfikator towarzystwa — porównywany znak po znaku. */
.nrs{font-family:var(--font-mono); font-size:11.5px; font-weight:600; letter-spacing:-.1px; color:var(--text-primary)}
.nrs a.uzup{display:inline-flex; align-items:center; gap:5px; text-decoration:none;
  font-family:var(--font-body); font-size:10.5px; font-weight:700; white-space:nowrap;
  background:var(--warning-soft); color:var(--warning-ink);
  border:1px dashed var(--warning); border-radius:var(--radius-sm); padding:3px 8px}
.nrs a.uzup:hover{background:rgba(250,178,25,.34); border-style:solid}
.nrs a.uzup svg{width:12px; height:12px; flex:0 0 auto}
.nrs .nd{font-family:var(--font-body); font-size:10.5px; color:var(--text-muted)}
/* Dopisek pod numerem szkody („8 dni bez numeru · ERGO-HESTIA", „zapytać CLIOS")
   dziedziczył stałą szerokość po kolumnie. Numer zostaje maszynowy, komentarz obok
   niego — nie; zauważone na zrzucie po zmianie kroju, nie w kodzie. */
.nrs .rowtag{margin-top:3px; font-family:var(--font-body)}

/* ==========================================================================
   PRZEGLĄD GRAFICZNY 07-09-2026 — czytelność i hierarchia.
   Powód: „póki co dosyć nieintuicyjne" (właściciel, 07-09-2026).
   Zasada bloku: NIC nie jest usuwane i nie zmienia się ani jedna liczba
   ani nazwa pola. Zmienia się wyłącznie WAGA WIZUALNA — co czytamy pierwsze.
   Kolory tylko ze zmiennych z :root. Palety nie rozszerzam (61.1).
   ========================================================================== */

/* --- 1. FOKUS KLAWIATURY -------------------------------------------------
   Ekran jest obsługiwany z klawiatury (dział przepisuje z papieru, jedna ręka
   trzyma dokument). Dotąd fokus był widoczny WYŁĄCZNIE na polach tekstowych:
   przyciski, odnośniki, filtry i kafelki nie miały żadnej reguły, więc
   pracownik idący Tabem przez osiem wierszy „Potwierdź odbiór" nie widział,
   na którym stoi. Jeden pierścień dla wszystkiego, co da się ustawić fokusem. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}
/* Na ciemnych tłach (pasek makiety, czarna banda ŚRO-05) mosiądz ginie —
   tam pierścień jest jasny, żeby zachował kontrast. */
.mk a:focus-visible,
.ban-lock a:focus-visible,
.seam a:focus-visible{outline-color:#f6c945}
/* Kafelek jest dużym celem — pierścień przy samej krawędzi wygląda na obwódkę
   karty, dlatego odsunięty mocniej i z zaokrągleniem kafelka. */
.tile:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:var(--radius-lg)}

/* --- 2. LICZBA DNI NAJMU ODZYSKUJE WAGĘ ----------------------------------
   To jest liczba, która trafia na fakturę, a była NAJSŁABSZYM tekstem
   w całym wierszu: 10 px, kolor wyciszony, pod datą. Data wydania jest
   tylko wejściem do tej liczby — więc to liczba dni ma być czytana pierwsza.
   Treść bez zmian: nadal „16 dni najmu" w tym samym znaczniku <small>. */
.dt small{font-size:11.5px; font-weight:700; color:var(--text-secondary); margin-top:2px}
tr.row-y .dt small{color:var(--warning-ink)}
tr.row-g .dt small{color:var(--text-secondary)}

/* --- 3. JEDEN JĘZYK DLA RUSZTOWANIA MAKIETY ------------------------------
   Dotąd „to nie jest produkt" mówiły DWA niepowiązane sygnały: czarny pasek
   z taśmą u góry i beżowe pole z kreskowaną ramką na dole. Uczyć trzeba się
   było obu. Notatka dostaje tę samą czarno-żółtą taśmę co pasek — sygnał jest
   jeden i rozpoznawalny kątem oka. Ani jedno słowo notatki nie znika. */
.note{position:relative; padding-left:15px; background:#f4f2ec; border-color:#c3bdae}
.note::before{content:""; position:absolute; left:0; top:0; bottom:0; width:6px;
  border-radius:4px 0 0 4px;
  background:repeating-linear-gradient(135deg,#f6c945 0 8px,#18181a 8px 16px)}
.note .nl{color:#6f6a5e}

/* --- 4. DATY WYGLĄDAJĄ WSZĘDZIE TAK SAMO ---------------------------------
   Ta sama data była mono w tabeli odbiorów (.cellinp), a proporcjonalna
   w formularzach (.inp). Data i przebieg to dane liczbowe przepisywane
   z papieru — cyfra o stałej szerokości czyta się przy przepisywaniu szybciej
   i łatwiej ją porównać z dokumentem w ręku. */
.inp[type="date"]{font-family:var(--font-mono); font-size:14.5px; letter-spacing:.02em}

/* --- 5. REGUŁA DLA PRACOWNIKA ≠ NOTATKA DLA NAS --------------------------
   Znalezisko przy przeglądzie 07-09-2026: klasa .note niosła DWA przeciwne
   znaczenia. Dziewięć razy znaczyła „to nie jest część aplikacji", a raz —
   w ramce „Jak liczymy dni" na ekranie potwierdzenia odbioru — dokładnie
   odwrotnie: to reguła liczenia dni najmu, którą pracownik MA znać, bo
   towarzystwo ją kwestionuje. Ten sam pojemnik dla „zignoruj to" i „zapamiętaj
   to" jest źródłem nieufności do całego oznaczenia.

   .rule zachowuje zwięzły skład monospace (to wywód rachunkowy, cyfry mają
   stać w kolumnie), ale ma tony PRODUKTU: pełna ramka zamiast kreskowanej,
   podpis w mosiądzu, żadnej taśmy. Treść bez zmian. */
/* ZGŁOSZENIE ROZJAZDU (grafik, 15-09-2026): komentarz powyżej uzasadniał monospace
   tym, że „to wywód rachunkowy, cyfry mają stać w kolumnie". Sprawdzone w treści:
   ramka „Jak liczymy dni" to TRZY ZDANIA prozy z liczbami w środku wiersza —
   ani jednej kolumny liczb. Uzasadnienie nie odpowiadało treści, więc krój schodzi
   do tekstowego. Ramka, pasek w mosiądzu i podpis zostają bez zmian — to one
   odróżniają regułę dla pracownika od notatki projektowej. */
.rule{font-family:var(--font-body); font-size:11px; line-height:1.6; color:var(--text-secondary);
  background:var(--bg-surface); border:1px solid var(--border-strong); border-left:3px solid var(--accent);
  border-radius:var(--radius-sm); padding:9px 11px}
.rule .nl{display:block; font-family:var(--font-display); font-size:9px; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; color:var(--accent-hover); margin-bottom:5px}
.rule b{color:var(--text-primary)}
.rule code{background:var(--bg-page); border:1px solid var(--border); border-radius:3px; padding:0 3px}

/* --- 6. FOKUS NA POLACH I PRZEŁĄCZNIKACH — ta sama siła co reszta ---------
   Pole tekstowe miało pierścień w mosiądzu 20% krycia. Na tle #f9f9f7 to
   ledwie widoczny obrys — a to jest ekran, na którym pracownik PRZEPISUJE
   z papieru: patrzy w dokument, wraca wzrokiem na ekran i musi w ułamku
   sekundy odnaleźć pole, w którym stoi. Ten sam pełny mosiądz co przy
   przyciskach, żeby „gdzie jestem" miało jedną odpowiedź na wszystkich
   ekranach. Krycia ani grubości nie różnicuję między rodzajami pól. */
.inp:focus,
.cellinp:focus,
.tu select:focus{outline:3px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.seg input:focus-visible + span{outline:3px solid var(--accent); outline-offset:2px}
.opt:has(input:focus-visible){outline:3px solid var(--accent); outline-offset:2px}


/* =====================================================================
   PANEL MODUŁÓW PO LEWEJ — wzorzec z `zastepczak-ops` (13-09-2026),
   zastosowany do wszystkich ekranów 14-09 na polecenie właściciela:
   „makieta powinna wyglądać podobnie na wzór zastępczak ops".
   Reguły przeniesione ze `szkielet.html`, gdzie mieszkały przez dobę same.
   Markup buduje `makieta/panel.js` — jedno źródło listy modułów.
   ===================================================================== */
.app{display:grid; grid-template-columns:288px minmax(0,1fr); align-items:start;
     max-width:1400px; margin:0 auto; min-height:calc(100vh - 120px)}

/* ---------- PANEL BOCZNY ---------- */
.lewa{position:sticky; top:0; align-self:start; max-height:100vh; overflow:auto;
      background:var(--sidebar-bg); border-right:1px solid var(--grid-line); padding:0 0 10px}
.lewa-h{display:flex; align-items:center; gap:8px; padding:11px 14px 9px}
.lewa-h > b{font-family:var(--font-display); font-size:11px; font-weight:800; letter-spacing:.1em;
      text-transform:uppercase; color:var(--text-muted)}
.zwin{margin-left:auto; display:inline-flex; align-items:center; gap:5px; cursor:pointer;
      font-family:var(--font-display); font-size:10px; font-weight:700; letter-spacing:.05em;
      text-transform:uppercase; color:var(--text-secondary);
      background:var(--bg-raised); border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:4px 7px}
.zwin:hover{color:var(--accent-hover); border-color:var(--accent-soft-2)}
.zwin svg{width:11px;height:11px}

/* Plakietka „to szkielet" — element PRZEGLĄDOWY, celowo w stylistyce czarnej taśmy,
   nie interfejsu. Zostaje na ekranie przy przewijaniu, bo panel jest przyklejony. */
.lewa-mk{margin:0 10px 10px; background:#18181a; border:1px solid #000; border-radius:var(--radius-sm); overflow:hidden}
.lewa-mk .tape{height:5px; background:repeating-linear-gradient(135deg,#f6c945 0 12px,#18181a 12px 24px)}
.lewa-mk .tx{display:block; padding:6px 9px 7px; font-family:var(--font-mono); font-size:9.5px; line-height:1.5; color:#a9a599}
.lewa-mk .tx > b{display:block; color:#f6c945; font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:9px; margin-bottom:2px}

.gr{padding:11px 14px 4px; font-family:var(--font-display); font-size:9.5px; font-weight:800;
    letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted)}
.gr:first-of-type{padding-top:2px}

/* Pozycja modułu. Lewy pasek 3 px jest przezroczysty i zapala się na mosiądz przy
   pozycji bieżącej — zaznaczenie ma być widać kątem oka, bez czytania. */
.mi{display:flex; align-items:center; gap:9px; width:100%; text-align:left; text-decoration:none;
    color:var(--text-secondary); padding:7px 13px 7px 11px; border-left:3px solid transparent; min-width:0}
.mi:hover{background:rgba(255,255,255,.55); color:var(--text-primary)}
.mi .ic{width:22px;height:22px;flex:0 0 auto;display:grid;place-items:center;border-radius:6px;
    background:var(--bg-raised); border:1px solid var(--border); color:var(--text-muted)}
.mi .ic svg{width:12px;height:12px}
.mi .t{min-width:0; flex:1}
/* Nazwa modułu ZAWIJA SIĘ, nie urywa wielokropkiem. Przy 264 px panelu i znaczniku
   „43 czekają" obok, „Wprowadź numer szkody" urywało się na „Wprowadź numer …" —
   czyli dokładnie na słowie, które odróżnia ten moduł od pozostałych. Zmierzone
   na zrzucie: ucinały się 2 pozycje z 10. Panel ma dziś 288 px i wolno mu rosnąć w dół. */
.mi > .t > b{display:block; font-family:var(--font-display); font-size:12.5px; font-weight:700; line-height:1.25}
/* Podpis pod nazwą modułu („/odbiory") — 12 pozycji na KAŻDYM z 14 ekranów,
   czyli 168 napisów stałej szerokości w samym panelu. Jeden z nich to zresztą
   zdanie („bez odsyłacza — moduł nie powstał"), nie ścieżka. */
.mi > .t > em{display:block; font-style:normal; font-family:var(--font-body); font-size:10px;
    color:var(--text-muted); line-height:1.4; margin-top:1px}

/* POZYCJA BIEŻĄCA — cztery sygnały naraz, bo jeden bywa niewidoczny przy wydruku
   albo przy wadzie rozpoznawania barw: pasek, tło, barwa tekstu i grubość. */
.mi.akt{background:var(--bg-raised); border-left-color:var(--accent); color:var(--accent-hover)}
.mi.akt .ic{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.mi.akt > .t > b{font-weight:800; color:var(--accent-hover)}

/* Moduł wyszarzony — bez odsyłacza, bo nie ma dokąd prowadzić. */
.mi.wkr{color:var(--text-muted); cursor:default}
.mi.wkr:hover{background:transparent; color:var(--text-muted)}
.mi.wkr .ic{opacity:.5}
.mi.wkr > .t > b{font-weight:600}

/* Znacznik z liczbą — WYŁĄCZNIE tam, gdzie liczba jest zmierzona.
   Celowo neutralny: liczba mówi „tyle tego jest", a nie „to jest alarm".
   Barwy ostrzegawcze zostają dla stanów, które naprawdę czegoś wymagają. */
/* Znacznik „8 w toku" — liczba ze słowem w pigułce obok proporcjonalnej nazwy modułu. */
.bdg{flex:0 0 auto; align-self:flex-start; margin-top:2px; white-space:nowrap; font-family:var(--font-body); font-size:10px; font-weight:700; color:var(--text-secondary);
     background:var(--bg-raised); border:1px solid var(--border-strong); border-radius:99px; padding:1px 7px}
.bdg > i{font-style:normal}
.mi.akt .bdg{border-color:var(--accent-soft-2); color:var(--accent-hover)}
/* Objaśnienie pod listą modułów — pełne zdanie, pasek informacyjny. */
.znk{padding:9px 14px 0; font-family:var(--font-body); font-size:10px; line-height:1.5; color:var(--text-muted)}

/* ---------- PANEL ZWINIĘTY ---------- */
body.zwin-on .app{grid-template-columns:60px minmax(0,1fr)}
body.zwin-on .lewa-h > b,
body.zwin-on .lewa-mk .tx,
body.zwin-on .mi .t,
body.zwin-on .znk{display:none}
body.zwin-on .lewa-h{padding:11px 8px 9px; justify-content:center}
body.zwin-on .zwin{margin:0; padding:4px 6px}
body.zwin-on .zwin > span{display:none}
body.zwin-on .lewa-mk{margin:0 8px 10px}
body.zwin-on .gr{padding:10px 0 3px; text-align:center; font-size:8px; letter-spacing:.04em}
body.zwin-on .mi{justify-content:center; padding:7px 4px 7px 1px; gap:0}
/* W szynie plakietka pokazuje SAMĄ LICZBĘ w rogu ikony. Wersja ze słowami
   („8 w toku") wylewała się poza 60 px szyny i nachodziła na obszar treści —
   widać to było dopiero na zrzucie stanu zwiniętego, nie w kodzie. */
body.zwin-on .mi{position:relative}
body.zwin-on .bdg{position:absolute; top:2px; right:3px; align-self:auto; margin:0;
     padding:0 4px; font-size:8.5px; line-height:1.6; border-color:var(--accent-soft-2); color:var(--accent-hover)}
body.zwin-on .bdg > i{display:none}

/* ---------- OBSZAR TREŚCI ---------- */
.tresc{padding:16px 20px 24px; min-width:0}
.plc{border:2px dashed #b3ada0; border-radius:var(--radius-lg); background:#f4f2ec; padding:18px 20px}
.plc > h2{font-size:17px; font-weight:800; letter-spacing:-.01em}
.plc > p{margin-top:7px; font-size:12.5px; color:var(--text-secondary); max-width:74ch}
.plc-mono{margin-top:12px; font-family:var(--font-mono); font-size:10.5px; line-height:1.65; color:#4a463d}
.plc-mono > b{color:var(--text-primary)}
.pola{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:9px; margin-top:14px}
.pole{background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-md); padding:9px 11px}
.pole > b{display:block; font-family:var(--font-display); font-size:11.5px; font-weight:800}
.pole > span{display:block; font-size:11px; color:var(--text-muted); margin-top:2px; line-height:1.45}

/* ---------- WĄSKIE OKNO ----------
   Poniżej 900 px lista NIE zwija się do ikon i NIE wysuwa się nad treść.
   Przechodzi nad nią jako pozioma taśma w normalnym przepływie: nic nie przykrywa,
   nic nie wymaga zamykania, a treść zaczyna się tam, gdzie lista się kończy. */
@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr); min-height:0}
  .lewa{position:static; max-height:none; overflow:visible; border-right:0;
        border-bottom:1px solid var(--grid-line); padding-bottom:0}
  .lewa-h{padding:9px 14px 7px}
  .zwin{display:none}
  .lewa-mk{margin:0 12px 8px}
  .lewa nav{display:flex; gap:4px; overflow-x:auto; padding:0 12px 10px; scrollbar-width:thin}
  .gr{padding:0; align-self:center; white-space:nowrap; border-right:1px solid var(--grid-line);
      margin-right:5px; padding-right:9px}
  .gr:first-of-type{padding-top:0}
  .mi{width:auto; flex:0 0 auto; border-left:0; border-bottom:3px solid transparent;
      border-radius:var(--radius-sm) var(--radius-sm) 0 0; padding:6px 10px}
  .mi.akt{border-bottom-color:var(--accent)}
  .mi > .t > b{white-space:nowrap}
  .mi > .t > em{display:none}
  .bdg{align-self:center; margin-top:0}
  body.zwin-on .bdg{position:static; padding:1px 7px; font-size:10px; border-color:var(--border-strong); color:var(--text-secondary)}
  body.zwin-on .bdg > i{display:inline}
  .znk{padding:0 12px 10px}
  .tresc{padding:14px}
  /* Zwinięcie przyciskiem jest wyłączone w tym zakresie — gdyby zostało włączone
     z szerokiego okna, taśma zamieniłaby się w rząd samych ikon bez podpisów. */
  body.zwin-on .app{grid-template-columns:minmax(0,1fr)}
  body.zwin-on .lewa-h > b,
  body.zwin-on .lewa-mk .tx,
  body.zwin-on .mi .t,
  body.zwin-on .znk{display:block}
  body.zwin-on .mi{justify-content:flex-start; padding:6px 10px; gap:9px}
  body.zwin-on .bdg{position:static; margin:0; padding:1px 7px; font-size:10px}
  body.zwin-on .gr{padding:0 9px 0 0; text-align:left; font-size:9.5px; letter-spacing:.12em}
}

/* Panel jest PRZYKLEJONY, a treść odsunięta jednym marginesem na `body`.
   Wariant siatkowy (`.app`) wymagałby opakowania zawartości każdego z jedenastu
   ekranów w dodatkowy element — czyli jedenastu operacji na cudzych układach,
   z których każda mogła coś przesunąć. Margines działa niezależnie od tego,
   co ekran ma w środku. */
/* Nagłówek firmy stoi NAJWYŻEJ i zostaje przy przewijaniu — pod nim pasek makiety,
   pod nimi panel i treść. Kolejność ustawia `panel.js`, wysokości mierzy w przeglądarce. */
body.z-panelem .appbar{position:sticky; top:0; z-index:60}
body.z-panelem .mk{top:var(--gora-naglowka,0)}
/* PASEK PRODUKTU zachowuje się jak pasek makiety: pełna szerokość, przyklejony pod nagłówkiem.
   Makieta ma czarną taśmę „to nie jest produkt", produkt ma pasek celu zapisu — różna treść,
   ta sama rola i to samo miejsce. Osobny mechanizm dałby dwa różne układy dla tych samych
   ludzi (`WYM-019`); wspólny trzyma je zgodne bez pilnowania. */
body.z-panelem .pasek-gorny{top:var(--gora-naglowka,0)}
/* PANEL KOŃCZY SIĘ NA DOLE EKRANU, ALE ZACZYNA POD NAGŁÓWKIEM — a `max-height:100vh`
   liczyło całą wysokość okna, nie tę pod paskiem. Skutek zmierzony 15-09 w produkcie:
   element z `top:91,25px` renderował się na 44,94 px i pierwsze 46 px listy (nagłówek
   „Moduły" z przyciskiem zwijania) chowało się pod paskiem. Dowód, że to nie pomiar:
   `top:0` dawało 0, ale `top:100px` i `top:200px` dawały TO SAMO 44,94 — panel był
   zakotwiczony dołem i podnoszenie górnej krawędzi nic nie robiło.
   W makiecie nie było tego widać, bo jej pasek jest wyższy i nagłówek listy i tak
   wypadał poniżej. */
.lewa-fix{position:fixed; left:0; top:var(--gora-razem,0); bottom:0; width:288px; z-index:40;
  max-height:calc(100vh - var(--gora-razem, 0px)); overflow:auto; border-right:1px solid var(--border-soft)}
/* NAGŁÓWEK I PASEK MAKIETY IDĄ PRZEZ CAŁĄ SZEROKOŚĆ, panel zaczyna się pod nimi.
   Odsuwamy więc TREŚĆ, a nie całe `body` — inaczej nagłówek firmy zaczynałby się
   288 px od lewej krawędzi, czyli logo stałoby nad panelem modułów zamiast nad stroną. */
body.z-panelem > *:not(.appbar):not(.mk):not(.pasek-gorny):not(aside.lewa):not(svg):not(script){margin-left:288px}
body.z-panelem.zwin-on > *:not(.appbar):not(.mk):not(.pasek-gorny):not(aside.lewa):not(svg):not(script){margin-left:60px}
body.z-panelem.zwin-on .lewa-fix{width:60px}

/* Wąskie okno: panel schodzi z drogi. Ekran na 1000 px z panelem 288 px zostawia
   712 px na formularz o dwóch kolumnach — za mało, a dział pracuje też na laptopach. */
@media (max-width: 1100px){
  .lewa-fix{position:static; width:auto; max-height:none; border-right:0;
    border-bottom:1px solid var(--border-soft)}
  body.z-panelem > *, body.z-panelem.zwin-on > *{margin-left:0}
  body.z-panelem .appbar{position:static}
}