/* ============================================================
   login.css — shared AUTH surface (redesign · P12)
   The chrome-free split layout used by login / signup / magic-link
   (request · sent · verify), via accounts/_auth_base.html:
     · left  — full-bleed studio photo + dreamy veil/glow/grain
     · right — a calm white panel holding the focused form card
   Layout only; consumes tokens + the dd- kit (field, button, dot,
   kicker, loader). No raw hex / magic numbers; all motion gated by
   prefers-reduced-motion. signup.css adds only signup deltas.
   ============================================================ */

.auth-body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}

/* ---- split shell ------------------------------------------------- */
.auth {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}

/* ================= LEFT — photo aside ============================= */
.auth__aside {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  padding: var(--space-9);
}

.auth__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  z-index: -3;
}

/* Dreamy veil: a coral bloom up top, grounding to a soft warm wash at the
   bottom-left so the dark brand text stays legible over the photo. */
.auth__veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    var(--glow-coral),
    linear-gradient(155deg,
      color-mix(in srgb, var(--paper) 8%, transparent) 0%,
      transparent 34%,
      color-mix(in srgb, var(--paper) 30%, transparent) 66%,
      color-mix(in srgb, var(--paper) 72%, transparent) 100%);
}

.auth__glow {
  position: absolute;
  inset: -10% -10% auto auto;
  width: 70%;
  height: 60%;
  z-index: -2;
  background: var(--glow-peach);
  pointer-events: none;
}

.auth__grain { position: absolute; z-index: -1; }

.auth__aside-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 30rem;
}

.auth__brand-mark {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  text-decoration: none;
}
.auth__brand-mark:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}
.auth__brand-dot { color: var(--accent); }

.auth__aside-copy {
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--text-soft);
  max-width: 22rem;
}

.auth__aside-kicker { color: var(--text-soft); }

/* ================= RIGHT — form panel ============================ */
.auth__main {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-9) var(--space-8);
  background: var(--grad-soft);
}

/* faint coral glow drifting behind the card */
.auth__main-glow {
  position: absolute;
  inset: -20% -25% auto -10%;
  height: 70%;
  z-index: -1;
  background: var(--glow-coral);
  opacity: 0.6;
  pointer-events: none;
}

.auth__card {
  width: 100%;
  max-width: 26rem;
  animation: authCardIn var(--dur-page) var(--ease-dreamy) both;
}

@keyframes authCardIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- card head --------------------------------------------------- */
.auth-head {
  margin-bottom: var(--space-7);
}
.auth-head .dd-kicker { margin-bottom: var(--space-4); }

.auth-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  margin: 0 0 var(--space-3);
}

.auth-subtitle {
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  color: var(--text-muted);
  margin: 0;
}

/* ---- non-field alert banner ------------------------------------- */
.auth-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
  background: color-mix(in srgb, var(--danger) 8%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
  color: var(--danger);
}
.auth-alert .dd-icon { flex-shrink: 0; margin-top: 0.1em; }

/* ---- the form ---------------------------------------------------- */
.auth-form { margin: 0; }
.auth-form .dd-field { margin-bottom: var(--space-5); }

/* full-width stacked actions (buttons + social) */
.auth-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.auth-actions .dd-btn { width: 100%; }

.auth-submit { margin-top: var(--space-2); }

/* ---- password field: show/hide toggle --------------------------- */
.auth-pass .dd-field__input { padding-right: var(--space-9); }

.auth-pass-toggle {
  position: absolute;
  right: var(--space-2);
  top: calc(var(--space-5) + 2px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 0;
  transition: color var(--dur-base) var(--ease-soft),
              background-color var(--dur-base) var(--ease-soft);
}
.auth-pass-toggle:hover { color: var(--accent-strong); background: var(--tint-soft); }
.auth-pass-toggle:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.auth-pass-toggle svg { pointer-events: none; }

/* Icon swap, driven by the button's aria-pressed state (toggled in JS).
   We switch with class rules rather than the `hidden` attribute because
   `hidden` is unreliable on inline <svg> — the UA `[hidden]{display:none}`
   rule is HTML-namespaced and doesn't apply to SVG-namespaced elements. */
.auth-pass-toggle__hide { display: none; }
.auth-pass-toggle[aria-pressed="true"] .auth-pass-toggle__show { display: none; }
.auth-pass-toggle[aria-pressed="true"] .auth-pass-toggle__hide { display: inline; }

/* ---- "or" divider ------------------------------------------------ */
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-6) 0;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
  text-transform: lowercase;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ---- Google button (third-party logo keeps its own colours) ----- */
.auth-google { gap: 0.6em; }
.auth-google svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ---- footer links / back ---------------------------------------- */
.auth-foot {
  margin-top: var(--space-6);
  text-align: center;
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.auth-foot + .auth-foot { margin-top: var(--space-3); }
.auth-foot a {
  color: var(--link);
  font-weight: 600;
  text-decoration: none;
}
.auth-foot a:hover { color: var(--link-hover); text-decoration: underline; }

.auth-back {
  margin-top: var(--space-7);
  display: flex;
  justify-content: center;
}
.auth-back a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-soft), gap var(--dur-base) var(--ease-soft);
}
.auth-back a:hover { color: var(--accent-strong); gap: var(--space-3); }
.auth-back a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---- status pages (magic-link sent / verify) -------------------- */
.auth-status {
  display: grid;
  place-items: center;
  width: var(--space-10);
  height: var(--space-10);
  margin-bottom: var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--coral-50);
  color: var(--accent-strong);
}
.auth-status--ok { background: color-mix(in srgb, var(--success) 12%, var(--paper)); color: var(--success); }
.auth-status--warn { background: color-mix(in srgb, var(--danger) 10%, var(--paper)); color: var(--danger); }
.auth-status svg { width: 26px; height: 26px; }

/* ============================================================
   RESPONSIVE — collapse the photo to a top band, stack the form
   ============================================================ */
@media (max-width: 900px) {
  .auth {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .auth__aside {
    min-height: clamp(150px, 24vh, 220px);
    padding: var(--space-6);
  }
  .auth__aside-copy { display: none; }       /* keep the band tidy */
  .auth__brand-mark { font-size: clamp(24px, 7vw, 32px); }
  .auth__main {
    padding: var(--space-8) var(--space-5);
    align-items: flex-start;
  }
  .auth__card { margin: var(--space-2) auto 0; }
}

@media (max-width: 480px) {
  .auth__aside { min-height: clamp(120px, 20vh, 170px); }
  .auth__main { padding: var(--space-7) var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  .auth__card { animation: none; }
  .auth-pass-toggle,
  .auth-back a { transition: none; }
}