/* ═══════════════════════════════════════════════════════════
   AUTH_UI — shared stylesheet (auth-rebuild)
   ───────────────────────────────────────────────────────────

   Single source of truth for the unified authentication UI.
   Replaces the two divergent copies of `.auth-*` CSS that were
   previously inlined in `auth.html` (page surface) and
   `index-full.html` (modal surface), so both surfaces render
   identically (Requirement 1.1).

   Consumed by:
     • Auth_Page   — full-page surface (auth.html)  → .auth-page
     • Auth_Modal  — overlay dialog (landing page)  → .auth-overlay
   Both host the same `.auth-card` content produced by mountAuthUI().

   Design tokens are inherited from assets/css/theme.css
   (--surface, --ink, --ink-2, --ink-3, --accent, --accent-2,
   --rule, --rule-2, --bg, --bg-2), which already flip for dark
   mode via prefers-color-scheme. This file only adds auth-local
   tokens where the theme value would not meet the WCAG 2.1 AA
   contrast floors:
     • text / meaningful labels ≥ 4.5:1   (Requirement 11.7)
     • interactive control boundaries ≥ 3:1 (Requirement 11.7)
   Status is never conveyed by color alone — every status kind
   carries a non-color glyph prefix (Requirement 11.8).
   ─────────────────────────────────────────────────────────── */

/* ── Auth-local tokens (contrast-controlled) ──────────────────
   Scoped to the auth surfaces so they don't leak into the host
   page. Surface/ink/accent come from theme.css; status, control
   border, and the primary-button fill are pinned here so they
   clear the contrast floors in BOTH light and dark themes. */
.auth-page,
.auth-overlay,
.auth-card {
    --auth-surface: var(--surface, #ffffff);
    --auth-ink: var(--ink, #0f1115);            /* primary text  — ≥ 4.5:1 */
    --auth-ink-soft: var(--ink-2, #4a4f5a);     /* secondary text — ≥ 4.5:1 */
    --auth-muted: var(--ink-3, #8e93a0);        /* placeholders / decorative only */
    --auth-accent: var(--accent, #4338ca);

    /* Filled primary button: fixed indigo so the white label keeps
       ≥ 4.5:1 regardless of the theme's lightened dark-mode accent. */
    --auth-btn-bg: #4f46e5;                      /* white-on-fill ≈ 5.9:1 */
    --auth-btn-bg-hover: #4338ca;                /* white-on-fill ≈ 8.0:1 */
    --auth-on-accent: #ffffff;

    /* "Sign in with email" disclosure: solid near-ink with a white label.
       White on #1f2430 ≈ 14:1 — far above the 4.5:1 text floor. */
    --auth-disclosure-bg: #1f2430;
    --auth-disclosure-bg-hover: #0f1115;
    --auth-disclosure-fg: #ffffff;

    /* Control boundary — perceivable outline ≥ 3:1 on the surface. */
    --auth-control-border: #6b7280;              /* on white ≈ 4.0:1 */

    /* Status text colors — each ≥ 4.5:1 on the light surface. */
    --auth-success: #047857;                     /* emerald-700 ≈ 4.7:1 */
    --auth-error: #b42318;                        /* red-700    ≈ 6.0:1 */
    --auth-validation: #92400e;                   /* amber-800  ≈ 7.0:1 */
    --auth-info: var(--ink-2, #4a4f5a);

    --auth-radius: 14px;
    --auth-radius-lg: 20px;
}

@media (prefers-color-scheme: dark) {
    .auth-page,
    .auth-overlay,
    .auth-card {
        /* Lighter status hues so text clears ≥ 4.5:1 on the dark surface. */
        --auth-success: #34d399;                 /* emerald-400 */
        --auth-error: #fca5a5;                    /* red-300     */
        --auth-validation: #fcd34d;               /* amber-300   */
        --auth-info: var(--ink-2, #a6acb8);

        /* Mid-gray boundary stays ≥ 3:1 against the dark surface. */
        --auth-control-border: #6e7280;

        /* In dark mode the near-ink fill would blend with the dark surface, so
           the disclosure button inverts to a light fill with dark text. */
        --auth-disclosure-bg: #e8eaef;           /* dark-on-fill ≈ 14:1 */
        --auth-disclosure-bg-hover: #ffffff;
        --auth-disclosure-fg: #0f1115;
    }
}

/* ════════════════════════════════════════════════════════════
   SURFACE A — Auth_Page (full-screen centered)
   ════════════════════════════════════════════════════════════ */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--bg, #f6f7f9);
    color: var(--auth-ink);
    -webkit-font-smoothing: antialiased;
}

/* ════════════════════════════════════════════════════════════
   SURFACE B — Auth_Modal (overlay dialog)
   ════════════════════════════════════════════════════════════ */
.auth-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.auth-overlay.open {
    opacity: 1;
    pointer-events: auto;
}
.auth-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

/* ════════════════════════════════════════════════════════════
   SHARED CARD — identical content in both surfaces
   ════════════════════════════════════════════════════════════ */
.auth-card {
    position: relative;
    width: 100%;
    max-width: 400px;
    background: var(--auth-surface);
    border: 1px solid var(--rule, #e2e5eb);
    border-radius: var(--auth-radius-lg);
    padding: 2.5rem 2.25rem 2rem;
    text-align: center;
    color: var(--auth-ink);
}

/* Page-surface entrance (subtle rise). */
.auth-page .auth-card {
    animation: auth-fade-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes auth-fade-up {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Modal-surface entrance (scale-in), driven by .open on the overlay. */
.auth-overlay .auth-card {
    margin: 1rem;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25);
    transform: scale(0.95) translateY(10px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.auth-overlay.open .auth-card {
    transform: scale(1) translateY(0);
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .auth-page .auth-card,
    .auth-overlay .auth-card {
        animation: none;
        transition: none;
        transform: none;
    }
}

/* ── Close control (modal only) ──────────────────────────────── */
.auth-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    background: none;
    border: 1px solid transparent;
    border-radius: 50%;
    color: var(--auth-ink-soft);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.auth-close:hover {
    background: var(--bg-2, #eef0f4);
    color: var(--auth-ink);
}

/* ── Brand + heading ─────────────────────────────────────────── */
.auth-logo {
    width: 56px;
    height: 56px;
    margin: 0 auto 1.25rem;
}
.auth-logo img,
.auth-logo svg {
    width: 100%;
    height: 100%;
    display: block;
}
.auth-title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 0.35rem;
    color: var(--auth-ink);
}
.auth-challenge-title {
    margin: 0 0 0.35rem;
    color: var(--auth-ink);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
}
.auth-sub {
    font-size: 0.9rem;
    color: var(--auth-ink-soft);
    margin: 0 0 1.6rem;
    line-height: 1.5;
}

/* ── Progressive-disclosure views ─────────────────────────────
   Two views live in the same card; the email view is collapsed via
   the `hidden` attribute until the disclosure button reveals it. */
.auth-view[hidden] {
    display: none;
}

/* ── Choices view: a tight, centered button stack ────────────── */
.auth-choice-stack {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* ── OAuth provider buttons (e.g. Google) ────────────────────── */
.auth-oauth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.82rem 1rem;
    font: 500 0.92rem/1 var(--sans, 'Inter', system-ui, sans-serif);
    color: var(--auth-ink);
    background: var(--auth-surface);
    border: 1.5px solid var(--auth-control-border);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.auth-oauth-btn:hover {
    background: var(--bg-2, #eef0f4);
}
.auth-oauth-btn:active {
    transform: scale(0.98);
}
.auth-oauth-btn svg,
.auth-oauth-btn img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ── "Sign in with email" disclosure — solid dark, white label ─ */
.auth-disclosure-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.82rem 1rem;
    font: 600 0.92rem/1 var(--sans, 'Inter', system-ui, sans-serif);
    color: var(--auth-disclosure-fg);
    background: var(--auth-disclosure-bg);
    border: 1.5px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.auth-disclosure-btn:hover {
    background: var(--auth-disclosure-bg-hover);
}
.auth-disclosure-btn:active {
    transform: scale(0.98);
}

/* ── "Other options" back affordance (email view) ────────────── */
.auth-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: flex-start;
    margin-bottom: 0.4rem;
    padding: 0.25rem 0;
    background: none;
    border: none;
    color: var(--auth-ink-soft);
    font: 500 0.85rem/1 var(--sans, 'Inter', system-ui, sans-serif);
    cursor: pointer;
    transition: color 0.15s;
}
.auth-back:hover {
    color: var(--auth-ink);
}
.auth-back-icon {
    font-size: 1rem;
    line-height: 1;
}

/* ── Divider ─────────────────────────────────────────────────── */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
    color: var(--auth-ink-soft);
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--rule, #e2e5eb);
}

/* ── Email / password form ───────────────────────────────────── */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-top: 0.5rem;
    text-align: left;
}
.auth-field-label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--auth-ink-soft);
}
.auth-input {
    width: 100%;
    padding: 0.82rem 0.95rem;
    font: 400 0.92rem/1.4 var(--sans, 'Inter', system-ui, sans-serif);
    color: var(--auth-ink);
    background: var(--bg, #f6f7f9);
    border: 1.5px solid var(--auth-control-border);
    border-radius: var(--auth-radius);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.auth-input::placeholder {
    color: var(--auth-muted);
}
.auth-input:focus,
.auth-input:focus-visible {
    border-color: var(--auth-accent);
    box-shadow: 0 0 0 3px var(--accent-soft, rgba(67, 56, 202, 0.18));
}

/* ── Buttons: primary (filled) + link/back (text) ────────────── */
.auth-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.85rem 1rem;
    font: 600 0.92rem/1 var(--sans, 'Inter', system-ui, sans-serif);
    color: var(--auth-on-accent);
    background: var(--auth-btn-bg);
    border: none;
    border-radius: var(--auth-radius);
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s, transform 0.1s;
}
.auth-btn-primary:hover {
    background: var(--auth-btn-bg-hover);
}
.auth-btn-primary:active {
    transform: scale(0.98);
}
.auth-btn-primary:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none;
}

/* ── Secondary action: subtle outlined "magic link" button ───── */
.auth-btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.8rem 1rem;
    font: 500 0.9rem/1 var(--sans, 'Inter', system-ui, sans-serif);
    color: var(--auth-ink);
    background: var(--auth-surface);
    border: 1.5px solid var(--auth-control-border);
    border-radius: var(--auth-radius);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.auth-btn-secondary:hover {
    background: var(--bg-2, #eef0f4);
}
.auth-btn-secondary:active {
    transform: scale(0.98);
}
.auth-btn-secondary:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none;
}

.auth-btn-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--auth-ink-soft);
    font-size: 0.85rem;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    align-self: flex-start;
    transition: color 0.15s;
}
.auth-btn-link:hover {
    color: var(--auth-ink);
}

/* ── Secondary affordances row (Create an account · Forgot password?) ──
   A centered flex row so the two link buttons stay distinct. A gap provides
   spacing and a left border on the second link draws a subtle pipe divider
   (a border, not a text glyph, so it never picks up the links' underline). */
.auth-form-affordances {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    margin-top: 0.5rem;
}
.auth-form-affordances .auth-btn-link {
    align-self: auto;
}
.auth-form-affordances .auth-btn-link:not(:first-child) {
    padding-left: 0.65rem;
    border-left: 1px solid var(--rule, #e2e5eb);
}
/* "← Other options" back link — first in the affordances row. Give the arrow a
   hair of trailing space and keep the glyph free of the link underline so it
   reads as a directional cue rather than underlined text. The link still uses
   .auth-btn-link, so the row spacing + pipe divider + focus-visible ring all
   apply unchanged. */
.auth-form-affordances .auth-btn-link[data-action="back"] .auth-back-icon {
    display: inline-block;
    margin-right: 0.3rem;
    text-decoration: none;
}

/* ════════════════════════════════════════════════════════════
   STATUS REGION — color + NON-COLOR indicator (Req 11.8)
   ────────────────────────────────────────────────────────────
   The renderer writes the message text into .auth-status and sets
   the kind via a modifier class. A distinct glyph prefix encodes
   the kind WITHOUT relying on color, so the meaning survives for
   users who cannot perceive the hue. The text itself lives in an
   aria-live region (wired in the renderer) for screen readers.
   ════════════════════════════════════════════════════════════ */
.auth-status {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.6rem;
    min-height: 1.2em;
    font-size: 0.82rem;
    line-height: 1.4;
    text-align: left;
    color: var(--auth-info);
}
/* Non-color glyph prefix, one per kind. */
.auth-status::before {
    flex-shrink: 0;
    font-weight: 700;
    line-height: 1.4;
}
/* Empty status: no glyph, collapse the leading gap. */
.auth-status:empty {
    gap: 0;
    margin-top: 0;
}
.auth-status:empty::before {
    content: '';
}

.auth-status.is-info {
    color: var(--auth-info);
}
.auth-status.is-info::before {
    content: 'ℹ';            /* information */
}

.auth-status.is-success {
    color: var(--auth-success);
}
.auth-status.is-success::before {
    content: '✓';            /* success */
}

.auth-status.is-error {
    color: var(--auth-error);
}
.auth-status.is-error::before {
    content: '✕';            /* failure */
}

.auth-status.is-validation {
    color: var(--auth-validation);
}
.auth-status.is-validation::before {
    content: '⚠';            /* needs attention */
}

/* ── Footer ──────────────────────────────────────────────────── */
.auth-footer {
    margin-top: 1.75rem;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--auth-ink-soft);
}
.auth-footer a,
.auth-footer .auth-btn-link {
    color: var(--auth-ink-soft);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.auth-footer a:hover,
.auth-footer .auth-btn-link:hover {
    color: var(--auth-ink);
}

/* ════════════════════════════════════════════════════════════
   FOCUS VISIBILITY — keyboard operability (Req 11.1, 11.7)
   A 2px accent ring on every interactive control; the ring color
   meets the ≥ 3:1 non-text contrast floor against the surface.
   ════════════════════════════════════════════════════════════ */
.auth-oauth-btn:focus-visible,
.auth-disclosure-btn:focus-visible,
.auth-btn-primary:focus-visible,
.auth-btn-secondary:focus-visible,
.auth-back:focus-visible,
.auth-btn-link:focus-visible,
.auth-close:focus-visible,
.auth-footer a:focus-visible {
    outline: 2px solid var(--auth-accent);
    outline-offset: 2px;
}
.auth-input:focus-visible {
    /* handled above via border-color + box-shadow ring */
    outline: none;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 440px) {
    .auth-card {
        padding: 2rem 1.5rem 1.75rem;
        border-radius: 16px;
        margin: 0.75rem;
    }
    .auth-title {
        font-size: 1.35rem;
    }
}