/* Sign-in pages (body.auth): split screen with a brand panel and a card. Tokens come from app.css, so light and dark both work. */
.auth-shell { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:100vh }

/* Brand panel: navy in both themes */
.auth-hero { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; gap:32px; padding:48px 56px; color:#fff;
    background:radial-gradient(1200px 600px at -10% 110%, rgba(29,108,242,.55), transparent 60%), radial-gradient(700px 500px at 110% -10%, rgba(56,189,248,.25), transparent 60%), linear-gradient(160deg, var(--navy-2), var(--navy)) }
.auth-hero::after { content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size:22px 22px; -webkit-mask-image:linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent); mask-image:linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent); pointer-events:none }
.auth-hero > * { position:relative; z-index:1 }
.auth-hero .brand-logo { align-self:flex-start; height:40px }
.auth-hero h2 { margin:0 0 16px; color:#fff; font-size:clamp(28px, 3vw, 40px); line-height:1.15; font-weight:700; letter-spacing:-.02em; max-width:15ch }
.auth-hero p { margin:0; max-width:42ch; font-size:16px; line-height:1.6; color:rgba(255,255,255,.74) }
.auth-hero small { font-size:13px; color:rgba(255,255,255,.55) }

/* Form side */
.auth-main { display:flex; align-items:center; justify-content:center; padding:48px 24px }
.auth-card { width:100%; max-width:440px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:40px 36px 32px; box-shadow:var(--shadow) }
.auth-mobile-logo { display:none; margin-bottom:28px }
.auth-mobile-logo .brand-logo { height:36px; padding:0; background:none; border-radius:0 }
.auth-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; margin-bottom:16px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:12px; font-weight:600; letter-spacing:.02em }
.auth-badge svg { width:14px; height:14px }
.auth-icon { display:grid; place-items:center; width:48px; height:48px; margin-bottom:18px; border-radius:14px; background:var(--accent-soft); color:var(--accent) }
.auth-icon svg { width:24px; height:24px }
.auth-card h1 { margin:0 0 8px; font-size:26px; font-weight:700; letter-spacing:-.02em }
.auth-card .lead, .auth-card p.muted { margin:0 0 24px; font-size:14.5px; line-height:1.6; color:var(--muted) }
.auth-card p { line-height:1.6 }

.auth-field { margin-bottom:18px }
.auth-field-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px }
.auth label { margin:0; font-size:13.5px }
.auth-field-head a { font-size:13px; font-weight:500; text-decoration:none }
.auth-field-head a:hover { text-decoration:underline }
.auth input[type="email"], .auth input[type="password"], .auth input[type="text"] { display:block; height:46px; font-size:15px }

.auth-card button[type="submit"], .auth-card .btn { display:flex; width:100%; height:48px; margin-top:8px; font-size:15px; box-shadow:0 6px 16px -8px var(--accent) }
.auth-card button svg { width:18px; height:18px }
.auth-card .btn.secondary, .auth-card button.secondary { box-shadow:none }

.auth-alert { margin:0 0 20px; padding:12px 14px; border-radius:10px; background:var(--bad-bg); border:1px solid var(--bad); color:var(--bad); font-size:14px; line-height:1.5 }
.auth-note { margin:0 0 20px; padding:12px 14px; border-radius:10px; background:var(--good-bg); color:var(--good); font-size:14px; line-height:1.5 }
.auth-foot { margin:24px 0 0; padding-top:20px; border-top:1px solid var(--line); font-size:13px; line-height:1.5; color:var(--muted); text-align:center }
.auth-foot a { font-weight:500 }

/* Agency sign-in: the password form for administrators sits in a quiet disclosure under the emailed-link form */
.auth-alt { margin-top:20px; padding-top:16px; border-top:1px solid var(--line) }
.auth-alt summary { cursor:pointer; color:var(--accent); font-size:14px; font-weight:600; list-style:none }
.auth-alt summary::-webkit-details-marker { display:none }
.auth-alt summary::after { content:" \25BE" }
.auth-alt[open] summary { margin-bottom:14px }
.auth-alt .lead { font-size:13.5px; margin-bottom:16px }

/* Who is signing in (2FA) */
.auth-who { display:flex; align-items:center; gap:10px; margin:0 0 22px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--field); font-size:14px; color:var(--body); min-width:0 }
.auth-who .avatar { flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--navy); color:#fff; font-size:13px; font-weight:700 }
.auth-who span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.auth input.auth-code { height:60px; text-align:center; font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:28px; letter-spacing:.5em; padding-left:.5em }

@media (max-width: 900px) {
    .auth-shell { grid-template-columns:1fr }
    .auth-hero { display:none }
    .auth-mobile-logo { display:block }
    .auth-main { padding:32px 16px; align-items:flex-start }
    .auth-card { padding:32px 24px 24px; margin-top:4vh }
}