/* Lokatorka: style ekranów (SPEC-ekrany 1.3, 1.4, 2 i 9; marka z decyzji M1). Kolory przychodzą z /kanal.css
   (zmienne o tych samych nazwach, paleta Lokatorki z wierszem vn.kanaly); tu są wartości zapasowe tej samej palety.
   Od 19.10.2026 to paleta „Szałwia” wspólna z vpanel (marka #4e7567, w trybie ciemnym #7fb0a1, w „Wyraźnym ekranie”
   #2f5a4c; stany ok, uwaga i pilne przyciemnione do WCAG AA). Wszystkie wymiary w rem, więc „Aa” skaluje cały
   ekran. Ekrany wynajmującego i najemcy: tekst 18 px, kwoty 28 px, przyciski i pola co najmniej 56 px, fokus zawsze
   widoczny. Ekrany zespołu na komputerze (body.biuro od 900 px): powłoka i komponenty jak w vpanel (pasek u góry,
   granatowe menu z lewej, karty, kafle, tabele, przyciski 40 px), tekst 15 px; wszystko w bloku na końcu pliku.
   Motyw: jasny domyślnie, ciemny z ustawień systemu, jawny wybór html[data-motyw] (przełącznik w pasku, vn.js)
   wygrywa z systemem, a „Wyraźny ekran” (html[data-tryb]) ze wszystkim. */

:root {
  color-scheme: light dark;
  --marka: #4e7567;
  --na-marce: #ffffff;
  --tlo: #f4f6f4;
  --karta: #fbfcfb;
  --tekst: #1e2a24;
  --tekst-2: #5a675f;
  --ok: #3b7852;
  --ok-tlo: #eaf4ed;
  --uwaga: #8b6820;
  --uwaga-tlo: #faf0d8;
  --pilne: #b0483d;
  --pilne-tlo: #fcece9;
  --kreska: #c9d3cb;
  --akcent: #5e8b7e;
  --fokus: #1e2a24;
  --aa: 1;
  --wyr: 1;
  --dotyk: 56px;
  --promien: 12px;
  /* Powłoka i komponenty zespołu (nie z kanału): tokeny vpanel „Szałwia”. */
  --tlo-gora: #fbfcfb;
  --karta-2: #eef1ee;
  --karta-dol: #f3f6f4;
  --pole-tlo: #f7f9f7;
  --kreska-2: #dde3dd;
  --niebieski: #4a6b8c;
  --th-bg: #d5dfd7;
  --th-txt: #3c4941;
  --bok-1: #0f2038;
  --bok-2: #0b1729;
  --bok-kreska: #16263f;
  --bok-tekst: #aebfd6;
  --bok-etykieta: #8ea0c4;
  --turkus: #2dd4bf;
  --turkus-tekst: #bff3ea;
  --na-turkusie: #052e2b;
  --cien: 0 4px 16px rgba(30, 42, 36, 0.08);
  --promien-karty: 16px;
  --promien-przycisku: 11px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tryb="wyrazny"]) {
    color-scheme: dark;
    --marka: #7fb0a1;
    --na-marce: #0f1b16;
    --tlo: #141a17;
    --karta: #1c2521;
    --tekst: #e6ede8;
    --tekst-2: #9ba79f;
    --ok: #6fb58a;
    --ok-tlo: #1e3a2a;
    --uwaga: #d9b45e;
    --uwaga-tlo: #3a3014;
    --pilne: #d88478;
    --pilne-tlo: #3e2320;
    --kreska: #3e4d45;
    --akcent: #7fb0a1;
    --fokus: #e6ede8;
    --tlo-gora: #1f2a25;
    --karta-2: #232e29;
    --karta-dol: #1a2420;
    --pole-tlo: #232e29;
    --kreska-2: #33403a;
    --niebieski: #85a6c6;
    --th-bg: #26312c;
    --th-txt: #aebbb1;
    --cien: 0 4px 16px rgba(0, 0, 0, 0.4);
  }
}

/* Jawny wybór z przełącznika w pasku (vn.js zapisuje go w localStorage): stoi po bloku @media, więc wygrywa
   z ustawieniami systemu; „Wyraźny ekran” wygrywa z obydwoma. */
:root[data-motyw="ciemny"]:not([data-tryb="wyrazny"]) {
  color-scheme: dark;
  --marka: #7fb0a1;
  --na-marce: #0f1b16;
  --tlo: #141a17;
  --karta: #1c2521;
  --tekst: #e6ede8;
  --tekst-2: #9ba79f;
  --ok: #6fb58a;
  --ok-tlo: #1e3a2a;
  --uwaga: #d9b45e;
  --uwaga-tlo: #3a3014;
  --pilne: #d88478;
  --pilne-tlo: #3e2320;
  --kreska: #3e4d45;
  --akcent: #7fb0a1;
  --fokus: #e6ede8;
  --tlo-gora: #1f2a25;
  --karta-2: #232e29;
  --karta-dol: #1a2420;
  --pole-tlo: #232e29;
  --kreska-2: #33403a;
  --niebieski: #85a6c6;
  --th-bg: #26312c;
  --th-txt: #aebbb1;
  --cien: 0 4px 16px rgba(0, 0, 0, 0.4);
}

:root[data-motyw="jasny"]:not([data-tryb="wyrazny"]) {
  color-scheme: light;
  --marka: #4e7567;
  --na-marce: #ffffff;
  --tlo: #f4f6f4;
  --karta: #fbfcfb;
  --tekst: #1e2a24;
  --tekst-2: #5a675f;
  --ok: #3b7852;
  --ok-tlo: #eaf4ed;
  --uwaga: #8b6820;
  --uwaga-tlo: #faf0d8;
  --pilne: #b0483d;
  --pilne-tlo: #fcece9;
  --kreska: #c9d3cb;
  --akcent: #5e8b7e;
  --fokus: #1e2a24;
  --tlo-gora: #fbfcfb;
  --karta-2: #eef1ee;
  --karta-dol: #f3f6f4;
  --pole-tlo: #f7f9f7;
  --kreska-2: #dde3dd;
  --niebieski: #4a6b8c;
  --th-bg: #d5dfd7;
  --th-txt: #3c4941;
  --cien: 0 4px 16px rgba(30, 42, 36, 0.08);
}

/* „Wyraźny ekran”: kontrast co najmniej 7 : 1, bez cieni i półtonów (paletę daje /kanal.css, tu zapas i powłoka). */
:root[data-tryb="wyrazny"] {
  color-scheme: light;
  --marka: #2f5a4c;
  --na-marce: #ffffff;
  --tlo: #ffffff;
  --karta: #ffffff;
  --tekst: #0f1713;
  --tekst-2: #1e2a24;
  --ok: #2f5f41;
  --ok-tlo: #ffffff;
  --uwaga: #6a4f18;
  --uwaga-tlo: #ffffff;
  --pilne: #8e3a31;
  --pilne-tlo: #ffffff;
  --kreska: #0f1713;
  --akcent: #2f5a4c;
  --fokus: #0f1713;
  --tlo-gora: #ffffff;
  --karta-2: #f1f3f1;
  --karta-dol: #ffffff;
  --pole-tlo: #ffffff;
  --kreska-2: #0f1713;
  --niebieski: #2f4a66;
  --th-bg: #e4e9e5;
  --th-txt: #0f1713;
  --bok-tekst: #ffffff;
  --bok-etykieta: #dfe7f2;
  --cien: none;
}

html[data-aa="125"] { --aa: 1.25; }
html[data-aa="150"] { --aa: 1.5; }
html[data-aa="200"] { --aa: 2; }
html[data-tryb="wyrazny"] { --wyr: 1.5; }

html {
  font-size: calc(112.5% * var(--aa) * var(--wyr));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: break-word;
}

h1, h2, h3, p, ul, ol, dl, fieldset { margin: 0 0 0.75rem; }
h1 { font-size: 1.333rem; font-weight: 600; line-height: 1.3; }   /* 24 px */
h2 { font-size: 1.111rem; font-weight: 600; line-height: 1.35; }  /* 20 px */

a { color: var(--marka); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 3px; }

:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
main:focus { outline: none; }

/* Tylko dla czytników ekranu */
.sr-tylko {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Atrybut hidden wygrywa z klasami (np. .przycisk ma display: flex): elementy z data-js pokazują dopiero skrypty. */
[hidden] { display: none !important; }

.przeskocz {
  position: absolute; left: 1rem; top: -10rem; z-index: 10;
  background: var(--karta); color: var(--tekst);
  padding: 0.75rem 1rem; border: 2px solid var(--tekst); border-radius: var(--promien);
}
.przeskocz:focus { top: 0.5rem; }

/* --- Paski, góra, układ ---------------------------------------------------------------------------------- */

.pasek { margin: 0; padding: 0.5rem 1rem; font-size: 0.889rem; text-align: center; }
.pasek--proba { background: var(--uwaga-tlo); color: var(--tekst); border-bottom: 1px solid var(--kreska); }
.pasek--podglad { background: var(--marka); color: var(--na-marce); }
.pasek--podglad a { color: var(--na-marce); }

.gora {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.5rem 1rem; background: var(--karta); border-bottom: 1px solid var(--kreska);
  border-top: 4px solid var(--akcent);
}
.gora > * { min-width: 0; max-width: 100%; }
.gora__marka { min-width: 0; }
.gora__nazwa { margin: 0; font-weight: 600; font-size: 1.111rem; overflow-wrap: anywhere; }
.gora__obsluga { margin: 0; color: var(--tekst-2); font-size: 0.889rem; overflow-wrap: anywhere; }
.gora__narzedzia { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.narzedzie {
  min-height: var(--dotyk); min-width: var(--dotyk); padding: 0 0.875rem;
  font: inherit; font-weight: 600; color: var(--tekst); background: var(--karta);
  border: 2px solid var(--tekst-2); border-radius: var(--promien); cursor: pointer;
}
.narzedzie[aria-pressed="true"] { background: var(--tekst); color: var(--karta); }

.uklad { display: flex; flex-direction: column; }
.tresc { width: 100%; max-width: 35rem; margin: 0 auto; padding: 1rem 1rem 1.5rem; }
.biuro .tresc { max-width: 72rem; }

.widok-narzedzia { display: flex; justify-content: center; padding: 0 1rem 0.5rem; }

.stopka {
  max-width: 35rem; margin: 0 auto; padding: 1rem;
  color: var(--tekst-2); font-size: 0.889rem; text-align: center;
}
.stopka p { margin: 0 0 0.25rem; }
.biuro .stopka { max-width: 72rem; }

/* Zakładki klienta i menu opiekuna na telefonie: na dole treści, w zwykłym miejscu strony. Nie przyklejamy ich
   do krawędzi ekranu, bo przy dużych literach zasłaniałyby przyciski i fokus (WCAG 2.4.11 i 2.5.8). */
.zakladki, .menu {
  display: flex; flex-wrap: wrap; justify-content: space-around; gap: 0.25rem;
  padding: 0.25rem 0.5rem; background: var(--karta); border-top: 1px solid var(--kreska);
}
.zakladki__link, .menu__link {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: var(--dotyk); padding: 0.25rem 0.5rem; border-radius: var(--promien);
  color: var(--tekst); text-decoration: none; font-weight: 400;
}
.zakladki__link[aria-current="page"], .menu__link[aria-current="page"] {
  background: var(--tlo); box-shadow: inset 0 -4px 0 var(--marka);
}
.uklad > .menu { order: 2; }

.wyjscie { max-width: 35rem; margin: 0 auto; padding: 0.5rem 1rem; display: flex; justify-content: center; }
.wyjscie .przycisk { width: auto; }

@media (max-width: 899.98px) {
  .tylko-komputer { display: none !important; }
}

@media (min-width: 900px) {
  .tylko-telefon { display: none !important; }
  .biuro .uklad {
    display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1.5rem;
    max-width: 90rem; margin: 0 auto; padding: 0 1rem;
  }
  .biuro .uklad > .menu {
    order: 0; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start;
    border-top: 0; background: transparent; padding: 1rem 0;
  }
  .biuro .menu__link { justify-content: flex-start; flex: 0 0 auto; text-align: left; padding-left: 1rem; }
  .biuro .menu__link[aria-current="page"] { background: var(--karta); box-shadow: inset 4px 0 0 var(--marka); }
  .biuro .tresc { padding-left: 0; padding-right: 0; }
  .biuro .wyjscie { max-width: 90rem; }
  .zakladki { max-width: 35rem; margin: 0 auto; border: 1px solid var(--kreska); border-radius: var(--promien); }
}

/* --- Karty i teksty ---------------------------------------------------------------------------------------- */

.karta {
  background: var(--karta); border: 1px solid var(--kreska); border-radius: var(--promien);
  padding: 1rem; margin: 0 0 1rem;
}
.karta > :last-child { margin-bottom: 0; }
.karta--glowna { border-top: 4px solid var(--akcent); }
.karta--uwaga { background: var(--uwaga-tlo); border-color: var(--uwaga); }
.karta--ok { background: var(--ok-tlo); border-color: var(--ok); }
.karta__pytanie, .karta__tytul { font-size: 1.111rem; }

.pytanie { font-size: 1.333rem; }
.krok { color: var(--tekst-2); font-weight: 600; }
.powitanie { font-size: 1.333rem; margin-bottom: 0.25rem; }
.adres { color: var(--tekst-2); margin-bottom: 1rem; }
.podpis, .podpowiedz { color: var(--tekst-2); font-size: 0.889rem; }   /* 16 px, nigdy mniej */
.ostrzezenie {
  color: var(--tekst); font-size: 0.889rem; border-left: 4px solid var(--uwaga);
  padding: 0.25rem 0 0.25rem 0.75rem; margin-top: 1.5rem;
}
.komunikat {
  background: var(--karta); border: 1px solid var(--kreska); border-left: 6px solid var(--marka);
  border-radius: var(--promien); padding: 0.75rem 1rem;
}
/* stanowisko do oglądania (VNAJEM_KOD_NA_EKRANIE, tylko próba): kod SMS widoczny od razu na ekranie */
.kod-podgladu { background: var(--uwaga-tlo); border-left-color: var(--uwaga); }
.kod-podgladu__kod { font-size: 1.556rem; font-variant-numeric: tabular-nums; letter-spacing: 0.15em; white-space: nowrap; }
.powod { font-weight: 600; padding: 0.5rem 0.75rem; border-radius: var(--promien); }
.powod--b { background: var(--uwaga-tlo); color: var(--uwaga); }
.powod--c { background: var(--pilne-tlo); color: var(--pilne); }

.kwota { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kwota--duza, .kwota-glowna .kwota { font-size: 1.556rem; font-weight: 600; }   /* 28 px */
.kwota-glowna { margin: 0.25rem 0; }
.termin { font-weight: 600; }
.wiersz-kwoty { display: flex; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; font-weight: 600; }
.liczba { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.rozbicie { list-style: none; padding: 0 0 0 0.75rem; border-left: 3px solid var(--kreska); }
.rozbicie li { margin-bottom: 0.25rem; }

.tytul { font-variant-numeric: tabular-nums; }
.tytul__etykieta { color: var(--tekst-2); margin-right: 0.5rem; }

.lista { list-style: none; padding: 0; margin: 0; }
.lista__pozycja { padding: 0.5rem 0; border-bottom: 1px solid var(--kreska); }
.lista__pozycja:last-child { border-bottom: 0; }
.spis { padding-left: 1.25rem; }
.spis li { margin-bottom: 0.5rem; }

/* --- Przyciski ----------------------------------------------------------------------------------------------- */

.przycisk {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%; min-width: 0; min-height: var(--dotyk); padding: 0.625rem 0.75rem;
  font: inherit; font-size: 1.111rem; font-weight: 600; line-height: 1.3; text-align: center;
  overflow-wrap: anywhere;
  color: var(--tekst); background: var(--karta);
  border: 2px solid var(--marka); border-radius: var(--promien);
  text-decoration: none; cursor: pointer;
}
.przycisk:hover { background: var(--tlo); }
.przycisk--glowny { background: var(--marka); color: var(--na-marce); border-color: var(--marka); }
.przycisk--glowny:hover { background: var(--marka); text-decoration: underline; }
.przycisk--cichy { border-color: var(--tekst-2); font-weight: 400; }
.przycisk--podglad { border-style: dashed; cursor: default; }
.przycisk[disabled] { cursor: progress; }

.odpowiedzi, .przyciski, .formularz { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; margin: 0 0 1rem; }
.odpowiedzi > form, .przyciski > form, .przycisk-forma { margin: 0; }
.formularz > .przycisk--glowny { margin-top: 0.5rem; }
.ponownie { margin: 1rem 0; }
.ponownie__pytanie { margin-bottom: 0.25rem; }

.link-dalej, .link-wstecz {
  display: inline-flex; align-items: center; min-height: var(--dotyk); font-size: 1.111rem;
}
.link-dalej::after { content: "\203A"; margin-left: 0.5rem; text-decoration: none; }

@media (min-width: 900px) {
  .biuro .przyciski { display: flex; flex-wrap: wrap; }
  .biuro .przyciski .przycisk, .biuro .przyciski > form, .biuro .odloz { width: auto; }
}

/* --- Pola formularzy ----------------------------------------------------------------------------------------- */

.etykieta { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.pole {
  display: block; width: 100%; min-height: var(--dotyk); padding: 0.5rem 0.75rem;
  font: inherit; font-size: 1.111rem; color: var(--tekst); background: var(--karta);
  border: 2px solid var(--tekst-2); border-radius: 8px;
}
.pole[aria-invalid="true"] { border-color: var(--uwaga); border-width: 3px; }
.pole--kwota, .pole--kod { font-size: 1.556rem; font-variant-numeric: tabular-nums; }
.pole--kod { letter-spacing: 0.3em; }
.pole-telefonu { display: flex; align-items: stretch; gap: 0.5rem; }
.pole-telefonu__kierunkowy {
  display: flex; align-items: center; padding: 0 0.75rem; font-size: 1.111rem; font-weight: 600;
  border: 2px solid var(--kreska); border-radius: 8px; background: var(--tlo);
}
.bledy {
  border: 2px solid var(--uwaga); border-left-width: 8px; background: var(--uwaga-tlo);
  color: var(--tekst); border-radius: var(--promien); padding: 0.75rem 1rem;
}
.bledy p { margin: 0; font-weight: 600; }
.blad-pola { color: var(--uwaga); font-weight: 600; margin: 0.25rem 0 0.5rem; }

.szukaj__wiersz { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.szukaj__wiersz .pole { flex: 1 1 12rem; width: auto; min-width: 0; }
.szukaj__wiersz .przycisk { width: auto; }
.pasek-szukania { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.25rem; margin-bottom: 1rem; }

/* Wybór jednej odpowiedzi: pole wyboru wygląda jak przycisk, działa bez JavaScriptu */
.opcje, .zestaw {
  position: relative; border: 0; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem; min-width: 0;
}
.opcje__tytul, .zestaw__tytul { font-weight: 600; padding: 0; margin-bottom: 0.25rem; }
.opcja__pole {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0;
}
.opcja {
  display: flex; align-items: center; gap: 0.75rem; min-width: 0; min-height: var(--dotyk); padding: 0.5rem 0.75rem;
  font-size: 1.111rem; font-weight: 600; background: var(--karta); overflow-wrap: anywhere;
  border: 2px solid var(--marka); border-radius: var(--promien); cursor: pointer;
}
.opcja::before {
  content: ""; flex: 0 0 auto; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  border: 2px solid var(--tekst-2); background: var(--karta);
}
.opcja__pole:checked + .opcja { background: var(--tlo); box-shadow: inset 0 0 0 2px var(--marka); }
.opcja__pole:checked + .opcja::before { border: 0.375rem solid var(--marka); }
.opcja__pole:focus-visible + .opcja { outline: 3px solid var(--fokus); outline-offset: 3px; }
.pole-daty { display: none; }
#data-inny:checked ~ .pole-daty, .opcja__pole[value="inny"]:checked ~ .pole-daty, .pole-daty--widoczne { display: block; }

.wybor { display: flex; align-items: flex-start; gap: 0.75rem; min-height: var(--dotyk); padding: 0.5rem 0; }
.wybor__pole { width: 1.5rem; height: 1.5rem; margin: 0.125rem 0 0; flex: 0 0 auto; accent-color: var(--marka); }
.wybor > span { min-width: 0; overflow-wrap: anywhere; }

/* --- Stany, kropki, litery kolorów --------------------------------------------------------------------------- */

.stan { font-weight: 600; }
.stan__znak { white-space: nowrap; }
.stan--ok, .kropka--ok { color: var(--ok); }
.stan--marka, .kropka--marka { color: var(--marka); }
.stan--uwaga, .kropka--uwaga { color: var(--uwaga); }
.stan--pilne, .kropka--pilne { color: var(--pilne); }
.stan--szary, .kropka--szary { color: var(--tekst-2); }
.kropki { white-space: nowrap; letter-spacing: 0.15em; font-size: 1.111rem; }
.legenda { color: var(--tekst-2); font-size: 0.889rem; word-spacing: 0.25em; }

.litera {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2rem; height: 2rem; padding: 0 0.25rem; border-radius: 6px;
  font-weight: 700; border: 2px solid currentColor;
}
.litera--z { color: var(--ok); background: var(--ok-tlo); }
.litera--b { color: var(--uwaga); background: var(--uwaga-tlo); }
.litera--c { color: var(--pilne); background: var(--pilne-tlo); }

/* --- Tablica najmów i tabele ---------------------------------------------------------------------------------- */

.filtry { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.filtr {
  display: inline-flex; align-items: center; min-height: var(--dotyk); padding: 0 1rem;
  border: 2px solid var(--kreska); border-radius: 999px; background: var(--karta);
  color: var(--tekst); text-decoration: none;
}
.filtr[aria-current="page"] { border-color: var(--marka); box-shadow: inset 0 0 0 1px var(--marka); font-weight: 600; }

.tablica { width: 100%; border-collapse: collapse; background: var(--karta); margin-bottom: 1rem; }
.tablica th, .tablica td { padding: 0.75rem 0.5rem; text-align: left; border-bottom: 1px solid var(--kreska); vertical-align: middle; }
.tablica th { font-size: 0.889rem; color: var(--tekst-2); font-weight: 600; }
.tablica__wiersz--c td:first-child { box-shadow: inset 4px 0 0 var(--pilne); }
.tablica__wiersz--b td:first-child { box-shadow: inset 4px 0 0 var(--uwaga); }
.tablica__wiersz--z td:first-child { box-shadow: inset 4px 0 0 var(--ok); }
.przewijanie { overflow-x: auto; max-width: 100%; }

.karty-najmow { list-style: none; padding: 0; margin: 0; }
.karta--najem { display: grid; gap: 0.5rem; }
.karta--c { border-left: 6px solid var(--pilne); }
.karta--b { border-left: 6px solid var(--uwaga); }
.karta--z { border-left: 6px solid var(--ok); }
.karta-najmu__lokal { font-weight: 600; }

/* --- Kolejka decyzji --------------------------------------------------------------------------------------------- */

.kolejka { list-style: none; padding: 0; margin: 0; }
.pozycja__rodzaj { font-size: 1rem; color: var(--tekst-2); margin-bottom: 0.25rem; }
.pozycja__co { font-size: 1.111rem; }
.pozycja__kiedy { color: var(--tekst-2); font-size: 0.889rem; }
.pozycja--na-dzis { border-left: 6px solid var(--marka); }
.odloz > summary { list-style: none; }
.odloz > summary::-webkit-details-marker { display: none; }
.odloz__opcje { display: grid; gap: 0.5rem; margin-top: 0.5rem; }

/* --- Karta najmu --------------------------------------------------------------------------------------------- */

.karta-naglowek { margin-bottom: 1rem; }
.karta-naglowek .pytanie { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.sekcje { display: grid; gap: 0.75rem; margin-bottom: 1rem; }
.sekcja { background: var(--karta); border: 1px solid var(--kreska); border-radius: var(--promien); padding: 0 1rem; }
.sekcja[open] { padding-bottom: 1rem; }
.sekcja__tytul {
  display: flex; align-items: center; min-height: var(--dotyk); cursor: pointer;
  font-size: 1.111rem; font-weight: 600;
}
.sekcja__podtytul { font-size: 1rem; color: var(--tekst-2); margin-top: 0.75rem; }
.liczby { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: 0.5rem; }
.liczby__pozycja { background: var(--tlo); border-radius: var(--promien); padding: 0.5rem 0.75rem; }
.liczby dt { color: var(--tekst-2); font-size: 0.889rem; }
.liczby dd { margin: 0; font-size: 1.222rem; font-weight: 600; }
.os { list-style: none; padding: 0; }
.os__pozycja { padding: 0.25rem 0; }
.os__data { display: inline-block; min-width: 6rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.czynnosci { margin-top: 1rem; }

@media (min-width: 900px) {
  .sekcje { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* --- Kopiowanie i pokwitowanie ------------------------------------------------------------------------------- */

.kopiuj { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 0.5rem; align-items: center; margin-bottom: 0.75rem; }
.kopiuj__etykieta { grid-column: 1 / -1; margin: 0; color: var(--tekst-2); }
.kopiuj__wartosc { margin: 0; font-size: 1.111rem; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kopiuj .przycisk { width: auto; }

.pozniej { margin-top: 1rem; }
.pozniej__tytul { display: flex; align-items: center; min-height: var(--dotyk); cursor: pointer; font-weight: 600; }

.karta--pokwitowanie { border: 2px solid var(--tekst); }
.pokwitowanie { font-size: 1.333rem; line-height: 1.5; }
.pokaz .gora, .pokaz .zakladki, .pokaz .stopka, .pokaz .wyjscie, .pokaz .widok-narzedzia, .pokaz .pasek { display: none; }
.pokaz .pokwitowanie { font-size: 1.778rem; }

/* --- P12 część 2: Mój najem, Do zapłaty, kreatory opiekuna ------------------------------------------------- */

.wybor-najmu { margin: 0 0 1rem; }
.przyciski--dwa, .przyciski--wiersz { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.siatka-miesiecy {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 5.5rem), 1fr)); gap: 0.5rem;
  list-style: none; padding: 0; margin: 0 0 1rem;
}
.miesiac-kropka {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.125rem;
  min-height: var(--dotyk); min-width: 48px; padding: 0.375rem 0.25rem; border: 2px solid var(--kreska);
  border-radius: var(--promien); background: var(--karta); color: var(--tekst); text-decoration: none;
}
a.miesiac-kropka { border-color: var(--marka); }
.miesiac-kropka__znak { font-size: 1.333rem; line-height: 1; }
.miesiac-kropka__nazwa { font-size: 0.889rem; }
.daty { margin: 0 0 1rem; }
.daty__wiersz { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; padding: 0.25rem 0; }
.qr { display: grid; justify-items: center; gap: 0.5rem; margin: 0 0 1rem; }
.qr__obraz {
  width: min(100%, 320px); min-width: 280px; height: auto; padding: 16px; background: #ffffff;
  border-radius: var(--promien); image-rendering: pixelated;
}
.sms { white-space: pre-wrap; font-family: inherit; margin: 0; }
/* Tekst wpisany przez stronę (zastrzeżenie najemcy i odpowiedź, P20): końce wierszy jak w formularzu */
.tekst-wpisany { white-space: pre-wrap; overflow-wrap: anywhere; }
.karta__podtytul { font-size: 1rem; margin: 0.75rem 0 0.25rem; }
.tablica--naleznosci td, .tablica--naleznosci th { text-align: left; }
.pasek-kroku { margin: 0 0 0.25rem; color: var(--tekst-2); font-weight: 600; }
.pole-kreatora { min-width: 0; }
.dopisek { margin: 0.125rem 0 0.25rem; color: var(--tekst-2); font-size: 0.889rem; font-style: italic; }
.podpis--opcji { margin: -0.25rem 0 0.25rem; }
.pod-opcja { padding-left: 1rem; border-left: 3px solid var(--kreska); }
.pole--krotkie { max-width: 12rem; }
.lista--braki { list-style: none; padding: 0; }
.licznik { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.licznik__wartosc { margin: 0; font-size: 1.222rem; font-weight: 600; flex: 1 1 10rem; text-align: center; }
.przycisk--licznik { width: var(--dotyk); min-width: var(--dotyk); flex: 0 0 auto; font-size: 1.556rem; }
.przyciski--kreator { margin-top: 1rem; }
.kartka { border: 2px dashed var(--tekst); border-radius: var(--promien); padding: 1rem; background: var(--karta); }
.kartka__etykieta { margin: 0.5rem 0 0; color: var(--tekst-2); font-size: 0.889rem; }

@media print {
  .tylko-ekran, .gora, .zakladki, .menu, .stopka, .wyjscie, .widok-narzedzia, .pasek { display: none !important; }
  body { background: #ffffff; color: #000000; }
  .kartka { width: 148mm; min-height: 105mm; border: 1px solid #000000; break-inside: avoid; }
  .qr__obraz { width: 50mm; min-width: 0; padding: 0; }
}

/* --- „Wyraźny ekran” i ruch ---------------------------------------------------------------------------------- */

html[data-tryb="wyrazny"] .karta, html[data-tryb="wyrazny"] .sekcja { border: 2px solid var(--tekst); }
html[data-tryb="wyrazny"] .przycisk, html[data-tryb="wyrazny"] .opcja, html[data-tryb="wyrazny"] .pole { border-width: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .gora, .zakladki, .menu, .stopka, .wyjscie, .widok-narzedzia, .pasek { display: none; }
}

/* === Klocki wspólne nowej powłoki (działają też na telefonie) ============================================== */

.ikona { display: inline-block; width: 1.2rem; height: 1.2rem; flex: 0 0 auto; vertical-align: -0.2em; }
.gora__napisy { min-width: 0; }
.cicho { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.filtr__licznik {
  display: inline-grid; place-items: center; min-width: 1.5rem; margin-left: 0.35rem; padding: 0 0.4rem;
  border-radius: 999px; background: var(--tlo); font-size: 0.889rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.filtr[aria-current="page"] .filtr__licznik { background: var(--marka); color: var(--na-marce); }
.kroki { margin: 0 0 0.25rem; }
.kroki .pasek-kroku { margin: 0; }
.sekcje__lewa, .sekcje__prawa, .sekcje__szeroko { display: contents; }
.narzedzie--motyw[aria-pressed="true"] .ikona--ksiezyc, .narzedzie--motyw:not([aria-pressed="true"]) .ikona--slonce { display: none; }
.uzytkownik__przycisk { list-style: none; }
.uzytkownik__przycisk::-webkit-details-marker { display: none; }

/* Siatki nie rozpychają ekranu (360 px przy literach 200 %): elementy siatek i kart mogą się kurczyć poniżej
   własnej treści (tabele przewija kontener .przewijanie, lista wyboru nie jest szersza niż pole), a długie
   ciągi w pozycjach list i kaflach łamią się w dowolnym miejscu. */
.tresc, .sekcja, .liczby__pozycja, .pozycja, .karta--najem, .kafel, .przewijanie { min-width: 0; }
/* Kontener przewijania jest punktem odniesienia dla pozycjonowanych potomków (teksty tylko dla czytnika .sr-tylko
   w komórkach): inaczej wystają poza kontener i rozciągają stronę w bok. */
.przewijanie { position: relative; }
.liczby__pozycja, .lista__pozycja, .bok__napis { overflow-wrap: anywhere; }
select.pole { min-width: 0; max-width: 100%; }

/* Plakietka stanu i ryzyka (protokoły, prognozy): pigułka ze słowem, kolor tylko dopowiada. */
.plakietka {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.6rem; border-radius: 999px;
  border: 1px solid currentColor; font-size: 0.889rem; font-weight: 600; line-height: 1.4; white-space: nowrap;
  background: var(--tlo); color: var(--tekst-2);
}
.plakietka--ok, .plakietka--podpisany { color: var(--ok); background: var(--ok-tlo); }
.plakietka--uwaga, .plakietka--do_podpisu { color: var(--uwaga); background: var(--uwaga-tlo); }
.plakietka--pilne, .plakietka--anulowany { color: var(--pilne); background: var(--pilne-tlo); }
/* Pasmo prognozy (od–do) pod liczbą w kaflu .liczby: drugi, cichszy wiersz. */
.liczby dd .podpis { display: block; margin-top: 0.15rem; font-size: 0.889rem; font-weight: 400; }
/* Galeria zdjęć protokołu: miniatury w siatce, podpis pod zdjęciem, przycisk usunięcia pod podpisem. */
.lista--zdjecia { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); gap: 0.75rem; }
.lista--zdjecia .lista__pozycja { border: 0; padding: 0; min-width: 0; }
.lista--zdjecia img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border: 1px solid var(--kreska); border-radius: var(--promien); background: var(--tlo);
}
.lista--zdjecia p { margin: 0.25rem 0 0.5rem; font-size: 0.889rem; color: var(--tekst-2); }
/* Porównanie zwrotu z wydaniem: wiersz z różnicą ma tło uwagi i pasek z lewej (słowo „!” zostaje w komórce). */
.tablica .roznica td { background: var(--uwaga-tlo); }
.tablica .roznica td:first-child { box-shadow: inset 4px 0 0 var(--uwaga); }
/* Postęp najmu (cykl życia): kroki ze znacznikiem zamiast „[x] [>] [ ]” (tekst w nawiasach zostaje dla czytnika
   i testów, widać kółko: zrobione z haczykiem, bieżące pełne, czekające puste); na komputerze poziomy pasek. */
.postep { counter-reset: krok; }
.postep__krok { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0; border-bottom: 0; }
.postep__krok > [aria-hidden="true"] { display: none; }
.postep__krok::before {
  content: ""; display: grid; place-items: center; flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 2px solid var(--kreska); background: var(--karta); font-size: 0.889rem; font-weight: 700; line-height: 1;
}
.postep__krok--gotowe::before { content: "\2713"; color: var(--na-marce); background: var(--ok); border-color: var(--ok); }
.postep__krok--biezacy::before { background: var(--marka); border-color: var(--marka); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marka) 25%, transparent); }
.postep__krok--biezacy { font-weight: 600; }
.postep__krok--czeka { color: var(--tekst-2); }
/* Pole uzasadnienia (textarea) rośnie z treścią i daje się rozciągnąć w pionie. */
textarea.pole { min-height: calc(var(--dotyk) * 1.5); line-height: 1.5; resize: vertical; }

/* === Zespół na komputerze (body.biuro od 900 px): powłoka i komponenty jak w vpanel ======================= */

@media (min-width: 900px) {
  /* 15 px zamiast 18 px: gęstość vpanel; Aa i „Wyraźny ekran” dalej skalują całość. */
  html[data-uklad="biuro"] { font-size: calc(93.75% * var(--aa) * var(--wyr)); }

  .biuro {
    display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); align-content: start; min-height: 100vh;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Noto Sans", sans-serif;
    background: radial-gradient(80rem 46rem at 80% -10%, var(--tlo-gora) 0, var(--tlo) 60%);
    -webkit-font-smoothing: antialiased;
  }
  .biuro > .pasek, .biuro > .gora { grid-column: 1 / -1; }
  .biuro .uklad { display: contents; }
  .biuro .bok { grid-column: 1; grid-row: span 2; }
  .biuro .tresc { grid-column: 2; }
  .biuro .stopka { grid-column: 2; }
  .biuro > .wyjscie, .biuro > .widok-narzedzia { display: none; }
  .biuro .przeskocz { z-index: 50; }

  /* Pasek u góry: znak, nazwa i „obsługuje …”, wyszukiwarka, narzędzia, menu użytkownika. */
  .biuro .gora {
    position: sticky; top: 0; z-index: 30; min-height: 4rem; padding: 0.5rem 1.2rem; gap: 1rem; flex-wrap: nowrap;
    border-top: 0; border-bottom: 1px solid var(--kreska-2); background: var(--karta);
    box-shadow: 0 1px 0 rgba(30, 42, 36, 0.04);
  }
  .biuro .gora__marka { display: flex; align-items: center; gap: 0.7rem; flex: 0 1 auto; min-width: 12rem; max-width: 24rem; }
  .biuro .gora__marka .gora__obsluga { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .biuro .gora__znak {
    display: grid; place-items: center; width: 2.667rem; height: 2.667rem; border-radius: 0.8rem;
    color: #ffffff; background: linear-gradient(135deg, var(--marka), var(--niebieski));
  }
  .biuro .gora__znak .ikona { width: 1.467rem; height: 1.467rem; }
  .biuro .gora__nazwa { font-size: 1.2rem; font-weight: 700; letter-spacing: 0.01em; line-height: 1.2; }
  .biuro .gora__obsluga { font-size: 0.8rem; line-height: 1.3; }
  .biuro .gora__narzedzia { margin-left: auto; flex-wrap: nowrap; align-items: center; gap: 0.5rem; }
  .biuro .gora__narzedzia > * { flex: 0 0 auto; white-space: nowrap; }
  .biuro .narzedzie {
    min-height: 2.533rem; min-width: 2.533rem; padding: 0 0.8rem; font-size: 0.8667rem;
    border: 1px solid var(--kreska); border-radius: 0.667rem; background: var(--karta-2); color: var(--tekst-2);
  }
  .biuro .narzedzie:hover { color: var(--marka); border-color: var(--marka); }
  .biuro .narzedzie[aria-pressed="true"] { background: var(--tekst); color: var(--karta); border-color: var(--tekst); }
  .biuro .narzedzie--ikona { padding: 0; }
  .biuro .narzedzie--motyw[aria-pressed="true"] { background: var(--karta-2); color: var(--tekst-2); border-color: var(--kreska); }
  .biuro .narzedzie .ikona { width: 1.2rem; height: 1.2rem; }

  .szukanie { position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; max-width: 36rem; }
  .szukanie__ikona { position: absolute; left: 0.8rem; display: flex; color: var(--tekst-2); pointer-events: none; }
  .szukanie__ikona .ikona { width: 1.133rem; height: 1.133rem; }
  .szukanie__pole {
    width: 100%; min-height: 2.533rem; padding: 0.4rem 5.4rem 0.4rem 2.6rem; font: inherit; font-size: 0.9333rem;
    color: var(--tekst); background: var(--pole-tlo); border: 1px solid var(--kreska); border-radius: 0.667rem;
    appearance: none; -webkit-appearance: none;
  }
  .szukanie__pole:focus { border-color: var(--marka); background: var(--karta); }
  .szukanie__przycisk {
    position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%); min-height: 1.933rem; padding: 0 0.7rem;
    font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--tekst-2); background: var(--karta);
    border: 1px solid var(--kreska); border-radius: 0.5rem; cursor: pointer;
  }
  .szukanie__przycisk:hover { color: var(--marka); border-color: var(--marka); }

  .uzytkownik { position: relative; }
  .uzytkownik__przycisk {
    display: flex; align-items: center; gap: 0.5rem; min-height: 2.533rem; padding: 0.2rem 0.8rem 0.2rem 0.25rem;
    cursor: pointer; border: 1px solid var(--kreska); border-radius: 999px; background: var(--karta-2);
    color: var(--tekst); font-weight: 600; font-size: 0.8667rem; white-space: nowrap;
  }
  .uzytkownik__przycisk:hover { border-color: var(--marka); }
  .uzytkownik__awatar {
    display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: #ffffff;
    background: linear-gradient(135deg, var(--marka), var(--niebieski)); font-weight: 700; font-size: 0.8667rem;
  }
  .uzytkownik__menu {
    position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 40; min-width: 15rem; padding: 0.4rem;
    background: var(--karta); border: 1px solid var(--kreska); border-radius: 0.8rem; box-shadow: var(--cien);
  }
  .uzytkownik__naglowek { margin: 0 0 0.3rem; padding: 0.5rem 0.7rem 0.6rem; border-bottom: 1px solid var(--kreska); }
  .uzytkownik__naglowek strong { display: block; font-size: 0.9333rem; }
  .uzytkownik__naglowek span { color: var(--tekst-2); font-size: 0.8rem; }
  .uzytkownik__link {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; border-radius: 0.6rem;
    color: var(--tekst); text-decoration: none; font-size: 0.9333rem;
  }
  .uzytkownik__link:hover { background: var(--karta-2); }
  .uzytkownik .wyjscie { display: block; max-width: none; margin: 0; padding: 0; }
  .uzytkownik .wyjscie .przycisk {
    width: 100%; justify-content: flex-start; gap: 0.6rem; min-height: 2.4rem; padding: 0.55rem 0.7rem;
    border: 0; border-radius: 0.6rem; background: transparent; color: var(--tekst); font-weight: 400; font-size: 0.9333rem;
  }
  .uzytkownik .wyjscie .przycisk:hover { background: var(--pilne-tlo); color: var(--pilne); }

  /* Granatowe menu z lewej: CTA, grupy, blok „Codziennie”, liczniki; bez pogrubień (wszystkie pozycje równe). */
  .bok { background: linear-gradient(180deg, var(--bok-1), var(--bok-2)); border-right: 1px solid var(--bok-kreska); min-height: calc(100vh - 4rem); }
  .bok__srodek {
    position: sticky; top: 4rem; max-height: calc(100vh - 4rem); overflow-y: auto;
    display: flex; flex-direction: column; gap: 0.2rem; padding: 0.8rem 0.933rem 1rem;
  }
  .bok__srodek > * { flex: 0 0 auto; }
  .bok :focus-visible, .bok__cta:focus-visible { outline-color: var(--turkus); }
  .bok__cta {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.933rem; margin: 0.2rem 0 0.8rem;
    padding: 0.6rem 0.9rem; border-radius: 0.8rem; color: var(--na-turkusie);
    background: linear-gradient(135deg, #2dd4bf, #14b8a6); font-weight: 700; font-size: 0.9333rem; text-decoration: none;
    box-shadow: 0 6px 18px rgba(45, 212, 191, 0.22);
  }
  .bok__cta:hover { filter: brightness(1.05); }
  .bok__cta[aria-current="page"] { box-shadow: 0 0 0 2px #ffffff, 0 6px 18px rgba(45, 212, 191, 0.22); }
  .bok__cta .ikona { width: 1.2rem; height: 1.2rem; }
  .bok__grupa {
    margin: 0.7rem 0 0.3rem; padding: 0 0.867rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--bok-etykieta);
  }
  .bok__link {
    display: flex; align-items: center; gap: 0.733rem; padding: 0.733rem 0.867rem; border-radius: 0.733rem;
    border: 1px solid transparent; color: var(--bok-tekst); font-weight: 500; font-size: 0.9333rem; text-decoration: none;
  }
  .bok__link:hover { background: rgba(255, 255, 255, 0.06); color: #ffffff; }
  .bok__link .ikona { width: 1.2rem; height: 1.2rem; opacity: 0.9; }
  .bok__link[aria-current="page"] {
    background: linear-gradient(90deg, rgba(45, 212, 191, 0.28), rgba(37, 99, 235, 0.14));
    color: #ffffff; border-color: rgba(255, 255, 255, 0.1);
  }
  .bok__link[aria-current="page"] .ikona { color: var(--turkus); opacity: 1; }
  .bok__napis { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
  .bok__licznik {
    margin-left: auto; min-width: 1.467rem; padding: 0.1rem 0.5rem; border-radius: 999px; text-align: center;
    background: rgba(45, 212, 191, 0.22); color: var(--turkus-tekst); font-size: 0.7333rem; font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .bok__blok {
    margin: 0.1rem 0 0.5rem; border: 1px solid rgba(45, 212, 191, 0.45); border-left: 3px solid var(--turkus);
    border-radius: 0.8rem; background: rgba(45, 212, 191, 0.13); overflow: hidden; box-shadow: 0 2px 16px rgba(45, 212, 191, 0.16);
  }
  .bok__blok .bok__link { border-radius: 0; border: 0; color: #e8f6f2; }
  .bok__blok .bok__link + .bok__link { border-top: 1px solid rgba(45, 212, 191, 0.22); }
  .bok__blok .bok__link:hover { background: rgba(255, 255, 255, 0.1); }
  .bok__blok .bok__link[aria-current="page"] {
    background: linear-gradient(90deg, rgba(45, 212, 191, 0.38), rgba(37, 99, 235, 0.16)); box-shadow: inset 3px 0 0 var(--turkus);
  }
  .bok__blok .bok__link .ikona { color: var(--turkus); opacity: 1; }
  .bok__stopka { margin: auto 0 0; padding: 1rem 0.867rem 0; color: var(--bok-etykieta); font-size: 0.7333rem; overflow-wrap: anywhere; }

  /* Treść: nagłówek strony, karty, kafle, zakładki-filtry, tabele, plakietki. */
  .biuro .tresc { max-width: none; margin: 0; padding: 1.6rem 2rem 2.5rem; min-width: 0; }
  .biuro .stopka { max-width: none; margin: 0; padding: 0.8rem 2rem 1.5rem; text-align: left; font-size: 0.8rem; }
  .biuro h1, .biuro .pytanie { font-size: 1.4667rem; font-weight: 700; letter-spacing: 0.005em; margin-bottom: 0.25rem; }
  .biuro h2 { font-size: 1.0667rem; }
  .biuro .adres { font-size: 0.9333rem; margin-bottom: 0.6rem; }
  .biuro .podpis, .biuro .podpowiedz, .biuro .legenda, .biuro .dopisek, .biuro .pozycja__kiedy, .biuro .krok,
  .biuro .pasek-kroku, .biuro .blad-pola, .biuro .ostrzezenie, .biuro .kartka__etykieta { font-size: 0.8667rem; }
  .biuro .powitanie { font-size: 1.2rem; }
  .biuro .naglowek-strony { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
  .biuro .naglowek-strony > * { min-width: 0; }
  .biuro .naglowek-strony .podpis { margin: 0; }
  .biuro .naglowek-strony__akcje { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-left: auto; }

  .biuro .karta, .biuro .sekcja { border-radius: var(--promien-karty); border-color: var(--kreska-2); box-shadow: var(--cien); }
  .biuro .karta { padding: 1.2rem; background: linear-gradient(180deg, var(--karta), var(--karta-dol)); }
  .biuro .karta--glowna { border-top-color: var(--akcent); }
  .biuro .karta--uwaga { background: var(--uwaga-tlo); border-color: var(--uwaga); }
  .biuro .karta--ok { background: var(--ok-tlo); border-color: var(--ok); }
  .biuro .karta__tytul, .biuro .karta__pytanie { font-size: 1.0667rem; font-weight: 700; margin-bottom: 0.6rem; }
  .biuro .karta__podtytul { font-size: 0.9333rem; }

  .kafle { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 0.9rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
  .kafel {
    display: flex; align-items: center; gap: 0.8rem; min-height: 4.8rem; padding: 0.8rem 1rem; background: var(--karta);
    border: 1px solid var(--kreska-2); border-radius: 0.933rem; box-shadow: var(--cien); color: var(--tekst); text-decoration: none;
  }
  .kafel:hover { border-color: var(--marka); }
  .kafel[aria-current="page"] { border-color: var(--marka); box-shadow: 0 0 0 1px var(--marka), var(--cien); }
  .kafel__ikona { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; flex: 0 0 auto; border-radius: 0.8rem; background: var(--karta-2); color: var(--tekst-2); }
  .kafel__ikona .ikona { width: 1.333rem; height: 1.333rem; }
  .kafel--marka .kafel__ikona { background: color-mix(in srgb, var(--marka) 14%, var(--karta)); color: var(--marka); }
  .kafel--ok .kafel__ikona { background: var(--ok-tlo); color: var(--ok); }
  .kafel--uwaga .kafel__ikona { background: var(--uwaga-tlo); color: var(--uwaga); }
  .kafel--pilne .kafel__ikona { background: var(--pilne-tlo); color: var(--pilne); }
  .kafel__tekst { display: flex; flex-direction: column; min-width: 0; }
  .kafel__liczba { font-size: 1.733rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .kafel__podpis { color: var(--tekst-2); font-size: 0.8667rem; }

  .biuro .pasek-narzedzi {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.6rem 1.2rem;
    margin-bottom: 1rem; border-bottom: 1px solid var(--kreska-2);
  }
  .biuro .pasek-narzedzi .filtry { margin: 0; border-bottom: 0; flex: 1 1 auto; }
  .biuro .pasek-narzedzi .pasek-szukania { flex: 0 1 26rem; margin: 0 0 0.5rem; gap: 0.2rem; }
  .biuro .pasek-szukania .pole { min-width: 0; }
  .biuro .filtry { gap: 0.2rem; margin: 0 0 1rem; border-bottom: 1px solid var(--kreska-2); }
  .biuro .filtr {
    min-height: 2.667rem; padding: 0.4rem 0.8rem; margin-bottom: -1px; gap: 0.4rem;
    border: 0; border-bottom: 2px solid transparent; border-radius: 0.6rem 0.6rem 0 0; background: transparent;
    color: var(--tekst-2); font-size: 0.9333rem; font-weight: 600;
  }
  .biuro .filtr:hover { color: var(--tekst); background: var(--karta-2); }
  .biuro .filtr[aria-current="page"] { color: var(--marka); border-bottom-color: var(--marka); box-shadow: none; }
  .biuro .filtr__licznik { min-width: 1.467rem; margin-left: 0; background: var(--karta-2); color: var(--tekst-2); font-size: 0.7333rem; font-weight: 700; line-height: 1.4; }
  .biuro .filtr[aria-current="page"] .filtr__licznik { background: var(--marka); color: var(--na-marce); }

  .biuro .przewijanie { margin-bottom: 1rem; border: 1px solid var(--kreska-2); border-radius: var(--promien-karty); background: var(--karta); box-shadow: var(--cien); }
  .biuro .przewijanie .tablica { margin-bottom: 0; }
  .biuro .tablica { font-size: 0.9333rem; background: transparent; }
  .biuro .tablica th {
    padding: 0.733rem 0.933rem; background: var(--th-bg); color: var(--th-txt); font-size: 0.8rem; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase; border-bottom: 1px solid var(--kreska-2); white-space: nowrap;
  }
  .biuro .tablica td { padding: 0.667rem 0.933rem; border-bottom: 1px solid var(--kreska); vertical-align: middle; }
  .biuro .tablica tbody tr:last-child td { border-bottom: 0; }
  .biuro .tablica tbody tr:hover td { background: var(--karta-2); }
  .biuro .tablica tfoot th, .biuro .tablica tfoot td { background: var(--karta-2); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 0.9333rem; border-top: 1px solid var(--kreska-2); white-space: normal; }
  .biuro .tablica .pole { min-width: 7rem; max-width: none; }
  .biuro .tablica .pole--krotkie { min-width: 5.5rem; max-width: 7rem; }
  .biuro .tablica select.pole { min-width: 9.5rem; }
  .biuro .tablica td:has(> .pole:not(.pole--krotkie):not(select)) { min-width: 14rem; }
  .biuro .tablica td:has(> .pole) { vertical-align: top; }
  .biuro .kropki { font-size: 0.8667rem; letter-spacing: 0.08em; }
  .biuro .litera { min-width: 1.733rem; height: 1.733rem; padding: 0 0.5rem; gap: 0.35rem; border-radius: 999px; border-width: 1px; font-size: 0.8rem; white-space: nowrap; }
  .biuro .litera__slowo { font-weight: 600; }

  /* Przyciski 40 px: domyślny (miękkie tło), główny (gradient), cichy (obrys), mały, ostrożny. */
  .biuro .przycisk {
    display: inline-flex; width: auto; min-height: 2.667rem; padding: 0.467rem 1.067rem; font-size: 0.9333rem; font-weight: 600;
    line-height: 1.3; border: 1px solid var(--kreska-2); border-radius: var(--promien-przycisku); background: var(--karta-2); color: var(--tekst);
  }
  .biuro .przycisk:hover { background: var(--karta); border-color: var(--marka); }
  .biuro .przycisk--glowny, .biuro .przycisk--glowny:hover {
    color: var(--na-marce); background: linear-gradient(135deg, var(--marka), var(--niebieski)); border-color: transparent; text-decoration: none;
  }
  .biuro .przycisk--glowny:hover { filter: brightness(1.06); }
  .biuro .przycisk--cichy { background: transparent; border-color: var(--kreska); color: var(--tekst-2); font-weight: 600; }
  .biuro .przycisk--cichy:hover { color: var(--tekst); border-color: var(--tekst-2); background: var(--karta-2); }
  .biuro .przycisk--maly { min-height: 2.133rem; padding: 0.3rem 0.733rem; font-size: 0.8667rem; border-radius: 0.6rem; }
  .biuro .przycisk--ostroznie { background: var(--pilne-tlo); color: var(--pilne); border-color: color-mix(in srgb, var(--pilne) 35%, var(--karta)); }
  .biuro .przycisk--ostroznie:hover { background: var(--pilne-tlo); border-color: var(--pilne); }
  .biuro .przycisk--licznik { width: 2.667rem; min-width: 2.667rem; padding: 0; font-size: 1.2rem; }
  .biuro .przycisk[disabled] { opacity: 0.7; }
  .biuro .formularz > .przycisk, .biuro .formularz > form > .przycisk, .biuro .zestaw > .przycisk { justify-self: start; }
  .biuro .odpowiedzi, .biuro .przyciski { display: flex; flex-wrap: wrap; gap: 0.6rem; }
  .biuro .odpowiedzi > form, .biuro .przyciski > form, .biuro .przycisk-forma { width: auto; }
  .biuro .przyciski--dwa { display: flex; flex-wrap: wrap; gap: 0.6rem; }
  .biuro .odpowiedzi--kafle { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 0.8rem; }
  .biuro .odpowiedzi--kafle .przycisk {
    width: 100%; justify-content: flex-start; gap: 0.7rem; min-height: 3.6rem; padding: 0.7rem 1rem;
    background: var(--karta); border-color: var(--kreska-2); border-radius: 0.933rem; box-shadow: var(--cien); font-size: 0.9667rem;
  }
  .biuro .odpowiedzi--kafle .przycisk .ikona { width: 1.333rem; height: 1.333rem; color: var(--marka); }
  .biuro .link-dalej, .biuro .link-wstecz { min-height: 2.4rem; font-size: 0.9333rem; }
  /* WCAG 2.5.8 (cel co najmniej 24 px): samotne linki w akapitach, komórkach i pozycjach list przy literach 15 px. */
  .biuro .tresc :is(p, td, li, dd, dt, h2, h3) > a:not(.przycisk):not(.link-dalej):not(.link-wstecz):not(.kafel),
  .biuro .stopka a { display: inline-block; min-height: 1.6rem; line-height: 1.6rem; }

  /* Pola i listy ok. 40 px, etykiety mniejsze, radio-karty zwarte, formularze w karcie. */
  .biuro .etykieta { font-size: 0.8667rem; font-weight: 600; color: var(--tekst-2); margin-bottom: 0.3rem; }
  .biuro .pole {
    min-height: 2.667rem; max-width: 36rem; padding: 0.467rem 0.867rem; font-size: 0.9333rem;
    border: 1px solid var(--kreska); border-radius: var(--promien-przycisku); background: var(--pole-tlo);
  }
  .biuro .pole:focus { border-color: var(--marka); background: var(--karta); box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.15); }
  .biuro .pole[aria-invalid="true"] { border-width: 2px; }
  .biuro .pole--kwota, .biuro .pole--kod { font-size: 1.2rem; }
  .biuro .pole--krotkie { max-width: 9rem; }
  .biuro .pole-telefonu__kierunkowy { font-size: 0.9333rem; border-width: 1px; border-radius: var(--promien-przycisku); }
  .biuro .wybor { min-height: 2.4rem; padding: 0.3rem 0; font-size: 0.9333rem; }
  .biuro .wybor__pole { width: 1.2rem; height: 1.2rem; }
  .biuro .formularz { max-width: 46rem; gap: 0.6rem; }
  .biuro .formularz:has(.przewijanie) { max-width: none; }   /* pismo zarządcy: tabela pozycji na całej szerokości */
  .biuro .pasek-szukania { max-width: 46rem; }
  .biuro .zestaw { gap: 0.6rem; }
  .biuro .zestaw__tytul { font-size: 1rem; }
  .biuro .opcje { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: stretch; margin-bottom: 0.9rem; }
  .biuro .opcje > legend, .biuro .opcje > .opcje__tytul { float: left; width: 100%; margin: 0 0 0.2rem; padding: 0; font-size: 0.8667rem; color: var(--tekst-2); }
  .biuro .opcje > .podpis, .biuro .opcje > .dopisek, .biuro .opcje > .blad-pola, .biuro .opcje > .pod-opcja, .biuro .opcje > .pole-daty { flex: 1 1 100%; }
  .biuro .opcje > .podpis--opcji { margin: -0.1rem 0 0.2rem; }
  .biuro .opcja {
    min-height: 2.667rem; max-width: 100%; padding: 0.4rem 0.867rem 0.4rem 0.667rem; gap: 0.5rem; font-size: 0.9333rem; font-weight: 600;
    border: 1px solid var(--kreska); border-radius: var(--promien-przycisku); background: var(--karta);
  }
  .biuro .opcja:hover { border-color: var(--marka); }
  .biuro .opcja::before { width: 1rem; height: 1rem; border-width: 2px; }
  .biuro .opcja__pole:checked + .opcja { background: color-mix(in srgb, var(--marka) 12%, var(--karta)); border-color: var(--marka); box-shadow: inset 0 0 0 1px var(--marka); }
  .biuro .opcja__pole:checked + .opcja::before { border-width: 0.3rem; }
  .biuro .pod-opcja { padding-left: 0.9rem; }
  .biuro .licznik__wartosc { font-size: 1rem; flex: 0 1 auto; min-width: 12rem; }

  /* Kreator: formularz w karcie, pola w dwóch kolumnach, pasek kroków, przyciski w stopce karty. */
  .kroki { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
  .kroki__lista { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
  .kroki__krok {
    position: relative; display: grid; place-items: center; width: 1.867rem; height: 1.867rem; border-radius: 50%;
    font-size: 0.8rem; font-weight: 700; color: var(--tekst-2); background: var(--karta-2); border: 1px solid var(--kreska);
  }
  .kroki__krok + .kroki__krok { margin-left: 1.2rem; }
  .kroki__krok + .kroki__krok::before { content: ""; position: absolute; right: 100%; top: 50%; width: 1.2rem; height: 2px; margin-right: 1px; background: var(--kreska); }
  .kroki__krok--za { background: var(--ok-tlo); color: var(--ok); border-color: var(--ok); }
  .kroki__krok--za + .kroki__krok::before, .kroki__krok--za + .kroki__krok--za::before { background: var(--ok); }
  .kroki__krok--teraz { background: var(--marka); color: var(--na-marce); border-color: var(--marka); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marka) 22%, transparent); }
  .biuro .formularz.kreator {
    max-width: 64rem; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.6rem; row-gap: 0.7rem; align-items: start;
    padding: 1.2rem 1.4rem 0; background: var(--karta); border: 1px solid var(--kreska-2); border-radius: var(--promien-karty); box-shadow: var(--cien);
  }
  .biuro .kreator > :not(.pole-kreatora), .biuro .kreator .zestaw > :not(.pole-kreatora) { grid-column: 1 / -1; }
  .biuro .kreator .zestaw { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.6rem; row-gap: 0.7rem; margin: 0.4rem 0 0.6rem; padding-top: 0.9rem; border-top: 1px solid var(--kreska); }
  .biuro .kreator .zestaw > legend, .biuro .kreator .zestaw > .zestaw__tytul { float: left; width: 100%; margin: 0 0 0.3rem; padding: 0.9rem 0 0; }
  .biuro .kreator .zestaw > legend + * { clear: both; }
  .biuro .kreator .pole { max-width: none; }
  .biuro .kreator .pole--krotkie { max-width: 10rem; }
  .biuro .kreator .przyciski--kreator {
    margin: 0.6rem -1.4rem 0; padding: 0.9rem 1.4rem; border-top: 1px solid var(--kreska); background: var(--karta-2);
    border-radius: 0 0 var(--promien-karty) var(--promien-karty); align-items: center;
  }
  .biuro .przyciski--kreator .przycisk--cichy { margin-left: auto; }
  .biuro .kreator .karta { box-shadow: none; }

  /* Protokoły: grupy pól w sekcjach zwijanych (liczniki, klucze, pozycje stanu) jako karty z etykietą obok pola. */
  .biuro details.sekcja > .zestaw {
    display: grid; grid-template-columns: minmax(8rem, 16rem) minmax(0, 1fr); gap: 0.4rem 1rem; align-items: center;
    margin: 0.6rem 0; padding: 0.8rem 1rem; border: 1px solid var(--kreska-2); border-radius: 0.8rem; background: var(--karta-2);
  }
  .biuro details.sekcja > .zestaw > :not(.etykieta):not(.pole) { grid-column: 1 / -1; }
  .biuro details.sekcja > .zestaw > legend { float: left; width: 100%; margin: 0 0 0.3rem; padding: 0; }
  .biuro details.sekcja > .zestaw > .etykieta { margin: 0; }
  .biuro details.sekcja > .zestaw > .pole { background: var(--karta); }
  .biuro .lista--zdjecia { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: 1rem; }
  .biuro .lista--zdjecia .przycisk { min-height: 2.133rem; padding: 0.3rem 0.733rem; font-size: 0.8667rem; }
  .biuro .plakietka { font-size: 0.8rem; }

  /* Cykl życia najmu: poziomy pasek kroków „Postępu najmu”, rozwijane „Szczegóły” w historii, formularze
     czynności (wpłata w imieniu wynajmującego, pełnomocnictwo) w dwóch kolumnach jak kreator. */
  .biuro .postep { display: flex; align-items: flex-start; margin: 0.4rem 0 0.8rem; }
  .biuro .postep__krok {
    position: relative; flex: 1 1 0; flex-direction: column; align-items: center; gap: 0.4rem;
    padding: 0 0.3rem; text-align: center; font-size: 0.8667rem; overflow-wrap: anywhere;
  }
  .biuro .postep__krok::before { position: relative; z-index: 1; width: 1.867rem; height: 1.867rem; }
  .biuro .postep__krok + .postep__krok::after { content: ""; position: absolute; top: 0.933rem; right: 50%; width: 100%; height: 2px; background: var(--kreska); }
  .biuro .postep__krok--gotowe + .postep__krok::after { background: var(--ok); }
  .biuro .lista__pozycja > .odloz { display: block; margin-top: 0.3rem; }
  .biuro .lista__pozycja > .odloz > summary.przycisk { display: inline-flex; min-height: 2.133rem; padding: 0.25rem 0.7rem; font-size: 0.8667rem; }
  .biuro .lista__pozycja > .odloz[open] > .lista { margin: 0.4rem 0 0.2rem 0.4rem; padding-left: 0.8rem; border-left: 2px solid var(--kreska); font-size: 0.8667rem; color: var(--tekst-2); }
  .biuro .lista__pozycja > .odloz[open] > .lista > .lista__pozycja { padding: 0.25rem 0; border-bottom: 0; }
  .biuro textarea.pole { min-height: 6rem; max-width: 46rem; }
  .biuro .formularz:has(> .pole-kreatora) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.6rem; align-items: start; }
  .biuro .formularz:has(> .pole-kreatora) > :not(.pole-kreatora) { grid-column: 1 / -1; }
  .biuro .formularz:has(> .pole-kreatora) .pole { max-width: none; }

  /* Komunikaty, listy, liczby, stany. */
  .biuro .komunikat { border-left-width: 4px; border-radius: 0.8rem; padding: 0.6rem 0.9rem; font-size: 0.9333rem; box-shadow: var(--cien); }
  .biuro .bledy { border-width: 1px; border-left-width: 4px; border-radius: 0.8rem; padding: 0.6rem 0.9rem; font-size: 0.9333rem; }
  .biuro .powod { display: inline-block; padding: 0.4rem 0.7rem; border-radius: 0.6rem; font-size: 0.9333rem; }
  .biuro .kod-podgladu__kod { font-size: 1.2rem; }
  .biuro .kwota--duza, .biuro .kwota-glowna .kwota { font-size: 1.4667rem; }
  .biuro .lista__pozycja { padding: 0.5rem 0; }
  .biuro .liczby { gap: 0.6rem; }
  .biuro .liczby__pozycja { background: var(--karta-2); border-radius: 0.8rem; padding: 0.6rem 0.8rem; }
  .biuro .liczby dt { font-size: 0.8rem; }
  .biuro .liczby dd { font-size: 1.2rem; }
  .biuro .os__data { min-width: 5rem; }
  .biuro .kartka { padding: 0.9rem; }

  /* Karta najmu: nagłówek z kodem, stanem, adresem i opiekunem, pod nim pasek czynności, sekcje w siatce 12 kolumn
     (lewa 7: Teraz, Pieniądze, Kaucja, Warunki; prawa 5: Strony, Oś czasu, Dokumenty, Klauzule; Historia pod spodem). */
  .biuro .karta-strona { display: flex; flex-direction: column; }
  .biuro .karta-strona > .komunikat, .biuro .karta-strona > .bledy { order: -3; margin-bottom: 1rem; }
  .biuro .karta-strona > .karta-naglowek { order: -2; }
  .biuro .karta-strona > .czynnosci { order: -1; margin: 0 0 1.2rem; }
  .biuro .karta-naglowek {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1.2rem; margin-bottom: 1rem; padding: 1rem 1.2rem;
    background: var(--karta); border: 1px solid var(--kreska-2); border-radius: var(--promien-karty); box-shadow: var(--cien);
  }
  .biuro .karta-naglowek .pytanie { flex: 1 1 100%; margin-bottom: 0.1rem; }
  .biuro .karta-naglowek .pytanie .litera { align-self: center; }
  .biuro .karta-naglowek .adres { margin-bottom: 0; font-size: 1rem; font-weight: 600; color: var(--tekst); }
  .biuro .karta-naglowek .podpis { margin: 0; }
  .biuro .karta-naglowek .powod { flex: 1 1 100%; margin: 0.4rem 0 0; }
  .biuro .czynnosci {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; padding: 0.7rem 1rem;
    background: var(--karta-2); border: 1px solid var(--kreska-2); border-radius: 0.933rem;
  }
  .biuro .czynnosci .sekcja__podtytul { margin: 0; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tekst-2); }
  .biuro .czynnosci .przyciski { margin: 0; gap: 0.5rem; }
  .biuro .sekcje { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; align-items: start; }
  .biuro .sekcje__lewa, .biuro .sekcje__prawa { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-content: start; min-width: 0; }
  .biuro .sekcje__lewa { grid-column: span 7; }
  .biuro .sekcje__prawa { grid-column: span 5; }
  .biuro .sekcje__szeroko { display: block; grid-column: 1 / -1; min-width: 0; }
  .biuro .sekcje > :not(.sekcje__lewa):not(.sekcje__prawa) { grid-column: 1 / -1; }   /* nowe sekcje bez opakowania: cała szerokość */
  .biuro .sekcja { padding: 0 1.2rem; background: var(--karta); min-width: 0; }
  .biuro .sekcja .przewijanie { min-width: 0; }
  .biuro .sekcja[open] { padding-bottom: 1.1rem; }
  .biuro .sekcja__tytul { min-height: 3.2rem; font-size: 1rem; font-weight: 700; list-style: none; }
  .biuro .sekcja__tytul::-webkit-details-marker { display: none; }
  .biuro .sekcja__tytul::after {
    content: ""; margin-left: auto; width: 0.55rem; height: 0.55rem; flex: 0 0 auto;
    border-right: 2px solid var(--tekst-2); border-bottom: 2px solid var(--tekst-2); transform: rotate(45deg); transition: transform 0.15s;
  }
  .biuro .sekcja[open] > .sekcja__tytul::after { transform: rotate(-135deg); }
  .biuro .sekcja__podtytul { margin-top: 0.8rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tekst-2); }

  /* Kolejka decyzji: pozycje jako karty w siatce, rodzaj jako nagłówek, termin jako plakietka, przyciski w stopce. */
  .biuro .kolejka { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 28rem), 1fr)); gap: 1rem; align-items: stretch; }
  .biuro .pozycja { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; }
  .biuro .pozycja__rodzaj { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tekst-2); margin-bottom: 0; }
  .biuro .pozycja__co { font-size: 0.9667rem; margin-bottom: 0.2rem; }
  .biuro .pozycja__kiedy { display: inline-block; align-self: flex-start; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--karta-2); color: var(--tekst-2); margin: 0; }
  .biuro .pozycja--na-dzis { border-left: 4px solid var(--marka); }
  .biuro .pozycja--na-dzis .pozycja__kiedy { background: var(--uwaga-tlo); color: var(--uwaga); }
  .biuro .pozycja .przyciski { margin: auto 0 0; padding-top: 0.7rem; border-top: 1px solid var(--kreska); gap: 0.5rem; }
  .biuro .odloz { display: inline-block; }
  .biuro .odloz__opcje { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .biuro .pasek--podglad { font-size: 0.8667rem; }
}

/* === Windows: wysoki kontrast (forced colors). Stany, które niosły tylko tło albo box-shadow, dostają obramowania
   i kolory systemowe, żeby zaznaczenie w menu, filtrach, tabeli i opcjach było widoczne. ====================== */

@media (forced-colors: active) {
  .zakladki__link[aria-current="page"], .menu__link[aria-current="page"], .bok__link[aria-current="page"],
  .kafel[aria-current="page"], .bok__cta[aria-current="page"] { outline: 3px solid Highlight; outline-offset: -3px; }
  .filtr[aria-current="page"] { border: 2px solid Highlight; text-decoration: underline; }
  .opcja__pole:checked + .opcja { border: 3px solid Highlight; }
  .opcja__pole:checked + .opcja::before { background: Highlight; border-color: Highlight; }
  .narzedzie[aria-pressed="true"] { border: 3px solid Highlight; }
  .tablica__wiersz--c td:first-child, .tablica__wiersz--b td:first-child, .tablica__wiersz--z td:first-child { border-left: 4px solid CanvasText; }
  .tablica th { border-bottom: 2px solid CanvasText; }
  .przycisk, .bok__cta, .kafel, .uzytkownik__przycisk, .szukanie__pole, .szukanie__przycisk, .narzedzie { border: 2px solid ButtonText; }
  .przycisk--glowny, .bok__cta { border-width: 3px; }
  .kroki__krok { border: 2px solid CanvasText; }
  .kroki__krok--teraz { outline: 3px solid Highlight; outline-offset: 2px; }
  .postep__krok::before { border: 2px solid CanvasText; }
  .postep__krok--gotowe::before, .postep__krok--biezacy::before { outline: 3px solid Highlight; outline-offset: 1px; }
  .plakietka, .tablica .roznica td:first-child { border: 1px solid CanvasText; }
  .tablica .roznica td:first-child { border-left-width: 4px; }
  .kroki__krok--za { border-color: Highlight; }
  .litera, .bok__licznik, .filtr__licznik, .pozycja__kiedy, .kafel__ikona, .liczby__pozycja { border: 1px solid CanvasText; }
  .bok__blok { border: 2px solid CanvasText; }
  .bok { border-right: 2px solid CanvasText; }
  .karta, .sekcja, .komunikat, .bledy, .uzytkownik__menu, .czynnosci, .karta-naglowek { border: 1px solid CanvasText; }
  .sekcja__tytul::after { border-color: CanvasText; }
  .gora { border-bottom: 2px solid CanvasText; }
}

@media print {
  .bok, .kafle, .szukanie, .uzytkownik, .kroki__lista { display: none !important; }
  .biuro { display: block; }
}

/* === P-E (28.10.2026): aplikacja na telefonie =================================================================
   W aplikacji dodanej do ekranu telefonu (display-mode: standalone, bez paska przeglądarki) dolny pasek zakładek
   klienta (nav.zakladki) i menu opiekuna (nav.menu) przykleja się do dołu ekranu z marginesem bezpiecznym telefonu
   (env(safe-area-inset-bottom)). Fokus nie chowa się pod paskiem dzięki scroll-padding-bottom (WCAG 2.4.11), a przy
   literach 200 % i na niskich ekranach pasek wraca na koniec strony. W zwykłej karcie przeglądarki pasek zostaje
   na końcu strony jak dotąd: tam dół ekranu zajmuje pasek przeglądarki, a przyklejony pasek zasłaniałby przyciski
   pod sobą (axe target-size, WCAG 2.5.8). W trybie aplikacji pasek u góry odsuwa się od wcięcia ekranu
   (safe-area-inset-top). Do tego strony prawne (/regulamin, /prywatnosc, /cennik). ============================= */
@media (display-mode: standalone) and (max-width: 899.98px) and (min-height: 601px) {
  html:not([data-aa="200"]) { scroll-padding-bottom: calc(var(--dotyk) + 1.5rem); }
  html:not([data-aa="200"]) .zakladki, html:not([data-aa="200"]) .uklad > .menu {
    position: sticky; bottom: 0; z-index: 20;
    padding-bottom: calc(0.25rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -1px 0 var(--kreska);
  }
}
@media (display-mode: standalone) {
  .gora { padding-top: calc(0.5rem + env(safe-area-inset-top, 0px)); }
}
/* Długie słowa regulaminu łamią się przy literach 200 % na 360 px (tabele dalej przewija .przewijanie). */
.prawne { overflow-wrap: break-word; hyphens: auto; }
.prawne .tablica { hyphens: manual; }
.prawne__tresc h3 { font-size: 1rem; font-weight: 600; margin: 1.25rem 0 0.5rem; }
.prawne__tresc h4 { font-size: 1rem; font-weight: 600; margin: 1rem 0 0.5rem; }
.prawne__tresc ul { padding-left: 1.25rem; }
.prawne__tresc .lista { margin: 0 0 0.75rem; }
.prawne__tresc li { margin-bottom: 0.5rem; }
.prawne__tresc li.pkt { list-style: none; padding-left: 2em; }   /* numer wisi z lewej, tekst może mieć <strong> */
.prawne__tresc li.pkt > .nr { display: inline-block; min-width: 2em; margin-left: -2em; }
.prawne__tresc .tablica th, .prawne__tresc .tablica td { vertical-align: top; }
.prawne__tresc hr { border: 0; border-top: 1px solid var(--kreska); margin: 1.25rem 0; }

/* ===== INTEGRACJA fali 1 (28.10.2026): style wpięć między paczkami, kolory wyłącznie z tokenów =====================
   Wiersz bieżącego miesiąca w należnościach karty najmu (P-J, tr.tablica__wiersz--dzis z aria-current="date"),
   bieżący miesiąc w siatce „Mój najem” (P-D, .miesiac-kropka[aria-current="date"]), licznik nowych wiadomości
   w zakładce „Wiadomości” (P-A) i łamanie długich odnośników „dalej” przy literach 200 % na 360 px. */
.tablica__wiersz--dzis td { background: var(--tlo); }
.tablica__wiersz--dzis td:first-child { box-shadow: inset 4px 0 0 var(--marka); }
.miesiac-kropka[aria-current="date"] { border-color: var(--marka); box-shadow: inset 0 0 0 2px var(--marka); }
.link-dalej, .link-wstecz { overflow-wrap: anywhere; }
.zakladki__licznik { margin-left: 0.375rem; }
/* Terminarz windykacji (P-B) w kroku postępu: nazwa etapu, stan, „Szczegóły” i przycisk łamią się do nowego wiersza
   przy literach 200 % na 360 px zamiast wystawać w bok. */
.postep__krok { flex-wrap: wrap; }
.postep__krok > * { min-width: 0; overflow-wrap: anywhere; }