/* ============================================================================
   Экран «Настройки · Агент EVA» — светлая тема «Стекло» (13.09.2026).
   ----------------------------------------------------------------------------
   Перенос макета `design/pult-glass-2026-09/settings.html` (референс 7,
   «DO.er · Appearance settings») на живой пульт: персонаж по центру, вокруг —
   стеклянные карточки с настоящими ручками `GET/PUT /api/settings`.

   Отдельный файл, а не строки в `app.css`, по той же причине, что у
   `orders.css` и `inbox.css`: `app.css` лежит в CRLF, и правка его
   LF-инструментом даёт дифф на семь тысяч строк, в котором ревью не увидит ни
   одной настоящей. Все классы начинаются с `.set-`, ничего выше не
   переопределяется — кроме двух мест, названных прямо: `legend` внутри
   `.set-card` и вид строк `#hours-schedule`, `#stopwords`, `#validator-rules`,
   `#examples-*`, которые собирает `app.js`.

   ГРАНИЦЫ ДВИЖЕНИЯ (чек-лист `design/pult-glass-2026-09/README.md`):
     · в кадре только `transform`/`opacity`/`translate`/`rotate`/`scale` и
       `stroke-dashoffset` рисующейся дуги;
     · микроанимации ≤ 300 мс, декоративные циклы ≥ 6 с;
     · `prefers-reduced-motion: reduce` гасит всё — блок в конце файла.
   ========================================================================= */

:root {
  /* Кремовый диск регулятора = цвет главной кнопки референса. */
  --set-disc: #f6ece4;
  --set-disc-ink: #3a2e33;
  --set-dial-track: rgba(255, 255, 255, 0.16);
  /* Расход — вторая, тонкая нить: зелёная читалась бы как «всё хорошо»,
     а это просто счётчик. */
  --set-spent: #9db9ff;
  --set-glow: radial-gradient(circle, rgba(255, 140, 176, 0.34) 0%, rgba(255, 140, 176, 0.12) 42%, transparent 70%);
  --set-refract-1: rgba(255, 122, 194, 0.55);
  --set-refract-2: rgba(95, 224, 192, 0.45);
  /* Ручка ползунка и блик стекла. Белые в «Стекле» и на светлом — на тёмной
     дорожке и на светлой ручка читается одинаково; «Спокойная» берёт свой
     тёплый белый (`--set-disc`), чтобы не блестеть. */
  --set-knob: #ffffff;
  --set-gloss-hi: rgba(255, 255, 255, 0.8);
}

[data-theme="light"] {
  --set-dial-track: rgba(17, 24, 39, 0.12);
  --set-glow: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 200, 220, 0.5) 38%, rgba(255, 255, 255, 0) 70%);
  --set-spent: #2f4bb5;
  --set-knob: #ffffff;
  --set-gloss-hi: rgba(255, 255, 255, 0.8);
}

[data-theme="neutral"] {
  --set-disc: #fffdf9;
  --set-disc-ink: #1b1a16;
  --set-dial-track: rgba(43, 38, 30, 0.16);
  /* «Спокойная» — без свечений и размытия: решение 12.09 по трём темам. */
  --set-glow: none;
  --set-refract-1: rgba(201, 138, 166, 0.4);
  --set-refract-2: rgba(95, 156, 140, 0.32);
  --set-spent: #3c5a9a;
  --set-knob: #fffdf9;
  --set-gloss-hi: rgba(255, 253, 249, 0.55);
}

/* ------------------------------------------------------------- ЗАГОЛОВОК */
.set-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
}

.set-head-act {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}

/* Главная кнопка экрана. Неактивна, пока ничего не менялось: «Сохранить»,
   которое всегда нажимается, ничего не сообщает о состоянии формы. */
.set-save {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}

.set-save:disabled {
  cursor: not-allowed;
}

.set-save.is-busy {
  cursor: progress;
}

/* ---------------------------------------------------------------- ТУЛБАР */
.set-tools {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-bottom: var(--s4);
}

.set-tools-sep {
  width: 1px;
  height: 1.1rem;
  background: var(--line-2);
  margin: 0 var(--s1);
}

.set-tool {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  height: 2rem;
  padding: 0 0.7rem;
  border-radius: var(--r-sm);
  background: var(--glass);
  border: 1px solid var(--line-2);
  color: var(--silver);
  font-size: var(--t-xs);
  font-weight: 500;
}

.set-tool:hover:not(:disabled) {
  color: var(--milk);
  border-color: var(--line-3);
}

.set-tool.is-on {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-2);
  font-weight: 600;
}

.set-tool-note {
  margin-left: var(--s2);
}

.set-tool-note.is-bad {
  color: var(--bad);
  font-weight: 600;
}

.set-tool-note.is-ok {
  color: var(--ok);
  font-weight: 600;
}

/* ----------------------------------------------------------------- СЦЕНА */
/* 🔴 Растёт не персона, а колонки карточек. Было наоборот: боковые колонки
   стояли жёстко в 19rem, и вся прибавка ширины доставалась середине — на
   ультравайде знак EVA плавал в панели втрое шире себя, а карточки «Температура»
   и «Потолок дня» оставались узкими полосками. Середина теперь упирается в
   потолок героя (`--hero-max` + место под чипы), стороны делят остаток. */
.set-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 38rem) minmax(0, 1fr);
  gap: var(--s4);
  align-items: start;
}

.set-col {
  display: grid;
  gap: var(--s4);
  align-content: start;
  min-width: 0;
}

/* 🔴 Второй ряд — КОЛОНКИ, а не сетка. В сетке высота строки равна самой
   высокой карточке, и «Стоп-слова» в три строки оставляли под собой дыру в
   четыреста пикселей рядом с «Валидатором» в двадцать строк. Карточки здесь
   независимы друг от друга, читать их можно в любом порядке — значит и
   выравнивать по общей строке незачем. */
.set-row2 {
  columns: 3;
  column-gap: var(--s4);
  margin-top: var(--s4);
}

.set-row2 > .set-card {
  width: 100%;
  margin-bottom: var(--s4);
  break-inside: avoid;
}

.set-row2[hidden] {
  display: none;
}

/* -------------------------------------------------------------- КАРТОЧКА */
.set-card {
  position: relative;
  margin: 0;
  padding: var(--s4);
  border-radius: var(--r-card-sm);
  min-width: 0;
}

/* 🔴 `legend` внутри стеклянной карточки перестаёт быть врезкой в рамку:
   рамки у неё нет, а фон под подписью — стекло, а не плашка. */
.set-card > legend,
.set-card > .set-cap {
  display: block;
  float: none;
  width: 100%;
  padding: 0;
  margin: 0 0 var(--s3);
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--mute);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.set-card > legend b,
.set-card > .set-cap b {
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--faint);
}

.set-card .note {
  margin-bottom: 0;
}

.set-card .field,
.set-field {
  margin-top: var(--s3);
}

.set-field > label,
.set-field > .label {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--silver);
  font-size: var(--t-xs);
}

.set-field > input,
.set-field > select,
.set-field > textarea {
  width: 100%;
}

.set-field .note {
  margin-top: 0.3rem;
}

/* Поле, которое сейчас никем не читается (свой тон при другом тоне): видно,
   но приглушено — прятать его значит терять уже написанный текст из виду. */
.set-field.is-off {
  opacity: 0.65;
}

/* Ошибка схемы — красными словами ПОД полем, а не «не сохранилось» внизу
   экрана: искать глазами виноватую ручку среди двенадцати карточек оператор
   не должен. Текст приходит от сервера, он уже по-русски. */
.set-err {
  display: block;
  margin-top: 0.25rem;
  color: var(--bad);
  font-size: var(--t-micro);
  font-weight: 600;
  font-style: normal;
  line-height: 1.45;
}

#tab-settings .is-bad,
#tab-settings input.is-bad,
#tab-settings textarea.is-bad,
#tab-settings select.is-bad {
  border-color: var(--bad);
  background: var(--bad-soft);
}

.set-actions-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-top: var(--s3);
}

.set-actions {
  margin-top: var(--s4);
  padding: var(--s4);
  border-radius: var(--r-card-sm);
}

/* 🔴 M-4 (QA 24.09): липкость панели формы (`.actions` в app.css) молча
   перебивал `.glass { position: relative }`, стоящий в каскаде позже, — и на
   телефоне, и на ПК панель лежала под последней карточкой (y 5032 на 375,
   y 1952 при окне 900). Двойной класс возвращает `sticky`; `bottom` — из
   app.css (на телефоне — над панелью вкладок). */
.actions.set-actions {
  position: sticky;
}

/* На телефоне в липкой панели три кнопки в ряд (двойник «Сохранить»,
   «Отменить правки», «Сбросить»); строка «Есть несохранённые правки…»
   ложилась под ними столбиком в 90 px и раздувала панель до 197 px. Состояние
   и так читается по активной «Сохранить»; строка остаётся для чтеца экрана. */
@media (max-width: 56rem) {
  .set-actions #set-dirty-note {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ------------------------------------------- ДУГА-РЕГУЛЯТОР (реф 7, п.3) */
.set-dial {
  position: relative;
  display: block;
  width: 100%;
  max-width: 11rem;
  margin: 0 auto;
}

.set-dial-art {
  display: block;
}

.set-dial svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* 🔴 Настоящий ползунок лежит ПОВЕРХ дуги прозрачным слоем: один орган, а не
   «картинка плюс где-то рядом поле». Он получает клавиатуру и фокус, читалка
   называет его подписью, мышь тянет его же. Второго источника значения нет. */
.set-dial-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: ew-resize;
  appearance: none;
  -webkit-appearance: none;
  background: none;
}

/* 🔴 Фокус с клавиатуры проявляет ползунок (`opacity: 1`) — иначе не видно его
   рамки, потому что прозрачность гасит и её. Но вместе с рамкой проступает и
   РОДНОЙ орган браузера: тёмная подложка поля с синим бегунком ложится поверх
   дуги и закрывает её собой — на тёмной теме от дуги не остаётся ничего.
   Найдено при съёмке «после» 13.09 на «Потолке дня»; тем же способом пропадала
   и дуга температуры, просто её никто не снимал в тёмной теме с клавиатуры.
   Видимой обязана быть ОДНА рамка: подложка гасится явно, родной бегунок —
   нулевой. Значение и здесь показывает дуга, а не орган браузера. */
.set-dial-input:focus-visible {
  opacity: 1;
  background: transparent;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.set-dial-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0;
  height: 0;
}

.set-dial-input::-moz-range-thumb {
  width: 0;
  height: 0;
  border: 0;
  background: none;
}

.dl-track {
  fill: none;
  stroke: var(--set-dial-track);
  stroke-linecap: round;
}

.dl-fill {
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
}

.dl-itrack {
  fill: none;
  stroke: var(--set-dial-track);
  stroke-width: 3.4;
  stroke-linecap: round;
}

.dl-ifill {
  fill: none;
  stroke: var(--set-spent);
  stroke-width: 4;
  stroke-linecap: round;
}

.dl-disc {
  fill: var(--set-disc);
  stroke: var(--line);
  stroke-width: 1;
}

.dl-big {
  fill: var(--set-disc-ink);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.dl-small {
  fill: var(--set-disc-ink);
  opacity: 0.82;
  font-size: 11px;
  font-weight: 600;
}

.dl-knob-o {
  fill: var(--set-knob);
  stroke: var(--line-3);
  stroke-width: 1;
}

.dl-knob-i {
  fill: var(--accent);
}

.set-ends {
  display: flex;
  justify-content: space-between;
  margin: 0 0.4rem var(--s2);
  color: var(--mute);
  font-size: var(--t-micro);
}

/* Малый диск-значение — общий компонент описи (деталь 6). */
.set-disc {
  width: 4.5rem;
  height: 4.5rem;
}

.set-disc svg {
  display: block;
  width: 100%;
  height: 100%;
}

.dc-track {
  fill: none;
  stroke: var(--set-dial-track);
  stroke-width: 4;
}

.dc-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
}

.dc-big {
  fill: var(--milk);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.dc-cap {
  fill: var(--mute);
  font-size: 11px;
  font-weight: 600;
}

.set-disc.is-off .dc-fill {
  stroke: var(--line-2);
}

.set-disc.is-off .dc-big {
  fill: var(--mute);
}

.set-discs {
  display: flex;
  gap: var(--s3);
  margin-top: var(--s3);
}

.set-discs figure {
  flex: 1;
  min-width: 0;
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 0.2rem;
}

.set-discs figcaption {
  width: 100%;
  text-align: center;
}

.set-discs figcaption label {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--silver);
  font-size: var(--t-micro);
}

.set-discs figcaption input {
  width: 100%;
  text-align: center;
}

/* ------------------------------------------------ ПОЛЗУНОК (реф 7, п.8–9) */
.set-sliders {
  display: grid;
  gap: 0.1rem;
}

.set-slider {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0;
}

.set-slider + .set-slider {
  border-top: 1px solid var(--line);
}

.set-slider .ic {
  font-style: normal;
  font-size: var(--t-xs);
  color: var(--mute);
  text-align: center;
}

.set-slider .nm {
  grid-column: 2;
  color: var(--milk);
  font-size: var(--t-xs);
  line-height: 1.25;
}

.set-slider .nm small {
  display: block;
  color: var(--mute);
  font-size: var(--t-micro);
  line-height: 1.35;
  margin-top: 0.1rem;
}

.set-slider .val {
  grid-column: 3;
  grid-row: 1;
  color: var(--milk);
  font-size: var(--t-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

/* Трек 1,5 px и круглая ручка 10 px — как в референсе; заполнение приезжает
   градиентом от левого края, а не вторым узлом. */
.set-slider input[type="range"] {
  grid-column: 2 / -1;
  width: 100%;
  height: 1.1rem;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  cursor: pointer;
}

.set-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    var(--accent) 0 var(--p, 0%),
    var(--line-2) var(--p, 0%) 100%
  );
}

.set-slider input[type="range"]::-moz-range-track {
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    var(--accent) 0 var(--p, 0%),
    var(--line-2) var(--p, 0%) 100%
  );
}

.set-slider input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  margin-top: -4.25px;
  border-radius: 50%;
  background: var(--set-knob);
  border: 1px solid var(--line-3);
  box-shadow: var(--sh-1);
}

.set-slider input[type="range"]::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 1px solid var(--line-3);
  border-radius: 50%;
  background: var(--set-knob);
}

.set-slider input[type="range"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* Тумблеры со словами: эмодзи, дата в контексте, пауза при операторе. */
.set-switch {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}

/* ------------------------------------- ПЛИТКИ МОДЕЛЕЙ И УГОЛКИ (п.10, 11) */
.set-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2);
}

.set-tile {
  position: relative;
  padding: 0.5rem 0.3rem 0.45rem;
  border-radius: var(--r-sm);
  text-align: center;
  background: var(--glass);
  border: 1px solid var(--line-2);
  color: var(--milk);
}

.set-tile b {
  display: block;
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Слаг модели — не подпись капсом, а содержимое: он читается целиком и живёт
   на общем размере интерфейса, а не на капслочном `--t-micro`. */
.set-tile span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--silver);
  font-size: var(--t-xs);
}

.set-tile small {
  display: block;
  color: var(--mute);
  font-size: var(--t-micro);
}

.set-tile.is-on {
  background: var(--glass-3);
  border-color: var(--accent-line);
}

/* Видоискатель: два псевдоэлемента дают четыре уголка — общая рамка выбора
   для плиток, кружков и «сегодня» в неделе (деталь 11). */
.set-tile.is-on::before,
.set-tile.is-on::after,
.set-circle.is-on::before,
.set-circle.is-on::after,
.set-day.is-today::before,
.set-day.is-today::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  pointer-events: none;
  border: 1.5px solid var(--accent);
}

.set-tile.is-on::before {
  left: -3px;
  top: -3px;
  border-width: 1.5px 0 0 1.5px;
  border-radius: 3px 0 0 0;
}

.set-tile.is-on::after {
  right: -3px;
  bottom: -3px;
  border-width: 0 1.5px 1.5px 0;
  border-radius: 0 0 3px 0;
}

/* --------------------------------------- СЕГМЕНТЫ (усилие модели, деталь 34) */
.set-seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-sm);
  background: var(--seg-bg);
  border: 1px solid var(--line-2);
}

.set-seg-b {
  position: relative;
  padding: 0.2rem 0.6rem;
  border-radius: var(--r-xs);
  color: var(--mute);
  font-size: var(--t-micro);
  font-weight: 500;
  cursor: pointer;
}

.set-seg-b input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.set-seg-b.is-on {
  background: var(--glass-3);
  color: var(--milk);
  font-weight: 600;
}

.set-seg-b:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ------------------------------------- КРУЖКИ ТОНА, ЯЗЫКА И ОБРАЩЕНИЯ (12–13) */
.set-circles {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: flex-start;
}

.set-circles-grp {
  display: flex;
  gap: 0.75rem;
}

.set-circle {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  min-width: 2.4rem;
  color: var(--silver);
  font-size: var(--t-micro);
  text-align: center;
  cursor: pointer;
}

.set-circle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.set-circle i {
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  font-style: normal;
  font-size: var(--t-micro);
  color: var(--milk);
  background: var(--glass);
  border: 1px solid var(--line-2);
}

.set-circle--t0 i {
  background: linear-gradient(150deg, var(--ramp-1), var(--ramp-2));
  border-color: transparent;
}

.set-circle--t1 i {
  background: linear-gradient(150deg, var(--ramp-2), var(--ramp-3));
  border-color: transparent;
}

.set-circle--t2 i {
  background: linear-gradient(150deg, var(--ramp-3), var(--ramp-4));
  border-color: transparent;
}

.set-circle--t3 i {
  background: linear-gradient(150deg, var(--ramp-4), var(--ramp-5));
  border-color: transparent;
  color: var(--ramp-ink);
}

.set-circle.is-on {
  color: var(--milk);
  font-weight: 600;
}

.set-circles--two .set-circle.is-on i {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-2);
}

.set-circle.is-on::before {
  left: 50%;
  margin-left: -1rem;
  top: -3px;
  border-width: 1.5px 0 0 1.5px;
  border-radius: 3px 0 0 0;
}

.set-circle.is-on::after {
  left: 50%;
  margin-left: 0.5rem;
  top: 1.2rem;
  border-width: 0 1.5px 1.5px 0;
  border-radius: 0 0 3px 0;
}

.set-circle:has(input:focus-visible) i {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.set-circle-sep {
  width: 1px;
  height: 1.4rem;
  background: var(--line-2);
}

/* ------------------------------------------------- ПЕРСОНАЖ (реф 7, п.2) */
.set-persona {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s5);
  min-width: 0;
}

.set-persona-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
}

.set-persona h3 {
  font-family: var(--f-disp);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--milk);
}

.set-persona-sub {
  color: var(--mute);
  font-size: var(--t-xs);
}

.set-variant {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-sm);
  background: var(--seg-bg);
  border: 1px solid var(--line);
  flex: none;
}

.set-variant-b {
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-xs);
  background: none;
  border: 0;
  color: var(--silver);
  font-size: var(--t-micro);
  font-weight: 500;
  white-space: nowrap;
}

.set-variant-b.is-on {
  background: var(--accent-soft);
  color: var(--accent-2);
  font-weight: 600;
}

.set-figure {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 12.5rem;
  padding: var(--s2) 0;
}

.set-glow {
  position: absolute;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  pointer-events: none;
  background: var(--set-glow);
}

/* Сфера-знак: тот же объект, что в «Обзоре дня» (`.eva-orb` в `app.css`) —
   второй сферы у продукта нет. Здесь к нему добавлены преломление (медленно
   обходит шар) и блик-полумесяц в противофазе. */
.set-orb {
  position: relative;
  z-index: 1;
  width: 11.5rem;
  height: 11.5rem;
}

.set-refract,
.set-gloss {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.set-refract {
  background: linear-gradient(180deg, var(--set-refract-1) 0%, transparent 52%, var(--set-refract-2) 100%);
  mix-blend-mode: screen;
  opacity: 0.75;
}

.set-gloss {
  background: radial-gradient(circle at 32% 22%, var(--set-gloss-hi) 0%, rgba(255, 255, 255, 0) 46%);
}

.set-logo {
  position: relative;
  z-index: 1;
  text-align: center;
  font-family: var(--f-disp);
}

.set-logo b {
  display: block;
  font-size: var(--t-3xl);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--milk);
}

.set-logo span {
  font-family: var(--f-ui);
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}

/* Шесть фактов в два столбца, а не четыре в один ряд: с иконкой в квадратике
   чип шире, а «пауза при операторе» — самая длинная подпись экрана. */
.set-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2);
}

.set-facts .gchip {
  min-height: 2.6rem;
  min-width: 0;
}

.set-fact {
  display: block;
  min-width: 0;
}

/* 🔴 Цвет текста в чипе НЕ переопределяется. Чип несёт собственный
   стеклянный фон (`.gchip` в app.css), и белый «текст на градиенте» на нём
   сливается с подложкой в «Спокойной» — проверка контраста показывала
   ровно 1,00:1. Здесь только размеры и обрезка длинного слага. */
.set-fact small {
  display: block;
  font-size: var(--t-micro);
}

/* 🔴 Обрезка многоточием оставлена ОДНОМУ слагу модели (дефект 9 QA 12.09).
   Он бывает длиной в строку, у него есть подсказка с полным именем и
   провайдером, и переносить его по дефисам значило бы растить чип втрое.
   Остальные три факта — «язык · обращение», «время ответа», «расход за сутки»
   — короткие и обязаны помещаться ЦЕЛИКОМ: обрезанные, они прямо врали
   («как у клиента · на…» читается как незаконченная настройка). */
.set-fact b {
  display: block;
  overflow-wrap: break-word;
  font-size: var(--t-xs);
  font-weight: 700;
}

#set-fact-model {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.set-bubble {
  padding: 0.6rem 0.75rem;
  border-radius: var(--r-md) var(--r-md) var(--r-md) 4px;
  background: var(--glass-3);
  border: 1px solid var(--line);
}

.set-bubble.is-empty {
  border-style: dashed;
}

.set-bubble-cap {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--mute);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.set-bubble p {
  color: var(--milk);
  font-size: var(--t-xs);
  line-height: 1.5;
  white-space: pre-line;
}

.set-bubble.is-empty p {
  color: var(--mute);
}

/* ------------------------------------------------ ДНИ НЕДЕЛИ (п.18) */
.set-days {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
}

.set-day {
  position: relative;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--glass);
  border: 1px solid var(--line-2);
  color: var(--mute);
  font-size: var(--t-micro);
  font-weight: 600;
}

.set-day.is-on {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-2);
}

.set-day.is-today::before {
  left: -4px;
  top: -4px;
  border-width: 1.5px 0 0 1.5px;
  border-radius: 3px 0 0 0;
}

.set-day.is-today::after {
  right: -4px;
  bottom: -4px;
  border-width: 0 1.5px 1.5px 0;
  border-radius: 0 0 3px 0;
}

.set-modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s2);
}

.set-mode {
  position: relative;
  padding: 0.4rem 0.45rem;
  border-radius: var(--r-sm);
  background: var(--glass);
  border: 1px solid var(--line-2);
  color: var(--mute);
  font-size: var(--t-micro);
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
}

.set-mode input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.set-mode.is-on {
  background: var(--glass-3);
  border-color: var(--accent-line);
  color: var(--milk);
  font-weight: 600;
}

.set-mode:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ---------------------------------------------- МАСКИ ЧАТОВ (п.19) */
.set-masks {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-bottom: var(--s2);
}

.set-mask {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  height: 1.65rem;
  padding: 0 0.55rem;
  border-radius: var(--r-pill);
  background: var(--glass);
  border: 1px solid var(--line-2);
  color: var(--mute);
  font-size: var(--t-micro);
}

.set-mask b {
  color: var(--silver);
  font-weight: 600;
}

/* ------------------------------------------ БАЗА ЗНАНИЙ В ПРОМПТЕ (п.22) */
.set-kb {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-bottom: var(--s3);
}

.set-kbc {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  height: 1.65rem;
  padding: 0 0.55rem;
  border-radius: var(--r-pill);
  background: var(--glass);
  border: 1px solid var(--line-2);
  color: var(--mute);
  font-size: var(--t-micro);
}

.set-kbc i {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-3);
}

.set-kbc.is-on {
  color: var(--silver);
}

.set-kbc.is-on i {
  background: var(--accent);
}

.set-kbc small {
  color: var(--mute);
}

/* ------------------------------------------------------- СЕКРЕТЫ (п.23) */
.set-secrets {
  display: grid;
  gap: 0.35rem;
}

.set-secret {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-micro);
}

.set-secret i {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
}

.set-secret.is-off i {
  background: var(--line-3);
}

.set-secret b {
  color: var(--silver);
  font-weight: 500;
}

.set-secret small {
  margin-left: auto;
  color: var(--mute);
}

/* -------------------------------------------------------- ДОСТУП (п.24) */
.set-avatars {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s3);
}

.set-user {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-xs);
}

.set-user .set-ava {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent-2);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.set-user.is-off .set-ava {
  background: var(--glass);
  border-color: var(--line-2);
  color: var(--mute);
}

.set-user b {
  display: block;
  color: var(--milk);
  font-weight: 600;
}

.set-user small {
  display: block;
  color: var(--mute);
  font-size: var(--t-micro);
}

/* «+ завести» — кнопка, но выглядит как ещё одна аватарка: общий вид кнопок
   пульта (градиентная пилюля) в ряду людей читался бы как главное действие
   карточки, а главное здесь — кто уже имеет доступ. */
.set-user.is-add {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.set-user.is-add .set-ava {
  background: none;
  border: 1px dashed var(--line-3);
  color: var(--mute);
}

.set-user.is-add:hover .set-ava {
  border-color: var(--accent-line);
  color: var(--accent-2);
}

/* ------------------------------------------------------ ПРИМЕРЫ (п.25) */
.set-ex {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--s3);
  align-items: center;
}

/* ------------------------------------------------ СТРОКИ, КОТОРЫЕ СОБИРАЕТ app.js
   `#hours-schedule`, `#stopwords`, `#validator-rules`, `#examples-*` рисует
   форма из app.js — здесь они только ужимаются под ширину карточки. */
.set-card .list {
  display: grid;
  gap: 0.35rem;
  margin-bottom: var(--s2);
}

.set-card .row {
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.35rem;
  font-size: var(--t-xs);
}

.set-card .row input[type="text"] {
  min-width: 6rem;
}

.set-card .days .row.day {
  display: grid;
  grid-template-columns: minmax(5rem, 1fr) auto auto auto;
  align-items: center;
}

.set-card .rule {
  align-items: flex-start;
  gap: var(--s2);
  padding: 0.3rem 0;
  font-size: var(--t-xs);
}

.set-card .rule .note {
  margin-left: auto;
  color: var(--bad);
  font-weight: 600;
}

.set-details > summary {
  cursor: pointer;
  color: var(--silver);
  font-size: var(--t-xs);
  padding: 0.3rem 0;
}

.set-details--wide {
  margin-top: var(--s4);
}

/* ------------------------------------------------- ШТОРКА ВЕРСИЙ (п.17) */
.set-sheet-back {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--backdrop);
}

.set-sheet {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 61;
  width: min(34rem, 100vw);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s5);
  overflow-y: auto;
  background: var(--ink-780);
  border-left: 1px solid var(--line-2);
  box-shadow: var(--sh-3);
}

.set-sheet[hidden],
.set-sheet-back[hidden] {
  display: none;
}

.set-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}

.set-sheet-head h3 {
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--milk);
}

.set-sheet-body {
  display: grid;
  gap: var(--s4);
}

.set-vlist {
  display: grid;
  gap: 0.35rem;
}

.set-vrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s2);
  align-items: center;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border-radius: var(--r-sm);
  background: var(--glass);
  border: 1px solid var(--line-2);
  color: var(--milk);
  font-size: var(--t-xs);
  text-align: left;
}

.set-vrow:hover {
  border-color: var(--line-3);
}

.set-vrow.is-on {
  background: var(--glass-3);
  border-color: var(--accent-line);
}

.set-vrow b {
  display: block;
  font-weight: 600;
}

.set-vrow small {
  display: block;
  color: var(--mute);
  font-size: var(--t-micro);
  line-height: 1.35;
}

.set-vrow .set-vn {
  color: var(--mute);
  font-size: var(--t-micro);
  white-space: nowrap;
}

.set-vprev {
  display: grid;
  gap: var(--s2);
  padding: var(--s3);
  border-radius: var(--r-sm);
  background: var(--glass);
  border: 1px solid var(--line-2);
}

.set-vdiff {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  max-height: 18rem;
  overflow: auto;
}

.set-vdiff div {
  font-size: var(--t-micro);
  line-height: 1.45;
  color: var(--silver);
}

.set-vdiff code {
  color: var(--milk);
}

.set-vbad {
  padding: 0.5rem 0.6rem;
  border-radius: var(--r-sm);
  background: var(--bad-soft);
  border: 1px solid var(--bad-line);
  color: var(--bad);
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.45;
}

.set-vwarn {
  padding: 0.5rem 0.6rem;
  border-radius: var(--r-sm);
  background: var(--warn-soft);
  border: 1px solid var(--warn-line);
  color: var(--warn);
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.45;
}

/* ============================================================================
   СВОДКА ЭКРАНА (полировка 12.09.2026)
   ----------------------------------------------------------------------------
   Ряд над формой: брендовая карточка расхода, три плитки и волна по дням.
   Своих компонентов здесь почти нет — `.gcard`, `.dotnum`, `.gauge`,
   `.legend`, `.wave`, `.axis-x`, `.ovspark` и `.dotgrid` объявлены в
   `app.css` и уже работают на «Обзоре дня». Ниже только раскладка и одна
   новая деталь — две полосы «медиана против p90».
   ========================================================================= */
.set-deck {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: var(--s4);
  margin-bottom: var(--s4);
  align-items: start;
}

/* Брендовая карточка тянется на обе строки правой колонки: цифра дня, шкала
   потолка и легенда потолков — это один ответ на вопрос «сколько стоит». */
.set-deck-hero {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: stretch;
  min-height: 21rem;
}

.set-deck-hero .dotnum {
  margin-top: var(--s4);
}

.set-deck-hero .g-sub {
  margin-top: var(--s2);
}

/* 🔴 Дорожка шкалы приглушена. На «Обзоре» доля «без человека» обычно велика
   и яркое кольцо под ней читается как фон; здесь доля потолка — единицы
   процентов, и дорожка в полную яркость читалась как «потолок почти съеден».
   Ярким остаётся ровно то, что данные: сама дуга. */
#set-spend-gauge .gauge-bg {
  opacity: 0.5;
}

.set-deck-trio {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3);
}

.set-deck-trio .gcard {
  min-height: 10.5rem;
}

.set-deck-trio .dotnum {
  margin-top: auto;
  margin-bottom: var(--s2);
}

.set-deck-trio .ovspark {
  margin-top: auto;
}

/* 🔴 У матрицы точек и у декоративной сетки обе `margin-top: auto` — свободная
   высота делилась между ними пополам, и цифра прилипала к подписи сверху.
   Сетке хватает обычного отступа: тянуть карточку — работа цифры. */
.set-deck-trio .dotgrid {
  margin-top: var(--s3);
}

.set-deck-trio .g-sub {
  margin-top: var(--s2);
}

.set-deck-wave {
  grid-column: 2;
  grid-row: 2;
}

.set-deck-wave .wave {
  margin-top: var(--s3);
}

.set-deck-wave .g-sub {
  margin-top: var(--s2);
}

/* Две полосы вместо волны: ряда по суткам у времени ответа в базе нет, и
   выдумывать его нельзя. Медиана и p90 меряются от p90 — длинная полоса
   всегда полная, короткая показывает, насколько «обычный» ход быстрее
   «долгого». Число стоит у каждой: полоса без числа — это картинка. */
.set-p9 {
  display: grid;
  gap: 0.3rem;
  margin-top: auto;
  padding-top: var(--s2);
}

.set-p9 span {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s2);
  color: var(--on-grad-2);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
}

.set-p9 i {
  display: block;
  height: 5px;
  min-width: 3px;
  border-radius: 3px;
  background: var(--on-grad);
  opacity: 0.92;
}

.set-p9 span.is-2 i {
  opacity: 0.5;
}

.set-p9 b {
  color: var(--on-grad);
  font-weight: 600;
}

/* Пустое состояние: ходов не было — полос нет, есть объяснение словами. */
.set-p9.is-empty {
  color: var(--on-grad-2);
  font-size: var(--t-micro);
  line-height: 1.4;
}

/* Иконка в квадратике у заголовка карточки. `inline-grid`, а не флекс-строка:
   подпись карточки остаётся блоком (в ней живёт `<b>` вторым весом), и
   переводить её на flex значило бы разорвать «Температура модели» на два
   элемента с зазором между ними. */
.set-card > legend .ibox,
.set-card > .set-cap .ibox {
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  margin-right: var(--s2);
  vertical-align: -0.42em;
  border-radius: var(--r-sm);
  background: var(--ibox-bg);
  border: 1px solid var(--ibox-line);
  color: var(--silver);
}

/* ------------------------------------------------------------- АДАПТИВ */
@media (max-width: 1280px) {
  .set-stage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Сводка становится двумя строками: брендовая карточка сверху во всю
     ширину, тройка плиток и волна под ней. */
  .set-deck {
    grid-template-columns: minmax(0, 1fr);
  }

  .set-deck-hero {
    grid-column: 1;
    grid-row: auto;
    min-height: 0;
  }

  .set-deck-trio,
  .set-deck-wave {
    grid-column: 1;
    grid-row: auto;
  }

  .set-persona {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .set-row2 {
    columns: 2;
  }
}

@media (max-width: 860px) {
  .set-stage {
    grid-template-columns: minmax(0, 1fr);
  }

  .set-row2 {
    columns: 1;
  }

  .set-persona {
    grid-column: auto;
  }

  /* 🔴 M-11/M-14 (QA 24.09): `1fr 1fr` — это `minmax(auto, 1fr)`, колонка не
     уже min-content плитки: на 320 плитки моделей стояли в [194..334], и
     документ был шире окна (336). Колонки от нуля, текст плитки режется
     многоточием, а не раздвигает экран. */
  .set-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Три плитки в ряд на телефоне — это три цифры по сорок пикселей: матрица
     перестаёт читаться числом. Встают столбиком. */
  .set-deck-trio {
    grid-template-columns: minmax(0, 1fr);
  }

  .set-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .set-sheet {
    width: 100vw;
  }

  .set-ex {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
}

/* 🔴 Разворот «Часы по дням» на узком экране (дефект 2 QA 12.09). Строка дня —
   это имя дня, два поля времени и галка «выходной»: в одну линию им нужно
   400 px, а колонка карточки на 390 даёт 290. Экран ехал вбок ВЕСЬ, а подписи
   «Понедельник» и «выходной» срезались многоточием.

   Порог 34rem, а не «390»: 4 колонки перестают помещаться раньше, чем
   кончается телефон, и считать надо по месту, а не по модели устройства.
   Раскладка становится столбиком — имя дня, под ним пара «с — до», под ней
   галка. Ни один орган не пропадает и ничего не прячется за прокруткой. */
@media (max-width: 34rem) {
  .set-card .days .row.day {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.3rem 0.35rem;
  }

  .set-card .days .row.day .day-name,
  .set-card .days .row.day > .inline {
    grid-column: 1 / -1;
  }

  /* Поле времени несёт собственную ширину от браузера — без `min-width: 0`
     колонка `1fr` не ужимается и строка снова уезжает вбок. */
  .set-card .days .row.day input[type="time"] {
    min-width: 0;
    width: 100%;
  }
}

/* 🟡 M-14 (QA 24.09): на 320 в двух колонках значению факта оставалось
   53 px, и «выключен» / «выключена» рвались по буквам. На самых узких
   телефонах факты стоят в один столбец. */
@media (max-width: 22.5rem) {
  .set-facts {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================================
   ДВИЖЕНИЕ
   ----------------------------------------------------------------------------
   Кадровые наборы `gSheen`, `gDot`, `gDraw`, `gRow`, `gShake` и плавание знака
   `ovFloat`/`ovSpin`/`ovBreathe` уже объявлены в `overview.css` — это язык
   системы, а не эффекты одного экрана, и второй копии здесь нет.
   ========================================================================= */

/* Карточка: подъём и блик-sheen под курсором — как у «Обзора» и «Заказов». */
.set-card,
.set-persona {
  transition: translate var(--dur-2) var(--ease);
}

.set-card:hover,
.set-persona:hover {
  translate: 0 -2px;
}

/* Блик под курсором — общий компонент `.g-gloss` (объявлен в `overview.css`):
   узел лежит в разметке карточки, правило `.glass:hover > .g-gloss::after`
   уже написано там же. Второй реализации блика у продукта нет.
   Контекст наложения нужен, потому что слой лежит под содержимым. */
#tab-settings .glass,
#tab-settings .gcard {
  isolation: isolate;
}

/* Знак EVA: преломление обходит шар за 20 с, блик идёт в противофазе 25 с.
   Плавание и поворот дуг приходят из `overview.css` (`.eva-orb`). */
.set-refract {
  animation: ovSpin 20s linear infinite;
}

.set-gloss {
  animation: ovSpin 25s linear infinite reverse;
}

.set-glow {
  animation: ovBreathe 9s var(--ease) infinite alternate;
}

/* Дуга прочерчивается, ручка встаёт последней; ползунки заполняются слева.
   Класс `is-anim` ставит `settings.js` только на приезд экрана и на смену
   данных — при перетаскивании ручки анимации нет, ручка идёт за пальцем. */
#tab-settings.is-anim .dl-fill,
#tab-settings.is-anim .dl-ifill,
#tab-settings.is-anim .dc-fill {
  /* `pathLength="100"` у самой дуги, поэтому и шаг пунктира, и длина
     `--g-dash` для общего кадра `gDraw` — сто, а не пиксели. */
  --g-dash: 100;
  stroke-dasharray: 100;
  animation: gDraw 900ms var(--ease-out) both;
}

#tab-settings.is-anim .dl-ifill {
  animation-duration: 1s;
  animation-delay: 180ms;
}

#tab-settings.is-anim .dc-fill {
  animation-delay: 120ms;
}

#tab-settings.is-anim .dl-knob {
  transform-box: fill-box;
  transform-origin: center;
  animation: gDot 260ms var(--ease-out) both;
  animation-delay: 880ms;
}

#tab-settings.is-anim .set-slider input[type="range"]::-webkit-slider-runnable-track {
  animation: gFade 520ms var(--ease-out) both;
  animation-delay: 180ms;
}

#tab-settings.is-anim .set-slider input[type="range"]::-webkit-slider-thumb {
  animation: gDot 220ms var(--ease-out) both;
  animation-delay: 620ms;
}

/* Уголки-видоискатель проявляются последними: сначала читается набор
   вариантов, потом видно выбранный. */
#tab-settings.is-anim .set-tile.is-on::before,
#tab-settings.is-anim .set-tile.is-on::after,
#tab-settings.is-anim .set-circle.is-on::before,
#tab-settings.is-anim .set-circle.is-on::after,
#tab-settings.is-anim .set-day.is-today::before,
#tab-settings.is-anim .set-day.is-today::after {
  animation: gDot 240ms var(--ease-out) both;
  animation-delay: 520ms;
}

/* ------------------------------------------------- движение сводки экрана
   Те же три кадра, что на «Обзоре дня»: точка зажигается, линия рисуется,
   дуга заполняется. Классы ставит `settings.js` и только при СМЕНЕ
   показания — неподвижная цифра означает «ничего не изменилось», и это
   правда. Цифра из точек и спарклайн — общие правила в `overview.css`
   (`.dotnum.is-lit svg circle`, `.is-drawn .ovspark-*`); здесь только
   волна и дуга со своей длиной штриха. */

#set-wave.is-drawn .wave-line {
  --g-dash: 460;
  stroke-dasharray: 460;
  animation: gDraw 680ms var(--ease-out) backwards;
}

#set-wave.is-drawn .wave-mark,
#set-wave.is-drawn .wave-dot {
  animation: gFade 240ms var(--ease) 620ms backwards;
}

#set-spend-gauge.is-filled .gauge-arc,
#set-spend-gauge.is-filled .gauge-glow {
  /* 276,5 — длина полуокружности r=88: ровно та же дуга, что у «Обзора». */
  --g-dash: 276.5;
  stroke-dasharray: 276.5;
  animation: gDraw 720ms var(--ease-out) backwards;
}

/* Полосы «медиана против p90» выезжают слева: длину задают данные, кадр
   двигает только масштаб — раскладка при этом не пересчитывается. */
#tab-settings .set-p9.is-drawn i {
  transform-origin: left center;
  animation: setBar 420ms var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}

@keyframes setBar {
  from {
    scale: 0 1;
  }
}

/* Строки списков — каскадом; шаг `--i` ставит `cascade()` из app.js. */
.set-kbc.rise,
.set-secret.rise,
.set-tile.rise,
.set-day.rise,
.set-user.rise,
.set-vrow.rise {
  animation: gRow 300ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * var(--stagger, 26ms));
}

/* Шторка версий выезжает справа за 240 мс. */
.set-sheet {
  animation: setSheet 240ms var(--ease-out);
}

@keyframes setSheet {
  from {
    translate: 100% 0;
  }
}

.set-sheet-back {
  animation: gFade 200ms var(--ease-out);
}

/* Одна тряска поля на отказе — и больше ничего. */
.set-actions.is-shake,
.set-card.is-shake {
  animation: gShake 320ms var(--ease);
}

.set-tool:active:not(:disabled),
.set-variant-b:active,
.set-save:active:not(:disabled) {
  scale: 0.98;
}

@media (prefers-reduced-motion: reduce) {
  .set-card,
  .set-persona,
  .set-refract,
  .set-gloss,
  .set-glow,
  .set-sheet,
  .set-sheet-back,
  .set-actions.is-shake,
  .set-card.is-shake,
  .set-kbc.rise,
  .set-secret.rise,
  .set-tile.rise,
  .set-day.rise,
  .set-user.rise,
  .set-vrow.rise,
  #tab-settings.is-anim .dl-fill,
  #tab-settings.is-anim .dl-ifill,
  #tab-settings.is-anim .dc-fill,
  #tab-settings.is-anim .dl-knob,
  #tab-settings.is-anim .set-tile.is-on::before,
  #tab-settings.is-anim .set-tile.is-on::after,
  #tab-settings.is-anim .set-circle.is-on::before,
  #tab-settings.is-anim .set-circle.is-on::after,
  #tab-settings.is-anim .set-day.is-today::before,
  #tab-settings.is-anim .set-day.is-today::after,
  #set-wave.is-drawn .wave-line,
  #set-wave.is-drawn .wave-mark,
  #set-wave.is-drawn .wave-dot,
  #set-spend-gauge.is-filled .gauge-arc,
  #set-spend-gauge.is-filled .gauge-glow {
    animation: none !important;
    transition: none !important;
    translate: none !important;
    scale: none !important;
    stroke-dashoffset: 0 !important;
    opacity: 1;
  }

  /* 🔴 Полосы отдельной строкой, БЕЗ `opacity: 1`: вторая полоса отличается
     от первой прозрачностью, и общий сброс сделал бы их одинаковыми ровно
     там, где различать их и надо. */
  #tab-settings .set-p9.is-drawn i {
    animation: none !important;
    scale: none !important;
  }

  /* Линия обязана остаться НАРИСОВАННОЙ, а не спрятанной штрихом. */
  #set-wave.is-drawn .wave-line {
    stroke-dasharray: none;
  }

  #tab-settings .g-gloss {
    display: none;
  }
}