/* ============================================================ */
/* agent-video-editor — auth surface (`/auth/*`) stylesheet      */
/* ============================================================ */
/* Standalone, exactly like landing.css: auth_base.html no longer */
/* extends base.html, so viewer.css (which carries the /ui chrome */
/* header) is never loaded on a page that has no session yet.     */
/*                                                                */
/* The design-token :root block below is DUPLICATED from          */
/* viewer.css on purpose — same values, kept in sync BY HAND.     */
/* viewer.css is itself mirrored from frontend/src/styles/        */
/* tokens.css, the ultimate source of truth; if a token changes   */
/* there, update viewer.css, landing.css AND this file.           */
/*                                                                */
/* Layout: two panes. Left is the form (the only thing that must  */
/* work with CSS and JS both off). Right is the showcase — what   */
/* the account is FOR, so the visitor sees the product before     */
/* paying for it with an email address. Below 900px the showcase  */
/* is dropped entirely rather than stacked: on a phone the form   */
/* is the whole job.                                              */
/* ============================================================ */

:root {
  color-scheme: dark;

  /* --- Design tokens: mirror of viewer.css :root (keep in sync) --- */
  --bg-app: #0d0f13;
  --bg-panel: #14171c;
  --bg-elevated: #1b1f26;
  --border: #262b33;
  --fg: #e6e8eb;
  --fg-muted: #8b93a1;
  --fg-faint: #5c6470;
  --accent: #4f8ff7;
  --accent-fg: #ffffff;
  --danger: #e5484d;
  --warn: #f0a13b;
  --ok: #46a758;
  --el-clip: #2f5db3;
  --el-clip-border: #4f8ff7;
  --el-text: #8a6d1f;
  --el-text-border: #d4a72c;
  --el-audio: #1f7a55;
  --el-audio-border: #34d399;
  --el-overlay: #6b4fa0;
  --el-overlay-border: #a78bfa;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --radius: 6px;
  --radius-sm: 4px;

  /* AA-safe stand-in for --fg-faint (3.0:1 on our surfaces, below the 4.5:1
     WCAG AA floor). Same rationale as landing.css: --fg-faint stays untouched
     for decorative strokes, real text points at this instead. */
  --auth-faint-text: #838a97;
}

* { box-sizing: border-box; }

body.auth-body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-ui);
  background: var(--bg-app);
  color: var(--fg);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}

/* ============================================================ */
/* 1. Left pane — brand bar, the card, the legal footer          */
/* ============================================================ */

.auth-pane {
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  min-width: 0;
}

.auth-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.auth-brand { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.auth-brand .auth-name { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--fg-muted); letter-spacing: -0.01em; }
.auth-brand:hover .auth-name { color: var(--fg); }

/* A small "frame with a playhead" mark, drawn purely in CSS — the same mark
   the landing header and the favicon use. */
.auth-mark { position: relative; width: 18px; height: 18px; border: 1.5px solid var(--accent); border-radius: var(--radius-sm); flex: none; }
.auth-mark::after { content: ""; position: absolute; top: 1px; bottom: 1px; left: 50%; width: 1.5px; background: var(--accent); transform: translateX(-50%); }

.auth-back { font-size: var(--fs-sm); color: var(--auth-faint-text); text-decoration: none; }
.auth-back:hover { color: var(--fg); }

/* `margin: auto` on a column flex item eats ALL the free space around the
   card, which both centers it between the brand bar and the legal footer and
   keeps that footer pinned to the bottom — no separate spacer needed. */
.auth-card {
  width: 100%;
  max-width: 400px;
  margin: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 1.66);
  overflow: hidden;
  box-shadow: 0 18px 48px -24px rgba(0, 0, 0, 0.8);
}

/* The signature: a four-segment timeline strip, one color per element kind
   (clip / text / audio / overlay) — the same semantics as the real editor. */
.auth-strip { display: flex; height: 3px; }
.auth-strip > span { flex: 1; }
.auth-strip > :nth-child(1) { background: var(--el-clip-border); }
.auth-strip > :nth-child(2) { background: var(--el-text-border); }
.auth-strip > :nth-child(3) { background: var(--el-audio-border); }
.auth-strip > :nth-child(4) { background: var(--el-overlay-border); }

.auth-inner { padding: 1.5rem 1.6rem 1.7rem; }

.auth-card h1 { font-size: 1.35rem; line-height: 1.25; margin: 0 0 0.3rem; letter-spacing: -0.015em; }
.auth-sub { color: var(--fg-muted); font-size: var(--fs-md); line-height: 1.5; margin: 0 0 1.35rem; }

/* --- banners ------------------------------------------------- */
.form-error, .form-success {
  border: 1px solid var(--danger);
  border-left: 4px solid var(--danger);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem;
  color: var(--danger);
  font-size: var(--fs-md);
  line-height: 1.5;
  margin: 0 0 1rem;
}
.form-success { border-color: var(--ok); color: var(--ok); }
.form-error a, .form-success a { color: inherit; }

/* --- the form ------------------------------------------------ */
.auth-form { display: grid; gap: 0.85rem; }
.auth-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted); }
.auth-form input {
  font: inherit;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--fg);
  text-transform: none;
  letter-spacing: normal;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.auth-form input::placeholder { color: var(--fg-faint); }
.auth-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79, 143, 247, 0.2); }

.auth-form button[type="submit"] {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  padding: 0.65rem;
  margin-top: 0.15rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-fg);
  transition: filter 0.12s ease, transform 0.08s ease;
}
.auth-form button[type="submit"]:hover { filter: brightness(1.08); }
.auth-form button[type="submit"]:active { transform: scale(0.99); }
.auth-form button[type="submit"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.form-note { font-size: var(--fs-xs); color: var(--auth-faint-text); line-height: 1.6; margin: 0.1rem 0 0; }
.form-note a { color: var(--fg-muted); }
.form-note a:hover { color: var(--accent); }

/* --- password field: reveal toggle + live hints -------------- */
/* Both are progressive enhancement. The toggle button is injected by JS (so
   a no-JS visitor never sees a control that does nothing) and the hint list
   only lights up once JS is listening; it never blocks submission — the
   server stays the authority on what a valid password is. */
.auth-field--password { position: relative; }
.auth-field--password input { padding-right: 3.6rem; }

.auth-reveal {
  position: absolute;
  right: 0.45rem;
  bottom: 0.4rem;
  font: inherit;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  padding: 0.25rem 0.4rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--auth-faint-text);
}
.auth-reveal:hover { color: var(--fg); background: var(--border); }
.auth-reveal:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.auth-hints { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; margin: -0.35rem 0 0; padding: 0; list-style: none; font-size: var(--fs-xs); color: var(--auth-faint-text); }
.auth-hint::before { content: "○ "; }
.auth-hint.is-met { color: var(--ok); }
.auth-hint.is-met::before { content: "● "; }

.auth-capslock { font-size: var(--fs-xs); color: var(--warn); margin: -0.35rem 0 0; }
.auth-capslock[hidden] { display: none; }

.auth-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 1.25rem; font-size: var(--fs-sm); }
.auth-links a { color: var(--fg-muted); text-decoration: none; }
.auth-links a:hover { color: var(--accent); }

.legal-footer { font-size: var(--fs-sm); color: var(--auth-faint-text); }
.legal-footer a { color: var(--auth-faint-text); text-decoration: none; }
.legal-footer a:hover { color: var(--fg); }

/* ============================================================ */
/* 2. Right pane — the showcase                                  */
/* ============================================================ */

.auth-aside {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.6rem;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  border-left: 1px solid var(--border);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(79, 143, 247, 0.09), transparent 60%),
    var(--bg-panel);
  overflow: hidden;
  min-width: 0;
}

.auth-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.auth-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--auth-faint-text);
  margin: 0;
}

.auth-aside__title {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0.55rem 0 0;
  max-width: 18ch;
}

/* --- the demo: one sentence in, journaled ops out ------------ */
.auth-demo {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-app);
  overflow: hidden;
  max-width: 520px;
}

.auth-demo__prompt {
  display: flex;
  gap: 0.55rem;
  align-items: baseline;
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  line-height: 1.5;
}
.auth-demo__sigil { color: var(--accent); flex: none; }

.auth-ops { margin: 0; padding: 0.7rem 0.9rem; list-style: none; display: grid; gap: 0.4rem; border-bottom: 1px solid var(--border); }
.auth-op { display: flex; align-items: center; gap: 0.55rem; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--fg-muted); }
.auth-op__tick { color: var(--ok); flex: none; }
.auth-op__name { color: var(--fg); }
.auth-op__ver { margin-left: auto; color: var(--auth-faint-text); }

/* --- the resulting timeline (four kinds, one per color) ------ */
.auth-timeline { position: relative; padding: 0.7rem 0.9rem 0.9rem; display: grid; grid-template-columns: 3.6rem 1fr; gap: 0.3rem 0.6rem; align-items: center; }
.auth-timeline__label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; color: var(--auth-faint-text); }
.auth-timeline__track { position: relative; height: 18px; border-radius: var(--radius-sm); background: var(--bg-elevated); }
.auth-timeline__clip {
  position: absolute;
  top: 2px;
  bottom: 2px;
  border-radius: 3px;
  border: 1px solid;
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 12px;
  padding: 0 4px;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auth-timeline__track--clip .auth-timeline__clip { background: var(--el-clip); border-color: var(--el-clip-border); }
.auth-timeline__track--text .auth-timeline__clip { background: var(--el-text); border-color: var(--el-text-border); }
.auth-timeline__track--audio .auth-timeline__clip { background: var(--el-audio); border-color: var(--el-audio-border); }
.auth-timeline__track--overlay .auth-timeline__clip { background: var(--el-overlay); border-color: var(--el-overlay-border); }

/* The playhead wrapper spans exactly the track column, so its child can sweep
   0% → 100% without anyone having to know the pane's pixel width. */
.auth-timeline__playhead {
  position: absolute;
  top: 0.55rem;
  bottom: 0.8rem;
  left: 5.1rem;
  right: 0.9rem;
  pointer-events: none;
}
.auth-timeline__playhead::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--accent);
  box-shadow: 0 -3px 0 1px var(--accent);
  animation: auth-sweep 7s linear infinite;
}
@keyframes auth-sweep {
  0%   { left: 0%; }
  100% { left: 100%; }
}

/* --- numbered onboarding ladder (register only) -------------- */
.auth-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.9rem; max-width: 520px; counter-reset: auth-step; }
.auth-step { display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; align-items: start; }
.auth-step__num { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--accent); line-height: 1.5; }
.auth-step code { font-family: var(--font-mono); font-size: 0.92em; color: var(--fg); }

/* --- three plain claims -------------------------------------- */
.auth-points { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.85rem; max-width: 520px; }
.auth-point { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.7rem; }
.auth-point__dot { width: 7px; height: 7px; border-radius: 2px; margin-top: 0.4rem; grid-row: span 2; }
.auth-point:nth-child(1) .auth-point__dot { background: var(--el-clip-border); }
.auth-point:nth-child(2) .auth-point__dot { background: var(--el-audio-border); }
.auth-point:nth-child(3) .auth-point__dot { background: var(--el-overlay-border); }
.auth-point__title { font-size: var(--fs-md); font-weight: 600; margin: 0; }
.auth-point__body { font-size: var(--fs-md); line-height: 1.55; color: var(--fg-muted); margin: 0; }
.auth-point code { font-family: var(--font-mono); font-size: 0.92em; color: var(--fg); }

/* ============================================================ */
/* 3. Responsive + motion                                        */
/* ============================================================ */

/* On a phone the form IS the page: the showcase is removed from the layout
   rather than pushed below the fold, where it would only add scroll before
   a visitor can reach the submit button. */
@media (max-width: 900px) {
  body.auth-body { grid-template-columns: minmax(0, 1fr); }
  .auth-aside { display: none; }
  .auth-card { margin: 1.75rem auto 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-timeline__playhead::after { animation: none; left: 46%; }
  .auth-form button[type="submit"] { transition: none; }
}