/* Enrolment form page. Built on the design system's FormField, Checkbox and Notice.
   Phone first: one column, 48px+ controls, 16px+ text so iOS never zooms in. */
[hidden]:not([hidden=until-found i]) { display: none !important; }

.enrol { padding-top: var(--space-5); padding-bottom: var(--space-6); }
.enrol__inner { width: 100%; max-width: calc(44rem + 2 * var(--space-3)); margin: 0 auto; padding: 0 max(var(--space-3), env(safe-area-inset-right, 0px)) 0 max(var(--space-3), env(safe-area-inset-left, 0px)); box-sizing: border-box; display: grid; gap: var(--space-4); }
@media (min-width: 600px) { .enrol__inner { padding: 0 var(--space-4); } }
.enrol__intro { display: grid; gap: var(--space-3); }
.enrol__intro h1 { margin: 0; font-family: var(--font-display); }
.enrol__intro p { margin: 0; }
.enrol-back { font-size: 16px; line-height: 1.25; text-align: right; }
@media (max-width: 399px) { .enrol-back { font-size: 15px; max-width: 9.5em; } }

.enrol__form { display: grid; gap: var(--space-4); }
.enrol__group {
  margin: 0; min-width: 0; display: grid; gap: var(--space-3); align-content: start;
  background: var(--paper); border-radius: var(--radius-md); padding: var(--space-4) var(--space-3);
}
@media (min-width: 600px) { .enrol__group { padding: var(--space-4); } }
.enrol__group > legend { float: left; width: 100%; padding: 0; margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: 700; }
.enrol__group > legend + * { clear: both; }
.enrol__group .wt-field { max-width: none; }
.enrol__group > p { margin: 0; }
.enrol__star { color: var(--ink); }
.enrol__row { display: grid; gap: var(--space-3); }
@media (min-width: 600px) { .enrol__row { grid-template-columns: 1fr 1fr; } }

select.wt-field__input {
  appearance: none; -webkit-appearance: none; padding-right: 44px;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%231f2a55' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 16px 16px no-repeat;
}
.wt-field__label, .wt-field__hint { overflow-wrap: anywhere; }

.enrol__long { max-width: 60ch; line-height: 1.6; }
.enrol__choices { display: grid; gap: var(--space-3); }
@media (min-width: 600px) { .enrol__choices { display: flex; gap: var(--space-5); } }
.enrol__group .wt-check { min-height: 48px; align-items: center; }
.enrol__group .wt-check__box { margin-top: 0; }
.enrol__group .wt-check:has(.wt-check__box:focus-visible) span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

.enrol__agreement { margin: 0; padding: var(--space-3); display: grid; gap: var(--space-3); list-style: none; background: var(--lilac); border-radius: var(--radius-sm); font-size: 16px; line-height: 1.55; }
.enrol__agreement li { position: relative; padding-left: var(--space-4); }
.enrol__agreement li::before { content: ""; position: absolute; left: 4px; top: .6em; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--ink); }

.enrol__summary, .enrol__form .wt-notice, .enrol__done .wt-notice { max-width: none; }
.enrol__summary a { color: inherit; }
.wt-notice span { display: block; }

.enrol__actions { display: grid; gap: var(--space-3); justify-items: start; }
.enrol__actions p { margin: 0; }
.enrol__actions .wt-button { width: 100%; }
@media (min-width: 600px) { .enrol__actions { grid-template-columns: auto 1fr; align-items: center; } .enrol__actions .wt-button { width: auto; } }

.enrol__done { background: var(--paper); border-radius: var(--radius-md); padding: var(--space-4) var(--space-3); display: grid; gap: var(--space-3); }
@media (min-width: 600px) { .enrol__done { padding: var(--space-4); } }
.enrol__done > * { margin: 0; }
.enrol__steps { margin: 0; padding-left: 1.4em; display: grid; gap: var(--space-2); }

.enrol__summary, #enrol-fail, .enrol__done, .enrol__group, .wt-field { scroll-margin-top: 96px; }
.enrol__summary a { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Step by step (enrolment form) ---- */
.enrol__group > h2 { margin: 0; font-family: var(--font-display); outline-offset: 6px; }
.enrol__sub { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: var(--space-2); align-content: start; }
.enrol__sub > legend { padding: 0; margin-bottom: var(--space-1); }
.enrol__sub .wt-field__hint { max-width: 60ch; }
.enrol__lead-in { margin: 0; }
.enrol__quick { justify-self: start; min-height: 44px; padding-block: 8px; font-size: 15px; }

/* Choice chips: school year and photos. The real radio fills the chip, so the whole chip is the tap target. */
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: var(--space-2); }
.chips--two { grid-template-columns: 1fr 1fr; max-width: 22rem; }
.chip { position: relative; display: block; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: grid; place-items: center; min-height: 52px; padding: 0 var(--space-3); box-sizing: border-box; text-align: center;
  border: var(--stroke-doodle) solid var(--line); border-radius: var(--radius-pill); background: var(--paper); color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.2;
  transition: background-color var(--wt-duration-quick, 150ms) ease-out, border-color var(--wt-duration-quick, 150ms) ease-out;
}
.chip input:hover + span { border-color: var(--wonder-blue); }
.chip input:checked + span { background: var(--wonder-blue); border-color: var(--wonder-blue); color: var(--paper); }
.chip input:focus-visible + span { outline: var(--stroke-focus) solid var(--focus); outline-offset: 2px; }
.chip input[aria-invalid="true"] + span { border-color: var(--error); }
.chip input:checked[aria-invalid="true"] + span { border-color: var(--wonder-blue); }

/* Class choice: two wide chips with the dates underneath */
.chips--class { grid-template-columns: 1fr; max-width: 30rem; }
.chip--class span { place-items: start; justify-items: start; text-align: left; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); gap: 2px; }
.chip--class strong { font-size: 19px; }
.chip--class small { font-family: var(--font-body); font-weight: 400; font-size: 15px; line-height: 1.35; }
.chip--class input:disabled { cursor: not-allowed; }
.chip--class input:disabled + span { opacity: .6; }
@media (min-width: 700px) { .chips--class { grid-template-columns: 1fr 1fr; max-width: none; } }

/* Tick-any list (waitlist): real checkboxes, with "Other" opening a text box (works without JavaScript) */
.checks { display: grid; gap: var(--space-1); }
.checks .wt-check { min-height: 48px; align-items: center; }
.checks .wt-check__box { margin-top: 0; }
.checks .wt-check:has(.wt-check__box:focus-visible) strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.checks__when { display: block; font-size: 15px; line-height: 1.35; color: var(--deep-teal); }
.check-other { display: grid; gap: var(--space-2); }
.check-other__text { display: none; gap: var(--space-1); margin-left: calc(26px + var(--space-3)); }
.check-other:has(.check-other__box:checked) .check-other__text { display: grid; }

/* Progress */
.steps { display: grid; gap: var(--space-2); scroll-margin-top: 84px; }
.steps__count { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); }
.steps__bar { margin: 0; padding: 0; list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-2); }
.steps__bar li { height: 10px; border-radius: var(--radius-pill); background: var(--paper); border: 2px solid var(--ink); box-sizing: border-box; }
.steps__bar li.is-done { background: var(--ink); }
.steps__bar li.is-current { background: var(--wonder-blue); border-color: var(--wonder-blue); }

/* The intro shrinks to the title after step 1 so the form starts high on a phone */
.enrol[data-step]:not([data-step="0"]) .enrol__intro p { display: none; }

/* Check before you send */
.enrol__review { display: grid; gap: var(--space-2); background: var(--lilac); border-radius: var(--radius-sm); padding: var(--space-3); }
.enrol__review h3 { margin: 0; font-family: var(--font-display); }
.enrol__review-list { margin: 0; display: grid; gap: var(--space-2); }
.enrol__review-list > div { display: grid; gap: 2px; }
.enrol__review-list dt { font-size: 14px; font-weight: 700; }
.enrol__review-list dd { margin: 0; display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; font-size: 17px; overflow-wrap: anywhere; }
.enrol__change { flex: none; background: none; border: 0; padding: 8px 4px; min-height: 44px; font: inherit; font-size: 16px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.enrol__change:hover { color: var(--wonder-blue-pressed); }
.enrol__change:focus-visible { outline: var(--stroke-focus) solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* Buttons: Back and Next side by side, always reachable at the bottom of a phone screen */
.enrol__form.is-wizard .enrol__actions { grid-template-columns: auto 1fr; align-items: center; gap: var(--space-3); }
.enrol__form.is-wizard .enrol__actions .wt-button { width: auto; }
.enrol__form.is-wizard .enrol__actions .enrol__after { grid-column: 1 / -1; }
.enrol__form.is-wizard .enrol__prev[hidden] + #enrol-submit { grid-column: 1 / -1; }
.enrol__form.is-wizard #enrol-submit { width: 100%; }
@media (max-width: 699px) {
  .enrol__form.is-wizard .enrol__actions {
    position: sticky; bottom: 0; z-index: 5; margin: 0 calc(-1 * var(--space-3));
    padding: var(--space-3) var(--space-3) max(var(--space-3), env(safe-area-inset-bottom, 0px));
    background: var(--paper); box-shadow: 0 -2px 0 var(--ink);
  }
  .enrol__form.is-wizard .enrol__after { display: none; }
}
@media (min-width: 700px) {
  .enrol__form.is-wizard .enrol__actions { grid-template-columns: auto auto 1fr; justify-items: start; }
  .enrol__form.is-wizard #enrol-submit { width: auto; min-width: 12rem; }
  .enrol__form.is-wizard .enrol__prev[hidden] + #enrol-submit { grid-column: auto; }
  .enrol__form.is-wizard .enrol__after { grid-column: auto; }
}

/* A short fade-in when a form page opens, so moving from the course page is soft rather than a hard cut. It always finishes in a fraction of a second and is off for reduced motion. */
@keyframes enrol-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) { .enrol__inner { animation: enrol-in 240ms ease-out both; } }