/* marketplace-picker.css — the public Marketplace's multi-select picker (marketplace-picker.js).
   A SEPARATE stylesheet on purpose (marketplace.html links it after styles.css): it is a new, self-contained surface, and keeping its
   rules here means a concurrent edit to styles.css can never collide with it. No inline style anywhere: every show/hide is `hidden` or a
   class. Tokens only (the site's own --line / --paper / --blue-* / --ink / --muted), no new colour.

   Owner, 2026-10-23: "Option one is fine if you make it have more room by the make and model not being next to each other." Make, Model,
   Gearbox and Fuel are STACKED, one full-width row each, and each row opens a bottom sheet; a tap away closes it and keeps the picks. */

/* The core group is ONE column (it was two-up, which put Make beside Model on the wide layout). */
.market-filter-grid[data-market-core] { grid-template-columns: minmax(0, 1fr); }
/* A picker row also takes the full row inside any other two-up grid (Vehicle details: Body type, Colour). */
.market-filter-grid > .market-labelled-control:has(.market-picker-field) { grid-column: 1 / -1; }

/* The stacked row that opens the sheet: value, count badge, chevron. */
.market-picker-field { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; font-size: 16px; font-weight: 650; text-align: left; cursor: pointer; }
.market-picker-field:focus-visible { outline: 3px solid var(--blue-700); outline-offset: 2px; }
.market-picker-field-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.market-picker-field-empty .market-picker-field-value { color: var(--muted); font-weight: 500; }
.market-picker-count { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 24px; min-height: 24px; padding: 0 6px; border-radius: 999px; background: var(--blue-050); color: var(--blue-900); font-size: 12px; font-weight: 800; }
.market-picker-chevron { flex: none; color: var(--blue-800); font-size: 22px; line-height: 1; }

/* The sheet. It sits ABOVE the filter sheet (z-index 1040), so its scrim darkens that sheet exactly as that sheet darkens the page. */
body.market-picker-open { overflow: hidden; }
.market-picker-backdrop { position: fixed; inset: 0; z-index: 1060; display: flex; align-items: flex-end; justify-content: center; background: rgba(6, 10, 16, .55); cursor: pointer; }
.market-picker { cursor: default; position: relative; display: flex; flex-direction: column; width: 100%; max-width: 600px; height: min(80dvh, 100%); overflow: hidden; border-radius: 22px 22px 0 0; background: var(--paper); color: var(--ink); box-shadow: 0 -8px 40px rgba(0, 0, 0, .2); }
.market-picker:focus { outline: none; }
/* The whole top band is the swipe-down handle: it must not scroll the page, so the browser leaves its vertical gesture to us. */
.market-picker-top { flex: none; display: flex; flex-direction: column; touch-action: none; }
.market-picker-top .market-sheet-grabber { align-self: center; }
.market-picker-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 16px 6px 18px; border-bottom: 1px solid var(--line); }
.market-picker-title h2 { margin: 0; font: 700 20px/1.2 var(--serif); letter-spacing: -.01em; }
.market-picker-close:focus-visible { outline: 3px solid var(--blue-700); outline-offset: 2px; }
.market-picker-subheader { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 18px; min-height: 48px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 14px; font-weight: 650; }
.market-picker-subheader[hidden] { display: none; }
.market-picker-search { flex: none; margin: 12px 18px 4px; }
.market-picker-search[hidden] { display: none; }
.market-picker-search-input { width: 100%; min-height: 48px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; font-size: 16px; }
.market-picker-search-input:focus { border-color: var(--blue-700); outline: 3px solid var(--blue-050); }

/* The list scrolls INSIDE the sheet at a fixed height, so opening or filtering it never moves the page behind. */
.market-picker-body { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.market-picker-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 18px 12px; -webkit-overflow-scrolling: touch; }
.market-picker-block { padding-top: 10px; }
.market-picker-label { margin: 14px 2px 8px; color: var(--ink); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.market-picker-block > .market-picker-label { margin-top: 4px; }
.market-picker-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.market-picker-chip, .market-picker-add { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.market-picker-chip { border: 1px solid var(--blue-700); background: var(--blue-050); color: var(--blue-900); }
.market-picker-add { border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
.market-picker-chip:focus-visible, .market-picker-add:focus-visible { outline: 3px solid var(--blue-700); outline-offset: 2px; }
.market-picker-group { position: relative; }
.market-picker-heading { position: sticky; top: 0; z-index: 1; margin: 0; padding: 10px 8px 4px; background: var(--paper); color: var(--ink); font-size: 13px; font-weight: 800; }
.market-picker-row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 4px 8px; border-bottom: 1px solid var(--line); font-size: 15px; overflow-wrap: anywhere; cursor: pointer; }
.market-picker-row input { flex: none; width: 22px; height: 22px; accent-color: var(--blue-700); }
.market-picker-row.is-on { background: var(--blue-050); }
.market-picker-row.is-unavailable { color: var(--muted); cursor: default; }
.market-picker-indexed .market-picker-row { padding-right: 32px; }
/* The letter index: ONE drag rail pinned to the right edge (outside the scroller, so it never scrolls away). */
.market-picker-index { position: absolute; top: 8px; right: 0; bottom: 8px; width: 28px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; touch-action: none; user-select: none; color: var(--blue-800); font-size: 12px; font-weight: 700; }
.market-picker-index[hidden] { display: none; }
.market-picker-notice { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--blue-050); color: var(--blue-900); font-size: 13px; font-weight: 650; }
.market-picker-empty { margin: 16px 4px; font-size: 14px; }
.market-picker-gate { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 24px; text-align: center; }
.market-picker-gate h3 { margin: 4px 0 0; font-size: 16px; }
.market-picker-gate p { margin: 0 0 8px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.market-picker-foot { flex: none; display: grid; border-top: 1px solid var(--line); background: var(--paper); }
.market-picker-status { padding: 10px 18px 0; font-size: 13px; line-height: 1.35; }
.market-picker-status[hidden] { display: none; }
.market-picker-actions { display: flex; gap: 10px; padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px)); }
.market-picker-actions .button { flex: 1; min-height: 46px; }
.market-picker-actions .button[disabled] { opacity: .6; cursor: default; }