/* =============================================================================
   TOYOTA QUOTING PORTAL — AUTH SKIN
   Shared shell for every /Account page (Login, Register, ForgotPassword,
   ResetPassword, confirmations, lockout/invalid).
   Mobile-first single column; desktop split layout at 1024px.
   All classes are namespaced auth-* because this sheet is linked globally.
   Palette tokens come from app.css; type/motion tokens from toyota-redesign.css
   (loaded last — custom properties resolve at runtime regardless of order).
   Aesthetic: "Toyota precision" — charcoal brand panel with a motorsport-livery
   red diagonal, card-less form, engineered micro-labels, one easing curve.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   AUTH-LOCAL TOKENS
   The brand panel is ALWAYS deep charcoal (both themes hardcode --toyota-charcoal),
   so its on-dark copy needs its own legible palette rather than the app's
   light-on-light text tokens. These stay namespaced + local to the auth shell.
   --------------------------------------------------------------------------- */
.auth-shell {
    /* Brand-panel surface + livery */
    --auth-brand-bg: #141414;
    --auth-brand-bg-2: #1f1f1f;              /* subtle top-lit charcoal */
    --auth-brand-title: #ffffff;
    --auth-brand-tag: #c9cbce;               /* bright muted — AA on charcoal */
    --auth-brand-hair: rgba(255, 255, 255, 0.10);
    --auth-brand-livery: var(--toyota-red);
    --auth-brand-livery-2: var(--toyota-red-dark);
    --auth-brand-glow: rgba(var(--toyota-red-rgb), 0.55);
}

/* ---------------------------------------------------------------------------
   SHELL
   --------------------------------------------------------------------------- */
.auth-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--content-bg);
    font-family: var(--font-body);
}

/* ---------------------------------------------------------------------------
   BRAND PANEL — deep charcoal + bold red diagonal band (livery, not gradient)
   Mobile: compact header band with red hairline.
   Desktop (>=1024px): full-height left panel.
   --------------------------------------------------------------------------- */
.auth-brand {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 100% 0%, var(--auth-brand-bg-2) 0%, transparent 55%),
        var(--auth-brand-bg);
    border-bottom: 2px solid var(--toyota-red);
    padding: calc(var(--sp-4) + env(safe-area-inset-top))
             calc(var(--sp-4) + env(safe-area-inset-right))
             var(--sp-4)
             calc(var(--sp-4) + env(safe-area-inset-left));
}

/* Bold Toyota-red diagonal band — sharper, with a darker inner edge (livery, not flat) */
.auth-brand::before {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: -1;
    background: linear-gradient(115deg, var(--auth-brand-livery-2) 0%, var(--auth-brand-livery) 62%, var(--toyota-red-light) 100%);
    clip-path: polygon(72% 0, 88% 0, 58% 100%, 42% 100%);
    box-shadow: -14px 0 40px -8px var(--auth-brand-glow);
    pointer-events: none;
}

/* Parallel echo stripes for motorsport depth (thin white + thin charcoal split) */
.auth-brand::after {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: -1;
    background:
        linear-gradient(rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.10));
    clip-path: polygon(90% 0, 95% 0, 65% 100%, 60% 100%);
    pointer-events: none;
}

.auth-brand-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    animation: auth-rise var(--dur-slow) var(--ease) backwards;
}

.auth-brand-mark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: var(--radius-md);
    padding: 6px 8px;
    box-shadow: var(--elev-2), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.auth-brand-logo {
    display: block;
    width: 46px;
    height: auto;
}

.auth-brand-copy { min-width: 0; }

.auth-brand-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-lg);
    line-height: var(--leading-tight);
    letter-spacing: 0.005em;
    color: var(--auth-brand-title);
    margin: 0;
    text-wrap: balance;
}

.auth-brand-tag {
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    color: var(--auth-brand-tag);
    margin: 3px 0 0;
}

/* ---------------------------------------------------------------------------
   FORM PANEL — card-less form on content background
   --------------------------------------------------------------------------- */
.auth-main {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: var(--content-bg);
    padding: var(--sp-5)
             calc(var(--sp-4) + env(safe-area-inset-right))
             calc(var(--sp-7) + env(safe-area-inset-bottom))
             calc(var(--sp-4) + env(safe-area-inset-left));
}

.auth-panel {
    width: 100%;
    max-width: 420px;
    min-width: 0;
}

.auth-panel--wide { max-width: 760px; }

/* ---------------------------------------------------------------------------
   HEADINGS
   --------------------------------------------------------------------------- */
.auth-head { margin: var(--sp-2) 0 var(--sp-5); }

.auth-kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--toyota-red);
    margin-bottom: var(--sp-2);
}

/* Small red tick before the kicker — engineered accent */
.auth-kicker::before {
    content: '';
    width: 18px;
    height: 2px;
    border-radius: var(--radius-full);
    background: var(--toyota-red);
}

/* On dark, brand red (#eb0a1e) as small uppercase text is only ~3.8:1 on
   #1a1a1a — below AA for non-large text. The brighter red clears 4.5:1.
   Light theme keeps brand red (passes at 4.6:1 on white). */
html.theme-dark .auth-kicker { color: var(--toyota-red-light); }
html.theme-dark .auth-kicker::before { background: var(--toyota-red-light); }

.auth-heading {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 800;
    line-height: var(--leading-tight);
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin: 0 0 var(--sp-1);
    text-wrap: balance;
}

.auth-sub {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-normal);
    margin: 0;
}

/* ---------------------------------------------------------------------------
   FIELDS — micro-labels, 48px inputs (global red focus ring applies)
   --------------------------------------------------------------------------- */
.auth-field { margin-bottom: var(--sp-4); }

.auth-label {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-secondary);
    margin-bottom: var(--sp-2);
}

.auth-input {
    width: 100%;
    height: 48px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    color: var(--input-text);
    font-family: var(--font-body);
    font-size: max(16px, var(--text-base)); /* >=16px kills iOS zoom */
    transition: border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease),
                background-color var(--dur-fast) var(--ease);
}

.auth-input:hover:not(:focus) {
    border-color: var(--toyota-grey-light);
}

/* Explicit red focus ring (matches global, restated so auth is self-contained) */
.auth-input:focus,
.auth-input:focus-visible {
    border-color: var(--toyota-red);
    box-shadow: 0 0 0 3px rgba(var(--toyota-red-rgb), 0.14);
    outline: none;
}

/* app.css sets input::placeholder { color … !important }, so restate with
   !important to win — and darken the LIGHT-theme placeholder, which at the
   shared token value (#a6a8ab on #fafafa ≈ 2.3:1) was illegible. --toyota-grey
   lifts it to ~4.9:1 while still reading as placeholder; dark theme keeps its
   muted grey (already ~4.8:1 on the dark input). */
.auth-input::placeholder { color: var(--toyota-grey) !important; opacity: 1; }

html.theme-dark .auth-input::placeholder { color: var(--placeholder-color) !important; }

/* Password reveal toggle */
.auth-input-wrap { position: relative; }

.auth-input-wrap .auth-input { padding-right: 48px; }

.auth-eye {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    /* text-muted (#a6a8ab) was ~2.3:1 on the light input — below the 3:1 an
       interactive glyph needs. text-secondary is legible in BOTH themes
       (grey #58595b on light, silver on dark). */
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: color var(--dur-fast) var(--ease);
}

.auth-eye:hover, .auth-eye:focus-visible { color: var(--toyota-red); }

/* Remember-me row */
.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-3);
    margin: var(--sp-4) 0 var(--sp-5);
}

.auth-check {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.auth-check input[type='checkbox'] {
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 0;
    accent-color: var(--toyota-red);
    cursor: pointer;
}

.auth-check label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
}

/* ---------------------------------------------------------------------------
   ACTIONS — primary button (also usable as an anchor), ghost variant
   --------------------------------------------------------------------------- */
.auth-submit {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    background: var(--toyota-red);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(var(--toyota-red-rgb), 0.28);
    transition: background-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
}

/* Subtle diagonal sheen sweep echoing the brand livery */
.auth-submit::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.14) 50%, transparent 60%);
    transform: translateX(-120%);
    transition: transform var(--dur-slow) var(--ease);
    pointer-events: none;
}

.auth-submit:hover:not(:disabled) {
    background: var(--toyota-red-dark);
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(var(--toyota-red-rgb), 0.36);
    transform: translateY(-1px);
}

.auth-submit:hover:not(:disabled)::after { transform: translateX(120%); }

.auth-submit:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(var(--toyota-red-rgb), 0.30);
}

.auth-submit:focus-visible {
    outline: 2px solid var(--toyota-red);
    outline-offset: 3px;
}

.auth-submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.auth-submit--ghost {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--input-border);
    box-shadow: none;
}

.auth-submit--ghost::after { content: none; }

.auth-submit--ghost:hover:not(:disabled) {
    background: transparent;
    color: var(--toyota-red);
    border-color: var(--toyota-red);
    box-shadow: none;
    transform: translateY(-1px);
}

/* ---------------------------------------------------------------------------
   SECONDARY LINKS — understated grey, red on hover
   --------------------------------------------------------------------------- */
.auth-link {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    border-radius: 3px;
    transition: color var(--dur-fast) var(--ease);
}

.auth-link:hover, .auth-link:focus-visible { color: var(--toyota-red); }

.auth-foot {
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    border-top: 1px solid var(--border-light);
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
}

.auth-foot p { margin: 0; }

/* ---------------------------------------------------------------------------
   ALERTS + VALIDATION — red-tinted block with a red left rail
   (class goes straight onto ValidationSummary's <ul> as well)
   --------------------------------------------------------------------------- */
.auth-alert {
    display: block;
    background: var(--danger-light);
    border: 1px solid rgba(var(--toyota-red-rgb), 0.22);
    border-left: 3px solid var(--toyota-red);
    border-radius: var(--radius-sm);
    padding: var(--sp-3) var(--sp-4);
    margin: 0 0 var(--sp-4);
    color: var(--toyota-red-dark);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: var(--leading-normal);
    list-style: none;
}

.auth-alert:empty {
    display: none;
    padding: 0;
    margin: 0;
    border: 0;
}

ul.auth-alert li { list-style: none; margin: 0; }
ul.auth-alert li + li { margin-top: var(--sp-1); }

.auth-validation {
    display: block;
    color: var(--toyota-red-dark);
    font-size: var(--text-xs);
    font-weight: 600;
    margin-top: var(--sp-1);
}

/* On the dark theme the red-dark text on a translucent-red block is low
   contrast. --toyota-red-light (#ff1f33) was still only ~3.6:1 on the
   composited alert bg (rgba red @20% over #1a1a1a ≈ #482124) — below AA.
   A softer red tint clears AA on both the alert block (~6.1:1) and the bare
   form bg used by inline validation (~7.7:1). */
html.theme-dark .auth-alert,
html.theme-dark .auth-validation {
    color: #ff8a94;
}

/* ---------------------------------------------------------------------------
   REGISTER — two-column field grid + engineered section titles
   --------------------------------------------------------------------------- */
.auth-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--sp-6);
}

.auth-section-title {
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: var(--sp-4) 0 var(--sp-3);
}

.auth-section-title::before {
    content: '';
    width: 14px;
    height: 2px;
    border-radius: var(--radius-full);
    background: var(--toyota-red);
}

.auth-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-light);
}

/* ---------------------------------------------------------------------------
   STATUS / CONFIRMATION PAGES
   --------------------------------------------------------------------------- */
.auth-status { text-align: center; padding-top: var(--sp-4); }

.auth-status-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--sp-4);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    background: var(--toyota-silver);
    color: var(--toyota-charcoal);
    box-shadow: 0 0 0 8px var(--border-light);
}

.auth-status-icon--ok {
    background: var(--toyota-charcoal);
    color: #ffffff;
    box-shadow: 0 0 0 8px rgba(26, 26, 26, 0.08);
}

.auth-status-icon--error {
    background: var(--danger-light);
    color: var(--toyota-red);
    box-shadow: 0 0 0 8px rgba(var(--toyota-red-rgb), 0.08);
}

.auth-info {
    display: flex;
    gap: var(--sp-3);
    text-align: left;
    background: var(--body-bg);
    border: 1px solid var(--border-light);
    border-left: 3px solid var(--toyota-charcoal);
    border-radius: var(--radius-sm);
    padding: var(--sp-3) var(--sp-4);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    margin: var(--sp-5) 0 0;
}

.auth-info i, .auth-info svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    color: var(--toyota-charcoal);
}

html.theme-dark .auth-info,
html.theme-dark .auth-info i,
html.theme-dark .auth-info svg {
    border-left-color: var(--toyota-red);
    color: var(--text-secondary);
}

html.theme-dark .auth-info i, html.theme-dark .auth-info svg { color: var(--toyota-red-light); }

.auth-info p { margin: 0; }

.auth-actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
}

/* ---------------------------------------------------------------------------
   MOTION — staggered rise-in (global prefers-reduced-motion kill switch
   in toyota-redesign.css zeroes these out)
   --------------------------------------------------------------------------- */
@keyframes auth-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.auth-stagger > :not(form),
.auth-stagger > form > * {
    animation: auth-rise var(--dur-slow) var(--ease) backwards;
}

.auth-stagger > :nth-child(1) { animation-delay: 40ms; }
.auth-stagger > :nth-child(2) { animation-delay: 90ms; }
.auth-stagger > :nth-child(3) { animation-delay: 130ms; }
.auth-stagger > form > :nth-child(1) { animation-delay: 150ms; }
.auth-stagger > form > :nth-child(2) { animation-delay: 195ms; }
.auth-stagger > form > :nth-child(3) { animation-delay: 240ms; }
.auth-stagger > form > :nth-child(4) { animation-delay: 285ms; }
.auth-stagger > form > :nth-child(5) { animation-delay: 330ms; }
.auth-stagger > form > :nth-child(6) { animation-delay: 370ms; }
.auth-stagger > form > :nth-child(n+7) { animation-delay: 400ms; }

/* ---------------------------------------------------------------------------
   PHONE — <=767px : compact charcoal header, safe-area aware, >=16px inputs
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .auth-brand { padding-top: calc(var(--sp-3) + env(safe-area-inset-top)); padding-bottom: var(--sp-3); }
    .auth-brand::before { clip-path: polygon(70% 0, 84% 0, 56% 100%, 42% 100%); }
    .auth-brand-logo { width: 40px; }
    .auth-brand-title { font-size: var(--text-base); }
    .auth-brand-tag { display: none; } /* keep the mobile header band tight */
    .auth-main { padding-top: var(--sp-4); }
    .auth-head { margin-bottom: var(--sp-4); }
    .auth-heading { font-size: var(--text-xl); }
}

/* Ultra-narrow (360 and below) — never let anything push the viewport */
@media (max-width: 380px) {
    .auth-main {
        padding-left: calc(var(--sp-3) + env(safe-area-inset-left));
        padding-right: calc(var(--sp-3) + env(safe-area-inset-right));
    }
    .auth-brand {
        padding-left: calc(var(--sp-3) + env(safe-area-inset-left));
        padding-right: calc(var(--sp-3) + env(safe-area-inset-right));
    }
    .auth-row { gap: var(--sp-2); }
}

/* ---------------------------------------------------------------------------
   TABLET — two-column register grid a bit earlier
   --------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .auth-grid { grid-template-columns: 1fr 1fr; }
    .auth-main { padding: var(--sp-7) var(--sp-6); }
    .auth-brand::before { clip-path: polygon(72% 0, 86% 0, 58% 100%, 44% 100%); }
}

/* ---------------------------------------------------------------------------
   DESKTOP SPLIT — >=1024px
   --------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    .auth-shell { flex-direction: row; }

    .auth-brand {
        flex: 0 0 44%;
        max-width: 640px;
        min-height: 100dvh;
        display: flex;
        align-items: center;
        border-bottom: 0;
        border-right: 2px solid var(--toyota-red);
        padding: var(--sp-8) clamp(var(--sp-6), 5vw, var(--sp-8));
    }

    /* Steeper, bolder livery band on the tall panel */
    .auth-brand::before { clip-path: polygon(76% 0, 100% 0, 60% 100%, 38% 100%); }
    .auth-brand::after  { clip-path: polygon(68% 0, 74% 0, 32% 100%, 26% 100%); }

    .auth-brand-inner {
        display: block;
        max-width: 380px;
    }

    .auth-brand-mark {
        padding: 12px 14px;
        border-radius: var(--radius-lg);
        margin-bottom: var(--sp-6);
    }

    .auth-brand-logo { width: 84px; }

    .auth-brand-title {
        font-size: var(--text-3xl);
        margin-bottom: var(--sp-3);
    }

    .auth-brand-tag {
        display: block;
        font-size: var(--text-base);
        max-width: 34ch;
    }

    /* Hairline rule under the lockup for engineered depth */
    .auth-brand-copy::after {
        content: '';
        display: block;
        width: 56px;
        height: 3px;
        border-radius: var(--radius-full);
        background: var(--toyota-red);
        margin-top: var(--sp-5);
    }

    .auth-main {
        align-items: center;
        padding: var(--sp-8) var(--sp-7);
    }

    .auth-head { margin-top: 0; }

    .auth-grid { grid-template-columns: 1fr 1fr; }
}

/* Large desktop — >=1440px : give the form column a touch more air, cap the
   panel so it never drifts too far from the brand edge */
@media (min-width: 1440px) {
    .auth-brand { flex-basis: 42%; }
    .auth-main { padding: var(--sp-8) clamp(var(--sp-7), 6vw, calc(var(--sp-8) * 1.5)); }
    .auth-brand-inner { max-width: 420px; }
}

/* ---------------------------------------------------------------------------
   ACCESSIBILITY — belt-and-braces reduced-motion (global switch also applies)
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .auth-brand-inner,
    .auth-stagger > :not(form),
    .auth-stagger > form > * {
        animation: none !important;
    }
    .auth-submit::after { transition: none; }
}