/* steps.css — where you are in the setup, on every setup page (brand,
   people, music, preview, export). One file so the pages can't drift.

   A stepper, not four buttons (Phil, 2026-09-21: the pills were "squished
   and funky" and read as buttons). Numbers on one line joined by a rule;
   the labels are plain type that never wraps. Steps behind you are solid,
   the one you're on is orange and bold, the ones ahead are quieter. Every
   step is still a link. On a narrow window only the current step keeps its
   label.

   Colours come from the page: `--ink` for type and rules, `--orange` for
   where you are, `--mono` for the numbers. The preview sets a light ink on
   its dark bar. */

.steps { display: flex; align-items: center; flex-wrap: nowrap; --s-ink: var(--ink, #121912); --s-hi: var(--orange, #F96324); }
.steps a {
  display: inline-flex; align-items: center; gap: 9px; padding: 6px 2px;
  color: var(--s-ink); text-decoration: none; white-space: nowrap;
  font-size: 15px; font-weight: 600; line-height: 1.2;
}
/* The rule between steps. */
.steps a + a::before {
  content: ""; flex: none; width: 36px; height: 2px; margin: 0 10px 0 8px;
  background: var(--s-ink); opacity: .3;
}
.steps a b {
  display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--s-ink); font: 700 12px/1 var(--mono, "Space Mono", monospace);
}
/* Ahead of you: quieter. Behind you: solid. Here: orange. */
.steps a[aria-current] ~ a { opacity: .55; }
.steps a:has(~ a[aria-current]) b { background: var(--s-ink); color: var(--paper, #0d0e10); }
.steps a[aria-current] { font-weight: 800; }
.steps a[aria-current] b { background: var(--s-hi); border-color: var(--s-hi); color: #121912; }
.steps a:not([aria-current]):hover { text-decoration: underline; text-underline-offset: 4px; opacity: 1; }
.steps a:focus-visible { outline: 2.5px solid var(--s-hi); outline-offset: 3px; border-radius: 6px; }

/* Narrow: numbers only, and the current step's name. */
@media (max-width: 860px) {
  .steps a:not([aria-current]) { font-size: 0; gap: 0; }
  .steps a:not([aria-current]) b { font-size: 12px; }
  .steps a + a::before { width: 18px; margin: 0 8px; }
}