/* ============================================================================
   11j-kalkulator-automat-kosztow.css — okno „Kalkulator kosztów”: AUTOMAT KOSZTÓW (wzór kalk_czesc.txt 18.10.2026)
   ----------------------------------------------------------------------------
   Baner zwolnienia dodatków (.pcost-zwb: niewymagane | czeka | zwolnione), ostrzeżenia automatu (.pcost-ow / .pcost-o), przebieg trasy
   mieszanej (.pcost-tras / .pcost-tc), źródło km (.pcost-src: auto | ręcznie), „↻ automat” (.pcost-lnk2), region stawki km (.pcost-seg2).
   Kod: okna/koszty-20-automat.js. Mapa tokenów jak w 11i. Progi: @media 1180/640 = @container app. Zero !important.
   ============================================================================ */

.pcost-automat { display: flex; flex-direction: column; gap: var(--s-3); margin: 0 0 var(--s-3); }
.pcost-automat:empty, .pcost-automat:not(:has(*:not(:empty))) { margin: 0; }
.pcost-automat > [data-pcost-baner-miejsce]:empty { display: none; }

/* === 1. BANER ZWOLNIENIA DODATKÓW === */
.pcost-zwb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); font-size: var(--t-sm); line-height: 1.4; }
.pcost-zwb > .icon { flex: none; width: 20px; height: 20px; }
.pcost-zwb > div { display: flex; flex: 1 1 260px; flex-direction: column; gap: 2px; min-width: 0; }
.pcost-zwb b { font-size: var(--t-base); font-weight: var(--w-strong); }
.pcost-zwb small { color: var(--text-muted); font-size: var(--t-sm); line-height: 1.4; }
.pcost-zwb.is-uw { border-color: color-mix(in srgb, var(--warn-strong) 40%, transparent); background: var(--warn-soft); }
.pcost-zwb.is-uw > .icon, .pcost-zwb.is-uw > div > b:first-child { color: var(--warn-strong); }
.pcost-zwb.is-ok { border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: var(--ok-soft); }
.pcost-zwb.is-ok > .icon, .pcost-zwb.is-ok > div > b:first-child { color: var(--ok); }
.pcost-zwb small b.bl { display: inline; color: var(--danger); font-size: inherit; }
.pcost-zwb .button { flex: none; }
.pcost-zwb .button[aria-disabled="true"] { opacity: .6; }

/* === 2. OSTRZEŻENIA AUTOMATU (sekcja z listą) === */
.pcost-sk { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.pcost-sk > header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.pcost-sk > header > div:first-child { flex: 1; min-width: 160px; }
.pcost-sk h5 { margin: 0; color: var(--text); font-size: var(--t-base); font-weight: var(--w-strong); }
.pcost-sk header small { display: block; color: var(--text-faint); font-size: var(--t-xs); }
.pcost-ow { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.pcost-o { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: start; gap: var(--s-1) var(--s-3); padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.pcost-o > .icon { width: 18px; height: 18px; margin-top: 1px; }
.pcost-o > span:not(.icon) { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--t-sm); line-height: 1.4; }
.pcost-o > span:not(.icon) b { font-size: var(--t-base); }
.pcost-o small { color: var(--text-faint); font-size: var(--t-xs); }
.pcost-o.bl { border-color: var(--danger); background: var(--danger-soft); }
.pcost-o.bl > .icon, .pcost-o.bl > span:not(.icon) b { color: var(--danger); }
.pcost-o.ok { border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); background: var(--ok-soft); }
.pcost-o.ok > .icon, .pcost-o.ok > span:not(.icon) b { color: var(--ok); }
.pcost-ch { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 36px; font-size: var(--t-sm); font-weight: var(--w-bold); white-space: nowrap; cursor: pointer; }
.pcost-ch input { width: 18px; height: 18px; accent-color: var(--accent); }

/* === 3. PRZEBIEG TRASY MIESZANEJ === */
.pcost-tras { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-3); }
.pcost-tras > i { color: var(--text-faint); font-style: normal; }
.pcost-tc { display: inline-flex; align-items: center; height: 28px; padding: 0 var(--s-3); border-radius: var(--r-pill); background: var(--surface-3); color: var(--text-muted); font-size: var(--t-sm); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; }
.pcost-tc.morze, .pcost-tc.d2d { background: var(--accent-soft); color: var(--accent); }
.pcost-tm { margin-left: auto; color: var(--warn-strong); font-size: var(--t-xs); font-weight: var(--w-strong); }
.pcost-tras-miejsce:empty { display: none; }

/* === 4. ŹRÓDŁO KM, „↻ AUTOMAT”, REGION STAWKI KM === */
.pcost-src { padding: 0 6px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text-faint); font-size: var(--t-xs); font-style: normal; font-weight: var(--w-strong); }
.pcost-src.auto { color: var(--ok); }
.pcost-src.reczne { color: var(--warn-strong); }
.pcost-lnk2 { display: inline; min-height: 0; margin-left: var(--s-2); padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: var(--t-xs); font-weight: var(--w-strong); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.pcost-powrot-info { display: block; margin-top: var(--s-1); color: var(--text-faint); font-size: var(--t-xs); }
@media (max-width: 1180px) {
  .pcost-zwb .button, .pcost-ch, .pcost-lnk2 { min-height: 44px; }
}
@media (max-width: 640px) {
  .pcost-o { grid-template-columns: 20px minmax(0, 1fr); }
  .pcost-o .pcost-ch { grid-column: 1 / -1; }
  .pcost-zwb .button { width: 100%; }
}