/* ============================================================
   PRIME ACADEMY GROUP — v6.1.2
   page-register.css — Register, and nothing else.

   Load order: fonts.css → system.css → shared.css → page-register.css

   THE FORM FIELDS ARE NOT IN HERE ON PURPOSE.

   .field, .field--wide, .field label, .field-hint, .form, .form[hidden],
   .form-actions, .form-error, .consent and .ilink are prime-2's, written for
   the Contact page, and are moving from page-contact.css into shared.css so
   both pages use one set. Until they land, the form on this page is unstyled
   and that is the correct state: a second private copy of a form vocabulary is
   the exact drift the parallel-session rules exist to prevent.

   Four things to honour when they arrive, from prime-2:
     · the submit keeps its <span class="btn-label"> — the busy state rewrites it
     · the select's chevron and its forced-colors block travel together
     · field radius is --r-chip, not --r-card: 16px on a 46px control is a squircle
     · ::placeholder is --faint

   What lives here is the page's own: a shorter opening, the progress rail, the
   course picker, the step frame and the thank you.
   ============================================================ */

/* ═══ 1 · THE OPENING ═══
   The shared one, at the shared height. It was 44svh against the site's 52svh
   for a while, on the reasoning that a page whose whole job is a short form
   should put the form on the first screen. Side by side with the other seven
   inner pages it just read as the odd one out — 375px against 444 — which
   costs more than the 69px of scrolling saved. Only the crop is Register's. */
.open-bg img{object-position:center 38%}

/* ═══ 2 · THE FORM PANEL ═══
   Two columns: the work on the left, and on the right the thing the work is
   for. A form on its own across a full panel makes every field a long thin
   slot with nothing beside it; a form on its own down the middle of a panel
   leaves two empty margins. Giving the spare half to the certificate answers
   "what do I actually get" without a paragraph saying so. */
.reg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--pad);align-items:start}
.reg-main{min-width:0}
.reg .head{margin-bottom:var(--s6)}
.reg .head .lead{max-width:none}

/* The picture parks and stays. This is the one place on the site the picture
   does NOT match its column: the rule About, Plans and Online Training follow
   assumes a column of fixed height, and this one grows when step one swaps for
   a form. Matched to the column it would resize mid-flow and slide away while
   somebody was typing, so it holds a square and sticks instead.
   Square, not portrait: the source is a landscape desk shot, and cropping it
   taller than square puts the certificate's edges against the frame. */
.reg-fig{position:sticky;top:var(--s5);margin:0;aspect-ratio:1/1;
  border-radius:var(--r-card);overflow:hidden;background:var(--wash)}
.reg-fig img{width:100%;height:100%;display:block;object-fit:cover;
  object-position:center;filter:saturate(.9) contrast(1.02);
  transition:filter var(--fast) var(--ease),transform var(--fast) var(--ease)}
/* The same hover the certificate carries on Online Training: it warms to full
   colour and comes forward a little. It warms rather than lifts because there
   is nothing here to press — the picture is what the form is for, not a way
   of getting anywhere. */
.reg-fig:hover img{filter:none;transform:scale(1.035)}
/* The same tint the certificate carries on Online Training, so the two
   croppings of one photograph do not read as two different photographs. */
.reg-fig::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--deep) 8%, transparent) 0%,
    color-mix(in srgb, var(--deep) 2%, transparent) 46%,
    color-mix(in srgb, var(--navy) 15%, transparent) 100%)}

/* Four fields in two rows: names on one, the two ways of reaching somebody on
   the other. Below this the half column is too narrow to hold a pair, and the
   shared rule that collapses them lives in page-contact.css, so Register
   carries its own. */
@media (max-width:1180px){ .reg .form{grid-template-columns:1fr} }

/* ── THE RAIL ──
   Two steps, stated before anybody starts, because "how long is this" is the
   question a form always raises. A list, not a decoration: the current one
   carries aria-current="step" and the finished one is marked done, so the
   state is announced as well as drawn. */
/* An author `display` beats the browser's own `[hidden]` whatever the
   specificity, so anything in here given a display of its own stops obeying
   the attribute the script hides it with. `.rail` is a flex row and did
   exactly that: it survived the thank-you and sat above it. One guard rather
   than one rule per component, so the next thing given a display cannot
   reintroduce it. */
.reg-main [hidden]{display:none}

.rail{list-style:none;display:flex;align-items:center;gap:var(--s3);
  margin:0 0 var(--s7);padding:0}
.rail-item{display:flex;align-items:center;gap:var(--s3);
  color:var(--faint);
  transition:color var(--fast) var(--ease)}
/* The hairline between the two, drawn by the second one so there is no stray
   element in the markup for something purely visual. */
.rail-item + .rail-item::before{content:'';width:clamp(24px,6vw,64px);height:1px;
  background:var(--hair);margin-right:var(--s3)}
.rail-n{width:28px;height:28px;border-radius:var(--r-chip);flex:none;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:600;font-size:.8125rem;
  background:var(--wash);color:var(--faint);
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease)}
.rail-t{font-family:var(--font-display);font-weight:500;font-size:var(--t-small);
  letter-spacing:-.01em;white-space:nowrap}
.rail-item[aria-current="step"]{color:var(--ink)}
.rail-item[aria-current="step"] .rail-n{background:var(--deep);color:#fff}
/* A finished step stays legible rather than going grey: a reader looking back
   at it wants to know it is done, not that it is disabled. */
.rail-item.is-done{color:var(--muted)}
.rail-item.is-done .rail-n{background:color-mix(in srgb, var(--deep) 11%, var(--white));
  color:var(--deep)}

.step h3{margin-bottom:var(--s5)}

/* ── THE COURSE PICKER ──
   Real buttons, not radio inputs dressed up: choosing one moves the form on,
   which is a press rather than a setting. Each one is a card because it
   carries a name and a line about who it is for, and the three are the same
   three cards, in the same words, as the ones on Online Training. */
.picks{list-style:none;display:flex;flex-direction:column;gap:var(--s3);
  margin:0 0 var(--s5);padding:0}
.pick{display:grid;grid-template-columns:minmax(0,1fr) 24px;
  column-gap:var(--s4);align-items:center;width:100%;text-align:left;
  background:var(--panel);border:1px solid var(--hair);
  border-radius:var(--r-card);padding:var(--s5);cursor:pointer;
  font:inherit;color:inherit;
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease),
             border-color var(--fast) var(--ease)}
/* It lifts, because pressing it does something. Same split as everywhere else
   on the site: a thing you can press rises, a thing you cannot only warms. */
.pick:hover{transform:translateY(-4px);box-shadow:var(--lift);
  border-color:color-mix(in srgb, var(--deep) 30%, transparent)}
.pick:focus-visible{outline:2px solid var(--deep);outline-offset:3px}
.pick-name{display:block;font-family:var(--font-display);font-weight:500;
  font-size:1rem;line-height:1.3;letter-spacing:-.01em;color:var(--ink);
  margin-bottom:4px}
.pick-note{display:block;font-size:var(--t-small);line-height:var(--lh-small);
  color:var(--muted);text-wrap:pretty}
.pick-go{grid-column:2;grid-row:1/3;align-self:center;
  color:var(--deep);display:flex}
.pick-go svg{width:16px;height:16px;
  transition:transform var(--fast) var(--ease)}
.pick:hover .pick-go svg{transform:translateX(3px)}

.step-foot{max-width:none;margin:0;font-size:var(--t-small);
  line-height:var(--lh-small)}

/* ── STEP TWO'S HEADER ──
   The way back and the course already chosen, on one line. Whoever arrived
   from a course button never picked anything on this page, so the card they
   came in with has to be visible or the form is asking for details towards
   nothing they can see. */
.step-top{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:var(--s4);margin-bottom:var(--s6);
  padding-bottom:var(--s5);border-bottom:1px solid var(--hair)}
.back{display:inline-flex;align-items:center;gap:var(--s2);
  background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--font-display);font-weight:500;font-size:var(--t-small);
  color:var(--muted);
  transition:color var(--fast) var(--ease)}
.back:hover{color:var(--deep)}
.back:focus-visible{outline:2px solid var(--deep);outline-offset:3px;
  border-radius:var(--r-chip)}
/* The shared arrow points right, so the one that goes back is turned round
   rather than a second glyph being introduced for it. */
.back-ico{display:flex}
.back-ico svg{width:14px;height:14px;transform:rotate(180deg);
  transition:transform var(--fast) var(--ease)}
.back:hover .back-ico svg{transform:rotate(180deg) translateX(3px)}

.chosen{margin:0;max-width:none;text-align:right}
.chosen .tag{display:block;margin-bottom:2px}
.chosen b{font-family:var(--font-display);font-weight:500;font-size:var(--t-text);
  color:var(--ink)}

/* The note under the fields. Quieter than the consent line above it: one is a
   thing to agree to, the other is an explanation. */
.form-note{max-width:none;margin:0;font-size:var(--t-fine);
  line-height:var(--lh-fine);color:var(--faint)}

/* ═══ 3 · THE THANK YOU ═══
   Replaces the whole thing rather than appearing under it. Somebody who has
   just finished has no use for the form, the rail or the heading that told
   them how many steps there were. */
.done{text-align:center;padding:var(--s7) 0}
/* The one place on the site a mark is this large. It is the only thing on the
   screen at that moment, and a tick at chip size would look like a note. */
.done-mark{display:inline-flex;align-items:center;justify-content:center;
  width:72px;height:72px;border-radius:var(--r-card);font-size:34px;
  background:var(--deep);color:#fff;margin-bottom:var(--s6)}
.done h2{margin-bottom:var(--s4);text-wrap:balance}
.done .lead{margin:0 auto var(--s4);max-width:56ch}
.done p:not(.lead){margin:0 auto;max-width:56ch;font-size:var(--t-small);
  line-height:var(--lh-small)}
.done-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--s5);margin-top:var(--s7)}
.done:focus{outline:none}

/* Stacked: the form first, because it is what the page is for, and the
   picture under it at 4:3 the way every other stacked pair on the site sits. */
@media (max-width:900px){
  .reg{grid-template-columns:1fr;gap:var(--s6)}
  .reg-fig{position:static;aspect-ratio:4/3}
}

@media (max-width:560px){
  /* The rail's connector is the first thing to give: two labels and a line
     will not fit across a phone. */
  .rail-item + .rail-item::before{display:none}
  .rail{gap:var(--s4)}
  .pick{padding:var(--s4)}
  .step-top{flex-direction:column;align-items:flex-start}
  .chosen{text-align:left}
  .done-cta{flex-direction:column;align-items:stretch;gap:var(--s4)}
  .done-cta .link{justify-content:center}
}