*{margin:0;padding:0;box-sizing:border-box}
/* Две роли числа. В системе NORMA Signal обе набираются JetBrains Mono с
   табличными цифрами: и то, что сравнивают взглядом (суммы, часы, даты), и
   то, что переписывают посимвольно (номер дела, ИНН, ОГРН). Разделение имён
   сохранено — по нему в разметке видно, что за число стоит в ячейке. */
.mono{font-family:var(--num);font-variant-numeric:tabular-nums;letter-spacing:0}
.code{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0}

/* ══════════ ГАРНИТУРЫ ══════════════════════════════════════════════════
   Три роли, три семейства, все в образе рядом с Vue: без внешней сети продукт
   поднимается целиком, а не «Golos, если Google ответит».
   Golos Text — интерфейс и абзацы. Кириллица родная, не адаптированная:
     ради неё гарнитуру и выбрали, подмены делать нельзя.
   Playfair Display — ровно пять мест: логотип, заголовок героя лендинга,
     цитата-принцип, заголовок блока демо, крупные числа и h1 в продукте.
     Больше нигде — ни в подзаголовках, ни в названиях карточек, ни в кнопках.
   JetBrains Mono — все числа и идентификаторы плюс микро-подписи капсом.
   Латиница и кириллица разными подмножествами — браузер тянет только нужное. */
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/vendor/fonts/golos-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/vendor/fonts/golos-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;
  src:url(/vendor/fonts/jetbrains-mono-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;
  src:url(/vendor/fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/vendor/fonts/playfair-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/vendor/fonts/playfair-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ══════════ ТОКЕНЫ ═════════════════════════════════════════════════════
   Система NORMA Signal (design/README.md, хендофф claude.ai/design).
   Правило, из которого выведено всё остальное:
   ЦВЕТ ОЗНАЧАЕТ ПРОИСХОЖДЕНИЕ ФАКТА И СОСТОЯНИЕ СРОКА. Ничего другого.
   Акцентов ровно три, и каждый — одно значение в продукте:
     moss  — факт получен из картотеки/ЕГРЮЛ, не введён руками; исход в пользу;
     amber — в работе, ожидание, ближайший срок;
     clay  — просрочка, риск, исход против.
   Брендового цвета у NORMA нет: первичное действие красится тушью. Спокойный
   экран нейтральный — и это значит, что ничего не горит. */
:root{
  /* Интерфейс и абзацы. Кириллица Golos — характер продукта. */
  --display:'Golos Text',system-ui,-apple-system,sans-serif;
  /* Антиква. Пять мест из правила выше — и ни одним больше. */
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  /* Числа: суммы, дни, часы, проценты. Табличные. */
  --num:'JetBrains Mono',ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* Идентификаторы: номер дела, ИНН, ОГРН, номер зала. */
  --mono:'JetBrains Mono',ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --row:44px;

  /* ── Иерархия поверхностей.
     Оболочка тёмно-серая, рабочая область светлее, карточки белые: панели
     лежат НА столе, а не врезаны в него. Правило формы прежнее:
     ЛИБО РАМКА, ЛИБО ТЕНЬ — никогда оба. */
  --shell:#E9E9E5;   /* просвет между панелями оболочки, сам ничего не рисует */
  --field:#F5F5F3;   /* холст рабочей области: на нём стоят карточки */
  --sheet:#FFFFFF;   /* карточка, панель, поле ввода */
  --raise:#FFFFFF;   /* модалки, поповеры, меню — на тени без рамки */
  --tint:#F3F3F1;    /* наведение, зебра, вложенный блок — состояние, не поверхность */
  --tint-2:#EAEAE6;  /* глубже вложенный блок, наведение на вложенном */
  /* Доминанта: рейка и тёмные врезки. Одна-две зоны на экран. */
  --dom:#0F0F10;--dom-2:#17171A;--on-dom:#FAFAF9;--on-dom-2:rgba(250,250,249,.70);
  --dom-3:rgba(250,250,249,.45);--dom-line:rgba(250,250,249,.13);

  /* ── Тушь */
  --tx:#191917;--tx2:#56564F;--tx3:#8A8A82;--tx4:#B4B4AC;
  --border:#E6E6E1;--border-strong:#D6D6CF;--hair:#F3F3F1;

  /* ── Три акцента. Больше не вводить. */
  --done:#3F5C48;--done-bg:#EAF0EB;--done-bd:#CCDBD0;   /* moss: из источника, в пользу */
  --soon:#8A6A22;--soon-bg:#F7EED8;--soon-bd:#E6D5AC;   /* amber: в работе, срок близко */
  --late:#A4462B;--late-bg:#F7EAE5;--late-bd:#E8CDC2;   /* clay: просрочка, риск, против */
  /* «Живое» — тот же moss: по нему юрист отличает внешний факт от ручного ввода. */
  --live:#3F5C48;--live-s:#334C3B;--live-bg:#EAF0EB;--live-bd:#CCDBD0;

  /* ── Первичное действие. Тушь, а не бренд-цвет. */
  --accent:#191917;--accent-s:#33332E;--on-accent:#FAFAF9;

  /* ── Шкала отступов: 4·8·12·16·24·32·48·64. Других значений не вводить. */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
  /* ── Радиусы: четыре ступени. */
  --r1:8px;   /* кнопки, поля, табы, пункты меню */
  --r2:12px;  /* карточки */
  --r3:16px;  /* крупные панели, рейка, оболочка */
  --rp:999px; /* только бейджи статусов */

  /* ── Глубина. Тени почти нет: иерархию держат линейки и фон, не подъём. */
  --sh-sm:0 1px 3px rgba(25,25,23,.06);
  --sh-md:0 18px 44px -22px rgba(25,25,23,.24);
  --sh-lg:0 34px 64px -34px rgba(25,25,23,.38);
  --ring:0 0 0 3px rgba(25,25,23,.08);
  --t:.16s cubic-bezier(.4,0,.2,1);
  /* Наведение на строку таблицы: почти незаметный сдвиг от белого. */
  --row-hover:#FCFCFB;

  /* ── Псевдонимы прежних имён: 2300 правил переезжают на новую систему без
     переписывания каждой. Новый код пишется новыми именами. */
  --bg:var(--field);--bg2:var(--sheet);--side:var(--tint);
  --surface-2:var(--tint);--surface-3:var(--tint-2);--radius:var(--r2);
  --sh-xs:var(--sh-sm);
  --accent-bg:var(--tint);--accent-bd:var(--border-strong);--accent-tx:var(--tx);
  --navy:var(--dom);--navy-2:var(--dom-2);--on-navy:var(--on-dom-2);
  --success:var(--done);--success-bg:var(--done-bg);--success-bd:var(--done-bd);
  --warning:var(--soon);--warning-bg:var(--soon-bg);--warning-bd:var(--soon-bd);
  --danger:var(--late);--danger-bg:var(--late-bg);--danger-bd:var(--late-bd);
}
/* Плотность списков (Настройки → «Рабочее место»); по умолчанию compact. */
:root[data-density="roomy"]{--row:56px}

/* Тёмная тема. В хендоффе Signal её нет, поэтому она выведена из той же
   палитры, а не придумана заново: рейка продукта (#0F0F10) становится
   оболочкой, её осветления — поверхностями, три акцента поднимаются по
   светлоте ровно настолько, чтобы остаться читаемыми на тёмном.
   Следует системной настройке; [data-theme] — явный выбор (web/js/theme.js). */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --shell:#0B0B0C;--field:#131315;--sheet:#1A1A1C;--raise:#212124;
    --tint:#212124;--tint-2:#2A2A2D;
    --dom:#000000;--dom-2:#0F0F10;--on-dom:#FAFAF9;--on-dom-2:rgba(250,250,249,.70);
    --dom-3:rgba(250,250,249,.45);--dom-line:rgba(250,250,249,.13);
    --tx:#F2F2EE;--tx2:#AFAFA6;--tx3:#83837B;--tx4:#63635C;
    --border:#2B2B2E;--border-strong:#3B3B3F;--hair:#232326;
    --done:#7FA98A;--done-bg:#16261B;--done-bd:#2E4936;
    --soon:#D2A64E;--soon-bg:#2A2110;--soon-bd:#4E3F1C;
    --late:#DE8368;--late-bg:#2E1712;--late-bd:#5A2C21;
    --live:#7FA98A;--live-s:#9BC0A4;--live-bg:#16261B;--live-bd:#2E4936;
    --accent:#F2F2EE;--accent-s:#FFFFFF;--on-accent:#191917;
    --accent-bg:var(--tint);--accent-bd:var(--border-strong);--accent-tx:var(--tx);
    --sh-sm:0 1px 3px rgba(0,0,0,.5);--sh-md:0 18px 44px -22px rgba(0,0,0,.7);
    --sh-lg:0 34px 64px -34px rgba(0,0,0,.8);--ring:0 0 0 3px rgba(242,242,238,.18);
    --row-hover:var(--tint);
  }
}
:root[data-theme="dark"]{
  --shell:#0B0B0C;--field:#131315;--sheet:#1A1A1C;--raise:#212124;
  --tint:#212124;--tint-2:#2A2A2D;
  --dom:#000000;--dom-2:#0F0F10;--on-dom:#FAFAF9;--on-dom-2:rgba(250,250,249,.70);
  --dom-3:rgba(250,250,249,.45);--dom-line:rgba(250,250,249,.13);
  --tx:#F2F2EE;--tx2:#AFAFA6;--tx3:#83837B;--tx4:#63635C;
  --border:#2B2B2E;--border-strong:#3B3B3F;--hair:#232326;
  --done:#7FA98A;--done-bg:#16261B;--done-bd:#2E4936;
  --soon:#D2A64E;--soon-bg:#2A2110;--soon-bd:#4E3F1C;
  --late:#DE8368;--late-bg:#2E1712;--late-bd:#5A2C21;
  --live:#7FA98A;--live-s:#9BC0A4;--live-bg:#16261B;--live-bd:#2E4936;
  --accent:#F2F2EE;--accent-s:#FFFFFF;--on-accent:#191917;
  --accent-bg:var(--tint);--accent-bd:var(--border-strong);--accent-tx:var(--tx);
  --sh-sm:0 1px 3px rgba(0,0,0,.5);--sh-md:0 18px 44px -22px rgba(0,0,0,.7);
  --sh-lg:0 34px 64px -34px rgba(0,0,0,.8);--ring:0 0 0 3px rgba(242,242,238,.18);
  --row-hover:var(--tint);
}
html{color-scheme:light dark}
:root[data-theme="dark"]{color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}
html, body{height:100%;font-family:var(--display);font-size:15px;background:var(--shell);color:var(--tx);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
input, textarea, button, select{font-family:inherit}
::selection{background:var(--tx);color:var(--on-accent)}
/* Заголовки блоков и карточек — интерфейсной. Кегль и вес задаёт сам блок;
   здесь только гарнитура и трекинг, чтобы не повторять их в сорока правилах. */
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.014em;text-wrap:balance}
/* Антиква — только заголовок экрана. Правило серифа из хендоффа Signal
   ломается первым делом, поэтому h2/h3 её здесь НЕ получают: в продукте
   Playfair живёт в h1, в крупных числах KPI и в знаке Norma. */
h1{font-family:var(--serif);font-weight:500;font-size:36px;line-height:1.1;letter-spacing:-.012em}
p{text-wrap:pretty}
/* Числа — табличные всегда: столбик «7 598 220» и «1 850 000» сравнивают
   взглядом, а не пересчитывают. */
.num,[class*="num"]{font-variant-numeric:tabular-nums}
/* Ссылка в тексте узнаётся подчёркиванием, а не цветом: цвет в этом продукте
   занят временем. Подчёркивание тонкое и отбито от базовой линии. */
a{color:inherit}
.sub a, .ws-muted a, .empty a, .cc-note a, .honest a, .cid-brief-b a, p a:not([class]){
  color:var(--tx);text-decoration:underline;text-decoration-color:var(--border-strong);
  text-underline-offset:2px;text-decoration-thickness:1px}
.sub a:hover, .ws-muted a:hover, .empty a:hover, .cc-note a:hover, .honest a:hover,
.cid-brief-b a:hover, p a:not([class]):hover{text-decoration-color:var(--tx)}
/* Ссылка внутри строки списка: цвет тот же, подчёркивание — по наведению. */
.lnk{color:inherit;text-decoration:none}
.lnk:hover{text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:2px}
/* Галочки, радио и полоски прогресса рисует ОС, и по умолчанию она красит их
   системным синим — единственное место продукта не в брендовом индиго, и оно
   же разное на macOS, Windows и Linux. Один токен на весь документ красит их
   точно и оставляет нативную доступность нетронутой. */
:root{accent-color:var(--accent)}
[v-cloak]{display:none}

/* Выпадающие списки. Нативный select приносит свою рамку, высоту и стрелку
   ОС — рядом с нашими кнопками и полями это читается как чужой элемент.
   Гасим внешний вид один раз для всего продукта и рисуем свою стрелку;
   --tx3 в обеих темах почти совпадает, поэтому иконка одна на светлую и
   тёмную. Классы-исключения (.inline-select) переопределяют ниже. */
select{appearance:none;-webkit-appearance:none;background-color:var(--bg2);color:var(--tx);
  border:1px solid var(--border-strong);border-radius:var(--r2);padding:8px var(--s6) 8px 11px;font-size:13px;
  cursor:pointer;outline:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23767f95' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center}
select:hover:not(:disabled){border-color:var(--tx3)}
select:focus{border-color:var(--accent);box-shadow:var(--ring)}
select:disabled{opacity:.55;cursor:not-allowed}

/* AUTH */
.auth{display:flex;align-items:center;justify-content:center;height:100vh}
.auth-card{background:var(--raise);border-radius:var(--r3);padding:var(--s6);width:380px;box-shadow:var(--sh-lg)}
.auth-card h1{font-size:26px;font-weight:700;margin-bottom:4px}
.auth-card p{font-size:14px;color:var(--tx2);margin-bottom:var(--s5)}
.auth-card label{display:block;font-size:13px;font-weight:600;margin-bottom:4px}
.auth-card input{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:var(--r2);font-size:14px;margin-bottom:12px;outline:none;transition:.15s}
.auth-card input:focus{border-color:var(--accent-tx);box-shadow:0 0 0 3px var(--accent-bg)}
.auth-card .btn{width:100%;padding:10px;border:none;border-radius:var(--r2);background:var(--accent);color:var(--on-accent);font-size:14px;font-weight:600;cursor:pointer;transition:.15s}
.auth-card .btn:hover{background:var(--accent-s)}
.auth-card .err{background:var(--danger-bg);color:var(--danger);padding:8px 12px;border-radius:var(--r1);font-size:12px;margin-bottom:10px}
.auth-card .link{margin-top:14px;text-align:center;font-size:13px;color:var(--tx3)}
.auth-card .link a{color:var(--accent-tx);font-weight:600;cursor:pointer;text-decoration:none}
.auth-card .logo{display:flex;align-items:center;gap:var(--s2);margin-bottom:16px}
.auth-card .logo-icon{width:32px;height:32px;border-radius:var(--r2);background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px}

/* ══════════ ОБОЛОЧКА: плавающие панели ══════════════════════════════════
   Раскладка Signal: рейка и рабочая область — две панели, лежащие НА столе
   (var(--shell)) с просветом 10px, а не врезанные в него. Отсюда скруглённые
   углы у обеих и отсутствие общих границ: линию рисует просвет.
   Шапки-крошки больше нет: название экрана — серифный h1 в самой области
   (.page-head), поиск переехал в рейку и открывается палитрой по ⌘K. */
.app{display:grid;grid-template-columns:248px 1fr;gap:10px;padding:10px;
  height:100vh;overflow:hidden;background:var(--shell)}
:root[data-rail="icons"] .app{grid-template-columns:66px 1fr}
.rail{background:var(--dom);border-radius:var(--r3);color:var(--on-dom);
  display:flex;flex-direction:column;gap:var(--s5);padding:20px 14px;overflow:visible;z-index:40}
:root[data-rail="icons"] .rail{align-items:center;padding:20px 8px}

/* Знак продукта и вход в поиск — одна строка, как в макете. */
.rail-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  height:28px;padding:0 var(--s2);flex:none}
.rail .mk{display:flex;align-items:baseline;gap:9px;color:var(--on-dom);text-decoration:none;min-width:0}
.rail .mk b{font-family:var(--serif);font-size:22px;font-weight:500;line-height:1;letter-spacing:-.02em}
.rail .mk i{font-family:var(--mono);font-style:normal;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dom-3)}
/* Свёрнутая до значков рейка: полное «Norma» (22px) не влезает в 66px и
   упирается в скруглённый угол без отступа. Тот же знак, что на /login и
   в favicon — квадрат с «N», а не обрезанное слово. */
.rail .mk-icon{display:none}
:root[data-rail="icons"] .rail .mk b{display:none}
:root[data-rail="icons"] .rail .mk-icon{display:flex;align-items:center;justify-content:center;
  flex:none;width:30px;height:30px;border-radius:var(--r1);background:rgba(250,250,249,.14);
  color:var(--on-dom);font-family:var(--serif);font-size:15px;font-weight:600}
.rail-search{width:26px;height:26px;margin-right:-4px;border:0;background:none;border-radius:var(--r1);
  color:var(--dom-3);display:grid;place-items:center;cursor:pointer;flex:none;transition:color var(--t),background var(--t)}
.rail-search:hover{color:var(--on-dom);background:rgba(250,250,249,.09)}
:root[data-rail="icons"] .rail-top{justify-content:center;padding:0}
:root[data-rail="icons"] .rail .mk i, :root[data-rail="icons"] .rail-search{display:none}

/* Группа пунктов. Между группами — воздух (--s5), внутри группы — 2px. */
.rail-nav{display:flex;flex-direction:column;gap:2px;flex:none}
.rail-nav-h{font-size:12.5px;color:var(--dom-3);padding:0 9px var(--s2)}
:root[data-rail="icons"] .rail-nav-h{display:none}

/* Строка меню: значок и подпись — одна цель нажатия, а не значок с ярлыком. */
.rail-btn{display:flex;align-items:center;gap:11px;width:100%;height:34px;
  padding:0 9px;border:0;border-radius:var(--r1);background:none;cursor:pointer;
  color:var(--on-dom-2);text-decoration:none;position:relative;flex:none;
  font-size:13.5px;font-weight:400;text-align:left;transition:background var(--t),color var(--t)}
.rail-btn .ic{width:16px;height:16px;display:grid;place-items:center;flex:none}
.rail-btn .ic svg{width:16px;height:16px;stroke-width:1.5}
.rail-btn .lb{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-btn:hover{background:rgba(250,250,249,.09);color:var(--on-dom)}
/* Активный раздел — залитая строка. Отдельной полоски слева нет: два носителя
   одного смысла, из которых один читается только боковым зрением, — лишний. */
.rail-btn.router-link-active, .rail-btn.on{background:rgba(250,250,249,.14);color:var(--on-dom)}
/* Счётчик раздела: моно, как все числа продукта. */
.rail-count{font-family:var(--mono);font-size:11px;color:var(--dom-3);flex:none;font-variant-numeric:tabular-nums}
/* Бейдж непрочитанного: clay — просрочка и неразобранное требуют решения. */
.rail-badge{position:absolute;left:22px;top:3px;min-width:15px;height:15px;border-radius:var(--rp);
  background:var(--late);color:#FAFAF9;font-family:var(--mono);font-size:9.5px;font-weight:500;
  display:grid;place-items:center;padding:0 3px}
.rail .sp{flex:1;min-height:var(--s2)}
.rail-fold{color:var(--dom-3)}
:root[data-rail="icons"] .rail-fold .ic{transform:scaleX(-1)}
:root[data-rail="icons"] .rail-btn{width:38px;justify-content:center;padding:0;gap:0}
:root[data-rail="icons"] .rail-btn .lb, :root[data-rail="icons"] .rail-count{display:none}
:root[data-rail="icons"] .rail-badge{left:auto;right:2px}

/* Профиль внизу рейки (в макете — там же). Меню открывается вверх. */
.rail-me{position:relative;flex:none;margin-top:var(--s1)}
.rail-me-btn{display:flex;align-items:center;gap:11px;width:100%;height:40px;padding:0 9px;
  border:0;background:none;border-radius:var(--r1);cursor:pointer;text-align:left;
  color:var(--on-dom);transition:background var(--t)}
.rail-me-btn:hover{background:rgba(250,250,249,.09)}
.rail-me-btn .av{width:27px;height:27px;border-radius:7px;background:rgba(250,250,249,.14);
  display:grid;place-items:center;font-family:var(--serif);font-size:12.5px;flex:none}
/* Имя и организация — две строки. display:block обязателен: span по умолчанию
   инлайновый, и без него обе строки склеиваются в одну, а ellipsis не работает
   вовсе — «Андрей КовалёвБюро «Ковалёв и…» уезжало за край рейки. */
.rail-me-btn .tx{flex:1;min-width:0;display:block}
.rail-me-btn .n{display:block;font-size:13px;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-me-btn .o{display:block;font-size:11.5px;line-height:1.25;color:var(--dom-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root[data-rail="icons"] .rail-me-btn{width:38px;justify-content:center;padding:0;gap:0}
:root[data-rail="icons"] .rail-me-btn .tx{display:none}

/* Меню профиля: организация, тема, настройки, выход. Открывается вверх —
   строка профиля стоит у нижнего края рейки. */
.who-menu{position:absolute;left:0;bottom:calc(100% + 8px);width:252px;background:var(--raise);
  border-radius:var(--r2);box-shadow:var(--sh-lg);padding:6px;z-index:70;color:var(--tx)}
.who-mail{padding:8px 10px 6px;font-family:var(--mono);font-size:11px;color:var(--tx3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who-sec{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--tx3);padding:8px 10px 4px}
.who-item{display:flex;align-items:center;gap:var(--s2);width:100%;padding:8px 10px;border:0;background:none;
  border-radius:var(--r1);font-size:13px;color:var(--tx2);cursor:pointer;text-align:left;text-decoration:none;
  transition:background var(--t),color var(--t)}
.who-item:hover{background:var(--tint);color:var(--tx)}
.who-item.active{background:var(--tint);color:var(--tx);font-weight:500}
.who-item .grow{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who-item .mt{font-family:var(--mono);font-size:11px;color:var(--tx3)}
.who-sepline{height:1px;background:var(--border);margin:5px 2px}
:root[data-rail="icons"] .who-menu{left:0;width:230px}
@media (max-width:900px){.who-menu{left:auto;right:0}}

/* ── Рабочая область: белый лист с полем var(--field) под карточками. */
.main{display:flex;flex-direction:column;min-width:0;background:var(--field);
  border-radius:var(--r3);overflow:hidden}
.content{flex:1;overflow-y:auto;padding:26px 28px 32px;min-width:0}

/* ── Шапка экрана. Серифный h1 — подпись Signal; контекст (номер дела, имя
   клиента) идёт моно-строкой над ним, как в макете досье. Действия экрана
   телепортируются сюда из вида: правило «одна строка заголовка на экран». */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s5);
  flex-wrap:wrap;margin-bottom:18px}
.page-head .ctx{font-family:var(--mono);font-size:11px;color:var(--tx3);margin-bottom:5px;
  font-variant-numeric:tabular-nums}
.page-head h1{margin:0}
.page-acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ── Палитра (⌘K). Одно окно на поиск и на переходы: второго входа в
   навигацию в продукте нет. */
.pal-overlay{position:fixed;inset:0;background:color-mix(in srgb,var(--dom) 38%,transparent);
  z-index:120;display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 24px}
.pal{width:640px;max-width:100%;background:var(--raise);border-radius:var(--r3);
  box-shadow:var(--sh-lg);overflow:hidden;display:flex;flex-direction:column;max-height:70vh}
.pal-in{display:flex;align-items:center;gap:var(--s3);padding:0 18px;height:56px;flex:none;
  border-bottom:1px solid var(--border)}
.pal-in svg{color:var(--tx3);flex:none}
.pal-in input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:15px;color:var(--tx)}
.pal-in kbd{font-family:var(--mono);font-size:10px;color:var(--tx3);border:1px solid var(--border);
  border-radius:4px;padding:2px 5px;flex:none}
.pal-body{overflow-y:auto;padding:var(--s2) 0}

/* ══════════ МОБИЛЬНЫЙ ШЕЛЛ (≤900px) ══════════
   Рейка уезжает вниз и становится таб-баром: на 390px боковая колонка съедала
   бы 66 из 390 точек, а нижняя панель — стандарт для чтения в коридоре суда. */
@media (max-width:900px){
  /* На телефоне выбора «значки или подписи» нет: таб-бар всегда значками,
     поэтому атрибут data-rail здесь не читается вовсе. */
  .app, :root[data-rail="icons"] .app{grid-template-columns:1fr;grid-template-rows:1fr auto;
    gap:8px;padding:8px}
  .rail, :root[data-rail="icons"] .rail{grid-row:2;flex-direction:row;justify-content:space-around;
    padding:6px 8px;gap:0;align-items:center;border-radius:var(--r2)}
  .rail-top, .rail .sp, .rail-fold, .rail-nav-h, .rail-me-btn .tx{display:none}
  .rail-nav{flex-direction:row;gap:0;flex:1;justify-content:space-around}
  /* Второстепенная группа на телефоне не помещается: её экраны открываются
     из палитры, как и всё, чего нет в рейке. */
  .rail-nav.rail-nav-2{display:none}
  .rail-btn, :root[data-rail="icons"] .rail-btn{width:38px;justify-content:center;padding:0;gap:0}
  .rail-btn .lb, .rail-count{display:none}
  .rail-badge, :root[data-rail="icons"] .rail-badge{left:auto;right:2px}
  .rail-me{margin-top:0}
  .rail-me-btn, :root[data-rail="icons"] .rail-me-btn{width:38px;justify-content:center;padding:0;gap:0}
  .content{padding:18px 14px var(--s5)}
  .page-head{margin-bottom:14px}
  .page-head h1{font-size:27px}
  .pal-overlay{padding:8vh 10px 16px}}

/* SEARCH */
.results{max-width:700px;margin:0 auto}
@keyframes pulse{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

/* EMPTY */
.empty{text-align:center;padding:var(--s8) var(--s5);color:var(--tx3)}
.empty h3{font-size:16px;color:var(--tx2);margin-bottom:6px}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:color-mix(in srgb,var(--dom) 42%,transparent);z-index:100;
  display:flex;align-items:flex-start;justify-content:center;padding:var(--s8) 16px 24px;overflow-y:auto}
/* Модалка: шапка и подвал держатся, скроллится только тело — главное действие
   не должно уезжать под нижний край (правило оверлеев из design/v2 «Компоненты»). */
.modal{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r3);padding:0 var(--s4);width:520px;
  max-width:calc(100vw - 24px);max-height:min(84vh,760px);overflow-y:auto;display:flex;flex-direction:column;
  box-shadow:var(--sh-lg)}
/* Разметка модалок исторически «h3 + поля + .actions» — шапку и подвал делаем
   из них же (во всю ширину окна отрицательными полями): отступы становятся
   едиными во всём продукте без правки каждой модалки. */
.modal > h3{position:sticky;top:0;background:var(--surface-2);border-bottom:1px solid var(--hair);
  padding:var(--s3) 16px;margin:0 -16px var(--s4);z-index:2;border-radius:var(--r3) var(--r3) 0 0}
.modal > .actions{position:sticky;bottom:0;background:var(--surface-2);padding:12px 16px;margin:auto -16px 0;
  z-index:2;border-top:1px solid var(--hair)}
.modal.modal-sm{width:420px}
.modal.modal-lg{width:640px}
/* Подтверждение может вызываться из уже открытой модалки (например, «Удалить»
   внутри карточки задачи) — оно обязано оказаться поверх неё, а не под ней. */
.confirm-overlay{z-index:250}
.confirm-text{font-size:13.5px;color:var(--tx2);line-height:1.55}

/* Тосты — замена alert(): не блокируют вкладку, ошибка остаётся до закрытия. */
.toast-host{position:fixed;right:18px;bottom:18px;z-index:200;display:flex;flex-direction:column;gap:var(--s2);
  max-width:380px}
.toast{display:flex;align-items:center;gap:var(--s2);padding:11px var(--s3);border-radius:var(--r2);background:var(--bg2);
  border:1px solid var(--border);box-shadow:var(--sh-md);font-size:13px;color:var(--tx)}
.toast.ok{border-color:var(--success-bd);background:var(--success-bg);color:var(--success)}
.toast.err{border-color:var(--danger-bd);background:var(--danger-bg);color:var(--danger)}
.toast-t{flex:1;line-height:1.4}
.toast-x{flex:none;border:0;background:none;color:inherit;opacity:.6;cursor:pointer;font-size:12px}
.toast-x:hover{opacity:1}
.modal > h3{font-size:13.5px;font-weight:660;letter-spacing:0}
.modal label{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tx3);margin-bottom:5px}
.modal input,.modal textarea{width:100%;padding:8px 11px;border:1px solid var(--border-strong);border-radius:var(--r2);
  font-size:13px;margin-bottom:11px;outline:none;background:var(--bg2);color:var(--tx);font-family:inherit}
.modal input:focus,.modal textarea:focus,.modal select:focus{border-color:var(--accent);box-shadow:var(--ring)}
.modal input.invalid,.modal textarea.invalid{border-color:var(--danger)}
.modal .form-error{font-size:12px;color:var(--danger);margin:-7px 0 11px}

/* ── Ширина поля = длина того, что в него пишут ─────────────────────────
   Поля по умолчанию тянутся во всю ширину модалки, и это правильно для
   названия дела или заметки. Но дата, срок в днях, процент и число минут
   растягивались на 500 px ради двух знаков: поле обещает больше, чем от
   него ждут, и глазу негде зацепиться за введённое. Ширины — в ch, чтобы
   они держались при смене кегля. */
.modal input.f-xs{width:9ch}      /* процент, число дней */
.modal input.f-sm{width:16ch}     /* дата, минуты/часы */
.modal input.f-md{width:24ch}     /* сумма, номер дела, ИНН */
.modal input.f-dt{width:26ch}     /* дата со временем */
.modal select.f-md{width:24ch}
/* Деньги и другие числа — табличными цифрами: столбик из «7 598 220» и
   «1 850 000» должен сравниваться взглядом, а не пересчитываться. */
.modal input.f-num{font-family:var(--num);font-variant-numeric:tabular-nums;letter-spacing:.01em}
/* Дата с нативным пиктографом календаря: без ограничения ширины он уезжает
   на другой конец модалки от самой даты. */
.modal input[type="date"]{width:16ch;font-family:var(--num);font-variant-numeric:tabular-nums}
.modal textarea{resize:vertical;min-height:74px;line-height:1.5}
/* Суть спора и заметки — то, что действительно пишут абзацами. */
.modal textarea.ta-lg{min-height:132px}
/* Нативные чекбоксы приходили системно-синими — единственный элемент
   продукта не в брендовом индиго. accent-color красит их точно и оставляет
   нативную доступность (в отличие от самодельного .cbx на span). */
.modal input[type="checkbox"], .modal input[type="radio"]{width:auto;margin-bottom:0;accent-color:var(--accent)}
.modal input[type="file"]{width:auto}
/* Строка «чекбокс + подпись». Подпись обёрнута в <span>, потому что сама
   строка — тот же тег <label>, что и ЗАГОЛОВОК поля: он капсом и с разрядкой,
   и без сброса имена файлов в списке «что показать клиенту» превращались
   в «ВНУТРЕННЯЯ ЗАПИСКА.TXT» и переставали узнаваться. */
.modal .chk{display:flex;align-items:flex-start;gap:var(--s2);margin-bottom:9px;cursor:pointer}
.modal .chk input[type="checkbox"]{flex:none;width:15px;height:15px;margin-top:1px}
.modal .chk > span{font-size:13px;line-height:1.45;color:var(--tx);
  font-weight:500;letter-spacing:0;text-transform:none}
/* Подсказка под полем принадлежит полю, а не следующей метке: без отступа
   снизу она слипается с ней. */
.modal .kad-hint{margin:-4px 0 12px}
.ph-list{display:flex;flex-wrap:wrap;gap:var(--s1);margin:6px 0}
.ph-list code{font-family:var(--mono);font-size:10.5px;color:var(--accent-tx);background:var(--accent-bg);
  border:1px solid var(--accent-bd);border-radius:var(--r1);padding:1px 5px}
.modal .actions{display:flex;gap:var(--s2);align-items:center;justify-content:flex-end}
.modal .btn-primary{padding:7px 14px;border:1px solid var(--accent);border-radius:var(--r2);background:var(--accent);
  color:var(--on-accent);font-weight:600;font-size:12.5px;cursor:pointer}
.modal .btn-primary:hover:not(:disabled){background:var(--accent-s);border-color:var(--accent-s)}
.modal .btn-primary:disabled{opacity:.55;cursor:not-allowed}
.modal .btn-cancel{padding:7px 14px;border:1px solid var(--border-strong);border-radius:var(--r2);background:var(--bg2);
  font-size:12.5px;cursor:pointer;color:var(--tx)}
.modal .btn-cancel:hover{border-color:var(--tx3)}

/* ── Карточка судебного дела ───────────────────────────────────────── */
.casecard{max-width:760px;margin:0 auto}
.back-link{background:none;border:none;color:var(--accent-tx);font-size:13px;font-weight:600;cursor:pointer;padding:0;margin-bottom:16px}

/* Вкладки дела (Лента/Разбор/Документы) — портировано из design/v2/prototype.html */
.sc-top{display:flex;align-items:center;gap:var(--s2);margin-bottom:14px;flex-wrap:wrap}
.back{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--bg2);
  border-radius:var(--r2);padding:5px 10px;font-size:12.5px;color:var(--tx2);text-decoration:none;flex:none}
.back:hover{border-color:var(--tx3);color:var(--tx)}
.casetabs{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r2);padding:2px}
.casetabs a{padding:5px 12px;border-radius:var(--r1);font-size:12.5px;color:var(--tx2);text-decoration:none;
  display:inline-flex;gap:6px;align-items:center}
.casetabs a:hover{color:var(--tx)}
.casetabs a.on{background:var(--bg2);color:var(--tx);font-weight:640;box-shadow:var(--sh-xs)}
.casetabs .n{font-family:var(--mono);font-size:10.5px;color:var(--tx3)}
.sc-head{display:flex;align-items:flex-start;gap:var(--s4);margin-bottom:var(--s5)}
.sc-head h1{font-size:22px;font-weight:600;letter-spacing:-.024em}
.sc-head .sub{font-size:13px;color:var(--tx2);line-height:1.55;max-width:82ch}
.sc-head h1+.sub{margin-top:var(--s1)}
.sc-head .act{margin-left:auto;display:flex;gap:var(--s2);align-items:center;flex:none}

/* Переключатель-сегмент (design/v2/prototype.html .seg) — список/доска, все/мои и т.п. */
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r2);padding:2px}
.seg button{border:0;background:none;padding:5px 11px;border-radius:var(--r1);font-size:12.5px;color:var(--tx2);cursor:pointer}
.seg button.on{background:var(--bg2);color:var(--tx);font-weight:640;box-shadow:var(--sh-xs)}

/* Полоса состояния экрана: слева — чем экран сейчас занят, справа — действия.
   Заголовок сюда не ставится, он живёт в шапке приложения. */
.sc-bar{display:flex;align-items:center;gap:var(--s4);margin-bottom:12px;flex-wrap:wrap}
.sc-stat{font-size:13px;color:var(--tx3)}
.sc-stat b{font-weight:660}
.sc-stat b.warn{color:var(--danger)}
.sc-bar .act{margin-left:auto;display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}

/* Поповер действий строки таблицы (кнопка «···») */
.rowact{position:relative}
.rowpop{position:absolute;right:6px;top:calc(100% - 4px);z-index:50;min-width:186px;padding:5px;
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);box-shadow:var(--sh-lg);
  display:grid;gap:1px;text-align:left}
.rowpop button{display:block;width:100%;text-align:left;border:0;background:none;border-radius:var(--r1);
  padding:7px 9px;font-size:12.5px;color:var(--tx2);cursor:pointer}
.rowpop button:hover{background:var(--side);color:var(--tx)}
.rowpop-sep{height:1px;background:var(--border);margin:4px 2px}

/* Две колонки в модалке (стадия + сумма) */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}

/* Панель фильтров над плотной таблицей */
.filters{display:flex;gap:var(--s2);align-items:center;margin-bottom:12px;flex-wrap:wrap}
.filters .inp{flex:1;min-width:180px;background:var(--bg2);border:1px solid var(--border-strong);
  border-radius:var(--r2);padding:7px 11px;font-size:13px;color:var(--tx)}

/* Плотная таблица (design/v2/prototype.html .tbl) — 44px строки, полоса
   срочности слева, использовано списком дел. */
/* Фиксированная раскладка: ширины задаём мы, а не содержимое. Иначе колонка
   «Дело» ужимается под самое короткое название, а название длинного дела
   обрывается многоточием при пустом месте справа. Названию достаётся всё,
   что не забрали служебные колонки. */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
/* Заданные ширины — только на широком экране. На телефоне часть колонок
   скрыта (см. «УЗКИЙ ЭКРАН» ниже), и фиксированная раскладка мешала бы
   таблице ужаться под ширину телефона. */
@media (min-width:901px){
  .tbl{table-layout:fixed;min-width:940px}
  .tbl col.c-stripe{width:3px}
  .tbl col.c-stage{width:158px}
  .tbl col.c-client{width:180px}
  .tbl col.c-lawyer{width:64px}
  .tbl col.c-next{width:186px}
  .tbl col.c-sum{width:132px}
  .tbl col.c-act{width:44px}
}
.tbl thead th{text-align:left;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx3);font-weight:700;padding:8px 10px;border-bottom:1px solid var(--border);
  background:var(--surface-2);white-space:nowrap}
.tbl td{padding:0 10px;border-bottom:1px solid var(--border);height:var(--row);vertical-align:middle}
.tbl tbody tr{cursor:pointer}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .stripe-td{width:3px;padding:0}
.tbl .stripe-td i{display:block;width:3px;height:var(--row);background:transparent}
.tbl tr.crit .stripe-td i{background:var(--danger)}
.tbl tr.soon .stripe-td i{background:var(--warning)}
.tbl .cno{display:block;font-family:var(--mono);font-size:12px;color:var(--tx2);white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl .cno.muted{color:var(--tx3)}
.tbl .ellip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl .next .pill{margin-right:7px}
.tbl-scroll{overflow-x:auto}
.tbl .nm{font-weight:580;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.tbl .stage{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.tbl .sum{font-family:var(--num);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .next{white-space:nowrap;font-size:12.5px}
.tbl .next .num{font-size:12px}
.tbl .rowact{width:34px;padding:0 6px;text-align:right}
.av{width:23px;height:23px;border-radius:50%;background:var(--side);color:var(--tx2);
  display:inline-grid;place-items:center;font-size:10px;font-weight:700}
.rowmenu{border:1px solid transparent;background:none;border-radius:var(--r1);padding:1px 7px;
  color:var(--tx3);line-height:1.2;font-size:14px;cursor:pointer}
.rowmenu:hover{border-color:var(--border-strong);color:var(--tx)}

/* Стадия/статус дела в строке таблицы (design/v2/prototype.html .stage) */
.stage{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:560;white-space:nowrap;color:var(--tx)}
/* Приостановленное и закрытое дело — не «ещё одна стадия», а другое состояние:
   его называет цвет строки, а не значок рядом со словом. */
.stage.s0{color:var(--tx3)}
.stage.sx{color:var(--done)}

/* Честная сноска-подпись источника данных под таблицей/разбором */
.honest{padding:var(--s3) var(--s4);border-top:1px solid var(--border);font-size:11.5px;color:var(--tx3);background:var(--surface-2)}

/* Покрытие обхода картотеки: из скольких дел посчитана цифра над ней.
   Стоит ВПЛОТНУЮ к агрегатам (без отступа сверху), потому что читается как их
   часть, а не как примечание: «67 % удовлетворено» и «разобрано 7 из 900» —
   одно утверждение, разорвав которое мы возвращаем ту самую неправду. */
.cov{padding:10px var(--s4);border-top:1px solid var(--border);background:var(--surface-2);
  display:grid;gap:7px}
.cov-t{font-size:11.5px;line-height:1.45;color:var(--tx3)}
/* Полоса заполнения — доля разобранного. Полная картина отмечена спокойным
   цветом, неполная — цветом внимания: неполнота это не ошибка, но и не норма. */
.cov-bar{height:4px;border-radius:var(--r1);background:var(--surface-3,var(--border));overflow:hidden}
.cov-bar span{display:block;height:4px;border-radius:var(--r1);background:var(--warning);transition:width .2s}
.cov.full .cov-bar span{background:var(--done,var(--accent))}
.cov.full .cov-t{color:var(--tx2)}

/* Уже заведённое дело в выдаче поиска: приглушено и кликается в своё дело, а
   не в галочку. Оно не выбор, а ответ — «это у вас уже есть». */
.found.had{background:var(--surface-2)}
.found.had .no, .found.had .t{color:var(--tx2)}
.cbx.had{display:flex;align-items:center;justify-content:center;color:var(--done);
  font-size:12px;border-color:transparent;background:none}

/* Выбор судьи среди однофамильцев: имя, суд и действие в одну строку. */
.jpick{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;align-items:baseline;
  gap:var(--s3);min-height:var(--row);padding:9px var(--s4);
  border-bottom:1px solid var(--hair);cursor:pointer;transition:.12s}
.jpick:last-child{border-bottom:none}
.jpick:hover{background:var(--surface-2)}
.jpick .t{font-weight:600;font-size:13.5px;color:var(--tx);white-space:nowrap}
.jpick .m{font-size:12px;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:720px){
  .jpick{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}
  .jpick .m{grid-column:1/-1}
}

/* Фильтры выдачи и дочитывание страниц (поиск по ИНН, профиль судьи) */
/* Экран «Старт» центрирован по одной колонке — фильтры центрируются вместе с
   ним, иначе строка уезжает к левому краю и распадается с полем ИНН над ней. */
.start-filters{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--s2);margin-top:var(--s4)}
.start-filters label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--tx3)}
.start-filters input[type=date], .start-filters select{
  height:30px;padding:0 8px;border:1px solid var(--border);border-radius:var(--r1);
  background:var(--bg2);color:var(--tx);font:inherit;font-size:12px}
.start-more{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);
  padding:12px var(--s4);border-top:1px solid var(--border)}
.start-more .ws-muted{font-size:11.5px}

/* Карточка сущности (судья/контрагент/оппонент) — design/v2/prototype.html */
.stat4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border)}
.stat4 div{background:var(--bg2);padding:14px}
.stat4 .v{font-family:var(--num);font-size:22px;font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--tx)}
.stat4 .k{margin-top:4px;font-size:11px;color:var(--tx3)}
.bars{padding:14px;display:grid;gap:var(--s3)}
.bar-row{display:grid;grid-template-columns:150px 1fr 52px;gap:var(--s3);align-items:center;font-size:12.5px;color:var(--tx2)}
.bar-track{display:block;height:8px;border-radius:var(--r1);background:var(--surface-3,var(--border));overflow:hidden}
.bar-fill{display:block;height:8px;border-radius:var(--r1);background:var(--accent)}
.bar-row .p{font-family:var(--num);text-align:right;font-variant-numeric:tabular-nums;font-size:12px;color:var(--tx)}

/* Старт: импорт по ИНН (design/v2/prototype.html) */
/* Старт — экран одной задачи: ввести ИНН. Колонка держится узкой, иначе поле
   на десять цифр растягивается на всю ширину монитора, а текст рядом ломается
   по 70ch и строка обрывается посреди пустоты. Список найденного шире —
   в нём пять колонок. */
.start{max-width:1120px;margin:0 auto}
.start-hero{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg2);
  padding:var(--s5) var(--s6);margin-bottom:14px;text-align:center}
.start-hero h2{font-size:22px;letter-spacing:-.01em}
.start-hero p{margin:8px auto 0;font-size:13.5px;line-height:1.6;color:var(--tx2);max-width:60ch}
.start-in{display:flex;gap:var(--s2);margin:var(--s4) auto 0;flex-wrap:wrap;justify-content:center;max-width:620px}
.start-in input{flex:1;min-width:200px;max-width:280px;background:var(--bg2);border:1px solid var(--border-strong);
  border-radius:var(--r2);padding:11px 14px;font-family:var(--mono);font-size:16px;color:var(--tx);
  letter-spacing:.06em;text-align:center;font-variant-numeric:tabular-nums;outline:none}
.start-in input:focus{border-color:var(--accent);box-shadow:var(--ring)}
.start-in input.invalid{border-color:var(--danger)}
.start-hero .form-error{margin-top:9px;font-size:12px;color:var(--danger)}
.start-note{margin-top:9px;font-size:11.5px;color:var(--tx3)}
.found{display:grid;grid-template-columns:15px 124px 1fr 116px 110px;gap:var(--s3);align-items:center;
  padding:9px 14px;border-bottom:1px solid var(--border);font-size:12.5px;cursor:pointer}
.found:last-of-type{border-bottom:0}
.found:hover{background:var(--surface-2)}
.found .no{font-family:var(--mono);font-size:11.5px;color:var(--live);font-variant-numeric:tabular-nums;white-space:nowrap}
.found .t{font-weight:560;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx)}
.found .m{display:block;font-size:11px;color:var(--tx3);margin-top:2px}
.found .role{font-size:11.5px;color:var(--tx2)}
.found .sum{font-family:var(--num);text-align:right;font-variant-numeric:tabular-nums;color:var(--tx)}
.start-f{display:flex;align-items:center;gap:var(--s3);padding:12px 14px;background:var(--surface-2);
  border-top:1px solid var(--border);flex-wrap:wrap}
.start-f .cnt{font-size:12.5px;color:var(--tx2)}
.start-f .cnt b{font-family:var(--num);color:var(--tx)}
.start-f .sp{flex:1}

/* Настройки (design/v2/prototype.html) */
.set-row{display:grid;grid-template-columns:1fr auto;gap:var(--s4);align-items:center;padding:var(--s3) 14px;border-bottom:1px solid var(--border)}
.set-row:last-child{border-bottom:0}
.set-row .t{font-size:13px;font-weight:580;color:var(--tx)}
.set-row .m{font-size:11.5px;color:var(--tx3);margin-top:3px;line-height:1.45;max-width:64ch}
.switch{width:36px;height:20px;border-radius:var(--r2);background:var(--border);position:relative;flex:none;
  border:1px solid var(--border-strong);cursor:pointer;padding:0}
.switch.on{background:var(--accent);border-color:var(--accent-tx)}
.switch i{position:absolute;top:1px;left:1px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.15s;font-style:normal}
.switch.on i{left:18px}
.switch:disabled{opacity:.6;cursor:default}
.gen{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s4);align-items:start}
.gen.gen-even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.gen.gen-side{grid-template-columns:minmax(0,1fr) 340px}
.subst{border:1px solid var(--border);border-radius:var(--r2);overflow:hidden}
.subst-r{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);padding:8px 11px;border-bottom:1px solid var(--border);font-size:12px}
.subst-r:last-child{border-bottom:0}
.subst-r .k{font-family:var(--mono);color:var(--accent-tx);font-size:11.5px}
.subst-r .v{color:var(--tx2)}
.subst-r .v.none{color:var(--warning)}
.cc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s3);margin-bottom:10px}
.cc-number{font-size:18px;font-weight:700;color:var(--tx);line-height:1.3}
.cc-court{font-size:13px;color:var(--tx2);margin-top:4px}
.cc-status{flex:none;font-size:11px;font-weight:600;padding:4px 10px;border-radius:var(--rp);background:var(--accent-bg);color:var(--accent-tx);white-space:nowrap}
.cc-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.chip{font-size:11px;font-weight:600;padding:3px 9px;border-radius:var(--rp);background:var(--side);color:var(--tx2);border:1px solid var(--border)}
.chip-sum{background:var(--accent-bg);color:var(--accent-tx);border-color:var(--accent-bd)}

/* Значок-статус общего назначения (design/v2/prototype.html .pill) — square
   corners, в отличие от круглого .chip выше; используется вне .ev-строк. */
.pill{font-size:11px;font-weight:640;border-radius:var(--r1);padding:2px 7px;border:1px solid transparent;white-space:nowrap;display:inline-block}
.pill.red{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-bd)}
.pill.amb{background:var(--warning-bg);color:var(--warning);border-color:var(--warning-bd)}
.pill.ind{background:var(--accent-bg);color:var(--accent-tx);border-color:var(--accent-bd)}
.pill.liv{background:var(--live-bg);color:var(--live);border-color:var(--live-bd)}
.pill.grn{background:var(--success-bg);color:var(--success)}
.pill.mut{background:var(--surface-2);color:var(--tx3);border-color:var(--border)}
.cc-actions{margin-bottom:var(--s5)}
.cc-actions .btn-primary{padding:8px 16px;border:none;border-radius:var(--r2);background:var(--accent);color:var(--on-accent);font-weight:600;font-size:13px;cursor:pointer}
.cc-actions .btn-primary:hover:not(:disabled){background:var(--accent-s)}
.cc-actions .btn-primary:disabled{opacity:.6;cursor:default}
.cc-parties{display:flex;align-items:stretch;gap:var(--s2);margin-bottom:var(--s5)}
.cc-party{flex:1;border:1px solid var(--border);border-radius:var(--radius);padding:12px;background:var(--bg2)}
.cc-label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--tx3);margin-bottom:6px}
.cc-org{font-size:13px;font-weight:600;color:var(--tx);cursor:pointer;padding:4px 0}
.cc-org:hover{color:var(--accent-tx)}
.cc-inn{display:block;font-size:11px;font-weight:400;color:var(--tx3)}
.cc-empty{color:var(--tx3)}
.cc-vs{align-self:center;font-size:12px;color:var(--tx3);flex:none}
.cc-section{margin-bottom:var(--s5)}
.cc-section:last-child{margin-bottom:0}
.cc-section h4{font-size:13px;font-weight:700;color:var(--tx);margin-bottom:10px}
.cc-note{font-size:12px;color:var(--tx3);background:var(--side);border-radius:var(--radius);padding:12px}

/* ── Мои дела: просмотр/редактирование ─────────────────────────────── */
.modal select{width:100%;margin-bottom:11px}
.modal .btn-delete{padding:7px 14px;border:1px solid var(--danger-bd);border-radius:var(--r2);background:var(--danger-bg);
  color:var(--danger);font-size:12.5px;font-weight:600;cursor:pointer}
.modal .btn-delete:disabled{opacity:.6;cursor:default}

/* ── Досье по делу (рабочее пространство) ──────────────────────────── */
.workspace{max-width:1000px}
.ws-title{font-size:20px;font-weight:700;line-height:1.25}
.ws-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.ws-span2{grid-column:1 / -1}
.ws-muted{font-size:13px;color:var(--tx3);line-height:1.5}
.ws-error{font-size:13px;color:var(--late)}
/* Кнопка строки/панели (design/v2 .btn-sm): нейтральная по умолчанию,
   .pri — единственное главное действие экрана, .danger — разрушающее. */
.btn-sm{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:1px solid var(--border-strong);
  border-radius:var(--r2);background:var(--bg2);color:var(--tx);font-size:12.5px;font-weight:580;cursor:pointer;
  text-decoration:none;white-space:nowrap;transition:.12s}
.btn-sm:hover:not(:disabled){border-color:var(--tx3)}
.btn-sm.pri{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn-sm.pri:hover:not(:disabled){background:var(--accent-s);border-color:var(--accent-s)}
.btn-sm.danger{border-color:var(--danger-bd);background:var(--danger-bg);color:var(--danger)}
.btn-sm:disabled{opacity:.5;cursor:not-allowed}
/* Выключенное главное действие не бледнеет, а становится нейтральным:
   полупрозрачный индиго читается как сломанная кнопка, а не как «нельзя».
   Ровно тот же приём для .btn-primary модалок ниже. */
.btn-sm.pri:disabled, .modal .btn-primary:disabled{opacity:1;background:var(--surface-3);
  border-color:var(--border-strong);color:var(--tx3);box-shadow:none;transform:none}
/* Скелетон списка: строки высотой 44px — экран не прыгает при загрузке.
   .skel — тот же примитив для любого блока (журнал, обращения, разбор). */
.tdy-skeleton{display:grid;gap:var(--s2)}
.skel, .tdy-skeleton i{display:block;height:var(--row);border-radius:var(--radius);
  background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%);
  background-size:400% 100%;animation:sk 1.4s ease infinite}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}

.ws-source{font-size:11px;color:var(--tx3);margin-top:12px;text-align:right}

/* ── Форматированный ответ ИИ (чат + оценка дела) ─────────────────── */
.ai-p{margin:0 0 8px}
.ai-p:last-child{margin-bottom:0}
.ai-h{margin:14px 0 6px;color:var(--tx);font-weight:700}
h3.ai-h{font-size:14px}
h4.ai-h{font-size:13px;font-weight:600}
.ai-list{margin:6px 0 10px;padding-left:var(--s5)}
.ai-list li{margin:3px 0}
.ai-quote{border-left:2px solid var(--border-strong);padding:6px 12px;margin:8px 0;color:var(--tx2)}
.deadline{display:flex;align-items:center;gap:var(--s2);padding:8px 10px;border:1px solid var(--border);border-radius:var(--r2);background:var(--bg2)}
.deadline.done{opacity:.55}
.deadline.overdue{border-color:var(--danger-bd);background:var(--danger-bg)}
.deadline input[type=checkbox]{width:16px;height:16px;cursor:pointer;flex-shrink:0}
.deadline-add{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.deadline-add input{height:30px;padding:0 10px;border:1px solid var(--border-strong);border-radius:var(--r1);
  font-size:12px;outline:none;background:var(--bg2);color:var(--tx)}
.deadline-add input[type="date"]{font-family:var(--mono);font-size:11.5px;color:var(--tx2)}
.deadline-add input:first-child{flex:1;min-width:200px}
.deadline-add input:focus{border-color:var(--accent);box-shadow:var(--ring)}

.judge-name{font-size:15px;font-weight:700;color:var(--tx)}
.judge-name.link{cursor:pointer}
.judge-name.link:hover{color:var(--accent-tx)}
.judge-court{font-size:12px;color:var(--tx3);margin-top:2px;margin-bottom:12px}
.judge-nums{display:flex;gap:var(--s4);font-size:12px;color:var(--tx2)}
.judge-nums b{color:var(--tx)}

/* Сторона — строка справочника, а не карточка: внутри панели без рамки
   карточки сторон оставались единственными коробками на экране. */
.party{border:0;border-bottom:1px solid var(--hair);border-radius:0;padding:10px 0;cursor:pointer;
  transition:.12s;min-width:0;background:none}
.party:last-of-type{border-bottom:0}
.party:hover .party-name{text-decoration:underline;text-decoration-color:var(--border-strong);
  text-underline-offset:2px}
/* Названия юрлиц из ЕГРЮЛ бывают в 80 символов и без пробелов в кавычках —
   в узкой правой колонке досье они обязаны переноситься, а не распирать её. */
.party-name{font-size:13px;font-weight:600;color:var(--tx);overflow-wrap:anywhere}
.party-ids{display:flex;flex-wrap:wrap;gap:var(--s2);font-size:11px;color:var(--tx3);margin-top:2px}
.party-line{font-size:11px;color:var(--tx2);margin-top:3px;line-height:1.4}
.party-stats{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:7px;font-size:11px;color:var(--tx2)}
.party-stats .ps-main{font-weight:700;color:var(--accent-tx)}
.party-nostat{font-size:11px;color:var(--tx3);margin-top:6px;font-style:italic}

.kad-summary{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.kad-summary>div{font-size:13px;color:var(--tx)}
.kad-k{display:inline-block;width:110px;font-size:11px;color:var(--tx3);text-transform:uppercase;letter-spacing:.03em}
.kad-timeline{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--border);padding-top:12px}
.kad-event{display:flex;gap:var(--s2);font-size:12px}
.kad-event-date{flex:none;width:90px;color:var(--tx3)}
.kad-event-title{color:var(--tx2)}
@media(max-width:760px){.ws-grid{grid-template-columns:1fr}}

/* ── Источники под ответом ИИ (материалы дела) ─────────────────────── */
.sources{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--border)}
.ws-count{display:inline-block;font-size:11px;font-weight:700;color:var(--tx3);margin-left:4px}


/* Связанные дела */
.link-list{display:flex;flex-direction:column;gap:6px}
.link-row{display:flex;align-items:center;gap:var(--s2);padding:9px 10px;border:1px solid var(--border);
  border-radius:var(--r2);background:var(--bg2);box-shadow:var(--sh-xs)}
.link-row-body{flex:1;min-width:0}
.link-row-k{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--tx3)}
.link-row-t{font-size:13px;font-weight:600;margin-top:2px}
.link-row-m{font-size:11.5px;color:var(--tx3);margin-top:2px}
.doc-btn{padding:5px 9px;border:1px solid var(--border);border-radius:var(--r1);background:var(--bg2);font-size:11px;font-weight:600;color:var(--tx2);cursor:pointer;transition:.12s}
.doc-btn:hover:not(:disabled){border-color:var(--accent-bd);color:var(--accent-tx)}
.doc-btn:disabled{opacity:.45;cursor:default}
.doc-btn-danger:hover:not(:disabled){border-color:var(--danger-bd);color:var(--danger)}
.doc-review{margin-top:14px;border:1px solid var(--accent-bd);border-radius:var(--r2);padding:14px;background:var(--accent-bg)}
.doc-review-head{display:flex;align-items:center;gap:var(--s2);font-size:13px;margin-bottom:10px}
.doc-review-summary{font-size:13px;line-height:1.6;color:var(--tx);margin-bottom:10px}
.doc-review-block{margin-bottom:10px}
.doc-review-block h4{font-size:12px;font-weight:700;color:var(--tx);margin-bottom:5px}
.doc-review-block ul{margin:0;padding-left:var(--s4)}
.doc-review-block li{font-size:12.5px;line-height:1.55;color:var(--tx2);margin:3px 0}

/* Разбор дела — портировано из design/v2/prototype.html (.wb/.pick/.an-block),
   на существующих токенах проекта (--accent вместо --indigo, --live как есть,
   --warning/--danger/--success вместо --amber/--red/--green, --radius вместо --r). */
/* Разбор: материалы — слева, результат — по центру, чат по делу — СПРАВА.
   Три колонки держатся до планшета: чат под текстом читается как «ещё один
   блок внизу», а он должен быть собеседником рядом с материалами. */
.wb{display:grid;grid-template-columns:280px minmax(0,1fr) 300px;gap:var(--s4);align-items:start}
.wb .an-block:first-child{margin-top:0}
/* Центр — единственная колонка, которая листается страницей. Высота в экран
   не даёт трём панелям разъезжаться: пустой разбор — карточка на 420 px, и
   без этого рядом с ней зияли два столбца белого. */
.an-main{min-height:calc(100vh - 130px);display:flex;flex-direction:column}
/* Обещание вместо пустоты стоит по центру колонки, а не жмётся к потолку:
   прижатая вверх карточка на 420 px оставляла под собой полосу белого. */
.an-main > .an-zero{margin-top:auto;margin-bottom:auto}
@media (max-width:1180px){.wb{grid-template-columns:250px minmax(0,1fr) 270px;gap:var(--s3)}}
@media (max-width:1000px){
  .wb{grid-template-columns:minmax(0,1fr) 280px}
  .wb > .pick{grid-column:1 / -1}
  /* Во всю ширину панель материалов больше не колонка — липкость и потолок
     высоты снимаем, иначе список актов прокручивается внутри полосы. */
  .wb > .pick{position:static;max-height:none;overflow:visible}
  .wb > .pick .pick-f{position:static}
  .an-main{min-height:0}
}
@media (max-width:760px){
  .wb{grid-template-columns:1fr}
  /* На телефоне панель во всю ширину экрана: липкая колонка в 100vh посреди
     страницы отбирает весь экран у результата, ради которого сюда пришли. */
  .wb .chat{position:static;height:auto;max-height:none}
  .wb .chat-msgs{max-height:52vh}
}

/* Чат по делу — панель рядом с материалами (design/v2/prototype.html .chat),
   а не отдельный раздел меню: спрашивают всегда про открытое дело. */
/* Панель занимает высоту экрана и прокручивается внутри себя: разбор в центре
   может быть длинным, а собеседник обязан оставаться на виду. */
.chat{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg2);display:flex;
  flex-direction:column;overflow:hidden;position:sticky;top:14px;height:calc(100vh - 130px);min-height:420px}
.chat-h{padding:9px var(--s3);background:var(--surface-2);border-bottom:1px solid var(--hair);display:flex;
  align-items:center;gap:var(--s2);font-size:12px;font-weight:680;color:var(--tx)}
.chat-h .ctx{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--live)}
.chat-msgs{padding:12px var(--s3);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s2);align-content:start;flex:1;min-height:0;overflow-y:auto}
/* Пока разговора нет, приглашение стоит рядом с подсказками внизу панели, а
   не под самой шапкой в четырёхстах пикселях от них. */
.chat-msgs:has(> .ws-muted:only-child){align-content:end}
.bub{font-size:12.5px;line-height:1.55;padding:9px 11px;border-radius:var(--r2);background:var(--surface-2);
  color:var(--tx2);border:1px solid var(--hair);white-space:pre-wrap;word-break:break-word}
.bub.me{background:var(--accent);color:var(--on-accent);border-color:var(--accent);justify-self:end;max-width:88%}
.bub b{color:var(--tx);font-weight:620}
.bub .cite-chip{cursor:pointer}
.chat-sugs{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:0 var(--s3) 11px}
.chat-sugs button{text-align:left;border:1px solid var(--border);background:var(--bg2);border-radius:var(--r2);
  padding:7px 10px;font-size:12px;color:var(--tx2);cursor:pointer}
.chat-sugs button:hover{border-color:var(--accent-bd);color:var(--accent-tx)}
.chat-in{display:flex;gap:7px;padding:11px var(--s3);border-top:1px solid var(--hair);background:var(--surface-2)}
.chat-in .f{flex:1;background:var(--bg2);border:1px solid var(--border-strong);border-radius:var(--r2);padding:8px 10px;
  font-size:12.5px;color:var(--tx);font-family:inherit;outline:none;resize:none}
.chat-in .f:focus{border-color:var(--accent);box-shadow:var(--ring)}
.chat-in .go{width:34px;border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);border-radius:var(--r2);
  font-weight:700;cursor:pointer}
.chat-in .go:disabled{opacity:.5;cursor:not-allowed}

/* Панель материалов — такая же липкая колонка с внутренней прокруткой, как
   чат справа. У дела с живой картоткой актов бывает три десятка: панель
   уезжала на 2300 px вниз, а результат в центре кончался на 420 px — две
   трети экрана оставались пустыми. Подсказка сверху и бюджет с кнопкой
   снизу прибиты к краям панели (тот же приём, что у шапки/подвала модалки),
   поэтому «Собрать разбор» видно, до какого бы места ни долистали список. */
.pick{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg2);
  overflow-y:auto;position:sticky;top:14px;max-height:calc(100vh - 130px)}
.pick-g{padding:8px 12px;background:var(--surface-2);border-bottom:1px solid var(--border);border-top:1px solid var(--border);
  font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--tx3);
  display:flex;align-items:center;gap:7px}
.pick > .pick-g:first-child{border-top:0}
.pick-g .n{margin-left:auto;font-family:var(--mono);font-weight:600;letter-spacing:0}
/* minmax(0,…) обязателен: без него длинное название акта раздвигает сетку и
   кнопка «Извлечь» уезжает за край карточки. */
.pick-i{display:grid;grid-template-columns:15px minmax(0,1fr) auto;gap:var(--s2);align-items:start;padding:8px 12px;
  border-bottom:1px solid var(--border);font-size:12.5px;cursor:pointer}
.pick-i:last-child{border-bottom:0}
.pick-i>.btn-sm{white-space:nowrap}
.pick-i:hover{background:var(--surface-2)}
.pick-i.sub{padding-left:var(--s6)}
.pick-i.off{opacity:.55;cursor:default}
.cbx{width:14px;height:14px;margin-top:2px;border:1.5px solid var(--border-strong);border-radius:var(--r1);
  position:relative;background:var(--bg2);flex:none;display:block;padding:0;appearance:none}
.cbx.on{background:var(--accent);border-color:var(--accent-tx)}
.cbx.on::after{content:"";position:absolute;left:3.4px;top:1px;width:5px;height:8px;
  border:solid #fff;border-width:0 1.7px 1.7px 0;transform:rotate(40deg)}
.pick-i .t{line-height:1.35;font-weight:540;color:var(--tx)}
.pick-i .m{display:block;font-size:11px;color:var(--tx3);margin-top:2px}
.pick-i .pg, .pick-i .agg{font-family:var(--mono);font-size:10.5px;color:var(--tx3);white-space:nowrap;margin-top:2px;display:block}
.pick-i .agg{color:var(--live)}
.pick-f{padding:11px 12px;background:var(--surface-2);border-top:1px solid var(--border);display:grid;
  grid-template-columns:minmax(0,1fr);gap:var(--s2);position:sticky;bottom:0;z-index:3}
.pick-f .btn-sm{width:100%;text-align:center;display:block}
/* Заголовок группы липкий: пролистав до «Моих документов», видно, где ты. */
.pick-g{position:sticky;top:0;z-index:2}

.budget{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.budget .cnt{font-size:12px;color:var(--tx2)}
.budget .cnt b{font-family:var(--num);color:var(--tx)}
.budget .bar{height:6px;border-radius:3px;background:var(--border);overflow:hidden}
.budget .bar i{display:block;height:6px;background:var(--live);border-radius:3px;transition:width .18s}
.budget .bar i.over{background:var(--warning)}
.budget .hint{font-size:11px;color:var(--tx3);line-height:1.45}
.budget .hint b{color:var(--warning)}

/* Статус распознавания текста материала */
.tstat{font-family:var(--mono);font-size:10px;border-radius:var(--r1);padding:1px 5px;border:1px solid transparent;white-space:nowrap}
.tstat.layer{background:var(--surface-2);color:var(--tx3);border-color:var(--border)}
.tstat.none{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-bd)}

.verbar{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s4);border:1px solid var(--border);
  border-radius:var(--radius);background:var(--bg2);margin-bottom:var(--s4);flex-wrap:wrap}
.verbar .v{font-size:13px;font-weight:640;color:var(--tx)}
.verbar .m{font-family:var(--mono);font-size:11.5px;color:var(--tx3)}
.verbar .r{margin-left:auto;display:flex;gap:7px;flex-wrap:wrap}

.an-block{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg2);overflow:hidden;margin-bottom:var(--s3)}
.an-block-h{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s4);border-bottom:1px solid var(--border);background:var(--surface-2)}
.an-block-h h4{font-size:12.5px;font-weight:680;color:var(--tx)}
.an-block-h .cnt{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--tx3)}
.an-item{padding:11px 14px;border-bottom:1px solid var(--border);font-size:13px;line-height:1.55;color:var(--tx2)}
.an-item:last-child{border-bottom:0}
.an-item .lead{display:block;color:var(--tx);font-weight:580;margin-bottom:3px}
.an-item-empty{padding:11px 14px;font-style:italic;color:var(--tx3);font-size:12.5px}
/* Пустой центр вкладки «Разбор»: обещание вместо пустоты — юрист заранее
   видит, из чего состоит результат и что цитата обязательна. */
.an-zero{border:1px dashed var(--border-strong);border-radius:var(--radius);background:var(--bg2);padding:var(--s5) var(--s5)}
.an-zero h4{font-size:14px;font-weight:700;color:var(--tx);margin-bottom:7px}
.an-zero p{font-size:12.5px;line-height:1.6;color:var(--tx2)}
.an-zero-steps{list-style:none;display:grid;gap:6px;margin:14px 0}
.an-zero-steps li{display:flex;align-items:center;gap:var(--s2);font-size:12.5px;color:var(--tx2)}
.an-zero-steps .n{display:grid;place-items:center;width:19px;height:19px;border-radius:var(--r1);flex:none;
  background:var(--surface-2);border:1px solid var(--border);font-family:var(--mono);font-size:10.5px;color:var(--tx3)}
/* inline-block, а не inline-flex: у флекс-контейнера text-overflow не
   срабатывает, и длинное название материала обрезалось посреди слова без
   многоточия («…категория, хроно»). Полное название — в title. */
.cite-chip{display:inline-block;font-family:var(--mono);font-size:10px;line-height:1.5;
  border:1px solid var(--accent-bd);background:var(--accent-bg);color:var(--accent-tx);border-radius:var(--r1);
  padding:1px 5px;margin-left:5px;white-space:nowrap;max-width:min(230px,100%);overflow:hidden;text-overflow:ellipsis;
  vertical-align:middle}

.plan-item{display:grid;grid-template-columns:1fr auto;gap:var(--s3);align-items:center;padding:11px 14px;
  border-bottom:1px solid var(--border);font-size:13px}
.plan-item:last-child{border-bottom:0}
.plan-item .t{font-weight:580;color:var(--tx)}
.plan-item .m{font-size:11.5px;color:var(--tx3);margin-top:2px}
.doc-review-risks h4{color:var(--late)}

/* Обобщённый контейнер-блок (design/v2/prototype.html .block) — используется
   вкладкой «Документы» и далее другими перестроенными экранами. */
.block{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg2);overflow:hidden}
.block+.block{margin-top:14px}
.block-h{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s4);border-bottom:1px solid var(--border);
  background:var(--surface-2);flex-wrap:wrap}
.block-h h2{white-space:nowrap}
.block-h .cnt{white-space:nowrap}
.block-h h2{font-size:13px;letter-spacing:0;font-weight:680;color:var(--tx);font-family:var(--display)}
.block-h .cnt{font-family:var(--mono);font-size:11px;color:var(--tx3);background:var(--bg2);border:1px solid var(--border);border-radius:var(--r1);padding:1px 6px}
.block-h .r{margin-left:auto;display:flex;gap:var(--s2);align-items:center}

/* Таблица документов дела (design/v2/prototype.html .dtable) */
.tbl-scroll{overflow-x:auto}
/* Ширины задаём мы: имя файла — единственное, что должно тянуться, остальные
   колонки известной длины. Без этого имя собранного NORMA черновика
   («шаблон — название дела.docx») переносится на шесть строк при пустой
   половине таблицы. */
.dtable{width:100%;border-collapse:collapse;font-size:13px}
@media (min-width:901px){
  .dtable{table-layout:fixed;min-width:900px}
  .dtable col.c-src{width:132px}
  .dtable col.c-txt{width:186px}
  .dtable col.c-who{width:210px}
  .dtable col.c-acts{width:252px}
}
.dtable thead th{text-align:left;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);
  font-weight:700;padding:8px 12px;background:var(--surface-2);border-bottom:1px solid var(--border);white-space:nowrap}
.dtable td{padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
.dtable tbody tr:hover{background:var(--surface-2)}
.dtable tbody tr:last-child td{border-bottom:0}
.dtable .fn{font-weight:560;display:flex;align-items:center;gap:var(--s2);color:var(--tx);min-width:0}
.dtable .fn span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dtable .fn .ic{width:24px;height:28px;border:1px solid var(--border-strong);border-radius:3px;flex:none;display:grid;
  place-items:center;font-family:var(--mono);font-size:8px;color:var(--tx3);background:var(--surface-2)}
.dtable .d{font-family:var(--num);font-size:11.5px;color:var(--tx3);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;display:block}
.dtable .acts{display:flex;gap:6px;justify-content:flex-end;align-items:center}
.dtable .acts .btn-sm{white-space:nowrap}
/* Ячейка с действиями — точка отсчёта для поповера «···». */
.dtable td.rowact{position:relative}
.rowpop button.danger{color:var(--danger)}
.rowpop button:disabled{opacity:.45;cursor:default}
.rowpop button:disabled:hover{background:none;color:var(--tx2)}

/* ── Оверлей с текстом документа ───────────────────────────────────── */
.doc-overlay{position:fixed;inset:0;z-index:50;background:color-mix(in srgb,var(--dom) 42%,transparent);display:flex;align-items:flex-start;justify-content:center;padding:48px 16px;overflow-y:auto}
.doc-modal{position:relative;width:100%;max-width:760px;background:var(--raise);border-radius:var(--r3);box-shadow:var(--sh-lg);padding:24px var(--s6);animation:docIn .15s ease}
@keyframes docIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.doc-close{position:absolute;top:14px;right:16px;width:30px;height:30px;border:none;border-radius:var(--r2);background:var(--bg);color:var(--tx2);font-size:15px;cursor:pointer}
.doc-close:hover{background:var(--border);color:var(--tx)}
.doc-loading, .doc-error{padding:var(--s7) 8px;text-align:center;color:var(--tx2)}
.doc-error h3{color:var(--tx);margin-bottom:6px}
.doc-title{font-size:16px;font-weight:700;color:var(--tx);margin-bottom:12px;padding-right:var(--s6);border-bottom:1px solid var(--border);padding-bottom:12px}
.doc-text{max-height:62vh;overflow-y:auto;font-size:12.5px;line-height:1.6;color:var(--tx);white-space:pre-wrap;font-family:inherit}

/* ── Картотека КАД ─────────────────────────────────────────────────── */
.cc-sync{font-size:11px;color:var(--tx3);margin:-8px 0 14px}
.cc-enriching{font-size:12px;color:var(--live-s);background:var(--live-bg);border:1px solid var(--live-bd);border-radius:var(--radius);padding:8px 12px;margin:0 0 14px}
.cc-note a{color:var(--accent-tx)}

/* ── Команда (design/v2: обычные .block/.mini, как настройки и журнал) ── */
.tm-row{display:flex;align-items:center;gap:var(--s3);padding:10px 14px;border-bottom:1px solid var(--hair)}
.tm-row:last-child{border-bottom:0}
.tm-who{flex:1;min-width:0}
.tm-who .t{font-size:13px;font-weight:600;color:var(--tx)}
.tm-who .m{font-size:11px;color:var(--tx3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-you{display:inline-block;margin-left:7px;font-size:10px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--accent-tx)}
.tm-row select{padding:5px var(--s5) 5px 9px;font-size:12px;background-position:right 8px center}
.tm-link{border:1px solid var(--accent-bd);background:var(--accent-bg);border-radius:var(--r2);padding:11px}
.tm-link .k{font-size:11.5px;color:var(--tx2);line-height:1.45;margin-bottom:8px}
.tm-copy{display:flex;gap:7px}
.tm-copy .inp{flex:1;min-width:0;font-size:11px;border-color:var(--accent-bd)}
.join-screen{display:flex;align-items:center;justify-content:center;min-height:60vh}
.empty a, .empty .router-link-active{color:var(--accent-tx)}

/* ── Карточка КАД: третьи/иные лица + документы дела ───────────────────── */
.cc-extra-parties{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s5)}
.cc-extra-party{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2)}
.cc-org-inline{font-size:12.5px;color:var(--tx);cursor:pointer}
.cc-org-inline:hover{color:var(--accent-tx)}
.cc-inn-inline{font-size:11px;color:var(--tx3);margin-left:4px}
.cc-inst-groups{display:flex;flex-direction:column;gap:var(--s2)}
.cc-inst-group{border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;background:var(--bg2)}
.cc-inst-head{display:flex;align-items:flex-start;gap:var(--s2);width:100%;padding:10px 12px;background:var(--side);cursor:pointer;color:var(--tx)}
.cc-inst-head:hover{filter:brightness(.98)}
.cc-inst-head.open{border-bottom:1px solid var(--border)}
.cc-inst-chev{flex:none;color:var(--tx3);font-size:11px;width:12px;margin-top:3px}
.cc-inst-main{flex:1;min-width:0}
.cc-inst-line1{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.cc-inst-name{font-weight:600;font-size:13px}
.cc-inst-num{color:var(--accent-tx);font-weight:600;font-size:12px}
.cc-inst-date{font-size:11px;color:var(--tx3)}
.cc-inst-count{margin-left:auto;flex:none;font-size:11px;color:var(--tx3)}
.cc-inst-court{font-size:12px;color:var(--tx2);margin-top:2px}
.cc-inst-result{font-size:12px;color:var(--tx);margin-top:3px;line-height:1.35}
.cc-inst-pdf{flex:none;align-self:center}
.cc-inst-group .cc-docs{padding:8px}
.cc-docs{display:flex;flex-direction:column;gap:6px}
.cc-doc{display:flex;align-items:center;gap:var(--s2);padding:9px 10px;border:1px solid var(--border);border-radius:var(--r2);background:var(--bg2)}
.cc-doc-ico{flex:none;font-size:16px}
.cc-doc-body{flex:1;min-width:0}
.cc-doc-title{font-size:13px;font-weight:600;color:var(--tx);line-height:1.35}
.cc-doc-meta{font-size:11px;color:var(--tx3);margin-top:2px}
.cc-doc--act{border-color:var(--accent-bd)}
.cc-doc-type{font-weight:600;color:var(--tx2)}
.cc-doc-sub{font-size:11px;color:var(--tx3);margin-top:2px;opacity:.8}
.cc-doc-acts{font-size:11px;font-weight:500;color:var(--accent-tx);margin-left:8px}
.cc-doc-hint{font-size:11px;color:var(--tx3);margin-top:8px}

/* ══════════ ЯЗЫК ФОРМЫ ══════════════════════════════════════════════════
   Раньше здесь лежал «премиум-полиш»: тени под кнопками, индиговые свечения
   и градиенты, добавленные поверх готовых экранов. Ни одно из этих правил не
   меняло структуру — они и делали продукт «одной карточкой, повторённой
   73 раза». Вместо них — уровень поверхности, один на класс сущности. */
html, body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible{outline:none;box-shadow:var(--ring)}

/* ЛИСТ: волосяная рамка, без тени. */
.block, .tdy-block, .inb-grp, .an-block, .pick, .chat, .verbar, .an-zero,
.cc-inst-group, .deadline, .party, .errstate, .cs-bcard, .an-kpi, .cl-hero{
  box-shadow:none;background:var(--sheet);border-color:var(--border)}
.cc-inst-group{border-radius:var(--r2)}
/* ПРИПОДНЯТОЕ: тень, без рамки. */
.modal, .doc-modal, .rowpop, .who-menu, .pal, .toast, .auth-card{
  background:var(--raise);border:0;box-shadow:var(--sh-lg)}
.cc-inst-head{padding:12px 14px;transition:.12s}
.cc-inst-head:hover{filter:none;background:var(--tint)}
.cc-inst-name{font-size:13.5px}
.cc-doc{border-radius:var(--r1);transition:.12s}
.cc-doc--act{border-color:var(--live-bd);background:var(--live-bg)}
.deadline{border-radius:var(--r1);transition:.12s}
.deadline.overdue{background:var(--late-bg);border-color:var(--late-bd)}

/* ══════════ ДЕЛА (премиум список + доска) ══════════ */
.cs-board{max-width:1040px;margin-left:auto;margin-right:auto}
.cs-filter{height:34px;padding:0 var(--s6) 0 12px;border-radius:var(--r2);font-size:12px}
.cs-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.cs-chip{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:var(--rp);font-size:11px;font-weight:600;background:var(--side);color:var(--tx2);border:1px solid var(--border)}
.cs-chip-kad{background:var(--live-bg);color:var(--live-s);border-color:var(--live-bd)}
.kad-lookup{display:flex;gap:var(--s2);align-items:flex-start}
.kad-lookup input{flex:1}
.kad-lookup-btn{flex:none;padding:0 14px;border:1px solid var(--border-strong);border-radius:var(--r2);background:var(--bg2);
  font-size:12.5px;font-weight:600;cursor:pointer;height:38px;margin-top:0}
.kad-resolved{margin-top:8px;border:1px solid var(--live-bd);background:var(--live-bg);border-radius:var(--r2);padding:9px 11px;font-size:12px}
.kad-resolved .t{font-weight:700;color:var(--live-s)}
.kad-resolved .m{color:var(--tx2);margin-top:3px;line-height:1.5}
.kad-error{margin-top:8px;font-size:12px;color:var(--danger)}
.kad-hint{margin-top:6px;font-size:11.5px;color:var(--tx3)}
.cs-av{width:28px;height:28px;border-radius:50%;background:var(--accent-bg);color:var(--accent-tx);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;flex:none}
.cs-av.sm{width:22px;height:22px;font-size:9px}
/* Доска *//* Доска стадий — горизонтальная полоса колонок с прокруткой: стадий семь,
   в четыре колонки они переносятся на вторую строку и доска перестаёт
   читаться как путь дела. */
.cs-board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(226px,1fr);gap:var(--s3);
  overflow-x:auto;padding-bottom:6px;align-items:start;max-width:none}
.cs-bcol{background:var(--side);border-radius:var(--r3);padding:var(--s3)}
.cs-bcol-h{display:flex;align-items:center;justify-content:space-between;padding:2px 6px 12px}
.cs-bcol-name{font-size:12px;font-weight:700}
.cs-bcol-name.st-open, .cs-bcol-name.st-in_progress{color:var(--accent-tx)}
.cs-bcol-name.st-on_hold{color:var(--warning)}.cs-bcol-name.st-closed{color:var(--success)}
.cs-bcol-h .n{font-size:11px;font-weight:700;color:var(--tx3)}
.cs-bcard{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);padding:var(--s3);margin-bottom:var(--s2);box-shadow:var(--sh-xs);cursor:pointer;transition:.12s}
.cs-bcard:hover{border-color:var(--accent-bd);box-shadow:var(--sh-sm)}
.cs-bcard-t{font-size:13px;font-weight:600;line-height:1.35}
.cs-bcard-f{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.cs-bcard-date{font-size:11px;color:var(--tx3)}
.cs-bcol-empty{text-align:center;color:var(--tx3);font-size:12px;padding:10px 0}
@media(max-width:900px){.cs-board{grid-auto-columns:minmax(210px,80vw)}}
@media(max-width:640px){.cs-board{grid-auto-columns:minmax(200px,84vw)}}

/* ══════════ СЕГОДНЯ: одна лента вместо четырёх экранов ══════════
   Один примитив строки (.ev) на всё: полоса слева кодирует срочность,
   те же классы работают и в календаре, и внутри дела. */
.tdy-wrap{max-width:1000px;margin:0 auto}
/* Заголовок «Сегодня» живёт в шапке приложения — на самом экране его нет
   (иначе название дублируется, дефект №2 из docs/NORMA_v2.md). */

.tdy-block{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;margin-bottom:var(--s4)}
.tdy-block-h{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s4);border-bottom:1px solid var(--hair);
  background:var(--surface-2)}
.tdy-block-h h2{font-size:13px;font-weight:680;font-family:var(--display)}
.tdy-block-h .cnt{font-size:11px;font-family:var(--mono);color:var(--tx3);background:var(--bg2);
  border:1px solid var(--border);border-radius:var(--r1);padding:1px 6px}
.tdy-block-h .r{margin-left:auto;display:flex;gap:var(--s2);align-items:center}
.tdy-block-h .live{margin-left:auto;font-size:11px;font-weight:640;color:var(--live-s);display:flex;align-items:center;gap:6px}
.tdy-block-h .live i{width:6px;height:6px;border-radius:50%;background:var(--live);
  animation:pulse-dot 2.4s ease-in-out infinite}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

/* Сетка, а не флекс: дата фиксированной колонкой, название и подпись — двумя
   строками. На флексе .t и .m склеивались в одну строку без просвета. */
.ev{display:grid;grid-template-columns:3px 62px 1fr auto;align-items:center;gap:var(--s3);
  min-height:var(--row);padding:7px 14px 7px 0;border-bottom:1px solid var(--hair);
  cursor:pointer;transition:.12s;text-decoration:none;color:inherit}
.ev:last-child{border-bottom:none}
.ev:hover{background:var(--surface-2)}
.ev .stripe{align-self:stretch;border-radius:0 2px 2px 0;background:transparent}
.ev.crit .stripe{background:var(--danger)}
.ev.soon .stripe{background:var(--warning)}
.ev.hear .stripe{background:var(--accent)}
.ev.kad .stripe{background:var(--live)}
.ev.task .stripe{background:var(--border-strong)}
.ev.done .t{color:var(--tx3);text-decoration:line-through}
.ev .when{font-family:var(--num);font-size:12px;color:var(--tx2);font-variant-numeric:tabular-nums;
  text-align:right;line-height:1.25}
.ev .when small{display:block;font-family:inherit;font-size:10.5px;color:var(--tx3)}
.ev .body{min-width:0;display:block}
.ev .t{display:block;font-size:13.5px;font-weight:580;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev .m{display:block;font-size:12px;color:var(--tx3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev .m b{color:var(--tx2);font-weight:560}
.ev .right{display:flex;align-items:center;gap:var(--s2);flex:none}
/* Действие строки появляется по наведению: лента должна читаться как список
   событий, а не как панель кнопок. На тач-устройствах оно видно всегда —
   там наведения нет. */
.ev .row-act{opacity:0;transition:opacity .12s}
.ev:hover .row-act, .ev:focus-within .row-act{opacity:1}
@media (hover:none){.ev .row-act{opacity:1}}
.ev .pill{font-size:11px;font-weight:640;border-radius:var(--r1);padding:2px 7px;white-space:nowrap;border:1px solid transparent}
.ev .pill.red{color:var(--danger);background:var(--danger-bg);border-color:var(--danger-bd)}
.ev .pill.amb{color:var(--warning);background:var(--warning-bg);border-color:var(--warning-bd)}
.ev .pill.ind{color:var(--accent-tx);background:var(--accent-bg);border-color:var(--accent-bd)}
.ev .pill.liv{color:var(--live-s);background:var(--live-bg);border-color:var(--live-bd)}
.ev .pill.grn{color:var(--success);background:var(--success-bg);border-color:var(--success-bd)}
.ev .pill.mut{color:var(--tx3);background:var(--surface-2);border-color:var(--border)}
/* Подпись источника строки: «введено вручную» / «картотека» / «рассчитано» */
.ev .src{font-family:var(--mono);font-size:10.5px;color:var(--tx3);letter-spacing:-.01em;white-space:nowrap;
  min-width:104px;text-align:right}
.tdy-empty{padding:var(--s5) var(--s4);text-align:center;color:var(--tx3);font-size:13px}

/* Код привязки Telegram: его переписывают глазами в мессенджер, поэтому
   крупно, моноширинно и с разрядкой — иначе путают похожие символы. */
.tg-code{font-family:var(--num);font-size:26px;font-weight:700;letter-spacing:.22em;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r2);
  padding:12px 16px;text-align:center;user-select:all}
/* Ступени эскалации: набор переключателей, а не выпадающий список — юрист
   видит сразу всё расписание, а не одно выбранное значение. */
.lead-days{display:flex;flex-wrap:wrap;gap:7px}
.lead-days .btn-sm.on{background:var(--accent-bg);border-color:var(--accent-bd);color:var(--accent-tx);font-weight:640}

/* ══════════ ИЗМЕНЕНИЯ: входящее из суда ══════════
   Не лента и не список задач, а стопка решений: строка живёт, пока по ней не
   нажали одну из кнопок. Поэтому у строки нет hover-обрезания действий, как
   в .ev, — кнопки видны всегда, иначе экран не разбирается до нуля. */
.inb-wrap{max-width:1000px;margin:0 auto}
.inb-head{display:flex;align-items:center;gap:var(--s3);margin-bottom:14px}
.inb-sum{font-size:12px;color:var(--tx3)}
.inb-empty{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--s6) var(--s5);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--s2)}
.inb-empty b{font-size:14.5px;font-weight:660}
.inb-empty span{font-size:13px;color:var(--tx3);max-width:52ch;line-height:1.55}

.inb-grp{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;margin-bottom:var(--s4)}
.inb-grp-h{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s4);border-bottom:1px solid var(--hair);
  background:var(--surface-2)}
.inb-grp-t{font-size:13px;font-weight:680;color:inherit;text-decoration:none;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.inb-grp-t:hover{text-decoration:underline}
.inb-grp-n{font-size:11px;color:var(--tx3)}
.inb-grp-h .r{margin-left:auto;display:flex;gap:var(--s2);align-items:center}

/* Три колонки: дата — суть — решение. Дата монофонтом и одной ширины со
   строкой «Сегодня»: два экрана читаются одинаково. */
.inb-row{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:var(--s3);align-items:start;
  padding:11px 14px;border-bottom:1px solid var(--hair)}
.inb-row:last-child{border-bottom:none}
.inb-when{font-family:var(--num);font-size:12px;color:var(--tx2);font-variant-numeric:tabular-nums;
  text-align:right;padding-top:2px}
.inb-body{min-width:0}
.inb-t{font-size:13.5px;font-weight:580;line-height:1.35}
.inb-src{font-family:var(--mono);font-size:10.5px;color:var(--live-s);margin-left:8px;text-decoration:none;
  white-space:nowrap}
.inb-src:hover{text-decoration:underline}
.inb-m{font-size:12px;color:var(--tx3);margin-top:3px;display:flex;flex-wrap:wrap;gap:var(--s1) var(--s2);align-items:baseline}
/* Рассчитанный срок — главное в строке, поэтому он не серый, как остальная
   подпись: юрист должен увидеть его, не вчитываясь. */
.inb-dl{color:var(--tx);font-weight:580}
.inb-basis{font-family:var(--mono);font-size:10.5px;color:var(--tx3)}
.inb-nodl{color:var(--tx3);font-style:italic}
/* Оговорка правила («срок устанавливает суд»): то, чего система не знает,
   она обязана сказать вслух — иначе посчитанная дата читается как факт. */
.inb-note{margin-top:6px;font-size:11.5px;line-height:1.5;color:var(--warning);
  background:var(--warning-bg);border:1px solid var(--warning-bd);border-radius:var(--r1);padding:5px 9px}
.inb-edit{margin-top:8px;display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.inb-edit .inp{max-width:190px}
.inb-acts{display:flex;align-items:center;gap:7px;flex:none;flex-wrap:wrap;justify-content:flex-end;
  max-width:340px}
.inb-acts .src{font-family:var(--mono);font-size:10.5px;color:var(--tx3);white-space:nowrap}

/* На телефоне решение переезжает под текст: четыре кнопки в 390 px в одну
   строку с датой не встают, а прятать их за «…» — значит не разобрать инбокс
   с телефона вообще. */
@media(max-width:720px){
  .inb-row{grid-template-columns:52px minmax(0,1fr);grid-template-areas:"when body" ". acts";gap:var(--s2) var(--s2)}
  .inb-when{grid-area:when}
  .inb-body{grid-area:body}
  .inb-acts{grid-area:acts;justify-content:flex-start;max-width:none}
}
/* Плотная таблица на телефоне: колонки «клиент», «юрист» и «сумма» уходят —
   в коридоре суда нужны стадия, номер дела и ближайшее событие. Стадия
   сжимается до цветной метки: её значение и так кодирует цвет. */
@media(max-width:640px){
  /* На телефоне строка таблицы перестаёт быть строкой: четыре колонки в
     390 px не помещаются никак — либо горизонтальная прокрутка (её не
     замечают и не пользуются), либо карточка. Делаем карточку: стадия и
     ближайшее событие сверху, название и номер — под ними. Клиент, юрист,
     сумма и меню действий читаются в самом деле, сюда не лезут. */
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block}
  .tbl thead{display:none}
  .tbl tr{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"stage next" "name name";
    gap:3px var(--s2);align-items:center;padding:11px 12px 12px var(--s4);
    border-bottom:1px solid var(--border)}
  .tbl tbody tr:last-child{border-bottom:0}
  .tbl td{padding:0;height:auto;border:0}
  /* Цветная полоса срочности — по всей высоте карточки. */
  .tbl td:nth-child(1){position:absolute;left:0;top:0;bottom:0;width:3px;padding:0}
  .tbl .stripe-td i{height:100%}
  .tbl td:nth-child(2){grid-area:stage}
  .tbl td:nth-child(3){grid-area:name}
  .tbl td:nth-child(6){grid-area:next;justify-self:end;text-align:right}
  .tbl td:nth-child(4),.tbl td:nth-child(5),
  .tbl td:nth-child(7),.tbl td:nth-child(8){display:none}
  .tbl .nm{white-space:normal;font-size:13.5px;line-height:1.35}
  .tbl .cno{margin-top:2px}
  .tbl .next{white-space:normal;font-size:11.5px;line-height:1.35}
  .tbl .next .pill{margin-right:0;display:block;margin-bottom:2px}
  .tbl-scroll{overflow-x:visible}
}
@media(max-width:640px){
  /* Телефон: дата уже, подпись источника уходит, но пилюля срочности
     остаётся справа в строке — перенос на вторую строку делал ленту вдвое
     длиннее, а читают её стоя в коридоре суда. */
.ev{grid-template-columns:3px 46px minmax(0,1fr) auto;gap:var(--s2);padding-right:11px}
  .ev .src{display:none}
  .ev .row-act{display:none}
  .ev .t{font-size:13px}
  .ev .when{font-size:11.5px}
}

/* ══════════ ДОСЬЕ ДЕЛА ══════════════════════════════════════════════════
   Полоса срока → строка дела → хронология | справочная панель.
   Было пятнадцать равновесных карточек: пять кнопок-фактов, четыре панели в
   правой колонке и четыре в полосе под сеткой. Ни одной доминанты — экран не
   отвечал на вопрос, ради которого его открыли. */

/* ── СРОК. Доминанта экрана держится масштабом и воздухом, а не тёмной
   плашкой: чёрное окно посреди бумаги читается как чужой виджет. Здесь
   ничего не нарисовано — только очень большое число, очень тихая подпись
   и линейка дней в волосяную линию. */
.dock{margin-bottom:var(--s6)}
.dock-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s5);align-items:end}
.dock-count{flex:none}
.dock-lead{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx3);margin-bottom:var(--s2)}
.dock-num{font-family:var(--display);font-size:clamp(64px,7.4vw,92px);font-weight:600;
  line-height:.8;letter-spacing:-.055em;font-variant-numeric:tabular-nums;color:var(--tx)}
.dock-unit{margin-top:var(--s2);font-size:13px;color:var(--tx3)}
.dock-what{min-width:0;padding-bottom:var(--s1)}
.dock-title{font-family:var(--display);font-size:clamp(19px,1.9vw,26px);font-weight:550;
  line-height:1.2;letter-spacing:-.026em;overflow-wrap:anywhere}
.dock-meta{margin-top:var(--s2);display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);
  font-size:12.5px;color:var(--tx3);align-items:baseline}
.dock-date{color:var(--tx2);font-variant-numeric:tabular-nums}
.dock-basis{font-family:var(--mono);font-size:11px}
.dock-acts{flex:none;padding-bottom:var(--s1)}
.dock-btn{border:1px solid var(--border-strong);background:var(--sheet);color:var(--tx);
  border-radius:var(--r1);padding:8px 14px;font-size:12.5px;font-weight:560;cursor:pointer;
  white-space:nowrap;transition:.12s}
.dock-btn:hover{border-color:var(--tx3)}
/* Цвет появляется только когда срок этого требует. */
.dock.is-soon .dock-num, .dock.is-soon .dock-lead{color:var(--soon)}
.dock.is-late .dock-num, .dock.is-late .dock-lead{color:var(--late)}
/* Заседание сегодня показывает час, а не число дней: «10:30» шире «12». */
.dock-time .dock-num{font-size:clamp(44px,5vw,64px);letter-spacing:-.035em}

/* Линейка дней: одна шкала, на ней все ближайшие точки дела сразу. */
.track{margin-top:var(--s5);padding-bottom:var(--s5);border-bottom:1px solid var(--hair)}
.track-line{position:relative;height:18px;border-top:1px solid var(--border)}
.track-today{position:absolute;top:-5px;width:1px;height:14px;background:var(--tx);transform:translateX(-.5px)}
.track-today::after{content:"сегодня";position:absolute;top:16px;left:0;transform:translateX(-50%);
  font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);white-space:nowrap}
.track-mark{position:absolute;top:-3px;width:5px;height:5px;border-radius:1px;
  transform:translateX(-2.5px) rotate(45deg);background:var(--border-strong)}
.track-mark.to-soon{background:var(--soon)}
.track-mark.to-late{background:var(--late)}
.track-mark.k-hearing{border-radius:50%;width:6px;height:6px;top:-3.5px;transform:translateX(-3px);
  background:var(--sheet);border:1.5px solid var(--tx2)}
.track-mark.first{width:9px;height:9px;top:-5px;transform:translateX(-4.5px) rotate(45deg)}
.track-mark.k-hearing.first{width:9px;height:9px;top:-5px;transform:translateX(-4.5px);border-width:2px}
.track-ends{display:flex;justify-content:space-between;margin-top:var(--s5);
  font-family:var(--num);font-size:11px;color:var(--tx3);font-variant-numeric:tabular-nums}

/* ── СТРОКА ДЕЛА. Ни одной коробки: группировка отступом и линейкой. */
.case-id{margin-bottom:var(--s5)}
.cid-head{display:flex;align-items:flex-start;gap:var(--s4);flex-wrap:wrap}
.cid-main{min-width:0;flex:1}
.cid-ids{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.cid-no{font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--live);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
/* Название дела — заголовок ЭКРАНА досье, поэтому антиквой, как h1 везде.
   Кегль меньше 36px: над ним стоит полоса срока, и два крупных объекта подряд
   спорят за первый взгляд — а первым здесь обязан быть срок. */
.cid-title{font-family:var(--serif);font-size:28px;font-weight:500;line-height:1.15;
  letter-spacing:-.014em;margin-top:var(--s2);max-width:70ch}
.cid-meta{margin-top:var(--s2);display:flex;gap:var(--s2);flex-wrap:wrap;font-size:12.5px;
  color:var(--tx2);align-items:center}
.cid-meta .d{width:3px;height:3px;border-radius:50%;background:var(--border-strong)}
.cid-meta .lnk{color:var(--tx);text-decoration:underline;text-decoration-color:var(--border-strong);
  text-underline-offset:2px;font-weight:520}
.cid-meta .lnk:hover{text-decoration-color:var(--tx)}
.cid-meta .assign{display:inline-flex;align-items:center;gap:5px;color:var(--tx3)}
.inline-select{border-color:transparent;background-color:var(--tint);border-radius:var(--r1);
  padding:2px var(--s5) 2px 7px;background-position:right 6px center;
  font-size:12.5px;color:var(--tx2);max-width:190px}
.inline-select:hover:not(:disabled){border-color:var(--border-strong)}
.cid-acts{margin-left:auto;display:flex;gap:var(--s2);align-items:center}
.cid-acts .rowact .rowpop{right:0;left:auto}

/* Факты в строку. Пять кнопок с рамками занимали полосу в 14 px отступов и
   ничего не добавляли: это справка, а не пять действий. */
.cid-facts{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6);margin-top:var(--s4);
  padding:var(--s3) 0 0;border-top:1px solid var(--hair);border-left:0;border-right:0;border-bottom:0;
  background:none;text-align:left;cursor:pointer;width:100%}
.cid-facts:hover .v{color:var(--tx)}
.cf{display:flex;flex-direction:column;gap:2px;min-width:0}
.cf .k{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--tx3)}
.cf .v{font-family:var(--num);font-size:15px;font-weight:550;font-variant-numeric:tabular-nums;
  color:var(--tx2);letter-spacing:-.02em}
.cf .v.txt{font-family:inherit;font-size:13px;font-weight:520;letter-spacing:0;max-width:30ch;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf .v.live{color:var(--live)}

/* Лестница инстанций. Порядок здесь ЗНАЧИТ: претензия → первая → апелляция →
   кассация — это путь дела, а не нумерация ради нумерации. */
.stepper{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--hair);display:grid;
  grid-template-columns:repeat(4,1fr);gap:0}
.stepper .st{position:relative;padding:0 var(--s3) 0 0}
.stepper .bar{height:3px;border-radius:2px;background:var(--border);margin-bottom:var(--s2)}
.stepper .st.done .bar{background:var(--tx3)}
.stepper .st.now .bar{background:linear-gradient(90deg,var(--soon) 62%,var(--border) 62%)}
.stepper .n{font-size:12px;font-weight:600}
.stepper .d{margin-top:3px;font-family:var(--num);font-size:10.5px;color:var(--tx3);
  font-variant-numeric:tabular-nums;line-height:1.4}
.stepper .st.now .n{color:var(--soon)}
.stepper .st.todo .n{color:var(--tx3);font-weight:500}

/* Раскрытие: суть спора, заметки, выданные клиенту ссылки. */
.cid-brief, .disc{margin-top:var(--s3)}
.disc{margin-top:var(--s4)}
.te-disc{margin:0;padding:var(--s3) var(--s4);border-top:1px solid var(--hair)}
.cid-brief-t, .disc-t{display:inline-flex;align-items:center;gap:var(--s2);border:0;background:none;
  padding:0;font-size:12.5px;font-weight:560;color:var(--tx2);cursor:pointer}
.cid-brief-t:hover, .disc-t:hover{color:var(--tx)}
.chev{display:inline-block;transition:transform .12s;color:var(--tx3);font-size:14px;line-height:1}
.chev.open{transform:rotate(90deg)}
.disc-t .n{font-family:var(--mono);font-size:11px;color:var(--tx3)}
.cid-brief-b{margin-top:var(--s2);font-size:13px;line-height:1.6;color:var(--tx2);max-width:80ch}
.cid-brief-b p+p{margin-top:var(--s2)}
.cid-brief-b .mut{color:var(--tx3)}
.disc-b{margin-top:var(--s3);display:grid;gap:var(--s2)}
.pl-top{display:flex;justify-content:space-between;gap:var(--s3);align-items:baseline}

/* ── РАСКЛАДКА: работа слева, справка справа. */
.case-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s4);align-items:start}
.case-grid > *{min-width:0}

/* СПРАВОЧНАЯ ПАНЕЛЬ. Липкая, в высоту экрана, с внутренней прокруткой и
   прибитым переключателем — она СТРУКТУРНО не может убежать вниз и не может
   оставить под собой пустоту. Тем же приёмом перекос на вкладке «Разбор»
   стал нулём; здесь он был 375 px плюс полоса под сеткой на 472 px. */
.ref{background:var(--sheet);border-radius:var(--r2);position:sticky;top:var(--s2);
  max-height:calc(100vh - 108px);display:flex;flex-direction:column;overflow:hidden}
/* Разделы справочной панели. Их шесть, а колонка узкая (~292px), поэтому
   строка ПЕРЕНОСИТСЯ, а не прокручивается вбок: горизонтальная прокрутка тут
   прятала крайние разделы, и «Стороны» с «Сводкой» были обрезаны по краям —
   человек не видел, что они вообще есть. */
.ref-tabs{display:flex;flex-wrap:wrap;gap:2px;padding:var(--s2);
  border-bottom:1px solid var(--hair);flex:none}
.ref-tabs button{flex:none}
.ref-tabs button{border:0;background:none;border-radius:var(--r1);padding:5px 8px;font-size:11.5px;
  font-weight:540;color:var(--tx3);cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.ref-tabs button:hover{color:var(--tx)}
.ref-tabs button.on{background:var(--tint);color:var(--tx);font-weight:600}
.ref-tabs .n{font-family:var(--mono);font-size:10px;color:var(--tx3)}
.ref-body{padding:var(--s4);overflow-y:auto;flex:1;min-height:0;display:grid;
  grid-template-columns:minmax(0,1fr);gap:var(--s3);align-content:start}
.ref-role{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--tx3)}
.ref-body .an-kpis{grid-template-columns:1fr 1fr;gap:var(--s2);margin:0}
.ref-body .an-kpi{padding:var(--s2) var(--s3);border-radius:var(--r1);background:var(--field);border:0}
.ref-body .an-kpi .num{font-size:19px;font-weight:600}
.ref-body .an-kpi .lbl{font-size:10px;line-height:1.25;margin-top:3px}
.ref-body .kad-summary>div{display:grid;grid-template-columns:78px 1fr;gap:var(--s2);align-items:baseline}
.ref-body .kad-k{width:auto;line-height:1.35}
.ref-body .kad-event{display:grid;grid-template-columns:66px 1fr;gap:var(--s2)}
.ref-body .kad-event-date{width:auto;flex:none;font-family:var(--mono);font-size:11px}
.ref-body .judge-court{margin-bottom:0}
.ref-body .link-list, .ref-body .kad-summary, .ref-body .kad-timeline{gap:var(--s2)}
.ref-foot:not(:empty){flex:none;padding:var(--s3) var(--s4);border-top:1px solid var(--hair);
  display:flex;align-items:center}

@media(max-width:1100px){
  .case-grid{grid-template-columns:1fr}
  /* Во всю ширину панель перестаёт быть колонкой: липкость и потолок высоты
     снимаем, иначе справка прокручивается внутри полосы посреди страницы. */
  .ref{position:static;max-height:none}
}
@media(max-width:760px){
  .cid-facts{gap:var(--s3) var(--s5)}
  .stepper{grid-template-columns:1fr 1fr;row-gap:var(--s3)}
  .cid-acts{margin-left:0;width:100%}
  .dock-top{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
  .dock-acts{padding-bottom:0}
  .dock-what{padding-bottom:0}
}
/* ══════════ КОНТРАГЕНТЫ/СУДЬИ + КОМАНДА (премиум) ══════════ */
.ct-find{height:38px;padding:0 16px;border:none;border-radius:var(--r1);background:var(--accent);color:var(--on-accent);font-weight:600;font-size:13px;cursor:pointer}
.ct-find:hover{background:var(--accent-s)}

/* ══════════ ДОСЬЕ / КАД-ПОИСК / ЧАТ (премиум-доводка) ══════════ *//* Досье: шапка-герой + карточная сетка */
.workspace{max-width:1240px;margin:0 auto}
.judge-name.link:hover{color:var(--tx2)}
.kad-summary>div{padding:5px 0;border-bottom:1px solid var(--hair)}
.kad-summary>div:last-child{border-bottom:none}

/* ══════════ КЛИЕНТЫ ══════════ */
.cl-hero{max-width:1080px;margin-left:auto;margin-right:auto}
.cl-meta{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--tx2)}
.cl-hero{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r3);padding:var(--s5) var(--s5);box-shadow:var(--sh-xs);margin-bottom:16px}
.cl-hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}

/* ══════════ ЗАСЕДАНИЯ (в досье дела) ══════════ */

/* ══════════ УВЕДОМЛЕНИЯ (колокольчик в шапке) ══════════ */

/* ══════════ ПАЛИТРА: поиск и переходы (⌘K) ══════════
   Одно окно на поиск по данным и на переходы в разделы, которых нет в рейке.
   Форма контейнера — в блоке оболочки (.pal-*); здесь содержимое списка. */
.omni-group{padding:6px 0;border-bottom:1px solid var(--hair)}
.omni-group:last-child{border-bottom:none}
.omni-group-h{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--tx3);padding:8px 18px}
.omni-item{padding:9px 18px;cursor:pointer;transition:background var(--t)}
/* Команды палитры: иконка слева, подпись под названием */
.omni-item.cmd{display:flex;align-items:center;gap:var(--s3)}
.omni-ic{flex:none;width:18px;color:var(--tx3);display:grid;place-items:center}
.omni-item-body{min-width:0}
.omni-foot{padding:12px 18px;border-top:1px solid var(--hair);font-size:12.5px;color:var(--tx3)}
.omni-item:hover{background:var(--tint)}
.omni-item-title{display:block;font-size:13.5px;font-weight:500;color:var(--tx);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.omni-item-sub{display:block;font-size:11.5px;color:var(--tx3);margin-top:2px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* Номера дел и ИНН в выдаче — моно: их сверяют посимвольно. */
.omni-item-sub{font-variant-numeric:tabular-nums}

/* ══════════ АНАЛИТИКА ══════════ */
.an-kpis{max-width:1080px;margin-left:auto;margin-right:auto}
.an-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin-bottom:var(--s4)}
.an-kpi{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r3);padding:16px var(--s4);box-shadow:var(--sh-xs)}
.an-kpi .num{font-size:26px;font-weight:800;letter-spacing:-.02em}
.an-kpi .lbl{font-size:11px;color:var(--tx3);text-transform:uppercase;letter-spacing:.04em;font-weight:600;margin-top:6px}
.an-kpi.warn{background:var(--late-bg);border-color:var(--late-bd)}
.an-kpi.warn .num{color:var(--danger)}
@media(max-width:900px){.an-kpis{grid-template-columns:1fr 1fr}}

/* ══════════ ПРОГНОЗ ИСХОДА (в досье дела) ══════════ */

/* ══════════ ШАБЛОНЫ ДОКУМЕНТОВ ══════════ */
.tpl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);max-width:1080px;margin:0 auto}
@media(max-width:900px){.tpl-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.tpl-grid{grid-template-columns:1fr}}

/* ══════════ Обогащённые карточки контрагентов и судей ══════════ */

/* Профиль контрагента: реквизиты + исходы */
.cl-fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2) var(--s5)}
.cl-field{display:flex;flex-direction:column;gap:2px}
.cl-field .k{font-size:11px;color:var(--tx3);text-transform:uppercase;letter-spacing:.03em}
.cl-field .v{font-size:13px;color:var(--tx);line-height:1.4}
@media(max-width:640px){.cl-fields{grid-template-columns:1fr}}

/* Досье: блок «как судья решает такие споры» */
.judge-context{margin-top:12px;padding:10px 12px;border-radius:var(--r2);border:1px solid var(--border);background:var(--bg)}
.judge-context.ctx-pos{border-color:var(--success-bd);background:var(--success-bg)}
.judge-context.ctx-neg{border-color:var(--danger-bd);background:var(--danger-bg)}
.judge-context-title{font-size:12px;font-weight:700;color:var(--tx2)}
.judge-context-body{font-size:13px;color:var(--tx);margin-top:4px;line-height:1.45}

/* Карточка контрагента: действия в шапке */
.cl-hero-actions{display:flex;gap:var(--s2);flex-wrap:wrap}
.ct-find.ghost{background:transparent;color:var(--tx2);border:1px solid var(--border)}
.ct-find.ghost:hover:not(:disabled){border-color:var(--accent-bd);color:var(--accent-tx)}
.ct-find:disabled{opacity:.6;cursor:default}

/* =========================================================================
   СВЯЗЬ С СЕРВЕРОМ: полоса состояния и блок ошибки
   Фронтенд работает отдельно от API. Когда API молчит, интерфейс остаётся
   живым, а пользователь видит человеческий текст, а не «Failed to fetch».
   ========================================================================= */
.statusbar{display:flex;align-items:center;gap:var(--s2);margin:0;padding:9px var(--s5);
  font-size:13px;line-height:1.45;color:var(--tx2);
  border-bottom:1px solid var(--danger-bd);background:var(--danger-bg)}
.statusbar.unavail, .statusbar.offline{border-bottom-color:var(--warning-bd);background:var(--warning-bg)}
.statusbar b{color:var(--tx)}
.statusbar-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--danger);
  animation:sb-pulse 2.4s ease-in-out infinite}
.statusbar.unavail .statusbar-dot, .statusbar.offline .statusbar-dot{background:var(--warning)}
@keyframes sb-pulse{0%,100%{opacity:1}50%{opacity:.3}}
.statusbar-text{min-width:0}
.statusbar-btn{margin-left:auto;flex:none;padding:5px 11px;border:1px solid var(--border-strong);
  border-radius:var(--r2);background:var(--bg2);font-size:12.5px;font-weight:600;color:var(--tx);cursor:pointer}
.statusbar-btn:hover:not(:disabled){border-color:var(--tx3)}
.statusbar-btn:disabled{opacity:.6;cursor:default}
@media(max-width:640px){.statusbar{padding:9px 14px;flex-wrap:wrap}.statusbar-btn{margin-left:0}}

.errstate{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s5);border:1px solid var(--border);
  border-radius:var(--radius);background:var(--bg2);box-shadow:var(--sh-xs)}
.errstate.compact{padding:14px 16px}
.errstate-ico{width:28px;height:28px;flex:none;border-radius:var(--r2);display:grid;place-items:center;
  font-weight:800;color:var(--danger);background:var(--danger-bg);border:1px solid var(--danger-bd)}
.errstate-title{font-size:15px;font-weight:650;color:var(--tx)}
.errstate.compact .errstate-title{font-size:13.5px}
.errstate-hint{margin-top:4px;font-size:13px;color:var(--tx2);line-height:1.5;max-width:64ch}
.errstate-acts{margin-top:11px;display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.errstate-acts .btn-sm{padding:6px var(--s3);border:1px solid var(--border-strong);border-radius:var(--r2);
  background:var(--bg2);font-size:13px;font-weight:600;color:var(--tx);cursor:pointer}
.errstate-acts .btn-sm:hover{border-color:var(--accent-bd);color:var(--accent-tx)}
.errstate-more{border:0;background:none;padding:0;font-size:12.5px;color:var(--tx3);cursor:pointer;
  text-decoration:underline;text-underline-offset:2px}
.errstate-more:hover{color:var(--tx2)}
.errstate-detail{margin-top:9px;padding:8px 10px;border-radius:var(--r2);background:var(--surface-2);
  font-size:11.5px;color:var(--tx2);word-break:break-word}
.errstate-detail code{font-family:ui-monospace,'SF Mono',Menlo,monospace}

/* ══════════ ЛЕНДИНГ ═══════════════════════════════════════════════════════
   Разметка — web/js/views/LandingView.js, канон — хендофф NORMA Signal.

   Лендинг и продукт живут на ОДНОЙ палитре: холст витрины (--canvas) чуть
   светлее рабочей области, всё остальное — те же токены. Отдельного словаря
   больше нет: он был нужен, пока продукт был намеренно бесцветным.

   Правила, которые ломаются первыми, поэтому записаны здесь:
   1. Горизонтальный padding контейнера ОДИН И ТОТ ЖЕ во всех секциях, включая
      блок с моком: расхождение левого края читается как брак.
   2. Playfair — только заголовок героя, цитата-принцип и заголовок CTA.
      Ни в подзаголовках секций, ни в названиях карточек, ни в кнопках.
   3. Внутри колонок нет justify-self:end — при схлопывании auto-fit элемент
      отрывается от левого края и выглядит сломанным.
   4. У каждого auto-fit минимум записан как min(Npx,100%). Голый minmax(470px,1fr)
      НЕ схлопывается: на 390px колонка остаётся 470px и вылезает за экран —
      проверка ловила это на герое (+104px).

   Все правила прибиты к корню .lpv2: у лендинга свои .hero и .btn, и они не
   должны течь в продукт. Страница «Безопасность» (/security) делит этот же
   корень — она продолжение сайта, а не экран продукта. */
.lpv2{
  /* Витрина всегда светлая. В хендоффе Signal тёмного лендинга нет, и
     придумывать его вместо дизайнера нельзя: подставить продуктовые токены
     тёмной темы под светлый холст — это светлый фон со светлым текстом.
     Поэтому корень лендинга ПРИБИВАЕТ палитру к светлым значениям, а не
     наследует её. Строки ниже — те же токены, что у продукта в светлой теме;
     они переопределяются здесь целиком, иначе тёмная тема протечёт внутрь. */
  color-scheme:light;
  --canvas:#FAFAF9;
  --sheet:#FFFFFF;--tint:#F3F3F1;--tint-2:#EAEAE6;
  --tx:#191917;--tx2:#56564F;--tx3:#8A8A82;--tx4:#B4B4AC;
  --border:#E6E6E1;--border-strong:#D6D6CF;--hair:#F3F3F1;
  --dom-2:#17171A;--on-dom:#FAFAF9;
  --done:#3F5C48;--done-bg:#EAF0EB;--done-bd:#CCDBD0;
  --soon:#8A6A22;--soon-bg:#F7EED8;--soon-bd:#E6D5AC;
  --late:#A4462B;--late-bg:#F7EAE5;--late-bd:#E8CDC2;
  --accent-s:#33332E;--on-accent:#FAFAF9;
  --sh-lg:0 34px 64px -34px rgba(25,25,23,.38);
  --lp-pad:clamp(24px,4vw,48px);   /* см. правило 1 */
  --lp-rhythm:clamp(72px,8vw,112px);
  --lp-rhythm-tight:clamp(56px,6vw,80px);
  --lp-rhythm-wide:clamp(80px,9vw,132px);
  background:var(--canvas);color:var(--tx);
  font-size:16px;overflow-x:hidden;min-height:100vh}
.lpv2 p{text-wrap:pretty}
.lpv2 a{color:inherit;text-decoration:none;transition:color var(--t),border-color var(--t)}
.lpv2 ::selection{background:var(--tx);color:var(--on-accent)}

/* Контейнер. Один на все секции — отсюда общий левый край. */
.lp-wrap{max-width:1280px;margin:0 auto;padding:0 var(--lp-pad)}
.lp-sec{border-bottom:1px solid var(--border)}
.lp-sec > .lp-wrap{padding-top:var(--lp-rhythm);padding-bottom:var(--lp-rhythm)}
.lp-sec.tight > .lp-wrap{padding-top:var(--lp-rhythm-tight);padding-bottom:var(--lp-rhythm-tight)}

/* Микро-подпись капсом — служебный голос всего лендинга. */
.lp-eyebrow, .lpv2 .eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tx3)}

/* Живой маркер: ставится ТОЛЬКО там, где факт пришёл из внешнего источника. */
@keyframes normaPulse{0%,100%{opacity:1}50%{opacity:.35}}
.lp-live{width:6px;height:6px;border-radius:50%;background:var(--done);display:block;flex:none;
  animation:normaPulse 2.4s ease-in-out infinite}
@keyframes normaIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.lp-reveal{animation:normaIn .7s cubic-bezier(.22,.61,.36,1) both}
@media (prefers-reduced-motion:reduce){
  .lp-live{animation:none}
  .lp-reveal, .lp-mock-row{animation:none !important}}

/* ── Шапка. */
.lp-nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--canvas) 92%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.lp-nav .lp-wrap{height:72px;display:flex;align-items:center;justify-content:space-between;gap:var(--s7)}
.lp-nav-l{display:flex;align-items:center;gap:44px;min-width:0}
.lp-brand{display:flex;align-items:baseline;gap:10px}
.lp-brand b{font-family:var(--serif);font-size:23px;font-weight:500;letter-spacing:-.02em}
.lp-brand i{font-family:var(--mono);font-style:normal;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tx3)}
.lp-nav-links{display:flex;align-items:center;gap:28px;font-size:13.5px;color:var(--tx2)}
.lp-nav-links button{border-bottom:1px solid transparent;padding-bottom:2px;cursor:pointer}
.lp-nav-links button:hover{border-color:var(--tx);color:var(--tx)}
.lp-nav-r{display:flex;align-items:center;gap:20px;flex:none}
.lp-nav-r .lp-login{font-size:13.5px;color:var(--tx2);cursor:pointer}
.lp-nav-r .lp-login:hover{color:var(--tx)}

/* Действия, которые прокручивают страницу или запускают переход, — это
   КНОПКИ, а не <a> без href: такая ссылка не получает фокус с клавиатуры и не
   имеет роли ссылки, то есть по меню лендинга нельзя пройти табом. Здесь с них
   снимается вид кнопки; форму каждой задаёт её собственный класс ниже. */
.lpv2 button{font:inherit;color:inherit;background:none;border:0;padding:0;
  cursor:pointer;text-align:inherit}
.lpv2 button:focus-visible{outline:2px solid var(--tx);outline-offset:3px;border-radius:2px}

/* ── Кнопки и текстовые действия лендинга.
   Второстепенное действие — ссылка с подчёркиванием, а не вторая кнопка. */
.lpv2 .lp-btn{height:38px;display:inline-flex;align-items:center;padding:0 18px;border:0;
  border-radius:var(--r1);background:var(--tx);color:var(--on-accent);font-family:inherit;
  font-size:13.5px;font-weight:500;white-space:nowrap;cursor:pointer;transition:background var(--t)}
.lpv2 .lp-btn:hover{background:var(--accent-s);color:var(--on-accent)}
.lpv2 .lp-btn.lg{height:48px;padding:0 24px;font-size:15px}
.lpv2 .lp-btn:disabled{opacity:.55;cursor:progress}
.lp-act{display:inline-flex;align-items:center;gap:var(--s2);font-size:15px;font-weight:500;
  border-bottom:1px solid var(--border-strong);padding-bottom:3px;cursor:pointer}
.lp-act:hover{border-color:var(--tx);color:var(--tx)}
.lp-act i{font-family:var(--mono);font-style:normal;font-size:13px}
.lp-act.sm{font-size:14px}

/* ── Бейдж статуса. Три акцента и нейтральный вариант. */
.lp-tag{display:inline-flex;align-items:center;gap:7px;height:22px;padding:0 10px;border-radius:var(--rp);
  font-size:11px;font-weight:500;flex:none;font-variant-numeric:tabular-nums}
.lp-tag.moss{background:var(--done-bg);border:1px solid var(--done-bd);color:var(--done)}
.lp-tag.amber{background:var(--soon-bg);border:1px solid var(--soon-bd);color:var(--soon)}
.lp-tag.clay{background:var(--late-bg);border:1px solid var(--late-bd);color:var(--late)}
.lp-tag.plain{background:var(--tint);color:var(--tx2);font-family:var(--mono)}
.lp-dot{width:6px;height:6px;border-radius:50%;flex:none;display:block;background:var(--border-strong)}
.lp-dot.on{background:var(--done)}
.lp-dot.over{background:var(--late)}

/* ── Сетка на хайрлайнах: линии в 1px рисует просвет сетки, а не рамки.
   Крайние ячейки без внешнего padding — текст стоит по краям контейнера. */
.lp-rule{display:grid;gap:1px;background:var(--border);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.lp-rule > *{background:var(--canvas);padding:24px 28px}
.lp-rule > *:first-child{padding-left:0}
.lp-rule > *:last-child{padding-right:0}

/* ── Герой. */
.lp-hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(470px,100%),1fr));
  gap:clamp(40px,5vw,72px);align-items:end}
.lp-hero-say{max-width:680px;min-width:0}
.lp-flag{display:flex;align-items:center;gap:9px;margin-bottom:clamp(24px,3vw,36px)}
.lp-flag span{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tx2)}
.lpv2 .lp-hero-say h1{margin:0 0 clamp(20px,2.4vw,28px);font-family:var(--serif);font-weight:400;
  font-size:clamp(42px,6.4vw,78px);line-height:1.02;letter-spacing:-.028em}
.lp-lede{margin:0 0 clamp(28px,3.4vw,40px);max-width:520px;font-size:17.5px;line-height:1.62;color:var(--tx2)}
.lp-hero-acts{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap}

/* Лента обновлений в герое. */
.lp-feed{width:100%;max-width:520px;min-width:0}
.lp-feed-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding-bottom:12px;border-bottom:1px solid var(--tx)}
.lp-feed-h span:first-child{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tx2)}
.lp-feed-h .live{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--done)}
.lp-feed-row{display:grid;grid-template-columns:64px 1fr;gap:var(--s4);padding:16px 0;
  border-bottom:1px solid var(--border)}
.lp-feed-row time{font-family:var(--mono);font-size:11.5px;color:var(--tx3);font-variant-numeric:tabular-nums}
.lp-feed-row b{font-size:14px;font-weight:400;line-height:1.45;display:block}
.lp-feed-row small{font-family:var(--mono);font-size:11px;color:var(--tx3);margin-top:5px;
  display:block;font-variant-numeric:tabular-nums}
.lp-feed .lp-act{margin-top:18px;font-size:13.5px;color:var(--tx2);border:0;padding:0}
.lp-feed .lp-act:hover{color:var(--tx)}

/* ── Мок продукта. Тёмный бизель, внутри белое окно. */
.lp-mock-sec > .lp-wrap{padding-top:clamp(36px,4.5vw,56px);padding-bottom:clamp(56px,6vw,88px)}
.lp-bezel{background:var(--dom-2);border-radius:var(--r3);padding:12px;box-shadow:var(--sh-lg)}
.lp-win{background:var(--sheet);border-radius:9px;overflow:hidden}
.lp-mock-h{display:flex;align-items:center;gap:var(--s4);padding:18px 24px;border-bottom:1px solid var(--border)}
.lp-mock-av{width:32px;height:32px;border-radius:7px;background:var(--tx);color:var(--on-accent);
  display:grid;place-items:center;font-size:13px;font-weight:500;flex:none}
.lp-mock-h .t{flex:1;min-width:0}
.lp-mock-h .t b{font-size:16.5px;font-weight:600;letter-spacing:-.01em}
.lp-mock-h .t small{display:block;font-family:var(--mono);font-size:11px;color:var(--tx3);
  margin-top:4px;font-variant-numeric:tabular-nums}
.lp-mock-h .lp-tag{height:26px;padding:0 11px;font-size:11.5px}
.lp-mock-h .lp-tag .lp-live{width:5px;height:5px}
.lp-mock-tabs{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:10px 20px;border-bottom:1px solid var(--border)}
.lp-mock-tabs .row{display:flex;gap:var(--s1);flex-wrap:wrap}
.lp-mock-tabs button{height:30px;display:inline-flex;align-items:center;gap:7px;padding:0 12px;
  border:0;border-radius:6px;background:none;font-family:inherit;font-size:13px;color:var(--tx3);
  cursor:pointer;white-space:nowrap;transition:background var(--t),color var(--t)}
.lp-mock-tabs button:hover{background:var(--tint);color:var(--tx)}
.lp-mock-tabs button.on{background:var(--tint);color:var(--tx);font-weight:500}
.lp-mock-tabs button i{font-family:var(--mono);font-style:normal;font-size:11px;color:var(--tx4)}
.lp-mock-tabs .hint{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tx3);white-space:nowrap}
.lp-mock-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));
  border-bottom:1px solid var(--border)}
.lp-mock-kpi > div{padding:22px 24px;border-right:1px solid var(--border)}
.lp-mock-kpi > div:last-child{border-right:0}
.lp-mock-kpi b{display:block;font-family:var(--mono);font-size:32px;font-weight:400;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lp-mock-kpi span{display:block;font-size:13px;color:var(--tx2);margin-top:6px}
.lp-mock-kpi > div.bad b, .lp-mock-kpi > div.bad span{color:var(--late)}
.lp-mock-body{padding:22px 24px 26px}
.lp-mock-cap{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.lp-mock-cap b{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tx2);font-weight:400}
.lp-mock-cap span{font-size:12.5px;color:var(--tx3)}
/* Таблица на линейках — главный структурный компонент системы. */
.lp-tbl-h, .lp-mock-row{display:grid;grid-template-columns:1.1fr 1.9fr .8fr;gap:20px}
.lp-tbl-h{padding-bottom:10px;border-bottom:1px solid var(--tx);font-family:var(--mono);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx3)}
.lp-tbl-h span:last-child{text-align:right}
.lp-mock-rows{min-height:141px}
.lp-mock-row{padding:14px 0;align-items:center;border-bottom:1px solid var(--border);
  animation:normaIn .34s cubic-bezier(.22,.61,.36,1) both}
.lp-mock-row:last-child{border-bottom:0}
.lp-mock-row .a{font-size:14px;font-weight:500;display:flex;align-items:center;gap:var(--s2);min-width:0}
.lp-mock-row .b{font-size:13.5px;color:var(--tx2);min-width:0}
.lp-mock-row .b.over{color:var(--late)}
.lp-mock-row .c{font-family:var(--mono);font-size:11.5px;color:var(--tx3);text-align:right;
  font-variant-numeric:tabular-nums}

/* ── Шапка секции: подпись слева, тезис справа. */
.lp-sec-h{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:clamp(20px,3vw,48px);align-items:baseline;margin-bottom:clamp(32px,4vw,44px)}
.lp-sec-h p{margin:0;font-size:17px;line-height:1.55;max-width:520px}
.lpv2 .lp-h2{margin:0;font-family:var(--display);font-size:clamp(30px,3.6vw,44px);line-height:1.1;
  letter-spacing:-.022em;font-weight:500;max-width:560px}
.lpv2 .lp-h3{margin:26px 0 14px;font-family:var(--display);font-size:24px;line-height:1.24;
  letter-spacing:-.018em;font-weight:500;max-width:400px}
.lp-sec-h.wide{margin-bottom:clamp(40px,5vw,64px)}
.lp-sec-h.wide p{font-size:15.5px;line-height:1.65;color:var(--tx2);max-width:420px}

/* ── Источники данных. */
.lp-sources{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.lp-sources b{display:block;font-size:16px;font-weight:600;margin-bottom:var(--s2);letter-spacing:-.01em}
.lp-sources span{display:block;font-size:13.5px;line-height:1.55;color:var(--tx3)}

/* ── Платформа: аккордеон модулей слева, панель справа. */
.lp-modules{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));
  gap:clamp(32px,4vw,64px);align-items:start}
.lp-mods{border-top:1px solid var(--tx)}
/* Строка модуля: заголовок — кнопка, описание — соседний блок.
   Описание НЕ внутри кнопки по двум причинам: <p> внутри <button> — невалидная
   разметка, а свёрнутое состояние держится на max-height, который к инлайновым
   элементам не применяется вовсе (на этом уже поймано: описания всех пяти
   модулей занимали место, и колонка растягивалась на три экрана). */
.lp-mod{padding:22px 0;border-bottom:1px solid var(--border);transition:border-color .3s ease}
.lp-mod.on{border-bottom-color:var(--tx)}
.lp-mod-btn{display:grid;grid-template-columns:44px 1fr;gap:var(--s2);align-items:baseline;
  width:100%;padding:0;border:0;background:none;font-family:inherit;text-align:left;cursor:pointer}
.lp-mod-btn .n{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--tx3);
  transition:color .25s ease}
.lp-mod-btn .t{font-size:clamp(21px,2.2vw,27px);font-weight:500;letter-spacing:-.018em;
  color:var(--tx3);line-height:1.24;transition:color .25s ease}
.lp-mod.on .lp-mod-btn .n{color:var(--done)}
.lp-mod.on .lp-mod-btn .t{color:var(--tx)}
.lp-mod-b{overflow:hidden;max-height:0;opacity:0;margin:0 0 0 52px;
  transition:max-height .38s cubic-bezier(.4,0,.2,1),opacity .28s ease,margin-top .3s ease}
.lp-mod.on .lp-mod-b{max-height:240px;opacity:1;margin-top:14px}
.lp-mod-b p{margin:0 0 14px;font-size:15px;line-height:1.62;color:var(--tx2);max-width:400px}
.lp-mod-b span{display:inline-block;font-size:13.5px;font-weight:500;
  border-bottom:1px solid var(--border-strong);padding-bottom:2px}
@media (max-width:560px){.lp-mod-b{margin-left:0}}
.lp-panel{border:1px solid var(--border);border-radius:14px;background:var(--sheet);overflow:hidden}
.lp-panel-h{padding:22px 24px;border-bottom:1px solid var(--border)}
.lp-panel-h b{font-size:17px;font-weight:600;letter-spacing:-.01em}
.lp-panel-h small{display:block;font-family:var(--mono);font-size:11px;color:var(--tx3);
  margin-top:5px;font-variant-numeric:tabular-nums}
.lp-panel-rows{padding:6px 24px 14px}
.lp-panel-row{display:flex;align-items:center;gap:var(--s4);padding:15px 0;
  border-bottom:1px solid var(--hair)}
.lp-panel-row:last-child{border-bottom:0}
.lp-panel-row .t{flex:1;min-width:0}
.lp-panel-row .t b{display:block;font-size:14px;font-weight:500;line-height:1.4}
.lp-panel-row .t small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--tx3);
  margin-top:5px;font-variant-numeric:tabular-nums}

/* ── Решения: два режима работы. */
.lp-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));gap:clamp(32px,4vw,72px)}
.lp-two-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tx3);padding-bottom:14px;border-bottom:1px solid var(--tx)}
.lp-two p{margin:0 0 26px;font-size:15.5px;line-height:1.62;color:var(--tx2);max-width:420px}
.lp-line{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:14px 0;border-top:1px solid var(--border)}
.lp-line:last-of-type{border-bottom:1px solid var(--border)}
.lp-line b{font-size:14px;font-weight:500}
.lp-two .lp-act{margin-top:26px}
.lp-kpi2{grid-template-columns:1fr 1fr;margin-bottom:1px}
.lp-kpi2 > *{padding:18px 20px}
.lp-kpi2 b{display:block;font-family:var(--mono);font-size:26px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.lp-kpi2 span{display:block;font-size:12.5px;color:var(--tx3);margin-top:5px}
.lp-risk{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:14px 0;
  border-bottom:1px solid var(--border)}
.lp-risk b{font-size:14px;font-weight:500}
.lp-risk .src{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--done);flex:none}

/* ── Принцип. Единственная крупная пауза страницы. */
.lp-creed > .lp-wrap{max-width:1000px;text-align:center;
  padding-top:var(--lp-rhythm-wide);padding-bottom:var(--lp-rhythm-wide)}
.lpv2 .lp-quote{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.4vw,40px);
  line-height:1.3;letter-spacing:-.015em}
.lp-creed-mark{margin-top:clamp(28px,3vw,40px);display:flex;flex-direction:column;
  align-items:center;gap:10px}
.lp-creed-mark i{width:32px;height:1px;background:var(--border-strong);display:block}
.lp-creed .lp-rule{margin-top:clamp(40px,5vw,64px);text-align:left;
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));border:0}
.lp-creed .lp-rule > *{padding:0 28px}
.lp-creed .lp-rule > *:first-child{padding-left:0}
.lp-creed .lp-rule > *:last-child{padding-right:0}
.lp-creed .lp-rule b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tx3);font-weight:400;
  padding-bottom:12px;border-bottom:1px solid var(--tx);margin-bottom:var(--s4)}
.lp-creed .lp-rule p{margin:0;font-size:14.5px;line-height:1.6;color:var(--tx2)}

/* ── Безопасность: единственная тёмная секция. */
.lp-dark{background:var(--dom-2);color:var(--on-dom)}
.lp-dark .lp-h2{color:var(--on-dom)}
.lp-dark .lp-eyebrow{color:rgba(250,250,249,.45)}
.lp-dark-h{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));
  gap:clamp(32px,4vw,64px);align-items:end;padding-bottom:clamp(40px,5vw,64px);
  border-bottom:1px solid rgba(250,250,249,.16)}
.lp-dark-h p{margin:0 0 26px;font-size:16px;line-height:1.65;color:rgba(250,250,249,.7);max-width:460px}
.lp-dark .lp-act{color:var(--on-dom);border-bottom-color:rgba(250,250,249,.35)}
.lp-dark .lp-act:hover{border-color:var(--on-dom);color:var(--on-dom)}
.lp-dark-lab{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(250,250,249,.4);padding:clamp(32px,4vw,48px) 0 20px}
.lp-dark .lp-rule{background:rgba(250,250,249,.16);border:0;
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.lp-dark .lp-rule > *{background:var(--dom-2);padding:28px}
.lp-dark .lp-rule > *:first-child{padding-left:0}
.lp-dark .lp-rule > *:last-child{padding-right:0}
.lp-dark .lp-rule svg{width:22px;height:22px;margin-bottom:18px;stroke:rgba(250,250,249,.55);
  fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;display:block}
.lp-dark .lp-rule b{display:block;font-size:15.5px;font-weight:500;margin-bottom:7px}
.lp-dark .lp-rule span{display:block;font-size:13px;line-height:1.55;color:rgba(250,250,249,.45)}

/* ── CTA. */
.lp-cta > .lp-wrap{padding-top:var(--lp-rhythm);padding-bottom:clamp(72px,8vw,120px)}
.lp-cta-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));
  gap:clamp(40px,5vw,80px);align-items:start}
.lpv2 .lp-cta h2{margin:0 0 18px;font-family:var(--serif);font-weight:400;
  font-size:clamp(32px,4.2vw,52px);line-height:1.08;letter-spacing:-.025em;max-width:460px}
.lp-cta-lede{margin:0;font-size:16.5px;line-height:1.62;color:var(--tx2);max-width:440px}
.lp-form{width:100%;max-width:520px;min-width:0}
.lp-form label{display:block;margin-bottom:14px}
/* Поле без рамки-коробки: линию рисует обёртка, кнопка сидит в ней же. */
.lp-field{display:flex;align-items:center;gap:var(--s4);border-bottom:1px solid var(--tx);padding-bottom:12px}
.lp-field input{flex:1;min-width:0;border:0;background:transparent;color:var(--tx);
  font-family:inherit;font-size:17px;padding:0;outline:none}
.lp-field input::placeholder{color:var(--tx3)}
.lp-field .lp-btn{height:40px;padding:0 20px;font-size:14px}
.lp-note{margin-top:16px;font-size:13.5px;line-height:1.6;color:var(--tx3)}
.lp-note a{border-bottom:1px solid var(--border-strong);padding-bottom:1px;cursor:pointer}
.lp-note a:hover{border-color:var(--tx);color:var(--tx)}
.lp-note.bad{color:var(--late)}
.lp-note.good{color:var(--done)}

/* Текстовое действие в подписи под формой — подчёркнутое, как ссылка. */
.lp-note button{border-bottom:1px solid var(--border-strong);padding-bottom:1px}
.lp-note button:hover{border-color:var(--tx);color:var(--tx)}

/* ── Футер. */
.lp-foot{border-top:1px solid var(--border)}
.lp-foot > .lp-wrap{padding-top:clamp(48px,5vw,64px);padding-bottom:clamp(48px,5vw,64px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:40px}
.lp-foot h4{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tx3);margin-bottom:var(--s4);font-weight:400}
.lp-foot-col{display:flex;flex-direction:column;gap:11px;font-size:13.5px;color:var(--tx2)}
.lp-foot-col a, .lp-foot-col button{cursor:pointer;display:block}
.lp-foot-col a:hover, .lp-foot-col button:hover{color:var(--tx)}
.lp-foot p{margin:0;font-size:13.5px;line-height:1.6;color:var(--tx3);max-width:260px}
.lp-foot .lp-brand{margin-bottom:14px}
.lp-foot .lp-brand b{font-size:21px}
.lp-fine{border-top:1px solid var(--border)}
.lp-fine > .lp-wrap{padding-top:22px;padding-bottom:22px;display:flex;flex-wrap:wrap;gap:var(--s4);
  justify-content:space-between;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--tx3)}

/* ── Узкий экран. Многоколоночные сетки схлопываются сами (auto-fit),
   правится только то, что от этого ломается. */
@media (max-width:900px){
  .lp-nav-links{display:none}
  .lp-nav-l{gap:0}
  .lp-mock-tabs{flex-wrap:wrap;gap:var(--s2)}
  .lp-mock-tabs .hint{display:none}
  .lp-mock-kpi > div{border-right:0;border-bottom:1px solid var(--border)}
  /* Таблица на линейках в две колонки: правая колонка уходит под название. */
  .lp-tbl-h{grid-template-columns:1fr .8fr}
  .lp-tbl-h span:nth-child(2){display:none}
  .lp-mock-row{grid-template-columns:1fr .8fr}
  .lp-mock-row .b{grid-column:1/-1;order:3}
  /* Крайние ячейки хайрлайн-сетки: в одну колонку внешние padding не нужны. */
  .lp-rule > *, .lp-creed .lp-rule > *, .lp-dark .lp-rule > *{padding-left:0;padding-right:0}
  .lp-rule{gap:1px}
  .lp-kpi2 > *{padding-left:0;padding-right:0}}
@media (max-width:560px){
  .lp-hero-acts{gap:var(--s4)}
  .lp-field{flex-wrap:wrap;gap:var(--s3)}
  .lp-field .lp-btn{width:100%;justify-content:center}}

/* ══════════ ФОРМЫ: поле, ввод, textarea (design/v2/prototype.html .field) ══════════
   Один примитив на все формы продукта: модалка дела, обращение в поддержку,
   настройки. Раньше у каждого экрана была своя вёрстка полей — отсюда и разные
   отступы на соседних экранах. */
.field label{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tx3);margin-bottom:5px}
.field .inp, .field .ta, .field select.inp{width:100%;background-color:var(--bg2);border:1px solid var(--border-strong);
  border-radius:var(--r2);padding:8px 11px;font-size:13px;color:var(--tx);font-family:inherit}
.field select.inp{padding-right:var(--s6)}
.field .inp.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.field .ta{min-height:66px;line-height:1.5;resize:vertical}
.field .hint{margin-top:5px;font-size:11px;color:var(--tx3)}
.field .err{margin-top:5px;font-size:11.5px;color:var(--danger)}
.inp.bad, .ta.bad{border-color:var(--danger-bd)}
.field .inp:focus, .field .ta:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
/* Те же ширины по типу данных, что и в модалках, — для форм на самих экранах
   (админка, настройки, фильтры). Правила общие: поле не должно обещать больше
   текста, чем в него пишут. */
.field .inp.f-xs{width:9ch}
.field .inp.f-sm{width:16ch}
.field .inp.f-md{width:24ch}
.inp[type="date"], .inp[type="datetime-local"]{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* Боковая карточка-панель (design/v2 .mini): «Частые вопросы», «Ваши обращения». */
.mini{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg2);overflow:hidden}
.mini+.mini{margin-top:14px}
.mini-h{display:flex;align-items:center;gap:var(--s2);padding:10px var(--s3);border-bottom:1px solid var(--hair);
  background:var(--surface-2)}
.mini-h h3{font-size:12.5px;font-weight:680;color:var(--tx)}
.mini-h .r{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--tx3)}

/* ══════════ ПОДДЕРЖКА ══════════ */
.sup-grid{display:grid;grid-template-columns:1fr 330px;gap:var(--s4);align-items:start}
.sup-hero{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg2);padding:var(--s4)}
.sup-hero h2{font-size:17px;font-weight:660}
.sup-hero p{margin-top:7px;font-size:13px;color:var(--tx2);max-width:66ch;line-height:1.6}
.sup-ways{margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.sup-way{border:1px solid var(--border);border-radius:var(--r2);padding:11px 12px}
.sup-way .k{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--tx3)}
.sup-way .v{margin-top:5px;font-size:13px;font-weight:600;color:var(--tx)}
.sup-way .m{margin-top:3px;font-size:11.5px;color:var(--tx3);line-height:1.4}
.sup-way .v a{color:var(--accent-tx);text-decoration:none}
.sup{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3);padding:14px}
.sup .q{border:1px solid var(--border);border-radius:var(--r2);padding:10px 12px;font-size:12.5px;color:var(--tx2);
  display:flex;gap:var(--s2);align-items:center;cursor:pointer;text-align:left;background:var(--bg2);width:100%}
.sup .q b{color:var(--tx);font-weight:580}
.sup .q:hover{border-color:var(--accent-bd);color:var(--tx)}
.sup .q.open{border-color:var(--accent-bd)}
.sup .qa{font-size:12.5px;color:var(--tx2);line-height:1.55;padding:0 12px 4px}
.ticket{display:grid;grid-template-columns:1fr auto;gap:var(--s3);align-items:center;padding:10px 12px;
  border:1px solid var(--border);border-radius:var(--r2);font-size:12.5px;background:var(--bg2)}
.ticket .t{font-weight:580;color:var(--tx)}
.ticket .m{font-size:11.5px;color:var(--tx3);margin-top:2px}
.ctxbox{border:1px dashed var(--border-strong);border-radius:var(--r2);padding:10px 12px;font-size:11.5px;
  color:var(--tx2);background:var(--surface-2);line-height:1.5}
.ctxbox b{color:var(--tx)}
.sup-f{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.sup-f .src{font-size:11.5px;color:var(--tx3)}
.sup-f .sp{flex:1}
/* Переписка по обращению: свои реплики прижаты к правому краю и подкрашены
   акцентом, ответы поддержки — нейтральные слева, как в любом диалоге. */
.thread{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s2)}
.msg{border:1px solid var(--border);border-radius:var(--r2);padding:9px 11px;background:var(--bg2);max-width:92%}
.msg.me{background:var(--accent-bg);border-color:var(--accent-bd);justify-self:end}
.msg-h{display:flex;align-items:baseline;gap:var(--s2);font-size:11px;color:var(--tx3);margin-bottom:4px}
.msg-h b{font-size:11.5px;font-weight:660;color:var(--tx2)}
.msg-h .cs{margin-left:auto;font-size:10.5px}
.msg-b{font-size:12.5px;line-height:1.55;color:var(--tx2);white-space:pre-wrap;word-break:break-word}

/* ══════════ ЖУРНАЛ ДЕЙСТВИЙ ══════════ */
.logfilters{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;margin-bottom:12px}
/* Ширину задаём мы, а не самая длинная строка в списке: иначе фильтр «Дело»
   растягивается по названию дела и ряд фильтров разъезжается. */
.logfilters select.inp{border-radius:var(--r2);padding:7px var(--s6) 7px 11px;font-size:12.5px;
  width:196px;text-overflow:ellipsis}
.log{width:100%;border-collapse:collapse;font-size:12.5px}
.log thead th{text-align:left;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);
  font-weight:700;padding:8px 12px;background:var(--surface-2);border-bottom:1px solid var(--border);white-space:nowrap}
.log td{padding:9px 12px;border-bottom:1px solid var(--hair);vertical-align:top}
.log tbody tr:hover{background:var(--surface-2)}
.log tbody tr:last-child td{border-bottom:0}
.log .when{font-family:var(--mono);font-size:11.5px;color:var(--tx3);white-space:nowrap;font-variant-numeric:tabular-nums}
.log .who{display:flex;align-items:center;gap:var(--s2);white-space:nowrap;color:var(--tx);min-width:0}
.log .who .av{flex:none}
.log .who .nm{overflow:hidden;text-overflow:ellipsis}
.log .what b{font-weight:620;color:var(--tx)}
.log .what .m{display:block;font-size:11.5px;color:var(--tx3);margin-top:2px}
.log .obj{font-family:var(--mono);font-size:11.5px;color:var(--tx2)}
.log tr.crit td{background:color-mix(in srgb,var(--danger-bg) 40%,transparent)}
.log tr.ai td{background:color-mix(in srgb,var(--live-bg) 35%,transparent)}

/* Журнал на телефоне — карточками, как и список дел: четыре колонки в 390 px
   превращаются в горизонтальную прокрутку, которую никто не находит. */
@media (max-width:640px){
  .logfilters select.inp{width:100%}
  .log,.log tbody,.log tr,.log td{display:block}
  .log thead{display:none}
  .log tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(104px,auto);gap:2px var(--s2);
    padding:10px 12px;border-bottom:1px solid var(--hair)}
  .log tbody tr:last-child{border-bottom:0}
  .log td{padding:0;border:0}
  .log td.when{grid-column:1;order:1}
  /* Колонке с сотрудником гарантируем минимум 104 px (см. minmax выше):
     иначе соседняя колонка «съедает» её до одного аватара. Длинное имя
     обрезается многоточием внутри, полное — в title. */
  .log td:nth-child(2){grid-column:2;grid-row:1;order:2;justify-self:stretch;min-width:0}
  .log td:nth-child(2) .who{width:100%;justify-content:flex-end}
  .log td.what{grid-column:1 / -1;order:3;margin-top:3px}
  .log td.obj{grid-column:1 / -1;order:4;margin-top:3px;color:var(--tx3)}
  .log .who{gap:6px;font-size:11.5px}
}
.tbl-scroll{overflow-x:auto}

@media (max-width:900px){
  .sup-grid, .sup-ways{grid-template-columns:1fr}}
/* ══════════ ДОБОРКА ПРИМИТИВОВ ДИЗАЙН-СИСТЕМЫ ══════════ */
/* Два поля в строке — тема и дело в обращении, стадия и сумма в модалке дела. */
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
@media (max-width:640px){.form-grid-2{grid-template-columns:1fr}}

/* Карточка шаблона фирмы (design/v2/prototype.html .tpl) — во вкладке
   «Документы» дела: отдельного раздела шаблонов в продукте нет. */
.tpl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);padding:14px}
@media (max-width:1080px){.tpl-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.tpl-grid{grid-template-columns:1fr}}
.tpl{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg2);padding:var(--s3)}
.tpl .k{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--tx3)}
.tpl .t{margin-top:5px;font-size:13.5px;font-weight:620;color:var(--tx)}
.tpl .m{margin-top:4px;font-size:11.5px;color:var(--tx3);line-height:1.45}
.tpl .f{margin-top:10px;display:flex;gap:7px}

/* ══════════ УЗКИЙ ЭКРАН ══════════
   Правило простое: на 390 px ни один экран не уезжает вбок. Двухколоночные
   раскладки схлопываются, ряды «подпись — управление» становятся вертикальными,
   а в списке дел остаётся то, ради чего в него заходят: стадия, дело и
   ближайшее событие. Клиент, юрист и сумма читаются в самом деле. */
@media (max-width:900px){
  .tbl th:nth-child(4),.tbl td:nth-child(4),
  .tbl th:nth-child(5),.tbl td:nth-child(5),
  .tbl th:nth-child(7),.tbl td:nth-child(7),
  .tbl th:nth-child(8),.tbl td:nth-child(8){display:none}

  /* Настройки, команда, обращение: боковая колонка уходит под основную. */
  .gen,.gen.gen-even,.gen.gen-side{grid-template-columns:minmax(0,1fr)}
  .gen .side{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4);margin-top:14px}

  /* Шапки блоков и экранов: кнопки переносятся, а не выдавливают заголовок. */
  .block-h .r,.sc-head .act{flex-wrap:wrap}
  .block-h .r{margin-left:0}
  .sc-head{flex-wrap:wrap;gap:var(--s2)}
  .sc-head .act{margin-left:0}

}
@media (max-width:560px){
  /* «Подпись — управление» в одну колонку: иначе описание сжимается до
     двух слов в строке, а переключатель прижимается к краю. */
  .set-row{grid-template-columns:minmax(0,1fr);gap:var(--s2)}
  .set-row .seg,.set-row .btn-sm,.set-row .switch{justify-self:start}
  .set-row .m{max-width:none}
  .tm-row{flex-wrap:wrap}
  .tm-who{flex-basis:100%;order:-1}
  .tbl-scroll{-webkit-overflow-scrolling:touch}
}

/* Источники ответа в чате по делу — под пузырём, а не внутри него. */
.chat-src{display:flex;flex-wrap:wrap;gap:5px;margin-top:-4px}
.chat-src .cite-chip{margin-left:0}

/* ══════════ ПАМЯТКА ДЛЯ СЛУЖБЫ БЕЗОПАСНОСТИ (/journal/memo) ══════════
   Документ, а не экран: колонка фиксированной ширины, крупный интерлиньяж,
   отступы как у бумаги. Печать в PDF — обычная печать страницы: свой
   генератор PDF со встроенным шрифтом ради одной страницы не нужен, а
   браузер печатает кириллицу и переносы правильно. */
.memo{max-width:760px;margin:0 auto;background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius);padding:var(--s6) var(--s7);line-height:1.62}
.memo-h{border-bottom:2px solid var(--tx);padding-bottom:14px;margin-bottom:var(--s5)}
.memo-h h2{font-size:21px;margin:0 0 6px}
.memo-org{font-size:15px;font-weight:600}
.memo-meta{margin-top:6px;font-size:11.5px;color:var(--tx3)}
.memo section{margin-bottom:var(--s5)}
.memo h3{font-size:14px;margin:0 0 7px}
.memo p{margin:0 0 9px;font-size:13.5px;color:var(--tx2)}
.memo-t{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px}
.memo-t td{padding:6px 0;border-bottom:1px solid var(--border)}
.memo-t td:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:14px}
.memo-f{border-top:1px solid var(--border);padding-top:12px;margin-top:24px}
.memo-f p{font-size:11.5px;color:var(--tx3);margin:0}

@media print{
  /* Печатается документ, а не продукт: рейка, шапка и кнопки уходят. */
  .rail,.pal-overlay,.no-print,.toast-host,.statusbar{display:none !important}
  .app,.main,.memo-page,.inv-page,.pr-page,.hp-page{display:block;margin:0;padding:0;background:#fff}
  .memo,.inv{max-width:none;border:0;border-radius:0;padding:0;background:#fff;color:#000}
  .memo p,.memo-t td,.inv-t td,.inv-total{color:#000}
  .memo section,.inv-case,.pr-page .block{break-inside:avoid}
  /* На бумаге экран владельца читается одной колонкой. */
  .pr-page .gen,.pr-page .gen.gen-even,.hp-page .gen,.hp-page .gen.gen-even{grid-template-columns:1fr}
  .pr-page .block,.hp-page .block{border:1px solid #ddd;background:#fff}
  /* Папку к заседанию печатают и отмечают ручкой — галочки должны
     остаться пустыми квадратами, а не исчезнуть. */
  .hp-chk input{-webkit-appearance:checkbox;appearance:checkbox}
  .hp-page .block{break-inside:avoid}
  @page{margin:18mm 16mm}
}

/* ══════════ СТРАНИЦА «БЕЗОПАСНОСТЬ» (/security) ══════════
   Живёт в стилях лендинга (.lpv2): это страница для чужой службы безопасности,
   и выглядеть она должна как продолжение сайта, а не как экран продукта. */
.secgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s4)}
.seccard{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:var(--s4) var(--s5)}
.seccard h4{margin:0 0 7px;font-size:14.5px}
.seccard p{margin:0;font-size:13.5px;line-height:1.6;color:var(--tx2)}
.secwhere{margin-top:10px;padding-top:9px;border-top:1px dashed var(--border);
  font-size:12px;color:var(--tx3)}
.seclist{margin:0;padding-left:var(--s5);display:grid;gap:var(--s2)}
.seclist li{font-size:14px;color:var(--tx2);line-height:1.55}

/* ══════════ ТАРИФ И РАСХОД (/settings/plan) ══════════ */
.quota{margin-top:8px;height:6px;border-radius:var(--rp);background:var(--surface-2);
  border:1px solid var(--border);overflow:hidden}
.quota i{display:block;height:100%;background:var(--accent)}
.planrow{padding:14px 16px;border-bottom:1px solid var(--border)}
.planrow:last-of-type{border-bottom:0}
.planrow.on{background:var(--surface-2)}
.planrow-h{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3)}
.planprice{font-size:19px;font-weight:700;margin-top:2px}
.planfeat{margin:9px 0 0;padding-left:var(--s4);display:grid;gap:var(--s1)}
.planfeat li{font-size:12.5px;color:var(--tx2)}

/* ══════════ ЧАСЫ, СТАВКИ И СЧЁТ КЛИЕНТУ (Г2) ══════════
   Деньги читаются столбиком и моноширинно: сумму в счёте сверяют глазами по
   разряду, а пропорциональный шрифт этого не даёт. */
.ratefields{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s2);margin-top:10px}

/* Строка записи времени: дата и длительность слева, описание в середине,
   деньги справа — тот же порядок, что в счёте, чтобы сверка шла построчно. */
.te-row{display:grid;grid-template-columns:64px minmax(0,1fr) auto 16px;gap:var(--s3);align-items:baseline;
  padding:9px 14px;border-bottom:1px solid var(--hair)}
.te-row:last-child{border-bottom:0}
.te-date{font-family:var(--mono);font-size:11.5px;color:var(--tx3);white-space:nowrap}
.te-what{font-size:12.5px;color:var(--tx);line-height:1.45}
.te-meta{margin-top:2px;font-size:11px;color:var(--tx3);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.te-sum{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px;
  color:var(--tx);text-align:right;white-space:nowrap}
.te-sum .dur{display:block;font-size:11px;color:var(--tx3)}
.te-row.nb .te-sum{color:var(--tx3)}
/* Строка без кнопки удаления (карточка клиента, счёт) — три колонки. */
.te-row.ro{grid-template-columns:64px minmax(0,1fr) auto}
.te-del{background:none;border:0;color:var(--tx3);cursor:pointer;padding:0 2px;font-size:12px}
.te-del:hover{color:var(--danger)}

/* Итог по часам — крупной строкой над списком: это ответ на вопрос экрана. */
.te-total{display:flex;flex-wrap:wrap;gap:var(--s4);padding:12px 14px;border-bottom:1px solid var(--border)}
.te-total div{display:grid;gap:2px}
.te-total .k{font-size:11px;color:var(--tx3);text-transform:uppercase;letter-spacing:.04em}
.te-total .v{font-family:var(--num);font-variant-numeric:tabular-nums;font-size:18px;font-weight:650}

/* Счёт клиенту — документ, как памятка для СБ: печатается браузером. */
.inv{max-width:820px;margin:0 auto;background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius);padding:var(--s6) var(--s7);line-height:1.55}
.inv-h{border-bottom:2px solid var(--tx);padding-bottom:14px;margin-bottom:var(--s5)}
.inv-h h2{font-size:21px;margin:0 0 6px}
.inv-org{font-size:15px;font-weight:600}
.inv-meta{margin-top:6px;font-size:11.5px;color:var(--tx3)}
.inv-case{margin-bottom:var(--s5)}
.inv-case h3{font-size:13.5px;margin:0 0 3px}
.inv-case .num{font-family:var(--mono);font-size:11.5px;color:var(--tx3);margin-bottom:7px}
.inv-t{width:100%;border-collapse:collapse;font-size:12.5px}
.inv-t th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--tx3);font-weight:600;padding:5px 8px;border-bottom:1px solid var(--border)}
.inv-t td{padding:6px 8px;border-bottom:1px solid var(--hair);vertical-align:top}
.inv-t td.num,.inv-t th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.inv-t tr.sub td{border-bottom:0;font-weight:650}
.inv-total{margin-top:var(--s5);padding-top:14px;border-top:2px solid var(--tx);display:grid;gap:6px}
.inv-total .row{display:flex;justify-content:space-between;font-size:13.5px}
.inv-total .row.big{font-size:17px;font-weight:700;margin-top:5px}
.inv-total .row .v{font-family:var(--mono);font-variant-numeric:tabular-nums}
.inv-f{margin-top:24px;padding-top:12px;border-top:1px dashed var(--border);font-size:11.5px;color:var(--tx3)}

/* ══════════ ПРАКТИКА (/practice) ══════════
   Экран владельца: сначала плохие новости, потом всё остальное. */
.pr-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin-bottom:14px}
.pr-kpi > div{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--s3) var(--s4);display:grid;gap:3px}
.pr-kpi .k{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3)}
.pr-kpi .v{font-family:var(--num);font-variant-numeric:tabular-nums;font-size:22px;font-weight:680;color:var(--tx)}
.pr-kpi .s{font-size:11px;color:var(--tx3)}
.pr-kpi > div.bad .v{color:var(--danger)}
.pr-kpi > div.warn .v{color:var(--warning)}

/* Строка риск-листа: дата, что и по какому делу, сколько осталось. */
.pr-risk{display:grid;grid-template-columns:70px minmax(0,1fr) auto;gap:var(--s3);align-items:center;
  padding:10px 14px;border-bottom:1px solid var(--hair);text-decoration:none;color:inherit}
.pr-risk:last-child{border-bottom:0}
.pr-risk:hover{background:var(--surface-2)}
.pr-when{font-size:11.5px;color:var(--tx3);white-space:nowrap}
.pr-risk.od .pr-when{color:var(--danger);font-weight:600}
.pr-what{display:grid;gap:2px;min-width:0}
.pr-what .t{font-size:12.5px;font-weight:560;color:var(--tx)}
.pr-what .m{font-size:11px;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr-right{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}

/* Таблица нагрузки: числа моноширинно и по правому краю — их сравнивают
   глазами по столбцу, а не читают подряд. */
.pr-t{width:100%;border-collapse:collapse;font-size:12.5px}
.pr-t th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--tx3);font-weight:600;padding:8px 14px;border-bottom:1px solid var(--border)}
.pr-t td{padding:9px 14px;border-bottom:1px solid var(--hair)}
.pr-t tr:last-child td{border-bottom:0}
.pr-t td.num,.pr-t th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.pr-t td.num.bad{color:var(--danger);font-weight:650}
.pr-t tr.nobody td{color:var(--warning)}
/* Кто именно — не должно уезжать за край при прокрутке: строка цифр без
   имени не читается. Колонка закрепляется слева вместе с фоном, иначе
   уплывающие цифры просвечивают сквозь неё. */
@media(max-width:900px){
  .pr-t{min-width:620px}
  .pr-t th:first-child, .pr-t td:first-child{position:sticky;left:0;z-index:1;
    background:var(--bg2);box-shadow:1px 0 0 var(--hair)}
  .pr-t thead th:first-child{background:var(--surface-2)}
}
@media (max-width:900px){.pr-kpi{grid-template-columns:1fr 1fr}}

/* ══════════ КАБИНЕТ КЛИЕНТА (/c/:token) ══════════
   Страница для доверителя, а не для юриста: крупный шрифт, воздух, никакой
   рейки и никакого продукта. Бренд — фирмы; упоминания NORMA здесь нет
   сознательно (решение владельца от 2026-08-17). */
.cp{min-height:100vh;background:var(--bg);display:flex;flex-direction:column}
.cp-center{margin:auto;max-width:520px;padding:var(--s7) 24px;text-align:center;color:var(--tx2)}
.cp-gone h2{font-size:20px;margin:0 0 10px;color:var(--tx)}
.cp-gone p{font-size:14.5px;line-height:1.6}
.cp-top{border-bottom:1px solid var(--border);background:var(--bg2);
  padding:var(--s5) 24px;display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4)}
.cp-firm{font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--tx)}
.cp-upd{font-size:12px;color:var(--tx3)}
.cp-main{width:100%;max-width:720px;margin:0 auto;padding:32px 24px 48px;flex:1}
.cp-case h1{font-size:23px;line-height:1.3;margin:0 0 8px}
.cp-ids{display:flex;flex-wrap:wrap;gap:var(--s2);font-size:13px;color:var(--tx3)}
.cp-note{margin:var(--s5) 0 0;padding:14px 16px;border-radius:var(--radius);
  background:var(--accent-bg);color:var(--accent-tx);font-size:14.5px;line-height:1.55}
.cp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s3);margin-top:var(--s5)}
.cp-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:var(--s4) var(--s4)}
.cp-card .k{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--tx3)}
.cp-card .v{margin-top:6px;font-size:16px;font-weight:620;color:var(--tx);line-height:1.35}
.cp-card .s{margin-top:4px;font-size:12.5px;color:var(--tx3)}
.cp-sec{margin-top:var(--s6)}
.cp-sec h2{font-size:14px;font-weight:680;margin:0 0 12px;color:var(--tx2);font-family:var(--display)}
.cp-ev{display:grid;grid-template-columns:88px minmax(0,1fr);gap:var(--s3);padding:9px 0;
  border-bottom:1px solid var(--hair);font-size:14px}
.cp-ev:last-child{border-bottom:0}
.cp-ev .d{font-size:12.5px;color:var(--tx3);white-space:nowrap}
.cp-doc{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
  padding:var(--s3) 16px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--bg2);text-decoration:none;color:inherit;margin-bottom:8px}
.cp-doc:hover{border-color:var(--accent);background:var(--surface-2)}
.cp-doc .n{font-size:14px;font-weight:560}
.cp-doc .m{font-size:12px;color:var(--tx3);white-space:nowrap}
.cp-lawyer .cp-who{font-size:15px;font-weight:620}
.cp-ask{margin:8px 0 0;font-size:13px;color:var(--tx3);line-height:1.55}
.cp-foot{border-top:1px solid var(--border);padding:var(--s4) 24px;text-align:center;
  font-size:12px;color:var(--tx3)}
@media (max-width:640px){
  .cp-main{padding:24px 16px var(--s7)}
  .cp-case h1{font-size:20px}
  .cp-ev{grid-template-columns:1fr;gap:2px}
}

/* Панель «Открыть клиенту» в досье: чекбоксы состава и список выданных ссылок. */
.pl-link{display:grid;gap:var(--s1);padding:11px 14px;border-bottom:1px solid var(--hair)}
.pl-link:last-child{border-bottom:0}
.pl-link .u{font-family:var(--mono);font-size:11.5px;color:var(--accent-tx);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-link .m{font-size:11.5px;color:var(--tx3)}
.pl-link.off{opacity:.55}

/* ══════════ ПОДГОТОВКА К ЗАСЕДАНИЮ (/cases/:id/hearings/:hid/prep) ══════════
   Экран одного вечера: крупные галочки, которые видно с расстояния вытянутой
   руки, и печать без интерфейса — папку собирают на бумаге. */
.hp-chk{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s3);align-items:center;
  padding:11px 14px;border-bottom:1px solid var(--hair);cursor:pointer;margin:0;
  font-size:13.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--tx)}
.hp-chk:last-of-type{border-bottom:0}
.hp-chk input{width:17px;height:17px;margin:0;accent-color:var(--accent)}
.hp-chk.on .t{color:var(--tx3);text-decoration:line-through}
.hp-del{background:none;border:0;color:var(--tx3);cursor:pointer;font-size:12px;padding:0 2px;opacity:0}
.hp-chk:hover .hp-del{opacity:1}
.hp-del:hover{color:var(--danger)}
.hp-add{display:flex;gap:var(--s2);padding:11px 14px;border-top:1px solid var(--border)}
.hp-add input{flex:1;background-color:var(--bg2);border:1px solid var(--border-strong);
  border-radius:var(--r2);padding:7px 11px;font-size:12.5px;color:var(--tx)}
.hp-doc{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
  padding:10px 14px;border-bottom:1px solid var(--hair);text-decoration:none;color:inherit}
.hp-doc:last-child{border-bottom:0}
.hp-doc:hover{background:var(--surface-2)}
.hp-doc .n{font-size:12.5px;font-weight:540}
.hp-doc .m{font-size:11px;color:var(--tx3);white-space:nowrap}

/* Фраза счётчика пользы — то же предложение, что уходит владельцу письмом. */
.valsent{font-size:15px;line-height:1.6;color:var(--tx);font-weight:520}

/* ══════════ КОРПУС ПРАКТИКИ ФИРМЫ (Г3.4) ══════════ */
.sim{display:block;padding:10px 0;border-bottom:1px solid var(--hair);text-decoration:none;color:inherit}
.sim:last-child{border-bottom:0}
.sim:hover .sim-h .t{color:var(--accent-tx)}
.sim-h{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s2)}
.sim-h .t{font-size:12.5px;font-weight:580;line-height:1.35;color:var(--tx)}
.sim-m{margin-top:3px;font-size:11px;color:var(--tx3)}
/* Подсветку совпавших слов рисует ts_headline тегами <b>. */
.sim-s{margin-top:5px;font-size:11.5px;color:var(--tx2);line-height:1.5}
.sim-s b{color:var(--accent-tx);font-weight:650}


/* ══════════ ПОМОЩЬ (docs/ADMIN_PANEL.md §4.6) ══════════
   Страница открывается и БЕЗ входа — по ссылке, которую переслали письмом.
   У вошедшего она живёт внутри .content с его отступами, у гостя отступов
   нет вовсе, поэтому они здесь свои и гасятся внутри приложения. */
.help-wrap{max-width:900px;margin:0 auto;padding:var(--s6) var(--s5) var(--s8)}
.content .help-wrap{max-width:none;margin:0;padding:0}
.help-search{display:flex;gap:var(--s2);align-items:center}
.help-search .inp{width:260px;background-color:var(--bg2);border:1px solid var(--border-strong);
  border-radius:var(--r2);padding:7px 10px;font-size:12.5px;color:var(--tx)}
.help-search .inp:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.help-sect{margin-top:var(--s5)}
.help-sect h2{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--tx3);margin:0 0 6px;font-family:var(--display)}
.help-item{border-bottom:1px solid var(--hair)}
.help-q{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);width:100%;
  padding:12px 0;background:none;border:0;text-align:left;cursor:pointer;
  font-size:13.5px;font-weight:560;color:var(--tx)}
.help-q:hover{color:var(--accent-tx)}
.help-q .mk{color:var(--tx3);font-weight:400}
/* Статьи приходят с сервера и правятся из админки, поэтому разметка тела
   статьи стилизуется целиком: заранее неизвестно, что в ней окажется. */
.help-a{padding:0 0 16px;max-width:72ch;color:var(--tx2);font-size:13px;line-height:1.65}
.help-a h2,.help-a h3,.help-a h4,.help-a h5{color:var(--tx);margin:16px 0 6px;font-size:13.5px;font-weight:640}
.help-a p{margin:0 0 10px}
.help-a ul,.help-a ol{margin:0 0 10px;padding-left:var(--s5)}
.help-a li{margin:3px 0}
.help-a code{font-family:var(--mono);font-size:12px;background:var(--surface-2);
  border:1px solid var(--hair);border-radius:var(--r1);padding:1px 4px}
.help-a pre{background:var(--surface-2);border:1px solid var(--hair);border-radius:var(--r2);
  padding:10px 12px;overflow-x:auto;margin:0 0 12px}
.help-a pre code{background:none;border:0;padding:0}
/* Скриншот справки не должен выпирать за колонку текста на узком экране. */
.help-a img{display:block;max-width:100%;height:auto;margin:10px 0;
  border:1px solid var(--border);border-radius:var(--r2)}
.help-a a{color:var(--accent-tx)}


/* ══════════ АДМИНКА NORMA (docs/ADMIN_PANEL.md) ══════════
   Токены и компоненты те же, что у продукта: вторая дизайн-система разъехалась
   бы с первой через месяц. Здесь только раскладка бэк-офиса — плитки сводки,
   таблицы очередей и рейка с текстовыми пунктами вместо иконок: у сотрудника
   поддержки восемь разделов, и иконки в них не запоминаются. */
.admin-bare{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
/* Своя ширина рейки: у продукта колонка 56px под иконки, здесь 184px под
   текстовые пункты. Менять надо колонку сетки, а не только саму рейку —
   иначе она наезжает на содержимое и перехватывает нажатия (поймано
   браузерной проверкой). */
.app.admin{grid-template-columns:184px 1fr}
.admin-rail{align-items:stretch;padding:14px 10px;gap:2px}
/* Пункты текстовые, а не иконки: у сотрудника поддержки восемь разделов, и
   иконки в них не запоминаются. flex:none обязателен — иначе распорка .sp
   рейки сжимает ссылки в ноль и перехватывает нажатия на них. */
.admin-mk{margin-bottom:12px;padding:0 10px;font-size:11.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:#fff;opacity:.85;flex:none}
.admin-nav{display:block;flex:none;padding:7px 10px;border-radius:var(--r2);font-size:12.5px;
  font-weight:540;color:var(--on-navy);text-decoration:none;text-align:left;background:none;
  border:0;cursor:pointer;width:100%;font-family:inherit}
.admin-nav:hover{background:rgba(255,255,255,.10);color:#fff}
.admin-nav.router-link-active{background:rgba(255,255,255,.16);color:#fff;font-weight:620}
.admin-nav.as-btn{opacity:.75}
.admin-who{font-size:11.5px}

/* Вход и подключение второго фактора — единственные экраны без рейки. */
.admin-login{width:100%;display:flex;justify-content:center}
.admin-login-box{width:340px;display:flex;flex-direction:column;gap:var(--s3);
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:var(--s5)}
.admin-login-h{display:flex;flex-direction:column;gap:3px;margin-bottom:4px}
.admin-login-h b{font-size:15px}
.admin-login-h .muted{font-size:11.5px}
.admin-login-note{margin-top:4px;line-height:1.5}
.admin-err{margin:0;font-size:12px;color:var(--danger)}
.admin-err-txt{font-family:var(--mono);font-size:11px;color:var(--danger);text-align:right}
.admin-setup{max-width:560px}
.admin-steps{margin:14px 0;padding-left:var(--s5);font-size:13px;line-height:1.7;color:var(--tx2)}
.admin-secret{display:flex;align-items:center;gap:var(--s2);margin:6px 0}
.admin-secret code{font-family:var(--mono);font-size:13px;letter-spacing:.08em;
  background:var(--surface-2);border:1px solid var(--hair);border-radius:var(--r2);padding:5px 8px}
.admin-setup-form{max-width:260px}

/* Сводка: каждая плитка — ссылка на отфильтрованный список.
   Колонок ровно четыре, а не «сколько влезет»: плиток восемь, и при auto-fill
   они ложились 5+3 — вторая строка обрывалась на середине с дырой во всю
   треть экрана. Четыре дают два полных ряда на любом мониторе. */
.admin-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3);max-width:1120px}
@media(max-width:1180px){.admin-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:860px){.admin-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.admin-tiles{grid-template-columns:minmax(0,1fr)}}
.admin-tile{display:flex;flex-direction:column;gap:2px;padding:14px;text-decoration:none;color:inherit;
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--sh-xs);transition:.12s}
.admin-tile:hover{border-color:var(--accent-bd);box-shadow:var(--sh-sm)}
.admin-tile .v{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1;
  font-family:var(--mono);letter-spacing:-.03em}
.admin-tile .l{font-size:12.5px;font-weight:560;margin-top:4px}
.admin-tile .h{font-size:11px;color:var(--tx3);line-height:1.35}
/* Тревожная плитка отличается не только цветом цифры: восемь одинаковых
   карточек читаются как список, и красная цифра в нём теряется. */
.admin-tile.alarm{border-color:var(--danger-bd);background:linear-gradient(180deg,var(--danger-bg),var(--bg2) 62%)}
.admin-tile.alarm .v{color:var(--danger)}
.admin-tile.alarm:hover{border-color:var(--danger)}
/* Начало очереди под плитками — той же ширины, что и они. */
.admin-queue{max-width:1120px;margin-top:16px}

.block-b{padding:12px 14px;font-size:12.5px;line-height:1.55}
/* Таблицы бэк-офиса: выпадающий список внутри ячейки не должен растягивать
   её и наезжать на соседние колонки, а кнопки действий — переноситься по
   одной в строке (поймано браузерной проверкой). */
/* У продуктовых таблиц колонки фиксированы <col>-ами под конкретный экран
   дела; у бэк-офиса на каждом экране свой набор колонок, поэтому раскладка
   здесь по содержимому. С fixed-раскладкой даты и пилюли вылезали из своих
   ячеек и наезжали на соседние. */
.admin table.tbl{table-layout:auto;min-width:0}
/* Строки бэк-офиса чуть свободнее продуктовых 44px: в ячейке живут две
   строки (название + подпись), и 7px сверху их сплющивали. */
.admin table.tbl td{padding:9px 10px;height:auto;vertical-align:middle}
/* Название роли не влезало в 190px и обрывалось на середине слова прямо под
   стрелкой списка. Ширину задаёт содержимое, потолок — по самой длинной
   осмысленной роли. */
.admin table.tbl select.inp{width:auto;min-width:180px;max-width:280px;background-color:var(--bg2);
  border:1px solid var(--border-strong);border-radius:var(--r2);padding:5px var(--s6) 5px 9px;font-size:12px;
  color:var(--tx);text-overflow:ellipsis}
.admin table.tbl td .btn-sm{white-space:nowrap}
/* Действия строки — вплотную справа, как в продукте: и «Новый пароль», и
   «···» в одну строку, а не столбиком в две. */
.admin table.tbl td.rowact{width:1%;white-space:nowrap;text-align:right;position:relative}
.admin table.tbl td.rowact .acts{display:inline-flex;gap:6px;align-items:center;justify-content:flex-end}
/* Ссылка в таблице — это строка данных, а не гиперссылка в тексте: полсотни
   синих подчёркиваний в столбце читаются как помехи. Подчёркивание и цвет
   возвращаются под курсором, где они и нужны. */
.admin table.tbl a{color:var(--tx);text-decoration:none;font-weight:560}
.admin table.tbl a:hover{color:var(--accent-tx);text-decoration:underline;text-underline-offset:2px}
.admin-toolbar{display:flex;align-items:center;gap:var(--s2);margin-bottom:14px;flex-wrap:wrap}
/* min-width:180px обрезал собственный плейсхолдер: «Название или почта вла…»
   и «Тема, организация, поч…». Поле должно вмещать подсказку, которую само
   же и показывает, — иначе оно не объясняет, что в него писать. */
.admin-toolbar .inp{background-color:var(--bg2);border:1px solid var(--border-strong);
  border-radius:var(--r2);padding:6px 9px;font-size:12.5px;color:var(--tx);min-width:264px}
.admin-toolbar .sp{flex:1}
/* Итог очереди — со словом, а не голым числом: «3729» само по себе не
   сообщает, чего именно 3729 (тот же счётчик-чип, что в шапках блоков). */
.admin-count{font-family:var(--mono);font-size:11.5px;color:var(--tx3);background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--r1);padding:3px 9px;white-space:nowrap}
@media(max-width:640px){.admin-toolbar .inp{min-width:0;flex:1}}
.admin-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--s4);align-items:start}
.admin-actions{display:flex;gap:var(--s2)}
.admin-kv{display:flex;justify-content:space-between;gap:var(--s3);padding:5px 0;
  border-bottom:1px solid var(--hair);font-size:12.5px}
.admin-kv:last-child{border-bottom:0}
.admin-kv span{color:var(--tx3)}
.admin-row{display:flex;justify-content:space-between;gap:var(--s3);padding:7px 0;
  border-bottom:1px solid var(--hair);text-decoration:none;color:inherit;font-size:12.5px}
.admin-row:last-child{border-bottom:0}
.admin-note{padding:8px 0;border-bottom:1px solid var(--hair);font-size:12.5px;line-height:1.5}
.admin-note:last-child{border-bottom:0}
.admin-note .muted{font-size:11px}
.admin-warn{margin-top:6px;font-size:12px;color:var(--danger)}
.admin-two{display:grid;grid-template-columns:1fr 120px;gap:var(--s3)}
.admin-check{display:flex;align-items:center;gap:7px;padding:3px 0;font-size:12.5px;
  text-transform:none;letter-spacing:normal;font-weight:440;color:var(--tx2)}
.admin-perms{margin:8px 0 0;padding-left:var(--s4);font-size:12px;color:var(--tx2);line-height:1.8}
.admin-profile{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--s4);align-items:start}

/* Переписка обращения: свои сообщения справа, как в любой переписке. */
.admin-tk-meta{font-size:11.5px;margin-bottom:10px}
.admin-msg{padding:9px 11px;margin-bottom:8px;font-size:12.5px;line-height:1.55;
  background:var(--surface-2);border:1px solid var(--hair);border-radius:var(--r2)}
.admin-msg.own{background:var(--tint);margin-left:var(--s6)}
.admin-msg .muted{font-size:11px;margin-bottom:3px}
.admin-ctx{margin:8px 0 12px;font-size:12px}
.admin-ctx summary{cursor:pointer;color:var(--tx3)}

/* Редактор справки: текст статьи и предпросмотр той же разметкой, что в продукте. */
.admin-md{min-height:220px;font-family:var(--mono);font-size:12px;line-height:1.6}
.admin-help-tools{align-items:center;gap:var(--s2)}
.admin-preview{margin-top:12px;padding:12px;background:var(--surface-2);
  border:1px solid var(--hair);border-radius:var(--r2)}

/* ══════════ ДОВОДКА ПОД NORMA SIGNAL ═══════════════════════════════════════
   Последний ярус: он приводит уже существующие компоненты продукта к языку
   нового дизайна, не переписывая 2300 правил выше. Правил здесь ровно
   столько, сколько отличий между старой формой и новой:

     1. КАРТОЧКА — белый лист на сером поле, БЕЗ рамки и БЕЗ тени. Разделение
        даёт цвет поля, а не линия по периметру. Это главное отличие Signal от
        прежней системы, где карточка держалась волосяной рамкой.
     2. ТАБЛИЦА — шапка серой полосой 34px внутри белой карточки, строки на
        линейках --hair, наведение почти незаметное.
     3. БЕЙДЖ — пилюля 999px без рамки: рамка была нужна на белом, а на цветной
        подложке она только утолщает контур.
     4. ВКЛАДКА — активная белая с тенью на сером, неактивная прозрачная.
     5. КНОПКА — вторичная белая с тенью 1px (не рамкой), первичная тушью.
     6. ЧИСЛО — моно везде, кроме крупного KPI: тот антиквой.

   Раздел стоит последним намеренно: он должен выигрывать у экранных правил,
   которые задавали форму под прежнюю систему. Лендинг (.lpv2) сюда не входит —
   у него своя раскладка, прибитая к своему корню. */

/* ── 1. Карточка. */
.block, .mini, .tdy-block, .inb-grp, .an-block, .pick, .chat, .verbar, .an-zero,
.cc-inst-group, .errstate, .cs-bcard, .an-kpi, .cl-hero, .seccard{
  background:var(--sheet);border:0;box-shadow:none;border-radius:var(--r2)}
/* Заголовок карточки: разделитель волосяной, а не полновесной линией. */
.block-h, .mini-h{border-bottom:1px solid var(--hair);background:transparent}
.block-h h2, .mini-h h3{font-family:var(--display);font-size:15px;font-weight:500;
  letter-spacing:-.008em;color:var(--tx)}
.block-h .cnt{font-family:var(--mono);font-size:11px;color:var(--tx3);background:transparent;
  border:0;padding:0;font-variant-numeric:tabular-nums}
/* Вложенный блок внутри карточки — не белее белого, а на тон темнее. */
.mini .mini, .block .pick{background:var(--field);border-radius:10px}

/* ── 2. Таблица. */
table{border-collapse:collapse;width:100%}
thead th{background:var(--field);height:34px;padding:0 var(--s4);text-align:left;
  font-family:var(--display);font-size:12px;font-weight:400;color:var(--tx3);
  letter-spacing:0;text-transform:none;white-space:nowrap}
tbody td{padding:13px var(--s4);border-bottom:1px solid var(--hair);font-size:13.5px;
  color:var(--tx);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background var(--t)}
/* Наведение почти незаметное: строку подсвечивает не заливка, а курсор.
   Значение вынесено в токен: в тёмной теме «чуть светлее белого» не бывает. */
tbody tr:hover{background:var(--row-hover)}
/* Номер дела, ИНН, сумма и дата в ячейке — моно с табличными цифрами. */
td .code, td .mono, td .num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px}

/* ── 3. Бейдж. */
.pill, .chip{border-radius:var(--rp);border:0;font-size:11.5px;font-weight:500;
  height:22px;padding:0 10px;display:inline-flex;align-items:center;gap:6px;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.pill.red{background:var(--late-bg);color:var(--late)}
.pill.amb{background:var(--soon-bg);color:var(--soon)}
.pill.grn{background:var(--done-bg);color:var(--done)}
.pill.liv{background:var(--live-bg);color:var(--live)}
.pill.ind, .pill.mut, .chip{background:var(--tint);color:var(--tx2)}
.chip-sum{background:var(--tint);color:var(--tx);font-family:var(--mono)}

/* ── 4. Вкладка. */
.casetabs a{height:32px;display:inline-flex;align-items:center;gap:7px;
  padding:0 14px;border-radius:var(--r1);font-size:13px;font-weight:400;color:var(--tx3);
  background:transparent;border:0;cursor:pointer;transition:background var(--t),color var(--t)}
.casetabs a:hover{background:var(--tint);color:var(--tx)}
.casetabs a.on{background:var(--sheet);color:var(--tx);
  box-shadow:0 1px 2px rgba(25,25,23,.08)}
.casetabs a .n{font-family:var(--mono);font-size:12px;color:var(--tx3)}

/* ── 5. Кнопка. Вторичная держится тенью в 1px, а не рамкой: рамка рядом с
   белой карточкой без рамки читается как чужой элемент. */
.btn-sm{height:34px;padding:0 15px;border:0;border-radius:var(--r1);background:var(--sheet);
  color:var(--tx);font-family:inherit;font-size:13px;font-weight:400;
  box-shadow:0 1px 2px rgba(25,25,23,.08);transition:background var(--t)}
.btn-sm:hover:not(:disabled){background:var(--tint);border:0}
.btn-sm.pri{background:var(--accent);color:var(--on-accent);box-shadow:none}
.btn-sm.pri:hover:not(:disabled){background:var(--accent-s)}
.btn-sm.danger{background:var(--late-bg);color:var(--late);box-shadow:none}
.btn-sm:disabled{opacity:.5}
.btn-sm.pri:disabled, .modal .btn-primary:disabled{opacity:1;background:var(--tint-2);color:var(--tx3)}

/* ── 6. Число. Крупные KPI — антиквой, всё остальное моно. */
.an-kpi .v, .cl-hero .v{
  font-family:var(--serif);font-weight:500;line-height:1;font-variant-numeric:tabular-nums}

/* ── Поля ввода: белый лист на сером поле, линия только по фокусу. */
input[type=text], input[type=email], input[type=password], input[type=search],
input[type=number], input[type=date], input[type=time], textarea, select{
  background:var(--sheet);border:1px solid var(--border);border-radius:var(--r1);color:var(--tx)}
input:focus, textarea:focus, select:focus{border-color:var(--tx);box-shadow:none;outline:none}

/* Витрина переопределяет продуктовый сброс полей. Правило стоит ЗДЕСЬ, а не
   в блоке лендинга, потому что сброс выше объявлен позже него и иначе
   выигрывает: у поля демо появлялась чужая рамка с уголками, хотя по макету
   линию под ним рисует обёртка .lp-field. */
.lpv2 .lp-field input{background:transparent;border:0;border-radius:0;box-shadow:none}
.lpv2 .lp-field input:disabled{opacity:.55}
/* Отправлено: кнопка не «сломанная тёмная», а спокойно закрытая норма. */
.lpv2 .lp-btn.done, .lpv2 .lp-btn.done:disabled{opacity:1;background:var(--done-bg);
  color:var(--done);cursor:default}

/* ── Модалка: скруглена сильнее карточек, шапка и подвал на поле. */
.modal{border-radius:var(--r3)}
.modal > h3{background:var(--field);border-bottom:1px solid var(--hair);
  font-family:var(--display);font-size:14px;font-weight:500;letter-spacing:-.008em}
.modal > .actions{background:var(--field);border-top:1px solid var(--hair)}
.modal label{font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tx3)}

/* ── Пустой экран: воздух и одна фраза, без рамок. */
.empty{color:var(--tx3);font-size:13.5px}
.empty h3{font-family:var(--display);font-size:16px;font-weight:500;color:var(--tx2)}

/* Таблица — белый лист на сером поле, как карточка: в админке и в журнале
   она стоит без обёртки .block, и без этого правила строки лежали прямо на
   фоне страницы, отдельно от всей остальной системы поверхностей.
   Внутри карточки поверхность уже есть — там таблица остаётся прозрачной,
   иначе её скруглённый угол проступает швом поверх угла карточки. */
.tbl{background:var(--sheet);border-radius:var(--r2);overflow:hidden}
.block .tbl, .mini .tbl{background:transparent;border-radius:0;overflow:visible}
.tbl td{border-bottom:1px solid var(--hair)}
.tbl tbody tr:last-child td{border-bottom:0}

/* ── 7. Микро-подпись капсом. В системе Signal это ОДИН компонент: моно 10px,
   трекинг .16em, вес 400, цвет --tx3. Прежняя система набирала такие подписи
   санс-серифом в 700 и семью разными кеглями — отсюда ощущение, что каждый
   экран рисовал свой ярлык. Здесь они сводятся к одному правилу. */
.cc-label, .kad-k, .link-row-k, .cf .k, .brief-row .k, .ref-role, .an-kpi .lbl,
.cl-field .k, .pick-g, .tm-you, .dock-lead, .track-today::after{
  font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tx3)}
/* «Просрочено на» в полосе срока — та же подпись, но цветом срока. */
.dock-lead{color:inherit}

/* ── 8. Шапка таблицы. В приложении она НЕ капсом: капс-моно — голос витрины
   и служебных ярлыков, а в плотной таблице он читается хуже обычного текста.
   Макет приложения набирает «Дело · Стороны · Сумма · Срок · Статус» строчными
   в 12px по серой полосе. */
.tbl thead th, .dtable thead th{
  background:var(--field);height:34px;padding:0 var(--s4);
  font-family:var(--display);font-size:12px;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--tx3);border-bottom:0}

/* Показатель сводки: ярлык сверху, значение под ним обычным текстом.
   НЕ пилюля: значения бывают длиной в название организации, а пилюля их не
   переносит — строка уезжала за правый край панели. */
.brief-row{min-width:0}
.brief-row .v{display:block;margin-top:3px;font-size:13px;line-height:1.45;
  color:var(--tx);overflow-wrap:anywhere}
.brief-row.grn .v{color:var(--done)}
.brief-row.red .v{color:var(--late)}

/* ── Сводка по делу в справочной панели досье. Показатели идут строками
   .cf (ярлык — значение), связный вывод — обычным текстом под ними: своей
   типографики у сводки нет, она пользуется общей разметкой ответа ИИ. */
.brief-say{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--hair);
  font-size:13px;line-height:1.6;color:var(--tx2)}
.brief-say .ai-h{color:var(--tx)}

/* ── Админка. Контур отдельный, дизайн-система одна: рейка та же плавающая
   панель, что и у продукта, только шире под текстовые пункты. */
.app.admin{grid-template-columns:212px 1fr}
.admin-rail{align-items:stretch;padding:20px 12px;gap:2px;border-radius:var(--r3)}
.admin-mk{margin-bottom:var(--s4);padding:0 10px;font-family:var(--serif);font-size:20px;
  font-weight:500;letter-spacing:-.02em;text-transform:none;color:var(--on-dom);opacity:1;flex:none}
.admin-nav{display:flex;align-items:center;height:34px;padding:0 10px;border-radius:var(--r1);
  font-size:13.5px;font-weight:400;color:var(--on-dom-2);transition:background var(--t),color var(--t)}
.admin-nav:hover{background:rgba(250,250,249,.09);color:var(--on-dom)}
.admin-nav.router-link-active{background:rgba(250,250,249,.14);color:var(--on-dom);font-weight:400}
.admin-who{font-size:11.5px;color:var(--dom-3)}
@media (max-width:900px){.app.admin{grid-template-columns:1fr}}