/* ==========================================================================
   Asystent KZM - system projektowy
   Aplikacja jest gęsta od danych (tabele, listy dokumentów, kreator), więc
   priorytetem jest czytelność i kompaktowość, nie ozdobniki.
   ========================================================================== */

:root {
    --brand: #1f4e79;
    --brand-dark: #16395a;
    --brand-light: #e8f0f7;
    --accent: #0b7285;

    --ok: #1f7a3d;
    --ok-bg: #e7f5ec;
    --warn: #9a6700;
    --warn-bg: #fff6e0;
    --danger: #a4262c;
    --danger-bg: #fdeaea;
    --info-bg: #eaf2fa;

    --ink: #1c1f23;
    --ink-2: #414852;
    --muted: #6b7480;
    --line: #dfe3e8;
    --line-soft: #eef1f4;
    --bg: #f4f6f8;
    --surface: #ffffff;

    --radius: 6px;
    --radius-sm: 4px;
    --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
    --shadow-lg: 0 4px 12px rgba(16, 24, 40, .12);

    /* Czcionki własne (docs/16, wrzesień 2026): Source Sans 3 do treści, Manrope do nagłówków
       i dużych liczb; pliki w wwwroot/fonts (css/fonts.css), bez zależności od zewnętrznych serwerów. */
    --font: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --disp: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

/* Atrybut `hidden` MUSI wygrywać z klasą ustawiającą `display`.
   Reguła [hidden]{display:none} pochodzi z arkusza przeglądarki, więc przegrywa
   z autorskim `.btn{display:inline-flex}` czy `.filebar{display:flex}` - element
   oznaczony jako ukryty i tak się pokazywał. Stąd rosły w tym pliku punktowe
   wyjątki (.acct-menu[hidden], .ctxmenu[hidden], .modal-backdrop[hidden],
   .modal-busy[hidden]); ta jedna reguła zastępuje je wszystkie i zamyka temat
   dla każdego przyszłego komponentu. */
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 12px; font-weight: 600; line-height: 1.3; color: var(--ink); }
h1, h2 { font-family: var(--disp); letter-spacing: -.01em; }
h1 { font-size: 22px; font-weight: 700; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
p { margin: 0 0 12px; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- Układ */

.topbar {
    background: var(--brand);
    color: #fff;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 24px;
    height: 52px;
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 40;
}

.topbar .logo { font-weight: 700; font-size: 16px; color: #fff; display: flex; align-items: center; gap: 9px; }
.topbar .logo:hover { text-decoration: none; }
.topbar .logo small { font-weight: 400; font-size: 12px; color: #b8d0e6; }

/* ---------------------------------------------------------------- Znak marki
   Pieczęć kontraktowa ze strony asystentkontraktu.pl. Znak ma własne, ciemne tło,
   więc na granatowym pasku potrzebuje delikatnego obrysu - inaczej zlewa się
   z nagłówkiem i widać z niego tylko bursztynową ramkę. */

.marka-znak { width: 30px; height: 30px; flex: none; border-radius: 7px; display: block; }
.marka-tekst { letter-spacing: -.02em; white-space: nowrap; }
.marka-tekst .lzejsze { font-weight: 400; }

.topbar .marka-znak { outline: 1px solid rgba(255, 255, 255, .16); }
.topbar .marka-tekst .lzejsze { color: #c3d7ea; }

.topbar nav { display: flex; gap: 4px; margin-left: 12px; flex: 1; }
.topbar nav a {
    color: #d6e5f2; padding: 7px 12px; border-radius: var(--radius-sm);
    font-size: 13.5px; white-space: nowrap;
}
.topbar nav a:hover { background: rgba(255, 255, 255, .12); color: #fff; text-decoration: none; }
.topbar nav a.active { background: rgba(255, 255, 255, .18); color: #fff; font-weight: 500; }

/* ------------------------------------------------- Menu konta (prawy róg paska)
   Nazwy firm z KRS-u bywają bardzo długie, więc pasek nie może rosnąć razem z nimi -
   inaczej wyjście z panelu ucieka poza krawędź okna. Nazwa jest przycinana, a wszystko,
   co użytkownik robi ze swoim kontem, siedzi pod awatarem z inicjałami. */

.topbar .user { position: relative; display: flex; align-items: center; min-width: 0; }

.acct {
    display: flex; align-items: center; gap: 9px;
    max-width: 260px; min-width: 0;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    padding: 4px 12px 4px 4px;
    color: #fff; font-family: inherit; font-size: 13px; cursor: pointer;
    transition: background .12s;
}
.acct:hover { background: rgba(255, 255, 255, .18); }
.acct[aria-expanded="true"] { background: rgba(255, 255, 255, .22); }
.acct:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.acct .ini {
    width: 28px; height: 28px; flex: none; border-radius: 50%;
    background: #e8871a; color: #16395a;
    display: flex; align-items: center; justify-content: center;
    font-size: 11.5px; font-weight: 800; letter-spacing: .02em;
}
.acct .who { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.acct .nm { color: #fff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct .co { color: #c3d7ea; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct .car { color: #c3d7ea; font-size: 10px; flex: none; }

/* Na wąskim ekranie zostaje sam awatar - nazwa i tak byłaby przycięta do dwóch liter. */
@media (max-width: 720px) {
    .acct { max-width: none; padding: 4px; }
    .acct .who, .acct .car { display: none; }
}

.acct-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
    min-width: 244px; padding: 5px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.acct-menu[hidden] { display: none; }
.acct-menu .head {
    padding: 9px 11px 11px; margin-bottom: 4px;
    border-bottom: 1px solid var(--line-soft);
    display: flex; flex-direction: column; gap: 2px;
}
.acct-menu .head strong { color: var(--ink); font-size: 13.5px; }
.acct-menu .head span { color: var(--muted); font-size: 12px; word-break: break-word; }

.acct-menu a,
.acct-menu button {
    display: block; width: 100%; text-align: left;
    padding: 8px 11px; border: none; background: none; border-radius: var(--radius-sm);
    font-family: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer;
}
.acct-menu a:hover { background: var(--brand-light); text-decoration: none; color: var(--brand-dark); }
.acct-menu button:hover { background: var(--danger-bg); }
.acct-menu button.danger { color: var(--danger); font-weight: 600; }

.page { max-width: 1280px; margin: 0 auto; padding: 22px 20px 60px; }
.page-wide { max-width: 1600px; }
/* Strona w siatce kafelków bierze całą szerokość: „.page” ma margin auto, a w kolumnie flexa
   taki margines wyłącza rozciąganie i zwęża stronę do szerokości treści. */
.page-fill { width: 100%; }
.page-narrow { max-width: 520px; margin: 48px auto; padding: 0 20px 60px; }

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head .sub { color: var(--muted); font-size: 13px; margin-top: -6px; }

/* ---------------------------------------------------------------- Karty */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 16px;
}
.card > header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-soft);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap;
}
.card > header h2, .card > header h3 { margin: 0; }
.card > .body { padding: 16px; }
.card > .body.tight { padding: 0; }

/* Stopka karty była używana na kilku stronach (Kontrakty, Karta, Pliki, Poczta), ale nie
   miała reguły - przycisk siadał wtedy na krawędzi karty i wyglądał, jakby z niej wypadł. */
.card > footer {
    padding: 12px 16px;
    border-top: 1px solid var(--line-soft);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ---------------------------------------------------------------- Formularze */

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }
.field .hint { font-size: 12px; color: var(--muted); margin-top: 4px; }

input:not([type]), input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=tel], input[type=url],
input[type=search], select, textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    background: #fff;
    transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(31, 78, 121, .12);
}
input:disabled, select:disabled, textarea:disabled { background: var(--line-soft); color: var(--muted); }
textarea { resize: vertical; min-height: 80px; }

.check { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; font-size: 13.5px; }
.check input { width: auto; margin-top: 2px; }

.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Sekcja długiego formularza ustawień (np. okno „Ustawienia harmonogramu”): nagłówek, pola w siatce, która sama
   dzieli się na kolumny - ukryte pole nie zostawia dziury. */
.set-sec { border-top: 1px solid var(--line-soft); padding-top: 14px; margin-top: 4px; margin-bottom: 8px; }
.set-sec > h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 10px; }
.set-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
.set-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.set-grid > [hidden] { display: none; }
.set-sec .hint { font-size: 12px; color: var(--muted); }
@media (max-width: 640px) { .set-grid, .set-grid.two { grid-template-columns: 1fr; } }
.row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 640px) { .row-2, .row-3 { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Przyciski */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: inherit; font-size: 13.5px; font-weight: 500;
    cursor: pointer;
    background: var(--brand); color: #fff;
    transition: background .12s, border-color .12s;
    white-space: nowrap;
}
.btn:hover { background: var(--brand-dark); text-decoration: none; color: #fff; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.secondary { background: #fff; color: var(--ink-2); border-color: var(--line); }
.btn.secondary:hover { background: var(--line-soft); color: var(--ink); }
.btn.danger { background: var(--danger); }
.btn.danger:hover { background: #861f24; }
.btn.ghost { background: transparent; color: var(--brand); }
.btn.ghost:hover { background: var(--brand-light); }
.btn.sm { padding: 5px 10px; font-size: 12.5px; }
.btn.block { width: 100%; }

.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------------------------------------------------------------- Tabele */

table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th {
    text-align: left; font-weight: 600; font-size: 12px; text-transform: uppercase;
    letter-spacing: .03em; color: var(--muted);
    padding: 9px 12px; border-bottom: 1px solid var(--line); background: #fafbfc;
    white-space: nowrap;
}
table.data td { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: #fafbfc; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data td.actions { text-align: right; white-space: nowrap; }

.table-scroll { overflow-x: auto; }

.empty { padding: 28px 16px; text-align: center; color: var(--muted); font-size: 13.5px; }

/* ---------------------------------------------------------------- Etykiety i komunikaty */

.badge {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
    background: var(--line-soft); color: var(--ink-2); white-space: nowrap;
}
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.danger { background: var(--danger-bg); color: var(--danger); }
.badge.info { background: var(--info-bg); color: var(--brand); }

.alert {
    padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13.5px;
    border: 1px solid transparent; margin-bottom: 14px;
}
.alert.error { background: var(--danger-bg); border-color: #f2c9cb; color: var(--danger); }
.alert.ok { background: var(--ok-bg); border-color: #bfe3cc; color: var(--ok); }
.alert.warn { background: var(--warn-bg); border-color: #f0dca6; color: var(--warn); }
.alert.info { background: var(--info-bg); border-color: #c6dcf0; color: var(--brand-dark); }
.alert:empty { display: none; }

.code {
    font-family: var(--mono); font-size: 15px; letter-spacing: 2px; font-weight: 600;
    background: var(--brand-light); color: var(--brand-dark);
    padding: 3px 10px; border-radius: var(--radius-sm);
}

/* Adres skrzynki: czcionka jak w kodzie, ale BEZ rozstrzelenia liter - „.code” jest
   zrobione pod sześciocyfrowy kod potwierdzenia, a adres e-mail rozjeżdżał się przy nim
   na całą szerokość karty i przestawał wyglądać na adres. */
.mailbox {
    display: inline-block;
    font-family: var(--mono); font-size: 15px; font-weight: 600;
    background: var(--brand-light); color: var(--brand-dark);
    padding: 7px 12px; border-radius: var(--radius-sm);
    user-select: all; word-break: break-all;
}
.mailbox-old { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }

.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; } .mt-2 { margin-top: 16px; } .mb-0 { margin-bottom: 0; }

/* ---------------------------------------------------------------- Kafelki pulpitu */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 20px; }
.tile {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 16px; box-shadow: var(--shadow); display: block; color: inherit;
}
.tile:hover { text-decoration: none; border-color: var(--brand); box-shadow: var(--shadow-lg); }
.tile .n { font-size: 26px; font-weight: 700; color: var(--brand); line-height: 1.1; }
.tile .t { font-size: 12.5px; color: var(--muted); margin-top: 4px; }

/* ---------------------------------------------------------------- Kafelki modułów
   Strona główna panelu. W odróżnieniu od `.tiles` (liczniki na pulpicie KZM) to jest
   nawigacja: kafelek ma nieść tyle treści, żeby dało się wybrać moduł bez wchodzenia
   do niego, i pokazywać wprost, gdy jest zamknięty. */

.panel-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
.panel-head h1 { margin: 0 0 2px; font-size: 24px; letter-spacing: -.01em; }
.panel-head .sub { color: var(--muted); font-size: 13.5px; }

/* Przełącznik kontraktu. Przy jednym kontrakcie zostaje sama nazwa - lista rozwijana
   z jedną pozycją tylko sugerowałaby, że użytkownik czegoś nie widzi. */
.ctx {
    display: flex; align-items: center; gap: 10px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 8px 12px; box-shadow: var(--shadow);
}
.ctx label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.ctx select { width: auto; min-width: 200px; border: none; padding: 2px 4px; font-weight: 600; }
.ctx select:focus { box-shadow: none; }
.ctx .fixed { font-weight: 600; font-size: 14px; }

.mtiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 16px; }

.mtile {
    position: relative;
    display: flex; flex-direction: column; gap: 10px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
    padding: 20px; color: inherit; min-height: 178px;
    box-shadow: var(--shadow);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
a.mtile:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--brand); }
a.mtile:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Pasek akcentu u góry kafelka - jedyny element odróżniający moduły kolorem, więc
   nie niesie sam z siebie znaczenia, którego nie ma też w tekście. */
.mtile::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
    border-radius: 10px 10px 0 0; background: var(--tile-accent, var(--brand));
}

.mtile .ico {
    width: 42px; height: 42px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: var(--tile-soft, var(--brand-light)); color: var(--tile-accent, var(--brand));
    flex: none;
}
.mtile .ico svg { width: 22px; height: 22px; }

.mtile h2 { margin: 0; font-size: 15.5px; }
.mtile p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; flex: 1; }

.mtile .stat {
    font-size: 12px; color: var(--ink-2); font-weight: 600;
    border-top: 1px solid var(--line-soft); padding-top: 10px;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.mtile .stat .go { color: var(--tile-accent, var(--brand)); font-weight: 700; }

.mtile.locked { background: #fbfcfd; border-style: dashed; box-shadow: none; }
.mtile.locked::before { background: var(--line); }
.mtile.locked .ico { background: var(--line-soft); color: var(--muted); }
.mtile.locked h2 { color: var(--ink-2); }
.mtile.locked p { color: #98a2ae; }
.mtile.locked .stat { color: var(--warn); }

.mtile .lock { position: absolute; top: 16px; right: 16px; color: var(--muted); }
.mtile .lock svg { width: 16px; height: 16px; display: block; }

/* ---------------------------------------------------------------- Eksplorator plików */

.explorer { display: grid; grid-template-columns: 288px 1fr 230px; gap: 16px; align-items: start; }
@media (max-width: 1100px) {
    .explorer { grid-template-columns: 288px 1fr; }
    .explorer .side-tiles { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
    .explorer .side-tile { min-width: 240px; flex: 1; }
}
@media (max-width: 900px) { .explorer { grid-template-columns: 1fr; } }

.explorer .pane {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.explorer .pane > header {
    padding: 10px 12px; border-bottom: 1px solid var(--line-soft);
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.explorer .pane > header h2 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

.tree { padding: 6px; max-height: calc(100vh - 220px); overflow: auto; }
.tree .row {
    display: flex; align-items: center; gap: 4px;
    padding: 5px 6px; border-radius: var(--radius-sm); cursor: pointer;
    font-size: 13.5px; color: var(--ink-2); white-space: nowrap;
}
.tree .row:hover { background: var(--line-soft); }
.tree .row.on { background: var(--brand-light); color: var(--brand-dark); font-weight: 600; }
.tree .row.drop { background: #cfe1fa; box-shadow: inset 0 0 0 2px var(--brand); }
.tree .row .twist {
    width: 16px; flex: none; text-align: center; color: var(--muted);
    font-size: 10px; line-height: 1; user-select: none;
}
.tree .row .twist.leaf { visibility: hidden; }
.tree .row .nm { overflow: hidden; text-overflow: ellipsis; flex: 1; }
.tree .row .cnt { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tree .kids.hidden { display: none; }

/* Kierunek dokumentu: ↑ do zleceniodawcy, ↓ do podwykonawców. Strzałka niesie ten sam
   komunikat co tytuł (title=), więc nie jest jedynym nośnikiem informacji. */
.dir { font-size: 11px; font-weight: 700; flex: none; line-height: 1; }
.dir.up { color: #0b6b8a; }
.dir.down { color: #8a5a0b; }
.dir.none { display: none; }

.dirfilter { display: flex; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); }
.dirfilter button {
    flex: 1; background: none; border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 4px 6px; font-family: inherit; font-size: 11.5px; color: var(--muted); cursor: pointer;
}
.dirfilter button:hover { border-color: var(--brand); color: var(--brand); }
.dirfilter button.on { background: var(--brand-light); border-color: var(--brand); color: var(--brand-dark); font-weight: 600; }

.crumbs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 13.5px; }
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--brand); }
.crumbs .sep { color: var(--muted); }
.crumbs .now { font-weight: 600; }

.filebar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
.filebar .grow { flex: 1; }
.filebar input[type=search] { max-width: 260px; }

/* Obszar listy jest jednocześnie strefą upuszczania - użytkownik przeciąga plik tam,
   gdzie go widzi, a nie w wydzielony prostokąt gdzieś obok. */
.filearea { position: relative; min-height: 320px; }
.filearea.over::after {
    content: "Upuść pliki, żeby wgrać je do tego katalogu";
    position: absolute; inset: 8px; z-index: 3;
    border: 2px dashed var(--brand); border-radius: var(--radius);
    background: rgba(207, 225, 250, .92); color: var(--brand-dark);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 600; pointer-events: none;
}

table.files { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.files th {
    text-align: left; font-weight: 600; font-size: 11.5px; text-transform: uppercase;
    letter-spacing: .03em; color: var(--muted); padding: 8px 12px;
    border-bottom: 1px solid var(--line); background: #fafbfc; white-space: nowrap; cursor: pointer;
}
table.files th .ord { color: var(--brand); }
table.files td { padding: 7px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
table.files tr:hover td { background: #fafbfc; }
table.files tr.sel td { background: var(--brand-light); }
table.files td.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
table.files .nm { display: flex; align-items: center; gap: 8px; }
table.files .nm .ft {
    width: 26px; height: 26px; border-radius: 5px; flex: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 800; letter-spacing: -.02em;
    background: var(--line-soft); color: var(--ink-2); text-transform: uppercase;
}
table.files .nm .ft.pdf { background: var(--danger-bg); color: var(--danger); }
table.files .nm .ft.doc { background: var(--info-bg); color: var(--brand); }
table.files .nm .ft.xls { background: var(--ok-bg); color: var(--ok); }
table.files .nm .ft.img { background: #f3ecfb; color: #6b3fa0; }
table.files .nm .ft.dir { background: var(--warn-bg); color: var(--warn); }
table.files .where { font-size: 11.5px; color: var(--muted); }

.ctxmenu {
    position: fixed; z-index: 80; min-width: 190px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); padding: 4px;
}
.ctxmenu[hidden] { display: none; }
.ctxmenu button {
    display: block; width: 100%; text-align: left; background: none; border: none;
    padding: 7px 10px; border-radius: var(--radius-sm);
    font-family: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer;
}
.ctxmenu button:hover { background: var(--brand-light); }
.ctxmenu button.danger { color: var(--danger); }
.ctxmenu button.danger:hover { background: var(--danger-bg); }
.ctxmenu hr { border: none; border-top: 1px solid var(--line-soft); margin: 4px 0; }

/* Kolumna zaznaczania i akcje wiersza */
table.files td.chk, table.files th.chk { width: 34px; text-align: center; padding-left: 10px; padding-right: 4px; }
table.files .chk input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--brand); }
table.files td.rowact { text-align: right; white-space: nowrap; }
table.files td.rowact .btn { visibility: hidden; }
table.files tr:hover td.rowact .btn, table.files tr.sel td.rowact .btn { visibility: visible; }

/* Plakietka statusu analizy */
.astat {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 600; white-space: nowrap;
    padding: 2px 8px; border-radius: 10px;
    background: var(--line-soft); color: var(--ink-2);
}
.astat.done { background: var(--ok-bg); color: var(--ok); cursor: pointer; }
.astat.done:hover { box-shadow: inset 0 0 0 1px var(--ok); }
.astat.busy { background: var(--info-bg); color: var(--brand); }
.astat.warn { background: var(--warn-bg); color: var(--warn); }
.astat.fail { background: var(--danger-bg); color: var(--danger); cursor: pointer; }

/* ---------------------------------------------------------------- Podgląd pliku
   Dokument czyta się na całym ekranie, nie w okienku: modal otwiera się na ~95%
   szerokości i wysokości, a uchwyt w prawym dolnym rogu pozwala zmienić rozmiar
   (zapamiętywany między otwarciami). */

#previewModal { padding: 2vh 2vw; align-items: center; }
.modal.preview-modal {
    max-width: none;
    width: 96vw; height: 94vh;
    min-width: 520px; min-height: 400px;
    max-height: 96vh;
    display: flex; flex-direction: column;
    resize: both; overflow: hidden;
}
.modal.preview-modal > header { flex: none; }
.modal.preview-modal > .body { flex: 1; min-height: 0; display: flex; padding: 10px; }
.preview-body { flex: 1; min-height: 0; background: var(--line-soft); border-radius: var(--radius-sm); overflow: hidden; }
.preview-body iframe { width: 100%; height: 100%; border: none; background: #525659; }
.preview-body img { max-width: 100%; max-height: 100%; display: block; margin: 0 auto; object-fit: contain; }
.preview-body pre {
    margin: 0; padding: 16px; height: 100%; overflow: auto;
    font-family: var(--mono); font-size: 12.5px; line-height: 1.55;
    white-space: pre-wrap; background: var(--surface);
}
.preview-body .noview {
    height: 100%; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 12px; color: var(--muted); font-size: 13.5px;
}

/* ---------------------------------------------------------------- Analiza pliku */

.ana-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 16px; margin-bottom: 14px; }
.ana-grid .f label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 2px; }
.ana-grid .f div { font-size: 13.5px; }
.ana-summary { background: var(--line-soft); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13.5px; line-height: 1.55; margin-bottom: 14px; }

.issue-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.issue-chip {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface); color: var(--ink);
    padding: 4px 12px; font-size: 12.5px; font-weight: 600;
    cursor: pointer; font-family: inherit;
}
.issue-chip:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-light); }
.issue-chip .cnt { font-weight: 400; color: var(--muted); font-size: 11px; }

/* Znacznik strony: z kim toczy się sprawa. Kolor niesie kierunek (w górę do
   zleceniodawcy / w dół do podwykonawcy), tekst zawsze nazwę firmy. */
.party {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 9px;
    background: var(--line-soft); color: var(--ink-2); white-space: nowrap;
}
.party.up { background: #e0f1f4; color: #0b6b8a; }
.party.down { background: #fff6e0; color: #8a5a0b; }

/* ---------------------------------------------------------------- Oś czasu zagadnienia */

.issues-layout { display: grid; grid-template-columns: 380px 1fr; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .issues-layout { grid-template-columns: 1fr; } }

/* --- Drzewo tematów ustaleń -------------------------------------------------
   Wiersz jest przyciskiem, nie diwem: wybór tematu to nawigacja klawiaturą tak
   samo jak myszą, a lista bywa długa. Wcięcie poziomu ustawia strona inline,
   bo zależy od głębokości węzła. */
.topic-row { display: flex; width: 100%; align-items: center; gap: 8px; text-align: left;
    padding: 9px 12px; border: none; border-bottom: 1px solid var(--line-soft);
    background: none; cursor: pointer; font: inherit; }
.topic-row:last-child { border-bottom: none; }
.topic-row:hover { background: #fafbfc; }
.topic-row.on { background: var(--brand-light); }
.topic-row .name { flex: 1; font-size: 13.5px; font-weight: 600; }
.topic-row .badge.quiet { opacity: .45; font-weight: 400; }

.finding { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.finding:last-child { border-bottom: none; }
.finding .meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
    font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
.finding .meta .path { font-weight: 600; color: var(--brand); }
.finding .note { font-size: 14px; line-height: 1.5; }
.finding blockquote { margin: 6px 0 4px; padding-left: 10px; border-left: 3px solid var(--line);
    color: var(--muted); font-size: 12.5px; font-style: italic; }

.issue-row { padding: 10px 14px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.issue-row:last-child { border-bottom: none; }
.issue-row:hover { background: #fafbfc; }
.issue-row.on { background: var(--brand-light); }
.issue-row .nm { font-weight: 600; font-size: 13.5px; }
.issue-row .meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.timeline { position: relative; padding-left: 26px; }
.timeline::before {
    content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px;
    width: 2px; background: var(--line);
}
.tl-entry { position: relative; padding: 0 0 18px 8px; }
.tl-entry::before {
    content: ""; position: absolute; left: -22px; top: 5px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--surface); border: 2px solid var(--brand);
}
.tl-entry.approx::before { border-color: var(--muted); }
.tl-entry .when { font-size: 12px; font-weight: 700; color: var(--brand-dark); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tl-entry .when .kind { font-weight: 400; color: var(--muted); }
.tl-entry .note { font-size: 13.5px; margin: 3px 0; }
.tl-entry .quote {
    font-size: 12.5px; color: var(--ink-2); font-style: italic;
    border-left: 3px solid var(--line); padding: 2px 10px; margin: 6px 0;
    background: #fafbfc; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.tl-entry .src { font-size: 12px; color: var(--muted); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tl-entry .src a { cursor: pointer; }

.uploads { padding: 10px 12px; border-top: 1px solid var(--line-soft); font-size: 12.5px; }
.uploads .u { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.uploads .u .bar { flex: 1; height: 4px; border-radius: 2px; background: var(--line-soft); overflow: hidden; }
.uploads .u .bar i { display: block; height: 100%; background: var(--brand); width: 0; transition: width .2s; }

/* ---------------------------------------------------------------- Umowa kontraktu */

.agr-sec { margin-bottom: 18px; }
.agr-sec h3 { margin-bottom: 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

/* Drzewo analizy: kategoria → podgałąź (typ) → ustalenia z paragrafami */
.tree-cat { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; background: var(--surface); }
.tree-cat > summary {
    padding: 10px 14px; font-weight: 700; font-size: 14px; cursor: pointer;
    display: flex; align-items: center; gap: 8px; list-style: none;
}
.tree-cat > summary::before { content: '▸'; color: var(--muted); transition: transform .15s; }
.tree-cat[open] > summary::before { transform: rotate(90deg); }
.tree-grp { margin: 0 10px 8px 26px; border-left: 2px solid var(--line-soft); }
.tree-grp > summary {
    padding: 6px 10px; font-weight: 600; font-size: 13px; cursor: pointer;
    display: flex; align-items: center; gap: 8px; list-style: none; color: var(--ink-2);
}
.tree-grp > summary::before { content: '▸'; color: var(--muted); font-size: 11px; transition: transform .15s; }
.tree-grp[open] > summary::before { transform: rotate(90deg); }
.tree-count {
    font-size: 11px; font-weight: 600; color: var(--muted);
    background: var(--bg); border: 1px solid var(--line-soft); border-radius: 999px; padding: 1px 8px;
}
.tree-facts { padding: 2px 12px 8px 22px; }
.tree-cat > .tree-facts { padding-left: 34px; }
.tree-fact {
    display: grid; grid-template-columns: minmax(180px, 38%) 1fr auto;
    gap: 10px; align-items: baseline;
    padding: 5px 6px; border-bottom: 1px dashed var(--line-soft); font-size: 13px;
    cursor: pointer; border-radius: 6px;
}
.tree-fact:hover { background: var(--bg); }
.tree-fact:last-child { border-bottom: none; }
.tf-label { font-weight: 600; }
.tf-val { color: var(--ink-2); }
.tf-ref { white-space: nowrap; font-weight: 600; color: var(--accent); }
@media (max-width: 720px) { .tree-fact { grid-template-columns: 1fr; gap: 2px; } }

/* ---------------------------------------------------------------- Standard stron plikowych
   Z lewej okno pliku (zakładki: analiza / podgląd), z prawej przypięty do krawędzi CZAT
   związany z plikiem. Klasy ogólne - kolejne typy plików dostają ten sam układ. */
.split-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 30%);
    gap: 16px;
    align-items: start;
}
.split-side { position: sticky; top: 64px; }

.tabstrip { display: flex; gap: 2px; border-bottom: 2px solid var(--line); margin-bottom: 14px; }
.tabstrip .tab {
    appearance: none; background: none; border: none; cursor: pointer;
    padding: 10px 18px; font-size: 14px; font-weight: 600; color: var(--muted);
    border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.tabstrip .tab:hover { color: var(--ink); }
.tabstrip .tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Załączniki: PIONOWA nawigacja z grupami zamiast poziomego paska kart. Trzynastu
   tytułów poziomy pasek nie mieści - chowały się za krawędzią i trzeba było
   przewijać w ciemno. Pionowo tytuł ma miejsce, żeby się zawinąć w całości. */
.att-layout {
    display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 18px; align-items: start;
}
.att-nav {
    display: flex; flex-direction: column; gap: 1px;
    max-height: 64vh; overflow-y: auto; padding-right: 6px;
    border-right: 1px solid var(--line-soft);
}
.att-group {
    font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--muted); padding: 14px 10px 5px;
}
.att-group:first-child { padding-top: 0; }
.att-item {
    appearance: none; background: none; border: 0; border-left: 3px solid transparent;
    border-radius: 0 var(--radius) var(--radius) 0; cursor: pointer; width: 100%;
    text-align: left; padding: 7px 10px; display: flex; gap: 9px; align-items: flex-start;
}
.att-item:hover { background: var(--bg); }
.att-item.active { background: var(--brand-light); border-left-color: var(--accent); }
.att-num {
    flex: 0 0 auto; min-width: 24px; padding: 0 5px; border-radius: var(--radius-sm);
    background: var(--line-soft); color: var(--ink-2);
    font-size: 11px; font-weight: 700; line-height: 19px; text-align: center;
}
.att-item.active .att-num { background: var(--accent); color: #fff; }
.att-label { min-width: 0; flex: 1 1 auto; }
.att-title {
    font-size: 12.5px; font-weight: 600; color: var(--ink-2); line-height: 1.35;
    overflow-wrap: anywhere;
}
.att-item.active .att-title { color: var(--ink); }
.att-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.att-badge {
    font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 1px 7px;
    background: #e1f5ee; color: #0f6e56;
}
.att-badge.missing { background: #faece7; color: #993c1d; }
.att-badge.pending { background: var(--warn-bg); color: var(--warn); }

/* Wąski ekran: nawigacja wraca nad treść, ale zostaje listą, nie paskiem. */
@media (max-width: 980px) {
    .att-layout { grid-template-columns: 1fr; }
    .att-nav {
        border-right: 0; border-bottom: 1px solid var(--line-soft);
        max-height: 236px; padding-right: 0; padding-bottom: 8px;
    }
}

/* Skrót umowy - umowa czytana jak spis treści: oznaczenie, opis prostym językiem,
   dokładny zapis dopiero po kliknięciu. Układ trzykolumnowy, żeby oznaczenia stały
   w jednej linii pionowej i dało się wodzić po nich okiem. */
.dg-row {
    display: grid; grid-template-columns: 116px minmax(0, 1fr) auto; gap: 12px;
    align-items: baseline; padding: 8px 12px; cursor: pointer;
    border-bottom: 1px solid var(--line-soft);
}
.dg-row:hover { background: var(--bg); }
.dg-row.lvl2 { padding-left: 32px; }
.dg-row.lvl3 { padding-left: 56px; }
.dg-row.lvl4 { padding-left: 78px; }
.dg-ref { font-size: 12.5px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.dg-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dg-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.dg-text { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }

/* Treść jeszcze nie streszczona przez model - widać na pierwszy rzut oka, że to
   surowy zapis, a nie opis. Bez tego użytkownik nie wie, czy skrót jest gotowy. */
.dg-surowy { font-style: italic; color: var(--muted); }

/* Zaproszenie do kliknięcia pokazujemy dopiero pod kursorem - inaczej powtórzone
   przy każdym wierszu robi z listy szum. */
.dg-show { font-size: 11.5px; font-weight: 600; color: var(--accent); opacity: 0; white-space: nowrap; }
.dg-row:hover .dg-show { opacity: 1; }

.dg-row.dg-head { background: var(--line-soft); margin-top: 10px; }
.dg-row.dg-head:hover { background: var(--brand-light); }

@media (max-width: 720px) {
    .dg-row { grid-template-columns: 1fr; gap: 2px; }
    .dg-show { display: none; }
}

/* Punkty styku: macierz „kto za co odpowiada” czytana jak lista - sekcje z dokumentu,
   Lp. w jednej pionowej linii, branże jako chipy. Zakres użytkownika wyróżnia lewa
   belka i chip w akcencie: przy sporze pierwszy rzut oka mówi „nasze czy nie”. */
.if-trades {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    padding: 10px 0 12px; border-bottom: 1px solid var(--line-soft);
}
.if-trade {
    appearance: none; cursor: pointer; border: 1px solid var(--line);
    background: var(--surface); color: var(--ink-2); border-radius: 999px;
    padding: 4px 11px; font-size: 12px; font-weight: 600;
}
.if-trade:hover { border-color: var(--accent); }
.if-trade.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.if-toolbar {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    padding: 12px 0;
}
.if-toolbar input[type="search"] {
    flex: 1 1 220px; min-width: 180px; padding: 7px 10px; font-size: 13px;
    border: 1px solid var(--line); border-radius: var(--radius);
}
.if-filters { display: flex; gap: 2px; background: var(--bg); border-radius: 999px; padding: 3px; }
.if-filter {
    appearance: none; border: 0; background: none; cursor: pointer;
    padding: 5px 12px; font-size: 12px; font-weight: 600; color: var(--ink-2);
    border-radius: 999px; white-space: nowrap;
}
.if-filter.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

.if-section {
    position: sticky; top: 0; z-index: 1;
    background: var(--line-soft); color: var(--ink-2);
    font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
    padding: 6px 12px; border-radius: var(--radius-sm); margin: 10px 0 4px;
}
.if-row {
    display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px;
    align-items: start; padding: 8px 12px 8px 9px;
    border-bottom: 1px solid var(--line-soft); border-left: 3px solid transparent;
}
.if-row.mine { border-left-color: var(--accent); background: color-mix(in srgb, var(--brand-light) 45%, transparent); }
.if-lp { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.if-row.mine .if-lp { color: var(--accent); }
.if-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.if-desc { font-size: 13px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.if-rem { font-size: 12px; color: var(--warn); }
.if-marks { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; max-width: 260px; }
.if-chip {
    font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px;
    background: var(--line-soft); color: var(--ink-2); white-space: nowrap;
}
.if-chip.mine { background: var(--accent); color: #fff; }
.att-badge.iface { background: #e7ecf8; color: #274b8f; }

@media (max-width: 720px) {
    .if-row { grid-template-columns: 52px minmax(0, 1fr); }
    .if-marks { grid-column: 2; justify-content: flex-start; max-width: none; }
}

/* Dopytanie czatu: odpowiedź pada w całości, a to jest zaproszenie do zawężenia -
   wygląda jak delikatna sugestia, nie jak kolejna odpowiedź. */
.chat-followup {
    margin-top: 8px; padding: 8px 12px; cursor: pointer;
    background: var(--brand-light); border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 13px; color: var(--ink-2); line-height: 1.45;
}
.chat-followup::before { content: "Dopytanie · "; font-weight: 700; color: var(--accent); }
.chat-followup:hover { background: color-mix(in srgb, var(--brand-light) 70%, #fff); }

/* Źródła osi czasu: wybór, z których dokumentów biorą się terminy. Wyłączone źródło
   znika z osi i NIE wejdzie do przyszłych przypomnień - stąd notka przy pasku. */
.tl-sources {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    padding: 10px 16px; border-bottom: 1px solid var(--line-soft); background: var(--bg);
}
.tl-src-label { font-size: 12px; font-weight: 700; color: var(--ink-2); margin-right: 2px; }
.tl-src {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
    padding: 4px 11px 4px 8px; font-size: 12.5px; color: var(--ink-2); max-width: 320px;
}
.tl-src:hover { border-color: var(--accent); }
.tl-src input { margin: 0; cursor: pointer; }
.tl-src span:not(.tl-src-count) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-src.off { color: var(--muted); background: var(--line-soft); }
.tl-src.off span:not(.tl-src-count) { text-decoration: line-through; }
.tl-src-count {
    font-size: 11px; font-weight: 700; color: var(--muted);
    background: var(--line-soft); border-radius: 999px; padding: 1px 7px;
}
.tl-src.off .tl-src-count { background: var(--surface); }
.tl-src-note { font-size: 11.5px; color: var(--warn); }

/* Formularze projektu */
.form-row {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
    margin-bottom: 8px; cursor: pointer;
}
.form-row:hover { border-color: var(--accent); }
.form-row.active { border-color: var(--accent); background: var(--bg); }
.field-row { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; margin-bottom: 6px; }
.field-row input, .field-row select { font-size: 12.5px; padding: 6px 8px; }
.entries { display: flex; flex-direction: column; gap: 4px; }
.entry-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; }

.attach-files { display: flex; flex-direction: column; gap: 6px; }
.attach-file {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; cursor: pointer;
}
.attach-file:hover { border-color: var(--accent); background: var(--bg); }

.att-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.att-head h3 { font-size: 15px; margin: 0 0 2px; }
.att-h { margin: 18px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.att-clauses .agr-clause { cursor: pointer; border: 1px solid var(--line-soft); border-radius: 8px; margin-bottom: 8px; }
.att-clauses .agr-clause:hover { border-color: var(--accent); }

/* Karta czatu wypełnia wysokość okna; log rośnie, pole pytania zawsze na dole. */
.chat-card { display: flex; flex-direction: column; height: calc(100vh - 84px); }
.chat-card .chat-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.chat-input { display: flex; gap: 8px; margin-top: 10px; align-items: flex-end; }
.chat-input textarea {
    font-size: 14px; line-height: 1.45; padding: 10px 12px; min-width: 0; flex: 1;
    font-family: inherit; resize: none; overflow-y: hidden;
    /* Globalne textarea ma min-height 80px (formularze) - czat startuje od JEDNEGO wiersza. */
    min-height: 0; height: 42px;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
    color: var(--ink);
}
.chat-input textarea:focus { outline: none; border-color: var(--accent); }
/* Przycisk trzyma wysokość jednego wiersza, gdy pole urośnie. */
.chat-input .btn { flex: 0 0 auto; align-self: flex-end; }

/* Podgląd pliku w zakładce */
.file-frame { width: 100%; height: calc(100vh - 210px); border: 0; border-radius: 8px; background: #525659; }

/* Forma i ton pisma / maila: suwaki 1-10 z legendą, radio formy (Dowody → Pismo, karta pisma → Odpowiedź mailowa). */
.tone-box { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px 6px; background: #fafbfc; margin-bottom: 14px; }
.tone-box input[type=range] { width: 100%; accent-color: var(--brand); }
.tone-box .check { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0; }
.slider-legend { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: -2px; }
/* Edytor treści: pasek narzędzi + pole contenteditable. */
.rich-toolbar { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.rich-toolbar button { font-size: 12.5px; padding: 3px 9px; }
.rich-editor { min-height: 320px; max-height: 70vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius);
               padding: 14px 16px; background: #fff; font-size: 14px; line-height: 1.6; }
.rich-editor:focus { outline: 2px solid var(--brand-light); border-color: var(--brand); }
.rich-editor[contenteditable="false"] { background: var(--bg); color: var(--ink-2); }
.rich-editor h3 { font-size: 15px; margin: 14px 0 6px; }
.rich-editor p { margin: 0 0 10px; }
.rich-editor ul { margin: 0 0 10px; padding-left: 22px; }
.file-img { max-width: 100%; border-radius: 8px; }
.file-pre { white-space: pre-wrap; font-size: 13px; line-height: 1.55; max-height: calc(100vh - 210px); overflow-y: auto; }

@media (max-width: 1100px) {
    .split-layout { grid-template-columns: 1fr; }
    .split-side { position: static; }
    .chat-card { height: auto; }
    .chat-card .chat-log { flex: none; max-height: 50vh; }
}

/* ---------------------------------------------------------------- Oś czasu umowy */

.tl-phases {
    position: relative; display: flex; gap: 3px;
    height: 34px; border-radius: 10px; overflow: hidden; margin-bottom: 4px;
}
.tl-phase {
    display: flex; align-items: center; padding: 0 12px; min-width: 0;
    font-size: 12px; font-weight: 600; white-space: nowrap;
}
.tl-phase span { overflow: hidden; text-overflow: ellipsis; }
.tl-phase.przygotowanie { background: #eef1f4; color: #5f5e5a; }
.tl-phase.realizacja { background: #dcefe9; color: #085041; }
.tl-phase.gwarancja { background: #e9e7fb; color: #3c3489; }
.tl-phase.est { background-image: repeating-linear-gradient(135deg, transparent 0 10px, rgba(255,255,255,.45) 10px 16px); }
.tl-now {
    position: absolute; top: -3px; bottom: -3px; width: 2px;
    background: #d85a30; border-radius: 2px;
}
.tl-now::after {
    content: ''; position: absolute; top: -4px; left: -3px;
    width: 8px; height: 8px; background: #d85a30; transform: rotate(45deg);
}
.tl-range { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-bottom: 14px; }

.tl-status {
    display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline;
    background: var(--bg); border: 1px solid var(--line-soft); border-radius: 10px;
    padding: 9px 14px; margin-bottom: 16px; font-size: 13px; color: var(--ink-2);
}

/* Oś zdarzeń: linia po lewej, zdarzenia jako klikalne wiersze z kolorową kropką typu */
.tl-axis { position: relative; margin-left: 6px; padding-left: 22px; border-left: 2px solid var(--line); }
.tl-month {
    margin: 14px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted);
}
.tl-ev {
    position: relative; display: grid;
    grid-template-columns: auto 92px minmax(0, 1fr) auto auto; /* checkbox | data | treść | licznik | § */
    gap: 10px; align-items: baseline;
    padding: 6px 10px; border-radius: 8px; font-size: 13px; cursor: pointer;
}
.tl-ev:hover { background: var(--bg); }
.tl-dot {
    position: absolute; left: -28px; top: 9px; width: 10px; height: 10px;
    border-radius: 50%; background: #888780;
}
.tl-ev.major .tl-dot { width: 14px; height: 14px; left: -30px; top: 7px; outline: 3px solid var(--line-soft); }
.tl-ev.major .tl-lab { font-weight: 700; }
.tl-ev.t-start .tl-dot { background: var(--accent); }
.tl-ev.t-end .tl-dot { background: #d85a30; }
.tl-ev.t-odbior .tl-dot { background: #1d9e75; }
.tl-ev.t-gwarancja .tl-dot { background: #7f77dd; }
.tl-ev.t-finanse .tl-dot { background: #ba7517; }
.tl-ev.t-zabezpieczenie .tl-dot { background: #185fa5; }
.tl-date { color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tl-lab { min-width: 0; }

/* Wystąpienia obowiązków cyklicznych - drobne, wyszarzone, kropka-obrys */
.tl-ev.minor { font-size: 12px; padding: 2px 10px; color: var(--muted); }
.tl-ev.minor .tl-dot {
    width: 7px; height: 7px; left: -26px; top: 8px;
    background: var(--surface); border: 2px solid #9fc9c0;
}
.tl-ev.minor .tl-date { color: var(--muted); }
.tl-ev.minor .tl-ref { font-weight: 500; opacity: .8; }

/* Zależność terminu wyliczonego: „↳ 14 dni przed: zakończenie robót” */
.tl-dep {
    display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px;
}

/* Odhaczanie pozycji: checkbox, stan wykonany, wyróżnienie zaległości */
.tl-chk { width: 15px; height: 15px; margin: 0; cursor: pointer; accent-color: #0f6e56; align-self: center; }
.tl-ev.done { opacity: .55; }
.tl-ev.done .tl-lab { text-decoration: line-through; }
.tl-ev.done .tl-chip { background: #e1f5ee; color: #0f6e56; }
.tl-ev.overdue { background: #fff6f2; }
.tl-ev.overdue .tl-chip { background: #faece7; color: #993c1d; }
.tl-ev.overdue .tl-lab { font-weight: 700; }
.tl-overdue-count { color: #993c1d; font-weight: 700; }
.tl-doneon {
    display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 600;
    color: #0f6e56; background: #e1f5ee; border-radius: 999px; padding: 1px 8px;
    white-space: nowrap; text-decoration: none;
}
.tl-ev.done .tl-doneon { text-decoration: none; } /* przekreślenie dotyczy etykiety, nie daty */
.tl-doneon.late { color: #993c1d; background: #faece7; } /* wykonane po terminie */
.tl-filter { display: flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; color: var(--muted); cursor: pointer; }
.tl-filter input { width: 14px; height: 14px; margin: 0; accent-color: #0b7285; }

/* Kto wykonuje - pasek przy lewej krawędzi wiersza + legenda */
.tl-ev { border-left: 3px solid transparent; }
.tl-ev.ob-my { border-left-color: #0b7285; }
.tl-ev.ob-zam { border-left-color: #ba7517; }
.tl-ev.ob-both { border-left-color: #7f77dd; }
.tl-legend { font-size: 11.5px; color: var(--muted); margin: 2px 0 8px; display: flex; gap: 14px; flex-wrap: wrap; }
.tl-leg { padding-left: 8px; border-left: 3px solid; }
.tl-leg.ob-my { border-left-color: #0b7285; }
.tl-leg.ob-zam { border-left-color: #ba7517; }
.tl-leg.ob-both { border-left-color: #7f77dd; }
.tl-badge {
    font-size: 10.5px; font-weight: 600; color: var(--muted);
    background: var(--bg); border: 1px solid var(--line-soft);
    border-radius: 999px; padding: 0 7px; margin-left: 6px; white-space: nowrap;
}
.tl-badge.est { color: #534ab7; background: #eeedfe; border-color: #cecbf6; }
.tl-chip {
    font-size: 11px; font-weight: 600; white-space: nowrap;
    background: #e1f5ee; color: #0f6e56; border-radius: 999px; padding: 2px 9px;
}
.tl-chip.past { background: var(--bg); color: var(--muted); }
.tl-chip.today { background: #faece7; color: #993c1d; }
.tl-ref { font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap; }

.tl-today {
    display: flex; align-items: center; gap: 10px; margin: 12px 0;
    color: #993c1d; font-size: 12.5px; font-weight: 700;
}
.tl-today-dot {
    position: relative; left: -28px; margin-right: -18px;
    width: 10px; height: 10px; background: #d85a30; transform: rotate(45deg);
}
.tl-today::after { content: ''; flex: 1; border-top: 2px dashed #f0997b; }

.tl-h { margin: 20px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.tl-recur { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.tl-rec {
    border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
    padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 4px;
}
.tl-rec:hover { border-color: var(--accent); }
.tl-every { font-size: 11.5px; font-weight: 700; color: #085041; background: #dcefe9; border-radius: 999px; padding: 1px 9px; align-self: flex-start; }
.tl-rec-lab { font-size: 13px; font-weight: 600; }
.tl-rec-det { font-size: 12px; color: var(--muted); }
.tl-rec .tl-ref { margin-top: 2px; }

.tl-proc { width: 100%; font-size: 13px; border-collapse: collapse; }
.tl-proc tr { cursor: pointer; border-bottom: 1px dashed var(--line-soft); }
.tl-proc tr:hover { background: var(--bg); }
.tl-proc td { padding: 6px 8px 6px 0; }
.tl-days { color: var(--ink-2); }
.tl-ref-td { text-align: right; font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap; }

@media (max-width: 720px) {
    .tl-ev { grid-template-columns: auto 1fr auto; }
    .tl-date { order: 1; }
    .tl-ref { grid-column: 1 / -1; }
}

/* Rozmowa z umową */
.chat-log {
    display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0;
    overflow-y: auto; overflow-x: hidden; /* kolumna czatu nigdy nie przewija się w bok */
}
.chat-log:empty::before {
    content: 'Zadaj pytanie o umowę - kolejne pytania mogą nawiązywać do poprzednich („a jakie są za to kary?”).';
    color: var(--muted); font-size: 13px; display: block; padding: 6px 2px;
}
.chat-msg {
    max-width: 100%; box-sizing: border-box; min-width: 0;
    border-radius: 12px; padding: 9px 13px; font-size: 13.5px; line-height: 1.55;
    overflow-wrap: anywhere; /* długie oznaczenia i nazwy własne nie rozpychają kolumny */
}
.chat-msg.user {
    align-self: flex-end; max-width: 92%; background: var(--accent); color: #fff;
    border-bottom-right-radius: 4px;
}
.chat-msg.assistant {
    align-self: stretch; background: var(--surface); border: 1px solid var(--line);
    border-bottom-left-radius: 4px;
}
.chat-text { white-space: pre-wrap; }
.chat-note { font-size: 12px; color: var(--muted); margin-bottom: 4px; font-style: italic; }
.chat-tree { margin-top: 8px; border-top: 1px dashed var(--line-soft); padding-top: 6px; }
.chat-tree > summary { cursor: pointer; color: var(--muted); }

/* Słabe punkty żądania drugiej strony - amunicja, więc wyróżniona na korzyść czytelnika. */
.defects {
    margin-top: 8px; padding: 8px 11px;
    background: var(--ok-bg); border-left: 3px solid var(--ok); border-radius: 6px;
}
.defects-head { font-size: 12px; font-weight: 600; color: var(--ok); margin-bottom: 4px; }

/* ---------------------------------------------- Propozycje poprawek z czatu

   Czat nie zapisuje planu sam - pokazuje, CO chce zmienić i GDZIE, a decyduje
   człowiek. Karta musi więc mówić trzy rzeczy naraz: miejsce docelowe, treść
   zastępowaną i treść nową. Bez tego „Wdróż” byłoby kliknięciem w ciemno. */

/* ---------------------------------------------- Czekanie na odpowiedź czatu

   Wskaźnik stoi POD pytaniem, w toku rozmowy - tam, gdzie użytkownik właśnie patrzy.
   Pod polem tekstowym ginął: wzrok jest przy ostatniej wypowiedzi, nie na dole karty.

   Scena: trzech urzędników czyta dokumenty i podaje sobie notatkę. To dokładnie to,
   co dzieje się pod spodem - pismo, umowa i tabela styków wędrują między agentami. */

.chat-msg.thinking { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }

.readers { width: 150px; height: 48px; flex: none; overflow: visible; }
.readers .desk { fill: none; stroke: var(--line); stroke-width: 2; stroke-linecap: round; }
.readers .head { fill: var(--accent); }
.readers .body { fill: var(--accent); opacity: .82; }
.readers .page { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; stroke-linejoin: round; }
.readers .flip { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; transform-box: fill-box; }
.readers .note { fill: var(--warn, #b8860b); }

/* Czytanie: głowa pochyla się nad książką i wraca. */
@keyframes reader-read {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    45%      { transform: translateY(1.6px) rotate(-6deg); }
}

/* Przewracana strona - obrót wokół grzbietu książki. */
@keyframes reader-flip {
    0%, 55%   { transform: scaleX(1); opacity: 1; }
    75%       { transform: scaleX(.05); opacity: .55; }
    95%, 100% { transform: scaleX(1); opacity: 1; }
}

/* Notatka wędruje od pierwszego urzędnika do trzeciego i wraca na początek. */
@keyframes reader-pass {
    0%   { transform: translate(26px, 30px); opacity: 0; }
    6%   { opacity: 1; }
    22%  { transform: translate(50px, 16px); }
    38%  { transform: translate(75px, 30px); }
    50%  { transform: translate(75px, 30px); }
    66%  { transform: translate(100px, 16px); }
    82%  { transform: translate(124px, 30px); }
    94%  { opacity: 1; }
    100% { transform: translate(124px, 30px); opacity: 0; }
}

.readers .head, .readers .body { transform-origin: center bottom; }
.readers .r1 .head { animation: reader-read 2.1s ease-in-out infinite; }
.readers .r2 .head { animation: reader-read 2.1s ease-in-out .45s infinite; }
.readers .r3 .head { animation: reader-read 2.1s ease-in-out .9s infinite; }

.readers .r1 .flip { animation: reader-flip 2.6s ease-in-out infinite; }
.readers .r2 .flip { animation: reader-flip 2.6s ease-in-out .5s infinite; }
.readers .r3 .flip { animation: reader-flip 2.6s ease-in-out 1s infinite; }

.readers .note { animation: reader-pass 3.4s ease-in-out infinite; }

.thinking-caption { font-size: 12.5px; color: var(--muted); min-width: 0; }
.thinking-caption b { display: block; color: var(--text); font-weight: 600; font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
    .readers .head, .readers .flip, .readers .note { animation: none; }
    .readers .note { transform: translate(75px, 30px); opacity: 1; }
}

/* Czat przy piśmie robi co innego niż czat z umową - inny podpowiadacz na starcie. */
.chat-log.letter-chat:empty::before {
    content: 'Omów taktykę odpowiedzi. Gdy coś ustalicie, zaproponuję poprawkę do konkretnego punktu planu - wejdzie dopiero, gdy klikniesz „Wdróż”.';
}

.proposals { margin-top: 10px; border-top: 1px dashed var(--line-soft); padding-top: 9px; }
.proposal-lead { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 7px; }

.proposal {
    border: 1px solid var(--line); border-left: 3px solid var(--accent);
    border-radius: 8px; padding: 9px 11px; margin-bottom: 8px; background: var(--bg);
}
.proposal.done { border-left-color: var(--ok); opacity: .72; }

.proposal-head {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    justify-content: space-between; margin-bottom: 6px;
}
.proposal-target { font-size: 12px; font-weight: 600; letter-spacing: .01em; }

.proposal-was {
    font-size: 12.5px; color: var(--muted); text-decoration: line-through;
    margin-bottom: 4px; overflow-wrap: anywhere;
}
.proposal-new { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.proposal-ref { font-size: 12px; color: var(--muted); margin-top: 4px; }
.proposal-why { font-size: 12px; color: var(--muted); font-style: italic; margin-top: 5px; }

/* ---------------------------------------------- Edytor planu odpowiedzi

   Argument to DANE (treść + podstawa z umowy), nie sformatowany tekst - dlatego
   zamiast jednego edytora WYSIWYG każdy punkt dostaje własne pole. Pola rosną
   z treścią: argument na pół strony ma być widoczny w całości, bez przewijania
   w środku okienka. To był realny problem przy jednym oknie „jeden na wiersz”. */

.plan-stance {
    padding: 16px 0; border-bottom: 1px solid var(--line-soft);
}
.plan-stance:last-of-type { border-bottom: 0; }
.plan-stance-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.plan-ad { font-weight: 700; white-space: nowrap; }
.plan-claim { font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.plan-stance-buttons { margin: 8px 0 14px; }

.plan-label {
    display: block; font-size: 12.5px; font-weight: 600; color: var(--muted);
    margin-bottom: 8px;
}

.plan-items { display: flex; flex-direction: column; gap: 10px; }
.plan-items:empty::before {
    content: 'Nic tu jeszcze nie ma - dopisz pozycję albo poproś czat o propozycję.';
    font-size: 12.5px; color: var(--muted); display: block; padding: 2px 0 4px;
}

.plan-item {
    border: 1px solid var(--line); border-radius: 10px;
    padding: 10px 12px; background: var(--surface);
}
.plan-item:focus-within { border-color: var(--accent); }

/* Rozmiar i typografia pola: tekst pisma czyta się i redaguje inaczej niż etykietę
   formularza - stąd większy stopień pisma, luźniejsza interlinia i pełna szerokość. */
textarea.plan-grow {
    width: 100%; box-sizing: border-box; resize: vertical; overflow: hidden;
    min-height: 132px; padding: 12px 14px;
    font-size: 15px; line-height: 1.7;
}

.plan-item-foot {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px;
}
.plan-spacer { flex: 1; }
input.plan-basis { width: auto; min-width: 190px; flex: 0 1 240px; font-size: 12.5px; }
.plan-add { margin-top: 10px; }

.plan-skipped {
    display: flex; gap: 10px; align-items: center; justify-content: space-between;
    padding: 7px 0; border-bottom: 1px dashed var(--line-soft); color: var(--muted);
}
.plan-skipped:last-child { border-bottom: 0; }

/* ---------------------------------------------- Szkic jako kartka dokumentu

   Podgląd ma pokazywać PISMO, nie pole tekstowe: biała kartka, marginesy, typografia
   pisma kontraktowego (justowanie, wcięcie pierwszego wiersza, pogrubione nagłówki
   sekcji). Reguły łamania akapitów są te same, co w generatorze DOCX - inaczej
   podgląd obiecywałby układ inny niż ten, który wyjdzie w pliku. */

.doc-sheet { overflow-x: auto; padding: 4px 0 2px; }

.doc-page {
    max-width: 21cm; margin: 0 auto; padding: 2.2cm 2.4cm;
    background: #fff; color: #111;
    border: 1px solid var(--line); border-radius: 4px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .10);
    font-family: Calibri, "Segoe UI", system-ui, sans-serif;
    font-size: 14px; line-height: 1.62;
}

.doc-p {
    margin: 0 0 10px; text-align: justify; text-indent: 1cm;
    overflow-wrap: break-word;
}
.doc-h { margin: 18px 0 8px; font-weight: 700; text-indent: 0; }
.doc-li { margin: 0 0 6px 1cm; text-indent: 0; text-align: justify; }
.doc-title { margin: 16px 0; font-weight: 700; text-align: center; text-transform: uppercase; }

/* Bloki dokładane przez aplikację - widoczne, ale wyraźnie nie do edycji. */
.doc-ghost {
    margin: 0 0 10px; padding: 5px 9px;
    border: 1px dashed var(--line); border-radius: 5px;
    color: var(--muted); font-size: 12.5px; background: var(--bg);
}
.doc-right { display: flex; justify-content: flex-end; }
.doc-right .doc-ghost { margin-bottom: 10px; }

/* Ciemny motyw nie zmienia kartki: pismo jest białe także na ekranie. */
.doc-page ::selection { background: #b9dcff; }

@media (max-width: 900px) {
    .doc-page { padding: 1.2cm 1cm; font-size: 13.5px; }
}

/* Pasek edycji zaznaczenia w szkicu - pokazuje, CO zostanie podmienione. */
.sel-bar {
    position: fixed; z-index: 320;
    width: min(600px, calc(100vw - 24px));
    padding: 12px 14px;
    border: 1px solid var(--accent); border-radius: 10px; background: var(--surface);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}
.sel-quote {
    font-size: 13px; line-height: 1.55; color: var(--muted);
    border-left: 3px solid var(--accent); padding-left: 10px; margin-bottom: 10px;
    max-height: 120px; overflow: auto; white-space: pre-wrap;
}
.sel-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sel-row input { flex: 1; min-width: 240px; }

/* Drzewo ustaleń W CZACIE: kolumna ma ~350 px, więc układ trzykolumnowy (etykieta |
   wartość | paragraf) rozpychał panel i łamał tekst po jednym słowie. Tutaj wiersz
   układa się pionowo: etykieta z paragrafem w jednej linii, wartość pod spodem. */
.chat-tree .tree-cat { margin-bottom: 6px; }
.chat-tree .tree-cat > summary { padding: 7px 10px; font-size: 13px; }
.chat-tree .tree-grp { margin: 0 6px 6px 12px; }
.chat-tree .tree-grp > summary { padding: 5px 8px; font-size: 12.5px; }
.chat-tree .tree-facts { padding: 2px 8px 6px 12px; }
.chat-tree .tree-cat > .tree-facts { padding-left: 16px; }
.chat-tree .tree-fact {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 8px; padding: 6px 6px; font-size: 12.5px;
}
.chat-tree .tf-label { grid-column: 1; min-width: 0; }
.chat-tree .tf-ref { grid-column: 2; grid-row: 1; }
.chat-tree .tf-val {
    grid-column: 1 / -1; min-width: 0; color: var(--muted);
    /* Rozwlekłe wartości („1.400 zł netto miesięcznie za jeden kontener (socjalny…”)
       rozdymały listę na pół ekranu - pokazujemy początek, całość jest o klik dalej. */
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.chat-tree .agr-hit { padding: 9px 11px; margin-top: 8px; }
.chat-tree .agr-hit-text { font-size: 12.5px; }
.agr-clause-text mark { background: var(--warn-bg); color: inherit; border-radius: 3px; padding: 0 2px; }

.agr-hit {
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 12px 14px; margin-top: 12px; background: var(--surface);
}
.agr-hit-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
.agr-hit-text { font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; }

.agr-clause { padding: 10px 16px; border-bottom: 1px solid var(--line-soft); }
.agr-clause.lvl2 { padding-left: 34px; }
.agr-clause.lvl3 { padding-left: 52px; }
.agr-clause.lvl4 { padding-left: 70px; }
.agr-clause-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 4px; }
.agr-clause-text { font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; color: var(--ink-2); }
/* Treść sekcji dokumentacji jako akapity, listy i tabele (KZM.sectionHtml) - zamiast surowych wierszy. */
.sec-rich { white-space: normal; font-size: 14px; line-height: 1.6; color: var(--ink); }
.sec-rich h4 { margin: 0 0 10px; font-size: 15.5px; font-weight: 700; }
.sec-rich p { margin: 0 0 10px; }
.sec-rich ul { margin: 0 0 12px; padding-left: 22px; }
.sec-rich li { margin: 3px 0; }
.sec-rich table.sec-table { border-collapse: collapse; margin: 6px 0 12px; font-size: 13px; max-width: 100%; }
.sec-rich table.sec-table th, .sec-rich table.sec-table td { border: 1px solid var(--line); padding: 4px 8px; vertical-align: top; text-align: left; }
.sec-rich table.sec-table th { background: var(--bg); font-weight: 600; }
.agr-clause.flash { background: var(--warn-bg); transition: background 1.2s; }

/* Kafelki obok listy plików (na razie tylko Umowa - kolejne dojdą) */
.side-tiles { display: flex; flex-direction: column; gap: 12px; }
.side-tile {
    display: block; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px;
    color: inherit;
}
a.side-tile:hover { text-decoration: none; border-color: var(--brand); box-shadow: var(--shadow-lg); }
.side-tile h3 { margin: 0 0 4px; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.side-tile p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.side-tile .st { margin-top: 8px; font-size: 12px; font-weight: 600; }

/* ---------------------------------------------------------------- Strona „w przygotowaniu” */

.soon { max-width: 620px; margin: 40px auto; text-align: center; }
.soon .glyph {
    width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 12px;
    background: var(--brand-light); color: var(--brand);
    display: flex; align-items: center; justify-content: center;
}
.soon .glyph svg { width: 28px; height: 28px; }
.soon ul { text-align: left; display: inline-block; margin: 14px 0 0; padding-left: 20px; color: var(--ink-2); font-size: 13.5px; }
.soon ul li { margin-bottom: 5px; }

/* ---------------------------------------------------------------- Zakładki */

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 18px; flex-wrap: wrap; }
.tabs button {
    background: none; border: none; border-bottom: 2px solid transparent;
    padding: 9px 14px; font-family: inherit; font-size: 13.5px; color: var(--muted);
    cursor: pointer; font-weight: 500;
}
.tabs button:hover { color: var(--ink); }
.tabs button.active { color: var(--brand); border-bottom-color: var(--brand); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---------------------------------------------------------------- Modal
   Okno zawsze mieści się w ekranie (2026-09-24, zgłoszenie „okno importu wychodzi poza widoczny ekran”):
   nagłówek i przyciski w stopce stoją w miejscu, przewija się tylko treść. Wcześniej okno rosło razem z treścią
   i na laptopie 1366×768 „Importuj”, „Zapisz” w edycji zadania i w ustawieniach lądowały pod krawędzią ekranu.
   Odstęp od krawędzi maleje z wysokością ekranu, na telefonie okno zajmuje prawie cały ekran. */

.modal-backdrop {
    --modal-gap: clamp(10px, 5vh, 60px);
    position: fixed; inset: 0; background: rgba(16, 24, 40, .45);
    display: flex; align-items: flex-start; justify-content: center;
    padding: var(--modal-gap) 16px; z-index: 60; overflow-y: auto;
}
.modal-backdrop[hidden] { display: none; }
.modal {
    background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg);
    width: 100%; max-width: 560px;
    display: flex; flex-direction: column;
    max-height: calc(100vh - 2 * var(--modal-gap));
    max-height: calc(100dvh - 2 * var(--modal-gap));
}
.modal.wide { max-width: 900px; }
.modal > header { padding: 14px 18px; border-bottom: 1px solid var(--line-soft); display: flex; justify-content: space-between; align-items: center; }
.modal > header h2 { margin: 0; font-size: 16px; }
.modal > .body { padding: 18px; flex: 1 1 auto; min-height: 0; overflow: auto; }
/* Zawijanie zawsze, nie tylko na telefonie: okno zgłoszenia do GW ma osiem przycisków i pierwszy wychodził poza lewą krawędź. */
.modal > footer { padding: 12px 18px; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.modal > header, .modal > footer { flex: none; }
@media (max-width: 640px) {
    .modal-backdrop { --modal-gap: 8px; padding: var(--modal-gap); }
    .modal > header { padding: 12px 14px; }
    .modal > .body { padding: 14px; }
    .modal > footer { padding: 10px 14px; flex-wrap: wrap; }
}
.modal .close { background: none; border: none; font-size: 20px; color: var(--muted); cursor: pointer; line-height: 1; }

/* ------------------------------------------------- Paleta kolorów listy „Do zrobienia”
   Styl stoi w arkuszu globalnym, bo okno „nowa lista” otwiera się z DWÓCH miejsc: ze strony
   /Listy i z kafelka na pulpicie. Trzymany w stylu jednej strony dawał na pulpicie sześć
   szarych prostokątów, których nie dało się nawet rozróżnić (zgłoszenie 22.09.2026). */
.colors { display: flex; gap: 8px; flex-wrap: wrap; }
.colors button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; background: var(--c); cursor: pointer; padding: 0; }
.colors button:hover { transform: scale(1.06); }
.colors button.on {
    border-color: var(--surface);
    box-shadow: 0 0 0 2px var(--ink);
}
.colors button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ------------------------------------------------- Pierwsze kroki nowego kontraktu
   Okno bez krzyżyka: adres asystenta i lista osób, które mogą do niego pisać, to dwie
   rzeczy, bez których kontrakt nie przyjmie ani jednej wiadomości. Wyjście jest w stopce,
   żeby nikt nie zamknął tego odruchowo w rogu. */

.modal.ob > header { align-items: baseline; }
.modal.ob .ob-step { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.modal.ob > .body > p { margin: 0 0 12px; max-width: 72ch; line-height: 1.55; }
.modal.ob > footer { justify-content: space-between; }

.ob-list { margin: 0 0 16px; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }
.ob-list li { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.ob-list li b { color: var(--ink); }

.ob-addr { display: flex; align-items: center; gap: 8px; }
.ob-addr input { flex: 1; min-width: 0; }

/* Przycisk dodawania jest tu głównym działaniem okna, więc stoi po prawej, w kolorze marki
   i z oddechem nad listą - w wersji pobocznej ginął przy krawędzi nad ramką zespołu. */
.ob-add { justify-content: flex-end; margin: 14px 0 18px; }

.ob-people { margin: 4px 0 14px; padding: 10px 12px; background: var(--info-bg); border-radius: 8px; }
.ob-people ul { margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.ob-people li { font-size: 13px; }
.ob-people li.nowy { font-weight: 600; }

/* Kreator: umowa i załączniki (10.10.2026). Ostrzeżenie „bez umowy” na górze, zaraz pod nim
   osobna ramka o załącznikach - to dwie różne wiadomości i nie mogą się zlać w jeden akapit. */
.ob-limit { line-height: 1.55; }
.ob-annex { margin: 0 0 16px; padding: 10px 14px; background: var(--info-bg); border-radius: var(--radius-sm); font-size: 13.5px; line-height: 1.55; }
.ob-pickers { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 10px; }
.ob-prog { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; font-size: 13.5px; color: var(--ink-2); }
.ob-pick { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 6px; }
.ob-files { margin: 0 0 12px; padding-left: 18px; font-size: 13px; }
.ob-att { width: 100%; border-collapse: collapse; margin: 6px 0 12px; font-size: 13px; }
.ob-att td { padding: 7px 6px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.ob-att td:first-child { width: 52%; }
.ob-att tr.miss td:first-child { font-weight: 600; }
.ob-att td.nr input { width: 64px; margin-left: 4px; }
.ob-att-pick { display: flex; gap: 6px; align-items: center; }
.ob-att-pick select { flex: 1; min-width: 0; }
.ob-foot-r { display: flex; gap: 8px; }
@media (max-width: 560px) {
    .ob-att td { display: block; width: auto !important; border-bottom: none; padding: 3px 0; }
    .ob-att tr { display: block; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
}
.ob-people li .tag {
    margin-left: 6px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    background: var(--ok); color: #fff; border-radius: 999px; padding: 1px 7px;
}

/* ------------------------------------------------- Start karty: wybór ścieżki */

.start-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .start-paths { grid-template-columns: 1fr; } }

.start-path {
    border: 1px solid var(--line); border-radius: var(--radius); padding: 18px;
    background: var(--surface); display: flex; flex-direction: column; gap: 8px;
}
.start-path h3 { margin: 0; font-size: 15px; }
.start-path p { margin: 0; font-size: 13px; color: var(--muted); flex: 1; }
.start-path .glyph { font-size: 22px; line-height: 1; }

/* Strefa upuszczania plików. Musi wołać o kliknięcie - użytkownik, który jej nie zauważy,
   widzi tylko wyszarzony przycisk „Analizuj pliki” i uznaje, że opcja jest niedostępna. */
.dropzone {
    border: 2px dashed var(--brand); border-radius: var(--radius);
    padding: 22px 16px; text-align: center; font-size: 14px; color: var(--brand);
    background: var(--info-bg); cursor: pointer; transition: background .12s, border-color .12s;
}
.dropzone:hover { background: #dce9fb; border-color: var(--ink); }
.dropzone.over { background: #cfe1fa; border-color: var(--ink); color: var(--ink); }
.dropzone .glyph { display: block; font-size: 26px; line-height: 1; margin-bottom: 6px; }
.dropzone .lead { font-weight: 600; }
.dropzone .small { color: var(--muted); margin-top: 4px; }
.dropzone ul {
    margin: 10px 0 0; padding: 8px 0 0; list-style: none; text-align: left;
    font-size: 12.5px; color: var(--ink); border-top: 1px solid var(--line);
}

/* ------------------------------------------------- Wyszukiwarka wykonań wyrobu */

/* Wyszukiwanie idzie do sieci i trwa kilkanaście sekund - okno musi być w tym czasie
   jawnie zajęte, a nie „klikalne, ale nic się nie dzieje”. */
.modal { position: relative; }
.modal-busy {
    position: absolute; inset: 0; z-index: 5; border-radius: var(--radius);
    background: rgba(255, 255, 255, .82); backdrop-filter: blur(1px);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
}
.modal-busy[hidden] { display: none; }
.modal-busy .what { font-size: 13.5px; color: var(--muted); max-width: 320px; text-align: center; }

/* Relacja z wyszukiwania wykonań: co robimy w tej chwili, o co zapytaliśmy sieć i co przyszło.
   Lista rośnie w trakcie, więc ma własne przewijanie i nie rozpycha okna. */
.finder-live {
    max-height: 300px; overflow-y: auto; overflow-x: hidden;
    background: var(--surface-2, var(--surface)); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
    padding: 0 16px 14px;
}
.finder-live .live-head {
    position: sticky; top: 0; z-index: 1; margin: 0 -18px 10px; padding: 14px 18px 10px;
    background: var(--surface); border-bottom: 1px solid var(--line-soft);
    font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.finder-live .live-step { display: flex; gap: 10px; padding: 7px 0; font-size: 13px; color: var(--muted); }
.finder-live .live-step + .live-step { border-top: 1px solid var(--line-soft); }
.finder-live .live-step.now { color: var(--ink); }
.finder-live .live-step .ico { width: 20px; flex: none; text-align: center; line-height: 1.4; }
.finder-live .live-step .txt { min-width: 0; line-height: 1.45; }
.finder-live .live-step b { font-weight: 600; color: var(--ink-2); }
.finder-live .live-step ul { margin: 5px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--muted); }
.finder-live .live-step li { margin: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finder-live .live-step li::before { content: "· "; }

/* Pasek zapytania przykleja się do góry, bo lista bywa długa, a doprecyzowanie
   zapytania jest tu równie ważne jak sam wybór. */
.finder-bar {
    position: sticky; top: 0; z-index: 2; background: var(--surface);
    padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); margin-bottom: 12px;
}
.finder-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.finder-chip {
    border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
    border-radius: 999px; padding: 3px 11px; font-size: 12.5px; cursor: pointer;
}
.finder-chip:hover { border-color: var(--brand); color: var(--brand); }

.variant {
    display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); padding: 11px 13px; margin-bottom: 8px; cursor: pointer;
}
.variant:hover { border-color: var(--brand); background: var(--surface-2); }
.variant.selected { border-color: var(--brand); box-shadow: 0 0 0 2px var(--info-bg); }
.variant .mark { font-size: 15px; line-height: 1.3; opacity: .55; }
.variant.selected .mark { opacity: 1; }
.variant .title { font-weight: 600; font-size: 13.5px; }
.variant .meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.variant .catalog {
    display: inline-block; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 12px; background: var(--info-bg); color: var(--brand);
    border-radius: 4px; padding: 1px 6px; margin-left: 6px;
}
.variant .catalog.missing { background: var(--warn-bg); color: var(--warn); font-family: inherit; }

/* ---------------------------------------------------------------- Powiadomienia */

#toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 90; }
.toast {
    background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm);
    font-size: 13.5px; box-shadow: var(--shadow-lg); max-width: 380px;
    animation: toast-in .16s ease-out;
}
.toast.ok { background: var(--ok); }
.toast.error { background: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- Ekrany logowania */

.auth-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 28px; }
.auth-head { text-align: center; margin-bottom: 22px; }
.auth-head .mark {
    font-size: 20px; font-weight: 700; color: var(--brand);
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
.auth-head .mark .marka-znak { width: 34px; height: 34px; }
.auth-head .mark .lzejsze { color: var(--ink-2); }
.auth-head .sub { color: var(--muted); font-size: 13px; margin-top: 6px; }
.auth-foot { text-align: center; margin-top: 16px; font-size: 13px; color: var(--muted); }

/* --- wstrzymane rejestracje: komunikat na wierzchu, formularz zostaje w tle jako tło,
   żeby było widać, na co się czeka. Blokadą jest serwer, nie ten styl. */
.auth-card .hold {
    border: 1px solid #cddcec; border-left: 4px solid var(--brand);
    background: var(--info-bg); border-radius: 10px; padding: 18px 20px; margin-bottom: 4px;
}
.auth-card .hold h2 { margin: 0 0 8px; font-size: 17px; }
.auth-card .hold p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.auth-card .hold .when { font-weight: 700; color: var(--ink); font-size: 14.5px; }
.auth-card .hold .small { margin-bottom: 0; font-size: 12.5px; color: var(--muted); }
.auth-card.held form { margin-top: 18px; filter: blur(2px); opacity: .4; pointer-events: none; user-select: none; }

.spinner {
    display: inline-block; width: 13px; height: 13px; border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff; border-radius: 50%; animation: spin .6s linear infinite;
}
.spinner.dark { border-color: rgba(31, 78, 121, .25); border-top-color: var(--brand); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- Kreator (M2) */

.wizard { display: grid; grid-template-columns: 220px 1fr 320px; gap: 16px; align-items: start; }
@media (max-width: 1200px) { .wizard { grid-template-columns: 200px 1fr; } .wizard .chat-pane { grid-column: 1 / -1; } }
@media (max-width: 860px) { .wizard { grid-template-columns: 1fr; } }

.steps { list-style: none; margin: 0; padding: 0; }
.steps li { padding: 8px 12px; border-radius: var(--radius-sm); font-size: 13px; cursor: pointer; display: flex; gap: 8px; align-items: center; color: var(--ink-2); }
.steps li:hover { background: var(--line-soft); }
.steps li.active { background: var(--brand-light); color: var(--brand-dark); font-weight: 600; }
.steps li.done { color: var(--muted); }
.steps li .mark { width: 16px; text-align: center; flex: none; }

.gapbar {
    position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--line);
    padding: 10px 16px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 13px;
    box-shadow: 0 -2px 6px rgba(16, 24, 40, .05);
}

.chat { display: flex; flex-direction: column; height: 520px; }
.chat .log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.chat .msg { padding: 8px 11px; border-radius: var(--radius-sm); font-size: 13px; max-width: 92%; white-space: pre-wrap; }
.chat .msg.user { background: var(--brand-light); align-self: flex-end; }
.chat .msg.assistant { background: var(--line-soft); align-self: flex-start; }
.chat .composer { border-top: 1px solid var(--line-soft); padding: 10px; display: flex; gap: 8px; }
.chat .composer textarea { min-height: 38px; max-height: 120px; font-size: 13px; }

/* ---------------------------------------------------------------- Podgląd wzoru karty
   Odtworzenie wyglądu dokumentu, żeby użytkownik wskazywał miejsca na karcie, którą zna,
   a nie na abstrakcyjnej liście komórek. */

.tpl { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .tpl { grid-template-columns: 1fr; } }

/* --- Kreator karty: pięć okien krok po kroku (decyzja 19.09.2026). Jedno okno naraz, pasek kroków nad nim,
   nawigacja pod nim, czat obok przez cały czas. */
.wiz-pane[hidden] { display: none !important; }
/* Pasek kroków jak w quizie: kółko z numerem, kreska do następnego, podpis pod spodem.
   Na jeden rzut oka widać, gdzie jesteśmy, co już za nami i co jeszcze przed. Krok przed
   bieżącym jest klikalny - cofnięcie się to jedno kliknięcie, bez szukania. */
/* Kolumny biorą się z liczby kroków - dołożenie kroku nie wymaga ruszania arkusza. */
.wiz-steps { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.wiz-steps li {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px;
    padding: 2px 4px 0; min-width: 0; text-align: center; cursor: pointer;
}
.wiz-steps li::before, .wiz-steps li::after { content: ""; position: absolute; top: 17px; height: 2px; background: var(--line); }
.wiz-steps li::before { left: 0; right: 50%; margin-right: 20px; }
.wiz-steps li::after { left: 50%; right: 0; margin-left: 20px; }
.wiz-steps li:first-child::before, .wiz-steps li:last-child::after { display: none; }
.wiz-steps li.done::before, .wiz-steps li.done::after, .wiz-steps li.current::before { background: var(--brand); }
.wiz-steps li .num {
    position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
    background: var(--surface); border: 2px solid var(--line); color: var(--muted);
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.wiz-steps li.done .num { background: var(--brand); border-color: var(--brand); color: #fff; }
.wiz-steps li.current .num { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 0 0 4px var(--brand-light); }
/* align-self: stretch - bez tego podpis w kolumnie flexa bierze swoja wlasna szerokosc
   i wychodzi poza kolumne zamiast urwac sie wielokropkiem, wiec sasiednie kroki sie zlewaja. */
.wiz-steps li .lbl { display: block; align-self: stretch; min-width: 0; line-height: 1.3; }
.wiz-steps li .lbl strong { display: block; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wiz-steps li.current .lbl strong { color: var(--brand-dark); }
.wiz-steps li .lbl small { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wiz-steps li.disabled { cursor: not-allowed; opacity: .5; }
.wiz-steps li:not(.disabled):not(.current):hover .num { border-color: var(--brand); color: var(--brand-dark); }

/* Numer kroku przy tytule okna - druga, niezależna odpowiedź na pytanie „gdzie ja jestem”. */
.wiz-badge {
    display: inline-block; margin-right: 8px; padding: 2px 9px; border-radius: 999px;
    background: var(--brand-light); color: var(--brand-dark); font-size: 11.5px; font-weight: 700;
    letter-spacing: .02em; vertical-align: middle;
}
.wiz-intro { margin: 0 0 12px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }

/* „Co czeka na Ciebie”: jedyne miejsce kroku, które wymaga człowieka. Każda pozycja to jedna
   decyzja z przyciskiem obok - reszta pracy dzieje się sama i nie zajmuje miejsca na ekranie. */
/* Jeden przycisk na krok. Za nim siedzi cała maszyneria: listy wymagań, tabele plików, rubryki
   formularza i ręczne akcje. Na wierzchu kroku zostają wyłącznie decyzje dla człowieka. */
.wiz-details { margin-top: 16px; border-top: 1px solid var(--line-soft); padding-top: 14px; }
.wiz-details > summary {
    list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 15px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
    font-size: 13px; color: var(--ink-2);
}
.wiz-details > summary::-webkit-details-marker, .wiz-details > summary::marker { display: none; content: ""; }
.wiz-details > summary::after { content: "▾"; font-size: 11px; color: var(--muted); }
.wiz-details[open] > summary::after { content: "▴"; }
.wiz-details > summary:hover { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-light); }
.wiz-details[open] > summary { margin-bottom: 12px; }
.wiz-details > summary .open-only, .wiz-details[open] > summary .shut-only { display: none; }
.wiz-details[open] > summary .open-only { display: inline; }

/* Sekcje „do odkrycia”: lista wymagań, pliki, ręczne akcje. Są pod ręką, ale nie zajmują ekranu,
   dopóki user sam po nie nie sięgnie - decyzje z góry kroku mają być jedyną rzeczą, która woła. */
.wiz-more { margin-top: 12px; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.wiz-more > summary { cursor: pointer; font-size: 13px; color: var(--ink-2); list-style-position: outside; }
.wiz-more > summary:hover { color: var(--brand-dark); }
.wiz-more[open] > summary { margin-bottom: 4px; }

/* Szkic czekający na zatwierdzenie: ramka ostrzegawcza, bo nic nie wyjdzie bez kliknięcia. */
.draft-box {
    border: 1px solid var(--warn); border-radius: var(--radius-sm);
    padding: 10px 12px; margin-top: 8px; background: var(--warn-bg);
}

/* Lista decyzji w kaflu: nazwa po lewej, przyciski po prawej. Tyle, żeby user wiedział,
   CO zatwierdza albo CZEGO brakuje - bez rozwijania szczegółów. */
.check-list { display: grid; gap: 2px; margin-top: 4px; }
/* Kafel z listą bierze obie kolumny - inaczej „nazwa + trzy przyciski” łamie się w pionie. */
.start-path.wide { grid-column: 1 / -1; }
.check-row {
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
    padding: 9px 0; border-top: 1px solid var(--line-soft);
}
.check-row:first-child { border-top: 0; }
.check-row .who { flex: 1; min-width: 190px; }
.check-row .btn-row { flex: none; margin: 0; }

/* Raport z czytania plików: nagłówki sekcji i punkty „- ”, jak w notatce. */
.alert.report { display: block; line-height: 1.55; }
.alert.report .head { font-weight: 600; margin-top: 10px; }
.alert.report ul { list-style: none; margin: 2px 0 0; padding-left: 4px; }
.alert.report li::before { content: "- "; }
.alert.report > a { display: inline-block; margin-top: 8px; }

/* Poczekalnia kroku „Wyrób” w trakcie czytania wgranych plików. */
.wait-tile { margin-bottom: 14px; }
.wait-tile .glyph .spinner { width: 20px; height: 20px; }
.wait-tile .kz-progress { margin: 4px 0 0; }

/* Wysłana wiadomość: jedna linia stanu i przycisk podglądu po prawej. */
.sent-row { display: flex; gap: 10px; align-items: center; padding: 6px 0 0; }
.sent-row > span:first-child { flex: 1; min-width: 0; }

/* Świeżo zredagowany szkic: krótki błysk, żeby oko wiedziało, gdzie wylądowało. */
.just-made { animation: kzflash 1.6s ease-out 1; }
@keyframes kzflash {
    0%, 30% { box-shadow: 0 0 0 3px var(--brand-light); }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* Pozycje karty jako zwykłe wiersze, nie tabela: jedna pozycja to jedno zdanie i dwa przyciski. */
.item-list:empty { display: none; }
.item-row { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.item-row:first-child { border-top: 0; }
.item-row .who { flex: 1; min-width: 0; }
.item-row .who strong { font-size: 14.5px; }
.item-row .btn-row { flex: none; margin: 0; }

.todo-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.todo-list li {
    display: flex; gap: 11px; align-items: flex-start; padding: 11px 13px;
    border: 1px solid var(--warn); border-left-width: 3px; border-radius: 10px; background: var(--warn-bg);
}
.todo-list li .ic { font-size: 16px; line-height: 1.25; flex: none; }
.todo-list li strong { font-size: 13.5px; }
.todo-list .mt-1 { margin-top: 7px; }

/* Kreator jako osobne okno: jeden krok naraz, pasek kroków pod nagłówkiem, nawigacja w stopce.
   Treść kroku przewija się w środku okna - nagłówek z paskiem i przyciski zostają na wierzchu. */
.wiz-modal .modal { max-width: 1040px; width: 96%; max-height: 92vh; display: flex; flex-direction: column; }
.wiz-modal .modal > .body { overflow-y: auto; }
.wiz-modal .modal > footer.wiz-nav { margin: 0; border: 0; border-top: 1px solid var(--line-soft); border-radius: 0 0 var(--radius) var(--radius); }
#wizBody .wiz-pane { border: 0; box-shadow: none; margin: 0; background: transparent; }
#wizBody .wiz-pane > header { padding-left: 0; padding-right: 0; border-top: 0; }
#wizBody .wiz-pane > .body { padding-left: 0; padding-right: 0; }
.wiz-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--surface); }
.wiz-nav:empty { display: none; }
.wiz-nav .hint { flex: 1; text-align: center; }
.wiz-summary { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.wiz-summary li { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.wiz-summary li > span:first-child { width: 18px; flex: none; text-align: center; font-weight: 700; }
.wiz-summary li.ok > span:first-child { color: var(--ok); }
.wiz-summary li.todo > span:first-child { color: var(--warn); }
.wiz-summary li a { margin-left: auto; font-size: 12px; white-space: nowrap; }

/* --- Paski postępu: licznikowe (serwer zgłasza krok) i czasowe (typowy czas operacji modelu). */
.kz-progress { margin: 6px 0 10px; }
.kz-progress .bar { height: 8px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.kz-progress .bar i { display: block; height: 100%; width: 0; background: var(--brand); border-radius: 4px; transition: width .6s ease; }
.kz-progress .bar i.pulse { animation: kzpulse 1.3s ease-in-out infinite; }
@keyframes kzpulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.kz-progress .txt { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--ink-2); margin-top: 5px; }
.kz-progress .txt .eta { color: var(--muted); white-space: nowrap; }

/* --- Chipsy do klikania pod polami: wartości z poprzednich kart i propozycje asystenta (przerywana ramka). */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.chips:empty { display: none; }
.chips button { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 4px 11px; font-size: 12.5px; cursor: pointer; color: var(--ink); line-height: 1.3; }
.chips button:hover { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-light); }
.chips button.ai { border-style: dashed; border-color: var(--brand); }
.chips button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.chips button .muted { color: inherit; opacity: .75; }
@media (max-width: 900px) {
    /* Na wąskim ekranie osiem podpisów zlewa się w jedną plamę - zostają same koła.
       Gdzie jestem, mówi wtedy plakietka „Krok N z M” i tytuł kroku pod paskiem. */
    .wiz-steps { margin-bottom: 14px; }
    .wiz-steps li .num { width: 30px; height: 30px; font-size: 13px; }
    .wiz-steps li::before, .wiz-steps li::after { top: 15px; margin: 0 12px; }
    .wiz-steps li .lbl { display: none; }
    .wiz-nav { flex-wrap: wrap; }
    .wiz-nav .hint { order: 3; flex-basis: 100%; text-align: left; }
}

.doc-preview {
    background: #fff; padding: 26px 30px; border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); font-family: "Times New Roman", Georgia, serif; color: #111;
    max-height: 78vh; overflow-y: auto;
}
.doc-preview p { margin: 0 0 7px; font-size: 13px; line-height: 1.45; }
.doc-preview p:empty { height: 7px; margin: 0; }
.doc-preview .b { font-weight: 700; }

.doc-preview table.doc {
    width: 100%; border-collapse: collapse; margin: 10px 0 16px; table-layout: fixed;
}
.doc-preview table.doc td {
    border: 1px solid #9aa4ae; padding: 5px 7px; font-size: 12px; line-height: 1.35;
    vertical-align: top; word-wrap: break-word; overflow-wrap: anywhere;
}

/* Miejsce do wypełnienia - stan wskazuje kolor, a nie tylko tekst. */
.slot { cursor: pointer; transition: box-shadow .1s; min-height: 20px; }
.slot:hover { box-shadow: inset 0 0 0 2px var(--accent); }
.slot.free { background: #fff6e0; outline: 1px dashed #d8b25c; outline-offset: -2px; }
.slot.field { background: var(--brand-light); }
.slot.konst { background: var(--ok-bg); }
.slot.pomin { background: #f2f4f6; }
.slot.sel { box-shadow: inset 0 0 0 2px var(--brand); }
.slot .tag {
    display: block; font-family: var(--font); font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .03em; opacity: .75; margin-bottom: 1px;
}
.slot .val { font-family: var(--font); font-size: 11.5px; }
.slot .ai { font-family: var(--font); font-size: 10.5px; color: var(--muted); font-style: italic; }

.doc-preview td.repeat { background: #eaf2fa; }
.doc-preview td.repeat .tag { color: var(--brand-dark); }

.tpl-side { position: sticky; top: 68px; }
.tpl-side .picker { max-height: 300px; overflow-y: auto; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.tpl-side .picker .grp { padding: 5px 10px; background: #fafbfc; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.tpl-side .picker .opt { padding: 6px 10px; font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--line-soft); }
.tpl-side .picker .opt:hover { background: var(--brand-light); }
.tpl-side .picker .opt.on { background: var(--brand-light); font-weight: 600; }
.tpl-side .picker .opt small { display: block; color: var(--muted); font-size: 11px; }

.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend i { width: 13px; height: 13px; border-radius: 2px; display: inline-block; }

.meter { height: 8px; border-radius: 999px; background: var(--line-soft); overflow: hidden; margin: 8px 0 4px; }
.meter span { display: block; height: 100%; background: var(--ok); border-radius: 999px; }
.meter.sm { height: 6px; margin: 0; }
.meter.sm span { background: var(--brand); }

.chart {
    display: flex; align-items: flex-end; gap: 2px;
    height: 90px; margin-bottom: 18px;
    padding: 6px 8px; background: #fafbfc;
    border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
}
.chart .col { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 2px; }
.chart .col span { width: 100%; background: var(--brand); border-radius: 2px 2px 0 0; min-height: 1px; }

table.data td.plus { color: var(--ok); font-weight: 600; font-variant-numeric: tabular-nums; }
table.data td.minus { color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------- Projekty: czat - odnośniki źródeł,
   chipy podpowiedzi i tabela parametrów. Odnośnik otwiera sekcję źródłową z cytatem,
   więc wygląda jak łagodne podkreślenie, nie jak nawigacja. */
.chat-text .ref-link, .chat-table .ref-link {
    color: var(--brand); text-decoration: none;
    border-bottom: 1px dashed color-mix(in srgb, var(--brand) 55%, transparent);
    cursor: pointer;
}
.chat-text .ref-link:hover, .chat-table .ref-link:hover { background: var(--brand-light); border-bottom-style: solid; }

.chat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.chat-chip {
    border: 1px solid var(--line); background: #fff; border-radius: 999px;
    padding: 4px 11px; font-size: 12px; color: var(--ink-2); cursor: pointer;
    text-align: left; max-width: 100%;
}
.chat-chip:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-light); }

.chat-table-wrap { margin-top: 9px; overflow-x: auto; }
.chat-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.chat-table th {
    text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line);
    color: var(--muted); font-weight: 600; white-space: nowrap;
}
.chat-table td { padding: 5px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }

/* Zamówienia i logistyka (/Orders): wiersz po terminie dostawy dostaje lewą krawędź,
   nie całe tło - tabela czytana codziennie nie może być czerwona w połowie. */
table.data tr.overdue td:first-child { box-shadow: inset 3px 0 0 var(--danger); }

/* ==========================================================================
   Lista zadań (/Todo) - tablica
   Ekran odpowiada na jedno pytanie: co mam dziś zrobić. Cztery kolumny widać
   naraz, a WAGA pozycji (pilne / ważne / zwykłe) jest jedynym, co różni karty
   kolorem i grubością - lista czytana codziennie nie może krzyczeć całą sobą.
   Kolory wagi: czerwony = pilne, bursztyn = ważne, brak = zwykłe.
   ========================================================================== */

.todo-bar { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.todo-bar .fld { display: flex; flex-direction: column; gap: 4px; }
.todo-bar .fld label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.todo-bar .fld select { width: auto; min-width: 190px; margin: 0; }
.todo-bar .spacer { flex: 1; }
.todo-bar .ai-note { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.todo-bar .ai-note .spinner { width: 12px; height: 12px; }

/* Pasek pilnych: poziomy rząd kart, od najpilniejszej. Jedyne miejsce z tłem. */
.todo-focus { margin-bottom: 18px; }
.todo-focus h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--danger); margin: 0 0 8px; }
.todo-focus .strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.todo-focus .empty-focus {
    padding: 14px 16px; border: 1px dashed var(--line); border-radius: var(--radius);
    color: var(--muted); font-size: 13px; background: #fff;
}

/* Tablica: cztery kolumny na całą szerokość; na wąskim ekranie łamią się w dwie i jedną. */
.todo-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 1280px) { .todo-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .todo-board { grid-template-columns: 1fr; } }

.todo-col { background: #f7f8fa; border: 1px solid var(--line-soft); border-radius: var(--radius); min-height: 120px; }
.todo-col > header {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    padding: 12px 14px 8px; border-bottom: 1px solid var(--line-soft);
}
.todo-col > header h2 { margin: 0; font-size: 14px; }
.todo-col > header .cnt { font-size: 12px; color: var(--muted); white-space: nowrap; }
.todo-col > header .cnt b { color: var(--danger); }
.todo-col .cards { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.todo-col .none { padding: 18px 14px 22px; text-align: center; color: var(--muted); font-size: 12.5px; }

/* Karta zadania. Lewa krawędź = waga. Tytuł pilnej pozycji jest większy i grubszy -
   to ma być widoczne z drugiego końca pokoju, nie po przeczytaniu etykiety. */
.tcard {
    position: relative; background: var(--surface); border: 1px solid var(--line);
    border-left: 4px solid var(--line); border-radius: var(--radius);
    padding: 11px 12px 10px 13px; box-shadow: var(--shadow);
    display: flex; flex-direction: column; gap: 6px;
}
.tcard.p1 { border-left-color: var(--danger); }
.tcard.p2 { border-left-color: #d97706; }
.tcard.p1.overdue { background: #fffafa; }

.tcard .top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tcard .ttl { font-size: 13.5px; font-weight: 500; line-height: 1.35; color: var(--ink); }
.tcard.p2 .ttl { font-weight: 600; }
.tcard.p1 .ttl { font-weight: 700; font-size: 14.5px; }

.tcard .why {
    font-size: 12.5px; line-height: 1.4; color: var(--ink-2);
    padding-left: 18px; position: relative;
}
.tcard .why::before { content: "✦"; position: absolute; left: 2px; top: 0; color: var(--brand); font-size: 11px; }
.tcard.p1 .why { color: var(--danger); }
.tcard.p2 .why { color: #92400e; }

.tcard .meta { font-size: 12px; color: var(--muted); line-height: 1.4; }
.tcard .meta .contract { font-weight: 600; color: var(--ink-2); }

/* Stopka: termin z lewej, przyciski z prawej. W wąskiej kolumnie przyciski schodzą pod termin,
   a długi termin łamie się między datą a opisem - nic nie wystaje poza kartę. */
.tcard .foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.tcard .acts { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; min-width: 0; }
.tcard .acts .btn.sm { padding: 3px 8px; font-size: 11.5px; }
.tcard .due { flex-wrap: wrap; white-space: normal; border-radius: 10px; max-width: 100%; }
.tcard .due > span { white-space: nowrap; }

/* Termin jako chip: kolor mówi „kiedy”, niezależnie od wagi karty. */
.due {
    display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600;
    padding: 2px 8px; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums;
    background: var(--line-soft); color: var(--ink-2);
}
.due.over { background: var(--danger-bg); color: var(--danger); }
.due.today { background: var(--warn-bg); color: var(--warn); }
.due.near { background: var(--info-bg); color: var(--brand); }

/* Rodzaj pozycji - treść, nie ozdoba: „termin odpowiedzi na pismo” znaczy co innego
   niż „przypomnienie, które sam sobie założyłeś”, choć oba wypadają tego samego dnia. */
.todo-kind {
    display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .03em; padding: 1px 7px; border-radius: 999px;
    background: var(--line-soft); color: var(--ink-2);
}
.todo-kind.reminder { background: var(--info-bg); color: var(--brand); }
.todo-kind.letter { background: #e0f1f4; color: var(--accent); }
.todo-kind.timeline { background: #e9edf2; color: #0d1b2a; }
.todo-kind.card { background: #fdeee4; color: #c2410c; }

.prio { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.prio.p1 { color: var(--danger); }
.prio.p2 { color: #b45309; }
.prio.p3 { color: var(--muted); }

.todo-skipped { margin: 0 0 16px; font-size: 12.5px; color: var(--muted); }
.todo-skipped li { margin: 2px 0; }

/* ---------------------------------------------------------------- Tematy zbiorcze (docs/08) */
.topic-row .tag { font-size: 10px; padding: 1px 6px; border-radius: 10px; background: var(--brand-light); color: var(--brand); font-weight: 600; margin-left: 6px; vertical-align: middle; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 10px; }
.chip { font-size: 12px; padding: 2px 8px; border-radius: 12px; background: #f1f3f5; border: 1px solid var(--line); white-space: nowrap; }
.entry-row .dir { font-weight: 700; font-size: 15px; }
.plan-point { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; background: #fafbfc; }
.plan-point .fact { font-size: 13px; padding: 6px 0; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 2px; position: relative; padding-right: 40px; }
.plan-point .fact button { position: absolute; right: 0; top: 4px; }

/* ------------------------------------------------------------------ Decyzja o wiadomości

   Kafelki zastępują pamiętanie składni polecenia i nazw teczek. Każdy niesie trzy rzeczy:
   ikonę (rozpoznanie w ułamku sekundy), zdanie o tym, co decyzja robi, i widoczne wezwanie
   do działania - bez CTA kafelek nie wyglądał na klikalny i użytkownik go nie widział. */

.decision-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 12px; }

.decision-tile {
    position: relative; display: flex; flex-direction: column; gap: 6px;
    text-align: left; cursor: pointer; width: 100%;
    padding: 16px 16px 14px; border: 1px solid var(--line); border-radius: 12px;
    background: var(--surface); color: inherit; font: inherit;
    box-shadow: var(--shadow);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.decision-tile::before {
    content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
    border-radius: 12px 0 0 12px; background: var(--accent); opacity: 0; transition: opacity .12s ease;
}
.decision-tile:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.decision-tile:hover::before { opacity: 1; }
.decision-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.decision-tile .tile-icon { font-size: 20px; line-height: 1; }
.decision-tile strong { font-size: 15px; line-height: 1.3; }
.decision-tile span { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.decision-tile .tile-cta {
    margin-top: auto; padding-top: 6px;
    font-size: 13px; font-weight: 600; color: var(--accent);
}

/* Pasek nad treścią wiadomości: jedno zdanie i jeden przycisk. Wejście do wyboru teczki
   stoi na karcie ZAWSZE - wcześniej pojawiało się tylko wtedy, gdy asystent sam pytał,
   więc użytkownik nie miał gdzie kliknąć, żeby przenieść maila do teczki (2026-09-09). */

.decide-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin: 0 0 14px; padding: 12px 14px;
    border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 6%, var(--surface)), var(--surface));
}
.decide-bar.waiting { border-left-color: #b7791f; background: #fffbeb; }
.decide-bar strong { display: block; font-size: 14.5px; }
.decide-bar span { font-size: 12.5px; color: var(--muted); }
.decide-bar .btn { white-space: nowrap; }

/* ------------------------------------------------------------------ Propozycje asystenta

   Zamiast „odpisz numerami” - karta z własnym przyciskiem. Numer zostaje wyłącznie dla odpowiedzi mailem. */

.proposal-list { display: flex; flex-direction: column; gap: 10px; }

.proposal-card {
    display: flex; flex-direction: column; gap: 6px;
    padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px;
    background: linear-gradient(180deg, var(--surface), var(--bg));
}
.proposal-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.proposal-head strong { font-size: 14.5px; line-height: 1.35; }
.proposal-card .btn { align-self: flex-start; margin-top: 4px; }
.proposal-quote {
    font-size: 12px; font-style: italic; color: var(--muted);
    border-left: 2px solid var(--line); padding-left: 10px;
}

/* ================================================================== Dowody - teczki (docs/11, 2026-09-14)

   Karta teczki odpowiada w tej kolejności: co to za sprawa i w jakim jest stanie (nagłówek, liczby,
   streszczenie) → co mogę z niej przygotować (kafle „Z tej teczki”) → co w niej leży (oś korespondencji).
   Ustawienia i historia zeszły z pierwszego planu. Ikonę teczki dobiera asystent (lista zamknięta). */

/* Siatka teczek (17.09.2026): teczka to kafelek z tytułem i opisem, zawartość dopiero po wejściu.
   Pierwszy kafelek zakłada nową teczkę - inny od reszty, bo to działanie, a nie sprawa. */

.ev-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ev-bar input { max-width: 240px; }
.ev-bar #topicCount { margin-left: auto; }

/* Otwarta teczka nie rozciąga się na całą szerokość strony - wpisy czytałoby się jak afisz. */
.ev-open { max-width: 1240px; }

.ev-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(282px, 1fr)); gap: 14px; align-items: stretch; }
.ev-tiles .empty { grid-column: 1 / -1; }
.ev-tile { display: flex; flex-direction: column; gap: 10px; width: 100%; text-align: left; color: inherit; font: inherit;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 15px 16px 12px; cursor: pointer;
    min-height: 172px; box-shadow: 0 1px 2px rgba(13, 27, 42, .04), 0 2px 8px rgba(13, 27, 42, .05);
    transition: transform .12s, box-shadow .12s, border-color .12s; }
.ev-tile:hover { transform: translateY(-2px); border-color: var(--brand); box-shadow: 0 12px 28px -16px rgba(13, 27, 42, .4); text-decoration: none; }
.ev-tile .hd { display: flex; gap: 11px; align-items: flex-start; min-width: 0; }
.ev-tile .c { min-width: 0; flex: 1; }
.ev-tile .nm { font-weight: 700; font-size: 15px; line-height: 1.3; letter-spacing: -.01em; overflow-wrap: anywhere; }
.ev-tile .nm .pp { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.ev-tile .pills { margin-top: 5px; }
.ev-tile p { margin: 0; font-size: 12.8px; line-height: 1.45; color: var(--ink-2);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ev-tile p.none { color: var(--muted); font-style: italic; }
.ev-tile .ft { margin-top: auto; padding-top: 9px; border-top: 1px dashed var(--line); display: flex; gap: 5px; flex-wrap: wrap;
    font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ev-tile .ft span + span::before { content: "· "; }
.ev-tile .ft .warn { color: var(--warn); font-weight: 600; }
.ev-tile.closed { background: #fbfcfd; }
.ev-tile.closed .nm { color: var(--muted); }
.ev-tile.new { border-style: dashed; border-color: var(--brand); background: var(--brand-light); box-shadow: none; }
.ev-tile.new:hover { background: var(--surface); }
.ev-tile.new .ico { background: var(--brand); color: #fff; }
.ev-tile.new .ft { border-top-color: transparent; }
.ev-tile.new .go { color: var(--brand-dark); font-weight: 600; font-size: 13px; }

/* Ten sam kafelek na pulpicie, ciaśniej (karta „Teczki dowodów”). */
.ev-tiles.mini { grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 12px; }
.ev-tiles.mini .ev-tile { min-height: 138px; padding: 12px 13px 10px; gap: 8px; border-radius: 10px; }
.ev-tiles.mini .ev-tile .nm { font-size: 13.5px; }
.ev-tiles.mini .ev-tile p { font-size: 12.2px; -webkit-line-clamp: 2; }
.ev-tiles.mini .ico { width: 30px; height: 30px; border-radius: 7px; }
.ev-tiles.mini .ico svg { width: 17px; height: 17px; }

.ev-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ev-chip { border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 3px 10px; font-size: 12.5px;
    cursor: pointer; color: var(--ink-2); line-height: 1.4; font: inherit; font-size: 12.5px; }
.ev-chip:hover { border-color: var(--brand); }
.ev-chip.on { background: var(--brand-light); border-color: var(--brand); color: var(--brand-dark); font-weight: 600; }
.ev-chip.warn.on { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.ev-chip i { font-style: normal; opacity: .7; margin-left: 4px; font-variant-numeric: tabular-nums; }

.ico { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 8px;
    background: var(--brand-light); color: var(--brand); }
.ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico.lg { width: 42px; height: 42px; border-radius: 10px; }
.ico.lg svg { width: 23px; height: 23px; }
.ico.sm { width: 26px; height: 26px; border-radius: 6px; }
.ico.sm svg { width: 15px; height: 15px; }
.ico.closed { background: var(--line-soft); color: var(--muted); }

.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 2px 8px; border-radius: 10px;
    background: var(--line-soft); color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.party { background: var(--info-bg); color: var(--brand); }
.pill.soft { font-weight: 400; color: var(--muted); background: transparent; padding-left: 0; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pills { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.case-head { position: relative; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 16px 18px 14px; border-bottom: 1px solid var(--line-soft); }
.case-id { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.case-id h2 { margin: 0 0 6px; font-size: 19px; letter-spacing: -.01em; }
.case-menu { position: absolute; right: 18px; top: 56px; z-index: 5; min-width: 240px; background: var(--surface);
    border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-lg); padding: 6px; }
.case-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px;
    border-radius: 6px; cursor: pointer; color: inherit; font: inherit; font-size: 13px; }
.case-menu button:hover { background: var(--line-soft); }
.case-menu button.admin { color: var(--muted); border-top: 1px solid var(--line-soft); border-radius: 0; margin-top: 4px; padding-top: 10px; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); border-bottom: 1px solid var(--line-soft); }
.stat { display: block; text-align: left; background: none; border: 0; border-right: 1px solid var(--line-soft);
    padding: 11px 16px; cursor: pointer; color: inherit; font: inherit; }
.stat:last-child { border-right: 0; }
.stat:hover { background: #fafbfc; }
.stat.on { background: var(--brand-light); }
.stat b { display: block; font-size: 21px; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.stat span { font-size: 12px; color: var(--muted); }
.stat.warn b { color: var(--warn); }
.stat.plain { cursor: default; }
.stat.plain:hover { background: none; }

.summary-box { padding: 13px 18px 14px; border-bottom: 1px solid var(--line-soft); background: #fafbfc; }
.summary-box .lbl { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
    font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.summary-box .lbl em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--warn); margin-left: 8px; font-weight: 600; }
.summary-box p { margin: 6px 0 0; max-width: 80ch; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; white-space: pre-line; }
.summary-box p.none { color: var(--muted); font-style: italic; }

.zone { padding: 14px 18px 4px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 8px 18px 16px; border-bottom: 1px solid var(--line-soft); }
@media (max-width: 760px) { .tiles { grid-template-columns: 1fr; } }
.tile { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 13px 14px 12px; background: var(--surface); }
.tile h4 { margin: 0; font-size: 14.5px; }
.tile p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.tile .last { font-size: 12px; color: var(--ink-2); margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--line); font-variant-numeric: tabular-nums; }
.tile .btn { align-self: flex-start; margin-top: 4px; }

.review { margin: 14px 18px 0; padding: 10px 14px; border: 1px solid #eddcac; border-left: 3px solid var(--warn); background: var(--warn-bg);
    border-radius: 8px; display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.review b { color: var(--warn); }

.tl-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; padding: 14px 18px 10px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg button { border: 0; background: var(--surface); padding: 6px 12px; font: inherit; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.seg button.on { background: var(--brand-light); color: var(--brand-dark); font-weight: 600; }
.seg button i { font-style: normal; opacity: .65; margin-left: 4px; font-variant-numeric: tabular-nums; }
.tl-q { max-width: 260px; }
.tl-chips { padding: 0 18px 6px; }
.tl { padding: 4px 18px 18px; }
.tl-bulk { margin: 0 18px 8px; }

.ent { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.ent.reply { margin-left: 26px; border-top: 1px dashed var(--line); position: relative; }
.ent.reply::before { content: ""; position: absolute; left: -16px; top: -1px; height: 30px; width: 12px;
    border-left: 2px solid var(--line); border-bottom: 2px solid var(--line); border-radius: 0 0 0 6px; }
.ent.archived { opacity: .55; }
.ent .when { font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.ent .when small { display: block; color: var(--muted); font-weight: 400; }
.ent .when input { width: auto; margin: 6px 0 0; }
.ent .who { font-size: 12.5px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ent .who b { color: var(--ink-2); font-weight: 600; }
.ent .dir { font-weight: 700; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; }
.ent .dir.out { background: var(--brand-light); color: var(--brand-dark); }
.ent .dir.in { background: #e4f2f4; color: var(--accent); }
.ent h4 { margin: 3px 0 2px; font-size: 14px; line-height: 1.35; }
.ent p { margin: 0; font-size: 13px; color: var(--ink-2); }
.ent .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.ent .tag { font-size: 11.5px; padding: 1px 8px; border-radius: 10px; background: var(--line-soft); color: var(--ink-2); white-space: nowrap; margin: 0; font-weight: 500; }
.ent .tag.kind { background: var(--info-bg); color: var(--brand); }
.ent .tag.warn { background: var(--warn-bg); color: var(--warn); font-weight: 600; }
.ent .tag.ok { background: var(--ok-bg); color: var(--ok); }
.ent details summary { font-size: 12px; color: var(--brand); cursor: pointer; margin-top: 6px; list-style: none; }
.ent details summary::before { content: "▸ "; font-size: 10px; }
.ent details[open] summary::before { content: "▾ "; }
.ent blockquote { margin: 6px 0 0; padding-left: 10px; border-left: 3px solid var(--line); color: var(--muted); font-size: 12.5px; font-style: italic; max-width: 78ch; }
.ent .acts { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
@media (max-width: 700px) { .ent { grid-template-columns: 1fr; } .ent.reply { margin-left: 12px; } .ent .acts { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; } }

.howto { margin: 0 18px 18px; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 8px; background: #fafbfc; }
.howto h4 { margin: 0 0 8px; font-size: 13.5px; }
.howto ol { margin: 0; padding-left: 20px; font-size: 13px; display: grid; gap: 4px; }
.addr { font-family: var(--mono); font-size: 12.5px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; }

/* Widok pisma z teczki - kroki nad dotychczasowym warsztatem */
.lt-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); }
.lt-head h2 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.steps { list-style: none; margin: 0; padding: 14px 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; border-bottom: 1px solid var(--line-soft); }
.steps li { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--muted); background: #fafbfc; cursor: pointer; }
.steps li small { display: block; font-weight: 400; font-size: 11.5px; margin-top: 2px; }
.steps li.done { color: var(--ok); border-color: #bfe3cc; }
.steps li.on { color: var(--brand-dark); border-color: var(--brand); background: var(--brand-light); }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr 1fr; } }
.lt-body { padding: 16px 18px 20px; }

/* Okna: zestawienie jako dokument, lista plików paczki, kandydaci do teczki */
.doc { background: #fbfbf9; border: 1px solid var(--line); border-radius: 6px; padding: 20px 24px; font-size: 13px; line-height: 1.55; }
.doc h3 { margin: 2px 0 2px; font-size: 18px; }
.doc .facts { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; margin: 12px 0 16px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.doc .facts dt { color: var(--muted); }
.doc .facts dd { margin: 0; }
.doc ol { padding-left: 22px; margin: 0; display: grid; gap: 10px; }
.doc li b { font-variant-numeric: tabular-nums; }
.doc li .ln { color: var(--muted); }
.files { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.files li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 12px; border-bottom: 1px solid var(--line-soft); font-family: var(--mono); font-size: 12px; }
.files li:last-child { border-bottom: 0; }
.files li span { font-family: var(--font); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.files li.sum { background: #fafbfc; font-family: var(--font); font-weight: 600; }
.files li.miss { color: var(--danger); }
.cand { display: grid; grid-template-columns: auto 64px minmax(0, 1fr) auto; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line-soft); font-size: 13px; align-items: start; }
.cand input { width: auto; margin-top: 3px; }
.cand .w { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.cand .w small { display: block; color: var(--muted); }
.cand h5 { margin: 0; font-size: 13.5px; font-weight: 600; }
.cand .m { color: var(--muted); font-size: 12.5px; }
.cand .qq { font-size: 12.5px; font-style: italic; color: var(--muted); border-left: 2px solid var(--line); padding-left: 8px; margin-top: 4px; }
.cand .acts { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.gh { margin: 14px 0 4px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.gh:first-child { margin-top: 0; }
.state { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 14px; }
.state div { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font-size: 12px; color: var(--muted); }
.state div b { display: block; font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.modal.side { position: fixed; right: 0; top: 0; height: 100%; max-height: none; border-radius: 0; max-width: 460px; width: 100%; display: flex; flex-direction: column; margin: 0; }
.modal.side > .body { flex: 1; overflow: auto; }
.modal-backdrop.side { justify-content: flex-end; align-items: stretch; }

/* ------------------------------------------------- Administracja: wykorzystanie zasobów
   Własne klasy z przedrostkiem res-, bo .tiles i .tile mają w tym arkuszu dwie różne definicje. */
.res-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
@media (max-width: 760px) { .res-tiles { grid-template-columns: 1fr; } }
.res-tile { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; background: var(--surface); }
.res-tile .lbl { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.res-tile .n { font-size: 24px; font-weight: 700; color: var(--brand); line-height: 1.15; margin-top: 4px; font-variant-numeric: tabular-nums; }
.res-tile .t { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.res-tile .meter { margin: 8px 0 0; }
.res-tile .meter span.hi { background: var(--warn); }
.res-answer { display: flex; gap: 18px; align-items: flex-start; border: 1px solid var(--brand); border-radius: var(--radius);
    padding: 16px 18px; background: var(--brand-light); }
.res-answer .big { font-size: 40px; font-weight: 700; color: var(--brand-dark); line-height: 1; min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; }
.res-answer h3 { margin: 0 0 6px; font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.res-answer h3 select { width: auto; max-width: 260px; font-size: 14px; padding: 3px 6px; }
.res-answer p { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.res-answer input[type=number] { width: 64px; padding: 2px 6px; font-size: 13px; display: inline-block; }
@media (max-width: 560px) { .res-answer { flex-direction: column; gap: 8px; } .res-answer .big { text-align: left; } }
.res-h { margin: 18px 0 8px; font-size: 14.5px; }
.res-more > summary { cursor: pointer; font-weight: 600; }
.res-more > div { margin-top: 6px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* ---------------------------------------------------------------- /Admin: obciążenie silnika */
.eng-ctl { display: flex; align-items: center; gap: 12px; }
.eng-win { display: flex; gap: 4px; }
.eng-win button { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 3px 9px; font-size: 12.5px; cursor: pointer; color: var(--ink-2); }
.eng-win button.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.eng-status { border: 1px solid var(--line); border-left: 4px solid var(--ok); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px; font-size: 14px; line-height: 1.5; background: var(--surface); }
.eng-status.busy { border-left-color: var(--s2); }
.eng-status.warn { border-left-color: var(--warn); }
.eng-status.down { border-left-color: var(--danger); }
.eng-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .eng-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .eng-tiles { grid-template-columns: 1fr; } }
.eng-tile { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; background: var(--surface); min-width: 0; }
.eng-tile .lbl { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.eng-tile .n { font-size: 24px; font-weight: 700; color: var(--brand); line-height: 1.15; margin-top: 4px; font-variant-numeric: tabular-nums; }
.eng-tile .t { font-size: 12.5px; color: var(--muted); margin-top: 6px; line-height: 1.45; }
.eng-tile .sub { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; color: var(--ink-2); margin-top: 6px; font-variant-numeric: tabular-nums; }
.eng-meter { height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; margin-top: 8px; }
.eng-meter span { display: block; height: 100%; background: var(--brand); transition: width .4s ease; }
.eng-meter span.hi { background: var(--warn); }
.eng-meter span.crit { background: var(--danger); }
.eng-cores { display: flex; gap: 2px; margin-top: 8px; }
.eng-cores i { flex: 1; height: 16px; background: var(--line-soft); border-radius: 2px; position: relative; overflow: hidden; }
.eng-cores i b { position: absolute; bottom: 0; left: 0; right: 0; background: var(--s1); }
.eng-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
@media (max-width: 900px) { .eng-grid { grid-template-columns: 1fr; } }
.eng-grid .card { margin: 0; min-width: 0; }
/* Starsza reguła .chart (słupki w kartach pulpitu) ustawia stałą wysokość i wyrównanie do dołu - SVG z charts.js byłby przycięty od góry. */
.eng-grid .chart { display: block; height: auto; padding: 0; margin: 0; background: transparent; border: 0; }
.eng-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); margin-top: 6px; }
.eng-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.eng-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.eng-table th, .eng-table td { padding: 5px 8px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.eng-table th { color: var(--muted); font-weight: 600; font-size: 12px; }
.eng-table td.num, .eng-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.eng-h { margin: 14px 0 6px; font-size: 13.5px; }