/* Дизайн-система платформы: тёмная приборная панель.
   ─────────────────────────────────────────────────────────────────────────────
   Слой ПОВЕРХ cabinet.css. Подключается вторым — переопределяет его токены и
   добавляет кирпичи, которых там нет: кольцо прогресса, полоса Ганта, плитка
   с крупной цифрой, строка расписания, полоса-показатель.

   Откуда взялось: `business/marketing/ДИЗАЙН-СИСТЕМА.md` — разбор девяти
   референсов, которые прислал Евгений 2026-09-01 (панели AQI, Dark Tech,
   Analytics Dashboard, Muzli и другие). Общее у всех: тёмная база слоями, ОДИН
   акцент, крупная тонкая цифра с мелкой подписью, круг как мера, много воздуха,
   волосяные линии. Фирменная пара HD (антрацит + оранжевый) в это попала точно.

   Почему тёмная тема прибита, а не «по настройке телефона», как в cabinet.css:
   решение владельца 2026-09-01 — кабинет и презентации открывают с телефона в
   любое время суток, и премиальность считывается именно с тёмного. Светлым
   остаётся только то, что печатают на бумаге (правило 23 CLAUDE.md).

   Self-contained под 152-ФЗ: ни одного внешнего запроса, шрифт системный. */

:root {
  /* ── слои тёмного: фон < полотно < карточка < карточка-в-фокусе ─────────── */
  --void: #0b0d10;
  --slate: #14171c;
  --panel: #1b1f26;
  --panel-lit: #232830;
  --line-dim: #2a303a;

  --ink-bright: #f4f5f7;
  --ink-soft: #8b939f;
  --ink-faint: #5c646f;

  --amber: #e8622a;      /* фирменный акцент — он же --brand-orange */
  --amber-lit: #ff8a4c;  /* верх градиента в кольцах и полосах */

  /* ── сигнальные: допускаются ТОЛЬКО как состояние, не как украшение ────── */
  --done: #3fb950;
  --risk: #e3a008;
  --stop: #da3633;

  /* ── виды работ: цвет полосы Ганта (ВОЗМОЖНОСТИ-БОТА §4.28) ─────────────
     Наблюдение владельца: на полке одного объекта различать надо не объекты,
     а работы — демонтаж от плитки. Этап не из каталога цвета не получает. */
  --work-none: #8b939f;   /* нет в каталоге — нейтральный, не выдумываем оттенок */
  --work-elec: #e3a008;   /* электрика */
  --work-plumb: #3b82f6;  /* сантехника */
  --work-tile: #a855f7;   /* плитка */
  --work-paint: #3fb950;  /* малярка */

  /* ── переопределяем токены cabinet.css, чтобы существующая разметка
        поехала в тёмное без единой правки шаблонов ───────────────────────── */
  --bg: var(--void);
  --surface: var(--panel);
  --surface-sunken: var(--slate);
  --ink: var(--ink-bright);
  --ink-muted: var(--ink-soft);
  --line: var(--line-dim);

  --tier-critical: var(--stop);
  --tier-critical-soft: #2a1618;
  --tier-high: var(--amber);
  --tier-high-soft: #2c1a12;
  --tier-calm: var(--done);
  --tier-calm-soft: #14231a;

  /* Тень на тёмном читается как грязь. Глубина — слоями фона (§4 системы). */
  --shadow: none;
  --shadow-lift: none;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Цифра-герой. Владелец 01.09: «выделяй цифры крупно, к ним небольшое
     описание — это больше подкупает». Шкала намеренно рваная: очень крупно
     или мелко, ровной середины нет — она и делает макет дешёвым. */
  --num-xl: clamp(38px, 11vw, 64px);
  --num-lg: clamp(28px, 8vw, 42px);
  --num-md: clamp(22px, 6vw, 30px);
}

/* Тёмная всегда. Системная настройка телефона больше не переключает кабинет:
   ниже мы уже отдали тёмные значения, а блок cabinet.css @media dark их только
   повторит — конфликта нет, но и светлой версии не появится. */

body {
  background: var(--void);
  color: var(--ink-bright);
}

/* ═══ ПЛИТКА С КРУПНОЙ ЦИФРОЙ ══════════════════════════════════════════════
   Референсы 2, 3, 5: цифра — герой карточки, подпись под ней мелкая и
   приглушённая. Отношение размеров примерно 1 к 6. */

.stat {
  background: var(--panel);
  border: 1px solid var(--line-dim);
  border-radius: var(--radius);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.stat__num {
  font-size: var(--num-lg);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;  /* цифры не пляшут при обновлении */
  color: var(--ink-bright);
}
/* §20.1: цифра — вход в список, а не украшение. Плашка-ссылка выглядит так же, как обычная,
   но отзывается на курсор: иначе человек не поймёт, что по ней можно нажать, и цифра снова
   станет тупиком. */
a.stat { text-decoration: none; color: inherit; transition: border-color .12s, background .12s; }
a.stat:hover { border-color: var(--amber); background: var(--panel-lit, var(--panel)); }
a.stat:hover .stat__cap { color: var(--ink-bright); }

.stat__num--accent { color: var(--amber); }
.stat__num--risk { color: var(--risk); }
.stat__num--stop { color: var(--stop); }
.stat__cap {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  line-height: 1.35;
}
.stat__delta {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}
.stat__delta--up { color: var(--done); }
.stat__delta--down { color: var(--stop); }

/* Строка показателей поверху экрана (референс 5: Analytics Dashboard).
   На телефоне — две в ряд, на компьютере — сколько влезет, но не уже 150px. */
.kpirow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
@media (min-width: 760px) {
  .kpirow { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* ═══ КОЛЬЦО ПРОГРЕССА ═════════════════════════════════════════════════════
   Референсы 1, 4, 6: круг как мера. Рисуется conic-gradient без единой
   картинки и без SVG — процент задаётся инлайном через --p (0..100).

   Пример разметки:
     <div class="dial" style="--p:78"><span class="dial__num">78</span></div> */

.dial {
  --p: 0;
  --dial-color: var(--amber);
  width: 100%;
  max-width: 132px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  background: conic-gradient(
    var(--dial-color) 0 calc(var(--p) * 1%),
    #22272f calc(var(--p) * 1%) 100%
  );
}
/* Дырка кольца — кружок цвета полотна поверх градиента. */
.dial::before {
  content: "";
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  background: var(--slate);
}
.dial__num {
  position: relative;  /* поверх дырки */
  font-size: var(--num-md);
  font-weight: 200;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.dial__num small { font-size: 0.5em; color: var(--ink-soft); }

.dialbox {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  flex: 0 0 auto; width: 132px;
}
.dialbox__cap {
  font-size: var(--text-xs);
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.3;
  max-width: 16ch;
}

/* ═══ ПОЛОСА ГАНТА ═════════════════════════════════════════════════════════
   Подпись всей системы (§5 ДИЗАЙН-СИСТЕМА.md). Взята не из каталога приёмов,
   а из продукта: этап со сроками ложится в календарь многодневной полосой —
   это и есть Гант, своей графики строить не надо.

   Разметка строки:
     <div class="gantt__row">
       <span class="gantt__name">Плитка</span>
       <span class="gantt__track">
         <span class="gantt__bar" style="--from:44;--to:74;--work:var(--work-tile)"></span>
       </span>
     </div>
   --from/--to — проценты от начала шкалы. Считает сервер, а не браузер:
   отсюда до дат никто не додумывает. */

/* --gantt-name — ширина колонки имён. Одна переменная на строки, шкалу и линию «сегодня»:
   раньше линия считала --at от ширины ВСЕГО графика (вместе с именами) и стояла левее, чем надо —
   1 октября показывала начало августа (поймано на витрине 01.10.2026). */
.gantt {
  --gantt-name: max(120px, 34%);
  position: relative; display: flex; flex-direction: column; gap: var(--space-2);
}
@media (min-width: 760px) { .gantt { --gantt-name: max(180px, 26%); } }
.gantt__row {
  display: grid;
  grid-template-columns: var(--gantt-name) 1fr;
  align-items: center;
  gap: var(--space-3);
}
/* §18.2 требований 26.09: «названия этапов должны помещаться целиком; это касается ВСЕХ меню
   и всех названий — ничего не режем». Было `white-space: nowrap` + многоточие, и график
   показывал «подписание догово…», «подготовительны.», «электромонтаж.» — то есть человек не
   мог прочитать, про какой этап полоса. Теперь длинное имя переносится на вторую строку, а не
   обрезается; колонка имён шире. Потолок в две строки оставлен намеренно: иначе одно имя из
   десяти растянет строку графика и полосы разъедутся по высоте. */
.gantt__name {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  line-height: 1.2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow-wrap: anywhere;
}
.gantt__track {
  position: relative;
  height: 14px;
  background: #0f1216;
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.gantt__bar {
  --from: 0;
  --to: 100;
  --work: var(--work-none);
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--from) * 1%);
  width: calc((var(--to) - var(--from)) * 1%);
  background: var(--work);
  border-radius: var(--radius-pill);
  opacity: 0.92;
}
/* Закрытый этап гаснет, но не исчезает: история объекта видна целиком. */
.gantt__bar--done { opacity: 0.4; }
/* Этап, который двигает сроки (§4.26) — обводка сигнальным, а не заливка:
   заливка сигнальным цветом читалась бы как «вид работ». */
.gantt__bar--risk { box-shadow: inset 0 0 0 2px var(--risk); }

/* Полоса — вход внутрь этапа. Подчёркивание убрано (подчёркнутая строка рядом с графиком
   читается как ошибка вёрстки), но нажимаемость видна: имя этапа светлеет под курсором. */
a.gantt__row { text-decoration: none; }
a.gantt__row:hover .gantt__name { color: var(--ink-bright); }

.gantt__today {
  --at: 50;
  position: absolute;
  top: 0;
  bottom: 18px;
  /* Отсчёт от начала ДОРОЖКИ, а не графика: колонка имён + зазор + доля оставшейся ширины. */
  left: calc(var(--gantt-name) + var(--space-3) + (100% - var(--gantt-name) - var(--space-3)) * var(--at) / 100);
  width: 1px;
  background: var(--amber);
  opacity: 0.75;
  pointer-events: none;
}
.gantt__today::after {
  content: "сегодня";
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: calc(10px * var(--ui-scale));
  letter-spacing: 0.05em;
  color: var(--amber);
  white-space: nowrap;
}
.gantt__scale {
  /* колонка имён у шкалы обязана совпадать с .gantt__row, иначе месяцы сдвинуты вбок */
  display: grid;
  grid-template-columns: var(--gantt-name) 1fr;
  gap: var(--space-3);
  margin-top: var(--space-1);
}
.gantt__months {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: calc(10px * var(--ui-scale));
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}

/* ═══ ПОЛОСА-ПОКАЗАТЕЛЬ ════════════════════════════════════════════════════
   Референс 1 (вход/выход по станциям): подпись, значение и полоса заполнения
   в одной строке. Годится под «сделано N из M», «оплачено из суммы договора». */

.meter { display: flex; flex-direction: column; gap: 6px; }
.meter__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--text-sm);
}
.meter__label { color: var(--ink-soft); }
.meter__value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-bright);
}
.meter__track {
  height: 6px;
  background: #0f1216;
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.meter__fill {
  --p: 0;
  display: block;   /* строчному <span> высота в процентах не применяется */
  height: 100%;
  width: calc(var(--p) * 1%);
  background: linear-gradient(90deg, var(--amber), var(--amber-lit));
  border-radius: var(--radius-pill);
}
.meter__fill--calm { background: var(--done); }
.meter__fill--risk { background: var(--risk); }

/* ═══ СТРОКА РАСПИСАНИЯ ════════════════════════════════════════════════════
   «Вечером бот расставляет завтрашний день по часам» (§4.38). Дело с часом —
   с акцентной полоской слева; дело без часа — с приглушённой: час, которого
   нет, не изображаем, иначе человек приедет не вовремя и будет прав. */

.slot {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-3);
  background: var(--panel);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--amber);
}
.slot + .slot { margin-top: var(--space-2); }
.slot--notime { border-left-color: var(--line-dim); }
.slot--notime .slot__time { color: var(--ink-faint); }
.slot__time {
  font-family: var(--mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--amber);
  flex: 0 0 auto;
}
.slot__what { font-size: var(--text-md); line-height: 1.3; }
.slot__who { display: block; font-size: var(--text-xs); color: var(--ink-soft); margin-top: 2px; }

/* ═══ МЕЛОЧИ ═══════════════════════════════════════════════════════════════ */

/* Надзаголовок раздела: моноширинный, разрядка, приглушённый. */
.eyebrow {
  font-family: var(--mono);
  font-size: calc(11px * var(--ui-scale));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Точка-состояние вместо эмодзи: эмодзи как украшение системой запрещены. */
.dot {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  border-radius: 50%;
  background: var(--ink-faint);
  margin-right: 0.6em;
}
.dot--done { background: var(--done); }
.dot--risk { background: var(--risk); }
.dot--stop { background: var(--stop); }

/* Пилюля статуса. Единственное место, где скругление доведено до круглого. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-dim);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  white-space: nowrap;
}
.pill--done { color: var(--done); border-color: #1e3a24; }
.pill--risk { color: var(--risk); border-color: #3a3016; }
.pill--stop { color: var(--stop); border-color: #3a1c1e; }

/* Панель-карточка для произвольного содержимого. */
.tile {
  background: var(--panel);
  border: 1px solid var(--line-dim);
  border-radius: var(--radius);
  padding: var(--space-4);
}
.tile__head {
  font-family: var(--mono);
  font-size: calc(11px * var(--ui-scale));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--space-3);
}

/* Сетка панели: телефон — одна колонка, компьютер — две неравные (referens 5,
   где слева крупный график, справа узкая колонка показателей). */
.grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .grid--2 { grid-template-columns: 1fr 1fr; }
  .grid--wide-left { grid-template-columns: 2fr 1fr; }
  .grid--wide-right { grid-template-columns: 1fr 2fr; }
}

/* Верхний переключатель разделов (.secnav) удалён 27.09: он дословно повторял боковое меню
   и при этом расходился с ним — «Хронология» была только сверху (§19 требований 26.09).
   Разделы объекта теперь существуют в одном месте — боковая панель `_frame.html`. */


/* Мелкая типографика панели. */
.muted { color: var(--ink-soft); font-size: var(--text-sm); }
.empty {
  color: var(--ink-soft);
  padding: var(--space-4);
  border: 1px dashed var(--line-dim);
  border-radius: var(--radius);
}
.plainlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.plainlist li { font-size: var(--text-sm); }

/* ── Главный экран: строка «ждут вашего решения» и карточка объекта ───────
   Карточка отвечает на три вопроса одним взглядом: насколько объект пройден
   (кольцо), что идёт прямо сейчас (строка под названием) и что горит (пилюли).
   Больше в карточку не кладём — она вход в объект, а не его пересказ. */
.needline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  color: var(--ink-bright);
  text-decoration: none;
}
.needline:hover .needline__what { color: var(--amber-lit); }
.needline__what { font-size: var(--text-sm); }
.needline__where { color: var(--ink-faint); font-size: var(--text-xs); }

.cards { display: grid; gap: var(--space-3); grid-template-columns: 1fr; margin-bottom: var(--space-4); }
@media (min-width: 760px) { .cards { grid-template-columns: 1fr 1fr; } }

.ocard {
  display: block;
  background: var(--panel);
  border: 1px solid var(--line-dim);
  border-radius: var(--radius);
  padding: var(--space-4);
  text-decoration: none;
  color: var(--ink-bright);
}
.ocard:hover { border-color: var(--amber); }
.ocard__top { display: flex; align-items: center; gap: var(--space-4); }
.ocard__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ocard__title { font-size: var(--text-md); font-weight: 600; }
.ocard__now { color: var(--ink-soft); font-size: var(--text-xs); }
.ocard__pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); }
/* Кольцо в карточке мельче, чем на панели: здесь оно подпись, а не главный герой. */
.ocard .dial { width: 74px; max-width: 74px; flex: 0 0 auto; }
/* Кольцо в плитке объекта идёт с подписью «N из M этапов» (§20.2), поэтому колонка под него
   считается по кольцу, а не по общей ширине .dialbox — иначе плитка разъезжается. */
.ocard .dialbox { width: auto; gap: 6px; }
.ocard .dialbox__cap { font-size: var(--text-xs); color: var(--ink-soft); text-align: center; white-space: nowrap; }
.ocard .dial__num { font-size: calc(18px * var(--ui-scale)); }

/* Строка своего дня. Сделанное гаснет, но остаётся на месте: вычеркнутая строка —
   это отчёт о дне, а исчезнувшая заставляет вспоминать, что там было. */
.dayline { display: flex; align-items: baseline; gap: 8px; }
.dayline--done { color: var(--ink-faint); text-decoration: line-through; }
.dayline--cancelled { color: var(--ink-faint); }

/* ── ПРОСТРАНСТВО ОБЪЕКТА: паспорт, снимки ────────────────────────────────
   Паспорт — это пары «поле → значение», и читают их сверху вниз, а не по
   диагонали: поэтому колонка ключей узкая и приглушённая, а на телефоне пара
   разворачивается в две строки, лишь бы значение не переносилось по буквам.

   Снимки — единственное место кабинета, где картинка занимает место сама по
   себе. Кадры кадрируются под квадрат намеренно: ряд разновысоких фотографий
   с объекта читается как свалка, а ровная сетка — как альбом. */
.facts { display: grid; gap: 10px; }
.facts__row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-3);
  font-size: var(--text-sm);
}
.facts__key { color: var(--ink-faint); }
.facts__val { color: var(--ink-bright); }
@media (max-width: 520px) {
  .facts__row { grid-template-columns: 1fr; gap: 2px; }
}

.shots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-2);
}
.shots__a {
  display: block;
  border: 1px solid var(--line-dim);
  border-radius: var(--radius);
  overflow: hidden;
}
.shots__a:hover { border-color: var(--amber); }
.shots__img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
  background: #0f1216;
}

/* ── ФОРМЫ: вход, логин и пароль ──────────────────────────────────────────
   Полей у нас мало и они простые, поэтому своего слоя форм в системе не было.
   Заводим минимум: подпись сверху, поле во всю ширину, кнопка. Крупные поля
   намеренно: кабинет открывают с телефона одной рукой, стоя на объекте. */
.field { display: block; margin: 0 0 var(--space-3); text-align: left; }
.field__cap {
  display: block;
  margin-bottom: 6px;
  font-size: var(--text-xs);
  color: var(--ink-soft);
}
.field__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px var(--space-3);
  font: inherit;
  /* 16px — ЖЁСТКИЙ НИЗ, а не размер по вкусу: поле мельче 16px заставляет iOS при фокусе
     увеличить всю страницу, и человек теряет из виду то, что заполнял. Масштаб только
     поднимает, поэтому max() держит низ даже если --ui-scale поставят меньше единицы. */
  font-size: max(16px, calc(16px * var(--ui-scale)));
  color: var(--ink-bright);
  background: #0f1216;
  border: 1px solid var(--line-dim);
  border-radius: var(--radius);
}
.field__input:focus { outline: none; border-color: var(--amber); }

.btn {
  display: inline-block;
  padding: 12px var(--space-4);
  font: inherit;
  font-size: var(--text-md);
  color: #14161a;
  background: var(--amber);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}
.btn:hover { background: var(--amber-lit); }

/* Ошибка формы и подтверждение. Ошибка — не красная простыня во весь экран, а строка возле
   полей: человек ошибся в пароле, а не сломал систему. */
.formerr {
  margin: 0 0 var(--space-3);
  padding: 10px var(--space-3);
  font-size: var(--text-sm);
  color: var(--stop);
  border: 1px solid #3a1c1e;
  border-radius: var(--radius);
  text-align: left;
}
.formok {
  margin: 0 0 var(--space-3);
  padding: 10px var(--space-3);
  font-size: var(--text-sm);
  color: var(--done);
  border: 1px solid #1e3a24;
  border-radius: var(--radius);
  text-align: left;
}

/* Отключённая анимация уважается: кольца и полосы не «доезжают» рывками у
   людей, которым от движения плохо. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}