/* ============================================================================
   11e-kalkulator-porownanie-designow.css — okno „Porównanie Designów” nad oknem kosztów (v15, krok K8)
   ----------------------------------------------------------------------------
   Wzór wyglądu: scratchpad/pulpit/Kalkulator.html (okno porównania). Wybór 2–4 Designów, karty (cena, różnica względem
   odniesienia, koszt, zysk, marża, prowizja · rabat, minimum fabryki, zakres) i tabela pozycji z różnicami.
   Kod: okna/koszty-13-porownanie-designow.js. Telefon: 9-telefon/3b-kalkulator-ekrany.css (karty jedna pod drugą).
   ============================================================================ */
.modal.pcost-porownanie-modal { --okno-w: 1240px; }
.pcost-por-glowa { display: flex; align-items: center; gap: var(--s-3); }
.pcost-por-glowa h2 { margin: 0; font-size: var(--t-lg); font-weight: var(--w-bold); }
.pcost-por-glowa small { color: var(--text-muted); font-size: var(--t-sm); }
.pcost-por-glowa > .icon-button { margin-left: auto; }
.pcost-por { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--s-4); min-height: 0; overflow: auto; padding: var(--s-2) var(--s-5) var(--s-5); }
.pcost-por-wybor { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); color: var(--text-muted); font-size: var(--t-sm); font-weight: var(--w-bold); }
.pcost-por-wybor > label { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 36px; padding: 0 var(--s-3); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--text-muted); font-weight: var(--w-bold); cursor: pointer; }
.pcost-por-wybor > label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.pcost-por-wybor input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.pcost-por-karty { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: var(--s-3); }
.pcost-por-karta { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.pcost-por-karta.is-baza { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pcost-por-karta > h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; color: var(--text); font-size: var(--t-md); font-weight: var(--w-bold); }
.pcost-por-karta > h3 small { color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-medium); }
.pcost-por-tagi { display: inline-flex; gap: var(--s-1); margin-left: auto; }
.pcost-por-tag { padding: 2px var(--s-2); border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: var(--w-bold); }
.pcost-por-tag.is-baza { background: var(--accent-soft); color: var(--accent-strong); }
.pcost-por-tag.is-tanio { background: var(--ok-soft); color: var(--ok-strong); }
.pcost-por-tag.is-drogo { background: color-mix(in srgb, var(--text) 7%, var(--surface)); color: var(--text-muted); }
.pcost-por-cena { color: var(--accent-strong); font-size: var(--t-xl); font-weight: var(--w-heavy); font-variant-numeric: tabular-nums; }
.pcost-por-roznica { color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); }
.pcost-por-roznica.is-wiecej { color: var(--warn-strong); }
.pcost-por-roznica.is-mniej { color: var(--ok-strong); }
.pcost-por-minimum { align-self: flex-start; padding: 2px var(--s-2); border-radius: var(--r-pill); background: var(--danger-soft); color: var(--danger); font-size: var(--t-xs); font-weight: var(--w-bold); }
.pcost-por-karta dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-1) var(--s-3); margin: var(--s-1) 0 0; font-size: var(--t-sm); }
.pcost-por-karta dt { color: var(--text-muted); }
.pcost-por-karta dd { margin: 0; color: var(--text); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.pcost-por-karta dd.is-zysk { color: var(--zysk); }
.pcost-por-zakres { margin: 0; padding-top: var(--s-2); border-top: 1px solid var(--line); color: var(--text-muted); font-size: var(--t-xs); }
.pcost-por-zakres em { color: var(--text); font-style: normal; font-weight: var(--w-bold); }
.pcost-por-karta > .button { align-self: flex-start; }
.pcost-por-tabela-ramka { overflow: auto; border: 1px solid var(--line); border-radius: var(--r); }
.pcost-por-tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.pcost-por-tabela th, .pcost-por-tabela td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.pcost-por-tabela th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--surface); color: var(--text-muted); font-weight: var(--w-medium); text-align: left; }
.pcost-por-tabela thead th { position: sticky; top: 0; z-index: 2; background: var(--okno-tlo); color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); }
.pcost-por-tabela thead th:first-child { z-index: 3; text-align: left; }
.pcost-por-sekcja th { padding-top: var(--s-3); background: var(--surface); color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); text-align: left; }
.pcost-por-tabela tr.is-mocno > * { color: var(--text); font-weight: var(--w-heavy); }
.pcost-por-tabela td.is-inna { color: var(--text); font-weight: var(--w-bold); }
.pcost-por-tabela :is(th, td).is-baza { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.pcost-por-tabela td.is-brak { color: var(--text-muted); }
.pcost-por-d { display: block; color: var(--ok-strong); font-size: var(--t-xs); font-weight: var(--w-bold); }
.pcost-por-d.is-wiecej { color: var(--warn-strong); }
.pcost-por-notka { margin: 0; color: var(--text-muted); font-size: var(--t-xs); }
.pcost-konstrukcje-akcje { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pcost-konstrukcje-akcje .button, .pcost-st-design .button { gap: var(--s-2); }
.pcost-konstrukcje-akcje .button { padding: 0 var(--s-3); border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: var(--w-regular); }   /* wzór .k-akcje .btn: 13/400, promień 8 */
.pcost-konstrukcje-akcje .button .icon, .pcost-st-design .button .icon { width: 15px; height: 15px; }
@media (max-width: 980px) { .pcost-por-karty { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
:root:is([data-ui="tablet"], [data-ui="mobile"]) .pcost-por-karta > .button, :root:is([data-ui="tablet"], [data-ui="mobile"]) .pcost-konstrukcje-akcje .button { min-height: 44px; }