/* The sign-in page (Liam, 15 Oct 2026, after a "restricted file" reel): Outrider's teal on the theme's own colours,
   light or dark as the rest of the site (theme.js: the system's choice unless the toggle says otherwise).
   Tiny spaced monospace labels, a card with teal corner brackets, a clearance box with a blinking block cursor, a
   segmented progress bar, and a short glitch on ACCESS GRANTED / DENIED. Every animation stops for reduced motion. */
.login-screen {
  /* the theme's tokens: dark is near-black, never navy (test_brand_palette); teal text is the text-safe teal in light */
  --lg-bg: var(--bg); --lg-panel: var(--surface); --lg-line: var(--border); --lg-ink: var(--ink); --lg-muted: var(--muted);
  --lg-teal: var(--accent); --lg-teal-text: var(--accent-text); --lg-glow: rgba(43, 213, 219, 0.35); --lg-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --lg-head: "Space Grotesk", system-ui, sans-serif;
  min-height: 100vh; margin: 0; background: var(--lg-bg); color: var(--lg-ink); font-family: var(--lg-mono);
  background-image: linear-gradient(rgba(43, 213, 219, 0.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(43, 213, 219, 0.035) 1px, transparent 1px);
  background-size: 32px 32px;
}
.login-screen::after {            /* faint scanlines over everything */
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--lg-ink) 3%, transparent) 0 1px, transparent 1px 3px);
}
[data-theme="light"] .login-screen { --lg-glow: rgba(14, 122, 128, 0.18); }
[data-theme="light"] .login-screen::after { background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--lg-ink) 1.5%, transparent) 0 1px, transparent 1px 3px); }
.lg-mark .on-light, .lg-by .on-light { display: none; }
[data-theme="light"] .lg-mark .on-light, [data-theme="light"] .lg-by .on-light { display: block; }
[data-theme="light"] .lg-mark .on-dark, [data-theme="light"] .lg-by .on-dark { display: none; }
/* Bascule (16 Oct 2026): its wordmark on the card, its icon in the footer, its arc large and faint behind everything */
.lg-by { display: inline-flex; align-items: center; }
.lg-by img { height: 20px; width: auto; }
.lg-foot-by { display: inline-flex; align-items: center; gap: 10px; }
.lg-foot-by img { width: 18px; height: 18px; border-radius: 4px; flex: none; }
.lg-arc { position: fixed; right: -8vw; bottom: -6vh; width: min(110vw, 1100px); height: auto; opacity: 0.22; pointer-events: none; z-index: 0; }
[data-theme="light"] .lg-arc { opacity: 0.08; }
.lg-frame { position: relative; z-index: 1; }
.lg-frame { max-width: 440px; margin: 0 auto; min-height: 100vh; box-sizing: border-box; padding: 28px 20px 24px;
  display: flex; flex-direction: column; }
.lg-label { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--lg-muted); }
.lg-label.teal { color: var(--lg-teal-text); }
.lg-top { display: flex; justify-content: space-between; gap: 12px; }
.lg-mark { display: flex; justify-content: center; margin: 36px 0 28px; }
.lg-mark img { width: 72px; height: 72px; filter: drop-shadow(0 0 14px var(--lg-glow)); }

/* the card and its teal corner brackets */
.lg-card { position: relative; background: color-mix(in srgb, var(--lg-panel) 88%, transparent); border: 1px solid var(--lg-line); padding: 18px 18px 16px; }
.lg-card::before, .lg-card::after { content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none; }
.lg-card::before { top: -1px; left: -1px; border-top: 2px solid var(--lg-teal); border-left: 2px solid var(--lg-teal); }
.lg-card::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--lg-teal); border-right: 2px solid var(--lg-teal); }
.lg-card .lg-corner-tr, .lg-card .lg-corner-bl { position: absolute; width: 14px; height: 14px; pointer-events: none; }
.lg-card .lg-corner-tr { top: -1px; right: -1px; border-top: 2px solid var(--lg-teal); border-right: 2px solid var(--lg-teal); }
.lg-card .lg-corner-bl { bottom: -1px; left: -1px; border-bottom: 2px solid var(--lg-teal); border-left: 2px solid var(--lg-teal); }
.lg-card-head { display: flex; justify-content: space-between; gap: 12px; }
.lg-title { position: relative; font: 700 42px/1.05 var(--lg-head); letter-spacing: 0.01em; margin: 14px 0 6px; color: var(--lg-ink); }
.lg-title sup { font-size: 16px; vertical-align: super; margin-left: 2px; }
.lg-status b { color: var(--lg-ink); font-weight: 600; }
.lg-status.ok b { color: var(--lg-teal-text); }
.lg-field-label { margin: 22px 0 8px; }
.lg-clear { position: relative; }

/* the clearance box: the sign-in button, drawn as a terminal input with a blinking block cursor */
.lg-input { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; min-height: 46px; padding: 0 14px;
  background: var(--lg-bg); border: 1px solid var(--lg-line); color: var(--lg-ink); font: 500 14px var(--lg-mono);
  letter-spacing: 0.08em; text-align: left; cursor: pointer; }
.lg-input:hover, .lg-input:focus-visible { border-color: var(--lg-teal); outline: none; box-shadow: 0 0 0 1px var(--lg-teal), 0 0 18px rgba(43, 213, 219, 0.18); }
.lg-input[disabled] { cursor: progress; }
.lg-input[hidden] { display: none; }
.lg-cursor { width: 9px; height: 20px; background: var(--lg-teal); flex: none; animation: lg-blink 1s steps(1) infinite; }
@keyframes lg-blink { 50% { opacity: 0; } }
.lg-attempt { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; min-height: 14px; }
.lg-attempt .lg-label { white-space: nowrap; letter-spacing: 0.18em; font-size: 10.5px; }
.lg-attempt .lg-label:last-child { text-align: right; }

/* ACCESS GRANTED / DENIED: a white bar slammed across the clearance box */
.lg-banner { position: absolute; left: -6px; right: -6px; top: 50%; transform: translateY(-50%) scaleX(0); transform-origin: left;
  background: var(--lg-ink); color: var(--lg-bg); font: 700 26px/1 var(--lg-head); letter-spacing: 0.06em; text-align: center; padding: 14px 8px;
  box-shadow: 0 0 0 1px var(--lg-bg), 0 0 30px var(--lg-glow); pointer-events: none; visibility: hidden; transition: opacity 0.35s; }
.lg-banner.out { opacity: 0; }
.lg-banner.on { visibility: visible; animation: lg-slam 0.38s cubic-bezier(.2, .9, .2, 1) forwards, lg-flicker 0.6s steps(2) 0.38s 2; }
@keyframes lg-slam { from { transform: translateY(-50%) scaleX(0); } to { transform: translateY(-50%) scaleX(1); } }
@keyframes lg-flicker { 50% { opacity: 0.72; } }

/* progress: VERIFYING CLEARANCE 000% over a segmented bar */
.lg-progress { margin-top: auto; padding-top: 40px; }
.lg-progress-row { display: flex; justify-content: space-between; margin-bottom: 8px; }
.lg-bar { display: grid; grid-template-columns: repeat(32, 1fr); gap: 3px; }
.lg-bar i { height: 8px; background: var(--lg-line); }
.lg-bar i.on { background: var(--lg-teal); box-shadow: 0 0 8px rgba(43, 213, 219, 0.45); }
.lg-foot { margin-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lg-theme { background: none; border: 1px solid var(--lg-line); color: var(--lg-muted); font: 500 10.5px var(--lg-mono); letter-spacing: 0.22em;
  text-transform: uppercase; padding: 6px 10px; cursor: pointer; white-space: nowrap; flex: none; }
.lg-foot .lg-label { letter-spacing: 0.2em; font-size: 10.5px; }
.lg-theme:hover, .lg-theme:focus-visible { color: var(--lg-ink); border-color: var(--lg-teal); outline: none; }
.lg-line { position: fixed; left: 0; bottom: 0; height: 2px; width: 0; background: var(--lg-teal); box-shadow: 0 0 10px var(--lg-teal);
  animation: lg-grow 2.4s ease-out 0.3s forwards; }
@keyframes lg-grow { to { width: 38vw; } }

/* the glitch: sliced, shifted copies of the title (and a jitter on the mark) for a fraction of a second */
.lg-title.glitch::before, .lg-title.glitch::after { content: attr(data-text); position: absolute; inset: 0; overflow: hidden; }
.lg-title.glitch::before { color: var(--lg-teal); transform: translate(-3px, 0); clip-path: inset(100% 0 0 0); animation: lg-slice-a 0.5s steps(5) 2 forwards; }
.lg-title.glitch::after { color: #ff3b6b; transform: translate(3px, 0); clip-path: inset(100% 0 0 0); animation: lg-slice-b 0.5s steps(5) 2 forwards; mix-blend-mode: screen; }
[data-theme="light"] .lg-title.glitch::after { mix-blend-mode: multiply; }
.lg-title.glitch { animation: lg-jitter 0.5s steps(4) 2; }
@keyframes lg-slice-a { 0% { clip-path: inset(0 0 80% 0); } 25% { clip-path: inset(40% 0 35% 0); } 50% { clip-path: inset(75% 0 5% 0); }
  75% { clip-path: inset(15% 0 60% 0); } 100% { clip-path: inset(100% 0 0 0); } }
@keyframes lg-slice-b { 0% { clip-path: inset(60% 0 10% 0); } 25% { clip-path: inset(5% 0 75% 0); } 50% { clip-path: inset(30% 0 45% 0); }
  75% { clip-path: inset(85% 0 0 0); } 100% { clip-path: inset(100% 0 0 0); } }
@keyframes lg-jitter { 25% { transform: translateX(2px); } 50% { transform: translateX(-3px) skewX(-4deg); } 75% { transform: translateX(1px); } }
.lg-mark.glitch img { animation: lg-mark 0.5s steps(4) 2; }
@keyframes lg-mark { 0% { clip-path: inset(0 0 55% 0); transform: translateX(-4px); } 33% { clip-path: inset(40% 0 20% 0); transform: translateX(5px); }
  66% { clip-path: inset(70% 0 0 0); transform: translateX(-2px); } 100% { clip-path: inset(0); transform: none; } }

/* messages and the local-testing password form */
.lg-note { margin-top: 14px; font-size: 12px; letter-spacing: 0.04em; line-height: 1.6; color: var(--lg-muted); }
.lg-note.err { color: var(--sev-severe); }
.lg-note a, .lg-note button.lg-link { color: var(--lg-teal); background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; cursor: pointer; }
.lg-pw { margin-top: 16px; display: grid; gap: 8px; }
.lg-pw input { box-sizing: border-box; width: 100%; height: 40px; padding: 0 12px; background: var(--lg-bg); border: 1px solid var(--lg-line);
  color: var(--lg-ink); font: 13px var(--lg-mono); }
.lg-pw input:focus-visible { outline: none; border-color: var(--lg-teal); }
.lg-pw button { height: 40px; background: var(--lg-teal); color: var(--brand-navy); border: 0; font: 700 12px var(--lg-mono); letter-spacing: 0.22em;
  text-transform: uppercase; cursor: pointer; }
.lg-pw[hidden] { display: none; }
/* email sign-in beside Microsoft (16 Oct 2026): the divider, and the link and forgot-password buttons under the form */
.lg-or { margin: 18px 0 0; text-align: center; }
.lg-or[hidden], .lg-pw-more[hidden] { display: none; }
.lg-pw-more { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 2px; font-size: 12px; }
.lg-pw .lg-pw-more .lg-link { height: auto; padding: 4px 0; background: none; border: 0; color: var(--lg-teal-text); font: 500 12px var(--lg-mono);
  letter-spacing: 0.02em; text-transform: none; text-decoration: underline; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .login-screen *, .login-screen *::before, .login-screen *::after { animation: none !important; transition: none !important; }
  .lg-banner.on { transform: translateY(-50%) scaleX(1); }
  .lg-line { width: 38vw; }
}