/* ==========================================================================
   login.css — the sign-in screen, made serious. Loaded after app.css,
   opening.css and kits.css. One dark navy ground, a quiet glass card, a
   serif wordmark, thin rules; uses only the app's own tokens so every
   edition's kit carries through. Removed on the owner's word (26 Sep
   2026): the perspective grid floor and its drift, the scan-line sweep,
   the fixed scanlines, the HUD corner brackets and their monospace
   telemetry captions (edition, UTC clock, build), the card's corner ticks,
   the typewriter caret, the shimmer on the primary button, the glowing tab
   indicator and the pulsing status LEDs. login-fx.js still writes into the
   HUD labels; they are simply not drawn.

   Structural only: every id/name/class app.js reads (#tab-signin,
   #tab-signup, #panel-signin, #panel-signup, #signin-email,
   #signin-password, #signin-error, #signup-name, #signup-email,
   #signup-password, #nda-box, #nda-agree, #signup-error, #signup-submit,
   #app-footer-signin, #brand-word-login, #core-down-banner) is untouched.
   No external requests, no web fonts, no build step. Phone-first: correct
   at 375x812, 44px targets, safe-area insets, AA contrast, visible focus
   rings, prefers-reduced-motion = static. */

/* ---------- page backdrop: one still navy ground ---------- */

.view-login {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 55% at 50% 12%, rgba(var(--glow-rgb), 0.12), transparent 62%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-sunken, var(--bg)) 100%);
}

/* the grid floor, the sweep, the scanlines and the HUD frame: retired */
.view-login::before,
.view-login::after { content: none; animation: none; }
.login-scanlines,
.login-hud,
.login-hud-corner,
.login-hud-label,
.login-card-tick-br {
  display: none !important;
  animation: none !important;
}

/* ---------- the sign-in card: quiet glass, one hairline ---------- */

.login-card {
  z-index: 2;
  border: 1px solid rgba(var(--kit-rim-rgb, 214, 203, 176), 0.16);
  border-radius: 12px;
  background: rgba(var(--kit-bg-elevated-rgb, 13, 31, 71), 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 24px 60px rgba(2, 8, 30, 0.45);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}
.login-card::before { content: none; }

/* ---------- wordmark: serif, ink and a flat champagne suffix ---------- */

#brand-word-login,
.brand-word {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.login-card .brand {
  gap: 10px;
  margin-bottom: 8px;
}
.login-card .brand-mark { filter: none; }
.login-card .brand-word-accent {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--accent);
}
.login-caret { display: none !important; animation: none !important; }

/* ---------- tabs: a quiet pearl indicator, no glow ---------- */

.login-tabs {
  position: relative;
  background: rgba(var(--kit-bg-elevated-rgb, 13, 31, 71), 0.35);
  border: 1px solid rgba(var(--kit-rim-rgb, 214, 203, 176), 0.14);
}

.login-tabs-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: var(--radius-pill);
  background: rgba(var(--kit-rim-rgb, 214, 203, 176), 0.12);
  border: 1px solid rgba(var(--kit-rim-rgb, 214, 203, 176), 0.22);
  box-shadow: none;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}
#tab-signup.is-active ~ .login-tabs-indicator,
.login-tabs.signup-active .login-tabs-indicator {
  transform: translateX(100%);
}

.login-tab {
  position: relative;
  z-index: 1;
  min-height: 44px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.18s ease;
}
.login-tab.is-active {
  background: transparent;
  color: var(--text);
  box-shadow: none;
}
.login-tab:focus-visible { outline: 2px solid rgba(var(--kit-rim-rgb, 214, 203, 176), 0.7); outline-offset: 2px; }

/* ---------- inputs: a thin rule that lights on focus, no glow ---------- */

.field-label {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.field-input {
  border: 1px solid rgba(var(--kit-rim-rgb, 214, 203, 176), 0.14);
  border-bottom: 1px solid rgba(var(--kit-rim-rgb, 214, 203, 176), 0.30);
  background: rgba(var(--kit-bg-elevated-rgb, 13, 31, 71), 0.35);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.field-input:focus {
  outline: none;
  border-color: rgba(var(--kit-rim-rgb, 214, 203, 176), 0.32);
  border-bottom-color: var(--accent);
  background: rgba(var(--kit-bg-elevated-rgb, 13, 31, 71), 0.5);
  box-shadow: none;
}
.field-input:focus-visible {
  outline: 2px solid rgba(var(--kit-rim-rgb, 214, 203, 176), 0.6);
  outline-offset: 1px;
}

/* ---------- NDA box ---------- */

.nda-block {
  position: relative;
}
.nda-title {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.nda-box {
  border: 1px solid rgba(var(--kit-rim-rgb, 214, 203, 176), 0.16);
  background: rgba(var(--kit-bg-elevated-rgb, 13, 31, 71), 0.35);
  font-family: inherit;
  position: relative;
}
.nda-box:focus-visible {
  outline: 2px solid rgba(var(--kit-rim-rgb, 214, 203, 176), 0.6);
  outline-offset: 1px;
}
.nda-scroll-hint {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
  font-family: inherit;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  transition: opacity 0.2s ease;
}
.nda-scroll-hint.is-done { color: var(--accent); }
.nda-check input {
  accent-color: var(--accent);
}

/* ---------- primary button: a hollow pearl rule; the seal on press ---------- */

.login-panel .btn-primary {
  position: relative;
  overflow: hidden;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid rgba(var(--kit-rim-rgb, 214, 203, 176), 0.55);
  background: transparent;
  color: var(--text);
  box-shadow: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.login-panel .btn-primary::after { content: none; animation: none; }
.login-panel .btn-primary:hover,
.login-panel .btn-primary:focus-visible {
  background: var(--kit-seal, var(--accent-2));
  border-color: var(--kit-seal, var(--accent-2));
  color: var(--accent-contrast);
}
.login-panel .btn-primary:focus-visible {
  outline: 2px solid rgba(var(--kit-rim-rgb, 214, 203, 176), 0.6);
  outline-offset: 3px;
}

/* ---------- status strip beneath the card: small tracked words, still dots ---------- */

.login-status-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 12px;
  margin: 14px auto 0;
  width: 100%;
  max-width: 420px;
  font-family: inherit;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-faint);
  z-index: 2;
  position: relative;
}
.login-status-strip .dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: none;
  margin-right: 6px;
  vertical-align: 1px;
}
.login-status-strip .sep { opacity: 0.4; }
.login-status-strip .floor-armed { color: var(--text-muted); }
.login-status-strip .floor-armed .dot { animation: none; }

/* ---------- footer ---------- */

#app-footer-signin {
  font-family: inherit;
  letter-spacing: 0.02em;
}

/* ---------- reduced motion: everything static ---------- */

@media (prefers-reduced-motion: reduce) {
  .view-login::before,
  .view-login::after,
  .login-caret,
  .login-tabs-indicator,
  .login-panel .btn-primary::after,
  .login-status-strip .floor-armed .dot {
    animation: none !important;
    transition: none !important;
  }
  .login-panel .btn-primary::after { display: none; }
}

/* ---------- phone-first sizing (375x812 measured) ---------- */

@media (max-width: 480px) {
  .login-card { padding: 24px 16px 20px; }
  .nda-box { max-height: 130px; }
  .login-status-strip { font-size: 8.5px; gap: 5px 8px; }
}

/* ---------- desktop (1280x800 measured) ---------- */

@media (min-width: 900px) {
  .login-card { max-width: 440px; padding: 34px 30px 28px; }
}