html:has(#vehicle-sidebar) { scrollbar-gutter: stable; }
.vehicle-page-shell { width: 100%; padding-inline: 1rem; }
#vehicle-sidebar { --vehicle-sidebar-top: 65px; }
.vehicle-sidebar-panel {
  position: fixed; left: 0; top: var(--vehicle-sidebar-top); bottom: 0; z-index: 40;
  width: 4rem; display: flex; flex-direction: column; overflow: clip;
  border-right: 1px solid #e5e7eb; background: #fff; color: #374151;
  transition: width 140ms ease-out, box-shadow 140ms ease-out;
}
#vehicle-sidebar[data-initializing] .vehicle-sidebar-panel { transition: none; }
.dark .vehicle-sidebar-panel { background: #1f2937; color: #e5e7eb; border-color: #374151; }
#vehicle-sidebar[data-open="true"] .vehicle-sidebar-panel { width: 17.75rem; box-shadow: 8px 0 18px -12px #11182740; }
#vehicle-sidebar[data-pinned="true"] .vehicle-sidebar-panel { box-shadow: none; }
.vehicle-sidebar-heading, .vehicle-sidebar-scroll, .vehicle-sidebar-notice { width: 17.75rem; }
.vehicle-sidebar-heading, .vehicle-sidebar-notice { overflow: hidden; overscroll-behavior: none; }
.vehicle-sidebar-heading { flex: 0 0 auto; display: flex; align-items: center; gap: .25rem; min-height: 3.5rem; padding: .25rem .5rem; }
.vehicle-sidebar-heading h2 { flex: 1; margin: 0; font-size: .875rem; font-weight: 600; white-space: nowrap; }
.vehicle-sidebar-count { color: #6b7280; margin-left: .25rem; font-weight: 400; }
.dark .vehicle-sidebar-count { color: #9ca3af; }
.vehicle-sidebar-control { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; flex: 0 0 2.75rem; border-radius: .5rem; cursor: pointer; }
.vehicle-sidebar-control:not(.vehicle-sidebar-pin):hover, .vehicle-sidebar-row:hover { background: #f3f4f6; }
.dark .vehicle-sidebar-control:not(.vehicle-sidebar-pin):hover, .dark .vehicle-sidebar-row:hover { background: #374151; }
.vehicle-sidebar-control[aria-pressed="true"] { color: #000; }
.vehicle-sidebar-control svg, .vehicle-sidebar-mobile-toggle svg, .vehicle-sidebar-action-icon svg, .vehicle-sidebar-action-icon .vehicle-turbo-icon, .vehicle-sidebar-check svg, .vehicle-sidebar-section-title svg { width: 1.125rem; height: 1.125rem; }
.vehicle-sidebar-pin svg { width: .875rem; height: .875rem; }
.vehicle-sidebar-pin[aria-pressed="false"] svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.vehicle-sidebar-scroll { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: none; scrollbar-width: thin; padding-bottom: max(.5rem, env(safe-area-inset-bottom)); }
.vehicle-sidebar-garage { display: flex; flex-direction: column; min-height: 0; }
.vehicle-sidebar-vehicles { margin: 0; padding: 0 .5rem .5rem; list-style: none; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: none; scrollbar-width: thin; }
.vehicle-sidebar-actions, .vehicle-sidebar-footer, .vehicle-sidebar-notice { flex-shrink: 0; }
.vehicle-sidebar-row { display: flex; align-items: center; gap: .625rem; min-height: 2.75rem; border-radius: .5rem; text-decoration: none; color: inherit; }
.vehicle-sidebar-vehicles .vehicle-sidebar-row { padding: .25rem; margin-block: .125rem; min-height: 3.5rem; }
.vehicle-sidebar-row[aria-current="page"] { background: #eff6ff; color: #1e40af; }
.dark .vehicle-sidebar-row[aria-current="page"] { background: #1e3a5f; color: #dbeafe; }
.vehicle-sidebar-thumb { position: relative; flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; border-radius: .5rem; background: #f3f4f6; display: grid; place-items: center; color: #475569; font-size: .6875rem; font-weight: 700; }
.dark .vehicle-sidebar-thumb { background: #374151; color: #cbd5e1; }
.vehicle-sidebar-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.vehicle-sidebar-progress { display: none; position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); color: #2563eb; pointer-events: none; }
.dark .vehicle-sidebar-progress { color: #93c5fd; }
.vehicle-sidebar-row[aria-busy="true"] .vehicle-sidebar-progress { display: block; }
.vehicle-sidebar-row[aria-busy="true"] .vehicle-sidebar-progress-arc { animation: vehicle-sidebar-loading 1.2s linear infinite; }
@keyframes vehicle-sidebar-loading { to { stroke-dashoffset: -100; } }
.vehicle-sidebar-dot { position: absolute; top: -2px; right: -2px; width: .5rem; height: .5rem; border-radius: 50%; background: #dc2626; outline: 2px solid white; }
.vehicle-sidebar-dot[data-garage-status="soon"] { background: #d97706; }
.dark .vehicle-sidebar-dot { outline-color: #1f2937; background: #f87171; }
.dark .vehicle-sidebar-dot[data-garage-status="soon"] { background: #fbbf24; }
.vehicle-sidebar-label { visibility: hidden; opacity: 0; min-width: 0; }
#vehicle-sidebar[data-open="true"] .vehicle-sidebar-label { visibility: visible; opacity: 1; }
.vehicle-sidebar-identity { flex: 1; display: grid; gap: .125rem; min-width: 0; }
.vehicle-sidebar-name { font-size: .8125rem; line-height: 1.25rem; font-weight: 600; overflow-wrap: anywhere; }
.vehicle-sidebar-meta { font-size: .75rem; line-height: 1rem; color: #4b5563; }
.dark .vehicle-sidebar-meta { color: #cbd5e1; }
.vehicle-sidebar-meta[data-status="overdue"] { color: #b91c1c; }
.vehicle-sidebar-meta[data-status="soon"] { color: #92400e; }
.dark .vehicle-sidebar-meta[data-status="overdue"] { color: #fca5a5; }
.dark .vehicle-sidebar-meta[data-status="soon"] { color: #fcd34d; }
.vehicle-sidebar-check { flex: 0 0 1rem; margin-right: .25rem; }
.vehicle-sidebar-actions, .vehicle-sidebar-footer, .vehicle-sidebar-notice { border-top: 1px solid #e5e7eb; padding: .5rem; }
.dark .vehicle-sidebar-actions, .dark .vehicle-sidebar-footer, .dark .vehicle-sidebar-notice { border-color: #374151; }
.vehicle-sidebar-section-title { display: flex; align-items: center; gap: .625rem; min-height: 2.5rem; margin: 0; font-size: .75rem; color: #6b7280; font-weight: 400; }
.dark .vehicle-sidebar-section-title { color: #9ca3af; }
.vehicle-sidebar-section-title > span:first-child, .vehicle-sidebar-action-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 2.75rem; width: 2.75rem; }
.vehicle-sidebar-section-title strong { font-weight: 500; }
.vehicle-sidebar-action { font-size: .8125rem; padding-block: .25rem; }
.vehicle-sidebar-action-list { display: contents; }
.vehicle-sidebar-selector { display: none; grid-column: 1 / -1; padding: .25rem .5rem .75rem; }
#vehicle-sidebar[data-open="true"] .vehicle-sidebar-selector { display: block; }
.vehicle-sidebar-selector label { display: block; margin-bottom: .375rem; font-size: .75rem; font-weight: 600; }
.vehicle-sidebar-selector select { width: 100%; min-height: 2.75rem; padding: .5rem 1.75rem .5rem .625rem; border: 1px solid #d1d5db; border-radius: .5rem; background-color: #fff; color: #374151; font-size: .8125rem; text-overflow: ellipsis; }
.dark .vehicle-sidebar-selector select { background-color: #1f2937; border-color: #6b7280; color: #e5e7eb; }
.vehicle-sidebar-selector select:focus-visible { outline: 2px solid var(--app-focus-color); outline-offset: -2px; }
.dark .vehicle-sidebar-selector select:focus-visible { outline-color: var(--app-focus-color); }
.vehicle-sidebar-action[aria-disabled="true"] { cursor: wait; }
.vehicle-sidebar-notice { padding: .75rem; padding-bottom: max(.75rem, env(safe-area-inset-bottom)); font-size: .8125rem; }
.vehicle-sidebar-notice a { display: inline-flex; min-height: 2.75rem; align-items: center; text-decoration: underline; }
.vehicle-sidebar-pin { visibility: hidden; }
#vehicle-sidebar[data-open="true"] .vehicle-sidebar-pin { visibility: visible; }
.vehicle-sidebar-mobile-toggle, .vehicle-sidebar-mobile-icon, .vehicle-sidebar-handle, .vehicle-sidebar-current, .vehicle-sidebar-other-heading, .vehicle-sidebar-other-empty { display: none; }
.vehicle-sidebar-scrim { position: fixed; inset: 0; z-index: 39; background: #11182766; }
.vehicle-sidebar-scrim[hidden] { display: none; }
@media (min-width: 640px) { .vehicle-page-shell { padding-inline: 1.5rem; } }
@media (min-width: 768px) {
  html:has(#vehicle-sidebar) { overscroll-behavior-y: none; }
  body:has(#vehicle-sidebar) > [data-site-navigation] { position: relative; z-index: 45; }
  .vehicle-page-shell { margin-left: 4rem; width: calc(100% - 4rem); }
  .vehicle-page-shell:has(#vehicle-sidebar[data-pinned="true"]) { margin-left: 17.75rem; width: calc(100% - 17.75rem); }
}
@media (min-width: 1024px) { .vehicle-page-shell { padding-inline: 2rem; } }
@media (max-width: 767px) {
  body:has(#vehicle-sidebar) #flash-container { bottom: calc(var(--vehicle-sidebar-dock-height, 3.5rem) + max(.5rem, env(safe-area-inset-bottom)) + .75rem); }
  main:has(.vehicle-page-shell) { padding-bottom: 1.5rem; }
  .vehicle-page-shell { padding-bottom: calc(var(--vehicle-sidebar-dock-height, 3.5rem) + max(.5rem, env(safe-area-inset-bottom))); }
  .vehicle-sidebar-heading, .vehicle-sidebar-scroll, .vehicle-sidebar-notice { width: 100%; }
  .vehicle-sidebar-panel { top: auto; width: 100%; height: min(47.5rem, calc(100dvh - max(2.5rem, env(safe-area-inset-top)))); z-index: 60; border: 1px solid #e5e7eb; border-bottom: 0; border-radius: 1.5rem 1.5rem 0 0; transform: translateY(100%); visibility: hidden; transition: transform 220ms cubic-bezier(.2,.75,.25,1), visibility 0s linear 220ms; }
  #vehicle-sidebar[data-open="true"] .vehicle-sidebar-panel { width: 100%; transform: translateY(var(--vehicle-sidebar-drag, 0px)); visibility: visible; transition-delay: 0s; box-shadow: 0 -12px 48px #11182714; }
  #vehicle-sidebar[data-dragging] .vehicle-sidebar-panel { transition: none; }
  .vehicle-sidebar-scrim { z-index: 59; }
  .vehicle-sidebar-label { visibility: visible; opacity: 1; }
  .vehicle-sidebar-pin, .vehicle-sidebar-desktop-icon, .vehicle-sidebar-current-row, .vehicle-sidebar-section-title { display: none; }
  .vehicle-sidebar-mobile-icon { display: inline-flex; }
  .vehicle-sidebar-mobile-toggle { position: fixed; left: max(1rem, env(safe-area-inset-left)); right: max(1rem, env(safe-area-inset-right)); bottom: max(.5rem, env(safe-area-inset-bottom)); z-index: 40; display: flex; align-items: center; justify-content: center; gap: .625rem; min-height: 3.5rem; padding: .75rem 1.125rem; border: 1px solid #e5e7eb; border-radius: 1rem; font-size: .875rem; font-weight: 600; background: #fff; color: #1f2937; box-shadow: 0 6px 20px #1118271c, 0 1px 3px #11182712; cursor: pointer; }
  .vehicle-sidebar-mobile-toggle .vehicle-sidebar-dock-chevron { width: .875rem; margin-left: .1875rem; color: #667085; }
  .vehicle-sidebar-mobile-toggle:hover { background: #f4f5f7; }
  .dark .vehicle-sidebar-mobile-toggle { border-color: #586475; background: #1f2937; color: #f3f4f6; box-shadow: 0 6px 22px #0005, 0 1px 3px #0003; }
  .dark .vehicle-sidebar-mobile-toggle:hover { background: #2b3544; }
  .vehicle-sidebar-handle { height: 1.5rem; flex-shrink: 0; display: grid; place-items: center; touch-action: none; cursor: grab; }
  .vehicle-sidebar-handle:active { cursor: grabbing; }
  .vehicle-sidebar-handle::before { content: ""; width: 2.25rem; height: .25rem; background: #c7cdd5; border-radius: .25rem; }
  .dark .vehicle-sidebar-handle::before { background: #7a8698; }
  .vehicle-sidebar-heading { min-height: 0; gap: .75rem; padding: 0 1rem .75rem 1.25rem; }
  .vehicle-sidebar-heading h2 { font-size: 1.125rem; line-height: 1.5rem; letter-spacing: -.35px; white-space: normal; }
  .vehicle-sidebar-heading .vehicle-sidebar-control { order: 1; border-radius: 50%; background: #f4f5f7; }
  .dark .vehicle-sidebar-heading .vehicle-sidebar-control:not(.vehicle-sidebar-pin) { background: #2b3544; }
  .vehicle-sidebar-scroll { display: block; padding: 0 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); scroll-padding: .75rem; }
  .vehicle-sidebar-current { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: 9.25rem; margin-bottom: .75rem; border-radius: 1rem; overflow: clip; background: #273344; color: #fff; }
  .vehicle-sidebar-banner-photo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
  .vehicle-sidebar-photo-fallback { position: absolute; right: 1.25rem; top: .125rem; z-index: -2; font-size: 4rem; line-height: 1.2; font-weight: 750; letter-spacing: -3px; color: #607086; }
  .vehicle-sidebar-banner-copy { padding: 2rem .875rem .875rem; background: linear-gradient(to bottom, transparent 0px, #090e18d1 28px, #090e18f0 100%); overflow-wrap: anywhere; }
  .vehicle-sidebar-banner-copy p { margin: 0 0 .25rem; font-size: .625rem; line-height: .875rem; letter-spacing: .7px; text-transform: uppercase; font-weight: 600; }
  .vehicle-sidebar-banner-copy h3 { margin: 0; font-size: 1.25rem; line-height: 1.5625rem; font-weight: 650; letter-spacing: -.3px; }
  .vehicle-sidebar-banner-copy div { margin-top: .125rem; font-size: .75rem; line-height: 1.125rem; color: #e5e7eb; }
  .vehicle-sidebar-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; border: 0; padding: 0; margin-bottom: 1.5rem; }
  .vehicle-sidebar-quick-heading { grid-column: 1 / -1; align-items: center; min-height: 2.75rem; margin: 0; font-size: .875rem; font-weight: 650; }
  .vehicle-sidebar-actions .vehicle-sidebar-action { flex-direction: column; justify-content: center; gap: .4375rem; min-height: 4.5rem; padding: .625rem .25rem; border: 1px solid transparent; border-radius: .75rem; background: #f4f5f7; font-size: .75rem; font-weight: 550; }
  .vehicle-sidebar-actions .vehicle-sidebar-action-icon { flex: 0 0 auto; width: 1.25rem; }
  .vehicle-sidebar-actions .vehicle-sidebar-action-icon svg, .vehicle-sidebar-actions .vehicle-sidebar-action-icon .vehicle-turbo-icon { width: 1.25rem; height: 1.25rem; }
  .vehicle-sidebar-actions .vehicle-sidebar-action:hover { background: #eff6ff; border-color: #e5e7eb; }
  .vehicle-sidebar-actions .vehicle-sidebar-action[aria-disabled="true"] { opacity: .5; }
  .dark .vehicle-sidebar-actions .vehicle-sidebar-action { background: #2b3544; }
  .dark .vehicle-sidebar-actions .vehicle-sidebar-action:hover { background: #243b60; border-color: #414b5a; }
  .vehicle-sidebar-garage { border-top: 1px solid #e5e7eb; padding-top: .5rem; }
  .dark .vehicle-sidebar-garage { border-color: #374151; }
  .vehicle-sidebar-other-heading { display: flex; align-items: center; min-height: 2.75rem; margin: 0 0 .3125rem; font-size: .875rem; font-weight: 650; }
  .vehicle-sidebar-other-empty { display: block; padding-block: .5rem; font-size: .8125rem; color: #6b7280; }
  .dark .vehicle-sidebar-other-empty { color: #cbd5e1; }
  .vehicle-sidebar-vehicles { overflow: visible; padding: 0; }
  .vehicle-sidebar-vehicles .vehicle-sidebar-row { min-height: 4.125rem; padding: .5625rem .625rem; gap: .75rem; border-radius: .75rem; }
  .vehicle-sidebar-thumb { width: 2.75rem; height: 2.75rem; flex-basis: 2.75rem; border-radius: .625rem; }
  .vehicle-sidebar-name { font-size: .875rem; }
  .vehicle-sidebar-footer { display: flex; gap: .75rem; margin-top: 1rem; padding: .75rem 0 0; }
  .vehicle-sidebar-footer .vehicle-sidebar-action { justify-content: center; flex: 1; gap: .5rem; min-height: 3rem; padding: .375rem; border-radius: .625rem; background: #f4f5f7; }
  .vehicle-sidebar-footer .vehicle-sidebar-action-icon { width: 1.125rem; flex: 0 0 auto; }
  .dark .vehicle-sidebar-footer .vehicle-sidebar-action { background: #2b3544; }
}
@media (min-width: 640px) and (max-width: 767px) { .vehicle-sidebar-mobile-toggle { left: max(1.5rem, env(safe-area-inset-left)); right: max(1.5rem, env(safe-area-inset-right)); } }
@media (max-width: 767px) and (max-height: 560px) { .vehicle-sidebar-panel { height: calc(100dvh - max(1rem, env(safe-area-inset-top))); } }
@media (max-width: 350px) {
  .vehicle-sidebar-scroll { padding-inline: 1rem; }
  .vehicle-sidebar-heading { padding-left: 1rem; }
  .vehicle-sidebar-heading h2 { font-size: 1.0625rem; }
  .vehicle-sidebar-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .375rem; }
}
@media (max-width: 350px), (max-height: 560px) {
  .vehicle-sidebar-current { min-height: 7.75rem; }
  .vehicle-sidebar-banner-copy h3 { font-size: 1.125rem; line-height: 1.4375rem; }
}
@media (max-height: 760px) {
  .vehicle-sidebar-scroll { display: block; }
  .vehicle-sidebar-vehicles { overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .vehicle-sidebar-panel { transition: none; }
  .vehicle-sidebar-row[aria-busy="true"] .vehicle-sidebar-progress-arc { animation: none; }
}
@media (forced-colors: active) {
  .vehicle-sidebar-progress, .dark .vehicle-sidebar-progress { color: Highlight; }
  .vehicle-sidebar-row[aria-current="page"] { outline: 2px solid Highlight; outline-offset: -2px; }
}
