/* v12.css — the next round of client changes, as a layer over v11.
   ---------------------------------------------------------------------------
   index11 stays exactly as the client last saw it, so nothing in v10.css or
   v11.css is edited: both load first and everything that changes lives here.
   Values come from tokens.css and the earlier layers' :root; the few numbers
   this file adds are named at the top rather than typed where they are used. */

:root {
  /* THE FINANCE PAGE STARTS UNDER A FIXED BAR. The home page hides the bar's
     height inside the hero; finance.html has no hero, so its first section
     has to clear the bar itself. v12.js measures the bar and writes --bar-h;
     this is the fallback for a page without scripts — v10's scroll-padding
     number (9rem, 12rem on a phone where the bar is logo-over-nav), the
     site's own measure of "past the bar", not a new one. */
  --bar-clear: 9rem;
}
@media (max-width: 62rem) {
  :root { --bar-clear: 12rem; }
}

/* ── 08 · finance, without its form ───────────────────────────────────────
   The client, 2026-09-11: the application comes off the scrolling page and
   lives at finance.html; the section stays and sends people there. With the
   form gone the intro has nothing to stay level with, so it is no longer
   sticky, and it stands in the middle of the row rather than at the left
   edge of a column it no longer shares — Alex, 2026-09-11. The one centred
   section on the page, and the only one that is a single statement with a
   single action: a short bone block at the left margin read as a stub. */
.finance__intro:only-child {
  position: static; grid-column: 1 / -1;
  justify-self: center; justify-items: center; text-align: center;
}
.finance__intro .btn-row { margin-block-start: var(--sp-3); }

/* ── finance.html ─────────────────────────────────────────────────────────
   The application as a whole page. The first section sits below the fixed
   bar and keeps its own top padding under it, so the page opens with the
   same air every section on the home page has. The bar is two rows on a
   laptop and three on a phone, which is why it is measured rather than
   guessed. */
:is(.page-finance, .page-build, .page-consignment, .page-inventory, .page-vehicle, .page-service, .page-about) main > .sect:first-of-type {   /* v10.js puts its marker div first */
  padding-block-start: calc(var(--bar-h, var(--bar-clear)) + var(--pad));
}

/* ── consignment.html — the photographs ──────────────────────────────────
   Alex, 2026-09-14: the consignment form takes up to eight photographs. The
   drop zone is the form's own surface with a dashed edge — the one field on
   the page that is a place rather than a line — and it answers a drag the way
   a field answers a hover. The file input stays real and focusable; its focus
   is shown on the zone. Previews sit under it in a grid of small frames. */
.drop { position: relative; }
.drop .drop__input {
  position: absolute; inline-size: 1px; block-size: 1px; min-block-size: 0; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.drop__zone {
  display: grid; justify-items: center; gap: var(--sp-3);
  padding: var(--sp-7) var(--sp-5); text-align: center; cursor: pointer;
  background: var(--surface);
  border: var(--hairline) dashed var(--ink-on-light-muted); border-radius: var(--radius-control);
  transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.drop .drop__zone { font-family: var(--body); letter-spacing: 0; text-transform: none; color: var(--text); }
.drop__zone:hover, .drop.is-over .drop__zone { border-color: var(--ink-on-light); }
.drop.is-over .drop__zone { border-style: solid; background: var(--ground-deep); }
.drop:has(.drop__input:focus-visible) .drop__zone {
  outline: var(--focus-w) solid var(--ink-on-light); outline-offset: var(--hairline);
}
.drop__title { font-family: var(--face); font-weight: 600; font-size: var(--news-h); line-height: var(--lh-heading); }
.drop__or { font-family: var(--mono); font-size: var(--micro); letter-spacing: var(--track); text-transform: uppercase; color: var(--text-muted); }
.drop__btn { pointer-events: none; }
.drop.is-full .drop__zone { opacity: 0.6; }
.drop__note { font-family: var(--mono); font-size: var(--micro); color: var(--text-muted); }
.drop__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr)); gap: var(--sp-4);
}
.drop__list:empty { display: none; }
.drop__item { position: relative; display: grid; gap: var(--sp-2); min-inline-size: 0; }
.drop__item img {
  display: block; inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-media); background: var(--bone-200);
}
.drop__name {
  font-family: var(--mono); font-size: var(--micro); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.drop__remove {
  position: absolute; inset-block-start: var(--sp-1); inset-inline-end: var(--sp-1);
  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.72); color: var(--bone-050);
}
.drop__remove:focus-visible { outline: var(--focus-w) solid var(--ink-on-light); outline-offset: var(--hairline); }

/* ── the build panel arrives evenly ───────────────────────────────────────
   Alex, 2026-09-11: "remove the bouncing effect from the slide-in form, make
   the transition smooth". Measured: on --ease-panel the panel covered 72% of
   its travel in the first 140ms and spent the next 500ms creeping to the
   edge — no overshoot, but a sprint and a crawl read as a spring. Now
   --ease-out over the same --dur-5: one deceleration, evenly spent. The
   form no longer trails the panel by its own --travel and a beat's delay;
   it rides in with it and only fades up, so there is one motion to watch
   rather than two finishing at different moments. Exit unchanged. */
.enquiry[data-open] .enquiry__panel { transition: transform var(--dur-5) var(--ease-out); }
.enquiry__content { transform: none; }
.enquiry[data-open] .enquiry__content {
  transition: opacity var(--dur-4) var(--ease-out) var(--dur-1);
}