/* Стили деталей интерфейса — перенос кита «Контур» с React на наши модули.

   В ките оформление лежит инлайном: у React нет стилевого файла, и другого
   способа обойтись без сборщика там не было. У нас файл есть, поэтому здесь
   классы — их читает человек, их кэширует браузер, и в них помещаются
   `:hover`, `:active` и `:focus-within`, которых инлайн не знает. Ровно
   поэтому наведение и нажатие в ките держались на useState: не потому,
   что так лучше, а потому что иначе было нельзя.

   Все значения — токены из webapp/tokens.css. Прямых цветов здесь нет
   ни одного, кроме двух ссылок ниже.

   Файл тянет сам модуль (`useUiStyles()` в webapp/ui/index.js) — тем же
   приёмом, каким карта тянет chart.css. */

:root {
  /* Цвета активаций в интерфейсе. Кит зовёт их --chart-personality
     и --chart-design; у нас те же два цвета уже объявлены картой
     (webapp/chart/chart.css), и второй копии значений быть не должно —
     сюда они приходят ссылкой. Запасные значения на случай, когда деталь
     показывают на странице без карты, — из bodygraph.css кита. */
  --ui-personality: var(--hd-ink, #26262A);
  --ui-design: var(--hd-red, #EF2116);

  /* Оттенки и краски, которые приносит цветной слой (webapp/palette.css).
     Здесь — их значения БЕЗ слоя, из токенов «Контура»: снятая ссылка на слой
     обязана вернуть прежний монохром, а не оставить плитки и бейджи без
     заливки. Все семь оттенков без слоя одинаковы — графит на светло-сером. */
  --tint-blue: var(--ink-2);    --tint-blue-soft: var(--paper-2);    --tint-blue-ink: var(--ink-0);
  --tint-magenta: var(--ink-2); --tint-magenta-soft: var(--paper-2); --tint-magenta-ink: var(--ink-0);
  --tint-green: var(--ink-2);   --tint-green-soft: var(--paper-2);   --tint-green-ink: var(--ink-0);
  --tint-orange: var(--ink-2);  --tint-orange-soft: var(--paper-2);  --tint-orange-ink: var(--ink-0);
  --tint-sky: var(--ink-2);     --tint-sky-soft: var(--paper-2);     --tint-sky-ink: var(--ink-0);
  --tint-violet: var(--ink-2);  --tint-violet-soft: var(--paper-2);  --tint-violet-ink: var(--ink-0);
  --tint-teal: var(--ink-2);    --tint-teal-soft: var(--paper-2);    --tint-teal-ink: var(--ink-0);
  /* Плашка первого экрана без слоя — инверсная карточка «Контура». */
  --gradient-hero: var(--surface-inverse);
  --gradient-hero-ink: var(--text-inverse);
  --header-top: var(--surface-card);
  /* Главная и вторичная кнопки и выбранный сегмент «Контура»; слой красит их
     в синий (главную тёмной темы — главным синим с белым текстом). */
  --ui-button-primary-bg: var(--accent-700);
  --ui-button-primary-ink: var(--on-accent);
  --ui-button-primary-hover: var(--accent-900);
  --ui-button-secondary-bg: var(--surface-card);
  --ui-button-secondary-ink: var(--text-primary);
  --ui-button-secondary-line: var(--border-strong);
  --ui-button-secondary-hover: var(--paper-2);
  --ui-segmented-on-ink: var(--text-primary);
}

/* Класс оттенка: один на все детали, которые умеют краситься (плитка иконки
   у строки списка, бейдж, маркер экрана). Деталь берёт `--ui-tint` (основной —
   фигуры: маркер, полоса), `--ui-tint-soft` и `--ui-tint-ink`,
   а какой это оттенок — решает класс. Имена — `TINTS` в ui/core.js. */
.ui-tint-blue    { --ui-tint: var(--tint-blue); --ui-tint-soft: var(--tint-blue-soft);    --ui-tint-ink: var(--tint-blue-ink); }
.ui-tint-magenta { --ui-tint: var(--tint-magenta); --ui-tint-soft: var(--tint-magenta-soft); --ui-tint-ink: var(--tint-magenta-ink); }
.ui-tint-green   { --ui-tint: var(--tint-green); --ui-tint-soft: var(--tint-green-soft);   --ui-tint-ink: var(--tint-green-ink); }
.ui-tint-orange  { --ui-tint: var(--tint-orange); --ui-tint-soft: var(--tint-orange-soft);  --ui-tint-ink: var(--tint-orange-ink); }
.ui-tint-sky     { --ui-tint: var(--tint-sky); --ui-tint-soft: var(--tint-sky-soft);     --ui-tint-ink: var(--tint-sky-ink); }
.ui-tint-violet  { --ui-tint: var(--tint-violet); --ui-tint-soft: var(--tint-violet-soft);  --ui-tint-ink: var(--tint-violet-ink); }
.ui-tint-teal    { --ui-tint: var(--tint-teal); --ui-tint-soft: var(--tint-teal-soft);    --ui-tint-ink: var(--tint-teal-ink); }

/* ═════════ core ═════════ */

/* ───── Accordion ─────
   Раскрывающаяся тема. Содержимого закрытой темы в дереве нет вовсе — прятать
   его здесь нечем и не нужно; стилю остаётся заголовок и поворот стрелки. */

.ui-accordion {
  border-bottom: 1px solid var(--border-subtle);
}
/* Заголовок-обёртка вокруг кнопки: уровень нужен дереву доступности,
   а весь вид приходит от самой кнопки. */
.ui-accordion__heading { margin: 0; font: inherit; color: inherit; }
.ui-accordion__head {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  width: 100%;
  min-height: var(--hit-min);
  padding: var(--space-4) 0;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--text-primary);
  transition: var(--motion-color);
}
.ui-accordion__head:hover { color: var(--text-body); }
.ui-accordion__head:active { transform: scale(var(--press-scale-tile)); }
.ui-accordion__icon { display: flex; flex: none; color: var(--text-secondary); }
.ui-accordion__title {
  flex: 1; min-width: 0;
  font: var(--type-body-strong);
  text-wrap: pretty;
}
.ui-accordion__chevron {
  display: flex; flex: none;
  color: var(--text-tertiary);
  transition: transform var(--dur-fast) var(--ease-standard);
}
.ui-accordion--open .ui-accordion__chevron { transform: rotate(180deg); }
.ui-accordion__body { padding: var(--space-3) 0 var(--space-7); }
/* Последнему блоку внутри темы нижний отступ не нужен: его уже даёт сама
   тема. Правило живёт здесь, у детали, — снаружи оно красило бы её разметку. */
.ui-accordion__body > :last-child { margin-bottom: 0; }

/* ───── Badge ───── */

.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 24px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: var(--type-micro);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-wide);
  white-space: nowrap;
  background: var(--signal-neutral-bg);
  color: var(--signal-neutral);
}
.ui-badge--sm { height: 20px; padding: 0 7px; font-size: var(--text-3xs); }

.ui-badge--neutral { background: var(--signal-neutral-bg); color: var(--signal-neutral); }
.ui-badge--brand { background: var(--accent-050); color: var(--accent-700); }
.ui-badge--positive { background: var(--signal-positive-bg); color: var(--signal-positive); }
.ui-badge--caution { background: var(--signal-caution-bg); color: var(--signal-caution); }
.ui-badge--critical { background: var(--signal-critical-bg); color: var(--signal-critical); }
.ui-badge--personality { background: var(--paper-3); color: var(--ink-0); }
.ui-badge--design { background: var(--signal-critical-bg); color: var(--ui-design); }

.ui-badge--solid.ui-badge--neutral { background: var(--ink-1); color: var(--on-accent); }
.ui-badge--solid.ui-badge--brand { background: var(--accent-700); color: var(--on-accent); }
.ui-badge--solid.ui-badge--positive { background: var(--signal-positive); color: var(--on-accent); }
.ui-badge--solid.ui-badge--caution { background: var(--signal-caution); color: var(--on-accent); }
.ui-badge--solid.ui-badge--critical { background: var(--signal-critical); color: var(--on-accent); }
.ui-badge--solid.ui-badge--personality { background: var(--ui-personality); color: var(--on-accent); }
.ui-badge--solid.ui-badge--design { background: var(--ui-design); color: var(--on-accent); }

.ui-badge--outline { background: transparent; border-color: currentColor; }

/* Цветная пилюля (`Badge({tint})`): заливка оттенка и его чернила; сплошная —
   те же два цвета наоборот, и контраст у неё тот же по построению. */
.ui-badge--tinted { background: var(--ui-tint-soft); color: var(--ui-tint-ink); }
.ui-badge--tinted.ui-badge--solid { background: var(--ui-tint-ink); color: var(--surface-card); }
.ui-badge--tinted.ui-badge--outline { background: transparent; }

/* ───── Button ───── */

.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  height: 44px;
  padding: 0 18px;
  font: var(--type-body-strong);
  font-size: var(--text-base);
  letter-spacing: var(--track-tight);
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: var(--motion-color), transform var(--dur-instant) var(--ease-standard);
}
.ui-button--sm { height: 32px; padding: 0 12px; font-size: var(--text-sm); }
.ui-button--lg { height: 50px; padding: 0 24px; font-size: var(--text-md); }
.ui-button--block { width: 100%; }

.ui-button--primary {
  background: var(--ui-button-primary-bg);
  color: var(--ui-button-primary-ink);
  border-color: var(--ui-button-primary-bg);
}
.ui-button--primary:hover { background: var(--ui-button-primary-hover); border-color: var(--ui-button-primary-hover); }

.ui-button--secondary {
  background: var(--ui-button-secondary-bg);
  color: var(--ui-button-secondary-ink);
  border-color: var(--ui-button-secondary-line);
}
.ui-button--secondary:hover { background: var(--ui-button-secondary-hover); }

.ui-button--ghost { background: transparent; color: var(--text-brand); }
.ui-button--ghost:hover { background: var(--accent-050); }

.ui-button--quiet { background: var(--paper-2); color: var(--text-body); }
.ui-button--quiet:hover { background: var(--paper-3); }

.ui-button--critical { background: var(--signal-critical); color: var(--on-accent); border-color: var(--signal-critical); }
.ui-button--critical:hover { filter: brightness(.9); }

.ui-button--platform { background: var(--platform-main-button-bg); color: var(--platform-main-button-text); }
.ui-button--platform:hover { filter: brightness(.94); }

.ui-button:active:not([disabled]) { transform: scale(var(--press-scale)); }
.ui-button[disabled] { cursor: not-allowed; opacity: .42; filter: none; }
.ui-button[disabled]:hover { filter: none; }

.ui-button__spinner {
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: ui-spin .7s linear infinite;
}

/* ───── Card ───── */

.ui-card {
  border-radius: var(--radius-card);
  padding: var(--space-6);
  transition: var(--motion-color), transform var(--dur-instant) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.ui-card--pad-none { padding: 0; }
.ui-card--pad-sm { padding: var(--space-5); }
.ui-card--pad-md { padding: var(--space-6); }
.ui-card--pad-lg { padding: var(--space-8); }

.ui-card--raised { background: var(--surface-card); box-shadow: var(--shadow-card); }
.ui-card--flat { background: var(--surface-card); border: 1px solid var(--border-default); }
.ui-card--sunken { background: var(--surface-sunken); }
.ui-card--brand { background: var(--surface-brand-soft); border: 1px solid var(--accent-100); }
/* Инверсная карточка меняет бумагу под текстом на чернильную — и обязана
   поменять сами чернила: типографика приложения подобрана под светлую бумагу
   и прибита к `--text-*`, а не к `currentColor`. Без перекрытия `--text-primary`
   и `--surface-inverse` оказываются одним и тем же `--ink-0`, то есть контраст
   1:1: описание пары на «Композите» и строка «сейчас» на «Циклах» физически
   есть, и их не видно. Перекрытие стоит на КЛАССЕ, а не на месте, — иначе
   через месяц та же поломка вылезает третьим экземпляром.

   Чернилами служит бумажная шкала: в обеих темах она лежит с той стороны
   от инверсной бумаги, что и нужно. `--paper-1` пропущена намеренно —
   в тёмной теме это фон приложения, он темнее `--paper-0`, и на нём порядок
   «основное ярче второстепенного» перевернулся бы. */
.ui-card--inverse {
  background: var(--surface-inverse);
  color: var(--text-inverse);
  --text-primary: var(--paper-0);
  --text-body: var(--paper-2);
  --text-secondary: var(--paper-3);
  --text-tertiary: var(--paper-4);
  /* Эти трое приходят внутрь не из типографики экрана, а сами: `--text-link`
     и `--text-link-hover` — глобальным правилом `a{}` в tokens.css,
     `--text-brand` — призрачной кнопкой, у которой фона нет вовсе. Все три
     на светлой бумаге суть `--accent-700`, то есть почти те же чернила, что и
     бумага инверсная: 1.00:1 в светлой теме и 1.09:1 в тёмной. Ссылку от
     обычного текста по-прежнему отличает подчёркивание — оно строится из
     самого `--text-link`, а не из отдельного цвета; ховер темнеет на ступень,
     ярче белого на этой бумаге не бывает. */
  --text-link: var(--paper-0);
  --text-link-hover: var(--paper-2);
  --text-brand: var(--paper-0);
}

.ui-card--interactive { cursor: pointer; }
.ui-card--interactive:hover { box-shadow: var(--shadow-popover); }
.ui-card--interactive:active { transform: scale(var(--press-scale-tile)); }

/* ───── Divider ───── */

.ui-divider { margin: var(--space-7) 0; }
.ui-divider--sm { margin: var(--space-5) 0; }
.ui-divider--md { margin: var(--space-7) 0; }
.ui-divider--lg { margin: var(--space-9) 0; }

hr.ui-divider { border: 0; height: 1px; background: var(--border-default); }

.ui-divider--labeled { display: flex; align-items: center; gap: var(--space-5); }
.ui-divider__rule { flex: 1; height: 1px; background: var(--border-default); }
.ui-divider__label {
  font: var(--type-eyebrow);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ───── Icon ───── */

.ui-icon { display: inline-block; flex: none; vertical-align: middle; }

/* ───── IconButton ───── */

.ui-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--motion-color), transform var(--dur-instant) var(--ease-standard);
}
.ui-icon-button--sm { width: 32px; height: 32px; }
.ui-icon-button--lg { width: 44px; height: 44px; }

.ui-icon-button--quiet:hover { background: var(--paper-2); color: var(--text-primary); }
.ui-icon-button--filled { background: var(--paper-2); color: var(--text-primary); }
.ui-icon-button--filled:hover { background: var(--paper-3); }
.ui-icon-button--outline { background: var(--surface-card); color: var(--text-primary); border-color: var(--border-default); }
.ui-icon-button--outline:hover { background: var(--paper-2); }
.ui-icon-button--brand { background: var(--accent-700); color: var(--on-accent); }
.ui-icon-button--brand:hover { background: var(--accent-900); }

.ui-icon-button:active:not([disabled]) { transform: scale(var(--press-scale)); }
.ui-icon-button[disabled] { cursor: not-allowed; opacity: .42; }

/* ───── ListRow ───── */

.ui-list-row {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: var(--hit-comfortable);
  padding: 10px var(--gutter-card);
  background: transparent;
  transition: var(--motion-color), transform var(--dur-instant) var(--ease-standard);
}
.ui-list-row--divider { box-shadow: inset 0 -1px 0 var(--border-subtle); }
.ui-list-row--clickable { cursor: pointer; }
.ui-list-row--clickable:hover { background: var(--paper-2); }
/* Внутри инверсной карточки подсветка снята: `--paper-2` — бумага под тёмный
   текст, а типографика там светлая, и на ховере строка гасла бы целиком.
   Отклик у неё остаётся нажатием (`--press-scale-tile`), а на телефоне,
   где мини-апп и живёт, ховера нет вовсе. */
.ui-card--inverse .ui-list-row--clickable:hover { background: transparent; }
.ui-list-row--clickable:active { transform: scale(var(--press-scale-tile)); }
.ui-list-row--selected,
.ui-list-row--selected.ui-list-row--clickable:hover { background: var(--accent-050); }

.ui-list-row__leading { display: flex; flex: none; color: var(--text-secondary); }
/* Плитка иконки — одна на кит: строка списка (`ListRow({tint})`) и тема
   (`Accordion({tint})`). Скруглённый квадрат в заливке оттенка, иконка — его
   чернилами; плитка меньше строки, цель нажатия — вся строка. Стоит ПОСЛЕ
   обоих общих правил (`.ui-accordion__icon`, `.ui-list-row__leading`): при
   равном весе их серые чернила иначе перебили бы оттенок — плитка цветная,
   иконка серая (обход снимками 02.10). */
.ui-list-row__leading--tile,
.ui-accordion__icon--tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--ui-tint-soft);
  color: var(--ui-tint-ink);
}
/* Нейтральная плитка (`Accordion({tile: true})` без оттенка): то же место и
   та же форма, что у цветной, — заголовки темы и её цветных соседей встают
   на одну вертикаль. Заливка — бумага карточки, иконка — вторым текстом:
   ни один оттенок слоя, потому что их там, где она нужна, уже разобрали
   («Подробнее» на «Композите»: люди и виды связи). Стоит ПОСЛЕ правила
   плитки — при равном весе иначе взяла бы `--ui-tint-*`, которых у неё нет. */
.ui-accordion__icon--neutral {
  background: var(--surface-card);
  color: var(--text-secondary);
}
.ui-list-row__text { flex: 1; min-width: 0; }
.ui-list-row__title {
  display: block;
  font: var(--type-body);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-list-row__subtitle {
  display: block;
  margin-top: 1px;
  font: var(--type-caption);
  color: var(--text-tertiary);
}
.ui-list-row__value { flex: none; font: var(--type-caption); color: var(--text-secondary); }
/* Строка с длинной подписью: содержимое равняется по верху, а значение
   опускается на базовую линию заголовка — иначе оно висит на середине
   абзаца и читается как подпись не к той строке. */
.ui-list-row--align-top { align-items: flex-start; }
.ui-list-row--align-top .ui-list-row__value,
.ui-list-row--align-top .ui-list-row__trailing { margin-top: 2px; }
/* В правом краю строки может стоять не один узел: бейдж рядом со стрелкой
   перехода. Без выравнивания и промежутка они слипаются и садятся по-разному. */
.ui-list-row__trailing {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  color: var(--text-tertiary);
}

/* ───── SectionLabel ───── */

.ui-section-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  padding: 0 0 var(--space-4);
}
/* Подпись прижата к тому, что под ней, — это её работа. А вот воздух СВЕРХУ
   нужен ей самой: без него «ЦЕНТРЫ» читаются как подпись к предыдущему блоку,
   а не как начало нового. Правило висит на соседстве, а не на месте в дереве:
   прежнее `.screen > * + .ui-section-label` доставало только прямых детей
   экрана, и три подписи из восемнадцати (крест, центры, каналы на «Карте»)
   оставались без отступа вовсе — они лежат внутри сводки. */
* + .ui-section-label { margin-top: var(--space-9); }
.ui-section-label__text {
  font: var(--type-eyebrow);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ───── SegmentedControl ───── */

.ui-segmented {
  display: inline-grid;
  grid-template-columns: repeat(var(--ui-segments, 2), 1fr);
  gap: 2px;
  padding: 2px;
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
}
.ui-segmented--block { display: grid; }

.ui-segmented__tab {
  height: 38px;
  border: none;
  border-radius: calc(var(--radius-sm) - 2px);
  background: transparent;
  color: var(--text-secondary);
  font: var(--type-caption);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: var(--motion-color), box-shadow var(--dur-fast) var(--ease-standard);
}
.ui-segmented--sm .ui-segmented__tab { height: 32px; }
.ui-segmented__tab:hover { color: var(--text-primary); }
.ui-segmented__tab--on {
  background: var(--surface-card);
  box-shadow: var(--shadow-raised);
  color: var(--ui-segmented-on-ink);
  font-weight: var(--weight-semibold);
}

/* ───── Sheet ───── */

.ui-sheet {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
}
.ui-sheet[hidden] { display: none; }

.ui-sheet__scrim {
  position: absolute;
  inset: 0;
  background: var(--veil-scrim);
  animation: ui-fade var(--dur-base) var(--ease-standard);
}
.ui-sheet__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 88%;
  background: var(--surface-card);
  border-radius: var(--radius-sheet);
  box-shadow: var(--shadow-sheet);
  animation: ui-rise var(--dur-slow) var(--ease-soft);
}
.ui-sheet__grip {
  width: 36px;
  height: 4px;
  margin: var(--space-4) auto 0;
  border-radius: 2px;
  background: var(--paper-4);
}
.ui-sheet__head { padding: var(--space-5) var(--gutter-screen); }
.ui-sheet__title { font: var(--type-title); color: var(--text-primary); }
.ui-sheet__subtitle { margin-top: 2px; font: var(--type-caption); color: var(--text-tertiary); }
.ui-sheet__body { flex: 1; overflow-y: auto; padding: 0 var(--gutter-screen) var(--space-6); }
.ui-sheet__foot {
  padding: var(--space-5) var(--gutter-screen) var(--space-7);
  border-top: 1px solid var(--border-subtle);
}

/* ───── Skeleton ───── */

.ui-skeleton {
  display: block;
  background: var(--surface-inset);
  animation: ui-pulse 1.4s var(--ease-standard) infinite;
}

/* ───── Slider ───── */

.ui-slider { display: flex; flex-direction: column; gap: var(--space-2); }
.ui-slider__value {
  font: var(--type-caption);
  color: var(--text-secondary);
}
/* Высота мишени — вся полоса, а не дорожка: попасть пальцем в 6 пикселей
   нельзя, и на этом ползунок перестаёт работать на телефоне вовсе. */
.ui-slider__input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: var(--hit-min);
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.ui-slider__input::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
}
.ui-slider__input::-moz-range-track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
}
.ui-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -11px;
  border: 2px solid var(--surface-card);
  border-radius: var(--radius-pill);
  background: var(--surface-brand);
}
.ui-slider__input::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border: 2px solid var(--surface-card);
  border-radius: var(--radius-pill);
  background: var(--surface-brand);
}

/* ───── Tag ───── */

.ui-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--paper-2);
  color: var(--text-body);
  font: var(--type-caption);
  font-weight: var(--weight-medium);
  transition: var(--motion-color);
}
.ui-tag--clickable { cursor: pointer; }
.ui-tag--clickable:hover { background: var(--paper-3); }
.ui-tag--clickable:active { transform: scale(var(--press-scale)); }
.ui-tag--selected {
  background: var(--accent-700);
  border-color: var(--accent-700);
  color: var(--on-accent);
}
.ui-tag--selected.ui-tag--clickable:hover { background: var(--accent-900); border-color: var(--accent-900); }

.ui-tag__remove {
  margin-right: -2px;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 14px;
  line-height: 1;
  opacity: .55;
  cursor: pointer;
}
.ui-tag__remove:hover { opacity: 1; }

/* ═════════ forms ═════════ */

/* ───── Checkbox ───── */

.ui-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  min-height: var(--hit-min);
  cursor: pointer;
}
.ui-checkbox--disabled { cursor: not-allowed; opacity: .45; }

/* Настоящий input остаётся в разметке и держит состояние: тогда `:checked`
   рисует галочку без единой строки JS, а клавиатура и скринридер получают
   обычный чекбокс, а не его рисунок. */
.ui-checkbox__input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}
.ui-checkbox__box {
  position: relative;
  width: 22px;
  height: 22px;
  flex: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--surface-card);
  transition: var(--motion-color);
}
.ui-checkbox__box::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 6px;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--on-accent);
  border-bottom: 2px solid var(--on-accent);
  transform: rotate(-45deg);
  opacity: 0;
}
.ui-checkbox__input:checked + .ui-checkbox__box {
  background: var(--accent-700);
  border-color: var(--accent-700);
}
.ui-checkbox__input:checked + .ui-checkbox__box::after { opacity: 1; }
.ui-checkbox__input:focus-visible + .ui-checkbox__box { box-shadow: var(--shadow-focus); }
.ui-checkbox__label { font: var(--type-body); color: var(--text-body); }

/* ───── DateTimeField ───── */

.ui-datetime { display: flex; align-items: center; gap: var(--space-4); }

.ui-datetime__frame {
  display: flex;
  align-items: center;
  height: var(--hit-min);
  padding: 0 var(--space-5);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  transition: var(--motion-color), box-shadow var(--dur-fast) var(--ease-standard);
}
/* Рамка фокуса — на обёртке, потому что полей внутри несколько,
   а поле ввода даты человек видит одно. */
.ui-datetime__frame:focus-within {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
}
.ui-datetime--invalid .ui-datetime__frame { border-color: var(--signal-critical); }
.ui-datetime--unknown .ui-datetime__frame { opacity: .45; }

.ui-datetime__seg {
  width: 34px;
  border: none;
  outline: none;
  background: transparent;
  text-align: center;
  font: var(--type-numeric);
  font-size: var(--text-md);
  letter-spacing: .02em;
  color: var(--text-primary);
}
.ui-datetime__seg[data-seg="y"] { width: 48px; }

.ui-datetime__sep {
  padding: 0 2px;
  font: var(--type-numeric);
  font-size: var(--text-md);
  color: var(--text-tertiary);
}

.ui-datetime__unknown {
  height: var(--hit-min);
  padding: 0 var(--space-5);
  white-space: nowrap;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-secondary);
  font: var(--type-caption);
  cursor: pointer;
  transition: var(--motion-color);
}
.ui-datetime__unknown:hover { background: var(--paper-2); }
.ui-datetime__unknown--on {
  background: var(--accent-700);
  border-color: var(--accent-700);
  color: var(--on-accent);
}

/* ───── Field ───── */

.ui-field { display: block; }
.ui-field__label {
  display: block;
  margin-bottom: var(--space-3);
  font: var(--type-eyebrow);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.ui-field__required { color: var(--signal-critical); }
.ui-field__note {
  display: block;
  margin-top: var(--space-3);
  font: var(--type-caption);
  color: var(--text-tertiary);
}
.ui-field__note--error { color: var(--signal-critical); }

/* ───── Input ───── */

.ui-input {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--hit-min);
  padding: 0 var(--space-5);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  transition: var(--motion-color), box-shadow var(--dur-fast) var(--ease-standard);
}
.ui-input:focus-within { border-color: var(--border-focus); box-shadow: var(--shadow-focus); }
.ui-input--invalid { border-color: var(--signal-critical); }
.ui-input--disabled { background: var(--surface-sunken); opacity: .6; }

.ui-input__control {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: var(--type-body);
  font-size: var(--text-base);
  color: var(--text-primary);
  text-align: left;
}
.ui-input__control--center { text-align: center; }
.ui-input__control--right { text-align: right; }
.ui-input__control--mono { font: var(--type-numeric); font-size: var(--text-base); }

.ui-input__prefix { display: flex; color: var(--text-tertiary); }
.ui-input__suffix { display: flex; font: var(--type-caption); color: var(--text-tertiary); }

/* ───── Select ───── */

.ui-select {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--hit-min);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  transition: var(--motion-color), box-shadow var(--dur-fast) var(--ease-standard);
}
.ui-select:focus-within { border-color: var(--border-focus); box-shadow: var(--shadow-focus); }
.ui-select--invalid { border-color: var(--signal-critical); }
.ui-select--disabled { background: var(--surface-sunken); }

.ui-select__control {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 100%;
  padding: 0 36px 0 var(--space-5);
  border: none;
  outline: none;
  background: transparent;
  font: var(--type-body);
  color: var(--text-primary);
  cursor: pointer;
}
.ui-select--placeholder .ui-select__control { color: var(--text-tertiary); }
.ui-select--disabled .ui-select__control { cursor: not-allowed; }

.ui-select__chevron {
  position: absolute;
  right: 14px;
  width: 9px;
  height: 9px;
  pointer-events: none;
  border-right: 1.5px solid var(--text-tertiary);
  border-bottom: 1.5px solid var(--text-tertiary);
  transform: rotate(45deg) translateY(-2px);
}

/* ───── Switch ───── */

.ui-switch {
  width: 46px;
  height: 28px;
  flex: none;
  padding: 2px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--paper-4);
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-standard);
}
.ui-switch--on { background: var(--accent-700); }
.ui-switch[disabled] { cursor: not-allowed; opacity: .45; }

.ui-switch__knob {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--on-accent);
  box-shadow: var(--shadow-raised);
  transition: transform var(--dur-base) var(--ease-soft);
}
.ui-switch--on .ui-switch__knob { transform: translateX(18px); }

/* ═════════ data ═════════ */

/* ───── PropertyRow ───── */

.ui-property-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  /* Боковое поле такое же, как у строки списка (`--gutter-card`): строки
     свойств кладутся в ту же карточку `padding="none"`, и без поля длинное
     значение упиралось в рамку, а соседний список отступал на 16px. */
  padding: var(--space-5) var(--gutter-card);
  box-shadow: inset 0 -1px 0 var(--border-subtle);
  background: transparent;
  transition: var(--motion-color);
}
.ui-property-row--clickable { cursor: pointer; }
.ui-property-row--clickable:hover { background: var(--paper-2); }

.ui-property-row__label {
  flex: none;
  padding-top: 2px;
  font: var(--type-caption);
  color: var(--text-tertiary);
}
.ui-property-row__side { min-width: 0; text-align: right; }
.ui-property-row__value {
  display: block;
  font: var(--type-body-strong);
  font-size: var(--text-base);
  line-height: 1.4;
  color: var(--text-primary);
}
.ui-property-row--accent .ui-property-row__value {
  font: var(--type-display);
  font-size: var(--display-xs);
  line-height: 1.05;
}
.ui-property-row__hint {
  display: block;
  margin-top: 2px;
  font: var(--type-caption);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* ───── StatTile ───── */

.ui-stat-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-5);
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
}
.ui-stat-tile__value {
  font: var(--type-display);
  font-size: var(--display-xs);
  line-height: 1;
  color: var(--text-primary);
}
.ui-stat-tile--brand .ui-stat-tile__value { color: var(--accent-700); }
.ui-stat-tile--personality .ui-stat-tile__value { color: var(--ui-personality); }
.ui-stat-tile--design .ui-stat-tile__value { color: var(--ui-design); }
.ui-stat-tile__label {
  font: var(--type-micro);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ═════════ navigation ═════════ */

/* ───── TabBar ───── */

.ui-tabbar {
  display: grid;
  grid-template-columns: repeat(var(--ui-tabs, 3), 1fr);
  height: var(--tabbar-height);
  flex: none;
  padding-bottom: var(--safe-bottom);
  background: var(--veil-glass);
  backdrop-filter: blur(var(--veil-glass-blur));
  -webkit-backdrop-filter: blur(var(--veil-glass-blur));
  border-top: 1px solid var(--border-default);
}
.ui-tabbar__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard);
}
.ui-tabbar__tab:hover { color: var(--text-secondary); }
.ui-tabbar__tab--on,
.ui-tabbar__tab--on:hover { color: var(--accent-700); }
.ui-tabbar__label {
  font: var(--type-micro);
  font-size: var(--text-3xs);
  font-weight: var(--weight-medium);
}
.ui-tabbar__tab--on .ui-tabbar__label { font-weight: var(--weight-semibold); }

/* ───── TopBar ───── */

.ui-topbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: none;
  height: var(--topbar-height);
  padding: 0 var(--space-4) 0 var(--space-3);
  background: var(--veil-glass);
  backdrop-filter: blur(var(--veil-glass-blur));
  -webkit-backdrop-filter: blur(var(--veil-glass-blur));
  border-bottom: 1px solid var(--border-subtle);
}
.ui-topbar--compact { height: 44px; }
.ui-topbar--transparent {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

.ui-topbar__back {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--motion-color);
}
.ui-topbar__back:hover { background: var(--paper-2); }

.ui-topbar__text { flex: 1; min-width: 0; }
.ui-topbar--flush .ui-topbar__text { padding-left: var(--space-4); }
.ui-topbar__title {
  display: block;
  font: var(--type-heading);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-topbar--compact .ui-topbar__title { font: var(--type-body-strong); }
.ui-topbar__subtitle {
  display: block;
  font: var(--type-caption);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.ui-topbar__actions { display: flex; gap: var(--space-2); flex: none; }

/* ═════════ chart ═════════ */

/* ───── ActivationColumn ───── */

.ui-activation-column { display: flex; flex-direction: column; gap: 1px; min-width: 76px; }
.ui-activation-column--card {
  gap: 0;
  min-width: 0;
  padding: var(--space-5) var(--space-4) var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
}

.ui-activation-column__head {
  padding-bottom: var(--space-4);
  font: var(--type-micro);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  text-align: right;
  color: var(--ui-personality);
}
.ui-activation-column--design .ui-activation-column__head { text-align: left; color: var(--ui-design); }
.ui-activation-column--card .ui-activation-column__head { text-align: center; }

.ui-activation-column__row {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  height: 24px;
  padding: 0 4px;
  border: none;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  transition: var(--motion-color);
}
.ui-activation-column--design .ui-activation-column__row { flex-direction: row; }
.ui-activation-column--card .ui-activation-column__row { height: 26px; padding: 0 var(--space-3); }
.ui-activation-column__row:hover:not([disabled]) { background: var(--paper-2); }
.ui-activation-column__row[disabled] { cursor: default; }

.ui-activation-column__glyph {
  width: 16px;
  flex: none;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  color: var(--text-tertiary);
}
.ui-activation-column__value {
  flex: 1;
  font: var(--type-numeric);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ui-personality);
}
.ui-activation-column--design .ui-activation-column__value { text-align: left; color: var(--ui-design); }

/* ───── ActivationTable ───── */

.ui-activation-table {
  display: flex;
  flex-direction: column;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.ui-activation-table__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
}
.ui-activation-table__caption {
  flex: 1;
  font: var(--type-micro);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.ui-activation-table__caption--design { text-align: right; color: var(--ui-design); }
.ui-activation-table__caption--personality { color: var(--ui-personality); }
.ui-activation-table--only-design .ui-activation-table__caption,
.ui-activation-table--only-personality .ui-activation-table__caption { flex: none; }

.ui-activation-table__slot { width: 16px; text-align: center; }
.ui-activation-table--only-design .ui-activation-table__slot,
.ui-activation-table--only-personality .ui-activation-table__slot { width: 0; }

.ui-activation-table__expand {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: var(--motion-color);
}
.ui-activation-table__expand:hover { color: var(--text-primary); background: var(--paper-2); }

.ui-activation-table__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  height: var(--ui-row-height, 14px);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: var(--motion-color);
}
.ui-activation-table__row:hover:not([disabled]) { background: var(--paper-2); }
.ui-activation-table__row[disabled] { cursor: default; }

.ui-activation-table__glyph {
  width: 16px;
  flex: none;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  color: var(--text-tertiary);
}
/* Значение-кнопка. Высота строки задана `--ui-row-height`, поэтому кнопка
   тянется на всю строку: без этого нажимаемой была бы полоска в кегль. */
.ui-activation-table__cell--clickable {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  align-self: stretch;
  font: inherit;
  color: inherit;
}
.ui-activation-table__cell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  flex: none;
  min-width: 0;
}
.ui-activation-table__cell--grow { flex: 1; }
.ui-activation-table__cell--design { flex-direction: row; color: var(--ui-design); }
.ui-activation-table__cell--personality { flex-direction: row-reverse; color: var(--ui-personality); }
.ui-activation-table__num {
  font: var(--type-numeric);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Развёрнутый вид набран КРУПНЕЕ свёрнутого, а не мельче. Было наоборот:
   человек разворачивал значения, чтобы разглядеть их, и получал 11 px против
   12 px в углу сцены. Места здесь на это хватает — слой шире столбика вдвое. */
.ui-activation-table--full .ui-activation-table__num { font-size: var(--text-sm); }
/* В развёрнутом виде строка — это мишень под палец: каждая активация
   открывает разбор своей линии. Поэтому высота идёт не от кегля и не от
   `--ui-row-height` (та величина про плотность столбика в углу сцены),
   а от общего правила пальца. */
.ui-activation-table--full .ui-activation-table__row {
  height: auto;
  min-height: var(--hit-min);
}
/* Место под пометку закрепления. Занято ВСЕГДА, и потому не растёт вместе
   с содержимым (`flex: none`): пометка, стоявшая в потоке, делала ячейку
   с закреплением шире ячейки без него, и числа столбика переставали
   выстраиваться по общему краю.

   Сторона — 8 px, и это меньше числа рядом (12 px свёрнутый вид, 13 px
   развёрнутый): пометка читается как надстрочный знак ПРИ числе, а не как
   второй знак рядом с ним. Ниже 6 px треугольник перестаёт показывать, куда
   смотрит остриё, — там граница, а не здесь; 7×7 когда-то читались соринкой
   при числах в 11–13 px, поэтому сторона взята выше этой отметки. Кегли чисел
   стоят строками выше: держать эти величины в разных местах значит однажды
   развести их молча. */
.ui-activation-table__fix-slot {
  flex: none;
  display: block;
  width: 8px;
  height: 8px;
}
/* Пометка занимает своё место целиком — второй копии размера нет. */
.ui-activation-table__fix {
  display: block;
  width: 100%;
  height: 100%;
}

/* ───── CenterLegend ───── */

.ui-center-legend {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-4);
}
.ui-center-legend__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 8px 10px;
  text-align: left;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--motion-color);
}
.ui-center-legend__item:hover:not([disabled]) { background: var(--paper-2); }
.ui-center-legend__item[disabled] { cursor: default; }

/* Квадрат берёт цвет своего центра из карты: значения объявлены один раз
   в webapp/chart/chart.css, здесь только ссылка на них. Открытый центр
   белый — так же, как пустой центр на самом графе. */
.ui-center-legend__swatch {
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 3px;
  border: 1.5px solid var(--paper-0);
  background: var(--paper-0);
}
.ui-center-legend__item--defined .ui-center-legend__swatch[data-center="head"] { background: linear-gradient(180deg, var(--hd-center-head-1), var(--hd-center-head-2)); }
.ui-center-legend__item--defined .ui-center-legend__swatch[data-center="ajna"] { background: linear-gradient(180deg, var(--hd-center-ajna-1), var(--hd-center-ajna-2)); }
.ui-center-legend__item--defined .ui-center-legend__swatch[data-center="throat"] { background: linear-gradient(180deg, var(--hd-center-throat-1), var(--hd-center-throat-2)); }
.ui-center-legend__item--defined .ui-center-legend__swatch[data-center="g"] { background: linear-gradient(180deg, var(--hd-center-g-1), var(--hd-center-g-2)); }
.ui-center-legend__item--defined .ui-center-legend__swatch[data-center="heart"] { background: linear-gradient(180deg, var(--hd-center-heart-1), var(--hd-center-heart-2)); }
.ui-center-legend__item--defined .ui-center-legend__swatch[data-center="sacral"] { background: linear-gradient(180deg, var(--hd-center-sacral-1), var(--hd-center-sacral-2)); }
.ui-center-legend__item--defined .ui-center-legend__swatch[data-center="solar_plexus"] { background: linear-gradient(180deg, var(--hd-center-solar_plexus-1), var(--hd-center-solar_plexus-2)); }
.ui-center-legend__item--defined .ui-center-legend__swatch[data-center="spleen"] { background: linear-gradient(180deg, var(--hd-center-spleen-1), var(--hd-center-spleen-2)); }
.ui-center-legend__item--defined .ui-center-legend__swatch[data-center="root"] { background: linear-gradient(180deg, var(--hd-center-root-1), var(--hd-center-root-2)); }

.ui-center-legend__text { flex: 1; min-width: 0; }
.ui-center-legend__name {
  display: block;
  font: var(--type-caption);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-center-legend__state { display: block; font: var(--type-micro); color: var(--text-tertiary); }

/* ───── ChannelRow ───── */

.ui-channel-row {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: var(--hit-comfortable);
  padding: 10px var(--gutter-card);
  background: transparent;
  box-shadow: inset 0 -1px 0 var(--border-subtle);
  transition: var(--motion-color);
}
.ui-channel-row--clickable { cursor: pointer; }
.ui-channel-row--clickable:hover { background: var(--paper-2); }

.ui-channel-row__gates { display: flex; align-items: center; flex: none; }
.ui-channel-row__dot {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  font: var(--type-numeric);
  font-size: var(--text-2xs);
  color: var(--on-accent);
  background: var(--ui-personality);
}
.ui-channel-row__dot--design { background: var(--ui-design); }
.ui-channel-row__bridge { width: 10px; height: 3px; background: var(--border-strong); }

.ui-channel-row__text { flex: 1; min-width: 0; }
.ui-channel-row__name { display: block; font: var(--type-body); color: var(--text-primary); }
.ui-channel-row__gate-names {
  display: block;
  font: var(--type-caption);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ───── VariableArrows ───── */

.ui-variable-arrows--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.ui-variable-arrows--compact { display: flex; align-items: center; gap: var(--space-5); }
/* Раскладка макета экрана карты: два столбика по две строки, в строке —
   стрелка и её значение. Стоит в свободном углу графа, поэтому без подписей
   осей: они в подсказке и в подписи для скринридера. */
.ui-variable-arrows--corner { display: flex; gap: var(--space-4); }
/* Стрелка-кнопка. Подложка и радиус нужны затем, что за цифрами скрыт разбор
   их значения, а по голой строке этого не видно: человек её не нажимал.
   Высота мишени остаётся 44 px — плотность добирается зазорами, не ею. */
.ui-variable-arrows__slot--clickable {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  min-height: var(--hit-min);
}
.ui-variable-arrows--corner .ui-variable-arrows__column { gap: var(--space-1); }
.ui-variable-arrows--corner .ui-variable-arrows__slot {
  gap: var(--space-1);
  justify-content: center;
}
.ui-variable-arrows--corner .ui-variable-arrows__slot--clickable {
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
}
.ui-variable-arrows--corner .ui-variable-arrows__slot--clickable:active {
  background: var(--surface-sunken);
}
/* Четыре подписанных слота: на телефоне влезают два в ряд, дальше переносятся.
   Раскладка `pairs` — единственная, где под стрелкой стоят имя оси и сторона,
   поэтому слот здесь блок, а не строка. */
.ui-variable-arrows--pairs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}
.ui-variable-arrows--pairs .ui-variable-arrows__column {
  flex: 1 1 46%;
  min-width: 0;
}

.ui-variable-arrows__arrow { flex: none; color: var(--ui-personality); }
.ui-variable-arrows__arrow--design { color: var(--ui-design); }
.ui-variable-arrows__arrow path { stroke: currentColor; }
.ui-variable-arrows__head { fill: currentColor; stroke: none; }

.ui-variable-arrows__column { display: flex; flex-direction: column; gap: var(--space-3); }
.ui-variable-arrows__pair { display: flex; align-items: center; gap: var(--space-2); }
.ui-variable-arrows--pairs .ui-variable-arrows__pair {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--space-4) var(--space-5);
  background: var(--surface-card);
  border-radius: var(--radius-sm);
}
.ui-variable-arrows__line { display: flex; align-items: center; gap: var(--space-2); }
.ui-variable-arrows__notation {
  font: var(--type-numeric);
  font-size: var(--text-xs);
  color: var(--text-primary);
}
.ui-variable-arrows__column--design .ui-variable-arrows__notation { color: var(--ui-design); }

.ui-variable-arrows__slot { display: flex; align-items: center; gap: var(--space-2); }

.ui-variable-arrows__cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--surface-card);
}
.ui-variable-arrows__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.ui-variable-arrows__caption {
  font: var(--type-eyebrow);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.ui-variable-arrows__name { font: var(--type-body-strong); color: var(--text-primary); }
.ui-variable-arrows__side {
  font: var(--type-caption);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
/* В раскладке `pairs` подпись стоит НАД стрелкой и по ширине слота: заглавные
   вразрядку там читаются как заголовок раздела, а не как имя оси. */
.ui-variable-arrows--pairs .ui-variable-arrows__caption {
  font: var(--type-caption);
  font-size: var(--text-xs);
  letter-spacing: var(--track-normal);
  text-transform: none;
  color: var(--text-secondary);
}

/* ═════════ Движение ═════════ */

@keyframes ui-spin { to { transform: rotate(360deg); } }
@keyframes ui-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes ui-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-rise { from { transform: translateY(14%); } to { transform: none; } }

/* Токены обнуляют длительности сами, но у ключевых кадров своя длительность,
   и её обнулить некому. Пульсация заглушки и вращение спиннера — самое
   заметное, что здесь движется, поэтому они гасятся явно. */
@media (prefers-reduced-motion: reduce) {
  .ui-button__spinner,
  .ui-skeleton,
  .ui-sheet__scrim,
  .ui-sheet__panel { animation: none; }
}

/* ───── TimelinePanel — бегунок времени рождения ───── */

/* Поля по бокам — место для треугольника и крайних подписей линейки у края
   окна: всё, что выступает за полосы, остаётся внутри детали, и узкий экран
   не получает прокрутки вбок. Геометрия внутри — долями, без замеров. */
.ui-timeline {
  width: 100%;
  min-width: 0;
  padding: 0 var(--space-5);
  overflow: hidden;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}
.ui-timeline__stage { position: relative; padding-bottom: 36px; }
.ui-timeline__rows { display: flex; flex-direction: column; gap: var(--space-2); }
.ui-timeline__row {
  position: relative;
  height: var(--hit-min);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  overflow: hidden;
}
/* Отрезки начинаются под строкой заголовка, как на снимке конкурента:
   чёрточка и фон соседнего отрезка не перечёркивают «Профиль». */
.ui-timeline__track { position: absolute; inset: 17px 0 0; }
/* Слова в отрезках стоят вертикально — полосе слов нужна высота. */
.ui-timeline__row--words { height: calc(var(--hit-min) * 2); }
/* Соседние отрезки чуть различаются фоном — иначе короткий не виден вовсе. */
.ui-timeline__seg {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  container-type: inline-size;
}
.ui-timeline__seg--alt { background: var(--surface-sunken); }
.ui-timeline__seg--cut { border-left: 1px solid var(--text-tertiary); }
.ui-timeline__title {
  position: absolute;
  top: 2px;
  left: var(--space-3);
  font: var(--type-micro);
  color: var(--text-secondary);
  pointer-events: none;
}
.ui-timeline__text {
  max-width: 100%;
  max-height: 100%;
  padding: 0 2px 4px;
  box-sizing: border-box;
  font: var(--type-micro);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Слова типа, профиля, креста — подписью полосы, как было одно значение по
   центру; соседние отрезки — вторыми чернилами, выбранный — первыми и жирнее:
   значение выбранного момента различимо, хотя подписан каждый отрезок. */
.ui-timeline__text--flat {
  padding: 0 var(--space-1) 4px;
  font: var(--type-caption);
  color: var(--text-secondary);
}
.ui-timeline__seg--on .ui-timeline__text {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}
/* Узкий отрезок питания подписан вертикально, как на снимке конкурента:
   отрезок сам себе контейнер, и решает его ширина, а не замер скриптом. */
@container (max-width: 40px) {
  .ui-timeline__text:not(.ui-timeline__text--glyph):not(.ui-timeline__text--flat) {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    padding: 2px 0;
    font-size: var(--text-3xs);
  }
}
/* Крупное время — плашкой поверх линии: линия иначе резала «00:23»
   пополам. Сдвиг вдоль линии ставит деталь, чтобы у края окна подпись
   не уходила за край. */
.ui-timeline__now {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin: var(--space-2) 0 var(--space-1);
  padding: 0 var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  font: var(--type-numeric);
  font-size: var(--text-lg);
  color: var(--text-primary);
  pointer-events: none;
}
.ui-timeline__ruler {
  position: relative;
  height: 28px;
  touch-action: none;
  cursor: ew-resize;
}
.ui-timeline__tick {
  position: absolute;
  top: 0;
  width: 1px;
  height: 6px;
  background: var(--text-tertiary);
}
.ui-timeline__tick--major { height: 10px; }
.ui-timeline__mark {
  position: absolute;
  top: 12px;
  transform: translateX(-50%);
  font: var(--type-micro);
  color: var(--text-secondary);
  white-space: nowrap;
}
/* Линия выбранного времени — через все полосы и до делений линейки,
   но не через подписи часов: «00:00» под ней читалось бы «00:|00». */
.ui-timeline__line {
  position: absolute;
  top: 0;
  bottom: 54px;
  width: 2px;
  transform: translateX(-50%);
  background: var(--surface-brand);
  pointer-events: none;
}
/* Тянут и за саму линию: цель шире её на палец. */
.ui-timeline__grip {
  position: absolute;
  top: 0;
  bottom: 36px;
  width: var(--hit-min);
  transform: translateX(-50%);
  touch-action: none;
  cursor: ew-resize;
}
.ui-timeline__thumb {
  position: absolute;
  bottom: 0;
  width: var(--hit-min);
  height: 36px;
  transform: translateX(-50%);
  touch-action: none;
  cursor: grab;
  outline: none;
}
.ui-timeline__thumb::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 20px solid var(--surface-brand);
}
.ui-timeline__thumb:focus-visible { box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }

/* ───── Картинка карты во вкладке («Отправить бодиграф») ─────
   Слой во весь экран: картинку сохраняют долгим нажатием, поэтому она
   крупная и ничем не перекрыта; ссылка под ней переносится по знакам. */

.share-picture {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--gutter-screen);
  overflow-y: auto;
  background: var(--surface-card);
}
.share-picture__image {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sheet);
  -webkit-touch-callout: default;
}
.share-picture__hint {
  margin: 0;
  font: var(--type-caption);
  color: var(--text-tertiary);
  text-align: center;
}
.share-picture__link { color: var(--text-primary); word-break: break-all; }
.share-picture .ui-button { max-width: 360px; }