/* srp.css — the search results page, inventory.html.
   ---------------------------------------------------------------------------
   Loaded after v12.css on one page. The layout is Hinderer's inventory — the
   title and the sort on one line, the filters in a column beside the results,
   a card per car — on Alex's word, 2026-09-14: "only the layout, not the
   design". The design is this site's, and on its DARK ground, like the home
   page's own Inventory (Alex, the same day: "make the SRP dark, like home;
   three cars in a row, not four — he has little inventory"). The car lives
   in the dark here, the facts beside it in bone ink; oxblood only as a filled
   mark. Values come from tokens.css; fields are v11's .field, re-inked below
   for the dark because v11 set them for the record ground. */

.srp-page { color-scheme: dark; }

/* ── the head ─────────────────────────────────────────────────────────────── */
.srp-head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: var(--sp-5) var(--sp-7);
  padding-block-end: var(--sp-6); border-block-end: var(--hairline) solid var(--rule);
}
.srp-head__title { display: grid; gap: var(--sp-4); justify-items: start; }
.srp-head__sort { display: flex; align-items: center; gap: var(--sp-3); }
.srp-head__sort label { white-space: nowrap; }
.srp-head__sort select { inline-size: auto; min-inline-size: 15rem; }

/* ── fields on the dark ───────────────────────────────────────────────────────
   v11 inks a field for bone: an ink-on-light edge that measures about 2.3:1 on
   graphite, a placeholder and an arrow in the same muted light ink, a focus
   ring that vanishes. Here the edge, the placeholder and the arrow take the
   muted dark ink (past 3:1), hover and focus the full bone. */
.srp-page .field input, .srp-page .field select {
  background-color: var(--graphite-950); border-color: var(--ink-on-dark-muted);
}
.srp-page .field input::placeholder { color: var(--ink-on-dark-muted); }
.srp-page .field :is(input, select):hover { border-color: var(--ink-on-dark); }
.srp-page .field :is(input, select):focus-visible { outline-color: var(--bone-050); border-color: var(--bone-050); }
.srp-page .field select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-on-dark-muted) 50%),
    linear-gradient(135deg, var(--ink-on-dark-muted) 50%, transparent 50%);
}

/* ── the two columns ──────────────────────────────────────────────────────── */
.srp {
  display: grid; grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr);
  gap: var(--sp-7) var(--col-gap); align-items: start;
  margin-block-start: var(--sp-7);
}
.srp__results { min-inline-size: 0; }

/* ── the filters ──────────────────────────────────────────────────────────────
   The ground's own graphite, a step up from the section, held beside the
   results under the bar. Each group a fieldset under a mono legend, parted by
   a hairline. */
.facets {
  position: sticky; inset-block-start: calc(var(--bar-h, var(--bar-clear)) + var(--sp-5));
  background: var(--graphite-900); border: var(--hairline) solid var(--rule);
}
.facets__summary, .facets__more > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-block-size: 3.5rem; cursor: pointer; list-style: none;
  font-family: var(--mono); font-size: var(--micro); letter-spacing: var(--track); text-transform: uppercase;
  color: var(--text);
}
.facets__summary::-webkit-details-marker, .facets__more > summary::-webkit-details-marker { display: none; }
.facets__summary { padding: var(--sp-3) var(--sp-5); }
.facets__summary:focus-visible, .facets__more > summary:focus-visible {
  outline: var(--focus-w) solid var(--bone-050); outline-offset: calc(var(--focus-offset) * -1);
}
.facets__active {
  margin-inline-end: auto; padding: 0 var(--sp-2);
  background: var(--bone-050); color: var(--graphite-950); font-variant-numeric: tabular-nums;
}
.facets__caret {
  inline-size: 0.625rem; block-size: 0.625rem; margin-inline: var(--sp-2);
  border-inline-end: calc(var(--hairline) * 2) solid var(--ink-on-dark-muted);
  border-block-end: calc(var(--hairline) * 2) solid var(--ink-on-dark-muted);
  transform: translateY(-25%) rotate(45deg);
  transition: transform var(--dur-3) var(--ease-out);
}
details[open] > summary .facets__caret { transform: translateY(25%) rotate(-135deg); }
.facets__form { display: grid; padding: var(--sp-5); }
.facet { margin: 0; padding: var(--sp-5) 0; border: 0; border-block-end: var(--hairline) solid var(--rule); min-inline-size: 0; }
.facets__form > .facet:first-child { padding-block-start: 0; }
.facet__legend {
  padding: 0; margin-block-end: var(--sp-3);
  font-family: var(--mono); font-size: var(--micro); letter-spacing: var(--track); text-transform: uppercase;
  color: var(--text-muted);
}
.facet__body { display: grid; gap: var(--sp-3); }
.facet__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.facets__clear {
  justify-self: start; min-block-size: 2.75rem; margin-block-start: var(--sp-3); padding: 0;
  background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: var(--micro); letter-spacing: var(--track); text-transform: uppercase;
  color: var(--bone-050);
}
.facets__clear:focus-visible { outline: var(--focus-w) solid var(--bone-050); outline-offset: var(--focus-offset); }
.facets__clear[hidden] { display: none; }
.facets__more .facet:last-child { border-block-end: 0; padding-block-end: 0; }

/* A switch: the checkbox stays a real checkbox, hidden but focusable; the
   track is its picture. Off, a muted outline that clears 3:1 on graphite; on,
   bone fills it and the knob crosses on the overshoot. */
.switch { display: flex; align-items: center; gap: var(--sp-3); min-block-size: 2.75rem; cursor: pointer; font-size: var(--fs-body-s); color: var(--text); }
.switch input {
  position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0;
}
.switch__track {
  position: relative; flex: none; inline-size: 2.5rem; block-size: 1.5rem; border-radius: 0.75rem;
  border: calc(var(--hairline) * 2) solid var(--ink-on-dark-muted);
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.switch__track::after {
  content: ''; position: absolute; inset-block-start: 0.1875rem; inset-inline-start: 0.1875rem;
  inline-size: 0.875rem; block-size: 0.875rem; border-radius: 50%;
  background: var(--ink-on-dark-muted);
  transition: transform var(--dur-3) var(--ease-back), background-color var(--dur-2) var(--ease-out);
}
.switch input:checked + .switch__track { background: var(--bone-050); border-color: var(--bone-050); }
.switch input:checked + .switch__track::after { transform: translateX(1rem); background: var(--graphite-950); }
.switch input:focus-visible + .switch__track { outline: var(--focus-w) solid var(--bone-050); outline-offset: var(--focus-offset); }

/* Two handles on one rail. The inputs are stacked, so only the thumbs take
   the pointer; the bone between them is the range chosen (srp.js sets --lo
   and --hi). The target is 2.75rem tall around a 1.25rem handle. */
.range { position: relative; block-size: 2.75rem; --thumb: 1.25rem; --lo: 0; --hi: 1; }
.range::before, .range::after {
  content: ''; position: absolute; inset-block-start: 50%; translate: 0 -50%;
  block-size: calc(var(--hairline) * 3);
}
.range::before { inset-inline: calc(var(--thumb) / 2); background: var(--graphite-600); }
.range::after {
  inset-inline-start: calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--lo));
  inset-inline-end: calc(var(--thumb) / 2 + (100% - var(--thumb)) * (1 - var(--hi)));
  background: var(--bone-050);
}
.range input {
  position: absolute; inset: 0; z-index: 1; inline-size: 100%; block-size: 100%; margin: 0; padding: 0;
  background: none; appearance: none; -webkit-appearance: none; pointer-events: none;
}
.range input::-webkit-slider-runnable-track { block-size: 100%; background: none; }
.range input::-moz-range-track { background: none; }
.range input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto; cursor: grab;
  inline-size: var(--thumb); block-size: var(--thumb); margin-block-start: calc((2.75rem - var(--thumb)) / 2);
  border-radius: 50%; background: var(--bone-050); border: calc(var(--hairline) * 2) solid var(--graphite-950);
}
.range input::-moz-range-thumb {
  pointer-events: auto; cursor: grab;
  inline-size: var(--thumb); block-size: var(--thumb);
  border-radius: 50%; background: var(--bone-050); border: calc(var(--hairline) * 2) solid var(--graphite-950);
}
.range input:focus-visible::-webkit-slider-thumb { outline: var(--focus-w) solid var(--bone-050); outline-offset: var(--focus-offset); }
.range input:focus-visible::-moz-range-thumb { outline: var(--focus-w) solid var(--bone-050); outline-offset: var(--focus-offset); }

/* ── the results ──────────────────────────────────────────────────────────────
   Three cars to a row at most — a shop with two to four cars on the floor is
   not a catalogue, and four across made each one a thumbnail. Two where the
   column narrows, one on a small phone. A card: the photograph with its status
   and the save on it; under it the name in the display face, the price, then
   mileage and stock in the mono that records; Text and Share at the foot. */
.results {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-5);
}
.car {
  position: relative; display: grid; grid-template-rows: auto 1fr auto; min-inline-size: 0;
  background: var(--graphite-900); border: var(--hairline) solid var(--rule);
}
.car[hidden] { display: none; }
.car__media { position: relative; overflow: clip; background: var(--graphite-950); }
.car__media img {
  display: block; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform var(--dur-3) var(--ease-out), filter var(--dur-3) var(--ease-out);
}
.car:is(:hover, :focus-within) .car__media img { transform: scale(1.045); }
.car--sold .car__media img { filter: saturate(0.3) brightness(0.7); }
.car__status {
  position: absolute; inset-block-start: var(--sp-3); inset-inline-start: var(--sp-3); margin: 0;
  padding: var(--sp-1) var(--sp-3);
  font-family: var(--mono); font-size: var(--micro); letter-spacing: var(--track); text-transform: uppercase;
  background: var(--bone-050); color: var(--ink-on-light);
}
.car--just .car__status { background: var(--oxblood); color: var(--bone-050); }
.car--sold .car__status, .car--consign .car__status { background: var(--graphite-950); color: var(--bone-050); }
.car__save {
  position: absolute; inset-block-start: var(--sp-2); inset-inline-end: var(--sp-2);
  display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; 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);
}
.car__save svg path { fill: none; transition: fill var(--dur-2) var(--ease-out); }
.car__save:hover { background: rgb(var(--graphite-950-rgb) / 0.86); }
.car__save[aria-pressed='true'] svg path { fill: currentColor; }
.car__save:active { transform: scale(0.95); transition: transform var(--dur-1) var(--ease-press); }
.car__save:focus-visible { outline: var(--focus-w) solid var(--bone-050); outline-offset: var(--hairline); }
.car__body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.car__shot { display: block; }
.car__title a { color: inherit; text-decoration: none; }
.car__title a:hover { text-decoration: underline; text-decoration-thickness: var(--hairline); text-underline-offset: 0.2em; }
.car__title a:focus-visible { outline: var(--focus-w) solid var(--bone-050); outline-offset: var(--focus-offset); }
/* The card's one primary action: the site's solid button, bone on the dark,
   full width, pushed to the foot of the body so it sits at the same height on
   every card whatever the length of the name above it. Text and Share stay the
   quieter row under it. */
.car__meta { margin-block-end: var(--sp-4); }
.car__details { margin-block-start: auto; inline-size: 100%; justify-content: space-between; }
.car__title {
  margin: 0; font-family: var(--face); font-weight: 600; font-size: var(--news-h);
  line-height: var(--lh-heading); color: var(--text); text-wrap: balance;
}
.car__price {
  margin: var(--sp-1) 0 0; font-family: var(--face); font-weight: 600; font-size: var(--h3);
  line-height: var(--lh-tight); letter-spacing: var(--ls-heading); font-variant-numeric: tabular-nums; color: var(--text);
}
.car__meta {
  margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2);
  font-family: var(--mono); font-size: var(--micro); letter-spacing: var(--track); text-transform: uppercase;
  font-variant-numeric: tabular-nums; color: var(--text-muted);
}
.car__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block-start: var(--hairline) solid var(--rule); }
.car__act {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-block-size: 3rem; padding: 0 var(--sp-3); background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: var(--micro); letter-spacing: var(--track); text-transform: uppercase;
  color: var(--text); text-decoration: none;
  transition: background-color var(--dur-2) var(--ease-out);
}
.car__act + .car__act { border-inline-start: var(--hairline) solid var(--rule); }
.car__act:hover { background: var(--graphite-800); }
.car__act:focus-visible { outline: var(--focus-w) solid var(--bone-050); outline-offset: calc(var(--focus-w) * -1); }

.results-empty {
  display: grid; justify-items: start; gap: var(--sp-4);
  padding: var(--sp-7) var(--sp-6); background: var(--graphite-900); border: var(--hairline) solid var(--rule);
}
.results-empty[hidden] { display: none; }
.results-empty__title { font-family: var(--face); font-weight: 600; font-size: var(--h3); line-height: var(--lh-heading); color: var(--text); }
.results-empty__body { max-inline-size: 52ch; color: var(--text-muted); }

.pager {
  margin: var(--sp-7) 0 0; text-align: center;
  font-family: var(--mono); font-size: var(--micro); letter-spacing: var(--track); text-transform: uppercase;
  color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.pager strong { font-weight: 500; color: var(--text); }

/* ── wide: the filters are always open, so their summary says nothing ─────── */
@media (min-width: 62rem) {
  .facets__summary { display: none; }
}

/* ── narrower ─────────────────────────────────────────────────────────────── */
@media (max-width: 74.99rem) {
  .results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 61.99rem) {
  .srp { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .facets { position: static; }
  .facets__form { padding-block-start: 0; }
  .srp-head__sort { inline-size: 100%; }
  .srp-head__sort select { flex: 1; min-inline-size: 0; }
}
@media (max-width: 39.99rem) {
  .results { grid-template-columns: minmax(0, 1fr); }
}

/* ── Text: the car, sent to a phone ───────────────────────────────────────────
   Alex, 2026-09-14: "not like AI slop — the styles exist; make it expensive",
   then "no scroll inside". So the panel is set the way this site sets a car,
   in two columns that stand in the window whole. On the left, the car: the
   photograph on its dark frame, its name as the title (what focus lands on),
   the price in the display face, mileage and stock as one spec row. On the
   right, the action: one field with the number written large on a single rule
   that doubles on focus, the site's solid button with its stepping arrow, the
   scan code as an aside under a hairline, and the shop's number. Nothing is
   boxed that a rule can part. The panel is wider than the Contact note so the
   two columns have room; where it is narrow they stack, and on a phone there
   is nothing to scan with, so no code. */
.textcar .enquiry__panel {
  inline-size: min(max(46rem, 50%), 100%);
  gap: var(--sp-5); padding-block: var(--sp-4) var(--sp-6);
  container-type: inline-size;
}
.textcar .enquiry__content { max-inline-size: none; gap: var(--sp-6) var(--sp-7); align-items: start; }
@container (min-width: 36rem) {
  .textcar .enquiry__content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.textcar__car, .textcar__act { display: grid; gap: var(--sp-5); align-content: start; min-inline-size: 0; }
.textcar__car { gap: var(--sp-4); }
.textcar__plate { margin: 0; overflow: clip; border-radius: var(--radius-media); background: var(--graphite-900); }
.textcar__plate img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.textcar__head { gap: var(--sp-2); }
.textcar__k {
  margin: 0; font-family: var(--mono); font-size: var(--micro);
  letter-spacing: var(--track); text-transform: uppercase; color: var(--text);
}
.textcar .enquiry__title { font-size: var(--h3); line-height: var(--lh-heading); text-wrap: balance; }
.textcar__price {
  margin: 0; 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);
}
/* Mileage and stock side by side: one row of the home page's spec, not two. */
.textcar__spec {
  margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-5);
  border-block: var(--hairline) solid var(--rule);
}
.textcar__spec > div { display: grid; grid-template-columns: none; gap: var(--sp-1); padding-block: var(--sp-3); border: 0; }
.textcar__spec dd { margin: 0; font-variant-numeric: tabular-nums; }

.textcar__form { display: grid; gap: var(--sp-3); }
.textcar__label {
  margin-block-start: var(--sp-2);
  font-family: var(--mono); font-size: var(--micro); letter-spacing: var(--track); text-transform: uppercase;
  color: var(--text-muted); transition: color var(--dur-2) var(--ease-out);
}
.textcar__form:focus-within .textcar__label { color: var(--text); }
.textcar .phone {
  display: flex; align-items: baseline; gap: var(--sp-3);
  border-block-end: var(--hairline) solid var(--ink-on-light-muted);
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.textcar .phone:hover { border-block-end-color: var(--ink-on-light); }
.textcar .phone:focus-within { border-block-end-color: var(--ink-on-light); box-shadow: 0 var(--hairline) 0 0 var(--ink-on-light); }
.phone__cc { font-family: var(--mono); font-size: var(--fs-body); color: var(--text-muted); }
.textcar .phone input {
  flex: 1; min-inline-size: 0; min-block-size: 3.25rem; padding: var(--sp-2) 0;
  border: 0; outline: none; background: transparent; color: var(--text);
  font-family: var(--face); font-weight: 600; font-size: var(--h3);
  letter-spacing: var(--ls-heading); font-variant-numeric: tabular-nums;
}
.textcar .phone input::placeholder { color: var(--ink-on-light-muted); opacity: 1; font-weight: 500; }
.textcar .phone input[aria-invalid='true'] { color: var(--oxblood); }
.textcar__note { margin: 0; font-size: var(--fs-body-s); line-height: var(--lh-body); color: var(--text-muted); }
.textcar__note[data-state='sent'] { color: var(--text); }
.textcar__note[data-state='error'] { color: var(--oxblood); }            /* oxblood is text on light */
.textcar__send { inline-size: 100%; justify-content: space-between; margin-block-start: var(--sp-2); cursor: pointer; }

.textcar__scan {
  display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--sp-4); align-items: center;
  padding-block-start: var(--sp-5); border-block-start: var(--hairline) solid var(--rule);
}
.textcar__code svg { display: block; inline-size: 100%; block-size: auto; }
.textcar__code svg rect { fill: transparent; }
.textcar__code svg path { fill: var(--ink-on-light); }
.textcar__scan p { margin: 0; display: grid; gap: var(--sp-1); font-size: var(--fs-body-s); line-height: var(--lh-body); color: var(--text-muted); }
.textcar .enquiry__alt { padding-block-start: var(--sp-4); }
.textcar .enquiry__alt a { white-space: nowrap; }   /* the number is not broken across a line */
@media (max-width: 61.99rem) {
  .textcar__scan { display: none; }
  .textcar__plate img { aspect-ratio: 16 / 9; }
}

/* ── Share: the menu beside the button ───────────────────────────────────────
   A small raised card on the bone surface — it floats, so it takes the site's
   one shadow, --lift, kept for exactly this. The car's name at the top, so the
   visitor knows what they are sharing; Copy link on its own row, parted by a
   hairline, then the four places. Each row is a 2.75rem target, an ink icon
   that darkens with the label on hover and focus. It arrives by half of
   --travel and a fade; under reduced motion it is simply there. */
.sharepop {
  position: fixed; inset: auto; margin: 0; padding: 0; overflow: visible;
  inline-size: 17rem; max-inline-size: calc(100vw - var(--sp-5));
  background: var(--bone-050); color: var(--ink-on-light);
  border: var(--hairline) solid var(--bone-200); border-radius: var(--radius-control);
  box-shadow: var(--lift);
  opacity: 0; transform: translateY(calc(var(--travel) / -2));
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out),
    overlay var(--dur-2) allow-discrete, display var(--dur-2) allow-discrete;
}
.sharepop:popover-open { opacity: 1; transform: none; }
@starting-style { .sharepop:popover-open { opacity: 0; transform: translateY(calc(var(--travel) / -2)); } }
.sharepop::backdrop { background: transparent; }
.sharepop__head { display: grid; gap: var(--sp-1); padding: var(--sp-4) var(--sp-4) var(--sp-3); border-block-end: var(--hairline) solid var(--bone-200); }
.sharepop__k {
  margin: 0; font-family: var(--mono); font-size: var(--micro);
  letter-spacing: var(--track); text-transform: uppercase; color: var(--ink-on-light-muted);
}
.sharepop__name { margin: 0; font-family: var(--face); font-weight: 600; font-size: var(--fs-body-s); line-height: var(--lh-heading); color: var(--ink-on-light); }
.sharepop__list { list-style: none; margin: 0; padding: var(--sp-2) 0; }
.sharepop__copy { margin-block-end: var(--sp-2); padding-block-end: var(--sp-2); border-block-end: var(--hairline) solid var(--bone-200); }
.sharepop__item {
  display: flex; align-items: center; gap: var(--sp-3); inline-size: 100%; min-block-size: 2.75rem;
  padding: 0 var(--sp-4); background: none; border: 0; cursor: pointer; text-align: start;
  font-family: var(--body); font-size: var(--fs-body-s); color: var(--ink-on-light); text-decoration: none;
  transition: background-color var(--dur-2) var(--ease-out);
}
.sharepop__item svg { flex: none; color: var(--ink-on-light-muted); transition: color var(--dur-2) var(--ease-out); }
.sharepop__item:is(:hover, :focus-visible) { background: var(--bone-100); }
.sharepop__item:is(:hover, :focus-visible) svg { color: var(--ink-on-light); }
.sharepop__item:focus-visible { outline: var(--focus-w) solid var(--ink-on-light); outline-offset: calc(var(--focus-w) * -1); }
.sharepop__hint {
  margin-inline-start: auto; font-family: var(--mono); font-size: var(--micro);
  letter-spacing: var(--track); text-transform: uppercase; color: var(--ink-on-light-muted);
}

@media (prefers-reduced-motion: reduce) {
  .car:is(:hover, :focus-within) .car__media img { transform: none; }
  .sharepop { transition: none; transform: none; }
}