/* Podstrony usług i polityka prywatności (runda „miks2”): wspólne style, ładowane po style.css, dol.css, wysoki.css i telefon.css (pasek u góry i stopka jak na stronie głównej).
   Układ: u góry nagłówek (okruszki, H1, lead, stan prawny) i mikrokoncept strony (druk tej usługi na papierze, plik hero.html / hero.css / hero.js w folderze podstrony),
   niżej spis treści i tekst artykułu: wiersz ok. 66 znaków, ≥ 17 px; tabele, uwagi i ramka kontaktowa jak druki na papierze; granat to tło, papier to dokument.
   Tokeny wyłącznie ze strony głównej (kolory, kroje, krzywa ruchu). Skala okna z wysoki.css (--u, --p) tylko od 1001 px, więc reguły bez niej są podstawą dla telefonu i tabletu. */

.pod { --tekst: 17px; --h1: clamp(40px, 11vw, 56px); --h2: clamp(27px, 7.4vw, 34px); --h3: 21px; --lead: 19px; --odstep: clamp(56px, 9vw, 96px); }
.pod-gora, .pod-cialo { padding-inline: var(--m); }
.pod-gora { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(28px, 6vw, 48px); padding-top: clamp(28px, 6vw, 56px); padding-bottom: clamp(36px, 7vw, 64px); align-items: center; }
.pod-naglowek { display: flex; flex-direction: column; align-items: flex-start; }
.pod-okruszki { margin-bottom: clamp(18px, 3vw, 28px); font-size: 14px; line-height: 1.4; color: var(--tx-2); }
.pod-okruszki a { display: inline-block; padding: 12px 0; color: var(--tx-2); text-decoration: underline; text-decoration-color: var(--linia); text-underline-offset: 4px; }   /* cel dotyku ≥ 44 px wysokości w całym wierszu okruszków */
.pod-okruszki a:hover { color: #fff; text-decoration-color: currentColor; }
.pod h1 { font-size: var(--h1); line-height: .94; max-width: 14em; }
.pod-lead { margin-top: clamp(18px, 3vw, 28px); max-width: 38ch; font-size: var(--lead); line-height: 1.45; color: var(--tx-2); text-wrap: pretty; }
.pod-stan { margin-top: clamp(18px, 3vw, 26px); font: 500 14px/1.3 var(--mono); color: var(--tx-3); }
/* MIKS-10, poprawka 7: pod wstępem czterech stron usług jeden spokojny odnośnik do formularza (nazwa usługi z odnośnika „Zapytaj o…” na stronie głównej): 20 px pod wstępem, pole ≥ 48 px, 17 px (od 1001 px skala tekstu artykułu),
   podkreślenie jak „Spis treści”, bez tła i bez czerwieni (czerwony przycisk formularza zostaje w ramce „Kontakt” na końcu); data stanu dosunięta, żeby odnośnik nie rozsuwał wstępu */
.pod-zapytaj { margin: 20px 0 0; }
.pod-zapytaj a { display: inline-flex; align-items: center; min-height: 48px; font-size: var(--tekst); font-weight: 600; line-height: 1.3; color: var(--tx); text-decoration: underline; text-decoration-color: var(--druk-noc); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.pod-zapytaj a:focus-visible { outline: 2px solid var(--papier); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .pod-zapytaj a:hover { color: #fff; } }
.pod-zapytaj + .pod-stan { margin-top: 4px; }

/* mikrokoncept strony: druk na planszy z siatką (jak plansza sceny miesiąca); zawartość i ruch w hero.* podstrony */
.pod-hero { position: relative; margin: 0; min-width: 0; }

.pod-cialo { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 24px; padding-bottom: var(--odstep); }
.pod-spis-miejsce { margin: 0 0 8px; }
.pod-spis { margin: 0; scroll-margin-top: calc(var(--gora) + 12px); }
.pod-spis-link { margin: 4px 0 0; }
.pod-spis-link a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 600; color: var(--tx); text-decoration: underline; text-decoration-color: var(--druk-noc); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
@media (hover: hover) and (pointer: fine) { .pod-spis-link a:hover { color: #fff; } }
.pod-spis-pasek { display: none; }
.pod-spis p { margin-bottom: 8px; font-weight: 650; font-size: 15px; color: var(--tx-2); }
.pod-spis ol { border-top: 1px solid var(--linia); }
.pod-spis a { display: flex; align-items: center; min-height: 44px; padding: 6px 0; border-bottom: 1px solid var(--linia); font-size: 15px; line-height: 1.3; color: var(--tx); text-decoration: none; }
.pod-spis a.on { color: #fff; box-shadow: inset 3px 0 0 var(--druk-noc); padding-left: 12px; }
@media (hover: hover) and (pointer: fine) { .pod-spis a:hover { color: #fff; } }

.pod-art { min-width: 0; font-size: var(--tekst); line-height: 1.62; color: var(--tx); }
.pod-art > :first-child { margin-top: 0; }
.pod-art p { margin: 0 0 1.05em; max-width: 60ch; text-wrap: pretty; }   /* 60ch ≈ 63–75 znaków w wierszu (66ch dawało do 82) */
.pod-art b, .pod-art strong { font-weight: 650; color: #fff; }
.pod-art a { color: var(--tx); text-decoration: underline; text-decoration-color: var(--druk-noc); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.pod-art a:hover { color: #fff; }
.pod-art a.przycisk { color: var(--tusz); text-decoration: none; }                       /* przyciski w ramce CTA to nie linki w tekście: bez podkreślenia, ciemny napis na papierze */
.pod-art a.przycisk-cichy { color: var(--tx); }
@media (hover: hover) and (pointer: fine) { .pod-art a.przycisk-cichy:hover { color: #fff; } }
.pod-art h2 { margin: clamp(40px, 6vw, 60px) 0 14px; max-width: 18em; font-size: var(--h2); line-height: 1; scroll-margin-top: calc(var(--gora) + 24px); }
.pod-art h3 { margin: 1.6em 0 .4em; font-size: var(--h3); line-height: 1.15; color: #fff; }
.pod-art ul, .pod-art ol { margin: 0 0 1.2em; max-width: 60ch; }
.pod-art li { position: relative; padding-left: 1.5em; margin-bottom: .55em; text-wrap: pretty; }
.pod-art ul > li::before { content: ""; position: absolute; left: 0; top: .82em; width: .7em; height: 2px; background: var(--druk-noc); }
.pod-kroki { counter-reset: krok; }
.pod-kroki > li { counter-increment: krok; padding-left: 2.6em; min-height: 2em; }
.pod-kroki > li::before { content: counter(krok); position: absolute; left: 0; top: .1em; display: grid; place-items: center; width: 1.9em; height: 1.9em; border: 1.5px solid var(--druk-noc); font: 500 .92em/1 var(--mono); color: var(--druk-noc); }
/* MIKS-11, poprawka 5 (poniżej 640 px; ten sam komponent jest w Kadrach i płaci tę samą stawkę): numer w polu 24×24 px, odstęp 10 px od tekstu, wcięcie tekstu 34 px (było 2,6 em = 44 px przy numerze 29,7 px),
   środek pola numeru na środku pierwszego wiersza (wiersz 1,62 × --tekst), 24 px między krokami (było .55em = 9,4 px); ostatni krok zachowuje dawny odstęp pod listą. Komputer i tablet od 640 px bez zmian. */
@media (max-width: 639px) {
  .pod-kroki > li { padding-left: 34px; min-height: 24px; margin-bottom: 24px; }
  .pod-kroki > li:last-child { margin-bottom: .55em; }
  .pod-kroki > li::before { top: calc((1.62 * var(--tekst) - 24px) / 2); width: 24px; height: 24px; }
}

/* tabele: druk na papierze (czerwona kreska pod nagłówkiem jak w drukach strony głównej) */
.pod-tabela { margin: 1.5em 0 1.7em; padding: 6px clamp(14px, 1.8vw, 26px) 10px; max-width: 100%; background: var(--papier); color: var(--tusz); border-radius: 2px; box-shadow: var(--cien-papieru); }
.pod-tabela table { width: 100%; border-collapse: collapse; font-size: .94em; line-height: 1.45; font-variant-numeric: tabular-nums; }
.pod-tabela th { padding: 12px 18px 9px 0; text-align: left; font-weight: 650; color: var(--tusz-2); border-bottom: 1.5px solid var(--druk-l); vertical-align: bottom; }
.pod-tabela td { padding: 10px 18px 10px 0; vertical-align: top; border-top: 1px solid var(--papier-2); }
.pod-tabela tbody th { padding: 10px 18px 10px 0; border-bottom: 0; border-top: 1px solid var(--papier-2); vertical-align: top; font-weight: 600; color: var(--tusz); }   /* nagłówek wiersza stoi jak komórka, nie jak nagłówek kolumny */
.pod-tabela tbody tr:first-child td, .pod-tabela tbody tr:first-child th { border-top: 0; }
.pod-art .pod-tabela a, .pod-art .pod-uwaga a { color: var(--tusz); text-decoration-color: var(--druk); }                   /* papier jest jasny: link w tabeli i w uwadze ma ciemny tekst */
.pod-tabela th:last-child, .pod-tabela td:last-child { padding-right: 0; }
.pod-tabela td:first-child { font-weight: 600; }
.pod-tabela b { color: var(--tusz); }
.pod-uwaga { padding: 18px clamp(16px, 2vw, 26px) 20px; max-width: 66ch; background: var(--papier); color: var(--tusz); border-top: 3px solid var(--druk-l); border-radius: 2px; box-shadow: var(--cien-papieru); }
.pod-uwaga b { color: var(--druk); }
.pod-art .pod-uwaga { margin-bottom: 1.2em; }

.pod-cta { margin-top: 40px; padding: clamp(22px, 3vw, 36px); max-width: 66ch; background: var(--noc-2); border: 1px solid var(--linia); border-radius: 2px; }
.pod-cta h2 { margin: 0 0 12px; font-size: clamp(26px, 6.6vw, 34px); }
.pod-cta p { max-width: 52ch; }
.pod-cta .pod-cta-przyciski { display: flex; flex-wrap: wrap; gap: 12px; max-width: none; margin: 22px 0 0; }   /* max-width: none: wiersz przycisków nie dziedziczy 52ch akapitu ramki, więc od 560 do 760 px (tablet) przyciski też wypełniają ramkę */
.pod-cta .przycisk-duzy { height: 56px; padding: 0 26px; font-size: 17px; }
.pod-cta .pod-cta-tel { margin: 10px 0 0; max-width: none; }                       /* MIKS-12, poprawka 7: drugi telefon pod przyciskami, 10 px od wiersza przycisków (8–12 px; wiersz bywa dwuwierszowy na telefonie) */
.pod-cta .pod-cta-tel a { display: flex; align-items: center; width: fit-content; min-height: 44px; font-size: 17px; font-weight: 500; line-height: 1.2; white-space: nowrap; }   /* odnośnik tekstowy jak inne linki artykułu (kolor --tx, podkreślenie --druk-noc), pole klikalne ≥ 44 px; blok, więc pole zaczyna się dokładnie 10 px pod przyciskami */
.pod-art .pod-cta .pod-cta-tel a:hover { color: var(--tx); }                        /* hover tylko dla myszy (reguła globalna `.pod-art a:hover` działa też na dotyk) */
@media (hover: hover) and (pointer: fine) { .pod-art .pod-cta .pod-cta-tel a:hover { color: #fff; } }
.pod-art .pod-cta a.przycisk-formularz { background: var(--druk); color: #fff; }   /* MIKS-8, poprawka 7: przycisk formularza na końcu artykułu to czerwień druku jak ten w pasku u góry (biały tekst 6,1:1), pierwszy w ramce; telefon jako drugi, cichy */
@media (hover: hover) and (pointer: fine) { .pod-art .pod-cta a.przycisk-formularz:hover { background: var(--druk-h); color: #fff; } }
.przycisk-cichy { background: transparent; color: var(--tx); box-shadow: inset 0 0 0 1.5px var(--tx-2); }
@media (hover: hover) and (pointer: fine) { .przycisk-cichy:hover { background: transparent; box-shadow: inset 0 0 0 1.5px #fff; color: #fff; } }
.pod-powiazane { margin-top: clamp(40px, 6vw, 64px); max-width: 66ch; }
.pod-powiazane h2 { margin: 0 0 10px; font-size: clamp(24px, 6vw, 30px); }
.pod-powiazane ul { padding: 0; border-top: 1px solid var(--linia); }
.pod-powiazane li { margin: 0; padding: 0; }
.pod-powiazane li::before { display: none; }
.pod-art .pod-powiazane a { display: flex; align-items: center; min-height: 48px; padding: 6px 0; border-bottom: 1px solid var(--linia); font-size: 17px; color: var(--tx); text-decoration: none; }   /* MIKS-9, poprawka 6: telefon i tablet 17 px (było 16,5), od 1001 px 18,5 px (poniżej) */
.pod-art .pod-powiazane a:hover { color: #fff; box-shadow: inset 3px 0 0 var(--druk-noc); padding-left: 12px; }

/* polityka prywatności: tylko typografia strony */
.pod-gora-prosta { padding-bottom: clamp(20px, 4vw, 36px); }
.pod-polityka .pod-art .pod-stan { margin: 0 0 1.4em; }
.pod-polityka .pod-art h2 { margin-top: clamp(32px, 5vw, 48px); font-size: clamp(24px, 6.2vw, 30px); }
.pod-polityka .mail button { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; min-height: 44px; color: var(--tx); text-decoration: underline; text-decoration-color: var(--druk-noc); text-underline-offset: 4px; cursor: pointer; }
.pod-polityka .mail button:focus-visible { outline: 2px solid var(--papier); outline-offset: 3px; }

/* telefon (< 640 px): tabele o trzech i więcej kolumnach oraz tabele terminów jako bloki; pierwsza komórka (data, nazwa) albo nagłówek wiersza otwiera blok, reszta to para etykieta | wartość.
   Jedna hierarchia we wszystkich blokach: początek bloku (bez etykiety) → etykieta kolumny po lewej, wartość po prawej. Wszystkie dane zostają w DOM, ukrywa je wyłącznie CSS. */
.pod-formy, .pod-forma-nazwa, .pod-pelna { display: none; }
@media (max-width: 639px) {
  .pod-tabela table:is(.szeroka, .terminy) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pod-tabela table:is(.szeroka, .terminy) tr, .pod-tabela table:is(.szeroka, .terminy) td { display: block; }
  .pod-tabela table:is(.szeroka, .terminy) tbody tr { padding: 10px 0 12px; border-top: 1px solid var(--papier-2); }
  .pod-tabela table:is(.szeroka, .terminy) tbody tr:first-child { border-top: 0; }
  .pod-tabela table:is(.szeroka, .terminy) tbody th, .pod-tabela table:is(.szeroka, .terminy) tbody tr > td:first-child { display: block; padding: 0 0 5px; border: 0; font-size: 1.06em; font-weight: 650; line-height: 1.3; color: var(--tusz); }
  .pod-tabela table.terminy tbody tr > td:first-child { font-family: var(--mono); font-weight: 500; font-size: 1em; }   /* data jak dane na drukach: Geist Mono */
  .pod-tabela table:is(.szeroka, .terminy) td:not(:first-child), .pod-tabela table.szeroka tbody th ~ td { display: grid; grid-template-columns: minmax(6.5em, 34%) minmax(0, 1fr); column-gap: 12px; padding: 4px 0; border: 0; }
  .pod-tabela table:is(.szeroka, .terminy) td:not(:first-child)::before, .pod-tabela table.szeroka tbody th ~ td::before { content: attr(data-label); font-weight: 650; color: var(--tusz-2); }

  .pod-tabela table.terminy:not(.szeroka) td:not(:first-child) { grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; }   /* 2 kolumny: ta sama etykieta w każdym bloku, więc kolumna etykiety ma jej szerokość */

  /* porównanie form opodatkowania: wybór jednej formy (JS wstawia przełącznik i ustawia data-widok; bez JS zostaje układ blokowy powyżej) */
  .pod-formy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); position: sticky; top: calc(var(--gora) + var(--spis-h, 0px)); z-index: 6; margin: 0 calc(-1 * clamp(14px, 1.8vw, 26px)); padding: 4px clamp(14px, 1.8vw, 26px); background: var(--papier); }   /* wybór formy zostaje pod paskami (górny pasek + wiersz spisu) tylko w obrębie tabeli: .pod-tabela jest jego obszarem, a żaden przodek nie ma overflow */
  @media (max-height: 480px) { .pod-formy { position: static; } }                      /* telefon w poziomie: przyklejone pasy zabrałyby ponad 40% okna, wybór zostaje na górze tabeli */
  .pod-tabela[data-widok] .pod-formy::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--papier-2); }
  .pod-formy button, .pod-pelna { appearance: none; min-height: 48px; padding: 0 8px; border: 1.5px solid var(--tusz); border-radius: 0; background: transparent; color: var(--tusz); font: inherit; font-size: 15.5px; font-weight: 650; line-height: 1.1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .pod-formy button + button { margin-left: -1.5px; }
  .pod-formy button[aria-pressed="true"], .pod-pelna[aria-pressed="true"] { background: var(--tusz); color: var(--papier); }
  .pod-formy button:focus-visible, .pod-pelna:focus-visible { outline: 2px solid var(--tusz); outline-offset: 3px; position: relative; z-index: 1; }
  .pod-pelna { display: block; width: 100%; margin: 12px 0 6px; }
  .pod-forma-nazwa { display: block; margin: 0; padding: 4px 0 8px; border-bottom: 1.5px solid var(--druk-l); font-size: 1.06em; font-weight: 650; line-height: 1.3; color: var(--tusz); }
  .pod-tabela[data-widok="wszystkie"] .pod-forma-nazwa { display: none; }
  /* MIKS-11, poprawka 4: jedna wybrana forma — nazwa cechy NAD odpowiedzią, obie na całej szerokości wnętrza kartki (obok była kolumna 40%, w której „Składka zdrowotna w 2026 r.” i „Wspólne rozliczenie z małżonkiem”
     łamały się na trzy wiersze); pismo 1em (17 px, było .94em = 16 px), etykieta–odpowiedź 4 px (pudła; między krawędziami liter ok. 6 px), między parami 10 + 1 (kreska) + 10 = 21 px (między krawędziami liter ok. 23 px). Tylko CSS, DOM i przełączniki bez zmian; „Pokaż całe zestawienie” i komputer jak dotąd. */
  .pod-tabela[data-widok]:not([data-widok="wszystkie"]) table.formy { font-size: 1em; }
  .pod-tabela[data-widok]:not([data-widok="wszystkie"]) table.formy tbody tr { display: block; padding: 10px 0; }
  .pod-tabela[data-widok]:not([data-widok="wszystkie"]) table.formy tbody th { display: block; padding: 0 0 4px; font-size: 1em; font-weight: 650; }
  .pod-tabela[data-widok]:not([data-widok="wszystkie"]) table.formy tbody td { display: block; padding: 0; line-height: 1.4; text-wrap: pretty; }
  .pod-tabela[data-widok]:not([data-widok="wszystkie"]) table.formy tbody td::before { content: none; }
  .pod-tabela[data-widok="skala"] table.formy tbody td:not([data-f="skala"]),
  .pod-tabela[data-widok="liniowy"] table.formy tbody td:not([data-f="liniowy"]),
  .pod-tabela[data-widok="ryczalt"] table.formy tbody td:not([data-f="ryczalt"]) { display: none; }   /* po regule display: block powyżej (ta sama specyficzność, później wygrywa) */
  /* MIKS-12, poprawka 3 (Sol): „Pokaż całe zestawienie” — ta sama zasada co w widoku jednej formy: nazwa formy (::before z data-label) NAD swoją odpowiedzią, obie na całej szerokości wnętrza kartki
     (obok była kolumna ok. 109 px, w której „Skala podatkowa” i „Podatek liniowy” łamały się na dwa wiersze, a odpowiedź „Ryczałt” miała 3–6 wierszy), pismo 1em (17 px, było .94em = 16 px).
     Odstępy (pudła): nazwa formy → odpowiedź 4 px, odpowiedź → następna forma 16 px, ostatnia odpowiedź → następna cecha 24 px (12 + kreska 1 px + 11), nazwa cechy → pierwsza forma 8 px. Tylko CSS:
     DOM, słowa, przełączniki i kolejność bez zmian; reguły z zakresem `table.formy` + `[data-widok="wszystkie"]`, więc inne tabele z .szeroka, widok jednej formy i komputer jak dotąd. */
  .pod-tabela[data-widok="wszystkie"] table.formy { font-size: 1em; }
  .pod-tabela[data-widok="wszystkie"] table.formy tbody tr { padding: 11px 0 12px; }
  .pod-tabela[data-widok="wszystkie"] table.formy tbody tr:first-child { padding-top: 10px; }
  .pod-tabela[data-widok="wszystkie"] table.formy tbody th { padding: 0 0 8px; font-size: 1.06em; }
  .pod-tabela[data-widok="wszystkie"] table.formy tbody td { display: block; padding: 0; line-height: 1.4; text-wrap: pretty; }
  .pod-tabela[data-widok="wszystkie"] table.formy tbody td + td { margin-top: 16px; }
  .pod-tabela[data-widok="wszystkie"] table.formy tbody td::before { display: block; margin-bottom: 4px; }
}

/* tabela sytuacji awaryjnych KSeF (MIKS-8, poprawka 6; poniżej 760 px): każdy wiersz to para „sytuacja nad terminem” w jednej kolumnie pełnej szerokości (dwie wąskie kolumny dawały poszarpane bloki
   i długą drogę oka między nimi). Tylko CSS, DOM bez zmian (komplet słów i kolejność przypadków jak w HTML); wiersz nagłówków zostaje dla czytników ekranu, jak w tabelach terminów.
   Odstęp w parze 12 px, między parami 24 px z cienką linią, pismo 1em (17 px). Reguła łapie tabelę po komórce „Sytuacja”: krótkie pary tabeli składek w KPiR zostają w dwóch kolumnach; powyżej 759 px tabela jak dotąd. */
@media (max-width: 759px) {
  .pod-tabela table:has(td[data-label="Sytuacja"]) { font-size: 1em; }
  .pod-tabela table:has(td[data-label="Sytuacja"]) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pod-tabela table:has(td[data-label="Sytuacja"]) :is(tbody, tr, td) { display: block; }
  .pod-tabela table:has(td[data-label="Sytuacja"]) tbody tr { padding: 12px 0 11px; border-top: 1px solid var(--papier-2); }
  .pod-tabela table:has(td[data-label="Sytuacja"]) tbody tr:first-child { padding-top: 8px; border-top: 0; }
  .pod-tabela table:has(td[data-label="Sytuacja"]) tbody tr:last-child { padding-bottom: 4px; }
  .pod-tabela table:has(td[data-label="Sytuacja"]) td { padding: 0; border: 0; line-height: 1.4; }
  .pod-tabela table:has(td[data-label="Sytuacja"]) td:first-child { margin-bottom: 12px; font-weight: 650; color: var(--tusz); }
}

/* pierwsza tabela KSeF „Kto i od kiedy” (MIKS-9, poprawka 5; poniżej 640 px): data zostaje początkiem bloku, etykieta „Kogo dotyczy” stoi NAD własną odpowiedzią i odpowiedź ma całą szerokość wnętrza karty
   (obok etykiety była kolumna ok. 55% szerokości, więc odpowiedź układała się w wąski, wysoki blok). Pismo 1em (17 px) dla daty, etykiety i odpowiedzi; odstęp w bloku 12 px, między blokami 24 px (12 + 12 z cienką linią);
   etykieta przy odpowiedzi 3 px. Tylko CSS, DOM bez zmian. Reguła łapie dwukolumnową tabelę „Od kiedy | Kogo dotyczy”: trzykolumnowa tabela terminów (.szeroka) i pozostałe tabele terminów zostają jak dotąd. */
@media (max-width: 639px) {
  .pod-tabela table.terminy:has(td[data-label="Kogo dotyczy"]) { font-size: 1em; }
  .pod-tabela table.terminy:has(td[data-label="Kogo dotyczy"]) tbody tr { padding: 12px 0; }
  .pod-tabela table.terminy:has(td[data-label="Kogo dotyczy"]) tbody tr:first-child { padding-top: 8px; }
  .pod-tabela table.terminy:has(td[data-label="Kogo dotyczy"]) tbody tr:last-child { padding-bottom: 4px; }
  .pod-tabela table.terminy:has(td[data-label="Kogo dotyczy"]) tbody tr > td:first-child { padding-bottom: 12px; }
  .pod-tabela table.terminy:has(td[data-label="Kogo dotyczy"]) td:not(:first-child) { display: block; padding: 0; line-height: 1.4; text-wrap: pretty; }
  .pod-tabela table.terminy:has(td[data-label="Kogo dotyczy"]) td:not(:first-child)::before { display: block; margin-bottom: var(--et, 3px); }
}
/* tabela terminów „Dzień | Co | Kogo dotyczy” (MIKS-10, poprawka 5; poniżej 640 px): ten sam układ co pierwsza tabela KSeF (blok powyżej, selektor bez wykluczenia .szeroka), a dla trzech kolumn: data → 12 px → „Co” nad odpowiedzią → 12 px → „Kogo dotyczy”
   nad odpowiedzią; odstęp etykiety od odpowiedzi 5 px (KSeF zostaje przy 3 px, nie ruszam poprawionej wcześniej tabeli). Tylko CSS, DOM bez zmian; tabela „Termin | Co” i tabele w Kadrach i Księgach bez zmian. */
@media (max-width: 639px) {
  .pod-tabela table.terminy.szeroka:has(td[data-label="Kogo dotyczy"]) { --et: 5px; }
  .pod-tabela table.terminy.szeroka:has(td[data-label="Kogo dotyczy"]) td:not(:first-child) + td:not(:first-child) { margin-top: 12px; }
}

/* spis treści na telefonie i tablecie (≤ 1000 px, układ jednokolumnowy): w części artykułowej drugi wiersz pod górnym paskiem (48 px, granat, dolna linia). Wiersz stoi w układzie od początku
   części artykułowej (miejsce zarezerwowane, nic nie skacze przy przyklejeniu), przykleja się pod paskiem i trwa do ramki kontaktu; przycisk w nim otwiera TĘ SAMĄ listę (nav.pod-spis)
   jako panel pod wierszem. Odsunięcie celów kotwic = wysokość obu pasków + 20 px. Bez JavaScriptu (html bez .js) lista jest zwykłą listą w treści, a wiersza nie ma. Od 1001 px spis to
   lepka lista z lewej (bez zmian). */
@media (max-width: 1000px) {
  html { scroll-padding-top: 0; }                                                  /* cele kotwic wyznacza scroll-margin-top poniżej (bez dodawania dwóch odsunięć) */
  .pod { scroll-margin-top: calc(var(--gora) + 16px); }                            /* odnośnik „Przejdź do treści” zostawia pierwszy ekran treści pod paskiem jak dotąd */
  .pod-art h2, .pod-spis { scroll-margin-top: calc(var(--gora) + var(--spis-h, 0px) + 20px); }
  .js .pod-ze-spisem { --spis-h: 48px; }
  .js .pod-cialo { display: block; }                                               /* blok zamiast siatki: lepki wiersz ma za obszar całą część artykułową, nie jeden wiersz siatki */
  .js .pod-spis-miejsce { position: sticky; top: var(--gora); z-index: 20; height: var(--spis-h); margin: 0 calc(var(--m) * -1) 24px; padding: 0 var(--m); background: var(--noc); border-bottom: 1px solid var(--linia); scroll-margin-top: var(--gora); }
  .js .pod-spis-miejsce.koniec { visibility: hidden; }                              /* przy ramce kontaktu wiersz znika (miejsce zostaje, nic się nie przesuwa) */
  .js .pod-spis-pasek { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; color: #fff; font: inherit; font-size: 16px; font-weight: 650; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .js .pod-spis-pasek > span { flex: none; }
  .js .pod-spis-pasek::after { content: ""; flex: none; order: 3; width: 9px; height: 9px; margin: -4px 2px 0 auto; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .18s var(--ease); }
  .js .pod-spis-miejsce.otwarty .pod-spis-pasek::after { margin-top: 4px; transform: rotate(-135deg); }
  .js .pod-spis-biezacy { flex: 0 1 auto; min-width: 0; font-style: normal; font-size: 14.5px; line-height: 1.15; font-weight: 400; color: var(--tx-2); letter-spacing: -.01em; text-wrap: balance; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }   /* MIKS-10, poprawka 6: nazwa rozdziału do dwóch wierszy w pasku 48 px (2 × 16,7 px), bez wielokropka i bez ucinania słów; odstępy w pasku 14 → 10 px i „Spis treści” 15 px poniżej 381 px dają nazwie szerokość, przy której najdłuższe nazwy (52 znaki) mieszczą się w dwóch wierszach w 360 px */
  .js .pod-spis-biezacy:empty { display: none; }
  .js .pod-spis-pasek:focus-visible { outline: 2px solid var(--papier); outline-offset: -4px; }
  .js .pod-spis { display: none; }
  .js .pod-spis-miejsce.otwarty .pod-spis { display: block; position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - var(--gora) - var(--spis-h) - 12px); max-height: calc(100svh - var(--gora) - var(--spis-h) - 12px); overflow-y: auto; overscroll-behavior: contain; padding: 4px var(--m) 8px; background: var(--noc-2); border-bottom: 1px solid var(--linia); box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .65); }
  .js .pod-spis > p { display: none; }                                              /* nagłówek listy jest na przycisku wiersza */
  .js .pod-spis ol { border-top: 0; }
}
@media (max-width: 380px) { .js .pod-spis-pasek { font-size: 15px; } }
/* MIKS-11, poprawka 3 (tylko poniżej 341 px): napis „Spis treści” (82 px) zabierał nazwie rozdziału szerokość (167 px przy 320 px: cztery najdłuższe nazwy ucięte w trzecim lub czwartym wierszu). Zamiast niego w pasku 48 px stoi pole 44×48 px
   z rysowanym znakiem listy (trzy wiersze z kropkami, gradienty CSS) i strzałką otwarcia; napis zostaje nazwą dostępną przycisku (ukryty wizualnie), strzałka opuszcza prawą krawędź i nie odbiera nazwie szerokości:
   280 − 44 − 10 = 226 px na tytuł rozdziału (jak przy 390 px), do dwóch wierszy 14,5 px, z wyrównaniem wierszy (`balance`) jak powyżej 340 px. Cały pasek zostaje przyciskiem, fokus z klawiatury: ten sam obrys 2 px co dotąd. 341–1000 px bez zmian. */
@media (max-width: 340px) {
  .js .pod-spis-pasek { position: relative; }
  .js .pod-spis-pasek > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .js .pod-spis-pasek::before { content: ""; flex: none; width: 44px; height: 48px;
    background: linear-gradient(currentColor, currentColor) 8px 15px / 4px 4px no-repeat, linear-gradient(currentColor, currentColor) 15px 16px / 8px 2px no-repeat,
                linear-gradient(currentColor, currentColor) 8px 22px / 4px 4px no-repeat, linear-gradient(currentColor, currentColor) 15px 23px / 8px 2px no-repeat,
                linear-gradient(currentColor, currentColor) 8px 29px / 4px 4px no-repeat, linear-gradient(currentColor, currentColor) 15px 30px / 8px 2px no-repeat; }
  .js .pod-spis-pasek::after { position: absolute; left: 31px; top: 17.5px; margin: 0; order: 0; }
  .js .pod-spis-miejsce.otwarty .pod-spis-pasek::after { top: 21.5px; margin: 0; }
  .js .pod-spis-pasek:focus-visible { outline-offset: -2px; }                         /* obrys 2 px, cztery piksele od kropek znaku listy (przy −4 px zostawałyby dwa) */
}
@media (max-width: 1000px) and (max-height: 480px) { .js .pod-spis-miejsce { position: static; } }   /* telefon w poziomie: wiersz nie przykleja się (zostaje w układzie nad tekstem) */
@media (max-width: 1000px) and (prefers-reduced-motion: no-preference) {
  .js .pod-spis-miejsce.otwarty .pod-spis { animation: spis-wjazd .18s var(--ease) both; }
  @keyframes spis-wjazd { from { opacity: 0; transform: translateY(-8px); } }
}
@media (max-width: 1000px) and (prefers-reduced-motion: reduce) { .js .pod-spis-pasek::after { transition: none; } }

/* komputer: skala okna z wysoki.css; dwie kolumny u góry, spis treści po lewej, tekst do 66 znaków */
@media (min-width: 1001px) {
  .pod { --tekst: clamp(17px, calc(1.18 * var(--u)), calc(21 * var(--p))); --lead: clamp(19px, calc(1.5 * var(--u)), calc(25 * var(--p))); --h1: clamp(46px, calc(5.6 * var(--u)), calc(96 * var(--p))); --h2: clamp(28px, calc(2.5 * var(--u)), calc(44 * var(--p))); --h3: clamp(21px, calc(1.6 * var(--u)), calc(28 * var(--p))); }
  .pod-gora { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding-top: var(--sekcja-g); padding-bottom: calc(var(--sekcja-g) * .8); }
  .pod-naglowek { grid-column: 1 / span 6; }
  .pod-hero { grid-column: 7 / -1; }
  .pod-gora-prosta .pod-naglowek { grid-column: 1 / -1; }
  .pod-cialo { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: start; }
  .pod-spis-miejsce { grid-column: 1 / span 3; position: sticky; top: calc(var(--gora) + 28px); margin: 0; }
  .pod-spis { padding-right: 0; }                                  /* MIKS-12, poprawka 6: 12 px prawego marginesu listy przeszło na wcięcie pozycji (niżej), więc pole tekstu pozycji nieaktywnej ma tę samą szerokość co dotąd */
  .pod-spis a { min-height: 48px; padding-block: 7px; padding-left: 12px; font-size: clamp(17px, calc(12.5 * var(--p)), 18px); line-height: 1.35; }   /* MIKS-12, poprawka 6: 12 px wcięcia zarezerwowane we wszystkich pozycjach (aktywna `.on` ma tę samą wartość: tekst nie przesuwa się, pole nie zwęża się, łamanie się nie zmienia). MIKS-7: boczny spis w skali tekstu artykułu (było 15 px, pozycja 44 px); długa nazwa łamie się na dwa wiersze, znacznik wybranej pozycji bez zmian */
  .pod-spis-link { display: none; }
  .pod-art .pod-powiazane a { font-size: 18.5px; }                 /* MIKS-9, poprawka 6: „Zobacz też” w skali tekstu artykułu (18–19 px na komputerze), pole 48 px i szerokość kolumny bez zmian */
  .pod-art { grid-column: 4 / span 8; }
  .pod-cialo-prosta .pod-art { grid-column: 1 / span 7; }          /* polityka: tekst od lewej krawędzi nagłówka, bez spisu treści obok */
  .pod-tabela { max-width: 66ch; }
}