/* dashboard.css — проектный слой поверх стиля «тёмный дата-неон» (05-neon-data).
 *
 * Общие файлы (tokens.css, glass.css, product.css, style.css, extra.css) —
 * на чтение, менять их нельзя (правило кита: переопределения только в своём
 * корневом классе). Здесь — только то немногое, чего в ките нет, а этому
 * конкретному экрану нужно: сноска графика без сокращения .spark и вторая
 * пара кнопок решения по каналу, которых в жанре «мониторинг» просто не было.
 */

/* Наш столбчатый график (build_daily_chart_svg) — не спарклайн из style.css
 * (.spark задаёт фиксированную высоту 40px под линию), а самостоятельный
 * SVG с собственной viewBox. Растягиваем по ширине контейнера, оставляя
 * высоту пропорциональной — иначе на узком экране подписи дат наезжают. */
.nd-chart svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Системный чекбокс («показывать «мимо»») в неон-теме рисуется браузером
 * светлым квадратом со своим скруглением и выбивается из тёмной темы —
 * ровно та мелочь, что названа в STYLES.md. accent-color — самый дешёвый
 * способ подкрасить нативный чекбокс без полной пересборки на appearance:none:
 * фокус-кольцо и галочка остаются штатными, меняется только тон. */
input[type="checkbox"] {
  accent-color: var(--accent);
}

/* Кнопки решения по каналу-кандидату: тихие, как .btn-quiet из extra.css
 * (в списке из полусотни строк десять ярких кнопок на каждой превращают
 * таблицу в панель управления), но их две и с разным смыслом — тихий
 * вариант в ките один на все случаи и цвета не выбирает сам. */
.btn-decide {
  appearance: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: none;
  border-radius: var(--radius-xs);
  padding: 5px 9px;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.btn-decide.decide-yes {
  color: var(--up);
  border: 1px solid color-mix(in srgb, var(--up) 40%, transparent);
}
.btn-decide.decide-yes:hover {
  background: color-mix(in srgb, var(--up) 14%, transparent);
}
.btn-decide.decide-no {
  color: var(--down);
  border: 1px solid color-mix(in srgb, var(--down) 40%, transparent);
}
.btn-decide.decide-no:hover {
  background: color-mix(in srgb, var(--down) 14%, transparent);
}
.btn-decide:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}