/*
 * stats.css — page-specific styles for stats.html (SPEC.md §7.7, lines
 * 1074-1119). Layered on top of css/base.css (.page/.app-header/.card/etc.)
 * — only rules that don't belong in the shared stylesheet live here.
 */

.stats-empty {
  margin-top: 18px;
  font-size: 16px;
  color: var(--color-text-secondary);
}

/* Week/Month row: two equal-weight cards, SPEC §7.7 point 3 "Week/Month row". */
.stats-period-row {
  display: flex;
  margin-top: 18px;
  gap: 0;
}

.stats-period-card {
  flex: 1;
  padding: 14px;
}

.stats-period-card--left {
  margin-right: 6px;
}

.stats-period-card--right {
  margin-left: 6px;
}

.stats-period-card__label {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.stats-period-card__sessions {
  margin-top: 8px;
  font-size: 18px;
  font-weight: bold;
  color: var(--color-text-primary);
}

.stats-period-card__distance {
  margin-top: 4px;
  font-size: 15px;
  color: var(--color-aqua);
}

.stats-period-card__pace {
  margin-top: 2px;
  font-size: 14px;
  color: var(--color-text-secondary);
}

/* Streak card, SPEC §7.7 point 3 "Streak card". */
.stats-streak-card {
  margin-top: 12px;
  display: flex;
  align-items: center;
}

.stats-streak-card__value {
  font-size: 36px;
  font-weight: bold;
  color: var(--color-text-primary);
}

.stats-streak-card__label {
  flex: 1;
  margin-left: 12px;
  font-size: 15px;
  color: var(--color-text-secondary);
}

/* Records card, SPEC §7.7 point 3 "Records card". */
.stats-records-card {
  margin-top: 12px;
}

.stats-records-card__title {
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.stats-record-row {
  display: flex;
  align-items: baseline;
  margin-top: 12px;
}

.stats-record-row + .stats-record-row {
  margin-top: 10px;
}

.stats-record-row__label {
  flex: 1;
  font-size: 15px;
  color: var(--color-text-secondary);
}

.stats-record-row__value {
  font-size: 16px;
  font-weight: bold;
  color: var(--color-text-primary);
}

.stats-record-row__value--gold {
  color: var(--color-gold);
}

.stats-record-row__date {
  margin-top: 2px;
  text-align: right;
  font-size: 13px;
  color: var(--color-text-muted);
}

/* Pace evolution / weekly distance chart cards. */
.stats-chart-card {
  margin-top: 12px;
}

.stats-chart-card:last-child {
  margin-bottom: 8px;
}

.stats-chart-card__title {
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.stats-chart-card__canvas {
  display: block;
  width: 100%;
  margin-top: 10px;
}

.stats-chart-card__canvas--line {
  height: 170px;
}

.stats-chart-card__canvas--bar {
  height: 190px;
}

.stats-chart-card__caption {
  margin-top: 6px;
  font-size: 13px;
  color: var(--color-text-muted);
}