/* ==========================================================================
   Clear Auto Choice - Comparison Tool bundle
   Merged for tools/compare.html: style.css (sitewide) + compare.css
   (page-specific) combined into one file so the page makes one CSS
   request instead of two. Built by concatenation only - no rules were
   changed, renamed, or reordered relative to each other, and a check
   confirmed the two files share zero selectors, so nothing in compare.css
   can be shadowed by cascade/source-order effects from style.css above it.
   Keep both source files in sync if either one changes - this bundle is
   generated from them, not hand-edited.
   ========================================================================== */

/* ==========================================================================
   Clear Auto Choice - Primary Site Stylesheet
   Covers: index, compare, methodology, about, contact, privacy, terms
   ========================================================================== */

:root {
  --ink: #14181F;
  --slate: #4B5563;
  --line: #E2E5EA;
  --paper: #FAFAF9;
  --white: #FFFFFF;
  --accent: #1D4ED8;
  --accent-dark: #1739A6;
  --confirmed: #0F5132;
  --confirmed-bg: #D1E7DD;
  --estimated: #664D03;
  --estimated-bg: #FFF3CD;
  --radius: 8px;
}

* { box-sizing: border-box; }

/* Several elements on this site (buttons, form steps, panels) are shown
   and hidden by toggling the native `hidden` attribute/property from JS
   (e.g. tools/intake.html's wizard steps, the "Next"/"Save" buttons at
   the end of the wizard). By default the browser hides a [hidden]
   element for free, but any author rule that sets `display` on the same
   element (like .btn's `display: inline-block` below) wins over that
   built-in behavior and the element stays visible anyway. This single
   reset makes `hidden` always win, sitewide, no matter what other
   display rules a class carries. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.55;
  font-size: 16px;
}

h1, h2, h3 {
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.125rem; }

p { margin: 0 0 16px; color: var(--slate); }
p.lead { font-size: 1.125rem; color: var(--slate); }

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Header / Nav ---------- */

.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  /* Raised from 50 for more headroom above ordinary page content (cards,
     the sticky filter panel, breadcrumbs). Kept below 1000 on purpose —
     that's this site's convention for a true top layer (.listing-modal-
     overlay, .compare-drawer, .cac-toast all live at 1000+) which should
     still cover the header, not sit behind it, whenever one is open. */
  z-index: 500;
}

.nav {
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--accent);
  color: var(--white);
  font-weight: 800;
  font-size: 0.9rem;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  flex: 1;
}

.nav-links a {
  color: var(--slate);
  font-size: 0.95rem;
  font-weight: 500;
}
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.nav-links a.active { color: var(--ink); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--ink);
}

.nav-cta { white-space: nowrap; }

/* ---------- Nav dropdowns ("Shop", "Guides") ---------- */
/* A button (not a link) so it never navigates on its own — clicking it
   only ever opens/closes its menu. Toggled via .open, added/removed by
   assets/js/main.js; keeps only one dropdown open at a time and closes on
   an outside click or Escape. */
.nav-dropdown { position: relative; }

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  color: var(--slate);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
}
.nav-dropdown-toggle:hover { color: var(--ink); }
.nav-dropdown-toggle.active { color: var(--ink); }

.nav-caret { font-size: 0.65em; transition: transform 0.15s ease; }
.nav-dropdown.open .nav-caret { transform: rotate(180deg); }

.nav-dropdown-menu {
  list-style: none;
  margin: 0;
  padding: 6px;
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  min-width: 190px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  display: none;
  /* Raised from 60 alongside .site-header's bump above, same reasoning. */
  z-index: 550;
}
.nav-dropdown.open .nav-dropdown-menu { display: block; }

.nav-dropdown-menu a {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--slate);
  font-size: 0.92rem;
  font-weight: 500;
  white-space: nowrap;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a.active { background: var(--paper); color: var(--ink); text-decoration: none; }

@media (max-width: 780px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; margin-left: auto; }

  /* On phones narrower than ~400px, the logo + hamburger + "Try the Tool"
     button no longer fit on one row (found while reviewing the phone view)
     — the row was overflowing past the viewport edge by about 18px,
     producing a horizontal scrollbar under the header. Letting the row
     wrap instead of overflow drops the CTA button to its own line rather
     than clipping or scrolling. */
  .nav { flex-wrap: wrap; row-gap: 8px; }

  /* Mobile menu: .nav-links.open makes the panel visible at all — this
     rule never existed before, so the hamburger button's click handler
     (assets/js/main.js) toggled a class that had no effect and the menu
     never actually opened. Fixed here as part of this same nav rebuild. */
  .nav-links.open {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    padding: 8px 24px 16px;
  }
  .nav-links.open li { width: 100%; }
  .nav-links.open > li > a { display: block; padding: 10px 0; }

  /* Dropdowns become plain inline sections on mobile — no floating panel,
     since there's no hover/click-away affordance that makes sense once
     the whole nav is already a vertical list. */
  .nav-dropdown-toggle { width: 100%; justify-content: space-between; padding: 10px 0; }
  .nav-dropdown-menu {
    position: static;
    display: none;
    border: none;
    box-shadow: none;
    padding: 0 0 4px 14px;
  }
  .nav-dropdown.open .nav-dropdown-menu { display: block; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn:hover { text-decoration: none; }

.btn-primary {
  background: var(--accent);
  color: var(--white);
}
.btn-primary:hover { background: var(--accent-dark); }

.btn-secondary {
  background: var(--white);
  color: var(--ink);
  border-color: var(--line);
}
.btn-secondary:hover { background: var(--paper); }

.btn-sm {
  padding: 8px 16px;
  font-size: 0.875rem;
}

/* "Save My Preferences" only — scoped to this one button's id rather than
   a reusable class, since this is a one-off size request for this
   specific button, not a new button-size variant meant for reuse
   elsewhere. Half of the base .btn's padding (12px 22px) and font-size
   (0.95rem). Shared by tools/intake.html (its real source — see build.py)
   and everything.php, which extracts this button from it at build time. */
#submitBtn {
  padding: 6px 11px;
  font-size: 0.475rem;
}

/* ---------- Hero ---------- */

.hero {
  padding: 72px 0 56px;
  background: linear-gradient(180deg, #F2F5FF 0%, var(--paper) 100%);
}

.hero-inner { max-width: 720px; }

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
  background: #E8EEFF;
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 18px;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* ---------- Sections ---------- */

.section { padding: 64px 0; }
.section-tight { padding: 48px 0 72px; }

.text-center { text-align: center; }

/* ---------- Cards / Grid ---------- */

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

/* Two-card row ("More free tools" on the home page). This used to be an
   inline style="grid-template-columns:repeat(2, 1fr)" on a .grid-3 div —
   an inline style always wins over a stylesheet rule, including the
   max-width:900px media query below, so that row stayed stuck at 2
   columns on every phone width and overflowed the viewport (found while
   reviewing the phone view). A real class lets the same media query that
   collapses .grid-3 also collapse this one. */
.grid-2 { grid-template-columns: repeat(2, 1fr); max-width: 800px; margin: 0 auto; }

@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
}

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
}

.card .icon {
  font-size: 1.5rem;
  margin-bottom: 14px;
}

/* ---------- Top Pick cards ---------- */
/* Shared by inventory/ev-inventory.php's "Top Picks by Mileage" and
   "Matches for you" sections (both built from this same card template —
   see renderTopPicks()/renderMatchesForYou() in that page's own script) —
   kept here rather than in assets/css/ev-inventory.css so the two views
   can never drift apart into two slightly different card looks.
   Deliberately plainer than .vehicle-card so either section reads as a
   quick highlight strip, not a full spec card. */
.top-picks-head { margin-bottom: 14px; }
.top-picks-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
@media (max-width: 1300px) {
  .top-picks-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
  .top-picks-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .top-picks-grid { grid-template-columns: 1fr; }
}
.top-pick-card {
  background: var(--white);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
/* Numbered rank pill, same look and corner placement as the "Your
   comparison list" mini-grid's .compare-mini-rank (ev-inventory.css /
   compare.css) — kept visually identical across all three ranked views on
   this site. Sits over the photo strip: .top-pick-media bleeds to the
   card's own edge with negative margins, so top/left here land right at
   that same edge. */
.top-pick-rank {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  z-index: 2;
}
/* Photo strip at the top of each card — same treatment as the "Your
   comparison list" mini-cards (.compare-mini-card .thumb in
   ev-inventory.css): 16:10 gray placeholder, cover-fit real photo when one
   exists, a car glyph when it doesn't. .top-pick-card has its own 16px
   padding (unlike .compare-mini-card, which has none), so this bleeds to
   the card's edges with negative margins and rounds only the top corners
   to match the card's own radius, rather than sitting inset inside it. */
.top-pick-media { margin: -16px -16px 10px; }
.top-pick-card .thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  background-color: #E9ECEF;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9AA3AD;
  font-size: 28px;
  border-radius: var(--radius) var(--radius) 0 0;
}
.top-pick-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  font-weight: 700;
}
.top-pick-headline {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.25;
}
.top-pick-sub {
  font-size: 12px;
  color: var(--slate);
  line-height: 1.4;
  margin-bottom: 6px;
}
.top-pick-vehicle {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 4px;
}
.top-pick-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.top-pick-mileage {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--slate);
}
/* Days-on-market + location line (topPickMetaLine() in ev-inventory.php's
   script) — plain muted text, not a badge, since it's supporting context
   for the price/mileage line above it rather than its own callout. */
.top-pick-meta {
  font-size: 12px;
  color: var(--slate);
  margin-top: 2px;
}
.top-pick-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.top-pick-actions .btn { width: 100%; text-align: center; }

/* "What if?" cost breakdown — toggled open/closed under a match card's
   own action buttons (see .top-pick-whatif-btn in intake.js /
   ev-inventory.php). Kept visually small/quiet (no card border of its
   own) since it's a secondary, optional expansion, not the card's main
   content. */
.top-pick-whatif-btn {
  width: 100%;
  background: none;
  border: 1px dashed var(--line);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  font-family: inherit;
}
.top-pick-whatif-btn:hover { background: var(--paper); }
.top-pick-whatif-panel {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-size: 12px;
}
.top-pick-whatif-table { width: 100%; border-collapse: collapse; }
.top-pick-whatif-table td { padding: 3px 0; color: var(--slate); }
.top-pick-whatif-table td:last-child { text-align: right; font-weight: 600; color: var(--ink); white-space: nowrap; }
.top-pick-whatif-table tr.top-pick-whatif-total td { font-weight: 800; border-top: 1px solid var(--line); padding-top: 6px; color: var(--ink); }
.top-pick-whatif-table tr.top-pick-whatif-total td:last-child { color: var(--accent); font-size: 13px; }
/* "vs. your monthly max" row — same under/over-budget coloring
   tools/financing.html's own calculator uses (.fin-under-max/.fin-over-max
   in financing.css), just scoped to this table's cell instead. */
.top-pick-whatif-table td.top-pick-whatif-under-max { color: var(--confirmed); }
.top-pick-whatif-table td.top-pick-whatif-over-max { color: var(--estimated); }
.top-pick-whatif-note { color: var(--slate); margin-top: 6px; line-height: 1.4; }
.top-pick-order-btn {
  width: 100%;
  margin-top: 10px;
  background: var(--accent);
  color: var(--white);
  border: none;
  border-radius: 6px;
  padding: 9px 10px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.top-pick-order-btn:hover { background: var(--accent-dark); }

/* ---------- Two-column layout ---------- */

.two-col {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: start;
}

@media (max-width: 860px) {
  .two-col { grid-template-columns: 1fr; }
}

.step-list {
  padding-left: 20px;
  color: var(--slate);
}
.step-list li { margin-bottom: 14px; }
.step-list strong { color: var(--ink); }

.callout {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 24px;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--white);
  border-top: 1px solid var(--line);
  padding: 40px 0;
  margin-top: 40px;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
}

.footer-copy {
  font-size: 0.875rem;
  color: var(--slate);
  margin: 0 0 4px;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 0;
  margin: 0;
}
.footer-links a {
  color: var(--slate);
  font-size: 0.9rem;
}
.footer-links a:hover { color: var(--ink); }

/* Deliberately understated — a way for staff to reach the admin page from
   any device without needing a bookmark, not a customer-facing link. */
.footer-admin-link {
  font-size: 0.75rem;
  margin: 10px 0 0;
}
.footer-admin-link a {
  color: var(--slate);
  opacity: 0.6;
}
.footer-admin-link a:hover { opacity: 1; }

/* ---------- Shared badges (used across pages, incl. compare tool) ---------- */

.badge-confirmed {
  background-color: var(--confirmed-bg);
  color: var(--confirmed);
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 600;
}
.badge-estimated {
  background-color: var(--estimated-bg);
  color: var(--estimated);
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 600;
}

/* ---------- Forms (compare tool) ---------- */

.muted { color: var(--slate); }

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--ink);
}

.field input,
.field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--white);
  color: var(--ink);
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
}

.field-hint {
  font-size: 0.8rem;
  color: var(--slate);
  margin-top: 4px;
}

.btn-block {
  width: 100%;
  text-align: center;
}

.divider {
  border: none;
  border-top: 1px solid var(--line);
  margin: 20px 0;
}

/* ---------- Toolbar ---------- */

.toolbar {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

@media (max-width: 700px) {
  .toolbar { grid-template-columns: 1fr; }
}

.toolbar input,
.toolbar select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: inherit;
}

/* ---------- Table ---------- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

thead th {
  text-align: left;
  padding: 12px 16px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  white-space: nowrap;
}

tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

tbody tr:last-child td { border-bottom: none; }

/* ---------- Details / summary (advanced sections) ---------- */

details.card summary {
  list-style: none;
}
details.card summary::-webkit-details-marker { display: none; }

/* ---------- Variable alias (used directly in some page inline styles) ----------
   vin-audit.html's inline style block references a set of "color" and
   "radius" and "shadow" custom-property names that were never actually
   defined anywhere in this codebase except --color-text-muted below —
   every other one of those names resolved to nothing, which silently
   drops the whole CSS declaration that uses it (a border/background/
   radius with an undefined var() and no fallback is invalid, so the
   browser just ignores that one rule and falls back to no border/
   background at all). That's why .details-card (Section 1 of the VIN
   Audit report), the EPA sticker, and several other elements rendered
   with no visible box around them even though the CSS clearly intended
   one. These aliases point every one of those names at this site's real,
   already-defined tokens (or a sensible new value where nothing already
   fits), fixing all of them at once without duplicating a second color
   and spacing system. */
:root {
  --color-text: var(--ink);
  --color-text-muted: var(--slate);
  --color-border: var(--line);
  --color-surface: var(--white);
  --color-bg: var(--paper);
  --color-primary: var(--accent);
  --color-accent: var(--accent);
  --color-danger: #B42318;
  --color-estimated: var(--estimated);
  --color-estimated-bg: var(--estimated-bg);
  --radius-lg: var(--radius);
  --radius-md: var(--radius);
  --radius-sm: 6px;
  --shadow-card: none;
}

/* ---------- Badges (base) ---------- */

.badge {
  display: inline-block;
}

/* ---------- Status messages (contact form) ---------- */

.status-msg.success {
  background-color: var(--confirmed-bg);
  color: var(--confirmed);
  border: 1px solid #A3CFBB;
}

/* ---------- Textarea (matches input/select styling) ---------- */

.field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--white);
  color: var(--ink);
  resize: vertical;
}

.field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* ---------- Honeypot (hidden from real visitors, left for bots) ---------- */

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Info page sub-nav (About / Contact / Privacy / Terms tabs) ---------- */
/* Used on site-info.html, which merges those four pages into one scrollable
   document with a sticky sub-nav so each section still reads as its own page. */

.info-subnav {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 61px;
  z-index: 40;
  overflow-x: auto;
}

.info-tabs {
  display: flex;
  gap: 4px;
}

.info-tab {
  padding: 14px 18px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--slate);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.info-tab:hover { color: var(--ink); text-decoration: none; }
.info-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.info-section { scroll-margin-top: 118px; }
.info-section + .info-section { border-top: 1px solid var(--line); }

/* ---------- Breadcrumb (tools/, guides/, inventory/ hub pages) ---------- */

.breadcrumb {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}
.breadcrumb .container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--slate);
}
.breadcrumb a { color: var(--slate); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { color: var(--line); }
.breadcrumb .current { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   Clear Auto Choice - Comparison Tool page-specific styles
   Covers: tools/compare.html
   - The "Your comparison list" mini-grid at the top of the page (a compact
     5-wide x 2-tall view of the up-to-10 vehicles saved via the shared
     cac_compare_vehicles_v1 localStorage list — the same list the EV
     Inventory page's "Add to Comparison" button writes to).
   - The click-to-expand detail modal that grid opens, with the same
     click-to-zoom photo behavior as the EV Inventory page's private-listing
     modal (assets/css/ev-inventory.css / inventory/ev-inventory.php).
   Uses only design tokens already defined in style.css (--ink, --slate,
   --line, --paper, --white, --accent, --radius, --confirmed*, --estimated*)
   so this file doesn't need its own copies of those.
   ========================================================================== */

.compare-mini-wrap { margin-bottom: 28px; }

.compare-mini-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

/* Column count tracks how many vehicles are actually saved instead of a
   fixed 10-slot grid: 1 car is one column, 2 cars two columns, and so on
   through 5; from 6 on it holds at five across and wraps to a second row
   (six is 5x2 same as ten) rather than padding the row out with a wall of
   dashed "Empty slot" placeholders. renderMiniGrid() (assets/js/compare.js)
   sets --compare-cols to that count on the grid element per render — the
   var(...,5) fallback only applies before the first render. Falls back to
   fewer columns on a narrow screen since five real columns would otherwise
   squeeze each card down to an unreadable sliver — min() keeps it from
   ever exceeding the real column count, so a 1- or 2-car list doesn't get
   stretched back out to 3 or 2 columns on mobile.

   Every track below is minmax(0, 1fr), not bare 1fr — see the long
   comment on the matching rule in ev-inventory.css. Short version: a
   bare 1fr track's minimum is "auto" (content-based), and min-width: 0
   on the card alone wasn't reliable through repeated add/remove/re-
   render cycles — two columns could still collapse to near-0 while
   their neighbors overflowed. minmax(0, 1fr) pins the track's minimum
   to 0 directly, and held up clean across a full 0-10-0 stress sweep
   where the item-level fix alone did not. */
.compare-mini-grid {
  display: grid;
  grid-template-columns: repeat(var(--compare-cols, 5), minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 900px) {
  .compare-mini-grid { grid-template-columns: repeat(min(var(--compare-cols, 5), 3), minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .compare-mini-grid { grid-template-columns: repeat(min(var(--compare-cols, 5), 2), minmax(0, 1fr)); }
}

.compare-mini-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  /* Without this, a grid item's default auto-minimum-width is based on
     its content's own minimum size, and this card is a flex container in
     its own right — so its content (the action row especially) can
     demand more width than an equal 1/5 share. When it does, the grid
     can't shrink that column to match, and instead collapses ANOTHER
     column down to near-zero to make room — the "collapsed, unreadable"
     look. min-width: 0 tells the card it's always free to shrink to
     whatever width its grid column actually gives it. */
  min-width: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
/* Comparison cards do not change border or position on hover. */

/* The card whose detail modal is currently open — kept in sync as the
   modal's arrows/scroll wheel move between vehicles, so this ring always
   marks the one actually on screen. The overlay behind the modal is only
   55% opaque, so this stays faintly visible even while the modal is up,
   and clearly visible the moment it's closed. */
.compare-mini-card.is-active {
  border-color: var(--accent);
  border-width: 1px;
  box-shadow: none;
}
.compare-mini-pos {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
}

.compare-mini-card .thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  background-color: #E9ECEF;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9AA3AD;
  font-size: 22px;
}

.compare-mini-rank {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
}

.compare-mini-body { padding: 8px 10px 10px; }
.compare-mini-name {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 2px;
  /* Two-line clamp so a long trim string doesn't blow out card height and
     break the grid's uniform row heights. min-height reserves that same
     two-line space even when a name is short enough for one — matching
     ev-inventory.css's mini grid, where a short card left shorter than
     its row-mates (grid rows stretch every card to the tallest one) had
     nowhere for its content to sit except clipped off by overflow:
     hidden. This page's cards don't carry action buttons that can get
     clipped the same way, but locking every card to one predictable
     height keeps the two mini grids behaving identically either way. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em;
}
.compare-mini-price { font-size: 13px; font-weight: 700; color: var(--ink); }

/* Every filled card is a click target, but nothing on the card itself said
   so — this small persistent hint makes the interaction discoverable
   instead of relying on the cursor:pointer + hover-lift alone. */
.compare-mini-clickhint {
  font-size: 10.5px;
  color: var(--accent);
  font-weight: 600;
  margin-top: 3px;
}

.compare-mini-empty {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  aspect-ratio: 16 / 12;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9AA3AD;
  font-size: 12px;
  text-align: center;
  padding: 8px;
}

/* ---------- Detail modal (click-to-expand) ---------- */
/* Same interaction pattern as the EV Inventory page's private-listing
   modal: a large photo you click to zoom (2x, then drag to pan), plus the
   vehicle's full entered details below it. Compare vehicles only ever
   carry one photo (no gallery), so there's no prev/next nav here. */
.listing-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}
/* An author stylesheet's display:flex above always wins over the browser's
   built-in "hidden elements are display:none" default regardless of source
   order, so without this the overlay stayed visible and clickable on load. */
.listing-modal-overlay[hidden] { display: none; }
.listing-modal {
  background: var(--white);
  border-radius: var(--radius);
  max-width: 720px;
  width: 95vw;
  max-height: 95vh;
  overflow-y: auto;
  position: relative;
}
.listing-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  z-index: 2;
}
.listing-modal .photo {
  width: 100%;
  max-height: 60vh;
  min-height: 160px;
  background-color: #E9ECEF;
  border-radius: var(--radius) var(--radius) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.listing-modal .photo img {
  display: block;
  max-width: 100%;
  max-height: 60vh;
  width: auto;
  height: auto;
  cursor: zoom-in;
  transition: transform 0.2s ease-out;
}
.listing-modal .photo img.zoomed { cursor: grab; touch-action: none; }
.listing-modal .photo img.zoomed:active { cursor: grabbing; }
.listing-modal .photo .zoom-hint {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 10px;
  pointer-events: none;
}
.listing-modal .photo .no-photo-label { color: #9AA3AD; font-size: 14px; }

/* Prev/next arrows move between DIFFERENT vehicles in the comparison list
   (see navigateCompareModal in compare.js) — not photos within one
   listing, since a compare vehicle only ever has the one photo. Same
   visual language as the EV Inventory page's per-listing photo nav. */
.listing-modal .photo-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.listing-modal .photo-nav:hover { background: rgba(0, 0, 0, 0.7); }
.listing-modal .photo-nav.prev { left: 12px; }
.listing-modal .photo-nav.next { right: 12px; }
.listing-modal .photo-counter {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 10px;
  z-index: 3;
}

.listing-modal-body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.compare-modal-tag { font-size: 12px; color: var(--accent); font-weight: 600; }
.compare-modal-title { margin: 4px 0 0; font-size: 18px; font-weight: 700; }
.compare-modal-price-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.compare-modal-price { font-size: 22px; font-weight: 700; }

/* Score card — Clear Auto Choice's own composite score, rank, and financing
   figures, shown ONLY inside the expanded detail modal, and deliberately
   set apart (tinted background, colored border) from the plain-white
   listing facts around it — the price row above and the discount/range/
   source grid below are what the dealer or listing published; everything
   inside this card is this tool's own calculation, never the seller's. */
.compare-modal-scorecard {
  margin: 4px 0 6px;
  padding: 12px 14px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: rgba(29, 78, 216, 0.06);
}
.compare-modal-scorecard-source {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 4px;
}
.compare-modal-scorecard-rank {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
}
.compare-modal-scorecard-rankof {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--slate);
  margin-left: 6px;
}
.compare-modal-scorecard-explain {
  font-size: 12.5px;
  color: var(--slate);
  line-height: 1.45;
  margin: 4px 0 10px;
}
.compare-modal-score-head {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--slate);
  margin-bottom: 4px;
}
.compare-modal-score-track {
  width: 100%;
  height: 10px;
  border-radius: 6px;
  background: #E9ECEF;
  overflow: hidden;
}
.compare-modal-score-fill {
  height: 100%;
  border-radius: 6px;
  background: var(--accent);
  transition: width 0.2s ease;
}
.compare-modal-scorecard-finance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(29, 78, 216, 0.25);
}
.compare-modal-scorecard-financing-link {
  margin-top: 10px;
  text-align: right;
}
.compare-modal-scorecard-financing-link a {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.compare-modal-scorecard-financing-link a:hover {
  text-decoration: underline;
}

.compare-modal-meta { font-size: 13px; color: var(--slate); }
.compare-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.compare-modal-field-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--slate); margin-bottom: 2px; }
.compare-modal-field-value { font-size: 13.5px; font-weight: 600; }

/* Itemized "what made up this total" lines under Total cost through
   payoff in the modal's scorecard — plain-language, not-bolded, so the
   headline total stays the thing your eye lands on first but the receipt
   behind it is never more than a glance away. */
.compare-modal-cost-breakdown {
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--slate);
  line-height: 1.5;
}
.compare-modal-actions { display: flex; gap: 8px; margin-top: 12px; }


/* CAC comparison-card added specifications */
.compare-mini-specs {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.35;
}

.compare-mini-specs > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.compare-mini-specs > div > span {
  color: var(--slate);
  font-size: 10px;
}

.compare-mini-specs > div > strong {
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.compare-mini-estimated {
  display: inline-block;
  color: #8a5a00;
  font-size: 10px;
  font-weight: 700;
}


/* Comparable facts: consistent labels and compact values */
.compare-mini-specs > div { min-width: 0; }
.compare-mini-specs > div > span {
  display: block;
  color: var(--muted, #666);
  font-size: 10px;
  line-height: 1.3;
}
.compare-mini-specs > div > strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.4;
}


/* Match Comparison specification labels and values to inventory cards */
.compare-mini-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px;
  row-gap: 10px;
  align-items: start;
  line-height: 1.4;
}

.compare-mini-specs > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.compare-mini-specs > div > span {
  display: block;
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 500;
}

.compare-mini-specs > div > strong {
  display: block;
  margin: 0;
  min-width: 0;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 600;
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (max-width: 420px) {
  .compare-mini-specs {
    column-gap: 8px;
    row-gap: 9px;
  }
}


/* Comparison specifications: match the Top Picks specification block */
.compare-mini-specs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px 12px !important;
  margin: 9px 0 !important;
  padding: 10px !important;
  border: 1px solid var(--border-color, #e5e7eb) !important;
  border-radius: 9px !important;
  background: var(--card-background, #fff) !important;
  align-items: start !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

.compare-mini-specs > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.compare-mini-specs > div > span {
  display: block !important;
  margin: 0 !important;
  color: var(--muted, #667085) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}

.compare-mini-specs > div > strong {
  display: block !important;
  margin: 0 !important;
  min-width: 0 !important;
  color: var(--ink, #222) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

@media (max-width: 480px) {
  .compare-mini-specs {
    gap: 8px !important;
    padding: 8px !important;
  }
}

/* Comparison card surface aligned with Top Picks; preserve mini-card layout */
.compare-mini-card {
  box-sizing: border-box;
  background: var(--white);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
}

.compare-mini-card .thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 0;
}