/* Стили экранов CRM по принятому макету А2 (docs/crm-mockups-2026-11-09/A2, токены — web/a2.css,
   «Тёмная хвоя» набора recult-portal): цвета, шрифт, прямые углы, плашки этапа и хода, лента.
   Все величины — токены :root ниже; тёмная тема переопределяет только цвета. Встроенных стилей нет:
   CSP блока nginx без 'unsafe-inline' (ADR 0008). Индикатор htmx описан здесь же: встроенные стили
   htmx выключены в base.html (ADR 0001, «htmx 2.0.11, а не 4.0»).

   Средняя ширина (до 980 px, планшет стоймя): страница в одну колонку, строка таблицы списка
   становится карточкой с подписями полей (data-l у ячейки), как в макете: таблице в семь столбцов
   там тесно, и форма ответа уходила бы за край. Телефон (до 640 px): меню переносится второй
   строкой шапки; у ссылок, кнопок и полей область нажатия не меньше --tap. Шире 980 px таблица,
   которой тесно в узкой колонке, прокручивается в своём блоке (.crm-tscroll), страница вправо не
   уходит. Числа ширин стоят только в двух @media внизу файла: переменные CSS в условиях @media
   не работают. */

:root {
  /* цвета: светлая тема */
  --bg: #E9E9E7;
  --panel: #F4F4F4;
  --paper: #FFFFFF;
  --ink: #1C1C1A;
  --text: #3E403E;
  --muted: #55554F;
  --muted-2: #66665F;
  --line: #D6D6D2;
  --line-soft: #DDE0DB;
  --line-green: #D6DCD6;
  --line-input: #C9CFC8;
  --line-strong: #8E968D;
  --line-light: #E2E6E1;
  --pine: #0B442A;
  --pine-fg: #0B442A;
  --pine-700: #2D5C43;
  --pine-ink: #10291C;
  --on-pine: #FFFFFF;
  --on-pine-soft: #D9E6DC;
  --lime: #81AB2B;
  --lime-hover: #6C8F24;
  --lime-light: #A9D558;
  --pale: #D9E6DC;
  --pale-2: #E6E9E4;
  --red: #A33322;
  --red-dark: #7A2718;
  --red-bg: #FBE9E6;
  --amber: #7A4D00;
  --amber-bg: #FCF1D8;
  --st-in-bg: #EBE9E2;
  --st-in: #55594F;
  --st-an-bg: #ECE7F3;
  --st-an: #5B4A8A;
  --st-pr-bg: #DCEFE9;
  --st-pr: #1F6B63;
  --st-ct-bg: var(--pale);
  --st-ct: var(--pine-fg);
  --st-go-bg: var(--pine);
  --st-go: var(--on-pine);

  /* шрифт: Golos Text, если стоит в системе, иначе системный — без загрузки из сети */
  --font: 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --fs-xs: 12.5px;
  --fs-s: 13.5px;
  --fs-m: 15px;
  --fs-base: 16px;
  --fs-brand: 17px;
  --fs-h2: 18px;
  --fs-h1: 28px;
  --fs-h1-phone: 22px;
  --lh: 1.5;
  --lh-tight: 1.25;
  --track-caps: .06em;
  --track-brand: .07em;
  --w-medium: 500;
  --w-semi: 600;
  --w-bold: 700;

  /* отступы и размеры */
  --sp-0: 2px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 28px;
  --sp-7: 64px;
  --gutter: 16px;
  --page-w: 1240px;
  --side-w: 380px;
  --auth-w: 520px;
  --label-w: 96px;
  --reply-w: 220px;
  --deal-title-min: 160px;
  --deal-reply-w: 180px;
  --kv-key-w: 150px;
  --top-h: 60px;
  --tap: 44px;
  --field-h: 44px;
  --textarea-h: 88px;
  --border: 1px;
  --thick: 2px;
  --accent: 3px;
  --dot: 10px;
  --st-min: 7.4em;
  --feed-time: 124px;
  --chat-max: 420px;
  --msg-max: 92%;
  --alert-lines: 2;
  --fade: 200ms;
  --hover-opacity: .85;
  --nav-opacity: .8;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #151715;
    --panel: #1B1E1B;
    --paper: #1F231F;
    --ink: #ECEBE5;
    --text: #CFD1CB;
    --muted: #A6A9A1;
    --muted-2: #979A92;
    --line: #343832;
    --line-soft: #2C302C;
    --line-green: #2F3B33;
    --line-input: #4B534B;
    --line-strong: #6B746B;
    --line-light: #2C302C;
    --pine: #1C4A33;
    --pine-fg: #8FD3AD;
    --pine-700: #8FC7A7;
    --lime-hover: #95C43A;
    --pale: #1F3328;
    --pale-2: #242A25;
    --red: #FF8F85;
    --red-dark: #FFB0A8;
    --red-bg: #3A1E1C;
    --amber: #F0C060;
    --amber-bg: #372D16;
    --st-in-bg: #2A2E29;
    --st-in: #A9ACA4;
    --st-an-bg: #2D2838;
    --st-an: #C3B4E6;
    --st-pr-bg: #1C322F;
    --st-pr: #8FD3C7;
    color-scheme: dark;
  }
}

/* ---------- основа ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-block: var(--sp-7); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--fs-base)/var(--lh) var(--font);
  overflow-wrap: break-word;
}
a { color: var(--pine-700); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: var(--sp-0); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: var(--thick) solid var(--pine-fg); outline-offset: var(--sp-0); }
h1 { font-size: var(--fs-h1); font-weight: var(--w-semi); line-height: var(--lh-tight); margin: 0 0 var(--sp-2); }
h2 { font-size: var(--fs-h2); font-weight: var(--w-semi); line-height: var(--lh-tight); color: var(--pine-fg); margin: 0 0 var(--sp-3); }
p { margin: 0 0 var(--sp-3); }
code, pre { font-family: var(--mono); font-size: var(--fs-s); }
ul { margin: 0; padding-left: var(--sp-5); }

.crm-muted { color: var(--muted); }
.crm-mono { font-family: var(--mono); font-size: var(--fs-s); }
.crm-hidden { color: var(--muted); font-style: italic; }
.crm-text { white-space: pre-wrap; }
.crm-small { font-size: var(--fs-s); }

/* ---------- шапка: имя, меню, кто вошёл ---------- */
.crm-top { background: var(--pine); color: var(--on-pine); }
.crm-top-in {
  max-width: var(--page-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-height: var(--top-h);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--sp-5);
}
.crm-brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: var(--fs-brand);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-brand);
  white-space: nowrap;
  color: var(--on-pine);
}
.crm-brand span { margin-left: var(--sp-1); font-weight: var(--w-medium); color: var(--lime-light); }
.crm-brand:hover { text-decoration: none; opacity: var(--hover-opacity); }
.crm-nav { display: flex; flex-wrap: wrap; gap: 0 var(--sp-1); min-width: 0; }
.crm-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--top-h);
  padding: 0 var(--sp-3);
  border-bottom: var(--accent) solid transparent;
  color: var(--on-pine);
  font-weight: var(--w-semi);
  opacity: var(--nav-opacity);
  white-space: nowrap;
}
.crm-nav a:hover { opacity: 1; text-decoration: none; }
.crm-nav a[aria-current="page"] { opacity: 1; border-bottom-color: var(--lime-light); }
.crm-who {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-s);
  color: var(--on-pine-soft);
  min-width: 0;
}
.crm-who b { font-family: var(--mono); font-weight: var(--w-semi); color: var(--on-pine); overflow-wrap: anywhere; }
.crm-who .crm-login { font-family: var(--mono); font-weight: var(--w-semi); overflow-wrap: anywhere; }
.crm-who a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--on-pine); text-decoration: underline; text-underline-offset: var(--accent); }

/* ---------- полоса предупреждений системы: каждое отдельной строкой ---------- */
.crm-alerts { background: var(--red-bg); border-bottom: var(--border) solid var(--red); color: var(--ink); }
.crm-alerts-in { max-width: var(--page-w); margin: 0 auto; padding: var(--sp-2) var(--gutter); }
.crm-alerts h2 { font-size: var(--fs-s); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--red-dark); margin: 0 0 var(--sp-1); }
.crm-alerts ul { list-style: none; padding: 0; }
.crm-alert { border-top: var(--border) solid var(--line-input); padding: var(--sp-1) 0; font-size: var(--fs-m); }
.crm-alert:first-child { border-top: 0; }
.crm-alert-head { display: inline-flex; flex-wrap: wrap; gap: 0 var(--sp-2); align-items: baseline; margin-right: var(--sp-2); }
.crm-alert-kind { font-weight: var(--w-bold); color: var(--red-dark); }
.crm-alert-time { font-size: var(--fs-s); color: var(--muted); font-variant-numeric: tabular-nums; }
.crm-alert details > summary { cursor: pointer; min-height: var(--tap); padding: var(--sp-2) 0; }
/* Свёрнутый список в карточке («Убранные» на «Сотрудниках»): строка-заголовок — во всю цель пальца. */
.crm-fold { cursor: pointer; min-height: var(--tap); padding: var(--sp-2) 0; font-weight: var(--w-bold); }
.crm-alert details > summary .crm-alert-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--alert-lines);
  overflow: hidden;
}
.crm-alert details[open] > summary .crm-alert-text { display: block; }
.crm-alert-more { font-size: var(--fs-s); color: var(--pine-700); text-decoration: underline; white-space: nowrap; }
.crm-alert details[open] .crm-alert-more { display: none; }
/* Полоса целиком — <details>: шире телефона она раскрыта, закрыта она или нет (строки «показать»
   нет, содержимое видно всегда); на телефоне (@media до 640 px) свёрнута в строку «Предупреждения: N». */
.crm-alerts-fold::details-content { content-visibility: visible; }
.crm-alerts-fold > summary { display: block; list-style: none; }
.crm-alerts-fold > summary::-webkit-details-marker { display: none; }
.crm-alerts-fold > summary .crm-alert-more { display: none; }
/* Браузер без ::details-content держит закрытую полосу свёрнутой и на широком экране: строка
   «показать» тогда остаётся, иначе не видно, что полоса раскрывается. */
@supports not selector(::details-content) {
  .crm-alerts-fold:not([open]) > summary { cursor: pointer; }
  .crm-alerts-fold:not([open]) > summary .crm-alert-more { display: inline; }
}

/* ---------- колонка страницы ---------- */
.crm-main { max-width: var(--page-w); margin: 0 auto; padding: var(--sp-5) var(--gutter) var(--sp-7); }
.crm-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin: 0 0 var(--sp-4); }
.crm-messages { list-style: none; margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--pale); border-left: var(--accent) solid var(--pine-fg); }
.crm-card {
  background: var(--paper);
  border: var(--border) solid var(--line-green);
  padding: var(--sp-4) var(--sp-5);
  margin: 0 0 var(--sp-4);
  min-width: 0;
}
.crm-card.crm-head { border-top: var(--accent) solid var(--pine-fg); }
.crm-card > :last-child { margin-bottom: 0; }
.crm-grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--side-w); gap: 0 var(--sp-4); align-items: start; }
.crm-grid > div { min-width: 0; }
.crm-sect-h { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: baseline; margin: 0 0 var(--sp-3); }
.crm-sect-h h2 { margin: 0; }
.crm-cnt { font-size: var(--fs-s); font-weight: var(--w-semi); color: var(--muted); background: var(--pale-2); padding: 0 var(--sp-2); }
.crm-note { padding: var(--sp-3) var(--sp-4); background: var(--panel); border-left: var(--accent) solid var(--lime); color: var(--text); margin: 0 0 var(--sp-4); }
.crm-error { margin: var(--sp-2) 0; padding: var(--sp-3) var(--sp-4); background: var(--red-bg); border-left: var(--accent) solid var(--red); color: var(--red-dark); }
.crm-links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); list-style: none; padding: 0; margin: 0 0 var(--sp-4); }
.crm-links li { margin: 0; }
.crm-list { list-style: none; padding: 0; margin: 0; }
.crm-list > li { padding: var(--sp-2) 0; border-top: var(--border) solid var(--line-light); }
.crm-list > li:first-child { border-top: 0; }

/* Пары «что — значение» */
.crm-facts { display: grid; grid-template-columns: minmax(0, var(--kv-key-w)) minmax(0, 1fr); gap: var(--sp-2) var(--sp-3); margin: 0; font-size: var(--fs-m); }
.crm-facts dt { color: var(--muted); }
.crm-facts dd { margin: 0; min-width: 0; }

/* Плашки этапа и хода — как на странице заявок */
.crm-st, .crm-tag {
  display: inline-block;
  padding: var(--sp-0) var(--sp-2);
  border: var(--border) solid transparent;
  font-size: var(--fs-xs);
  font-weight: var(--w-semi);
  line-height: var(--lh);
  white-space: nowrap;
}
.crm-st { min-width: var(--st-min); text-align: center; background: var(--st-in-bg); color: var(--st-in); }
.crm-st-analysis { background: var(--st-an-bg); color: var(--st-an); }
.crm-st-price { background: var(--st-pr-bg); color: var(--st-pr); }
.crm-st-contract { background: var(--st-ct-bg); color: var(--st-ct); }
.crm-st-launch { background: var(--st-go-bg); color: var(--st-go); }
.crm-st-closed { background: transparent; color: var(--muted); border-color: var(--line-strong); }
.crm-tag { background: var(--pale-2); color: var(--text); border-color: var(--line-green); }
.crm-tag-customer { background: var(--panel); color: var(--muted); border-color: var(--line); }
.crm-tag-agent { background: var(--pale); color: var(--pine-fg); border-color: transparent; }
.crm-tag-pause, .crm-tag-open { background: var(--amber-bg); color: var(--amber); border-color: transparent; }
.crm-tag-won { background: var(--pine); color: var(--on-pine); border-color: transparent; }
.crm-tag-refused, .crm-tag-done { background: transparent; color: var(--muted); border-color: var(--line-strong); }

/* ---------- таблицы списков ---------- */
.crm-tscroll { overflow-x: auto; max-width: 100%; margin: 0 0 var(--sp-4); }
.crm-table { width: 100%; border-collapse: collapse; background: var(--paper); border: var(--border) solid var(--line-green); font-size: var(--fs-m); }
.crm-card .crm-table { border-color: var(--line-soft); }
.crm-table th {
  font-size: var(--fs-xs);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--muted-2);
  text-align: left;
  padding: var(--sp-3);
  border-bottom: var(--thick) solid var(--line-input);
  white-space: nowrap;
}
.crm-table td { padding: var(--sp-3); border-top: var(--border) solid var(--line-soft); vertical-align: top; }
.crm-table tbody tr:hover td { background: var(--panel); }
.crm-table .crm-num { font-weight: var(--w-semi); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm-table .crm-name { font-weight: var(--w-semi); color: var(--ink); }
.crm-table .crm-name a { color: var(--ink); }
.crm-table .crm-sub { display: block; font-size: var(--fs-s); color: var(--muted); font-weight: normal; margin-top: var(--sp-0); }
.crm-table .crm-w { white-space: nowrap; font-variant-numeric: tabular-nums; }
.crm-table td.crm-mono { overflow-wrap: normal; }
/* таблица дел шире порога карточек: заголовок дела не сжимается, длинная папка переносится */
.crm-deals td.crm-main-cell { min-width: var(--deal-title-min); }
.crm-deals td.crm-where { overflow-wrap: anywhere; }
.crm-deals .crm-reply { min-width: var(--deal-reply-w); }
.crm-table .crm-r { text-align: right; font-variant-numeric: tabular-nums; }
.crm-empty { color: var(--muted); margin: 0 0 var(--sp-4); }

/* ---------- лента: время, вид, кто, что ---------- */
.crm-feed { list-style: none; margin: 0; padding: 0; }
.crm-ev { display: grid; grid-template-columns: var(--feed-time) minmax(0, 1fr); gap: 0 var(--sp-3); padding: var(--sp-2) 0; border-top: var(--border) solid var(--line-light); }
.crm-ev:first-child { border-top: 0; }
.crm-ev-time { font-size: var(--fs-s); color: var(--muted); font-variant-numeric: tabular-nums; }
.crm-ev-head { display: flex; flex-wrap: wrap; gap: 0 var(--sp-2); align-items: baseline; }
.crm-ev-kind { font-size: var(--fs-xs); font-weight: var(--w-semi); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted-2); }
.crm-ev-who { font-weight: var(--w-semi); font-size: var(--fs-m); }
.crm-ev-text { font-size: var(--fs-m); color: var(--text); }
.crm-ev-change { display: block; font-size: var(--fs-s); color: var(--muted); }

/* ---------- чат с программой ---------- */
.crm-live { display: flex; gap: var(--sp-2); align-items: center; padding: var(--sp-2) var(--sp-3); background: var(--panel); border: var(--border) solid var(--line-soft); font-size: var(--fs-s); margin: 0 0 var(--sp-3); }
.crm-live::before { content: ""; flex: none; width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--amber); }
.crm-live.crm-on::before { background: var(--lime); }
.crm-msgs { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); max-height: var(--chat-max); overflow-y: auto; }
.crm-msg { align-self: flex-start; max-width: var(--msg-max); padding: var(--sp-2) var(--sp-3); background: var(--pale-2); border: var(--border) solid var(--line-soft); font-size: var(--fs-m); }
.crm-msg-head { display: flex; flex-wrap: wrap; gap: 0 var(--sp-2); font-size: var(--fs-xs); color: var(--muted); }
.crm-msg-head b { color: var(--ink); font-family: var(--mono); }
.crm-msg-state { display: block; font-size: var(--fs-xs); color: var(--pine-fg); font-weight: var(--w-semi); margin-top: var(--sp-1); }
.crm-threads { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.crm-threads a, .crm-threads strong { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--sp-3); border: var(--border) solid var(--line-input); background: var(--paper); font-size: var(--fs-s); }
.crm-threads strong { background: var(--pine); border-color: var(--pine); color: var(--on-pine); }
.crm-suggest { list-style: none; margin: var(--sp-1) 0 0; padding: 0; background: var(--paper); border: var(--border) solid var(--line-input); }
.crm-suggest li { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-m); border-top: var(--border) solid var(--line-light); }
.crm-suggest li:first-child { border-top: 0; }

/* ---------- формы и кнопки ---------- */
button, input, select, textarea { font: inherit; color: inherit; }
.crm-btn, .crm-main button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 var(--sp-4);
  border: var(--border) solid var(--lime);
  background: var(--lime);
  color: var(--pine-ink);
  font-size: var(--fs-m);
  font-weight: var(--w-semi);
  cursor: pointer;
  border-radius: 0;
}
.crm-btn:hover, .crm-main button:hover { background: var(--lime-hover); border-color: var(--lime-hover); text-decoration: none; }
.crm-main .crm-ghost {
  background: transparent;
  border-color: var(--pine-fg);
  color: var(--pine-fg);
}
.crm-main .crm-ghost:hover { background: var(--pale); border-color: var(--pine-fg); }
.crm-main .crm-danger { background: transparent; border-color: var(--red); color: var(--red); }
.crm-main .crm-danger:hover { background: var(--red-bg); border-color: var(--red); }
input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea {
  width: 100%;
  min-height: var(--field-h);
  padding: var(--sp-2) var(--sp-3);
  border: var(--border) solid var(--line-input);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--fs-base);
  border-radius: 0;
}
textarea { min-height: var(--textarea-h); resize: vertical; }
input[type="file"] { max-width: 100%; min-height: var(--field-h); font-size: var(--fs-base); }
input[type="checkbox"], input[type="radio"] { width: var(--sp-5); height: var(--sp-5); margin: 0; accent-color: var(--pine-700); }
input:focus, select:focus, textarea:focus { outline: var(--thick) solid var(--pine-fg); outline-offset: calc(-1 * var(--border)); }
label { display: block; font-size: var(--fs-s); color: var(--muted); }
.crm-field { display: grid; gap: var(--sp-1); margin: 0 0 var(--sp-3); }
.crm-check { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); font-size: var(--fs-m); color: var(--ink); }
.crm-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.crm-form { margin: 0 0 var(--sp-4); }
.crm-form + .crm-form { padding-top: var(--sp-4); border-top: var(--border) solid var(--line-light); }
.crm-form p { margin: 0 0 var(--sp-3); }
.crm-form p > label { margin-bottom: var(--sp-1); }
.crm-form .helptext, .crm-form ul.errorlist { display: block; font-size: var(--fs-s); color: var(--muted); margin-top: var(--sp-1); }
.crm-form ul.errorlist { color: var(--red); list-style: none; padding: 0; }
.crm-reply { display: grid; gap: var(--sp-2); min-width: var(--reply-w); }
.crm-hint { font-size: var(--fs-s); color: var(--muted); }

/* ---------- вход и свой доступ ---------- */
.crm-auth { max-width: var(--auth-w); margin: var(--sp-6) auto 0; }
.crm-auth.crm-card { border-top: var(--accent) solid var(--pine-fg); padding: var(--sp-5); }
.crm-auth h1 { font-size: var(--fs-h1-phone); }
.crm-codes { background: var(--panel); border: var(--border) solid var(--line-soft); padding: var(--sp-3) var(--sp-4); white-space: pre-wrap; }
.crm-qr { background: var(--on-pine); padding: var(--sp-3); display: inline-block; max-width: 100%; margin: 0 0 var(--sp-3); }
.crm-qr svg { display: block; max-width: 100%; height: auto; }
.crm-secret { overflow-wrap: anywhere; }

.htmx-indicator { opacity: 0; transition: opacity var(--fade) ease-in; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* ---------- средняя ширина: одна колонка, строка таблицы — карточка ---------- */
@media (max-width: 980px) {
  .crm-grid { grid-template-columns: minmax(0, 1fr); }

  /* строка таблицы — карточка: главная ячейка сверху, у остальных подпись слева */
  .crm-tscroll { overflow-x: visible; }
  .crm-table, .crm-table tbody, .crm-table tr, .crm-table td { display: block; width: 100%; }
  .crm-table thead { display: none; }
  .crm-table { border: 0; background: transparent; }
  .crm-table tr { display: flex; flex-direction: column; background: var(--paper); border: var(--border) solid var(--line-green); margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-3); }
  .crm-table tbody tr:hover td { background: transparent; }
  .crm-table td { position: relative; border: 0; padding: var(--sp-1) 0 var(--sp-1) calc(var(--label-w) + var(--sp-3)); }
  .crm-table td::before {
    content: attr(data-l);
    position: absolute;
    left: 0;
    top: var(--sp-1);
    width: var(--label-w);
    font-size: var(--fs-xs);
    font-weight: var(--w-semi);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    line-height: calc(var(--fs-m) * var(--lh));
    color: var(--muted-2);
  }
  .crm-table td.crm-main-cell { order: -1; padding-left: 0; font-size: var(--fs-base); }
  .crm-table td.crm-main-cell::before, .crm-table td.crm-wide::before { display: none; }
  .crm-table td.crm-wide { padding-left: 0; }
  .crm-table td:empty { display: none; }
  .crm-table .crm-r { text-align: left; }
  .crm-table .crm-w, .crm-table .crm-num { white-space: normal; }
  .crm-reply { min-width: 0; }
  .crm-deals td.crm-main-cell, .crm-deals .crm-reply { min-width: 0; }
}

/* ---------- телефон ---------- */
@media (max-width: 640px) {
  :root { --fs-h1: var(--fs-h1-phone); --top-h: var(--tap); }
  .crm-top-in { gap: 0 var(--sp-3); }
  .crm-who { order: 1; }
  .crm-alerts-fold::details-content { content-visibility: hidden; }
  .crm-alerts-fold[open]::details-content { content-visibility: visible; }
  .crm-alerts-fold > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-3); min-height: var(--tap); cursor: pointer; }
  .crm-alerts-fold > summary h2 { margin: 0; }
  .crm-alerts-fold:not([open]) > summary .crm-alert-more { display: inline; }
  .crm-nav { order: 2; flex-basis: 100%; margin: 0 calc(-1 * var(--sp-3)); }
  .crm-main { padding-top: var(--sp-4); }
  .crm-card { padding: var(--sp-3) var(--sp-4); }
  .crm-facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .crm-facts dt { font-size: var(--fs-s); margin-top: var(--sp-2); }
  .crm-ev { grid-template-columns: minmax(0, 1fr); }

  /* область нажатия: ссылка — строчный блок высотой в строку и поля до --tap */
  .crm-main a {
    display: inline-block;
    max-width: 100%;
    padding-block: calc((var(--tap) - 1lh) / 2);
    margin-block: calc((1lh - var(--tap)) / 2);
  }
  .crm-main a.crm-btn, .crm-threads a { display: inline-flex; padding-block: 0; margin-block: 0; }
  .crm-table td > a { min-width: var(--tap); }
  .crm-row > button, .crm-reply button, .crm-form button { flex: 1 1 auto; }
}

/* ---------- счётчик «Новое» в шапке (ADR 0012, раздел 6) ---------- */
.crm-news {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  color: var(--on-pine);
  font-weight: var(--w-semi);
  white-space: nowrap;
}
.crm-news:hover { text-decoration: none; opacity: var(--hover-opacity); }
.crm-news[aria-current="page"] { text-decoration: underline; text-underline-offset: var(--accent); }
.crm-news + .crm-who { margin-left: 0; }
.crm-news-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--tap) / 2);
  padding: 0 var(--sp-2);
  border-radius: var(--tap);
  background: var(--lime-light);
  color: var(--pine-ink);
  font-size: var(--fs-s);
  font-weight: var(--w-bold);
  line-height: var(--lh);
}