/* monster-swapy — system wizualny wg docs/KONCEPCJA-STRONY.md §4.
   Paleta zostaje z poprzedniej wersji (jest rozpoznawalna i działa), zmienia się typografia
   (proza przestaje być monospace), dochodzą trzy temperatury gęstości i komponenty sygnaturowe. */

:root {
  --powloka:1400px;   /* było 1180 — pełna szerokość dla siatek i tabel */
  --czytanie:58ch;    /* pomiar na żywym akapicie: 66ch→79 znaków, 62ch→77, 58ch→~72.
                         Krój szeryfowy ma węższą literę wzorcową niż zakłada jednostka ch. */
  --rynna:38px;
  --rail:clamp(300px,25vw,400px);
  --ground:#101418; --surface:#171D22; --surface2:#1E262C; --surface3:#242E35;
  --line:#2A343B; --line2:#37444D;
  --ink:#E7EEF2; --muted:#93A4AD; --dim:#66767F;
  --petrol:#45BFD6; --diesel:#E0913C;
  --ok:#6DBE7A; --warn:#D8B23F; --danger:#E05540;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --disp:"Helvetica Neue Condensed","Arial Narrow",Impact,system-ui,sans-serif;
  --prose:ui-serif,Georgia,"Times New Roman",serif;
  --ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --r:2px;
}
@media (prefers-color-scheme:light){
  :root{--ground:#F2F4F3;--surface:#FFF;--surface2:#F6F8F7;--surface3:#EDF1F0;
    --line:#DCE2E1;--line2:#C3CDCB;--ink:#131719;--muted:#55666F;--dim:#7E8E96;
    --petrol:#0D7386;--diesel:#9A5A15;--ok:#2C7239;--warn:#856408;--danger:#AD2F1D;}
}
:root[data-theme="dark"]{--ground:#101418;--surface:#171D22;--surface2:#1E262C;--surface3:#242E35;
  --line:#2A343B;--line2:#37444D;--ink:#E7EEF2;--muted:#93A4AD;--dim:#66767F;
  --petrol:#45BFD6;--diesel:#E0913C;--ok:#6DBE7A;--warn:#D8B23F;--danger:#E05540;}
:root[data-theme="light"]{--ground:#F2F4F3;--surface:#FFF;--surface2:#F6F8F7;--surface3:#EDF1F0;
  --line:#DCE2E1;--line2:#C3CDCB;--ink:#131719;--muted:#55666F;--dim:#7E8E96;
  --petrol:#0D7386;--diesel:#9A5A15;--ok:#2C7239;--warn:#856408;--danger:#AD2F1D;}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--ui);
  font-size:15.5px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--petrol);text-underline-offset:2px}
:focus-visible{outline:2px solid var(--petrol);outline-offset:2px}
img,svg{max-width:100%}

/* ---------- szkielet ---------- */
.top{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.top .in{max-width:var(--powloka);margin:0 auto;display:flex;align-items:center;gap:22px;padding:0 22px;min-height:52px}
.brand{font-family:var(--disp);font-size:19px;letter-spacing:.03em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);white-space:nowrap}
.brand b{color:var(--petrol);font-weight:inherit}
nav.main{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
nav.main::-webkit-scrollbar{display:none}
nav.main a{font-family:var(--disp);font-size:14.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;padding:15px 12px;border-bottom:2px solid transparent;white-space:nowrap}
nav.main a:hover{color:var(--ink)}
nav.main a[aria-current]{color:var(--ink);border-bottom-color:var(--petrol)}
main{max-width:var(--powloka);margin:0 auto;padding:26px 22px 90px}
@media(max-width:620px){.top .in{gap:12px;padding:0 13px}main{padding:18px 13px 60px}}

footer{border-top:1px solid var(--line);background:var(--surface);margin-top:40px}
footer .in{max-width:var(--powloka);margin:0 auto;padding:18px 22px;font-family:var(--mono);
  font-size:11.5px;color:var(--dim);display:flex;flex-wrap:wrap;gap:6px 18px}

/* ---------- typografia ---------- */
h1{font-family:var(--disp);font-size:clamp(27px,4.6vw,40px);line-height:1.05;letter-spacing:.01em;
  text-transform:uppercase;margin:0 0 6px;text-wrap:balance}
h2{font-family:var(--disp);font-size:19px;letter-spacing:.07em;text-transform:uppercase;
  margin:38px 0 12px;padding-bottom:7px;border-bottom:1px solid var(--line)}
h3{font-family:var(--disp);font-size:15px;letter-spacing:.06em;text-transform:uppercase;
  margin:22px 0 8px;color:var(--muted)}
.lead{font-size:17px;color:var(--muted);max-width:60ch;margin:0 0 4px}
.crumb{font-family:var(--mono);font-size:11.5px;color:var(--dim);margin-bottom:12px}
.crumb a{color:var(--dim)}
.n{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* temperatura: czytanie */
.prose{font-family:var(--prose);font-size:17px;line-height:1.62;max-width:var(--czytanie);color:var(--ink)}
.prose p{margin:0 0 15px}
.prose h2{font-family:var(--disp);margin-top:34px}
.prose ol,.prose ul{padding-left:22px}
.prose li{margin-bottom:8px}
.prose strong{font-weight:600}

/* ---------- pewność: kształt, nie kolor (§3.4) ---------- */
.pew{font-family:var(--mono);font-size:.85em;color:inherit;opacity:.75;cursor:help;
  border:0;background:none;padding:0 .15em;font-weight:700}
.pew[data-p="pinned"]::before{content:"●"}
.pew[data-p="warsztat"]::before,.pew[data-p="range"]::before{content:"◐"}
.pew[data-p="estimate"]::before,.pew[data-p="none"]::before{content:"○"}
.pew[data-p="pomiar"]::before{content:"●"}

/* ---------- widełki jako pasmo (§4) ---------- */
.kwota{display:inline-flex;flex-direction:column;gap:2px;vertical-align:top}
.kwota .v{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.kwota .pasmo{height:3px;background:var(--line);position:relative;border-radius:1px;min-width:44px}
.kwota .pasmo i{position:absolute;inset:0;background:var(--petrol);opacity:.55;border-radius:1px}
.kwota.d .pasmo i{background:var(--diesel)}

/* ---------- chipy ---------- */
.chip{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.07em;
  text-transform:uppercase;padding:2px 6px;border:1px solid var(--line2);color:var(--muted);
  border-radius:var(--r);margin:0 4px 4px 0;white-space:nowrap}
.chip.p{color:var(--petrol);border-color:var(--petrol)}
.chip.d{color:var(--diesel);border-color:var(--diesel)}
.chip.ok{color:var(--ok);border-color:var(--ok)}
.chip.warn{color:var(--warn);border-color:var(--warn)}
.chip.bad{color:var(--danger);border-color:var(--danger)}

/* ---------- temperatura: przegląd ---------- */
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin:16px 0}
.kpi>div{background:var(--surface);padding:12px 14px}
.kpi span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim);margin-bottom:3px}
.kpi b{font-family:var(--mono);font-size:24px;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;font-weight:600;display:block;line-height:1.1}
.kpi b small{font-size:13px;color:var(--muted);font-weight:400}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.card h3{margin:0 0 2px;font-family:var(--mono);font-size:15px;text-transform:none;
  letter-spacing:0;color:var(--ink)}
.card .sub{color:var(--dim);font-size:12.5px;margin-bottom:9px}
.card.petrol{border-top:2px solid var(--petrol)}
.card.diesel{border-top:2px solid var(--diesel)}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:3px 0;font-size:13.5px}
.row>:last-child{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}

.note{border-left:2px solid var(--line2);padding:2px 0 2px 12px;margin:12px 0;
  font-size:14px;color:var(--muted);max-width:70ch}
.note b{color:var(--ink)}
.note.warn{border-left-color:var(--warn)}
.note.bad{border-left-color:var(--danger)}
.note.ok{border-left-color:var(--ok)}

/* ---------- kafelek braku (§3.5) ---------- */
.brak{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;
  padding:3px 8px;border-radius:var(--r);color:var(--dim)}
.brak.niewiemy{border:1px dashed var(--line2)}
.brak.niema{border:1px solid var(--danger);color:var(--danger)}
.brak small{color:var(--dim);font-size:10.5px}

/* ---------- DRABINA MOCY (§3.1) ---------- */
.drabina{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);overflow:hidden}
.szczebel{display:grid;grid-template-columns:150px 1fr auto;gap:14px;align-items:start;
  padding:13px 15px;border-bottom:1px solid var(--line);background:none;width:100%;
  text-align:left;color:inherit;font:inherit;cursor:pointer}
.szczebel:last-of-type{border-bottom:0}
.szczebel:hover{background:var(--surface2)}
.szczebel[aria-expanded="true"]{background:var(--surface2)}
.szczebel .lvl{font-family:var(--mono);font-size:13px;line-height:1.3}
.szczebel .lvl small{display:block;color:var(--dim);font-size:11px;margin-top:2px}
.szczebel .moc{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.szczebel .km{font-family:var(--mono);font-size:22px;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em}
.szczebel .km u{text-decoration:none;font-size:11px;color:var(--dim);margin-left:2px}
.szczebel .nm{font-family:var(--mono);font-size:13px;color:var(--muted)}
.szczebel .tor{flex-basis:100%;margin-top:6px;height:4px;background:var(--surface3);position:relative;border-radius:2px}
.szczebel .tor i{position:absolute;inset:0 auto 0 0;background:var(--petrol);border-radius:2px}
.szczebel.d .tor i{background:var(--diesel)}
.szczebel .cena{text-align:right}
.szczebel.kola{background:linear-gradient(90deg,transparent 0 3px,var(--surface2) 3px);
  border-left:3px solid var(--warn)}
.szczebel .gb{flex-basis:100%;font-family:var(--mono);font-size:10.5px;margin-top:5px}
.szczebel .gb.zle{color:var(--danger)}
.szczebel .gb.ok{color:var(--dim)}
.szczegoly{padding:0 15px 16px;border-bottom:1px solid var(--line);background:var(--surface2)}
.szczegoly[hidden]{display:none}
.mody{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px;margin:10px 0 0}
.mod{border:1px solid var(--line);background:var(--surface);padding:7px 9px;font-size:12.5px;
  border-radius:var(--r)}
.mod em{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--dim);font-style:normal;margin-top:3px}
@media(max-width:620px){
  .szczebel{grid-template-columns:1fr;gap:6px;padding:12px 13px}
  .szczebel .cena{text-align:left}
}

/* ---------- ŁAŃCUCH MOMENTU (§3.2) ---------- */
.lancuch{display:flex;gap:0;align-items:stretch;overflow-x:auto;padding:2px 0 6px}
.ogniwo{flex:1 0 132px;border:1px solid var(--line);border-right:0;background:var(--surface);
  padding:10px 11px;position:relative}
.ogniwo:last-child{border-right:1px solid var(--line)}
.ogniwo em{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim);font-style:normal;margin-bottom:4px}
.ogniwo b{font-family:var(--mono);font-size:15px;font-variant-numeric:tabular-nums;display:block}
.ogniwo small{font-family:var(--mono);font-size:10.5px;display:block;margin-top:3px}
.ogniwo.trzyma{border-top:3px solid var(--ok)}
.ogniwo.trzyma small{color:var(--ok)}
.ogniwo.styk{border-top:3px solid var(--warn)}
.ogniwo.styk small{color:var(--warn)}
.ogniwo.peka{border-top:3px solid var(--danger);background:var(--surface2)}
.ogniwo.peka small{color:var(--danger)}
.ogniwo.nieznane{border-top:3px dotted var(--line2)}
.ogniwo.nieznane b{color:var(--dim)}
@media(max-width:620px){
  .lancuch{flex-direction:column}
  .ogniwo{border-right:1px solid var(--line);border-bottom:0}
  .ogniwo:last-child{border-bottom:1px solid var(--line)}
}

/* ---------- temperatura: porównanie ---------- */
.scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);text-align:left;padding:9px 11px;border-bottom:1px solid var(--line);
  white-space:nowrap;position:sticky;top:0;background:var(--surface)}
td{padding:9px 11px;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--surface2)}
td.n{white-space:nowrap}
.male{font-size:12px;color:var(--dim);line-height:1.4}

/* ---------- nagrobek (§3.6) ---------- */
.grob{border:1px solid var(--line);border-left:3px solid var(--danger);background:var(--surface);
  padding:11px 13px;border-radius:var(--r);margin:9px 0}
.grob .t{font-family:var(--mono);font-size:13px;margin-bottom:3px}
.grob .t::before{content:"⚰ ";opacity:.7}
.grob p{margin:4px 0 0;font-size:13px;color:var(--muted)}

/* ---------- pojęcia inline (§6.2) ---------- */
.termin{border-bottom:1px dotted var(--line2);cursor:help;background:none;border-top:0;
  border-left:0;border-right:0;padding:0;font:inherit;color:inherit}
.termin:hover{border-bottom-color:var(--petrol)}

.przycisk{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  padding:7px 12px;border:1px solid var(--petrol);color:var(--petrol);text-decoration:none;
  border-radius:var(--r);background:none;cursor:pointer}
.przycisk:hover{background:var(--petrol);color:var(--ground)}
.przycisk.mini{font-size:11px;padding:4px 9px}

/* ---------- zakładki encji ----------
   Progresywne wzmocnienie: bez JS wszystkie panele są widoczne jeden pod drugim
   (strona nadal kompletna, czytelna i indeksowalna), z JS stają się zakładkami. */
.zakladki{display:none}
.js .zakladki{display:flex;gap:0;flex-wrap:wrap;border-bottom:1px solid var(--line);
  margin:22px 0 0;position:sticky;top:52px;background:var(--ground);z-index:10}
.js .zakladki button{font-family:var(--disp);font-size:14.5px;letter-spacing:.07em;
  text-transform:uppercase;background:none;border:0;border-bottom:2px solid transparent;
  color:var(--muted);padding:11px 14px;cursor:pointer;white-space:nowrap}
.js .zakladki button:hover{color:var(--ink)}
.js .zakladki button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--petrol)}
.js .zakladki .licznik{font-family:var(--mono);font-size:10px;color:var(--dim);margin-left:5px}
.js .panel[hidden]{display:none}
.js .panel>h2:first-child{margin-top:22px}
@media(max-width:620px){
  .js .zakladki{top:0;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .js .zakladki::-webkit-scrollbar{display:none}
  .js .zakladki button{padding:11px 11px;font-size:13.5px}
}
.pusty{border:1px dashed var(--line2);border-radius:var(--r);padding:18px;color:var(--dim);
  font-size:14px;max-width:70ch}
.pusty b{color:var(--muted);display:block;margin-bottom:5px;font-family:var(--mono);font-size:12px;
  letter-spacing:.06em;text-transform:uppercase}

/* ---------- materiały wizualne ---------- */
.wizual{max-width:420px;margin:0 0 10px}
figure.diagram,figure.foto{margin:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
figure.diagram svg{display:block;width:100%;height:auto;padding:16px 10px 6px;box-sizing:border-box}
figure.diagram svg text{font-family:var(--mono);font-size:11px}
figure.foto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  background:var(--surface2)}
figure figcaption{font-family:var(--mono);font-size:10.5px;line-height:1.45;color:var(--dim);
  padding:8px 11px;border-top:1px solid var(--line)}
figure figcaption a{color:var(--muted)}
figure.diagram.szeroki{grid-column:1/-1;margin:12px 0}
/* ikona układu cylindrów — glif przy oznaczeniu, nie ilustracja zamiast niego */
.ikona-ukl{display:inline-block;vertical-align:-4px;opacity:.85;margin-right:3px}
.chip .ikona-ukl{vertical-align:-3px;opacity:1}

/* ---------- strumień porad (§5 poz. 2 z docs/UX-LAYOUT.md) ----------
   Panel Pułapek dla N54 miał 1140 px wysokości jednej kolumny. Dwa strumienie skracają go
   o połowę, ale krytyczne ostrzeżenia i te najdłuższe zostają na pełnej szerokości — one mają
   być przeczytane, nie przeskanowane. `columns` byłoby tu złe: rozbija kolejność czytania. */
.strumien{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:1080px){.strumien{grid-template-columns:repeat(auto-fill,minmax(380px,1fr))}}
.strumien > .szeroka{grid-column:1 / -1}
.strumien > .note{margin:0}
.kpi{max-width:1040px}

/* ---------- układ dwukolumnowy (§1.2 docs/UX-LAYOUT.md) ----------
   Jeden komponent układu na całą stronę. Bloki pełnej szerokości NIE są jego elementami,
   tylko rodzeństwem — dzięki temu kolejność DOM = kolejność mobilna = kolejność fokusa,
   bez ani jednego `order`. Nic nie rysuje granicy między kolumnami: puste miejsce pod
   krótszą kolumną ma wyglądać na margines, nie na niedokończony komponent. */
.uklad{display:grid;align-items:start;gap:24px var(--rynna);grid-template-columns:1fr}
@media(min-width:1080px){
  .uklad{grid-template-columns:minmax(0,1fr) var(--rail)}
  .uklad > .glowna{grid-column:1;grid-row:1 / span 2}
  .uklad > .bok-a{grid-column:2;grid-row:1}
  .uklad > .bok-b{grid-column:2;grid-row:2}
  .uklad--tekst{grid-template-columns:minmax(0,var(--czytanie)) minmax(240px,30ch);
                justify-content:center}
}
.bok-a > * + *,.bok-b > * + *{margin-top:18px}
.bok-a h2,.bok-b h2,.bok-a h3,.bok-b h3{margin-top:0;font-size:13px}
.bok-a .kpi,.bok-b .kpi{grid-template-columns:repeat(2,1fr)}
.bok-a figure.foto,.bok-b figure.foto{margin-bottom:0}

/* rail Potencjału to jedyne miejsce, gdzie sticky ma sens: cztery ogniwa mieszczą się
   w ekranie, a mają być widoczne równocześnie ze szczeblem drabiny, który je obciąża */
@media(min-width:1240px){
  .bok-b.przyklejony{position:sticky;top:112px;max-height:calc(100vh - 130px);overflow:auto}
}

/* szybkie dane — wyciąg 6-8 pól do railu; pełna tabela zostaje w kolumnie głównej */
.szybkie{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  padding:12px 14px}
.szybkie h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);margin:0 0 8px}
.szybkie .row{padding:4px 0;border-bottom:1px solid var(--line);font-size:13px}
.szybkie .row:last-child{border-bottom:0}

/* łańcuch momentu w pionie — reguła istniała już jako mobilna, tu staje się klasą */
.lancuch--pion{flex-direction:column}
.lancuch--pion .ogniwo{border-right:1px solid var(--line);border-bottom:0}
.lancuch--pion .ogniwo:last-child{border-bottom:1px solid var(--line)}