/* Wygląd formularza. Kolory i kształt ze zmiennych motywu themewright (`--thw-*`: role, tony, zaokrąglenia, cień,
   grubość znaku tonu), które ładuje strona (np. `themes/default.css` z themewright albo opis motywu aplikacji przez
   `themeCss`); bez motywu formularz nie ma kolorów. Własne `--sf-*` (z wartościami domyślnymi) to kroje, rozmiary,
   odstępy, ruch i wartości pochodne (pierścień fokusu, delikatne tła). Formularz ma
   wyglądać jak dokument, który opisuje: sekcje to nagłówki z cienką linią, pola mają drobne podpisy, a styl z układu
   (title, lead, paragraph…) wygląda tak samo w edycji i w czytaniu.
   Wszystko jest w warstwie `@layer formwright`, więc style aplikacji i motywy (poza warstwą) wygrywają bez walki
   o specyficzność. */
@layer formwright {
/* O trybie dzień/noc decyduje strona przez `color-scheme` (np. `:root { color-scheme: light dark }` – jak system,
   `dark` – zawsze ciemny); motyw themewright ma kolory w dwóch wersjach (`light-dark()`). */
:where(:root) {
  --sf-font: system-ui, sans-serif;
  --sf-font-display: Georgia, "Times New Roman", serif;
  --sf-font-mono: ui-monospace, monospace;
  --sf-font-size: 14px;
  --sf-gap: 18px;
  --sf-radius-pill: 999px;
  --sf-radius-round: 50%;
  --sf-control-height: 38px;
  --sf-duration: .15s;
  --sf-easing: ease;
  --sf-backdrop: light-dark(rgb(0 0 0 / .32), rgb(0 0 0 / .6));
}
/* Atrybut `hidden` zawsze chowa: własne `display` klasy (flex, grid, inline-flex) ani motyw go nie przykryją. Jedna
   reguła dla każdego elementu formularza i okna zamiast osobnej przy każdej klasie. */
:is(.sf-form, .sf-dialog, .sf-ui, .sf-code, .sf-json-view)[hidden], :is(.sf-form, .sf-dialog, .sf-ui, .sf-code, .sf-json-view) [hidden] { display: none !important; }
/* Zmienne pochodne kontrolek: w formularzu, w oknie i w `.sf-ui` – miejscu aplikacji z kontrolkami formwright poza
   formularzem (np. pasek narzędzi strony z `.sf-button` i `.sf-input`), żeby fokus i wyróżnienia wyglądały tak samo. */
.sf-form, .sf-dialog, .sf-ui {
  --sf-accent-soft: color-mix(in srgb, var(--thw-tone-accent) 12%, transparent);
  --sf-danger-soft: color-mix(in srgb, var(--thw-tone-danger) 12%, transparent);
  --sf-ring: 0 0 0 3px color-mix(in srgb, var(--thw-tone-accent) 25%, transparent);
}
.sf-form, .sf-dialog {
  display: grid; gap: var(--sf-gap); color: var(--thw-ink); font: var(--sf-font-size)/1.5 var(--sf-font);
}
.sf-form *, .sf-form *::before, .sf-form *::after { box-sizing: border-box; }
.sf-body, .sf-section-body, .sf-object, .sf-card-body { display: grid; gap: var(--sf-gap); align-content: start; }

/* Pasek: języki treści i tryb */
.sf-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.sf-locales, .sf-segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--thw-line); border-radius: var(--sf-radius-pill); background: var(--thw-surface); }
.sf-locale, .sf-segment { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 12px; border: 0; border-radius: var(--sf-radius-pill); background: none; color: var(--thw-muted); font: inherit; font-size: 13px; cursor: pointer; }
.sf-locale.current, .sf-segment:has(input:checked) { background: var(--thw-tone-accent); color: var(--thw-accent-ink); }
.sf-segment.sf-segment-unset:has(input:checked) { background: var(--thw-line); color: var(--thw-ink); }
.sf-segment:has(input:disabled) { cursor: not-allowed; opacity: .5; }
.sf-segment input { position: absolute; opacity: 0; pointer-events: none; }
.sf-locale-code { font-weight: 700; letter-spacing: .04em; }
.sf-locale-label { font-size: 12px; }
.sf-locale-missing { min-width: 18px; padding: 0 5px; border-radius: var(--sf-radius-pill); background: var(--thw-tone-danger); color: var(--thw-page); font-size: 11px; font-weight: 700; text-align: center; }

/* Podsumowanie błędów całego formularza */
.sf-summary { padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--thw-tone-danger) 40%, transparent); border-radius: var(--thw-radius); background: var(--sf-danger-soft); }
.sf-summary strong { color: var(--thw-tone-danger); }
.sf-summary ul { margin: 6px 0 0; padding-left: 18px; }
.sf-summary-link { padding: 0; border: 0; background: none; color: var(--thw-ink); font: inherit; text-align: left; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--thw-tone-danger) 50%, transparent); cursor: pointer; }

/* Sekcje: nagłówek z linią, nie karta */
.sf-section { margin: 0; padding: 0; border: 0; }
.sf-section-title { display: flex; align-items: center; gap: 10px; padding: 0 0 8px; border-bottom: 1px solid var(--thw-line); color: var(--thw-ink); font: 600 13px var(--sf-font); letter-spacing: .06em; text-transform: uppercase; list-style: none; cursor: pointer; }
.sf-section-title::-webkit-details-marker { display: none; }
details.sf-section > .sf-section-title::after { content: ""; width: 7px; height: 7px; margin-left: auto; border-right: 2px solid var(--thw-muted); border-bottom: 2px solid var(--thw-muted); transform: rotate(45deg); transition: transform var(--sf-duration) var(--sf-easing); }
details.sf-section:not([open]) > .sf-section-title::after { transform: rotate(-45deg); }
.sf-section > .sf-help, .sf-section > .sf-errors { margin: 8px 0 0; }
.sf-section-body { padding-top: 14px; }
.sf-badge { min-width: 20px; padding: 1px 7px; border-radius: var(--sf-radius-pill); background: var(--thw-tone-danger); color: var(--thw-page); font-size: 11px; letter-spacing: 0; text-align: center; }

/* Zakładki (węzeł tabs): pasek nazw z kreską pod wybraną, znacznik błędów jak w sekcji, liczba wpisów przy nazwie */
.sf-tabs-list { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--thw-line); }
.sf-tab { display: inline-flex; align-items: center; gap: 6px; margin-bottom: -1px; padding: 8px 12px; border: 0; border-bottom: 2px solid transparent;
  background: none; color: var(--thw-muted); font: 600 13px var(--sf-font); cursor: pointer; }
.sf-tab:hover { color: var(--thw-ink); }
.sf-tab[aria-selected="true"] { border-bottom-color: var(--thw-tone-accent); color: var(--thw-ink); }
.sf-tab:focus-visible { outline: 2px solid var(--thw-tone-accent); outline-offset: -2px; border-radius: var(--thw-radius-small); }
.sf-tab-count { color: var(--thw-muted); font-weight: 400; }
.sf-tab-panel > .sf-help, .sf-tab-panel > .sf-errors { margin: 8px 0 0; }
.sf-read-tabs { display: grid; gap: var(--sf-gap); }

/* Wiersze i szerokości */
.sf-row { display: flex; flex-wrap: wrap; gap: var(--sf-gap); align-items: start; }
.sf-row > * { flex: 1 1 220px; min-width: 0; }
.sf-row > .sf-width-xs { flex: 0 1 90px; }
.sf-row > .sf-width-s { flex: 0 1 150px; }
.sf-row > .sf-width-m { flex: 1 1 240px; max-width: 320px; }
.sf-row > .sf-width-l { flex: 2 1 360px; }
.sf-row > .sf-width-full { flex-basis: 100%; }
/* Pola wiersza zaczynają się na jednej linii: podpis w wierszu ma jedną linię (pełny tekst w `title`), a pole bez
   podpisu w wierszu, w którym inne go mają, dostaje odstęp o wysokości podpisu. */
.sf-row > .sf-field > :is(.sf-label, .sf-read-label),
.sf-row > .sf-when > .sf-field > :is(.sf-label, .sf-read-label) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-row:has(> .sf-field > :is(.sf-label, .sf-read-label), > .sf-when > .sf-field > :is(.sf-label, .sf-read-label)) > .sf-field:not(:has(> :is(.sf-label, .sf-read-label)))::before,
.sf-row:has(> .sf-field > :is(.sf-label, .sf-read-label), > .sf-when > .sf-field > :is(.sf-label, .sf-read-label)) > .sf-when > .sf-field:not(:has(> :is(.sf-label, .sf-read-label)))::before {
  content: "\00a0"; display: block; margin-bottom: 5px; font-size: 12px; }
.sf-body > .sf-width-xs, .sf-section-body > .sf-width-xs, .sf-card-body > .sf-width-xs { max-width: 120px; }
.sf-body > .sf-width-s, .sf-section-body > .sf-width-s, .sf-card-body > .sf-width-s { max-width: 200px; }
.sf-body > .sf-width-m, .sf-section-body > .sf-width-m, .sf-card-body > .sf-width-m { max-width: 340px; }

/* Pole: drobny podpis nad kontrolką */
.sf-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.sf-label, .sf-read-label { display: block; margin-bottom: 5px; padding: 0; color: var(--thw-muted); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.sf-required { color: var(--thw-tone-danger); }
.sf-help { margin: 5px 0 0; color: var(--thw-muted); font-size: 12px; }
.sf-text { margin: 0; }
.sf-text.sf-style-plain { color: var(--thw-muted); }
.sf-column { display: grid; gap: var(--sf-gap); align-content: start; }

.sf-input, .sf-tags {
  width: 100%; min-width: 0; min-height: var(--sf-control-height); padding: 7px 11px; border: 1px solid var(--thw-line); border-radius: var(--thw-radius-small);
  background: var(--thw-surface); color: var(--thw-ink); font: inherit; transition: border-color var(--sf-duration) var(--sf-easing), box-shadow var(--sf-duration) var(--sf-easing);
}
.sf-input:hover, .sf-tags:hover { border-color: color-mix(in srgb, var(--thw-ink) 30%, var(--thw-line)); }
.sf-input:focus, .sf-tags:focus-within { border-color: var(--thw-tone-accent); outline: 0; box-shadow: var(--sf-ring); }
textarea.sf-input { min-height: var(--sf-control-height); resize: vertical; line-height: 1.55; overflow: hidden; }
select.sf-input { appearance: none; padding-right: 30px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--thw-muted) 50%), linear-gradient(135deg, var(--thw-muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.sf-input::placeholder, .sf-affixed > input::placeholder, .sf-tag-input::placeholder { color: var(--thw-muted); opacity: .75; }
.sf-invalid .sf-input, .sf-invalid .sf-tags, .sf-input[aria-invalid="true"] { border-color: var(--thw-tone-danger); }
.sf-errors:empty { display: none; }
.sf-errors { display: grid; gap: 2px; margin-top: 5px; }
.sf-error-text { color: var(--thw-tone-danger); font-size: 12px; font-weight: 500; }
.sf-warning { margin: 5px 0 0; color: var(--thw-tone-danger); font-size: 12px; }
/* Kod (kontrolka `json`, `codeView`, `codeEditor`): jedno przewijanie, wysokość według treści albo kontenera
   (`.sf-code { block-size: 100% }`); numery linii w osobnej kolumnie, przyklejonej przy przewijaniu w bok (bez
   zaznaczania, nie trafiają do schowka); kolory składni ze zmiennych `--sf-code-<rodzaj>` zmieszanych z kolorem tekstu
   (czytelne na jasnym i ciemnym tle). Pole edycji nie ma klasy `sf-input` – jego odstępy muszą się zgadzać z warstwą kolorów. */
.sf-code { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0;
  border: 1px solid var(--thw-line); border-radius: var(--thw-radius-small); background: var(--thw-surface); color: var(--thw-ink); font: 12px/1.5 var(--sf-font-mono); }
.sf-code-body { display: grid; grid-template-columns: auto 1fr; flex: 1; min-height: 0; overflow: auto; }
.sf-code-body:focus-visible { outline: 2px solid var(--thw-tone-accent); outline-offset: -2px; }
.sf-code-gutter { position: sticky; left: 0; z-index: 1; margin: 0; padding: 8px 8px 8px 12px; background: var(--thw-surface); color: var(--thw-muted); font: inherit; text-align: right; user-select: none; }
.sf-code-gutter[hidden] + * { grid-column: 1 / -1; }
.sf-code-text, .sf-code .sf-code-input { margin: 0; padding: 8px 12px; font: inherit; letter-spacing: normal; tab-size: 2; white-space: pre; }
.sf-code-wrap .sf-code-body { overflow-x: hidden; }
.sf-code-wrap .sf-code-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.sf-code-wline { display: block; }
.sf-code-wrap.sf-code-numbered .sf-code-wline { position: relative; padding-left: calc(var(--sf-code-digits, 1) * 1ch + 16px); }
.sf-code-wrap.sf-code-numbered .sf-code-wline::before { content: attr(data-line); position: absolute; left: 0; width: calc(var(--sf-code-digits, 1) * 1ch); color: var(--thw-muted); text-align: right; }
.sf-code-block { display: block; content-visibility: auto; contain-intrinsic-block-size: auto calc(var(--sf-code-lines, 1) * 1.5em); }
.sf-code-edit .sf-code-block { content-visibility: visible; }
.sf-code-stack { display: grid; }
.sf-code-under, .sf-code .sf-code-input { grid-area: 1 / 1; }
.sf-code-under { pointer-events: none; }
.sf-code .sf-code-input { display: block; width: 100%; height: 100%; min-height: calc(3 * 1.5em + 16px); overflow: hidden; resize: none; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; color: transparent; caret-color: var(--thw-ink); outline: none; }
.sf-code .sf-code-input::selection { background: color-mix(in srgb, var(--thw-tone-accent) 28%, transparent); }
.sf-code .sf-code-input::placeholder { color: var(--thw-muted); }
.sf-code-edit:focus-within { border-color: var(--thw-tone-accent); box-shadow: var(--sf-ring); }
.sf-invalid .sf-code { border-color: var(--thw-tone-danger); }
/* „Kopiuj” mały, w rogu, nad tekstem (szczegółowość ponad `.sf-button`, które stoi dalej w arkuszu); tekst ma po prawej
   miejsce na przycisk, więc koniec linii nie chowa się pod nim. */
.sf-code .sf-code-copy { position: absolute; top: 4px; right: 4px; min-height: 0; padding: 1px 8px; font: 600 11px/1.5 var(--sf-font); opacity: .75; }
.sf-code:has(> .sf-code-copy) .sf-code-text { padding-right: 72px; }
.sf-code .sf-code-copy:is(:hover, :focus-visible) { opacity: 1; }
/* Drzewo JSON do czytania (`jsonTreeView`): wcięte gałęzie, przełącznik ▸/▾, fokus na wierszu. */
.sf-json-view { overflow: auto; padding: 8px 10px; border: 1px solid var(--thw-line); border-radius: var(--thw-radius-small); background: var(--thw-surface); color: var(--thw-ink);
  font: 12px/1.6 var(--sf-font-mono); }
.sf-json-view ul { margin: 0; padding: 0; list-style: none; }
.sf-json-view [role="group"] { padding-left: 16px; }
.sf-json-view [role="treeitem"] { outline: none; }
.sf-json-view-line { display: block; width: max-content; padding: 0 4px; border-radius: 3px; white-space: pre; }
.sf-json-view [aria-expanded] > .sf-json-view-line { cursor: pointer; }
.sf-json-view [role="treeitem"]:focus-visible > .sf-json-view-line { outline: 2px solid var(--thw-tone-accent); outline-offset: -1px; }
.sf-json-view-toggle { display: inline-block; width: 1.2em; color: var(--thw-muted); }
.sf-json-view-error { margin: 0; color: var(--thw-tone-danger); font-family: var(--sf-font); }
/* Tryb drzewa kontrolki `json`: przełącznik „Tekst / Drzewo” i drzewo – klucz, rodzaj, wartość; obiekt i lista wcięte. */
.sf-json-modes { display: grid; gap: 6px; }
.sf-json-switch { justify-self: start; }
.sf-json-tree { padding: 8px 10px; border: 1px solid var(--thw-line); border-radius: var(--thw-radius-small); background: var(--thw-surface); font-size: 13px; }
.sf-json-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sf-json-children { display: grid; gap: 6px; margin: 6px 0 0; padding: 0 0 0 18px; border-left: 1px solid var(--thw-line); list-style: none; }
.sf-json-key { width: 12em; font-family: var(--sf-font-mono); }
.sf-json-type { width: auto; }
.sf-json-value { flex: 1; min-width: 8em; font-family: var(--sf-font-mono); }
.sf-json-colon, .sf-json-index, .sf-json-null { color: var(--thw-muted); font-family: var(--sf-font-mono); }
.sf-json-actions { display: inline-flex; gap: 2px; margin-left: auto; }
.sf-json-add { justify-self: start; min-height: 0; padding: 2px 10px; font-size: 12px; }
.sf-code-insert { border-radius: 3px; }
.sf-insert-known { background: color-mix(in srgb, var(--thw-tone-success) 14%, transparent); color: color-mix(in srgb, var(--thw-tone-success) 75%, var(--thw-ink)); }
.sf-insert-missing, .sf-insert-error { background: color-mix(in srgb, var(--thw-tone-danger) 10%, transparent); color: color-mix(in srgb, var(--thw-tone-danger) 80%, var(--thw-ink));
  text-decoration: wavy underline var(--thw-tone-danger); text-decoration-skip-ink: none; }
/* Błąd (np. zła składnia wyrażenia) mocniej niż brakująca: pełne tło i podwójne podkreślenie. */
.sf-insert-error { background: color-mix(in srgb, var(--thw-tone-danger) 22%, transparent); text-decoration-style: double; }
/* Kontrolka `tokens`: krój formularza (tekst ze wstawkami to zwykłe zdanie albo adres, nie kod; obie warstwy dziedziczą
   ten sam krój, więc dalej się pokrywają). Jeden wiersz (np. adres): wysokość pola tekstowego, przewijanie w bok. */
.sf-tokens-field { font: var(--sf-font-size)/1.5 var(--sf-font); }
.sf-code-single .sf-code-input { min-height: calc(1.5em + 16px); }
.sf-code-single.sf-code-edit .sf-code-body { overflow-y: hidden; }
.sf-code-key { color: color-mix(in srgb, var(--sf-code-key, #268bd2) 80%, var(--thw-ink)); }
.sf-code-string { color: color-mix(in srgb, var(--sf-code-string, #859900) 70%, var(--thw-ink)); }
.sf-code-number { color: color-mix(in srgb, var(--sf-code-number, #cb4b16) 80%, var(--thw-ink)); }
.sf-code-literal { color: color-mix(in srgb, var(--sf-code-literal, #6c71c4) 80%, var(--thw-ink)); }
.sf-code-punct { color: var(--sf-code-punct, var(--thw-muted)); }
.sf-code-invalid { text-decoration: wavy underline var(--thw-tone-danger); text-decoration-skip-ink: none; }

/* Style z układu: ta sama typografia w edycji i w czytaniu */
.sf-style-title { font-family: var(--sf-font-display); font-size: 30px; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
.sf-style-subtitle { font-size: 18px; font-weight: 600; }
.sf-style-lead { font-size: 17px; line-height: 1.5; }
.sf-style-paragraph { font-size: 15px; line-height: 1.65; }
.sf-style-muted { color: var(--thw-muted); }
.sf-style-strong { font-weight: 700; }
.sf-style-figure { font-family: var(--sf-font-display); font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* W edycji tytuł i akapity to „tekst do kliknięcia”: bez ramki, ramka dopiero przy najechaniu i fokusie. */
.sf-mode-edit .sf-input:is(.sf-style-title, .sf-style-subtitle, .sf-style-lead, .sf-style-paragraph, .sf-style-figure) { border-color: transparent; background: transparent; padding-left: 8px; margin-left: -9px; width: calc(100% + 9px); }
.sf-mode-edit .sf-input:is(.sf-style-title, .sf-style-subtitle, .sf-style-lead, .sf-style-paragraph, .sf-style-figure):is(:hover, :focus, :focus-within) { border-color: var(--thw-line); background: var(--thw-surface); }
.sf-mode-edit .sf-invalid .sf-input:is(.sf-style-title, .sf-style-subtitle, .sf-style-lead, .sf-style-paragraph, .sf-style-figure) { border-color: var(--thw-tone-danger); }

/* Czytanie */
.sf-read { margin: 0; color: var(--thw-ink); overflow-wrap: anywhere; }
.sf-multiline { white-space: pre-wrap; }
.sf-link { color: var(--thw-tone-accent); }
.sf-read-section .sf-section-title { cursor: default; }
.sf-computed { display: block; font-variant-numeric: tabular-nums; }
.sf-align-end { text-align: right; justify-self: end; }
.sf-align-end :is(.sf-input, .sf-affixed > input) { text-align: right; }
/* Liczby (pole liczby i liczba w ramce pola tylko do odczytu) stoją do prawej, jak w tabeli (formwright#107). */
.sf-input.sf-number, .sf-affixed > .sf-number { text-align: right; }
.sf-static.sf-number, .sf-align-end .sf-static { justify-content: flex-end; }

/* Wybory */
.sf-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--thw-line); border-radius: var(--sf-radius-pill); background: var(--thw-surface); cursor: pointer; }
.sf-pill:has(input:checked) { border-color: var(--thw-tone-accent); background: var(--sf-accent-soft); }
.sf-check { accent-color: var(--thw-tone-accent); }
.sf-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sf-inline > .sf-input { flex: 1 1 100px; width: auto; }
/* Pole z prefiksem lub sufiksem: otoczka ma klasy pola (ramka, tło, wysokość, fokus, błąd – także z motywu), kontrolka
   w środku jest bez ramki. Długi prefiks skraca się wielokropkiem, pole ma pierwszeństwo. */
/* Wartość pola tylko do odczytu w edycji (`fixed` w form.js): wymiary pola obok, przerywana ramka zamiast tła. */
.sf-input.sf-static { display: flex; align-items: center; border-style: dashed; background: transparent; cursor: default; }
.sf-input.sf-static:hover { border-color: var(--thw-line); }
.sf-input.sf-affixed { display: flex; align-items: center; gap: 6px; min-width: 0; cursor: text; }
.sf-affixed > :is(input, .sf-code) { flex: 1 1 auto; min-width: 6ch; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; outline: none; box-shadow: none; }
.sf-affixed > .sf-code :is(.sf-code-text, .sf-code-input) { padding: 0; }
.sf-affixed > .sf-code .sf-code-input { min-height: calc(3 * 1.5em); }
.sf-affixed > .sf-code.sf-code-single .sf-code-input { min-height: 1.5em; }
/* Ostrzeżenie pola (z podpowiedzią `title`) i błąd komórki w wierszu tabeli: znacznik na polu, tekst tylko dla czytnika
   (w opisie pola) i w podsumowaniu błędów – wiersz nie rośnie. */
:is(.sf-map-row, .sf-table td) .sf-stack > .sf-warning, .sf-map-inline .sf-map-row .sf-field > .sf-errors { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sf-input.sf-affixed:focus-within { border-color: var(--thw-tone-accent); box-shadow: var(--sf-ring); }
.sf-invalid .sf-affixed { border-color: var(--thw-tone-danger); }
:is(.sf-prefix, .sf-suffix) { flex: 0 1 auto; min-width: 0; overflow: hidden; color: var(--thw-muted); font: 400 var(--sf-font-size)/1.5 var(--sf-font); text-overflow: ellipsis; white-space: nowrap; }
/* Długi prefiks ustępuje polu; sufiks (np. jednostka) jest krótki i zostaje cały. */
.sf-prefix { max-width: 40%; }
.sf-suffix { flex: none; }
/* Liczba w stylu (np. figure) ma szerokość treści, więc jednostka stoi tuż za nią. */
.sf-affixed:is(.sf-style-figure, .sf-style-strong, .sf-style-lead) > input { flex: 0 1 auto; field-sizing: content; min-width: 4ch; }
.sf-unit { flex: 0 0 auto !important; width: auto; }
.sf-color-picker { width: var(--sf-control-height); height: var(--sf-control-height); padding: 3px; border: 1px solid var(--thw-line); border-radius: var(--thw-radius-small); background: var(--thw-surface); }
.sf-swatch-line { display: inline-flex; align-items: center; gap: 8px; }
.sf-swatch { width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--thw-ink) 20%, transparent); }
.sf-range { flex: 1; accent-color: var(--thw-tone-accent); }
.sf-output { min-width: 60px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

/* Znaczniki */
.sf-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 5px 7px; cursor: text; }
.sf-tag-list, .sf-chips { display: contents; }
.sf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-tag, .sf-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: var(--sf-radius-pill); background: var(--thw-menu); box-shadow: inset 0 0 0 1px var(--thw-line); font-size: 13px; }
.sf-chip { padding-right: 10px; }
.sf-tag-primary, .sf-chip-primary { background: var(--sf-accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--thw-tone-accent) 40%, transparent); font-weight: 600; }
.sf-tag-star { color: var(--thw-tone-accent); }
/* Ocena gwiazdkami: najechanie podświetla do wskazanej gwiazdki. */
.sf-stars { display: inline-flex; align-items: center; gap: 2px; }
.sf-star { position: relative; color: var(--thw-line); font-size: 24px; line-height: 1; cursor: pointer; transition: color var(--sf-duration) var(--sf-easing); }
.sf-star input { position: absolute; opacity: 0; pointer-events: none; }
.sf-star.sf-on, .sf-stars:hover .sf-star { color: var(--thw-tone-accent); }
.sf-stars .sf-star:hover ~ .sf-star { color: var(--thw-line); }
.sf-star:has(input:focus-visible) { outline: 2px solid var(--thw-tone-accent); outline-offset: 2px; border-radius: var(--thw-radius-small); }
.sf-stars-read { color: var(--thw-tone-accent); letter-spacing: 2px; }
.sf-tag-button { width: 22px; height: 22px; border: 0; border-radius: var(--sf-radius-round); background: none; color: var(--thw-muted); cursor: pointer; }
.sf-tag-button:hover { background: var(--thw-line); color: var(--thw-ink); }
.sf-tag-input { flex: 1 1 140px; min-width: 120px; min-height: 26px; border: 0; background: none; color: inherit; font: inherit; outline: 0; }

/* Teksty w kilku językach */
.sf-i18n { position: relative; }
.sf-locale-marks { display: flex; gap: 4px; margin-top: 5px; }
.sf-locale-mark { padding: 1px 7px; border: 0; border-radius: 4px; background: var(--sf-danger-soft); color: var(--thw-tone-danger); font: 700 10px var(--sf-font); letter-spacing: .04em; }
button.sf-locale-mark { cursor: pointer; }
button.sf-locale-mark:hover { filter: brightness(.95); box-shadow: inset 0 0 0 1px currentColor; }
.sf-locale-mark.filled { background: var(--sf-accent-soft); color: var(--thw-tone-accent); }
.sf-locale-mark.current { box-shadow: inset 0 0 0 1px currentColor; }
.sf-i18n-read { display: inline-flex; align-items: baseline; gap: 8px; }

/* Wstawki */
.sf-stack { display: grid; gap: 6px; }
.sf-tokens summary { color: var(--thw-tone-accent); font-size: 12px; cursor: pointer; }
.sf-token-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.sf-token { padding: 2px 8px; border: 1px solid var(--thw-line); border-radius: var(--thw-radius-small); background: var(--thw-surface); font: 12px var(--sf-font-mono); cursor: pointer; }

/* Listy: karty, tabela, wiersze */
.sf-cards { display: grid; gap: 12px; }
.sf-card { min-width: 0; border: 1px solid var(--thw-line); border-radius: var(--thw-radius); background: var(--thw-surface); }
.sf-cards.sf-read .sf-card { border: 0; border-left: 3px solid var(--sf-accent-soft); border-radius: 0; background: none; padding-left: 14px; }
.sf-card-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--thw-line); }
.sf-card-number { display: grid; place-items: center; min-width: 22px; height: 22px; border-radius: var(--sf-radius-round); background: var(--sf-accent-soft); color: var(--thw-tone-accent); font-size: 12px; font-weight: 700; }
.sf-card-title { flex: 1; min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
/* Klawiatura jak w arkuszu: pole w nawigacji ma ramkę i nie pokazuje kursora; w edycji wygląda zwyczajnie. */
/* Ramka i tło sięgają tak samo daleko (--sf-nav-gap): tło wypełnia przestrzeń aż do ramki. */
.sf-keyboard-grid .sf-field { --sf-nav-gap: 3px; }
.sf-keyboard-grid .sf-current:not(.sf-editing):focus-within, .sf-keyboard-grid [data-sf-level]:focus { outline: 2px solid var(--thw-tone-accent); outline-offset: var(--sf-nav-gap, 3px); border-radius: var(--thw-radius-small); background: var(--sf-accent-soft); box-shadow: 0 0 0 var(--sf-nav-gap, 3px) var(--sf-accent-soft); }
/* Pole w dużym stylu (tytuł, akapit, liczba) jest przesunięte o 9 px w lewo, żeby tekst stał równo z podglądem:
   ramka obejmuje je z zapasem. */
.sf-keyboard-grid .sf-field:not(:has(.sf-field)):has(.sf-input:is(.sf-style-title, .sf-style-subtitle, .sf-style-lead, .sf-style-paragraph, .sf-style-figure)) { --sf-nav-gap: 12px; }
/* W nawigacji widać tylko ramkę pola: wewnętrzne obwódki fokusu (wybrana opcja przełącznika, gwiazdka, znacznik)
   pojawiają się dopiero w edycji, gdy strzałki rzeczywiście zmieniają wybór. */
.sf-keyboard-grid .sf-field:not(.sf-editing) :is(.sf-segment, .sf-pill, .sf-star):has(input:focus-visible),
.sf-keyboard-grid .sf-field:not(.sf-editing) :is(button, .sf-tag, .sf-segment, .sf-pill):focus-visible { outline: none; }
.sf-keys-hint { flex: 1; min-width: 0; overflow: hidden; color: var(--thw-muted); font-size: 12px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.sf-keyboard-grid tr[data-sf-level]:focus { outline: none; }
.sf-keyboard-grid tr[data-sf-level]:focus > td { background: var(--sf-accent-soft); box-shadow: inset 0 2px 0 var(--thw-tone-accent), inset 0 -2px 0 var(--thw-tone-accent); }
.sf-keyboard-grid summary.sf-current:focus { outline: 2px solid var(--thw-tone-accent); outline-offset: 2px; }
.sf-keyboard-grid .sf-field:not(.sf-editing) :is(input, textarea, [contenteditable]):focus { caret-color: transparent; }
.sf-keyboard-grid .sf-field.sf-editing { outline: 2px dashed var(--thw-tone-accent); outline-offset: var(--sf-nav-gap, 3px); border-radius: var(--thw-radius-small); }
.sf-section.sf-style-box { padding: 12px 14px 14px; border: 1px solid var(--thw-line); border-radius: var(--thw-radius); background: var(--thw-menu); }
.sf-section.sf-style-box > .sf-section-title { border-bottom: 0; }
.sf-card-title:has(+ .sf-card-subtitle) { flex: 0 1 auto; }
.sf-card-subtitle { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--thw-muted); text-overflow: ellipsis; white-space: nowrap; }
.sf-card-summary { display: flex; gap: 12px; color: var(--thw-muted); font-variant-numeric: tabular-nums; }
.sf-card-summary > .sf-field { margin: 0; }
.sf-card-body { padding: 14px; }
.sf-card-collapsible > .sf-card-head { cursor: pointer; list-style: none; }
.sf-card-collapsible > .sf-card-head::-webkit-details-marker { display: none; }
.sf-card-collapsible > .sf-card-head::before { content: ""; width: 6px; height: 6px; margin-right: 2px; border-right: 2px solid var(--thw-muted); border-bottom: 2px solid var(--thw-muted); transform: rotate(-45deg); transition: transform var(--sf-duration) var(--sf-easing); }
.sf-card-collapsible[open] > .sf-card-head::before { transform: rotate(45deg); }
.sf-card-collapsible:not([open]) > .sf-card-head { border-bottom: 0; }
.sf-cards.sf-read .sf-card-body { padding: 4px 0; gap: 6px; }
.sf-item-actions { display: inline-flex; gap: 2px; margin-left: auto; }
.sf-icon-button { width: 28px; height: 28px; border: 0; border-radius: var(--thw-radius-small); background: none; color: var(--thw-muted); font-size: 15px; cursor: pointer; }
.sf-icon-button:hover:not(:disabled) { background: var(--thw-menu); color: var(--thw-ink); }
.sf-icon-button:disabled { opacity: .3; cursor: default; }
.sf-button { min-height: 34px; padding: 5px 14px; border: 1px solid var(--thw-line); border-radius: var(--thw-radius-small); background: var(--thw-surface); color: var(--thw-ink); font: inherit; font-weight: 600; cursor: pointer; }
.sf-button:hover:not(:disabled) { border-color: var(--thw-tone-accent); color: var(--thw-tone-accent); }
/* Przycisk główny (`sf-primary`, np. „Utwórz” na stronie aplikacji w `.sf-ui`): ten sam akcent co przycisk zapisu. */
.sf-button.sf-primary, .sf-save { border-color: var(--thw-tone-accent); background: var(--thw-tone-accent); color: var(--thw-accent-ink); }
.sf-button.sf-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--thw-tone-accent) 88%, var(--thw-ink)); color: var(--thw-accent-ink); }
.sf-add-wide { width: 100%; border-style: dashed; color: var(--thw-muted); }
.sf-list { display: grid; gap: 6px; }
.sf-list-row { display: flex; align-items: start; gap: 6px; }
.sf-list-row > .sf-field { flex: 1; }
.sf-list-read { margin: 0; padding-left: 18px; }
.sf-table-wrap { overflow-x: auto; }
.sf-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sf-table th { padding: 6px 8px; border-bottom: 2px solid var(--thw-line); color: var(--thw-muted); font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap; }
/* Nagłówek kolumny danych zawija się między słowami: nie rozpycha tabeli poza formularz, więc przyklejone akcje wiersza
   nie zasłaniają ostatniej kolumny (formwright#109). */
.sf-table th.sf-col { white-space: normal; }
/* Opis kolumny pod nazwą (`help` kolumny), lewe górne pole (`corner`) i numery wierszy (`numbered`). */
.sf-table th .sf-col-help { display: block; font-weight: 400; white-space: normal; }
.sf-table th.sf-corner { width: 1%; vertical-align: bottom; }
.sf-table th.sf-corner .sf-field { margin: 0; }
.sf-table th.sf-corner .sf-input { width: auto; min-width: 0; }
.sf-table tbody .sf-row-number { width: 1%; padding: 5px 6px; border-bottom: 1px solid var(--thw-line); color: var(--thw-muted); font-size: inherit; font-weight: 400; text-align: right; vertical-align: top; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sf-table td { padding: 5px 6px; border-bottom: 1px solid var(--thw-line); vertical-align: top; }
.sf-table td > .sf-field, .sf-table td > .sf-computed-field { gap: 0; }
.sf-table.sf-read td { padding: 9px 8px; }
.sf-table .sf-width-xs { width: 80px; }
.sf-table .sf-width-s { width: 120px; }
.sf-table .sf-align-end { text-align: right; }
.sf-align-center { text-align: center !important; }
.sf-matrix tbody th { padding: 6px 8px; border-bottom: 1px solid var(--thw-line); font-weight: 500; text-align: left; }
.sf-matrix th.sf-matrix-orphan { color: var(--thw-tone-danger); text-decoration: line-through; }
/* Tabela w edycji nie ściska kolumn na wąskim ekranie: przewija się w poziomie. */
.sf-mode-edit .sf-table td { min-width: 60px; }
.sf-mode-edit .sf-table td:has(select, input[type="text"], input:not([type])) { min-width: 100px; }
.sf-row-actions { width: 1%; white-space: nowrap; }
.sf-row-actions .sf-item-actions { flex-wrap: nowrap; }
.sf-mode-edit .sf-table td.sf-row-actions { min-width: 0; }
/* Akcje wiersza stoją przy prawej krawędzi tabeli także wtedy, gdy kolumny są szersze od formularza: dane przewijają
   się pod nimi, a akcje zawsze widać w całości (formwright#104). */
.sf-table .sf-row-actions { position: sticky; right: 0; z-index: 1; background: var(--thw-surface); }
.sf-table tr.sf-tone > .sf-row-actions { background: linear-gradient(var(--sf-tone-soft), var(--sf-tone-soft)) var(--thw-surface); }
.sf-table .sf-errors { margin-top: 3px; }
.sf-map { display: grid; gap: 10px; }
/* Słownik z `inline: true`: tabela klucz–wartość – nagłówek kolumn, wiersze z liniami, pola bez ramek (ramka przy fokusie),
   usuwanie widoczne przy najechaniu i fokusie, ostatni wiersz pusty na nowy wpis. */
/* Jedna siatka dla całej tabeli (wiersze w `subgrid`), więc kolumny są równe także w wierszach odziedziczonych. */
.sf-map-inline { grid-template-columns: minmax(6em, 1fr) repeat(var(--sf-map-columns, 1), minmax(0, 2fr)) auto; gap: 0; border: 1px solid var(--thw-line); border-radius: var(--thw-radius-small);
  background: var(--thw-surface); }
.sf-map-inline > * { grid-column: 1 / -1; }
.sf-map-row { display: grid; grid-template-columns: subgrid; align-items: center; column-gap: 6px; padding: 2px 4px; border-top: 1px solid var(--thw-line); }
.sf-map-head { padding-block: 4px; border-top: 0; background: var(--thw-menu); color: var(--thw-muted); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.sf-map-head > span { padding-inline: 8px; }
.sf-map-row > .sf-field { margin: 0; }
.sf-map-inline .sf-map-row :is(.sf-input, .sf-key-name) { min-height: calc(var(--sf-control-height) - 8px); max-width: none; padding: 0 8px; border-color: transparent; background-color: transparent; }
.sf-map-inline .sf-map-row :is(.sf-input, .sf-key-name):is(:hover, :focus, :focus-within) { border-color: var(--thw-line); background-color: var(--thw-surface); }
.sf-map-inline .sf-key-name { font-family: var(--sf-font-mono); }
.sf-map-inline .sf-map-row select.sf-input { padding-right: 24px; }
/* Błąd komórki: linia pod polem, nad jego treścią (tło pola, także z motywu, i najechanie jej nie zakrywają). */
.sf-map-inline .sf-map-row .sf-field.sf-invalid { position: relative; }
.sf-map-inline .sf-map-row .sf-field.sf-invalid::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: var(--thw-tone-danger); pointer-events: none; }
/* Kilka kolumn pól wpisu: kolumna nie węższa niż kilka znaków, w wąskim oknie tabela przewija się w bok. */
.sf-map-inline.sf-map-fields { grid-template-columns: minmax(6em, 1fr) repeat(var(--sf-map-columns), minmax(7em, 2fr)) auto; overflow-x: auto; }
/* Znacznik ostrzeżenia: linia w tle pola, nie kolor ramki – zostaje przy najechaniu i fokusie (wtedy się je czyta
   i poprawia), także gdy motyw zmienia ramkę przy fokusie. */
:is(.sf-map-inline .sf-map-row, .sf-table td) .sf-input[data-warning], .sf-map-inherited-value [data-warning] { background-image: linear-gradient(var(--thw-tone-danger), var(--thw-tone-danger)); background-position: bottom; background-size: 100% 2px; background-repeat: no-repeat; }
.sf-map-row [data-action="remove"] { opacity: 0; }
.sf-map-row:is(:hover, :focus-within) [data-action="remove"] { opacity: 1; }
/* Ekran dotykowy nie ma najechania: usuwanie widać zawsze (niewidoczny przycisk usuwałby po stuknięciu w pusty brzeg). */
@media (hover: none) { .sf-map-row [data-action="remove"] { opacity: 1; } }
.sf-map-inline > .sf-map-inherited { display: grid; grid-template-columns: subgrid; column-gap: 6px; border-style: solid none none; border-radius: 0; padding: 2px 4px; }
.sf-map-inline > .sf-map-inherited > :is(.sf-map-inherited-key, .sf-map-inherited-cell) { padding-inline: 9px; }
/* Wartość odziedziczona ucina się sama, oznaczenie „domyślnie” zostaje całe. */
.sf-map-inherited-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sf-map-inherited-actions { display: inline-flex; align-items: center; justify-content: end; gap: 8px; }
.sf-map-inline .sf-map-inherited .sf-button { min-height: 26px; padding: 2px 10px; }
.sf-map-row.sf-tone { background: var(--sf-tone-soft); box-shadow: inset var(--thw-tone-bar) 0 0 var(--sf-tone); }
.sf-map-read { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.sf-map-read dt { font: 600 12px var(--sf-font-mono); }
.sf-map-read dd { margin: 0; }
/* Wpis odziedziczony (z `placeholder`): przygaszony, tylko do odczytu, z oznaczeniem i „Zmień”. */
.sf-map-inherited { color: var(--thw-muted); }
div.sf-map-inherited { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 8px 6px 14px; border: 1px dashed var(--thw-line); border-radius: var(--thw-radius); }
.sf-map-inherited-key { font: 600 12px var(--sf-font-mono); }
.sf-map-inherited-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-map-inherited-tag { padding: 1px 6px; border-radius: var(--sf-radius-pill); background: var(--thw-menu); font-size: 11px; }
.sf-key-input { flex: 1 1 180px; }
.sf-key-name { flex: 1; min-width: 0; max-width: 24em; padding: 3px 8px; font-family: var(--sf-font-mono); font-size: .92em; }

/* Obrazy */
.sf-image { display: block; max-width: 100%; border-radius: var(--thw-radius); }
.sf-image-edit { display: grid; gap: 8px; }
.sf-image-preview { width: 100%; max-height: 220px; border-radius: var(--thw-radius); object-fit: cover; }
.sf-link-button { justify-self: start; padding: 0; border: 0; background: none; color: var(--thw-tone-accent); font: inherit; font-size: 12px; cursor: pointer; }
.sf-gallery { display: grid; gap: 10px; }
.sf-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sf-gallery-grid img { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--thw-radius-small); object-fit: cover; }
.sf-gallery-item { position: relative; margin: 0; }
.sf-gallery-item .sf-item-actions { position: absolute; top: 6px; right: 6px; border-radius: var(--thw-radius-small); background: color-mix(in srgb, var(--thw-surface) 88%, transparent); }

/* Tryb czytania: bez ramek, gęściej */
.sf-mode-read { gap: 14px; }
.sf-mode-read .sf-body, .sf-mode-read .sf-section-body { gap: 12px; }
.sf-mode-read .sf-read-field .sf-read-label { margin-bottom: 1px; font-weight: 500; }

/* Pasek zapisu */
.sf-actions { position: sticky; bottom: 12px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 16px;
  border: 1px solid var(--thw-line); border-radius: var(--sf-radius-pill); background: color-mix(in srgb, var(--thw-surface) 92%, transparent); box-shadow: var(--thw-shadow); backdrop-filter: blur(8px); }
.sf-actions-buttons { display: inline-flex; gap: 6px; }
.sf-status { display: inline-flex; align-items: center; gap: 8px; color: var(--thw-muted); font-size: 13px; }
.sf-status::before { content: ""; width: 8px; height: 8px; border-radius: var(--sf-radius-round); background: var(--thw-line); }
.sf-status[data-state="dirty"]::before { background: var(--thw-tone-accent); }
.sf-status[data-state="invalid"] { color: var(--thw-tone-danger); }
.sf-status[data-state="invalid"]::before { background: var(--thw-tone-danger); }
.sf-status[data-state="saved"]::before { background: var(--thw-tone-accent); }
.sf-save { min-height: 34px; padding: 5px 18px; border: 0; border-radius: var(--sf-radius-pill); font: inherit; font-weight: 700; cursor: pointer; }
.sf-save:disabled, .sf-reset:disabled { opacity: .45; cursor: default; }
.sf-reset { border-radius: var(--sf-radius-pill); }

/* Fokus z klawiatury zawsze widoczny */
.sf-form :is(button, summary, .sf-tag, .sf-status, .sf-segment:has(input), .sf-pill:has(input)):focus-visible,
:is(.sf-form, .sf-ui) .sf-segment:has(input:focus-visible), :is(.sf-form, .sf-ui) .sf-pill:has(input:focus-visible),
.sf-ui button:focus-visible { outline: 2px solid var(--thw-tone-accent); outline-offset: 2px; }

/* Relacje: odwołanie (rekord z kluczem), kopia zamrożona (przycisk pobrania), okno wyboru */
.sf-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--thw-line); border-top-color: var(--thw-tone-accent); border-radius: var(--sf-radius-round); animation: sf-spin .8s linear infinite; vertical-align: -2px; }
@keyframes sf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sf-spinner { animation-duration: 2.4s; } }
.sf-lookup { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: var(--sf-control-height); padding: 6px 6px 6px 12px; border: 1px solid var(--thw-line); border-radius: var(--thw-radius-small); background: var(--thw-surface); }
.sf-lookup-actions { display: inline-flex; gap: 4px; margin-left: auto; }
.sf-record { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.sf-record-label { font-weight: 600; }
.sf-record-detail, .sf-record-loading, .sf-record-empty { color: var(--thw-muted); font-size: 13px; }
.sf-record-missing { color: var(--thw-tone-danger); }
.sf-object-tools { display: flex; justify-content: flex-end; }
.sf-fill { padding: 4px 12px; font-size: 13px; }
.sf-table-add { display: flex; gap: 8px; margin-top: 8px; }
.sf-table-add .sf-add-wide { flex: 1; }
.sf-dialog { width: min(560px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 64px)); padding: 0; border: 1px solid var(--thw-line); border-radius: var(--thw-radius); background: var(--thw-surface); color: var(--thw-ink); box-shadow: var(--thw-shadow); font: var(--sf-font-size)/1.5 var(--sf-font); }
.sf-dialog::backdrop { background: var(--sf-backdrop); }
.sf-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--thw-line); }
.sf-dialog-body, .sf-dialog-create { display: grid; gap: 10px; padding: 14px 18px; }
.sf-dialog-footer { display: flex; justify-content: flex-end; padding: 10px 18px 14px; border-top: 1px solid var(--thw-line); }
.sf-lookup-status { display: flex; align-items: center; gap: 8px; min-height: 20px; margin: 0; color: var(--thw-muted); font-size: 13px; }
.sf-lookup-status:empty { display: none; }
.sf-results { display: grid; gap: 4px; max-height: 340px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.sf-results[aria-busy="true"] { opacity: .5; }
.sf-result { display: grid; width: 100%; gap: 2px; padding: 8px 12px; border: 1px solid transparent; border-radius: var(--thw-radius-small); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sf-result span { color: var(--thw-muted); font-size: 13px; }
.sf-result:hover, .sf-result:focus-visible { border-color: var(--thw-line); background: var(--thw-menu); }
.sf-dialog .sf-actions { position: static; box-shadow: none; }

/* Ikony: znak z CSS (motyw podmienia go tu, także na obrazek przez mask/background) */
.sf-icon { display: inline-block; min-width: 1em; line-height: 1; text-align: center; }
.sf-icon[data-icon="up"]::before { content: "↑"; }
.sf-icon[data-icon="down"]::before { content: "↓"; }
.sf-icon[data-icon="remove"]::before, .sf-icon[data-icon="clear"]::before, .sf-icon[data-icon="close"]::before { content: "×"; }
.sf-icon[data-icon="star"]::before { content: "★"; }
.sf-icon[data-icon="fill"]::before { content: "⤓"; }
.sf-icon[data-icon="add"]::before { content: "+"; }
.sf-icon[data-icon="back"]::before { content: "←"; }
.sf-icon[data-icon="check"]::before { content: "✓"; }
.sf-icon[data-icon="bold"]::before { content: "B"; font-weight: 700; }
.sf-icon[data-icon="italic"]::before { content: "I"; font-family: Georgia, serif; font-style: italic; }
.sf-icon[data-icon="heading"]::before { content: "H"; font-weight: 700; }
.sf-icon[data-icon="bullets"]::before { content: "•"; font-size: 1.3em; }
.sf-icon[data-icon="numbers"]::before { content: "1."; font-size: .85em; }
.sf-icon[data-icon="link"]::before { content: "⇗"; }
.sf-icon[data-icon="move"]::before { content: "⇄"; }
.sf-icon[data-icon="drop"]::before { content: "⤵"; }
.sf-icon[data-icon="upload"]::before { content: "⇪"; }
.sf-icon[data-icon="file"]::before { content: "▤"; }
.sf-icon[data-icon="next"]::before { content: "→"; }

/* Karuzela: scena z dużym podglądem, miniatury, pola bieżącego elementu. */
.sf-carousel { display: grid; gap: 10px; }
.sf-carousel-stage { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--thw-line); border-radius: var(--thw-radius); background: var(--thw-surface); }
.sf-carousel-stage:focus-visible { outline: 2px solid var(--thw-tone-accent); outline-offset: 2px; }
.sf-carousel-figure { display: grid; justify-items: center; gap: 6px; margin: 0; min-width: 0; }
.sf-carousel-figure .sf-media-image { max-height: 320px; }
.sf-carousel-caption { display: flex; justify-content: space-between; gap: 12px; width: 100%; color: var(--thw-muted); font-size: .9em; }
.sf-carousel-caption > :first-child { overflow: hidden; color: var(--thw-ink); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.sf-carousel-thumbs { display: flex; gap: 6px; overflow-x: auto; padding: 2px; }
.sf-carousel-thumb { flex: none; display: grid; place-items: center; width: 64px; height: 48px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: var(--thw-radius-small); background: var(--thw-menu); color: var(--thw-muted); cursor: pointer; }
.sf-carousel-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sf-carousel-thumb[aria-selected="true"] { border-color: var(--thw-tone-accent); }
.sf-carousel-thumb.sf-invalid { border-color: var(--thw-tone-danger); }
.sf-carousel-actions { display: flex; justify-content: flex-end; }
.sf-carousel-empty { margin: 0; color: var(--thw-muted); }

/* Plik z danymi (media): podgląd i przyciski w ramce, pola pliku pod nią. */
.sf-media, .sf-media-fields { display: grid; gap: var(--sf-gap); }
.sf-media-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px; border: 1px dashed var(--thw-line); border-radius: var(--thw-radius-small); background: var(--thw-surface); }
.sf-media.sf-read > .sf-media-head { padding: 0; border: 0; background: none; }
.sf-media.sf-dragover > .sf-media-head { border-color: var(--thw-tone-accent); background: var(--sf-accent-soft); }
.sf-media-image { display: block; max-width: 100%; max-height: 180px; border-radius: var(--thw-radius-small); object-fit: contain; }
.sf-media-file { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--thw-ink); text-decoration: none; }
.sf-media-file:hover .sf-media-name { text-decoration: underline; }
.sf-media-file .sf-icon { color: var(--thw-muted); font-size: 1.4em; }
.sf-media-name { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.sf-media-file small, .sf-media-empty, .sf-media-hint { color: var(--thw-muted); }
.sf-media-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.sf-media-status { display: inline-flex; align-items: center; gap: 6px; color: var(--thw-muted); }
.sf-card.sf-moving { outline: 2px dashed var(--thw-tone-accent); outline-offset: 2px; }
.sf-drop-here { width: 100%; border: 2px dashed var(--thw-tone-accent); background: var(--sf-accent-soft); color: var(--thw-tone-accent); }

/* Tekst z formatowaniem (richtext). */
.sf-richtext { border: 1px solid var(--thw-line); border-radius: var(--thw-radius-small); background: var(--thw-surface); }
.sf-richtext:focus-within { border-color: var(--thw-tone-accent); box-shadow: var(--sf-ring); }
.sf-invalid .sf-richtext, .sf-richtext:has([aria-invalid="true"]) { border-color: var(--thw-tone-danger); }
.sf-richtext-bar { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px 4px; border-bottom: 1px solid var(--thw-line); }
.sf-richtext-bar .sf-icon-button[aria-pressed="true"] { background: var(--sf-accent-soft); color: var(--thw-tone-accent); }
.sf-richtext-editor { position: relative; min-height: 5.5em; padding: 8px 11px; outline: 0; overflow-wrap: anywhere; }
.sf-richtext-editor.sf-empty::before { content: attr(data-placeholder); position: absolute; color: var(--thw-muted); pointer-events: none; }
.sf-richtext-count { padding: 0 10px 4px; color: var(--thw-muted); font-size: 11px; text-align: right; }
.sf-richtext-count.sf-over { color: var(--thw-tone-danger); font-weight: 600; }
:is(.sf-richtext-editor, .sf-richtext-read) :is(p, ul, ol, h3) { margin: 0 0 .5em; }
:is(.sf-richtext-editor, .sf-richtext-read) > :last-child { margin-bottom: 0; }
:is(.sf-richtext-editor, .sf-richtext-read) h3 { font-family: var(--sf-font-display); font-size: 1.15em; }
:is(.sf-richtext-editor, .sf-richtext-read) a { color: var(--thw-tone-accent); }
:is(.sf-button, .sf-link-button) .sf-icon + .sf-button-text { margin-left: .4em; }

/* Tony (`tone`, `itemTone`): odcień każdego tonu to `--thw-tone-<ton>` motywu themewright (nazwy jak `TONES`
   themewright, dzień i noc). Tło i tekst na tle liczą się z odcienia, więc duże powierzchnie zostają jasne i czytelne. */
.sf-tone-warm { --sf-tone: var(--thw-tone-warm); }
.sf-tone-lively { --sf-tone: var(--thw-tone-lively); }
.sf-tone-strong { --sf-tone: var(--thw-tone-strong); }
.sf-tone-vivid { --sf-tone: var(--thw-tone-vivid); }
.sf-tone-deep { --sf-tone: var(--thw-tone-deep); }
.sf-tone-cool { --sf-tone: var(--thw-tone-cool); }
.sf-tone-fresh { --sf-tone: var(--thw-tone-fresh); }
.sf-tone-calm { --sf-tone: var(--thw-tone-calm); }
.sf-tone-accent { --sf-tone: var(--thw-tone-accent); }
.sf-tone-info { --sf-tone: var(--thw-tone-info); }
.sf-tone-success { --sf-tone: var(--thw-tone-success); }
.sf-tone-warning { --sf-tone: var(--thw-tone-warning); }
.sf-tone-danger { --sf-tone: var(--thw-tone-danger); }
.sf-tone-neutral { --sf-tone: var(--thw-tone-neutral); }
.sf-tone-muted { --sf-tone: var(--thw-tone-muted); }
.sf-tone {
  --sf-tone-soft: color-mix(in srgb, var(--sf-tone) 9%, var(--thw-surface));
  --sf-tone-text: color-mix(in srgb, var(--sf-tone) 65%, var(--thw-ink));
}
.sf-section.sf-tone, .sf-tab-panel.sf-tone { padding: 10px 14px 14px; border-left: var(--thw-tone-bar) solid var(--sf-tone); border-radius: var(--thw-radius-small); background: var(--sf-tone-soft); }
.sf-section.sf-tone > .sf-section-title { border-bottom-color: color-mix(in srgb, var(--sf-tone) 35%, var(--thw-line)); color: var(--sf-tone-text); }
.sf-tab.sf-tone { color: var(--sf-tone-text); }
.sf-tab.sf-tone[aria-selected="true"] { border-bottom-color: var(--sf-tone); }
/* Tylko własna kontrolka pola (nie pola w środku tabeli, kart czy obiektu). */
/* Znak tonu pola to lewy pasek, w edycji i w czytaniu; grubość każdego znaku tonu to `--thw-tone-bar` motywu. */
.sf-field.sf-tone > :is(.sf-read:not(.sf-cards, .sf-map-read, .sf-media, .sf-code), .sf-read-tags, .sf-record, .sf-computed) {
  padding-inline-start: 9px; border-left: var(--thw-tone-bar) solid var(--sf-tone); color: var(--sf-tone-text); font-weight: 600;
}
.sf-field.sf-tone > :is(.sf-input, .sf-code-edit), .sf-field.sf-tone > .sf-stack > .sf-input { border-left: var(--thw-tone-bar) solid var(--sf-tone); }
.sf-card.sf-tone { border-left: var(--thw-tone-bar) solid var(--sf-tone); background: var(--sf-tone-soft); }
.sf-table tr.sf-tone > :is(td, th) { background: var(--sf-tone-soft); }
.sf-table tr.sf-tone > :first-child { box-shadow: inset var(--thw-tone-bar) 0 0 var(--sf-tone); }
.sf-table th.sf-tone { border-bottom-color: var(--sf-tone); color: var(--sf-tone-text); }
.sf-map-read > .sf-tone { background: var(--sf-tone-soft); }
.sf-map-read > dt.sf-tone { box-shadow: inset var(--thw-tone-bar) 0 0 var(--sf-tone); }
}