/* Единый слой дашбордов поверх дизайн-системы Platinumlist.
 *
 * Зачем он существует. До него каждая из четырнадцати страниц объявляла собственный :root,
 * и одно и то же имя значило разное: --card был var(--bg-wash) в workspace.html,
 * rgba(255,255,255,0.02) в guide-traffic.html и rgba(0,0,0,0.03) в её же светлом блоке.
 * Отсюда 281 захардкоженный hex, ~600 rgba() и ощущение, что страницы собраны разными людьми.
 * Теперь имя объявлено один раз и разрешается в семантический токен DS.
 *
 * Правило: здесь не должно появляться сырых значений цвета. Каждый алиас — ссылка на токен.
 * Единственное исключение задокументировано ниже (палитра серий графиков) и объяснено там же.
 *
 * Темы бесплатны: токены DS построены на light-dark(), поэтому ручной блок
 * [data-theme="light"] с полной второй палитрой странице больше не нужен.
 */

:root {
  /* --- поверхности --------------------------------------------------------- */
  --bg:              var(--bg-default);
  --bg-soft:         var(--bg-secondary);
  --card:            var(--bg-floating);
  --card-border:     var(--bg-border);
  --line:            var(--bg-border);
  --row-hover:       var(--bg-hover);
  --thead-bg:        var(--bg-secondary);
  --td-border:       var(--bg-border);

  /* Дрейф-имена, которые встречались на шести страницах и в DS не существуют.
   * Оставлены как псевдонимы, чтобы миграция не требовала править всю разметку разом. */
  --bg-surface:       var(--bg-floating);
  --bg-surface-hover: var(--bg-hover);
  --border-default:   var(--bg-border);
  --border-strong:    var(--bg-border-hover);

  /* --- текст --------------------------------------------------------------- */
  --ink:             var(--content-primary);
  --text:            var(--content-primary);
  --muted:           var(--content-secondary);
  --text-dim:        var(--content-secondary);
  --content-tertiary: var(--content-secondary);   /* дрейф-имя, в DS такого нет */

  /* --- элементы управления -------------------------------------------------- */
  --input-bg:        var(--bg-default);
  --input-border:    var(--bg-border);
  --accent:          var(--accent-badge);
  --accent-soft:     var(--bg-wash);

  /* --- статусы: зарезервированы, сериями графиков быть не могут --------------- */
  --ok:              var(--accent-success);
  --warn:            var(--accent-caution);
  --err:             var(--accent-alert);
  --up:              var(--accent-success);
  --down:            var(--accent-alert);

  /* --- форма ---------------------------------------------------------------- */
  --radius:          var(--radius-base);
  --shadow:          var(--shadow-sm);

  /* --- палитра серий графиков ------------------------------------------------
   * Единственное место с сырыми значениями, и вот почему. Рампы DS для этой роли
   * непригодны: полоса светлоты тёмной темы — OKLCH L 0.48–0.67, а в неё попадают
   * ТОЛЬКО фиолетовые шаги пуделя. Корги-зелёные лежат на 0.78–0.92, циан 0.86,
   * caution 0.85 — все выше полосы, то есть на тёмном фоне сливаются в светлое пятно.
   * Поэтому взяты оттенки бренда (циан, лайм, фиолетовый, оранжевый) и снапнуты по
   * методике: оттенок и хрома держатся, светлота приводится к L≈0.60.
   *
   * Набор проверен валидатором (не на глаз) и проходит все пять проверок В ОБЕИХ темах:
   * полоса светлоты, порог хромы, различимость при дальтонизме (худшая пара ΔE 18.7
   * protan), порог обычного зрения (ΔE 19.9), контраст к поверхности ≥ 3:1.
   * Одна пара — циан/лайм — имеет низкую разделимость по тританопии (ΔE 4.4), поэтому
   * легенда и прямые подписи в графиках обязательны: цвет не единственный носитель смысла.
   *
   * Порядок фиксирован. Серия получает цвет по своей сущности, а не по месту в рейтинге:
   * фильтр, меняющий состав серий, не должен перекрашивать выживших.
   */
  --series-1: #0090AE;   /* циан бренда, снапнут в полосу */
  --series-2: #4B9700;   /* лайм корги, снапнут */
  --series-3: #A144F7;   /* фиолетовый пуделя */
  --series-4: #CF5700;   /* оранжевый, снапнут */

  /* Приглушённые варианты для заливок и фоновых сегментов. */
  --series-1-soft: color-mix(in srgb, var(--series-1) 26%, transparent);
  --series-2-soft: color-mix(in srgb, var(--series-2) 26%, transparent);
  --series-3-soft: color-mix(in srgb, var(--series-3) 26%, transparent);
  --series-4-soft: color-mix(in srgb, var(--series-4) 26%, transparent);

  /* «Прочее»: девятая серия никогда не получает сгенерированный оттенок — она
   * сворачивается сюда. Нейтральный, намеренно отступающий на задний план. */
  --series-other: var(--content-secondary);
}

/* --- типографика: одна шкала на все дашборды -------------------------------- */
body {
  font-family: var(--font-family-default);
  background: var(--bg);
  color: var(--ink);
}

/* Заголовки страниц набирались размерами от 26 до 28px вразнобой. Одна ступень шкалы. */
.dash-h1 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-2xl);
  color: var(--accent);
  letter-spacing: -0.02em;
}

/* --- карточка показателя ----------------------------------------------------- */
.dash-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
}
.dash-card .l {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-2);
}
.dash-card .v {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  letter-spacing: -0.02em;
  /* Цифры в карточках сравниваются взглядом по вертикали — только табличные. */
  font-variant-numeric: tabular-nums;
}
.dash-card .s {
  font-size: var(--font-size-xs);
  color: var(--muted);
  margin-top: var(--space-1);
  line-height: var(--font-line-height-xs-long);
}

/* --- панель с графиком -------------------------------------------------------- */
.dash-panel {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: var(--space-4);
}
.dash-panel h2 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-1);
}
/* Пояснение под заголовком: намеренно длинная строка, читается как текст, а не как подпись. */
.dash-panel .note {
  font-size: var(--font-size-xs);
  color: var(--muted);
  line-height: var(--font-line-height-xs-long);
  margin-bottom: var(--space-3);
  max-width: 92ch;
}

/* --- таблицы ------------------------------------------------------------------ */
.dash-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.dash-table thead th {
  position: sticky; top: 0;
  background: var(--thead-bg);
  text-align: left;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.dash-table td {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--td-border);
}
.dash-table tbody tr:hover { background: var(--row-hover); }
/* Числовые колонки: правый край и табличные цифры, иначе разряды не сравнить. */
.dash-table td.num, .dash-table th.num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* --- легенда графика ---------------------------------------------------------- */
/* Легенда присутствует всегда при двух и более сериях: цвет не должен быть
 * единственным признаком. Текст носит текстовые токены, а не цвет серии. */
.dash-legend {
  display: flex; gap: var(--space-4); flex-wrap: wrap;
  font-size: var(--font-size-xs);
  color: var(--muted);
  margin-bottom: var(--space-3);
}
.dash-legend i {
  display: inline-block; inline-size: 9px; block-size: 9px;
  border-radius: var(--radius-xs);
  margin-inline-end: var(--space-2);
  vertical-align: middle;
}