/* ACTIVITIES — /activities on aesv.io.
   Chess + Strava receipts. Inherits .subpage shell from foundation.css. */

.activities {
  overflow-wrap: anywhere;
}

/* Section + h2 styles live in foundation under :where(.work-section, ...). */

/* Empty state — chrome lives on the .empty-state tile primitive in
   foundation.css. This rule only sets typography + padding. */
.empty-state {
  --tile-shadow: var(--shadow-sm);
  font-family: var(--font-display);
  color: var(--ink-mute);
  margin: 0;
  padding: var(--s-3);
}

/* ---------- Last victory + playthrough ---------- */
.lv-grid {
  --tile-border: var(--border-thick);
  --tile-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: minmax(220px, 0.55fr) 1fr;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-3);
}
.lv-board {
  /* Reset inherited --tile-* from parent .lv-grid (the chess board
     is a regular card inside the hero card; shouldn't borrow its
     thick border + heavy shadow via custom-property cascade). */
  --tile-border: var(--border-thin);
  --tile-shadow: var(--shadow-md);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.lv-board svg {
  display: block;
  width: 100%;
  height: 100%;
}
.lv-meta {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}
.lv-pair {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
  overflow-wrap: anywhere;
}
.lv-line {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  color: var(--ink-mute);
  margin: 0;
  text-transform: lowercase;
  letter-spacing: 0.04em;
}
.lv-line strong {
  color: var(--ink);
  font-weight: 700;
}
.lv-replay-status {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  margin: 0;
  min-height: 1em;
}
@media (max-width: 720px) {
  .lv-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Strava — same chess-tile shape (.lv-grid). The map sits
   in the .lv-board square on the left; stats + profile CTA sit in
   .lv-meta on the right. .strava-stats is a small dl grid. */
.strava-map {
  display: flex;
  align-items: center;
  justify-content: center;
}
.strava-route {
  width: 100%;
  height: 100%;
  display: block;
}
.strava-empty {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.strava-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 0;
}
.strava-stats > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.strava-stats dt {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0;
}
.strava-stats dd {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1;
  color: var(--ink);
  margin: 0;
}

/* ---------- Wrist (≤280px) — stack strava stats into one column so
   the numbers stay legible on the tiniest screens. Type sizing rides
   the html font-size knob in foundation.css. */
@media (max-width: 280px) {
  .strava-stats {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}