/* login.css — standalone stylesheet for templates/login.html and
   templates/login_verify.html ONLY. Those two pages do not extend
   base.html (see the header comment in each template for why), so they
   carry their own complete look here rather than pulling in the portal's
   Bootstrap stylesheet or any base.html chrome.

   Adapted from a reference login page's new-scheme.css: same tokens,
   same card/left-panel/right-panel structure, same wave background and
   crossfade slideshow. Trimmed to what these two pages actually use —
   the reference file's /terms chrome, its signed-in Home rules and its
   portal-chrome (header/sidebar) overrides are dropped entirely, since
   nothing here renders any of that markup. See the bottom of this file
   for the full list of what was left out and why.

   Asset paths are rewritten to this app's own static layout:
   /static/login/img/*.webp for the slideshow, /static/login/fonts/*.woff2
   for the type family. No CDN, no Google Fonts: the login CSP
   (style-src 'self' 'unsafe-inline') would block an external stylesheet
   host anyway, and self-hosting means the page still renders if a CDN is
   down. */

@font-face {
  font-family: 'Inter';
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  src: url(/static/login/fonts/inter.woff2) format('woff2');
}

/* ---------- tokens ---------- */
:root {
  --base:#FFFFFF;
  --band:#F7F8FA;
  --surface:#FFFFFF;
  --raised:#F4F6F9;
  --line:#E3E7EE;
  --line-soft:#EDF0F5;
  --red:#D6342F;
  --red-deep:#B82823;
  --navy:#16294D;
  --blue:#2F5FD0;
  --ink:#0F172A;
  --body:#4A5568;
  --muted:#3c3e42;
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow:0 12px 34px rgba(16,24,40,.08);
  --shadow-lg:0 26px 64px rgba(16,24,40,.12);
  --danger:#C0392B;
  --danger-ink:#8C2A1F;
  --danger-bg:#FDF1F1;
  --danger-line:#E2B3AD;
  --ok:#2E7D32;
  --warn-bg:#FBF5E2;
  --warn-line:#D9A404;
}

* { box-sizing:border-box; }

html { background:var(--base); -webkit-text-size-adjust:100%; }
body {
  /* Transparent on purpose: html paints the white base. An opaque body
     fill would render over the fixed wave/background layers below it. */
  margin:0; background:transparent; color:var(--ink);
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--blue); text-decoration:none; }
a:hover { color:#254CA8; }
input, button { font-family:inherit; }

/* ---------- page chrome ---------- */
.gop-bg {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(760px 420px at 50% -12%, rgba(214,52,47,.08), transparent 68%),
    radial-gradient(620px 380px at 88% 6%, rgba(47,95,208,.07), transparent 70%);
}

/* Animated ribbon layer (wave.js). The script requires .v3-hero as the
   sized container and .v3-hero-wave as the canvas inside it. Sized to the
   viewport and pinned behind the card; stills itself under reduced motion. */
.login-wave-layer {
  position:fixed; inset:0; z-index:0;
  pointer-events:none; opacity:.85;
}
.login-wave-layer .v3-hero-wave {
  display:block; width:100%; height:100%;
}

.gop-topbar {
  position:fixed; top:0; left:0; right:0; height:0;
  border-top:3px solid var(--red);
  background:transparent;
  z-index:0;
}

.gop-footer {
  position:fixed; bottom:0; left:0; right:0; height:44px;
  display:flex; align-items:center;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid var(--line-soft);
  z-index:0;
}
.gop-footer .v3-wrap {
  max-width:1000px; width:100%; margin:0 auto; padding:0 28px;
  height:100%;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.gop-footer p { margin:0; font-size:13.5px; color:var(--muted); }

/* ---------- shell ---------- */
.login-wrap {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px 24px 68px;
  background:transparent;
  position:relative; z-index:1;
  pointer-events:none;
}
.login-wrap > * { pointer-events:auto; }

/* ---------- card ---------- */
.login-card {
  display:flex; width:940px; max-width:100%; min-height:540px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px; overflow:hidden;
  box-shadow:var(--shadow-lg);
}

/* ---------- left panel: brand banner + photo slideshow ---------- */
.login-left {
  width:46%; flex:none; display:flex; flex-direction:column;
  background:var(--raised);
  border-right:1px solid var(--line);
}
.login-left-banner {
  height:60px; flex:none;
  display:flex; align-items:center; gap:11px;
  padding:0 22px;
  background:var(--surface);
  border-bottom:1px solid var(--line-soft);
  color:inherit;
}
.login-left-banner img { width:28px; height:28px; flex:none; display:block; }
.login-left-wordmark { font-family:'Inter', system-ui, sans-serif; line-height:1.15; }
.login-left-wordmark .lw-top { font-weight:700; font-size:14.5px; color:var(--ink); }
.login-left-wordmark .lw-sub { font-weight:400; font-size:11px; color:var(--muted); }

.login-left-body {
  flex:1; display:flex; flex-direction:column;
  position:relative; overflow:hidden; min-height:200px; padding:0;
  background:
    linear-gradient(150deg, rgba(214,52,47,.1), rgba(47,95,208,.13)),
    linear-gradient(180deg, #EEF1F7, #E4E9F2);
}
.login-slideshow { position:absolute; inset:0; }
.login-slide {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; animation:gop-crossfade 35s infinite;
}
.login-slide-1 { animation-delay:0s; }
.login-slide-2 { animation-delay:5s; }
.login-slide-3 { animation-delay:10s; }
.login-slide-4 { animation-delay:15s; }
.login-slide-5 { animation-delay:20s; }
.login-slide-6 { animation-delay:25s; }
.login-slide-7 { animation-delay:30s; }
@keyframes gop-crossfade {
  0%   { opacity:0; }
  4.3% { opacity:1; }
  14.3%{ opacity:1; }
  18.6%{ opacity:0; }
  100% { opacity:0; }
}

/* ---------- right panel ---------- */
.login-right {
  flex:1; display:flex; flex-direction:column;
  padding:38px 42px 26px; min-width:0; background:var(--surface);
}
.login-brand-mobile {
  display:none; align-items:center; justify-content:center; gap:9px;
  text-align:center;
  padding-bottom:16px; border-bottom:1px solid var(--line-soft); margin-bottom:20px;
  color:inherit;
}
.login-brand-mobile img { width:24px; height:24px; flex:none; display:block; }
.login-brand-mobile .login-left-wordmark { text-align:left; }

.login-title {
  margin:0 0 8px; font-size:30px; font-weight:800;
  letter-spacing:-.03em; line-height:1.1; color:var(--navy);
}
.login-sub {
  margin:0 0 26px; font-size:14.5px; color:var(--body);
  line-height:1.6; white-space:pre-line;
}
.login-stage { flex:1; display:flex; flex-direction:column; gap:14px; }
.login-label {
  font-size:12px; font-weight:700; letter-spacing:.03em; color:var(--ink);
}

/* ---------- inputs ---------- */
.login-input {
  height:44px; padding:0 14px; font-size:14.5px;
  border:1px solid var(--line); border-radius:10px; width:100%;
  background:#fffdf7; color:var(--ink);
  transition:border-color .14s ease, box-shadow .14s ease;
}
.login-input::placeholder { color:#8A94A6; }
.login-input:focus, .login-code:focus {
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(47,95,208,.16);
}
.login-code {
  height:52px; padding:0 14px; font-size:22px; letter-spacing:.5em;
  font-family:'Inter', monospace;
  border:1px solid var(--line); border-radius:10px; width:100%;
  background:#fffdf7; color:var(--ink);
  transition:border-color .14s ease, box-shadow .14s ease;
}
.login-code-wrap { position:relative; }

/* ---------- buttons ---------- */
.login-btn {
  height:44px; border:1px solid transparent; border-radius:10px;
  background:linear-gradient(180deg, var(--red), var(--red-deep));
  color:#fff; font-size:14px; font-weight:600; letter-spacing:-.005em;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(214,52,47,.26);
  transition:transform .14s ease, box-shadow .14s ease;
}
.login-stage > .login-btn { width:100%; }
.login-btn:hover {
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(214,52,47,.34);
  filter:none;
}
.login-btn:disabled {
  background:var(--raised);
  color:#9AA3B2;
  border-color:var(--line);
  opacity:1; cursor:default; transform:none; box-shadow:none;
}
.login-btn.is-busy,
.login-btn.is-busy:hover,
.login-btn.is-busy:disabled {
  background:linear-gradient(180deg, #7C8698, #6B7486) !important;
  color:#F3F6FB;
  opacity:1; filter:none; transform:none;
  box-shadow:none;
  cursor:wait; pointer-events:none;
}
.login-btn-ghost {
  height:44px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); color:var(--ink);
  font-size:13.5px; font-weight:600; cursor:pointer;
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  box-sizing:border-box;
  box-shadow:var(--shadow-sm);
  transition:background .14s ease, border-color .14s ease;
}
.login-btn-ghost:hover { background:var(--band); border-color:#D3D9E4; }
.login-btn-ghost:disabled {
  color:#9AA3B2; cursor:default; box-shadow:none; background:var(--raised);
}

.login-pin-actions {
  width:300px; max-width:100%; margin:0 auto;
  display:flex; flex-direction:column; gap:10px;
}
.login-btn-verify { width:100%; }
.login-pin-secondary { flex-direction:row; align-items:stretch; gap:10px; margin-top:10px; }
.login-pin-secondary-form { flex:1; min-width:0; margin:0; display:flex; }
.login-pin-secondary-form .login-btn-ghost { width:100%; }
.login-back { flex:1; min-width:0; }

/* ---------- helper text ---------- */
.login-hint { font-size:13.5px; color:var(--body); line-height:1.55; margin:0; }
.login-expire.is-expire-soon,
.login-expire.is-expired { color:var(--danger); font-weight:700; }
.login-resend-left { color:var(--muted); font-weight:600; }

/* Turnstile: layout box only. The widget itself is left alone on purpose
   (it belongs to the shared, un-editable _turnstile_widget.html partial). */
.login-turnstile { display:flex; justify-content:center; min-height:65px; margin:0; }
.login-turnstile .cf-turnstile { width:100%; max-width:300px; }
.login-turnstile-status {
  font-size:11.5px; color:var(--body); line-height:1.4; margin:0; text-align:center;
}
.login-turnstile-status.is-ok { color:var(--ok); }
.login-turnstile-status.is-bad { color:var(--danger); }

/* ---------- invalid + error ---------- */
.login-input.is-invalid,
.login-code.is-invalid { border-color:var(--danger); background:#FFFAFA; }
.login-input.is-invalid:focus,
.login-code.is-invalid:focus {
  border-color:var(--danger);
  box-shadow:0 0 0 3px rgba(192,57,43,.16);
}
.login-err {
  display:flex; align-items:flex-start; gap:9px; margin:-4px 0 0;
  padding:10px 12px; font-size:12.5px; line-height:1.45; color:var(--danger-ink);
  background:var(--danger-bg);
  border:1px solid var(--danger-line);
  border-left:3px solid var(--danger);
  border-radius:10px;
}
.login-err-icon {
  flex:none; width:16px; height:16px; margin-top:1px; border-radius:50%;
  background:var(--danger); color:#fff; font-size:11px; font-weight:700;
  line-height:16px; text-align:center;
}
.login-err-text { min-width:0; }

/* ---------- notices, chips, toggle row ---------- */
.login-notice {
  border-radius:10px; padding:12px 14px; font-size:12.5px; line-height:1.55;
  color:var(--body);
}
.login-notice-gold { background:var(--warn-bg); border:1px solid var(--warn-line); }
.login-notice-red { background:var(--danger-bg); border:1px solid var(--danger-line); }
.login-chip {
  background:var(--raised); border:1px solid var(--line-soft);
  border-radius:999px; padding:7px 14px; font-size:12.5px; color:var(--ink);
  display:flex; justify-content:center; align-items:center; gap:8px;
  word-break:break-all; text-align:center; font-weight:600;
}
.login-toggle-row {
  display:flex; align-items:flex-start; gap:10px;
  border:1px solid var(--line); border-radius:10px;
  padding:11px 14px; font-size:13.5px; color:var(--body);
  background:var(--surface);
}
.login-toggle-row input[type="checkbox"] { margin-top:2px; flex:none; }
.login-toggle-row span { line-height:1.4; }

/* ---------- mobile: left panel hides, mobile brand bar shows ---------- */
@media (max-width:700px) {
  .login-wave-layer { overflow:hidden; }
  .login-wave-layer .v3-hero-wave { width:270%; }

  .login-wrap { padding:14px; align-items:flex-start; padding-top:8vh; padding-bottom:72px; }
  .login-left { display:none; }
  .login-card { min-height:0; width:100%; border-radius:16px; }
  .login-right { padding:26px 22px 18px; }
  .login-brand-mobile { display:flex; }
  .login-title { font-size:26px; }
  .gop-footer { height:auto; min-height:44px; }
  .gop-footer .v3-wrap {
    flex-direction:column; justify-content:center;
    text-align:center; padding:10px 16px; gap:4px;
  }
}

@media (prefers-reduced-motion:reduce) {
  * { transition:none !important; animation:none !important; }
  /* With the crossfade off, every slide would sit at opacity 0 and the
     panel would render empty. Pin the first slide so a photo always shows. */
  .login-slide { opacity:0; }
  .login-slide-1 { opacity:1; }
}

/* ----------------------------------------------------------------------
   Dropped from the reference stylesheet, and why:
   - body.gop-terms and every .v3-* rule under it: a /terms page. Neither
     login template links to one (this build removed the Terms of Service
     footer link and the Register/Back Home row), so none of that markup
     exists here to style.
   - .home-main / .hub-tile / .core-footer rules: the signed-in Home
     dashboard. Out of scope; base.html and its own stylesheet own that.
   - The whole "PORTAL CHROME" block (.header-root, .sidebar-nav, etc):
     these two pages render no header or sidebar at all (they don't
     extend base.html on purpose), so none of those selectors ever match.
   - .login-left-banner::before (the red "G" square badge): replaced with
     the real elephant mark image per this build's brand lockup, so the
     generated-badge rule has nothing to draw.
   - .login-alt-row (Back Home / Register grid): the portal is invite
     only, so login.html has no such row.
   ---------------------------------------------------------------------- */