/* A selected car gets its own small remote, independent of the Steps drawer. */
.canvas-workspace .car-controls {
  position: absolute;
  z-index: 9;
  right: calc(14px + var(--right-clearance, 0px));
  bottom: calc(70px + var(--tray-rise, 0px));
  width: 172px;
  margin: 0;
  padding: 8px;
  border: 1px solid #c7ddd1;
  border-radius: 20px;
  background: #fafff9f5;
  box-shadow: 0 6px 24px #254b4b20;
  backdrop-filter: blur(12px);
}
.canvas-workspace .car-controls[hidden] { display: none !important; }
.car-controls .car-drive-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.car-controls .car-drive-buttons button,
.car-controls .car-utility-buttons button {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 48px;
  padding: 4px;
  margin: 0;
  border: 0;
  border-radius: 12px;
  background: #eaf4ed;
  color: #356e5d;
  font-size: 27px;
  line-height: 1;
  touch-action: manipulation;
}
.car-controls .car-drive-buttons [data-action="drive-forward"] { background: #cde8db; color: #275d4d; }
.car-controls .car-drive-buttons .drive-run { grid-column: 2 / 4; background: #358575; color: white; font-size: 24px; }
.car-controls .car-drive-buttons .drive-run[aria-pressed="true"] { background: #c16c60; }
.car-controls .car-utility-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 5px; border-top: 1px solid #dfeae1; padding-top: 5px; }
.car-controls .car-utility-buttons button { min-height: 44px; background: transparent; font-size: 27px; }
.car-controls .car-utility-buttons .icon { width: 20px; height: 20px; }
.car-controls .car-utility-buttons button[aria-pressed="true"] { background: #d4e9dc; }
.car-controls button:active:not(:disabled) { transform: scale(.95); }
.car-controls button:focus-visible { outline: 3px solid #527fb7; outline-offset: 2px; }
.car-controls button:disabled { opacity: .35; cursor: default; }
.car-driving-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 1100px) {
  .canvas-workspace[data-open-panels~="steps"] .car-controls { left: 12px; right: auto; }
}
@media (max-width: 600px) {
  .canvas-workspace .car-controls { right: 10px; bottom: calc(68px + var(--tray-rise, 0px)); }
}
@media print { .car-controls { display: none !important; } }