/* ---------- Dokumenty publiczne (regulamin) ---------- */
/* Zrodlo: „Vistitio Regulamin.dc.html" (handoff 23). Siatka 220/680 z przerwa 56,
   spis po lewej przyklejony do gory, dokument po prawej.
   Skrot stoi NAD punktami i jest ochrowy, bo jest czescia regulaminu, a nie
   streszczeniem po fakcie — tak rysuje to makieta. */

/* Trzecia kolumna jest PUSTA i o to chodzi: bez niej środek strony wypada między spisem
   a dokumentem, więc sam dokument stoi wyraźnie z prawej i przy szerszym ekranie wygląda
   jak zepchnięty (zgłoszone z tabletu 28.09). Z pustą kolumną po prawej środek dokumentu
   pokrywa się ze środkiem strony, a spis dalej stoi przy jego lewej krawędzi.
   Makieta rysuje ten ekran na 1280 px, gdzie różnica jest ledwie widoczna — na szerszym
   ekranie rośnie razem z oknem. */
.dok {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 680px) minmax(0, 220px);
  gap: 56px;
  justify-content: center;
  align-items: start;
  padding: 56px 0 96px;
}

@media (max-width: 900px) {
  .dok { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 32px 0 64px; }
  /* Na wąskim ekranie pustej kolumny nie ma — spis wraca nad dokument. */
  .dok__spis { position: static; }

  /* Na telefonie spis tresci jest listą do KLIKANIA, nie kolumną do czytania —
     kazda pozycja musi miec 44 px celu dotyku (styleguide, „dostepnosc"). */
  .dok__spis-poz { min-height: 44px; align-items: center; }
}

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

.dok__spis {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  line-height: 1.4;
}

.dok__spis-tytul {
  font: 600 11px/1.2 var(--v-font-body);
  letter-spacing: var(--v-ls-eyebrow);
  text-transform: uppercase;
  color: var(--v-n-600);
  margin-bottom: 10px;
}

.dok__spis-poz {
  display: flex;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--v-n-700);
  text-decoration: none;
}

.dok__spis-poz:hover { background: var(--v-n-50); }

.dok__spis-nr {
  flex: none;
  width: 18px;
  color: var(--v-n-500);
  font-variant-numeric: tabular-nums;
}

/* Czas czytania i regula skrotu razem — w makiecie to jedna szara karta pod spisem. */
.dok__spis-nota {
  margin-top: 20px;
  padding: 14px;
  background: var(--v-n-50);
  border-radius: 12px;
  font-size: 12px;
  line-height: 18px;
  color: var(--v-n-600);
}

/* --- dokument --- */

.dok__tresc {
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-width: 0;
}

.dok__glowa {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dok__nadtytul {
  font: 600 12px/1.2 var(--v-font-body);
  letter-spacing: var(--v-ls-eyebrow);
  text-transform: uppercase;
  color: var(--v-n-600);
}

.dok__tytul {
  margin: 0;
  font: 600 44px/1.1 var(--v-font-display);
  letter-spacing: var(--v-ls-display);
  color: var(--v-primary);
}

.dok__lead {
  margin: 0;
  font-size: 17px;
  line-height: 26px;
  color: var(--v-n-700);
}

.dok__meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: baseline;
  font-size: 13px;
  color: var(--v-n-600);
}

.dok__meta a { color: var(--v-secondary-text); }

/* Cel dotyku min. 40 px bez zmiany wyglądu wiersza: wyściółka powiększa pole kliknięcia,
   ujemny margines oddaje miejsce (audyt mobile 10.10: „Wersje regulaminu” 111×21). */
.dok__meta a:not(.v-btn) {
  display: inline-block;
  padding: 10px 0;
  margin: -10px 0;
}

/* Wydruk otwiera przegladarka, wiec bez JavaScriptu tego przycisku nie pokazujemy —
   zostaje skrot Ctrl+P, ktory dziala tak samo. */
.bez-js .dok__druk { display: none; }

/* Przycisk-odnosnik w wierszu daty ma stac w linii, a nie rozpychac go do 40 px. */
.dok__meta .dok__druk { height: auto; color: var(--v-secondary-text); }

/* --- siedem rzeczy --- */

.dok__najwazniejsze {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--v-n-100);
  border-radius: var(--v-r-card);
  padding: 24px 28px;
}

.dok__najwazniejsze-tytul {
  margin: 0;
  font: 600 18px/1.3 var(--v-font-display);
  letter-spacing: -.01em; /* makieta */
  color: var(--v-primary);
}

.dok__lista {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 15px;
  line-height: 24px;
  color: var(--v-n-700);
}

/* --- sekcje --- */

.dok__sekcja {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 8px;
  border-top: 1px solid var(--v-n-100);
}

.dok__sekcja-glowa {
  display: flex;
  gap: 14px;
  align-items: baseline;
}

.dok__sekcja-nr {
  font: 600 14px/1.2 var(--v-font-display);
  color: var(--v-secondary-text);
  font-variant-numeric: tabular-nums;
}

.dok__sekcja-tytul {
  margin: 0;
  font: 600 26px/1.2 var(--v-font-display);
  letter-spacing: var(--v-ls-h3);
  color: var(--v-primary);
}

.dok__skrot {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--v-secondary-soft);
  border-radius: 12px;
  padding: 12px 16px;
}

.dok__skrot-etykieta {
  flex: none;
  margin-top: 3px; /* makieta */
  font: 600 11px/1.2 var(--v-font-body);
  letter-spacing: var(--v-ls-eyebrow);
  text-transform: uppercase;
  color: var(--v-warning-text);
}

.dok__skrot-tresc {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--v-warning-text);
}

.dok__punkty {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Fakty przy przewodniku — kwoty i terminy do sprawdzenia bez czytania całości.
   1:1 z „Vistitio Przewodniki” (handoff 41): szara karta, wiersz „klucz po lewej,
   pogrubiona wartość po prawej”, kreska pod każdym wierszem. Do audytu 2026-09-23
   te klasy NIE MIAŁY ŻADNEJ REGUŁY i klucz sklejał się z wartością w jedną linię.
   Kreska w makiecie to #E4E9F0 — najbliższy token to --v-n-100. */
.dok__fakty {
  background: var(--v-n-50);
  border-radius: 16px; /* makieta */
  padding: 6px 20px; /* makieta */
  margin-bottom: var(--v-s-6);
}

.dok__fakt {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 20px; /* makieta */
  padding: 12px 0; /* makieta */
  border-bottom: 1px solid var(--v-n-100);
}

.dok__fakt-klucz {
  font-size: 13.5px; /* makieta */
  color: var(--v-n-600);
}

.dok__fakt-wartosc {
  flex: 1;
  min-width: 160px; /* makieta */
  font-size: 13.5px; /* makieta */
  font-weight: 700;
  line-height: 1.45;
  text-align: right;
  color: var(--v-n-800);
}

.dok__punkt {
  display: flex;
  gap: 14px;
  font-size: 15px;
  line-height: 24px;
  color: var(--v-n-700);
}

.dok__punkt-nr {
  flex: none;
  width: 36px;
  color: var(--v-n-500);
  font-variant-numeric: tabular-nums;
}

/* --- wersje regulaminu (/regulamin/wersje) --- */
/* „Co się zmienia” pisze zespół w panelu (A14) zwykłym tekstem — akapity z edytora zostają
   akapitami (`pre-line`), bez wstawiania HTML-a z bazy. */
.dok__wersja-etykieta {
  font: 600 11px/1.2 var(--v-font-body);
  letter-spacing: var(--v-ls-eyebrow);
  text-transform: uppercase;
  color: var(--v-n-600);
}

.dok__wersja-tresc {
  margin: 0;
  font-size: 15px;
  line-height: 24px;
  color: var(--v-n-700);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

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

.dok__stopka {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--v-n-100);
  padding-top: 24px;
  font-size: 13px;
  line-height: 20px;
  color: var(--v-n-600);
}

.dok__stopka p { margin: 0; }

/* Wydruk: zostaje sam dokument — spis, nagłówek serwisu i stopka nic nie wnoszą na papierze. */
@media print {
  .dok { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .dok__spis,
  .dok__druk { display: none; }
  .dok__sekcja { break-inside: avoid; }
}

/* Raport przejrzystości (pozycja 68 rejestru). Jedna kolumna kart z wierszami
   „nazwa — liczba”: to jest zestawienie do przeczytania z góry na dół, nie pulpit. */
.przejrz {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-4);
  max-width: 720px;
  margin: 0 auto;
  padding: var(--v-s-8) 0 var(--v-s-12);
}

.przejrz__nadtytul {
  font: 700 11px/1 var(--v-font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--v-n-600);
}

.przejrz__tytul { margin: 0; font: 600 30px/1.2 var(--v-font-display); color: var(--v-n-900); }
.przejrz__lead { margin: 0; font: 400 16px/1.55 var(--v-font-body); color: var(--v-n-700); }
.przejrz__sekcja { margin: 0; font: 600 18px/1.3 var(--v-font-display); color: var(--v-n-900); }
.przejrz__tresc { margin: 0; font: 400 15px/1.55 var(--v-font-body); color: var(--v-n-700); }
.przejrz__karta { display: flex; flex-direction: column; gap: var(--v-s-3); }

.przejrz__wiersz {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--v-s-4);
  padding-bottom: var(--v-s-2);
  border-bottom: 1px solid var(--v-n-200);
  font: 400 15px/1.5 var(--v-font-body);
  color: var(--v-n-700);
}

.przejrz__wiersz:last-child { border-bottom: 0; padding-bottom: 0; }
.przejrz__wiersz strong { font: 600 20px/1 var(--v-font-display); color: var(--v-n-900); }

@media (max-width: 760px) {
  .przejrz { padding-top: var(--v-s-6); }
  .przejrz__tytul { font-size: 24px; }
}

/* Przycisk zwijania spisu. Na web spis stoi otwarty w lewej kolumnie i przycisk
   jest zbedny; w aplikacji spis jest zwiniety i to on go otwiera. */
.dok__spis-guzik { display: none; }

.jak-aplikacja .dok__spis-guzik { display: inline-flex; align-self: flex-start; }

/* Napis „SPIS” nalezy do kolumny na web — w aplikacji mowi to samo co przycisk. */
.jak-aplikacja .dok__spis-tytul { display: none; }

/* ---------- „Pełne zasady odznak” (handoff 60, sekcja „Zasady przyznawania”) ---------- */
.odzz { display: flex; flex-direction: column; gap: 18px; max-width: 1240px; margin: 0 auto; padding: 48px 0 96px; } /* makieta */
.odzz__glowa { display: flex; flex-direction: column; gap: 10px; max-width: 900px; margin-bottom: 38px; } /* makieta */
.odzz__nadtytul { font: 700 11px/1 var(--v-font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--v-secondary-text); }
.odzz__tytul { margin: 0; font: 600 40px/1.1 var(--v-font-display); letter-spacing: -.03em; color: var(--v-n-800); }
.odzz__lead { margin: 0; font: 400 15px/1.6 var(--v-font-body); color: var(--v-n-600); }
.odzz__sekcja { margin: 0; font: 600 22px/1.2 var(--v-font-display); letter-spacing: -.02em; color: var(--v-n-800); }

.odzz__tabela { background: var(--v-n-0); border: 1px solid var(--v-n-100); border-radius: 18px; overflow: hidden; }
.odzz__wiersz {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 110px 110px 110px 250px;
  gap: 16px;
  padding: 12px 20px;
  border-top: 1px solid var(--v-n-100);
  align-items: center;
  font-size: 13.5px;
  color: var(--v-n-800);
}
.odzz__wiersz--glowka {
  padding: 14px 20px; /* makieta */
  border-top: none;
  background: var(--v-n-50);
  font: 800 11.5px/1.2 var(--v-font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--v-n-600);
}
.odzz__nazwa { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.odzz__co { color: var(--v-n-700); }
.odzz__prog { font-weight: 700; }
.odzz__prog-poziom { display: none; }
.odzz__min { font-size: 12.5px; line-height: 1.4; color: var(--v-n-600); }
.odzz__stopka {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding: 18px 20px; /* makieta */
  border-top: 1px solid var(--v-n-100);
  background: var(--v-odz-stopka);
  font: 400 13px/1.5 var(--v-font-body);
  color: var(--v-n-700);
}

/* Telefon: tabela sześciu kolumn się nie mieści — każda odznaka to karta, progi w rzędzie
   z nazwą poziomu nad wartością. */
@media (max-width: 999px) {
  .odzz { padding: 24px 0 64px; }
  .odzz__glowa { margin-bottom: 8px; }
  .odzz__tytul { font-size: 28px; }
  .odzz__wiersz--glowka { display: none; }
  .odzz__wiersz { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; padding: 16px; }
  .odzz__wiersz:nth-child(2) { border-top: none; }
  .odzz__nazwa, .odzz__co, .odzz__min { grid-column: 1 / -1; }
  .odzz__prog { display: flex; flex-direction: column; gap: 2px; }
  .odzz__prog-poziom { display: block; font: 800 11px/1.2 var(--v-font-body); letter-spacing: .06em; text-transform: uppercase; }
  .odzz__stopka { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* Nota „Co zmienia wersja X” (11.10): etykieta jest długa, więc stoi NAD tekstem, a nie obok —
   obok zabierała na telefonie połowę szerokości i tekst szedł wąskim słupkiem. */
.dok__skrot--zmiany { flex-direction: column; gap: 6px; }
.dok__skrot--zmiany .dok__skrot-etykieta { margin-top: 0; }

/* Spis na wąskim ekranie stoi nad dokumentem, BEZ przyklejenia. Reguła z początku pliku
   (`@media (max-width: 900px)`) przegrywała z późniejszą `.dok__spis { position: sticky }`
   (ta sama specyficzność, wygrywa późniejsza) i spis jechał z ekranem, leżąc na tekście (11.10). */
@media (max-width: 900px) {
  .dok__spis { position: static; }
}