/* wyglad.css — warstwa wyglądu w stylu strony kierownik.ai (07.10.2026). Ładowana na końcu <body>.
   Zasady: tylko wygląd (zero zmian w tekstach, danych, kolejności). Wygrywa z <style> w head i z #pl-css/#td-css/#ruch-app
   przy tej samej specyficzności, bo stoi później w dokumencie. Stylów inline nie ruszamy; zmiany idą przez tokeny i klasy.
   Fonty bez zmian: Oswald (nagłówki WERSALIKAMI, duże liczby), Manrope (tekst), JetBrains Mono 500/600 (etykiety, plakietki).
   Animacje: NIE tutaj (rola „ruch”, _src/ruch-app.src.js). Spis:
   1 tokeny · 2 baza · 3 nagłówek ekranu · 4 etykiety · 5 karty · 6 liczby · 7 plakietki i chipy · 8 listy i wiersze
   9 przyciski · 10 pola i formularze · 11 sekcje zwijane i kafle · 12 nawigacja (dół + bok) · 13 logowanie i PIN
   14 toast · 15 dialogi · 16 arkusze .pop · 17 drobne komponenty · 18 ciemny motyw · EKRANY (rola ekrany) */

/* ── 1. tokeny ─────────────────────────────────────────────────────────── */
:root{
  --night:#0A0A0B;            /* noc strony: nawigacja, logowanie, toast */
  --night2:#141416;           /* klawisze i karty na nocy */
  --night-fg:#A9A9A3;         /* przygaszony tekst na nocy */
  --night-ink:#EFEFEA;        /* tekst na nocy */
  --night-line:rgba(255,255,255,.09);
  --blok:#111111;             /* czarny blok z żółtą liczbą (rola ekrany) */
  --blok-fg:#EFEFEA;
  --blok-mute:#A9A9A3;
  --blok-num:var(--yellow);
  --brand-bg:#0A0A0B;
  --r-card:16px;              /* karty, kafle, dialogi */
  --r-btn:12px;               /* przyciski */
  --r-badge:6px;              /* plakietki */
  --r-field:10px;             /* pola */
  --eyebrow:600 11px/1.3 var(--mono);
  /* kontrast AA (poprawki r1): złoty i zielony jako tekst — było #9A6700 / #15803D (4,2–4,4:1 na papierze i plakietkach) */
  --gold:#875A00;--green:#12723A;--money:#12723A;
}

/* ── 2. baza ───────────────────────────────────────────────────────────── */
body{background:var(--bg)}
.sub{color:var(--ink2);font-size:14px;line-height:1.5}
.m{color:var(--ink2)}

/* ── 3. nagłówek ekranu: head() = .brand + h1.h + .sub; Dziś = .dash-head ── */
.brand{font:600 10.5px/1 var(--mono);letter-spacing:.16em;color:var(--night-ink);background:var(--brand-bg);border:0;box-shadow:none;padding:6px 10px 6px 11px;border-radius:var(--r-pill)}
.brand .pill{font:600 11px/1 var(--sans);text-transform:none;letter-spacing:.01em;padding:3px 8px;margin-left:8px;border:0;border-radius:var(--r-pill);background:rgba(255,255,255,.14);color:var(--night-ink)}
h1.h{font:600 40px/.95 var(--serif);text-transform:uppercase;letter-spacing:.005em;margin:14px 0 0;color:var(--ink);hyphens:auto}
@media(max-width:360px){h1.h{font-size:34px}}
/* żółta belka 44×6 pod tytułem; transform-origin pod „przeciąganie” scaleX z modułu ruchu */
h1.h::after{content:"";display:block;width:44px;height:6px;background:var(--yellow);margin:14px 0 12px;transform-origin:0 50%}
h1.h+.sub{font-size:15px;line-height:1.5;color:var(--ink2)}
.dash-head{margin-bottom:2px}
.kw-hero h1.h::after{margin-left:auto;margin-right:auto}
@media(min-width:900px){h1.h{font-size:56px;margin-top:16px}h1.h::after{margin:18px 0 14px}}

/* ── 4. etykiety sekcji („eyebrow”): mono WERSALIKI + żółta kreska 18×2 (.14em zamiast .16em: mono jest szersze, przy .16em zawijały się nagłówki kart na 375 px) ── */
.card h2,.grp{font:var(--eyebrow);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.card h2::before,.grp::before{content:"";display:inline-block;width:18px;height:2px;background:var(--yellow);vertical-align:middle;margin:-2px 10px 0 0}
.card h2{margin:0 0 12px}
.card .row>h2:not(:first-child)::before{display:none} /* np. kalendarz: miesiąc między strzałkami — bez kreski, zostaje na środku */
.grp{margin:26px 0 8px}
.fin-h h2{font:600 12px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);gap:10px}
.fin-h h2::before{width:18px;height:2px;border-radius:0}
.lbl,th,.dzien-l,.pl-day,.kpi .l,.pl-kpi .l{font:var(--eyebrow);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.kpi .l,.pl-kpi .l{font-size:11px;letter-spacing:.04em} /* wąskie kafle: mono szersze niż Manrope */
@media(max-width:520px){:root .pl-kpis .pl-kpi .l{min-height:2.4em}} /* 1 i 2 linie etykiety: liczby w rzędzie na jednej wysokości */
.dzien-l{margin:16px 0 4px}
.pl-day{margin:16px 0 4px}
.pl-day.dzis{color:var(--gold)}
.pl-day.dzis::after{font:600 10px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;border-radius:var(--r-badge);padding:3px 6px}

/* ── 5. karty: biel, promień 16, cień sh-1, status = lewy pasek 4 px ── */
.card{border-radius:var(--r-card);border-color:var(--line2);box-shadow:var(--sh-1)}
.card.amber,.card.green,.card.red,.card.blue{border-color:var(--line2)}
.card.amber{box-shadow:inset 4px 0 0 var(--yellow),var(--sh-1)}
.card.green{box-shadow:inset 4px 0 0 var(--green),var(--sh-1)}
.card.red{box-shadow:inset 4px 0 0 var(--rose),var(--sh-1)}
.card.blue{box-shadow:inset 4px 0 0 var(--sky),var(--sh-1)}
.zk-card{border-radius:var(--r-card);border-color:var(--line2)}
.pl-week{border-radius:var(--r-card)}
/* .hero (todayCard): już czarny — tylko płaskie tło nocy, bez poświaty, neutralny szary */
.hero{background:var(--blok);border-color:var(--blok);border-radius:var(--r-card);--ink2:var(--blok-mute);--gold:var(--yellow)}
.hero::after{display:none}

/* ── 6. liczby: Oswald 600, cyfry tabelaryczne ── */
.num{font:600 32px/1.02 var(--serif);letter-spacing:-.005em;font-variant-numeric:tabular-nums}
.big{font:600 48px/1 var(--serif);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.kpi .v,.pl-kpi .v{font-family:var(--serif);font-weight:600;letter-spacing:-.005em}
.kpi .v{font-size:26px;line-height:1.05}
.kpi{background:var(--paper);border-color:var(--line2);border-radius:var(--r-lg);padding:14px}
.pl-kpi{border-radius:14px}
.meter i{background:var(--yellow)} /* było: gradient na sztywno */

/* ── 7. plakietki: mono 11 px WERSALIKI .08em, promień 6 ── */
.pill,.pl-late,.pl-st,.td-p{font:600 11px/1.1 var(--mono);letter-spacing:.08em;text-transform:uppercase;border-radius:var(--r-badge)}
.pill{padding:4px 7px}
.pl-late{padding:3px 6px}
.td-p{padding:4px 9px}
.pill.mono{letter-spacing:.08em}

/* ── 8. listy i wiersze: oddech, min. 56 px; czerwony pasek 4 px przy pilnych (plakietka .red / .pl-late) ── */
.li{min-height:56px;padding:12px 0}
.item{padding:14px 0}
.pl-row{min-height:56px}
.pl-frow{padding:12px 0;min-height:56px}
.krow3{padding:10px 0}
.dec>.li{border-top:0}
.card>h2+.li,.card>.row.sp:first-child+.li{border-top:0}
:is(.li,.item):has(.pill.red):not(:has(.li,.item)),.pl-frow:has(.pl-late){position:relative;padding-left:14px}
:is(.li,.item):has(.pill.red):not(:has(.li,.item))::before,.pl-frow:has(.pl-late)::before{content:"";position:absolute;z-index:1;left:0;top:12px;bottom:12px;width:4px;border-radius:2px;background:var(--rose);pointer-events:none}

/* ── 9. przyciski: czarne na papierze, żółte na nocy; promień 12; min. 44 px ── */
.btn{border-radius:var(--r-btn);min-height:44px;box-shadow:0 1px 2px rgba(17,17,17,.14)}
.btn.sm{border-radius:10px}
.btn.xs{border-radius:9px;font-size:13.5px}
.btn.icon{border-radius:10px}
.btn.round{border-radius:50%}
.btn.ghost,.btn.red{box-shadow:var(--sh-1)}
.btn.nav{box-shadow:none;border-radius:10px}
.btn:disabled{box-shadow:none}
.hero .btn:not(.ghost):not(.red):not(.nav){background:var(--yellow);border-color:var(--yellow);color:#111}
/* cele dotyku min. 44 px — tylko telefon/tablet (pointer:coarse); desktop zostaje zwarty.
   Linki tekstowe: pole dotyku powiększone paddingiem z ujemnym marginesem (układ bez zmian). */
@media(pointer:coarse){
  .btn.xs,.btn.sm,:root .pl-seg button,:root .pl-ok,.kwb,:root .pl-chip,:root .pl-doc{min-height:44px}
  :root .pl-ok,.btn.xs.icon,.zk-dni .btn.xs,.btn.sm,:root .pl-doc{min-width:44px}
  input:not([type=checkbox],[type=radio],[type=range],[type=hidden],[type=file]),select{min-height:44px}
  .linkbtn,a[href^="tel:"]{display:inline-block;padding-block:13px;margin-block:-13px}
  details:not(.pl-week)>summary{min-height:44px;box-sizing:border-box}
  details:not(.pl-week,.wk-more)>summary{padding-block:11px}
}

/* ── 10. pola i formularze ── */
input,select,textarea{border-radius:var(--r-field)}
input[type=checkbox],input[type=radio]{border-radius:revert}
.field label,label.f,.dlg-f label{font:600 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.dlg-f label{margin-bottom:6px}

/* ── 11. sekcje zwijane i kafle (.fin, .fin.kafel) ── */
.fin.kafel>.fin-h{border-radius:var(--r-card);border-color:var(--line2)}
.fin.kafel>.fin-h .kaf-i{border-radius:var(--r-lg);background:var(--paper2);color:var(--ink);border:1px solid var(--line2)}
.fin.kafel:not(.folded)>.fin-h .kaf-i{background:var(--yellow);border-color:var(--yellow);color:#111}
.fin.kafel>.fin-h .kaf-t b{font:600 20px/1.05 var(--serif);text-transform:uppercase;letter-spacing:.01em}
.fin.kafel>.fin-h .kaf-t span{margin-top:4px}
.fin.kafel:not(.folded)>.fin-h{border-color:var(--line-strong)}
@media(hover:hover){.fin.kafel>.fin-h:hover{border-color:var(--line-strong)}.fin.folded .fin-h:hover h2{color:var(--ink2)}}

/* ── 12. nawigacja: dół na telefonie (noc + żółta pigułka), bok od 900 px ── */
nav.tabs{background:var(--night);border-top:1px solid var(--night-line);box-shadow:none}
nav.tabs button{color:var(--night-fg);border-radius:14px}
nav.tabs button.on,nav.tabs button.on .ic{color:#111}
nav.tabs button:focus-visible{outline-color:var(--yellow)}
.tabs .ruch-pill{border-radius:14px}
@media(hover:hover){
  nav.tabs button:hover{background:rgba(255,255,255,.07);color:var(--night-ink)}
  nav.tabs button.on:hover{background:var(--yellow);color:#111}
  nav.tabs.ruch-pigulka button.on:hover{background:transparent}
}
@media(min-width:900px){
  #tabs{background:var(--night);border-right:1px solid var(--night-line)}
  #tabs button{color:var(--night-fg);border-radius:var(--r-btn)}
  #tabs button:hover{background:rgba(255,255,255,.07);color:var(--night-ink)}
  /* naprawa konfliktu (mapa, ryzyko 3): #tabs button.on (1-1-1) wygrywał z .tabs.ruch-pigulka button.on (0-3-1)
     → biały tekst i żółta ikona na żółtej pigułce. Teraz: żółte tło + czarny tekst; z pigułką ruch-app tło przezroczyste. */
  #tabs button.on,#tabs button.on:hover{background:var(--yellow);color:#111;box-shadow:none}
  #tabs.ruch-pigulka button.on,#tabs.ruch-pigulka button.on:hover{background:transparent}
  #tabs button.on .ic{color:#111}
  .navbrand{font:600 11.5px/1 var(--mono);letter-spacing:.18em;color:var(--night-ink)}
}

/* ── 13. logowanie i PIN: jedyny duży ekran nocy (jak hero strony) ──
   @supports: bez :has() (stary iOS) zostaje jasny ekran — tokeny nocy nie mogą wtedy trafić na jasne tło. */
@supports selector(body:has(.login)){
  body:has(.login){background-color:var(--night);background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:32px 32px;background-position:center top}
  .login{--bg:var(--night);--paper:var(--night2);--paper2:#1C1C1F;--hover:#1C1C1F;--ink:var(--night-ink);--ink2:var(--night-fg);--ph:#76766F;--line:rgba(255,255,255,.14);--line2:var(--night-line);--line-strong:rgba(255,255,255,.28);--btn:var(--yellow);--btn-hover:#F5B800;--btn-fg:#111111;--accent2:rgba(255,196,0,.28);--rose:#FF7B72;--gold:var(--yellow);--sh-1:none;--sh-2:none;color:var(--ink)}
  .login .brand{background:transparent;border:1px solid rgba(255,255,255,.18)}
  .login h1.h{color:var(--night-ink);font-size:44px}
  .login h1.h::after{margin-left:auto;margin-right:auto}
  .login .sub b{color:var(--night-ink)}
  .login .card{background:var(--night2);border-color:var(--night-line);box-shadow:inset 4px 0 0 var(--yellow)}
  .login input{background:var(--night);border-color:rgba(255,255,255,.18)}
  .login .btn{color:#111}
  .login .linkbtn{color:var(--yellow)}
  .login .dots i{border-color:var(--night-fg);opacity:.7}
  .login .dots i.on{background:var(--yellow);border-color:var(--yellow);opacity:1}
  .login .pad button{background:var(--night2);border-color:var(--night-line);color:var(--night-ink);border-radius:14px;font-weight:500}
  .login .pad button.x{color:var(--night-fg);font:600 13px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
  .login .pad button:active{background:var(--yellow);border-color:var(--yellow);color:#111}
  @media(hover:hover){.login .pad button:hover{border-color:rgba(255,255,255,.28)}}
  .login :focus-visible{outline-color:var(--yellow)}
}
.pinbox{border-radius:var(--r-card)}

/* ── 14. toast: noc z żółtym paskiem z lewej ── */
.toast{background:var(--night);color:var(--night-ink);border:1px solid var(--night-line);border-radius:var(--r-lg);padding:12px 16px 12px 18px;box-shadow:inset 4px 0 0 var(--yellow),var(--sh-3)}
.toast.err{background:var(--rose);border-color:transparent;color:#fff;box-shadow:inset 4px 0 0 rgba(0,0,0,.25),var(--sh-3)}

/* ── 15. dialogi (.dlg): promień 16, tytuł Oswald WERSALIKI ── */
.dlg{background:rgba(10,10,11,.5)}
.dlg-card{border-radius:var(--r-card);padding:20px 20px 18px;border:1px solid var(--line2)}
.dlg-card h2{font:600 24px/1 var(--serif);text-transform:uppercase;letter-spacing:.005em;margin:0 0 8px}
.dlg-card h2::after{content:"";display:block;width:32px;height:4px;background:var(--yellow);margin-top:10px}
.dlg-f input,.dlg-f select,.dlg-f textarea{border-radius:var(--r-field);min-height:44px}
.dlg-b{margin-top:18px}

/* ── 16. arkusze pełnoekranowe (.pop) ── */
.pop .pop-h h2{font-family:var(--serif);font-weight:600;text-transform:uppercase;letter-spacing:.005em}
.pop .lbl{font:600 13px/1.35 var(--mono);letter-spacing:.08em;color:var(--ink)} /* pytanie kroku: wyraźne */
.pop .pop-h .lbl{font-size:11px;letter-spacing:.12em;color:var(--ink2)}

/* ── 17. drobne komponenty ── */
.fslot{border-radius:var(--r-lg)}
.wyp{border-radius:var(--r-lg)}
.wyp .s{font-size:12px}
.kal .d{border-radius:var(--r-md)}
.pl-tabs{border-radius:14px}
.pl-tabs button{border-radius:10px}
.pl-seg{border-radius:var(--r-md)}
.kwrow.on{border-radius:var(--r-lg)}
.empty,.empty2{color:var(--ink2)}

/* ── 18. ciemny motyw: noc #000, karty #18181A (paper), czarne bloki #000 z żółtym ── */
:root[data-theme="dark"]{--night:#000000;--night2:#141416;--night-line:rgba(255,255,255,.1);--blok:#000000;--brand-bg:#222224}
:root[data-theme="dark"] .hero{border-color:var(--night-line)}
:root[data-theme="dark"] .btn{box-shadow:none}
:root[data-theme="dark"] .fin.kafel:not(.folded)>.fin-h .kaf-i{color:#111}
:root[data-theme="dark"] .pl-seg button.on.tak{color:#111} /* biały na jasnozielonym #4CC38A miał 2,2:1 */

/* === EKRANY (rola ekrany) === */
/* Max JEDEN czarny blok z żółtą liczbą na ekran (poza .hero): Dziś = Kasa, Plan = pierwszy KPI (każda zakładka),
   Budowa = Metry tygodnia, Finanse = Przegląd „Na koncie”, Moja kasa (i osoba u szefa) = „Do wypłaty”.
   Ekipa, Biuro, Pomysły, Moje konto: bez czarnego bloku. Kolory w środku = lokalne tokeny (wartości z ciemnego motywu),
   dzięki temu style inline z var(--green)/var(--gold) same się przestawiają. Hak w JS: .dec[data-st] (Dziś, decRow). */

/* ── E1. czarny blok: tokeny i powierzchnia ── */
.dash>.card.wide[data-go="kasa"],#root>.pl-kpis>.pl-kpi:first-child,#fin-przeglad>.pl-kpis>.pl-kpi:first-child,#fin-metry .card:has(.num),.card.static:has(>.big){
  --ink:var(--blok-fg);--ink2:var(--blok-mute);--paper:#1C1C1F;--paper2:#222224;--hover:#2A2A2C;
  --line:rgba(255,255,255,.16);--line2:rgba(255,255,255,.1);--line-strong:rgba(255,255,255,.3);
  --green:#4CC38A;--green2:#12301F;--green-line:#1F4D3C;--money:#4CC38A;--rose:#FF7B72;--rose2:#3B1B1B;--red-line:#4A2424;
  --gold:var(--yellow);--gold2:#33290A;--amber-line:#5A4A14;--sky:#B4BFD2;--sky2:#1E2430;--blue-line:#2F3A50;
  --btn:var(--yellow);--btn-hover:#F5B800;--btn-fg:#111111;--sh-1:none;
  background:var(--blok);border-color:var(--blok);color:var(--blok-fg);box-shadow:var(--sh-2)}
:root[data-theme="dark"] :is(.dash>.card.wide[data-go="kasa"],#root>.pl-kpis>.pl-kpi:first-child,#fin-przeglad>.pl-kpis>.pl-kpi:first-child,#fin-metry .card:has(.num),.card.static:has(>.big)){border-color:var(--night-line)}
/* żółta liczba */
.dash>.card.wide[data-go="kasa"] .lbl+div .money{color:var(--blok-num);font-size:40px;letter-spacing:-.005em}
.dash>.card.wide[data-go="kasa"] .kpi .v,:is(#root,#fin-przeglad)>.pl-kpis>.pl-kpi:first-child .v,#fin-metry .card .num{color:var(--blok-num)}
.dash>.card.wide[data-go="kasa"] .m .money{color:var(--blok-fg)}
:is(#root,#fin-przeglad)>.pl-kpis>.pl-kpi:first-child::before{display:none}
.card.static:has(>.big)>.big{--green:var(--blok-num);--ink2:var(--blok-mute)} /* kolor inline var(--green) → żółty; ujemne zostają różowe */
.card.static:has(>.big) .kpi{background:var(--paper);border-color:var(--line2)}
.card.static:has(>.big) .money:not(.neg){color:inherit} /* eur() daje span.money: kwota bierze kolor rodzica (żółta liczba, białe KPI, żółta „Najbliższa wypłata”) */
.dash>.card.wide[data-go="kasa"] .btn.ghost,#fin-metry .card:has(.num) .btn.ghost{background:transparent;border-color:rgba(255,255,255,.22);color:var(--blok-fg)}
@media(hover:hover){.dash>.card.wide[data-go="kasa"] .btn.ghost:hover,#fin-metry .card:has(.num) .btn.ghost:hover{border-color:var(--yellow);color:var(--yellow);background:transparent}}
.pl-kpi:first-child .pl-late{background:var(--rose2)}

/* ── E2. Dziś ── */
/* decyzje: pasek statusu 4 px na całej sprawie (termin złoty, po terminie czerwony, zgłoszenie z kwotą zielony) */
.dec[data-st]{position:relative;padding-left:14px}
.dec[data-st]::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:2px;background:var(--gold);pointer-events:none}
.dec[data-st="red"]::before{background:var(--rose)}
.dec[data-st="green"]::before{background:var(--green)}
.dec>.li>.t{font-weight:600}
/* podpowiedź po prawej: termin = mono WERSALIKI w kolorze stanu, kwota = mono pogrubiona */
.dec[data-st]>.li>.m{font:600 11px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:2px}
.dec[data-st="red"]>.li>.m{color:var(--rose)}
.dec[data-st="green"]>.li>.m{font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink)}
.dec>.li>.m .chev{color:var(--ink2)}
#wpl-body .num{color:var(--ink)} /* było szare: dziedziczyło .m */
.dash>.card>h2+.num{margin-top:2px}
.dash>.card.wide[data-go="kasa"] .lbl{font:500 13px/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--blok-mute)}

/* ── E3. Plan ── */
.pl-bh b{font:600 17px/1.15 var(--serif);text-transform:uppercase;letter-spacing:.01em}
.pl-bh span{font:600 13px/1.3 var(--mono);letter-spacing:.02em}
.pl-wh b{font-weight:600;text-transform:uppercase;letter-spacing:.01em}
.pl-amt{font-size:15px}
:root .pl-tx .m,:root .pl-kpi .m{font-size:13px}
:root .pl-seg button{font-size:13.5px}
:root .pl-doc{font-size:13px}
/* wiersz sprawy na telefonie: tytuł | kwota w pierwszej linii, przełącznik/usuń pod spodem po prawej */
@media(max-width:719px){
  .pl-frow{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:8px;align-items:start}
  .pl-frow>.pl-tx{grid-column:1;grid-row:1}
  .pl-frow>.pl-fr{display:contents}
  .pl-frow>.pl-fr>.pl-amt{grid-column:2;grid-row:1;padding-top:1px}
  .pl-frow>.pl-fr>:not(.pl-amt){grid-column:1/-1;justify-self:end}
}
.dec>.li>.t.ell{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3} /* tytuł sprawy w całości (był ucięty „…”) */
.card>.pl-frow:first-child{border-top:0;padding-top:4px} /* Koszty stałe: bez pustej kreski nad pierwszą pozycją */

/* ── E4. Budowa ── */
.card[data-budowa] b{text-transform:uppercase;letter-spacing:.01em}
#fin-metry .card:has(.num){margin-bottom:24px}
#fin-metry .krow3>span:nth-child(2){font:600 17px/1.1 var(--serif);letter-spacing:.01em}
/* wpis metrów na telefonie: adres | usuń, pod usuń metry po prawej (było: metry pod przyciskiem, po lewej) */
@media(max-width:520px){
  #fin-metry .krow3:has([data-mdel])>:first-child{grid-row:1/3}
  #fin-metry .krow3:has([data-mdel])>:nth-child(2){grid-column:2;grid-row:2;align-self:end;text-align:right}
  #fin-metry .krow3:has([data-mdel])>:nth-child(3){grid-row:1;text-align:right}
}

/* ── E5. Finanse ── */
.pl-bhead b{text-transform:uppercase;letter-spacing:.01em}
.pl-bwh b{font-weight:600}

/* ── E6. Ekipa ── */
.card .zk-card{box-shadow:none;border-color:var(--line2)}
.zk-kwota{font-size:15px;text-transform:none;letter-spacing:0}
.zk-dni{font:600 11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.zk-dni b{color:var(--ink)}

/* ── E7. Biuro: Kalendarz — termin po terminie = czerwony pasek, blisko terminu = złoty ── */
#fin-terminy .li:has(>div>.m>span[style*="--rose"]),#fin-terminy .li:has(>div>.m>span[style*="--gold"]){position:relative;padding-left:14px}
#fin-terminy .li:has(>div>.m>span[style*="--rose"])::before,#fin-terminy .li:has(>div>.m>span[style*="--gold"])::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:2px;background:var(--gold);pointer-events:none}
#fin-terminy .li:has(>div>.m>span[style*="--rose"])::before{background:var(--rose)}

/* ── E8. monter: Moja kasa — tygodnie: kwota po prawej, „płatne od…” drobniej pod nią ── */
.card.static>.li>b:last-child{text-align:right}
.card.static>.li>b:last-child>.m{font:500 13px/1.35 var(--sans)}

/* ── E9. Rekrutacja: plakietka statusu ma inline color:var(--wk-s1|2) (pulpit.js) → lokalnie ciemniejszy token, tylko jasny motyw (AA) ── */
:root:not([data-theme="dark"]) .pill[style*="var(--wk-s1)"]{--wk-s1:color-mix(in srgb,#3D6BC4 85%,#000)}
:root:not([data-theme="dark"]) .pill[style*="var(--wk-s2)"]{--wk-s2:color-mix(in srgb,#E0662F 68%,#000)}