/* =============================================================================
   Kalkulator „Ilu gości?” (/ilu-gosci), jego wersja kompaktowa na głównej i strona /monoporcje (E3, Fala 2, 17.10.2026).
   Styl C „Złota nić”: nagłówek i licznik na nocnej scenie (złoto wolno jako tekst na śliwce), formularz i karty wyniku na kremie.
   Ruch: wejście wyniku z mgły (rozmycie -> ostrość, expo-out, kaskada 70 ms), licznik toczony cyframi (public/kalkulator.js).
   prefers-reduced-motion: zero ruchu, nic ukrytego. Duo rozłożony (890x626): dwie połówki z rynną 48 px na zgięciu (x 421-469).
   ============================================================================= */

/* ---------- Zakres KREM dla kart kalkulatora (ten sam zestaw ról co karty produktów w styl-klient.css) ---------- */
body.klient :is(.kalk-forma, .kalk-karta, .kalk-skrot__forma, .monoporcje__kalkulator) {
  color-scheme: light;
  --krem-50: #fbf8f2; --krem-100: #f3ede2; --krem-200: #e7dfd0; --biel: #ffffff;
  --tekst-900: #1d1530; --tekst-600: #5c5470;
  --sliwka-900: #2a0a52; --sliwka-700: #3f1283; --sliwka-500: #5a1fb8; --sliwka-100: #ece4f7; --sliwka-50: #f6f2fb;
  --zloto-500: #e3b422; --zloto-700: #b8901a;
  --blad: #a83a3a; --blad-tlo: #f9e5e5; --blad-tekst: #a83a3a;
  --na-przycisku: #ffffff; --focus-na-przycisku: #e3b422;
  --zloto-tekst: color-mix(in srgb, var(--zloto-700) 64%, var(--tekst-900));
  --zloto-linia: color-mix(in srgb, var(--zloto-700) 75%, transparent);
  --obrys: color-mix(in srgb, var(--tekst-600) 72%, var(--biel));
  --wybrane: var(--sliwka-900);
  --przycisk-tlo: var(--sliwka-900); --przycisk-tlo-hover: var(--sliwka-700); --przycisk-cien: none;
  --przycisk-drugi-ramka: var(--sliwka-900); --focus-przycisku: var(--sliwka-500);
  color: var(--tekst-900);
  background: var(--krem-karty);
  box-shadow: 0 0 0 1px var(--zloto-linia-sceny), 0 30px 60px -32px rgb(0 0 0 / 0.8);
}
:root[data-scena="jasna"] body.klient :is(.kalk-forma, .kalk-karta, .kalk-skrot__forma, .monoporcje__kalkulator) { box-shadow: 0 0 0 1px var(--krem-200), var(--cien); }

/* ---------- Strona /ilu-gosci ---------- */
.kalk { padding-top: 16px; }
.kalk__siatka { display: grid; gap: 28px; min-width: 0; margin-top: 8px; }
.kalk__lewa, .kalk__prawa { min-width: 0; }
.kalk__naglowek h1 { margin-top: 12px; font-size: clamp(var(--fs-32), 6vw, var(--fs-48)); line-height: 1.08; text-wrap: balance; }
.kalk__naglowek h1 em { display: block; }
:root:not([data-scena="jasna"]) body.klient .kalk__naglowek h1 em { color: var(--zloto-na-sliwce); }
.kalk__wstep { margin-top: 12px; max-width: 34em; color: var(--tekst-600); }

.kalk-forma { display: grid; gap: 22px; margin-top: 22px; padding: 22px 18px 24px; border-radius: 22px; }
.kalk-pole { min-width: 0; margin: 0; padding: 0; border: 0; }
.kalk-pole > .etykieta { margin-bottom: 10px; }
.kalk-pole__pomoc { margin-top: 6px; font-size: var(--fs-14); color: var(--tekst-600); }
.kalk-pole__blad { margin-top: 8px; padding: 10px 12px; border-radius: var(--promien-s); background: var(--blad-tlo); font-size: var(--fs-15); font-weight: 600; color: var(--blad-tekst); }

.kalk-goscie { display: flex; align-items: center; gap: 14px; }
.kalk-goscie__liczba { flex: 0 0 6.5em; text-align: center; font-size: var(--fs-24); font-weight: 700; font-variant-numeric: tabular-nums; }
.kalk-goscie__suwak { flex: 1 1 auto; min-width: 0; height: var(--cel); margin: 0; accent-color: var(--sliwka-900); cursor: pointer; }
.kalk-goscie__suwak:focus-visible { outline: 3px solid var(--sliwka-500); outline-offset: 2px; border-radius: var(--promien-s); }
.kalk-goscie__suwak[hidden] { display: none; }
.kalk-goscie:has(.kalk-goscie__suwak[hidden]) .kalk-goscie__liczba { flex: 1 1 auto; }

.kalk-okazje { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kalk-kafel { position: relative; display: grid; justify-items: start; gap: 8px; min-height: 92px; padding: 14px; border: 1px solid var(--krem-200); border-radius: var(--promien); background: var(--biel); cursor: pointer; transition: border-color 0.3s var(--krzywa-c), transform 0.5s var(--krzywa-c), box-shadow 0.3s var(--krzywa-c); }
.kalk-kafel input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.kalk-kafel__ikona { color: var(--sliwka-700); }
.kalk-kafel__nazwa { font-family: var(--czcionka-naglowki); font-size: var(--fs-24); font-weight: 600; line-height: 1.1; color: var(--sliwka-900); }
.kalk-kafel:hover { border-color: var(--sliwka-500); }
.kalk-kafel:has(input:checked) { border-color: var(--sliwka-900); background: var(--sliwka-50); box-shadow: inset 0 0 0 1px var(--sliwka-900); }
.kalk-kafel:has(input:checked) .kalk-kafel__ikona { color: var(--sliwka-900); }
.kalk-kafel:has(input:focus-visible) { outline: 3px solid var(--sliwka-500); outline-offset: 2px; }

.kalk-rodzaje { display: flex; flex-wrap: wrap; gap: 8px; }
.kalk-chip { position: relative; display: inline-flex; }
.kalk-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.kalk-chip span { display: inline-flex; align-items: center; min-height: var(--cel); padding: 0 16px; border: 1px solid var(--obrys); border-radius: var(--promien-pelny); background: var(--biel); font-size: var(--fs-15); font-weight: 600; color: var(--tekst-900); }
.kalk-chip:hover span { border-color: var(--sliwka-500); }
.kalk-chip input:checked + span { background: var(--sliwka-900); border-color: var(--sliwka-900); color: #ffffff; }
.kalk-chip input:focus-visible + span { outline: 3px solid var(--sliwka-500); outline-offset: 2px; }
.kalk-forma__policz { justify-self: start; }

/* ---------- Wynik ---------- */
.kalk-wynik { display: grid; gap: 18px; min-width: 0; }
.kalk-licznik { padding: 4px 2px 0; }
.kalk-licznik__wiersz { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.kalk-licznik__liczba { display: inline-flex; font-family: var(--czcionka-naglowki); font-size: clamp(64px, 14vw, 96px); font-weight: 600; line-height: 0.95; font-variant-numeric: lining-nums tabular-nums; color: var(--sliwka-900); }
:root:not([data-scena="jasna"]) body.klient .kalk-licznik__liczba { color: var(--zloto-na-sliwce); }
.kalk-licznik__podpis { font-family: var(--czcionka-naglowki); font-size: var(--fs-28); font-style: italic; font-weight: 500; line-height: 1.15; color: var(--tekst-900); }
.kalk-licznik__dla { margin-top: 6px; font-size: var(--fs-14); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tekst-600); }

/* toczone cyfry (kalkulator.js): okno jednej cyfry i pionowy pas 0-9 */
.kalk-cyfra { display: inline-block; height: 1em; overflow: hidden; line-height: 1; }
.kalk-cyfra__pas { display: flex; flex-direction: column; transition: transform 0.9s var(--krzywa-c); }
.kalk-cyfra__pas > span { display: block; height: 1em; line-height: 1; text-align: center; }
.kalk-licznik__liczba.kalk-toczony { line-height: 1; }

.kalk-karty { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.kalk-karta { display: grid; gap: 10px; padding: 18px 18px 20px; border-radius: 20px; }
.kalk-karta__glowa { display: flex; align-items: center; gap: 12px; }
.kalk-karta__ikona { flex: none; color: var(--sliwka-700); }
.kalk-karta__tytul { font-family: var(--czcionka-naglowki); font-size: var(--fs-28); font-weight: 600; line-height: 1.1; color: var(--sliwka-900); }
.kalk-karta__strzalka { display: inline-block; width: 0.7em; height: 0.7em; margin: 0 0.25em; vertical-align: -0.05em; color: var(--zloto-700); stroke-width: 2.4; }
.kalk-karta__produkt { font-size: var(--fs-16); line-height: 1.5; }
.kalk-karta__produkt strong { color: var(--sliwka-900); }
.kalk-karta__cena { font-weight: 700; color: var(--sliwka-900); white-space: nowrap; }
.kalk-karta__zdanie, .kalk-karta__termin { font-size: var(--fs-15); line-height: 1.55; color: var(--tekst-600); }
.kalk-karta__akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 4px; }
.kalk-karta__akcje .przycisk-tekst { display: inline-flex; align-items: center; min-height: var(--cel); }
.kalk-karta--zapytaj, .kalk-karta--brak { background: var(--krem-100); }

.kalk-wynik__suma { font-size: var(--fs-17); color: var(--tekst-900); }
.kalk-wynik__suma strong { color: var(--zloto-tekst); }
.kalk-wynik__uwaga { font-size: var(--fs-14); line-height: 1.55; color: var(--tekst-600); }
.kalk-wynik__pusto { font-size: var(--fs-17); color: var(--tekst-900); }
.kalk-wynik--pusty { justify-items: start; padding: 8px 0; }
.kalk-rozmowa { display: grid; justify-items: start; gap: 12px; }
.kalk-rozmowa--wazna { padding: 16px 18px; border-radius: 18px; border: 1px solid var(--zloto-linia); background: color-mix(in srgb, var(--zloto-na-sliwce) 6%, transparent); }
.kalk-rozmowa p { font-size: var(--fs-16); line-height: 1.55; color: var(--tekst-900); }
.nb { white-space: nowrap; }

/* wejście wyniku z mgły: serwer renderuje gotowy wynik; klasa .kalk-wchodzi pojawia się tylko po podmianie przez JS */
@media (prefers-reduced-motion: no-preference) {
  .kalk-wchodzi .kalk-licznik, .kalk-wchodzi .kalk-karta, .kalk-wchodzi .kalk-wynik__uwaga, .kalk-wchodzi .kalk-rozmowa, .kalk-wchodzi .kalk-wynik__suma {
    animation: kalk-mgla 0.7s var(--krzywa-c) both;
  }
  .kalk-wchodzi .kalk-karta:nth-child(2) { animation-delay: 70ms; }
  .kalk-wchodzi .kalk-karta:nth-child(3) { animation-delay: 140ms; }
  .kalk-wchodzi .kalk-wynik__suma { animation-delay: 180ms; }
  .kalk-wchodzi .kalk-wynik__uwaga { animation-delay: 210ms; }
  .kalk-wchodzi .kalk-rozmowa { animation-delay: 240ms; }
  .kalk-kafel:hover { transform: translateY(-2px); }
}
@keyframes kalk-mgla { from { opacity: 0; filter: blur(8px); transform: translateY(12px); } to { opacity: 1; filter: none; transform: none; } }
@media (prefers-reduced-motion: reduce) { .kalk-cyfra__pas { transition: none; } }

/* ---------- Układ: tablet i Duo rozłożony = dwie połówki (rynna na zgięciu), monitor = 5/7 ---------- */
@media (min-width: 520px) { .kalk-okazje { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 768px) {
  .kalk__siatka { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--rynna); align-items: start; }
  .kalk-okazje { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kalk-forma { padding: 24px 22px 26px; }
}
@media (min-width: 1024px) {
  .kalk__siatka { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 56px; }
  .kalk__prawa { position: sticky; top: 24px; }
}
@media (min-width: 1280px) { .kalk-okazje { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kalk-kafel__nazwa { font-size: var(--fs-18); font-family: var(--czcionka-ui); font-weight: 700; } }

/* ---------- Kompaktowy kalkulator na stronie głównej ---------- */
.kalk-skrot__siatka { display: grid; gap: 20px; min-width: 0; }
.kalk-skrot__tekst { margin-bottom: 0; }
.kalk-skrot__tekst h2 em { display: block; }
.kalk-skrot__wstep { margin-top: 10px; max-width: 34em; color: var(--tekst-600); }
.kalk-skrot__mono { margin-top: 10px; }
.kalk-skrot__mono .przycisk-tekst { display: inline-flex; align-items: center; min-height: var(--cel); }
:root:not([data-scena="jasna"]) body.klient .kalk-skrot__mono .przycisk-tekst { color: var(--krem-karty); text-decoration-color: var(--zloto-linia-sceny); }
.kalk-skrot__forma { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 14px 12px; align-items: end; padding: 18px 16px 20px; border-radius: 22px; min-width: 0; }
.kalk-skrot__pole { min-width: 0; }
.kalk-skrot__pole .etykieta { margin-bottom: 8px; }
.kalk-skrot__policz { grid-column: 1 / -1; width: 100%; }
@media (min-width: 768px) {
  .kalk-skrot__siatka { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--rynna); align-items: center; }
  .kalk-skrot__forma { padding: 22px; }
}
@media (min-width: 1024px) {
  .kalk-skrot__siatka { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; }
  .kalk-skrot__forma { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) auto; }
  .kalk-skrot__policz { grid-column: auto; width: auto; }
}

/* ---------- /monoporcje i odnośnik z /ciasta ---------- */
.monoporcje__kalkulator { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 28px; padding: 18px 20px; border-radius: 20px; }
.monoporcje__kalkulator p { font-family: var(--czcionka-naglowki); font-size: var(--fs-24); font-weight: 600; color: var(--sliwka-900); }
@media (min-width: 768px) and (max-width: 1023px) {
  /* Duo rozłożony: zdanie w lewej połówce, przycisk w prawej (nic na zgięciu) */
  .monoporcje__kalkulator { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--rynna); }
  .monoporcje__kalkulator .przycisk { justify-self: start; }
}