/*
 * Roadmap - a typographic ledger. Spec section 9.12, final form.
 *
 * Five rows, each a three column grid: a large light phase number, the name
 * and description, and the two mono lines. The only visual device is that the
 * `open:` and `control:` pairs hold one x and one vertical pitch all the way
 * down, so the two mono columns read as one continuous scan. No canvas, no
 * script, no boxes, cards, fills, arrows, rings or dots, and the only rules in
 * the section are the hairlines between rows.
 *
 * Breakpoints are in em so the layout also reflows under text-only zoom.
 */

.roadmap {
  padding-block: var(--section-y);
  scroll-margin-top: calc(var(--nav-h) + 8px);
  --rm-num-col: 7.5rem;
  /* The description column is sized to its measure, not to the leftover
     space, so the text ends close to the mono keys and the row reads as one
     row rather than as two blocks with a hole between them. */
  /* Sized to the support measure so every row shares one state-column edge. */
  --rm-desc-col: 34rem;
  --rm-state-col: 23rem;
  /* Optical gap from description ink to mono keys: 72–96px at desktop. */
  --rm-gap: 5rem;
  --rm-pad: clamp(32px, 3.2vw, 40px);
  /* The rules end where the content ends. Below this width the ledger simply
     fills the shell, so the cap disables itself at the stacked breakpoints. */
  --rm-ledger-max: calc(
    var(--rm-num-col) + var(--rm-desc-col) + var(--rm-state-col) +
      (var(--rm-gap) * 2)
  );
}

.roadmap .section-support {
  margin-top: 0.9rem;
  /* One owned value for the gap below the support line, at the page-wide
     section rhythm scale, so it cannot stack with a shared bottom margin. */
  margin-bottom: 0;
  max-width: 46rem;
  text-wrap: pretty;
}

/* ---------------------------------------------------------------- the ledger */

.roadmap-ledger {
  margin-top: clamp(72px, 7.5vw, 120px);
  max-width: var(--rm-ledger-max);
  border-bottom: 1px solid var(--line);
}

.rm-row {
  display: grid;
  grid-template-columns:
    var(--rm-num-col)
    var(--rm-desc-col)
    minmax(var(--rm-state-col), 1fr);
  column-gap: var(--rm-gap);
  padding-block: var(--rm-pad);
  border-top: 1px solid var(--line);
}

/* ---------------------------------------------------------------- the number */

.rm-num {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  font-size: 3.25rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--ink-faint);
}

/* Built versus planned is carried by ink weight alone. */
.rm-row:nth-child(1) .rm-num,
.rm-row:nth-child(2) .rm-num {
  color: var(--ink);
}

/* ------------------------------------------------------------ name and text */

.rm-name {
  grid-column: 2;
  grid-row: 1;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.024em;
  color: var(--ink);
  text-wrap: pretty;
  max-width: 100%;
}

.rm-tag {
  margin-left: 0.55em;
  font-family: var(--mono);
  font-size: var(--type-mono);
  font-weight: 500;
  letter-spacing: var(--track-mono);
  line-height: var(--lh-mono);
  /* The site's mono label treatment, so it reads as a status rather than as
     a footnote. Raising it to the x-height centre is what made it read as a
     superscript, so it sits on the name's baseline instead. */
  text-transform: uppercase;
  color: var(--accent);
  vertical-align: baseline;
}

.rm-desc {
  grid-column: 2;
  grid-row: 2;
  margin-top: 0.55rem;
  font-size: var(--type-support);
  line-height: 1.55;
  color: var(--ink-muted);
  text-wrap: pretty;
  width: 100%;
  max-width: none;
}

/* --------------------------------------------------------- the two mono rows */

.rm-state {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: start;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  /* Baseline, not start: the key and the value are set at different sizes on
     purpose, and they still have to sit on one line. */
  align-items: baseline;
  column-gap: 0.55rem;
  row-gap: 0.32rem;
  /* Sets the `open:` baseline onto the name's baseline. */
  margin-top: 0.5625rem;
}

.rm-key,
.rm-val {
  margin: 0;
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* The keys repeat ten times, so they stay quiet at the site's mono label
   size. The values are the information, so they carry the weight. */
.rm-key {
  grid-column: 1;
  font-size: var(--type-mono);
  line-height: 1.55;
  color: var(--ink-muted);
}

.rm-val {
  grid-column: 2;
  font-size: var(--type-mono-value);
  font-weight: 500;
  letter-spacing: var(--track-mono-value);
  line-height: var(--lh-mono);
  color: var(--ink);
}

/* --------------------------------------------------------------- responsive */

/* At 1024 the mono pair drops under the description and keeps its own two
   column alignment; the number column stays. */
@media (max-width: 64em) {
  .roadmap {
    --rm-num-col: 6.5rem;
    --rm-gap: 2.5rem;
  }

  .rm-row {
    grid-template-columns: var(--rm-num-col) minmax(0, 1fr);
  }

  .rm-num {
    grid-row: 1 / span 3;
    font-size: 3rem;
  }

  .rm-desc {
    grid-row: 2;
    max-width: 62ch;
  }

  .rm-state {
    grid-column: 2;
    grid-row: 3;
    margin-top: 1.15rem;
  }
}

/* At 768 the number sits on the name's line, the description follows, and the
   mono pair stays a two column mini grid. */
@media (max-width: 48em) {
  .roadmap {
    --rm-gap: 0.8rem;
    --rm-pad: clamp(26px, 5vw, 34px);
  }

  .rm-row {
    grid-template-columns: max-content minmax(0, 1fr);
  }

  .rm-num {
    grid-column: 1;
    grid-row: 1;
    align-self: baseline;
    font-size: 1.875rem;
  }

  .rm-name {
    grid-column: 2;
    grid-row: 1;
    align-self: baseline;
    font-size: 1.25rem;
  }

  .rm-desc {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 0.7rem;
    max-width: none;
    /* Two lines again, so the stacked ledger keeps an even pitch. */
    min-height: calc(1.55em * 2);
  }

  .rm-state {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 1rem;
  }
}

@media (max-width: 30em) {
  .rm-num {
    font-size: 1.625rem;
  }

  .rm-name {
    font-size: 1.125rem;
  }
}

/* From 416 down the longest `open:` value takes a second line rather than
   running to the rule end. The tracking stays at 0.04em at every size, since
   small text wants no less of it; the inset is what creates the margin, and
   reserving the line in every row keeps `control:` on one offset. */
@media (max-width: 26em) {
  .rm-state {
    padding-inline-end: 1.25rem;
  }

  .rm-state .rm-val:first-of-type {
    min-height: calc(1.5em * 2);
  }
}

/*
 * Text-only zoom scales the media query em too, so the rules above already
 * stack the ledger when a reader enlarges text in the browser. Enlarging the
 * root font-size in CSS does not, so the same stacked layout is repeated here
 * against the ledger's own inline size, which is measured in rem and therefore
 * does follow the root font size. The two conditions agree at the default
 * size, so nothing is fighting.
 */
.roadmap-ledger {
  container-type: inline-size;
  container-name: ledger;
}

@container ledger (max-width: 44.5rem) {
  .roadmap {
    --rm-gap: 0.8rem;
    --rm-pad: clamp(26px, 5vw, 34px);
  }

  .rm-row {
    grid-template-columns: max-content minmax(0, 1fr);
  }

  .rm-num {
    grid-column: 1;
    grid-row: 1;
    align-self: baseline;
    font-size: 1.875rem;
  }

  .rm-name {
    grid-column: 2;
    grid-row: 1;
    align-self: baseline;
    font-size: 1.25rem;
  }

  .rm-desc {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 0.7rem;
    max-width: none;
    min-height: calc(1.55em * 2);
  }

  .rm-state {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 1rem;
  }
}