/*
 * Manhali Modern: auth layout, shared by platform and student sign-in pages.
 */

/* ── Auth layout (login, signup, password, OTP, invitation, onboarding) ──
   <div class="auth"><section class="auth-form-side"><header class="auth-top">…</header>
   <main class="auth-form"><mm-persona watch class="auth-mobile-persona"></mm-persona><div class="head">…</div><form>…</form></main>
   <footer class="auth-foot">…</footer></section>
   <aside class="auth-visual" data-persona-scene><mm-fluid></mm-fluid><mm-persona watch></mm-persona>
   <div class="glass scene-card">…</div><p class="visual-caption"><span class="glass">…</span></p></aside></div>
   Drive big moments with document.dispatchEvent(new CustomEvent("mm:persona", { detail })). */
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-block-size: 100dvh; gap: 8px; padding: 8px; }
.auth-form-side { display: flex; flex-direction: column; min-inline-size: 0; padding: 16px 24px; }
.auth-top { display: flex; align-items: center; gap: 10px; }
.auth-top .end { margin-inline-start: auto; display: flex; gap: 4px; }
.auth-form { flex: 1; display: flex; flex-direction: column; justify-content: center; inline-size: 100%; max-inline-size: 400px; margin-inline: auto; padding-block: 40px; gap: 20px; }
.auth-form .head { display: flex; flex-direction: column; gap: 6px; }
.auth-form .head h1 { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.25; }
.auth-form .head .icon-tile { margin-block-end: 10px; }
.auth-form h1[tabindex="-1"]:focus { outline: none; }
.auth-form form { display: flex; flex-direction: column; gap: 16px; }
.auth-state { display: flex; flex-direction: column; gap: 20px; }
.auth .back { align-self: flex-start; margin-inline-start: -10px; }
.auth .input-group .reveal { margin-inline-end: -6px; }
.g-mark { display: grid; place-items: center; inline-size: 20px; block-size: 20px; border-radius: 50%; background: var(--muted); font-family: var(--font-latin); font-size: 13px; font-weight: var(--weight-bold); color: var(--info); }
.auth-foot { display: flex; justify-content: center; gap: 16px; font-size: var(--text-xs); color: var(--muted-foreground); }
.auth-foot a:hover { color: var(--foreground); }
/* Visual side: a living water scene. <mm-fluid> paints the liquid gradient (the CSS gradient
   below is only the first-paint fallback); <mm-persona> (the qalam) reacts to the form. */
.auth > .auth-visual { position: sticky; inset-block-start: 8px; align-self: start; block-size: calc(100dvh - 16px); }
.auth-visual {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  padding: 48px 40px 72px; border-radius: var(--radius-xl); isolation: isolate;
  background: linear-gradient(160deg, oklch(0.86 0.1 62), oklch(0.72 0.17 46) 55%, oklch(0.9 0.07 70));
}
.dark .auth-visual { background: linear-gradient(160deg, oklch(0.3 0.06 52), oklch(0.4 0.1 45) 55%, oklch(0.24 0.03 55)); }
.auth-visual mm-persona { --p-size: clamp(230px, 22vw, 300px); }
.glass {
  /* no backdrop-filter: the scene behind moves, and re-blurring it every frame is costly */
  background: color-mix(in oklch, var(--card), transparent 12%);
  border: 1px solid color-mix(in oklch, white, transparent 45%); border-radius: 20px;
  box-shadow: var(--shadow-md), inset 0 1px 0 color-mix(in oklch, white, transparent 50%);
}
.dark .glass { background: color-mix(in oklch, var(--card), transparent 10%); border-color: color-mix(in oklch, white, transparent 88%); box-shadow: var(--shadow-md), inset 0 1px 0 color-mix(in oklch, white, transparent 92%); }
.scene-card { inline-size: min(360px, 100%); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.scene-card .scene-title { font-weight: var(--weight-bold); font-size: var(--text-base); color: var(--foreground); }
.scene-card .scene-text { font-size: var(--text-sm); color: var(--muted-foreground); line-height: 1.6; }
.scene-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.visual-caption { position: absolute; inset-block-end: 22px; inset-inline: 40px; display: flex; justify-content: center; }
.visual-caption > span { padding: 6px 14px; border-radius: 999px; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--foreground); }
/* toasts on auth pages sit over the form side, never over the scene */
body:has(.auth) .toaster { inset-inline-end: auto; inset-inline-start: 20px; }

/* phones: the aside is hidden, so a compact persona sits above the form instead */
.auth-mobile-persona { display: none; }
@media (max-width: 899px) {
  .auth-mobile-persona { display: inline-flex; align-self: center; --p-size: 136px; margin-block-end: -10px; }
  .auth-mobile-persona .p-say { font-size: var(--text-xs); padding: 7px 11px; margin-block-end: 10px; }
  .auth { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .auth-visual { display: none; }
  .auth-form-side { padding: 12px 16px; }
  .auth-form { padding-block: 24px; }
}

/* Demo hint on auth pages (prototype-only credentials such as the OTP code) */
.auth .demo-hint { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px dashed var(--border-strong); font-size: var(--text-xs); color: var(--muted-foreground); }