/* Wspólny styl dokumentów prawnych GlobeQuest.
 *
 * JEDEN plik na cztery strony (polityka i regulamin × PL/EN). Wcześniej każda
 * miała własną kopię tych reguł — cztery kopie rozjeżdżają się przy pierwszej
 * poprawce, a rozjechany regulamin wygląda jak podrobiony.
 *
 * Wartości barw i promieni pochodzą WPROST z `lib/core/theme/app_colors.dart`
 * i `AppRadii`. To nie jest ozdoba: użytkownik trafia tu przez odnośnik z
 * aplikacji i musi bez zastanowienia poznać, że wciąż jest u nas. Strona w
 * obcym kroju i obcych kolorach czyta się jak cudza — a przy dokumencie o
 * danych osobowych to psuje dokładnie to, co ma budować.
 */

/* Kroje wprost z paczki aplikacji (przycięte do łaciny, patrz
 * `scripts/subset_fonts.py`). `swap` jest tu obowiązkowe: dokument prawny ma
 * być czytelny natychmiast, a nie po dociągnięciu 240 kB.
 *
 * Adresy celują w KATALOG ASSETÓW APLIKACJI, a nie we własną kopię obok tego
 * pliku. Do 2026-08-06 leżały tu trzy `.ttf` bajt w bajt identyczne z
 * `assets/fonts/` — 241 kB dublowane w repozytorium i w każdym deployu, i to
 * pod nagłówkami BEZ `immutable` (reguła `/a/*` w `web/_headers` obejmuje
 * wyłącznie zwersjonowany katalog). Teraz strony prawne trafiają w tę samą
 * kopię co aplikacja, więc powracający użytkownik ma je już w cache'u.
 *
 * `../assets/` to adres SUROWEGO buildu i `flutter run`. W paczce na produkcję
 * `scripts/version_assets.mjs` podmienia go na `../a/<hasz>/assets/` — ten sam
 * zabieg, co dla `assetBase` w `flutter_bootstrap.js`. Skrypt kończy błędem,
 * gdy tego przedrostka tu nie znajdzie, więc zmiana ścieżki w tym pliku nie
 * ma jak przejść po cichu. */
@font-face {
  font-family: 'Baloo 2';
  src: url('../a/0597f1e865/assets/assets/fonts/Baloo2-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('../a/0597f1e865/assets/assets/fonts/Nunito-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('../a/0597f1e865/assets/assets/fonts/Nunito-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  --canvas: #F9FBE7;   /* AppColors.canvas */
  --surface: #FFFFFF;  /* AppColors.surface */
  --ink: #4A4A4A;      /* AppColors.ink */
  --muted: #6B6B6B;    /* AppColors.inkMuted — 4,8:1 na kremie, ponad próg AA */
  --line: rgba(74, 74, 74, 0.12); /* AppColors.divider */
  --coral: #FF8A80;
  --pink: #FF80AB;
  --radius: 24px;      /* AppRadii.card */
  --body: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --heading: 'Baloo 2', var(--body);
}
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #0F1115;
    --surface: #1C2028;
    --ink: #ECEEF2;
    --muted: #98A0AE;
    --line: rgba(255, 255, 255, 0.14);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 20px 80px;
  background: var(--canvas);
  color: var(--ink);
  font: 400 16px/1.7 var(--body);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

main { max-width: 44rem; margin: 0 auto; }

/* ── Nagłówek strony ──────────────────────────────────────────────────── */

header { padding: 36px 0 8px; }

.back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  /* 44 px to minimalny cel dotykowy w wytycznych Apple i Google — to jedyna
     droga powrotu do aplikacji na całej stronie. */
  min-height: 44px;
}
.back:hover { color: var(--ink); }

/* Znak marki rysowany CSS-em — ten sam, co na ekranie rozruchowym w
   `web/index.html`: kula z południkiem i równoleżnikiem. Żadnego pliku
   graficznego, więc nie ma czego dociągać ani czym się rozjechać. */
.globe {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--coral);
}
.globe::before, .globe::after {
  content: "";
  position: absolute;
  border: 1.5px solid var(--pink);
  border-radius: 50%;
}
.globe::before { top: 0; bottom: 0; left: 29%; right: 29%; }
.globe::after { left: 0; right: 0; top: 29%; bottom: 29%; }

h1 {
  font: 700 32px/1.2 var(--heading);
  margin: 0 0 10px;
  letter-spacing: 0.01em;
}

/* Cienka kreska w barwach marki pod tytułem — jedyny mocny akcent koloru na
   stronie. Tekst zostaje neutralny: koral jako TREŚĆ ma na kremie 1,6–2,3:1
   (patrz `AppColors.accentText`), czyli daleko poniżej progu czytelności. */
h1::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--coral), var(--pink));
}

.lede { color: var(--muted); margin: 18px 0 6px; font-size: 17px; }
.updated { color: var(--muted); font-size: 14px; margin: 0; }

/* ── Treść ────────────────────────────────────────────────────────────── */

h2 { font: 700 21px/1.3 var(--heading); margin: 44px 0 10px; }
h3 { font: 700 16px/1.4 var(--body); margin: 26px 0 6px; }

a { color: var(--ink); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

ul, ol { padding-left: 22px; }
li { margin: 7px 0; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 24px 0;
}
.card p:first-child { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

code {
  font-size: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: 6px;
}

/* ── Tabela ───────────────────────────────────────────────────────────── */

/* Szeroka tabela przewija się WE WŁASNYM pudełku. Bez tego cała strona jeździ
   w poziomie na telefonie — a to jedna z niewielu rzeczy, które potrafią
   uczynić dokument nieczytelnym na wąskim ekranie. */
.wrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; }
th, td {
  text-align: left;
  vertical-align: top;
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--line);
}
th { font-weight: 700; }

/* Na telefonie tabela ROZKŁADA SIĘ NA KARTY, po jednej na wiersz.
 *
 * Trzy kolumny w 335 px dawały komórki po dziesięć linijek — formalnie
 * czytelne, praktycznie nie do przejrzenia. Przewijanie w bok byłoby gorsze:
 * w dokumencie prawnym treść schowana poza krawędzią ekranu to treść, której
 * nikt nie przeczyta.
 *
 * Nagłówek znika, bo po rozłożeniu kolejność mówi sama za siebie: co (grubym),
 * po co (zwykłym), na jakiej podstawie (drobnym, przygaszonym). Wiersz
 * nagłówkowy to jedyny `tr` z komórkami `th`, stąd `:first-child`. */
@media (max-width: 620px) {
  .wrap { overflow-x: visible; }
  table, tbody, tr, td { display: block; width: auto; }
  tr:first-child { display: none; }

  tr {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin: 14px 0;
  }
  td { border: 0; padding: 0; }
  td:nth-child(1) { font-weight: 700; margin-bottom: 6px; }
  td:nth-child(3) {
    margin-top: 10px;
    color: var(--muted);
    font-size: 13px;
  }
}

/* ── Stopka ───────────────────────────────────────────────────────────── */

footer {
  margin-top: 52px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  line-height: 2;
}
footer a { color: var(--muted); }
footer a:hover { color: var(--ink); }