/* Load after roadhead.css. Scoped to the upgraded touchbar for legacy compatibility. */
#touchbar.driving-touch {
  --touch-size: clamp(48px, 13.5vw, 66px);
  --touch-gap: clamp(6px, 1.5vw, 10px);
  inset: auto 0 max(12px, env(safe-area-inset-bottom));
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 0 max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
  pointer-events: none;
  touch-action: none;
  box-sizing: border-box;
}
#touchbar.driving-touch .touch-zone {
  display: grid;
  gap: var(--touch-gap);
  pointer-events: none;
}
#touchbar.driving-touch .touch-steering {
  grid-template-columns: repeat(2, var(--touch-size));
}
#touchbar.driving-touch .touch-pedals {
  grid-template-columns: repeat(3, var(--touch-size));
  grid-template-rows: repeat(2, 56px);
}
#touchbar.driving-touch .tbtn {
  width: var(--touch-size);
  height: 56px;
  margin: 0;
  padding: 0;
  border: 1px solid #b9d6a780;
  border-radius: 15px;
  background: #10271bea;
  color: #f2ffe6;
  font: 800 12px/1 system-ui, sans-serif;
  letter-spacing: .03em;
  box-shadow: 0 3px 10px #0006, inset 0 1px #e4ffd418;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  pointer-events: auto;
}
#touchbar.driving-touch .touch-steering .tbtn {
  height: 70px;
  font-size: 25px;
}
#touchbar.driving-touch .touch-lift { grid-column: 2; }
#touchbar.driving-touch .touch-boost { grid-column: 3; border-color: #e7c171a6; color: #ffe5a8; }
#touchbar.driving-touch .touch-reverse { grid-column: 1; grid-row: 2; }
#touchbar.driving-touch .touch-brake { grid-column: 2; grid-row: 2; }
#touchbar.driving-touch .touch-throttle { grid-column: 3; grid-row: 2; background: #315a27ed; border-color: #cae79a; }
#touchbar.driving-touch .tbtn[data-active="true"] {
  background: #b1df78;
  border-color: #efffd6;
  color: #10200c;
  box-shadow: 0 0 0 2px #c8f29366, 0 2px 10px #0005;
  transform: translateY(2px);
}
#touchbar.driving-touch .tbtn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-height: 450px) and (orientation: landscape) {
  #touchbar.driving-touch { bottom: max(8px, env(safe-area-inset-bottom)); }
  #touchbar.driving-touch .touch-pedals { grid-template-rows: repeat(2, 48px); }
  #touchbar.driving-touch .tbtn { height: 48px; }
  #touchbar.driving-touch .touch-steering .tbtn { height: 62px; }
}