/* Where a trip stands: the step bar, What changed and the timing row (js/timeline.js). */

/* ---------- step bar: a row of steps, or a list down the page when there's no room ---------- */
.stepwrap { container-type: inline-size; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.step { position: relative; display: grid; align-content: start; gap: 2px; padding: 24px 14px 0 0; min-inline-size: 0; overflow-wrap: anywhere; }
/* the track from this dot to the next one */
.step::before { content: ""; position: absolute; inset-block-start: 6px; inset-inline: 14px 0; block-size: 2px; background: var(--line-strong); }
.step:last-child::before { display: none; }
.step.done::before { background: var(--ink); }
.step .dot { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 14px; block-size: 14px; border-radius: 50%; background: var(--ground); border: 2px solid var(--line-strong); }
.step.done .dot { background: var(--ink); border-color: var(--ink); }
/* the ink shade of the accent, so a dark org color still shows on the dark theme */
.step.current .dot { background: var(--red-ink); border-color: var(--red-ink); }
.step.failed .dot { background: var(--critical); border-color: var(--critical); }
.step-name { font-weight: 600; font-size: 14px; line-height: 1.3; }
.step.current .step-name, .step.failed .step-name { font-weight: 600; }
.step.failed .step-name { color: var(--critical); }
.step.upcoming .step-name { color: var(--ink-muted); }
.step-when { font-size: 13px; }
.step-meta { font-size: 13px; color: var(--ink-muted); }
.step.failed .step-meta { color: var(--ink); }

@container (max-width: 559px) {
  .steps { grid-auto-flow: row; grid-auto-columns: auto; }
  .step { padding: 0 0 14px 28px; }
  .step::before { inset-block: 16px 0; inset-inline: 6px auto; block-size: auto; inline-size: 2px; }
  .step:last-child { padding-block-end: 0; }
}
@media (max-width: 599px) {
  .steps { grid-auto-flow: row; grid-auto-columns: auto; }
  .step { padding: 0 0 14px 28px; }
  .step::before { inset-block: 16px 0; inset-inline: 6px auto; block-size: auto; inline-size: 2px; }
  .step:last-child { padding-block-end: 0; }
}

/* ---------- the timing row: three figures ---------- */
.timing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; padding-block: 14px; border-block: 1px solid var(--line); }
.timing > div { display: grid; gap: 2px; align-content: start; min-inline-size: 0; }
.timing .lbl { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
.timing .val { font-size: 20px; font-weight: 600; line-height: 1.2; }
.timing .sub { font-size: 13px; color: var(--ink-muted); }
@media (max-width: 599px) {
  .timing { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .timing > div { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; }
  .timing .sub { grid-column: 2; text-align: end; }
  .timing .val { font-size: 18px; text-align: end; }
}

/* ---------- What changed ---------- */
.changed { display: grid; gap: 12px; padding: 18px 20px; background: var(--ground-alt); }
.changed h2 { font-size: 16px; }
.changed-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.changed-list li { display: grid; grid-template-columns: 130px minmax(0, 1fr); column-gap: 16px; row-gap: 2px; padding-block: 10px; }
.changed-list li + li { border-block-start: 1px solid var(--line); }
.chg-field { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-muted); padding-block-start: 2px; }
.chg-vals { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.chg-vals del { color: var(--ink-muted); text-decoration-thickness: 1px; }
.chg-vals ins { text-decoration: none; font-weight: 600; }
.chg-to { color: var(--ink-muted); }
.chg-meta { grid-column: 2; font-size: 13px; color: var(--ink-muted); }
@media (max-width: 599px) {
  .changed { padding: 14px 16px; }
  .changed-list li { grid-template-columns: minmax(0, 1fr); }
  .chg-meta { grid-column: 1; }
}

/* ---------- compact step bar: small dots in a row, the step it's at named after them (lists) ---------- */
.stepwrap.compact { display: flex; align-items: center; gap: 10px; container-type: normal; }
.stepwrap.compact .steps { grid-auto-flow: column; grid-auto-columns: 18px; }
.stepwrap.compact .step { padding: 0; block-size: 10px; }
.stepwrap.compact .step::before { inset-block: 4px auto; inset-inline: 10px -8px; block-size: 2px; inline-size: auto; }
.stepwrap.compact .step:last-child::before { display: none; }
.stepwrap.compact .dot { inline-size: 10px; block-size: 10px; border-width: 2px; }
.stepwrap.compact .step-name { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.stepwrap.compact .step-when, .stepwrap.compact .step-meta { display: none; }
.stepwrap.compact .step-now { font-size: 13px; font-weight: 600; white-space: nowrap; }
.stepwrap.compact .step-now.failed { color: var(--critical); }
@media (max-width: 599px) {
  .stepwrap.compact .steps { grid-auto-flow: column; grid-auto-columns: 18px; }
  .stepwrap.compact .step { padding: 0; }
  .stepwrap.compact .step::before { inset-block: 4px auto; inset-inline: 10px -8px; block-size: 2px; inline-size: auto; }
}