/* 3D garage (ADR-0079 and its amendment 2): stylesheet of /garage (the live view and the index of cars), loaded by those pages only.
   Uses the site tokens where they exist, with fallbacks, and a dark look. */
#g3d { --g3d-bg: #0A0C0F; --g3d-panel: #13171C; --g3d-text: #F3F5F8; --g3d-muted: #AAB3BF; --g3d-line: #76818F; --g3d-accent: #FFB347; --g3d-glass: rgb(10 12 15 / .82);
  display: grid; gap: var(--space-3, 1rem); inline-size: 100%; color: var(--g3d-text); background: var(--g3d-bg); color-scheme: dark; line-height: var(--lh-ui, 1.4); }
#g3d :focus-visible { outline: 3px solid var(--g3d-accent); outline-offset: 2px; }
#g3d-stage { position: relative; inline-size: 100%; aspect-ratio: 16 / 9; max-block-size: 80vh; margin-inline: auto; overflow: hidden; background: var(--g3d-bg);
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#g3d-stage:active { cursor: grabbing; }
#g3d-stage:focus-visible { outline-offset: -3px; }
#g3d-backdrop, #g3d-canvas { position: absolute; inset: 0; display: block; max-inline-size: none; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
#g3d-backdrop { background: var(--g3d-bg); }
#g3d-canvas { outline: none; }
#g3d-status { position: absolute; inset-inline: var(--space-3, 1rem); inset-block-end: var(--space-3, 1rem); z-index: 2; margin: 0; padding: var(--space-2, .5rem) var(--space-3, 1rem);
  border-radius: var(--radius-2, .5rem); background: var(--g3d-glass); color: var(--g3d-text); text-align: center; font-weight: 600; }
#g3d-status[hidden] { display: none; }
#g3d-live { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.g3d-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2, .5rem) var(--space-3, 1rem); padding-inline: var(--space-3, 1rem); }
.g3d-controls button { display: inline-flex; align-items: center; justify-content: center; min-block-size: 2.75rem; min-inline-size: 2.75rem; padding: 0 var(--space-4, 1rem);
  border: var(--bw, 1px) solid var(--g3d-line); border-radius: var(--radius-2, .5rem); background: var(--g3d-glass); color: var(--g3d-text); font: inherit; font-weight: 500; cursor: pointer; }
/* Icons of the controls (P8-33): the site's .icon line style in currentColor, so the dark panel contrast and the pressed state carry over. Play shows the pause icon while pressed, full screen the collapse icon while the viewer is full screen. */
.g3d-controls button { gap: var(--space-2, .5rem); }
.g3d-controls .icon { inline-size: 1.25rem; block-size: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.g3d-controls .icon--pause, .g3d-controls .icon--collapse, #g3d-play[aria-pressed="true"] .icon--play, #g3d:fullscreen .icon--expand { display: none; }
#g3d-play[aria-pressed="true"] .icon--pause, #g3d:fullscreen .icon--collapse { display: block; }
.g3d-controls button:hover { border-color: var(--g3d-accent); }
.g3d-controls button[aria-pressed="true"] { border-color: var(--g3d-accent); background: var(--g3d-accent); color: #1A1100; }
.g3d-controls button[hidden] { display: none; }
.g3d-controls button[disabled] { border-style: dashed; color: var(--g3d-muted); cursor: not-allowed; }
.g3d-scenes { display: flex; flex-wrap: wrap; gap: var(--space-2, .5rem); margin: 0; padding: 0; border: 0; justify-content: center; }
.g3d-scenes label { display: inline-flex; align-items: center; gap: var(--space-2, .5rem); min-block-size: 2.75rem; cursor: pointer; }
.g3d-scenes input { inline-size: 1.25rem; block-size: 1.25rem; margin: 0; accent-color: var(--g3d-accent); }
#g3d-zoom { min-block-size: 2.75rem; inline-size: min(12rem, 100%); margin: 0; accent-color: var(--g3d-accent); }
#g3d:fullscreen { align-content: center; padding: var(--space-3, 1rem); }
#g3d:fullscreen #g3d-stage { max-block-size: 85vh; }
@media (max-width: 480px) {
  .g3d-controls { gap: var(--space-2, .5rem); padding-inline: var(--space-2, .5rem); }
  .g3d-controls button { padding: 0 var(--space-3, .75rem); }
  #g3d-status { inset-inline: var(--space-2, .5rem); inset-block-end: var(--space-2, .5rem); font-size: .875rem; }
}

/* Page frame (Lead, after the 2026-10-10 probe): heading in the site's colours, the viewer as one dark rounded card inside the container. */
.g3d-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, .5rem) var(--space-3, 1rem); }
.g3d-head__title { margin: 0; inline-size: 100%; }
#g3d { border-radius: var(--radius-3, 1rem); overflow: hidden; padding-block-end: var(--space-3, 1rem); }
#g3d a { color: var(--g3d-accent); }
.g3d-controls { flex-direction: column; }
.g3d-transport { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2, .5rem); }
.g3d-scenes legend { float: left; margin-inline-end: var(--space-2, .5rem); align-self: center; color: var(--g3d-muted); line-height: 2.75rem; }
.g3d-scenes label { padding: 0 var(--space-3, 1rem); border: var(--bw, 1px) solid var(--g3d-line); border-radius: var(--radius-full, 999px); white-space: nowrap; }
.g3d-scenes label:has(input:checked) { border-color: var(--g3d-accent); }
.g3d-zoom { display: flex; align-items: center; gap: var(--space-2, .5rem); color: var(--g3d-muted); }
.g3d-credit { margin: 0; padding-inline: var(--space-3, 1rem); color: var(--g3d-muted); font-size: var(--step--2, .8125rem); text-align: center; }
@media (min-width: 900px) { .g3d-controls { flex-direction: row; justify-content: space-between; } }

/* The index of /garage: one card per available car. The credit links sit above the stretched card link so that they stay clickable. */
.g3d-index__img { display: block; inline-size: 100%; block-size: auto; border-start-start-radius: var(--radius-2, .5rem); border-start-end-radius: var(--radius-2, .5rem); background: var(--surface-alt, #EEF1F5); }
.g3d-index__credit { margin: 0; color: var(--text-muted); font-size: var(--step--1, .875rem); }
.g3d-index__credit a { position: relative; z-index: calc(var(--z-raised, 1) + 1); }

/* ===== Full-screen view (P8-34): /garage?car=...&view=full&returnTo=/cars/slug =====
   The layout drops the site header, dock and footer; #g3d fills the screen (dvh with a vh fallback, safe-area insets) as a grid: bar (h1 and Close), stage, controls, credit.
   The stage fits the whole picture (data-fit="contain": the car is never cut) and its backdrop fades into the panel colour. No animation, so reduced motion needs nothing. */
html:has(.g3d--full), body.is-full-view { overflow: hidden; overscroll-behavior: none; }
body.is-full-view { background: #0A0C0F; }
body.is-full-view main { padding: 0; }
#g3d.g3d--full { position: fixed; inset: 0; block-size: 100vh; block-size: 100dvh; box-sizing: border-box; gap: 0; border-radius: 0; overflow: hidden;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; align-content: stretch; }
.g3d--full .g3d-bar { grid-row: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, 1rem); min-block-size: 3.25rem;
  padding: .25rem var(--space-3, 1rem); background: var(--g3d-panel); border-block-end: 1px solid rgb(255 255 255 / .1); }
.g3d--full .g3d-bar__title { flex: 1 1 auto; min-inline-size: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--g3d-text); font-size: 1rem; line-height: 1.25; font-weight: 600; }
#g3d .g3d-close { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2, .5rem); min-block-size: 2.75rem; min-inline-size: 2.75rem; padding: 0 var(--space-3, 1rem);
  border: var(--bw, 1px) solid var(--g3d-line); border-radius: var(--radius-2, .5rem); background: var(--g3d-glass); color: var(--g3d-text); font-weight: 500; text-decoration: none; }
#g3d .g3d-close:hover { border-color: var(--g3d-accent); }
.g3d-close .icon { inline-size: 1.25rem; block-size: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

#g3d.g3d--full #g3d-stage { grid-row: 2; block-size: 100%; min-block-size: 0; max-block-size: none; aspect-ratio: auto; touch-action: none; }
.g3d--full #g3d-backdrop { -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent); mask-composite: intersect; }

/* Phone, portrait: the scene choice as a compact row of pills, the actions as an icon toolbar (the labels stay in the page for assistive technology), the zoom slider under them. */
.g3d--full .g3d-controls { grid-row: 3; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: .5rem; padding: .5rem var(--space-3, 1rem); background: var(--g3d-panel); border-block-start: 1px solid rgb(255 255 255 / .1); }
.g3d--full .g3d-scenes { flex-wrap: wrap; gap: .25rem; }
.g3d--full .g3d-scenes legend { position: absolute; float: none; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.g3d--full .g3d-scenes label { position: relative; justify-content: center; padding: 0 var(--space-3, 1rem); }
.g3d--full .g3d-scenes input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.g3d--full .g3d-scenes label:has(input:checked) { border-color: var(--g3d-accent); background: var(--g3d-accent); color: #1A1100; font-weight: 600; }
.g3d--full .g3d-scenes label:has(input:focus-visible) { outline: 3px solid var(--g3d-accent); outline-offset: 2px; }
.g3d--full .g3d-transport { flex-wrap: wrap; gap: .25rem; }
.g3d--full .g3d-transport button { padding: 0; }
.g3d--full .g3d-transport span { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.g3d--full .g3d-zoom { justify-content: center; font-size: var(--step--1, .875rem); }
.g3d--full #g3d-zoom { flex: 1 1 auto; max-inline-size: 16rem; }

/* The credit: one tap away in a strip under the viewer; its text opens above the strip. */
.g3d--full .g3d-creditbox { grid-row: 4; position: relative; background: var(--g3d-panel); border-block-start: 1px solid rgb(255 255 255 / .1); color: var(--g3d-muted); font-size: var(--step--2, .8125rem); }
.g3d--full .g3d-creditbox summary { display: flex; align-items: center; min-block-size: 2.25rem; padding: 0 var(--space-3, 1rem); cursor: pointer; }
.g3d--full .g3d-creditbox[open] > .g3d-credit { position: absolute; inset-inline: 0; inset-block-end: 100%; z-index: 3; max-block-size: 60vh; max-block-size: 60dvh; overflow: auto; padding: .75rem var(--space-3, 1rem);
  background: var(--g3d-panel); border-block-start: 1px solid rgb(255 255 255 / .1); text-align: start; }

/* Tablet and desktop: one wrapping toolbar under the viewer with icon and label. */
@media (min-width: 40rem) {
  .g3d--full .g3d-controls { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1.25rem; }
  .g3d--full .g3d-scenes legend { position: static; inline-size: auto; block-size: auto; margin: 0 .5rem 0 0; overflow: visible; clip-path: none; float: left; }
  .g3d--full .g3d-transport button { padding: 0 var(--space-3, 1rem); }
  .g3d--full .g3d-transport span { position: static; inline-size: auto; block-size: auto; margin: 0; overflow: visible; clip-path: none; white-space: nowrap; }
}
@media (min-width: 56rem) and (min-height: 36rem) {
  .g3d--full .g3d-creditbox[open] > .g3d-credit { position: static; max-block-size: none; padding: 0 var(--space-3, 1rem) .5rem; border-block-start: 0; text-align: center; }
}

/* Phone, landscape (short): the controls move to a vertical toolbar at the side so that the car keeps the height; the actions are icons in two columns. */
@media (orientation: landscape) and (max-height: 30rem) {
  #g3d.g3d--full { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto; }
  .g3d--full .g3d-bar { grid-column: 1 / -1; min-block-size: 3rem; padding-block: .125rem; }
  #g3d.g3d--full #g3d-stage { grid-column: 1; grid-row: 2; }
  .g3d--full .g3d-creditbox { grid-column: 1; grid-row: 3; }
  .g3d--full .g3d-creditbox[open] > .g3d-credit { position: absolute; max-block-size: 70vh; max-block-size: 70dvh; border-block-start: 1px solid rgb(255 255 255 / .1); text-align: start; padding: .75rem var(--space-3, 1rem); }
  .g3d--full .g3d-controls { grid-column: 2; grid-row: 2 / 4; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: .375rem; overflow-y: auto; overscroll-behavior: contain;
    inline-size: 8.5rem; padding: .375rem .5rem; border-block-start: 0; border-inline-start: 1px solid rgb(255 255 255 / .1); }
  .g3d--full .g3d-scenes { flex-direction: column; flex-wrap: nowrap; }
  .g3d--full .g3d-scenes legend { position: absolute; float: none; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
  .g3d--full .g3d-scenes label { padding: .125rem var(--space-2, .5rem); font-size: .8125rem; line-height: 1.2; text-align: center; white-space: normal; }
  .g3d--full .g3d-transport { display: grid; grid-template-columns: repeat(2, 2.75rem); justify-content: center; }
  .g3d--full .g3d-transport button { padding: 0; }
  .g3d--full .g3d-transport span { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .g3d--full .g3d-zoom { flex-direction: column; align-items: stretch; gap: 0; font-size: .75rem; }
  .g3d--full #g3d-zoom { max-inline-size: none; inline-size: 100%; }
}

/* Real full screen of the viewer (the Full screen button): the same grid, edge to edge. */
#g3d.g3d--full:fullscreen { padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0); align-content: stretch; }
#g3d.g3d--full:fullscreen #g3d-stage { max-block-size: none; }