/* Sign-in pages (app v2, stream S6): login, register, forgot, reset and
   verify_invalid. They have no app header; they load lapri.css and this file.
   Two halves from 900px: the lamp (views/partials/auth-hero.ejs) and the
   form. Below that, a short lamp band above the form. Tokens only, so Lamp and
   Paper both work (the pages read localStorage.lapri_theme before paint). */

body.auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}
@media (min-width: 900px) {
  body.auth { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}

/* ---- The lamp side ----------------------------------------------------------- */
.auth-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 36px;
  min-width: 0;
  padding: clamp(28px, 4vw, 48px) clamp(24px, 4.5vw, 56px);
  border-right: 1px solid var(--hairline);
  background: linear-gradient(180deg, color-mix(in oklch, var(--bg2) 70%, transparent), transparent);
}
.auth-hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -20% -30% -10% -10%;
  background:
    radial-gradient(48% 42% at 62% 58%, color-mix(in oklch, var(--glow-color) calc(var(--glow-alpha) * 130%), transparent), transparent 70%),
    radial-gradient(30% 30% at 18% 92%, color-mix(in oklch, var(--c-rose) 10%, transparent), transparent 70%);
  animation: auth-breathe 10s ease-in-out infinite;
}
@keyframes auth-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.82; } }

.auth-hero__brand {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  color: var(--wordmark); text-decoration: none;
  font-family: var(--font-read); font-style: italic; font-weight: 500; font-size: 1.375rem; line-height: 1;
}
.auth-hero__brand:hover { text-decoration: none; color: var(--wordmark); }
.auth-hero__mark { width: 24px; height: 24px; flex: none; }
.auth-hero__mark * { stroke: none; }

.auth-hero__middle { display: flex; flex-direction: column; gap: 18px; max-width: 32rem; }
.auth-hero__title {
  font-family: var(--font-read); font-weight: 400;
  font-size: clamp(2.5rem, 1.5rem + 2.6vw, 3.75rem); line-height: 1.04; letter-spacing: -0.025em;
  color: var(--text); text-wrap: balance;
}
.auth-hero__title em { font-style: italic; color: var(--display-em); }
.auth-hero__lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--text2); max-width: 36ch; }

.auth-thread { display: block; width: 100%; max-width: 560px; height: auto; margin-top: -8px; }
.auth-thread__s1 { stop-color: var(--accent-hi); }
.auth-thread__s2 { stop-color: var(--accent-lo); }
.auth-thread__s3 { stop-color: color-mix(in oklch, var(--accent-lo) 55%, var(--text)); }
.auth-thread__glow circle { fill: var(--accent); opacity: 0.45; }
.auth-thread__branch path { stroke: var(--accent-hi); stroke-width: 0.9; opacity: 0.4; }
.auth-thread__leaf circle { fill: var(--accent-hi); opacity: 0.5; }
.auth-thread__line { stroke-width: 1.6; stroke-linecap: round; opacity: 0.85; }
@media (prefers-reduced-motion: no-preference) {
  .auth-thread__line { stroke-dasharray: 520; stroke-dashoffset: 520; animation: auth-draw 1.6s var(--ease-out) 0.2s forwards; }
  .auth-thread__beads circle { opacity: 0; animation: auth-bead 0.6s var(--ease-out) forwards; }
  .auth-thread__beads circle:nth-child(1) { animation-delay: 0.30s; }
  .auth-thread__beads circle:nth-child(2) { animation-delay: 0.42s; }
  .auth-thread__beads circle:nth-child(3) { animation-delay: 0.54s; }
  .auth-thread__beads circle:nth-child(4) { animation-delay: 0.66s; }
  .auth-thread__beads circle:nth-child(5) { animation-delay: 0.78s; }
  .auth-thread__beads circle:nth-child(6) { animation-delay: 0.90s; }
  .auth-thread__beads circle:nth-child(7) { animation-delay: 1.02s; }
  .auth-thread__beads circle:nth-child(8) { animation-delay: 1.14s; }
  .auth-thread__beads circle:nth-child(9) { animation-delay: 1.26s; }
  .auth-thread__beads circle:nth-child(10) { animation-delay: 1.38s; }
}
@keyframes auth-draw { to { stroke-dashoffset: 0; } }
@keyframes auth-bead { to { opacity: 1; } }

.auth-hero__foot { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: var(--fs-sm); }
.auth-hero__foot a { color: var(--muted); }
.auth-hero__foot a:hover { color: var(--text); }

/* ---- The form side ------------------------------------------------------------ */
.auth-main {
  display: grid; place-items: center;
  min-width: 0;
  padding: clamp(32px, 6vw, 72px) clamp(20px, 5vw, 56px);
}
.auth-main:focus { outline: none; }
.auth-card { width: min(100%, 420px); display: flex; flex-direction: column; gap: 24px; animation: lp-fade-up var(--dur-3) var(--ease-out) both; }
.auth-card__head { display: flex; flex-direction: column; gap: 10px; }
.auth-card__title { font-family: var(--font-read); font-size: 2rem; line-height: 1.15; font-weight: 500; letter-spacing: -0.018em; }
.auth-card__lead { color: var(--text2); line-height: 1.6; }

.auth-form { display: flex; flex-direction: column; gap: 18px; }
.auth-form .input { min-height: 48px; }
.auth-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.auth-label-row a { font-size: var(--fs-sm); color: var(--muted); }
.auth-label-row a:hover { color: var(--accent); }
.auth-pass { position: relative; }
.auth-pass .input { padding-right: 52px; }
.auth-reveal {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  color: var(--muted); background: transparent; border: 0; cursor: pointer;
}
.auth-reveal:hover { color: var(--text); background: var(--quiet-bg); }
.auth-reveal .icon { width: 20px; height: 20px; }
.auth-reveal .icon--off, .auth-reveal[aria-pressed="true"] .icon--on { display: none; }
.auth-reveal[aria-pressed="true"] .icon--off { display: inline-block; }
.auth-form .btn--primary { margin-top: 4px; }

.auth-alert, .auth-notice {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: var(--r);
  font-size: var(--fs-sm); line-height: 1.5;
}
.auth-alert { color: var(--text); background: var(--neg-bg); border: 1px solid var(--neg-bd); }
.auth-alert .icon { color: var(--neg); width: 18px; height: 18px; margin-top: 1px; flex: none; }
.auth-notice { color: var(--text); background: var(--accent-bg); border: 1px solid var(--accent-bd); }
.auth-notice .icon { color: var(--accent); width: 18px; height: 18px; margin-top: 1px; flex: none; }

.auth-consent {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-radius: var(--r);
  background: var(--quiet-bg); border: 1px solid var(--hairline);
  font-size: var(--fs-sm); line-height: 1.55; color: var(--text2); cursor: pointer;
}
.auth-consent input { margin-top: 2px; }
.auth-consent a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-bd); }

.auth-alt { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }
.auth-alt a { color: var(--accent); }
.auth-fine { font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.auth-links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: var(--fs-sm); }
.auth-sep { border: 0; height: 1px; background: var(--hairline); margin: 2px 0; }

/* ---- Phones: a band of lamp above the form -------------------------------------- */
@media (max-width: 899.98px) {
  .auth-hero {
    gap: 14px;
    padding: calc(18px + env(safe-area-inset-top)) 20px 0;
    border-right: 0; border-bottom: 1px solid var(--hairline);
  }
  .auth-hero__middle { gap: 8px; }
  .auth-hero__title { font-size: clamp(1.75rem, 1.3rem + 2.4vw, 2.25rem); line-height: 1.12; }
  .auth-hero__lead, .auth-hero__foot { display: none; }
  .auth-thread { max-width: 360px; margin: -18px 0 -6px auto; opacity: 0.9; }
  .auth-main { place-items: start center; padding: 28px 20px calc(40px + env(safe-area-inset-bottom)); }
  .auth-card__title { font-size: 1.75rem; }
}
@media (pointer: coarse) {
  .auth-form .input { font-size: max(16px, 1em); }
}