/* The step-at-a-time form: a hairline card, one step visible. */

.stepper {
  border: var(--hair);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--bg);
}

.stepper-kicker { margin-bottom: var(--md); }

/* Phones: the card's outline and padding go, the horizontal room is too
   precious (the section's own gutter is enough) */
@media (max-width: 700px) {
  .stepper { border: none; padding: 0; }
}

.step { animation: step-in 0.4s ease both; scroll-margin-top: calc(var(--header-h) + var(--sm)); }   /* Next/Back scroll the step here, clear of the fixed header (scripts/components/stepper-form.js) */
.step h3 { font-size: 1.5rem; font-weight: var(--light); margin: 0.3rem 0 0.5rem; }
.step-p { color: var(--text-2); margin-bottom: var(--md); }
.step .field { margin-bottom: var(--md); }
.step .field:last-child { margin-bottom: 0; }

/* A choice group: the options three to a row on desktop, two on tablets,
   one on phones, the optional "other" box under them */
.choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.2rem 1.25rem; }
@media (max-width: 700px) { .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .choices { grid-template-columns: 1fr; } }
/* longer options ask for fewer per row (components/stepper-form.js `columns`) */
@media (min-width: 481px) { .choices.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.choices.columns-1 { grid-template-columns: 1fr; }
.choices.inline { display: flex; flex-wrap: wrap; }   /* a few one-word options (Call · Text · Email) in one row, phones too */
.choices .choice { margin: 0; padding: 0.3rem 0; }
.choices + input { margin-top: 0.6rem; }

@keyframes step-in { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .step { animation: none; } }

.stepper-nav { display: flex; justify-content: space-between; gap: 0.6rem; margin-top: var(--md); }
.stepper-nav [data-back] { margin-right: auto; }
.stepper-nav [data-back][hidden] + [data-next], .stepper-nav [data-back][hidden] ~ [data-send] { margin-left: auto; }

.stepper.is-done .steps, .stepper.is-done .stepper-nav, .stepper.is-done .stepper-kicker { display: none; }
.stepper-done h3 { font-size: 1.5rem; font-weight: var(--light); margin: 0.3rem 0 0.5rem; }
.stepper[data-sending] .stepper-nav .button { opacity: 0.6; pointer-events: none; }