/*
 * cars.xjk.yt - Showroom controls and telemetry.
 * Loaded after launch.css and before catalog.css.
 */

/* ---------- Compact model selector ---------- */

.showroom-control-deck {
  position: relative;
  z-index: 9;
  width: min(94%, 980px);
  margin: 14px 0 0 auto;
  opacity: 0.78;
  transition: opacity 180ms ease;
}

.showroom-control-deck:hover,
.showroom-control-deck:focus-within {
  opacity: 1;
}

.showroom-toolbar {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  gap: 4px;
  align-items: center;
  min-width: 0;
}

.showroom-step,
.showroom-model-button {
  border: 0;
  color: var(--text-dim);
  background: transparent;
  cursor: pointer;
  transition:
    color 140ms ease,
    background 140ms ease,
    transform 140ms ease;
}

.showroom-step:hover,
.showroom-model-button:hover {
  color: var(--text-main);
}

.showroom-step:focus-visible,
.showroom-model-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.showroom-step {
  position: relative;
  min-height: 42px;
  font-size: 16px;
}

.showroom-step:hover {
  color: var(--accent);
  transform: translateX(-2px);
}

.showroom-step:last-child:hover {
  transform: translateX(2px);
}

.showroom-picker {
  display: flex;
  gap: 0;
  min-width: 0;
  padding: 4px 12px 8px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: rgba(249, 115, 22, 0.34) transparent;
  scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
}

.showroom-picker::-webkit-scrollbar {
  height: 4px;
}

.showroom-picker::-webkit-scrollbar-thumb {
  background: rgba(249, 115, 22, 0.34);
}

.showroom-model-button {
  position: relative;
  flex: 0 0 auto;
  min-width: 68px;
  padding: 9px 10px 8px;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.03em;
  opacity: 0.68;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.showroom-model-button::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--showroom-tone, var(--accent));
  content: "";
  opacity: 0;
  transform: scaleX(0.15);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.showroom-model-button.is-active,
.showroom-model-button[aria-pressed="true"] {
  color: var(--text-main);
  opacity: 1;
}

.showroom-model-button:hover,
.showroom-model-button:focus-visible {
  opacity: 1;
}

.showroom-model-button.is-active::after,
.showroom-model-button[aria-pressed="true"]::after {
  opacity: 1;
  transform: scaleX(1);
}

.showroom-noscript {
  margin: 0;
  color: var(--warn);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 9px;
}

@keyframes showroom-loading {
  to {
    transform: rotate(1turn);
  }
}