/* ============================================================================
   11d-kalkulator-wynik-arkusz.css — okno „Kalkulator kosztów”: WYNIK jako arkusz, PASEK CENY i STOPKA (v15, krok K7c)
   ----------------------------------------------------------------------------
   Wzór wyglądu: scratchpad/pulpit/Kalkulator.html. Wynik wysuwa się z dołu nad treścią okna (pasek ceny zostaje widoczny),
   trzy kolumny: Konstrukcje | Usługi projektu | Podsumowanie + VAT. Pasek ceny: uwagi | Koszt + Zysk + Prowizja = Cena dla
   klienta | „Wynik”. Stopka: zakres, profil marż (+ kropka „zmieniony”), Design w kalkulacji, Zapisz kalkulację, ⋯, Generuj
   prezentację, Zapisz. Kod: okna/koszty-11-wynik-i-stopka.js. Dawne reguły (.project-costs-results, .project-cost-price-bar,
   .project-cost-footer z 11-kalkulator*.css) przykrywamy w zasięgu .pcost-v15 / .pcost-pasek / .pcost-stopka, bez !important.
   Telefon — 9-telefon/3b-kalkulator-ekrany.css (K7d).
   ============================================================================ */

/* === 1. ARKUSZ WYNIK ====================================================== */
.pcost-v15 > .project-costs-results.pcost-wynik { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; display: flex; flex-direction: column; gap: 0; max-height: calc(100% - var(--s-5)); overflow: hidden; padding: 0; border: 0; border-top: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--surface); box-shadow: 0 -18px 40px -18px color-mix(in srgb, var(--zaslona-kolor) 45%, transparent); line-height: 1.4; transform: translateY(102%); visibility: hidden; transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .28s; }
.pcost-v15[data-wynik="1"] > .project-costs-results.pcost-wynik { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
.pcost-wynik-zaslona { position: absolute; inset: 0; z-index: 6; background: color-mix(in srgb, var(--zaslona-kolor) 28%, transparent); opacity: 0; pointer-events: none; transition: opacity .2s; }
.pcost-v15[data-wynik="1"] > .pcost-wynik-zaslona { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .pcost-v15 > .project-costs-results.pcost-wynik, .pcost-wynik-zaslona { transition: none; } }
.pcost-wynik-glowa { position: relative; display: flex; flex: none; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-3) var(--s-2) var(--s-5); border-bottom: 1px solid var(--line-soft); }
.pcost-wynik-glowa::before { content: ""; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--line-strong); }
.pcost-wynik-glowa > h3 { margin: 0; color: var(--text); font-family: var(--font-tytul); font-size: var(--t-lg); font-weight: var(--w-bold); line-height: 1.4; }
.pcost-wynik-glowa > small { color: var(--text-faint); font-size: var(--t-xs); }
.pcost-wynik-glowa > .icon-button { margin-left: auto; border-color: transparent; border-radius: var(--r-sm); background: transparent; }
.pcost-wynik-glowa > .icon-button:hover { background: var(--surface-2); }
.pcost-wynik > .project-cost-summary-panel.pcost-wynik-kolumny { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: var(--s-3); min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-3) var(--s-4) var(--s-4); border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#modal-root .pcost-wynik > .pcost-wynik-kolumny { border-radius: 0; background: transparent; }   /* ZK7: ogólna reguła paneli w oknach (19-modale-tresc, z #modal-root) dawała tu promień 16 i tło */
.pcost-wynik-kolumny > .pcost-wynik-kolumna { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; grid-column: auto; grid-row: auto; }
/* v15 b19 (ZK1, wzór .kw-sek / .kw-sh / .kw-kh): bloki Konstrukcje / Usługi projektu / Pozycje dodatkowe / Podsumowanie — ramka, szary nagłówek
   44 px z liczbą pozycji, kwotą i strzałką, wiersze z kreską; blok Konstrukcje z brakami cen ma czerwoną ramkę.
   ZK7 (pomiar wzoru): tytuł karty i kwota w nagłówku 13/400; wiersz ma dwie linie (nazwa z wielokropkiem + podpis w jednej linii),
   kreska stoi nad każdym wierszem, także pierwszym; w wierszu z brakami czerwony napis stoi w miejscu narzutu, narzut za nim. */
.pcost-wynik .pcost-wynik-blok { display: block; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.pcost-wynik .pcost-wynik-blok.is-braki { border-color: var(--brak-bom-ramka); }
.pcost-wynik .pcost-wynik-blok > summary.project-cost-result-section-title { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; gap: var(--s-2); min-height: 44px; margin: 0; padding: 0 var(--s-3); background: var(--surface-2); color: var(--text); font-size: var(--t-sm); font-weight: var(--w-regular); }
.pcost-wynik .pcost-wynik-blok > summary > b { margin: 0; font-size: var(--t-sm); font-weight: var(--w-regular); }
.pcost-wynik .pcost-wynik-blok > summary > b.is-cena { color: var(--accent-strong); }
.pcost-wynik .pcost-wynik-blok > summary.project-cost-result-section-title::after { width: 16px; height: 16px; margin: 0; background-color: var(--text-faint); transform: rotate(-90deg); }
.pcost-wynik details.pcost-wynik-blok[open] > summary.project-cost-result-section-title::after { transform: none; }
.pcost-wynik-licznik { margin-left: var(--s-2); color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-bold); }
.pcost-wynik-licznik.is-braki { color: var(--brak-bom); }
.pcost-wynik .pcost-wynik-blok > .project-cost-result-card { margin: 0; border-top: 1px solid var(--line-soft); }
.pcost-wynik .project-cost-result-card > summary.project-cost-expand-head { grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 2px var(--s-2); min-height: 44px; padding: var(--s-2) var(--s-3); }
.pcost-wynik .project-cost-result-card > summary > span.project-cost-expand-name { display: block; overflow: hidden; color: var(--text); font-size: var(--t-sm); font-weight: var(--w-bold); line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.pcost-wynik .project-cost-result-card > summary > strong { font-size: var(--t-sm); font-weight: var(--w-strong); line-height: 1.4; }
.pcost-wynik .project-cost-tree-chevron::before { width: 14px; height: 14px; color: var(--text-faint); }
.pcost-wynik .project-cost-expand-pct { min-width: 0; overflow: hidden; color: var(--text-faint); font-size: var(--t-xs); line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.pcost-wynik .project-cost-expand-pct > :is(.pcost-bez-ceny-notka, .project-cost-bez-zestawienia) { display: inline; color: var(--brak-bom); font-size: inherit; font-weight: var(--w-bold); }
.pcost-wynik-kropka { display: inline-block; width: 9px; height: 9px; margin-right: var(--s-2); border-radius: 3px; background: var(--kc); }
.pcost-wynik .project-cost-result-card[data-kategoria] > summary > strong { color: color-mix(in srgb, var(--kc) 72%, var(--text)); }
.pcost-wynik .money.money-bom-error { color: var(--brak-bom); }
.pcost-wynik .project-cost-result-detail { margin: 0 var(--s-3) var(--s-2) var(--s-6); padding: var(--s-2) 0 0; border-top: 1px dashed var(--line); }
.pcost-wynik .project-cost-result-detail > div { padding: 2px 0; }
.pcost-wynik .project-cost-result-detail :is(span, strong) { font-size: var(--t-sm); }
.pcost-wynik .project-cost-result-detail strong { font-weight: var(--w-bold); }
.pcost-wynik .pcost-wynik-blok > .project-cost-result-subtotal { margin: 0; padding: var(--s-2) var(--s-3); border-top: 1px solid var(--line); }
.pcost-wynik .pcost-wynik-blok > .project-cost-result-subtotal > :is(span, strong) { color: var(--text); font-size: var(--t-sm); font-weight: var(--w-strong); }
.pcost-wynik .pcost-wynik-blok > .project-cost-result-empty { margin: var(--s-2) var(--s-3); }
.pcost-wynik-bez-ceny { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-2); padding: var(--s-2) var(--s-3); border: 1px solid var(--brak-bom-ramka); border-radius: var(--r); background: var(--brak-bom-soft); color: var(--brak-bom); font-size: var(--t-sm); }
.pcost-wynik-bez-ceny > b { font-weight: var(--w-strong); }
.pcost-wynik .pcost-wynik-bez-ceny > small { grid-column: 1 / -1; color: inherit; font-size: var(--t-xs); opacity: .9; }
/* Podsumowanie — lista kwot, wyróżniona „Cena dla klienta”, wskaźniki, Historia ceny / Rozliczenie projektu. */
.pcost-wynik .pcost-wynik-podsumowanie { padding-bottom: var(--s-2); }
.pcost-wynik-podsumowanie > summary + .pcost-wp-wiersz { margin-top: var(--s-2); }
.pcost-wynik-podsumowanie > hr { margin: var(--s-2) var(--s-3); border: 0; border-top: 1px solid var(--line-soft); }
.pcost-wp-wiersz { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding: 3px var(--s-3); font-size: var(--t-sm); }
.pcost-wp-wiersz > span { min-width: 0; color: var(--text-muted); }
.pcost-wp-wiersz > span > small { margin-left: var(--s-1); color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-regular); }
.pcost-wp-wiersz > b { color: var(--text); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pcost-wp-wiersz.is-mocno > span, .pcost-wp-wiersz.is-mocno > b { color: var(--text); font-weight: var(--w-strong); }
.pcost-wp-wiersz.is-mocno > span { display: flex; align-items: baseline; white-space: nowrap; }
.pcost-wp-wiersz.is-mocno > span > span { flex: none; }
.pcost-wp-wiersz.is-mocno > span > small { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pcost-wynik .is-zysk { color: var(--zysk); }
.pcost-wynik .pcost-wp-wiersz .is-zero { color: var(--text-faint); }   /* wzór: zero (rabat „suma z konstrukcji”) przygaszone */
.pcost-wp-cena { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); margin: var(--s-2) var(--s-2) var(--s-1); padding: var(--s-3); border-radius: var(--r); background: var(--accent-soft); }
.pcost-wp-cena > span { color: var(--text); font-size: var(--t-base); font-weight: var(--w-strong); }
.pcost-wp-cena > b { color: var(--accent-strong); font-family: var(--font-tytul); font-size: var(--t-lg); font-weight: var(--w-bold); letter-spacing: -.01em; white-space: nowrap; }
.pcost-wp-wskazniki { display: flex; gap: var(--s-2); padding: var(--s-2) var(--s-2) 0; }
.pcost-wp-wskazniki > span { display: flex; flex: 1; justify-content: space-between; gap: var(--s-2); padding: var(--s-2); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-faint); font-size: var(--t-xs); }
.pcost-wp-wskazniki b { color: var(--text); font-weight: var(--w-strong); }
.pcost-wynik-podsumowanie > .analizy-ceny-przyciski { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-2) var(--s-2) 0; }
.pcost-wynik .analizy-ceny-przyciski > .button, .project-cost-client-price > .analizy-ceny-przyciski > .button { border-color: var(--line-strong); background: var(--surface); font-size: var(--t-sm); font-weight: var(--w-regular); }
.project-cost-client-price > .analizy-ceny-przyciski > .button { padding: 0 var(--s-3); border-radius: var(--r-sm); }   /* wzór .k-akcje .btn */
/* VAT (wzór .k-vat): przełącznik, „VAT lokalny (N%)”, stawka i kwota w jednym wierszu w ramce; pod nim „Razem z VAT” z kwotą po prawej
   (pola VAT zostają w formularzu — projectCostInvoiceTotal). Budżet klienta i minimum fabryki stoją niżej jak dotąd. */
.pcost-wynik .project-cost-invoice-total { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; padding: 0; border: 0; background: transparent; }
.pcost-wynik .project-cost-summary-vat { display: flex; align-items: center; justify-content: flex-start; gap: var(--s-2); padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r); color: var(--text-muted); font-size: var(--t-sm); }
.pcost-wynik .project-cost-summary-vat > .project-cost-vat-switch > :is(strong, em), .pcost-wynik .project-cost-summary-vat > .project-cost-vat-rate > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pcost-wynik .project-cost-summary-vat > .vat-line { display: contents; }
.pcost-wynik .project-cost-summary-vat > .vat-line > span { display: -webkit-box; order: 1; flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--text-muted); font-size: var(--t-sm); font-weight: var(--w-regular); line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }   /* ZK7: najwyżej dwie linie — wiersz VAT trzyma wysokość wzoru także w wąskiej kolumnie */
.pcost-wynik .project-cost-summary-vat > .project-cost-vat-rate { order: 2; flex: none; color: var(--text-muted); }
.modal .pcost-wynik .project-cost-summary-vat > .project-cost-vat-rate > input:not([type="checkbox"]):not([type="radio"]) { width: 46px; height: var(--h-control); min-height: 0; padding: 0 var(--s-2); border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: var(--w-bold); }
.pcost-wynik .project-cost-summary-vat > .vat-line > strong { order: 3; flex: none; color: var(--text-muted); font-size: var(--t-sm); font-weight: var(--w-strong); line-height: 1.4; }
.pcost-wynik .project-cost-total-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 var(--s-2); padding: var(--s-1) var(--s-1) 0; }
.pcost-wynik .project-cost-total-result > span { overflow: hidden; color: var(--text-faint); font-size: var(--t-sm); font-weight: var(--w-regular); text-overflow: ellipsis; white-space: nowrap; }
.pcost-wynik .project-cost-total-result > strong { font-family: var(--font-tytul); font-size: var(--t-lg); font-weight: var(--w-bold); letter-spacing: -.01em; line-height: 1.4; text-align: right; }
.pcost-wynik .project-cost-total-result > small { display: block; grid-column: 1 / -1; color: var(--text-faint); font-size: var(--t-xs); }
.pcost-wynik .project-cost-cena-zamrozona-info { margin: 0; }
/* „Pozycje bez ceny” stoją w kolumnie Konstrukcje (jak we wzorze) — linia pod „Razem” byłaby powtórzeniem. */
.pcost-wynik .project-cost-invoice-total > [data-pozycje-bez-ceny] { display: none; }

/* === 2. PASEK CENY ======================================================== */
.modal.project-costs-modal > .project-cost-price-bar.pcost-pasek { position: relative; z-index: 8; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: var(--s-4); min-height: 58px; padding: var(--s-2) var(--s-3) var(--s-2) var(--s-4); border-top: 1px solid var(--line); background: var(--surface); }
.pcost-pasek-rozpycha { flex: 1 1 auto; min-width: 0; }
.pcost-uwagi { display: inline-flex; flex: 0 1 auto; align-items: center; gap: var(--s-2); min-width: 0; max-width: 48%; height: 34px; padding: 0 var(--s-3) 0 var(--s-2); border: 0; border-radius: var(--r-sm); background: var(--brak-bom-soft); color: var(--brak-bom); font: inherit; font-size: var(--t-sm); font-weight: var(--w-bold); white-space: nowrap; cursor: pointer; }
.pcost-uwagi > .icon { flex: none; width: 15px; height: 15px; }
.pcost-uwagi-tekst { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: var(--w-medium); }
.pcost-uwagi:focus-visible, .pcost-wynik-przycisk:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pcost-rownanie { display: flex; flex: none; align-items: flex-end; gap: var(--s-3); }
.pcost-rk { display: flex; flex-direction: column; align-items: flex-end; }
.pcost-rk > small { color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-bold); white-space: nowrap; }
.pcost-rk > b { color: var(--text); font-size: var(--t-md); font-weight: var(--w-heavy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pcost-rk > em { color: var(--text-faint); font-size: var(--t-xs); font-style: normal; font-weight: var(--w-bold); white-space: nowrap; }
.pcost-rk.is-zysk > b .is-zysk { color: var(--zysk); }
/* v15 b19 (ZN4, wzór .k-rown .cen): „Cena dla klienta” i „bez VAT / z VAT …” w JEDNEJ linii nad kwotą (było: „bez VAT” trzecią linią pod kwotą —
   pasek miał 84 zamiast 65 px); kwota tytułowym krojem 22/600. */
.pcost-rk.is-cena { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--s-1); }
.pcost-rk.is-cena > small { justify-self: end; }
.pcost-rk.is-cena > b { grid-column: 1 / -1; grid-row: 2; justify-self: end; color: var(--accent-strong); font-family: var(--font-tytul); font-size: var(--t-xl); font-weight: var(--w-bold); }
.pcost-rownanie > .pcost-op { padding-bottom: 2px; color: var(--text-muted); font-size: var(--t-md); font-weight: var(--w-bold); }
.pcost-wynik-przycisk { display: inline-flex; flex: none; align-items: center; gap: var(--s-2); height: 42px; padding: 0 var(--s-3) 0 var(--s-4); border: 1px solid currentColor; border-radius: var(--r); background: transparent; font: inherit; font-size: var(--t-sm); font-weight: var(--w-regular); white-space: nowrap; cursor: pointer; }
.pcost-wynik-przycisk.is-ok { border-color: var(--ok); background: var(--ok-soft); color: var(--ok-strong); }
.pcost-wynik-przycisk.is-blad { border-color: var(--brak-bom); background: var(--brak-bom-soft); color: var(--brak-bom); }
.pcost-wynik-przycisk > i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pcost-wynik-przycisk > .icon { width: 16px; height: 16px; transform: rotate(180deg); transition: transform var(--szybko) ease; }
.pcost-wynik-przycisk[aria-expanded="true"] > .icon { transform: none; }
.pcost-wynik-przycisk.is-ok[aria-expanded="true"] { background: var(--ok); color: var(--on-accent); }
.pcost-wynik-przycisk.is-blad[aria-expanded="true"] { background: var(--brak-bom); color: var(--on-accent); }

/* === 3. STOPKA ============================================================= */
.modal.project-costs-modal > .project-cost-footer.pcost-stopka { flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: var(--s-2); min-height: 52px; padding: var(--s-2) var(--s-3); overflow: visible; background: var(--surface-2); }   /* ZK7: tło jak wzór .k-st (jasny i ciemny) */
/* ZK1: licznik „Konstrukcje N/M” — we wzorze stopka go nie pokazuje (.k-st .gr2.zak); ta sama liczba stoi na kaflu i w nagłówku panelu Konstrukcje. */
.pcost-st-zakres { display: none; }
.pcost-st-grupa { display: flex; flex: 0 1 auto; align-items: center; gap: var(--s-2); min-width: 0; padding-right: var(--s-2); }   /* 24.10: została jedna grupa („Wersja”) — pionowa kreska po niej oddzielała usuniętą grupę kalkulacji A/B/C */
.pcost-st-etykieta { flex: none; color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-bold); white-space: nowrap; }
.pcost-stopka .pcost-st-grupa :is(select, .combo) { flex: 0 1 170px; min-width: 120px; max-width: 220px; }   /* wzór .k-st select: 170 px */
.pcost-stopka .pcost-st-design :is(select, .combo) { flex-basis: 176px; }   /* ZK7: wzór — lista „Design w kalkulacji” do 176 px */
.modal.project-costs-modal .pcost-stopka .pcost-st-grupa input.combo-input { padding: 0 var(--s-5) 0 var(--s-2); }
/* v15 b19 (ZN4, wzór .k-st): przyciski stopki 13 px, promień 8, odstęp 12 px; w grupach (profil, Design) 600, pozostałe 400; listy 13/600. */
.pcost-stopka .button { padding: 0 var(--s-3); border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: var(--w-regular); white-space: nowrap; }
.pcost-stopka .pcost-st-grupa .button { font-weight: var(--w-bold); }
/* wzór: przyciski stopki białe z ramką — także „Zapisz profil”, „Zapisz kalkulację”, kosz profilu i „Generuj prezentację” (ton z napisu ich nie barwi). */
:is(.modal, .pcost-wynik) > footer.pcost-stopka > :is(.pcost-st-grupa, .project-cost-footer-group) > :is(.button, summary):not(.primary):not(.is-swieci) { border-color: var(--line-strong); background: var(--surface); color: var(--text); }
:is(.modal, .pcost-wynik) > footer.pcost-stopka > :is(.pcost-st-grupa, .project-cost-footer-group) > :is(.button, summary):not(.primary):not(.is-swieci):hover { background: var(--surface-2); }
/* ZK7 (pomiar wzoru, .k-st .gr2): „Zapisz profil”, kosz, „Zapisz kalkulację” i „Porównaj” w stopce OKNA mają napis szary jak etykiety grup
   (styl stały, nie stan „wyłączony”); w arkuszu Wynik na telefonie (wzór .k-tel-akcje) napis zostaje ciemny. */
.modal > footer.pcost-stopka > .pcost-st-grupa > .button:not(.primary):not(.is-swieci) { color: var(--text-faint); }
.pcost-stopka .button.pcost-ikonka { padding: 0; }
.pcost-stopka .button .icon { width: 16px; height: 16px; }
/* Ikona „porównaj” ze wzoru (dwie kolumny z poprzeczkami) — tylko to okno. */
.icon-pcost-porownaj { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4v16M16 4v16M4 8h4M16 12h4M4 16h4'/%3E%3C/svg%3E"); }
.modal.project-costs-modal .pcost-stopka :is(select, input.combo-input) { font-size: var(--t-sm); font-weight: var(--w-bold); }
.pcost-st-rozpycha { flex: 1 1 auto; min-width: var(--s-2); }
.button.pcost-ikonka { display: inline-grid; place-items: center; width: var(--h-control); padding: 0; }
.button.pcost-ikonka .icon { width: 16px; height: 16px; }
.button.pcost-ikonka:disabled { opacity: .45; }
.pcost-zmieniony { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.pcost-zmieniony[hidden] { display: none; }
.pcost-stopka .button.is-swieci { position: relative; border-color: var(--accent); color: var(--accent-strong); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
@container okno-kosztow (width < 1380px) { .pcost-st-etykieta { display: none; } }   /* wąskie okno komputera (skala 100 %): bez etykiet grup */
.pcost-st-prezentacja, .pcost-st-zapisz { flex: none; }
.modal > .project-cost-footer.pcost-stopka > .project-cost-footer-group.pcost-st-prezentacja { margin-left: 0; }
@media (max-width: 1180px) {
  .pcost-st-etykieta, .pcost-stopka .pcost-st-zbedne, .pcost-st-grupa:empty { display: none; }
  .modal.project-costs-modal > .project-cost-footer.pcost-stopka { flex-wrap: wrap; row-gap: var(--s-2); }   /* wzór ≤ 1180: stopka zawija się całymi grupami */
  .pcost-rk.is-koszt, .pcost-rk.is-prowizja, .pcost-rownanie > .pcost-op { display: none; }
  .pcost-uwagi-tekst { display: none; }
  /* Wąski arkusz: długa nazwa konstrukcji w 2 liniach („Baby Area / Design A” i „… / Design B” nie mogą wyglądać tak samo); krótka — jak we wzorze, jedna linia. */
  .pcost-wynik .project-cost-result-card > summary > span.project-cost-expand-name { display: -webkit-box; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .pcost-wynik .project-cost-expand-pct { display: -webkit-box; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }   /* „narzut · marża” nie znika za wielokropkiem (na dotyku nie ma dymka) */
  .pcost-pasek .pcost-uwagi > :not(.icon):not(.pcost-liczba) { display: none; }   /* wzór do 1180 px: sama ikona i liczba uwag */
  /* ZK1 (wzór ≤ 1180 px): arkusz Wynik ciaśniej i na całą wysokość okna; bez dopisku o wadze i dniach pod „Razem”. */
  .pcost-v15 > .project-costs-results.pcost-wynik { max-height: 100%; border-radius: var(--r) var(--r) 0 0; }
  .pcost-wynik > .project-cost-summary-panel.pcost-wynik-kolumny { gap: var(--s-2); padding: var(--s-2) var(--s-3) var(--s-3); }
  .pcost-wp-cena { margin: var(--s-1) var(--s-2) 2px; padding: var(--s-2) var(--s-3); }
  .pcost-wynik .project-cost-total-result > small { display: none; }
  .pcost-wp-wiersz .pcost-wp-dlugi { display: none; }   /* ZK7: wąski arkusz — „Cena netto przed prowizją” jak we wzorze (pełny napis w dymku) */
  .pcost-wynik .project-cost-result-card > summary.project-cost-expand-head { padding: var(--s-1) var(--s-3) var(--s-1) var(--s-2); }
  .pcost-wynik-przycisk { height: 46px; }
}

/* === 4. DOTYK: cele co najmniej 44 px ====================================== */
:root:is([data-ui="tablet"], [data-ui="mobile"]) .pcost-wynik-przycisk, :root:is([data-ui="tablet"], [data-ui="mobile"]) .pcost-uwagi { min-height: 44px; }
:root:is([data-ui="tablet"], [data-ui="mobile"]) .pcost-stopka :is(.button, .combo-input) { min-height: 44px; }
:root:is([data-ui="tablet"], [data-ui="mobile"]) .button.pcost-ikonka { width: 44px; }
:root:is([data-ui="tablet"], [data-ui="mobile"]) .pcost-wynik-glowa > .icon-button { width: 44px; height: 44px; }