/* The releases section (app/views/changelogs/): the list at /releases and one page per release
   carrying its whole changelog. The section composes c-panel, c-prose, c-table, c-toc and c-tag,
   so what is left here is the layout of a document that can run to hundreds of entries — the
   version line, the column rhythm, and the entry blocks below. */

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

.p-releases__card-title {
  color: var(--text-bright);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}
.p-releases__card-meta,
.p-releases__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

.p-releases__backlink {
  width: fit-content;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.p-releases__backlink::before { content: "◂ "; color: var(--accent); }

.p-releases__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.p-releases__sha { color: var(--text-muted); font-size: var(--text-sm); }

.p-releases__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  min-width: 0;
}
.p-releases__section { display: flex; flex-direction: column; gap: var(--space-md); }
.p-releases__heading {
  color: var(--text-bright);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  /* A heading is an anchor target, and the rail scrolls to it — leave the sticky header
     room so a jumped-to section does not land under the menu bar. */
  scroll-margin-top: var(--space-2xl);
}
.p-releases__section-summary {
  max-width: var(--measure);
  color: var(--text-muted);
  line-height: var(--lh-cell);
}

/* An entry is a task — usually a whole gantry run — and its summary can run to a short
   paragraph, so it is a stacked block rather than a table row: a table would have to choose
   between a readable summary column and a legible span column and would get neither. The list is
   numbered in the source and unnumbered on screen; the order is the document's. */
.p-releases__entries {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  list-style: none;
}
/* Block rather than flex, because the screencast an entry may carry is a float the title and
   summary wrap around, and a flex item cannot be floated. flow-root keeps that float inside
   its own entry instead of letting it hang into the next one. */
.p-releases__entry {
  display: flow-root;
  padding-inline-start: var(--space-md);
  border-inline-start: var(--bw) solid var(--line);
}
.p-releases__entry-title,
.p-releases__entry-summary { margin-block-start: var(--space-2xs); }

/* The span line — when the work ran, how much of it landed, and what kind it was. It sits
   above the title, dim and small, so a reader scanning titles passes over it. */
.p-releases__span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.p-releases__dates,
.p-releases__commits {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  white-space: nowrap;
}

/* The link to a run's replay page, where the site serves one. It sits at the end of the
   span line at the same weight as the rest of it — a way through for a reader who wants
   the run itself, not a call to action. */
.p-releases__replay::before { content: "▸ "; color: var(--accent); }

/* The embedded screencast of that run. It floats into the entry's trailing corner with the
   title and summary flowing around it, and is kept small: the entry is a log line first, so
   a clip that filled the column would read as the entry rather than as an attachment to it.
   Only some runs have one, which is what makes a long release page scan as more than a
   uniform list. */
.p-releases__replay-media {
  display: block;
  float: inline-end;
  inline-size: min(100%, 15rem);
  margin-block: var(--space-2xs) var(--space-xs);
  margin-inline-start: var(--space-md);
  border: var(--bw) solid var(--line);
  background: var(--surface-sunken);
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.p-releases__replay-media:hover { border-color: var(--accent); }

/* On a phone the column is barely wider than the clip, so text wrapped around it would run
   two or three words to the line: it goes back to a full-width block above the title. */
@media (max-width: 40rem) {
  .p-releases__replay-media {
    float: none;
    inline-size: 100%;
    margin-inline-start: 0;
  }
}

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

.p-releases__entry-title {
  color: var(--text-bright);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
}
/* The reading measure bounds a summary at the column's start edge, which would leave it
   ending short of a floated clip at the far edge and wrapping around nothing. An entry
   carrying a clip drops the bound instead: the float is what shortens those lines. */
.p-releases__entry:has(.p-releases__replay-media) .p-releases__entry-summary {
  max-width: none;
}
.p-releases__entry-summary {
  max-width: var(--measure);
  color: var(--text);
  line-height: var(--lh-cell);
}