/* ============================================================
   THE NUMBERED BEATS IN A STEP'S COPY COLUMN
   ============================================================
   Every step in the loop says its module name, its one heading and
   then the beats of its screen as an ordered list — 01, 02, 03 —
   each one a line, not a sentence. The pattern was set by Connect &
   set up and by Marketing; this file is that same list, lifted out
   of those four steps' id-scoped rules so the remaining eight get it
   without the ids being listed again.

   The one substantive change in the lift: colour comes from the
   chapter (--ch / --ch-deep, loop.css) instead of from --blue-deep
   and --blue-wash, which were chapter 1's hue hard-coded. Chapter 1
   resolves --ch-deep to --blue-deep, so it renders exactly as it did.

   The list is DECORATION over meaning that is already in the markup:
   the number is a counter, so the text stays copyable and the reading
   order is the list order. Buttons are disabled on the landing page —
   the scene plays on its own — and become live only where a page
   drives the scene from them.
   ============================================================ */

/* The guest journey (.gj-copy) is the same column outside the loop. */
.step:has(.channel-points) .step-copy, .gj-copy { gap: 16px; }
.step:has(.channel-points) .step-copy h3, .gj-copy h3 { font-size: 28px; line-height: 36px; }

/* The module tag is tinted by its chapter rather than by the shared
   kicker indigo: it matches the hue of the dot beside the step and
   of the heading above the list, and at 16px it clears 4.5:1, which
   --kicker-color (3.86:1) did not. */
.step:has(.channel-points) .step-tag, .gj-copy .step-tag {
  margin-top: 0;
  font-size: 16px; line-height: 20px;
  color: var(--ch);
  /* A module tag is a label, not prose: it keeps one line even when it
     names two modules and runs a little past the 31ch copy column. */
  white-space: nowrap;
}

.channel-points {
  display: grid; gap: 0;
  margin: 0; padding: 0;
  list-style: none;
  counter-reset: channel-clip;
}
.channel-points li { counter-increment: channel-clip; }

[data-channel-clip] {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px;
  width: fit-content; max-width: 100%;
  min-height: 44px; padding: 8px 12px;
  border: 0; border-radius: 8px; background: none;
  text-align: left;
  font: 400 16px/24px var(--body-font);
  color: var(--text-2);
  cursor: pointer;
}
[data-channel-clip]::before {
  content: counter(channel-clip, decimal-leading-zero);
  padding-top: 4px;
  font: 400 12px/16px var(--body-font);
}
[data-channel-clip][aria-pressed="true"] { color: var(--ch-deep); }
[data-channel-clip][aria-pressed="true"]::before { font-weight: 600; }
[data-channel-clip]:not(:disabled):hover { background: color-mix(in srgb, var(--ch) 10%, transparent); }
[data-channel-clip]:focus-visible { outline: 2px solid var(--ch); outline-offset: 4px; }
[data-channel-clip]:disabled { cursor: default; }

@media (forced-colors: active) {
  [data-channel-clip][aria-pressed="true"] { color: Highlight; }
}

/* ---------- The dot column goes away ----------
   The rail and its two dots were the frame's way of saying which of
   three steps you were on. A step that numbers its own beats says
   that better and says it in words, so the furniture beside it is
   the same information drawn twice — and it reads as a stray line
   next to a heading. Dropped at every width, and only where the
   numbered list is actually present, so a step without one keeps
   its marker. */
.step:has(.channel-points)::before,
.step:has(.channel-points)::after { display: none; }
.frame-steps:has(.channel-points)::before { display: none; }
.frame-steps:has(.channel-points) { padding-inline-start: 0; }