/* Alebex shared login gate — the split-panel auth screen used by the monitor,
   the call analyzer, and the docs/auth login pages. Pure presentation built on
   the design tokens (Inter + indigo accent); each page keeps its own wrapper id
   (#accessGate / #gate) and its own JS — add class="gate" to that wrapper.
   Load order: tokens.css first, then this file. */

.gate {
  position: fixed; inset: 0; z-index: 500;
  display: flex; overflow-y: auto;
  font-family: var(--font-ui);
  background: var(--surface);
}

/* Left brand panel — a flowing "seawater" WebGL field (flow-bg.js injects a
   <canvas class="flow-bg">). The light gradient below is the fallback shown
   when WebGL is unavailable; the canvas covers it otherwise. The panel is
   intentionally theme-INDEPENDENT (always light), so the wordmark uses fixed
   dark hexes rather than tokens — token text would vanish here in dark mode. */
.gate .gate-left {
  width: 42%; flex-shrink: 0;
  display: flex; justify-content: center; align-items: center;
  background: linear-gradient(150deg, #fbf9ff 0%, #efe7fb 40%, #e7f1fb 70%, #ffe3d2 100%);
  position: relative; overflow: hidden;
}
.gate .gate-left > canvas.flow-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0;
}
.gate .gate-typer { position: relative; z-index: 1; text-align: center; padding: 0 40px; max-width: 420px; user-select: none; }
.gate .typer-brand { font-size: 52px; font-weight: 600; letter-spacing: -1px; margin-bottom: 12px; }
/* Dark wordmark for the light panel; the "A" keeps the brand blue. Fixed hexes
   (mirror tokens.css light values) because the panel never follows dark mode. */
.gate .logo-a { color: #2f5bea; }
.gate .logo-lebex { color: #1a1d24; }
.gate .typer-sub {
  font-size: 20px; font-weight: 400; color: #3b414d;
  letter-spacing: 0.5px; line-height: 1.4;
  overflow: hidden; white-space: nowrap;
  border-right: 2px solid #2f5bea; width: 0;
  animation: gate-typewriter 2.5s steps(30) 0.5s forwards, gate-caret 0.6s step-end infinite;
}
@keyframes gate-typewriter { from { width: 0; } to { width: 100%; } }
@keyframes gate-caret { 0%,100% { border-color: #2f5bea; } 50% { border-color: transparent; } }

/* Right form panel. */
.gate .gate-right {
  flex: 1; display: flex; justify-content: center; align-items: center;
  padding: 40px; background: var(--surface);
}
.gate .gate-box { width: 100%; max-width: 380px; text-align: left; }
.gate .gate-box h2 { color: var(--ink); font-size: 26px; margin-bottom: 32px; font-weight: 600; }
.gate .gate-label { display: block; font-size: 14px; font-weight: 500; color: var(--ink-2); margin-bottom: 6px; }
.gate .gate-box input {
  width: 100%; padding: 10px 12px; background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); color: var(--ink);
  font-size: 14px; font-family: inherit; outline: none; margin-bottom: 20px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.gate .gate-box input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.gate .gate-error { color: var(--red); font-size: 13px; display: none; margin-bottom: 12px; }
.gate .gate-box button {
  width: 100%; padding: 12px; background: var(--accent); border: none;
  border-radius: var(--r-sm); color: #fff; font-size: 15px; font-weight: 600;
  cursor: pointer; transition: background 0.2s; margin-top: 4px;
}
.gate .gate-box button:hover { background: var(--accent-strong); }
.gate .gate-box button:disabled { opacity: 0.6; cursor: not-allowed; }

@media (max-width: 768px) {
  .gate { flex-direction: column; }
  .gate .gate-left { width: 100%; min-height: 200px; }
  .gate .gate-right { padding: 32px 24px; }
}