/**
 * savings-calculator.css — „Kalkulator oszczędności": ciemny panel
 * z suwakiem po lewej i polami wyniku po prawej.
 *
 * Wymaga tokens.css, base.css i components/ring.css. Wszystko pod prefiksem
 * .dc-savings-calculator__; .dc-ring dostrajany wyłącznie na panelu.
 *
 * PANEL CIEMNY W OBU MOTYWACH — czwarty taki po help-cta, fuel-switch
 * i loyalty-cta, z tymi samymi konsekwencjami (loyalty-cta.css, nagłówek):
 *   1. biele z alfą przez color-mix() na --dc-text-on-dark, nie tokeny
 *      --dc-surface-glass / --dc-border-subtle (podmieniane między motywami);
 *   2. złoty tekst bierze --dc-accent (tła jasnego pod nim nigdy nie ma);
 *   3. TŁO PANELU to para --dc-surface-inverse / --dc-surface przez jedną
 *      regułę [data-theme] — zapis z help-cta.css, bez literału; ciepły
 *      rozbłysk makiety (radial #2e1f0c przy 25 % -5 %) daje gradient
 *      z drabinki alfy złota na tym tle. To odejście od loyalty-cta.css,
 *      który ma gradient literałem — tu grep po hex ma być pusty.
 *
 * SUWAK — przepis z loyalty-cta.css sekcja 7a / design-audit.md C.7
 * (appearance: none, tor 6 px biel 12 %, gałka 20 px --dc-surface-on-dark
 * z 2 px --dc-accent, fokus pigułką). Bez złotego wypełnienia toru po lewej
 * od gałki (decisions.md 2026-08-30 „suwaki z CSS, bez wypełnienia toru").
 *
 * POLA WYNIKU — technika 2×2 bez breakpointu z loyalty-cta.css 7b:
 * flex-wrap z bazą „połowa minus pół odstępu"; próg zwijania wyznacza
 * treść kafla, nie liczba w @media.
 *
 * SCALENIA (reguła 15), zgłoszone w raporcie:
 *   panel: promień 28 = --dc-radius-28, padding clamp(40px, 5vw, 56px)
 *   = clamp(--dc-space-40, 5vw, --dc-space-56), cień 0 50px 120px .6
 *   -> --dc-shadow-2xl; siatka minmax(320px) = --dc-grid-min-lg, odstęp 44
 *   -> --dc-space-40; nagłówek clamp(26, 3vw, 38) -> --dc-display-4,
 *   odstęp 14 = --dc-space-14; lead 15 = --dc-text-lg, odstęp 30 ->
 *   --dc-space-32; pytanie 13,5 -> --dc-text-base, odczyt 24 = --dc-text-6xl,
 *   odstęp 10 = --dc-space-10; podziałka 11 = --dc-text-xs;
 *   kafel: promień 16 = --dc-radius-16, padding 20 = --dc-space-20,
 *   odstęp 12 = --dc-space-12, etykieta 11 = --dc-text-xs, odstęp 8 =
 *   --dc-space-8, liczba 24 = --dc-text-6xl, podpis 11,5 -> --dc-text-xs,
 *   odstęp 5 -> --dc-space-4; przypis 12 = --dc-text-sm, odstęp 16 =
 *   --dc-space-16; plamy: blur 45/55 -> --dc-blur-xl, złoto .22 -> a20,
 *   brąz rgba(160,100,30,.16) -> a15 (jak w loyalty-cta, partia 3).
 *
 * KOREKTY KONTRASTU: biele .35 / .4 / .32 z makiety idą na
 * --dc-text-on-dark-muted (.6 jasny / .58 ciemny), nie na 50 % jak
 * w loyalty-cta. Zmierzone 2026-08-31 na tym panelu: 50 % dawało w motywie
 * ciemnym 4,26–4,45:1 dla pisma 11–12 px (tło --dc-surface #1C1A17 jest
 * jaśniejsze niż czerń panelu loyalty-cta, na której 50 % wystarczało);
 * token przechodzi próg w obu motywach — tabela w raporcie.
 */

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

/* .dc-savings-calculator nie ma tu żadnej deklaracji — .dc-container
   i .dc-section z base.css (reguła 8). */

.dc-savings-calculator__panel {
  position: relative;
  isolation: isolate;
  padding: clamp(var(--dc-space-40), 5vw, var(--dc-space-56));
  border-radius: var(--dc-radius-28);
  background-color: var(--dc-surface-inverse);
  background-image: radial-gradient(
    ellipse 130% 80% at 25% -5%,
    var(--dc-accent-a20),
    var(--dc-accent-a05) 40%,
    var(--dc-accent-a00) 70%
  );
  box-shadow: var(--dc-shadow-2xl);
}

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

/* Refleks widoczny w obu motywach — panel jest ciemny w obu, więc obowiązuje
   go układ warstw motywu ciemnego (różnica niekolorowa, reguła 10; ten sam
   zapis w loyalty-cta.css i fuel-switch.css). */
.dc-savings-calculator__panel .dc-ring--specular {
  display: block;
}

/* Faza i zwrot — numer 11 z rejestru (start o 11/12 obrotu, nieparzysty
   = w lewo). Numer należy do shared/calculator, który na stronie klubu nie
   stoi; rejestr 12 numerów jest cały zajęty — zgłoszone w raporcie. */
.dc-savings-calculator__panel {
  --dc-ring-spin: dcRingSpinRev;
  --dc-ring-delay: calc(var(--dc-duration-ring) * -11 / 12);
}

/* ==========================================================================
   2. ATMOSFERA PANELU — dwie plamy, przycięte owijką (panel sam nie ma
   overflow: hidden, bo obcinałby poświatę obwódki — loyalty-cta, partia 6)
   ========================================================================== */

.dc-savings-calculator__atmosphere {
  position: absolute;
  z-index: var(--dc-z-base);
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.dc-savings-calculator__glow {
  position: absolute;
  border-radius: var(--dc-radius-full);
  filter: var(--dc-blur-xl);
}

.dc-savings-calculator__glow--crown {
  inset-block-start: -10%;
  inset-inline-start: -5%;
  width: 60%;
  height: 55%;
  background-image: radial-gradient(ellipse, var(--dc-accent-a20), var(--dc-accent-a00) 65%);
  animation: dcSavingsCalculatorGlow 7s var(--dc-ease) infinite;
}

.dc-savings-calculator__glow--ember {
  inset-block-end: -15%;
  inset-inline-end: -8%;
  width: 58%;
  height: 55%;
  background-image: radial-gradient(ellipse, var(--dc-accent-a15), var(--dc-accent-a00) 65%);
  animation: dcSavingsCalculatorGlow 10s var(--dc-ease) 2.5s infinite;
}

/* ==========================================================================
   3. SIATKA — dwie kolumny auto-fit, wyśrodkowane w pionie
   ========================================================================== */

.dc-savings-calculator__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-40);
  align-items: center;
}

/* ==========================================================================
   4. NAGŁÓWEK — na ciemnym panelu złoto bierze --dc-accent (C.8)
   ========================================================================== */

.dc-savings-calculator__header {
  margin-block-end: var(--dc-space-32);
}

.dc-savings-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);
}

.dc-savings-calculator__heading {
  margin-block-end: var(--dc-space-14);
  font-size: var(--dc-display-4);
  color: var(--dc-text-on-dark);
}

.dc-savings-calculator__lead {
  font-size: var(--dc-text-lg);
  line-height: var(--dc-leading-relaxed);
  color: var(--dc-text-on-dark-muted);
}

/* ==========================================================================
   5. SUWAK — etykieta jest siatką: pytanie, odczyt, <input> na obie kolumny
   ========================================================================== */

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

.dc-savings-calculator__question {
  font-size: var(--dc-text-base);
  font-weight: var(--dc-weight-medium);
  color: var(--dc-text-on-dark-muted);
}

.dc-savings-calculator__value {
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-6xl);
  font-weight: var(--dc-weight-black);
  letter-spacing: var(--dc-tracking-snug);
  color: var(--dc-accent);
}

/* Wysokość 6 px to wysokość TORU; gałka wystaje poza tor i to ona łapie
   kursor. Pseudoelementy -webkit- i -moz- w OSOBNYCH regułach (nieznany
   pseudoelement unieważnia całą listę selektorów). */
.dc-savings-calculator__range {
  grid-column: 1 / -1;
  width: 100%;
  height: var(--dc-space-6);
  margin-block: var(--dc-space-4) var(--dc-space-12);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

.dc-savings-calculator__range::-webkit-slider-runnable-track {
  height: var(--dc-space-6);
  border-radius: var(--dc-radius-pill);
  background-color: color-mix(in srgb, var(--dc-text-on-dark) 12%, transparent);
}

.dc-savings-calculator__range::-moz-range-track {
  height: var(--dc-space-6);
  border-radius: var(--dc-radius-pill);
  background-color: color-mix(in srgb, var(--dc-text-on-dark) 12%, transparent);
}

.dc-savings-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-on-dark);
  box-shadow: var(--dc-shadow-sm);
}

.dc-savings-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-on-dark);
  box-shadow: var(--dc-shadow-sm);
}

/* Jeden fokus dla pól (C.7): 2 px --dc-accent w kształcie pigułki. */
.dc-savings-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);
}

.dc-savings-calculator__scale {
  display: flex;
  justify-content: space-between;
}

.dc-savings-calculator__scale-mark {
  font-size: var(--dc-text-xs);
  font-weight: var(--dc-weight-medium);
  color: var(--dc-text-on-dark-muted);
}

/* ==========================================================================
   6. POLA WYNIKU — 2×2 bez breakpointu (loyalty-cta.css 7b)
   ========================================================================== */

.dc-savings-calculator__results {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dc-space-12);
}

/* Baza „50 % minus pół odstępu": dwa kafle plus gap dają dokładnie 100 %. */
.dc-savings-calculator__result {
  flex: 1 1 calc(50% - var(--dc-space-6));
  padding: var(--dc-space-20);
  border: var(--dc-border) solid color-mix(in srgb, var(--dc-text-on-dark) 12%, transparent);
  border-radius: var(--dc-radius-16);
  background-color: color-mix(in srgb, var(--dc-text-on-dark) 6%, transparent);
}

/* Pole progu — jedyne złote: tło .1 = --dc-accent-a10, obwódka .35
   -> --dc-border-accent (.3). */
.dc-savings-calculator__result--accent {
  border-color: var(--dc-border-accent);
  background-color: var(--dc-accent-a10);
}

.dc-savings-calculator__result-label {
  margin-block-end: var(--dc-space-8);
  font-size: var(--dc-text-xs);
  font-weight: var(--dc-weight-medium);
  color: var(--dc-text-on-dark-muted);
}

.dc-savings-calculator__result-value {
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-6xl);
  font-weight: var(--dc-weight-black);
  line-height: var(--dc-leading-tight);
  letter-spacing: var(--dc-tracking-tight);
  color: var(--dc-text-on-dark);
}

.dc-savings-calculator__result--accent .dc-savings-calculator__result-value {
  color: var(--dc-accent);
}

.dc-savings-calculator__result-note {
  margin-block-start: var(--dc-space-4);
  font-size: var(--dc-text-xs);
  color: var(--dc-text-on-dark-muted);
}

.dc-savings-calculator__footnote {
  margin-block-start: var(--dc-space-16);
  font-size: var(--dc-text-sm);
  line-height: var(--dc-leading-relaxed);
  color: var(--dc-text-on-dark-muted);
}

/* ==========================================================================
   7. RUCH — tętno plam (klatki jak dcLoyaltyCtaGlow; reguła 12)
   ========================================================================== */

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

  50% {
    opacity: 0.85;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dc-savings-calculator__glow {
    animation: none;
  }
}