/* =============================================================================
   auth.css — two-column authentication screens (Federal Standard, neutral-forward).
   Left: a graphite brand panel with a faint photographic backdrop + gold accents.
   Right: the form on warm paper. Collapses to a single column on small screens.
   ========================================================================== */

.auth-body { margin: 0; min-height: 100dvh; background: var(--page-bg); color: var(--ink);
  font-family: var(--font-ui); -webkit-font-smoothing: antialiased; }
.auth-2col { min-height: 100dvh; display: grid; grid-template-columns: 1.05fr 1fr; }

/* ── Brand / photo panel ──────────────────────────────────────────────────── */
.auth-aside { position: relative; overflow: hidden; isolation: isolate;
  color: var(--surface-dark-fg); background: var(--gradient-ceremonial); }

/* The photo, rendered faint over the graphite ground (its own layer so only the
   image dims — never the text). Desaturated so it reads as texture, not a picture. */
.auth-aside__photo { position: absolute; inset: 0; z-index: 0;
  background-image: var(--auth-photo); background-size: cover; background-position: center;
  opacity: 0.30; filter: grayscale(0.25) contrast(1.03); mix-blend-mode: luminosity; }

/* Depth: a soft bottom vignette for legibility + a warm gold glow top-right. */
.auth-aside__scrim { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(15,18,20,0.10) 0%, transparent 30%, rgba(15,18,20,0.55) 100%); }
.auth-aside__scrim::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(760px 360px at 84% -10%, rgba(207,168,61,0.20), transparent 62%); }

.auth-aside__in { position: relative; z-index: 1; display: flex; flex-direction: column;
  justify-content: space-between; gap: var(--sp-8); padding: clamp(36px, 4vw, 70px); min-height: 100dvh; }

.auth-aside__brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
  color: #fff; font-weight: 750; font-size: 19px; letter-spacing: -.01em; }
.auth-aside__brand .seal { width: 34px; height: 34px; color: #fff; }
.auth-aside__brand small { display: block; font-weight: 500; font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gold-300); }

.auth-aside__mid { max-width: 44ch; }
.auth-aside__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-400); margin: 0 0 18px; display: inline-flex; }
.auth-aside__eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--gold-400);
  align-self: center; margin-right: 12px; opacity: .8; }
.auth-aside__title { font-family: var(--font-display); font-weight: 600; color: #fff;
  font-size: clamp(28px, 2.9vw, 42px); line-height: 1.1; margin: 0 0 20px; letter-spacing: -.02em; text-wrap: balance;
  max-width: 15ch; }
.auth-aside__sub { color: var(--surface-dark-fg); opacity: .82; font-size: 16px; line-height: 1.6; margin: 0 0 30px;
  max-width: 40ch; }

.auth-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.auth-points li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px;
  color: var(--surface-dark-fg); opacity: .92; }
.auth-points svg { flex: none; width: 20px; height: 20px; color: var(--gold-400); margin-top: 1px; }

.auth-aside__foot { display: flex; align-items: center; gap: 10px; font-size: 12.5px;
  color: var(--surface-dark-muted); border-top: 1px solid var(--surface-dark-line); padding-top: var(--sp-5); }
.auth-aside__foot svg { flex: none; width: 15px; height: 15px; color: var(--gold-400); }

/* ── Form panel ───────────────────────────────────────────────────────────── */
.auth-main { display: grid; place-items: center; padding: clamp(28px, 4vw, 56px) clamp(20px, 4vw, 40px);
  background:
    radial-gradient(900px 500px at 100% 0%, var(--stone-50), transparent 60%),
    var(--page-bg); }
.auth-form { width: min(430px, 100%); }
.auth-form__brand-m { display: none; align-items: center; gap: 11px; margin-bottom: var(--sp-7);
  color: var(--ink); font-weight: 750; font-size: 18px; text-decoration: none; }
.auth-form__brand-m .seal { width: 34px; height: 34px; color: var(--accent-strong); }

/* Page heading + subline inside a form fragment */
.auth-form h1, .auth-form h2 { font-family: var(--font-display); font-size: clamp(23px, 2.4vw, 29px);
  color: var(--ink); margin: 0 0 var(--sp-2); letter-spacing: -.015em; line-height: 1.15; }
.auth-form__lead, .auth-form h2 + p, .auth-form h1 + p { color: var(--muted); font-size: var(--text-base);
  line-height: 1.55; margin: 0 0 var(--sp-6); }
.auth-form .field { margin-bottom: var(--sp-4); }
.auth-form .btn--primary, .auth-form .btn--gold { width: 100%; margin-top: var(--sp-2); }
.auth-form__foot { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--hairline);
  text-align: center; font-size: var(--text-caption); color: var(--muted); }
.auth-form__foot a { color: var(--link); font-weight: 600; }

/* Sample-credentials helper card (used by the login pages) */
.auth-creds { margin-top: var(--sp-6); border: 1px dashed var(--stone-300); border-radius: var(--r-md);
  background: var(--stone-50); padding: var(--sp-4) var(--sp-5); font-size: var(--text-small); }
.auth-creds__t { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.auth-creds__t svg { width: 15px; height: 15px; color: var(--gold-600); }
.auth-creds code { font-family: var(--font-mono); color: var(--accent-strong); }

/* Application-received confirmation mark */
.auth-done-mark { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: var(--green-50); color: var(--green-700); border: 1px solid var(--green-200); }
.auth-done-mark svg { width: 34px; height: 34px; }

/* Password field with a reveal toggle (injected by auth.js) */
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 44px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px;
  border: 0; background: transparent; color: var(--stone-500); cursor: pointer; display: grid; place-items: center; border-radius: 8px; }
.pw-toggle:hover { color: var(--accent-strong); background: var(--stone-100); }
.pw-toggle svg { width: 18px; height: 18px; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .auth-2col { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .auth-form__brand-m { display: inline-flex; }
  /* A faint reminder of the panel photo behind the mobile form. */
  .auth-body::before { content: ""; position: fixed; inset: 0; z-index: -1;
    background-image: var(--auth-photo, none); background-size: cover; background-position: center;
    opacity: 0.05; filter: grayscale(0.4); }
}