/*
 * Bark design tokens — exact values shipped in barkone (https://lk.nozhmaster.ru/).
 * Version: 6.34.0
 *
 * Two layers:
 *   1. Canonical names  (--accent, --ink, --bad …) — copy/paste straight into a product;
 *      these are the variables the live cabinet reads at runtime.
 *   2. --bark-* aliases — portable, namespaced names for kits that prefer a prefix.
 *      They point at the canonical layer, so the two never drift.
 *
 * Regions between "@generated" markers are built from tokens/brand.tokens.json by
 * `npm run build:tokens` — edit the tokens, not the generated CSS.
 */
:root {
  /* @generated:root start */
  /* fonts */
  --sans: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --logo-font: "Red Hat Display", system-ui, sans-serif;

  /* brand */
  --accent: #0b7580;
  --banner: #16386e; /* deep-blue hero / banner gradient base */

  /* neutrals & surfaces */
  --bg: #eef0f4;
  --surface: #ffffff;
  --surface-2: #f7f8fb;
  --surface-pop: #ffffff;
  --ink: #14181f;
  --ink2: #3a4150;
  --muted: #5f6675;
  --faint: #626a7a;
  --line: #e6e8ee;
  --line-2: #eef0f4;
  --line-control: #7984a4;
  --field: #f5f6fa;
  --chip: #f0f2f7;
  --sidebar-bg: #fafbfc;
  --raised: #ffffff;

  /* status */
  --ok: #0f7a51;
  --warn: #9a5e07;
  --bad: #c8283e;
  --info: #0b7580;

  /* совместимый текстовый ярус; ok/warn темнее базы ради AA на soft */
  --accent-strong: #0b7580;
  --ok-strong: #0e7650;
  --warn-strong: #8f5c07;
  --bad-strong: #c8283e;
  --info-strong: #0b7580;
  --on-fill: #ffffff;

  --chart-series-2: #1d4ed8;
  --reading-max: 840px;
  --page-std: 1180px;
  --page-max: 1440px;

  /* elevation */
  --scrim: #14181f75;
  --shadow-card: 0 1px 2px #14181f0a;
  --shadow-pop: 0 8px 28px #14181f1a;
  --shadow-up: 0 1px 2px #14181f0d, 0 10px 30px #14181f0f;
  --glass: color-mix(in srgb, var(--surface-pop) 88%, transparent);
  --glass-blur: blur(10px) saturate(1.4);
  --fade-size: 36px;
  --scrollbar-thumb: color-mix(in srgb, var(--ink2) 30%, transparent);
  --scrollbar-thumb-hover: color-mix(in srgb, var(--ink2) 50%, transparent);

  /* общий размер меню и подпись основных KPI дашборда */
  --sidebar-width: 244px;
  --kpi-dashboard-label-size: 11px;
  --kpi-dashboard-label-weight: 600;
  --kpi-dashboard-label-line-height: 1.3;
  --kpi-dashboard-label-tracking: 0.1em;
  --kpi-dashboard-label-transform: uppercase;

  /* radii */
  --radius-control: 10px;
  --radius-panel: 16px;
  --radius-tile: 22%;
  --radius-sm: 6px;
  --radius-pill: 999px;
  --radius-modal: 20px;

  /* legacy 6.x; пресет lk: sm 32 / md 36 / lg 40, умолчание — в 7.0 */
  --control-xs: 28px;
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 48px;
  --row-menu: 36px;

  /* зазоры внутри контрола — по смыслу, не по числу */
  --gap-icon-text: 8px;
  --gap-control-inner: 6px;

  /* loading */
  --loader-route-delay: 150ms;
  --loader-min-visible: 300ms;
  --loader-region-threshold: 400ms;
  --loader-slow-label: 2000ms;
  --loader-fail-safe: 8000ms;
  --loader-duration: 900ms;
  --loader-brand-lg-size: 60px;
  --loader-brand-lg-mark: 43px;
  --loader-brand-md-size: 40px;
  --loader-brand-md-mark: 29px;
  --loader-brand-sm-size: 28px;
  --loader-brand-sm-mark: 20px;
  --loader-button-size: 18px;
  --loader-route-height: 2.5px;

  /* motion — fast for hover/focus, base for popover/modal enter, slow for region reveal.
     --ease for state changes, --ease-out for entrances.
     Transition ONLY color/background/border-color/box-shadow/opacity/transform. */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --motion-count: 700ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* z-index scale — pinned; do not invent in-between layers */
  --z-sticky: 20;
  --z-dropdown: 600;
  --z-drawer: 800;
  --z-modal: 1000;
  --z-popover: 1100;
  --z-toast: 1200;
  --z-loader: 9999;
/* @generated:root end */

  /* KPI accent system (RОП/admin highlight metrics) */
  --kpi: var(--accent);
  --kpi-banner: color-mix(in srgb, var(--accent) 42%, #fff);
  --kpi-soft: color-mix(in srgb, var(--kpi) 13%, transparent);

  /* soft tints (backgrounds for chips / active nav / status pills) */
  --accent-soft: color-mix(in srgb, var(--accent) 11%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 28%, transparent);
  --ok-soft: color-mix(in srgb, var(--ok) 13%, transparent);
  --warn-soft: color-mix(in srgb, var(--warn) 15%, transparent);
  --bad-soft: color-mix(in srgb, var(--bad) 11%, transparent);
  /* --info-soft до 6.9.0 не существовало: .bark-pill--info инлайнил 13%, а
     .bark-alert--info — 8%, то есть у одного статуса было ДВЕ подложки, и ни
     одна не имела имени. Остальные три статуса всё это время жили на токенах. */
  --info-soft: var(--accent-soft); /* ЛК kit.css:52 — info = accent */

  /* hover заливок — именованный цвет вместо filter: он зависел от заливки и
     сломался бы на чернильном тексте в тёмной теме.
     Подмешиваем --ink, а НЕ белый: наведение обязано уводить заливку ОТ цвета
     текста на ней. В светлой теме --ink почти чёрный, в тёмной почти белый, так
     что одно правило работает в обеих. Со старым «88% + белый» главная кнопка
     на --accent-strong падала при наведении с 5,49 до 4,34 — ниже AA ровно в тот
     момент, когда пользователь на неё смотрит. Теперь 5,49 → 6,39. */
  --accent-hover: color-mix(in srgb, var(--accent-strong) 88%, var(--ink));

  /* Рамка контрола (6.28.0, из ЛК): наведение — на четверть к --ink, не слабее покоя ни в
     одной теме; «акцентная» — заметный поиск и нажатое состояние, оттенок акцента, но ≥ 3:1;
     фокус с клавиатуры — --focus-line поверх кольца. */
  --line-control-hover: color-mix(in srgb, var(--line-control) 75%, var(--ink));
  --line-control-accent: color-mix(in srgb, var(--accent) 50%, var(--line-control));
  --focus-line: var(--accent);
  --bad-hover: color-mix(in srgb, var(--bad-strong) 88%, var(--ink));

  /* Фокус — одно кольцо на систему (6.15.0, из кита ЛК). Было 3px --accent-soft:
     11% акцента на белом почти не отличалось от фона, и клавиатурный фокус
     приходилось угадывать. 28% (--accent-line) читается, оставаясь мягким. До 3:1
     к фону кольцо по-прежнему не дотягивает — фокус несёт ещё и смена рамки или фона. */
  --ring: 0 0 0 3px var(--accent-line);
  --bad-line: color-mix(in srgb, var(--bad) 28%, transparent);
  --ring-bad: 0 0 0 3px var(--bad-line);

  /* component-level constants (manual) */
  --sidebar-logout-height: 40px;

  color-scheme: light;

  /* ---- --bark-* portable aliases (do not give these different values).
     They point at the canonical vars, so they FOLLOW data-theme automatically — never
     redeclare any --bark-* inside the dark block. Soft tints and --kpi* also inherit
     (their color-mix re-mixes over the dark accent); do not redefine them in dark. ---- */
  --bark-accent: var(--accent);
  --bark-banner: var(--banner);
  --bark-ink: var(--ink);
  --bark-ink-2: var(--ink2);
  --bark-muted: var(--muted);
  --bark-faint: var(--faint);
  --bark-bg: var(--bg);
  --bark-surface: var(--surface);
  --bark-surface-2: var(--surface-2);
  --bark-line: var(--line);
  --bark-line-2: var(--line-2);
  --bark-field: var(--field);
  --bark-chip: var(--chip);
  --bark-sidebar-bg: var(--sidebar-bg);
  --bark-success: var(--ok);
  --bark-warning: var(--warn);
  --bark-danger: var(--bad);
  --bark-info: var(--info);
  --bark-kpi: var(--kpi);
  --bark-logo-font: var(--logo-font);
  --bark-ui-font: var(--sans);
  --bark-mono-font: var(--mono);
  --bark-shadow-card: var(--shadow-card);
  --bark-shadow-pop: var(--shadow-pop);
  --bark-shadow-up: var(--shadow-up);
  --bark-loader-duration: var(--loader-duration);
  --bark-loader-button-size: var(--loader-button-size);
  --bark-loader-route-height: var(--loader-route-height);
}

/* ---- Тёмная тема — применяется через :root[data-theme="dark"] трёхпозиционным
   переключателем. РЕШЕНИЕ ВЛАДЕЛЬЦА (5.0.0): тема ПОДДЕРЖИВАЕМАЯ, а не «приятный
   дефолт на всякий случай». Раньше в этом комментарии стояло «живой кабинет
   только светлый», и это была не пометка, а разрешение не проверять: белый текст
   на тёмном --accent давал 2,46 и дожил до продакшена. Теперь тема снимается
   вместе со светлой на каждом прогоне визуальной проверки (654 узла), а контраст
   меряется тестом в обеих темах. Правки сюда — с тем же весом, что и в светлую. ---- */
/* @generated:dark start */
:root[data-theme="dark"] {
  --accent: #2fb6c4;
  --banner: #1d2f57;
  --bg: #0e1116;
  --surface: #161a21;
  --surface-2: #1a1f27;
  --surface-pop: #1f2631;
  --ink: #eef1f6;
  --ink2: #c4cad4;
  --muted: #8b93a1;
  --faint: #8891a0;
  --line: #262c35;
  --line-2: #242b36;
  --line-control: #657895;
  --field: #1b212a;
  --chip: #20262f;
  --sidebar-bg: #11151b;
  --raised: #2b3543;
  --ok: #2fb888;
  --warn: #e3a93f;
  --bad: #f0647a;
  --info: #2fb6c4;
  --shadow-card: 0 1px 2px #0000004d;
  --shadow-pop: 0 10px 32px #00000073;
  --shadow-up: 0 1px 2px #00000066, 0 12px 34px #00000066;
  --scrim: #0000009e;
  --accent-strong: var(--accent);
  --ok-strong: var(--ok);
  --warn-strong: var(--warn);
  --bad-strong: var(--bad);
  --info-strong: var(--info);
  --chart-series-2: #8fb4ff;
  --on-fill: var(--bg);
  color-scheme: dark;
}
/* @generated:dark end */

/* ---- Свой box-sizing, а не надежда на reset у потребителя.
   `.bark-field__control` — width:100% + padding 12 + border 1: без border-box контрол
   вылезает из контейнера ровно на 26px. Раньше это держалось на `*`-правиле страницы,
   и одна опечатка в чужом комментаре ломала все поля разом. Область — только bark-классы,
   host-страницу не трогаем. ---- */
[class^="bark-"],
[class*=" bark-"],
[class^="bark-"] *,
[class*=" bark-"] * { box-sizing: border-box; }

/* ---- Пользовательские элементы слоя компонентов (templates/components.js).
   `display: contents` убирает сам элемент из раскладки: вложенная разметка ведёт
   себя так, будто лежит прямо у родителя. Без этого `position: fixed` у кнопки
   жалобы считался бы от обёртки, а флекс- и грид-родители видели бы вместо своих
   детей один безымянный элемент. Список перечислен поимённо намеренно — он же
   служит описью того, какие элементы вообще существуют. ---- */
bark-mark,
bark-theme-switch,
bark-bug-button { display: contents; }

.bark-app {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
}

.bark-logo {
  align-items: center;
  display: inline-flex;
  gap: 11px;
  text-decoration: none;
}

.bark-logo__tile {
  align-items: center;
  /* fixed dark tile gradient (STYLE_GUIDE §logo): stays dark in BOTH themes — do NOT use --ink,
     which flips to near-white in dark mode and would hide the white mark.
     6.20.0 — плитка как в ЛК (BrandLogo): верхний край подкрашен цветом продукта на 15 %,
     сверху — тонкий блик. Плитка перестала быть одинаковой серой у всех продуктов и
     читается как часть локапа, а не как отдельная иконка. */
  background: linear-gradient(150deg, color-mix(in srgb, #181b22 85%, var(--logo-module, var(--accent))), #181b22);
  border-radius: var(--radius-tile);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08);
  color: #fff;
  display: inline-flex;
  flex: none;
  height: 32px;
  justify-content: center;
  width: 32px;
}

/* The mark sits at ~0.74 × the tile in every size tier (one ratio, not per-template px). */
.bark-logo__tile img {
  display: block;
  height: 74%;
  width: 74%;
}

/* Wordmark type scale — PIN these, do not invent new sizes.
   Font is always Red Hat Display. bark = 800, module = 600 (product colour),
   subtitle = Onest 600 uppercase / 0.1em. Default .bark-logo = lg (sidebar):
   tile 32 / word 15.5 / subtitle 11 — снято с живого ЛК в 6.20.0. До этого стояло 18 / 10 / 700:
   слово кричало громче навигации, а жирная разрядка подписи спорила с ним за внимание.
   Other contexts use --xl / --md / --sm. */
.bark-logo__word {
  color: var(--ink);
  display: block;
  font-family: var(--logo-font);
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
}

/* The module suffix is the PRODUCT colour (favicon bowl + module word; BRK-066 also uses it
   for the repository-avatar icon and label). Each product sets
   --logo-module to its colour (see templates); it falls back to --accent so barkone — whose
   product colour IS the accent — and any unconfigured lockup stay correct. --accent itself is
   never rewired (it stays the active/hover/KPI colour everywhere). */
.bark-logo__module {
  color: var(--logo-module, var(--accent));
  font-weight: 600;
}

/* The subtitle always sits on its own line under the wordmark (never inline beside it). */
.bark-logo__subtitle {
  color: var(--muted);
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.15;
  margin-top: 3px;
  text-transform: uppercase;
  white-space: nowrap;
}

.bark-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-card);
}

.bark-data {
  font-family: var(--mono);
  /* цифры одной ширины: колонка не дрожит при обновлении и докрутке */
  font-feature-settings: "tnum" 1;
}

/* ---- Wordmark size modifiers (the only sanctioned sizes) ---- */
.bark-logo--xl .bark-logo__tile { height: 48px; width: 48px; }
.bark-logo--xl .bark-logo__word { font-size: 26px; }
.bark-logo--xl .bark-logo__subtitle { font-size: 11px; }
.bark-logo--md .bark-logo__tile { height: 28px; width: 28px; }
.bark-logo--md .bark-logo__word { font-size: 15px; }
.bark-logo--md .bark-logo__subtitle { font-size: 9px; }
.bark-logo--sm .bark-logo__tile { height: 24px; width: 24px; }
.bark-logo--sm .bark-logo__word { font-size: 13px; }

/* ---- Sidebar: a pinned brand element (see docs/STYLE_GUIDE.md) ---- */
.bark-sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 22px;
  height: 100dvh;
  overflow: hidden;
  padding: 20px 14px 14px;
  position: sticky;
  top: 0;
  width: var(--sidebar-width);
}
.bark-sidebar > .bark-logo { flex: none; padding: 2px 2px 0 8px; }

/* ---- Каркас страницы. До 6.1.0 его в системе НЕ БЫЛО: sidebar и main существовали
   по отдельности, а сетку каждый продукт изобретал сам — вместе с мобильным
   правилом. Из-за этого мобильной оболочки не было как класса: во всём brand.css
   не встречалось ни одного @media для .bark-sidebar, и на 390px он статичным
   блоком съедал первый экран целиком.

   Продукт больше ничего не считает: обёртка + сайдбар + main, дальше система. ---- */
.bark-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: 100dvh;
}

/* Мобильная шапка живёт в разметке всегда, но видна только на узком экране:
   логотип и бургер нужны ровно там, где сайдбар уехал за край. Оверлей создаётся
   скриптом и на десктопе тоже обязан быть скрыт ЯВНО: без правила он остаётся
   обычным блоком и занимает ячейку сетки оболочки. */
.bark-mobile-header,
.bark-shell__overlay { display: none; }

@media (max-width: 767px) {
  /* align-content: start обязателен. min-height: 100dvh на сетке растягивает СТРОКИ,
     и мобильная шапка получала 326px вместо 56: контент начинался ниже первого
     экрана — ровно тот дефект, ради которого ящик и делался. На десктопе это не
     проявлялось, там строка одна. */
  .bark-shell { align-content: start; grid-template-columns: minmax(0, 1fr); }

  .bark-mobile-header {
    align-items: center;
    display: flex;
    background: var(--sidebar-bg);
    border-bottom: 1px solid var(--line);
    gap: var(--space-3);
    /* верхняя safe-area — как у аппбара (BRK-139) */
    height: calc(56px + max(env(safe-area-inset-top, 0px), calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px))));
    padding: max(env(safe-area-inset-top, 0px), calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px))) var(--space-2) 0 var(--space-4);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
  }
  .bark-mobile-header__burger {
    align-items: center;
    background: none;
    border: 0;
    border-radius: var(--radius-control);
    color: var(--ink2);
    cursor: pointer;
    display: inline-flex;
    flex: none;
    height: 40px;
    justify-content: center;
    margin-left: auto;
    width: 44px;                      /* 44 — минимальная цель касания, не 40 */
  }
  .bark-mobile-header__burger:hover { background: var(--chip); }
  .bark-mobile-header__burger svg { height: 20px; width: 20px; }

  /* Сайдбар уезжает за левый край. visibility снимает его с чтения и из обхода
     табом, пока он закрыт: одного translateX мало — уехавший, но «видимый» ящик
     остаётся в порядке фокуса, и первый Tab на странице уводит в невидимое меню.
     Кривая — --ease-out. До 6.14.1 здесь стояла --motion-easing, которой в системе
     нет: var() без значения делает недействительным весь transition, и ящик с
     подложкой открывались и закрывались рывком, без анимации и без задержки
     visibility на закрытии. */
  .bark-sidebar {
    bottom: 0;
    box-shadow: var(--shadow-pop);
    left: 0;
    position: fixed;
    top: 0;
    transform: translateX(-100%);
    transition: transform var(--motion-base) var(--ease-out), visibility 0s linear var(--motion-base);
    visibility: hidden;
    width: min(var(--sidebar-width), 86vw);
    z-index: var(--z-drawer);
  }
  .bark-sidebar[data-open] {
    transform: none;
    transition: transform var(--motion-base) var(--ease-out), visibility 0s;
    visibility: visible;
  }
  .bark-shell__overlay {
    background: var(--scrim);
    display: block;
    inset: 0;
    opacity: 0;
    position: fixed;
    transition: opacity var(--motion-base) var(--ease-out), visibility 0s linear var(--motion-base);
    visibility: hidden;
    z-index: calc(var(--z-drawer) - 1);
  }
  .bark-shell__overlay[data-open] { opacity: 1; transition: opacity var(--motion-base) var(--ease-out), visibility 0s; visibility: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .bark-sidebar, .bark-shell__overlay { transition: none; }
}
.bark-sidebar__scroll {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 22px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.bark-sidebar__group { display: grid; gap: 2px; }
.bark-sidebar__group-label {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0 0 6px 12px;
  text-transform: uppercase;
}
.bark-sidebar__item {
  align-items: center;
  border-radius: 8px;
  color: var(--ink2);
  display: flex;
  font-size: 14px;
  gap: 10px;
  padding: 10px 12px;
  text-decoration: none;
}
.bark-sidebar__item:hover { background: var(--chip); }
/* Видимое состояние и объявляемое — одно и то же. Раньше активный пункт красил
   только класс, а aria-current стоял рядом отдельным атрибутом: их можно было
   развести молча, и продукт получал пункт, который либо выглядит активным и не
   объявляется, либо наоборот. Реестр ставит aria-current прокруткой, класса у
   него нет вовсе. `false` — валидное значение «не текущий», поэтому исключено. */
.bark-sidebar__item[aria-current]:not([aria-current="false"]),
.bark-sidebar__item--active {
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 700;
}
.bark-sidebar__item svg,
.bark-sidebar__item img { flex: none; height: 18px; width: 18px; }
/* -- Метки пункта (BRK-137, 6.29.0, из ЛК) — navBadge() из shell.snippet.js. Счётчик — число
   событий раздела, «new» — раздел новый и ещё не открыт. Пункт с меткой подсвечен (is-attention),
   пока новое не открыли. Метки — справа, у первой — margin-left: auto. -- */
.bark-sidebar__item.is-attention { color: var(--ink); font-weight: 600; }
.bark-sidebar__count,
.bark-sidebar__new { flex: none; margin-left: auto; }
.bark-sidebar__new + .bark-sidebar__count { margin-left: -4px; }
.bark-sidebar__count {
  /* заливка с текстом — ярус -strong и --on-fill, как у счётчика аппбара */
  background: var(--accent-strong);
  border-radius: 9px;
  color: var(--on-fill);
  display: inline-grid;
  font: 700 11px/1 var(--sans);
  font-feature-settings: "tnum" 1;
  height: 18px;
  min-width: 18px;
  padding: 0 5px;
  place-items: center;
}
.bark-sidebar__new {
  background: var(--accent-soft);
  border-radius: 9px;
  color: var(--accent-strong);
  display: inline-grid;
  font: 700 10px/1 var(--sans);
  height: 16px;
  letter-spacing: 0.04em;
  padding: 0 6px;
  place-items: center;
  text-transform: uppercase;
}
.bark-sidebar__bottom {
  display: grid;
  flex: none;
  gap: 12px;
}
.bark-sidebar__footer {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  padding-top: 12px;
}
/* УСТАРЕЛО с 6.20.0, удаление в 7.0.0 (tokens/deprecations.json). Блок пользователя в подвале
   сайдбара (фото/инициалы + имя + почта + icon-only «Выйти») был точкой личности оболочки;
   теперь это аватар в аппбаре (.bark-appbar, BRK-098). Работает, пока продукт не перешёл. */
.bark-sidebar__user {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.bark-sidebar__user-info { display: grid; gap: 2px; min-width: 0; }
.bark-sidebar__user-name {
  color: var(--ink);
  font: 600 13px/1.25 var(--sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bark-sidebar__user-mail {
  color: var(--muted);
  font: 500 11px/1.3 var(--sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bark-sidebar__logout {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-control);
  color: var(--ink2);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  height: var(--sidebar-logout-height);
  justify-content: center;
  padding: 0;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
  width: var(--sidebar-logout-height);
}
.bark-sidebar__logout:hover { background: var(--bad-soft); color: var(--bad); }
.bark-sidebar__logout:focus-visible {
  background: var(--bad-soft);
  box-shadow: var(--ring-bad);
  color: var(--bad);
  outline: none;
}
.bark-sidebar__logout:disabled {
  color: var(--muted);
  cursor: not-allowed;
  opacity: 1;
  pointer-events: none;
}
.bark-sidebar__logout[aria-busy="true"] { cursor: progress; }
.bark-sidebar__logout svg { flex: none; height: 18px; width: 18px; }
/* ---- Марка ИИ-контента: «этот текст сгенерирован, вот чем». Ставится на каждый блок
   генерации, иначе ответ модели неотличим от данных системы (tokens.aiMark, BRK-069).
   Тихая: ответ важнее марки. Не ссылка и не кнопка — кликать нечего. ---- */
.bark-ai-mark {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  font: 500 11px/1.4 var(--sans);
  gap: 5px;
  white-space: nowrap;
}
.bark-ai-mark svg { flex: none; height: 14px; width: 14px; }
/* Название модели — данные, поэтому моно: по нему сверяют, какой моделью получен ответ. */
.bark-ai-mark__model { font-family: var(--mono); }

/* Оценка полезности ответа: подпись и две icon-кнопки. */
.bark-ai-feedback { align-items: center; color: var(--muted); display: flex; font: 500 11px/1.4 var(--sans); gap: 6px; }

/* Подвал блока ответа: слева оценка полезности, справа марка. */
.bark-ai-foot {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 10px;
}

/* ---- Подпись футера: что это, какой билд, кто сделал. Порядок строк и шрифты
   закреплены (tokens.meta). Весь блок тихий — конкурировать с навигацией он не должен. ---- */
/* Подпись футера — ОДНА строка: вордмарк, версия, хэш сборки.
   
   История размера. До 6.10.1 блок был 71,5px на ширине сайдбара 215 — три
   строки, из которых строка сборки ещё и переносилась. В 6.10.1 его ужали до
   46,5px типографикой, в 6.12.0 свели к одной строке ~17px по решению владельца.
   Размер вернулся к 11px: 10,5 был компромиссом ради переноса, а переносить
   больше нечего. Проверено на самом длинном имени модуля (barkmarketing) —
   помещается.
   
   Что ушло из ВИДИМОЙ строки: дата сборки, «Bark UI vX.Y.Z» и строка
   разработчиков. Хэш идентифицирует билд точнее даты, а отставание версии
   ловится машиной — bark-check (BRK-072), и это надёжнее строки, которую никто
   не читает. Дата и версия системы остались в подсказке блока. */
.bark-sidebar__meta {
  align-items: baseline;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font: 500 11px/1.4 var(--sans);
  gap: 0 6px;
}
/* Версия ведёт в журнал изменений, если у продукта он есть. Без адреса шаблон
   отдаёт <span> — мёртвая ссылка хуже её отсутствия.
   Подчёркивание слабое, но ПОСТОЯННОЕ: у ссылки не должно быть единственным
   признаком цвет (WCAG 1.4.1), а сплошная линия в подписи футера кричала бы. */
.bark-meta__version {
  color: var(--ink2);
  font-family: var(--mono);
}
a.bark-meta__version {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--ink2) 35%, transparent);
  text-underline-offset: 2px;
}
a.bark-meta__version:hover {
  color: var(--accent-strong);
  text-decoration-color: currentColor;
}
a.bark-meta__version:focus-visible {
  border-radius: var(--radius-sm);
  box-shadow: var(--ring);
  outline: none;
}
.bark-meta__hash { color: var(--muted); font-family: var(--mono); }

.bark-meta__product {
  align-items: baseline;
  display: flex;
  gap: 6px;
}
.bark-meta__wordmark {
  color: var(--ink2);
  font-family: var(--logo-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}
.bark-meta__wordmark b { color: var(--logo-module, var(--accent)); font-weight: 600; }
/* Слово модуля на тёмной теме берёт свой вариант. Шаблоны продукта ставят обе
   переменные инлайном; продукт, который знает только --logo-module, продолжает
   работать — тёмная просто наследует ту же величину. Шесть цветов из тринадцати
   не держали 3:1 в одной из тем: ledger давал 1,69:1 на тёмной, lotto 1,89 на
   светлой. Это не норма WCAG — слово модуля часть логотипа и от неё освобождено;
   3:1 здесь правило бренда на узнаваемость. */
:root[data-theme="dark"] .bark-logo__module,
:root[data-theme="dark"] .bark-meta__wordmark b {
  color: var(--logo-module-dark, var(--logo-module, var(--accent)));
}

/* Строки 2: хэш, дата и версия системы — это данные, поэтому моно. */
.bark-meta__build { font-family: var(--mono); }

/* Строка 4: атрибуция ИИ. Серая, без иконки и без цвета — это факт, а не украшение.
   Ставится только если ИИ действительно участвовал (docs/COMPONENT_RULES.md). */
.bark-meta__made { color: var(--muted); }

/* ---- Theme switch: a pinned 3-way segmented control (light / dark / system) ---- */
.bark-theme-switch {
  align-items: center;
  background: var(--chip);
  border: 1px solid var(--line-control);
  border-radius: 12px;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
}
.bark-theme-switch button {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 9px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  padding: 0;
  width: 42px;
}
.bark-theme-switch button:hover { color: var(--ink2); }
.bark-theme-switch button svg { height: 18px; width: 18px; }
.bark-theme-switch button[aria-pressed="true"] {
  background: var(--raised);
  box-shadow: var(--shadow-card);
  color: var(--accent-strong);
}
.bark-sidebar .bark-theme-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
}
.bark-sidebar .bark-theme-switch button { width: 100%; }
/* Deprecated in 6.34.0; kept working until 7.0.0, never hidden by the LK preset. */
.bark-theme-switch--sidebar { width: 100%; }
/* One theme control in the profile menu, not a second settings screen. */
.bark-appbar__menu .bark-theme-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 8px 0;
  width: 100%;
}
.bark-appbar__menu .bark-theme-switch button { font: 500 12px/1 var(--sans); width: 100%; }

/* ---- Spacing scale: snap every gap/padding to these (4px base) ---- */
/* @generated:spacing start */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
}
/* @generated:spacing end */

/* ---- In-page heading + body scale: all interface text is Onest. ----
   Заголовки — 600 со сжатым трекингом (6.15.0, из кита ЛК). При 700 крупный Onest
   выглядел тяжело и «поделочно»; иерархию держат кегль и вес 600, а отрицательный
   трекинг собирает крупные строки. Кегли прежние. */
.bark-h1 { color: var(--ink); font-family: var(--sans); font-size: 25px; font-weight: 600; letter-spacing: -0.4px; line-height: 1.2; }
/* 6.20.0: H1 25px — кегль заголовка страницы ЛК (--fs-3xl). 28px перевешивал таблицу под ним:
   экран читался как лендинг, а не как рабочее место. На телефоне — 22px, как в ЛК. */
@media (max-width: 760px) { .bark-h1 { font-size: 22px; } }
.bark-h2 { color: var(--ink); font-family: var(--sans); font-size: 20px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.2; }
.bark-h3 { color: var(--ink); font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.bark-body { color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.5; }
.bark-caption { color: var(--muted); font-family: var(--sans); font-size: 12px; font-weight: 500; line-height: 1.4; }

/* ---- Buttons: primary (solid accent) + ghost. Pinned heights: sm 32 / md 40 (default) / lg 48. ---- */
.bark-btn {
  align-items: center;
  background: var(--accent-strong);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  color: var(--on-fill);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  font: 600 14px/1 var(--sans);
  gap: 8px;
  height: 40px;
  justify-content: center;
  padding: 0 16px;
  /* Наведение и нажатие — 120 мс: мгновенная смена цвета читается как мигание. */
  transition: background-color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
  white-space: nowrap;
}
/* Раньше здесь был filter: brightness(1.06). Фильтр не умеет выражать «hover — это
   другой цвет» и ломается, как только текст на заливке станет чернильным (--on-fill
   в тёмной теме): он потянет тёмный текст к заливке и уронит контраст. */
.bark-btn:hover { background: var(--accent-hover); }
.bark-btn:active { transform: scale(0.98); }
.bark-btn:focus-visible { outline: none; box-shadow: var(--ring); }
/* ---- Одна формула на всё выключенное: приглушённая поверхность --chip, ЧИТАЕМОЕ
   содержимое --muted, граница --line-control, opacity: 1.

   Почему не opacity. Она множится сквозь всё содержимое: у выключенной
   primary-кнопки при 0.45 подпись давала около 2:1, и понять, что именно
   недоступно, было нельзя. Норма выключенные контролы от контраста освобождает,
   но человеку всё равно нужно прочесть, какое поле выключено.

   И значений было три — 0.45 у кнопки и пагинации, 0.55 у поля, чекбокса и
   свитча, 0.65 у выхода: выключенная кнопка и выключенное поле выглядели
   по-разному без причины.

   Состояние сохраняется: отмеченный чекбокс остаётся отмеченным, включённый
   свитч включённым — приглушается только цвет, а не смысл. ---- */
.bark-btn[disabled], .bark-btn:disabled {
  background: var(--chip);
  border-color: var(--line-control);
  color: var(--muted);
  cursor: not-allowed;
  opacity: 1;
}
/* Выключенная кнопка не реагирует на наведение. Раньше она подсвечивалась
   акцентом — то есть выглядела активнее, чем в покое. */
.bark-btn[disabled]:hover, .bark-btn:disabled:hover { background: var(--chip); }
.bark-btn--ghost { background: transparent; border-color: var(--line-control); color: var(--ink2); }
.bark-btn--ghost:hover { background: var(--chip); }
.bark-btn--ghost.is-active { background: var(--accent-soft); border-color: var(--line-control-accent); color: var(--accent-strong); }

/* quiet — второе по важности действие внутри панели. Тише primary, заметнее ghost.
   Двух primary в группе не бывает: второе действие берёт этот вариант. */
.bark-btn--quiet {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent-strong);
}
.bark-btn--quiet:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }

/* danger — ТОЛЬКО в подтверждении. Панель, из которой вызвано удаление, показывает
   пункт меню, а не красную кнопку (COMPONENT_RULES §Сортировка и действия строк). */
.bark-btn--danger { background: var(--bad-strong); color: var(--on-fill); }
.bark-btn--danger:hover { background: var(--bad-hover); }
.bark-btn--danger:focus-visible { box-shadow: var(--ring-bad); }
/* Заметно, но не опасно — пауза, стоп, снять с публикации (6.22.0, из ЛК). */
.bark-btn--warn { background: transparent; border-color: var(--warn); color: var(--ink); }
.bark-btn--warn:hover { background: var(--warn-soft); }
/* sizes */
.bark-btn--sm { height: 32px; padding: 0 12px; font-size: 13px; }
.bark-btn--lg { height: 48px; padding: 0 20px; font-size: 15px; }
/* width / shape */
.bark-btn--block { width: 100%; }
/* No full-width buttons on desktop: a form CTA hugs (capped ~360px) and never spans a wide screen. */
@media (min-width: 640px) { .bark-btn--block { width: auto; min-width: 220px; max-width: 360px; } }
.bark-btn--icon { padding: 0; width: 40px; }
.bark-btn--icon.bark-btn--sm { width: 32px; }
.bark-btn--icon.bark-btn--lg { width: 48px; }
.bark-btn svg { height: 18px; width: 18px; }
.bark-btn--lg svg { height: 20px; width: 20px; }

/* ---- Form fields: visible labels, stable validation space, 32/40/48px heights. ---- */
.bark-field { display: grid; gap: 6px; }
.bark-field__label {
  color: var(--ink2);
  font: 600 12px/1.35 var(--sans);
}
.bark-field__control {
  background: var(--field);
  /* .bark-field — это grid, а у grid-элемента min-width по умолчанию auto, то есть
     собственная минимальная ширина <input>. Длинное значение способно распереть
     колонку; min-width:0 это исключает. Профилактика, а не починка наблюдавшегося
     дефекта. */
  min-width: 0;
  border: 1px solid var(--line-control);
  border-radius: var(--radius-control);
  color: var(--ink);
  font: 400 14px/1.4 var(--sans);
  height: 40px;
  outline: none;
  padding: 0 12px;
  transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
  width: 100%;
}
.bark-field__control::placeholder { color: var(--muted); }
/* У поля есть наведение: рамка темнеет — видно, что сюда можно писать. */
.bark-field__control:hover:not(:disabled, [readonly], :focus-visible) { border-color: var(--line-control-hover); }
.bark-field__control:focus-visible {
  border-color: var(--focus-line);
  box-shadow: var(--ring);
}
.bark-field__control:disabled { background: var(--chip); color: var(--muted); cursor: not-allowed; opacity: 1; }
.bark-field__control[readonly] { background: var(--surface-2); color: var(--ink2); }
.bark-field__control--sm { height: 32px; }
.bark-field__control--lg { height: 48px; }
/* Поле текста (6.28.0, из ЛК): две строки по умолчанию и растёт под текст (field-sizing; без
   него — autosize() из controls.snippet.js). Ресайз остаётся и на телефоне. */
textarea.bark-field__control { field-sizing: content; height: auto; line-height: 1.5; max-height: 50vh; min-height: calc(3em + 22px); padding-block: 10px; resize: vertical; }
.bark-field__control--data { font-family: var(--mono); font-feature-settings: "tnum" 1; }
.bark-field__hint { color: var(--muted); font: 500 12px/1.4 var(--sans); min-height: 17px; }
.bark-field--error .bark-field__control { border-color: var(--bad); }
.bark-field__label--required::after { color: var(--bad); content: " *"; }
/* Максимум два поля в строке. Три и больше — только если это одна величина,
   разбитая на части (дата от/до, диапазон). */
.bark-field-row { display: grid; gap: 16px 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .bark-field-row { grid-template-columns: 1fr; } }

/* ---- Select. Нативный контрол выпадал из 40px-строки в каждом продукте, потому что
   его не было в системе. appearance:none + своя стрелка; список закрыт, свободного
   ввода нет — для ввода с подсказкой берите отдельный combobox. ---- */
select.bark-field__control {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 13px) center;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
  padding-right: 34px;
}

/* ---- Чекбокс и радио. Зона нажатия — целая строка 40px, сам бокс 18px:
   попадание пальцем важнее компактности. ---- */
.bark-check { align-items: center; cursor: pointer; display: flex; gap: 10px; min-height: var(--control-md); }
.bark-check input { position: absolute; opacity: 0; pointer-events: none; }
.bark-check__box {
  align-items: center;
  background: var(--field);
  border: 1px solid var(--line-control);
  border-radius: 5px;
  color: var(--on-fill);
  display: inline-flex;
  flex: none;
  height: 18px;
  justify-content: center;
  transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
  width: 18px;
}
.bark-check__box--radio { border-radius: 50%; }
.bark-check input:checked + .bark-check__box {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}
.bark-check input:focus-visible + .bark-check__box { box-shadow: var(--ring); }
.bark-check input:disabled + .bark-check__box { background: var(--chip); border-color: var(--line-control); opacity: 1; }
/* отмеченный и выключенный остаётся отмеченным: галочка видна, заливка приглушена */
.bark-check input:disabled:checked + .bark-check__box { background: var(--muted); border-color: var(--muted); }
.bark-check input:disabled ~ * { color: var(--muted); }
.bark-check__box svg { height: 12px; width: 12px; }
.bark-check input:not(:checked) + .bark-check__box svg { visibility: hidden; }

/* ---- Переключатель. ЕДИНСТВЕННЫЙ контрол, который меняет состояние системы без
   «Сохранить», — поэтому он обязан подтверждаться тостом. Чекбокс так себя не ведёт:
   он копит выбор до отправки формы. ---- */
.bark-switch { align-items: center; cursor: pointer; display: flex; gap: 10px; min-height: var(--control-md); }
.bark-switch input { position: absolute; opacity: 0; pointer-events: none; }
.bark-switch__track {
  align-items: center;
  background: var(--line);
  /* Выключенный трек — тоже состояние компонента, и его надо различать: заливка
     --line даёт 1,23:1 к поверхности. Красить заливку в --line-control нельзя,
     выключенный стал бы похож на включённый, поэтому границу даёт обводка. */
  border: 1px solid var(--line-control);
  border-radius: var(--radius-pill);
  display: inline-flex;
  flex: none;
  height: 22px;
  padding: 2px;
  transition: background var(--motion-fast) var(--ease);
  width: 38px;
}
.bark-switch__knob {
  background: var(--surface);
  border-radius: 50%;
  height: 18px;
  transition: transform var(--motion-fast) var(--ease);
  width: 18px;
}
/* Включённый трек — сплошная заливка акцентом, и серое кольцо вокруг неё лишнее:
   граница нужна там, где состояние опознаётся по контуру, а не по цвету. */
.bark-switch input:checked + .bark-switch__track { background: var(--accent-strong); border-color: var(--accent-strong); }
.bark-switch input:checked + .bark-switch__track .bark-switch__knob { transform: translateX(16px); }
.bark-switch input:focus-visible + .bark-switch__track { box-shadow: var(--ring); }
.bark-switch input:disabled + .bark-switch__track { background: var(--chip); border-color: var(--line-control); opacity: 1; }
.bark-switch input:disabled:checked + .bark-switch__track { background: var(--muted); border-color: var(--muted); }

/* -- Контролы и формы (BRK-129…135, 6.28.0, из ЛК) — templates/controls.snippet.js. -- */

/* Переключатель «занят»: запрос ушёл — положение уже новое, повторно не нажать, курсор
   ожидания. «Заблокирован» — менять нельзя, на ручке замок: серый выключенный без замка
   читается как «сломан». */
.bark-switch.is-busy { cursor: progress; }
.bark-switch.is-busy .bark-switch__track { opacity: 0.6; }
.bark-switch.is-busy input:disabled:checked + .bark-switch__track { background: var(--accent-strong); border-color: var(--accent-strong); }
.bark-switch.is-locked { cursor: not-allowed; }
.bark-switch__track { position: relative; }
.bark-switch__lock { color: var(--muted); display: flex; left: 6px; pointer-events: none; position: absolute; z-index: 1; }
.bark-switch__lock svg { height: 10px; width: 10px; }
.bark-switch.is-locked input:checked + .bark-switch__track .bark-switch__lock { color: var(--chip); }

/* Фокус с клавиатуры перекрашивает рамку контрола (--focus-line), кольцо --ring — поверх:
   само кольцо слабее рамки в покое, и без смены рамки фокус почти не менял вид. */
:is(.bark-btn--ghost, .bark-btn--warn, .bark-toggle-chip, .bark-dd, .bark-pagination__btn, .bark-page-header__tool,
  .bark-appbar__burger, .bark-to-top, .bark-period-panel__nav, .bark-theme-switch):focus-visible { border-color: var(--focus-line); }
.bark-check input:focus-visible + .bark-check__box,
.bark-switch input:focus-visible + .bark-switch__track { border-color: var(--focus-line); }
.bark-seg:has(> button:focus-visible) { border-color: var(--focus-line); }
/* Наведение — рамка на четверть к --ink: видно, что контрол живой, и не слабее покоя. */
:is(.bark-btn--ghost, .bark-toggle-chip, .bark-dd, .bark-pagination__btn):hover:not(:disabled, :focus-visible) { border-color: var(--line-control-hover); }

/* Иконка-кнопка 32px на телефоне: зона нажатия 40px, вид тот же. Вбок зона растёт только к
   соседу: у края контейнера лишние 4px за кнопкой дали бы горизонтальную прокрутку таблицы. */
@media (max-width: 760px), (pointer: coarse) {
  /* clip с полем 4px: зона нажатия остаётся живой, а кнопка не становится шире себя для прокрутки */
  :is(.bark-btn--icon.bark-btn--sm, .bark-row-action, .bark-pagination__btn) { overflow: clip; overflow-clip-margin: 4px; position: relative; }
  :is(.bark-btn--icon.bark-btn--sm, .bark-row-action, .bark-pagination__btn)::after { content: ""; inset: -4px 0; position: absolute; }
  :is(.bark-btn--icon.bark-btn--sm, .bark-row-action, .bark-pagination__btn):not(:first-child)::after { left: -4px; }
  :is(.bark-btn--icon.bark-btn--sm, .bark-row-action, .bark-pagination__btn):not(:last-child)::after { right: -4px; }
}

/* Число вводится в поле, где оно помещается: без стрелок браузера, цифры одной ширины, справа
   единица измерения. Окно на две цифры для суммы — дефект. */
.bark-field__control--num { font-variant-numeric: tabular-nums; min-width: 96px; text-align: right; }
.bark-field__control[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.bark-field__control[type="number"]::-webkit-inner-spin-button,
.bark-field__control[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.bark-field__with-unit { align-items: center; display: flex; min-width: 0; position: relative; }
.bark-field__with-unit > .bark-field__control { padding-right: 40px; }
.bark-field__unit { color: var(--muted); font: 600 13px/1 var(--sans); pointer-events: none; position: absolute; right: 12px; }

/* Вычисляемое — текстом, а не полем: рамка обещает «можно изменить». Подпись у него та же,
   значение — с пометкой, откуда оно. */
.bark-field__value { align-items: baseline; color: var(--ink); display: flex; flex-wrap: wrap; font: 500 14px/1.4 var(--sans); font-variant-numeric: tabular-nums; gap: 4px 8px; min-height: var(--control-md); padding-block: 10px; }
.bark-field__value-note { color: var(--muted); font-size: 12px; font-weight: 500; }

/* Просмотр по умолчанию, правка — отдельной кнопкой: setEditing() ставит data-edit-mode. */
[data-edit-mode="view"] [data-edit-only],
[data-edit-mode="edit"] [data-view-only] { display: none; }
[data-edit-mode="view"] .bark-field__control[readonly] { background: transparent; border-color: transparent; padding-inline: 0; }
/* В просмотре число читается текстом: слева, единица сразу за ним, а не у дальнего края поля. */
[data-edit-mode="view"] .bark-field__control--num[readonly] { field-sizing: content; flex: 0 1 auto; min-width: 0; text-align: start; width: auto; }
[data-edit-mode="view"] .bark-field__with-unit { gap: 4px; }
[data-edit-mode="view"] .bark-field__with-unit > .bark-field__control[readonly] { padding-right: 0; }
[data-edit-mode="view"] .bark-field__with-unit > .bark-field__unit { position: static; }

/* Цель для файлов — большая: колонка, карточка или вся страница, а не кнопка «Загрузить». */
.bark-dropzone {
  align-items: center;
  border: 1.5px dashed var(--line-control);
  border-radius: var(--radius-panel);
  color: var(--muted);
  display: grid;
  font: 500 13px/1.5 var(--sans);
  gap: 6px;
  justify-items: center;
  min-height: 140px;
  padding: 20px;
  text-align: center;
  text-wrap: pretty;
  transition: background-color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.bark-dropzone svg { color: var(--muted); height: 22px; width: 22px; }
.bark-dropzone.is-drag { background: var(--accent-soft); border-color: var(--accent-strong); color: var(--accent-strong); }
.bark-dropzone.is-drag svg { color: currentColor; }
/* Страница целиком: оверлей виден только пока над ней файл. */
.bark-dropzone--page { background: color-mix(in srgb, var(--surface) 82%, transparent); border-radius: 0; inset: 12px; opacity: 0; pointer-events: none; position: fixed; z-index: var(--z-popover); }
.bark-dropzone--page.is-drag { opacity: 1; }
/* Фото заменяется тем же жестом: кнопка «Заменить» поверх превью, а не «удалить и загрузить». */
.bark-dropzone__preview { border-radius: var(--radius-control); max-height: 160px; max-width: 100%; object-fit: cover; }

/* Рядом с действием, которое меняет статус, — текущий статус: человек видит, из чего во что. */
.bark-status-action { align-items: center; display: inline-flex; flex-wrap: wrap; gap: 8px 10px; }
.bark-status-action__now { color: var(--muted); font: 500 12px/1.4 var(--sans); }

/* Мелочи из ЛК: длинные описания без висящего слова, обрезка строк, длинные списки не рисуют
   невидимое, широкое окно для таблицы в дровере. */
.bark-pretty { text-wrap: pretty; }
.bark-clamp-1, .bark-clamp-3 { -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; }
.bark-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.bark-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.bark-long-list > * { content-visibility: auto; contain-intrinsic-size: auto 44px; }
.bark-modal--xl { width: min(1100px, 100%); }
.bark-modal-backdrop--right > .bark-modal--xl { width: min(1100px, calc(100% - 64px)); }

/* ---- Роли типографики. Одна визуальная роль — одна спека: раньше прописной
   микро-лейбл существовал в трёх видах (10.5/0.1em, 11/0.06em, 10/0.05em), и в новый
   экран копировали любой из них. ---- */
.bark-body-sm { color: var(--ink); font: 400 13px/1.45 var(--sans); }
.bark-label {
  color: var(--muted);
  font: 700 11px/1.2 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Три яруса моно. tnum обязателен на всех: без него цифры разной ширины и колонка
   чисел дрожит при обновлении. */
.bark-mono-metric { font: 600 24px/1.15 var(--mono); font-feature-settings: "tnum" 1; }
.bark-mono-data { font: 400 14px/1.4 var(--mono); font-feature-settings: "tnum" 1; }
.bark-mono-meta { color: var(--muted); font: 500 12px/1.4 var(--mono); font-feature-settings: "tnum" 1; }

/* ---- Полоса метрик вместо сетки KPI-карточек: auto-fill оставляет дыру на месте
   недостающей ячейки, а делители дают ту же читаемость на 20px меньшей высоте. ---- */
.bark-stats {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  overflow: hidden;
}
@media (max-width: 767px) { .bark-stats { grid-auto-flow: row; } }
.bark-stats__cell { display: grid; gap: 4px; padding: 12px 20px; }
.bark-stats__cell + .bark-stats__cell { border-left: 1px solid var(--line-2); }
@media (max-width: 767px) {
  .bark-stats__cell + .bark-stats__cell { border-left: 0; border-top: 1px solid var(--line-2); }
}
.bark-stats__label { color: var(--muted); font: 500 12px/1.4 var(--sans); }
.bark-stats__value { color: var(--ink); font: 600 24px/1.15 var(--mono); font-feature-settings: "tnum" 1; }

/* Колонка поджимается под содержимое, остаток забирает текстовая: пустота в таблицах
   горизонтальная, и отступами её не лечат. */
.bark-table__hug { white-space: nowrap; width: 1%; }
/* Панель, в которой только таблица или только полоса метрик: одна граница на регион. */
.bark-panel--flush .bark-panel__body { padding: 0; }
/* таблица прямо в панели: углы строк не вылезают за радиус. clip, а не hidden — липкая
   шапка таблицы продолжает работать (6.19.0) */
.bark-panel--flush { overflow: clip; }
.bark-field--error .bark-field__hint { color: var(--bad); }

/* ---- Modal: sticky chrome, independently scrolling body, no nested layers. ---- */
/* Подложка — --scrim с блюром фона (6.15.0, из кита ЛК). Раньше был литерал
   rgb(20 24 31 / 56%), одинаковый в обеих темах; теперь у тёмной своё значение. */
.bark-modal-backdrop {
  align-items: center;
  animation: bark-fade var(--motion-base) var(--ease) both;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  background: var(--scrim);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 20px;
  position: fixed;
  z-index: 1000;
}
/* hidden у подложки должен прятать её: display: flex выше перебивает [hidden] браузера,
   а окна стеком (dialog.snippet.js) живут в разметке скрытыми до открытия. */
.bark-modal-backdrop[hidden] { display: none; }
.bark-modal {
  /* Всплывающий слой стоит на своей поверхности, а не на --surface. В тёмной
     теме тень на фоне #0e1116 неразличима, и модалка оказывалась ТОЙ ЖЕ плитой,
     что таблица под ней: отдельной поверхности для меню, модалки и тоста не
     существовало вовсе. */
  /* Радиус — свой, крупнее панели: окно читается отдельным слоем, а не ещё одной
     карточкой. Въезд — backwards, не both: после анимации на окне не остаётся
     transform, иначе position: fixed внутри считается от окна и режется overflow. */
  animation: bark-modal-in var(--motion-base) var(--ease-out) backwards;
  background: var(--surface-pop);
  border: 1px solid var(--line);
  border-radius: var(--radius-modal);
  box-shadow: var(--shadow-pop);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: 85dvh;
  overflow: hidden;
  width: min(560px, 100%);
}
/* Окно получает фокус само (dialog.snippet.js), чтобы Tab начинался внутри: кольцо на
   всём окне — шум, фокус виден на первом же контроле. */
.bark-modal:focus { outline: none; }
.bark-modal--sm { width: min(400px, 100%); }
.bark-modal--lg { width: min(720px, 100%); }
.bark-modal__header,
.bark-modal__footer { align-items: center; display: flex; gap: 12px; }
.bark-modal__header { border-bottom: 1px solid var(--line); justify-content: space-between; padding: 16px 20px; }
.bark-modal__body { overflow-y: auto; padding: 20px; }
/* Подвал по плотности подвала панели. Было 16px 20px — модалка жила по своей.
   Паддинг задаётся по одному разу на каждую часть: раньше общее правило ставило
   16 20 обоим, а следующее переопределяло подвал — значение существовало в двух
   местах, и правильным было то, что ниже. Кнопки подвала обязаны быть одного
   яруса: смешивать 40 и 32 в одном ряду запрещено лестницей контролов. */
.bark-modal__footer { border-top: 1px solid var(--line); justify-content: flex-end; padding: 12px 20px; }
/* Крестик модалки. Своего селектора у него не было ВОВСЕ: ставили
   .bark-page-header__tool с инлайновым style="border: 0" — то есть кнопку чужой
   роли, обезвреженную прямо в разметке. Ярус control.sm, иконка 18. */
.bark-modal__close {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-control);
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  height: var(--control-sm);
  justify-content: center;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
  width: var(--control-sm);
}
.bark-modal__close:hover { background: var(--chip); color: var(--ink2); }
.bark-modal__close:focus-visible { box-shadow: var(--ring); outline: none; }
.bark-modal__close svg { height: 18px; width: 18px; }

/* Дровер справа: во всю высоту, край страницы виден всегда (64px). Для длинных
   форм и карточек сущности, когда нужен контекст под окном. */
.bark-modal-backdrop--right { align-items: stretch; justify-content: flex-end; padding: 0; }
.bark-modal-backdrop--right > .bark-modal {
  animation: bark-drawer-in var(--motion-base) var(--ease-out) backwards;
  border-radius: 0;
  border-width: 0 0 0 1px;
  height: 100%;
  max-height: 100dvh;
  width: min(560px, calc(100% - 64px));
}
.bark-modal-backdrop--right > .bark-modal--sm { width: min(400px, calc(100% - 64px)); }
.bark-modal-backdrop--right > .bark-modal--lg { width: min(720px, calc(100% - 64px)); }

/* Командная палитра: та же подложка, окно прижато к верху. */
.bark-modal-backdrop--top { align-items: flex-start; padding-top: max(env(safe-area-inset-top), 64px); }
.bark-modal-backdrop--top > .bark-modal { animation: bark-in var(--motion-base) var(--ease-out) backwards; }

/* На телефоне модалка — лист снизу: скругление только сверху, кнопки подвала
   колонкой во всю ширину. column-reverse ставит главную сверху, а отмену — у
   нижнего края, где её находит большой палец. Дровер и палитра на узком экране
   тоже становятся листом: дровер в 360px — это просто модалка. */
@media (max-width: 767px) {
  .bark-modal-backdrop,
  .bark-modal-backdrop--right,
  .bark-modal-backdrop--top { align-items: flex-end; justify-content: center; padding: 0; }
  .bark-modal,
  .bark-modal-backdrop--right > .bark-modal,
  .bark-modal-backdrop--top > .bark-modal {
    animation: bark-sheet-in var(--motion-base) var(--ease-out) backwards;
    border-radius: var(--radius-modal) var(--radius-modal) 0 0;
    border-width: 1px 0 0;
    height: auto;
    max-height: 88dvh;
    padding-bottom: env(safe-area-inset-bottom);
    width: 100%;
  }
  .bark-modal__footer { align-items: stretch; flex-direction: column-reverse; }
  .bark-modal__footer > .bark-btn { width: 100%; }
}

@keyframes bark-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bark-modal-in { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes bark-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes bark-drawer-in { from { opacity: 0.6; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes bark-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes bark-modal-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(4px) scale(0.99); } }
@keyframes bark-drawer-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(24px); } }
@keyframes bark-sheet-out { from { transform: none; } to { transform: translateY(100%); } }
@keyframes bark-pop-in { from { opacity: 0; transform: translateY(2px) scale(0.98); } to { opacity: 1; transform: none; } }

/* Закрытие (6.22.0, из ЛК) — тем же жестом, что открытие, но быстрее: окно уходит, а не
   обрывается. Класс .is-closing ставит closeDialog() из templates/dialog.snippet.js. */
.bark-modal-backdrop.is-closing { animation: bark-fade-out var(--motion-fast) var(--ease) both; pointer-events: none; }
.bark-modal-backdrop.is-closing > .bark-modal { animation: bark-modal-out var(--motion-fast) var(--ease) both; }
.bark-modal-backdrop--right.is-closing > .bark-modal { animation: bark-drawer-out var(--motion-fast) var(--ease) both; }
@media (max-width: 767px) {
  .bark-modal-backdrop.is-closing > .bark-modal,
  .bark-modal-backdrop--right.is-closing > .bark-modal { animation: bark-sheet-out var(--motion-base) var(--ease) both; }
}

/* Дровер из дровера (6.22.0, из ЛК): нижний остаётся на месте, у верхнего подложка
   прозрачная — второй слой затемнения превратил бы экран в черноту; в шапке «‹ Назад к …». */
.bark-modal-backdrop--nested { -webkit-backdrop-filter: none; backdrop-filter: none; background: transparent; }
.bark-modal-backdrop--nested > .bark-modal { box-shadow: var(--shadow-pop), -16px 0 32px color-mix(in srgb, var(--ink) 8%, transparent); }
.bark-modal__back {
  align-items: center;
  background: none;
  border: 0;
  border-radius: var(--radius-control);
  color: var(--ink2);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  font: 500 13px/1 var(--sans);
  gap: 4px;
  height: var(--control-sm);
  margin-left: -8px;
  max-width: 50%;
  min-width: 0;
  padding: 0 8px 0 4px;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.bark-modal__back > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bark-modal__back:hover { background: var(--chip); color: var(--ink); }
.bark-modal__back:focus-visible { box-shadow: var(--ring); outline: none; }
.bark-modal__back svg { flex: none; height: 18px; width: 18px; }
.bark-modal__back + * { margin-right: auto; min-width: 0; }

/* Подтверждение (BRK-101, templates/confirm.snippet.js): текст — что произойдёт, поле
   ввода или сверки, ошибка и «идёт дольше обычного» — внутри окна, а не тостом. */
.bark-confirm__text { color: var(--ink2); margin: 0; }
.bark-confirm__text + .bark-field { margin-top: 12px; }
.bark-confirm__notes:empty { display: none; }
.bark-confirm__notes { margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  .bark-modal-backdrop, .bark-modal { animation: none; }
  .bark-menu, .bark-tip { animation: none; }
  .bark-modal-backdrop.is-closing, .bark-modal-backdrop.is-closing > .bark-modal { animation: none; }
}

/* ---- Появление (6.15.0, из кита ЛК). У движения четыре глагола: появиться
   (.bark-in, .bark-stagger), всплыть (модалка, лист, тост), ждать (лоадеры и
   скелетон) и докрутиться — счёт числа: countUp() из motion.snippet.js за
   --motion-count (6.17.0). Других нет. ---- */
@keyframes bark-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bark-in { animation: bark-in var(--motion-slow) var(--ease-out) both; }
/* каскад: каждый следующий ребёнок на 40ms позже, после десятого — без задержки сверх */
.bark-stagger > * { animation: bark-in var(--motion-slow) var(--ease-out) both; animation-delay: calc(var(--bark-i, 0) * 40ms); }
.bark-stagger > :nth-child(2) { --bark-i: 1; } .bark-stagger > :nth-child(3) { --bark-i: 2; }
.bark-stagger > :nth-child(4) { --bark-i: 3; } .bark-stagger > :nth-child(5) { --bark-i: 4; }
.bark-stagger > :nth-child(6) { --bark-i: 5; } .bark-stagger > :nth-child(7) { --bark-i: 6; }
.bark-stagger > :nth-child(8) { --bark-i: 7; } .bark-stagger > :nth-child(9) { --bark-i: 8; }
.bark-stagger > :nth-child(n+10) { --bark-i: 9; }
@media (prefers-reduced-motion: reduce) {
  .bark-in, .bark-stagger > * { animation: none; }
}

/* ---- Loading: one system for app boot, routes, content regions, and async buttons. ---- */
@keyframes bark-loader-spin { to { transform: rotate(1turn); } }
@keyframes bark-route-progress {
  0% { transform: translateX(-120%); }
  55% { transform: translateX(125%); }
  100% { transform: translateX(300%); }
}
@keyframes bark-skeleton-shimmer {
  to { background-position-x: -200%; }
}

.bark-loader {
  --bark-loader-size: var(--loader-brand-lg-size);
  --bark-loader-mark-size: var(--loader-brand-lg-mark);
  display: inline-grid;
  flex: none;
  height: var(--bark-loader-size);
  place-items: center;
  width: var(--bark-loader-size);
}
.bark-loader--md {
  --bark-loader-size: var(--loader-brand-md-size);
  --bark-loader-mark-size: var(--loader-brand-md-mark);
}
.bark-loader--sm {
  --bark-loader-size: var(--loader-brand-sm-size);
  --bark-loader-mark-size: var(--loader-brand-sm-mark);
}
.bark-loader__ring,
.bark-loader__mark {
  display: block;
  grid-area: 1 / 1;
}
.bark-loader__ring {
  animation: bark-loader-spin var(--loader-duration) linear infinite;
  color: var(--accent);
  height: 100%;
  overflow: visible;
  width: 100%;
}
.bark-loader__ring circle {
  fill: none;
  stroke: currentColor;
  stroke-dasharray: 26 40;
  stroke-linecap: round;
  stroke-width: 1.5;
}
.bark-loader__mark {
  color: var(--ink);
  height: var(--bark-loader-mark-size);
  width: var(--bark-loader-mark-size);
}
.bark-loader__mark rect,
.bark-loader__mark path { fill: currentColor; }

.bark-loader-screen {
  align-items: center;
  background: var(--bg);
  display: grid;
  inset: 0;
  justify-items: center;
  position: fixed;
  z-index: 9999;
}
.bark-loader-region {
  align-content: center;
  display: grid;
  justify-items: center;
  min-height: 160px;
  padding: var(--space-6);
  text-align: center;
}
.bark-loader-screen[hidden],
.bark-loader-region[hidden] { display: none; }
.bark-loader__message {
  color: var(--muted);
  font: 500 13px/1.45 var(--sans);
  margin: 12px 0 0;
}

.bark-route-progress {
  background: var(--accent-soft);
  height: var(--loader-route-height);
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: sticky;
  top: 0;
  transition: opacity 100ms ease;
  width: 100%;
  z-index: 20;
}
.bark-route-progress::after {
  animation: bark-route-progress 1100ms ease-in-out infinite;
  background: var(--accent);
  content: "";
  inset: 0 auto 0 0;
  position: absolute;
  width: 38%;
}
.bark-route-progress[data-loading="true"] { opacity: 1; }

.bark-spinner {
  animation: bark-loader-spin var(--loader-duration) linear infinite;
  border: 2px solid color-mix(in srgb, currentColor 32%, transparent);
  border-radius: 50%;
  border-top-color: currentColor;
  box-sizing: border-box;
  display: inline-block;
  flex: none;
  height: var(--loader-button-size);
  width: var(--loader-button-size);
}
.bark-btn[aria-busy="true"] {
  cursor: progress;
  opacity: 1;
  pointer-events: none;
}
.bark-btn[aria-busy="true"]:active { transform: none; }

.bark-skeleton {
  animation: bark-skeleton-shimmer 1400ms linear infinite;
  background: linear-gradient(90deg, var(--chip) 30%, var(--surface-2) 48%, var(--chip) 66%);
  background-size: 300% 100%;
  border-radius: 6px;
  color: transparent;
  min-height: 16px;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.bark-progress {
  appearance: none;
  background: var(--line-2);
  border: 0;
  border-radius: 999px;
  display: block;
  height: 6px;
  overflow: hidden;
  width: 100%;
}
.bark-progress::-webkit-progress-bar { background: var(--line-2); }
.bark-progress::-webkit-progress-value { background: var(--accent); border-radius: inherit; }
.bark-progress::-moz-progress-bar { background: var(--accent); border-radius: inherit; }

.bark-sr-only {
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .bark-loader__ring,
  .bark-spinner,
  .bark-route-progress::after,
  .bark-skeleton { animation: none; }
  .bark-route-progress::after { transform: none; }
  .bark-skeleton { background: var(--chip); }
}

/* ---- Chart handoff tokens for chart libraries. ---- */
.bark-chart {
  --chart-primary: var(--accent);
  --chart-comparison: var(--ink2);
  --chart-grid: var(--line-2);
  --chart-area-opacity: 0.12;
  color: var(--ink);
  font-family: var(--sans);
}
.bark-chart__value { font-family: var(--mono); font-feature-settings: "tnum" 1; }

/* ---- Status pills: ok / warn / bad / info ---- */
.bark-pill {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font: 600 12px/1 var(--sans);
  gap: 6px;
  padding: 4px 10px;
}
.bark-pill--ok { background: var(--ok-soft); color: var(--ok-strong); }
.bark-pill--warn { background: var(--warn-soft); color: var(--warn-strong); }
.bark-pill--bad { background: var(--bad-soft); color: var(--bad-strong); }
.bark-pill--info { background: var(--info-soft); color: var(--info-strong); }

/* ---- Icons: outline set (Lucide), stroke 1.7; 18px in sidebar, 20px in content ---- */
.bark-icon { height: 20px; width: 20px; stroke-width: 1.7; }

/* ---- Page shell: pinned density (see docs/STYLE_GUIDE.md §Page shell). Working screens never
   exceed these gaps; air above 40px belongs only to empty states and auth screens. ---- */
.bark-main {
  /* Поля вынесены в переменные (6.20.0): аппбар — первый ребёнок main и выходит на всю
     ширину отрицательными полями ровно этой величины. Два места с одним числом — это
     одно число. */
  --main-pad-top: 24px;
  --main-pad-x: 32px;
  display: grid;
  /* Длинная KPI-подпись не задаёт min-content ширину всей колонке. */
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--space-6);
  min-width: 0;
  padding: var(--main-pad-top) var(--main-pad-x) 40px;
}
@media (max-width: 767px) { .bark-main { --main-pad-top: 16px; --main-pad-x: 16px; padding-bottom: 16px; } }
.bark-main--reading { justify-self: center; max-width: var(--reading-max); width: 100%; }
/* Колонка экрана (6.21.0, правила ЛК §1 и §5). У страницы один левый и один правый край:
   каждый прямой ребёнок main — шапка, вкладки, тулбар, карточки — встаёт в одну колонку
   по центру, и ни один не обрывается посреди страницы. Ширина колонки — одна из трёх:
   --page-std 1180 (по умолчанию), --page-max 1440 («шире» — это ровно 1440, а не своё
   число), --reading-max 840. Любая другая — только с причиной в комментарии рядом.
   Ограничивается КОЛОНКА внутри main, а не сам main (6.20.0): аппбар над ней — во всю
   ширину, и на мониторе шире по бокам не остаётся пустых полей без полосы. */
.bark-main { --page-col: var(--page-std); justify-items: center; }
.bark-main > :not(.bark-appbar, .bark-route-progress) { max-width: calc(var(--page-col) - 2 * var(--main-pad-x)); width: 100%; }
.bark-main--wide { --page-col: var(--page-max); }
/* без колонки — только экраны, которым физически мало и 1440 (канбан, KPI за 24 месяца) */
.bark-main--full > :not(.bark-appbar, .bark-route-progress) { max-width: none; }
.bark-main > .bark-appbar { justify-self: stretch; max-width: none; width: auto; }
/* УСТАРЕЛО с 6.21.0 → .bark-tiles. auto-fill даёт каждой секции своё число колонок: плитки
   разной ширины, зазор между рядами не совпадает с зазором между колонками. */
.bark-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
/* Сетка плиток (6.21.0, правило ЛК §7). У экрана из плиток ОДНА сетка: три колонки, один
   зазор по обеим осям; карточка занимает целое число ячеек (__span-2, __span-3), а не
   заводит свою сетку. Плитки одного ряда — одной высоты: карточка тянется на всю ячейку,
   а график в ней забирает остаток с нулевой базой — с базой auto svg с квадратным
   viewBox требует высоту, равную ширине, и раздувает карточку. Отступы задаёт только
   сетка: свой margin у карточки сложился бы с зазором. --2 — два парных блока одного рода
   («факт» и «прогноз») рядом, а не друг под другом. Обёртка вокруг карточки — __cell. */
.bark-tiles { align-items: stretch; display: grid; gap: var(--space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bark-tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bark-tiles > * { display: flex; flex-direction: column; margin: 0; min-width: 0; }
.bark-tiles__cell > * { flex: 1 1 auto; margin: 0; min-width: 0; }
.bark-tiles > * > .bark-chart { flex: 1 1 0; height: 0; min-height: 56px; }
.bark-tiles__span-2 { grid-column: span 2; }
.bark-tiles__span-3 { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .bark-tiles, .bark-tiles--2 { grid-template-columns: minmax(0, 1fr); }
  .bark-tiles__span-2, .bark-tiles__span-3 { grid-column: auto; }
}
/* Липкая колонка (6.21.0, правило ЛК §8): sticky + содержимое выше экрана = до низа не
   добраться никогда. Колонка прокручивается сама; на узком экране липкость и своя
   прокрутка снимаются вместе. Под липким аппбаром колонка встаёт ниже него. */
.bark-sticky-col {
  --sticky-top: 16px;
  align-self: start;
  max-height: calc(100dvh - var(--sticky-top) - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  position: sticky;
  top: var(--sticky-top);
}
.bark-main:has(> .bark-appbar) .bark-sticky-col { --sticky-top: 72px; }
@media (max-width: 900px) { .bark-sticky-col { max-height: none; overflow: visible; position: static; } }

/* ---- Page header: title block left, the screen's main action right. Утилиты оболочки
   (уведомления, аватар) с 6.20.0 живут в аппбаре над шапкой — .bark-appbar; __tools остаётся
   для инструментов самого экрана. ---- */
.bark-page-header {
  align-items: flex-start;
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
}
.bark-page-header__meta {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font: 500 12px/1.4 var(--sans);
  gap: 4px 10px;
  margin-top: 6px;
}
.bark-page-header__meta .bark-data { color: var(--ink2); }
/* Надзаголовок «Раздел · Экран» и описание экрана (6.19.0, PageHead из кита ЛК): что здесь,
   откуда данные и как часто обновляются — одной-двумя фразами, не инструкцией.
   6.20.0 — кегли и веса PageHead один в один: надзаголовок 10.5/600/.1em, описание 13.5 --muted
   шириной 580px. В ЛК надзаголовок --faint; у нас --muted: faint для текста запрещён, 2,63 на фоне. */
.bark-page-header__eyebrow { color: var(--muted); font: 600 10.5px/1.4 var(--sans); letter-spacing: 0.1em; margin: 0; text-transform: uppercase; }
.bark-page-header .bark-h1 { margin: 0; }
.bark-page-header__eyebrow + .bark-h1 { margin-top: 6px; }
.bark-page-header__desc { color: var(--muted); font: 400 13.5px/1.5 var(--sans); margin: 6px 0 0; max-width: 580px; }
.bark-page-header__tools {
  align-items: center;
  display: flex;
  flex: none;
  gap: 8px;
}
.bark-page-header__tool {
  align-items: center;
  background: transparent;
  border: 1px solid var(--line-control);
  border-radius: var(--radius-control);
  color: var(--ink2);
  cursor: pointer;
  display: inline-flex;
  /* Ярус control.md: 40px в legacy 6.x, 36px в пресете lk.
     Решение 30.10.2026 отменяет прежний запрет 36px-контрола.
     Высота и ширина берутся из одного токена, а не подбираются экраном.
     Действия строки и пагинация по-прежнему используют свой sm-ярус.
     Флип этого умолчания на ЛК без атрибута — только в 7.0. */
  height: var(--control-md);
  justify-content: center;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
  width: var(--control-md);
}
.bark-page-header__tool:hover { background: var(--chip); }
.bark-page-header__tool:focus-visible { box-shadow: var(--ring); outline: none; }
.bark-page-header__tool svg { height: 18px; width: 18px; }

/* ---- Аппбар (6.20.0, BRK-098): тонкая полоса во всю ширину рабочей области над шапкой
   экрана, как в ЛК. Слева — приветствие по времени суток (greeting() из format.snippet.js),
   справа — утилиты оболочки и аватар. Аватар — ЕДИНСТВЕННАЯ точка личности в оболочке:
   имя, почта и «Выйти» живут в его меню, а не в сайдбаре (блок .bark-sidebar__user устарел).

   Аппбар — первый ребёнок .bark-main: отрицательными полями ровно в поля main он выходит
   на всю ширину колонки и липнет к верху при прокрутке. Отдельной строкой сетки оболочки
   он быть не может: липкий элемент не выходит за свою ячейку, а ячейка — 56px.
   На телефоне аппбар забирает роль мобильной шапки: бургер слева, та скрывается. ---- */
.bark-appbar {
  /* Верхняя safe-area (BRK-139, 6.29.0, из ЛК): чёлка и Dynamic Island при viewport-fit=cover,
     в мини-аппе — вставки Telegram. Полоса растёт на вставку, кнопки остаются ниже выреза. */
  --appbar-safe-top: max(env(safe-area-inset-top, 0px), calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)));
  align-items: center;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 16px;
  margin: calc(-1 * var(--main-pad-top, 24px)) calc(-1 * var(--main-pad-x, 32px)) 0;
  min-height: calc(56px + var(--appbar-safe-top));
  /* элемент грида без этого держит min-content строки приветствия и распирает main на телефоне */
  min-width: 0;
  padding: var(--appbar-safe-top) var(--main-pad-x, 32px) 0;
  position: sticky;
  top: 0;
  /* выше липких шапок таблиц (--z-sticky): меню аватара не должно уходить под них */
  z-index: calc(var(--z-sticky) + 1);
}
.bark-appbar__greet {
  align-items: center;
  color: var(--ink);
  display: flex;
  flex: 1 1 auto;
  font: 600 14px/1.3 var(--sans);
  gap: 6px;
  margin: 0;
  min-width: 0;
}
.bark-appbar__greet-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bark-appbar__greet svg { color: var(--accent); flex: none; height: 15px; width: 15px; }
.bark-appbar__tools {
  align-items: center;
  display: flex;
  flex: none;
  gap: 8px;
}
/* Кнопки аппбара — 36px с рамкой контрола и иконкой цвета акцента, как в ЛК.
   В legacy 6.x это отдельный размер оболочки; в пресете lk — ярус md. */
.bark-appbar__tool,
.bark-appbar__burger {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line-control);
  border-radius: var(--radius-control);
  color: var(--accent);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  height: 36px;
  justify-content: center;
  padding: 0;
  position: relative;
  text-decoration: none;
  transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
  width: 36px;
}
.bark-appbar__tool:hover,
.bark-appbar__burger:hover { background: var(--chip); }
.bark-appbar__tool:focus-visible,
.bark-appbar__burger:focus-visible,
.bark-appbar__avatar:focus-visible { box-shadow: var(--ring); outline: none; }
.bark-appbar__tool[aria-current]:not([aria-current="false"]),
.bark-appbar__tool[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-line); }
.bark-appbar__tool svg,
.bark-appbar__burger svg { height: 17px; width: 17px; }
/* Бургер нужен только там, где сайдбар уехал в ящик. */
.bark-appbar__burger { display: none; }
/* Счётчик непрочитанного: число, а не точка — «3» говорит больше, чем «что-то есть». */
.bark-appbar__badge {
  /* заливка с текстом — ярус -strong и --on-fill, как у кнопки: порог AA держит тест */
  background: var(--accent-strong);
  border-radius: 9px;
  box-shadow: 0 0 0 2px var(--surface);
  color: var(--on-fill);
  display: grid;
  font: 700 11px/1 var(--sans);
  font-feature-settings: "tnum" 1;
  height: 18px;
  min-width: 18px;
  padding: 0 5px;
  place-items: center;
  position: absolute;
  /* вправо — только на 2px: дальше счётчик расширяет кнопку и на узком экране
     считается горизонтальным переполнением (tools/overflow.mjs); вверх — как в ЛК */
  right: -2px;
  top: -7px;
}
.bark-appbar__sep { background: var(--line); flex: none; height: 22px; margin: 0 2px; width: 1px; }
.bark-appbar__account { position: relative; }
.bark-appbar__avatar {
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  padding: 0;
}
/* Меню аватара: кто вошёл и «Выйти». Карточка 244px — ширина сайдбара, как в ЛК.
   Шаблон открывает его нативным popover (Esc и клик мимо — бесплатно); продукт со своим
   состоянием может показывать тот же блок без popover — тогда он висит под аватаром. */
.bark-appbar__menu {
  max-height: calc(100dvh - 68px);
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  width: 244px;
}
.bark-appbar__menu[popover] {
  inset: auto;
  margin: 0;
  position: fixed;
  right: var(--main-pad-x, 32px);
  top: calc(54px + var(--appbar-safe-top, 0px));
}
.bark-appbar__menu[popover]:not(:popover-open) { display: none; }
.bark-appbar__who {
  align-items: center;
  border-bottom: 1px solid var(--line-2);
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr);
  margin-bottom: 4px;
  padding: 6px 8px 10px;
}
.bark-appbar__who-info { display: grid; gap: 2px; min-width: 0; }
.bark-appbar__who-name {
  color: var(--ink);
  font: 600 13px/1.25 var(--sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bark-appbar__who-mail {
  color: var(--muted);
  font: 500 11px/1.3 var(--sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .bark-appbar { gap: 10px; min-height: calc(52px + var(--appbar-safe-top)); }
  .bark-appbar__burger { display: inline-flex; }
  .bark-appbar__menu[popover] { top: calc(50px + var(--appbar-safe-top, 0px)); }
  /* аппбар есть — мобильная шапка не нужна: бургер уже в нём, а две липкие полосы
     съели бы 108px первого экрана */
  .bark-shell:has(.bark-appbar) > .bark-mobile-header { display: none; }
}

/* -- «Назад» в список (BRK-140, 6.29.0, из ЛК): ссылка над карточкой, адрес — listHref() из
   shell.snippet.js, чтобы список открылся с тем же фильтром и прокруткой. -- */
.bark-back {
  align-items: center;
  border-radius: 4px;
  color: var(--accent-strong);
  display: inline-flex;
  font: 600 13px/1.3 var(--sans);
  gap: 6px;
  justify-self: start;
  text-decoration: none;
  white-space: nowrap;
}
.bark-back:hover { text-decoration: underline; text-underline-offset: 3px; }
.bark-back:focus-visible { box-shadow: var(--ring); outline: none; }
.bark-back svg { flex: none; height: 16px; width: 16px; }

/* -- Уведомления раздела на его странице (BRK-142, 6.29.0, из ЛК) — sectionNotices() из
   shell.snippet.js. Те же записи, что в колокольчике аппбара, отобранные по разделу:
   человек, пришедший в раздел из меню, видит их здесь, а не ищет в колокольчике. -- */
.bark-section-notices {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  display: grid;
  min-width: 0;
}
.bark-section-notices__head {
  align-items: center;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  display: flex;
  font: 600 13px/1.3 var(--sans);
  gap: 8px;
  padding: 10px 16px;
}
.bark-section-notices__head svg { color: var(--accent); flex: none; height: 16px; width: 16px; }
.bark-section-notices__item {
  align-items: baseline;
  color: var(--ink2);
  display: grid;
  font: 400 13px/1.45 var(--sans);
  gap: 2px 10px;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  padding: 10px 16px;
  text-decoration: none;
}
.bark-section-notices__item + .bark-section-notices__item { border-top: 1px solid var(--line-2); }
a.bark-section-notices__item:hover { background: var(--chip); }
.bark-section-notices__item:last-child { border-radius: 0 0 var(--radius-panel) var(--radius-panel); }
.bark-section-notices__item.is-unread { color: var(--ink); font-weight: 600; }
.bark-section-notices__item:not(.is-unread) > .bark-dot { visibility: hidden; }
.bark-section-notices__time { color: var(--muted); font: 400 12px/1.3 var(--sans); white-space: nowrap; }

/* ---- Avatar: photo from the SSO session or initials fallback (docs/SSO_AVATAR.md).
   Initials come from initialsFromName() — never invent a per-product formula. ---- */
.bark-avatar {
  align-items: center;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--accent-strong);
  display: inline-flex;
  flex: none;
  font: 600 13px/1 var(--sans);
  height: 32px;
  justify-content: center;
  letter-spacing: 0.02em;
  overflow: hidden;
  position: relative;
  user-select: none;
  width: 32px;
}
.bark-avatar img {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}
.bark-avatar--sm { font-size: 10px; height: 24px; width: 24px; }
.bark-avatar--lg { font-size: 16px; height: 40px; width: 40px; }
/* аватар аппбара — 36, в рост его кнопок (BRK-098); не ярус sm/md/lg, только там */
.bark-appbar__avatar > .bark-avatar { height: 36px; width: 36px; }

/* ---- Panel anatomy: pinned paddings (density is a brand constant, not a mood).
   --dense is the ONLY sanctioned tighter mode (tables/monitoring screens). ---- */
.bark-panel__header {
  align-items: center;
  border-bottom: 1px solid var(--line-2);
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  padding: 12px 16px;
}
.bark-panel__title { color: var(--ink); font: 600 15px/1.3 var(--sans); }
.bark-panel__body { padding: 12px 16px; }
.bark-panel__footer {
  border-top: 1px solid var(--line-2);
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  padding: 12px 16px;
}
/* Плотный режим стал ПО УМОЛЧАНИЮ — как у таблицы с 5.0.0. Панель осталась
   воздушной на год дольше только потому, что тогда её не тронули, а жалоба была
   общая: «страницы разной плотности, часто очень воздушные».

   Плотность меняют ВСЕ ТРИ части сразу. Опустить только тело нельзя: шапка
   отступала бы на 20px слева, тело на 16px, и левый край панели разъехался бы —
   это заметнее исходной воздушности.

   `--dense` оставлен рабочим псевдонимом: разметка, где он уже проставлен,
   выглядит ровно так же (tokens/deprecations.json). */
.bark-panel--roomy .bark-panel__header { padding: 16px 20px; }
.bark-panel--roomy .bark-panel__body { padding: 20px; }
.bark-panel--roomy .bark-panel__footer { padding: 12px 20px; }
.bark-panel--dense .bark-panel__body { padding: 12px 16px; }

/* ---- KPI / stat card: the standard dashboard unit ---- */
.bark-kpi { display: grid; gap: 6px; padding: 16px 20px; }
.bark-kpi__label { color: var(--muted); font: 500 12px/1.4 var(--sans); }
.bark-kpi__value {
  color: var(--ink);
  font: 600 24px/1.15 var(--mono);
  font-feature-settings: "tnum" 1;
}
.bark-kpi__hint { color: var(--muted); font: 500 11px/1.4 var(--sans); }

/* ==== Страница данных (6.17.0, из кита ЛК) ==========================================
   Токены у продуктов и кабинета давно общие, а страницы — разные: в кабинете есть
   готовые паттерны данных (полоса метрик, дельта, бар в строке, темп плана, сигналы,
   выводы, свежесть), и продукт собирал их сам из кнопок и таблиц. Здесь они перенесены
   с правилами бренда: текст — --muted и ярус -strong (не --faint и не базовый статус),
   полосы — не ниже 3:1 к дорожке, строки таблиц — 36px. Разметка и примеры — BRK-083…094,
   правила — COMPONENT_RULES §Страница данных. */

/* -- Полоса метрик (BRK-083). Подсетка держит значения на одной линии, даже если подпись
   переносится. Делитель — тень ячейки в щели 1px: при любом числе ячеек на хвосте ряда
   не остаётся серой дыры, как у сетки с фоном-делителем. -- */
.bark-kpi-strip {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr));
  overflow: hidden;
}
.bark-kpi-strip__cell {
  box-shadow: -1px -1px 0 var(--line-2);
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  min-width: 0;
  padding: 12px 16px;
  row-gap: 4px;
}
.bark-kpi-strip__label { align-self: end; color: var(--muted); font: 500 12px/1.4 var(--sans); }
.bark-kpi-strip__value {
  color: var(--ink);
  font: 600 22px/1.15 var(--mono);
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.bark-kpi-strip__value small,
.bark-metric__value small { color: var(--muted); font: 500 12px/1 var(--sans); letter-spacing: 0; margin-left: 2px; }
.bark-kpi-strip__hint { color: var(--muted); font: 500 11px/1.4 var(--sans); }
/* Цвет — только у исключения: «к удержанию» красное всегда, «без объяснительной» — когда не ноль. */
.bark-kpi-strip__cell.is-ok .bark-kpi-strip__value { color: var(--ok-strong); }
.bark-kpi-strip__cell.is-warn .bark-kpi-strip__value { color: var(--warn-strong); }
.bark-kpi-strip__cell.is-bad .bark-kpi-strip__value { color: var(--bad-strong); }

/* -- Метрика с дельтой (BRK-084). Карточка, когда метрике нужно своё место: дельта в
   строке подписи, значение, пояснение. Нажимаемая ведёт к своему разделу. -- */
.bark-metric-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 208px), 1fr)); }
.bark-metric {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 14px 16px;
  text-align: left;
}
.bark-metric__top { align-items: baseline; color: var(--muted); display: flex; flex-wrap: wrap; font: 500 12px/1.4 var(--sans); gap: 4px 8px; }
.bark-metric__top > .bark-delta { margin-left: auto; }
/* Основные KPI кабинета: меняется только явно выделенная подпись (A08).
   Дельта, значение и пояснение остаются в собственных стилях. */
.bark-metric--dashboard .bark-metric__label,
.bark-kpi--dashboard .bark-kpi__label {
  color: var(--muted);
  font: var(--kpi-dashboard-label-weight) var(--kpi-dashboard-label-size)/var(--kpi-dashboard-label-line-height) var(--sans);
  letter-spacing: var(--kpi-dashboard-label-tracking);
  text-transform: var(--kpi-dashboard-label-transform);
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.bark-metric__value {
  font: 600 26px/1.1 var(--mono);
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.bark-metric__sub { color: var(--muted); font: 500 12px/1.4 var(--sans); }
/* Рамка тона — украшение (1,5:1), состояние несёт цвет значения. */
.bark-metric.is-bad { border-color: var(--bad-line); }
.bark-metric.is-warn { border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.bark-metric.is-bad .bark-metric__value { color: var(--bad-strong); }
.bark-metric.is-warn .bark-metric__value { color: var(--warn-strong); }
a.bark-metric,
button.bark-metric {
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
a.bark-metric:hover,
button.bark-metric:hover { border-color: var(--line-control); box-shadow: var(--shadow-up); }
a.bark-metric:focus-visible,
button.bark-metric:focus-visible { box-shadow: var(--ring); outline: none; }

/* Дельта: знак и тон считает formatDelta() — «хорошо» зависит от метрики, рост
   увольнений плохой. Текст — ярус -strong. */
.bark-delta {
  font: 700 12px/1.2 var(--mono);
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}
.bark-delta--good { color: var(--ok-strong); }
.bark-delta--bad { color: var(--bad-strong); }
.bark-delta--flat { color: var(--muted); font-weight: 500; }

/* -- Бар доли (BRK-085): в ячейке таблицы, в списке, в карточке. --v — доля 0…1.
   Растёт с нуля при первом показе (@starting-style) и следует за значением; движется
   transform, а не width. Цвета тонов — ярус -strong: базовые --ok и --warn на дорожке
   дают 2,9 и 2,6:1. -- */
.bark-bar {
  background: var(--line-2);
  border-radius: 999px;
  display: block;
  height: 6px;
  min-width: 48px;
  overflow: hidden;
  position: relative;
}
.bark-bar > i {
  background: var(--accent);
  border-radius: inherit;
  inset: 0;
  position: absolute;
  transform: translateX(calc((min(max(var(--v, 0), 0), 1) - 1) * 100%));
  transition: transform var(--motion-slow) var(--ease-out);
}
@starting-style { .bark-bar > i { transform: translateX(-100%); } }
.bark-bar--thin { height: 4px; }
.bark-bar--ok > i { background: var(--ok-strong); }
.bark-bar--warn > i { background: var(--warn-strong); }
.bark-bar--bad > i { background: var(--bad-strong); }
.bark-bar--ink > i { background: var(--ink2); }
/* ячейка с баром — 40 % таблицы: остаток делят текст и числа (.bark-table__hug).
   На всю свободную ширину бар отжимал имена в две строки на узком экране. */
.bark-bar-cell { min-width: 96px; width: 40%; }

/* -- Темп плана (BRK-086): факт к плану и засечка «где должны быть сегодня».
   Тон — по темпу (факт / должно быть к сегодня), а не по проценту плана: в середине
   месяца любой план меньше 100 %, и красным было бы всё. -- */
.bark-pace { display: block; padding: 3px 0; position: relative; }
.bark-pace > .bark-bar { height: 8px; }
.bark-pace--thin > .bark-bar { height: 6px; }
.bark-pace__tick {
  background: var(--ink);
  border-radius: 1px;
  bottom: 0;
  left: calc(min(max(var(--tick, 0), 0), 1) * 100%);
  margin-left: -1px;
  opacity: 0.6;
  position: absolute;
  top: 0;
  width: 2px;
}

/* -- Сигналы «Требует внимания» (BRK-087): строка на правило, в ней сущности со своим
   значением. Правило без сущностей не показывается. -- */
.bark-attention { display: grid; gap: 8px; }
.bark-attention__row { align-items: baseline; display: flex; flex-wrap: wrap; gap: 6px 12px; }
.bark-attention__label { align-items: center; display: inline-flex; font: 700 13px/1.4 var(--sans); gap: 6px; white-space: nowrap; }
.bark-attention__label svg { flex: none; height: 14px; width: 14px; }
.bark-attention__row--bad .bark-attention__label,
.bark-attention__row--bad .bark-attention__item b { color: var(--bad-strong); }
.bark-attention__row--warn .bark-attention__label,
.bark-attention__row--warn .bark-attention__item b { color: var(--warn-strong); }
.bark-attention__items { display: flex; flex-wrap: wrap; gap: 6px; }
.bark-attention__item {
  align-items: baseline;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  display: inline-flex;
  font: 500 12px/1.4 var(--sans);
  gap: 6px;
  padding: 3px 10px;
}
.bark-attention__item b { font: 700 12px/1.4 var(--mono); font-feature-settings: "tnum" 1; }
/* нажимаемая сущность — контрол: граница --line-control, кольцо фокуса */
a.bark-attention__item,
button.bark-attention__item {
  border-color: var(--line-control);
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
a.bark-attention__item:hover,
button.bark-attention__item:hover { border-color: var(--accent); }
a.bark-attention__item:focus-visible,
button.bark-attention__item:focus-visible { box-shadow: var(--ring); outline: none; }

/* -- Выводы периода (BRK-088): три-пять фраз с жирными числами вместо абзаца. -- */
.bark-insights__title { align-items: center; color: var(--accent-strong); display: flex; font: 600 12px/1.4 var(--sans); gap: 6px; margin: 0 0 8px; }
.bark-insights__title svg { flex: none; height: 14px; width: 14px; }
.bark-insights ul { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; }
.bark-insights li { color: var(--ink2); display: flex; font: 400 13px/1.5 var(--sans); gap: 8px; }
.bark-insights li::before { background: var(--accent); border-radius: 50%; content: ""; flex: none; height: 5px; margin-top: 8px; width: 5px; }
.bark-insights li b { color: var(--ink); font-weight: 600; }

/* -- Строка сведений, свежесть, сноска (BRK-089). -- */
.bark-meta-line { align-items: baseline; color: var(--muted); display: flex; flex-wrap: wrap; font: 500 12px/1.5 var(--sans); gap: 4px 16px; }
.bark-meta-line b { color: var(--ink); font: 600 12px/1.5 var(--mono); font-feature-settings: "tnum" 1; }
/* «обновлено 17:40 · 5 мин назад»; тикает раз в минуту (freshness()), позже порога — предупреждение */
.bark-fresh { color: var(--muted); font: 500 12px/1.4 var(--mono); font-feature-settings: "tnum" 1; white-space: nowrap; }
.bark-fresh[data-stale] { color: var(--warn-strong); }
.bark-footnote { border-top: 1px solid var(--line-2); color: var(--muted); font: 400 12px/1.5 var(--sans); margin: 0; padding: 10px 16px 12px; }

/* -- Список баров (BRK-090): подпись, дорожка, значение. Подсетка даёт всем дорожкам
   одну ширину — бары сравнимы глазом. -- */
.bark-bar-list {
  align-items: center;
  display: grid;
  gap: 8px 12px;
  grid-template-columns: minmax(96px, max-content) minmax(0, 1fr) max-content;
}
.bark-bar-list__row { align-items: center; display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
.bark-bar-list__label { color: var(--ink2); font: 500 13px/1.4 var(--sans); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bark-bar-list__row > .bark-bar { height: 8px; }
.bark-bar-list__value { color: var(--ink); font: 600 13px/1.4 var(--mono); font-feature-settings: "tnum" 1; text-align: right; white-space: nowrap; }
.bark-bar-list__value small { color: var(--muted); font: 500 12px/1.4 var(--sans); margin-left: 4px; }
.bark-bar-list__row--total .bark-bar-list__label { color: var(--ink); font-weight: 600; }

/* -- Список чипов с «ещё N» (BRK-091) и метка-точка. Состав заказа, теги: первые N
   видны, остаток — одним чипом с полным списком в подсказке (chipList()). -- */
.bark-chip-list { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.bark-chip-list > * {
  background: var(--chip);
  border-radius: 999px;
  color: var(--ink2);
  font: 500 12px/1.5 var(--sans);
  max-width: 100%;
  overflow: hidden;
  padding: 1px 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bark-chip-list > .bark-chip-list__more { color: var(--muted); }
/* Метка-точка вместо пилюли в каждой строке таблицы: цвет — только у того, что требует
   внимания. Точка — базовый тон, текст — -strong. */
.bark-tone { align-items: center; display: inline-flex; font: 600 13px/1.4 var(--sans); gap: 6px; white-space: nowrap; }
.bark-tone::before { background: currentColor; border-radius: 50%; content: ""; flex: none; height: 6px; width: 6px; }
.bark-tone--ok { color: var(--ok-strong); }
.bark-tone--warn { color: var(--warn-strong); }
.bark-tone--bad { color: var(--bad-strong); }
.bark-tone--muted { color: var(--muted); font-weight: 500; }

/* -- Спарклайн и список трендов (BRK-092). SVG собирает sparkline(); без осей, одна
   серия и пунктир сравнения. -- */
.bark-sparkline { display: block; flex: none; overflow: visible; }
.bark-sparkline__area { fill: var(--accent); fill-opacity: var(--chart-area-opacity, 0.12); }
.bark-sparkline__line { fill: none; stroke: var(--accent); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.bark-sparkline__cmp { fill: none; stroke: var(--muted); stroke-dasharray: 2 2; stroke-width: 1; vector-effect: non-scaling-stroke; }
.bark-sparkline--ok .bark-sparkline__line { stroke: var(--ok-strong); }
.bark-sparkline--ok .bark-sparkline__area { fill: var(--ok-strong); }
.bark-sparkline--warn .bark-sparkline__line { stroke: var(--warn-strong); }
.bark-sparkline--warn .bark-sparkline__area { fill: var(--warn-strong); }
.bark-trend-list { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; }
.bark-trend-list__row { align-items: center; border-radius: var(--radius-control); display: flex; gap: 10px; padding: 6px 8px; }
/* ширина 0 при flex 1: имя с многоточием не отдаёт родителю свою длину как минимум —
   иначе список распирал узкую колонку на 320px */
.bark-trend-list__name { color: var(--ink); flex: 1 1 0; font: 500 13px/1.4 var(--sans); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 0; }
.bark-trend-list__value { font: 600 12px/1.4 var(--mono); font-feature-settings: "tnum" 1; white-space: nowrap; }
a.bark-trend-list__row,
button.bark-trend-list__row { background: none; border: 0; color: inherit; cursor: pointer; text-align: left; text-decoration: none; width: 100%; }
a.bark-trend-list__row:hover,
button.bark-trend-list__row:hover { background: var(--surface-2); }
a.bark-trend-list__row:focus-visible,
button.bark-trend-list__row:focus-visible { box-shadow: var(--ring); outline: none; }

/* -- Подсказка графика (BRK-093). Для своих графиков и для ECharts (tooltip.className). -- */
.bark-chart-tooltip {
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-pop);
  color: var(--ink);
  display: grid;
  font: 500 12px/1.5 var(--sans);
  gap: 2px;
  padding: 6px 10px;
  pointer-events: none;
  white-space: nowrap;
}
.bark-chart-tooltip b { font: 600 12px/1.5 var(--mono); font-feature-settings: "tnum" 1; }
.bark-chart-tooltip__muted { color: var(--muted); font-size: 11px; }

/* ---- Графики экрана данных (BRK-116…121, 6.26.0, из ЛК) — templates/chart.snippet.js.
   Дневной ряд — линия с заливкой 12 %; незаконченный день — пунктир и полая точка; у максимума
   и минимума подписи; опорная линия и полоса всегда подписаны; до 3 сравнений пунктиром. */
.bark-linechart { display: grid; gap: 4px; min-width: 0; }
.bark-linechart__legend { align-items: center; display: flex; flex-wrap: wrap; gap: 4px 14px; min-width: 0; }
.bark-linechart__key { align-items: center; color: var(--muted); display: inline-flex; font: 500 12px/1.4 var(--sans); gap: 6px; white-space: nowrap; }
.bark-linechart__key > i { border-radius: 2px; display: inline-block; height: 3px; width: 14px; }
.bark-linechart__key--cmp > i { background: none; border-radius: 0; border-top: 2px dashed; height: 0; }
.bark-linechart__key b { color: var(--ink); font: 600 13px/1.4 var(--mono); font-feature-settings: "tnum" 1; }
.bark-linechart__delta { font: 600 12px/1.4 var(--mono); font-feature-settings: "tnum" 1; }
.bark-linechart__delta.is-up { color: var(--ok-strong); }
.bark-linechart__delta.is-down { color: var(--bad-strong); }
.bark-linechart__smooth { margin-left: auto; }
.bark-linechart__plot {
  border-radius: var(--radius-sm);
  cursor: crosshair;
  height: var(--chart-h, 156px);
  position: relative;
  touch-action: pan-y;
}
.bark-linechart__plot:focus-visible { box-shadow: var(--ring); outline: none; }
/* Слой графика и ось отступают от краёв на радиус точки, а по горизонтали слой режет всё, что
   дальше этого запаса: полая точка последнего дня целиком видна, страница не получает
   горизонтальной прокрутки. По вертикали не режет — подпись минимума у нуля видна. */
.bark-linechart__layer { inset: 0 5px; overflow-clip-margin: 5px; overflow-x: clip; position: absolute; }
.bark-linechart__layer > svg { display: block; height: 100%; overflow: visible; width: 100%; }
.bark-linechart__area { fill-opacity: var(--chart-area-opacity, 0.12); }
.bark-linechart__line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; vector-effect: non-scaling-stroke; }
.bark-linechart__line--partial { opacity: 0.7; stroke-dasharray: 4 4; }
.bark-linechart__cmp { fill: none; opacity: 0.85; stroke-dasharray: 4 3; stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.bark-linechart__ref { stroke: var(--ink); stroke-dasharray: 4 3; stroke-opacity: 0.5; stroke-width: 1; vector-effect: non-scaling-stroke; }
.bark-linechart__band { fill: var(--ink2); fill-opacity: 0.07; stroke: var(--line-control); stroke-dasharray: 2 2; stroke-width: 1; vector-effect: non-scaling-stroke; }
.bark-linechart__base { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bark-linechart__peak,
.bark-linechart__low {
  font: 700 11px/1 var(--mono);
  font-feature-settings: "tnum" 1;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}
.bark-linechart__low { color: var(--muted); }
.bark-linechart__ref-label,
.bark-linechart__band-label {
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  border-radius: 4px;
  color: var(--muted);
  font: 500 11px/1.3 var(--sans);
  padding: 0 4px;
  pointer-events: none;
  position: absolute;
  white-space: nowrap;
}
.bark-linechart__ref-label { right: 0; }
.bark-linechart__band-label { left: 0; }
.bark-linechart__dot {
  border: 2px solid var(--surface);
  border-radius: 50%;
  height: 8px;
  margin: -4px 0 0 -4px;
  pointer-events: none;
  position: absolute;
  width: 8px;
}
.bark-linechart__dot.is-partial { background: var(--surface); border: 1.5px dashed; height: 9px; margin: -4.5px 0 0 -4.5px; pointer-events: auto; width: 9px; }
.bark-linechart__cross { border-left: 1px dashed var(--ink2); bottom: 0; opacity: 0.5; pointer-events: none; position: absolute; top: 0; }
.bark-linechart__tip { position: absolute; top: -6px; transform: translate(-50%, -100%); z-index: 5; }
.bark-linechart__axis,
.bark-chart-axis { height: 14px; position: relative; }
.bark-linechart__axis > span,
.bark-chart-axis > span {
  color: var(--muted);
  font: 500 10px/14px var(--mono);
  font-feature-settings: "tnum" 1;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}
.bark-linechart__axis > span.is-first,
.bark-chart-axis > span.is-first { transform: none; }
.bark-linechart__axis > span.is-last,
.bark-chart-axis > span.is-last { transform: translateX(-100%); }
.bark-chart-axis { margin-top: 3px; }
.bark-linechart__axis > span.is-hot { color: var(--accent-strong); font-weight: 700; }
.bark-linechart__axis > span.is-covered { visibility: hidden; }
.bark-linechart__plot [hidden] { display: none; }
.bark-linechart__axis { margin-inline: 5px; }

/* Столбики месяцев: тон — по темпу плана, отметка плана — штрих; идущий месяц штрихован. */
.bark-colchart { align-items: stretch; border-bottom: 1px solid var(--line-2); display: flex; gap: 4px; height: var(--chart-h, 120px); padding-top: 18px; }
.bark-colchart__col { border-radius: var(--radius-sm); display: flex; flex: 1 1 0; flex-direction: column; justify-content: flex-end; min-width: 0; position: relative; }
.bark-colchart__col:focus-visible { box-shadow: var(--ring); outline: none; }
.bark-colchart__bar { background: var(--accent); border-radius: 3px 3px 0 0; display: block; max-width: 28px; margin: 0 auto; width: 100%; }
.bark-colchart__col--ok .bark-colchart__bar { background: var(--ok-strong); }
.bark-colchart__col--warn .bark-colchart__bar { background: var(--warn-strong); }
.bark-colchart__col--bad .bark-colchart__bar { background: var(--bad-strong); }
.bark-colchart__col.is-partial .bark-colchart__bar {
  background: repeating-linear-gradient(135deg, var(--accent) 0 3px, color-mix(in srgb, var(--accent) 45%, transparent) 3px 6px);
}
.bark-colchart__plan { border-top: 2px solid var(--ink); left: 50%; max-width: 36px; opacity: 0.55; position: absolute; transform: translateX(-50%); width: 100%; }
.bark-colchart__value { color: var(--ink2); font: 600 11px/1 var(--mono); font-feature-settings: "tnum" 1; left: 0; overflow: hidden; position: absolute; right: 0; text-align: center; white-space: nowrap; }
.bark-colchart__legend { align-items: center; color: var(--muted); display: flex; font: 500 12px/1.4 var(--sans); gap: 6px; }
.bark-colchart__legend > i { border-top: 2px solid var(--ink); display: inline-block; opacity: 0.55; width: 14px; }
.bark-colchart.is-narrow .bark-colchart__value { display: none; }

/* Леденец: редкий дневной ряд — линия между нулями рисует «треугольники». */
.bark-lollipop { align-items: stretch; border-bottom: 1px solid var(--line-2); display: flex; gap: 2px; height: var(--chart-h, 96px); }
.bark-lollipop__col { align-items: center; border-radius: var(--radius-sm); display: flex; flex: 1 1 0; flex-direction: column; justify-content: flex-end; min-width: 0; position: relative; }
.bark-lollipop__col:focus-visible { box-shadow: var(--ring); outline: none; }
.bark-lollipop__stem { background: color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 1px; display: block; min-height: 0; order: 2; width: 2px; }
.bark-lollipop__dot { background: color-mix(in srgb, var(--accent) 80%, transparent); border-radius: 50%; display: block; flex: none; height: 7px; margin-bottom: -1px; order: 1; width: 7px; }
.bark-lollipop__col:is(:hover, :focus-visible) .bark-lollipop__stem { background: color-mix(in srgb, var(--accent) 75%, transparent); }
.bark-lollipop__col:is(:hover, :focus-visible) .bark-lollipop__dot { background: var(--accent); }
.bark-lollipop__col.is-zero .bark-lollipop__dot { opacity: 0.25; }
.bark-lollipop__col.is-partial .bark-lollipop__dot { background: var(--surface); border: 1.5px dashed var(--accent); }

/* Воронка: шкала — от выбранной стадии, стадии до неё — числом без полосы. */
.bark-funnel { display: grid; gap: 8px; grid-template-columns: minmax(64px, max-content) minmax(0, 1fr) max-content; min-width: 0; }
.bark-funnel__row { align-items: center; display: grid; gap: 10px; grid-column: 1 / -1; grid-template-columns: subgrid; }
.bark-funnel__label { color: var(--ink2); font: 500 13px/1.4 var(--sans); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bark-funnel__track { background: var(--line-2); border-radius: 4px; display: block; height: 14px; overflow: hidden; }
.bark-funnel__bar { background: var(--accent); border-radius: 4px; display: block; height: 100%; min-width: 2px; }
.bark-funnel__bar--ok { background: var(--ok-strong); }
.bark-funnel__bar--bad { background: var(--bad-strong); }
.bark-funnel__bar--ink { background: var(--ink2); }
.bark-funnel__value { color: var(--ink); font: 600 13px/1.4 var(--mono); font-feature-settings: "tnum" 1; text-align: right; white-space: nowrap; }
.bark-funnel__value small { color: var(--muted); font: 500 12px/1.4 var(--sans); margin-left: 6px; }
.bark-funnel__row.is-text .bark-funnel__label { color: var(--muted); }
.bark-funnel__note { color: var(--muted); font: 500 12px/1.4 var(--sans); }

/* -- Тексты и контент (BRK-122…128, 6.27.0, из ЛК) — templates/text.snippet.js.
   Текст человека показывается как написан: переносы и абзацы, длинная ссылка не рвёт колонку.
   Ссылка внутри текста подчёркнута: среди слов её иначе не видно. -- */
.bark-usertext { overflow-wrap: anywhere; white-space: pre-wrap; }
.bark-usertext .bark-link { font-weight: inherit; text-decoration: underline; text-decoration-color: var(--accent-line); }
.bark-usertext .bark-link:hover { text-decoration-color: currentColor; }

/* Отдел из HR: человеческое имя и иконка из справочника. Неизвестный код — моно и приглушён:
   пропажа справочника видна, а не выдаётся за имя. */
.bark-dept { align-items: center; display: inline-flex; gap: 6px; min-width: 0; }
.bark-dept__icon { color: var(--muted); display: inline-flex; flex: none; }
.bark-dept__icon svg { height: 16px; stroke-width: 1.7; width: 16px; }
.bark-dept.is-unknown { color: var(--muted); font-family: var(--mono); font-size: 0.92em; }

/* Пометка «бета» и «бот» — серая, не акцентная: акцент на экране значит «действуй», а это
   справка. Слово строчными, по-русски. */
.bark-beta,
.bark-author__tag {
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line-control);
  color: var(--muted);
  display: inline-block;
  font: 600 10px/1.4 var(--sans);
  letter-spacing: 0.02em;
  padding: 1px 6px;
  vertical-align: middle;
  white-space: nowrap;
}

/* Автор: человек — имя без отчества; бот — своё имя, приглушённое, с пометкой «бот». */
.bark-author { align-items: center; display: inline-flex; gap: 6px; min-width: 0; }
.bark-author__name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bark-author--bot .bark-author__name { color: var(--muted); font-weight: 500; }

/* Чей ход: «Ждёт вас» — акцент (действовать мне), «Ждёт: …» — серый, «Готово» — ok. */
/* В узкой колонке «чьё это» уходит на вторую строку, а не за край. */
.bark-turn { align-items: center; color: var(--muted); column-gap: 6px; display: inline-flex; flex-wrap: wrap; font: 500 12px/1.4 var(--sans); max-width: 100%; }
.bark-turn::before { background: currentColor; border-radius: 50%; content: ""; flex: none; height: 6px; width: 6px; }
.bark-turn--accent { color: var(--accent-strong); font-weight: 600; }
.bark-turn--ok { color: var(--ok-strong); }
/* Чьё это: внутри статуса, после точки — «Ждёт: Анна Смирнова · заказ подчинённого». */
.bark-turn__whose { color: var(--muted); font-weight: 500; white-space: nowrap; }
.bark-turn__whose::before { content: "· "; }

/* -- Подсказка бренда (BRK-100, 6.22.0, из ЛК) — вместо нативного title. Одна на страницу,
   в портале (body) на --z-popover: overflow контейнера её не режет, модалка не перекрывает.
   Стекло — то же, что у подсказки графика. Положение ставит templates/tip.snippet.js:
   над элементом, у верхнего края экрана — под ним (--below). Перенос строки — \n в тексте. -- */
.bark-tip {
  -webkit-backdrop-filter: var(--glass-blur);
  animation: bark-pop-in var(--motion-fast) var(--ease) backwards;
  backdrop-filter: var(--glass-blur);
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-pop);
  color: var(--ink);
  font: 500 12px/1.45 var(--sans);
  left: 0;
  max-width: min(460px, calc(100vw - 24px));
  overflow-wrap: anywhere;
  padding: 6px 10px;
  pointer-events: none;
  position: fixed;
  top: 0;
  white-space: pre-line;
  z-index: var(--z-popover);
}
.bark-tip[hidden] { display: none; }

/* -- Докрутка и обновление (BRK-094). Число докручивается countUp() за --motion-count;
   строки таблицы появляются каскадом только прозрачностью (transform у <tr> ломает
   раскладку в WebKit); при обновлении старые данные остаются под вуалью, лоадер — через
   150ms. -- */
.bark-count { font-feature-settings: "tnum" 1; }
.bark-stagger--rows > * { animation-name: bark-fade; }
.bark-refreshing {
  animation: bark-fade var(--motion-base) var(--ease) 150ms both;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  border-radius: inherit;
  display: grid;
  inset: 0;
  place-items: center;
  position: absolute;
  z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
  .bark-bar > i { transition: none; }
  .bark-refreshing { animation-duration: 1ms; }
}

/* ---- Data table: base spec. Numbers right in mono, text left, statuses = pills.
   No zebra; hover = --surface-2; rows 36px (44px в --roomy), header 40px caption-style. ---- */
.bark-table {
  border-collapse: collapse;
  color: var(--ink);
  font: 400 14px/1.4 var(--sans);
  width: 100%;
}
.bark-table th {
  color: var(--muted);
  font: 700 11px/1.2 var(--sans);
  height: 40px;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
}
/* Плотный режим стал ПО УМОЛЧАНИЮ. Исходная жалоба к системе звучала как
   «страницы разной плотности, часто очень воздушные» (docs/INTERFACE_AUDIT.md):
   44px на строку — это рабочий экран, который показывает на треть меньше данных,
   чем мог бы. Просторный режим никуда не делся, он теперь называется по имени и
   выбирается осознанно. `--dense` был рабочим псевдонимом до 6.0.0 и удалён в
   назначенный срок — запись в deprecations.json осталась и теперь роняет сборку
   у тех, кто его ещё применяет. */
.bark-table td { border-top: 1px solid var(--line-2); height: 36px; }
.bark-table--roomy td { height: 44px; }
.bark-table th, .bark-table td { padding: 0 12px; }
.bark-table th:first-child, .bark-table td:first-child { padding-left: 20px; }
.bark-table th:last-child, .bark-table td:last-child { padding-right: 20px; }
/* Тесная таблица (6.21.0, правило ЛК §5): широкая денежная сводка влезает в 1440 без
   прокрутки. Лишний пиксель в ячейке умножается на число столбцов — из этого прокрутка и
   набегает, поэтому поля 7px. Последняя текстовая колонка резиновая (__grow), а не
   фиксированная. Влезет ли — проверяют суммой минимальных ширин столбцов. */
.bark-table--tight { font-size: 12.5px; }
.bark-table--tight th { height: 34px; }
.bark-table--tight th, .bark-table--tight td { padding: 0 7px; }
.bark-table--tight th:first-child, .bark-table--tight td:first-child { padding-left: 12px; }
.bark-table--tight th:last-child, .bark-table--tight td:last-child { padding-right: 12px; }
.bark-table__grow { min-width: 160px; width: 100%; }
.bark-table tbody tr { transition: background var(--motion-fast) var(--ease); }
.bark-table tbody tr:hover { background: var(--surface-2); }
.bark-table tbody tr[aria-selected="true"] { background: var(--accent-soft); }
.bark-table .bark-data, .bark-table td[data-type="number"] {
  font-feature-settings: "tnum" 1;
  text-align: right;
}
/* Число не переносится: «1 284 / 300» на двух строках читается как два числа (6.24.0). */
.bark-table :is(td, th)[data-type="number"] { white-space: nowrap; }

/* ---- Table sorting: exactly ONE active sort; th carries aria-sort. First click — numbers/dates
   desc, text asc; second click flips. The whole header label is the button. ---- */
.bark-table__sort {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 6px;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  gap: 4px;
  letter-spacing: inherit;
  margin: -2px -4px;
  padding: 2px 4px;
  text-transform: inherit;
  transition: color var(--motion-fast) var(--ease);
}
.bark-table__sort:hover { color: var(--ink2); }
.bark-table__sort:focus-visible { box-shadow: var(--ring); outline: none; }
.bark-table__sort svg { flex: none; height: 14px; width: 14px; }
.bark-table th[aria-sort] .bark-table__sort { color: var(--accent-strong); }

/* ---- Row actions: right-aligned last column; <=2 inline icon buttons, 3+ => kebab + menu ---- */
.bark-table th.bark-table__actions,
.bark-table td.bark-table__actions { text-align: right; white-space: nowrap; width: 1%; }

/* ---- Таблица экрана данных (6.24.0, из ЛК; BRK-106…108): итоги, группы, липкие части,
   рост строки под контрол, кликабельная строка, выделение «моё / текущее / проблемное». ---- */
.bark-table { --table-bg: var(--surface); --table-head-h: 40px; }
.bark-table--tight { --table-head-h: 34px; }

/* Итоги — <tfoot>: в рост шапки, чуть выше строк, заливка и полужирный — итог видно сразу. */
.bark-table tfoot td,
.bark-table tfoot th {
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  color: var(--ink);
  font: 650 14px/1.4 var(--sans);
  height: 40px;
  letter-spacing: 0;
  text-transform: none;
}
.bark-table--roomy tfoot td { height: 44px; }
.bark-table--tight tfoot :is(td, th) { font-size: 12.5px; height: 34px; }

/* Группа строк — свой <tbody class="bark-table__grp">, первая строка — .bark-table__group:
   заголовок группы сплошной заливкой, итоги группы — под своими колонками. */
.bark-table__group > th,
.bark-table__group > td {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-2);
  border-top: 1px solid var(--line);
  color: var(--ink);
  font: 600 13px/1.35 var(--sans);
  height: 44px;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
}
.bark-table__group > td[data-type="number"] { text-align: right; }
.bark-table thead + .bark-table__grp > .bark-table__group > * { border-top: 0; }
.bark-table tbody tr.bark-table__group:hover { background: none; }
.bark-table__group-in { align-items: center; display: inline-flex; gap: 8px; min-width: 0; white-space: nowrap; }
.bark-table__group-toggle {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  height: 24px;
  justify-content: center;
  padding: 0;
  transition: color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
  width: 24px;
}
.bark-table__group-toggle svg { height: 16px; width: 16px; }
.bark-table__group-toggle:hover { color: var(--ink); }
.bark-table__group-toggle:focus-visible { box-shadow: var(--ring); outline: none; }
.bark-table__group-toggle[aria-expanded="false"] { transform: rotate(-90deg); }
.bark-table__grp[data-collapsed] > tr:not(.bark-table__group) { display: none; }

/* Строка сама растёт до 44px, если в ней поле, рамочная кнопка, чип, сегмент или аватар крупнее
   24px: в 36 они упираются в разделители. Ghost-действие строки (32px) строку не раздвигает. */
.bark-table:not(.bark-table--tight) > tbody > tr:not(.bark-table__group):has(> td :is(.bark-field__control, select, .bark-btn:not(.bark-btn--ghost), .bark-filter-chip, .bark-toggle-chip, .bark-seg, .bark-avatar:not(.bark-avatar--sm))) > td { height: 44px; }

/* Кликабельная строка — tr[data-href] (переход) или .is-clickable (своё действие): курсор и
   фокус с клавиатуры. Кольцо — на ячейках: его видно и поверх закреплённой колонки. */
.bark-table tbody tr:is([data-href], .is-clickable) { cursor: pointer; }
/* фокус строки — кольцо системы (цвет --ring) контуром всей строки и заливка, как при наведении */
.bark-table tbody tr:is([data-href], .is-clickable):focus-visible { outline: 3px solid var(--accent-line); outline-offset: -3px; }
.bark-table tbody tr:is([data-href], .is-clickable):focus-visible > td { background-color: var(--surface-2); }

/* Выделение на всю строку или колонку (ui-rules §9): экран не монотонно серый — моё, текущее и
   проблемное видно сразу, а цветных таблеток в каждой строке нет. Тон — слоем поверх фона
   ячейки, чтобы закреплённая колонка не просвечивала. */
.bark-table tr.bark-table__row--mine { --table-row-tone: var(--accent-soft); }
.bark-table tr.bark-table__row--problem { --table-row-tone: var(--bad-soft); }
.bark-table tr.bark-table__row--current { --table-row-tone: var(--surface-2); }
.bark-table tr.bark-table__row--current > td { font-weight: 600; }
.bark-table tr:is(.bark-table__row--mine, .bark-table__row--problem, .bark-table__row--current) > td {
  background-image: linear-gradient(var(--table-row-tone), var(--table-row-tone));
}
.bark-table :is(th, td).bark-table__col--current { background-image: linear-gradient(var(--accent-soft), var(--accent-soft)); }

/* Липкая шапка (и итоги снизу): липнет к ближайшему прокручиваемому предку — к окну или к
   области со своей высотой. .bark-scroll-x сама прокручиваемая: для широкой таблицы с липкой
   шапкой дайте обёртке высоту (.bark-scroll-x.bark-scroll + max-height). */
.bark-table--sticky-head thead th {
  background-color: var(--table-bg);
  box-shadow: inset 0 -1px 0 var(--line-2);
  position: sticky;
  top: var(--table-sticky-top, 0px);
  z-index: 2;
}
.bark-table--sticky-head tfoot :is(td, th) { bottom: 0; position: sticky; z-index: 2; }
/* Липкая первая колонка: имя строки остаётся на месте, пока таблицу листают вбок. Фон ячейки
   непрозрачный (тон строки — слоем сверху), край — линией. */
.bark-table--sticky-first { border-collapse: separate; border-spacing: 0; }
.bark-table--sticky-first thead th:first-child,
.bark-table--sticky-first tbody tr:not(.bark-table__group) > td:first-child,
.bark-table--sticky-first tfoot :is(td, th):first-child {
  background-color: var(--table-bg);
  box-shadow: inset -1px 0 0 var(--line-2);
  left: 0;
  position: sticky;
  z-index: 1;
}
.bark-table--sticky-first tbody tr:not(.bark-table__group):hover > td:first-child { background-color: var(--surface-2); }
.bark-table--sticky-first tbody tr[aria-selected="true"] > td:first-child { background-image: linear-gradient(var(--accent-soft), var(--accent-soft)); }
.bark-table--sticky-first tfoot :is(td, th):first-child { background-color: var(--surface-2); z-index: 3; }
.bark-table--sticky-first thead th:first-child { z-index: 3; }
/* строка группы сама не липнет (как в ЛК), но её первая ячейка с подписью остаётся у левого края при прокрутке вбок */
.bark-table--sticky-first tbody tr.bark-table__group > :first-child { box-shadow: inset -1px 0 0 var(--line-2); left: 0; position: sticky; z-index: 1; }
.bark-table--sticky-first.bark-table--sticky-head thead th:first-child { box-shadow: inset -1px 0 0 var(--line-2), inset 0 -1px 0 var(--line-2); }

/* Строка-метка (ui-rules §9): категория — точкой цвета и подписью над текстом, а не таблеткой
   в каждой строке; служебные столбцы (причина, канал, когда) схлопываются в одну строку 11px. */
.bark-row-meta {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font: 600 11px/1.45 var(--sans);
  gap: 0 6px;
  letter-spacing: 0.04em;
  min-width: 0;
  text-transform: uppercase;
}
.bark-row-meta + * { margin-top: 2px; }
.bark-dot { background: currentColor; border-radius: 50%; display: inline-block; flex: none; height: 8px; width: 8px; }
.bark-dot--ok { color: var(--ok-strong); }
.bark-dot--warn { color: var(--warn-strong); }
.bark-dot--bad { color: var(--bad-strong); }
.bark-dot--info { color: var(--info-strong); }
.bark-dot--accent { color: var(--accent-strong); }
.bark-dot--muted { color: var(--muted); }
/* Длинный текст в строке — две строки, полный — в раскрытии. */
.bark-clamp-2 { -webkit-box-orient: vertical; -webkit-line-clamp: 2; display: -webkit-box; line-clamp: 2; overflow: hidden; }

/* ---- Таблица → карточки на телефоне (6.19.0, BRK-098). Список на 360px не прокручивают
   вбок: строка становится карточкой. Ячейка с data-role="title" — заголовок карточки,
   остальные — пары «подпись: значение» из data-label. Колонки только для широкого экрана
   (вторичные) помечаются data-role="wide" и на телефоне прячутся. Шапка таблицы на телефоне
   не показывается: её роль играют подписи полей. ---- */
@media (max-width: 767px) {
  /* шапки нет: подпись каждого поля — data-label в самой карточке (::before читается и
     скринридером), а свёрнутая в 1px шапка распирала бы свои ячейки */
  .bark-table--stack thead { display: none; }
  .bark-table--stack,
  .bark-table--stack tbody { display: block; width: 100%; }
  /* flex-колонка, а не grid: строка таблицы с display: grid в части Chrome сжимается до
     ширины содержимого первой ячейки */
  .bark-table--stack tr { border-top: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; width: 100%; }
  .bark-table--stack tbody tr:first-child { border-top: 0; }
  .bark-table--stack td,
  .bark-table--stack td:first-child,
  .bark-table--stack td:last-child { border: 0; display: flex; gap: 12px; height: auto; justify-content: space-between; min-width: 0; padding: 0; width: auto; }
  .bark-table--stack td[data-label]::before { color: var(--muted); content: attr(data-label); flex: none; font: 500 12px/1.5 var(--sans); }
  .bark-table--stack td[data-role="title"] { font-size: 15px; font-weight: 600; justify-content: flex-start; }
  .bark-table--stack td[data-role="title"]::before { content: none; }
  .bark-table--stack td[data-role="wide"] { display: none; }
  /* карточке липкость ни к чему: колонок нет, листают вниз */
  .bark-table--stack.bark-table--sticky-first tbody tr:not(.bark-table__group) > td:first-child { background: none; box-shadow: none; position: static; }
  .bark-table--stack.bark-table--sticky-first tbody tr.bark-table__group > :first-child { box-shadow: none; position: static; }
  /* действия строки — в углу карточки, рядом с заголовком, а не отдельной строкой */
  .bark-table--stack tr { position: relative; }
  .bark-table--stack td[data-role="title"] { padding-right: 40px; }
  .bark-table--stack td.bark-table__actions { position: absolute; right: 8px; top: 8px; width: auto; }
  /* рост строки до 44px (выше) — для строки таблицы; в карточке каждая ячейка — своя строчка,
     и 44px зажимали ФИО с должностью и разносили подпись и значение. Селектор — зеркало правила
     роста: та же специфичность, стоит ниже — побеждает. */
  .bark-table--stack:not(.bark-table--tight) > tbody > tr:not(.bark-table__group):has(> td :is(.bark-field__control, select, .bark-btn:not(.bark-btn--ghost), .bark-filter-chip, .bark-toggle-chip, .bark-seg, .bark-avatar:not(.bark-avatar--sm))) > td { height: auto; }
}

/* ---- Регион списка (6.19.0, BRK-095): тулбар, строка сведений и карточка таблицы одной
   стопкой. Тулбар — над карточкой, а не внутри: выпадашки фильтров не обрезаются её краем. ---- */
.bark-list { display: grid; gap: 12px; min-width: 0; }
.bark-list > .bark-toolbar { border-bottom: 0; padding: 0; }
/* поиск списка — последним и до правого края (6.21.0), не уже 280px: подсказка «по чему ищет»
   читается целиком; на телефоне — во всю строку */
.bark-list > .bark-toolbar > .bark-search { flex: 1 1 280px; }
@media (max-width: 767px) { .bark-list > .bark-toolbar > .bark-search { flex-basis: 100%; } }

/* Ссылка в данных — номер заказа, имя, переход к сущности (6.19.0). Цвет — ярус -strong:
   базовый акцент как текст не держит 4,5:1. Подчёркивание — при наведении. */
.bark-link { border-radius: 4px; color: var(--accent-strong); font-weight: 600; text-decoration: none; text-underline-offset: 3px; }
.bark-link:hover { text-decoration: underline; }
.bark-link:focus-visible { box-shadow: var(--ring); outline: none; }

/* ---- «Показать ещё» (6.19.0, BRK-097): длинный список догружается кнопкой, а не
   страницами, когда его читают сверху вниз (лента, резервы). Пагинация (BRK-044) —
   когда к странице возвращаются по номеру. ---- */
.bark-show-more {
  align-items: center;
  border-top: 1px solid var(--line-2);
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font: 500 12px/1.4 var(--sans);
  gap: 8px 16px;
  justify-content: center;
  padding: 12px 16px;
}
.bark-show-more b { color: var(--ink); font: 600 12px/1.4 var(--mono); font-feature-settings: "tnum" 1; }
.bark-row-action {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-control);
  color: var(--ink2);
  cursor: pointer;
  display: inline-flex;
  /* flex: none обязателен. Кнопка 32x32 — цель касания, а не пожелание: как
     элемент флекса она сжималась до 22,2px, когда соседям не хватало места. */
  flex: none;
  height: 32px;
  justify-content: center;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
  width: 32px;
}
.bark-row-action:hover { background: var(--chip); color: var(--ink); }
.bark-row-action:focus-visible { box-shadow: var(--ring); outline: none; }
.bark-row-action svg { height: 18px; width: 18px; }

/* ---- Menu: dropdown/popover (row kebab, toolbar «Фильтры»). Destructive item = --bad after a
   separator. Layer --z-popover (6.21.0): на --z-dropdown меню, открытое из модалки или
   дровера, уходило под их подложку (600 < 1000) — в ЛК ловили то же самое.
   Стекло --glass и появление bark-pop-in 120ms по --ease (6.22.0, из ЛК; короткое движение
   — по кривой состояния): меню всплывает, а не выскакивает, и под ним видно, откуда его открыли. Въезд — backwards: transform после
   анимации не остаётся. ---- */
.bark-menu {
  -webkit-backdrop-filter: var(--glass-blur);
  animation: bark-pop-in var(--motion-fast) var(--ease) backwards;
  backdrop-filter: var(--glass-blur);
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-pop);
  display: grid;
  min-width: 180px;
  padding: 4px;
  z-index: var(--z-popover);
}
.bark-menu__item {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  font: 400 14px/1 var(--sans);
  gap: 10px;
  height: 36px;
  padding: 0 10px;
  text-align: left;
  transition: background var(--motion-fast) var(--ease);
  width: 100%;
}
.bark-menu__item:hover { background: var(--chip); }
.bark-menu__item:focus-visible { background: var(--chip); box-shadow: inset 0 0 0 2px var(--accent-line); outline: none; }
.bark-menu__item svg { color: var(--ink2); flex: none; height: 18px; width: 18px; }
.bark-menu__item--bad { color: var(--bad); }
.bark-menu__item--bad svg { color: var(--bad); }
.bark-menu__item--bad:hover { background: var(--bad-soft); }
.bark-menu__sep { background: var(--line-2); height: 1px; margin: 4px 0; }

/* ---- Toolbar (порядок — 6.21.0, правило ЛК §6): чипы → фильтры и сортировка → поиск,
   который забирает остаток строки до правого края; действия — за ним. Все контролы строки
   одной высоты — 32px: разница в 4px между чипом и полем не осознаётся, но строка читается
   кривой. Применённые фильтры — снимаемые чипы + «Сбросить»; >3 фильтров → один поповер
   «Фильтры». Под группой чипов нет подложки-«лотка»: чипы стоят на фоне сами. ---- */
.bark-toolbar {
  align-items: center;
  border-bottom: 1px solid var(--line-2);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 20px;
}
.bark-toolbar__spacer { flex: 1 1 auto; }
.bark-toolbar .bark-field__control { height: 32px; width: auto; }
.bark-toolbar__search { flex: 1 1 220px; min-width: 180px; }
.bark-toolbar > .bark-search { flex: 1 1 220px; min-width: 180px; }
/* Короткие фильтры одного ряда — одной ширины, по самой длинной подписи: grid без заданной
   ширины равняет колонки по самой широкой. Длинные подписи или числа («Все 14568») —
   --fit: ширина по содержимому, иначе каждая кнопка растянется под самую длинную. На
   телефоне ряд прокручивается вбок, а не переносится: перенос меняет высоту панели, и
   всё под ней прыгает. */
.bark-toolbar__filters { display: grid; flex: none; gap: 8px; grid-auto-columns: 1fr; grid-auto-flow: column; max-width: 100%; }
.bark-toolbar__filters > * { justify-content: center; min-width: 0; }
.bark-toolbar__filters--fit { display: flex; }
@media (max-width: 767px) {
  .bark-toolbar__filters { display: flex; margin-block: -3px; overflow-x: auto; padding-block: 3px; scrollbar-width: none; }
  .bark-toolbar__filters::-webkit-scrollbar { display: none; }
  .bark-toolbar__filters > * { flex: none; }
}
.bark-filter-chip {
  align-items: center;
  background: var(--accent-soft);
  border: 0;
  border-radius: 999px;
  color: var(--accent-strong);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  font: 600 12px/1 var(--sans);
  gap: 6px;
  height: var(--control-sm);
  padding: 0 12px;
  transition: background var(--motion-fast) var(--ease);
}
.bark-filter-chip svg { height: 14px; width: 14px; }
.bark-filter-chip:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.bark-filter-chip:focus-visible { box-shadow: var(--ring); outline: none; }

/* ---- Toggle chips: inline multi-select filter (2–6 options, aria-pressed). The ONLY sanctioned
   multi-select control in the toolbar — never checkbox squares in boxes. ---- */
.bark-toolbar__group-label { color: var(--muted); flex: none; font: 500 12px/1 var(--sans); }
.bark-toggle-chip {
  align-items: center;
  background: var(--chip);
  /* Рамка — граница контрола. Одна заливка --chip отделяла невыбранный чип от фона
     на 1,02–1,12:1 в светлой теме и на 1,00:1 от --surface-pop в тёмной: в модалке
     жалобы второй вариант читался подписью, а не кнопкой. 32px вместе с рамкой (6.21.0,
     было 28): в строке тулбара все контролы одной высоты. */
  border: 1px solid var(--line-control);
  border-radius: 999px;
  color: var(--ink2);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  font: 600 12px/1 var(--sans);
  gap: 6px;
  height: var(--control-sm);
  padding: 0 12px;
  transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.bark-toggle-chip:hover { background: color-mix(in srgb, var(--ink) 8%, var(--chip)); }
.bark-toggle-chip:focus-visible { box-shadow: var(--ring); outline: none; }
.bark-toggle-chip svg { display: none; flex: none; height: 14px; width: 14px; }
/* Выбранный опознаётся по цвету и галочке, контур ему не нужен: серое кольцо вокруг
   акцентной подложки — чужая деталь (так же у свитча). Рамка прозрачная, а не
   нулевая: ширина чипа при переключении не прыгает. */
.bark-toggle-chip[aria-pressed="true"] { background: var(--accent-soft); border-color: transparent; color: var(--accent-strong); }
.bark-toggle-chip[aria-pressed="true"] svg { display: block; }
/* Выключенный — формула системы: --chip + --muted, без наведения. Рамку не трогаем:
   у невыбранного она остаётся, у выбранного её нет — состояние видно и здесь. */
.bark-toggle-chip:disabled,
.bark-toggle-chip:disabled:hover { background: var(--chip); color: var(--muted); cursor: not-allowed; }

/* ---- Сегмент (6.15.0, из кита ЛК): переключатель вида одного экрана, 2–5 вариантов
   («Неделя / Месяц / Квартал»). Семья переключателя темы: подложка --chip, рамка
   --line-control (3:1 — контрол обязан отделяться от фона), активный сегмент поднят.
   Высота — ярус лестницы целиком, вместе с рамкой: md 40, sm 32.
   Бегунок, который переезжает за активным, ставит templates/tabs.snippet.js. Без
   скрипта поднят сам активный сегмент — вид тот же, только без переезда. Бегунок
   едет по transform, ширина встаёт сразу: width в переходах не анимируется. ---- */
.bark-seg {
  align-items: center;
  background: var(--chip);
  border: 1px solid var(--line-control);
  border-radius: var(--radius-control);
  display: inline-flex;
  gap: 2px;
  height: var(--control-md);
  max-width: 100%;
  /* Узкий экран: пять подписей не помещаются в 320px, а сжиматься кнопкам нельзя —
     «Кварт…» хуже прокрутки. Сегмент прокручивается сам, как ряд вкладок, и не
     распирает родителя. Кольцо фокуса (3px) помещается во внутренний отступ (3px). */
  overflow-x: auto;
  padding: 3px;
  position: relative;
  scrollbar-width: none;
}
.bark-seg::-webkit-scrollbar { display: none; }
.bark-seg > button {
  align-items: center;
  background: none;
  border: 0;
  border-radius: calc(var(--radius-control) - 3px);
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  font: 600 13px/1 var(--sans);
  gap: 6px;
  height: 100%;
  justify-content: center;
  padding: 0 12px;
  position: relative;
  transition: background var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
  white-space: nowrap;
  z-index: 1;
}
.bark-seg > button:hover { color: var(--ink2); }
.bark-seg > button:focus-visible { box-shadow: var(--ring); outline: none; }
/* выключенный — формула системы (--muted на --chip), а не выцветание: в ЛК opacity .45
   роняла подпись ниже 4,5 */
.bark-seg > button:disabled,
.bark-seg > button:disabled:hover { color: var(--muted); cursor: not-allowed; }
.bark-seg > button svg { flex: none; height: 16px; width: 16px; }
.bark-seg > button[aria-pressed="true"],
.bark-seg > button[aria-selected="true"] { background: var(--raised); box-shadow: var(--shadow-card); color: var(--ink); }
.bark-seg__count { color: var(--muted); font: 500 12px/1 var(--mono); font-feature-settings: "tnum" 1; }
/* со скриптом подъём рисует бегунок, а кнопка остаётся прозрачной */
.bark-seg.is-enhanced > button[aria-pressed="true"],
.bark-seg.is-enhanced > button[aria-selected="true"] { background: none; box-shadow: none; }
.bark-seg__thumb {
  background: var(--raised);
  border-radius: calc(var(--radius-control) - 3px);
  bottom: 3px;
  box-shadow: var(--shadow-card);
  left: 0;
  position: absolute;
  top: 3px;
  transition: transform var(--motion-base) var(--ease);
  z-index: 0;
}
.bark-seg--sm { border-radius: var(--radius-control); height: var(--control-sm); padding: 2px; }
.bark-seg--sm > button { border-radius: var(--radius-sm); font-size: 12px; padding: 0 10px; }
.bark-seg--sm .bark-seg__thumb { border-radius: var(--radius-sm); bottom: 2px; top: 2px; }
.bark-seg--full { display: flex; width: 100%; }
.bark-seg--full > button { flex: 1 1 0; min-width: 0; }

/* ---- Вкладки (6.15.0, из кита ЛК): разделы одной страницы. Подчёркивание 2px
   --accent под активной; длинный ряд прокручивается, а не переносится. С
   templates/tabs.snippet.js подчёркивание переезжает за активной. Фокус — кольцо
   внутрь: снаружи его обрезала бы прокрутка ряда. ---- */
.bark-tabs {
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  scrollbar-width: none;
}
.bark-tabs::-webkit-scrollbar { display: none; }
.bark-tabs > button {
  align-items: center;
  background: none;
  border: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  font: 500 14px/1 var(--sans);
  gap: 6px;
  height: var(--control-md);
  padding: 0 2px;
  position: relative;
  transition: color var(--motion-fast) var(--ease);
  white-space: nowrap;
}
.bark-tabs > button:hover { color: var(--ink2); }
.bark-tabs > button:focus-visible { box-shadow: inset var(--ring); outline: none; }
/* счётчик раздела во вкладке — «По заказам 1 275» (6.19.0, из кита ЛК) */
.bark-tabs__count { background: var(--chip); border-radius: var(--radius-pill); color: var(--muted); font: 600 11px/1 var(--mono); font-feature-settings: "tnum" 1; margin-left: 6px; padding: 3px 7px; }
.bark-tabs > [aria-selected="true"] .bark-tabs__count { background: var(--accent-soft); color: var(--accent-strong); }
.bark-tabs > button[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.bark-tabs > button[aria-selected="true"]::after {
  background: var(--accent);
  border-radius: 2px 2px 0 0;
  bottom: 0;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  right: 0;
}
.bark-tabs.is-enhanced > button[aria-selected="true"]::after { display: none; }
.bark-tabs__ink {
  background: var(--accent);
  border-radius: 2px 2px 0 0;
  bottom: 0;
  height: 2px;
  left: 0;
  position: absolute;
  transition: transform var(--motion-base) var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .bark-seg__thumb, .bark-tabs__ink { transition: none; }
}

/* ---- Поиск (6.15.0, из кита ЛК): один на экран и заметный — в ЛК его «теряли в
   тексте». Подложка с 6% акцента, лупа акцентом, справа «найдено N» или подсказка
   клавиши «/» (работает с bindSearchHotkey() и data-hotkey). Рамка с 6.28.0 —
   --line-control-accent: оттенок акцента, который держит 3:1 (бледная --accent-line
   давала 1,4:1). ---- */
.bark-search { align-items: center; display: inline-flex; min-width: 220px; position: relative; }
.bark-search > .bark-field__control {
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  /* 6.28.0, из ЛК: рамка — оттенок акцента (--line-control-accent, ≥ 3:1), 1,5px — поиск
     заметнее любого поля рядом. */
  border: 1.5px solid var(--line-control-accent);
  padding-left: 38px;
  padding-right: 44px;
  text-overflow: ellipsis;
  /* поле заполняет рамку поиска — и в тулбаре, где поля по умолчанию width: auto */
  width: 100%;
}
.bark-search > .bark-field__control:hover:not(:disabled, :focus-visible) { border-color: color-mix(in srgb, var(--accent) 60%, var(--line-control-hover)); }
.bark-search > .bark-field__control:focus-visible { background: var(--surface); }
.bark-search > .bark-field__control::-webkit-search-cancel-button,
.bark-search > .bark-field__control::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.bark-search:has(.bark-search__count) > .bark-field__control { padding-right: 132px; }
.bark-search__icon { color: var(--accent-strong); display: flex; left: 12px; pointer-events: none; position: absolute; }
.bark-search__icon svg { height: 18px; width: 18px; }
.bark-search__end { align-items: center; display: inline-flex; gap: 4px; position: absolute; right: 8px; }
.bark-search__count {
  background: var(--accent-soft);
  border-radius: var(--radius-pill);
  color: var(--accent-strong);
  font: 600 12px/1 var(--sans);
  padding: 4px 8px;
  white-space: nowrap;
}
.bark-search__kbd {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  display: inline-flex;
  font: 600 11px/1 var(--mono);
  height: 20px;
  justify-content: center;
  min-width: 20px;
  padding: 0 4px;
}
.bark-search > .bark-field__control:focus-visible ~ .bark-search__end .bark-search__kbd { display: none; }
@media (hover: none) { .bark-search__kbd { display: none; } }
/* sm — фильтр внутри таблицы, меню, модалки */
.bark-search--sm { min-width: 0; }
.bark-search--sm > .bark-field__control { font-size: 13px; height: var(--control-sm); padding-left: 34px; padding-right: 36px; }
.bark-search--sm > .bark-search__icon { left: 10px; }
.bark-search--sm .bark-search__icon svg { height: 16px; width: 16px; }
.bark-search--sm .bark-search__kbd { display: none; }
/* quiet — поиск в выпадашках: без подложки и без акцента, как обычное поле */
.bark-search--quiet > .bark-field__control { background: var(--field); border: 1px solid var(--line-control); }
.bark-search--quiet > .bark-search__icon { color: var(--muted); }

/* ---- Pagination: panel footer row. Mono range counter, 32px prev/next, fixed page sizes. ---- */
.bark-pagination {
  align-items: center;
  border-top: 1px solid var(--line-2);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding: 10px 20px;
}
.bark-pagination__range {
  color: var(--muted);
  font: 500 12px/1 var(--mono);
  font-feature-settings: "tnum" 1;
}
.bark-pagination__nav { align-items: center; display: flex; gap: 4px; }
.bark-pagination__btn {
  align-items: center;
  background: transparent;
  border: 1px solid var(--line-control);
  border-radius: var(--radius-control);
  color: var(--ink2);
  cursor: pointer;
  display: inline-flex;
  /* flex: none обязателен. Кнопка 32x32 — цель касания, а не пожелание: как
     элемент флекса она сжималась до 22,2px, когда соседям не хватало места. */
  flex: none;
  height: 32px;
  justify-content: center;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
  width: 32px;
}
.bark-pagination__btn:hover { background: var(--chip); }
.bark-pagination__btn:focus-visible { box-shadow: var(--ring); outline: none; }
.bark-pagination__btn:disabled { background: var(--chip); border-color: var(--line-control); color: var(--muted); cursor: not-allowed; opacity: 1; }
.bark-pagination__btn svg { height: 18px; width: 18px; }

/* ---- Toasts (6.23.0, модель ЛК): ONE stack bottom-center, инверсия, одна строка, max 3.
   ok/info 3s, warn/bad 6s, с действием — не меньше 6s. ---- */
@keyframes bark-toast-in {
  from { opacity: 0; transform: translateY(6px); }
}
.bark-toast-stack {
  /* Снизу по центру, как в ЛК: туда смотрят после клика в любом месте экрана, а угол
     занят кнопкой багрепорта. На телефоне стек шире половины экрана и задевает её —
     поднимается над ней (--corner-reserve), над баннером новой версии — ещё и на
     --banner-reserve. Новые тосты встают над старыми (column-reverse). */
  bottom: calc(20px + env(safe-area-inset-bottom, 0px) + var(--corner-reserve, 0px) + var(--banner-reserve, 0px));
  align-items: center;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  left: 50%;
  max-width: calc(100vw - 32px);
  pointer-events: none;
  position: fixed;
  transform: translateX(-50%);
  width: max-content;
  z-index: var(--z-toast);
}
/* Тост не шире 560 по центру не дотягивается до угла с кнопкой — поднимать незачем. */
@media (min-width: 720px) {
  .bark-toast-stack { --corner-reserve: 0px; }
}

/* ---- Кнопка «Сообщить о баге»: одна дверь для жалоб во всех продуктах.
   Обязательна на каждом экране продукта с интерфейсом (docs/BUGREPORT.md). ---- */
:root:has(.bark-bug-btn) { --corner-reserve: 52px; }
.bark-bug-btn {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line-control);
  border-radius: 999px;
  bottom: 16px;
  box-shadow: var(--shadow-pop);
  color: var(--ink2);
  cursor: pointer;
  display: inline-flex;
  gap: 8px;
  height: 40px;
  justify-content: center;
  position: fixed;
  right: 16px;
  transition: border-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
  width: 40px;
  z-index: var(--z-sticky);
}
.bark-bug-btn svg { height: 20px; width: 20px; }
.bark-bug-btn:hover { border-color: var(--accent); color: var(--accent-strong); }
.bark-bug-btn:focus-visible { box-shadow: var(--ring); outline: none; }
/* С подписью — на широких экранах, где угол свободен */
.bark-bug-btn--labelled { padding: 0 16px; width: auto; }
/* Инлайн-вариант: в строке текста или в тулбаре, не плавающий */
.bark-bug-btn--inline {
  bottom: auto;
  box-shadow: none;
  height: 32px;
  padding: 0 12px;
  position: static;
  right: auto;
  width: auto;
}
.bark-bug-btn--inline svg { height: 18px; width: 18px; }
/* Тост и сегмент — радиус контрола (10px), как в ЛК: на радиусе карточки (16px) короткая
   плашка выглядела бы таблеткой (6.18.0).
   6.23.0: инверсия (--ink фоном, --bg текстом) — тёмная плашка в светлой теме, светлая
   в тёмной. Белая карточка с рамкой терялась на белой странице; заголовок, текст и
   крестик превращали «Сохранено» в простыню. Теперь одна строка, клик по плашке её убирает. */
.bark-toast {
  --toast-tone: 100%;
  align-items: center;
  animation: bark-toast-in var(--motion-base) var(--ease-out);
  background: var(--ink);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-pop);
  color: var(--bg);
  display: flex;
  font: 600 13px/1.4 var(--sans);
  gap: 9px;
  max-width: min(560px, calc(100vw - 32px));
  padding: 11px 18px;
  pointer-events: auto;
}
/* Значок статуса на инверсии: в тёмной теме фон светлый, и чистые --ok/--warn/--bad дают
   1,85–2,72:1 — их уводят к --bg на 40% (4,28–5,76:1). В светлой хватает чистых (4,26–5,94). */
:root[data-theme="dark"] .bark-toast { --toast-tone: 60%; }
.bark-toast__icon { flex: none; height: 18px; width: 18px; }
.bark-toast--ok .bark-toast__icon { color: color-mix(in srgb, var(--ok) var(--toast-tone), var(--bg)); }
.bark-toast--info .bark-toast__icon { color: color-mix(in srgb, var(--info) var(--toast-tone), var(--bg)); }
.bark-toast--warn .bark-toast__icon { color: color-mix(in srgb, var(--warn) var(--toast-tone), var(--bg)); }
.bark-toast--bad .bark-toast__icon { color: color-mix(in srgb, var(--bad) var(--toast-tone), var(--bg)); }
.bark-toast__msg { min-width: 0; overflow-wrap: anywhere; }
/* Действие — подчёркнутое слово цветом текста: акцент на инверсии не читается. */
.bark-toast__action {
  background: none;
  border: 0;
  border-radius: 4px;
  color: inherit;
  cursor: pointer;
  flex: none;
  font: inherit;
  margin-left: 3px;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bark-toast__action:focus-visible { box-shadow: var(--ring); outline: none; }
/* Устарело с 6.23.0, удаляется в 7.0.0 (tokens/deprecations.json): разметка до 6.23.0 —
   заголовок, текст и крестик. Собственная разметка продукта не разваливается, а
   складывается в одну строку; крестик скрыт — тост убирается кликом. */
.bark-toast__body { align-items: baseline; display: flex; flex-wrap: wrap; gap: 0 6px; min-width: 0; }
.bark-toast__title { font-weight: 600; }
.bark-toast__text { font-weight: 400; }
.bark-toast__close { display: none; }

/* ---- Баннер новой версии (BRK-103, 6.23.0, из ЛК): templates/update-banner.snippet.js.
   Стеклянная пилюля снизу по центру с акцентной рамкой — заметна, но не перекрывает работу;
   страница обновляется ТОЛЬКО по клику. Тосты встают над ней (--banner-reserve). ---- */
.bark-update-banner {
  -webkit-backdrop-filter: var(--glass-blur);
  align-items: center;
  animation: bark-toast-in var(--motion-base) var(--ease-out);
  backdrop-filter: var(--glass-blur);
  background: var(--glass);
  border: 1px solid var(--accent);
  border-radius: 999px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px) + var(--corner-reserve, 0px));
  box-shadow: var(--shadow-pop);
  box-sizing: border-box;
  color: var(--ink);
  display: inline-flex;
  gap: 2px;
  left: 50%;
  max-width: min(360px, calc(100vw - 24px));
  padding: 3px;
  position: fixed;
  /* translate, а не transform: появление анимирует transform и сбивало бы центровку */
  translate: -50% 0;
  z-index: calc(var(--z-toast) - 1);
}
.bark-update-banner[hidden] { display: none; }
@media (min-width: 720px) {
  .bark-update-banner { --corner-reserve: 0px; }
}
.bark-update-banner__go,
.bark-update-banner__news,
.bark-update-banner__later {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  flex: none;
  height: var(--control-sm);
  justify-content: center;
  text-decoration: none;
  transition: background var(--motion-fast) var(--ease);
}
.bark-update-banner__go { font: 600 13px/1 var(--sans); gap: 6px; min-width: 0; padding: 0 12px 0 10px; }
.bark-update-banner__go svg { height: 18px; width: 18px; }
.bark-update-banner__ver { color: var(--accent-strong); font: 600 12px/1 var(--mono); }
.bark-update-banner__news { color: var(--ink2); font: 500 13px/1 var(--sans); padding: 0 10px; }
.bark-update-banner__later { color: var(--muted); width: var(--control-sm); }
.bark-update-banner__later svg { height: 18px; width: 18px; }
.bark-update-banner__go:hover,
.bark-update-banner__news:hover,
.bark-update-banner__later:hover { background: var(--chip); }
.bark-update-banner__go:focus-visible,
.bark-update-banner__news:focus-visible,
.bark-update-banner__later:focus-visible { box-shadow: var(--ring); outline: none; }
.bark-update-banner__go[aria-busy="true"] { cursor: progress; }
/* На самом узком телефоне пилюля не помещает три части — «Что нового» уступает место. */
@media (max-width: 359px) {
  .bark-update-banner__news { display: none; }
}

/* ---- «Ниже ещё есть» (BRK-104, 6.23.0, из ЛК): templates/scroll.snippet.js ставит класс по
   факту прокрутки — край гаснет, только когда за ним правда что-то есть. Маска, а не
   градиент поверх: работает на любом фоне и не перекрывает клики. ---- */
.bark-fade-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--fade-size)), transparent); mask-image: linear-gradient(to right, #000 calc(100% - var(--fade-size)), transparent); }
.bark-fade-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - var(--fade-size)), transparent); mask-image: linear-gradient(to left, #000 calc(100% - var(--fade-size)), transparent); }
.bark-fade-lr { -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-size), #000 calc(100% - var(--fade-size)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--fade-size), #000 calc(100% - var(--fade-size)), transparent); }
.bark-fade-b { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade-size)), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade-size)), transparent); }
.bark-fade-t { -webkit-mask-image: linear-gradient(to top, #000 calc(100% - var(--fade-size)), transparent); mask-image: linear-gradient(to top, #000 calc(100% - var(--fade-size)), transparent); }
.bark-fade-tb { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-size), #000 calc(100% - var(--fade-size)), transparent); mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-size), #000 calc(100% - var(--fade-size)), transparent); }
/* Таблица шире экрана — своя горизонтальная прокрутка вместо прокрутки всей страницы. */
.bark-scroll-x { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
/* Видимая полоса прокрутки у областей со своей прокруткой: тонкая, но постоянная, а не
   overlay, который macOS прячет, — иначе область не выглядит прокручиваемой. Ряды вкладок,
   сегменты и фильтры полосы не носят: им хватает затухания края. */
.bark-scroll,
.bark-scroll-x,
.bark-modal__body,
.bark-sticky-col,
.bark-sidebar__scroll,
.bark-appbar__menu {
  scrollbar-color: var(--scrollbar-thumb) transparent;
  scrollbar-width: thin;
}
.bark-scroll { overflow-y: auto; overscroll-behavior: contain; }
.bark-scroll::-webkit-scrollbar,
.bark-scroll-x::-webkit-scrollbar,
.bark-modal__body::-webkit-scrollbar,
.bark-sticky-col::-webkit-scrollbar,
.bark-sidebar__scroll::-webkit-scrollbar,
.bark-appbar__menu::-webkit-scrollbar { height: 12px; width: 12px; }
.bark-scroll::-webkit-scrollbar-thumb,
.bark-scroll-x::-webkit-scrollbar-thumb,
.bark-modal__body::-webkit-scrollbar-thumb,
.bark-sticky-col::-webkit-scrollbar-thumb,
.bark-sidebar__scroll::-webkit-scrollbar-thumb,
.bark-appbar__menu::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb) content-box;
  border: 3px solid transparent;
  border-radius: 8px;
}
.bark-scroll::-webkit-scrollbar-thumb:hover,
.bark-scroll-x::-webkit-scrollbar-thumb:hover,
.bark-modal__body::-webkit-scrollbar-thumb:hover,
.bark-sticky-col::-webkit-scrollbar-thumb:hover,
.bark-sidebar__scroll::-webkit-scrollbar-thumb:hover,
.bark-appbar__menu::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); }

/* «Наверх» (BRK-105): в длинных списках, после одного экрана. В ряд с кнопкой багрепорта
   и левее неё — угол один, кнопки не налезают; тот же круг 40px. 48px — сдвиг для круглой
   кнопки; у кнопки с подписью bindToTop() мерит ширину сам. ---- */
:root:has(.bark-bug-btn) { --to-top-shift: 48px; }
.bark-to-top {
  align-items: center;
  animation: bark-pop-in var(--motion-fast) var(--ease) backwards;
  background: var(--surface);
  border: 1px solid var(--line-control);
  border-radius: 999px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  box-shadow: var(--shadow-pop);
  color: var(--ink2);
  cursor: pointer;
  display: inline-flex;
  height: 40px;
  justify-content: center;
  position: fixed;
  right: calc(16px + var(--to-top-shift, 0px));
  transition: border-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
  width: 40px;
  z-index: var(--z-sticky);
}
.bark-to-top[hidden] { display: none; }
.bark-to-top svg { height: 18px; width: 18px; }
.bark-to-top:hover { border-color: var(--accent); color: var(--accent-strong); }
.bark-to-top:focus-visible { box-shadow: var(--ring); outline: none; }

/* ---- Дерево и раскрывашка (6.24.0, из ЛК; BRK-109): на нативном <details> — клавиатура,
   скринридер и «открыто по умолчанию» (атрибут open) бесплатно. «Сводка открыта, детали
   свёрнуты»: то, что нужно не всегда, прячется за одной строкой, а не за отдельным экраном. ---- */
.bark-tree,
.bark-tree ul { list-style: none; margin: 0; padding: 0; }
.bark-tree ul { border-left: 1px solid var(--line-2); margin-left: 11px; padding-left: 12px; }
.bark-tree li { min-width: 0; }
.bark-tree summary,
.bark-tree__leaf,
.bark-disclosure > summary {
  align-items: center;
  border-radius: 6px;
  display: flex;
  gap: 8px;
  min-height: 32px;
  min-width: 0;
}
.bark-tree__leaf { padding-left: 24px; }
.bark-tree summary,
.bark-disclosure > summary { cursor: pointer; list-style: none; }
.bark-tree summary::-webkit-details-marker,
.bark-disclosure > summary::-webkit-details-marker { display: none; }
.bark-tree summary::before,
.bark-disclosure > summary::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m9 18 6-6-6-6%27/%3E%3C/svg%3E") center / 16px no-repeat;
  background: var(--muted);
  content: "";
  flex: none;
  height: 16px;
  mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m9 18 6-6-6-6%27/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform var(--motion-fast) var(--ease);
  width: 16px;
}
.bark-tree details[open] > summary::before,
.bark-disclosure[open] > summary::before { transform: rotate(90deg); }
.bark-tree summary:hover,
.bark-disclosure > summary:hover { background: var(--surface-2); }
.bark-tree summary:focus-visible,
.bark-disclosure > summary:focus-visible { box-shadow: var(--ring); outline: none; }
.bark-tree__name { color: var(--ink); font: 500 13px/1.35 var(--sans); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bark-tree__meta { color: var(--muted); flex: none; font: 400 12px/1.35 var(--sans); font-feature-settings: "tnum" 1; margin-left: auto; padding-right: 8px; }
.bark-tree__leaf.is-mine .bark-tree__name { color: var(--accent-strong); font-weight: 600; }
.bark-disclosure { border-top: 1px solid var(--line-2); }
.bark-disclosure > summary { color: var(--ink2); font: 600 13px/1.35 var(--sans); min-height: 40px; }
.bark-disclosure__hint { color: var(--muted); font: 400 12px/1.35 var(--sans); margin-left: auto; padding-right: 8px; }
.bark-disclosure__body { padding: 4px 0 12px 24px; }

/* ---- Период, выпадашка, месяц (6.25.0, BRK-110…113, из ЛК DateRange/Dropdown/MonthPicker).
   Смысл оформления в ряду фильтров: РАМКА — кнопка открывает список или календарь
   (.bark-period, .bark-dd), ЗАЛИВКА — переключатель (.bark-toggle-chip). Кнопка периода —
   с акцентной рамкой и календарём: период — главный фильтр экрана, его ищут первым. ---- */
.bark-period {
  align-items: center;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  border: 1.5px solid var(--accent-strong);
  border-radius: var(--radius-control);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  font: 600 14px/1 var(--sans);
  gap: 8px;
  height: var(--control-md);
  max-width: 100%;
  padding: 0 12px;
  transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
  white-space: nowrap;
}
.bark-period--sm { font-size: 13px; height: var(--control-sm); padding: 0 10px; }
.bark-period svg { flex: none; height: 16px; width: 16px; }
.bark-period > svg:first-child { color: var(--accent-strong); }
.bark-period > svg:last-child { color: var(--muted); height: 14px; transition: transform var(--motion-fast) var(--ease); width: 14px; }
.bark-period.is-open > svg:last-child { transform: rotate(180deg); }
.bark-period:focus-visible,
.bark-period.is-open { background: var(--surface); box-shadow: var(--ring); outline: none; }
.bark-period__label { color: var(--muted); font-weight: 500; }
.bark-period__value { font-variant-numeric: tabular-nums; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Панель периода: быстрые варианты слева, «Начало → Конец», два месяца, итог и «Применить».
   Фон сплошной, как в ЛК, а не стекло меню: под длинным списком и сеткой дней просвечивал
   текст страницы, и в тёмной теме подписи читались поверх чужих строк (поймано в браузере). */
.bark-period-panel,
.bark-dd-panel {
  animation: bark-pop-in var(--motion-fast) var(--ease) backwards;
  background: var(--surface-pop);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-pop);
  color: var(--ink);
  overflow: auto;
  position: fixed;
  z-index: var(--z-popover);
}
.bark-period-panel { border-radius: var(--radius-panel); display: flex; }
.bark-period-panel__presets {
  background: var(--surface-2);
  border-right: 1px solid var(--line);
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 2px;
  padding: 12px 8px;
  width: 150px;
}
.bark-period-panel__preset {
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--ink2);
  cursor: pointer;
  font: 500 13px/1.2 var(--sans);
  padding: 8px 10px;
  text-align: left;
}
.bark-period-panel__preset:hover { background: var(--chip); color: var(--ink); }
.bark-period-panel__preset[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.bark-period-panel__preset:focus-visible { box-shadow: var(--ring); outline: none; }
.bark-period-panel__main { display: flex; flex: 1 1 auto; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 16px 12px; }
.bark-period-panel__slots { align-items: center; display: flex; gap: 10px; }
.bark-period-panel__slots > svg { color: var(--muted); flex: none; height: 16px; width: 16px; }
.bark-period-slot {
  background: var(--surface);
  border: 1.5px solid var(--line-control);
  border-radius: var(--radius-control);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 8px 12px;
  text-align: left;
}
.bark-period-slot__title { color: var(--muted); font: 700 11px/1.2 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; }
.bark-period-slot__value { font: 650 15px/1.2 var(--sans); font-variant-numeric: tabular-nums; }
.bark-period-slot.is-empty .bark-period-slot__value { color: var(--muted); font-weight: 500; }
.bark-period-slot[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); border-color: var(--accent-strong); box-shadow: var(--ring); }
.bark-period-slot[aria-pressed="true"] .bark-period-slot__title { color: var(--accent-strong); }
.bark-period-slot:focus-visible { box-shadow: var(--ring); outline: none; }
.bark-period-panel__hint { color: var(--ink2); font: 500 13px/1.4 var(--sans); min-height: 18px; }
.bark-period-panel__rule,
.bark-period-panel__muted { color: var(--muted); }
.bark-period-panel__cals { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); position: relative; }
.bark-period-panel__nav {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line-control);
  border-radius: var(--radius-sm);
  color: var(--ink2);
  cursor: pointer;
  display: inline-flex;
  height: 28px;
  justify-content: center;
  position: absolute;
  top: -2px;
  width: 28px;
  z-index: 1;
}
.bark-period-panel__nav svg { height: 16px; width: 16px; }
.bark-period-panel__nav:hover:not(:disabled) { background: var(--chip); color: var(--ink); }
.bark-period-panel__nav:disabled { background: var(--chip); color: var(--muted); cursor: not-allowed; }
.bark-period-panel__nav:focus-visible { box-shadow: var(--ring); outline: none; }
.bark-period-panel__nav--prev { left: 0; }
.bark-period-panel__nav--next { right: 0; }
.bark-period-cal__head { align-items: center; display: flex; font: 600 14px/1 var(--sans); gap: 10px; height: 26px; justify-content: center; margin-bottom: 6px; }
.bark-period-cal__whole { background: none; border: 0; color: var(--accent-strong); cursor: pointer; font: 600 12px/1 var(--sans); padding: 0; }
.bark-period-cal__whole:hover { text-decoration: underline; }
.bark-period-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
.bark-period-cal__wd { color: var(--muted); font: 600 11px/1 var(--sans); padding: 4px 0; text-align: center; text-transform: uppercase; }
.bark-period-cal__day {
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--ink);
  cursor: pointer;
  font: 500 13px/1 var(--sans);
  font-variant-numeric: tabular-nums;
  height: 34px;
}
.bark-period-cal__day.is-weekend { color: var(--ink2); }
.bark-period-cal__day:hover:not(:disabled) { background: var(--chip); }
.bark-period-cal__day:focus-visible { box-shadow: var(--ring); outline: none; position: relative; }
.bark-period-cal__day.is-today { box-shadow: inset 0 0 0 1.5px var(--accent-line); }
.bark-period-cal__day.is-in { background: var(--accent-soft); border-radius: 0; }
.bark-period-cal__day.is-start,
.bark-period-cal__day.is-end { background: var(--accent-strong); color: var(--on-fill); font-weight: 700; }
.bark-period-cal__day.is-start { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.bark-period-cal__day.is-end { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.bark-period-cal__day.is-start.is-end { border-radius: var(--radius-sm); }
.bark-period-cal__day.is-preview { background: color-mix(in srgb, var(--accent) 45%, var(--surface)); color: var(--ink); }
/* выключенный день — формула бренда без opacity: тон --muted, обычный вес; причина — в подсказке */
.bark-period-cal__day:disabled { background: transparent; color: var(--muted); cursor: not-allowed; font-weight: 400; }
.bark-period-panel__foot {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  padding-top: 10px;
}
.bark-period-panel__sum { color: var(--ink2); font: 500 13px/1.4 var(--sans); }
.bark-period-panel__buttons { display: inline-flex; gap: 8px; margin-left: auto; }
.bark-period-panel--narrow { flex-direction: column; }
.bark-period-panel--narrow .bark-period-panel__presets { border-bottom: 1px solid var(--line); border-right: 0; flex-direction: row; overflow-x: auto; padding: 8px; width: auto; }
.bark-period-panel--narrow .bark-period-panel__preset { flex: none; white-space: nowrap; }
.bark-period-panel--narrow .bark-period-cal__day { height: 40px; }

/* Выпадашка: кнопка с рамкой контрола; выбрано что-то, кроме «Все», — рамка и текст акцентом. */
.bark-dd {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line-control);
  border-radius: var(--radius-pill);
  color: var(--ink2);
  cursor: pointer;
  display: inline-flex;
  font: 600 13px/1 var(--sans);
  gap: 6px;
  height: var(--control-md);
  max-width: 100%;
  min-width: 0;
  padding: 0 12px;
  text-align: left;
  transition: background-color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
  white-space: nowrap;
}
.bark-dd--sm { height: var(--control-sm); padding: 0 10px 0 12px; }
.bark-dd--field { border-radius: var(--radius-control); color: var(--ink); font-weight: 400; font-size: 14px; width: 100%; }
.bark-dd > svg { color: var(--muted); flex: none; height: 14px; transition: transform var(--motion-fast) var(--ease); width: 14px; }
.bark-dd.is-open > svg { transform: rotate(180deg); }
.bark-dd:hover:not(.is-active) { background: var(--surface-2); }
.bark-dd:focus-visible,
.bark-dd.is-open { box-shadow: var(--ring); outline: none; }
.bark-dd.is-active { background: var(--accent-soft); border-color: var(--accent-strong); color: var(--accent-strong); }
.bark-dd.is-active > svg { color: currentColor; }
.bark-dd__value { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bark-dd--field .bark-dd__value { flex: 1 1 auto; }
.bark-dd__more { color: var(--muted); font-weight: 600; }
.bark-dd.is-active .bark-dd__more { color: inherit; }
.bark-dd-panel { border-radius: var(--radius-control); display: flex; flex-direction: column; overflow: hidden; }
.bark-dd__search { align-items: center; border-bottom: 1px solid var(--line-2); color: var(--muted); display: flex; flex: none; gap: 8px; height: 42px; padding: 0 12px; }
.bark-dd__search svg { flex: none; height: 16px; width: 16px; }
.bark-dd__search input { background: transparent; border: 0; color: var(--ink); flex: 1; font: 500 13px var(--sans); height: 100%; min-width: 0; outline: none; }
.bark-dd__search input::placeholder { color: var(--muted); }
.bark-dd__list { flex: 1 1 auto; outline: none; overflow-y: auto; overscroll-behavior: contain; padding: 6px; }
.bark-dd__option {
  align-items: center;
  border-radius: var(--radius-sm);
  color: var(--ink2);
  cursor: pointer;
  display: flex;
  font: 500 13px/1.3 var(--sans);
  gap: 8px;
  min-height: var(--control-sm);
  padding: 5px 10px 5px 6px;
  user-select: none;
}
.bark-dd__option.is-hi { background: var(--chip); color: var(--ink); }
.bark-dd__option[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.bark-dd__option[aria-disabled="true"] { color: var(--muted); cursor: not-allowed; }
.bark-dd__option--all { border-bottom: 1px solid var(--line-2); border-radius: var(--radius-sm) var(--radius-sm) 0 0; margin-bottom: 4px; }
.bark-dd__check { color: var(--accent-strong); display: inline-flex; flex: none; width: 16px; }
.bark-dd__check svg { height: 14px; width: 14px; }
.bark-dd__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bark-dd__sub { color: var(--muted); font-size: 12px; font-weight: 500; margin-left: 6px; }
.bark-dd__count { color: var(--muted); flex: none; font: 500 12px/1 var(--sans); font-variant-numeric: tabular-nums; margin-left: auto; padding-left: 8px; }
.bark-dd__group { color: var(--muted); font: 700 11px/1.2 var(--sans); letter-spacing: 0.04em; padding: 8px 10px 4px; text-transform: uppercase; }
.bark-dd__empty { color: var(--muted); font: 500 13px/1.4 var(--sans); padding: 14px 10px; text-align: center; }
.bark-dd__foot { align-items: center; border-top: 1px solid var(--line-2); color: var(--muted); display: flex; flex: none; flex-wrap: wrap; font: 500 12px/1.3 var(--sans); gap: 8px; padding: 8px 10px; }
.bark-dd__foot > span { margin-right: auto; }

/* Месяц: ‹ · «Октябрь 2026» · › и «Текущий». Не текущий месяц подсвечен одинаково на всех экранах;
   только background-color — шорткат стёр бы стрелку select. */
.bark-monthpick { align-items: center; display: inline-flex; flex-wrap: wrap; gap: 4px; max-width: 100%; min-width: 0; row-gap: 6px; }
.bark-monthpick__select { font-weight: 600; height: var(--control-sm); min-width: 150px; padding: 0 10px; width: auto; }
.bark-monthpick--sm .bark-monthpick__select { min-width: 132px; }
.bark-monthpick.is-other .bark-monthpick__select { background-color: var(--accent-soft); border-color: var(--accent-strong); color: var(--accent-strong); }
/* Листание дня, недели, месяца: ‹ подпись › и «Сегодня», когда открыт не сегодняшний. */
.bark-stepnav { align-items: center; display: inline-flex; flex: none; flex-wrap: wrap; gap: 4px; max-width: 100%; min-width: 0; }
.bark-stepnav__label { color: var(--ink); font: 600 13px/1 var(--sans); font-variant-numeric: tabular-nums; padding: 0 6px; white-space: nowrap; }

/* Сравнение: подпись базы рядом с дельтой («vs 1–19 сентября») и «против среднего» — мелко у
   значения. Сравнение без подписи, с чем сравниваем, запрещено. */
.bark-vs { color: var(--muted); font: 500 12px/1.3 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: 0; white-space: nowrap; }
td .bark-vs { margin-left: 6px; }
/* В карточке подпись встаёт рядом с числом, а на узкой — переносится под него, не за край. */
.bark-metric__value:has(> .bark-vs) { align-items: baseline; column-gap: 6px; display: flex; flex-wrap: wrap; }
.bark-compare-note { color: var(--muted); font: 500 12px/1.4 var(--sans); }

/* Drill-down: число раскрывается в записи. Нажимаемое число — кнопка без рамки с подчёркиванием
   по наведению; в дровере «‹ Назад» есть всегда (dialog.snippet.js, openDrill). */
.bark-drill {
  background: none;
  border: 0;
  border-radius: 4px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: inherit;
  text-decoration: underline dotted var(--line-control);
  text-underline-offset: 3px;
}
.bark-drill:hover { color: var(--accent-strong); text-decoration: underline; }
.bark-drill:focus-visible { box-shadow: var(--ring); outline: none; }
.bark-drill-list { display: grid; margin: 0; padding: 0; }
.bark-drill-list__row {
  align-items: baseline;
  border-bottom: 1px solid var(--line-2);
  display: grid;
  gap: 2px 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px 0;
}
.bark-drill-list__who { color: var(--ink); font: 600 14px/1.35 var(--sans); min-width: 0; }
.bark-drill-list__what { color: var(--ink2); font: 400 13px/1.4 var(--sans); grid-column: 1; }
.bark-drill-list__sum { color: var(--ink); font: 600 14px/1 var(--sans); font-variant-numeric: tabular-nums; grid-row: 1; grid-column: 2; text-align: right; }
.bark-drill-list__when { color: var(--muted); font: 500 12px/1.4 var(--sans); grid-column: 2; text-align: right; white-space: nowrap; }

/* ---- Inline alert: persistent region state (toast = событие, alert = состояние) ---- */
.bark-alert {
  align-items: flex-start;
  border: 1px solid;
  border-radius: var(--radius-control);
  display: flex;
  font: 400 13px/1.45 var(--sans);
  gap: 10px;
  padding: 12px 16px;
}
.bark-alert svg { flex: none; height: 18px; margin-top: 1px; width: 18px; }
.bark-alert--info { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 25%, transparent); color: var(--ink2); }
.bark-alert--info svg { color: var(--info); }
.bark-alert--ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 25%, transparent); color: var(--ink2); }
.bark-alert--ok svg { color: var(--ok); }
.bark-alert--warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 28%, transparent); color: var(--ink2); }
.bark-alert--warn svg { color: var(--warn); }
.bark-alert--bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 25%, transparent); color: var(--ink2); }
.bark-alert--bad svg { color: var(--bad); }

@media (prefers-reduced-motion: reduce) {
  .bark-toast { animation: none; }
  .bark-update-banner { animation: none; }
  .bark-to-top { animation: none; }
  .bark-tree summary::before,
  .bark-disclosure > summary::before,
  .bark-table__group-toggle { transition: none; }
  .bark-period-panel,
  .bark-dd-panel { animation: none; }
  .bark-period > svg:last-child,
  .bark-dd > svg { transition: none; }
}

/* ---- Empty state: useful and short, inside its region — never full-screen, never a hero ---- */
.bark-empty {
  align-content: center;
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 40px 20px;
  text-align: center;
}
.bark-empty__icon {
  align-items: center;
  background: var(--chip);
  border-radius: 50%;
  color: var(--faint);
  display: inline-flex;
  height: 40px;
  justify-content: center;
  width: 40px;
}
.bark-empty__icon svg { height: 20px; width: 20px; }
.bark-empty__title { color: var(--ink2); font: 600 14px/1.4 var(--sans); }
.bark-empty__hint { color: var(--muted); font: 400 12px/1.5 var(--sans); max-width: 360px; }
.bark-empty .bark-btn { margin-top: 8px; }

/* LK preset — opt-in geometry (6.34.0) */
/* Эталон: bark-manager-v2 6618c06, пути ниже относительно web/src/.
   html, body или корень приложения: data-bark-preset="lk". Без него — legacy 6.x.
   Семантика .bark-btn (primary) сохраняется; Btn secondary = --secondary.
   Breakpoint оболочки остаётся 767: drawer.snippet.js использует тот же порог.
   Менять только CSS на 900 означало бы показать неработающий бургер. Флип — 7.0. */
/* kit.css:29-41 — шкалы; значения генерируются из preset.lk. */
/* @generated:lk start */
[data-bark-preset="lk"] {
  --control-sm: 32px;
  --control-md: 36px;
  --control-lg: 40px;
  --ctl-sm: var(--control-sm);
  --ctl: var(--control-md);
  --ctl-lg: var(--control-lg);
  --fs-2xs: 10.5px;
  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs-md: 13.5px;
  --fs-lg: 15px;
  --fs-xl: 19px;
  --fs-2xl: 22px;
  --fs-3xl: 25px;
  --fs-4xl: 32px;
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: var(--radius-control);
  --r-lg: 12px;
  --r-card: var(--radius-panel);
  --r-modal: var(--radius-modal);
  --r-pill: var(--radius-pill);
}
/* @generated:lk end */

/* kit.css:64-65,317,324-327 — базовый текст и секция. */
:where([data-bark-preset="lk"]) { font-family: var(--sans); color: var(--ink); }
/* Never set html font-size: rem/Tailwind and the user's default font size stay intact. */
:where(html[data-bark-preset="lk"]) body,
body:where([data-bark-preset="lk"]),
:where([data-bark-preset="lk"]) .bark-main { font-size: var(--fs-md); line-height: 1.5; }
:where([data-bark-preset="lk"]) .bark-body { font-size: var(--fs-md); }
:where([data-bark-preset="lk"]) .bark-h2 { font-size: var(--fs-xl); }

/* kit.css:69-80 — кнопка 36/13, sm 32/12.5/r8, lg 40/13.5. */
:where([data-bark-preset="lk"]) .bark-btn { height: var(--control-md); padding: 0 14px; font: 600 13px/1 var(--sans); }
:where([data-bark-preset="lk"]) .bark-btn:active { transform: translateY(.5px); }
:where([data-bark-preset="lk"]) .bark-btn--sm { height: var(--control-sm); padding: 0 10px; font-size: var(--fs-sm); border-radius: var(--r-sm); gap: 6px; }
:where([data-bark-preset="lk"]) .bark-btn--lg { height: var(--control-lg); padding: 0 18px; font-size: var(--fs-md); }
:where([data-bark-preset="lk"]) .bark-btn--icon { width: var(--control-md); padding: 0; }
:where([data-bark-preset="lk"]) .bark-btn--icon.bark-btn--sm { width: var(--control-sm); padding: 0; }
:where([data-bark-preset="lk"]) .bark-btn--icon.bark-btn--lg { width: var(--control-lg); padding: 0; }
/* kit.css:73,77 — явный secondary, не смена смысла старого .bark-btn. */
:where([data-bark-preset="lk"]) .bark-btn--secondary { background: var(--surface); color: var(--ink2); border-color: var(--line-control); }
:where([data-bark-preset="lk"]) .bark-btn--secondary:hover { background: var(--surface-2); color: var(--ink); }
:where([data-bark-preset="lk"]) .bark-btn--secondary:focus-visible { border-color: var(--focus-line); }
/* kit.css:84 — LK ghost is borderless; secondary above is the framed action. */
:where([data-bark-preset="lk"]) .bark-btn--ghost { border-color: transparent; }
:where([data-bark-preset="lk"]) .bark-btn--ghost:hover:not(:disabled, .is-active) { background: var(--surface-2); color: var(--ink); border-color: transparent; }
:where([data-bark-preset="lk"]) .bark-btn--ghost:focus-visible,
:where([data-bark-preset="lk"]) .bark-btn--ghost.is-active { border-color: transparent; }
:where([data-bark-preset="lk"]) .bark-btn--ghost:hover:not(:disabled, :focus-visible) { border-color: transparent; }

/* kit.css:144-164 — поля, placeholder и позиция стрелки select. */
:where([data-bark-preset="lk"]) .bark-field__control { height: var(--control-md); font: 500 13px/1.4 var(--sans); }
:where([data-bark-preset="lk"]) .bark-toolbar .bark-field__control { height: var(--control-md); }
:where([data-bark-preset="lk"]) .bark-field__control::placeholder { color: var(--faint); }
:where([data-bark-preset="lk"]) .bark-field__control:focus { border-color: var(--focus-line); box-shadow: var(--ring); }
:where([data-bark-preset="lk"]) .bark-field--error .bark-field__control:focus { border-color: var(--bad); box-shadow: var(--ring-bad); }
:where([data-bark-preset="lk"]) .bark-field__control--sm { height: var(--control-sm); padding-inline: 10px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
:where([data-bark-preset="lk"]) .bark-field__control--lg { height: var(--control-lg); }
:where([data-bark-preset="lk"]) .bark-field__control--data { font-family: var(--mono); }
:where([data-bark-preset="lk"]) textarea.bark-field__control { height: auto; min-height: 84px; }
:where([data-bark-preset="lk"]) select.bark-field__control { padding-right: 28px; background-position: right 15px center, right 10px center; }
/* kit.css:177-193 — поиск сохраняет собственные поля и более тёмный placeholder. */
:where([data-bark-preset="lk"]) .bark-search > .bark-field__control { padding-left: 36px; padding-right: 40px; }
:where([data-bark-preset="lk"]) .bark-search > .bark-field__control::placeholder { color: var(--muted); font-weight: 400; }
:where([data-bark-preset="lk"]) .bark-search--sm > .bark-field__control { height: var(--control-sm); padding-left: 32px; padding-right: 34px; }
:where([data-bark-preset="lk"]) .bark-search--lg > .bark-field__control { height: var(--control-lg); padding-left: 40px; font-size: var(--fs-md); }
/* Explicit sizes still win inside a toolbar (Reserves.jsx uses SearchField sm). */
:where([data-bark-preset="lk"]) .bark-toolbar :is(.bark-field__control--sm, .bark-search--sm > .bark-field__control) { height: var(--control-sm); }
:where([data-bark-preset="lk"]) .bark-toolbar :is(.bark-field__control--lg, .bark-search--lg > .bark-field__control) { height: var(--control-lg); }

/* kit.css:590-615 — трек 36×20 / sm 28×16, ручка белая в обеих темах. */
:where([data-bark-preset="lk"]) .bark-switch__track { width: 36px; height: 20px; padding: 1px; }
:where([data-bark-preset="lk"]) .bark-switch__knob { width: 16px; height: 16px; background: #fff; transition: transform var(--motion-base) var(--ease); }
:where([data-bark-preset="lk"]) .bark-switch--sm .bark-switch__track { width: 28px; height: 16px; }
:where([data-bark-preset="lk"]) .bark-switch--sm .bark-switch__knob { width: 12px; height: 12px; }
:where([data-bark-preset="lk"]) .bark-switch--sm input:checked + .bark-switch__track .bark-switch__knob { transform: translateX(12px); }
:where([data-bark-preset="lk"]) .bark-switch:not(.is-busy) input:disabled + .bark-switch__track .bark-switch__knob { background: var(--chip); box-shadow: inset 0 0 0 1px var(--line-control); }

/* kit.css:217-229 — фильтр-чип: тихий фон, рамка выбранного, без лишней галочки.
   Не маскирует keyboard-focus и disabled. Доступность границы off — ограничение ЛК,
   см. docs/LK_PARITY.md; порог 3:1 не объявляется пройденным. */
:where([data-bark-preset="lk"]) .bark-toggle-chip { font-size: var(--fs-sm); background: color-mix(in srgb, var(--ink) 6%, transparent); border-color: transparent; }
:where([data-bark-preset="lk"]) .bark-toggle-chip:hover:not(:disabled, :focus-visible) { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); border-color: transparent; }
:where([data-bark-preset="lk"]) .bark-toggle-chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--line-control-accent); color: var(--accent-strong); }
:where([data-bark-preset="lk"]) .bark-toggle-chip[aria-pressed="true"]:hover:not(:disabled, :focus-visible) { background: var(--accent-soft); border-color: var(--line-control-accent); }
:where([data-bark-preset="lk"]) .bark-toggle-chip[aria-pressed="true"] svg { display: none; }
:where([data-bark-preset="lk"]) .bark-toggle-chip:disabled { background: var(--chip); color: var(--muted); }

/* kit.css:260-274 — сегмент 36, поле field, активная поверхность surface. */
:where([data-bark-preset="lk"]) .bark-seg { height: var(--control-md); padding: 2px; background: var(--field); }
:where([data-bark-preset="lk"]) .bark-seg > button { border-radius: var(--r-sm); }
:where([data-bark-preset="lk"]) .bark-seg > button[aria-pressed="true"],
:where([data-bark-preset="lk"]) .bark-seg > button[aria-selected="true"] { background: var(--surface); }
:where([data-bark-preset="lk"]) .bark-seg.is-enhanced > button[aria-pressed="true"],
:where([data-bark-preset="lk"]) .bark-seg.is-enhanced > button[aria-selected="true"] { background: none; }
:where([data-bark-preset="lk"]) .bark-seg__thumb { background: var(--surface); top: 2px; bottom: 2px; border-radius: var(--r-sm); }
:where([data-bark-preset="lk"]) .bark-seg--sm { height: var(--control-sm); padding: 1px; border-radius: var(--r-sm); }
:where([data-bark-preset="lk"]) .bark-seg--sm .bark-seg__thumb { top: 1px; bottom: 1px; border-radius: var(--r-xs); }

/* kit.css:303-310 — анатомия панели. Flush сохраняется. */
:where([data-bark-preset="lk"]) .bark-panel .bark-panel__header { min-height: 56px; padding: 0 20px; }
:where([data-bark-preset="lk"]) .bark-panel .bark-panel__body { padding: 16px 20px; }
:where([data-bark-preset="lk"]) .bark-panel .bark-panel__footer { padding: 12px 20px; }
:where([data-bark-preset="lk"]) .bark-panel--flush .bark-panel__body { padding: 0; }
/* kit.css:350-371,394-396,453-456 — таблица, tight и группы строк. */
:where([data-bark-preset="lk"]) .bark-table { font-size: 13px; line-height: 1.5; }
:where([data-bark-preset="lk"]) .bark-table th { font: 600 10.5px/1.2 var(--sans); color: var(--faint); padding: 0 12px; }
:where([data-bark-preset="lk"]) .bark-table td { height: 36px; padding: 5px 12px; }
:where([data-bark-preset="lk"]) .bark-table th:first-child,
:where([data-bark-preset="lk"]) .bark-table td:first-child { padding-left: 12px; }
:where([data-bark-preset="lk"]) .bark-table th:last-child,
:where([data-bark-preset="lk"]) .bark-table td:last-child { padding-right: 12px; }
:where([data-bark-preset="lk"]) .bark-table--roomy td { height: 44px; padding-block: 3px; }
:where([data-bark-preset="lk"]) .bark-table--tight th { height: 34px; padding-inline: 8px; }
:where([data-bark-preset="lk"]) .bark-table--tight td { height: auto; padding: 7px 8px; font-size: 12.5px; }
:where([data-bark-preset="lk"]) .bark-table--tight :is(th, td):first-child { padding-left: 8px; }
:where([data-bark-preset="lk"]) .bark-table--tight :is(th, td):last-child { padding-right: 8px; }
:where([data-bark-preset="lk"]) .bark-table .bark-table__group > :is(th, td) { height: 46px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--ink); text-transform: none; letter-spacing: 0; }

/* kit.css:478-495 — значение KPI 22/700, мобильное 19. */
:where([data-bark-preset="lk"]) .bark-kpi__value,
:where([data-bark-preset="lk"]) .bark-metric__value { font: 700 22px/1.1 var(--mono); letter-spacing: -.3px; }
/* kit.css:519-529 — модалки, surface вместо surface-pop (включая dark). */
:where([data-bark-preset="lk"]) .bark-modal { background: var(--surface); width: min(560px, 100%); }
:where([data-bark-preset="lk"]) .bark-modal--sm { width: min(440px, 100%); }
:where([data-bark-preset="lk"]) .bark-modal--lg { width: min(760px, 100%); }
:where([data-bark-preset="lk"]) .bark-modal--xl { width: min(1100px, 100%); }
/* kit.css:570-575 — правая панель сохраняет видимый край страницы. */
:where([data-bark-preset="lk"]) .bark-modal-backdrop--right > .bark-modal--sm { width: min(440px, calc(100% - 64px)); }
:where([data-bark-preset="lk"]) .bark-modal-backdrop--right > .bark-modal--lg { width: min(760px, calc(100% - 64px)); }
/* kit.jsx:321-330; kit.css:489-503 — Empty с icon-tile--lg--neutral, не кругом. */
:where([data-bark-preset="lk"]) .bark-empty { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 40px 24px; max-width: 420px; margin-inline: auto; }
:where([data-bark-preset="lk"]) .bark-empty__icon { background: var(--chip); color: var(--muted); border-radius: var(--r-lg); width: 40px; height: 40px; }
:where([data-bark-preset="lk"]) .bark-empty__title { color: var(--ink); line-height: 1.5; margin-top: 12px; }
:where([data-bark-preset="lk"]) .bark-empty__hint { font-size: 13px; max-width: none; margin-top: 4px; }
:where([data-bark-preset="lk"]) .bark-empty .bark-btn { margin-top: 16px; }

/* Shell.jsx:816-831 — обычный пункт: 9×12/r10, 13.5/500, активный 600, иконка 17. */
:where([data-bark-preset="lk"]) .bark-sidebar__item { padding: 9px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 500; gap: 11px; }
:where([data-bark-preset="lk"]) :is(.bark-sidebar__item[aria-current]:not([aria-current="false"]), .bark-sidebar__item--active) { font-weight: 600; }
:where([data-bark-preset="lk"]) .bark-sidebar__item svg { width: 17px; height: 17px; }
/* index.css:185; Shell.jsx:240-241,1654 — поля main и реальная колонка 1180, без вычитания полей. */
:where([data-bark-preset="lk"]) .bark-main { --main-pad-top: 28px; --main-pad-x: 28px; }
:where([data-bark-preset="lk"]) .bark-main > :not(.bark-appbar, .bark-route-progress) { max-width: var(--page-col); }
:where([data-bark-preset="lk"]) .bark-main--full > :not(.bark-appbar, .bark-route-progress) { max-width: none; }
/* kit.css:320-327,495; index.css:678-689 — мобильные поля (в текущем ЛК по бокам 16, не 14). */
@media (max-width: 760px) {
  :where([data-bark-preset="lk"]) .bark-kpi__value,
  :where([data-bark-preset="lk"]) .bark-metric__value { font-size: 19px; }
  :where([data-bark-preset="lk"]) .bark-panel .bark-panel__header,
  :where([data-bark-preset="lk"]) .bark-panel .bark-panel__body,
  :where([data-bark-preset="lk"]) .bark-panel .bark-panel__footer { padding-inline: 16px; }
}
/* kit.css:439-469 — мобильные карточки; адаптер сохраняет существующий table--stack бренда. */
@media (max-width: 767px) {
  :where([data-bark-preset="lk"]) .bark-table--stack td,
  :where([data-bark-preset="lk"]) .bark-table--stack td:first-child,
  :where([data-bark-preset="lk"]) .bark-table--stack td:last-child { height: auto; padding: 0; }
  :where([data-bark-preset="lk"]) .bark-table--stack td[data-role="title"] { padding-right: 40px; }
  /* kit.css:553-557,581-587 — лист во всю ширину; пока с legacy-границей бренда 767. */
  :where([data-bark-preset="lk"]) .bark-modal { width: 100%; }
  :where([data-bark-preset="lk"]) .bark-modal-backdrop--right > .bark-modal { width: 100%; }
}
@media (max-width: 900px) {
  :where([data-bark-preset="lk"]) .bark-main { --main-pad-top: 14px; --main-pad-x: 16px; }
  :where([data-bark-preset="lk"]) :is(input, select, textarea) { font-size: 16px !important; }
}
/* index.css:181,188-189 — полный кабинет edge-to-edge, без стандартных 8px body.
   Только Bark-приложение с явным пресетом; legacy и встроенные виджеты не затрагиваются. */
:where(html[data-bark-preset="lk"]) body.bark-app,
body.bark-app:where([data-bark-preset="lk"]),
body.bark-app:has(> [data-bark-preset="lk"]) { margin: 0; }