/* CHTR-257 (SS-1) — self-serve signup pages (form + magic-link verify landing). Self-contained;
   loaded by /signup/. Kept simple and on-brand (the Hablexo equaliser mark + Welcome lockup),
   no third-party fonts (CSP pins everything to our origin). External stylesheet + external JS so
   the Caddy CSP (script-src 'self') is satisfied. */

:root {
  --bg: #0b0b10;
  --card: #16161f;
  --fg: #f5f3fb;
  --muted: #a9a7b8;
  --accent: #7c5cff;
  --accent-2: #3ddc97;
  /* CHTR-268 — authorised brand-mark hues, on-dark colourway (the same trio the
     attendee page + operator console render on dark; light-surface hexes are
     #4f3a9c / #b02d6e / #1c7a59 per the style guide). */
  --eq-violet: #9384df;
  --eq-magenta: #d65a99;
  --eq-green: #3fae86;
  --danger: #ff6b6b;
  --line: #2a2a38;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: radial-gradient(1200px 600px at 50% -10%, #1b1530 0%, var(--bg) 60%);
  color: var(--fg);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}

.card {
  width: 100%; max-width: 460px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 26px 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
/* Animated equaliser mark (CHTR-268). The locked 7-bar brand pattern —
   violet violet magenta green violet magenta violet — at the canonical rest
   heights [0.40 0.74 1.00 0.55 0.84 0.45 0.28] and vertical-centre alignment,
   i.e. the same static mark the attendee page + operator console show, brought
   to life. Motion touches height only (scaleY around centre); each bar keeps
   its colour. "Spectrum" tempo: irregular, non-repeating, 1/3 speed — a calm
   live-audio feel (per-bar base loop 1.1–1.9s × 3). Reduced motion → static. */
.eq { display: inline-flex; align-items: center; gap: 3px; height: 22px; }
.eq i {
  width: 3px; border-radius: 1.5px; transform-origin: center;
  animation: eq-spectrum 3.9s ease-in-out infinite;
}
.eq i:nth-child(1) { height: 40%;  background: var(--eq-violet);  animation-duration: 3.9s;  animation-delay: 0s;    }
.eq i:nth-child(2) { height: 74%;  background: var(--eq-violet);  animation-duration: 5.1s;  animation-delay: 0.54s; }
.eq i:nth-child(3) { height: 100%; background: var(--eq-magenta); animation-duration: 3.3s;  animation-delay: 0.18s; }
.eq i:nth-child(4) { height: 55%;  background: var(--eq-green);   animation-duration: 5.7s;  animation-delay: 0.72s; }
.eq i:nth-child(5) { height: 84%;  background: var(--eq-violet);  animation-duration: 4.35s; animation-delay: 0.36s; }
.eq i:nth-child(6) { height: 45%;  background: var(--eq-magenta); animation-duration: 4.8s;  animation-delay: 0.9s;  }
.eq i:nth-child(7) { height: 28%;  background: var(--eq-violet);  animation-duration: 3.75s; animation-delay: 0.06s; }
@keyframes eq-spectrum {
  0%   { transform: scaleY(0.30); }
  22%  { transform: scaleY(0.95); }
  44%  { transform: scaleY(0.50); }
  68%  { transform: scaleY(1); }
  100% { transform: scaleY(0.30); }
}
@media (prefers-reduced-motion: reduce) { .eq i { animation: none; } }
.brand-word { font-weight: 700; letter-spacing: 0.2px; }
.brand-tag { color: var(--muted); font-size: 0.82rem; margin-left: auto; }

h1 { font-size: 1.4rem; margin: 0 0 6px; }
.lede { color: var(--muted); margin: 0 0 20px; font-size: 0.95rem; }
.lede a { color: var(--accent-2); }

label { display: block; font-size: 0.85rem; color: var(--muted); margin: 14px 0 6px; }
input[type="email"], input[type="text"], input[type="password"] {
  width: 100%; padding: 12px 14px; font-size: 1rem;
  background: #0e0e16; color: var(--fg);
  border: 1px solid var(--line); border-radius: 10px;
}
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.tos { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 4px; font-size: 0.86rem; color: var(--muted); }
.tos input { margin-top: 3px; }
.tos a { color: var(--accent-2); }

button.primary {
  width: 100%; margin-top: 18px; padding: 13px 16px; font-size: 1rem; font-weight: 650;
  background: var(--accent); color: #fff; border: 0; border-radius: 11px; cursor: pointer;
}
button.primary:disabled { opacity: 0.5; cursor: not-allowed; }
button.primary:hover:not(:disabled) { filter: brightness(1.08); }

.note { margin-top: 16px; font-size: 0.9rem; }
.note.ok { color: var(--accent-2); }
.note.err { color: var(--danger); }
.hidden { display: none !important; }

/* CHTR-292 (T2/T3) — the disabled "Continue with Google" SSO placeholder + the "or" divider.
   Google SSO wires later (CHTR-276); the button ships visibly disabled so the layout is stable. */
button.sso {
  width: 100%; margin-top: 12px; padding: 12px 16px; font-size: 0.95rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #0e0e16; color: var(--fg); border: 1px solid var(--line); border-radius: 11px; cursor: not-allowed;
}
button.sso:disabled { opacity: 0.55; }
button.sso .g { width: 16px; height: 16px; border-radius: 50%;
  background: conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0); }
.sso-soon { font-size: 0.72rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; }
.divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 4px; color: var(--muted); font-size: 0.8rem; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.alt { color: var(--muted); font-size: 0.9rem; margin-top: 18px; text-align: center; }
.alt a { color: var(--accent-2); }
.spin { color: var(--muted); font-size: 0.95rem; margin: 8px 0 0; }

/* CHTR-274 (AL-4): the copy-token UI is gone — create-password / reset forms instead. */
.showpw { display: flex; gap: 8px; align-items: center; margin: 12px 0 0; font-size: 0.86rem; }
.showpw input { margin: 0; }
.fineprint { color: var(--muted); font-size: 0.82rem; margin-top: 14px; }
ol.steps { color: var(--muted); font-size: 0.9rem; padding-left: 18px; }
ol.steps li { margin: 6px 0; }
.steps a { color: var(--accent-2); }
.warn { color: var(--danger); font-size: 0.82rem; margin-top: 8px; }