/* Portal klienta PSI: Material Design 3 według platforma/DESIGN.md. Tokeny --md-sys-* są w m3_tokens.css (skrypt
   tools/m3_tokens.py z psi_theme/static/src/m3/_tokens.scss, jedno źródło z panelem); ten plik nie ma ani jednego hexa.
   Komponenty, które biblioteka material-esm ma, to elementy md-* (decyzja właściciela 20.10.2026: koniec replik); tu tylko
   to, czego biblioteka nie ma, miejsce w układzie i tokeny --md-<komponent>-*. Liczby spoza spec M3 mają komentarz.

   3.11.2026 (właściciel: portal od nowa, „m3, intuicyjny, kolorowy”): kolor mówi, czyj jest ruch i czego dotyczy. Klasa
   tonu ustawia cztery role, a kafel, karta i przycisk biorą je z jednego miejsca, jak Google Home i Ustawienia Androida.
   Portal zawsze jasny (decyzja właściciela 19.10.2026). */

@font-face { font-family: Roboto; font-weight: 400; font-display: swap; src: url("fonts/roboto-400.woff2") format("woff2"); }
@font-face { font-family: Roboto; font-weight: 500; font-display: swap; src: url("fonts/roboto-500.woff2") format("woff2"); }
/* podzbiór Material Symbols Outlined portalu (tools/icons.py); bez zapasowego kroju: portal nie łączy się z Google
   ani z Odoo po czcionki */
@font-face { font-family: "PSI Material Symbols"; font-weight: 400; font-display: block;
    src: url("fonts/material_symbols.woff2") format("woff2"); }

:root {
    /* pasek płaski bez fali, bo fala rozprasza, i bez kropki stop na końcu; token z poprawki bundla */
    --md-linear-progress-stop-indicator-display: none;
    --md-linear-progress-track-shape: var(--md-sys-shape-corner-full);
    --md-icon-font: "PSI Material Symbols";
    /* karta filled na tle surface: surface-container-low, spokojniej niż domyślne highest, a kafle w kolorze roli odcinają się */
    --md-filled-card-container-color: var(--md-sys-color-surface-container-low);
    --md-list-container-color: var(--md-sys-color-surface-container-low);
    color-scheme: light;
}

/* --- role kolorów: strona sprawy (DESIGN.md) --- */
.tone-you { --tone: var(--md-sys-color-olive); --on-tone: var(--md-sys-color-on-olive); --tone-container: var(--md-sys-color-olive-container); --on-tone-container: var(--md-sys-color-on-olive-container); }
.tone-due { --tone: var(--md-sys-color-due-orange); --on-tone: var(--md-sys-color-on-due-orange); --tone-container: var(--md-sys-color-due-orange-container); --on-tone-container: var(--md-sys-color-on-due-orange-container); }
.tone-zone { --tone: var(--md-sys-color-teal); --on-tone: var(--md-sys-color-on-teal); --tone-container: var(--md-sys-color-teal-container); --on-tone-container: var(--md-sys-color-on-teal-container); }
.tone-done { --tone: var(--md-sys-color-success); --on-tone: var(--md-sys-color-on-success); --tone-container: var(--md-sys-color-success-container); --on-tone-container: var(--md-sys-color-on-success-container); }
.tone-ai { --tone: var(--md-sys-color-tertiary); --on-tone: var(--md-sys-color-on-tertiary); --tone-container: var(--md-sys-color-tertiary-container); --on-tone-container: var(--md-sys-color-on-tertiary-container); }
.tone-info { --tone: var(--md-sys-color-primary); --on-tone: var(--md-sys-color-on-primary); --tone-container: var(--md-sys-color-primary-container); --on-tone-container: var(--md-sys-color-on-primary-container); }
.tone-alert { --tone: var(--md-sys-color-error); --on-tone: var(--md-sys-color-on-error); --tone-container: var(--md-sys-color-error-container); --on-tone-container: var(--md-sys-color-on-error-container); }
.tone-plain { --tone: var(--md-sys-color-secondary); --on-tone: var(--md-sys-color-on-secondary); --tone-container: var(--md-sys-color-secondary-container); --on-tone-container: var(--md-sys-color-on-secondary-container); }
/* wstrzymana: pełny error, nie kontener, bo kontener error zlewa się z kontenerem due-orange (DESIGN.md) */
.tone-hold { --tone: var(--md-sys-color-on-error); --on-tone: var(--md-sys-color-error); --tone-container: var(--md-sys-color-error); --on-tone-container: var(--md-sys-color-on-error); }

/* --- podstawa i klasy skali pisma (md-sys-typescale) --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; } /* kotwica nie chowa się pod paskiem 64 dp, 16 dp odstępu */
body {
    margin: 0; background: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface);
    overflow-x: clip; /* dymek md-tooltip przy prawej krawędzi paska nie ma otwierać poziomego przewijania */
    font: var(--md-sys-typescale-body-large-weight) var(--md-sys-typescale-body-large-size)/var(--md-sys-typescale-body-large-line-height) var(--md-sys-typescale-body-large-font);
    letter-spacing: var(--md-sys-typescale-body-large-tracking);
    font-variant-numeric: tabular-nums;
}
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
a { color: var(--md-sys-color-primary); }
[hidden] { display: none !important; } /* atrybut hidden przegrywa z display w :host komponentu i z klasami układu */
.headline-medium { font: var(--md-sys-typescale-headline-medium-weight) var(--md-sys-typescale-headline-medium-size)/var(--md-sys-typescale-headline-medium-line-height) var(--md-sys-typescale-headline-medium-font); letter-spacing: var(--md-sys-typescale-headline-medium-tracking); }
.headline-small { font: var(--md-sys-typescale-headline-small-weight) var(--md-sys-typescale-headline-small-size)/var(--md-sys-typescale-headline-small-line-height) var(--md-sys-typescale-headline-small-font); letter-spacing: var(--md-sys-typescale-headline-small-tracking); }
.title-large { font: var(--md-sys-typescale-title-large-weight) var(--md-sys-typescale-title-large-size)/var(--md-sys-typescale-title-large-line-height) var(--md-sys-typescale-title-large-font); letter-spacing: var(--md-sys-typescale-title-large-tracking); }
.title-medium { font: var(--md-sys-typescale-title-medium-weight) var(--md-sys-typescale-title-medium-size)/var(--md-sys-typescale-title-medium-line-height) var(--md-sys-typescale-title-medium-font); letter-spacing: var(--md-sys-typescale-title-medium-tracking); }
.title-small { font: var(--md-sys-typescale-title-small-weight) var(--md-sys-typescale-title-small-size)/var(--md-sys-typescale-title-small-line-height) var(--md-sys-typescale-title-small-font); letter-spacing: var(--md-sys-typescale-title-small-tracking); }
.body-large { font: var(--md-sys-typescale-body-large-weight) var(--md-sys-typescale-body-large-size)/var(--md-sys-typescale-body-large-line-height) var(--md-sys-typescale-body-large-font); letter-spacing: var(--md-sys-typescale-body-large-tracking); }
.body-medium { font: var(--md-sys-typescale-body-medium-weight) var(--md-sys-typescale-body-medium-size)/var(--md-sys-typescale-body-medium-line-height) var(--md-sys-typescale-body-medium-font); letter-spacing: var(--md-sys-typescale-body-medium-tracking); }
.body-small { font: var(--md-sys-typescale-body-small-weight) var(--md-sys-typescale-body-small-size)/var(--md-sys-typescale-body-small-line-height) var(--md-sys-typescale-body-small-font); letter-spacing: var(--md-sys-typescale-body-small-tracking); }
.label-large { font: var(--md-sys-typescale-label-large-weight) var(--md-sys-typescale-label-large-size)/var(--md-sys-typescale-label-large-line-height) var(--md-sys-typescale-label-large-font); letter-spacing: var(--md-sys-typescale-label-large-tracking); }
.label-medium { font: var(--md-sys-typescale-label-medium-weight) var(--md-sys-typescale-label-medium-size)/var(--md-sys-typescale-label-medium-line-height) var(--md-sys-typescale-label-medium-font); letter-spacing: var(--md-sys-typescale-label-medium-tracking); }
.label-small { font: var(--md-sys-typescale-label-small-weight) var(--md-sys-typescale-label-small-size)/var(--md-sys-typescale-label-small-line-height) var(--md-sys-typescale-label-small-font); letter-spacing: var(--md-sys-typescale-label-small-tracking); }
.muted { color: var(--md-sys-color-on-surface-variant); }
.error-text { color: var(--md-sys-color-error); }
/* ton z API (kryteria analizy) i ikona stanu w kolorze roli */
.tone-success { color: var(--md-sys-color-success); }
.tone-due-orange { color: var(--md-sys-color-due-orange); }
.tone-error { color: var(--md-sys-color-error); }
.tone-neutral { color: var(--md-sys-color-on-surface-variant); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip-link { position: absolute; left: 16px; top: -64px; z-index: 10; padding: 8px 16px; background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary); border-radius: var(--md-sys-shape-corner-full); }
.skip-link:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; }

/* --- układ: md-nav-rail (od 600 px), md-nav-bar (telefon), md-app-bar; każdy w landmarku nav albo header (axe region) --- */
.app { min-height: 100vh; }
.rail { display: none; } /* rail biblioteki jest sticky na 100vh w kolumnie obok treści */
.page { flex: 1; min-width: 0; overflow-x: clip; } /* zakładki na całą szerokość nie otwierają przewijania; clip nie psuje sticky paska */
.navbar { position: fixed; inset: auto 0 0 0; z-index: 3; }
.appbar { position: sticky; top: 0; z-index: 2; }
/* tytuł w pasku (wiersz 64 dp, tytuł 28 dp, podtytuł 20 dp): sam tytuł mieści dwa wiersze, z podtytułem jeden; długa nazwa firmy nie kończy
   się wielokropkiem po 28 znakach na telefonie (3.11.2026, przegląd portalu) */
.topbar h1 { margin: 0; overflow: hidden; white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.topbar[subtitle] h1 { -webkit-line-clamp: 1; line-clamp: 1; }
/* aktywna pozycja nawigacji: ikona wypełniona (Material Symbols FILL 1, DESIGN.md) */
md-nav-item md-icon[slot="active-icon"] { font-variation-settings: "FILL" 1; }
/* treść: marginesy klas okna M3 (compact 16 dp, od medium 24 dp); pod treścią 64 dp paska nawigacji, 56 dp FAB i 2 x 16 dp,
   żeby ostatni wiersz listy nie chował się pod FAB; szerokość do 1200 dp (poza spec M3), potem wyśrodkowana */
.main { padding: 0 16px 152px; max-width: 1200px; margin: 0 auto; }
/* kolumna listy i formularza: 840 dp, początek klasy expanded; szersza linia nie czyta się */
.column { max-width: 840px; margin-inline: auto; }
/* układ kanoniczny „supporting pane”: treść i panel 360 dp obok siebie, gdy z railem zostaje na to miejsce (poza spec M3: próg) */
/* Start: cztery bloki w kolejności czytania; od 1040 dp dwa rzędy: karta obok panelu, lista obok kafli (3.11.2026, przegląd portalu:
   w dwóch kolumnach karta i wysokie etapy spychały listę „Do zrobienia” poza ekran, a pod panelem zostawała pusta kolumna) */
.start { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 24px; margin-top: 8px; }
.start-hero { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.start-hero md-card.hero { flex: 1; }
.start-side, .start-list { display: grid; gap: 16px; min-width: 0; align-content: start; }
.start-stats { align-content: start; }
.pm-card { display: grid; gap: 8px; }
@media (min-width: 600px) {
    .app { display: flex; align-items: stretch; }
    .rail { display: block; }
    .navbar { display: none; }
    .main { padding: 0 24px 104px; } /* pod treścią 56 dp FAB i 2 x 24 dp */
}
@media (min-width: 1040px) {
    .start { grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: auto 1fr; }
    .start-hero, .start-list { grid-column: 1; }
    .start-side, .start-stats { grid-column: 2; }
    .start-hero--wide { grid-column: 1 / -1; }
}

/* --- sekcje i powtarzalne układy --- */
.section { margin-top: 24px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
/* podpis grupy jak Ustawienia Androida: title-small w kolorze primary nad listą */
.group-label { margin: 0 16px 8px; color: var(--md-sys-color-primary); }
.summary { display: flex; align-items: center; gap: 8px; margin: -4px 0 12px; }
/* odnośnik „Po terminie” na liście: 48 dp na palec */
a.summary { display: inline-flex; min-height: 48px; text-decoration: underline; }
.summary md-icon { --md-icon-size: 20px; color: inherit; }
.stack > * + * { margin-top: 16px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.grow { flex: 1 1 240px; min-width: 0; }

/* kafel i awatar: 40 dp, spec M3 list item leading; kolor to rola */
.tile, .avatar {
    width: 40px; height: 40px; flex: none; display: inline-grid; place-items: center; border-radius: var(--md-sys-shape-corner-full);
    background: var(--tone-container); color: var(--on-tone-container);
}
.tile md-icon, .avatar md-icon { color: inherit; --md-icon-size: 24px; }
/* praca AI w kaflu: wskaźnik M3 zamiast kręconej ikony, w kolorze roli, 24 dp jak ikona kafla */
.tile md-progress { --md-circular-progress-size: 24px; --md-circular-progress-active-indicator-color: var(--on-tone-container); }

/* --- komponenty biblioteki: miejsce w układzie i tokeny --- */
/* zakładki na całą szerokość treści, jak pasek */
md-tabs.tabs { margin: 0 -16px; }
@media (min-width: 600px) { md-tabs.tabs { margin: 0 -24px; } }
md-chip-set.contract-company { margin-top: 12px; }
md-chip-set.contract-company img[slot="icon"] { height: 18px; width: auto; } /* logo jak ikona chipa: 18 dp */
md-list.list { border-radius: var(--md-sys-shape-corner-medium); overflow: hidden; }
md-list-item [slot="headline"], md-list-item [slot="supporting-text"] { overflow-wrap: anywhere; }
/* wiersz, do którego prowadzi odnośnik: kontener secondary, żeby osoba od razu wiedziała, gdzie patrzeć */
md-list-item:target { background: var(--md-sys-color-secondary-container); }
/* kwota w trailing supporting text: body-medium zamiast label-small, bo to wartość, nie metadana (P18) */
md-list.amounts, #kryteria md-list {
    --md-list-item-trailing-supporting-text-font: var(--md-sys-typescale-body-medium-font);
    --md-list-item-trailing-supporting-text-size: var(--md-sys-typescale-body-medium-size);
    --md-list-item-trailing-supporting-text-line-height: var(--md-sys-typescale-body-medium-line-height);
    --md-list-item-trailing-supporting-text-weight: var(--md-sys-typescale-body-medium-weight);
}
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 4px; }
.row-actions form { margin: 0; }
.row-badge { margin-top: 8px; }
md-text-field.field, md-select.field { width: 100%; }
.check { display: flex; align-items: center; gap: 4px; }
/* długa etykieta nie ściska pola wyboru (3.11.2026, przegląd portalu) */
.check md-checkbox, .check md-radio { flex: none; }
md-card.card { padding: 16px; }
md-card.card + md-card.card { margin-top: 12px; }
md-card.card-error { --md-filled-card-container-color: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
/* przycisk w kolorze roli karty: tokeny bundla, wspólne dla odmian */
md-button.on-tone {
    --md-button-container-color: var(--tone); --md-button-label-text-color: var(--on-tone); --md-button-icon-color: var(--on-tone);
    --md-button-hover-label-text-color: var(--on-tone); --md-button-focus-label-text-color: var(--on-tone); --md-button-pressed-label-text-color: var(--on-tone);
    --md-button-hover-icon-color: var(--on-tone); --md-button-focus-icon-color: var(--on-tone); --md-button-pressed-icon-color: var(--on-tone);
    --md-button-hover-state-layer-color: var(--on-tone); --md-button-pressed-state-layer-color: var(--on-tone);
}
md-button.tonal-tone {
    --md-button-container-color: var(--tone-container); --md-button-label-text-color: var(--on-tone-container); --md-button-icon-color: var(--on-tone-container);
    --md-button-hover-label-text-color: var(--on-tone-container); --md-button-focus-label-text-color: var(--on-tone-container); --md-button-pressed-label-text-color: var(--on-tone-container);
    --md-button-hover-icon-color: var(--on-tone-container); --md-button-focus-icon-color: var(--on-tone-container); --md-button-pressed-icon-color: var(--on-tone-container);
    --md-button-hover-state-layer-color: var(--on-tone-container); --md-button-pressed-state-layer-color: var(--on-tone-container);
}
/* działanie niszczące (odebranie dostępu) */
md-button.md-button--error {
    --md-button-label-text-color: var(--md-sys-color-error); --md-button-hover-label-text-color: var(--md-sys-color-error);
    --md-button-focus-label-text-color: var(--md-sys-color-error); --md-button-pressed-label-text-color: var(--md-sys-color-error);
    --md-button-hover-state-layer-color: var(--md-sys-color-error); --md-button-pressed-state-layer-color: var(--md-sys-color-error);
}
/* FAB „Dodaj plik”: 16 dp od krawędzi, nad paskiem nawigacji na telefonie; w kolorze klienta, bo to jego działanie */
.fab {
    position: fixed; right: 16px; bottom: 80px; z-index: 2;
    --md-fab-container-color: var(--tone-container); --md-fab-icon-color: var(--on-tone-container); --md-fab-label-text-color: var(--on-tone-container);
    --md-fab-hover-icon-color: var(--on-tone-container); --md-fab-hover-label-text-color: var(--on-tone-container);
    --md-fab-focus-icon-color: var(--on-tone-container); --md-fab-focus-label-text-color: var(--on-tone-container);
    --md-fab-pressed-icon-color: var(--on-tone-container); --md-fab-pressed-label-text-color: var(--on-tone-container);
    --md-fab-hover-state-layer-color: var(--on-tone-container); --md-fab-pressed-state-layer-color: var(--on-tone-container);
}
/* do 599 px FAB okrągły bez etykiety, od 600 px rozwinięty (G305, 22.10.2026) */
.fab-wide { display: none; }
@media (min-width: 600px) { .fab { bottom: 24px; right: 24px; } .fab-wide { display: inline-flex; } .fab-phone { display: none; } }
md-snackbar { --md-snackbar-bottom: 80px; } /* nad paskiem nawigacji na telefonie, 16 dp odstępu */
@media (min-width: 600px) { md-snackbar { --md-snackbar-bottom: 24px; } }

/* plakietka stanu (P7 audytu 23.10.2026): biblioteka nie ma komponentu stanu, a assist chip to działanie; span bez roli
   przycisku, wymiary jak chip M3: 32 dp, wcięcia 8 i 16 dp, ikona 18 dp, promień full */
.badge {
    display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 16px 0 8px; flex: none; width: fit-content;
    border-radius: var(--md-sys-shape-corner-full); white-space: nowrap;
    background: var(--psi-badge-container); color: var(--psi-badge-on);
    font: var(--md-sys-typescale-label-large-weight) var(--md-sys-typescale-label-large-size)/var(--md-sys-typescale-label-large-line-height) var(--md-sys-typescale-label-large-font);
    letter-spacing: var(--md-sys-typescale-label-large-tracking);
}
.badge md-icon { --md-icon-size: 18px; color: inherit; }
.badge--primary { --psi-badge-container: var(--md-sys-color-primary-container); --psi-badge-on: var(--md-sys-color-on-primary-container); }
.badge--tertiary { --psi-badge-container: var(--md-sys-color-tertiary-container); --psi-badge-on: var(--md-sys-color-on-tertiary-container); }
.badge--due-orange { --psi-badge-container: var(--md-sys-color-due-orange-container); --psi-badge-on: var(--md-sys-color-on-due-orange-container); }
.badge--success { --psi-badge-container: var(--md-sys-color-success-container); --psi-badge-on: var(--md-sys-color-on-success-container); }
.badge--error { --psi-badge-container: var(--md-sys-color-error-container); --psi-badge-on: var(--md-sys-color-on-error-container); }
.badge--neutral { --psi-badge-container: var(--md-sys-color-secondary-container); --psi-badge-on: var(--md-sys-color-on-secondary-container); }
.badge:not(:has(md-icon)) { padding: 0 16px; }
/* plakietka z długim zdaniem (stan dokumentu, wpływ powiązania): łamie się na telefonie zamiast wychodzić poza ekran; poza spec M3 */
.badge--wrap { height: auto; min-height: 32px; white-space: normal; padding-block: 4px; }

/* --- Start: karta „czyj ruch” --- */
/* jeden element wyróżniony na ekranie: kontener koloru strony i promień extra-large jak hero w Google Home (poza spec karty) */
md-card.hero {
    --md-filled-card-container-color: var(--tone-container); --md-filled-card-container-shape: var(--md-sys-shape-corner-extra-large);
    color: var(--on-tone-container); padding: 24px;
}
.hero .muted, .hero a, .hero .pair dt { color: inherit; }
.hero .pairs { margin-top: 16px; }
.hero-sentence { margin-top: 8px; }
.hero-note { margin-top: 8px; }
.hero-next { margin-top: 16px; }
/* text button na kontenerze koloru strony: tekst w on-tone-container, bo primary nie trzyma tam kontrastu; wcięcie 12 dp, tekst w linii zdania */
.hero-more { margin: 4px 0 0 -12px; }
.hero-more md-button {
    --md-button-label-text-color: var(--on-tone-container); --md-button-hover-label-text-color: var(--on-tone-container);
    --md-button-focus-label-text-color: var(--on-tone-container); --md-button-pressed-label-text-color: var(--on-tone-container);
    --md-button-hover-state-layer-color: var(--on-tone-container); --md-button-pressed-state-layer-color: var(--on-tone-container);
}
.hero-action { margin-top: 24px; }
.hero-action form { margin: 0; }
/* etapy: odcinki 8 dp, zrobione i bieżący w kolorze strony, kolejne w on-tone-container z przezroczystością warstwy stanu
   „dragged”; na telefonie jedno zdanie zamiast pięciu podpisów (poza spec M3: M3 nie ma komponentu etapów) */
.stages-text { margin-top: 24px; }
.stages { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.stage::before { content: ""; display: block; height: 8px; border-radius: var(--md-sys-shape-corner-full); background: var(--on-tone-container); opacity: var(--md-sys-state-dragged-state-layer-opacity); }
.stage.done::before, .stage.now::before { background: var(--tone); opacity: 1; }
.stage > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 600px) {
    .stages-text { display: none; }
    .stages { margin-top: 24px; }
    .stage > span { position: static; display: block; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; margin-top: 8px; }
    .stage.now > span { font-weight: var(--md-sys-typescale-title-small-weight); }
}

/* kafle z liczbami: odnośniki do sekcji ekranu Dokumenty z warstwą stanu md-ripple; promień large (poza spec M3: nie ma
   komponentu kafla liczby, wzór: Google Home) */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stat {
    position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-height: 96px; padding: 16px;
    border-radius: var(--md-sys-shape-corner-large); background: var(--tone-container); color: var(--on-tone-container); text-decoration: none;
}
.stat--wide { grid-column: 1 / -1; min-height: 0; }
.stat md-progress { --md-linear-progress-active-indicator-color: var(--tone); width: 100%; }
.stat-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }

/* kierownik projektu w panelu: awatar, nazwa, jedno działanie tonalne */
.person { display: flex; align-items: center; gap: 16px; }
.person > div { min-width: 0; overflow-wrap: anywhere; }

/* --- Rozmowa: dymki jak Wiadomości Google; ja po prawej w kolorze klienta, PM w kolorze Due, Frank AI w akcencie AI --- */
.thread { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.thread-day { align-self: center; margin: 16px 0 8px; padding: 4px 12px; border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface-variant); }
.message { display: flex; align-items: flex-end; gap: 8px; max-width: min(88%, 640px); }
.message.me { align-self: flex-end; }
.message .avatar { width: 32px; height: 32px; } /* awatar 32 dp jak w Dyskusjach panelu: poza spec M3 */
.message .avatar md-icon { --md-icon-size: 18px; }
.message.same .avatar { visibility: hidden; }
.message.same { margin-top: -4px; }
.message.same .message-name { display: none; }
.bubble { min-width: 0; padding: 8px 16px; border-radius: var(--md-sys-shape-corner-large); background: var(--tone-container); color: var(--on-tone-container); }
.bubble .muted, .bubble .error-text { color: inherit; } /* kolor błędu na kontenerze AI nie trzyma kontrastu; błąd mówi zdanie */
.message.me .bubble { border-bottom-right-radius: var(--md-sys-shape-corner-extra-small); }
.message:not(.me) .bubble { border-bottom-left-radius: var(--md-sys-shape-corner-extra-small); }
.message-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.message-text { white-space: pre-line; overflow-wrap: anywhere; }
/* źródła odpowiedzi Frank AI: odnośnik z wysokością na palec, jak „Po terminie” */
[data-sources] a { display: inline-block; padding-block: 14px; }
.message-text.clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.bubble md-button { margin-left: -12px; } /* wcięcie text buttona 12 dp: tekst w linii wiadomości */
.composer { display: grid; gap: 12px; margin-top: 16px; }
/* na ekranie rozmowy pole wiadomości jest przyklejone nad paskiem nawigacji: pisze się zawsze w tym samym miejscu */
.chat .composer { position: sticky; bottom: 72px; z-index: 1; display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; background: var(--md-sys-color-surface); }
.chat .composer md-text-field { flex: 1; min-width: 0; }
@media (min-width: 600px) { .chat .composer { bottom: 0; } }
.chips { margin-top: 16px; }

/* --- oś czasu: kółka 32 dp z ikoną stanu i linia outline-variant; biblioteka nie ma komponentu (poza spec M3: wymiary) --- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; display: flex; gap: 16px; padding-bottom: 24px; }
.timeline li::before { content: ""; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--md-sys-color-outline-variant); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::before { display: none; }
.dot { position: relative; z-index: 1; width: 32px; height: 32px; flex: none; display: inline-grid; place-items: center; border-radius: var(--md-sys-shape-corner-full); background: var(--tone-container); color: var(--on-tone-container); }
.dot md-icon { --md-icon-size: 18px; color: inherit; }
.dot.next { background: var(--md-sys-color-surface); box-shadow: inset 0 0 0 2px var(--md-sys-color-outline-variant); }
.timeline-text { min-width: 0; padding-top: 4px; }

/* --- pary, liczby --- */
.pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px 24px; }
.pair dt { font: var(--md-sys-typescale-label-medium-weight) var(--md-sys-typescale-label-medium-size)/var(--md-sys-typescale-label-medium-line-height) var(--md-sys-typescale-label-medium-font);
    letter-spacing: var(--md-sys-typescale-label-medium-tracking); color: var(--md-sys-color-on-surface-variant); }
.pair dd { overflow-wrap: anywhere; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.kpis .stat { min-height: 0; }
.kpis .headline-medium { overflow-wrap: anywhere; }

/* --- wysyłka plików jak Dysk Google: panel w rogu, kolor klienta, błąd zostaje do zamknięcia --- */
.upload-panel {
    position: fixed; right: 16px; bottom: 80px; z-index: 4; width: min(360px, calc(100vw - 32px)); display: flex; align-items: center; gap: 16px; padding: 16px;
    border-radius: var(--md-sys-shape-corner-large); background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); --md-elevation-level: 3;
}
.upload-panel__body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.upload-panel md-progress { width: 100%; margin-top: 8px; }
@media (min-width: 600px) { .upload-panel { bottom: 24px; right: 24px; } }
/* przeciąganie pliku: warstwa na całe okno w kontenerze klienta; nie łapie kursora, zdarzenia obsługuje dokument */
.drop-overlay {
    position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; padding: 24px; text-align: center; pointer-events: none;
    background: var(--tone-container); color: var(--on-tone-container);
}

/* --- logowanie i strony bez nawigacji: karta na surface-container, jak logowanie Google --- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--md-sys-color-surface-container); }
.login md-card.card {
    --md-filled-card-container-color: var(--md-sys-color-surface-container-lowest); --md-filled-card-container-shape: var(--md-sys-shape-corner-extra-large);
    width: 100%; max-width: 448px; padding: 32px; /* 448 dp: szerokość karty logowania Google, poza spec M3 */
}
.login md-card.reading-card { max-width: 640px; } /* informacja o danych: ok. 70 znaków w wierszu */
.login md-card.card-error { --md-filled-card-container-color: var(--md-sys-color-error-container); padding: 16px; max-width: none; --md-filled-card-container-shape: var(--md-sys-shape-corner-medium); }
.brand { display: block; color: var(--md-sys-color-primary); }

/* --- sekcja zwinięta: pozycja listy z ikoną rozwinięcia (M3 list item), biblioteka nie ma komponentu rozwijania; warstwa stanu
   on-surface z tokenów przez ::before (P31), ikona przez ::after: plus i minus, bo CLAUDE.md nie dopuszcza chevronów --- */
details > summary { position: relative; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 16px; min-height: 56px;
    padding: 8px 16px; margin: 0; border-radius: var(--md-sys-shape-corner-medium); background: var(--md-sys-color-surface-container-low); }
details > summary::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--md-sys-color-on-surface);
    opacity: 0; pointer-events: none; transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard); }
details > summary:hover::before { opacity: var(--md-sys-state-hover-state-layer-opacity); }
details > summary:focus-visible::before { opacity: var(--md-sys-state-focus-state-layer-opacity); }
details > summary:active::before { opacity: var(--md-sys-state-pressed-state-layer-opacity); }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: "add"; margin-left: auto; font-family: var(--md-icon-font);
    font-size: 24px; line-height: 1; font-weight: 400; font-feature-settings: "liga"; color: var(--md-sys-color-on-surface-variant); }
details[open] > summary { margin-bottom: 8px; }
details[open] > summary::after { content: "remove"; }
.glossary { border-radius: var(--md-sys-shape-corner-medium); overflow: hidden; background: var(--md-sys-color-surface-container-low); }
.glossary details > summary { border-radius: 0; }
.glossary details + details { border-top: 1px solid var(--md-sys-color-outline-variant); }
.glossary details[open] > summary { margin-bottom: 0; }
.glossary-text { padding: 0 16px 16px; }
.glossary-text > * + * { margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 100ms !important; animation: none !important; }
}

/* pole podpisu (r13 F): M3 nie ma komponentu podpisu; obrys i kształt jak outlined text field, tusz on-surface, 160 dp (poza spec M3) */
.signature-pad { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.signature-pad canvas { width: 100%; height: 160px; touch-action: none; background: var(--md-sys-color-surface-container-lowest);
    color: var(--md-sys-color-on-surface); border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-extra-small); }
.signature-pad canvas:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; }

/* pytania z jedną odpowiedzią (DEC-115): grupa md-radio z legendą, bez ramki fieldset */
fieldset.choices { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
fieldset.choices legend { padding: 0; margin-bottom: 4px; }
fieldset.choices .check { gap: 12px; min-height: 48px; }
.stack > * + fieldset.choices { margin-top: 16px; }

/* Status MŚP (2.11.2026): krótkie listy instrukcji; pola liczb do góry, bo tekst pomocniczy bywa dwuwierszowy; M3 nie podaje
   odstępów w formularzu, więc skala 4 dp, poza spec M3 */
.size-list { padding-left: 20px; }
.size-list li + li { margin-top: 4px; }
.size-rules { padding: 0 16px 16px; }
.size-rules > * + * { margin-top: 8px; }
.size-numbers { align-items: flex-start; row-gap: 16px; }
fieldset.size-year { gap: 16px; }
fieldset.size-year legend { margin-bottom: 12px; }
.stack > .size-year + .size-year { margin-top: 24px; }
md-text-field[error] { scroll-margin-top: 80px; }