/* ============================================================================
   KAR — Find My Car results, engine v2 (scripts/results-v2.js)
   Mobile first. Same tokens as kar.css, so dark mode follows dark.css.
   Every card has the same frame whatever the brand; only rank adds weight.
   ========================================================================= */

.v2-message { max-width: none; width: 100%; padding: 0; background: none; border: 0; box-shadow: none; }
.v2-results { display: grid; gap: 16px; margin: 8px 0 4px; container-type: inline-size; container-name: v2; color: var(--c-text); }

/* ── Head ─────────────────────────────────────────────────────────────── */
.v2-head { display: grid; gap: 6px; }
.v2-kicker { margin: 0; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0; text-transform: none; color: var(--c-kicker); }
.v2-title { margin: 0; font-family: var(--font-display); font-size: clamp(1.25rem, 4.6vw, 1.6rem); font-weight: 750; letter-spacing: -0.02em; line-height: 1.15; color: var(--c-text); }
.v2-brief { margin: 0; font-size: 0.86rem; color: var(--c-text-2); line-height: 1.45; }
.v2-brief__label { font-weight: 600; color: var(--c-text); }
.v2-summary { margin: 2px 0 0; font-size: 0.95rem; line-height: 1.5; color: var(--c-text); }
.v2-status { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; font-size: 0.84rem; color: var(--c-pos); }
.v2-status.is-pending { color: var(--c-text-2); }
.v2-spinner { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--c-rule); border-top-color: var(--c-brand); animation: v2-spin 0.9s linear infinite; }
@keyframes v2-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .v2-spinner { animation: none; } .v2-why__text.is-pending { animation: none; } }

.v2-notice { display: grid; gap: 10px; justify-items: start; padding: 12px 14px; border-radius: var(--r-lg); border: 1px solid transparent; background: var(--c-sunken); font-size: 0.9rem; line-height: 1.45; color: var(--c-text-2); }
.v2-notice.is-nomatch { border-color: var(--c-warn); background: var(--kar-amber-soft); color: var(--c-text); }

.v2-h3 { margin: 6px 0 0; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
.v2-h4 { margin: 0 0 6px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--c-text-3); }

/* ── Card ─────────────────────────────────────────────────────────────── */
.v2-card { display: flex; flex-direction: column; min-width: 0; background: var(--c-surface); border: 1px solid transparent; border-radius: var(--r-lg); overflow: hidden; overflow: clip; }
.v2-card--top { border-color: var(--c-brand); box-shadow: inset 0 3px 0 var(--c-brand); }

.v2-figure { position: relative; margin: 0; aspect-ratio: 16 / 9; background: linear-gradient(180deg, var(--kar-paper-2) 0%, var(--kar-paper-3) 100%); overflow: hidden; }
.v2-photo, .v2-figure .rp-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-3) var(--ease); }
.v2-figure.has-photo .v2-photo, .v2-figure.has-photo .rp-photo { opacity: 1; }
.v2-figure.no-photo { aspect-ratio: auto; min-height: 44px; background: var(--c-bg); border-bottom: 0; }
.v2-rank { position: absolute; left: 12px; top: 12px; z-index: 1; padding: 4px 10px; border-radius: var(--r-sm); background: var(--c-brand); color: #fff; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.02em; }
.v2-card--top .v2-rank { background: var(--kar-navy-800); color: #fff; }
.v2-figure.no-photo .v2-rank { position: static; display: inline-block; margin: 10px 12px; }
.v2-credit, .v2-figure .rp-credit { position: absolute; right: 6px; bottom: 6px; z-index: 1; padding: 2px 6px; border-radius: 3px; background: rgba(7, 13, 31, 0.55); color: #fff; font-size: var(--fs-xs); text-decoration: none; }

.v2-body { display: grid; gap: 12px; padding: 14px 16px 16px; min-width: 0; }
.v2-name { margin: 0; font-family: var(--font-display); font-size: 1.2rem; font-weight: 750; letter-spacing: -0.02em; line-height: 1.2; }
.v2-card--top .v2-name { font-size: 1.35rem; }
.v2-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: -6px 0 0; font-size: 0.86rem; color: var(--c-text-2); }
.v2-version { color: var(--c-text-3); }
.v2-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.v2-price strong { font-size: 1.15rem; font-weight: 700; color: var(--c-text); }
.v2-src { font-size: var(--fs-xs); color: var(--c-text-3); }
.v2-unverified { margin: 0; padding: 6px 10px; border-radius: var(--r-md, 4px); background: var(--c-sunken); color: var(--c-text-2); font-size: 0.82rem; justify-self: start; }

.v2-why { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--c-ice-soft); }
.v2-why__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; }
.v2-why__head .v2-h4 { margin: 0; color: var(--c-brand); }
.v2-why__src { font-size: var(--fs-xs); color: var(--c-text-3); }
.v2-why__src.is-ai { color: var(--c-brand-2); font-weight: 600; }
.v2-why__text { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--c-text); }
.v2-why__text.is-pending { animation: v2-pulse 1.6s ease-in-out infinite; }
@keyframes v2-pulse { 50% { opacity: 0.55; } }
.v2-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.v2-reasons li { padding: 4px 9px; border-radius: var(--r-sm); background: var(--c-surface); border: 1px solid transparent; font-size: var(--fs-xs); line-height: 1.35; color: var(--c-text-2); }
.v2-reasons li::before { content: '✓ '; color: var(--c-pos); font-weight: 700; }

.v2-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 0; }
.v2-spec { min-width: 0; }
.v2-spec dt { font-size: var(--fs-xs); color: var(--c-text-3); text-transform: none; letter-spacing: 0; }
.v2-spec dd { margin: 2px 0 0; font-size: 0.9rem; font-weight: 600; color: var(--c-text); overflow-wrap: anywhere; }

.v2-costs { padding: 12px 14px; border: 1px solid var(--c-rule-soft); border-radius: var(--r-lg); background: var(--c-bg); }
.v2-costs__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; margin: 0 0 8px; font-size: 0.88rem; }
.v2-costs__grid dt { color: var(--c-text-2); }
.v2-costs__grid dd { margin: 0; text-align: right; font-weight: 600; }
.v2-costs__grid .is-total { padding-top: 6px; border-top: 0; font-weight: 700; color: var(--c-text); }
.v2-note { margin: 0; font-size: var(--fs-xs); line-height: 1.45; color: var(--c-text-3); }

.v2-pc { display: grid; gap: 12px; }
.v2-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 0.9rem; line-height: 1.45; color: var(--c-text-2); }
.v2-pros .v2-h4 { color: var(--c-pos); }
.v2-cons .v2-h4 { color: var(--c-warn); }
.v2-watch { margin: 0; padding: 10px 12px; border-left: 3px solid var(--c-warn); background: var(--kar-amber-soft); border-radius: 0 var(--r-lg) var(--r-lg) 0; font-size: 0.88rem; line-height: 1.45; color: var(--c-text); }
.v2-checks { border-top: 0; padding-top: 10px; }
.v2-checks summary { cursor: pointer; font-weight: 600; font-size: 0.92rem; color: var(--c-brand); padding: 4px 0; min-height: 32px; }
.v2-checks .v2-list { margin-top: 8px; }
.v2-more { border-top: 0; padding-top: 8px; }
.v2-more > summary { cursor: pointer; font-weight: 600; font-size: 0.92rem; color: var(--c-brand); padding: 6px 0; min-height: 36px; }
.v2-more[open] { display: grid; gap: 12px; }
.v2-more .v2-checks { border-top: 0; padding-top: 0; }

.v2-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.v2-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 14px; border-radius: var(--r-md, 4px); border: 1px solid var(--c-rule); background: var(--c-surface); color: var(--c-text); font: inherit; font-size: 0.88rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color var(--dur-2, 180ms) var(--ease), border-color var(--dur-2, 180ms) var(--ease); }
.v2-btn:hover { border-color: var(--c-text-3); }
.v2-btn:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.v2-btn.is-primary { background: var(--kar-navy-800); border-color: var(--kar-navy-800); color: #fff; }
.v2-btn.is-primary:hover { background: var(--kar-navy-700); }
.v2-btn[disabled] { opacity: 0.6; cursor: default; }
.v2-actions .v2-btn { flex: 1 1 auto; }

.v2-alts { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }

/* ── Side by side ─────────────────────────────────────────────────────── */
.v2-compare { display: grid; gap: 10px; justify-items: start; }
.v2-compare__scroll { width: 100%; overflow-x: auto; border: 1px solid transparent; border-radius: var(--r-lg); background: var(--c-surface); -webkit-overflow-scrolling: touch; }
.v2-compare__scroll:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.v2-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 0.85rem; }
.v2-table th, .v2-table td { padding: 9px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--c-rule-soft); }
.v2-table thead th { font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; background: var(--c-bg); }
.v2-table tbody th { position: sticky; left: 0; background: var(--c-surface); color: var(--c-text-3); font-weight: 600; font-size: var(--fs-xs); min-width: 120px; }
.v2-table .is-top { background: var(--c-ice-soft); }
.v2-table tr:last-child th, .v2-table tr:last-child td { border-bottom: 0; }

/* ── Foot ─────────────────────────────────────────────────────────────── */
.v2-foot { display: grid; gap: 10px; padding-top: 8px; border-top: 0; }
.v2-independent { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--c-text-2); }
.v2-independent strong { color: var(--c-text); }
.v2-independent a { color: var(--c-brand); font-weight: 600; }
.v2-sharebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.v2-sharebar__status { flex: 1 1 100%; margin: 0; font-size: 0.85rem; color: var(--c-text-2); overflow-wrap: anywhere; }
.v2-sharebar__status a { color: var(--c-brand); font-weight: 600; }

.v2-page { padding-bottom: 40px; }
.v2-page__cta { margin: 24px 0 0; }

/* ── Saved results (History page) ─────────────────────────────────────── */
.v2-saved { display: grid; gap: 8px; margin: 0 0 18px; padding: 14px 16px; border: 1px solid transparent; border-radius: var(--r-lg); background: var(--c-surface); }
.v2-saved[hidden] { display: none; }
.v2-saved__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.v2-saved__item { display: grid; gap: 2px; }
.v2-saved__item a { font-weight: 600; color: var(--c-brand); }
.v2-saved__meta { font-size: var(--fs-xs); color: var(--c-text-3); }

/* ── Wider screens ────────────────────────────────────────────────────── */
@container v2 (min-width: 680px) {
  .v2-card--top { flex-direction: row; }
  .v2-card--top .v2-figure { flex: 0 0 42%; aspect-ratio: auto; min-height: 100%; }
  .v2-card--top .v2-figure.no-photo { flex-basis: auto; min-height: 0; }
  .v2-card--top .v2-body { flex: 1; }
  .v2-pc { grid-template-columns: 1fr 1fr; }
  .v2-specs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .v2-alts { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}