/* ============================================================================
   11o-kalkulator-zgodnosc-ze-wzorem.css — okno „Kalkulator kosztów”: poprawki zgodności z wzorem (kalk_czesc.txt, 19.10.2026 20:54)
   ----------------------------------------------------------------------------
   Po porównaniu wzór ↔ program (tools/porownaj-wzor.mjs, kafelki 2×) program różnił się od wzoru tylko w kilku miejscach:
   1. nagłówek grupy „Design” / „Konsultacje” — wzór (.k-dgl) ma szary pasek z dużym tytułem, program miał mały szary napis;
   2. przycisk „Usuń profil usług” — wzór (.btn.czerw) ma różową ramkę, program tylko tło;
   3. tekst paska uwag („— Transport bez km …”) — wzór ma pismo półgrube, program średnie.
   Wszystko na tokenach programu (wzór → program: --pow-3→--surface-3, --linia→--line, --bl-ramka→--danger-ramka, --r-s→--r-sm).
   Zero wartości na sztywno poza przesunięciem liter tytułu (-.01em jak w nagłówkach okien). Zero !important.
   Reguły telefonu: css/9-telefon/3h-kalkulator-cele-dotyku.css.
   ============================================================================ */

/* === 1. Nagłówek grupy Design / Konsultacje (wzór .k-dgl) === */
.pcost-dg-etykieta { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-4) 0 var(--s-2); padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-3); color: var(--text); font-family: var(--font-tytul); font-size: var(--t-lg); font-weight: var(--w-strong); letter-spacing: -.01em; }

/* === 2. Przycisk „Usuń profil usług”: ramka w kolorze tonu (wzór .btn.czerw) === */
.pcost-uprof .button[data-btn-tone="red"] { border-color: var(--danger-ramka); }

/* === 3. Tekst paska uwag: pismo półgrube jak cały przycisk uwag (wzór .k-pasek .uw2 = 600) === */
.pcost-uwagi-tekst { font-weight: var(--w-bold); }