/* ============================================================
   Auth pages (login + register) — sliding split-panel layout
   ============================================================
   Architecture:
   - Single .auth-shell stage with data-mode="login|register".
   - .auth-blob slides across to swap sides; only the inner edge
     (facing the form) is rounded.
   - .auth-pane-form × 2 and .auth-pane-brand × 2; CSS positions
     them by [data-mode] × [data-side] attribute pair.
   - .is-mid class drops pane opacity to 0 during the JS-driven
     cross-fade; CSS does the rest.

   This file is the SINGLE source of truth for the new sliding
   panel. The companion overlay file (eduloo.ai/.../auth.css)
   contains styling for OTHER auth pages (pw-forgot, reset,
   confirm, mfa-verify) and a few final-word overrides for here.
   ============================================================ */

/* --- VIEWPORT --------------------------------------------------
   Hide every flavor of site footer on auth pages — `.footer` is
   the main one but some templates use `footer`, `.site-footer`,
   `.app-footer`, `.layout-footer`, etc. Be generous so nothing
   leaks below the auth form. */

body:has(.auth-shell) .footer,
body:has(.auth-shell) > footer,
body:has(.auth-shell) footer.footer,
body:has(.auth-shell) .site-footer,
body:has(.auth-shell) .app-footer,
body:has(.auth-shell) .layout-footer,
body:has(.auth-shell) .footer-navigation,
body:has(.auth-shell) .page-footer {
  display: none !important;
}
body:has(.auth-shell) main {
  margin: 0 !important;
  padding: 0 !important;
}
body:has(.auth-shell) {
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
}
body:has(.auth-shell) .layout-container,
body:has(.auth-shell) .landing-container,
body:has(.auth-shell) main {
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden;
}
.landing-container:has(.auth-shell),
.layout-container:has(.auth-shell) {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  height: 100vh !important;
  overflow: hidden;
  display: block !important;
}

/* --- SHELL ---------------------------------------------------- */

.auth-shell {
  --blob-rx: 240px;
  --blob-ry: 40%;
  --slide-ms: 1100ms;
  --slide-ease: cubic-bezier(0.65, 0, 0.35, 1);
  --fade-ms: 500ms;
  --field-h: 52px;
  --radius: 12px;

  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--container-bg);
}

/* --- BLOB ----------------------------------------------------- */

.auth-blob {
  position: absolute;
  inset: 0 0 0 auto;
  width: 50%;
  background:
    radial-gradient(
      120% 90% at 20% 10%,
      color-mix(in oklab, var(--primary-blue) 70%, white 30%) 0%,
      transparent 55%
    ),
    radial-gradient(
      110% 80% at 80% 100%,
      color-mix(in oklab, var(--primary-blue) 60%, black 35%) 0%,
      transparent 60%
    ),
    linear-gradient(
      155deg,
      color-mix(in oklab, var(--primary-blue) 88%, white 12%) 0%,
      var(--primary-blue) 45%,
      color-mix(in oklab, var(--accent-blue) 75%, black 22%) 100%
    );
  box-shadow:
    0 40px 100px -30px color-mix(in oklab, var(--primary-blue) 55%, transparent),
    inset 0 2px 0 rgba(255, 255, 255, 0.18),
    inset 0 -2px 0 rgba(0, 0, 0, 0.1);
  transition:
    transform var(--slide-ms) var(--slide-ease),
    border-radius var(--slide-ms) var(--slide-ease);
  will-change: transform, border-radius;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.auth-shell[data-mode='login'] .auth-blob {
  transform: translateX(0);
  border-radius: var(--blob-rx) 0 0 var(--blob-rx) / var(--blob-ry) 0 0
    var(--blob-ry);
}
.auth-shell[data-mode='register'] .auth-blob {
  transform: translateX(-100%);
  border-radius: 0 var(--blob-rx) var(--blob-rx) 0 / 0 var(--blob-ry)
    var(--blob-ry) 0;
}

.auth-blob::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(
      60% 40% at 25% 18%,
      rgba(255, 255, 255, 0.28) 0%,
      transparent 60%
    ),
    radial-gradient(45% 30% at 75% 85%, rgba(0, 0, 0, 0.18) 0%, transparent 70%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.auth-blob-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  background-image: radial-gradient(
    circle at 1px 1px,
    rgba(255, 255, 255, 0.9) 1px,
    transparent 0
  );
  background-size: 22px 22px;
  mask-image: radial-gradient(
    ellipse 70% 70% at 50% 50%,
    black 35%,
    transparent 80%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 70% 70% at 50% 50%,
    black 35%,
    transparent 80%
  );
}

/* --- PANES ---------------------------------------------------- */

.auth-pane {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  display: grid;
  place-items: center;
  padding: 32px 56px;
  transition: opacity var(--fade-ms) ease;
  overflow-y: auto;
  overflow-x: hidden;
}
.auth-pane-form {
  z-index: 3;
}
.auth-pane-brand {
  z-index: 2;
  color: #ffffff;
}

/* Pane visibility is driven by `data-active-pane`, NOT `data-mode`.
   `data-mode` flips at the *start* of the swap so the blob can begin
   sliding immediately, while `data-active-pane` flips at the
   cross-fade midpoint so the visible pane content swaps when panes
   are at opacity 0 (users never see content jumping mid-fade).
   Fallback to `data-mode` for the initial server render before JS
   runs and sets data-active-pane. */
.auth-shell[data-mode='login']:not([data-active-pane])
  .auth-pane-form[data-side='login'] {
  left: 0;
  display: grid;
}
.auth-shell[data-mode='login']:not([data-active-pane])
  .auth-pane-form[data-side='register'] {
  display: none;
}
.auth-shell[data-mode='login']:not([data-active-pane])
  .auth-pane-brand[data-side='login-brand'] {
  right: 0;
  display: grid;
}
.auth-shell[data-mode='login']:not([data-active-pane])
  .auth-pane-brand[data-side='register-brand'] {
  display: none;
}
.auth-shell[data-mode='register']:not([data-active-pane])
  .auth-pane-form[data-side='register'] {
  right: 0;
  display: grid;
}
.auth-shell[data-mode='register']:not([data-active-pane])
  .auth-pane-form[data-side='login'] {
  display: none;
}
.auth-shell[data-mode='register']:not([data-active-pane])
  .auth-pane-brand[data-side='register-brand'] {
  left: 0;
  display: grid;
}
.auth-shell[data-mode='register']:not([data-active-pane])
  .auth-pane-brand[data-side='login-brand'] {
  display: none;
}

.auth-shell[data-active-pane='login'] .auth-pane-form[data-side='login'] {
  left: 0;
  display: grid;
}
.auth-shell[data-active-pane='login'] .auth-pane-form[data-side='register'] {
  display: none;
}
.auth-shell[data-active-pane='login']
  .auth-pane-brand[data-side='login-brand'] {
  right: 0;
  display: grid;
}
.auth-shell[data-active-pane='login']
  .auth-pane-brand[data-side='register-brand'] {
  display: none;
}

.auth-shell[data-active-pane='register'] .auth-pane-form[data-side='register'] {
  right: 0;
  display: grid;
}
.auth-shell[data-active-pane='register'] .auth-pane-form[data-side='login'] {
  display: none;
}
.auth-shell[data-active-pane='register']
  .auth-pane-brand[data-side='register-brand'] {
  left: 0;
  display: grid;
}
.auth-shell[data-active-pane='register']
  .auth-pane-brand[data-side='login-brand'] {
  display: none;
}

.auth-pane.is-mid {
  opacity: 0;
}

/* --- FORM LAYOUT ---------------------------------------------- */

/* Spacing tokens match the Claude Design reference 1:1:
   - form-wrap uses 28px gap between top-level sections (title block,
     form, divider, OAuth row).
   - form itself also uses 28px gap so the form's children (fields
     group, captcha, remember row, submit button) rhythm consistently.
   - The email+password pair lives in its own .auth-form-fields
     container with gap: 12px so they sit close to each other.
   - The Remember/Forgot row uses margin-top: -8px to pull closer to
     the fields above (so the row hugs the inputs, then the submit
     button still gets the 28px rhythm). */

.auth-form-wrap {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  /* No gap — sections control their own margins explicitly so the
     spacing between form/divider/oauth is predictable and tight. */
  gap: 0;
}
.auth-form-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 32px;
}
.auth-form-title {
  margin: 0;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -1px;
  font-weight: 700;
  color: var(--heading-color);
  background: none;
  -webkit-text-fill-color: var(--heading-color);
  white-space: nowrap;
}
.auth-form-subtitle {
  margin: 0;
  color: var(--muted-text);
  font-size: 15px;
  line-height: 1.5;
}
/* Renamed from .auth-form to dodge the eduloo overlay's bare
   `.auth-form { gap: 20px !important; }` rule which was winning the
   cascade fight despite our higher-specificity overrides. */
.auth-form-stack {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.auth-form-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- FIELD (label wrapping icon + input + peek) --------------- */

.auth-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 0 12px 0 14px;
  height: var(--field-h);
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    background 250ms ease;
}
.auth-field:focus-within {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 4px
    color-mix(in oklab, var(--primary-blue) 18%, transparent);
}
.auth-field-icon {
  color: var(--muted-text);
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
}
.auth-field-peek {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--muted-text);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
}
.auth-field-peek:hover {
  background: color-mix(in oklab, var(--text-color) 8%, transparent);
  color: var(--text-color);
}
/* Peek inside the auth-card .form-input-wrapper layout (reset page):
   the input is width:100%, so the button overlays its right edge. */
.auth-form .form-input-wrapper .auth-field-peek {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.auth-form .form-input-wrapper--peek .form-input {
  padding-right: 52px;
}

/* === NESTED INPUT NUKE =======================================
   base_elements.css ships globals like
     input[type='email'] { width: 100%; padding: 12px 16px;
       border: 1px solid var(--border-color) !important;
       background: var(--input-bg) !important;
       color: var(--text-color) !important;
       border-radius: var(--radius-medium); }
   plus :hover / :focus variants. Those rules paint a nested
   rectangle inside our .auth-field shell. We override with a
   selector chain that's specifically higher (3 classes + tag +
   attribute) and !important on every visual property, in every
   state. This is the *single* place we fight that battle. */

.auth-shell .auth-field > input.auth-field-input,
.auth-shell .auth-field > input[type='email'].auth-field-input,
.auth-shell .auth-field > input[type='password'].auth-field-input,
.auth-shell .auth-field > input[type='text'].auth-field-input,
.auth-shell .auth-field > input.auth-field-input:hover,
.auth-shell .auth-field > input[type='email'].auth-field-input:hover,
.auth-shell .auth-field > input[type='password'].auth-field-input:hover,
.auth-shell .auth-field > input[type='text'].auth-field-input:hover,
.auth-shell .auth-field > input.auth-field-input:focus,
.auth-shell .auth-field > input[type='email'].auth-field-input:focus,
.auth-shell .auth-field > input[type='password'].auth-field-input:focus,
.auth-shell .auth-field > input[type='text'].auth-field-input:focus,
.auth-shell .auth-field > input.auth-field-input:focus-visible,
.auth-shell .auth-field > input[type='email'].auth-field-input:focus-visible,
.auth-shell .auth-field > input[type='password'].auth-field-input:focus-visible,
.auth-shell .auth-field > input[type='text'].auth-field-input:focus-visible {
  appearance: none !important;
  -webkit-appearance: none !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  color: var(--text-color) !important;
  -webkit-text-fill-color: var(--text-color) !important;
  caret-color: var(--text-color);
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.auth-shell .auth-field > input.auth-field-input::placeholder {
  color: var(--muted-text);
  opacity: 0.65;
}

/* Strip the global input autofill yellow */
.auth-shell .auth-field > input.auth-field-input:-webkit-autofill,
.auth-shell .auth-field > input.auth-field-input:-webkit-autofill:hover,
.auth-shell .auth-field > input.auth-field-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
  -webkit-text-fill-color: var(--text-color) !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* --- INLINE ALERT (uses base_alerts.css .alert .alert-info) ---
   The password-hint reuses the project's standard alert-info design.
   We just zero the default 15px vertical margin so it fits the
   form's 12px flex-gap rhythm. */

.auth-shell .auth-form-alert,
.auth-shell .auth-form .alert {
  margin: 0;
}

/* --- PASSWORD REQUIREMENT CHECKLIST ---------------------------
   Live 2x2 checklist inside the alert-info panel; auth.js toggles
   .is-met per row as the password satisfies each rule. */

.alert.auth-pw-reqs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
}
.auth-pw-req {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  line-height: 1.35;
  transition: color 0.15s ease;
}
.auth-pw-req svg {
  flex-shrink: 0;
}
/* Icon colors are !important: projects retheme alerts with blanket
   `.alert-info svg { color: X !important }` rules (e.g. pdfdeal),
   which would tint the state icons with the info-icon color. */
.auth-pw-req .auth-pw-req-icon--x {
  color: #dc2626 !important;
}
.auth-pw-req .auth-pw-req-icon--check {
  display: none;
  color: #16a34a !important;
}
.auth-pw-req.is-met {
  color: #16a34a;
}
.auth-pw-req.is-met .auth-pw-req-icon--x {
  display: none;
}
.auth-pw-req.is-met .auth-pw-req-icon--check {
  display: block;
}
html body.theme-dark .auth-pw-req .auth-pw-req-icon--x {
  color: #f87171 !important;
}
html body.theme-dark .auth-pw-req .auth-pw-req-icon--check {
  color: #4ade80 !important;
}
html body.theme-dark .auth-pw-req.is-met {
  color: #4ade80;
}
@media (max-width: 380px) {
  .alert.auth-pw-reqs {
    grid-template-columns: 1fr;
  }
}

/* --- FORM ROW (Remember + Forgot) ----------------------------- */

.auth-form-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: -8px;
}

/* --- CHECKBOX ------------------------------------------------- */

.auth-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted-text);
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  line-height: 1.4;
}
.auth-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.auth-check-box {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border-color);
  border-radius: 5px;
  display: grid;
  place-items: center;
  color: transparent;
  background: var(--input-bg);
  transition: all 150ms ease;
}
.auth-check input:checked + .auth-check-box {
  background: var(--primary-blue);
  border-color: var(--primary-blue);
  color: var(--brand-ink);
}

/* --- PRIMARY BUTTON -------------------------------------------
   The submit buttons (Sign in / Create account) get `btn btn-primary`
   classes in the template so they pick up the project's primary
   button style (purple gradient on the startup base). We only set
   *layout* here (size, width, flex centering) and leave background/
   color/border to .btn-primary in base_elements.css. */

.auth-shell button.auth-submit-btn {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: var(--field-h);
  padding: 0 24px;
  margin: 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
  cursor: pointer;
  transition:
    transform 120ms ease,
    opacity 150ms ease,
    box-shadow 200ms ease;
}
.auth-shell button.auth-submit-btn:hover {
  transform: translateY(-1px);
}
.auth-shell button.auth-submit-btn:active {
  transform: translateY(0);
}
.auth-shell button.auth-submit-btn span,
.auth-shell button.auth-submit-btn i {
  color: inherit !important;
  font: inherit !important;
}

.auth-shell button.auth-submit-btn--sm {
  height: 44px !important;
  font-size: 14px !important;
}

/* --- OAUTH ICON ROW ------------------------------------------- */

/* OAuth row — responsive layout based on button count.
   1 button   → full width with icon + text label
   2 buttons  → 50/50 each, with icon + text label
   3 buttons  → 33% each, icon-only
   4 buttons  → 25% each, icon-only
   5 buttons  → equal share on one row, icon-only
   6 buttons  → two balanced rows of 3 (avoids a lone orphan button)
   7+ buttons → 4 per row, icon-only */
.auth-oauth-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.auth-oauth-row:has(> :first-child:last-child) {
  grid-template-columns: 1fr;
}
.auth-oauth-row:has(> :nth-child(2):last-child) {
  grid-template-columns: repeat(2, 1fr);
}
.auth-oauth-row:has(> :nth-child(3):last-child) {
  grid-template-columns: repeat(3, 1fr);
}
.auth-oauth-row:has(> :nth-child(4):last-child) {
  grid-template-columns: repeat(4, 1fr);
}
.auth-oauth-row:has(> :nth-child(5):last-child) {
  grid-template-columns: repeat(5, 1fr);
}
.auth-oauth-row:has(> :nth-child(6):last-child) {
  grid-template-columns: repeat(3, 1fr);
}

/* Label visibility: only show when ≤2 buttons; hidden in icon-only
   layouts (3+ buttons). When shown, give it spacing from the icon. */
.auth-social-label {
  display: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  margin-left: 10px;
  white-space: nowrap;
}
.auth-oauth-row:has(> :first-child:last-child) .auth-social-label,
.auth-oauth-row:has(> :nth-child(2):last-child) .auth-social-label {
  display: inline;
}
/* Add padding so the icon+text combo doesn't sit edge-to-edge when
   the button is wider (full or half width). */
.auth-oauth-row:has(> :first-child:last-child) .auth-social-btn,
.auth-oauth-row:has(> :nth-child(2):last-child) .auth-social-btn {
  padding: 0 18px;
}

/* Disabled OAuth providers (server-side oauth_providers dict didn't
   include them) — still rendered for visual consistency but visually
   muted to signal they won't work. */
.auth-social-btn--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.6);
}

.auth-shell .auth-social-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  min-height: 48px;
  padding: 0;
  margin: 0;
  background: var(--input-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 10px !important;
  color: var(--text-color) !important;
  cursor: pointer;
  text-decoration: none;
  transition:
    background 150ms ease,
    transform 120ms ease,
    border-color 150ms ease;
}
/* Match the project's `.button-secondary` hover pattern from
   base_modal.css — border lifts to the accent-blue (or primary-blue
   as fallback) so the OAuth row picks up the project's accent
   colour automatically. Background is a soft tint of the same. */
.auth-shell .auth-social-btn:hover {
  background: color-mix(
    in oklab,
    var(--accent-blue, var(--primary-blue, var(--text-color))) 6%,
    var(--input-bg)
  ) !important;
  border-color: var(
    --accent-blue,
    var(--primary-blue, var(--text-color))
  ) !important;
  box-shadow: 0 6px 16px -8px
    color-mix(
      in oklab,
      var(--accent-blue, var(--primary-blue, var(--text-color))) 36%,
      transparent
    );
  transform: translateY(-1px);
}
.auth-shell .auth-social-btn:active {
  transform: translateY(0);
}
.auth-social-icon {
  display: block;
}

/* --- DIVIDER -------------------------------------------------- */

/* Divider built from real <span> elements instead of ::before/::after,
   so no global rule can hide the lines. Negative top margin pulls the
   whole "or continue with + icons" block up so it sits closer to the
   Sign in button above. */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 0;
}
.auth-form-stack + .auth-divider {
  margin-top: 16px;
}
.auth-divider + .auth-oauth-row {
  margin-top: 0;
}
.auth-oauth-row + .auth-mobile-toggle {
  margin-top: 24px;
}
.auth-divider > .auth-divider-line {
  flex: 1 1 auto;
  height: 1px;
  background: var(--border-color);
  min-width: 1px;
  font-size: 0;
}
.auth-divider > .auth-divider-text {
  flex: 0 0 auto;
  font-family: inherit;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--muted-text);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}

/* --- CAPTCHA -------------------------------------------------- */

.auth-captcha-wrap {
  display: flex;
  justify-content: center;
  padding: 4px 0;
}

/* --- LEGAL ---------------------------------------------------- */

.auth-legal {
  margin: 6px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--muted-text);
  line-height: 1.55;
}
.auth-legal a {
  color: var(--text-color);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 0;
  transition: color 150ms ease;
}
.auth-legal a:hover {
  color: var(--muted-text);
  text-decoration: none;
  border-bottom: 0;
}

/* --- LINKS ---------------------------------------------------- */

.auth-shell .auth-link {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-color);
  text-decoration: none;
  cursor: pointer;
  transition: color 150ms ease;
}
.auth-shell .auth-link:hover {
  color: var(--muted-text);
  text-decoration: none;
}

/* Mobile-only inline toggle row (visible <820px when brand pane hidden) */
.auth-mobile-toggle {
  display: none;
  text-align: center;
  font-size: 14px;
  color: var(--muted-text);
  margin-top: 4px;
}
.auth-mobile-toggle .auth-link {
  margin-left: 6px;
}

/* --- BRAND PANE ----------------------------------------------- */

.auth-shell .auth-brand-wrap {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  color: #ffffff !important;
}
.auth-shell .auth-brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.auth-shell .auth-brand-glyph {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 18px;
  color: #ffffff !important;
  letter-spacing: 0;
  overflow: hidden;
  padding: 6px;
}
.auth-shell .auth-brand-glyph img,
.auth-shell .auth-brand-glyph svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.auth-shell .auth-brand-wordmark {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  opacity: 0.9;
  color: #ffffff !important;
}
.auth-shell .auth-brand-wordmark .brand-tld {
  font-size: 0.72em;
  color: color-mix(in srgb, #ffffff 72%, transparent) !important;
  background: none;
}
.auth-shell .auth-brand-h,
.auth-shell h2.auth-brand-h {
  margin: 24px 0 0;
  font-size: 56px;
  line-height: 1.02;
  letter-spacing: -2px;
  font-weight: 700;
  color: #ffffff !important;
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
  text-wrap: balance;
}
.auth-shell .auth-brand-sub,
.auth-shell p.auth-brand-sub {
  margin: 0;
  max-width: 36ch;
  font-size: 16px;
  line-height: 1.5;
  opacity: 0.92;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.auth-shell button.auth-brand-cta {
  appearance: none;
  margin-top: 6px;
  height: 50px;
  padding: 0 36px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  color: #1a1408 !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.04),
    0 10px 20px -10px rgba(0, 0, 0, 0.25);
  transition:
    transform 140ms ease,
    background 150ms ease;
  width: auto !important;
  min-width: 0 !important;
}
.auth-shell button.auth-brand-cta:hover {
  background: #ffffff !important;
  color: #000000 !important;
  transform: translateY(-1px);
}
.auth-shell button.auth-brand-cta:active {
  transform: translateY(0);
}

/* --- ALERTS --------------------------------------------------- */

.auth-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 16px;
  animation: authAlertSlide 0.3s ease;
}
/* Hide-state alerts (inline style="display: none") should not
   reserve any vertical space in the form layout. */
.auth-alert[style*='display: none'],
.auth-alert[style*='display:none'] {
  margin: 0 !important;
}
/* Inline alerts inside the form-stack (e.g. password hint) use
   the form-stack's own gap for rhythm — drop the alert margin. */
.auth-shell .auth-form-stack .auth-form-alert,
.auth-shell .auth-form-stack .alert {
  margin: 0;
}
@keyframes authAlertSlide {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.auth-alert-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}
.auth-alert-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.auth-alert-content strong {
  font-weight: 600;
  font-size: 14px;
}
.auth-alert-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.auth-alert-action-btn {
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.auth-alert-action-btn:hover {
  background: rgba(239, 68, 68, 0.12);
}
.auth-alert-hint {
  font-size: 13px;
  color: var(--muted-text);
}
.auth-alert-link-group {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.auth-alert-code-group {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.auth-alert-code {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.auth-alert-link-input {
  flex: 1;
  min-width: 160px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid currentColor;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 13px;
}
.auth-alert-copy-btn {
  padding: 6px 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.auth-alert-danger {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
}
body.theme-light .auth-alert-danger {
  background: rgba(239, 68, 68, 0.08);
  color: #dc2626;
}
.auth-alert-success {
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #22c55e;
}
body.theme-light .auth-alert-success {
  background: rgba(34, 197, 94, 0.08);
  color: #16a34a;
}

/* --- RESEND PANEL (register email-confirm flow) --------------- */

#resend-panel {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.auth-resend-email-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--muted-text);
}
.auth-resend-email-row strong {
  color: var(--heading-color);
  word-break: break-all;
}
.auth-resend-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 18px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: transparent;
  color: var(--heading-color);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.2s ease,
    opacity 0.2s ease;
}
.auth-resend-btn:hover:not(:disabled) {
  background: color-mix(in oklab, var(--text-color) 5%, transparent);
}
.auth-resend-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.auth-resend-countdown {
  margin-left: auto;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted-text);
}
.auth-resend-feedback {
  padding: 4px 0;
  font-size: 13px;
  animation: authAlertSlide 0.2s ease;
}
.auth-resend-feedback--ok {
  color: #22c55e;
}
body.theme-light .auth-resend-feedback--ok {
  color: #16a34a;
}
.auth-resend-feedback--error {
  color: #ef4444;
}
body.theme-light .auth-resend-feedback--error {
  color: #dc2626;
}
.auth-resend-change-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--text-color);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.auth-resend-change-link:hover {
  opacity: 0.8;
}
.auth-resend-change-form {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* --- RESPONSIVE -----------------------------------------------
   Mobile selectors need the same data-mode × data-active-pane ×
   data-side combinations as the desktop rules so they win the
   cascade and the brand pane actually hides, plus the inactive
   form pane stays hidden so they don't overlap. */

@media (max-width: 820px) {
  body:has(.auth-shell),
  body:has(.auth-shell) .layout-container,
  body:has(.auth-shell) .landing-container,
  body:has(.auth-shell) main,
  .landing-container:has(.auth-shell),
  .layout-container:has(.auth-shell) {
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .auth-shell {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Hide blob + both brand panes on mobile regardless of mode */
  .auth-shell .auth-blob,
  .auth-shell[data-mode] .auth-blob,
  .auth-shell[data-active-pane] .auth-blob,
  .auth-shell .auth-pane-brand,
  .auth-shell .auth-pane-brand[data-side],
  .auth-shell[data-mode] .auth-pane-brand[data-side='login-brand'],
  .auth-shell[data-mode] .auth-pane-brand[data-side='register-brand'],
  .auth-shell[data-active-pane='login']
    .auth-pane-brand[data-side='login-brand'],
  .auth-shell[data-active-pane='login']
    .auth-pane-brand[data-side='register-brand'],
  .auth-shell[data-active-pane='register']
    .auth-pane-brand[data-side='register-brand'],
  .auth-shell[data-active-pane='register']
    .auth-pane-brand[data-side='login-brand'] {
    display: none !important;
  }

  /* Active form pane fills the screen; inactive form pane stays hidden */
  .auth-shell .auth-pane-form,
  .auth-shell[data-mode] .auth-pane-form[data-side],
  .auth-shell[data-active-pane] .auth-pane-form[data-side] {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    padding: 80px 24px 40px !important;
    overflow: visible !important;
  }
  .auth-shell[data-active-pane='login'] .auth-pane-form[data-side='register'],
  .auth-shell[data-active-pane='register'] .auth-pane-form[data-side='login'],
  .auth-shell[data-mode='login']:not([data-active-pane])
    .auth-pane-form[data-side='register'],
  .auth-shell[data-mode='register']:not([data-active-pane])
    .auth-pane-form[data-side='login'] {
    display: none !important;
  }
  .auth-shell[data-active-pane='login'] .auth-pane-form[data-side='login'],
  .auth-shell[data-active-pane='register']
    .auth-pane-form[data-side='register'],
  .auth-shell[data-mode='login']:not([data-active-pane])
    .auth-pane-form[data-side='login'],
  .auth-shell[data-mode='register']:not([data-active-pane])
    .auth-pane-form[data-side='register'] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .auth-shell .auth-mobile-toggle {
    display: flex !important;
  }

  /* Title can wrap and shrinks on small screens */
  .auth-shell .auth-form-title {
    font-size: 28px !important;
    white-space: normal !important;
  }

  /* Mobile-toggle promoted to a card-style CTA so the alternative
     path (Sign in / Register) grabs attention on phones. */
  .auth-shell .auth-mobile-toggle {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 32px;
    padding: 22px 24px 24px;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--primary-blue, var(--text-color)) 8%, transparent)
        0%,
      color-mix(in srgb, var(--primary-blue, var(--text-color)) 4%, transparent)
        100%
    );
    border: 1px solid
      color-mix(
        in srgb,
        var(--primary-blue, var(--text-color)) 24%,
        transparent
      );
    border-radius: 20px;
    text-align: center;
  }
  .auth-shell .auth-mobile-toggle > span {
    color: var(--muted-text);
    font-size: 14px;
    margin: 0;
  }
  .auth-shell .auth-mobile-toggle .auth-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 12px 32px;
    min-height: 46px;
    min-width: 180px;
    background: var(--primary-blue, var(--text-color));
    color: var(--container-bg, #ffffff);
    border: 0;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-decoration: none;
    cursor: pointer;
    box-shadow:
      0 4px 14px -2px
        color-mix(
          in srgb,
          var(--primary-blue, var(--text-color)) 40%,
          transparent
        ),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition:
      transform 160ms ease,
      box-shadow 200ms ease;
  }
  .auth-shell .auth-mobile-toggle .auth-link:hover {
    transform: translateY(-1px);
    color: var(--container-bg, #ffffff);
    box-shadow:
      0 8px 20px -4px
        color-mix(
          in srgb,
          var(--primary-blue, var(--text-color)) 52%,
          transparent
        ),
      inset 0 1px 0 rgba(255, 255, 255, 0.26);
  }
}

@media (max-width: 480px) {
  .auth-shell .auth-form-title {
    font-size: 24px !important;
  }
  .auth-pane-form {
    padding: 64px 18px 32px !important;
  }
  .auth-oauth-row {
    gap: 8px;
  }
}

/* --- POLISH --------------------------------------------------- */

.auth-shell button,
.auth-shell input {
  -webkit-tap-highlight-color: transparent;
}

.auth-shell .auth-field-peek:focus-visible,
.auth-shell button.auth-submit-btn:focus-visible,
.auth-shell .auth-social-btn:focus-visible,
.auth-shell button.auth-brand-cta:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .auth-blob,
  .auth-pane,
  .auth-shell button,
  .auth-social-btn {
    transition: none !important;
    animation: none !important;
  }
}

@media print {
  .auth-blob,
  .auth-pane-brand {
    display: none;
  }
  .auth-pane-form {
    position: static;
    width: 100%;
    padding: 0;
  }
}

/* --- DARK THEME: brand pane text flips to dark ---------------
   The blob's gradient is themed via --primary-blue / --accent-blue.
   In dark theme those resolve to lighter values (#fb596e etc.),
   so the gradient reads MUCH lighter and white text loses contrast.
   Flip the brand pane text to deep dark, and swap the glyph badge
   tint accordingly. */

html body.theme-dark .auth-shell .auth-brand-wrap,
html body.theme-dark .auth-shell .auth-brand-mark,
html body.theme-dark .auth-shell .auth-brand-wordmark,
html body.theme-dark .auth-shell h2.auth-brand-h,
html body.theme-dark .auth-shell .auth-brand-h,
html body.theme-dark .auth-shell p.auth-brand-sub,
html body.theme-dark .auth-shell .auth-brand-sub {
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
}

html body.theme-dark .auth-shell .auth-brand-glyph {
  background: rgba(0, 0, 0, 0.18) !important;
  border-color: rgba(0, 0, 0, 0.28) !important;
}

html body.theme-dark .auth-shell button.auth-brand-cta,
html body.theme-dark .auth-shell button.auth-brand-cta * {
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
}
html body.theme-dark .auth-shell button.auth-brand-cta:hover,
html body.theme-dark .auth-shell button.auth-brand-cta:hover * {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}