* {
    box-sizing: border-box;
}

/* MVP-2: a small, intentionally limited design-token system for the
   Research One Car report's spacing, radii and neutral borders. Not a
   framework — just the handful of values already proven out by the report's
   existing rhythm, named so future report components reuse them instead of
   inventing another one-off literal. */
:root {
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-section: 28px;
    --space-group: 40px;

    --radius-sm: 8px;
    --radius-md: 12px;

    --border-subtle: #e0e5e9;

    /* MVP-3: control height floor plus a shared visible-focus treatment,
       built from the color Ask Haki's inputs/buttons already used for
       exactly this purpose (see .ask-haki-section ...:focus-visible below) —
       not a new color, just its first use outside Ask Haki. */
    --control-height: 44px;
    --focus-ring-color: #315a73;
    --focus-ring: 3px solid var(--focus-ring-color);
    --focus-ring-offset: 3px;

    /* An existing secondary-text gray (already used by .section-summary,
       .ask-haki-status and others) reused here specifically because it
       clears WCAG AA with real safety margin — see .source-note/.eyebrow. */
    --text-secondary: #56616b;

    /* MVP-4: a restrained 4-role semantic system, built from colors the app
       already converged on independently — .quick-decision-good's badge and
       .price-status.great were already the identical #dff4e5, and
       .quick-decision-warning's badge and .price-status.high were already
       the identical #fff1d8. This formalizes that existing overlap into
       named roles instead of inventing new colors. Text stays the app's
       one dark neutral body color throughout: every one of these
       backgrounds is pale enough that it clears WCAG AA against it with
       large margin (verified in the MVP-4 regression tests), so no
       per-role text color is needed. "Attention" only appears in Market
       Price today (Very High Price) — Quick Decision's verdictClass has
       exactly two real states (safe-badge/warning-badge), so its warning
       verdicts map to "caution", never "attention"; a third, more severe
       Quick Decision tier is not invented here. */
    --status-positive-text: #1f2933;
    --status-positive-bg: #dff4e5;
    --status-positive-border: #b9d8c1;

    --status-caution-text: #1f2933;
    --status-caution-bg: #fff1d8;
    --status-caution-border: #ead39e;

    --status-attention-text: #1f2933;
    --status-attention-bg: #ffe4e4;
    --status-attention-border: #e0a9a9;

    --status-neutral-text: #1f2933;
    --status-neutral-bg: #eef2f5;
    --status-neutral-border: #e0e5e9;
}

/* The `hidden` attribute must always win. A component rule such as
   `.better-deals-controls { display: grid }` has the same specificity as the
   UA `[hidden]` rule and, being author-origin, would otherwise re-expose a
   hidden element. Keep this global and `!important` so no component CSS can
   display a `[hidden]` node. Toggle visibility with `el.hidden`, never by
   swapping `display`. */
[hidden] {
    display: none !important;
}

.guides-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    font-size: 14px;
}

.guides-crumbs li + li::before {
    content: "\203A";
    margin-right: 8px;
    color: #61717c;
}

html {
    scroll-behavior: smooth;
}

/* IA-6: shoppers who have asked their OS to reduce motion get instant
   (not animated) scrolling for every in-page jump — the same navigation
   still works, nothing here changes what gets focused or scrolled to,
   only how the scroll itself is animated. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f4f6f8;
    color: #1f2933;
}

.app-shell {
    width: min(100% - 32px, 1050px);
    margin: 0 auto;
    padding: 32px 0 60px;
}

.site-header {
    margin-bottom: 28px;
}

.site-header h1 {
    margin: 0 0 8px;
    font-size: clamp(30px, 5vw, 44px);
}

.site-header p {
    margin: 0;
    color: #5f6b76;
}

.site-nav {
    margin-top: 14px;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.site-nav a {
    font-weight: 600;
    color: #315a73;
    text-underline-offset: 3px;
}

.site-nav a:focus-visible {
    outline: 3px solid #f4b942;
    outline-offset: 3px;
    border-radius: 2px;
}

.search-section {
    margin-bottom: 24px;
}

.search-section h2 {
    margin-bottom: 14px;
}

#vin-form label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

#vin-form input,
#vin-form select {
    font-family: inherit;
    font-size: 16px;
    line-height: 1.25;
}

#vin-form .vin-controls > input,
#vin-form .single-market-location select,
#vin-form .money-input,
#vin-form .mileage-input {
    height: 44px;
}

#vin-form .money-input input,
#vin-form .mileage-input input {
    height: 42px;
}

#vin-form .money-input span,
#vin-form .mileage-input span {
    font-size: 16px;
    line-height: 1.25;
}

/* Price and Mileage share one row whenever there is room for both columns to
   stay at least 130px wide (comfortably true down to 320px, since this row
   has no surrounding card padding to eat into it) and only wrap to a single
   column if the available width genuinely can't fit both — no fixed pixel
   breakpoint needed. This is intentionally MORE specific than the plain
   `.deal-input-row` rule (incl. its `max-width: 600px` 1-column override
   below) so Compare Cars' own price/mileage rows are completely unaffected;
   only Research One Car's row opts into this behavior. */
#vin-form .single-vehicle-deal-inputs {
    margin-top: 12px;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

#vin-form .single-vehicle-deal-inputs > label {
    gap: 0;
    margin-bottom: 0;
}

#vin-form .single-vehicle-deal-inputs .money-input,
#vin-form .single-vehicle-deal-inputs .mileage-input {
    margin-top: 6px;
}

.single-market-location {
    margin-top: 12px;
    margin-bottom: 10px;
}

/* `.vin-controls` only ever wraps the single VIN input (`.vin-controls > input`
   has no sibling), so its direction never changes what's on screen — EXCEPT
   that the `flex-direction: column` set below at <=520px turns `height` into
   the flex main-axis size, where a text input's content-based automatic
   minimum size (~46px for this padding/border/font combination) silently
   floors it back up regardless of the explicit height. Forcing `row` here
   (scoped to Research One Car only) keeps that content-based floor out of
   play so the intended 44px control height actually renders on mobile. */
#vin-form .vin-controls {
    flex-direction: row;
}

.vin-controls {
    display: flex;
    gap: 10px;
}

input,
select {
    flex: 1;
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid #cfd6dc;
    border-radius: var(--radius-sm);
    background: white;
    font-size: 16px;
}

/* MVP-3: a visible keyboard-focus ring for every plain input/select/button —
   VIN, State, Nearby Deals ZIP/radius, the feedback comment box, and every
   ordinary button (Research This Car, shopping-tool CTAs, calculator
   buttons, etc). Elements that need a different treatment because an
   ancestor clips outlines (money/mileage) or that already have their own
   equivalent rule (Ask Haki) override this safely by specificity below. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

button {
    padding: 13px 18px;
    border: none;
    border-radius: var(--radius-sm);
    background: #20252b;
    color: white;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}

button:hover {
    opacity: 0.9;
}

button:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

/* MVP-4: this was the one remaining report surface still using a decorative
   shadow (and its own one-off 16px radius) — identified but deliberately
   left alone in MVP-2. Reviewed now: the shadow wasn't carrying any
   hierarchy meaning a subtle border doesn't already carry (the card's
   prominence comes from being first, its bold heading and its generous
   padding, not the shadow), so it's retired in favor of the same
   restrained neutral-surface language (--radius-md, --border-subtle) the
   rest of the report already uses — padding is left generous on purpose,
   preserving this card's identity/research-success prominence. */
.vehicle-card,
.message-card {
    background: white;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.vehicle-card {
    padding: 26px;
}

.message-card {
    padding: 20px;
}

.error-card {
    background: #fff1f1;
}

.eyebrow {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 12px;
    font-weight: bold;
    /* MVP-3: was #64717d (~4.62:1 — borderline). Same --text-secondary as
       .source-note for a small, safer margin; size/weight/case unchanged. */
    color: var(--text-secondary);
}

.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}

.section-heading h2 {
    margin: 4px 0 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
}

/* MVP-4: Insurance/Financing/Inspection/Warranty are actionable services
   nested under the SHOPPING TOOLS report group, not report sections in
   their own right — the approved card/action-title tier (18px) keeps that
   distinction visible instead of them reading as peers of Market Price or
   Problems. Higher specificity (two classes) than the plain rule above, so
   only sections carrying .shopping-tool-section move to this size. */
.shopping-tool-section .section-heading h2 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.section-summary {
    color: #56616b;
    line-height: 1.55;
    margin-bottom: 18px;
    /* Pre-beta cleanup: MVP-6 measured report prose at ~940px wide inside
       the 1050px desktop shell — well past a comfortable reading measure.
       Same 70ch precedent as .guides > p. The report card itself stays
       full width; only this text's own line length is constrained, and at
       mobile widths the card is already narrower than 70ch so this is a
       no-op there. */
    max-width: 70ch;
}

/* MVP-1: report body copy — scoped to direct-child paragraphs of a report
   section so it can't reach badges, nav, labels or compact metadata like
   .source-note (excluded explicitly since it keeps its own smaller size). */
.dashboard-section > p:not(.source-note) {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

/* MVP-4: default (context-less) badges — e.g. "Independent Quotes",
   "Haki Checklist" — are informational, not an assessment, so they get the
   neutral role by default. Verdict-specific contexts (.quick-decision-good
   .status-badge etc.) override this below. */
.status-badge {
    white-space: nowrap;
    padding: 7px 10px;
    border-radius: 999px;
    color: var(--status-neutral-text);
    background: var(--status-neutral-bg);
    font-size: 13px;
    font-weight: bold;
    line-height: 1.25;
}


/* =========================================
   MODE SELECTOR
   ========================================= */

.research-mode-selector {
    display: inline-flex;
    gap: 5px;
    padding: 5px;
    margin-bottom: 26px;
    background: #e9edf1;
    border-radius: 12px;
}

.mode-button {
    width: auto;
    padding: 10px 16px;
    border-radius: 8px;
    background: transparent;
    color: #4d5964;
    font-size: 14px;
}

.mode-button.active {
    background: white;
    color: #1f2933;
    box-shadow:
        0 1px 5px
        rgba(0, 0, 0, 0.08);
}


/* =========================================
   COMPARE FORM
   Compact setup layout (presentation only): the vehicle cards, the local-market bar and the priorities are dense enough that
   two vehicles, Add Vehicle, the state and the priorities fit one desktop viewport, and the controls stay legible (16px inputs,
   44px-class tap targets). Behavior, ids, names and values are unchanged.
   ========================================= */

.hidden {
    display: none !important;
}

.compare-search-section {
    margin-bottom: 22px;
}

.compare-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 12px;
    margin-bottom: 12px;
}

.compare-heading h2 {
    margin: 0 0 3px;
    font-size: 24px;
}

.compare-heading > p:last-child {
    flex: 1 1 100%;
    margin: 0;
    color: #66727d;
    line-height: 1.45;
    font-size: 14px;
}

/* Screen-reader-only text: the current-car explanation stays available to assistive technology without taking space. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Shared compact section header: eyebrow, heading and one line of explanation. */
.section-copy {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 12px;
}

.section-copy h3 {
    margin: 0;
    font-size: 17px;
}

.section-copy p:not(.eyebrow) {
    flex: 1 1 100%;
    margin: 3px 0 0;
    color: #68747e;
    font-size: 13px;
    line-height: 1.4;
}


/* =========================================
   VEHICLE GRID
   ========================================= */

.compare-input-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

/* Header row: [number] Vehicle N ............ [Current car]; then the VIN; then the value and mileage side by side. */
.compare-input-card {
    min-width: 0;
    padding: 12px 14px 14px;
    background: white;
    border: 1px solid #dde3e8;
    border-radius: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px;
    align-items: center;
}

.compare-card-heading {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin-bottom: 10px;
}

.compare-card-heading > div {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    line-height: 1.2;
}

.compare-card-heading small {
    color: #77828c;
    font-size: 12px;
}

.vehicle-number {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #20252b;
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.compare-input-card > br {
    display: none;
}

/* The VIN label (the current-car control is also a direct-child label, styled below). */
.compare-input-card > label:not(.priority-option) {
    grid-column: 1 / -1;
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: bold;
}

.compare-input-card > input {
    grid-column: 1 / -1;
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
    padding: 8px 12px;
}

/* The compact current-car control: a pill in the card header (same radio, same behavior). */
.compare-input-card > .current-car-option {
    grid-column: 2;
    grid-row: 1;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    margin-bottom: 10px;
    padding: 4px 12px 4px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.compare-input-card > .current-car-option input {
    margin: 0;
}

.compare-input-card > .current-car-option strong {
    font-size: 13px;
}

.compare-input-card > .current-car-option:focus-within {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.deal-input-row {
    display: grid;
    grid-template-columns:
        1fr 1fr;
    gap: 10px;
}

.deal-input-row > label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 13px;
    font-weight: bold;
}

/* Compare only (Research One Car keeps the rules above): a compact row whose controls share one baseline whatever the label does. */
#compare-form .deal-input-row {
    grid-column: 1 / -1;
    align-items: end;
}

#compare-form .deal-input-row > label {
    gap: 4px;
    min-width: 0;
    font-size: 12px;
}

.money-input,
.mileage-input {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #cfd6dc;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

/* Compare's value/mileage controls: one fixed height, identical for both, so they align exactly. */
#compare-form .money-input,
#compare-form .mileage-input {
    height: 40px;
}

#compare-form .money-input input,
#compare-form .mileage-input input {
    height: 38px;
    padding-top: 0;
    padding-bottom: 0;
}

/* MVP-3: the required Price/Mileage focus fix. The inner input's own
   `outline: none` below exists because this wrapper — not the input — is
   the visual control; the fix belongs on the wrapper for the same reason.
   :focus-within here is also what keeps the ring from being clipped by
   `overflow: hidden` above: an element's own overflow never clips its own
   outline, only a descendant's, and the input is a descendant. */
.money-input:focus-within,
.mileage-input:focus-within {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.money-input span {
    padding-left: 12px;
    color: #65717b;
}

.mileage-input span {
    padding-right: 12px;
    color: #65717b;
    font-size: 13px;
}

.money-input input,
.mileage-input input {
    width: 100%;
    border: none;
    outline: none;
    border-radius: 0;
}

/* Pre-beta cleanup: the global `input { padding: 13px 14px }` rule's 14px
   left padding was sized for a standalone input (VIN, State) with no
   adjacent prefix — inside .money-input it left the "$" and the digits
   reading as two separate things. The "$" span already carries its own
   12px left padding to clear the wrapper's border, so only a small gap is
   needed after it. .mileage-input's suffix sits on the right instead, so
   its input keeps the inherited padding unchanged on both sides. */
.money-input input {
    padding-left: 4px;
}


/* =========================================
   ADD VEHICLE
   A slim, discoverable control: it does not take a vehicle card's space.
   ========================================= */

.add-vehicle-card {
    width: 100%;
    min-height: 0;
    padding: 10px 14px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    align-self: center;
    background: transparent;
    color: #34404b;
    border: 2px dashed #c8d0d7;
    border-radius: 12px;
}

.add-vehicle-card:hover {
    background: #eef2f5;
    border-color: #89949e;
    opacity: 1;
}

.add-vehicle-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    text-align: left;
    line-height: 1.25;
}

.add-vehicle-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #20252b;
    color: white;
    font-size: 20px;
    line-height: 1;
}


/* =========================================
   MARKET LOCATION
   ========================================= */

.market-location-section {
    margin-top: 12px;
    padding: 10px 14px;
    background: white;
    border: 1px solid #dde3e8;
    border-radius: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 18px;
    align-items: center;
}

.market-location-copy {
    grid-column: 1;
    grid-row: 1 / span 2;
    min-width: 0;
}

.market-location-section > label {
    grid-column: 2;
    grid-row: 1;
    margin: 0 0 3px;
    font-weight: bold;
    font-size: 12px;
}

.market-location-section > select {
    grid-column: 2;
    grid-row: 2;
    width: 240px;
    max-width: 100%;
    height: 40px;
    padding: 8px 12px;
}


/* =========================================
   PRIORITIES
   ========================================= */

.buyer-priority-section {
    margin-top: 12px;
    padding: 12px 14px;
    background: white;
    border: 1px solid #dde3e8;
    border-radius: 12px;
}

.priority-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.priority-option {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    min-height: 44px;
    padding: 7px 10px;
    border: 1px solid #dfe5e9;
    border-radius: 10px;
    cursor: pointer;
    background: #fafbfc;
}

.priority-option:has(
    input:checked
) {
    background: #eef5ff;
    border-color: #9bbce5;
}

.priority-option input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    padding: 0;
}

.priority-option > span {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.priority-option strong {
    font-size: 13px;
    line-height: 1.25;
}

.priority-option small {
    color: #707b84;
    font-size: 11.5px;
    line-height: 1.25;
}

.priority-message {
    margin: 8px 0 0;
    font-size: 13px;
    color: #64717d;
}

.priority-message:empty {
    display: none;
}


/* =========================================
   ACTIONS
   ========================================= */

.compare-actions {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.compare-actions-single {
    justify-content: flex-end;
}

.compare-button {
    width: auto;
}


/* =========================================
   REPORT
   ========================================= */

.compact-report {
    padding: 24px;
}

.compact-section {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid #e2e7eb;
}

.compact-section-heading {
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
}

.compact-section-heading h3 {
    margin: 4px 0 0;
    font-size: 21px;
}

.compact-note {
    margin: -4px 0 14px;
    color: #69757f;
    font-size: 13px;
    line-height: 1.5;
}


/* =========================================
   RECOMMENDATIONS
   ========================================= */

.recommendation-section {
    margin-top: 18px;
    padding: 20px;
    border: 1px solid #cadbec;
    border-radius: 14px;
    background: #f5f9ff;
}

.recommendation-empty {
    padding: 18px;
    border-radius: 12px;
    background: #f7f9fa;
    border: 1px solid #e0e5e9;
}

.recommendation-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.recommendation-header h2 {
    margin: 6px 0 2px;
}

.recommendation-score {
    flex: 0 0 auto;
    padding: 10px 14px;
    text-align: center;
    border-radius: 11px;
    background: white;
    border: 1px solid #d8e3ee;
}

.recommendation-score strong {
    display: block;
    font-size: 28px;
}

.recommendation-score span {
    font-size: 12px;
    color: #6d7882;
}

/* Price versus estimated market, and the comparison with the current car, where no overall /100 score is shown. */
.recommendation-price-line,
.recommendation-current-line {
    margin: 10px 0 0;
    font-size: 17px;
    line-height: 1.4;
}

.recommendation-current-line {
    margin-bottom: 14px;
    font-size: 15px;
    color: #4a5762;
}

.recommendation-price-line + .compact-note {
    margin-top: 6px;
}

.recommendation-summary-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.recommendation-positive,
.recommendation-warning {
    padding: 14px;
    border-radius: 10px;
}

.recommendation-positive {
    background: #eaf6ed;
}

.recommendation-warning {
    background: #fff5e4;
}

.alternative-card {
    margin-top: 12px;
    padding: 11px 13px;
    background: white;
    border: 1px solid #dce4eb;
    border-radius: 9px;
}

.advisor-note {
    margin-top: 14px;
    padding: var(--space-4);
    background: #eef5ff;
    border-radius: var(--radius-md);
    /* Same reading-measure fix as .section-summary — this is the exact
       element MVP-6 measured at ~942px wide on desktop. */
    max-width: 70ch;
}


/* =========================================
   PRICE CHECK
   ========================================= */

.price-check-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.price-check-card {
    padding: 18px;
    border: 1px solid #dfe5e9;
    border-radius: 12px;
    background: #fafbfc;
}

.price-check-card h4 {
    margin: 10px 0 14px;
    font-size: 17px;
}

/* MVP-4: falls back to the neutral role by default (e.g. "Price unavailable",
   which getResearchDealQuality returns with no modifier class) so an
   unavailable assessment is never accidentally unstyled/blank — unavailable
   is a distinct state from negative, not the absence of one. */
.price-status {
    display: inline-block;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--status-neutral-text);
    background: var(--status-neutral-bg);
}

/* Great and Good Price were already effectively one visual tier (#dff4e5 vs
   the near-identical #e9f5e9) — the text label is what actually carries the
   distinction between them, per "status must never depend on color alone". */
.price-status.great,
.price-status.good {
    color: var(--status-positive-text);
    background: var(--status-positive-bg);
}

.price-status.fair {
    color: var(--status-neutral-text);
    background: var(--status-neutral-bg);
}

.price-status.high {
    color: var(--status-caution-text);
    background: var(--status-caution-bg);
}

.price-status.very-high {
    color: var(--status-attention-text);
    background: var(--status-attention-bg);
}

.price-status.neutral {
    color: var(--status-neutral-text);
    background: var(--status-neutral-bg);
}

.price-number-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.price-number-grid > div {
    padding: var(--space-3);
    background: white;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.price-number-grid span {
    display: block;
    margin-bottom: 4px;
    color: #74808a;
    font-size: 11px;
}

.price-number-grid strong {
    display: block;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.price-difference {
    margin: 14px 0;
    line-height: 1.5;
}

.market-range {
    padding: var(--space-3);
    background: white;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
}

.market-range span,
.market-range small {
    display: block;
    color: #6f7b85;
    font-size: 12px;
}

.market-range strong {
    display: block;
    margin: 4px 0;
}

.price-source {
    margin: 12px 0 0;
    color: #76818a;
    font-size: 12px;
    line-height: 1.45;
}


/* =========================================
   GLANCE TABLE
   ========================================= */

.compare-glance-table {
    border: 1px solid #dfe5e9;
    border-radius: 12px;
    overflow: hidden;
}

/* Small stacking gaps that used to be inline `style="margin-top:…"` in
   compare.js — moved to classes for style-src 'self'. */
.compare-stack-gap-sm {
    margin-top: 10px;
}

.compare-stack-gap {
    margin-top: 14px;
}

/* Vehicle count drives the glance grid. Set with a class (not an inline
   style) so Compare stays within style-src 'self'. Compare Cars allows
   two or three vehicles. */
.compare-glance-table {
    --vehicle-count: 2;
}

.compare-glance-cols-3 {
    --vehicle-count: 3;
}

.compare-glance-top,
.compare-glance-row {
    display: grid;
    grid-template-columns:
        130px
        repeat(
            var(--vehicle-count),
            minmax(0, 1fr)
        );
}

.compare-glance-top {
    background: #f6f8fa;
}

.compare-glance-header,
.compare-glance-cell,
.compare-row-label {
    padding: 12px;
}

.compare-glance-header {
    display: flex;
    flex-direction: column;
    gap: 3px;
    border-left: 1px solid #e4e8ec;
}

.compare-glance-header span,
.compare-glance-header small {
    color: #6f7a84;
    font-size: 11px;
}

.compare-glance-row {
    border-top: 1px solid #e6eaed;
}

.compare-row-label {
    display: flex;
    align-items: center;
    background: #fafbfc;
    font-size: 12px;
    font-weight: bold;
}

.compare-glance-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    border-left: 1px solid #e6eaed;
}

.compare-glance-cell small {
    padding: 4px 6px;
    border-radius: 999px;
    background: #e4f3e7;
    font-size: 10px;
    font-weight: bold;
}

.comparison-winner {
    background: #f1f8f3;
}

.mobile-row-label {
    display: none;
}

.shopper-footer {
    margin-top: 32px;
    padding: 20px 16px 28px;
    border-top: 1px solid #d9e2e8;
    color: #465866;
    font-size: 14px;
}

.shopper-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 22px;
    /* The "Your shared links" button is a 44px tap target next to 21px text links. With the default
       align-items: stretch the links hug the top of the 44px row while the button text sits in its middle,
       so on a wrapped row the button read about 12px lower than "Terms of Use". Centre every item on the row. */
    align-items: center;
}

.shopper-footer a {
    color: #315a73;
    line-height: 1.5;
    text-underline-offset: 3px;
}

/* The button must look like its sibling links (it inherited the footer text colour, no line-height and the
   default underline offset) and must not make its row taller than the links: the negative margin cancels the
   extra height of the 44px tap target (44 - 24 = 20, 10px each side) without shrinking the target itself. */
.shopper-footer .share-footer-link {
    color: #315a73;
    line-height: 1.5;
    text-underline-offset: 3px;
    margin-block: -10px;
}

.shopper-footer a:focus-visible {
    outline: 3px solid #f4b942;
    outline-offset: 3px;
    border-radius: 2px;
}

/* Car Guides discovery */
.guides {
    width: min(100% - 32px, 820px);
    margin: 0 auto;
    padding: 32px 0 60px;
    color: #3f4b55;
}

.guides nav {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.guides nav a {
    font-weight: 600;
    color: #315a73;
    text-underline-offset: 3px;
}

.guides h1 {
    font-size: clamp(28px, 5vw, 40px);
    margin: 16px 0 8px;
}

.guides > p {
    line-height: 1.6;
    max-width: 70ch;
}

.guides-make {
    margin: 22px 0;
}

.guides-make h2 {
    font-size: 20px;
    margin: 0 0 8px;
}

.guides-make ul {
    margin: 0;
    padding-left: 20px;
    line-height: 2;
}

.guides-make a,
.guides-research a {
    color: #1259a7;
}

.guides-empty {
    background: #f4f7f9;
    border: 1px solid #d9e2e8;
    border-radius: 8px;
    padding: 16px;
}

.guides-research {
    margin-top: 28px;
}

.guides a:focus-visible {
    outline: 3px solid #f4b942;
    outline-offset: 3px;
    border-radius: 2px;
}

.product-disclosure {
    margin: 18px 0;
    padding: 14px 16px;
    border: 1px solid #c8d8e4;
    border-radius: 10px;
    color: #253746;
    background: #f3f8fb;
    font-size: 14px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.product-disclosure strong {
    display: block;
    margin-bottom: 3px;
    color: #18364b;
}

.product-disclosure p,
.quick-decision-disclosure {
    margin: 0;
}

.quick-decision-disclosure {
    margin-top: 14px;
    color: #465866;
    font-size: 13px;
    line-height: 1.5;
}

.mobile-vehicle-label {
    display: none;
}


/* =========================================
   BEST USE
   ========================================= */

.best-use-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.best-use-card {
    padding: 15px;
    border: 1px solid #e0e5e9;
    border-radius: 11px;
    background: #fafbfc;
}

.best-use-card > span {
    display: block;
    margin-bottom: 6px;
    color: #68747e;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}

.best-use-card > strong {
    display: block;
}

.best-use-card > p {
    color: #67737d;
    font-size: 12px;
    line-height: 1.45;
}

.current-car-label {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 7px;
    border-radius: 999px;
    background: #e9edf1;
    font-size: 10px;
    font-weight: bold;
}

.best-purchase-option {
    margin-top: 16px;
    padding: 14px;
    border-radius: 9px;
    background: white;
    border: 1px solid #dce3e8;
}


/* =========================================
   SAFETY
   ========================================= */

.evidence-grid {
    display: grid;
    gap: 8px;
}

.evidence-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 15px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: #fafbfc;
}

.evidence-numbers {
    display: flex;
    gap: 22px;
}

.evidence-numbers > div {
    text-align: right;
}

.evidence-numbers span {
    display: block;
    font-size: 10px;
    color: #75808a;
}


/* =========================================
   DETAILS
   ========================================= */

.accordion {
    margin-top: var(--space-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: white;
}

/* MVP-3: the disclosure toggle (and any focusable evidence inside once
   open, e.g. a calculator input) needs a visible keyboard-focus ring, but
   this element's own `overflow: hidden` would clip one drawn on the
   <summary> child. An element's own overflow never clips its own outline,
   so :focus-within here — not :focus-visible on the summary — is what
   keeps the ring intact. */
.accordion:focus-within {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.accordion summary {
    list-style: none;
    cursor: pointer;
    padding: 14px;
    display: flex;
    justify-content: space-between;
    font-weight: bold;
}

.accordion summary::after {
    content: "+";
}

.accordion[open] summary::after {
    content: "−";
}

.accordion-content {
    padding: 14px;
    border-top: 1px solid #e4e8ec;
}

.detail-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.detail-item {
    padding: 10px;
    background: #f7f9fa;
    border-radius: 8px;
}

.detail-item span {
    display: block;
    margin-bottom: 3px;
    color: #74808a;
    font-size: 11px;
}


/* =========================================
   EXISTING SINGLE-CAR STYLES
   ========================================= */

.vehicle-heading h2 {
    margin: 4px 0 12px;
}

.vehicle-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vehicle-tags span {
    padding: 7px 10px;
    border-radius: 999px;
    background: #f1f4f7;
}

.vehicle-tags .primary-tag {
    background: #20252b;
    color: white;
}

.vehicle-tags .powertrain-tag-reconciled {
    background: #eaf1e9;
}

.powertrain-reconciliation-note {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f4f7f2;
    border-left: 3px solid #7a9b6e;
    font-size: 13px;
    line-height: 1.5;
    color: #465142;
}

.dashboard-section {
    margin-top: var(--space-section);
    padding-top: var(--space-section);
    border-top: 1px solid var(--border-subtle);
    /* IA-6: every top-level report section shares this class, and every
       nav-reachable section but Quick Decision (which has its own rule)
       is one of them — one shared declaration instead of scattering the
       same value across individual per-section overrides. Harmless on the
       sections nothing currently navigates to (e.g. Warranty): this only
       affects scroll-into-view positioning, never static layout. */
    scroll-margin-top: 24px;
}

/* IA-1 — lightweight organizational dividers ("Buying Decision", "Shopping
   Tools", "Vehicle Details"), not new cards. Reuses .dashboard-section's own
   top-border/spacing rhythm (same border color/weight) so they read as part
   of the existing report language, just with bolder, larger label text than
   a normal in-section .eyebrow to signal "new chapter" rather than "new
   section". The immediately-following .dashboard-section's own top divider
   is suppressed below so the group heading is the one border a shopper sees
   at that point, not a doubled-up gap. */
/* MVP-2: a group transition (Buying Decision / Shopping Tools / Vehicle
   Details) is deliberately one --space-group jump — bigger than the
   ordinary --space-section rhythm so it reads as a real boundary — plus a
   small --space-3 breathing gap before the heading text. Previously this
   stacked two full --space-section-sized gaps back to back (28px margin +
   28px padding) with no distinct meaning of its own; the heading plus this
   one named gap now carries the hierarchy instead. */
.report-group-heading {
    margin: var(--space-group) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 14px;
    font-weight: bold;
    color: #34404b;
}
.report-group-heading + .dashboard-section {
    margin-top: var(--space-4);
    padding-top: 0;
    border-top: none;
}

.problem-list {
    display: grid;
    gap: 14px;
}

/* IA-2 — Problems & Recalls progressive disclosure. Compact default-visible
   summary (main concern + next 1-2 recurring areas) reuses .eyebrow for its
   labels and .section-summary for its caveat text, so it needs only layout
   rules of its own. */
.problem-compact-summary {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.problem-compact-main,
.problem-compact-also {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin: 0;
}

/* Flattened owner-report example title row (complaints.js) — a plain
   title-left/meta-right layout that used to come for free from
   .accordion summary's own flex rule when this sat inside a <summary>.
   Deliberately its own class, not a reuse of .recall-summary-title:
   that class is still used unstyled inside each recall card's own
   <summary> (vehicle-data.js, untouched by IA-2), where it already
   gets its flex-item wrapping from the parent .accordion summary —
   adding flex here too would have squeezed the campaign number against
   the "View" toggle at narrow widths. */
.complaint-example-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.complaint-examples {
    display: grid;
    gap: 10px;
}

/* Recalls: the broad/conditional/configuration-mismatch groups are plain
   headings once inside "View recall details" (see vehicle-data.js) rather
   than their own nested accordion, so they just need spacing between
   groups when more than one is present. */
.recall-list-group + .recall-list-group {
    margin-top: 18px;
}

.problem-row {
    padding: 14px;
    background: #f7f9fa;
    border-radius: var(--radius-md);
}

.pattern-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.pattern-section {
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.complaint-context-note {
    padding: var(--space-4);
    background: #fff8e8;
    border-radius: var(--radius-md);
}

/* MVP-3: was #77828c (~3.92:1 on white — fails WCAG AA). --text-secondary
   is an existing Haki neutral already proven at ~6.3:1 on white and ~5.8:1
   even against the app's tinted backgrounds — comfortable margin above the
   4.5:1 floor without changing size, weight or visual hierarchy. */
.source-note {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.4;
}

.mpg-grid {
    display: grid;
    grid-template-columns:
        repeat(3, 1fr);
    gap: 10px;
}

.mpg-card {
    padding: 18px;
    text-align: center;
    background: #f5f7f9;
    border-radius: 12px;
}

.fuel-calculator {
    margin-top: 20px;
    padding: 18px;
    background: #f7f9fb;
    border-radius: 12px;
}

.fuel-input-grid,
.fuel-cost-grid {
    display: grid;
    grid-template-columns:
        repeat(3, 1fr);
    gap: 10px;
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (
    max-width: 900px
) {

    .compare-input-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .add-vehicle-card,
    #vehicle-3-card {
        grid-column:
            1 / -1;
    }

    .priority-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (
    max-width: 750px
) {

    .mode-button {
        min-height: 44px;
    }

    .recommendation-summary-grid,
    .price-check-grid,
    .best-use-grid,
    .detail-grid {
        grid-template-columns: 1fr;
    }

    .compare-glance-top {
        display: none;
    }

    .compare-glance-row {
        display: grid;
        grid-template-columns:
            repeat(
                var(--vehicle-count),
                minmax(0, 1fr)
            );
    }

    .compare-row-label {
        display: none;
    }

    .mobile-row-label {
        display: block;
        font-size: 10px;
        color: #75808a;
        text-transform: uppercase;
    }

    .compare-glance-cell {
        flex-wrap: wrap;
    }

    .mobile-vehicle-label {
        order: -1;
        display: block;
        flex: 0 0 100%;
        color: #4f5b65;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }
}


@media (
    max-width: 600px
) {

    .compare-input-grid {
        grid-template-columns: 1fr;
    }

    /* Local market: stack the explanation above the state control. */
    .market-location-section {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 8px;
    }

    .market-location-copy,
    .market-location-section > label,
    .market-location-section > select {
        grid-column: 1;
        grid-row: auto;
    }

    .market-location-section > select {
        width: 100%;
    }
}

/* Value and mileage stay side by side on every phone; only a genuinely narrow screen stacks them. */
@media (
    max-width: 360px
) {

    #compare-form .deal-input-row {
        grid-template-columns: 1fr;
    }

    .priority-grid {
        grid-template-columns: 1fr;
    }
}


@media (
    max-width: 520px
) {

    .app-shell {
        width: min(
            100% - 18px,
            1050px
        );
    }

    .vin-controls {
        flex-direction: column;
    }

    button {
        width: 100%;
    }

    .research-mode-selector {
        display: flex;
        width: 100%;
    }

    /* Equal flex:1 columns squeeze "Research One Car" onto two lines at
       320px. Tighter horizontal padding (the desktop 16px was never about
       legibility, just breathing room) buys back just enough width for it
       to stay on one line at the same 14px text and 44px tap-target height
       — scoped to this breakpoint only, so desktop keeps its original
       padding untouched. */
    .mode-button {
        flex: 1;
        padding: 10px 8px;
    }

    .compare-actions {
        flex-direction: column;
    }

    .compare-button {
        width: 100%;
    }

    .price-number-grid {
        grid-template-columns: 1fr;
    }

    .compare-glance-row {
        grid-template-columns: 1fr;
    }

    .compare-glance-cell {
        border-left: none;
        border-top: 1px solid #e0e5e9;
    }

    .mpg-grid,
    .fuel-input-grid,
    .fuel-cost-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   RESEARCH ONE CAR — FINAL SUMMARY
   ========================================= */

.section-nav {
    margin-top: 22px;
    padding: 10px;
    background: #f7f9fb;
    border: 1px solid #e1e6ea;
    border-radius: 12px;
}

/* The primary, always-visible destinations — the ones a shopper reaches for
   most (Summary, Price, Nearby Deals, Problems, Recalls, Cost to Own).
   Everything else lives behind "More sections" below so the list a shopper
   scans by default stays short. */
.section-nav-primary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.section-nav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 11px;
    /* IA-6: 44px at every width, not just <=750px — a nav link is a real
       tap target on any touch-capable device, desktop-sized ones included. */
    min-height: var(--control-height);
    color: #34404b;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    border-radius: var(--radius-sm);
}

.section-nav a:hover {
    background: white;
}

/* MVP-3: the report nav (and "More sections" below) had no explicit
   keyboard-focus treatment before this phase, unlike the masthead nav. */
.section-nav a:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

/* A native <details> disclosure — keyboard-operable and toggled by the
   browser with no JS required for open/close. research-report.js adds only
   a tiny enhancement: closing it again once a section link inside is
   followed, so it doesn't stay open and take up scroll space. */
.section-nav-more {
    margin-top: 8px;
}

.section-nav-more > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 11px;
    /* IA-6: same 44px-at-every-width reasoning as .section-nav a above. */
    min-height: var(--control-height);
    cursor: pointer;
    color: #34404b;
    font-size: 13px;
    font-weight: bold;
    border-radius: var(--radius-sm);
    background: white;
}

.section-nav-more > summary:hover {
    background: #eef2f5;
}

.section-nav-more > summary:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.section-nav-more[open] > summary {
    background: #eef2f5;
}

/* IA-6: applyNavigationFocusTargets (research-report.js) gives every nav
   destination tabindex="-1" so focus can land there after a jump. That
   should only ever be visible to keyboard/assistive-tech users — a mouse
   click landing here should not show a focus ring. :focus-visible already
   makes this distinction based on the most recent input modality in every
   evergreen browser, so this only needs to opt back OUT of the outline for
   the non-focus-visible (mouse-triggered) case. */
[tabindex="-1"]:focus:not(:focus-visible) {
    outline: none;
}

.section-nav-more-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.nav-count {
    min-width: 20px;
    padding: 2px 6px;
    text-align: center;
    border-radius: 999px;
    background: #e8edf2;
    font-size: 10px;
}

.quick-trim-message {
    margin: 10px 0 0;
    color: #65717b;
    font-size: 13px;
}

.safe-badge {
    background: #dff4e5;
}

.warning-badge {
    background: #fff1d8;
}

.trim-confidence-note {
    margin-top: 12px;
}

.trim-confidence-note p {
    margin-bottom: 0;
    line-height: 1.5;
}


/* =========================================
   RESEARCH ONE CAR — TRIM RESOLUTION
   ========================================= */

.trim-resolution-card {
    margin-top: 20px;
    padding: 18px;
    border: 1px solid #d9e1e7;
    border-radius: 12px;
    background: #fbfcfd;
}

.trim-resolution-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 10px;
}

.trim-resolution-heading h3 {
    margin: 5px 0 0;
    font-size: 20px;
}

.trim-resolution-help {
    margin: 0 0 14px;
    color: #5f6b76;
    line-height: 1.5;
}

.trim-shopper-selection {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: #eef5f8;
    color: #34434e;
}

.trim-shopper-selection p {
    margin: 5px 0 0;
    line-height: 1.5;
}

.trim-resolution-card label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: bold;
}

.trim-resolution-card select,
.trim-resolution-card input {
    width: 100%;
    min-width: 0;
    min-height: 44px;
}

.market-specificity-note {
    margin: 16px 0 0;
    padding: 12px 14px;
    border-left: 4px solid #5d7f91;
    border-radius: 8px;
    background: #f2f6f8;
    color: #34434e;
    line-height: 1.5;
}

.trim-manual-wrap {
    margin-top: 12px;
}

.trim-resolution-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.trim-resolution-actions button {
    width: auto;
}

.secondary-button {
    background: #e8edf2;
    color: #26323c;
    border: 1px solid #cfd7de;
}

.secondary-button:hover {
    background: #dde4ea;
}

/* MVP-3: .secondary-button is also used on plain <a> elements (e.g. "View
   Full Research"), which the bare button:focus-visible rule above can't
   reach. */
.secondary-button:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.trim-resolution-error {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff1f1;
    color: #8b2e2e;
    font-size: 13px;
    font-weight: bold;
}

@media (max-width: 520px) {
    .trim-resolution-heading {
        flex-direction: column;
    }

    .trim-resolution-actions {
        flex-direction: column;
    }

    .trim-resolution-actions button {
        width: 100%;
    }
}

@media (max-width: 360px) {
    #vehicle-results .vehicle-card {
        padding: 18px;
    }

    #vehicle-results .section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }

    #vehicle-results .section-heading > *,
    #vehicle-results .section-heading > div,
    #vehicle-results .section-heading h2 {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    #vehicle-results .status-badge {
        align-self: flex-start;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* =========================================
   TSB LINKAGE
   ========================================= */

.tsb-theme-matches {
    grid-column: 1 / -1;
    margin: 0 0 14px;
    padding: 14px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: #f7fafc;
}

.tsb-match-card {
    margin-top: 10px;
    padding: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: #fff;
}

.tsb-match-card p {
    margin: 7px 0 0;
}

.tsb-match-card small {
    display: block;
    margin-top: 8px;
    color: #596772;
}

.tsb-match-heading {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

@media (max-width: 520px) {
    .tsb-match-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
}

/* =========================================
   RESEARCH ONE CAR — COST TO OWN
   ========================================= */

.ownership-cost-section > p {
    color: #56616b;
    line-height: 1.55;
}

/* IA-3 — compact decision-level summary (fuel/energy, maintenance,
   financing headline). Deliberately NOT reusing the dormant
   .ownership-cost-snapshot/.ownership-snapshot-item/.ownership-details
   rules below (see the "COST TO OWN — COMPACT DECISION DESIGN" block) —
   those were an earlier, never-wired-up redesign: a 4-column bordered-
   card grid with hover-link styling meant for clickable tiles, heavier
   than the plain-text compact language IA-2 already established for
   Problems/Recalls. This reuses that IA-2 language (.eyebrow label,
   plain stacked text) instead, and reuses .accordion/.accordion-content
   for "View cost details" so all three Buying Decision disclosures look
   the same. */
.ownership-compact-summary {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 14px 0;
}

.ownership-compact-item {
    margin: 0;
}

.ownership-compact-item > strong {
    display: block;
    margin-top: 2px;
    font-size: 15px;
}

.ownership-compact-item > small {
    display: block;
    margin-top: 3px;
    color: #68747e;
    font-size: 12px;
    line-height: 1.5;
}

.ownership-cost-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.ownership-cost-item {
    padding: 16px;
    border: 1px solid #dfe5e9;
    border-radius: 11px;
    background: #fafbfc;
}

.ownership-cost-item > span {
    display: block;
    margin-bottom: 6px;
    color: #6d7882;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ownership-cost-item > strong {
    display: block;
    margin-bottom: 8px;
    font-size: 17px;
}

.ownership-cost-item > p {
    margin: 0;
    color: #66727d;
    font-size: 13px;
    line-height: 1.5;
}

.research-another-car-wrap {
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid var(--border-subtle);
}

.research-another-car-wrap .primary-button {
    width: auto;
}


/* =========================================
   RESEARCH ONE CAR — BETA FEEDBACK
   ========================================= */

.research-feedback-card {
    padding: var(--space-5);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: #f8fafb;
}

.research-feedback-card h2 {
    margin: 6px 0 14px;
    font-size: 21px;
}

.research-feedback-choices,
.research-feedback-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.research-feedback-choice {
    min-width: 100px;
    min-height: 44px;
}

.research-feedback-choice.selected {
    border-color: #334a5c;
    background: #dfe9ef;
    color: #172733;
    box-shadow: inset 0 0 0 1px #334a5c;
}

.feedback-selected-indicator {
    font-weight: 700;
}

.research-feedback-comment {
    margin-top: 18px;
}

.research-feedback-comment > label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.research-feedback-comment textarea {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 104px;
    padding: 12px 14px;
    resize: vertical;
    border: 1px solid #cfd6dc;
    border-radius: var(--radius-sm);
    background: white;
    color: #1f2933;
    font: inherit;
    font-size: 16px;
    line-height: 1.45;
}

.research-feedback-guidance {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 7px;
    color: #5f6b76;
    font-size: 12px;
    line-height: 1.4;
}

.research-feedback-actions {
    margin-top: 14px;
}

.research-feedback-actions button {
    min-height: 44px;
}

.research-feedback-thanks {
    margin: 14px 0 0;
    color: #2d6140;
    font-weight: 700;
}

@media (max-width: 750px) {
    .ownership-cost-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .research-another-car-wrap .primary-button {
        width: 100%;
    }

    .research-feedback-actions button {
        flex: 1 1 150px;
    }
}

@media (max-width: 360px) {
    .research-feedback-card {
        padding: 16px;
    }

    .research-feedback-choice,
    .research-feedback-actions button {
        width: 100%;
    }

    .research-feedback-guidance {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
}


/* =========================================
   QUICK DECISION — MOBILE-FIRST MVP #23A-B
   Presentation only. Decision logic remains
   in research-report.js.
   ========================================= */

.quick-decision-card {
    margin-top: 22px;
    padding: var(--space-5);
    border: 1px solid #d9e1e7;
    border-radius: var(--radius-md);
    background: #fbfcfd;
    /* IA-1: now the primary nav "Summary" anchor target — same
       scroll-margin-top convention as every other anchor-jump target in
       this report (e.g. .ask-haki-section), so the heading isn't flush
       against the viewport edge after a jump. */
    scroll-margin-top: 24px;
}

.quick-decision-card.quick-decision-good {
    border-color: var(--status-positive-border);
    background: #f7fcf8;
}

.quick-decision-card.quick-decision-warning {
    border-color: var(--status-caution-border);
    background: #fffaf0;
}

/* MVP-4: no longer a flex row — the verdict badge that used to sit here
   moved into its own dedicated .quick-decision-verdict block below, so the
   title only ever has the one (identity) child now. */
.quick-decision-title {
    margin-top: 5px;
}

.quick-decision-title h2 {
    margin: 0 0 6px;
    font-size: clamp(24px, 5vw, 28px);
    line-height: 1.15;
}

.quick-decision-title p {
    margin: 0;
    color: #66727d;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
}

/* MVP-4: the verdict is the single most important fact in the card, so it
   gets its own labeled block — larger than an ordinary 13px .status-badge —
   positioned right after vehicle identity and above the price assessment,
   which is what makes it outrank price per the MVP-4 hierarchy requirement. */
.quick-decision-verdict {
    margin-top: var(--space-4);
}

.quick-decision-verdict .eyebrow {
    margin-bottom: var(--space-2);
}

.quick-decision-verdict-badge {
    display: inline-block;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3;
    white-space: normal;
}

.quick-decision-good .status-badge {
    color: var(--status-positive-text);
    background: var(--status-positive-bg);
}

.quick-decision-warning .status-badge {
    color: var(--status-caution-text);
    background: var(--status-caution-bg);
}

.quick-decision-price {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 17px;
    padding: 14px 15px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: white;
}

.quick-decision-price strong {
    flex: 0 0 auto;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.quick-decision-price span {
    color: #5f6b76;
    font-size: 13px;
    line-height: 1.4;
}

/* MVP-4: one coherent decision-facts surface (Main concern / Recalls / Fuel
   economy) replacing three separate equal-weight mini-cards — same content,
   now rows in one bordered list with dividers instead of three boxes. Reads
   as one summary at every width; no responsive grid needed any more. */
.quick-decision-facts {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: white;
    overflow: hidden;
}

.quick-decision-facts li {
    padding: 12px 14px;
    color: #66727d;
    font-size: 13px;
    line-height: 1.45;
}

.quick-decision-facts li + li {
    border-top: 1px solid var(--border-subtle);
}

.quick-decision-facts strong {
    display: block;
    margin-bottom: 2px;
    color: #26323c;
    font-size: 13px;
}

/* Desktop Density Pass: the generic .advisor-note rule caps prose at 70ch
   (~623px) computed off this element's own INHERITED 16px font, sized for
   a wider, full-measure section elsewhere in the report (see that rule's
   own comment). Inside Quick Decision the callout's real text renders at
   13px, and its actual container is already width-bounded — .app-shell
   hard-caps the whole report at 1050px regardless of viewport, so this
   card's content width never exceeds ~1000px even at 1440px+ screens.
   That outer cap IS the readable-width constraint here; a second, narrower
   ch-based cap on top of it only wasted space and forced extra wrap lines.
   Filling the card's own width matches how .quick-decision-facts and
   .quick-decision-price already behave (no cap of their own). */
.quick-decision-card .advisor-note {
    margin-top: 14px;
    max-width: 100%;
}

.quick-decision-card .advisor-note > strong {
    display: block;
    margin-bottom: 5px;
}

.quick-decision-card .advisor-note p {
    margin: 0;
    color: #53606b;
    font-size: 13px;
    line-height: 1.5;
}

.quick-decision-details {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    margin-top: 14px;
    padding: 11px 14px;
    /* MVP-3: was ~39px rendered — below the 44px floor every other report
       control holds to. */
    min-height: var(--control-height);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
}

@media (max-width: 750px) {
    .quick-decision-price {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
}

@media (max-width: 520px) {
    .quick-decision-card {
        margin-top: var(--space-4);
        padding: var(--space-4);
    }

    .quick-decision-price {
        margin-top: 14px;
        padding: 12px;
    }

    .quick-decision-facts li {
        padding: 10px 12px;
    }

    .quick-decision-details {
        width: 100%;
    }
}


/* =========================================
   NEXT STEPS
   Post-decision commercial-intent shortcut layer, immediately after Quick
   Decision. Reuses the same tokens as everything else in the report —
   --space-*/--radius-*/--border-subtle/--focus-ring/--control-height and
   the MVP-4 neutral status color, nothing new introduced. Two columns at
   every width by default, matching the Ask Haki suggestions grid's own
   precedent (text wraps rather than needing a narrower single column).
   ========================================= */

.next-steps-section .section-summary {
    margin-top: 4px;
    margin-bottom: 0;
}

.next-steps-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.next-step-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: var(--control-height);
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: #fff;
    color: #1f2933;
    text-decoration: none;
}

.next-step-card:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.next-step-title {
    font-weight: 700;
    font-size: 15px;
}

/* Insurance/Financing are the two most prominent next actions — a slightly
   larger title is enough to lead the eye there first without making
   Inspection/Protection look broken or unavailable; all four stay equally
   real, equally sized touch targets. */
.next-step-primary {
    background: #fafbfc;
}

.next-step-primary .next-step-title {
    font-size: 16px;
}

.next-step-description {
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-secondary);
}

.next-step-status {
    display: inline-block;
    width: fit-content;
    margin-top: 6px;
    padding: 3px 10px;
    border: 1px solid var(--status-neutral-border);
    border-radius: var(--radius-sm);
    background: var(--status-neutral-bg);
    color: var(--status-neutral-text);
    font-size: 12px;
    font-weight: 700;
}

.next-steps-disclosure {
    margin-top: var(--space-4);
}

.next-steps-section .quick-decision-details {
    margin-top: var(--space-3);
}


/* =========================================
   DETAILS / ACCORDION MARKER NORMALIZATION
   Prevent native + custom duplicate markers
   ========================================= */

details > summary {
    list-style: none;
}

details > summary::-webkit-details-marker {
    display: none;
}

details > summary::marker {
    content: "";
}


/* =========================================
   COST TO OWN — COMPACT DECISION DESIGN
   ========================================= */

.ownership-cost-section {
    position: relative;
}

.ownership-cost-section > .section-heading {
    margin-bottom: 16px;
}

.ownership-cost-snapshot {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.ownership-snapshot-item {
    min-width: 0;
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: #fafbfc;
    color: #1f2933;
    text-decoration: none;
}

.ownership-snapshot-item > span,
.ownership-cost-item > span {
    display: block;
    margin-bottom: 6px;
    color: #6d7882;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ownership-snapshot-item > strong {
    display: block;
    line-height: 1.3;
    font-size: 16px;
}

.ownership-snapshot-item > small {
    display: block;
    margin-top: 6px;
    color: #75808a;
    font-size: 11px;
    line-height: 1.4;
}

.ownership-snapshot-link {
    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        transform 0.15s ease;
}

.ownership-snapshot-link:hover {
    background: #f4f8fc;
    border-color: #bccbd8;
    transform: translateY(-1px);
}

.ownership-details {
    margin-top: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: white;
    overflow: hidden;
}

/* MVP-3: same overflow-clips-outline reasoning as .accordion above. */
.ownership-details:focus-within {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.ownership-details > summary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 46px 14px 15px;
    cursor: pointer;
    color: #34404b;
    font-size: 13px;
    font-weight: 700;
}

.ownership-details > summary::after {
    content: "+";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eef2f5;
    color: #34404b;
    font-size: 18px;
    line-height: 1;
}

.ownership-details[open] > summary::after {
    content: "−";
}

.ownership-details-content {
    padding: 0 15px 16px;
    border-top: 1px solid #e6eaed;
}

.ownership-details-content > p:first-child {
    margin: 14px 0;
    color: #68747e;
    font-size: 13px;
    line-height: 1.5;
}

.ownership-cost-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.ownership-cost-item {
    min-width: 0;
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: #fafbfc;
}

.ownership-cost-item > strong {
    display: block;
    margin-bottom: 7px;
    font-size: 15px;
    line-height: 1.35;
}

.ownership-cost-item > p {
    margin: 0;
    color: #68747e;
    font-size: 12px;
    line-height: 1.5;
}

.ownership-calculator {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.ownership-calculator label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #4f5b65;
    font-size: 12px;
    font-weight: 700;
}

.ownership-calculator input,
.ownership-calculator select {
    width: 100%;
}

.ownership-calculator .primary-button {
    grid-column: 1 / -1;
}

.ownership-money-input,
.ownership-percent-input {
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid #cfd6dc;
    border-radius: var(--radius-sm);
    background: white;
}

/* MVP-3: same wrapper-clips-outline reasoning as .money-input/.mileage-input
   above — these Cost to Own calculator fields have the identical inner-input
   `outline: 0` pattern and need the identical fix. */
.ownership-money-input:focus-within,
.ownership-percent-input:focus-within {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.ownership-money-input > span {
    padding-left: 12px;
    color: #65717b;
}

.ownership-percent-input > span {
    padding-right: 12px;
    color: #65717b;
}

.ownership-money-input input,
.ownership-percent-input input {
    border: 0;
    border-radius: 0;
    outline: 0;
}

.ownership-fuel-result,
.ownership-finance-result {
    margin-top: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    background: white;
    border: 1px solid var(--border-subtle);
}

.ownership-fuel-result > p,
.ownership-finance-result > p {
    margin: 0;
    color: #68747e;
    font-size: 12px;
    line-height: 1.5;
}

.ownership-fuel-summary,
.ownership-finance-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.ownership-fuel-summary > div,
.ownership-finance-summary > div {
    padding: 10px;
    border-radius: var(--radius-sm);
    background: #f7f9fa;
}

.ownership-fuel-summary span,
.ownership-finance-summary span {
    display: block;
    margin-bottom: 4px;
    color: #75808a;
    font-size: 10px;
}

.ownership-fuel-summary strong,
.ownership-finance-summary strong {
    display: block;
    font-size: 16px;
}

.ownership-fuel-details {
    margin-top: 10px;
}

.ownership-fuel-details p {
    margin: 5px 0 0;
    color: #68747e;
    font-size: 12px;
    line-height: 1.5;
}

.ownership-finance-price {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: white;
    border: 1px solid var(--border-subtle);
}

.ownership-finance-price span {
    color: #68747e;
    font-size: 12px;
}

.ownership-finance-price strong {
    font-size: 13px;
}

/* =========================================
   VEHICLE HISTORY
   ========================================= */

.vehicle-history-section {
    border: 1px solid #cfdde6;
    background: linear-gradient(145deg, #f9fcfe 0%, #f1f7fa 100%);
}

.vehicle-history-intro {
    max-width: 780px;
}

/* IA-3 — compact live/coming-soon status line, shown above "View history
   details". Reuses the .eyebrow label convention already established for
   compact summaries elsewhere in the report. */
.vehicle-history-partner-status {
    margin: 14px 0 0;
}

.vehicle-history-partner-status > strong {
    display: block;
    margin-top: 2px;
    font-size: 15px;
}

.vehicle-history-details-disclosure {
    margin-top: 14px;
}

.vehicle-history-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.vehicle-history-grid span {
    padding: 12px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: #fff;
    color: #344c5a;
    font-size: 13px;
    font-weight: 600;
}

.vehicle-history-action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 18px;
}

.vehicle-history-button {
    min-width: 200px;
}

.vehicle-history-button:disabled {
    cursor: not-allowed;
    opacity: 0.72;
}

.vehicle-history-status {
    color: #61717c;
    line-height: 1.4;
}

.vehicle-history-disclosure {
    margin-top: 16px;
}

@media (max-width: 750px) {
    .vehicle-history-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   SHOPPING TOOLS — INSURANCE / FINANCING / INSPECTION / WARRANTY

   IA-5: four first-class, individually compact sections replacing the old
   combined "Shopper Services" wrapper (see git history for that design —
   its grid/card classes are retired along with it). Insurance, Financing
   and Warranty intentionally have no progressive disclosure — each is
   just a status line and a CTA, and wrapping that in a <details> would be
   an empty panel added only for visual symmetry with Inspection, which
   the IA-5 brief explicitly said not to do. Inspection's own real,
   evidence-dependent checklist keeps its own <details> (reuses
   .accordion/.accordion-content, the same convention as Problems/Recalls/
   Cost to Own/Vehicle History).
   ========================================= */

.shopper-service-status {
    color: #61717c;
    line-height: 1.4;
}

.shopping-tool-action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 16px;
}

.shopping-tool-action .primary-button {
    min-width: 190px;
}

.shopping-tool-action .primary-button:disabled {
    cursor: not-allowed;
    opacity: 0.72;
}

.inspection-checklist-disclosure {
    margin-top: 14px;
}

@media (max-width: 750px) {
    .ownership-cost-snapshot {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ownership-cost-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .ownership-cost-section > .section-heading {
        align-items: flex-start;
    }

    .ownership-cost-section > .section-heading .status-badge {
        font-size: 10px;
        padding: 5px 8px;
    }

    .ownership-cost-snapshot {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .ownership-snapshot-item {
        padding: 12px;
    }

    .ownership-snapshot-item > strong {
        font-size: 14px;
    }

    .ownership-snapshot-item > small {
        font-size: 10px;
    }

    .ownership-details > summary {
        padding-top: 13px;
        padding-bottom: 13px;
    }

    .ownership-details-content {
        padding-left: 10px;
        padding-right: 10px;
    }

    .ownership-cost-item {
        padding: 13px;
    }

    .ownership-calculator,
    .ownership-fuel-summary,
    .ownership-finance-summary {
        grid-template-columns: 1fr;
    }

    .ownership-calculator .primary-button {
        grid-column: auto;
    }
}


/* =========================================
   RESEARCH ONE CAR — SAME CAR, BETTER DEALS NEARBY
   ========================================= */

.better-deals-section {
    overflow-wrap: anywhere;
}

.better-deals-unavailable {
    padding: 16px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: #f7f9fb;
}

.better-deals-unavailable strong {
    display: block;
    margin-bottom: 6px;
}

.better-deals-unavailable p {
    margin: 0;
    color: #56616b;
    line-height: 1.55;
}

.better-deals-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: #f7f9fb;
}

/* Phase 9A — Utah private beta access-code form */
.better-deals-beta-access {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: #f7f9fb;
}

.better-deals-beta-access-lead {
    margin: 0;
    color: #56616b;
    line-height: 1.55;
}

.better-deals-beta-access-lead strong {
    color: #2b3640;
}

.better-deals-beta-submit {
    align-self: flex-start;
}

.better-deals-beta-access-status {
    margin: 0;
    color: #8a4b2b;
    line-height: 1.5;
    font-size: 14px;
}

.better-deals-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.better-deals-field > label,
.better-deals-condition legend {
    font-size: 13px;
    font-weight: bold;
    color: #3a444d;
}

.better-deals-field-help {
    font-size: 12px;
    color: #77828c;
}

.better-deals-condition {
    grid-column: 1 / -1;
    display: flex;
    flex-flow: row wrap;
    gap: 8px 16px;
    align-items: center;
}

.better-deals-condition-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.better-deals-condition-option input {
    flex: none;
    width: auto;
    min-height: 20px;
}

.better-deals-submit {
    grid-column: 1 / -1;
    width: auto;
    justify-self: start;
}

.better-deals-submit:disabled {
    opacity: 0.65;
    cursor: progress;
}

.better-deals-status {
    margin: 14px 0 0;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: #eef3f8;
    font-size: 14px;
    font-weight: bold;
    color: #2b3640;
}

.better-deals-results {
    margin-top: 16px;
}

.better-deals-outcome-headline {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.55;
    color: #2b3640;
}

.better-deals-price-change-note,
.better-deals-tradeoffs-note {
    margin: 0 0 14px;
    font-size: 13px;
    color: #66727d;
    line-height: 1.5;
}

.better-deals-card-list {
    display: grid;
    gap: 16px;
}

.better-deal-card {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 16px;
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: white;
}

.better-deal-card-tradeoff {
    background: #fbfaf6;
    border-color: #e6e0cf;
}

.better-deal-photo {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #eef1f4;
}

.better-deal-photo-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.better-deal-photo-fallback[hidden] {
    display: none;
}

.better-deal-photo-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #8a949d;
    background:
        repeating-linear-gradient(
            -45deg,
            #eef1f4,
            #eef1f4 8px,
            #e6eaee 8px,
            #e6eaee 16px
        );
}

.better-deal-body {
    min-width: 0;
}

.better-deal-name {
    margin: 0 0 2px;
    font-size: 16px;
}

.better-deal-condition {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6d7882;
}

.better-deal-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    margin: 0 0 12px;
}

.better-deal-fact {
    margin: 0;
    min-width: 0;
}

.better-deal-fact dt {
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #7c868f;
}

.better-deal-fact dd {
    margin: 2px 0 0;
    font-size: 14px;
    color: #2b3640;
    overflow-wrap: anywhere;
}

.better-deal-price-seen {
    margin: 0 0 10px;
    font-size: 12px;
    color: #77828c;
}

.better-deal-statements {
    margin: 0 0 12px;
    padding-left: 18px;
    display: grid;
    gap: 4px;
    font-size: 13px;
    color: #56616b;
    line-height: 1.5;
}

.better-deal-tradeoff-note {
    margin: 0 0 12px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f4efe1;
    font-size: 13px;
    font-weight: bold;
    color: #6b5a2c;
}

.better-deal-analysis-tag {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64717d;
}

.better-deal-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    margin-top: 4px;
    padding: 10px 16px;
    min-height: var(--control-height);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
}

.better-deal-link:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.better-deal-no-link {
    margin: 0;
    font-size: 13px;
    color: #77828c;
}

.better-deals-tradeoffs {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px dashed #d5dce2;
}

.better-deals-tradeoffs-heading {
    margin: 0 0 6px;
    font-size: 16px;
}

.better-deals-error {
    box-shadow: none;
    border: 1px solid #edc9c9;
}

.better-deals-error strong {
    display: block;
    margin-bottom: 6px;
}

.better-deals-error p {
    margin: 0 0 6px;
    line-height: 1.55;
}

.better-deals-error-reassure {
    font-size: 13px;
    color: #7a5b5b;
}

.better-deals-disclosure {
    margin-top: 16px;
}

@media (max-width: 750px) {

    .better-deals-controls {
        grid-template-columns: 1fr;
    }

    .better-deals-submit {
        width: 100%;
        justify-self: stretch;
    }

    .better-deal-card {
        grid-template-columns: 1fr;
    }

    .better-deal-photo {
        max-width: 260px;
    }

    .better-deals-submit,
    .better-deal-link {
        min-height: 44px;
    }
}

@media (max-width: 480px) {

    .better-deal-facts {
        grid-template-columns: 1fr;
    }
}


/* =========================================
   MODEL-YEAR GUIDE PAGES  (rendered by model-year-page.js)

   Moved here verbatim from an inline <style> block so the guide pages
   comply with a strict Content-Security-Policy (style-src 'self').
   All selectors are scoped under .pilot and do not affect the app shell.
   ========================================= */

.pilot {
    max-width: 1100px;
    margin: auto;
    padding: 24px 16px 48px;
}

.pilot section {
    background: white;
    padding: 24px;
    border: 1px solid #dce2e8;
    border-radius: 12px;
    margin: 20px 0;
}

.pilot p {
    line-height: 1.65;
    max-width: 80ch;
}

.pilot .notice {
    background: #fff5dc;
    padding: 16px;
    border-left: 4px solid #a86b00;
}

.pilot .table-wrap {
    overflow-x: auto;
}

.pilot table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.pilot th,
.pilot td {
    text-align: left;
    padding: 12px;
    border-bottom: 1px solid #dce2e8;
    min-width: 75px;
}

.pilot th:first-child {
    min-width: 170px;
}

.pilot li {
    margin: 12px 0;
    overflow-wrap: anywhere;
}

.pilot nav {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.pilot a {
    color: #1259a7;
}

.pilot h1 {
    font-size: clamp(30px, 5vw, 44px);
}

.pilot .crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    list-style: none;
    padding: 0;
    margin: 0 0 4px;
    font-size: 14px;
}

.pilot .crumbs li {
    display: flex;
    gap: 4px 8px;
}

.pilot .crumbs li + li::before {
    content: "\203A";
    color: #8a97a3;
}

.pilot h3 {
    margin: 20px 0 8px;
    font-size: 18px;
}

.pilot .cap-qual {
    color: #4a5763;
    font-size: 14px;
}


/* =========================================
   BETTER DEALS — VARIANT-SAFE MATCHING (Phase 6b)
   ========================================= */

.better-deals-matched-on {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #eef3f8;
    font-size: 13px;
    line-height: 1.5;
    color: #2b3640;
}

.better-deals-matched-on-label {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
    color: #5c6b78;
    margin-right: 6px;
}

.better-deal-config {
    margin: 0 0 10px;
    font-size: 13px;
    color: #3a444d;
}

.better-deal-config-label {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 10px;
    color: #7c868f;
    margin-right: 6px;
}

.better-deals-unverified {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px dashed #d5dce2;
}

.better-deals-unverified-heading {
    margin: 0 0 6px;
    font-size: 16px;
}

.better-deals-unverified-note {
    margin: 0 0 14px;
    font-size: 13px;
    color: #66727d;
    line-height: 1.5;
}

.better-deal-card-unverified {
    background: #f6f7f9;
    border-color: #dde3e9;
}

.better-deal-unverified-note {
    margin: 0 0 12px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #eef1f4;
    font-size: 13px;
    color: #4a5763;
    line-height: 1.5;
}

.fuel-source-note {
    color: #66727d;
    font-size: 12px;
}


/* =========================================
   ABOUT PAGE

   Reuses .app-shell / .site-header / .dashboard-section / .best-use-card /
   .market-specificity-note as-is. The only new rules are (a) a prose-link
   color for this wrapper, matching the .guides/.pilot convention of scoping
   link color per page family, and (b) an anchor-styled CTA using the same
   visual tokens as the global `button` rule (dark fill, white text, 9px
   radius, bold) since the CTA must be a real link, not a <button>.
   ========================================= */

.about-page p a,
.about-page li a {
    color: #1259a7;
}

.about-page a:focus-visible {
    outline: 3px solid #f4b942;
    outline-offset: 3px;
    border-radius: 2px;
}

a.about-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 18px;
    padding: 13px 22px;
    border-radius: 9px;
    background: #20252b;
    color: white;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
}

a.about-cta:hover {
    opacity: 0.9;
}

@media (max-width: 520px) {
    a.about-cta {
        width: 100%;
    }
}

/* Ask Haki — a section of the report, not a boxed-card feature bolted onto
   it: reuses .dashboard-section's lightweight top-border/spacing treatment
   (IA-6: including its scroll-margin-top now — see .dashboard-section),
   the exact same pattern Market Price and Nearby Deals already use, so
   Ask Haki reads as one more section of Haki's own report rather than a
   heavier, separately-boxed control inserted between them. */
.ask-haki-section {
    min-width: 0;
}
.ask-haki-section h3 { margin: 0 0 6px; font-size: 1.15rem; color: #2b3640; }
.ask-haki-intro { margin: 0 0 14px; color: #56616b; font-size: .9rem; line-height: 1.5; }
/* Always visible while the panel is open (it sits outside the form, which is hidden once an answer is shown). */
.ask-haki-notice { margin: 0 0 14px; padding: 8px 10px; border: 1px solid #e6dba8; border-left: 4px solid #b58a00; border-radius: 8px; background: #fffbea; color: #4a3d00; font-size: .85rem; font-weight: 600; line-height: 1.45; }
/* Conversational suggestions: compact example-question chips that flow and
   wrap naturally (two share a row when their real text fits, otherwise they
   stack) — not a fixed grid of equal cards, which read as a feature menu
   rather than "things you could ask Haki". Nothing here assumes a count or
   a string, so any 1-4 server-generated suggestions lay out correctly. */
.ask-haki-suggestions { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 10px; }
.ask-haki-suggestions:empty { display: none; }
.ask-haki-suggestions button, .ask-haki-secondary {
    background: #fff; color: #315a73; border: 1px solid #cfd6dc;
    border-radius: 8px; padding: 8px 12px; min-height: 44px;
    font: inherit; font-size: .875rem; text-align: left; cursor: pointer;
    max-width: 100%; overflow-wrap: anywhere;
}
.ask-haki-suggestions button {
    width: auto;
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 22px;
    border-color: var(--border-subtle);
    background: #eef5ff;
    line-height: 1.35;
}
/* Visual Polish: this selector previously read `.ask-haki-section label`,
   which matched nothing — buildAskHakiSection() (the in-report invite) has
   no <label>, and the real composer lives in #ask-haki-panel-body, outside
   .ask-haki-section entirely (see MVP-7's restructure). "Ask about this
   car" was rendering completely unstyled (inline, 400 weight, no spacing),
   which was a real contributor to the "form inside a popup" feel. Restyled
   with the report's own established .eyebrow voice (same tokens Quick
   Decision/Next Steps already use for a label sitting above content) so
   the composer reads as part of one design system instead of a bare
   HTML label. */
.ask-haki-panel-body label {
    display: block;
    margin: 0 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 12px;
    font-weight: bold;
    color: var(--text-secondary);
}
.ask-haki-controls { display: flex; gap: 8px; align-items: stretch; max-width: 520px; }
.ask-haki-controls input {
    /* Visual Polish: was #9aa8b3 — noticeably darker/heavier than every
       other text input in the app (VIN, price, mileage, ZIP all use
       #cfd6dc). Matching that existing color removes one of the three
       stacked visual weights (panel border / input border / focus ring)
       the composer previously piled up, and makes Ask Haki's own input
       consistent with the rest of Haki's design system instead of
       standing out as a heavier, generic form field. */
    width: 100%; min-width: 0; flex: 1; min-height: 44px;
    border: 1px solid #cfd6dc; border-radius: 8px; padding: 10px 12px;
    background: #fff; color: #1f2933; font: inherit; font-size: 16px;
}
.ask-haki-controls .primary-button { width: auto; min-width: 64px; min-height: 44px; margin: 0; padding: 10px 16px; flex: 0 0 auto; }
.ask-haki-section button:disabled { opacity: .55; cursor: default; }
.ask-haki-section input:focus-visible, .ask-haki-section button:focus-visible {
    /* MVP-3: this is the exact treatment now shared via --focus-ring
       (Ask Haki already had it first; the token formalizes it, no visual
       change). */
    outline: var(--focus-ring); outline-offset: var(--focus-ring-offset);
}
.ask-haki-status { font-size: .9rem; line-height: 1.5; color: #56616b; margin: 10px 0 0; overflow-wrap: anywhere; }
.ask-haki-status:empty { display: none; }
.ask-haki-response { border-top: 1px solid #dbe2e7; margin-top: 16px; padding-top: 14px; line-height: 1.6; overflow-wrap: anywhere; }
/* Visual Polish: "Haki" / "Keep in mind" reuse the same .eyebrow voice as
   the composer label above and Quick Decision/Next Steps elsewhere in the
   report — one consistent small-caps label treatment instead of a
   slightly-larger-than-body ad hoc heading, text unchanged. */
.ask-haki-response h3 {
    margin: 12px 0 4px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 12px;
    font-weight: bold;
    color: var(--text-secondary);
}
.ask-haki-response p { margin: 0 0 10px; white-space: pre-wrap; }
.ask-haki-current-question { font-weight: 600; }
.ask-haki-secondary { margin-top: 10px; }
.ask-haki-section [hidden] { display: none; }
@media (max-width: 480px) {
    /* Suggestion chips keep their natural flowing layout on mobile too (see
       the base rule above); the global <=520px `button { width: 100% }`
       is overridden there via `width: auto` so they don't each stretch to
       a full-width row. Capping each chip at half the row (minus half the
       8px gap) lets two share a row: short chips keep their natural width,
       long ones wrap inside the chip instead of forcing their own row.
       Nothing here depends on a count or specific strings, and it is
       mobile-only — desktop chips are unchanged. */
    .ask-haki-suggestions button {
        max-width: calc(50% - 4px);
        padding: 6px 10px;
        font-size: .8125rem;
    }
    #ask-haki-panel-body { padding: 8px 12px 12px; }
    .ask-haki-controls { max-width: none; }
}

.ask-haki-invite-cta {
    width: auto;
    min-height: var(--control-height);
    margin-top: 4px;
}


/* =========================================
   MVP-7: FLOATING ASK HAKI ASSISTANT

   Desktop/tablet (>750px): small fixed launcher, anchored non-modal panel
   bottom-right. Reuses --radius-md/--border-subtle/--focus-ring from the
   MVP-1→MVP-4 token system rather than introducing new ones.

   Mobile (<=750px, matching every other breakpoint in this file): full
   bottom sheet, modal — overlay blocks the background, body scroll is
   locked while open. No open/close animation: acceptable per spec, and it
   sidesteps prefers-reduced-motion handling entirely rather than needing
   to gate a transition.
   ========================================= */

#ask-haki-launcher-wrap {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 60;
}
#ask-haki-launcher-wrap[hidden] { display: none; }

#ask-haki-launcher {
    min-height: 44px;
    padding: 0 22px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: #1f2933;
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(31, 41, 51, .22);
}
#ask-haki-launcher:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

#ask-haki-overlay {
    position: fixed;
    inset: 0;
    background: rgba(31, 41, 51, .4);
    z-index: 65;
}
#ask-haki-overlay[hidden] { display: none; }

#ask-haki-panel {
    position: fixed;
    z-index: 70;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border-subtle);
    box-shadow: 0 16px 40px rgba(31, 41, 51, .25);
    min-height: 0;
}
#ask-haki-panel[hidden] { display: none; }

.ask-haki-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 4px 2px 16px;
    border-bottom: 1px solid var(--border-subtle);
    flex: 0 0 auto;
}
.ask-haki-panel-header h2 {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    font-size: 1.15rem;
    color: #2b3640;
}
/* The global <=520px `button { width: 100% }` used to stretch this across
   the header on mobile (squeezing "Ask Haki" onto two lines). An explicit
   44px width wins by ID specificity; the close control stays a real 44x44
   target but is borderless so the header reads as one compact line. */
#ask-haki-close {
    flex: 0 0 auto;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: #56616b;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
#ask-haki-close:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.ask-haki-panel-body .ask-haki-intro { margin-bottom: 10px; }
.ask-haki-panel-body .ask-haki-notice { margin-bottom: 10px; }
.ask-haki-panel-body {
    padding: 12px 16px 16px;
    overflow-y: auto;
    min-height: 0;
}
/* The panel body reuses .ask-haki-controls/.ask-haki-suggestions/etc.
   unchanged from the inline-era rules above — same classes, same 44px
   floors, same focus-visible treatment; only their container changed. */

@media (min-width: 751px) {
    #ask-haki-panel {
        right: 20px;
        bottom: 20px;
        /* Visual Polish: width measured, not widened. Tested 400/420/440/
           460px with the real suggestion strings (ask-haki-suggestions.js)
           — the longest ("Should I worry about these recalls?") wrapped
           identically at every width, so 400px stays the smallest width
           that works; widening would only obscure more of the report. */
        width: min(400px, calc(100vw - 40px));
        max-height: min(75vh, 640px);
        border-radius: var(--radius-md);
    }
    /* Desktop is a non-modal anchored panel: the report behind it stays
       interactive (no overlay, no body-scroll lock, no focus trap — see
       ask-haki-ui.js's openAskHakiAssistant). It must not cover the whole
       desktop viewport, so it keeps its own bounded width/height instead
       of stretching like the mobile sheet. */
    #ask-haki-overlay { display: none !important; }
}

@media (max-width: 750px) {
    /* Mobile is a small chat panel anchored bottom-right (same corner as the
       launcher and the desktop panel), not a full-width bottom sheet — it
       must not take over the screen. Width is capped, leaving a 16px margin
       on narrow phones. Content-sized: no height/min-height is set, so it
       hugs its content and only grows (up to the cap) as suggestions wrap
       or an answer/caution appears; #ask-haki-panel-body (overflow-y: auto)
       scrolls internally past the cap. The dvh line is a progressive
       enhancement so a mobile browser's collapsing toolbar can't make 75vh
       taller than the visible viewport. Safe-area insets are added to the
       corner offsets so it clears notches/home indicators. */
    #ask-haki-panel {
        right: calc(16px + env(safe-area-inset-right));
        bottom: calc(16px + env(safe-area-inset-bottom));
        width: min(340px, calc(100vw - 32px));
        max-height: calc(75vh - 16px);
        max-height: calc(75dvh - 16px);
        border-radius: var(--radius-md);
    }
    /* Still a modal on mobile (focus trap, Escape, scroll lock, aria-modal
       stay as-is in ask-haki-ui.js), but the backdrop no longer dims the
       whole screen — the report stays visible around the corner panel. */
    #ask-haki-overlay { background: transparent; }
    #ask-haki-launcher-wrap {
        right: 16px;
        bottom: 16px;
    }
}

/* IA-4 provenance: plain text, native disclosure, no second verdict card.
   IA-6: the #inspection-checklist-section selectors that used to sit here
   are gone — that id was retired when IA-5 gave Inspection its permanent
   #inspection-section home. Its own <details> summary already gets a
   44px+ target from .accordion summary, and its scroll-margin-top now
   comes from .dashboard-section like every other nav destination, so
   nothing needed to move to the new id. */
.evidence-sources-section { overflow-wrap: anywhere; }
.evidence-sources-section summary { min-height: 44px; box-sizing: border-box; }


/* =========================================
   NEW-VERSION BANNER (app-version.js)
   A small, dismissible offer to reload after a deployment. Never covers the page's controls on a phone: it sits at the bottom edge,
   keeps clear of the safe area, and is only ever shown, never forced.
   ========================================= */

.app-update-banner {
    position: fixed;
    left: var(--space-3);
    right: var(--space-3);
    bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    z-index: 900;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    max-width: 560px;
    margin: 0 auto;
    padding: var(--space-3) var(--space-4);
    background: #ffffff;
    color: #1b2630;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: 0 6px 24px rgba(15, 30, 45, 0.18);
}

.app-update-banner-text {
    flex: 1 1 100%;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.35;
}

.app-update-banner button {
    flex: 1 1 0;
    min-height: 44px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    background: #f4f6f8;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.app-update-banner .app-update-banner-reload {
    background: #1f4e79;
    border-color: #1f4e79;
    color: #ffffff;
}


/* =========================================
   COMPARE RESULTS DENSITY (presentation only)

   Audit (1440x900, three vehicles): the whitespace did not come from the card rules; it came from the browser's default 1em margins
   on every <p>, <ul> and <h2> inside the result cards (16px above AND below each one, plus a 40px <ul> indent), the equal-height
   stretch of grid items, and 22px/26px section rhythm. Nothing here changes a value; it sets an explicit rhythm.

   Scoped to #comparison-results so Research One Car (which shares these class names) is untouched. Accordion <summary>
   keeps its own 44px touch target; nothing interactive is shrunk.
   ========================================= */

/* one vertical rhythm for text inside result cards: 6px between blocks, none trailing */
#comparison-results .recommendation-section p,
#comparison-results .advisor-note p,
#comparison-results .best-use-card p,
#comparison-results .price-check-card p,
#comparison-results .compact-section p {
    margin: 0 0 6px;
}

#comparison-results .recommendation-section ul,
#comparison-results .advisor-note ul,
#comparison-results .best-use-card ul,
#comparison-results .recommendation-positive ul,
#comparison-results .recommendation-warning ul {
    margin: 4px 0 0;
    padding-left: 18px;
}

#comparison-results .recommendation-section li + li,
#comparison-results .advisor-note li + li {
    margin-top: 2px;
}

#comparison-results .recommendation-section p:last-child,
#comparison-results .advisor-note p:last-child,
#comparison-results .best-use-card p:last-child,
#comparison-results .recommendation-positive p:last-child,
#comparison-results .recommendation-warning p:last-child {
    margin-bottom: 0;
}

/* header + guidance */
#comparison-results .compact-report {
    padding: 20px;
}

#comparison-results .compact-report > .section-summary {
    margin: 0 0 10px;
}

#comparison-results .compare-product-disclosure {
    margin: 10px 0 0;
    padding: 10px 14px;
}

/* recommendation card: name, trim, price line, priorities as one tight block */
#comparison-results .recommendation-section {
    margin-top: 14px;
    padding: 16px;
}

#comparison-results .recommendation-header h2 {
    margin: 4px 0 0;
}

#comparison-results .recommendation-section p.recommendation-trim,
#comparison-results .recommendation-section p.recommendation-priorities {
    margin: 2px 0 0;
}

#comparison-results .recommendation-section p.recommendation-priorities {
    margin-top: 8px;
}

#comparison-results .recommendation-section p.recommendation-price-line {
    margin-top: 8px;
}

#comparison-results .recommendation-section p.recommendation-current-line {
    margin: 4px 0 10px;
}

#comparison-results .recommendation-section .compact-note {
    margin: 4px 0 10px;
}

#comparison-results .recommendation-score {
    padding: 8px 12px;
}

/* side-by-side tiles: content-driven heights, so a short card does not pad itself out to its taller neighbour */
#comparison-results .recommendation-summary-grid,
#comparison-results .price-check-grid,
#comparison-results .best-use-grid {
    align-items: start;
}

#comparison-results .recommendation-summary-grid {
    margin-top: 10px;
}

#comparison-results .recommendation-summary-grid.compare-stack-gap-sm {
    margin-top: 10px;
}

#comparison-results .recommendation-positive,
#comparison-results .recommendation-warning {
    padding: 12px;
}

#comparison-results .recommendation-positive > strong + p,
#comparison-results .recommendation-positive > strong + ul,
#comparison-results .recommendation-warning > strong + p,
#comparison-results .recommendation-warning > strong + ul {
    margin-top: 4px;
}

/* callouts */
#comparison-results .advisor-note {
    margin-top: 10px;
    padding: 12px 14px;
}

#comparison-results .advisor-note > strong {
    display: block;
    margin-bottom: 4px;
}

#comparison-results .alternative-card {
    margin-top: 10px;
}

#comparison-results .recommendation-section p.recommendation-disclaimer {
    margin: 10px 0 0;
}

/* section rhythm */
#comparison-results .compact-section {
    margin-top: 18px;
    padding-top: 18px;
}

#comparison-results .compact-section-heading {
    margin-bottom: 10px;
}

#comparison-results .compact-section > .compact-note {
    margin: 0 0 10px;
}

#comparison-results .recommendation-section > .eyebrow + h2 {
    margin: 4px 0 6px;
}

#comparison-results .recommendation-section > .section-summary {
    margin: 0 0 10px;
}

/* Market Price */
#comparison-results .price-check-card {
    padding: 14px;
}

#comparison-results .price-check-card h4 {
    margin: 8px 0 10px;
}

#comparison-results .price-check-card p.price-difference {
    margin: 8px 0;
}

#comparison-results .price-check-card p.price-source {
    margin: 8px 0 0;
}

/* Trade-In Advisor / Best for Each Use */
#comparison-results .best-use-card {
    padding: 12px;
}

#comparison-results .best-use-card > strong + * {
    margin-top: 8px;
}

#comparison-results .best-use-card .recommendation-positive + .recommendation-warning {
    margin-top: 8px;
}

#comparison-results .best-use-card > p {
    margin: 8px 0 0;
}

#comparison-results .best-purchase-option {
    margin-top: 10px;
    padding: 10px 12px;
}

/* Side by Side: the rows are tables of short values; 12px above and below each was generous */
@media (min-width: 751px) {
    #comparison-results .compare-glance-header,
    #comparison-results .compare-glance-cell,
    #comparison-results .compare-row-label {
        padding: 9px 12px;
    }

    /* Detailed Specs: labelled key/value cells flow into as many columns as fit (three at desktop) instead of a fixed pair.
       Every label and value is still shown; the mobile single column (max-width 750px) is untouched. */
    #comparison-results .detail-grid {
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        gap: 8px;
    }
}

#comparison-results .detail-item {
    padding: 8px 10px;
}

#comparison-results .detail-item span {
    margin-bottom: 2px;
}

#comparison-results .accordion-content {
    padding: 12px;
}