/* The valuation request's three steps, /sell/home-value/ only
   (config/pages.php `styles`). Counted in that page's budget. */

.form [hidden] {
  display: none;
}
.form__step {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.form__step + .form__step {
  margin-top: var(--s7);
}
.form__step legend {
  padding: 0;
  margin-bottom: var(--s5);
  font-size: var(--f2);
  font-weight: var(--w-str);
  line-height: 1.25;
  color: var(--text);
}
.form__step-n,
.stepper {
  font-family: var(--mono);
  font-size: var(--f-2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mark-text);
}
.form__step-n {
  display: block;
}

/* Three chips, equal width; the titles show from 600px, the legend says it below. */
.stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s2);
  margin-bottom: var(--s6);
}
.stepper li {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2);
  border: 1px solid var(--rule);
  border-radius: var(--rr);
  background: var(--raised);
  color: var(--mut);
}
.stepper li[aria-current] {
  border-color: var(--acc);
  color: var(--text);
}
.stepper__n {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ground);
}
.stepper [aria-current] .stepper__n {
  background: var(--acc);
  color: var(--white);
}
.form__actions--steps {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

@media (max-width: 37.49em) {
  .stepper__t {
    display: none;
  }
  .stepper li {
    justify-content: center;
  }
}

@media (min-width: 37.5em) {
  .form__grid--3 > .field:nth-child(-n + 3) {
    grid-column: span 2;
  }
}