/* Authentication screens — Stitch "Light & Gold" (Authentication Portal structure).
   Used by #loginScreen (index.html), register.html, invite.html, company-signup.html, staff/login.html.
   Self-contained tokens (--au-*) mirroring the Light & Gold palette; link after theme.css. */
.au {
  --au-surface: #f8f9ff;
  --au-card: #ffffff;
  --au-gold: #f59e0b;
  --au-gold-hover: #d98a06;
  --au-on-gold: #ffffff;
  --au-gold-ink: #613b00;
  --au-gold-soft: #fff4dc;
  --au-text: #0b1c30;
  --au-muted: #5b6b7f;
  --au-line: #e2e8f2;
  --au-err-bg: #fef3f2; --au-err-line: #fecdca; --au-err: #b42318;
  --au-ok-bg: #ecfdf3; --au-ok-line: #abefc6; --au-ok: #067647;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--au-text);
}
body.au { margin: 0; min-height: 100vh; background: var(--au-surface); }
.au *, .au *::before, .au *::after { box-sizing: border-box; }
.au .material-symbols-outlined {
  font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; font-size: 20px; line-height: 1;
  display: inline-block; vertical-align: middle; font-variation-settings: "FILL" 0, "wght" 400; flex: none;
}

/* ---- split shell ---- */
.au-split { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; }
@media (min-width: 960px) { .au-split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

/* ---- brand / hero panel ---- */
.au-hero {
  display: none; position: relative; overflow: hidden; padding: 48px 56px;
  background:
    radial-gradient(620px 420px at 12% 0%, rgba(245,158,11,.22), transparent 62%),
    radial-gradient(520px 380px at 100% 100%, rgba(245,158,11,.14), transparent 60%),
    #fff7e6;
  border-right: 1px solid var(--au-line);
  flex-direction: column; justify-content: space-between; gap: 32px;
}
@media (min-width: 960px) { .au-hero { display: flex; } }
.au-logo { display: flex; align-items: center; gap: 12px; }
.au-logo .mark, .au .brand .logo, .au .brand .mark, .au #loginScreen .mark {
  width: 48px; height: 48px; border-radius: 14px; margin: 0;
  background: var(--au-gold); color: var(--au-on-gold);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 16px; letter-spacing: -.3px;
  box-shadow: 0 8px 22px rgba(245,158,11,.3);
}
.au-logo strong { font-size: 20px; font-weight: 800; color: var(--au-gold-ink); letter-spacing: -.01em; }
.au-hero-body h2 { margin: 0 0 12px; font-size: clamp(28px, 3vw, 38px); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: var(--au-text); }
.au-hero-body p { margin: 0; max-width: 440px; font-size: 15px; line-height: 1.6; color: var(--au-muted); }
.au-badges { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.au-badges li { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; color: var(--au-text); }
.au-badges .material-symbols-outlined {
  width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--au-gold); border: 1px solid #fde2a8; font-size: 20px;
}
.au-hero-foot { font-size: 12px; color: var(--au-muted); }

/* ---- form side ---- */
.au-main { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 28px 16px 40px; background: var(--au-surface); }
.au .wrap, #loginScreen.au .login-wrap { width: min(460px, 100%); max-width: 460px; margin: 0 auto; padding: 0; }
.au .brand, #loginScreen.au .login-brand { text-align: left; margin: 0 0 20px; color: var(--au-text); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.au .brand .logo, .au .brand .mark, #loginScreen.au .login-brand .mark { width: 44px; height: 44px; font-size: 15px; margin: 0; }
.au .brand h1, #loginScreen.au .login-brand h1 { margin: 0; font-size: 20px; font-weight: 800; color: var(--au-gold-ink); }
.au .brand p, #loginScreen.au .login-brand p { margin: 0; flex-basis: 100%; font-size: 13px; color: var(--au-muted); }
@media (min-width: 960px) {
  .au .brand .logo, .au .brand .mark, #loginScreen.au .login-brand .mark { display: none; }
  .au .brand h1, #loginScreen.au .login-brand h1 { display: none; }
  .au .brand, #loginScreen.au .login-brand { margin-bottom: 8px; }
  .au .brand p, #loginScreen.au .login-brand p { font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 11px; color: var(--au-gold-ink); }
}

/* ---- card ---- */
.au .card, #loginScreen.au .login-card {
  background: var(--au-card); border: 1px solid var(--au-line); border-radius: 20px;
  padding: 32px 28px; box-shadow: 0 10px 34px rgba(11,28,48,.08); width: 100%; overflow: visible;
  color: var(--au-text);
}
@media (max-width: 480px) { .au .card, #loginScreen.au .login-card { padding: 24px 18px; } }
.au h2, #loginScreen.au .login-card h2 { margin: 0 0 6px; font-size: 24px; font-weight: 800; letter-spacing: -.01em; color: var(--au-text); }
.au .sub, #loginScreen.au .login-card .sub { font-size: 13px; line-height: 1.55; color: var(--au-muted); margin: 0 0 18px; }
.au .step { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--au-gold-ink); }
.au label, #loginScreen.au .login-card label {
  display: block; margin: 14px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--au-text);
}
.au input:not([type=checkbox]):not([type=radio]), .au select, .au textarea, #loginScreen.au .login-card input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--au-line); border-radius: 12px;
  font: inherit; font-size: 15px; color: var(--au-text); background: #fff; transition: border-color .15s, box-shadow .15s;
}
.au input::placeholder { color: #94a3b8; }
.au input:focus, .au select:focus, .au textarea:focus, #loginScreen.au .login-card input:focus {
  outline: none; border-color: var(--au-gold); box-shadow: 0 0 0 3px rgba(245,158,11,.22);
}
.au input:disabled { background: #eef2f9; color: var(--au-muted); }

/* ---- buttons ---- */
.au .btn, #loginScreen.au .btn-full {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 20px; padding: 14px;
  border: none; border-radius: 12px; background: var(--au-gold); color: var(--au-on-gold);
  font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; text-decoration: none;
  box-shadow: 0 6px 16px rgba(245,158,11,.3); transition: background .15s, transform .1s;
}
.au .btn:hover, #loginScreen.au .btn-full:hover { background: var(--au-gold-hover); color: var(--au-on-gold); }
.au .btn:active, #loginScreen.au .btn-full:active { transform: scale(.99); }
.au .btn:disabled, #loginScreen.au .btn-full:disabled { opacity: .6; cursor: not-allowed; }
.au .btn:focus-visible, .au a:focus-visible, .au button:focus-visible { outline: 2px solid var(--au-gold-ink); outline-offset: 2px; }
.au .send { background: var(--au-gold-soft); color: var(--au-gold-ink); border: 1px solid #fde2a8; border-radius: 12px; font-weight: 700; cursor: pointer; padding: 0 14px; font-family: inherit; }
.au .send:hover { background: #ffe9b8; }
.au .stores a { border: 1px solid var(--au-line); border-radius: 12px; color: var(--au-text); background: #fff; }
.au .stores a.primary { background: var(--au-gold); border-color: var(--au-gold); color: var(--au-on-gold); }

/* ---- notes / banners ---- */
.au .perm-note, #loginScreen.au .perm-note, .au .note, .au .hint {
  display: block;  margin-top: 16px; padding: 12px 14px; border-radius: 12px;
  background: var(--au-surface); border: 1px solid var(--au-line); font-size: 12px; line-height: 1.5; color: var(--au-muted); text-align: left;
}
.au .perm-note strong, .au .note strong { color: var(--au-text); }
.au .hint { text-align: left; }
.au .granted-box { background: var(--au-surface); border: 1px solid var(--au-line); border-radius: 14px; }
.au .gb-lbl { color: var(--au-gold-ink); }
.au .err, #loginScreen.au #loginErr { background: var(--au-err-bg); border: 1px solid var(--au-err-line); color: var(--au-err); border-radius: 12px; }
.au .ok, .au .ok-banner { background: var(--au-ok-bg); border: 1px solid var(--au-ok-line); color: var(--au-ok); border-radius: 12px; }

#loginScreen.au .perm-note, .au .perm-note { display: flex; align-items: flex-start; gap: 10px; }
.au .perm-note .material-symbols-outlined { color: var(--au-gold); font-size: 18px; margin-top: 1px; }

/* ---- links / footer ---- */
.au .foot, #loginScreen.au .login-foot { text-align: center; margin: 16px 0 0; font-size: 13px; color: var(--au-muted); }
.au .foot a, #loginScreen.au .login-foot a { color: var(--au-gold-ink); font-weight: 700; text-decoration: none; border-bottom: 1px solid #fcd58a; }
.au .foot a:hover, #loginScreen.au .login-foot a:hover { color: var(--au-gold); border-color: var(--au-gold); text-decoration: none; }
.au .foot + .foot { margin-top: 8px; }
.au .login-foot .material-symbols-outlined { font-size: 14px; }

/* ---- #loginScreen as a full-viewport split ---- */
#loginScreen.au { position: fixed; inset: 0; z-index: 900; padding: 0; display: block; background: var(--au-surface); overflow-y: auto; }
#loginScreen.au .au-split { min-height: 100%; }
#loginScreen.au .au-main { min-height: 100vh; }