/*!
 * Quick Auto Center — /book/ Vehicle step (story 1.W2.21).
 * Derived from the approved prototype (design/prototypes/part-1/proto.css, "Vehicle step"; flow-part-1.md
 * sections 2, 3, 6 and 7). Scoped to .veh (the step body). Tokens only (var(--*) or calc() over them);
 * DESIGN.md bans apply: no background gradient, blur, glass, emoji, Unicode glyph icons or pill outside .tag.
 * Targets >= 44px; inputs keep the site's 16px body size; focus is the site's 2px --focus-ring.
 */

/* Field label with inline loader — ADAPT of .field__label */
.veh .field__label--row{display:flex;align-items:center;gap:var(--space-2);}
.veh .field .qload{display:none;}
.veh .field.is-loading .qload{display:inline-flex;}
.veh .control:disabled{background-color:var(--surface-muted);color:var(--text-muted);cursor:not-allowed;}
.veh [hidden]{display:none;}

/* Year / Make / Model grid — ADAPT of .booking__fs to three columns */
.veh .ymm-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-3);}
@media (min-width:560px){ .veh .ymm-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }

/* VehicleConfirm — REUSE .card + .dh--4 + .eyebrow + .tag--neutral + LinkButton */
.vcard{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-6);}
.vcard__main{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-1);min-width:0;}
.vcard .eyebrow{margin:0;}
.vcard__name{margin:0;}
.vcard__name:focus{outline:none;}
.vcard__name:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;}
.bk .vcard .dh--4{font-size:var(--type-title);}

/* Versions / engines */
.veh-opts{display:flex;flex-direction:column;gap:var(--space-2);}
.veh-opts:not(:has(> :not([hidden]))){display:none;}
.veh-opts__load{display:flex;align-items:center;gap:var(--space-2);margin:0;font-size:var(--type-body-sm);color:var(--text-muted);}
.veh-opts__load:focus{outline:none;}

/* OptionTile (version / engine radio) — ADAPT of .card--interactive: bordered tile, Royal border + Royal 050 when chosen */
.opts-fs{margin:0;padding:0;border:0;min-width:0;display:flex;flex-direction:column;gap:var(--space-2);}
.opts-fs:focus{outline:none;}
.opts-fs legend{padding:0;margin-bottom:var(--space-1);}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(var(--space-32) + var(--space-8))),1fr));gap:var(--space-2);}
.opt{display:flex;align-items:center;gap:var(--space-2);min-height:44px;padding:var(--space-1) var(--space-3);background:var(--surface-card);
  border:var(--border-width) solid var(--border-default);border-radius:var(--radius-md);cursor:pointer;color:var(--text-heading);font-weight:var(--weight-semibold);
  transition:border-color var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard);}
.opt:hover{border-color:var(--border-brand);}
.opt:has(input:checked){border-color:var(--border-brand);box-shadow:inset 0 0 0 1px var(--border-brand);background:var(--qac-royal-050);}
.opt:has(input:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px;}
.opt input{flex:none;width:var(--space-5);height:var(--space-5);margin:0;accent-color:var(--action-primary);}
.opt input:focus-visible{outline:none;}
.opts-fs[aria-invalid="true"] .opt{border-color:var(--status-danger);}

/* Skip — REUSE .btn--ghost */
.skipbox{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--space-4);padding-top:var(--space-3);border-top:var(--border-width) solid var(--border-hairline);}
.skipbox .btn--ghost{padding-left:var(--space-3);padding-right:var(--space-3);}