/*
 * KAIS auth-page styles.
 *
 * Extracted from kais/templates/account/layouts/base.html in the
 * CSP inline-style cleanup so we no longer rely on a nonced inline
 * <style> block. All `.auth-*`, `.email-*`, `.password-*`,
 * `.field-*`, `.warning-callout-*`, `.confirm-phrase-*`,
 * `.auth-account-nav-*`, `.auth-btn-*`, `.auth-glow`,
 * `.auth-divider`, `.auth-card`, `.auth-message*`, and `.sr-only`
 * rules live here.
 */

/* Dark theme form styling */
.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="number"],
.auth-card input[type="tel"],
.auth-card select,
.auth-card textarea {
    background-color: rgba(255, 255, 255, 0.05);
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    padding: 0.8rem 1rem;
    width: 100%;
    font-size: 0.9375rem;
    line-height: 1.5;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    -webkit-appearance: none;
}
.auth-card input:focus,
.auth-card select:focus,
.auth-card textarea:focus {
    border-color: rgba(94, 158, 255, 0.6);
    box-shadow: 0 0 0 3px rgba(94, 158, 255, 0.15);
    background-color: rgba(255, 255, 255, 0.07);
    outline: none;
}
.auth-card input:focus-visible,
.auth-card select:focus-visible,
.auth-card textarea:focus-visible {
    border-color: rgba(155, 109, 255, 0.8);
    box-shadow: 0 0 0 3px rgba(155, 109, 255, 0.25);
}
.auth-card input::placeholder {
    color: #4a5568;
}
.auth-card input:-webkit-autofill,
.auth-card input:-webkit-autofill:hover,
.auth-card input:-webkit-autofill:focus {
    -webkit-text-fill-color: #f1f5f9;
    -webkit-box-shadow: 0 0 0px 1000px #0f1747 inset;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Crispy form label styling */
.auth-card label {
    color: #cbd5e1;
    font-size: 0.8125rem;
    font-weight: 500;
    display: block;
    margin-bottom: 0.5rem;
    letter-spacing: 0.02em;
}
.auth-card .text-muted,
.auth-card .helptext,
.auth-card .form-text {
    color: #64748b !important;
    font-size: 0.8125rem;
}
.auth-card .asteriskField {
    color: #f87171;
}
/* Crispy error styling */
.auth-card .invalid-feedback,
.auth-card .errorlist {
    color: #fca5a5;
    font-size: 0.8125rem;
}
.auth-card .errorlist {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0 0;
}
/* Auth button base */
.auth-btn-primary {
    display: block;
    width: 100%;
    color: #fff;
    font-weight: 600;
    padding: 0.8rem 1rem;
    border-radius: 0.75rem;
    border: none;
    cursor: pointer;
    font-size: 0.9375rem;
    letter-spacing: 0.02em;
    background: linear-gradient(135deg, #5e9eff 0%, #9b6dff 100%);
    box-shadow: 0 4px 14px rgba(94, 158, 255, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.auth-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(94, 158, 255, 0.4);
}
.auth-btn-primary:active {
    transform: translateY(0);
}
.auth-btn-primary:focus-visible {
    outline: 2px solid #9b6dff;
    outline-offset: 2px;
}
.auth-btn-primary:disabled {
    cursor: wait;
    opacity: 0.8;
    transform: none !important;
}
/* Divider */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #475569;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
}
/* Ambient glow behind card */
.auth-glow {
    position: fixed;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
}
/* Fade-in animation */
@keyframes authFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
.auth-card {
    animation: authFadeUp 0.5s ease-out;
    /* Indigo glass (2026-09 palette): a translucent fill so the two ambient
       glows read through the backdrop blur, plus a soft drop shadow for
       lift. NO hairline ring — the template hands this element `border-0`,
       and the inset 1px shadow that once stood in for a border read as a
       faint box around the sign-in form, so the edge is now defined by the
       fill and the blur alone. Any edge treatment here must stay a
       shadow, never a border, so the light layer can remain paint-only.
       Light overrides both declarations in section A below. */
    background: rgba(16, 24, 73, 0.62);
    box-shadow: 0 30px 70px rgba(2, 5, 30, 0.6);
    /* Corner radius lives HERE, not in the template's `rounded-2xl`: the
       vendored tailwind-main.css is pre-built with no pipeline and never
       shipped that utility, so the card rendered square in production.
       1rem is Tailwind's own value for it; the template's `overflow-hidden`
       (which the sheet DOES ship) clips the header and footer to it. */
    border-radius: 1rem;
}
/* Width caps for the two card variants. These replace `max-w-md` and
   `max-w-2xl`, two more utilities the vendored sheet never shipped — and
   because `w-full` IS shipped, the failure was silent: the card was fluid
   against a cap that did not exist and stretched edge-to-edge on desktop.
   Semantic names on purpose (never `.max-w-md` here): a reader who greps
   tailwind-main.css for that name, finds nothing and concludes the class is
   dead would be right about every other template in the repo.
   The values are Tailwind's own. The card keeps `w-full` in the template so
   it stays fluid BELOW the cap and fills a 320px phone. Geometry belongs in
   this unthemed layer — the light/auto blocks are paint-only (pinned by
   test_theme_pages_b.py::TestTheLightLayerIsPaintOnly) — and the pair is
   pinned by tests/test_static/test_auth_card_width.py. */
.auth-card--narrow {
    max-width: 28rem;   /* layouts/base.html — the entrance flow */
}
.auth-card--wide {
    max-width: 42rem;   /* layouts/manage.html — Email / 2FA / Sessions */
}
/* Staggered field entrance */
.auth-card .mb-3 {
    animation: authFadeUp 0.4s ease-out both;
}
.auth-card .mb-3:nth-child(1) { animation-delay: 0.05s; }
.auth-card .mb-3:nth-child(2) { animation-delay: 0.1s; }
.auth-card .mb-3:nth-child(3) { animation-delay: 0.15s; }
/* Message animations */
@keyframes authSlideIn {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes authSlideOut {
    to { opacity: 0; transform: translateX(12px); height: 0; margin: 0; padding: 0; overflow: hidden; }
}
.auth-message {
    animation: authSlideIn 0.3s ease-out;
    position: relative;
}
.auth-message.dismissing {
    animation: authSlideOut 0.3s ease-in forwards;
}
.auth-message-dismiss {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    transition: opacity 0.2s ease;
}
.auth-message-dismiss:hover {
    opacity: 1 !important;
}
/* Client-side validation states */
.field-error {
    display: none;
    color: #fca5a5;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}
.field-error.active {
    display: block;
    animation: authSlideIn 0.2s ease-out;
}
.field-valid input {
    border-color: rgba(34, 197, 94, 0.4) !important;
}
.field-invalid input {
    border-color: rgba(239, 68, 68, 0.4) !important;
}
/* Password strength meter */
.password-strength-container {
    margin-top: 0.5rem;
}
.password-strength-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}
.password-strength-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease, background-color 0.3s ease;
    width: 0;
}
.password-strength-fill[data-strength="1"] { width: 25%; background: #ef4444; }
.password-strength-fill[data-strength="2"] { width: 50%; background: #f97316; }
.password-strength-fill[data-strength="3"] { width: 75%; background: #eab308; }
.password-strength-fill[data-strength="4"] { width: 100%; background: #22c55e; }
.password-strength-label {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: #94a3b8;
}
/* Password requirements list */
.password-requirements {
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.password-requirements ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.password-requirements li {
    font-size: 0.75rem;
    color: #94a3b8;
    padding: 0.125rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s ease;
}
.password-requirements li::before {
    content: '\25CB';
    font-size: 0.625rem;
}
.password-requirements li.met {
    color: #4ade80;
}
.password-requirements li.met::before {
    content: '\2713';
}
/* Account settings nav — single glassmorphic dock that holds
   every pill. Hover/active states use the brand gradient so it
   reads as one cohesive control rather than scattered tags. */
.auth-account-nav {
    margin-bottom: 1.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: center;
}
.auth-account-nav-dock {
    list-style: none;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
                0 4px 24px -8px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.auth-account-nav-dock > li {
    margin: 0;
    padding: 0;
    display: inline-flex;
}
.auth-account-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: #cbd5e1;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease,
                box-shadow 0.2s ease, transform 0.15s ease;
}
.auth-account-nav-link:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.08);
}
.auth-account-nav-link:focus-visible {
    outline: 2px solid #9b6dff;
    outline-offset: 2px;
}
.auth-account-nav [aria-current="page"] {
    color: #fff;
    background: linear-gradient(135deg, #5e9eff 0%, #9b6dff 100%);
    box-shadow: 0 4px 14px -4px rgba(94, 158, 255, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.auth-account-nav [aria-current="page"]:hover {
    background: linear-gradient(135deg, #5e9eff 0%, #9b6dff 100%);
    transform: translateY(-1px);
}
/* Divider rule between regular nav items and the destructive
   Sign-Out action so it reads as a different action class. */
.auth-account-nav-divider {
    position: relative;
    padding-left: 0.5rem;
    margin-left: 0.25rem;
}
.auth-account-nav-divider::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
}
.auth-account-nav-link--danger {
    color: #f87171;
}
.auth-account-nav-link--danger:hover {
    color: #fecaca;
    background-color: rgba(239, 68, 68, 0.12);
}
/* The Sign-Out pill is a one-click POST (a GET sign-out is forced-logout
   CSRF, and allauth's GET only renders a page), so it is a <button> in a
   <form>. The form is a transparent inline-flex wrapper — the dock's flex
   row is unchanged — and the button sheds its UA chrome here, taking the
   pill paint from the shared class rules above (hover, focus-visible,
   --danger and every theme block match by class). Longhands rather than
   the `font` shorthand: this selector outranks `.auth-account-nav-link`
   and the shorthand would reset the pill's size and weight. */
.auth-account-nav-form {
    display: inline-flex;
    margin: 0;
}
button.auth-account-nav-link {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    margin: 0;
    font-family: inherit;
    line-height: inherit;
    cursor: pointer;
}
.auth-account-nav-link svg {
    opacity: 0.85;
}
@media (max-width: 540px) {
    .auth-account-nav-dock {
        border-radius: 1rem;
    }
    .auth-account-nav-link {
        padding: 0.45rem 0.85rem;
        font-size: 0.78rem;
    }
}
/* Destructive button — solid red, NOT a gradient. Reserved for
   irreversible actions like 2FA deactivation. */
.auth-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #fff;
    font-weight: 600;
    padding: 0.8rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(239, 68, 68, 0.6);
    cursor: pointer;
    font-size: 0.9375rem;
    letter-spacing: 0.02em;
    background-color: #ef4444;
    background-image: none;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25);
    transition: background-color 0.2s ease, transform 0.2s ease,
                box-shadow 0.2s ease, opacity 0.2s ease;
}
.auth-btn-danger:hover {
    background-color: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.35);
}
.auth-btn-danger:active {
    transform: translateY(0);
}
.auth-btn-danger:focus-visible {
    outline: 2px solid #9b6dff;
    outline-offset: 2px;
}
/* Pre-confirmation guarded state — clearly inert. */
.auth-btn-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none;
}
/* When the form submits we reuse the loading-state hook. */
.auth-btn-danger[aria-busy="true"]:disabled {
    cursor: wait;
    opacity: 0.8;
}
/* Translucent / outlined secondary action (Cancel etc.). */
.auth-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #cbd5e1;
    font-weight: 600;
    padding: 0.8rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background-color: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    font-size: 0.9375rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease,
                border-color 0.2s ease, transform 0.2s ease;
}
.auth-btn-secondary:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}
.auth-btn-secondary:focus-visible {
    outline: 2px solid #9b6dff;
    outline-offset: 2px;
}
/* Strong-warning callout used to describe destructive actions.
   Two-column grid (icon + body) with a clear hierarchy: a bold
   white title on top, a dimmed long-form detail below. */
.warning-callout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.875rem;
    align-items: start;
    margin: 1rem 0 1.5rem;
    padding: 1rem 1.125rem;
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-left: 4px solid #ef4444;
    border-radius: 0.75rem;
    background:
        linear-gradient(135deg,
            rgba(127, 29, 29, 0.45) 0%,
            rgba(127, 29, 29, 0.18) 100%);
    color: #fecaca;
    font-size: 0.875rem;
    line-height: 1.5;
    box-shadow: 0 4px 14px -8px rgba(239, 68, 68, 0.4);
}
.warning-callout-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
    flex-shrink: 0;
}
.warning-callout-body { min-width: 0; }
.warning-callout-title {
    margin: 0 0 0.375rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.01em;
    line-height: 1.4;
}
.warning-callout-detail {
    margin: 0;
    color: rgba(254, 202, 202, 0.78);
    font-size: 0.8125rem;
    line-height: 1.55;
}
/* Legacy <strong> support — kept for callouts that haven't been
   refactored to the title/body structure yet. */
.warning-callout strong { color: #fff; }
/* Type-to-confirm phrase widget. Live letter-by-letter feedback
   plus an inline status icon turn the destructive guard from
   a plain text input into something the user can clearly track. */
.confirm-phrase-input-wrap {
    position: relative;
}
.confirm-phrase-input-wrap > input {
    padding-right: 2.5rem !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco,
        Consolas, "Liberation Mono", "Courier New", monospace;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.confirm-phrase-status {
    position: absolute;
    top: 50%;
    right: 0.875rem;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    color: #cbd5e1;
    transition: color 0.2s ease, background-color 0.2s ease,
                transform 0.2s ease;
    pointer-events: none;
}
.confirm-phrase-status-check {
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.confirm-phrase-status[data-state="partial"] {
    color: #fbbf24;
}
.confirm-phrase-status[data-state="error"] {
    color: #fca5a5;
    background-color: rgba(239, 68, 68, 0.15);
}
.confirm-phrase-status[data-state="valid"] {
    color: #fff;
    background-color: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
}
.confirm-phrase-status[data-state="valid"] .confirm-phrase-status-check {
    opacity: 1;
    transform: scale(1);
}
.confirm-phrase-letters {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0;
    margin: 0.5rem 0 0;
}
.confirm-phrase-letters > li {
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.4rem;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco,
        Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.35);
    transition: color 0.18s ease, background-color 0.18s ease,
                border-color 0.18s ease, transform 0.18s ease;
}
.confirm-phrase-letters > li[data-state="matched"] {
    color: #fff;
    background-color: rgba(34, 197, 94, 0.22);
    border-color: rgba(34, 197, 94, 0.5);
    transform: translateY(-1px);
}
.confirm-phrase-letters > li[data-state="wrong"] {
    color: #fecaca;
    background-color: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.45);
}
/* Visually-hidden helper for screen-reader-only status text. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}
/* ---------- Email-management page (account/email.html) ---------- */
.email-page-header {
    text-align: center;
    margin-bottom: 1.75rem;
}
.email-page-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.5rem;
    letter-spacing: -0.01em;
}
.email-page-lede {
    margin: 0;
    color: #94a3b8;
    font-size: 0.875rem;
    line-height: 1.5;
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
}
.email-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
}
.email-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.4rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    font-size: 0.6875rem;
    font-weight: 600;
}
.email-list {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.email-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.875rem;
    align-items: center;
    padding: 0.875rem 1rem;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.875rem;
    transition: background-color 0.2s ease, border-color 0.2s ease,
                box-shadow 0.2s ease;
}
.email-row:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.14);
}
.email-row.is-primary {
    background: linear-gradient(135deg,
        rgba(94, 158, 255, 0.07) 0%,
        rgba(155, 109, 255, 0.05) 100%);
    border-color: rgba(94, 158, 255, 0.32);
    box-shadow: 0 4px 16px -8px rgba(94, 158, 255, 0.4);
}
.email-row.is-unverified {
    border-color: rgba(245, 158, 11, 0.28);
}
.email-row-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    background: rgba(255, 255, 255, 0.06);
    color: #94a3b8;
    flex-shrink: 0;
}
.email-row.is-primary .email-row-marker {
    background: rgba(94, 158, 255, 0.18);
    color: #93c5fd;
}
.email-row .email-row-marker.has-verified-tone,
.email-row:not(.is-primary):not(.is-unverified) .email-row-marker {
    background: rgba(34, 197, 94, 0.14);
    color: #86efac;
}
.email-row.is-unverified .email-row-marker {
    background: rgba(245, 158, 11, 0.16);
    color: #fbbf24;
}
.email-row-body { min-width: 0; }
.email-row-address {
    color: #f1f5f9;
    font-size: 0.9375rem;
    font-weight: 500;
    word-break: break-all;
    line-height: 1.35;
}
.email-row-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.375rem;
}
.email-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.55rem 0.15rem 0.45rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.02em;
}
.email-badge-dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background: currentColor;
    box-shadow: 0 0 0 3px currentColor;
    opacity: 0.95;
}
.email-badge--primary {
    color: #93c5fd;
    background: rgba(94, 158, 255, 0.12);
}
.email-badge--verified {
    color: #86efac;
    background: rgba(34, 197, 94, 0.12);
}
.email-badge--unverified {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.14);
}
.email-row-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
}
.email-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    background: transparent;
    color: #cbd5e1;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.18s ease, background-color 0.18s ease,
                border-color 0.18s ease, transform 0.15s ease;
}
.email-action-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}
.email-action-btn:focus-visible {
    outline: 2px solid #9b6dff;
    outline-offset: 2px;
}
.email-action-btn[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
}
.email-action-btn--primary { color: #93c5fd; }
.email-action-btn--primary:hover {
    color: #fff;
    background: rgba(94, 158, 255, 0.18);
    border-color: rgba(94, 158, 255, 0.4);
}
.email-action-btn--verify { color: #fbbf24; }
.email-action-btn--verify:hover {
    color: #fff;
    background: rgba(245, 158, 11, 0.16);
    border-color: rgba(245, 158, 11, 0.45);
}
.email-action-btn--remove { color: #fca5a5; }
.email-action-btn--remove:hover:not([disabled]) {
    color: #fff;
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.45);
}
.email-action-btn svg { flex-shrink: 0; }
@media (max-width: 640px) {
    .email-row {
        grid-template-columns: auto 1fr;
        gap: 0.75rem;
    }
    .email-row-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
        padding-top: 0.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }
    .email-action-btn span {
        display: none;
    }
    .email-action-btn {
        padding: 0.5rem;
    }
}
/* Add-email section */
.email-add-section {
    padding: 1.25rem;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 0.875rem;
    background: rgba(255, 255, 255, 0.02);
}
.email-add-input-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    align-items: stretch;
}
.email-add-input-wrap {
    position: relative;
    flex: 1 1 16rem;
    min-width: 0;
}
.email-add-input-icon {
    position: absolute;
    top: 50%;
    left: 0.875rem;
    transform: translateY(-50%);
    color: #64748b;
    pointer-events: none;
}
.email-add-input-wrap > input[type="email"] {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0.75rem !important;
    color: #f1f5f9 !important;
    font-size: 0.875rem;
    transition: border-color 0.2s ease, background-color 0.2s ease,
                box-shadow 0.2s ease;
}
.email-add-input-wrap > input[type="email"]:focus {
    border-color: rgba(94, 158, 255, 0.6) !important;
    background-color: rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 0 0 3px rgba(94, 158, 255, 0.15);
    outline: none;
}
.email-add-input-wrap > input[type="email"]:focus + .email-add-input-icon,
.email-add-input-wrap:focus-within .email-add-input-icon {
    color: #93c5fd;
}
.email-add-submit {
    width: auto !important;
    min-width: 9rem;
    flex-shrink: 0;
}
.email-add-hint {
    margin: 0.625rem 0 0;
    color: #64748b;
    font-size: 0.75rem;
}
@media (max-width: 540px) {
    .email-add-submit { width: 100% !important; }
}

/* ---------- Connections page (socialaccount/connections.html) ---------- */
.connection-row-logo {
    background: rgba(255, 255, 255, 0.07);
    color: #e2e8f0;
}
.connection-row--google .connection-row-logo {
    background: #fff;
}
.connection-row--github .connection-row-logo {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}
.connection-meta {
    display: inline-flex;
    align-items: center;
    color: #64748b;
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 0.1rem 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.connection-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.75rem 1rem;
    margin-bottom: 2rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 0.875rem;
}
.connection-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background: rgba(94, 158, 255, 0.1);
    color: #93c5fd;
    margin-bottom: 0.875rem;
}
.connection-empty-title {
    margin: 0 0 0.25rem;
    color: #e2e8f0;
    font-size: 0.875rem;
    font-weight: 600;
}
.connection-empty-detail {
    margin: 0;
    color: #94a3b8;
    font-size: 0.8125rem;
}
.connection-add-section {
    border-style: solid;
    background: rgba(255, 255, 255, 0.025);
}
.provider-grid {
    list-style: none;
    margin: 0 0 0.875rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0.625rem;
}
.provider-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.875rem;
    color: #e2e8f0;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease,
                transform 0.18s ease, box-shadow 0.2s ease;
}
.provider-card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.4);
}
.provider-card:focus-visible {
    outline: 2px solid #9b6dff;
    outline-offset: 2px;
}
.provider-card-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}
.provider-card--google:hover {
    border-color: rgba(66, 133, 244, 0.45);
    box-shadow: 0 4px 16px -6px rgba(66, 133, 244, 0.4);
}
.provider-card--google .provider-card-logo {
    background: #fff;
}
.provider-card--github:hover {
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 4px 16px -6px rgba(0, 0, 0, 0.6);
}
.provider-card--github .provider-card-logo {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.provider-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}
.provider-card-name {
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
}
.provider-card-action {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #93c5fd;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    transition: gap 0.2s ease, color 0.2s ease;
}
.provider-card:hover .provider-card-action {
    color: #fff;
    gap: 0.5rem;
}

/* ---------- MFA index page (mfa/index.html) ---------- */
.mfa-status {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.875rem;
    align-items: center;
    padding: 1rem 1.125rem;
    border-radius: 0.875rem;
    margin: 0 0 1.75rem;
    border: 1px solid transparent;
}
.mfa-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    flex-shrink: 0;
}
.mfa-status-title {
    margin: 0 0 0.125rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fff;
}
.mfa-status-detail {
    margin: 0;
    font-size: 0.8125rem;
}
.mfa-status--enabled {
    background: linear-gradient(135deg,
        rgba(34, 197, 94, 0.12) 0%,
        rgba(34, 197, 94, 0.04) 100%);
    border-color: rgba(34, 197, 94, 0.3);
    color: #bbf7d0;
}
.mfa-status--enabled .mfa-status-icon {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}
.mfa-status--enabled .mfa-status-detail { color: rgba(187, 247, 208, 0.8); }
.mfa-status--disabled {
    background: linear-gradient(135deg,
        rgba(245, 158, 11, 0.12) 0%,
        rgba(245, 158, 11, 0.04) 100%);
    border-color: rgba(245, 158, 11, 0.32);
    color: #fde68a;
}
.mfa-status--disabled .mfa-status-icon {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}
.mfa-status--disabled .mfa-status-detail { color: rgba(253, 230, 138, 0.85); }

.mfa-method-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: start;
    padding: 1rem 1.125rem;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: background-color 0.2s ease, border-color 0.2s ease;
    margin: 0;
}
.mfa-method-card:hover {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
}
.mfa-method-card.is-active {
    border-color: rgba(34, 197, 94, 0.28);
    background:
        linear-gradient(135deg,
            rgba(34, 197, 94, 0.06) 0%,
            rgba(255, 255, 255, 0.04) 100%);
}
.mfa-method-icon {
    background: rgba(94, 158, 255, 0.12);
    color: #93c5fd;
    width: 2.75rem;
    height: 2.75rem;
}
.mfa-method-card.is-active .mfa-method-icon {
    background: rgba(34, 197, 94, 0.18);
    color: #4ade80;
}
.mfa-method-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}
.mfa-method-title {
    margin: 0;
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}
.mfa-method-detail {
    margin: 0;
    color: #94a3b8;
    font-size: 0.8125rem;
    line-height: 1.5;
}
.mfa-method-actions {
    align-self: center;
    justify-self: end;
}
.mfa-method-action--cta {
    color: #fff;
    background: linear-gradient(135deg, rgba(94, 158, 255, 0.5) 0%, rgba(155, 109, 255, 0.5) 100%);
    border: 1px solid rgba(155, 109, 255, 0.5);
}
.mfa-method-action--cta:hover {
    background: linear-gradient(135deg, rgba(94, 158, 255, 0.7) 0%, rgba(155, 109, 255, 0.7) 100%);
    border-color: rgba(155, 109, 255, 0.7);
    color: #fff;
}
.mfa-method-action-disabled {
    font-size: 0.75rem;
    color: #64748b;
    font-style: italic;
    padding: 0.4rem 0;
}
.mfa-progress {
    position: relative;
    margin-top: 0.625rem;
    height: 0.375rem;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
.mfa-progress-fill {
    display: block;
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(90deg, #22c55e 0%, #4ade80 100%);
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    width: 0;
}
.mfa-progress-fill--mid {
    background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
}
.mfa-progress-fill--low {
    background: linear-gradient(90deg, #ef4444 0%, #f87171 100%);
}
@media (max-width: 640px) {
    .mfa-method-card {
        grid-template-columns: auto 1fr;
    }
    .mfa-method-actions {
        grid-column: 1 / -1;
        justify-self: stretch;
        padding-top: 0.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }
    .mfa-method-actions .email-action-btn span {
        display: inline;
    }
}

/* ---------- Sessions page (usersessions/usersession_list.html) ---------- */
.session-row {
    align-items: start;
    grid-template-columns: auto 1fr;
    padding: 1rem 1.125rem;
}
.session-row.is-current {
    border-color: rgba(34, 197, 94, 0.32);
    background: linear-gradient(135deg,
        rgba(34, 197, 94, 0.07) 0%,
        rgba(255, 255, 255, 0.04) 100%);
}
.session-row-logo {
    width: 2.75rem;
    height: 2.75rem;
    background: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
}
.session-row.is-current .session-row-logo {
    background: rgba(34, 197, 94, 0.18);
    color: #86efac;
}
.session-row--chrome  .session-row-logo:not(.is-current *) { color: #93c5fd; }
.session-row--firefox .session-row-logo:not(.is-current *) { color: #fb923c; }
.session-row--safari  .session-row-logo:not(.is-current *) { color: #93c5fd; }
.session-row--edge    .session-row-logo:not(.is-current *) { color: #67e8f9; }
.session-row--opera   .session-row-logo:not(.is-current *) { color: #f87171; }
.session-row-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.session-row-title {
    margin: 0;
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}
.session-row-os {
    color: #94a3b8;
    font-weight: 400;
}
.session-row-meta {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 0.5rem 1rem;
}
.session-meta-item {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.session-meta-item dt {
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #64748b;
    margin: 0;
}
.session-meta-item dd {
    margin: 0;
    color: #e2e8f0;
    font-size: 0.8125rem;
}
.session-meta-ip {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.375rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco,
        Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.75rem;
    color: #cbd5e1;
}
.sessions-revoke-section {
    margin-top: 1.5rem;
    padding: 1.125rem 1.25rem;
    background: linear-gradient(135deg,
        rgba(239, 68, 68, 0.06) 0%,
        rgba(239, 68, 68, 0.02) 100%);
    border: 1px solid rgba(239, 68, 68, 0.22);
    border-radius: 0.875rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}
.sessions-revoke-callout {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    flex: 1 1 18rem;
    min-width: 0;
}
.sessions-revoke-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
    flex-shrink: 0;
}
.sessions-revoke-title {
    margin: 0 0 0.25rem;
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
}
.sessions-revoke-detail {
    margin: 0;
    color: rgba(254, 202, 202, 0.78);
    font-size: 0.8125rem;
    line-height: 1.5;
}
.sessions-revoke-form {
    margin: 0;
}
.sessions-revoke-btn {
    white-space: nowrap;
}
.sessions-only-current {
    margin: 1.5rem 0 0;
    text-align: center;
    color: #64748b;
    font-size: 0.8125rem;
}
@media (max-width: 540px) {
    .sessions-revoke-section {
        flex-direction: column;
        align-items: stretch;
    }
    .sessions-revoke-btn {
        width: 100%;
    }
}

/* ---------- Reauthenticate page (account/base_reauthenticate.html) ---------- */
.reauth-page {
    text-align: center;
}
.reauth-shield {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(94, 158, 255, 0.18) 0%, rgba(155, 109, 255, 0.18) 100%);
    color: #93c5fd;
    border: 1px solid rgba(94, 158, 255, 0.3);
    box-shadow: 0 0 0 6px rgba(94, 158, 255, 0.06),
                0 8px 24px -8px rgba(94, 158, 255, 0.4);
    position: relative;
}
.reauth-shield::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px solid rgba(155, 109, 255, 0.2);
    animation: reauthShieldPulse 2.4s ease-in-out infinite;
}
@keyframes reauthShieldPulse {
    0%   { transform: scale(1);    opacity: 0.6; }
    50%  { transform: scale(1.08); opacity: 0;   }
    100% { transform: scale(1);    opacity: 0;   }
}
.reauth-title {
    margin: 0 0 0.625rem;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.reauth-identity {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0.4rem 0.75rem 0.4rem 0.6rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    font-size: 0.8125rem;
    color: #cbd5e1;
}
.reauth-identity::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2);
}
.reauth-identity-label {
    color: #94a3b8;
    margin-right: 0.125rem;
}
.reauth-identity-email {
    color: #fff;
    font-weight: 500;
    word-break: break-all;
}
.reauth-lede {
    margin: 0 auto 1.5rem;
    color: #94a3b8;
    font-size: 0.875rem;
    line-height: 1.55;
    max-width: 22rem;
}
.reauth-form-wrap {
    text-align: left;
}
.reauth-form > * + * {
    margin-top: 1rem;
}
.reauth-submit {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 0.5rem;
}
.reauth-alt-divider {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin: 1.75rem 0 1rem;
    color: #64748b;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.reauth-alt-divider::before,
.reauth-alt-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
}
.reauth-alt-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
}
.reauth-alt-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    color: #e2e8f0;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.18s ease, border-color 0.18s ease,
                transform 0.15s ease;
}
.reauth-alt-card:hover {
    background: rgba(94, 158, 255, 0.08);
    border-color: rgba(94, 158, 255, 0.32);
    color: #fff;
    transform: translateY(-1px);
}
.reauth-alt-card:focus-visible {
    outline: 2px solid #9b6dff;
    outline-offset: 2px;
}
.reauth-alt-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: rgba(94, 158, 255, 0.14);
    color: #93c5fd;
    flex-shrink: 0;
}
.reauth-alt-body {
    flex: 1;
    min-width: 0;
}
.reauth-alt-arrow {
    color: #64748b;
    flex-shrink: 0;
    transition: transform 0.18s ease, color 0.18s ease;
}
.reauth-alt-card:hover .reauth-alt-arrow {
    color: #fff;
    transform: translateX(2px);
}

/* ---------- TOTP activate page (mfa/totp/activate_form.html) ---------- */
.totp-activate-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
}
.totp-step {
    padding: 1.125rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background-color: rgba(255, 255, 255, 0.04);
}
.totp-step-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.875rem;
}
.totp-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, #5e9eff 0%, #9b6dff 100%);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    box-shadow: 0 4px 12px -4px rgba(94, 158, 255, 0.4);
    flex-shrink: 0;
}
.totp-step-title {
    margin: 0;
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}
.totp-scan-body {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.25rem;
    align-items: start;
}
.totp-qr-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0.75rem;
    border-radius: 0.875rem;
    box-shadow: 0 8px 32px -12px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}
.totp-qr-image {
    display: block;
    width: 180px;
    height: 180px;
    border-radius: 0.5rem;
}
.totp-scan-text {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    min-width: 0;
}
.totp-manual {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.625rem;
    background: rgba(255, 255, 255, 0.025);
}
.totp-manual-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    color: #cbd5e1;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    list-style: none;
}
.totp-manual-summary::-webkit-details-marker { display: none; }
.totp-manual-summary svg {
    transition: transform 0.18s ease;
    color: #94a3b8;
}
.totp-manual[open] .totp-manual-summary svg {
    transform: rotate(90deg);
    color: #93c5fd;
}
.totp-manual-summary:hover {
    color: #fff;
}
.totp-manual-body {
    padding: 0 0.75rem 0.875rem;
}
.totp-secret-wrap {
    position: relative;
}
.totp-secret-wrap > input {
    padding-right: 4.5rem !important;
}
.totp-secret-copy {
    position: absolute;
    top: 50%;
    right: 0.45rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.55rem;
    background: rgba(94, 158, 255, 0.14);
    border: 1px solid rgba(94, 158, 255, 0.32);
    border-radius: 0.4rem;
    color: #93c5fd;
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease,
                color 0.18s ease;
}
.totp-secret-copy:hover {
    background: rgba(94, 158, 255, 0.25);
    color: #fff;
    border-color: rgba(94, 158, 255, 0.55);
}
.totp-secret-copy:focus-visible {
    outline: 2px solid #9b6dff;
    outline-offset: 2px;
}
.totp-secret-copy--copied {
    background: rgba(34, 197, 94, 0.22) !important;
    border-color: rgba(34, 197, 94, 0.5) !important;
    color: #fff !important;
}
.totp-app-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.totp-app-list-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-right: 0.25rem;
}
.totp-app-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    font-size: 0.6875rem;
    color: #cbd5e1;
}
.totp-code-row {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.totp-code-field {
    position: relative;
}
.totp-code-input {
    display: block;
    width: 100%;
    max-width: 14rem;
    margin: 0 auto;
    padding: 0.875rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    color: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco,
        Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.4em;
    text-align: center;
    transition: border-color 0.2s ease, background-color 0.2s ease,
                box-shadow 0.2s ease;
}
.totp-code-input::placeholder {
    color: rgba(255, 255, 255, 0.18);
    letter-spacing: 0.4em;
}
.totp-code-input:focus {
    outline: none;
    border-color: rgba(94, 158, 255, 0.55);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 0 0 4px rgba(94, 158, 255, 0.12);
}
.totp-code-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.75rem;
    color: #64748b;
    text-align: center;
}
.totp-code-hint-dot {
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 9999px;
    background: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2);
    animation: totpHintPulse 2s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes totpHintPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}
.totp-code-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    margin-bottom: 0.875rem;
    border-radius: 0.625rem;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fecaca;
    font-size: 0.8125rem;
}
.totp-action-row {
    margin-top: 0.5rem;
}
.totp-activate-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    transition: box-shadow 0.3s ease, transform 0.18s ease;
}
.totp-activate-btn--ready {
    box-shadow: 0 0 0 6px rgba(94, 158, 255, 0.18),
                0 8px 28px -8px rgba(94, 158, 255, 0.6);
}
@media (max-width: 640px) {
    .totp-scan-body {
        grid-template-columns: 1fr;
        justify-items: center;
    }
    .totp-qr-image {
        width: 160px;
        height: 160px;
    }
    .totp-code-input {
        font-size: 1.35rem;
        letter-spacing: 0.32em;
    }
}

/* Ready-state pulse on the destructive button — fires the
   moment the confirmation phrase becomes valid. */
@keyframes authBtnDangerReady {
    0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55),
                        0 4px 14px rgba(239, 68, 68, 0.35); }
    70%  { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0),
                        0 6px 20px rgba(239, 68, 68, 0.45); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0),
                        0 4px 14px rgba(239, 68, 68, 0.35); }
}
.auth-btn-danger--ready {
    animation: authBtnDangerReady 1.4s ease-out 1;
}
.action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.action-row > .auth-btn-primary,
.action-row > .auth-btn-danger,
.action-row > .auth-btn-secondary {
    display: inline-flex;
    width: auto;
    min-width: 9rem;
}
.help-text {
    color: #94a3b8;
    font-size: 0.8125rem;
    margin: 0.375rem 0 0;
}
/* Mobile touch targets */
@media (max-width: 640px) {
    .auth-card input[type="text"],
    .auth-card input[type="email"],
    .auth-card input[type="password"],
    .auth-card input[type="number"],
    .auth-card input[type="tel"],
    .auth-card select,
    .auth-card textarea {
        font-size: 1rem;
        padding: 0.875rem 1rem;
        min-height: 48px;
    }
    .auth-btn-primary,
    .auth-btn-danger,
    .auth-btn-secondary {
        min-height: 48px;
        font-size: 1rem;
    }
    .action-row {
        justify-content: stretch;
    }
    .action-row > * {
        flex: 1 1 100%;
    }
}

/* ---------------------------------------------------------------------- */
/* Inline-style replacements (CSP cleanup)                                */
/*                                                                         */
/* The classes below replace `style="..."` attributes that previously     */
/* lived inline in `kais/templates/account/*.html`. Each rule is named   */
/* after the element it targets so visual parity is obvious.              */
/* ---------------------------------------------------------------------- */

/* layouts/base.html — <body> radial-gradient background. */
.auth-body {
    background: radial-gradient(ellipse at top, #111a55 0%, #05082a 60%);
}

/* layouts/base.html — left ambient glow blob. */
.auth-glow--blue {
    width: 600px;
    height: 600px;
    top: -200px;
    left: -100px;
    background: #5e9eff;
}

/* layouts/base.html — right ambient glow blob. */
.auth-glow--purple {
    width: 500px;
    height: 500px;
    bottom: -150px;
    right: -100px;
    background: #9b6dff;
}

/* layouts/base.html — frosted-glass auth-card backdrop blur. */
.auth-card--blur {
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

/* layouts/base.html — gradient-haloed logo blur layer. */
.auth-logo-halo {
    background: linear-gradient(135deg, #5e9eff 0%, #9b6dff 100%);
}

/* layouts/base.html — message banner SVG icon (preserve spacing). */
.auth-message-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

/* layouts/base.html — message body span (occupy remaining row). */
.auth-message-body {
    flex: 1 1 0%;
}

/* layouts/base.html — dismiss button initial dimmed state.
   The `.auth-message-dismiss:hover` rule defined earlier promotes
   opacity to 1; this block only sets the resting visual + hit area. */
.auth-message-dismiss {
    flex-shrink: 0;
    opacity: 0.6;
    padding: 2px;
}

/* confirm_email_verification_code.html — small inline "Send New Code"
   variant of the primary auth button shown inside the resend notice. */
.auth-btn-primary--inline {
    display: inline-block;
    width: auto;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
}

/* snippets/already_logged_in.html — informational note paragraph. */
.auth-already-logged-in-text {
    color: #a5b4fc;
    margin: 0;
}

/* email_change.html — the "pending email" form is a control-only form
   used to drive the verify/cancel buttons via `form="pending-email"`.
   Use a class instead of inline `display:none` so CSP `style-src-attr`
   stays clean. (HTML5 `hidden` attribute hides forms but doesn't
   participate in CSS-only override scenarios; class is more flexible.) */
.email-pending-form {
    display: none;
}

/* go_live_notification_success.html — accent thanks heading. The
   surrounding template extends base_countdown.html (no auth.css), so
   the page also pulls auth.css explicitly. */
.go-live-thanks-title {
    color: #00b4d8;
}

/* ---------------------------------------------------------------------- */
/* OTP boxes — confirm_email_verification_code.html                       */
/* (Moved out of the page-level <style nonce> block.)                     */
/* ---------------------------------------------------------------------- */
.otp-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
}
.otp-group {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.otp-box {
    width: 40px;
    height: 52px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    color: #f1f5f9;
    background: rgba(255,255,255,0.05);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    outline: none;
    caret-color: #818cf8;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.otp-box:focus {
    border-color: rgba(129,120,247,0.7);
    box-shadow: 0 0 0 3px rgba(129,120,247,0.2);
    background: rgba(255,255,255,0.08);
}
.otp-box.filled {
    border-color: rgba(129,120,247,0.5);
    background: rgba(255,255,255,0.07);
}
.otp-box.error {
    border-color: rgba(245,158,11,0.6);
    box-shadow: 0 0 0 2px rgba(245,158,11,0.15);
}
.otp-box::selection {
    background: rgba(129,120,247,0.3);
}
@media (max-width: 399px) {
    .otp-container {
        gap: 10px;
    }
}
@media (min-width: 400px) {
    .otp-box {
        width: 44px;
        height: 56px;
        font-size: 22px;
    }
    .otp-group {
        gap: 10px;
    }
}
@media (min-width: 480px) {
    .otp-box {
        width: 48px;
        height: 60px;
        font-size: 24px;
    }
}

/* ---------------------------------------------------------------------- */
/* request_login_code.html — Cloudflare Turnstile overflow guard.         */
/*                                                                        */
/* The Turnstile widget renders at Cloudflare's ~300px minimum width. On  */
/* a ~320px phone the auth card's content slot (body px-4 + card p-6) is  */
/* only ~240px wide, so an unguarded widget pushes the card past the      */
/* viewport and triggers horizontal PAGE scroll (WCAG 1.4.10 — Reflow).   */
/* Containing it in an overflow-x:auto box lets the oversized widget      */
/* scroll WITHIN its own box; the page itself never scrolls sideways. The */
/* auto inline margin centers the widget when the slot is wide enough and */
/* collapses to 0 (without clipping the start, unlike justify-content)    */
/* when it overflows, so the widget stays fully reachable + tappable.     */
/* ---------------------------------------------------------------------- */
.cf-turnstile-guard {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
}
.cf-turnstile-guard > .cf-turnstile {
    flex: 0 0 auto;
    margin-inline: auto;
}

/* ------------------------------------------------------------------------ */
/* LIGHT THEME                                                              */
/* ------------------------------------------------------------------------ */
/*                                                                          */
/* Additive. Not one declaration above this banner is edited, so DARK IS     */
/* BYTE-IDENTICAL BY CONSTRUCTION. Every rule below is (0,3,x) against the   */
/* base rules' (0,1,x), so it wins on SPECIFICITY, not source order.         */
/*                                                                          */
/* THE MEDIA QUERY IS SCOPED TO `:root[data-theme="auto"]` AND MUST STAY     */
/* THAT WAY — the invariant css/theme.css documents under its THEMING        */
/* banner. The values are spelled twice and cannot be shared through an      */
/* indirection; keep the two blocks in sync (test_light_and_auto_payloads_   */
/* are_identical in tests/test_static/test_theme_pages_b.py).                */
/*                                                                          */
/* THE DOOR CARRIES ITS OWN COPY OF THE THEME WIRING                        */
/* -------------------------------------------------                        */
/* `templates/account/layouts/base.html` is a STANDALONE `<html>` document:  */
/* it does NOT extend `templates/base.html`, so it does not inherit the      */
/* pre-paint stamp and had to be given its own `js/theme-init.js` +          */
/* `css/theme.css` pair. Without those two tags nothing stamps `data-theme`  */
/* here and every selector below is inert — correct CSS that never matches,  */
/* which is indistinguishable from CSS nobody wrote. If the door ever stops  */
/* responding to the appearance toggle, check those two tags FIRST.          */
/*                                                                          */
/* WHY THIS FILE HAS NO TOKEN BLOCK TO FLIP                                  */
/* ----------------------------------------                                 */
/* auth.css declares no custom properties: all 156 of its colours are hex    */
/* literals, and the two Tailwind arbitrary-value classes the template puts  */
/* on the body and the card (`bg-[#0a0e17]`, `bg-[#131924]/80`) paint        */
/* NOTHING, because the vendored tailwind-main.css was built without them —  */
/* it contains exactly one `bg-[…]` rule and neither is it. So the card has  */
/* never had a fill of its own; it has been a blur filter over `.auth-body`. */
/* The light block gives it one.                                            */
/*                                                                          */
/* Ratios below were computed against #f7f9fc — the frosted card composited  */
/* over the tinted page — rather than pure white, so each is the             */
/* conservative figure rather than the flattering one.                       */
/* ------------------------------------------------------------------------ */

/* == A. PAGE AND CARD ==================================================== */
:root[data-theme="light"] .auth-body {
    background: radial-gradient(ellipse at top, #ffffff 0%, #eef2f8 60%);
}

/* The card finally gets a fill. Translucent so the two ambient glow blobs
   still read through the backdrop-filter, which is what makes this surface
   frosted glass rather than a plain white box. */
:root[data-theme="light"] .auth-card {
    background: rgba(255, 255, 255, 0.88);
    /* A drop shadow only — no border and no inset ring. `border` sets
       border-WIDTH, and the template hands this element `border-0`, so a
       real border would make the card 2px larger in light mode than in
       dark; the inset 1px shadow that used to stand in for one drew a
       faint box around the form and is gone in every theme (pinned by
       test_auth_card_no_hairline_ring.py). The whole light layer is
       paint-only by design — pinned by
       test_theme_pages_b.py::TestTheLightLayerIsPaintOnly. */
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.12);
}

/* The blobs are `filter: blur(100px)` at 15% opacity. Over paper that is a
   heavy wash, so they are dialled back to a hint of colour. */
:root[data-theme="light"] .auth-glow {
    opacity: 0.10;
}

/* == B. INK ==============================================================
   Grouped by ROLE rather than by component, because the file uses the same
   six literals everywhere: #fff / #f1f5f9 for titles and field text,
   #cbd5e1 / #e2e8f0 for labels and secondary text, #94a3b8 / #64748b for
   muted text. Each group flips once. ====================================== */

/* -- B1. Strong ink: 16.93:1 -------------------------------------------- */
:root[data-theme="light"] .auth-card input[type="text"],
:root[data-theme="light"] .auth-card input[type="email"],
:root[data-theme="light"] .auth-card input[type="password"],
:root[data-theme="light"] .auth-card input[type="number"],
:root[data-theme="light"] .auth-card input[type="tel"],
:root[data-theme="light"] .auth-card select,
:root[data-theme="light"] .auth-card textarea,
:root[data-theme="light"] .email-row-address,
:root[data-theme="light"] .email-page-title,
:root[data-theme="light"] .warning-callout-title,
:root[data-theme="light"] .warning-callout strong,
:root[data-theme="light"] .provider-card-name,
:root[data-theme="light"] .mfa-status-title,
:root[data-theme="light"] .mfa-method-title,
:root[data-theme="light"] .session-row-title,
:root[data-theme="light"] .sessions-revoke-title,
:root[data-theme="light"] .reauth-title,
:root[data-theme="light"] .reauth-identity-email,
:root[data-theme="light"] .totp-step-title,
:root[data-theme="light"] .totp-code-input,
:root[data-theme="light"] .otp-box {
    color: #0f172a;
}

:root[data-theme="light"] .auth-card input:-webkit-autofill,
:root[data-theme="light"] .auth-card input:-webkit-autofill:hover,
:root[data-theme="light"] .auth-card input:-webkit-autofill:focus {
    -webkit-text-fill-color: #0f172a;
    -webkit-box-shadow: 0 0 0px 1000px #f8fafc inset;
}

/* -- B2. Secondary ink: 9.82:1 ------------------------------------------- */
:root[data-theme="light"] .auth-card label,
:root[data-theme="light"] .auth-account-nav-link,
:root[data-theme="light"] .auth-btn-secondary,
:root[data-theme="light"] .confirm-phrase-status,
:root[data-theme="light"] .email-section-count,
:root[data-theme="light"] .email-action-btn,
:root[data-theme="light"] .connection-row-logo,
:root[data-theme="light"] .connection-empty-title,
:root[data-theme="light"] .provider-card,
:root[data-theme="light"] .session-row-logo,
:root[data-theme="light"] .session-meta-item dd,
:root[data-theme="light"] .session-meta-ip,
:root[data-theme="light"] .reauth-identity,
:root[data-theme="light"] .reauth-alt-card,
:root[data-theme="light"] .totp-manual-summary,
:root[data-theme="light"] .totp-app-chip {
    color: #334155;
}

/* -- B3. Muted ink: 7.18:1 (6.11:1 on an 8% veil) ------------------------ */
:root[data-theme="light"] .auth-card .text-muted,
:root[data-theme="light"] .auth-card .helptext,
:root[data-theme="light"] .auth-card .form-text {
    color: #475569 !important;
}

:root[data-theme="light"] .auth-divider,
:root[data-theme="light"] .password-strength-label,
:root[data-theme="light"] .password-requirements li,
:root[data-theme="light"] .email-page-lede,
:root[data-theme="light"] .email-section-title,
:root[data-theme="light"] .email-row-marker,
:root[data-theme="light"] .email-add-input-icon,
:root[data-theme="light"] .email-add-hint,
:root[data-theme="light"] .connection-meta,
:root[data-theme="light"] .connection-empty-detail,
:root[data-theme="light"] .mfa-method-detail,
:root[data-theme="light"] .mfa-method-action-disabled,
:root[data-theme="light"] .session-row-os,
:root[data-theme="light"] .session-meta-item dt,
:root[data-theme="light"] .sessions-only-current,
:root[data-theme="light"] .reauth-identity-label,
:root[data-theme="light"] .reauth-lede,
:root[data-theme="light"] .reauth-alt-divider,
:root[data-theme="light"] .reauth-alt-arrow,
:root[data-theme="light"] .totp-manual-summary svg,
:root[data-theme="light"] .totp-app-list-label,
:root[data-theme="light"] .totp-code-hint,
:root[data-theme="light"] .help-text {
    color: #475569;
}

/* -- B4. Placeholders ----------------------------------------------------
   #4a5568 was chosen to be dim against a dark field; on a light one it is
   nearly the body colour, which makes an empty field look filled. -- */
:root[data-theme="light"] .auth-card input::placeholder {
    color: #5b6b84;
}

:root[data-theme="light"] .totp-code-input::placeholder {
    color: rgba(15, 23, 42, 0.45);
}

/* == C. SEMANTIC INK =====================================================
   Every one of these is a pastel picked to glow against navy: on paper
   #93c5fd is 2.0:1, #4ade80 is 1.7:1, #fbbf24 is 1.8:1 and #fca5a5 is
   2.3:1. Each moves to a dark member of the SAME hue family, so the
   information the colour carries is unchanged. ============================ */

/* -- C1. Informational blue: 6.35:1 on the card, 5.78:1 on its veil ------ */
:root[data-theme="light"] .email-row.is-primary .email-row-marker,
:root[data-theme="light"] .email-badge--primary,
:root[data-theme="light"] .email-action-btn--primary,
:root[data-theme="light"] .email-add-input-wrap > input[type="email"]:focus + .email-add-input-icon,
:root[data-theme="light"] .connection-empty-icon,
:root[data-theme="light"] .provider-card-action,
:root[data-theme="light"] .mfa-method-icon,
:root[data-theme="light"] .session-row--chrome .session-row-logo:not(.is-current *),
:root[data-theme="light"] .session-row--safari .session-row-logo:not(.is-current *),
:root[data-theme="light"] .reauth-shield,
:root[data-theme="light"] .reauth-alt-icon,
:root[data-theme="light"] .totp-manual[open] .totp-manual-summary svg,
:root[data-theme="light"] .totp-secret-copy {
    color: #1d4ed8;
}

/* -- C2. Success green: 6.14:1 on a 12% veil, 5.75:1 on a 20% one -------- */
:root[data-theme="light"] .password-requirements li.met,
:root[data-theme="light"] .email-row .email-row-marker.has-verified-tone,
:root[data-theme="light"] .email-badge--verified,
:root[data-theme="light"] .mfa-status--enabled,
:root[data-theme="light"] .mfa-status--enabled .mfa-status-icon,
:root[data-theme="light"] .mfa-status--enabled .mfa-status-detail,
:root[data-theme="light"] .mfa-method-card.is-active .mfa-method-icon,
:root[data-theme="light"] .session-row.is-current .session-row-logo {
    color: #166534;
}

/* Two green DOTS rather than green text — the same hue, but they are the
   only indicator in their spot, so they take the 3:1 non-text floor. */
:root[data-theme="light"] .reauth-identity::before,
:root[data-theme="light"] .totp-code-hint-dot {
    background: #166534;
}

/* -- C3. Warning amber: 5.86:1 on its veil ------------------------------- */
:root[data-theme="light"] .confirm-phrase-status[data-state="partial"],
:root[data-theme="light"] .email-row.is-unverified .email-row-marker,
:root[data-theme="light"] .email-badge--unverified,
:root[data-theme="light"] .email-action-btn--verify,
:root[data-theme="light"] .mfa-status--disabled,
:root[data-theme="light"] .mfa-status--disabled .mfa-status-icon,
:root[data-theme="light"] .mfa-status--disabled .mfa-status-detail {
    color: #854d0e;
}

/* -- C4. Danger red: 5.25:1 on a 12% veil, 4.86:1 on an 18% one ---------- */
:root[data-theme="light"] .auth-card .asteriskField,
:root[data-theme="light"] .auth-card .invalid-feedback,
:root[data-theme="light"] .auth-card .errorlist,
:root[data-theme="light"] .field-error,
:root[data-theme="light"] .auth-account-nav-link--danger,
:root[data-theme="light"] .auth-account-nav-link--danger:hover,
:root[data-theme="light"] .warning-callout,
:root[data-theme="light"] .warning-callout-icon,
:root[data-theme="light"] .warning-callout-detail,
:root[data-theme="light"] .confirm-phrase-status[data-state="error"],
:root[data-theme="light"] .confirm-phrase-letters > li[data-state="wrong"],
:root[data-theme="light"] .email-action-btn--remove,
:root[data-theme="light"] .sessions-revoke-icon,
:root[data-theme="light"] .sessions-revoke-detail,
:root[data-theme="light"] .session-row--opera .session-row-logo:not(.is-current *),
:root[data-theme="light"] .totp-code-error {
    color: #b91c1c;
}

/* -- C5. The remaining one-offs ------------------------------------------ */
:root[data-theme="light"] .auth-already-logged-in-text {
    color: #4338ca;                      /* 7.49:1 */
}

:root[data-theme="light"] .go-live-thanks-title {
    color: #0e7490;                      /* 5.08:1 */
}

:root[data-theme="light"] .session-row--firefox .session-row-logo:not(.is-current *) {
    color: #c2410c;
}

:root[data-theme="light"] .session-row--edge .session-row-logo:not(.is-current *) {
    color: #0e7490;
}

:root[data-theme="light"] .confirm-phrase-letters > li {
    color: rgba(15, 23, 42, 0.75);
}

/* == D. WHITE-ALPHA VEILS ================================================
   Every raised surface in this file is a rgba(255,255,255, .02–.10) wash.
   On paper each is simply ABSENT, so the fields, rows, cards and chips
   would all lose their boundaries — an input you cannot see is a usability
   failure, not a cosmetic one. Inverted to the matching slate alpha at the
   same weights. ========================================================== */
:root[data-theme="light"] .auth-card input[type="text"],
:root[data-theme="light"] .auth-card input[type="email"],
:root[data-theme="light"] .auth-card input[type="password"],
:root[data-theme="light"] .auth-card input[type="number"],
:root[data-theme="light"] .auth-card input[type="tel"],
:root[data-theme="light"] .auth-card select,
:root[data-theme="light"] .auth-card textarea,
:root[data-theme="light"] .otp-box {
    background-color: rgba(15, 23, 42, 0.05);
    border-color: rgba(15, 23, 42, 0.14);
}

:root[data-theme="light"] .auth-card input:focus,
:root[data-theme="light"] .auth-card select:focus,
:root[data-theme="light"] .auth-card textarea:focus {
    background-color: rgba(15, 23, 42, 0.07);
}

:root[data-theme="light"] .otp-box:focus,
:root[data-theme="light"] .otp-box.filled {
    background: rgba(15, 23, 42, 0.07);
}

:root[data-theme="light"] .email-add-input-wrap > input[type="email"] {
    background: rgba(15, 23, 42, 0.05) !important;
    color: #0f172a !important;
}

:root[data-theme="light"] .email-add-input-wrap > input[type="email"]:focus {
    background: rgba(15, 23, 42, 0.07) !important;
}

:root[data-theme="light"] .auth-divider::before,
:root[data-theme="light"] .auth-divider::after,
:root[data-theme="light"] .reauth-alt-divider::before,
:root[data-theme="light"] .reauth-alt-divider::after,
:root[data-theme="light"] .auth-account-nav-divider::before,
:root[data-theme="light"] .password-strength-bar {
    background: rgba(15, 23, 42, 0.12);
}

:root[data-theme="light"] .password-requirements,
:root[data-theme="light"] .email-add-section,
:root[data-theme="light"] .connection-empty,
:root[data-theme="light"] .connection-add-section,
:root[data-theme="light"] .totp-manual {
    background: rgba(15, 23, 42, 0.03);
}

:root[data-theme="light"] .auth-account-nav-dock,
:root[data-theme="light"] .auth-btn-secondary,
:root[data-theme="light"] .connection-meta,
:root[data-theme="light"] .provider-card,
:root[data-theme="light"] .mfa-method-card,
:root[data-theme="light"] .reauth-identity,
:root[data-theme="light"] .reauth-alt-card,
:root[data-theme="light"] .totp-step,
:root[data-theme="light"] .totp-app-chip,
:root[data-theme="light"] .confirm-phrase-letters > li {
    background: rgba(15, 23, 42, 0.05);
}

:root[data-theme="light"] .email-row,
:root[data-theme="light"] .session-meta-ip {
    background: rgba(15, 23, 42, 0.04);
}

:root[data-theme="light"] .email-row:hover,
:root[data-theme="light"] .email-row-marker,
:root[data-theme="light"] .email-section-count,
:root[data-theme="light"] .mfa-progress,
:root[data-theme="light"] .session-row-logo,
:root[data-theme="light"] .provider-card-logo {
    background: rgba(15, 23, 42, 0.06);
}

:root[data-theme="light"] .mfa-method-card:hover,
:root[data-theme="light"] .provider-card:hover {
    background: rgba(15, 23, 42, 0.08);
}

/* == E. WHITE LABELS ON A TRANSLUCENT FILL ===============================
   These are the trap of this file. A literal `#fff` reads correctly on a
   10%-white wash over navy and lands at roughly 1.1:1 on the same wash over
   paper — so the control does not merely look wrong, it goes blank on
   hover, which is exactly when the user is looking at it. Dark ink instead;
   the fills stay where they are. ========================================= */
:root[data-theme="light"] .auth-account-nav-link:hover,
:root[data-theme="light"] .auth-btn-secondary:hover,
:root[data-theme="light"] .email-action-btn:hover,
:root[data-theme="light"] .provider-card:hover .provider-card-action,
:root[data-theme="light"] .reauth-alt-card:hover,
:root[data-theme="light"] .reauth-alt-card:hover .reauth-alt-arrow,
:root[data-theme="light"] .totp-manual-summary:hover {
    color: #0f172a;
}

:root[data-theme="light"] .auth-account-nav-link:hover,
:root[data-theme="light"] .auth-btn-secondary:hover,
:root[data-theme="light"] .email-action-btn:hover {
    background: rgba(15, 23, 42, 0.09);
}

:root[data-theme="light"] .email-action-btn--primary:hover,
:root[data-theme="light"] .totp-secret-copy:hover {
    color: #1d4ed8;
}

:root[data-theme="light"] .email-action-btn--verify:hover {
    color: #854d0e;
}

:root[data-theme="light"] .email-action-btn--remove:hover:not([disabled]) {
    color: #b91c1c;
}

/* == F. SATURATED CONTROLS ===============================================
   These KEEP their white label — that is the right call for a filled
   button — so their FILL is what has to change. #6aa8ff carries white at
   2.43:1 and #ef4444 at 3.76:1; neither clears AA, and the first of them is
   the primary Continue button on the sign-in door. Dark stops of the same
   hues put every one of them between 5.70:1 and 7.13:1. The dark theme is
   untouched, so this is a light-mode improvement rather than a redesign.
   ======================================================================== */
:root[data-theme="light"] .auth-btn-primary,
:root[data-theme="light"] .auth-account-nav [aria-current="page"],
:root[data-theme="light"] .auth-account-nav [aria-current="page"]:hover,
:root[data-theme="light"] .totp-step-num,
:root[data-theme="light"] .mfa-method-action--cta,
:root[data-theme="light"] .mfa-method-action--cta:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #7c3aed 100%);
    color: #fff;
}

:root[data-theme="light"] .auth-btn-danger {
    background: #b91c1c;                 /* white on it: 6.47:1 */
}

:root[data-theme="light"] .auth-btn-danger:hover {
    background: #991b1b;
}

/* Both of these paint `#fff` on a 22% green wash — 1.3:1 on paper. They go
   SOLID rather than taking dark ink, because "matched" and "copied" are
   confirmations and a filled green chip is what they were drawn to be. */
:root[data-theme="light"] .confirm-phrase-status[data-state="valid"],
:root[data-theme="light"] .confirm-phrase-letters > li[data-state="matched"] {
    background: #166534;
    color: #fff;                         /* 7.13:1 */
}

:root[data-theme="light"] .totp-secret-copy--copied {
    background: #166534 !important;
    color: #fff !important;
}

/* == G. PROVIDER LOGO TILES ==============================================
   The Google tile is a literal white square, invisible on a white card, so
   it gains a hairline. The GitHub mark is drawn in white and stays that
   way — its tile goes dark instead, which is how the mark is meant to be
   presented. ============================================================= */
:root[data-theme="light"] .connection-row--google .connection-row-logo,
:root[data-theme="light"] .provider-card--google .provider-card-logo {
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
}

:root[data-theme="light"] .connection-row--github .connection-row-logo,
:root[data-theme="light"] .provider-card--github .provider-card-logo {
    background: #0f172a;
    color: #fff;
}

/* The `auto` half below is MECHANICALLY DERIVED from the block above —
   same rules, same order, `light` swapped for `auto` — which is what makes
   the two provably identical rather than identical-by-inspection. Its
   comments are omitted deliberately: one copy of the prose cannot drift
   from another copy of the prose if there is only one. Edit the LIGHT
   block, then mirror the change here.
   Pinned by test_light_and_auto_payloads_are_identical. */
@media (prefers-color-scheme: light) {
    :root[data-theme="auto"] .auth-body {
        background: radial-gradient(ellipse at top, #ffffff 0%, #eef2f8 60%);
    }

    :root[data-theme="auto"] .auth-card {
        background: rgba(255, 255, 255, 0.88);
        box-shadow: 0 25px 60px rgba(15, 23, 42, 0.12);
    }

    :root[data-theme="auto"] .auth-glow {
        opacity: 0.10;
    }

    :root[data-theme="auto"] .auth-card input[type="text"],
    :root[data-theme="auto"] .auth-card input[type="email"],
    :root[data-theme="auto"] .auth-card input[type="password"],
    :root[data-theme="auto"] .auth-card input[type="number"],
    :root[data-theme="auto"] .auth-card input[type="tel"],
    :root[data-theme="auto"] .auth-card select,
    :root[data-theme="auto"] .auth-card textarea,
    :root[data-theme="auto"] .email-row-address,
    :root[data-theme="auto"] .email-page-title,
    :root[data-theme="auto"] .warning-callout-title,
    :root[data-theme="auto"] .warning-callout strong,
    :root[data-theme="auto"] .provider-card-name,
    :root[data-theme="auto"] .mfa-status-title,
    :root[data-theme="auto"] .mfa-method-title,
    :root[data-theme="auto"] .session-row-title,
    :root[data-theme="auto"] .sessions-revoke-title,
    :root[data-theme="auto"] .reauth-title,
    :root[data-theme="auto"] .reauth-identity-email,
    :root[data-theme="auto"] .totp-step-title,
    :root[data-theme="auto"] .totp-code-input,
    :root[data-theme="auto"] .otp-box {
        color: #0f172a;
    }

    :root[data-theme="auto"] .auth-card input:-webkit-autofill,
    :root[data-theme="auto"] .auth-card input:-webkit-autofill:hover,
    :root[data-theme="auto"] .auth-card input:-webkit-autofill:focus {
        -webkit-text-fill-color: #0f172a;
        -webkit-box-shadow: 0 0 0px 1000px #f8fafc inset;
    }

    :root[data-theme="auto"] .auth-card label,
    :root[data-theme="auto"] .auth-account-nav-link,
    :root[data-theme="auto"] .auth-btn-secondary,
    :root[data-theme="auto"] .confirm-phrase-status,
    :root[data-theme="auto"] .email-section-count,
    :root[data-theme="auto"] .email-action-btn,
    :root[data-theme="auto"] .connection-row-logo,
    :root[data-theme="auto"] .connection-empty-title,
    :root[data-theme="auto"] .provider-card,
    :root[data-theme="auto"] .session-row-logo,
    :root[data-theme="auto"] .session-meta-item dd,
    :root[data-theme="auto"] .session-meta-ip,
    :root[data-theme="auto"] .reauth-identity,
    :root[data-theme="auto"] .reauth-alt-card,
    :root[data-theme="auto"] .totp-manual-summary,
    :root[data-theme="auto"] .totp-app-chip {
        color: #334155;
    }

    :root[data-theme="auto"] .auth-card .text-muted,
    :root[data-theme="auto"] .auth-card .helptext,
    :root[data-theme="auto"] .auth-card .form-text {
        color: #475569 !important;
    }

    :root[data-theme="auto"] .auth-divider,
    :root[data-theme="auto"] .password-strength-label,
    :root[data-theme="auto"] .password-requirements li,
    :root[data-theme="auto"] .email-page-lede,
    :root[data-theme="auto"] .email-section-title,
    :root[data-theme="auto"] .email-row-marker,
    :root[data-theme="auto"] .email-add-input-icon,
    :root[data-theme="auto"] .email-add-hint,
    :root[data-theme="auto"] .connection-meta,
    :root[data-theme="auto"] .connection-empty-detail,
    :root[data-theme="auto"] .mfa-method-detail,
    :root[data-theme="auto"] .mfa-method-action-disabled,
    :root[data-theme="auto"] .session-row-os,
    :root[data-theme="auto"] .session-meta-item dt,
    :root[data-theme="auto"] .sessions-only-current,
    :root[data-theme="auto"] .reauth-identity-label,
    :root[data-theme="auto"] .reauth-lede,
    :root[data-theme="auto"] .reauth-alt-divider,
    :root[data-theme="auto"] .reauth-alt-arrow,
    :root[data-theme="auto"] .totp-manual-summary svg,
    :root[data-theme="auto"] .totp-app-list-label,
    :root[data-theme="auto"] .totp-code-hint,
    :root[data-theme="auto"] .help-text {
        color: #475569;
    }

    :root[data-theme="auto"] .auth-card input::placeholder {
        color: #5b6b84;
    }

    :root[data-theme="auto"] .totp-code-input::placeholder {
        color: rgba(15, 23, 42, 0.45);
    }

    :root[data-theme="auto"] .email-row.is-primary .email-row-marker,
    :root[data-theme="auto"] .email-badge--primary,
    :root[data-theme="auto"] .email-action-btn--primary,
    :root[data-theme="auto"] .email-add-input-wrap > input[type="email"]:focus + .email-add-input-icon,
    :root[data-theme="auto"] .connection-empty-icon,
    :root[data-theme="auto"] .provider-card-action,
    :root[data-theme="auto"] .mfa-method-icon,
    :root[data-theme="auto"] .session-row--chrome .session-row-logo:not(.is-current *),
    :root[data-theme="auto"] .session-row--safari .session-row-logo:not(.is-current *),
    :root[data-theme="auto"] .reauth-shield,
    :root[data-theme="auto"] .reauth-alt-icon,
    :root[data-theme="auto"] .totp-manual[open] .totp-manual-summary svg,
    :root[data-theme="auto"] .totp-secret-copy {
        color: #1d4ed8;
    }

    :root[data-theme="auto"] .password-requirements li.met,
    :root[data-theme="auto"] .email-row .email-row-marker.has-verified-tone,
    :root[data-theme="auto"] .email-badge--verified,
    :root[data-theme="auto"] .mfa-status--enabled,
    :root[data-theme="auto"] .mfa-status--enabled .mfa-status-icon,
    :root[data-theme="auto"] .mfa-status--enabled .mfa-status-detail,
    :root[data-theme="auto"] .mfa-method-card.is-active .mfa-method-icon,
    :root[data-theme="auto"] .session-row.is-current .session-row-logo {
        color: #166534;
    }

    :root[data-theme="auto"] .reauth-identity::before,
    :root[data-theme="auto"] .totp-code-hint-dot {
        background: #166534;
    }

    :root[data-theme="auto"] .confirm-phrase-status[data-state="partial"],
    :root[data-theme="auto"] .email-row.is-unverified .email-row-marker,
    :root[data-theme="auto"] .email-badge--unverified,
    :root[data-theme="auto"] .email-action-btn--verify,
    :root[data-theme="auto"] .mfa-status--disabled,
    :root[data-theme="auto"] .mfa-status--disabled .mfa-status-icon,
    :root[data-theme="auto"] .mfa-status--disabled .mfa-status-detail {
        color: #854d0e;
    }

    :root[data-theme="auto"] .auth-card .asteriskField,
    :root[data-theme="auto"] .auth-card .invalid-feedback,
    :root[data-theme="auto"] .auth-card .errorlist,
    :root[data-theme="auto"] .field-error,
    :root[data-theme="auto"] .auth-account-nav-link--danger,
    :root[data-theme="auto"] .auth-account-nav-link--danger:hover,
    :root[data-theme="auto"] .warning-callout,
    :root[data-theme="auto"] .warning-callout-icon,
    :root[data-theme="auto"] .warning-callout-detail,
    :root[data-theme="auto"] .confirm-phrase-status[data-state="error"],
    :root[data-theme="auto"] .confirm-phrase-letters > li[data-state="wrong"],
    :root[data-theme="auto"] .email-action-btn--remove,
    :root[data-theme="auto"] .sessions-revoke-icon,
    :root[data-theme="auto"] .sessions-revoke-detail,
    :root[data-theme="auto"] .session-row--opera .session-row-logo:not(.is-current *),
    :root[data-theme="auto"] .totp-code-error {
        color: #b91c1c;
    }

    :root[data-theme="auto"] .auth-already-logged-in-text {
        color: #4338ca;                      }

    :root[data-theme="auto"] .go-live-thanks-title {
        color: #0e7490;                      }

    :root[data-theme="auto"] .session-row--firefox .session-row-logo:not(.is-current *) {
        color: #c2410c;
    }

    :root[data-theme="auto"] .session-row--edge .session-row-logo:not(.is-current *) {
        color: #0e7490;
    }

    :root[data-theme="auto"] .confirm-phrase-letters > li {
        color: rgba(15, 23, 42, 0.75);
    }

    :root[data-theme="auto"] .auth-card input[type="text"],
    :root[data-theme="auto"] .auth-card input[type="email"],
    :root[data-theme="auto"] .auth-card input[type="password"],
    :root[data-theme="auto"] .auth-card input[type="number"],
    :root[data-theme="auto"] .auth-card input[type="tel"],
    :root[data-theme="auto"] .auth-card select,
    :root[data-theme="auto"] .auth-card textarea,
    :root[data-theme="auto"] .otp-box {
        background-color: rgba(15, 23, 42, 0.05);
        border-color: rgba(15, 23, 42, 0.14);
    }

    :root[data-theme="auto"] .auth-card input:focus,
    :root[data-theme="auto"] .auth-card select:focus,
    :root[data-theme="auto"] .auth-card textarea:focus {
        background-color: rgba(15, 23, 42, 0.07);
    }

    :root[data-theme="auto"] .otp-box:focus,
    :root[data-theme="auto"] .otp-box.filled {
        background: rgba(15, 23, 42, 0.07);
    }

    :root[data-theme="auto"] .email-add-input-wrap > input[type="email"] {
        background: rgba(15, 23, 42, 0.05) !important;
        color: #0f172a !important;
    }

    :root[data-theme="auto"] .email-add-input-wrap > input[type="email"]:focus {
        background: rgba(15, 23, 42, 0.07) !important;
    }

    :root[data-theme="auto"] .auth-divider::before,
    :root[data-theme="auto"] .auth-divider::after,
    :root[data-theme="auto"] .reauth-alt-divider::before,
    :root[data-theme="auto"] .reauth-alt-divider::after,
    :root[data-theme="auto"] .auth-account-nav-divider::before,
    :root[data-theme="auto"] .password-strength-bar {
        background: rgba(15, 23, 42, 0.12);
    }

    :root[data-theme="auto"] .password-requirements,
    :root[data-theme="auto"] .email-add-section,
    :root[data-theme="auto"] .connection-empty,
    :root[data-theme="auto"] .connection-add-section,
    :root[data-theme="auto"] .totp-manual {
        background: rgba(15, 23, 42, 0.03);
    }

    :root[data-theme="auto"] .auth-account-nav-dock,
    :root[data-theme="auto"] .auth-btn-secondary,
    :root[data-theme="auto"] .connection-meta,
    :root[data-theme="auto"] .provider-card,
    :root[data-theme="auto"] .mfa-method-card,
    :root[data-theme="auto"] .reauth-identity,
    :root[data-theme="auto"] .reauth-alt-card,
    :root[data-theme="auto"] .totp-step,
    :root[data-theme="auto"] .totp-app-chip,
    :root[data-theme="auto"] .confirm-phrase-letters > li {
        background: rgba(15, 23, 42, 0.05);
    }

    :root[data-theme="auto"] .email-row,
    :root[data-theme="auto"] .session-meta-ip {
        background: rgba(15, 23, 42, 0.04);
    }

    :root[data-theme="auto"] .email-row:hover,
    :root[data-theme="auto"] .email-row-marker,
    :root[data-theme="auto"] .email-section-count,
    :root[data-theme="auto"] .mfa-progress,
    :root[data-theme="auto"] .session-row-logo,
    :root[data-theme="auto"] .provider-card-logo {
        background: rgba(15, 23, 42, 0.06);
    }

    :root[data-theme="auto"] .mfa-method-card:hover,
    :root[data-theme="auto"] .provider-card:hover {
        background: rgba(15, 23, 42, 0.08);
    }

    :root[data-theme="auto"] .auth-account-nav-link:hover,
    :root[data-theme="auto"] .auth-btn-secondary:hover,
    :root[data-theme="auto"] .email-action-btn:hover,
    :root[data-theme="auto"] .provider-card:hover .provider-card-action,
    :root[data-theme="auto"] .reauth-alt-card:hover,
    :root[data-theme="auto"] .reauth-alt-card:hover .reauth-alt-arrow,
    :root[data-theme="auto"] .totp-manual-summary:hover {
        color: #0f172a;
    }

    :root[data-theme="auto"] .auth-account-nav-link:hover,
    :root[data-theme="auto"] .auth-btn-secondary:hover,
    :root[data-theme="auto"] .email-action-btn:hover {
        background: rgba(15, 23, 42, 0.09);
    }

    :root[data-theme="auto"] .email-action-btn--primary:hover,
    :root[data-theme="auto"] .totp-secret-copy:hover {
        color: #1d4ed8;
    }

    :root[data-theme="auto"] .email-action-btn--verify:hover {
        color: #854d0e;
    }

    :root[data-theme="auto"] .email-action-btn--remove:hover:not([disabled]) {
        color: #b91c1c;
    }

    :root[data-theme="auto"] .auth-btn-primary,
    :root[data-theme="auto"] .auth-account-nav [aria-current="page"],
    :root[data-theme="auto"] .auth-account-nav [aria-current="page"]:hover,
    :root[data-theme="auto"] .totp-step-num,
    :root[data-theme="auto"] .mfa-method-action--cta,
    :root[data-theme="auto"] .mfa-method-action--cta:hover {
        background: linear-gradient(135deg, #1d4ed8 0%, #7c3aed 100%);
        color: #fff;
    }

    :root[data-theme="auto"] .auth-btn-danger {
        background: #b91c1c;                 }

    :root[data-theme="auto"] .auth-btn-danger:hover {
        background: #991b1b;
    }

    :root[data-theme="auto"] .confirm-phrase-status[data-state="valid"],
    :root[data-theme="auto"] .confirm-phrase-letters > li[data-state="matched"] {
        background: #166534;
        color: #fff;                         }

    :root[data-theme="auto"] .totp-secret-copy--copied {
        background: #166534 !important;
        color: #fff !important;
    }

    :root[data-theme="auto"] .connection-row--google .connection-row-logo,
    :root[data-theme="auto"] .provider-card--google .provider-card-logo {
        box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
    }

    :root[data-theme="auto"] .connection-row--github .connection-row-logo,
    :root[data-theme="auto"] .provider-card--github .provider-card-logo {
        background: #0f172a;
        color: #fff;
    }
}

/* ---------------------------------------------------------------------- */
/* Appearance toggle on the door                                          */
/*                                                                         */
/* `account/layouts/base.html` is a standalone shell — it does not extend  */
/* `templates/base.html`, so the navbar and the mobile drawer that carry   */
/* the site-wide copies of the widget are not on these pages. The door     */
/* includes `_theme_toggle.html` itself and this section is the only       */
/* placement rule it needs; everything the widget LOOKS like already lives */
/* in the widget section of `css/theme.css`, which this file must not      */
/* duplicate or override.                                                  */
/*                                                                         */
/* Unconditional and theme-agnostic ON PURPOSE. This is geometry, and the  */
/* light layer of this stylesheet is swept as PAINT-ONLY by                */
/* `tests/test_static/test_theme_pages_b.py::TestTheLightLayerIsPaintOnly` */
/* — a positioning rule scoped under `:root[data-theme="light"]` would     */
/* fail that sweep, and would also mean the control sat somewhere else in  */
/* dark mode for no reason.                                                */
/* ---------------------------------------------------------------------- */

/* Fixed rather than in flow: the body is `flex items-center justify-center`,
   so a normal-flow sibling would be a second flex child and re-centre the
   pair, shifting every auth page down. Logical offsets only, so the control
   mirrors to the start side under RTL.

   z-index 30 is bounded on BOTH sides and neither bound is arbitrary:
     - above `.auth-card` (z-10) and `.auth-glow` (z-0), so the trigger and
       its popover paint over the card rather than under it;
     - below `.loading-overlay` (z-index 9999, css/spinner.css), so the
       submit spinner still covers the whole page. A control that stayed
       clickable through the "Loading…" veil would let a visitor change the
       theme mid-navigation while the page believes it is busy. */
.auth-theme {
    position: fixed;
    inset-block-start: 0.75rem;
    inset-inline-end: 0.75rem;
    z-index: 30;
}

/* Reserve the room the fixed control occupies, so the card can never sit
   under it on a short or narrow viewport.

   MEASURED, not computed. The trigger below is raised to 44px and
   `.auth-theme` offsets it 0.75rem = 12px, so the control's box measures
   145.9x44.0 at y=12 and ends at y=56. 2rem + 48px = 80px, so the card
   starts 24px clear of it — a real gap rather than a touching edge, which
   matters because the card's top row is its logo and the two would
   otherwise read as one crowded cluster.

   A CORRECTION worth keeping, because the obvious reasoning here is
   wrong: this declaration does NOT win a cascade fight with Tailwind's
   `py-8` / `sm:p-6`. Those utilities are simply ABSENT from the vendored,
   pre-built `tailwind-main.css` — the computed `padding-bottom` on this
   same <body> MEASURES 0px, which is what an absent `py-8` looks like.
   The vendored sheet has no build pipeline, so an arbitrary utility
   silently does nothing; `.auth-body` is the only rule padding this
   element. (Source order would still favour this file if they ever
   returned, since auth.css is linked after tailwind-main.css and `@media`
   adds no specificity — but that is a spare argument, not the mechanism,
   and it should not be reported as one.)

   `padding-block-start` and `padding-top` are the same computed longhand
   in a horizontal-tb writing mode, so the logical spelling costs nothing.

   KNOWN AND ACCEPTED: the control is `fixed`, so once the page SCROLLS it
   floats over card content. That is reachable-chrome behaviour, matching
   the site-wide sticky navbar, and it is a real effect — at 844x360 the
   browser auto-scrolls to the focused email input and the control then
   covers ~97px of the card. `absolute` would trade it for a control that
   scrolls off-screen exactly when the viewport is too short to show it,
   which is the worse failure. */
.auth-body {
    padding-block-start: calc(2rem + 48px);
}


/* R9 tap target. The shared widget's trigger is `min-height: 40px`, which
   is what the navbar and the mobile drawer render site-wide; this raises
   it to 44px ON THE DOOR ONLY. Scoped under `.auth-theme` deliberately —
   the navbar copy is not this change's to resize, and doing it globally
   would reflow chrome on every other page in the site. The popover
   options are already 44px (MEASURED 170.0x44.0), so only the trigger
   needed it. */
.auth-theme .kais-theme__trigger {
    min-height: 44px;
}