/* ══════════════════════════════════════════════════════════════════════
   madd-dokument.css — strony dokumentów prawnych w systemie 2026 (02.10.2026)

   Ładowany PO madd-2026.css, tylko na stronach z <body class="pg-doc">
   (regulamin, prywatność, cookies, DPA, podprocesorzy, strony EN, v9 ...).
   Wszystko jest zawężone do .pg-doc - globalnych reguł 2026 nie ruszamy.
   Kolory wyłącznie z tokenów 2026, więc ciemny motyw (html[data-wh-theme=dark])
   działa sam. Składanie stron: dokumenty/_powloka.py.

   Treść dokumentów jest nietykalna (bajt w bajt z generatorów), więc wygląd
   dostaje ją wyłącznie przez klasy, które już ma: .prose, .doc-meta, .doc-note,
   .table-scroll, .doc-cards, .ramka-v9, .diff-* - oraz aliasy starych tokenów
   dla styli inline w treści EN i w ramkach zapowiedzi.
   ══════════════════════════════════════════════════════════════════════ */

.pg-doc{
  /* aliasy tokenów madd-min (style inline w treści: var(--border), var(--surface-2) ...) */
  --text:var(--fg); --text-2:var(--fg-2); --text-3:var(--fg-3);
  --border:var(--line); --border-2:var(--line-2);
  --surface:var(--bg); --surface-2:var(--bg-2); --bg-soft:var(--bg-2);
  --brand:var(--accent);
  --doc-w:46rem;                       /* ~70 znaków w kolumnie treści */
  --doc-scroll:calc(var(--nav-h) + 20px);
}

/* jedna kolumna dla nagłówka i treści - wyśrodkowana, wyrównana do lewej */
.pg-doc main > section > .container{ max-width:calc(var(--doc-w) + 56px) }

/* ── nagłówek dokumentu ─────────────────────────────────────────────── */
.pg-doc .doc-hero{ padding-bottom:clamp(28px,4vw,48px) }
.pg-doc .doc-hero h1{
  font-size:clamp(2.1rem,4.4vw,3.35rem); line-height:1.06; letter-spacing:-.02em;
  margin-top:16px; max-width:20ch;
}
.pg-doc .doc-hero .lead{ margin-top:18px; max-width:58ch }
.pg-doc .doc-hero-meta{
  display:flex; align-items:center; gap:10px; margin-top:22px;
  font-size:.875rem; color:var(--fg-3); font-variant-numeric:tabular-nums;
}
.pg-doc .doc-hero-meta::before{ content:""; flex:none; width:18px; height:1px; background:var(--line-2) }
.pg-doc .doc-hero-meta + .doc-hero-meta{ margin-top:6px }
.pg-doc .doc-lang{ margin-top:16px }
.pg-doc .doc-lang a{
  display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:6px 16px 6px 12px;
  border:1px solid var(--line-2); border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  font-size:.875rem; font-weight:500; line-height:1.3; color:var(--fg-2);
  transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.pg-doc .doc-lang a::before{
  content:""; flex:none; width:15px; height:15px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pg-doc .doc-lang a:hover{ color:var(--fg); border-color:var(--fg); background:var(--bg) }

/* ── sekcja treści ──────────────────────────────────────────────────── */
.pg-doc main > .section{ padding:clamp(8px,1.6vw,20px) 0 clamp(72px,9vw,120px) }

.pg-doc .prose{
  max-width:none; font-size:1.0625rem; line-height:1.72; color:var(--fg-2);
  overflow-wrap:break-word;
}
.pg-doc .prose > :first-child{ margin-top:0 }
.pg-doc .prose p{ margin:0 0 1em }
.pg-doc .prose p + p{ margin-top:0 }
.pg-doc .prose h2{
  font-family:var(--display); font-weight:400; color:var(--fg);
  font-size:clamp(1.45rem,2.3vw,1.8rem); line-height:1.2; letter-spacing:-.015em;
  margin:2.1em 0 .65em; padding-top:.2em; text-wrap:balance;
}
.pg-doc .prose h3{
  font-family:var(--display); font-weight:400; color:var(--fg);
  font-size:1.25rem; line-height:1.3; letter-spacing:-.01em;
  margin:1.6em 0 .5em; text-wrap:balance;
}
.pg-doc .prose h2 + h3{ margin-top:.9em }
.pg-doc .prose :is(h2,h3,h4,[id]){ scroll-margin-top:var(--doc-scroll) }
.pg-doc .prose ul, .pg-doc .prose ol{ margin:0 0 1.15em; padding-left:1.4em }
.pg-doc .prose ul{ list-style:disc }
.pg-doc .prose ol{ list-style:decimal }
.pg-doc .prose li{ margin:.4em 0; padding-left:.25em }
.pg-doc .prose li::marker{ color:var(--fg-3) }
.pg-doc .prose ol > li::marker{ font-variant-numeric:tabular-nums }
.pg-doc .prose li > ul, .pg-doc .prose li > ol{ margin:.4em 0 .2em }
.pg-doc .prose strong, .pg-doc .prose b{ color:var(--fg); font-weight:600 }
.pg-doc .prose em{ font-style:italic }
.pg-doc .prose sup{ font-size:.72em; line-height:0 }
.pg-doc .prose a{
  color:var(--accent); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb, var(--accent) 45%, transparent);
  transition:text-decoration-color .2s var(--ease);
}
.pg-doc .prose a:hover{ text-decoration-color:currentColor }
.pg-doc .prose a strong, .pg-doc .prose a b{ color:inherit }
.pg-doc .prose code{
  font-family:var(--mono); font-size:.86em; letter-spacing:0; color:var(--fg);
  background:var(--bg-3); border-radius:5px; padding:.1em .38em; overflow-wrap:anywhere;
}
.pg-doc .prose a code{ color:inherit }
.pg-doc .prose hr{ border:0; border-top:1px solid var(--line); margin:2.2em 0 }

/* metryczka dokumentu (wersja, daty, usługodawca) */
.pg-doc .prose .doc-meta{ font-size:.9rem; line-height:1.65; color:var(--fg-3) }
.pg-doc .prose .doc-meta + :not(.doc-meta){ margin-top:1.4em }
.pg-doc .prose .doc-meta strong{ color:var(--fg-2) }

/* ramki: notatki z markdownu (> cytat), ramki EN (style inline na aliasach), zapowiedź v9 */
.pg-doc .prose .doc-note{
  margin:1.4em 0 1.6em; padding:16px 20px; border:1px solid var(--line); border-radius:14px;
  background:var(--bg-2); font-size:1rem; line-height:1.65;
}
.pg-doc .prose .doc-note p{ margin:0 0 .65em }
.pg-doc .prose .doc-note > :last-child{ margin-bottom:0 }
.pg-doc .prose .doc-note ul{ margin-bottom:.65em }
.pg-doc .prose .ramka-v9{
  border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:14px;
  padding:16px 20px; margin:0 0 28px; background:var(--bg-2);
}
.pg-doc .prose .ramka-v9 p{ margin:0 }
.pg-doc .prose div[style] > p:last-child{ margin-bottom:0 }

/* ── tabele: przewijane w poziomie wewnątrz ramki, strona nie ─────────── */
.pg-doc .prose .table-scroll{
  margin:1.4em 0 1.7em; overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
  border:1px solid var(--line); border-radius:var(--r); background:var(--bg);
}
.pg-doc .prose table{ border-collapse:collapse; font-size:.9375rem; line-height:1.55 }
.pg-doc .prose .table-scroll > table{ width:100% }
.pg-doc .prose .table-scroll > table:has(thead th:nth-child(3)){ min-width:34rem }
.pg-doc .prose .table-scroll > table:has(thead th:nth-child(4)){ min-width:42rem }
/* tabele bez opakowania (strony EN): sama tabela jest przewijanym blokiem */
.pg-doc .prose > table, .pg-doc .prose > div:not(.table-scroll) > table{
  display:block; width:max-content; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
  margin:1.4em 0 1.7em; border:1px solid var(--line); border-radius:var(--r); background:var(--bg);
}
.pg-doc .prose th, .pg-doc .prose td{
  padding:11px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line);
}
.pg-doc .prose thead th{
  background:var(--bg-2); color:var(--fg); font-weight:600; font-size:.84rem; letter-spacing:-.003em;
}
.pg-doc .prose tbody tr:last-child > *{ border-bottom:0 }
.pg-doc .prose td strong{ font-weight:600 }

/* ── hub „Dokumenty”: karty ────────────────────────────────────────── */
.pg-doc .prose .doc-cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:1.6em 0 1.8em }
@media (max-width:640px){ .pg-doc .prose .doc-cards{ grid-template-columns:minmax(0,1fr) } }
.pg-doc .prose a.doc-card{
  display:grid; gap:6px; align-content:start; padding:20px 22px;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg);
  color:inherit; text-decoration:none;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), transform .3s cubic-bezier(.16,1,.3,1);
}
.pg-doc .prose .doc-card-num{ font-family:var(--mono); font-size:.75rem; color:var(--fg-3); letter-spacing:0 }
.pg-doc .prose .doc-card h3{
  margin:0; font-family:var(--sans); font-size:1.0625rem; font-weight:500; letter-spacing:-.015em; line-height:1.3; color:var(--fg);
}
.pg-doc .prose .doc-card p{ margin:0; font-size:.9375rem; line-height:1.55; color:var(--fg-2) }
@media (hover:hover){
  .pg-doc .prose a.doc-card:hover{ border-color:var(--line-2); box-shadow:var(--shadow); transform:translateY(-2px) }
}
@media (prefers-reduced-motion:reduce){ .pg-doc .prose a.doc-card{ transition:none } .pg-doc .prose a.doc-card:hover{ transform:none } }

/* ── strony zmian (v8 → v9): bloki różnic ──────────────────────────── */
.pg-doc .prose .diff-legend{ display:flex; gap:14px; flex-wrap:wrap; font-size:.9rem; margin:8px 0 24px }
.pg-doc .prose .diff-block{
  margin:0 0 14px; padding:14px 18px; border:1px solid var(--line); border-radius:12px;
  background:var(--bg); overflow-wrap:anywhere; font-size:1rem;
}
.pg-doc .prose .diff-block p{ margin:0 }
.pg-doc .prose .diff-block p + p{ margin-top:.5em }
.pg-doc .prose .diff-sekcja{
  margin:0 0 6px; font-size:.75rem; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--fg-3);
}
.pg-doc .prose ins{ background:rgba(46,160,67,.22); color:inherit; text-decoration:none; border-radius:3px; padding:0 2px }
.pg-doc .prose del{ background:rgba(248,81,73,.2); color:inherit; text-decoration:line-through; border-radius:3px; padding:0 2px }

/* ── strony EN: bez madd-i18n.js przełącznik języka nie działa - do PL prowadzi link w nagłówku ── */
.pg-doc-en .nav .lang-pill, .pg-doc-en .nav-mobile .nav-mobile-lang-section{ display:none !important }

/* ── telefon ────────────────────────────────────────────────────────── */
@media (max-width:640px){
  .pg-doc .doc-hero h1{ font-size:clamp(1.9rem,8.4vw,2.4rem); max-width:none }
  .pg-doc .doc-hero .lead{ font-size:1.0625rem }
  .pg-doc .prose{ font-size:1rem; line-height:1.7 }
  .pg-doc .prose h2{ font-size:1.4rem }
  .pg-doc .prose h3{ font-size:1.15rem }
  .pg-doc .prose .doc-note, .pg-doc .prose .ramka-v9{ padding:14px 16px }
  .pg-doc .prose th, .pg-doc .prose td{ padding:10px 12px }
}

/* ── druk: sam dokument, jasno ──────────────────────────────────────── */
@media print{
  .pg-doc{
    --bg:#fff; --bg-2:#f4f4f2; --bg-3:#ececea; --fg:#000; --fg-2:#1a1a1a; --fg-3:#555;
    --line:#d8d8d4; --line-2:#c4c4be; --accent:#5a1f7a;
    padding-top:0; background:#fff; color:#000;
  }
  .pg-doc .skip-link, .pg-doc .nav, .pg-doc .nav-mobile, .pg-doc .footer, .pg-doc .hero-mesh,
  .pg-doc .doc-lang, .pg-doc .wh-theme, .pg-doc .cookie-banner, .pg-doc .cookie-modal{ display:none !important }
  .pg-doc main > .page-hero{ margin-top:0; padding:0 0 16px }
  .pg-doc main > .section{ padding:0 }
  .pg-doc .prose{ font-size:10.5pt; line-height:1.5 }
  .pg-doc .prose a{ color:inherit }
  .pg-doc .prose .table-scroll, .pg-doc .prose > table{ overflow:visible }
  .pg-doc .prose h2, .pg-doc .prose h3{ break-after:avoid }
  .pg-doc .prose tr, .pg-doc .prose .doc-note, .pg-doc .prose .diff-block{ break-inside:avoid }
}