/* Copyright 2026, AI Company authors. Interfejs platformy, styl makiety z 26.10.2026: kolory Forge Crew, wąskie nagłówki,
   pomarańcz = czeka na człowieka, bursztyn = maszyna pracuje, teczka manila = panel szczegółów. Bez zewnętrznych fontów. */
:root {
    --emalia: #e7ecea;
    --panel: #ffffff;
    --panel-cien: #f4f7f5;
    --atrament: #0f1f22;
    --grafit: #4d5c5e;
    --grafit-lekki: #6f7f81;
    --nit: #c5d0cc;
    --nit-lekki: #dde5e1;
    --petrol: #136466;
    --petrol-ciemny: #0d4c4e;
    --petrol-mgla: #e3efee;
    --sygnal: #c2540f;
    --sygnal-mgla: #fbeadf;
    --sygnal-jaskrawy: #d8611f;
    --pracuje: #8a5300;
    --pracuje-mgla: #fbf2e2;
    --zdane: #12694a;
    --zdane-mgla: #e6f2ec;
    --poprawka: #b3372c;
    --poprawka-mgla: #fbebe9;
    --blokada: #6b3fa0;
    --blokada-mgla: #f0eaf8;
    --szyna-tlo: #0f1f22;
    --szyna-tekst: #9fb1b3;
    --display: "Archivo", "Instrument Sans", "Segoe UI", system-ui, sans-serif;
    --sans: "Instrument Sans", "Inter", "Segoe UI", system-ui, sans-serif;
    --mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, Consolas, monospace;
    --r: 4px;
    --r-duze: 6px;
    --teczka: #d9cfb6;
    --teczka-ciemna: #b9ab88;
    --teczka-tlo: #f7f4ec;
    --akta: 440px;
    --cien: 0 1px 0 rgba(15, 31, 34, 0.04), 0 1px 2px rgba(15, 31, 34, 0.06);
    --szyna: 220px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--emalia); color: var(--atrament); font: 13.5px/1.5 var(--sans); }
a { color: var(--petrol); cursor: pointer; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; margin: 0; line-height: 1.2; font-stretch: 88%; }
h1 { font-size: 28px; font-weight: 700; font-stretch: 72%; letter-spacing: -0.005em; }
h2 { font-size: 16px; margin-bottom: 10px; }
h3 { font-size: 13.5px; }
p { margin: 0 0 8px; }
ul { margin: 0 0 8px; padding-left: 18px; }
code, .mono { font-family: var(--mono); font-size: 0.88em; }
button { font: inherit; cursor: pointer; }

/* ── szyna ─────────────────────────────────────────────── */
#szyna { position: fixed; inset: 0 auto 0 0; width: var(--szyna); background: var(--szyna-tlo); color: var(--szyna-tekst);
    padding: 14px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
#szyna .znak { font: 700 20px/1 var(--display); font-stretch: 75%; color: #fff; padding: 4px 8px 14px; letter-spacing: 0.01em; }
#szyna .znak b { color: var(--sygnal-jaskrawy); }
#szyna .firma { margin: 0 4px 10px; padding: 8px; border: 1px solid #23383c; border-radius: var(--r); font-size: 11.5px; }
#szyna .firma strong { color: #fff; display: block; font-size: 12.5px; }
#szyna a.firma { display: block; color: var(--szyna-tekst); padding: 8px; }
#szyna a.firma:hover { border-color: #3d5a5e; background: #172a2e; }
#szyna .firma .zmien { display: block; margin-top: 4px; color: #6fb3b0; font-size: 10.5px; }
#szyna .firma.platforma { border-color: #6fb3b0; }
#szyna h4 { font: 600 9px/1 var(--sans); text-transform: uppercase; letter-spacing: 0.12em; color: #6f8486; margin: 12px 8px 4px; }
#szyna a { color: var(--szyna-tekst); padding: 5px 8px; border-radius: var(--r); display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
#szyna a:hover { background: #1b2f33; color: #fff; text-decoration: none; }
#szyna a.akt { background: #1f3a3e; color: #fff; box-shadow: inset 2px 0 0 #6fb3b0; }
#szyna .ile { margin-left: auto; font: 600 10px/1 var(--mono); padding: 3px 6px; border-radius: 10px; background: #2a4246; color: #cfe; }
#szyna .ile.syg { background: var(--sygnal); color: #fff; }
#szyna .kropka { width: 7px; height: 7px; border-radius: 50%; background: #3d5558; flex: none; }
#szyna .kropka.pracuje { background: #d39a3a; animation: puls 1.6s infinite; }
#szyna .kropka.czeka { background: var(--sygnal-jaskrawy); }
#szyna .podgrupa { font: 500 10px/1 var(--sans); color: #6f8486; margin: 8px 8px 3px 23px; letter-spacing: 0.02em; }
#szyna .dol { margin-top: auto; padding: 10px 8px 0; font-size: 11px; color: #6f8486; }

@keyframes puls { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ── treść ─────────────────────────────────────────────── */
#tresc { margin-left: var(--szyna); min-height: 100%; }
.glowa { padding: 22px 64px 16px 30px; display: flex; gap: 16px; align-items: flex-start; border-bottom: 1px solid var(--nit-lekki); background: var(--panel-cien); }
.glowa .okruszki { font: 600 10px/1.4 var(--sans); text-transform: uppercase; letter-spacing: 0.12em; color: var(--grafit-lekki); margin-bottom: 6px; }
.glowa .okruszki a { color: var(--grafit); }
.glowa .zdanie { color: var(--grafit); margin: 6px 0 0; max-width: 760px; font-size: 14px; }
.glowa .akcje { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.cialo { padding: 20px 64px 48px 30px; max-width: 1480px; }
.zakladki { display: flex; gap: 2px; padding: 0 64px 0 30px; overflow-x: auto; background: var(--panel-cien); border-bottom: 1px solid var(--nit); }
.zakladki a { padding: 8px 12px; color: var(--grafit); border-bottom: 2px solid transparent; font-size: 12.5px; }
.zakladki a:hover { text-decoration: none; color: var(--atrament); }
.zakladki a.akt { color: var(--atrament); border-bottom-color: var(--petrol); font-weight: 600; }
.zakladki .ile { font: 600 10px var(--mono); color: var(--grafit-lekki); margin-left: 4px; }

.karta { background: var(--panel); border: 1px solid var(--nit-lekki); border-radius: var(--r-duze); box-shadow: var(--cien); padding: 16px 18px; }
.karta + .karta { margin-top: 12px; }
.karta h2 .nota { font: 400 11px var(--sans); color: var(--grafit-lekki); margin-left: 6px; }
.siatka { display: grid; gap: 12px; }
.s2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.s-boczna { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.nota { font-size: 11px; color: var(--grafit-lekki); }
.etykieta { font: 600 9px/1.3 var(--sans); text-transform: uppercase; letter-spacing: 0.1em; color: var(--grafit-lekki); }
.odstep { height: 12px; }
.wiersz { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rozepchnij { margin-left: auto; }

/* przyciski i plakietki */
.btn { white-space: nowrap; border: 1px solid var(--nit); background: var(--panel); color: var(--atrament); padding: 5px 10px; border-radius: var(--r); font-size: 12px; display: inline-flex; gap: 6px; align-items: center; }
.btn:hover { border-color: var(--petrol); text-decoration: none; }
.btn.glowny { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.btn.glowny:hover { background: var(--petrol-ciemny); }
.btn.syg { background: var(--sygnal); border-color: var(--sygnal); color: #fff; }
.btn.maly { padding: 2px 8px; font-size: 11px; }
.btn.wyl { opacity: 0.5; pointer-events: none; }
.chip { display: inline-flex; align-items: center; gap: 4px; font: 500 10px/1 var(--mono); padding: 3px 6px; border-radius: var(--r); background: var(--panel-cien); color: var(--grafit); border: 1px solid var(--nit-lekki); white-space: nowrap; }
.chip.petrol { background: var(--petrol-mgla); color: var(--petrol-ciemny); border-color: #c4dedc; }
.chip.syg { background: var(--sygnal-mgla); color: var(--sygnal); border-color: #f1c9ad; }
.chip.pracuje { background: var(--pracuje-mgla); color: var(--pracuje); border-color: #ecd7ae; }
.chip.pracuje::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: puls 1.6s infinite; }
.chip.zdane { background: var(--zdane-mgla); color: var(--zdane); border-color: #bfdccd; }
.chip.poprawka { background: var(--poprawka-mgla); color: var(--poprawka); border-color: #efc4bf; }
.chip.blokada { background: var(--blokada-mgla); color: var(--blokada); border-color: #d9c9ee; }
.klasa { font: 600 9px/1 var(--sans); text-transform: uppercase; letter-spacing: 0.08em; padding: 3px 5px; border-radius: 3px; background: var(--panel-cien); color: var(--grafit); border: 1px solid var(--nit-lekki); }
.klasa.lider { background: #e8eef9; color: #2b4f8f; border-color: #c9d7f0; }
.klasa.wykonawca { background: #eaf3ef; color: #1d5e46; border-color: #c6e0d4; }
.klasa.krytyk { background: #f7ece9; color: #8f3a2e; border-color: #ecd0ca; }
.klasa.decydent { background: #f1eaf8; color: #5d3a8e; border-color: #ddd0ee; }
.klasa.doradca { background: #eef4f4; color: #2c5d5f; border-color: #cfe1e1; }
.klasa.recepcja { background: #f6f1e4; color: #6f5418; border-color: #e7dbbb; }
.klasa.maszyna { background: #eceff0; color: #3f4d50; border-color: #d3dadb; }

/* tabele */
table.t { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.t th { text-align: left; font: 600 9px/1.3 var(--sans); text-transform: uppercase; letter-spacing: 0.1em; color: var(--grafit-lekki); background: var(--panel-cien); padding: 7px 8px; border-bottom: 1px solid var(--nit-lekki); }
table.t td { padding: 7px 8px; border-bottom: 1px solid var(--nit-lekki); vertical-align: top; }
table.t tr:last-child td { border-bottom: 0; }
table.t tr.klik:hover td { background: #f8fbfa; cursor: pointer; }

/* dlaczego */
details.dlaczego { background: var(--petrol-mgla); border: 1px solid #c4dedc; border-radius: var(--r-duze); padding: 8px 12px; margin-bottom: 14px; font-size: 12.5px; }
details.dlaczego summary { cursor: pointer; color: var(--petrol-ciemny); font-weight: 600; }
details.dlaczego[open] summary { margin-bottom: 6px; }
details.dlaczego p:last-child, details.dlaczego ul:last-child { margin-bottom: 0; }

/* ── organigram ─────────────────────────────────────────── */
.pas { position: relative; margin-bottom: 16px; }
.pas > .etykieta { margin: 0 0 6px 2px; display: block; }
.zespoly { display: grid; gap: 14px; }
.zespoly.linia { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 64px; row-gap: 64px; }
#org-linia { padding-top: 34px; }
#org-linia > .etykieta { position: absolute; top: 0; }
.zespoly.wsparcie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zespoly.zarzad { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
.zesp { background: var(--panel); border: 1px solid var(--nit-lekki); border-radius: var(--r-duze); box-shadow: var(--cien); padding: 11px 12px; cursor: pointer; position: relative; z-index: 1; transition: border-color 0.12s; }
.zesp:hover { border-color: var(--petrol); }
.zesp.czeka { box-shadow: inset 3px 0 0 var(--sygnal-jaskrawy), var(--cien); }
.zesp .nazwa { font: 600 15px var(--display); font-stretch: 85%; display: flex; align-items: center; gap: 6px; }
.zesp .cel { font-size: 11.5px; color: var(--grafit); margin: 3px 0 8px; min-height: 34px; }
.zesp .liczby { display: flex; gap: 10px; font: 500 10.5px var(--mono); color: var(--grafit); }
.zesp .liczby b { color: var(--atrament); }
.zesp .ludzie { display: flex; gap: 3px; margin-top: 8px; flex-wrap: wrap; }
.awatar { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font: 600 9px var(--sans); color: #fff; background: #5f7477; flex: none; }
.awatar.czlowiek { background: var(--petrol); }
.awatar.pracuje { box-shadow: 0 0 0 2px var(--pracuje-mgla), 0 0 0 3px #d39a3a; }
.awatar.maszyna { background: #9aa8aa; border-radius: 4px; }
.awatar.duzy { width: 44px; height: 44px; font-size: 15px; }
svg.obieg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; }
svg.obieg path { fill: none; stroke: #8fb3b2; stroke-width: 1.4; }
svg.obieg path.zwrot { stroke: #d8a39c; stroke-dasharray: 4 3; }
svg.obieg text { font: 500 9.5px var(--mono); fill: var(--grafit); paint-order: stroke; stroke: var(--emalia); stroke-width: 3px; }
.liczniki { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.licznik { background: var(--panel); border: 1px solid var(--nit-lekki); border-radius: var(--r-duze); padding: 10px 12px; }
.licznik dd { margin: 4px 0 0; font: 700 30px/1 var(--display); font-stretch: 70%; }
.licznik dt { font: 600 9px var(--sans); text-transform: uppercase; letter-spacing: 0.1em; color: var(--grafit-lekki); }
.licznik.syg dd { color: var(--sygnal); }
.licznik .nota { margin-top: 2px; }

/* CFZ */
.cfz { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 0; border: 1px solid var(--nit-lekki); border-radius: var(--r-duze); overflow: hidden; background: var(--panel); }
.cfz + .cfz { margin-top: 12px; }
.cfz .boki { background: var(--panel-cien); border-right: 1px solid var(--nit-lekki); display: flex; flex-direction: column; }
.cfz .bok { padding: 8px 10px; border-bottom: 1px solid var(--nit-lekki); font-size: 11.5px; }
.cfz .bok:last-child { border-bottom: 0; flex: 1; }
.cfz .bok .etykieta { display: block; margin-bottom: 2px; }
.cfz .bok.c .etykieta { color: #2c5d5f; }
.cfz .bok.f .etykieta { color: #5d3a8e; }
.cfz .bok.z .etykieta { color: #8f3a2e; }
.cfz .srodek { padding: 10px 12px; min-width: 0; }
.cfz .srodek .wiersz { margin-bottom: 8px; }
.widoki { display: inline-flex; border: 1px solid var(--nit); border-radius: var(--r); overflow: hidden; }
.widoki a { padding: 3px 9px; font-size: 11px; color: var(--grafit); border-right: 1px solid var(--nit); }
.widoki a:last-child { border-right: 0; }
.widoki a.akt { background: var(--petrol); color: #fff; }
.widoki a:hover { text-decoration: none; }

/* kanban */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); gap: 8px; overflow-x: auto; }
.kolumna { background: var(--panel-cien); border-radius: var(--r); padding: 6px; min-height: 120px; }
.kolumna > .etykieta { display: flex; justify-content: space-between; padding: 2px 4px 6px; }
.rek { background: var(--panel); border: 1px solid var(--nit-lekki); border-radius: var(--r); padding: 7px 8px; font-size: 12px; margin-bottom: 6px; box-shadow: var(--cien); }
.rek .id { font: 500 10px var(--mono); color: var(--grafit-lekki); }
.rek .t { margin: 2px 0 5px; }
.rek .wiersz { gap: 4px; }
.rek.czeka { box-shadow: inset 3px 0 0 var(--sygnal-jaskrawy), var(--cien); }

/* drzewo planu */
.drzewo { font-size: 12.5px; }
.drzewo .w { display: flex; gap: 8px; align-items: center; padding: 5px 6px; border-bottom: 1px solid var(--nit-lekki); }
.drzewo .w:hover { background: #f8fbfa; }
.drzewo .w .typ { font: 600 9px var(--sans); text-transform: uppercase; letter-spacing: 0.08em; color: var(--grafit-lekki); width: 56px; flex: none; }
.drzewo .w .tyt { flex: 1; min-width: 0; }
.drzewo .w.p1 { padding-left: 26px; }
.drzewo .w.p2 { padding-left: 48px; }
.drzewo .w.p3 { padding-left: 70px; }
.drzewo .fala { font: 500 10px var(--mono); color: var(--grafit); width: 50px; text-align: right; }

/* procedura */
.proc { display: flex; flex-direction: column; gap: 0; max-width: 680px; }
.krok { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--panel); border: 1px solid var(--nit-lekki); border-radius: var(--r); padding: 7px 10px; position: relative; }
.krok + .krok { margin-top: 14px; }
.krok + .krok::before { content: ""; position: absolute; left: 46px; top: -15px; height: 14px; border-left: 1.5px solid var(--nit); }
.krok .rodzaj { font: 600 9px var(--sans); text-transform: uppercase; letter-spacing: 0.08em; text-align: center; padding: 4px 0; border-radius: 3px; background: var(--panel-cien); color: var(--grafit); }
.krok .rodzaj.zadanie { background: #eaf3ef; color: #1d5e46; }
.krok .rodzaj.decyzja { background: #f1eaf8; color: #5d3a8e; }
.krok .rodzaj.petla { background: #f7ece9; color: #8f3a2e; }
.krok .rodzaj.rownolegle, .krok .rodzaj.rozgalezienie { background: #e8eef9; color: #2b4f8f; }
.krok .rodzaj.czekaj { background: #f6f1e4; color: #6f5418; }
.krok .rodzaj.koniec { background: #eceff0; color: #3f4d50; }
.krok .wyjscia { font: 500 10px var(--mono); color: var(--grafit-lekki); }
.krok .opis { font-size: 12px; }
.krok .opis .nota { display: block; }

/* walidacja okienka */
.warunek { display: grid; grid-template-columns: 34px 64px minmax(0, 1fr) 110px; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--nit-lekki); align-items: start; font-size: 12.5px; }
.warunek:last-child { border-bottom: 0; }
.warunek .wynik { text-align: right; }
.wynik-walidacji { margin-top: 10px; padding: 10px 12px; border-radius: var(--r); font-size: 12.5px; }
.wynik-walidacji.ok { background: var(--zdane-mgla); border: 1px solid #bfdccd; }
.wynik-walidacji.nie { background: var(--poprawka-mgla); border: 1px solid #efc4bf; }

/* schemat regulaminu */
svg.schemat { width: 100%; height: auto; display: block; }
svg.schemat .wezel rect { fill: var(--panel); stroke: var(--nit); stroke-width: 1.2; }
svg.schemat .wezel.zarzad rect { fill: var(--petrol-mgla); stroke: #9cc7c4; }
svg.schemat .wezel.wsparcie rect { fill: var(--panel-cien); }
svg.schemat .wezel.czeka rect { stroke: var(--sygnal-jaskrawy); stroke-width: 2; }
svg.schemat .wezel text { font: 600 12px var(--display); font-stretch: 85%; fill: var(--atrament); }
svg.schemat .wezel:hover rect { stroke: var(--petrol); }
svg.schemat .krawedz { cursor: pointer; outline: none; }
svg.schemat .krawedz .traf { fill: none; stroke: transparent; stroke-width: 14; }
svg.schemat .krawedz .linia { fill: none; stroke: #8fb3b2; stroke-width: 1.5; }
svg.schemat .krawedz.zwrot .linia { stroke: #d8a39c; stroke-dasharray: 5 4; }
svg.schemat .krawedz.trwala .linia { stroke: var(--petrol); stroke-width: 3; }
.legenda .gruba { color: var(--petrol); }
.t tr.cofnieta td { opacity: 0.5; }
.t tr.cofnieta td:last-child { opacity: 1; }
svg.schemat .krawedz text { font: 500 9.5px var(--mono); fill: var(--grafit); paint-order: stroke; stroke: var(--panel); stroke-width: 3px; }
svg.schemat .krawedz .znaczek { fill: var(--panel); stroke: var(--nit); }
svg.schemat .krawedz text.znaczek-t { font: 600 9.5px var(--mono); fill: var(--atrament); stroke: none; }
svg.schemat .krawedz:hover .linia, svg.schemat .krawedz:focus-visible .linia { stroke: var(--petrol); stroke-width: 2.2; }
svg.schemat .krawedz.akt .linia { stroke: var(--sygnal-jaskrawy); stroke-width: 2.4; }
svg.schemat .krawedz.akt .znaczek { stroke: var(--sygnal-jaskrawy); fill: var(--sygnal-mgla); }
svg.schemat .kanal path { fill: none; stroke: var(--sygnal-jaskrawy); stroke-width: 1.5; stroke-dasharray: 6 4; }
svg.schemat .kanal text { font: 500 9.5px var(--mono); fill: var(--sygnal); paint-order: stroke; stroke: var(--panel); stroke-width: 3px; }
svg.schemat .wezel.klient rect { fill: var(--atrament); stroke: var(--atrament); }
svg.schemat .wezel.klient text { fill: #fff; }
svg.schemat .wezel.czeka-w rect { fill: var(--sygnal-mgla); stroke: var(--sygnal-jaskrawy); }
svg.schemat .wezel.czeka-w text { fill: var(--sygnal); }
svg.schemat .ile-spraw circle { fill: var(--pracuje); }
svg.schemat .ile-spraw text { font: 600 10px var(--mono); fill: #fff; }
.legenda .kolko { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--pracuje); color: #fff; font: 600 9.5px var(--mono); }
table.rownolegle td, table.rownolegle th { text-align: center; }
table.rownolegle td:first-child, table.rownolegle th:first-child { text-align: left; }
table.rownolegle .punkt { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--pracuje); }
table.rownolegle .punkt.czeka { background: var(--sygnal-jaskrawy); }
table.rownolegle tr.suma td { font-weight: 600; background: var(--panel-cien); }
svg.schemat .pas-t { font: 600 9px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; fill: var(--grafit-lekki); }
svg.schemat .pas-l { stroke: var(--nit-lekki); stroke-dasharray: 3 4; }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11.5px; color: var(--grafit); margin-top: 8px; }
table.t tr.wybrany td { background: var(--sygnal-mgla); }
.kontrola { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 7px 8px; border: 1px solid var(--nit-lekki); border-radius: var(--r); margin-bottom: 6px; font-size: 12.5px; }
.kontrola .ikona { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; }
.kontrola.det .ikona { background: var(--petrol-mgla); color: var(--petrol-ciemny); }
.kontrola.ai { background: #fbf8f1; }
.kontrola.ai .ikona { background: var(--pracuje-mgla); color: var(--pracuje); }
details.dodaj { margin-top: 12px; border-top: 1px solid var(--nit-lekki); padding-top: 10px; }
details.dodaj summary { cursor: pointer; font-weight: 600; color: var(--petrol-ciemny); font-size: 12.5px; }
details.dodaj .etykieta { display: block; margin: 8px 0 3px; }
details.dodaj input[type="checkbox"] { width: auto; }

/* czeka na Ciebie */
.czeka-karta { box-shadow: inset 3px 0 0 var(--sygnal-jaskrawy), var(--cien); }
.czeka-pas { margin-bottom: 16px; padding: 12px; border: 1px solid #f1c9ad; background: var(--sygnal-mgla); border-radius: var(--r-duze); }
.czeka-pas .karta + .karta { margin-top: 10px; }

/* rozmowa z Zarządem */
.watek { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.wiad { max-width: 78%; background: var(--panel-cien); border: 1px solid var(--nit-lekki); border-radius: 10px 10px 10px 2px; padding: 8px 11px; font-size: 13px; }
.wiad .meta { font-size: 10.5px; color: var(--grafit-lekki); margin-bottom: 2px; }
.wiad.moja { align-self: flex-end; background: var(--petrol-mgla); border-color: #c4dedc; border-radius: 10px 10px 2px 10px; }

/* tablica ogłoszeń */
.wpis { padding: 8px 0; border-bottom: 1px solid var(--nit-lekki); font-size: 12.5px; }
.wpis:last-child { border-bottom: 0; }
.wpis .kto { font-weight: 600; }
.wpis .meta { font-size: 10.5px; color: var(--grafit-lekki); }
.wpis .wiersz { margin-top: 4px; }
textarea, input[type="text"], select { font: inherit; font-size: 12.5px; border: 1px solid var(--nit); border-radius: var(--r); padding: 6px 8px; width: 100%; background: #fff; color: var(--atrament); }
textarea { min-height: 54px; resize: vertical; }

/* sprawa: tory */
.tory { display: grid; grid-template-columns: 130px minmax(0, 1fr); border: 1px solid var(--nit-lekki); border-radius: var(--r-duze); background: var(--panel); overflow: hidden; }
.tory .tor-nazwa { padding: 8px 10px; font: 600 12px var(--display); border-bottom: 1px solid var(--nit-lekki); background: var(--panel-cien); border-right: 1px solid var(--nit-lekki); display: flex; align-items: center; }
.tory .tor { position: relative; border-bottom: 1px solid var(--nit-lekki); min-height: 38px; }
.tory .tor:nth-last-child(1), .tory .tor-nazwa:nth-last-child(2) { border-bottom: 0; }
.zdarz { position: absolute; top: 7px; height: 24px; min-width: 24px; border-radius: 12px; display: grid; place-items: center; font: 600 10px var(--mono); color: #fff; padding: 0 7px; cursor: pointer; transform: translateX(-50%); transition: opacity 0.2s; }
.zdarz.przyjete { background: var(--zdane); }
.zdarz.odrzucone { background: var(--poprawka); }
.zdarz.publikacja { background: var(--petrol); }
.zdarz.decyzja { background: var(--sygnal); }
.zdarz.krok { background: #8a9a9c; }
.zdarz.dokument { background: #5d3a8e; }
.zdarz.ukryte { opacity: 0.12; }
.zdarz.biezace { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--atrament); }
.miernik { height: 8px; background: var(--panel-cien); border-radius: 4px; overflow: hidden; border: 1px solid var(--nit-lekki); }
.miernik > i { display: block; height: 100%; background: var(--petrol); }
.miernik.ostrz > i { background: var(--pracuje); }
.lancuch { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 11.5px; }
.lancuch .ogniwo { padding: 3px 7px; border: 1px solid var(--nit); border-radius: var(--r); background: var(--panel); font-family: var(--mono); font-size: 10.5px; }
.lancuch .strz { color: var(--grafit-lekki); }

/* pracownik */
.osoba-glowa { display: flex; gap: 14px; align-items: center; }
.osoba-glowa .awatar { flex: none; }
dl.pola { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: 12.5px; }
dl.pola dt { color: var(--grafit-lekki); font-size: 11.5px; }
dl.pola dd { margin: 0; }
.prompt { font: 11.5px/1.5 var(--mono); background: var(--panel-cien); border: 1px solid var(--nit-lekki); border-radius: var(--r); padding: 10px; white-space: pre-wrap; max-height: 260px; overflow: auto; }
.zrodlo { font-size: 10.5px; color: var(--grafit-lekki); }

/* diff */
.diff { font: 11.5px/1.55 var(--mono); background: var(--panel-cien); border: 1px solid var(--nit-lekki); border-radius: var(--r); padding: 8px 10px; white-space: pre-wrap; }
.diff .plus { color: var(--zdane); }
.diff .minus { color: var(--poprawka); }

/* kreator */
.kroki-kreatora { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 14px; align-items: start; }
.kroki-kreatora ol { list-style: none; padding: 0; margin: 0; }
.kroki-kreatora li { padding: 8px 10px; border-radius: var(--r); font-size: 12.5px; display: flex; gap: 8px; align-items: center; color: var(--grafit); }
.kroki-kreatora li .nr { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 600 10px var(--mono); background: var(--panel-cien); border: 1px solid var(--nit); flex: none; }
.kroki-kreatora li.zrobione .nr { background: var(--zdane); color: #fff; border-color: var(--zdane); }
.kroki-kreatora li.biezacy { background: var(--panel); color: var(--atrament); font-weight: 600; box-shadow: var(--cien); }
.kroki-kreatora li.biezacy .nr { background: var(--pracuje); color: #fff; border-color: var(--pracuje); }
.kroki-kreatora li.czeka .nr { background: var(--sygnal); color: #fff; border-color: var(--sygnal); }

.upusc { border: 2px dashed var(--nit); border-radius: var(--r-duze); padding: 22px; text-align: center; color: var(--grafit); background: var(--panel); }
.upusc.nad { border-color: var(--petrol); background: var(--petrol-mgla); }

.toast { position: fixed; right: 18px; bottom: 18px; background: var(--atrament); color: #fff; padding: 10px 14px; border-radius: var(--r-duze); font-size: 12.5px; max-width: 420px; box-shadow: 0 6px 24px rgba(0,0,0,0.2); z-index: 50; opacity: 0; transform: translateY(8px); transition: all 0.2s; pointer-events: none; }
.toast.pokaz { opacity: 1; transform: none; }

@media (max-width: 1200px) {
    .zespoly.linia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .s-boczna { grid-template-columns: minmax(0, 1fr); }
    .liczniki { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── akta strony (panel boczny) ─────────────────────────────────────────────────────────
   Teczka z papieru manila na chłodnym tle aplikacji: jedyny ciepły kolor w interfejsie, więc od razu widać, że to
   dokumentacja strony, a nie stan firmy. Na szerokim ekranie panel odsuwa treść (inspektor), na wąskim ją przykrywa. */
#tresc { transition: margin-right 0.22s ease; }
body.akta-otwarte #tresc { margin-right: var(--akta); }
#uchwyt { position: fixed; right: 0; top: 112px; z-index: 31; border: 1px solid var(--teczka-ciemna); border-right: 0;
    background: var(--teczka); color: var(--atrament); border-radius: 7px 0 0 7px; padding: 14px 7px; writing-mode: vertical-rl;
    transform: rotate(180deg); font: 700 11px/1 var(--display); font-stretch: 80%; letter-spacing: 0.14em; text-transform: uppercase;
    box-shadow: -2px 2px 6px rgba(15, 31, 34, 0.12); transition: right 0.22s ease, background 0.12s; }
#uchwyt:hover { background: #e4dbc4; }
#uchwyt .nowe { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--sygnal-jaskrawy); margin-bottom: 8px; }
body.akta-otwarte #uchwyt { right: var(--akta); }
#akta { position: fixed; top: 0; right: 0; bottom: 0; width: var(--akta); z-index: 30; background: var(--teczka-tlo);
    border-left: 6px solid var(--teczka); box-shadow: -10px 0 30px rgba(15, 31, 34, 0.1); overflow-y: auto;
    transform: translateX(100%); visibility: hidden; transition: transform 0.22s ease, visibility 0s linear 0.22s; outline: none; }
body.akta-otwarte #akta { transform: none; visibility: visible; transition: transform 0.22s ease; }
#zaslona { position: fixed; inset: 0; background: rgba(15, 31, 34, 0.32); z-index: 29; }
.akta-glowa { position: sticky; top: 0; background: var(--teczka-tlo); padding: 18px 20px 12px; border-bottom: 1px solid var(--teczka); z-index: 1; }
.akta-glowa .sygn { font: 500 10.5px var(--mono); color: #7a6b45; display: flex; justify-content: space-between; gap: 8px; }
.akta-glowa h2 { font-size: 22px; font-weight: 700; font-stretch: 72%; margin: 6px 0 2px; }
.akta-glowa .zamknij { border: 1px solid var(--teczka-ciemna); background: transparent; border-radius: var(--r); padding: 2px 8px; font-size: 11px; color: var(--atrament); }
.akta-glowa .zamknij:hover { background: var(--teczka); }
.akta-cialo { padding: 6px 20px 28px; font-size: 12.5px; }
.akta-sekcja { padding: 14px 0 4px; }
.akta-sekcja + .akta-sekcja { border-top: 1px dashed var(--teczka-ciemna); }
.akta-sekcja > h3 { font: 700 10px/1.3 var(--sans); text-transform: uppercase; letter-spacing: 0.14em; color: #7a6b45; margin: 0 0 8px; display: flex; gap: 8px; align-items: center; }
.akta-sekcja > h3 .v2 { font: 600 9px/1 var(--mono); letter-spacing: 0.04em; text-transform: none; background: var(--atrament); color: #fff; padding: 3px 5px; border-radius: 3px; }
.akta-sekcja p { margin-bottom: 8px; }
.akta-sekcja ul { padding-left: 16px; }
.akta-sekcja li { margin-bottom: 4px; }
.akta-sekcja dl.pola { grid-template-columns: 120px minmax(0, 1fr); }
.akta-sekcja table.t th { background: transparent; border-bottom-color: var(--teczka); }
.akta-sekcja table.t td { border-bottom-color: #e8e0cc; }
.akta-sekcja code { background: #efe9da; padding: 0 3px; border-radius: 2px; }
.akta-sekcja .szczegol { background: var(--panel); border: 1px solid var(--teczka); border-radius: var(--r); padding: 10px 12px; }
.akta-cialo .odsylacz { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--teczka); }
.akta-sekcja .odsylacz, .akta-cialo .odsylacz { font: 500 10.5px var(--mono); color: #7a6b45; }
.slupek { display: grid; grid-template-columns: 110px minmax(0, 1fr) 44px; gap: 8px; align-items: center; font-size: 11.5px; margin-bottom: 5px; }
.slupek .pasek { height: 7px; background: #ece5d3; border-radius: 4px; overflow: hidden; }
.slupek .pasek i { display: block; height: 100%; background: var(--petrol); }
.slupek .ile { font: 500 10.5px var(--mono); text-align: right; color: var(--grafit); }
.otwiera { cursor: pointer; }
.otwiera:hover { outline: 2px solid var(--teczka-ciemna); outline-offset: 1px; }

/* dostępność i wąskie ekrany */
:focus-visible { outline: 2px solid var(--sygnal-jaskrawy); outline-offset: 2px; }
#szyna a:focus-visible { outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 1280px) {
    body.akta-otwarte #tresc { margin-right: 0; }
}
@media (max-width: 860px) {
    :root { --szyna: 0px; --akta: 100vw; }
    #szyna { position: static; width: auto; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 4px; padding: 8px; align-items: center; }
    #szyna .firma, #szyna h4, #szyna .podgrupa { font: 500 10px/1 var(--sans); color: #6f8486; margin: 8px 8px 3px 23px; letter-spacing: 0.02em; }
#szyna .dol { display: none; }
    #szyna .znak { padding: 0 8px 0 4px; }
    #szyna a { white-space: nowrap; }
    .glowa { flex-direction: column; padding: 16px 16px 12px; }
    .glowa .akcje { margin-left: 0; justify-content: flex-start; }
    .cialo { padding: 14px 16px 40px; }
    .zakladki { padding: 0 16px; }
    .liczniki { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .s2, .s3, .s4, .zespoly.linia, .zespoly.wsparcie, .kroki-kreatora { grid-template-columns: minmax(0, 1fr); }
    svg.obieg { display: none; }
    #uchwyt { top: auto; bottom: 90px; }
    body.akta-otwarte #uchwyt { display: none; }
}
body.akta-otwarte .zespoly.linia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.akta-otwarte .s-boczna { grid-template-columns: minmax(0, 1fr); }
body.akta-otwarte .liczniki { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ── platforma (dodatki do makiety) ───────────────────────────────────────────────────── */
.pusto { padding: 18px; text-align: center; color: var(--grafit-lekki); border: 1px dashed var(--nit); border-radius: var(--r-duze); background: var(--panel); }
.blad { background: var(--poprawka-mgla); border: 1px solid #efc4bf; color: var(--poprawka); padding: 10px 12px; border-radius: var(--r); margin-bottom: 12px; }
.pole { margin-bottom: 10px; }
.pole > label { display: block; font: 600 9px/1.3 var(--sans); text-transform: uppercase; letter-spacing: 0.1em; color: var(--grafit-lekki); margin-bottom: 3px; }
.pole .opis { font-size: 11px; color: var(--grafit-lekki); margin-top: 2px; }
input[type="number"], input[type="password"] { font: inherit; font-size: 12.5px; border: 1px solid var(--nit); border-radius: var(--r); padding: 6px 8px; width: 100%; background: #fff; color: var(--atrament); }
textarea.kod { font: 11.5px/1.5 var(--mono); min-height: 360px; white-space: pre; }
.wynik-sql { max-height: 480px; overflow: auto; border: 1px solid var(--nit-lekki); border-radius: var(--r); }
.wynik-sql table.t td { font: 11px var(--mono); white-space: nowrap; max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
.dane dl.pola { grid-template-columns: 140px minmax(0, 1fr); }
.dane .lista-w { margin: 0; padding-left: 16px; }
.zdarzenie { display: grid; grid-template-columns: 76px 150px minmax(0, 1fr); gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--nit-lekki); font-size: 12px; align-items: baseline; }
.zdarzenie:last-child { border-bottom: 0; }
.zdarzenie .czas { font: 500 10.5px var(--mono); color: var(--grafit-lekki); }
.zdarzenie .ev { font: 500 10.5px var(--mono); }
.zdarzenie .ev.ok { color: var(--zdane); }
.zdarzenie .ev.zle { color: var(--poprawka); }
.zdarzenie .ev.syg { color: var(--sygnal); }
.zdarzenie .kto { color: var(--grafit-lekki); font-size: 11px; }
.gwiazdki { display: inline-flex; gap: 2px; }
.gwiazdki button { border: 1px solid var(--nit); background: var(--panel); border-radius: var(--r); width: 28px; height: 26px; font-size: 13px; color: var(--grafit); }
.gwiazdki button.wyb { background: var(--sygnal); border-color: var(--sygnal); color: #fff; }
.przelacznik { display: inline-flex; border: 1px solid #23383c; border-radius: var(--r); overflow: hidden; margin: 0 8px; }
.przelacznik button { background: transparent; color: var(--szyna-tekst); border: 0; padding: 3px 8px; font-size: 10.5px; }
.przelacznik button.akt { background: #1f3a3e; color: #fff; }
#szyna .stan { margin: 0 4px 10px; padding: 8px; border-radius: var(--r); font-size: 11.5px; background: #172a2e; }
#szyna .stan b { color: #fff; }
.stan-firmy { display: inline-flex; gap: 6px; align-items: center; }
.kropka-stan { width: 9px; height: 9px; border-radius: 50%; background: var(--zdane); display: inline-block; }
.kropka-stan.pauza { background: var(--sygnal-jaskrawy); animation: puls 1.6s infinite; }
.kropka-stan.stoi { background: var(--poprawka); }
.zesp .liczby .pracuje b { color: var(--pracuje); }
.zesp .model { font: 500 9.5px var(--mono); color: var(--grafit-lekki); }
.akta-sekcja pre, .prompt { white-space: pre-wrap; word-break: break-word; }
.wiersz-akcji { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.kosz { font: 500 10.5px var(--mono); color: var(--grafit); }
/* ── Zarząd, dokumenty, powiadomienia, połączenie CEO, struktura ───────────────────────── */
.toast.link { pointer-events: auto; cursor: pointer; }
.toast.link::after { content: " →"; color: var(--sygnal-jaskrawy); }
#szyna .dzwonek { font-size: 8px; color: #6f8486; width: 9px; text-align: center; }
#szyna a.akt .dzwonek { color: var(--sygnal-jaskrawy); }
.rozmowa { max-height: 62vh; overflow-y: auto; padding: 4px 2px 10px; border-bottom: 1px solid var(--nit-lekki); }
.wiad.ceo { border-left: 3px solid var(--petrol); }
.wiad.agent { border-left: 3px solid var(--pracuje); background: var(--pracuje-mgla); }
.wiad .dok-goly > :last-child { margin-bottom: 0; }
.wiad .dok-goly p { margin: 0 0 6px; }
.polecenie { display: flex; align-items: center; gap: 8px; background: var(--panel-cien); border: 1px solid var(--nit-lekki); border-radius: var(--r); padding: 6px 8px; margin: 6px 0; }
.polecenie code { flex: 1; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11.5px; }
.krok-polacz h2 { display: flex; align-items: center; gap: 8px; }
.krok-polacz .nr { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 11px var(--mono); background: var(--petrol); color: #fff; flex: none; }
.krok-polacz .wiersz input { max-width: 220px; }
.powiad { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 8px 4px; border-bottom: 1px solid var(--nit-lekki); color: inherit; }
.powiad:last-child { border-bottom: 0; }
.powiad:hover { background: var(--panel-cien); text-decoration: none; }
.powiad .chip { justify-self: start; }
.powiad.nowe { background: var(--sygnal-mgla); }
.powiad.nowe .tresc b::before { content: "● "; color: var(--sygnal); }
.uwagi { margin: 6px 0 0; font-size: 12px; }
.uwagi li.zle { color: var(--poprawka); }
.lista-zmian { padding-left: 18px; font-size: 12px; }
.lista-zmian li { margin-bottom: 3px; }
.lista-zmian a { color: var(--poprawka); }
.przyklejone { position: sticky; top: 12px; align-self: start; max-height: calc(100vh - 24px); overflow-y: auto; }
table.t.edycja td { vertical-align: top; }
table.t.edycja input, table.t.edycja select { font-size: 12px; padding: 4px 6px; min-width: 0; }
table.t.edycja tr.nowy td { background: var(--panel-cien); }
table.t.edycja tr.nowy input + input { margin-top: 4px; }
.wybor { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; margin-right: 10px; }
details.dodaj.karta > summary { font: 600 13.5px var(--display); cursor: pointer; }
.kroki-wynik { list-style: none; margin: 10px 0 0; padding: 0; font-size: 13px; }
.kroki-wynik li { padding: 3px 0; }
.kroki-wynik li.ok { color: var(--zdane); }
.kroki-wynik li.zle { color: var(--poprawka); }
details.karta > summary { cursor: pointer; font-weight: 600; }