/* Норма — веб-кабинет.
   Кабинет — рабочий инструмент юридической компании: холодный бумажный холст,
   белые поверхности, чернильный текст и зелёный только как подтверждённый результат.
   Рамки несут иерархию, тени оставлены лишь для временно всплывающих объектов. */

:root {
  --canvas: #f3f5f2;
  --surface: #ffffff;
  --ink: #151a18;
  --ink-70: rgba(21, 26, 24, 0.7);
  --ink-65: rgba(21, 26, 24, 0.65);
  --ink-60: rgba(21, 26, 24, 0.6);
  --ink-55: rgba(21, 26, 24, 0.55);
  --ink-50: rgba(21, 26, 24, 0.5);
  --ink-45: rgba(21, 26, 24, 0.45);
  --ink-40: rgba(21, 26, 24, 0.4);
  --ink-30: rgba(21, 26, 24, 0.3);
  --wash: rgba(21, 26, 24, 0.055);
  --wash-strong: rgba(21, 26, 24, 0.1);
  --line: rgba(21, 26, 24, 0.13);
  --hairline: rgba(21, 26, 24, 0.08);
  --accent: #2d6c49;
  --accent-deep: #255b3d;
  --accent-deeper: #1d4931;
  --accent-soft: rgba(45, 108, 73, 0.12);
  --accent-softer: rgba(45, 108, 73, 0.08);
  --warning: #985329;
  --warning-soft: rgba(152, 83, 41, 0.12);
  --action: #9e4933;
  --action-soft: rgba(158, 73, 51, 0.12);
  --r-card: 12px;
  --r-ctl: 7px;
  --r-sm: 4px;
  --shadow-card: 0 1px 2px rgba(21, 26, 24, 0.04);
  --shadow-soft: none;
  --shadow-lift: 0 8px 18px rgba(21, 26, 24, 0.08);
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: var(--canvas); }

body {
  font-family: "Onest", system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
}

a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--canvas); }

button {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

input, select {
  font: inherit;
  color: inherit;
}

:focus-visible { outline: 2px solid rgba(45, 108, 73, 0.62); outline-offset: 2px; }

.mono { font-family: var(--mono); }
.muted { color: var(--ink-50); }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

@keyframes norma-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(45, 108, 73, 0.46); }
  70%  { box-shadow: 0 0 0 7px rgba(45, 108, 73, 0); }
  100% { box-shadow: 0 0 0 0 rgba(45, 108, 73, 0); }
}

@keyframes norma-shimmer {
  from { background-position: -400px 0; }
  to   { background-position: 400px 0; }
}

@keyframes norma-spin {
  to { transform: rotate(360deg); }
}

/* Разовая подсветка только что загруженного документа: строка находит себя глазами. */
@keyframes norma-flash {
  0%   { box-shadow: inset 0 0 0 999px rgba(45, 108, 73, 0.12); }
  100% { box-shadow: inset 0 0 0 999px rgba(45, 108, 73, 0); }
}

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

/* Крутящееся кольцо у всего, что «идёт прямо сейчас»: кнопка в момент запроса,
   плашка «На проверке». Статичный текст в этих местах читался как «зависло». */
.spin {
  display: inline-block; width: 10px; height: 10px; flex: none;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: norma-spin 0.9s linear infinite;
  vertical-align: -1px; margin-right: 6px;
}
.btn .spin { margin-right: 0; }

.doc-item--fresh { animation: norma-flash 2.2s ease-out; }

/* ---------- Каркас ---------- */

.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 248px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 28px 16px 20px;
  background: #f7f8f5;
  border-right: 1px solid var(--line);
  position: sticky;
  top: 0;
  height: 100vh;
}

.logo {
  padding: 2px 12px 24px;
  font-size: 19px;
  font-weight: 750;
  letter-spacing: -0.035em;
}
.logo span { color: var(--accent); }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 10px;
  border-left: 2px solid transparent;
  border-radius: 0 var(--r-ctl) var(--r-ctl) 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-55);
  width: 100%;
  text-align: left;
}
.nav-item svg { color: var(--ink-45); flex: none; }
.nav-item:hover { background: var(--wash); }
.nav-item[aria-current="page"] {
  background: rgba(255, 255, 255, 0.72);
  border-left-color: var(--accent);
  color: var(--ink);
  font-weight: 650;
}
.nav-item[aria-current="page"] svg { color: var(--ink); }
.nav-sub { display: flex; flex-direction: column; margin: 2px 0 4px; }
.nav-sub-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 36px; font-size: 13px; color: var(--ink-50);
  border-left: 2px solid transparent; border-radius: 0 var(--r-ctl) var(--r-ctl) 0;
}
.nav-sub-item:hover { background: var(--wash); color: var(--ink); }
.nav-sub-item[aria-current="page"] { color: var(--ink); font-weight: 600; border-left-color: var(--accent); }
.nav-sub-item .n { font-family: var(--mono); font-size: 11px; color: var(--ink-40); }
.nav-sub .nav-sub-item .count--action { background: var(--action); }

.nav-item .count, .nav-sub-item .count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 600;
}

.sidebar-spacer { flex: 1; }

.tg-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.tg-card .title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--accent-deeper);
}
.tg-card .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.tg-card .sub { font-size: 12.5px; color: var(--ink-55); line-height: 1.45; }
.tg-card .sub a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; }
/* Вход по почте без привязанного Telegram: это не «всё в порядке», а состояние, из
   которого стоит выйти — зелёная точка здесь читалась бы как подтверждение. */
.tg-card--off .title { color: var(--ink-60); }
.tg-card--off .dot { background: var(--ink-30); }

.who { display: flex; align-items: center; gap: 10px; padding: 14px 10px 2px; }
.avatar {
  width: 34px; height: 34px; flex: none;
  border-radius: var(--r-sm);
  background: var(--accent-softer);
  color: var(--accent-deep);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
}
.who .name { font-size: 13.5px; font-weight: 600; }
.who .org { font-size: 12px; color: var(--ink-50); }

.main { flex: 1; min-width: 0; padding: 32px 44px 64px; }

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.page-head h1 { margin: 0; font-size: 27px; font-weight: 700; letter-spacing: -0.035em; }
.page-head .tools { display: flex; align-items: center; gap: 8px; }

.bell {
  position: relative;
  width: 42px; height: 42px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-70);
}
.bell .badge {
  position: absolute; top: 10px; right: 11px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
}

.back-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; color: var(--ink-55);
}
.back-link:hover { color: var(--ink); }

/* ---------- Кнопки ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border-radius: var(--r-ctl);
  font-size: 14px;
  font-weight: 600;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.btn--dark { background: var(--ink); color: #fff; font-weight: 600; }
.btn--dark:hover { background: #27302c; }
.btn--ghost { border: 1px solid var(--line); background: var(--surface); }
.btn--ghost:hover { border-color: var(--ink-40); }
.btn--quiet { background: var(--wash); color: var(--ink-70); }
.btn--quiet:hover { background: var(--wash-strong); }
.btn--light { background: #fff; color: var(--ink); }
.btn--sm { height: 38px; padding: 0 16px; font-size: 13px; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---------- Чипы статусов ---------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border-radius: var(--r-sm);
  font-size: 11.5px;
  font-weight: 650;
  white-space: nowrap;
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }

.chip--grey { background: var(--wash); color: var(--ink-65); }
.chip--grey .dot { background: #9ba0a6; }
.chip--clay { background: var(--wash); color: var(--ink-65); }
.chip--clay .dot { background: var(--ink-30); }
.chip--amber {
  background: var(--warning-soft); color: #7d421f;
}
.chip--amber .dot { background: var(--warning); }
.chip--progress, .chip--submitted { background: var(--accent-soft); color: var(--accent-deep); }
.chip--progress .dot, .chip--submitted .dot { background: var(--accent); }
.chip--green { background: var(--accent-soft); color: var(--accent-deeper); }
.chip--green .dot { background: var(--accent); }
.chip--action {
  background: var(--action);
  color: #fff;
  font-weight: 600;
  animation: norma-pulse 2.4s ease-out infinite;
}
.chip--action .dot { background: rgba(255, 255, 255, 0.8); }
/* Результат отдан, решение за клиентом: зелёный пульс — «без вашего хода дальше не
   поедет», но не тревога: тревожный красный остаётся у спора со сроком. */
.chip--ready {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  animation: norma-pulse 2.4s ease-out infinite;
}
.chip--ready .dot { background: rgba(255, 255, 255, 0.85); }

/* ---------- Карточки и сетки ---------- */

.card {
  background: var(--surface);
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  padding: 22px 24px;
}
.card h2 { margin: 0 0 16px; font-size: 16.5px; font-weight: 600; }
.card-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.card-head h2 { margin: 0; }

.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.metric { min-width: 0; padding: 19px 20px 20px; border-right: 1px solid var(--line); }
.metric:last-child { border-right: none; }
.metric .label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-bottom: 12px;
}
.metric .value { display: block; font-size: 28px; font-weight: 650; letter-spacing: -0.035em; }
.metric .row .value { display: inline; }
.metric .value--money { font-family: var(--mono); font-size: 24px; color: var(--accent-deeper); }
.metric .value--date { font-size: 20px; letter-spacing: -0.01em; }
.metric .sub { display: block; font-size: 12.5px; color: var(--ink-50); margin-top: 4px; line-height: 1.4; }
.metric .row { display: flex; align-items: center; gap: 10px; }

/* Графитовая панель — фирменный элемент лендинга, перенесён в кабинет */
/* Приглашение написать: строка с линейкой, не чёрный «композер». Кабинет — контроль,
   вход в разговор — Telegram и диалог; поэтому тут только текст и две кнопки. */
.invite {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px; background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--ink); border-radius: var(--r-card);
}
.invite-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.invite-text strong { font-size: 14px; font-weight: 600; }
.invite-text span { font-size: 12.5px; color: var(--ink-50); }
.invite-actions { display: flex; gap: 8px; flex: none; }


/* Реестр задач: строка та же, что у споров, плюс подпись вида работы. */
.new-dot {
  width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-softer);
}

.task-row .kind {
  display: block; font-size: 10.5px; font-weight: 650; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-50); margin-bottom: 4px;
}
.filter .n { font-family: var(--mono); font-size: 11.5px; opacity: 0.7; margin-left: 4px; }

/* Карточка дела: текст заключения. Шкала легал-дизайна (2026-09-03): основной текст
   16/1.55 и строка не длиннее ~72 знаков — длинный экспертный материал читается, а не
   продирается; заголовки внутри разбора отличимы от текста весом и размером. */
.case-page .msg-body { font-size: 16px; line-height: 1.55; max-width: 72ch; }
.case-page .msg-body p { margin: 0 0 12px; }
.case-page .msg-body p:last-child { margin-bottom: 0; }
.case-page .msg-body h2, .case-page .msg-body h3, .case-page .msg-body h4 {
  font-size: 17px; font-weight: 650; margin: 22px 0 8px; letter-spacing: -0.01em;
}
.case-page .msg-body h2:first-child, .case-page .msg-body h3:first-child, .case-page .msg-body h4:first-child { margin-top: 0; }
.case-page .msg-body ul, .case-page .msg-body ol { margin: 0 0 12px; padding-left: 22px; }
.case-page .msg-body li { margin: 5px 0; }
.case-page .msg-body li::marker { color: var(--ink-45); }
.case-page .msg-body blockquote {
  margin: 12px 0; padding: 8px 14px; border-left: 2px solid var(--line); color: var(--ink-70);
  font-size: 15px;
}
.case-page .msg-body code { font-family: var(--mono); font-size: 14px; }
.task-progress { display: flex; gap: 14px; align-items: flex-start; }
.task-progress .pulse-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; margin-top: 6px;
  animation: norma-pulse 1.6s ease-in-out infinite;
}
.task-progress .t { font-size: 15.5px; font-weight: 600; }
.task-progress .s { font-size: 13.5px; color: var(--ink-55); margin-top: 4px; line-height: 1.5; }
.brief { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-70); white-space: pre-line; }
.task-actions { display: flex; flex-direction: column; gap: 8px; }
.task-actions .btn { justify-content: center; }
.card .hint { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-45); }
.case-col .list-row .when { display: none; }

/* Загрузка документа как форма задачи; отчёт раскрывается под строкой документа. */
.upload-panel { margin-bottom: 16px; }
.upload-grid { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.4fr); gap: 20px; }
.upload-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 6px; padding: 26px 18px; cursor: pointer;
  border: 1px dashed var(--line-strong, var(--line)); border-radius: var(--r-ctl); background: var(--wash);
  transition: border-color 120ms ease, background-color 120ms ease;
}
.upload-drop:hover, .upload-drop[data-drag="over"] { border-color: var(--accent); background: var(--accent-softer); }
.upload-drop-icon { color: var(--ink-40); }
.upload-drop-text { font-size: 14px; font-weight: 600; word-break: break-word; }
.upload-drop-sub { font-size: 12px; color: var(--ink-45); line-height: 1.4; }
.upload-fields { display: flex; flex-direction: column; gap: 8px; }
.field-label { font-size: 12.5px; font-weight: 500; color: var(--ink-50); }
.upload-fields textarea.input {
  width: 100%; resize: vertical; font: inherit; font-size: 14px; line-height: 1.5;
  background: rgba(42, 45, 52, 0.045); border: 1px solid transparent; border-radius: var(--r-ctl);
  padding: 11px 14px;
}
.upload-fields textarea.input:focus { outline: none; border-color: rgba(74, 157, 95, 0.5); background: #fff; }
.upload-fields textarea.input:disabled { opacity: 0.5; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.check input { width: 15px; height: 15px; accent-color: var(--accent-deeper); }
.upload-actions { display: flex; gap: 8px; margin-top: 4px; }

.doc-review {
  margin: -6px 0 10px 46px; padding: 14px 16px 12px;
  border-left: 3px solid var(--accent); background: var(--wash); border-radius: 0 var(--r-ctl) var(--r-ctl) 0;
  font-size: 14px; line-height: 1.6;
}
.doc-review .msg-body p { margin: 0 0 8px; }
.doc-review .msg-body h2, .doc-review .msg-body h3, .doc-review .msg-body h4 { font-size: 14px; font-weight: 650; margin: 12px 0 6px; }
.doc-review .msg-body h2:first-child, .doc-review .msg-body h3:first-child, .doc-review .msg-body h4:first-child { margin-top: 0; }
.doc-review .msg-body ul, .doc-review .msg-body ol { margin: 0 0 8px; padding-left: 20px; }
.doc-review-actions { display: flex; gap: 8px; margin-top: 12px; }
.doc-review .paywall { margin-top: 10px; }

/* Документы: сегмент «мои / от Нормы» и сортировка. */
.docs-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-ctl); overflow: hidden; background: var(--surface); }
.seg-item { padding: 8px 14px; font-size: 13.5px; font-weight: 500; color: var(--ink-55); border-right: 1px solid var(--line); }
.seg-item:last-child { border-right: none; }
.seg-item:hover { background: var(--wash); color: var(--ink); }
.seg-item[aria-current="true"] { background: var(--ink); color: #fff; font-weight: 600; }
.sort { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.sort select {
  font: inherit; font-size: 13.5px; padding: 7px 30px 7px 10px; border: 1px solid var(--line);
  border-radius: var(--r-ctl); background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  -webkit-appearance: none; appearance: none; color: var(--ink);
}

/* Карта бизнеса: зоны риска и панель анкеты. */
.business-actions { display: flex; align-items: center; gap: 12px; margin: 14px 0 16px; flex-wrap: wrap; }
.zone-red { color: var(--action); font-weight: 650; }
.zone-row { padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.zone-row:last-child { border-bottom: none; padding-bottom: 4px; }
.zone-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.zone-title { font-size: 15px; font-weight: 600; flex: 1; min-width: 160px; }
.zone-consequence { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-70); }
.zone-check { margin-top: 8px; }
.zone-check summary { font-size: 12.5px; font-weight: 600; color: var(--accent-deeper); cursor: pointer; }
.zone-check p { margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-55); }
.zone-fine summary { font-size: 14px; font-weight: 600; cursor: pointer; }
.scr-host { margin-bottom: 16px; }
.business-tile .invite-text strong { display: inline-flex; align-items: center; gap: 8px; }
.business-tile .invite-text strong svg { color: var(--accent-deeper); }

/* Заказ документа: витрина типов и анкета. */
.order-panel { margin-bottom: 16px; }
.doc-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.doc-type {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-ctl);
  background: var(--surface); cursor: pointer; transition: border-color 120ms ease, background-color 120ms ease;
}
.doc-type:hover { border-color: var(--accent); background: var(--wash); }
.doc-type[aria-pressed="true"] { border-color: var(--ink); border-left: 3px solid var(--ink); background: var(--wash); }
.doc-type .t { font-size: 14px; font-weight: 600; line-height: 1.3; }
.doc-type .s { font-size: 12px; color: var(--ink-50); }
.order-form { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.order-note { margin: 0 0 14px; font-size: 13px; color: var(--ink-55); }
.order-field { display: block; margin-bottom: 14px; }
.order-field .q { display: block; font-size: 13.5px; font-weight: 550; margin-bottom: 6px; line-height: 1.45; }
.order-field textarea {
  width: 100%; resize: vertical; font: inherit; font-size: 14px; line-height: 1.5;
  background: rgba(42, 45, 52, 0.045); border: 1px solid transparent; border-radius: var(--r-ctl);
  padding: 10px 13px;
}
.order-field textarea:focus { outline: none; border-color: rgba(74, 157, 95, 0.5); background: #fff; }
.order-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.order-actions .muted { font-size: 12.5px; line-height: 1.45; }
.order-actions a { color: var(--accent-deeper); font-weight: 600; }

/* Стена оплаты — одна форма на весь кабинет: что закрыто, почему и куда идти. */
.paywall {
  display: flex; align-items: flex-start; gap: 12px; margin-top: 16px;
  padding: 14px 16px; border: 1px solid var(--line); border-left: 3px solid var(--action);
  border-radius: var(--r-ctl); background: var(--surface);
}
.paywall .paywall-icon { color: var(--action); flex: none; margin-top: 1px; }
.paywall-body { flex: 1; min-width: 0; }
.paywall-body p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.paywall-body .paywall-hint { margin-top: 4px; font-size: 12.5px; color: var(--ink-50); }
.paywall .btn { flex: none; }

/* Пустой кабинет: входы по видам работы вместо одного призыва. */
.ways { display: flex; flex-direction: column; gap: 10px; margin: 22px 0 16px; text-align: left; }
.way {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface);
  transition: border-color 120ms ease, background-color 120ms ease;
}
.way:hover { border-color: var(--accent); background: var(--wash); }
.way-icon {
  flex: none; width: 22px; color: var(--accent-deeper);
  display: inline-flex; align-items: center; justify-content: center;
}
.way-icon svg { width: 18px; height: 18px; }
.way-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.way-body .t { font-size: 15px; font-weight: 600; }
.way-body .s { font-size: 13px; color: var(--ink-55); line-height: 1.45; }
.way-cta {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 600; color: var(--accent-deeper); white-space: nowrap;
}
.onboard-note { font-size: 12.5px; color: var(--ink-45); }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 30px 0 12px;
}
.section-head h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.section-head a { font-size: 14px; font-weight: 500; color: var(--accent-deep); }
.section-head a:hover { color: #2f6b42; }

/* ---------- Лента дел ---------- */

.case-list {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.case-row {
  display: flex; align-items: center; gap: 20px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--hairline);
  width: 100%;
  text-align: left;
  transition: background-color 120ms ease;
}
.case-row:last-child { border-bottom: none; }
.case-row:hover { background: var(--wash); }
.case-row .title { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.case-row .ref {
  display: block; font-family: var(--mono); font-size: 12px;
  color: var(--ink-45); margin-top: 3px;
}
.case-row .grow { flex: 1; min-width: 0; }
.case-row .sum { font-family: var(--mono); font-size: 16px; font-weight: 600; min-width: 110px; text-align: right; }
.case-row .sum--none { min-width: 0; }
.case-row .when { font-size: 13px; color: var(--ink-45); min-width: 64px; text-align: right; }
.case-row .arrow { flex: none; color: var(--ink-30); }
.case-row .row-step { display: block; font-size: 13.5px; color: var(--ink-70); margin-top: 4px; }
.case-row .state { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 150px; }
.case-row .owner { font-size: 12px; color: var(--ink-45); padding-left: 2px; }
.case-row .cta { flex: none; }
.case-row .new-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent, #1f6f43); vertical-align: middle; margin-left: 4px;
}
.section-title { font-size: 15px; font-weight: 650; margin: 28px 0 10px; }
.thread { display: flex; flex-wrap: wrap; gap: 6px 8px; font-size: 13px; color: var(--ink-45); margin: 0 0 14px; }
.thread a { color: var(--ink); font-weight: 600; }
.thread .sep { color: var(--ink-30); }
.thread .next { color: var(--ink-70); }
.doc-ctx { display: block; font-size: 12.5px; color: var(--ink-45); margin-top: 2px; font-weight: 400; }
.doc-ctx a { color: var(--ink-70); }
.matter-bar { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; font-size: 14px; }
.matter-bar strong { font-weight: 650; }
.anchor-nav { display: flex; gap: 8px; margin: 0 0 14px; overflow-x: auto; }
.anchor-nav a {
  flex: none; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink-70); font-size: 13px; white-space: nowrap;
}
.anchor-nav a:hover { color: var(--ink); border-color: var(--ink-30); }
.task-actionbar { display: none; }
.journal .tl-body .who { color: var(--ink-45); font-weight: 500; }
.journal .tl-dot--you { background: var(--ink); }
.journal .tl-dot--external { background: var(--ink-30); }
.journal-form { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.journal-form-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.task-step { font-size: 15px; font-weight: 600; margin: 0 0 12px; }

/* ---------- Карточка дела ---------- */

/* Титульный лист досье: вид работы → название → линейка фактов. Факты — единственное
   место, где цифры крупнее текста: номер, сумма, срок, чей ход. */
.dossier { margin: 12px 0 6px; border-bottom: 1px solid var(--line); }
.dossier-top { padding: 4px 0 14px; }
.dossier-kind {
  font-size: 11.5px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-50); margin-bottom: 8px;
}
.dossier h1 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }
.dossier .titleline { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dossier-facts {
  display: flex; flex-wrap: wrap; margin: 0; padding: 0;
  border-top: 1px solid var(--line);
}
.dossier-facts .fact {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 22px 14px 0; margin-right: 22px;
  border-right: 1px solid var(--line);
}
.dossier-facts .fact:last-child { border-right: none; margin-right: 0; }
.dossier-facts dt {
  font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-50);
}
.dossier-facts dd { margin: 0; font-size: 15px; font-weight: 500; }
.dossier-facts dd .amount { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.tag {
  font-family: var(--mono); font-size: 12.5px;
  background: var(--wash); border-radius: var(--r-sm); padding: 4px 7px;
}

.case-grid {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px;
  align-items: start; margin-top: 20px;
}
.case-col { display: flex; flex-direction: column; gap: 16px; }

.action-card {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--action);
}
.action-card .kicker {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 650; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-40);
}
.action-card h2 { margin: 12px 0 8px; font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.action-card p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-65); max-width: 52ch; }
.action-card .buttons { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

/* Таймлайн */
.timeline { display: flex; flex-direction: column; }
.tl-step { display: grid; grid-template-columns: 44px 22px 1fr; gap: 12px; align-items: start; }
.tl-when {
  display: flex; flex-direction: column; align-items: flex-end; padding-top: 1px;
  font-family: var(--mono); line-height: 1.15;
}
.tl-when .day { font-size: 15px; font-weight: 600; }
.tl-when .mon { font-size: 11px; color: var(--ink-45); text-transform: lowercase; }
.tl-when .pending {
  font-size: 10.5px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-40); font-family: "Onest", system-ui, sans-serif;
}
.tl-mark { display: flex; flex-direction: column; align-items: center; align-self: stretch; }
.tl-dot {
  width: 20px; height: 20px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid transparent; color: #fff;
}
.tl-mark::after {
  content: ""; width: 1px; flex: 1; min-height: 10px; margin: 4px 0;
  background: var(--line-strong, rgba(21, 26, 24, 0.14));
}
.tl-step:last-child .tl-mark::after { display: none; }
.tl-step--done .tl-dot { background: var(--accent); }
.tl-step--active .tl-dot { background: var(--action); }
.tl-step--active.tl-step--pulse .tl-dot { animation: norma-pulse 2.4s ease-out infinite; }
.tl-step--next .tl-dot { background: var(--surface); border-color: rgba(21, 26, 24, 0.18); }
.tl-body { padding-bottom: 18px; min-width: 0; }
.tl-body .t { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
.tl-step--next .tl-body .t { color: var(--ink-45); }
.tl-body .s { font-size: 13.5px; line-height: 1.5; color: var(--ink-65); margin-top: 3px; }

/* Улики */
.progress {
  height: 5px; border-radius: var(--r-sm); background: var(--wash-strong);
  margin: 12px 0 14px; overflow: hidden;
}
.progress span { display: block; height: 100%; background: var(--accent); border-radius: var(--r-sm); }
/* Лимит выбран до конца — не «выполнено», а «дальше стена». Зелёным это врёт. */
.progress--full span { background: #B24234; }

.ev-row { display: flex; align-items: center; gap: 11px; padding: 8px 0; }
.ev-mark {
  width: 22px; height: 22px; flex: none; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft);
}
.ev-mark--todo { background: none; border: 1.5px dashed var(--ink-30); }
.ev-row .name { flex: 1; font-size: 14px; font-weight: 500; min-width: 0; }
.ev-row .note { font-size: 12.5px; font-weight: 500; color: var(--accent-deeper); }
.ev-row .note--todo { color: var(--ink-50); }

/* Документы и дедлайны */
.list-row {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--hairline);
  width: 100%; text-align: left;
}
.list-row:last-child { border-bottom: none; }
.filetype {
  width: 34px; height: 34px; flex: none; border-radius: var(--r-sm);
  background: var(--wash);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--ink-65);
}
/* Длинное имя файла обрезается многоточием, а не выталкивает тег статуса на себя: в
   узкой колонке карточки задачи «Есть замечания» садилось поверх названия. */
.list-row .name {
  flex: 1; font-size: 14.5px; font-weight: 500; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.list-row { flex-wrap: wrap; row-gap: 8px; }
.list-row .when { font-size: 13px; color: var(--ink-45); min-width: 64px; text-align: right; flex: none; }
.list-row .type { font-size: 13px; color: var(--ink-50); min-width: 90px; flex: none; }
/* Переключатель «списком / плитками». Состояние живёт в localStorage: человек выбирает
   вид один раз, и возвращаться к чужому умолчанию на каждом заходе он не должен. */
.viewswitch {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--wash); border-radius: var(--r-ctl);
}
.viewswitch button {
  width: 32px; height: 30px; border-radius: var(--r-sm); border: none; background: none;
  color: var(--ink-45); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background-color 120ms ease, color 120ms ease;
}
.viewswitch button[aria-pressed="true"] { background: var(--surface); color: var(--ink); }

.doc-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.doc-tile {
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px; border-radius: var(--r-card); border: 1px solid var(--line);
  background: var(--surface);
}
.doc-tile-top { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.filetype--lg {
  width: 46px; height: 46px; border-radius: 12px; font-size: 11.5px;
}
.doc-tile-name {
  font-size: 14.5px; font-weight: 500; line-height: 1.35;
  overflow-wrap: anywhere;
}
.doc-tile-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.doc-tile-actions { display: flex; gap: 8px; margin-top: auto; }

.doc-item { position: relative; }

/* Имя файла со значком — отдельная ссылка внутри строки: по ней скачивают, а по стрелке
   рядом открывают отчёт, и две цели в одной строке не должны наезжать друг на друга. */
.doc-main {
  display: flex; align-items: center; gap: 12px;
  flex: 1 1 auto; min-width: 0;
}
.list-row .tag { flex: none; }
/* Статус проверки документа. Три состояния читаются цветом, но не только им: подпись
   в теге говорит то же самое словами — иначе строка каталога ничего не значит в ч/б. */
.tag--pending { background: rgba(196, 149, 41, 0.14); color: #7a5b10; }
.tag--reviewed_ok { background: rgba(46, 125, 74, 0.13); color: #245c38; }
/* «Есть замечания» — нормальный исход проверки, а не поломка: янтарный, как у работы в
   процессе, а не красный. Красным он спорил с зелёным «Готово» на той же карточке, и
   человек читал это как «что-то сломалось», хотя сломаться там нечему. */
.tag--reviewed_issues { background: var(--warning-soft); color: var(--warning); }
.icon-btn {
  width: 36px; height: 36px; flex: none; border-radius: var(--r-ctl);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-55); transition: background-color 120ms ease;
}
.icon-btn:hover { background: var(--wash); }

.dl-date { width: 52px; flex: none; text-align: center; }
.dl-date .day {
  display: block; font-family: var(--mono); font-size: 20px; font-weight: 600; line-height: 1;
}
.dl-date .mon { display: block; font-size: 12px; color: var(--ink-50); margin-top: 3px; }
.dl-sep { width: 1px; align-self: stretch; background: rgba(42, 45, 52, 0.07); flex: none; }

.left-pill {
  display: inline-flex; align-items: center; padding: 5px 13px;
  border-radius: var(--r-sm); font-size: 12px; font-weight: 650; white-space: nowrap;
}
/* Порядок тревожности: чем меньше времени, тем плотнее пятно. Красного по-прежнему нет —
   срочность передаёт контраст, а не цвет. Раньше «остался 1 день» был серее и тише,
   чем «осталось 7 дней». */
.left-pill--far { background: var(--wash); color: var(--ink-55); }
.left-pill--soon { background: var(--warning-soft); color: #7d421f; }
.left-pill--now { background: var(--action); color: #fff; font-weight: 650; }

/* Фильтры */
.filters { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.filter {
  display: inline-flex; align-items: center; padding: 7px 15px;
  border-radius: var(--r-sm); font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-65);
}
.filter[aria-pressed="true"] { background: var(--ink); color: #fff; font-weight: 600; box-shadow: none; }

/* Уведомления */
.notif-row { display: flex; align-items: center; gap: 15px; padding: 15px 0; border-bottom: 1px solid var(--hairline); width: 100%; text-align: left; }
.notif-row:last-child { border-bottom: none; }
.notif-icon {
  width: 40px; height: 40px; flex: none; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-softer); color: var(--accent-deep);
}
.notif-row .t { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; }
.notif-row .unread { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); flex: none; }
.notif-row .s { font-size: 13px; color: var(--ink-50); margin-top: 3px; }

/* Профиль */
.field { margin-bottom: 12px; }
.field .label { font-size: 12.5px; font-weight: 500; color: var(--ink-50); margin-bottom: 6px; }
.field input, .field .ro {
  width: 100%;
  background: rgba(42, 45, 52, 0.045);
  border: 1px solid transparent;
  border-radius: var(--r-ctl);
  padding: 13px 16px;
  font-size: 14.5px;
}
.field input:focus { border-color: rgba(74, 157, 95, 0.5); background: #fff; }
.field .hint { font-size: 12px; color: var(--ink-45); margin-top: 5px; }

.toggle-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; }
.toggle-row .grow { flex: 1; min-width: 0; }
.toggle-row .t { font-size: 14.5px; font-weight: 550; }
.toggle-row .s { font-size: 12.5px; color: var(--ink-50); margin-top: 2px; }
.switch {
  width: 42px; height: 25px; flex: none; border-radius: 12px;
  background: rgba(42, 45, 52, 0.15);
  display: inline-flex; align-items: center; justify-content: flex-start;
  padding: 3px; transition: background-color 140ms ease;
}
.switch span {
  width: 19px; height: 19px; border-radius: 999px; background: #fff;
  box-shadow: 0 1px 4px rgba(42, 45, 52, 0.25);
  transition: transform 140ms ease;
}
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"] span { transform: translateX(17px); }

.safety {
  background: rgba(74, 157, 95, 0.08);
  border-radius: 16px; padding: 16px 18px;
  display: flex; gap: 11px; align-items: flex-start;
}
.safety span { font-size: 13px; line-height: 1.55; color: var(--ink-70); }

/* Пустые состояния и скелетоны */
.empty {
  border: 1.5px dashed rgba(42, 45, 52, 0.22);
  border-radius: var(--r-card);
  padding: 40px 36px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 14px;
  background: rgba(255, 255, 255, 0.5);
}
.empty .icon {
  width: 46px; height: 46px; border-radius: 999px;
  background: rgba(42, 45, 52, 0.05); color: var(--ink-45);
  display: inline-flex; align-items: center; justify-content: center;
}
.empty p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-55); max-width: 34ch; }

.skeleton {
  display: block;
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, rgba(42,45,52,0.05) 25%, rgba(42,45,52,0.09) 37%, rgba(42,45,52,0.05) 63%);
  background-size: 400px 100%;
  animation: norma-shimmer 1.6s linear infinite;
}
.skeleton--card { height: 76px; border-radius: var(--r-card); }

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: var(--ink); color: #fff;
  padding: 13px 20px; border-radius: var(--r-ctl);
  font-size: 14px; box-shadow: 0 10px 30px rgba(42, 45, 52, 0.28);
  z-index: 60;
}

/* Онбординг */
.onboard { max-width: 720px; margin: 40px auto 0; text-align: center; }
.onboard h1 { margin: 0 0 10px; font-size: 32px; font-weight: 600; letter-spacing: -0.025em; }
.onboard > p { margin: 0 0 36px; font-size: 16.5px; line-height: 1.55; color: var(--ink-65); }
.onboard .cta { margin-top: 36px; height: 56px; padding: 0 34px; font-size: 16px; }

/* ---------- Мобильный таб-бар ---------- */

.tabbar { display: none; }

/* --- Роли: владелец и операционщик (план 5) --- */

/* Переключатель кабинетов в меню — только у того, кто работает больше чем в одном. */
.ws { display: flex; flex-direction: column; gap: 5px; padding: 0 2px 12px; }
.ws-label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-40); }
.ws select {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--r-ctl);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: 12.5px;
}

/* Строка подписки на рабочем столе владельца. */
.sub-slab { padding: 14px 18px; }
.sub-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sub-title { font-size: 14px; font-weight: 600; }
.sub-note { font-size: 12.5px; color: var(--ink-55); margin-top: 3px; }

/* Участники кабинета. */
.member-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.member-row:first-of-type { border-top: 0; }
.member-row .t { font-size: 14px; font-weight: 550; display: block; }
.member-row .s { font-size: 12.5px; color: var(--ink-50); margin-top: 2px; display: block; }
.avatar--sm { width: 30px; height: 30px; font-size: 12px; }

.invite-link {
  margin-top: 12px; padding: 14px; border: 1px dashed var(--line);
  border-radius: var(--r-ctl); background: var(--wash);
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.invite-link .t { font-size: 13px; font-weight: 600; }
.invite-link code {
  font-family: var(--mono); font-size: 12px; line-height: 1.5;
  word-break: break-all; color: var(--ink-65);
}
.invite-link .s { font-size: 12.5px; color: var(--ink-55); line-height: 1.5; }

/* --- Карта бизнеса (план 6) --- */

.map-head { padding: 16px 20px; margin-top: 16px; }
.map-head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.map-when { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.tag--stale { background: #F3E3D3; color: #8A4B22; font-family: inherit; font-size: 11.5px; }
.map-counts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.zone-chip {
  font-size: 12.5px; color: var(--ink-55);
  background: var(--wash); border-radius: var(--r-sm); padding: 4px 9px;
}
.zone-chip--red { background: #F6E4DC; color: #8C3B1E; }
.zone-chip--amber { background: #F5EBD6; color: #7C5A1B; }

.zones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.zones--calm { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zone {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.zone-head { display: flex; align-items: center; gap: 8px; }
.zone-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-30, #c7c3bb); flex: none; }
.zone--red .zone-dot { background: #B4552B; }
.zone--amber .zone-dot { background: #C99A3B; }
.zone--clear .zone-dot { background: var(--accent); }
.zone-title { font-size: 14.5px; font-weight: 600; flex: 1; min-width: 0; }
.zone-tone { font-size: 11.5px; color: var(--ink-45); white-space: nowrap; }
.zone-consequence { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-65); }
.zone-check { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-50); }
.zone-check span {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-40); margin-bottom: 3px;
}
.zone-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.zone-work { font-size: 12px; color: var(--ink-45); }
.zones--calm .zone { padding: 13px 15px; }
.zones--calm .zone-consequence, .zones--calm .zone-check { display: none; }

.map-text { margin-top: 16px; }
.onboard--map { max-width: 620px; }

/* Анкета скрининга внутри кабинета: модуль общий с лендингом, палитра — кабинетная. */
#screening-host { max-width: 720px; margin: 0 auto; }
#screening-host .scr-btn {
  background: var(--ink); color: #fff;
  border-radius: var(--r-ctl); border: 0;
}
#screening-host .scr-btn:hover { background: #3a3f49; }
#screening-host .scr-btn-ghost {
  background: transparent; color: var(--ink-65); border: 1px solid var(--line);
}
#screening-host .scr-btn-ghost:hover { background: var(--wash); }
.map-return { margin-top: 18px; }

/* --- Незапущенное: видно, но не нажимается --- */

.is-soon { position: relative; opacity: 0.55; filter: grayscale(1); }
/* Гасим нажатия на всём содержимом, а не только на кнопке: внутри бывают ссылки,
   переключатели и поля, и каждое из них — обещание, которое мы пока не выполняем. */
.is-soon > *, .is-soon * { pointer-events: none; user-select: none; }
.is-soon .btn, .is-soon .switch { cursor: default; }
.soon-tag {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  padding: 2px 7px; border-radius: var(--r-sm);
  background: var(--wash); color: var(--ink-45);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em;
  text-transform: uppercase; white-space: nowrap;
}
.soon-note { margin: 8px 2px 0; font-size: 12px; color: var(--ink-45); line-height: 1.5; }

@media (max-width: 900px) {
  .zones, .zones--calm { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .main { padding: 20px 16px 110px; }
  .page-head h1 { font-size: 21px; }
  .metrics { grid-template-columns: 1fr 1fr; gap: 10px; }
  .metric { border-radius: var(--r-card); padding: 14px 16px; }
  .metric .value { font-size: 22px; }
  .metric .value--money { font-size: 16.5px; }
  .metric .value--date { font-size: 16.5px; }
  .case-grid { grid-template-columns: 1fr; }
    /* Узкий экран: название и сумма в одну строку, статус — во вторую.
     Флексом здесь не обойтись — длинное название сжимает соседей и наезжает на сумму. */
  .case-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 12px;
    align-items: center;
    border-radius: 0;
    padding: 14px 16px;
  }
  .case-row .grow { grid-column: 1; }
  .case-row .sum { grid-column: 2; min-width: 0; font-size: 15px; }
  .case-row .chip { justify-self: start; }
  .case-row .when, .case-row .arrow { display: none; }
  .case-row .state { grid-column: 1; min-width: 0; }
  .case-row .cta { grid-column: 2; justify-self: end; }

  .slab .slab-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .slab .slab-body { padding-left: 16px; }
  .slab .slab-body .hint { font-size: 13.5px; }
  .list-row .type { display: none; }
  /* На узком экране имя файла занимает свою строку, статус и дата уходят под него —
     иначе тег «Есть замечания» садится поверх названия. */
  .list-row { flex-wrap: wrap; row-gap: 8px; column-gap: 10px; }
  .doc-main { flex: 1 1 100%; }
  .list-row .when { margin-left: auto; }
  .card { padding: 18px 20px; border-radius: var(--r-card); }
  .dossier h1 { font-size: 23px; }
  .tl-step { grid-template-columns: 38px 20px 1fr; gap: 10px; }
  .page-head .btn { white-space: nowrap; }
  .page-head .viewswitch { display: none; }
  .page-head .tools { flex: none; }
  .dossier-facts .fact { padding: 10px 14px 12px 0; margin-right: 14px; }
  .dossier-facts dd .amount { font-size: 19px; }
  .invite { flex-direction: column; align-items: stretch; }
  .upload-grid { grid-template-columns: 1fr; }
  .paywall { flex-wrap: wrap; }
  .way-cta span, .way-cta { font-size: 12.5px; }
  .way { gap: 10px; padding: 12px 14px; }
  .docs-toolbar { flex-direction: column; align-items: stretch; }
  .doc-types { grid-template-columns: 1fr; }
  .seg { display: flex; }
  .seg-item { flex: 1; text-align: center; }
  .doc-review { margin-left: 0; }
  .invite-actions .btn { flex: 1; justify-content: center; }
  
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    /* шесть колонок: пять разделов + кнопка нового дела посередине */
    display: grid; grid-template-columns: repeat(6, 1fr); align-items: center;
    height: 82px; padding: 0 4px;
    background: rgba(243, 245, 242, 0.97);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
  }
  .tab {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    color: var(--ink-40); font-size: 10px; font-weight: 500;
    position: relative; white-space: nowrap;
  }
  .tab[aria-current="page"] { color: var(--ink); font-weight: 600; }
  .tab .count {
    position: absolute; top: -3px; right: 22px;
    min-width: 16px; height: 16px; padding: 0 4px;
    background: var(--accent); color: #fff; border-radius: var(--r-sm);
    font-size: 10px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .fab {
    width: 50px; height: 50px; border-radius: var(--r-ctl);
    background: var(--ink); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    transform: translateY(-16px);
    box-shadow: 0 8px 16px rgba(21, 26, 24, 0.16);
    justify-self: center;
  }
}

/* Карточка задачи: рекомендации сверху, разбор — по клику.

   Раньше заключение лежало одной простынёй, и главное (какие правки внести) тонуло
   в середине текста. Теперь «Коротко» и «Рекомендации» — отдельные карточки, а разбор
   открывается только если человек за ним пришёл. Цветной кромки у карточек нет: цвет
   в карточке дела означает только шкалу риска. */
.card-note { font-size: 12.5px; color: var(--ink-50); }
.task-recs .msg-body { margin-top: 4px; }

.card-head--toggle {
  cursor: pointer; list-style: none; align-items: center;
  /* Сворачивание не должно выглядеть как отключённый блок: заголовок остаётся заголовком,
     подсказка справа говорит, что под ним. */
}
.card-head--toggle::-webkit-details-marker { display: none; }
.card-head--toggle::after {
  content: ''; width: 9px; height: 9px; flex: none; margin-left: 2px;
  border-right: 2px solid var(--ink-45); border-bottom: 2px solid var(--ink-45);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform 140ms ease;
}
details[open] > .card-head--toggle::after { transform: rotate(-135deg) translate(-2px, -2px); }
.card-head--toggle .summary-hint { margin-left: auto; }
.task-answer-body { margin-top: 14px; }

.task-closed {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hairline);
}
.task-closed .hint { margin: 0; }

/* ---------- Светофор проверки документа (2026-09-01) ----------
   Красный — только «договор в текущем виде не рабочий»; обычные замечания — янтарные,
   чистая проверка — зелёная. Слова дублируют цвет: строка читается и в ч/б. */
.tag--sev-critical { background: var(--action-soft); color: var(--action); }
.tag--sev-attention { background: var(--warning-soft); color: var(--warning); }
.tag--sev-ok { background: rgba(46, 125, 74, 0.13); color: #245c38; }

/* ---------- Карточка дела: решение первым (2026-09-03) ----------
   Порядок экрана: вид дела и этап → название → вердикт с главным риском → три кнопки →
   линейка ключевых фактов (кто действует, срок, исход проверки) → сетка 8/4: слева
   выжимка, рекомендации, свёрнутый разбор и материалы; справа липкая панель «Дальше».
   Техпаспорт (номер, дата, «что просили») уехал вниз, в «Материалы дела». */
.case-page .dossier--case { margin-top: 10px; }
.case-page .dossier--case .dossier-top { padding-bottom: 18px; }
.dossier-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.dossier-meta .dossier-kind { margin: 0; }
.dossier-meta .dossier-kind .mono { letter-spacing: 0; font-weight: 500; }
.case-page .dossier--case h1 { font-size: 36px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; }
.case-page .card h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; }
.chip--still { animation: none; }

.verdict-block {
  margin: 18px 0 0; padding: 18px 22px; border-radius: var(--r-card);
  max-width: 78ch;
}
.verdict-block--critical { background: var(--action-soft); }
.verdict-block--attention { background: var(--warning-soft); }
.verdict-block--ok { background: rgba(46, 125, 74, 0.12); }
.verdict-block--neutral { background: var(--wash); }
.verdict-label { display: block; margin-bottom: 10px; }
.verdict-label .tag { font-family: inherit; font-size: 12.5px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; }
.verdict-text { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; }
.verdict-block--critical .verdict-text { color: var(--action); }
.verdict-block--attention .verdict-text { color: var(--warning); }
.verdict-block--ok .verdict-text { color: #245c38; }
.verdict-risk { margin: 12px 0 0; font-size: 16px; line-height: 1.55; color: var(--ink-70); }
.verdict-risk b { font-weight: 650; color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* Линейка ключевых фактов: плотные разделители вместо белых карточек. */
.keyfacts {
  display: flex; flex-wrap: wrap; margin: 0; padding: 0; border-top: 1px solid var(--line);
}
.keyfacts .fact {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 22px 14px 0; margin-right: 22px; border-right: 1px solid var(--line);
}
.keyfacts .fact:last-child { border-right: none; margin-right: 0; }
.keyfacts dt { font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-50); }
.keyfacts dd { margin: 0; font-size: 14px; font-weight: 500; display: flex; align-items: center; min-height: 26px; }
.keyfacts dd .mono { font-size: 13.5px; font-weight: 500; }
.keyfacts--meta { border-top: 1px solid var(--hairline); margin-top: 18px; }
.materials-h { margin: 18px 0 6px; font-size: 13px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-50); }
.materials-h:first-child { margin-top: 0; }
.task-materials .brief { font-size: 15px; }

.case-grid--report { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 20px; }
.case-main { min-width: 0; }
@media (min-width: 901px) {
  .case-aside { position: sticky; top: 20px; }
}

/* ---------- Подсказки «?» у заголовков ---------- */
.hint-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-left: 8px; vertical-align: 3px;
  border-radius: 50%; background: var(--wash-strong); color: var(--ink-55);
  font-size: 12px; font-weight: 650; cursor: help; position: relative;
}
.hint-pop {
  display: none; position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%); width: 280px; padding: 10px 13px;
  background: var(--ink); color: #fff; border-radius: var(--r-ctl);
  font-size: 12.5px; font-weight: 400; line-height: 1.5; text-align: left;
  box-shadow: var(--shadow-lift); z-index: 70;
}
.hint-icon:hover .hint-pop, .hint-icon:focus .hint-pop { display: block; }

/* ---------- Тост-ссылка на событие ---------- */
a.toast--link { text-decoration: none; cursor: pointer; }
a.toast--link:hover { background: #000; }

/* ---------- Помощь ---------- */
.help-topic { padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.help-topic:last-child { border-bottom: none; padding-bottom: 0; }
.help-topic .t { font-size: 14.5px; font-weight: 600; margin-bottom: 4px; }
.help-topic .s { font-size: 13.5px; line-height: 1.55; color: var(--ink-65); }

/* Карточка задачи: «Дальше» по этапам, соседние задачи вопроса, переименование. */
.task-next-foot { margin-top: 12px; }
.task-next-foot .task-closed { margin-top: 0; }
.task-progress--you .pulse-dot { background: var(--warning); }
.related-row .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.related-row .kind { font-size: 11.5px; color: var(--ink-65); text-transform: uppercase; letter-spacing: 0.04em; }
.related-row .name { font-weight: 500; }
.dossier .titleline .icon-btn { opacity: 0.55; }
.dossier .titleline .icon-btn:hover { opacity: 1; }

/* Реестр правок (2026-09-03): замечание — строка таблицы, не глава текста. Плотные
   разделители вместо белых карточек; корзина = уровень, строки без цвета. */
.verdict-counts { margin: 12px 0 0; font-size: 14px; font-weight: 500; color: var(--ink-70); }
.remark-card .card-head h2 .count-n { font-size: 15px; font-weight: 500; color: var(--ink-45); margin-left: 4px; }
.remark-table { border-top: 1px solid var(--line); }
.remark { border-bottom: 1px solid var(--hairline); }
.remark-row {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 14px; align-items: start;
  padding: 12px 0; cursor: pointer; list-style: none;
}
.remark-row::-webkit-details-marker { display: none; }
.remark-row:hover .remark-title { text-decoration: underline; text-decoration-color: var(--ink-30); }
.remark-n { font-size: 13px; color: var(--ink-45); padding-top: 2px; }
.remark-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.remark-title { font-size: 16px; font-weight: 650; line-height: 1.35; letter-spacing: -0.01em; }
.remark-fix { font-size: 15px; line-height: 1.5; color: var(--ink-70); }
.remark-where { font-size: 13px; color: var(--ink-55); white-space: nowrap; padding-top: 3px; }
.remark-body { padding: 0 0 14px 42px; }
.remark-fields { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px 16px; margin: 0; }
.remark-fields dt { font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-50); padding-top: 2px; }
.remark-fields dd { margin: 0; font-size: 15px; line-height: 1.5; }
.annex-card .msg-body { font-size: 15px; color: var(--ink-70); }

/* Карточка дела на узком экране: правила стоят после базовых, иначе при равной
   специфичности проигрывают им. Колонки складываются, панель «Дальше» уходит под текст. */
.case-page .titleline h1 { flex: 1 1 0; min-width: 0; }
@media (max-width: 900px) {
  .case-page .dossier--case h1 { font-size: 26px; }
  .verdict-block { padding: 16px 18px; }
  .verdict-text { font-size: 21px; }
  .btn-row .btn { flex: 1 1 auto; justify-content: center; }
  .keyfacts .fact { padding: 10px 14px 12px 0; margin-right: 14px; }
  .case-grid--report { grid-template-columns: 1fr; gap: 16px; }
  .remark-row { grid-template-columns: 24px minmax(0, 1fr); }
  .remark-where { grid-column: 2; padding-top: 0; }
  .remark-body { padding-left: 0; }
  .remark-fields { grid-template-columns: 1fr; gap: 2px; }
  .remark-fields dd { margin-bottom: 8px; }

  /* Постоянное действие по делу над нижней панелью: главная кнопка не должна уезжать
     под текст на телефоне. Высота панели вкладок — 82px, отсюда и отступы. */
  .task-actionbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 82px; z-index: 40;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(243, 245, 242, 0.97);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
  }
  .task-actionbar .bar-step {
    font-size: 13px; line-height: 1.3; color: var(--ink-70); min-width: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .task-actionbar .btn { flex: none; }
  body.has-actionbar .main { padding-bottom: 180px; }
}