/* ══════════════════════════════════════════════════════════════════════════
   OPRAWA GRAFICZNA IMMOCASA — wspólna dla wszystkich stron wewnętrznych
   ─────────────────────────────────────────────────────────────────────────
   Ten arkusz dokłada się DO stylów, które każda strona ma u siebie w <style>.
   Dlatego <link> do niego musi stać ZA tamtym blokiem (tuż przed </head>) —
   przy równej sile selektora wygrywa to, co przeglądarka wczyta później.

   Zasada: ruszamy wyłącznie warstwę wizualną (kolor, tło, cień, krój pisma).
   Żadnych zmian układu — bez display, position, width, margin, padding.
   Dzięki temu można to wpiąć do dowolnej strony i nic się nie rozjedzie.

   Źródło: „ImmoCasa — Brandbook" (Dysk Google, MIKOŁAJ/LOGO/ImmoCasa), s. 8–12:
     kolory podstawowe  bordo #562D33 · terakota #BA6B32 · biel #FFFFFF
     kolory uzupełniające  krem #FFF9F4 · szary #EBEBEB
     typografia  Crimson Pro (podstawowa) · Verdana (uzupełniająca)
     akcenty     sygnet jako powtarzalny wzór i znak wodny
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Kolory z brandbooka. --amber był wcześniej złotem #C98A2D, którego
     w brandbooku nie ma — zastąpione terakotą marki. */
  --bordo: #562D33;
  --bordo-ciemny: #43222A;
  --bordo-jasny: #6E3B42;
  --amber: #BA6B32;
  --terakota: #BA6B32;
  --terakota-jasna: #D08749;
  --cream: #FFF9F4;
  --piasek: #F7EDE4;
  --line: rgba(86, 45, 51, .13);

  --cien-mala: 0 1px 2px rgba(86, 45, 51, .05);
  --cien-karta: 0 1px 2px rgba(86, 45, 51, .05), 0 12px 28px -18px rgba(86, 45, 51, .45);
  --cien-uniesiona: 0 2px 4px rgba(86, 45, 51, .06), 0 18px 36px -20px rgba(86, 45, 51, .55);
  --naglowek: 'Crimson Pro', Georgia, 'Times New Roman', serif;
}

/* ── TŁO ───────────────────────────────────────────────────────────────────
   Cztery warstwy: wzór z sygnetów (jak w brandbooku, s. 12), ciepła poświata
   Baza to ciepły piasek (a nie prawie-biały krem — ten był za nudny), na nim
   wzór z sygnetów i dwie poświaty: terakota z prawej góry, bordo z lewego dołu.
   Krycie wzoru jest wtopione w sam plik SVG, więc tło nie potrzebuje żadnej
   dodatkowej warstwy w HTML-u.

   Dalej tło rozchodzi się na DWA rodzaje stron:
     • ekrany wyśrodkowane (menu, wybór profilu) — wielki sygnet wychodzący
       poza prawy górny róg, jak na okładce brandbooka;
     • ekrany z paskiem nagłówka — terakotowy pas z rzędem kremowych sygnetów
       pod paskiem, zakończony falą (pas z „Przykładowego zastosowania", s. 12).
   Rozdziela je `body:has(header)`. Na ekranach wyśrodkowanych pasa być NIE MOŻE:
   treść stoi tam w pionie na środku, a przy niskim oknie nagłówek wchodziłby
   w terakotę i robił bordowy tekst na brązie. Przeglądarka bez :has() (starsze
   niż Safari 15.4 / Chrome 105) zobaczy samą bazę — czyli wersję bez pasa. */
html { background-color: #F5E7DA; }

body {
  background-color: #F5E7DA;
  background-image:
    url("/css/sygnet-tlo.svg"),
    url("/css/wzor-sygnet.svg"),
    radial-gradient(1000px 900px at 86% -4%, rgba(208, 135, 73, .34), transparent 60%),
    radial-gradient(1000px 700px at -10% 104%, rgba(86, 45, 51, .24), transparent 58%);
  background-repeat: no-repeat, repeat, no-repeat, no-repeat;
  /* Słońce skaluje się z szerokością okna (min(...vw)), inaczej na telefonie
     zamiast znaku w rogu widać środek znaku rozlany na cały ekran. */
  background-size: min(96vw, 940px) min(96vw, 940px), 164px 164px, auto, auto;
  background-position: right -22vw top -19vw, center top, right top, left bottom;
}

body:has(header) {
  background-image:
    url("/css/fala-piasek.svg"),
    url("/css/wzor-sygnet-krem.svg"),
    linear-gradient(180deg, #C4763B 0%, #BA6B32 55%, #B06430 100%),
    url("/css/wzor-sygnet.svg"),
    radial-gradient(1100px 700px at 50% 100%, rgba(86, 45, 51, .16), transparent 62%);
  background-repeat: no-repeat, repeat-x, no-repeat, repeat, no-repeat;
  /* Pas ma 150px, fala schodzi do 205px. Wyżej być nie może: na /kalendarzu
     pod paskiem stoi rząd podpisów dni (PN WT ŚR…) pisany wprost na tle —
     przy dłuższym pasie robił się bordowy tekst na terakocie. */
  background-size: 100% 205px, 164px 164px, 100% 150px, 164px 164px, auto;
  background-position: center top, center top, center top, center 205px, center bottom;
}

::selection { background: rgba(186, 107, 50, .22); }

/* ── TYPOGRAFIA ────────────────────────────────────────────────────────────
   Nagłówki dostają Crimson Pro (krój podstawowy marki). Tekst ciągły zostaje
   przy Georgii — w gęstych tabelach kosztów czyta się ją pewniej, a rysunek
   liter jest z tej samej rodziny szeryfowych, więc całość trzyma się kupy. */
h1, h2, h3, header h1, .tile h2, .choice h2 {
  font-family: var(--naglowek);
  letter-spacing: .005em;
}
h1 { font-weight: 600; }
h2, h3 { font-weight: 600; }

/* ── PASEK NAGŁÓWKA ────────────────────────────────────────────────────────
   Płaski bordo zamieniony na gradient ze znakiem wodnym sygnetu w prawym
   rogu i włoskową złotą linią pod spodem (odpowiednik paska akcentu
   z materiałów drukowanych). */
header {
  background-color: var(--bordo);
  background-image:
    url("/css/sygnet-krem.svg"),
    linear-gradient(118deg, var(--bordo-ciemny) 0%, var(--bordo) 46%, var(--bordo-jasny) 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: 132px 132px, auto;
  background-position: right -26px top -34px, center;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 10px 26px -18px rgba(67, 34, 42, .9);
  position: relative;
}
header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--terakota) 0%, #C9943A 38%, rgba(186, 107, 50, .15) 88%, transparent 100%);
  pointer-events: none;
}
header h1 { color: #fff; }

/* ── KARTY I KAFELKI ───────────────────────────────────────────────────────
   Nazwy klas są różne na różnych stronach (.sect na kosztach, .tile w menu
   Polska, .card na parte…), dlatego wszystkie wymienione są tutaj razem. */
.sect, .card, .pods, .tile, .choice, .ch-head, .fieldcard, .evrow, .kafel, .fir, .kgr {
  background-image: linear-gradient(180deg, #FFFFFF 0%, #FFFDFA 100%);
  border-color: var(--line);
  box-shadow: var(--cien-karta);
}

/* Pozycje na liście są małe i jest ich dużo — dostają sam włoskowy cień,
   bo pełny cień karty przy kilkudziesięciu wierszach robi z ekranu kaszę.
   Wierszy wewnątrz grup (.kgr .w) świadomie nie ruszamy: mają własne
   kolory stanu (zaległy), a gradient w każdym z osobna dałby prążki. */
.poz { box-shadow: var(--cien-mala); }
.fir { transition: transform .14s ease, box-shadow .14s ease, border-color .12s; }
.fir:hover { box-shadow: var(--cien-uniesiona); transform: translateY(-2px); }
.tile, .choice, .kafel {
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.tile:hover, .choice:hover, .kafel:hover {
  border-color: rgba(186, 107, 50, .55);
  box-shadow: var(--cien-uniesiona);
  transform: translateY(-2px);
}
.tile:active, .choice:active, .kafel:active { transform: translateY(0) scale(.985); }

/* ── KAFELKI MENU ──────────────────────────────────────────────────────────
   /start, /polska, /finestrat i /raporty to cztery ekrany zbudowane z tych
   samych kafelków, ale każdy ma je opisane u siebie. Wygląd trzymamy TUTAJ,
   raz — inaczej po każdej poprawce trzeba by obejść cztery pliki.

   Kolorowe emoji zostają (Mikołaj chciał je zachować), ale przefarbowane na
   ciepłą monochromię marki. Kłódki i strzałki poszły precz — po nich zostało
   samo słowo „PIN" kapitalikami przy wejściach na hasło.                     */
.tile {
  position: relative;
  border-left: 3px solid rgba(186, 107, 50, .45);
}
.tile.soon { border-left-color: rgba(86, 45, 51, .18); }

/* Ikona w kaflu: zostaje emoji, ale przefarbowane na ciepłą monochromię marki
   — zamiast ośmiu kolorowych obrazków robi się osiem znaków w jednym tonie.
   Bez ramki: filtr działa na CAŁY element, więc każde tło i obwódka też by się
   ubrudziły na brązowo. Filtr: kolor w dół (grayscale), potem sepia i obrót
   odcienia w stronę terakoty. */
.tile .ico, .kafel .ico, .fir .ico {
  display: block;
  margin-bottom: 12px;
  font-size: 1.55rem;
  line-height: 1;
  filter: grayscale(1) sepia(.9) saturate(2.8) hue-rotate(-20deg) brightness(.74) contrast(1.35);
  transition: filter .14s ease, transform .14s ease;
}
/* Kafelki firm na /koszty mają ikonę nad nazwą — ten sam ton, mniejszy odstęp. */
.fir .ico { margin-bottom: 2px; }
.fir:hover .ico { filter: grayscale(1) sepia(.9) saturate(3) hue-rotate(-20deg) brightness(.84) contrast(1.35); }
.tile:hover .ico { filter: grayscale(1) sepia(.9) saturate(3) hue-rotate(-20deg) brightness(.84) contrast(1.35); }
.tile.soon .ico { filter: grayscale(1) brightness(1.25) opacity(.55); }

.tile h2 { letter-spacing: .01em; }
.tile p { line-height: 1.5; }

/* Duże guziki wyboru na /start. */
.choice { border-left: 3px solid rgba(186, 107, 50, .45); }
.choice.internal, .choice.es { border-left-color: rgba(255, 255, 255, .35); }

/* Znaku „zamknięte na hasło" przy wejściach do profili NIE MA i mieć nie ma:
   te kafelki pokazują się dopiero po zalogowaniu, a wtedy każdy widzi wyłącznie
   to, do czego ma dostęp — więc kłódka informowałaby o czymś, co już się stało
   (decyzja Mikołaja 13.08.2026). */

/* Strzałka powrotu przypięta w rogu — ta sama biel i cień co karty. */
a.wroc {
  background-image: linear-gradient(180deg, #FFFFFF 0%, #FFFDFA 100%);
  border-color: var(--line);
  box-shadow: var(--cien-karta);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
a.wroc:hover {
  border-color: rgba(186, 107, 50, .55);
  box-shadow: var(--cien-uniesiona);
}

/* Podgląd dokumentu ma wyglądać jak kartka papieru — zostaje biały,
   dostaje tylko głębszy cień. */
.doc {
  background-image: none;
  box-shadow: 0 2px 6px rgba(86, 45, 51, .07), 0 24px 48px -28px rgba(86, 45, 51, .6);
}

/* ── PRZYCISKI ─────────────────────────────────────────────────────────── */
.btn.primary, button.primary {
  background-image: linear-gradient(180deg, var(--bordo-jasny) 0%, var(--bordo) 100%);
  border-color: var(--bordo);
  box-shadow: 0 1px 2px rgba(86, 45, 51, .25), 0 8px 18px -12px rgba(86, 45, 51, .9);
}
.btn.gold, button.gold {
  background-image: linear-gradient(180deg, var(--terakota-jasna) 0%, var(--terakota) 100%);
  border-color: var(--terakota);
  box-shadow: 0 1px 2px rgba(186, 107, 50, .25), 0 8px 18px -12px rgba(186, 107, 50, .9);
}
.btn.primary:active, button.primary:active,
.btn.gold:active, button.gold:active { box-shadow: var(--cien-mala); }

/* ── POLA FORMULARZY ───────────────────────────────────────────────────── */
input:focus, select:focus, textarea:focus {
  border-color: var(--terakota);
  box-shadow: 0 0 0 3px rgba(186, 107, 50, .14);
  outline: none;
}

/* ── LOGO ──────────────────────────────────────────────────────────────────
   Znak w PNG ma nieprzezroczyste kremowe tło, które na gradiencie rysowałoby
   kwadrat. Strony wewnętrzne dostają zamiast niego sygnet w SVG (patrz
   podmiana src w HTML), a tu dokładamy mu miękki cień i ciepłą poświatę. */
.logo {
  filter: drop-shadow(0 8px 18px rgba(186, 107, 50, .28));
}

/* Kafelki menu czekają, aż aplikacja się dowie, kim jest człowiek (9.09.2026).
   Klasę zdejmuje js/admin.js — natychmiast po odpowiedzi /api/wejscie albo
   po 2,5 s bezpiecznika. `visibility` zamiast `display`, żeby układ strony
   nie skakał w momencie odsłonięcia. */
html.kafelki-czekaja a.tile,
html.kafelki-czekaja a.choice { visibility: hidden; }
/* Kafelki „tylko dla" (13.09.2026): w HTML mają atrybut hidden i js/admin.js
   odsłania je wyłącznie osobie z prawem. Strony ustawiają `.tile{display:block}`,
   co bije domyślne [hidden] przeglądarki — stąd ta reguła. */
a.tile[hidden], a.choice[hidden] { display: none !important; }

/* Pasek podglądu „jak ekipa Finestrat" (9.09.2026) — js/admin.js */
#pasek-podgladu { position:fixed; left:0; right:0; bottom:0; z-index:9998; display:block; text-align:center;
  padding:9px 14px; background:#562D33; color:#fff; font:600 .8rem/1.3 -apple-system,sans-serif;
  text-decoration:none; letter-spacing:.02em; box-shadow:0 -4px 16px rgba(40,25,28,.25); }
#pasek-podgladu:hover { background:#6E3B42; }

/* ══════════════════════════════════════════════════════════════════════════
   RUCH (13.09.2026) — delikatne animacje przy poruszaniu się po aplikacji.
   Życzenie Mikołaja: „subtelne, żeby była nowocześniejsza i przyjemna".
   ─────────────────────────────────────────────────────────────────────────
   Zasady, żeby to nie zaczęło przeszkadzać:
     • wszystko krótkie (0,2–0,4 s) i małe (kilka pikseli, 2–3 % skali);
     • ruch TYLKO na opacity i transform — nie ruszamy układu, nic nie skacze;
     • wejścia mają `animation-fill-mode: backwards`, NIE forwards: po animacji
       element wraca do zwykłych stylów, więc :hover/:active dalej działają
       (forwards trzymałby transform z ostatniej klatki i zabijał podniesienie
       kafelka pod myszą);
     • kto ma w systemie „ogranicz ruch" — dostaje wersję bez animacji (koniec).
   Kafelki „tylko dla" i reguła „nie migać" ([hidden], .kafelki-czekaja) są
   nietknięte: animacja zaczyna się od opacity 0, a startuje dopiero wtedy,
   gdy js/admin.js zdejmie klasę czekania — nic nie mignie.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Przejście między stronami ────────────────────────────────────────────
   Aplikacja to zwykłe strony, każde kliknięcie to nowy dokument. Cross-document
   View Transitions (Chrome 126+, Safari 18.2+) robią z tego miękkie
   przenikanie zamiast białego mrugnięcia. Starsza przeglądarka po prostu
   tego nie widzi. Działa tylko między stronami z tym arkuszem (obie muszą
   mieć @view-transition), więc wyjście na publiczny /finestratstay jest
   zwyczajne. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: immo-znikanie .16s ease-in both; }
::view-transition-new(root) { animation: immo-pojawianie .26s ease-out both; }
@keyframes immo-znikanie   { to   { opacity: 0; } }
@keyframes immo-pojawianie { from { opacity: 0; } }

/* ── Klatki ────────────────────────────────────────────────────────────── */
/* wynurzenie: z lekkiego dołu, z niewidoczności — dla kart i kafelków */
@keyframes immo-wynurz {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
/* pojawienie się wiersza listy — mniejszy skok, bo wierszy jest dużo */
@keyframes immo-wiersz {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}
/* okno dialogowe: minimalnie mniejsze i niżej → na miejsce */
@keyframes immo-okno {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
/* przyciemnienie tła pod oknem */
@keyframes immo-tlo { from { opacity: 0; } to { opacity: 1; } }
/* panel wysuwany spod dzwonka */
@keyframes immo-panel {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* ── Kafelki menu wchodzą kaskadą ────────────────────────────────────────
   Selektor `html:not(.kafelki-czekaja)`: dopóki strona nie wie, kim jest
   człowiek, reguła NIE pasuje i animacja nie startuje. W chwili zdjęcia klasy
   reguła zaczyna pasować i kafelki wynurzają się jeden po drugim.
   Na stronach bez tej klasy (/raporty, /mapy) startuje od razu po wczytaniu. */
html:not(.kafelki-czekaja) .grid > a.tile,
html:not(.kafelki-czekaja) .grid > .tile,
.choices > .choice,
.fir {
  animation: immo-wynurz .42s cubic-bezier(.2, .7, .2, 1) var(--kaskada, 0ms) backwards;
}
/* Opóźnienie idzie przez zmienną, nie przez `animation-delay`: skrót
   `animation` w regule wyżej ma silniejszy selektor i zerowałby osobno
   ustawione opóźnienie (sprawdzone w Chrome headless 13.09.2026). */
.grid > :nth-child(1),  .choices > :nth-child(1)  { --kaskada: 0ms; }
.grid > :nth-child(2),  .choices > :nth-child(2)  { --kaskada: 45ms; }
.grid > :nth-child(3),  .choices > :nth-child(3)  { --kaskada: 90ms; }
.grid > :nth-child(4),  .choices > :nth-child(4)  { --kaskada: 135ms; }
.grid > :nth-child(5)  { --kaskada: 180ms; }
.grid > :nth-child(6)  { --kaskada: 225ms; }
.grid > :nth-child(7)  { --kaskada: 270ms; }
.grid > :nth-child(8)  { --kaskada: 315ms; }
.grid > :nth-child(9)  { --kaskada: 360ms; }
.grid > :nth-child(10) { --kaskada: 405ms; }
.grid > :nth-child(11) { --kaskada: 450ms; }
.grid > :nth-child(12) { --kaskada: 495ms; }
/* Kafelki firm na /koszty — ta sama kaskada, własne opóźnienia (nie leżą w .grid). */
.fir:nth-of-type(2) { --kaskada: 60ms; }
.fir:nth-of-type(3) { --kaskada: 120ms; }
.fir:nth-of-type(4) { --kaskada: 180ms; }
.fir:nth-of-type(5) { --kaskada: 240ms; }

/* ── Karty treści wynurzają się przy wejściu na stronę ──────────────────
   Jedno miękkie wejście, bez kaskady — na ekranach roboczych kart bywa
   kilkanaście i kaskada zrobiłaby z otwarcia strony pokaz slajdów. */
.sect, .pods, .kgr, .card, .fieldcard, .doc, .kafel {
  animation: immo-wynurz .36s cubic-bezier(.2, .7, .2, 1) backwards;
}

/* ── Wiersze list ─────────────────────────────────────────────────────────
   Listy rysuje JavaScript po przyjściu danych — animacja odpala się w chwili
   wstawienia elementu, więc każde odświeżenie listy daje krótkie „ułożenie
   się" wierszy. Kaskada tylko dla pierwszych dziesięciu: dalsze są zwykle
   poza ekranem, a długie łańcuchy opóźnień robiłyby wrażenie ślamazarności. */
.poz, .evrow {
  animation: immo-wiersz .26s ease-out backwards;
}
.poz:nth-child(2),  .evrow:nth-child(2)  { animation-delay: 25ms; }
.poz:nth-child(3),  .evrow:nth-child(3)  { animation-delay: 50ms; }
.poz:nth-child(4),  .evrow:nth-child(4)  { animation-delay: 75ms; }
.poz:nth-child(5),  .evrow:nth-child(5)  { animation-delay: 100ms; }
.poz:nth-child(6),  .evrow:nth-child(6)  { animation-delay: 125ms; }
.poz:nth-child(7),  .evrow:nth-child(7)  { animation-delay: 150ms; }
.poz:nth-child(8),  .evrow:nth-child(8)  { animation-delay: 175ms; }
.poz:nth-child(9),  .evrow:nth-child(9)  { animation-delay: 200ms; }
.poz:nth-child(10), .evrow:nth-child(10) { animation-delay: 225ms; }

/* Szczegóły kontaktu rozwijane pod kartą (klienci/clientes, 16.09.2026) —
   krótkie rozłożenie w dół, żeby było widać, że coś się właśnie otworzyło. */
@keyframes immo-rozwin { from { opacity: 0; transform: translateY(-6px); } }
.poz .detale { animation: immo-rozwin .28s cubic-bezier(.2, .7, .2, 1) backwards; }

/* ── Okna dialogowe i arkusze od dołu ─────────────────────────────────────
   Każda strona nazywa je inaczej — tu wszystkie razem:
     .tlo/.okno (klienci, clientes) · .overlay/.sheet (kalendarz)
     .modal-overlay/.modal (gantt) · #podglad-faktury/.pf-okno (koszty)
     .prz-tlo/.prz-okno (js/przypomnij.js) · .done (parte, ekran „wysłano").
   Okna z `display:none` → `.open`: animacja rusza w chwili, gdy element
   zaczyna być rysowany, więc zwykłe przełączenie klasy wystarcza. */
.tlo, .overlay.open, .modal-overlay.open, #podglad-faktury, .prz-tlo, .done.show {
  animation: immo-tlo .2s ease-out backwards;
}
.okno, .overlay.open > .sheet, .modal-overlay.open > .modal, .pf-okno, .prz-okno {
  animation: immo-okno .3s cubic-bezier(.2, .8, .3, 1) backwards;
}

/* ── Panel powiadomień pod dzwonkiem ─────────────────────────────────── */
.pw-panel:not([hidden]) { animation: immo-panel .22s cubic-bezier(.2, .8, .3, 1) backwards; }
/* Sekcje rozwijane (details) — treść pod nagłówkiem wchodzi miękko. */
details[open] > :not(summary) { animation: immo-wiersz .24s ease-out backwards; }

/* ── Dotyk i najechanie ───────────────────────────────────────────────────
   Kafelki mają już podniesienie; tu tylko łagodniejsza krzywa i ikona,
   która lekko rośnie razem z kaflem. Przyciski dostają mikro-wciśnięcie. */
.tile, .choice, .kafel, .fir, a.wroc {
  transition: transform .2s cubic-bezier(.2, .7, .2, 1), box-shadow .22s ease, border-color .18s ease;
}
.tile:hover .ico, .fir:hover .ico { transform: translateY(-1px) scale(1.06); }
.tile .ico, .fir .ico { transition: filter .18s ease, transform .22s cubic-bezier(.2, .7, .2, 1); }
a.wroc:hover { transform: translateX(-2px); }
a.wroc:active { transform: translateX(-1px) scale(.96); }

button, .btn, .chip, .poz, .lang-btn {
  transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease,
              border-color .18s ease, color .18s ease, opacity .18s ease;
}
button:not(:disabled):active, .btn:active { transform: scale(.97); }
.chip:not(:disabled):active { transform: scale(.94); }
input, select, textarea { transition: border-color .16s ease, box-shadow .16s ease; }

/* ── Dostępność: „ogranicz ruch" w systemie wyłącza wszystko powyżej ───── */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .tile, .choice, .fir, .sect, .pods, .kgr, .card, .fieldcard, .doc, .kafel,
  .poz, .poz .detale, .evrow, .tlo, .overlay.open, .modal-overlay.open, #podglad-faktury, .prz-tlo, .done.show,
  .okno, .sheet, .modal, .pf-okno, .prz-okno, .pw-panel, details[open] > * {
    animation: none !important;
  }
  *, *::before, *::after { transition-duration: .01ms !important; }
}
/* Wydruk: raport z wyjazdu buduje się i idzie do drukarki w jednym ruchu —
   gdyby karta była akurat w pierwszej klatce (opacity 0), wyszedłby pusty
   papier. Na papierze nic się nie rusza. */
@media print { *, *::before, *::after { animation: none !important; transition: none !important; } }