/* Programs: one row each, what it was and how big, the call that mattered, and what changed. How I run a program sits
   on My builds' stage, tabs and caption. Colours, type, space and radius come from the tokens. */

.pg-list { margin: 0; padding: 0; list-style: none; border-block-end: 1px solid var(--line); }
.pg-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.2fr) minmax(0, .85fr);
  gap: var(--space-6) var(--space-10);
  padding-block: var(--space-fluid-l);
  border-block-start: 1px solid var(--line);
}
.pg-row p { margin: 0; }
.pg-when, .pg-lbl {
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
}
.pg-lbl { margin-block-end: var(--space-2); font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.pg-row h4 {
  margin-block: var(--space-1-5) var(--space-2);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.pg-what > p:not([class]) { color: var(--muted); font-size: var(--text-md); line-height: var(--leading-snug); }
.pg-scope { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-block: var(--space-3) 0; padding: 0; list-style: none; color: var(--muted); font-size: var(--text-sm); }
.pg-scope b { color: var(--text); font-family: var(--mono); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.pg-call > p:last-child { max-inline-size: 44ch; font-size: var(--text-lead); line-height: var(--leading-body); }
.pg-res { display: grid; align-content: start; gap: var(--space-4); }
.pg-res .pg-lbl { margin: 0; }
.pg-res p:not(.pg-lbl) { display: flex; flex-direction: column; gap: var(--space-1); }
.pg-res b { font-size: var(--text-h4); font-weight: var(--weight-semibold); line-height: var(--leading-none); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; }
.pg-res span { color: var(--muted); font-size: var(--text-md); line-height: var(--leading-snug); }

@media (width < 900px) {
  .pg-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pg-what { grid-column: 1 / -1; }
}
@media (width < 640px) {
  .pg-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .pg-res { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-res .pg-lbl { grid-column: 1 / -1; }
}