/**
 * header.css — pasek nawigacji.
 *
 * Wymaga tokens.css i base.css wczytanych wcześniej.
 * Każdy kolor, odstęp, rozmiar i promień pochodzi z var(--dc-*).
 * Źródło wyglądu: _context/mockups/sections/header-*.png (NIE home.html —
 * patrz docs/decisions.md, 2026-08-28).
 *
 * Motyw ciemny obsługuje się sam — podmieniają się wyłącznie wartości
 * tokenów (tokens.css sekcja 12), więc w tym pliku nie ma ani jednego
 * selektora [data-theme='dark'] dla kolorów. Jedyne reguły [data-theme]
 * przesuwają suwak przełącznika — to geometria stanu, nie kolor.
 *
 * UKŁAD: SIATKA Z NAZWANYMI OBSZARAMI
 * Nagłówek to grid, a nie flex, z jednego konkretnego powodu. Poniżej progu
 * nawigacja, przełącznik motywu i lista języków lądują w rozwijanym panelu,
 * a Asystent, telefon i koszyk zostają w pasku — elementy zmieniają
 * sąsiedztwo. Siatka z nazwanymi obszarami przestawia je samym CSS-em,
 * bez duplikowania w znaczniku: w DOM-ie jest JEDEN przełącznik motywu
 * i JEDNA lista języków, więc nie ma dwóch elementów walczących o ten
 * sam stan w localStorage.
 *
 * DWA PROGI
 *   1024 px — pasek zwija się: nawigacja i preferencje idą do panelu.
 *             Wyprowadzony pomiarem przy poprzedniej przebudowie (sekcja 12).
 *   drugi   — napis „Asystent AI" skraca się do „AI". Wyprowadzony pomiarem
 *             w tej przebudowie (sekcja 13).
 */

/* ==========================================================================
   1. PASEK
   ========================================================================== */
.dc-header {
  position: sticky;
  top: 0;
  z-index: var(--dc-z-overlay);
  background-color: var(--dc-surface-glass);
  /* -webkit- wciąż potrzebne: Safari obsługuje backdrop-filter tylko
     z prefiksem aż do wersji 18. */
  -webkit-backdrop-filter: var(--dc-blur-xl);
  backdrop-filter: var(--dc-blur-xl);
  border-bottom: var(--dc-border) solid var(--dc-border-subtle);
  transition:
    background-color var(--dc-duration-slow) var(--dc-ease),
    box-shadow var(--dc-duration-slow) var(--dc-ease);
}

/* Siatka szeroka: logo · nawigacja · (wolne) · Asystent · preferencje · szybki
   dostęp. Kolumna „.” z 1fr to odstęp elastyczny z makiety (flex:1) — pcha
   Asystenta i resztę do prawej krawędzi. */
.dc-header__inner {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto auto;
  grid-template-areas: 'logo nav . ai prefs quick';
  align-items: center;
  gap: var(--dc-space-22);
  width: 100%;
  max-width: var(--dc-container);
  margin-inline: auto;
  /* Oddech po bokach płynnie — na telefonie schodzi do 16 px,
     powyżej ~700 px stoi na 28 px z makiety. Pionowo 10 px: makieta ma
     pasek 62 px przy elementach 38 px, na siatce 2 px wychodzi 40 + 2×10
     + obramowanie — najbliższa wartość. */
  padding: var(--dc-space-10) clamp(var(--dc-space-16), 4vw, var(--dc-space-28));
}

/* ==========================================================================
   2. LOGO
   ========================================================================== */
.dc-header__logo {
  grid-area: logo;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.dc-header__logo img {
  /* Wysokość z makiety (30 px -> 32); szerokość wynika z proporcji pliku. */
  height: var(--dc-space-32);
  width: auto;
}

/* ==========================================================================
   3. PRZYCISK MENU — tylko poniżej progu
   ========================================================================== */
.dc-header__burger {
  grid-area: burger;
  display: none;
  align-items: center;
  justify-content: center;
  /* 40×40: makieta ma 44, ale na siatce tokenów 44 spada do 40 albo rośnie
     do 48 — a trzy przyciski 48 px z pigułką i logo nie mieszczą się
     w 390 px (pomiar w sekcji 12). 40 px to i tak powyżej minimum 24×24
     z WCAG 2.5.8. */
  width: var(--dc-space-40);
  height: var(--dc-space-40);
  padding: 0;
  border-radius: var(--dc-radius-full);
  background-color: var(--dc-surface-glass);
  border: var(--dc-border) solid var(--dc-border-subtle);
  color: var(--dc-text);
  cursor: pointer;
  transition:
    background-color var(--dc-duration-base) var(--dc-ease),
    border-color var(--dc-duration-base) var(--dc-ease),
    box-shadow var(--dc-duration-base) var(--dc-ease),
    transform var(--dc-duration-fast) var(--dc-ease-out);
}

.dc-header__burger:hover {
  background-color: var(--dc-surface);
}

/* Kliknięcie = nacisk (ranga 4, przycisk ikonowy — design-audit.md, C.1):
   zmniejszenie plus cień wciśnięcia — ten sam, który nagłówek kładzie na
   bieżącej pozycji nawigacji i na przełączniku motywu. */
.dc-header__burger:active {
  transform: scale(0.97);
  box-shadow: var(--dc-shadow-inset-press);
}

/* Stan otwarty: pełne tło i złota obwódka — obok krzyżyka drugi sygnał,
   że przycisk teraz ZAMYKA. Makieta ma w motywie ciemnym przycisk odwrócony
   (kremowy), w jasnym biały ze złotą obwódką; scalone do jednej reguły na
   tokenach (reguła 10: brak reguł kolorów dla dark w pliku sekcji). */
.dc-header[data-dc-menu='open'] .dc-header__burger {
  background-color: var(--dc-surface);
  border-color: var(--dc-border-accent);
}

/* Kreski składają się w krzyżyk po rozwinięciu. To sygnał stanu niezależny
   od koloru — obok aria-expanded, które niesie ten sam stan dla czytnika.
   Ikona z rejestru: trzy osobne <path> na y = 6 / 12 / 18, więc skrajne
   kreski zjeżdżają do środka o 6 px. transform-box: fill-box sprawia, że
   każda obraca się wokół własnego środka, a nie środka całego viewBoksa. */
.dc-header__burger .dc-icon path {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform var(--dc-duration-base) var(--dc-ease-out),
    opacity var(--dc-duration-fast) var(--dc-ease);
}

.dc-header[data-dc-menu='open'] .dc-header__burger .dc-icon path:nth-child(1) {
  transform: translateY(var(--dc-space-6)) rotate(45deg);
}

.dc-header[data-dc-menu='open'] .dc-header__burger .dc-icon path:nth-child(2) {
  opacity: 0;
}

.dc-header[data-dc-menu='open'] .dc-header__burger .dc-icon path:nth-child(3) {
  transform: translateY(calc(-1 * var(--dc-space-6))) rotate(-45deg);
}

/* ==========================================================================
   4. PANEL ZWIJANY
   Powyżej progu display:contents rozpuszcza pudełko — nawigacja
   i preferencje stają się bezpośrednimi komórkami siatki nagłówka.
   Etykiety wierszy („Motyw", „Język") istnieją tylko w panelu.
   ========================================================================== */
.dc-header__menu {
  display: contents;
}

.dc-header__pref {
  display: contents;
}

.dc-header__pref-label {
  display: none;
}

/* ==========================================================================
   5. MENU GŁÓWNE — „pigułka" ze szkła
   ========================================================================== */
.dc-nav {
  grid-area: nav;
  display: flex;
  align-items: center;
  min-width: 0;
}

/* Selektor złożony (.dc-nav .dc-nav__list, 0,2,0), a nie sama klasa (0,1,0):
   base.css zeruje padding regułą ul[role='list'] o specyficzności 0,1,1,
   która wygrywałaby z pojedynczą klasą i zdejmowała pigułce wewnętrzny
   odstęp. Ten sam zapis w media query niżej — z tego samego powodu. */
.dc-nav .dc-nav__list {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--dc-space-2);
  margin: 0;
  padding: var(--dc-space-4);
  list-style: none;
  border-radius: var(--dc-radius-pill);
  background-color: var(--dc-surface-glass);
  border: var(--dc-border) solid var(--dc-border-subtle);
  box-shadow: var(--dc-shadow-inset-top), var(--dc-shadow-sm);
  -webkit-backdrop-filter: var(--dc-blur-sm);
  backdrop-filter: var(--dc-blur-sm);
}

.dc-nav__item {
  flex: none;
}

.dc-nav__link {
  display: inline-flex;
  align-items: center;
  padding: var(--dc-space-8) var(--dc-space-14);
  border-radius: var(--dc-radius-pill);
  color: var(--dc-text-secondary);
  font-family: var(--dc-font-body);
  font-size: var(--dc-text-md);
  font-weight: var(--dc-weight-medium);
  line-height: var(--dc-leading-none);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--dc-duration-base) var(--dc-ease),
    color var(--dc-duration-base) var(--dc-ease),
    box-shadow var(--dc-duration-base) var(--dc-ease),
    transform var(--dc-duration-fast) var(--dc-ease-out);
}

.dc-nav__link:hover {
  background-color: var(--dc-surface);
  color: var(--dc-text);
}

/* Kliknięcie = nacisk: jedyna transformacja dozwolona na elementach
   klikalnych (design-audit.md, C.2). .97, nie .96 — najmniejszy przycisk
   ma 42 px i przy .96 traci 1,7 px na krawędź, widać drżenie tekstu. */
.dc-nav__link:active {
  transform: scale(0.97);
}

/* BIEŻĄCA STRONA: płytka wciśnięta w obudowę — wklęsłe wypełnienie, waga 700.
   Sygnał niesiony KSZTAŁTEM (cień wewnętrzny), nie kolorem: po odbarwieniu
   różnica zostaje. Stan czytamy z aria-current="page", które Walker_Nav_Menu
   ustawia z tej samej flagi, z której biorą się klasy current-menu-item —
   jeden selektor obsługuje menu z bazy i fallback. Bez ikony, bez złota:
   złoto ma w pasku wyłącznie Asystent, żeby dwie role nie dzieliły wyglądu. */
.dc-nav__link[aria-current='page'] {
  background-color: var(--dc-surface-sunken);
  color: var(--dc-text);
  font-weight: var(--dc-weight-bold);
  box-shadow: var(--dc-shadow-inset-press);
}

/* ==========================================================================
   6. PREFERENCJE (motyw, język) I SZYBKI DOSTĘP (telefon, koszyk)
   ========================================================================== */
.dc-header__prefs {
  grid-area: prefs;
  display: flex;
  align-items: center;
  gap: var(--dc-space-10);
}

.dc-header__quick {
  grid-area: quick;
  display: flex;
  align-items: center;
  gap: var(--dc-space-22);
}

/* ==========================================================================
   7. PRZEŁĄCZNIK JĘZYKA — jedna lista, dwa ubrania
   W pasku: przycisk „PL" rozwija listę pod sobą. Stan trzyma aria-expanded
   na przycisku, a listę pokazuje selektor sąsiedztwa — bez klasy z JS-u.
   Na urządzeniu ze wskaźnikiem (mysz) aria-expanded ustawia najazd, na
   dotykowym kliknięcie — decyduje o tym header-menu.js, nie CSS, żeby stan
   miał JEDNO źródło prawdy (ten sam powód, dla którego nie ma tu :hover
   otwierającego listę).
   W panelu (sekcja 12) przycisk znika, a ta sama lista stoi na stałe jako
   przełącznik segmentowy.

   PRZYCISK DZIELI PRZEPIS Z „KONTO" I „KOSZYKIEM" (sekcja 10): ta sama
   wysokość 40 px, ta sama obwódka --dc-border-line, ten sam rozmiar tekstu
   i ten sam najazd (jaśniejsze tło + złota obwódka). Wcześniej był o 8 px
   niższy, o 1 px mniejszym tekstem i z jaśniejszą obwódką --dc-border-subtle,
   przez co odstawał od reszty paska.
   ========================================================================== */
.dc-lang {
  position: relative;
}

.dc-lang__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-8);
  height: var(--dc-space-40);
  padding: 0 var(--dc-space-14);
  border-radius: var(--dc-radius-pill);
  background-color: var(--dc-surface-glass);
  border: var(--dc-border) solid var(--dc-border-line);
  color: var(--dc-text);
  font-family: var(--dc-font-body);
  font-size: var(--dc-text-md);
  font-weight: var(--dc-weight-bold);
  line-height: var(--dc-leading-none);
  cursor: pointer;
  -webkit-backdrop-filter: var(--dc-blur-md);
  backdrop-filter: var(--dc-blur-md);
  transition:
    background-color var(--dc-duration-base) var(--dc-ease),
    border-color var(--dc-duration-base) var(--dc-ease),
    transform var(--dc-duration-fast) var(--dc-ease-out);
}

.dc-lang__toggle:hover,
.dc-lang__toggle[aria-expanded='true'] {
  background-color: var(--dc-surface);
  border-color: var(--dc-accent-a50);
}

.dc-lang__toggle:active {
  transform: scale(0.97);
}

.dc-lang__globe,
.dc-lang__chevron {
  display: inline-flex;
  flex: none;
}

.dc-lang__globe {
  color: var(--dc-accent-strong);
}

.dc-lang__chevron {
  color: var(--dc-text-muted);
  transition: transform var(--dc-duration-base) var(--dc-ease-out);
}

/* Strzałka obraca się po rozwinięciu — sygnał stanu niezależny od koloru. */
.dc-lang__toggle[aria-expanded='true'] .dc-lang__chevron {
  transform: rotate(180deg);
}

/* .dc-lang .dc-lang__list zamiast samej klasy — patrz uwaga przy .dc-nav__list.

   ZWINIĘTA LISTA NIE JEST display:none, TYLKO visibility:hidden
   Rozwinięcie ma się pojawiać z przenikaniem i drobnym zjazdem w dół, a
   display nie przechodzi. visibility owszem — i tak samo jak display
   wyjmuje odnośniki z kolejności Tab oraz z drzewa dostępności, więc
   zwinięta lista jest nieosiągalna z klawiatury. pointer-events: none
   dokłada pewność, że niewidoczne pudełko nie łapie kursora nad treścią. */
/* left: 50% + translateX(-50%) zamiast right: 0 (zgłoszenie Andrzeja,
   2026-08-31): lista jest szersza niż przycisk „PL", więc przyklejenie do
   prawej krawędzi ciągnęło ją wyraźnie w lewo od przycisku. Wyśrodkowanie
   pod przyciskiem wygląda proporcjonalnie niezależnie od szerokości listy. */
.dc-lang .dc-lang__list {
  position: absolute;
  top: calc(100% + var(--dc-space-10));
  left: 50%;
  z-index: var(--dc-z-modal);
  display: block;
  min-width: calc(var(--dc-space-80) * 2.5);
  margin: 0;
  padding: var(--dc-space-8);
  list-style: none;
  border-radius: var(--dc-radius-18);
  background-color: var(--dc-surface);
  border: var(--dc-border) solid var(--dc-border-line);
  box-shadow: var(--dc-shadow-2xl), var(--dc-shadow-inset-top);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, calc(-1 * var(--dc-space-6)));
  transition:
    opacity var(--dc-duration-base) var(--dc-ease),
    transform var(--dc-duration-base) var(--dc-ease-out),
    visibility var(--dc-duration-base) var(--dc-ease);
}

/* Mostek nad listą: wypełnia 10 px przerwy między przyciskiem a listą, żeby
   kursor jadący w dół nie opuścił .dc-lang i nie zwinął rozwinięcia w pół
   drogi. Istnieje tylko wtedy, gdy lista jest widoczna — pod visibility
   ukrytego rodzica pseudoelement też nie łapie kursora. */
.dc-lang .dc-lang__list::before {
  content: '';
  position: absolute;
  right: 0;
  left: 0;
  top: calc(-1 * var(--dc-space-10));
  height: var(--dc-space-10);
}

.dc-lang__toggle[aria-expanded='true'] + .dc-lang__list {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.dc-lang__option {
  display: flex;
  align-items: center;
  gap: var(--dc-space-10);
  width: 100%;
  min-height: var(--dc-space-40);
  padding: var(--dc-space-8) var(--dc-space-12);
  border-radius: var(--dc-radius-12);
  color: var(--dc-text-secondary);
  font-size: var(--dc-text-md);
  font-weight: var(--dc-weight-medium);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--dc-duration-fast) var(--dc-ease),
    color var(--dc-duration-fast) var(--dc-ease);
}

.dc-lang__option:hover {
  background-color: var(--dc-accent-a15);
  color: var(--dc-text);
}

/* Kod języka w kapsule: ta sama „płytka" co w przełączniku segmentowym
   w panelu, dzięki czemu oba ubrania listy czyta się tak samo. */
.dc-lang__option strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: var(--dc-space-32);
  height: var(--dc-space-24);
  border-radius: var(--dc-radius-6);
  background-color: var(--dc-surface-sunken);
  color: var(--dc-text-muted);
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-sm);
  font-weight: var(--dc-weight-bold);
  transition:
    background-color var(--dc-duration-fast) var(--dc-ease),
    color var(--dc-duration-fast) var(--dc-ease);
}

.dc-lang__option:hover strong {
  background-color: var(--dc-accent-a30);
  color: var(--dc-text);
}

/* Wybrany język: złoty tint i waga 700 — ten sam sygnał co w panelu. */
.dc-lang__option[aria-current='true'] {
  background-color: var(--dc-accent-a10);
  color: var(--dc-text);
  font-weight: var(--dc-weight-bold);
}

.dc-lang__option[aria-current='true'] strong {
  background-color: var(--dc-accent-a30);
  color: var(--dc-text);
}

/* ==========================================================================
   8. PRZEŁĄCZNIK MOTYWU
   Rozmiary są stałe (56×32 z makiety panelu; w pasku makieta ma 52×30,
   scalone do jednego rozmiaru, bo to JEDEN element), bo to element o własnej
   geometrii, a nie blok tekstu — dlatego liczby pochodzą z tokenów odstępów.
   ========================================================================== */
.dc-theme-toggle {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  width: var(--dc-space-56);
  height: var(--dc-space-32);
  padding: 0;
  border-radius: var(--dc-radius-pill);
  border: var(--dc-border) solid var(--dc-border-line);
  background-color: var(--dc-surface-sunken);
  box-shadow: var(--dc-shadow-inset-press);
  cursor: pointer;
}

.dc-theme-toggle__sun,
.dc-theme-toggle__moon {
  position: absolute;
  display: inline-flex;
  pointer-events: none;
}

.dc-theme-toggle__sun {
  left: var(--dc-space-6);
  color: var(--dc-accent-strong);
}

.dc-theme-toggle__moon {
  right: var(--dc-space-6);
  color: var(--dc-text-subtle);
}

/* Suwak. Wyśrodkowany pionowo przez top/bottom: 0 + margin auto, więc zmiana
   wysokości przełącznika nie rozjedzie jego pozycji. */
.dc-theme-toggle__knob {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--dc-space-2);
  width: var(--dc-space-24);
  height: var(--dc-space-24);
  margin-block: auto;
  border-radius: var(--dc-radius-full);
  background-color: var(--dc-surface);
  box-shadow: var(--dc-shadow-md), var(--dc-shadow-inset-top);
  transition: transform var(--dc-duration-slow) var(--dc-ease-out);
}

/* Stan czytamy z <html data-theme>, nie z klasy na przycisku — dzięki temu
   skrypt inline w <head> ustawia poprawną pozycję suwaka jeszcze przed
   pierwszą klatką i suwak nie „przeskakuje" po wczytaniu strony.
   Droga suwaka = szerokość − suwak − (lewy margines + prawy margines
   + dwa obramowania) = 56 − 24 − 6. */
[data-theme='dark'] .dc-theme-toggle__knob {
  transform: translateX(calc(var(--dc-space-56) - var(--dc-space-24) - var(--dc-space-6)));
}

[data-theme='dark'] .dc-theme-toggle__sun {
  color: var(--dc-text-subtle);
}

[data-theme='dark'] .dc-theme-toggle__moon {
  color: var(--dc-accent-strong);
}

/* ==========================================================================
   9. ASYSTENT AI — jedyny złoty element paska
   Ciepły, jasny tint i znak marki; NIGDY wklęsły, żeby nie dało się go
   pomylić ze stanem bieżącej strony. Tint z drabinki alfy złota zamiast
   --dc-gradient-gold-soft: makieta nowego nagłówka ma tint wyraźnie lżejszy
   (.22/.10 wobec .62/.36 w starym). PŁASKI kolor, nie gradient (makieta:
   135deg a20 -> a10): najazd ciemni tint o jeden stopień drabinki, a
   background-image między dwoma gradientami nie przechodzi płynnie
   (w Chromium 1 krok, w Firefoksie wcale) — background-color przechodzi
   wszędzie. Na 40 px wysokości różnicy gradient/płaski nie widać
   (design-audit.md, C.2). Wzięty górny przystanek (a20), bo to on niesie
   mechanizm „ciemnieje o 0,1" na najeździe: a20 -> a30.
   ========================================================================== */
.dc-header__ai {
  grid-area: ai;
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-8);
  height: var(--dc-space-40);
  padding: 0 var(--dc-space-18) 0 var(--dc-space-14);
  border-radius: var(--dc-radius-pill);
  background-color: var(--dc-accent-a20);
  border: var(--dc-border) solid var(--dc-border-accent);
  box-shadow: var(--dc-shadow-inset-top);
  color: var(--dc-accent-strong);
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-md);
  font-weight: var(--dc-weight-bold);
  line-height: var(--dc-leading-none);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--dc-duration-base) var(--dc-ease),
    box-shadow var(--dc-duration-base) var(--dc-ease),
    transform var(--dc-duration-fast) var(--dc-ease-out);
}

/* Najazd: tint ciemnieje i dochodzi poświata — bez uniesienia. Nacisk czyta
   się z koloru, uniesienie nie dokładało nic widocznego (design-audit.md,
   C.2). Kliknięcie: zmniejszenie — patrz .dc-nav__link:active. */
.dc-header__ai:hover {
  background-color: var(--dc-accent-a30);
  box-shadow: var(--dc-shadow-inset-top), var(--dc-shadow-accent);
}

.dc-header__ai:active {
  transform: scale(0.97);
}

.dc-header__ai-mark {
  flex: none;
  width: var(--dc-space-16);
  height: auto;
}

/* Skrót „AI" pojawia się dopiero poniżej drugiego progu (sekcja 13). */
.dc-header__ai-short {
  display: none;
}

/* ==========================================================================
   10. KONTO I KOSZYK
   Konto (.dc-header__account) dzieli przepis z koszykiem: jeden odnośnik
   „Konto" / „Zaloguj się" (functions.php, dc_header_account_link()).
   ========================================================================== */

/* Koszyk jest neutralny (szkło, nie złoto) — złoto ma w pasku wyłącznie
   Asystent. Makieta rozjeżdża hover między motywami (jasny: biel ze złotą
   obwódką, ciemny: odwrócony na krem); scalone do wersji jasnej na tokenach. */
.dc-header__cart,
.dc-header__account {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-8);
  height: var(--dc-space-40);
  padding: 0 var(--dc-space-18);
  border-radius: var(--dc-radius-pill);
  background-color: var(--dc-surface-glass);
  border: var(--dc-border) solid var(--dc-border-line);
  color: var(--dc-text);
  font-size: var(--dc-text-md);
  font-weight: var(--dc-weight-bold);
  line-height: var(--dc-leading-none);
  text-decoration: none;
  white-space: nowrap;
  /* `color` na liście, choć hover go tu nie ustawia: base.css ma
     a:hover { color: --dc-accent-strong } o specyficzności wyższej niż
     klasa, więc kolor koszyka zmienia się pod kursorem — bez `color`
     na liście zmieniał się skokiem. */
  transition:
    background-color var(--dc-duration-base) var(--dc-ease),
    border-color var(--dc-duration-base) var(--dc-ease),
    color var(--dc-duration-base) var(--dc-ease),
    transform var(--dc-duration-fast) var(--dc-ease-out);
}

.dc-header__cart:hover,
.dc-header__account:hover {
  background-color: var(--dc-surface);
  border-color: var(--dc-accent-a50);
}

.dc-header__cart:active,
.dc-header__account:active {
  transform: scale(0.97);
}

.dc-header__cart .dc-icon,
.dc-header__account .dc-icon {
  flex: none;
}

/* Licznik: złoto z ciemnym tekstem w obu motywach. Makieta ma w ciemnym
   krem z czarnym tekstem — brak tokenu „złoto w jasnym, krem w ciemnym",
   a reguła 10 zabrania reguły dark dla koloru; scalone. */
.dc-header__cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--dc-space-20);
  height: var(--dc-space-20);
  padding-inline: var(--dc-space-6);
  border-radius: var(--dc-radius-pill);
  background-color: var(--dc-accent);
  color: var(--dc-on-accent);
  font-size: var(--dc-text-xs);
  font-weight: var(--dc-weight-bold);
  line-height: var(--dc-leading-none);
}

/* ==========================================================================
   11. RUCH WYŁĄCZONY
   Sekcja animuje (krzyżyk, suwak, nacisk pigułek) — własny blok zgodnie
   z regułą 12. Tu wszystkie przejścia są reakcją na działanie, więc
   „natychmiast" jest właściwym stanem spoczynku. Zmniejszenie na :active
   zostaje: to stan, nie ruch — bez przejścia pojawia się i znika od razu.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .dc-header__burger .dc-icon path,
  .dc-lang__chevron,
  .dc-theme-toggle__knob,
  .dc-header__ai {
    transition: none;
  }

  /* Lista języków pojawia się od razu, bez przenikania i zjazdu. Widoczność
     zostaje w przejściu (bez czasu trwania), bo to ona odsłania pudełko.
     translateX(-50%) zostaje mimo `none` w pozostałych regułach tego bloku —
     to wyśrodkowanie pod przyciskiem, nie ruch wejścia. */
  .dc-lang .dc-lang__list {
    transform: translateX(-50%);
    transition: none;
  }
}

/* ==========================================================================
   12. UKŁAD WĄSKI — jeden rząd + panel rozwijany

   PRÓG 1024 px — PIERWSZA Z DWÓCH WARTOŚCI W TYM PLIKU SPOZA TOKENÓW

   Dlaczego nie token.
   Warunku media query nie da się zapisać przez var(). Custom properties są
   własnością ELEMENTU i rozwiązują się dopiero w kaskadzie, a warunek @media
   jest oceniany wcześniej — zanim w ogóle istnieje element, którego można by
   o wartość zapytać. `@media (max-width: var(--dc-x))` nie jest błędem
   składni, po prostu nigdy nie zadziała. Rozwiązaniem docelowym jest
   @custom-media z Media Queries 5, ale to wciąż szkic roboczy W3C bez
   natywnej obsługi w żadnej przeglądarce — dziś wymaga kroku budowania,
   a projekt świadomie nie ma żadnego (patrz docs/decisions.md,
   „czysty CSS, bez Tailwinda").

   Skąd akurat 1024.
   Wyprowadzone pomiarem przy poprzedniej przebudowie nagłówka (decisions.md,
   2026-08-27): układ szeroki potrzebował ok. 1000 px (logo 151 + pigułka
   menu 380 + preferencje 135 + telefon i koszyk 230 + odstępy 48 + marginesy
   56), a próg stanął tuż nad tą granicą, na najbliższej okrągłej wartości.
   Nowy układ mierzy inaczej (Asystent wyszedł z pigułki i stoi obok niej),
   ale zadanie przebudowy kazało próg ZOSTAWIĆ, chyba że pomiar pokaże, że
   nie wystarcza — pomiar po przebudowie jest w docs/decisions.md.
   ========================================================================== */
@media (max-width: 1024px) {

  /* Pasek ma DOKŁADNIE jeden rząd: przycisk, logo, (wolne), Asystent,
     telefon i koszyk. Nawigacja i preferencje wychodzą z układu do panelu.
     Pionowo 12 px: makieta ma 65 px = 40 + 2×12 + obramowanie. */
  .dc-header__inner {
    grid-template-columns: auto auto 1fr auto auto;
    grid-template-areas: 'burger logo . ai quick';
    gap: var(--dc-space-10);
    padding-block: var(--dc-space-12);
  }

  .dc-header__burger {
    display: inline-flex;
  }

  .dc-header__logo img {
    height: var(--dc-space-28);
  }

  /* Panel jest pozycjonowany absolutnie, więc NIE wchodzi do przepływu
     i nie dokłada ani piksela do wysokości paska — nagłówek zostaje
     jednorzędowy niezależnie od tego, czy menu jest rozwinięte. */
  .dc-header__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    padding: var(--dc-space-10) clamp(var(--dc-space-16), 4vw, var(--dc-space-28)) var(--dc-space-16);
    /* Tło NIEPRZEZROCZYSTE (--dc-surface), a nie szkło jak reszta nagłówka.
       Dwa powody:
       1. Panel leży nad treścią strony. Przy --dc-surface-glass (alfa .86)
          przebijał przez niego tekst spod spodu i wiersze z językiem
          i motywem robiły się nieczytelne.
       2. backdrop-filter i tak by tego nie uratował. Rodzic .dc-header ma
          własny backdrop-filter, co tworzy „backdrop root" — filtr dziecka
          próbkuje wtedy tylko to, co narysowano WEWNĄTRZ tego roota,
          czyli nic. Zagnieżdżone rozmycie jest tu martwym zapisem,
          więc go nie ma. */
    background-color: var(--dc-surface);
    border-bottom: var(--dc-border) solid var(--dc-border-line);
    box-shadow: var(--dc-shadow-xl);
  }

  /* Jedyna reguła otwierająca — i siedzi w media query. Powyżej progu panel
     jest widoczny zawsze, więc zmiana szerokości okna przy rozwiniętym menu
     nie może zostawić nawigacji ukrytej. */
  .dc-header[data-dc-menu='open'] .dc-header__menu {
    display: flex;
  }

  /* Nawigacja pionowa: każda pozycja w całości na ekranie, bez obudowy
     pigułki — w panelu pozycje stoją luzem, a obudowę ma tylko bieżąca.
     Poprzednia wersja próbowała zmieścić pigułkę w poziomie z overflow-x:auto
     i nie działało to na dwa sposoby naraz — pigułka rosła ponad szerokość
     okna (416 px przy oknie 390 px), więc scrollWidth równał się clientWidth
     i nie było czego przewijać, a zamiast tego przewijała się cała strona.
     Układ pionowy usuwa oba problemy u źródła. */
  .dc-nav .dc-nav__list {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    padding: 0;
    border-radius: 0;
    background-color: transparent;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* display:flex zamiast inline-flex: odnośnik zajmuje CAŁĄ szerokość wiersza.
     Przy inline-flex cel dotykowy kończył się na tekście, więc kliknięcie
     obok słowa nie trafiało w nic. */
  .dc-nav__link {
    display: flex;
    justify-content: flex-start;
    min-height: var(--dc-space-48);
    padding: var(--dc-space-10) var(--dc-space-16);
    border-radius: var(--dc-radius-16);
    font-size: var(--dc-text-lg);
  }

  .dc-nav__link:hover {
    background-color: var(--dc-surface-sunken);
  }

  /* Wiersze „Motyw" i „Język" pod kreską. */
  .dc-header__prefs {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: var(--dc-space-12);
    padding-top: var(--dc-space-12);
    border-top: var(--dc-border) solid var(--dc-border-line);
  }

  .dc-header__pref {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dc-space-16);
    min-height: var(--dc-space-48);
    padding: 0 var(--dc-space-4) 0 var(--dc-space-16);
  }

  /* Makieta ma w pasku kolejność „język, motyw", a w panelu „motyw, język".
     DOM trzyma kolejność paska (tam klawiatura jest częstsza), panel
     przestawia wiersz motywu nad język właściwością order. Cena: w panelu
     Tab idzie najpierw przez język, potem motyw — o jeden wiersz wbrew
     kolejności wzrokowej. */
  .dc-header__pref--theme {
    order: -1;
  }

  .dc-header__pref-label {
    display: block;
    color: var(--dc-text-secondary);
    font-size: var(--dc-text-md);
    font-weight: var(--dc-weight-medium);
  }

  /* Język jako przełącznik segmentowy: przycisk rozwijający znika, a ta sama
     lista stoi na stałe w jednym rzędzie. Selektor sąsiedztwa z sekcji 7
     nie ma tu znaczenia — display:flex jest bezwarunkowe. */
  .dc-lang__toggle {
    display: none;
  }

  .dc-lang .dc-lang__list {
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--dc-space-4);
    min-width: 0;
    padding: var(--dc-space-4);
    border-radius: var(--dc-radius-22);
    background-color: var(--dc-surface-sunken);
    border-color: var(--dc-border-line);
    box-shadow: none;
    /* Cofnięcie mechaniki rozwijania z sekcji 7: w panelu lista stoi na
       stałe, więc musi być widoczna i klikalna niezależnie od aria-expanded
       przycisku, który jest tu ukryty. */
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: none;
  }

  /* Mostek najazdu nie ma tu czego łączyć — przycisk nie istnieje. */
  .dc-lang .dc-lang__list::before {
    content: none;
  }

  .dc-lang__option {
    justify-content: center;
    min-width: var(--dc-space-40);
    min-height: 0;
    height: var(--dc-space-32);
    padding: 0 var(--dc-space-10);
    border-radius: var(--dc-radius-pill);
    color: var(--dc-text-muted);
    font-size: var(--dc-text-base);
  }

  .dc-lang__option strong {
    min-width: 0;
    height: auto;
    border-radius: 0;
    background-color: transparent;
    color: inherit;
    font-size: inherit;
  }

  .dc-lang__option:hover strong,
  .dc-lang__option[aria-current='true'] strong {
    background-color: transparent;
    color: inherit;
  }

  /* Nazwa języka („Polski") zostaje w nazwie dostępnej, znika tylko
     wzrokowo — ta sama technika co .dc-sr-only w base.css, zapisana wprost,
     bo klasa nie niesie warunku @media. */
  .dc-lang__name {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .dc-lang__option:hover {
    background-color: var(--dc-surface-glass);
  }

  /* Bieżący język: uniesiona płytka — przeciwieństwo wciśniętej pozycji menu,
     żeby „wybrany język" i „bieżąca strona" nie wyglądały tak samo. */
  .dc-lang__option[aria-current='true'] {
    background-color: var(--dc-surface-glass);
    color: var(--dc-text);
    font-weight: var(--dc-weight-bold);
    box-shadow: var(--dc-shadow-sm), var(--dc-shadow-inset-top);
  }

  /* Asystent: w zwiniętym pasku wyższy (jak reszta przycisków) i ciaśniejszy. */
  .dc-header__ai {
    gap: var(--dc-space-6);
    padding: 0 var(--dc-space-16) 0 var(--dc-space-12);
  }

  .dc-header__quick {
    gap: var(--dc-space-10);
  }

  /* Koszyk kurczy się do okrągłego przycisku. Etykieta NIE znika przez
     display:none — to zabrałoby odnośnikowi dostępną nazwę, bo ikona jest
     aria-hidden. Zamiast tego chowamy ją wizualnie, zostawiając czytnikom. */
  .dc-header__cart-label,
  .dc-header__account-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .dc-header__cart,
  .dc-header__account {
    position: relative;
    justify-content: center;
    width: var(--dc-space-40);
    height: var(--dc-space-40);
    padding: 0;
    gap: 0;
    border-radius: var(--dc-radius-full);
    background-color: var(--dc-surface-glass);
    border: var(--dc-border) solid var(--dc-border-line);
    color: var(--dc-text);
  }

  .dc-header__cart .dc-icon,
  .dc-header__account .dc-icon {
    width: var(--dc-space-18);
    height: var(--dc-space-18);
    color: var(--dc-text);
  }

  /* Licznik wychodzi na róg koła. Obwódka w kolorze powierzchni odcina go
     od ikony pod spodem. */
  .dc-header__cart-count {
    position: absolute;
    top: calc(-1 * var(--dc-space-4));
    right: calc(-1 * var(--dc-space-4));
    min-width: var(--dc-space-22);
    height: var(--dc-space-22);
    padding-inline: var(--dc-space-4);
    border: var(--dc-border-heavy) solid var(--dc-surface);
  }
}

/* ==========================================================================
   13. NAJWĘŻSZY PASEK — „Asystent AI" skraca się do „AI"

   PRÓG 470 px — DRUGA WARTOŚĆ W TYM PLIKU SPOZA TOKENÓW

   Dlaczego nie token: jak przy 1024 px wyżej i 790 px w origin.css —
   warunku @media nie da się zapisać przez var().

   Skąd akurat 470. Zmierzone na żywym pasku w układzie zwiniętym, z pełnym
   napisem „Asystent AI" (Playwright, zwężanie okna od 520 px w dół, co 1 px
   w okolicy progu). Kolumna elastyczna między logo a Asystentem (1fr) kurczy
   się razem z oknem i spada do zera przy szerokości 469 px — odstęp logo →
   Asystent wynosi wtedy dokładnie dwa gapy siatki (20 px), czyli elementy
   stoją najbliżej, jak układ pozwala. Przy 468 px pasek NIE przepełnia okna
   (scrollWidth == clientWidth), tylko zaczyna ściskać logo: obraz ma
   max-width: 100% i w kolumnie auto zwęża się z 132,4 px do 131,4 px,
   a przy 440 px do 105,7 px. 469 to więc najszersze okno, w którym elementy
   już się stykają — zaokrąglone w górę do pełnej dziesiątki daje 470.

   Ściskanie logo zostaje jako łagodne wyjście awaryjne dla ekranów
   węższych, niż zmierzono (poniżej ok. 370 px ze skrótem): lepiej węższe
   logo niż poziome przewijanie całej strony — dokładnie ten defekt, który
   wywołał pierwszą przebudowę nagłówka (decisions.md, 2026-08-27).

   Skrót „AI" jest aria-hidden; pełny napis przechodzi w ukryty wzrokowo
   (technika .dc-sr-only zapisana wprost, bo klasa nie niesie warunku
   @media), więc nazwa dostępna odnośnika pozostaje „Asystent AI".

   Uwaga: próg zależy od SZEROKOŚCI TREŚCI paska — dłuższy numer telefonu
   nie ma wpływu (na wąskim ekranie to ikona), ale inny napis Asystenta,
   inne logo albo piąty przycisk w pasku unieważniają go bez sygnału.
   ========================================================================== */
@media (max-width: 470px) {
  .dc-header__logo img {
    height: var(--dc-space-24);
  }

  .dc-header__ai {
    gap: var(--dc-space-6);
    padding: 0 var(--dc-space-12) 0 var(--dc-space-10);
  }

  .dc-header__ai-full {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .dc-header__ai-short {
    display: inline;
  }
}