/* ============================================================================
   Customer account pages (sign in / create account / my account).
   Public site — rendered inside public_website/base.html #root, below the sticky
   nav. Mobile-first: base rules target < 768px; min-width layers desktop.
   Reuses precision-yard tokens (--pub-py-*) + base.html nav cyan (--nav-cyan).
   ========================================================================== */

.ca-page {
    max-width: 480px;
    margin: 0 auto;
    padding: 28px 16px 56px;
    font-family: var(--pub-py-font-body, 'DM Sans', sans-serif);
    color: #1e293b;
}
.ca-page--wide { max-width: 768px; }

/* ── Card ─────────────────────────────────────────────────────────────── */
.ca-card {
    background: var(--pub-py-card, #ffffff);
    border: 1px solid var(--pub-py-border, #e2e8f0);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    padding: 26px 20px;
}
.ca-card--flush { padding: 4px 18px; }

.ca-title {
    font-family: var(--pub-py-font-display, 'Barlow Condensed', sans-serif);
    font-weight: 700;
    font-size: 26px;
    margin: 0 0 4px;
    color: #1a1a2e;
}
.ca-sub { margin: 0 0 18px; color: #475569; font-size: 14px; line-height: 1.5; }

.ca-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    margin-bottom: 14px;
}

/* ── Forms ────────────────────────────────────────────────────────────── */
.ca-form { display: flex; flex-direction: column; gap: 6px; }
.ca-form-grid { display: flex; flex-direction: column; gap: 6px; }
.ca-form-group { display: flex; flex-direction: column; gap: 6px; }
.ca-label { font-size: 13px; font-weight: 600; color: #1e293b; margin-top: 10px; }
/* First field needs no extra top gap (login's labels are direct form children;
   signup groups via .ca-form-group, so this selector doesn't touch it). */
.ca-form > .ca-label:first-child { margin-top: 0; }
.ca-input {
    font: inherit;
    padding: 12px 14px;
    min-height: 46px;
    border: 1px solid var(--pub-py-border, #e2e8f0);
    border-radius: 10px;
    background: #fff;
    color: #1e293b;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.ca-input:focus {
    outline: none;
    border-color: var(--nav-cyan, #67cae1);
    box-shadow: 0 0 0 3px rgba(103, 202, 225, 0.22);
}
.ca-input--error {
    border-color: #dc2626;
}
.ca-input--error:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}
/* Keep browser-autofilled fields on the card's white background (the UA pale-blue
   fill clashes with the card + cyan focus ring). */
.ca-input:-webkit-autofill,
.ca-input:-webkit-autofill:hover {
    -webkit-text-fill-color: #1e293b;
    caret-color: #1e293b;
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    box-shadow: 0 0 0 1000px #fff inset;
    transition: background-color 9999s ease-out 0s;
}
/* On focus, layer the white fill under the cyan ring so focus stays visible. */
.ca-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fff inset, 0 0 0 3px rgba(103, 202, 225, 0.22);
    box-shadow: 0 0 0 1000px #fff inset, 0 0 0 3px rgba(103, 202, 225, 0.22);
}

/* Password field with an inline show/hide toggle */
.ca-input-wrap { position: relative; display: flex; align-items: stretch; }
.ca-input--pw { flex: 1; padding-right: 68px; }
.ca-pw-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0 10px;
    border: none;
    background: transparent;
    color: var(--pub-py-accent, #0e7490);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 6px;
}
.ca-pw-toggle:hover { background: rgba(103, 202, 225, 0.12); }
.ca-pw-toggle:focus-visible { outline: 2px solid var(--nav-cyan, #67cae1); outline-offset: 1px; }

/* Field-level hint + error text */
.ca-hint { margin: 6px 0 0; font-size: 12px; color: #475569; }
.ca-field-error { margin: 6px 0 0; font-size: 12px; font-weight: 600; color: #dc2626; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.ca-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: inherit;
    font-weight: 700;
    border-radius: 10px;
    border: 1px solid transparent;
    padding: 12px 18px;
    min-height: 46px;
    cursor: pointer;
    transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.ca-btn-block { width: 100%; }
.ca-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.ca-btn:focus-visible { outline: 2px solid var(--nav-cyan, #67cae1); outline-offset: 2px; }
/* Primary = action teal (deeper than the cyan brand accent) with a resting
   shadow so the CTA clearly outranks the surrounding chrome. */
.ca-btn-primary {
    background: #0e7490;
    color: #fff;
    box-shadow: 0 2px 8px rgba(14, 116, 144, 0.24);
}
.ca-btn-primary:hover:not(:disabled) {
    background: #0b5f76;
    box-shadow: 0 4px 16px rgba(14, 116, 144, 0.30);
    transform: translateY(-1px);
}
.ca-btn-secondary { background: #fff; color: #1e293b; border-color: var(--pub-py-border, #e2e8f0); }
.ca-btn-secondary:hover:not(:disabled) { border-color: #1a1a2e; }

.ca-form .ca-btn { margin-top: 18px; }

.ca-alt { margin: 16px 0 0; text-align: center; font-size: 14px; color: #475569; }
.ca-alt a { color: #0e7490; font-weight: 600; text-decoration: none; }
.ca-alt a:hover { text-decoration: underline; }

/* Signup consent microcopy (plain text for now; links wired when Terms/Privacy pages exist). */
.ca-legal { margin: 14px 0 0; text-align: center; font-size: 12px; line-height: 1.5; color: #475569; }

/* ── Account (profile) view ───────────────────────────────────────────── */
.ca-page-head { margin-bottom: 18px; }
.ca-page-title {
    font-family: var(--pub-py-font-display, 'Barlow Condensed', sans-serif);
    font-weight: 700;
    font-size: 30px;
    margin: 0 0 4px;
    color: #1a1a2e;
}
.ca-page-sub { margin: 0; color: #64748b; font-size: 15px; }

.ca-field-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--pub-py-border, #e2e8f0);
}
.ca-field-row:last-child { border-bottom: none; }
.ca-field-label { color: #64748b; font-size: 14px; }
.ca-field-value { font-weight: 600; text-align: right; }

.ca-note { margin: 18px 0; font-size: 14px; color: #64748b; font-style: italic; }
.ca-redirect { padding: 40px 0; text-align: center; color: #64748b; }

/* ============================================================================
   Account identity hub (signed-in /account/ — CustomerAccountPage).
   Navy masthead echoes the login/signup brand panel (.ca-auth__brand); quick-
   action tiles + read-only profile card sit below it on the page background.
   Spacing follows an 8px rhythm; touch targets stay >= 44px with >= 12px gaps.
   ========================================================================== */
.ca-acct {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-bottom: 8px;
}

/* ── Identity masthead (navy, textured — mirrors .ca-auth__brand) ────────── */
.ca-acct-masthead {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 20px 18px;
    border-radius: 16px;
    color: #ffffff;
    background-color: var(--pub-py-masthead-bg, #1A1A2E);
    background-image: var(--pub-py-masthead-diagonal-texture,
        repeating-linear-gradient(135deg, transparent, transparent 48px,
            rgba(255, 255, 255, 0.013) 48px, rgba(255, 255, 255, 0.013) 49px));
    border: 1px solid var(--pub-py-masthead-rule-fade, rgba(103, 202, 225, 0.18));
    box-shadow: var(--pub-py-shadow-card,
        0 1px 2px rgba(26, 26, 46, 0.05), 0 4px 18px rgba(26, 26, 46, 0.06));
}

/* Avatar + name block — stays on one row even when logout drops below. */
.ca-acct-masthead-main {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
/* Soft cyan glow anchored to the panel — pure decoration */
.ca-acct-masthead::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -60%;
    left: 12%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(103, 202, 225, 0.16), transparent 70%);
    pointer-events: none;
}

.ca-acct-avatar {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    font-family: var(--pub-py-font-display, 'Barlow Condensed', sans-serif);
    font-weight: 700;
    font-size: 26px;
    line-height: 1;
    letter-spacing: 0.02em;
    color: #1a1a2e;
    background: var(--nav-cyan, #67cae1);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.30);
}

.ca-acct-identity { flex: 1 1 200px; min-width: 0; }
.ca-acct-name {
    margin: 0;
    font-family: var(--pub-py-font-display, 'Barlow Condensed', sans-serif);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.05;
    color: #ffffff;
    overflow-wrap: break-word;
}
.ca-acct-email {
    margin: 3px 0 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.72);
    overflow-wrap: break-word;
}
.ca-acct-since {
    display: inline-block;
    margin-top: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--nav-cyan, #67cae1);
    background: rgba(103, 202, 225, 0.12);
    border: 1px solid var(--pub-py-masthead-rule-fade, rgba(103, 202, 225, 0.18));
}

/* On-dark log out — full-width on mobile for an easy tap target. */
.ca-btn.ca-acct-logout {
    flex-shrink: 0;
    align-self: stretch;
    background: transparent;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.28);
    padding: 10px 16px;
    min-height: 44px;
}
.ca-btn.ca-acct-logout:hover:not(:disabled) {
    border-color: var(--nav-cyan, #67cae1);
    color: var(--nav-cyan, #67cae1);
    background: rgba(103, 202, 225, 0.10);
}
.ca-btn.ca-acct-logout:focus-visible {
    outline: 2px solid var(--nav-cyan, #67cae1);
    outline-offset: 2px;
}

/* ── Section headings (Quick actions / Profile) ─────────────────────────── */
.ca-acct-section-head {
    margin: 0 0 14px;
    font-family: var(--pub-py-font-display, 'Barlow Condensed', sans-serif);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pub-py-secondary, #64748b);
}

.ca-acct-actions {
    display: flex;
    flex-direction: column;
}

/* ── Quick-action grid + tiles ──────────────────────────────────────────── */
.ca-acct-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: stretch;
}
.ca-acct-tile {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-height: 80px;
    height: 100%;
    padding: 16px;
    text-decoration: none;
    color: inherit;
    background: var(--pub-py-card, #ffffff);
    border: 1px solid var(--pub-py-border, #e2e8f0);
    border-radius: 14px;
    box-shadow: var(--pub-py-shadow-card,
        0 1px 2px rgba(26, 26, 46, 0.05), 0 4px 18px rgba(26, 26, 46, 0.06));
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
a.ca-acct-tile,
button.ca-acct-tile { cursor: pointer; }
a.ca-acct-tile:hover,
button.ca-acct-tile:hover {
    border-color: var(--nav-cyan, #67cae1);
    box-shadow: var(--pub-py-shadow-hover,
        0 8px 32px rgba(26, 26, 46, 0.11), 0 2px 8px rgba(26, 26, 46, 0.05));
    transform: translateY(-2px);
}
a.ca-acct-tile:focus-visible,
button.ca-acct-tile:focus-visible {
    outline: 2px solid var(--nav-cyan, #67cae1);
    outline-offset: 2px;
}
.ca-acct-tile--soon { background: #fbfcfe; }

/* An action tile opens the assistant instead of navigating, so it is a <button>.
   These reset the UA button defaults that would otherwise fight the tile layout;
   everything else (background, border, radius, padding, flex) comes from
   .ca-acct-tile itself. */
.ca-acct-tile--action {
    width: 100%;
    text-align: left;
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.ca-acct-tile-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-top: 1px;
    border-radius: 12px;
    color: var(--pub-py-amber-600, #42b4d6);
    background: rgba(103, 202, 225, 0.12);
}
.ca-acct-tile-icon svg { width: 22px; height: 22px; }
.ca-acct-tile--soon .ca-acct-tile-icon {
    color: var(--pub-py-muted, #94a3b8);
    background: var(--pub-py-chip-bg, #f1f5f9);
}

.ca-acct-tile-text { flex: 1; min-width: 0; }
.ca-acct-tile-title {
    display: block;
    font-weight: 700;
    font-size: 15px;
    color: #1a1a2e;
}
.ca-acct-tile--soon .ca-acct-tile-title { color: var(--pub-py-slate-700, #334155); }
.ca-acct-tile-desc {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.45;
    color: #475569;
}

.ca-acct-tile-go {
    flex-shrink: 0;
    align-self: center;
    display: inline-flex;
    margin-top: 2px;
    color: var(--pub-py-muted, #94a3b8);
    transition: transform 0.18s ease, color 0.18s ease;
}
.ca-acct-tile-go svg { width: 20px; height: 20px; }
a.ca-acct-tile:hover .ca-acct-tile-go,
button.ca-acct-tile:hover .ca-acct-tile-go {
    color: var(--pub-py-amber-600, #42b4d6);
    transform: translateX(3px);
}
.ca-acct-soon-pill {
    flex-shrink: 0;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--pub-py-secondary, #64748b);
    background: var(--pub-py-chip-bg, #f1f5f9);
    border: 1px solid var(--pub-py-border, #e2e8f0);
}

/* Replaces the two "coming soon" tiles: same expectation-setting, no dead tap targets. */
.ca-acct-soon-note {
    margin: 14px 0 0;
    padding-top: 2px;
    text-align: center;
}

/* ── Profile card (view ↔ edit) ─────────────────────────────────────────── */
.ca-acct-profile.ca-card {
    padding: 20px 18px;
}
.ca-acct-profile .ca-hint { margin-top: 16px; }

/* Profile rows stack on mobile so labels and values align cleanly. */
.ca-acct-profile .ca-field-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 0;
}
.ca-acct-profile .ca-field-value {
    text-align: left;
    font-size: 15px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* Section head + Edit button on one row. */
.ca-acct-profile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    padding-bottom: 4px;
}
.ca-acct-profile-head .ca-acct-section-head { margin: 0; }
/* Compact secondary buttons used inside the card (Edit / reset link). */
.ca-btn.ca-acct-edit-btn {
    width: auto;
    min-height: 44px;
    padding: 8px 18px;
    margin-top: 0;
    font-size: 14px;
}

/* Success confirmation after a save. */
.ca-acct-saved {
    margin: 6px 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: #047857;
}

/* Password row: label above button on mobile; inline on desktop. */
.ca-acct-pw-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.ca-btn.ca-acct-pw-btn {
    width: 100%;
    min-height: 44px;
    padding: 8px 16px;
    margin-top: 0;
    font-size: 14px;
}

/* Read-only email inside the edit form. */
.ca-acct-email-static { margin-top: 4px; }

/* Save / Cancel action row. */
.ca-acct-edit-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}
.ca-acct-edit-actions .ca-btn { width: 100%; margin-top: 0; }

/* ============================================================================
   Saved vehicles page (/account/saved/ — CustomerSavedVehiclesPage).
   ========================================================================== */
.ca-saved { display: flex; flex-direction: column; gap: 20px; }

/* Head matches .cym-h1 / .ca-page-title: display face at 30px. This page used to be the
   only one in the family with a 24px body-font H1. */
.ca-saved-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.ca-saved-head-text { min-width: 0; }
.ca-saved-h1 {
    margin: 0;
    font-family: var(--pub-py-font-display, 'Barlow Condensed', sans-serif);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--pub-py-headline, #1a1a2e);
}
.ca-saved-count { margin: 2px 0 0; color: var(--pub-py-secondary, #64748b); font-size: 15px; }
.ca-btn.ca-saved-back { width: auto; min-height: 44px; padding: 8px 16px; margin-top: 0; font-size: 14px; }

.ca-saved-inline-error {
    margin: 0;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--pub-py-error-title, #c53030);
    background: var(--pub-py-error-bg, #fff5f5);
    border: 1px solid var(--pub-py-error-border, #fed7d7);
    border-radius: 10px;
}

/* Card grid: 1-col mobile → 2-col desktop (see the >=768px block). */
.ca-saved-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }

/*
 * The card is a yard tag. Above the tear line is what the car IS (photo, name, VIN,
 * specs); below it, on a recessed stub, is what gets you to it (zone, days on the lot)
 * and when you saved it. It borrows .ca-acct-tile's interaction contract so the two
 * customer surfaces read as one family: token shadow, cyan hover border, 2px lift,
 * cyan focus ring.
 */
.ca-saved-card {
    position: relative;
    display: flex;
    align-items: stretch;
    background: var(--pub-py-card, #ffffff);
    border: 1px solid var(--pub-py-border, #e2e8f0);
    border-radius: 14px;
    /* Clips the stub band to the card's rounded corners. Nothing that needs to escape
       lives inside: the card's own shadow paints outside the box, and both focus rings
       sit at least 6px in from the edge. */
    overflow: hidden;
    padding: 12px;
    box-shadow: var(--pub-py-shadow-card,
        0 1px 2px rgba(26, 26, 46, 0.05), 0 4px 18px rgba(26, 26, 46, 0.06));
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.ca-saved-card:hover,
/* Keyboard parity: tabbing to the card link lights the whole card, not just the ring. */
.ca-saved-card:focus-within {
    border-color: var(--nav-cyan, #67cae1);
    box-shadow: var(--pub-py-shadow-hover,
        0 8px 32px rgba(26, 26, 46, 0.11), 0 2px 8px rgba(26, 26, 46, 0.05));
    transform: translateY(-2px);
}
.ca-saved-card--busy { opacity: 0.6; }

/* A watched car that has since sold or been crushed: the API withholds its details, so this
   is a quiet tombstone the customer can dismiss — not a hover/lift catalogue card, and never
   a dead link. */
.ca-saved-card--unavailable {
    background: var(--pub-py-bg-muted, #f8fafc);
}
.ca-saved-card--unavailable:hover,
.ca-saved-card--unavailable:focus-within {
    transform: none;
    border-color: var(--pub-py-border, #e2e8f0);
    box-shadow: none;
}
.ca-saved-gone {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}
.ca-saved-thumb--gone { opacity: 0.55; }
.ca-saved-gone-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ca-saved-gone-title { color: var(--pub-py-text-muted, #64748b); }
.ca-saved-gone-sub {
    font-size: 14px;
    line-height: 1.35;
    color: var(--pub-py-text-muted, #64748b);
}

/*
 * Whole-card link. A two-column grid so the stub can span the full card width
 * underneath both the thumbnail and the text, rather than being indented under one.
 */
.ca-saved-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 12px;
    align-items: start;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    border-radius: 10px;
}
.ca-saved-link:focus-visible {
    outline: 2px solid var(--nav-cyan, #67cae1);
    outline-offset: 2px;
}

.ca-saved-thumb {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    flex: 0 0 auto;
    width: 96px;
    height: 78px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--pub-py-chip-bg, #f1f5f9);
    /* Hairline ring so a light photo does not bleed into the card. */
    box-shadow: inset 0 0 0 1px rgba(26, 26, 46, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pub-py-icon-muted, #cbd5e1);
}
.ca-saved-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
@media (prefers-reduced-motion: no-preference) {
    .ca-saved-card:hover .ca-saved-thumb img { transform: scale(1.05); }
}
/* Most saved vehicles have no published photo, so the placeholder is the common view,
   not an edge case. A car silhouette reads as "a car we have"; a broken-image glyph
   reads as "something failed". */
.ca-saved-thumb-ph { display: flex; }
.ca-saved-thumb-ph .ca-saved-i { width: 34px; height: 34px; }

/* Arrived within the week — same threshold and emerald family as the catalog's
   new-arrival badge, but filled rather than outlined: at 10px over a photo or a pale
   placeholder, the outlined version disappeared and the translucent emerald sat near
   2:1 on white. Solid --pub-py-fresh-badge-strong carries white text at 8.5:1. */
.ca-saved-flag {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 3px 7px;
    font-family: var(--pub-py-font-body, 'DM Sans', sans-serif);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pub-py-white, #fff);
    background: var(--pub-py-fresh-badge-strong, #047857);
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(26, 26, 46, 0.22);
}

.ca-saved-body {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    min-width: 0;
    /* Clear the absolutely positioned Remove control in the top-right corner. */
    padding: 2px 40px 0 0;
}
/* Wraps to two lines rather than truncating: "2019 Chevrolet Silv…" loses the one
   word that tells you which truck it is, and the card is narrow at every breakpoint. */
.ca-saved-title {
    font-family: var(--pub-py-font-display, 'Barlow Condensed', sans-serif);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.005em;
    color: var(--pub-py-headline, #1a1a2e);
    max-width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/*
 * The punched yard tag — this page's signature.
 *
 * The VIN tail is the datum that travels from screen to windshield, so it is drawn as
 * the physical thing it maps to: a hang tag, pointed at the eyelet end, with a punched
 * hole. Same motif as `.cai-tag` in customer-assistant.css, which cannot be reused here
 * because that stylesheet only ships when CUSTOMER_AI_ENABLED is on. The two should be
 * merged when shared public-portal primitives get extracted.
 */
.ca-vin-tag {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 4px 9px 4px 20px;
    font-family: var(--pub-py-font-body, 'DM Sans', sans-serif);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex: 0 0 auto;
    color: var(--pub-py-headline, #1a1a2e);
    background: var(--pub-py-amber-bg, rgba(103, 202, 225, 0.08));
    border-radius: 0 6px 6px 0;
    clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 50%);
}
.ca-vin-tag::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -2.5px;
    border: 1.5px solid var(--pub-py-amber-600, #42b4d6);
    border-radius: 50%;
}

.ca-saved-specs {
    font-size: 13px;
    color: var(--pub-py-secondary, #64748b);
    font-variant-numeric: tabular-nums;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
 * The stub: where it sits, how long it has sat, and when you saved it. Pulled out to
 * the card's inner edge with negative margins so it reads as a tear-off strip rather
 * than another indented line of text. The dashed rule is the perforation.
 */
.ca-saved-yard {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 0 -12px -12px;
    padding: 9px 12px;
    font-size: 12px;
    background: var(--pub-py-chip-bg, #f1f5f9);
    border-top: 1px dashed var(--pub-py-border, #e2e8f0);
}
.ca-saved-yard-bit {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--pub-py-secondary, #64748b);
}
.ca-saved-yard-bit .ca-saved-i { width: 13px; height: 13px; flex: 0 0 auto; }

/* The zone is the datum that gets someone walking, so it is the one bit drawn as a
   chip. Everything else on the stub stays quiet. */
.ca-saved-yard-bit--zone {
    padding: 3px 9px 3px 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pub-py-headline, #1a1a2e);
    background: var(--pub-py-white, #fff);
    border: 1px solid var(--pub-py-border, #e2e8f0);
    border-radius: 999px;
}
.ca-saved-yard-bit--zone .ca-saved-i { color: var(--pub-py-amber-600, #42b4d6); }

/* Their action, not the car's — pushed to the far end and set quietest of all. */
.ca-saved-since {
    margin-left: auto;
    font-size: 11px;
    color: var(--pub-py-secondary, #64748b);
    opacity: 0.85;
}

/*
 * Icon-only and lifted out of the flow into the top-right corner, so it neither
 * competes with the card link nor steals a column from the title. 44px target.
 */
.ca-saved-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font: inherit;
    /* Full secondary, not a faint tint: on touch there is no hover to reveal it, and an
       icon control still has to clear 3:1 against the card. */
    color: var(--pub-py-secondary, #64748b);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}
.ca-saved-remove .ca-saved-i { width: 18px; height: 18px; }
.ca-saved-remove:hover:not(:disabled) {
    color: var(--pub-py-error-title, #c53030);
    background: var(--pub-py-error-bg, #fff5f5);
    border-color: var(--pub-py-error-border, #fed7d7);
}
.ca-saved-remove:focus-visible {
    outline: 2px solid var(--nav-cyan, #67cae1);
    outline-offset: 2px;
}
.ca-saved-remove:disabled { opacity: 0.5; cursor: not-allowed; }

/* Undo takes the removed card's place — reversible beats a confirmation dialog for an
   action people perform repeatedly. */
.ca-saved-undo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 74px;
    padding: 12px 14px;
    background: var(--pub-py-chip-bg, #f1f5f9);
    border: 1px dashed var(--pub-py-border, #e2e8f0);
    border-radius: 14px;
}
.ca-saved-undo-text { font-size: 14px; color: var(--pub-py-secondary, #64748b); min-width: 0; }
.ca-saved-undo-btn {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 8px 16px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--pub-py-headline, #1a1a2e);
    background: var(--pub-py-white, #fff);
    border: 1px solid var(--pub-py-border, #e2e8f0);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.18s ease;
}
.ca-saved-undo-btn:hover { border-color: var(--pub-py-headline, #1a1a2e); }
.ca-saved-undo-btn:focus-visible {
    outline: 2px solid var(--nav-cyan, #67cae1);
    outline-offset: 2px;
}

/* Skeleton: the real card's anatomy in grey, so nothing shifts when rows land. */
.ca-saved-card--skeleton {
    flex-direction: column;
    box-shadow: none;
}
.ca-saved-card--skeleton:hover,
.ca-saved-card--skeleton:focus-within {
    transform: none;
    border-color: var(--pub-py-border, #e2e8f0);
    box-shadow: none;
}
.ca-saved-sk-top { display: flex; align-items: flex-start; gap: 12px; }
.ca-saved-sk-thumb { flex: 0 0 auto; width: 96px; height: 78px; border-radius: 10px; }
.ca-saved-sk-lines { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; padding-top: 3px; }
.ca-saved-sk-line { height: 12px; border-radius: 6px; }
.ca-saved-sk-line--title { height: 17px; width: 62%; }
.ca-saved-sk-line--tag { width: 44%; }
.ca-saved-sk-line--spec { width: 54%; }
.ca-saved-sk-stub {
    margin: 12px -12px -12px;
    padding: 9px 12px;
    background: var(--pub-py-chip-bg, #f1f5f9);
    border-top: 1px dashed var(--pub-py-border, #e2e8f0);
}
.ca-saved-sk-line--stub { width: 68%; height: 11px; }
.ca-saved-sk {
    background: linear-gradient(90deg,
        var(--pub-py-skeleton-mid, #f1f5f9) 25%,
        var(--pub-py-skeleton-base, #e2e8f0) 37%,
        var(--pub-py-skeleton-mid, #f1f5f9) 63%);
    background-size: 400% 100%;
}
@media (prefers-reduced-motion: no-preference) {
    .ca-saved-sk { animation: ca-saved-shimmer 1.4s ease infinite; }
}
@media (prefers-reduced-motion: reduce) {
    .ca-saved-card:hover,
    .ca-saved-card:focus-within { transform: none; }
}
@keyframes ca-saved-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

.ca-saved-empty {
    text-align: center;
    padding: 44px 20px;
    background: var(--pub-py-card, #ffffff);
    border: 1px solid var(--pub-py-border, #e2e8f0);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.ca-saved-empty-icon { display: flex; color: var(--pub-py-icon-muted, #cbd5e1); }
.ca-saved-empty-icon .ca-saved-i { width: 40px; height: 40px; }
.ca-saved-empty-title {
    margin: 4px 0 0;
    font-family: var(--pub-py-font-display, 'Barlow Condensed', sans-serif);
    font-size: 22px;
    font-weight: 700;
    color: var(--pub-py-headline, #1a1a2e);
}
.ca-saved-empty-sub {
    margin: 0;
    max-width: 46ch;
    color: var(--pub-py-secondary, #64748b);
    font-size: 14px;
    line-height: 1.55;
}
.ca-saved-empty .ca-btn { width: auto; min-width: 180px; margin-top: 8px; }

/* Motion only when the user allows it (glow drift + tile lift). */
@media (prefers-reduced-motion: no-preference) {
    .ca-acct-masthead::before {
        animation: ca-brand-glow 9s ease-in-out infinite alternate;
    }
}
@media (prefers-reduced-motion: reduce) {
    a.ca-acct-tile:hover,
    button.ca-acct-tile:hover { transform: none; }
    a.ca-acct-tile:hover .ca-acct-tile-go,
    button.ca-acct-tile:hover .ca-acct-tile-go { transform: none; }
}

/* ============================================================================
   Desktop (>= 768px)
   ========================================================================== */
@media (min-width: 768px) {
    .ca-page { padding: 32px 20px 72px; }
    .ca-card { padding: 30px 26px; }
    .ca-form-grid { flex-direction: row; gap: 14px; }
    .ca-form-group { flex: 1; }

    .ca-acct { gap: 32px; }

    .ca-acct-masthead {
        flex-direction: row;
        align-items: center;
        gap: 20px;
        padding: 28px 28px;
    }
    .ca-acct-masthead-main { flex: 1; min-width: 0; }
    .ca-btn.ca-acct-logout {
        align-self: center;
        width: auto;
        min-width: 120px;
        margin-left: auto;
    }

    .ca-acct-avatar { width: 64px; height: 64px; font-size: 28px; border-radius: 16px; }
    .ca-acct-name { font-size: 32px; }
    .ca-acct-email { font-size: 15px; }

    .ca-acct-section-head { margin-bottom: 16px; }

    .ca-acct-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
    .ca-acct-tile {
        min-height: 88px;
        padding: 18px 18px;
        border-radius: 16px;
    }

    .ca-acct-profile.ca-card { padding: 28px 26px; }
    .ca-acct-profile .ca-field-row {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 24px;
        padding: 16px 0;
    }
    .ca-acct-profile .ca-field-value {
        text-align: right;
        max-width: 62%;
    }
    .ca-acct-pw-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .ca-btn.ca-acct-pw-btn { width: auto; }

    /* Save / Cancel sit side by side; Save leads. */
    .ca-acct-edit-actions { flex-direction: row; }
    .ca-acct-edit-actions .ca-btn { width: auto; min-width: 150px; }

    /* Saved-vehicles grid widens to two columns. Card padding grows to 14px, so the
       stub's negative margins have to follow it out to the new inner edge. */
    .ca-saved-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .ca-saved-thumb { width: 116px; height: 88px; }
    .ca-saved-card { padding: 14px; }
    .ca-saved-title { font-size: 23px; }
    .ca-saved-yard { margin: 0 -14px -14px; padding: 10px 14px; }

    .ca-saved-sk-thumb { width: 116px; height: 88px; }
    .ca-saved-sk-stub { margin: 12px -14px -14px; padding: 10px 14px; }
}

/* ============================================================================
   Split-screen auth shell (login + signup) — shared by login.html and
   account_signup.html via components/common/AuthShell.js.
   Mobile-first: a stacked navy masthead + form; >= 900px becomes two columns.
   Consistent with VehicleDetailPage / base.html: #1A1A2E masthead + diagonal
   texture + cyan sweep, Barlow Condensed display / DM Sans body, 14px radius.
   ========================================================================== */
.ca-page--auth {
    max-width: 880px;
}

/* Visually-hidden text for assistive tech (e.g. checklist met/not-met status). */
.ca-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;
}

.ca-auth {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--pub-py-card, #ffffff);
    border: 1px solid var(--pub-py-border, #e2e8f0);
    border-radius: 16px;
    box-shadow: var(--pub-py-shadow-card,
        0 1px 2px rgba(26, 26, 46, 0.05), 0 4px 18px rgba(26, 26, 46, 0.06));
}

/* ── Brand panel (navy, textured) ─────────────────────────────────────────── */
.ca-auth__brand {
    position: relative;
    isolation: isolate;
    padding: 26px 24px 24px;
    text-align: center;
    color: #ffffff;
    background-color: var(--pub-py-masthead-bg, #1A1A2E);
    background-image: var(--pub-py-masthead-diagonal-texture,
        repeating-linear-gradient(135deg, transparent, transparent 48px,
            rgba(255, 255, 255, 0.013) 48px, rgba(255, 255, 255, 0.013) 49px));
    border-bottom: 1px solid var(--pub-py-masthead-rule-fade, rgba(103, 202, 225, 0.18));
}
/* Soft cyan glow anchored to the panel — pure decoration */
.ca-auth__brand::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -40%;
    left: 50%;
    width: 320px;
    height: 320px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(103, 202, 225, 0.16), transparent 70%);
    pointer-events: none;
}

.ca-brand-home {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    border-radius: 16px;
    outline-offset: 3px;
}
.ca-brand-home:focus-visible { outline: 2px solid var(--nav-cyan, #67cae1); }

.ca-brand-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin: 0 auto 12px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.30);
}
.ca-brand-chip img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
    box-sizing: border-box;
    border-radius: 14px;
}

.ca-brand-wordmark {
    display: block;
    margin: 0;
    font-family: var(--pub-py-font-display, 'Barlow Condensed', sans-serif);
    font-weight: 700;
    font-size: 30px;
    line-height: 1.02;
    letter-spacing: 0.005em;
    color: #ffffff;
}
.ca-brand-eyebrow {
    display: block;
    margin-top: 7px;
    font-family: var(--pub-py-font-display, 'Barlow Condensed', sans-serif);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nav-cyan, #67cae1);
}
/* Heading, tagline, bullets belong to the full (desktop) brand panel; the
   collapsed mobile masthead shows only the logo lockup, so the form's own
   title/sub carry the messaging without duplication. */
.ca-brand-heading {
    display: none;
    margin: 16px 0 0;
    font-family: var(--pub-py-font-display, 'Barlow Condensed', sans-serif);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.1;
    color: #ffffff;
}
.ca-brand-tagline {
    display: none;
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
}
.ca-brand-bullets {
    display: none;
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    text-align: left;
}
.ca-brand-bullet {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 0;
    font-size: 14px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.86);
}
.ca-brand-bullet svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    color: var(--nav-cyan, #67cae1);
}

/* ── Form panel ───────────────────────────────────────────────────────────── */
.ca-auth__form {
    padding: 26px 22px 28px;
    background: var(--pub-py-card, #ffffff);
}
/* The page renders title/sub/form directly inside .ca-auth__form (no inner
   .ca-card), so neutralise any legacy card chrome if present. */
.ca-auth .ca-card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

/* ── Password strength meter (signup) ─────────────────────────────────────── */
.ca-strength { margin: 10px 0 2px; }
.ca-strength__track {
    display: flex;
    gap: 5px;
}
.ca-strength__seg {
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: var(--pub-py-border, #e2e8f0);
    transition: background-color 0.2s ease;
}
.ca-strength__label {
    margin: 6px 0 0;
    font-size: 12px;
    font-weight: 600;
}
.ca-strength[data-score="1"] .ca-strength__label { color: #dc2626; }
.ca-strength[data-score="2"] .ca-strength__label { color: #d97706; }
.ca-strength[data-score="3"] .ca-strength__label { color: #0e7490; }
.ca-strength[data-score="4"] .ca-strength__label { color: #059669; }
.ca-strength[data-score="1"] .ca-strength__seg:nth-child(-n+1) { background: #dc2626; }
.ca-strength[data-score="2"] .ca-strength__seg:nth-child(-n+2) { background: #f59e0b; }
.ca-strength[data-score="3"] .ca-strength__seg:nth-child(-n+3) { background: #0e7490; }
.ca-strength[data-score="4"] .ca-strength__seg:nth-child(-n+4) { background: #10b981; }

/* ── Live requirements checklist (signup) ─────────────────────────────────── */
.ca-reqs {
    list-style: none;
    margin: 10px 0 2px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ca-reqs__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    line-height: 1.4;
    color: #475569;
    transition: color 0.18s ease;
}
.ca-reqs__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: #cbd5e1;
    transition: color 0.18s ease;
}
.ca-reqs__icon svg { width: 16px; height: 16px; }
.ca-reqs__item[data-met="true"] { color: #059669; font-weight: 600; }
.ca-reqs__item[data-met="true"] .ca-reqs__icon { color: #10b981; }

/* ============================================================================
   Auth shell — desktop split (>= 900px, matches base.html nav breakpoint)
   ========================================================================== */
@media (min-width: 900px) {
    .ca-auth { flex-direction: row; }
    .ca-auth__brand {
        flex: 0 0 42%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        text-align: left;
        padding: 40px 34px;
        border-bottom: none;
        border-right: 1px solid var(--pub-py-masthead-rule-fade, rgba(103, 202, 225, 0.18));
    }
    .ca-auth__brand .ca-brand-home { align-items: flex-start; }
    .ca-auth__brand .ca-brand-chip { margin-left: 0; margin-right: 0; }
    .ca-auth__brand::before { top: -18%; left: 30%; }
    .ca-brand-heading { display: block; }
    .ca-brand-tagline { display: block; }
    .ca-brand-bullets { display: block; }
    .ca-auth__form {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: 40px 38px;
    }
}

/* Subtle brand-panel glow drift — motion only when the user allows it. */
@media (prefers-reduced-motion: no-preference) {
    .ca-auth__brand::before {
        animation: ca-brand-glow 9s ease-in-out infinite alternate;
    }
}
@keyframes ca-brand-glow {
    from { transform: translateX(-50%) translateY(0) scale(1); opacity: 0.85; }
    to   { transform: translateX(-50%) translateY(14px) scale(1.12); opacity: 1; }
}