/* login.css — the standalone pre-auth login page (login.html).
 *
 * These rules are a DELIBERATE COPY of the login block in console.css (search
 * there for .login-overlay). The standalone page cannot load console.css — that
 * file is 403'd to a sessionless request, which is the whole point of the gate —
 * so the two must be kept in step by hand. If you restyle the in-app login
 * overlay, restyle this too; a first-time visitor and an expired-session user
 * are looking at the same front door and it should not look like two products.
 *
 * The palette is FIXED DARK, exactly as in console.css: the login sits on the
 * space background regardless of any saved theme, so a light-theme user never
 * gets a white card with invisible text. Values are literal rather than var()
 * because there is no theme layer here to resolve them.
 */

:root {
  --accent: #1f6feb;         /* console.css :root */
  --brand-sub: #8fb6ff;      /* the dark/space brand tint */
  --on-accent: #ffffff;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: #070b18;
  color: #e8ecf7;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
}
.hidden { display: none !important; }

/* deep-space ground */
.login-overlay {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1200px 700px at 50% -10%, #16224a 0%, transparent 60%),
    radial-gradient(900px 600px at 80% 110%, #12183a 0%, transparent 55%),
    #070b18;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* Mission control celebrating splashdown (NASA photo, public domain — served
   from our own static dir, never hot-linked). Screen-blended over the gradient
   so shadows stay fully dark and the card keeps its contrast, while the bright
   consoles glow through faintly. Right-aligned on purpose: the thumbs-up
   controller sits at ~46% of the frame, dead behind the centred card, so
   cover-cropping from the LEFT moves him into view beside it.
   NOTE: /mission_control.jpg is on the login-page asset allowlist in
   server.py — without that entry the gate 403s it and this layer silently
   disappears. */
.login-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("mission_control.jpg") right 35% / cover no-repeat;
  mix-blend-mode: screen;
  opacity: .35;
  pointer-events: none;
}
/* starfield: layered dot fields behind the card, with a slow twinkle */
.login-stars {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 8% 18%, rgba(255,255,255,.9), transparent),
    radial-gradient(1.2px 1.2px at 18% 62%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 27% 32%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 42% 78%, rgba(255,255,255,.85), transparent),
    radial-gradient(1px 1px at 55% 12%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.3px 1.3px at 66% 52%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 74% 84%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.6px 1.6px at 86% 28%, rgba(159,203,255,.9), transparent),
    radial-gradient(1px 1px at 93% 66%, rgba(255,255,255,.5), transparent);
  animation: login-twinkle 6s ease-in-out infinite alternate;
}
@keyframes login-twinkle { from { opacity: .55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .login-stars { animation: none; opacity: .85; }
}

/* ---- the card ---- */
.login-card {
  position: relative;                 /* above the starfield */
  z-index: 1;
  background: #0f1730;
  border: 1px solid #2a375f;
  border-radius: 12px;
  padding: 26px 32px 28px;
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #e8ecf7;
  box-shadow: 0 12px 50px rgba(0,0,0,.55);
}
.login-mark {
  width: 46px; height: 46px;
  margin: 2px auto 2px;
  filter: drop-shadow(0 2px 10px rgba(31,111,235,.45));
}
.login-card h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 2px;
  text-align: center;
  color: #f0f3fb;
}
.login-card h2 .brand-sub { color: var(--accent); font-weight: 300; }
.login-nass {
  margin: 0 0 2px !important;
  text-align: center;
  font-size: 10px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: #93a0c2;
}
.login-card p { margin: 0; text-align: center; }
.login-card .muted { color: #93a0c2; font-size: 13px; line-height: 1.45; }

/* ---- controls (console.css base rules + the fixed-dark login overrides) ---- */
input, button { font: inherit; padding: 5px 8px; border-radius: 4px; }
.login-card input {
  background: #0b1226; border: 1px solid #33406a; color: #e8ecf7;
  padding: 7px 9px;
}
.login-card input::placeholder { color: #7c88ac; }
button.primary {
  background: var(--accent); border: 1px solid var(--accent);
  color: var(--on-accent); cursor: pointer; padding: 8px 10px; font-weight: 600;
}
button.primary:hover { background: #1a5fd0; }
button:disabled { cursor: default; opacity: .75; }
:focus-visible { outline: 2px solid var(--brand-sub); outline-offset: 1px; }

.login-err { color: #ff8a80; font-size: 12px; min-height: 15px; text-align: center; }

/* ---- 2FA + recovery cards (copied from console.css, fixed-dark palette) ---- */
.tf-qr { display: flex; justify-content: center; margin: 4px 0 8px; }
.tf-qr svg { width: 216px; height: 216px; max-width: 100%; background: #fff;
  border-radius: 8px; }
.tf-scan { font-size: 12px; margin: 0 0 8px; color: #93a0c2; }
.tf-key { margin: 0; }
.tf-key > summary {
  cursor: pointer; text-align: center; font-size: 12px;
  color: var(--brand-sub); list-style: none;
}
.tf-key > summary::-webkit-details-marker { display: none; }
.tf-key > summary:hover { text-decoration: underline; }
.tf-key p { font-size: 12px; margin: 8px 0 4px; }
.tf-copy { display: block; width: auto; margin: 0 auto; padding: 3px 12px;
  font-size: 12px; background: #182347; color: #e8ecf7;
  border: 1px solid #33406a; cursor: pointer; }
.tf-secret {
  display: block; text-align: center;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 15px; letter-spacing: 1px; word-break: break-all;
  background: #0b1226; border: 1px solid #33406a; color: #e8ecf7;
  border-radius: 6px; padding: 8px 10px; margin: 4px 0 6px;
}
.tf-alt { margin: 0; text-align: center; }
.tf-alt a { color: var(--brand-sub); font-size: 12px; cursor: pointer; }
.tf-remember { display: flex; align-items: center; gap: 7px; font-size: 12px;
  color: #aab4d2; cursor: pointer; margin: 2px 0; }
.tf-remember input { width: auto; margin: 0; }
.tf-passkey {
  background: #182347; color: #e8ecf7; border: 1px solid #33406a;
  border-radius: 4px; padding: 8px 10px; font-size: 14px; cursor: pointer;
}
.tf-passkey:hover { background: #223060; }
.rec-list {
  list-style: none; margin: 6px 0 10px; padding: 10px 12px;
  background: #0b1226; border: 1px solid #33406a; border-radius: 6px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px;
  color: #e8ecf7;
}
.rec-actions { display: flex; gap: 8px; justify-content: center; }
.rec-actions button { background: #182347; color: #e8ecf7;
  border: 1px solid #33406a; cursor: pointer; padding: 8px 10px; }
.rec-actions button.primary { background: var(--accent); border-color: var(--accent); }