/* vdp.css — a car's own page, vehicle-*.html.
   ---------------------------------------------------------------------------
   Loaded after srp.css, whose card actions, cards, Text panel, share menu and
   dark fields it shares. The parts and their order are Alex's own Chicago
   Motor Cars VDP — Alex, 2026-09-14: "where is the rest? description,
   finance, shipping… and PHOTOS should be called Gallery". The grounds are
   this site's: the car, its price and its gallery on the dark; its record —
   about, walkaround, ask, financing — on bone, where
   specifications live; the standards on the raised dark; related cars.
   Values come from tokens.css. */

/* ── one inner measure for the whole page ──────────────────────────────────────
   Alex, 2026-09-14: "not the whole screen wide — close it all into some inner
   size, not narrow and not that wide", then "a little wider, within our
   design". The grounds still run edge to edge; what stands on them keeps one
   width, centred, on every section — inside the site's own --page. */
.page-vehicle main > .sect > * { max-inline-size: min(85rem, var(--page)); margin-inline: auto; }

/* ── the top: where the page is, and this car's actions ────────────────────── */
.vdp-top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-3) var(--sp-5); margin-block-end: var(--sp-5);
}
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-3); min-inline-size: 0;
  font-family: var(--mono); font-size: var(--micro); letter-spacing: var(--track); text-transform: uppercase;
  color: var(--text-muted);
}
.crumbs a { display: inline-block; padding-block: var(--sp-2); color: inherit; text-decoration: none; transition: color var(--dur-2) var(--ease-out); }
.crumbs a:hover { color: var(--text); }
.crumbs a:focus-visible { outline: var(--focus-w) solid var(--bone-050); outline-offset: var(--hairline); }
.crumbs [aria-current] { color: var(--text); }
.vdp-top__acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.vdp-top__acts .car__act { border: var(--hairline) solid var(--rule); padding-inline: var(--sp-4); }
.vdp-save svg path { fill: none; transition: fill var(--dur-2) var(--ease-out); }
.vdp-save[aria-pressed='true'] svg path { fill: currentColor; }

/* ── the summary: the gallery beside the panel ─────────────────────────────── */
.vdp-sum {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem);
  gap: var(--sp-6) var(--col-gap); align-items: start;
}

/* Upright photographs are shown whole on the frame's own graphite rather than
   cut to the frame. */
.stage { display: grid; gap: var(--sp-3); min-inline-size: 0; }
.stage:focus-visible { outline: var(--focus-w) solid var(--bone-050); outline-offset: var(--focus-offset); }
.stage__frame { position: relative; overflow: clip; border-radius: var(--radius-media); background: var(--graphite-900); }
.stage__frame img {
  display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; max-block-size: 70vh;
  object-fit: cover;
}
.stage__frame img[data-portrait] { object-fit: contain; }
.stage__nav {
  position: absolute; inset-block-start: 50%; translate: 0 -50%;
  display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgb(var(--graphite-950-rgb) / 0.62); color: var(--bone-050);
  transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-back);
}
.stage__nav--prev { inset-inline-start: var(--sp-5); }
.stage__nav--next { inset-inline-end: var(--sp-5); }
.stage__nav:hover { background: rgb(var(--graphite-950-rgb) / 0.86); }
.stage__nav:active { transform: scale(0.95); transition: transform var(--dur-1) var(--ease-press); }
.stage__nav:focus-visible { outline: var(--focus-w) solid var(--bone-050); outline-offset: var(--hairline); }
/* The way down to the Gallery, with where the stage is in it. */
.stage__all {
  position: absolute; inset-block-end: var(--sp-5); inset-inline-start: var(--sp-5);
  display: inline-flex; align-items: center; gap: var(--sp-2); min-block-size: 2.75rem; padding: 0 var(--sp-4);
  background: rgb(var(--graphite-950-rgb) / 0.62); color: var(--bone-050); text-decoration: none;
  font-family: var(--mono); font-size: var(--micro); letter-spacing: var(--track); text-transform: uppercase;
  border-radius: var(--radius-control); transition: background-color var(--dur-2) var(--ease-out);
}
.stage__all span { font-variant-numeric: tabular-nums; color: var(--ink-on-dark-muted); }
.stage__all:hover { background: rgb(var(--graphite-950-rgb) / 0.86); }
.stage__all:focus-visible { outline: var(--focus-w) solid var(--bone-050); outline-offset: var(--hairline); }
/* A strip, not a grid: small frames in one row that scrolls sideways when
   there are more than fit, so six photographs never take half a phone. */
.thumbs {
  display: grid; grid-auto-flow: column; grid-auto-columns: 6.5rem; gap: var(--sp-3);
  overflow-x: auto; padding: var(--sp-1); margin: calc(var(--sp-1) * -1);
  scrollbar-width: thin; scrollbar-color: var(--graphite-600) transparent;
}
.thumb {
  display: block; padding: 0; border: 0; cursor: pointer; overflow: clip;
  background: var(--graphite-900); border-radius: var(--radius-control); opacity: 0.55;
  outline: calc(var(--hairline) * 2) solid transparent; outline-offset: var(--hairline);
  transition: opacity var(--dur-2) var(--ease-out), outline-color var(--dur-2) var(--ease-out);
}
.thumb img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.thumb:hover { opacity: 0.85; }
.thumb[aria-current='true'] { opacity: 1; outline-color: var(--bone-050); }
.thumb:focus-visible { opacity: 1; outline: var(--focus-w) solid var(--bone-050); }

/* The panel: stock and status in the mono that records, the name, the price
   at the size it is decided on, the rows a buyer reads first, and the ask. */
.vdp-panel { display: grid; gap: var(--sp-5); align-content: start; min-inline-size: 0; }
.vdp-panel__k {
  margin: 0; font-family: var(--mono); font-size: var(--micro); letter-spacing: var(--track); text-transform: uppercase;
  color: var(--text-muted);
}
.vdp-panel__title {
  margin: 0; font-family: var(--face); font-weight: 600; font-size: var(--lot);
  line-height: var(--lh-tight); letter-spacing: var(--ls-heading); color: var(--text); text-wrap: balance;
}
.vdp-panel__price { display: grid; gap: var(--sp-1); padding-block: var(--sp-4); border-block: var(--hairline) solid var(--rule); }
.vdp-panel__figure {
  margin: 0; font-family: var(--face); font-weight: 600; font-size: var(--h2);
  line-height: var(--lh-tight); letter-spacing: var(--ls-display); font-variant-numeric: tabular-nums; color: var(--text);
}
.vdp-panel__note { margin: 0; font-size: var(--fs-body-s); color: var(--text-muted); }
.vdp-panel__specs { margin: 0; }
.vdp-panel__specs > div { grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); padding-block: var(--sp-3); }
.vdp-panel__specs > div:first-child { border-block-start: 0; padding-block-start: 0; }
.vdp-panel__specs dd { margin: 0; font-variant-numeric: tabular-nums; }
.vdp-panel__cta { justify-content: space-between; }

/* ── the action bar: three ways to reach Evan ─────────────────────────────────
   The location and "Estimate shipping" came out — Alex, 2026-09-14: "remove
   it altogether, they have no shipping". What stays is the reader's next
   move, set to the right under the panel that prompts it. */
.vdp-act {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sp-4) var(--sp-6);
  margin-block-start: var(--sp-6); padding-block-start: var(--sp-5); border-block-start: var(--hairline) solid var(--rule);
}
.vdp-act__contact { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ── the record, on bone ──────────────────────────────────────────────────────
   The car's own panels, under the photograph and the details, as accordions —
   Alex, 2026-09-14: "below the main section… an accordion at the bottom like
   Chicago Motor Cars". The first accordion here ("everything gets lost and
   blurry") was a list of faint hairline rows with its text in the dark page's
   ink. What is different now: every head is a full row — a glyph, the name at
   the record's title size, what is inside in mono, and a plus that turns to a
   minus; the rows are drawn at bone-300 rather than the page's quietest rule;
   and the open panel lifts onto the raised bone, so the one thing open reads
   as one thing. Inside a panel, what the part is sits left of the thing to
   use. */
/* The bone re-points --text, but a paragraph inherits the colour the body
   already resolved on the dark — so the record states its own ink. */
.vdp-record { color: var(--text); }
.nobr { white-space: nowrap; }
.vdp-record__head { display: grid; gap: var(--sp-4); justify-items: start; margin-block-end: var(--sp-6); }
.vdp-record__head .tag { margin: 0; }
.vdp-record__title {
  margin: 0; font-family: var(--face); font-weight: 600; font-size: var(--h3);
  line-height: var(--lh-heading); letter-spacing: var(--ls-heading); color: var(--text);
}

.accs { border-block-end: var(--hairline) solid var(--bone-300); }
.acc { border-block-start: var(--hairline) solid var(--bone-300); transition: background-color var(--dur-3) var(--ease-out); }
.acc[open] { background: var(--surface); }
.acc__sum {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-3) var(--sp-5);
  min-block-size: 4.5rem; padding: var(--sp-4) var(--sp-5); cursor: pointer; list-style: none;
  transition: background-color var(--dur-2) var(--ease-out);
}
.acc__sum::-webkit-details-marker { display: none; }
.acc:not([open]) > .acc__sum:hover { background: var(--surface); }
.acc__sum:focus-visible { outline: var(--focus-w) solid var(--ink-on-light); outline-offset: calc(var(--focus-w) * -1); }
.acc__ico { display: grid; place-items: center; color: var(--text); }
.acc__label {
  font-family: var(--face); font-weight: 600; font-size: var(--lot);
  line-height: var(--lh-heading); letter-spacing: var(--ls-heading); color: var(--text);
}
.acc__val {
  font-family: var(--mono); font-size: var(--micro); letter-spacing: var(--track); text-transform: uppercase;
  font-variant-numeric: tabular-nums; color: var(--text-muted); text-align: end;
}
/* The plus: two bars, the upright one turns flat as the panel opens. */
.acc__mark { position: relative; inline-size: 1rem; block-size: 1rem; margin-inline-start: var(--sp-2); }
.acc__mark::before, .acc__mark::after {
  content: ''; position: absolute; inset-inline: 0; inset-block-start: 50%;
  block-size: calc(var(--hairline) * 2); translate: 0 -50%; background: var(--text);
  transition: rotate var(--dur-3) var(--ease-settle);
}
.acc__mark::after { rotate: 90deg; }
.acc[open] > .acc__sum .acc__mark::after { rotate: 0deg; }
/* The body starts under the name, not under the glyph. */
.acc__body { padding: var(--sp-2) var(--sp-5) var(--sp-7) calc(var(--sp-5) * 2 + 1.375rem); }
.rec__split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-6) var(--sp-7); align-items: start; }
.rec__lead { display: grid; gap: var(--sp-5); justify-items: start; }
.rec__tool { min-inline-size: 0; }
.rec__text { margin: 0; max-inline-size: 60ch; line-height: var(--lh-body); color: var(--text); }
.rec__note { margin: 0; max-inline-size: 60ch; font-size: var(--fs-body-s); line-height: var(--lh-body); color: var(--text-muted); }
.rec__note a { color: var(--text); text-underline-offset: 0.2em; }
.rec__call {
  display: grid; gap: var(--sp-1); color: var(--text); text-decoration: none;
  font-family: var(--face); font-weight: 600; font-size: var(--lot); line-height: var(--lh-tight); font-variant-numeric: tabular-nums;
}
.rec__call:hover { text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: var(--hairline); }
.rec__call:focus-visible { outline: var(--focus-w) solid var(--ink-on-light); outline-offset: var(--focus-offset); }
.rec__k {
  font-family: var(--mono); font-weight: 400; font-size: var(--micro); letter-spacing: var(--track); text-transform: uppercase; color: var(--text-muted);
}

/* About: what the car is, in words, beside the full specification. */
.about {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7) var(--sp-7);
  align-items: start; inline-size: 100%;
}
.about__text { display: grid; gap: var(--sp-4); justify-items: start; }
.about__text > p { margin: 0; max-inline-size: 60ch; line-height: var(--lh-body); }
.about__lead {
  font-family: var(--face); font-weight: 600; font-size: var(--fs-lead);
  line-height: var(--lh-heading); color: var(--text);
}
.about__h {
  margin: var(--sp-3) 0 0; font-family: var(--mono); font-weight: 400; font-size: var(--micro);
  letter-spacing: var(--track); text-transform: uppercase; color: var(--text-muted);
}
.about__list { inline-size: 100%; margin: 0; padding: 0; list-style: none; border-block-end: var(--hairline) solid var(--rule); }
.about__list li { padding-block: var(--sp-3); border-block-start: var(--hairline) solid var(--rule); }
.about__text > .about__fine { font-size: var(--fs-body-s); color: var(--text-muted); }
.vdp-spec { inline-size: 100%; margin: 0; border-block-end: var(--hairline) solid var(--rule); }
.vdp-spec > div { grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); padding-block: var(--sp-3); }
.vdp-spec > div:first-child { border-block-start: 0; padding-block-start: 0; }
.vdp-spec dd { margin: 0; font-variant-numeric: tabular-nums; }

/* Walkaround: nothing filmed, said plainly, beside the car it will be of. */
.walk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-7); align-items: center; }
.walk__poster { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-media); }
.walk__text { display: grid; gap: var(--sp-5); justify-items: start; }
.walk__text p { margin: 0; max-inline-size: 46ch; line-height: var(--lh-body); }

/* Ask and financing: v11's fields, as the finance application. */
.ask, .calc { display: grid; gap: var(--sp-5); inline-size: 100%; }
.ask__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.ask__when { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.ask__when legend {
  padding: 0; margin-block-end: var(--sp-2);
  font-family: var(--mono); font-size: var(--micro); letter-spacing: var(--track); text-transform: uppercase; color: var(--text-muted);
}
.ask__opt { display: inline-flex; align-items: center; gap: var(--sp-2); min-block-size: 2.75rem; margin-inline-end: var(--sp-5); cursor: pointer; }
.ask__opt input { inline-size: 1.125rem; block-size: 1.125rem; margin: 0; accent-color: var(--ink-on-light); }
.ask__opt input:focus-visible { outline: var(--focus-w) solid var(--ink-on-light); outline-offset: var(--hairline); }
.ask__send { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-5); }
.ask__send .btn { justify-content: space-between; cursor: pointer; }
.ask__status { margin: 0; font-size: var(--fs-body-s); color: var(--text); }
.ask__status[data-state='error'] { color: var(--oxblood); }          /* oxblood is text on light */

.calc__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
/* The result sits on the one strong rule, as a total does. */
.calc__out {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-5);
  margin: 0; padding-block: var(--sp-4); border-block: var(--hairline) solid var(--ink-on-light);
}
.calc__k {
  font-family: var(--mono); font-size: var(--micro); letter-spacing: var(--track); text-transform: uppercase; color: var(--text-muted);
}
.calc__figure {
  font-family: var(--face); font-weight: 600; font-size: var(--lot);
  line-height: var(--lh-tight); letter-spacing: var(--ls-heading); font-variant-numeric: tabular-nums; color: var(--text);
}

/* ── standards: the same on every car, so a different object from the rows ── */
.stds__head { display: grid; gap: var(--sp-4); justify-items: start; margin-block-end: var(--sp-7); }
.stds__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
.stds__item {
  display: grid; gap: var(--sp-3); align-content: start; padding: var(--sp-6);
  background: var(--surface); border: var(--hairline) solid var(--rule);
}
.stds__k { margin: 0; font-family: var(--face); font-weight: 600; font-size: var(--fs-lead); line-height: var(--lh-heading); color: var(--text); }
.stds__v { margin: 0; font-size: var(--fs-body-s); line-height: var(--lh-body); color: var(--text-muted); }
.stds__link { display: block; inline-size: fit-content; margin-block-start: var(--sp-2); color: var(--text); text-underline-offset: 0.25em; }
.stds__link:focus-visible { outline: var(--focus-w) solid var(--bone-050); outline-offset: var(--hairline); }

/* ── the gallery ──────────────────────────────────────────────────────────── */
.gallery__head { display: grid; gap: var(--sp-4); justify-items: start; margin-block-end: var(--sp-6); }
.gallery__grid { columns: 3 16rem; column-gap: var(--sp-4); }
.gallery__item {
  display: block; inline-size: 100%; margin: 0 0 var(--sp-4); padding: 0; border: 0; cursor: zoom-in;
  overflow: clip; break-inside: avoid; background: var(--graphite-900); border-radius: var(--radius-media);
}
.gallery__item img { display: block; inline-size: 100%; block-size: auto; transition: transform var(--dur-3) var(--ease-out); }
.gallery__item:hover img { transform: scale(1.03); }
.gallery__item:focus-visible { outline: var(--focus-w) solid var(--bone-050); outline-offset: var(--focus-offset); }

/* ── related cars ─────────────────────────────────────────────────────────── */
.vdp-more__head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-5);
  margin-block-end: var(--sp-6);
}
.vdp-more__head > div { display: grid; gap: var(--sp-4); justify-items: start; }
.vdp-more .results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vdp-more .car { grid-template-rows: auto 1fr; }

.textcar__scan[hidden] { display: none; }

@media (max-width: 74.99rem) {
  .stds__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rec__split, .about, .walk { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 74.99rem) and (min-width: 62rem) {
  .vdp-more .results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 61.99rem) {
  .vdp-sum { grid-template-columns: minmax(0, 1fr); }
  .vdp-more .results { grid-template-columns: minmax(0, 1fr); }
  .stage__frame img { aspect-ratio: 4 / 3; }
  .stage__nav { inline-size: 2.75rem; block-size: 2.75rem; }
  .stage__nav--prev { inset-inline-start: var(--sp-3); }
  .stage__nav--next { inset-inline-end: var(--sp-3); }
  .stage__all { inset-block-end: var(--sp-3); inset-inline-start: var(--sp-3); }
  .thumbs { grid-auto-columns: 5.5rem; }
  .vdp-panel__specs > div, .vdp-spec > div { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); }
}
@media (max-width: 47.99rem) {
  /* The calculator's four fields stack too: two across left the term's select
     reading "60 mon" at 390. */
  .stds__grid, .ask__grid, .calc__grid { grid-template-columns: minmax(0, 1fr); }
  /* On a phone the mono line drops under the name, and the body uses the
     whole width rather than holding an indent it cannot spare. */
  .acc__sum { grid-template-columns: auto minmax(0, 1fr) auto; padding-inline: var(--sp-4); row-gap: var(--sp-1); }
  .acc__ico { grid-row: 1 / span 2; align-self: start; padding-block-start: var(--sp-1); }
  .acc__val { grid-column: 2; grid-row: 2; text-align: start; }
  .acc__mark { grid-column: 3; grid-row: 1 / span 2; }
  .acc__body { padding-inline: var(--sp-4); }
  .vdp-act__contact { inline-size: 100%; }
  .vdp-act__contact .btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery__item:hover img { transform: none; }
}