/* F440 — итог подхода. Источник: «Экран итога сессии - F440.dc.html».

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

.sum-body { display: grid; gap: var(--sp-4); align-items: start }
@media (min-width: 1000px) { .sum-body { grid-template-columns: minmax(0, 1fr) 340px } }
.sum-main, .sum-aside { display: grid; gap: var(--sp-3); align-content: start; min-width: 0 }

.sum-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-4);
}
.sum-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-3) }
.sum-card-head .t-num { font-size: 12px; color: var(--muted-3) }
.sum-card-head .t-num.bad { color: var(--bad-ink) }
.sum-note { font-size: var(--fs-small); color: var(--muted); margin: var(--sp-3) 0 0 }

.sum-verdict .t-label { display: block; margin-bottom: var(--sp-2) }
.sum-verdict h2 { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -.01em; margin: 0 0 var(--sp-2) }
.sum-verdict p { font-size: 14px; color: var(--muted); margin: 0 }
@media (min-width: 1000px) { .sum-verdict h2 { font-size: 24px; line-height: 1.25 } }
.sum-empty p { font-size: var(--fs-small); color: var(--muted); margin: 0 }

.sum-legend { font-size: 11px; color: var(--muted-3); display: inline-flex; align-items: center; gap: 5px }
.sum-legend i { display: inline-block }
.lg-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-ink) }
.lg-err { width: 2px; height: 11px; background: var(--accent-hi) }
.lg-tr { width: 12px; height: 0; border-top: 2px dashed var(--line-2) }

/* ── Графики. Цвета живут здесь, а не в атрибутах: одна семантика
      на все три и переключение темы без перерисовки. ── */
.ch { display: block; width: 100%; height: auto }
.ch-grid { stroke: var(--panel-2); stroke-width: 1 }
.ch-dash { stroke-dasharray: 5 5 }
.ch-axis { stroke: var(--panel-3); stroke-width: 2 }
.ch-trend { fill: none; stroke: var(--line-2); stroke-width: 2; stroke-dasharray: 7 6 }
/* Усы погрешности — самая важная деталь экрана: без них график читался
   бы как «то лучше, то хуже», и выводы делались бы из шума. */
.ch-err { stroke: var(--accent-hi); stroke-width: 3; stroke-linecap: round }
.ch-dot { fill: var(--accent-ink) }
.ch-dot.is-now { stroke: var(--panel); stroke-width: 3 }
.ch-lbl { font-family: var(--font-mono); font-size: 18px; fill: var(--muted-3) }
.ch-lbl.is-now { fill: var(--accent-ink) }
.ch-lbl.is-on { fill: var(--brass) }

.bs-zero { stroke: var(--line-2); stroke-width: 2 }
.bs-bar { fill: var(--line-2) }
.bs-bar.is-on { fill: var(--brass) }

.fa-bar { fill: var(--accent) }
.fa-bar.is-warn { fill: var(--brass) }
.fa-bar.is-bad { fill: var(--bad) }

.sum-pair { display: grid; gap: var(--sp-3) }
@media (min-width: 760px) { .sum-pair { grid-template-columns: 1fr 1fr } }

/* ── Полоса «до замера» ──────────────────────────────────────── */
.sum-bar { height: 6px; background: var(--panel-3); border-radius: var(--r-pill); overflow: hidden }
.sum-bar i { display: block; height: 100%; background: var(--accent); transition: width var(--t-bar) var(--ease) }
.sum-bar-x { display: flex; justify-content: space-between; gap: var(--sp-2); margin-top: 7px;
  font-size: 12px; color: var(--muted-3) }

/* ── Сухие числа ─────────────────────────────────────────────── */
.sum-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: var(--sp-2) }
.sum-num { background: var(--stage); border-radius: var(--r-card); padding: 11px 12px }
.sum-num .t-num { font-size: 21px; font-weight: 500 }
.sum-num div + div { font-size: 11px; color: var(--muted-3); margin-top: 2px }

/* ── Правая колонка ──────────────────────────────────────────── */
.sum-next p { font-size: var(--fs-small); color: var(--muted); margin: var(--sp-2) 0 var(--sp-3) }
.sum-next .btn { width: 100% }

/* Полоска дней: три состояния, а не два. Засчитанный день — заливка,
   короткий подход — только обводка, пропуск — пустая ячейка. */
.sum-days { display: flex; gap: 4px; margin: var(--sp-2) 0 }
.sum-days i { flex: 1; height: 16px; border-radius: 4px; background: var(--panel-3) }
.sum-days i.d-full { background: var(--accent) }
.sum-days i.d-short { background: transparent; border: 1px solid var(--brass) }

.sum-others { display: grid; gap: 1px; background: var(--line); border-radius: var(--r-card); overflow: hidden; margin-top: var(--sp-2) }
.sum-other { display: flex; justify-content: space-between; gap: var(--sp-2); padding: 9px 11px;
  background: var(--stage); font-size: var(--fs-small) }
.sum-other .t-num { color: var(--muted-3); font-size: 12px }

.sum-exits { display: grid; gap: var(--sp-2) }