/* ==========================================================================
   Auth screens — sign in, password reset, and every allauth entrance page
   --------------------------------------------------------------------------
   Loaded by templates/layouts/auth_base.html, which every unauthenticated
   page extends. Namespace is .au-* / .aum-* (modals) and --au-* (tokens);
   nothing else in the project uses it.

   HOW THE TWO DESIGN SYSTEMS SHARE THIS FILE
   The screen declares a small set of NAMED SCREEN TOKENS (--au-*). This file
   assigns the CURRENT system's values, unscoped. static/css/rt-login.css
   assigns the RT values under body[data-ds="rt"]. No rule below ever asks
   which system is active, and no markup changes between them, so reverting
   the migration is a matter of dropping the rt-login.css link and the
   data-ds attribute.

   Approved mockup: docs/mockups/login_screen_design_comparison_v1.html
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Named screen tokens — CURRENT system
   -------------------------------------------------------------------------- */
:root {
    --au-page-bg: var(--color-background);
    --au-panel-bg: var(--color-dark-surface);          /* #27187E deep indigo */
    --au-panel-fg: #ffffff;
    --au-panel-fg-2: var(--color-text-branding-secondary);
    --au-panel-fg-3: var(--color-text-branding-muted);
    --au-panel-rule: transparent;                      /* no divider today */
    --au-panel-glow: 1;                                /* blurred blobs ON */
    --au-logo-bg: var(--color-primary);
    --au-logo-fg: #ffffff;
    --au-card-bg: var(--color-surface);                /* white on #F7F7FF */
    --au-card-border: transparent;
    --au-card-shadow: var(--shadow-md);
    --au-card-shadow-hover: var(--shadow-lg);
    --au-r-card: var(--radius-lg);                     /* 12px */
    --au-r-ctl: var(--radius-sm);                      /* 4px */
    --au-link: var(--color-link);
    --au-link-underline: none;
    --au-alert-fill: 1;                                /* tinted wash */
    --au-focus-inset: transparent;
    --au-brand-tracking: -0.01em;
    --au-meta-bg: var(--color-surface-secondary);
    --au-modal-hd-bg: linear-gradient(135deg, var(--color-accent-2-strong), var(--color-primary));
    --au-modal-hd-fg: #ffffff;
    /* Password-strength ramp: ordinal, never the accent, in either system. */
    --au-str-1: #dc2626;
    --au-str-2: #d97706;
    --au-str-3: #185fa5;
    --au-str-4: #0d7c3f;
}

/* --------------------------------------------------------------------------
   2. Layout
   -------------------------------------------------------------------------- */
body.au-body {
    min-height: 100vh;
    background: var(--au-page-bg);
    background-image: none;
}

.au-wrapper {
    display: flex;
    min-height: 100vh;
}

.au-panel {
    flex: 0 0 45%;
    background: var(--au-panel-bg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-12);
    position: relative;
    overflow: hidden;
    border-right: 1px solid var(--au-panel-rule);
}
/* The two blurred colour fields. Opacity is a token, so the RT layer removes
   them by setting --au-panel-glow to 0 rather than by re-declaring the rules.
   No will-change here: neither is animated, and the live screen's
   will-change:filter kept two compositor layers alive for the page's life. */
.au-panel::before,
.au-panel::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: var(--au-panel-glow);
    pointer-events: none;
}
.au-panel::before {
    top: -20%; right: -20%; width: 60%; height: 60%;
    background: var(--color-blur-primary);
}
.au-panel::after {
    bottom: -15%; left: -10%; width: 50%; height: 50%;
    background: var(--color-blur-accent);
}

.au-panel-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 420px;
    margin: auto 0;
}
.au-logo {
    width: 56px; height: 56px;
    background: var(--au-logo-bg);
    border-radius: var(--au-r-card);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto var(--space-8);
}
.au-logo svg { width: 28px; height: 28px; color: var(--au-logo-fg); }

/* The product name is the page's h1. It used to sit inside an aria-hidden
   container, which hid the only statement of what the user is signing in to
   from every screen reader. */
.au-title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    color: var(--au-panel-fg);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-4);
    text-wrap: balance;
    letter-spacing: var(--au-brand-tracking);
}
.au-tagline {
    font-size: var(--font-size-md);
    color: var(--au-panel-fg-2);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-12);
}
.au-desc {
    font-size: var(--font-size-body);
    color: var(--au-panel-fg-3);
    line-height: var(--line-height-relaxed);
    max-width: 340px;
    margin: 0 auto;
}
.au-panel-foot {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex; align-items: center; justify-content: center;
    gap: var(--space-4);
    font-size: var(--font-size-xs);
    color: var(--au-panel-fg-3);
    flex-wrap: wrap;
}
.au-panel-foot .au-inline { color: var(--au-panel-fg-2); }
.au-panel-foot .au-inline:hover { color: var(--au-panel-fg); }

.au-form-panel {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: var(--space-12) var(--space-6);
    background: var(--au-page-bg);
    position: relative;
}

/* Theme toggle, top-right of the form half. The app's toggle persists to the
   user's UserPreference; there is no user here, so this one persists to
   localStorage and the inline head script replays it before first paint. */

/* --------------------------------------------------------------------------
   3. Card
   -------------------------------------------------------------------------- */
.au-card {
    width: 100%;
    max-width: 420px;
    background: var(--au-card-bg);
    border: 1px solid var(--au-card-border);
    border-radius: var(--au-r-card);
    padding: var(--space-10) var(--space-8);
    box-shadow: var(--au-card-shadow);
    transition: box-shadow 300ms ease-out;
}
.au-card--wide { max-width: 480px; }
@media (hover: hover) and (pointer: fine) {
    .au-card:hover { box-shadow: var(--au-card-shadow-hover); }
}
.au-heading {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
    letter-spacing: -0.01em;
}
.au-subtext {
    font-size: var(--font-size-body);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-8);
}

/* --------------------------------------------------------------------------
   4. Alerts — ONE region, four tones.
   The old screen rendered `messages` and `form.errors` as two separate
   .form-errors blocks, so an SSO rejection landing with a form error stacked
   two identical red boxes. Everything now goes through one region.

   Current: tinted wash + matching border.
   RT: neutral surface + a 3px coloured left rule + a filled glyph, because
   coral and RT's danger sit ~9 degrees apart and this banner is 200px above
   the primary button.
   -------------------------------------------------------------------------- */
.au-alert {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    border-radius: var(--au-r-ctl);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-6);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    background: color-mix(in srgb, var(--au-a-bg) calc(var(--au-alert-fill) * 100%), var(--color-surface-secondary));
    border: 1px solid color-mix(in srgb, var(--au-a-border) calc(var(--au-alert-fill) * 100%), var(--color-border));
    border-left: 3px solid var(--au-a-key);
    color: var(--au-a-fg);
}
.au-alert-ico { width: 16px; height: 16px; margin-top: 1px; color: var(--au-a-key); flex: none; }
.au-alert-bd { flex: 1; min-width: 0; }
.au-alert-ttl { font-weight: var(--font-weight-semibold); margin-bottom: 2px; }
.au-alert ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.au-alert a,
.au-alert .au-inline { color: inherit; }
.au-alert--error { --au-a-bg: var(--color-error-bg);   --au-a-border: var(--color-error-border);   --au-a-key: var(--color-error);   --au-a-fg: var(--color-error-text); }
.au-alert--warn  { --au-a-bg: var(--color-warning-bg); --au-a-border: var(--color-warning-border); --au-a-key: var(--color-warning); --au-a-fg: var(--color-warning-text); }
.au-alert--ok    { --au-a-bg: var(--color-success-bg); --au-a-border: var(--color-success-border); --au-a-key: var(--color-success); --au-a-fg: var(--color-success); }
.au-alert--info  { --au-a-bg: var(--color-info-bg);    --au-a-border: var(--color-info-border);    --au-a-key: var(--color-info);    --au-a-fg: var(--color-info); }

/* --------------------------------------------------------------------------
   5. Fields
   -------------------------------------------------------------------------- */
.au-group { margin-bottom: var(--space-5); }
.au-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin-bottom: 6px;
}
.au-label-note {
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
}
.au-input-wrap { position: relative; }
.au-input { border-radius: var(--au-r-ctl); }
.au-input--password { padding-right: 52px; }
.au-input[aria-invalid="true"] { border-color: var(--color-error); }
.au-input[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 30%, transparent);
}
.au-field-err {
    display: flex; align-items: center; gap: 6px;
    margin-top: 6px;
    font-size: var(--font-size-xs);
    color: var(--color-error-text);
    font-weight: var(--font-weight-medium);
}
.au-field-err svg { width: 13px; height: 13px; color: var(--color-error); flex: none; }
.au-hint {
    margin-top: 6px;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    line-height: var(--line-height-normal);
}
.au-caps {
    display: flex; align-items: center; gap: 6px;
    margin-top: 6px;
    font-size: var(--font-size-xs);
    color: var(--color-warning-text);
    font-weight: var(--font-weight-medium);
}
.au-caps svg { width: 13px; height: 13px; color: var(--color-warning); flex: none; }
.au-caps[hidden] { display: none; }

.au-pw-toggle {
    position: absolute;
    right: 4px; top: 50%;
    transform: translateY(-50%);
    background: none; border: none;
    cursor: pointer;
    color: var(--color-text-secondary);
    display: flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px;
    border-radius: var(--au-r-ctl);
    transition: color var(--transition-fast), transform 100ms var(--ease-out-strong);
}
@media (hover: hover) and (pointer: fine) {
    .au-pw-toggle:hover { color: var(--color-text-primary); }
}
.au-pw-toggle:active { transform: translateY(-50%) scale(0.9); }
.au-pw-toggle:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.au-pw-toggle svg { width: 18px; height: 18px; }
.au-pw-toggle .au-icon-off { display: none; }
.au-pw-toggle[aria-pressed="true"] .au-icon-off { display: block; }
.au-pw-toggle[aria-pressed="true"] .au-icon-on { display: none; }

.au-row {
    margin-bottom: var(--space-6);
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.au-check {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    min-height: 44px;
    margin: 0;
    font-weight: var(--font-weight-regular);
}
.au-check input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--color-primary);
    cursor: pointer;
}
.au-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.au-btn {
    width: 100%;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 10px;
    padding: 13px var(--space-6);
    border-radius: var(--au-r-ctl);
    font-family: var(--font-family);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 200ms var(--ease-out-strong),
                transform 160ms var(--ease-out-strong),
                border-color 200ms var(--ease-out-strong);
}
/* main.css has no `.btn svg` rule at all, so an icon carrying only a viewBox
   falls back to the 300x150 replaced-element default. Size it here. */
.au-btn svg { width: 18px; height: 18px; flex: none; }
.au-btn--primary { background: var(--color-primary); color: #ffffff; border-color: var(--color-primary); }
@media (hover: hover) and (pointer: fine) {
    .au-btn--primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
}
.au-btn--primary:active { background: var(--color-primary-active); transform: scale(0.97); }
/* The inner ring is what makes the focus state visible on RT, where a coral
   ring sits on a coral fill. --au-focus-inset is transparent in the current
   system, so this one rule serves both. */
.au-btn--primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--au-focus-inset), var(--shadow-focus);
}
.au-btn--secondary {
    background: var(--au-card-bg);
    color: var(--color-text-primary);
    border-color: var(--color-border-strong);
}
@media (hover: hover) and (pointer: fine) {
    .au-btn--secondary:hover { background: var(--color-surface-secondary); }
}
.au-btn--secondary:active { transform: scale(0.97); }
.au-btn--secondary:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.au-btn--ghost {
    background: transparent;
    color: var(--color-text-secondary);
    border-color: transparent;
    font-weight: var(--font-weight-medium);
}
@media (hover: hover) and (pointer: fine) {
    .au-btn--ghost:hover { background: var(--color-surface-secondary); color: var(--color-text-primary); }
}
.au-btn--ghost:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.au-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.au-btn--auto { width: auto; min-width: 120px; }

.au-spin {
    width: 15px; height: 15px;
    border-radius: 50%;
    flex: none;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    animation: auSpin 0.7s linear infinite;
}
@keyframes auSpin { to { transform: rotate(360deg); } }

/* Inline links inside a sentence. They cannot take a 40px floor without
   breaking the line box, so they take vertical padding to clear WCAG 2.5.8's
   24px minimum instead, with a negative margin so the sentence does not move. */
.au-inline {
    font: inherit;
    font-size: inherit;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--au-link);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: var(--font-weight-medium);
    padding: 7px 2px;
    margin: -7px 0;
}
.au-inline:hover { color: var(--color-link-hover); }
.au-inline:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: 2px; }

.au-forgot {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    background: none; border: none;
    cursor: pointer;
    font-family: inherit;
    color: var(--au-link);
    text-decoration: var(--au-link-underline);
    text-underline-offset: 2px;
    padding: 0;
}
.au-forgot:hover { color: var(--color-link-hover); text-decoration: underline; }
.au-forgot:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: 2px; }

/* SSO. Google's four brand hexes are fixed by their brand terms and are the
   one foreign palette permitted on an RT screen. */
.au-divider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) 0; }
.au-divider::before,
.au-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }
.au-divider span { font-size: var(--font-size-xs); color: var(--color-text-secondary); letter-spacing: 0.05em; }
.au-sso-note {
    margin-top: var(--space-3);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-align: center;
}
.au-breakglass {
    margin-top: var(--space-5);
    text-align: center;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.au-card-foot {
    margin-top: var(--space-8);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}
.au-card-foot button {
    font: inherit;
    font-size: var(--font-size-xs);
    background: none; border: none;
    cursor: pointer;
    color: var(--au-link);
    text-decoration: var(--au-link-underline);
    text-underline-offset: 2px;
    min-height: 32px;
    padding: 0 2px;
}
.au-card-foot button:hover { text-decoration: underline; }
.au-card-foot button:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: 2px; }
/* 11px on --color-text-secondary, not 10px on --color-text-muted: the muted
   token measures 3.8:1 at that size in BOTH systems and misses AA. */
.au-build {
    font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: var(--fs-11, 11px);
    letter-spacing: 0.02em;
    color: var(--color-text-secondary);
}

.au-back {
    display: inline-flex; align-items: center; gap: 7px;
    margin-top: var(--space-6);
    font-size: var(--font-size-sm);
    min-height: 40px;
}
.au-back svg { width: 15px; height: 15px; flex: none; }

/* Body copy on the allauth entrance pages, rendered through the p element. */
.au-copy {
    font-size: var(--font-size-body);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-5);
}
.au-copy:last-of-type { margin-bottom: var(--space-6); }
.au-copy a { color: var(--au-link); text-decoration: underline; text-underline-offset: 2px; }

/* allauth stacks its actions in a button_group. Two auto-width buttons in a
   row clipped their labels at 390px, and a clipped label is invisible to
   every box-overflow check -- the button is the right size, only the text is
   cut. Stacking full-width sidesteps it in both systems. */
.au-actions { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }
/* A hint following the form is a separate thought, not a caption on the
   button. At the 6px .au-hint default it read as part of the action. */
form + .au-hint { margin-top: var(--space-5); }
.au-actions:empty { display: none; }
.au-actions .au-btn { width: 100%; }

/* Password strength — an ordinal ramp, never the accent, in either system. */
.au-strength { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.au-strength-bar { display: flex; gap: 4px; }
.au-strength-bar i { flex: 1; height: 4px; border-radius: 2px; background: var(--color-surface-muted); }
.au-strength[data-level="1"] .au-strength-bar i:nth-child(-n+1) { background: var(--au-str-1); }
.au-strength[data-level="2"] .au-strength-bar i:nth-child(-n+2) { background: var(--au-str-2); }
.au-strength[data-level="3"] .au-strength-bar i:nth-child(-n+3) { background: var(--au-str-3); }
.au-strength[data-level="4"] .au-strength-bar i { background: var(--au-str-4); }
.au-strength-lbl { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.au-strength-lbl b { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }

.au-rules { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.au-rules li {
    display: flex; gap: 9px; align-items: flex-start;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-normal);
}
.au-rules svg { width: 15px; height: 15px; margin-top: 2px; flex: none; color: var(--color-text-muted); }
.au-rules li[data-met="true"] svg { color: var(--color-success); }
.au-rules li[data-met="true"] { color: var(--color-text-primary); }

/* --------------------------------------------------------------------------
   7. Modals  .aum-*
   The login screen had none. These are the help, terms, privacy and SSO
   explainer dialogs, plus the confirmation panels the reset flow uses.
   -------------------------------------------------------------------------- */
.aum-scrim {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-6);
    background: rgba(15, 15, 20, 0.55);
    overflow-y: auto;
}
.aum-scrim[hidden] { display: none; }

.aum {
    width: 100%;
    max-width: 440px;
    background: var(--au-card-bg);
    border: 1px solid var(--au-card-border);
    border-radius: var(--au-r-card);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    margin: auto;
}
.aum--wide { max-width: 520px; }
.aum-hd {
    display: flex; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border);
    background: var(--au-modal-hd-bg);
}
.aum-hd h2 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--au-modal-hd-fg);
    letter-spacing: -0.01em;
    line-height: var(--line-height-snug);
}
/* 72% measured by hand: a background-COLOR walker reads this as the card
   colour because the current system's header is a gradient, i.e. a
   background-IMAGE. 72% white over the gradient midpoint #2C1E80 is 8.4:1;
   under RT the header is flat and 72% of #0d0d0d on white is 9.0:1. */
.aum-hd p {
    font-size: var(--font-size-sm);
    color: color-mix(in srgb, var(--au-modal-hd-fg) 72%, transparent);
    margin-top: 3px;
    line-height: var(--line-height-normal);
}
.aum-hd-bd { flex: 1; min-width: 0; }
.aum-hd-ico {
    width: 36px; height: 36px;
    border-radius: var(--au-r-ctl);
    display: flex; align-items: center; justify-content: center;
    flex: none;
    background: color-mix(in srgb, var(--au-modal-hd-fg) 14%, transparent);
    color: var(--au-modal-hd-fg);
}
.aum-hd-ico svg { width: 18px; height: 18px; }
.aum-x {
    width: 36px; height: 36px;
    min-width: 36px; min-height: 36px;
    border-radius: var(--au-r-ctl);
    flex: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    background: transparent;
    border: none;
    color: color-mix(in srgb, var(--au-modal-hd-fg) 78%, transparent);
}
.aum-x:hover { background: color-mix(in srgb, var(--au-modal-hd-fg) 14%, transparent); }
.aum-x:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.aum-x svg { width: 16px; height: 16px; }
.aum-bd { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.aum-bd p { font-size: var(--font-size-body); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); }
.aum-bd p strong { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.aum-ft {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border);
    background: var(--au-meta-bg);
    display: flex; gap: var(--space-3); justify-content: flex-end;
    flex-wrap: wrap;
}
.aum-ft .au-btn { width: auto; min-width: 110px; font-size: var(--font-size-body); padding: 11px var(--space-5); }

.aum-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.aum-list li {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-normal);
}
.aum-list svg { width: 15px; height: 15px; margin-top: 2px; flex: none; }
.aum-list .ok { color: var(--color-success); }
.aum-list .no { color: var(--color-error); }
.aum-list .neutral { color: var(--color-text-muted); }

.aum-meta {
    background: var(--au-meta-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--au-r-ctl);
    padding: var(--space-3) var(--space-4);
    display: flex; flex-direction: column; gap: 8px;
}
.aum-meta-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); font-size: var(--font-size-sm); }
/* --color-text-secondary, not --color-text-muted: muted at 13px measures
   4.37-4.49:1 light and 3.67:1 in RT dark, and misses AA in both. */
.aum-meta-k { color: var(--color-text-secondary); }
.aum-meta-v { color: var(--color-text-primary); font-weight: var(--font-weight-medium); text-align: right; word-break: break-word; }
.aum-mono { font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: var(--fs-12, 12px); }

.aum-mark {
    width: 52px; height: 52px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto var(--space-2);
    background: var(--aum-m-bg);
    color: var(--aum-m-fg);
}
.aum-mark svg { width: 24px; height: 24px; }
.aum-mark--ok   { --aum-m-bg: var(--color-success-bg); --aum-m-fg: var(--color-success); }
.aum-mark--err  { --aum-m-bg: var(--color-error-bg);   --aum-m-fg: var(--color-error); }
.aum-mark--warn { --aum-m-bg: var(--color-warning-bg); --aum-m-fg: var(--color-warning); }
.aum-mark--info { --aum-m-bg: var(--color-info-bg);    --aum-m-fg: var(--color-info); }
.aum-center { text-align: center; }
.aum-center p { text-align: center; }

/* --------------------------------------------------------------------------
   8. Tablet band, 841-1024.
   The old screen had ONE breakpoint at 840, so this whole band ran a 45%
   panel against a 420px card and the 28px title broke badly.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) and (min-width: 841px) {
    .au-panel { flex: 0 0 38%; padding: var(--space-8); }
    .au-title { font-size: var(--font-size-xl); }
    .au-tagline { margin-bottom: var(--space-8); }
    .au-desc { display: none; }
    .au-form-panel { padding: var(--space-8) var(--space-5); }
    .au-card { padding: var(--space-8) var(--space-6); }
}

/* --------------------------------------------------------------------------
   9. Mobile, 840 and below
   -------------------------------------------------------------------------- */
@media (max-width: 840px) {
    .au-wrapper { flex-direction: column; }
    .au-panel {
        flex: none;
        padding: var(--space-8) var(--space-6) var(--space-6);
        min-height: auto;
        border-right: none;
        border-bottom: 1px solid var(--au-panel-rule);
    }
    .au-panel::before,
    .au-panel::after { display: none; }
    .au-panel-content { margin: 0; }
    .au-desc { display: none; }
    .au-tagline { margin-bottom: 0; }
    .au-title { font-size: var(--font-size-xl); }
    .au-logo { width: 44px; height: 44px; margin-bottom: var(--space-5); }
    .au-logo svg { width: 22px; height: 22px; }
    .au-panel-foot { display: none; }
    .au-form-panel {
        padding: var(--space-8) var(--space-5) var(--space-10);
        justify-content: flex-start;
        flex: 1;
    }
    .au-card { padding: var(--space-8) var(--space-6); box-shadow: none; border-color: var(--color-border); }
    .aum-scrim { padding: 0; align-items: flex-end; }
    .aum {
        max-width: 100%;
        border-radius: var(--au-r-card) var(--au-r-card) 0 0;
        border-bottom: none;
        margin: 0;
    }
    .aum-ft { flex-direction: column-reverse; }
    .aum-ft .au-btn { width: 100%; }
}

/* Touch-target floor below 900px. Named explicitly because each of these
   sits outside the card and has been missed at least once on a prior screen. */
@media (max-width: 900px) {
    .au-btn { min-height: 44px; padding: 12px var(--space-5); }
    .au-pw-toggle { min-width: 44px; min-height: 44px; }
    .au-forgot,
    .au-check { min-height: 44px; }
    .au-card-foot button { min-height: 40px; }
    .aum-x { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
}

@media (max-width: 400px) {
    .au-form-panel { padding: var(--space-6) var(--space-4) var(--space-8); }
    .au-card { padding: var(--space-6) var(--space-4); }
    .au-panel { padding: var(--space-6) var(--space-4) var(--space-5); }
    .au-title { font-size: var(--font-size-lg); }
    .aum-bd, .aum-hd, .aum-ft { padding-left: var(--space-4); padding-right: var(--space-4); }
    .au-row { gap: var(--space-2); }
}

/* --------------------------------------------------------------------------
   10. Motion, print, no-JS
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .au-card { animation: auCard 420ms var(--ease-out-strong) both; }
    .au-alert { animation: auAlert 240ms var(--ease-out-strong) both; }
    .aum { animation: auModal 220ms var(--ease-out-strong) both; }
}
@keyframes auCard  { from { opacity: 0; transform: translateY(8px); }  to { opacity: 1; transform: none; } }
@keyframes auAlert { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes auModal { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .au-card, .au-alert, .aum, .au-spin { animation: none; }
.au-btn,
.au-pw-toggle { transition: none; }
}

@media print {
.au-panel,
.aum-scrim { display: none; }
    .au-card { box-shadow: none; border: 1px solid #999; max-width: none; }
    .au-btn { display: none; }
}

/* The password toggle and the caps-lock hint are JS-only, so they are removed
   rather than left as dead controls. The form itself still posts. */
.au-nojs .au-pw-toggle,
.au-nojs .au-caps { display: none; }
.au-nojs .au-input--password { padding-right: 12px; }