/* legal-b-biel.css — WARIANT B — białe tło, ten sam układ.
   PLIK GENEROWANY przez docs/prawne/podglad/build.mjs = tokeny wariantu (ten :root)
   + wspólny układ z uklad.css. Nie edytuj ręcznie: układ → uklad.css, kolory wariantu →
   VARIANTS w build.mjs. Przy wdrożeniu wybrany plik zastępuje public/css/legal.css. */
:root {
  --bg: #fff;
  --pattern: none;
  --pattern-size: auto;
  --line: rgba(184, 21, 95, .16);
  --box-bg: #fce9f3;                                   /* --pink-soft landingu */
  --paper: #fff;
  --paper-line: rgba(23, 23, 23, .2);
}

/* WSPÓLNY UKŁAD podstron prawnych (regulamin, polityka prywatności) — PODGLĄD 2026-11-08.
   To jest ŹRÓDŁO: build.mjs skleja legal-a-roz.css i legal-b-biel.css z tokenów
   wariantu (VARIANTS w build.mjs: tło, kropki, linie, ramki) + tego pliku. Oba warianty
   mają więc IDENTYCZNY układ — różnią się tylko tłem. Po zmianie tutaj uruchom
   `node docs/prawne/podglad/build.mjs`.
   Wzorzec: docs/prawne/2026-11-08-handoff-dokumenty-prawne.md §5 (kontener 840 px,
   H1 48 px z markerem, wstęp 17 px / 84 % / 615 px, nagłówek sekcji 20,5 px).
   CSP landinga: zero JS i zero inline styli — wszystko tutaj. */

:root {
  --ink: #171717;                  /* tytuły, pogrubienia, tekst główny */
  --text: #171717;
  --lead: rgba(23, 23, 23, .84);   /* wstęp: kolor tekstu z 84 % krycia */
  --muted: #5f5f5f;                /* drobny szary tekst (pasek, „1)”, uwagi) — ≥ 4,5:1 na obu tłach */
  --accent: #e5197e;               /* TYLKO duże elementy: numer sekcji, kropka, kwadraty (3,7:1 na różu) */
  --accent-text: #b8155f;          /* MAŁY tekst w kolorze akcentu: numery punktów 1.1. (≥ 4,5:1) */
  --marker: #ffd400;               /* podkreślenie H1 — ten sam żółty co „OSZCZĘDZASZ”/„POLECANY” */
  --todo: #ffd400;                 /* tło brakujących danych [ … ] */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
h1, h2, h3, p, ul, ol, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

body {
  margin: 0;
  background-color: var(--bg);
  background-image: var(--pattern);
  background-size: var(--pattern-size);
  color: var(--text);
  font-family: 'Inter', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

strong { font-weight: 700; color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 2px; }

/* ---------- Pasek u góry: „← STRONA GŁÓWNA” ---------- */
.topbar { border-bottom: 1px solid var(--line); }
.topbar-in { max-width: 840px; margin: 0 auto; padding: 0 32px; }
.home {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;                /* cel dotyku */
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.home:hover { color: var(--ink); }

/* ---------- Kontener: 840 px, padding 64/32/40 → treść 776 px ---------- */
.doc { max-width: 840px; margin: 0 auto; padding: 64px 32px 40px; --gutter: 3.15em; }
/* Wiszące wcięcie punktu = najszerszy numer w dokumencie + ok. 11 px. Klasę pt-wN (numer
   szeroki jak N cyfr) daje build.mjs. Inter 700 / 16 px: „1.1.” 29 px, „2.10.” 40 px, „10.11.” 50 px. */
.doc.pt-w2 { --gutter: 2.5em; }
.doc.pt-w3 { --gutter: 3.15em; }
.doc.pt-w4 { --gutter: 3.8em; }
.doc.pt-w5 { --gutter: 4.45em; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

h1 {
  margin-top: 14px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 48px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}
/* Marker: żółty pas pod dolną połową liter, także w drugiej linii tytułu. */
.marker {
  background-image: linear-gradient(transparent 52%, var(--marker) 52%, var(--marker) 84%, transparent 84%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 .06em;
}

.effective { margin-top: 22px; }
.lead { margin-top: 16px; max-width: 615px; font-size: 17px; line-height: 1.65; color: var(--lead); }
.lead + .lead { margin-top: 12px; }

/* ---------- Ramka „Najważniejsze w skrócie” (jak „Co zawiera pakiet” na landingu) ---------- */
.summary { margin-top: 36px; }
.summary-title {
  padding: 8px 16px;
  border-radius: 8px 8px 0 0;
  background: var(--marker);
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.4;
  color: var(--ink);
}
.summary-body { padding: 18px 20px; border-radius: 0 0 8px 8px; background: var(--box-bg); }

/* ---------- Spis treści ---------- */
.toc { margin-top: 40px; padding: 18px 0 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.toc-title {
  margin-bottom: 8px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--ink);
}
.toc-list { columns: 2; column-gap: 40px; }
.toc-list li { break-inside: avoid; }
.toc-list a {
  display: flex;
  gap: .4em;
  padding: 4px 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  text-decoration: none;
}
.toc-list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.toc-num { flex: none; min-width: 1.6em; font-weight: 700; color: var(--accent-text); font-variant-numeric: tabular-nums; }

/* ---------- Sekcje ---------- */
.sec { margin-top: 48px; }
.sec h2 {
  display: flex;
  align-items: baseline;
  gap: .45em;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 20.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  scroll-margin-top: 24px;
}
.sec-num { flex: none; color: var(--accent); font-variant-numeric: tabular-nums; }
.sec h3 {
  margin: 28px 0 12px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}

.sec p, .summary p, .items, .quote { margin-bottom: 14px; }
.sec > :last-child, .summary-body > :last-child { margin-bottom: 0; }

/* Punkt „N.M.” = osobny akapit z numerem w wiszącym wcięciu. */
.pt { position: relative; padding-left: var(--gutter); scroll-margin-top: 24px; }
.pt-num {
  position: absolute;
  top: 0;
  left: 0;
  font-weight: 700;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
/* Listy i akapity bez numeru po punkcie należą do niego — wyrównane do tekstu punktu. */
.in-pt { margin-left: var(--gutter); }
.pt + .items { margin-top: -6px; }

/* Listy: „- ” → małe kwadraty w kolorze akcentu; „1) ” → szare „1)”. */
.items > li { position: relative; margin-bottom: 6px; }
.items > li:last-child { margin-bottom: 0; }
ul.items > li { padding-left: 22px; }
ul.items > li::before {
  content: "";
  position: absolute;
  top: .78em;
  left: 3px;
  width: 0;
  height: 0;
  border: 3px solid var(--accent);  /* ramka, nie tło — drukuje się bez „grafiki tła” */
}
ol.items > li { padding-left: 2em; }
.li-num { position: absolute; top: 0; left: 0; color: var(--muted); font-variant-numeric: tabular-nums; }

.quote { padding: 2px 0 2px 16px; border-left: 3px solid var(--line); color: var(--lead); }

/* Brakujące dane: [ … ] na żółtym tle — widać od razu, co trzeba uzupełnić. */
mark.todo {
  padding: 0 .2em;
  border-radius: 3px;
  background: var(--todo);
  color: var(--ink);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- Załącznik: formularz w ramce, każda linia w osobnym wierszu ---------- */
.form {
  margin-bottom: 14px;
  padding: 26px 28px 24px;
  border: 1px solid var(--paper-line);
  border-radius: 8px;
  background: var(--paper);
}
.form .form-row { margin-bottom: 18px; }
.form .form-row.fill::after {      /* linia do wpisania (formularz da się wydrukować i wypełnić) */
  content: "";
  display: block;
  height: 1.55em;
  border-bottom: 1px dotted rgba(23, 23, 23, .5);
}
.form .form-note { margin-bottom: 18px; font-size: 15px; color: var(--muted); }
.form > :last-child { margin-bottom: 0; }

/* ---------- Telefon ---------- */
@media (max-width: 640px) {
  .topbar-in { padding: 0 16px; }
  .doc { padding: 32px 16px 40px; }
  h1 { margin-top: 12px; font-size: 32px; line-height: 1.2; }
  .effective { margin-top: 18px; }
  .summary { margin-top: 28px; }
  .summary-title { font-size: 16px; }
  .summary-body { padding: 16px; }
  .toc { margin-top: 32px; }
  .toc-list { columns: 1; }
  .toc-list a { padding: 6px 0; font-size: 16px; }
  .sec { margin-top: 40px; }
  .sec h2 { font-size: 20px; }
  ul.items > li { padding-left: 20px; }
  ol.items > li { padding-left: 1.75em; }
  .form { padding: 20px 16px 18px; }
  .form .form-note { font-size: 16px; }
}

/* ---------- Druk: bez tła, czarny tekst, bez nawigacji ---------- */
@media print {
  @page { margin: 16mm 15mm; }
  body { background: #fff; color: #000; font-size: 10.5pt; line-height: 1.5; }
  .topbar, .toc, .eyebrow { display: none; }
  .doc { max-width: none; padding: 0; }
  h1 { margin-top: 0; font-size: 20pt; color: #000; }
  .marker { background: none; padding: 0; }
  strong, .sec h2, .sec h3, .summary-title { color: #000; }
  .lead { max-width: none; font-size: 11pt; color: #000; }
  .sec { margin-top: 16pt; }
  .sec h2 { margin-bottom: 8pt; padding-bottom: 4pt; border-bottom-color: #999; font-size: 13pt; break-after: avoid; page-break-after: avoid; }
  .sec-num, .pt-num, .li-num { color: #000; }
  .sec p, .items > li { orphans: 3; widows: 3; }
  .pt { break-inside: avoid; }
  ul.items > li::before { border-color: #000; }
  .summary-title { background: none; border: 1px solid #000; border-bottom: 0; }
  .summary-body { background: none; border: 1px solid #000; }
  .form { border-color: #000; background: none; break-inside: avoid; }
  .form .form-note { color: #000; }
  mark.todo { background: none; color: #000; outline: 1px dashed #000; }
}

code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; overflow-wrap: anywhere; }