/* build-a-vehicle — generated by scripts/tools-v2/build-tool-css.js from
   views/v1-backup/tools-build-a-vehicle.ejs. DO NOT EDIT BY HAND: npm run test:tools-page-v2
   regenerates it and fails if this file has drifted.

   The shared vocabulary (.btn-primary, .form-input, .tool-card, .badge-*,
   .toast-*, #map, headings) is NOT here — public/css/tools-page-v2.css
   declares it once for every tool page. What is left is this tool's own,
   with its colour literals resolved to theme tokens and every selector
   scoped to the tool body so nothing reaches the shared header. */

.tpv2-body .vehicle-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  min-height: 100px;
}

@media (min-width: 640px) {
.tpv2-body .vehicle-card {
  min-height: 120px;
}
}

.tpv2-body .vehicle-card.fade-in {
  opacity: 1;
  transform: translateY(0);
}

.tpv2-body .vehicle-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.tpv2-body .vehicle-card.selected {
  border-color: var(--sk-info);
  background-color: var(--sk-border);
}

.tpv2-body .vehicle-card .aspect-square {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.tpv2-body .vehicle-card img {
  transition: transform 0.3s ease;
}

.tpv2-body .vehicle-card:hover img {
  transform: scale(1.08);
}

.tpv2-body .config-tab {
  transition: all 0.2s ease;
}

.tpv2-body .config-tab.active {
  border-color: var(--sk-info);
  color: var(--sk-info-text);
}

.tpv2-body .config-tab:hover:not(.active) {
  border-color: var(--sk-border-2);
  color: var(--sk-muted);
}

.tpv2-body .part-item {
  transition: all 0.2s ease;
}

.tpv2-body .part-item:hover {
  background-color: var(--sk-surface);
  border-color: var(--sk-border-2);
}

.tpv2-body .part-item.selected {
  background-color: var(--sk-border);
  border-color: var(--sk-info);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sk-info) 10%, transparent);
}

.tpv2-body .status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
}

@media (max-width: 639px) {
.tpv2-body .status-badge {
  font-size: 0.625rem;
  padding: 0.125rem 0.375rem;
}
}

.tpv2-body .status-required {
  background-color: var(--sk-danger-soft);
  color: var(--sk-danger-text);
}

.tpv2-body .status-optional {
  background-color: var(--sk-bg);
  color: var(--sk-info-text);
}

.tpv2-body .status-complete {
  background-color: var(--sk-bg);
  color: var(--sk-success-text);
}

.tpv2-body input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background-color: var(--sk-surface-2);
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

@media (min-width: 640px) {
.tpv2-body input[type="range"] {
  height: 8px;
}
}

.tpv2-body input[type="range"]::-webkit-slider-track {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background-color: var(--sk-surface-2);
  border-radius: 4px;
  border: none;
  outline: none;
}

@media (min-width: 640px) {
.tpv2-body input[type="range"]::-webkit-slider-track {
  height: 8px;
}
}

.tpv2-body input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: var(--sk-info);
  height: 16px;
  width: 16px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}

@media (min-width: 640px) {
.tpv2-body input[type="range"]::-webkit-slider-thumb {
  height: 20px;
  width: 20px;
}
}

.tpv2-body input[type="range"]::-webkit-slider-thumb:hover {
  background: var(--sk-info);
  transform: scale(1.1);
}

.tpv2-body input[type="range"]::-moz-range-track {
  height: 6px;
  background-color: var(--sk-surface-2);
  border-radius: 4px;
  border: none;
  outline: none;
}

@media (min-width: 640px) {
.tpv2-body input[type="range"]::-moz-range-track {
  height: 8px;
}
}

.tpv2-body input[type="range"]::-moz-range-thumb {
  background: var(--sk-info);
  height: 16px;
  width: 16px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
  -moz-appearance: none;
}

@media (min-width: 640px) {
.tpv2-body input[type="range"]::-moz-range-thumb {
  height: 20px;
  width: 20px;
}
}

.tpv2-body input[type="range"]::-moz-range-thumb:hover {
  background: var(--sk-info);
  transform: scale(1.1);
}

.tpv2-body input[type="range"]::-moz-range-progress {
  background: var(--sk-info);
  height: 6px;
  border-radius: 4px;
}

@media (min-width: 640px) {
.tpv2-body input[type="range"]::-moz-range-progress {
  height: 8px;
}
}

.tpv2-body input[type="checkbox"]:checked {
  background-color: var(--sk-info);
  border-color: var(--sk-info);
}

.tpv2-body input[type="radio"]:checked {
  background-color: var(--sk-info);
  border-color: var(--sk-info);
}

.tpv2-body input[type="checkbox"]:focus,
.tpv2-body input[type="radio"]:focus {
  ring-color: var(--sk-info);
  border-color: var(--sk-info);
}

.tpv2-body select:focus {
  outline: none;
  ring: 2px solid var(--sk-info);
  border-color: var(--sk-info);
}

.tpv2-body button:hover {
  transition: all 0.2s ease;
}

.tpv2-body input[type="number"]:focus {
  outline: none;
  ring: 2px solid var(--sk-info);
  border-color: var(--sk-info);
}

.tpv2-body * {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

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

.tpv2-body .animate-spin {
  animation: spin 1s linear infinite;
}

.tpv2-body #vehicleGrid {
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.tpv2-body .text-red-600 {
  color: var(--sk-danger-text);
}

.tpv2-body #vehicleGrid.hidden {
  display: none !important;
}

.tpv2-body #vehicleLoadingState.hidden {
  display: none !important;
}

.tpv2-body #vehicleGrid:not(.hidden) {
  display: grid;
}

.tpv2-body #vehicleLoadingState {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}

@media (min-width: 640px) {
.tpv2-body #vehicleLoadingState {
  min-height: 200px;
}
}

@keyframes fadeInUp {
  from { opacity: 0;
          transform: translateY(30px); }
  to { opacity: 1;
          transform: translateY(0); }
}

.tpv2-body .vehicle-card.animate-in {
  animation: fadeInUp 0.6s ease forwards;
}

@media (max-width: 1279px) {
.tpv2-body .grid.grid-cols-1.xl\\:grid-cols-2 > div:first-child {
  order: 2;
}

.tpv2-body .grid.grid-cols-1.xl\\:grid-cols-2 > div:last-child {
  order: 1;
}
}

.tpv2 {
  --warning-bg: var(--sk-warning-soft);
  --warning-text: var(--sk-warning-text);
  --warning-accent: var(--sk-warning);
  --warning-hover: var(--sk-warning);
  --info-bg: var(--sk-border);
  --info-text: var(--sk-info-text);
  --info-accent: var(--sk-info);
  --error-text: var(--sk-danger-text);
  --error-hover: var(--sk-danger);
  --success-primary: var(--sk-success);
  --success-hover: var(--sk-success-soft);
  --code-bg: var(--sk-surface);
  --code-text: var(--sk-success-text);
}

.tpv2-body [data-theme="dark"] {
  --warning-bg: var(--sk-warning-soft);
  --warning-text: var(--sk-warning-text);
  --warning-accent: var(--sk-warning);
  --warning-hover: var(--sk-warning);
  --info-bg: var(--sk-info);
  --info-text: var(--sk-info-text);
  --info-accent: var(--sk-info);
  --error-text: var(--sk-danger-text);
  --error-hover: var(--sk-danger);
  --success-primary: var(--sk-success);
  --success-hover: var(--sk-success-soft);
  --code-bg: var(--sk-bg);
  --code-text: var(--sk-success-text);
}

.tpv2-body [data-theme="dark"] .shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
}

.tpv2-body [data-theme="dark"] .shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
}

.tpv2-body [data-theme="dark"] .shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 10px 10px -5px rgba(0, 0, 0, 0.6);
}

.tpv2-body .config-tab.active {
  border-color: var(--accent-primary) !important;
  color: var(--accent-primary) !important;
}

.tpv2-body .config-tab:not(.active) {
  border-color: transparent !important;
  color: var(--text-secondary) !important;
}

.tpv2-body .output-tab.active {
  background-color: var(--accent-primary) !important;
  color: white !important;
}

.tpv2-body .output-tab:not(.active) {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

.tpv2-body input:focus,
.tpv2-body select:focus,
.tpv2-body textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sk-info) 10%, transparent);
}

.tpv2-body [data-theme="dark"] input:focus,
.tpv2-body [data-theme="dark"] select:focus,
.tpv2-body [data-theme="dark"] textarea:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sk-info) 20%, transparent);
}

.tpv2-body .btn-hover:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-medium);
}

.tpv2-body .vehicle-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-large) !important;
  border-color: var(--accent-primary) !important;
}

.tpv2-body .vehicle-card.selected {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg) !important;
}

@keyframes fadeInUp {
  from { opacity: 0;
    transform: translateY(20px); }
  to { opacity: 1;
    transform: translateY(0); }
}

.tpv2-body .vehicle-card.animate-in {
  animation: fadeInUp 0.5s ease-out forwards;
}