/*
 * Тема дашборда «Академия Garden Group» поверх Pico CSS 2.1.1.
 * Источник правды — docs/design/brand.md. Цвета только через токены --ga-*.
 * Порядок подключения: pico → fonts.css → app.css.
 * Тема только светлая (как сайт академии).
 */

/* ============================================================
   1. Токены бренда
   ============================================================ */
:root {
  --ga-bg: #f7f5f0;
  --ga-surface: #ffffff;
  --ga-surface-sunken: #faf9f6;
  --ga-ink: #2c2a2b;
  --ga-graphite: #333333;
  --ga-graphite-hover: #1f1f1f;
  --ga-on-dark: #ffffff;
  --ga-on-dark-muted: #c6c6c6;
  --ga-green: #4a5b4f;
  --ga-green-dark: #3c5142;
  --ga-green-soft: #e6ece3;
  --ga-sage: #a7b3a0;
  --ga-sage-ink: #56624f;
  --ga-stone: #ede6df;
  --ga-line: #e1e1e1;
  --ga-line-strong: #c9c2b8;
  --ga-coral: #ff8562;
  --ga-coral-ink: #a6421f;
  --ga-ok: var(--ga-green);
  --ga-ok-ink: var(--ga-green-dark);
  --ga-ok-soft: var(--ga-green-soft);
  --ga-warn: #d0973a;
  /* шаг B: текст «внимание» — тёмный tan сайта, а не янтарь (янтаря в палитре сайта нет) */
  --ga-warn-ink: var(--ga-tan-ink);
  --ga-warn-soft: #f7ebd6;
  --ga-danger: #d64a2e;
  --ga-danger-ink: #9e2f1a;
  --ga-danger-soft: #fae3dc;
  --ga-focus: var(--ga-green-dark);

  /* Палитра сайта академии (computed styles school.garden-group.online/academy, 30.09.2026; brand.md §3.4).
     Плоские заливки карточек и чипов; текст на тёмных заливках — кремовый. */
  --ga-cream: var(--ga-bg);
  --ga-forest: var(--ga-green); /* #4a5b4f — полосы-секции и тёмные карточки сайта */
  --ga-forest-deep: var(--ga-green-dark); /* #3c5142 — кнопки сайта, наведение на тёмную карточку */
  --ga-forest-900: #2e3b31;
  --ga-beige: var(--ga-stone); /* #ede6df — тёплая карточка */
  --ga-beige-hover: #e4dbd1;
  --ga-sage-hover: #9ca994;
  --ga-tan: #9a7b63; /* золотой акцент: панель «Карьерный центр», наведение на пункты меню */
  --ga-tan-ink: #715843; /* текст tan-смысла («внимание», «вне допуска»): 6,6:1 к белому, 5,3:1 к беже */
  --ga-navy: #33415c; /* панель «Поддержка и забота», чип «Вебинар» */
  --ga-olive: #9aa96a; /* чипы «New», «Топ просмотров» */
  --ga-chip-line: #acaea6; /* рамка чипов-тегов */
  --ga-alert: var(--ga-coral-ink); /* плитка-«проблема»: сдержанный терракот (токен ошибки/падения), текст кремовый 5,6:1 */
  --ga-alert-hover: #8f3818;
  --ga-on-dark-cream: var(--ga-bg);
  --ga-on-forest-muted: #d8d9d3; /* 5,1:1 на forest */
  --ga-on-alert-muted: var(--ga-on-dark-cream); /* на терракоте только кремовый: светлее — меньше 4,5:1 */

  /* Шаг B: поля форм и строки таблиц. Рамка поля — 3,2:1 к белому (граница поля видна, WCAG 1.4.11);
     строки таблицы — «зебра» кремовым, наведение — беж (как затемнение плитки), «Итого» — беж и черта forest. */
  --ga-field-line: #8e908a;
  --ga-row-zebra: var(--ga-bg);
  --ga-row-hover: var(--ga-beige);
  --ga-row-total: var(--ga-beige);

  /* Цвета продуктов (линейки) — палитра сайта, brand.md §7.1: ЛД — forest, МС — tan, Нейросети — navy,
     Визуализация — графит, Бизнес — olive, остальные — тёмный шалфей. Первые четыре ≥ 3:1 к дорожке beige. */
  --ga-product-1: var(--ga-forest);
  --ga-product-2: var(--ga-tan);
  --ga-product-3: var(--ga-navy);
  --ga-product-4: var(--ga-graphite);
  --ga-product-5: var(--ga-olive);
  --ga-product-6: var(--ga-sage-ink);

  /* Серии графиков: порядок фиксирован (brand.md §7.1) */
  --ga-series-1: var(--ga-green);
  --ga-series-2: var(--ga-sage);
  --ga-series-3: var(--ga-graphite);
  --ga-series-4: var(--ga-tan); /* шаг B: коралла на сайте нет — четвёртая серия tan (3,9:1 к белому) */
  --ga-series-5: var(--ga-stone);
  --ga-chart-grid: var(--ga-stone);
  --ga-chart-text: var(--ga-sage-ink);

  /* Лестница воронки: от тёмно-зелёного к камню (§7.4) */
  --ga-funnel-1: #3c5142;
  --ga-funnel-2: #4a5b4f;
  --ga-funnel-3: #6e7f71;
  --ga-funnel-4: #8fa08f;
  --ga-funnel-5: #a7b3a0;
  --ga-funnel-6: #c5cec0;
  --ga-funnel-7: #ede6df;

  --ga-font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ga-font-text: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Заголовки на сайте — Mulish 600 (hero 60 px, секции 45 px капсом); Montserrat — только цифры */
  --ga-font-heading: var(--ga-font-text);
  --ga-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ga-text-xs: 0.875rem;
  --ga-text-sm: 0.9375rem;
  --ga-text-md: 1rem;
  --ga-text-lg: 1.25rem;
  --ga-text-xl: 1.75rem;
  --ga-text-2xl: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem);
  --ga-leading-tight: 1.15;
  --ga-leading: 1.55;
  --ga-tracking-caps: 0.12em;

  --ga-space-1: 4px;
  --ga-space-2: 8px;
  --ga-space-3: 12px;
  --ga-space-4: 16px;
  --ga-space-5: 24px;
  --ga-space-6: 32px;
  --ga-space-7: 48px;
  --ga-space-8: 64px;

  --ga-radius-xs: 2px;
  --ga-radius-card: 3px; /* карточки и кнопки сайта — 3 px */
  --ga-radius-sm: 4px;
  --ga-radius-md: 6px;
  --ga-radius-lg: 8px;
  --ga-radius-pill: 999px;
  --ga-shadow-pop: 0 4px 16px rgba(44, 42, 43, 0.08);
  --ga-shadow-hairline: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  --ga-shadow-card: 0 2px 8px rgba(46, 46, 46, 0.06);
  --ga-ease: ease-in-out; /* как у кнопок и пунктов меню сайта: 0.2s ease-in-out */
  --ga-dur-fast: 140ms;
  --ga-dur: 200ms;
  --ga-container: 1440px;
  --ga-gutter: 16px;
  --ga-control-h: 2.5rem;
  --ga-tabbar-h: 56px; /* нижняя панель разделов на телефоне (этап 11) */

  /* Pico: размеры (у Pico они тоже на :root) */
  --pico-font-family: var(--ga-font-text);
  --pico-font-family-sans-serif: var(--ga-font-text);
  --pico-font-family-monospace: var(--ga-font-mono);
  --pico-font-size: 100%;
  --pico-line-height: var(--ga-leading);
  --pico-font-weight: 400;
  --pico-border-radius: var(--ga-radius-sm);
  --pico-border-width: 1px;
  --pico-outline-width: 2px;
  --pico-spacing: var(--ga-space-4);
  --pico-typography-spacing-vertical: var(--ga-space-4);
  --pico-block-spacing-vertical: var(--ga-space-5);
  --pico-block-spacing-horizontal: var(--ga-space-5);
  --pico-form-element-spacing-vertical: 0.5rem;
  --pico-form-element-spacing-horizontal: 0.75rem;
  --pico-nav-element-spacing-vertical: 0;
  --pico-nav-element-spacing-horizontal: 0;
  --pico-transition: 0.15s ease-in-out;
}

@media (min-width: 768px) {
  :root {
    --ga-gutter: 32px;
    --pico-font-size: 100%; /* перебиваем рост Pico до 131 % */
  }
}

/* Тема Pico → палитра академии. Селектор как у Pico, иначе не перебьём. */
:root:not([data-theme="dark"]),
[data-theme="light"] {
  --pico-background-color: var(--ga-bg);
  --pico-color: var(--ga-ink);
  --pico-text-selection-color: rgba(74, 91, 79, 0.2);
  --pico-muted-color: var(--ga-sage-ink);
  --pico-muted-border-color: var(--ga-line);

  --pico-primary: var(--ga-green-dark);
  --pico-primary-background: var(--ga-graphite);
  --pico-primary-border: var(--ga-graphite);
  --pico-primary-underline: rgba(167, 179, 160, 0.9);
  --pico-primary-hover: var(--ga-green-dark);
  --pico-primary-hover-background: var(--ga-graphite-hover);
  --pico-primary-hover-border: var(--ga-graphite-hover);
  --pico-primary-hover-underline: var(--ga-tan);
  --pico-primary-focus: rgba(60, 81, 66, 0.45);
  --pico-primary-inverse: var(--ga-on-dark);

  --pico-secondary: var(--ga-graphite);
  --pico-secondary-background: var(--ga-graphite);
  --pico-secondary-border: var(--ga-graphite);
  --pico-secondary-underline: rgba(51, 51, 51, 0.4);
  --pico-secondary-hover: var(--ga-graphite-hover);
  --pico-secondary-hover-background: var(--ga-graphite-hover);
  --pico-secondary-hover-border: var(--ga-graphite-hover);
  --pico-secondary-hover-underline: var(--ga-graphite-hover);
  --pico-secondary-focus: rgba(60, 81, 66, 0.45);
  --pico-secondary-inverse: var(--ga-on-dark);

  --pico-contrast: var(--ga-ink);
  --pico-contrast-background: var(--ga-graphite);
  --pico-contrast-inverse: var(--ga-on-dark);

  --pico-box-shadow: none;
  --pico-h1-color: var(--ga-ink);
  --pico-h2-color: var(--ga-ink);
  --pico-h3-color: var(--ga-ink);
  --pico-h4-color: var(--ga-ink);
  --pico-h5-color: var(--ga-ink);
  --pico-h6-color: var(--ga-sage-ink);
  --pico-mark-background-color: var(--ga-warn-soft);
  --pico-mark-color: var(--ga-ink);
  --pico-ins-color: var(--ga-ok-ink);
  --pico-del-color: var(--ga-danger-ink);

  --pico-table-border-color: var(--ga-line);
  --pico-table-row-stripped-background-color: var(--ga-surface-sunken);
  --pico-code-background-color: var(--ga-stone);
  --pico-code-color: var(--ga-ink);

  --pico-form-element-background-color: var(--ga-surface);
  --pico-form-element-selected-background-color: var(--ga-green-soft);
  --pico-form-element-border-color: var(--ga-field-line);
  --pico-form-element-color: var(--ga-ink);
  --pico-form-element-placeholder-color: var(--ga-sage-ink);
  --pico-form-element-active-background-color: var(--ga-surface);
  --pico-form-element-active-border-color: var(--ga-green-dark);
  --pico-form-element-focus-color: rgba(60, 81, 66, 0.35);
  --pico-form-element-invalid-border-color: var(--ga-danger);
  --pico-form-element-invalid-active-border-color: var(--ga-danger-ink);
  --pico-form-element-valid-border-color: var(--ga-green);
  --pico-switch-checked-background-color: var(--ga-green);
  --pico-range-thumb-active-color: var(--ga-green);

  --pico-accordion-active-summary-color: var(--ga-green-dark);
  --pico-accordion-open-summary-color: var(--ga-sage-ink);
  --pico-card-background-color: var(--ga-surface);
  --pico-card-border-color: var(--ga-line);
  --pico-card-box-shadow: none;
  --pico-card-sectioning-background-color: var(--ga-surface);
  --pico-progress-color: var(--ga-green);
  --pico-tooltip-background-color: var(--ga-graphite);
}

/* ============================================================
   2. База и типографика
   ============================================================ */
html {
  background-color: var(--ga-bg);
}

body {
  background-color: var(--ga-bg);
  color: var(--ga-ink);
  font-family: var(--ga-font-text);
  line-height: var(--ga-leading);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body > main {
  flex: 1 0 auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--ga-font-heading);
  font-weight: 600;
  color: var(--ga-ink);
  line-height: 1.3;
}

h1 {
  font-size: var(--ga-text-2xl);
  line-height: var(--ga-leading-tight);
}

h2 {
  font-size: var(--ga-text-2xl);
  line-height: var(--ga-leading-tight);
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--ga-text-lg);
}

h4 {
  font-size: var(--ga-text-md);
}

h5,
h6 {
  font-size: var(--ga-text-sm);
}

/* small — ровно 14 px, независимо от родителя */
small {
  font-size: var(--ga-text-xs);
  line-height: 1.45;
}

/* Ссылки: зелёный текст, подчёркивание шалфеем, при наведении — кораллом */
:where(a:not([role="button"])) {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Коралловая ссылка-действие — не больше одной на карточку */
.link-accent,
a.link-accent {
  color: var(--ga-coral-ink);
  text-decoration: underline;
  text-decoration-color: var(--ga-coral);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 600;
}

.link-accent:hover {
  color: var(--ga-danger-ink);
  text-decoration-color: var(--ga-coral-ink);
}

code,
kbd,
samp {
  font-family: var(--ga-font-mono);
  /* не мельче 14 px даже внутри подписей */
  font-size: max(0.875em, var(--ga-text-xs));
  border-radius: var(--ga-radius-sm);
  background: var(--ga-stone);
  color: var(--ga-ink);
  padding: 0.1em 0.35em;
}

/* Маркеры «•» зелёным в описательных списках */
ul:not([class]) li::marker {
  content: "• ";
  color: var(--ga-green);
}

nav ul:not([class]) li::marker {
  content: none;
}

details > summary {
  font-size: var(--ga-text-sm);
  font-weight: 600;
  color: var(--ga-sage-ink);
}

hr {
  border-color: var(--ga-line);
}

/* Семантические текстовые классы (используются во всех экранах) */
.muted {
  color: var(--ga-sage-ink);
}

.error {
  color: var(--ga-danger-ink);
}

.ok {
  color: var(--ga-ok-ink);
}

.warn {
  color: var(--ga-warn-ink);
}

.accent {
  color: var(--ga-green);
}

/* Фокус: видимое зелёное кольцо у всех интерактивных элементов */
:where(a, button, [role="button"], summary, [tabindex]):focus-visible,
:is(button, [role="button"], [type="submit"], [type="button"], [type="reset"]):focus-visible {
  outline: 2px solid var(--ga-focus);
  outline-offset: 2px;
  box-shadow: none;
}

/* Загрузка HTMX-фрагментов */
[aria-busy="true"] {
  color: var(--ga-sage-ink);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================
   3. Шапка как на сайте академии: кремовая строка с логотипом, графитовая полоса разделов
   ============================================================ */
body > header,
body > footer {
  padding-block: 0;
}

.site-header {
  background: var(--ga-bg);
}

/* Без полосы разделов (страницы без входа) — волосяная линия снизу */
.site-header:not(:has(.site-nav)) {
  border-bottom: 1px solid var(--ga-line);
}

.site-topbar {
  max-width: var(--ga-container);
  margin-inline: auto;
  padding-inline: var(--ga-gutter);
  min-height: 72px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--ga-space-2) var(--ga-space-4);
  padding-block: var(--ga-space-3);
}

/* Логотип — файл с сайта (static/brand/academy-logo.svg), 130 × 38 px, как в шапке сайта */
.brand,
a.brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
  border-radius: var(--ga-radius-xs);
}

.brand-logo {
  display: block;
  width: 130px;
  height: auto;
}

@media (max-width: 575.98px) {
  .brand-logo {
    width: 112px;
  }
}

.site-user {
  display: flex;
  align-items: center;
  gap: var(--ga-space-3);
  flex-wrap: wrap;
}

.site-user small {
  white-space: nowrap;
}

/* Телефон: как на сайте — логотип и кнопка в одну строку; имя пользователя — в подсказке кнопки «Выйти» */
@media (max-width: 575.98px) {
  .site-topbar {
    flex-wrap: nowrap;
    min-height: 60px;
  }

  .site-user small {
    display: none;
  }
}

/* Графитовая полоса разделов; на узком экране скроллится внутри себя.
   Pico делает nav флексом — список тогда сжимается до пунктов и встаёт по центру; у нас — блок во всю ширину. */
.site-nav {
  display: block;
  background: var(--ga-graphite);
  position: relative;
}

/* На узком экране пункты уходят за край — «›» справа подсказывает, что полосу можно листать
   (класс has-more ставит nav.js). Плоская плашка, без градиента. */
.site-nav.has-more::after {
  content: "›";
  position: absolute;
  inset: 0 0 0 auto;
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ga-graphite);
  color: var(--ga-sage);
  font-size: 1.25rem;
  line-height: 1;
  pointer-events: none;
}

/* Текст первого пункта — на одной вертикали с логотипом (отступ контейнера минус внутренний отступ пункта 12 px) */
.site-nav .main-nav {
  max-width: var(--ga-container);
  margin: 0 auto;
  padding: 0 calc(var(--ga-gutter) - 12px);
  display: flex;
  gap: var(--ga-space-1);
  overflow-x: auto;
  scrollbar-width: none;
  list-style: none;
}

.site-nav .main-nav::-webkit-scrollbar {
  display: none;
}

.site-nav .main-nav li {
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
}

/* Пункты — как на сайте: Mulish 400 белым; наведение — шалфейная черта, текущий раздел — 600 и черта tan */
.site-nav .main-nav a {
  display: block;
  margin: 0;
  padding: 12px 12px 9px;
  color: var(--ga-on-dark);
  font: 400 var(--ga-text-sm) / 1 var(--ga-font-text);
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  transition: border-color var(--ga-dur) var(--ga-ease), color var(--ga-dur) var(--ga-ease);
}

.site-nav .main-nav a:hover {
  color: var(--ga-on-dark);
  border-bottom-color: var(--ga-sage);
}

.site-nav .main-nav a[aria-current="page"] {
  font-weight: 600;
  border-bottom-color: var(--ga-tan);
}

.site-nav .main-nav a:focus-visible {
  outline: 2px solid var(--ga-on-dark);
  outline-offset: -4px;
}

/* ============================================================
   4. Раскладка страницы и подвал
   ============================================================ */
main.container-fluid,
.site-main {
  max-width: var(--ga-container);
  margin-inline: auto;
  padding: var(--ga-space-6) var(--ga-gutter) var(--ga-space-7);
}

footer.container-fluid,
.site-footer {
  border-top: 1px solid var(--ga-line);
  background: var(--ga-surface);
  padding: var(--ga-space-5) var(--ga-gutter);
}

.site-footer-inner {
  max-width: var(--ga-container);
  margin-inline: auto;
}

/* Заголовок страницы: первое слово зелёным (h2 .accent) */
main > hgroup:first-child,
.page-head {
  margin-bottom: var(--ga-space-5);
}

main > hgroup:first-child h2,
.page-head h2 {
  margin-bottom: 0;
  /* как «Академия Гарден Груп» на сайте: Mulish 600, первое слово зелёным */
  font-weight: 600;
}

main > hgroup:first-child > p:not(.eyebrow),
.page-head > p:not(.eyebrow) {
  font-size: var(--ga-text-sm);
  color: var(--ga-sage-ink);
  margin-top: var(--ga-space-2);
  margin-bottom: 0;
}

/* Однословный заголовок без .accent — целиком зелёный */
main > hgroup:first-child h2:not(:has(.accent)),
.page-head h2:not(:has(.accent)) {
  color: var(--ga-green);
}

h1 .accent,
h2 .accent,
h3 .accent {
  color: var(--ga-green);
}

/* Капительный надзаголовок с разрядкой («ПРОГРАММЫ ОБУЧЕНИЯ») */
.eyebrow {
  font: 700 var(--ga-text-xs) / 1.3 var(--ga-font-text);
  text-transform: uppercase;
  letter-spacing: var(--ga-tracking-caps);
  color: var(--ga-green);
  margin: 0 0 var(--ga-space-1);
}

hgroup > .eyebrow {
  color: var(--ga-green);
  margin-bottom: var(--ga-space-2);
}

/* Разделитель групп карточек: надзаголовок + тонкая линия */
.section-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--ga-space-3);
  margin: var(--ga-space-6) 0 var(--ga-space-4);
}

.section-eyebrow::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--ga-line);
}

/* Подпись шалфеем под заголовком раздела */
.lead {
  font-size: var(--ga-text-sm);
  color: var(--ga-sage-ink);
}

/* Сетка Pico: зазор 24 px */
.grid {
  gap: var(--ga-space-5);
}

/* ============================================================
   5. Карточки (article)
   ============================================================ */
article {
  background: var(--ga-surface);
  border: 1px solid var(--ga-line);
  border-radius: var(--ga-radius-lg);
  box-shadow: none;
  padding: var(--ga-space-5);
  margin: 0 0 var(--ga-space-5);
}

article > header,
article > footer {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

article > header {
  margin-bottom: var(--ga-space-4);
}

article > header > * + * {
  margin-top: var(--ga-space-1);
}

article > header h3 {
  font-size: var(--ga-text-lg);
  margin-bottom: 0;
}

article > header p.muted,
article > header > small {
  font-size: var(--ga-text-xs);
}

article > footer {
  margin-top: var(--ga-space-4);
  padding-top: var(--ga-space-4);
  border-top: 1px solid var(--ga-line);
}

/* Подзаголовок внутри карточки */
article h4 {
  font-size: var(--ga-text-md);
  margin-bottom: var(--ga-space-3);
}

@media (max-width: 575.98px) {
  article {
    padding: var(--ga-space-4);
  }
}

/* Шаг B: карточка на экране — плоская белая плоскость сайта (радиус 3 px, без рамки), как панель .ga-panel;
   экраны переводят блоки на ui.panel (заголовок капсом), а ещё не переведённые уже не выбиваются из стиля.
   Печать — как раньше (рамка 1 px). */
@media screen {
  article {
    border-color: transparent;
    border-radius: var(--ga-radius-card);
  }

  /* Карточка внутри белой панели или карточки — кремовая, чтобы её было видно */
  :is(.ga-panel, article) article:not(.task-card) {
    background: var(--ga-bg);
  }
}

/* ============================================================
   6. KPI-плитки: подпись → число → сравнение
   ============================================================ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--kpi-min, 11rem)), 1fr));
  gap: var(--ga-space-4);
  margin-bottom: var(--ga-space-2);
}

/* Телефон: плитки по две в ряд, а не столбиком на три экрана */
@media (max-width: 639.98px) {
  .kpi-grid {
    --kpi-min: 9rem;
    gap: var(--ga-space-3);
  }

  .kpi-grid .kpi {
    padding: var(--ga-space-3);
  }
}

/* Телефон до 480 px: плитки в одну колонку во всю ширину, как цифры «Об академии» на сайте, —
   крупные суммы («12 000 000 ₽») помещаются, подписи не переносятся в три строки */
@media (max-width: 479.98px) {
  .kpi-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.kpi {
  background: var(--ga-surface);
  border: 1px solid var(--ga-line);
  border-radius: var(--ga-radius-lg);
  padding: var(--ga-space-4) 20px;
  display: flex;
  flex-direction: column;
  gap: var(--ga-space-1);
  min-width: 0;
  /* число подстраивается под ширину плитки (см. .value) */
  container-type: inline-size;
}

/* Шаг B: плитка без .tile (ещё не переведённый экран) на экране — плоская бежевая, как .tile-beige */
@media screen {
  .kpi {
    background: var(--ga-beige);
    border-color: transparent;
    border-radius: var(--ga-radius-card);
  }
}

/* Главная плитка экрана — зелёная полоска сверху (тенью: высота плиток не меняется) */
.kpi.kpi-main {
  box-shadow: inset 0 3px 0 var(--ga-green);
}

.kpi .kpi-label,
.kpi > small.muted:first-child {
  font-weight: 600;
  color: var(--ga-sage-ink);
}

/* Подписи плиток на всех экранах с заглавной (в шаблонах бывают строчные) */
.kpi .kpi-label::first-letter,
.kpi > small.muted:first-child::first-letter {
  text-transform: uppercase;
}

.kpi .value {
  font-family: var(--ga-font-display);
  /* 28 px, в узкой плитке мельче: «12 345 678 ₽» не рвётся на строки */
  font-size: clamp(1.25rem, 16cqi, var(--ga-text-xl));
  font-weight: 600;
  line-height: 1.1;
  color: var(--ga-ink);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

.kpi .value.ok,
.kpi .value.accent {
  color: var(--ga-green);
}

.kpi .value.error {
  color: var(--ga-danger-ink);
}

/* Сравнение с прошлым периодом: плохо — коралловый текст, не красный */
.kpi small.ok,
.kpi .kpi-delta.ok {
  color: var(--ga-ok-ink);
  font-weight: 600;
}

.kpi small.error,
.kpi .kpi-delta.error,
.kpi .kpi-delta-down {
  color: var(--ga-coral-ink);
  font-weight: 600;
}

.kpi small.muted {
  color: var(--ga-sage-ink);
}

/* Подпись периода под сеткой */
.kpi-grid + small,
.kpi-period {
  display: block;
  margin-top: var(--ga-space-2);
  color: var(--ga-sage-ink);
}


/* ============================================================
   6а. Плитки и панели в стиле сайта академии (brand.md §6.15)
   Плоская заливка, радиус 3 px, без рамки и тени. Тон — класс плитки:
   tile-forest (ключевая: тёмно-зелёная, текст кремовый), tile-beige / tile-white (остальные),
   tile-sage (план/цель — как плитки «Об академии» на сайте), tile-alert (проблема — кирпичный, текст кремовый).
   Кликабельная плитка (.is-link): вся плитка — ссылка .tile-go, в углу бейдж «→»; «?» — пояснение (popover).
   ============================================================ */
.ga-panel {
  background: var(--ga-surface);
  border-radius: var(--ga-radius-card);
  padding: var(--ga-space-5);
  margin: 0 0 var(--ga-space-5);
}

@media (max-width: 575.98px) {
  .ga-panel {
    padding: var(--ga-space-3);
  }
}

/* Заголовок панели — капсом с разрядкой, как «ПРОГРАММЫ ОБУЧЕНИЯ» на сайте (там 45 px — у нас 18 px) */
.panel-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--ga-space-2) var(--ga-space-3);
  margin: 0 0 var(--ga-space-4);
  font: 600 1.125rem / 1.2 var(--ga-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ga-forest);
}

.panel-title .chip {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.panel-title small {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ga-sage-ink);
}

.kpi.tile {
  /* отступы плитки и место под бейджи «?» / «→» в правом верхнем углу (подпись не заходит под них) */
  --tile-pad-y: var(--ga-space-4);
  --tile-pad-x: 18px;
  --tile-badges: 0px;
  --tile-badge-top: calc(var(--tile-pad-y) - 2px);
  position: relative;
  border: 0;
  border-radius: var(--ga-radius-card);
  box-shadow: none;
  background: var(--ga-beige);
  color: var(--ga-ink);
  padding: var(--tile-pad-y) var(--tile-pad-x);
  gap: 6px;
  transition: background-color var(--ga-dur) var(--ga-ease);
}

.kpi.tile.is-link {
  --tile-badges: 28px;
}

.kpi.tile.has-tip {
  --tile-badges: 32px;
}

.kpi.tile.is-link.has-tip {
  --tile-badges: 60px;
}

.kpi.tile.tile-white {
  background: var(--ga-surface);
}

.kpi.tile.tile-sage {
  background: var(--ga-sage);
}

.kpi.tile.tile-forest {
  background: var(--ga-forest);
  color: var(--ga-on-dark-cream);
}

.kpi.tile.tile-alert {
  background: var(--ga-alert);
  color: var(--ga-on-dark-cream);
}

/* Подпись — 3–4 слова, над числом; всегда с первой строки плитки, справа — место под «?» и «→» */
.kpi.tile .kpi-label {
  font-weight: 600;
  color: var(--ga-ink);
  padding-right: max(0px, calc(var(--tile-badges) + 6px - var(--tile-pad-x)));
  line-height: 1.3;
}

/* Число: Montserrat 600 в одну строку; в узкой плитке мельче («12 000 000 ₽» не вылезает за край) */
.kpi.tile .value {
  font-family: var(--ga-font-display);
  font-weight: 600;
  font-size: clamp(1.125rem, 14cqi, 2rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: inherit;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

.kpi.tile .value.error {
  color: var(--ga-danger-ink);
}

.kpi.tile .value.ok {
  color: var(--ga-forest-deep);
}

.kpi.tile small.muted,
.kpi.tile .kpi-delta.muted {
  color: var(--ga-sage-ink);
}

/* На тёмных заливках текст кремовый; «хорошо/плохо» — плашкой сравнения ниже */
.kpi.tile:is(.tile-forest, .tile-alert) :is(.kpi-label, .value, small) {
  color: var(--ga-on-dark-cream);
}

.kpi.tile.tile-forest :is(small.muted, .kpi-delta.muted, .kpi-compare-gray) {
  color: var(--ga-on-forest-muted);
}

.kpi.tile.tile-alert :is(small.muted, .kpi-delta.muted) {
  color: var(--ga-on-alert-muted);
}

.kpi.tile.tile-sage :is(.kpi-label, .value, small, small.muted, .kpi-delta) {
  color: var(--ga-ink);
}

/* Сравнение со стрелкой — плашка с радиусом 3 px и заливкой, как «Следующий поток 23.11.26» на сайте:
   на беже и шалфее — белая, на forest и терракоте — кремовая. Смысл — стрелкой ▲▼ и цветом текста
   (зелёный — хорошо, терракот — плохо), без рамки. Серые подписи без стрелки — обычным текстом. */
.kpi.tile .kpi-delta {
  font-weight: 400;
  line-height: 1.35;
}

.kpi.tile .kpi-delta:is(.ok, .error) {
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  padding: 1px 7px;
  border-radius: var(--ga-radius-card);
  background: var(--ga-surface);
  font-weight: 600;
}

.kpi.tile:is(.tile-forest, .tile-alert) .kpi-delta:is(.ok, .error) {
  background: var(--ga-cream);
}

.kpi.tile:is(.tile-beige, .tile-white, .tile-sage, .tile-forest, .tile-alert) .kpi-delta.ok {
  color: var(--ga-ok-ink);
}

.kpi.tile:is(.tile-beige, .tile-white, .tile-sage, .tile-forest, .tile-alert) .kpi-delta.error {
  color: var(--ga-coral-ink);
}

/* Период сравнения («1–22 авг») не рвётся посередине */
.nowrap {
  white-space: nowrap;
}

/* Телефон: плитка — обычный блок; бейджи — в правом верхнем углу, подпись всегда с первой строки */
@media (max-width: 639.98px) {
  .kpi.tile {
    --tile-pad-y: var(--ga-space-3);
    --tile-pad-x: var(--ga-space-3);
    display: block;
  }

  .kpi.tile > :is(.kpi-label, .value, .kpi-delta, .kpi-sub, .sparkline, progress) {
    display: block;
  }

  .kpi.tile > :is(.value, .kpi-delta, .kpi-sub, .sparkline, progress) {
    margin-top: 6px;
  }

  .kpi.tile .kpi-label {
    /* слово, которое не влезает, переносится целиком, а не по буквам */
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* Узкий экран, плитки по две в ряд: подпись — ровно две строки высоты, чтобы числа в ряду стояли на одной линии */
@media (min-width: 480px) and (max-width: 639.98px) {
  .kpi-grid .kpi.tile .kpi-label {
    min-height: 2.6em;
  }
}

/* Вся плитка — ссылка: растянутая .tile-go поверх плитки, «→» в правом верхнем углу */
.tile-go {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
}

.tile-go:hover {
  color: inherit;
}

/* «→» — просто знак 16 px цветом текста плитки (контраст как у подписи: ≥ 4,5:1 на каждом тоне), без кружка */
.tile-arrow {
  position: absolute;
  top: var(--tile-badge-top, 14px);
  right: 12px;
  width: 16px;
  height: 20px;
  display: grid;
  place-items: center;
  font: 400 1rem / 1 var(--ga-font-text);
}

/* Наведение — только затемнение заливки (как карточки сайта), плитка не сдвигается */
.kpi.tile.is-link:hover {
  background: var(--ga-beige-hover);
}

.kpi.tile.is-link.tile-white:hover {
  background: var(--ga-surface-sunken);
}

.kpi.tile.is-link.tile-sage:hover {
  background: var(--ga-sage-hover);
}

.kpi.tile.is-link.tile-forest:hover {
  background: var(--ga-forest-deep);
}

.kpi.tile.is-link.tile-alert:hover {
  background: var(--ga-alert-hover);
}

.kpi.tile:has(.tile-go:focus-visible) {
  outline: 2px solid var(--ga-focus);
  outline-offset: 2px;
}

.tile-go:focus-visible {
  outline: none;
}

/* «?» — пояснение: маленький квадрат с радиусом 3 px и тонкой рамкой цветом текста (как кнопка «›» сайта);
   текст — во всплывающем окне (popover, без скриптов). В строке (заголовок панели, столбец, подпись) — на месте,
   у плитки — в правом верхнем углу над ссылкой плитки. */
button.tip-btn {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  border: 1px solid currentColor;
  border-radius: var(--ga-radius-card);
  background: transparent;
  color: inherit;
  font: 600 0.75rem / 1 var(--ga-font-text);
  letter-spacing: 0;
  cursor: pointer;
}

.kpi.tile button.tip-btn {
  position: absolute;
  top: var(--tile-badge-top, 14px);
  right: 12px;
  z-index: 2;
}

.kpi.tile.is-link button.tip-btn {
  right: 40px;
}

button.tip-btn:hover,
button.tip-btn:focus-visible {
  background: transparent;
  color: inherit;
}

.kpi.tile:is(.tile-forest, .tile-alert) .tip-btn:focus-visible {
  outline-color: var(--ga-on-dark-cream);
}

/* Палец: зона нажатия «?» — 44 px (невидимая рамка вокруг знака), промах не уводит по ссылке плитки */
@media (pointer: coarse) {
  button.tip-btn::after {
    content: "";
    position: absolute;
    inset: -12px;
  }
}

/* Текст пояснения. Без поддержки popover (старые браузеры) он просто виден внизу плитки.
   Окно не наследует оформление места, где стоит «?» (шапка таблицы — nowrap и 600, заголовок — капс). */
.tip {
  font: 400 var(--ga-text-xs) / 1.45 var(--ga-font-text);
  color: var(--ga-ink);
  white-space: normal;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
}

.tip > * {
  margin: 0;
}

.tip > * + * {
  margin-top: var(--ga-space-2);
}

.tip-title {
  font-weight: 700;
}

/* Заголовок окна «?» плитки — с заглавной, как и подпись плитки (в шаблонах подписи бывают строчные) */
.kpi .tip-title::first-letter {
  text-transform: uppercase;
}

.tip-def {
  color: var(--ga-sage-ink);
}

.tip-actions {
  display: none;
}

.tip:popover-open {
  box-sizing: border-box;
  width: min(22rem, calc(100vw - 32px));
  max-height: min(70vh, 32rem);
  overflow: auto;
  border: 0;
  border-radius: var(--ga-radius-card);
  padding: var(--ga-space-4) 18px;
  background: var(--ga-surface);
  color: var(--ga-ink);
  box-shadow: var(--ga-shadow-hairline), var(--ga-shadow-card);
  text-align: left;
}

.tip:popover-open .tip-actions {
  display: block;
  margin-top: var(--ga-space-3);
}

.tip-close {
  width: auto;
  margin: 0;
}

.tip::backdrop {
  background: rgba(44, 42, 43, 0.25);
}

/* Широкий экран: пояснение раскрывается под «?», а не по центру (CSS anchor positioning; где его нет — по центру) */
@supports (anchor-scope: all) and (position-area: bottom) {
  @media (min-width: 768px) {
    .has-tip {
      anchor-scope: --tip;
    }

    .has-tip .tip-btn {
      anchor-name: --tip;
    }

    .has-tip .tip:popover-open {
      position-anchor: --tip;
      position-area: bottom span-left;
      position-try-fallbacks: flip-block, flip-inline;
      inset: auto;
      margin: 6px 0 0;
    }

    .has-tip .tip::backdrop {
      background: transparent;
    }
  }
}

/* Чипы коротких фактов — плашки с радиусом 3 px и заливкой, как «Следующий поток 23.11.26» на сайте:
   на кремовом фоне страницы — белые, в белых панелях и карточках — бежевые. «Таблетки» с рамкой (как теги
   «Вебинары» / «Гайды» на сайте) — только у навигационных чипов-ссылок (a.chip). */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chips > li {
  margin: 0;
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border: 0;
  border-radius: var(--ga-radius-card);
  font: 500 var(--ga-text-xs) / 1.45 var(--ga-font-text);
  color: var(--ga-forest);
  background: var(--ga-surface);
  white-space: nowrap;
}

:is(.ga-panel, article, .alert) .chip {
  background: var(--ga-beige);
}

/* Длинный чип («Робот GetCourse ещё не запускался — …», «продукт: Точки контроля (Пономарев)») переносится внутри
   себя, а не распирает страницу на телефоне: в списке чипов строка сначала переносится целыми чипами (flex-wrap),
   текст внутри чипа — только если он один шире строки. Ленты (оглавление на телефоне) — не переносятся. */
.chips .chip,
.panel-title .chip,
.block-title .chip,
.chip.is-wrap {
  max-width: 100%;
  white-space: normal;
}

/* Оглавление («таблетки» в <nav>: ui.toc, «Продажи») — не переносятся: на телефоне это лента, она листается вбок */
nav .chips .chip {
  max-width: none;
  white-space: nowrap;
}

a.chip {
  padding: 2px 12px;
  border: 1px solid var(--ga-chip-line);
  border-radius: var(--ga-radius-pill);
  background: transparent;
  text-decoration: none;
  transition: border-color var(--ga-dur) var(--ga-ease);
}

/* «Таблетка»-ссылка и в белой панели или карточке — прозрачная с рамкой, как теги сайта (не беж фактов) */
:is(.ga-panel, article, .alert) a.chip {
  background: transparent;
}

a.chip:hover {
  border-color: var(--ga-forest);
  color: var(--ga-forest);
}

.chip-alert,
:is(.ga-panel, article, .alert) .chip-alert {
  background: var(--ga-alert);
  color: var(--ga-on-dark-cream);
  font-weight: 600;
}

/* Итоговое «Как считаются цифры» внизу экрана (details.method — «Продажи», «Маркетинг», карточка мероприятия):
   на экране — белая плоскость сайта (радиус 3 px, без рамки), заголовок капсом forest, как у панелей; в печати —
   как раньше (рамка; правила печати — screens/report.css) */
details.method {
  margin: var(--ga-space-5) 0 var(--ga-space-4);
  padding: var(--ga-space-4) var(--ga-space-5);
  border: 1px solid var(--ga-line);
  border-radius: var(--ga-radius-lg);
  background: var(--ga-surface);
}

details.method > summary {
  font-family: var(--ga-font-display);
  font-weight: 600;
}

@media screen {
  details.method {
    border-color: transparent;
    border-radius: var(--ga-radius-card);
  }

  details.method > summary {
    font: 600 1.125rem / 1.2 var(--ga-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ga-forest);
  }
}

/* Свёрнутое «Как считается» внизу блока */
details.how {
  margin: var(--ga-space-3) 0 0;
  border: 0;
  padding: 0;
}

details.how > summary {
  display: inline-block;
  font-size: var(--ga-text-xs);
  font-weight: 600;
  color: var(--ga-sage-ink);
  cursor: pointer;
  list-style: none;
}

details.how > summary::-webkit-details-marker {
  display: none;
}

details.how > summary::after {
  content: " ›";
  float: none;
  display: inline;
  background: none;
  width: auto;
  height: auto;
  margin: 0;
}

details.how[open] > summary::after {
  content: " ‹";
}

details.how > :not(summary) {
  margin: var(--ga-space-2) 0 0;
  font-size: var(--ga-text-xs);
  color: var(--ga-sage-ink);
  max-width: 60rem;
}

/* Раскрывашка строкой внутри блока («Показать все каналы ›», «Изменить ›» у заметок, «Показать таблицу стадий ›»):
   стрелка в тексте, без шеврона Pico у правого края; содержимое — обычным текстом (в отличие от «Как считается»).
   .is-head — строка-подзаголовок блока («Платежи месяца (273) ›»). Печать — как раньше (правила только для экрана). */
details.fold {
  margin: var(--ga-space-3) 0 0;
  border: 0;
  padding: 0;
}

@media screen {
  details.fold > summary {
    display: inline-block;
    font: 600 var(--ga-text-sm) / 1.3 var(--ga-font-text);
    color: var(--ga-forest);
    cursor: pointer;
    list-style: none;
  }

  details.fold > summary::-webkit-details-marker {
    display: none;
  }

  details.fold > summary::after {
    content: " ›";
    float: none;
    display: inline;
    background: none;
    width: auto;
    height: auto;
    margin: 0;
  }

  details.fold[open] > summary::after {
    content: " ‹";
  }

  /* Pico красит раскрытый summary приглушённым и отодвигает содержимое — здесь свои цвет и отступ */
  details.fold[open] > summary:not([role]):not(:focus) {
    color: var(--ga-forest);
  }

  details.fold[open] > summary {
    margin-bottom: var(--ga-space-3);
  }

  details.fold > summary:hover {
    text-decoration: underline;
    text-decoration-color: var(--ga-sage);
    text-underline-offset: 3px;
  }

  details.fold.is-head > summary,
  details.fold.is-head[open] > summary:not([role]):not(:focus) {
    font: 600 var(--ga-text-md) / 1.3 var(--ga-font-heading);
    color: var(--ga-ink);
  }

  details.fold.is-head > summary::after {
    color: var(--ga-sage-ink);
  }
}

/* Плоская полоса «факт / план» цветом продукта (линейки) */
/* Сетка общая на весь список (subgrid): колонка цифр одной ширины у всех строк — дорожки одной длины */
.lineplan {
  display: grid;
  grid-template-columns: minmax(8rem, 15rem) minmax(0, 1fr) auto;
  gap: var(--ga-space-3) var(--ga-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lineplan > li {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  row-gap: var(--ga-space-1);
  margin: 0;
  list-style: none;
}

.lineplan-name {
  font-weight: 600;
  line-height: 1.3;
  color: var(--ga-ink);
  text-decoration: none;
}

a.lineplan-name:hover {
  color: var(--ga-forest);
  text-decoration: underline;
  text-decoration-color: var(--ga-sage);
}

.lineplan-block {
  margin-top: var(--ga-space-5);
}

.lineplan-note {
  margin: var(--ga-space-2) 0 0;
}

/* Полоса — SVG 0…100 % плана (ширина прямоугольника — атрибут, без инлайн-стилей); риска — темп месяца */
svg.lineplan-bar {
  display: block;
  width: 100%;
  height: 10px;
  overflow: visible;
}

.lineplan-track {
  fill: var(--ga-beige);
}

.lineplan-fill {
  fill: var(--product, var(--ga-product-1));
}

.lineplan-pace {
  stroke: var(--ga-ink);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.lineplan-nums {
  font-size: var(--ga-text-xs);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.lineplan-nums strong {
  font-family: var(--ga-font-display);
  font-weight: 600;
  font-size: var(--ga-text-md);
}

.product-1 { --product: var(--ga-product-1); }
.product-2 { --product: var(--ga-product-2); }
.product-3 { --product: var(--ga-product-3); }
.product-4 { --product: var(--ga-product-4); }
.product-5 { --product: var(--ga-product-5); }
.product-6 { --product: var(--ga-product-6); }

.planbar-fill.product {
  fill: var(--product, var(--ga-product-1));
}

@media (max-width: 639.98px) {
  .lineplan {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .lineplan-bar {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* Печать строгая ч/б, как раньше: заливки плиток снимаются, пояснения «?» печатаются текстом в плитке */
@media print {
  .kpi.tile,
  .kpi.tile:is(.tile-forest, .tile-alert, .tile-sage, .tile-white, .tile-beige) {
    background: var(--ga-surface) !important;
    color: var(--ga-ink) !important;
    border: 1px solid var(--ga-line) !important;
    transform: none !important;
  }

  .kpi.tile .kpi-label {
    padding-right: 0 !important;
  }

  /* цвета текста — как у светлой плитки до смены дизайна: число чёрное (плохое — красным), сравнение — зелёным /
     коралловым, подписи — шалфеем */
  .kpi.tile :is(.kpi-label, .value) {
    color: var(--ga-ink) !important;
  }

  .kpi.tile .value.error {
    color: var(--ga-danger-ink) !important;
  }

  .kpi.tile .kpi-delta.ok {
    color: var(--ga-ok-ink) !important;
  }

  .kpi.tile .kpi-delta.error {
    color: var(--ga-coral-ink) !important;
  }

  .kpi.tile :is(small.muted, .kpi-delta.muted, small:not(.kpi-label, .kpi-delta)) {
    color: var(--ga-sage-ink) !important;
  }

  .kpi.tile .sparkline-cur {
    stroke: var(--ga-series-1) !important;
  }

  .kpi.tile .sparkline-prev {
    stroke: var(--ga-series-2) !important;
  }

  .kpi.tile .sparkline-dot {
    fill: var(--ga-series-1) !important;
  }

  .kpi.tile progress {
    --pico-progress-background-color: var(--ga-stone);
    --pico-progress-color: var(--ga-green);
  }

  .ga-panel {
    padding: 0;
    background: transparent;
  }

  .tip-btn,
  .tile-arrow,
  .tip-title,
  .tip-def,
  .tip-admin,
  .tip-actions {
    display: none !important;
  }

  .tip[popover] {
    display: block !important;
    position: static !important;
    inset: auto !important;
    width: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: visible !important;
  }

  .kpi.tile .kpi-delta:is(.ok, .error) {
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  /* строка из «?» — над спарклайном, как до смены дизайна */
  .kpi.tile > .sparkline {
    order: 1;
  }

  .kpi.tile .kpi-label {
    min-height: 0 !important;
  }

  /* причина пустой группы печатается в каждой плитке (как раньше), чип в заголовке не нужен */
  .panel-title .chip {
    display: none;
  }
}

/* ============================================================
   6б. Общие компоненты шага B (brand.md §6.16, макросы — templates/_ui.html)
   Заголовок страницы с «?» и чипами, шапка панели (заголовок капсом, чип, «?», действия справа), подзаголовок
   блока, «?» в строке, «Как считается», сетки плиток и панелей, полоса к плану в плитке, панель инструментов,
   вкладки, переключатель, оглавление. Всё — плоское, радиус 3 px, без теней и градиентов.
   ============================================================ */

/* Заголовок страницы: h2 и «?» в одну строку, чипы периода и данных — под ним */
.page-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ga-space-2) var(--ga-space-3);
}

.page-title-row > h2 {
  margin: 0;
}

.page-title-row > .tip-btn {
  color: var(--ga-forest);
}

.page-head > .chips {
  margin-top: var(--ga-space-3);
}

/* Шапка панели: заголовок капсом, «?» рядом, действия (CSV, печать, переключатель) — справа */
.panel-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ga-space-2) var(--ga-space-3);
  margin: 0 0 var(--ga-space-4);
}

.panel-head > .panel-title {
  margin: 0;
}

.panel-head > .tip-btn {
  color: var(--ga-forest);
}

.panel-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ga-space-2);
  margin-left: auto;
}

.panel-actions > * {
  margin: 0;
}

/* Телефон: длинный заголовок страницы или панели с чипом («Продажи — сентябрь 2026», «ВОРОНКИ БИТРИКС24 · только
   чтение») переносится внутри себя, а «?» остаётся справа от первой строки, не уходит отдельной строкой ниже */
@media (max-width: 575.98px) {
  .page-title-row,
  .panel-head:not(:has(> .panel-actions)) {
    flex-wrap: nowrap;
    align-items: flex-start;
  }

  :is(.page-title-row, .panel-head) > .tip-btn {
    flex: none;
    margin-top: 1px;
  }

  .page-title-row > h2 {
    min-width: 0;
  }

  /* у заголовка страницы строка выше, чем у панели: «?» — по центру первой строки */
  .page-title-row > .tip-btn {
    margin-top: 0.3em;
  }

  /* Шапка панели с действиями («Пересчитать», CSV): заголовок и «?» — одной строкой, действия — строкой ниже */
  .panel-head:has(> .panel-actions) {
    align-items: flex-start;
  }

  .panel-head:has(> .panel-actions) > .panel-title {
    flex: 1 1 0;
    min-width: 0;
  }

  .panel-head:has(> .panel-actions) > .panel-actions {
    flex-basis: 100%;
    margin-left: 0;
  }
}

/* Строка фактов над содержимым фрагмента (ui.bar): чипы периода и фильтров и «?» — слева, кнопки (CSV) — справа.
   Фрагмент перечитывается при смене фильтров, поэтому эти чипы — здесь, а не в статичной шапке панели.
   Чипы переносятся (длинный фильтр не распирает телефон); в печати кнопки скрыты, чипы — строкой текста. */
.panel-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ga-space-2) var(--ga-space-3);
  margin: 0 0 var(--ga-space-4);
}

.panel-bar > .chips {
  min-width: 0;
  max-width: 100%;
}

.panel-bar > .tip-inline {
  margin-left: 0;
}

.panel-bar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ga-space-2);
  margin-left: auto;
}

.panel-bar-actions > * {
  margin: 0;
}

.block-head + .panel-bar {
  margin-top: calc(-1 * var(--ga-space-1));
}

/* Колонки внутри панели (сегменты | новые и старые, страны | города, «Эфир» | «Запись»): .grid.report-columns >
   div.report-column — не section (панель сама section; тесты режут блок по первому </section>). Таблица шире колонки
   прокручивается внутри колонки; подзаголовки колонок начинаются ровно. */
.report-columns {
  align-items: start;
}

.report-columns > :is(section, .report-column) {
  min-width: 0;
  margin-bottom: 0;
  overflow-x: auto;
}

.report-columns > .report-column > .block-head:first-child {
  margin-top: 0;
}

/* Карточка внутри белой панели — кремовая плоскость (радиус 3 px, без рамки); в печати — волосяная рамка */
.panel-card {
  min-width: 0;
  padding: var(--ga-space-4) 18px;
  border: 1px solid var(--ga-line);
  border-radius: var(--ga-radius-lg);
}

@media screen {
  .panel-card {
    border: 0;
    border-radius: var(--ga-radius-card);
    background: var(--ga-bg);
  }

  /* чип на кремовой карточке — белый, как на кремовом фоне страницы */
  .panel-card .chip:not(a) {
    background: var(--ga-surface);
  }
}

/* Панель внутри панели (уровень 4) — без своей заливки и отступов, заголовок мельче */
.ga-panel .ga-panel {
  padding: 0;
  margin-top: var(--ga-space-5);
  background: transparent;
}

.ga-panel .ga-panel .panel-title {
  font-size: var(--ga-text-md);
}

/* Две-три панели в ряд (как «Карта сроков» и «Масштаб задач»); на узком экране — друг под другом */
.panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: var(--ga-space-4);
  margin: 0 0 var(--ga-space-5);
}

.panel-grid > .ga-panel {
  margin: 0;
  min-width: 0;
}

/* Подзаголовок блока внутри панели («План по линейкам», «По заказам за месяц») */
.block-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ga-space-2);
  margin: var(--ga-space-5) 0 var(--ga-space-3);
}

.block-head:first-child {
  margin-top: 0;
}

.block-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--ga-space-2);
  margin: 0;
  font: 600 var(--ga-text-md) / 1.3 var(--ga-font-heading);
  color: var(--ga-ink);
}

.block-title .chip {
  font-weight: 500;
}

/* Телефон: длинный подзаголовок блока (ui.subhead, «Типовые пути: что было за 90 дней до покупки») переносится внутри
   себя, «?» остаётся справа от первой строки (как у заголовка страницы и панели выше); у «?»-обёртки .tip-inline в
   шапке панели — так же. Стоит после базового .block-head, иначе его flex-wrap: wrap перебивает. */
@media (max-width: 575.98px) {
  .block-head {
    flex-wrap: nowrap;
    align-items: flex-start;
  }

  .block-head > .block-title {
    min-width: 0;
  }

  :is(.block-head, .panel-head) > :is(.tip-btn, .tip-inline) {
    flex: none;
    margin-top: 2px;
  }
}

/* «?» в строке: рядом с числом, подписью, заголовком столбца */
.tip-inline {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: var(--ga-space-1);
  line-height: 1;
}

.tip-inline .tip:not(:popover-open) {
  display: none;
}

/* Строчный вариант (ui.tip(..., inline=true)) — всё на span: строки окна — блоками */
span.tip > span:not(.tip-actions) {
  display: block;
}

span.tip > span + span {
  margin-top: var(--ga-space-2);
}

th .tip-inline {
  margin-left: 6px;
}

/* Окно «?» у заголовков и строк раскрывается вправо от кнопки (у плиток — влево от угла) */
@supports (anchor-scope: all) and (position-area: bottom) {
  @media (min-width: 768px) {
    :is(.tip-inline, .panel-head, .page-head, .block-head) .tip:popover-open {
      position-area: bottom span-right;
    }
  }
}

/* «Как считается»: тело — абзацы и списки 14 px, тихим шалфейным текстом */
.how-body > :first-child {
  margin-top: 0;
}

.how-body > :last-child {
  margin-bottom: 0;
}

.how-body :is(p, ul, ol, dl) {
  margin: 0 0 var(--ga-space-2);
  font-size: var(--ga-text-xs);
}

.how-body dt {
  font-weight: 600;
  color: var(--ga-ink);
}

.how-body dd {
  margin: 0 0 var(--ga-space-2);
}

/* Сетки плиток: tiles-3 / tiles-4 / tiles-5 — столько в ряд на широком экране, по 2 на планшете, 1 на телефоне */
.kpi-grid:is(.tiles-3, .tiles-4, .tiles-5, .tiles-6) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 900px) {
  .kpi-grid.tiles-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .kpi-grid.tiles-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .kpi-grid.tiles-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .kpi-grid.tiles-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1300px) {
  .kpi-grid.tiles-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* 2–4 плитки внутри блока с длинными подписями («Заказов лид-магнитов», «Из них — не Россия»): от 16rem шириной */
.kpi-grid.tiles-wide {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}

@media (max-width: 479.98px) {
  .kpi-grid:is(.tiles-3, .tiles-4, .tiles-5, .tiles-6, .tiles-wide) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Плитки с подписью в две строки (списки для действий, полнота данных): числа ряда — на одной линии */
@media (min-width: 640px) {
  .kpi-grid.tiles-even .kpi.tile .kpi-label {
    min-height: 2.6em;
  }
}

/* Единица рядом с числом плитки («1,0 дн.», «23 дн.») — мельче числа */
.tile-unit {
  font-size: 0.55em;
  font-weight: 600;
  letter-spacing: 0;
}

/* Полоса к плану в плитке — плоская: дорожка светлее плитки, заливка forest (на forest — кремовая) */
.kpi.tile progress {
  display: block;
  width: 100%;
  height: 0.5rem;
  margin: var(--ga-space-1) 0 0;
  border-radius: var(--ga-radius-xs);
  --pico-progress-background-color: rgba(255, 255, 255, 0.6);
  --pico-progress-color: var(--ga-forest);
}

.kpi.tile.tile-forest progress {
  --pico-progress-background-color: rgba(255, 255, 255, 0.25);
  --pico-progress-color: var(--ga-on-dark-cream);
}

/* Панель инструментов над блоком или страницей: месяц, «Показать», CSV, печать — в одну строку с переносом;
   вторая группа (.toolbar-group) — справа */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ga-space-2) var(--ga-space-4);
  margin: 0 0 var(--ga-space-4);
}

.toolbar > .toolbar-group:last-child:not(:first-child) {
  margin-left: auto;
}

.toolbar-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ga-space-2);
  margin: 0;
}

.toolbar :is(form, label, select, input, button, [role="button"], details) {
  margin: 0;
}

.toolbar select,
.toolbar input:not([type="checkbox"], [type="radio"]) {
  width: auto;
  min-width: 10rem;
  height: 32px;
  padding-block: 0;
  font-size: var(--ga-text-xs);
}

/* Вкладки-ссылки: как пункты меню шапки — текущая с чертой (forest на белом), наведение — шалфейная черта */
.tabs {
  display: block;
  margin: 0 0 var(--ga-space-4);
  border-bottom: 1px solid var(--ga-line);
}

.tabs > ul {
  display: flex;
  gap: var(--ga-space-1);
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
  list-style: none;
}

.tabs > ul::-webkit-scrollbar {
  display: none;
}

.tabs li {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tabs :is(a, button) {
  display: block;
  margin: 0 0 -1px;
  min-height: 0;
  padding: 10px 12px 8px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--ga-ink);
  font: 400 var(--ga-text-sm) / 1.2 var(--ga-font-text);
  white-space: nowrap;
  text-decoration: none;
  transition: border-color var(--ga-dur) var(--ga-ease);
}

.tabs :is(a, button):hover {
  color: var(--ga-ink);
  border-bottom-color: var(--ga-sage);
  background: transparent;
}

.tabs :is(a[aria-current]:not([aria-current="false"]), button[aria-selected="true"], .is-active) {
  font-weight: 600;
  color: var(--ga-forest);
  border-bottom-color: var(--ga-forest);
}

.tabs :is(a, button):focus-visible {
  outline-offset: -3px;
}

/* Переключатель 2–5 вариантов: бежевые плашки, выбранная — forest с кремовым текстом */
.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
}

.segmented > label {
  position: relative;
  display: inline-flex;
  margin: 0;
  font: inherit;
  color: inherit;
}

.segmented input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.segmented > label > span,
.segmented > a,
.segmented > button {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: var(--ga-radius-card);
  background: var(--ga-beige);
  color: var(--ga-ink);
  font: 600 var(--ga-text-xs) / 1.2 var(--ga-font-text);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ga-dur) var(--ga-ease);
}

.segmented > label > span:hover,
.segmented > a:hover,
.segmented > button:hover {
  background: var(--ga-beige-hover);
  color: var(--ga-ink);
}

.segmented input:checked + span,
.segmented > a[aria-current]:not([aria-current="false"]),
.segmented > button[aria-pressed="true"],
.segmented > .is-active {
  background: var(--ga-forest);
  color: var(--ga-on-dark-cream);
}

.segmented input:focus-visible + span {
  outline: 2px solid var(--ga-focus);
  outline-offset: 2px;
}

/* Оглавление длинной страницы — «таблетки»-ссылки (как на «Продажах»); на телефоне листается в строку */
.toc {
  margin: 0 0 var(--ga-space-4);
}

/* Pico даёт ссылкам в <nav> отрицательные поля — у «таблеток» оглавления их нет */
.toc .chip {
  margin: 0;
}

@media (max-width: 639.98px) {
  .toc > .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: var(--ga-space-2);
    scrollbar-width: thin;
  }

}

@media print {
  .tip-inline .tip-btn,
  .panel-head > .tip-btn,
  .page-title-row > .tip-btn,
  .block-head > .tip-btn,
  .panel-actions,
  .toolbar,
  .toc,
  .tabs {
    display: none !important;
  }

  .tip-inline {
    display: block;
    margin: 0;
  }

  .ga-panel .panel-head {
    margin-bottom: 2mm;
  }

  /* Шапки панелей и подзаголовков — как прежние article > header: заголовок, под ним текст «?» (прежний абзац)
     мелким шалфеем, а не в строку справа от заголовка; «Как считается» — мелким, как прежние подписи */
  .ga-panel > .panel-head,
  .block-head {
    display: block;
  }

  .block-head {
    margin: 3mm 0 1mm;
  }

  :is(.panel-head, .block-head) .tip,
  :is(.panel-head, .block-head) .tip > * {
    font-size: 8pt;
    color: var(--ga-sage-ink);
  }

  details.how .how-body :is(p, ul, li) {
    font-size: 7.5pt;
    line-height: 1.35;
  }

  .panel-bar-actions,
  .no-print {
    display: none !important;
  }

  .report-columns > :is(section, .report-column) {
    overflow: visible;
  }

  details[data-print-open]::details-content {
    content-visibility: visible;
    display: block;
  }
}

/* ============================================================
   7. Таблицы — единый стиль шага B (brand.md §6.16): шапка — беж, Mulish 600 обычным регистром; строки —
   волосяные линии и «зебра» кремовым (однотипные белые строки тяжело вести глазом — замечание Ивана); наведение —
   беж, как затемнение плитки; числа — справа, tabular-nums; «Итого» (tfoot или tr.row-total) — беж, 700, черта
   forest сверху. Сортировка и раскрытие этапа 9 — interactive.css (значки ▲▼ и черта forest у заголовка).
   Фоны строк — через :where() (нулевая специфичность): классы экранов (.row-current, тепловые ячейки) их перебивают.
   ============================================================ */
figure,
.overflow-auto,
.table-wrap {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--ga-sage) transparent;
  /* скрытые подписи (.visually-hidden, position: absolute) в широкой таблице не должны растягивать страницу:
     их блок-контейнер — сама прокручиваемая обёртка */
  position: relative;
}

figure {
  margin: 0 0 var(--ga-space-4);
}

.table-wrap {
  margin: 0 0 var(--ga-space-4);
  border-radius: var(--ga-radius-card);
}

.table-wrap > table {
  margin-bottom: 0;
}

.table-wrap:focus-visible {
  outline: 2px solid var(--ga-focus);
  outline-offset: 2px;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--ga-text-xs);
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  background: var(--ga-surface);
  margin-bottom: var(--ga-space-4);
}

th,
td {
  background-color: transparent;
  color: var(--ga-ink);
  border-bottom: 1px solid var(--ga-line);
  vertical-align: top;
  padding: 10px 14px;
  text-align: left;
}

thead th,
thead td {
  background: var(--ga-beige);
  font-weight: 600;
  white-space: nowrap;
  vertical-align: bottom;
  border-bottom: 1px solid var(--ga-line);
}

thead tr:first-child th:first-child {
  border-top-left-radius: var(--ga-radius-card);
}

thead tr:first-child th:last-child {
  border-top-right-radius: var(--ga-radius-card);
}

tbody tr:last-child > * {
  border-bottom: 0;
}

/* «Итого»: tfoot или строка tr.row-total в tbody */
tfoot td,
tfoot th,
tr.row-total > td,
tr.row-total > th {
  font-weight: 700;
  color: var(--ga-ink);
  border-top: 1px solid var(--ga-forest);
  border-bottom: 0;
}

/* Строка-подзаголовок группы внутри таблицы */
tr.row-group > th,
tr.row-group > td {
  background: var(--ga-surface);
  color: var(--ga-forest);
  font-weight: 600;
  border-bottom: 1px solid var(--ga-line-strong);
}

@media screen {
  :where(tbody tr:nth-child(even of :not(.expand-row, .row-group, .group-row, .section-row, .row-total, [hidden]))) > :is(td, th) {
    background-color: var(--ga-row-zebra);
  }

  :where(tbody tr:not(.expand-row, .row-group, .group-row, .section-row):hover) > :is(td, th) {
    background-color: var(--ga-row-hover);
  }

  :where(tfoot tr, tr.row-total) > :is(td, th) {
    background-color: var(--ga-row-total);
  }
}

/* Заголовок строки (th в tbody): тёмный, 600 — имя строки читается как имя */
tbody th {
  color: var(--ga-ink);
  font-weight: 600;
}

/* Вертикальная таблица реквизитов (карточка задачи, профиль): подписи — шалфеем, колонка 40 % */
table.kv tbody th {
  color: var(--ga-sage-ink);
  width: 40%;
}

@media screen {
  :where(table.kv) tbody tr > :is(td, th) {
    background-color: transparent;
  }
}

/* Реквизиты только для чтения списком (dl.kv — «Робот GetCourse», «Метрика», «Утренняя сводка»): подпись шалфеем
   слева (с «?»), значение справа, волосяная линия через обе колонки, как у table.kv; на телефоне — в одну колонку */
dl.kv {
  display: grid;
  grid-template-columns: minmax(12rem, 20rem) minmax(0, 1fr);
  gap: var(--ga-space-3) 0;
  margin: 0;
}

dl.kv > dt {
  font-weight: 600;
  color: var(--ga-sage-ink);
}

dl.kv > dd {
  margin: 0;
  padding-left: var(--ga-space-5);
  overflow-wrap: anywhere;
}

dl.kv > :is(dt, dd) {
  padding-top: var(--ga-space-3);
  border-top: 1px solid var(--ga-line);
}

dl.kv > :is(dt, dd):nth-child(-n + 2) {
  padding-top: 0;
  border-top: 0;
}

/* «?» у подписи — в строку с подписью */
dl.kv :is(dt, dd) > .tip-inline {
  margin-left: 6px;
}

@media (max-width: 639.98px) {
  dl.kv {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ga-space-1);
  }

  dl.kv > dd {
    margin-bottom: var(--ga-space-3);
    padding-top: 0;
    padding-left: 0;
    border-top: 0;
  }
}

table.compact td,
table.compact th {
  padding: 8px 12px;
}

/* Широкая таблица (каналы/кампании, 14 колонок): шапка переносится,
   первая колонка закреплена при горизонтальной прокрутке */
table.table-wide thead th {
  white-space: normal;
  vertical-align: bottom;
}

table.table-wide td,
table.table-wide th {
  padding-inline: 10px;
}

table.table-wide :is(td, th):first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 12rem;
  background: var(--ga-surface);
  box-shadow: inset -1px 0 0 var(--ga-line);
}

table.table-wide thead th:first-child {
  background: var(--ga-beige);
}

@media screen {
  /* закреплённая первая колонка — того же цвета, что строка */
  table.table-wide tbody tr:nth-child(even of :not(.expand-row, .row-group, .group-row, .section-row, .row-total, [hidden])) > :first-child {
    background: var(--ga-row-zebra);
  }

  table.table-wide tbody tr:not(.expand-row, .row-group, .group-row, .section-row):hover > :first-child {
    background: var(--ga-row-hover);
  }

  /* «Итого» широкой таблицы: закреплённая первая ячейка — тоже беж, как вся строка */
  table.table-wide :is(tfoot tr, tr.row-total) > :first-child {
    background: var(--ga-row-total);
  }

  /* Текущая строка или столбец (текущая неделя, месяц отчёта, только что добавленный источник) — беж:
     прежний светлый фон на кремовой «зебре» не виден */
  tr.row-current > :is(td, th),
  :is(td, th).col-current {
    background-color: var(--ga-beige);
  }

  tr.row-current > :first-child {
    font-weight: 600;
  }
}

/* Телефон: закреплённая первая колонка широкой таблицы уже (12rem съедали две трети экрана) — рядом видны числа;
   название переносится */
@media (max-width: 575.98px) {
  table.table-wide :is(td, th):first-child {
    min-width: 8.5rem;
    max-width: 11rem;
    white-space: normal;
  }
}

/* Телефон: таблица с 5+ столбцами (table-scroll) не сжимается в столбик по 6–8 строк в ячейке — листается внутри
   своей обёртки (ui.table_wrap / .overflow-auto) */
@media (max-width: 639.98px) {
  table.table-scroll {
    min-width: 40rem;
  }
}

/* Длинный справочник (сотни кампаний, словарь каналов, журнал ошибок) — ui.table_wrap(tall=true): на экране окно до
   70 % высоты с прокруткой внутри и закреплённой шапкой; в печати — таблица целиком */
@media screen {
  .table-wrap.table-tall {
    max-height: min(70vh, 44rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .table-wrap.table-tall > table > thead th {
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .table-wrap.table-tall > table.table-wide > thead th:first-child {
    z-index: 3;
  }
}

/* Подпись под таблицей одной строкой («Строк: 23.», «Показаны первые 20 строк из 83.») */
.table-foot {
  margin: calc(-1 * var(--ga-space-2)) 0 var(--ga-space-2);
}

/* Ссылки в таблицах — тёмные, без коралла */
td a:not([role="button"]) {
  color: var(--ga-ink);
  text-decoration-color: var(--ga-sage);
}

td a:not([role="button"]):hover {
  text-decoration-color: var(--ga-green);
}

/* Числа: вправо, без переноса */
.num,
td.num,
th.num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Подпись мелким под числом или названием в ячейке */
td .cell-sub,
th .cell-sub {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  color: var(--ga-sage-ink);
}

/* Строка «требует внимания» (этап 20: «Не сопоставлено» в «Рекламе по продуктам» и в «Настройках») — тёплый фон */
tr.row-warn > td,
tr.row-warn > th {
  background: var(--ga-warn-soft);
}

/* ============================================================
   8. Формы и фильтры (шаг B): подпись над полем — Mulish 600 14 px; поле — белое, высота 40 px, радиус 3 px,
   рамка 3,2:1 к белому (видна граница поля); фокус — рамка forest и мягкое кольцо. Панель фильтров — белая
   плоскость без рамки (как панели), подсказка под полями — одной строкой или в «?».
   ============================================================ */
label {
  font-size: var(--ga-text-xs);
  font-weight: 600;
  color: var(--ga-sage-ink);
}

label > :is(input, select, textarea) {
  margin-top: var(--ga-space-1);
}

input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="submit"], [type="button"], [type="reset"]),
select {
  height: var(--ga-control-h);
  font-size: var(--ga-text-sm);
  font-weight: 400;
  color: var(--ga-ink);
  background-color: var(--ga-surface);
  border: 1px solid var(--ga-field-line);
  border-radius: var(--ga-radius-card);
}

textarea {
  font-size: var(--ga-text-sm);
  color: var(--ga-ink);
  border: 1px solid var(--ga-field-line);
  border-radius: var(--ga-radius-card);
}

input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):hover,
select:hover,
textarea:hover {
  border-color: var(--ga-ink);
}

input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):focus,
select:focus,
textarea:focus {
  border-color: var(--ga-forest-deep);
  box-shadow: 0 0 0 3px rgba(60, 81, 66, 0.2);
  outline: none;
}

/* Галочки и радиокнопки — forest */
input:is([type="checkbox"], [type="radio"]) {
  accent-color: var(--ga-forest);
}

/* Панель фильтров: белая плоскость, радиус 3 px, без рамки (как панели .ga-panel) */
.filters {
  background: var(--ga-surface);
  border: 0;
  border-radius: var(--ga-radius-card);
  padding: var(--ga-space-4) 20px;
  margin-bottom: var(--ga-space-5);
}

.filters .grid,
article > header form .grid {
  /* 12rem: «последнее касание» и «все цели (агрегат)» помещаются без обрезки */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--ga-space-3) var(--ga-space-4);
}

.filters label,
article > header form label {
  margin-bottom: 0;
}

.filters :is(input, select, textarea),
article > header form :is(input, select, textarea) {
  margin-bottom: 0;
}

.filters > small,
article > header form > small {
  display: block;
  margin-top: var(--ga-space-2);
  margin-bottom: 0;
}

/* Невидимая первая кнопка формы (этап 36, «Детально за период» на «Продажах»): Enter в поле отправляет форму ею, а не
   кнопкой PDF ниже. 1 px и вне потока — Pico растягивает кнопки формы на всю ширину, без !important она расширила бы
   страницу */
.form-default-submit {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0 !important;
}

/* Низ панели фильтров: подсказка одной строкой, «?» с правилами фильтров, «Сбросить» — справа */
.filters-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ga-space-2) var(--ga-space-3);
  margin-top: var(--ga-space-3);
}

.filters-foot > :last-child:not(:first-child) {
  margin-left: auto;
}

/* Pico растягивает <small> после поля/fieldset на всю ширину (подсказка под полем) — здесь она в строке */
.filters-foot small {
  width: auto;
  margin: 0;
}

/* Поле-переключатель (ui.segmented) с видимой подписью над ним — как у <label> формы: .field > .field-label +
   переключатель (и «?» рядом — .field-row). В панели фильтров переключатель той же высоты, что поля (40 px). */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--ga-space-1);
  min-width: 0;
}

.field-label {
  font-size: var(--ga-text-xs);
  font-weight: 600;
  line-height: var(--ga-leading);
  color: var(--ga-sage-ink);
}

.field-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ga-space-2);
}

.field-row > .tip-inline {
  margin-left: 0;
}

.filters .segmented > label > span {
  min-height: var(--ga-control-h);
  padding: 0 14px;
  font-size: var(--ga-text-sm);
}

/* Поиск (form role=search): Pico делает поле и кнопку «таблеткой» (радиус 5rem, склейка краёв) — здесь поле и кнопка
   по отдельности, радиус 3 px, как все формы шага B */
form[role="search"] {
  --pico-border-radius: var(--ga-radius-card);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ga-space-2);
  align-items: center;
  width: auto;
  border-radius: 0;
  box-shadow: none;
}

form[role="search"] > :is(input, select, button, [role="button"]) {
  margin: 0 !important;
  border-radius: var(--ga-radius-card) !important;
}

form[role="search"] > input:is([type="search"], [type="text"]) {
  flex: 1 1 16rem;
  min-width: 0;
}

form[role="search"] > :is(button, [role="button"]) {
  flex: none;
  width: auto;
}

/* Фильтры внутри шапки карточки или панели — без своей подложки */
article > header .filters,
article > header form,
.ga-panel .filters {
  border: 0;
  padding: 0;
  margin: var(--ga-space-3) 0 0;
  background: transparent;
}

.ga-panel .filters {
  margin: 0 0 var(--ga-space-4);
}

article > header > form:first-child,
article > header > .filters:first-child {
  margin-top: 0;
}

@media (max-width: 575.98px) {
  .filters {
    padding: var(--ga-space-3);
  }

  /* Группа «дата + дата + кнопка» (Pico fieldset[role=group], «Настройки») на телефоне переносится,
     а не распирает страницу вбок */
  fieldset[role="group"] {
    flex-wrap: wrap;
    gap: var(--ga-space-2);
    box-shadow: none;
  }

  fieldset[role="group"] > * {
    flex: 1 1 9rem;
    min-width: 0;
    margin: 0 !important;
    border-radius: var(--ga-radius-card) !important;
  }
}

/* ============================================================
   9. Кнопки
   ============================================================ */
button,
[role="button"],
[type="submit"],
[type="button"],
[type="reset"] {
  font-family: var(--ga-font-text);
  font-size: var(--ga-text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  min-height: var(--ga-control-h);
  padding: 0.5rem 20px;
  border-radius: var(--ga-radius-card);
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
}

button:active:not(:disabled),
[role="button"]:active {
  transform: translateY(1px);
}

/* Контурная второстепенная */
:is(button, [role="button"], [type="submit"], [type="button"]).outline.secondary,
:is(button, [role="button"], [type="submit"], [type="button"]).outline {
  background-color: transparent;
  border: 1px solid var(--ga-graphite);
  color: var(--ga-graphite);
}

:is(button, [role="button"], [type="submit"], [type="button"]).outline:is(:hover, :active, :focus-visible) {
  background-color: var(--ga-stone);
  border-color: var(--ga-graphite-hover);
  color: var(--ga-graphite-hover);
}

/* Опасное действие: всегда с hx-confirm */
:is(button, [role="button"], [type="submit"]).danger {
  background-color: var(--ga-surface);
  border: 1px solid var(--ga-danger-ink);
  color: var(--ga-danger-ink);
}

:is(button, [role="button"], [type="submit"]).danger:is(:hover, :active) {
  background-color: var(--ga-danger-soft);
  border-color: var(--ga-danger-ink);
  color: var(--ga-danger-ink);
}

/* Маленькая кнопка в таблицах и карточках */
.tiny,
button.tiny,
[role="button"].tiny {
  font-size: var(--ga-text-xs);
  min-height: 32px;
  padding: 0.25rem 10px;
  width: auto;
  margin: 0;
  white-space: nowrap;
}

button:disabled,
[role="button"][aria-disabled="true"],
[type="submit"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Ряд кнопок / форм с переносом */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ga-space-2) var(--ga-space-3);
  align-items: flex-end;
}

.actions form {
  margin: 0;
}

/* ============================================================
   10. Бейджи статусов (шаг B): плоские плашки с радиусом 3 px, палитра сайта — без пастели и «таблеток».
   Смысл — текстом бейджа; цвет подкрепляет: беж — нейтрально/идёт, шалфей — хорошо, forest — сделано,
   терракот — ошибка/просрочка, беж с рамкой tan — внимание, контур — пропущено/нет.
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 8px;
  border-radius: var(--ga-radius-card);
  font: 600 var(--ga-text-xs) / 1.35 var(--ga-font-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid transparent;
  background: var(--ga-beige);
  color: var(--ga-ink);
}

/* Длинный бейдж вне таблицы («не совпадает с планом ОП (…)») переносится, а не распирает страницу на телефоне;
   в ячейке таблицы — в одну строку (столбец шире, строка ровнее) */
:where(:not(td, th)) > .badge {
  max-width: 100%;
  white-space: normal;
}

/* …и в подписи внутри ячейки («просрочка 9 дн» под датой) — тоже в одну строку */
:is(td, th) .badge {
  max-width: none;
  white-space: nowrap;
}

.badge-ok,
.badge-done {
  background: var(--ga-sage);
  color: var(--ga-ink);
}

.badge-running,
.badge-queued {
  background: var(--ga-beige);
  color: var(--ga-ink);
}

/* Идёт / в очереди — маленькая квадратная метка forest (у «идёт» — мягкая пульсация) */
.badge-running::before,
.badge-queued::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--ga-forest);
  flex: 0 0 auto;
}

.badge-error,
.badge-auth_error,
.badge-overdue {
  background: var(--ga-alert);
  color: var(--ga-on-dark-cream);
}

.badge-warn {
  background: var(--ga-beige);
  border-color: var(--ga-tan);
  color: var(--ga-ink);
}

.badge-skipped,
.badge-cancelled,
.badge-rejected,
.badge-off,
.badge-none {
  background: transparent;
  color: var(--ga-sage-ink);
  border-color: var(--ga-field-line);
}

.badge-new {
  background: var(--ga-beige);
  color: var(--ga-ink);
}

.badge-confirmed {
  background: var(--ga-surface);
  color: var(--ga-forest-deep);
  border-color: var(--ga-forest);
}

.badge-in_progress {
  background: var(--ga-sage);
  color: var(--ga-ink);
}

/* Площадка учебного чата (этап 25): «ТГ» / «ВК» — тихие метки в цветах бренда */
.badge-tg,
.badge-vk {
  background: var(--ga-surface);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.badge-tg {
  color: var(--ga-forest-deep);
  border-color: var(--ga-sage);
}

.badge-vk {
  color: var(--ga-tan-ink);
  border-color: var(--ga-tan);
}

/* Задача «сделано» — сплошной forest (нарастание зелёного по статусам) */
.task-card .badge-done,
.kanban .badge-done,
#tasks-table .badge-done {
  background: var(--ga-forest);
  color: var(--ga-on-dark-cream);
}

@media (prefers-reduced-motion: no-preference) {
  .badge-running::before {
    animation: ga-pulse 1.4s ease-in-out infinite;
  }
}

@keyframes ga-pulse {
  50% {
    opacity: 0.3;
  }
}

@media print {
  .badge {
    background: transparent !important;
    color: var(--ga-ink) !important;
    border-color: var(--ga-line-strong) !important;
  }
}

/* ============================================================
   11. Канбан и карточка задачи
   Селекторы двойные, чтобы перебить старый <style> в settings/_kanban.html.
   ============================================================ */
.kanban {
  display: flex;
  gap: var(--ga-space-3);
  overflow-x: auto;
  align-items: flex-start;
  padding-bottom: var(--ga-space-1);
}

.kanban .kanban-col {
  flex: 1 1 0;
  min-width: 14rem;
  background: var(--ga-bg);
  border-radius: var(--ga-radius-card);
  padding: var(--ga-space-3);
}

.kanban .kanban-col h4 {
  display: flex;
  align-items: center;
  gap: var(--ga-space-2);
  font: 700 var(--ga-text-xs) / 1.3 var(--ga-font-text);
  text-transform: uppercase;
  letter-spacing: var(--ga-tracking-caps);
  color: var(--ga-green);
  margin: 0 0 var(--ga-space-3);
}

.kanban .kanban-col h4 .badge {
  letter-spacing: 0;
  text-transform: none;
}

/* Карточка — белая плоскость радиусом 3 px; срок — волосяной рамкой своего цвета (без цветной полосы слева) */
.kanban .kanban-card {
  background: var(--ga-surface);
  border: 1px solid transparent;
  border-radius: var(--ga-radius-card);
  padding: 10px 12px;
  margin-bottom: var(--ga-space-2);
  font-size: var(--ga-text-xs);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kanban .kanban-card br {
  display: none;
}

.kanban .kanban-card > a {
  color: var(--ga-ink);
  font-weight: 600;
  text-decoration: none;
}

.kanban .kanban-card > a:hover {
  text-decoration: underline;
  text-decoration-color: var(--ga-sage);
}

.kanban .kanban-card.is-overdue {
  border-color: var(--ga-alert);
}

.kanban .kanban-card.is-due-soon {
  border-color: var(--ga-tan);
}

.kanban .kanban-card form {
  display: block;
  margin: 0;
  align-self: flex-end;
}

.kanban .kanban-col > small.muted,
.kanban .kanban-col > p.muted {
  display: block;
  text-align: center;
  padding: var(--ga-space-4) 0;
  margin: 0;
}

@media (max-width: 767.98px) {
  .kanban {
    scroll-snap-type: x mandatory;
  }

  .kanban .kanban-col {
    min-width: 16rem;
    scroll-snap-align: start;
  }
}

/* Карточка задачи — вложенная, без своей рамки */
article.task-card {
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
}

article.task-card > header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--ga-space-3);
  flex-wrap: wrap;
}

article.task-card > header > * + * {
  margin-top: 0;
}

article.task-card > header strong {
  font-family: var(--ga-font-display);
  font-size: 1.125rem;
  font-weight: 600;
}

article.task-card > footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ga-space-2) var(--ga-space-3);
  align-items: flex-end;
}

article.task-card > footer form {
  margin: 0;
}

article.task-card > footer label {
  margin: 0;
}

article.task-card > footer :is(input, select) {
  margin-bottom: 0;
}

/* ============================================================
   12. Пустые состояния, плашки, примечания (шаг B: плоско, радиус 3 px, палитра сайта)
   ============================================================ */
/* «Данных нет» — не авария: пунктир шалфеем на кремовом, без значков */
.empty-state {
  position: relative;
  border: 1px dashed var(--ga-sage);
  border-radius: var(--ga-radius-card);
  background: var(--ga-bg);
  padding: var(--ga-space-5);
  max-width: 48rem;
  margin-bottom: var(--ga-space-4);
}

.empty-state > :last-child {
  margin-bottom: 0;
}

.empty-state p.muted {
  font-size: var(--ga-text-xs);
}

.empty-title {
  font-weight: 600;
  font-size: var(--ga-text-md);
  color: var(--ga-ink);
  margin: 0 0 var(--ga-space-1);
}

/* Компактный вариант — внутри колонок и небольших блоков */
.empty-state.is-compact {
  padding: var(--ga-space-3) var(--ga-space-4);
}

.empty-state.is-compact .empty-title {
  font-size: var(--ga-text-sm);
}

/* Плашки — плоские, как карточки сайта: заливка + волосяная рамка своего цвета, без цветной полосы слева
   (её нет в дизайн-коде академии). Требующее действия — одной строкой, детали — в «подробнее». */
.alert {
  border-radius: var(--ga-radius-card);
  padding: var(--ga-space-3) var(--ga-space-4);
  border: 1px solid var(--ga-line);
  background: var(--ga-surface);
  font-size: var(--ga-text-sm);
  color: var(--ga-ink);
  margin-bottom: var(--ga-space-4);
}

.alert details.how {
  margin-top: var(--ga-space-1);
}

.alert > :last-child {
  margin-bottom: 0;
}

.alert strong {
  font-weight: 600;
}

.alert p {
  margin: var(--ga-space-1) 0 0;
}

/* Ошибка — белая плашка с рамкой терракота, суть — терракотом (6,1:1); без розовой пастели */
.alert.alert-error {
  background: var(--ga-surface);
  border-color: var(--ga-alert);
  color: var(--ga-ink);
}

.alert.alert-error strong,
.alert.alert-error > .error {
  color: var(--ga-alert);
}

/* Предупреждение — палитрой сайта: беж с рамкой tan 1 px (янтарного цвета на сайте нет) */
.alert.alert-warn {
  background: var(--ga-beige);
  border-color: var(--ga-tan);
  color: var(--ga-ink);
}

/* Одна строка: суть · «подробнее ›»; раскрытое «подробнее» уходит на строку ниже во всю ширину */
.alert.alert-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--ga-space-2);
}

.alert.alert-line > details.how {
  margin: 0;
}

.alert.alert-line > details.how > summary::before {
  content: "· ";
}

.alert.alert-line > details.how[open] {
  flex-basis: 100%;
}

.alert.alert-line > details.how[open] > summary::before {
  content: none;
}

.alert.alert-line .how-body,
.alert.alert-line details.how > :not(summary) {
  color: var(--ga-ink);
}

/* «Сохранено» — белая плашка с рамкой forest, суть — forest */
.alert.alert-ok {
  background: var(--ga-surface);
  border-color: var(--ga-forest);
  color: var(--ga-ink);
}

.alert.alert-ok strong,
.alert.alert-ok > .ok {
  color: var(--ga-forest-deep);
}

:is(.ga-panel, article) .alert:not(.alert-warn) {
  background: var(--ga-bg);
}

.note {
  background: var(--ga-beige);
  padding: var(--ga-space-3) var(--ga-space-4);
  border-radius: var(--ga-radius-card);
  font-size: var(--ga-text-xs);
  color: var(--ga-ink);
  margin-bottom: var(--ga-space-4);
}

/* ============================================================
   13. Вход
   ============================================================ */
/* Карточка входа — белая плоскость сайта (радиус 3 px, без рамки), логотип с сайта сверху */
.login-card {
  max-width: 420px;
  margin: var(--ga-space-8) auto;
  padding: var(--ga-space-6);
  border: 0;
  border-radius: var(--ga-radius-card);
}

.login-logo {
  display: block;
  width: 144px;
  height: auto;
  margin-bottom: var(--ga-space-5);
}

.login-card > header h2 {
  font-size: var(--ga-text-xl);
  margin-bottom: 0;
}

.login-card > header p.muted {
  font-size: var(--ga-text-sm);
}

.login-card form label {
  margin-bottom: var(--ga-space-4);
}

.login-card form :is(input, select) {
  margin-bottom: 0;
}

.login-card form [type="submit"] {
  width: 100%;
  margin-top: var(--ga-space-2);
}

@media (max-width: 575.98px) {
  .login-card {
    margin: var(--ga-space-6) auto;
    padding: var(--ga-space-5);
  }
}

/* ============================================================
   14. Графики
   ============================================================ */
.chart-box {
  position: relative;
  width: 100%;
  min-height: 280px;
}

.echart-box {
  width: 100%;
  height: 360px;
}

/* Высота по числу строк у горизонтальных столбцов (Chart.js иначе пропускает подписи на оси): 9–14 строк — md,
   больше — lg; класс ставит шаблон, без style= */
.chart-box.chart-h-md {
  min-height: 380px;
}

.chart-box.chart-h-lg {
  min-height: 480px;
}

@media (max-width: 479.98px) {
  .chart-box {
    min-height: 240px;
  }

  .echart-box {
    height: 300px;
  }
}

/* ============================================================
   15. Блок «Синхронизации»
   ============================================================ */
.sync-status .grid {
  align-items: start;
}

.sync-status h4 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ga-space-2);
}

.sync-status td small.error {
  display: block;
  margin-top: var(--ga-space-1);
  overflow-wrap: anywhere;
}

.sync-status details {
  margin-top: var(--ga-space-4);
}

/* ============================================================
   16. Утилиты
   ============================================================ */
.nowrap {
  white-space: nowrap;
}

.text-right {
  text-align: right;
}

.stack > * + * {
  margin-top: var(--ga-space-3);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ga-space-2) var(--ga-space-3);
}

.mb-0 {
  margin-bottom: 0;
}

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

/* ============================================================
   Калькулятор премии /kpi/kaneev (страница вне меню)
   ============================================================ */
.kpi-marks-group {
  margin-bottom: var(--ga-space-4);
  padding: var(--ga-space-3) var(--ga-space-4);
  border: 1px solid var(--ga-line);
  border-radius: var(--ga-radius-md);
}

.kpi-marks-row {
  align-items: start;
  margin-bottom: var(--ga-space-2);
}

.kpi-detail-row > td {
  padding-top: 0;
  border-top: 0;
}

.kpi-detail-row details table {
  margin: var(--ga-space-1) 0 var(--ga-space-3);
  font-size: var(--ga-text-xs);
}

.kpi-table td.kpi-name,
.kpi-table td.kpi-status {
  min-width: 12rem;
}

/* ============================================================
   17. «Сводка» (/): 20 плиток — пять групп по четыре
   ============================================================ */
/* Период и сравнение — чипами под заголовком (как на «Продажах») */
.overview-chips {
  margin: calc(-1 * var(--ga-space-3)) 0 var(--ga-space-4);
}

.overview-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ga-space-3) var(--ga-space-4);
  margin-bottom: var(--ga-space-5);
}

.overview-month,
.overview-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ga-space-2);
  margin: 0;
}

.overview-month select {
  width: auto;
  min-width: 11rem;
  height: 32px;
  margin: 0;
  padding-block: 0;
  font-size: var(--ga-text-xs);
}

.overview-csv {
  margin: 0;
}

.overview-csv > summary[role="button"] {
  min-height: 32px;
  height: 32px;
  padding: 0.25rem 10px;
  font-size: var(--ga-text-xs);
}

.overview-csv > summary + ul {
  min-width: 12rem;
  right: 0;
  left: auto;
}

/* Группа — белая панель .ga-panel с заголовком .panel-title (раздел 6а) */
.overview-group {
  margin: 0 0 var(--ga-space-4);
}

/* 4 плитки в ряд на широком экране, по 2 — на планшете и телефоне (без «3 + 1») */
.overview-grid {
  --kpi-min: 14rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 0;
}

@media (min-width: 1100px) {
  .overview-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.overview-kpi {
  min-height: 9.5rem;
}

.overview-kpi .kpi-sub {
  line-height: 1.35;
}

.overview-kpi .kpi-compare-gray {
  font-weight: 400;
}

/* Полоса к плану — плоская: дорожка светлее плитки, заливка тёмно-зелёная */
.overview-kpi progress {
  height: 0.5rem;
  margin: var(--ga-space-1) 0 0;
  border-radius: var(--ga-radius-xs);
  --pico-progress-background-color: rgba(255, 255, 255, 0.55);
  --pico-progress-color: var(--ga-forest);
}

.overview-kpi.kpi-muted .value {
  color: var(--ga-sage-ink);
}

/* Спарклайн прижат к низу плитки: плитки ряда одной высоты */
.overview-kpi .sparkline {
  margin-top: auto;
}

/* Спарклайн: пропорции рамки 120 × 32 (круг-точка не сплющивается), не выше 3rem */
.sparkline {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 120 / 32;
  max-height: 3rem;
  margin-top: var(--ga-space-1);
  overflow: visible;
}

.sparkline-prev,
.sparkline-cur {
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.sparkline-prev {
  stroke: var(--ga-series-2);
  stroke-width: 1.5px;
}

.sparkline-cur {
  stroke: var(--ga-series-1);
  stroke-width: 2px;
}

.sparkline-dot {
  fill: var(--ga-series-1);
}

.tile-beige .sparkline-prev {
  stroke: var(--ga-sage-hover);
}

.tile-forest .sparkline-prev {
  stroke: var(--ga-sage);
}

.tile-forest .sparkline-cur {
  stroke: var(--ga-on-dark-cream);
}

.tile-forest .sparkline-dot {
  fill: var(--ga-on-dark-cream);
}

/* Скелет плиток, пока считается фрагмент: та же высота — страница не прыгает */
.overview-kpi.is-loading {
  background: var(--ga-beige);
}

.overview-computed,
.overview-data-as-of {
  margin: var(--ga-space-4) 0 0;
}

.overview-refresh.htmx-request {
  opacity: 0.5;
  pointer-events: none;
}

.overview-method {
  margin-top: var(--ga-space-5);
}

.overview-method summary {
  font-weight: 600;
  color: var(--ga-green);
}

.overview-method dl {
  columns: 2 22rem;
  column-gap: var(--ga-space-6);
  font-size: var(--ga-text-xs);
}

.overview-method dt {
  font-weight: 600;
  break-after: avoid;
}

.overview-method dd {
  margin: 0 0 var(--ga-space-3);
  color: var(--ga-sage-ink);
  break-inside: avoid;
}

@media (max-width: 639.98px) {
  .overview-kpi {
    min-height: 8.5rem;
  }
}

/* Телефон до 480 px: одна колонка во всю ширину (как цифры «Об академии» на сайте), высота — по содержимому */
@media (max-width: 479.98px) {
  .overview-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .overview-kpi {
    min-height: 0;
  }
}

/* Печать «Сводки»: один лист A4 книжный — 4 плитки в ряд, без меню, формы и «подробнее»;
   спарклайны и «Как считаются цифры» (раскрыты) печатаются. */
@page overview {
  size: A4 portrait;
  margin: 6mm 7mm;
}

@media print {
  .overview-page {
    page: overview;
  }

  body:has(.overview-page) .site-header,
  body:has(.overview-page) .site-footer,
  .overview-toolbar,
  .overview-refresh,
  .overview-data-as-of .badge + a {
    display: none !important;
  }

  /* rem на листе меньше: все размеры темы (они в rem) ужимаются разом */
  html:has(.overview-page) {
    font-size: 7.5pt;
  }

  body:has(.overview-page),
  body:has(.overview-page) .site-main {
    background: var(--ga-surface);
    margin: 0;
    padding: 0;
    max-width: none;
  }

  .overview-page small {
    font-size: inherit;
  }

  .overview-page * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .overview-page .page-head {
    margin-bottom: 2mm;
  }

  .overview-page .page-head > * {
    margin: 0;
  }

  .overview-page .page-head .eyebrow {
    display: none;
  }

  /* чипы периода печатаются строкой текста, как прежняя подпись под заголовком */
  .overview-chips {
    gap: 0 3mm;
    margin: 0 0 2mm;
  }

  .overview-chips .chip {
    padding: 0;
    background: transparent;
    color: var(--ga-sage-ink);
  }

  .overview-page .page-head h2 {
    font-size: 15pt;
    margin: 0;
  }

  .overview-group {
    break-inside: avoid;
    margin: 0;
  }

  .overview-group + .overview-group {
    margin-top: 2mm;
  }

  .overview-group-title {
    margin-bottom: 1mm;
    font-size: 8pt;
    color: var(--ga-sage-ink);
  }

  .overview-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5mm;
  }

  .overview-kpi,
  .overview-kpi.tile {
    min-height: 0;
    padding: 1.2mm 2mm;
    gap: 0.3mm;
    box-shadow: none;
  }

  .overview-kpi.kpi-main {
    box-shadow: inset 0 2px 0 var(--ga-green) !important;
  }

  .overview-kpi .kpi-label,
  .overview-kpi small,
  .overview-kpi.tile .kpi-label,
  .overview-kpi.tile small {
    font-size: 6.5pt;
    line-height: 1.2;
  }

  .overview-kpi .value,
  .overview-kpi.tile .value {
    font-size: 11pt;
  }

  /* подстроки из пояснения «?» — мелко, как раньше в плитке */
  .overview-kpi .tip,
  .overview-kpi .tip > * {
    font-size: 6.5pt;
    line-height: 1.2;
    margin: 0;
    color: var(--ga-sage-ink);
  }

  .overview-kpi progress {
    height: 1.2mm;
  }

  .sparkline {
    max-height: 4.5mm;
  }

  .overview-computed,
  .overview-data-as-of {
    margin: 1.5mm 0 0;
    font-size: 6.5pt;
    line-height: 1.3;
  }

  .overview-method {
    margin-top: 2mm;
  }

  .overview-method summary {
    font-size: 7pt;
  }

  /* Закрытый <details> в печати раскрывается (Chrome 131+, Safari 18.4+; в остальных — print.js) */
  .overview-method::details-content {
    content-visibility: visible;
    display: block;
  }

  .overview-method > p,
  .overview-method dl {
    font-size: 5.3pt;
    line-height: 1.2;
    margin: 0;
  }

  .overview-method dl {
    columns: 4;
    column-gap: 3mm;
  }

  .overview-method dd {
    margin-bottom: 0.6mm;
  }
}

/* ============================================================
   18. Телефон и «приложение на рабочем столе» (этап 11, PWA)
   Нижняя панель разделов — в стиле шапки шага A: графитовая полоса, пункты Mulish белым, текущий раздел — черта tan
   (сверху пункта: полоса внизу экрана); «Ещё» — окно со списком остальных разделов (нативный popover, без скриптов).
   Вырез экрана и полоса «домой» (viewport-fit=cover): отступы env(safe-area-inset-*). Поля — 44 px под палец,
   фильтры свёрнуты под кнопку «Фильтры» (phone.js), листаемая таблица — черта у правого края (phone.js).
   ============================================================ */

/* Вырез экрана слева/справа (телефон боком) и строка состояния сверху — шапка, контент и подвал не заходят под них */
.site-header {
  padding-top: env(safe-area-inset-top, 0px);
}

.site-topbar,
:is(main.container-fluid, .site-main),
:is(footer.container-fluid, .site-footer) {
  padding-left: max(var(--ga-gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--ga-gutter), env(safe-area-inset-right, 0px));
}

.tabbar,
.tabbar-sheet {
  display: none;
}

/* Палец: поля и выпадающие списки — 44 px (select-ы нативные), кнопки панели инструментов — 40 px */
@media (pointer: coarse) {
  :root {
    --ga-control-h: 2.75rem;
  }

  .toolbar select,
  .toolbar input:not([type="checkbox"], [type="radio"]),
  .overview-month select {
    height: var(--ga-control-h);
  }

  /* Шрифт полей не мельче 16 px: иначе iPhone (Safari и «приложение на рабочем столе») при касании поля увеличивает
     страницу и оставляет её увеличенной. !important — поверх экранных правил (.toolbar select, .report-month-form
     select, table.table-form …: там 14–15 px для мыши). */
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="submit"], [type="button"], [type="reset"]),
  select,
  textarea {
    font-size: 1rem !important;
  }

  /* Кнопки 32 px (.tiny: панели инструментов, «Выполнено», «Добавить», «Исключить», «Закрыть» у «?») и кнопки строки
     «Сводки» и «Выйти» — 40 px под палец */
  :is(button, [role="button"]).tiny,
  :is(.overview-toolbar, .overview-links, .site-user) :is(button, [role="button"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
  }

  input:is([type="submit"], [type="button"]).tiny {
    min-height: 40px;
  }

  /* «Таблетки»-ссылки (оглавление «Итоги / Линейки…», «← Мероприятия месяца», «Пересчитать») — 36 px */
  a.chip {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
  }

  /* Раскрывашки «Как считается ›», «подробнее», «Показать все …», «Как считаются цифры» — зона нажатия 44 px
     (padding), вертикальный ритм прежний (отрицательное поле) */
  details:is(.how, .fold, .method, .overview-method, .add-form) > summary {
    padding-block: 14px;
    margin-block: -14px;
  }

  details.fold[open] > summary {
    margin-bottom: calc(var(--ga-space-3) - 14px);
  }

  details:is(.method, .overview-method, .add-form)[open] > summary {
    margin-bottom: calc(var(--pico-spacing) - 14px);
  }
}

@media screen and (max-width: 639.98px) {
  /* Полоса разделов уходит вниз: сверху остаётся кремовая строка с логотипом и «Выйти» */
  .site-nav {
    display: none;
  }

  .site-header:has(.site-nav) {
    border-bottom: 1px solid var(--ga-line);
  }

  /* Контент и подвал не прячутся под нижней панелью */
  body:has(.tabbar) {
    padding-bottom: calc(var(--ga-tabbar-h) + env(safe-area-inset-bottom, 0px));
  }

  .tabbar {
    display: block;
    position: fixed;
    inset: auto 0 0;
    z-index: 50;
    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    background: var(--ga-graphite);
  }

  .tabbar > ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .tabbar li {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .tabbar > ul > li > :is(a, button) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--ga-tabbar-h);
    margin: 0;
    padding: 3px 4px 0;
    border: 0;
    border-top: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--ga-on-dark);
    font: 400 0.8125rem / 1.15 var(--ga-font-text);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color var(--ga-dur) var(--ga-ease);
  }

  .tabbar :is(a, button):hover,
  .tabbar :is(a, button):active {
    background: transparent;
    color: var(--ga-on-dark);
    border-top-color: var(--ga-sage);
  }

  .tabbar :is(a[aria-current="page"], button.is-current) {
    font-weight: 600;
    border-top-color: var(--ga-tan);
  }

  .tabbar :is(a, button):focus-visible {
    outline: 2px solid var(--ga-on-dark);
    outline-offset: -5px;
  }

  /* «Ещё»: остальные разделы — белая плоскость над панелью, строки 48 px, как список выгрузок «Экспорта» */
  .tabbar-sheet:popover-open {
    display: block;
    position: fixed;
    inset: auto 0 calc(var(--ga-tabbar-h) + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: none;
    max-height: calc(100dvh - var(--ga-tabbar-h) - 24px);
    margin: 0;
    padding: var(--ga-space-3) max(var(--ga-gutter), env(safe-area-inset-right, 0px)) var(--ga-space-2)
      max(var(--ga-gutter), env(safe-area-inset-left, 0px));
    overflow: auto;
    border: 0;
    border-radius: var(--ga-radius-card) var(--ga-radius-card) 0 0;
    background: var(--ga-surface);
    color: var(--ga-ink);
    box-shadow: var(--ga-shadow-hairline);
  }

  .tabbar-sheet::backdrop {
    background: rgba(44, 42, 43, 0.25);
  }

  .tabbar-sheet-title {
    margin: 0 0 var(--ga-space-1);
    font: 600 var(--ga-text-xs) / 1.3 var(--ga-font-heading);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ga-forest);
  }

  .tabbar-sheet ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .tabbar-sheet li {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ga-line);
  }

  .tabbar-sheet li:first-child {
    border-top: 0;
  }

  .tabbar-sheet a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0 var(--ga-space-2);
    border-radius: var(--ga-radius-card);
    color: var(--ga-ink);
    font: 400 var(--ga-text-md) / 1.3 var(--ga-font-text);
    text-decoration: none;
  }

  .tabbar-sheet a::after {
    content: "›";
    color: var(--ga-sage-ink);
  }

  .tabbar-sheet a:hover {
    background: var(--ga-row-hover);
    color: var(--ga-ink);
  }

  .tabbar-sheet a[aria-current="page"] {
    font-weight: 600;
    color: var(--ga-forest);
  }

  /* Вторая группа панели инструментов (Печать, CSV, «История») — с новой строки слева, а не прижата вправо */
  .toolbar > .toolbar-group:last-child:not(:first-child) {
    margin-left: 0;
  }

  /* Месяц отчёта («Продажи», «Маркетинг», «Мероприятия», премия): «← август» и «октябрь →» — одной строкой по краям,
     список месяца (и продукта) с «Показать» — строкой ниже во всю ширину; было три строки кнопок */
  .toolbar .report-months:has(> form) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
  }

  .toolbar .report-months > a[rel="prev"] {
    justify-self: start;
  }

  .toolbar .report-months > a[rel="next"] {
    grid-row: 1;
    grid-column: 2;
    justify-self: end;
  }

  .toolbar .report-months > form {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ga-space-2);
  }

  .toolbar .report-months > form select {
    flex: 1 1 8rem;
    width: auto;
    min-width: 0;
    height: var(--ga-control-h);
  }

  /* Панель фильтров свёрнута под кнопку «Фильтры · текущий месяц · все продукты» (phone.js) */
  button.filters-toggle {
    display: flex;
    align-items: center;
    gap: var(--ga-space-2);
    width: 100%;
    min-height: 44px;
    margin: 0 0 var(--ga-space-4);
    padding: 0 14px;
    border: 0;
    border-radius: var(--ga-radius-card);
    background: var(--ga-surface);
    color: var(--ga-ink);
    font: 600 var(--ga-text-sm) / 1.2 var(--ga-font-text);
    text-align: left;
  }

  .ga-panel button.filters-toggle {
    background: var(--ga-bg);
  }

  button.filters-toggle:hover {
    background: var(--ga-beige);
    color: var(--ga-ink);
  }

  button.filters-toggle::after {
    content: "›";
    display: inline-block;
    margin-left: auto;
    color: var(--ga-sage-ink);
    transform: rotate(90deg);
    transition: transform 0.15s ease;
  }

  button.filters-toggle[aria-expanded="true"]::after {
    transform: rotate(-90deg);
  }

  .filters-toggle-note {
    min-width: 0;
    overflow: hidden;
    color: var(--ga-sage-ink);
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  form.filters.is-folded {
    display: none;
  }

  /* Таблица шире экрана листается внутри блока: пока справа есть столбцы — черта у правого края (phone.js) */
  :is(.table-wrap, .overflow-auto, figure).is-scrollable {
    border-right: 2px solid transparent;
  }

  :is(.table-wrap, .overflow-auto, figure).is-scrollable.has-more {
    border-right-color: var(--ga-sage-ink);
  }
}

@media print {
  .tabbar,
  .tabbar-sheet,
  .filters-toggle {
    display: none !important;
  }

  form.filters.is-folded {
    display: block;
  }
}

/* Нормы показателей (этап 21, шаблон `_norms.html`): строка «норма …» на плитке и цвет числа в ячейке к норме.
   В норме или лучше — зелёный, чуть хуже (85–95 % нормы) — tan, хуже — терракот. На тёмных плитках (forest, alert)
   строка кремовая — общее правило плиток. «норма …» в ячейке — мелко, с пунктиром: наведите — откуда норма. */
.kpi.tile small.kpi-norm {
  font-weight: 600;
  line-height: 1.35;
}

.kpi.tile:is(.tile-beige, .tile-white, .tile-sage) small.kpi-norm.norm-ok {
  color: var(--ga-ok-ink);
}

.kpi.tile:is(.tile-beige, .tile-white, .tile-sage) small.kpi-norm.norm-warn {
  color: var(--ga-tan-ink);
}

.kpi.tile:is(.tile-beige, .tile-white, .tile-sage) small.kpi-norm.norm-bad {
  color: var(--ga-coral-ink);
}

td.norm-ok {
  color: var(--ga-ok-ink);
}

td.norm-warn {
  color: var(--ga-tan-ink);
}

td.norm-bad {
  color: var(--ga-danger-ink);
  font-weight: 600;
}

td:is(.norm-ok, .norm-warn, .norm-bad) small {
  font-weight: 400;
}

/* Цвет к норме важнее «плюс/минус» (ROMI +150 % при норме +280 % — красный, хотя плюс) */
td:is(.norm-ok, .norm-warn, .norm-bad) :is(span.ok, span.error) {
  color: inherit;
}

:is(small.cell-sub, span).norm-ok {
  color: var(--ga-ok-ink);
}

:is(small.cell-sub, span).norm-warn {
  color: var(--ga-tan-ink);
}

:is(small.cell-sub, span).norm-bad {
  color: var(--ga-danger-ink);
  font-weight: 600;
}

small.norm-note {
  color: var(--ga-sage-ink);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.tip-norm {
  margin-bottom: 0.4rem;
}

/* «Настройки → Нормы показателей»: «откуда норма» — мелко под названием цифры (на телефоне не узкой колонкой) */
.norms-table small.norms-why {
  color: var(--ga-sage-ink);
  line-height: 1.4;
  max-width: 60rem;
}

.norms-form-grid {
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

/* «Продажи → Платежи месяца → исправить → разнести по линейкам» (этап 32, как у РОПа): поля долей сеткой —
   на телефоне по две в ряд, на широком экране — по четыре; ячейка не растягивает таблицу. */
.payment-lines-form .lines-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(6.5rem, 1fr));
  gap: 0 0.5rem;
  align-items: end; /* подписи в две строки («Ландшафтный дизайн») — поля всё равно в одну линию */
  min-width: 14rem;
}

details.row-lines {
  margin-top: 0.5rem;
}

@media (min-width: 992px) {
  .payment-lines-form .lines-grid {
    grid-template-columns: repeat(4, minmax(7rem, 1fr));
    min-width: 30rem;
  }
}

.payment-lines-form .lines-grid input {
  margin-bottom: 0.25rem;
}

/* «Линейки продуктов → Разнесено по линейкам из других категорий»: на телефоне «куда» — строкой под «откуда»
   (столбец скрыт), чтобы таблица не уезжала вбок; на широком экране — своим столбцом. */
.lines-moved td small {
  line-height: 1.4;
}

.lines-moved small.lines-moved-sub {
  display: none;
}

@media (max-width: 575.98px) {
  .lines-moved :is(th, td).lines-moved-to {
    display: none;
  }

  .lines-moved small.lines-moved-sub {
    display: block;
  }
}

/* Этап 34b: «Скачать PDF» расчётного листа ЗП — вкладка «ЗП», «Расчёт ЗП ОП», «Учёба → Расчёт ЗП», калькулятор
   Канеева. Ссылка не переносится по словам; строка над расчётом человека — с отступом снизу. */
.pay-pdf {
  white-space: nowrap;
  font-weight: 600;
}

.pay-pdf-line {
  margin: 0 0 var(--ga-space-2);
  font-size: var(--ga-text-sm);
}