/* =============================================================================
   /how-it-works — page stylesheet
   web/assets/css/how-it-works.css

     <link rel="stylesheet" href="/assets/css/tokens.css">
     <link rel="stylesheet" href="/assets/css/base.css">
     <link rel="stylesheet" href="/assets/css/how-it-works.css">

   A file rather than a <style> block for the same reason every page module is a
   file: the site is served under `style-src 'self'` with no 'unsafe-inline' and
   no nonce (see the Content-Security-Policy in netlify.toml), so an inline block
   would simply not apply.

   Everything on this page is base.css except one component. `.timeline` in
   base.css is tuned for the case-page event feed — short rows, a 13px body, a
   20px gap, an anonymous dot per row. The public procedure is twelve steps of
   ordinary prose that a reader has to be able to cite by number ("step 5") and
   compare against the Rules, so `.proc` opens the spacing and turns the dot into
   the step number. Nothing else is added, and no colour is declared here that is
   not a token.
   ============================================================================= */

.proc {
  counter-reset: uora-step;
  gap: var(--s-8);
  padding-inline-start: var(--s-9);
}

/* The rail starts below the first marker and stops above the last, so it reads
   as a spine between the steps rather than a line drawn through them. */
.proc::before {
  inset-inline-start: 13px;
  inset-block: 32px 14px;
}

.proc > .timeline__item {
  counter-increment: uora-step;
}

/* The marker: base.css's 9px dot, replaced by the numeral. Centred on the rail
   at 13.5px from the list's inline start, which is where base.css puts the rail
   once `.proc` has moved it. */
.proc > .timeline__item::before {
  content: counter(uora-step);
  display: grid;
  place-items: center;
  inset-inline-start: calc(var(--s-9) * -1);
  top: 0;
  width: 27px;
  height: 27px;
  background: var(--bg-2);
  border: var(--hairline) solid var(--border2);
  color: var(--text2);
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-ui);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tr-num);
  line-height: 1;
}

/* The period a step runs for is load-bearing text, not a timestamp caption, so
   it takes the accent rather than base.css's quiet grey. The words carry the
   meaning; the colour only raises them. */
.proc .timeline__when {
  color: var(--accent);
  font-weight: var(--fw-ui);
}

/* Under 480px the marker gutter is the first thing that has to give way, or the
   prose measure collapses at 360px. */
@media (max-width: 480px) {
  .proc {
    gap: var(--s-7);
    padding-inline-start: var(--s-8);
  }

  .proc::before {
    inset-inline-start: 11px;
    inset-block: 28px 12px;
  }

  .proc > .timeline__item::before {
    inset-inline-start: calc(var(--s-8) * -1);
    width: 23px;
    height: 23px;
  }
}

/* In forced-colours mode the marker loses its fill, exactly as the chips do, so
   the border is what is left to carry it. */
@media (forced-colors: active) {
  .proc > .timeline__item::before {
    border-color: currentColor;
  }
}