/* CarLAB ui-v2 — model.php ($mode==='directory', the models directory page).
   This is a clean re-platform, NOT a redesign: the existing dense-row explorer,
   year-shortcut control (.hx-year*) and hero/controls chrome preserve the
   current layout, density and behavior exactly — only class names changed.

   Full naming migration: every directory-local class that used to carry the
   old .mx-* prefix (explorer, row, thumb, id/name, sub, sparkline, metrics,
   status bar, category groups, sticky preview) now uses .cl2-models-* instead
   — a straight prefix rename, selectors/values/behavior unchanged. One
   disambiguation: the row-level vehicle-count block (old .mx-count) is named
   .cl2-models-row-count, not .cl2-models-count, because that name was already
   taken by the page-level result-count text below (added in the prior pass).
   Every .mx-* class was grep-confirmed directory-local (zero references
   anywhere else in the codebase) before being renamed; the old selectors were
   then deleted, not left as duplicates.

   Earlier in this same re-platform, the breadcrumb (none existed before) and
   the sort/view toggle were rebuilt under .cl2-models-* from the start, the
   toggle replacing the old .mdc-view-toggle/.mdc-view-btn classes (a shared
   assets/carlab-analytics-shell.css rule also serving .model-view-toggle
   elsewhere — this page simply stopped depending on it, exactly like the
   manufacturers-directory rebuild did for .maker-slot-card).

   Dead code removed in that same earlier pass (proven unused anywhere in this
   page's own markup/JS before being dropped): the old .mdc-rank/.mdc-mid/
   .mdc-body/.mdc-maker-lbl/.mdc-model-name/.mdc-img/.mdc-years/
   .mdc-count-row/.mdc-count-num/.mdc-count-lbl/.mdc-foot/.mdc-statusbar/
   .mdc-seg--* card-layout rules and the .mdc-category-groups/
   .mdc-category-grid local overrides — leftovers from a pre-explorer card
   gallery design, never referenced by any current element.

   Row-content pass: the row's identity area now shows one
   combined "maker model" title with the maker logo directly before it
   (.cl2-models-id is a single flex line), and no longer shows the separate
   English model name, the visible year range, the category chip, or the
   active-percentage text under the status bar. The status bar itself, its
   real segment widths, and its full aria-label/tooltip breakdown are
   unchanged. Removed classes (row-only, confirmed unused by the sticky
   preview panel before deletion): .cl2-models-name-en, .cl2-models-sub,
   .cl2-models-maker, .cl2-models-years, .cl2-models-chip,
   .cl2-models-actpct. The preview panel's own categoryNameFor()/
   yearsLabel() helpers and its .cl2-models-pv-* classes are untouched —
   they still show maker/English-name/years/category on hover/focus. */

/* This stylesheet only loads when $mode==='directory' (model.php's own <link>
   is conditional), so this bare-tag override is safe: detail mode's
   .main-content padding (assets/carlab-model-detail.css) is never affected.
   Moved out of an inline style="padding:0" on <main> — same visual result. */
.main-content {
  padding: 0;
}

/* Zeroing the padding above doesn't touch the shared shell's own
   .main-content{max-width:80%} (carlab-analytics-shell.css) — and
   .cl2-models-explorer's own max-width:var(--content-max) (below) can't undo
   that: it's a child, so it's still capped by whatever width its parent
   allows. Neutralized here exactly as assets/ui-v2/maker.css and
   assets/ui-v2/model.css do for the two detail pages (same breakpoint, same
   value, same cascade-order reasoning). */
@media (max-width: 1180px) {
  .main-content {
    max-width: none;
  }
}

/* ── Breadcrumb (page-scoped duplicate of the shared .bc-row/.bc-item pattern,
   assets/carlab-model-detail.css — untouched; model.php's own DETAIL-mode
   breadcrumb there is unaffected). Same values as the manufacturers
   directory's .cl2-dir-bc-* for a consistent look across directory pages. ── */

.cl2-models-bc-row {
  padding: var(--cl2-space-sm) 24px;
  border-bottom: 1px solid var(--cl2-border);
}

@media (max-width: 980px) {
  .cl2-models-bc-row {
    padding-inline: 16px;
  }
}

.cl2-models-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: var(--cl2-fs-md);
  color: var(--cl2-text-dim);
}

.cl2-models-bc-item {
  color: var(--cl2-text-muted);
  text-decoration: none;
  transition: color var(--cl2-t-fast) var(--cl2-ease);
  padding: 2px 0;
}

a.cl2-models-bc-item:hover {
  color: var(--cl2-text);
}

.cl2-models-bc-item:focus-visible {
  outline: 2px solid var(--cl2-accent);
  outline-offset: 2px;
  border-radius: var(--cl2-radius-sm);
}

.cl2-models-bc-home {
  display: inline-flex;
  align-items: center;
  gap: var(--cl2-space-xs);
}

.cl2-models-bc-home-icon {
  width: 14px;
  height: 14px;
  display: block;
  object-fit: contain;
  flex: 0 0 auto;
}

.cl2-models-bc-sep {
  color: var(--cl2-text-dim);
  margin: 0 7px;
  user-select: none;
}

.cl2-models-bc-current {
  color: var(--cl2-text);
  font-weight: 600;
}

/* ── Result count — small secondary text above the list, not a dedicated bar.
   Fixes a pre-existing dead reference: the JS already looked up #dirCount to
   report the filtered match count on every search/sort/year change, but no
   such element existed in the markup, so the update silently did nothing. ── */

.cl2-models-count {
  padding: 0 24px;
  font-size: var(--cl2-fs-sm);
  color: var(--cl2-text-dim);
}

@media (max-width: 980px) {
  .cl2-models-count {
    padding: 0 16px;
  }
}

/* ── Sort/view toggle — identical component to the manufacturers directory's
   .cl2-dir-sort/.cl2-dir-sort-btn and the maker-page model list's
   .cl2-model-sort/.cl2-model-sort-btn, duplicated page-scoped rather than
   shared across pages. Same two options as before (category / popular by
   vehicle count) — no new sort modes. ── */

.cl2-models-sort {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--cl2-surface);
  border: 1px solid var(--cl2-border);
  border-radius: var(--cl2-radius-pill);
  flex: 0 0 auto;
}

.cl2-models-sort-btn {
  appearance: none;
  background: transparent;
  border: none;
  border-radius: var(--cl2-radius-pill);
  padding: 8px 14px;
  font: inherit;
  font-size: var(--cl2-fs-xs);
  font-weight: 600;
  color: var(--cl2-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--cl2-t-fast) var(--cl2-ease), background var(--cl2-t-fast) var(--cl2-ease);
}

.cl2-models-sort-btn:hover {
  color: var(--cl2-text);
}

.cl2-models-sort-btn:focus-visible {
  outline: 2px solid var(--cl2-accent);
  outline-offset: 2px;
}

.cl2-models-sort-btn[aria-pressed="true"] {
  background: var(--cl2-accent);
  color: var(--cl2-white);
}

/* ── Load-more / list loading + local error state ── */

#modelDirGrid[aria-busy="true"] {
  opacity: .6;
  transition: opacity var(--cl2-t-fast) var(--cl2-ease);
}

/* Pagination "show more" button: assets/ui-v2/components.css (.cl2-load-more),
   shared with the homepage explorer and the manufacturers directory. */

.cl2-models-loaderr {
  margin-top: var(--cl2-space-sm);
  padding: var(--cl2-space-sm) var(--cl2-space-md);
  background: var(--cl2-surface);
  border: 1px solid var(--cl2-border);
  border-radius: var(--cl2-radius-md);
  font-size: var(--cl2-fs-sm);
  color: var(--cl2-text-muted);
  display: flex;
  align-items: center;
  gap: var(--cl2-space-sm);
  flex-wrap: wrap;
}

/* The [hidden] attribute selector has the same specificity as the class
   selector above, and an equal-specificity author rule beats the browser's
   own `[hidden]{display:none}` UA rule -- without this, `.hidden = true`
   left a blank bordered/padded strip visible instead of removing the box. */
.cl2-models-loaderr[hidden] {
  display: none;
}

.cl2-models-retry {
  appearance: none;
  background: var(--cl2-accent);
  color: var(--cl2-white);
  border: none;
  border-radius: var(--cl2-radius-sm);
  padding: 6px 12px;
  font: inherit;
  font-size: var(--cl2-fs-xs);
  font-weight: 600;
  cursor: pointer;
}

.cl2-models-retry:focus-visible {
  outline: 2px solid var(--cl2-accent);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Everything below this line was relocated from model.php's old inline
   <style> block (directory-mode branch) and has since had its .mx-* classes
   renamed to .cl2-models-* (see the file header). Same values, same
   behavior, same list/table design/density — only the selector names moved
   to the ui-v2 standard.
   ══════════════════════════════════════════════════════════════════════════ */

/* Market-share donut removed — the hero copy now spans the full width. */
.dir-header--model .dir-hero{--dir-hero-columns:1fr}

/* ══════════════════════════════════════════════════════════════════════
   MODEL EXPLORER (.cl2-models-*) — Hybrid list + sticky preview. Scoped to the
   directory page; the shared analytics-shell card CSS is left untouched.
   ══════════════════════════════════════════════════════════════════════ */
.cl2-models-explorer{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start;
  max-width:var(--content-max);margin-inline:auto;padding:16px 24px 40px}
.cl2-models-list{display:flex;flex-direction:column;gap:7px}
.cl2-models-cat-wrap{display:flex;flex-direction:column;gap:26px}

/* ── Compact, scannable model row ── */
.cl2-models-row{display:grid;grid-template-columns:30px 96px minmax(0,1fr) 112px 150px;align-items:center;gap:14px;
  background:#fff;border:1px solid var(--border);border-radius:12px;padding:8px 14px;
  text-decoration:none;color:inherit;cursor:pointer;
  content-visibility:auto;contain-intrinsic-size:auto 70px;
  transition:border-color .14s ease, box-shadow .14s ease, transform .04s ease}
.cl2-models-row:hover,.cl2-models-row:focus-visible,.cl2-models-row.is-active{border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent) inset, 0 6px 18px rgba(37,99,235,.09);outline:none}
.cl2-models-row:active{transform:translateY(.5px)}
.cl2-models-rank{font-family:var(--mono);font-size:13px;font-weight:800;color:var(--text-dim);text-align:center;font-variant-numeric:tabular-nums}
.cl2-models-row.is-top .cl2-models-rank{color:var(--accent)}
.cl2-models-thumb{width:96px;height:54px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cl2-models-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.cl2-models-thumb .mdc-silhouette{width:84px;height:auto;color:var(--text-dim)}
/* Row identity: logo directly before the combined "maker model" title, one
   line, single title element inside the row's own <a> (the whole row is the
   canonical link). Logo omission (no src resolved) is the existing graceful
   fallback — no placeholder is reserved, exactly as before. */
.cl2-models-id{display:flex;align-items:center;gap:7px;min-width:0}
.cl2-models-name{flex:1;min-width:0;font-family:var(--display-font);font-weight:700;font-size:18px;color:var(--text);line-height:1.12;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl2-models-makerlogo{width:15px;height:15px;object-fit:contain;flex-shrink:0;opacity:.9}
.cl2-models-spark{width:100%;height:26px}
.cl2-models-spark .spark-bar{background:var(--accent)!important;opacity:.55}
/* fixed 1996–2026 axis labels (explorer row + preview) — span the centred 92px chart */
.cl2-models-sparkcell{display:flex;flex-direction:column;gap:2px;min-width:0}
.cl2-models-sparkyears,.cl2-models-pv-sparkyears{display:flex;justify-content:space-between;direction:ltr;font-family:var(--mono);font-size:9px;color:var(--text-dim);line-height:1;width:92px;margin:0 auto}
.cl2-models-pv-sparkyears{margin-top:6px}
.cl2-models-metrics{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.cl2-models-row-count{display:flex;align-items:baseline;gap:5px}
.cl2-models-row-count b{font-family:var(--sans);font-size:16px;font-weight:800;color:var(--text);letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.cl2-models-row-count span{font-size:10px;color:var(--text-muted)}
.cl2-models-statusbar{height:5px;width:130px;max-width:100%;border-radius:999px;overflow:hidden;display:flex;direction:ltr;background:rgba(0,0,0,.06)}
.cl2-models-statusbar .cl2-models-seg--active{background:var(--status-active)}
.cl2-models-statusbar .cl2-models-seg--inactive{background:var(--status-inactive)}
.cl2-models-statusbar .cl2-models-seg--final{background:var(--status-final)}

/* ── Category section headers (in category view) ── */
.cl2-models-cat-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:2px 4px 10px;border-bottom:1px solid var(--border);margin-bottom:12px}
.cl2-models-cat-titlewrap{display:flex;align-items:baseline;gap:8px;min-width:0}
.cl2-models-cat-title{font-family:var(--display-font);font-weight:700;font-size:21px;color:var(--text)}
.cl2-models-cat-en{font-family:var(--mono);font-size:11px;color:var(--text-dim);margin-inline-start:8px}
.cl2-models-cat-side{display:flex;align-items:center;gap:14px;flex-shrink:0}
.cl2-models-cat-meta{font-size:12px;color:var(--text-muted)}
.cl2-models-cat-meta strong{color:var(--text);font-weight:700}
.cl2-models-cat-link{font-size:12px;color:var(--accent);text-decoration:none;white-space:nowrap}
.cl2-models-cat-link:hover{text-decoration:underline}
.cl2-models-cat-more{margin-top:12px;width:100%;background:#fff;border:1px dashed var(--border);border-radius:10px;
  padding:9px;font-size:12.5px;color:var(--text-muted);cursor:pointer;transition:border-color .14s,color .14s}
.cl2-models-cat-more:hover{border-color:var(--accent);color:var(--accent)}

/* ── Sticky preview panel ── */
.cl2-models-preview{position:sticky;top:14px;background:#fff;border:1px solid var(--border);border-radius:16px;
  padding:18px;display:flex;flex-direction:column;gap:14px;min-height:380px}
.cl2-models-pv-empty{margin:auto;text-align:center;color:var(--text-dim);font-size:13px;line-height:1.7;padding:30px 10px}
.cl2-models-pv-empty strong{display:block;color:var(--text-muted);font-size:14px;margin-bottom:4px}
.cl2-models-pv-img{height:150px;display:flex;align-items:center;justify-content:center;background:var(--surface);border-radius:12px;padding:8px}
.cl2-models-pv-img img{max-width:100%;max-height:100%;object-fit:contain}
.cl2-models-pv-img .mdc-silhouette{width:170px;height:auto;color:var(--text-dim)}
.cl2-models-pv-head{display:flex;align-items:center;gap:11px}
.cl2-models-pv-logo{width:34px;height:34px;object-fit:contain;flex-shrink:0}
.cl2-models-pv-title{font-family:var(--display-font);font-weight:700;font-size:22px;color:var(--text);line-height:1.1}
.cl2-models-pv-en{font-family:var(--mono);font-size:12px;color:var(--text-dim);margin-top:1px}
.cl2-models-pv-total{display:flex;align-items:baseline;gap:7px;padding-bottom:2px}
.cl2-models-pv-total b{font-family:var(--sans);font-size:30px;font-weight:800;color:var(--text);letter-spacing:-.5px;font-variant-numeric:tabular-nums;line-height:1}
.cl2-models-pv-total span{font-size:12px;color:var(--text-muted)}
.cl2-models-pv-statusbar{height:7px;border-radius:999px;overflow:hidden;display:flex;direction:ltr;background:rgba(0,0,0,.06)}
.cl2-models-pv-statusbar .cl2-models-seg--active{background:var(--status-active)}
.cl2-models-pv-statusbar .cl2-models-seg--inactive{background:var(--status-inactive)}
.cl2-models-pv-statusbar .cl2-models-seg--final{background:var(--status-final)}
.cl2-models-pv-srows{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.cl2-models-pv-srow{display:grid;grid-template-columns:9px 1fr auto auto;align-items:center;gap:8px;font-size:12px}
.cl2-models-pv-sdot{width:9px;height:9px;border-radius:50%}
.cl2-models-pv-slbl{color:var(--text-muted)}
.cl2-models-pv-snum{font-family:var(--mono);color:var(--text);font-variant-numeric:tabular-nums}
.cl2-models-pv-spct{font-family:var(--mono);color:var(--text-dim);font-size:11px;min-width:34px;text-align:start}
.cl2-models-pv-meta{display:flex;flex-wrap:wrap;gap:8px;font-size:11.5px;color:var(--text-muted);border-top:1px solid var(--border);padding-top:12px}
.cl2-models-pv-meta .k{color:var(--text-dim)}
.cl2-models-pv-meta b{color:var(--text)}
.cl2-models-pv-sparkwrap{border-top:1px solid var(--border);padding-top:12px}
.cl2-models-pv-sparklbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.4px;text-transform:uppercase;color:var(--text-dim);margin-bottom:6px}
.cl2-models-pv-spark{height:44px}
.cl2-models-pv-spark .spark-bar{background:var(--accent)!important;opacity:.6}
.cl2-models-pv-hint{font-size:12.5px;color:var(--text-soft);background:var(--accent-dim);border-radius:9px;padding:9px 11px;line-height:1.5}
.cl2-models-pv-cta{margin-top:auto;display:block;text-align:center;background:var(--accent);color:#fff;font-weight:700;font-size:14px;
  text-decoration:none;border-radius:10px;padding:11px;transition:filter .14s}
.cl2-models-pv-cta:hover{filter:brightness(1.08)}

/* ── Responsive: tablet/mobile → list-first, preview hidden, rows simplify ── */
@media(max-width:980px){
  .cl2-models-explorer{grid-template-columns:1fr;padding:14px 16px 36px}
  .cl2-models-preview{display:none}
}
@media(max-width:620px){
  .cl2-models-row{grid-template-columns:24px 64px minmax(0,1fr) auto;gap:10px;padding:8px 11px}
  .cl2-models-thumb{width:64px;height:42px}
  .cl2-models-sparkcell{display:none}
  .cl2-models-statusbar{width:88px}
  .cl2-models-name{font-size:16px}
}

/* Below tablet width, .dir-search-wrap's fixed 260px flex-basis (assets/
   carlab-analytics-shell.css) leaves too little room for the sort toggle +
   year shortcuts before wrapping — pushed to its own full-width row first
   instead, mirroring the manufacturers directory's own .cl2-dir-search-field
   mobile treatment (assets/ui-v2/makers.css). Year-shortcuts' auto
   start-margin (used to push it away from search+sort on desktop) is reset
   once it's no longer sharing a row with them. */
@media (max-width: 760px) {
  .dir-controls--model .dir-search-wrap {
    flex: 1 1 100%;
    order: -1;
  }

  .dir-controls .hx-years {
    margin-inline-start: 0;
  }

  /* Search + the sort toggle read as one control area (tightened gap between
     just those two); the year-shortcuts row stays visually separate below,
     via its own larger top margin -- both rows still wrap via the same flex
     container, only the spacing changes. */
  .dir-controls--model .cl2-models-sort {
    margin-top: -4px;
  }

  .dir-controls--model .hx-years {
    margin-top: 8px;
  }
}

/* ── Year shortcuts in the directory controls row — same control + visual
     language as the homepage / manufacturers page (replaces the count block). ── */
.dir-controls .hx-years{flex:1 1 320px;min-width:0;margin-inline-start:auto}
.hx-years{display:flex;align-items:center;gap:6px;max-width:100%;min-width:0}
.hx-years-scroll{display:flex;align-items:center;gap:6px;flex:1 1 auto;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
.hx-years-scroll::-webkit-scrollbar{display:none}
.hx-year{flex:0 0 auto;font-family:inherit;font-size:12px;font-weight:600;line-height:1;padding:7px 11px;border:1px solid var(--border);border-radius:999px;background:#fff;color:var(--text-muted);cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s,color .12s}
.hx-year:hover{border-color:var(--accent);color:var(--accent)}
.hx-year.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
.hx-year:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.hx-year-custom{position:relative;flex:0 0 auto}
.hx-year-custombtn{display:inline-flex;align-items:center;gap:5px}
.hx-year-pop{position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:40;width:262px;max-width:80vw;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 30px rgba(15,23,42,.16);padding:14px 16px 13px}
.hx-year-pop[hidden]{display:none}
.hx-year-pop .hx-poplabel{font-size:11px;font-weight:700;color:var(--text-muted);margin-bottom:8px}
.hx-year-pop .hx-range-vals{display:flex;justify-content:space-between;font-size:12px;color:var(--text-muted);margin-bottom:4px}
.hx-year-pop .hx-range-vals b{color:var(--text);font-variant-numeric:tabular-nums}
.hx-year-pop .hx-slider{position:relative;height:30px;direction:ltr}
.hx-year-pop .hx-slider .hx-track{position:absolute;top:13px;left:0;right:0;height:4px;border-radius:999px;background:var(--surface-2,#e9edf2)}
.hx-year-pop .hx-slider .hx-track-fill{position:absolute;top:13px;height:4px;border-radius:999px;background:var(--accent)}
.hx-year-pop .hx-slider input[type=range]{position:absolute;top:0;left:0;width:100%;height:30px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.hx-year-pop .hx-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:17px;height:17px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 1px 4px rgba(17,24,39,.18);cursor:pointer;margin-top:6.5px}
.hx-year-pop .hx-slider input[type=range]::-moz-range-thumb{pointer-events:auto;width:17px;height:17px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 1px 4px rgba(17,24,39,.18);cursor:pointer}
.hx-year-pop .hx-slider input[type=range]::-webkit-slider-runnable-track{background:transparent;height:30px}
.hx-year-pop .hx-slider input[type=range]::-moz-range-track{background:transparent;height:30px}
.hx-year-apply{margin-top:13px;width:100%;font-size:12px;font-weight:700;padding:7px 10px;border:1px solid var(--accent);border-radius:8px;background:var(--accent);color:#fff;cursor:pointer}