/* ══ Onboarding: request, confirmation, registration ══════════════════
   templates/onboarding/get_started.html
   templates/onboarding/get_started_submitted.html
   templates/onboarding/register.html

   These three pages share the landing shell but are not marketing pages:
   they are long forms an administrator fills in once, on a desktop, on
   behalf of their institution. landing.css styles the short contact form
   (a 560px single column), and the Get Started form has four times as
   many fields — in that column it renders as a 3,300px ribbon of inputs
   with the page heading floating above nothing.

   Loaded AFTER landing.css (see the extra_head block in each template),
   so the widths and the .contact-form flex column can be overridden here.

   NB: never use the `background` shorthand on a <select> in this file —
   forms.css draws the dropdown arrow as a background-image and the
   shorthand erases it. Use background-color. ─────────────────────── */

.onboarding-section {
  padding: var(--sp-12) var(--page-gutter) var(--sp-16);
}
.onboarding-inner {
  max-width: 900px;
  margin: 0 auto;
}
.onboarding-head {
  text-align: center;
  margin-bottom: var(--sp-8);
}
.onboarding-head .section-sub {
  margin-bottom: var(--sp-8);
}

/* ── Where you are in the flow ────────────────────────────────────
   The single most common misreading of this page is "I just made an
   account". Three steps, stated before the first field, cost one strip
   of vertical space and set the expectation the notice then repeats. */
.onboarding-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
}
.onboarding-step {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  background: var(--clr-surface);
}
.onboarding-step-num {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--clr-bg);
  color: var(--clr-text-muted);
  display: grid;
  place-items: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
}
.onboarding-step-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
}
.onboarding-step-hint {
  display: block;
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--clr-text-muted);
  line-height: 1.4;
}
.onboarding-step.is-current {
  border-color: var(--clr-primary);
  background: var(--clr-primary-light);
}
.onboarding-step.is-current .onboarding-step-num {
  background: var(--clr-primary);
  color: #fff;
}

/* ── "This does not create your account" callout ──────────────────
   .alert is display:flex (it is built for the fixed toast stack), so
   inline this notice's <strong> became flex item 1 and the sentence
   after it flex item 2: the bold lead squashed into a four-line column
   beside its own explanation. Block layout, lead on its own line. */
.onboarding-notice {
  display: block;
  margin-bottom: var(--sp-8);
  padding: var(--sp-4) var(--sp-5);
  border-left: 4px solid var(--clr-info);
  border-radius: var(--radius-md);
  box-shadow: none;
  text-align: left;
  line-height: 1.5;
}
.onboarding-notice strong {
  display: block;
  margin-bottom: var(--sp-1);
  font-weight: var(--weight-semibold);
}

/* ── The form panel ───────────────────────────────────────────────── */
.onboarding-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-8);
}
.onboarding-card + .onboarding-card {
  margin-top: var(--sp-6);
}

/* Overrides .contact-form's flex column: the sections below lay
   themselves out, and a flex column stretches the submit button into a
   full-width slab that reads as a banner rather than an action. */
.onboarding-form {
  display: block;
}

.form-section + .form-section {
  margin-top: var(--sp-8);
}
.form-section-heading {
  margin: 0 0 var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--clr-border);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
}

/* Two columns for the short fields. Address lines, notes and anything
   with a hint under it claim the full width with .form-row--wide, so a
   hint never sits in a half-width gutter next to an unrelated input. */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}
.form-grid > .form-row {
  margin-bottom: 0;
  min-width: 0;
}
.form-row--wide {
  grid-column: 1 / -1;
}

/* 16px in the field: below it, iOS zooms the whole page on focus and
   the administrator loses the form they were halfway through. */
.onboarding-form .form-row input,
.onboarding-form .form-row select,
.onboarding-form .form-row textarea {
  font-size: var(--text-base);
  width: 100%;
}
.onboarding-form .form-row textarea {
  resize: vertical;
}
.onboarding-form .form-row label {
  color: var(--clr-text);
}
.onboarding-form .hint {
  margin: 0;
  line-height: 1.45;
}

/* A checkbox whose label wraps (terms acceptance) cannot be a flex row:
   each text node and each link become separate flex items on one line.
   Inline-block box, hanging indent, text flows normally. */
.onboarding-form .checkbox-label {
  display: block;
  position: relative;
  padding-left: 28px;
  font-size: var(--text-sm);
  line-height: 1.5;
}
.onboarding-form .checkbox-label input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
}

/* ── Submit row ───────────────────────────────────────────────────── */
.onboarding-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--clr-border);
}
.onboarding-actions .btn {
  flex: 0 0 auto;
}
.onboarding-actions-note {
  flex: 1 1 260px;
  margin: 0;
  font-size: var(--text-xs);
  color: var(--clr-text-muted);
  line-height: 1.45;
}

/* ── Confirmation page ────────────────────────────────────────────── */
.onboarding-reference {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: var(--sp-8);
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  background: var(--clr-surface);
  font-size: var(--text-sm);
  color: var(--clr-text-muted);
}
.onboarding-reference strong {
  font-size: var(--text-base);
  color: var(--clr-text);
  letter-spacing: .04em;
}
.onboarding-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: onboarding-stage;
}
.onboarding-timeline li {
  position: relative;
  padding: 0 0 var(--sp-6) var(--sp-10);
  counter-increment: onboarding-stage;
}
.onboarding-timeline li:last-child {
  padding-bottom: 0;
}
.onboarding-timeline li::before {
  content: counter(onboarding-stage);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  background: var(--clr-primary-light);
  color: var(--clr-primary);
  display: grid;
  place-items: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}
/* The connecting rail. Stops at the last marker rather than trailing
   off past the final step. */
.onboarding-timeline li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 30px;
  bottom: 4px;
  width: 1px;
  background: var(--clr-border);
}
.onboarding-timeline-title {
  display: block;
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  margin-bottom: 2px;
}
.onboarding-timeline p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--clr-text-muted);
  line-height: 1.5;
}

/* ── Verified details on the registration page ────────────────────── */
.onboarding-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4) var(--sp-6);
  margin: 0;
}
.onboarding-facts > div {
  min-width: 0;
}
.onboarding-facts dt {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--clr-text-muted);
  margin-bottom: 2px;
}
.onboarding-facts dd {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  overflow-wrap: anywhere;
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .onboarding-steps {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
  }
  .onboarding-step {
    padding: var(--sp-3) var(--sp-4);
  }
}

@media (max-width: 720px) {
  .onboarding-section {
    padding: var(--sp-8) var(--sp-4) var(--sp-12);
  }
  .onboarding-card {
    padding: var(--sp-5);
  }
  .form-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .onboarding-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  /* The note's flex-basis is a WIDTH on the desktop row and would become a
     260px HEIGHT once the row turns into a column — a paragraph of small
     grey text with a quarter-screen of blank card under it. */
  .onboarding-actions-note {
    flex: 0 0 auto;
  }
  .onboarding-actions .btn {
    width: 100%;
    justify-content: center;
  }
}