/* ─── Auth layout (Login / Register / Forgot / Reset / Verify / AccessDenied / Privacy / Error) ────
   Parchment / sage-forest aesthetic taken from the public landing page. All token names are
   identical to the original — only the visual styling has changed. */

*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; }
/* min-height, NOT height. A page whose content runs past the fold — the 2FA setup with its three
   steps, the privacy text — would otherwise keep the body box exactly one viewport tall while the
   content spilled out of it. The split layout's columns stretch to the BODY, so the green panel
   ended dead on the fold and scrolling revealed the page behind it. */
body { min-height: 100%; }

body.auth-shell {
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg-page);
    color: var(--text);
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.55;
    position: relative;
    overflow-x: hidden;
}

/* Subtle parchment vignette so the page reads "warm" not flat. */
body.auth-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 18%, rgba(232, 213, 168, 0.40), transparent 55%),
        radial-gradient(circle at 88% 82%, rgba(170, 187, 164, 0.30), transparent 60%);
    z-index: 0;
}
body.auth-shell > * { position: relative; z-index: 1; }

/* ── Top wordmark ─────────────────────────────────────────────── */
.auth-topbar {
    padding: 22px 36px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
    font-family: 'Fraunces', 'Times New Roman', serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-size: 22px;
}

/* Height-driven so the width follows the export's own aspect; the lockup already
   reads "Bivi", so there is no separate text node beside it any more.
   See wwwroot/img/README.md for the export contract. */
.auth-brand-logo {
    display: block;
    height: 32px;
    width: auto;
    flex-shrink: 0;
}

/* Reversed treatment for the dark-green aside panel. brightness(0) flattens the
   gradient to black, invert(1) lifts it to white; the chevron knocked out of the
   B stays transparent, so it still reads as a notch. Swap this for a proper
   light export when there is one — see wwwroot/img/README.md. */
.auth-brand-logo-invert { filter: brightness(0) invert(1); opacity: .94; }

/* ── Centered card ────────────────────────────────────────────── */
.auth-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 24px 64px;
}

.auth-card {
    width: min(100%, 460px);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(140%) blur(6px);
    -webkit-backdrop-filter: saturate(140%) blur(6px);
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow:
        0 1px 2px rgba(31, 41, 28, 0.05),
        0 24px 60px -28px rgba(31, 41, 28, 0.30);
    padding: 38px 38px 32px;
}

.auth-card-wide { width: min(100%, 560px); }

.auth-heading {
    margin: 0 0 8px;
    font-family: 'Fraunces', 'Times New Roman', serif;
    font-size: 30px;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.auth-heading em {
    font-style: italic;
    color: #6f8a64;
    font-weight: 500;
}

.auth-sub {
    margin: 0 0 26px;
    color: var(--text-muted);
    font-size: 14px;
}

/* ── Inline alerts ────────────────────────────────────────────── */
.auth-alert {
    padding: 11px 14px;
    border-radius: 12px;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.5;
    border: 1px solid transparent;
}
.auth-alert-info    { background: var(--brand-50); color: var(--brand-text); border-color: var(--border-soft); }
.auth-alert-success { background: var(--ok-bg);    color: var(--ok-text);    border-color: rgba(74, 124, 69, 0.25); }
.auth-alert-warning { background: var(--warn-bg);  color: var(--warn-text);  border-color: rgba(200, 169, 106, 0.30); }
.auth-alert-danger  { background: var(--danger-bg); color: var(--danger-text); border-color: rgba(179, 65, 65, 0.25); }

/* ── Form fields ─────────────────────────────────────────────── */
.auth-field { margin-bottom: 16px; }

.auth-field label,
.auth-label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.auth-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
}

.auth-input,
input.auth-input,
.auth-input[type="text"],
.auth-input[type="email"],
.auth-input[type="password"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-soft);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.auth-input::placeholder { color: var(--text-dim); }

/* Focus lifts the field off its resting --bg-soft. It must be the THEMED panel, not a literal
   white: in dark mode the text is var(--text) (near-white), so a hardcoded #fff left everything
   you typed invisible. --bg-panel is #ffffff in light, so this is unchanged there. */
.auth-input:focus {
    outline: none;
    border-color: var(--brand);
    background: var(--bg-panel);
    box-shadow: 0 0 0 3px var(--brand-ring);
}

.auth-input.is-invalid { border-color: var(--danger); }
.auth-input.is-invalid:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(179, 65, 65, 0.18);
}

.auth-error {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--danger-text);
}

.auth-hint {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

/* ── Password visibility toggle ──────────────────────────────── */
.auth-password {
    position: relative;
}
.auth-password .auth-input {
    padding-right: 64px;
}
.auth-password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.auth-password-toggle:hover { background: var(--bg-muted); color: var(--text); }

/* Inline row used by Login to put "Remember me" and "Forgot password?" on
   the same horizontal line, matching the reference. */
.auth-row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
}
.auth-row-between .auth-check { margin-bottom: 0; }

/* ── Checkbox ────────────────────────────────────────────────── */
.auth-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    color: var(--text);
    font-size: 13px;
}
.auth-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--brand);
    margin: 0;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 18px;
    border-radius: 999px;
    border: 1px solid transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out), transform var(--dur-instant) var(--ease-out);
}
.auth-btn:active { transform: translateY(1px); }

.auth-btn-primary {
    background: var(--brand);
    color: #f6f1e3;
    border-color: var(--brand);
    box-shadow:
        0 6px 14px -6px rgba(46, 63, 44, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.auth-btn-primary:hover  {
    background: var(--brand-hover);
    border-color: var(--brand-hover);
    color: #f6f1e3;
    box-shadow:
        0 10px 22px -8px rgba(46, 63, 44, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.auth-btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-ring); }

.auth-btn-secondary {
    background: var(--bg-panel);
    color: var(--text);
    border-color: var(--border);
}
.auth-btn-secondary:hover  {
    background: var(--bg-panel);
    border-color: var(--text-muted);
    color: var(--text);
}
.auth-btn-secondary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-ring); }

.auth-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}
.auth-btn-row .auth-btn { width: auto; flex: 1 1 0; min-width: 120px; }

/* ── Federated sign-in ───────────────────────────────────────── */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    color: var(--text-muted);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
/* Rules that grow to fill whatever the label doesn't, so the word stays centred at any width. */
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--border);
}

.auth-external-form { margin: 0; }

/* Google's brand guidance wants its logo on a neutral surface, so this stays a secondary-weight button
   rather than picking up the brand fill. */
.auth-btn-google {
    background: var(--bg-panel);
    color: var(--text);
    border-color: var(--border);
}
.auth-btn-google:hover {
    background: var(--bg-panel);
    border-color: var(--text-muted);
    color: var(--text);
}
.auth-btn-google:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-ring); }
.auth-btn-google svg { flex: 0 0 auto; }

/* OAuth divider line (visual "or") */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 14px;
    color: var(--text-dim);
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-soft);
}

/* ── Links ───────────────────────────────────────────────────── */
.auth-link {
    color: var(--brand);
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    transition: color 0.12s ease;
}
.auth-link:hover { color: var(--brand-hover); text-decoration: underline; }

.auth-footer {
    margin: 22px 0 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* ── Validation summary list ────────────────────────────────── */
.auth-validation-summary { margin: 0 0 14px; }
.auth-validation-summary ul {
    margin: 0;
    padding: 12px 14px 12px 30px;
    background: var(--danger-bg);
    color: var(--danger-text);
    border: 1px solid rgba(179, 65, 65, 0.28);
    border-radius: 12px;
    font-size: 13px;
}
.auth-validation-summary ul:empty { display: none; }
.auth-validation-summary.validation-summary-valid { display: none; }

/* ── Footer (language switcher anchor) ──────────────────────── */
.auth-footer-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding: 12px 36px 22px;
    color: var(--text-muted);
    font-size: 12px;
}

/* ── Static page (Privacy / Error / AccessDenied) ───────────── */
.auth-static-body {
    color: var(--text);
    font-size: 14px;
    line-height: 1.6;
}
.auth-static-body p { margin: 0 0 12px; }

/* ── Legal / policy documents (Privacy, Terms) ── */
.policy-meta { color: var(--text-muted); font-size: 12px; margin: 0 0 18px; }
/* Shown above a translated legal document: the English text is the one that governs. */
.policy-translation-note {
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-muted);
    background: var(--elev-1, rgba(0, 0, 0, .04));
    border-left: 3px solid var(--border, rgba(0, 0, 0, .12));
    border-radius: 0 8px 8px 0;
    padding: 9px 12px;
    margin: 0 0 16px;
}
.policy-translation-note a { color: inherit; text-decoration: underline; }
.policy-doc { max-height: 62vh; overflow-y: auto; padding-right: 8px; }
.policy-doc h2 {
    font-family: 'Fraunces', 'Times New Roman', serif;
    font-size: 17px;
    margin: 20px 0 8px;
    color: var(--text);
}
.policy-doc h3 {
    font-family: 'Fraunces', 'Times New Roman', serif;
    font-size: 15px;
    margin: 14px 0 6px;
    color: var(--text);
}
.policy-doc ul { margin: 0 0 12px; padding-left: 20px; }
.policy-doc li { margin: 0 0 6px; }
.policy-doc h2:first-child { margin-top: 4px; }
/* Scope URLs in the Google section — keep long tokens from overflowing the card. */
.policy-doc code {
    font-size: 12px;
    word-break: break-all;
}

/* ── Utilities (this layout doesn't load Bootstrap) ────────── */
.d-none { display: none !important; }

/* ════════════════════════════════════════════════════════════════
   Split layout — two columns: form (left) + decorative aside (right).
   Opt-in via .auth-main-split on the <main> (set per page through
   ViewData["AuthMainClass"]). When omitted the card stays centered.
   ════════════════════════════════════════════════════════════════ */

/* Topbar is removed on split pages — brand moves into the form column.
   This lets the form fill the column from top to bottom like the mockup. */
.auth-shell-split { display: flex; flex-direction: row; min-height: 100dvh; }
.auth-shell-split > .auth-main { flex: 1; }
.auth-shell-split > .auth-footer-bar {
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 12px 28px 18px;
    pointer-events: none;
}
.auth-shell-split > .auth-footer-bar > * { pointer-events: auto; }

/* Legal link sitting beside the language switcher in the footer bar. Quiet by default,
   underlined on hover so it reads as a link without competing with the page's CTA. */
.auth-footer-link {
    color: inherit;
    text-decoration: none;
    margin-right: auto;
}
.auth-footer-link:hover { text-decoration: underline; }
/* The split shell pins the bar over the hero art, where `margin-right:auto` would push the
   link off to the far edge; keep the pair together instead. */
.auth-shell-split .auth-footer-link { margin-right: 0; }

.auth-main.auth-main-split {
    align-items: stretch;
    padding: 0;
    gap: 0;
    flex-direction: row;
    min-height: 100dvh;
}

.auth-main-split .auth-form-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 36px clamp(36px, 8vw, 96px) 80px;
    position: relative;
}

/* Top row inside the form column — brand on the left, optional link on the right. */
.auth-form-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: clamp(56px, 9vh, 96px);
}
.auth-form-topright {
    color: var(--text-muted);
    font-size: 13.5px;
}
.auth-form-topright a {
    color: var(--brand);
    font-weight: 500;
    text-decoration: none;
    margin-left: 4px;
}
.auth-form-topright a:hover { text-decoration: underline; }

/* Brand pinned to the top of the form column (top-left). */
.auth-brand-inline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Fraunces', 'Times New Roman', serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
    text-decoration: none;
    margin-bottom: 0;
}

/* In split mode the form column is flat — no card chrome at all. */
.auth-main-split .auth-card {
    width: min(100%, 420px);
    max-width: 420px;
    background: transparent;
    border: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    padding: 0;
    margin: 0 auto;
}

/* Tighter heading on the split layout — sub right under it. */
.auth-main-split .auth-heading {
    font-size: clamp(34px, 4vw, 44px);
    margin-bottom: 6px;
}
.auth-main-split .auth-sub { margin-bottom: 28px; }

/* Full-bleed primary button on the split layout. */
.auth-main-split .auth-btn-primary { padding: 14px 20px; font-size: 15px; }

/* Primary button with a small arrow icon (Register). */
.auth-btn-arrow svg { transition: transform var(--spring-snap-ms) var(--spring-snap); }
.auth-btn-arrow:hover svg { transform: translateX(3px); }

/* Trust line shown under the Register button. */
.auth-trust {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    color: var(--text-muted);
    font-size: 12.5px;
}
.auth-trust svg { color: #6f8a64; flex-shrink: 0; }

/* ── Right column: deep forest gradient, frosted device on top ──── */
.auth-aside {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 56px clamp(40px, 6vw, 80px);
    background:
        radial-gradient(circle at 22% 18%, rgba(255, 245, 214, 0.22), transparent 50%),
        radial-gradient(circle at 78% 82%, rgba(170, 187, 164, 0.30), transparent 55%),
        linear-gradient(160deg, #3b5235 0%, #2e3f2c 45%, #243223 100%);
    color: #f6f1e3;
    position: relative;
    overflow: hidden;
}

/* Particle / sparkle layer — small bright dots scattered across the panel. */
.auth-aside::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 12% 22%, rgba(255, 240, 200, 0.85) 0, transparent 1.4px),
        radial-gradient(circle at 18% 70%, rgba(255, 255, 255, 0.55) 0, transparent 1.2px),
        radial-gradient(circle at 32% 14%, rgba(255, 240, 200, 0.50) 0, transparent 1px),
        radial-gradient(circle at 40% 88%, rgba(255, 255, 255, 0.60) 0, transparent 1.2px),
        radial-gradient(circle at 58% 8%,  rgba(255, 240, 200, 0.70) 0, transparent 1.4px),
        radial-gradient(circle at 65% 52%, rgba(255, 240, 200, 0.55) 0, transparent 1px),
        radial-gradient(circle at 78% 26%, rgba(255, 240, 200, 0.65) 0, transparent 1.3px),
        radial-gradient(circle at 84% 78%, rgba(255, 255, 255, 0.55) 0, transparent 1.1px),
        radial-gradient(circle at 90% 14%, rgba(255, 240, 200, 0.55) 0, transparent 1px);
    pointer-events: none;
}

/* A faint warm glow behind the device to lift it off the gradient. */
.auth-aside::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 58%;
    width: 80%;
    height: 60%;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(231, 212, 166, 0.20), transparent 65%);
    pointer-events: none;
}

.auth-aside-quote {
    font-family: 'Fraunces', 'Times New Roman', serif;
    font-size: clamp(20px, 1.9vw, 26px);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.01em;
    margin: 0 0 12px;
    max-width: 420px;
    text-align: center;
    position: relative;
    z-index: 1;
}
.auth-aside-quote em { font-style: italic; color: #e7d4a6; font-weight: 500; }

.auth-aside-attr {
    font-size: 13px;
    color: rgba(246, 241, 227, 0.72);
    max-width: 420px;
    text-align: center;
    margin: 0 0 36px;
    position: relative;
    z-index: 1;
}

/* Frosted "tablet" device frame holding the inbox preview. */
.auth-aside-visual {
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, #ffffff 0%, #fbf8f1 100%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 18px;
    box-shadow:
        0 30px 80px -20px rgba(0, 0, 0, 0.55),
        0 8px 16px -8px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    padding: 10px 10px 12px;
    color: var(--text);
    width: min(100%, 380px);
}

/* Faux device titlebar with traffic-light dots. */
.auth-aside-visual::before {
    content: "";
    display: block;
    height: 22px;
    margin: -10px -10px 8px;
    background:
        radial-gradient(circle at 14px 11px, #e8a09a 0 4px, transparent 4.5px),
        radial-gradient(circle at 30px 11px, #e7d4a6 0 4px, transparent 4.5px),
        radial-gradient(circle at 46px 11px, #aabba4 0 4px, transparent 4.5px),
        linear-gradient(180deg, #f1ece0, #ebe6d8);
    border-bottom: 1px solid var(--border-soft);
    border-radius: 17px 17px 0 0;
}

.auth-aside-visual-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 12.5px;
}
.auth-aside-visual-row:last-child { border-bottom: none; }
.auth-aside-visual-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}
.auth-aside-visual-row span:nth-child(2) {
    font-weight: 600;
    flex: 1;
    color: var(--text);
}
.auth-aside-visual-row span:nth-child(3) {
    color: var(--text-muted);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════════
   Verify-email card (Sign up 6 reference) — centered card with
   sparkle envelope icon, inset "didn't get it" panel.
   ════════════════════════════════════════════════════════════════ */
.verify-card {
    width: min(100%, 480px);
    margin: auto;
    text-align: center;
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 22px;
    box-shadow:
        0 1px 2px rgba(31, 41, 28, 0.04),
        0 30px 60px -28px rgba(31, 41, 28, 0.20);
    padding: 56px 44px 36px;
}

.verify-sparkle-icon {
    position: relative;
    width: 80px;
    margin: 0 auto 22px;
}
.verify-icon-disc {
    width: 72px;
    height: 72px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--bg-soft);
    border: 1px solid var(--border-soft);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 -10px 18px -10px rgba(46, 63, 44, 0.25);
}
.verify-spark {
    position: absolute;
    color: #c8a96a;
    font-size: 14px;
    line-height: 1;
    pointer-events: none;
}
.verify-spark-tl { top: -6px; left: -10px; font-size: 16px; }
.verify-spark-tr { top: -8px; right: -12px; font-size: 12px; }
.verify-spark-bl { bottom: -2px; left: -4px; font-size: 18px; color: var(--text-dim); }
.verify-spark-br { bottom: -8px; right: -6px; font-size: 14px; }

.verify-heading {
    font-family: 'Fraunces', 'Times New Roman', serif;
    font-size: clamp(28px, 3vw, 34px);
    font-weight: 500;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
    color: var(--text);
    line-height: 1.15;
}

.verify-sub {
    margin: 0 0 22px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
}
.verify-sub strong {
    display: block;
    margin-top: 4px;
    color: var(--text);
    font-weight: 600;
    word-break: break-all;
}

.verify-inset {
    background: var(--bg-soft);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 16px 18px;
    margin: 0 auto 18px;
    text-align: left;
}
.verify-inset-line {
    margin: 0 0 12px;
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.5;
}
.verify-inset-field { margin-bottom: 12px; }
.verify-inset-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}
.verify-resend-link,
.verify-change-link {
    background: none;
    border: none;
    color: var(--brand);
    font-weight: 500;
    font-size: 13.5px;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
    text-align: left;
    font-family: inherit;
}
.verify-resend-link:hover,
.verify-change-link:hover { text-decoration: underline; color: var(--brand-hover); }

.verify-footer {
    margin: 0;
    color: var(--text-dim);
    font-size: 12px;
}

/* Split-reverse: brand panel on the LEFT, content on the right. */
.auth-main.auth-main-split.auth-main-split-reverse { flex-direction: row-reverse; }
.auth-main-split-reverse .auth-form-col { justify-content: flex-start; padding: 36px 36px 64px; }
/* The wordmark belongs at the top of the column, level with the one on the brand panel — both now
   36px down. Centring the column carried it down with the card, so the two logos never lined up.
   The card centres itself in what is left instead, and when the content outgrows the column the
   auto margins collapse to nothing rather than overlapping the wordmark. */
.auth-main-split-reverse .auth-card { margin-block: auto; }

/* Minimal brand-only aside used on verify pages. */
.auth-aside-brand {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #f6f1e3;
    text-decoration: none;
    align-self: flex-start;
    position: absolute;
    top: 36px;
    left: 36px;
}
.auth-main-split-reverse .auth-aside {
    align-items: center;
    justify-content: center;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 960px) {
    .auth-shell-split { flex-direction: column; }
    .auth-main.auth-main-split { flex-direction: column; min-height: 0; }
    .auth-aside { padding: 36px 24px 48px; min-height: 240px; }

    /* The reverse variant sets flex-direction on three classes, which outweighs the plain
       .auth-main-split rule above — so without this it kept its two side-by-side columns on a
       phone and squeezed the form into half the screen. column-reverse keeps the brand panel
       on top, where it reads as a header rather than a slab of green under the form. */
    .auth-main.auth-main-split.auth-main-split-reverse { flex-direction: column-reverse; }

    /* That aside carries only the wordmark; 240px of green for a logo is a lot of a phone screen. */
    .auth-main-split-reverse .auth-aside { min-height: 104px; padding: 20px 22px; }
    .auth-main-split-reverse .auth-aside-brand { position: static; align-self: center; }

    /* With the band above it, the wordmark the form column repeats would sit twenty pixels under
       the identical one. These pages put nothing else in that row (only Register does, and it is
       not a reverse split), so the row goes rather than the brand. */
    .auth-main-split-reverse .auth-form-topbar { display: none; }
    .auth-main-split .auth-form-col { padding: 28px 22px 56px; }
    .auth-brand-inline { margin-bottom: 32px; }
    .auth-shell-split > .auth-footer-bar { position: static; padding: 12px 22px 18px; }
}

@media (max-width: 480px) {
    .auth-card { padding: 26px 22px 22px; border-radius: 18px; }
    .auth-topbar { padding: 18px 20px; }
    .auth-footer-bar { padding: 10px 20px 18px; }
    .auth-heading { font-size: 26px; }
    .auth-main-split .auth-heading { font-size: 28px; }
}

.auth-consent { font-size: 12px; color: var(--text-muted); text-align: center; margin: 14px 0 0; line-height: 1.5; }
.auth-consent a { color: var(--brand-text); text-decoration: underline; }

/* ─── Signup form: the wider layout the company fields need ──────────────── */

/* Two columns where there is room, one where there is not. The pairing carries meaning —
   you and your company, mail and phone, what you do and where you are — so a stacked
   phone layout keeps the same order rather than reflowing into something arbitrary. */
.auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}
@media (max-width: 640px) {
    .auth-grid { grid-template-columns: 1fr; }
}

/* The password rule belongs to both password fields, so it sits under the pair rather than
   under one of them. */
.auth-hint-span { margin: -6px 0 16px; }

/* "Optional" said once, quietly, beside the label. Marking the required fields instead would
   put an asterisk on most of the form, which tells nobody anything. */
.auth-optional {
    font-weight: 400;
    font-size: 11.5px;
    color: var(--text-dim);
    text-transform: none;
    letter-spacing: 0;
}

.auth-select {
    appearance: none;
    cursor: pointer;
    /* Room for the chevron, which is drawn rather than left to the platform so the control
       matches the inputs beside it in both themes. */
    padding-inline-end: 34px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa39a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
[dir="rtl"] .auth-select { background-position: left 12px center; }

/* The promo code, folded away. Most people do not have one, and an empty box they have to
   skip past reads as something they are missing out on. */
.auth-promo { margin-bottom: 16px; }
.auth-promo > summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-text);
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
}
.auth-promo > summary::-webkit-details-marker { display: none; }
.auth-promo > summary::before {
    content: "+";
    font-weight: 700;
    line-height: 1;
}
.auth-promo[open] > summary::before { content: "−"; }
.auth-promo > summary:hover { filter: brightness(1.15); }
.auth-promo .auth-field { margin: 10px 0 0; }

/* The two consents, boxed together so they read as one decision made twice rather than as
   fine print at the bottom of the page. */
.auth-consent-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    margin-bottom: 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-soft);
}
.auth-consent-box .auth-check { margin-bottom: 0; align-items: flex-start; }
.auth-consent-box .auth-check span { font-size: 13px; line-height: 1.5; }
.auth-consent-box .auth-error { margin-top: -4px; }

/* For a label that a screen reader needs and the eye does not. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}