/* Широкий слой платформы: рабочее место, а не лента.
   ─────────────────────────────────────────────────────────────────────────────
   Третий слой CSS, подключается ПОСЛЕ cabinet.css и platform.css.

   ЗАЧЕМ. Кабинет собирался под телефон заказчика: одна колонка 760 px, списки,
   читать сверху вниз. На компьютере это полоса посреди пустого экрана — Евгений
   23.09 сказал прямо: «по сравнению с презентацией слабенькое». Презентация
   (ПРЕЗЕНТАЦИЯ-КОРОТКАЯ.html) ему нравится, и она задаёт планку: широкая тёмная
   приборная панель, крупная тонкая цифра, один акцент, волосяные линии.

   ЧТО ДОБАВЛЯЕТ (кирпичей из platform.css для рабочего места не хватало):
     · .app / .rail / .appbar — каркас платформы: боковые разделы + широкая шапка;
     · .wide, .cols — сетка во всю ширину вместо колонки 760 px;
     · .hero — цифра-герой презентации (шкала рваная: очень крупно или мелко);
     · .cal — календарь месяцем: этап лежит многодневной полосой через дни;
     · .act / .rowacts — кнопки действия РЯДОМ с данными («править», «добавить»)
       с подсказкой «что будет, если нажать» — требование владельца 16.09
       про «умный сайт»;
     · .shot — плитка фотографии.

   ПРАВИЛА СЛОЯ. Токены не переопределяем заново: цвета, радиусы и отступы берём
   из platform.css. Ни одного внешнего запроса (152-ФЗ): шрифты — либо системные,
   либо файлом из этой же папки. Сигнальный цвет — только состояние, не украшение.

   Система: business/marketing/ДИЗАЙН-СИСТЕМА.md */

/* ═══ ШРИФТ ЗАГОЛОВКОВ И ЦИФР ══════════════════════════════════════════════
   Половина «дешевизны» экрана — не композиция, а шрифт: системный San Francisco
   на цифрах читается как интерфейс телефона, а не как приборная панель. В
   презентации стоит Unbounded, и владелец принял именно её.

   ⚠️ На компьютере владельца Unbounded установлен, на телефоне заказчика — нет.
   До выката в бой шрифт кладётся файлом сюда же (woff2, подмножество кириллицы)
   и прописывается через @font-face с локальным src. Пока — local() плюс честный
   откат на системный: экран не ломается, просто выглядит строже. */
:root {
  --display: "Unbounded", "Golos Text", -apple-system, BlinkMacSystemFont, sans-serif;
  --dls: -0.03em;                 /* тесная посадка заголовков, как в презентации */
  --rail-w: 224px;
  --rail2-w: 240px;   /* вторая колонка меню — разделы выбранного объекта */
  --wide: 1440px;
}

/* ═══ КАРКАС РАБОЧЕГО МЕСТА ════════════════════════════════════════════════ */

body.platform {
  /* Оранжевое свечение в правом верхнем углу — приём презентации: тёмное полотно
     перестаёт быть плоским, и взгляд сам идёт в верх экрана, где показатели. */
  background:
    radial-gradient(60% 55% at 92% -6%, rgba(232, 98, 42, 0.13) 0%, rgba(232, 98, 42, 0) 62%),
    var(--void);
  background-attachment: fixed;
}

.app {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  min-height: 100vh;
}
/* СДВОЕННОЕ МЕНЮ (требование владельца 27.09): выбрал объект — рядом с первой колонкой
   образуется вторая, с разделами этого объекта. Первая никуда не девается: она и есть способ
   перейти на соседний объект, не возвращаясь никуда. Так устроено меню в приложении 101,
   на которое владелец и ссылался. */
.app--two { grid-template-columns: var(--rail-w) var(--rail2-w) minmax(0, 1fr); }
@media (max-width: 1240px) {
  /* Три колонки требуют ширины. Когда её нет, вторая панель ныряет под первую — порядок
     «объекты → разделы → работа» сохраняется, меняется только направление. */
  .app--two { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  .rail2 { grid-column: 1; grid-row: 2; }
}
@media (max-width: 1000px) {
  .app--two { grid-template-columns: minmax(0, 1fr); }
  .rail2 { grid-column: 1; grid-row: auto; }
}

/* Вторая колонка: та же панель, но уже и с подписью «Объект» над названием. */
.rail2 {
  border-right: 1px solid var(--line-dim);
  background: rgba(255, 255, 255, 0.015);
}
.rail2__where { display: flex; flex-direction: column; gap: 2px; }
.rail2__object {
  margin: 0;
  padding: 0 var(--space-2);
  font-family: var(--display);
  /* 14px, а не 15: на «336 | ЖК Екатерининский парк» слово не влезало в колонку и рвалось
     посередине — «Екатерининск / ий парк». §18.2 запрещает резать названия, а рваное слово
     читается ещё хуже обрезанного. Поймано глазами 27.09. */
  font-size: calc(14px * var(--ui-scale));
  font-weight: 600;
  letter-spacing: var(--dls);
  color: var(--ink-bright);
  line-height: 1.25;
  overflow-wrap: break-word;
}
@media (max-width: 1000px) {
  .app { grid-template-columns: minmax(0, 1fr); }
}

/* ── боковые разделы ─────────────────────────────────────────────────────── */

.rail {
  border-right: 1px solid var(--line-dim);
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
}
@media (max-width: 1000px) {
  /* На телефоне панель остаётся СТОЛБИКОМ над рабочей областью, а не уезжает в
     горизонтальную ленту, как было до 27.09. Причина в том, что меню стало деревом:
     в строку влезал только первый уровень, а второй (объекты, разделы объекта,
     отделы) при раскрытии разрывал ленту пополам. Компактность держим иначе —
     свёрнутыми <details>: внутри объекта список объектов свёрнут, на общих экранах
     свёрнуты его разделы, так что до контента остаётся несколько строк. */
  .rail {
    position: static; height: auto; border-right: 0;
    border-bottom: 1px solid var(--line-dim);
    gap: var(--space-3);
    padding: var(--space-3);
  }
  /* Длинный список объектов не должен отодвигать работу за нижний край экрана:
     раскрытая группа листается внутри себя. */
  .rail__objs { max-height: 45vh; overflow-y: auto; }
  .rail__foot { display: none; }
}

.rail__brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--display);
  font-size: calc(17px * var(--ui-scale)); font-weight: 600; letter-spacing: var(--dls);
  color: var(--ink-bright); text-decoration: none;
  padding: 0 var(--space-2);
}
/* Название объекта длиннее названия компании — переносим, а не режем (§18.2). На узком экране,
   где панель становится строкой, наоборот держим в одну строку, иначе лента разделов прыгает. */
.rail__brandname { min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
@media (max-width: 1000px) {
  /* Обрезание по 42vw осталось от горизонтальной ленты разделов: в строке длинное имя
     объекта ломало ленту. Панель стала вертикальной (27.09) — резать больше нечего и
     незачем, «Название компа…» просто теряет смысл. */
  .rail__brandname { overflow-wrap: break-word; }
}
.rail__mark { width: 6px; height: 22px; border-radius: 99px; background: var(--amber); flex: none; }

.rail__cap {
  font-family: var(--mono);
  font-size: calc(10px * var(--ui-scale)); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0 var(--space-2) 6px;
}
.rail__group { display: flex; flex-direction: column; gap: 2px; }

.rail__item {
  /* `flex-start`, а не `center`: подпись пункта переносится на две строки (§18.2 — ничего не
     режем), и при центрировании значок с маркером «плавали» бы посередине, из-за чего строка
     читалась бы как две разные. */
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  text-decoration: none;
  font-size: var(--text-md);
  /* Раньше здесь стоял `nowrap`, и «Ждёт подтверждения» обрезалось многоточием в панели
     шириной 224 px — поймано глазами 27.09 на живом экране. §18.2 требований 26.09 прямо
     запрещает резать названия: «это касается всех меню и всех названий — ничего не режем».
     Переносим по словам; маркер раскрытия при этом держим у верхней строки. */
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.25;
  border: 1px solid transparent;
}
.rail__item:hover { color: var(--ink-bright); background: rgba(255, 255, 255, 0.04); }
.rail__item--on {
  color: var(--ink-bright);
  background: rgba(232, 98, 42, 0.12);
  border-color: rgba(232, 98, 42, 0.32);
}
.rail__ico { width: 18px; text-align: center; opacity: 0.9; flex: none; }
.rail__item > .rail__ico { line-height: 1.25; }
/* Число справа — сколько там ждёт человека. Ноль не рисуем: пустой счётчик
   приучает не смотреть на счётчики вообще. */
.rail__n {
  margin-left: auto;
  font-family: var(--mono); font-size: calc(11px * var(--ui-scale));
  color: var(--ink-faint);
  /* Счётчик не переносится и не сжимается. Поймано глазами 27.09: когда подпись пункта стала
     переносимой, «16» зажало между текстом и маркером раскрытия — и число встало столбиком
     «1 / 6». Число, читаемое как два числа, хуже отсутствующего числа. */
  white-space: nowrap;
  flex: none;
}
.rail__n--hot { color: var(--amber); }
.rail__foot { margin-top: auto; font-size: var(--text-xs); color: var(--ink-faint); padding: 0 var(--space-2); }

/* ── ТРЁХУРОВНЕВОЕ МЕНЮ (§4.2, §16, §28 требований 26.09) ─────────────────────
   Первый уровень статичен, второй лежит внутри своего пункта и раскрывается им,
   третий — сам экран. Раскрытие держит <details>: «тап разворачивает, повторный
   сворачивает» браузер умеет сам, и кабинет остаётся рабочим без JS.

   Отступ = глубина. Других сигналов иерархии не добавляем: рамки и фоны на трёх
   уровнях превращают панель в лестницу из коробок. */
.rail__nav { display: flex; flex-direction: column; gap: 2px; }

.rail__fold > summary {
  cursor: pointer;
  list-style: none;            /* свой маркер вместо треугольника браузера */
}
.rail__fold > summary::-webkit-details-marker { display: none; }
/* Маркер «свёрнуто / раскрыто» — справа, чтобы не съедать место у значка раздела. */
.rail__fold > summary::after {
  content: "›";
  margin-left: auto;
  opacity: 0.5;
  transition: transform 0.15s ease;
}
.rail__fold[open] > summary::after { transform: rotate(90deg); }
/* Число рядом с маркером: у пункта со счётчиком «auto» уже занят числом. */
.rail__fold > summary .rail__n { margin-left: auto; }
.rail__fold > summary .rail__n + * { margin-left: 8px; }

/* Второй уровень — группы объектов. Подпись группы сама себе кнопка раскрытия. */
.rail__sub { margin: 2px 0 2px var(--space-3); }
.rail__subcap {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: calc(10px * var(--ui-scale));
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint);
  padding: 4px var(--space-2);
}
.rail__subcap::-webkit-details-marker { display: none; }
.rail__sub[open] > .rail__subcap { color: var(--ink-soft); }

/* Объект в списке. Нажимается ВСЯ подложка, а не текст (§5) — поэтому display:block
   и padding на самой ссылке. Длинное название переносим, а не режем (§18.2). */
.rail__obj {
  display: block;
  padding: 7px var(--space-2) 7px var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  text-decoration: none;
  font-size: var(--text-sm);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.rail__obj:hover { color: var(--ink-bright); background: rgba(255, 255, 255, 0.04); }
/* Объект, в котором человек стоит: «вы здесь». Намеренно НЕ ссылка — ссылка туда, где ты уже
   стоишь, сбивает, а вторая ссылка на тот же раздел ещё и ломает канон §19. */
.rail__obj--on {
  color: var(--ink-bright);
  font-weight: 600;
  background: rgba(232, 98, 42, 0.10);
  border-left: 2px solid var(--amber);
}

/* Блок разделов выбранного объекта. Его заголовок — название объекта, и оно
   выделено (§4.5: «сейчас мелко и непонятно, на каком ты объекте»). Название
   переносим целиком: у объектов имена вида «Укладка керамогранита, ЖК …» (§18.2). */
.rail__fold--object { margin-top: var(--space-2); }
.rail__item--object {
  font-family: var(--display);
  font-size: calc(14px * var(--ui-scale));
  font-weight: 600;
  letter-spacing: var(--dls);
  color: var(--ink-bright);
  white-space: normal;
  overflow-wrap: break-word;
  align-items: flex-start;
}
.rail__item--object .rail__ico { color: var(--amber); }

/* Разделы выбранного объекта — глубже объекта на один отступ. */
.rail__sections { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px var(--space-3); }
.rail__item--deep {
  margin-left: var(--space-3);
  font-size: var(--text-sm);
  white-space: normal;         /* §18.2: ничего не режем */
}
.rail__sections .rail__item--deep { margin-left: 0; }

.rail__empty {
  font-size: var(--text-xs); color: var(--ink-faint);
  padding: 4px var(--space-3);
}

/* Плитка-кнопка: вся подложка нажимается (§5). Нужна отделам — плитка ведёт внутрь. */
/* Текст, в котором переносы строк значимы: пошаговые инструкции в вопросах владельцу.
   Склеенный в абзац список шагов перестаёт быть инструкцией. */
.muted--lines { white-space: pre-line; }

a.tile--act { display: block; text-decoration: none; color: inherit; }
a.tile--act:hover { border-color: rgba(232, 98, 42, 0.32); background: rgba(255, 255, 255, 0.02); }


/* ── широкая шапка ───────────────────────────────────────────────────────── */

.appbar {
  position: sticky; top: 0; z-index: 40;
  /* Шапка переносит правую группу, когда места не хватает. Без этого «где я» сминалось в
     «Мои об…» ровно там, где появлялась кнопка «Задать постоянный пароль» (видно у заказчика,
     27.09): самое важное на экране — название объекта и раздела — проигрывало служебной
     кнопке. Переносим целой группой, а не режем заголовок (§18.2). */
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-3) var(--space-5);
  background: rgba(11, 13, 16, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-dim);
}
/* Объект — сверху и крупно, раздел — подписью ПОД ним. Ровно так это и описано в §4.4–4.5
   («в шапке первым и самым крупным идёт объект, название раздела — подписью под ним»), а в
   строку они стояли по недосмотру. Строка ещё и ломалась: во flex-ряду при нехватке места
   «Все объекты» сжималось до ширины одной буквы и рассыпалось столбиком по вертикали —
   поймано глазами 27.09 в кабинете дизайнера. В колонке этого не может быть по устройству. */
.appbar__where {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-width: 0; flex: 1 1 320px;
}
/* §4.4–4.5: объект — самое крупное в шапке, раздел — подписью рядом. Раньше тут стояла одна
   строка `page_title`, и «где я» приходилось выводить из содержимого страницы. */
.appbar__object {
  font-family: var(--display);
  font-size: calc(19px * var(--ui-scale));
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--ink-bright);
  min-width: 0;
  overflow-wrap: break-word;
}
.appbar__object--all { color: var(--ink-soft); font-weight: 600; }

.appbar__title {
  font-family: var(--display);
  /* Подпись раздела мельче объекта: они теперь друг под другом, и одинаковый кегль читался бы
     как два заголовка. Разница в размере и есть ответ на вопрос «что здесь главное». */
  font-size: calc(15px * var(--ui-scale)); font-weight: 500; letter-spacing: var(--dls);
  color: var(--ink-soft);
  /* Многоточие убрано намеренно: §18.2 — «это касается всех меню и всех названий, ничего
     не режем». Раздел называется полностью, даже если строка станет из двух. */
  margin: 0; white-space: normal; overflow-wrap: break-word;
}
.appbar__sub { font-size: var(--text-sm); color: var(--ink-soft); white-space: nowrap; }
.appbar__right { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); flex: 0 0 auto; }
.appbar__who { font-size: var(--text-sm); color: var(--ink-soft); white-space: nowrap; }

.wide { max-width: var(--wide); margin: 0 auto; padding: var(--space-5); }
/* Воздух на компьютере (требование владельца 23.09). На телефоне отступы остаются
   прежними: там воздух — это съеденный экран, а не ощущение дорогого продукта. */
@media (min-width: 1100px) { .wide { padding: 36px 40px 64px; } }
@media (max-width: 700px) { .wide { padding: var(--space-4) var(--space-3); } }
/* Воздух между блоками экрана — одно правило на всех, а не margin у каждого блока.
   Было: у плиток отступ снизу 16px, у полосы цифр и сетки объектов — ноль, и блоки липли
   («Молчат» вплотную к деньгам, фильтр вплотную к «Спокойным» — замечание владельца 01.10).
   Отступы блочной раскладки схлопываются, поэтому старые margin-bottom не складываются с этим. */
.wide > * + *,
.wide #feed > * + * { margin-top: var(--space-5); }

/* §18.1 требований 26.09: график этапов «открывается на всю страницу — сейчас тесно».
   Потолок 1440px хорош для чтения текста, но графику он вредит: чем уже полотно, тем короче
   полосы и тем сильнее жмутся месяцы. Страница плана снимает потолок и работает по всей
   ширине окна; остальные разделы остаются в колонке для чтения. */
.wide--full { max-width: none; }

/* Сетка «главное слева, срочное справа». Правая колонка не уже 320 — в ней живут
   строки с кнопками, а кнопка в узкой колонке переносится и выглядит поломкой. */
.cols { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 1100px) {
  .cols { grid-template-columns: minmax(0, 1.65fr) minmax(340px, 1fr); gap: 26px; }
}

.stack-v { display: flex; flex-direction: column; gap: var(--space-4); }
@media (min-width: 1100px) { .stack-v { gap: 26px; } }

/* ═══ ЗАГОЛОВКИ И ЦИФРА-ГЕРОЙ ══════════════════════════════════════════════
   Приём презентации: отношение цифры к подписи держим в коридоре 6–10 раз.
   Ровной середины нет намеренно — она и делает макет дешёвым. */

.eyebrow {
  font-family: var(--mono);
  font-size: calc(10px * var(--ui-scale)); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 10px;
}
.h-sec {
  font-family: var(--display);
  font-size: calc(15px * var(--ui-scale)); font-weight: 600; letter-spacing: -0.02em;
  margin: 0;
}

.hero {
  position: relative;
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: var(--space-5) var(--space-5) 22px;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
a.hero:hover { border-color: var(--line2, #3a4250); background: var(--panel-lit); }
.hero__n {
  font-family: var(--display);
  font-size: clamp(34px, 3.4vw, 54px);
  font-weight: 400; line-height: 0.95; letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hero__n small { font-size: 0.4em; color: var(--ink-soft); margin-left: 0.12em; letter-spacing: 0; }
.hero__n--accent { color: var(--amber); }
.hero__n--stop { color: var(--stop); }
.hero__n--risk { color: var(--risk); }
.hero__cap { font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.3; margin-top: 6px; }
/* Иконка раздела вместо спарклайна. Евгений 23.09: «какие-то графики непонятные —
   зачем, к чему? Либо вообще не ставить, либо что-то соответствующее, чтобы было
   понятно, что это за раздел». Выдуманная кривая — украшение, которое врёт, что за
   ней стоят данные. Иконка молчит честно: она только называет раздел.

   Рисуем линией в 1.5 px, тем же цветом, что цифра, и приглушаем: иконка помогает
   узнать карточку боковым зрением, но не спорит с цифрой за внимание. */
.hero__ico {
  position: absolute; top: var(--space-4); right: var(--space-4);
  width: 22px; height: 22px;
  color: var(--ink-soft); opacity: 0.4;
  pointer-events: none;
}
.hero__ico svg { width: 100%; height: 100%; display: block; }
.hero--accent .hero__ico { color: var(--amber); opacity: 0.55; }
.hero--stop .hero__ico { color: var(--stop); opacity: 0.55; }
.hero--risk .hero__ico { color: var(--risk); opacity: 0.55; }

.herorow { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--space-4); }
@media (min-width: 900px) {
  .herorow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 22px; }
}

/* ═══ КНОПКИ ДЕЙСТВИЯ РЯДОМ С ДАННЫМИ ══════════════════════════════════════
   Требование владельца 23.09: «рядом сразу удобные кнопки — править, добавить,
   изменить». Кнопка живёт в шапке карточки, а не на отдельной странице
   настроек: где человек видит данные, там он их и меняет.

   Подсказка (16.09, «умный сайт»): у кнопки всплывает, ЧТО произойдёт после
   нажатия. Пишется в data-hint, не в title — системная подсказка появляется
   через секунду и на телефоне не появляется вовсе. */

.act {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px;
  border: 1px solid var(--line-dim);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-soft);
  font: inherit; font-size: var(--text-sm); line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
}
.act:hover { color: var(--ink-bright); border-color: #3a4250; background: rgba(255, 255, 255, 0.04); }
.act--primary {
  background: var(--amber); border-color: var(--amber); color: #fff; font-weight: 600;
}
.act--primary:hover { background: var(--amber-lit); border-color: var(--amber-lit); color: #fff; }
.act--ghost { border-color: transparent; }
.act__ico { font-size: calc(13px * var(--ui-scale)); line-height: 1; }

.act[data-hint]::after {
  content: attr(data-hint);
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  width: max-content; max-width: 260px;
  padding: 8px 10px;
  background: var(--panel-lit);
  border: 1px solid #3a4250;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: var(--text-xs); line-height: 1.35;
  white-space: normal; text-align: left;
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.act[data-hint]:hover::after, .act[data-hint]:focus-visible::after { opacity: 1; transform: translateY(0); }

.acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ═══ КАРТОЧКА РАБОЧЕГО МЕСТА ══════════════════════════════════════════════
   .tile из platform.css остаётся, здесь — её шапка с кнопками и содержимое,
   которое умеет быть сеткой. */

/* «Чуть более облегчённый» (Евгений 23.09): панель не глухой прямоугольник, а слегка
   осветлённое полотно; рамка тише фона, угол мягче. Тяжесть на тёмном даёт не цвет,
   а контраст рамки — его и убираем. */
.panel {
  background: rgba(255, 255, 255, 0.028);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  overflow: hidden;
}
.panel__head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 18px var(--space-5) 17px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}
.panel__head .acts { margin-left: auto; }
.panel__body { padding: 26px var(--space-5); }
.panel__body--flush { padding: 0; }

/* Строка списка с кнопками. Кнопки видны всегда на телефоне (наведения нет) и
   проявляются под курсором на компьютере — чтобы список читался, а не рябил. */
.rows { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 16px var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.055);
  text-decoration: none; color: inherit;
  min-width: 0;
}
.rows > .row:first-child { border-top: 0; }
.row:hover { background: rgba(255, 255, 255, 0.03); }
.row__main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.row__what { font-size: var(--text-md); line-height: 1.3; }
.row__where { font-size: var(--text-xs); color: var(--ink-faint); }
.row__acts { margin-left: auto; display: flex; gap: 6px; flex: none; }
/* Кнопки в строке видны ВСЕГДА (требование Евгения 23.09: «кнопки управления сразу,
   чтобы можно было зайти и удобно это сделать»). Раньше они проявлялись под курсором —
   и человек, который о них не знает, их не находит вовсе. Спрятанная кнопка = кнопки нет.
   Чтобы список не рябил, невыделенные кнопки приглушены и наливаются под курсором. */
.row__acts .act { opacity: 0.72; }
.row:hover .row__acts .act, .row__acts .act:hover, .row__acts .act:focus-visible { opacity: 1; }
.row__acts .act--primary { opacity: 1; }

/* ═══ ПЛИТКА ОБЪЕКТА ═══════════════════════════════════════════════════════
   Главный экран платформы: объекты кольцами. Плитка целиком — ссылка внутрь,
   кнопки внутри неё — отдельные действия (поэтому плитка не <a>, а блок со
   ссылкой-заголовком: ссылка внутри ссылки браузером не поддерживается). */

.objgrid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

.obj {
  background: rgba(255, 255, 255, 0.028);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: var(--space-5);
  /* Опора для растянутой зоны нажатия (.obj__open::after, §5 требований 26.09). */
  position: relative;
}
.obj:hover { border-color: rgba(255, 255, 255, 0.16); }
.obj__top { display: flex; gap: var(--space-4); align-items: center; }
.obj__dial { width: 86px; flex: none; }
.obj__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.obj__title {
  font-family: var(--display);
  font-size: calc(16px * var(--ui-scale)); font-weight: 600; letter-spacing: -0.02em;
  color: var(--ink-bright); text-decoration: none;
}
.obj__title:hover { color: var(--amber-lit); }
.obj__now { font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.35; }
.obj__mini { margin-top: var(--space-3); display: flex; flex-direction: column; gap: 5px; }
/* z-index поднимает кнопки над растянутой ссылкой плитки — иначе подложка съедала бы их клики. */
.obj__foot { margin-top: var(--space-3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  position: relative; z-index: 1; }
.obj__foot .acts { margin-left: auto; }

/* ═══ КАЛЕНДАРЬ МЕСЯЦЕМ ════════════════════════════════════════════════════
   Главное требование 23.09: «хочу видеть календарь». Этап — не строчка в
   списке, а многодневная полоса, лежащая через дни: так видно и что идёт, и
   что накладывается друг на друга.

   Как устроено. Каждая неделя — своя сетка из 7 колонок. Первая строка сетки —
   числа, дальше строки полос: полоса занимает `grid-column: начало / span длина`.
   Проценты и позиции считает сервер, браузер ничего не додумывает.

   Почему не одна сетка на месяц: полоса, перешедшая через воскресенье, должна
   обрезаться и продолжиться на следующей строке — в общей сетке она бы легла
   поверх чужих дней. */

.cal { display: flex; flex-direction: column; }
.cal__dow {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  padding: 0 var(--space-3) 8px;
  font-family: var(--mono); font-size: calc(10px * var(--ui-scale)); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint);
}
.cal__dow span { padding-left: 4px; }
.cal__dow span:nth-child(n + 6) { color: #6b5a52; }  /* выходные приглушены, но различимы */

.cal__week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: 20px;
  gap: 3px 4px;
  padding: 8px var(--space-3) 10px;
  border-top: 1px solid var(--line-dim);
  position: relative;
}
/* Колонки выходных и колонка «сегодня» — заливкой на всю высоту недели: без этого
   сетка читается как таблица, а не как календарь. Слой лежит под содержимым. */
.cal__tint {
  grid-row: 1 / -1;          /* колонка целиком, от чисел до кнопки «добавить» */
  margin: -8px 0 -10px;      /* съедает падинги недели: заливка идёт до линий */
  pointer-events: none;
  background: rgba(255, 255, 255, 0.022);
}
.cal__tint--today { background: rgba(232, 98, 42, 0.07); box-shadow: inset 0 0 0 1px rgba(232, 98, 42, 0.22); }

/* Вертикальные волосяные линии между днями — сетка календаря без рамок-коробок. */
.cal__week::before {
  content: "";
  position: absolute; inset: 0 var(--space-3);
  background: repeating-linear-gradient(
    to right,
    transparent 0 calc(100% / 7 - 1px),
    var(--line-dim) calc(100% / 7 - 1px) calc(100% / 7)
  );
  opacity: 0.55; pointer-events: none;
}
.cal__day {
  grid-row: 1; align-self: start;
  display: flex; align-items: center; gap: 6px;
  padding-left: 4px;
  font-family: var(--mono); font-size: calc(12px * var(--ui-scale)); color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.cal__day--off { color: var(--ink-faint); }
.cal__day--out { opacity: 0.35; }          /* день соседнего месяца */
.cal__day--today {
  color: #fff; background: var(--amber);
  border-radius: 99px; padding: 1px 7px; margin-left: 2px;
}

/* Полоса этапа. Цвет — вид работ (та же палитра, что у Ганта: один язык на
   плане и в календаре). Закрытый этап гаснет, но не исчезает. */
.cal__bar {
  display: flex; align-items: center; gap: 6px;
  min-width: 0; height: 20px;
  padding: 0 8px;
  border-radius: 99px;
  background: var(--work, var(--work-none));
  color: #0c0e12;
  font-size: calc(11px * var(--ui-scale)); font-weight: 600; line-height: 1;
  text-decoration: none;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.cal__bar:hover { filter: brightness(1.12); }
.cal__bar--done { opacity: 0.42; }
.cal__bar--risk { box-shadow: inset 0 0 0 2px var(--risk); }
.cal__bar--ghost {            /* продолжение полосы с прошлой недели */
  border-top-left-radius: 3px; border-bottom-left-radius: 3px;
}
.cal__bar--cut {              /* полоса уходит на следующую неделю */
  border-top-right-radius: 3px; border-bottom-right-radius: 3px;
}

/* Дело в дне — не полоса, а строка с часом: у дела нет длительности. */
.cal__task {
  display: flex; align-items: center; gap: 5px;
  min-width: 0; height: 20px; padding: 0 6px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-dim);
  color: var(--ink-soft);
  font-size: calc(11px * var(--ui-scale)); line-height: 1;
  text-decoration: none;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.cal__task:hover { color: var(--ink-bright); border-color: #3a4250; }
.cal__task span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cal__task b { font-family: var(--mono); font-weight: 400; color: var(--amber); font-size: calc(10px * var(--ui-scale)); }
.cal__task--wait { border-color: rgba(232, 98, 42, 0.45); }

.cal__more { font-size: calc(10px * var(--ui-scale)); color: var(--ink-faint); padding-left: 6px; align-self: center; }

/* Кнопка «добавить в этот день» — появляется под курсором в пустом месте дня. */
.cal__add {
  align-self: stretch; justify-self: stretch;
  border: 1px dashed transparent; border-radius: var(--radius-sm);
  color: transparent; background: transparent;
  font: inherit; font-size: calc(11px * var(--ui-scale)); cursor: pointer;
}
.cal__week:hover .cal__add { border-color: rgba(255, 255, 255, 0.10); color: var(--ink-faint); }
.cal__add:hover { border-color: var(--amber); color: var(--amber); }

.legend { display: flex; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line-dim); }
.legend span { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--ink-soft); }
.legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--work-none); display: inline-block; }

/* ═══ ПЕРЕКЛЮЧАТЕЛЬ ВИДА ═══════════════════════════════════════════════════ */

.seg { display: inline-flex; border: 1px solid var(--line-dim); border-radius: var(--radius-pill); overflow: hidden; }
.seg button {
  appearance: none; border: 0; background: transparent;
  color: var(--ink-soft); font: inherit; font-size: var(--text-sm);
  padding: 6px 13px; cursor: pointer;
}
.seg button + button { border-left: 1px solid var(--line-dim); }
.seg button:hover { color: var(--ink-bright); background: rgba(255, 255, 255, 0.05); }
.seg button[aria-pressed="true"] { background: var(--amber); color: #fff; }

/* ═══ ФОТОПЛИТКА ═══════════════════════════════════════════════════════════ */

.shots { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.shot {
  aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden;
  position: relative; display: block; text-decoration: none;
  border: 1px solid var(--line-dim);
  background: linear-gradient(160deg, #262c35, #171b21);
}
.shot:hover { border-color: #3a4250; }
/* Пока снимка нет (демо) — диагональная фактура: слот читается как место под фото,
   а не как дырка в вёрстке. В кабинете сюда встаёт настоящий кадр с объекта. */
.shot::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg,
    rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 9px);
}
.shot__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 10px 9px;
  background: linear-gradient(to top, rgba(8, 10, 13, 0.92), rgba(8, 10, 13, 0));
  font-size: calc(11px * var(--ui-scale)); color: var(--ink-bright); line-height: 1.25;
}
.shot__when { font-family: var(--mono); font-size: calc(10px * var(--ui-scale)); color: var(--ink-faint); display: block; }

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

.hint {
  font-size: var(--text-xs); color: var(--ink-faint); line-height: 1.5;
  padding: var(--space-3) var(--space-5) 0;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); display: inline-block; flex: none; }
.dot--stop { background: var(--stop); }
.dot--risk { background: var(--risk); }
.dot--done { background: var(--done); }
.sep { color: var(--ink-faint); }

/* ═══ ТЕЛЕФОН ══════════════════════════════════════════════════════════════
   Заказчик открывает кабинет с телефона — широкая панель обязана сложиться в
   одну колонку, а не уехать вбок. Проверено на 430 px (iPhone): ни одного
   горизонтального прокручивания страницы. Горизонтально ездит только сам
   календарь, внутри своей рамки: месяц на 430 px нечитаем, а врать масштабом
   хуже, чем дать его подвинуть пальцем. */

@media (max-width: 700px) {
  /* Разделы — одной лентой, которая ездит пальцем внутри себя. `display: contents`
     распрямляет группы: иначе «Работа» и «Объект» встают двумя столбцами. */
  .rail { padding: 10px 12px; gap: 14px; }
  .rail > div { display: contents; }
  .rail__brand { font-size: calc(15px * var(--ui-scale)); }
  .rail__item { padding: 7px 10px; }

  .appbar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .appbar__where { width: 100%; flex-wrap: wrap; gap: 4px 10px; }
  .appbar__title { font-size: calc(17px * var(--ui-scale)); }
  .appbar__sub { white-space: normal; }
  .appbar__right { margin-left: 0; width: 100%; flex-wrap: wrap; gap: 8px; }
  .appbar__who { display: none; }   /* имя уже видно в разделе «кто вошёл» */

  .panel__head { flex-wrap: wrap; padding: 13px var(--space-4) 12px; }
  .panel__body { padding: var(--space-4); }
  /* Строка списка на телефоне: кнопки переносятся под содержимое, а не сжимают его. */
  .row { padding: 12px var(--space-4); flex-wrap: wrap; }
  .hint { padding: var(--space-3) var(--space-4) 0; }
  .hero { padding: var(--space-4); }
  .hero__ico { top: 12px; right: 12px; width: 18px; height: 18px; }
  .panel__head .acts { margin-left: 0; width: 100%; }

  /* Кнопки в строке списка на телефоне видны всегда: наведения нет. */
  .row__acts { margin-left: 0; width: 100%; opacity: 1; }

  .hero__n { font-size: clamp(30px, 11vw, 44px); }
  .objgrid { grid-template-columns: minmax(0, 1fr); }

  /* Подсказка у кнопки на узком экране прижимается к левому краю, иначе
     уезжает за границу экрана. */
  .act[data-hint]::after { right: auto; left: 0; max-width: calc(100vw - 48px); }
}

/* Календарь на узком экране: сам месяц не сжимаем, даём подвинуть. */
.calscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.calscroll .cal { min-width: 620px; }

/* ═══ ПРОРЕХА — НЕЗАПОЛНЕННОЕ МЕСТО ════════════════════════════════════════
   Требование Евгения 23.09: *«Где не заполнено — визуально примерно покажи, как это
   должно быть, и напиши: срочно заполнить. И кнопки управления сразу, чтобы можно
   было зайти и удобно это сделать»*.

   Почему не просто «нет данных». Пустой экран не объясняет, чего система ждёт, и
   человек уходит. Прореха делает три вещи сразу: показывает СЕРЫМ, как будет, когда
   заполнят; называет словами, что это даст; даёт кнопку прямо туда.

   Срочность не украшение: 🔴 — без этого встанет работа или уедет срок,
   🟡 — заполнить на неделе, серая — можно потом. */

.gap {
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  padding: 20px var(--space-5) 22px;
  background: rgba(255, 255, 255, 0.012);
  display: flex; flex-direction: column; gap: 12px;
}
.gap--hot { border-color: rgba(218, 54, 51, 0.45); background: rgba(218, 54, 51, 0.05); }
.gap--warm { border-color: rgba(227, 160, 8, 0.38); background: rgba(227, 160, 8, 0.04); }

.gap__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gap__what { font-family: var(--display); font-size: calc(15px * var(--ui-scale)); font-weight: 600; letter-spacing: -0.02em; }
.gap__why { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.5; max-width: 72ch; }
.gap__foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gap__who { font-size: var(--text-xs); color: var(--ink-faint); }

/* Скелет: как будет выглядеть, когда заполнят. Намеренно без единой цифры —
   выдуманное число на экране живой платформы читается как настоящее. */
.ghost { display: flex; flex-direction: column; gap: 9px; opacity: 0.4; pointer-events: none; }
.ghost__line { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.10); }
.ghost__line--s { width: 32%; }
.ghost__line--m { width: 58%; }
.ghost__line--l { width: 82%; }
.ghost__row { display: flex; gap: 9px; align-items: center; }
.ghost__box { height: 58px; border-radius: 10px; background: rgba(255, 255, 255, 0.07); flex: 1 1 0; }
.ghost__box--tall { height: 104px; }
.ghost__dial { width: 56px; height: 56px; border-radius: 50%; border: 8px solid rgba(255, 255, 255, 0.09); flex: none; }

/* Полоска «чего не хватает» в шапке раздела — счётчик прорех по объекту. */
.gapline {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 13px var(--space-5);
  border-radius: 14px;
  border: 1px solid rgba(218, 54, 51, 0.35);
  background: rgba(218, 54, 51, 0.06);
  font-size: var(--text-sm); color: var(--ink-bright);
  margin-bottom: 22px;
}
.gapline .acts { margin-left: auto; }

/* ═══ ИЗ ОКНА svod-pokaz (каркас в _shell.html) ════════════════════════════
   Кнопка выхода в шапке и в ленте разделов + область содержимого. Пришло из
   соседнего окна вместе с переносом каркаса в боевые шаблоны — их разметка на
   эти классы уже опирается, поэтому они живут здесь, а не заводятся заново. */

/* ─────────────────────────────────────────────────────────────────────────────
   ЗДЕСЬ БЫЛА ВТОРАЯ КОПИЯ ЭТОГО ЖЕ ФАЙЛА (вырезана 26.09.2026).

   23.09 в 13:00 коммит `b7749643` склеил файл сам с собой: 576 строк превратились
   в 1275, и дальше обе половины правились порознь. В CSS выигрывает ТА, ЧТО НИЖЕ, —
   значит побеждала старая копия, а свежие правки сверху молча не доезжали до экрана.

   Что этим было сломано на живом кабинете:
     · «кнопки управления видны всегда» (требование Евгения 23.09) → нижняя копия
       возвращала `.row__acts { opacity: 0 }` под `@media (hover: hover)`, то есть на
       компьютере органы управления были невидимы, пока не наведёшь мышь. Ровно та
       жалоба 26.09: «зашёл в события — панели управления нет»;
     · «чуть более облегчённый» вид панелей (он же 23.09) → возвращались глухие
       рамки и прежние отступы.

   Уникального в нижней копии не было ничего, кроме этих двух правил про наведение —
   проверено посчётно: 128 селекторов, из них 126 слово в слово есть выше, а два
   оставшихся и есть то самое пряталово. Хвост файла (выход из кабинета, врезка
   объекта, корзины, хронология, полка черновиков) с верхней копией не пересекается
   и сохранён целиком — он идёт сразу ниже.

   Урок класса (правило 18): файл стилей нельзя проверять глазами по началу — дубль
   в конце выглядит как «просто длинный файл». Сторож на повторяющиеся селекторы
   стоит в tests/canon/test_stili_bez_dublya.py.
   ───────────────────────────────────────────────────────────────────────────── */

/* Хвост каркаса: выход из кабинета и рабочая колонка.
   Живёт здесь, а не в cabinet.css: это части каркаса платформы, и они должны исчезать вместе
   с ним, если слой отключат. */
.app__main { min-width: 0; display: flex; flex-direction: column; }

.appbar__exit,
.rail__exit {
  color: var(--ink-soft, #9aa1ab);
  text-decoration: none;
  font-size: var(--text-sm);
  border-bottom: 1px solid transparent;
}

.appbar__exit:hover,
.rail__exit:hover { color: var(--amber, #e8622a); border-bottom-color: currentColor; }

.rail__exit {
  color: var(--ink-soft, #9aa1ab);
  text-decoration: none;
  font-size: var(--text-sm);
  border-bottom: 1px solid transparent;
}

.rail__exit:hover { color: var(--amber, #e8622a); border-bottom-color: currentColor; }

/* ═══ ВРЕЗКА ОБЪЕКТА ═══════════════════════════════════════════════════════
   Требование владельца 23.09: «нажал на объект — сразу под ним открылись события и
   управление, без перехода на другую страницу, как вкладочка».

   Плитка объекта стала контейнером: ссылка-шапка (.obj__open) раскрывает врезку,
   кнопки управления стоят рядом всегда, врезка приезжает htmx'ом в .obj__inset.
   Ссылка внутри ссылки браузером не поддерживается — поэтому плитка не <a>, а
   <article>, и кликабельна её шапка. */

.obj__open {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  outline-offset: 3px;
}
.obj__open:hover .ocard__title, .obj__open:hover .obj__title { color: var(--amber-lit); }

/* §5 требований 26.09: «нажимается ВСЯ подложка, а не текст».
   Было: ссылка занимала только шапку плитки, и поля плитки (24px по кругу) клик не ловили —
   палец попадал в пустоту рядом с названием и ничего не происходило. Растягиваем зону нажатия
   на всю плитку невидимым слоем ссылки. Сама разметка не меняется: ссылка внутри ссылки
   браузером не поддерживается, поэтому плитка остаётся <article>.
   Всё, что должно нажиматься САМО (кнопки «План/Фото/Паспорт», раскрытая врезка), поднимаем
   над этим слоем — иначе подложка перехватывала бы их клики. */
.obj__open::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.obj__inset:empty { display: none; }
.obj__inset {
  margin-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding-top: var(--space-4);
  /* Раскрытая врезка живёт над зоной нажатия плитки: её собственные ссылки должны работать. */
  position: relative;
  z-index: 1;
}

.inset { display: flex; flex-direction: column; gap: 12px; }
.inset__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inset__title {
  font-family: var(--display);
  font-size: calc(15px * var(--ui-scale)); font-weight: 600; letter-spacing: -0.02em;
}
.inset__head .acts { margin-left: auto; }

.inset__tier {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--mono); font-size: calc(10px * var(--ui-scale)); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 4px;
}
.inset__count { color: var(--ink-soft); }

/* Строки внутри врезки живут в общей рамке плитки — свои поля им не нужны. */
.inset .row { padding: 11px 0; }
.inset .rows > .row:first-child { border-top: 0; }

.inset__calm { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.5; }

/* ═══ КОРЗИНЫ ОБЪЕКТОВ ═════════════════════════════════════════════════════
   «Пускай отдельно будут архивные, замороженные, тестовые — чтобы не парились,
   но нажимаешь и раскрывается список» (владелец, 23.09).

   Обычный <details>: без JS, одинаково на телефоне и компьютере. Закрытая корзина
   занимает одну строку и намеренно приглушена — она не должна спорить с живыми
   объектами за внимание. */

.buckets { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }

.bucket {
  background: rgba(255, 255, 255, 0.018);
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 14px;
  overflow: hidden;
}
.bucket[open] { background: rgba(255, 255, 255, 0.028); }

.bucket__head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px var(--space-5);
  cursor: pointer;
  list-style: none;
  color: var(--ink-soft);
  font-size: var(--text-sm);
}
.bucket__head::-webkit-details-marker { display: none; }
/* Своя стрелка: системный треугольник в тёмной панели выглядит как чужой элемент. */
.bucket__head::before {
  content: "›";
  display: inline-block;
  font-size: calc(15px * var(--ui-scale)); line-height: 1;
  color: var(--ink-faint);
  transition: transform 0.15s ease;
}
.bucket[open] .bucket__head::before { transform: rotate(90deg); }
.bucket__head:hover { color: var(--ink-bright); background: rgba(255, 255, 255, 0.03); }
.bucket__name { font-weight: 500; }
.bucket__n {
  margin-left: auto;
  font-family: var(--mono); font-size: calc(11px * var(--ui-scale));
  color: var(--ink-faint);
}
.bucket .rows { border-top: 1px solid rgba(255, 255, 255, 0.055); }
.bucket .row { text-decoration: none; }
.bucket--paused .bucket__name { color: var(--risk); }
.bucket--service .bucket__head { color: var(--ink-faint); }

/* ── из окна svod-pokaz: кнопка пароля в шапке ── */
.appbar__pass {
  font-size: var(--text-xs);
  color: var(--amber, #e8622a);
  text-decoration: none;
  border: 1px solid currentColor;
  border-radius: 99px;
  padding: 4px 10px;
  white-space: nowrap;
}
.appbar__pass:hover { background: rgba(232, 98, 42, .12); }

/* ═══ ХРОНОЛОГИЯ ═══════════════════════════════════════════════════════════
   «Загрузи все события, чтобы можно было откатиться по датам» (владелец, 23.09).

   Дата — липкая шапка дня: при прокрутке длинной истории человек всегда видит,
   какой день читает. Время моноширинное, чтобы столбик не плясал. */

.chrono__day { border-top: 1px solid rgba(255, 255, 255, 0.055); }
.chrono__day:first-child { border-top: 0; }

.chrono__date {
  position: sticky; top: 56px; z-index: 5;
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px var(--space-5);
  background: rgba(20, 23, 28, 0.94);
  backdrop-filter: blur(6px);
  font-family: var(--display);
  font-size: calc(13px * var(--ui-scale)); font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink-soft);
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}
.chrono__dow { font-family: var(--text); font-weight: 400; font-size: calc(11px * var(--ui-scale)); color: var(--ink-faint); }

.chrono__time {
  font-family: var(--mono); font-size: calc(11px * var(--ui-scale)); color: var(--amber);
  font-variant-numeric: tabular-nums;
}
.chrono__open { color: var(--risk); }

.chrono__more { padding: 16px var(--space-5) 20px; display: flex; justify-content: center; }
/* Возврат к списку объектов — над переключателем разделов. Мелко и приглушённо: это не действие
   страницы, а путь назад. */
.page__back { margin: 0 0 var(--space-3); font-size: var(--text-sm); }
.page__back a { color: var(--ink-soft, #9aa1ab); text-decoration: none; border-bottom: 1px solid transparent; }
.page__back a:hover { color: var(--amber, #e8622a); border-bottom-color: currentColor; }

/* ═══ ПОЛКА ЧЕРНОВИКОВ ═════════════════════════════════════════════════════
   «Показать Антону, чтобы он махом всё закрыл, завершил, прокомментировал»
   (владелец, 23.09). Строка целиком — метка галочки: на телефоне попасть
   пальцем в чекбокс 16 px невозможно, а в строку — всегда. */

.draftrow { cursor: pointer; }
.draftrow:has(.draftrow__check:checked) { background: rgba(232, 98, 42, 0.07); }
.draftrow__check {
  width: 18px; height: 18px; flex: none;
  accent-color: var(--amber);
  cursor: pointer;
}

/* Панель действий прилипает к низу экрана: когда отметил сорок строк и долистал
   до конца, кнопка должна быть под рукой, а не «где-то вверху». */
.draftbar {
  position: sticky; bottom: 0;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(20, 23, 28, 0.95);
  backdrop-filter: blur(8px);
}
.draftbar .acts { margin-left: auto; }
.draftbar__words {
  flex: 1 1 260px; min-width: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-pill);
  padding: 9px 14px;
  color: var(--ink-bright);
  font: inherit; font-size: var(--text-sm);
}
.draftbar__words::placeholder { color: var(--ink-faint); }
.draftbar__words:focus { outline: none; border-color: var(--amber); }