homepage_relaunch/src/components/verifier/ComingSoon.astro

---
import Schematic from './Schematic.astro';
import { overview } from './diagrams';
import { t, type Lang } from '../../i18n/ui';
interface Props { lang: Lang }
const { lang } = Astro.props;
const ui = t(lang);
const s = ui.verifier.soon;
const g = ui.verifier.how.groups[0];
const pair = overview(g);
/* The step that is current; earlier ones read as passed, later ones as open. */
const now = 0;
---
<section class="section track" aria-labelledby="track-title">
  <div class="container grid">
    <div class="track__head">
      <h2 id="track-title" class="h2">{s.track.title}</h2>
      <p class="muted">{s.track.body}</p>
    </div>
    <ol class="track__steps" role="list">
      {s.track.steps.map((step, i) => (
        <li class="track__step" data-state={i < now ? 'past' : i === now ? 'now' : 'next'} aria-current={i === now ? 'step' : undefined}>
          <span class="track__node" aria-hidden="true" />
          <p class="track__state">{step.state}</p>
          <h3 class="h3 track__name">{step.name}</h3>
          <p class="track__body muted">{step.body}</p>
        </li>
      ))}
    </ol>
  </div>
</section>

<section class="section spec" aria-labelledby="spec-title">
  <div class="container grid">
    <div class="spec__head">
      <h2 id="spec-title" class="h2">{s.spec.title}</h2>
      <p class="muted">{s.spec.body}</p>
    </div>
    <dl class="spec__table">
      {s.spec.rows.map((r) => (
        <div class="spec__row">
          <dt>{r.key}</dt>
          <dd>{r.value}</dd>
        </div>
      ))}
    </dl>
    <figure class="spec__figure">
      <div class="spec__drawing hud-frame">
        <div class="spec__wide"><Schematic layout={pair.wide} title={g.title} desc={g.desc} variant="wide" id="soon-wide" /></div>
        <div class="spec__tall"><Schematic layout={pair.tall} title={g.title} desc={g.desc} variant="tall" id="soon-tall" /></div>
      </div>
      <figcaption class="small muted">{s.spec.figure}</figcaption>
    </figure>
  </div>
</section>

<style>
  /* Release path: one hairline, one node per phase. Numbering is earned here: it is a sequence. */
  .track__head { grid-column: 1 / -1; display: grid; gap: var(--space-5); align-content: start; }
  .track__head p { max-width: 24em; }
  .track__steps { grid-column: 1 / -1; display: grid; gap: var(--space-7); counter-reset: step; }
  .track__step {
    position: relative;
    display: grid;
    gap: var(--space-2);
    align-content: start;
    padding-left: var(--space-7);
    counter-increment: step;
  }
  /* Vertical rail on small screens. */
  .track__step::before {
    content: '';
    position: absolute;
    left: calc(0.5rem - var(--hairline) / 2);
    top: 1.25rem;
    bottom: calc(-1 * var(--space-7));
    border-left: var(--hairline) solid var(--ink-muted);
  }
  .track__step:last-child::before { bottom: 0; border-left-style: dashed; }
  .track__step[data-state='next']::before { border-left-style: dashed; border-color: var(--line); }
  .track__node {
    position: absolute;
    left: 0;
    top: 0.2rem;
    width: 1rem;
    height: 1rem;
    border: var(--hairline) solid var(--ink);
    border-radius: 50%;
    background: var(--paper);
  }
  .track__step[data-state='now'] .track__node { outline: var(--hairline) solid var(--ink-muted); outline-offset: 0.35rem; }
  .track__step[data-state='now'] .track__node::after {
    content: '';
    position: absolute;
    inset: 0.2rem;
    border-radius: 50%;
    background: var(--signal);
    outline: var(--hairline) solid var(--ink);
  }
  .track__step[data-state='next'] .track__node { border-style: dashed; border-color: var(--ink-muted); }
  .track__state { font-size: var(--step-small); line-height: var(--leading-small); color: var(--ink-muted); }
  .track__state::before { content: counter(step, decimal-leading-zero) '  '; white-space: pre; color: var(--ink); }
  .track__step[data-state='next'] .track__name { color: var(--ink-muted); }
  .track__body { max-width: 22em; }

  /* Spec sheet: key and value on hairlines, like a data sheet. */
  .spec { border-top: var(--hairline) solid var(--line); }
  .spec__head { grid-column: 1 / -1; display: grid; gap: var(--space-5); align-content: start; }
  .spec__head p { max-width: 28em; }
  .spec__table { grid-column: 1 / -1; border-top: var(--hairline) solid var(--ink); }
  .spec__row {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) 2fr;
    gap: var(--gap);
    padding-block: var(--space-4);
    border-bottom: var(--hairline) solid var(--line);
  }
  .spec__row dt { font-size: var(--step-small); line-height: var(--leading-small); color: var(--ink-muted); padding-top: 0.15em; }
  .spec__figure { grid-column: 1 / -1; display: grid; gap: var(--space-3); margin-top: var(--space-6); }
  .spec__drawing { padding: var(--space-6); }
  .spec__wide { display: none; }

  @media (min-width: 48rem) {
    .track__head { grid-column: 1 / span 4; }
    .spec__head { grid-column: 1 / span 5; }
    .spec__table { grid-column: 7 / span 6; }
    .spec__wide { display: block; }
    .spec__tall { display: none; }
    .spec__drawing { padding: var(--space-7) var(--space-8); }
  }
  /* Wide: the rail turns horizontal and runs across all three phases. */
  @media (min-width: 64rem) {
    .track__steps { grid-column: 5 / span 8; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
    .track__step { padding-left: 0; padding-top: var(--space-7); padding-right: var(--space-4); }
    .track__step::before {
      left: 1.25rem;
      right: calc(-1 * var(--gap) - 0rem);
      top: calc(0.5rem - var(--hairline) / 2);
      bottom: auto;
      border-left: 0;
      border-top: var(--hairline) solid var(--ink-muted);
    }
    .track__step:last-child::before { right: 0; border-top-style: dashed; }
    .track__step[data-state='next']::before { border-top-style: dashed; border-color: var(--ink-muted); }
    .track__node { top: 0; }
  }
</style>