/* Wspólne tokeny wyglądu DKTE (27.10.2026, etap 1 z „Wzorce wyglądu DKTE”): panel (index.html), portal klienta (klient.html) i aplikacja (/app).
   Ładowany po panel.css, przed stylami danej części. Krój Plus Jakarta Sans (OFL, github.com/tokotype/PlusJakartaSans) z naszego serwera
   (/fonty, latin + latin-ext: polskie, francuskie, niderlandzkie znaki) zamiast Google Fonts – działa bez internetu w aplikacji
   i adresy IP klientów nie trafiają do Google. Zachowania (statusy, wibracja, Wstecz, klawiatura) są w wyglad.js. */
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/fonty/plus-jakarta-sans-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/fonty/plus-jakarta-sans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --sans: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --serif: var(--sans);
  --r-s: 10px; --r-l: 22px; --dotyk: 48px;
  --ruch: 200ms; --ruch-ease: cubic-bezier(.2, .8, .2, 1);
  /* statusy – jeden słownik w panelu, portalu i aplikacji (wyglad.js → DkteStatus): tło + tekst, kontrast ≥ 4,5:1 */
  --st-nowe: #E6EEFB; --st-nowe-t: #02377A;
  --st-czeka: #F7EEDD; --st-czeka-t: #7A5A22;
  --st-plan: #EEF3FB; --st-plan-t: #2B4F86;
  --st-ok: #E3F4EA; --st-ok-t: #0B6B3A;
  --st-uwaga: #FEF3E2; --st-uwaga-t: #94470A;
  --st-pilne: #FDECEA; --st-pilne-t: #B42318;
  --st-szary: #EDF0F5; --st-szary-t: #4F5B70;
}
:root[data-motyw="ciemny"] {
  --st-nowe: #172A4D; --st-nowe-t: #A9C4F7; --st-czeka: #3A2E18; --st-czeka-t: #E2C08A; --st-plan: #172440; --st-plan-t: #9FB8E6;
  --st-ok: #13301F; --st-ok-t: #6FD3A0; --st-uwaga: #3A2A12; --st-uwaga-t: #F3B562; --st-pilne: #3B1715; --st-pilne-t: #F48B82;
  --st-szary: #1A2539; --st-szary-t: #A7B3C6;
}

/* status: słowo + ikona + kolor, zawsze razem (nigdy sam kolor – WCAG 1.4.1); wzór GOV.UK Tag, Tabler status */
.st { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; font: 700 13px/1.2 var(--sans); letter-spacing: .01em; text-transform: none;
  padding: 4px 10px 4px 7px; border-radius: 999px; background: var(--st-szary); color: var(--st-szary-t); vertical-align: middle; white-space: nowrap }
.st > span { overflow: hidden; text-overflow: ellipsis }
.st svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round }
.st-nowe { background: var(--st-nowe); color: var(--st-nowe-t) }
.st-czeka { background: var(--st-czeka); color: var(--st-czeka-t) }
.st-plan { background: var(--st-plan); color: var(--st-plan-t) }
.st-ok { background: var(--st-ok); color: var(--st-ok-t) }
.st-uwaga { background: var(--st-uwaga); color: var(--st-uwaga-t) }
.st-pilne { background: var(--st-pilne); color: var(--st-pilne-t) }
.st-szary { background: var(--st-szary); color: var(--st-szary-t) }

/* zarysy kart przy ładowaniu zamiast samego „Ładowanie…” (ekran nie skacze, gdy przyjdą dane) */
.szkielet { display: grid; gap: 12px }
.szkielet .szk { border-radius: var(--r, 16px); background: linear-gradient(90deg, var(--sel) 0%, color-mix(in srgb, var(--sel) 45%, var(--card)) 50%, var(--sel) 100%);
  background-size: 200% 100%; animation: sz-blysk 1.4s ease-in-out infinite }
.szkielet .szk-pasek { height: 22px; width: 46%; border-radius: 8px }
.szkielet .szk-kafle { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; background: none; animation: none }
.szkielet .szk-kafel { height: 86px }
.szkielet .szk-karta { height: 132px }
.szkielet .szk-wiersz { height: 58px; border-radius: 12px }
@keyframes sz-blysk { from { background-position: 100% 0 } to { background-position: -100% 0 } }
.sr-tylko { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* brak internetu: ostatnie dane z godziną zamiast pustego ekranu */
.bez-sieci { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 11px 14px; border-radius: 12px; background: var(--st-uwaga); color: var(--st-uwaga-t); font: 600 15px/1.4 var(--sans) }
.bez-sieci svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.bez-sieci button { margin-left: auto; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid currentColor; background: transparent; color: inherit; font: 700 14px var(--sans); cursor: pointer }

/* wejście nowej zakładki: krótkie przenikanie (tylko przezroczystość – transform psułby przyklejone paski w środku) */
@media (prefers-reduced-motion: no-preference) {
  .wejscie-ekranu { animation: wejscie-ekranu var(--ruch) var(--ruch-ease) both }
}
@keyframes wejscie-ekranu { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .szkielet .szk { animation: none } }

/* otwarta klawiatura na telefonie: chowamy dolne menu, żeby nie zasłaniało pola i przycisku „Wyślij” */
html.klawiatura :is(.dolne-k, #dolne, .b-dolne, .wybor-pasek-dol) { display: none !important }
/* status w linijce zgłoszenia (zgloszenia-wspolne.js) – to samo miejsce co dawna plakietka .zg-st */
.st[data-zg-st] { flex: none; max-width: 62%; margin-left: auto }