/* Wygląd powłoki aplikacji. Kolory i kształt są jedne dla powłoki, ramy (stagewright), formularzy (formwright)
   i diagramów (diagramwright): zmienne motywu themewright --thw-* (role, tony --thw-tone-<ton>, D81; zaokrąglenia,
   cień, grubość znaku tonu), ustawiane ze schematu kolorów instalacji (src/appearance.ts, D30) jako
   light-dark(dzień, noc), a bez konfiguracji – z motywu domyślnego themewright. Tryb Dzień / Noc / Auto to
   `color-scheme` strony. Kroje i odstępy formularzy zostają przy --sf-* formwright, układ ramy – przy --stw-*. */
:root { font-family: var(--sf-font); color: var(--thw-ink); }
body { margin: 0; background: var(--thw-page); }
h1, h2 { font-family: var(--sf-font-display); font-weight: 600; }
/* Pasek górny ramy jest przyklejony (stagewright D14): treść, która sama coś przykleja u góry, stoi pod nim
   (`top: var(--stw-top-height)`, z-index poniżej 10 – paska), np. pasek akcji formularza w motywie zwartym. Zmienną
   mierzy rama na swoim węźle, więc wartość pochodna też jest ustawiona na nim. */
.stw-frame { --sf-sticky-top: var(--stw-top-height, 0px); }
/* Toasty ramy (prawy dolny róg) stoją nad paskiem zapisu formularza, który formwright przykleja do dołu okna
   (`bottom: 12px`, wysokość 52 px: przycisk 34 px, odstępy 2 × 8 px, ramka 2 × 1 px). Inaczej toast zasłania „Zapisz”
   w prawym rogu paska, a wskaźnik nad toastem wstrzymuje jego znikanie, więc przycisk zostaje zasłonięty, dopóki osoba
   próbuje w niego trafić (#356). Odstęp regionu od dołu okna to token ramy; górną granicę regionu rama liczy z niego
   sama. Ten sam na każdej stronie i w każdym stylu, także bez paska u dołu: toasty nie skaczą przy przejściu. */
:root { --stw-toasts-bottom: calc(12px + 52px); }
/* Ten sam pas u dołu okna omija przewijanie do pola (fokus z klawiatury, przejście do błędu): pole staje nad paskiem
   zapisu, a nie pod nim (#373). */
:root { scroll-padding-bottom: var(--stw-toasts-bottom); }
.appearance { display: flex; align-items: center; gap: 1rem; }
.modes { display: flex; padding: 2px; border: 1px solid var(--thw-line); border-radius: var(--thw-radius-small); }
.mode { width: 1.9rem; height: 1.7rem; border: 0; border-radius: var(--thw-radius-small); background: none; color: var(--thw-muted); font: inherit; cursor: pointer; }
.mode[aria-pressed="true"] { background: color-mix(in srgb, var(--thw-tone-accent) 18%, transparent); color: var(--thw-ink); }
.swatches { display: flex; gap: .4rem; }
.swatch { width: 1.15rem; height: 1.15rem; padding: 0; border: 0; border-radius: 50%; background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); cursor: pointer; }
.swatch[aria-pressed="true"] { outline: 2px solid var(--thw-ink); outline-offset: 2px; }
.mode:focus-visible, .swatch:focus-visible { outline: 2px solid var(--thw-tone-accent); outline-offset: 2px; }
.brand { display: flex; align-items: center; gap: .55rem; color: inherit; text-decoration: none; font: 600 1.25rem var(--sf-font-display); }
.brand img { border-radius: 22%; object-fit: contain; }  /* znak z konfiguracji (D30) może nie być kwadratem */
.empty { max-width: 32rem; margin: 4rem auto; text-align: center; }
.empty p { color: var(--thw-muted); line-height: 1.5; }
.primary { display: inline-block; padding: .6rem 1rem; border-radius: var(--thw-radius-small); background: var(--thw-tone-accent); color: var(--thw-accent-ink); text-decoration: none; font-weight: 600; }
.heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.document-kind { margin: 0; color: var(--thw-muted); font-size: .9rem; } /* rodzaj nad tytułem dokumentu (D143) */
.back { color: var(--thw-muted); text-decoration: none; }
/* Linki w treści (#423): bez tej reguły zostawał niebieski przeglądarki (żadna reguła ramy ani motywu ich nie dotyczy).
   Akcent stanu motywu – kontrakt kontrastu themewright (grupa state-text) daje mu ≥ 4,5:1 na tłach strony, powierzchni
   i menu; najechanie – grubsze podkreślenie, fokus – obramowanie jak przy przyciskach. Siła jednego elementu
   (`:where`): każda reguła z klasą (przyciski, „← wstecz”, chipy filtrów, menu ramy) wygrywa i daje swój wygląd. */
:where(.stw-content) a { color: var(--thw-tone-accent); text-underline-offset: .15em; }
:where(.stw-content) a:hover { text-decoration-thickness: 2px; }
:where(.stw-content) a:focus-visible { outline: 2px solid var(--thw-tone-accent); outline-offset: 2px; border-radius: 2px; }
.notice { color: var(--thw-muted); }
.notice.error { color: var(--thw-tone-danger); }
/* Potwierdzenie zapisu (np. nowa wersja rodzaju w zakładce ekranu rodzaju, D111): tekst w kolorze treści, znak tonu sukcesu z lewej. */
.notice.success { color: var(--thw-ink); padding-left: .6rem; box-shadow: inset var(--thw-tone-bar) 0 0 var(--thw-tone-success); }
/* Brakujące prawo grupy (D115): ostrzeżenie w kolorze treści, znak tonu ostrzeżenia z lewej, propozycja pod zdaniem. */
.notice.missing-right { color: var(--thw-ink); padding-left: .6rem; box-shadow: inset var(--thw-tone-bar) 0 0 var(--thw-tone-warning); }
.notice.missing-right p { margin: 0 0 .4rem; }
table.entries { width: 100%; border-collapse: collapse; }
table.entries th, table.entries td { padding: .5rem .6rem; border-bottom: 1px solid var(--thw-line); text-align: left; }
.entries-scroll { max-width: 100%; overflow-x: auto; } /* tables.ts: szeroka tabela przewija się w ramce */
/* Akcje wiersza (np. procesu) w kolumnie jedna pod drugą – nie rozpychają tabeli poza obszar roboczy. */
table.entries td.row-actions .buttons { flex-direction: column; align-items: stretch; }
table.entries td.row-actions .file-choice { flex-direction: column; align-items: stretch; }
table.entries td.row-actions :is(.buttons, .file-choice) > :is(button, a) { white-space: nowrap; }
/* Akcje wiersza ikonami (lista procesów, D114): w jednym rzędzie, a „⋯” otwiera menu nad stroną przy przycisku
   (`popoverAt` ramy, processes.ts; wysokość ograniczona do miejsca w oknie – stąd `overflow: auto`). */
table.entries td.row-actions .buttons.icons { flex-direction: row; flex-wrap: nowrap; }
.row-menu { position: fixed; inset: auto; margin: 0; overflow: auto; padding: .5rem; display: none; flex-direction: column; align-items: stretch;
  gap: .4rem; min-width: 12rem; border: 1px solid var(--thw-line); border-radius: var(--thw-radius); background: var(--thw-surface);
  color: var(--thw-ink); box-shadow: var(--thw-shadow); }
.row-menu:popover-open { display: flex; }
.row-menu .file-choice { justify-content: space-between; }
.row-menu .notice { margin: 0; max-width: 20rem; }
.file-choice { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.file-choice .file-name { font-size: .875em; overflow-wrap: anywhere; }
table.entries th { color: var(--thw-muted); font-weight: 500; }
/* Ton z reguł listy (D82; documents.ts `toned`): klasy tonów formwright (`sf-tone-<ton>`, odcień z --thw-tone-<ton>,
   D81). Znak tonu to pasek z lewej o grubości --thw-tone-bar, jak przy wierszu tabeli formwright, sekcji i karcie:
   wiersz – tło i pasek przy pierwszej komórce; komórka – pasek, tło i tekst tonu (para sprawdzana kontrastem na
   serwerze, pasek – progiem znaku tonu). */
table.entries tr.sf-tone > td { background: var(--sf-tone-soft); }
table.entries tr.sf-tone > td:first-child, table.entries td.sf-tone { box-shadow: inset var(--thw-tone-bar) 0 0 var(--sf-tone); }
table.entries td.sf-tone { background: var(--sf-tone-soft); color: var(--sf-tone-text); font-weight: 600; }
/* Miniatura pola obrazu na liście (D143). */
.list-thumb { display: block; width: 3rem; height: 3rem; object-fit: cover; border-radius: var(--thw-radius-small); }
/* Podpis tonu (D143): plakietka w kolorze tonu przy treści komórki. */
.tone-badge { display: inline-block; margin-left: .35rem; padding: 0 .5rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--sf-tone);
  color: var(--sf-tone-text); font-size: .8em; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.lead { color: var(--thw-muted); margin-top: -.5rem; }
.stage-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: -.5rem 0 1rem; }
.stage { display: inline-block; padding: .15rem .6rem; border-radius: 999px; background: color-mix(in srgb, var(--thw-tone-accent) 15%, transparent); color: var(--thw-ink); font-size: .9em; }
/* Etap w tonie (`nc:tone`, #299): tło i tekst tonu formwright, znak tonu z lewej – jak wiersz listy w tonie (D82). */
.stage.sf-tone { border-radius: var(--thw-radius-small); background: var(--sf-tone-soft); color: var(--sf-tone-text); box-shadow: inset var(--thw-tone-bar) 0 0 var(--sf-tone); font-weight: 600; }
.action { padding: .4rem .8rem; border: 1px solid var(--thw-tone-accent); border-radius: var(--thw-radius-small); background: var(--thw-surface); color: var(--thw-tone-accent); font-weight: 600; cursor: pointer; }
.action:disabled, .secondary:disabled, .process-order button:disabled { border-color: var(--thw-line); color: var(--thw-muted); cursor: not-allowed; }
.stage-bar .hint { color: var(--thw-muted); font-size: .9em; }
.stage-bar .notice { flex-basis: 100%; margin: 0; }
.stage-bar[hidden] { display: none; }
/* Dokument sprzed etapów (D118): zdanie z przyciskiem przeniesienia w miejscu odznaki etapu. */
.stage-bar .stageless { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.stage-bar .stageless p { margin: 0; color: var(--thw-muted); }
.stageless-question { margin: 0 0 1rem; padding: .8rem 1rem; border: 1px solid var(--thw-line); border-left: 3px solid var(--thw-tone-accent); border-radius: var(--thw-radius); }
.stageless-question p { margin: 0 0 .5rem; }
.stageless-question ul { margin: 0 0 .5rem; }
/* Diagram etapów dokumentu (D20): rozwijany pod etapem, płótno jak diagram procesu. */
.stage-diagram .diagram-canvas { margin-top: .5rem; }
/* Podgląd wydruku (D132): strony na szerokość kolumny, jak kartki z cieniem; tło białe jak papier (także w trybie
   ciemnym – to obraz wydruku, nie powierzchnia aplikacji), cień własny – `--thw-shadow` style bez cienia (paper) zerują. */
.print-preview { display: grid; gap: 1rem; margin-top: .5rem; }
.print-page { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 1px 4px rgb(0 0 0 / .25); }
.buttons { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } /* zawijane: przyciski nie wypychają tabeli ani nagłówka poza obszar */
/* Przycisk drugorzędny: odnośnik i przycisk (także „Wybierz plik…” zamiast pola pliku przeglądarki, D37, D106). Tło
   i krój ustawione wprost – przeglądarka dałaby przyciskom swoje (ButtonFace, mniejszy krój kontrolek), które nie idą
   za motywem. */
.secondary { display: inline-block; padding: .6rem 1rem; border: 1px solid var(--thw-line); border-radius: var(--thw-radius-small); background: none; color: var(--thw-ink); font: inherit; text-decoration: none; cursor: pointer; }
.inherited { padding: .6rem .8rem; border-left: 3px solid var(--thw-tone-accent); background: var(--thw-menu); color: var(--thw-muted); }
td .action { padding: .3rem .7rem; margin-right: .3rem; }
.decision { margin: 0 0 1rem; padding: .8rem 1rem; border: 2px solid var(--thw-tone-warning); border-radius: var(--thw-radius); background: color-mix(in srgb, var(--thw-tone-warning) 7%, var(--thw-surface)); }
.decision h2, .happened h2 { margin: 0 0 .3rem; font-size: 1rem; }
.decision p { margin: 0 0 .6rem; }
.missing-rights { margin: 0 0 1rem; }
.missing-rights h2 { margin: 0 0 .4rem; font-size: 1rem; }
/* Podgląd tabeli decyzyjnej (D99): nazwa decyzji nad formularzem tabeli w trybie czytania. Ramki nie ma: `.decision`
   to decyzja w zadaniu użytkownika. */
.dmn-decision { margin: 0 0 1.5rem; }
.dmn-decision h2 { margin: 0 0 .5rem; font-size: 1.1rem; }
.happened { margin: 0 0 1rem; padding: .6rem 1rem; border-left: 4px solid var(--thw-tone-info); background: color-mix(in srgb, var(--thw-tone-info) 9%, var(--thw-surface)); } /* informacja, nie błąd (#451) */
.happened ul { margin: 0; padding-left: 1.2rem; }
.history { margin-top: 2rem; border-top: 1px solid var(--thw-line); padding-top: .8rem; }
.history summary { cursor: pointer; font-weight: 600; }
.history ol { list-style: none; padding: 0; margin: .6rem 0 0; }
.history li { display: grid; grid-template-columns: 11rem 12rem 1fr; gap: .6rem; padding: .3rem 0; border-bottom: 1px solid var(--thw-menu); }
.history time, .history .actor { color: var(--thw-muted); }
@media (max-width: 40rem) {
  .history li { grid-template-columns: 1fr; gap: 0; }
}
/* Podział obszaru pracy (frame.split, stagewright D15): edytor układu, ustawienia wyszukiwania, transformacja i edytor
   procesu. Proporcję, uchwyt, przyklejony podgląd i wąskie okno daje rama; tu odstęp części od uchwytu. Części stoją
   jedna pod drugą bez uchwytu (i bez odstępu) w układzie ramy z szufladą (próg jest daną układu, stagewright D25)
   i w podziale węższym niż dwie części `min` (`data-stw-stacked`, stagewright D39) – bez własnego progu. */
.stw-split[data-stw-direction="row"] > .stw-split-pane:first-child { padding-right: .75rem; }
.stw-split[data-stw-direction="row"] > .stw-split-pane:last-child { padding-left: .75rem; }
:is(.stw-frame[data-stw-panel="drawer"] .stw-split, .stw-split[data-stw-stacked])[data-stw-direction="row"] > .stw-split-pane { padding-inline: 0; }
.layout-preview { padding: 1rem; border: 1px dashed var(--thw-line); border-radius: var(--thw-radius); background: var(--thw-surface); }
.layout-preview h2 { margin: 0 0 .5rem; font-size: 1rem; color: var(--thw-muted); }
.layout-notes .notice { margin: 0 0 .4rem; }
/* Podgląd tonów w edytorze wyglądu (D81): sekcje z tonem formwright w dzień i w nocy, na kolorach edytowanego schematu
   (zmienne --thw-* ustawia appearance-page.ts na próbce). */
.tone-preview { display: flex; flex-wrap: wrap; gap: .5rem; }
.tone-sample { display: flex; flex-wrap: wrap; gap: .4rem; padding: .4rem; border-radius: var(--thw-radius-small); background: var(--thw-page); color: var(--thw-ink); color-scheme: light; }
.tone-sample[data-mode="dark"] { color-scheme: dark; }
.tone-sample .sf-section.sf-tone { margin: 0; padding: 4px 10px 6px; font-size: .9em; }
.tone-sample .sf-section-title { margin: 0 0 2px; font-weight: 600; }
/* Pola formwright poza formularzem (`sf-input` w `sf-ui`, D37): szerokość 100% z wypełnieniem i ramką w środku –
   formwright daje `border-box` tylko w `.sf-form`; reguła zniknie, gdy klocek obejmie nią też `.sf-ui`. */
.sf-ui .sf-input { box-sizing: border-box; }
/* Konto i logowanie (D29): pasek konta (menu „konto”), pasek „Działasz jako”, strona logowania, zastępstwa,
   „Wejdź jako”. */
.stw-top .account { gap: .25rem; font-size: .95em; }
.link { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.acting { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: .45rem 1rem; background: color-mix(in srgb, var(--thw-tone-warning) 22%, var(--thw-surface)); border-bottom: 2px solid var(--thw-tone-warning); font-weight: 600; }
.acting[hidden] { display: none; }
.login { display: grid; gap: .8rem; max-width: 22rem; margin: 4rem auto; }
/* Obrazek i tekst instancji na stronie logowania (D46). */
.login-page { display: grid; justify-items: center; gap: 1rem; margin: 2rem auto; max-width: 40rem; }
.login-page .login { margin: 0; width: 100%; }
.login-image { display: block; max-width: min(100%, 28rem); max-height: 16rem; object-fit: contain; }
.login-text { max-width: 22rem; width: 100%; margin: 0; white-space: pre-line; color: var(--thw-muted); }
.login label { display: grid; gap: .25rem; }
.login .primary { border: 0; cursor: pointer; justify-self: start; }
.people { list-style: none; padding: 0; }
.people li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 36rem; padding: .4rem 0; border-bottom: 1px solid var(--thw-menu); }
/* Dostęp (D29): konta, grupy, polityki; podpowiedź dla administratora bez polityk. */
.buttons.centered { justify-content: center; }
td .hint { color: var(--thw-muted); font-size: .9em; }
/* Polityki zdaniami (D108): zdanie na instrukcję, znaczek polityki zaawansowanej, podgląd zdania w kreatorze. */
.sentence + .sentence { margin-top: .35rem; }
.sentence .hint { color: var(--thw-muted); font-size: .9em; }
.badge { display: inline-block; padding: .05rem .5rem; border-radius: 999px; background: color-mix(in srgb, var(--thw-tone-accent) 15%, transparent); color: var(--thw-ink); font-size: .8em; vertical-align: middle; }
.preview .sentence { margin: 0; font-weight: 600; }
.api-keys { margin-top: 2rem; }
.api-keys h2 { font-size: 1.1rem; }
.secret { display: inline-block; padding: .4rem .6rem; border: 1px dashed var(--thw-tone-accent); border-radius: var(--thw-radius-small); background: var(--thw-surface); font-family: var(--sf-font-mono, monospace); word-break: break-all; user-select: all; }
.removal { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--thw-line); }
.action.danger { border-color: var(--thw-tone-danger); color: var(--thw-tone-danger); }
.icon { display: inline-block; flex: none; width: 1.15em; height: 1.15em; background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
/* Ikona przed nazwą zwijanej sekcji (dokument: diagram etapów, historia). */
summary > .icon { margin-inline-end: .35em; vertical-align: -.15em; }
/* Wybrana pozycja listy przy polu (combobox.ts): szukajka, paleta poleceń i pole formuły. */
[role="option"][aria-selected="true"] { background: var(--sf-accent-soft); }
/* Tryb wymuszonych kolorów (wysoki kontrast) pomija tło: wybraną pozycję widać po obramowaniu. */
@media (forced-colors: active) { [role="option"][aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; } }
/* Wyszukiwanie (D33, D122): szukajka w pasku i na stronie wyników, podpowiedzi, wyniki i paleta poleceń (Ctrl+K). */
.search { position: relative; }
.search-input { width: 16rem; }
.search-page-field { margin-bottom: 1rem; }
.search-page-field .search-input { width: min(100%, 32rem); }
.search-suggestions { list-style: none; margin: 0; padding: .3rem; max-height: min(70vh, 32rem); overflow-y: auto; position: absolute; top: calc(100% + .3rem); left: 0; z-index: 30; min-width: 22rem; border: 1px solid var(--thw-line); border-radius: var(--thw-radius); background: var(--thw-surface); box-shadow: var(--thw-shadow); }
.search-suggestions a, .search-suggestions li.command { display: flex; align-items: center; gap: .55rem; padding: .4rem .6rem; border-radius: var(--thw-radius-small); color: var(--thw-ink); text-decoration: none; }
.search-suggestions small { margin-left: auto; color: var(--thw-muted); }
.search-suggestions li { border-radius: var(--thw-radius-small); }
/* Strona wyników (D124): zawężenie odnośnikami jak wybór nad listą, wyniki z dokumentów z fragmentem. */
.search-narrowing { display: grid; gap: .45rem; margin: 0 0 1.1rem; }
.search-narrow { display: flex; flex-wrap: wrap; gap: .4rem; }
.search-goto { display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: baseline; margin: 0 0 .8rem; color: var(--thw-muted); font-size: .9rem; }
.search-count { margin: 0 0 .8rem; color: var(--thw-muted); font-size: .9rem; }
.search-results { display: grid; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.search-hit-title { font-size: 1.05rem; font-weight: 600; }
.search-hit-meta { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; margin: .15rem 0; color: var(--thw-muted); font-size: .85rem; }
.search-hit-snippet { margin: .2rem 0 0; overflow-wrap: anywhere; }
.search-results mark { padding: 0 .1em; border-radius: 2px; background: color-mix(in srgb, var(--thw-tone-accent) 25%, transparent); color: inherit; }
.search-examples ul { margin: .4rem 0; padding-left: 1.2rem; }
/* Polecenie w szukajce z „>” (#436): pozycja jak podpowiedź; nieaktywna – przygaszona, z powodem w podpisie. */
.search-suggestions li.command { cursor: pointer; }
.search-suggestions li.command.disabled { cursor: default; color: var(--thw-muted); }
/* W szufladzie (wąskie okno – układ ramy) wyszukiwanie jest pod lupą, a pole zajmuje szerokość paska. */
.stw-frame[data-stw-panel="drawer"] .search { flex: 1; }
.stw-frame[data-stw-panel="drawer"] .search-input { width: 100%; }
.stw-frame[data-stw-panel="drawer"] .search-suggestions { right: 0; min-width: 0; }
.search-preview { padding: 1rem; border: 1px dashed var(--thw-line); border-radius: var(--thw-radius); background: var(--thw-surface); }
.search-preview h2 { margin-top: 0; font-size: 1rem; }
.preview-line { display: grid; gap: .2rem; margin-bottom: .7rem; }
.preview-line strong { color: var(--thw-muted); font-size: .85em; }

/* Warunki listy (D34): panel „Filtry” nad listą i okno „Zapisz wyszukiwanie”. */
.filters { margin: 0 0 1rem; padding: .5rem .8rem; border: 1px solid var(--thw-line); border-radius: var(--thw-radius); background: var(--thw-surface); }
.filters > summary { cursor: pointer; font-weight: 600; }
.filters-count { color: var(--thw-tone-accent); }
.filters .buttons { margin-top: .6rem; }
.saved-search-dialog { width: min(34rem, 92vw); padding: 1rem 1.2rem; border: 1px solid var(--thw-line); border-radius: var(--thw-radius); background: var(--thw-surface); color: var(--thw-ink); box-shadow: var(--thw-shadow); }
.saved-search-dialog::backdrop { background: var(--sf-backdrop); }

/* Wybór nad listą (widok rejestru i zapisane wyszukiwania) i przycisk „Przypnij” (D36). */
.saved-search-choice { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem; }
/* Ten sam wygląd ma zawężenie wyników wyszukiwania (D124). */
:is(.saved-search-choice, .search-narrow) a { padding: .25rem .7rem; border: 1px solid var(--thw-line); border-radius: var(--sf-radius-pill); color: var(--thw-ink); text-decoration: none; }
:is(.saved-search-choice, .search-narrow) a[aria-current] { background: var(--thw-tone-accent); border-color: var(--thw-tone-accent); color: var(--thw-accent-ink); }
/* Zakładki ekranu rodzaju dokumentu (D111, document-type.ts): linki do stron rejestru, bieżąca podkreślona akcentem –
   jak nawigacja obszaru roboczego ramy (zakładki grupy menu). W wąskim oknie przechodzą do kolejnego wiersza. */
.type-tabs { display: flex; flex-wrap: wrap; gap: .25rem; margin: .5rem 0 1.25rem; border-bottom: 1px solid var(--thw-line); }
/* Zakładki rodzaju (odnośniki) i zakładki strony dokumentu (przyciski, #419) – jeden wygląd. */
.type-tabs :is(a, button) { padding: .45rem .8rem; color: var(--thw-ink); text-decoration: none; border-radius: var(--thw-radius-small) var(--thw-radius-small) 0 0;
  background: none; border: 0; font: inherit; cursor: pointer; }
.type-tabs :is(a, button):hover { background: color-mix(in srgb, var(--thw-ink) 8%, transparent); }
.type-tabs :is(a[aria-current="page"], button[aria-selected="true"]) { color: var(--thw-tone-accent); box-shadow: inset 0 -2px 0 var(--thw-tone-accent); font-weight: 600; }
.next-steps .buttons { margin: 1.5rem 0; }
/* Przycisk z samą ikoną (np. „Ustawienia rodzaju” na liście rejestru, D111): podpis w `aria-label` i `title`. */
.secondary.icon-only { display: inline-flex; align-items: center; padding-inline: .75rem; }
.secondary.icon-only .icon { width: 1.25em; height: 1.25em; }
.pin { white-space: nowrap; }
.pin[aria-pressed="true"] { color: var(--thw-tone-accent); }

/* Stan rezerwacji wiersza w kolumnie tabeli formularza i rezerwacje wierszy, których nie ma już w tabeli (D77). */
.reservation { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.reservation .notice { flex-basis: 100%; margin: 0; }
.reservation-notes section { margin: 1.5rem 0; }
.reservation-notes h2 { font-size: 1.1rem; }
.reservation-notes ul { list-style: none; padding: 0; display: grid; gap: .4rem; }
/* Powiązania nazwane przy dokumencie (D27). */
.associations { margin: 1.5rem 0; }
.associations h2 { font-size: 1.1rem; }
/* Powiązania (#424): siatka nazwa | dokumenty – jedna komórka dokumentów na nazwę, więc nazwa stoi w linii z pierwszym
   dokumentem (osobny `dd` na dokument przesuwał następną nazwę o wiersz). Dokument to wartość pola odwołania
   formwright (`.sf-lookup`). */
.association-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; gap: .5rem 1rem; margin: 0 0 .8rem; }
.association-list dt { color: var(--thw-muted); }
.association-list dd { margin: 0; }
.association-list ul { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
@media (max-width: 30rem) { .association-list { grid-template-columns: minmax(0, 1fr); gap: .2rem; } }
.association-add .row { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; }
/* Pola w wierszu (powiązania, procesy) mają szerokość treści, a nie całego wiersza. */
:is(.association-add, .process-upload, .process-instances) .row .sf-input { width: auto; }
/* Strona „Procesy” (D61): wgrywanie, filtry egzemplarzy, błędy definicji i kroków. */
:is(.process-upload, .process-instances) .row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .5rem 0; }
/* Diagram procesu i etapów (D63, D20): płótno wypełnia element, więc wysokość nadaje aplikacja; kolory z --thw-* (diagramwright.css). */
.diagram-canvas .diagram { height: 26rem; border: 1px solid var(--thw-line); border-radius: var(--thw-radius-small); overflow: hidden; }
.diagram-note { margin: .5rem 0 0; }
/* Edycja procesu i etapów (D67, D20): diagram i panel właściwości w podziale obszaru pracy. */
.diagram-editor .diagram { height: 34rem; }
.diagram-panel h2 { margin-top: 0; font-size: 1.1rem; }
/* Kolejność sprawdzania warunków bramki (D76): numer w tekście, przyciski przesunięcia obok. */
.process-order h3 { font-size: 1rem; margin: 1rem 0 .3rem; }
.process-order ol { list-style: none; padding: 0; margin: .3rem 0; }
.process-order li { display: flex; align-items: center; gap: .4rem; margin: .2rem 0; }
.process-order li span { flex: 1; }
.diagram-toolbar { align-items: center; margin: .5rem 0; }
/* Strona „Etapy” (D112): opis w dwóch zdaniach z „?” (reszta po rozwinięciu) i pusty rysunek z jednym przyciskiem.
   Palety obu edytorów diagramów – etapów i procesu (D117) – mają podpisy przy ikonach: podpis to nazwa przycisku palety
   z diagramwright (`aria-label`), więc czytnik ekranu i oko dostają ten sam tekst. Paleta z podpisami jest pasem nad
   rysunkiem, nie kolumną z lewej: kolumna szerokości najdłuższego podpisu zasłaniałaby środek widoku, na którym staje
   nowy element. Ścieżka powrotu z widoku zawartości (`.dw-path`) stoi obok kolumny – przy elemencie złożonym w podzbiorze
   trzeba ją przesunąć pod pas (dziś podzbiory go nie mają). Na wąskim płótnie (telefon) zostają same ikony z podpowiedzią – podpisy zajęłyby całe płótno. */
.lead-help { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; }
.lead-help .lead { flex: 1 1 20rem; margin: 0; }
.page-help > summary { cursor: pointer; list-style: none; width: 1.5rem; line-height: 1.5rem; text-align: center; font-weight: 600;
  color: var(--thw-tone-accent); border: 1px solid var(--thw-line); border-radius: 50%; }
.page-help > summary::-webkit-details-marker { display: none; }
.page-help[open] { flex: 1 0 100%; }
.page-help p { color: var(--thw-muted); margin: .4rem 0; }
.stages-editor .diagram-canvas { position: relative; }
.diagram-empty { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.diagram-empty[hidden] { display: none; }
.diagram-empty button { pointer-events: auto; }
.diagram-editor .diagram-canvas { container-type: inline-size; }
.diagram-editor .dw-palette { max-width: calc(100% - 16px); flex-flow: row wrap; }
.diagram-editor .dw-tool { display: flex; align-items: center; justify-content: flex-start; gap: .4rem; width: auto; padding: 0 .5rem 0 .2rem; }
.diagram-editor .dw-tool::after { content: attr(aria-label); font-size: .8rem; white-space: nowrap; }
@container (max-width: 40rem) {
  .diagram-editor .dw-tool { justify-content: center; width: 38px; padding: 0; }
  .diagram-editor .dw-tool::after { content: none; }
}
/* Strona „Transformacje danych” (D59, D60): definicja jako JSON, próba z podglądem wyniku, kontrakt. */
/* Pole JSON (dane źródła próby): krój stały, wiersze bez łamania i przewijanie zamiast ukrycia (pole formwright
   ukrywa nadmiar, bo w formularzu rośnie z treścią). */
textarea.code { display: block; font-family: var(--sf-font-mono, monospace); font-size: .85rem; white-space: pre; overflow: auto; }
.transformation-preview label { display: block; margin: .5rem 0; }
.pager { display: flex; align-items: center; gap: .6rem; margin: .5rem 0; }
/* Tekst tylko dla czytnika ekranu (np. nagłówek kolumny przycisków). */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
table.entries .error { color: var(--thw-tone-danger); }
table.entries small, .muted { color: var(--thw-muted); }
.instance { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; }
.instance dt { color: var(--thw-muted); }
.instance dd { margin: 0; }

/* Styl (D37): kształty powłoki do stylów kształtu themewright (`data-thw-style` na <html>: paper, dark-square,
   compact). Kroje i zaokrąglenie daje styl wskazany w schemacie (data-style), kolory – schemat (data-scheme), a kształty
   pól, sekcji, kart i tabel w formularzach – styl formwright (themes/*.css), który kolorów nie zmienia. Tu reguły
   powłoki: rama (`stw-…`), tabele i przyciski platformy. */

/* Papier (paper): arkusz na biurku jak na stronie pokazowej formwright – treść na jasnym arkuszu z cieniem, bez
   zaokrągleń; krój szeryfowy, pola jako podkreślenia (bez wypełnienia), tytuły kapitalikami, kursywa w nagłówkach
   tabel, linie kropkowane, przyciski bez pigułek. Arkusz ma własny miękki cień (styl formwright zeruje cień pól). */
:root[data-thw-style="paper"] {
  & .stw-top { border-bottom: 3px double var(--thw-line); background: var(--thw-page); }
  & .stw-side { border-right: 0; background: var(--thw-page); }
  & .stw-content { box-sizing: border-box; max-width: 66rem; margin: 1.5rem auto 3rem; padding: 2.5rem 3rem; background: var(--thw-surface);
    box-shadow: 0 1px 2px light-dark(rgb(0 0 0 / .06), rgb(0 0 0 / .4)), 0 12px 32px light-dark(rgb(0 0 0 / .07), rgb(0 0 0 / .45)); }
  & h1 { font-weight: 400; letter-spacing: .01em; }
  & h2 { font-weight: 400; font-variant: small-caps; letter-spacing: .08em; }
  & .stw-menu a.stw-current { background: none; color: var(--thw-tone-accent); box-shadow: inset 2px 0 0 var(--thw-tone-accent); font-style: italic; }
  & .stw-menu-group > summary { font-family: var(--sf-font-display); font-variant: small-caps; font-weight: 400; letter-spacing: .14em; text-transform: lowercase; }
  & :is(table.entries, .sf-table) th { border-bottom: 1px solid var(--thw-ink); color: var(--thw-ink); font-style: italic; font-weight: 400; }
  & table.entries td { border-bottom-style: dotted; }
  & :is(.primary, .action, .secondary, .saved-search-choice a, .stage) { border-radius: 0; }
  & .primary { font-variant: small-caps; font-weight: 400; letter-spacing: .1em; }
  & .stage:not(.sf-tone) { background: none; box-shadow: inset 0 -1px 0 var(--thw-tone-accent); font-style: italic; }
  & :is(.filters, .decision, .layout-preview, .search-preview) { border-radius: 0; }
  & .filters { border-width: 1px 0; background: none; }
  & :is(.stw-workspace-tabs, .type-tabs) { border-bottom: 3px double var(--thw-line); }
}
/* W szufladzie (wąskie okno – układ ramy) kartka zajmuje całą szerokość. */
:root[data-thw-style="paper"] .stw-frame[data-stw-panel="drawer"] .stw-content { margin: 0; padding: 1rem; box-shadow: none; }

/* Kanciasty (dark-square): proste kąty, krój maszynowy w podpisach, belki z kreską w kolorze wyróżnienia (jak w motywie
   Grafit memo); zaokrąglenia i cień daje styl formwright. */
:root[data-thw-style="dark-square"] {
  & .stw-top { border-bottom: 2px solid var(--thw-ink); }
  & .brand { font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; }
  & h1 { font-size: 1.6rem; letter-spacing: .04em; text-transform: uppercase; }
  & .stw-menu a.stw-current { background: var(--thw-surface); color: var(--thw-ink); box-shadow: inset 4px 0 0 var(--thw-tone-accent); }
  & .stw-menu-group > summary { font: 400 .75rem var(--sf-font-display); letter-spacing: .12em; }
  & :is(table.entries th, .stw-workspace-title) { font: 400 .75rem var(--sf-font-display); letter-spacing: .08em; text-transform: uppercase; }
  & table.entries th { border-bottom: 2px solid var(--thw-tone-accent); }
  & table.entries tbody tr:hover td { background: var(--thw-menu); }
  & :is(.primary, .action) { letter-spacing: .08em; text-transform: uppercase; }
  & .stage:not(.sf-tone) { border-radius: 0; box-shadow: inset 3px 0 0 var(--thw-tone-accent); }
  & .stw-workspace-nav a.stw-current { background: var(--thw-menu); box-shadow: inset 0 -3px 0 var(--thw-tone-accent); }
}

/* Zwarty (compact): gęsto jak w systemach biurowych – mniejszy tekst i odstępy, tabele w paski. */
:root[data-thw-style="compact"] {
  --stw-side-width: 12rem;
  & body { font-size: 13px; }
  & .stw-top { min-height: 2.4rem; gap: .6rem; }
  & .stw-side { gap: .5rem; padding: .5rem; }
  & .stw-menu { gap: 0; }
  & :is(.stw-menu .stw-menu-item, .stw-menu-group > summary) { padding: .25rem .45rem; }
  & .stw-content { max-width: none; padding: .8rem 1.2rem; }
  & h1 { margin: .3rem 0 .6rem; font-size: 1.35rem; }
  & :is(table.entries th, table.entries td) { padding: .25rem .4rem; }
  & table.entries th { background: var(--thw-menu); }
  & table.entries tbody tr:nth-child(even) td { background: var(--thw-menu); }
  & :is(.primary, .secondary) { padding: .35rem .7rem; }
  & .stw-workspace-tabs { padding: .2rem 1.2rem 0; }
  & .stw-workspace-nav a { padding: .3rem .6rem; }
}
/* Pole formuły (formula-field.ts, D78): lista podpowiedzi pod polem i sygnatura funkcji, w której nawiasach jest kursor.
   Pole rośnie z treścią (wysokość ustawia formwright), więc bez ręcznej zmiany rozmiaru; długie słowo też się łamie,
   tak samo w odczycie. */
.combobox-field { position: relative; }
.formula-input, .formula-read, .formula-call { font-family: var(--sf-font-mono); }
.formula-input { resize: none; }
.formula-input, .formula-read { white-space: pre-wrap; overflow-wrap: anywhere; }
.combobox-popup { position: absolute; z-index: 9; left: 0; right: 0; max-height: 16rem; overflow-y: auto; margin: 2px 0 0; padding: .2rem 0;
  list-style: none; border: 1px solid var(--thw-line); border-radius: var(--thw-radius-small); background: var(--thw-surface); box-shadow: var(--thw-shadow); }
.combobox-option { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .6rem; padding: .3rem .6rem; cursor: pointer; }
.formula-name { font-family: var(--sf-font-mono); font-weight: 600; }
.formula-detail, .formula-description { color: var(--thw-muted); font-size: .9em; }
.formula-description { flex-basis: 100%; }
.formula-signature { margin-top: .2rem; color: var(--thw-muted); font-size: .9em; }
.formula-signature strong { color: var(--thw-ink); }
/* Pomoc „Funkcje” pod polem formuły (D107): rozwijana, z szukaniem; pozycja – sygnatura i opis, kliknięcie wstawia. */
.formula-help { margin-top: .2rem; font-size: .9em; }
.formula-help > summary { cursor: pointer; color: var(--thw-tone-accent); width: max-content; }
.formula-help-search { box-sizing: border-box; width: 100%; margin: .3rem 0; padding: .35rem .6rem; border: 1px solid var(--thw-line);
  border-radius: var(--thw-radius-small); background: var(--thw-surface); color: var(--thw-ink); font: inherit; }
.formula-help-note { margin: 0 0 .2rem; color: var(--thw-muted); }
.formula-help-list { max-height: 16rem; overflow-y: auto; margin: 0; padding: 0; list-style: none; border: 1px solid var(--thw-line);
  border-radius: var(--thw-radius-small); }
.formula-help-list:empty { display: none; }
.formula-help-item { display: flex; flex-wrap: wrap; gap: 0 .6rem; width: 100%; padding: .3rem .6rem; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer; }
.formula-help-item:hover, .formula-help-item:focus-visible { background: var(--sf-accent-soft); }
.formula-help-item .formula-call { font-weight: 600; }
/* Pole kodu z listą (code-field.ts, D84): ta sama lista wyskakująca co pole formuły; pozycja to kod i nazwa. */
.code-input, .code-value, .code-read { font-family: var(--sf-font-mono); }
.code-value { font-weight: 600; }
.code-name, .code-empty { color: var(--thw-muted); }
.code-empty { padding: .3rem .6rem; font-size: .9em; }
.formula-keys { padding: .3rem .6rem 0; border-top: 1px solid var(--thw-line); color: var(--thw-muted); font-size: .8em; }

/* Edytor tabeli decyzyjnej (D130): siatka reguł jak arkusz – przewija się w swojej ramce (formwright `sf-table-wrap`),
   komórki z polem formuły o stałej szerokości minimalnej, wiersze pasujące w próbie podświetlone, trafione – mocniej. */
.decision-editor .sf-table td .formula-input { min-width: 9rem; }
.decision-editor .sf-table td .combobox-field { min-width: 9rem; }
.decision-editor .sf-table tbody tr.decision-trial-match > :is(td, th) { background: color-mix(in srgb, var(--thw-tone-info) 10%, var(--thw-surface)); }
.decision-editor .sf-table tbody tr.decision-trial-hit > :is(td, th) { background: color-mix(in srgb, var(--thw-tone-success) 18%, var(--thw-surface)); }
.decision-trial { margin-top: 1.5rem; }
.decision-trial h2 { margin: 0 0 .3rem; font-size: 1.1rem; }
.decision-trial-inputs { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; margin: .6rem 0; }
.decision-trial-input { display: flex; flex-direction: column; gap: .2rem; min-width: 10rem; flex: 1 1 10rem; max-width: 20rem; }
.decision-trial-input > span { font-size: .85rem; color: var(--thw-muted); }
.decision-trial-result { font-weight: 600; min-height: 1.4em; }
.decision-gaps { margin-top: .6rem; }