/* SkyDOPS auth pages — dark-neon, self-contained (no CDN, no build step).
   Matches the SPA design tokens (frontend/src/index.css). */
:root {
  --surface-0: #07090d;
  --surface-1: #0c1017;
  --surface-2: #131926;
  --line: #1e2738;
  --ink: #e6ecf5;
  --ink-dim: #8b98ad;
  --neon-purple: #a78bfa;
  --neon-green: #34f5a1;
  --neon-red: #ff4d6d;
  --neon-amber: #ffc247;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100vh;
  color-scheme: dark;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(167, 139, 250, 0.14), transparent 60%),
    var(--surface-0);
  color: var(--ink);
  font-family: "Inter Variable", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.auth-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
}
.auth-topbar a { display: inline-flex; }
.auth-topbar img { height: 34px; border-radius: 22%; }
.auth-logout {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  border-radius: 8px;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.auth-logout:hover { color: var(--neon-red); border-color: var(--neon-red); }

.auth-main {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.75rem;
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.06), 0 24px 60px -20px rgba(0, 0, 0, 0.8);
}

/* ⚠ CENTRED, AND WITH NO LEFT INDENT. The 1.3rem indent this used to carry
   lined the subtitle up under the wordmark of the old LEFT-ALIGNED brand — a
   dot, a gap, then the text. The shared mark centres itself, so that indent
   became a visible offset to one side. */
.auth-sub {
  color: var(--ink-dim);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 1.5rem;
}

.auth-title {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 1.1rem;
}

.auth-field { margin-bottom: 0.9rem; }
.auth-field label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 0.35rem;
}
.auth-field input {
  width: 100%;
  background: var(--surface-0);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 0.6rem 0.75rem;
  color: var(--ink);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.auth-field input:focus {
  border-color: var(--neon-purple);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.18);
}

.auth-btn {
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.65rem;
  border: none;
  border-radius: 9px;
  background: var(--neon-purple);
  color: var(--surface-0);
  font-weight: 700;
  letter-spacing: 0.03em;
  font-size: 0.9rem;
  cursor: pointer;
  transition: filter 0.15s;
}
.auth-btn:hover { filter: brightness(1.08); }

.auth-alert {
  border-radius: 9px;
  padding: 0.6rem 0.8rem;
  font-size: 0.82rem;
  margin-bottom: 1rem;
  border: 1px solid;
}
.auth-alert.error { color: var(--neon-red); border-color: rgba(255, 77, 109, 0.4); background: rgba(255, 77, 109, 0.08); }
.auth-alert.ok { color: var(--neon-green); border-color: rgba(52, 245, 161, 0.4); background: rgba(52, 245, 161, 0.08); }

/* error / status pages */
.auth-msg { text-align: center; }
.auth-msg .code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.auth-msg .code.red { color: var(--neon-red); }
.auth-msg .code.amber { color: var(--neon-amber); }
.auth-msg h1 { font-size: 1.35rem; font-weight: 600; margin: 0 0 0.5rem; }
.auth-msg p { color: var(--ink-dim); font-size: 0.9rem; margin: 0 0 1.4rem; }
.auth-link {
  display: inline-block;
  border: 1px solid var(--neon-purple);
  color: var(--neon-purple);
  border-radius: 9px;
  padding: 0.5rem 1rem;
  text-decoration: none;
  font-size: 0.85rem;
  transition: background 0.15s;
}
.auth-link:hover { background: rgba(167, 139, 250, 0.12); }

/* --- the shared mark inside the auth card -------------------------------- */
/* ⚠ SIZE ONLY. Colour, gradient and animation live in brand.css so this page
   cannot drift from the landing and maintenance pages — which is exactly what
   happened when the login page had its own SVG wordmark. */
/* ⚠ The gap clears the RETICLE'S GLOW, not just its box. The corners carry a
   6px drop-shadow and the reticle is 1.1em tall against a line-height of 1, so
   it bleeds past the text baseline — at 6px the subtitle sat inside that. */
/* ⚠ THE GAP CLEARS THE RETICLE'S ANIMATION, NOT JUST ITS RESTING BOX. The red
   box starts at scale(2.1) and snaps shut, so at its widest it reaches well
   below the text baseline — 0.75rem was enough for the closed box and let the
   opening frames run across "Ground Control Station". */
.auth-mark { font-size: 30px; margin-bottom: 1.5rem; }
.auth-home { display: inline-flex; align-items: center; text-decoration: none; }

/* The mark on the status pages, centred above the code line. `.auth-home` is
   inline-flex for the login page's left-aligned topbar; inside a centred
   status card it has to be a block-level flex box or `text-align: center`
   is all that positions it, which leaves it visually off by the tile's own
   padding. */
.auth-msg .auth-home { display: flex; justify-content: center; margin-bottom: 1.1rem; }

/* The auth chrome sits above the ground layer. */
.auth-topbar, .auth-main { position: relative; z-index: 1; }