/*
 * rmc-signup-v2.css
 *
 * Wave L7 (v3.61.8 — 2026-05-22): public school-signup form 2.0.
 *
 * Two new components:
 *   1. .rmc-signup-type-cards  — 5-card school-type radiogroup
 *      (K-12 / Preschool / College / University / Mixed)
 *   2. .rmc-signup-done         — post-signup "what happens next" view
 *      with workspace URL preview + 3-step activation timeline + migration
 *      acknowledgement when intent was captured at signup
 *
 * Scoped to the auth-shell so it cannot leak into tenant or operator
 * surfaces. The dark backdrop in the existing /signup/ design is
 * preserved via the existing .auth-shell rule cascade.
 */


/* ---------- School-type radiogroup ---------- */

.rmc-signup-type-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.rmc-signup-type-card {
  flex: 1 1 96px;
  min-width: 96px;
  max-width: 140px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 8px;
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.12));
  border-radius: 10px;
  background: var(--surface-overlay, rgba(255, 255, 255, 0.04));
  color: var(--text-primary, #f5f5f5);
  cursor: pointer;
  user-select: none;
  isolation: isolate;
  contain: layout style;
  transition: border-color 160ms ease-out, transform 160ms ease-out, background-color 160ms ease-out;
}

.rmc-signup-type-card:hover,
.rmc-signup-type-card:focus-within {
  border-color: var(--color-primary-400, #818CF8); /* off-token-allow: signup-card-hover-accent */ /* theme-locked-allow: brand-token */
  transform: translateY(-1px);
}

.rmc-signup-type-card--selected {
  border-color: var(--color-primary-500, #6366F1); /* off-token-allow: signup-card-selected-accent */ /* theme-locked-allow: brand-token */
  background: color-mix(in oklab, var(--color-primary-500, #6366F1) 14%, transparent); /* theme-locked-allow: brand-token-mix */
}

.rmc-signup-type-card__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.rmc-signup-type-card__glyph {
  font-size: 1.25rem;
  line-height: 1;
}

.rmc-signup-type-card__title {
  font-size: 0.825rem;
  font-weight: 600;
  text-align: center;
}

/* Secondary card body — typical-ages on school-type cards, region on language cards. */
.rmc-signup-type-card__sub {
  font-size: 0.6875rem;
  text-align: center;
  color: var(--text-secondary, rgba(255, 255, 255, 0.65));
  line-height: 1.2;
}

/* Wave 6 (v3.62.8 2026-05-22): language-picker variant — wider cards
   accommodate native-name + region label without truncation. */
.rmc-signup-type-cards--language {
  /* Slightly larger gap + min so non-Latin scripts (Arabic / CJK / Devanagari)
     don't crowd. */
  gap: 10px;
}

.rmc-signup-type-cards--language .rmc-signup-type-card {
  flex: 1 1 160px;
  min-width: 160px;
  max-width: 220px;
  padding: 12px 10px;
}

/* Wave 6 (v3.62.8) — "Recommended" badge on the country-default language. */
.rmc-signup-type-card__badge {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-primary-500, #6366F1) 22%, transparent);  /* theme-locked-allow: brand-token-mix */
  color: var(--color-primary-100, #E0E7FF);  /* off-token-allow: signup-badge-brand-tint */ /* theme-locked-allow: brand-token */
}

/* Wave 6 (v3.62.8) — small "Region-specific education system" hint
   shown when a language carries its own education-system overlay (CM-EN/FR,
   CA-EN/FR, BE NL/FR/DE, CH 4 lang, IN-HI, ZA Afrikaans, etc.). */
.rmc-signup-type-card__hint {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 500;
  text-align: center;
  margin-top: 2px;
  padding: 2px 6px;
  border-radius: 4px;
  background: color-mix(in oklab, var(--text-secondary, rgba(255,255,255,0.45)) 14%, transparent);  /* theme-locked-allow: hint-tint-secondary */
  color: var(--text-secondary, rgba(255, 255, 255, 0.78));
  line-height: 1.2;
}


/* ---------- Vendor select polish ---------- */

.rmc-signup-vendor-select {
  background-position: right 12px center;
}


/* ---------- Signup-done success page ---------- */

.rmc-signup-done {
  /* Root hook on the .auth-shell section so we can scope further
     adjustments without touching the global auth-shell rule. */
  isolation: isolate;
  contain: layout style;
}

.rmc-signup-done__card {
  text-align: left;
  max-width: 560px;
  margin: 0 auto;
}

.rmc-signup-done__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: color-mix(in oklab, var(--ds-success, #10B981) 14%, transparent); /* theme-locked-allow: success-tint-mix */
  color: var(--ds-success, #10B981); /* theme-locked-allow: success-icon */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  font-size: 1.5rem;
}

.rmc-signup-done__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.rmc-signup-done__sub {
  font-size: 0.95rem;
  color: var(--text-secondary, #aaa);
  margin-bottom: 16px;
}

.rmc-signup-done__workspace {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.12));
  border-radius: 10px;
  background: var(--surface-overlay, rgba(255, 255, 255, 0.04));
  margin: 0 0 20px;
}

.rmc-signup-done__workspace-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary, #aaa);
}

.rmc-signup-done__workspace-url {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 0.95rem;
  color: var(--text-primary, #f5f5f5);
  word-break: break-all;
}

.rmc-signup-done__timeline {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 12px;
}

.rmc-signup-done__step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: flex-start;
}

.rmc-signup-done__step strong {
  font-size: 0.95rem;
}

.rmc-signup-done__step p {
  font-size: 0.825rem;
  color: var(--text-secondary, #aaa);
  margin: 2px 0 0;
}

.rmc-signup-done__step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--surface-overlay, rgba(255, 255, 255, 0.04));
  color: var(--text-secondary, #aaa);
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.12));
}

.rmc-signup-done__step--done .rmc-signup-done__step-dot {
  background: var(--ds-success, #10B981); /* theme-locked-allow: success-step-dot */
  color: #ffffff; /* off-token-allow: contrast-on-success-dot */
  border-color: var(--ds-success, #10B981); /* theme-locked-allow: success-step-border */
}

.rmc-signup-done__step--current .rmc-signup-done__step-dot {
  background: var(--color-primary-500, #6366F1); /* theme-locked-allow: brand-current-step */
  color: #ffffff; /* off-token-allow: contrast-on-current-dot */
  border-color: var(--color-primary-500, #6366F1); /* theme-locked-allow: brand-current-border */
}

.rmc-signup-done__step--migration .rmc-signup-done__step-dot {
  background: color-mix(in oklab, var(--color-primary-500, #6366F1) 24%, transparent); /* theme-locked-allow: brand-migration-tint */
  color: var(--color-primary-300, #A5B4FC); /* theme-locked-allow: brand-migration-icon */
  border-color: var(--color-primary-500, #6366F1); /* theme-locked-allow: brand-migration-border */
}

.rmc-signup-done__hint {
  font-size: 0.8rem;
  color: var(--text-secondary, #aaa);
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--surface-overlay, rgba(255, 255, 255, 0.04));
  margin-bottom: 20px;
}

.rmc-signup-done__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rmc-signup-done__action {
  flex: 1 1 200px;
  text-align: center;
}

.rmc-signup-field__label-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  margin-bottom: 4px;
}

/* =================================================================
   v4.00.27 (2026-05-29) — Multi-select school-type cards.

   The signup form switched from <input type="radio"> to checkbox so a
   school can pick every education cycle it covers (Cameroon comprehensive
   lycée: 1er cycle + 2ème cycle; Nigeria full school: nursery + primary +
   JSS + SSS; US K-12: elementary + middle + high; etc.).

   The previous radio-style highlight used a server-rendered class
   (.rmc-signup-type-card--selected). With multi-select, client-side
   live updates need a CSS-driven highlight via :has(input:checked).
   ================================================================= */

.rmc-signup-type-card {
  position: relative;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease,
              transform 120ms ease, box-shadow 120ms ease;
}
.rmc-signup-type-card:hover {
  transform: translateY(-1px);
}
.rmc-signup-type-card:has(input:checked),
.rmc-signup-type-card--selected {
  border-color: var(--rmc-page-accent, var(--color-primary-500, #6366f1)) !important; /* style-allow: signup-multi-select */ /* theme-locked-allow: brand-accent-selected-card */
  background: var(--rmc-page-accent-soft, var(--color-primary-50, rgba(99, 102, 241, 0.08))) !important; /* style-allow: signup-multi-select */ /* theme-locked-allow: brand-accent-selected-card */
  box-shadow: 0 0 0 1px var(--rmc-page-accent, #6366f1), 0 6px 18px var(--rmc-page-accent-soft, rgba(99, 102, 241, 0.18)); /* style-allow: signup-multi-select */
}
.rmc-signup-type-card__check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--rmc-page-accent, #6366f1); /* off-token-allow: signup-multi-select */
  color: #fff; /* off-token-allow: signup-multi-select */
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 120ms ease, transform 120ms ease;
  pointer-events: none;
}
.rmc-signup-type-card:has(input:checked) .rmc-signup-type-card__check,
.rmc-signup-type-card--selected .rmc-signup-type-card__check {
  opacity: 1;
  transform: scale(1);
}

/* Multi-select hint text under the field label. */
.rmc-signup-field__help {
  margin-top: 2px;
  max-width: 72ch;
  line-height: 1.4;
}

/* Field group emits a small count chip when multiple cards are checked.
   Pure CSS counter using sibling-count is not possible; the count is
   surfaced by inline JS on the signup page when present. The chip
   itself is styled here so the JS can just toggle its visibility. */
.rmc-signup-type-cards[data-rmc-multi-select="1"]::after {
  content: attr(data-selected-count);
  position: absolute;
  margin-left: 8px;
  font-size: 10px;
  font-weight: 700;
  color: var(--rmc-page-accent, #6366f1); /* off-token-allow: signup-multi-select-chip */
  letter-spacing: 0.06em;
  text-transform: uppercase;
}