/* Seller Connect USA — /get-started/ wizard chrome (EXPANSION-SPEC §4).
   Reuses the global tokens from styles.css (colors, fonts, radius -- all defined on :root there,
   loaded before this file) and the generic, already-shared .btn / .btn-ghost / .hp-field / #lead-form
   / #lead-submit / #form-status rules. It deliberately does NOT add class="scu-form": that
   vocabulary's input rule is `.scu-form input:not([type="checkbox"]):not([type="hidden"])`, which
   does not exclude type="radio" -- applying it here would stretch every situation/condition radio
   into a full-width, bordered, 50px-tall box meant for a text field. Every new selector below is
   scoped under .wizard-* so it can never collide with another page's or agent's classes. */

.wizard-lede {
  color: var(--ink-soft);
  font-size: 1.0625rem;
  margin-block: 0.75rem 0.5rem;
  max-width: 60ch;
}

.wizard-hint {
  color: var(--ink-soft);
  font-size: 0.875rem;
  margin-bottom: 1.75rem;
}

/* ---------- form shell ---------- */
.wizard-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
}

/* ---------- progress ---------- */
.wizard-progress {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.wizard-progress[hidden] { display: none; }

.wizard-progress-text {
  margin: 0;
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-dark);
}

.wizard-progress-track {
  height: 6px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
}
.wizard-progress-fill {
  height: 100%;
  width: 25%;
  background: var(--accent);
  transition: width 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
  .wizard-progress-fill { transition: none; }
}

/* Screen-reader-only live region: announces step changes without a visible duplicate
   of the on-screen "Step X of 4" text (which is already visible via .wizard-progress-text). */
.wizard-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- steps ---------- */
.wizard-step {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  border: 0;
  margin: 0;
  padding: 0;
}
/* Author rules always win over the UA stylesheet's own `[hidden]{display:none}`, so the
   plain .wizard-step{display:flex} above would otherwise silently defeat `hidden` entirely --
   this rule (one extra attribute selector, so strictly more specific) restores it on purpose. */
.wizard-step[hidden] { display: none; }

.wizard-step > legend,
.wizard-subgroup > legend {
  padding: 0;
  font-family: var(--font-heading-text);
  font-weight: 400;
  color: var(--ink);
}
.wizard-step > legend {
  font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  margin-bottom: 0.15rem;
}
/* Programmatic focus target on every step change (assets/wizard.js) -- a plain :focus,
   not :focus-visible, so the ring is guaranteed regardless of the browser's own keyboard-vs-
   pointer heuristic for scripted .focus() calls; tabindex="-1" keeps it out of normal Tab order. */
.wizard-step > legend:focus {
  outline: 3px solid var(--accent-dark);
  outline-offset: 3px;
}

.wizard-subgroup {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.wizard-subgroup > legend {
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-body);
  color: var(--ink);
  margin-bottom: 0.25rem;
}

/* ---------- text/email/tel fields ---------- */
.wizard-field { display: flex; flex-direction: column; }
.wizard-field label {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: 0.45rem;
  color: var(--ink);
}
.wizard-field input {
  display: block;
  width: 100%;
  padding: 0.9rem 1.1rem;
  font-size: 16px;
  font-family: inherit;
  color: var(--ink);
  background: var(--bg-alt);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  min-height: 50px;
  transition: border-color 0.15s ease;
}
.wizard-field input::placeholder { color: var(--ink-soft); opacity: 0.75; }
.wizard-field input:hover:not([disabled]) { border-color: var(--ink-soft); }
.wizard-field input:focus-visible {
  outline: 3px solid var(--accent-dark);
  outline-offset: 2px;
}

/* ---------- radio "cards" (situation / condition) ---------- */
.wizard-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 560px) {
  .wizard-options { grid-template-columns: 1fr 1fr; }
}

/* The whole label is the tap target (native <label for> behaviour, no JS required) --
   min-height 44px meets the radio-target floor even though the visible dot is smaller. */
.wizard-option {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 44px;
  padding: 0.75rem 1rem;
  background: var(--bg-alt);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.9375rem;
  color: var(--ink);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.wizard-option:hover { border-color: var(--ink-soft); }
/* Two ways to the same "checked" look: :has() for browsers that support it (works even
   with JS disabled), plus a JS-toggled class (assets/wizard.js) for the rest. Belt and
   suspenders -- neither is load-bearing for correctness, only for this visual affordance. */
.wizard-option:has(input:checked),
.wizard-option.wizard-option--checked {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.wizard-option:has(input:focus-visible) {
  outline: 3px solid var(--accent-dark);
  outline-offset: 2px;
}
.wizard-option input[type="radio"] {
  width: 22px;
  height: 22px;
  min-width: 22px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--accent-dark);
  cursor: pointer;
}

/* ---------- consent ---------- */
.wizard-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.25rem;
  cursor: pointer;
}
.wizard-consent label {
  flex: 1 1 auto;
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink);
  cursor: pointer;
}
.wizard-consent input[type="checkbox"] {
  width: 26px;
  height: 26px;
  min-width: 26px;
  margin: 0.15rem 0 0;
  flex-shrink: 0;
  accent-color: var(--accent-dark);
  cursor: pointer;
}
.wizard-consent input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--accent-dark);
  outline-offset: 3px;
}

/* ---------- step navigation (Back / Next -- assets/wizard.js only, never in the base HTML) ---------- */
.wizard-nav {
  display: flex;
  gap: 0.85rem;
  margin-top: 0.25rem;
}
@media (max-width: 480px) {
  .wizard-nav { flex-direction: column; }
  .wizard-nav .btn,
  .wizard-nav .btn-ghost { width: 100%; }
}