@charset "UTF-8";
/* ============================================================================
   Ustawienia — wspólna powłoka stron administracyjnych (prefiks st-)
   ----------------------------------------------------------------------------
   Jeden zestaw klas na WSZYSTKIE strony ustawień: hub, słowniki, szablony
   e-mail, panele AI i strony przeniesione z `ButtonsBar`. Powstał z
   `dictionaries.scss` (#244031), bo tamten plik był już w całości generyczny —
   dopiero po wyjęciu części słownikowej (`st-req`, `st-members`, `st-prevbox`)
   widać, że reszta nie wie nic o słownikach.

   Powód wydzielenia: nagłówek, para „ghost + primary", pole szukania i pigułka
   filtra istniały w SZEŚCIU kopiach (`us-`, `sl-`, `ml-`, `at-`, `cs-`, `si-`),
   każda o parę pikseli inna. Siódma kopia przy każdej nowej stronie oznaczała,
   że spójności nie da się utrzymać — teraz strona nie ma czego kopiować.

   Plik jest GLOBALNY (nie `.razor.scss`), bo te same klasy renderują ~20 stron
   w kilkunastu katalogach funkcji. W pliku globalnym `::deep` NIE działa —
   zwykłe selektory potomka wystarczą.

   Kolory biorą się WYŁĄCZNIE z tokenów (`--paper`, `--ink`, `--line`…), więc
   ciemny motyw wychodzi bez ani jednej reguły dark tutaj: sentinel
   `.esz-dark-page` z `MainLayout` siedzi już we wszystkich listach
   `tokens.css`. Jedyne, czego strona potrzebuje w `tokens.css`, to blok pełnej
   wysokości na haku `.st-page` — i on jest tam JEDEN dla wszystkich.

   Odcień per pozycja jedzie zmienną `--ft` na elemencie `.ft`: `--ft-fg/-tint/
   -edge` liczą się z niej `color-mix`-em, a wariant dark rozjaśnia sam odcień.
   Dzięki temu czarny tag nie znika na jasnym tle, a jaskrawy nie wypala oczu na
   ciemnym — bez liczenia czegokolwiek w C#.
   ========================================================================= */
/* ── odcień pozycji ───────────────────────────────────────────────────── */
.st .ft {
  --ft-fg: var(--ft);
  --ft-tint: color-mix(in oklab, var(--ft) 10%, var(--paper));
  --ft-edge: color-mix(in oklab, var(--ft) 30%, var(--line));
}

html[data-theme=dark] .st .ft {
  --ft-fg: color-mix(in oklab, var(--ft) 58%, white);
  --ft-tint: color-mix(in oklab, var(--ft) 20%, var(--paper));
  --ft-edge: color-mix(in oklab, var(--ft) 38%, var(--line-2));
}

/* ── korzeń strony ────────────────────────────────────────────────────── */
.st {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg);
  overflow: hidden;
  font: 400 13px/1.45 "Open Sans", system-ui, sans-serif;
  color: var(--ink);
}
.st * {
  box-sizing: border-box;
}
.st button {
  font-family: inherit;
}

.st-mono {
  font-family: "Consolas", "Cascadia Mono", monospace;
  font-variant-numeric: tabular-nums;
}

/* ── nagłówek strony ──────────────────────────────────────────────────── */
.st-hd {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 20px 13px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.st-hd h1 {
  margin: 0;
  font: 600 17px/1.25 "Open Sans", system-ui, sans-serif;
  letter-spacing: -0.012em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 9px;
}
.st-hd p {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-mute);
  max-width: 78ch;
  text-wrap: pretty;
}
.st-hd .st-hd__sp {
  flex: 1;
}
.st-hd .st-hd__acts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding-top: 2px;
}

/* Tekst nagłówka obok ikony. `min-width: 0` musi tu być, inaczej długi opis
   rozpycha kolumnę i przyciski akcji uciekają poza pasek. */
.st-hd__txt {
  min-width: 0;
}

.st-ico {
  width: 27px;
  height: 27px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border: 1px solid color-mix(in oklab, var(--accent) 26%, transparent);
  flex-shrink: 0;
}
.st-ico svg {
  width: 15px;
  height: 15px;
}

/* ── przyciski ────────────────────────────────────────────────────────── */
.st-btn {
  height: 30px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  font: 600 12.5px/1 "Open Sans", system-ui, sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  white-space: nowrap;
  background: transparent;
  color: var(--ink-mute);
  /* Obrys — druga akcja obok primary, gdy „ghost" ginie na tle karty. */
}
.st-btn svg {
  width: 14px;
  height: 14px;
}
.st-btn--pri {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.st-btn--pri:hover {
  background: var(--accent-hov, var(--accent));
  color: #fff;
}
.st-btn--ghost {
  background: transparent;
  color: var(--ink-mute);
}
.st-btn--ghost:hover {
  background: var(--paper-3);
  color: var(--ink);
}
.st-btn--out {
  background: var(--paper);
  border-color: var(--line-2);
  color: var(--ink);
}
.st-btn--out:hover {
  border-color: var(--ink-faint);
  background: var(--paper-2);
}
.st-btn--danger {
  background: transparent;
  color: var(--danger-ink);
}
.st-btn--danger:hover {
  background: var(--danger-soft);
  color: var(--danger-ink);
}
.st-btn--sm {
  height: 26px;
  padding: 0 10px;
  font-size: 11.5px;
}
.st-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Nie zawężone do `.st`: nagłówek powłoki (`SettingsHeader`) bywa użyty na stronie, która
   zostaje przy własnym układzie i korzenia `.st` nie ma. Klasa jest własnością powłoki, więc
   nie ma czego kolidować. */
html[data-theme=dark] .st-btn--pri,
html[data-theme=dark] .st-btn--pri:hover {
  color: #151a32;
}

.st-ib {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-mute);
  cursor: pointer;
  flex-shrink: 0;
  /* Wciśnięty stan — przycisk ikonowy bywa przełącznikiem (zawijanie wierszy,
     panel zmiennych), nie tylko akcją. */
}
.st-ib svg {
  width: 13px;
  height: 13px;
}
.st-ib:hover {
  background: var(--paper-2);
  color: var(--ink);
  border-color: var(--line);
}
.st-ib--danger:hover {
  background: var(--danger-soft);
  color: var(--danger-ink);
  border-color: color-mix(in oklab, var(--danger) 30%, transparent);
}
.st-ib.on {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-color: color-mix(in oklab, var(--accent) 26%, transparent);
}
.st-ib:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.st-ib:disabled:hover {
  background: transparent;
  color: var(--ink-mute);
  border-color: transparent;
}

/* ── przełącznik ──────────────────────────────────────────────────────── */
.st-sw {
  width: 31px;
  height: 18px;
  border-radius: 999px;
  background: var(--line-2);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  border: none;
  padding: 0;
}
.st-sw i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: var(--shadow-1);
  transition: left 0.14s ease;
}
.st-sw.on {
  background: var(--accent);
}
.st-sw.on i {
  left: 15px;
}
.st-sw:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── pasek narzędzi ───────────────────────────────────────────────────── */
.st-tb {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  padding: 9px 20px;
}

.st-tbi {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 auto;
  width: 100%;
  max-width: var(--st-w, 900px);
  flex-wrap: wrap;
}

.st-fld {
  position: relative;
  display: flex;
  align-items: center;
  /* Szerokość przez zmienną, bo strona szukania (hub) chce szersze pole niż
     lista, na której szukanie jest dodatkiem. */
  width: var(--st-fld-w, 274px);
  flex-shrink: 0;
  /* Podpowiedź skrótu „/" — zajmuje to samo miejsce co przycisk czyszczenia,
     więc pole nie drga przy pierwszym znaku. */
}
.st-fld .st-fld__ic {
  position: absolute;
  left: 9px;
  display: grid;
  color: var(--ink-faint);
  pointer-events: none;
}
.st-fld .st-fld__ic svg {
  width: 13px;
  height: 13px;
}
.st-fld input {
  flex: 1;
  min-width: 0;
  height: 29px;
  padding: 0 26px 0 28px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font: 400 12.5px/1 "Open Sans", system-ui, sans-serif;
  outline: none;
}
.st-fld input::placeholder {
  color: var(--ink-faint);
}
.st-fld input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 15%, transparent);
}
.st-fld .st-fld__clr {
  position: absolute;
  right: 5px;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  border-radius: 3px;
}
.st-fld .st-fld__clr svg {
  width: 12px;
  height: 12px;
}
.st-fld .st-fld__clr:hover {
  background: var(--paper-3);
  color: var(--ink);
}
.st-fld .st-kbd {
  position: absolute;
  right: 7px;
  font: 500 10px/1 "Consolas", "Cascadia Mono", monospace;
  color: var(--ink-faint);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  padding: 2px 5px;
  pointer-events: none;
}

/* pigułka filtra */
.st-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 23px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--paper);
  color: var(--ink-mute);
  font: 500 11.5px/1 "Open Sans", system-ui, sans-serif;
  cursor: pointer;
}
.st-chip:hover {
  border-color: var(--ink-faint);
  color: var(--ink);
}
.st-chip.on {
  background: var(--accent-soft);
  border-color: color-mix(in oklab, var(--accent) 32%, transparent);
  color: var(--accent-ink);
  font-weight: 600;
}
.st-chip .st-chip__n {
  font-family: "Consolas", "Cascadia Mono", monospace;
  font-size: 10px;
  opacity: 0.75;
}

.st-cnt {
  font: 500 11px/1 "Consolas", "Cascadia Mono", monospace;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* ── kolumna treści ───────────────────────────────────────────────────── */
.st-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 16px 20px 26px;
}

.st-col {
  margin: 0 auto;
  width: 100%;
  max-width: var(--st-w, 900px);
  display: flex;
  flex-direction: column;
  gap: 11px;
}

/* ── karta sekcji ─────────────────────────────────────────────────────── */
/* Strony, które nie są listą (ustawienia AI, role, osiągnięcia), składają się
   z kart: nagłówek z tytułem i opisem + treść. To ten sam prostokąt co
   `.st-tbl`, więc lista i formularz stoją na tej samej siatce. */
.st-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}

.st-card__h {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.st-card__h h2 {
  margin: 0;
  font: 600 13px/1.3 "Open Sans", system-ui, sans-serif;
  color: var(--ink);
}
.st-card__h p {
  margin: 3px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-mute);
}
.st-card__h .st-card__sp {
  flex: 1;
}
.st-card__h > svg {
  width: 15px;
  height: 15px;
  color: var(--ink-mute);
  flex-shrink: 0;
}

.st-card__b {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

/* Karta, której treść JEST tabelą — tabela ma własne obramowanie, więc
   wewnętrzny padding tylko dublowałby ramkę. */
.st-card__b--flush {
  padding: 0;
  gap: 0;
}

.st-card__f {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
}
.st-card__f .st-card__sp {
  flex: 1;
}

/* ── siatka kart ──────────────────────────────────────────────────────── */
/* Dla stron, których treść jest galerią (skórki awatarów), a nie tabelą. */
.st-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(164px, 1fr));
  gap: 12px;
}

/* ── segmentowany przełącznik widoku ──────────────────────────────────── */
.st-tabs {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  background: var(--paper-2);
  border: 1px solid var(--line-2);
  border-radius: 999px;
}

.st-tab {
  height: 24px;
  padding: 0 12px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-mute);
  font: 600 11.5px/1 "Open Sans", system-ui, sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.st-tab svg {
  width: 13px;
  height: 13px;
}
.st-tab:hover {
  color: var(--ink);
}
.st-tab.on {
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-1);
}

/* ── tabela pozycji ───────────────────────────────────────────────────── */
.st-tbl {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
}

/* Tabela wewnątrz `.st-card__b--flush` — ramkę niesie karta. */
.st-card__b--flush > .st-tbl {
  border: none;
  border-radius: 0;
}

.st-r {
  display: grid;
  grid-template-columns: var(--gt);
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  width: 100%;
  text-align: left;
  /* Wycofana pozycja: skos w tle jest czytelny także wtedy, gdy ktoś patrzy
     na wydruk albo ma problem z rozróżnianiem barw — sam przygaszony tekst
     nie wystarcza. */
}
.st-r:last-child {
  border-bottom: none;
}
.st-r.hd {
  min-height: 28px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line-2);
}
.st-r.hd > * {
  font: 600 10px/1 "Consolas", "Cascadia Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-mute);
}
.st-r:not(.hd):hover {
  background: var(--paper-2);
}
.st-r.off {
  background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in oklab, var(--ink-faint) 5%, transparent) 6px 12px);
}
.st-r.off .st-nm {
  color: var(--ink-faint);
}
.st-r.off .st-sq {
  opacity: 0.5;
}
.st-r.drg {
  opacity: 0.35;
}
.st-r.ovr {
  box-shadow: inset 0 2px 0 var(--accent);
}

.st-grip {
  display: grid;
  place-items: center;
  color: var(--ink-faint);
  cursor: grab;
  opacity: 0.4;
  margin-left: -3px;
}
.st-grip svg {
  width: 14px;
  height: 14px;
}
.st-r:hover .st-grip {
  opacity: 1;
}
.st-grip.no {
  cursor: default;
  opacity: 0.16;
}
.st-r:hover .st-grip.no {
  opacity: 0.16;
}

.st-sq {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: var(--ft-tint);
  border: 1px solid var(--ft-edge);
  color: var(--ft-fg);
}
.st-sq svg {
  width: 13px;
  height: 13px;
}
.st-sq.plain {
  background: var(--paper-2);
  border-color: var(--line-2);
  color: var(--ink-mute);
}

.st-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--ft-fg);
  flex-shrink: 0;
}

.st-nm {
  font: 600 12.5px/1.2 "Open Sans", system-ui, sans-serif;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.st-nm b {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.st-nm mark {
  background: color-mix(in oklab, var(--accent) 26%, transparent);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

/* wtórny tekst w komórce (opis, temat) */
.st-sub {
  font: 400 11.5px/1.4 "Open Sans", system-ui, sans-serif;
  color: var(--ink-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.st-prev {
  display: flex;
  min-width: 0;
}

/* pigułka podglądu — kolor niesie kropka i obwódka, tło zostaje neutralne */
.st-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 19px;
  padding: 0 8px 0 6px;
  border-radius: 999px;
  background: var(--ft-tint);
  color: var(--ft-fg);
  border: 1px solid var(--ft-edge);
  font: 600 10.5px/1 "Open Sans", system-ui, sans-serif;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
}
.st-pill span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Neutralna plakietka stanu — bez odcienia z `--ft`. */
.st-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--paper-2);
  border: 1px solid var(--line-2);
  color: var(--ink-mute);
  font: 600 10px/1 "Consolas", "Cascadia Mono", monospace;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.st-badge--ok {
  background: var(--ok-soft);
  border-color: color-mix(in oklab, var(--ok) 32%, transparent);
  color: var(--ok-ink);
}
.st-badge--warn {
  background: var(--warn-soft);
  border-color: color-mix(in oklab, var(--warn) 32%, transparent);
  color: var(--warn-ink);
}
.st-badge--danger {
  background: var(--danger-soft);
  border-color: color-mix(in oklab, var(--danger) 32%, transparent);
  color: var(--danger-ink);
}

.st-use {
  font: 500 11px/1 "Consolas", "Cascadia Mono", monospace;
  color: var(--ink-mute);
  white-space: nowrap;
}
.st-use.zero {
  color: var(--ink-faint);
}

.st-acts {
  display: flex;
  justify-content: flex-end;
  gap: 2px;
}

/* ── stopka listy ─────────────────────────────────────────────────────── */
.st-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font: 500 10.5px/1.5 "Consolas", "Cascadia Mono", monospace;
  color: var(--ink-faint);
  padding: 0 2px;
}
.st-foot span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.st-foot svg {
  width: 12px;
  height: 12px;
}

/* ── stan pusty ───────────────────────────────────────────────────────── */
.st-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 44px 24px;
  text-align: center;
  color: var(--ink-mute);
  font-size: 12.5px;
}
.st-empty .st-empty__ic {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--paper-2);
  display: grid;
  place-items: center;
  color: var(--ink-faint);
  border: 1px solid var(--line);
}
.st-empty .st-empty__ic svg {
  width: 19px;
  height: 19px;
}
.st-empty .st-empty__t {
  font: 600 13px/1.4 "Open Sans", system-ui, sans-serif;
  color: var(--ink);
}
.st-empty .st-empty__q {
  font-family: "Consolas", "Cascadia Mono", monospace;
  color: var(--ink);
}
.st-empty .st-empty__hint {
  max-width: 42ch;
}

/* ── dialog edycji ────────────────────────────────────────────────────── */
/* Renderowany INLINE w drzewie strony, nie przez portal iPopup. To jedyny
   powód, dla którego strona na tej powłoce nie potrzebuje ani jednego bloku
   `.popup__wrapper:has(...)` w `tokens.css`. */
.st-scrim {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  padding: 24px;
}

.st-dlg {
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--dialog-shadow);
  width: 520px;
  max-width: 100%;
  max-height: 94%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--ink);
}
.st-dlg--wide {
  width: 720px;
}

.st-dlg__h {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.st-dlg__h .st-dlg__t {
  font: 600 13.5px/1 "Open Sans", system-ui, sans-serif;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.st-dlg__h svg {
  width: 15px;
  height: 15px;
}

.st-dlg__b {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  overflow: auto;
}

.st-dlg__f {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
  flex-shrink: 0;
}
.st-dlg__f .st-dlg__sp {
  flex: 1;
}

/* ── pola formularza ──────────────────────────────────────────────────── */
.st-f {
  display: flex;
  flex-direction: column;
}

/* Dwie kolumny pól. Zwija się sama, bo `auto-fit` z `minmax` nie potrzebuje
   media query — pole nigdy nie schodzi poniżej 210px. */
.st-fgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 13px;
}

.st-lb {
  font: 600 10.5px/1 "Consolas", "Cascadia Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  margin-bottom: 7px;
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.st-lb em {
  font: 400 10px/1 "Open Sans", system-ui, sans-serif;
  font-style: normal;
  color: var(--ink-faint);
  letter-spacing: 0;
  text-transform: none;
}

.st-hint {
  font-size: 10.5px;
  color: var(--ink-faint);
  margin-top: 6px;
  line-height: 1.5;
}

.st-in,
.st-sel {
  width: 100%;
  height: 31px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font: 400 12.5px/1 "Open Sans", system-ui, sans-serif;
  padding: 0 9px;
  outline: none;
  /* Wyłączone pole: przeglądarka maluje kontrolkę WŁASNYM chromem mimo
     ciemnego tła z reguły — stąd `appearance` i `-webkit-text-fill-color`
     (ta sama pułapka co na /settings/ai-models). */
}
.st-in::placeholder,
.st-sel::placeholder {
  color: var(--ink-faint);
}
.st-in:focus,
.st-sel:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 15%, transparent);
}
.st-in:disabled,
.st-sel:disabled {
  appearance: none;
  -webkit-text-fill-color: var(--ink-faint);
  color: var(--ink-faint);
  background: var(--paper-2);
  cursor: not-allowed;
}

/* `color-scheme` musi być JAWNY na natywnym <select>: bez tego przeglądarka
   maluje rozwiniętą listę własnym, jasnym chromem, mimo ciemnego tła
   ustawionego regułą. */
.st-sel {
  color-scheme: light dark;
  cursor: pointer;
}

.st-ta {
  width: 100%;
  min-height: 64px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font: 400 12.5px/1.55 "Open Sans", system-ui, sans-serif;
  padding: 8px 9px;
  outline: none;
  resize: vertical;
}
.st-ta::placeholder {
  color: var(--ink-faint);
}
.st-ta:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 15%, transparent);
}

.st-toggles {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 1px;
}

.st-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
}

/* Natywny checkbox zostaje natywny (klawiatura, czytniki ekranu), a
   `accent-color` każe przeglądarce dobrać kontrast znacznika w obu motywach. */
.st-cb {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  margin: 0;
  cursor: pointer;
}

/* ── wyszukiwalny wybór (SettingsPicker) ──────────────────────────────── */
.st-pk {
  position: relative;
  /* Warstwa łapiąca klik poza panelem. `fixed`, żeby pokryła też obszar poza dialogiem. */
  /* Panel leży W TOKU, nie `position: absolute`.
     Wersja absolutna wyglądała jak zwykły dropdown, ale w dialogu była PRZYCINANA: `.st-dlg__b`
     ma `overflow: auto`, a `.st-dlg` `overflow: hidden`, więc lista wystawała poza oba i znikała
     (widać to było dopiero na zrzucie, nie w przeglądzie kodu). W toku dialog po prostu rośnie
     albo się przewija, a panel jest widoczny w całości — niezależnie od tego, w czym siedzi. */
}
.st-pk .st-pk__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  text-align: left;
  cursor: pointer;
}
.st-pk.on .st-pk__btn {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 15%, transparent);
}
.st-pk .st-pk__val {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.st-pk .st-pk__val.ph {
  color: var(--ink-faint);
}
.st-pk .st-pk__clr,
.st-pk .st-pk__ch {
  display: grid;
  place-items: center;
  color: var(--ink-faint);
  flex-shrink: 0;
}
.st-pk .st-pk__clr svg,
.st-pk .st-pk__ch svg {
  width: 13px;
  height: 13px;
}
.st-pk .st-pk__clr:hover {
  color: var(--ink);
}
.st-pk .st-pk__bd {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: default;
}
.st-pk .st-pk__pop {
  position: relative;
  z-index: 11;
  margin-top: 5px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.st-pk .st-pk__search {
  width: 100%;
}
.st-pk .st-pk__list {
  max-height: 224px;
  border: none;
}
.st-pk .st-pk__lb {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

/* ── kolor: koło + wartość hex ────────────────────────────────────────── */
.st-color {
  display: flex;
  align-items: center;
  gap: 10px;
}

.st-color__wheel {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.st-color__wheel input[type=color] {
  position: absolute;
  inset: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.st-color__hex {
  font: 500 11.5px/1 "Consolas", "Cascadia Mono", monospace;
  color: var(--ink-mute);
  text-transform: uppercase;
}

/* ── komunikaty ───────────────────────────────────────────────────────── */
.st-warn,
.st-note,
.st-err {
  display: flex;
  gap: 9px;
  padding: 10px 11px;
  border-radius: var(--radius);
  font-size: 12px;
  line-height: 1.5;
}
.st-warn svg,
.st-note svg,
.st-err svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.st-warn {
  background: var(--warn-soft);
  border: 1px solid color-mix(in oklab, var(--warn) 34%, transparent);
  color: var(--warn-ink);
}

.st-note {
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--ink-mute);
}

.st-err {
  background: var(--danger-soft);
  border: 1px solid color-mix(in oklab, var(--danger) 34%, transparent);
  color: var(--danger-ink);
}

/* ── lista z wyszukiwaniem (członkowie, uprawnienia, pozycje do wyboru) ─ */
.st-picks {
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--paper);
  max-height: 232px;
  overflow: auto;
}

.st-pick {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 9px;
  height: 30px;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink-soft, var(--ink));
  cursor: pointer;
  width: 100%;
  text-align: left;
  /* Wiersz bywa `<button>` (wybór osoby, roli), nie tylko `<label>` z checkboxem. Bez jawnego
     tła i obramowania przeglądarka maluje mu własny `buttonface` — czyli jasny prostokąt na
     ciemnym motywie. Wyłapane ZRZUTEM, nie przeglądem kodu. */
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
}
.st-pick:last-child {
  border-bottom: none;
}
.st-pick:hover {
  background: var(--paper-2);
  color: var(--ink);
}
.st-pick.on {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 600;
}
.st-pick input[type=checkbox] {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  margin: 0;
  cursor: pointer;
}

.st-picks__empty {
  padding: 14px 10px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-faint);
}

/* ── wąskie ekrany ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .st-hd {
    flex-wrap: wrap;
  }
  .st-fld {
    width: 100%;
  }
  .st-scroll {
    padding: 12px 12px 20px;
  }
  .st-tb {
    padding: 9px 12px;
  }
}