/* ==================================================================
   Sponsorship form steps.

   Seventeen questions in one scroll is a wall on a phone. public/js/
   form-steps.js turns the four fieldsets the form already ships into four
   steps and builds the progress widget; everything in this file styles
   that widget.

   Nothing here hides a step. Visibility is the `hidden` property, set by
   the script, so the form still works if this stylesheet never arrives —
   and with the script off, none of these selectors match anything.

   Colors are tokens from site.css only, so light and dark both work.
   ================================================================== */

/* ---------------- the step head: count, bar, dots ---------------- */

.step-head {
  margin: 0 0 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.step-count {
  display: flex;
  flex-wrap: wrap;
  gap: 0 .4rem;
  margin: 0 0 .6rem;
  font-size: .95rem;
  color: var(--text-soft);
}
.step-count b { color: var(--text); }
.step-count-name { color: var(--text-soft); }

.step-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  overflow: hidden;
}
.step-bar-fill {
  display: block;
  height: 100%;
  width: 25%;
  border-radius: 999px;
  background: var(--brand-700);
  transition: width .28s ease;
}

.step-dots {
  display: flex;
  gap: .25rem;
  list-style: none;
  margin: .6rem 0 0;
  padding: 0;
}
.step-dot {
  flex: 1 1 0;
  min-width: 0;
}

.step-dot-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  width: 100%;
  min-height: 44px;
  padding: .35rem .3rem;
  font: inherit;
  font-size: .84rem;
  line-height: 1.25;
  color: var(--text-soft);
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.step-dot-btn:hover { background: var(--surface-sunk); color: var(--text); }
.step-dot-btn:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

.step-dot-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.step-dot-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--text-soft);
  background: var(--surface-sunk);
  border: 1px solid var(--border-strong);
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.step-dot[data-state="done"] .step-dot-mark {
  background: var(--ok-bg);
  color: var(--ok-fg);
  border-color: var(--ok-br);
}
.step-dot[data-state="current"] .step-dot-mark {
  background: var(--brand-700);
  color: var(--on-brand);
  border-color: var(--brand-700);
}
.step-dot[data-state="current"] .step-dot-btn {
  color: var(--text);
  font-weight: 700;
}

/* The server rejected something in this step. Says so even from three steps
   away, which is the whole point of showing the dots. */
.step-dot[data-error] .step-dot-mark {
  background: var(--err-bg);
  color: var(--err-fg);
  border-color: var(--err-br);
}
.step-dot[data-error] .step-dot-btn { color: var(--err-fg); }

/* ---------------- the steps themselves ---------------- */

form[data-steps-on] .form-step {
  margin-bottom: 0;
  scroll-margin-top: 5rem;
}
/* Focus lands here from Next/Back so the step heading gets read out. The
   step is tabindex="-1" and so unreachable by keyboard on its own — nobody
   arrives here by tabbing — and a ring drawn around a whole screenful of
   questions reads as an error state rather than a cursor. The visible
   indicator stays on the dots and the "Step 3 of 4" line. */
form[data-steps-on] .form-step:focus,
form[data-steps-on] .form-step:focus-visible { outline: none; }

/* ---------------- Back / Next ---------------- */

.step-nav {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
/* On the last step the real .form-actions row is right above with its own
   rule, so this one drops its border and just carries Back. */
.step-nav[data-last] {
  margin-top: .85rem;
  padding-top: 0;
  border-top: 0;
}
.step-nav .btn { min-height: 44px; }
.step-next { margin-left: auto; }

/* ---------------- phones ---------------- */

@media (max-width: 620px) {
  /* Four names will not fit across a 360px screen. The count line above
     already says which step you are on, so the dots go numbers-only. */
  .step-dot-label {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .step-dot-mark { width: 30px; height: 30px; font-size: .9rem; }

  /* Stacked, and Next on top: it is the button people want. */
  .step-nav {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .step-nav .btn { width: 100%; justify-content: center; }
  .step-next { margin-left: 0; }

  .step-count { font-size: 1rem; }
}

/* ---------------- motion and paper ---------------- */

@media (prefers-reduced-motion: reduce) {
  .step-bar-fill,
  .step-dot-btn,
  .step-dot-mark { transition: none; }
}

@media print {
  /* Printing a wizard should print the whole application, not one step. */
  form[data-steps-on] .form-step {
    display: block !important;
    margin-bottom: 2rem;
  }
  .step-head,
  .step-nav { display: none !important; }
}