/* ============================================================
   DOKUMENT — warstwa dla tekstow prawnych (polityka prywatnosci,
   w przyszlosci regulamin i umowa powierzenia).

   Prefiks klas: dk-. Warstwa wspolna (--zmienne, .shell, .masthead,
   .foot, .mark, .btn, .link) przychodzi ze style.css i NIE jest tu
   powtarzana.

   Tryb: READ. Sukcesem jest zrozumienie, nie wrazenie. Dlatego:

   - Miara wiersza stoi na 68 znakach. Tekst prawny czyta sie inaczej niz
     landing: wraca sie do zdania, ktore juz raz przeczytalo. Dluzszy wiersz
     gubi powrot do poczatku nastepnego.
   - Numeracja idzie z licznikow CSS, nie z recznie wpisanych cyfr. Kazde
     dopisanie sekcji do dokumentu, ktory ma powolania wewnetrzne, jest
     inaczej okazja do rozjechania numeracji z trescia.
   - Numer stoi NA MARGINESIE, nie w linii naglowka. Naglowki ustawiaja sie
     wtedy w jedna kolumne z tekstem, a numery tworza druga — te sama
     notacje na marginesie, co reszta SKALI.
   - Zero koloru takze tu: stan i waznosc niesie ramka, tlo i krój, nigdy hue
     (Zero-Hue Rule z DESIGN.md).

   Wydruk ma wlasny blok na koncu pliku. Polityke prywatnosci sie drukuje —
   to jedyny dokument na tej stronie, o ktorym da sie to powiedziec z gory. */

/* ---------- kolumna dokumentu ---------- */

.dk-wrap {
  padding: clamp(28px, 5vw, 64px) 0 clamp(64px, 9vw, 120px);
}

/* Siatka: spis tresci i tekst. Przy waskim oknie spis wraca nad tekst
   zwyklym porzadkiem zrodla — dlatego w HTML stoi PRZED dokumentem. */
.dk-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 48px);
}

@media (min-width: 62rem) {
  .dk-layout {
    grid-template-columns: 15rem minmax(0, 1fr);
    align-items: start;
  }
}

/* ---------- naglowek dokumentu ---------- */

.dk-head {
  border-bottom: 1px solid var(--ink);
  padding-bottom: clamp(20px, 3vw, 32px);
  margin-bottom: clamp(28px, 4vw, 44px);
}

.dk-head__kicker {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
}

.dk-head__title {
  margin: 0;
  font-size: var(--fs-h2);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--ink);
  max-width: 20ch;
}

.dk-head__lead {
  margin: 20px 0 0;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--graphite);
  max-width: 62ch;
}

/* Metryka dokumentu — wersja i data. Tabela dwukolumnowa, bo to sa pary
   klucz-wartosc, a nie zdanie. */
.dk-meta {
  margin: 26px 0 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 18px;
  font-family: var(--mono);
  font-size: var(--fs-tiny);
  line-height: 1.5;
}

.dk-meta dt {
  color: var(--ash);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dk-meta dd {
  margin: 0;
  color: var(--graphite);
}

/* ---------- spis tresci ---------- */

.dk-toc {
  font-size: var(--fs-mini);
  line-height: 1.45;
}

@media (min-width: 62rem) {
  .dk-toc {
    position: sticky;
    top: 88px;                 /* 68px paska + oddech */
    max-height: calc(100vh - 108px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.dk-toc__title {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 400;
}

.dk-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: dk-toc;
  border-top: 1px solid var(--line);
}

.dk-toc__list li {
  counter-increment: dk-toc;
  border-bottom: 1px solid var(--line);
}

.dk-toc__list a {
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  gap: 4px;
  padding: 9px 0;
  text-decoration: none;
  color: var(--graphite);
  transition: color 0.18s var(--e);
}

/* Numer w spisie liczy sie tym samym licznikiem co sekcje, wiec nie da sie
   ich rozjechac przez dopisanie pozycji tylko w jednym miejscu. */
.dk-toc__list a::before {
  content: counter(dk-toc) ".";
  font-family: var(--mono);
  font-size: var(--fs-micro);
  color: var(--ash);
  padding-top: 0.15em;
}

.dk-toc__list a:hover { color: var(--ink); }
.dk-toc__list a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ---------- korpus dokumentu ---------- */

/* Dwie miary, nie jedna. Tekst czyta sie w 68 znakach, ale TABELA to nie
   tekst — ma kolumny, ktore przy tej samej szerokosci zwezaja sie do dwoch
   slow w wierszu i przestaje sie dac ja przeczytac w poziomie (sprawdzone
   w przegladarce 01.08.2026: kolumna "co dostaje" lamala sie na sześć linii).
   Dlatego miare wiersza dostaja elementy tekstowe, a nie kontener; tabela
   bierze cala kolumne dokumentu. */
.dk-doc {
  counter-reset: dk-sec;
  max-width: 58rem;
  font-size: var(--fs-base);
  line-height: 1.62;
  color: var(--ink-soft);
}

.dk-doc p,
.dk-doc ul,
.dk-doc ol,
.dk-doc h3,
.dk-sec__h,
.dk-note { max-width: 62ch; }   /* 62ch daje ~72 znaki w tym kroju, nie 62 */

.dk-sec {
  counter-increment: dk-sec;
  padding-top: clamp(30px, 4vw, 46px);
}

.dk-sec + .dk-sec { border-top: 1px solid var(--line); }

/* Kotwica z paska przyklejonego u gory nie moze wjechac pod pasek. */
.dk-sec > :target,
.dk-sec:target { scroll-margin-top: 92px; }

.dk-sec__h {
  position: relative;
  margin: 0 0 18px;
  font-size: var(--fs-title-lg);
  line-height: 1.18;
  letter-spacing: -0.015em;
  font-weight: 700;
  color: var(--ink);
  scroll-margin-top: 92px;
}

.dk-sec__h::before {
  content: counter(dk-sec) ".";
  font-family: var(--mono);
  font-size: var(--fs-tiny);
  font-weight: 400;
  color: var(--ash);
  letter-spacing: 0;
  display: block;
  margin-bottom: 6px;
}

/* Numer NIE wychodzi na margines i to jest decyzja, nie brak.
   Wysuniecie sprawdzone w przegladarce 01.08.2026: po lewej stronie tekstu
   stoi spis tresci, ktory ma WLASNA numeracje, wiec numer sekcji ladowal
   w rynnie miedzy dwiema kolumnami cyfr i czytal sie jako czesc spisu.
   Numer nad naglowkiem nie koliduje w zadnej szerokosci. */

.dk-doc h3 {
  margin: 30px 0 12px;
  font-size: var(--fs-sub);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.dk-doc p { margin: 0 0 14px; }
.dk-doc p:last-child { margin-bottom: 0; }

.dk-doc ul,
.dk-doc ol {
  margin: 0 0 16px;
  padding-left: 1.35em;
}

.dk-doc li { margin-bottom: 7px; }
.dk-doc li:last-child { margin-bottom: 0; }

.dk-doc strong { font-weight: 700; color: var(--ink); }

.dk-doc a { color: var(--ink); text-underline-offset: 3px; }
.dk-doc a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Adresy i identyfikatory — NIP, adres, e-mail — ida monospacem, bo czyta
   sie je znak po znaku, a nie slowami. */
.dk-doc .dk-id {
  font-family: var(--mono);
  font-size: 0.92em;
  letter-spacing: 0.01em;
}

/* ---------- tabela ---------- */

/* Tabele w dokumencie prawnym niosa okresy przechowywania i podstawy —
   czyli dokladnie to, po co ktos tu przychodzi. Musza dac sie przewinac
   w poziomie SAME, nie razem ze strona. */
.dk-tablebox {
  margin: 0 0 18px;
  overflow-x: auto;
  border: 1px solid var(--line);
}

.dk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-mini);
  line-height: 1.45;
  min-width: 30rem;
}

.dk-table th,
.dk-table td {
  text-align: left;
  vertical-align: top;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

.dk-table thead th {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--slate);
  background: var(--paper-hi);
  border-bottom: 1px solid var(--fog);
  position: sticky;
  top: 0;
}

.dk-table tbody tr:last-child th,
.dk-table tbody tr:last-child td { border-bottom: 0; }

.dk-table tbody th {
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

/* ---------- wyrozniona uwaga ---------- */

/* Bez tla i bez koloru: lewa krawedz w tuszu i wciecie. To wystarcza,
   zeby oko zlapalo blok jako inny, i nie robi z niego ostrzezenia. */
.dk-note {
  margin: 0 0 18px;
  padding: 2px 0 2px 18px;
  border-left: 2px solid var(--ink);
  font-size: var(--fs-sub);
}

.dk-note > :last-child { margin-bottom: 0; }

/* ---------- stopka dokumentu ---------- */

.dk-tail {
  margin-top: clamp(40px, 6vw, 68px);
  padding-top: 22px;
  border-top: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: var(--slate);
  letter-spacing: 0.04em;
  max-width: 62ch;
}

/* ---------- wydruk ---------- */

@media print {
  .masthead,
  .foot,
  .dk-toc,
  .skip { display: none; }

  .dk-wrap { padding: 0; }
  .dk-layout { display: block; }
  .dk-doc { max-width: none; font-size: 10.5pt; line-height: 1.45; }
  .dk-head { margin-bottom: 24px; }

  /* Naglowek sekcji nie ma prawa zostac sam na dole kartki. */
  .dk-sec { break-inside: auto; padding-top: 20px; }
  .dk-sec__h { break-after: avoid; }
  .dk-doc h3 { break-after: avoid; }
  .dk-tablebox, .dk-note { break-inside: avoid; }

  /* Na papierze adres docelowy linku znika razem z mozliwoscia kliknięcia. */
  .dk-doc a::after {
    content: " (" attr(href) ")";
    font-family: var(--mono);
    font-size: 0.85em;
    color: var(--slate);
  }
  .dk-doc a[href^="#"]::after { content: ""; }
}

/* Znacznik przy wierszu tabeli: rzecz, ktora rozni sie od reszty kolumny
   (odrebny administrator, odbiorca jeszcze nieistniejacy). Kreska mono
   w ramce wlosowej, ta sama notacja co .ap-flag w panelu — roznica idzie
   krojem i gestoscia, nigdy kolorem (Zero-Hue Rule). Wchodzi 05.09.2026
   razem z wersja 1.3: bez niego wiersz "Biuro rachunkowe" wygladalby na
   odbiorce, ktory juz dane dostaje, a takiego biura jeszcze nie ma. */
.dk-flag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid var(--fog);
  font-family: var(--mono);
  font-size: 0.72em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--slate);
  white-space: nowrap;
  vertical-align: 2px;
}

/* ---------- przepelnienie w poziomie na telefonie (poprawka 05.09.2026) ----

   Do tego dnia POLITYKA, REGULAMIN I UMOWA przewijaly sie w bok na kazdym
   telefonie: przy oknie 390 px dokument mial 814 px szerokosci. Znalezione
   proba w przegladarce, nie okiem — na oko wyglada to jak zwykly margines.

   Przyczyna: .dk-layout jest siatka, a element siatki ma domyslnie
   `min-width: auto`, czyli NIE DA sie go scisnac ponizej wlasnej zawartosci.
   Najszersza zawartoscia jest tabela z okresami przechowywania (min-width
   30rem plus obrys), wiec jedyna kolumna siatki rozpychala sie do jej
   szerokosci — a razem z nia spis tresci, ktory z tabela nie ma nic wspolnego
   i przez to wystawal najbardziej.

   `min-width: 0` przywraca elementom siatki prawo do zwezenia. Tabela dalej
   ma swoje 30rem, tylko przewija sie SAMA, wewnatrz .dk-tablebox, tak jak
   zaplanowano — a strona przestaje jechac w bok.

   Ta sama poprawka dotyczy wszystkich trzech dokumentow, bo wszystkie trzy
   stoja na tej samej siatce. */
.dk-layout > * { min-width: 0; }