/* ==========================================================================
   Greenhills — Online admission application (multi-step)
   Reuses the form primitives from careers.css; this file adds only the
   stepper, panels and review table.
   ========================================================================== */

.page-hero--apply { --hero-image: url('/assets/foundation.jpg'); }

.apply-shell { width: min(880px, 100%); margin: 0 auto; }

/* ── Progress ─────────────────────────────────────────────────────────── */
.stepper { margin: 0 0 1.5rem; }
.stepper-bar {
  height: 5px;
  border-radius: 999px;
  background: rgba(8, 27, 49, .1);
  overflow: hidden;
}
.stepper-fill {
  height: 100%;
  width: 20%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--blue-700));
  transition: width .3s ease;
}
.stepper-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: .6rem;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--muted);
}
.stepper-meta strong { color: var(--navy-950); font-size: var(--text-card); }
.stepper-count { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── Steps ────────────────────────────────────────────────────────────── */
.step { display: none; }
.step.is-active { display: block; }
.step > h2 {
  scroll-margin-top: 92px;   /* clears the fixed header when focus moves */
  margin: 0 0 .3rem;
  font-size: var(--card-title);
  line-height: var(--lh-title);
  color: var(--navy-950);
}
/* The heading is focused programmatically on step change so screen readers
   announce it. That is not a keyboard interaction, so it must not paint a
   focus ring — :focus-visible still covers real keyboard focus. */
.step > h2:focus { outline: none; }

.step > .step-hint {
  margin: 0 0 1.25rem;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.step-nav {
  display: flex;
  gap: .75rem;
  justify-content: space-between;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.step-nav .spacer { flex: 1; }

/* Conditional blocks (stream, boarding, separate guardian). */
.conditional[hidden] { display: none; }

/* ── Review ───────────────────────────────────────────────────────────── */
.review-list { display: grid; gap: .5rem; margin: 0 0 1.25rem; }
.review-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.review-group > h3 {
  margin: 0;
  padding: .7rem 1rem;
  background: var(--mist);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue-700);
}
.review-group dl { margin: 0; padding: .4rem 0; }
.review-group div {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1rem;
  padding: .45rem 1rem;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.review-group dt { flex: 0 0 12rem; color: var(--muted); }
.review-group dd { margin: 0; flex: 1 1 12rem; color: var(--navy-950); font-weight: 600; word-break: break-word; }

@media (max-width: 680px) {
  .review-group dt { flex-basis: 100%; }
  .step-nav { flex-wrap: wrap; }
  .step-nav .primary-button,
  .step-nav .outline-button { flex: 1 1 auto; }
  .step-nav .spacer { display: none; }
}