/* ==========================================================================
   Articul Hunter — оформление дашборда.

   Ограничения проекта: внутренний контур, никаких CDN, шрифтов и библиотек
   извне. Только системный шрифтовой стек и локальные стили.

   Палитра статусов проверена валидатором доступности отдельно для светлой
   и тёмной темы (контраст к поверхности >= 3:1, различимость при дальтонизме),
   поэтому тёмная тема — не автоматическая инверсия, а отдельный набор шагов.
   Цвет нигде не является единственным носителем смысла: у каждого статуса
   есть текстовый бейдж.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Токены
   -------------------------------------------------------------------------- */

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "JetBrains Mono",
               Consolas, "Liberation Mono", "Courier New", monospace;

  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 18px;
  --r-full: 999px;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 22px; --sp-6: 30px; --sp-7: 42px;

  --topbar-h: 60px;
  --maxw: 1560px;

  --ease: cubic-bezier(.22, .61, .36, 1);

  /* ---- Светлая тема (значения по умолчанию) ---- */
  --bg:            #f4f5f9;
  --bg-grad-a:     #eef0f8;
  --bg-grad-b:     #f7f8fb;
  --surface:       #ffffff;
  --surface-2:     #f7f8fb;
  --surface-3:     #eef0f6;
  --surface-inset: #f2f4f9;
  --line:          #e2e6ef;
  --line-strong:   #ccd3e0;

  --ink:        #131722;
  --ink-2:      #4a5364;
  --ink-3:      #6f7889;
  --ink-mute:   #99a1b0;

  --accent:      #4f46e5;
  --accent-ink:  #4338ca;
  --accent-soft: #eceafd;
  --accent-line: #c9c4f7;
  --on-accent:   #ffffff;

  --ok:      #0d9488;
  --ok-ink:  #0f766e;
  --ok-soft: #dcf5f1;

  --warn:      #b45309;
  --warn-ink:  #92400e;
  --warn-soft: #fbeedd;

  --bad:      #e11d48;
  --bad-ink:  #be123c;
  --bad-soft: #fde8ee;

  --neutral:      #7b8496;
  --neutral-soft: #eceff5;

  --bar-track: #e9ecf3;

  --shadow-1: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  --shadow-2: 0 2px 6px rgba(16, 24, 40, .06), 0 12px 28px -12px rgba(16, 24, 40, .18);
  --shadow-3: 0 24px 64px -20px rgba(16, 24, 40, .35), 0 2px 8px rgba(16, 24, 40, .08);

  --focus: 0 0 0 3px color-mix(in srgb, var(--accent) 38%, transparent);
  --row-hover: #f5f6fb;
  --scrim: rgba(19, 23, 34, .42);
}

/* Тёмная тема «Графит»: собственный набор шагов, а не инверсия светлой.
   Выбрана пользователем 2026-08-15 из витрины в `Референс/` (там же лежат
   отвергнутые варианты и замеры контраста).

   Поверхности нейтральные, без синего подтона: цветные бейджи на сером
   читаются чище, чем на сине-сером. Два значения подняты по контрасту
   относительно прежней палитры — иначе они не проходили норму WCAG AA:
   `--ink-mute` (было 3.71, стало 4.54) и `--accent` под белой надписью
   кнопки (было 4.47, стало 4.51). Менять их «на глаз» нельзя: витрина
   считает эти коэффициенты и покажет просадку. */
:root[data-theme="dark"] {
  --bg:            #101114;
  --bg-grad-a:     #16171b;
  --bg-grad-b:     #0d0e11;
  --surface:       #17181d;
  --surface-2:     #1c1e24;
  --surface-3:     #23262e;
  --surface-inset: #121317;
  --line:          #292c34;
  --line-strong:   #3b3f4a;

  --ink:        #edeef2;
  --ink-2:      #b4b8c2;
  --ink-3:      #91959f;
  --ink-mute:   #7d818b;

  --accent:      #6d5efc;
  --accent-ink:  #b6adff;
  --accent-soft: #1d1a33;
  --accent-line: #37315f;
  --on-accent:   #ffffff;

  --ok:      #10b981;
  --ok-ink:  #6ee7c7;
  --ok-soft: #0f2a25;

  --warn:      #d08700;
  --warn-ink:  #fcd34d;
  --warn-soft: #2b2413;

  --bad:      #f4526b;
  --bad-ink:  #ffa8b6;
  --bad-soft: #331520;

  --neutral:      #83868f;
  --neutral-soft: #22242b;

  --bar-track: #23262e;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, .35), 0 14px 30px -14px rgba(0, 0, 0, .6);
  --shadow-3: 0 28px 70px -22px rgba(0, 0, 0, .8), 0 2px 10px rgba(0, 0, 0, .5);

  --row-hover: #1c1e24;
  --scrim: rgba(0, 0, 0, .64);
}

/* Системная тема, пока пользователь не выбрал вручную.
   Значения обязаны совпадать с блоком `[data-theme="dark"]` выше: это одна
   и та же палитра «Графит», просто включённая по системной настройке.
   Правите одно — правьте и второе, иначе «авто» и «тёмная» разойдутся. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg:            #101114;
    --bg-grad-a:     #16171b;
    --bg-grad-b:     #0d0e11;
    --surface:       #17181d;
    --surface-2:     #1c1e24;
    --surface-3:     #23262e;
    --surface-inset: #121317;
    --line:          #292c34;
    --line-strong:   #3b3f4a;

    --ink:        #edeef2;
    --ink-2:      #b4b8c2;
    --ink-3:      #91959f;
    --ink-mute:   #7d818b;

    --accent:      #6d5efc;
    --accent-ink:  #b6adff;
    --accent-soft: #1d1a33;
    --accent-line: #37315f;

    --ok:      #10b981;
    --ok-ink:  #6ee7c7;
    --ok-soft: #0f2a25;

    --warn:      #d08700;
    --warn-ink:  #fcd34d;
    --warn-soft: #2b2413;

    --bad:      #f4526b;
    --bad-ink:  #ffa8b6;
    --bad-soft: #331520;

    --neutral:      #83868f;
    --neutral-soft: #22242b;

    --bar-track: #23262e;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, .35), 0 14px 30px -14px rgba(0, 0, 0, .6);
    --shadow-3: 0 28px 70px -22px rgba(0, 0, 0, .8), 0 2px 10px rgba(0, 0, 0, .5);

    --row-hover: #1c1e24;
    --scrim: rgba(0, 0, 0, .64);
  }
}

/* --------------------------------------------------------------------------
   2. База
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* Атрибут `hidden` — единственный способ скрытия в этом интерфейсе.
   Правило обязательное: собственный `display` в классе (.drawer, .banner,
   .pager, .state — все они flex) перебивает `display:none` из стилей
   браузера, и скрытые блоки оказались бы видимыми. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  background-image:
    radial-gradient(1200px 520px at 12% -8%, var(--bg-grad-a), transparent 62%),
    radial-gradient(900px 460px at 92% -4%, var(--bg-grad-b), transparent 58%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: var(--accent-ink); text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }
a:hover { text-decoration-color: currentColor; }

button, input, select { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: -60px; left: var(--sp-4); z-index: 200;
  padding: 10px 16px; border-radius: var(--r-sm);
  background: var(--accent); color: var(--on-accent);
  text-decoration: none; font-weight: 600;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 12px; }

.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }

/* --------------------------------------------------------------------------
   3. Шапка
   -------------------------------------------------------------------------- */

.progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 90;
  /* overflow скрывает «бегунок» за краями окна: без него анимация
     translateX выносит блок за вьюпорт и появляется горизонтальная прокрутка. */
  overflow: hidden;
  background: transparent; pointer-events: none; opacity: 0;
  transition: opacity .2s var(--ease);
}
.progress.is-on { opacity: 1; }
.progress__bar {
  height: 100%; width: 34%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: slide 1.15s var(--ease) infinite;
}
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(360%); } }

.topbar {
  position: sticky; top: 0; z-index: 60;
  height: var(--topbar-h);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar__inner {
  max-width: var(--maxw); height: 100%; margin: 0 auto;
  padding: 0 var(--sp-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
}

.brand { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.brand__mark {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: 10px; color: var(--on-accent);
  background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 62%, #0ea5e9));
  box-shadow: var(--shadow-1);
}
.brand__text { display: flex; flex-direction: column; min-width: 0; }
.brand__title { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.brand__sub {
  font-size: 11.5px; color: var(--ink-3); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

.topbar__actions { display: flex; align-items: center; gap: var(--sp-2); }

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 12px; border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--ink-2); font-size: 12.5px; font-weight: 550;
  cursor: default; white-space: nowrap;
}
.pill--status .dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--neutral);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--neutral) 22%, transparent);
}
.pill--status.is-ok .dot { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.pill--status.is-bad .dot { background: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 22%, transparent); animation: pulse 1.8s infinite; }
@keyframes pulse { 50% { opacity: .35; } }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; flex: none;
  border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink-2);
  cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.icon-btn:hover:not(:disabled) { background: var(--surface-3); color: var(--ink); border-color: var(--line-strong); }
.icon-btn:disabled { opacity: .4; cursor: not-allowed; }
.icon-btn--mini { width: 26px; height: 26px; }
.icon-btn.is-spinning svg { animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Переключатель темы: тот же сегментированный контрол, что у фильтра франшиз,
   но кнопки — иконки. Выбранное положение видно всегда: это ответ на жалобу
   «тема не запоминается» — раньше циклическая кнопка не показывала выбор. */
.seg--icons .seg__btn {
  width: 28px; padding: 0;
  display: grid; place-items: center;
}
.seg--icons .seg__btn svg { pointer-events: none; }

/* --------------------------------------------------------------------------
   4. Баннеры и уведомления
   -------------------------------------------------------------------------- */

.banner {
  display: flex; align-items: center; gap: var(--sp-3);
  max-width: var(--maxw); margin: var(--sp-4) auto 0;
  padding: 11px var(--sp-4);
  border-radius: var(--r-md); font-size: 13px;
}
.banner--danger {
  color: var(--bad-ink); background: var(--bad-soft);
  border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent);
}
.banner svg { flex: none; }

.toasts {
  position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 120;
  display: flex; flex-direction: column; gap: var(--sp-2); max-width: 380px;
}
.toast {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  padding: 11px 14px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-2); font-size: 13px; color: var(--ink-2);
  animation: toast-in .22s var(--ease);
}
.toast--bad { border-color: color-mix(in srgb, var(--bad) 40%, transparent); color: var(--bad-ink); }
.toast--ok  { border-color: color-mix(in srgb, var(--ok) 40%, transparent); color: var(--ok-ink); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* --------------------------------------------------------------------------
   5. Панель периода
   -------------------------------------------------------------------------- */

.periodbar {
  position: sticky; top: var(--topbar-h); z-index: 50;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.periodbar__inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 11px var(--sp-5);
  /* gap 18, а не 22: описание периода должно оставаться в этой же строке,
     а не переноситься под неё. Разница в четыре пикселя между группами
     незаметна, а места даёт ровно столько, сколько не хватало. */
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.periodbar__dates { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.periodbar__label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-3);
  margin-right: var(--sp-1);
}
.periodbar__dash { color: var(--ink-mute); }
/* Подписи, которые уступают место описанию периода при сужении окна
   (см. медиазапросы в разделе адаптивности). Иконки и `title` остаются,
   поэтому ничего не становится непонятным. */
.label-text { display: inline; }
.chip__long { display: inline; }
.chip__short { display: none; }
.btn__ico { display: none; }
.periodbar__presets { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Описание выбранного периода — в одну строку с полями и фильтрами.
   Границы доступных данных в строку не влезают и живут подсказкой на самом
   описании: это справочная величина, а не то, что нужно читать постоянно. */
.periodbar__meta {
  margin-left: auto; display: flex; align-items: center; gap: var(--sp-2);
  min-width: 0;
}
.period-caption {
  font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap;
  padding: 5px 11px; border-radius: var(--r-full);
  background: var(--surface-2); border: 1px solid var(--line);
  cursor: default;
}

/* --- Глобальный фильтр франшиз ---
   Стоит в одной строке с периодом и всегда показывает активный режим:
   прятать его в выпадающий список нельзя. */
.scope { display: flex; align-items: center; gap: var(--sp-2); }
.scope::before {
  content: ""; align-self: stretch; width: 1px; flex: none;
  margin-right: var(--sp-2);
  background: var(--line);
}

.seg {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px; border-radius: var(--r-full);
  background: var(--surface-3); border: 1px solid var(--line);
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.seg__btn {
  height: 26px; padding: 0 12px;
  border: 0; border-radius: var(--r-full);
  background: transparent; color: var(--ink-2);
  font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
.seg__btn:hover { color: var(--ink); background: color-mix(in srgb, var(--surface) 65%, transparent); }
.seg__btn.is-active {
  background: var(--surface); color: var(--accent-ink);
  box-shadow: var(--shadow-1);
}
/* Режим, отличный от умолчания, подсвечиваем целиком: выборка сужена
   или расширена, и это не должно теряться среди прочих элементов. */
.scope.is-custom .seg { background: var(--accent-soft); border-color: var(--accent-line); }
.scope.is-custom .seg__btn.is-active { background: var(--surface); }

/* Метка активного режима там, где шапка не видна (вкладки, детализация). */
.scope-tag {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 11px; border-radius: var(--r-full);
  background: var(--accent-soft); color: var(--accent-ink);
  border: 1px solid var(--accent-line);
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.scope-tag svg { flex: none; }

.field { display: inline-flex; align-items: center; gap: 6px; }
.field__cap { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.field--inline .field__cap { font-weight: 500; }

.input {
  height: 32px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input:hover { border-color: var(--line-strong); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
/* Поле даты сужено с 140 до 98 px: 140 закладывались «на глаз», а дата в
   формате ДД.ММ.ГГГГ занимает меньше. Освободившиеся 84 px ушли на то,
   чтобы описание периода помещалось в ту же строку, а не падало под неё. */
.input--date {
  font-size: 13px; font-variant-numeric: tabular-nums;
  min-width: 98px; width: 98px;
  padding-left: 8px; padding-right: 4px;
}
.input--date::-webkit-calendar-picker-indicator { padding: 0 0 0 2px; margin-left: 0; }
.input--num { width: 68px; text-align: right; font-variant-numeric: tabular-nums; }
.input--select { padding-right: 6px; cursor: pointer; }
.input--search { width: 260px; padding-left: 32px; font-size: 13px; }
:root[data-theme="dark"] .input--date::-webkit-calendar-picker-indicator,
:root[data-theme="auto"] .input--date::-webkit-calendar-picker-indicator { filter: invert(.75); }
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] .input--date::-webkit-calendar-picker-indicator { filter: none; }
}

.search { position: relative; display: inline-flex; align-items: center; }
.search > svg { position: absolute; left: 10px; color: var(--ink-mute); pointer-events: none; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px;
  border-radius: var(--r-sm); border: 1px solid transparent;
  font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), transform .08s var(--ease);
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-1); }
.btn--primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 86%, #000); }
.btn--ghost { background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }
.btn--ghost:hover:not(:disabled) { background: var(--surface-3); color: var(--ink); border-color: var(--line-strong); }
.btn--danger { background: var(--bad); color: #fff; }
.btn--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--bad) 86%, #000); }

/* Кнопка выгрузки, пока сервер собирает книгу Excel: за весь период это
   до минуты, и молчаливой паузы быть не должно. Кнопка не переводится
   в `disabled` — фокус клавиатуры остаётся на месте, повторный клик
   отсекается флагом data-busy в app.js. */
.btn[aria-busy="true"] { cursor: progress; color: var(--ink-mute); }
.btn[aria-busy="true"]:hover { background: var(--surface-2); border-color: var(--line); color: var(--ink-mute); }
.btn .spinner { width: 12px; height: 12px; border-width: 2px; }

.chip {
  height: 30px; padding: 0 12px;
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: var(--r-full); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2);
  font-size: 12.5px; font-weight: 550; cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.chip:hover { background: var(--surface-3); color: var(--ink); border-color: var(--line-strong); }
.chip.is-active {
  background: var(--accent-soft); color: var(--accent-ink);
  border-color: var(--accent-line);
}
.chip--heavy { color: var(--warn-ink); border-color: color-mix(in srgb, var(--warn) 34%, var(--line)); }
.chip--heavy:hover { background: var(--warn-soft); color: var(--warn-ink); }
.chip--heavy.is-active { background: var(--warn-soft); color: var(--warn-ink); border-color: color-mix(in srgb, var(--warn) 48%, transparent); }

.heavy-warn {
  max-width: var(--maxw); margin: 0 auto;
  padding: 12px var(--sp-5) 14px;
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  border-top: 1px solid color-mix(in srgb, var(--warn) 28%, transparent);
  background: var(--warn-soft); color: var(--warn-ink);
  font-size: 13px;
}
.heavy-warn__body { flex: 1 1 420px; }
.heavy-warn__body b { font-weight: 700; }
.heavy-warn__actions { display: flex; gap: var(--sp-2); margin-left: auto; }

.running {
  max-width: var(--maxw); margin: 0 auto;
  padding: 8px var(--sp-5) 10px;
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 12.5px; color: var(--ink-2);
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.spinner {
  width: 13px; height: 13px; flex: none; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-top-color: var(--accent);
  animation: spin .75s linear infinite;
}

/* --------------------------------------------------------------------------
   6. Сводка
   -------------------------------------------------------------------------- */

.main { max-width: var(--maxw); margin: 0 auto; padding: var(--sp-5) var(--sp-5) var(--sp-7); }

/* Hero-карточка шире прежнего: в ней теперь строка из трёх плашек
   разбивки, и при 1.15fr их подписи упирались друг в друга. */
.summary {
  display: grid; gap: var(--sp-3);
  grid-template-columns: minmax(360px, 1.5fr) minmax(0, 2.2fr);
  margin-bottom: var(--sp-5);
}
/* Правая колонка: плитки тянутся, сноска — по содержимому. Вместе они
   добирают высоту hero-карточки, поэтому лишнего воздуха в плитках нет. */
.summary__right {
  display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--sp-3);
  min-width: 0;
}
.summary__grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}
/* Шесть карточек ложатся сеткой 3×2: при автоподборе колонок шестая
   карточка уезжала в отдельный ряд одна и ломала ритм сетки. */
@media (min-width: 621px) {
  .summary__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Сноска о наборе строк: тихая, но всегда на виду под карточками. */
.scope-note {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 13px; border-radius: var(--r-md);
  font-size: 12px; line-height: 1.45; color: var(--ink-3);
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
}
.scope-note svg { flex: none; margin-top: 2px; color: var(--ink-mute); }
.scope-note b { color: var(--ink-2); font-weight: 650; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--shadow-1);
}
/* Плитка сводки: подпись строкой, под ней значение и пояснение рядом,
   а не тремя строками друг под другом. В плитке три коротких значения —
   вертикальная раскладка оставляла её наполовину пустой. Содержимое
   центрировано по высоте: плитки тянутся под высоту hero-карточки. */
.summary__grid .card {
  display: grid; align-content: center;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--sp-3); row-gap: 2px;
}
.summary__grid .card__cap { grid-column: 1 / -1; }
.summary__grid .card__value { grid-column: 1; }
.summary__grid .card__note { grid-column: 2; align-self: end; text-align: right; margin-top: 0; }
.card__cap {
  font-size: 11.5px; font-weight: 600; color: var(--ink-3);
  letter-spacing: .01em; margin-bottom: 4px;
}
.card__value {
  font-size: 22px; font-weight: 660; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.card__note { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; line-height: 1.35; }

/* Сетка, а не флекс: числа и кольцо стоят рядом, а полосы сравнения
   занимают всю ширину карточки под ними. */
.card--hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: var(--sp-4);
  background:
    linear-gradient(140deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface) 62%);
  border-color: var(--accent-line);
}
.hero__left { min-width: 0; }
.hero__value {
  font-size: 40px; font-weight: 700; letter-spacing: -.035em; line-height: 1.02;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.hero__value .unit { font-size: 21px; font-weight: 600; color: var(--ink-3); margin-left: 2px; }
.hero__sub { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }
/* Три плашки разбивки стоят строкой во всю ширину карточки и делят её
   поровну: рядом с кольцом они не помещались и вставали столбиком. */
.hero__split {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2); margin-top: var(--sp-1);
}
/* Ниже 1340 px три плашки в строку уже не помещаются без обрезки подписей
   («Лишних написаний» — самая длинная), там сетка раскладывает их на два ряда. */
@media (max-width: 1339px) {
  .hero__split { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
}
/* В двухколоночном раскладе (узкая hero-карточка рядом с плитками) третья
   плашка — «Лишних написаний», итог по двум предыдущим — ложится широкой
   строкой снизу, а не половинкой с дырой рядом. Ниже 1240 px карточка
   занимает всю ширину, и все три снова встают в ряд. */
@media (max-width: 1339px) and (min-width: 1241px) {
  .hero__split li:last-child { grid-column: 1 / -1; }
}
.hero__split li {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  min-width: 0;
  padding: 5px 9px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  border: 1px solid var(--line);
  font-size: 12px; color: var(--ink-3);
}
/* Бейдж внутри плашки мельче обычного: рядом с ним стоит число, и вместе
   они должны укладываться в треть ширины карточки. */
.hero__split .badge {
  height: 18px; padding: 0 7px; font-size: 10.5px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.hero__split b { font-size: 14px; font-weight: 660; color: var(--ink); font-variant-numeric: tabular-nums; }
.hero__right { flex: none; }

/* Сравнение доли разночтений по режимам франшиз: три тонкие полосы,
   активный режим выделен, остальные кликабельны. */
/* Занимает всю ширину карточки: рядом с кольцевым индикатором полосам
   не хватало места и сравнение читалось хуже самих чисел. */
.compare { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: var(--sp-2); }
.compare__cap { font-size: 11px; font-weight: 600; color: var(--ink-3); margin-bottom: 5px; }
.compare__list { display: flex; flex-direction: column; gap: 3px; }
.compare__row {
  width: 100%; display: grid; align-items: center; gap: var(--sp-2);
  grid-template-columns: 8.4rem minmax(40px, 1fr) 4rem;
  padding: 3px 6px; border: 0; border-radius: var(--r-sm);
  background: none; text-align: left; cursor: pointer;
  transition: background .15s var(--ease);
}
.compare__row:hover { background: var(--row-hover); }
.compare__row .lab {
  font-size: 11.5px; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.compare__row .bar { height: 6px; border-radius: 3px; background: var(--bar-track); overflow: hidden; }
.compare__row .bar > span { display: block; height: 100%; border-radius: 3px; background: var(--neutral); }
.compare__row .pct {
  font-size: 11.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
.compare__row.is-active .lab,
.compare__row.is-active .pct { color: var(--ink); font-weight: 650; }
.compare__row.is-active .bar > span { background: var(--accent); }

.gauge { width: 104px; height: 104px; display: block; }
.gauge__track { fill: none; stroke: var(--bar-track); stroke-width: 11; }
.gauge__value { fill: none; stroke: var(--accent); stroke-width: 11; transition: stroke-dasharray .7s var(--ease); }
.gauge__label { fill: var(--ink); font-size: 25px; font-weight: 700; font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.gauge__unit  { fill: var(--ink-mute); font-size: 10.5px; font-family: var(--font-sans); }

/* --------------------------------------------------------------------------
   7. Вкладки и панели
   -------------------------------------------------------------------------- */

.tabs {
  display: flex; gap: var(--sp-1); margin-bottom: calc(-1 * var(--sp-1));
  padding-bottom: var(--sp-3);
}
.tab {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 15px;
  border-radius: var(--r-md); border: 1px solid transparent;
  background: transparent; color: var(--ink-3);
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.tab:hover { color: var(--ink); background: var(--surface-2); }
.tab.is-active {
  background: var(--surface); color: var(--ink);
  border-color: var(--line); box-shadow: var(--shadow-1);
}
.tab__count {
  font-size: 11.5px; font-weight: 650; padding: 1px 7px; border-radius: var(--r-full);
  background: var(--surface-3); color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.tab.is-active .tab__count { background: var(--accent-soft); color: var(--accent-ink); }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.panel__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.panel__title h2 { font-size: 16px; font-weight: 650; letter-spacing: -.015em; }
.panel__hint { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.panel__tools { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

.toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle__box {
  width: 34px; height: 19px; flex: none; border-radius: var(--r-full);
  background: var(--surface-3); border: 1px solid var(--line);
  position: relative; transition: background .18s var(--ease), border-color .18s var(--ease);
}
.toggle__box::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--shadow-1);
  transition: transform .18s var(--ease);
}
.toggle input:checked + .toggle__box { background: var(--accent); border-color: var(--accent); }
.toggle input:checked + .toggle__box::after { transform: translateX(15px); background: #fff; }
.toggle input:focus-visible + .toggle__box { box-shadow: var(--focus); }
.toggle__text { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }

/* --------------------------------------------------------------------------
   8. Таблицы
   -------------------------------------------------------------------------- */

.table-wrap { overflow-x: auto; }

.grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }

/* Заголовки не sticky: обёртка таблицы сама является контейнером прокрутки
   по горизонтали, поэтому «липкость» относительно окна тут не работает
   и давала бы только рассинхрон с плавающей панелью периода. */
.grid thead th {
  background: var(--surface-2);
  padding: 9px var(--sp-3);
  text-align: left; font-size: 11.5px; font-weight: 620;
  color: var(--ink-3); letter-spacing: .015em; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.grid thead th.num { text-align: right; }
.grid thead th:first-child { padding-left: var(--sp-5); }
.grid thead th:last-child  { padding-right: var(--sp-5); }

.th-sort { cursor: pointer; user-select: none; }
.th-sort:hover { color: var(--ink); background: var(--surface-3); }
.th-sort::after {
  content: "↕"; margin-left: 5px; opacity: .3; font-size: 10px;
}
.th-sort[aria-sort="ascending"]::after  { content: "↑"; opacity: 1; color: var(--accent-ink); }
.th-sort[aria-sort="descending"]::after { content: "↓"; opacity: 1; color: var(--accent-ink); }
.th-chevron { width: 34px; }

.grid tbody td {
  padding: 9px var(--sp-3);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.grid tbody td:first-child { padding-left: var(--sp-5); }
.grid tbody td:last-child  { padding-right: var(--sp-5); }
.grid tbody tr:last-child td { border-bottom: none; }

.grid tbody tr.row-click { cursor: pointer; transition: background .12s var(--ease); }
.grid tbody tr.row-click:hover { background: var(--row-hover); }
.grid tbody tr.row-click:hover .chev { color: var(--accent); transform: translateX(2px); }
.grid tbody tr[data-source-code] { cursor: pointer; transition: background .12s var(--ease); }
.grid tbody tr[data-source-code]:hover { background: var(--row-hover); }
.grid tbody tr.is-open { background: var(--accent-soft); }

.chev { color: var(--ink-mute); display: block; transition: transform .15s var(--ease), color .15s var(--ease); }

.cell-article {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 600;
  color: var(--ink); letter-spacing: -.01em;
}
.cell-article .art-btn {
  border: 0; background: none; padding: 0; font: inherit; color: inherit;
  cursor: pointer; text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-underline-offset: 3px;
}
.cell-article .art-btn:hover { color: var(--accent-ink); }

.cell-name {
  max-width: 34rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink);
}
.cell-sub { display: block; font-size: 11.5px; color: var(--ink-mute); margin-top: 1px; }

/* Полоска доли внутри ячейки: магнитуда, один тон, скруглённый конец. */
.meter { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.meter__track {
  width: 56px; height: 6px; flex: none; border-radius: 3px;
  background: var(--bar-track); overflow: hidden;
}
.meter__fill { height: 100%; border-radius: 3px; background: var(--accent); display: block; }
.meter__fill.is-bad { background: var(--bad); }
.meter__fill.is-warn { background: var(--warn); }
.meter__fill.is-ok { background: var(--ok); }
.meter__num { font-variant-numeric: tabular-nums; min-width: 3.6em; text-align: right; }

.source-detail > td {
  padding: 0 var(--sp-5) var(--sp-4);
  background: var(--accent-soft);
}
.source-detail__box {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.source-detail__title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
}
.source-detail__hint {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--ink-mute);
}
.source-detail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.source-detail__tools {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.source-detail__tools .search { min-width: min(24rem, 100%); }
.source-detail__tools .input--num { width: 4.2rem; }
.source-detail__pager {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  color: var(--ink-3);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.source-detail__range { color: var(--ink-mute); }
.source-detail__page {
  min-width: 3.8rem;
  text-align: center;
  color: var(--ink-2);
}
.mini-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.source-detail .mini-grid th,
.source-detail .mini-grid td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  background: transparent;
}
.source-detail .mini-grid th {
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}
.source-detail .mini-grid th:first-child,
.source-detail .mini-grid td:first-child { padding-left: 8px; }
.source-detail .mini-grid th:last-child,
.source-detail .mini-grid td:last-child { padding-right: 8px; }
.source-detail .mini-grid th.num,
.source-detail .mini-grid td.num { text-align: right; }
.source-detail .mini-grid tbody tr:last-child td { border-bottom: 0; }
.source-detail .mini-grid--articles tbody tr {
  cursor: pointer;
  transition: background .12s var(--ease);
}
.source-detail .mini-grid--articles tbody tr:hover { background: var(--row-hover); }
.source-detail .mini-grid--articles tbody tr:hover .chev { color: var(--accent); transform: translateX(2px); }
.linklike {
  border: 0;
  padding: 0;
  background: none;
  color: var(--accent-ink);
  font: inherit;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 38%, transparent);
  text-underline-offset: 3px;
}
.linklike:hover { text-decoration-color: currentColor; }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 8px; border-radius: var(--r-full);
  font-size: 11px; font-weight: 620; white-space: nowrap;
  border: 1px solid transparent;
}
.badge--ok      { background: var(--ok-soft);      color: var(--ok-ink);      border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.badge--warn    { background: var(--warn-soft);    color: var(--warn-ink);    border-color: color-mix(in srgb, var(--warn) 32%, transparent); }
.badge--bad     { background: var(--bad-soft);     color: var(--bad-ink);     border-color: color-mix(in srgb, var(--bad) 30%, transparent); }
.badge--accent  { background: var(--accent-soft);  color: var(--accent-ink);  border-color: var(--accent-line); }
.badge--neutral { background: var(--neutral-soft); color: var(--ink-2);       border-color: var(--line); }
.badge--ghost   { background: transparent;         color: var(--ink-mute);    border-color: var(--line); }

.badge svg { flex: none; }

/* --------------------------------------------------------------------------
   9. Состояния: скелетоны, пусто, ошибка
   -------------------------------------------------------------------------- */

.skel {
  display: inline-block; border-radius: var(--r-xs);
  background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 37%, var(--surface-3) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  color: transparent !important;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.skel--xl { width: 5.5rem; height: 2.6rem; }
.skel--sm { width: 9rem; height: .85rem; }
.skel-line { display: block; height: .82rem; border-radius: var(--r-xs); }

@media (prefers-reduced-motion: reduce) {
  .skel, .progress__bar, .spinner, .icon-btn.is-spinning svg { animation: none; }
  * { transition-duration: .01ms !important; }
}

.state {
  padding: var(--sp-7) var(--sp-5);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  text-align: center;
}
.state__ico {
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 50%; background: var(--surface-3); color: var(--ink-mute);
}
.state--error .state__ico { background: var(--bad-soft); color: var(--bad-ink); }
.state__title { font-size: 15px; font-weight: 620; color: var(--ink); }
.state__text { font-size: 13px; color: var(--ink-3); max-width: 44ch; }

/* --------------------------------------------------------------------------
   10. Пагинация и подвал
   -------------------------------------------------------------------------- */

.pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  padding: 11px var(--sp-5);
  border-top: 1px solid var(--line); background: var(--surface-2);
}
.pager__info { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pager__ctrl { display: flex; align-items: center; gap: var(--sp-2); }
.pager__page { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; min-width: 6.5rem; text-align: center; }

.foot {
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  margin-top: var(--sp-5); font-size: 12px; color: var(--ink-mute);
}
.foot__dot { opacity: .6; }

/* --------------------------------------------------------------------------
   11. Детализация: панель drill-down
   -------------------------------------------------------------------------- */

.drawer-scrim {
  position: fixed; inset: 0; z-index: 95;
  background: var(--scrim);
  backdrop-filter: blur(2px);
  animation: fade .2s var(--ease);
}
@keyframes fade { from { opacity: 0; } }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
  width: min(1060px, 94vw);
  display: flex; flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-3);
  animation: drawer-in .26s var(--ease);
}
@keyframes drawer-in { from { transform: translateX(28px); opacity: .4; } }

.drawer__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  flex: none;
}
.drawer__body { overflow-y: auto; overflow-x: hidden; flex: 1; padding: var(--sp-5); }

.crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; min-width: 0; }
.crumbs button {
  border: 0; background: none; padding: 2px 4px; border-radius: var(--r-xs);
  color: var(--accent-ink); font: inherit; font-weight: 600; cursor: pointer;
}
.crumbs button:hover { background: var(--accent-soft); }
.crumbs .sep { color: var(--ink-mute); }
.crumbs .cur {
  color: var(--ink-2); font-weight: 600; max-width: 44ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.dhead { margin-bottom: var(--sp-5); }
.dhead__top { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: 6px; }
.dhead__art {
  font-family: var(--font-mono); font-size: 21px; font-weight: 680;
  letter-spacing: -.02em; color: var(--ink);
}
.dhead__ref {
  font-size: 14px; color: var(--ink-2);
  display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  max-width: 100%;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 7%, transparent);
}
.dhead__ref .val { font-family: var(--font-mono); font-size: 13px; color: var(--ink); }
:root[data-theme="dark"] .dhead__ref {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent),
              0 0 0 3px color-mix(in srgb, var(--accent) 7%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .dhead__ref {
    border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
    background: color-mix(in srgb, var(--accent) 16%, var(--surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent),
                0 0 0 3px color-mix(in srgb, var(--accent) 7%, transparent);
  }
}
/* Эталон считается по отфильтрованной выборке, поэтому в разных режимах
   франшиз он законно разный — об этом говорит эта строка. */
.dhead__scope { font-size: 11.5px; color: var(--ink-mute); margin-top: 5px; max-width: 68ch; }

.stat-row {
  display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  margin-top: var(--sp-4);
}
.stat {
  background: var(--surface-inset); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 9px 12px;
}
.stat__cap { font-size: 11px; color: var(--ink-3); font-weight: 550; }
.stat__val {
  font-size: 18px; font-weight: 660; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; margin-top: 1px;
}
.stat__val.is-bad { color: var(--bad-ink); }
.stat__val.is-ok  { color: var(--ok-ink); }

.section-cap {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  flex-wrap: wrap; margin: var(--sp-5) 0 var(--sp-3);
}
.section-cap h3 { font-size: 14px; font-weight: 650; letter-spacing: -.01em; }
.section-cap .sub { font-size: 12px; color: var(--ink-3); font-weight: 400; margin-left: 8px; }

/* --- Список написаний --- */

.variants { display: flex; flex-direction: column; gap: 7px; }

.variant {
  width: 100%; text-align: left;
  display: grid; gap: 4px var(--sp-4);
  grid-template-columns: 1fr auto;
  padding: 11px var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease);
}
.variant:hover { border-color: var(--accent-line); background: var(--row-hover); box-shadow: var(--shadow-1); }
.variant.is-ref { border-left: 3px solid var(--ok); }
.variant.is-cosmetic { border-left: 3px solid var(--warn); }
.variant.is-semantic { border-left: 3px solid var(--bad); }

.variant__name { font-family: var(--font-mono); font-size: 13px; color: var(--ink); word-break: break-word; line-height: 1.45; }
.variant__right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; white-space: nowrap; }
.variant__cases { font-size: 14px; font-weight: 660; font-variant-numeric: tabular-nums; }
.variant__share { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.variant__meta {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  font-size: 11.5px; color: var(--ink-3); margin-top: 2px;
}
.variant__meta .badges { display: flex; gap: 5px; flex-wrap: wrap; }
.variant__bar {
  grid-column: 1 / -1; height: 5px; border-radius: 3px;
  background: var(--bar-track); overflow: hidden; margin-top: 5px;
}
.variant__bar > span { display: block; height: 100%; border-radius: 3px; }
.variant.is-ref .variant__bar > span { background: var(--ok); }
.variant.is-cosmetic .variant__bar > span { background: var(--warn); }
.variant.is-semantic .variant__bar > span { background: var(--bad); }

/* Видимые пробелы: частая причина «разных» написаний. */
.ws {
  display: inline-block; color: var(--bad-ink);
  background: color-mix(in srgb, var(--bad) 15%, transparent);
  border-radius: 3px; padding: 0 1px; font-weight: 700;
  letter-spacing: .05em;
}
.ws--inner { color: var(--warn-ink); background: color-mix(in srgb, var(--warn) 18%, transparent); }

/* --- Трассировка --- */

.trace-head {
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--accent-line); border-radius: var(--r-lg);
  background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 8%, var(--surface)), var(--surface) 66%);
  margin-bottom: var(--sp-4);
}
.trace-head__cap { font-size: 11.5px; font-weight: 600; color: var(--ink-3); margin-bottom: 5px; }
.trace-head__name {
  font-family: var(--font-mono); font-size: 17px; font-weight: 620;
  color: var(--ink); word-break: break-word; line-height: 1.4;
}
.trace-head__badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--sp-3); }

/* Долевая полоса «Front / RMS»: две категории, зазор 2px между сегментами. */
.split-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; margin-top: var(--sp-3); background: var(--bar-track); }
.split-bar > span { display: block; height: 100%; }
.split-bar .seg-front { background: var(--accent); }
.split-bar .seg-rms   { background: var(--ok); }
.split-legend { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: 7px; font-size: 11.5px; color: var(--ink-3); }
.split-legend li { display: flex; align-items: center; gap: 6px; }
.split-legend .key { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.split-legend .key-front { background: var(--accent); }
.split-legend .key-rms { background: var(--ok); }
.split-legend b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 620; }

.trace-tools { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }

.trace-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.trace-table thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--surface-2); padding: 8px 10px;
  text-align: left; font-size: 11px; font-weight: 620; color: var(--ink-3);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.trace-table thead th.num { text-align: right; }
.trace-table tbody td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.trace-table tbody td.num { white-space: nowrap; }
.trace-table tbody tr:hover { background: var(--row-hover); }
.trace-table tbody tr:last-child td { border-bottom: none; }
.trace-table .t-src { white-space: nowrap; }
.trace-table .t-rms { min-width: 9rem; color: var(--ink); }
/* Хост RMS — техническая деталь: даём ему фиксированную ширину и многоточие,
   иначе длинная строка вида rms138-chmz-voroneg2.iiko.it:443 растягивает
   колонку и выталкивает «Период появления» за край панели. */
.trace-table .t-rms .host {
  display: block; width: 10.5rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 11px; color: var(--ink-mute); font-family: var(--font-mono);
}
.trace-table .t-addr { min-width: 12rem; color: var(--ink); }
.trace-table .meter__track { width: 44px; }
.trace-table .t-addr .pid { font-size: 11px; color: var(--ink-mute); }
.trace-table .t-period { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink-3); font-size: 11.5px; }

.trace-wrap {
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: auto;
  max-height: none; background: var(--surface);
}

.note {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 9px 12px; margin-top: var(--sp-3);
  border-radius: var(--r-sm); font-size: 12px;
  background: var(--warn-soft); color: var(--warn-ink);
  border: 1px solid color-mix(in srgb, var(--warn) 28%, transparent);
}
.note svg { flex: none; margin-top: 1px; }

/* --------------------------------------------------------------------------
   12. Описание обозначений

   Отдельное окно, а не панель drill-down: справку открывают поверх любой
   работы, в том числе поверх открытой детализации, поэтому z-index выше
   и своя затемняющая подложка.
   -------------------------------------------------------------------------- */

.pill--help { cursor: pointer; transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }
.pill--help:hover { background: var(--surface-3); color: var(--ink); border-color: var(--line-strong); }
.pill--help svg { color: var(--accent-ink); flex: none; }

.help-scrim {
  position: fixed; inset: 0; z-index: 130;
  background: var(--scrim); backdrop-filter: blur(2px);
  animation: fade .2s var(--ease);
}

.help {
  position: fixed; z-index: 140;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(920px, 94vw); max-height: min(88vh, 940px);
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  animation: help-in .22s var(--ease);
}
@keyframes help-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); } }

.help__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  flex: none;
}
.help__head h2 { font-size: 17px; font-weight: 660; letter-spacing: -.01em; }
.help__sub { font-size: 12.5px; color: var(--ink-mute); margin-top: 2px; }

.help__body { overflow-y: auto; padding: var(--sp-5); scroll-behavior: smooth; }

.help__toc {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding-bottom: var(--sp-4); margin-bottom: var(--sp-5);
  border-bottom: 1px dashed var(--line);
}
.help__toc a {
  padding: 4px 10px; border-radius: var(--r-full);
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--ink-2); font-size: 12px; font-weight: 550; text-decoration: none;
}
.help__toc a:hover { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-line); }

.help__sec { margin-bottom: var(--sp-6); scroll-margin-top: var(--sp-3); }
.help__sec:last-child { margin-bottom: 0; }
.help__sec h3 {
  font-size: 15.5px; font-weight: 650; letter-spacing: -.01em;
  margin-bottom: var(--sp-3);
  padding-left: 10px; border-left: 3px solid var(--accent);
}
.help__sec h4 { font-size: 13px; font-weight: 640; color: var(--ink-2); margin: var(--sp-4) 0 var(--sp-2); }
.help__sec p { font-size: 13.5px; color: var(--ink-2); line-height: 1.62; margin-bottom: var(--sp-3); }
.help__sec p:last-child { margin-bottom: 0; }
.help__sec b { color: var(--ink); font-weight: 620; }
.help__sec code {
  font-family: var(--font-mono); font-size: 12px;
  padding: 1px 5px; border-radius: var(--r-xs);
  background: var(--surface-inset); border: 1px solid var(--line);
}

.help__list, .help__steps { margin: 0 0 var(--sp-3) 18px; }
.help__list li, .help__steps li {
  font-size: 13.5px; color: var(--ink-2); line-height: 1.6; margin-bottom: 7px;
}
.help__steps li::marker { color: var(--accent-ink); font-weight: 700; }

/* Две карточки «косметика против содержательного»: разница должна читаться
   до чтения текста, поэтому цвет тот же, что у бейджей в таблицах. */
.help__cards {
  display: grid; gap: var(--sp-3); margin-bottom: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.help__card {
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  background: var(--surface-inset); border: 1px solid var(--line);
}
.help__card p { font-size: 12.5px; margin: 7px 0 0; }
.help__card--warn { border-color: color-mix(in srgb, var(--warn) 32%, transparent); }
.help__card--bad  { border-color: color-mix(in srgb, var(--bad) 30%, transparent); }

.help__ex {
  margin: var(--sp-3) 0 var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden;
}
.help__ex-cap {
  padding: 7px 12px; font-size: 11.5px; font-weight: 600;
  color: var(--ink-3); background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.help__tbl { width: 100%; border-collapse: collapse; }
.help__tbl th {
  text-align: left; font-size: 11px; font-weight: 600; color: var(--ink-3);
  padding: 7px 12px; border-bottom: 1px solid var(--line);
}
.help__tbl td {
  padding: 8px 12px; font-size: 12.5px; color: var(--ink-2);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.help__tbl tr:last-child td { border-bottom: 0; }
.help__name { font-family: var(--font-mono); font-size: 12px; color: var(--ink); }
.help__mode { color: var(--ink-3); white-space: nowrap; }
.help__dim { color: var(--ink-mute); }
.help__total td { background: var(--surface-2); font-weight: 600; }
/* Пары «эталон → второе написание»: колонка разницы уже остальных. */
.help__tbl--pairs td:last-child, .help__tbl--pairs th:last-child { color: var(--ink-mute); width: 34%; }

.help__formula {
  font-family: var(--font-mono); font-size: 12.5px;
  padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--surface-inset); border: 1px solid var(--line);
  color: var(--ink) !important;
}

.help__dl { margin: 0; }
.help__dl dt {
  font-size: 13px; font-weight: 640; color: var(--ink);
  margin-top: var(--sp-3);
}
.help__dl dt:first-child { margin-top: 0; }
.help__dl dd { margin: 3px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.help__dl--tight dt { margin-top: var(--sp-2); }

.help__note {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--surface-inset); border: 1px solid var(--line);
  font-size: 12.5px !important;
}

/* --------------------------------------------------------------------------
   13. Адаптивность
   -------------------------------------------------------------------------- */

@media (max-width: 1400px) {
  .input--search { width: 210px; }
}

/* Описание периода обязано оставаться в строке с полями и фильтрами.
   По мере сужения окна место под него освобождают подписи групп: они
   дублируют то, что и так видно (даты в полях, режимы на кнопках).
   Иконки и `aria-label` остаются, поэтому смысл не теряется.

   Ниже ~1330 px в строку уже не помещается ничего лишнего — там описание
   честно переносится на вторую строку, это не считается дефектом. */
@media (max-width: 1499px) {
  .scope .label-text { display: none; }
  .scope .periodbar__label { margin-right: 0; }
}
@media (max-width: 1399px) {
  .periodbar__dates .label-text { display: none; }
  .periodbar__dates .periodbar__label { margin-right: 0; }
  .periodbar__inner { gap: 14px; }
  /* Без фона-чипа описание занимает на 22 px меньше — ровно столько
     не хватало, чтобы оно осталось в строке на 1366 px. */
  .period-caption { padding: 0; background: none; border: 0; }
}
/* 1280 и подобные: пресеты переходят на короткие подписи («7 д»),
   это освобождает ещё около 110 px. */
@media (max-width: 1339px) {
  .chip__long { display: none; }
  .chip__short { display: inline; }
}
/* Последний резерв перед тем, как описание всё-таки уйдёт на вторую
   строку: кнопка применения периода сжимается до галочки. */
@media (max-width: 1239px) {
  #apply-period .btn__text { display: none; }
  #apply-period .btn__ico { display: block; }
  #apply-period { padding: 0 10px; }
  .periodbar__inner { gap: 12px; }
  .scope::before { margin-right: 0; }
  /* Подписи «с» и «по» у полей: тире между полями говорит то же самое. */
  .periodbar__dates .field__cap { display: none; }
  .scope .seg__btn { padding: 0 9px; }
}

@media (max-width: 1240px) {
  .summary { grid-template-columns: 1fr; }
}
/* Ниже 1100 px строка объективно кончилась: описание встаёт отдельной
   строкой слева. Выше — оно держится справа в одной строке с фильтрами
   (правило `width: 100%` здесь раньше принудительно ломало строку). */
@media (max-width: 1099px) {
  .periodbar__meta { margin-left: 0; width: 100%; }
}

@media (max-width: 900px) {
  .main { padding: var(--sp-4) var(--sp-3) var(--sp-6); }
  .topbar__inner, .periodbar__inner, .heavy-warn, .running { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .banner { margin-left: var(--sp-3); margin-right: var(--sp-3); }
  .brand__sub { display: none; }
  .grid thead th:first-child, .grid tbody td:first-child { padding-left: var(--sp-3); }
  .grid thead th:last-child, .grid tbody td:last-child { padding-right: var(--sp-3); }
  .panel__head, .pager { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .drawer { width: 100vw; border-left: none; }
  .drawer__body { padding: var(--sp-4) var(--sp-3); }
  .card--hero { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .hero__right { justify-self: center; }
  /* `justify-items: start` сжимает элементы карточки до содержимого — для
     текста это правильно, а для плашек разбивки и полос сравнения нет:
     они должны занимать всю ширину, иначе встают столбиком в углу. */
  .hero__split, .compare { justify-self: stretch; width: 100%; }
  .input--search { width: 100%; }
  .search { width: 100%; }
  .source-detail__head { align-items: flex-start; flex-direction: column; }
  .source-detail__pager { width: 100%; justify-content: flex-start; }
  .grid thead th { position: static; }
  /* Справка на узком экране — во весь экран: таблицы примеров иначе не читаются. */
  .help {
    width: 100vw; max-height: 100vh; height: 100%;
    top: 0; left: 0; transform: none; border-radius: 0; border: none;
  }
  .help__head { border-radius: 0; }
  .help__body { padding: var(--sp-4) var(--sp-3); }
  @keyframes help-in { from { opacity: 0; transform: translateY(12px); } }
}

@media (max-width: 900px) {
  /* Переключатель франшиз переезжает на свою строку — вертикальный
     разделитель рядом с периодом там уже ничего не разделяет. */
  .scope::before { display: none; }
  .scope { width: 100%; }
}

@media (max-width: 620px) {
  .periodbar__dates { width: 100%; }
  .seg { width: 100%; }
  .seg__btn { flex: 1; padding: 0 6px; }
  /* Переключатель темы живёт в шапке и на всю ширину не тянется. */
  .seg--icons { width: auto; }
  .seg--icons .seg__btn { flex: none; padding: 0; }
  .compare__row { grid-template-columns: 7.2rem minmax(30px, 1fr) 3.6rem; }
  .input--date { min-width: 0; flex: 1; }
  .summary__grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .hero__value { font-size: 38px; }
}

/* Печать: только данные. */
@media print {
  .topbar, .periodbar, .tabs, .pager, .drawer-scrim, .panel__tools, .foot,
  .help, .help-scrim { display: none !important; }
  body { background: #fff; }
  .panel, .card { box-shadow: none; border-color: #ccc; }
}