/* 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 }

/* ── etap 2 (27.10.2026) ── */
/* jeden wzór karty (.wk): ikona po lewej, tytuł i jedno zdanie, akcja zawsze w tym samym miejscu (pod tekstem); cała karta to jedno dotknięcie.
   Odcienie jak statusy: .wk-pilne, .wk-czeka, .wk-nowe, .wk-ok. Użycie: „Na dziś” w portalu, lista plików, puste stany. */
.wk-siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; align-items: start; margin: 0 0 16px }
.wk { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 14px 16px; border-radius: var(--r, 16px);
  background: var(--card); border: 1px solid var(--line); color: var(--fg); text-decoration: none; box-shadow: var(--cien, none) }
a.wk:hover { border-color: currentColor }
a.wk:focus-visible { outline: 3px solid var(--st-nowe-t); outline-offset: 2px }
.wk-ik { grid-row: span 3; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--st-szary); color: var(--st-szary-t) }
.wk-ik svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.wk-tyt { font: 700 16px/1.3 var(--sans); color: var(--fg) }
.wk-op { font: 500 14.5px/1.45 var(--sans); color: var(--muted) }
.wk-akcja { justify-self: start; margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 14px; border-radius: 999px;
  font: 700 14.5px var(--sans); background: var(--st-szary); color: var(--st-szary-t) }
.wk-pilne .wk-ik, .wk-pilne .wk-akcja { background: var(--st-pilne); color: var(--st-pilne-t) }
.wk-czeka .wk-ik, .wk-czeka .wk-akcja { background: var(--st-czeka); color: var(--st-czeka-t) }
.wk-nowe .wk-ik, .wk-nowe .wk-akcja { background: var(--st-nowe); color: var(--st-nowe-t) }
.wk-ok .wk-ik { background: var(--st-ok); color: var(--st-ok-t) }
.wk-pilne { border-color: color-mix(in srgb, var(--st-pilne-t) 35%, var(--line)) }
.wk-naglowek { font: 700 13px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 4px 0 8px }

/* arkusz od dołu (Wyglad.arkusz): na telefonie przy dolnej krawędzi z uchwytem, przeciąganie w dół zamyka; na komputerze okno na środku */
.ark-tlo { position: fixed; inset: 0; z-index: 95; background: rgba(11, 18, 32, .5) }
.ark { position: fixed; z-index: 96; left: 0; right: 0; bottom: 0; max-height: 86dvh; overflow-y: auto; overscroll-behavior: contain; background: var(--card); color: var(--fg);
  border-radius: 22px 22px 0 0; padding: 8px max(18px, env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
  box-shadow: 0 -8px 30px rgba(15, 27, 45, .2) }
.ark-uchwyt { display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 4px auto 12px; touch-action: none }
.ark h2 { font: 700 19px/1.3 var(--sans); margin: 0 0 8px }
.ark p { font: 400 16.5px/1.55 var(--sans); margin: 0 0 14px }
.ark-przyciski { display: grid; gap: 10px }
.ark-przyciski button { min-height: 48px; border-radius: 12px; border: 0; font: 700 16px var(--sans); background: var(--firma, var(--st-nowe-t)); color: #fff; cursor: pointer }
:root[data-motyw="ciemny"] .ark-przyciski button { background: color-mix(in srgb, var(--firma, #02377A) 45%, #fff); color: #0B1220 }
@media (min-width: 761px) { .ark { left: 50%; right: auto; bottom: auto; top: 50%; width: min(520px, 92vw); transform: translate(-50%, -50%); border-radius: 20px; padding: 18px 22px } .ark-uchwyt { display: none } }
@media (prefers-reduced-motion: no-preference) and (max-width: 760px) {
  .ark { animation: ark-wjazd var(--ruch, 200ms) var(--ruch-ease, ease-out) backwards; transition: transform .18s ease-out }
}
@keyframes ark-wjazd { from { transform: translateY(40px); opacity: 0 } to { transform: none; opacity: 1 } }
.wk-ik-tekst { font: 800 12px/1 var(--sans); letter-spacing: .04em }
.wk-tyt { overflow-wrap: anywhere }
.wk-akcja svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }

/* ── etap 3 (27.10.2026) ── */
/* pasek ostatnich 14 dni kampanii (Reklamy.pasek14HTML): kafelek na dzień, pod spodem jedno zdanie słowami */
.p14 { display: grid; gap: 4px; margin: 8px 0 12px }
.p14-kafle { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 3px }
.p14-kafle i { height: 24px; border-radius: 4px; background: var(--line) }
.p14-kafle .p14-dziala { background: var(--ok, #0E7A43) }
.p14-kafle .p14-uwaga { background: var(--warn, #B45309) }
.p14-kafle .p14-stop { background: color-mix(in srgb, var(--muted) 35%, var(--card)) }
.p14-kafle .p14-brak { background: transparent; border: 1px dashed var(--line) }
.p14-leg { display: flex; justify-content: space-between; font: 600 12.5px var(--sans); color: var(--muted) }
.p14-zdanie { margin: 2px 0 0; font: 600 14px/1.4 var(--sans); color: var(--fg) }