/* ============================================================
   Handova — Authentication screens
   ------------------------------------------------------------
   Sign in, create organization, forgot password, reset password.

   Tokens come from packages/design-system/tokens.css. Form
   controls, buttons and notices come from components.css — this
   file only adds the split layout and the demo-user picker.
   ============================================================ */

.auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  min-height: 100vh;
  min-height: 100dvh;
}


/* ------------------------------------------------------------
   BRAND PANEL
   ------------------------------------------------------------ */
/* The form column is the tall one — the demo picker alone runs past
   the fold. So the brand panel holds still at viewport height and the
   page scrolls underneath it, instead of stretching to the form's
   height and leaving a dead gap between the logo and the pitch. */
.auth-brand {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: clamp(2rem, 4vw, 3.5rem);
  /* Flat purple, like the marketing site's closing CTA: dark enough
     to carry the white heading. */
  background: #5B2FB0;
  color: rgba(255, 255, 255, 0.8);
  overflow: hidden;
}
:root[data-theme="dark"] .auth-brand {
  background: #2E1D5C;
}

/* The same quiet grid the marketing site's closing CTA uses. */
.auth-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(70% 70% at 40% 40%, #000 5%, transparent 78%);
  mask-image: radial-gradient(70% 70% at 40% 40%, #000 5%, transparent 78%);
  pointer-events: none;
}

.auth-brand > * { position: relative; }

/* The gap tracks the size of the mark: 10px beside the 30px mark used
   here and in the site header, 8px beside the 28px one in the portal
   sidebars. A single fixed gap reads tight once the mark grows. */
.auth-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  color: #FFFFFF;
}
.auth-logo-mark {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
}
.auth-logo-mark .icon { width: 17px; height: 17px; }

/* Sits a fixed distance below the logo rather than centring in
   whatever room is left — on a tall viewport, auto-centring pushed
   the heading well down the panel and left a dead gap above it. */
.auth-pitch {
  max-width: 32rem;
  margin-top: clamp(1.5rem, 6vh, 3.5rem);
  margin-bottom: auto;
  min-height: 0;
}
.auth-pitch h1 {
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.028em;
  color: #FFFFFF;
  text-wrap: balance;
}
.auth-pitch p {
  margin-top: var(--space-4);
  font-size: var(--fs-lede, 1.0625rem);
  color: rgba(255, 255, 255, 0.82);
  max-width: 44ch;
}

.auth-points {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.auth-points li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.8);
}
.auth-points .icon { color: #FFD166; flex: none; }

/* Sized so the whole composition clears a laptop viewport. */
.auth-illus {
  width: min(100%, 26rem);
  margin-top: var(--space-6);
}

/* The flat scenes were drawn for light sections, and their purple
   would vanish into the gradient — so the backdrop blob becomes a
   near-white disc they sit on, as they do on the marketing site.
   Doubled class so it wins over the dark-theme .fl palette in
   illustrations.css. */
.auth-brand .auth-illus .fl.fl { --fl-blob: rgba(255, 255, 255, 0.92); }
:root[data-theme="dark"] .auth-brand .auth-illus .fl.fl { --fl-blob: rgba(10, 15, 26, 0.62); }

.auth-logo, .auth-foot { flex: none; }

.auth-foot {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.45);
}
.auth-foot a { color: rgba(255, 255, 255, 0.7); text-decoration: underline; text-underline-offset: 2px; }
.auth-foot a:hover { color: #FFFFFF; }


/* ------------------------------------------------------------
   FORM PANEL
   ------------------------------------------------------------ */
.auth-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  background-color: var(--bg);   /* the apps' own background, light and dark */
}
:root[data-theme="dark"] .auth-panel { background-color: var(--bg); }

.auth-theme-toggle {
  position: absolute;
  top: clamp(1rem, 3vw, 1.75rem);
  right: clamp(1rem, 3vw, 1.75rem);
}

.auth-card {
  width: 100%;
  max-width: 27rem;
}
.auth-card-wide { max-width: 34rem; }

.auth-head { margin-bottom: var(--space-6); }
.auth-eyebrow {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--space-3);
}
.auth-title {
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--text);
}
.auth-sub {
  margin-top: 0.5rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.auth-form { display: grid; gap: var(--space-4); }

.auth-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.auth-actions { display: grid; gap: var(--space-3); margin-top: var(--space-2); }

.auth-alt {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-align: center;
}
.auth-alt a { color: var(--accent); font-weight: 500; }
.auth-alt a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 2px; }

.auth-back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: var(--space-5);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
}
.auth-back:hover { color: var(--text); }


/* ------------------------------------------------------------
   PASSWORD FIELD
   ------------------------------------------------------------ */
.password-wrap { position: relative; }
.password-wrap .control { padding-right: 2.75rem; }
.password-toggle {
  position: absolute;
  right: 0.3125rem;
  top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--text-faint);
}
.password-toggle:hover { color: var(--text); background-color: var(--surface-sunk); }


/* ------------------------------------------------------------
   DEMO USER PICKER
   Every role in the portal, one click each.
   ------------------------------------------------------------ */
/* "Continue with Google": Google's mark on a plain button, as their
   branding asks. */
.btn-google { gap: 0.625rem; }
.google-g { width: 18px; height: 18px; flex: none; }

.demo-block {
  margin-top: var(--space-6);
  padding: 0 var(--space-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background-color: var(--surface-sunk);
}
.demo-block[open] { padding-bottom: var(--space-4); }
/* A <details> that starts closed: the whole head is the button. */
.demo-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  cursor: pointer;
  list-style: none;
  border-radius: var(--r-lg);
}
.demo-head::-webkit-details-marker { display: none; }
.demo-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.demo-count { font-size: var(--fs-xs); color: var(--text-muted); }
.demo-chevron { margin-left: auto; color: var(--text-muted); transition: transform var(--dur-fast, .15s) ease; }
.demo-block[open] .demo-chevron { transform: rotate(180deg); }
.demo-block[open] .demo-head { margin-bottom: 0.375rem; }
.demo-title {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-faint);
}
.demo-note {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.demo-list { display: grid; gap: 0.375rem; }

.demo-user {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem 0.625rem;
  text-align: left;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.demo-user:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.demo-user-text { min-width: 0; flex: 1; display: grid; }
.demo-user-role {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}
.demo-user-meta {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.demo-user-scope {
  font-size: 0.6875rem;
  color: var(--text-faint);
  white-space: nowrap;
  flex: none;
}


/* ------------------------------------------------------------
   SUCCESS STATE
   ------------------------------------------------------------ */
.auth-success {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
}
.auth-success-icon {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--r-full);
  background-color: var(--success-soft);
  color: var(--success);
}


/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
/* A short window has no room for the drawing; the words still do
   the work, so it goes rather than the panel scrolling or clipping. */
@media (min-width: 901px) and (max-height: 780px) {
  .auth-illus { display: none; }
}
@media (min-width: 901px) and (max-height: 620px) {
  .auth-points { display: none; }
}

@media (max-width: 900px) {
  .auth { grid-template-columns: minmax(0, 1fr); }

  /* The pitch panel becomes a compact header rather than a
     full screen the reader has to scroll past. */
  .auth-brand {
    position: static;
    height: auto;
    gap: var(--space-5);
    padding: 1.5rem 1.25rem 2rem;
  }
  .auth-pitch { margin-block: 0; }
  .auth-pitch h1 { font-size: 1.5rem; }
  .auth-pitch p { font-size: var(--fs-sm); }
  .auth-points, .auth-foot, .auth-illus { display: none; }
}

@media (max-width: 620px) {
  .auth-panel { padding: 1.5rem 1.25rem 2.5rem; }
  .auth-title { font-size: 1.375rem; }
}


/* ------------------------------------------------------------
   CONSENT
   The box is never pre-ticked — a pre-ticked box is not
   agreement — and the label wraps rather than truncating.
   ------------------------------------------------------------ */
.consent-field { margin-top: var(--space-2); }

.check.consent-check {
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-muted);
  white-space: normal;
}
.check.consent-check input { margin-top: 0.15rem; flex: none; }
.check.consent-check a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.check.consent-check a:hover { color: var(--accent-hover); }
.check.consent-check:has(input[aria-invalid="true"]) { border-color: var(--danger); }

/* ------------------------------------------------------------
   ROLE PICKER
   Which portal the person is heading for. It chooses the demo
   accounts and the wording; the account itself still decides
   where sign-in lands.
   ------------------------------------------------------------ */
/* School staff and Parent; the platform team's option joins them
   (three across) only once ` is pressed (auth.js). One row where
   there is room, stacked below that. */
.role-pick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: var(--space-5);
}
.role-pick.has-team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.role-pick:not(.has-team) .role-option-team { display: none; }

@media (max-width: 560px) {
  .role-pick, .role-pick.has-team { grid-template-columns: minmax(0, 1fr); }
}

.role-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background-color: var(--surface);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.role-option:hover { border-color: var(--border-strong); }

.role-option input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}

.role-icon {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--r-md);
  background-color: var(--surface-sunk);
  color: var(--text-muted);
  flex: none;
}

.role-text { min-width: 0; display: grid; }
.role-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}
.role-meta {
  font-size: 0.6875rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.role-option:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.role-option:has(input:checked) .role-icon {
  background-color: var(--accent);
  color: #FFFFFF;
}
.role-option:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 400px) {
  .role-pick { grid-template-columns: minmax(0, 1fr); }
  .role-meta { display: none; }
}

/* ------------------------------------------------------------
   Handova: a photo behind the brand panel (auth-photo.js picks a
   new one each visit) under a flat deep-purple tint, so the white
   heading reads at every size. It fades in, then drifts very slowly.
   ------------------------------------------------------------ */
.auth-brand { isolation: isolate; }
.auth-brand > .auth-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: center / cover no-repeat;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.2s var(--ease), transform 1.6s var(--ease);
}
.auth-brand > .auth-photo.is-ready {
  opacity: 1;
  transform: scale(1);
  animation: auth-photo-drift 28s ease-in-out 1.6s infinite alternate;
}
.auth-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(43, 20, 99, 0.80);
}
:root[data-theme="dark"] .auth-brand::before { background: rgba(24, 11, 56, 0.86); }
/* The photo takes the illustration's place. */
.auth-brand .auth-illus, .auth-brand .auth-lines { display: none; }
@keyframes auth-photo-drift {
  from { transform: scale(1); }
  to   { transform: scale(1.07) translate(-1%, -1%); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-brand > .auth-photo, .auth-brand > .auth-photo.is-ready { transition: none; transform: none; animation: none; }
}