/* 08-pages/_replays.css — public replay index and show pages. */
.p-replays {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.p-replays__frontmatter {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-block-start: var(--space-xl);
  padding-block: var(--space-lg);
  border-block: var(--bw) dashed var(--line-strong);
}

.p-replays__title {
  color: var(--text-bright);
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: 0;
}

.p-replays__lede,
.p-replays__tagline,
.p-replays__meta,
.p-replays__backlink {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.p-replays__tagline {
  max-width: var(--measure-wide);
  color: var(--text);
  font-size: var(--text-lg);
  line-height: var(--lh-copy);
}

.p-replays__backlink { width: fit-content; }
.p-replays__backlink::before { content: "◂ "; color: var(--accent); }

.p-replays__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

/* The sort bar and the card list stack as one browser block. */
.p-replays__browser {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* A toolbar of sort keys above the list: one button per measure the card already shows.
   The pressed key reads amber and carries a direction arrow; pressing it again flips the
   arrow. Wraps on narrow viewports. */
.p-replays__sortbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-xs);
}

.p-replays__sort-label {
  margin-inline-end: var(--space-2xs);
  color: var(--text-dim);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

.p-replays__sort-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-2xs) var(--space-sm);
  border: var(--bw) solid var(--line);
  background: var(--surface-raised);
  color: var(--text-muted);
  font: inherit;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.p-replays__sort-button:hover,
.p-replays__sort-button:focus-visible {
  border-color: var(--accent);
  color: var(--text-bright);
}

.p-replays__sort-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.p-replays__sort-button.is-active {
  border-color: var(--accent);
  color: var(--accent);
}

.p-replays__sort-arrow {
  min-width: 0.75em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* A single-column grid: each row is a block-level grid item that fills the full
   body width (a flex column here would leave the row grids collapsed to their
   content width). */
.p-replays__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  width: 100%;
  max-width: none; /* override the ul/ol reading-measure cap in 04-elements */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each row pairs a bordered dashboard card — a one-line eyebrow of measured stats
   over the run's title, tagline, and meta — filling the wide two-thirds column, with a separate
   ambient screencast embed under terminal chrome in the remaining one-third sidebar
   to its right. Stacks vertically on narrow viewports. */
.p-replays__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  width: 100%;
  min-width: 0;
}

.p-replays__card {
  border: var(--bw) solid var(--line);
  background: var(--surface-raised);
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.p-replays__card:hover,
.p-replays__card:focus-within {
  border-color: var(--accent);
}

/* The title bar is a real terminal chrome strip: it sits *above* the screencast in
   normal flow, and the 16/9 ratio belongs to the video below it, not to the pair. */
.p-replays__card-media {
  position: relative;
  display: flex;
  flex-direction: column;
  align-self: start;
  border: var(--bw) solid var(--line);
  background: var(--surface-sunken);
  overflow: hidden;
  cursor: zoom-in;
  text-decoration: none;
  transition: border-color 0.2s ease;
}

.p-replays__card-media:hover {
  border-color: var(--accent);
}

/* Stacked single-column (narrow viewports): the screencast leads, the card follows.
   Side by side from 52rem, the card takes the wide column on the left again. */
.p-replays__card { order: 2; }
.p-replays__card-media { order: 1; }

@media (min-width: 52rem) {
  .p-replays__item { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .p-replays__card { order: 1; }
  .p-replays__card-media { order: 2; }
}

.p-replays__card-media:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.p-replays__card-chrome {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-md);
  background: color-mix(in oklab, var(--panel) 82%, transparent);
  border-block-end: var(--bw) solid var(--line);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.p-replays__card-mark { color: var(--accent); }

.p-replays__card-chrome-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-replays__card-expand { color: var(--text-dim); }

.p-replays__card-video {
  display: block;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--surface-sunken);
}

.p-replays__card-pending {
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  color: var(--text-dim);
}

.p-replays__card-pending-glyph { font-size: var(--text-2xl); }

.p-replays__card-pending-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

.p-replays__card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
}

.p-replays__card-title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.p-replays__card-title-link {
  color: var(--text-bright);
  text-decoration: none;
}

.p-replays__card-title-link:hover,
.p-replays__card-title-link:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

.p-replays__card-tagline {
  margin: 0;
  margin-block-end: auto;
  color: var(--text);
  font-size: var(--text-lg);
  line-height: var(--lh-copy);
}

/* The authored Feature/Build summaries, sitting under the tagline: the section name in a
   left gutter, its prose indented beside it. Dimmer than the tagline so the card keeps one
   dominant intro line; the list takes over the auto end-margin that pushes the meta line to
   the bottom of the card. */
.p-replays__card-summaries {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--space-sm);
  row-gap: var(--space-xs);
  margin: 0;
  margin-block-end: auto;
}

.p-replays__card-summary-label {
  color: var(--text);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  line-height: var(--lh-copy);
  text-transform: uppercase;
}

.p-replays__card-summary {
  margin: 0;
  color: var(--text-dim);
  line-height: var(--lh-copy);
}

.p-replays__card-tagline:has(+ .p-replays__card-summaries) {
  margin-block-end: var(--space-xs);
}

.p-replays__card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  margin-block-start: var(--space-sm);
  color: var(--text);
  font-size: var(--text-sm);
}

/* The dimmed second intro line carrying the published-corpus totals; the measures
   are separated by space rather than punctuation, and each figure is lit amber. */
.p-replays__intro-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-lg);
  margin: 0;
  max-width: var(--measure-wide);
  color: var(--text-dim);
  line-height: var(--lh-copy);
}

.p-replays__intro-figure {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* The show page's measured shape bracketing the screencast uses the shared c-figures
   component (06-components/_figures.css) — the lede block above the video, the detail
   below — the same figure groups as the /stats corpus block. */

/* The eyebrow above the card title: the run's measured shape on one line —
   milestones, sprints, agents, peak context, space-separated. Figures read amber;
   a peak-context figure under the light-run threshold reads green instead. */
.p-replays__card-eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  margin: 0;
  color: var(--text-dim);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

.p-replays__card-eyebrow-value {
  color: var(--accent);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.p-replays__card-eyebrow-stat.is-good .p-replays__card-eyebrow-value { color: var(--good); }

/* A duration keeps its lowercase h/m/s units against the eyebrow's uppercasing. */
.p-replays__card-eyebrow-stat--exact { text-transform: none; }

.p-replays__media,
.p-replays__description,
.p-replays__prose {
  max-width: var(--measure-wide);
}

/* The intro paragraphs above the prose grid read in the same lede typography as a
   milestone's feature paragraph. */
.p-replays__description {
  max-width: var(--measure);
  font-size: var(--text-xl);
}

.p-replays__prose-summary {
  color: var(--text-bright);
  font-weight: var(--fw-bold);
}

/* ── The build/feature grid: two parallel readings of one run, per unit of its
   decomposition. Mobile-first single column — DOM order is label, build, feature per row,
   so a narrow viewport collapses by unit, never into the whole build article then the
   whole feature article. Two columns at the wide breakpoint. */
.p-replays__prose--grid {
  max-width: none; /* the two-column grid is wider than the single-column reading measure */
}

.p-replays__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

/* Each column heading sits in the run-level first row, directly above that column's overview
   cell: the uppercase name over its explanatory question, closed by a rule. In the collapsed
   single column the pairs interleave — feature head, feature cell, build head, build cell —
   so the headings now show at every width. */
.p-replays__grid-colhead {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-bottom: var(--space-xs);
  border-bottom: var(--bw) solid var(--line);
}

.p-replays__grid-note {
  margin: 0;
  color: var(--text-dim);
  font-size: var(--text-sm);
}

.p-replays__grid-col {
  margin: 0;
  color: var(--text-dim);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

/* Scoped under .c-prose to out-specify the `.c-prose h2` top margin, which would otherwise
   push the column heads away from the pre-header above them. */
.c-prose .p-replays__grid-col {
  margin-top: 0;
}

.p-replays__grid-row {
  display: grid;
  grid-template-columns: 1fr;
  /* Row gap gives stacked label/feature/build reasonable air when the row collapses to one
     column; the wider column gap only bites in the two-column layout. */
  gap: var(--space-lg) var(--space-xl);
  align-items: start;
}

.p-replays__grid-label {
  margin: 0;
  color: var(--text-bright);
}

.p-replays__grid-header {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-xs);
}

/* The small lit amber label over a section: the "Milestone N" counter over each milestone
   heading, and the walkthrough pre-header over the run-level row. */
.p-replays__grid-eyebrow {
  margin: 0;
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

/* The walkthrough pre-header leads the grid section as a plain block child: the c-prose
   child-spacing rule puts the grid a small step below it. Its own top margin adds to the
   page-section gap so the space above it matches the space between the overview cells and
   the first milestone's rule (grid gap + milestone top margin). */
.p-replays__grid-eyebrow--replay {
  margin-block-start: var(--space-xl);
}

/* Scoped under .c-prose so it out-specifies the `.c-prose h3` default that would otherwise
   inject its own top margin; both unit headings read bright — milestone a size above sprint,
   sprint a size above body — so the hierarchy comes from scale, not color. Spaced by the row,
   not by the heading's own margin. */
.c-prose .p-replays__grid-label--milestone {
  margin-top: 0;
  color: var(--text-bright);
  font-size: var(--text-2xl);
  line-height: var(--lh-tight);
}

.p-replays__grid-label--sprint {
  color: var(--text-bright);
  font-size: var(--text-xl);
  line-height: var(--lh-tight);
}

/* Milestone and sprint are told apart by treatment, not indentation: a milestone reads as a
   section header — a full-width top rule and extra space above, its larger accent label —
   and a sprint as a lighter, smaller label beneath it. Neither row is indented and the
   feature side carries no vertical rule. */
.p-replays__grid-row--milestone {
  margin-top: var(--space-lg);
  padding-top: var(--space-xl);
  border-top: var(--bw) solid var(--line-strong);
}

.p-replays__grid-cell {
  min-width: 0;
}

/* Reasonable rhythm between a cell's paragraphs; the first sits flush to the top. */
.p-replays__grid-cell > p {
  margin: 0;
}

.p-replays__grid-cell > p + p {
  margin-top: var(--space-md);
}

/* The two cells are unequal readings: feature is the primary body, a step larger than base;
   build is the secondary reading at every width — a step smaller, dimmer, with a blockquote
   rule down its inside edge. The rule is reserved for build alone; feature carries none. */
.p-replays__grid-cell--feature {
  font-size: var(--text-lg);
}

.p-replays__grid-cell--build {
  border-inline-start: var(--bw) solid var(--line-strong);
  padding-inline-start: var(--space-md);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* A milestone is not another columnar row: the column split is reserved for sprints (and the
   overview legend row). A milestone's feature paragraph runs as a single lede — one step larger
   again, capped to the reading measure — with its build note stacked beneath it. */
.p-replays__grid-row--milestone .p-replays__grid-cell--feature {
  max-width: var(--measure);
  font-size: var(--text-xl);
}

.p-replays__grid-row--milestone .p-replays__grid-cell--build {
  max-width: var(--measure);
}

@media (min-width: 52rem) {
  /* The feature column takes more of the width than the build column, so the primary/secondary
     asymmetry shows in the layout as well as the type scale. */
  .p-replays__grid-row {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  }

  /* The run-level row places its interleaved DOM order back onto the two columns: each
     column head on the shared top row, each overview cell beneath its own head. */
  .p-replays__grid-row--replay .p-replays__grid-colhead--feature { grid-area: 1 / 1; }
  .p-replays__grid-row--replay .p-replays__grid-cell--feature { grid-area: 2 / 1; }
  .p-replays__grid-row--replay .p-replays__grid-colhead--build { grid-area: 1 / 2; }
  .p-replays__grid-row--replay .p-replays__grid-cell--build { grid-area: 2 / 2; }

  /* Milestone rows opt back out of the columns: feature lede over stacked build note. */
  .p-replays__grid-row--milestone {
    grid-template-columns: 1fr;
  }

  .p-replays__grid-label {
    grid-column: 1 / -1;
  }

  .p-replays__grid-header {
    grid-column: 1 / -1;
  }
}