/* ============================================================================
   SIGN-IN PAGE (src/routes/auth.js loginPage)
   A split screen over the Government House artwork: the state's message on
   the left, the sign-in card on the right. Loaded only on /login after
   app.css, and `lg-` prefixed so it never restyles anything else.

   Light and dark: every colour is an `--lg-` token on .lgn, set once for light
   and flipped once for dark — both when the theme toggle says so
   (`data-theme="dark"`) and when the device is set to dark and nobody has
   chosen (the media-query block at the foot). The toggle in the top corner is
   the same #themeToggle the signed-in pages use, wired by shell.js, so the
   choice made here carries into the application and back.
   ============================================================================ */
.lgn{position:relative;min-height:100vh;min-height:100dvh;overflow-x:clip;color-scheme:light;
  --lg-navy:#12294A;--lg-navy-deep:#0B1B33;--lg-gold:#C9950E;--lg-gold-deep:#8C6F1F;
  --lg-green:#1F7A4D;--lg-ink:#1A1A1A;--lg-ink-2:#4A4A4A;--lg-ink-3:#6F6F6F;
  --lg-line:rgba(20,48,85,.16);--lg-line-bold:rgba(20,48,85,.28);
  /* navy used as TEXT (headings, links); --lg-navy stays the fill colour */
  --lg-head:#12294A;--lg-lead:#333;--lg-glow:rgba(255,255,255,.6);--lg-glow-2:rgba(255,255,255,.7);
  --lg-bg:#F6F1E6;--lg-card:#fff;--lg-field:#fff;--lg-placeholder:#9A9A9A;
  --lg-link:#1E40AF;--lg-noacct:#EEF4EF;--lg-btn:#12294A;--lg-ring:#fff;--lg-feat-line:rgba(20,48,85,.2);
  --lg-hover:rgba(18,41,74,.06);--lg-focus:rgba(18,41,74,.14);
  --lg-veil:linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.58) 42%,rgba(255,255,255,.22) 60%,rgba(255,255,255,0) 72%);
  --lg-veil-sm:linear-gradient(180deg,rgba(255,255,255,.35) 0,rgba(255,255,255,.55) 260px,#F6F1E6 500px);
  --lg-shadow:0 30px 80px -30px rgba(18,41,74,.45),0 0 0 1px rgba(20,48,85,.06);
  font-family:var(--font-body);color:var(--lg-ink);background:var(--lg-bg)}
.lg-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0 50%;
  z-index:0;pointer-events:none;user-select:none}
/* The artwork is bright on the left; a soft veil keeps the headline readable
   without dulling the photograph beneath it. */
.lgn::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--lg-veil)}
.lg-in{position:relative;z-index:2;min-height:inherit;display:grid;
  grid-template-columns:minmax(0,1fr);gap:24px;
  padding:clamp(18px,3vw,36px) clamp(16px,4vw,56px);max-width:1680px;margin:0 auto}
@media(min-width:1000px){.lg-in{grid-template-columns:minmax(0,1.15fr) minmax(400px,520px);
  align-items:center;gap:clamp(24px,5vw,80px)}}
@media(min-width:1400px){.lg-in{padding-right:clamp(130px,11vw,190px)}}

/* ------------------------------ left column ------------------------------ */
.lg-intro{display:flex;flex-direction:column;justify-content:space-between;min-height:0;
  max-width:780px;gap:28px}
.lg-gov{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
.lg-gov img{width:64px;height:64px;object-fit:contain;flex:none}
.lg-gov-txt{display:flex;flex-direction:column;gap:2px;line-height:1.05}
.lg-gov-txt small{font-size:.75rem;font-weight:600;letter-spacing:.01em;
  color:var(--lg-ink-2)}
.lg-gov-txt b{font-size:clamp(1.15rem,.9rem+1vw,1.55rem);font-weight:600;letter-spacing:.01em;color:var(--lg-head)}
.lg-motto{margin-top:6px;padding-top:6px;border-top:1px solid var(--lg-gold);
  font-size:.6875rem;font-weight:600;letter-spacing:.01em;
  color:var(--lg-gold-deep)}
.lg-h1{font-family:var(--font-display);font-weight:500;letter-spacing:-.025em;line-height:1.02;
  font-size:clamp(2.4rem,1.4rem+4.2vw,4.75rem);color:var(--lg-head);margin:0}
.lg-h1 em{font-style:normal;color:var(--lg-gold)}
.lg-lead{margin:18px 0 0;font-size:clamp(1rem,.9rem+.4vw,1.2rem);line-height:1.55;
  color:var(--lg-lead);max-width:32em;text-shadow:0 1px 0 var(--lg-glow)}
.lg-feats{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:14px 0;max-width:720px}
.lg-feats li{display:flex;align-items:center;gap:12px;padding-right:16px;margin-right:16px;flex:1 1 200px;
  border-right:1px solid var(--lg-feat-line);text-shadow:0 1px 0 var(--lg-glow-2)}
.lg-feats li:last-child{border-right:0;margin-right:0;padding-right:0}
.lg-feats li > div > b{display:block;font-family:var(--font-display);font-size:1.08rem;font-weight:600;
  line-height:1.15;color:var(--lg-ink)}
.lg-feats li > div > span{display:block;font-size:.78rem;line-height:1.35;color:var(--lg-lead);margin-top:3px;
  max-width:19ch}
.lg-orb{width:52px;height:52px;border-radius:999px;flex:none;display:grid;place-items:center;
  color:#fff;box-shadow:0 8px 18px -8px rgba(0,0,0,.45)}
.lg-orb svg{width:24px;height:24px;stroke-width:1.8}
.lg-orb.navy{background:var(--lg-navy)}
.lg-orb.gold{background:var(--lg-gold)}
.lg-orb.green{background:var(--lg-green)}
.lg-tag{display:none;color:#fff;font-size:.75rem;font-weight:600;letter-spacing:.01em;line-height:1.7;max-width:22ch}
.lg-tag::before{content:"";display:block;width:34px;height:2px;background:var(--lg-gold);margin-bottom:12px}
@media(min-width:1000px){
  .lg-intro{min-height:calc(100vh - 2*clamp(18px,3vw,36px));min-height:calc(100dvh - 2*clamp(18px,3vw,36px))}
  .lg-tag{display:block}
}

/* Faint mottos on the far right, as on the artwork. */
.lg-side{display:none;position:absolute;right:clamp(16px,2.4vw,40px);z-index:2;font-size:.6875rem;
  font-weight:600;letter-spacing:.01em;line-height:1.9;color:#A9A093;
  text-align:left;pointer-events:none}
.lg-side.top{top:clamp(28px,4vw,56px)}
.lg-side.bottom{bottom:clamp(28px,4vw,56px)}
.lg-side.bottom::after,.lg-side.top::before{content:"";display:block;width:28px;height:1px;
  background:var(--lg-gold);margin:10px 0}
@media(min-width:1400px){.lg-side{display:block}}

/* --------------------------------- card ---------------------------------- */
.lg-card{position:relative;width:100%;max-width:520px;margin:0 auto;background:var(--lg-card);
  border-radius:12px;padding:clamp(22px,3.5vw,40px) clamp(20px,3.5vw,40px) clamp(22px,3.5vw,34px);
  box-shadow:var(--lg-shadow);
  border-top:4px solid var(--lg-gold)}
.lg-back{display:inline-flex;align-items:center;gap:8px;font-size:.9375rem;font-weight:600;
  color:var(--lg-head);text-decoration:none}
.lg-back svg{width:18px;height:18px}
.lg-back:hover{text-decoration:underline}
.lg-head{text-align:center;margin-top:10px}
.lg-seal{width:120px;height:120px;object-fit:contain;display:block;margin:0 auto 12px;border-radius:999px;
  box-shadow:0 0 0 3px var(--lg-ring),0 0 0 5px rgba(212,150,10,.55),0 14px 30px -12px rgba(18,41,74,.5)}
.lg-head h1{font-family:var(--font-display);font-weight:500;letter-spacing:-.025em;line-height:1;
  font-size:clamp(2rem,1.6rem+1.4vw,2.9rem);color:var(--lg-head);margin:0}
.lg-head p{margin:10px 0 0;font-size:.9375rem;font-weight:500;color:var(--lg-ink-2)}
.lg-org{display:block;margin:16px auto 0;padding-top:12px;font-size:.6875rem;font-weight:600;
  letter-spacing:.01em;color:var(--lg-ink-3);position:relative}
.lg-org::before{content:"";position:absolute;top:0;left:50%;width:56px;height:2px;
  transform:translateX(-50%);background:var(--lg-gold)}
.lg-card form{margin-top:22px}
.lg-card .alert{margin-bottom:14px}
.lg-field{margin-bottom:16px}
.lg-field label{display:block;font-size:.6875rem;font-weight:600;letter-spacing:.01em;color:var(--lg-ink-2);margin-bottom:8px}
.lg-input{position:relative;display:flex;align-items:center}
.lg-input > svg{position:absolute;left:16px;width:20px;height:20px;color:var(--lg-ink-3);
  pointer-events:none;stroke-width:1.7}
.lg-input input{height:52px;padding:0 48px 0 52px;font-size:1rem;background:var(--lg-field);color:var(--lg-ink);
  border:1px solid var(--lg-line-bold);border-radius:8px;box-shadow:none}
.lg-input input:hover{border-color:var(--lg-head)}
.lg-input input:focus{border-color:var(--lg-head);box-shadow:0 0 0 3px var(--lg-focus)}
.lg-input input::placeholder{color:var(--lg-placeholder)}
.lg-eye{position:absolute;right:6px;width:40px;height:40px;display:grid;place-items:center;
  border:0;background:transparent;color:var(--lg-ink-3);cursor:pointer;border-radius:8px}
.lg-eye:hover{color:var(--lg-head);background:var(--lg-hover)}
.lg-eye svg{width:20px;height:20px;stroke-width:1.7}
.lg-eye .off{display:none;line-height:0}
.lg-eye[aria-pressed="true"] .on{display:none}
.lg-eye[aria-pressed="true"] .off{display:block}
.lg-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:4px 0 20px}
.lg-check{display:inline-flex;align-items:center;gap:10px;font-size:.9375rem;font-weight:500;
  color:var(--lg-ink-2);cursor:pointer;text-transform:none;letter-spacing:0;margin:0}
.lg-check input{appearance:none;width:22px;height:22px;margin:0;padding:0;border-radius:5px;
  border:1.5px solid var(--lg-line-bold);background:var(--lg-field);display:grid;place-items:center;cursor:pointer;
  transition:background .15s,border-color .15s}
.lg-check input::after{content:"";width:11px;height:6px;border-left:2.5px solid #fff;
  border-bottom:2.5px solid #fff;transform:translateY(-1px) rotate(-45deg);opacity:0}
.lg-check input:checked{background:var(--lg-btn);border-color:var(--lg-btn)}
.lg-check input:checked::after{opacity:1}
.lg-check input:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(18,41,74,.2)}
.lg-forgot{font-size:.9375rem;font-weight:600;color:var(--lg-link);text-decoration:underline;
  text-underline-offset:3px}
.lg-help{display:none;margin:-8px 0 18px;padding:12px 14px;border-radius:8px;font-size:.875rem;
  line-height:1.5;color:var(--lg-ink-2);background:rgba(212,150,10,.10);
  border:1px solid rgba(212,150,10,.35)}
.lg-help:target{display:block}
.lg-help b{color:var(--lg-ink)}
.lg-submit{width:100%;height:56px;display:inline-flex;align-items:center;justify-content:center;gap:14px;
  border:0;border-radius:8px;background:var(--lg-btn);color:#fff;font-family:var(--font-body);
  font-size:1.25rem;font-weight:600;cursor:pointer;
  box-shadow:0 0 0 2px var(--lg-gold),0 14px 28px -14px rgba(18,41,74,.7);
  transition:filter .18s,transform .18s,box-shadow .18s}
.lg-submit svg{width:22px;height:22px;stroke-width:2}
.lg-submit:hover{filter:brightness(1.12);transform:translateY(-1px)}
.lg-submit:focus-visible{outline:none;box-shadow:0 0 0 2px var(--lg-ring),0 0 0 5px var(--lg-btn)}
.lg-secure{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--lg-line);font-size:.875rem;font-weight:500;
  color:var(--lg-ink-2)}
.lg-secure svg{width:18px;height:18px;color:var(--lg-green);stroke-width:2}
.lg-noacct{display:flex;align-items:center;gap:12px;margin-top:16px;padding:14px 16px;border-radius:8px;
  background:var(--lg-noacct);color:var(--lg-ink-2);font-size:.9375rem;font-weight:500;line-height:1.4}
.lg-noacct svg{width:22px;height:22px;flex:none;color:var(--lg-green);stroke-width:1.8}
.lg-card .demo{margin-top:16px}

/* -------------------------------- phones --------------------------------- */
@media(max-width:999px){
  .lg-bg{object-position:38% 0;height:min(62vh,540px)}
  .lgn::before{background:var(--lg-veil-sm)}
  .lg-intro{max-width:none;gap:0}
  .lg-gov img{width:48px;height:48px}
  .lg-h1{margin-top:22px;font-size:clamp(2rem,1.3rem+3.6vw,3rem)}
  .lg-lead{font-size:.9375rem}
  .lg-feats{display:none}
  .lg-in{padding-top:20px;padding-bottom:28px}
}
@media(max-width:520px){
  .lg-card{padding:20px 18px;border-radius:10px}
  .lg-seal{width:96px;height:96px}
  .lg-in{padding-left:14px;padding-right:14px}
}
@media(min-width:1000px) and (max-height:880px){.lg-seal{width:96px;height:96px}
  .lg-card{padding-top:20px;padding-bottom:20px}.lg-head{margin-top:6px}.lg-card form{margin-top:16px}}
@media(prefers-reduced-motion:reduce){.lg-submit,.lg-submit:hover{transform:none}}

/* ------------------------------ theme toggle ------------------------------ */
/* The app's own sun/moon button (shell.js wires #themeToggle), pinned to the
   top corner so it never competes with the card. */
.lg-theme{position:absolute;top:clamp(12px,2vw,22px);right:clamp(12px,2vw,22px);z-index:5;
  width:42px;height:42px;border-radius:999px;display:grid;place-items:center;cursor:pointer;
  background:var(--lg-card);color:var(--lg-head);border:1px solid var(--lg-line-bold);
  box-shadow:0 6px 18px -8px rgba(0,0,0,.35)}
.lg-theme:hover{border-color:var(--lg-gold)}
.lg-theme svg{width:19px;height:19px}
/* On wide screens the corner holds the faint mottos; they step down to make room. */
@media(min-width:1400px){.lg-side.top{top:calc(clamp(28px,4vw,56px) + 44px)}}

/* ---------------------------------- dark ---------------------------------- */
/* One set of values, applied when the toggle chose dark, or when the device is
   dark and nobody chose. The photograph stays; a deep veil carries the text. */
:root[data-theme="dark"] .lgn{color-scheme:dark;
  --lg-ink:#F2EFE8;--lg-ink-2:#C8C2B5;--lg-ink-3:#A8A194;--lg-head:#C9D9F2;--lg-lead:#D9D3C7;
  --lg-gold:#E0A92A;--lg-gold-deep:#E0B65A;--lg-green:#4FC28B;
  --lg-line:rgba(255,255,255,.12);--lg-line-bold:rgba(255,255,255,.22);--lg-feat-line:rgba(255,255,255,.16);
  --lg-glow:rgba(0,0,0,.45);--lg-glow-2:rgba(0,0,0,.5);
  --lg-bg:#14110E;--lg-card:#1E1B17;--lg-field:#15130F;--lg-placeholder:#7E786D;
  --lg-link:#9CBBFF;--lg-noacct:#13221B;--lg-btn:#1F4A86;--lg-ring:#1E1B17;
  --lg-hover:rgba(255,255,255,.07);--lg-focus:rgba(156,187,255,.22);
  --lg-veil:linear-gradient(90deg,rgba(12,16,24,.9) 0%,rgba(12,16,24,.84) 45%,rgba(12,16,24,.72) 62%,rgba(12,16,24,.66) 100%);
  --lg-veil-sm:linear-gradient(180deg,rgba(12,16,24,.62) 0,rgba(12,16,24,.82) 260px,#14110E 500px);
  --lg-shadow:0 30px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.07)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .lgn{color-scheme:dark;
    --lg-ink:#F2EFE8;--lg-ink-2:#C8C2B5;--lg-ink-3:#A8A194;--lg-head:#C9D9F2;--lg-lead:#D9D3C7;
    --lg-gold:#E0A92A;--lg-gold-deep:#E0B65A;--lg-green:#4FC28B;
    --lg-line:rgba(255,255,255,.12);--lg-line-bold:rgba(255,255,255,.22);--lg-feat-line:rgba(255,255,255,.16);
    --lg-glow:rgba(0,0,0,.45);--lg-glow-2:rgba(0,0,0,.5);
    --lg-bg:#14110E;--lg-card:#1E1B17;--lg-field:#15130F;--lg-placeholder:#7E786D;
    --lg-link:#9CBBFF;--lg-noacct:#13221B;--lg-btn:#1F4A86;--lg-ring:#1E1B17;
    --lg-hover:rgba(255,255,255,.07);--lg-focus:rgba(156,187,255,.22);
    --lg-veil:linear-gradient(90deg,rgba(12,16,24,.9) 0%,rgba(12,16,24,.84) 45%,rgba(12,16,24,.72) 62%,rgba(12,16,24,.66) 100%);
    --lg-veil-sm:linear-gradient(180deg,rgba(12,16,24,.62) 0,rgba(12,16,24,.82) 260px,#14110E 500px);
    --lg-shadow:0 30px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.07)}
}