/* Strony dokumentów prawnych. Ten sam język wizualny co portal, ale
   szersza kolumna — regulaminu nie czyta się wygodnie w 480 px na monitorze.
   Na telefonie i tak schodzi do pełnej szerokości. */
:root{
  --bg:#F5F5F3; --paper:#FFFFFF; --ink:#161616; --ink-soft:#6B6B6B;
  --line:#E7E5E1; --teal:#0A9396; --shadow:0 2px 10px rgba(22,22,22,0.06);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Manrope',-apple-system,sans-serif;
  font-size:16px;line-height:1.65;
  padding-bottom:calc(24px + env(safe-area-inset-bottom));
}
a{color:var(--teal);text-decoration:none;}
a:hover{text-decoration:underline;}
*:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}

.pasek{
  background:var(--paper);border-bottom:1px solid var(--line);
  padding:calc(12px + env(safe-area-inset-top)) 20px 12px;
  position:sticky;top:0;z-index:5;
}
/* Wygodny obszar dotyku, nie sam rozmiar tekstu */
.powrot{display:inline-flex;align-items:center;min-height:40px;font-weight:600;touch-action:manipulation;}

.dokument{
  max-width:720px;margin:20px auto;padding:28px 22px 32px;
  background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  /* W regulaminie są długie ciągi bez spacji (adres platformy ODR, e-mail
     kontaktowy) — na wąskim ekranie mają się łamać, a nie wystawać poza stronę */
  overflow-wrap:anywhere;
}
.dokument h1{font-size:1.6rem;line-height:1.25;margin-bottom:6px;}
.dokument h2{font-size:1.15rem;margin:28px 0 10px;padding-top:4px;}
.dokument h3{font-size:1rem;margin:20px 0 8px;}
.dokument p{margin:10px 0;}
.dokument ol,.dokument ul{margin:10px 0 10px 22px;}
.dokument li{margin:6px 0;}
.dokument li > ul,.dokument li > ol{margin:6px 0 6px 18px;}
.dokument hr{border:none;border-top:1px solid var(--line);margin:24px 0;}
.dokument blockquote{
  margin:14px 0;padding:12px 16px;background:#F7F7F5;
  border-left:3px solid var(--teal);border-radius:0 8px 8px 0;color:var(--ink-soft);
}
.dokument code{background:#F0EFEC;padding:1px 5px;border-radius:4px;font-size:0.9em;}
.dokument del{color:var(--ink-soft);}

/* Tabele: na telefonie mają się ZAWIJAĆ, a nie zmuszać do przewijania w bok.
   Pierwsza wersja miała tu "min-width:460px" — przy jedynej tabeli w polityce
   (dwie kolumny krótkiego tekstu) oznaczało to przewijanie na każdym telefonie
   bez powodu. "overflow-x" zostaje jako zabezpieczenie, gdyby kiedyś doszła
   tabela, która naprawdę się nie mieści. */
.tabela{overflow-x:auto;margin:14px 0;-webkit-overflow-scrolling:touch;}
.tabela table{border-collapse:collapse;width:100%;font-size:0.94rem;}
.tabela th,.tabela td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top;}
.tabela th{background:#F7F7F5;font-weight:700;}

.stopka-daty{margin-top:28px;padding-top:14px;border-top:1px solid var(--line);color:var(--ink-soft);font-size:0.9rem;}
.stopka{max-width:720px;margin:0 auto;padding:4px 22px;text-align:center;color:var(--ink-soft);font-size:0.9rem;}
/* Odnośniki w stopce to jedyne klikalne rzeczy na dole strony — dostają
   wygodny obszar dotyku, nie sam rozmiar tekstu. */
.stopka a{display:inline-block;padding:10px 6px;touch-action:manipulation;}

@media (max-width:560px){
  .dokument{margin:0;border-radius:0;border-left:none;border-right:none;padding:22px 18px 28px;}
  .dokument h1{font-size:1.4rem;}
  /* Wcięcia list zjadają szerokość, której na telefonie nie ma do oddania */
  .dokument ol,.dokument ul{margin-left:18px;}
  .dokument li > ul,.dokument li > ol{margin-left:14px;}
  .tabela table{font-size:0.9rem;}
  .tabela th,.tabela td{padding:8px;}
}