/* Panel sign-in pages (Views/Shared/_LayoutLogin.cshtml + Views/Account/*): the public site's look.
   Tokens, fonts, .hdr / .logo / .lang, .auth-card, .hud, .kicker, .btn, .field / .label / .input, .check, .link-arrow and the
   matrix rain all come from /site/assets/css/site.css (loaded first); this file only lays the page out and adds the few
   pieces the site has no use for (messages, the "or" divider, status icons, the Turnstile spinner). Dark only, like the site. */

/* ---------- page ---------- */
.auth-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.auth-hdr { flex: none; }
.auth-hdr .hdr-in > .lang { margin-left: 0; }
.auth-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.auth-nav a { padding: 8px 12px; font: 500 var(--fs-sm)/1.2 var(--font-mono); color: var(--fg-2); text-decoration: none; border-radius: var(--r-sm); white-space: nowrap; transition: color .15s, background-color .15s; }
.auth-nav a:hover { color: var(--green); background: var(--g-06); }
@media (max-width: 640px) {
  .auth-nav { display: none; }
  .auth-hdr .hdr-in > .lang { margin-left: auto; }
}

.auth-main { position: relative; isolation: isolate; flex: 1 0 auto; display: flex; align-items: center; justify-content: center; padding: clamp(32px, 7vh, 80px) var(--gutter) clamp(32px, 6vh, 64px); }
.auth-main > .matrix { opacity: .22; -webkit-mask-image: linear-gradient(180deg, #000, transparent 88%); mask-image: linear-gradient(180deg, #000, transparent 88%); }
.auth-wrap { width: 100%; max-width: 440px; display: grid; justify-items: center; gap: var(--sp-5); }
.auth-card .stack { --stack: 18px; }

/* ---------- card head ---------- */
.auth-head .kicker { margin: 0; }
.auth-title { margin-top: 10px; font: 800 clamp(1.45rem, 1.25rem + .9vw, 1.75rem)/1.15 var(--font-mono); letter-spacing: -.025em; color: var(--fg); }
.auth-sub { margin-top: 8px; font-size: var(--fs-sm); line-height: 1.55; color: var(--fg-2); }
.auth-center { text-align: center; }
.auth-center .auth-head .kicker { justify-content: center; }

/* status card icon: a neon square with a stroke icon (mail, check, cross, no-entry) */
.auth-icon { --c: var(--green); display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto; color: var(--c); background: color-mix(in srgb, var(--c) 8%, var(--bg-1)); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); border-radius: var(--r-sm); box-shadow: 0 0 30px -8px color-mix(in srgb, var(--c) 70%, transparent), inset 0 0 18px -10px var(--c); }
.auth-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--c) 70%, transparent)); }
.auth-icon.is-info { --c: var(--cyan); }
.auth-icon.is-err { --c: var(--red); }
.auth-email { display: inline-block; max-width: 100%; margin-top: 4px; padding: 2px 8px; font: 600 var(--fs-sm)/1.5 var(--font-mono); color: var(--cyan); background: var(--c-10); border: 1px solid rgba(46, 230, 255, .2); border-radius: var(--r-sm); overflow-wrap: anywhere; }
.auth-note { font-size: 13px; line-height: 1.6; color: var(--fg-3); }

/* ---------- messages (TempData, validation, ViewBag.Error) ---------- */
.auth-msg { --c: var(--red); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; padding: 11px 14px; font-size: var(--fs-sm); line-height: 1.5; color: var(--fg); background: color-mix(in srgb, var(--c) 7%, var(--bg-1)); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); border-left: 3px solid var(--c); border-radius: var(--r-sm); text-align: left; }
.auth-msg::before { content: "[x]"; content: "[x]" / ""; grid-row: 1 / span 20; font: 800 12px/1.6 var(--font-mono); color: var(--c); }
.auth-msg > * { grid-column: 2; margin: 0; overflow-wrap: anywhere; }
.auth-msg > * + * { margin-top: 4px; }
.auth-msg.is-ok { --c: var(--green); }
.auth-msg.is-ok::before { content: "[+]"; content: "[+]" / ""; }

/* "Resend verification email" under the "verify your email first" error */
.auth-resend { margin-top: 10px !important; }
.auth-link-btn { padding: 0; font: 600 var(--fs-sm)/1.4 var(--font-mono); color: var(--green); background: none; border: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; }
.auth-link-btn:hover { color: var(--green-2); }

/* ---------- form bits ---------- */
.auth-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 340px) { .auth-row { grid-template-columns: minmax(0, 1fr); } }
.auth-options { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.auth-forgot { font: 500 13px/1.4 var(--font-mono); text-decoration: none; }
.auth-forgot:hover { text-decoration: underline; }
.auth-card .input { font-size: 15px; }
.auth-card .input:-webkit-autofill { -webkit-text-fill-color: var(--fg); -webkit-box-shadow: 0 0 0 40px var(--bg-2) inset; caret-color: var(--fg); }
.auth-card .btn { white-space: normal; text-align: center; line-height: 1.25; padding-block: 10px; }
.auth-card .btn-lg { min-height: 52px; }
.auth-google svg { width: 18px; height: 18px; flex: none; }
.cf-turnstile { display: flex; justify-content: center; }
.cf-turnstile:empty { display: none; }

/* "or" divider: a dashed rule on each side */
.auth-or { display: flex; align-items: center; gap: 12px; font: 600 11.5px/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); text-align: center; }
.auth-or::before, .auth-or::after { content: ""; flex: 1 0 24px; height: 1px; background: repeating-linear-gradient(90deg, var(--line-3) 0 6px, transparent 6px 12px); }
.auth-or span { flex: 0 1 auto; }

/* submit button while Turnstile finishes (wwwroot/js/auth.js) */
.auth-spin { display: inline-block; width: 14px; height: 14px; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) { .auth-spin { animation: auth-spin .7s linear infinite; } }
@keyframes auth-spin { to { transform: rotate(360deg); } }

/* ---------- under the card: back to the site, the guide ---------- */
.auth-alt a { font-weight: 600; }
.auth-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin: 0; font: 600 var(--fs-sm)/1.4 var(--font-mono); }
.auth-links a { color: var(--fg-2); text-decoration: none; }
.auth-links a:hover { color: var(--green); }
.auth-back { font: 600 var(--fs-sm) var(--font-mono); text-decoration: none; letter-spacing: .02em; }
.auth-back::before { content: "←"; content: "←" / ""; display: inline-block; margin-right: .4em; transition: transform .2s var(--ease); }
.auth-back:hover::before { transform: translateX(-4px); }

/* ---------- footer ---------- */
.auth-ftr { flex: none; margin-top: 0; }
.auth-ftr .ftr-bottom { padding-block: var(--sp-5); border-top: 0; }
.auth-ftr-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.auth-ftr-links a { color: var(--fg-3); text-decoration: none; }
.auth-ftr-links a:hover { color: var(--green); }