/* ── RacerInspect — shared layout for /racer/<plate> + modal ──
 * Three regions on desktop: hero (right column, takes 3D iframe),
 * info (top-left), trait breakdown (bottom-left, button list).
 * Mobile collapses to a single column with hero on top.
 *
 * Surfaces use the .rv-glass / .rv-glass-soft utility classes
 * declared in globals.css. Pills come from .rv-pill-primary /
 * .rv-pill-teal / .rv-pill-ghost.
 */

.RacerInspect_layout__rDCSS {
  display: grid;
  grid-template-columns: minmax(280px, 1.05fr) minmax(320px, 1fr);
  grid-template-areas:
    "info hero"
    "traits hero";
  grid-template-rows: auto 1fr;
  gap: 24px;
  align-items: stretch;
}

/* Skip-to-3D-viewer — visually hidden until focused. Keyboard /
 * screen reader users can press Tab on entering the page and land
 * here as the first focusable element, then Enter to jump to the
 * iframe section. */
.RacerInspect_skipToViewer__wPQlD {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--rv-racer-accent, var(--rv-racer-pink));
  color: var(--rv-deep-space);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 0.04em;
}

.RacerInspect_skipToViewer__wPQlD:focus,
.RacerInspect_skipToViewer__wPQlD:focus-visible {
  left: 12px;
  top: 12px;
  outline: 3px solid var(--rv-cream-2026);
  outline-offset: 3px;
}

/* Page variant gets a wider gap on desktop; modal variant tightens
 * to leave room for the modal frame. */
.RacerInspect_layoutModal__J8Wkp {
  gap: 16px;
}

@media (max-width: 960px) {
  .RacerInspect_layout__rDCSS {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hero"
      "info"
      "traits";
  }
}

/* ── Hero — anatomy 3D iframe (or static image fallback) ─────── */
.RacerInspect_heroPanel__6INJB {
  grid-area: hero;
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  min-height: 480px;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-2xl, 24px);
  /* Allow pinch-to-zoom on the 3D stage; the iframed anatomy viewer
   * has its own orbit/pan controls but the page must not block the
   * native zoom gesture (regression guard in mobile-a11y.test.js). */
  touch-action: pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
}

.RacerInspect_layoutModal__J8Wkp .RacerInspect_heroPanel__6INJB {
  min-height: 360px;
}

.RacerInspect_heroBackdrop__WaDra {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 111, 163, 0.32), transparent 52%),
    radial-gradient(circle at 80% 80%, rgba(56, 208, 198, 0.22), transparent 50%),
    radial-gradient(circle at 18% 70%, rgba(167, 139, 250, 0.28), transparent 48%);
  pointer-events: none;
}

.RacerInspect_heroIframe__0thBj {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 480px;
  border: 0;
  display: block;
  background: transparent;
  border-radius: inherit;
  /* Hidden until anatomy-ready fires — RacerInspect adds
     .heroIframeReady to fade it in over the cosmic backdrop. Avoids
     the abrupt pop when the viewer's GLB suddenly replaces the
     loading dots. */
  opacity: 0;
  transition: opacity 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.RacerInspect_heroIframeReady__A3LmK {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .RacerInspect_heroIframe__0thBj { transition: none; opacity: 1; }
}

.RacerInspect_layoutModal__J8Wkp .RacerInspect_heroIframe__0thBj {
  min-height: 360px;
}

/* Static fallback — used when the iframe fails or is unreachable.
 * One soft drop-shadow + radial corner fade so the alpha cutout
 * doesn't silhouette the rectangular bounds against the cosmic
 * backdrop, but without the doubled stripe a two-pass shadow
 * produces under the racer's flat silhouette edge. */
.RacerInspect_heroImage__0OzBb {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin: auto;
  object-fit: contain;
  filter: drop-shadow(0 30px 42px rgba(20, 14, 24, 0.4));
  -webkit-mask-image: radial-gradient(ellipse 94% 96% at 50% 50%, #000 88%, transparent 100%);
          mask-image: radial-gradient(ellipse 94% 96% at 50% 50%, #000 88%, transparent 100%);
}

.RacerInspect_heroFallback__GgByj {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  margin: auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--rv-cream-2026);
}

/* Floating fullscreen icon. In page mode it sits top-right of the
 * 3D stage (corner farthest from the rest of the layout). In modal
 * mode it moves to top-LEFT so it can't collide with the modal's
 * own close button, which always anchors the modal's top-right. */
.RacerInspect_fullscreenBtn__oqiwI {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(20, 14, 24, 0.62);
  color: var(--rv-cream-2026);
  border: 1px solid var(--rv-glass-border-mauve);
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(20, 14, 24, 0.32);
  transition: background 180ms ease,
              border-color 180ms ease,
              transform 180ms ease;
}

.RacerInspect_layoutModal__J8Wkp .RacerInspect_fullscreenBtn__oqiwI {
  /* Move out of the way of the modal's top-right close button. */
  right: auto;
  left: 12px;
}

.RacerInspect_fullscreenBtn__oqiwI:hover,
.RacerInspect_fullscreenBtn__oqiwI:focus-visible {
  background: rgba(255, 111, 163, 0.32);
  border-color: var(--rv-racer-accent, var(--rv-racer-pink));
  color: var(--rv-cream-2026);
  transform: scale(1.06);
  outline: none;
}

.RacerInspect_fullscreenBtn__oqiwI:active {
  transform: scale(0.96);
}

/* When the iframe enters native fullscreen the button keeps working
 * — the viewer's own UI handles "exit" via Escape, so we just hide
 * the parent's button while the document is in fullscreen mode. */
.RacerInspect_heroPanel__6INJB:fullscreen .RacerInspect_fullscreenBtn__oqiwI,
.RacerInspect_heroIframe__0thBj:fullscreen ~ .RacerInspect_fullscreenBtn__oqiwI {
  display: none;
}

/* Static hero image that sits behind the iframe while the GLB streams.
 * Held at lower opacity so the dotted overlay reads on top, then
 * fades out as the 3D model takes over. */
.RacerInspect_heroPreloadImage__9OlyM {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  object-fit: contain;
  padding: 8%;
  opacity: 0.55;
  filter: drop-shadow(0 26px 36px rgba(20, 14, 24, 0.42)) blur(1px);
  transition: opacity 360ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.RacerInspect_heroPreloadImageHidden__2AT7D {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .RacerInspect_heroPreloadImage__9OlyM { transition: none; }
}

/* Centered loading state — halo disc + pulsing dots + label. The old
 * three-dot cluster was anchored to the bottom of the panel and read
 * as a UI accessory rather than a state indicator; this version lives
 * dead-center so the empty space between page transition and
 * anatomy-ready is filled with a clear "loading" affordance. */
.RacerInspect_heroLoading__TID59 {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  pointer-events: none;
}

.RacerInspect_heroLoadingHalo__Pdx59 {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 111, 163, 0.18) 0%,
    rgba(167, 139, 250, 0.1) 40%,
    transparent 72%
  );
  filter: blur(8px);
  animation: RacerInspect_heroLoadingHaloPulse__AcCPV 2.4s ease-in-out infinite;
}

.RacerInspect_heroLoadingDots___gQ5n {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.RacerInspect_heroLoadingDot__Fvfc7 {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--rv-cream-2026);
  opacity: 0.4;
  animation: RacerInspect_heroLoadingPulse__6_9My 1.2s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(255, 111, 163, 0.5);
}

.RacerInspect_heroLoadingDot__Fvfc7:nth-child(2) { animation-delay: 0.15s; }
.RacerInspect_heroLoadingDot__Fvfc7:nth-child(3) { animation-delay: 0.3s; }

.RacerInspect_heroLoadingLabel__DUXNq {
  position: relative;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rv-clay);
  text-shadow: 0 2px 6px rgba(20, 14, 24, 0.6);
}

@keyframes RacerInspect_heroLoadingPulse__6_9My {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}

@keyframes RacerInspect_heroLoadingHaloPulse__AcCPV {
  0%, 100% { transform: scale(0.92); opacity: 0.6; }
  50% { transform: scale(1.04); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .RacerInspect_heroLoadingDot__Fvfc7,
  .RacerInspect_heroLoadingHalo__Pdx59 { animation: none; opacity: 0.6; }
}

@media (max-width: 768px) {
  .RacerInspect_heroPanel__6INJB,
  .RacerInspect_layoutModal__J8Wkp .RacerInspect_heroPanel__6INJB {
    min-height: 320px;
  }
  .RacerInspect_heroIframe__0thBj,
  .RacerInspect_layoutModal__J8Wkp .RacerInspect_heroIframe__0thBj {
    min-height: 320px;
  }
}

/* ── Info column ─────────────────────────────────────────── */
.RacerInspect_infoPanel__rTnGx {
  grid-area: info;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
}

.RacerInspect_layoutModal__J8Wkp .RacerInspect_infoPanel__rTnGx {
  padding: 22px;
  gap: 10px;
}

.RacerInspect_eyebrow__Ls3_J {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: var(--weight-bold, 700);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rv-racer-accent, var(--rv-racer-pink));
}

.RacerInspect_plate__mV7It {
  margin: 0;
  font-family: var(--font-display, var(--font-ui));
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--rv-cream-2026);
  text-transform: uppercase;
}

.RacerInspect_layoutModal__J8Wkp .RacerInspect_plate__mV7It {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
}

.RacerInspect_category__g7bOE {
  margin: 0;
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: var(--radius-pill, 999px);
  background: rgba(56, 208, 198, 0.16);
  border: 1px solid rgba(56, 208, 198, 0.32);
  color: var(--rv-turbo-teal);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: capitalize;
}

.RacerInspect_description__7bk2p {
  margin: 4px 0 0;
  color: var(--rv-clay);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.5;
}

.RacerInspect_layoutModal__J8Wkp .RacerInspect_description__7bk2p {
  font-size: 0.95rem;
}

.RacerInspect_actions__62WLI {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.RacerInspect_actionBtn__BVFb9 {
  min-height: 44px;
  text-decoration: none;
}

.RacerInspect_actionBtn__BVFb9 svg {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .RacerInspect_infoPanel__rTnGx {
    padding: 22px;
  }
  .RacerInspect_actions__62WLI {
    flex-direction: column;
    align-items: stretch;
  }
  .RacerInspect_actions__62WLI > * {
    width: 100%;
  }
}

/* ── Trait breakdown — buttons that drive the iframe ─────── */
.RacerInspect_traitPanel__ucGYl {
  grid-area: traits;
  padding: 24px 28px;
}

.RacerInspect_layoutModal__J8Wkp .RacerInspect_traitPanel__ucGYl {
  padding: 20px 22px;
}

.RacerInspect_traitHeading__on1mH {
  margin: 0 0 12px;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rv-clay);
}

/* "Full Racer" reset — a full-width, hero-sized pill above the
 * trait list. Sits visually as the eighth trait button; pressing
 * it deselects any focused category and resets the iframe to the
 * full racer view. */
.RacerInspect_resetBtn__BAbl7 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 14px;
  padding: 14px 20px;
  border-radius: var(--radius-xl, 18px);
  background: linear-gradient(
    135deg,
    rgba(255, 111, 163, 0.18),
    rgba(167, 139, 250, 0.18) 55%,
    rgba(56, 208, 198, 0.18)
  );
  border: 1px solid var(--rv-glass-border-mauve);
  color: var(--rv-cream-2026);
  font-family: var(--font-display, var(--font-ui));
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 56px;
  transition: background 200ms ease,
              border-color 200ms ease,
              transform 200ms ease,
              box-shadow 200ms ease;
}

.RacerInspect_resetBtn__BAbl7 svg {
  flex-shrink: 0;
  color: var(--rv-cream-2026);
}

.RacerInspect_resetBtn__BAbl7:hover:not(:disabled),
.RacerInspect_resetBtn__BAbl7:focus-visible:not(:disabled) {
  background: linear-gradient(
    135deg,
    rgba(255, 111, 163, 0.32),
    rgba(167, 139, 250, 0.28) 55%,
    rgba(56, 208, 198, 0.28)
  );
  border-color: var(--rv-racer-accent, var(--rv-racer-pink));
  transform: translateY(-1px);
  outline: none;
  box-shadow: 0 12px 28px rgba(255, 111, 163, 0.18);
}

.RacerInspect_resetBtnActive__OLw8i {
  background: linear-gradient(
    135deg,
    rgba(255, 111, 163, 0.42),
    rgba(167, 139, 250, 0.34) 55%,
    rgba(56, 208, 198, 0.34)
  );
  border-color: var(--rv-racer-accent, var(--rv-racer-pink));
  box-shadow: 0 0 0 1px rgba(255, 111, 163, 0.4),
              0 14px 32px rgba(255, 111, 163, 0.22);
}

.RacerInspect_resetBtnDot__4OObN {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rv-racer-accent, var(--rv-racer-pink));
  box-shadow: 0 0 12px var(--rv-racer-accent, var(--rv-racer-pink));
  flex-shrink: 0;
}

.RacerInspect_resetBtn__BAbl7:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Two-column grid by default — 7 traits at one-per-row was forcing
 * page scroll on the detail view at desktop heights. Auto-fits to
 * one column when the panel is narrower than ~440px (mobile / small
 * modal), so the buttons don't get cramped. */
.RacerInspect_traitList__T55ku {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.RacerInspect_traitRow__oWB1z {
  display: flex;
}

.RacerInspect_traitButton__fXksT {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-xl, 18px);
  background: rgba(33, 25, 50, 0.5);
  border: 1px solid rgba(176, 167, 201, 0.16);
  color: var(--rv-cream-2026);
  text-align: left;
  cursor: pointer;
  min-height: 56px;
  /* Use cubic-bezier easing matched to the rest of the redesign so
   * focus shifts feel coordinated, not jittery. No transform on the
   * active state — the border-color + box-shadow already tell the
   * eye which row is selected, and skipping the translate avoids
   * the rubber-band feeling when clicking quickly through traits. */
  transition: background 220ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1);
  font: inherit;
}

.RacerInspect_traitButton__fXksT:hover:not(:disabled),
.RacerInspect_traitButton__fXksT:focus-visible:not(:disabled) {
  background: rgba(88, 58, 110, 0.4);
  border-color: rgba(255, 111, 163, 0.32);
  outline: none;
}

.RacerInspect_traitButton__fXksT:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Active state — racer-pink accent + filled-tone background.
 * No translateX so quickly cycling through traits doesn't shake. */
.RacerInspect_traitButtonActive__3epS5 {
  border-color: var(--rv-racer-accent, var(--rv-racer-pink));
  box-shadow: 0 0 0 1px rgba(255, 111, 163, 0.4),
              0 12px 28px rgba(255, 111, 163, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  .RacerInspect_traitButton__fXksT { transition: none; }
}

.RacerInspect_traitButtonActive__3epS5.RacerInspect_tone_vehicle__vt6VN    { background: rgba(255, 111, 163, 0.22); }
.RacerInspect_traitButtonActive__3epS5.RacerInspect_tone_driver__ugxlv     { background: rgba(56, 208, 198, 0.22); }
.RacerInspect_traitButtonActive__3epS5.RacerInspect_tone_tires__HICmy      { background: rgba(255, 196, 87, 0.22); }
.RacerInspect_traitButtonActive__3epS5.RacerInspect_tone_goggles__EItAE    { background: rgba(167, 139, 250, 0.22); }
.RacerInspect_traitButtonActive__3epS5.RacerInspect_tone_hat__FHxsV        { background: rgba(114, 213, 87, 0.22); }
.RacerInspect_traitButtonActive__3epS5.RacerInspect_tone_attachment__X3ve2 { background: rgba(255, 111, 163, 0.22); }
.RacerInspect_traitButtonActive__3epS5.RacerInspect_tone_background__iQODM { background: rgba(176, 167, 201, 0.22); }

.RacerInspect_traitIcon__aoq_F {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(56, 208, 198, 0.14);
  border: 1px solid rgba(56, 208, 198, 0.28);
  color: var(--rv-turbo-teal);
}

.RacerInspect_traitText__yyf3M {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.RacerInspect_traitLabel__QdHo2 {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rv-clay);
}

.RacerInspect_traitValue__1loOp {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  color: var(--rv-cream-2026);
  text-transform: capitalize;
  overflow-wrap: anywhere;
}

/* Color appended to the part name (e.g. "Lunar Rover · Cherry Red").
 * Lower opacity + lighter weight so the part name stays primary and
 * the color reads as secondary metadata. */
.RacerInspect_traitColor__uaTLK {
  font-weight: 500;
  color: var(--rv-clay);
  margin-left: 2px;
}

.RacerInspect_traitActiveDot__a_Oz3 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rv-racer-accent, var(--rv-racer-pink));
  box-shadow: 0 0 12px var(--rv-racer-accent, var(--rv-racer-pink));
  flex-shrink: 0;
}

.RacerInspect_traitFallbackNote__qxq4Z {
  margin: 16px 0 0;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--rv-clay);
  line-height: 1.5;
}

.RacerInspect_traitFallbackNote__qxq4Z a {
  color: var(--rv-racer-accent, var(--rv-racer-pink));
  text-decoration: underline;
}

/* Per-trait icon tones — match the page-version palette. */
.RacerInspect_tone_vehicle__vt6VN .RacerInspect_traitIcon__aoq_F {
  background: rgba(255, 111, 163, 0.16);
  border-color: rgba(255, 111, 163, 0.32);
  color: var(--rv-racer-accent, var(--rv-racer-pink));
}
.RacerInspect_tone_driver__ugxlv .RacerInspect_traitIcon__aoq_F {
  background: rgba(56, 208, 198, 0.16);
  border-color: rgba(56, 208, 198, 0.32);
  color: var(--rv-turbo-teal);
}
.RacerInspect_tone_tires__HICmy .RacerInspect_traitIcon__aoq_F {
  background: rgba(255, 196, 87, 0.16);
  border-color: rgba(255, 196, 87, 0.36);
  color: var(--rv-poppy);
}
.RacerInspect_tone_goggles__EItAE .RacerInspect_traitIcon__aoq_F {
  background: rgba(167, 139, 250, 0.16);
  border-color: rgba(167, 139, 250, 0.36);
  color: var(--rv-lilac-purple);
}
.RacerInspect_tone_hat__FHxsV .RacerInspect_traitIcon__aoq_F {
  background: rgba(114, 213, 87, 0.16);
  border-color: rgba(114, 213, 87, 0.36);
  color: var(--rv-leaf);
}
.RacerInspect_tone_attachment__X3ve2 .RacerInspect_traitIcon__aoq_F {
  background: rgba(255, 111, 163, 0.16);
  border-color: rgba(255, 111, 163, 0.32);
  color: var(--rv-racer-accent, var(--rv-racer-pink));
}
.RacerInspect_tone_background__iQODM .RacerInspect_traitIcon__aoq_F {
  background: rgba(176, 167, 201, 0.16);
  border-color: rgba(176, 167, 201, 0.36);
  color: var(--rv-clay);
}

@media (max-width: 768px) {
  .RacerInspect_traitPanel__ucGYl {
    padding: 20px;
  }
  .RacerInspect_traitButton__fXksT {
    padding: 10px 12px;
  }
}

/* ── Print — trading-card fallback ─────────────────────────
 * The 3D iframe can't print. When the user hits Cmd-P we hide the
 * iframe, swap to the static fallback image, and force a clean
 * black-on-white card layout. Trait buttons collapse to plain rows.
 */
@media print {
  .RacerInspect_layout__rDCSS {
    display: block !important;
  }
  .RacerInspect_heroPanel__6INJB {
    border: 1px solid #000 !important;
    box-shadow: none !important;
    background: #fff !important;
    min-height: 0 !important;
    page-break-inside: avoid;
  }
  .RacerInspect_heroIframe__0thBj,
  .RacerInspect_heroLoading__TID59,
  .RacerInspect_fullscreenBtn__oqiwI {
    display: none !important;
  }
  .RacerInspect_heroImage__0OzBb {
    filter: none !important;
  }
  .RacerInspect_infoPanel__rTnGx,
  .RacerInspect_traitPanel__ucGYl {
    background: #fff !important;
    border: 1px solid #000 !important;
    box-shadow: none !important;
    color: #000 !important;
  }
  .RacerInspect_actions__62WLI {
    display: none !important;
  }
  .RacerInspect_description__7bk2p,
  .RacerInspect_plate__mV7It,
  .RacerInspect_traitLabel__QdHo2,
  .RacerInspect_traitValue__1loOp,
  .RacerInspect_category__g7bOE,
  .RacerInspect_traitHeading__on1mH {
    color: #000 !important;
  }
  .RacerInspect_resetBtn__BAbl7 {
    display: none !important;
  }
  .RacerInspect_traitButton__fXksT {
    background: #fff !important;
    border: 1px solid #000 !important;
    box-shadow: none !important;
  }
}

/* ── Share-card gallery ──────────────────────────────────────────
   One preview tile per OG variant. Tiles share a uniform
   dimension-driven aspect-ratio so a square + portrait + landscape
   trio reads as a deliberate design rather than a layout bug. */
.RacerInspect_shareCards__preps {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--rv-border-subtle, rgba(246, 243, 248, 0.12));
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.RacerInspect_shareCardsHeading__CFxDi {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rv-accent, #FFC457);
  margin: 0;
}
.RacerInspect_shareCardsBlurb__72suY {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(246, 243, 248, 0.7);
}
.RacerInspect_shareCardsGrid__JnUpS {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-top: 6px;
}
.RacerInspect_shareCard__kVttN {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(20, 14, 24, 0.36);
  border: 1px solid rgba(246, 243, 248, 0.12);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.RacerInspect_shareCard__kVttN:hover {
  transform: translateY(-1px);
  border-color: rgba(246, 243, 248, 0.24);
}
.RacerInspect_shareCardPreview__TCFzl {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(20, 14, 24, 0.6), rgba(88, 58, 110, 0.32));
  display: flex;
  align-items: center;
  justify-content: center;
}
.RacerInspect_shareCardPreview__TCFzl img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.RacerInspect_shareCardLabel__wXBx0 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 0 2px;
}
.RacerInspect_shareCardName__kTfA0 {
  font-size: 12px;
  font-weight: 700;
  color: rgba(246, 243, 248, 0.92);
}
.RacerInspect_shareCardSize__aRYWK {
  font-size: 11px;
  color: rgba(246, 243, 248, 0.5);
  font-variant-numeric: tabular-nums;
}
.RacerInspect_shareCardActions__FnP0w {
  display: flex;
  gap: 6px;
}
.RacerInspect_shareCardBtn__En8xX {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 6px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid rgba(246, 243, 248, 0.18);
  background: rgba(246, 243, 248, 0.06);
  color: rgba(246, 243, 248, 0.92);
  cursor: pointer;
  min-height: 36px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.RacerInspect_shareCardBtn__En8xX:hover {
  background: rgba(246, 243, 248, 0.12);
  border-color: rgba(246, 243, 248, 0.32);
}
.RacerInspect_shareCardBtn__En8xX svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .RacerInspect_shareCardsGrid__JnUpS {
    grid-template-columns: repeat(2, 1fr);
  }
}