/* ==========================================================================
   premium-r11.css — v2 (po bramce: biznes PASS, design/technika/Codex → rewizja)
   Warstwa dostrojenia podstron do kanonu głównej. Ładowana JAKO OSTATNI <link>
   przed </head> na 38 stronach starego systemu.
   Stan efektywny (zmierzony Playwright): Onest R07 750, --max:1280, --cut:18,
   sekcje naprzemienne krem #f3efe6 / ciemny #11110f (ZOSTAJĄ — Z1/U1),
   przyciski ember+ink z notchem 12px (literal), stroke #c23500 na numerach.
   Zakres: D1 rogi · D2 stroke · D3 chrome · D4 rytm · D5 tracking · D6 proza ·
   D8 motion · D9 print + komponenty dowodowe (D7) dla E4.
   ========================================================================== */

/* --- D3a. TOKENY (wygrywające :root — harmonizacja wartości do kanonu) ----- */
:root {
  --bg: #0a0908;        /* efektywnie było #11110f */
  --bg-2: #12100e;
  --surface: #181512;
  --ink: #f1eadf;       /* efektywnie było #fffdfa — kanon cream */
  --ink-dim: #d7cec0;   /* efektywnie było #c6c2b8 — kanon cream-2 */
  --ember: #ff5a1f;
  --cut: 0px;           /* D1 — resztę notchy zdejmują nadpisania niżej */
  --max: 1380px;        /* 1280→1380: POSZERZENIE — QA na przelewanie (Codex #4) */
  /* D4 — rytm sekcji, tabela (Codex r2 #3): desktop 128–160 / tablet 96–128 /
     mobile 80–96; jawne @media niżej, bo ta warstwa wygrywa wszędzie */
  --sec-y: clamp(128px, 11vw, 160px);
  /* motion (przekrój wzorców) */
  --t-tap: 0.12s;
  --t-fade: 0.22s;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  /* cień dowodowy: 3 warstwy ember o niskiej alfie (T2/T16, stonowane po W2/W6) */
  --shadow-proof:
    0 2px 6px rgba(255, 90, 31, 0.05),
    0 16px 32px -12px rgba(255, 90, 31, 0.09),
    0 48px 72px -32px rgba(255, 90, 31, 0.07);
}

/* --- D1. OSTRE KRAWĘDZIE: koniec ściętych rogów (kanon radius 2px) ---------
   Literalne polygony wygrywającego skina + starsze var(--cut).
   Lista selektorów potwierdzona grepem przy instalacji (E1). */
.btn, .btn--solid, .btn--ghost, .nav__cta, .card, .card--flat,
.subcta__panel, .chip, .chips a, .hero__cta,
/* pełny skonsolidowany blok literalnych 16px z subpages-r07:3252
   (adversarial review: 13 klas było poza listą) */
.bento__tile, .flow4__item, .ministep, .bound, .vs__col, .kbgroup,
.sysrow, .live-demo, .case-oze, .oze-card, .artbox, .toc,
.calcform, .calcres, .engine__core, .shot, .quoteblock,
/* menu mobilne: literal 12px na :288 — widoczny na 38 stronach */
.nav__mobile-panel,
/* martwy w HTML, ale domykamy całą klasę problemu */
.trust__portrait {
  clip-path: none;
  border-radius: 2px;
}

/* --- D2. KONIEC KONTURU (D-160): wypełnione cyfry/słowa ------------------- */
.step__no, .ministep__no {
  -webkit-text-stroke: 0;
  color: var(--ink-dim);
}
.step:hover .step__no, .ministep:hover .ministep__no { color: var(--ember); }
.poster__verse .w-ghost {
  -webkit-text-stroke: 0;
  color: var(--ink-dim);
}

/* --- D3b. CHROME WSPÓŁDZIELONY: literały → kanon (U1; lista z E1-grep) -----
   Sekcje wewnętrzne ZOSTAJĄ (Z1/U1). Tu wyłącznie elementy widoczne
   na każdej stronie obok głównej: nav, footer, hero-teksty, przyciski. */
.nav {
  border-bottom: 1px solid rgba(241, 234, 223, 0.14);
  background: rgba(10, 9, 8, 0.96);
}
.nav--scrolled { background: rgba(10, 9, 8, 0.98); }
.nav__links a { color: #d7cec0; }
.nav__links a[aria-current="true"] { color: #f1eadf; }
.nav__cta { color: #0a0908; border-radius: 2px; }
.nav__cta:hover, .nav__cta:focus-visible {
  background: #f1eadf; border-color: #f1eadf; color: #0a0908;
}
.crumbs, .crumbs a { color: #d7cec0; }
.chips li { color: #d7cec0; border-color: rgba(241, 234, 223, 0.24); }
.hero--sub {
  background:
    linear-gradient(90deg, transparent 0 68%, rgba(255, 90, 31, .08) 68% 68.15%, transparent 68.15%),
    linear-gradient(0deg, rgba(241, 234, 223, .055) 1px, transparent 1px),
    #0a0908;
}
.hero__sub, .hero__note, .hero__ctx, .artmeta { color: #d7cec0; }
.btn--solid { color: #0a0908; }
.btn--solid:hover, .btn--solid:focus-visible {
  background: #0a0908; border-color: #0a0908; color: #f1eadf;
}
.hero .btn--solid:hover, .hero .btn--solid:focus-visible {
  background: #f1eadf; border-color: #f1eadf; color: #0a0908;
}
::selection { background: var(--ember); color: #0a0908; }
/* stopka podstron = sm-footer (stopka-mapa.css, projekt R10 pod spójność
   z główną) — bez zmian; wnętrza sekcji zostają wg U1 */

/* --- Z7/U2. MENU MOBILNE: bez fixed + bezpiecznik backdrop-filter --------- */
.nav:has(.nav__mobile[open]) {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--bg);
}
.nav__mobile-panel {
  background: var(--bg);
  border: 1px solid rgba(241, 234, 223, 0.14);
  border-top: 0;
}

/* --- D5a. ROLA EMBERU W HERO (panel: kolor 5,5/10 — systemowe) ------------
   Główna buduje hierarchię display przygaszonym kremem (D-160: „drugie wersy
   pełnym przygaszonym kolorem"), ember zostaje akcji. Podstrony miały całe
   wersy hero w emberze + glow 0.16 — dekoracyjne rozciągnięcie roli koloru. */
.hero__line--accent, .hero__line--accent .hero__line-in { color: var(--ink-dim); }
.hero--sub::before {
  background: radial-gradient(circle, rgba(255, 90, 31, 0.10), transparent 65%);
}

/* --- D5. TRACKING DISPLAY: −0.06em → pasmo wzorców (test w canary) --------
   Specyficzność 0,2,0 — stary skin ma `.hero--sub .hero__title` (kanarek b2b
   pokazał przegraną kaskadę przy 0,1,0). */
.hero__title,
.hero--sub .hero__title,
.hero--long-title .hero__title {
  letter-spacing: -0.035em;
  color: var(--ink);
}
.prose h2, .section h2, .break__title, .subcta__title { letter-spacing: -0.03em; }
.hero__title, .prose h2, .card__title, .sysrow__title, .trust__title,
.faq__title, .contact__title, .subcta__title, .vs__col-title, .proof__title,
.break__title, .enemy__title { text-wrap: balance; }
.prose p, .hero__lead, .hero__sub, .card__desc { text-wrap: pretty; }
.fact__num, .calcres__hero, .livelink__val { font-variant-numeric: tabular-nums; }

/* --- Bug produkcyjny (sprzed R11): .btn jest flexem, flex połyka spację
   między tekstem a <span class="nowrap"> — „procesna stole". 2 wystąpienia. */
.btn > .nowrap { margin-left: 0.28em; }

/* --- D6. PROZA I LEADY: szerokość wiersza (panel typografii K2) -----------
   Uwaga zmierzona: „0" Onest jest szeroki — 66ch = 1009px (~93 znaki!).
   Jednostka ch złudna dla tego kroju; limity w px (pasmo wzorców 500–720). */
.prose { max-width: 720px; }
.prose li, .prose p { max-width: 660px; }
/* FALA 2: 680 px przepuszczało 80 znaków w wierszu na 720 px. Ten arkusz ładuje się
   PO subpages-r07*, więc limit trzeba domknąć tutaj, inaczej przegrywa kolejnością.
   36em = 72 znaki przy zmierzonej szerokości znaku Onest (0,5113 em). */
.hero__sub, .section__lead { max-width: min(680px, 36em); }

/* --- Panel typografii K1: wariant b2b ma zerowy odstęp tytuł→lead --------- */
.section__title + .section__lead { margin-top: 32px; }

/* --- Panel typografii W1: notka pod pasem dowodów zdaniem, nie etykietą --- */
.proof-shots--hero + .hero__note {
  font-family: var(--font-body, "Onest", sans-serif);
  text-transform: none;
  letter-spacing: 0;
  font-size: 15px;
}

/* --- Kanon min 12px (Codex r2 #13): etykiety CAPS 11/11.5 → 12 ------------
   Wyjątki udokumentowane (dekoracyjne glify, nie tekst czytany):
   .bound--out li::before, .vs__col li::before (znaczniki ✕/◆ 9px),
   kropki paska mockupu 7px, ikona listy 8px. */
.card__result b, .ministep__result b, .prose th, .doc th,
.livelink__label, .shot__badge, .craft__group--b .sysrow__result b {
  font-size: 12px;
}

/* --- D7. KOMPONENTY DOWODOWE (dla E4; realny materiał, zero fabrykacji) --- */
.proof-strip {
  display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: baseline;
  padding: 16px 0;
  border-top: 1px solid rgba(241, 234, 223, 0.14);
  border-bottom: 1px solid rgba(241, 234, 223, 0.14);
}
.proof-strip .liczba-dowodu, .liczba-dowodu { color: var(--ember); font-weight: 700; }
.proof-shots {
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.proof-shots figure { margin: 0; }
.proof-shots--hero { margin-top: 80px; } /* panel W1: zgrany z krokiem H1→akapit */
.proof-shots--hero + .hero__note { margin-top: 16px; }
@media (max-width: 720px) {
  .proof-shots { gap: 48px; } /* panel W2: trzy dowody czytają się osobno */
  .proof-shots--hero { margin-top: 56px; }
}
.proof-shots a { display: block; }
.proof-shots img {
  width: 100%; height: auto; display: block;
  border: 1px solid rgba(241, 234, 223, 0.16);
  border-radius: 2px;
  box-shadow: var(--shadow-proof);
}
.proof-shots figcaption {
  margin-top: 8px;
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  opacity: 0.75;
}
/* jasna sekcja: cień dowodowy w czerni, nie emberze (na kremie ember brudzi) */
.section--light .proof-shots img, .proof-shots--light img {
  border-color: rgba(17, 17, 15, 0.14);
  box-shadow: 0 2px 6px rgba(17, 17, 15, 0.06), 0 20px 40px -16px rgba(17, 17, 15, 0.14);
}
.pull-quote {
  font-family: var(--font-display);
  font-weight: 700; font-size: clamp(24px, 3vw, 42px); line-height: 1.2;
  letter-spacing: -0.01em; text-wrap: balance;
  border-left: 2px solid var(--ember);
  padding-left: 24px; margin: 48px 0 12px;
}
.pull-quote__sig {
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0.75;
  margin-top: 16px;
}
.pull-quote__sig cite { font-style: normal; }

/* --- D8. MOTION: stagger + PEŁNY reduced-motion --------------------------- */
html.sub-js:not(.is-static) .reveal { transition-delay: calc(var(--i, 0) * 80ms); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* --- D4. TABLET/MOBILE: jawna tabela rytmu (Codex #7/r2#3) ---------------- */
@media (max-width: 980px) {
  :root { --sec-y: clamp(96px, 12vw, 128px); }
}
@media (max-width: 720px) {
  :root { --sec-y: clamp(80px, 12vw, 96px); }
  /* menu mobilne (Codex r2 #9): panel na pełną szerokość nav, nie szerokość
     przycisku MENU; zero fixed */
  .nav__mobile { position: static; }
  .nav__mobile-panel {
    position: absolute; left: 0; right: 0; top: 100%;
  }
  /* blur zdjęty bezwarunkowo w mobile (starsze przeglądarki bez :has();
     też koszt wydajności) — lite tło zamiast szkła */
  .nav, .nav--scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(10, 9, 8, 0.98);
  }
}

/* --- D9. PRINT (Codex #10): reset kolorów/efektów -------------------------- */
@media print {
  main > .section, main > .section:nth-of-type(odd), .section {
    background: #fff !important; color: #000 !important;
  }
  .nav, .nav__mobile, .sm-footer, [class*="widget"] { display: none !important; }
  .btn, .nav__cta { clip-path: none !important; }
  .proof-shots img { box-shadow: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* --- R13b (15.08): pas kuźni pod hero podstron ----------------------------- */
.pas-kuznia--sub {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: #0a0908;
}
.pas-kuznia--sub picture,
.pas-kuznia--sub img {
  width: 100%;
  height: 100%;
  display: block;
}
.pas-kuznia--sub img {
  object-fit: cover;
  object-position: 50% 50%;
}
.pas-kuznia--sub::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    #0a0908 0%,
    rgba(10, 9, 8, 0.2) 30%,
    rgba(10, 9, 8, 0.15) 70%,
    #0a0908 100%
  );
}
@media (max-width: 980px) {
  .pas-kuznia--sub { height: 160px; }
}
@media (max-width: 720px) {
  .pas-kuznia--sub { height: 120px; }
}

/* ── PRZEGLĄD 2026-08-17: hover CTA w sekcji zamykającej ─────────────────────
   .subcta ma wymuszone tło #11110f, a reguła hovera .btn--solid (wyżej: #0a0908)
   dawała kontrast przycisk↔tło 1,07:1 — na hoverze główny przycisk konwersji
   znikał (zmierzone na produkcji, 41 stron). Jasna inwersja jak w .hero. */
.subcta .btn--solid:hover, .subcta .btn--solid:focus-visible {
  background: #f1eadf; border-color: #f1eadf; color: #0a0908;
}

/* Decyzja Mateusza 18.08: hover tylko na elementach klikalnych — .ministep
   nie jest linkiem, a zmiana koloru numeru na hover sugerowała klikalność
   (sąsiednie .flow4__item/.bound nie reagują). Przywrócenie koloru bazowego. */
.ministep:hover .ministep__no { color: var(--ink-dim); }

/* ═══════════════════════════════════════════════════════════════════════════
   R23 · PANEL POMIAROWY — naprawa sekcji kalkulatorów (22.08.2026)
   Źródło formy: aparatura pomiarowa (panele przemysłowe 1960–85) — logika
   panelu i etykiety serigraficzne. NIE bierzemy skeuomorfizmu ani retro.
   Dotyczy wszystkich czterech kalkulatorów — mają ten sam defekt.
   Arkusz ładuje się PO subpages-r07.css, więc wygrywa kolejnością.
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- 1. Formularz jest kartą, tak jak wynik. Dotąd .calcform dostawał tło
   i clip-path, ale padding NIE BYŁ ZDEFINIOWANY W ŻADNYM ARKUSZU — treść
   dotykała krawędzi i wchodziła w ścięte rogi. */
.calcform {
  padding: clamp(24px, 2.8vw, 40px);
  border: 1px solid var(--line);
}

/* --- 2. Hierarchia: dana głośniejsza od podpisu.
   Było: label 13px/waga 800/pełna czerń, input 17px/waga 400 — podpis ważył
   więcej niż liczba, którą użytkownik wpisuje. Skala lewej kolumny wynosiła
   ×1,04 → ×1,31 (szum); prawa kolumna działa, bo ma ×1,58 → ×1,58.
   Nowa drabina: hint 14 → label 15 → wartość 26 = ×1,07 → ×1,73. */
.calcform .field label {
  font-size: 15px;
  font-weight: 600;
  text-transform: none;      /* 0,22em × 13px = 2,86px NA ZNAK; przy 45 znakach
                                to 129px z 350px wiersza — stąd łamanie na 2 linie */
  letter-spacing: 0.01em;
  color: var(--ink-dim);
  margin-bottom: 8px;
}

/* --- 3. Pole ma wyglądać na pole. Sama dolna kreska bywa czytana jako
   separator, nie kontrolka. Wypełnienie samo nie wystarczy: karta #fffdfa
   wobec tła sekcji #f3efe6 daje 1,13:1 — dlatego wypełnienie PLUS granica.
   --line-strong na karcie = 3,54:1, powyżej progu 3:1 dla kontrolek. */
.calcform .field input,
.calcform .field textarea {
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: 2px;        /* kanon marki, nie domyślne zaokrąglenie */
  padding: 12px 14px;
  min-height: 52px;
  font-size: 26px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.calcform .field input:focus-visible,
.calcform .field textarea:focus-visible {
  border-color: var(--ember);
  outline: 2px solid var(--ember);
  outline-offset: 1px;
}

/* --- 4. Podpowiedź czytelna: było 12,5px + --ink-dim + opacity 0.85, czyli
   trzy wytłumienia naraz. Zostawiamy jedno. */
.calcform .field small,
.calcform .field__hint {
  font-size: 14px;
  letter-spacing: 0.01em;
  opacity: 1;
  margin-top: 8px;
}

/* --- 5. Rytm stały zamiast zależnego od wysokości okna.
   Było clamp(18px, 2.6vh, 28px) — odstęp zmieniał się z wysokością ekranu
   i nie trafiał w wielokrotność 8. Proporcja wewnątrz grupy do międzygrupowej
   8 : 32 = 1:4, żeby oko rozdzielało pola. */
.calcform .field { margin-bottom: 32px; }
.calcform .field:last-child { margin-bottom: 0; }

/* --- 6. Odczyt bez gradientu na tekście.
   background-clip:text + color:transparent to sygnatura generatora; przy R11
   gradient-text został świadomie odrzucony, a tu wrócił bocznym wejściem. */
.calcres__hero {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--ember);
  overflow-wrap: normal;     /* nie rozcinaj liczby */
}

/* --- 7. Liczba nigdy nie łamie się w środku.
   „0,8" renderowało się jako „0," / „8" — dd miało overflow-wrap:anywhere,
   a dt obok white-space:nowrap zabierało wiersz. */
.calcres__row dd {
  overflow-wrap: normal;
  word-break: keep-all;
  white-space: nowrap;       /* NIE min-width:max-content — rozpychalo panel
                                ponad szerokosc siatki (375 zamiast 335px) */
  font-variant-numeric: tabular-nums;
}

/* Blok @media 480px usuniety: rozbijal wiersz na dwa poziomy, przez co
   wartosc wisiala pod etykieta przy prawej krawedzi. Byl potrzebny, dopoki
   liczba mogla sie lamac — teraz trzyma ja `white-space: nowrap` powyzej,
   wiec wiersz zostaje jednolinijkowy: podpis z lewej, dana z prawej. */
@media (max-width: 480px) {
  .calcres__row { gap: 12px; }
  .calcres__row dt { font-size: 12px; }
}

/* --- 8. Nagłówek sekcji przestaje być dwiema kolumnami na telefonie.
   .section-head to flex bez żadnej media query — na 390px H2 i akapit
   zostawały obok siebie, przez co nagłówek łamał się na trzy linie w 1/3
   szerokości. */
@media (max-width: 860px) {
  .section-head { display: block; }
  .section-head > * + * { margin-top: 12px; }
}

/* --- 9. Na telefonie odczyt towarzyszy wpisywaniu.
   Desktop ma .calcres position:sticky, telefon to gubił — a wynik leżał
   ~850px poniżej pierwszego pola, więc przeliczanie na żywo (cała wartość
   narzędzia) było niewidoczne. */
/* Panel wyniku ma ~627px wysokosci — przyklejony zaslonilby caly ekran
   telefonu, a postawiony nad formularzem odsunalby pola o tyle samo.
   Dlatego panel zostaje pod formularzem, a na gorze przykleja sie waski
   odczyt: wpisujesz i od razu widzisz, jak zmienia sie liczba. */
.calclive { display: none; }

@media (max-width: 980px) {
  /* bez min-width:0 dziecko flexa nie kurczy sie ponizej swojej tresci
     i wychodzi poza siatke */
  .calcgrid > * { min-width: 0; max-width: 100%; }

  .calclive {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 12;
    margin: 0 0 20px;
    padding: 12px 16px;
    background: var(--ink);
    color: var(--surface);
    border-radius: 2px;
  }
  .calclive__label {
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.75;
  }
  .calclive__val {
    font-size: 24px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
}

/* --- 10. Pływający „Kontakt" na stronach narzędziowych: sama ikona.
   Pomiar A/B (375px, przejazd całej sekcji kalkulatora): przesuwanie launchera
   w pionie NIE rozwiązuje kolizji — bottom:84px zasłaniał 12 elementów,
   bottom:14px zasłaniał 10, w tym w obu razach liczbę wyniku. Element o stałej
   pozycji zawsze coś przykryje przy przewijaniu, więc dźwignią jest POWIERZCHNIA,
   nie wysokość: 114×54 px, z czego 51 px to samo słowo „Kontakt".
   Etykieta zostaje w DOM i jest czytana przez technologie asystujące —
   ukrywamy ją wyłącznie wizualnie. Ikona ma 20 px, więc cel dotykowy
   (36 px + margines) pozostaje powyżej progu.
   Robione w arkuszu STRONY, nie w usłudze P3 — reguła `body.page-tool`
   (1,1,1) wygrywa z widget.css ładowanym później. */
@media (max-width: 720px) {
  body.page-tool #ogniwo-contact-toggle {
    min-width: 54px;      /* widget.css trzyma 128px — bez tego samo ukrycie
                             etykiety nic nie daje (mierzone: 114 -> 112px) */
    padding: 8px;
    gap: 0;
  }
  body.page-tool #ogniwo-contact-toggle > span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}