/* Токены вида v2.3 «бренд мягко» (макет .scratch/referensy-ui/maket_v2.3_shag3.html, значения оттуда) поверх темы Basecoat 1.0.2 и сетки
   страниц. Кнопки, бейджи, таблицы, вкладки, карточки, подсказки, поля — из basecoat.cdn.min.css (data-variant, data-size); здесь только
   токены, раскладка и смысловые цвета корзин (UI_ПРАВИЛА.md п.19, п.25). Моноширинного шрифта и капса в сервисе нет. */
/* Шрифт один — Onest, файлами в static/fonts/ (переменный, 400–600): внешних адресов нет. */
@font-face { font-family: "Onest"; font-weight: 400 600; font-display: swap; src: url("fonts/onest-cyrillic-wght.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-weight: 400 600; font-display: swap; src: url("fonts/onest-latin-wght.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  /* из макета: боковая панель — тёмная, жёлтый только меткой активного пункта; рабочая область светлая и нейтральная (мерка — пин № 628) */
  --panel: #1f1f1f; --panel-ink: #f4f4f5; --panel-ink-2: #a1a1aa; --panel-active: #2c2c2e; --panel-line: #34373a;
  --mark: #f2ff00; --primary: #0619f5; --primary-ink: #fff;
  --bg: #ffffff; --ink: #18181b; --ink-2: #71717a; --ink-3: #a1a1aa; --line: #e4e4e7; --soft: #f4f4f5; --soft-2: #fafafa;
  --ok: #15803d; --ok-bg: #ecf7ef; --ok-line: #bfe3c9; --danger: #b91c1c; --danger-bg: #fdeced; --danger-line: #f3c2c5;
  --warn: #b45309; --warn-bg: #fdf6e3; --warn-line: #f1dca5; --amber: #f59e0b; --brand: #5b3fa8; --brand-bg: #f1edfa; --r: 8px; --r-sm: 6px;
  --violet: #6d28d9; --violet-bg: #f3effd;   /* решение «убрать из категории» шага «Спрос» (макет maket_v2.3_audit_spros.html, AU-52) */
  /* прежние имена токенов (шаблоны, bloki.css, shag2.css) — теперь синонимы токенов макета */
  --coal: var(--panel); --blue: var(--primary); --yellow: var(--mark); --surface: var(--bg); --surface-2: var(--soft-2); --line-2: var(--ink-3);
  --b-core: #2e7d32; --b-disputed: #b26a00; --b-removed: #8a8f99; --b-branded: #5b3fa8; --b-unreviewed: #0b6b8a;
  --sans: "Onest", system-ui, "Segoe UI", Arial, sans-serif;
  --radius: var(--r); --background: var(--bg); --foreground: var(--ink); --card: var(--bg); --card-foreground: var(--ink);
  --popover: var(--bg); --popover-foreground: var(--ink); --primary-foreground: var(--primary-ink);
  --secondary: var(--soft-2); --secondary-foreground: var(--ink); --muted: var(--soft-2); --muted-foreground: var(--ink-2);
  --accent: var(--soft-2); --accent-foreground: var(--ink); --destructive: var(--danger);
  --border: var(--line); --input: var(--line); --ring: var(--primary); --font-sans: var(--sans);
}
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.45 var(--sans); }
html { scroll-behavior: auto; }   /* Basecoat ставит smooth: «показать предпросмотр» и возврат к месту ехали бы анимацией */
h1, h2, h3, h4 { font-family: var(--sans); font-weight: 600; text-wrap: balance; margin: 0; line-height: 1.2; letter-spacing: -.01em; }
h1 { font-size: 20px; }
h2 { font-size: 16px; }
h3 { font-size: 15px; }
a:not(.btn) { color: var(--primary); }
p { margin: 0; }
code, kbd, samp, pre { font-family: var(--sans); }   /* моноширинного семейства в сервисе нет нигде (UI_ПРАВИЛА п.41): Basecoat ставит его на code */
.main ul { list-style: disc; padding-left: 1.4em; margin: 0; }
.eyebrow { font-size: 12px; color: var(--ink-2); }
.muted { color: var(--ink-2); }
.mono, .cell-weight { font-variant-numeric: tabular-nums; }   /* имя класса прежнее: цифры равной ширины, шрифт тот же Onest */

/* Оболочка: тёмная боковая панель слева, рабочее поле справа */
/* Тёмная колонка панели тянется на всю высоту длинной страницы (UX-18): сама `.nav` липкая высотой с окно, а фон колонки рисует `.app` —
   поэтому и в снимке страницы целиком панель не обрывается на высоте окна. Ширина колонки — та же, что у `grid-template-columns`. */
.app { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100vh;
  background: linear-gradient(to right, var(--panel) 0, var(--panel) 219px, var(--panel-line) 219px, var(--panel-line) 220px, transparent 220px); }
.app--bare { display: block; }
.nav { background: var(--panel); color: var(--panel-ink); border-right: 1px solid var(--panel-line); padding: 14px 10px; display: flex; flex-direction: column;
  gap: 2px; position: sticky; top: 0; align-self: start; height: 100vh; }
.nav .logo { display: block; padding: 4px 10px 14px; font: 600 18px/1.45 var(--sans); letter-spacing: -.01em; color: var(--panel-ink); }   /* текстом, как в макете */
.nav .logo:hover { background: none; }
.nav .logo b { color: var(--mark); font-weight: 600; }
.nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: var(--r-sm); color: var(--panel-ink);
  text-decoration: none; font-size: 13.5px; position: relative; }
.nav a:hover { background: var(--panel-active); }
.nav a[aria-current="page"] { background: var(--panel-active); font-weight: 500; }
.nav a[aria-current="page"]::before { content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 2px; background: var(--mark); }
.nav a:focus-visible { outline: 2px solid var(--panel-ink); outline-offset: -2px; }
.nav .sep { display: none; }
.nav .grp { font-size: 12px; color: var(--panel-ink-2); padding: 14px 10px 4px; }
.nav .foot { margin-top: auto; padding: 10px; font-size: 13px; color: var(--panel-ink-2); border-top: 1px solid var(--panel-line); display: flex; flex-wrap: wrap;
  align-items: center; gap: 0 6px; }
.nav .foot > span::after { content: " ·"; }
.nav .foot button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.nav .foot button:hover { color: var(--panel-ink); }
/* ---- Боковая панель: сворачивание до значков (UX-8, §7). Развёрнутая — названия без значков (макет), свёрнутая — один значок (название в
   подсказке и для чтения с экрана); состояние `data-nav="collapsed"` на <html> ставит base.html из localStorage ---- */
.nav-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }   /* отступы шапки — у `.logo` (макет: 4/10/14) и `.nav-search` (0/2/10) */
.nav-links { display: flex; flex-direction: column; gap: 2px; }
.nav .nav-ico { flex: none; }
.nav-links .nav-ico, .nav-pins .nav-ico, .nav .foot .nav-ico { display: none; }
html[data-nav="collapsed"] .nav .nav-ico { display: block; }
.nav .btn { color: var(--panel-ink-2); background: none; border-color: transparent; }
.nav .btn:hover { color: var(--panel-ink); background: var(--panel-active); }
.nav .btn:focus-visible, .nav .foot button:focus-visible { outline: 2px solid var(--panel-ink); outline-offset: 2px; }
.nav .foot button { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
html[data-nav="collapsed"] .app { grid-template-columns: 56px minmax(0, 1fr);
  background: linear-gradient(to right, var(--panel) 0, var(--panel) 55px, var(--panel-line) 55px, var(--panel-line) 56px, transparent 56px); }
html[data-nav="collapsed"] .nav { padding-inline: 8px; align-items: stretch; }
html[data-nav="collapsed"] .nav .logo, html[data-nav="collapsed"] .nav .grp { display: none; }
html[data-nav="collapsed"] .nav-head { justify-content: center; margin-bottom: 18px; }
html[data-nav="collapsed"] .nav-links a, html[data-nav="collapsed"] .nav-pins a { justify-content: center; padding-inline: 0; }
html[data-nav="collapsed"] .nav .foot { padding-inline: 0; justify-content: center; }
html[data-nav="collapsed"] .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html[data-nav="collapsed"] .nav .sep { display: block; border-top: 1px solid var(--panel-line); margin: 8px; }
.main { padding: 14px 24px 64px; min-width: 0; display: grid; gap: 12px; align-content: start; }
.main--narrow { max-width: 420px; margin: 40px auto; padding: 0 16px; }
.head { display: grid; gap: 6px; }
.head .row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.breadcrumb { font-size: 13px; color: var(--ink-2); }
.breadcrumb li + li::before { content: "›"; margin: 0 8px; color: var(--ink-3); }
.breadcrumb a { color: var(--ink-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb [aria-current] { color: var(--ink); }

/* Компоненты Basecoat: поправки под наши тексты и скругления макета (карточка — 8 px, кнопка и поле — 6 px) */
.card { padding-inline: 18px; gap: 12px; border-radius: var(--r); box-shadow: none; }
.card > header, .card > section, .card > footer { padding-inline: 0; }
.alert { display: block; background: var(--soft-2); border-left: 3px solid var(--primary); color: var(--ink-2); }
.alert[data-variant="destructive"] { border-left-color: var(--danger); color: var(--danger); }
.table td.cell-weight { white-space: nowrap; overflow-wrap: normal; }   /* вид таблиц, строк и статусов — bloki.css */
/* Кнопки (макет: .btn 12.5 px, отступы 5/10, скругление 6; первичная — синяя, 13.5 px, 8/16; «призрак» — без рамки, серый текст) */
.btn { font: 400 12.5px/1.45 var(--sans); height: auto; min-height: 30px; padding: 5px 10px; border-radius: var(--r-sm); cursor: pointer; }
.btn[data-size^="icon"] { min-height: 0; padding: 0; }
.btn:is([data-variant="outline"], [data-variant="secondary"]) { background: var(--bg); color: var(--ink); border-color: var(--line); }
.btn:is([data-variant="outline"], [data-variant="secondary"]):hover { background: var(--soft); }
.btn[data-variant="ghost"] { color: var(--ink-2); }
.btn[data-variant="primary"] { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); padding: 8px 16px; font-size: 13.5px; font-weight: 500; }
.btn[aria-pressed="true"], .btn[aria-current="true"] { background: var(--soft-2); color: var(--ink); border-color: var(--ink); font-weight: 600; }   /* выбранный ответ и выбранный пункт: контур и жирный шрифт, без заливки (п.26) */
.btn:disabled { opacity: .5; cursor: progress; }
a.btn { text-decoration: none; color: var(--ink); }
a.btn[data-variant="primary"] { color: var(--primary-ink); }
.btn[data-variant="link"] { font: 600 14px var(--sans); color: var(--ink); text-align: left; white-space: normal; height: auto; padding: 0; }
.btn[data-variant="link"]:hover { color: var(--primary); }
.form > .btn, .form > button { align-self: flex-start; }
.tabs > [role="tablist"] { width: 100%; justify-content: flex-start; gap: 0; height: auto; flex-wrap: wrap; background: none; padding: 0;
  border-bottom: 1px solid var(--line); font-size: 13px; }
.tabs > [role="tablist"] > [role="tab"] { flex: 0 0 auto; text-decoration: none; color: var(--ink-2); padding: 8px 12px; display: inline-flex; gap: 8px;
  align-items: center; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs > [role="tablist"] > [aria-selected="true"] { color: var(--ink); border-bottom-color: var(--primary); background: none; box-shadow: none; }
.tabs > [role="tabpanel"] { padding-top: 14px; display: grid; gap: 12px; }
.form { display: flex; flex-direction: column; gap: 16px; }
.form-field { display: flex; flex-direction: column; gap: 4px; }
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tools input[type="search"] { flex: 1 1 240px; }
.empty { padding: 22px 18px; border: 1px dashed var(--line-2); border-radius: var(--r); color: var(--ink-2); align-items: flex-start; text-align: left; gap: 6px; }
.empty b { font-weight: 600; color: var(--ink); display: block; }

/* Плашки: бледные. «!» непроверенного — бледно-жёлтая (макет: --warn-*), номер слоя правила (§4.4), цвета корзин. Насыщенного жёлтого здесь нет */
.badge[data-flag] { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); font-weight: 500; }
.badge[data-layer] { height: auto; white-space: normal; text-align: left; cursor: help; }
.badge[data-layer]::first-letter { color: var(--primary); font-weight: 600; }
.badge[data-layer="0"] { border-style: dashed; color: var(--ink-2); }
.badge[data-basket="core"] { color: var(--b-core); border-color: var(--b-core); }
.badge[data-basket="disputed"] { color: var(--b-disputed); border-color: var(--b-disputed); }
.badge[data-basket="removed"] { color: var(--b-removed); border-color: var(--b-removed); }
.badge[data-basket="branded"] { color: var(--b-branded); border-color: var(--b-branded); }
.badge[data-basket="unreviewed"] { color: var(--b-unreviewed); border-color: var(--b-unreviewed); }
.badge:empty { display: none; }
/* Строка выбора шага 5 (UX-5) закреплена внизу, справа от рабочего поля — своя полоса под угол экрана (bloki.css) */
.tools label, .pager label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tools .num { flex: 0 0 100px; width: 100px; }
.pager label { margin-left: auto; }
.bulk-bar.pick-bar { position: sticky; bottom: 0; z-index: 5; align-items: center; border-top: 2px solid var(--primary); padding-right: 280px; }   /* справа место под угол экрана (макет: `.footer`) */
.pick-bar[hidden] { display: none; }

/* Задача: заголовок, полоса шагов и строка контекста на всю ширину, ниже шаг (полоса — bloki.css; шаги 3–4 с очередью и шторкой — shag34.css) */
.task { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 20px; align-items: start; }
.task > .task-title, .task > .strip, .task > .task-context { grid-column: 1 / -1; }
.task > .strip { margin-top: 6px; }
.task-title { display: flex; align-items: baseline; gap: 12px; }   /* макет `.head`: заголовок, серая строка «статус · сохранено», «История» справа */
.task-title .btn { margin-left: auto; }
.task-saved { color: var(--ink-2); font-size: 13px; }
#task-main > .task-head { padding: 0; border: 0; background: none; }   /* карточка с ошибкой, уведомлением и «Взять задачу себе» — без рамки: рабочая область нейтральная */
.task-main { display: grid; gap: 16px; min-width: 0; }
.task-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; }
.task-meta dt { color: var(--ink-2); font-size: 12px; }
.task-meta dd { margin: 0; }
label:has(> .input[type="checkbox"], > .input[type="radio"]) { display: inline-flex; align-items: center; gap: 6px; }
/* Шаги 3–4: список очередей, центр и шторка слова — shag34.css (UX-14); третьей колонки нет на любой ширине */

/* Строки очереди, массовые действия, шаги */
.bulk-bar { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; background: var(--soft-2); }
.step-next { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 16px; min-height: 38px; }   /* высота первичной кнопки: смена primary ↔ outline (диалог, пересчёт) не двигает страницу, п.18 */
/* Форма с кнопкой шага («Зафиксировать набор файлов»): .form выстраивает колонку и прижимает кнопку влево — здесь строка, кнопка справа (UI_ПРАВИЛА п.3). */
.form.step-next { flex-direction: row; }
.form.step-next > .btn, .form.step-next > button { align-self: center; }
.step-next__hint, .list-count, .pager { color: var(--ink-2); }
.pager { display: flex; gap: 16px; align-items: center; margin: 12px 0; }
tr.htmx-request { opacity: .6; }
.row-busy { margin-left: 8px; font-size: 12px; color: var(--ink-2); }
.platform-strip { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 0 0 12px; padding: 0; }
.platform-strip__item { display: grid; gap: 4px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--bg); max-width: 480px; }
.platform-strip__item[data-current] { border: 2px solid var(--ink); padding: 7px 11px; }
/* Диалог подтверждения шага 5 — по центру окна, поверх страницы: видно из любого места таблицы, таблицу не сдвигает (п.18) */
.confirm-box { position: fixed; z-index: 70; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(720px, 92vw); max-height: 88vh; overflow: auto; padding: 16px; border: 2px solid var(--primary); border-radius: var(--r); background: var(--soft-2); display: grid; gap: 8px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35); }
.step5 > .card { overflow: visible; }   /* у карточки Basecoat overflow: hidden — из-за него не работал sticky у строки «Выбрано N» */
.reason-list { margin: 8px 0; padding-left: 24px; }
progress { width: 200px; vertical-align: middle; }

/* Разбор аудита (AU-13): правила слева, выбранная группа справа; в рабочей колонке 1280 px таблице остаётся около 570 px */
.razbor { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px; align-items: start; }
.razbor > section { display: grid; gap: 12px; min-width: 0; }
@media (max-width: 1100px) { .razbor { grid-template-columns: minmax(0, 1fr); } }
.bulk-scope > form { display: contents; }   /* плашка выбора — потомок обёртки таблицы, а не отдельной формы: так `sticky` едет вдоль таблицы */

/* Правила (W-12, UX-6): схема сверху вниз слева, прокрутка только вертикальная; карточка шага справа на всю высоту экрана */
.pravila { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 28vw, 380px); gap: 16px; align-items: start; }
.pravila-scheme { overflow: auto; max-height: calc(100vh - 150px); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); }
.pravila-scheme svg { display: block; }
.pravila-scheme g[role="button"] { cursor: pointer; }
.pravila-scheme g[aria-pressed="true"] :is(rect, polygon) { stroke: var(--primary); stroke-width: 4; }
.pravila-scheme g:focus-visible { outline: 2px solid var(--primary); }
.pravila-card { position: sticky; top: 16px; height: calc(100vh - 32px); overflow: auto; display: grid; gap: 12px; align-content: start; padding-bottom: 60px; }   /* низ карточки прокручивается над углом экрана */
@media (max-width: 1100px) { .pravila { grid-template-columns: minmax(0, 1fr); } .pravila-card { position: static; height: auto; } }