@charset "UTF-8";

:root {
    --paper: #f5f5ef;
    --surface: #fff;
    --ink: #18332d;
    --muted: #61716c;
    --green: #225b47;
    --lime: #d9ee94;
    --line: #dce2da;
    --danger: #a62932;
    --radius: 20px;
    --layout-wide: 1180px;
    --layout-work: 780px;
    font-family: "Segoe UI",system-ui,sans-serif;
    color: var(--ink);
    background: var(--paper);
    font-synthesis: none
}

* {
    box-sizing: border-box
}

@view-transition {
    navigation: auto
}

::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal
}

::view-transition-group(vehia-brand-marker) {
    animation-duration: 240ms;
    animation-timing-function: cubic-bezier(.2,.8,.2,1)
}

html {
    scrollbar-gutter: stable
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.65
}

a {
    color: var(--green);
    text-underline-offset: 4px
}

    a:hover {
        text-decoration-thickness: 2px
    }

button, input, select, textarea {
    font: inherit
}

button, .button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    border: 1px solid var(--green);
    border-radius: 11px;
    background: var(--green);
    color: #fff;
    padding: 12px 22px;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.5
}

    button:hover, .button:hover {
        background: #174334;
        color: #fff
    }

    button.secondary, .button.secondary {
        background: transparent;
        color: var(--green);
        border-color: #b8c9c0
    }

        button.secondary:hover, .button.secondary:hover {
            background: #eaf0e5
        }

[data-web-push-enable][hidden],
[data-web-push-disable][hidden] {
    display: none !important
}

.small {
    padding: 9px 16px
}

.shell {
    max-width: var(--layout-wide);
    margin-inline: auto;
    padding-inline: 30px
}

.site-header {
    background: #fcfcf8;
    border-bottom: 1px solid var(--line)
}

.nav {
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px
}

.brand {
    text-decoration: none
}

.brand-plan-shell {
    flex: 0 0 auto;
    display: inline-grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
    align-items: end
}

.vehia-plan-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    min-height: 16px;
    margin-top: -7px;
    position: relative;
    z-index: 2;
    margin-right: -12px;
    padding: 1px 5px;
    border: 1px solid #d8ddd6;
    border-radius: 999px;
    background: #fcfcf8;
    color: #69766e;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .01em
}

.vehia-plan-badge.is-plus {
    border-color: #d5dbd5;
    background: #fcfcf8;
    color: #3f6551
}

.vehia-wordmark {
    --vehia-letter-width: 30px;
    --vehia-marker-width: 34px;
    --vehia-marker-height: 40px;
    --vehia-marker-radius: 10px;
    --vehia-marker-x: -2px;
    --vehia-marker-bg: var(--green);
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: repeat(5,var(--vehia-letter-width));
    align-items: center;
    width: 150px;
    height: 40px;
    font-size: 23px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0
}

.vehia-wordmark-marker {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 0;
    width: var(--vehia-marker-width);
    height: var(--vehia-marker-height);
    border-radius: var(--vehia-marker-radius);
    background: var(--vehia-marker-bg);
    transform: translate(var(--vehia-marker-x),-50%);
    transition: transform 220ms cubic-bezier(.2,.8,.2,1),background-color 160ms ease;
    view-transition-name: vehia-brand-marker;
    pointer-events: none
}

.vehia-wordmark-letter {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: var(--vehia-letter-width);
    height: 40px;
    color: var(--green);
    transition: color 140ms ease
}

.vehia-wordmark-letter.is-active {
    width: var(--vehia-marker-width);
    height: var(--vehia-marker-height);
    border-radius: var(--vehia-marker-radius);
    background: var(--vehia-marker-bg);
    color: #fcfcf8;
    transform: translateX(-2px)
}

.vehia-wordmark:hover {
    --vehia-marker-bg: #174334
}

.vehia-section-v { --vehia-marker-x: -2px }
.vehia-section-e { --vehia-marker-x: 28px }
.vehia-section-h { --vehia-marker-x: 58px }
.vehia-section-i { --vehia-marker-x: 88px }
.vehia-section-a { --vehia-marker-x: 118px }

.nav-links {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    font-size: 14px
}

    .nav-links > a:not(.button) {
        text-decoration: none
    }

    .nav-links form {
        margin: 0
    }

.text-button {
    border: 0;
    background: none;
    padding: 0;
    color: var(--muted);
    font-weight: 400
}

    .text-button:hover {
        background: none;
        color: var(--green)
    }

.main {
    flex: 1 0 auto;
    width: 100%;
    min-height: 0;
    padding-top: 45px;
    padding-bottom: 70px
}

.hero {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    align-items: center;
    gap: 65px;
    padding: 35px 0 65px
}

.eyebrow {
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 750;
    color: var(--green);
    margin: 0 0 16px
}

h1, h2 {
    line-height: 1.14;
    letter-spacing: -1.3px;
    margin: 0 0 20px
}

h1 {
    font-size: clamp(32px,4.6vw,58px);
    font-weight: 650
}

h2 {
    font-size: 23px;
    letter-spacing: -.6px
}

p {
    margin: 0 0 20px
}

.lead {
    font-size: 18px;
    color: var(--muted);
    max-width: 550px
}

.muted, .hint {
    color: var(--muted);
    font-size: 14px
}

.hint {
    font-size: 13px;
    margin-top: 6px
}

.actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 30px 0 20px;
    align-items: flex-end
}

.garage-illustration {
    position: relative;
    background: #e5ead9;
    border-radius: 38px;
    min-height: 370px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.garage-roof {
    width: 210px;
    height: 100px;
    background: var(--green);
    clip-path: polygon(50% 0,100% 80%,90% 100%,50% 30%,10% 100%,0 80%)
}

.garage-door {
    width: 178px;
    height: 140px;
    margin-top: -20px;
    border: 12px solid var(--green);
    background: repeating-linear-gradient(0deg,#c3d29f 0,#c3d29f 24px,#afc18f 24px,#afc18f 27px);
    display: grid;
    place-items: center
}

    .garage-door span {
        font-size: 62px;
        color: var(--green);
        font-weight: 800
    }

.garage-caption {
    margin-top: 35px;
    letter-spacing: 2px;
    font-size: 12px;
    font-weight: 700;
    padding-inline: 10px;
}

.cards {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 20px
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px
}

    .card p {
        color: var(--muted)
    }

        .card p:last-child {
            margin: 0
        }

    .card form + form {
        margin-top: 10px
    }

.step {
    display: block;
    color: var(--green);
    font-size: 13px;
    margin-bottom: 30px
}

.auth-card {
    max-width: 500px;
    margin: 20px auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 36px
}

    .auth-card h1 {
        font-size: 34px
    }

    .auth-card > p {
        color: var(--muted)
    }

label:not(.checkbox) {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin: 15px 0 6px
}

input:not([type=checkbox]):not([type=hidden]) {
    width: 100%;
    border: 1px solid #b9c6bd;
    border-radius: 9px;
    background: #fdfefb;
    color: var(--ink);
    padding: 11px 12px;
    min-height: 48px
}

.contact-heading {
    margin-bottom: 24px
}

.contact-card {
    max-width: 720px
}

.contact-card select,
.contact-card textarea {
    width: 100%;
    border: 1px solid #b9c6bd;
    border-radius: 9px;
    background: #fdfefb;
    color: var(--ink);
    padding: 11px 12px
}

.contact-card select {
    min-height: 48px
}

.contact-card textarea {
    min-height: 170px;
    resize: vertical
}

.contact-card form > button {
    margin-top: 22px
}

.contact-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important
}

.checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
    font-size: 14px
}

    .checkbox input {
        width: 18px;
        height: 18px;
        accent-color: var(--green)
    }

.auth-card form > button {
    width: 100%;
    margin-top: 22px
}

.auth-card form {
    margin-bottom: 20px
}

.validation {
    color: var(--danger);
    font-size: 14px
}

    .validation ul {
        padding-left: 20px
    }

.validation-summary-valid {
    display: none
}

.input-validation-error {
    border-color: var(--danger) !important
}

.link-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-size: 14px;
    margin: 20px 0 0
}

.divider {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 12px;
    color: var(--muted);
    margin: 25px 0
}

    .divider:before, .divider:after {
        content: "";
        height: 1px;
        flex: 1;
        background: var(--line)
    }

.provider-list .button {
    width: 100%;
    margin: 0 0 10px
}

.auth-help {
    margin-top: 4px
}

.auth-switch {
    margin-top: 24px !important;
    margin-bottom: 0 !important
}

.site-footer {
    border-top: 1px solid var(--line);
    background: #fcfcf8
}

.footer {
    display: grid;
    grid-template-columns: minmax(220px,1fr) auto minmax(220px,1fr);
    grid-template-areas: "identity links meta";
    align-items: center;
    gap: 24px;
    padding-top: 24px;
    padding-bottom: 24px;
    color: var(--muted);
    font-size: 12px
}

.footer-identity,
.footer-meta {
    display: flex;
    align-items: center;
    gap: 10px 14px;
    flex-wrap: wrap
}

.footer-identity {
    grid-area: identity
}

.footer-brand {
    color: var(--green);
    font-size: 15px;
    letter-spacing: .04em
}

.footer-links {
    grid-area: links;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap
}

.footer-links a {
    color: var(--muted);
    font-weight: 650;
    text-decoration: none
}

.footer-links a:hover {
    color: var(--green)
}

.footer-meta {
    grid-area: meta;
    justify-content: flex-end
}

.footer-stage {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 9px;
    border: 1px solid #c9d7cf;
    border-radius: 999px;
    color: var(--green);
    font-weight: 700
}

.footer-author {
    color: var(--muted);
    font-weight: 700;
    text-decoration: none
}

.footer-author:hover {
    color: var(--green)
}

.page-heading {
    max-width: var(--layout-work);
    margin: 28px 0 32px
}

    .page-heading h1 {
        font-size: 44px
    }

    .page-heading p {
        color: var(--muted)
    }

.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    background: #eaf2dd;
    color: #31522d;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 16px
}

.notice {
    margin-top: 28px;
    padding: 28px;
    border: 1px dashed #b0bdae;
    border-radius: var(--radius)
}

    .notice p {
        margin: 8px 0 12px;
        color: var(--muted)
    }

.empty-state {
    padding: 75px 30px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius)
}

    .empty-state .eyebrow {
        display: block
    }

.faq {
    max-width: 850px
}

    .faq details {
        padding: 24px;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 14px;
        margin-bottom: 12px
    }

    .faq summary {
        font-weight: 650;
        font-size: 18px;
        cursor: pointer
    }

    .faq details[open] summary {
        margin-bottom: 20px
    }

    .faq p, .faq dd {
        color: var(--muted)
    }

    .faq dt {
        font-weight: 700
    }

    .faq dd {
        margin: 0 0 12px
    }

.break {
    overflow-wrap: anywhere
}

.skip {
    position: absolute;
    top: -100px;
    left: 15px;
    padding: 10px;
    background: #fff;
    z-index: 10
}

    .skip:focus {
        top: 8px
    }

:focus-visible {
    outline: 3px solid #73973d;
    outline-offset: 4px
}

.password-input {
    position: relative
}

    .password-input input {
        padding-right: 50px !important
    }

.password-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    padding: 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    display: grid;
    place-items: center
}

    .password-toggle:hover {
        background: #eef2ea;
        color: var(--green)
    }

    .password-toggle svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    .password-toggle:focus-visible {
        outline: 3px solid #73973d;
        outline-offset: 1px
    }

@media(max-width:900px) {
    .hero {
        gap: 25px
    }

    .cards {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .nav-links {
        gap: 12px 18px;
        justify-content: flex-end
    }

    .garage-illustration {
        min-height: 330px
    }
}

@media(max-width:960px) {
    .footer {
        grid-template-columns: minmax(0,1fr) auto;
        grid-template-areas:
            "identity meta"
            "links links";
        gap: 14px 24px
    }

    .footer-meta {
        justify-content: flex-end
    }
}

@media(max-width:620px) {
    .shell {
        padding-inline: 20px
    }

    .nav {
        display: block;
        min-height: 0
    }

    .nav-links {
        justify-content: flex-start;
        margin-top: 18px;
        font-size: 13px;
        gap: 14px
    }

        .nav-links .button {
            padding: 7px 12px
        }

    .main {
        padding-top: 22px;
        padding-bottom: 45px
    }

    .hero {
        grid-template-columns: 1fr;
        padding: 20px 0 30px;
        gap: 25px
    }

        .hero h1 {
            font-size: 40px
        }

    .garage-illustration {
        min-height: 265px
    }

    .garage-roof {
        width: 170px;
        height: 80px
    }

    .garage-door {
        width: 140px;
        height: 100px;
        margin-top: -12px
    }

        .garage-door span {
            font-size: 42px
        }

    .hero .eyebrow {
        letter-spacing: 1.4px;
        line-height: 1.4
    }

    .garage-illustration {
        padding-inline: 18px;
        box-sizing: border-box
    }

    .garage-caption {
        width: 100%;
        box-sizing: border-box;
        margin-top: 20px;
        font-size: 11px;
        line-height: 1.4;
        letter-spacing: 1.4px
    }

    .cards {
        grid-template-columns: 1fr
    }

    .auth-card {
        padding: 24px;
        margin: 10px auto
    }

        .auth-card h1 {
            font-size: 30px
        }

    .card {
        padding: 24px
    }

    .page-heading h1 {
        font-size: 36px
    }

    .footer {
        grid-template-columns: 1fr;
        grid-template-areas:
            "identity"
            "links"
            "meta";
        gap: 18px
    }

    .footer-identity,
    .footer-meta {
        justify-content: center
    }

    .footer-links {
        justify-content: center
    }

    .empty-state {
        padding: 45px 22px
    }

    .faq details {
        padding: 20px
    }

    .actions > .button,
    .actions > button {
        flex: 1;
        white-space: nowrap
    }
}

.status-message {
    margin: 0 0 1.25rem;
    padding: .85rem 1rem;
    border: 1px solid #b9d0bf;
    border-radius: 14px;
    background: #eef6e7;
    color: #173d32;
    font-weight: 700
}

.language-switcher {
    display: inline-flex;
    align-items: center;
    gap: 2px
}

.language-choice {
    min-width: 32px;
    padding: 6px 7px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35
}

    .language-choice:hover,
    .language-choice:focus-visible {
        background: #eef3e7;
        color: var(--green)
    }

    .language-choice:focus-visible {
        outline: 3px solid #87a78f;
        outline-offset: 1px
    }

    .language-choice.is-active {
        background: var(--green);
        color: #fff
    }

.language-divider {
    color: var(--muted);
    font-size: 12px;
    line-height: 1
}

.sharing-section {
    margin-bottom: 22px;
    max-width: 820px
}

    .sharing-section form {
        max-width: 520px
    }

        .sharing-section form button {
            margin-top: 18px
        }

.member-list {
    display: grid;
    gap: 10px
}

.member-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line)
}

.member-row-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap
}

    .member-row:last-child {
        border-bottom: 0
    }

    .member-row .badge {
        margin: 0;
        white-space: nowrap
    }

.pending-invitations {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--line)
}

    .pending-invitations h3 {
        margin: 0 0 12px;
        font-size: 17px
    }

.invitation-card .notice {
    margin: 18px 0
}

.invitation-warning p {
    margin-bottom: 0
}

@media(max-width:620px) {
    .member-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px
    }

    .member-row-controls {
        justify-content: flex-start
    }
}

.signed-in-user {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: var(--muted);
    padding: .35rem .55rem;
    border: 1px solid var(--line);
    border-radius: 999px
}

.garage-group {
    margin: 28px 0 34px
}

.garage-group-heading {
    margin-bottom: 14px
}

    .garage-group-heading h2 {
        margin: 4px 0 0;
        font-size: 22px
    }

.garage-group-title-link {
    color: inherit;
    text-decoration: none
}

.garage-group-title-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px
}

.garage-card h3 {
    font-size: 22px;
    margin: 16px 0 10px
}

.invitation-onboarding {
    margin: 22px 0
}

    .invitation-onboarding h2 {
        margin-top: 6px
    }

@media(max-width:900px) {
    .signed-in-user {
        max-width: 160px
    }
}

.garage-overview-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(280px,1fr));
    gap: 28px;
    align-items: start
}

    .garage-overview-grid .garage-group {
        margin-top: 28px
    }

        .garage-overview-grid .garage-group .cards {
            grid-template-columns: repeat(auto-fit,minmax(250px,320px))
        }

.sharing-limit-notice {
    margin: 20px 0;
    max-width: var(--layout-work)
}

@media(max-width:850px) {
    .garage-overview-grid {
        grid-template-columns: 1fr
    }
}

/* GARAGE-UI-01: dashboard cards behave as garage widgets without hiding direct vehicle actions. */
.garage-home-heading,
.garage-private-heading {
    max-width: var(--layout-wide)
}

.garage-home-heading > p:last-child {
    max-width: 920px
}

.garage-dashboard-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%
}

.garage-dashboard-card-compact .garage-card-vehicles {
    margin: 0;
    padding-top: 0;
    border-top: 0
}

.garage-card-surface-link {
    position: absolute;
    z-index: 1;
    inset: 0;
    border-radius: inherit
}

.garage-dashboard-card:hover {
    border-color: #8fa494
}

.garage-card-surface-link:focus-visible {
    outline: 3px solid #87a78f;
    outline-offset: 3px
}

.garage-card-vehicles {
    position: relative;
    z-index: 2;
    pointer-events: none;
    margin: 20px 0 22px;
    padding-top: 16px;
    border-top: 1px solid var(--line)
}

.garage-card-vehicles-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 13px
}

.garage-card-empty {
    margin: 0 0 10px !important;
    font-size: 14px
}

.garage-vehicle-link {
    pointer-events: auto;
    display: grid;
    grid-template-columns: 54px minmax(0,1fr);
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fdfefb;
    color: var(--ink);
    text-decoration: none
}

.garage-vehicle-link:hover {
    border-color: #8fa494;
    background: #f7faf5
}

.garage-vehicle-name {
    font-weight: 700
}

.garage-vehicle-meta {
    color: var(--muted);
    font-size: 12px
}

.garage-vehicle-thumb,
.garage-vehicle-card-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: linear-gradient(145deg,#eef2ec,#e3e9e1)
}

.garage-vehicle-thumb {
    width: 54px;
    height: 42px
}

.garage-vehicle-thumb img,
.garage-vehicle-card-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.garage-vehicle-thumb-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--green)
}

.vehicle-type-icon {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain
}

.garage-vehicle-card-thumb .vehicle-type-icon {
    width: 56px;
    height: 56px
}

.garage-vehicle-link-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px
}

.garage-card-inline-link {
    position: relative;
    pointer-events: auto;
    z-index: 2;
    display: inline-block;
    margin-top: 6px;
    font-size: 13px
}

.garage-card-add-vehicle {
    font-weight: 700
}

@media(max-width:620px) {
    .garage-card-vehicles-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px
    }
}

/* PWA-DASHBOARD-01B: per-user vehicle shortcuts above the workspace dashboard. */
.garage-quick-access {
    max-width: var(--layout-wide);
    margin: 8px 0 4px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8faf6
}

.garage-quick-access-label {
    margin: 0 0 12px
}

.garage-quick-access-empty {
    margin: 0;
    color: var(--muted);
    font-size: 14px
}

.garage-quick-access-list {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(230px,1fr));
    gap: 10px
}

.garage-quick-vehicle-card {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff
}

.garage-quick-vehicle-main {
    display: grid;
    grid-template-columns: 62px minmax(0,1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px;
    color: var(--ink);
    text-decoration: none
}

.garage-quick-vehicle-main:hover,
.garage-quick-vehicle-main:focus-visible {
    background: #f4f8f1
}

.garage-quick-vehicle-thumb {
    display: flex;
    width: 62px;
    height: 48px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: linear-gradient(145deg,#eef2ec,#e3e9e1)
}

.garage-quick-vehicle-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.garage-quick-vehicle-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px
}

.garage-quick-vehicle-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.garage-quick-vehicle-copy span {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.garage-quick-vehicle-actions {
    display: flex;
    align-items: stretch;
    border-left: 1px solid var(--line)
}

.garage-quick-odometer-action,
.garage-quick-fueling-action {
    display: flex;
    min-width: 54px;
    align-items: center;
    justify-content: center;
    padding: 8px 9px;
    color: var(--green);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none
}

.garage-quick-fueling-action {
    border-left: 1px solid var(--line);
    font-size: 17px
}

.garage-quick-odometer-action:hover,
.garage-quick-odometer-action:focus-visible,
.garage-quick-fueling-action:hover,
.garage-quick-fueling-action:focus-visible {
    background: #edf4e8
}

.vehicle-quick-access-toolbar {
    display: flex;
    justify-content: flex-end;
    max-width: var(--layout-wide);
    margin: -12px 0 10px
}

.vehicle-quick-access-toolbar form {
    margin: 0
}

.vehicle-quick-access-toggle {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--green);
    font-size: 13px;
    font-weight: 700
}

.vehicle-quick-access-toggle:hover,
.vehicle-quick-access-toggle:focus-visible,
.vehicle-quick-access-toggle.is-pinned {
    border-color: #9aaf9e;
    background: #f1f6ee;
    color: var(--green)
}

.vehicle-quick-access-symbol {
    font-size: 17px;
    line-height: 1
}

@media(max-width:620px) {
    .garage-quick-access {
        margin-top: 0;
        padding: 14px
    }

    .garage-quick-access-list {
        grid-template-columns: 1fr
    }

    .vehicle-quick-access-toolbar {
        justify-content: flex-start;
        margin-top: -6px
    }
}

/* VEHICLE-DETAIL-01: vehicle dashboard and whole-card navigation. */
.vehicle-detail-heading {
    max-width: var(--layout-wide);
    margin-bottom: 24px
}

.vehicle-detail-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 20px
}

.vehicle-dashboard-card {
    display: block;
    min-height: 180px;
    color: var(--ink);
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease, background .15s ease
}

.vehicle-dashboard-card:hover {
    border-color: #8fa494;
    background: #fbfdf9;
    transform: translateY(-1px)
}

.vehicle-dashboard-card .eyebrow {
    margin-bottom: 10px
}

.vehicle-dashboard-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px
}

.vehicle-dashboard-card-title h2 {
    margin: 0;
    font-size: 24px
}

.vehicle-dashboard-arrow {
    font-size: 24px;
    line-height: 1;
    color: var(--green)
}

.vehicle-dashboard-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 0
}

.vehicle-dashboard-summary span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef3e7;
    font-weight: 700;
    font-size: 14px
}

.vehicle-dashboard-card > p,
.vehicle-dashboard-empty {
    color: var(--muted);
    margin-bottom: 0
}

.vehicle-dashboard-card-wide {
    grid-column: 1 / -1;
    min-height: 190px
}

/* VEHICLE-SHARING-UX-02: compact sharing status and explicit destructive actions. */
.vehicle-sharing-compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 22px;
    padding: 18px 20px;
    border: 1px dashed #b8c9c0;
    border-radius: 18px;
    background: rgba(255,255,255,.35)
}

.vehicle-sharing-compact-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0
}

.vehicle-sharing-compact-main .eyebrow {
    margin: 0
}

.vehicle-sharing-compact-main strong {
    font-size: 16px
}

.vehicle-sharing-compact-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 14px
}

.vehicle-inline-danger,
.vehicle-danger-action {
    border: 0;
    background: transparent;
    color: var(--danger);
    box-shadow: none
}

.vehicle-inline-danger {
    gap: 10px;
    padding: 0;
    border-radius: 0;
    opacity: .78;
    font-size: 14px
}

.vehicle-inline-danger:hover,
.vehicle-inline-danger:focus-visible,
.vehicle-danger-action:hover,
.vehicle-danger-action:focus-visible {
    background: transparent;
    color: var(--danger);
    opacity: 1
}

.vehicle-danger-zone {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line)
}

.vehicle-danger-action {
    gap: 10px;
    padding: 4px 0;
    opacity: .72;
    font-weight: 650
}

.vehicle-danger-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 18px;
    line-height: 1
}

.vehia-dialog button.danger {
    border-color: var(--danger);
    background: var(--danger);
    color: #fff
}

.vehia-dialog button.danger:hover,
.vehia-dialog button.danger:focus-visible {
    border-color: #7f1f26;
    background: #7f1f26;
    color: #fff
}

@media (max-width: 760px) {
    .vehicle-sharing-compact {
        align-items: flex-start;
        padding: 16px
    }

    .vehicle-sharing-compact-actions {
        width: 100%;
        align-items: flex-start;
        flex-direction: column;
        gap: 10px
    }

    .vehicle-danger-symbol {
        width: 44px;
        height: 44px;
        min-width: 44px
    }
}

.vehicle-section-edit-card {
    max-width: 760px
}


.vehicle-history-foundation {
    max-width: 820px
}

.vehicle-history-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px
}

.vehicle-history-preview span {
    padding: 7px 11px;
    border-radius: 999px;
    background: #eef3e7;
    font-size: 13px;
    font-weight: 700
}

.garage-vehicle-card-link {
    position: relative;
    display: block;
    color: var(--ink);
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease, background .15s ease
}

.garage-vehicle-card-layout {
    display: grid;
    grid-template-columns: 96px minmax(0,1fr);
    grid-template-areas:
        "thumb badges"
        "content content";
    align-items: start;
    column-gap: 16px;
    row-gap: 14px;
    padding-right: 24px
}

.garage-vehicle-card-thumb {
    grid-area: thumb;
    width: 96px;
    height: 72px
}

.garage-vehicle-card-content {
    grid-area: content;
    min-width: 0
}

.garage-vehicle-card-content h3 {
    margin: 0 0 8px;
    font-size: 21px;
    line-height: 1.2
}

.garage-vehicle-card-content p:last-child {
    margin-bottom: 0
}

.garage-vehicle-card-meta {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55
}

.garage-vehicle-card-layout > .garage-vehicle-card-badges {
    grid-area: badges;
    align-self: start;
    justify-content: flex-start
}

.garage-vehicle-card-badges .badge,
.garage-vehicle-card-content > .badge {
    margin-bottom: 0
}

.garage-vehicle-card-link:hover {
    border-color: #8fa494;
    background: #fbfdf9;
    transform: translateY(-1px)
}

.garage-vehicle-card-arrow {
    position: absolute;
    right: 22px;
    bottom: 20px;
    color: var(--green);
    font-size: 22px
}

@media(max-width:620px) {
    .garage-vehicle-card-layout {
        grid-template-columns: 72px minmax(0,1fr);
        gap: 12px
    }

    .garage-vehicle-card-thumb {
        width: 72px;
        height: 54px
    }
}

@media(max-width:720px) {
    .vehicle-detail-grid {
        grid-template-columns: 1fr
    }

    .vehicle-dashboard-card-wide {
        grid-column: auto
    }
}

.vehicle-odometer-updated {
    margin: -2px 0 10px !important;
    font-size: 12px;
    color: var(--muted)
}

/* MAINTENANCE-01: history/reminder foundation. */
.garage-secondary-notice {
    margin-top: 30px
}


.vehicle-history-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 20px
}

.vehicle-history-section {
    min-width: 0
}

.vehicle-history-section-heading h2 {
    margin-top: 0
}

.vehicle-record-list {
    display: grid;
    gap: 10px;
    margin: 20px 0
}

.vehicle-record-row {
    padding: 14px 0;
    border-top: 1px solid var(--line)
}

.vehicle-record-row:first-child {
    border-top: 0;
    padding-top: 0
}

.vehicle-record-row p {
    margin: 8px 0 0;
    color: var(--muted)
}

.vehicle-record-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px
}

.vehicle-record-form {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line)
}

.vehicle-record-form summary {
    cursor: pointer;
    color: var(--green);
    font-weight: 700
}

.vehicle-record-form form {
    margin-top: 18px
}

.form-grid.two-columns {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 16px
}

.form-hint {
    margin-top: 8px;
    color: var(--muted);
    font-size: 13px
}

@media(max-width:760px) {
    .vehicle-history-grid,
    .form-grid.two-columns {
        grid-template-columns: 1fr
    }
}

/* MAINTENANCE-03: event-owned reminders and event actions. */
.vehicle-record-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
    flex-wrap: wrap
}

.vehicle-record-actions form {
    margin: 0
}

.vehicle-record-actions .text-button {
    padding: 0
}

.vehicle-record-source {
    font-size: 13px;
    color: var(--muted)
}

/* MAINTENANCE-04: oil-change event details and reminder cue. */
.vehicle-event-options {
    display: grid;
    gap: 8px;
    margin: 18px 0;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 10px
}

.vehicle-event-options legend {
    padding: 0 6px;
    font-weight: 700
}

.vehicle-event-subtitle {
    margin: 22px 0 10px;
    font-size: 16px
}

.vehicle-reminder-clock {
    font-size: 16px;
    line-height: 1
}

/* HISTORY-UX-01: upcoming actions first, then full-width clickable history. */
.vehicle-history-upcoming {
    margin-bottom: 20px
}

.vehicle-upcoming-list,
.vehicle-history-event-list {
    display: grid;
    gap: 8px;
    margin-top: 18px
}

.vehicle-upcoming-row,
.vehicle-history-event-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fdfefb;
    color: var(--ink);
    text-decoration: none
}

.vehicle-upcoming-row[href]:hover,
.vehicle-history-event-row:hover {
    border-color: #8fa494;
    background: #fbfcf8
}

.vehicle-upcoming-row[id] {
    scroll-margin-top: 96px
}

.vehicle-upcoming-row:target,
.vehicle-upcoming-row-focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(34,91,71,.12)
}

.vehicle-reminder-complete-form {
    margin: 0;
    flex: 0 0 auto
}

.vehicle-reminder-complete-button {
    white-space: nowrap
}

.vehicle-upcoming-main-link {
    color: inherit;
    text-decoration: none
}

.vehicle-upcoming-main-link:hover strong {
    text-decoration: underline
}

.vehicle-upcoming-side {
    display: grid;
    justify-items: end;
    gap: 8px;
    flex: 0 0 auto
}

.vehicle-reminder-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px
}

.vehicle-reminder-actions .text-button {
    white-space: nowrap
}

.vehicle-upcoming-main,
.vehicle-history-event-main {
    display: grid;
    gap: 4px;
    min-width: 0
}

.vehicle-upcoming-context,
.vehicle-upcoming-note,
.vehicle-upcoming-due {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--muted);
    font-size: 13px
}

.vehicle-upcoming-note {
    display: block
}

.vehicle-upcoming-due {
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap
}

.vehicle-history-stack {
    display: grid;
    gap: 20px
}

.vehicle-history-section-heading-actions {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px
}

.vehicle-disclosure-button {
    display: inline-flex;
    width: auto;
    list-style: none
}

.vehicle-disclosure-button::-webkit-details-marker {
    display: none
}

.vehicle-record-form > .vehicle-disclosure-button {
    margin-bottom: 0
}

.vehicle-history-event-row {
    align-items: flex-start
}

.vehicle-history-event-note {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 13px
}

.vehicle-history-event-arrow {
    color: var(--green);
    font-size: 20px;
    line-height: 1
}

.vehicle-custom-reminder-card {
    max-width: 680px
}

.vehicle-custom-reminder-card .vehicle-record-form {
    margin-top: 14px
}

.vehicle-history-edit-delete {
    max-width: 760px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line)
}

.vehicle-history-edit-delete form {
    margin: 0
}

/* RESPONSIVE-01J: compact dashboard history = next reminders + latest events. */
.vehicle-history-dashboard-preview {
    display: grid;
    gap: 16px;
    margin-top: 18px
}

.vehicle-history-dashboard-section {
    min-width: 0
}

.vehicle-history-dashboard-section + .vehicle-history-dashboard-section {
    padding-top: 14px;
    border-top: 1px solid var(--line)
}

.vehicle-history-dashboard-section-title {
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase
}

.vehicle-history-dashboard-rows {
    display: grid
}

.vehicle-history-dashboard-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    padding: 9px 0;
    border-bottom: 1px solid var(--line)
}

.vehicle-history-dashboard-main {
    display: grid;
    gap: 2px;
    min-width: 0
}

.vehicle-history-dashboard-main strong {
    line-height: 1.35
}

.vehicle-history-dashboard-meta,
.vehicle-history-dashboard-due {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    color: var(--muted);
    font-size: 13px
}

.vehicle-history-dashboard-due {
    flex: 0 1 auto;
    align-items: center;
    justify-content: flex-end;
    text-align: right
}

.vehicle-history-dashboard-open {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 2px;
    color: var(--green);
    font-size: 13px;
    font-weight: 800
}

@media(max-width:620px) {
    .vehicle-history-dashboard-preview {
        gap: 14px;
        margin-top: 16px
    }

    .vehicle-history-dashboard-section + .vehicle-history-dashboard-section {
        padding-top: 12px
    }

    .vehicle-history-dashboard-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
        padding: 9px 0
    }

    .vehicle-history-dashboard-due {
        justify-content: flex-start;
        text-align: left
    }
}


/* HISTORY-UX-02: full-width maintenance layout and consistent form controls. */
.vehicle-history-edit-card {
    max-width: none
}

.vehicle-record-form select,
.vehicle-record-form textarea,
.vehicle-history-edit-card select,
.vehicle-history-edit-card textarea,
.vehicle-custom-reminder-card select,
.vehicle-custom-reminder-card textarea {
    width: 100%;
    border: 1px solid #b9c6bd;
    border-radius: 9px;
    background-color: #fdfefb;
    color: var(--ink);
    padding: 11px 12px;
    min-height: 48px;
    font: inherit
}

.vehicle-record-form select,
.vehicle-history-edit-card select,
.vehicle-custom-reminder-card select {
    appearance: none;
    padding-right: 40px;
    background-image: linear-gradient(45deg,transparent 50%,var(--green) 50%),linear-gradient(135deg,var(--green) 50%,transparent 50%);
    background-position: calc(100% - 18px) 50%,calc(100% - 12px) 50%;
    background-size: 6px 6px,6px 6px;
    background-repeat: no-repeat
}

.vehicle-record-form textarea,
.vehicle-history-edit-card textarea,
.vehicle-custom-reminder-card textarea {
    min-height: 110px;
    resize: vertical
}

.vehicle-record-form select:focus,
.vehicle-record-form textarea:focus,
.vehicle-history-edit-card select:focus,
.vehicle-history-edit-card textarea:focus,
.vehicle-custom-reminder-card select:focus,
.vehicle-custom-reminder-card textarea:focus {
    outline: 2px solid rgba(34,91,71,.18);
    outline-offset: 1px;
    border-color: var(--green)
}

@media(max-width:760px) {
    .vehicle-upcoming-row,
    .vehicle-history-event-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px
    }

    .vehicle-upcoming-due {
        justify-content: flex-start;
        white-space: normal
    }
}

/* LAYOUT-01 + ODOMETER-01 + RESPONSIVE-01I: the odometer card itself is the update affordance. */
.vehicle-odometer-quick {
    margin: 0 0 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fdfefb;
    overflow: hidden
}

.vehicle-odometer-quick-summary {
    display: grid;
    justify-items: center;
    gap: 4px;
    width: 100%;
    padding: 18px 20px;
    text-align: center
}

.vehicle-odometer-quick-editable > summary {
    cursor: pointer;
    list-style: none;
    transition: background .16s ease, border-color .16s ease
}

.vehicle-odometer-quick-editable > summary::-webkit-details-marker {
    display: none
}

.vehicle-odometer-quick-editable > summary:hover,
.vehicle-odometer-quick-editable > summary:focus-visible {
    background: #f6f9f2
}

.vehicle-odometer-quick-editable > summary:focus-visible {
    outline: 2px solid rgba(34,91,71,.24);
    outline-offset: -4px
}

.vehicle-odometer-quick-label {
    color: var(--green);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase
}

.vehicle-odometer-quick-summary strong {
    font-size: 24px;
    line-height: 1.2
}

.vehicle-odometer-quick-updated {
    color: var(--muted);
    font-size: 12px
}

.vehicle-odometer-quick-form-shell {
    max-width: 560px;
    margin: 0 auto;
    padding: 16px 20px 20px;
    border-top: 1px solid var(--line);
    text-align: start
}

.vehicle-odometer-quick-form-shell label {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
    font-size: 13px
}

.vehicle-odometer-quick-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px
}

.vehicle-odometer-quick-form input {
    width: 100%;
    margin: 0
}

.vehicle-odometer-history {
    margin-top: 20px;
    max-width: var(--layout-work)
}

.vehicle-odometer-history h2 {
    margin-top: 0
}

.vehicle-odometer-history-list {
    display: grid;
    gap: 8px;
    margin-top: 18px
}

.vehicle-odometer-history-row {
    display: grid;
    grid-template-columns: minmax(120px, .8fr) minmax(160px, 1fr) minmax(140px, 1fr);
    gap: 12px;
    align-items: baseline;
    padding: 10px 0;
    border-top: 1px solid var(--line)
}

.vehicle-odometer-history-row span {
    color: var(--muted);
    font-size: 13px
}

@media(max-width:720px) {
    .vehicle-odometer-quick-summary {
        padding: 18px 16px
    }

    .vehicle-odometer-quick-form-shell {
        padding: 16px
    }

    .vehicle-odometer-quick-form {
        grid-template-columns: 1fr
    }

    .vehicle-odometer-history-row {
        grid-template-columns: 1fr;
        gap: 3px
    }
}

/* PRIVATE-GARAGE-UX-01: compact private garage hierarchy and add-vehicle tile. */
.breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 28px;
    color: var(--muted);
    font-size: 14px
}

.breadcrumbs a {
    color: var(--green)
}

.breadcrumb-segment {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%
}

.breadcrumb-segment > a,
.breadcrumb-segment > .breadcrumb-current {
    min-width: 0;
    overflow-wrap: anywhere
}

.garage-private-vehicle-grid,
.shared-garage-vehicles .cards {
    grid-template-columns: repeat(auto-fit,minmax(300px,340px));
    justify-content: start
}

.garage-private-vehicle-grid .garage-card,
.shared-garage-vehicles .garage-card {
    min-height: 188px
}

.garage-add-vehicle-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-style: dashed;
    color: var(--green);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease, background .15s ease
}

.garage-add-vehicle-card:hover {
    border-color: #8fa494;
    background: #fbfdf9;
    transform: translateY(-1px)
}

.garage-add-vehicle-plus {
    font-size: 42px;
    font-weight: 400;
    line-height: 1
}

@media(max-width:620px) {
    .garage-private-vehicle-grid,
    .shared-garage-vehicles .cards {
        grid-template-columns: 1fr
    }

    .garage-private-vehicle-grid .garage-card {
        min-height: 180px
    }
}

/* SHARED-GARAGE-UX-01: compact shared garage management and modal actions. */
.shared-garage-heading,
.shared-garage-panel,
.shared-garage-vehicles {
    max-width: var(--layout-work)
}

.shared-garage-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap
}

.shared-garage-title-row h1 {
    margin-bottom: 0
}

.shared-garage-title-action {
    white-space: nowrap
}

.shared-members-panel {
    padding: 0;
    overflow: hidden
}

.shared-members-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 28px;
    cursor: pointer;
    list-style: none
}

.shared-members-summary::-webkit-details-marker {
    display: none
}

.shared-members-summary-title {
    display: flex;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2
}

.shared-members-count {
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap
}

.shared-members-chevron {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-right: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .16s ease
}

.shared-members-accordion[open] .shared-members-chevron {
    transform: rotate(225deg) translate(-1px, -1px)
}

.shared-members-summary:hover .shared-members-summary-title,
.shared-members-summary:focus-visible .shared-members-summary-title {
    color: var(--green)
}

.shared-members-summary:focus-visible {
    outline: 2px solid rgba(34, 91, 71, .28);
    outline-offset: -4px;
    border-radius: calc(var(--radius) - 4px)
}

.shared-members-content {
    padding: 0 28px 28px
}

.shared-member-list {
    gap: 0
}

.shared-member-row {
    padding: 0;
    gap: 10px;
    align-items: stretch
}

.shared-member-access-trigger {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font-weight: 400;
    text-align: left
}

.shared-member-access-trigger:hover {
    background: transparent;
    color: var(--ink)
}

.shared-member-access-trigger:hover .break,
.shared-member-access-trigger:focus-visible .break {
    color: var(--green);
    text-decoration: underline;
    text-underline-offset: 4px
}

.shared-member-access-trigger .badge {
    margin: 0;
    white-space: nowrap
}

.shared-member-remove-leading {
    align-self: center
}

.member-remove-button,
.dialog-icon-button {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--green);
    border-color: var(--line);
    font-size: 20px;
    font-weight: 400;
    line-height: 1
}

.member-remove-button:hover,
.dialog-icon-button:hover {
    background: #eef2ec;
    color: var(--green)
}

.member-invite-row {
    width: 100%;
    justify-content: flex-start;
    gap: 10px;
    padding: 15px 0 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--green);
    font-weight: 650
}

.member-invite-row:hover {
    background: transparent;
    color: var(--green);
    text-decoration: underline;
    text-underline-offset: 4px
}

.member-invite-row span:first-child {
    font-size: 24px;
    font-weight: 400;
    line-height: 1
}

.shared-member-leave {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--line)
}

.vehia-dialog {
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    padding: 28px;
    box-shadow: 0 24px 70px rgba(24, 51, 45, .22)
}

.vehia-dialog::backdrop {
    background: rgba(24, 51, 45, .34)
}

.vehia-dialog h2 {
    margin-bottom: 0
}

.vehia-dialog form {
    max-width: none
}

.vehia-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px
}

.vehia-dialog-header .eyebrow {
    margin-bottom: 8px
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 24px
}

.vehia-dialog .dialog-actions button {
    margin-top: 0
}

.member-access-list {
    display: grid;
    gap: 0;
    margin-top: 18px;
    border-top: 1px solid var(--line)
}

.member-access-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line)
}

.member-access-row .badge {
    margin: 0;
    white-space: nowrap
}

@media(max-width:620px) {
    .shared-members-panel {
        padding: 0
    }

    .shared-member-row {
        flex-direction: row;
        align-items: stretch;
        gap: 8px
    }

    .shared-member-access-trigger {
        width: 100%;
        gap: 10px
    }

    .member-access-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px
    }

    .dialog-actions {
        flex-direction: column-reverse
    }

    .dialog-actions button {
        width: 100%
    }
}

/* VEHICLE-CREATE-UX-01: short manual vehicle onboarding; integrations stay out of the normal create UI. */
.vehicle-create-heading,
.vehicle-create-card {
    max-width: var(--layout-work)
}

.vehicle-create-heading {
    margin-bottom: 28px
}

.vehicle-create-card {
    padding: 28px
}

.vehicle-create-form h2 {
    margin: 0 0 22px
}

.vehicle-create-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px 22px
}

.vehicle-create-field {
    min-width: 0
}

.vehicle-create-field label:not(.checkbox) {
    margin: 0 0 6px
}

.vehicle-create-form select {
    width: 100%;
    min-height: 48px;
    border: 1px solid #b9c6bd;
    border-radius: 9px;
    appearance: none;
    background-color: #fdfefb;
    background-image: linear-gradient(45deg,transparent 50%,var(--green) 50%),linear-gradient(135deg,var(--green) 50%,transparent 50%);
    background-position: calc(100% - 18px) 50%,calc(100% - 12px) 50%;
    background-size: 6px 6px,6px 6px;
    background-repeat: no-repeat;
    color: var(--ink);
    padding: 11px 40px 11px 12px;
    font: inherit
}

.vehicle-create-form select:focus {
    outline: 2px solid rgba(34,91,71,.18);
    outline-offset: 1px;
    border-color: var(--green)
}

.vehicle-create-field .validation {
    display: block;
    margin-top: 4px
}

.vehicle-create-type-hint {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.45
}

.vehicle-create-actions {
    margin: 26px 0 0
}

@media(max-width:700px) {
    .vehicle-create-grid {
        grid-template-columns: 1fr
    }
}

/* VEHICLE-TECHNICAL-UX-01: compact, grouped technical profile editor. */
.vehicle-technical-heading,
.vehicle-technical-card {
    max-width: var(--layout-work)
}

.vehicle-technical-card {
    padding: 28px
}

.vehicle-technical-section + .vehicle-technical-section {
    margin-top: 30px;
    padding-top: 28px;
    border-top: 1px solid var(--line)
}

.vehicle-technical-section h2 {
    margin: 0 0 18px;
    font-size: 21px
}

.vehicle-technical-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px 20px
}

.vehicle-technical-field {
    min-width: 0
}

.vehicle-technical-field label {
    margin-top: 0
}

.vehicle-technical-field select,
.vehicle-technical-field textarea {
    width: 100%;
    border: 1px solid #b9c6bd;
    border-radius: 9px;
    background: #fdfefb;
    color: var(--ink);
    padding: 11px 12px;
    min-height: 48px;
    font: inherit
}

.vehicle-technical-field select {
    appearance: auto
}

.vehicle-technical-field textarea {
    min-height: 110px;
    resize: vertical
}

.vehicle-technical-field select:focus,
.vehicle-technical-field textarea:focus {
    outline: 2px solid color-mix(in srgb,var(--green) 25%,transparent);
    outline-offset: 1px;
    border-color: var(--green)
}

.vehicle-technical-field-full {
    grid-column: 1 / -1
}

.vehicle-technical-notes {
    margin-top: 30px;
    padding-top: 28px;
    border-top: 1px solid var(--line)
}

.vehicle-technical-actions {
    margin-bottom: 0
}

@media(max-width:700px) {
    .vehicle-technical-grid {
        grid-template-columns: 1fr
    }

    .vehicle-technical-field-full {
        grid-column: auto
    }
}


/* VEHICLE-OPERATING-UX-01: shared work-width rhythm and compact operational editor. */
.vehicle-operational-heading,
.vehicle-operational-card {
    max-width: var(--layout-work)
}

.vehicle-operational-card {
    padding: 28px
}

.vehicle-operational-form h2 {
    margin: 0 0 20px;
    font-size: 21px
}

.vehicle-operational-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px 20px
}

.vehicle-operational-field {
    min-width: 0
}

.vehicle-operational-field label {
    margin-top: 0
}

.vehicle-operational-field .validation {
    display: block;
    margin-top: 4px
}

.vehicle-operational-actions {
    margin: 26px 0 0
}

@media(max-width:700px) {
    .vehicle-operational-grid {
        grid-template-columns: 1fr
    }
}

/* VEHICLE-HISTORY-UX-01: scalable history with full-width reminders and server paging. */
.vehicle-history-heading,
.vehicle-history-upcoming,
.vehicle-history-section {
    max-width: var(--layout-wide)
}

.vehicle-history-upcoming {
    margin-top: 24px
}

.vehicle-history-section {
    margin-top: 0
}

.vehicle-history-event-list {
    margin-top: 18px
}

.vehicle-history-pagination {
    display: grid;
    grid-template-columns: minmax(150px,1fr) auto minmax(150px,1fr);
    gap: 16px;
    align-items: center;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--line)
}

.vehicle-history-page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px
}

.vehicle-history-page-link {
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fdfefb;
    color: var(--green);
    text-decoration: none;
    font-weight: 650
}

.vehicle-history-page-link:hover {
    border-color: #8fa494;
    background: #fbfcf8
}

.vehicle-history-page-link.is-current {
    border-color: var(--green);
    background: var(--green);
    color: #fff
}

.vehicle-history-page-link.is-disabled {
    border-color: transparent;
    background: transparent;
    color: var(--muted);
    font-weight: 400;
    opacity: .65
}

.vehicle-history-page-direction:first-child {
    justify-self: start
}

.vehicle-history-page-direction:last-child {
    justify-self: end
}

.vehicle-history-page-ellipsis {
    color: var(--muted)
}

.vehicle-history-page-summary {
    margin: 8px 0 0;
    text-align: center;
    color: var(--muted);
    font-size: 13px
}

.vehicle-custom-reminder-card {
    max-width: var(--layout-work)
}

@media(max-width:760px) {
    .vehicle-history-pagination {
        grid-template-columns: 1fr 1fr;
        gap: 10px
    }

    .vehicle-history-page-numbers {
        grid-column: 1 / -1;
        grid-row: 1;
        flex-wrap: wrap
    }

    .vehicle-history-page-direction:first-child {
        grid-column: 1;
        grid-row: 2
    }

    .vehicle-history-page-direction:last-child {
        grid-column: 2;
        grid-row: 2
    }
}


/* HISTORY-ACTIONS-UX-01 / FIX-02: + and - are part of the same event-row language. */
.vehicle-history-add-disclosure {
    margin-top: 16px
}

.vehicle-history-add-row {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    min-height: 70px;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fdfefb;
    color: var(--ink);
    cursor: pointer;
    font-weight: 650;
    list-style: none
}

.vehicle-history-add-row::-webkit-details-marker {
    display: none
}

.vehicle-history-add-row:hover {
    border-color: #8fa494;
    background: #fbfcf8
}

.history-add-state {
    display: inline-flex;
    align-items: center;
    gap: 18px
}

.history-add-state-open {
    display: none
}

.vehicle-history-add-disclosure[open] > .vehicle-history-add-row .history-add-state-closed {
    display: none
}

.vehicle-history-add-disclosure[open] > .vehicle-history-add-row .history-add-state-open {
    display: inline-flex
}

.vehicle-history-add-disclosure[open] > .vehicle-history-add-row .history-action-symbol,
.vehicle-history-add-disclosure[open] > .vehicle-history-add-row .history-action-title {
    color: var(--danger)
}

.history-action-symbol,
.history-remove-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--green);
    font-size: 22px;
    font-weight: 400;
    line-height: 1
}

.history-action-title {
    color: var(--green)
}

.vehicle-history-event-item {
    min-width: 0
}

.vehicle-history-event-item .vehicle-history-event-row {
    width: 100%;
    min-width: 0;
    align-items: center
}

.vehicle-history-event-link {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    align-self: stretch;
    flex: 1;
    gap: 18px;
    min-width: 0;
    color: inherit;
    text-decoration: none
}

.history-remove-button {
    flex: 0 0 44px
}

.history-remove-button:hover,
.history-remove-button:focus-visible {
    background: #eef2ec;
    color: var(--green)
}

@media (max-width: 760px) {
    .vehicle-history-add-row,
    .vehicle-history-event-row {
        padding-left: 10px;
        padding-right: 10px
    }

    .vehicle-history-event-row {
        flex-direction: row;
        align-items: center;
        gap: 10px
    }

    .history-action-symbol,
    .history-remove-button {
        width: 46px;
        height: 46px;
        min-width: 46px
    }
}

/* HISTORY-VALIDATION-UX-01: conditional required markers for maintenance forms. */
.required-marker {
    margin-left: 4px;
    color: var(--danger);
    font-weight: 700
}

.required-marker[hidden] {
    display: none
}

/* HISTORY-REMINDERS-02: custom reminders live with upcoming reminders. */
.vehicle-history-upcoming .vehicle-custom-reminder-disclosure {
    margin-top: 16px;
    padding-top: 0;
    border-top: 0
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important
}

/* VEHICLE-ACCESS-MODAL-UX-01: calmer sharing card and in-place access management. */
.vehicle-sharing-compact {
    border-style: solid;
    border-color: var(--line);
    background: var(--surface)
}

.vehicle-sharing-manage {
    color: var(--green);
    text-decoration: underline;
    text-underline-offset: 4px
}

.vehicle-sharing-manage:hover,
.vehicle-sharing-manage:focus-visible {
    color: var(--green);
    text-decoration-thickness: 2px
}

.vehicle-access-dialog {
    width: min(720px, calc(100vw - 32px))
}

.vehicle-access-dialog-context {
    margin: -4px 0 18px;
    color: var(--muted)
}

.vehicle-access-dialog-list {
    border-top: 1px solid var(--line)
}

.vehicle-access-dialog-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line)
}

.vehicle-access-dialog-row:last-child {
    border-bottom: 0
}

.vehicle-access-dialog-member {
    min-width: 0
}

.vehicle-access-dialog-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px
}

.vehicle-access-dialog-badges .badge {
    width: fit-content;
    max-width: 100%;
    margin: 0
}

.vehicle-access-dialog-form {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0
}

.vehicle-access-dialog-form select {
    min-width: 170px;
    border: 1px solid #b9c6bd;
    border-radius: 9px;
    background: #fdfefb;
    color: var(--ink);
    padding: 9px 10px;
    font: inherit
}

.vehicle-access-dialog-form button {
    margin: 0
}

@media(max-width:620px) {
    .vehicle-access-dialog-row {
        grid-template-columns: 1fr;
        gap: 10px
    }

    .vehicle-access-dialog-form {
        justify-content: flex-start;
        flex-wrap: wrap
    }

    .vehicle-access-dialog-form select {
        flex: 1 1 190px;
        min-width: 0
    }
}


/* DESKTOP-CONSISTENCY-01: one compact action language across desktop surfaces. */
.ui-inline-action,
.vehicle-inline-action {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
    font-weight: 650;
    text-decoration: none
}

.ui-inline-action-primary,
.vehicle-inline-action-primary {
    color: var(--green)
}

.ui-inline-action-danger,
.vehicle-inline-action-danger {
    color: var(--danger);
    opacity: .76
}

.ui-inline-action:hover,
.ui-inline-action:focus-visible,
.vehicle-inline-action:hover,
.vehicle-inline-action:focus-visible {
    background: transparent;
    box-shadow: none
}

.ui-inline-action-primary:hover,
.ui-inline-action-primary:focus-visible,
.vehicle-inline-action-primary:hover,
.vehicle-inline-action-primary:focus-visible {
    color: var(--green)
}

.ui-inline-action-danger:hover,
.ui-inline-action-danger:focus-visible,
.vehicle-inline-action-danger:hover,
.vehicle-inline-action-danger:focus-visible {
    color: var(--danger);
    opacity: 1
}

.ui-inline-action-symbol,
.vehicle-inline-action-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1
}

/* VEHICLE-SHARING-BADGE-UX-03: shared-state badge and one action language. */
.vehicle-detail-heading-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-areas: "copy photo";
    align-items: center;
    column-gap: clamp(18px,3vw,34px);
    row-gap: 12px
}

.vehicle-detail-heading-copy {
    grid-area: copy;
    min-width: 0;
    align-self: center
}

.vehicle-detail-heading-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    margin-bottom: clamp(5px,.7vw,8px)
}

.vehicle-detail-heading-badges {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
    flex-wrap: wrap
}

.vehicle-current-access-badge {
    margin-bottom: 0;
    color: var(--green);
    border: 1px solid #cfd9d3;
    background: #f8faf6
}

.vehicle-shared-badge {
    flex: 0 0 auto;
    text-decoration: none;
    color: var(--green);
    border: 1px solid #d9e5ce;
    background: #eef3e7;
    margin-bottom: 0
}

.vehicle-shared-badge:hover,
.vehicle-shared-badge:focus-visible {
    color: var(--green);
    border-color: #b8c9c0;
    background: #e7efdc
}

.garage-vehicle-card-badges {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap
}

.vehicle-management-accordion {
    margin-top: 22px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.vehicle-management-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 58px;
    padding: 14px 0;
    cursor: pointer;
    list-style: none
}

.vehicle-management-summary::-webkit-details-marker {
    display: none
}

.vehicle-management-summary-title {
    color: var(--green);
    font-size: 14px;
    font-weight: 750
}

.vehicle-management-chevron {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    margin-right: 4px;
    border-right: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .16s ease
}

.vehicle-management-accordion[open] .vehicle-management-chevron {
    transform: rotate(225deg) translate(-1px, -1px)
}

.vehicle-management-summary:hover .vehicle-management-summary-title,
.vehicle-management-summary:focus-visible .vehicle-management-summary-title {
    text-decoration: underline;
    text-underline-offset: 4px
}

.vehicle-management-summary:focus-visible {
    outline: 2px solid rgba(34,91,71,.24);
    outline-offset: 3px
}

.vehicle-management-content {
    padding-bottom: 18px
}

.vehicle-management-content .vehicle-sharing-actions-zone {
    margin-top: 0;
    border-top: 0
}

.vehicle-management-content .vehicle-danger-zone {
    padding-top: 14px
}

.vehicle-sharing-actions-zone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 22px;
    padding: 16px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.vehicle-sharing-actions-zone > .eyebrow {
    margin: 0
}

.vehicle-danger-zone {
    margin-top: 0;
    padding-top: 18px;
    border-top: 0
}

@media (max-width: 760px) {
    .vehicle-detail-heading-row {
        column-gap: 14px
    }

    .vehicle-sharing-actions-zone {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px
    }

    .ui-inline-action-symbol,
    .vehicle-inline-action-symbol {
        width: 44px;
        height: 44px;
        min-width: 44px
    }
}

@media(max-width:620px) {
    .vehicle-detail-heading-topline.has-current-access {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px
    }

    .vehicle-detail-heading-topline.has-current-access .vehicle-detail-heading-badges {
        width: 100%;
        max-width: 100%;
        justify-content: flex-start;
        gap: 6px
    }

    .vehicle-management-summary {
        min-height: 54px;
        padding: 12px 0
    }

    .vehicle-management-content {
        padding-bottom: 10px
    }

    .vehicle-management-content .vehicle-sharing-actions-zone {
        display: block;
        padding: 8px 0 6px
    }

    .vehicle-management-content .vehicle-sharing-actions-zone > .eyebrow {
        display: block;
        margin: 0 0 4px
    }

    .vehicle-management-content .vehicle-sharing-compact-actions {
        display: block;
        width: 100%;
        font-size: 14px
    }

    .vehicle-management-content .vehicle-inline-action {
        display: flex;
        width: 100%;
        min-height: 44px;
        align-items: center;
        justify-content: space-between;
        flex-direction: row-reverse;
        gap: 14px;
        padding: 9px 0;
        text-align: left
    }

    .vehicle-management-content .vehicle-inline-action-symbol {
        width: 24px;
        height: 24px;
        min-width: 24px;
        border: 0;
        border-radius: 0;
        font-size: 18px
    }

    .vehicle-management-content .vehicle-danger-zone {
        padding-top: 4px
    }
}

/* RESPONSIVE-01A/01Q: application shell switches to hamburger at 700 px; Garage content keeps its 620 px mobile pass. */
.mobile-nav-shell,
.garage-home-lead-mobile {
    display: none
}

@media(max-width:700px) {
    .site-header {
        position: relative;
        z-index: 100
    }

    .nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 0;
        padding-top: 14px;
        padding-bottom: 14px
    }

    .brand {
        flex: 0 0 auto
    }

    .vehia-plan-badge {
        min-height: 15px;
        margin-top: -6px;
        padding: 1px 5px;
        font-size: 8px
    }

    .vehia-wordmark {
        --vehia-letter-width: 27px;
        --vehia-marker-width: 31px;
        --vehia-marker-height: 36px;
        --vehia-marker-radius: 9px;
        width: 135px;
        height: 36px;
        font-size: 20px
    }

    .vehia-wordmark-marker {
        width: var(--vehia-marker-width);
        height: var(--vehia-marker-height);
        border-radius: var(--vehia-marker-radius)
    }

    .vehia-wordmark-letter {
        height: 36px
    }

    .vehia-section-v { --vehia-marker-x: -2px }
    .vehia-section-e { --vehia-marker-x: 25px }
    .vehia-section-h { --vehia-marker-x: 52px }
    .vehia-section-i { --vehia-marker-x: 79px }
    .vehia-section-a { --vehia-marker-x: 106px }

    .nav-links {
        display: none
    }

    .mobile-nav-shell {
        min-width: 0;
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px
    }

    .mobile-signed-in-user {
        min-width: 0;
        max-width: none;
        flex: 0 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--muted);
        font-size: 12px;
        padding: 6px 8px;
        border: 1px solid var(--line);
        border-radius: 999px
    }

    .mobile-nav-menu {
        position: relative;
        flex: 0 0 auto
    }

    .mobile-nav-toggle {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border: 1px solid #b9c6bd;
        border-radius: 10px;
        background: #fdfefb;
        color: var(--green);
        cursor: pointer;
        font-size: 22px;
        line-height: 1;
        list-style: none
    }

    .mobile-nav-toggle::-webkit-details-marker {
        display: none
    }

    .mobile-nav-menu[open] .mobile-nav-toggle,
    .mobile-nav-toggle:hover {
        background: #eef3e7
    }

    .mobile-nav-toggle:focus-visible {
        outline: 3px solid #87a78f;
        outline-offset: 2px
    }

    .mobile-nav-panel {
        position: absolute;
        z-index: 1000;
        top: calc(100% + 10px);
        right: 0;
        width: min(300px, calc(100vw - 40px));
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 14px 16px 16px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 14px 32px rgba(23, 61, 50, .12)
    }

    .mobile-nav-account {
        overflow-wrap: anywhere;
        padding: 4px 0 12px;
        margin-bottom: 4px;
        border-bottom: 1px solid var(--line);
        color: var(--muted);
        font-size: 12px
    }

    .mobile-nav-panel > a,
    .mobile-nav-panel .text-button {
        display: block;
        width: 100%;
        padding: 10px 8px;
        border-radius: 8px;
        color: var(--ink);
        text-align: left;
        text-decoration: none;
        font-size: 14px;
        transition: background .15s ease, color .15s ease
    }

    .mobile-nav-panel > a:hover,
    .mobile-nav-panel > a:focus-visible,
    .mobile-nav-panel .text-button:hover,
    .mobile-nav-panel .text-button:focus-visible {
        color: var(--green);
        background: #eef3e7
    }

    .mobile-language-switcher {
        width: 100%;
        justify-content: flex-start;
        margin-top: 6px;
        padding: 12px 6px 0;
        border-top: 1px solid var(--line)
    }

    .mobile-language-switcher .language-choice {
        min-width: 44px;
        min-height: 44px
    }
}

@media(max-width:620px) {
    .main {
        padding-top: 18px
    }

    .garage-home-heading {
        margin-top: 8px;
        margin-bottom: 18px
    }

    .garage-home-heading .eyebrow,
    .garage-home-lead-desktop {
        display: none
    }

    .garage-home-lead-mobile {
        display: block;
        margin-bottom: 0;
        color: var(--muted)
    }

    .garage-home-heading h1 {
        margin-bottom: 10px
    }

    .garage-overview-grid {
        gap: 4px
    }

    .garage-overview-grid .garage-group {
        margin-top: 14px;
        margin-bottom: 18px
    }

    .garage-group-heading {
        margin-bottom: 10px
    }
}

/* RESPONSIVE-01B: compact headings and breadcrumb trail below 620 px. */
@media(max-width:620px) {
    .page-heading {
        margin-top: 18px;
        margin-bottom: 24px
    }

    .page-heading h1 {
        font-size: 32px;
        line-height: 1.1
    }

    .page-heading .eyebrow {
        margin-bottom: 12px
    }

    .breadcrumbs {
        gap: 6px;
        margin-bottom: 20px;
        font-size: 13px
    }

    .breadcrumb-segment {
        gap: 6px
    }

}


/* RESPONSIVE-01E: mobile Private/Shared garage detail cleanup. */
@media(max-width:620px) {
    .garage-private-heading,
    .shared-garage-heading {
        margin-bottom: 20px
    }

    .garage-private-heading > p:last-child,
    .shared-garage-heading > p:last-child,
    .shared-garage-vehicles .garage-group-heading > p:last-child {
        display: none
    }

    .shared-garage-title-row {
        align-items: flex-start;
        gap: 10px
    }

    .shared-garage-title-action {
        margin-top: 2px
    }

    .garage-private-vehicle-grid .garage-card,
    .shared-garage-vehicles .garage-card {
        padding: 22px
    }

    .garage-private-vehicle-grid .garage-add-vehicle-card {
        min-height: 72px;
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        padding: 16px 20px;
        text-align: left
    }

    .garage-private-vehicle-grid .garage-add-vehicle-plus {
        font-size: 30px
    }

    .shared-member-access-trigger {
        min-height: 48px
    }

    .member-remove-button,
    .dialog-icon-button {
        width: 44px;
        height: 44px;
        min-width: 44px
    }

    .shared-garage-vehicles .empty-state {
        padding: 36px 20px
    }
}

/* RESPONSIVE-01F: compact mobile rename icon for Shared garage title. */
.shared-garage-title-edit-icon {
    display: none
}

.shared-garage-title-edit-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

@media(max-width:620px) {
    .shared-garage-title-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px;
        align-items: start;
        gap: 10px
    }

    .shared-garage-title-action {
        width: 44px;
        height: 44px;
        min-width: 44px;
        margin-top: 0;
        padding: 0;
        justify-content: center;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: rgba(255, 255, 255, .55)
    }

    .shared-garage-title-action:hover,
    .shared-garage-title-action:focus-visible {
        background: #f0f4ed;
        border-color: #b8c9c0
    }

    .shared-garage-title-action-desktop-symbol,
    .shared-garage-title-action-label {
        display: none
    }

    .shared-garage-title-edit-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center
    }
}

/* RESPONSIVE-01H: Shared members accordion is compact by default on mobile. */
@media(max-width:620px) {
    .shared-members-summary {
        min-height: 64px;
        padding: 18px 20px
    }

    .shared-members-summary-title {
        font-size: 22px
    }

    .shared-members-content {
        padding: 0 20px 20px
    }
}

/* RESPONSIVE-01G: compact Member leave action inside Shared garage card. */
@media(max-width:620px) {
    .shared-member-leave {
        margin-top: 12px;
        padding-top: 10px
    }

    .shared-member-leave .ui-inline-action {
        min-height: 44px;
        gap: 8px;
        font-size: 14px;
        font-weight: 600
    }

    .shared-member-leave .ui-inline-action-symbol {
        width: 32px;
        height: 32px;
        min-width: 32px;
        font-size: 16px
    }
}

/* VEHICLE-PHOTO-UX-01: compact title photo, local preview and drag/drop over image variants. */
.vehicle-error-message {
    margin: 0 0 1.25rem;
    padding: .85rem 1rem;
    border: 1px solid rgba(166,41,50,.28);
    border-radius: 14px;
    background: #fff4f3;
    color: var(--danger);
    font-weight: 700
}

.vehicle-detail-heading-copy .eyebrow {
    margin: 0;
    font-size: clamp(9px,1.05vw,12px);
    letter-spacing: clamp(1.2px,.18vw,2px)
}

.vehicle-detail-heading-copy h1 {
    margin-bottom: clamp(7px,.9vw,12px);
    font-size: clamp(30px,4vw,44px)
}

.vehicle-detail-heading-copy > p:last-child {
    margin-bottom: 0;
    font-size: clamp(13px,1.35vw,16px);
    line-height: 1.35
}

.vehicle-photo-inline {
    grid-area: photo;
    justify-self: end;
    align-self: start;
    margin: 0
}

.vehicle-photo-inline-form {
    position: relative;
    display: grid;
    gap: 8px;
    margin: 0
}

.vehicle-photo-inline-form input.vehicle-photo-file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    max-width: 1px;
    height: 1px;
    min-height: 0;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap
}

.vehicle-photo-inline-frame {
    position: relative;
    width: clamp(125px,22vw,161px);
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(145deg,#eef2ec,#e3e9e1);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease
}

.vehicle-photo-inline-frame.is-dragover {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(34,91,71,.13);
    background: #f4f8f1
}

.vehicle-photo-preview-button {
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    cursor: zoom-in
}

.vehicle-photo-preview-button:hover,
.vehicle-photo-preview-button:focus-visible {
    background: transparent;
    color: inherit
}

.vehicle-photo-preview-button:disabled {
    cursor: default
}

.vehicle-photo-preview-button[hidden],
.vehicle-photo-inline-image[hidden],
.vehicle-photo-empty-picker[hidden] {
    display: none !important
}

.vehicle-photo-inline-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.vehicle-photo-inline-fallback,
.vehicle-photo-empty-picker {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    padding: 12px;
    color: var(--green);
    text-align: center
}

.vehicle-photo-inline-fallback {
    color: var(--muted)
}

.vehicle-photo-fallback-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--green)
}

.vehicle-photo-fallback-mark .vehicle-type-icon {
    width: 38px;
    height: 38px
}

.vehicle-photo-empty-picker {
    cursor: pointer;
    font-size: 12px;
    font-weight: 750
}

.vehicle-photo-add-symbol {
    font-size: 28px;
    font-weight: 400;
    line-height: 1
}

.vehicle-photo-inline-actions {
    position: absolute;
    z-index: 3;
    inset: 0;
    pointer-events: none
}

.vehicle-photo-icon-action {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.82);
    border-radius: 999px;
    background: rgba(255,255,255,.94);
    color: var(--green);
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(24,45,34,.12);
    backdrop-filter: blur(5px);
    pointer-events: auto;
    transition: transform .15s ease, background .15s ease, border-color .15s ease
}

.vehicle-photo-icon-action svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

.vehicle-photo-edit-action {
    right: 8px;
    bottom: 8px;
    color: var(--green)
}

.vehicle-photo-edit-action svg {
    transform: translate(3.5px,4.5px)
}

.vehicle-photo-delete-action {
    top: 8px;
    right: 8px;
    color: var(--danger)
}

.vehicle-photo-icon-action:hover,
.vehicle-photo-icon-action:focus-visible {
    transform: translateY(-1px);
    background: #fff;
    border-color: rgba(34,91,71,.28)
}

.vehicle-photo-delete-action:hover,
.vehicle-photo-delete-action:focus-visible {
    border-color: rgba(166,41,50,.35)
}

.vehicle-photo-pending-actions {
    position: absolute;
    z-index: 4;
    right: 8px;
    bottom: 8px;
    left: 8px;
    display: flex;
    justify-content: center
}

.vehicle-photo-pending-actions[hidden] {
    display: none
}

.vehicle-photo-pending-actions > button:first-child {
    min-height: 32px;
    padding: 6px 14px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(24,45,34,.14)
}

.vehicle-photo-pending-cancel-x {
    position: absolute;
    z-index: 5;
    top: 8px;
    right: 8px;
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(31,81,62,.28);
    border-radius: 999px;
    background: rgba(255,255,255,.95);
    color: var(--green);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(24,45,34,.12)
}

.vehicle-photo-pending-cancel-x:hover,
.vehicle-photo-pending-cancel-x:focus-visible {
    border-color: rgba(31,81,62,.48);
    background: #fff
}

.vehicle-photo-pending-cancel-x[hidden] {
    display: none
}

.vehicle-photo-preview-dialog {
    width: min(94vw,1000px);
    max-width: 1000px
}

.vehicle-photo-preview-header {
    margin-bottom: 16px
}

.vehicle-photo-preview-image {
    display: block;
    width: 100%;
    max-height: 72vh;
    border-radius: 14px;
    object-fit: contain;
    background: #eef2ec
}

@media(max-width:760px) {
    .vehicle-detail-heading-row {
        column-gap: 16px
    }

    .vehicle-photo-inline-frame {
        border-radius: 14px
    }
}

@media(max-width:520px) {
    .vehicle-detail-heading-row {
        column-gap: 12px
    }

    .vehicle-detail-heading-topline {
        gap: 8px
    }

    .vehicle-photo-empty-picker {
        padding: 8px;
        font-size: 10px
    }

    .vehicle-photo-add-symbol {
        font-size: 24px
    }

    .vehicle-photo-icon-action,
    .vehicle-photo-pending-cancel-x {
        width: 27px;
        height: 27px
    }

    .vehicle-photo-icon-action svg {
        width: 14px;
        height: 14px
    }

    .vehicle-photo-edit-action {
        right: 6px;
        bottom: 6px
    }

    .vehicle-photo-edit-action svg {
        transform: translate(3.5px,2.5px)
    }

    .vehicle-photo-delete-action,
    .vehicle-photo-pending-cancel-x {
        top: 6px;
        right: 6px
    }

    .vehicle-photo-pending-actions {
        right: 6px;
        bottom: 6px;
        left: 6px
    }
}

@media(max-width:360px) {
    .vehicle-detail-heading-row {
        grid-template-columns: minmax(0,1fr);
        grid-template-areas:
            "copy"
            "photo";
        align-items: start;
        row-gap: 12px
    }

    .vehicle-photo-inline {
        justify-self: center
    }
}

/* DOCUMENTS-01 / DOCUMENTS-UX-01: private vehicle documents over the shared media foundation. */
.vehicle-documents-dashboard-card {
    min-height: 150px
}

.vehicle-documents-heading,
.vehicle-documents-upload-card,
.vehicle-documents-list-card {
    max-width: var(--layout-wide)
}

.vehicle-documents-upload-card,
.vehicle-documents-list-card {
    margin-bottom: 20px
}

.vehicle-documents-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px
}

.vehicle-documents-section-heading .eyebrow,
.vehicle-documents-section-heading h2 {
    margin-top: 0
}

.vehicle-documents-section-heading h2 {
    margin-bottom: 0
}

.vehicle-documents-upload-form {
    display: grid;
    gap: 10px;
    max-width: 720px
}

.vehicle-document-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap
}

.vehicle-document-upload-dropzone {
    position: relative;
    min-height: 112px;
    overflow: hidden;
    border: 1px dashed #cbd7c6;
    border-radius: 16px;
    background: #fbfcf9;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease
}

.vehicle-document-upload-dropzone.is-dragover {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(34,91,71,.13);
    background: #f4f8f1
}

.vehicle-document-empty-picker {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px;
    color: var(--green);
    font-weight: 750;
    cursor: pointer
}

.vehicle-document-empty-picker[hidden],
.vehicle-document-pending[hidden],
.vehicle-document-pending-image[hidden],
.vehicle-document-pending-type[hidden] {
    display: none !important
}

.vehicle-document-add-symbol {
    font-size: 30px;
    font-weight: 400;
    line-height: 1
}

.vehicle-document-pending {
    position: relative;
    display: grid;
    grid-template-columns: 76px minmax(0,1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 112px;
    padding: 14px 52px 14px 14px
}

.vehicle-document-pending-preview {
    display: flex;
    width: 76px;
    height: 58px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f5f7f2
}

.vehicle-document-pending-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.vehicle-document-pending-type {
    color: var(--green);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em
}

.vehicle-document-pending-copy {
    display: grid;
    gap: 4px;
    min-width: 0
}

.vehicle-document-pending-save {
    min-height: 38px;
    padding: 8px 16px;
    border-radius: 999px
}

.vehicle-document-pending-cancel {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(31,81,62,.24);
    border-radius: 999px;
    background: #fff;
    color: var(--green);
    font-size: 18px;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(24,45,34,.1)
}

.vehicle-documents-help {
    margin: 0
}

.vehicle-documents-list {
    display: grid
}

.vehicle-document-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 0;
    border-top: 1px solid var(--line)
}

.vehicle-document-row:first-child {
    border-top: 0
}

.vehicle-document-main {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0
}

.vehicle-document-type,
.vehicle-document-thumbnail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    min-width: 56px;
    height: 48px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f5f7f2
}

.vehicle-document-type {
    color: var(--green);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em
}

.vehicle-document-thumbnail {
    padding: 0
}

.vehicle-document-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.vehicle-document-copy {
    display: grid;
    gap: 5px;
    min-width: 0
}

.vehicle-document-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 13px
}

.vehicle-document-meta span + span::before {
    content: "·";
    margin-right: 10px
}

.vehicle-document-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap
}

.vehicle-documents-empty {
    margin-bottom: 0
}

@media(max-width:850px) and (min-width:561px) {
    .vehicle-documents-upload-card,
    .vehicle-documents-list-card {
        padding: 24px
    }

    .vehicle-documents-section-heading {
        margin-bottom: 14px
    }

    .vehicle-document-row {
        gap: 12px;
        padding: 12px 0
    }

    .vehicle-document-main {
        gap: 10px
    }

    .vehicle-document-type,
    .vehicle-document-thumbnail {
        width: 50px;
        min-width: 50px;
        height: 44px;
        border-radius: 10px
    }

    .vehicle-document-copy strong {
        font-size: 15px;
        line-height: 1.25;
        overflow-wrap: anywhere
    }

    .vehicle-document-meta {
        gap: 8px;
        font-size: 12px
    }

    .vehicle-document-actions {
        gap: 8px;
        flex-wrap: nowrap
    }

    .vehicle-document-actions .ui-inline-action {
        min-height: 34px;
        gap: 6px;
        font-size: 13px;
        white-space: nowrap
    }

    .vehicle-document-actions .ui-inline-action-symbol {
        width: 30px;
        height: 30px;
        min-width: 30px;
        font-size: 15px
    }
}

@media(max-width:560px) {
    .vehicle-documents-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 16px
    }

    .vehicle-documents-section-heading .badge {
        align-self: flex-start;
        width: auto
    }

    .vehicle-document-row {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
        min-width: 0;
        max-width: 100%;
        padding: 14px 0
    }

    .vehicle-document-main,
    .vehicle-document-copy,
    .vehicle-document-actions {
        min-width: 0;
        max-width: 100%
    }

    .vehicle-document-main {
        width: 100%
    }

    .vehicle-document-actions {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: nowrap
    }

    .vehicle-document-actions .ui-inline-action {
        width: auto;
        min-width: 0;
        min-height: 38px;
        justify-content: flex-start;
        gap: 8px;
        font-size: 14px;
        white-space: nowrap
    }

    .vehicle-document-actions .ui-inline-action-danger {
        margin-left: auto
    }

    .vehicle-document-actions .ui-inline-action-symbol {
        width: 30px;
        height: 30px;
        min-width: 30px;
        font-size: 16px
    }
}

@media(max-width:520px) {
    .vehicle-documents-upload-card,
    .vehicle-documents-list-card {
        padding: 20px
    }

    .vehicle-document-upload-dropzone {
        min-height: 104px
    }

    .vehicle-document-pending {
        grid-template-columns: 64px minmax(0,1fr);
        min-height: 104px;
        padding: 12px 42px 12px 12px
    }

    .vehicle-document-pending-preview {
        width: 64px;
        height: 50px
    }

    .vehicle-document-pending-save {
        grid-column: 1 / -1;
        justify-self: start
    }

    .vehicle-document-pending-cancel {
        top: 8px;
        right: 8px;
        width: 27px;
        height: 27px
    }

    .vehicle-document-row {
        gap: 10px;
        padding: 12px 0
    }

    .vehicle-document-main {
        align-items: flex-start;
        gap: 10px
    }

    .vehicle-document-type,
    .vehicle-document-thumbnail {
        width: 50px;
        min-width: 50px;
        height: 44px;
        border-radius: 10px
    }

    .vehicle-document-copy strong {
        max-width: 100%;
        font-size: 15px;
        line-height: 1.25;
        overflow-wrap: anywhere
    }

    .vehicle-document-meta {
        gap: 3px 8px;
        font-size: 12px;
        line-height: 1.35
    }

    .vehicle-document-meta span + span::before {
        content: none;
        margin: 0
    }

    .vehicle-document-actions {
        gap: 8px
    }

    .vehicle-document-actions .ui-inline-action {
        min-height: 34px;
        gap: 6px;
        font-size: 13px
    }

    .vehicle-document-actions .ui-inline-action-symbol {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: 15px
    }
}

@media(max-width:360px) {
    .vehicle-documents-upload-card,
    .vehicle-documents-list-card {
        padding: 16px
    }

    .vehicle-document-type,
    .vehicle-document-thumbnail {
        width: 46px;
        min-width: 46px;
        height: 42px
    }

    .vehicle-document-actions .ui-inline-action {
        gap: 5px;
        font-size: 12px
    }

    .vehicle-document-actions .ui-inline-action-symbol {
        width: 27px;
        height: 27px;
        min-width: 27px
    }
}

/* ODOMETER-OCR-01: temporary photo -> OCR proposal -> explicit user confirmation. */
.vehicle-odometer-ocr-entry {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    color: var(--muted);
    font-size: 13px;
}

.vehicle-odometer-ocr-entry a {
    font-weight: 800;
    color: var(--green);
}

.odometer-ocr-heading {
    max-width: var(--layout-work);
}

.odometer-ocr-picker-card,
.odometer-ocr-proposal-card {
    max-width: var(--layout-work);
}

.odometer-ocr-picker-card {
    padding: 22px;
}

.odometer-ocr-picker-copy h2,
.odometer-ocr-proposal-copy h2 {
    margin: 0 0 8px;
}

.odometer-ocr-picker-copy p {
    margin: 0;
    color: var(--muted);
}

.odometer-ocr-picker-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.odometer-ocr-picker-option {
    min-width: 0;
}

.odometer-ocr-file-label {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 6px;
    min-height: 150px;
    padding: 20px;
    border: 1px dashed #b9c9b1;
    border-radius: 16px;
    background: #f8faf5;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.odometer-ocr-file-label:hover,
.odometer-ocr-file-label:focus-within {
    border-color: var(--green);
    background: #f2f6ed;
    box-shadow: 0 8px 22px rgba(34, 91, 71, .08);
}

.odometer-ocr-file-label span:last-child {
    color: var(--muted);
    font-size: 12px;
}

.odometer-ocr-file-symbol {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: #e7efe0;
    color: var(--green);
    font-size: 22px;
    line-height: 1;
}

.odometer-ocr-proposal-card {
    display: grid;
    grid-template-columns: minmax(220px, .9fr) minmax(0, 1.1fr);
    gap: 24px;
    align-items: start;
    padding: 22px;
}

.odometer-ocr-preview-frame {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f1f4ef;
}

.odometer-ocr-preview-frame img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: contain;
}

.odometer-ocr-raw {
    margin: 8px 0 16px;
    color: var(--muted);
    font-size: 13px;
}

.odometer-ocr-confirm-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 800;
}

.odometer-ocr-confirm-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.odometer-ocr-confirm-row input {
    width: 100%;
    margin: 0;
    font-size: 22px;
    font-weight: 800;
}

.odometer-ocr-confirm-row span {
    font-weight: 800;
    color: var(--muted);
}

.odometer-ocr-warning {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.odometer-ocr-cancel-form {
    margin-top: 8px;
}

@media(max-width: 700px) {
    .odometer-ocr-picker-grid,
    .odometer-ocr-proposal-card {
        grid-template-columns: 1fr;
    }

    .odometer-ocr-file-label {
        min-height: 120px;
    }

    .odometer-ocr-preview-frame img {
        max-height: 320px;
    }
}

/* ODOMETER-OCR-02: primary OCR flow stays inline on the vehicle detail. */
.vehicle-odometer-quick-body {
    border-top: 1px solid var(--line)
}

.vehicle-odometer-quick-body .vehicle-odometer-quick-form-shell {
    border-top: 0
}

.vehicle-odometer-ocr-inline {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 20px 20px
}

.vehicle-odometer-ocr-inline-heading {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 13px
}

.vehicle-odometer-ocr-inline-heading strong {
    color: var(--green)
}

.vehicle-odometer-ocr-error {
    margin: 0 0 12px
}

.vehicle-odometer-ocr-inline-upload {
    display: grid;
    gap: 12px
}

.vehicle-odometer-ocr-inline-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px
}

.vehicle-odometer-ocr-file-action {
    cursor: pointer;
    text-decoration: none
}

.vehicle-odometer-ocr-pending {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 12px;
    border: 1px dashed #b9c9b1;
    border-radius: 14px;
    background: #f8faf5
}

.vehicle-odometer-ocr-pending[hidden] {
    display: none
}

.vehicle-odometer-ocr-pending img {
    display: block;
    width: 112px;
    height: 84px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #eef2ec
}

.vehicle-odometer-ocr-pending-copy {
    display: grid;
    min-width: 0;
    gap: 4px
}

.vehicle-odometer-ocr-pending-copy strong {
    overflow-wrap: anywhere
}

.vehicle-odometer-ocr-pending-copy span,
.vehicle-odometer-ocr-live {
    color: var(--muted);
    font-size: 12px
}

.vehicle-odometer-ocr-pending-actions {
    display: flex;
    align-items: center;
    gap: 8px
}

.vehicle-odometer-ocr-live {
    min-height: 1em;
    margin: 0;
    text-align: center
}

.vehicle-odometer-ocr-inline-proposal[hidden] {
    display: none
}

.vehicle-odometer-ocr-inline-proposal {
    display: grid;
    grid-template-columns: minmax(160px, .75fr) minmax(0, 1.25fr);
    gap: 18px;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fbfcf9
}

.vehicle-odometer-ocr-inline-preview {
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #eef2ec
}

.vehicle-odometer-ocr-inline-preview img {
    display: block;
    width: 100%;
    max-height: 260px;
    object-fit: contain
}

.vehicle-odometer-ocr-inline-proposal-copy > strong {
    display: block;
    margin: 2px 0 10px;
    font-size: 18px
}

.vehicle-odometer-ocr-inline-confirm {
    display: grid;
    gap: 8px
}

.vehicle-odometer-ocr-inline-confirm label {
    font-weight: 800;
    font-size: 13px
}

.vehicle-odometer-ocr-inline-confirm button {
    justify-self: start
}

.vehicle-odometer-ocr-inline-cancel {
    margin-top: 8px
}

.vehicle-odometer-ocr-raw-details {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 12px
}

.vehicle-odometer-ocr-raw-details summary {
    cursor: pointer;
    color: var(--green);
    font-weight: 700
}

.vehicle-odometer-ocr-raw-details p {
    margin: 6px 0 0;
    overflow-wrap: anywhere
}

@media(max-width: 700px) {
    .vehicle-odometer-ocr-inline {
        padding: 0 16px 16px
    }

    .vehicle-odometer-ocr-pending,
    .vehicle-odometer-ocr-inline-proposal {
        grid-template-columns: 1fr
    }

    .vehicle-odometer-ocr-pending img {
        width: min(100%, 240px);
        height: auto;
        aspect-ratio: 4 / 3;
        justify-self: center
    }

    .vehicle-odometer-ocr-pending-actions {
        justify-content: center
    }
}


@media (max-width: 720px) {
    .vehicle-upcoming-row-event,
    .vehicle-upcoming-row-custom {
        align-items: stretch;
        flex-direction: column
    }

    .vehicle-upcoming-side {
        justify-items: start
    }

    .vehicle-reminder-actions {
        justify-content: flex-start
    }

    .vehicle-upcoming-row-event .vehicle-upcoming-due,
    .vehicle-upcoming-row-custom .vehicle-upcoming-due {
        justify-content: flex-start;
        white-space: normal
    }
}

/* PWA-02: install affordance + explicit update/offline lifecycle status. */
.pwa-install-button[hidden],
.pwa-status[hidden],
.pwa-status [hidden] {
    display: none
}

.pwa-install-button {
    font-size: 12px;
    font-weight: 700
}

.pwa-status {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 14px;
    width: min(430px, calc(100vw - 48px));
    padding: 14px 16px;
    border: 1px solid #b9d0bf;
    border-radius: 14px;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 12px 34px rgba(24, 51, 45, .18);
    font-size: 14px;
    font-weight: 650
}

.pwa-status > span {
    min-width: 0;
    flex: 1
}

.pwa-status > button {
    flex: none
}

@media(max-width: 700px) {
    .pwa-status {
        right: 16px;
        bottom: 16px;
        width: calc(100vw - 32px);
        align-items: stretch;
        flex-direction: column
    }

    .pwa-status > button {
        align-self: flex-start
    }
}

/* SA-02: read-only operational dashboard for SuperAdmin. */
.sa-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin: 0 0 24px;
}

.sa-stat-card {
    min-width: 0;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
}

.sa-stat-card > span,
.sa-stat-card > small {
    display: block;
    color: var(--muted);
    font-size: 13px;
}

.sa-stat-card > strong {
    display: block;
    margin: 4px 0 2px;
    font-size: 30px;
    line-height: 1.15;
}

.sa-stat-card > strong.sa-stat-text {
    font-size: 17px;
    line-height: 1.4;
}

.sa-stat-card.has-warning {
    border-color: #d9c886;
    background: #fffdf2;
}

.sa-stat-card.has-error {
    border-color: #e0afb3;
    background: #fff8f8;
}

.sa-panel {
    margin-top: 18px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.sa-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.sa-panel-heading h2,
.sa-panel-heading .eyebrow,
.sa-panel-description {
    margin-bottom: 0;
}

.sa-panel-heading .eyebrow {
    margin-bottom: 6px;
}

.sa-panel-description,
.sa-panel-meta,
.sa-secondary {
    color: var(--muted);
    font-size: 13px;
}

.sa-panel-description {
    margin-top: 7px;
}

.sa-panel-meta {
    white-space: nowrap;
}

.sa-empty {
    margin: 0;
    color: var(--muted);
}

.sa-table-shell {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
}

.sa-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 14px;
}

.sa-table th,
.sa-table td {
    padding: 12px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line);
}

.sa-table th {
    background: #f7f8f3;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
}

.sa-table tbody tr:last-child td {
    border-bottom: 0;
}

.sa-table tbody tr:hover {
    background: #fbfcf8;
}

.sa-user-row {
    scroll-margin-block: 28px;
}

.sa-user-row:target {
    animation: sa-user-focus 4s ease-out both;
}

@keyframes sa-user-focus {
    0%, 55% {
        background: #e8f3df;
        box-shadow: inset 4px 0 0 #6f9a79;
    }

    100% {
        background: transparent;
        box-shadow: inset 4px 0 0 transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sa-user-row:target {
        animation: none;
        background: #e8f3df;
        box-shadow: inset 4px 0 0 #6f9a79;
    }
}

.sa-secondary {
    display: block;
    margin-top: 2px;
}

.sa-nowrap {
    white-space: nowrap;
}

.sa-status {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 3px 8px;
    border-radius: 999px;
    background: #edf2ed;
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.sa-status-ok {
    background: #e8f3df;
    color: var(--green);
}

.sa-status-warning {
    background: #fff3c9;
    color: #6d5710;
}

.sa-status-error {
    background: #f7dddd;
    color: var(--danger);
}

.sa-trace {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
    overflow-wrap: anywhere;
}

.sa-user-link {
    font-weight: 700;
}

.sa-user-detail-heading .text-link {
    display: inline-flex;
    margin-top: 2px;
}

.sa-user-summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

@media (max-width: 700px) {
    .sa-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sa-stat-card {
        padding: 15px;
    }

    .sa-stat-card > strong {
        font-size: 25px;
    }

    .sa-panel {
        padding: 16px;
    }

    .sa-panel-heading {
        display: block;
    }

    .sa-panel-meta {
        display: block;
        margin-top: 8px;
    }
}

@media (max-width: 430px) {
    .sa-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* FUNCTIONS-01: public product capabilities and roadmap. */
.features-heading {
    max-width: 760px;
}

.features-beta-note {
    margin: 0 0 24px;
    padding: 18px 20px;
    border: 1px solid #cbd8ce;
    border-radius: 16px;
    background: #f9fbf6;
}

.features-beta-note strong {
    display: block;
    margin-bottom: 4px;
}

.features-beta-note p {
    margin: 0;
    color: var(--muted);
}

.features-section {
    margin-top: 20px;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.features-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.features-section-heading .eyebrow {
    margin-bottom: 6px;
}

.features-section-heading h2 {
    margin-bottom: 0;
}

.features-section-lead {
    max-width: 760px;
    margin: 10px 0 22px;
    color: var(--muted);
}

.feature-plan-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-height: 32px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 750;
}

.feature-plan-badge.is-free {
    background: #e8f3df;
    color: var(--green);
}

.feature-plan-badge.is-planned {
    border: 1px solid #d7dccd;
    background: #f7f8f3;
    color: var(--muted);
}

.feature-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fbfcf8;
}

.feature-status-icon {
    display: grid;
    place-items: center;
    flex: 0 0 27px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #e8f3df;
    color: var(--green);
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
}

.feature-list-planned .feature-status-icon {
    border: 1px solid #d7dccd;
    background: #fff;
}

.feature-list strong,
.feature-list span:not(.feature-status-icon) {
    display: block;
}

.feature-list strong {
    margin-bottom: 2px;
}

.feature-list span:not(.feature-status-icon) {
    color: var(--muted);
    font-size: 14px;
}

.features-plus-subheading {
    margin: 0 0 10px;
}

.features-plus-subheading-planned {
    margin-top: 24px;
}

.features-plan-note {
    margin: 20px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 14px;
}

@media (max-width: 700px) {
    .features-section {
        padding: 20px;
    }

    .feature-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .features-section-heading {
        display: block;
    }

    .feature-plan-badge {
        margin-top: 10px;
    }
}


/* TANKOVANIE-01C: full-width inline fueling block under odometer + quick garage entry. */
.vehicle-fueling-quick {
    margin: 0 0 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fdfefb;
    overflow: hidden
}

.vehicle-fueling-quick-summary {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 18px;
    width: 100%;
    padding: 14px 18px
}

.vehicle-fueling-quick-editable > summary {
    cursor: pointer;
    list-style: none;
    transition: background .16s ease, border-color .16s ease
}

.vehicle-fueling-quick-editable > summary::-webkit-details-marker {
    display: none
}

.vehicle-fueling-quick-editable > summary:hover,
.vehicle-fueling-quick-editable > summary:focus-visible {
    background: #f6f9f2
}

.vehicle-fueling-quick-editable > summary:focus-visible {
    outline: 2px solid rgba(34,91,71,.24);
    outline-offset: -4px
}

.vehicle-fueling-quick-copy {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 14px
}

.vehicle-fueling-quick-label {
    flex: 0 0 auto;
    color: var(--green);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase
}

.vehicle-fueling-quick-last,
.vehicle-fueling-quick-empty {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.vehicle-fueling-quick-last {
    font-size: 15px
}

.vehicle-fueling-quick-empty {
    color: var(--muted);
    font-size: 13px
}

.vehicle-fueling-quick-add {
    color: var(--green);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap
}

.vehicle-fueling-quick-body {
    padding: 18px;
    border-top: 1px solid var(--line)
}

.vehicle-fueling-form {
    display: grid;
    gap: 16px
}

.vehicle-fueling-inline-form .vehicle-fueling-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 14px
}

.vehicle-fueling-field {
    display: grid;
    gap: 6px
}

.vehicle-fueling-field > label {
    font-size: 13px;
    font-weight: 700
}

.vehicle-fueling-field input,
.vehicle-fueling-field select,
.vehicle-fueling-field textarea {
    width: 100%;
    margin: 0
}

.vehicle-fueling-unit-input,
.vehicle-fueling-cost-input {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: stretch
}

.vehicle-fueling-unit-input input,
.vehicle-fueling-cost-input input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.vehicle-fueling-unit-input > span,
.vehicle-fueling-cost-input select {
    display: flex;
    min-width: 58px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-left: 0;
    border-radius: 0 9px 9px 0;
    background: #f8faf6;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700
}

.vehicle-fueling-cost-input select {
    min-width: 82px;
    color: var(--ink)
}

.vehicle-fueling-full-tank {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f8faf6
}

.vehicle-fueling-full-tank input {
    width: auto;
    margin: 3px 0 0
}

.vehicle-fueling-full-tank span {
    display: grid;
    gap: 2px
}

.vehicle-fueling-full-tank small {
    color: var(--muted)
}

.vehicle-fueling-actions {
    align-items: center
}

.vehicle-fueling-inline-history {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line)
}

.vehicle-fueling-inline-history-list {
    display: grid;
    margin-top: 8px
}

.vehicle-fueling-inline-history-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 16px;
    align-items: baseline;
    padding: 8px 0;
    border-top: 1px solid var(--line)
}

.vehicle-fueling-inline-history-row span {
    color: var(--muted);
    font-size: 13px
}

@media(max-width:980px) {
    .vehicle-fueling-inline-form .vehicle-fueling-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media(max-width:620px) {
    .vehicle-fueling-quick-summary {
        grid-template-columns: minmax(0,1fr) auto;
        gap: 12px;
        padding: 14px
    }

    .vehicle-fueling-quick-copy {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px
    }

    .vehicle-fueling-quick-last,
    .vehicle-fueling-quick-empty {
        white-space: normal
    }

    .vehicle-fueling-quick-body {
        padding: 14px
    }

    .vehicle-fueling-inline-form .vehicle-fueling-grid {
        grid-template-columns: 1fr
    }
}

/* LOGGING-02: support reference lookup for production problem reports. */
.error-support-reference {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.error-support-reference code,
.sa-trace-prominent {
    overflow-wrap: anywhere;
}

.sa-problem-search {
    max-width: 680px;
    margin-bottom: 18px;
}

.sa-problem-search > label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
}

.sa-problem-search-row {
    display: flex;
    gap: 8px;
}

.sa-problem-search-row input {
    flex: 1 1 auto;
    min-width: 0;
}

.sa-problem-search-row button {
    flex: 0 0 auto;
}

.sa-trace-link {
    display: block;
    width: fit-content;
    max-width: 100%;
}

.sa-trace-link:hover .sa-trace,
.sa-trace-link:focus-visible .sa-trace {
    color: var(--green);
}

.sa-problem-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 28px;
}

.sa-problem-detail-grid > div {
    min-width: 0;
}

.sa-problem-detail-grid strong,
.sa-problem-detail-grid .sa-status {
    display: block;
    margin-top: 4px;
}

.sa-trace-prominent {
    margin-top: 4px;
    color: var(--ink);
    font-size: 14px;
}

.sa-diagnostic-note {
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 13px;
}

@media (max-width: 700px) {
    .sa-problem-search-row {
        display: block;
    }

    .sa-problem-search-row button {
        width: 100%;
        margin-top: 8px;
    }

    .sa-problem-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* SA-03: read/write Free/Plus management in SuperAdmin. */
.sa-plan-panel {
    display: grid;
    gap: 18px;
}

.sa-plan-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.sa-plan-summary > div {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fafbf7;
}

.sa-plan-summary span,
.sa-plan-summary strong {
    display: block;
}

.sa-plan-summary span {
    color: var(--muted);
    font-size: 13px;
}

.sa-plan-actions {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(220px, .6fr);
    gap: 18px;
    align-items: start;
}

.sa-plan-form,
.sa-plan-free-form {
    margin: 0;
}

.sa-plan-form > label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
}

.sa-plan-form-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.sa-plan-form-row input {
    min-width: 0;
    flex: 1;
}

.sa-plan-message {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #cbd8ce;
    border-radius: 12px;
    background: #f4f8ef;
}

.sa-plan-free-form {
    padding-top: 29px;
}

@media (max-width: 760px) {
    .sa-plan-summary,
    .sa-plan-actions {
        grid-template-columns: 1fr;
    }

    .sa-plan-free-form {
        padding-top: 0;
    }
}

@media (max-width: 520px) {
    .sa-plan-form-row {
        display: grid;
    }
}

/* SA-03A: clearer Shared role and plan-management context. */
.sa-membership-list {
    display: grid;
    gap: 10px;
}

.sa-membership-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fafbf7;
}

.sa-membership-row strong,
.sa-membership-row span {
    display: block;
}

.sa-membership-row > div > span {
    margin-top: 2px;
    color: var(--muted);
    font-size: 13px;
}

.sa-plan-warning {
    margin-top: 8px;
    color: #6d5710;
}

@media (max-width: 520px) {
    .sa-membership-row {
        align-items: flex-start;
    }
}

/* SA-03B: scalable user lookup and collapsible dashboard sections. */
.sa-collapsible > summary {
    list-style: none;
    cursor: pointer;
}

.sa-collapsible > summary::-webkit-details-marker {
    display: none;
}

.sa-collapsible-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.sa-collapsible-summary::after {
    content: "+";
    flex: 0 0 auto;
    margin-left: 4px;
    color: var(--green);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

.sa-collapsible[open] > .sa-collapsible-summary::after {
    content: "−";
}

.sa-collapsible-heading-group,
.sa-collapsible-heading-group > span {
    display: block;
}

.sa-collapsible-heading-group .eyebrow {
    margin-bottom: 6px;
}

.sa-collapsible-heading {
    color: var(--ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 700;
    line-height: 1.15;
}

.sa-collapsible-body {
    margin-top: 16px;
}

.sa-user-search {
    max-width: 760px;
    margin: 16px 0 18px;
}

.sa-user-search > label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
}

.sa-user-search-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.sa-user-search-row input {
    flex: 1 1 auto;
    min-width: 0;
}

.sa-user-search-row button {
    flex: 0 0 auto;
}

.sa-search-clear {
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    color: var(--green);
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .sa-collapsible-summary {
        gap: 10px;
    }

    .sa-collapsible-summary .sa-panel-meta {
        margin-top: 0;
    }

    .sa-user-search-row {
        display: grid;
    }

    .sa-user-search-row button,
    .sa-search-clear {
        width: 100%;
    }

    .sa-search-clear {
        justify-content: center;
        min-height: 38px;
    }
}

@media(prefers-reduced-motion:reduce) {
    .vehia-wordmark-marker,
    .vehia-wordmark-letter {
        transition: none
    }

    ::view-transition-group(vehia-brand-marker),
    ::view-transition-old(vehia-brand-marker),
    ::view-transition-new(vehia-brand-marker) {
        animation: none
    }
}

/* PRIVACY-01: reusable legal/information page layout. */
.legal-heading {
    margin-bottom: 24px
}

.legal-updated {
    font-size: 13px
}

.legal-page {
    display: grid;
    max-width: 900px;
    gap: 14px
}

.legal-section {
    padding: 28px
}

.legal-section h2 {
    margin-top: 0;
    margin-bottom: 14px;
    font-size: 24px
}

.legal-section p,
.legal-section li,
.legal-section dd {
    color: var(--muted)
}

.legal-section p:last-child,
.legal-section ul:last-child,
.legal-section dl:last-child {
    margin-bottom: 0
}

.legal-list {
    margin: 14px 0;
    padding-left: 22px
}

.legal-list li + li {
    margin-top: 9px
}

.legal-details {
    display: grid;
    grid-template-columns: minmax(145px, 190px) minmax(0, 1fr);
    gap: 8px 18px;
    margin: 18px 0 0
}

.legal-details dt {
    font-weight: 700
}

.legal-details dd {
    margin: 0;
    overflow-wrap: anywhere
}

.legal-note {
    padding: 14px 16px;
    border: 1px solid #d7dfd7;
    border-radius: 10px;
    background: #f8faf6
}

@media(max-width:620px) {
    .legal-section {
        padding: 22px
    }

    .legal-section h2 {
        font-size: 21px
    }

    .legal-details {
        grid-template-columns: 1fr;
        gap: 3px
    }

    .legal-details dd + dt {
        margin-top: 8px
    }
}

/* GARAGE-MOBILE-COLLAPSE-01: mobile-only disclosure of quick access and dashboard garages. */
.garage-home-disclosure-summary {
    display: none
}

@media(max-width:619px) {
    .garage-quick-access-label-desktop,
    .garage-group-heading-desktop {
        display: none
    }

    .garage-home-disclosure-summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        cursor: pointer;
        list-style: none
    }

    .garage-home-disclosure-summary::-webkit-details-marker {
        display: none
    }

    .garage-home-disclosure-summary:focus-visible {
        outline: 2px solid rgba(34,91,71,.24);
        outline-offset: 4px;
        border-radius: 8px
    }

    .garage-home-disclosure-chevron {
        width: 9px;
        height: 9px;
        flex: 0 0 9px;
        margin-right: 3px;
        border-right: 2px solid var(--green);
        border-bottom: 2px solid var(--green);
        transform: rotate(45deg) translate(-2px,-2px);
        transition: transform .16s ease
    }

    .garage-home-disclosure[open] .garage-home-disclosure-chevron {
        transform: rotate(225deg) translate(-1px,-1px)
    }

    .garage-quick-access-summary .eyebrow,
    .garage-workspace-summary .eyebrow {
        margin: 0
    }

    .garage-quick-access[open] .garage-home-disclosure-content {
        margin-top: 12px
    }

    .garage-workspace-disclosure[open] .garage-home-disclosure-content {
        margin-top: 10px
    }

    .garage-workspace-summary-copy {
        display: grid;
        gap: 7px;
        min-width: 0
    }

    .garage-workspace-summary-title {
        color: var(--ink);
        font-size: 22px;
        font-weight: 700;
        line-height: 1.2
    }

    .garage-workspace-summary:hover .garage-workspace-summary-title,
    .garage-workspace-summary:focus-visible .garage-workspace-summary-title {
        color: var(--green)
    }

    .garage-overview-grid .garage-group {
        margin-top: 14px;
        margin-bottom: 18px
    }
}

/* HOME-VEHICLE-TYPES-01: compact public overview using the same vehicle-type icons as the app. */
.home-vehicle-types {
    margin-top: 72px;
    padding-top: 64px;
    border-top: 1px solid var(--line)
}

.home-vehicle-types-heading {
    max-width: 760px
}

.home-vehicle-types-heading h2 {
    margin-bottom: 14px;
    font-size: clamp(30px,3.6vw,44px);
    line-height: 1.12
}

.home-vehicle-types-heading > p:last-child {
    color: var(--muted);
    font-size: 17px
}

.home-vehicle-types-grid {
    display: grid;
    grid-template-columns: repeat(7,minmax(0,1fr));
    gap: 14px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none
}

.home-vehicle-type-item {
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 16px 10px 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255,255,255,.58);
    color: var(--ink);
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3
}

.home-vehicle-type-icon {
    width: 82px;
    height: 82px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: #eef3e7
}

.home-vehicle-type-icon .vehicle-type-icon {
    display: block;
    width: 68px;
    height: 68px;
    object-fit: contain
}

@media(max-width:900px) {
    .home-vehicle-types-grid {
        grid-template-columns: repeat(4,minmax(0,1fr))
    }
}

@media(max-width:620px) {
    .home-vehicle-types {
        margin-top: 48px;
        padding-top: 44px
    }

    .home-vehicle-types-heading h2 {
        font-size: 31px
    }

    .home-vehicle-types-heading > p:last-child {
        font-size: 16px
    }

    .home-vehicle-types-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 12px;
        margin-top: 24px
    }

    .home-vehicle-type-item {
        padding: 14px 8px 12px
    }

    .home-vehicle-type-icon {
        width: 76px;
        height: 76px
    }

    .home-vehicle-type-icon .vehicle-type-icon {
        width: 62px;
        height: 62px
    }
}

/* HOME-PRODUCT-PROOF-01: real product screenshots below the positioning cards. */
.home-showcase {
    margin-top: 72px;
    padding-top: 64px;
    border-top: 1px solid var(--line)
}

.home-showcase-heading {
    max-width: 760px
}

.home-showcase-heading h2 {
    margin-bottom: 14px;
    font-size: clamp(30px,3.6vw,44px);
    line-height: 1.12
}

.home-showcase-heading > p:last-child {
    color: var(--muted);
    font-size: 17px
}

.home-showcase-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 28px;
    align-items: start;
    margin-top: 34px
}

.home-showcase-item {
    min-width: 0
}

.home-showcase-item .step {
    margin: 18px 0 12px
}

.home-showcase-item h3 {
    margin: 0 0 9px;
    font-size: 22px;
    line-height: 1.25
}

.home-showcase-item > p {
    margin: 0;
    color: var(--muted)
}

.home-showcase-phone {
    width: min(100%,280px);
    margin-inline: auto;
    padding: 7px;
    overflow: hidden;
    border: 1px solid #c8d1ca;
    border-radius: 34px;
    background: var(--ink);
    box-shadow: 0 18px 42px rgba(24,51,45,.12)
}

.home-showcase-phone img {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 19;
    border-radius: 27px;
    object-fit: cover;
    object-position: top;
    background: var(--paper)
}

.home-showcase-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    margin-top: 44px;
    text-align: center
}

.home-showcase-cta p {
    margin: 0
}

@media(max-width:700px) {
    .home-showcase {
        margin-top: 48px;
        padding-top: 44px
    }

    .home-showcase-heading h2 {
        font-size: 31px
    }

    .home-showcase-heading > p:last-child {
        font-size: 16px
    }

    .home-showcase-grid {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
        grid-auto-columns: auto;
        gap: 38px;
        margin-top: 28px;
        margin-right: 0;
        padding-right: 0;
        padding-bottom: 0;
        overflow: visible;
        scroll-snap-type: none
    }

    .home-showcase-item {
        scroll-snap-align: none
    }

    .home-showcase-phone {
        width: min(100%,280px)
    }

    .home-showcase-cta {
        margin-top: 30px
    }
}