/**
 * calculator.css — „Kalkulator zapotrzebowania": jasny panel w ciepłym
 * gradiencie, dwie kolumny (formularz | karta wyniku), pod panelem
 * odnośnik otwierający okno doradcy.
 *
 * Wymaga tokens.css, base.css, components/ring.css i components/modal.css.
 * Wszystko pod prefiksem .dc-calculator__, nic stąd nie wycieka na cudze
 * znaczniki. Komponent .dc-ring dostaje tu wyłącznie fazę i zwrot
 * z rejestru (sekcja 2), .dc-modal nie jest dostrajany ani jedną
 * deklaracją — panel podąża za motywem, więc obowiązują ich wartości
 * domyślne; zawartość okna (sekcje 13–17) stoi WEWNĄTRZ panelu komponentu
 * i nie sięga do jego klas.
 *
 * PANEL PODĄŻA ZA MOTYWEM — inaczej niż w loyalty-cta, gdzie był zawsze
 * ciemny. Dzięki temu cały tekst bierze zwykłą rodzinę --dc-text, złoto
 * tekstowe --dc-accent-strong (reguła J), a jedyna reguła [data-theme]
 * NA KOLOR w pliku (sekcja 7, wciśnięty przełącznik) przełącza między
 * dwiema PRAWDZIWYMI parami tokenów, nie wpisuje koloru — makieta jasna
 * ma tam prawie czarną pigułkę z białym tekstem, ciemna złotą z ciemnym.
 *
 * TRZY REGUŁY [data-theme] NIEKOLOROWE — układ warstw, czyli wyjątek,
 * który reguła 10 każe trzymać w pliku sekcji (decyzja Andrzeja,
 * 2026-08-29): łuk obwódki istnieje TYLKO w motywie ciemnym (sekcja 2),
 * plamy i podkład gradientowy TYLKO w jasnym (sekcje 1 i 3). Makieta
 * jasna rysuje nieruchomy rant i ciepłe plamy, ciemna obracający się łuk
 * i płaski panel — to dwa różne panele, nie jeden w dwóch paletach.
 *
 * ALFY PANELU I KARTY IDĄ PRZEZ color-mix() NA --dc-surface, nie przez
 * tokeny szkła: makieta ma .66 na panelu i .76 na karcie, a rodzina
 * --dc-surface-glass ma .5 / .86 — oba stopnie leżą po złej stronie
 * i różnica jest widoczna na zrzucie (karta ma być wyraźnie bielsza od
 * panelu, panel wyraźnie bielszy od tła). color-mix trzyma alfę makiety
 * bez wpisanego koloru i w obu motywach składa się z tokenu powierzchni.
 *
 * CO JEST TU LICZBĄ, A NIE TOKENEM (reguła 17, punkt 4 — grep ma coś
 * znaleźć i te trafienia są świadome):
 *
 *   a) (nieaktualne od partii 4 audytu) CIEŃ PANELU był literałem
 *      0 26px 64px .16 z makiety. Teraz --dc-shadow-2xl (0 24px 60px .22)
 *      — ten sam stopień, co panel asystenta obok (design-audit.md, C.4:
 *      panel wystawowy = 2xl); różnica alfy .06 zmierzona jako rozlanie
 *      pod panelem, liczby w partii 4.
 *
 *   b) PLAMY (sekcja 3): rozmiary i przesunięcia w pikselach to geometria
 *      rysunku, jak w about.css; `filter: blur()` z liczbą, bo rodzina
 *      --dc-blur-* niesie saturate(), którego plamy nie mają; obie plamy
 *      biorą drabinkę złota — druga miała do partii 3 audytu własny odcień
 *      rgba(228,192,94), ale przy alfie .16 i rozmyciu 52 px nie da się go
 *      odróżnić od --dc-accent-a15 (design-audit.md, B.3); tętna 18 s
 *      i 24 s wprost z makiety, bo rodzina
 *      --dc-duration-float kończy się na 11 s (ten sam wywód co przy
 *      20 s w about.css).
 *
 *   c) ROZMYCIE POD KARTĄ blur(34px) saturate(210%) — nasycenie 210%
 *      nie mieści się w żadnym tokenie (xl ma 190%), a nasycenie
 *      w rozmyciu jest wartością, której zmianę widać (decisions.md,
 *      2026-08-28, fuel-switch). Panel bierze --dc-blur-xl, bo tam
 *      makietowe 190% trafia w token co do procenta.
 *
 *   d) (nieaktualne od partii 4 audytu) CIENIE AWATARÓW W OKNIE DORADCY
 *      (sekcja 14) były literałami 0 8px 18px .3 i 0 4px 10px .25. Teraz
 *      --dc-shadow-sm — ciemne koło na jasnym tle odcina się samą
 *      jasnością, cień jest tylko kontaktowy (C.4, stopień 1 dla drobnych
 *      elementów uniesionych). Ten sam wybór co sygnet w ai-assistant.css.
 *
 * OKNO DORADCY (sekcje 13–17) to zawartość komponentu .dc-modal — panel,
 * tło, przycisk zamknięcia i przejścia daje modal.css; tu jest wyłącznie
 * to, co w oknie stoi. Dwie dodatkowe reguły [data-theme] NA KOLOR, obie
 * tego samego rodzaju co przełącznik w sekcji 7 (para prawdziwych tokenów,
 * nie wpisany kolor): przycisk „Policz" — czerń/biel w jasnym, złoto
 * w ciemnym, jak makieta; awatar — --dc-surface-inverse w jasnym, a
 * w ciemnym --dc-surface rozjaśnione o 5% bieli, bo --dc-surface-inverse
 * jest tam kremem, a makieta ma #262219 (ciemniejszy stopień tej samej
 * skali, którą tokens.css scalił do --dc-surface).
 */

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

/* .dc-calculator 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. */

/* Makieta ma dwa pudełka: rant gradientowy 1,5 px o promieniu 30 i szkło
   o promieniu 28 pod nim. Komponent .dc-ring rysuje rant maską NA TYM
   SAMYM pudełku, więc pudełko i promień są jedne (--dc-radius-28; oba
   makietowe promienie wpadają w jego pasmo).

   position + isolation wymagane przez ring.css; overflow: hidden przycina
   plamy z sekcji 3, które celowo wychodzą poza obrys.

   Obwódka 1 px bieli .7 pod rantem zostaje — makieta rysuje obie warstwy,
   jasna i ciemna; .7 mieści się w paśmie --dc-border-subtle (.65–.95).
   Padding 48 trafia w --dc-space-48 bez scalania. Cień — nagłówek, a.

   DWIE WARSTWY TŁA, i to nie jest ozdobnik. Gradient rantu z makiety
   (135deg: złoto .32 -> biel .62 na 48% -> złoto .2) leży na OWIJCE pod
   całym panelem, a panel ma krycie .66 — więc gradient prześwituje przez
   całą jego powierzchnię i to on daje kremowe ciepło w lewym górnym
   i prawym dolnym rogu. Bez tej warstwy panel wychodzi szary (sprawdzone
   na bramie). Tu owijki nie ma (rant rysuje .dc-ring), więc gradient
   staje się DOLNĄ warstwą tła samego panelu, pod bielą .66. Złoto .32
   i .2 -> --dc-accent-a30 / --dc-accent-a20, biel .62 przez color-mix
   jak wyżej.

   Podkład siedzi w zmiennej, bo w motywie ciemnym ZNIKA (nagłówek pliku):
   `none` jest poprawną warstwą obrazu, więc jedna deklaracja
   background-image obsługuje oba motywy bez powtarzania warstwy bieli. */
.dc-calculator__panel {
  --dc-calculator-underlay: linear-gradient(
    135deg,
    var(--dc-accent-a30),
    color-mix(in srgb, var(--dc-surface) 62%, transparent) 48%,
    var(--dc-accent-a20)
  );

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--dc-space-48);
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-28);
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--dc-surface) 66%, transparent),
      color-mix(in srgb, var(--dc-surface) 66%, transparent)
    ),
    var(--dc-calculator-underlay);
  -webkit-backdrop-filter: var(--dc-blur-xl);
  backdrop-filter: var(--dc-blur-xl);
  box-shadow: var(--dc-shadow-2xl);
}

/* Makieta ciemna: panel płaski, bez podkładu. Obecność warstwy, nie kolor. */
[data-theme='dark'] .dc-calculator__panel {
  --dc-calculator-underlay: none;
}

/* ==========================================================================
   2. OBWÓDKA — KOMPONENT W OBU MOTYWACH
   Poświata, łuk i refleks z components/ring.css na wartościach domyślnych:
   rant 1,5 px (--dc-ring-inset), obrót w 7 s (--dc-duration-ring; makieta
   ciemna ma 8 s — scalenie regułą 15), poświata w jasnym i refleks
   w ciemnym podmieniane przez sam komponent — dokładnie jak na panelu
   ai-assistant, który jest wzorcem obwódki dla motywu.

   HISTORIA: do partii 5 audytu łuk był w motywie jasnym schowany (decyzja
   z 2026-08-29: makieta jasna rysuje nieruchomy rant, więc „dwa różne
   panele"). Audyt (A.5, B.5) wskazał kalkulator jako jedyny panel na
   stronie bez obwódki i partia 5 ją włącza (2026-08-30) — obwódka ma
   wyglądać jednakowo na każdym panelu, a nieruchomy rant z makiety jasnej
   był tą samą obwódką w starszym zapisie (reguła 21). Podkład i plamy
   z sekcji 1 i 3 zostają, jak były.

   FAZA I ZWROT — numer 11 z rejestru w ring.css: start o 11/12 obrotu
   (330°) i nieparzysty numer, czyli obrót W LEWO. Liczba jest umowna —
   znaczy tylko, że żadna inna sekcja jej nie ma; nie zależy od miejsca
   sekcji na stronie. Pokrętła na panelu, nie na warstwie: zmienne własne
   dziedziczą się w dół.
   ========================================================================== */

.dc-calculator__panel {
  --dc-ring-spin: dcRingSpinRev;
  --dc-ring-delay: calc(var(--dc-duration-ring) * -11 / 12);
}

/* ==========================================================================
   3. ATMOSFERA — dwie plamy z makiety JASNEJ
   Obie leżą pod treścią (--dc-z-base) i nie łapią kursora. Kolory, rozmycie
   i geometria — nagłówek pliku, punkt b. Gasną do tego samego koloru z alfą
   0, a nie do `transparent`, żeby nie interpolować przez przezroczystą
   czerń (uwaga z tokens.css przy --dc-accent-a00).
   W motywie ciemnym plam nie ma (makieta ciemna: panel płaski) — display,
   nie opacity, żeby nie zostawiać w drzewie renderowania animowanej,
   niewidocznej warstwy (reguła 11).
   ========================================================================== */

.dc-calculator__blob {
  position: absolute;
  z-index: var(--dc-z-base);
  border-radius: var(--dc-radius-full);
  pointer-events: none;
  will-change: transform;
}

[data-theme='dark'] .dc-calculator__blob {
  display: none;
}

/* Nad nagłówkiem, wychodzi poza lewy górny róg. Złoto .20 trafia
   w --dc-accent-a20 co do setnej; krzywa ease-in-out -> --dc-ease. */
.dc-calculator__blob--crown {
  inset-block-start: -200px;
  inset-inline-start: -140px;
  width: 640px;
  height: 640px;
  background-image: radial-gradient(circle, var(--dc-accent-a20), var(--dc-accent-a00) 64%);
  filter: blur(48px);
  animation: dcCalculatorBlobCrown 18s var(--dc-ease) infinite;
}

/* Pod kartą wyniku, wychodzi poza prawy dolny róg. Drabinka złota jak
   plama pierwsza — nagłówek, b. */
.dc-calculator__blob--ember {
  inset-block-end: -180px;
  inset-inline-end: -120px;
  width: 540px;
  height: 540px;
  background-image: radial-gradient(circle, var(--dc-accent-a15), var(--dc-accent-a00) 66%);
  filter: blur(52px);
  animation: dcCalculatorBlobEmber 24s var(--dc-ease) infinite;
}

/* ==========================================================================
   4. DWIE KOLUMNY: FORMULARZ I KARTA
   Makietowe minmax(320px) trafia w --dc-grid-min-lg co do piksela.
   min(..., 100%) obowiązkowe jak w base.css — bez niego przy 390 px tor
   jest szerszy niż wnętrze panelu. Odstęp 44 -> --dc-space-48 (to samo
   scalenie co w loyalty-cta). Liczba kolumn na trzech szerokościach
   zmierzona — tabela w raporcie.
   ========================================================================== */

.dc-calculator__columns {
  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-48);
  align-items: center;
}

/* ==========================================================================
   5. NAGŁÓWEK
   ========================================================================== */

/* Trakt .16em -> --dc-tracking-widest (.18em), waga 600 = --dc-weight-medium
   co do liczby. Złoto: --dc-accent-strong — reguła J, makietowe #9a8230
   daje na tej powierzchni mniej niż 4,5:1. Odstęp 14 bez scalania. */
.dc-calculator__eyebrow {
  margin-block-end: var(--dc-space-14);
  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-strong);
}

/* clamp(26px, 3vw, 34px) to co do znaku --dc-display-4; domyślne h2
   z base.css bierze --dc-display-3 (sufit 40), więc rozmiar jawnie.
   Trakt -0,025em -> --dc-tracking-tight (-0,02em). Interlinię makieta
   dziedziczy z body; tu zostaje --dc-leading-tight z bazowego h2 —
   dwuwierszowy nagłówek jest przez to o kilka pikseli niższy, patrz raport. */
.dc-calculator__heading {
  margin-block-end: var(--dc-space-28);
  font-size: var(--dc-display-4);
  letter-spacing: var(--dc-tracking-tight);
}

/* ==========================================================================
   6. SUWAK
   Etykieta jest SIATKĄ obejmującą pytanie, odczyt i sam <input> — ta sama
   konstrukcja co w loyalty-cta.css, sekcja 7a. Odstęp pod blokiem 24
   -> --dc-space-24, między wierszem etykiety a suwakiem 10 -> --dc-space-10.
   ========================================================================== */

.dc-calculator__slider {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: var(--dc-space-10);
  row-gap: var(--dc-space-10);
  margin-block-end: var(--dc-space-24);
}

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

.dc-calculator__slider-value {
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-3xl);
  font-weight: var(--dc-weight-black);
  color: var(--dc-text);
}

/* Wysokość 6 px to wysokość TORU (--dc-space-6), uchwyt wystaje poza nią
   i to on łapie kursor. Wygląd toru i gałki — blok niżej. */
.dc-calculator__range {
  grid-column: 1 / -1;
  width: 100%;
  height: var(--dc-space-6);
  margin: var(--dc-space-0);
  cursor: pointer;
}

/* SUWAK Z CSS (design-audit.md, C.7; partia 6). Do tej pory jedyne
   „natywne" miejsce motywu: accent-color malował gałkę i tor przeglądarki,
   inaczej w Chrome i Safari, a fokus z base.css rysował prostokąt r6 wokół
   toru. Teraz tor 6 px i gałka 20 px są z tokenów, fokus to ten sam
   pierścień co na ramkach pól (2 px --dc-accent), w kształcie pigułki.
   Wysokość pola ZOSTAJE 6 px (wysokość toru), żeby układ siatki się nie
   ruszył; gałka wystaje poza tor jak przedtem. Koszt: znika wypełnienie
   toru złotem po lewej od gałki (accent-color nie działa przy
   appearance: none) — zgłoszone w raporcie partii 6. Pseudoelementy
   -webkit- i -moz- muszą stać w OSOBNYCH regułach: nieznany
   pseudoelement unieważnia całą listę selektorów. */
.dc-calculator__range {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

.dc-calculator__range::-webkit-slider-runnable-track {
  height: var(--dc-space-6);
  border-radius: var(--dc-radius-pill);
  background-color: var(--dc-surface-sunken);
}

.dc-calculator__range::-moz-range-track {
  height: var(--dc-space-6);
  border-radius: var(--dc-radius-pill);
  background-color: var(--dc-surface-sunken);
}

.dc-calculator__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--dc-space-20);
  height: var(--dc-space-20);
  margin-block-start: calc((var(--dc-space-6) - var(--dc-space-20)) / 2);
  border: var(--dc-border-heavy) solid var(--dc-accent);
  border-radius: var(--dc-radius-full);
  background-color: var(--dc-surface);
  box-shadow: var(--dc-shadow-sm);
}

.dc-calculator__range::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--dc-space-20);
  height: var(--dc-space-20);
  border: var(--dc-border-heavy) solid var(--dc-accent);
  border-radius: var(--dc-radius-full);
  background-color: var(--dc-surface);
  box-shadow: var(--dc-shadow-sm);
}

/* Jeden fokus dla pól: 2 px --dc-accent, jak ramka pola. Promień pigułki
   nadpisuje r6 z globalnego :focus-visible (ta sama specyficzność,
   ten plik wczytany później). */
.dc-calculator__range:focus-visible {
  outline: var(--dc-border-heavy) solid var(--dc-accent);
  outline-offset: var(--dc-focus-offset);
  border-radius: var(--dc-radius-pill);
}

/* ==========================================================================
   7. PRZEŁĄCZNIKI
   <fieldset> z <legend> — semantyka grupy bez id. Przeglądarka daje
   fieldsetowi obramowanie, padding, margin i min-width: min-content;
   wszystko to schodzi, bo grupa ma wyglądać jak w makiecie (goły <div>)
   i mieścić się w torze siatki.
   ========================================================================== */

.dc-calculator__group {
  min-width: 0;
  margin: var(--dc-space-0);
  padding: var(--dc-space-0);
  border: 0;
}

.dc-calculator__group + .dc-calculator__group {
  margin-block-start: var(--dc-space-24);
}

/* <legend> jest w przeglądarkach elementem szczególnym (nie bierze
   udziału w flex/grid rodzica), stąd display: block i własny odstęp,
   a nie gap na fieldset. Odstęp 10 -> --dc-space-10. */
.dc-calculator__group-label {
  display: block;
  padding: var(--dc-space-0);
  margin-block-end: var(--dc-space-10);
  font-size: var(--dc-text-md);
  font-weight: var(--dc-weight-medium);
  color: var(--dc-text-secondary);
}

.dc-calculator__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dc-space-10);
}

/* Stan ZWOLNIONY. Makietowe tło bieli .66 -> --dc-surface-glass (.86;
   w motywie ciemnym makieta ma rgba(255,250,242,.05), czyli dokładnie
   ten token), obwódka rgba(228,226,220,.9) = --dc-border-line co do
   znaku, tekst #5a5a5a = --dc-text-muted. Padding 11/18 -> --dc-space-12
   / --dc-space-18, promień 16 i waga 600 bez scalania.

   Bez reakcji na najazd kursorem: makieta jej nie ma (segBase nie ma
   style-hover), a wciśnięcie samo w sobie jest odpowiedzią. Przejście
   .2s ease -> --dc-duration-base / --dc-ease. */
.dc-calculator__option {
  padding-block: var(--dc-space-12);
  padding-inline: var(--dc-space-18);
  border: var(--dc-border) solid var(--dc-border-line);
  border-radius: var(--dc-radius-16);
  background-color: var(--dc-surface-glass);
  color: var(--dc-text-muted);
  font-size: var(--dc-text-md);
  font-weight: var(--dc-weight-medium);
  line-height: var(--dc-leading-normal);
  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);
}

/* Pierścień fokusu: globalny z base.css, tylko promień dopasowany do
   kształtu przycisku — base.css ścięłby rogi do --dc-radius-6. */
.dc-calculator__option:focus-visible {
  border-radius: var(--dc-radius-16);
}

/* Kliknięcie = nacisk (opcja z listy, ranga 3: samo zmniejszenie).
   .97 — patrz uzasadnienie przy .dc-calculator__cta:active. */
.dc-calculator__option:active {
  transform: scale(0.97);
}

/* Stan WCIŚNIĘTY — jedyna reguła [data-theme] w pliku (nagłówek). Makieta
   jasna: #1a1a1a z białym tekstem, czyli --dc-surface-inverse (#1C1A17)
   z --dc-text-on-dark. Makieta ciemna: #C9A84C z #231A05, czyli
   --dc-accent z --dc-on-accent. Nie ma tokenu „czerń w jasnym, złoto
   w ciemnym", a pary nie da się złożyć z jednej — --dc-surface-inverse
   w ciemnym jest kremem, nie złotem. Ten sam zabieg co ciemne okienka
   sygnetu w loyalty-cta.css. */
.dc-calculator__option[aria-pressed='true'] {
  border-color: var(--dc-surface-inverse);
  background-color: var(--dc-surface-inverse);
  color: var(--dc-text-on-dark);
}

[data-theme='dark'] .dc-calculator__option[aria-pressed='true'] {
  border-color: var(--dc-accent);
  background-color: var(--dc-accent);
  color: var(--dc-on-accent);
}

/* ==========================================================================
   8. KARTA WYNIKU
   ========================================================================== */

.dc-calculator__aside {
  display: flex;
  justify-content: center;
}

/* Szerokość 360 -> --dc-measure-xs (340; pasmo 300/340/360), promień 20
   -> --dc-radius-22, padding 34/30 -> --dc-space-32 w obu kierunkach
   (pasmo 30/32/34). Tło .76 przez color-mix — nagłówek pliku. Obwódka
   bieli .95 = --dc-border-subtle (górny kraniec pasma).

   Cień: --dc-shadow-2xl (ta sama geometria, .22 wobec .24) plus
   --dc-shadow-inset-top. Dwie pozostałe warstwy z makiety (inset 0 -14px
   30px bieli .25 i włosowa obwódka wewnętrzna .18) POMINIĘTE — ten sam
   wybór co w facts i wszystkich sekcjach po nim (uwaga E w konwencjach,
   nierozstrzygnięta); makieta ciemna ich zresztą nie ma.

   BEZ UNOSZENIA. Makieta animuje kartę dcFloat 7 s (góra-dół o 12 px),
   ale karta stoi w miejscu — decyzja Andrzeja (2026-08-29): to karta
   z wynikiem, który użytkownik czyta i klika, nie plakietka. */
.dc-calculator__card {
  width: 100%;
  max-width: var(--dc-measure-xs);
  padding: var(--dc-space-32);
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-22);
  background-color: color-mix(in srgb, var(--dc-surface) 76%, transparent);
  -webkit-backdrop-filter: blur(34px) saturate(210%);
  backdrop-filter: blur(34px) saturate(210%);
  box-shadow: var(--dc-shadow-2xl), var(--dc-shadow-inset-top);
  text-align: center;
}

/* Trakt .12em = --dc-tracking-wider co do znaku. Makietowe #9a958a
   to odcień, który tokens.css odrzucił przy --dc-text-subtle (2,63:1)
   i zastąpił przez #6E6A61 — token, nie makieta. */
.dc-calculator__card-eyebrow {
  /* Odstęp nadtytułu karty do treści: 8 (design-audit.md, C.8), nie 14
     jak pod nadtytułem sekcji — partia 6. */
  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-text-subtle);
}

/* Duża liczba: 64 px wpada w pasmo --dc-display-1 (sufity 64/58/54/52),
   więc token — przy 1440 px daje 58 px, o 6 mniej niż makieta; zgłoszone
   w raporcie. Interlinia 1 i trakt -0,03em trafiają w --dc-leading-none
   i --dc-tracking-tighter co do znaku. */
.dc-calculator__tons {
  font-family: var(--dc-font-display);
  font-size: var(--dc-display-1);
  font-weight: var(--dc-weight-black);
  line-height: var(--dc-leading-none);
  letter-spacing: var(--dc-tracking-tighter);
  color: var(--dc-text);
}

/* Złoty tekst — --dc-accent-strong, reguła J (makieta: #9a8230). */
.dc-calculator__tons-value {
  color: var(--dc-accent-strong);
}

.dc-calculator__unit {
  margin-block-start: var(--dc-space-4);
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-3xl);
  font-weight: var(--dc-weight-bold);
  color: var(--dc-text-secondary);
}

/* Kreska rgba(228,226,220,.9) = --dc-border-line co do znaku; grubość
   1 px = --dc-border. Odstępy 24 / 18 bez scalania. */
.dc-calculator__divider {
  display: block;
  height: var(--dc-border);
  margin-block: var(--dc-space-24) var(--dc-space-18);
  background-color: var(--dc-border-line);
}

.dc-calculator__pack {
  margin-block-end: var(--dc-space-18);
  font-size: var(--dc-text-md);
  color: var(--dc-text-muted);
}

.dc-calculator__pack-name {
  color: var(--dc-text);
}

/* ==========================================================================
   9. PRZYCISK WYNIKU
   Ten sam przepis co .dc-volume-picker__submit i .dc-hero__cta--primary —
   warstwa components/ nie ma jeszcze przycisku, więc nowa sekcja nie
   wymyśla własnego. Wypełnienie --dc-gradient-cta (makieta jasna ma
   dokładnie ten gradient, ciemna pełne #C9A84C — czyli oba stany tokenu),
   rozmycie --dc-blur-md (co do znaku), obwódka .48 -> --dc-accent-a50.

   RÓŻNICE WOBEC MAKIETY, zgłoszone zamiast wprowadzone (skill, §0):
     - tekst --dc-on-accent jak w przepisie, makieta ma #7c6420
       (--dc-accent-strong) — w motywie ciemnym oba mówią to samo;
     - cień --dc-shadow-accent (0 8px 22px .3), makieta 0 10px 26px .32;
     - najazd: samo uniesienie o 2 px (--dc-space-2), bez rozjaśnienia
       gradientu i obwódki — decyzja z hero, powtórzona w volume-picker.
   Rozmiar pisma 15 -> --dc-text-lg, padding 14 i promień 16 co do znaku.
   ========================================================================== */

.dc-calculator__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dc-space-8);
  width: 100%;
  padding: var(--dc-space-14);
  border: var(--dc-border) solid var(--dc-accent-a50);
  border-radius: var(--dc-radius-16);
  background-image: var(--dc-gradient-cta);
  color: var(--dc-on-accent);
  font-size: var(--dc-text-lg);
  font-weight: var(--dc-weight-bold);
  line-height: var(--dc-leading-none);
  text-decoration: none;
  -webkit-backdrop-filter: var(--dc-blur-md);
  backdrop-filter: var(--dc-blur-md);
  box-shadow: var(--dc-shadow-accent);
  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, bez uniesienia — złoto a50 podłożone pod
   półprzezroczysty gradient CTA (jak .dc-hero__cta--primary, tam pełne
   uzasadnienie).
   Deklaracja koloru OBOWIĄZKOWA: base.css ma a:hover o specyficzności
   (0,1,1), wyższej niż sama klasa — bez niej tekst zmieniałby się pod
   kursorem na złoty (to samo co w hero.css). */
.dc-calculator__cta:hover {
  background-color: var(--dc-accent-a50);
  color: var(--dc-on-accent);
}

/* Kliknięcie = nacisk: zmniejszenie plus cień wciśnięcia zamiast
   rozjaśnienia od góry — 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-calculator__cta:active {
  transform: scale(0.97);
  box-shadow: var(--dc-shadow-accent), var(--dc-shadow-inset-press);
}

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

/* ==========================================================================
   10. ZASTRZEŻENIE
   11,5 px -> --dc-text-xs, interlinia 1,5 -> --dc-leading-normal (1,55),
   odstęp 16 bez scalania. Kolor jak nadtytuł karty — token zamiast
   makietowego #9a958a. Numer telefonu jest odnośnikiem w kolorze tekstu:
   podkreślenie wystarcza, a złoty --dc-accent-text z base.css nie przeszedłby
   progu przy piśmie 11 px.
   ========================================================================== */

.dc-calculator__disclaimer {
  margin-block-start: var(--dc-space-16);
  font-size: var(--dc-text-xs);
  line-height: var(--dc-leading-normal);
  color: var(--dc-text-subtle);
}

.dc-calculator__disclaimer a {
  color: inherit;
}

/* ==========================================================================
   11. POD PANELEM — pytanie i wyzwalacz okna
   Odstęp 30 -> --dc-space-32, pismo 16 -> --dc-text-xl, kolor #5a5a5a
   = --dc-text-muted.
   ========================================================================== */

.dc-calculator__foot {
  margin-block-start: var(--dc-space-32);
  font-size: var(--dc-text-xl);
  color: var(--dc-text-muted);
  text-align: center;
}

/* Przycisk podkreślony złotą kreską 2 px (--dc-border-heavy, --dc-accent),
   z odstępem 2 px pod tekstem (--dc-space-2) i 6 px od pytania
   (--dc-space-6). Odstęp przed strzałką 8 px -> --dc-space-8; najazd
   rozsuwa go do 14 px (--dc-space-14) — to przycisk, więc reakcja na
   kursor jest prawdziwą obietnicą (reguła 14). Przejście .2s ease
   -> --dc-duration-base / --dc-ease. */
.dc-calculator__advisor {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-8);
  margin-inline-start: var(--dc-space-6);
  padding-block-end: var(--dc-space-2);
  border-block-end: var(--dc-border-heavy) solid var(--dc-accent);
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-xl);
  font-weight: var(--dc-weight-bold);
  color: var(--dc-text);
  transition: gap var(--dc-duration-base) var(--dc-ease);
}

.dc-calculator__advisor:hover {
  gap: var(--dc-space-14);
}

/* Rusza się SAM grot (reguła 22; poprawki po audycie, 2026-08-30): ikona
   dostaje ujemny margines o różnicę gapów, obrys nie rośnie. Przycisk stoi
   w wyśrodkowanym akapicie, więc przed poprawką przyrost 6 px dzielił się
   na pół — tekst uciekał 3 px w lewo, grot szedł 3 px w prawo (zmierzone). */
.dc-calculator__advisor .dc-icon {
  transition: margin-inline-end var(--dc-duration-base) var(--dc-ease);
}

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

/* ==========================================================================
   12. RUCH — dryf plam
   Klatki mieszkają w pliku sekcji: base.css rejestruje prymitywy używane
   przez KOMPONENTY, a ten dryf ma tylko ta sekcja (jak dcAboutBlob
   w about.css). Wartości klatek wprost z makiety (dcBlobB, dcBlobC);
   procenty i skale to geometria ruchu, nie wartości projektowe.
   ========================================================================== */

@keyframes dcCalculatorBlobCrown {
  0%,
  100% {
    transform: translate(0, 0) scale(1.1);
  }

  50% {
    transform: translate(-7%, 6%) scale(1);
  }
}

@keyframes dcCalculatorBlobEmber {
  0%,
  100% {
    transform: translate(-3%, 2%) scale(1.05);
  }

  50% {
    transform: translate(5%, -4%) scale(1.18);
  }
}

/* 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" —
   plamy zamarłyby w pozycji przesuniętej i powiększonej. Skrót
   animation: none zeruje animation-name, którego tamten !important nie
   obejmuje, więc wygrywa i plamy zostają w pozycji wyjściowej (reguła 12).
   Obwódki ten blok nie dotyczy — jej własny stoi w ring.css. */
@media (prefers-reduced-motion: reduce) {
  .dc-calculator__blob {
    animation: none;
  }
}

/* ==========================================================================
   13. OKNO DORADCY — SZKIELET
   home.html:1106. Kolumna: nagłówek, rozmowa, pasek. Panel komponentu ma
   max-height 84vh i display:flex, więc kolumna musi móc się skurczyć
   (min-height: 0) — inaczej min-height:auto dzieci trzymałoby ją na
   wysokości treści i rozmowa nigdy by się nie przewijała, tylko wychodziła
   pod overflow:hidden panelu.
   ========================================================================== */

.dc-calculator__chat {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

/* ==========================================================================
   14. NAGŁÓWEK OKNA
   home.html:1107. Odstęp z prawej rezerwuje miejsce na przycisk zamknięcia
   komponentu (18 px od krawędzi + 40 px koła + 12 px odstępu) — modal.css
   mówi wprost, że robi to konsument. Tło bieli .5 -> --dc-surface-glass
   (makieta ciemna ma tam dokładnie ten token, .05), kreska .7
   -> --dc-border-line.
   ========================================================================== */

.dc-calculator__chat-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--dc-space-12);
  padding: var(--dc-space-16) var(--dc-space-18);
  padding-inline-end: calc(var(--dc-space-18) + var(--dc-space-40) + var(--dc-space-12));
  border-block-end: var(--dc-border) solid var(--dc-border-line);
  background-color: var(--dc-surface-glass);
}

/* Awatar: ciemne koło z sygnetem. 42 px -> --dc-space-40 (duży),
   30 -> --dc-space-32 (w dymku). Cienie — nagłówek pliku, d; włosowe
   rozjaśnienie u góry .12 przez color-mix na bieli niezmiennej między
   motywami. Kolor w motywie ciemnym — nagłówek pliku. */
.dc-calculator__chat-avatar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--dc-space-32);
  height: var(--dc-space-32);
  border-radius: var(--dc-radius-full);
  background-color: var(--dc-surface-inverse);
  box-shadow: var(--dc-shadow-sm);
}

.dc-calculator__chat-avatar--lg {
  width: var(--dc-space-40);
  height: var(--dc-space-40);
  box-shadow:
    var(--dc-shadow-sm),
    inset 0 var(--dc-border) 0 color-mix(in srgb, var(--dc-text-on-dark) 12%, transparent);
}

[data-theme='dark'] .dc-calculator__chat-avatar {
  background-color: color-mix(in srgb, var(--dc-surface), var(--dc-text-on-dark) 5%);
}

.dc-calculator__chat-avatar img {
  display: block;
  height: auto;
}

.dc-calculator__chat-identity {
  flex: 1;
  min-width: 0;
}

/* 16 px 800 -> --dc-text-xl / --dc-weight-black, interlinia 1,2
   -> --dc-leading-tight. */
.dc-calculator__chat-title {
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-xl);
  font-weight: var(--dc-weight-black);
  line-height: var(--dc-leading-tight);
  color: var(--dc-text);
}

/* Stan „online": TEKST bierze --dc-success (makietowe #5a8a6a tokens.css
   odrzucił przy 4,38:1 i zastąpił przez #35704E — próg 4,5:1 dotyczy
   tekstu). KROPKA bierze --dc-success-on-dark: jedną jasną zieleń dla
   wszystkich kropek statusu na stronie (help-cta, reviews, oba okna —
   poprawki po audycie, 2026-08-30). Kropka ma aria-hidden, jest dekoracją,
   więc próg kontrastu tekstu jej nie dotyczy — ten sam przypadek co numer
   kroku w how-to-order (2,90 zostawione); makieta rysuje ją jako #4caf72
   w obu motywach, czyli jasno, a --dc-success w jasnym motywie jest
   przyciemniony pod tekst i dawał kropkę ciemniejszą niż w help-cta.
   Poświata z TEJ SAMEJ zieleni co kropka. Kropka 7 px -> --dc-space-6,
   poświata 3 px to połowa tej średnicy, na 18% (makieta:
   rgba(76,175,114,.18)). Odstęp 6 -> --dc-space-6, margines 3 -> --dc-space-4. */
.dc-calculator__chat-status {
  display: flex;
  align-items: center;
  gap: var(--dc-space-6);
  margin-block-start: var(--dc-space-4);
  font-size: var(--dc-text-sm);
  color: var(--dc-success);
}

.dc-calculator__chat-dot {
  flex: none;
  width: var(--dc-space-6);
  height: var(--dc-space-6);
  border-radius: var(--dc-radius-full);
  background-color: var(--dc-success-on-dark);
  box-shadow: 0 0 0 calc(var(--dc-space-6) / 2) color-mix(in srgb, var(--dc-success-on-dark) 18%, transparent);
}

/* ==========================================================================
   15. ROZMOWA
   home.html:1117. Jedyna część okna, która się przewija. Tło: makietowy
   gradient bieli ciepłej .55 -> .15 scalony do --dc-surface-sunken (płaski,
   w obu motywach o krok od powierzchni panelu); makieta ciemna ma tam
   biel .18 — kierunek ten sam, stopień z tokenu. Odstęp między dymkami
   13 -> --dc-space-14.
   ========================================================================== */

.dc-calculator__chat-log {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--dc-space-14);
  min-height: 0;
  padding: var(--dc-space-20) var(--dc-space-18);
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--dc-surface-sunken);
}

/* Wiersz z dymkiem asystenta: awatar plus dymek, do 92% szerokości.
   Odstęp 9 -> --dc-space-10. */
.dc-calculator__chat-msg--bot {
  display: flex;
  align-items: flex-start;
  gap: var(--dc-space-10);
  max-width: 92%;
}

.dc-calculator__chat-msg--user {
  display: flex;
  justify-content: flex-end;
}

.dc-calculator__chat-column {
  min-width: 0;
}

/* Dymek. Padding 11/15 -> --dc-space-12 / --dc-space-16. Promienie
   4 / 15 -> --dc-radius-6 / --dc-radius-16 — ostry róg wskazuje autora
   (lewy górny u asystenta, prawy dolny u użytkownika). Pismo 14,5
   -> --dc-text-md.

   Dymek asystenta dostaje fokus ze skryptu (tabindex=-1) — pierścień
   z base.css, tylko promień dopasowany, jak przy przyciskach. */
.dc-calculator__chat-bubble {
  padding: var(--dc-space-12) var(--dc-space-16);
  font-size: var(--dc-text-md);
}

.dc-calculator__chat-msg--bot .dc-calculator__chat-bubble {
  border: var(--dc-border) solid var(--dc-border-line);
  border-radius: var(--dc-radius-6) var(--dc-radius-16) var(--dc-radius-16) var(--dc-radius-16);
  background-color: var(--dc-surface);
  box-shadow: var(--dc-shadow-md);
  line-height: var(--dc-leading-relaxed);
  color: var(--dc-text-secondary);
}

.dc-calculator__chat-msg--bot .dc-calculator__chat-bubble:focus-visible {
  border-radius: var(--dc-radius-6) var(--dc-radius-16) var(--dc-radius-16) var(--dc-radius-16);
}

/* Dymek użytkownika — ten sam złoty tint co przycisk wyniku sekcji:
   --dc-gradient-cta (makieta jasna: dokładnie ten gradient, ciemna: pełne
   #C9A84C), tekst --dc-on-accent z przepisu (makieta: #7c6420 — patrz
   sekcja 9). Obwódka .48 -> --dc-accent-a50, cień 0 6px 16px złota .28
   -> --dc-shadow-accent. Do 86% szerokości, jak w makiecie. */
.dc-calculator__chat-msg--user .dc-calculator__chat-bubble {
  max-width: 86%;
  border: var(--dc-border) solid var(--dc-accent-a50);
  border-radius: var(--dc-radius-16) var(--dc-radius-16) var(--dc-radius-6) var(--dc-radius-16);
  background-image: var(--dc-gradient-cta);
  box-shadow: var(--dc-shadow-accent);
  font-weight: var(--dc-weight-medium);
  line-height: var(--dc-leading-normal);
  color: var(--dc-on-accent);
  -webkit-backdrop-filter: var(--dc-blur-md);
  backdrop-filter: var(--dc-blur-md);
}

/* Zastrzeżenie pod odpowiedzią końcową — pismo 11,5 -> --dc-text-xs,
   jak zastrzeżenie na karcie wyniku (sekcja 10), telefon w kolorze tekstu. */
.dc-calculator__chat-disclaimer {
  margin-block-start: var(--dc-space-8);
  padding-inline: var(--dc-space-4);
  font-size: var(--dc-text-xs);
  line-height: var(--dc-leading-normal);
  color: var(--dc-text-subtle);
}

.dc-calculator__chat-disclaimer a {
  color: inherit;
}

/* ==========================================================================
   16. PASEK NA DOLE — pigułki i pole uwag
   home.html:1136. Padding 15/18 -> --dc-space-16 / --dc-space-18, tło
   bieli .55 -> --dc-surface-glass, kreska .7 -> --dc-border-line.
   ========================================================================== */

.dc-calculator__chat-bar {
  flex: none;
  padding: var(--dc-space-16) var(--dc-space-18);
  border-block-start: var(--dc-border) solid var(--dc-border-line);
  background-color: var(--dc-surface-glass);
}

/* Pigułki zawijają się — przy 390 px w dwa wiersze, jak w makiecie
   (flex-wrap). Odstęp 9 -> --dc-space-10. */
.dc-calculator__chat-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dc-space-10);
}

/* Pigułka: bieli .8 -> --dc-surface-glass, obwódka złota .4
   -> --dc-accent-a50, pismo 13,5 -> --dc-text-base, cień 0 4px 12px .06
   -> --dc-shadow-sm plus rozjaśnienie krawędzi. Najazd wprost z makiety
   (to przycisk — reguła 14): złoto, pełna złota obwódka i tusz z przepisu
   przycisku. Złoto jako background-color, nie --dc-gradient-cta
   w background-image: gradient pojawiający się znikąd nie ma z czym się
   przenikać i wskakuje w jednym kroku, kolor tła przechodzi płynnie.
   Pełne --dc-accent, nie a50 z C.2: pod ciemnym tuszem --dc-on-accent
   półzłoto na ciemnym tle okna daje w motywie ciemnym 3,07:1 (zmierzone
   pikselem, 2026-08-29) — poniżej 4,5:1 dla tekstu 13 px; pełne złoto
   to 8,13:1 / 7,52:1. W motywie ciemnym wygląda dokładnie jak dotąd
   (tam --dc-gradient-cta i tak jest pełnym złotem). */
.dc-calculator__chat-pill {
  padding: var(--dc-space-10) var(--dc-space-16);
  border: var(--dc-border) solid var(--dc-accent-a50);
  border-radius: var(--dc-radius-pill);
  background-color: var(--dc-surface-glass);
  box-shadow: var(--dc-shadow-sm), var(--dc-shadow-inset-top);
  font-size: var(--dc-text-base);
  font-weight: var(--dc-weight-medium);
  line-height: var(--dc-leading-normal);
  color: var(--dc-text-secondary);
  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-calculator__chat-pill:hover {
  border-color: var(--dc-accent);
  background-color: var(--dc-accent);
  color: var(--dc-on-accent);
}

/* Kliknięcie = nacisk (pigułka wyboru, ranga 3: samo zmniejszenie).
   .97 — patrz uzasadnienie przy .dc-calculator__cta:active. */
.dc-calculator__chat-pill:active {
  transform: scale(0.97);
}

.dc-calculator__chat-pill:focus-visible {
  border-radius: var(--dc-radius-pill);
}

/* Pole uwag: ramka z polem i przyciskiem w środku. Padding 5/16
   -> --dc-space-6 / --dc-space-16, odstęp 9 -> --dc-space-10, promień 16.
   Cień wewnętrzny 0 1px 3px .05 to --dc-shadow-xs poprzedzone `inset` —
   token podstawia geometrię i kolor, słowo kluczowe zostaje przed nim.

   Fokus pokazuje RAMKA (focus-within), nie pole: pole nie ma własnej
   obwódki, więc globalny pierścień z base.css wisiałby w powietrzu
   wewnątrz ramki — dlatego na polu jest wyłączony (outline: none niżej),
   a ramka dostaje JEDNĄ złotą obwódkę: krawędź --dc-accent plus 1 px
   złotego pierścienia, razem 2 px (makieta: złota krawędź). Nie
   --dc-focus-ring — ten jest z --dc-accent-strong, czyli ciemnego złota,
   i nałożony na złotą krawędź dawał dwie obwódki naraz (odrzucone przy
   przeglądzie 2026-08-29). Kontrast tej obwódki na białym polu wychodzi
   z wartości tokenów ok. 2,3:1, poniżej 3:1 dla elementów nietekstowych
   — zgłoszone; decyduje projekt (decisions.md, „dostępność nie może
   psuć projektu"). */
.dc-calculator__chat-field {
  display: flex;
  align-items: center;
  gap: var(--dc-space-10);
  padding: var(--dc-space-6);
  padding-inline-start: var(--dc-space-16);
  border: var(--dc-border) solid var(--dc-border-line);
  border-radius: var(--dc-radius-16);
  background-color: var(--dc-surface);
  box-shadow: inset var(--dc-shadow-xs);
}

.dc-calculator__chat-field:focus-within {
  border-color: var(--dc-accent);
  box-shadow:
    inset var(--dc-shadow-xs),
    0 0 0 var(--dc-border) var(--dc-accent);
}

/* BŁĄD — ta sama ramka, kolor --dc-danger (design-audit.md, C.7; partia 6).
   Warunek to :has(): pole z niepoprawną wartością po interakcji użytkownika
   (:user-invalid — walidacja natywna) albo z aria-invalid="true" (skrypt).
   Stoi PO :focus-within przy tej samej specyficzności, więc błąd jest
   widoczny także w trakcie pisania. */
.dc-calculator__chat-field:has(:user-invalid, [aria-invalid='true']) {
  border-color: var(--dc-danger);
  box-shadow:
    inset var(--dc-shadow-xs),
    0 0 0 var(--dc-border) var(--dc-danger);
}

.dc-calculator__chat-input {
  flex: 1;
  min-width: 0;
  padding-block: var(--dc-space-10);
  border: 0;
  background: transparent;
  font-size: var(--dc-text-md);
  color: var(--dc-text);
}

.dc-calculator__chat-input:focus-visible {
  outline: none;
}

.dc-calculator__chat-input::placeholder {
  color: var(--dc-text-subtle);
}

/* „Policz →": RANGA 1 (design-audit.md, C.1) — to jest akcja „naprzód"
   w tym kroku, więc dostaje przepis głównego wezwania z volume-picker.css,
   a nie atrament z makiety (#161616/#fff w jasnym, #C9A84C/#231A05
   w ciemnym): jeden wygląd na rolę, nie na sekcję. Gradient CTA przełącza
   się z motywem sam (tint w jasnym, pełne złoto w ciemnym), więc reguła
   [data-theme='dark'] znika (reguła 10). Padding 14/18 i --dc-leading-none
   dają 44 px — tyle, ile miał poprzedni zapis 12/18 z interlinią normal —
   żeby pole obok nie zmieniło wysokości; pismo 13 -> --dc-text-md, jak
   „Zapytaj". Odstęp 7 -> --dc-space-8. */
.dc-calculator__chat-submit {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--dc-space-8);
  padding: var(--dc-space-14) var(--dc-space-18);
  border: var(--dc-border) solid var(--dc-accent-a50);
  /* Promień 12: przycisk w ramce pola r16 z odstępem 7 px — reguła
     zagnieżdżenia (design-audit.md, C.9), ten sam promień co „Zapytaj"
     i przycisk stopki (partia 6). */
  border-radius: var(--dc-radius-12);
  background-image: var(--dc-gradient-cta);
  font-size: var(--dc-text-md);
  font-weight: var(--dc-weight-bold);
  line-height: var(--dc-leading-none);
  white-space: nowrap;
  color: var(--dc-on-accent);
  -webkit-backdrop-filter: var(--dc-blur-md);
  backdrop-filter: var(--dc-blur-md);
  box-shadow: var(--dc-shadow-accent), var(--dc-shadow-inset-top);
  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);
}

/* Najazd: tint ciemnieje, bez uniesienia — złoto a50 podłożone pod
   półprzezroczysty gradient CTA (jak .dc-hero__cta--primary, tam pełne
   uzasadnienie). */
.dc-calculator__chat-submit:hover {
  background-color: var(--dc-accent-a50);
}

/* Kliknięcie = nacisk: zmniejszenie plus cień wciśnięcia zamiast
   rozjaśnienia od góry — 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-calculator__chat-submit:active {
  transform: scale(0.97);
  box-shadow: var(--dc-shadow-accent), var(--dc-shadow-inset-press);
}

.dc-calculator__chat-submit:focus-visible {
  border-radius: var(--dc-radius-16);
}

/* ZABLOKOWANY i ZAJĘTY — ten sam przepis co .dc-calculator__chat-cart:disabled
   niżej. Za :hover i :active o tej samej specyficzności, więc wygrywa
   kolejnością. Skrypt (calculator-advisor.js) nie ustawia dziś tych
   atrybutów na tym przycisku — stan czeka na skrypt. */
.dc-calculator__chat-submit:disabled,
.dc-calculator__chat-submit[aria-busy='true'] {
  border-color: var(--dc-border-line);
  background-color: var(--dc-surface-sunken);
  background-image: none;
  color: var(--dc-text-subtle);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

.dc-calculator__chat-submit[aria-busy='true'] {
  cursor: progress;
}

/* „Pomiń ten krok" i „Policz jeszcze raz": odnośniki tekstowe,
   13 px -> --dc-text-base, #9a958a -> --dc-text-subtle (token
   po korekcie kontrastu). Odstęp 10 bez scalania. */
.dc-calculator__chat-skip,
.dc-calculator__chat-restart {
  margin-block-start: var(--dc-space-10);
  font-size: var(--dc-text-base);
  text-decoration: underline;
  text-underline-offset: var(--dc-space-4);
  color: var(--dc-text-subtle);
  transition: color var(--dc-duration-base) var(--dc-ease);
}

.dc-calculator__chat-skip:hover,
.dc-calculator__chat-restart:hover {
  color: var(--dc-text);
}

.dc-calculator__chat-restart {
  width: 100%;
}

/* ==========================================================================
   17. PO ODPOWIEDZI — koszyk
   home.html:1151. Ten sam przepis co przycisk wyniku sekcji (sekcja 9)
   i .dc-volume-picker__submit: --dc-gradient-cta, --dc-on-accent,
   --dc-blur-md, obwódka --dc-accent-a50. Padding 15 -> --dc-space-16,
   pismo 15 -> --dc-text-lg, waga 800. Cień 0 12px 28px złota .4 plus
   rozjaśnienie u góry -> --dc-shadow-accent + --dc-shadow-inset-top.
   Najazd: samo uniesienie o 2 px, jak w hero i volume-picker.
   ========================================================================== */

.dc-calculator__chat-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--dc-space-10);
  width: 100%;
  padding: var(--dc-space-16);
  border: var(--dc-border) solid var(--dc-accent-a50);
  border-radius: var(--dc-radius-16);
  background-image: var(--dc-gradient-cta);
  box-shadow: var(--dc-shadow-accent), var(--dc-shadow-inset-top);
  font-size: var(--dc-text-lg);
  font-weight: var(--dc-weight-black);
  line-height: var(--dc-leading-none);
  color: var(--dc-on-accent);
  -webkit-backdrop-filter: var(--dc-blur-md);
  backdrop-filter: var(--dc-blur-md);
  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);
}

.dc-calculator__chat-cart .dc-icon {
  flex: none;
}

/* Najazd: tint ciemnieje, bez uniesienia — złoto a50 podłożone pod
   półprzezroczysty gradient CTA (jak .dc-hero__cta--primary, tam pełne
   uzasadnienie). :enabled, bo zablokowany przycisk ma własne tło. */
.dc-calculator__chat-cart:hover:enabled {
  background-color: var(--dc-accent-a50);
}

.dc-calculator__chat-cart:active:enabled {
  transform: scale(0.97);
  box-shadow: var(--dc-shadow-accent), var(--dc-shadow-inset-press);
}

.dc-calculator__chat-cart:focus-visible {
  border-radius: var(--dc-radius-16);
}

/* W TRAKCIE DODAWANIA: zablokowany, żeby dwuklik nie dodał dwa razy.
   Wygląd z przepisu wyłączonego przycisku w volume-picker.css — bez
   złota, bez cienia, tusz przygaszony — plus kursor oczekiwania. */
.dc-calculator__chat-cart:disabled {
  border-color: var(--dc-border-line);
  background-color: var(--dc-surface-sunken);
  background-image: none;
  box-shadow: none;
  color: var(--dc-text-subtle);
  cursor: progress;
  transform: none;
}

/* BŁĄD: komunikat pod przyciskiem, okno zostaje otwarte. Tekst w kolorze
   --dc-danger (token z partii 6 audytu; do tej pory motyw czerwieni nie
   miał i komunikat był pełnym tuszem). Wklęsłe pole z obwódką zostaje —
   komunikat czyta się przez miejsce i treść, kolor tylko to potwierdza.
   Pismo 13 px -> --dc-text-base. */
.dc-calculator__chat-error {
  margin-block-start: var(--dc-space-10);
  padding: var(--dc-space-10) var(--dc-space-12);
  border: var(--dc-border) solid var(--dc-border-line);
  border-radius: var(--dc-radius-12);
  background-color: var(--dc-surface-sunken);
  font-size: var(--dc-text-base);
  font-weight: var(--dc-weight-medium);
  line-height: var(--dc-leading-normal);
  color: var(--dc-danger);
}