:root { --gutter: clamp(16px, 3.4vw, 48px); --page-max: calc(1400px + 2 * var(--gutter)); --x-muted: light-dark(#545458, #b5b5ba); }

      /* Summary strip */
      .x-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
      .x-bycolor { margin: 0; }

      /* Shared form fields */
      .x-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin: 0 0 16px; }
      .x-field { display: flex; flex-direction: column; gap: 4px; font: var(--type-tag); color: var(--text-secondary); }
      .x-field select, .x-field input {
        min-height: var(--tap);
        padding: 0 12px;
        border-radius: var(--r-s);
        border: 1px solid var(--stroke-primary);
        background: var(--fill-primary-on);
        color: var(--text-primary);
        font: var(--type-small);
        max-width: 100%;
        box-sizing: border-box;
      }
      .x-field input { width: 8.5em; }
      .x-field--wide input { width: min(20em, 100%); }
      .x-field input::placeholder { color: var(--text-secondary); }
      .x-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); font: var(--type-small); color: var(--text-primary); cursor: pointer; }
      .x-toggle input { width: 18px; height: 18px; margin: 0; accent-color: var(--fill-primary); }
      .x-zipmsg { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); margin: 0; font: var(--type-small); color: var(--text-primary); }
      .x-zipmsg::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fill-system-red); }
      .x-zipmsg:empty { display: none; }
      .x-zipnote { margin: -8px 0 12px; }
      .x-vinbox { position: relative; display: inline-flex; max-width: 100%; }
      .x-field .x-vinbox input { width: 15em; height: var(--tap); padding-right: var(--tap); }
      .x-vinclear { position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: var(--r-s); background: none; color: var(--x-muted); font: var(--weight-regular) 22px/1 var(--sans); cursor: pointer; }
      .x-vinclear:hover { color: var(--text-primary); }
      .x-vinclear:focus-visible { outline: 2px solid var(--text-primary); outline-offset: -6px; }
      .x-vinclear[hidden] { display: none; }
      .x-vinmsg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-height: var(--tap); margin: 0; font: var(--type-small); color: var(--text-primary); }
      .x-vinmsg:empty { display: none; }
      .x-vinmsg small { font: var(--type-caption); color: var(--x-muted); }
      .x-dl dd b { font-weight: var(--weight-bold); }
      .x-zipnote[hidden] { display: none; }

      /* Color chits */
      .x-color { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
      /* Car-color swatch: 16px rounded square, strong fill, visible outline, letter inside */
      .x-chit { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 4px; box-sizing: border-box; background: var(--x-chit); border: 1.5px solid var(--x-chit-line); color: var(--x-chit-ink); font: var(--weight-bold) var(--size-caption)/1 var(--sans); vertical-align: middle; }
      .x-chit::after { content: var(--x-chit-l, ""); }
      .x-chit--gravel { --x-chit: #C2A878; --x-chit-line: #7A6440; --x-chit-ink: #1d1d1f; --x-chit-l: "G"; }
      .x-chit--zero-gravity { --x-chit: #D7DCE2; --x-chit-line: #6E7378; --x-chit-ink: #1d1d1f; --x-chit-l: "Z"; }
      .x-chit--black { --x-chit: #111111; --x-chit-line: #8E8E93; --x-chit-ink: #ffffff; --x-chit-l: "B"; }
      .x-chit--unknown { --x-chit: #8E8E93; --x-chit-line: #55555A; --x-chit-ink: #ffffff; --x-chit-l: "?"; }
      .x-chit[hidden] { display: none; }
      .x-select { position: relative; display: inline-flex; max-width: 100%; }
      .x-select .x-chit { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
      .x-select.has-chit select { padding-left: 30px; }

      /* Lifecycle tracker: 5 dots, the current stage as an icon pill, then ETA and Locals first */
      .x-life { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
      .x-life--built { --x-stage: #0072B2; --x-on: #ffffff; }
      .x-life--transit { --x-stage: #00796B; --x-on: #ffffff; }
      .x-life--lot { --x-stage: #007A5A; --x-on: #ffffff; }
      .x-life--pending { --x-stage: #E69F00; --x-on: #1d1d1f; }
      .x-life--sold { --x-stage: #55555A; --x-on: #ffffff; }
      .x-track { display: inline-flex; align-items: center; gap: 3px; }
      .x-track i { display: block; width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid var(--text-secondary); }
      .x-track i.is-done { background: var(--text-secondary); }
      .x-track i.is-now { width: 13px; height: 13px; border: 2px solid var(--text-primary); background: var(--x-stage); }
      .x-stage { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 6px; border-radius: var(--r-pill); font: var(--type-tag); white-space: nowrap; background: var(--x-stage); color: var(--x-on); }
      .x-stage svg, .x-local svg { width: 14px; height: 14px; flex: none; }
      .x-life__eta { font: var(--type-caption); color: var(--text-primary); white-space: nowrap; }
      .x-local { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 6px; border-radius: var(--r-pill); border: 1.5px solid light-dark(#8A5A00, #E69F00); font: var(--type-tag); color: var(--text-primary); white-space: nowrap; }
      .x-local svg { color: light-dark(#8A5A00, #E69F00); }

      /* Price-feel badges */
      .x-feel {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px 4px 8px;
        border-radius: var(--r-pill);
        font: var(--type-tag);
        white-space: nowrap;
        background: var(--fill-tertiary);
        color: var(--text-primary);
      }
      .x-feel::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--x-dot, transparent); box-shadow: inset 0 0 0 1.5px var(--x-dot, var(--x-muted)); }
      .x-feel--fair { background: color-mix(in srgb, var(--fill-system-green) 16%, transparent); --x-dot: var(--fill-system-green); }
      .x-feel--high { background: color-mix(in srgb, var(--fill-system-orange) 14%, transparent); --x-dot: var(--fill-system-orange); }
      .x-feel--marked { background: color-mix(in srgb, var(--fill-system-red) 14%, transparent); --x-dot: var(--fill-system-red); }
      .x-feel--ask { color: var(--x-muted); }
      .x-finder td small { color: var(--x-muted); }
      .x-ver { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font: var(--type-caption); color: var(--x-muted); white-space: nowrap; cursor: help; }
      .x-ver b { color: inherit; font-weight: var(--weight-bold); }

      /* Finder rows */
      .x-count { font: var(--type-label); color: var(--text-primary); margin: 0 0 8px; }
      .x-count span { font: var(--type-small); color: var(--text-secondary); }
      .x-row { cursor: pointer; }
      .x-row:hover > * { box-shadow: inset 0 0 0 100px var(--hover-wash); }
      .x-row.is-open > * { border-bottom-color: transparent; }
      .x-finder td.x-morecell { text-align: right; vertical-align: middle; }
      .x-more { min-height: var(--tap); cursor: pointer; }
      .x-more::after { content: "\25BE"; font-size: 11px; color: var(--text-secondary); transition: transform var(--dur-quick) var(--ease-out); }
      .x-more[aria-expanded="true"]::after { transform: rotate(180deg); }
      .x-finder tr[hidden] { display: none; }
      .x-detail > td { padding-top: 0; }
      .x-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px 20px; margin: 0; padding: 16px 18px; border-radius: var(--r-s); background: var(--fill-tertiary); }
      .x-dl dt { font: var(--type-tag); color: var(--text-secondary); }
      .x-dl dd { margin: 2px 0 0; overflow-wrap: anywhere; }
      .x-dl .links { grid-column: 1 / -1; }
      @media (max-width: 599px) {
        .x-finder td.x-morecell { text-align: left; padding-top: 8px; }
        .x-detail > td { padding-top: 4px; }
      }

      /* Map */
      .x-map { position: relative; margin: 0 0 12px; }
      .x-mapview { position: relative; overflow: hidden; border-radius: var(--r-s); touch-action: pan-x pan-y; -webkit-user-select: none; user-select: none; }
      .x-mapview.is-zoomed { cursor: grab; }
      .x-mapview.is-dragging { cursor: grabbing; }
      .x-mapview > svg { display: block; width: 100%; height: auto; overflow: hidden; }
      .x-land { fill: var(--fill-tertiary); }
      .x-borders { fill: none; stroke: var(--stroke-primary); stroke-width: 0.75; stroke-linejoin: round; }
      #map-zoom path, #map-zoom .x-fly, #map-zoom .x-road { vector-effect: non-scaling-stroke; }
      /* Zoom controls, top right */
      .x-zoom { position: absolute; top: 8px; right: 8px; z-index: 6; display: grid; overflow: hidden; border-radius: var(--r-s); border: 1px solid var(--stroke-primary); background: color-mix(in srgb, var(--fill-primary-on) 92%, transparent); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow); }
      .x-zoom button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; background: none; color: var(--text-primary); cursor: pointer; }
      .x-zoom button + button { border-top: 1px solid var(--stroke-secondary); }
      .x-zoom button[hidden] { display: none; }
      .x-zoom button:hover:not(:disabled) { background: var(--hover-wash); }
      .x-zoom button:disabled { color: var(--stroke-primary); cursor: default; }
      .x-zoom button:focus-visible { outline: 2px solid var(--text-primary); outline-offset: -3px; }
      .x-zoom svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
      @media (pointer: coarse), (max-width: 599px) { .x-zoom button { width: var(--tap); height: var(--tap); } }
      @media (max-width: 599px) { .x-zoom { top: 4px; right: 4px; } }
      .x-zoomhint { position: absolute; left: 50%; top: 50%; z-index: 7; margin: 0; padding: 8px 14px; transform: translate(-50%, -50%); border-radius: var(--r-pill); background: var(--fill-primary); color: var(--text-primary-on); font: var(--type-small); white-space: nowrap; pointer-events: none; box-shadow: var(--glass-shadow); }
      .x-zoomhint b { font-weight: var(--weight-medium); }
      .x-zoomhint[hidden] { display: none; }
      .x-marks { position: absolute; inset: 0; pointer-events: none; }
      .x-mk {
        position: absolute;
        width: var(--tap);
        height: var(--tap);
        margin: calc(var(--tap) / -2) 0 0 calc(var(--tap) / -2);
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: none;
        cursor: pointer;
        outline: none;
        pointer-events: auto;
        -webkit-tap-highlight-color: transparent;
      }
      /* Status icons: color and symbol both carry the status (Okabe-Ito based) */
      .x-open { --x-st: #1A9850; --x-st-ink: #ffffff; }
      .x-local1 { --x-st: #E69F00; --x-st-ink: #1a1a1a; }
      .x-pend { --x-st: #0072B2; --x-st-ink: #ffffff; }
      .x-unl { --x-st: #7B4FA0; --x-st-ink: #ffffff; }
      .x-sold { --x-st: #8A8A8A; --x-st-ink: #ffffff; }
      .x-mk { z-index: 2; display: grid; place-items: center; }
      .x-mk.x-sold { z-index: 1; }
      .x-mk__dot {
        position: relative;
        display: grid;
        place-items: center;
        width: 28px;
        height: 28px;
        box-sizing: border-box;
        border-radius: 50%;
        border: 2px solid #ffffff;
        background: var(--x-st);
        color: var(--x-st-ink);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.18);
        transition: transform var(--dur-quick) var(--ease-out);
      }
      .x-mk.x-sold .x-mk__dot { width: 20px; height: 20px; opacity: 0.7; }
      .x-mk__dot svg { display: block; width: 62%; height: 62%; }
      .x-mk__n {
        position: absolute;
        top: -7px;
        right: -9px;
        min-width: 18px;
        height: 18px;
        box-sizing: border-box;
        padding: 0 4px;
        border-radius: var(--r-pill);
        border: 1.5px solid #ffffff;
        background: #1d1d1f;
        color: #ffffff;
        font: var(--weight-bold) 12px/15px var(--sans);
        text-align: center;
      }
      .x-mk:hover, .x-mk:focus-visible, .x-mk.is-active { z-index: 4; }
      .x-mk:hover .x-mk__dot, .x-mk:focus-visible .x-mk__dot, .x-mk.is-active .x-mk__dot { transform: scale(1.18); opacity: 1; }
      .x-mk:focus-visible .x-mk__dot, .x-mk.is-active .x-mk__dot, .x-mk.is-sel .x-mk__dot { outline: 2px solid var(--text-primary); outline-offset: 2px; }
      @media (prefers-reduced-motion: reduce) { .x-mk__dot, .x-cta, .x-ib { transition: none; } }
      @media (max-width: 599px) {
        .x-mk__dot { width: 22px; height: 22px; }
        .x-mk.x-sold .x-mk__dot { width: 16px; height: 16px; }
        .x-mk__n { top: -8px; right: -10px; }
      }
      /* Small badge: the same icon next to a status word */
      .x-sb { display: inline-flex; align-items: center; gap: 5px; font: var(--type-tag); font-weight: var(--weight-medium); color: var(--text-primary); white-space: nowrap; }
      .x-sb__i { display: grid; place-items: center; flex: none; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; background: var(--x-st); color: var(--x-st-ink); box-shadow: 0 0 0 1px var(--stroke-primary); }
      .x-sb__i svg { display: block; width: 11px; height: 11px; }
      /* Map key in the corner; a Key toggle on phones */
      .x-mapkey { position: absolute; left: 8px; bottom: 8px; z-index: 6; max-width: calc(100% - 16px); border-radius: var(--r-s); border: 1px solid var(--stroke-primary); background: color-mix(in srgb, var(--fill-primary-on) 92%, transparent); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow); }
      .x-mapkey > summary { display: none; }
      .x-mapkey ul { display: grid; gap: 4px; margin: 0; padding: 8px 12px; list-style: none; }
      .x-mapkey li .x-sb__i { width: 18px; height: 18px; }
      .x-mapkey li .x-sb { font: var(--type-tag); }
      .x-mapkey li span.x-mapkey__n { color: var(--text-secondary); font-weight: var(--weight-regular); }
      @media (max-width: 599px) {
        .x-mapkey { left: 4px; bottom: 4px; max-width: calc(100% - 8px); }
        .x-mapkey > summary { display: flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 12px; font: var(--type-tag); font-weight: var(--weight-medium); color: var(--text-primary); cursor: pointer; list-style: none; }
        .x-mapkey > summary::-webkit-details-marker { display: none; }
        .x-mapkey > summary::after { content: "\25BE"; color: var(--text-secondary); }
        .x-mapkey[open] > summary::after { content: "\25B4"; }
        .x-mapkey ul { padding-top: 0; }
      }
      .x-mapkey > summary:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; border-radius: var(--r-s); }

      .x-you { pointer-events: none; }
      .x-you circle { fill: var(--fill-primary); stroke: var(--fill-primary-on); stroke-width: 2; }
      .x-you text { font: var(--type-tag); fill: var(--text-primary); text-anchor: middle; paint-order: stroke; stroke: var(--fill-primary-on); stroke-width: 3px; stroke-linejoin: round; }
      /* Map popup: compact card */
      .x-tip {
        position: absolute;
        z-index: 8;
        width: min(280px, 100%);
        box-sizing: border-box;
        padding: 12px 14px;
        border-radius: var(--r-s);
        border: 1px solid var(--stroke-primary);
        background: var(--fill-primary-on);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 6px 20px rgba(0, 0, 0, 0.12);
        font: var(--type-small);
        color: var(--text-primary);
      }
      .x-tip[hidden] { display: none; }
      .x-tip svg { width: 14px; height: 14px; flex: none; }
      .x-tip__name { margin: 0; font: var(--type-label); font-weight: var(--weight-bold); overflow-wrap: anywhere; }
      .x-tip__city { margin: 2px 0 0; font: var(--type-tag); color: var(--x-muted); }
      .x-tip__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; }
      .x-tip__tags .x-chit { width: 12px; height: 12px; border-radius: 3px; border-width: 1px; }
      .x-tip__tags .x-chit::after { content: none; }
      .x-tip__color { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 6px; border-radius: var(--r-pill); border: 1px solid var(--stroke-primary); font: var(--type-tag); white-space: nowrap; }
      .x-tip__st { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--r-pill); background: var(--x-st); color: var(--x-st-ink); font: var(--type-tag); font-weight: var(--weight-medium); white-space: nowrap; }
      .x-tip__tags .x-tag { padding: 1px 8px; }
      .x-prog { margin: 12px 0 0; }
      .x-prog__now { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; font: var(--type-tag); color: var(--x-muted); }
      .x-prog__now b { display: inline-flex; align-items: center; gap: 5px; color: var(--text-primary); font-weight: var(--weight-medium); }
      .x-prog__now svg { width: 14px; height: 14px; }
      .x-prog__bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin: 0; padding: 0; list-style: none; }
      .x-prog__bar li { height: 4px; border-radius: 2px; background: var(--stroke-secondary); }
      .x-prog__bar li.is-done { background: var(--text-secondary); opacity: 0.55; }
      .x-prog__bar li.is-now { background: var(--text-primary); }
      .x-prog__ends { display: flex; justify-content: space-between; margin: 4px 0 0; font: var(--type-caption); color: var(--x-muted); }
      .x-tip__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--stroke-secondary); }
      .x-tip__price span { color: var(--x-muted); font: var(--type-tag); }
      .x-tip__price b { color: var(--text-primary); font: var(--type-small); font-weight: var(--weight-bold); }
      .x-tip__acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; margin: 4px 0 -8px; }
      .x-tip__acts .link, .x-tip__acts .x-linkbtn { display: inline-flex; align-items: center; min-height: var(--tap); font: var(--type-small); }
      .x-tip__list { display: grid; gap: 0; max-height: 196px; overflow-y: auto; margin: 10px 0 0; padding: 0; list-style: none; overscroll-behavior: contain; }
      .x-tip__list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 7px 0; border-top: 1px solid var(--stroke-secondary); }
      .x-tip__list li:first-child { border-top: 0; padding-top: 0; }
      .x-tip__list .x-tip__fig { margin-left: auto; font: var(--type-tag); font-weight: var(--weight-bold); white-space: nowrap; }
      .x-tip__list .x-tip__stg { display: inline-flex; align-items: center; gap: 4px; font: var(--type-tag); color: var(--x-muted); white-space: nowrap; }
      .x-tip__list .x-tip__stg svg { width: 12px; height: 12px; }
      .x-legend { display: grid; gap: 8px; margin: 0 0 24px; font: var(--type-tag); color: var(--text-primary); }
      .x-legend__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0; }
      .x-legend__head { min-width: 3.5em; color: var(--x-muted); }
      .x-key { display: inline-flex; align-items: center; gap: 6px; }
      .x-key svg { flex: none; overflow: visible; }
      .x-key__sep { width: 1px; height: 16px; background: var(--stroke-primary); }

      /* Collapsible secondary sections */
      .x-fold { border-top: 1px solid var(--stroke-secondary); }
      .section.x-fold { padding-block: 8px; }
      .x-fold .head { display: block; margin: 0; }
      .x-fold .head h2 { font: var(--type-heading); }
      .x-fold h2, .x-fold h3 { margin: 0; }
      .x-fold .x-foldbody > * + * { margin-top: 16px; }
      .x-foldbody > p { max-width: 68ch; }
      .x-foldbtn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: var(--tap); padding: 4px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
      .x-foldbtn::after { content: "\25BE"; flex: none; font-size: 14px; color: var(--text-secondary); transition: transform var(--dur-quick) var(--ease-out); }
      .x-foldbtn[aria-expanded="true"]::after { transform: rotate(180deg); }
      .x-foldbtn:focus-visible, .x-fab:focus-visible, .x-modal__x:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
      .x-foldbody { padding: 12px 0 8px; }
      .x-foldbody[hidden] { display: none; }
      button.btn { cursor: pointer; }

      /* Report a car: floating button and modal */
      .x-fab { position: fixed; z-index: 20; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); min-height: var(--tap); padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--stroke-secondary); background: var(--mat-regular); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow); color: var(--text-primary); font: var(--type-small); font-weight: var(--weight-medium); cursor: pointer; }
      body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
      .x-modal { width: min(640px, calc(100vw - 24px)); height: min(860px, calc(100dvh - 24px)); max-height: none; margin: auto; padding: 0; border: 1px solid var(--stroke-secondary); border-radius: var(--r-l); background: var(--fill-primary-on); color: var(--text-primary); box-shadow: var(--glass-shadow); overflow: hidden; }
      .x-modal[open] { display: flex; flex-direction: column; }
      .x-modal::backdrop { background: color-mix(in srgb, var(--fill-primary) 45%, transparent); }
      .x-modal__head { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 20px; border-bottom: 1px solid var(--stroke-secondary); }
      .x-modal__head h2 { flex: 1; margin: 0; font: var(--type-label); font-weight: var(--weight-medium); }
      .x-modal__head .link { font: var(--type-small); }
      .x-modal__x { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: var(--r-s); background: none; color: var(--text-primary); font-size: 22px; line-height: 1; cursor: pointer; }
      .x-modal__x:hover { background: var(--hover-wash); }
      .x-modal iframe { flex: 1; width: 100%; border: 0; background: var(--fill-primary-on); }

      /* Footer: how this works */
      .x-footinfo .x-fold { margin-top: 4px; }
      .x-footinfo .x-foldbtn { font: var(--type-label); color: var(--text-primary); }
      .x-footinfo .x-foldbody p { margin: 0 0 8px; max-width: 68ch; }

      /* Tips and collapsed extras */
      .x-tips { list-style: none; margin: 0; padding: 0; max-width: 68ch; }
      .x-tips li { padding: 12px 0; border-bottom: 1px solid var(--stroke-secondary); font-size: var(--size-body); }
      .x-tips li:last-child { border-bottom: 0; }
      .x-details { border-top: 1px solid var(--stroke-secondary); padding: 8px 0; }
      .x-details > summary { display: flex; align-items: center; gap: 8px; min-height: var(--tap); font: var(--type-heading); cursor: pointer; list-style: none; }
      .x-details > summary::-webkit-details-marker { display: none; }
      .x-details > summary::after { content: "\25BE"; font-size: 14px; color: var(--text-secondary); transition: transform var(--dur-quick) var(--ease-out); }
      .x-details[open] > summary::after { transform: rotate(180deg); }
      .x-details > :not(summary) { margin-top: 12px; }
      .x-sort { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
      th[aria-sort="ascending"] .x-sort::after { content: "\2191"; }
      th[aria-sort="descending"] .x-sort::after { content: "\2193"; }
      .x-finder thead .x-sort { font: inherit; color: inherit; }
      .x-sort:focus-visible, .x-linkbtn:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; border-radius: 4px; }

      /* Status tags: Unlisted, Region pool, Employee program */
      .x-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: var(--r-pill); border: 1px solid var(--stroke-primary); font: var(--type-tag); color: var(--text-primary); white-space: nowrap; }
      .x-tag svg { width: 12px; height: 12px; flex: none; }
      .x-tag--emp { background: var(--fill-tertiary); }

      /* Fun fact */
      .x-fact { margin: 14px 0 0; max-width: 68ch; font: var(--type-body); color: var(--text-primary); }
      .x-fact b { font-weight: var(--weight-medium); }

      /* Active sort line */
      .x-sortline { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin: -4px 0 8px; font: var(--type-small); color: var(--x-muted); }
      .x-linkbtn { min-height: var(--tap); padding: 0; border: 0; background: none; color: var(--text-primary); font: var(--type-small); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
      .x-linkbtn[hidden] { display: none; }

      /* Fly out, drive home */
      .x-trip { display: grid; gap: 14px; margin-top: 12px; padding: 16px 18px; border-radius: var(--r-s); border: 1px solid var(--stroke-primary); background: var(--fill-primary-on); }
      .x-trip h3 { margin: 0; font: var(--type-label); }
      .x-trip__leg { display: grid; gap: 4px; min-width: 0; }
      .x-trip__k { margin: 0; font: var(--type-tag); color: var(--x-muted); }
      .x-trip__big { margin: 0; font: var(--type-heading); overflow-wrap: anywhere; }
      .x-trip__sub { margin: 0; font: var(--type-small); color: var(--x-muted); overflow-wrap: anywhere; }
      .x-trip__sub b { color: var(--text-primary); font-weight: var(--weight-medium); }
      .x-trip .links { margin: 6px 0 0; }
      .x-trip .btn { min-height: var(--tap); cursor: pointer; }
      .x-trip__parks { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font: var(--type-small); }
      .x-trip__parks li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; }
      .x-trip__parks svg { width: 14px; height: 14px; flex: none; }
      .x-tree { fill: light-dark(#1B6E3A, #7BD389); stroke: var(--fill-primary-on); stroke-width: 1; }
      .x-triphint { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin: 8px 0 0; font: var(--type-small); color: var(--x-muted); }

      /* Trip on the map */
      .x-map.is-trip .x-mk:not(.is-sel) { opacity: 0.4; }

      .x-fly { fill: none; stroke: var(--text-primary); stroke-width: 1.75; stroke-dasharray: 6 5; stroke-linecap: round; }
      .x-road { fill: none; stroke: var(--text-primary); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
      .x-plane path { fill: var(--text-primary); stroke: var(--fill-primary-on); stroke-width: 1; }
      .x-apt circle { fill: var(--fill-primary-on); stroke: var(--text-primary); stroke-width: 2; }
      .x-apt text { font: var(--type-tag); fill: var(--text-primary); text-anchor: middle; paint-order: stroke; stroke: var(--fill-primary-on); stroke-width: 3px; stroke-linejoin: round; }
      .x-legend__row[hidden] { display: none; }
      .x-key[hidden] { display: none; }

      /* Car detail: freshness, dealer report card, out-the-door estimator */
      .x-fresh { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 10px; font: var(--type-small); color: var(--x-muted); }
      .x-fresh b { color: var(--text-primary); font-weight: var(--weight-medium); }
      .x-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; margin-top: 12px; }
      .x-box { display: grid; align-content: start; gap: 12px; min-width: 0; padding: 16px 18px; border-radius: var(--r-s); border: 1px solid var(--stroke-primary); background: var(--fill-primary-on); }
      .x-box h3 { margin: 0; font: var(--type-label); }
      .x-rc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 0; }
      .x-rc dt { font: var(--type-tag); color: var(--x-muted); }
      .x-rc dd { margin: 2px 0 0; font: var(--type-small); color: var(--text-primary); overflow-wrap: anywhere; }
      .x-rc dd.is-unknown { color: var(--x-muted); }
      .x-box .links { margin: 0; }
      .x-box .btn { min-height: var(--tap); }
      .x-otd__loc { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
      .x-otd__loc .x-field input { width: 7.5em; }
      .x-otd__loc .x-field select { width: min(14em, 100%); }
      .x-otd [hidden] { display: none; }
      .x-otd__res:empty { display: none; }
      .x-otd__lines { max-width: none; }
      .x-otd__lines .row { padding: 9px 0; }
      .x-otd__lines dt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
      .x-otd__lines .row--total { padding: 14px 0; }
      .x-otd__lines .x-otd__ins { margin-top: 0; border-top: 1px solid var(--stroke-secondary); border-bottom: 0; }
      .x-otd__lines dd small { display: block; margin-top: 2px; font: var(--type-caption); color: var(--text-secondary); text-align: right; }
      .x-otd__lines dd.is-unknown { font-weight: var(--weight-regular); color: var(--text-secondary); }
      .x-box .fineprint { margin: 0; }

      /* Dealer report cards table */
      .x-dealers td small, .x-dealers th small { color: var(--x-muted); }

      /* Footer: disclaimer */
      .x-footinfo { flex-basis: 100%; }
      .x-footinfo > p { margin: 0 0 8px; max-width: 68ch; }

      /* Hero call to action and the secondary stats strip */
      .x-herocta { margin: 16px 0 0; }
      .x-cta { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--r-pill); background: var(--fill-primary); color: var(--text-primary-on); font: var(--type-label); font-weight: var(--weight-medium); text-decoration: none; transition: box-shadow var(--dur-quick) ease; }
      .x-cta:hover { box-shadow: inset 0 0 0 100px var(--hover-wash-primary-on); }
      .x-strip { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 0; font: var(--type-small); color: var(--x-muted); }
      .x-strip > span { display: inline-flex; align-items: center; gap: 6px; }
      .x-strip b { color: var(--text-primary); font-weight: var(--weight-medium); }
      /* Filter bar: right above the list, sticky on phones */
      .x-bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0 0 8px; padding: 10px; border-radius: var(--r-m); border: 1px solid var(--stroke-secondary); background: var(--mat-regular); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 76px); }
      .x-bar__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; min-width: 0; }
      .x-bar #f-zip { width: 6.5em; }
      .x-zipbox { display: inline-flex; gap: 4px; }
      .x-ib svg { display: block; }
      .x-ib[aria-busy="true"] { opacity: 0.55; }
      .x-moref { margin: 0 0 8px; padding: 0; border-top: 0; }
      .x-moref > summary { font: var(--type-small); color: var(--text-primary); }
      .x-moref .x-filters { margin: 4px 0 8px; }
      @media (max-width: 639px) {
        .x-bar { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 76px); z-index: 8; padding: 8px; gap: 6px; }
        .x-bar__row { flex-wrap: nowrap; overflow-x: auto; margin: 0 -8px; padding: 0 8px; scrollbar-width: none; }
        .x-bar__row::-webkit-scrollbar { display: none; }
        .x-bar__row > * { flex: none; }
        .x-bar .x-fl { display: none; }
        .x-bar .x-chipbtn { white-space: nowrap; }
      }
      .x-chipbtn { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--stroke-primary); background: transparent; color: var(--text-primary); font: var(--type-small); cursor: pointer; }
      .x-chipbtn[aria-pressed="true"] { background: var(--fill-primary); color: var(--text-primary-on); border-color: var(--fill-primary); }
      .x-chipbtn:focus-visible, .x-grp__h button:focus-visible, .x-line:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
      .x-bar__sep { width: 1px; height: 24px; background: var(--stroke-secondary); }
      .x-bar .x-count { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin: 0; font: var(--type-small); color: var(--text-secondary); }
      .x-bar .x-zipmsg { min-height: 0; }
      /* Status groups and compact rows */
      .x-grp { margin: 0 0 8px; }
      .x-grp__h { margin: 0; }
      .x-grp__h button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: var(--tap); padding: 0 4px; border: 0; border-bottom: 1px solid var(--stroke-primary); background: none; color: var(--text-primary); font: var(--type-label); font-weight: var(--weight-medium); text-align: left; cursor: pointer; }
      .x-grp__h .x-car { margin-left: auto; color: var(--text-secondary); transition: transform var(--dur-quick) var(--ease-out); }
      .x-grp__h button[aria-expanded="false"] .x-car { transform: rotate(-90deg); }
      .x-grp ul { margin: 0; padding: 0; list-style: none; }
      .x-grp ul[hidden], .x-detail[hidden] { display: none; }
      .x-item { border-bottom: 1px solid var(--stroke-secondary); }
      .x-item.is-highlight, .x-item.is-open { background: var(--fill-tertiary); border-radius: var(--r-s); }
      .x-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
      .x-item > .x-detail { grid-column: 1 / -1; }
      .x-line { display: grid; grid-template-columns: 16px minmax(0, 1.3fr) minmax(0, 1fr) 8.5em 10em; grid-template-areas: "c d l s p"; align-items: center; gap: 4px 12px; width: 100%; min-height: 60px; padding: 8px; border: 0; background: none; color: var(--text-primary); font: var(--type-body); text-align: left; cursor: pointer; }
      .x-line:hover { background: var(--hover-wash); }
      .x-l-c { grid-area: c; }
      .x-l-d { grid-area: d; min-width: 0; overflow-wrap: anywhere; font-weight: var(--weight-medium); }
      .x-l-l { grid-area: l; min-width: 0; font: var(--type-small); color: var(--x-muted); }
      .x-l-l b { font-weight: var(--weight-medium); color: var(--text-primary); }
      .x-l-s { grid-area: s; }
      .x-l-p { grid-area: p; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
      .x-price { font: var(--type-label); font-weight: var(--weight-bold); white-space: nowrap; }
      .x-price small { margin-left: 4px; font: var(--type-caption); color: var(--x-muted); }
      .x-l-p .x-feel { padding: 2px 8px 2px 6px; font: var(--type-caption); }
      .x-item.is-sold .x-price, .x-item.is-sold .x-l-d { color: var(--x-muted); }
      .x-sb.x-pill { padding: 3px 10px 3px 3px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--x-st) 18%, transparent); }
      .x-line .x-sb__i { width: 20px; height: 20px; }
      .x-line .x-sb__i svg { width: 13px; height: 13px; }
      .x-new { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--r-pill); background: var(--fill-primary); color: var(--text-primary-on); font: var(--type-caption); font-weight: var(--weight-medium); vertical-align: 2px; }
      /* Direct actions: icon buttons on desktop rows, labeled buttons in the open card */
      .x-acts { display: flex; justify-content: flex-end; gap: 4px; width: calc(3 * var(--tap) + 8px); padding-right: 8px; }
      .x-ib { display: inline-grid; place-items: center; flex: none; width: var(--tap); height: var(--tap); padding: 0; border-radius: var(--r-s); border: 1px solid var(--stroke-primary); background: var(--fill-primary-on); color: var(--text-primary); cursor: pointer; transition: box-shadow var(--dur-quick) ease; }
      .x-ib:hover { box-shadow: inset 0 0 0 100px var(--hover-wash); }
      .x-ib:focus-visible, .x-cta:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
      .x-ib svg, .x-do svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
      .x-do { margin: 0 0 12px; }
      .x-do .btn { min-height: var(--tap); font: var(--type-small); font-weight: var(--weight-medium); }
      .x-item .x-detail { padding: 0 8px 14px; }
      .x-copy { display: inline-flex; align-items: center; min-width: var(--tap); min-height: var(--tap); margin-left: 4px; padding: 0 8px; vertical-align: middle; }
      .x-empty { padding: 14px 4px; font: var(--type-small); color: var(--text-secondary); }
      .x-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
      @media (max-width: 639px) {
        .x-line { grid-template-columns: 12px minmax(0, 1fr) auto; grid-template-areas: "c d p" ". l p" ". s p"; gap: 4px 10px; padding: 10px 6px; }
        .x-l-d { font: var(--type-label); }
        .x-acts { display: none; }
      }
      /* Phone: one-line rows, column legend, filter sheet */
      .x-m, .x-cols, .x-fbtn { display: none; }
      .x-sheet { width: 100%; max-width: 100%; height: auto; max-height: calc(100dvh - 48px); margin: auto 0 0; border-bottom: 0; border-radius: var(--r-l) var(--r-l) 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
      .x-sheet__body { overflow: auto; padding: 16px 20px 20px; }
      .x-sheet .x-bar__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
      .x-sheet .x-field:first-child { grid-column: 1 / -1; }
      .x-sheet .x-field select { width: 100%; height: var(--tap); }
      .x-sheet #f-zip { width: 8em; height: var(--tap); }
      @media (max-width: 639px) {
        /* Place is state only here, so Price has room for full dollars ($66,261) */
        :root { --x-cols: 36px minmax(0, 1fr) 36px 64px 46px 14px; }
        .x-bar__row--fields { display: none; }
        .x-fbtn { display: inline-flex; }
        .x-fbtn b { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--fill-primary); color: var(--text-primary-on); font: var(--type-tag); }
        .x-fbtn b:empty { display: none; }
        .x-bar .x-count { min-height: 20px; }
        .x-moref { margin-bottom: 4px; }
        .x-sortline { margin-bottom: 4px; }
        /* Column header: same grid, gap and side padding as .x-line, so each label sits over its column */
        .x-cols { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 76px + var(--x-barh, 0px)); z-index: 7; display: grid; grid-template-columns: var(--x-cols); gap: 0 6px; margin: 0; padding: 4px 6px; border-bottom: 1px solid var(--stroke-secondary); background: var(--fill-primary-on); font: var(--weight-medium) var(--size-caption)/16px var(--sans); font-variant-caps: all-small-caps; letter-spacing: 0.03em; color: var(--x-muted); white-space: nowrap; }
        .x-cols > span { min-width: 0; text-align: left; }
        .x-cols > .x-cols__p { text-align: right; }
        .x-cols > .x-cols__m { text-align: center; }
        .x-grp { margin: 0 0 4px; }
        .x-grp__h button { min-height: var(--tap); font: var(--type-small); font-weight: var(--weight-medium); }
        .x-line { grid-template-columns: var(--x-cols); grid-template-areas: none; gap: 0 6px; height: 44px; min-height: 44px; padding: 6px; overflow: hidden; white-space: nowrap; font: var(--type-small); }
        .x-line > .x-l-c, .x-line > .x-l-d, .x-line > .x-l-l, .x-line > .x-l-s, .x-line > .x-l-p { display: none; }
        .x-line > .x-m { display: block; min-width: 0; overflow: hidden; }
        .x-line > .x-m-c { display: flex; align-items: center; gap: 4px; }
        .x-m-g { display: grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--x-st); color: var(--x-st-ink); }
        .x-m-g svg { display: block; width: 11px; height: 11px; }
        .x-m-d { font: var(--type-label); text-overflow: ellipsis; }
        .x-m-l { font: var(--type-caption); color: var(--x-muted); }
        .x-m-l .x-m-wide { display: none; }
        .x-m-p { font: var(--type-label); font-weight: var(--weight-bold); text-align: right; }
        .x-m-p.is-srp { color: var(--x-muted); font-weight: var(--weight-medium); }
        .x-line > .x-m-m { text-align: center; }
        .x-m-m b { display: inline-block; padding: 0 4px; border-radius: 4px; font: var(--type-tag); line-height: 18px; }
        .x-m-m .is-ok { background: color-mix(in srgb, var(--fill-system-green) 22%, transparent); }
        .x-m-m .is-bad { background: color-mix(in srgb, var(--fill-system-red) 20%, transparent); }
        .x-m-m .is-add { background: var(--fill-tertiary); color: var(--text-secondary); }
        .x-m-n b { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--fill-primary); color: var(--text-primary-on); font: var(--weight-bold) var(--size-caption)/14px var(--sans); text-align: center; }
        .x-item.is-sold .x-m-d, .x-item.is-sold .x-m-p { color: var(--x-muted); }
        .x-item.is-sold .x-m-g { opacity: 0.75; }
      }
      @media (min-width: 440px) and (max-width: 639px) {
        :root { --x-cols: 36px minmax(0, 1fr) 92px 64px 46px 14px; }
        .x-m-l .x-m-wide { display: inline; }
        .x-m-l .x-m-wide + .x-m-short { display: none; }
      }
      /* Phone hero: the photo becomes a 4:3 band on top, centered on the car so it is never cropped off one side */
      @media (max-width: 760px) {
        .hero .hero__img { bottom: auto; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 60%; -webkit-mask-image: linear-gradient(to bottom, black 78%, transparent); mask-image: linear-gradient(to bottom, black 78%, transparent); }
        .hero .hero__copy { padding-top: calc((100vw - 2 * var(--gutter)) * 0.75 - 56px); }
      }
      .main img:not(.hero__img) { display: block; margin: 0 auto; max-width: 100%; }
          .x-stage-stroke { stroke: var(--x-stage); }
      .x-stale { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--r-s); border: 1px solid var(--stroke-secondary); background: var(--fill-tertiary); color: var(--text-primary); font: var(--type-small); }