/*
 * Hallmark · genre: modern-minimal · macrostructure: Workbench (рабочие экраны),
 * Conversational FAQ (справочные), Stat-Led (вход) · design-system: design.md ·
 * designed-as-app · nav: N3 side-rail · footer: none · enrichment: none
 *
 * Тема кабинета поверх токенов Lumen (подключается ПОСЛЕ lumen.css).
 * lumen.css не правим — копия DS остаётся чистой, бренд и починки живут здесь.
 *
 * Что здесь делается и почему — в design.md. Кратко: у владельца открыты три
 * вкладки одного проекта, и различает он их по акценту (контент голубой,
 * админка фиолетовая, API зелёный).
 */

:root {
  /* Поверхности: светлые, карточки белые, песок не используется вовсе */
  --bg-page: #f9f9f7;
  --bg-canvas: #f4f4f2;
  --surface-card: #ffffff;
  --surface-inset: #f1f4f2;
  --surface-hover: #f1f4f2;

  /*
   * Зелёная ветка. Тон подобран под контраст, а не наоборот: #4b8f6a давал
   * белому тексту на кнопке 3.86:1 — ниже порога 4.5 для кегля мельче 24px.
   * #44805f даёт 4.67:1 и в обе стороны (белый на нём и он на белом), поэтому
   * один токен работает и заливкой, и текстом ссылки.
   */
  --accent: #44805f;         /* 4.67:1 с белым — заливка кнопок и текст на белом */
  --accent-strong: #36684d;  /* наведение; текст на --accent-soft: 5.47:1 */
  --accent-soft: #e2efe8;
  --accent-fg: #ffffff;

  /*
   * Фокус — сплошное кольцо с белым зазором, а не полупрозрачная подсветка.
   * rgb(...) с альфой 0.3 над белым даёт около 1.5:1: кольцо, которого не видно,
   * не является индикатором фокуса. Порог для колец — 3:1.
   */
  --ring-focus: 0 0 0 2px #ffffff, 0 0 0 4px #44805f;

  /*
   * Текстовая лестница. В DS --text-3 = #8D8D86 — это 3.34:1 на белом и 3.09:1
   * на инсете, то есть ниже порога на обеих поверхностях. Им же набрана половина
   * кабинета, включая подписи метрик. Заодно углубляем --text-2, иначе после
   * починки третья и вторая ступени становятся неразличимы.
   */
  --text-2: #565651;  /* было #6A6A64 — 5.44:1; стало 7.38:1 */
  --text-3: #6F6F69;  /* было #8D8D86 — 3.34:1; стало 5.06:1 / 4.67:1 на инсете */

  /*
   * Собственные токены кабинета. В DS их нет, и добавлять их туда мы не можем —
   * копия неприкосновенна.
   */
  --warning-ink: #8a5d00;  /* предупреждение ТЕКСТОМ: --warning даёт 2.71:1 */
  --chart-bar: #7f9287;    /* столбец графика: 3.3:1, порог для нетекста — 3.0 */

  /* Ритм экрана: 16 внутри смысловой группы, 32 между группами (design.md) */
  --stack: var(--space-4);
  --stack-lg: var(--space-6);
}

body {
  background: var(--bg-page);
}

/*
 * Ни на одной ширине от 320 до 1920 страница не должна ехать вбок. `clip`, а не
 * `hidden`: hidden ломает position: sticky и fixed у потомков.
 */
html, body { overflow-x: clip; }

/*
 * ТЁМНОЙ ТЕМЫ НЕТ — И ЭТО РЕШЕНИЕ, А НЕ НЕДОДЕЛКА.
 *
 * Девять цветов зашиты литералами в inline-стили Lumen (Banner, Badge,
 * JsonViewer, Button). Inline-стиль перебивает таблицу стилей, классов у
 * компонентов нет — из темы их не достать. Прежняя тёмная тема переопределяла
 * поверхности и не могла переопределить текст: баннер «Шлюз отвечает» на
 * странице статуса давал 1.51:1, тело запроса в журнале — 2.02:1.
 *
 * Тёмная тема, которую не видно, хуже её отсутствия: человек не понимает,
 * сломан сервис или сломан кабинет. Вернётся вместе с токенами в DS.
 */

/* ------------------------------------------------------------------ числа */

/*
 * Tilda Sans — гуманистический гротеск с пропорциональными цифрами: в колонке
 * они разъезжаются. Кабинет — это семь экранов таблиц, и колонку читают сверху
 * вниз, ради чего числовые колонки и прижаты вправо.
 */
table,
.tnum {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ график */

/*
 * MiniBars красит акцентом последний столбец, остальные — var(--neutral-200)
 * = #E7E7E2, то есть 1.24:1 на белой карточке. График расхода за месяц был
 * белым полем с одной зелёной палочкой справа. fill в SVG — презентационный
 * атрибут, любое правило CSS его перебивает, поэтому чиним отсюда.
 */
.usage-chart svg rect { fill: var(--chart-bar); }
.usage-chart svg rect:last-of-type { fill: var(--accent); }

/* ------------------------------------------------------- лестница плотности */

/*
 * Полотно — главный блок экрана. Не карточка: контент лежит прямо на фоне,
 * и это единственное, что отличает его от остальных блоков без единой лишней
 * рамки. Ровно одно на экран (design.md § Лестница плотности).
 */
.canvas {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-2) 0 var(--space-5);
  border-bottom: 1px solid var(--border-1);
  margin-bottom: var(--space-2);
}

.canvas h1 {
  margin: 0;
  font-size: var(--size-h2);
  line-height: var(--leading-heading);
  letter-spacing: -0.015em;
  font-weight: var(--weight-semibold);
  color: var(--text-1);
  overflow-wrap: anywhere;
  min-width: 0;
}

.canvas p {
  margin: 0;
  max-width: 68ch;              /* мера чтения: 45–75ch */
  font-size: var(--size-sm);
  line-height: var(--leading-body);
  color: var(--text-2);
}

/*
 * Справка — то, что нужно реже, чем в одном открытии из пяти. Раскрывашка
 * вместо карточки: текст никуда не девается, но перестаёт весить столько же,
 * сколько цифры расхода.
 */
.note {
  border-top: 1px solid var(--border-1);
}

.note > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  color: var(--text-2);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.note > summary::-webkit-details-marker { display: none; }

.note > summary::before {
  content: "▸";
  flex: none;
  font-size: 11px;
  color: var(--text-3);
  transition: transform var(--duration-fast) var(--ease-out);
}

.note[open] > summary::before { transform: rotate(90deg); }
.note > summary:hover { color: var(--text-1); }

.note > .note-body {
  padding: 0 0 var(--space-4);
}

/* --------------------------------------------------------------- мобильный */

/*
 * Кабинет не мобильное приложение, но в него заглядывают с телефона —
 * посмотреть остаток и не сломалось ли что.
 *
 * Прежнее правило `[data-collapsed] { display: block }` не делало ничего:
 * атрибут появляется, только когда сайдбар уже свёрнут, а свёрнутый рендерит
 * children: null. Сайдбар занимал 224 из 375 px, контент получал 103 px, и
 * AppShell с overflow:hidden не давал даже отлистать. Рельс уезжает в Drawer —
 * это делается в app.tsx, здесь остаётся только вёрстка содержимого.
 */
@media (max-width: 720px) {
  .canvas { padding-bottom: var(--space-4); }
  .canvas h1 { font-size: var(--size-h3); }

  /*
   * Обёртка таблицы в Lumen стоит overflow:hidden ради скругления углов —
   * на узком экране это молча режет правые колонки. Отдаём прокрутку ей,
   * а не странице, и не трогаем display самой <table>: block снимает с неё
   * роль таблицы для ассистивных технологий.
   */
  div:has(> table) { overflow-x: auto; }
  table { font-size: 13px; }

  /* Таблицы «термин — значение» прокручивать незачем, там проза. */
  .prose-table table { font-size: 14px; }

  pre, textarea { font-size: 11.5px; }
}