/*
 * cars.xjk.yt catalog surface.
 * Base reset, typography, controls, and topbar/sidenav chrome come from
 * /shared/xjk-core. Section switching belongs to the shared sidenav, which
 * navigates by #hash; this page owns no tab strip. This sheet owns the accent,
 * the shared foundation for the launch panel, render viewport, car catalog, and trust panel.
 */

:root {
  --accent: #f97316;
  --accent-soft: rgba(249, 115, 22, 0.12);
  --cars-sidenav-half: 0px;
  --surface-glow: rgba(249, 115, 22, 0.06);
}

html,
body {
  overflow-x: clip;
}

/* The showroom breaks out of the centered content column to the physical
   right edge. The shared desktop sidenav offsets that column, so retain half
   of its width when calculating the one-sided viewport bleed. */
html.xjk-has-sidenav {
  --cars-sidenav-half: 116px;
}

html.xjk-has-sidenav[data-xjk-sidenav="collapsed"] {
  --cars-sidenav-half: 34px;
}

/* Backdrop: faint transit texture, same language as the sibling stations. */
.backdrop {
  opacity: 0.12;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1540 540'%3E%3Cg fill='none' stroke='%23f97316' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 96H176L232 152H408L470 214H654L724 284H864L936 356H1096L1168 428H1452' stroke-opacity='.15' stroke-width='3' stroke-dasharray='10 12'/%3E%3Cpath d='M64 438H206L268 376H452L516 312H672' stroke-opacity='.1' stroke-width='4'/%3E%3Cpath d='M880 126H1020L1074 72H1296L1358 138H1516' stroke-opacity='.12' stroke-width='4'/%3E%3C/g%3E%3Cg fill='%23020406' stroke='%23f97316'%3E%3Ccircle cx='176' cy='96' r='7' stroke-opacity='.16' stroke-width='4'/%3E%3Ccircle cx='408' cy='152' r='7' stroke-opacity='.12' stroke-width='4'/%3E%3Ccircle cx='654' cy='214' r='7' stroke-opacity='.12' stroke-width='4'/%3E%3Ccircle cx='864' cy='284' r='7' stroke-opacity='.13' stroke-width='4'/%3E%3Ccircle cx='1096' cy='356' r='7' stroke-opacity='.13' stroke-width='4'/%3E%3Ccircle cx='206' cy='438' r='7' stroke-opacity='.12' stroke-width='4'/%3E%3Ccircle cx='1020' cy='126' r='7' stroke-opacity='.13' stroke-width='4'/%3E%3Ccircle cx='1296' cy='72' r='7' stroke-opacity='.13' stroke-width='4'/%3E%3C/svg%3E")
    center top / 1540px auto no-repeat;
}

.cars-topbar {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent), transparent 96%), transparent 60%), rgba(2, 4, 6, 0.88);
}

/* Layout */
.cars-main {
  width: min(100%, 1380px);
  margin: 0 auto;
  padding: 20px clamp(12px, 3vw, 24px) 12px;
}

.cars-panel {
  display: none;
  gap: 14px;
  /* Clears the sticky shared topbar so a #hash deep link does not park the
     panel heading underneath it. */
  scroll-margin-top: 74px;
}

.cars-panel.is-active {
  display: grid;
}

/* The overview is a single desktop composition, not a document to browse.
   Taller content panels and compact layouts retain normal page scrolling. */
@media (min-width: 1051px) and (min-height: 760px) {
  html.cars-overview-active,
  html.cars-overview-active body {
    overflow-y: clip;
  }
}