/* Project activity (stats.html), scoped under .stats-page.
   The page is a reading surface: open metric rows with hairline separators (the Open Row Rule),
   one pair of stat tiles reusing the record page's tile anatomy (surface-muted, 12px radius,
   Sora numerals), and no photography, thread separator, or memory mark, per
   docs/design/legacy-pages-round.md decision 4: stats is evidence about project activity, not a
   save or recall event. */

/* The one restrained reveal group: the two headline figures. */
.stats-page .stat-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin: 0 0 72px;
}
.stats-page .stat-tile {
  background: var(--surface-muted);
  border-radius: 12px;
  padding: 26px 28px;
}
.stats-page .stat-number {
  display: block;
  font-family: 'Sora', 'DM Sans', sans-serif;
  font-weight: 500;
  letter-spacing: -.03em;
  font-size: 44px;
  line-height: 1.08;
  font-variant-numeric: tabular-nums;
}
.stats-page .stat-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-top: 8px;
}
.stats-page .stat-note {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-top: 10px;
}

/* Open metric rows: label and muted note in the left column, the figure right-aligned in the
   site's Sora numeral treatment at the timeline-beat size. */
.stats-page .metric-rows {
  margin: 6px 0 0;
}
.stats-page .metric-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 32px;
  align-items: baseline;
  padding: 16px 0 18px;
  border-top: 1px solid var(--line);
}
.stats-page .metric-row dt {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.5;
  min-width: 0;
}
.stats-page .metric-row dt a {
  color: inherit;
}
.stats-page .metric-note {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 3px;
}
.stats-page .metric-row dd {
  margin: 0;
  font-family: 'Sora', 'DM Sans', sans-serif;
  font-weight: 500;
  letter-spacing: -.03em;
  font-size: 32px;
  line-height: 1.1;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.stats-page .metric-tail {
  font-size: 13px;
}

/* The closing pair of route links, stacked with air rather than boxed. */
.stats-page .stats-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: 26px;
}

@media (max-width: 900px) {
  .stats-page .stat-tiles {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 48px;
  }
}

@media (max-width: 700px) {
  .stats-page .stat-number {
    font-size: 36px;
  }
  .stats-page .metric-row {
    column-gap: 20px;
    padding: 14px 0 16px;
  }
  .stats-page .metric-row dd {
    font-size: 27px;
  }
}