/* Widok 05 — Cennik (oferta). Poziom odwagi 2: zadbane, ale nie bomba. Konfigurator stoi na
   /wycena (wycena.css). Tylko układ; wartości z tokenów system.css. Kompozycja: „rachunek jawny"
   — treść trzyma lewą część ekranu, prawy pas (≥ 960 px, ~15 rem) należy do znaku (tor „podróż",
   kotwice w cennik.php). Tabele i listy — włoskowe linie, liczby w tabular-nums; kolor tylko
   w krawędziach szkła i podkreśleniach. */

.cennik { pointer-events: none; }
.cennik :is(h1, h2, h3, p, li, dl, table, a, button, label, input, textarea, select, .tafla, form, .cn-zakladki) { pointer-events: auto; }
.cennik > section { position: relative; padding-inline: var(--margines); }
.cn-sekcja { padding-block: var(--o-8); }
.cn-wnetrze { display: grid; gap: var(--o-6); min-width: 0; }
@media (min-width: 960px) {
  .cn-sekcja { padding-block: var(--o-9); }
  /* prawy pas wolny dla znaku — „nigdy za tekstem" */
  .cn-wnetrze { max-width: min(72rem, calc(100% - 15rem)); }
}
.cn-glowa { display: grid; gap: var(--o-3); max-width: 40rem; color: var(--tekst-2); }
.cn-glowa h2 { color: var(--tekst); margin-bottom: var(--o-1); }
.cn-przypis { color: var(--tekst-2); font-size: var(--r-0); line-height: 1.55; }
.cn-dalej { margin-left: var(--o-1); vertical-align: middle; min-height: 36px; }

/* ==========================================================================
   1. HERO — odpowiedź w H1: pytanie cicho, odpowiedź jasno (ten sam stopień).
   Telefon: nagłówek · akapit · akcje · znak (pole) · fakty. Komputer: dwie kolumny,
   nad faktami po prawej płynie znak.
   ========================================================================== */
.cn-hero {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: var(--o-5);
  padding-top: calc(var(--logo-wys) + var(--o-6));
  padding-bottom: var(--o-7);
}
.cn-hero-glowna { display: grid; gap: var(--o-5); max-width: 44rem; }
.cn-tytul { font-size: var(--r-5); font-weight: var(--w-rzezba); line-height: 1.02; letter-spacing: -.024em; text-wrap: balance; }
.cn-tytul-pytanie { color: var(--tekst-2); }
.cn-tytul-odpowiedz { color: var(--tekst); }
.cn-lead { max-width: 52ch; color: var(--tekst-2); font-size: var(--r-lead); line-height: 1.6; }
.cn-hero-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: var(--o-3) var(--o-5); }
.cn-hero-akcje .odnosnik-cichy { font-size: var(--r-0-5); color: var(--tekst-2); }
.cn-dopisek { margin: 0; color: var(--tekst-2); font-size: var(--r-0-5); line-height: 1.5; }
.cn-hero-scena { min-height: 8.5rem; }
.cn-hero { position: relative; }
/* kotwice slalomu: góra znacznika przy górze okna = znak w luce (wjazd 25%, wyjazd 50% wysokości hero) */
.cn-kotwica-luka { position: absolute; left: 0; top: 34%; width: 1px; height: 1px; pointer-events: none; }
.cn-kotwica-luka--wyjscie { top: 64%; }
.cn-kotwica-koniec { position: absolute; left: 0; top: 100%; width: 1px; height: 1px; pointer-events: none; }
.cn-hero-boczna { display: grid; gap: var(--o-5); align-content: start; }
.cn-fakty { margin: 0; padding: 0; list-style: none; color: var(--tekst); }
.cn-fakty li { padding: 9px 0; border-top: 1px solid var(--linia); }
.cn-fakty li:last-child { border-bottom: 1px solid var(--linia); }
.cn-dopowiedz { color: var(--tekst-2); font-size: var(--r-0-5); line-height: 1.6; max-width: 40ch; }
/* komputer: znak płynie w pozie z kotwicy, nie w polu. Dwie kolumny dopiero od 1200 px — węższe okno
   nie ma luki między tekstem a faktami na slalom znaku; tam fakty stoją pod tekstem, a prawy pas
   (jak w ofercie, 62vw) zostaje wolny dla znaku */
@media (min-width: 960px) {
  .cn-hero { padding-top: calc(var(--logo-wys) + var(--o-7)); }
  .cn-hero-scena { display: none; }
}
@media (min-width: 960px) and (max-width: 1199px) {
  :is(.cn-hero-glowna, .cn-hero-boczna) { max-width: calc(62vw - var(--margines)); }
}
@media (min-width: 1200px) {
  .cn-hero {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
    grid-template-areas: "glowna ." "glowna boczna";
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: var(--o-8);
    row-gap: 0;
  }
  .cn-hero-glowna { grid-area: glowna; align-self: center; }
  .cn-hero-boczna { grid-area: boczna; padding-top: clamp(12rem, 28vh, 17rem); }  /* fakty nisko — slalom ma miejsce na łuk */
}

/* ==========================================================================
   2. PORÓWNANIE — dwa rachunki w taflach, obok siebie na szerokim ekranie
   ========================================================================== */
.cn-teza { color: var(--tekst); font-size: var(--r-lead); line-height: 1.6; }
.cn-teza strong { font-weight: var(--w-mocny); }
.cn-rachunki { display: grid; gap: var(--o-5); align-items: start; }
@media (min-width: 1440px) { .cn-rachunki { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.cn-rachunek { max-width: none; display: grid; gap: var(--o-4); }
.cn-rachunek h3 { font-size: var(--r-2); font-weight: var(--w-tekst); letter-spacing: 0; }
.cn-tabela { width: 100%; border-collapse: collapse; font-size: var(--r-0-5); line-height: 1.45; color: var(--tafla-tekst); }
.cn-tabela :is(th, td) { padding: 10px var(--o-3) 10px 0; text-align: left; vertical-align: baseline; border-top: 1px solid var(--tafla-linia); }
.cn-tabela :is(th, td):last-child { padding-right: 0; }
.cn-tabela thead th {
  padding-top: 0;
  border-top: 0;
  color: var(--tafla-tekst-2);
  font-family: var(--kroj-mono); font-size: var(--r-mini); font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase;
}
.cn-tabela tbody th { font-weight: var(--w-tekst); }
.cn-kwota { white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.cn-tabela--doplaty .cn-kwota, .cn-tabela--doplaty thead th:last-child { text-align: right; }
.cn-u-mnie { color: var(--tafla-tekst); font-weight: var(--w-mocny); white-space: nowrap; }
.cn-tabela sup { font-size: .7em; margin-left: 1px; color: var(--tafla-akcent); }
.cn-firma { color: var(--tafla-tekst); font-weight: var(--w-mocny); }
.cn-tabela--opole tbody th { color: var(--tafla-tekst-2); }
.cn-poza { color: var(--tafla-tekst-2); font-size: var(--r-0); }
.cn-my :is(th, td) { border-top-color: var(--tafla-pole); }
.cn-my .cn-kwota { color: var(--tafla-tekst); font-weight: var(--w-mocny); }
.cn-przypisy { margin: 0; padding-left: 1.2em; color: var(--tafla-tekst-2); font-size: var(--r-0); line-height: 1.55; display: grid; gap: var(--o-1); }
.cn-przypisy li::marker { color: var(--tafla-akcent); font-size: .85em; }
.cn-rachunek .cn-przypis { color: var(--tafla-tekst-2); }
/* telefon: wiersz tabeli = dwie linie (nazwa · kwoty), etykiety kolumn przy wartościach */
@media (max-width: 559px) {
  .cn-tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cn-tabela tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--o-3); padding: 10px 0; border-top: 1px solid var(--tafla-linia); }
  .cn-tabela :is(th, td) { padding: 0; border: 0; }
  .cn-tabela tbody th { grid-column: 1 / -1; padding-bottom: 2px; }
  .cn-tabela [data-e]::before { content: attr(data-e) " "; font-family: var(--kroj-mono); font-size: var(--r-mini); letter-spacing: .08em; text-transform: uppercase; color: var(--tafla-tekst-2); }
  .cn-tabela--opole .cn-poza { grid-column: 1 / -1; }
  .cn-tabela--opole .cn-kwota { grid-row: 2; }
  .cn-my { border-top-color: var(--tafla-pole) !important; }
}
.cn-zrodla { display: grid; gap: var(--o-2); color: var(--tekst-2); max-width: 44rem; }
.cn-zrodla ul { display: flex; flex-wrap: wrap; gap: 0 var(--o-4); margin: 0; padding: 0; list-style: none; }
.cn-zrodla a { display: inline-block; padding-block: 6px; color: var(--tekst-2); text-decoration: underline 1px var(--linia); text-underline-offset: .35em; }
.cn-zrodla a:hover { color: var(--tekst); text-decoration-color: var(--akcent); }

/* ==========================================================================
   2. PRZEŁĄCZNIK OFERTY — pigułka zakładek ze szkła (jak menu: .pigulka + soczewka
   pod wybraną), pod nią panel. Panele na niebie; tabele w taflach tylko w „Ja kontra
   rynek". Bez JS pigułka jest ukryta, panele stoją po kolei z odstępem.
   ========================================================================== */
.cn-oferta .cn-wnetrze { gap: var(--o-6); }
/* komputer: znak wraca z luki hero w prawy pas (poza x .56, s .4 → ~69–87% szerokości) i obraca się
   tam przez całą ofertę — treść przełącznika kończy się przed nim */
@media (min-width: 960px) { .cn-oferta .cn-wnetrze { max-width: calc(62vw - var(--margines)); } }
.cn-panele { display: grid; gap: var(--o-9); min-width: 0; }
.cn-oferta--zakladki .cn-panele { gap: 0; overflow: clip; }       /* animacja wysokości tnie po krawędzi */
.cn-panel { display: grid; gap: var(--o-6); min-width: 0; outline: none; }
.cn-panel[hidden] { display: none; }

.cn-zakladki {
  position: relative;
  justify-self: start;
  max-width: 100%;
  padding: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.cn-zakladki::-webkit-scrollbar { display: none; }
.cn-zakladki[hidden] { display: none; }
.cn-zakladka {
  position: relative; z-index: 1;
  flex: none;
  padding: 10px 18px;
  border: 0; border-radius: var(--z-pigulka);
  background: none;
  color: var(--tekst-2);
  font: inherit; font-size: var(--r-0-5); letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  transition: color .25s ease;
}
.cn-zakladka:hover, .cn-zakladka[aria-selected="true"] { color: var(--tekst); }
.cn-zakladka:focus-visible { outline: 2px solid var(--akcent); outline-offset: -2px; }
.cn-zakladki .menu-soczewka { left: 0; }
/* telefon: cztery osobne pigułki ze szkła, dwa rzędy po dwie (klasa .pigulka — cennik.js);
   wybraną niesie rozjaśnienie szkła i obwódka w akcencie */
@media (max-width: 699px) {
  .cn-oferta { padding-top: var(--o-5); }
  .cn-zakladki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--o-2); justify-self: stretch; padding: 0; overflow: visible; }
  .cn-zakladki .menu-soczewka { display: none; }
  .cn-zakladka { justify-content: center; padding: 12px 10px; font-size: var(--r-0-5); text-align: center; white-space: normal; }
  .cn-zakladka[aria-selected="true"] { --szklo-rozjasn: var(--szklo-rozjasn-hover); color: var(--tekst); font-weight: var(--w-mocny); outline: 1.5px solid color-mix(in srgb, var(--akcent) 75%, transparent); outline-offset: -1.5px; }
}

/* W cenie — lista (czesci/oferta.php, oferta.css) na niebie + zdanie o Google */
.cn-google { max-width: 60ch; color: var(--tekst-2); font-size: var(--r-0-5); padding-left: var(--o-4); border-left: 1px solid color-mix(in srgb, var(--czerwien) 60%, transparent); }

/* Płatne dodatkowo — krótka lista */
.cn-platne-lista { max-width: 44rem; margin: 0; padding: 0; list-style: none; }
.cn-platne-lista li { padding: 9px 0; border-top: 1px solid var(--linia); color: var(--tekst-2); font-size: var(--r-0-5); }
.cn-platne-lista li:last-child { border-bottom: 1px solid var(--linia); }
.cn-platne-lista strong { color: var(--tekst); font-weight: var(--w-mocny); }

/* Warunki — konkret zamiast „sekcji o zaufaniu"; wiersze na niebie */
.cn-warunki-lista { margin: 0; display: grid; max-width: 52rem; }
.cn-warunki-lista > div { display: grid; gap: var(--o-1) var(--o-6); padding: 12px 0; border-top: 1px solid var(--linia); }
.cn-warunki-lista > div:last-child { border-bottom: 1px solid var(--linia); }
@media (min-width: 700px) { .cn-warunki-lista > div { grid-template-columns: 14rem minmax(0, 1fr); } }
.cn-warunki-lista dt { color: var(--tekst); font-weight: var(--w-mocny); }
.cn-warunki-lista dd { margin: 0; color: var(--tekst-2); }

/* ==========================================================================
   3. DOMKNIĘCIE — znak ląduje nad wezwaniem; limit tuż przy przycisku
   ========================================================================== */
.cn-domkniecie { display: grid; justify-items: center; gap: var(--o-4); padding-top: var(--o-7); text-align: center; }
/* pole znaku: na końcu strony w oknie mieści się pole, wezwanie i stopka — znak nie wchodzi pod
   nagłówek. --cn-dol = nagłówek + wezwanie + odstępy + stopka (zmierzone 30.09: 1576×914, 768×1024) */
.cn-sekcja.cn-domkniecie { padding-bottom: var(--o-6); }
/* komputer: oddech nad polem znaku — łuk znaku na środek zaczyna się, gdy treść oferty minie znak,
   i potrzebuje ~400 px przewinięcia, żeby był przejazdem, nie przeskokiem (Jakub 30.09) */
@media (min-width: 960px) { .cn-sekcja.cn-domkniecie { padding-top: calc(var(--o-7) + 12rem); } }
.cn-domkniecie-scena { --cn-dol: 47rem; width: min(100%, 30rem); height: max(9rem, min(20rem, calc(100svh - var(--cn-dol)))); }
@media (max-width: 959px) { .cn-domkniecie-scena { --cn-dol: 49rem; } }
@media (max-width: 699px) { .cn-domkniecie-scena { height: clamp(7rem, 22vh, 11rem); } }
.cn-domkniecie-wnetrze { justify-items: center; max-width: 38rem !important; gap: var(--o-4); }
.cn-domkniecie h2 { font-size: var(--r-4); }
.cn-domkniecie p { color: var(--tekst-2); max-width: 46ch; }
.cn-bez { font-size: var(--r-0-5); }
.cn-telefon { color: var(--tekst); white-space: nowrap; text-decoration: underline 1px color-mix(in srgb, var(--czerwien) 80%, transparent); text-underline-offset: .3em; }

/* ==========================================================================
   KALKULATORY (Etap 2) — w zakładce „Ja kontra rynek". Ciche: tu się liczy. Sterowanie po lewej,
   dwa słupki i jawne wyliczenie po prawej (telefon: pod sobą). Słupek: pewna część pełna, możliwa
   rozpiętość jaśniejsza. Moja kwota w akcencie, rynek w szarym fiolecie.
   ========================================================================== */
.cn-kalk { --tafla-szer: none; display: grid; gap: var(--o-4); }
.cn-kalk[hidden] { display: none; }
.cn-kalk h3 { font-size: var(--r-3); font-weight: var(--w-srodek); }
.cn-kalk-lead { margin: 0; max-width: 60ch; color: var(--tafla-tekst-2, var(--tekst-2)); font-size: var(--r-0-5); }
.cn-kalk-uklad { display: grid; gap: var(--o-6); }
@media (min-width: 1100px) { .cn-kalk-uklad { grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr); } }
.cn-kalk-sterowanie { display: grid; gap: var(--o-4); align-content: start; }
.cn-kalk-grupa { display: grid; gap: var(--o-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.cn-kalk-grupa legend, .cn-kalk-grupa > label { padding: 0; margin-bottom: var(--o-1); font-size: var(--r-0); color: var(--tafla-tekst-2, var(--tekst-2)); }
.cn-kalk-grupa output { font-family: var(--kroj-mono); color: var(--tekst); font-variant-numeric: tabular-nums; }
.cn-kalk-grupa input[type="range"] { width: 100%; accent-color: var(--akcja); }
.cn-kalk-grupa input[type="range"]:disabled { opacity: .35; }
.cn-kalk-przelacz { display: flex; flex-wrap: wrap; gap: var(--o-1); }
.cn-kalk-przelacz button {
  min-height: 36px; padding: 0 var(--o-3); border: 1px solid var(--tafla-pole); border-radius: var(--z-pigulka);
  background: none; color: var(--tafla-tekst-2, var(--tekst-2)); font-size: var(--r-0); cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.cn-kalk-przelacz button:hover { color: var(--tekst); }
.cn-kalk-przelacz button[aria-pressed="true"] { color: var(--tekst); background: rgba(235, 233, 242, .1); border-color: color-mix(in srgb, var(--akcent) 60%, transparent); }
.cn-kalk-znaczniki { display: grid; gap: 2px; }
.cn-kalk-znacznik { display: flex; align-items: center; gap: var(--o-2); min-height: 32px; font-size: var(--r-0-5); color: var(--tafla-tekst-2, var(--tekst-2)); cursor: pointer; }
.cn-kalk-znacznik input { width: 16px; height: 16px; accent-color: var(--akcja); }
.cn-kalk-znacznik:has(input:checked) { color: var(--tekst); }

.cn-kalk-wynik { display: grid; gap: var(--o-5); align-content: start; min-width: 0; container-type: inline-size; }
.cn-kalk-slupki { display: grid; gap: var(--o-4); }
.cn-kalk-slupek { display: grid; gap: var(--o-1); }
.cn-kalk-kto { margin: 0; font-size: var(--r-0); color: var(--tafla-tekst-2, var(--tekst-2)); }
.cn-kalk-tor { position: relative; height: 14px; border-radius: var(--z-pigulka); background: rgba(235, 233, 242, .06); overflow: hidden; }
.cn-kalk-tor span { position: absolute; top: 0; bottom: 0; left: 0; transition: width .45s var(--e-lagodna), left .45s var(--e-lagodna); }
.cn-kalk-pewne { border-radius: var(--z-pigulka) 0 0 var(--z-pigulka); }
.cn-kalk-slupek--moj .cn-kalk-pewne { background: var(--akcja-tlo-2); }
.cn-kalk-slupek--moj .cn-kalk-mozliwe { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--akcja) 45%, transparent) 0 6px, color-mix(in srgb, var(--akcja) 25%, transparent) 6px 10px); }
.cn-kalk-slupek--rynek .cn-kalk-pewne { background: var(--fiolet-szary); }
.cn-kalk-slupek--rynek .cn-kalk-mozliwe { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--fiolet-szary) 70%, transparent) 0 6px, color-mix(in srgb, var(--fiolet-szary) 35%, transparent) 6px 10px); }
.cn-kalk-kwota { margin: 0; font-size: var(--r-3); font-weight: var(--w-lekki); font-variant-numeric: tabular-nums; color: var(--tekst); }
.cn-kalk-slupek--rynek .cn-kalk-kwota { color: var(--tafla-tekst-2, var(--tekst-2)); }
.cn-kalk-wyliczenie { display: grid; gap: var(--o-5); }
@container (min-width: 38rem) { .cn-kalk-wyliczenie { grid-template-columns: 1fr 1fr; } }
.cn-kalk-naglowek { margin: 0 0 var(--o-2); font-size: var(--r-0); color: var(--tekst); font-weight: var(--w-mocny); }
.cn-kalk-wyliczenie ul { margin: 0; padding: 0; list-style: none; }
.cn-kalk-wyliczenie li { display: flex; justify-content: space-between; gap: var(--o-3); padding: 7px 0; border-top: 1px solid var(--linia); font-size: var(--r-0); color: var(--tafla-tekst-2, var(--tekst-2)); }
.cn-kalk-liczba { flex: none; font-variant-numeric: tabular-nums; color: var(--tekst); }

/* straty — jedna liczba z badania, rośnie razem z czasem */
.cn-straty-uklad { display: grid; gap: var(--o-5); align-items: center; }
@media (min-width: 760px) { .cn-straty-uklad { grid-template-columns: minmax(14rem, 22rem) minmax(0, 1fr); } }
.cn-straty-skala { display: flex; justify-content: space-between; margin: 0; color: var(--tafla-tekst-2, var(--tekst-2)); }
.cn-straty-wynik { margin: 0; color: var(--tafla-tekst-2, var(--tekst-2)); max-width: 40ch; }
.cn-straty-liczba {
  display: block; font-family: var(--kroj-naglowek); font-size: var(--r-5); font-weight: var(--w-rzezba); line-height: 1;
  font-variant-numeric: tabular-nums; color: color-mix(in oklab, var(--tekst) calc(100% - var(--straty, 0) * 55%), var(--akcja));
  margin-bottom: var(--o-2);
}
@media (prefers-reduced-motion: reduce) { .cn-kalk-tor span { transition: none; } }
.cn-nerdzi { margin: 0; font-size: var(--r-0); color: var(--tekst-3); }
.cn-nerdzi .odnosnik-cichy { color: var(--tekst-2); }