/* Графики (js/common/charts.js). Цвета серий — токены темы: --viz-1 хорошо (зелёный),
   --viz-2 плохо (красный), --viz-soft — дополнительная величина, --viz-0 — нейтральное; команды — --t1/--t2. */

.viz-card {
  padding: 16px 18px 18px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  min-width: 0;
}
.viz-card__title { font: 600 15px var(--fb); color: var(--hi); }
.viz-card__sub { margin: 2px 0 12px; font-size: 12.5px; color: var(--dim); }
.viz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-bottom: 16px; }
.viz-empty { padding: 18px 0; color: var(--dim); font-size: 13px; }

/* Подсказка */
.viz-tip {
  position: fixed; z-index: 500; max-width: 280px; pointer-events: none;
  padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--hi); color: var(--bg); font-size: 12.5px; line-height: 1.45;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.viz-tip b { font-weight: 700; }
[data-tip]:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* Легенда */
.viz-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 10px; font-size: 12.5px; color: var(--text); }
.viz-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.viz-legend__item i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* Плитки показателей */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi {
  padding: 14px 16px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0;
}
.kpi__label { font-size: 12.5px; color: var(--dim); }
.kpi__value { margin-top: 4px; font: 600 24px/1.15 var(--fb); color: var(--hi); font-variant-numeric: normal; white-space: nowrap; }
.kpi__sub { margin-top: 4px; font-size: 12.5px; color: var(--text); }
.kpi__sub .is-win { color: var(--win); font-weight: 600; }
.kpi__sub .is-loss { color: var(--loss); font-weight: 600; }

/* Горизонтальные столбцы */
.viz-bars { display: flex; flex-direction: column; gap: 6px; }
.viz-bars__row {
  display: grid; grid-template-columns: minmax(90px, 34%) 1fr; align-items: center; gap: 10px;
  padding: 2px 4px; margin: 0 -4px; border-radius: var(--radius-sm); cursor: default;
}
.viz-bars__row:hover { background: var(--hover); }
.viz-bars__label { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viz-bars__track { display: flex; align-items: center; gap: 2px; min-width: 0; height: 16px; }
.viz-bars__seg { height: 14px; min-width: 2px; }
.viz-bars__seg:last-of-type { border-radius: 0 4px 4px 0; }
.viz-bars__value { margin-left: 6px; font-size: 12.5px; font-weight: 600; color: var(--hi); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Вертикальные столбцы */
.viz-cols { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.viz-cols__axis {
  height: var(--plot-h); display: flex; flex-direction: column; justify-content: space-between;
  font-size: 11.5px; color: var(--dim); text-align: right; font-variant-numeric: tabular-nums;
}
.viz-cols__axis span { transform: translateY(-50%); }
.viz-cols__axis span:last-child { transform: translateY(50%); }
.viz-cols__plot {
  position: relative; height: var(--plot-h); display: flex; align-items: flex-end; gap: 6px;
  border-bottom: 1px solid var(--line); margin-bottom: 26px;
}
.viz-cols__grid { position: absolute; left: 0; right: 0; height: 1px; background: var(--line2); }
.viz-cols__col {
  position: relative; flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; cursor: default; border-radius: var(--radius-sm);
}
.viz-cols__col:hover { background: var(--hover); }
.viz-cols__cap { font-size: 12px; font-weight: 600; color: var(--hi); margin-bottom: 3px; }
.viz-cols__stack { display: flex; flex-direction: column-reverse; gap: 2px; width: min(24px, 70%); }
.viz-cols__seg { min-height: 2px; }
.viz-cols__seg:last-child { border-radius: 4px 4px 0 0; }
.viz-cols__label {
  position: absolute; top: 100%; margin-top: 6px; left: 50%; transform: translateX(-50%);
  font-size: 11.5px; color: var(--dim); white-space: nowrap;
}

/* Линия счёта */
.viz-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 14px; }
.viz-score b { font: 700 19px var(--fb); font-variant-numeric: tabular-nums; }
.viz-score span { font-size: 13px; color: var(--dim); }
.viz-score .is-win, .viz-split__pct.is-win, .viz-avg__dv.is-win { color: var(--viz-1); }
.viz-score .is-loss, .viz-split__pct.is-loss, .viz-avg__dv.is-loss { color: var(--viz-2); }
.viz-line { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding-right: 34px; }
.viz-line__axis { position: relative; height: var(--plot-h); min-width: 22px; font-size: 11.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.viz-line__axis span { position: absolute; right: 0; transform: translateY(-50%); }
.viz-line__plot { position: relative; height: var(--plot-h); margin: 0 6px 24px; }
.viz-line__grid { position: absolute; left: -6px; right: -6px; height: 1px; background: var(--line2); }
.viz-line__grid.is-zero { background: none; border-top: 1px dashed var(--dim); opacity: .6; }
.viz-line__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.viz-line__plot line { stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke: var(--dim); }
.viz-line__plot line.is-win { stroke: var(--viz-1); }
.viz-line__plot line.is-loss { stroke: var(--viz-2); }
.viz-line__dot {
  position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; padding: 0; cursor: pointer;
  border: 2px solid var(--panel); border-radius: 50%; background: var(--dim); transition: transform .1s;
}
.viz-line__dot::before { content: ''; position: absolute; inset: -6px; }   /* цель для мыши больше точки */
.viz-line__dot:hover { transform: scale(1.4); }
.viz-line__dot.is-win { background: var(--viz-1); }
.viz-line__dot.is-loss { background: var(--viz-2); }
.viz-line__x { position: absolute; top: 100%; margin-top: 8px; transform: translateX(-50%); font-size: 11.5px; color: var(--dim); }
.viz-line__end { position: absolute; margin-left: 12px; transform: translateY(-50%); font: 700 13px var(--fb); color: var(--hi); }

/* Линия по времени */
.viz-tline { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.viz-tline__axis { position: relative; height: var(--plot-h); min-width: 44px; font-size: 11.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.viz-tline__axis span { position: absolute; right: 0; transform: translateY(-50%); white-space: nowrap; }
.viz-tline__plot { position: relative; height: var(--plot-h); margin-bottom: 24px; cursor: crosshair; touch-action: pan-y; }
.viz-tline__grid { position: absolute; left: 0; right: 0; height: 1px; background: var(--line2); }
.viz-tline__mark { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--line); }
.viz-tline__mark span {
  position: absolute; top: 0; left: 4px; padding: 1px 6px; border-radius: 4px;
  background: var(--panel2); font-size: 11px; color: var(--dim); white-space: nowrap;
}
.viz-tline__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.viz-tline__path { fill: none; stroke: var(--acc); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.viz-tline__area { fill: var(--acc-soft); stroke: none; }
.viz-tline__cross { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--dim); opacity: .6; pointer-events: none; }
.viz-tline__dot {
  position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: var(--acc); border: 2px solid var(--panel); pointer-events: none;
}
.viz-tline__read {
  position: absolute; top: 6px; margin-left: 10px; padding: 6px 9px; border-radius: var(--radius-sm);
  background: var(--hi); color: var(--bg); font-size: 12.5px; line-height: 1.4; white-space: nowrap; pointer-events: none; z-index: 2;
}
.viz-tline__read.is-left { transform: translateX(calc(-100% - 20px)); }
.viz-tline__read span { opacity: .75; }
.viz-tline__x { position: absolute; top: 100%; margin-top: 6px; font-size: 11.5px; color: var(--dim); }
.viz-tline__x.is-end { transform: translateX(-100%); }

/* Доля побед */
.viz-split__row { grid-template-columns: minmax(90px, 34%) 1fr 42px; }
.viz-split__track { display: flex; gap: 2px; height: 20px; min-width: 0; }
.viz-split__seg {
  display: flex; align-items: center; padding: 0 7px; min-width: 18px; overflow: hidden;
  font-size: 12px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums;
}
.viz-split__seg:first-child { border-radius: 4px 0 0 4px; }
.viz-split__seg:nth-last-child(2) { border-radius: 0 4px 4px 0; justify-content: flex-end; }
.viz-split__seg:first-child:nth-last-child(2) { border-radius: 4px; justify-content: flex-start; }
.viz-split__seg.is-win { background: var(--viz-1); }
.viz-split__seg.is-loss { background: var(--viz-2); }
.viz-split__seg.is-draw { background: var(--viz-0); color: var(--hi); justify-content: center; }
.viz-split__pct { text-align: right; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Относительно среднего */
.viz-avg__row { grid-template-columns: minmax(90px, 30%) 1fr 44px 48px; }
.viz-avg__bar { position: relative; display: flex; align-items: center; gap: 2px; height: 20px; min-width: 0; }
.viz-avg__main { height: 100%; min-width: 2px; border-radius: 4px 0 0 4px; }
.viz-avg__main:nth-last-child(2) { border-radius: 4px; }   /* засвета нет — скругляем с обеих сторон */
.viz-avg__main.is-win { background: var(--viz-1); }
.viz-avg__main.is-loss { background: var(--viz-2); }
.viz-avg__extra { height: 100%; background: var(--viz-soft); border-radius: 0 4px 4px 0; }
.viz-avg__val { text-align: right; font-size: 12.5px; font-weight: 600; color: var(--hi); white-space: nowrap; font-variant-numeric: tabular-nums; }
.viz-avg__mark, .viz-avg__key { background: var(--hi); border-radius: 1px; }
.viz-avg__mark { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; }
.viz-legend__item i.viz-avg__key { width: 2px; height: 12px; }
.viz-legend b { color: var(--hi); font-variant-numeric: tabular-nums; }
.viz-avg__dv { text-align: right; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Сравнение команд */
.viz-compare__teams { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13.5px; font-weight: 700; color: var(--hi); }
.viz-compare__teams i { display: inline-block; width: 10px; height: 10px; margin: 0 6px; border-radius: 3px; vertical-align: -1px; }
.viz-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 4px 36px; }
.viz-compare__row { padding: 4px 6px 6px; margin: 0 -6px; border-radius: var(--radius-sm); cursor: default; }
.viz-compare__row:hover { background: var(--hover); }
.viz-compare__head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.viz-compare__label { text-align: center; font-size: 12.5px; color: var(--dim); white-space: nowrap; }
.viz-compare__val { font-size: 13px; font-weight: 600; color: var(--dim); font-variant-numeric: tabular-nums; }
.viz-compare__val.is-b { text-align: right; }
.viz-compare__row.is-lead-a .viz-compare__val.is-a,
.viz-compare__row.is-lead-b .viz-compare__val.is-b { color: var(--hi); font-weight: 800; }
.viz-compare__bar { position: relative; display: flex; gap: 2px; height: 10px; }
.viz-compare__bar::after {   /* черта 50/50 */
  content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--hi); opacity: .5;
}
.viz-compare__bar i { display: block; height: 100%; min-width: 2px; }
.viz-compare__bar i.is-a { background: var(--viz-1); border-radius: 4px 0 0 4px; }
.viz-compare__bar i.is-b { background: var(--viz-2); border-radius: 0 4px 4px 0; }
.viz-compare__bar i:only-child { border-radius: 4px; }

@media (max-width: 560px) {
  .viz-grid { grid-template-columns: minmax(0, 1fr); }
}