/* stats.css — статистика: сегментер периода, метрики, график фокуса, тепловая карта. */

/* Сегментированный переключатель периода */
.segmented {
  display: inline-flex;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  padding: 3px;
  background: var(--clr-surface-2);
}
.seg {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--clr-text-2);
  font-weight: var(--font-medium);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.seg--on {
  background: var(--clr-surface);
  color: var(--clr-primary);
  box-shadow: var(--shadow-sm);
}

/* Метрики */
.stats-row--wide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.stat__hint {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--clr-text-3);
}

/* График фокуса */
.focus-chart { width: 100%; max-width: 600px; height: auto; }
.focus-chart .axis { stroke: var(--clr-border); stroke-width: 1; }
.focus-chart .bar { fill: var(--clr-primary); transition: fill var(--transition-fast); }
.focus-chart .bar:hover { fill: var(--clr-primary-dark, var(--clr-primary)); }
.focus-chart .bar-val { fill: var(--clr-text-3); font-size: 10px; }
.focus-chart .bar-label { fill: var(--clr-text-3); font-size: 10px; }

/* Тепловая карта */
.heatmap-wrap { overflow-x: auto; }
.heatmap {
  border-collapse: separate;
  border-spacing: 2px;
}
.heat-row-label {
  font-size: var(--text-xs);
  color: var(--clr-text-3);
  text-align: right;
  padding-right: var(--space-2);
  font-weight: var(--font-medium);
  white-space: nowrap;
}
.heat-cell {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--clr-surface-3);
}
.heat-hours {
  display: flex;
  justify-content: space-between;
  max-width: 380px;
  margin: var(--space-2) 0 0 36px;
  font-size: var(--text-xs);
  color: var(--clr-text-3);
}

@media (prefers-reduced-motion: reduce) {
  .focus-chart .bar, .seg { transition: none; }
}