/**
 * fuel-switch.css — „Jakim teraz palisz węglem?": ciemny panel z dwiema
 * kartami-odnośnikami.
 *
 * Wymaga tokens.css, base.css i components/ring.css. Wszystko pod prefiksem
 * .dc-fuel-switch__, nic stąd nie wycieka na cudze znaczniki. Jedyny wyjątek
 * to .dc-ring (komponent), dostrajany WYŁĄCZNIE w selektorze potomnym pod
 * prefiksem sekcji.
 *
 * PANEL JEST CIEMNY W OBU MOTYWACH STRONY — patrz docblock fuel-switch.php.
 * Wynikają z tego wszystkie nietypowe rzeczy w tym pliku:
 *
 *   1. color-mix() zamiast tokenów z rodziny --dc-surface-glass /
 *      --dc-border-subtle. Tamte są PODMIENIANE między motywami i w motywie
 *      jasnym dałyby prawie nieprzezroczystą białą kartę na czarnym panelu.
 *      color-mix(in srgb, var(--dc-text-on-dark) N%, transparent) daje biel
 *      z alfą z tokenu jasnego W OBU MOTYWACH, bez nowego tokenu i bez
 *      wpisanego koloru — grep po hex/rgb go nie widzi. Technika wprowadzona
 *      w help-cta.css (tam też jej pełne uzasadnienie i zakres wsparcia
 *      przeglądarek).
 *
 *   2. Złoty TEKST bierze --dc-accent (#C9A84C, ta sama wartość w obu
 *      motywach), jak loyalty-cta, about i help-cta — od partii 3 audytu
 *      jeden odcień złota na wszystkich ciemnych panelach (design-audit.md,
 *      C.3). Makietowe --dc-accent-light (#e8cf8a) było jedynym jaśniejszym
 *      złotem na czerni bez różnicy roli. --dc-accent-strong odpada nadal:
 *      w motywie jasnym (#7c6420) byłby na tym panelu nieczytelny.
 *      Kontrast --dc-accent na #0A0907: 8,71:1.
 *
 *   3. JEDNA reguła [data-theme='dark'] NA KOLOR (sekcja 9, okienko sygnetu).
 *      Robi to samo co jedyna taka reguła w help-cta.css: przełącza między
 *      dwoma PRAWDZIWYMI tokenami o zbieżnej wartości (--dc-surface-inverse
 *      w jasnym / --dc-surface w ciemnym, oba #1C1A17), a nie wpisuje koloru.
 *      Panel takiej reguły już NIE potrzebuje — jego tło jest nieprzezroczystym
 *      obrazem, identycznym w obu motywach (patrz punkt 4 niżej).
 *
 * CO JEST TU LICZBĄ, A NIE TOKENEM (reguła 17, punkt 4 — grep ma coś znaleźć
 * i te trafienia są świadome):
 *
 *   1. `aspect-ratio: 8 / 3` na kadrze zdjęcia oraz procenty przy
 *      pozycjonowaniu warstw atmosfery i punktach zatrzymania gradientów.
 *      To geometria rysunku, nie wartość projektowa — dokładnie jak
 *      `7 / 6` w volume-picker.css i kąty gradientu w components/ring.css.
 *   2. `rgba(var(--dc-shadow-color), …)` w przyciemnieniu zdjęcia. Kanał
 *      barwy pochodzi z tokenu, literałem jest sama alfa — powód ten sam
 *      co w hero.css i volume-picker.css: CSS nie umie podać alfy do
 *      gotowego koloru bez relative color syntax, której Safari nie ma.
 *   3. `opacity: 0.82` na zdjęciu — wartość makiety, nie ma kategorii tokenu.
 *
 *   4. KOLORY I ROZMYCIA ATMOSFERY, WPROST Z MAKIETY (2026-08-28, po odrzuceniu
 *      pierwszej wersji: sekcja była prześwietlona na żółto). Reguła 15 pozwala
 *      scalać wartości NIEROZRÓŻNIALNE. Te rozróżnialne są i scalone być nie
 *      mogą — każde scalenie zmieniało wygląd:
 *
 *      a) TŁO PANELU to gradient CZTEROPRZYSTANKOWY (#2e2318 / #1a1208 /
 *         #0d0b07 / #0a0907). Trzy z tych czterech odcieni są CIEMNIEJSZE niż
 *         najciemniejsza powierzchnia palety w motywie jasnym
 *         (--dc-surface-inverse, #1C1A17), więc nie da się ich zbudować alfą
 *         nałożoną na token — kompozycja nigdy nie zejdzie poniżej podłoża.
 *         Pierwsza wersja miała trzy przystanki na tokenach i wychodziła
 *         płaska: zmierzony róg panelu #1a1200 wobec #0a0907 w makiecie.
 *         Kandydat na rodzinę tokenów „panel głęboki" — cztery wartości,
 *         te same w obu motywach.
 *
 *      b) `filter: blur()` Z LICZBĄ, nie `--dc-blur-*`. To jest źródło
 *         żółtego prześwietu w odrzuconej wersji, ważniejsze od samych alf:
 *         --dc-blur-xl dokłada saturate(190%), --dc-blur-lg 165%,
 *         --dc-blur-md 175%. Makieta nie ma saturate() w ŻADNEJ z tych
 *         czterech warstw, a poświaty są złote — podbicie nasycenia o 90%
 *         wychodzi wprost na panel. Jedyny czysty token, --dc-blur-sm
 *         (blur(10px)), jest o 14–30 px za wąski. Kandydat na rodzinę
 *         tokenów rozmycia BEZ saturate().
 *
 *      c) ZŁOTE POŚWIATY IDĄ Z DRABINKI --dc-accent-aNN (partia 3 audytu,
 *         design-audit.md, B.3). Makieta miała tu trzy własne odcienie —
 *         rgba(160,100,30), rgba(180,110,20), rozbłysk .18 — ale przy alfie
 *         .06–.18 i rozmyciu 24–40 px nie da się ich odróżnić od --dc-accent
 *         w tej samej alfie; pierwsza wersja tej sekcji trzymała je jako
 *         literały właśnie z obawy o barwę. Ostatni literał barwy —
 *         rgba(80,65,50), „chłodniejsza szarość" w prawym górnym rogu —
 *         zniknął w partii 4 audytu razem z całą tą plamą (sekcja 3).
 *
 *      d) (nieaktualne od partii 4 audytu) CIENIE KARTY były czarnymi
 *         literałami (.42 spoczynek, .5 najazd) z tą samą geometrią co
 *         --dc-shadow-2xl / -3xl. Teraz to --dc-shadow-2xl-on-dark
 *         i -3xl-on-dark z tokens.css: ta geometria, kanał czarny
 *         (--dc-shadow-color-on-dark), alfa z drabinki tokenów.
 *
 * SKĄD SIĘ BIERZE 8 / 3. Kadr zdjęcia ma w makiecie stałe 200 px wysokości.
 * Stała wysokość przy siatce auto-fit znaczy co innego przy każdej szerokości
 * okna, więc zamiast niej idzie proporcja — zmierzona przy 1440 px, gdzie
 * karta ma 528 px szerokości: 528 / 200 = 2,64, czyli 8/3 z dokładnością
 * do 1%. Ten sam wybór i ten sam powód co w volume-picker.css.
 */

/* ==========================================================================
   1. PANEL
   ========================================================================== */

/* .dc-fuel-switch nie ma tu żadnej deklaracji — szerokość i marginesy boczne
   daje .dc-container, pionowy oddech .dc-section, obie z base.css bez
   modyfikacji (reguła 8). Klasa zostaje w znaczniku jako nazwa bloku. */

/* Tło panelu to CZTEROPRZYSTANKOWY gradient wprost z makiety — patrz nagłówek
   pliku, punkt 4a. Cztery przystanki, nie trzy: #1a1208 na 38% i #0d0b07
   na 68% robią całą głębię, a bez nich panel jest płaski i za jasny (tak
   wyglądała pierwsza, odrzucona wersja).

   Gradient jest NIEPRZEZROCZYSTY na całej powierzchni — ostatni przystanek
   rozlewa się poza elipsę — więc background-color jest tylko awaryjny,
   a reguły [data-theme] panel nie potrzebuje wcale: ten obraz jest ten sam
   w home.html i home-dark.html, co do przecinka.

   overflow: hidden — warstwy atmosfery (sekcja 3) celowo wychodzą poza obrys
   panelu i muszą zostać przycięte jego promieniem. */
.dc-fuel-switch__panel {
  position: relative;
  isolation: isolate;
  padding-block: clamp(var(--dc-space-40), 5vw, var(--dc-space-64));
  padding-inline: clamp(var(--dc-space-24), 4vw, var(--dc-space-48));
  border-radius: var(--dc-radius-28);
  background-color: #0a0907;
  background-image: radial-gradient(
    ellipse 120% 90% at 50% -8%,
    #2e2318 0%,
    #1a1208 38%,
    #0d0b07 68%,
    #0a0907 100%
  );

  /* Cień rzucany: makietowe 0 50px 110px rgba(0,0,0,.48) scalone
     do --dc-shadow-2xl (0 24px 60px), największego w zestawie — reguła 15.
     Włosowa linia u góry NIE może wziąć --dc-shadow-inset-top: ten token
     jest w motywie jasnym bielą .95, czyli jasną kreską na czarnym panelu.
     Tu potrzebna jest wartość NIEZMIENNA między motywami (makieta ma .07
     w obu), więc idzie przez color-mix, jak reszta bieli w tym pliku.
     Grubość kreski to --dc-border — to ta sama jedna kreska, którą ten token
     opisuje wszędzie indziej. */
  box-shadow:
    var(--dc-shadow-2xl),
    inset 0 var(--dc-border) 0 color-mix(in srgb, var(--dc-text-on-dark) 7%, transparent);
}

/* ==========================================================================
   2. OBWÓDKA — DOSTROJENIE KOMPONENTU
   Warstwy wstawia znacznik: poświata, refleks i łuk (patrz docblock
   fuel-switch.php). Wartości makiety trafiają w domyślne pokrętła co do
   jednej: rant 1,5 px (--dc-ring-inset), obrót w prawo (dcRingSpin),
   gradient refleksu 155deg to co do przecinka --dc-gradient-specular.
   Jedyna różnica to czas — 7,5 s w makiecie ciemnej, 5 s w jasnej — scalony
   do domyślnych 7 s zgodnie z regułą 15.
   Poświata (.dc-ring--halo) DOŁOŻONA w partii 6 audytu — odwołanie decyzji
   z 2026-08-28 „obwódka z makiety ciemnej, bez poświaty" (decisions.md,
   2026-08-30). Powód z pomiaru partii 5: kreska łuku jest w obu motywach
   identyczna co do piksela, ale w motywie jasnym za krawędzią czarnego
   panelu leży jasna strona (7–10 poziomów kontrastu wobec 237 w ciemnym),
   więc bez poświaty łuk czyta się jako prześwit tła, nie jako obwódka;
   help-cta — też czarny w obu motywach — poświatę ma i jako jedyny ciemny
   panel czytał się w jasnym motywie. W motywie ciemnym komponent chowa
   poświatę sam (display: none), więc tam nic się nie zmienia.
   ========================================================================== */

/* Refleks jest w komponencie widoczny WYŁĄCZNIE w motywie ciemnym: na jasnym
   tle strony karta odcina się sama, więc nie jest potrzebny. Ten panel jest
   ciemny w obu motywach, więc obowiązuje go układ warstw motywu ciemnego —
   zawsze. To różnica NIEKOLOROWA (obecność warstwy), czyli dokładnie ten typ
   wyjątku, który reguła 10 każe trzymać w pliku sekcji, a nie w tokenach. */
.dc-fuel-switch__panel .dc-ring--specular {
  display: block;
}

/* FAZA I ZWROT — numer 10 z rejestru w components/ring.css: start o 10/12
   obrotu (300°), parzysty numer, czyli obrót w prawo (domyślny dcRingSpin,
   wypisany jawnie, żeby rejestr był czytelny u siebie). Liczba jest umowna
   — znaczy tylko, że żadna inna sekcja jej nie ma; nie zależy od miejsca
   sekcji na stronie (partia 5 audytu). Pokrętła na panelu, nie na warstwie:
   zmienne własne dziedziczą się w dół. */
.dc-fuel-switch__panel {
  --dc-ring-spin: dcRingSpin;
  --dc-ring-delay: calc(var(--dc-duration-ring) * -10 / 12);
}

/* ==========================================================================
   3. ATMOSFERA — dwie plamy z makiety: rozbłysk u góry, żar u dołu
   Obie leżą pod treścią (--dc-z-base) i nie łapią kursora. Rozmiary
   i pozycje w procentach panelu, bo taka jest makieta i bo dzięki temu
   skalują się razem z nim bez ani jednego breakpointu.

   Makieta miała pięć warstw. Trzy zdjęte w partii 4 audytu (design-audit.md,
   C.5 — plamy się nie nakładają, wzorzec z #calculator): „ciepły akcent"
   w lewym dolnym rogu nakładał się na żar (zmierzone obrysy przy progu 3:
   0,412–539,908 wobec 282,624–889,873), „chłodniejsza szarość" w prawym
   górnym na rozbłysk (825,28–1174,416 wobec 183,0–985,304), a „struktura
   węgla" (kreski biel .012) dawała maks. 3/255 różnicy i zero pikseli
   powyżej progu 8 — koszt bez efektu.
   ========================================================================== */

/* WARSTWA ATMOSFERY — owijka plam (partia 6 audytu). Do partii 6 panel sam
   miał overflow: hidden i to on przycinał obie plamy do obrysu. Poświata
   obwódki (.dc-ring--halo) leży 4 px POZA panelem, więc przy takim panelu
   byłaby obcięta — dlatego przycinanie schodzi z panelu na tę warstwę:
   absolutna, równa z panelem, z jego promieniem, pod treścią. Plamy w niej
   mają ten sam układ odniesienia co przedtem (pudełko panelu), więc ich
   procenty i przesunięcia nie zmieniają znaczenia. */
.dc-fuel-switch__atmosphere {
  position: absolute;
  inset: 0;
  z-index: var(--dc-z-base);
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.dc-fuel-switch__glow {
  position: absolute;
  z-index: var(--dc-z-base);
  pointer-events: none;
}

/* Złoty rozbłysk centralny u góry. Przystanki z drabinki złota (nagłówek
   pliku, punkt 4c): makietowe .18 -> a20, .06 -> a05.

   Rozmycie jest liczbą (nagłówek, punkt 4b). --dc-blur-xl dokłada
   saturate(190%), którego makieta nie ma, i to ono — a nie alfa — robiło
   z tej warstwy żółty przeświet. */
.dc-fuel-switch__glow--crown {
  inset-block-start: -20%;
  inset-inline-start: 50%;
  width: 75%;
  height: 65%;
  transform: translateX(-50%);
  background-image: radial-gradient(
    ellipse,
    var(--dc-accent-a20),
    var(--dc-accent-a05) 45%,
    var(--dc-accent-a00) 70%
  );
  filter: blur(32px);
  animation: dcFuelSwitchGlow var(--dc-duration-float) var(--dc-ease) infinite;
}

/* Żar od dołu. Drabinka złota jak przy poświacie ciepłej: makietowe
   rgba(180,110,20,.12) -> --dc-accent-a10 (nagłówek pliku, punkt 4c). */
.dc-fuel-switch__glow--ember {
  inset-block-end: 0;
  inset-inline-start: 50%;
  width: 60%;
  height: 28%;
  transform: translateX(-50%);
  background-image: radial-gradient(
    ellipse at 50% 100%,
    var(--dc-accent-a10),
    var(--dc-accent-a00) 70%
  );
  filter: blur(24px);
}

/* ==========================================================================
   4. NAGŁÓWEK SEKCJI
   Wyśrodkowany i ograniczony do 680 px — --dc-measure-xl trafia w makietę
   dokładnie.
   ========================================================================== */

.dc-fuel-switch__header {
  position: relative;
  z-index: var(--dc-z-raised);
  max-width: var(--dc-measure-xl);
  margin-inline: auto;
  margin-block-end: var(--dc-space-48);
  text-align: center;
}

/* Nadtytuł jest PIGUŁKĄ, nie samym tekstem — inaczej niż w help-cta, facts
   i wholesale. Świecąca kropka przed nim to ::before: czysta dekoracja, więc
   nie potrzebuje ani znacznika, ani aria-hidden.
   Scalenia: padding 7/16 -> --dc-space-6 / --dc-space-16, tło .12 ->
   --dc-accent-a10, obwódka .32 -> --dc-accent-a30. Pismo: jeden nadtytuł
   sekcji w motywie (design-audit.md, C.8; partia 6) — 12 px / 600 /
   --dc-tracking-widest i odstęp 14 do h2; makietowe 11,5 / 700 / .14em / 20
   zostaje tylko jako kształt pigułki, który jest własnością tej sekcji. */
.dc-fuel-switch__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-8);
  margin-block-end: var(--dc-space-14);
  padding-block: var(--dc-space-6);
  padding-inline: var(--dc-space-16);
  border: var(--dc-border) solid var(--dc-accent-a30);
  border-radius: var(--dc-radius-pill);
  background-color: var(--dc-accent-a10);
  font-size: var(--dc-text-sm);
  font-weight: var(--dc-weight-medium);
  letter-spacing: var(--dc-tracking-widest);
  text-transform: uppercase;
  color: var(--dc-accent);
}

/* Makietowe tętno 2,4 s scalone do --dc-duration-float (7 s). Komentarz przy
   tym tokenie w tokens.css mówi wprost „plakietka, drobny element", czyli
   dokładnie ten przypadek; osobnego tokenu na 2,4 s nie ma i nie powstaje
   pod jedną kropkę (reguła 15). Zgłoszone w raporcie.
   Poświata 0 0 10px pełnego złota ZDJĘTA w partii 6 audytu: poświata jest
   w motywie zarezerwowana dla rangi 1 przycisków (design-audit.md, C.4 —
   „jedyna poświata na stronie"), a kropka tętni krycie sama, bez niej. */
.dc-fuel-switch__eyebrow::before {
  content: '';
  display: block;
  flex: none;
  width: var(--dc-space-6);
  height: var(--dc-space-6);
  border-radius: var(--dc-radius-full);
  background-color: var(--dc-accent);
  animation: dcFuelSwitchGlow var(--dc-duration-float) var(--dc-ease) infinite;
}

/* Rozmiar, wagę i interlinię daje base.css (h2 -> --dc-display-3, czyli
   dokładnie clamp z makiety; sufit 44 px z makiety jest już wchłonięty
   w scalenie tego tokenu). Tu tylko kolor i ciaśniejszy trakt: makieta ma
   -0,03em, a base.css daje h2 -0,02em. */
.dc-fuel-switch__heading {
  /* Odstęp do leadu 14 jak w każdej sekcji (design-audit.md, C.10; partia 6). */
  margin-block-end: var(--dc-space-14);
  letter-spacing: var(--dc-tracking-tighter);
  color: var(--dc-text-on-dark);
}

.dc-fuel-switch__lead {
  font-size: var(--dc-text-2xl);
  line-height: var(--dc-leading-relaxed);
  color: var(--dc-text-on-dark-muted);
}

/* ==========================================================================
   5. SIATKA DWÓCH KART
   auto-fit z minimalną szerokością kolumny, bez breakpointu (reguła 9).
   Makietowe minmax(320px) trafia w --dc-grid-min-lg co do piksela.
   Liczba kolumn na trzech szerokościach zmierzona — tabela w raporcie.

   min(..., 100%) jest OBOWIĄZKOWE, tak samo jak w .dc-grid z base.css:
   bez niego ścieżka minimalna toru (320 px) jest szersza niż wnętrze panelu
   przy 390 px i karty wychodzą poza jego obrys. Sam auto-fit tego nie
   chroni — zwija liczbę kolumn, nie ich minimalną szerokość.
   ========================================================================== */

.dc-fuel-switch__grid {
  position: relative;
  z-index: var(--dc-z-raised);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--dc-grid-min-lg), 100%), 1fr));
  gap: var(--dc-space-24);
}

/* Element listy jest tylko uchwytem siatki — cały wygląd nosi odnośnik
   w środku. display: flex, żeby karta wypełniła wysokość toru i obie karty
   kończyły się na tej samej linii mimo różnej długości tekstu. */
.dc-fuel-switch__item {
  display: flex;
}

/* ==========================================================================
   6. KARTA — CAŁA JEST ODNOŚNIKIEM
   Dlatego reakcja na najazd kursorem z makiety zostaje przeniesiona:
   reguła 14 zabrania jej tam, gdzie obiecuje kliknięcie, którego nie ma.
   Tu kliknięcie jest.

   Kolor tekstu ustawiony jawnie, bo base.css daje każdemu <a>
   --dc-accent-strong — w motywie jasnym na tym panelu prawie niewidoczne.
   ========================================================================== */

.dc-fuel-switch__card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border: var(--dc-border) solid color-mix(in srgb, var(--dc-text-on-dark) 10%, transparent);
  border-radius: var(--dc-radius-22);
  background-color: color-mix(in srgb, var(--dc-text-on-dark) 5%, transparent);

  /* Cień czarny z tokens.css (nagłówek pliku, punkt 4d): geometria
     --dc-shadow-2xl, kanał --dc-shadow-color-on-dark. Dwie warstwy w obu
     stanach — przeglądarka przenika listy cieni tylko o tej samej długości,
     więc najazd niżej też ma dwie. Złota poświata najazdu z makiety
     (0 0 40px .22) zdjęta w partii 4 audytu: poświata złota jest
     zarezerwowana dla rangi 1 (C.4), a kartę na najeździe obrysowuje
     obwódka a50. */
  box-shadow:
    var(--dc-shadow-2xl-on-dark),
    inset 0 var(--dc-border) 0 color-mix(in srgb, var(--dc-text-on-dark) 7%, transparent);
  color: var(--dc-text-on-dark);
  text-decoration: none;
  transition:
    border-color var(--dc-duration-slow) var(--dc-ease),
    box-shadow var(--dc-duration-slow) var(--dc-ease),
    color var(--dc-duration-slow) var(--dc-ease);
}

/* Najazd karty-odnośnika (design-audit.md, C.2): obwódka -> a50 i cień
   o jeden stopień wyżej z tą samą liczbą warstw, bez uniesienia — kartę
   „unosi" sam cień. --dc-shadow-3xl-on-dark to co do piksela makietowe
   0 40px 90px, z alfą .45 zamiast .5. Pierwsza wersja tej sekcji miała
   tu --dc-shadow-2xl + --dc-shadow-accent, czyli granatowy cień o połowie
   mocy plus mocniejszą złotą poświatę — wychodziło żółte halo bez cienia
   pod spodem; czarny kanał to załatwia bez poświaty. */
.dc-fuel-switch__card:hover {
  border-color: var(--dc-accent-a50);
  box-shadow:
    var(--dc-shadow-3xl-on-dark),
    inset 0 var(--dc-border) 0 color-mix(in srgb, var(--dc-text-on-dark) 10%, transparent);
  color: var(--dc-text-on-dark);
}

/* Pierścień fokusu: globalny domyślny z base.css, bez nadpisania koloru —
   tylko promień dopasowany do kształtu karty, jak w help-cta.css i hero.css.
   Kontrast zmierzony, tabela w raporcie. */
.dc-fuel-switch__card:focus-visible {
  border-radius: var(--dc-radius-22);
}

/* ==========================================================================
   7. KADR ZE ZDJĘCIEM
   Proporcja zamiast stałej wysokości — skąd 8/3, patrz nagłówek pliku.
   ========================================================================== */

.dc-fuel-switch__figure {
  position: relative;
  display: block;
  aspect-ratio: 8 / 3;
  overflow: hidden;
}

/* height: 100% wygrywa z base.css (`img { height: auto }`) specyficznością
   klasy, więc zdjęcie wypełnia kadr, a object-fit przycina nadmiar.
   Przesunięcie kadru dotyczy WYŁĄCZNIE karty groszku — makieta podstawia
   pod obie karty ten sam plik i różnicuje je właśnie tym (patrz TODO
   w fuel-switch.php). */
.dc-fuel-switch__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.82;
}

.dc-fuel-switch__photo--shift {
  object-position: 22% center;
}

/* Przyciemnienie u góry kadru (żeby plakietka miała się na czym położyć)
   i ciepły refleks w prawym dolnym rogu. Kanał barwy przyciemnienia
   pochodzi z --dc-shadow-color, literałem jest sama alfa — patrz nagłówek
   pliku, punkt 2. */
.dc-fuel-switch__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(
      180deg,
      rgba(var(--dc-shadow-color), 0.25),
      rgba(var(--dc-shadow-color), 0.04) 60%
    ),
    radial-gradient(50% 60% at 70% 90%, var(--dc-accent-a20), var(--dc-accent-a00) 60%);
}

/* Plakietka granulacji. Tło makiety to złoto z alfą .92 — scalone do pełnego
   --dc-accent: przy tej alfie faktura zdjęcia i tak nie przechodzi, a złoto
   jest jedynym tokenem NIEPODMIENIANYM między motywami, więc plakietka
   wygląda tak samo w obu.
   Scalenia: padding 7/14. Makietowy cień 0 8px 20px rgba(0,0,0,.3) zdjęty
   w partii 4 audytu (C.4: plakietka na czarnym panelu bez cienia; jako
   --dc-shadow-lg był w motywie jasnym granatem na zdjęciu, maks. 8/255). */
.dc-fuel-switch__badge {
  position: absolute;
  inset-block-start: var(--dc-space-16);
  inset-inline-start: var(--dc-space-16);
  display: inline-flex;
  align-items: baseline;
  gap: var(--dc-space-6);
  padding-block: var(--dc-space-6);
  padding-inline: var(--dc-space-14);
  border-radius: var(--dc-radius-pill);
  background-color: var(--dc-accent);
}

.dc-fuel-switch__badge-value {
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-lg);
  font-weight: var(--dc-weight-black);
  letter-spacing: var(--dc-tracking-snug);
  color: var(--dc-on-accent);
}

/* Podpis „granulacja" jest w makiecie jaśniejszy od liczby (#5a4a16 wobec
   #221a06). Tego odcienia NIE może dać --dc-accent-strong, choć wartość
   się zgadza: ten token przełącza się z motywem i w ciemnym stałby się
   jasnym złotem na złotej plakietce. Zamiast tego liczba i podpis biorą ten
   sam token --dc-on-accent, a podpis rozjaśnia go w stronę tła plakietki
   przez color-mix — jeden odcień jaśniej, bez wyjścia poza tokeny i bez
   różnicy między motywami. Proporcja 75/25, nie makietowa: przy pełnej
   wartości makiety kontrast na złocie wychodzi 3,80:1, poniżej progu 4,5:1
   dla pisma 10 px (korekta kontrastu wzorem z tokens.css). Zmierzone —
   tabela w raporcie. */
.dc-fuel-switch__badge-label {
  font-size: var(--dc-text-2xs);
  font-weight: var(--dc-weight-bold);
  color: color-mix(in srgb, var(--dc-on-accent) 75%, var(--dc-accent));
}

/* ==========================================================================
   8. TREŚĆ KARTY
   Scalenia: padding 30/30/32 -> --dc-space-28 po bokach i u góry,
   --dc-space-32 u dołu.
   ========================================================================== */

.dc-fuel-switch__body {
  display: block;
  padding-block: var(--dc-space-28) var(--dc-space-32);
  padding-inline: var(--dc-space-28);
}

/* Nadtytuł karty ma trakt .13em -> --dc-tracking-wider (.12em), pismo 12 px
   -> --dc-text-sm; waga 600 i odstęp 8 jak nadtytuł karty kalkulatora
   (design-audit.md, C.8; partia 6). Złoto tekstowe jak wszędzie w tej
   sekcji: --dc-accent (nagłówek pliku, punkt 2). */
.dc-fuel-switch__card-eyebrow {
  margin-block-end: var(--dc-space-8);
  font-size: var(--dc-text-sm);
  font-weight: var(--dc-weight-medium);
  letter-spacing: var(--dc-tracking-wider);
  text-transform: uppercase;
  color: var(--dc-accent);
}

/* h3 z base.css ma --dc-text-2xl (17 px); makieta daje tu 23 px, czyli
   --dc-text-5xl (22 px, skupisko 22/23). Waga, krój i trakt zostają
   z base.css. */
.dc-fuel-switch__card-title {
  margin-block-end: var(--dc-space-12);
  font-size: var(--dc-text-5xl);
  color: var(--dc-text-on-dark);
}

.dc-fuel-switch__card-text {
  display: block;
  margin-block-end: var(--dc-space-24);
  font-size: var(--dc-text-lg);
  line-height: var(--dc-leading-relaxed);
  color: var(--dc-text-on-dark-muted);
}

/* Wezwanie w karcie — ten sam wzorzec co .dc-origin__more-link
   i .dc-wholesale__link: złota kreska pod tekstem, strzałka odjeżdżająca
   przy najeździe. TRZECIE wystąpienie w projekcie, czyli moment, w którym
   reguła 18 każe wydzielić komponent. Nie robię tego w tym zadaniu, bo ta
   kopia RÓŻNI SIĘ od dwóch poprzednich w sposób, który dopiero pokazuje,
   co jest zmienną: kolor tekstu (złoto jasne zamiast --dc-text), reakcja
   wyzwalana najazdem na RODZICA, nie na sam odnośnik, i brak własnego
   fokusu (klikalna jest karta). Kandydat zgłoszony w raporcie razem
   z listą pokręteł, których taki komponent by potrzebował. */
.dc-fuel-switch__more {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-8);
  padding-block-end: var(--dc-space-4);
  border-block-end: var(--dc-border-heavy) solid var(--dc-accent-a50);
  font-size: var(--dc-text-lg);
  font-weight: var(--dc-weight-bold);
  color: var(--dc-accent);
  transition: gap var(--dc-duration-base) var(--dc-ease);
}

/* Rozjazd gapu wyzwala najazd na CAŁĄ kartę, bo cała karta jest odnośnikiem.
   Bloku prefers-reduced-motion nie trzeba: to przejście, nie ruch ciągły,
   a globalny wyłącznik w base.css tnie jego czas do 0.01ms, czyli robi
   dokładnie to, co powinien (reguła 12). */
.dc-fuel-switch__card:hover .dc-fuel-switch__more {
  gap: var(--dc-space-14);
}

/* Rusza się SAM grot (reguła 22): ikona dostaje w tej samej chwili ujemny
   margines o różnicę gapów, więc obrys odnośnika nie zmienia szerokości
   i tekst stoi niezależnie od wyrównania rodzica. Tu karta jest wyrównana
   do lewej, więc przed poprawką też stał — reguła jest jedna dla wszystkich
   siedmiu odnośników z grotem, także tych, którym akurat nie szkodziło. */
.dc-fuel-switch__more .dc-icon {
  transition: margin-inline-end var(--dc-duration-base) var(--dc-ease);
}

.dc-fuel-switch__card:hover .dc-fuel-switch__more .dc-icon {
  margin-inline-end: calc(var(--dc-space-8) - var(--dc-space-14));
}

/* ==========================================================================
   9. PRZYCISK POD KARTAMI I PODPIS POD NIM
   Przycisk, a pod nim tekst pomocniczy — ten sam układ i ten sam przepis
   podpisu co .dc-loyalty-cta__foot / __foot-note (poprawki po audycie,
   2026-08-30). Do tej pory tekst stał OBOK przycisku w jednym wierszu
   (flex-wrap, gap 16; makietowe 44 px odstępu nad paskiem scalone do
   --dc-space-40) — jedyne takie miejsce na stronie: podpis POD elementem
   mają ai-assistant (__terms), kalkulator (__disclaimer), stopka
   (__consent) i loyalty-cta (__foot-note). Kolejność w znaczniku jest
   kolejnością wizualną (przycisk, potem tekst) — bez `order`, żeby czytnik
   ekranu czytał w tej samej kolejności, w jakiej widać.
   ========================================================================== */

.dc-fuel-switch__helper {
  position: relative;
  z-index: var(--dc-z-raised);
  margin-block-start: var(--dc-space-40);
  text-align: center;
}

/* Podpis — przepis z .dc-loyalty-cta__foot-note co do deklaracji: 13 px,
   odstęp 14 od przycisku, biel 50 % przez color-mix (makieta miała .48
   przy 16 px jako tekst prowadzący obok przycisku). Zmierzone na tle panelu
   po zmianie: 5,32:1 jasny / 4,84:1 ciemny (biel / krem 50 % na rgb(10,9,7)) — to samo, co __foot-note w loyalty. */
.dc-fuel-switch__helper-text {
  margin-block-start: var(--dc-space-14);
  font-size: var(--dc-text-base);
  color: color-mix(in srgb, var(--dc-text-on-dark) 50%, transparent);
}

/* Pigułka asystenta. Geometria, waga, hover i fokus skopiowane z drugiego
   przycisku help-cta (.dc-help-cta__cta--secondary) — warstwa components/
   nie ma jeszcze przycisku, więc nowa sekcja nie wymyśla własnego (zasada
   ze skilla dc-section). Różnice wobec makiety: obwódka .42/.72 scalona
   do --dc-accent-a50 w obu stanach (drabinka alfy kończy się na .50),
   blur(14px) -> --dc-blur-sm (10 px). Makietowy cień 0 2px 18px
   rgba(0,0,0,.32) zdjęty w partii 4 audytu (C.4: ranga 2 i elementy na
   czarnym panelu bez cienia; jako --dc-shadow-md dawał maks. 2/255). */
.dc-fuel-switch__assistant {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-12);
  padding-block: var(--dc-space-12);
  padding-inline: var(--dc-space-14) var(--dc-space-22);
  border: var(--dc-border) solid var(--dc-accent-a50);
  border-radius: var(--dc-radius-16);
  background-color: color-mix(in srgb, var(--dc-text-on-dark) 7%, transparent);
  -webkit-backdrop-filter: var(--dc-blur-sm);
  backdrop-filter: var(--dc-blur-sm);
  color: var(--dc-accent);
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-lg);
  font-weight: var(--dc-weight-bold);
  letter-spacing: var(--dc-tracking-snug);
  line-height: var(--dc-leading-none);
  text-decoration: none;
  transition:
    background-color var(--dc-duration-base) var(--dc-ease),
    border-color var(--dc-duration-base) var(--dc-ease);
}

/* Makieta: tło .13, obwódka .72, cień 0 4px 28px rgba(201,168,76,.22).
   Bez uniesienia i bez większego rozmycia. Tło .13 mieści się w skali
   --dc-accent-a10 (tokens.css: „.10 / .12 / .13"), więc zostaje tokenem.
   Obwódka na najeździe zawsze --dc-accent-a50 — makietowe .72 leżało poza
   drabinką, a różnicy dwóch dziesiątych przy 1 px nie widać; a50 jest
   najazdem obwódki w pięciu innych miejscach (design-audit.md, C.3,
   decyzja z partii 3: bez tokenu a70). Makietowa poświata najazdu
   0 4px 28px rgba(201,168,76,.22) zdjęta w partii 4 audytu: ranga 2
   reaguje wyłącznie kolorem (C.2), a złota poświata należy do rangi 1
   (C.4) — zostaje tło a10. */
.dc-fuel-switch__assistant:hover {
  border-color: var(--dc-accent-a50);
  background-color: var(--dc-accent-a10);
  color: var(--dc-accent);
}

.dc-fuel-switch__assistant:focus-visible {
  border-radius: var(--dc-radius-16);
}

/* Ciemne okienko pod sygnetem. Makieta ma tu rgba(10,8,4,.55), czyli prawie
   czerń — ta sama para tokenów co tło panelu (sekcja 1) daje ją w obu
   motywach, bez wpisywania koloru. Promień 9 px -> --dc-radius-8,
   obwódka .28 -> --dc-border-accent (.3). */
.dc-fuel-switch__assistant-mark {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--dc-space-32);
  height: var(--dc-space-32);
  border: var(--dc-border) solid var(--dc-border-accent);
  border-radius: var(--dc-radius-8);
  background-color: var(--dc-surface-inverse);
}

[data-theme='dark'] .dc-fuel-switch__assistant-mark {
  background-color: var(--dc-surface);
}

/* ==========================================================================
   10. RUCH — tętno poświat
   Klatki mieszkają w pliku sekcji, nie w base.css: base.css rejestruje
   prymitywy używane przez KOMPONENTY (@property --dc-ring, dcRingSpin),
   a to tętno ma tylko ta jedna sekcja — dokładnie jak dcHeroFloat
   w hero.css i dcFaqReveal w faq.css.
   ========================================================================== */

@keyframes dcFuelSwitchGlow {
  0%,
  100% {
    opacity: 0.35;
  }

  50% {
    opacity: 0.85;
  }
}

/* Globalny wyłącznik w base.css tnie animation-duration do 0.01ms z jedną
   iteracją. Dla ruchu CIĄGŁEGO to znaczy „doskocz do końca i stój", czyli
   poświaty zamarłyby na 35% krycia w połowie oddechu. Skrót animation: none
   zeruje animation-name, którego tamten !important nie obejmuje, więc
   wygrywa — a opacity wraca do 1 i poświaty świecą pełnią, nieruchomo
   (reguła 12: blok dokłada ten, KTO ANIMUJE). */
@media (prefers-reduced-motion: reduce) {
  .dc-fuel-switch__glow--crown,
  .dc-fuel-switch__eyebrow::before {
    animation: none;
  }
}