:root,
.light,
.dark {
    --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --page-bg: var(--rv-page-bg, var(--bs-body-bg));
    --surface: var(--rv-surface, var(--bs-body-bg));
    --surface-strong: var(--rv-surface-strong, var(--bs-tertiary-bg));
    --text: var(--rv-text, var(--bs-body-color));
    --muted: var(--rv-muted, var(--bs-secondary-color));
    --accent: var(--rv-accent, var(--bs-primary));
    --accent-deep: var(--rv-accent-deep, var(--bs-primary));
    --border: var(--rv-border, var(--bs-border-color));
    --shadow: var(--rv-shadow, 0 24px 60px rgba(77, 49, 31, 0.12));
    --rv-type-page-title: clamp(2.35rem, 12vw, 5.5rem);
    --rv-type-section-title: clamp(1.25rem, 3vw, 1.75rem);
    --rv-type-subsection: 1.125rem;
    --rv-type-body: 1rem;
    --rv-type-helper: .9375rem;
    --rv-type-metadata: .8125rem;
    --rv-type-label: .8125rem;
    --rv-type-status: .875rem;
    --rv-type-eyebrow: .78rem;
    --rv-control-border: var(--bs-border-color);
    --rv-danger: var(--bs-danger);
    --rv-danger-surface: var(--bs-danger-bg, #ffe8e4);
    --rv-danger-text: var(--bs-danger-text, #8c1d0d);
    --rv-warning: var(--bs-warning);
    --rv-warning-surface: var(--bs-warning-bg, #fff7e8);
    --rv-warning-text: var(--bs-warning-text, #7a5c1f);
    --rv-on-primary: #ffffff;
}

.light {
    --rv-page-bg: #f4efe6;
    --rv-surface: rgba(255, 252, 247, 0.88);
    --rv-surface-strong: #fffaf2;
    --rv-text: #1f1a17;
    --rv-muted: #5f564f;
    --rv-accent: #b24a2a;
    --rv-accent-deep: #7f2f18;
    --rv-border: rgba(31, 26, 23, 0.12);
    --rv-shadow: 0 24px 60px rgba(77, 49, 31, 0.12);
    --rv-control-border: #b9b09d;
    --rv-danger: #c62828;
    --rv-danger-surface: #ffe8e4;
    --rv-danger-text: #8c1d0d;
    --rv-warning: #d17c00;
    --rv-warning-surface: #fff7e8;
    --rv-warning-text: #7a5c1f;
}

.dark {
    --rv-page-bg: #171411;
    --rv-surface: #28211d;
    --rv-surface-strong: #332822;
    --rv-text: #f8f2e8;
    --rv-muted: #d9cfb7;
    --rv-accent: #f08a67;
    --rv-accent-deep: #f08a67;
    --rv-border: rgba(248, 242, 232, 0.2);
    --rv-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    --rv-control-border: #7d91a5;
    --rv-danger: #f08a67;
    --rv-danger-surface: #4f2f12;
    --rv-danger-text: #ffd9c7;
    --rv-warning: #f5b66b;
    --rv-warning-surface: #4f2f12;
    --rv-warning-text: #ffd9c7;
}

html.dark body {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

html.dark .lookup__card,
html.dark .vehicle__card,
html.dark .hero__content,
html.dark .hero__panel {
    background: var(--surface);
    border-color: var(--border);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    min-height: 100%;
    min-width: 320px;
    font-family: var(--font-sans);
    background:
        radial-gradient(circle at top left, rgba(178, 74, 42, 0.18), transparent 32%),
        linear-gradient(180deg, var(--page-bg) 0%, var(--page-bg) 100%);
    color: var(--text);
}

body {
    min-height: 100vh;
}

p,
li,
td,
th,
a,
button {
    overflow-wrap: anywhere;
}

.shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 12px;
    box-sizing: border-box;
}

.rv-page-frame {
    flex: 1 0 auto;
    padding-top: 12px;
    padding-bottom: 24px;
}

.app-header {
    width: 100%;
    margin: 0 auto 12px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--border);
}
.app-header__brand { color: var(--text); font-weight: 800; text-decoration: none; }
.app-header__account { color: var(--accent-deep); font-weight: 700; min-height: 44px; }
.app-header__account:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.app-header__account-icon { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; flex: 0 0 auto; }
.app-header__account--signed-in { width: 44px; padding: 2px; border: 1px solid var(--border); border-radius: 50%; background: var(--surface-strong); }
.app-header__account-icon--signed-in { width: 100%; height: 100%; padding: 7px; border-radius: 50%; background: var(--accent-deep); color: var(--rv-on-primary); }
.app-header__avatar { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.app-header__avatar[hidden] + .app-header__account-icon--signed-in { display: block; }

.rv-page-footer { width: 100%; margin: auto auto 0; }

html.dark .app-header__brand { color: var(--bs-body-color); }
html.dark .app-header__account { color: var(--accent); }
.circuit-error { width: min(760px, 100%); margin: auto; padding: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); }
.circuit-error p:not(.hero__eyebrow) { max-width: 58ch; color: var(--muted); line-height: 1.6; }
.circuit-error__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 20px; }
.circuit-error__actions button, .circuit-error__actions a { border: 0; border-radius: 999px; padding: 10px 16px; font: inherit; font-weight: 700; }
.circuit-error__actions button { color: var(--surface-strong); background: var(--accent-deep); cursor: pointer; }
.circuit-error__actions a { color: var(--accent-deep); background: var(--surface-strong); }
.account { width: min(760px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 24px; }
.account__balance { display: flex; justify-content: space-between; max-width: 320px; padding: 16px; background: var(--surface-strong); border: 1px solid var(--border); border-radius: 12px; }
.account__balance strong { font-size: 1.5rem; }
.account__activity { padding-left: 20px; }

.account-page, .garage-page, .garage-editor { width: min(1100px, 100%); margin: 0 auto; }
.account-page { padding: 20px 0 48px; }
.account-page__eyebrow, .garage-page__eyebrow, .garage-card__eyebrow { margin: 0 0 8px; color: var(--accent-deep); font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.account-page h1, .garage-page h1, .garage-editor h1 { font-size: var(--rv-type-page-title); line-height: 1.05; letter-spacing: -.04em; }
.account-page__lede { max-width: 55ch; margin: 18px 0 24px; color: var(--muted); font-size: 1.15rem; }
.account-page__actions, .garage-editor__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.account-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 36px 0; }
.account-stat, .account-section, .account-page__signin { padding: 22px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.account-stat { display: grid; gap: 8px; min-height: 145px; }
.account-stat span:first-child { color: var(--muted); font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.account-stat strong { font-size: 1.4rem; }
.account-stat a { color: var(--accent-deep); font-weight: 700; }
.account-stat__muted { color: var(--muted); font-size: .9rem; }
.account-section { margin-top: 18px; }
.account-section__heading { display: flex; justify-content: space-between; align-items: start; }
.account-section h2 { margin-bottom: 0; }
.account-empty, .garage-form-note { color: var(--muted); }
.account-activity { list-style: none; padding: 0; margin: 16px 0 0; }
.account-activity li { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: center; padding: 14px 0; border-top: 1px solid var(--border); color: var(--text); font-size: .95rem; }
.account-activity span, .account-activity time { color: var(--muted); }
.account-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.account-form label, .account-form input { width: 100%; }
.account-form label { font-weight: 700; }

.garage-page { padding: 16px 0 48px; }
.garage-hero { display: flex; justify-content: space-between; gap: 24px; align-items: end; padding: 34px; margin-bottom: 24px; color: var(--surface-strong); border-radius: 28px; background: linear-gradient(120deg, var(--accent-deep), var(--accent) 58%, var(--accent)); box-shadow: 0 24px 60px rgba(77, 49, 31, .22); }
.garage-hero p:not(.garage-page__eyebrow), .garage-hero__action { color: rgba(255,250,242,.82); }
.garage-hero h1 { color: var(--surface-strong); }
.garage-hero .garage-page__eyebrow, .garage-backlink { color: #ffd9c7; }
.garage-backlink { display: inline-block; margin-bottom: 22px; font-weight: 700; text-decoration: none; }
.garage-hero__action { color: var(--accent-deep); white-space: nowrap; font-weight: 800; }
.garage-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 20px 0; color: var(--muted); }
.garage-toolbar strong { color: var(--text); }
.garage-view-toggle { display: flex; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.garage-view-toggle button, .garage-methods button { border: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 700; cursor: pointer; }
.garage-view-toggle button { padding: 7px 14px; border-radius: 999px; }
.garage-view-toggle button.is-active, .garage-methods button.is-active { color: var(--text); background: var(--surface-strong); box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.garage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.garage-card { overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
.garage-card__visual { display: grid; place-items: center; min-height: 132px; color: rgba(255,250,242,.9); font-size: 4rem; font-weight: 900; background: linear-gradient(135deg, #30231e, #8a3921); }
.garage-card__body { padding: 20px; }
.garage-card h2 { margin: 0; font-size: 1.4rem; }
.garage-card__model { margin: 3px 0 18px; color: var(--muted); }
.garage-card__meta { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--border); color: var(--muted); font-size: .86rem; }
.garage-card__actions, .garage-list__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.garage-list { overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.garage-list__row { display: grid; grid-template-columns: 1.5fr 1fr auto; gap: 18px; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.garage-list__row:last-child { border-bottom: 0; }
.garage-list__row strong, .garage-list__row span { display: block; }.garage-list__row span, .garage-list__row time { color: var(--muted); font-size: .9rem; }
.garage-confirm { position: sticky; bottom: 18px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 18px; padding: 14px 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-strong); box-shadow: var(--shadow); }.garage-confirm span { color: var(--muted); margin-right: auto; }
.garage-status { margin-top: 16px; padding: 12px 14px; border-radius: 10px; color: var(--accent-deep); background: rgba(178,74,42,.1); }
.garage-empty { padding: 56px 24px; text-align: center; border: 1px dashed var(--border); border-radius: 22px; background: var(--surface); }.garage-empty h2 { margin: 14px 0 8px; }.garage-empty p { max-width: 52ch; margin: 0 auto 20px; color: var(--muted); }.garage-empty__icon { margin: auto; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 18px; color: var(--surface-strong); background: var(--accent); font-size: 2rem; }.garage-empty--error { text-align: left; }.garage-empty--error p { margin-left: 0; }
.garage-editor { padding: 16px 0 48px; }.garage-editor__heading { display: flex; justify-content: space-between; gap: 24px; align-items: start; margin: 28px 0; }.garage-editor__heading p:not(.garage-page__eyebrow) { max-width: 55ch; color: var(--muted); }.garage-editor__badge { padding: 8px 12px; border-radius: 999px; color: var(--accent-deep); background: rgba(178,74,42,.12); font-weight: 800; white-space: nowrap; }
.garage-methods { display: flex; gap: 4px; overflow-x: auto; padding: 5px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }.garage-methods button { padding: 12px 16px; border-radius: 10px; white-space: nowrap; }.garage-method-panel, .garage-editor__form, .garage-history { padding: 24px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }.garage-method-panel { margin-bottom: 14px; }.garage-method-panel h2 { margin-bottom: 4px; }.garage-current-vehicle { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0; padding: 16px; border-radius: 12px; background: rgba(178,74,42,.1); }.garage-current-vehicle span { color: var(--muted); }.garage-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.garage-fields__wide { grid-column: 1 / -1; }.garage-fields label, .garage-method-panel label { display: block; margin-bottom: 7px; font-weight: 700; }.garage-fields label span { color: var(--muted); font-weight: 400; }.garage-fields input, .garage-method-panel input { width: 100%; }.garage-editor__form .validation-errors { margin: 16px 0 0; color: var(--rv-danger-text); }.garage-editor__actions { justify-content: flex-end; margin-top: 22px; }.garage-history { display: flex; justify-content: space-between; gap: 24px; align-items: center; margin-top: 18px; }.garage-history h2 { margin-bottom: 6px; }.garage-history__empty { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; color: var(--muted); white-space: nowrap; }
html.dark .garage-card__visual { background: linear-gradient(135deg, #221a17, #6f2f1e); }

@media (max-width: 760px) { .account-stat-grid, .garage-grid { grid-template-columns: 1fr; }.account-activity li { grid-template-columns: 1fr; gap: 3px; }.garage-hero, .garage-editor__heading, .garage-history { display: block; padding: 24px; }.garage-hero__action { display: inline-block; margin-top: 22px; }.garage-list__row { grid-template-columns: 1fr; gap: 8px; }.garage-fields { grid-template-columns: 1fr; }.garage-fields__wide { grid-column: auto; }.garage-history__empty { display: inline-block; margin-top: 12px; }.garage-page, .garage-editor, .account-page { padding-left: 0; padding-right: 0; } }

.home-garage { width: min(1100px, 100%); margin: 0 auto; padding: 0 0 1.5rem; }
.home-garage__heading { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 16px; }
.home-garage__eyebrow { margin: 0 0 8px; color: var(--accent-deep); font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.home-garage__heading h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2.2rem); }
.home-garage__heading p:not(.home-garage__eyebrow) { margin: 8px 0 0; color: var(--muted); }
.home-garage__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.home-garage-card { overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
.home-garage-card__visual { display: grid; place-items: center; min-height: 96px; color: rgba(255,250,242,.9); font-size: 3rem; font-weight: 900; background: linear-gradient(135deg, #30231e, #8a3921); }
.home-garage-card__body { padding: 18px; }
.home-garage-card__year { margin: 0 0 4px; color: var(--accent-deep); font-size: .8rem; font-weight: 800; text-transform: uppercase; }
.home-garage-card h3 { margin: 0; font-size: 1.25rem; }
.home-garage-card__model { margin: 4px 0 16px; color: var(--muted); }
.home-garage-card .btn { margin-top: 16px; }
.home-garage__status, .home-garage__empty { padding: 22px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.home-garage__empty h3 { margin: 0 0 6px; }
.home-garage__empty p { margin: 0 0 16px; color: var(--muted); }
.home-garage__empty--error { border-color: var(--rv-danger-text); }
html.dark .home-garage-card__visual { background: linear-gradient(135deg, #221a17, #6f2f1e); }

@media (max-width: 760px) {
    .home-garage__heading { display: block; }
    .home-garage__heading .btn { display: inline-block; margin-top: 16px; }
    .home-garage__grid { grid-template-columns: 1fr; }
}

.hero {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
}

.lookup {
    width: min(100%, 44rem);
}

.hero__content,
.hero__panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
}

.hero__content {
    padding: 24px;
}

.hero__panel {
    padding: 20px 24px;
    align-self: end;
}

.hero__eyebrow {
    margin: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--accent-deep);
}

h1,
.hero__title {
    margin: 0;
    font-size: var(--rv-type-page-title);
    line-height: 1.05;
    letter-spacing: -.04em;
}

h2 {
    margin-top: 0;
    font-size: var(--rv-type-section-title);
    line-height: 1.2;
}

h3 { font-size: var(--rv-type-subsection); line-height: 1.3; }

h1, h2, h3, h4 { overflow-wrap: anywhere; }

.hero__lede {
    margin: 16px 0 0;
    font-size: 1.15rem;
    line-height: 1.5;
    max-width: 18ch;
}

.hero__supporting,
li {
    font-family: inherit;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--muted);
}

.hero__supporting {
    margin: 16px 0 0;
    max-width: 60ch;
}

ul {
    margin: 16px 0 0;
    padding-left: 20px;
}

li + li {
    margin-top: 12px;
}

@media (min-width: 861px) {
    .shell {
        padding: 32px;
    }

    .hero {
        grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.9fr);
        gap: 24px;
    }

    .hero__content,
    .hero__panel {
        border-radius: 28px;
    }

    .hero__content {
        padding: 56px;
    }

    .hero__panel {
        padding: 32px;
    }

    .hero__eyebrow {
        margin-bottom: 16px;
    }

    .hero__lede {
        margin-top: 24px;
        font-size: 1.4rem;
    }

    .hero__supporting {
        margin-top: 24px;
    }

    .hero__lede {
        max-width: none;
    }
}

/* Page-specific presentation is host-owned; route components contain markup and state only. */

/* Migrated from src/web/RepairVault.Web/Components/Pages/About.razor. */
    .about { width: min(100%, 48rem); display: grid; gap: 1rem; padding-bottom: 2rem; }
    .about__eyebrow { margin: 0; color: var(--rv-warning-text); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
    .about h1, .about h2 { margin: 0; }
    .about__overview, .about__note, .about__copyright { margin: 0; line-height: 1.6; }
    .about__note { padding: 1rem; border-left: .25rem solid var(--rv-warning); background: var(--rv-warning-surface); }
    .about__details { padding: 1rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--surface); }
    .about__details dl { display: grid; gap: .75rem; margin: 1rem 0 0; }
    .about__details dl div { display: grid; gap: .2rem; }
    .about__details dt { font-weight: 700; }
    .about__details dd { margin: 0; color: #4e4a42; }
.about__return { width: fit-content; color: var(--bs-primary); font-weight: 700; }
.legal-content { width: min(100%, 52rem); display: grid; gap: 1rem; padding-bottom: 2rem; }
.legal-content h1, .legal-content h2 { margin: 0; }
.legal-content p, .legal-content li, .legal-content dd { line-height: 1.65; }
.legal-content dl { display: grid; gap: .8rem; }
.legal-content dt { font-weight: 700; }
.legal-content dd { margin: 0; }
.legal-meta { color: var(--bs-secondary-color); font-size: .9rem; }
.legal-alert { padding: 1rem; border-left: .25rem solid var(--rv-warning); background: var(--rv-warning-surface); }
    @media (min-width: 600px) { .about__details dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Migrated from src/web/RepairVault.Web/Components/Pages/Home.razor. */
    .home-page { display: grid; gap: 1.5rem; }

    .lookup { padding: 0; }

    .lookup__card {
        display: grid;
        gap: 1rem;
        padding: 1rem;
        border: 1px solid var(--border);
        border-radius: 1rem;
        background: var(--surface);
    }

    .lookup__eyebrow {
        margin: 0 0 0.5rem;
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--rv-warning-text);
    }

    .lookup__supporting {
        margin: 0;
        max-width: 42rem;
    }

    .lookup__form {
        display: grid;
        gap: 1rem;
        width: 100%;
        max-width: 32rem;
    }

    .lookup__field {
        display: grid;
        gap: 0.35rem;
    }

    .lookup__field label {
        font-weight: 600;
    }

    .lookup__field input {
        width: 100%;
        box-sizing: border-box;
        min-height: 3rem;
        padding: 0.8rem 0.9rem;
        border: 1px solid var(--rv-control-border);
        border-radius: 0.75rem;
        background: var(--surface);
        font: inherit;
    }

    .lookup__submit {
        width: 100%;
        min-height: 3rem;
        padding: 0.85rem 1.4rem;
        border: 0;
        border-radius: 999px;
        background: var(--bs-primary);
        color: var(--rv-on-primary);
        font: inherit;
        font-weight: 700;
        cursor: pointer;
    }

    @media (min-width: 600px) {
        .lookup {
            padding: 0;
        }

        .lookup__card {
            padding: 1.5rem;
        }

        .lookup__submit {
            width: fit-content;
        }
    }

    .lookup__saved {
        margin: 0;
        font-weight: 600;
        color: #23411f;
    }

    .lookup__not-found, .lookup__error {
        margin: 0;
        padding: 0.9rem;
        border-radius: 0.75rem;
    }

    .lookup__not-found { background: var(--rv-warning-surface); color: #6b3e00; }

    .lookup__about { width: fit-content; color: var(--bs-primary); font-weight: 700; }
    .lookup__error { background: var(--rv-danger-surface); color: var(--rv-danger-text); }


/* Migrated from src/web/RepairVault.Web/Components/Pages/Repair.razor. */
    .vehicle {
        width: 100%;
        padding: 0.75rem 0 1.5rem;
    }

    .vehicle__card,
    .vehicle__empty,
    .vehicle__loading,
    .vehicle__error {
        display: grid;
        gap: 0.875rem;
        max-width: none;
        padding: 1rem;
        border: 1px solid var(--border);
        border-radius: 1rem;
        background: var(--surface);
    }

    .vehicle__journey,
    .repair-guide__journey {
        display: flex;
        flex-wrap: wrap;
    }

    .vehicle__link,
    .vehicle__retry {
        min-height: 3rem;
        padding: 0.65rem 0.85rem;
        border-radius: 0.5rem;
        font: inherit;
        font-weight: 700;
        cursor: pointer;
    }

    .vehicle__link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--bs-primary);
        color: var(--rv-on-primary);
        background: var(--bs-primary);
        text-decoration: none;
    }

    .vehicle__retry {
        border: 0;
        color: var(--rv-on-primary);
        background: var(--rv-danger);
    }

    .repair-guide__journey {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding-top: 0.75rem;
        color: #4f4333;
        font-size: 0.95rem;
    }

    .repair-guide__journey a {
        color: var(--bs-primary);
        font-weight: 700;
    }

    .repair-guide__back {
        justify-self: start;
        min-height: 3rem;
        padding: 0.65rem 0.85rem;
        border: 1px solid var(--border);
        border-radius: 0.5rem;
        color: #1f1f1f;
        background: var(--rv-on-primary);
        font: inherit;
        font-weight: 700;
        cursor: pointer;
    }

    .repair-guide__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        align-items: center;
    }

    .repair-guide__print {
        border-color: #1f1f1f;
        background: #1f1f1f;
    }

    .vehicle__spinner {
        width: 2.25rem;
        height: 2.25rem;
        border: 0.3rem solid #d9cfb7;
        border-top-color: var(--bs-primary);
        border-radius: 50%;
        animation: repair-guide-spin 0.9s linear infinite;
    }

    .repair-guide__summary {
        color: #3f4a54;
        font-size: 1.0625rem;
        line-height: 1.6;
    }

    .repair-guide__vehicle {
        margin: 0.5rem 0 0;
        color: #5f6368;
        font-weight: 700;
    }

    .repair-guide__overview h1,
    .repair-guide__overview h2 {
        margin: 0;
    }

    .repair-guide__account {
        display: grid;
        gap: 0.75rem;
        padding: 1rem;
        border: 1px solid var(--border);
        border-radius: 0.75rem;
        background: var(--rv-on-primary);
    }

    .repair-guide__account h2,
    .repair-guide__account p {
        margin: 0;
    }

    .repair-guide__paywall {
        display: grid;
        gap: 1rem;
        padding: 1rem;
        border: 1px solid var(--border);
        border-radius: 0.9rem;
        background: var(--surface);
    }

    .repair-guide__paywall h2,
    .repair-guide__paywall h3,
    .repair-guide__paywall p {
        margin: 0;
    }

    .repair-guide__paywall h2 {
        color: #1f1f1f;
        font-size: clamp(1.35rem, 5vw, 1.8rem);
    }

    .repair-guide__paywall-kicker,
    .repair-guide__credit-label {
        color: #8c321f;
        font-size: 0.75rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .repair-guide__paywall-intro {
        color: #4f4333;
        line-height: 1.55;
    }

    .repair-guide__paywall-account {
        display: grid;
        gap: 0.2rem;
        padding: 0.8rem;
        border-left: 0.25rem solid #2e7d32;
        background: #edf6ee;
    }

    .repair-guide__paywall-primary {
        width: 100%;
    }

    .repair-guide__credit-packs {
        display: grid;
        gap: 0.85rem;
        padding-top: 0.5rem;
    }

    .repair-guide__paywall-heading {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 1rem;
    }

    .repair-guide__paywall-heading h3 {
        color: #1f1f1f;
        font-size: 1.25rem;
    }

    .repair-guide__paywall-note,
    .repair-guide__checkout-note {
        color: #5f6368;
        font-size: 0.85rem;
    }

    .repair-guide__credit-grid {
        display: grid;
        gap: 0.75rem;
    }

    .repair-guide__credit-card {
        position: relative;
        display: grid;
        gap: 0.5rem;
        padding: 1rem;
        border: 1px solid var(--border);
        border-radius: 0.75rem;
        background: var(--rv-on-primary);
    }

    .repair-guide__credit-card p { margin: 0; }

    .repair-guide__credit-card--featured {
        border: 2px solid var(--accent);
        box-shadow: 0 0.35rem 1rem rgba(178, 74, 42, 0.14);
    }

    .repair-guide__credit-badge {
        position: absolute;
        top: -0.7rem;
        right: 0.75rem;
        padding: 0.25rem 0.55rem;
        border-radius: 99rem;
        color: var(--rv-on-primary);
        background: var(--accent);
        font-size: 0.7rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .repair-guide__credit-count {
        color: #1f1f1f;
        font-size: 1.8rem;
        font-weight: 800;
        line-height: 1;
    }

    .repair-guide__credit-count span {
        color: #5f6368;
        font-size: 0.9rem;
        font-weight: 700;
    }

    .repair-guide__credit-price {
        color: #8c321f;
        font-size: 1.35rem;
        font-weight: 800;
    }

    .repair-guide__credit-card .vehicle__link {
        width: 100%;
        margin-top: 0.25rem;
    }

    .repair-guide__credit-card .vehicle__link:disabled {
        cursor: not-allowed;
        opacity: 0.65;
    }

    .repair-guide__discount {
        padding-top: 0.25rem;
        border-top: 1px solid var(--border);
    }

    .repair-guide__discount summary {
        cursor: pointer;
        color: var(--bs-primary);
        font-weight: 700;
    }

    .repair-guide__discount p {
        margin: 0.75rem 0;
    }

    .repair-guide__overview h2 {
        margin-top: 1.25rem;
        color: #1f1f1f;
        font-size: 1.25rem;
    }

    .repair-guide__overview-content {
        display: grid;
        gap: 1rem;
    }

    .repair-guide__context-image {
        display: grid;
        gap: 0.45rem;
        margin: 1rem 0;
    }

    .repair-guide__context-image img {
        width: 100%;
        max-height: 16rem;
        border-radius: 0.75rem;
        object-fit: cover;
        background: var(--surface);
    }

    .repair-guide__context-image figcaption {
        color: #4f4333;
        font-size: 0.8rem;
        line-height: 1.4;
    }

    .repair-guide__context-image--overview {
        margin: 0;
    }

    .repair-guide__context-image--step img {
        max-height: 12rem;
    }

    .repair-guide__badges {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin: 1.25rem 0;
    }

    .repair-guide__badge {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        border: 1px solid var(--border);
        border-radius: 999px;
        padding: 0.5rem 0.75rem;
        color: #3f4a54;
        font-size: 0.9375rem;
        background: #fff;
    }

    .repair-guide__badge--difficulty {
        border-color: #f57c00;
        color: #8a4600;
        background: var(--rv-warning-surface);
    }

    .repair-guide__safety {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0.75rem;
        margin: 1rem 0;
        border: 2px solid #f57c00;
        border-radius: 0.75rem;
        padding: 1rem;
        background: var(--rv-warning-surface);
    }

    .repair-guide__safety-icon {
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 50%;
        color: #fff;
        background: #c75b12;
        font-weight: 800;
    }

    .repair-guide__safety-label,
    .repair-guide__safety-warning,
    .repair-guide__part-disclaimer {
        margin: 0;
    }

    .repair-guide__safety-label {
        color: #8a4600;
        font-size: 1.0625rem;
        font-weight: 800;
    }

    .repair-guide__safety-warning {
        margin-top: 0.25rem;
        color: #3f2b16;
        font-weight: 600;
        line-height: 1.5;
    }

    .repair-guide__part-disclaimer {
        margin-top: 0.75rem;
        color: #5f6368;
        font-size: 0.8125rem;
        line-height: 1.45;
    }

    .repair-guide__tools,
    .repair-guide__preparation,
    .repair-guide__parts,
    .repair-guide__steps,
    .repair-guide__videos {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--border);
    }

    .repair-guide__tools h2,
    .repair-guide__preparation h2,
    .repair-guide__parts h2,
    .repair-guide__steps h2,
    .repair-guide__videos h2 {
        margin: 0;
        color: #1f1f1f;
        font-size: 1.25rem;
    }

    .repair-guide__section-heading {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .repair-guide__shop-tools {
        color: var(--bs-primary);
        font-weight: 700;
    }

    .repair-guide__table-wrap {
        margin-top: 1rem;
    }

    .repair-guide__table-wrap table {
        width: 100%;
        border-collapse: collapse;
        color: #3f4a54;
        background: #fff;
    }

    .repair-guide__table-wrap th,
    .repair-guide__table-wrap td {
        border: 1px solid var(--border);
        padding: 0.75rem;
        text-align: left;
        vertical-align: top;
        line-height: 1.45;
    }

    .repair-guide__table-wrap thead th {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .repair-guide__table-wrap tbody th {
        color: #1f1f1f;
        font-weight: 700;
    }

    .repair-guide__table-wrap,
    .repair-guide__table-wrap table,
    .repair-guide__table-wrap tbody,
    .repair-guide__table-wrap tr,
    .repair-guide__table-wrap th,
    .repair-guide__table-wrap td {
        display: block;
    }

    .repair-guide__table-wrap tr {
        border: 1px solid var(--border);
        border-radius: 0.5rem;
        padding: 0.75rem;
        background: #fff;
    }

    .repair-guide__table-wrap tr + tr {
        margin-top: 0.75rem;
    }

    .repair-guide__table-wrap th,
    .repair-guide__table-wrap td {
        border: 0;
        padding: 0.25rem 0;
    }

    .repair-guide__table-wrap tbody th::before,
    .repair-guide__table-wrap td::before {
        display: block;
        margin-bottom: 0.125rem;
        color: #5f6368;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .repair-guide__table-wrap tbody th::before {
        content: "Component";
    }

    .repair-guide__table-wrap td::before {
        content: attr(data-label);
    }

    .repair-guide__tool-list {
        display: grid;
        gap: 0.5rem;
        margin: 1rem 0 0;
        padding-left: 1.25rem;
    }

    .repair-guide__tool-category {
        margin: 1rem 0 0;
        color: #1f1f1f;
        font-size: 1rem;
    }

    .repair-guide__tool-item {
        color: #3f4a54;
    }

    .repair-guide__part-list {
        display: grid;
        gap: 0.75rem;
        margin: 1rem 0 0;
        padding: 0;
        list-style: none;
    }

    .repair-guide__part-item {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
        align-items: flex-start;
        border: 1px solid var(--border);
        border-radius: 0.5rem;
        padding: 0.875rem 1rem;
        color: #3f4a54;
        background: #fff;
    }

    .repair-guide__part-image {
        width: 5rem;
        height: 5rem;
        border-radius: 0.375rem;
        object-fit: cover;
        background: var(--surface);
    }

    .repair-guide__part-details {
        display: grid;
        min-width: 0;
        gap: 0.25rem;
    }

    .repair-guide__part-details strong {
        color: #1f1f1f;
    }

    .repair-guide__part-quantity {
        color: #5f6368;
        font-size: 0.9375rem;
    }

    .repair-guide__amazon-action {
        margin-top: 0.5rem;
        border-radius: 0.375rem;
        padding: 0.65rem 0.75rem;
        color: var(--rv-on-primary);
        background: var(--bs-primary);
        font-weight: 700;
        text-align: center;
        text-decoration: none;
    }

    .repair-guide__amazon-disclosure {
        margin: 0.75rem 0 0;
        color: #5f6368;
        font-size: 0.8125rem;
        line-height: 1.45;
    }

    .repair-guide__step-list {
        display: grid;
        gap: 1rem;
        margin: 1rem 0 0;
        padding: 0;
        list-style: none;
    }

    .repair-guide__step-item {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0.875rem;
        align-items: flex-start;
        border: 1px solid var(--border);
        border-radius: 0.5rem;
        padding: 1rem;
        background: #fff;
    }

    .repair-guide__step-number {
        display: grid;
        place-items: center;
        flex: 0 0 2rem;
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        color: #fff;
        background: #1f1f1f;
        font-weight: 800;
    }

    .repair-guide__step-details {
        min-width: 0;
    }

    .repair-guide__step-details h3,
    .repair-guide__step-details p {
        margin: 0;
    }

    .repair-guide__step-details h3 {
        color: #1f1f1f;
        font-size: 1.0625rem;
    }

    .repair-guide__step-details p {
        margin-top: 0.375rem;
        color: #3f4a54;
        line-height: 1.5;
    }

    .repair-guide__step-warning {
        display: grid;
        gap: 0.25rem;
        margin-top: 0.75rem;
        border-left: 4px solid #f57c00;
        padding: 0.625rem 0.75rem;
        color: #5f3200;
        background: var(--rv-warning-surface);
        font-size: 0.9375rem;
    }

    .repair-guide__video-list {
        display: grid;
        gap: 0.75rem;
        margin: 1rem 0 0;
        padding: 0;
        list-style: none;
    }

    .repair-guide__video-item {
        border: 1px solid var(--border);
        border-radius: 0.5rem;
        padding: 0.875rem 1rem;
        background: #fff;
    }

    .repair-guide__video-item a {
        color: #9b1c1c;
        font-weight: 700;
    }

    .repair-guide__print-destination {
        display: none;
    }

    .repair-guide__video-item p,
    .repair-guide__video-disclaimer {
        margin: 0.5rem 0 0;
        color: #3f4a54;
        line-height: 1.5;
    }

    .repair-guide__video-disclaimer {
        color: #5f6368;
        font-size: 0.875rem;
    }

    .repair-guide__empty {
        margin: 0.75rem 0 0;
        color: #5f6368;
    }

    .repair-guide__debug {
        margin-top: 1rem;
        border: 1px solid var(--border);
        border-radius: 0.5rem;
        padding: 0.75rem;
        background: var(--rv-on-primary);
    }

    .repair-guide__debug summary {
        cursor: pointer;
        font-weight: 700;
    }

    .repair-guide__debug dl {
        display: grid;
        grid-template-columns: max-content 1fr;
        gap: 0.4rem 0.75rem;
        margin: 0.75rem 0;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 0.875rem;
    }

    .repair-guide__debug dt { font-weight: 700; }
    .repair-guide__debug dd { margin: 0; }
    .repair-guide__debug pre { overflow-x: auto; white-space: pre-wrap; }

    @@keyframes repair-guide-spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    @media (min-width: 600px) {
        .vehicle {
            padding: 1rem 0 3rem;
        }

        .vehicle__card,
        .vehicle__empty,
        .vehicle__loading,
        .vehicle__error {
            padding: 1.5rem;
        }

        .repair-guide__journey {
            padding-top: 1.5rem;
        }

        .repair-guide__safety {
            display: flex;
            margin: 1.5rem 0;
        }

        .repair-guide__overview-content {
            grid-template-columns: minmax(0, 1fr) minmax(12rem, 16rem);
            align-items: start;
        }

        .repair-guide__credit-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .repair-guide__tools,
        .repair-guide__preparation,
        .repair-guide__parts,
        .repair-guide__torque-specs,
        .repair-guide__steps,
        .repair-guide__videos {
            margin-top: 1.5rem;
            padding-top: 1.5rem;
        }

        .repair-guide__table-wrap {
            overflow-x: auto;
        }

        .repair-guide__table-wrap table {
            min-width: 38rem;
        }

        .repair-guide__table-wrap thead th {
            position: static;
            width: auto;
            height: auto;
            padding: 0.75rem;
            margin: 0;
            overflow: visible;
            clip: auto;
            white-space: normal;
            border: 1px solid var(--border);
            color: #1f1f1f;
            background: var(--surface);
        }

        .repair-guide__table-wrap,
        .repair-guide__table-wrap table,
        .repair-guide__table-wrap tbody,
        .repair-guide__table-wrap tr,
        .repair-guide__table-wrap th,
        .repair-guide__table-wrap td {
            display: revert;
        }

        .repair-guide__table-wrap tr {
            border: 0;
            border-radius: 0;
            padding: 0;
            background: transparent;
        }

        .repair-guide__table-wrap tr + tr {
            margin-top: 0;
        }

        .repair-guide__table-wrap th,
        .repair-guide__table-wrap td {
            padding: 0.75rem;
            border: 1px solid var(--border);
        }

        .repair-guide__table-wrap tbody th::before,
        .repair-guide__table-wrap td::before {
            display: none;
        }

        .repair-guide__part-item {
            display: flex;
        }
    }

    @media print {
        @page { margin: 0.5in; }

        html, body {
            min-width: 0;
            background: var(--rv-on-primary);
            color: #000000;
        }

        .shell {
            display: block;
            min-height: 0;
            padding: 0;
        }

        .app-header,
        .repair-guide__journey,
        .repair-guide__actions,
        .repair-guide__shop-tools,
        .repair-guide__amazon-action,
        .repair-guide__account,
        .repair-guide__debug,
        .vehicle__loading,
        .vehicle__error {
            display: none !important;
        }

        .vehicle,
        .vehicle__card {
            display: block;
            width: 100%;
            max-width: none;
            padding: 0;
            border: 0;
            border-radius: 0;
            background: var(--rv-on-primary);
        }

        .repair-guide__overview,
        .repair-guide__safety,
        .repair-guide__tools,
        .repair-guide__preparation,
        .repair-guide__parts,
        .repair-guide__steps,
        .repair-guide__videos,
        .repair-guide__component-item,
        .repair-guide__part-item,
        .repair-guide__video-item {
            break-inside: avoid;
            page-break-inside: avoid;
        }

        .repair-guide__safety,
        .repair-guide__part-item,
        .repair-guide__video-item {
            border-color: #000000;
            background: var(--rv-on-primary);
        }

        .repair-guide__part-image {
            display: none;
        }

        .repair-guide__context-image {
            display: block;
            margin: 0.5rem 0;
        }

        .repair-guide__context-image img {
            display: block;
            max-height: 3in;
            margin-bottom: 0.125in;
        }

        .repair-guide__print-destination {
            display: inline;
            overflow-wrap: anywhere;
        }

        h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }
        a { color: #000000; text-decoration: none; }
    }

/* Migrated from src/web/RepairVault.Web/Components/Pages/ToolShop.razor. */
    .tool-shop { width: min(100%, 64rem); padding: 1.5rem 0; }
    .tool-shop__eyebrow { color: #5f6368; font-weight: 700; text-transform: uppercase; }
    .tool-shop__note, .tool-card__availability { color: #5f6368; font-size: 0.9375rem; }
    .tool-shop__disclosure, .tool-shop__unavailable { margin: 1rem 0; padding: 1rem; border-left: 4px solid #f57c00; background: var(--rv-warning-surface); }
    .tool-shop__error { padding: 1rem; border-left: 4px solid var(--rv-danger); background: var(--rv-danger-surface); }
    .tool-shop__catalog { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin-top: 1rem; }
    .tool-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: 0.75rem; background: #fff; }
    .tool-card img { width: 100%; height: 10rem; object-fit: cover; }
    .tool-card__content { display: grid; gap: 0.55rem; padding: 1rem; }
    .tool-card h2, .tool-card p { margin: 0; }
    .tool-card__price { font-size: 1.1rem; font-weight: 700; color: #1f1f1f; }
    .tool-card a, .tool-shop button { display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-height: 2.75rem; padding: 0.55rem 0.8rem; border: 1px solid var(--rv-danger); border-radius: 0.5rem; color: #fff; background: var(--rv-danger); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
    .tool-shop__back { margin-top: 1.5rem; }
    .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; }

/* Migrated from src/web/RepairVault.Web/Components/Pages/Vehicle.razor. */
    .vehicle__journey {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding-top: 0.75rem;
        color: #4f4333;
        font-size: 0.95rem;
    }

    .vehicle__journey a {
        color: var(--bs-primary);
        font-weight: 700;
    }

    .vehicle {
        width: 100%;
        padding: 0.75rem 0 1.5rem;
    }

    .vehicle__card,
    .vehicle__empty,
    .vehicle__loading,
    .vehicle__error {
        display: grid;
        gap: 0.875rem;
        max-width: none;
        padding: 1rem;
        border: 1px solid var(--border);
        border-radius: 1rem;
        background: var(--surface);
    }

    .vehicle__card {
        gap: 1rem;
    }

    .vehicle__spinner {
        width: 2.25rem;
        height: 2.25rem;
        border: 0.3rem solid #d9cfb7;
        border-top-color: var(--bs-primary);
        border-radius: 50%;
        animation: vehicle-spin 0.9s linear infinite;
    }

    @@keyframes vehicle-spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    .vehicle__eyebrow {
        margin: 0;
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--rv-warning-text);
    }

    .vehicle__supporting {
        margin: 0;
        color: #4f4333;
    }

    .vehicle__summary {
        margin: 0;
        max-width: 36rem;
        color: #4f4333;
        line-height: 1.6;
    }

    .vehicle__identity {
        display: grid;
        gap: 1rem;
    }

    .vehicle__identity-copy {
        display: grid;
        gap: 1rem;
    }

    .vehicle__context-image {
        display: grid;
        gap: 0.45rem;
        margin: 0;
    }

    .vehicle__context-image img {
        width: 100%;
        max-height: 15rem;
        border-radius: 0.9rem;
        object-fit: cover;
    }

    .vehicle__context-image figcaption {
        color: #4f4333;
        font-size: 0.8rem;
        line-height: 1.4;
    }

    .vehicle__meta-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.625rem;
    }

    .vehicle__meta-card {
        display: grid;
        gap: 0.35rem;
        padding: 0.9rem 1rem;
        border: 1px solid var(--border);
        border-radius: 0.9rem;
        background: var(--surface);
    }

    .vehicle__meta-card span {
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--rv-warning-text);
    }

    .vehicle__meta-card strong {
        font-size: 1.05rem;
    }

    .vehicle__safety {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.85rem;
        padding: 1rem;
        border: 1px solid #f57c00;
        border-radius: 0.9rem;
        background: var(--rv-warning-surface);
    }

    .vehicle__safety-icon {
        display: grid;
        place-items: center;
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 50%;
        background: #c75b12;
        color: var(--rv-on-primary);
        font-weight: 800;
    }

    .vehicle__safety-label,
    .vehicle__safety-copy {
        margin: 0;
    }

    .vehicle__safety-label {
        font-weight: 800;
        color: #914000;
    }

    .vehicle__safety-copy {
        margin-top: 0.25rem;
        color: #4f2f12;
        line-height: 1.5;
    }

    .vehicle__issues {
        display: grid;
        gap: 0.85rem;
    }

    .vehicle__maintenance {
        display: grid;
        gap: 0.75rem;
        padding: 1rem;
        border: 1px solid #c8d7c1;
        border-radius: 0.9rem;
        background: #f1f7ee;
    }

    .vehicle__maintenance h2,
    .vehicle__maintenance p { margin: 0; }

    .vehicle__maintenance-list { display: grid; gap: 0.5rem; }

    .vehicle__maintenance-cta {
        display: grid;
        width: 100%;
        gap: 0.25rem;
        padding: 0.8rem;
        border: 1px solid #aebfaa;
        border-radius: 0.6rem;
        background: var(--surface);
        color: var(--bs-primary);
        font: inherit;
        text-align: left;
        cursor: pointer;
    }

    .vehicle__maintenance-cta:hover,
    .vehicle__maintenance-cta:focus-visible {
        border-color: var(--bs-primary);
        outline: 2px solid var(--bs-primary);
        outline-offset: 2px;
    }

    .vehicle__maintenance-cta span,
    .vehicle__maintenance-empty { color: #4f4333; font-size: 0.9rem; }

    .vehicle__accuracy {
        display: grid;
        gap: 0.5rem;
        padding: 1rem;
        border: 1px solid #b9c9d8;
        border-radius: 0.75rem;
        background: #eef4f8;
    }

    .vehicle__repair-search {
        display: grid;
        gap: 0.5rem;
        padding: 1rem;
        border: 1px solid #b9c9d8;
        border-radius: 0.75rem;
        background: #eef4f8;
    }

    .vehicle__repair-search h2,
    .vehicle__repair-search p {
        margin: 0;
    }

    .vehicle__repair-search input {
        width: 100%;
        min-height: 2.75rem;
        padding: 0.6rem 0.75rem;
        border: 1px solid #7d91a5;
        border-radius: 0.5rem;
        background: var(--rv-on-primary);
        color: #1f1f1f;
        font: inherit;
    }

    .vehicle__repair-suggestions {
        display: grid;
        gap: 0.5rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .vehicle__repair-suggestions button {
        display: grid;
        width: 100%;
        gap: 0.25rem;
        padding: 0.75rem;
        border: 1px solid #b9c9d8;
        border-radius: 0.5rem;
        background: var(--rv-on-primary);
        color: var(--bs-primary);
        font: inherit;
        text-align: left;
        cursor: pointer;
    }

    .vehicle__repair-suggestions button:hover,
    .vehicle__repair-suggestions button:focus-visible {
        border-color: var(--bs-primary);
        outline: 2px solid var(--bs-primary);
        outline-offset: 2px;
    }

    .vehicle__repair-suggestions span,
    .vehicle__repair-no-matches {
        color: #4f4333;
        font-size: 0.9rem;
    }

    .vehicle__accuracy input {
        width: 100%;
        accent-color: var(--bs-primary);
    }

    .vehicle__issues h2,
    .vehicle__issue h3,
    .vehicle__issue p {
        margin: 0;
    }

    .vehicle__issue-list {
        display: grid;
        gap: 0.75rem;
    }

    .vehicle__issue {
        display: grid;
        gap: 0.35rem;
        padding: 0.875rem;
        border: 1px solid var(--border);
        border-radius: 0.9rem;
        background: var(--surface);
    }

    .vehicle__repair-options {
        display: grid;
        gap: 0.65rem;
        margin-top: 0.9rem;
    }

    .vehicle__repair-empty {
        margin: 0.9rem 0 0;
        color: #4f4333;
        font-style: italic;
    }

    .vehicle__issue-cta {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        justify-self: start;
        min-height: 3rem;
        padding: 0.55rem 0;
        border: 0;
        background: transparent;
        color: var(--bs-primary);
        font: inherit;
        font-weight: 700;
        cursor: pointer;
    }

    .vehicle__repair-image {
        width: 3.5rem;
        height: 3.5rem;
        flex: 0 0 auto;
        border-radius: 0.5rem;
        object-fit: cover;
    }

    .vehicle__meta {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--border);
    }

    .vehicle__link {
        width: fit-content;
        padding: 0.85rem 1.4rem;
        border-radius: 999px;
        background: var(--bs-primary);
        color: var(--rv-on-primary);
        font: inherit;
        font-weight: 700;
        text-decoration: none;
    }

    .vehicle__actions {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .vehicle__retry {
        min-height: 3rem;
        padding: 0.85rem 1.4rem;
        border: 0;
        border-radius: 999px;
        background: var(--rv-danger);
        color: var(--rv-on-primary);
        font: inherit;
        font-weight: 700;
        cursor: pointer;
    }

    @media (min-width: 600px) {
        .vehicle__journey {
            padding-top: 1.5rem;
        }

        .vehicle {
            padding: 1rem 0 3rem;
        }

        .vehicle__card,
        .vehicle__empty,
        .vehicle__loading,
        .vehicle__error {
            padding: 1.5rem;
        }

        .vehicle__meta-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.85rem;
        }

        .vehicle__identity {
            grid-template-columns: minmax(0, 1fr) minmax(12rem, 16rem);
            align-items: start;
        }

        .vehicle__issue {
            padding: 1rem;
        }

        .vehicle__actions {
            flex-direction: row;
            flex-wrap: wrap;
        }
    }