/*
  Вахтенный — дизайн-система «Ведомость» (редакция CRM_SPEC.md, 24.09.2026)
  ==========================================================================
  Мир: бланк учётной ведомости агентства. Холодная офсетная бумага, бледная
  линовка, графитовый печатный текст для измеренного. У ДАННЫХ — ровно четыре
  цвета чернил (закон чернил, см. .impeccable surface-brief):
    синие  — что внесли МЫ (сделки, задачи, заметки, правки)
    красные — минус, просрочено, ухудшение
    фиолетовый штамп — сверено / сформировано / готово
    графит — измеренный факт без оценки
  Никаких других цветов на данных: не «зелёный = хорошо», а отсутствие
  красного/фиолетового при графитовом тексте.

  Режим: Operate (impeccable). Один шрифт-рабочая лошадь (Inter) на всё,
  кроме шапок ведомостей и регистровых номеров — там узкий гротеск
  PT Sans Narrow, как в печатной форме. Радиусы ≤ 3px, без карточных теней.

  Структура файла (искать по заголовкам):
    1. @font-face
    2. Токены :root (светлая тема) + тёмная тема
    3. Reset и базовые элементы (включая браузерные поверхности: выделение,
       каретка, скроллбар, фокус, ссылки)
    4. Оболочка (.shell, корешок-навигация, нижняя панель телефона)
    5. Шапка страницы (.page-head)
    6. Ведомость-таблица (.ledger)
    7. Чернильные метки (.ink) и штамп (.stamp)
    8. Кнопки (.btn)
    9. Поля форм (.field, .quick-add)
    10. Вкладки (.tabs)
    11. Выдвижная панель (.panel)
    12. Флэш-строка (.flash)
    13. Пустое состояние (.empty)
    14. Скелетон (.skeleton)
    15. Графики (svg[data-chart] — отзывчивые, вписываются в колонку/телефон/печать)
    16. Подсказка графика (.chart-tip)
    17. Палитра поиска ⌘K (.palette)
    18. Канбан (.kanban) — только стили
    19. Календарь (.cal) — только стили
    20. Отметка задачи (.task-check) — чернильное зачёркивание
    21. Тост (.toast)
    22. Утилиты и медиа-запросы
*/

/* ============================== 1. ШРИФТЫ ============================== */
/* Inter — вариативный (400..700), три файла по диапазону письменности:
   так браузер не тянет латиницу ради кириллицы и наоборот. */
@font-face {
  font-family: "Inter Variable";
  src: url("/static/fonts/inter-400-700-cyrillic.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter Variable";
  src: url("/static/fonts/inter-400-700-cyrillic-ext.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Inter Variable";
  src: url("/static/fonts/inter-400-700-latin.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122;
}
/* PT Sans Narrow — только шапки колонок ведомости и регистровые номера/штампы,
   двух начертаний хватает (400 текст, 700 штамп/итог). */
@font-face {
  font-family: "PT Sans Narrow";
  src: url("/static/fonts/ptsansnarrow-400-cyrillic.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "PT Sans Narrow";
  src: url("/static/fonts/ptsansnarrow-400-cyrillic-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
@font-face {
  font-family: "PT Sans Narrow";
  src: url("/static/fonts/ptsansnarrow-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F;
}
@font-face {
  font-family: "PT Sans Narrow";
  src: url("/static/fonts/ptsansnarrow-700-cyrillic.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "PT Sans Narrow";
  src: url("/static/fonts/ptsansnarrow-700-cyrillic-ext.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
@font-face {
  font-family: "PT Sans Narrow";
  src: url("/static/fonts/ptsansnarrow-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F;
}

/* ============================== 2. ТОКЕНЫ ============================== */
:root {
  /* Бумага и линовка — холодная офсетная бумага, hue к синему (264) */
  --paper: oklch(0.976 0.004 264);
  --paper-panel: oklch(0.955 0.006 264); /* корешок, шапки ведомостей, второй слой */
  --paper-raised: oklch(0.99 0.002 264); /* выдвижная панель, диалог, поповер */
  --rule: oklch(0.87 0.028 148); /* бледно-зелёная линовка, 1px */
  --rule-strong: oklch(0.74 0.03 148); /* двойная черта итога */
  --frame: oklch(0.62 0.02 264); /* рамка печатной формы (шапка ведомости) */

  /* Печатный текст (измеренный факт — только эти два, без цвета) */
  --ink-print: oklch(0.27 0.012 264); /* графит, основной текст, ≈9.6:1 на paper */
  --ink-quiet: oklch(0.47 0.014 264); /* графит тихий, подписи/мета, ≈4.6:1 */

  /* Закон чернил — у данных ровно четыре цвета */
  --ink-blue: oklch(0.45 0.16 259); /* внесли мы: сделки, задачи, заметки, правки */
  --ink-blue-soft: oklch(0.45 0.16 259 / 0.12);
  --ink-red: oklch(0.5 0.19 24); /* минус, просрочено, ухудшение */
  --ink-red-soft: oklch(0.5 0.19 24 / 0.12);
  --ink-red-fill: oklch(0.4 0.17 24); /* заливка под белый текст (бейдж) — темнее, чем текстовый красный */
  --stamp: oklch(0.44 0.15 321); /* сверено, сформировано, готово */
  --stamp-soft: oklch(0.44 0.15 321 / 0.12);

  --focus-ring: oklch(0.52 0.19 259);
  --selection: oklch(0.45 0.16 259 / 0.22);
  --scrollbar: oklch(0.7 0.02 264 / 0.55);
  --scrollbar-track: oklch(0.955 0.006 264);

  --radius: 3px;
  --radius-sm: 2px;
  --font-body: "Inter Variable", "Inter", system-ui, -apple-system, sans-serif;
  --font-narrow: "PT Sans Narrow", "Inter Variable", system-ui, sans-serif;

  /* Шкала, шаг ≈1.15 — плотнее, чем на брендовой поверхности (Operate) */
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 180ms;

  --shell-spine-w: 220px;
  --shell-bottom-h: 56px;
  color-scheme: light;
}

/* Тёмная тема — по системе, и явным переключателем через data-theme (core.js) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: oklch(0.225 0.012 264);
    --paper-panel: oklch(0.195 0.012 264);
    --paper-raised: oklch(0.26 0.013 264);
    --rule: oklch(0.34 0.032 148);
    --rule-strong: oklch(0.46 0.036 148);
    --frame: oklch(0.5 0.018 264);

    --ink-print: oklch(0.92 0.008 264);
    --ink-quiet: oklch(0.72 0.012 264);

    --ink-blue: oklch(0.76 0.13 259);
    --ink-blue-soft: oklch(0.76 0.13 259 / 0.16);
    --ink-red: oklch(0.74 0.16 24);
    --ink-red-soft: oklch(0.74 0.16 24 / 0.16);
    --ink-red-fill: oklch(0.4 0.17 24);
    --stamp: oklch(0.76 0.13 321);
    --stamp-soft: oklch(0.76 0.13 321 / 0.16);

    --focus-ring: oklch(0.8 0.14 259);
    --selection: oklch(0.76 0.13 259 / 0.3);
    --scrollbar: oklch(0.5 0.02 264 / 0.6);
    --scrollbar-track: oklch(0.195 0.012 264);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: oklch(0.225 0.012 264);
  --paper-panel: oklch(0.195 0.012 264);
  --paper-raised: oklch(0.26 0.013 264);
  --rule: oklch(0.34 0.032 148);
  --rule-strong: oklch(0.46 0.036 148);
  --frame: oklch(0.5 0.018 264);
  --ink-print: oklch(0.92 0.008 264);
  --ink-quiet: oklch(0.72 0.012 264);
  --ink-blue: oklch(0.76 0.13 259);
  --ink-blue-soft: oklch(0.76 0.13 259 / 0.16);
  --ink-red: oklch(0.74 0.16 24);
  --ink-red-soft: oklch(0.74 0.16 24 / 0.16);
  --ink-red-fill: oklch(0.4 0.17 24);
  --stamp: oklch(0.76 0.13 321);
  --stamp-soft: oklch(0.76 0.13 321 / 0.16);
  --focus-ring: oklch(0.8 0.14 259);
  --selection: oklch(0.76 0.13 259 / 0.3);
  --scrollbar: oklch(0.5 0.02 264 / 0.6);
  --scrollbar-track: oklch(0.195 0.012 264);
  color-scheme: dark;
}

/* ==================== 3. RESET И БАЗОВЫЕ ЭЛЕМЕНТЫ ==================== */
* {
  box-sizing: border-box;
  min-width: 0;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-print);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  /* Имена кампаний и адреса без пробелов («IBA_WEB_RU_RSY_…») на телефоне выталкивали
     страницу вбок: длинное слово переносится только тогда, когда иначе не помещается. */
  overflow-wrap: break-word;
}
h1, h2, h3, h4 {
  margin: 0;
  font-weight: 640;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
p { margin: 0 0 var(--sp-3); }
a { color: var(--ink-blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 1.5px; }
button, input, select, textarea { font: inherit; color: inherit; }
svg { display: block; }

/* Браузерные поверхности — из палитры, не по умолчанию (craft-floor) */
::selection { background: var(--selection); color: var(--ink-print); }
html { caret-color: var(--ink-blue); }
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
* { scrollbar-color: var(--scrollbar) var(--scrollbar-track); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: var(--radius); border: 2px solid var(--scrollbar-track); }

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

/* ============================== 4. ОБОЛОЧКА ============================== */
.shell {
  display: grid;
  grid-template-columns: var(--shell-spine-w) 1fr;
  min-height: 100vh;
}
.spine {
  border-right: 1px solid var(--rule);
  background: var(--paper-panel);
  padding: var(--sp-4) var(--sp-3) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  position: sticky;
  top: 0;
  height: 100vh; /* фолбэк для браузеров без dvh */
  height: 100dvh;
  overflow-y: auto;
}
.spine-head {
  font-family: var(--font-narrow);
  font-weight: 700;
  font-size: var(--fs-lg);
  letter-spacing: 0.01em;
  padding: 0 var(--sp-2);
}
.spine-date {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-xs);
  color: var(--ink-quiet);
  margin-top: 2px;
}
.spine-group { display: flex; flex-direction: column; gap: 1px; }
.spine-label {
  font-family: var(--font-narrow);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-quiet);
  padding: var(--sp-2) var(--sp-2) 2px;
}
.spine-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 7px var(--sp-2);
  border-radius: var(--radius);
  color: var(--ink-print);
  text-decoration: none;
  font-size: var(--fs-sm);
}
.spine-link:hover { background: var(--paper-raised); }
.spine-link[aria-current="page"] {
  background: var(--ink-blue-soft);
  color: var(--ink-blue);
  font-weight: 560;
}
.spine-count {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  color: var(--ink-quiet);
  min-width: 1.4em;
  text-align: right;
}
.spine-link[aria-current="page"] .spine-count { color: var(--ink-blue); }
.spine-count.is-red { color: var(--ink-red); font-weight: 700; }
.spine-more {
  border: 0;
  background: none;
  width: 100%;
  text-align: left;
  padding: 7px var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--ink-quiet);
  cursor: pointer;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 6px;
}
.spine-more:hover { background: var(--paper-raised); color: var(--ink-print); }
.spine-more svg { transition: transform var(--dur) var(--ease-out); width: 12px; height: 12px; }
.spine-more[aria-expanded="true"] svg { transform: rotate(90deg); }
.spine-sub { display: none; flex-direction: column; gap: 1px; padding-left: var(--sp-2); }
.spine-sub.is-open { display: flex; }
.spine-sub-label { color: var(--ink-quiet); font-weight: 400; }
.spine-link[aria-current="page"] .spine-sub-label { color: inherit; opacity: 0.75; }
/* Список кабинетов/сайтов — своя прокрутка с потолком высоты, чтобы длинный список не
   утаскивал корешок ниже экрана и не прятал тему/остальные разделы (craft-floor: длинная
   навигация сворачивается в группу с прокруткой, не растягивает панель). */
.spine-cabinets {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: var(--sp-2);
  max-height: 8.5em;
  overflow-y: auto;
}

.spine-theme {
  margin-top: auto;
  display: flex;
  gap: 4px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 3px;
}
.spine-theme button {
  flex: 1;
  border: 0;
  background: none;
  padding: 5px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--ink-quiet);
  font-size: var(--fs-xs);
}
.spine-theme button[aria-pressed="true"] { background: var(--paper-raised); color: var(--ink-print); }

.stage { min-width: 0; display: flex; flex-direction: column; }

/* Нижняя панель телефона: 5 пунктов + «Ещё» */
.bottombar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--shell-bottom-h);
  background: var(--paper-panel);
  border-top: 1px solid var(--rule);
  z-index: 40;
  padding-bottom: env(safe-area-inset-bottom);
}
.bottombar-row { display: grid; grid-template-columns: repeat(5, 1fr); height: var(--shell-bottom-h); }
.bottombar-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; text-decoration: none; color: var(--ink-quiet); font-size: 11px;
  position: relative;
}
.bottombar-item[aria-current="page"] { color: var(--ink-blue); }
.bottombar-item svg { width: 20px; height: 20px; }
.bottombar-badge {
  position: absolute; top: 0; right: calc(50% - 17px);
  background: var(--ink-red-fill); color: white; border-radius: 999px;
  font-size: 11px; line-height: 1; padding: 2px 5px; font-variant-numeric: tabular-nums;
}

/* ============================ 5. ШАПКА СТРАНИЦЫ ============================ */
.page-head {
  padding: var(--sp-5) var(--sp-6) var(--sp-4);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
}
.page-head h1 { font-size: var(--fs-xl); overflow-wrap: anywhere; }
.page-meta { display: block; font-size: var(--fs-sm); color: var(--ink-quiet); margin-top: 4px; }
.page-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.page-search {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 6px 10px; color: var(--ink-quiet); font-size: var(--fs-sm);
  background: var(--paper-raised); cursor: pointer;
}
.page-search kbd {
  font-family: var(--font-body); font-size: var(--fs-xs); border: 1px solid var(--rule);
  border-radius: var(--radius-sm); padding: 0 4px; background: var(--paper-panel);
}

/* ============================ 6. ВЕДОМОСТЬ-ТАБЛИЦА ============================ */
.ledger-wrap {
  border: 1px solid var(--frame);
  border-radius: var(--radius);
  overflow: auto;
  background: var(--paper-raised);
}
table.ledger { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.ledger caption { text-align: left; padding: var(--sp-3) var(--sp-4) 0; color: var(--ink-quiet); font-size: var(--fs-xs); }
.ledger thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--paper-panel);
  border-bottom: 1px solid var(--frame);
  font-family: var(--font-narrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: var(--fs-xs);
  color: var(--ink-quiet);
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  white-space: nowrap;
}
.ledger thead th.num, .ledger td.num { text-align: right; }
.ledger tbody td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.ledger tbody tr:last-child td { border-bottom: 0; }
.ledger tbody tr:hover td { background: var(--paper-panel); }
.ledger td.num, .ledger .regno { font-variant-numeric: tabular-nums; }
.ledger .regno { font-family: var(--font-narrow); font-weight: 700; letter-spacing: 0.02em; }
.ledger tr.is-red td { color: var(--ink-red); }
.ledger tr.is-red td.num, .ledger tr.is-red .regno { font-weight: 700; }
.ledger tr.is-blue td.entered { color: var(--ink-blue); }
.ledger tr.is-stamp .status { color: var(--stamp); font-weight: 600; }
.ledger tr.is-done td { color: var(--ink-quiet); }
.ledger tr.is-done .task-title { text-decoration: line-through; text-decoration-color: var(--ink-blue); }
.ledger tfoot td {
  border-top: 3px double var(--rule-strong);
  font-weight: 700;
  padding: var(--sp-2) var(--sp-3);
}
.ledger .row-toggle {
  border: 0; background: none; cursor: pointer; color: var(--ink-quiet);
  padding: 2px; display: inline-flex; border-radius: var(--radius-sm);
}
.ledger .row-toggle svg { width: 14px; height: 14px; transition: transform var(--dur) var(--ease-out); }
.ledger tr[data-open="true"] .row-toggle svg { transform: rotate(90deg); }
.ledger .row-detail td { background: var(--paper-panel); padding: var(--sp-3) var(--sp-4); }
.ledger .row-detail[hidden] { display: none; }

/* Телефон: строки складываются в записи с подписями data-label */
@media (max-width: 720px) {
  table.ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.ledger, table.ledger tbody, table.ledger tr, table.ledger td { display: block; width: 100%; }
  table.ledger tr { border-bottom: 1px solid var(--frame); padding: var(--sp-3) var(--sp-4); }
  /* Текстовая ячейка — подпись над значением. Раскладка строкой (flex) здесь не годится:
     в ячейке бывают текст, <br>, метки и кнопки, и каждый кусок становился отдельной
     колонкой — записи раздувались пустотой и выталкивали страницу вбок. */
  table.ledger td { border: 0; padding: 3px 0; display: block; overflow-wrap: anywhere; }
  table.ledger td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 1px;
    font-family: var(--font-narrow); text-transform: uppercase; letter-spacing: 0.03em;
    font-size: var(--fs-xs); color: var(--ink-quiet);
  }
  /* Число — одна строка «подпись … значение», как в печатной форме. */
  table.ledger td.num { display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--sp-3); }
  table.ledger td.num[data-label]::before { display: inline; margin-bottom: 0; flex: none; }
  table.ledger tfoot td { border-top: 2px double var(--rule-strong); }
}

/* ======================= 7. ЧЕРНИЛЬНЫЕ МЕТКИ И ШТАМП ======================= */
.ink { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 560; }
.ink::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ink.is-print { color: var(--ink-quiet); }
.ink.is-blue { color: var(--ink-blue); }
.ink.is-red { color: var(--ink-red); }
.ink.is-stamp { color: var(--stamp); }

.stamp {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-narrow); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; font-size: var(--fs-xs);
  color: var(--stamp); border: 1.5px solid var(--stamp); border-radius: var(--radius-sm);
  padding: 2px 7px; transform: rotate(-2deg);
}

/* ============================== 8. КНОПКИ ============================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--radius); border: 1px solid transparent;
  font-size: var(--fs-sm); font-weight: 560; line-height: 1;
  padding: 8px 14px; cursor: pointer;
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
  text-decoration: none;
}
.btn svg { width: 14px; height: 14px; }
.btn-primary { background: var(--ink-blue); color: var(--paper); }
.btn-primary:hover { opacity: 0.88; }
.btn-primary:active { opacity: 0.78; }
.btn-secondary { background: transparent; color: var(--ink-print); border-color: var(--frame); }
.btn-secondary:hover { background: var(--paper-panel); }
.btn-quiet { background: transparent; color: var(--ink-quiet); }
.btn-quiet:hover { background: var(--paper-panel); color: var(--ink-print); }
.btn-danger { background: transparent; color: var(--ink-red); border-color: var(--ink-red); }
.btn-danger:hover { background: var(--ink-red-soft); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-sm { padding: 5px 10px; font-size: var(--fs-xs); }
.btn-icon { padding: 7px; }

/* ============================ 9. ПОЛЯ ФОРМ ============================ */
.field { display: flex; flex-direction: column; gap: 4px; }
.field label {
  font-family: var(--font-narrow); font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--ink-quiet);
}
.field input[type="text"], .field input[type="number"], .field input[type="date"],
.field input[type="datetime-local"], .field input[type="search"], .field select, .field textarea {
  border: 1px solid var(--frame); border-radius: var(--radius); background: var(--paper-raised);
  color: var(--ink-print); padding: 7px 9px; font-size: var(--fs-sm); width: 100%;
}
.field textarea { resize: vertical; min-height: 4.5em; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-quiet); opacity: 0.8; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-offset: 0; }
.field input:disabled, .field select:disabled, .field textarea:disabled {
  background: var(--paper-panel); color: var(--ink-quiet); opacity: 0.7; cursor: not-allowed;
}
.field-hint { font-size: var(--fs-xs); color: var(--ink-quiet); }
.field-error { font-size: var(--fs-xs); color: var(--ink-red); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--ink-red); }

.check { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); cursor: pointer; }
.check input[type="checkbox"] {
  appearance: none; width: 16px; height: 16px; border: 1.5px solid var(--frame);
  border-radius: var(--radius-sm); background: var(--paper-raised); cursor: pointer; position: relative; flex: none;
}
.check input[type="checkbox"]:checked { background: var(--ink-blue); border-color: var(--ink-blue); }
.check input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
  border: solid var(--paper); border-width: 0 2px 2px 0; transform: rotate(40deg);
}
.check input[type="radio"] {
  appearance: none; width: 16px; height: 16px; border: 1.5px solid var(--frame);
  border-radius: 50%; background: var(--paper-raised); cursor: pointer; position: relative; flex: none;
}
.check input[type="radio"]:checked { border-color: var(--ink-blue); }
.check input[type="radio"]:checked::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--ink-blue);
}
.check input:disabled { opacity: 0.5; cursor: not-allowed; }
.check:has(input:disabled) { color: var(--ink-quiet); cursor: not-allowed; }

.quick-add {
  display: flex; gap: var(--sp-2); align-items: center;
  padding: var(--sp-3); border: 1px dashed var(--frame); border-radius: var(--radius);
  background: var(--paper-raised);
}
.quick-add input { border: 0; background: none; flex: 1; font-size: var(--fs-sm); padding: 4px 0; }
.quick-add input:focus-visible { outline: none; }

/* ============================== 10. ВКЛАДКИ ============================== */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--rule); padding: 0 var(--sp-6); overflow-x: auto; }
.tabs a {
  padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); color: var(--ink-quiet);
  text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap;
  margin-bottom: -1px;
}
.tabs a:hover { color: var(--ink-print); }
.tabs a[aria-current="page"] { color: var(--ink-blue); border-bottom-color: var(--ink-blue); font-weight: 560; }

/* ========================= 11. ВЫДВИЖНАЯ ПАНЕЛЬ ========================= */
.panel {
  padding: 0; border: 0; margin: 0; position: fixed; inset: 0 0 0 auto;
  width: min(480px, 100vw); height: 100vh; max-height: 100vh;
  background: var(--paper-raised); border-left: 1px solid var(--frame);
  box-shadow: -8px 0 24px oklch(0.2 0.02 264 / 0.14);
  animation: panel-in var(--dur) var(--ease-out);
}
.panel::backdrop { background: oklch(0.2 0.02 264 / 0.32); animation: fade-in var(--dur) var(--ease-out); }
@keyframes panel-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--rule);
}
.panel-head h2 { font-size: var(--fs-md); }
.panel-body { padding: var(--sp-5); overflow-y: auto; height: calc(100vh - 61px); }
@media (max-width: 720px) {
  .panel { width: 100vw; }
}

/* ============================== 12. ФЛЭШ ============================== */
.flash {
  margin: var(--sp-3) var(--sp-6) 0; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--stamp); border-radius: var(--radius); color: var(--stamp);
  background: var(--stamp-soft); font-size: var(--fs-sm);
}

/* ============================== 13. ПУСТО ============================== */
.empty {
  padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--ink-quiet);
  border: 1px dashed var(--frame); border-radius: var(--radius); font-size: var(--fs-sm);
}
.empty strong { display: block; color: var(--ink-print); font-size: var(--fs-base); margin-bottom: 4px; }

/* ============================= 14. СКЕЛЕТОН ============================= */
.skeleton {
  background: linear-gradient(90deg, var(--paper-panel) 25%, var(--paper-raised) 37%, var(--paper-panel) 63%);
  background-size: 400% 100%; animation: skeleton-wave 1.4s ease infinite;
  border-radius: var(--radius-sm); height: 1em;
}
@keyframes skeleton-wave { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ============================== 15. ГРАФИКИ ============================== */
/* crm/charts.py рисует SVG с фиксированными width/height и совпадающим viewBox —
   здесь превращаем их в отзывчивые: вписываются в колонку/телефон/печатную полосу A4,
   а не толкают страницу вбок (горизонтальный вылет +173px/1440 и +262px/390 на /ui,
   craft-floor «Type»: считать реальную композицию на каждой ширине, а не один скриншот). */
svg[data-chart] { display: block; width: 100%; height: auto; max-width: 100%; }

/* ========================= 16. ПОДСКАЗКА ГРАФИКА ========================= */
.chart-tip {
  position: fixed; pointer-events: none; z-index: 60;
  background: var(--ink-print); color: var(--paper);
  border-radius: var(--radius-sm); padding: 6px 9px; font-size: var(--fs-xs);
  transform: translate(-50%, -100%); white-space: nowrap; opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}
.chart-tip.is-visible { opacity: 1; }

/* ============================ 17. ПАЛИТРА ⌘K ============================ */
.palette { padding: 0; border: 0; border-radius: var(--radius); width: min(560px, 92vw); max-height: 70vh; background: var(--paper-raised); box-shadow: 0 16px 40px oklch(0.2 0.02 264 / 0.2); }
.palette::backdrop { background: oklch(0.2 0.02 264 / 0.35); }
.palette-input {
  width: 100%; border: 0; border-bottom: 1px solid var(--rule); background: none;
  padding: var(--sp-4); font-size: var(--fs-md); color: var(--ink-print);
}
.palette-input:focus-visible { outline: none; }
.palette-list { list-style: none; margin: 0; padding: var(--sp-2); max-height: 50vh; overflow-y: auto; }
.palette-item { display: flex; align-items: baseline; gap: var(--sp-2); padding: 8px var(--sp-3); border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; color: var(--ink-print); }
.palette-item[aria-selected="true"] { background: var(--ink-blue-soft); }
.palette-kind { font-size: var(--fs-xs); color: var(--ink-quiet); font-family: var(--font-narrow); text-transform: uppercase; }
.palette-sub { font-size: var(--fs-xs); color: var(--ink-quiet); margin-left: auto; }
.palette-empty { padding: var(--sp-4); color: var(--ink-quiet); font-size: var(--fs-sm); text-align: center; }

/* ============================== 18. КАНБАН ============================== */
.kanban { display: flex; gap: var(--sp-3); overflow-x: auto; padding-bottom: var(--sp-2); }
.kanban-col { flex: 0 0 260px; background: var(--paper-panel); border: 1px solid var(--rule); border-radius: var(--radius); display: flex; flex-direction: column; }
.kanban-col.is-drop { border-color: var(--ink-blue); background: var(--ink-blue-soft); }
.kanban-col-head { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--rule); }
.kanban-col-title { font-family: var(--font-narrow); font-weight: 700; text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: 0.03em; }
.kanban-col-sum { font-size: var(--fs-xs); color: var(--ink-quiet); font-variant-numeric: tabular-nums; }
.kanban-col-body { padding: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-2); min-height: 40px; }
.kanban-card {
  background: var(--paper-raised); border: 1px solid var(--frame); border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); cursor: grab;
  transition: border-color var(--dur) var(--ease-out);
}
.kanban-card:hover { border-color: var(--ink-blue); }
.kanban-card:active { cursor: grabbing; }
.kanban-card .regno { display: block; font-family: var(--font-narrow); font-size: var(--fs-xs); color: var(--ink-quiet); }
.kanban-card .sum { font-variant-numeric: tabular-nums; font-weight: 560; }
.kanban-card .next-step.is-red { color: var(--ink-red); font-size: var(--fs-xs); }

/* ============================== 19. КАЛЕНДАРЬ ============================== */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--frame); border-radius: var(--radius); overflow: hidden; }
.cal-dow { font-family: var(--font-narrow); text-transform: uppercase; font-size: var(--fs-xs); color: var(--ink-quiet); text-align: center; padding: var(--sp-1); background: var(--paper-panel); border-bottom: 1px solid var(--rule); }
.cal-day { min-height: 92px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 4px; font-size: var(--fs-xs); }
.cal-day:nth-child(7n) { border-right: 0; }
.cal-day.is-out { color: var(--ink-quiet); background: var(--paper-panel); }
.cal-day.is-today .cal-day-num { color: var(--ink-blue); font-weight: 700; }
.cal-day-num { font-variant-numeric: tabular-nums; }
.cal-dots { display: flex; gap: 3px; margin-top: 3px; flex-wrap: wrap; }
.cal-dot { width: 6px; height: 6px; border-radius: 50%; }
.cal-dot.is-direct { background: var(--ink-blue); }
.cal-dot.is-seo { background: var(--stamp); }
.cal-dot.is-task { background: var(--ink-print); }

/* ========================= 20. ОТМЕТКА ЗАДАЧИ ========================= */
.task-check { position: relative; display: inline-block; }
.task-title.is-struck {
  animation: ink-strike var(--dur) var(--ease-out) forwards;
}
@keyframes ink-strike { from { text-decoration-color: transparent; } to { text-decoration-color: var(--ink-blue); } }

/* ============================== 21. ТОСТ ============================== */
.toast-stack { position: fixed; bottom: var(--sp-4); right: var(--sp-4); z-index: 70; display: flex; flex-direction: column; gap: var(--sp-2); }
.toast {
  background: var(--ink-print); color: var(--paper); border-radius: var(--radius);
  padding: 9px 14px; font-size: var(--fs-sm); box-shadow: 0 8px 20px oklch(0.2 0.02 264 / 0.2);
  animation: toast-in var(--dur) var(--ease-out);
}
.toast.is-out { animation: toast-out var(--dur) var(--ease-out) forwards; }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toast-out { to { transform: translateY(8px); opacity: 0; } }

/* ========================== 22. УТИЛИТЫ / МЕДИА ========================== */
.muted { color: var(--ink-quiet); }
.mono-num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.grid-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--sp-5); }
.stack { display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-5) var(--sp-6) var(--sp-6); }

@media (max-width: 1280px) {
  .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .shell { grid-template-columns: 1fr; }
  .spine { display: none; }
  .bottombar { display: block; }
  .stage { padding-bottom: calc(var(--shell-bottom-h) + var(--sp-4)); }
  .page-head, .tabs, .stack { padding-left: var(--sp-4); padding-right: var(--sp-4); }
}
@media (max-width: 480px) {
  .page-head { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .stack { padding-left: var(--sp-3); padding-right: var(--sp-3); }
}