/* ============================================================================
   СВОДКА — правки по замечаниям заказчика.

   Файл подключён после deos.css (см. index.html) и только уточняет то, что
   там уже названо. Своих цветов, отступов и скруглений здесь нет ни одного —
   всё берётся из переменных дизайн-кода. Голые числа встречаются лишь в
   порогах ширины окна: медиа-запрос переменных не понимает, и в deos.css
   пороги написаны так же.
   ========================================================================= */

/* ─────────────────────────────────────────── ОДИН РОСТ У ВСЕХ КАРТОЧЕК

   Заказчик просит одинаковые карточки, даже когда содержимому до низа
   далеко. Раньше сетка стояла на `align-items: start`: каждая карточка
   была ровно такой, сколько в неё влезло, и ряд выглядел щербатым — три
   разные высоты подряд.

   Одинаковый рост даёт `grid-auto-rows: 1fr`. У сетки, растущей по
   содержимому, доля `1fr` разрешается в высоту самого высокого ряда, и
   все ряды получают её же. Минимум у доли остаётся содержательным,
   поэтому обрезать содержимое такая запись не может — только добавить
   пустоту снизу, а её заказчик и просит.

   Растягивает карточки `align-items: stretch`. Само по себе растягивание
   карточки ничего не выравнивает внутри: содержимое сидит в `.card-pad`,
   и лишняя высота досталась бы шапке. Поэтому карточка выкладывается
   колонкой, а поле содержимого забирает остаток — содержимое остаётся
   прижатым к верху, а низ карточки просто пустеет.

   Ряды в сетке ещё и близки к квадрату: колонка сетки начинается от 340,
   а высокие карточки этого экрана — списки на восемь строк, то есть
   примерно столько же. Задавать пропорцию числом не нужно и вредно: на
   узком экране квадрат превратился бы в колодец. */
.dash-grid {
  align-items: stretch;
  grid-auto-rows: 1fr;
}
.dash-card { display: flex; flex-direction: column; }
.dash-card > .card-pad { flex: 1 1 auto; min-height: 0; }

/* Журнал изменений вынесен из сетки и идёт под ней во всю ширину: ряд
   сетки живёт по высоте самой высокой карточки, а раскрытый журнал
   вытянул бы весь ряд за собой. */
.dash-fold { margin-top: var(--sp-075); }

/* ────────────────────────────────────── ШИРОКАЯ КАРТОЧКА — ВЕЗДЕ ШИРОКАЯ

   Карточка со списком в пять колонок помечена «wide» и просит две клетки
   сетки. Включалось это только от 1180 точек ширины окна, а вторая клетка
   у сетки появляется куда раньше — и в промежутке список жался в одну
   узкую клетку. Колонки с именами там сжимались до нуля: ширины хватало
   ровно на дату, номер заказа и сумму, а клиент с дизайнером пропадали
   с экрана целиком, не оставив даже многоточия.

   Вторая клетка появляется, когда сетке достаётся 696 точек: две колонки
   по 340 и зазор между ними. Порогов два, потому что до 900 точек боковое
   меню прячется и те же 696 набираются раньше — на ширину меню. */
@media (min-width: 744px) and (max-width: 900px) {
  .dash-card.wide { grid-column: span 2; }
}
@media (min-width: 982px) {
  .dash-card.wide { grid-column: span 2; }
}

/* ────────────────────────────────────── ЛИНЕЙНЫЙ ГРАФИК БЕЗ КРУЖКОВ

   Точки с графика «Полгода» убраны в /kit/chart.js: картинка тянется по
   ширине при заданной высоте, масштаб по осям разный, и круг выходил
   приплюснутым овалом. Вместо точек — невидимые цели шириной в шаг.

   Цель едва заметно светлеет под курсором: подсказка появляется не сразу,
   и без этого непонятно, поймана строка или нет. Заливка в разметке стоит
   прозрачная, здесь она перекрывается — правило сильнее атрибута. */
.chart-hit { fill: transparent; transition: fill .12s; }
.chart-hit:hover { fill: var(--a-100); }

/* ─────────────────────────────────────── ПЕРЕКЛЮЧАТЕЛЬ СПОСОБА В КАРТОЧКЕ

   Тот же сегмент, что и везде в программе, — со своим отступом внутри
   кнопки. Способов четыре, а карточка сводки узкая: с обычным отступом
   ряд не помещался в самую узкую колонку сетки и выезжал за край. */
.dash-seg { margin-bottom: var(--sp-150); }
.dash-seg button { padding: 0 var(--sp-100); }

/* Строка, ведущая в другой раздел. Рука вместо стрелки — единственный
   признак, что строка нажимается; подчёркивать или красить её незачем,
   в этой таблице нажимаются все строки подряд. */
.dash-link { cursor: pointer; }

/* График занимает ту высоту, которая осталась в карточке. Карточки в
   ряду одной высоты, и картинка фиксированной высоты оставляла под
   собой пустое поле в половину карточки. */
.dash-card .chart { height: 100%; min-height: 132px; }
.dash-card > .card-pad:has(> .chart),
.dash-card > .card-pad:has(> .chart-axis) { display: flex; flex-direction: column; }
.dash-card .chart-axis { margin-top: auto; }

/* ────────────────────────────────────── СЕТКА ИЗ КВАДРАТОВ

   Карточки тянулись по высоте самой высокой в ряду, и низкая карточка
   превращалась в столб с пустотой внизу. Здесь размер задан пропорцией:
   обычная карточка — квадрат, широкая — два квадрата в ряд. Пропорция
   держится, пока клеток в ряду больше одной; на узком экране она
   снимается — квадрат в одну колонку превратился бы в колодец. */
.dash-grid { grid-auto-rows: auto; align-items: start; }

@media (min-width: 744px) {
  /* Журнал изменений в счёт не идёт: он сворачивается, и в свёрнутом
     виде это полоса заголовка, а не карточка. */
  .dash-card:not(.dash-fold) { aspect-ratio: 1 / 1; }
  .dash-card.wide:not(.dash-fold) { aspect-ratio: 2.6 / 1; }
  .dash-card:not(.dash-fold) > .card-pad { overflow: auto; }
}
/* Пропорция задаётся только карточке; журнал живёт по своему
   содержимому — свёрнутый занимает строку, раскрытый прокручивается. */
.dash-fold { aspect-ratio: auto; display: block; }
.dash-fold .dash-fold-body { max-height: 420px; overflow: auto; }

/* Подписи под столбиками. Раньше внизу шла голая полоса без чисел —
   найти на ней нужный день было нельзя. Числа стоят под каждым пятым
   столбцом и под сегодняшним; остальные места пустые, чтобы подписи не
   слипались. */
.chart-days {
  display: grid; margin-top: var(--sp-075);
  font-size: 10.5px; color: var(--ink3);
  font-variant-numeric: tabular-nums;
}
.chart-days > span { text-align: center; }
.chart-days > span.now { color: var(--acc-ink); font-weight: var(--fw-semi); }
.chart-days.wide > span { font-size: 11.5px; }

/* Узел линии — круг, потому что линия рисуется в точках экрана, а не в
   растянутых единицах. Под курсором узел подрастает: так видно, к какому
   месяцу относится подсказка. */
.chart-dot { fill: var(--acc-solid); transition: r .12s; }
.chart-dot.on { r: 6; }
.chart-live { width: 100%; height: 100%; display: block; }

/* Последние просчёты прокручиваются внутри карточки, как список
   просчётов: строк бывает больше, чем помещается. */
.dash-scroll { max-height: 100%; overflow: auto; }

/* В «Лучших» и «Размерах» главное — имя, а не длина полосы. Имя берёт
   всё свободное место и не обрезается на первом же слоге, полоса стоит
   узкой мерой рядом. */
.dash-card .chart-row {
  grid-template-columns: minmax(0, 1fr) 92px auto;
}
.dash-card .chart-row-t { color: var(--ink); white-space: normal; }
.dash-card .chart-row-bar { height: 6px; }