/* styles/sections/numbered-list.css
 * Numbered rows under a 1.5px ink rule: a fern display numeral, a title, a muted body, each row
 * on a hairline (Product Leadership "Bring three numbers" i1Ek9 / EqpxB / ZYULe and "Start with
 * one team" yyrQL / Gc4x7 / l6Gvc5). The numeral is the .numeral--current primitive; the list
 * is an <ol>, so the visible numeral is aria-hidden. --inputs and --steps set each list's
 * numeral size, row padding and body type as the frames draw them.
 * <ol class="numbered-list" role="list"><li class="numbered-list__item"><span class="numbered-list__num
 *   numeral numeral--current" aria-hidden="true">1</span><div class="numbered-list__text">
 *   <p class="numbered-list__title">…</p><p class="numbered-list__body">…</p></div></li></ol> */
@layer sections {
  .numbered-list {
    --num-size: 20px;
    --num-w: 20px;
    --row-pad: 18px;
    --text-gap: 4px;
    --body-size: 14px;
    --body-lh: 17px;
    margin: 0;
    padding: 0;
    list-style: none;
    box-shadow: inset 0 1.5px var(--ink);
  }

  .numbered-list__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-20);
    padding-block: var(--row-pad);
    box-shadow: inset 0 -1px var(--line);
  }

  .numbered-list__num {
    flex: none;
    width: var(--num-w);
    font-family: var(--font-display);
    font-size: var(--num-size);
  }

  .numbered-list__text {
    display: flex;
    flex-direction: column;
    gap: var(--text-gap);
    min-width: 0;
  }

  .numbered-list__title,
  .numbered-list__body {
    margin: 0;
  }

  .numbered-list__title {
    font-size: 16px;
    font-weight: 600;
    line-height: 19px;
    color: var(--ink);
  }

  .numbered-list__body {
    font-size: var(--body-size);
    line-height: var(--body-lh);
    color: var(--ink-muted);
  }

  .numbered-list--steps {
    --num-size: 21px;
    --num-w: 24px;
    --row-pad: 20px;
    --text-gap: 6px;
    --body-size: 15px;
    --body-lh: 23px;
  }

  @media (min-width: 900px) {
    .numbered-list--inputs {
      --num-size: 24px;
    }

    .numbered-list--steps {
      --num-size: 28px;
    }
  }
}