/* =========================================================================
   Sfera — каркас интерфейса (docs/web/ux.md, «Компоненти» и «Довідка»).
   Компоненты собираются хелперами UiComponentsHelper / UiHelpHelper, графики —
   UiChartsHelper (charts.css). Цвета — только токены tokens.css, обе темы.
   Порядок файлов в :app — по алфавиту: application.css грузится раньше,
   поэтому адаптив компонентов — свой ОДИН блок 900 px и один 480 px в конце
   этого файла (правило «один блок на файл», test/config/design_tokens_test.rb).
   ========================================================================= */

/* --- 12-колоночная сетка ---------------------------------------------------
   Ячейка — `ui-span-N`; на планшете половинки и трети встают по две в ряд,
   на телефоне — всё в одну колонку. minmax(0, 1fr): широкая таблица внутри
   ячейки не распирает сетку (прокрутка — внутри своего блока). */
.ui-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); margin: 0 0 var(--gap); }
.ui-grid > * { grid-column: span 12; min-width: 0; margin: 0; }
.ui-grid > .ui-span-2 { grid-column: span 2; }
.ui-grid > .ui-span-3 { grid-column: span 3; }
.ui-grid > .ui-span-4 { grid-column: span 4; }
.ui-grid > .ui-span-5 { grid-column: span 5; }
.ui-grid > .ui-span-6 { grid-column: span 6; }
.ui-grid > .ui-span-7 { grid-column: span 7; }
.ui-grid > .ui-span-8 { grid-column: span 8; }
.ui-grid > .ui-span-9 { grid-column: span 9; }
/* ячейка по своей высоте, а не по высоте ряда: короткая карточка рядом с
   длинной не растягивается пустотой (AUDIT №430) */
.ui-grid > .ui-align-start { align-self: start; }

/* интервал «12:00–13:00» не рвётся на тире (№433) */
.ui-nowrap { white-space: nowrap; }

/* --- карточка ---------------------------------------------------------------
   Вертикальный ритм страницы: карточка в потоке отделена от следующего блока
   (карточка, сетка, таблица) на --gap; соседние вертикальные отступы в
   потоке схлопываются, двойного шага нет. Внутри сетки шаг даёт gap сетки,
   внутри карточки — её gap, поэтому там отступ снят. Сброс — после .ui-card и
   с большей специфичностью: `.ui-grid > *` (0,1,0) объявлен раньше и
   проигрывает `.ui-card` (страж — design_tokens_test, «ритм»). */
.ui-card {
  display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0 0 var(--gap);
  padding: 20px 22px; border-radius: var(--radius-lg);
  background: var(--bg-elevated); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.ui-grid > .ui-card, .ui-card .ui-card { margin: 0; }
.ui-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; }
.ui-card-head h2, .ui-card-head h3 { margin: 0; font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; }
.ui-card-sub { margin: 0; color: var(--text-muted); font-size: 13px; }
.ui-card-foot { margin: 0; color: var(--text-muted); font-size: 13px; }

/* --- плитка показателя -----------------------------------------------------
   Подпись 2–4 слова, значение крупно, единица рядом, изменение — знаком и
   словом (не только цветом), спарклайн внизу. */
/* Значение не ломается посреди числа: nowrap, а кегль — от ширины самой
   плитки (container query), чтобы «271 868 грн» влезало в четверть ряда
   (AUDIT №431). Крупное число — Fixel Display 500, −0,025em (№449). */
.ui-tile { gap: 6px; padding: 18px 20px; container-type: inline-size; }
.ui-tile-label { color: var(--text-muted); font-size: 13px; line-height: 1.35; }
.ui-tile-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 0; }
.ui-tile-value b, .ui-tile-rows b {
  font-family: var(--font-head); font-size: 32px; font-size: clamp(18px, 14cqi, 32px); font-weight: 500; line-height: 1.1;
  letter-spacing: -0.025em; font-variant-numeric: var(--nums); white-space: nowrap;
}
/* Значение-фраза («11 з 12 діб Sfera точніша») — переносится: nowrap числа
   (№431) раздвигал страницу до 1 368 px на 1280 и до 461 на 375 (№437). */
.ui-tile-value-text b { white-space: normal; }
.ui-tile-rows { display: grid; gap: 4px; margin: 0; }
.ui-tile-rows > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 12px; }
.ui-tile-rows dt { color: var(--text-muted); font-size: 13px; }
.ui-tile-rows dd { margin: 0; }
.ui-tile-rows b { font-size: 26px; font-size: clamp(18px, 12cqi, 26px); }
.ui-tile-unit { color: var(--text-muted); font-size: 14px; }
/* пара долей «недобір / надлишок» (№455): числа — текстовыми токенами тона, полоса — графиковыми */
.ui-tile-split { flex-wrap: nowrap; gap: 6px; }
.ui-tile-split b.is-under { color: var(--warn-text); }
.ui-tile-split b.is-over { color: var(--accent-text); }
.ui-tile-split-sep { color: var(--text-faint); font-size: 22px; }
.ui-tile-ratio { display: flex; gap: 3px; height: 6px; margin-top: 4px; }
.ui-tile-ratio > span { flex-basis: 0; min-width: 4px; border-radius: 3px; }
.ui-tile-ratio > .is-under { background: var(--chart-shortfall); }
.ui-tile-ratio > .is-over { background: var(--chart-surplus); }
.ui-tile-note { margin: 0; color: var(--text-muted); font-size: 12.5px; }
.ui-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; font-variant-numeric: var(--nums); color: var(--text-muted); }
.ui-delta.is-good { color: var(--ok-text); }
.ui-delta.is-bad { color: var(--danger-text); }
.ui-tile .sparkline { height: 36px; margin-top: 2px; }
/* «Деталі»: пояснение плитки — по раскрытию, а не мелким текстом в 3–4 строки (№449) */
.ui-tile-more { margin: 2px 0 0; font-size: 12.5px; }
.ui-tile-more > summary { display: inline-flex; align-items: center; gap: 4px; width: max-content; cursor: pointer; list-style: none; color: var(--link); font-weight: 500; }
.ui-tile-more > summary::-webkit-details-marker { display: none; }
.ui-tile-more > summary::after { content: ""; width: 6px; height: 6px; margin-left: 2px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform 150ms ease; }
.ui-tile-more[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.ui-tile-more > .ui-tile-note { margin-top: 6px; }

/* --- чип / статус -----------------------------------------------------------
   Значок + текст: статус читается без цвета (ux.md, принцип 9). */
.ui-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.3;
  background: var(--bg-sunken); color: var(--text-muted); white-space: nowrap;
}
/* чип в узкой колонке переносится внутри себя, а не вылезает за карточку
   («0 — таке саме завдання в черзі» на «Огляді», №433) */
.ui-chip { min-width: 0; }
p > .ui-chip, li > .ui-chip, dd > .ui-chip { white-space: normal; }
.ui-chip svg { flex: none; }
.ui-chip-ok { background: var(--ok-soft); color: var(--ok-text); }
.ui-chip-warn { background: var(--warn-soft); color: var(--warn-text); }
.ui-chip-danger { background: var(--danger-soft); color: var(--danger-text); }
.ui-chip-info { background: var(--accent-soft); color: var(--link); }
.ui-chip-wrap { white-space: normal; }

/* --- сегментированный переключатель ----------------------------------------- */
.ui-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 11px; background: var(--bg-sunken); border: 1px solid var(--border); }
.ui-seg > a, .ui-seg > button {
  /* внешняя высота сегментов = --control-h: рамка 1 + поле 3 с каждой стороны */
  display: inline-flex; align-items: center; min-height: calc(var(--control-h) - 8px); padding: 0 13px; margin: 0;
  border: 0; border-radius: 8px; background: transparent; box-shadow: none;
  color: var(--text-muted); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.ui-seg > a:hover, .ui-seg > button:hover { color: var(--text); background: var(--accent-soft); border: 0; }
.ui-seg > [aria-current="true"], .ui-seg > [aria-pressed="true"] {
  color: var(--text); background: var(--bg-elevated); font-weight: 600;
  box-shadow: 0 0 0 1px var(--border-strong), var(--shadow-sm);
}

/* --- похибка доби в таблице «Результатів»: пилюля тона к средней набора
   (Client::ResultsBoard.wape_tone, №449); тон дублируют aria-label и строка
   под таблицей --------------------------------------------------------------- */
.wape-cell a { display: inline-block; min-width: 3.6em; padding: 2px 9px; border-radius: 999px; text-align: center; font-weight: 600; color: var(--text); background: var(--bg-sunken); }
.wape-cell.is-good a { color: var(--ok-text); background: var(--ok-soft); }
.wape-cell.is-bad a { color: var(--danger-text); background: var(--danger-soft); box-shadow: inset 0 0 0 1px currentColor; }
/* не только цветом: знак тона ▼ / ▲ перед числом и рамка у «гіршої» */
.wape-sign { margin-right: 3px; font-size: 0.8em; }
.wape-cell a:hover { color: var(--text); box-shadow: inset 0 0 0 1px currentColor; text-decoration: underline; }
.wape-cell.is-good a:hover { color: var(--ok-text); }
.wape-cell.is-bad a:hover { color: var(--danger-text); }

/* --- свёрнутые блоки экрана (таблица по добах и «Як рахується» месяца, №449) -- */
.ui-card.month-fold { gap: 0; padding: 0; }
.month-fold > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; cursor: pointer; font-weight: 600; font-size: 15px; }
.month-fold > summary::-webkit-details-marker { display: none; }
.month-fold > summary::after { content: ""; flex: none; width: 7px; height: 7px; border: solid var(--text-muted); border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform 150ms ease; }
.month-fold[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.month-fold[open] > summary { border-bottom: 1px solid var(--border); }
.month-fold > .panel { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.month-fold > .month-fold-note { margin: 10px 22px 16px; font-size: 12.5px; }
.month-fold > .month-fold-list { margin: 12px 22px 16px; padding-left: 18px; }

/* --- фильтр-бар (ui_filters / ui_field, №449) --------------------------------
   Один компонент на все экраны с фильтрами: строка полей, подпись слева от
   поля по базовой линии, «Показати» и «Скинути» в той же строке; высота
   элементов управления — --control-h. На узком — поля во всю ширину. */
.ui-filters { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px; margin: 0 0 var(--gap); }
.ui-field { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; max-width: 100%; color: var(--text-muted); font-size: 13px; }
/* min-width: 0 — длинная опция select (ревизия факта табло, ~1 900 px) не раздвигает страницу (№421) */
.ui-field > select, .ui-field > input { min-width: 0; max-width: min(640px, 100%); color: var(--text); }
.ui-field > select { min-width: 140px; }
.ui-field-check { align-items: center; gap: 7px; }
.ui-field-grow { flex: 1 1 280px; }
.ui-field-grow > input { flex: 1 1 auto; width: auto; }
.ui-field-check > input { min-height: 0; }
.ui-filters .help-label label { display: inline; }

/* --- таблица -----------------------------------------------------------------
   Фиксированная высота строки, длинное — обрезка с подсказкой (ui_clip),
   числа справа, шапка липкая; на узком — прокрутка внутри блока, а не
   страницы (.ui-table-wrap — region с tabindex). */
/* position: relative — скрытый текст ячеек (.visually-hidden, absolute) остаётся внутри прокрутки,
   а не раздвигает окно телефона (HSCROLL «Моделей», №455) */
.ui-table-wrap { position: relative; overflow: auto; max-width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--bg-elevated); }
.ui-table-wrap.is-bounded { max-height: var(--table-max, 440px); }
.ui-table-wrap:focus-visible { outline-offset: -2px; }
.ui-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.ui-table th, .ui-table td { height: 44px; padding: 0 14px; white-space: nowrap; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ui-table thead th {
  position: sticky; top: 0; z-index: 1; height: 40px; background: var(--bg-elevated);
  color: var(--text-muted); font-size: 12.5px; font-weight: 500;
  box-shadow: inset 0 -1px 0 var(--border-strong);
}
.ui-table tbody tr:last-child > * { border-bottom: 0; }
.ui-table tbody th { font-weight: 500; text-align: left; }
.ui-table td.num, .ui-table th.num { text-align: right; font-variant-numeric: var(--nums); }
.ui-table caption { caption-side: top; text-align: left; padding: 12px 14px 4px; color: var(--text-muted); font-size: 12.5px; }
.ui-clip { display: inline-block; max-width: var(--clip, 220px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.ui-clip.has-note { cursor: help; text-decoration: underline dotted var(--text-faint); text-underline-offset: 3px; }
.ui-clip.has-note:focus-visible { border-radius: 4px; }

/* --- пустое и «чекає» ------------------------------------------------------- */
.ui-empty, .ui-waiting {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px;
  border-radius: var(--radius-lg); border: 1px dashed var(--border-strong); background: var(--bg-elevated);
}
.ui-empty > svg, .ui-waiting > svg { flex: none; margin-top: 2px; color: var(--text-muted); }
.ui-empty h3, .ui-waiting h3 { margin: 0 0 4px; font-size: 15px; font-family: var(--font); font-weight: 600; letter-spacing: 0; }
.ui-empty p, .ui-waiting p { margin: 0; color: var(--text-muted); font-size: 13.5px; }
.ui-empty .actions { margin-top: 10px; }
/* «чекає» — штриховка: ожидание читается без цвета */
.ui-waiting {
  border-style: solid; border-color: var(--border);
  background: repeating-linear-gradient(135deg, var(--bg-elevated) 0 10px, var(--bg-sunken) 10px 20px);
}

/* --- кнопки каркаса ---------------------------------------------------------
   Сплошные варианты — основное действие и необратимое в диалоге. */
.button.primary, button.primary {
  color: #ffffff; background: var(--primary-bg); border-color: transparent; font-weight: 600; box-shadow: var(--primary-shadow);
}
.button.primary:hover, button.primary:hover { color: #ffffff; background: var(--primary-bg-hover); border-color: transparent; }
.button.danger-solid, button.danger-solid {
  color: #ffffff; background: var(--danger-solid); border-color: transparent; font-weight: 600;
}
.button.danger-solid:hover, button.danger-solid:hover { color: #ffffff; background: var(--danger-text); border-color: transparent; }
[data-theme="dark"] .button.danger-solid:hover, [data-theme="dark"] button.danger-solid:hover { background: #9c1f3d; }

/* --- диалог подтверждения (shared/_confirm_action, принцип 10) --------------
   Заголовок слева, текст, поле, кнопки справа одной высоты; опасная —
   сплошная. */
.confirm-action { display: inline-flex; }
.confirm-dialog {
  width: min(520px, calc(100vw - 32px)); padding: 24px; border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong); background: var(--bg-elevated); color: var(--text);
  box-shadow: 0 24px 60px rgba(16, 18, 24, 0.28);
}
[data-theme="dark"] .confirm-dialog { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); }
/* ::backdrop наследует токены только с Chrome 122 / Safari 17.4 — запасное значение */
.confirm-dialog::backdrop { background: var(--backdrop, rgb(10 11 13 / 50%)); }
.confirm-form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.confirm-form h2 { margin: 0; font-size: 18px; line-height: 1.3; text-align: left; }
.confirm-form p { margin: -6px 0 0; color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.confirm-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); }
.confirm-form textarea, .confirm-form input:not([type="submit"]):not([type="hidden"]), .confirm-form select { width: 100%; font-size: 14px; background-color: var(--bg); }
.confirm-form .actions { display: flex; justify-content: flex-end; align-items: stretch; gap: 10px; flex-wrap: wrap; margin: 4px 0 0; }
.confirm-form .actions > * { min-height: 44px; padding: 0 18px; margin: 0; }

/* --- термин и карточка справки (ui_term, term_controller.js) ---------------
   Термин — кнопка с пунктиром: клик, касание, Enter/Space; карточка —
   fixed (overflow таблиц не обрезает), закрывается Esc и кликом вне. */
button.term {
  display: inline; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 3px;
  background: transparent; box-shadow: none; color: inherit; font: inherit; font-weight: inherit;
  letter-spacing: inherit; text-transform: inherit; text-align: inherit; white-space: inherit; cursor: help;
  text-decoration: underline dotted; text-decoration-color: var(--text-faint);
  text-decoration-thickness: 1.5px; text-underline-offset: 4px;
}
button.term:hover, button.term[aria-expanded="true"] { color: inherit; background: transparent; border: 0; text-decoration-color: currentColor; }
/* знак сразу за термином — внутри кнопки, без подчёркивания (ui_term tail:, №429) */
button.term.has-tail { text-decoration: none; }
button.term.has-tail .term-label {
  text-decoration: underline dotted; text-decoration-color: var(--text-faint); text-decoration-thickness: 1.5px; text-underline-offset: 4px;
}
button.term.has-tail:hover .term-label, button.term.has-tail[aria-expanded="true"] .term-label { text-decoration-color: currentColor; }
.term-card {
  position: fixed; z-index: 1000; width: min(360px, calc(100vw - 24px));
  display: flex; flex-direction: column; gap: 10px; padding: 16px 18px;
  border-radius: 14px; background: var(--bg-elevated); color: var(--text);
  border: 1px solid var(--border-strong); box-shadow: 0 18px 48px rgba(16, 18, 24, 0.18);
  font: 400 14px/1.55 var(--font); letter-spacing: normal; text-transform: none; text-align: left; white-space: normal;
}
[data-theme="dark"] .term-card { box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55); }
.term-card[hidden] { display: none; }
.term-card b.term-title { font-size: 15px; font-weight: 600; }
.term-card p { margin: 0; }
.term-example { padding: 10px 12px; border-radius: 10px; background: var(--bg-sunken); font-variant-numeric: var(--nums); }
.term-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.term-foot a { font-weight: 600; }
.term-foot button { min-height: 32px; padding: 0 10px; font-size: 13px; }

/* --- «Чому так?» ------------------------------------------------------------ */
.ui-why { display: grid; gap: 8px; padding: 14px 16px; border-radius: 12px; background: var(--bg-sunken); border-left: 3px solid var(--accent-2); }
.ui-why h3 { margin: 0; font-size: 14px; font-family: var(--font); font-weight: 600; letter-spacing: 0; }
.ui-why p { margin: 0; font-size: 13.5px; color: var(--text-muted); }
.ui-why p b { color: var(--text); font-weight: 600; }

/* --- панель «Як читати цей екран» (ui_screen_help) --------------------------
   <dialog> справа во всю высоту; открывает браузер (commandfor) и
   confirm-dialog (фокус, возврат). */
.help-trigger { display: inline-flex; align-items: center; gap: 8px; }
.help-panel {
  margin: 0 0 0 auto; width: min(440px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh;
  padding: 26px 26px 32px; border: 0; border-left: 1px solid var(--border-strong); border-radius: 0;
  background: var(--bg-elevated); color: var(--text); overflow-y: auto;
}
.help-panel::backdrop { background: var(--backdrop, rgb(10 11 13 / 50%)); }
.help-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 18px; }
.help-panel-head h2 { margin: 0; font-size: 19px; }
.help-panel-head button { width: 40px; min-height: 40px; padding: 0; font-size: 18px; }
.help-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; counter-reset: help; }
.help-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; counter-increment: help; }
.help-steps li::before {
  content: counter(help); width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
  background: var(--accent-soft); color: var(--link);
}
.help-steps b { display: block; margin: 4px 0 2px; }
.help-steps p { margin: 0; color: var(--text-muted); font-size: 13.5px; }
.help-panel-foot { margin: 22px 0 0; font-size: 13.5px; }

/* --- страница «Довідка» ---------------------------------------------------- */
.help-glossary { display: grid; gap: 12px; margin: 0; }
.help-glossary > div { scroll-margin-top: 24px; }
.help-glossary dt { font-weight: 600; font-size: 15px; margin: 0 0 4px; }
.help-glossary dd { margin: 0; color: var(--text-muted); }
.help-glossary dd p { margin: 0 0 6px; }
.help-glossary > div:target { outline: 2px solid var(--focus-ring); outline-offset: 6px; border-radius: 6px; }
.help-faq details { border-top: 1px solid var(--border); padding: 12px 0; }
.help-faq details:first-child { border-top: 0; }
.help-faq summary { cursor: pointer; font-weight: 600; }
.help-faq p { margin: 8px 0 0; color: var(--text-muted); }

/* --- витрина компонентов (ops/ui) -------------------------------------------
   Тема витрины — своим data-theme на обёртке (.theme-scope): токены светлой
   темы объявлены и на .theme-scope[data-theme="light"]. */
.theme-scope { background: var(--bg); color: var(--text); border-radius: var(--radius-lg); padding: 20px; color-scheme: light; }
.theme-scope[data-theme="dark"] { color-scheme: dark; }
.showcase-section { margin: 0 0 28px; }
.showcase-section > h2 { margin: 0 0 12px; }
.showcase-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* --- меню действий (отчёты Excel): <details> + dropdown_controller.js (№449) -- */
.dropdown { position: relative; display: inline-block; }
.dropdown > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown > summary::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); }
.dropdown[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.dropdown-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 230px;
  display: flex; flex-direction: column; padding: 6px; border-radius: 12px;
  background: var(--bg-elevated); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lift);
}
.dropdown-pop a { padding: 9px 12px; border-radius: 8px; color: var(--text); font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.dropdown-pop a:hover { background: var(--accent-soft); color: var(--text); }

/* --- страницы ошибок живут в public/*.html со своим инлайн-стилем --------- */

/* ссылка «Довідка і словник» в подвале сайдбара (токены --sidebar-*) */
.sidebar-help {
  display: flex; align-items: center; margin: 0 12px 12px; padding: 9px 12px; border-radius: 9px;
  color: var(--sidebar-item); font-size: 13.5px; border: 1px solid var(--sidebar-line);
}
.sidebar-help:hover, .sidebar-help.active { color: var(--sidebar-item-active); background: var(--sidebar-hover); }

@media (max-width: 900px) {
  .ui-field:not(.ui-field-check) { flex: 1 1 240px; }
  .ui-field > select, .ui-field > input:not([type="checkbox"]) { flex: 1 1 auto; width: auto; }
  .ui-grid { gap: 14px; }
  .ui-grid > .ui-span-2, .ui-grid > .ui-span-3, .ui-grid > .ui-span-4 { grid-column: span 6; }
  .ui-grid > .ui-span-5, .ui-grid > .ui-span-6, .ui-grid > .ui-span-7,
  .ui-grid > .ui-span-8, .ui-grid > .ui-span-9 { grid-column: span 12; }
  .ui-card { padding: 16px; }
  .help-panel { width: 100vw; border-left: 0; padding: 20px 16px 28px; }
  .theme-scope { padding: 14px; }
}
@media (max-width: 480px) {
  .ui-grid > .ui-span-2, .ui-grid > .ui-span-3, .ui-grid > .ui-span-4 { grid-column: span 12; }
  .ui-table th, .ui-table td { padding: 0 10px; }
  /* Телефон: первая колонка таблиц (доба, вариант, время) — липкая, остальное
     листается внутри блока (принцип 8; карточки вместо строк дали бы второй
     макет каждой таблицы, №455). Фон — карточки: прокрученные ячейки под ней. */
  .ui-table-wrap tr > :first-child, .tblwrap tr > :first-child {
    position: sticky; left: 0; z-index: 1; background: var(--bg-elevated); box-shadow: inset -1px 0 0 var(--border);
  }
  .ui-table-wrap thead tr > :first-child { z-index: 2; }
  /* липкая колонка не шире 40 % блока (ui_check STICKY): её текст переносится,
     ширину забирают листаемые числа */
  .ui-table-wrap tr > :first-child, .tblwrap tr > :first-child { white-space: normal; overflow-wrap: break-word; min-width: 88px; }
  .ui-table-wrap tr > :first-child .ui-clip { max-width: min(var(--clip, 220px), 26vw); }
  .confirm-form .actions > * { flex: 1 1 auto; }
  /* диалог на телефоне — почти во всю ширину, поля 8 px (ux.md «На телефоне») */
  .confirm-dialog { width: calc(100vw - 16px); max-width: none; padding: 20px 16px; }
  .theme-scope { padding: 10px; }
  /* кнопка меню на телефоне — у левого края: меню открывается вправо */
  .dropdown-pop { right: auto; left: 0; }
}