/* =============================================================================
   Home v2 — stepped Trader path (opt-in via ?home=v2)
   -----------------------------------------------------------------------------
   Styles only apply under body.home-stepped, which home-stepped.js sets. With
   the flag off nothing here matches and the homepage is untouched.
   ========================================================================== */

html[data-ui='v2'][data-v2] .hmo-stepper {
  display: flex;
  align-items: center;
  gap: var(--v2-s4);
  flex-wrap: wrap;
  margin-bottom: var(--v2-s6);
  padding: var(--v2-s3) var(--v2-s4);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-lg);
  background: var(--v2-surface);
}

html[data-ui='v2'][data-v2] .hmo-step-dots {
  display: flex;
  align-items: center;
  gap: var(--v2-s2);
}
html[data-ui='v2'][data-v2] .hmo-step-rule {
  width: var(--v2-s6);
  height: 1px;
  background: var(--v2-line-2);
}
html[data-ui='v2'][data-v2] .hmo-step-dot {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--v2-line-2);
  border-radius: var(--v2-r-pill);
  background: transparent;
  color: var(--v2-ink-3);
  font: 600 var(--v2-t-xs)/1 var(--v2-sans);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--v2-fast) var(--v2-ease),
              border-color var(--v2-fast) var(--v2-ease),
              color var(--v2-fast) var(--v2-ease);
}
html[data-ui='v2'][data-v2] .hmo-step-dot:hover {
  border-color: var(--v2-accent);
  color: var(--v2-ink);
}
html[data-ui='v2'][data-v2] .hmo-step-dot.is-done {
  border-color: var(--v2-accent-line);
  background: var(--v2-accent-soft);
  color: var(--v2-accent);
}
html[data-ui='v2'][data-v2] .hmo-step-dot.is-active {
  border-color: var(--v2-accent);
  background: var(--v2-accent);
  color: var(--v2-accent-ink);
}
html[data-ui='v2'][data-v2] .hmo-step-dot:focus-visible {
  outline: none;
  box-shadow: var(--v2-ring);
}

html[data-ui='v2'][data-v2] .hmo-step-label {
  font: 500 var(--v2-t-xs)/1 var(--v2-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-ink-4);
  font-variant-numeric: tabular-nums;
}
html[data-ui='v2'][data-v2] .hmo-step-actions {
  display: flex;
  align-items: center;
  gap: var(--v2-s2);
  margin-left: auto;
}

/* The path strip previews all three questions, which duplicates the stepper. */
html[data-ui='v2'][data-v2] body.home-stepped .hmo-path-strip { display: none; }

/* One question fills the view rather than competing with the next. */
html[data-ui='v2'][data-v2] body.home-stepped .hmo-q { margin-bottom: var(--v2-s6); }
html[data-ui='v2'][data-v2] body.home-stepped .hmo-q[hidden] { display: none !important; }