/* ─────────────────────────────────────────────────────────────────────────
   Strony dokumentów (polityka prywatności, regulamin): ta sama warstwa co
   landing v2 (styles.css ładowany wcześniej: tokeny, font Instrument,
   nagłówek, przyciski, stopka). Tu tylko to, czego landing nie ma: nagłówek
   dokumentu, spis treści przy lewej krawędzi i sam dokument na papierze.
   Design read: strona do czytania dla ucznia i rodzica, ton spokojny;
   VARIANCE 5, MOTION 2, DENSITY 4. Jeden akcent, jeden eyebrow (nagłówek).
   ───────────────────────────────────────────────────────────────────────── */

/* ── Nagłówek dokumentu: wyrównany do lewej jak hero, bez fotografii ── */
/* Nagłówek trzyma lewą krawędź siatki (jak hero landingu); szerokość ogranicza tylko treść. */
.doc-hero{padding-block:clamp(28px,5vw,64px) clamp(28px,4vw,44px)}
.doc-hero>*{max-width:760px}
.doc-hero h1{font-size:clamp(38px,5vw,62px);line-height:1.04;letter-spacing:-.045em}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .doc-hero h1 .accent{background:linear-gradient(95deg,var(--accent) 20%,var(--accent-sky) 95%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--accent);padding-block:.1em;margin-block:-.1em}
}
.doc-hero .lead{margin-top:22px}
/* Metryka: trzy fakty w jednym rzędzie, etykieta nad wartością, bez karty. */
.doc-meta{display:flex;flex-wrap:wrap;gap:18px 40px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.doc-meta div{display:flex;flex-direction:column;gap:4px;min-width:0}
.doc-meta dt{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.01em}
.doc-meta dd{font-size:16px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.doc-meta a{color:var(--accent-deep);text-decoration:none;border-bottom:1.5px solid transparent;transition:border-color .2s}
.doc-meta a:hover{border-bottom-color:currentColor}

/* ── Układ: spis treści po lewej (przyklejony), dokument po prawej ── */
.doc-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start;padding-bottom:clamp(56px,7vw,96px)}
.doc-aside{position:sticky;top:96px;display:grid;gap:18px}
.toc{border-left:1.5px solid var(--line);padding-left:4px}
.toc summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.01em;padding:8px 12px;pointer-events:none}
.toc summary .expand{display:none}
.toc ol{list-style:none;padding:0;margin:4px 0 0;display:grid;gap:2px;counter-reset:toc}
.toc a{display:flex;align-items:baseline;gap:10px;min-height:44px;padding:10px 12px;margin-left:-5.5px;border-left:1.5px solid transparent;border-radius:0 var(--r-small) var(--r-small) 0;font-size:15px;line-height:1.4;text-decoration:none;color:var(--muted);transition:color .2s,background-color .2s,border-color .2s;text-wrap:pretty}
.toc a::before{counter-increment:toc;content:counter(toc,decimal-leading-zero);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--accent);flex-shrink:0;width:20px}
.toc a:hover{color:var(--ink);background:var(--accent-soft)}
.toc a[aria-current=true]{color:var(--accent-deep);font-weight:600;border-left-color:var(--accent)}
/* Drugi dokument: jedno wejście pod spisem, w tym samym rytmie co linki tekstowe landingu. */
.doc-aside .text-link{margin-left:16px}

/* ── Dokument na papierze: jedna karta, sekcje oddzielone linią ── */
.doc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-soft);padding:clamp(6px,1.5vw,14px) clamp(22px,3.5vw,48px)}
.doc section{padding-block:clamp(26px,3vw,36px);border-top:1px solid var(--line);scroll-margin-top:100px}
.doc section:first-child{border-top:0}
.doc h2{font-size:clamp(21px,2vw,25px);line-height:1.25;letter-spacing:-.02em;font-weight:600;margin-bottom:14px;display:flex;gap:14px;align-items:baseline}
/* Paragrafy regulaminu mają własne „§n” w treści; polityka dostaje numer z licznika. */
.doc--numerowany{counter-reset:sekcja}
.doc--numerowany h2::before{counter-increment:sekcja;content:counter(sekcja,decimal-leading-zero);font-size:13px;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums;flex-shrink:0}
.doc p,.doc li{font-size:17px;line-height:1.65;color:var(--ink);text-wrap:pretty}
.doc p+p,.doc p+ol,.doc p+ul{margin-top:12px}
.doc a{color:var(--accent-deep);text-decoration:none;border-bottom:1.5px solid rgba(var(--accent-rgb),.35);transition:border-color .2s}
.doc a:hover{border-bottom-color:currentColor}
.doc strong{font-weight:600}
/* Listy: numer w akcencie, wcięcie treści równe szerokości numeru. */
.doc ol{list-style:none;padding:0;counter-reset:pkt;display:grid;gap:10px}
/* Numer pozycjonowany absolutnie, nie w siatce: w siatce każdy węzeł tekstowy
   i link w punkcie stawał się osobną komórką (odnośnik e-mail lądował w kolumnie numeru). */
.doc ol>li{counter-increment:pkt;position:relative;padding-left:36px}
.doc ol>li::before{content:counter(pkt) ".";position:absolute;left:0;top:0;font-weight:600;color:var(--accent-deep);font-variant-numeric:tabular-nums}
.doc ul{list-style:none;padding:0;display:grid;gap:8px}
.doc ul>li{position:relative;padding-left:22px}
.doc ul>li::before{content:'';position:absolute;left:4px;top:.72em;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.doc ol>li>ul{margin-top:10px}
.doc ol ul>li{font-size:16px}
/* „W skrócie”: jedyne kolorowe pole w dokumencie, ten sam miętowy ton co pas liczb na landingu. */
.doc .skrot{background:var(--mint);border-radius:var(--r-small);padding:22px 24px;margin-top:6px}
.doc .skrot li::before{background:var(--accent-deep)}
.doc .data-koncowa{font-size:16px;color:var(--muted)}

/* ── Pytania: jeden pas na końcu, bez karty ── */
.doc-contact{border-top:1px solid var(--line);padding-block:clamp(40px,5vw,64px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}
.doc-contact h2{font-size:clamp(26px,3vw,36px)}
.doc-contact p{color:var(--muted);margin-top:10px;max-width:48ch;font-size:17px}

/* ── Szerokości ── */
@media(max-width:900px){
  .doc-layout{grid-template-columns:1fr;gap:20px}
  .doc-aside{position:static;gap:14px}
  .toc{border-left:0;padding-left:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-small);box-shadow:var(--shadow-soft)}
  .toc summary{pointer-events:auto;cursor:pointer;padding:14px 16px;font-size:15px;color:var(--ink);min-height:48px}
  .toc summary .expand{display:inline;font-size:22px;font-weight:400;line-height:1;color:var(--muted);transition:transform .25s}
  .toc[open] summary .expand{transform:rotate(45deg);color:var(--accent)}
  .toc ol{margin:0;padding:4px 8px 10px}
  .toc a{margin-left:0;border-left:0;border-radius:var(--r-small)}
  .toc a[aria-current=true]{background:var(--accent-soft)}
  .doc-aside .text-link{margin-left:4px}
}
@media(max-width:600px){
  .doc-hero h1{font-size:clamp(34px,10vw,44px)}
  .doc-meta{gap:14px 28px}
  .doc{padding-inline:18px;border-radius:16px}
  .doc h2{gap:10px}
  .doc p,.doc li{font-size:16px}
  .doc ol>li{padding-left:30px}
  .doc-contact .button{width:100%}
}
@media(prefers-reduced-motion:reduce){.toc summary .expand{transition:none}}

/* ── Druk: sam dokument, bez nawigacji i cieni ── */
@media print{
  body::before,body::after,.site-header,.doc-aside,.doc-contact,.site-footer,.skip-link{display:none!important}
  body{background:#fff;color:#000}
  .doc-layout{display:block;padding:0}
  .doc{border:0;box-shadow:none;padding:0}
  .doc section{page-break-inside:avoid}
  .doc a{border-bottom:0;color:inherit}
}