/* Space: one viewport. Both cars as top-down plans at one shared scale (front bumpers aligned), seat units that fold
   with the rear-cargo stepper, R1S bench / captain's chairs. */
.section--space { --field: var(--field-space); padding-block: clamp(64px, 8vh, 110px) clamp(80px, 11vh, 126px); }
.space__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none; margin-bottom: clamp(12px, 2.4vh, 28px); }
.space__head .headline { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
.space-cargo { display: flex; flex: 0 0 auto; align-items: center; gap: 14px; }
.space-cargo__label { color: var(--ink-2); font-size: var(--t-small); font-weight: 650; white-space: nowrap; }
.space-cargo__steps button { min-height: 44px; padding-inline: 22px; white-space: nowrap; }

.space-car { display: grid; grid-template-columns: 230px minmax(0, 1fr) 170px; align-items: center; gap: 22px; padding-block: clamp(2px, 0.8vh, 10px); }
.space-car + .space-car { border-top: 1px solid rgb(13 15 28 / 10%); }
.space-car__name { margin: 0 0 4px; font-size: 27px; }
.space-car__capacity { display: flex; align-items: center; gap: 13px; }
.space-car__seats { font-size: clamp(64px, 6.4vw, 96px); font-weight: 720; line-height: 0.95; letter-spacing: -0.075em; }
.space-car__capacity-label { color: var(--ink-2); font-size: 13px; line-height: 1.55; }
.space-car__capacity-label span { display: block; color: var(--ink-3); }
.space-car__options { margin-top: 16px; max-width: 100%; }
.space-car__options button { min-height: 38px; padding-inline: 11px; font-size: 12px; white-space: nowrap; }
.space-car__fixed { display: flex; align-items: center; min-height: 48px; margin-top: 16px; color: var(--ink-2); font-size: 12px; }
.space-car__cargo-label { margin: 0 0 7px; color: var(--ink-2); font-size: 12px; font-weight: 600; }
.space-car__cargo-number { color: var(--c-ink); font-size: clamp(42px, 4vw, 60px); font-weight: 730; line-height: 1; letter-spacing: -0.065em; }
.space-car__cargo-unit { display: block; margin-top: 5px; color: var(--c-ink); font-size: 13px; }
.space-car__cargo-empty { max-width: 170px; color: var(--ink-2); font-size: 23px; font-weight: 650; line-height: 1.15; letter-spacing: -0.045em; }
.space [hidden] { display: none !important; }
.space-note { margin: 6px 0 0; text-align: center; font-size: 11px; }

/* ---------- Plan drawing (SVG units are inches) ---------- */
.space-plan { display: block; width: 100%; height: clamp(170px, 27vh, 290px); overflow: visible; }
.space-plan text { font-family: Inter, system-ui, sans-serif; letter-spacing: -0.025em; }
.space-plan__body { fill: url(#space-body-finish); stroke: color-mix(in srgb, var(--c) 44%, #8c9aa8); stroke-width: 0.65; }
.space-plan__crease { fill: none; stroke: #fff; stroke-width: 0.7; opacity: 0.95; }
.space-plan__wheel { fill: #647183; }
.space-plan__mirror { fill: #f6f8fc; stroke: #8d9eb3; stroke-width: 0.5; }
.space-plan__glass { fill: url(#space-glass-finish); stroke: #a6b7cb; stroke-width: 0.55; }
.space-plan__windshield { fill: #b7c9dc; stroke: #95a7bf; stroke-width: 0.45; }
.space-plan__sill { fill: none; stroke: #a8b7c9; stroke-width: 0.45; }
.space-plan__door { fill: none; stroke: #9caec3; stroke-width: 0.3; opacity: 0.7; }
.space-plan__lightbar { stroke: #fff; stroke-width: 1.15; opacity: 0.9; }
.space-plan__lamp { fill: #fff; stroke: #bbc9da; stroke-width: 0.4; }
.space-plan__taillight { stroke: #e29289; stroke-width: 1; opacity: 0.9; }
.space-plan__frunk { fill: var(--c); fill-opacity: 0.15; stroke: var(--c); stroke-opacity: 0.32; stroke-width: 0.5; }
.space-plan__frunk-value { fill: var(--c-ink); font-size: 7px; font-weight: 750; text-anchor: middle; }
.space-plan__frunk-label { fill: var(--c-ink); font-size: 3.5px; font-weight: 550; text-anchor: middle; }
.space-plan__cargo { fill: var(--c); fill-opacity: 0.22; stroke: var(--c); stroke-opacity: 0.4; stroke-width: 0.5; }
.space-plan__empty { fill: var(--ink-3); font-size: 4.2px; font-weight: 600; text-anchor: middle; }
/* Interior furniture in quiet trim tones, so the seats carry the colour. */
.space-plan__arch { fill: #cfdae6; stroke: #a9b9cb; stroke-width: 0.4; }
.space-plan__console { fill: #dde6f0; stroke: #a9b9cb; stroke-width: 0.4; }

/* ---------- Seat units ---------- */
.space-seat__cushion { fill: url(#space-seat-r1s); stroke: var(--c-ink); stroke-opacity: 0.22; stroke-width: 0.35; }
.v-r2 .space-seat__cushion { fill: url(#space-seat-r2); }
.space-seat__bolster { fill: none; stroke: #fff; stroke-opacity: 0.3; stroke-width: 0.45; }
.space-seat__back { fill: var(--c); stroke: var(--c-ink); stroke-opacity: 0.3; stroke-width: 0.45; }
.space-seat__seam { stroke: #fff; stroke-opacity: 0.55; stroke-width: 0.5; stroke-linecap: round; }
.space-seat__head { fill: var(--c-ink); stroke: #fff; stroke-opacity: 0.2; stroke-width: 0.3; }
.space-seat__arm { fill: #f4f7fc; stroke: color-mix(in srgb, var(--c) 40%, #8c9aa8); stroke-width: 0.35; }
.space-seat__panel { fill: var(--c); fill-opacity: 0.16; stroke: var(--c); stroke-opacity: 0.5; stroke-width: 0.45; }
.space-seat__panel ~ .space-seat__seam { stroke: var(--c); stroke-opacity: 0.4; }

@media (max-width: 1120px) {
  .space-car { grid-template-columns: 190px minmax(0, 1fr) 132px; gap: 14px; }
  .space-car__name { font-size: 24px; }
  .space-car__options { padding: 4px; }
  .space-car__options button { padding-inline: 8px; font-size: 11px; }
  .space-car__options .seg__thumb { top: 4px; bottom: 4px; }
  .space-car__cargo-empty { font-size: 20px; }
}
/* Narrower screens: the stepper's own label goes (it still names the group for assistive tech; each car's readout
   says "Rear cargo"), and the buttons tighten so the header stays on one line. */
@media (max-width: 1200px) {
  .space-cargo__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .space-cargo__steps button { padding-inline: 13px; font-size: 13px; }
}