/*
 * Tempo — strona pomocy.
 * Kolory, pismo, odstępy i promienie to role systemu projektowego (docs/DESIGN_SYSTEM.md) z pliku tokens.css, który
 * generuje packages/design-tokens (npm run build -w @athlete/design-tokens). Każda strona ładuje najpierw
 * assets/css/tokens.css, potem ten plik. Nie wpisuj tu kolorów: użyj roli var(--color-…). Wyjątki to elementy, które
 * muszą wyglądać tak samo w obu motywach: znaczniki legendy zrzutów (jak w plikach PNG) i tło podglądu zrzutu.
 * Zasady: limonka (--color-accent) tylko w głównym przycisku; bieżąca strona i wybór jako odwrócona pigułka
 * (--color-selected / --color-on-selected); link w tekście zawsze podkreślony (--color-accent-text); pismo Manrope
 * (pliki w assets/fonts), bez wersalików i rozstrzelonych nadtytułów.
 * Motyw: domyślnie zgodny z systemem; przycisk zapisuje wybór w localStorage („tempo.theme”), assets/js/theme.js
 * ustawia data-theme na <html>. Wydruk zawsze w jasnych kolorach (blok @media print w tokens.css).
 *
 * KOMPONENTY DLA AUTORÓW — żywy wzór z każdym elementem: _wzor.html (noindex, poza wyszukiwarką).
 * Zasady: tylko ścieżki względne; bez <script>/<style> w stronie, bez style="" i on…="" (CSP).
 * Po każdej zmianie: node scripts/check-site.mjs --indeks && node scripts/check-site.mjs
 *
 *  Etykieta z ekranu    <span class="ui">Zaplanuj trening</span>   — cudzysłów „…” i pogrubienie dodaje CSS;
 *                       nie wpisuj cudzysłowów ręcznie. Klawisz: <kbd>Esc</kbd>.
 *  Gdzie to jest        <p class="where"><span class="where-label">Gdzie to jest</span> <span class="ui">Menu</span> ›
 *                       <span class="ui">Dzisiaj</span></p>
 *  W skrócie            <ul class="task-meta" aria-label="W skrócie"><li><strong>Czas</strong> ok. 3 min</li>…</ul>
 *  Kroki                <ol class="steps"><li><div class="step-body"><p class="step-title">Wybierz …</p><p>…</p>
 *                       [opcjonalnie mały zrzut: <figure class="shot shot-mini">…</figure>]</div></li></ol>
 *                       .steps-compact — krótka lista (np. „Start w 10 minut” w karcie).
 *  Ramki                <aside class="callout callout-X" role="note"><p class="callout-title">Tytuł</p><p>…</p></aside>
 *                       tip „Wskazówka” · warn „Uwaga” · danger „Nie da się cofnąć” · note „Dobrze wiedzieć” ·
 *                       privacy „Prywatność” · planned „Jeszcze nie ma” · athlete „Co widzi zawodnik”
 *                       (w athlete na końcu opcjonalnie <img class="callout-shot" src="assets/img/zawodnik-….png" …>).
 *  Zrzut z legendą      <figure class="shot shot-desktop" data-callouts="N"><div class="shot-frame">
 *                       <div class="shot-bar" aria-hidden="true"><i></i><i></i><i></i></div><img src="assets/img/guide/ID.png"
 *                       alt="… Numery 1–N objaśnia lista pod zrzutem." width="W" height="H" loading="lazy"></div>
 *                       <figcaption>…</figcaption><ol class="shot-legend"><li><span class="ui">Etykieta</span> — …</li>…</ol>
 *                       <p class="shot-zoom"><a href="assets/img/guide/ID.png">Powiększ zrzut</a></p></figure>
 *                       N = liczba pozycji legendy = liczba znaczników w PNG (check-site to sprawdza).
 *                       Telefon: class="shot shot-phone" (z legendą obok obrazu od 640 px). Bez znaczników: bez
 *                       data-callouts i bez legendy.
 *  Miejsce na zrzut     <figure class="shot shot-desktop" data-shot="assets/img/guide/ID.png" data-callouts="N">
 *                       <div class="shot-frame" role="img" aria-label="Miejsce na zrzut ekranu: …">shot-bar + .shot-body
 *                       z makietą .mock + p.shot-label</div><figcaption>…</figcaption><ol class="shot-legend">…</ol>
 *                       (bez „Powiększ zrzut” — check-site odrzuca odnośniki do brakujących plików). Podmiana: zapisz PNG,
 *                       usuń data-shot, w .shot-frame zostaw .shot-bar, zamień .shot-body oraz role/aria-label na <img>.
 *  Karty                <ul class="cards [cards-compact]"><li class="card [card-feature]"><h3 id="…"><a class="card-link"
 *                       href="…">…</a></h3><p>…</p><p class="card-meta"><span>ok. 3 min</span><span>osoba …</span></p></li></ul>
 *                       cards-compact: 1 / 2 (od 600 px) / 4 (od 1100 px, poza .prose) kolumny; card-meta = czas i kto.
 *  Lista kontrolna      <ul class="checklist"><li>…</li></ul>  (kwadraty do odhaczenia, drukują się)
 *  Czas przy nagłówku   <h2 id="…">Utwórz zespół <span class="time-badge">1 min</span></h2>
 *  Tekst do skopiowania <div class="copy-block"><p class="copy-title">…</p><pre class="copy-text" id="UNIKALNE">…</pre>
 *                       <button type="button" class="btn btn-small" data-copy="UNIKALNE" hidden>Kopiuj tekst</button></div>
 *  Przebieg             <ol class="flow"><li><span class="flow-state">1 · Wysłane</span><p>…</p></li></ol>
 *  Tematy od A do Z     <nav class="az-index" aria-label="Tematy od A do Z" data-search-skip><div class="az-group">
 *                       <h3 class="az-letter" id="tematy-a">A</h3><ul><li><a href="…">…</a></li>
 *                       <li id="stara-kotwica"><a data-moved href="nowa-strona.html#cel">…</a></li></ul></div></nav>
 *                       Wejście na stronę.html#stara-kotwica przenosi do celu a[data-moved] (assets/js/site.js).
 *  Powiązane            <h2 id="powiazane">Powiązane</h2><ul class="related"><li><a href="…">…</a> — po co</li></ul>
 *  Poprzednia/następna  <nav class="pager" aria-label="Poprzednia i następna strona"> (jak w trener.html)
 *  Duży przycisk        <a class="btn btn-primary btn-large" href="…">…</a>  — jeden główny (limonkowy) przycisk na
 *                       stronie; pozostałe przyciski to class="btn" (drugorzędne).
 *  Wyszukiwarka         nagłówek: <a class="search-toggle" href="trener.html#tematy" data-search-open>…</a>;
 *                       w treści: <div class="search-inline" data-search-inline><a href="trener.html#tematy">Tematy od A
 *                       do Z</a></div>. Skrypt assets/js/search.js (defer) buduje okno „Szukaj w pomocy”; bez JS zostają
 *                       zwykłe linki. Synonimy wyszukiwania: data-keywords="kontuzja, uraz" na h2/h3.
 *                       Fragment z data-search-skip nie trafia do indeksu (assets/search-index.json).
 */

/* ---------- Pismo: Manrope z własnego serwera (500–800, łacina i łacina rozszerzona; licencja OFL w assets/fonts) ---------- */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('../fonts/manrope-latin-ext-500-normal.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('../fonts/manrope-latin-500-normal.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('../fonts/manrope-latin-ext-600-normal.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('../fonts/manrope-latin-600-normal.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('../fonts/manrope-latin-ext-700-normal.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('../fonts/manrope-latin-700-normal.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url('../fonts/manrope-latin-ext-800-normal.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url('../fonts/manrope-latin-800-normal.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Układ strony (kolory, pismo i promienie: tokens.css) ---------- */
:root {
  --header-h: 64px;
  --gutter: var(--space-4);
  /* Tło kontrolek zależy od podłoża (DESIGN_SYSTEM.md §4.1): na tle strony `surface`, w karcie i oknie `surface-muted`. */
  --control-bg: var(--color-surface);
  --header-bg: color-mix(in srgb, var(--color-canvas) 88%, transparent);
  /* Znaczniki na zrzutach z legendą: te same kolory co w plikach PNG, w obu motywach. */
  --shot-marker: #121512;
  --shot-marker-text: #ffffff;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
@media (min-width: 600px) {
  :root {
    --gutter: var(--space-6);
  }
}
.card,
.callout,
.toc,
.table-wrap,
.copy-block,
.flow > li,
.rules li,
.pager a,
.search-dialog,
.image-viewer {
  --control-bg: var(--color-surface-muted);
}

/* ---------- Podstawy ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
/* Treść do czytania jest większa niż treść w aplikacji (body 15 / body-sm 14); reszta to role ze skali. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-canvas);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
::selection {
  background: var(--color-selected);
  color: var(--color-on-selected);
}
img,
svg {
  max-width: 100%;
}
img {
  height: auto;
}
h1,
h2,
h3,
h4 {
  margin: 0;
  text-wrap: balance;
}
h1 {
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.125rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.025em;
}
h2 {
  font: var(--type-title-1);
  letter-spacing: var(--type-title-1-tracking);
}
h3 {
  font: var(--type-title-2);
  letter-spacing: var(--type-title-2-tracking);
}
h4 {
  font: var(--type-title-3);
  letter-spacing: var(--type-title-3-tracking);
}
p {
  margin: 0;
}
/* Link w zdaniu jest zawsze podkreślony: accent-text odróżnia się od tekstu tylko kolorem (§4.1). */
a {
  color: var(--color-accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover {
  text-decoration-thickness: 2px;
}
/* Fokus: pierścień 2 px z odstępem 2 px w kolorze zależnym od podłoża (--ring), §7.1. */
:focus-visible {
  outline: 2px solid var(--ring, var(--color-focus-ring));
  outline-offset: 2px;
}
[hidden] {
  display: none !important;
}
code,
kbd {
  font-family: var(--font-mono);
  font-size: 0.875em;
  font-weight: 500;
  overflow-wrap: anywhere;
}
code {
  background: var(--color-surface-hover);
  border-radius: var(--radius-xxs);
  padding: 0.08em 0.38em;
}
kbd {
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-bottom-width: 2px;
  border-radius: var(--radius-xxs);
  padding: 0.05em 0.4em;
  color: var(--color-text);
}
strong,
b {
  font-weight: 700;
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  --ring: var(--color-focus-ring-inverse);
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  padding: 10px 16px;
  border-radius: var(--radius-full);
  font: var(--type-label-lg);
  text-decoration: none;
}
.skip-link:focus {
  top: 10px;
}
.icon {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.15em;
}

/* ---------- Przyciski ---------- */
/* Drugorzędny: tło kontrolki zależne od podłoża i cienka linia; główny (limonkowy) — tylko jeden na stronie. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--size-control-md);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 0;
  background: var(--control-bg);
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
  color: var(--color-text);
  font: var(--type-label-lg);
  letter-spacing: var(--type-label-lg-tracking);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}
.btn:hover {
  background: var(--color-surface-hover);
}
.btn-primary {
  background: var(--color-accent);
  box-shadow: none;
  color: var(--color-on-accent);
}
.btn-primary:hover {
  background: var(--color-accent-hover);
}
.btn-primary:active {
  background: var(--color-accent-pressed);
}
.btn-small {
  min-height: var(--size-control-sm);
  padding: var(--space-1) var(--space-3);
  gap: var(--space-1);
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
}
@media (max-width: 767px) {
  .btn {
    min-height: var(--size-touch);
  }
  .btn-small {
    min-height: var(--size-control-sm);
  }
}
.text-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--color-accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* ---------- Nagłówek ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  border-bottom: 1px solid var(--color-border);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
}
.header-inner {
  max-width: 1320px;
  margin: 0 auto;
  min-height: var(--header-h);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
/* Logotyp „tempo.” (rola brand): Manrope 800, kropka w accent-text (§3). */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  margin: 0;
}
.brand-word {
  font: var(--type-brand);
  letter-spacing: var(--type-brand-tracking);
}
.brand-dot {
  color: var(--color-accent-text);
}
.brand-tag {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-tag);
  padding: var(--space-half) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--control-bg);
  box-shadow: inset 0 0 0 1px var(--color-border);
  color: var(--color-text-secondary);
  font: var(--type-caption-strong);
  letter-spacing: var(--type-caption-strong-tracking);
}
.site-nav {
  margin-left: auto;
}
.site-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-half);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  display: flex;
  align-items: center;
  min-height: var(--size-control-sm);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  font: var(--type-body-sm);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a:hover {
  color: var(--color-text);
  background: var(--color-surface-hover);
}
/* aria-current="page" — ta strona; aria-current="true" — dział, do którego należy strona. Wybór = odwrócona pigułka. */
.site-nav a[aria-current] {
  color: var(--color-on-selected);
  background: var(--color-selected);
}
.site-nav .nav-secondary,
.site-nav .nav-panel {
  display: none;
}
.header-tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.panel-link {
  display: none;
}
@media (min-width: 1240px) {
  .panel-link:not([hidden]) {
    display: inline-flex;
  }
}
.theme-toggle,
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: var(--size-control-md);
  min-height: var(--size-control-md);
  border-radius: var(--radius-full);
  border: 0;
  background: var(--control-bg);
  box-shadow: inset 0 0 0 1px var(--color-border);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
}
.theme-toggle:hover,
.nav-toggle:hover {
  background: var(--color-surface-hover);
}
@media (max-width: 767px) {
  .theme-toggle,
  .nav-toggle {
    min-width: var(--size-touch);
    min-height: var(--size-touch);
  }
}
.theme-toggle .icon {
  width: var(--size-icon-md);
  height: var(--size-icon-md);
}
.theme-toggle .icon-moon {
  fill: currentColor;
  stroke: none;
}
.theme-toggle .icon-sun {
  display: none;
}
/* Ikona przycisku zależy od motywu, który widać (zapisany wybór albo ustawienie systemu). */
:root[data-theme='dark'] .theme-toggle .icon-sun {
  display: block;
}
:root[data-theme='dark'] .theme-toggle .icon-moon {
  display: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-toggle .icon-sun {
    display: block;
  }
  :root:not([data-theme='light']) .theme-toggle .icon-moon {
    display: none;
  }
}
/* Bez JavaScriptu przycisk motywu nie działa, więc go ukrywamy. */
:root:not(.js) .theme-toggle,
:root:not(.js) .nav-toggle {
  display: none;
}
.nav-toggle {
  display: none;
  padding: 0 var(--space-4);
  font: var(--type-label-lg);
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  position: relative;
  transition: transform 0.2s;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: '';
  position: absolute;
  left: 0;
}
.nav-toggle-bars::before {
  top: -6px;
}
.nav-toggle-bars::after {
  top: 6px;
}
.nav-toggle[aria-expanded='true'] .nav-toggle-bars {
  background: transparent;
}
.nav-toggle[aria-expanded='true'] .nav-toggle-bars::before {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded='true'] .nav-toggle-bars::after {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 959px) {
  .header-inner {
    gap: 10px;
  }
  .js .nav-toggle {
    display: inline-flex;
    margin-left: auto;
  }
  /* Bez JS: linki zawijają się pod logo. */
  :root:not(.js) .header-inner {
    flex-wrap: wrap;
    padding-bottom: 8px;
  }
  :root:not(.js) .site-nav {
    margin-left: 0;
    width: 100%;
  }
  :root:not(.js) .site-nav ul {
    flex-wrap: wrap;
  }
  .js .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--color-canvas);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-floating);
    padding: 8px var(--gutter) 20px;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .js .site-nav.open {
    display: block;
  }
  .js .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-half);
  }
  .js .site-nav a {
    min-height: var(--size-touch);
    padding: var(--space-2) var(--space-4);
    font: var(--type-body);
    color: var(--color-text);
  }
  .js .site-nav a[aria-current] {
    color: var(--color-on-selected);
  }
  .js .site-nav .nav-secondary {
    display: block;
  }
  .js .site-nav .nav-secondary a {
    color: var(--color-text-secondary);
    font: var(--type-body-sm);
  }
  .js .site-nav li:not(.nav-secondary) + .nav-secondary {
    border-top: 1px solid var(--color-border);
    margin-top: 8px;
    padding-top: 8px;
  }
  .js .site-nav a.nav-panel:not([hidden]) {
    display: flex;
    margin-top: 14px;
    color: var(--color-on-accent);
    background: var(--color-accent);
    box-shadow: none;
    justify-content: center;
    font: var(--type-label-lg);
  }
}

/* ---------- Układ dokumentacji ---------- */
.doc-layout {
  flex: 1;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.doc-sidebar {
  display: none;
}
.doc-main {
  min-width: 0;
  padding: 28px 0 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    'head'
    'toc'
    'content'
    'pager';
  align-content: start;
  outline: none;
}
.doc-head {
  grid-area: head;
  max-width: 46rem;
}
.toc {
  grid-area: toc;
}
.prose {
  grid-area: content;
  max-width: 46rem;
  min-width: 0;
}
.pager {
  grid-area: pager;
  max-width: 46rem;
}
@media (min-width: 960px) {
  .doc-layout {
    grid-template-columns: 232px minmax(0, 1fr);
    column-gap: 44px;
  }
  .doc-sidebar {
    display: block;
    position: sticky;
    top: var(--header-h);
    align-self: start;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    padding: 28px 4px 40px 0;
  }
  .doc-main {
    padding-top: 36px;
  }
}
@media (min-width: 1240px) {
  .doc-main {
    grid-template-columns: minmax(0, 46rem) 228px;
    column-gap: 56px;
    grid-template-areas:
      'head toc'
      'content toc'
      'pager toc';
  }
  .toc {
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + 28px);
    max-height: calc(100vh - var(--header-h) - 48px);
    overflow-y: auto;
    grid-row: 1 / span 3;
  }
  .toc > summary {
    pointer-events: none;
  }
  .toc > summary::after {
    display: none;
  }
}
.side-heading {
  font: var(--type-caption-strong);
  letter-spacing: var(--type-caption-strong-tracking);
  color: var(--color-text-secondary);
  margin: var(--space-5) var(--space-3) var(--space-1);
}
.side-heading:first-child {
  margin-top: 0;
}
.doc-sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.doc-sidebar li + li {
  margin-top: var(--space-half);
}
.doc-sidebar a {
  display: block;
  padding: 6px var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font: var(--type-body-sm);
  text-decoration: none;
}
.doc-sidebar a:hover {
  color: var(--color-text);
  background: var(--color-surface-hover);
}
/* Bieżąca strona: odwrócona pigułka (selected / on-selected), nie limonka. */
.doc-sidebar a[aria-current] {
  --ring: var(--color-focus-ring);
  background: var(--color-selected);
  color: var(--color-on-selected);
  font: var(--type-body-sm-strong);
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  font: var(--type-body-sm);
  color: var(--color-text-secondary);
}
.breadcrumbs li + li::before {
  content: '/';
  margin-right: 6px;
  color: var(--color-text-tertiary);
}
.breadcrumbs a {
  color: var(--color-text-secondary);
}
/* Nadtytuł: zwykła wielkość liter, bez rozstrzelenia (§5). */
.eyebrow {
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}
.lead {
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin-top: var(--space-3);
}
.doc-meta {
  margin-top: var(--space-4);
  font: var(--type-caption);
  letter-spacing: var(--type-caption-tracking);
  color: var(--color-text-secondary);
}

/* ---------- Spis treści strony ---------- */
.toc {
  margin: var(--space-6) 0 var(--space-2);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  font: var(--type-body-sm);
}
.toc > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-3) var(--space-4);
  font: var(--type-label-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--radius-lg);
}
.toc > summary::-webkit-details-marker {
  display: none;
}
.toc > summary::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-text-secondary);
  border-bottom: 2px solid var(--color-text-secondary);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.2s;
}
.toc[open] > summary::after {
  transform: rotate(-135deg) translateY(-2px);
}
.toc nav {
  padding: 0 var(--space-2) var(--space-3);
}
.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.toc ol ol {
  padding-left: var(--space-3);
  margin: 2px 0 4px;
  border-left: 1px solid var(--color-border);
  margin-left: var(--space-2);
}
.toc a {
  display: block;
  padding: 5px var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  line-height: 1.35;
}
.toc a:focus-visible {
  outline-offset: -2px;
}
.toc a:hover {
  color: var(--color-text);
  background: var(--color-surface-hover);
}
/* Sekcja, którą czytasz: kolor tekstu i kreska — spokojniej niż odwrócona pigułka bieżącej strony. */
.toc a.active {
  color: var(--color-text);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--color-text);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
@media (min-width: 1240px) {
  .toc {
    margin: 0;
    background: transparent;
    box-shadow: none;
    border-left: 1px solid var(--color-border);
    border-radius: 0;
  }
  .toc > summary {
    font: var(--type-caption-strong);
    letter-spacing: var(--type-caption-strong-tracking);
    color: var(--color-text-secondary);
    padding: 4px 18px 8px;
  }
  .toc nav {
    padding: 0 0 12px 8px;
  }
}

/* ---------- Treść ---------- */
.prose {
  padding-top: 8px;
}
.prose > * + * {
  margin-top: 1.05em;
}
.prose h2 {
  margin-top: 2em;
  padding-top: 1.25em;
  border-top: 1px solid var(--color-border);
  position: relative;
}
.prose > h2:first-child {
  margin-top: 1em;
  border-top: 0;
  padding-top: 0;
}
.prose h3 {
  margin-top: 1.9em;
  position: relative;
}
.prose h4 {
  margin-top: 1.5em;
}
.prose h2 + *,
.prose h3 + *,
.prose h4 + * {
  margin-top: 0.7em;
}
.heading-anchor {
  margin-left: 0.35em;
  color: var(--color-text-tertiary);
  text-decoration: none;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.15s;
}
h2:hover .heading-anchor,
h3:hover .heading-anchor,
.heading-anchor:focus-visible {
  opacity: 1;
}
@media (hover: none) {
  .heading-anchor {
    display: none;
  }
}
/* Zwykłe listy w treści; listy z klasą (kroki, legenda, karty…) mają własny układ. */
.prose ul:not([class]),
.prose ol:not([class]) {
  padding-left: 1.3em;
}
.prose li + li {
  margin-top: 0.4em;
}
.prose li > ul,
.prose li > ol {
  margin-top: 0.4em;
}
.prose ul li::marker {
  color: var(--color-text-tertiary);
}
.prose dl {
  margin-top: 1em;
}
.prose dt {
  font-weight: 700;
  margin-top: 1em;
}
.prose dd {
  margin: 0.25em 0 0;
  color: var(--color-text);
}
.prose blockquote {
  margin-left: 0;
  margin-right: 0;
  padding: 10px 16px;
  border-left: 3px solid var(--color-border-strong);
  background: var(--color-surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.muted {
  color: var(--color-text-secondary);
}
.small {
  font-size: 0.875rem;
}

/* Etykieta z ekranu (przycisk, pole, zakładka, pozycja menu): pogrubiona, w polskim cudzysłowie dodawanym przez CSS. */
.ui {
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
}
.ui::before {
  content: '\201E';
}
.ui::after {
  content: '\201D';
}
a .ui,
.callout-title .ui,
thead .ui,
.search-result .ui {
  color: inherit;
}
@media (max-width: 480px) {
  .ui {
    white-space: normal;
  }
}

/* ---------- Plakietki ---------- */
.badge {
  display: inline-block;
  min-height: var(--size-badge);
  padding: var(--space-half) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-surface-hover);
  color: var(--color-text);
  font: var(--type-caption-strong);
  letter-spacing: var(--type-caption-strong-tracking);
  vertical-align: 0.12em;
  white-space: nowrap;
}
.badge-staff {
  background: var(--color-surface-hover);
  color: var(--color-text);
}
.badge-athlete {
  background: var(--color-violet-soft);
  color: var(--color-violet-text);
}
.badge-manage {
  background: var(--color-info-soft);
  color: var(--color-info-text);
}
/* Kreskowany obrys = zaplanowane (§4.4). */
.badge-planned {
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px dashed var(--color-border-control);
}
.badge-draft {
  background: var(--color-info-soft);
  color: var(--color-info-text);
}

/* ---------- Kroki ---------- */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 1.3em 0 0;
  padding: 0;
}
.steps > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 22px 52px;
  margin: 0;
}
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  width: var(--size-ring-xs);
  height: var(--size-ring-xs);
  border-radius: var(--radius-full);
  background: var(--control-bg);
  color: var(--color-text);
  font: var(--type-label);
  font-variant-numeric: tabular-nums;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px var(--color-border-control);
}
.steps > li::after {
  content: '';
  position: absolute;
  left: 16px;
  top: 34px;
  bottom: 4px;
  width: 1px;
  background: var(--color-border);
}
.steps > li:last-child {
  padding-bottom: 4px;
}
.steps > li:last-child::after {
  display: none;
}
.step-title {
  font-weight: 700;
  margin-bottom: 4px;
}
.step-body > * + * {
  margin-top: 0.55em;
}
.steps.steps-large > li {
  padding-left: 64px;
  padding-bottom: 28px;
}
.steps.steps-large > li::before {
  width: var(--size-control-md);
  height: var(--size-control-md);
  font: var(--type-title-3);
  font-variant-numeric: tabular-nums;
}
.steps.steps-large > li::after {
  left: 20px;
  top: 44px;
}
.steps.steps-large .step-title {
  font: var(--type-title-2);
  letter-spacing: var(--type-title-2-tracking);
}

/* ---------- Ramki informacyjne ---------- */
.callout {
  --c-surface: var(--color-info-soft);
  --c-text: var(--color-info-text);
  margin: 1.4em 0 0;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.callout > * + * {
  margin-top: 0.55em;
}
.callout ul {
  padding-left: 1.2em;
}
.callout-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--c-text);
  font: var(--type-label-lg);
  letter-spacing: var(--type-label-lg-tracking);
}
.callout-title::before {
  content: '';
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  flex: none;
  background: currentColor;
  -webkit-mask: var(--c-icon) center / contain no-repeat;
  mask: var(--c-icon) center / contain no-repeat;
}
.callout-note,
.callout-tip {
  --c-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 11v6M12 7.5v.01'/%3E%3C/svg%3E");
}
.callout-tip {
  --c-surface: var(--color-success-soft);
  --c-text: var(--color-success-text);
  --c-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21.5h4M12 2.5a6.5 6.5 0 0 0-4 11.6c.7.6 1 1.3 1 2.1V16h6v-.2c0-.8.4-1.5 1-2.1A6.5 6.5 0 0 0 12 2.5Z'/%3E%3C/svg%3E");
}
.callout-warn {
  --c-surface: var(--color-warning-soft);
  --c-text: var(--color-warning-text);
  --c-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20.5h20L12 3Z'/%3E%3Cpath d='M12 10v4.5M12 17.5v.01'/%3E%3C/svg%3E");
}
.callout-danger {
  --c-surface: var(--color-danger-soft);
  --c-text: var(--color-danger-text);
  --c-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M8.5 8.5l7 7M15.5 8.5l-7 7'/%3E%3C/svg%3E");
}
/* Jeszcze nie ma: kreskowany obrys = zaplanowane (§4.4), bez koloru stanu. */
.callout-planned {
  --c-surface: transparent;
  --c-text: var(--color-text-secondary);
  border: 1px dashed var(--color-border-control);
  --c-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
.callout-privacy {
  --c-surface: var(--color-violet-soft);
  --c-text: var(--color-violet-text);
  --c-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10.5' rx='2.5'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}

/* ---------- Tabele ---------- */
.table-wrap {
  margin-top: 1.2em;
  overflow-x: auto;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  -webkit-overflow-scrolling: touch;
}
.table-wrap:focus-visible {
  outline-offset: 2px;
}
table {
  width: 100%;
  border-collapse: collapse;
  font: var(--type-body-sm);
  line-height: 1.45;
}
caption {
  text-align: left;
  padding: 12px 14px 0;
  font: var(--type-label);
  color: var(--color-text-secondary);
}
th,
td {
  text-align: left;
  vertical-align: top;
  padding: 11px 14px;
  border-bottom: 1px solid var(--color-border);
}
thead th {
  font: var(--type-caption-strong);
  letter-spacing: var(--type-caption-strong-tracking);
  color: var(--color-text-secondary);
  background: var(--color-surface-muted);
  white-space: nowrap;
}
tbody tr:last-child > * {
  border-bottom: 0;
}
tbody th {
  font-weight: 600;
}
td.center,
th.center {
  text-align: center;
}
.mark-yes {
  display: inline-grid;
  place-items: center;
  width: var(--size-avatar-sm);
  height: var(--size-avatar-sm);
  border-radius: var(--radius-full);
  background: var(--color-success-soft);
  color: var(--color-success-text);
  font: var(--type-caption-strong);
}
.mark-no {
  color: var(--color-text-tertiary);
}
.table-permissions td {
  text-align: center;
  vertical-align: middle;
  width: 17%;
}
.table-permissions td:first-child,
.table-permissions th:first-child {
  text-align: left;
  width: auto;
}
@media (max-width: 599px) {
  th,
  td {
    padding: 9px 10px;
  }
  /* Na telefonie każdy wiersz tabeli uprawnień to karta: opis działania, a pod nim trzy role. */
  .table-permissions thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  .table-permissions tbody tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 6px;
    padding: 12px 12px 14px;
    border-bottom: 1px solid var(--color-border);
  }
  .table-permissions tbody tr:last-child {
    border-bottom: 0;
  }
  .table-permissions tbody td {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: auto;
    padding: 0;
    border: 0;
    font: var(--type-caption);
    color: var(--color-text-secondary);
    text-align: center;
  }
  .table-permissions tbody td:first-child {
    grid-column: 1 / -1;
    align-items: flex-start;
    text-align: left;
    font: var(--type-body-sm-strong);
    color: var(--color-text);
  }
  .table-permissions tbody td[data-label]::before {
    content: attr(data-label);
  }
}

/* ---------- Karty ---------- */
.cards {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  margin-top: 1.4em;
  padding: 0;
  list-style: none;
}
.card {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--layout-card-padding-panel);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--duration-fast) var(--ease-standard);
}
.card > * + * {
  margin-top: 0.5em;
}
.prose .card > :first-child {
  margin-top: 0;
}
.card p {
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.card a.card-link {
  text-decoration: none;
  color: var(--color-text);
}
.card a.card-link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
}
.card:has(a.card-link:hover) {
  box-shadow: var(--shadow-floating);
}
.card:has(a.card-link:hover) a.card-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.card:has(a.card-link:focus-visible) {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
.card a.card-link:focus-visible {
  outline: none;
}
.card-icon {
  width: var(--size-icon-circle-md);
  height: var(--size-icon-circle-md);
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  background: var(--control-bg);
  color: var(--color-text);
}
.card-icon .icon {
  width: var(--size-icon-md);
  height: var(--size-icon-md);
}
.card-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font: var(--type-label-lg);
  color: var(--color-text) !important;
}

/* ---------- Zrzuty ekranu (miejsca na zrzuty) ----------
 * Podmiana miejsca na prawdziwy zrzut: zapisz plik w assets/img/ (nazwa z atrybutu data-shot),
 * usuń z <figure> atrybut data-shot, a w .shot-frame zastąp <div class="shot-body">…</div> oraz atrybuty
 * role/aria-label elementem <img src="assets/img/…" alt="opis ekranu" width="…" height="…" loading="lazy">.
 * Pasek okna (.shot-bar) przy zrzutach z komputera można zostawić. */
.shot {
  margin: 1.6em 0 0;
}
.shot-frame {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.shot-frame img {
  display: block;
  width: 100%;
}
.shot-bar {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-muted);
}
.shot-bar i {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--color-border-strong);
}
/* Miejsce na zrzut: kreskowanie oznacza „jeszcze nie ma” (§4.4). */
.shot-body {
  position: relative;
  aspect-ratio: 16 / 9;
  background: repeating-linear-gradient(135deg, var(--color-canvas) 0 9px, var(--color-border) 9px 10px);
}
.shot-phone {
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}
.shot-phone .shot-frame {
  border-radius: 32px;
  border-width: 6px;
  border-color: var(--color-border-strong);
}
.shot-phone .shot-body {
  aspect-ratio: 9 / 17;
}
.mock {
  position: absolute;
  inset: 0;
  opacity: 0.9;
}
.mock i {
  display: block;
  border-radius: var(--radius-xs);
  background: var(--color-surface-hover);
}
.mock-desktop {
  display: grid;
  grid-template-columns: 22% 1fr;
}
.m-side {
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: 7% 8%;
  display: flex;
  flex-direction: column;
  gap: 8%;
}
.m-side .m-brand {
  height: 9%;
  width: 60%;
  background: var(--color-border-strong);
}
.m-side .m-line {
  height: 5%;
}
.m-main {
  padding: 5% 6%;
  display: flex;
  flex-direction: column;
  gap: 5%;
}
.m-title {
  height: 8%;
  width: 45%;
}
.m-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4%;
  height: 16%;
}
.m-row .m-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.m-card {
  flex: 1;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border);
}
.m-card.short {
  flex: 0.6;
}
.w40 {
  width: 40%;
}
.w60 {
  width: 60%;
}
.w80 {
  width: 80%;
}
.mock-phone {
  padding: 16% 9% 10%;
  display: flex;
  flex-direction: column;
  gap: 4%;
}
.mock-phone .m-notch {
  position: absolute;
  top: 3%;
  left: 50%;
  width: 30%;
  height: 3.2%;
  transform: translateX(-50%);
  border-radius: var(--radius-full);
  background: var(--color-border-strong);
}
.mock-phone .m-line {
  height: 2.2%;
}
.mock-phone .m-title {
  height: 5%;
  width: 70%;
}
.mock-phone .m-button {
  height: 7%;
  background: var(--color-border-strong);
  border-radius: var(--radius-full);
}
.shot-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: 86%;
  text-align: center;
  background: var(--color-surface-raised);
  border: 1px dashed var(--color-border-control);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  font: var(--type-label);
  color: var(--color-text-secondary);
  box-shadow: var(--shadow-card);
}
.shot-label span {
  display: block;
  font: var(--type-body-sm);
  color: var(--color-text);
  margin-top: 2px;
}
figcaption {
  margin-top: 10px;
  font: var(--type-body-sm);
  color: var(--color-text-secondary);
}
.shot-phone figcaption {
  text-align: center;
}
/* Zrzut panelu na stronie głównej: sekcja jest szeroka, więc obraz nie rozciąga się na całą jej szerokość. */
.shot-home {
  max-width: 60rem;
}

/* ---------- Przepływ zaproszenia ---------- */
.flow {
  list-style: none;
  margin: 1.4em 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.flow > li {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  margin: 0;
}
.flow-state {
  display: inline-block;
  font: var(--type-caption-strong);
  letter-spacing: var(--type-caption-strong-tracking);
  color: var(--color-text-secondary);
  margin-bottom: 4px;
}
.flow-end {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
.flow-end li {
  border-radius: var(--radius-md);
  padding: 10px 12px;
  background: var(--control-bg);
  font: var(--type-body-sm);
  margin: 0;
}
.flow-end li strong {
  display: block;
}
.flow > li + li {
  position: relative;
}
/* Siatka ma własne odstępy (gap) — bez marginesu z .prose li + li. */
.flow > li + li,
.flow-end > li + li {
  margin-top: 0;
}
.flow > li + li::before {
  content: '';
  position: absolute;
  left: 28px;
  top: -13px;
  width: 2px;
  height: 12px;
  background: var(--color-border-strong);
}

/* ---------- Formuły ---------- */
.formula + p,
dd > * + * {
  margin-top: 0.7em;
}
.home-section .cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
.formula {
  display: block;
  margin-top: 0.9em;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  overflow-x: auto;
  white-space: pre-wrap;
}
.term {
  border-top: 1px solid var(--color-border);
  padding-top: 1.1em;
}

/* ---------- Nawigacja poprzednia/następna ---------- */
.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-top: var(--space-12);
}
.pager a {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: var(--color-text);
  transition: box-shadow var(--duration-fast) var(--ease-standard);
}
.pager a:hover {
  box-shadow: var(--shadow-floating);
}
.pager strong {
  font: var(--type-title-3);
  letter-spacing: var(--type-title-3-tracking);
}
.pager span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: var(--type-caption);
  letter-spacing: var(--type-caption-tracking);
  color: var(--color-text-secondary);
}
.pager-next {
  text-align: right;
  align-items: flex-end;
}
@media (max-width: 599px) {
  .pager {
    grid-template-columns: 1fr;
  }
}

/* ---------- Stopka ---------- */
.site-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-canvas);
  margin-top: auto;
}
.footer-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 40px var(--gutter) 48px;
  display: grid;
  gap: 32px;
}
@media (min-width: 860px) {
  .footer-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
}
.footer-about p + p {
  margin-top: 10px;
}
.footer-about p:not(.brand) {
  color: var(--color-text-secondary);
  font: var(--type-body-sm);
  max-width: 34ch;
}
.footer-about .footer-meta {
  font: var(--type-caption);
  letter-spacing: var(--type-caption-tracking);
}
.footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.footer-actions:not(:has(:not([hidden]))) {
  display: none;
}
.footer-nav {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
}
.footer-heading {
  font: var(--type-caption-strong);
  letter-spacing: var(--type-caption-strong-tracking);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}
.footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-nav li + li {
  margin-top: 6px;
}
.footer-nav a {
  color: var(--color-text);
  text-decoration: none;
  font: var(--type-body-sm);
}
.footer-nav a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.text-link {
  font: var(--type-body-sm);
}

/* ---------- Strona główna ---------- */
.home-main {
  flex: 1;
  outline: none;
}
.home-section {
  max-width: 1320px;
  margin: 0 auto;
  padding: 56px var(--gutter);
}
.home-section > h2 {
  max-width: 30ch;
}
.home-section > .section-lead {
  color: var(--color-text-secondary);
  max-width: 60ch;
  margin-top: 10px;
  font-size: 1.0625rem;
}
.hero {
  display: grid;
  gap: 40px;
  align-items: center;
  padding-top: 48px;
  padding-bottom: 40px;
}
@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    padding-top: 80px;
    padding-bottom: 72px;
  }
}
.hero h1 {
  font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);
  letter-spacing: -0.04em;
  line-height: 1.05;
}
/* Hasło bez zakreślacza i bez limonki (limonka tylko w głównym przycisku). */
.hero h1 em {
  font-style: normal;
}
.hero .lead {
  max-width: 38rem;
  margin-top: 22px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.hero-note {
  margin-top: 18px;
  font: var(--type-body-sm);
  color: var(--color-text-secondary);
}
.hero-art {
  position: relative;
  display: none;
  justify-self: center;
  width: min(100%, 360px);
}
@media (min-width: 720px) {
  .hero-art {
    display: block;
  }
}
/* Ilustracja telefonu (aria-hidden): role z tokenów, jedna limonkowa akcja na ekranie telefonu. */
.phone {
  border-radius: 40px;
  border: 8px solid var(--color-border-strong);
  background: var(--color-canvas);
  padding: 26px 18px 22px;
  box-shadow: var(--shadow-floating);
  font: var(--type-caption);
  line-height: 1.4;
  position: relative;
}
.phone::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--color-border-strong);
}
.phone-brand {
  font: var(--type-brand);
  letter-spacing: var(--type-brand-tracking);
  margin-top: 6px;
}
.phone-date {
  color: var(--color-text-secondary);
  font: var(--type-caption);
  margin-top: 14px;
}
.phone-hello {
  font: var(--type-title-1);
  letter-spacing: var(--type-title-1-tracking);
}
.phone-card {
  margin-top: 12px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 12px 14px;
}
.phone-card strong {
  display: block;
  font: var(--type-title-3);
  letter-spacing: var(--type-title-3-tracking);
}
.phone-card span {
  color: var(--color-text-secondary);
  font: var(--type-caption);
}
.phone-card.mint {
  background: var(--color-surface);
}
.phone-button {
  margin-top: 10px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-radius: var(--radius-full);
  padding: 8px 12px;
  font: var(--type-label);
  text-align: center;
}
.phone-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 38px;
  margin-top: 8px;
}
.phone-bars i {
  flex: 1;
  height: 50%;
  border-radius: var(--radius-xs) var(--radius-xs) 2px 2px;
  background: var(--color-chart-1);
}
.phone-bars i:nth-child(1) {
  height: 40%;
}
.phone-bars i:nth-child(2) {
  height: 62%;
}
.phone-bars i:nth-child(3) {
  height: 48%;
}
.phone-bars i:nth-child(4) {
  height: 80%;
}
.phone-bars i:nth-child(5) {
  height: 55%;
}
.phone-bars i:nth-child(6) {
  height: 30%;
}
.phone-bars i:nth-child(7) {
  height: 70%;
}
.code-float {
  position: absolute;
  right: -44px;
  top: 30px;
  background: var(--color-surface-raised);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  box-shadow: var(--shadow-floating);
  font: var(--type-caption);
  color: var(--color-text-secondary);
}
.code-float b {
  display: flex;
  gap: 5px;
  margin-top: 6px;
}
.code-float b span {
  width: 24px;
  height: 30px;
  border-radius: var(--radius-xs);
  background: var(--color-surface-muted);
  box-shadow: inset 0 0 0 1px var(--color-border-control);
  display: grid;
  place-items: center;
  color: var(--color-text);
  font: var(--type-title-3);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 1100px) {
  .code-float {
    right: -12px;
  }
}
.band {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.two-col {
  display: grid;
  gap: 32px;
}
@media (min-width: 900px) {
  .two-col {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 64px;
    align-items: start;
  }
}
.rules {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.rules li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
}
.rules li p {
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
}
.rules li strong {
  display: block;
  color: var(--color-text);
}
.rules .card-icon {
  width: 40px;
  height: 40px;
}
.home-steps {
  margin-top: 28px;
  max-width: 48rem;
}
.home-steps .step-body p:not(.step-title) {
  color: var(--color-text-secondary);
}
.platforms {
  margin-top: 28px;
}

/* ---------- 404 ---------- */
.notfound {
  flex: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 72px var(--gutter) 96px;
  outline: none;
}
.notfound-code {
  font-size: clamp(4.5rem, 3rem + 8vw, 8rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--color-text-tertiary);
}
.notfound h1 {
  margin-top: 12px;
}
.notfound-links {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- Przewodnik: „Gdzie to jest” i „W skrócie” ---------- */
.where {
  margin-top: var(--space-4);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.where-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-right: var(--space-2);
  font: var(--type-caption-strong);
  letter-spacing: var(--type-caption-strong-tracking);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.where-label::before {
  content: '';
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  flex: none;
  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='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5s-7-6-7-11.5a7 7 0 0 1 14 0c0 5.5-7 11.5-7 11.5Z'/%3E%3Ccircle cx='12' cy='10' r='2.4'/%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='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5s-7-6-7-11.5a7 7 0 0 1 14 0c0 5.5-7 11.5-7 11.5Z'/%3E%3Ccircle cx='12' cy='10' r='2.4'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}
.task-meta > li,
.task-meta > li + li {
  margin: 0;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font: var(--type-body-sm);
}
.task-meta strong {
  margin-right: 6px;
  font: var(--type-caption-strong);
  letter-spacing: var(--type-caption-strong-tracking);
  color: var(--color-text-secondary);
}

/* ---------- Przewodnik: kroki (wersja zwarta i zrzut w kroku) ---------- */
.steps-compact > li {
  padding: 0 0 12px 40px;
}
.steps-compact > li::before {
  width: var(--size-avatar-sm);
  height: var(--size-avatar-sm);
  font: var(--type-caption-strong);
  font-variant-numeric: tabular-nums;
  top: 1px;
}
.steps-compact > li::after {
  left: 12px;
  top: 27px;
}
.step-body > .shot {
  margin-top: 0.9em;
}
.shot-mini {
  max-width: 460px;
}

/* ---------- Przewodnik: ramka „Co widzi zawodnik” ---------- */
/* Co widzi zawodnik: neutralna karta z ikoną telefonu (bez koloru stanu). */
.callout-athlete {
  --c-surface: var(--color-surface);
  --c-text: var(--color-text);
  --c-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.5' y='2.5' width='11' height='19' rx='2.5'/%3E%3Cpath d='M10.5 18.5h3'/%3E%3C/svg%3E");
}
.callout-shot {
  display: block;
  width: 150px;
  margin: 14px auto 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}
/* Obraz na końcu ramki stoi obok tekstu: ostatni, elastyczny wiersz przejmuje nadmiar wysokości obrazu. */
@media (min-width: 560px) {
  .callout:has(> .callout-shot) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 128px;
    grid-template-rows: repeat(9, auto) 1fr;
    column-gap: 20px;
    align-items: start;
  }
  .callout:has(> .callout-shot) > * {
    grid-column: 1;
  }
  .callout > .callout-shot {
    grid-column: 2;
    grid-row: 1 / -1;
    width: 100%;
    margin: 2px 0 0;
  }
}

/* Powiększanie zrzutów: przewijanie pozostaje natywne, także na telefonie. */
.shot-open {
  display: block;
  cursor: zoom-in;
  text-decoration: none;
}
.shot-open:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: -4px;
}
.shot-open img {
  display: block;
  width: 100%;
  height: auto;
}
.shot-open.callout-shot {
  overflow: hidden;
}
.image-viewer-open {
  overflow: hidden;
}
.image-viewer {
  width: calc(100vw - 32px);
  height: calc(100dvh - 32px);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  color: var(--color-text);
  box-shadow: var(--shadow-floating);
  overflow: hidden;
}
.image-viewer[open] {
  display: flex;
  flex-direction: column;
}
.image-viewer::backdrop {
  background: rgba(0, 0, 0, 0.78);
}
.image-viewer-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--color-border);
}
.image-viewer-toolbar h2 {
  flex: 1;
  margin: 0;
  font: var(--type-title-3);
  letter-spacing: var(--type-title-3-tracking);
}
.image-viewer-toolbar .btn {
  min-height: var(--size-touch);
  font: var(--type-label);
}
.image-viewer-canvas {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 12px;
  overscroll-behavior: contain;
}
.image-viewer-canvas:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: -3px;
}
.image-viewer-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  object-fit: contain;
}
.image-viewer[data-zoom='actual'] .image-viewer-image {
  max-width: none;
  max-height: none;
  margin: 0 auto;
}
.image-viewer-caption {
  margin: 0;
  padding: 10px 16px;
  max-height: 20vh;
  overflow: auto;
  border-top: 1px solid var(--color-border);
  font: var(--type-body-sm);
  color: var(--color-text-secondary);
}
@media (max-width: 600px) {
  .image-viewer {
    width: 100%;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }
  .image-viewer-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    padding-top: max(10px, env(safe-area-inset-top));
  }
  .image-viewer-toolbar h2 {
    grid-column: 1;
    grid-row: 1;
  }
  .image-viewer-toolbar button:last-child {
    grid-column: 2;
    grid-row: 1;
  }
  .image-viewer-toolbar button:first-of-type {
    grid-column: 1;
    grid-row: 2;
  }
  .image-viewer-toolbar a {
    grid-column: 2;
    grid-row: 2;
  }
  .image-viewer-caption {
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
}
@media print {
  .image-viewer {
    display: none !important;
  }
  .image-viewer-open {
    overflow: visible;
  }
}

/* ---------- Przewodnik: zrzut z numerowaną legendą ---------- */
/* Kółka mają ten sam kolor co znaczniki w zrzutach (--shot-marker: atrament #121512, biała cyfra i biała obwódka),
 * w obu motywach — generator zrzutów rysuje znaczniki tymi samymi kolorami. */
.shot .shot-legend {
  list-style: none;
  counter-reset: shot;
  margin: 14px 0 0;
  padding: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.shot .shot-legend > li,
.shot .shot-legend > li + li {
  counter-increment: shot;
  position: relative;
  min-height: 26px;
  margin: 0 0 8px;
  padding: 1px 0 0 38px;
  break-inside: avoid;
}
.shot .shot-legend > li::before {
  content: counter(shot);
  position: absolute;
  left: 2px;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--shot-marker);
  color: var(--shot-marker-text);
  box-shadow:
    0 0 0 2px var(--shot-marker-text),
    0 1px 3px rgba(0, 0, 0, 0.35);
  font: var(--type-caption-strong);
  line-height: 24px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 720px) {
  .shot .shot-legend:has(> li:nth-child(5)) {
    columns: 2;
    column-gap: 28px;
  }
}
.shot-zoom {
  margin-top: 4px;
  font: var(--type-body-sm);
}
.shot-zoom a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.shot-zoom a::before {
  content: '';
  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='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7'/%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='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
/* Zrzut z telefonu z legendą: obraz po lewej, podpis i legenda obok (od 640 px). */
.shot-phone:has(> .shot-legend) {
  max-width: none;
}
.shot-phone:has(> .shot-legend) > .shot-frame {
  max-width: 300px;
  margin: 0 auto;
}
@media (min-width: 640px) {
  .shot-phone:has(> .shot-legend) {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: 28px;
    align-items: start;
  }
  .shot-phone:has(> .shot-legend) > .shot-frame {
    grid-row: 1 / -1;
    margin: 0;
  }
  .shot-phone:has(> .shot-legend) > :not(.shot-frame) {
    grid-column: 2;
  }
  .shot-phone:has(> .shot-legend) > figcaption {
    margin-top: 0;
    text-align: left;
  }
}

/* ---------- Przewodnik: karty zwarte, karta wyróżniona, czas i kto ---------- */
.cards.cards-compact {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
@media (min-width: 600px) {
  .cards.cards-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* 4 kolumny tylko w szerokiej sekcji (strona główna); w kolumnie tekstu (.prose, 46rem) zostają 2. */
@media (min-width: 1100px) {
  .cards.cards-compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .prose .cards.cards-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.prose .cards > li + li {
  margin-top: 0;
}
.cards-compact > .card {
  padding: var(--space-4);
}
.cards-compact .card h3 {
  font: var(--type-title-3);
  letter-spacing: var(--type-title-3-tracking);
}
.cards-compact .card p {
  font: var(--type-body-sm);
}
.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.card-meta span {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-tag);
  padding: var(--space-half) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--control-bg);
  color: var(--color-text-secondary);
  font: var(--type-caption-strong);
  letter-spacing: var(--type-caption-strong-tracking);
}
/* Karta wyróżniona: zwykła karta (bez limonki — limonka jest tylko w głównym przycisku). */
.card-feature p {
  color: var(--color-text);
}
.card-feature .steps {
  margin-top: 1em;
}

/* ---------- Przewodnik: lista kontrolna, czas przy nagłówku ---------- */
.checklist {
  list-style: none;
  margin: 1.2em 0 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}
.checklist > li,
.checklist > li + li {
  position: relative;
  margin: 0;
  padding: 10px 0 10px 38px;
  border-bottom: 1px solid var(--color-border);
}
.checklist > li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 13px;
  width: var(--size-checkbox);
  height: var(--size-checkbox);
  border: 2px solid var(--color-border-control);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
}
.time-badge {
  display: inline-block;
  margin-left: 0.5em;
  padding: var(--space-half) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--control-bg);
  box-shadow: inset 0 0 0 1px var(--color-border);
  color: var(--color-text-secondary);
  font: var(--type-caption-strong);
  letter-spacing: var(--type-caption-strong-tracking);
  vertical-align: 0.3em;
  white-space: nowrap;
}

/* ---------- Przewodnik: tekst do skopiowania ---------- */
.copy-block {
  margin-top: 1.4em;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}
.copy-title {
  font: var(--type-label);
  color: var(--color-text-secondary);
}
.copy-text {
  margin: 10px 0 0;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.copy-block .btn {
  margin-top: 12px;
}
.copy-status {
  margin-left: 12px;
  font: var(--type-label);
  color: var(--color-success-text);
}

/* ---------- Przewodnik: tematy od A do Z, powiązane ---------- */
.az-index {
  margin-top: 1.4em;
}
@media (min-width: 600px) {
  .az-index {
    columns: 2;
    column-gap: 36px;
  }
}
.az-group {
  break-inside: avoid;
  padding-bottom: 16px;
}
.az-index .az-letter {
  margin: 0;
  display: grid;
  place-items: center;
  width: var(--size-control-sm);
  height: var(--size-control-sm);
  border-radius: var(--radius-sm);
  background: var(--control-bg);
  color: var(--color-text);
  font: var(--type-title-3);
}
.az-index .az-letter .heading-anchor {
  display: none;
}
.az-index ul,
.prose .az-index ul {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.az-index li,
.prose .az-index li + li {
  margin: 0;
  padding: 3px 0;
  line-height: 1.4;
}
.related {
  list-style: none;
  margin: 0.8em 0 0;
  padding: 0;
}
.related > li,
.related > li + li {
  position: relative;
  margin: 0 0 6px;
  padding-left: 26px;
  color: var(--color-text-secondary);
}
.related > li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.38em;
  width: 16px;
  height: 16px;
  background: var(--color-text-tertiary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%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='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.related a {
  font-weight: 600;
}
.btn-large {
  min-height: var(--size-control-lg);
  padding: var(--space-3) var(--space-5);
}

/* ---------- Wyszukiwarka ---------- */
.search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: var(--size-control-md);
  min-height: var(--size-control-md);
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  background: var(--control-bg);
  box-shadow: inset 0 0 0 1px var(--color-border);
  color: var(--color-text-secondary);
  font: var(--type-body-sm);
  text-decoration: none;
  cursor: pointer;
}
.search-toggle:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}
@media (max-width: 767px) {
  .search-toggle {
    min-width: var(--size-touch);
    min-height: var(--size-touch);
  }
}
.search-toggle .icon,
.search-field .icon {
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  color: var(--color-text);
}
.search-kbd {
  display: none;
}
@media (min-width: 960px) {
  .search-kbd {
    display: inline-block;
    min-width: 1.6em;
    text-align: center;
    color: var(--color-text-secondary);
    font: var(--type-caption-strong);
  }
}
@media (max-width: 1099px) {
  .search-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .search-toggle {
    padding: 0 10px;
  }
}
/* Pole wyszukiwania w treści (strona główna, 404): przycisk wyglądający jak pole; bez JS tylko link. */
.search-inline {
  max-width: 36rem;
}
.search-field {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: var(--size-control-lg);
  padding: 10px 14px 10px 16px;
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-border-control);
  color: var(--color-text-tertiary);
  font: inherit;
  font-size: 1rem;
  text-align: left;
  cursor: text;
}
.search-field:hover {
  background: var(--color-surface-hover);
}
.search-field-text {
  flex: 1;
  min-width: 0;
}
.search-field-text strong {
  color: var(--color-text);
}
.search-inline > a {
  display: inline-block;
  margin-top: 8px;
  font: var(--type-body-sm);
}
.search-inline.is-ready > a {
  margin-left: 4px;
}
.search-dialog {
  width: min(680px, calc(100% - 2 * var(--gutter)));
  max-width: none;
  max-height: min(680px, calc(100vh - 12vh - 24px));
  margin: 10vh auto auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  color: var(--color-text);
  box-shadow: var(--shadow-floating);
  overflow: hidden;
}
.search-dialog[open] {
  display: flex;
  flex-direction: column;
}
.search-dialog::backdrop {
  background: var(--color-scrim);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.search-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}
.search-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 18px;
  border-bottom: 1px solid var(--color-border);
}
.search-head:focus-within {
  box-shadow: inset 0 -2px 0 var(--color-focus-ring);
}
.search-head > .icon {
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  color: var(--color-text-secondary);
}
.search-input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 1.0625rem;
}
.search-input:focus,
.search-input:focus-visible {
  outline: none;
}
.search-input::placeholder {
  color: var(--color-text-tertiary);
  opacity: 1;
}
.search-close {
  display: inline-grid;
  place-items: center;
  width: var(--size-touch);
  height: var(--size-touch);
  flex: none;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.search-close:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}
.search-close .icon {
  width: var(--size-icon-md);
  height: var(--size-icon-md);
}
.search-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.search-status {
  padding: 16px 18px;
  color: var(--color-text-secondary);
  font: var(--type-body-sm);
}
.search-status:empty {
  display: none;
}
.search-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.search-suggest button {
  min-height: var(--size-control-sm);
  padding: var(--space-1) var(--space-3);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--control-bg);
  color: var(--color-text);
  font: var(--type-label);
  cursor: pointer;
}
.search-suggest button:hover {
  background: var(--color-surface-hover);
}
.search-results {
  list-style: none;
  margin: 0;
  padding: 6px 8px 10px;
}
.search-results:empty {
  display: none;
}
.search-result + .search-result {
  margin-top: 2px;
}
.search-result a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
  line-height: 1.4;
}
.search-result a:focus-visible {
  outline-offset: -2px;
}
.search-result a:hover {
  background: var(--color-surface-hover);
}
/* Wynik wybrany strzałkami: tło pozycji menu i kreska w kolorze tekstu (bez limonki). */
.search-result[aria-selected='true'] a {
  background: var(--color-surface-hover);
  box-shadow: inset 3px 0 0 var(--color-text);
}
.search-result-title {
  display: block;
  font-size: 0.9375rem;
}
.search-result-page {
  color: var(--color-text-secondary);
}
.search-result-sep {
  margin: 0 0.35em;
  color: var(--color-text-secondary);
}
.search-result-heading {
  font-weight: 600;
}
.search-result-group {
  display: inline-block;
  margin-right: 8px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: var(--control-bg);
  color: var(--color-text-secondary);
  font: var(--type-micro);
  letter-spacing: var(--type-micro-tracking);
  line-height: 18px;
  vertical-align: 0.12em;
}
.search-result-text {
  display: -webkit-box;
  margin-top: 3px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  color: var(--color-text-secondary);
  font: var(--type-body-sm);
}
/* Dopasowanie: pogrubione w kolorze tekstu (bez zakreślacza). */
.search-dialog mark {
  padding: 0;
  background: none;
  color: var(--color-text);
  font-weight: 700;
}
.search-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 9px 18px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  font: var(--type-caption);
}
.search-foot kbd {
  font-size: 0.6875rem;
}
@media (max-width: 599px), (hover: none) {
  .search-foot {
    display: none;
  }
}
@media (max-width: 599px) {
  .search-dialog {
    width: calc(100% - 16px);
    max-height: calc(100vh - 16px);
    margin-top: 8px;
    border-radius: var(--radius-lg);
  }
  .search-result-group {
    display: none;
  }
}
/* Wąski telefon: przycisk menu bez podpisu, żeby logo, menu, wyszukiwarka i motyw zmieściły się w jednym wierszu. */
@media (max-width: 400px) {
  .header-inner {
    gap: 6px;
  }
  .header-tools {
    gap: 6px;
  }
  .nav-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .js .nav-toggle {
    padding: 0;
  }
}
@media (max-width: 350px) {
  .brand-tag {
    display: none;
  }
}

/* ---------- Druk ---------- */
@media print {
  /* Wydruk zawsze w jasnych kolorach, także gdy przeglądarka jest w trybie ciemnym: tokens.css przełącza role na
     jasny motyw w @media print. Tła zwykle się nie drukują, więc ramki i karty dostają obrys. */
  /* Miejsca na zrzuty bez obrazu nie wnoszą nic do wydruku. */
  .shot:has(.mock) {
    display: none !important;
  }
  body {
    font-size: 11pt;
    background: var(--color-surface);
    color: var(--color-text);
  }
  .site-header,
  .site-footer,
  .doc-sidebar,
  .toc,
  .pager,
  .skip-link,
  .breadcrumbs,
  .heading-anchor,
  .hero-art,
  .hero-actions,
  .search-toggle,
  .search-field,
  .search-dialog,
  .shot-zoom,
  .copy-block .btn,
  .copy-status {
    display: none !important;
  }
  /* Tła zwykle się nie drukują: numery legendy jako obwódka z ciemną cyfrą. */
  .shot .shot-legend > li::before {
    background: var(--shot-marker-text);
    color: var(--shot-marker);
    box-shadow: inset 0 0 0 2px var(--shot-marker);
  }
  .where,
  .task-meta > li,
  .copy-text,
  .callout,
  .card,
  .table-wrap,
  .flow > li,
  .rules li,
  .copy-block {
    border: 1px solid var(--color-border-strong);
  }
  .checklist > li {
    break-inside: avoid;
  }
  .doc-layout,
  .doc-main {
    display: block;
    padding: 0;
    max-width: none;
  }
  .prose,
  .doc-head {
    max-width: none;
  }
  a {
    color: var(--color-text);
  }
  .prose h2 {
    break-after: avoid;
    border-top: 0;
    padding-top: 0;
  }
  .steps > li,
  .callout,
  .copy-block,
  .az-group,
  .shot,
  .table-wrap,
  .card,
  .flow > li {
    break-inside: avoid;
  }
  .card,
  .shot-frame {
    box-shadow: none;
  }
  .table-wrap {
    overflow: visible;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- Pola do uzupełnienia (wersja robocza) ---------- */
mark.placeholder {
  text-decoration: underline dashed;
  text-underline-offset: 0.22em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background: var(--color-warning-soft);
  color: var(--color-warning-text);
  border: 1px dashed currentColor;
  border-radius: var(--radius-xs);
  padding: 0 0.3em;
  font-weight: 600;
  font-size: 0.94em;
  overflow-wrap: anywhere;
}