/* Компоненти статистики (docs/15-design.md, «Статистика»): плитки, стовпці в
   часі, горизонтальні смуги, підказка. Дані тихі: решта — сірим (--off),
   критичне — червоним (--crit). Синій тут не вживається: це не дія. */

/* Плитки з головним числом. */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 760px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile .v { font-size: 20px; } }
.tile { padding: 14px 16px; border-radius: 12px; background: var(--card); }
.tile .v { font-size: 26px; font-weight: 700; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.tile .k { margin-top: 2px; font-size: 13px; font-weight: 600; }
.tile .s { margin-top: 2px; font-size: 12px; color: var(--muted); }

/* Дві картки поруч; на телефоні одна під одною. */
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap); }
@media (max-width: 760px) { .grid2 { grid-template-columns: 1fr; } }

.chart-legend { display: flex; gap: 14px; margin-left: auto; font-size: 12px; font-weight: 400; color: var(--muted); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend .sw { width: 10px; height: 10px; border-radius: 3px; }
.sw.crit, .seg.crit { background: var(--crit); }
.sw.rest, .seg.rest { background: var(--off); }

/* Стовпці: між ними 2 px тла, верх заокруглений, вісь тиха. */
.chart { position: relative; }
.chart-scale { position: absolute; top: -2px; left: 0; font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }
.cols { display: flex; align-items: flex-end; gap: 2px; height: 160px; padding-top: 14px;
  border-bottom: 1px solid var(--line); }
.cols .col { flex: 1 1 0; min-width: 2px; height: 100%; display: flex; flex-direction: column-reverse;
  border-radius: 4px 4px 0 0; overflow: hidden; outline: none; cursor: default; }
.cols .col:hover, .cols .col:focus-visible { background: var(--fill); }
.cols .seg { display: block; flex: none; width: 100%; }
.cols-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11.5px;
  color: var(--muted); font-variant-numeric: tabular-nums; }
.chart-tip { position: absolute; top: 0; transform: translateX(-50%); padding: 6px 10px;
  border-radius: 8px; background: var(--raised); box-shadow: var(--shadow); font-size: 12.5px;
  white-space: nowrap; pointer-events: none; z-index: 2; }

/* Горизонтальні смуги: назва, доріжка, число прямо поруч. */
.hbars { display: flex; flex-direction: column; gap: 8px; }
.hbar { display: grid; grid-template-columns: minmax(0, 40%) 1fr 32px; align-items: center; gap: 10px; font-size: 13px; }
.hbar .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar .track { display: flex; height: 10px; gap: 2px; }
.hbar .seg { display: block; height: 100%; }
.hbar .seg:first-child { border-radius: 2px 0 0 2px; }
.hbar .seg:last-child { border-radius: 0 4px 4px 0; }
.hbar .seg[style*="width:0%"] { display: none; }
.hbar .n { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }

th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }