/* =========================================================================
   Component — numbered steps
   -------------------------------------------------------------------------
   An <ol>, so the sequence is carried by the element and survives CSS being
   unavailable. The counter renders as text in the identity teal, which passes
   AA on both panel surfaces in both themes — a filled badge would need an ink
   that survives both, and the token set has no name for one (L-FE-03 is the
   same shape).
   ========================================================================= */

.steps {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.steps > li {
  counter-increment: step;
  padding: 24px;
  background: var(--doc-panel);
  border: 1px solid var(--doc-line);
  border-radius: var(--radius-lg);
}

/* The counter carries a NUMBER and no word.
 *
 * It used to read `content: "Step " counter(step)`, which put a user-facing
 * English string in a stylesheet — somewhere neither `en.js` nor `de.js` can
 * reach it, so U-703 would have had to restructure the component rather than
 * translate a key. A numeral is the same information in every language, and the
 * <ol> already carries the sequence for anything that cannot see the numeral. */
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sd-secondary);
}

.steps h3 {
  margin: 0 0 8px;
}

.steps p {
  margin: 0;
  font-size: 14px;
  color: var(--doc-ink-soft);
}