/* Kalkulator krokowy (strona główna, /konfigurator) — wariant B, tokeny z site.css / docs/DESIGN.md (Task 19). */

/* ---------- Pas górny: H1 1:1 (B2B Oracle® w <strong> jak czerwony akcent starej strony) ---------- */
.hero__title strong{color:var(--accent-on-dark);font-weight:inherit}
.hero__title sup,.hero__lead sup{font-size:.5em;line-height:0;vertical-align:.9em}
div.hero__lead p{margin:0}
.hero__lead a{color:var(--accent-on-dark);text-decoration-color:rgba(143,211,208,.5)}
@media (hover:hover) and (pointer:fine){.hero__lead a:hover{color:#fff;text-decoration-color:currentColor}}
/* kalkulator jest głównym zadaniem strony: mniejszy H1 (ten sam tekst), mniejszy wstęp */
.hero--calc .hero__title{max-width:30em;font-size:24px;line-height:1.2}
.hero--calc .hero__lead{max-width:46em;font-size:15px;line-height:1.55}
@media (min-width:900px){.hero--calc .hero__title{font-size:28px}}

/* ---------- Pasek postępu (w pasie górnym) ---------- */
.calc-progress{max-width:680px;margin-top:var(--s-5)}
.calc-progress__status{margin:0 0 6px;color:var(--text-on-dark);font-size:12px;font-weight:600;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.calc-progress__list{display:flex;gap:4px;margin:0;padding:0;list-style:none}
.calc-progress__item{flex:1 1 0;min-width:0}
.calc-progress__bar{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.16);transition:background-color var(--t-med) var(--ease)}
.calc-progress__item[data-state="done"] .calc-progress__bar{background:var(--success-on-dark)}
.calc-progress__item[data-state="current"] .calc-progress__bar{background:var(--accent-on-dark)}
.calc-progress__label{display:block;margin-top:6px;overflow:hidden;color:var(--muted-on-dark);font-size:11.5px;line-height:1.3;white-space:nowrap;text-overflow:ellipsis}
.calc-progress__item[data-state="current"] .calc-progress__label{color:#fff;font-weight:600}
@media (scripting:none){.calc-progress{display:none}}
@media (max-width:599px){.calc-progress__label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.calc-progress{margin-top:var(--s-4)}}

/* ---------- Pomocnicze ---------- */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
/* Warianty niewybrane: ukryte od pierwszej klatki, gdy działa JS (bez JS widać wszystkie) */
@media (scripting:enabled){[data-off]{display:none!important}}
/* Teksty zależne od rodzaju licencji (odznaki reguł, pytanie o ilość) — z JS i bez JS według zaznaczonego radia */
#calc:has(input[name=kind][value=nup]:checked) [data-kind-only=pl],
#calc:has(input[name=kind][value=pl]:checked) [data-kind-only=nup]{display:none}

/* ---------- Układ ---------- */
.calc__grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr);gap:var(--s-5);align-items:start}
.calc__side{position:sticky;top:var(--s-5)}
.calc__card{padding:var(--s-5);container-type:inline-size}
.calc__summary{margin:var(--s-4) 0 0;color:var(--muted-strong);font-size:13px;line-height:1.55}
.calc__summary p{margin:0 0 var(--s-2)}

/* ---------- Kroki ----------
   Bez JS: wszystkie kroki jeden pod drugim (linia między nimi), bez „Dalej”, „Wstecz”, „zmień”.
   Z JS (data-state z calc_flow(), dalej calculator.js): zrobione — jedna szara linia z ✓ i „zmień”; bieżący — w ramce;
   przyszłe — szare linie z numerem. */
.step{scroll-margin-top:var(--s-4)}
.step + .step{margin-top:var(--s-5);padding-top:var(--s-5);border-top:1px solid var(--line)}
.step__body{min-width:0;margin:0;padding:0;border:0}
.step__legend{display:block;width:100%;margin:0;padding:0}
.step__title{margin:0;color:var(--text);font-size:18px;font-weight:700;line-height:1.35;letter-spacing:-.01em;scroll-margin-top:var(--s-4)}
.step__title:focus{outline:none}
.step__title:focus-visible{outline:3px solid var(--accent-text);outline-offset:4px;border-radius:4px}
.step__no{color:var(--accent-text);font-variant-numeric:tabular-nums}
.step__lead{margin:4px 0 0;color:var(--muted);font-size:14px;line-height:1.5}
.step__done,.step__todo,.step__nav{display:none}
.step__body > .hint--text{margin-top:var(--s-3)}

@media (scripting:enabled){
  .step + .step{margin-top:0;padding-top:0;border-top:0}
  .step[data-skip]{display:none}
  .step[data-state="todo"] .step__body,.step[data-state="done"] .step__body{display:none}
  .step[data-state="current"]{margin:var(--s-2) 0;padding:var(--s-5);border:1.5px solid var(--accent);border-radius:var(--r-md);background:var(--surface)}
  .step[data-state="current"]:first-of-type{margin-top:0}
  .step[data-state="done"] .step__done{display:flex}
  .step[data-state="todo"] .step__todo{display:block}
  .step[data-state="current"] .step__nav{display:flex}
  .step--summary[data-state="current"]{border-color:var(--line-strong)}
  /* wejście nowego kroku: krótkie, ease-out; tylko po przejściu (data-enter), nie przy wczytaniu strony */
  .step[data-enter] .step__body{animation:step-in 220ms cubic-bezier(.23,1,.32,1) both}
}
@keyframes step-in{from{opacity:0;transform:translateY(6px)}}
@keyframes step-fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.step[data-enter] .step__body{animation-name:step-fade;animation-duration:150ms}}

.step__done{align-items:center;gap:10px;min-height:48px;margin:0 0 6px;padding:6px 6px 6px 12px;border-radius:10px;background:var(--surface-3);font-size:14px;line-height:1.4}
.step__check{display:inline-grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:var(--success)}
.step__check::before{content:"";width:9px;height:5px;margin-top:-2px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.step__sum{flex:1 1 auto;min-width:0;margin:0;color:var(--text)}
.step__sum-label{color:var(--muted)}
.step__sum strong{font-weight:600}
.step__change{flex:none;min-height:36px;margin-left:auto;padding:0 10px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--accent-text);font:600 13px/1 var(--font);cursor:pointer;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:background-color var(--t-fast) var(--ease),transform 100ms var(--ease)}
@media (hover:hover) and (pointer:fine){.step__change:hover{background:var(--accent-wash)}}
.step__change:active{transform:scale(.97)}
.step__change:focus-visible{outline:3px solid var(--accent-text);outline-offset:1px}
.step__todo{margin:0;padding:12px 12px;border-top:1px dashed var(--line);color:var(--muted);font-size:14px;line-height:1.4}
.step__todo .step__no{color:inherit}
.step[data-state="current"] + .step[data-state="todo"] .step__todo{border-top:0}

.step__nav{flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--s-3);margin-top:var(--s-5);scroll-margin-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
.step__error{display:flex;flex-basis:100%;gap:6px;margin:0;color:var(--error);font-size:13px;font-weight:500;line-height:1.5}
.step__error::before{content:"!";display:inline-grid;place-items:center;flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;background:var(--error);color:#fff;font-size:12px;font-weight:700;line-height:1}
.step__back{min-height:44px;margin-right:auto;padding:0 8px;border:0;border-radius:var(--r-sm);background:none;color:var(--muted-strong);font:500 14px/1 var(--font);cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}
@media (hover:hover) and (pointer:fine){.step__back:hover{color:var(--text);background:var(--surface-2)}}
.step__back:focus-visible{outline:3px solid var(--accent-text);outline-offset:1px}
.step__next{min-width:132px}

/* ---------- Karty wyboru (natywne radio w <label>) ---------- */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2);margin-top:var(--s-4)}
.rcard{position:relative;display:flex;align-items:flex-start;gap:12px;min-height:64px;padding:14px 16px;border:1.5px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer;
  -webkit-user-select:none;user-select:none;
  transition:border-color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease),transform 100ms var(--ease)}
.rcard input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;border-radius:10px;opacity:0;cursor:pointer}
.rcard__mark{flex:none;width:18px;height:18px;margin-top:2px;border:1.5px solid var(--line-strong);border-radius:50%;background:var(--surface);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}
.rcard__text{min-width:0}
.rcard__title{display:block;color:var(--text);font-size:15px;font-weight:600;line-height:1.35}
.rcard__sub{display:block;margin-top:2px;color:var(--muted);font-size:13px;line-height:1.45}
.rcard__badges{display:block;margin-top:8px}
.rcard__badge{display:inline-block;padding:2px 9px;border-radius:999px;background:var(--surface-2);color:var(--text-2);font-size:12px;font-weight:500;line-height:1.5}
.rcard:has(input:checked){border-color:var(--accent);background:var(--accent-wash)}
.rcard:has(input:checked) .rcard__mark{border-color:var(--accent-text);background:var(--accent-text);box-shadow:inset 0 0 0 3.5px var(--surface)}
.rcard:has(input:checked) .rcard__badge{background:#fff}
.rcard:has(input:focus-visible){outline:3px solid var(--accent-text);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.rcard:not(:has(input:checked)):not(:has(input:disabled)):hover{border-color:var(--muted)}}
.rcard:active{transform:scale(.985)}
/* karta niedostępna (R24: „1 rok” dla wersji bez licencji rocznej) — przerywana ramka i dopisek z powodem, bez przezroczystości (czytelny tekst) */
.rcard:has(input:disabled){border-style:dashed;background:var(--surface-3);cursor:not-allowed}
.rcard:has(input:disabled) input{cursor:not-allowed}
.rcard:has(input:disabled) .rcard__title,.rcard:has(input:disabled) .rcard__mark{color:var(--muted);border-color:var(--line)}
.rcard:has(input:disabled):active{transform:none}
.rcard__off{display:block;margin-top:4px;color:var(--text-2);font-weight:500}
@media (scripting:none){.step__lead--js{display:none}}
@container (max-width:460px){.cards--bases{grid-template-columns:minmax(0,1fr)}.rcard{padding:12px 14px}}

/* ---------- Przełącznik segmentowy (formularz: Zapytanie / Zamówienie, j.w. / inne) ---------- */
.seg{display:inline-flex;gap:3px;padding:3px;border-radius:10px;background:var(--surface-2);max-width:100%}
.seg__item{position:relative;display:flex;flex:1 1 auto}
.seg__item input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.seg__item span{display:flex;align-items:center;justify-content:center;width:100%;min-height:40px;padding:0 18px;border-radius:var(--r-sm);color:var(--text-2);font-size:14px;font-weight:600;line-height:1.2;text-align:center;white-space:nowrap;
  -webkit-user-select:none;user-select:none;transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),transform 100ms var(--ease)}
.seg__item:has(input:checked) span{background:var(--ink);color:#fff;box-shadow:0 1px 2px rgba(5,50,66,.25)}
.seg__item:has(input:focus-visible) span{outline:3px solid var(--accent-text);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.seg__item:not(:has(input:checked)):hover span{color:var(--text);background:rgba(255,255,255,.7)}}
.seg__item:active span{transform:scale(.98)}

/* ---------- Pola ---------- */
.field{min-width:0}
.field__label{display:block;margin:0 0 6px;color:var(--text-2);font-size:13px;font-weight:600;line-height:1.5}
.field__hint{font-weight:400}

.qty{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;min-height:44px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);overflow:hidden}
.qty:focus-within{border-color:var(--text-2)}
.qty input{width:100%;min-width:0;height:42px;padding:0 4px;border:0;background:transparent;color:var(--text);font:500 16px/1 var(--mono);font-variant-numeric:tabular-nums;text-align:center;
  -moz-appearance:textfield;appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty input:focus-visible{outline:3px solid var(--accent-text);outline-offset:-3px;border-radius:var(--r-sm)}
.qty input[aria-invalid="true"]{color:var(--error)}
.qty:has(input[aria-invalid="true"]){border-color:var(--error)}
.qty__btn{display:grid;place-items:center;width:36px;height:36px;margin:0 4px;padding:0;border:0;border-radius:6px;background:var(--surface-2);color:var(--text);font:600 18px/1 var(--font);cursor:pointer;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:background-color var(--t-fast) var(--ease),transform 100ms var(--ease)}
@media (hover:hover) and (pointer:fine){.qty__btn:not(:disabled):hover{background:var(--surface-2-hover)}}
.qty__btn:active:not(:disabled){transform:scale(.94)}
.qty__btn:disabled{opacity:.45;cursor:not-allowed}
/* krok „Ilość”: duże pole +/− */
.qty--big{grid-template-columns:60px minmax(0,1fr) 60px;max-width:340px;min-height:64px;margin-top:var(--s-4);border-radius:var(--r-md)}
.qty--big input{height:62px;font-size:26px;font-weight:500}
.qty--big .qty__btn{width:48px;height:48px;margin:0 6px;border-radius:var(--r-sm);font-size:22px}

.hint{margin:var(--s-2) 0 0;color:var(--muted);font-size:13px;line-height:1.5}
.hint:empty{display:none}
.hint--text p{margin:0}
.hint--lead{margin:var(--s-2) 0 0}
.hint--notice{padding:var(--s-2) var(--s-3);border-left:3px solid var(--accent);border-radius:0 var(--r-sm) var(--r-sm) 0;background:var(--accent-wash);color:var(--text-2)}
.hint--error{display:flex;gap:6px;color:var(--error);font-weight:500}
.hint--error::before{content:"!";display:inline-grid;place-items:center;flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;background:var(--error);color:#fff;font-size:12px;font-weight:700;line-height:1}

/* ---------- Objaśnienia 1:1 ze starego kalkulatora ---------- */
.explain{margin-top:var(--s-3);border-radius:var(--r-sm);background:var(--bg)}
.explain summary{display:flex;align-items:center;gap:var(--s-2);min-height:44px;padding:0 var(--s-3);border-radius:var(--r-sm);color:var(--accent-text);font-size:14px;font-weight:600;cursor:pointer;list-style:none;
  -webkit-user-select:none;user-select:none}
.explain summary::-webkit-details-marker{display:none}
.explain summary::before{content:"";flex:none;width:7px;height:7px;margin:0 4px 0 2px;border-right:2px solid var(--accent-text);border-bottom:2px solid var(--accent-text);transform:rotate(-45deg);transition:transform var(--t-fast) var(--ease)}
.explain[open] summary::before{transform:translateY(-2px) rotate(45deg)}
@media (hover:hover) and (pointer:fine){.explain summary:hover{color:var(--accent-deep)}}
.explain summary:focus-visible{outline:3px solid var(--accent-text);outline-offset:2px}
.explain__body{padding:0 var(--s-4) var(--s-4) 33px;color:var(--text-2);font-size:14px;line-height:1.6}
.explain__text + .explain__text{margin-top:var(--s-3)}
.explain__text p{margin:var(--s-2) 0 0;max-width:45.4em}
.explain__text > p:first-child{margin-top:0}
.explain__text strong{color:var(--text)}
.explain__text ul{margin:var(--s-2) 0 0;padding:0;list-style:none}
.explain__text a{color:var(--accent-text)}
.explain__label{color:var(--text);font-size:13px;font-weight:700}
.explain--base{margin-top:var(--s-4)}

.notes{margin:0;padding:var(--s-3) var(--s-4);border-left:3px solid var(--accent);border-radius:0 var(--r-sm) var(--r-sm) 0;background:var(--surface)}
.notes + .notes{margin-top:var(--s-3)}
.notes__for{display:none;margin:0 0 4px;color:var(--text);font-size:13px;font-weight:700}
@media (scripting:none){.notes__for{display:block}}
.notes__list{margin:0;padding:0;list-style:none}
.note{color:var(--text-2);font-size:13px;line-height:1.55}
.note + .note{margin-top:4px}

/* ---------- Opcje Enterprise Edition (lista checkboxów w grupach z katalogu) ---------- */
.options-off{margin:var(--s-2) 0 0}
.opt-group{margin-top:var(--s-4)}
.opt-group__title{margin:0 0 2px;color:var(--muted);font-size:12px;font-weight:700;line-height:1.5;letter-spacing:.06em;text-transform:uppercase}
.opt-row{position:relative;border-bottom:1px dashed var(--line)}
.opt{position:relative;display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:start;gap:2px 12px;min-height:48px;padding:12px 6px;border-radius:var(--r-sm);cursor:pointer;
  -webkit-user-select:none;user-select:none;transition:background-color var(--t-fast) var(--ease)}
.opt-row--info .opt{padding-right:44px}
.opt input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.opt__box{display:grid;place-items:center;width:18px;height:18px;margin-top:1px;border:1.5px solid var(--line-strong);border-radius:4px;background:var(--surface);
  transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.opt__box::after{content:"";width:9px;height:5px;margin-top:-2px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) scale(.6);opacity:0;
  transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.opt:has(input:checked) .opt__box{border-color:var(--accent-text);background:var(--accent-text)}
.opt:has(input:checked) .opt__box::after{opacity:1;transform:rotate(-45deg)}
.opt__name{color:var(--text);font-size:14px;font-weight:500;line-height:1.4}
.opt:has(input:checked) .opt__name{font-weight:600}
.opt__price{display:flex;flex-direction:column;align-items:flex-end;color:var(--muted);font-size:13px;line-height:1.4;text-align:right}
.opt__price .num{white-space:nowrap}
.opt__sup{font-size:12px}
.opt:has(input:focus-visible){outline:3px solid var(--accent-text);outline-offset:1px}
@media (hover:hover) and (pointer:fine){.opt:hover{background:var(--bg)}}
@media (scripting:none){.opt__price{display:none}}
@container (max-width:460px){.opt{grid-template-columns:20px minmax(0,1fr)}.opt__price{grid-column:2;align-items:flex-start;text-align:left}}
.group--options:disabled .opt-row{opacity:.45}
.group--options:disabled .opt input{cursor:not-allowed}

/* (i) poza <label> (przycisk w etykiecie przełączałby checkbox); dymek w elemencie z id (aria-describedby) */
.opt__info{position:absolute;top:12px;right:6px;z-index:2;display:inline-grid;place-items:center;width:26px;height:26px;padding:0;border:1px solid currentColor;border-radius:50%;background:var(--surface);color:var(--text-2);
  font:italic 700 12px/1 Georgia,serif;cursor:help;touch-action:manipulation}
.opt__tip{position:absolute;bottom:calc(100% - 4px);right:0;z-index:5;width:max-content;max-width:min(280px,80vw);padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);background:var(--ink);box-shadow:var(--shadow-panel);
  color:#fff;font-size:13px;line-height:1.5;pointer-events:none;visibility:hidden;opacity:0;transform:translateY(4px);transform-origin:100% 100%;
  transition:opacity 125ms var(--ease),transform 125ms var(--ease),visibility 0s linear 125ms}
.opt__info.is-open + .opt__tip,.opt__info:focus-visible + .opt__tip{visibility:visible;opacity:1;transform:none;transition-delay:0s}
@media (hover:hover) and (pointer:fine){.opt__info:hover + .opt__tip{visibility:visible;opacity:1;transform:none;transition-delay:150ms}}
@media (pointer:coarse){.opt__info{width:32px;height:32px;top:8px}}

/* ---------- Podsumowanie (tabela jak w starym kalkulatorze) ---------- */
.summary-table{margin-top:var(--s-4);overflow-x:auto;overscroll-behavior-x:contain}
.summary-table:empty{display:none}
.sum-table{width:100%;border-collapse:collapse;font-size:13px;line-height:1.4}
.sum-table th,.sum-table td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.sum-table th:first-child,.sum-table td:first-child{padding-left:10px}
.sum-table th:last-child,.sum-table td:last-child{padding-right:10px}
.sum-table thead th{background:var(--surface-2);color:var(--text);font-size:12px;font-weight:600;line-height:1.3;vertical-align:bottom}
.sum-table td.num{font-size:12.5px}
.sum-table thead th.num-col,.sum-table td.num{text-align:right}
.sum-table td.num{white-space:nowrap;font-variant-numeric:tabular-nums}
.sum-table tbody th{color:var(--text);font-weight:600}
.sum-table td{color:var(--text-2)}
.sum-table tfoot th,.sum-table tfoot td{padding-top:12px;border-bottom:0;color:var(--text);font-weight:700}
.sum-table tfoot th{text-align:right}
/* wąska kolumna kalkulatora (telefon, tablet): wiersz tabeli jako karta „etykieta — wartość” */
@container (max-width:520px){
  .sum-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .sum-table,.sum-table tbody,.sum-table tfoot,.sum-table tr,.sum-table th,.sum-table td{display:block}
  .sum-table tbody tr{margin-bottom:var(--s-3);padding:var(--s-3) var(--s-4);border:1px solid var(--line);border-radius:var(--r-sm)}
  .sum-table tbody th{padding:0 0 6px;border:0;font-size:14px}
  .sum-table td{display:flex;justify-content:space-between;gap:var(--s-3);padding:3px 0;border:0}
  .sum-table tr > :first-child,.sum-table tr > :last-child{padding-left:0;padding-right:0}
  .sum-table td::before{content:attr(data-label);color:var(--muted);font:500 13px/1.4 var(--font)}
  .sum-table td.num{text-align:right}
  .sum-table tfoot tr{padding:var(--s-3) var(--s-4);border-radius:var(--r-sm);background:var(--accent-wash)}
  .sum-table tfoot th{padding:0 0 4px;text-align:left}
  .sum-table tfoot td{padding:2px 0}
}
.summary__actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-5)}
@container (max-width:460px){.summary__actions{display:grid}.summary__actions .btn{width:100%}}

/* ---------- Panel ceny ---------- */
/* panel wyceny i pasek ceny: lokalne nadpisanie zmiennych pasa → wygląd bez zmian względem wariantu B */
.quote,.quote-bar{--ink:var(--quote-bg);--ink-3:var(--quote-ink-3);--text-on-dark:var(--quote-text);--muted-on-dark:var(--quote-muted);--accent-on-dark:var(--quote-accent)}
.quote{padding:var(--s-5);border-radius:var(--r-lg);background:var(--quote-bg);box-shadow:var(--quote-shadow);color:var(--quote-text)}
.quote :focus-visible{outline-color:var(--accent-on-dark)}
.quote__title{margin:0 0 var(--s-2);color:var(--muted-on-dark);font-size:12px;font-weight:700;line-height:1.5;letter-spacing:.12em;text-transform:uppercase}
.quote__lines{max-height:min(44vh,360px);margin:0 calc(-1 * var(--s-2));padding:0 var(--s-2);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--quote-ink-3) transparent}
.quote__line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--s-3);padding:var(--s-3) 0;border-bottom:1px dashed rgba(255,255,255,.1)}
.quote__name{color:#fff;font-size:14px;font-weight:600;line-height:1.35}
.quote__amount{color:#fff;font-size:14px;line-height:1.35;text-align:right;white-space:nowrap}
.quote__sub{grid-column:1/-1;display:flex;justify-content:space-between;gap:var(--s-3);color:var(--muted-on-dark);font-size:12.5px;line-height:1.5}
.quote__sub .num{white-space:nowrap}
.quote__empty{margin:0;padding:var(--s-3) 0;color:var(--muted-on-dark);font-size:14px;border-bottom:1px dashed rgba(255,255,255,.1)}
/* pierwsza klatka z JS (świeże wejście): zamiast wyceny domyślnej — zaproszenie do wyboru wersji; bez JS — wycena z serwera */
.quote__start{display:none}
@media (scripting:enabled){
  #calc[data-start] .quote__start{display:block}
  #calc[data-start] .quote__line,#calc[data-start] .quote__empty:not(.quote__start){display:none}
  #calc[data-start] .quote__net,#calc[data-start] .quote__gross{display:none}
  #calc[data-start] #quote-bar-net{visibility:hidden}
}
/* brak wyceny (z JS): sam komunikat zamiast „— zł netto” */
.quote.is-empty .quote__net,.quote.is-empty .quote__gross{display:none}
.quote__net{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--s-2);margin:var(--s-4) 0 2px;color:#fff;font-size:28px;line-height:1.15;letter-spacing:-.02em}
.quote__unit{color:var(--muted-on-dark);font-size:13px;font-weight:500;letter-spacing:0}
.quote__net .num{overflow-wrap:anywhere}
.quote__net.is-long{font-size:22px} /* ≥ 100 mln zł: mieści się w panelu także przy 320 px */
.quote__gross{margin:0;color:var(--muted-on-dark);font-size:13px;font-variant-numeric:tabular-nums}
.quote__actions{display:grid;gap:var(--s-2);margin-top:var(--s-5)}
.quote__cta-note{margin:2px 0 0;color:var(--muted-on-dark);font-size:12.5px;line-height:1.5;text-align:center}
@media (scripting:none){.quote__cta-note{display:none}}
.quote__consult{margin:var(--s-3) 0 0;font-size:13px;line-height:1.5;text-align:center}
.quote__consult a{color:var(--quote-accent)}
.btn--block{width:100%}
/* CTA przed kompletnym wyborem: nieaktywne (aria-disabled — fokus zostaje, klik prowadzi do brakującego kroku) */
.btn[aria-disabled="true"]{cursor:default;box-shadow:none}
.quote .btn--primary[aria-disabled="true"],.quote-bar .btn--primary[aria-disabled="true"]{background:#334155;color:#cbd5e1}
.quote .btn--secondary[aria-disabled="true"]{border-color:rgba(255,255,255,.14);color:var(--muted-on-dark)}
@media (hover:hover) and (pointer:fine){
  .quote .btn[aria-disabled="true"]:hover,.quote-bar .btn[aria-disabled="true"]:hover{transform:none}
  .quote .btn--primary[aria-disabled="true"]:hover,.quote-bar .btn--primary[aria-disabled="true"]:hover{background:#3b4a5f;color:#fff}
}
.quote__noscript{margin:var(--s-3) 0 0;color:var(--text-on-dark);font-size:13px}
.quote__note{margin:var(--s-4) 0 0;color:var(--muted-on-dark);font-size:13px;line-height:1.55}
.quote__note a{color:var(--accent-on-dark)}
.quote__note .num{color:var(--text-on-dark)}

/* ---------- Pasek ceny (telefon) ---------- */
.quote-bar{display:none}
.btn{touch-action:manipulation;-webkit-user-select:none;user-select:none}

/* ---------- Cennik (pełny, w HTML) ---------- */
.price-details{margin-top:var(--s-6);padding:0}
.price-details summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-1) var(--s-3);min-height:56px;padding:var(--s-4) var(--s-5);cursor:pointer;list-style:none;border-radius:var(--r-lg)}
.price-details summary::-webkit-details-marker{display:none}
.price-details summary::before{content:"";align-self:center;width:8px;height:8px;margin-right:4px;border-right:2px solid var(--accent-text);border-bottom:2px solid var(--accent-text);transform:rotate(-45deg);transition:transform var(--t-fast) var(--ease)}
.price-details[open] summary::before{transform:translateY(-2px) rotate(45deg)}
.price-details__title{color:var(--text);font-size:18px;font-weight:700}
.price-details__meta{color:var(--muted);font-size:13px}
.table-scroll{overflow-x:auto;padding:0 var(--s-5) var(--s-5);overscroll-behavior-x:contain}
.table-scroll:focus-visible{outline-offset:-3px}
.price-table{width:100%;min-width:680px;border-collapse:collapse;font-size:14px}
.price-table th,.price-table td{padding:10px var(--s-3);border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.price-table thead th{background:var(--surface-2);color:var(--text);font-size:13px;font-weight:600}
.price-table tbody th{color:var(--text);font-weight:500}
.price-table td{color:var(--text-2);text-align:right;white-space:nowrap}
.price-table thead th:not(:first-child){text-align:right}
.price-table__group th{padding-top:var(--s-4);color:var(--accent-text)!important;font-size:13px;font-weight:700!important}

/* ---------- Brak cennika ---------- */
.notice{max-width:760px;border-top:4px solid var(--accent)}
.notice p{margin:0;color:var(--text-2)}
.notice .notice__title{margin-bottom:var(--s-2);color:var(--text);font-size:18px;font-weight:700}

/* ---------- Tablet i telefon ---------- */
@media (max-width:899px){
  .calc__grid{grid-template-columns:minmax(0,1fr)}
  .calc__side{position:static}
  .quote-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
    padding:10px max(clamp(16px,4vw,32px),env(safe-area-inset-right,0px)) max(10px,env(safe-area-inset-bottom,0px)) max(clamp(16px,4vw,32px),env(safe-area-inset-left,0px));
    background:var(--quote-bg);border-top:1px solid rgba(255,255,255,.08);box-shadow:var(--quote-bar-shadow);color:#fff;
    transition:transform var(--t-med) var(--ease),opacity var(--t-med) var(--ease)}
  .quote-bar.is-away{transform:translateY(calc(100% + 24px));opacity:0;transition-duration:200ms}
  .quote-bar :focus-visible{outline-color:var(--accent-on-dark)}
  .quote-bar__sum{display:flex;flex-direction:column;min-width:0;min-height:44px;justify-content:center;color:#fff;text-decoration:none}
  .quote-bar__label{color:var(--muted-on-dark);font-size:12px;font-weight:600;line-height:1.3}
  .quote-bar__sum .num{font-size:clamp(18px,5.6vw,22px);line-height:1.25;letter-spacing:-.02em}
  .quote-bar.is-long .quote-bar__sum .num{font-size:15px}
  .quote-bar.is-xlong .quote-bar__sum .num{font-size:13px}
  /* kwoty nie ucinamy (break-ui, Task 17): mniejszy krój dla długich kwot, a w ostateczności zawinięcie */
  .quote-bar__sum .num{overflow-wrap:anywhere}
  .quote-bar .btn{flex:none;padding:10px 16px}
  .quote-bar__cta-short{display:none}
  body:has(.quote-bar){padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:359px){
  /* 320 px: „Poproś o ofertę” zabierało miejsce kwocie (ucięta już przy 183 130,70 zł) — krótka etykieta jak w DESIGN.md */
  .quote-bar__cta{display:none}
  .quote-bar__cta-short{display:inline}
  .quote-bar .btn{padding:10px 14px}
}
@media (max-width:899px) and (scripting:none){
  .quote-bar{display:none}
  body:has(.quote-bar){padding-bottom:0}
}
@media (scripting:none){[data-open-form]{display:none}}
@media (max-width:599px){
  .calc__card{padding:var(--s-4) var(--s-3)}
  @media (scripting:enabled){.step[data-state="current"]{padding:var(--s-4)}}
  .step__title{font-size:17px}
  .seg{display:flex;width:100%}
  .seg__item span{min-height:44px;padding:0 10px}
  .explain__body{padding-left:var(--s-4)}
  .quote{padding:var(--s-5) var(--s-4)}
  .hero__lead{font-size:16px}
  .hero--calc .hero__lead{font-size:14px}
  .price-details summary,.table-scroll{padding-left:var(--s-4);padding-right:var(--s-4)}
  .step__next{flex:1 1 auto}
}
@media (pointer:coarse){.step__change{min-height:44px}.rcard{min-height:64px}}
@media (prefers-reduced-motion:reduce){.quote-bar.is-away{transform:none}}

/* ---------- Formularz zapytania / zamówienia (#order-form) ---------- */
/* Z JS formularz czeka schowany na „Poproś o ofertę” (bez mignięcia przed startem form.js); bez JS — widoczny. */
@media (scripting:enabled){#order-form:not([data-has-errors]):not([data-ready]){display:none}}
.order-form{margin-top:var(--s-6);padding:var(--s-6);scroll-margin-top:var(--s-4)}
/* rozwinięcie po kliknięciu (tylko z JS: data-ready); animacja startuje przy każdym przejściu z [hidden] */
#order-form[data-ready]:not([data-has-errors]){animation:order-form-in var(--t-med) var(--ease) both}
@keyframes order-form-in{from{opacity:0;transform:translateY(8px)}}
.order-form__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3) var(--s-5)}
.order-form__title{margin:0;font-size:22px;line-height:1.3}
.order-form__lead{margin:var(--s-2) 0 0;color:var(--muted);font-size:14px;line-height:1.55}
.order-form__lead p{margin:0}
.order-form:has(input[name=action][value=zapytanie]:checked) [data-action-text=zamowienie],
.order-form:has(input[name=action][value=zamowienie]:checked) [data-action-text=zapytanie]{display:none}

.form-alert{display:flex;gap:var(--s-2);margin:var(--s-4) 0 0;padding:var(--s-3) var(--s-4);border-radius:var(--r-sm);
  background:var(--error-wash);box-shadow:inset 3px 0 0 var(--error);color:var(--error);font-size:14px;font-weight:500;line-height:1.5}
.form-alert::before,.field__error::before{content:"!";display:inline-grid;place-items:center;flex:none;width:18px;height:18px;margin-top:1px;
  border-radius:50%;background:var(--error);color:#fff;font-size:12px;font-weight:700;line-height:1}
.form-alert:focus-visible{outline-offset:3px}

/* sekcja: legenda nad polami (telefon) albo w lewej kolumnie (desktop) */
.form-section{min-width:0;margin:var(--s-5) 0 0;padding:var(--s-5) 0 0;border:0;border-top:1px solid var(--line)}
.form-section__title{float:left;width:100%;margin:0 0 var(--s-4);padding:0;color:var(--text);font-size:16px;font-weight:700;line-height:1.3}
.form-section__title + *{clear:both}
.form-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s-4)}
.form-grid--other{margin-top:var(--s-4)}
.order-form:has(input[name=wys][value=jw]:checked) [data-other-address]{display:none}
.field--full{grid-column:1/-1}
.field--wide{grid-column:span 4}
.field--half{grid-column:span 3}
.field--third{grid-column:span 2}

.input{display:block;width:100%;min-height:44px;margin:0;padding:10px 14px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text);font:400 16px/1.4 var(--font);scroll-margin-bottom:96px;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.input--area{min-height:120px;resize:vertical;line-height:1.55}
@media (hover:hover) and (pointer:fine){.input:hover{border-color:var(--text-2)}}
.input:focus-visible{border-color:var(--text-2);outline:3px solid var(--accent-text);outline-offset:2px}
.input[aria-invalid="true"]{border-color:var(--error);box-shadow:inset 0 0 0 1px var(--error)}
.field__error{display:flex;gap:6px;margin:6px 0 0;color:var(--error);font-size:13px;font-weight:500;line-height:1.5}
/* NIP + przycisk „GUS” (nip.js, Task 21): pole i przycisk w jednym wierszu, status pod spodem */
.nip-group{display:flex;gap:var(--s-2);align-items:stretch}
.nip-group .input{flex:1 1 auto;min-width:0}
.nip-btn{flex:none;min-width:64px;min-height:44px;padding:0 14px}
.nip-btn[aria-busy="true"]{cursor:progress;opacity:.7}
.nip-status{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.5}
.nip-status[data-tone="error"]{color:var(--error);font-weight:500}
.nip-status[data-tone="ok"]{color:var(--text-2)}

/* zgoda, weryfikacja i wysyłka — w kolumnie pól */
.order-form__end{margin-top:var(--s-5);padding-top:var(--s-5);border-top:1px solid var(--line)}
.consent-box{padding:var(--s-4);border-radius:var(--r-md);background:var(--bg)}
.consent-box--error{background:var(--error-wash);box-shadow:inset 3px 0 0 var(--error)}
.consent-box__label{display:grid;grid-template-columns:22px minmax(0,1fr);gap:var(--s-3);cursor:pointer}
.consent-box__label input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--ink);cursor:pointer}
.consent-box__text{color:var(--text-2);font-size:13px;line-height:1.6}
.consent-box__text strong{font-weight:500}
.consent-box__text > strong:first-child{color:var(--text);font-weight:700}
.consent-box .field__error{margin:var(--s-2) 0 0 34px}
.form-submit{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-4);margin-top:var(--s-5)}
.cf-turnstile{flex:0 1 320px;min-width:300px;min-height:65px}
.form-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-left:auto}
.order-form[aria-busy="true"] .btn{cursor:progress}
.form-note{margin:var(--s-4) 0 0;color:var(--muted);font-size:13px;line-height:1.55}
.form-submit + .form-note,noscript + .form-note{margin-top:var(--s-3)}

@media (min-width:900px){
  .form-section{display:grid;grid-template-columns:200px minmax(0,1fr);gap:0 var(--s-6);align-items:start}
  .form-section__title{margin:0;padding-top:2px} /* float zostaje: legenda pływająca jest zwykłym elementem siatki */
  .form-section__title + *{clear:none}
  .order-form__end{padding-left:calc(200px + var(--s-6))}
}
@media (max-width:599px){
  .order-form{margin-top:var(--s-5);padding:var(--s-5) var(--s-4)}
  .order-form__head .seg{width:100%}
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
  .field--wide,.field--half{grid-column:1/-1}
  .field--third{grid-column:span 1}
  .field--third:has(.nip-group){grid-column:1/-1} /* NIP z przyciskiem GUS — cały wiersz, inaczej numer się nie mieści */
  .consent-box{padding:var(--s-3)}
  .cf-turnstile{flex:1 1 100%;min-width:0}
  .form-actions{display:grid;width:100%;margin-left:0}
  .form-actions .btn{width:100%}
}
/* otwarty formularz przy niedokończonym wyborze w kalkulatorze (po „zmień”) — wysyłka zablokowana */
.form-note--calc{margin:0 0 var(--s-3);color:var(--accent-deep);font-weight:500}

/* ---------- Konsultacja (/konsultacja, Task 21) — pola i zgoda jak w #order-form, legendy nad polami ---------- */
.consult-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5);align-items:start}
@media (min-width:1000px){.consult-layout{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}.consult-aside{position:sticky;top:var(--s-5)}}
.consult-form{margin-top:0}
.consult-form .form-section{display:block}
.consult-form .form-section__title{float:none;margin:0 0 var(--s-4);padding:0}
.consult-form .order-form__end{padding-left:0}
.consult-choice{min-width:0;margin:0;padding:0;border:0}
.consult-choice .field__label{padding:0}
.seg--wrap{display:flex;flex-wrap:wrap;width:fit-content}
.input--select{padding-right:40px;appearance:none;-webkit-appearance:none;cursor:pointer;
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23312d2a' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center/12px 8px}
.consult-aside{display:grid;gap:var(--s-4)}
.consult-info__title{margin:0 0 var(--s-4);font-size:18px;line-height:1.35}
.consult-info__list{display:grid;gap:var(--s-3);margin:0}
.consult-info__list dt{color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.consult-info__list dd{margin:2px 0 0;color:var(--text-2);font-size:15px;line-height:1.5}
.consult-info__contact{margin:0;font-size:16px;line-height:1.8}
@media (max-width:599px){.seg--wrap{width:100%}.seg--wrap .seg__item{flex:1 1 40%}}

/* ---------- R25: kontekst ilości (serwery, licencje Processor) i własna ilość opcji ---------- */
.qty-ctx{max-width:420px;margin:var(--s-4) 0}
.qty-ctx .hint{margin-top:6px}
.input--num{max-width:160px;font-family:var(--mono);font-variant-numeric:tabular-nums}
.opt-qty{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);margin:0 0 var(--s-3) 30px;font-size:13px;color:var(--text-2)}
.opt-qty .input{max-width:120px;min-height:40px;padding:6px 10px}
.quote__ctx{margin:var(--s-3) 0 0;color:var(--muted-on-dark);font-size:13px;line-height:1.5}
.sum-ctx{margin:var(--s-3) 0 0;color:var(--muted);font-size:13px}