/* CRM МСТ — дизайн-система. Описание: docs/crm_redesign/DESIGN.md.
   Правило: в компонентах только семантические токены (--bg-*, --text-*, --border-*, --accent…), hex — только в примитивах. */

/* ================= 1. Токены ================= */
:root {
  color-scheme: light;

  /* --- примитивы (hex; рампы построены в OKLCH, контраст пар измерен — см. DESIGN.md) --- */
  --graphite-950: #141a24;
  --graphite-900: #1b2330;
  --graphite-800: #2c3646;
  --graphite-700: #3d4654;
  --slate-600: #34445c;
  --slate-500: #5b6574;
  --slate-400: #858e9c;
  --slate-300: #c3cad4;
  --slate-200: #dde1e6;
  --slate-100: #eceef1;
  --slate-50: #f3f4f6;
  --slate-25: #f8f9fa;
  --white: #ffffff;
  --slate-on-dark: #b4bccb;
  --amber-800: #7a5200;
  --amber-700: #c08400;
  --amber-500: #f5a700;
  --amber-600: #e09600;
  --amber-100: #fdefc8;
  --amber-50: #fff8e6;
  --blue-800: #174684;
  --blue-700: #1f5aa8;
  --blue-200: #c3d5ee;
  --blue-50: #eaf1fb;
  --green-800: #12603b;
  --green-700: #17794a;
  --green-200: #b5dcc4;
  --green-50: #e6f4ec;
  --orange-800: #9a4700;
  --orange-200: #f3cfa5;
  --orange-50: #fff1e0;
  --red-800: #912018;
  --red-700: #b42318;
  --red-200: #f3c1bc;
  --red-50: #fdecea;
  --violet-700: #5b2fae;
  --violet-50: #f0eafb;

  /* --- поверхности --- */
  --bg-page: var(--slate-50);
  --bg-surface: var(--white);
  --bg-sunken: var(--slate-25);
  --bg-hover: var(--slate-100);
  --bg-chrome: var(--graphite-950);

  /* --- текст --- */
  --text: var(--graphite-900);
  --text-2: var(--graphite-700);
  --text-muted: var(--slate-500);
  --text-on-solid: var(--white);
  --text-on-chrome: var(--white);
  --text-on-chrome-muted: var(--slate-on-dark);
  --link: var(--blue-700);
  --link-hover: var(--blue-800);

  /* --- линии --- */
  --border: var(--slate-200);
  --border-strong: var(--slate-300);
  --border-control: var(--slate-400);
  --border-on-chrome: rgba(255, 255, 255, .24);

  /* --- действия --- */
  --primary: var(--graphite-900);
  --primary-hover: var(--graphite-800);
  --accent: var(--amber-500);
  --accent-hover: var(--amber-600);
  --accent-soft: var(--amber-50);
  --accent-line: var(--amber-100);
  --on-accent: var(--graphite-900);
  --focus: var(--blue-700);
  --focus-on-chrome: var(--amber-500);

  /* --- статусы --- */
  --success: var(--green-700);
  --success-hover: var(--green-800);
  --success-bg: var(--green-50);
  --success-line: var(--green-200);
  --warning: var(--orange-800);
  --warning-bg: var(--orange-50);
  --warning-line: var(--orange-200);
  --danger: var(--red-700);
  --danger-hover: var(--red-800);
  --danger-bg: var(--red-50);
  --danger-line: var(--red-200);
  --info-bg: var(--blue-50);
  --info-line: var(--blue-200);
  --neutral-bg: var(--slate-100);
  --neutral-text: var(--graphite-700);
  --demo: var(--violet-700);
  --demo-bg: var(--violet-50);
  --data-bar: var(--slate-600);
  /* «перезвонить» — рабочий шаг, не проблема: тёплый жёлтый, родственный акценту «позвонить» */
  --callback: var(--amber-800);
  --callback-bg: var(--amber-100);
  /* «стоп» — не набирать номер (клиент запретил): графит, самый тяжёлый бейдж */
  --stop: var(--graphite-900);
  --on-stop: var(--white);
  --info: var(--blue-700);

  /* --- графики: каждая серия ≥3:1 к --bg-surface (WCAG 1.4.11); итог = тот же цвет, что бейдж --- */
  --chart-total: var(--slate-400);        /* звонки, 3.3:1 */
  --chart-talked: var(--slate-600);       /* разговор, 9.9:1 */
  --chart-positive: var(--green-700);     /* интерес/перезвон, 5.4:1 */
  --chart-interested: var(--green-700);   /* 5.4:1 */
  --chart-callback: var(--amber-700);     /* 3.2:1 */
  --chart-other: var(--orange-800);       /* требует проверки, 6.4:1 */
  --chart-refused: var(--red-700);        /* 6.6:1 */
  --chart-opt_out: var(--graphite-900);   /* 15.8:1 */
  --chart-wrong_number: var(--blue-700);  /* 6.8:1 */
  --chart-voicemail: var(--slate-600);    /* 9.9:1 */
  --chart-no_answer: var(--slate-400);    /* 3.3:1 */
  --chart-pending: var(--slate-500);      /* 5.9:1 */
  --chart-grid: var(--slate-200);
  --chart-text: var(--slate-500);

  /* --- типографика --- */
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-2xs: .6875rem;   /* 11 — цифра в счётчике нижней панели */
  --fs-xs: .75rem;      /* 12 — бейджи, подписи вкладок */
  --fs-sm: .8125rem;    /* 13 — метаданные, подписи полей */
  --fs-md: .9375rem;    /* 15 — основной текст */
  --fs-lg: 1.0625rem;   /* 17 — h2, имя в карточке */
  --fs-xl: 1.25rem;     /* 20 — h1 на телефоне */
  --fs-2xl: 1.5rem;     /* 24 — h1 на десктопе, числа KPI */
  --lh: 1.5;
  --lh-tight: 1.25;

  /* --- отступы (шаг 4px) --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* --- радиусы, тени, размеры --- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;
  --shade: 20, 26, 36;                     /* графит для теней, rgb-триплет */
  --sh-1: 0 1px 2px rgba(var(--shade), .06);
  --sh-tab: 0 1px 2px rgba(var(--shade), .12), 0 0 0 1px rgba(var(--shade), .06);
  --sh-up: 0 -2px 10px rgba(var(--shade), .06);
  --sh-pop: 0 10px 28px rgba(var(--shade), .18), 0 2px 6px rgba(var(--shade), .08);
  --edge-shade: rgba(var(--shade), .16);   /* тень-подсказка у прокручиваемой таблицы */
  --surface-fade: rgba(255, 255, 255, 0);
  --press-on-accent: rgba(var(--shade), .1);
  --hover-on-chrome: rgba(255, 255, 255, .08);
  --hit: 44px;
  --h-xs: 24px;
  --h-sm: 32px;
  --h-lg: 48px;
  --h-row: 56px;
  --control-h: 40px;
  --header-h: 52px;
  --tabbar-h: 60px;
  --page-max: 75rem;
  --page-narrow: 55rem;
  --gutter: var(--sp-6);
  --ease-out: cubic-bezier(.2, 0, 0, 1);
}

/* Телефонная раскладка (нижняя панель) — до 720px: с 721px в шапку помещаются 4 раздела + «Ещё» */
@media (max-width: 720px) {
  :root { --control-h: var(--hit); --gutter: var(--sp-4); --header-h: 48px; }
}

/* ================= 2. База ================= */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}
/* Без overflow-x: hidden на html/body: он делал body контейнером прокрутки, и sticky у шапки и плашки лида не работал.
   Горизонтального скролла нет за счёт самих компонентов (min-width: 0, переносы); проверено на 320/390/1280. */
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: var(--lh);
  background: var(--bg-page);
  color: var(--text);
}
main { overflow-wrap: anywhere; }
.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--sp-6) var(--gutter) var(--sp-10);
}
.page.narrow { max-width: var(--page-narrow); }

/* Ссылка отличается от текста не только цветом (WCAG 1.4.1): подчёркивание всегда, приглушённое; при наведении — полное.
   Без подчёркивания — только компоненты, которые сами выглядят как элементы управления (кнопки, строки списков, навигация). */
a {
  color: var(--link); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: from-font;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
@media (hover: hover) { a:hover { color: var(--link-hover); text-decoration-color: currentColor; } }
.btn, .brand, nav.top a, nav.bottom a, .tabs a, .list-row, .row-link, .kpi, .t-name, .back a, .skip,
.lead-banner a, a.icon-btn, nav.bottom .menu a { text-decoration: none; }
@media (hover: hover) { .t-name:hover, .back a:hover { text-decoration: underline; } }

h1, h2, h3 { line-height: var(--lh-tight); text-wrap: balance; color: var(--text); }
h1 { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.015em; margin: 0 0 var(--sp-4); }
h2 { font-size: var(--fs-lg); font-weight: 650; margin: var(--sp-6) 0 var(--sp-3); }
h3 { font-size: var(--fs-md); font-weight: 650; margin: var(--sp-5) 0 var(--sp-2); }
h1 .badge, h2 .badge { vertical-align: .15em; }
h1 .small { font-weight: 400; }
p { margin: 0 0 var(--sp-3); text-wrap: pretty; }
b, strong { font-weight: 650; }
code { font-family: var(--font-mono); font-size: .9em; background: var(--bg-hover); padding: 1px var(--sp-1); border-radius: var(--r-xs); }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: var(--fs-sm); background: var(--bg-sunken); padding: var(--sp-2); border-radius: var(--r-sm); }
[hidden] { display: none !important; }

.muted { color: var(--text-muted); }
.small { font-size: var(--fs-sm); }
.nowrap { white-space: nowrap; }
.num, time, .kpi b, td, .badge, .pager, .counter { font-variant-numeric: tabular-nums; }
.lead { color: var(--text-muted); margin: calc(var(--sp-2) * -1) 0 var(--sp-4); }
.back { margin: 0 0 var(--sp-2); }
.back a { display: inline-flex; align-items: center; min-height: var(--hit); font-weight: 500; }
.warn-text { color: var(--warning); }
.claim { color: var(--danger); }
.wait-bad { color: var(--danger); font-weight: 700; }
.wait-ok { color: var(--success); font-weight: 650; }
.empty { color: var(--text-muted); padding: var(--sp-4); margin: 0; }
.card-foot { margin-top: var(--sp-3); }
.pre { white-space: pre-wrap; }
.stack-sm > * + * { margin-top: var(--sp-2); }
.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;
}

/* фокус — только с клавиатуры, кольцо 2px с зазором (контраст 6.8:1 к белому) */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; border-color: var(--focus); }

.skip {
  position: absolute; z-index: 100; inset-inline-start: var(--sp-2); top: -200px;
  background: var(--bg-surface); color: var(--text); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md); box-shadow: var(--sh-pop); font-weight: 650;
}
.skip:focus { top: var(--sp-2); }
/* цель skip-link — не элемент управления: рамка на всю страницу не нужна */
#content:focus { outline: none; }

/* ================= 3. Шапка (десктоп) ================= */
header.top-bar { background: var(--bg-chrome); color: var(--text-on-chrome); position: sticky; top: 0; z-index: 20; }
header.top-bar .in {
  max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: var(--sp-1); min-height: var(--header-h);
  overflow-x: auto; white-space: nowrap; scrollbar-width: none;
}
header.top-bar :focus-visible { outline-color: var(--focus-on-chrome); }
.brand {
  display: inline-flex; align-items: center; gap: var(--sp-2); margin-inline-end: var(--sp-4);
  color: var(--text-on-chrome); font-weight: 650; min-height: var(--hit); text-decoration: none;
}
.brand:hover { color: var(--text-on-chrome); text-decoration: none; }
/* «Табличка» МСТ — единственный яркий элемент шапки: жёлтый цвет спецтехники на графите */
.plate {
  background: var(--accent); color: var(--on-accent); font-weight: 800; letter-spacing: .04em;
  padding: 2px 7px; border-radius: var(--r-xs); line-height: 1.3;
}
nav.top { display: flex; align-self: stretch; }
nav.top a {
  position: relative; display: inline-flex; align-items: center; padding: 0 var(--sp-3);
  color: var(--text-on-chrome-muted); font-weight: 500; text-decoration: none;
  transition: color .15s;
}
nav.top a::after {
  content: ""; position: absolute; inset-inline: var(--sp-3); bottom: 0; height: 3px;
  border-radius: var(--r-xs) var(--r-xs) 0 0; background: transparent;
}
nav.top a.on { color: var(--text-on-chrome); }
nav.top a.on::after { background: var(--accent); }
@media (hover: hover) { nav.top a:hover { color: var(--text-on-chrome); text-decoration: none; } }
header.top-bar .me { color: var(--text-on-chrome-muted); font-size: var(--fs-sm); margin-inline-start: auto; padding-inline: var(--sp-3) var(--sp-2); }
header.top-bar form.logout { margin: 0; }
header.top-bar form.logout button {
  background: transparent; color: var(--text-on-chrome); border: 1px solid var(--border-on-chrome);
  min-height: var(--h-sm); padding: var(--sp-1) var(--sp-3); font-weight: 500; font-size: var(--fs-sm);
}
@media (hover: hover) { header.top-bar form.logout button:hover { background: var(--hover-on-chrome); } }
@media (max-width: 1100px) { header.top-bar .me { display: none; } header.top-bar form.logout { margin-inline-start: auto; } }

/* 721–1099px: восемь разделов администратора не помещаются в строку — меню переносится на вторую строку шапки
   (раньше пункты молча уезжали за край со скрытой полосой прокрутки). Ссылки не дублируются. */
@media (min-width: 721px) and (max-width: 1099px) {
  :root:has(body.is-admin) { --header-h: 96px; }   /* две строки по 44px + поля: от неё считаются плашка лида и scroll-padding */
  header.top-bar .in { overflow: visible; white-space: normal; padding-block: var(--sp-1); }
  nav.top { flex: 1 1 0; min-width: 0; flex-wrap: wrap; }
  nav.top a { padding: 0 10px; min-height: var(--hit); }
}

/* плашка «новый горячий лид» — внимание: жёлтый + полоса-разметка как на технике */
.lead-banner {
  position: sticky; top: var(--header-h); z-index: 19;
  display: flex; gap: var(--sp-2); align-items: center;
  padding: var(--sp-1) var(--gutter) calc(var(--sp-1) + 4px);
  background: repeating-linear-gradient(-45deg, var(--on-accent) 0 8px, var(--accent) 8px 16px) bottom / 100% 4px no-repeat, var(--accent);
  color: var(--on-accent); box-shadow: var(--sh-pop);
}
.lead-banner a { color: var(--on-accent); font-weight: 700; flex: 1; min-height: var(--hit); display: inline-flex; align-items: center; }
.lead-banner a:hover { color: var(--on-accent); }
.lead-banner button {
  background: transparent; border: 0; color: var(--on-accent); min-width: var(--hit); min-height: var(--hit);
  padding: 0; font-size: var(--fs-lg);
}
@media (hover: hover) { .lead-banner button:hover { background: var(--press-on-accent); } }

/* ================= 4. Кнопки ================= */
button, .btn {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--control-h); padding: var(--sp-2) var(--sp-4);
  font: inherit; font-size: var(--fs-md); font-weight: 600; line-height: var(--lh-tight); text-align: center;
  border: 1px solid var(--primary); border-radius: var(--r-md);
  background: var(--primary); color: var(--text-on-solid);
  cursor: pointer; text-decoration: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition-property: background-color, border-color, color, box-shadow, scale;
  transition-duration: .15s; transition-timing-function: ease-out;
}
.btn:hover { text-decoration: none; color: var(--text-on-solid); }
@media (hover: hover) { button:hover, .btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); } }
@media (prefers-reduced-motion: no-preference) {
  button:not(:disabled):active, .btn:active { scale: .96; }
}
button:disabled { opacity: .55; cursor: not-allowed; }

/* вторичная */
button.sec, .btn.sec { background: var(--bg-surface); color: var(--text); border-color: var(--border-strong); }
.btn.sec:hover { color: var(--text); }
@media (hover: hover) { button.sec:hover, .btn.sec:hover { background: var(--bg-hover); border-color: var(--border-control); } }
/* опасная */
button.danger, .btn.danger { background: var(--danger); border-color: var(--danger); color: var(--text-on-solid); }
@media (hover: hover) { button.danger:hover, .btn.danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); } }
/* успех: «Дозвонился — заявка» */
button.ok { background: var(--success); border-color: var(--success); color: var(--text-on-solid); }
@media (hover: hover) { button.ok:hover { background: var(--success-hover); border-color: var(--success-hover); } }
/* главное действие CRM — позвонить: акцентный жёлтый, графитовый текст (7.8:1) */
.btn.call { background: var(--accent); border-color: var(--accent-hover); color: var(--on-accent); }
.btn.call:hover { color: var(--on-accent); }
@media (hover: hover) { .btn.call:hover { background: var(--accent-hover); border-color: var(--accent-hover); } }
/* размеры */
button.small, .btn.small { min-height: var(--h-sm); padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); }
/* большие кнопки переносят длинную подпись, а не вылезают за край (WCAG 1.4.10 на 320px и крупном шрифте) */
.btn.big, button.big { min-height: var(--h-lg); padding: var(--sp-2) var(--sp-4); font-size: 1rem; text-wrap: balance; }
/* кнопка-ссылка: без внутренних отступов, чтобы текст стоял по краю колонки (перебивает button.small) */
.linkbtn {
  background: none; border: 0; color: var(--link); padding: 0; min-height: 0; font-weight: 500;
  border-radius: var(--r-sm);
}
button.linkbtn, button.linkbtn.small { padding-inline: 0; background: none; border: 0; }
@media (hover: hover) { .linkbtn:hover, button.linkbtn:hover { background: none; color: var(--link-hover); text-decoration: underline; } }
@media (prefers-reduced-motion: no-preference) { .linkbtn:not(:disabled):active { scale: 1; } }
.copy-brief { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--h-sm); font-size: var(--fs-sm); }
/* квадратная кнопка-иконка 44×44: копирование брифа, звонок из списка контактов */
.icon-btn { min-width: var(--hit); min-height: var(--hit); padding: 0 var(--sp-3); gap: var(--sp-2); flex: none; }
.icon-btn .ico { width: 20px; height: 20px; }
button.icon-btn.linkbtn { padding-inline: var(--sp-3); margin-inline-end: calc(var(--sp-3) * -1); }
.ico { width: 1.15em; height: 1.15em; flex: none; }
.ico-lead { margin-inline-end: 2px; vertical-align: -.2em; }
/* шеврон раскрытия — один на весь интерфейс: CSS-уголок */
.chev {
  display: inline-block; flex: none; width: 8px; height: 8px; margin-inline: var(--sp-1);
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  rotate: 45deg; translate: 0 -2px; transition: rotate .15s var(--ease-out), translate .15s var(--ease-out);
}
details[open] > summary .chev { rotate: 225deg; translate: 0 2px; }
form.inline { display: inline; }

/* ================= 5. Поля ================= */
input, select, textarea {
  font: inherit; font-size: var(--fs-md); color: var(--text);
  background: var(--bg-surface); border: 1px solid var(--border-control); border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3); min-height: var(--control-h); max-width: 100%;
  transition: border-color .15s;
}
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
select {
  -webkit-appearance: none; appearance: none; padding-inline-end: 34px; cursor: pointer;
  background: var(--bg-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%233d4654' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center;
}
select:disabled, input:disabled { background-color: var(--bg-hover); color: var(--text-muted); cursor: not-allowed; }
textarea { width: 100%; min-height: 88px; line-height: var(--lh); resize: vertical; display: block; }
input[type=checkbox], input[type=radio] {
  width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; accent-color: var(--primary); flex: none; cursor: pointer;
}
input[type=file] { padding: 6px; width: 100%; }
input[type=file]::file-selector-button {
  font: inherit; font-size: var(--fs-sm); font-weight: 600; margin-inline-end: var(--sp-3);
  border: 1px solid var(--border-strong); background: var(--bg-hover); color: var(--text);
  border-radius: var(--r-sm); padding: 6px var(--sp-3); cursor: pointer;
}

/* подписи полей: текст над полем */
.form-grid, .filters { display: grid; gap: var(--sp-3) var(--sp-4); align-items: end; }
.form-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.filters { grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr)); margin-bottom: var(--sp-4); }
@media (min-width: 721px) { .filters { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); } }
.form-grid label, .filters label {
  display: flex; flex-direction: column; gap: var(--sp-1);
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); min-width: 0;
}
.form-grid input:not([type=checkbox]):not([type=radio]), .form-grid select,
.filters input:not([type=checkbox]), .filters select, .form-grid button, .filters button { width: 100%; }
.form-grid label:has(input[type=checkbox]), .filters label:has(input[type=checkbox]), label.check {
  flex-direction: row; align-items: center; font-weight: 400; color: var(--text); min-height: var(--control-h);
}
.form-grid label > span, .filters label > span { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; }
label.check { grid-column: 1 / -1; }
label.small { display: inline-flex; flex-direction: column; gap: var(--sp-1); font-weight: 600; color: var(--text-2); }
label.small:has(input[type=checkbox]) { flex-direction: row; align-items: center; gap: var(--sp-2); font-weight: 400; color: var(--text); min-height: var(--hit); }
.fields-top { margin-top: var(--sp-3); }
.form-grid + p, .form-grid + .small { margin-top: var(--sp-2); }
fieldset.days { border: 0; padding: 0; margin: var(--sp-3) 0 0; min-width: 0; }
fieldset.days legend { float: left; padding: 0; margin-inline-end: var(--sp-2); line-height: var(--hit); font-weight: 600; color: var(--text-2); }
.days { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); align-items: center; }
.days label { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--hit); padding-inline-end: var(--sp-2); cursor: pointer; }
.field-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.field-row input:not([type=checkbox]), .field-row select { flex: 1 1 12rem; }

/* поиск */
.search { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.search input {
  flex: 1; min-width: 0; min-height: var(--hit); font-size: 1rem; padding-inline-start: 40px;
  background: var(--bg-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%235b6574' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M12.5 12.5L17 17'/%3E%3C/svg%3E") no-repeat 13px center;
}
.search button { min-height: var(--hit); }
.contacts-filter .search { margin-bottom: var(--sp-1); }

/* ================= 6. Поверхности ================= */
.card {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-5); margin-bottom: var(--sp-4); box-shadow: var(--sh-1);
}
.card > h2:first-child, .card > h3:first-child, .card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
/* в формах-карточках первыми идут скрытые поля (CSRF), заголовок за ними — тоже «первый» */
.card > input[type=hidden]:first-child ~ h2:first-of-type { margin-top: 0; }
.mt { margin-top: var(--sp-3); }
.grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); margin-bottom: var(--sp-4); }
.grid > .card { margin-bottom: 0; min-width: 0; }

/* раскрывающиеся блоки: единый шеврон */
details > summary { cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details.card > summary, details.later > summary, .filters-box > summary {
  list-style: none; display: flex; align-items: center; gap: var(--sp-2); min-height: var(--hit);
}
details.card > summary::after, details.later > summary::after, .filters-box > summary::after, .chart-data > summary::after {
  content: ""; flex: none; width: 8px; height: 8px; margin-inline: var(--sp-1);
  border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
  rotate: 45deg; translate: 0 -2px; transition: rotate .15s var(--ease-out);
}
details.card > summary::after, details.later > summary::after { margin-inline-start: auto; }
details[open].card > summary::after, details[open].later > summary::after, .filters-box[open] > summary::after, .chart-data[open] > summary::after { rotate: 225deg; translate: 0 2px; }
.chart-data > summary::after { border-color: var(--link); }
details.card { padding-block: var(--sp-2); }
details.card > summary { margin-inline: calc(var(--sp-5) * -1); padding-inline: var(--sp-5); border-radius: var(--r-lg); font-weight: 650; }
details[open].card { padding-bottom: var(--sp-5); }
@media (hover: hover) { details.card > summary:hover { background: var(--bg-sunken); } }

/* ================= 7. Алерты ================= */
.msg, .err, .warnbox, .stale {
  border: 1px solid; border-inline-start-width: 4px; border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-4); color: var(--text);
}
.msg, .stale { background: var(--info-bg); border-color: var(--info-line); border-inline-start-color: var(--focus); }
.err { background: var(--danger-bg); border-color: var(--danger-line); border-inline-start-color: var(--danger); }
.warnbox { background: var(--warning-bg); border-color: var(--warning-line); border-inline-start-color: var(--warning); }
.err.loud { font-weight: 600; border-width: 2px; border-inline-start-width: 6px; border-color: var(--danger); }
.card.warnbox { border-inline-start-width: 4px; }
.stale { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); padding-block: var(--sp-1); }
.stale .linkbtn { min-height: var(--hit); font-weight: 650; }
.flash {
  background: var(--info-bg); border: 1px solid var(--info-line); border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); font-size: var(--fs-sm);
}

/* ================= 8. Бейджи ================= */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1); padding: 1px var(--sp-2); border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.5; max-width: 100%;
  background: var(--neutral-bg); color: var(--neutral-text);
}
/* короткие бейджи итогов в строках не переносим; длинные (статусы, предупреждения) переносятся, а не вылезают */
.row-link > .badge, .t-badges .badge, td > .badge:only-child, h1 .badge, h2 .badge, .tabs .badge { white-space: nowrap; }
@media (min-width: 380px) { .lr-side > .badge { white-space: nowrap; } }   /* на 320px «Требует проверки» переносится */
.badge .ico { width: 1.1em; height: 1.1em; }
/* Итог / статус → роль (одна категория = один цвет в бейджах, карточках и графиках; см. DESIGN.md):
   успех — интерес, заявка; перезвон — «Перезвонить»; предупреждение — «Требует проверки»;
   опасность — отказ; стоп — «Не звонить»; инфо — ошибочный номер; нейтральный — недозвон, автоответчик, новые, в работе */
.b-interested, .b-won, .b-ok { background: var(--success-bg); color: var(--success); }
.b-callback { background: var(--callback-bg); color: var(--callback); }
.b-other, .b-warn { background: var(--warning-bg); color: var(--warning); }
.b-refused, .b-bad { background: var(--danger-bg); color: var(--danger); }
.b-opt_out, .b-do_not_call { background: var(--stop); color: var(--on-stop); }
.b-wrong_number { background: var(--info-bg); color: var(--info); }
.b-demo { background: var(--demo-bg); color: var(--demo); }

/* ================= 9. Счётчики (KPI) ================= */
.kpis { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); margin-bottom: var(--sp-5); }
.kpi {
  display: block; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4); color: inherit; text-decoration: none; box-shadow: var(--sh-1); min-width: 0;
}
.kpi b { display: block; font-size: var(--fs-2xl); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.kpi span { display: block; margin-top: 2px; color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.35; }
a.kpi:hover { text-decoration: none; color: inherit; }
@media (hover: hover) { a.kpi:hover { border-color: var(--border-control); } }
.kpi-hot { border-color: var(--accent-hover); box-shadow: inset 4px 0 0 var(--accent), var(--sh-1); background: var(--accent-soft); }
.kpi-warn { background: var(--warning-bg); border-color: var(--warning-line); }
.kpi-warn span { color: var(--text-2); }
.card .kpis { margin-bottom: var(--sp-4); }
.card .kpi { box-shadow: none; background: var(--bg-sunken); }

/* ================= 10. Таблицы ================= */
.tbl {
  overflow-x: auto; overscroll-behavior-x: contain; margin-bottom: var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-1);
  /* тени на краях — подсказка, что таблицу можно прокрутить вбок */
  background:
    linear-gradient(to right, var(--bg-surface) 30%, var(--surface-fade)) left / 32px 100% no-repeat local,
    linear-gradient(to left, var(--bg-surface) 30%, var(--surface-fade)) right / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--edge-shade), transparent) left / 10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--edge-shade), transparent) right / 10px 100% no-repeat scroll,
    var(--bg-surface);
}
.card .tbl { box-shadow: none; }
/* таблица по ширине содержимого (аналитика): без дыр на 1200px, на телефоне — прокрутка внутри рамки */
.tbl.fit { width: fit-content; max-width: 100%; }
.tbl.fit table { width: auto; }
th.num, td.num { text-align: end; }
.tbl a:focus-visible { outline-offset: 0; }
/* в таблице переносим только по пробелам: иначе overflow-wrap:anywhere от main сжимает колонку до одной буквы */
table { width: 100%; border-collapse: collapse; overflow-wrap: normal; }
td:first-child { min-width: 7.5rem; }
th, td { text-align: start; padding: 10px var(--sp-3); border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); white-space: nowrap; background: var(--bg-sunken); }
tbody tr:last-child td { border-bottom: 0; }
td:first-child, th:first-child { padding-inline-start: var(--sp-4); }
td:last-child, th:last-child { padding-inline-end: var(--sp-4); }
@media (hover: hover) { tbody tr:hover td { background: var(--bg-sunken); } }
tr.overdue td { background: var(--danger-bg); }

/* ================= 11. Списки ================= */
.list {
  display: flex; flex-direction: column; margin-bottom: var(--sp-4);
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); overflow: hidden;
}
.list-row {
  display: flex; gap: var(--sp-3); align-items: center; justify-content: space-between;
  padding: var(--sp-3) var(--sp-4); min-height: var(--h-row); color: inherit; text-decoration: none;
  border-top: 1px solid var(--border); transition: background-color .15s;
}
.list > .list-row:first-child { border-top: 0; }
/* строка во всю ширину списка с overflow: hidden — кольцо фокуса рисуем внутри, иначе его края обрезаются */
a.list-row:focus-visible, .row-link:focus-visible { outline-offset: -2px; border-radius: var(--r-md); }
a.list-row:hover { text-decoration: none; color: inherit; }
@media (hover: hover) { a.list-row:hover { background: var(--bg-sunken); } }
.lr-main { min-width: 0; flex: 1; }
.lr-main > b:first-child, .lr-main > .t-name:first-child { margin-inline-end: 4px; }
.lr-main .small { margin-top: 2px; }
.lr-side { text-align: end; flex-shrink: 0; max-width: 45%; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.card .list { border: 0; box-shadow: none; border-radius: 0; background: none; margin-bottom: 0; overflow: visible; }
.card .list-row { padding-inline: 0; }
/* контакты: номер — строкой под именем, звонок — компактная вторичная кнопка (жёлтый остаётся для главного) */
.contact-row .phone { font-variant-numeric: tabular-nums; color: var(--text); }
.contact-row .call-label { display: none; }
@media (min-width: 721px) { .contact-row .call-label { display: inline; } }

/* строки «время · кто · итог» на главной и в истории контакта */
.row-link {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-3); align-items: center;
  padding: 10px var(--sp-5); margin-inline: calc(var(--sp-5) * -1); min-height: var(--h-lg);
  border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; font-variant-numeric: tabular-nums;
}
.row-link:hover { text-decoration: none; color: inherit; }
@media (hover: hover) { .row-link:hover { background: var(--bg-sunken); } }
.row-link > :first-child { color: var(--text-2); font-size: var(--fs-sm); }
.row-link > .badge { justify-self: end; }
.row-link:last-child { border-bottom: 0; }

/* вкладки-фильтры: сегментированный переключатель */
.tabs {
  display: inline-flex; gap: 2px; padding: 3px; margin: 0 0 var(--sp-3);
  background: var(--bg-hover); border: 1px solid var(--border); border-radius: calc(var(--r-md) + 3px); max-width: 100%;
}
.tabs a {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--h-sm); padding: 0 var(--sp-4);
  border-radius: var(--r-md); color: var(--text-2); font-weight: 600; font-size: var(--fs-sm); text-decoration: none;
}
.tabs a:hover { text-decoration: none; color: var(--text); }
.tabs a.on { background: var(--bg-surface); color: var(--text); box-shadow: var(--sh-tab); }

/* пейджер */
.pager { margin: var(--sp-4) 0; display: flex; gap: var(--sp-3); align-items: center; justify-content: center; }
.pager span { color: var(--text-muted); font-size: var(--fs-sm); }

/* ================= 12. Главная: задачи ================= */
.dash { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1080px) {
  .dash { grid-template-columns: minmax(0, 1fr) 25rem; }
  /* в узкой колонке: кто — первой строкой, время — второй, итог справа */
  .dash aside .row-link { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who out" "time out"; row-gap: 0; }
  .dash aside .row-link > :nth-child(1) { grid-area: time; font-size: var(--fs-xs); color: var(--text-muted); }
  .dash aside .row-link > :nth-child(2) { grid-area: who; }
  .dash aside .row-link > .badge { grid-area: out; }
}
.dash > aside .card { margin-bottom: 0; }
#lists > h2:first-of-type { margin-top: var(--sp-1); }

.task {
  --stripe: var(--border-strong);
  position: relative; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-4) var(--sp-4) calc(var(--sp-4) + 4px); margin-bottom: var(--sp-3);
  box-shadow: inset 4px 0 0 var(--stripe), var(--sh-1);
}
.task.hot { --stripe: var(--accent); border-color: var(--accent-hover); }
.task.late { --stripe: var(--danger); }
.task.closed { --stripe: var(--success); background: var(--bg-sunken); box-shadow: inset 4px 0 0 var(--stripe); }
.t-head { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: flex-start; }
.t-who { min-width: 0; }
.t-name { font-size: var(--fs-lg); font-weight: 650; line-height: var(--lh-tight); }
.t-company { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 2px; }
.t-badges { flex: none; }
.t-time { margin: var(--sp-1) 0 0; }
.t-time .muted.small { margin-top: 2px; }
details.full { margin-top: var(--sp-2); }
.t-sum {
  display: block; list-style: none; cursor: pointer; font-size: var(--fs-md);
  background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3);
}
.t-sum > div + div { margin-top: 2px; }
.t-sum .more-link {
  display: inline-block; margin-top: var(--sp-1); color: var(--link); font-size: var(--fs-sm); font-weight: 500;
  text-decoration: underline; text-underline-offset: .2em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
details.full[open] .more-link { display: none; }
details.full[open] > .t-sum { border-end-start-radius: 0; border-end-end-radius: 0; }
details.full > :not(summary) { padding-inline: var(--sp-3); }
details.full > :not(summary):first-of-type { padding-top: var(--sp-2); }
details.full > p { margin: var(--sp-2) 0; }
details.full > a { display: inline-flex; align-items: center; min-height: var(--h-sm); }
.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* одна строка: слева «кто взял», справа кнопка «Скопировать бриф» */
.t-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-2); }
.t-meta:has(.copy-brief) { margin-top: 0; min-height: var(--hit); }
.t-owner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-width: 0; }
.t-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-top: var(--sp-1); }
.t-actions form { display: contents; }
.t-actions > *:only-child { grid-column: 1 / -1; }
.t-actions > .badge { justify-content: center; min-height: var(--h-lg); font-size: var(--fs-sm); border-radius: var(--r-md); }
.alt { margin-top: var(--sp-2); }
.alt a { display: inline-flex; align-items: center; min-height: var(--h-sm); }
details.result { margin-top: var(--sp-2); }
details.result > summary, details.quick-task > summary { list-style: none; }
details.result > summary { width: 100%; }
details.result > summary.btn, details.quick-task > summary.btn { background: var(--bg-surface); color: var(--text); border-color: var(--border-strong); }
@media (hover: hover) { details.result > summary.btn:hover, details.quick-task > summary.btn:hover { background: var(--bg-hover); } }
details[open].result > summary.btn { background: var(--bg-hover); }
.result-form { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.result-form input { min-height: var(--hit); font-size: 1rem; width: 100%; }
.result-form .row2 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2); }
.result-form .row3 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.result-form .sub { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); margin-top: var(--sp-2); }
.result-form .row2 > button { max-width: 11rem; }
.t-done { margin-top: var(--sp-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
.t-done > div { flex-basis: 100%; }
.t-done button { margin-inline-start: auto; }

/* десктоп: действия в карточке — компактная группа, а не кнопки по 500px (после базовых правил, чтобы перекрыть их) */
@media (min-width: 900px) {
  .t-actions { grid-template-columns: repeat(2, minmax(0, 15rem)); }
  .t-actions > *:only-child { grid-column: 1; }
  details.result > summary.btn { width: calc(30rem + var(--sp-2)); max-width: 100%; }
  .result-form { max-width: calc(30rem + var(--sp-2)); }
}

details.later { margin-top: var(--sp-4); }
details.later > summary { flex-wrap: wrap; column-gap: var(--sp-3); row-gap: 0; padding: var(--sp-1) 0; border-top: 1px solid var(--border-strong); }
/* в summary (роль кнопки) — не h2, а текст того же вида */
.later-title { display: inline-flex; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0; font-size: var(--fs-lg); font-weight: 650; line-height: var(--lh-tight); }
details.later > summary::after { order: 3; }
details[open].later > summary { margin-bottom: var(--sp-3); }

/* ================= 13. Звонок, контакт ================= */
.callbar { margin: 0 0 var(--sp-4); display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.callbar .btn.call { width: 100%; max-width: 26rem; }
.callbar .big { font-size: var(--fs-lg); font-weight: 650; }
.page-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4); }
.page-title h1 { margin: 0; }
.page-title .btn { margin-inline-start: auto; }
.title-badges { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); vertical-align: .15em; }
audio { width: 100%; display: block; margin-bottom: var(--sp-1); }
.brief-lines > div + div { margin-top: 2px; }

dl.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--sp-2) var(--sp-5); margin: 0 0 var(--sp-3); }
dl.kv dt { color: var(--text-muted); }
dl.kv dd { margin: 0; overflow-wrap: anywhere; }

.transcript .t {
  width: fit-content; max-width: min(85%, 40rem); padding: var(--sp-2) var(--sp-3); margin: var(--sp-2) 0;
  border-radius: var(--r-xl); background: var(--bg-hover);
}
.transcript .agent { border-end-start-radius: var(--r-xs); }
.transcript .user { background: var(--info-bg); margin-inline-start: auto; border-end-end-radius: var(--r-xs); }
.transcript .meta { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.transcript > .small.muted { margin: var(--sp-1) 0; padding-inline-start: var(--sp-3); }
.events > div { padding: 2px 0; }

.notes .note { padding: var(--sp-3) 0; border-top: 1px solid var(--border); margin: 0; }
.notes form { margin-bottom: var(--sp-3); }
.notes form button { margin-top: var(--sp-2); }

/* ================= 14. Аналитика ================= */
.chart { position: relative; height: 260px; }
.chart.tall { height: 300px; }
.funnel .row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--sp-3); align-items: center; margin: var(--sp-2) 0; }
.funnel .bar {
  background: var(--data-bar); height: var(--h-xs); border-radius: var(--r-xs); color: var(--text-on-solid);
  font-size: var(--fs-sm); font-weight: 600; padding: 0 var(--sp-2); white-space: nowrap; min-width: var(--h-sm);
  display: flex; align-items: center; font-variant-numeric: tabular-nums;
}

/* ================= 15. Сценарии ================= */
textarea.mono, .diff { font-family: var(--font-mono); font-size: var(--fs-sm); }
textarea.mono { line-height: 1.55; }
textarea.prompt-text { min-height: 55vh; }
/* первая фраза видна целиком: поле растёт по тексту (где поддерживается field-sizing), иначе rows="4" */
textarea.first-text { field-sizing: content; min-height: 6.5em; max-height: 14em; }
/* таблица данных под графиком — текстовая альтернатива (WCAG 1.1.1) */
.chart-data { margin-top: var(--sp-3); }
.chart-data > summary { display: inline-flex; align-items: center; min-height: var(--hit); color: var(--link); font-size: var(--fs-sm); font-weight: 600; list-style: none; }
.chart-data .tbl { margin: var(--sp-2) 0 0; max-height: 18rem; overflow-y: auto; }
.counter { margin-top: var(--sp-1); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-3); }
.diff { border: 1px solid var(--border); border-radius: var(--r-md); max-height: 60vh; overflow: auto; overscroll-behavior: contain; background: var(--bg-sunken); line-height: 1.55; }
.diff > div { white-space: pre-wrap; overflow-wrap: anywhere; padding: 0 var(--sp-2); }
.diff .d-add { background: var(--success-bg); }
.diff .d-del { background: var(--danger-bg); }
.diff .d-hunk { color: var(--text-muted); background: var(--bg-hover); }

/* ================= 16. Прочее ================= */
.filters-box { margin-bottom: var(--sp-3); }
.filters-box > summary { list-style: none; color: var(--link); font-weight: 600; display: inline-flex; padding: 0 var(--sp-1); margin-inline-start: calc(var(--sp-1) * -1); }
.filters-box > summary::after { border-color: var(--link); }
.filters-box[open] > .filters { margin-top: var(--sp-2); padding: var(--sp-4); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
/* ряд «галочки + кнопка» под полями фильтра — всегда отдельной строкой */
.filters-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-5); }
.filters-actions label { flex-direction: row; align-items: center; min-height: var(--hit); font-weight: 400; color: var(--text); }
.filters-actions button, .filters-actions .btn { width: auto; min-width: 9rem; }
.filters-actions button:first-of-type { margin-inline-start: auto; }
.filters-box > summary .badge { margin-inline-start: var(--sp-1); }
.user-edit > summary { display: inline-flex; align-items: center; min-height: var(--h-sm); color: var(--link); font-weight: 500; list-style: none; }
.actions-row { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: flex-end; }
.confirm-form { align-items: flex-end; }
.user-edit form { margin-top: var(--sp-2); }
.user-edit form + form { margin-top: var(--sp-3); }

.login { max-width: 24rem; margin: 10vh auto 0; }
.login-brand { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-5); font-weight: 650; }
.login h1 { font-size: var(--fs-xl); }
.login form { display: grid; gap: var(--sp-3); }
.login label { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.login input { width: 100%; min-height: var(--hit); font-size: 1rem; }
.login button { width: 100%; min-height: var(--h-lg); margin-top: var(--sp-2); }
.error-card { text-align: center; padding: var(--sp-10) var(--sp-5); }

/* ================= 17. Нижняя панель (телефон) ================= */
nav.bottom { display: none; }
@media (max-width: 720px) {
  header.top-bar { position: static; }
  header.top-bar nav.top, header.top-bar .me, header.top-bar form.logout { display: none; }
  .brand { margin: 0; }
  .lead-banner { top: 0; }
  html { scroll-padding-top: var(--sp-4); scroll-padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
  .page { padding-top: var(--sp-4); padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--sp-8)); }
  .page.login-page { padding-bottom: var(--sp-10); }

  nav.bottom {
    display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--bg-surface); border-top: 1px solid var(--border); box-shadow: var(--sh-up);
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  nav.bottom > a, nav.bottom summary {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: var(--tabbar-h); color: var(--text-muted); font-size: var(--fs-xs); font-weight: 600;
    list-style: none; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent;
  }
  nav.bottom .tab-ico {
    display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 30px; border-radius: var(--r-pill);
    transition: background-color .15s;
  }
  nav.bottom .tab-ico svg { width: 22px; height: 22px; }
  nav.bottom > a.on, nav.bottom summary.on, nav.bottom details[open] > summary { color: var(--text); text-decoration: none; }
  nav.bottom > a.on .tab-ico, nav.bottom summary.on .tab-ico { background: var(--accent); color: var(--on-accent); }
  nav.bottom details[open] > summary .tab-ico { background: var(--bg-hover); }
  nav.bottom .cnt {
    position: absolute; top: 4px; inset-inline-start: calc(50% + 8px); min-width: 20px; height: 20px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--danger); color: var(--text-on-solid); border: 2px solid var(--bg-surface); border-radius: var(--r-pill);
    font-size: var(--fs-2xs); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
  }
  nav.bottom details.more { position: relative; }
  nav.bottom details.more .menu {
    position: absolute; inset-inline-end: var(--sp-2); bottom: calc(100% + var(--sp-2)); min-width: 15rem;
    max-height: 70vh; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; padding: var(--sp-1);
    background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-pop);
  }
  nav.bottom details.more .menu a, nav.bottom details.more .menu .linkbtn {
    display: flex; align-items: center; width: 100%; min-height: var(--h-lg); padding: 0 var(--sp-3);
    border-radius: var(--r-md); color: var(--text); font-size: var(--fs-md); font-weight: 500; text-align: start; text-decoration: none;
  }
  nav.bottom details.more .menu a.on { background: var(--accent-soft); font-weight: 650; box-shadow: inset 3px 0 0 var(--accent); }
  nav.bottom details.more .menu form { border-top: 1px solid var(--border); margin-top: var(--sp-1); padding-top: var(--sp-1); }
  nav.bottom details.more .menu .linkbtn { color: var(--danger); }

  /* типографика и плотность телефона */
  h1 { font-size: var(--fs-xl); letter-spacing: -.01em; }
  input, select, textarea { font-size: 1rem; }       /* iOS не зумит страницу при фокусе */
  /* на телефоне промпт — обычный шрифт: моноширинный в 16px даёт ~35 знаков в строке */
  textarea.mono { font-size: 1rem; font-family: var(--font); line-height: 1.5; }
  .card { padding: var(--sp-4); }
  details.card > summary { margin-inline: calc(var(--sp-4) * -1); padding-inline: var(--sp-4); }
  details[open].card { padding-bottom: var(--sp-4); }
  .row-link { margin-inline: calc(var(--sp-4) * -1); padding-inline: var(--sp-4); grid-template-columns: 4.75rem minmax(0, 1fr); }
  .row-link > .badge { grid-column: 2; justify-self: start; margin-top: -4px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .kpi { padding: var(--sp-3); }
  .kpi b { font-size: var(--fs-xl); }
  .tabs { display: flex; }
  .tabs a { flex: 1; min-height: var(--hit); }
  button.small, .btn.small { min-height: var(--hit); padding-inline: var(--sp-3); }
  .copy-brief, .linkbtn.small { min-height: var(--hit); }
  .user-edit > summary { min-height: var(--hit); }
  .alt a { min-height: var(--hit); }
  th.hm, td.hm { display: none; }
  th, td { padding: var(--sp-2) 10px; }
  .tbl table { font-size: var(--fs-sm); }
  .funnel .row { grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--sp-2); }
  .chart.tall { height: 340px; }
  dl.kv { grid-template-columns: minmax(0, 1fr); gap: 0; }
  dl.kv dt { margin-top: var(--sp-2); font-size: var(--fs-sm); }
  dl.kv dt:first-child { margin-top: 0; }
  .list-row.stack { flex-direction: column; align-items: stretch; }
  .list-row.stack .lr-side { max-width: none; text-align: start; align-items: flex-start; flex-direction: row; flex-wrap: wrap; column-gap: var(--sp-3); }
  .list-row.stack .lr-side .btn { margin-inline-start: auto; }
  .page-title .btn { margin-inline-start: 0; }
  .t-done button { margin-inline-start: 0; }
  .filters-box[open] > .filters { padding: var(--sp-3); }
  .filters label.wide { grid-column: 1 / -1; }
  .icon-btn .call-label { display: none; }
}

/* ================= 18. Движение, печать, контраст ================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .task, .kpi-hot { border-inline-start: 4px solid CanvasText; }
  nav.top a.on, nav.bottom > a.on { text-decoration: underline; }
}