:root{
  --bg:#0d1117; --bg2:#161b22; --bg3:#1c232c; --line:#2b333d;
  --fg:#e6edf3; --dim:#9aa7b4; --faint:#6e7b8a;
  --acc:#5eb3f6; --ok:#3fb950; --warn:#d29922; --bad:#f85149;
  --r:12px; --tap:46px;
  /* JEDEN promień na wszystkie przyciski w aplikacji (23.08.2026, życzenie
     użytkownika: „zunifikuj te wszystkie przyciski, żeby zawsze były takimi
     kwadracikami z zaokrąglonymi rogami, takie jak są we wpisach").
     Do 23.08 ten sam przycisk „Popraw" był prostokątem we Wpisach i pigułką
     w Dodawaniu, bo jeden brał styl z `.ent-act button`, a drugi z `.chip`.
     PLAKIETKI ZOSTAJĄ PIGUŁKAMI (`.tg`, `.badge`, `.pill`, `.dr-n`) — i to
     jest celowe: dzięki temu z jednego rzutu oka widać, co się klika, a co
     tylko coś opisuje. Zmiana kształtu przycisków to zmiana TEJ jednej linijki. */
  --rb:9px;
  /* Wysokość przyklejonego paska górnego: jego własne odstępy (12+12) plus
     wiersz tekstu, plus bezpieczny obszar u góry telefonu — na iPhonie
     z wcięciem to około 47 px, na komputerze zero. Sztywne 64 px NIE
     wystarczały: nagłówek przewiniętego formularza chował się pod paskiem
     (zgłoszone 12.08.2026 — „na samej górze widoku jest data, a okno zaczyna
     się od tytułu Edycja wpisu"). */
  --sticky: calc(env(safe-area-inset-top,0px) + 56px);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Dwukrotne stuknięcie w kratkę kalendarza przybliżało stronę zamiast zaznaczyć
   dyżur — przy zaznaczaniu kilku dni pod rząd nie do wytrzymania (zgłoszone
   17.08.2026). `manipulation` wyłącza przybliżanie podwójnym stuknięciem na
   całej stronie i przy okazji kasuje ~300 ms zwłoki, którą przeglądarka
   odczekiwała, żeby sprawdzić, czy nie idzie drugie stuknięcie — dzięki temu
   kratki reagują od razu. Przybliżanie dwoma palcami ZOSTAJE: kto ma słabszy
   wzrok, dalej powiększy sobie ekran. Tu nie ma czego zabierać. */
html{touch-action:manipulation}
body{
  background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.45;
  -webkit-text-size-adjust:100%;
  padding-bottom:calc(64px + var(--safe-b));
  /* Dolny pasek zakładek stał raz na dole, raz wyżej — zależnie od zakładki
     (zgłoszone 12.08.2026: Ustawienia i Wpisy wyżej, Raport i Postęp na dole).
     Przyczyna: na KRÓTKICH zakładkach strona nie miała czego przewijać, więc
     Safari trzymało rozłożony dolny pasek narzędzi i nawigacja siadała nad nim.
     Na długich zakładkach pasek narzędzi chował się przy przewijaniu i nawigacja
     zjeżdżała niżej. Wymuszona wysokość wyrównuje to: każda zakładka jest co
     najmniej tak wysoka jak ekran, więc pasek narzędzi zachowuje się wszędzie
     tak samo. `lvh` to wysokość ekranu przy schowanym pasku narzędzi —
     `vh` zostaje dla przeglądarek, które `lvh` jeszcze nie znają. */
  min-height:100vh;
  min-height:100lvh;
}
.num,input[type=number],table,.bar-txt{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
h1,h2,h3{margin:0;font-weight:650;line-height:1.25}
h1{font-size:1.05rem}
h2{font-size:1rem;margin:22px 0 10px}
h3{font-size:.9rem;color:var(--dim);text-transform:uppercase;letter-spacing:.04em;margin:20px 0 8px}
p{margin:.4em 0}
button{font:inherit;color:inherit;font-family:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}
/* Pola tekstowe dostają obwódkę tuż przy krawędzi — odsunięta o 2 px nachodziła
   na tekst leżący nad polem. box-shadow nie zajmuje miejsca w układzie. */
input:focus-visible,textarea:focus-visible,select:focus-visible,
input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:var(--acc);
  box-shadow:0 0 0 2px rgba(94,179,246,.30);
}

header{
  position:sticky;top:0;z-index:20;background:rgba(13,17,23,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
  padding:calc(env(safe-area-inset-top,0px) + 12px) 14px 12px;
  display:flex;align-items:center;
}
header h1{
  flex:1;min-width:0;
  font-size:1.35rem;font-weight:700;letter-spacing:-.015em;line-height:1.2;
  /* PASEK NIE MOŻE ZMIENIAĆ WYSOKOŚCI (23.08.2026, zgłoszenie użytkownika:
     „jak się zaznacza dyżury, pokazuje się zapisywanie i obraz przesuwa się
     lekko w dół, a jak zniknie — wraca").

     Przyczyna: plakietka „Zapisywanie…" wchodzi do paska, ściska tytuł, tytuł
     ŁAMIE SIĘ NA DWIE LINIJKI i pasek rośnie. Ponieważ pasek jest przyklejony
     u góry, cała treść pod nim skacze.

     Zamiast chować informację o zapisie — a to jedyna rzecz, która mówi, że
     wpis naprawdę poszedł do bazy — nie pozwalamy tytułowi się łamać.
     Wysokość paska jest wtedy stała i plakietka może się pojawiać do woli. */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Kto jest zalogowany — w pasku górnym, więc widoczne w KAŻDEJ zakładce.
   `flex:0 0 auto` znaczy „nie zwężaj mnie": adres e-mail przycięty w połowie
   byłby gorszy od przyciętego tytułu, bo tytuł i tak wiadomo, jak brzmi.
   Lokalnie ten element jest schowany — tam nikt nie jest zalogowany. */
.ust{
  flex:0 0 auto;margin-left:8px;width:38px;height:38px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--line);border-radius:var(--rb);color:var(--dim);
}
.ust[aria-pressed="true"]{color:var(--acc);border-color:var(--acc)}
.kto{
  flex:0 0 auto;margin-left:10px;text-align:right;
  font-size:.7rem;line-height:1.3;color:var(--dim);white-space:nowrap;
}
.kto[hidden]{display:none}
.kto b{font-weight:600;color:var(--faint)}
.kto span{color:var(--txt)}
/* Na telefonie sam adres — słowa „Zalogowany jako" zjadłyby pół tytułu,
   a adres w narożniku i bez nich mówi wszystko. */
@media (max-width:560px){ .kto b{display:none} }
/* Wskaźnik zapisu milczy, kiedy wszystko jest w porządku — pokazuje się
   dopiero wtedy, gdy coś czeka na wysłanie albo nie doszło. */
.pill{
  flex:0 0 auto;margin-left:10px;
  font-size:.7rem;padding:3px 9px;border-radius:99px;border:1px solid var(--line);
  background:var(--bg2);color:var(--dim);white-space:nowrap;
  display:flex;align-items:center;gap:6px;
}
.pill[hidden]{display:none}
.pill::before{content:"";width:6px;height:6px;border-radius:99px;background:var(--faint)}
.pill.pend{color:var(--warn);border-color:#4a3a10}.pill.pend::before{background:var(--warn)}
.pill.loc{color:var(--bad);border-color:#4d2320}.pill.loc::before{background:var(--bad)}

main{padding:14px 14px 24px;max-width:720px;margin:0 auto}
section[hidden]{display:none}

nav.tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:grid;grid-template-columns:repeat(5,1fr);
  background:rgba(22,27,34,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);padding-bottom:var(--safe-b);
}
nav.tabs button{
  background:none;border:0;padding:9px 2px 8px;font-size:.68rem;color:var(--faint);
  display:flex;flex-direction:column;align-items:center;gap:3px;min-height:var(--tap);cursor:pointer;
}
nav.tabs button svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
nav.tabs button[aria-current=page]{color:var(--acc)}

.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:13px;margin:10px 0}
.card.tight{padding:11px}
label{display:block;font-size:.8rem;color:var(--dim);margin:12px 0 5px}
label:first-child{margin-top:0}
input[type=text],input[type=number],input[type=date],input[type=month],input[type=time],textarea,select{
  width:100%;background:var(--bg3);border:1px solid var(--line);border-radius:10px;
  color:var(--fg);padding:11px 12px;font:inherit;min-height:var(--tap);
}
/* Pole daty na iOS rządzi się samo: dopóki ma natywny wygląd, nadaje sobie
   WŁASNĄ szerokość i wysokość i nie słucha się `width:100%`. Efekt zgłoszony
   9.08.2026: pole daty wychodziło poza ramkę procedury — szersze i wyższe od
   niej. Po zdjęciu natywnego wyglądu zachowuje się jak zwykłe pole tekstowe
   i mieści się w karcie; stuknięcie nadal otwiera systemowy wybór daty.
   Wysokość na sztywno, nie `min-height` — inaczej iOS potrafi ją powiększyć. */
input[type=date],input[type=month],input[type=time]{
  -webkit-appearance:none;appearance:none;
  max-width:100%;height:var(--tap);
}
/* Godziny wpisuje się PARAMI (od–do, roboczy–wolny), więc stoją obok siebie,
   od lewej do prawej — życzenie użytkownika z 17.08.2026. Etykieta siedzi
   nad polem, żeby przy dwóch kolumnach było wiadomo, które jest które. */
/* Pola godzin NIE rozciągają się na całą szerokość (17.08.2026). Rozciągnięte
   zlewały się w jeden pas — „rozpoczęcie, zakończenie, krótszy, dłuższy"
   czytało się jak jedna lista, bo nic ich wzrokowo nie rozdzielało. Teraz mają
   własną szerokość, stoją od lewej i zawijają się, gdy się nie mieszczą. */
.godz{display:flex;flex-wrap:wrap;gap:12px 20px;margin-top:8px}
.godz-p{flex:0 0 auto;display:flex;flex-direction:column;gap:5px}
/* Napis mówiący, CO się ustawia, musi być czytelny — wcześniej był drobniejszy
   i bledszy niż wpisywane liczby. */
.godz-p label{margin:0;font-size:.92rem;font-weight:600;color:var(--fg);
  text-transform:none;letter-spacing:0}
/* Każdy zestaw godzin w swojej ramce — inaczej „Godziny etatu" i „Długość
   dyżuru" wyglądają jak jedna, długa lista pól. */
.grupa{margin-top:14px;padding:12px 13px;border:1px solid var(--line);
  border-radius:11px;background:var(--bg2)}
.grupa-t{font-size:.95rem;font-weight:600;color:var(--fg)}
.grupa-o{font-size:.76rem;color:var(--faint);margin-top:3px;line-height:1.35}
.godz-p input{margin:0;text-align:center;font-variant-numeric:tabular-nums}
.czas{display:flex;align-items:flex-start;gap:6px}
.czas-p{flex:0 0 58px;display:flex;flex-direction:column;gap:3px}
.czas input{width:58px;min-width:0;-moz-appearance:textfield}
.czas input::-webkit-outer-spin-button,.czas input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* Dwukropek równa się z POLAMI, nie z podpisami pod nimi. */
.czas-s{color:var(--dim);font-weight:700;height:var(--tap);display:flex;align-items:center}
.czas-o{font-size:.7rem;color:var(--faint);text-align:center}
.data{display:flex;align-items:flex-start;gap:6px;margin-top:6px}
.data-p{flex:0 0 56px;display:flex;flex-direction:column;gap:3px}
.data-p.rok{flex:0 0 78px}
.data input{width:100%;min-width:0;margin:0;text-align:center;font-variant-numeric:tabular-nums}
.data-o{font-size:.7rem;color:var(--faint);text-align:center}
.data-s{color:var(--dim);font-weight:700;height:var(--tap);display:flex;align-items:center}
textarea{min-height:96px;resize:vertical;line-height:1.5}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  background:var(--bg3);border:1px solid var(--line);border-radius:var(--rb);
  padding:9px 14px;min-height:var(--tap);cursor:pointer;font-size:.88rem;
  display:inline-flex;align-items:center;
  font-weight:600;               /* stała grubość — zaznaczenie nie zmienia rozmiaru */
}
/* Zaznaczenie zmienia wyłącznie kolory i cień — nic, co wpływa na wymiary. */
.chip[aria-pressed=true]{
  background:var(--acc);border-color:var(--acc);color:#04121f;
  box-shadow:0 0 0 3px rgba(94,179,246,.25);
}
/* Przycisk kasujący — czerwony napis, jak „Usuń" przy procedurach we Wpisach.
   Jeden język w całej aplikacji: czerwień znaczy „to coś zabierze". */
.chip.del{color:var(--bad)}
/* Guzik z samą ikoną — kwadratowy, żeby trzy guziki zmieściły się w jednej
   linijce i kafelek nie rósł o cały wiersz (24.08.2026). */
.chip.ikona{padding:6px 9px;color:var(--acc)}
.chip.sub{background:transparent;border-style:dashed}
.chip.sub[aria-pressed=true]{background:var(--acc);border-style:solid}
.ta-wrap{position:relative;margin-top:10px}
.ta-wrap textarea{padding-right:46px}
.ta-x{
  position:absolute;top:8px;right:8px;width:30px;height:30px;
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--rb);
  color:var(--dim);cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
}
/* Bez tego reguła display:flex przebija domyślne ukrywanie przeglądarki
   i przycisk był widoczny także przy pustym polu. */
.ta-x[hidden]{display:none}
.ta-x:hover,.ta-x:focus-visible{color:var(--fg);border-color:var(--acc)}
.day{
  display:flex;align-items:stretch;
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);
  margin:8px 0 0;overflow:hidden;
}
.day-b{
  flex:1;display:flex;align-items:center;gap:10px;text-align:left;
  background:none;border:0;padding:13px 14px;cursor:pointer;min-height:var(--tap);
}
.day-x{
  flex:none;background:none;border:0;border-left:1px solid var(--line);
  color:var(--faint);padding:0 14px;cursor:pointer;display:flex;align-items:center;
}
.day-x:hover,.day-x:focus-visible{color:var(--bad);background:rgba(248,81,73,.08)}
.day.open{border-color:var(--acc);background:var(--bg3)}
.day-c{color:var(--faint);font-size:.8rem;width:12px}
.day-d{flex:1;font-weight:650}
.day-n{font-size:.78rem;color:var(--dim)}
.day.open + .ent{margin-top:6px}
.day.mth{background:var(--bg3)}
.day.mth .day-d{font-size:1rem}
.nest{padding-left:12px;border-left:2px solid var(--line);margin-left:6px}
.dr-w{margin:9px 0 0 31px;padding:9px 11px;border-radius:9px;
  background:rgba(210,153,34,.10);border:1px solid #4a3a10}
.dr-w.spok{background:var(--bg3);border-color:var(--line)}
.dr-w-t{font-size:.8rem;color:var(--warn);margin-bottom:8px}
.dr-w.spok .dr-w-t{color:var(--dim);margin-bottom:0}
.vlab{font-size:.78rem;color:var(--dim);min-width:104px}
.dict-h{font-size:1.3rem;text-align:center;margin:2px 0 6px}
.dict-s{text-align:center;margin:0}
.lead{font-size:1rem;color:var(--fg);margin:2px 0 12px;line-height:1.45}
.chip.sm{min-height:38px;padding:6px 12px;font-size:.82rem}
.btn{
  width:100%;background:var(--acc);color:#04121f;border:0;border-radius:var(--rb);
  padding:14px;font-weight:700;font-size:1rem;min-height:var(--tap);cursor:pointer;margin-top:14px;
}
.btn:disabled{opacity:.45;cursor:default}
.btn.sec{background:var(--bg3);color:var(--fg);border:1px solid var(--line);font-weight:600}
.btn.danger{background:none;color:var(--bad);border:1px solid #4d2320}
.btn.big{font-size:1.1rem}
.btn.tgl{display:flex;align-items:center;justify-content:center;gap:9px;font-size:1.1rem}
/* Ten sam odstęp na przyklejony pasek co przy sekcjach Planu — bez niego
   rozwinięty nagłówek chowa się pod paskiem i treść wygląda, jakby nachodziła
   na kafelek (zgłoszone 17.08.2026, sprawdzone dla WSZYSTKICH rozwijanych). */
.btn.tgl{scroll-margin-top:calc(var(--sticky) + 20px)}
.btn.tgl svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none;transition:transform .15s}
.btn.tgl[aria-expanded=true] svg{transform:rotate(90deg)}
/* Przycisk nagrywania. W trakcie nagrywania zmienia kolor na ostrzegawczy
   i pulsuje — mikrofon musi być widocznie włączony, żeby nie nagrywać
   przez pół godziny bez świadomości. */
.btn.rec{display:flex;align-items:center;justify-content:center;gap:9px;font-size:1.1rem}
.btn.rec svg{flex:none}
.btn.rec.nagrywa{background:var(--bad);color:#fff;animation:puls 1.6s ease-in-out infinite}
.rec-t{font-variant-numeric:tabular-nums;opacity:.85;font-weight:600}
@keyframes puls{50%{opacity:.72}}
@media (prefers-reduced-motion:reduce){.btn.rec.nagrywa{animation:none}}
.porad-t{margin-top:10px;padding:12px 14px;background:var(--bg3);border:1px solid var(--line);border-radius:11px}
.porad-h{margin:12px 0 2px;font-weight:700;font-size:.95rem}
.porad-t .porad-h:first-child{margin-top:0}
.porad-p{font-style:italic}
/* min-width:0 jest KONIECZNE, nie kosmetyczne. Element w rzędzie domyślnie nie
   zwęża się poniżej swojej miary własnej, a pole daty w Safari jest szerokie —
   przez to rząd „Data + Wiek" wylewał się poza kartę i pola nachodziły na
   siebie na telefonie (zgłoszone 9.08.2026). */
.row{display:flex;gap:9px}.row>*{flex:1;min-width:0;margin-top:0}
/* Na telefonie data i wiek obok siebie i tak są ciasne — kładziemy je jedno
   pod drugim. Dotyczy TYLKO tego rzędu, żeby nie ruszać pozostałych.
   `display:block`, a NIE `flex-direction:column`: w kolumnie `flex:1` z reguły
   wyżej rozciąga dzieci na WYSOKOŚĆ, przez co pole daty robiło się wyższe, niż
   trzeba (zgłoszone 9.08.2026). Zwykłe bloki mają naturalną wysokość. */
@media (max-width:480px){
  .row-dw{display:block}
  .row-dw>*+*{margin-top:12px}
}
.hint{font-size:.78rem;color:var(--faint);margin:6px 0 0}
/* Licznik znaków pod polem tekstowym. Stoi po prawej i milczy kolorem, dopóki
   jest luz — na żółto robi się dopiero pod koniec, a na czerwono, gdy pole
   przestało przyjmować znaki. Bez tego uderzenie w limit wygląda jak
   zawieszona klawiatura. */
/* Kafelek regularności (zakładka Postęp). Liczba na wierzchu ma być czytelna
   z odległości ręki — to ona jest nagrodą, reszta tylko ją tłumaczy. */
.reg-big{font-size:1.5rem;font-weight:700;color:var(--acc);margin:0 0 10px}
.reg-big.reg-cicho{font-size:1.05rem;font-weight:600;color:var(--dim)}
.reg-dni{display:flex;gap:5px;flex-wrap:wrap}
/* Kropka pustego dnia jest obrysem, nie plamą — dzień bez wpisów nie jest
   błędem i nie ma prawa krzyczeć kolorem. */
.kropka{
  width:14px;height:14px;border-radius:50%;
  border:1px solid var(--line);background:var(--bg3);flex:0 0 auto;
}
.kropka.jest{background:var(--acc);border-color:var(--acc)}
.kropka.dzis{box-shadow:0 0 0 2px var(--bg2),0 0 0 3px var(--dim)}
/* Weekend jest przygaszony — pusta sobota nie jest zaniedbaniem i nie ma
   prawa wyglądać tak samo jak opuszczony dzień roboczy. */
.kropka.wolne:not(.jest){opacity:.4}
.reg-drobne{font-size:.82rem;color:var(--dim);margin:8px 0 0}
/* Ponumerowane kroki instrukcji. Odstęp między pozycjami jest większy niż
   domyślny, bo czyta się je na telefonie, trzymając go w jednej ręce. */
.kroki{margin:8px 0 0;padding-left:22px;color:var(--fg);font-size:.95rem;line-height:1.5}
.kroki li{margin:0 0 7px}
.kroki li::marker{color:var(--acc);font-weight:700}
.licznik{font-size:.74rem;color:var(--faint);margin:5px 2px 0;text-align:right}
.licznik.blisko{color:var(--warn)}
.licznik.pelny{color:var(--bad)}
/* Komunikat, który tłumaczy, czemu czegoś teraz nie ma — musi być czytelny,
   inaczej wygląda, jakby przyciski po prostu zniknęły. */
.uwaga{
  margin:14px 0 0;padding:13px 15px;
  background:var(--bg3);border:1px solid var(--line);border-left:3px solid var(--acc);
  border-radius:var(--rb);color:var(--fg);font-size:.98rem;line-height:1.5;
}
.sep{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:.78rem;margin:22px 0 6px}
.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--line)}
.badge{display:inline-block;font-size:.7rem;padding:2px 8px;border-radius:99px;background:var(--bg3);border:1px solid var(--line);color:var(--dim)}
.badge.warn{color:var(--warn);border-color:#4a3a10}
.empty{color:var(--faint);text-align:center;padding:34px 12px;font-size:.9rem}

/* postęp */
.pos{padding:11px 0;border-bottom:1px solid var(--line)}
.pos:last-child{border-bottom:0}
.pos-n{font-size:.9rem;margin-bottom:8px}
.bar-line{display:flex;align-items:center;gap:9px;margin:5px 0}
.bar-k{width:20px;font-size:.75rem;color:var(--faint);font-weight:700}
.bar{position:relative;flex:1;height:9px;background:var(--bg3);border-radius:99px;overflow:hidden}
.bar>i{position:absolute;inset:0 auto 0 0;background:var(--acc);border-radius:99px;transition:width .25s}
.bar>i.done{background:var(--ok)}
.bar-txt{width:92px;text-align:right;font-size:.78rem;color:var(--dim)}
.bar-txt b{color:var(--fg);font-weight:650}

/* Lista procedur po rozpoznaniu — przewijamy do niej automatycznie, więc
   musi zatrzymać się POD przyklejonym paskiem, a nie za nim. */
#drafts{scroll-margin-top:var(--sticky)}

/* Przycisk „Wpisz ręcznie" — po rozwinięciu formularza staje na górze ekranu,
   więc obowiązuje go ta sama zasada co listę: zatrzymać się POD paskiem.
   Ale --sticky zakłada JEDEN wiersz tytułu (patrz komentarz przy zmiennej),
   a „Rejestr procedur (p)rezydenckich" na każdym telefonie łamie się na dwa:
   przy 375 px szerokości tytuł ma do dyspozycji około 240 px, a potrzebuje
   około 335. Pasek jest więc o cały wiersz wyższy, czyli 1.35rem × 1.2 ≈ 26 px.
   Formularz edycji wpisu tego nie pokazywał, bo własne wypełnienie karty te
   26 px pochłania — goły przycisk nie ma czym, więc było widać ucięcie
   (zgłoszone 13.08.2026). Do tego 8 px luzu, żeby nie kleił się do paska.
   ZMIENIASZ TYTUŁ ALBO ROZMIAR CZCIONKI W NAGŁÓWKU? Sprawdź tę liczbę. */
#man-tgl{scroll-margin-top:calc(var(--sticky) + 34px)}

/* wpisy */
.ent{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:11px;margin:8px 0;scroll-margin-top:var(--sticky)}
.pl{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:11px 12px;margin:8px 0;scroll-margin-top:var(--sticky)}
.pl-ok{border-color:var(--ok);background:rgba(63,185,80,.07)}
.pl-h{display:flex;align-items:center;gap:8px}
.pl-s{font-size:.86rem;color:var(--dim);margin-top:3px}
/* Przewidywany koniec odsuwamy od wiersza z rokiem szkolenia: to dwie
   różne informacje, a sklejone czytały się jak jedna. */
.pl-koniec{margin-top:12px}
.pl-f{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.sek{width:100%;display:flex;align-items:center;gap:10px;background:none;border:0;padding:0;margin:0;color:var(--fg);text-align:left;cursor:pointer}
/* Padding niesie PRZYCISK, nie karta. Inaczej 13-piksielowa ramka dookoła
   nagłówka jest martwa i w kafelek trzeba celować — zgłoszone 18.08.2026:
   „muszę bardzo precyzyjnie kliknąć (…), a użytkownik stuka po całym kafelku".
   Ta sama budowa co kafelki dnia w Wpisach (`.day` / `.day-b`), gdzie zrobiono
   to dobrze od początku. */
.card.sekc{padding:0;overflow:hidden}
.card.sekc .sek{padding:13px;min-height:var(--tap)}
.card.sekc .sek-b{margin:0;padding:12px 13px 13px}
/* Odstęp na przyklejony pasek górny — bez niego rozwinięty nagłówek sekcji
   wjeżdża POD pasek i wygląda, jakby treść nachodziła na kafelek (zgłoszone
   17.08.2026). Ta sama pułapka co przy „Wpisz ręcznie" 13.08.2026: `--sticky`
   zakłada JEDNOWIERSZOWY tytuł, a ten łamie się na telefonie na dwa, więc
   doliczamy zapas. Karta ma 13 px własnego wypełnienia, stąd +20, a nie +34. */
.sek{scroll-margin-top:calc(var(--sticky) + 20px)}
/* Rozwinięta treść stoi POD nagłówkiem, oddzielona kreską — żeby było widać,
   gdzie kończy się kafelek, a zaczyna to, co się rozwinęło. */
.sek-b{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.sek-c{color:var(--dim);width:14px}
.sek-t{flex:1;font-weight:600}
.mies{flex:1;background:none;border:0;padding:6px 4px;margin:0;color:var(--fg);font-weight:600;font-size:1rem}
.kal-h{color:var(--fg);font-size:1rem;margin:10px 0 0}
.nb{display:flex;align-items:center;gap:10px;margin:8px 0}
.nb-t{flex:1;min-width:0;font-size:.86rem;color:var(--dim);line-height:1.3}
/* `input.nb-i`, a NIE `.nb-i` — sama klasa przegrywa specyficznością
   z ogólną regułą `input[type=number]{width:100%}` i pole zajmowało całą
   resztę wiersza. Ponieważ reszta zależy od długości napisu obok, każde pole
   wychodziło innej szerokości (zgłoszone 17.08.2026). */
input.nb-i{flex:0 0 62px;width:62px;margin:0;text-align:center;padding:9px 6px;min-height:0;height:40px}
.wip{border-color:var(--warn);background:color-mix(in srgb, var(--warn) 10%, var(--bg2))}
.wip .lead{color:var(--warn)}
.kal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:10px}
.kal-n{text-align:center;font-size:.72rem;color:var(--dim);padding:2px 0}
.kal-d{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--rb);background:var(--bg2);color:var(--fg);font-size:.92rem;padding:0}
.kal-p{border:0;background:none}
.kal-w{color:var(--dim);background:transparent}
.kal-dy{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:700}
.kal-dy2{background:var(--warn);border-color:var(--warn);color:#1a1200;font-weight:700}
/* Trzeci wariant towarzyszący — dwa dyżury jednego dnia (17.08.2026). Zieleń,
   bo musi być rozróżnialna od niebieskiego i żółtego także przy najczęstszej
   ślepocie barw (czerwono-zielonej): tam różni ją od żółtego jasność. */
.kal-dy3{background:var(--ok);border-color:var(--ok);color:#04260c;font-weight:700}
.kal-z{outline:2px dashed var(--warn);outline-offset:-3px}
.leg{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.leg-p{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--dim)}
.leg-p .kal-d{width:20px;height:20px;aspect-ratio:auto;flex:0 0 auto}
.ent-h{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.ent-d{font-size:.8rem;color:var(--dim)}
.ent-p{font-weight:600;flex:1;min-width:100%}
/* Pauza w miejscu nazwy zabiegu — przygaszona, bo to nie brak do naprawienia,
   tylko informacja, że zabiegu nie było (samo wkłucie). */
.ent-p.pusty{color:var(--faint);font-weight:400}
/* Zaproszenie do dopisania zabiegu. Wygląda jak odnośnik, nie jak przycisk
   akcji — ma zachęcać, a nie krzyczeć. */
.ent-dopisz{background:none;border:0;padding:0;min-width:100%;text-align:left;
  color:var(--acc);font-size:.86rem;font-weight:600;cursor:pointer}
.ent-t{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.tg{font-size:.72rem;padding:2px 8px;border-radius:99px;background:var(--bg3);color:var(--dim);border:1px solid var(--line)}
.tg.a{color:#9fd0f5;border-color:#1d3a55}.tg.b{color:#e8c07d;border-color:#4a3a10}
.tg.ok{color:#7ee787;border-color:#1f5c2a}
/* Status „Do umówienia" na CZERWONO (23.08.2026, życzenie użytkownika: „na wzór
   umówionego, ale czerwono"). Trzy stany, trzy kolory: czerwony — jeszcze nic
   nie ustalone, żółty — termin jest, zielony — odbyte. Ten sam język kolorów
   co w całej aplikacji (`--bad`, `--warn`, `--ok`). */
.tg.brak{color:#ff9b93;border-color:#5c211d}
/* Formularz edycji zapisanego wpisu. Odstęp od góry jest po to, żeby po
   przewinięciu nagłówek „Edycja wpisu" nie schował się pod przyklejonym paskiem
   górnym — ta sama sztuczka i ta sama liczba co przy liście procedur (#drafts). */
.ent-edit{scroll-margin-top:var(--sticky)}
/* Zapas pod formularzem — patrz `luzPodFormularzem()`. Wysokość ekranu, bo
   tyle najwyżej trzeba dosunąć, żeby formularz stanął na górze. Ta sama klasa
   służy formularzowi edycji wpisu i rozwiniętemu formularzowi ręcznemu:
   oba stoją na końcu swojej zakładki i oba mają wjeżdżać pod sam pasek. */
.ent-edit-luz{height:100vh;height:100lvh;pointer-events:none}
/* Komunikat o otwartej poprawce jest KLIKALNY i prowadzi z powrotem do niej,
   więc musi wyglądać na klikalny: pełna szerokość, wskaźnik, wyraźna ramka. */
button.uwaga-akcja{display:block;width:100%;text-align:left;cursor:pointer;font:inherit}
button.uwaga-akcja:hover,button.uwaga-akcja:focus-visible{border-color:var(--warn)}
/* Przyciski przy WIERSZU procedury we Wpisach (23.08.2026). Te same słowa co
   dotąd — „Popraw" i „Usuń" — ale wąskie, bo stoją w linijce, a nie pod całym
   kafelkiem. Bez tej reguły dziedziczyły domyślny styl przeglądarki i na
   ciemnym tle były prawie niewidoczne: jasny prostokąt z ledwo czytelnym
   napisem. ŻADEN test tego nie widział — złapał to dopiero zrzut ekranu
   (`testy/podglad-wpisow.mjs`), tak samo jak podgląd wydruku łapie rzeczy,
   których nie widzi drzewo dokumentu. */
.zw .zk-act{gap:6px}
.zw .zk-act button{background:var(--bg3);border:1px solid var(--line);border-radius:var(--rb);
  padding:6px 11px;font-size:.8rem;min-height:34px;cursor:pointer;color:var(--fg)}
.zw .zk-act button.del{color:var(--bad)}

.ent-act{display:flex;gap:8px;margin-top:10px}
.ent-act button{flex:1;background:var(--bg3);border:1px solid var(--line);border-radius:var(--rb);padding:9px;font-size:.83rem;min-height:40px;cursor:pointer}
.ent-act button.del{color:var(--bad)}

/* ── KAFELEK ZABIEGU WE WPISACH (20.08.2026) ───────────────────────────
   Procedury jednego znieczulenia stoją razem: dane pacjenta i nazwa zabiegu raz
   u góry, pod spodem kolejne procedury z własnymi zaliczeniami i przyciskami.
   Ramka jest lżejsza niż w podsumowaniu — tam się poprawia przed zapisem, tu
   głównie przegląda. */
.zw{border:1px solid var(--line);border-radius:var(--r);margin:10px 0 12px;
  background:var(--bg);overflow:hidden}
.zw-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  padding:9px 12px 0}
.zw-d{font-size:.8rem;color:var(--dim)}
.zw-n{margin-left:auto;font-size:.76rem;color:var(--faint)}
.zw-p{font-weight:600;padding:2px 12px 8px}
/* Przyciski CAŁEGO zabiegu — własny wiersz pod nazwą, wyrównany do prawej.
   W nagłówku rozbijały na telefonie linijkę z danymi pacjenta (23.08.2026). */
.zw-akt{display:flex;justify-content:flex-end;gap:6px;padding:0 12px 10px}
.zw .zw-akt button{background:var(--bg3);border:1px solid var(--line);
  border-radius:var(--rb);padding:6px 11px;font-size:.8rem;min-height:34px;
  cursor:pointer;color:var(--fg)}
.zw .zw-akt button.del{color:var(--bad)}
/* ── KAFELEK ZABIEGU (19.08.2026) ──────────────────────────────────────
   Jeden kafelek = jeden zabieg: nagłówek z danymi pacjenta, pod nim procedury,
   na dole zbiorczy podgląd SMK. Kreskę między wierszami niesie WIERSZ, a nie
   kafelek — inaczej pierwszy wiersz dostawałby kreskę tuż pod nagłówkiem,
   który ma już własną. */
.zk{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);
  margin:8px 0;overflow:hidden;scroll-margin-top:var(--sticky)}
.zk-h{display:flex;align-items:flex-start;gap:8px;padding:11px 12px}
.zk-tt{flex:1;min-width:0}
.zk-d{font-weight:600;line-height:1.3;display:block}
/* Sprzeczne dane muszą KŁUĆ W OCZY — kafelek pokazuje jeden wiek, więc
   sklejenie dwóch pacjentów nie może wyglądać jak zwykły nagłówek. */
.zk-d.zle{color:var(--bad)}
.zk-p{font-size:.78rem;color:var(--dim);margin-top:3px}
.zk-act{display:flex;align-items:center;gap:6px;flex:none;margin-left:auto}
.zk-list{border-top:1px solid var(--line)}
.zk-r{display:flex;align-items:center;gap:8px;padding:9px 12px;flex-wrap:wrap}
.zk-r + .zk-r{border-top:1px solid var(--line)}
.zk-nm{flex:1 1 55%;min-width:0;font-size:.94rem;overflow-wrap:anywhere}
.zk-nm-s{font-size:.76rem;color:var(--dim);margin-top:2px}
.zk-add{border-top:1px solid var(--line);padding:4px 8px}
.zk-addb{background:none;border:0;color:var(--acc);font-weight:600;font-size:.9rem;
  padding:9px 4px;min-height:var(--tap);cursor:pointer;text-align:left;width:100%}
/* Pasek miesiąca w Planie musi ODDYCHAĆ: pod nim stoją od razu liczby, a przy
   ciasnym odstępie cyfry lepiły się do przycisków i całość była nieczytelna
   (zgłoszenie użytkownika 23.08.2026). Kreska oddziela pasek od treści. */
.pas-mies{padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line)}

/* TABELA PODSUMOWANIA STAŻU (23.08.2026). Rachunek ma być widoczny wiersz po
   wierszu, z sumą na dole — użytkownik przepisuje z niego liczbę do SMK, więc
   musi móc sprawdzić, skąd się wzięła. Wiersze zerowe ZOSTAJĄ: dopiero wtedy
   widać, że nic nie zostało pominięte. */
.staz-t{margin-top:16px;border:1px solid var(--line);border-radius:var(--rb);
  overflow:hidden;background:var(--bg2)}
.staz-r{display:flex;align-items:baseline;gap:10px;padding:8px 12px}
.staz-r + .staz-r{border-top:1px solid var(--line)}
.staz-e{flex:1;min-width:0;font-size:.9rem}
.staz-d{color:var(--faint);font-size:.76rem}
.staz-v{flex:none;font-variant-numeric:tabular-nums}
/* Suma odcina się od reszty grubszą kreską i większą liczbą — to po nią się
   tu przychodzi. */
.staz-suma{border-top:2px solid var(--line);background:var(--bg3);padding:11px 12px}
.staz-suma .staz-e{font-weight:600}
.staz-suma .staz-v{font-size:1.15rem;font-weight:700;color:var(--acc)}
/* Liczba dyżurów i suma godzin idą do SMK tak samo jak dni stażu, więc czyta
   się je tak samo jak wiersze tabeli — nie jak przypis pod nią. */
.staz-dyz{font-size:.9rem;color:var(--fg);margin:14px 0 0}
.zk-foot{border-top:1px solid var(--line);padding:10px 12px;background:var(--bg)}
.zk-foot .ent-t{margin-top:5px}
/* Ostrzeżenia w kafelku stoją na całej szerokości, bez wcięcia pod numerem —
   dotyczą całego zabiegu, nie pojedynczego wiersza. */
.zk-w{margin:0 12px 10px}
/* Zębatka i krzyżyk przy wierszu: małe, bo wiersz ma pokazywać, nie być
   panelem. Wymiar wspólny, żeby nie skakały względem siebie. */
.dr-g{background:none;border:1px solid var(--line);color:var(--dim);border-radius:var(--rb);
  min-width:34px;min-height:34px;padding:0;font-size:.95rem;cursor:pointer;flex:none}
.zk .dr-x{min-width:34px;min-height:34px;flex:none}

/* rozpoznane procedury — lista */
.dr{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:11px 12px;margin:8px 0;scroll-margin-top:var(--sticky)}
.dr-h{display:flex;align-items:flex-start;gap:9px}
.dr-n{
  flex:none;width:22px;height:22px;border-radius:99px;background:var(--bg3);
  color:var(--dim);font-size:.72rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;margin-top:1px
}
.dr-t{flex:1;font-weight:600;line-height:1.3}
.dr-x{
  flex:none;background:none;border:0;color:var(--faint);font-size:1.5rem;line-height:1;
  padding:0 4px;cursor:pointer;min-width:32px;min-height:32px
}
.dr-x:hover,.dr-x:focus-visible{color:var(--bad)}
.dr-s{font-size:.78rem;color:var(--dim);margin:5px 0 0 31px}
.dr-a{display:flex;align-items:center;gap:6px;margin:9px 0 0 31px}
/* „Zaliczy do SMK" w wierszu podsumowania — to samo wcięcie co data i akcje. */
.dr-smk{margin:9px 0 0 31px}

/* Okres raportu — konkretne daty, nad liczbami do przepisania. */
/* Od 22.08.2026 stoi tu TYTUŁ raportu, ten sam co na wydruku — więc i wygląda
   jak tytuł, a nie jak przygaszony przypis nad tabelami. */
.rep-okres{margin:0 0 12px;font-size:1.3rem;font-weight:700;line-height:1.25}

/* raport na ekranie — TE SAME tabele co na wydruku, tylko w barwach aplikacji.
   Do 12.08.2026 stał tu jeden <pre> z monospace'owym zrzutem tekstu; wyglądał
   jak terminal, a nie jak dokument (zgłoszone przez użytkownika). Buduje to
   `smkTabele()` i `spisTabela()` — DOKŁADNIE te same funkcje co PDF, więc widok
   i wydruk nie mają jak się rozjechać. Wersja tekstowa żyje dalej pod
   „Kopiuj" i „.txt". */
.rep-doc{margin-top:14px}
/* Trzy poziomy nagłówków w raporcie (17.08.2026). Wcześniej były pomieszane:
   nazwy wykazów szły jako <h3> pisane WERSALIKAMI w kolorze przygaszonym —
   czyli dokładnie tak, jak nagłówki kolumn w tabelach — a tytuł całej sekcji
   był od nich ledwie większy. Oko nie miało się o co zaczepić przy szukaniu
   konkretnego wykazu.

   1. `.rep-t1` — tytuł całej sekcji („Liczby do wpisania w SMK").
   2. `.rep-h` i <h3> — nazwy wykazów, staż, dyżury, spis chronologiczny.
   3. <th> — nagłówki kolumn, najmniejsze, WERSALIKAMI. */
.rep-doc .rep-t1{font-size:1.3rem;font-weight:700;line-height:1.25;
  color:var(--fg);margin:0 0 12px;padding-bottom:9px;border-bottom:2px solid var(--line)}
.rep-doc .rep-h,.rep-doc h3{font-size:1.02rem;font-weight:700;color:var(--fg);
  text-transform:none;letter-spacing:0;margin:24px 0 7px}
/* Pierwszy nagłówek pod tytułem nie potrzebuje odstępu od góry — tytuł ma już
   swój własny margines dolny. */
.rep-doc .rep-t1 + div > .rep-h:first-child,
.rep-doc .rep-t1 + div > h3:first-child{margin-top:6px}
/* Przypis o urlopie i L4 — objaśnienie, nie treść. Był w rozmiarze zwykłego
   akapitu (żadna reguła go nie obejmowała) i przykrywał sobą liczbę, pod którą
   stoi; użytkownik poprosił, żeby go zmniejszyć. */
/* Wynik stażu podstawowego — jedyna liczba, którą się stąd przepisuje do SMK.
   Wyszła z tabeli pod tabelę (17.08.2026), bo szósta kolumna nie mieściła się
   na telefonie i akurat ta najważniejsza uciekała za krawędź. */
/* Odstęp nad ramką — ten sam powód co na wydruku (22.08.2026): blok powtarza
   miesiące z tabeli nad nim i przy małym odstępie czytał się jak jej ciąg. */
.rep-doc .smk{margin:22px 0 4px;padding:14px 16px;border:1px solid var(--line);
  border-radius:11px;background:var(--bg3)}
.rep-doc .smk-e{font-size:.72rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--dim);margin-bottom:6px}
.rep-doc .smk-n{font-size:2rem;font-weight:700;line-height:1.1;margin-top:4px;
  font-variant-numeric:tabular-nums}
.rep-doc .smk-m{font-size:.8rem;color:var(--faint)}
.rep-doc .smk-l{margin-top:8px}
.rep-doc .smk-w{display:flex;justify-content:space-between;gap:12px;
  padding:6px 0;border-bottom:1px solid var(--line)}
.rep-doc .smk-w strong{font-variant-numeric:tabular-nums}
/* Suma bez kreski pod spodem i wyraźniejsza — to ona kończy rachunek.
   Kreska NAD nią jest taka sama jak pod nagłówkiem tabeli (22.08.2026), tyle że
   grubością ekranową — tak jak `.rep-doc th`. */
.rep-doc .smk-ost{border-bottom:0}
.rep-doc .smk-r{border-bottom:0;border-top:1px solid var(--line);font-size:1.05rem}
.rep-doc table{width:100%;border-collapse:collapse;margin:0;font-size:.9rem}
.rep-doc .rep-t .lc{text-align:center}
.rep-doc th{text-align:left;font-size:.72rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--faint);border-bottom:1px solid var(--line);padding:0 10px 5px 0}
.rep-doc td{padding:9px 10px 9px 0;border-bottom:1px solid var(--line);vertical-align:top}
.rep-doc th:last-child,.rep-doc td:last-child{padding-right:0}
.rep-doc .p-c{text-align:right;width:54px;font-variant-numeric:tabular-nums}
.rep-doc .p-n{width:28px;color:var(--faint);font-variant-numeric:tabular-nums}
.rep-doc .p-spis td,.rep-doc .p-spis th{overflow-wrap:break-word}
/* Zabieg na wierzchu, pod nim przygaszona linia z pacjentem i dziedziną —
   to samo ułożenie co na wydruku, bo buduje je ten sam kod. */
.rep-doc .p-spis .s-zab>div:first-child{font-weight:600}
.rep-doc .s-pod{color:var(--dim);font-size:.78rem;margin-top:2px;font-weight:400}
/* Stopka tabeli to odstęp dla drukarki — na ekranie byłaby pustym wierszem. */
.rep-doc .p-spis tfoot{display:none}
.rep-doc .p-pusto{color:var(--dim);margin:4px 0}
.rep-doc .p-notatki{margin-top:10px;font-size:.82rem;color:var(--dim)}
.rep-doc .p-notatki p{margin:0 0 5px}
.rep-doc .p-notatki b{color:var(--fg);font-weight:600}

/* Spis chronologiczny NA EKRANIE to karty, na KAŻDEJ szerokości — nie tylko
   na telefonie (zgłoszone 18.08.2026: „na komputerze jest bardzo nieczytelnie,
   zróbmy to tak samo jak na telefonie").

   Cztery kolumny na szerokim ekranie rozciągały „Zabieg i pacjenta" oraz
   „Znieczulenie i procedury" na pół monitora, a w każdej z nich stoi kilka
   linii pod sobą — oko musiało skakać między dwoma słupkami oddalonymi
   o kilkadziesiąt centymetrów. Karta trzyma jeden wpis w jednym miejscu.

   NA PAPIERZE zostaje tabela i to jest celowe: PDF idzie do dokumentacji,
   a tam cztery wąskie kolumny mieszczą się na kartce i pozwalają porównywać
   wiersze. Rozdziela to samo zakotwiczenie selektorów — reguły ekranu wiszą
   na `.rep-doc` (podgląd w zakładce), reguły druku na `#print` (dokument
   budowany osobno). Te dwa drzewa nigdy się nie przecinają.

   Szerokość karty ograniczona, bo linia tekstu rozpięta na całym monitorze
   jest nieczytelna z zupełnie innego powodu niż tabela. */
.rep-doc .p-spis thead{display:none}
.rep-doc .p-spis,.rep-doc .p-spis tbody,.rep-doc .p-spis tr{display:block;width:auto}
.rep-doc .p-spis{max-width:760px}
.rep-doc .p-spis tr{background:var(--bg2);border:1px solid var(--line);
  border-radius:var(--r);padding:11px 13px;margin:0 0 9px}
.rep-doc .p-spis td{display:block;border:0;padding:0;width:auto}
/* Podpis karty mieści się w JEDNEJ linii: „1. Data: 03.08.2026". Numer
   wytłuszczony, ale bez powiększania — osobny wiersz i większa czcionka
   rozwlekały kartę (zgłoszone 12.08.2026: „nie rób kolejnego wiersza, bo to
   się robi za duże"). Słowo „Data:" tą samą czcionką co sama data, bo
   etykieta i wartość to jedna informacja. */
.rep-doc .p-spis .s-lp{display:inline;font-weight:700;color:var(--fg);font-size:.82rem}
.rep-doc .p-spis .s-data{display:inline;color:var(--dim);font-size:.82rem}
.rep-doc .p-spis .s-data::before{content:" Data: "}
.rep-doc .p-spis .s-zab{margin-top:6px}
/* Kreska oddziela to, CO ROBIONO, od tego, JAK znieczulono. Wcześniej stały
   tu etykiety wielkimi literami nad każdym polem — robiły z karty gęsty
   słupek napisów. Porządek daje teraz hierarchia i jedna linia. */
.rep-doc .p-spis .s-proc{border-top:1px solid var(--line);margin-top:9px;padding-top:8px}
.rep-doc .p-spis .s-proc>div{padding:1px 0}
/* Na wąskim ekranie wiersz rozkłada się na kartkę, więc kod dostaje własną
   linijkę z podpisem — tak samo jak data wyżej. W tabeli na papierze stoi
   w swojej kolumnie. */
.rep-doc .p-spis .s-kod{color:var(--dim);font-size:.82rem;margin-top:3px}
.rep-doc .p-spis .s-kod::before{content:"Kod: "}
/* Przypisy trzymają się szerokości kart, żeby nie odjeżdżały same w prawo. */
.rep-doc .p-notatki{max-width:760px}

/* Dymek musi mieścić się w telefonie. Wcześniej nie miał ŻADNEGO ograniczenia
   szerokości, więc dłuższe zdanie rozpychało go poza ekran i robiło się
   nieczytelne (zgłoszone 10.08.2026). Teraz: rośnie do treści, ale nie szerzej
   niż ekran minus margines, zawija się i jest wyśrodkowany.
   Zaokrąglenie takie samo jak przyciski (`--rb`), nie 99px — pigułka wygląda
   dobrze przy jednej linii, a przy trzech robi się z niej pastylka.
   Od 23.08.2026 dymek trzyma się wspólnego promienia całej aplikacji. */
#toast{
  position:fixed;left:50%;transform:translateX(-50%);bottom:calc(76px + var(--safe-b));z-index:60;
  width:max-content;max-width:min(420px, calc(100vw - 28px));
  background:var(--bg3);border:1px solid var(--line);border-radius:var(--rb);padding:11px 16px;
  font-size:.9rem;line-height:1.45;text-align:center;
  box-shadow:0 8px 24px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s
}
#toast.on{opacity:1}
#print{display:none}
@media print{
  /* ZEROWY margines kartki to jedyny sposób, żeby przeglądarka NIE MIAŁA GDZIE
     wydrukować swoich nagłówków — daty, godziny i adresu strony. Nie da się ich
     wyłączyć z poziomu strony żadną inną drogą; gdy marginesu nie ma, nie ma też
     miejsca na te napisy. Marginesy dokumentu robi wtedy sam #print, więc treść
     nadal nie dotyka krawędzi kartki. Zgłoszone przez użytkownika 12.08.2026:
     „to ma być PDF, a nie wydruk strony, gdzie mam datę, godzinę i tak dalej". */
  @page{size:A4 portrait;margin:0}
  html,body{background:#fff;color:#000;margin:0;padding:0}
  body>header,body>main,body>nav,body>#toast{display:none!important}

  #print{
    display:block!important;padding:0;
    font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
    font-size:9.5pt;line-height:1.45;color:#000
  }
  /* Marginesy niesie KAŻDA sekcja osobno, a nie #print jako całość. Dwa powody:
     druga strona jest obrócona, a blok rozpięty na dwóch różnych kartkach
     potrafi wziąć szerokość tej pierwszej — i cała wygrana z obrotu przepada. */
  #print .p-strona{padding:15mm 14mm}
  /* 15pt, nie 17: tytuł niesie teraz obie daty okresu i przy 17pt nie mieścił
     się w jednej linii obok daty wygenerowania (zmierzone na wydruku
     22.08.2026 — łamał się na dwie linijki). */
  #print h1{font-size:15pt;font-weight:600;letter-spacing:-.01em;margin:0;white-space:nowrap}
  /* Tytuł i data w jednej linii, wyrównane do wspólnej linii pisma; data trzyma
     się prawej krawędzi i nie łamie się na dwie linijki. */
  #print .p-tyt{display:flex;align-items:baseline;justify-content:space-between;gap:10pt}
  #print .p-gen{font-size:10pt;color:#555;white-space:nowrap}
  #print .p-sub{font-size:9pt;color:#555;margin:3pt 0 0}
  /* Liczby w tabeli stażu stoją POŚRODKU kolumny (22.08.2026, życzenie
     użytkownika) — razem z nagłówkiem, inaczej podpis uciekałby od słupka. */
  #print .rep-t .lc{text-align:center}
  #print .p-hr{border:0;border-top:1.4pt solid #000;margin:7pt 0 0}
  /* Nagłówek sekcji nigdy nie zostaje sam na dole strony. */
  /* Te same trzy poziomy co na ekranie (17.08.2026) — papier i podgląd budują
     te same funkcje, więc i hierarchia musi być jedna. */
  #print h2{font-size:13pt;font-weight:700;margin:15pt 0 7pt;padding-bottom:3pt;
    border-bottom:1pt solid #000;break-after:avoid;page-break-after:avoid}
  #print h3,#print .rep-h{font-size:10.5pt;font-weight:700;text-transform:none;
    letter-spacing:0;color:#000;margin:12pt 0 4pt;break-after:avoid;page-break-after:avoid}
  /* Wynik stażu — na papierze bez tła, sama ramka; tło zjada toner i przy
     druku oszczędnym znika, więc nie może nieść znaczenia. */
  /* Odstęp nad ramką jest tu rzeczą MERYTORYCZNĄ, nie kosmetyczną (22.08.2026,
     zgłoszenie użytkownika: „zlewa się z tą tabelką"). Blok wymienia te same
     miesiące co tabela nad nim, więc przy 5 pt czytał się jak jej dalszy ciąg —
     a to jest coś innego: tam rozliczenie, tu wynik. 14 pt to tyle, ile dzieli
     od siebie sekcje raportu, więc blok czyta się jak osobna rzecz. */
  #print .smk{border:.8pt solid #000;border-radius:3pt;padding:8pt 10pt 7pt;margin:14pt 0 0;
    break-inside:avoid;page-break-inside:avoid}
  /* Podpis też odsunięty od listy — inaczej pierwszy miesiąc kleił się do niego
     tak samo, jak cały blok kleił się do tabeli. */
  #print .smk-e{font-size:7.5pt;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
    color:#555;margin-bottom:4pt}
  #print .smk-n{font-size:20pt;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
  #print .smk-m{font-size:8.5pt;color:#555}
  #print .smk-w{display:flex;justify-content:space-between;gap:10pt;padding:2.5pt 0;
    border-bottom:.4pt solid #ccc}
  /* Kreska NAD sumą jest taka sama jak pod nagłówkiem tabeli miesięcy —
     mocna, nie cieniutka szara (22.08.2026, życzenie użytkownika: „te linię nad
     sumą zrób taką, jak w tabeli miesięcy"). Suma kończy rachunek, więc kreska
     nad nią ma go domykać tak samo wyraźnie, jak nagłówek go otwiera.
     Wartość jest ta sama co w `#print th` i tam jest jej źródło. */
  #print .smk-ost{border-bottom:0}
  #print .smk-r{border-bottom:0;border-top:.8pt solid #000;font-size:11pt}

  #print table{width:100%;border-collapse:collapse;margin:0}
  /* Nagłówek tabeli powtarza się na każdej stronie — spis chronologiczny
     z dyżurowego miesiąca nie mieści się na jednej kartce. */
  #print thead{display:table-header-group}
  #print th{
    text-align:left;font-size:7.5pt;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
    color:#555;border-bottom:.8pt solid #000;padding:0 5pt 2.5pt 0
  }
  #print td{padding:3.5pt 5pt 3.5pt 0;border-bottom:.4pt solid #ccc;vertical-align:top}
  #print tr{break-inside:avoid;page-break-inside:avoid}
  #print th:last-child,#print td:last-child{padding-right:0}
  /* Kolumny liczbowe: równa szerokość cyfr, żeby liczby stały w słupku. */
  #print .p-c{text-align:right;width:38pt;font-variant-numeric:tabular-nums}
  #print .p-n{width:20pt;color:#666;font-variant-numeric:tabular-nums}
  #print .p-d{width:52pt;white-space:nowrap;font-variant-numeric:tabular-nums}
  #print .p-pusto{color:#555;margin:0}

  #print .p-notatki{margin-top:9pt;font-size:8.5pt;line-height:1.4;break-inside:avoid}
  #print .p-notatki p{margin:0 0 3pt}
  #print .p-notatki b{font-weight:600}

  /* ── Spis chronologiczny: własna strona, PIONOWA ──────────────────────
     Była tu obrócona kartka. ZDJĘTE 12.08.2026, bo NIE DZIAŁAŁA NA IPHONIE:
     Safari ignoruje mieszanie orientacji w jednym wydruku. Strona z liczbami
     wychodziła dobrze, a spis i tak drukował się PIONOWO — tyle że w układzie
     zaprojektowanym pod szeroką kartkę, więc efekt był GORSZY niż przed zmianą
     („spis chronologiczny jest tragiczny").

     Wniosek: nie ratować tego kolejną sztuczką, tylko zbudować spis POD PION.
     Cztery kolumny zamiast pięciu, pokrewne fakty scalone w jedną komórkę
     (zabieg z pacjentem i dziedziną). Jedna orientacja = ten sam wynik na
     każdym urządzeniu, bez zależności od tego, co która przeglądarka umie. */
  /* Spis chronologiczny na kartkach POZIOMYCH (22.08.2026, życzenie
     użytkownika: „pierwsza strona w pionie, kolejne w poziomie, tak żeby ta
     tabela była czytelniejsza"). Zmierzone tego dnia w Chrome: mieszanie
     orientacji działa, strona 1 wychodzi pionowa, dalsze poziome.

     Uwaga z 12.08.2026 nadal obowiązuje: SAFARI mieszania orientacji NIE UMIE
     i wydrukuje wszystko pionowo. Wtedy jednak spis wygląda tak jak dziś, bo
     szerokości kolumn są PROCENTOWE i układ zostaje ten sam — a to jest cała
     różnica wobec tamtej próby, która przebudowywała spis pod szeroką kartkę
     i na iPhonie dawała wynik gorszy niż przed zmianą. */
  #print .p-spis-strona{break-before:page;page-break-before:always;page:poziom}
  /* Górny odstęp na kartkach spisu daje WYŁĄCZNIE nagłówek tabeli (niżej),
     bo tylko on powtarza się na każdej stronie. Własny padding sekcji dokładałby
     się do niego na pierwszej kartce — na obróconej, niższej stronie robiło to
     27 mm pustki u góry (zmierzone 22.08.2026). */
  #print .p-spis-strona{padding-top:0}

  #print .p-spis{table-layout:fixed}
  #print .p-spis th,#print .p-spis td{overflow-wrap:break-word;padding-right:10pt}
  #print .p-spis td{padding-top:5.5pt;padding-bottom:5.5pt}
  #print .p-spis .s-lp{width:6%}
  #print .p-spis .s-data{width:13%}
  #print .p-spis .s-zab{width:38%}
  #print .p-spis .s-proc{width:36%}
  /* Kolumna kodu jest wąska, bo niesie JEDNĄ literę — ale własna, bo to
     osobny fakt (23.08.2026). Wyśrodkowana, żeby kolumna A/B czytała się
     z góry na dół jednym spojrzeniem. */
  #print .p-spis .s-kod{width:7%;text-align:center;font-weight:600}

  /* WIERSZ SPISU NIE MOŻE SIĘ ŁAMAĆ MIĘDZY STRONAMI (23.08.2026, zgłoszenie
     użytkownika po wydruku): „na dole strony jest nazwa zabiegu, a na następnej
     na górze dane pacjenta i reszta procedury — nieczytelne".

     Reguła `break-inside:avoid` stoi na `tr` już od dawna, ale WebKit (Safari,
     czyli iPhone) NOTORYCZNIE ją tam ignoruje. Powtarzamy ją więc na komórkach
     I na blokach w środku — dopiero wtedy przeglądarka traktuje wiersz jako
     całość i przenosi go w kawałku na kolejną kartkę.
     Zapisane wprost, bo wygląda na powtórzenie i ktoś kiedyś zechce „posprzątać". */
  /* TO JEST WŁAŚCIWA PRZYCZYNA (23.08.2026, druga próba).
     WebKit — czyli Safari, czyli iPhone — IGNORUJE `break-inside:avoid` na
     wierszu tabeli, gdy tabela ma `border-collapse:collapse`. Przy
     `separate` regułę honoruje. Pierwsza próba wzmacniała samą regułę na
     komórkach i blokach i NIC NIE DAŁA, bo problem nie był w regule, tylko
     w tym, że tabela w ogóle nie pozwalała jej zadziałać.

     `border-spacing:0` sprawia, że wygląd zostaje bez zmian: komórki mają
     tylko dolne obramowania, więc nie ma czego scalać. Sprawdzone w Chrome
     przez porównanie wydruku przed i po — tekst i podział na strony
     identyczne co do znaku.

     Zawężone do SPISU: tabele z liczbami do SMK na pierwszej stronie zostają
     przy `collapse`, bo ich wiersze są niskie i nigdy się nie łamią. */
  #print .p-spis{border-collapse:separate;border-spacing:0}
  #print .p-spis tr,
  #print .p-spis td,
  #print .p-spis td > div{break-inside:avoid;page-break-inside:avoid}
  /* Zabieg jest w wierszu rzeczą najważniejszą, więc idzie pierwszy i normalną
     wielkością; pacjent, dziedzina i tryb schodzą pod niego przygaszoną linią.
     Dwie linie zamiast pięciu poszarpanych — to była druga połowa zgłoszenia
     („każda procedura jest rozpisana bardzo brzydko"). */
  #print .p-spis .s-zab>div:first-child{font-weight:600}
  #print .p-spis .s-pod{font-size:8.5pt;color:#555;margin-top:1.5pt;font-weight:400}

  /* Górny margines KAŻDEJ strony spisu. Nagłówek tabeli jest jedyną rzeczą,
     którą przeglądarka powtarza na każdej stronie, więc jego górny odstęp jest
     jedynym, który wraca — przy @page{margin:0} zwykły padding pojawia się
     tylko raz, na początku bloku.
     POWTARZANEGO TYTUŁU SEKCJI TU NIE MA: użytkownik ocenił go 12.08.2026 jako
     „beznadziejny i niepotrzebny" — miesiąc stoi już na pierwszej stronie. */
  #print .p-spis thead th{padding-top:12mm}
  #print .p-spis tfoot td{height:10mm;border:0;padding:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}