/* CarLAB ui-v2 — index.php page-specific blocks.
   Block 3: homepage update/freshness strip (.cl2-update-strip).
   Block 4: national metrics strip (.cl2-metrics). */

/* Below desktop width, the shared .main-content max-width:80%
   (carlab-analytics-shell.css) is more gutter than the homepage's own
   sections (explorer, category grid) can spare — neutralized
   here exactly as assets/ui-v2/maker.css, assets/ui-v2/model.css,
   assets/ui-v2/makers.css and assets/ui-v2/models.css all do for their own
   pages (same breakpoint, same value, same cascade-order reasoning: this
   file loads after the shared shell stylesheet, so the same-specificity
   class wins). */
@media (max-width: 1180px) {
  .main-content {
    max-width: none;
  }
}

.cl2-home-title {
  margin: var(--cl2-space-lg) 0 0;
  font-size: var(--cl2-fs-2xl);
  font-weight: 700;
  color: var(--cl2-text);
}

/* ── Homepage hero — intro / 2026 snapshot / latest update (block 3.5) ──────
   Right (intro, 50%) / middle (2026, 25%) / left (last update, 25%) in RTL
   DOM order — a dir="rtl" grid places the first child in the rightmost
   column, so this same source order also gives the correct mobile stacking
   order (intro, then 2026, then last update) with no explicit reordering. */
.cl2-hero {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--cl2-space-lg);
  margin: var(--cl2-space-lg) 0 0;
}

.cl2-hero-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cl2-space-md);
  background: var(--cl2-white);
  border: 1px solid var(--cl2-border);
  border-radius: var(--cl2-radius-lg);
  box-shadow: var(--cl2-shadow-sm);
  padding: var(--cl2-space-xl);
}

.cl2-hero-title {
  margin: 0;
  font-size: var(--cl2-fs-lg);
  font-weight: 700;
  color: var(--cl2-text);
  letter-spacing: 0.4px;
}

.cl2-hero-intro .cl2-hero-title {
  font-family: "Almoni Tzar", var(--display-font);
  font-size: 30px;
}

.cl2-hero-2026 .cl2-hero-title,
.cl2-hero-lastupdate .cl2-hero-title {
  font-family: "Almoni Tzar", var(--display-font);
  font-size: 26px;
}

/* Decorative background illustration, lower-left of the intro card only.
   overflow:hidden + z-index:0 give the card its own stacking context, so
   the ::after's z-index:-1 stays behind this card's own text without
   escaping to compare against sibling cards or the page below. */
.cl2-hero-intro {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.cl2-hero-intro::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../img/homepage-mapping-shapes.webp);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 252px auto;
  pointer-events: none;
  z-index: -1;
  filter: brightness(0);
}

/* Below the hero's own single-column breakpoint (.cl2-hero, same 1080px)
   the intro card is much shorter relative to its wrapped text, leaving too
   little empty space under the paragraph to show this without crowding it. */
@media (max-width: 1080px) {
  .cl2-hero-intro::after {
    display: none;
  }
}

.cl2-hero-text {
  margin: 0;
  font-size: var(--cl2-fs-md);
  line-height: 1.6;
  color: var(--cl2-text-muted);
}

.cl2-hero-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cl2-hero-list-row {
  display: flex;
  align-items: baseline;
  gap: var(--cl2-space-sm);
  padding: 2px 8px 3px 9px;
  border-radius: 6px;
}

.cl2-hero-list-row:nth-child(odd) {
  background: #f1f1f1;
}

.cl2-hero-list-row:nth-child(even) {
  background: #fff;
}

.cl2-hero-list-rank {
  flex: 0 0 auto;
  min-width: 14px;
  font-family: var(--cl2-font-mono);
  font-size: var(--cl2-fs-sm);
  font-weight: 800;
  color: var(--cl2-accent);
  font-variant-numeric: tabular-nums;
}

.cl2-hero-list-name {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: var(--cl2-space-2xs);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--cl2-fs-sm);
  color: inherit;
  text-decoration: none;
}

.cl2-hero-list-maker {
  color: var(--cl2-text-muted);
}

.cl2-hero-list-model {
  color: var(--cl2-text);
  font-weight: 600;
}

.cl2-hero-list-count {
  flex: 0 0 auto;
  font-size: var(--cl2-fs-sm);
  font-weight: 700;
  color: var(--cl2-text);
  font-variant-numeric: tabular-nums;
}

.cl2-hero-empty {
  margin: 0;
  font-size: var(--cl2-fs-sm);
  color: var(--cl2-text-muted); /* --cl2-text-dim fails WCAG AA (2.54:1) at this size */
}

.cl2-hero-stat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cl2-space-xs);
}

.cl2-hero-stat-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cl2-space-sm);
}

.cl2-hero-stat-value {
  font-size: var(--cl2-fs-lg);
  font-weight: 700;
  color: var(--cl2-text);
  font-variant-numeric: tabular-nums;
}

/* Same semantic palette as the national metrics strip's .cl2-metric--active/--inactive/--final
   (below in this file) — new-active (green), became-inactive (orange), deregistered (red).
   Ownership updates carries no modifier and inherits the neutral color above, same as the
   strip's own un-modified tiles (total/models/makers). */
.cl2-hero-stat-value--active {
  color: #469647;
}

.cl2-hero-stat-value--inactive {
  color: #eba124;
}

.cl2-hero-stat-value--final {
  color: #d63737;
}

.cl2-hero-stat-label {
  font-size: var(--cl2-fs-sm);
  color: var(--cl2-text-muted);
}

/* ── 2026 snapshot: 10-row list, 5 visible + faded 6th + expand toggle ────── */
.cl2-hero-2026-wrap {
  position: relative;
  max-height: 155px; /* 5 full rows (each 20px + 8px gap) + ~75% of row 6 under the fade */
  overflow: hidden;
}

.cl2-hero-2026-wrap.is-expanded {
  max-height: none;
}

.cl2-hero-fade {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 16px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--cl2-white));
  pointer-events: none;
}

.cl2-hero-2026-wrap.is-expanded .cl2-hero-fade {
  display: none;
}

.cl2-hero-2026-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cl2-space-md);
  margin-top: auto;
  padding-top: var(--cl2-space-xs);
}

.cl2-hero-expand-btn,
.cl2-hero-more-link {
  color: var(--cl2-accent);
  font-size: var(--cl2-fs-sm);
  font-weight: 600;
  text-decoration: none;
}

/* Hidden until the list is expanded (reacts to the same is-expanded class
   initHero2026Expand() already toggles on #cl2Hero2026Wrap — general sibling
   selector since .cl2-hero-more-link lives in the footer div right after
   .cl2-hero-2026-wrap, not inside it) — hides again on collapse for free.
   Scoped to --expandable (the >5-models case, the only one with an expand
   button at all) so the <=5-models case, which has nothing to expand, keeps
   showing the link exactly as before. */
.cl2-hero-2026-footer--expandable .cl2-hero-more-link {
  display: none;
}

.cl2-hero-2026-wrap.is-expanded ~ .cl2-hero-2026-footer--expandable .cl2-hero-more-link {
  display: inline;
}

.cl2-hero-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--cl2-space-xs);
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--cl2-font-sans);
  cursor: pointer;
}

.cl2-hero-chevron {
  transition: transform var(--cl2-t-medium) var(--cl2-ease);
}

.cl2-hero-expand-btn[aria-expanded="true"] .cl2-hero-chevron {
  transform: rotate(180deg);
}

.cl2-hero-more-link:hover {
  text-decoration: underline;
}

.cl2-hero-expand-btn:focus-visible,
.cl2-hero-more-link:focus-visible,
.cl2-hero-toggle-btn:focus-visible,
.cl2-hero-list-name:focus-visible {
  outline: 2px solid var(--cl2-accent);
  outline-offset: 2px;
  border-radius: var(--cl2-radius-sm);
}

.section-divider--hero {
  margin-top: var(--cl2-space-lg);
}

/* ── Latest-update card: two-view segmented toggle ───────────────────────── */
.cl2-hero-toggle {
  display: flex;
  gap: var(--cl2-space-2xs);
  background: var(--cl2-surface);
  border-radius: var(--cl2-radius-md);
  padding: var(--cl2-space-2xs);
}

.cl2-hero-toggle-btn {
  flex: 1 1 0;
  border: none;
  background: none;
  border-radius: var(--cl2-radius-sm);
  padding: var(--cl2-space-2xs) var(--cl2-space-sm);
  font-family: var(--cl2-font-sans);
  font-size: var(--cl2-fs-xs);
  font-weight: 600;
  color: var(--cl2-text-muted);
  cursor: pointer;
}

.cl2-hero-toggle-btn.is-active {
  background: var(--cl2-white);
  color: var(--cl2-accent);
  box-shadow: var(--cl2-shadow-sm);
}

/* ── Latest-update card: database-freshness indicator ─────────────────────────
   Replaces the card's old visible "עודכן: dd/mm/yyyy" line. The exact date now lives in
   the dot's tooltip and in its aria-label; see includes/update_freshness.php for the bands.

   Absolutely positioned so it adds NO height and cannot reflow the card — the three hero
   cards share a grid row and any growth here would push all of them. `position: relative`
   is scoped to this card alone rather than added to .cl2-hero-card, so the other two are
   untouched. inset-inline-end resolves to the LEFT edge in this RTL page, i.e. the corner
   opposite the right-aligned title, which is why the two can never collide. */
.cl2-hero-lastupdate {
  position: relative;
}

.cl2-hero-freshness {
  position: absolute;
  /* Vertically centred on the title's first line: 1px border + 20px card padding + half of the
     26px title's ~31px line box. Measured, not guessed — at `top: 26px` the dot sat 9px high. */
  top: calc(var(--cl2-space-xl) + 16px);
  inset-inline-end: var(--cl2-space-xl);   /* = the card's own padding, so it sits on the text edge */
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cl2-freshness, var(--cl2-text-dim));
  /* Soft halo in the same hue — reads as a status pip rather than a bullet, without adding
     weight that would compete with the title. */
  box-shadow: 0 0 0 3px var(--cl2-freshness-halo, transparent);
  cursor: default;
}

/* Same three colours the card's own metrics use (.cl2-hero-stat-value--active/--inactive/--final
   above): one palette for "good / warning / bad" across the whole card. */
.cl2-hero-freshness--fresh {
  --cl2-freshness: #469647;
  --cl2-freshness-halo: rgba(70, 150, 71, .16);
}

.cl2-hero-freshness--aging {
  --cl2-freshness: #eba124;
  --cl2-freshness-halo: rgba(235, 161, 36, .16);
}

.cl2-hero-freshness--stale {
  --cl2-freshness: #d63737;
  --cl2-freshness-halo: rgba(214, 55, 55, .16);
}

/* The tooltip. Same attr(data-tooltip) ::after pattern .cl2-ownership-card (components.css)
   and .ownership-bar (carlab-analytics-shell.css) already use — no new dependency, no JS.
   Opens DOWNWARD because the dot sits at the card's top edge, and toward the reading start
   (rightward in RTL, i.e. into the card) because it sits at the inline-end edge — so it can
   never be clipped by the card or run off the viewport. */
.cl2-hero-freshness::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: -4px;
  padding: 6px 9px;
  border-radius: var(--cl2-radius-md);
  background: rgba(17, 24, 39, .94);
  color: #fff;
  font-family: var(--cl2-font-sans);
  font-size: var(--cl2-fs-xs);
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .08s ease, transform .08s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  z-index: 20;
}

/* :focus as well as :focus-visible — the dot is keyboard-reachable and the tooltip is the only
   place the exact date still lives, so it must appear however focus arrived. */
.cl2-hero-freshness:hover::after,
.cl2-hero-freshness:focus::after,
.cl2-hero-freshness:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.cl2-hero-freshness:focus-visible {
  outline: 2px solid var(--cl2-accent);
  outline-offset: 3px;
}

@media (max-width: 1080px) {
  .cl2-hero {
    grid-template-columns: 1fr;
  }
}

.cl2-update-strip {
  padding: var(--cl2-space-lg) 0;
}

.cl2-update-strip-line {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--cl2-space-sm) var(--cl2-space-md);
  font-family: var(--cl2-font-sans);
  font-size: var(--cl2-fs-sm);
  color: var(--cl2-text-muted);
}

.cl2-update-strip-item strong,
.cl2-update-strip-item time {
  color: var(--cl2-text);
  font-weight: 700;
}

.cl2-update-strip-sep {
  color: var(--cl2-text-dim);
}

.cl2-update-strip-link {
  margin-inline-start: auto;
  color: var(--cl2-accent);
  font-weight: 600;
  white-space: nowrap;
}

.cl2-update-strip-link:hover {
  text-decoration: underline;
}

.cl2-update-strip-line--empty {
  color: var(--cl2-text-dim);
}

@media (max-width: 480px) {
  .cl2-update-strip-link {
    margin-inline-start: 0;
    flex-basis: 100%;
  }
}

/* ── National metrics strip ────────────────────────────────────────────
   Five plain-text blocks in one compact row. No cards, no colour coding,
   no icons, no sparklines — a tooltip trigger is the only interactive
   element. Catalog counts (models/makers) are read-only, never links. */

.cl2-metrics {
  /* Same card treatment as .cl2-hero-card, so this strip visually belongs to
     the same card system as the hero cards above it. */
  background: var(--cl2-white);
  border: 1px solid var(--cl2-border);
  border-radius: var(--cl2-radius-lg);
  box-shadow: var(--cl2-shadow-sm);
  padding: var(--cl2-space-xl);
}

.cl2-metrics-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--cl2-space-lg) var(--cl2-space-2xl);
}

.cl2-metric {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  text-align: center;
  gap: var(--cl2-space-2xs);
  flex: 1 1 110px;
  min-width: 0;
}

.cl2-metric-value {
  margin: 0;
  font-size: var(--cl2-fs-xl);
  font-weight: 800;
  line-height: 1.1;
  color: var(--cl2-text);
  white-space: nowrap;
}

.cl2-metric--active .cl2-metric-value {
  color: #469647;
}

.cl2-metric--inactive .cl2-metric-value {
  color: #eba124;
}

.cl2-metric--final .cl2-metric-value {
  color: #d63737;
}

.cl2-metric-value-sep {
  color: var(--cl2-text-dim);
  font-weight: 600;
}

.cl2-metric-label {
  position: relative;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cl2-space-2xs);
  font-size: var(--cl2-fs-xs);
  font-weight: 600;
  color: var(--cl2-text-muted);
  white-space: nowrap;
}

.cl2-metric-label .cl2-metric-tip-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border: 1px solid var(--cl2-border-dark);
  border-radius: var(--cl2-radius-pill);
  color: var(--cl2-text-dim);
  font-size: 10px;
  line-height: 1;
  flex: 0 0 auto;
}

.cl2-metric-label .cl2-metric-tip-trigger:hover,
.cl2-metric-label .cl2-metric-tip-trigger:focus {
  color: var(--cl2-accent);
  border-color: var(--cl2-accent);
  outline: none;
}

.cl2-metric-tip {
  position: absolute;
  top: calc(100% + var(--cl2-space-sm));
  inset-inline-end: 0;
  z-index: 20;
  width: max-content;
  max-width: 240px;
  padding: var(--cl2-space-sm) var(--cl2-space-md);
  background: var(--cl2-white);
  border: 1px solid var(--cl2-border);
  border-radius: var(--cl2-radius-md);
  box-shadow: var(--cl2-shadow-md);
  font-size: var(--cl2-fs-xs);
  font-weight: 400;
  line-height: 1.5;
  color: var(--cl2-text-muted);
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--cl2-t-fast) var(--cl2-ease);
}

.cl2-metric-tip-trigger:hover + .cl2-metric-tip,
.cl2-metric-tip-trigger:focus + .cl2-metric-tip {
  opacity: 1;
  pointer-events: auto;
}

.cl2-metrics-empty {
  margin: 0;
  font-size: var(--cl2-fs-sm);
  color: var(--cl2-text-dim);
}

@media (min-width: 769px) {
  .cl2-metric {
    padding-inline-start: var(--cl2-space-2xl);
    border-inline-start: 1px solid var(--cl2-border);
  }

  .cl2-metric:first-child {
    padding-inline-start: 0;
    border-inline-start: none;
  }
}

@media (max-width: 768px) {
  .cl2-metric {
    flex: 1 1 45%;
  }
}

@media (max-width: 480px) {
  .cl2-metric-value {
    font-size: 22px;
  }
}

/* ── Model explorer ─────────────────────────────────────────────────────
   Filters sidebar + dense result-row list: search, year window, delivery
   range, maker/category checklists, sort, append-only "load more"
   pagination, preview tab. */

.cl2-explorer-panel {
  /* Deliberately no card chrome (background/border/shadow) — the only
     framing is .cl2-explorer-headrow's own border-bottom below. */
}

/* ── Year-navigation row: two distinct, separately-framed groups (year
   shortcuts vs. custom-range) instead of a single continuous control.
   Both groups stay INSIDE the one #hxYears wrapper below (its click
   delegation and updateYearUI() both query .cl2-explorer-year descendants
   of #hxYears, including the custom-range button) — the split is purely
   visual, done via #hxYears's own justify-content:space-between. ── */
.cl2-explorer-headrow {
  display: flex;
  align-items: flex-start;
  gap: var(--cl2-space-sm) var(--cl2-space-lg);
  flex-wrap: wrap;
  padding: var(--cl2-space-lg) 0;
  border-bottom: 1px solid var(--cl2-border);
}

.cl2-explorer-years {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cl2-space-md);
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Tab-style year navigation — same unified-container recipe as the sidebar's
   own .cl2-explorer-tabs (סינון / תצוגה מקדימה): one bordered, padded surface
   strip instead of many individually-bordered floating pills, with the
   active tab picked out by a white/elevated fill. Only the buttons scroll
   horizontally; the custom-range popover sits OUTSIDE this overflow context
   so it's never clipped by the scrollbar. flex:0 1 (no grow) so it keeps its
   own natural width instead of stretching across the row — #hxYears's own
   justify-content:space-between is what pushes this group and the
   custom-range group apart into two visually distinct clusters. */
.cl2-explorer-years-scroll {
  display: flex;
  align-items: center;
  gap: var(--cl2-space-2xs);
  flex: 0 1 auto;
  min-width: 0;
  background: var(--cl2-surface);
  border: 1px solid var(--cl2-border);
  border-radius: var(--cl2-radius-lg);
  padding: var(--cl2-space-2xs);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.cl2-explorer-years-scroll::-webkit-scrollbar {
  display: none;
}

.cl2-explorer-year {
  flex: 0 0 auto;
  font-family: inherit;
  font-size: var(--cl2-fs-sm);
  font-weight: 700;
  line-height: 1;
  height: 32px;
  padding: 0 var(--cl2-space-md);
  border: none;
  border-radius: var(--cl2-radius-md);
  background: none;
  color: var(--cl2-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--cl2-t-fast) var(--cl2-ease),
    color var(--cl2-t-fast) var(--cl2-ease);
}

.cl2-explorer-year:hover {
  color: var(--cl2-accent);
}

.cl2-explorer-year.is-on {
  background: var(--cl2-white);
  color: var(--cl2-accent);
  box-shadow: var(--cl2-shadow-sm);
}

.cl2-explorer-year:focus-visible {
  outline: 2px solid var(--cl2-accent);
  outline-offset: 1px;
}

/* Custom-range control — deliberately NOT part of the tab strip above (it
   toggles a popover, not a year filter by itself) so it keeps its own
   bordered/pill look, as its own separate group at the opposite end of the
   row from the year-shortcuts strip (#hxYears's justify-content:space-between
   + gap above provide the visual separation — no margin needed here). */
.cl2-explorer-year-custom {
  position: relative;
  flex: 0 0 auto;
}

.cl2-explorer-year-custombtn {
  display: inline-flex;
  align-items: center;
  gap: var(--cl2-space-xs);
  height: 32px;
  box-sizing: border-box;
  padding: 0 var(--cl2-space-md);
  border: 1px solid var(--cl2-border);
  border-radius: var(--cl2-radius-pill);
  background: var(--cl2-surface);
  color: var(--cl2-text-muted);
}

.cl2-explorer-year-custombtn:hover {
  border-color: var(--cl2-accent);
  color: var(--cl2-accent);
}

.cl2-explorer-year-custombtn[aria-expanded="true"] {
  border-color: var(--cl2-accent);
  color: var(--cl2-accent);
  background: var(--cl2-white);
}

.cl2-explorer-year-pop {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  z-index: 40;
  width: 262px;
  max-width: 80vw;
  background: var(--cl2-white);
  border: 1px solid var(--cl2-border);
  border-radius: var(--cl2-radius-lg);
  box-shadow: var(--cl2-shadow-lg);
  padding: var(--cl2-space-lg) var(--cl2-space-lg) var(--cl2-space-md);
}

.cl2-explorer-year-pop[hidden] {
  display: none;
}

.cl2-explorer-year-pop .cl2-explorer-poplabel {
  font-size: var(--cl2-fs-xs);
  font-weight: 700;
  color: var(--cl2-text-muted);
  margin-bottom: var(--cl2-space-sm);
}

.cl2-explorer-year-apply {
  margin-top: var(--cl2-space-md);
  width: 100%;
  font-size: var(--cl2-fs-sm);
  font-weight: 700;
  padding: var(--cl2-space-sm) var(--cl2-space-md);
  border: 1px solid var(--cl2-accent);
  border-radius: var(--cl2-radius-md);
  background: var(--cl2-accent);
  color: var(--cl2-white);
  cursor: pointer;
}

/* ── Two-column grid: result list (main) + filters/preview (sidebar) ── */
.cl2-explorer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 296px;
  gap: var(--cl2-space-xl);
  align-items: start;
  padding: var(--cl2-space-lg) 0 var(--cl2-space-2xl);
}

.cl2-explorer-main {
  min-width: 0;
}

/* ── Filters sidebar ── */
.cl2-explorer-filters {
  position: sticky;
  top: 14px;
  display: flex;
  flex-direction: column;
  gap: var(--cl2-space-lg);
  background: var(--cl2-white);
  border: 1px solid var(--cl2-border);
  border-radius: var(--cl2-radius-lg);
  padding: var(--cl2-space-lg);
}

.cl2-explorer-fgroup {
  display: flex;
  flex-direction: column;
  gap: var(--cl2-space-sm);
}

.cl2-explorer-fgroup + .cl2-explorer-fgroup {
  border-top: 1px solid var(--cl2-border);
  padding-top: var(--cl2-space-lg);
}

.cl2-explorer-flabel {
  font-size: var(--cl2-fs-xs);
  font-family: var(--cl2-font-mono);
  font-weight: 700;
  color: var(--cl2-text-dim);
  text-transform: uppercase;
  letter-spacing: .4px;
}

.cl2-explorer-input {
  height: 38px;
  border: 1px solid var(--cl2-border);
  border-radius: var(--cl2-radius-md);
  background: var(--cl2-white);
  padding: 0 var(--cl2-space-md);
  font-size: var(--cl2-fs-md);
  color: var(--cl2-text);
  width: 100%;
}

.cl2-explorer-input:focus {
  outline: 2px solid var(--cl2-accent-dim);
  border-color: var(--cl2-accent);
}

.cl2-explorer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cl2-space-sm);
}

.cl2-explorer-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--cl2-space-sm);
  background: var(--cl2-accent-dim);
  color: var(--cl2-accent);
  border: 1px solid var(--cl2-accent-mid);
  border-radius: var(--cl2-radius-pill);
  padding: var(--cl2-space-2xs) var(--cl2-space-xs) var(--cl2-space-2xs) var(--cl2-space-md);
  font-size: var(--cl2-fs-sm);
  font-weight: 600;
}

.cl2-explorer-chip button {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: none;
  border-radius: var(--cl2-radius-pill);
  background: var(--cl2-accent-mid);
  color: var(--cl2-accent);
  cursor: pointer;
  font-size: var(--cl2-fs-sm);
  line-height: 1;
}

.cl2-explorer-chip button:hover {
  background: var(--cl2-accent);
  color: var(--cl2-white);
}

.cl2-explorer-checklist {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 208px;
  overflow: auto;
  margin: calc(-1 * var(--cl2-space-2xs)) calc(-1 * var(--cl2-space-xs));
  padding: var(--cl2-space-2xs) var(--cl2-space-xs);
}

.cl2-explorer-check {
  display: flex;
  align-items: center;
  gap: var(--cl2-space-sm);
  padding: var(--cl2-space-xs) var(--cl2-space-sm);
  border-radius: var(--cl2-radius-md);
  cursor: pointer;
  font-size: var(--cl2-fs-md);
  color: var(--cl2-text);
}

.cl2-explorer-check:hover {
  background: var(--cl2-surface);
}

.cl2-explorer-check input {
  width: 15px;
  height: 15px;
  accent-color: var(--cl2-accent);
  flex: 0 0 auto;
  margin: 0;
}

.cl2-explorer-check .cl2-explorer-check-n {
  margin-inline-start: auto;
  font-family: var(--cl2-font-mono);
  font-size: var(--cl2-fs-2xs);
  color: var(--cl2-text-dim);
}

.cl2-explorer-check.is-on {
  color: var(--cl2-accent);
  font-weight: 600;
}

.cl2-explorer-empty-note {
  font-size: var(--cl2-fs-xs);
  color: var(--cl2-text-dim);
  padding: var(--cl2-space-xs) var(--cl2-space-2xs);
}

/* ── Dual delivery-range slider ── */
.cl2-explorer-range-vals {
  display: flex;
  justify-content: space-between;
  font-size: var(--cl2-fs-sm);
  color: var(--cl2-text-muted);
}

.cl2-explorer-range-vals b {
  color: var(--cl2-text);
  font-variant-numeric: tabular-nums;
}

.cl2-explorer-slider {
  position: relative;
  height: 30px;
}

.cl2-explorer-slider .cl2-explorer-track {
  position: absolute;
  top: 13px;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: var(--cl2-radius-pill);
  background: var(--cl2-surface-2);
}

.cl2-explorer-slider .cl2-explorer-track-fill {
  position: absolute;
  top: 13px;
  height: 4px;
  border-radius: var(--cl2-radius-pill);
  background: var(--cl2-accent);
}

.cl2-explorer-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;
}

.cl2-explorer-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--cl2-white);
  border: 2px solid var(--cl2-accent);
  box-shadow: var(--cl2-shadow-sm);
  cursor: pointer;
  /* Track-fill sits at top:13px, height:4px (center y=15). The runnable-track
     below is stretched to the full 30px input height, so this 17px thumb
     needs margin-top: 15 - 17/2 = 6.5px to land its own center on that same
     y=15 line instead of the top of the 30px box. */
  margin-top: 6.5px;
}

.cl2-explorer-slider input[type=range]::-moz-range-thumb {
  pointer-events: auto;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--cl2-white);
  border: 2px solid var(--cl2-accent);
  box-shadow: var(--cl2-shadow-sm);
  cursor: pointer;
}

.cl2-explorer-slider input[type=range]::-webkit-slider-runnable-track {
  background: transparent;
  height: 30px;
}

.cl2-explorer-slider input[type=range]::-moz-range-track {
  background: transparent;
  height: 30px;
}

.cl2-explorer-reset {
  height: 36px;
  border: 1px solid var(--cl2-border);
  border-radius: var(--cl2-radius-md);
  background: var(--cl2-white);
  color: var(--cl2-text-muted);
  font-weight: 700;
  cursor: pointer;
  font-size: var(--cl2-fs-md);
}

.cl2-explorer-reset:hover {
  border-color: var(--cl2-text-muted);
  color: var(--cl2-text);
}

/* ── Sidebar tabs (סינון / תצוגה מקדימה) ── */
.cl2-explorer-tabs {
  display: flex;
  gap: var(--cl2-space-2xs);
  background: var(--cl2-surface);
  border: 1px solid var(--cl2-border);
  border-radius: var(--cl2-radius-lg);
  padding: var(--cl2-space-2xs);
  margin-bottom: var(--cl2-space-lg);
}

.cl2-explorer-tab {
  flex: 1;
  border: none;
  background: none;
  padding: var(--cl2-space-sm) var(--cl2-space-md);
  border-radius: var(--cl2-radius-md);
  font-size: var(--cl2-fs-sm);
  font-weight: 700;
  color: var(--cl2-text-muted);
  cursor: pointer;
}

.cl2-explorer-tab.is-on {
  background: var(--cl2-white);
  color: var(--cl2-accent);
  box-shadow: var(--cl2-shadow-sm);
}

.cl2-explorer-tabpanel {
  display: flex;
  flex-direction: column;
  gap: var(--cl2-space-lg);
}

.cl2-explorer-tabpanel[hidden] {
  display: none;
}

/* ── Search autocomplete dropdown ── */
.cl2-explorer-search-wrap {
  position: relative;
}

.cl2-explorer-drop {
  position: absolute;
  top: calc(100% + 4px);
  inset-inline: 0;
  z-index: 30;
  background: var(--cl2-white);
  border: 1px solid var(--cl2-border);
  border-radius: var(--cl2-radius-lg);
  box-shadow: var(--cl2-shadow-lg);
  max-height: 264px;
  overflow: auto;
  padding: var(--cl2-space-xs);
}

.cl2-explorer-drop[hidden] {
  display: none;
}

.cl2-explorer-drop-item {
  display: flex;
  align-items: center;
  gap: var(--cl2-space-sm);
  padding: var(--cl2-space-sm);
  border-radius: var(--cl2-radius-md);
  cursor: pointer;
}

.cl2-explorer-drop-item:hover,
.cl2-explorer-drop-item.is-active {
  background: var(--cl2-accent-dim);
}

.cl2-explorer-drop-item .cl2-explorer-drop-name {
  font-weight: 700;
  font-size: var(--cl2-fs-md);
  color: var(--cl2-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cl2-explorer-drop-item .cl2-explorer-drop-maker {
  font-size: var(--cl2-fs-xs);
  color: var(--cl2-text-muted);
  margin-inline-start: auto;
  white-space: nowrap;
  flex: 0 0 auto;
}

.cl2-explorer-drop-empty {
  padding: var(--cl2-space-sm);
  font-size: var(--cl2-fs-sm);
  color: var(--cl2-text-dim);
}

/* ── Preview tab content ── */
.cl2-explorer-pv {
  display: flex;
  flex-direction: column;
  gap: var(--cl2-space-md);
}

.cl2-explorer-pv-empty {
  margin: auto;
  text-align: center;
  color: var(--cl2-text-dim);
  font-size: var(--cl2-fs-md);
  line-height: 1.7;
  padding: var(--cl2-space-2xl) var(--cl2-space-sm);
}

.cl2-explorer-pv-empty strong {
  display: block;
  color: var(--cl2-text-muted);
  font-size: var(--cl2-fs-md);
  margin-bottom: var(--cl2-space-xs);
}

.cl2-explorer-pv-img {
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cl2-radius-lg);
  padding: var(--cl2-space-sm);
}

.cl2-explorer-pv-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.cl2-explorer-pv-img .mdc-silhouette {
  width: 150px;
  height: auto;
  color: var(--cl2-text-dim);
}

.cl2-explorer-pv-head {
  display: flex;
  align-items: center;
  gap: var(--cl2-space-md);
}

.cl2-explorer-pv-logo {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex: 0 0 auto;
}

/* --display-font (Almoni Tzar fallback chain) intentionally not used here —
   same simplification as the rest of ui-v2: one UI font, no serif-fallback
   leak into card/row titles. */
.cl2-explorer-pv-title {
  font-family: var(--cl2-font-sans);
  font-weight: 700;
  font-size: var(--cl2-fs-2xl);
  color: var(--cl2-text);
  line-height: 1.1;
}

.cl2-explorer-pv-en {
  font-family: var(--cl2-font-mono);
  font-size: var(--cl2-fs-xs);
  color: var(--cl2-text-dim);
  margin-top: 1px;
}

.cl2-explorer-pv-total {
  display: flex;
  align-items: baseline;
  gap: var(--cl2-space-sm);
}

.cl2-explorer-pv-total b {
  font-family: var(--cl2-font-sans);
  font-size: var(--cl2-fs-xl);
  font-weight: 800;
  color: var(--cl2-text);
  letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.cl2-explorer-pv-total span {
  font-size: var(--cl2-fs-sm);
  color: var(--cl2-text-muted);
}

.cl2-explorer-pv-srows {
  display: flex;
  flex-direction: column;
  gap: var(--cl2-space-xs);
}

.cl2-explorer-pv-srow {
  display: grid;
  grid-template-columns: 9px 1fr auto auto;
  align-items: center;
  gap: var(--cl2-space-sm);
  font-size: var(--cl2-fs-sm);
}

.cl2-explorer-pv-sdot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.cl2-explorer-pv-slbl {
  color: var(--cl2-text-muted);
}

.cl2-explorer-pv-snum {
  font-family: var(--cl2-font-mono);
  color: var(--cl2-text);
  font-variant-numeric: tabular-nums;
}

.cl2-explorer-pv-spct {
  font-family: var(--cl2-font-mono);
  color: var(--cl2-text-dim);
  font-size: var(--cl2-fs-xs);
  min-width: 32px;
  text-align: start;
}

.cl2-explorer-pv-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cl2-space-sm);
  font-size: var(--cl2-fs-xs);
  color: var(--cl2-text-muted);
  border-top: 1px solid var(--cl2-border);
  padding-top: var(--cl2-space-md);
}

.cl2-explorer-pv-meta b {
  color: var(--cl2-text);
}

.cl2-explorer-pv-sparkwrap {
  border-top: 1px solid var(--cl2-border);
  padding-top: var(--cl2-space-md);
}

.cl2-explorer-pv-sparklbl {
  font-family: var(--cl2-font-mono);
  font-size: var(--cl2-fs-3xs);
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--cl2-text-dim);
  margin-bottom: var(--cl2-space-sm);
}

.cl2-explorer-pv-spark {
  height: 40px;
}

.cl2-explorer-pv-spark .spark-card {
  width: 100% !important;
  height: 100% !important;
}

.cl2-explorer-pv-cta {
  display: block;
  text-align: center;
  background: var(--cl2-accent);
  color: var(--cl2-white);
  font-weight: 700;
  font-size: var(--cl2-fs-md);
  text-decoration: none;
  border-radius: var(--cl2-radius-lg);
  padding: var(--cl2-space-md);
}

.cl2-explorer-pv-cta:hover {
  filter: brightness(1.08);
}

/* ── Main list column: toolbar (count + sort) ── */
.cl2-explorer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cl2-space-md);
  flex-wrap: wrap;
  margin-bottom: var(--cl2-space-md);
}

.cl2-explorer-count {
  font-size: var(--cl2-fs-md);
  color: var(--cl2-text-muted);
}

.cl2-explorer-count b {
  color: var(--cl2-text);
  font-weight: 800;
}

.cl2-explorer-sort {
  display: inline-flex;
  background: var(--cl2-surface);
  border: 1px solid var(--cl2-border);
  border-radius: var(--cl2-radius-lg);
  padding: var(--cl2-space-2xs);
  gap: var(--cl2-space-2xs);
}

.cl2-explorer-sort button {
  border: none;
  background: none;
  padding: var(--cl2-space-sm) var(--cl2-space-md);
  border-radius: var(--cl2-radius-md);
  font-size: var(--cl2-fs-sm);
  font-weight: 600;
  color: var(--cl2-text-muted);
  cursor: pointer;
}

.cl2-explorer-sort button.is-on {
  background: var(--cl2-white);
  color: var(--cl2-accent);
  box-shadow: var(--cl2-shadow-sm);
}

/* Second click on an active sort button reverses direction (JS toggles
   .is-reversed on click — see syncSortUI()); the active label turns the
   same "final" red used by the status chart, as an attention cue. */
.cl2-explorer-sort button.is-reversed {
  color: var(--cl2-status-final);
}

/* ── Result rows ── */
.cl2-explorer-list {
  display: flex;
  flex-direction: column;
  gap: var(--cl2-space-sm);
}

.cl2-explorer-row {
  display: grid;
  grid-template-columns: 28px 84px minmax(0, 1fr) 96px 150px;
  align-items: center;
  gap: var(--cl2-space-lg);
  background: var(--cl2-white);
  border: 1px solid var(--cl2-border);
  border-radius: var(--cl2-radius-lg);
  padding: var(--cl2-space-sm) var(--cl2-space-lg);
  text-decoration: none;
  color: inherit;
  content-visibility: auto;
  contain-intrinsic-size: auto 68px;
  transition: border-color var(--cl2-t-fast) var(--cl2-ease),
    box-shadow var(--cl2-t-fast) var(--cl2-ease);
}

.cl2-explorer-row:hover,
.cl2-explorer-row:focus-visible {
  border-color: var(--cl2-accent);
  box-shadow: 0 0 0 1px var(--cl2-accent) inset, 0 6px 18px var(--cl2-accent-dim);
  outline: none;
}

.cl2-explorer-rank {
  font-family: var(--cl2-font-mono);
  font-size: var(--cl2-fs-md);
  font-weight: 800;
  color: var(--cl2-text-dim);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.cl2-explorer-row.is-top .cl2-explorer-rank {
  color: var(--cl2-accent);
}

.cl2-explorer-thumb {
  width: 84px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.cl2-explorer-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.cl2-explorer-thumb .mdc-silhouette {
  width: 74px;
  height: auto;
  color: var(--cl2-text-dim);
}

.cl2-explorer-id {
  min-width: 0;
}

/* Model name is now the SECOND line (maker's .cl2-explorer-sub sits above it)
   — margin-top moved here from .cl2-explorer-sub so the spacing between the
   two lines still attaches to whichever one is second, not whichever used to
   be. Kept BOLD/large (unchanged): the model is still the row's primary
   identifier, the maker line above it is the smaller "eyebrow" label. */
.cl2-explorer-name {
  font-family: var(--cl2-font-sans);
  font-weight: 700;
  font-size: var(--cl2-fs-lg);
  color: var(--cl2-text);
  line-height: 1.12;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: var(--cl2-space-xs);
}

.cl2-explorer-name-en {
  font-family: var(--cl2-font-mono);
  font-weight: 500;
  font-size: var(--cl2-fs-xs);
  color: var(--cl2-text-dim);
  margin-inline-start: var(--cl2-space-sm);
  letter-spacing: .2px;
  unicode-bidi: isolate;
}

.cl2-explorer-sub {
  display: flex;
  align-items: center;
  gap: var(--cl2-space-sm);
  min-width: 0;
}

.cl2-explorer-makerlogo {
  width: 15px;
  height: 15px;
  object-fit: contain;
  flex: 0 0 auto;
  opacity: .9;
}

.cl2-explorer-maker {
  font-size: var(--cl2-fs-sm);
  color: var(--cl2-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* mini-spike: a FIXED 1996-2026 axis (31 bars / 30 gaps = 92px), rendered by
   CarLabSparklines.fixedRangeSparklineHtml (self-contained inline bars; it
   centres itself). The 1996/2026 labels (row + preview) span the same 92px
   so they sit under the end bars. */
.cl2-explorer-sparkcell {
  display: flex;
  flex-direction: column;
  gap: var(--cl2-space-2xs);
  min-width: 0;
}

.cl2-explorer-spark {
  width: 100%;
  height: 22px;
  pointer-events: none;
}

.cl2-explorer-sparkyears,
.cl2-explorer-pv-sparkyears {
  display: flex;
  justify-content: space-between;
  direction: ltr;
  font-family: var(--cl2-font-mono);
  font-size: var(--cl2-fs-3xs);
  color: var(--cl2-text-dim);
  line-height: 1;
  width: 92px;
  margin: 0 auto;
}

.cl2-explorer-pv-sparkyears {
  margin-top: var(--cl2-space-sm);
}

.cl2-explorer-metrics {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--cl2-space-xs);
}

.cl2-explorer-count-v {
  display: flex;
  align-items: baseline;
  gap: var(--cl2-space-xs);
}

.cl2-explorer-count-v b {
  font-family: var(--cl2-font-sans);
  font-size: var(--cl2-fs-2xl);
  font-weight: 800;
  color: var(--cl2-text);
  letter-spacing: -.3px;
  font-variant-numeric: tabular-nums;
}

.cl2-explorer-count-v span {
  font-size: var(--cl2-fs-2xs);
  color: var(--cl2-text-muted);
}

.cl2-explorer-metrics .status-mix {
  width: 140px;
  min-width: 0;
}

.cl2-explorer-actpct {
  font-family: var(--cl2-font-mono);
  font-size: var(--cl2-fs-2xs);
  color: var(--cl2-text-muted);
}

/* ── Pagination (append-only "load more" — no previous-page control) ── */
.cl2-explorer-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cl2-space-lg);
  margin-top: var(--cl2-space-lg);
}

/* Pagination "show more" button (incl. the load-failure retry above):
   assets/ui-v2/components.css (.cl2-load-more), shared with the models
   directory and the manufacturers directory. */

.cl2-explorer-empty {
  padding: var(--cl2-space-4xl) var(--cl2-space-lg);
  text-align: center;
  color: var(--cl2-text-dim);
}

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

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

.cl2-explorer-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;
  justify-content: 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-explorer-loaderr[hidden] {
  display: none;
}

.cl2-explorer-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-explorer-retry:focus-visible {
  outline: 2px solid var(--cl2-accent);
  outline-offset: 2px;
}

.cl2-explorer-filters-toggle {
  display: none;
}

/* ── Tablet/mobile: filters collapse behind a toggle button ── */
@media (max-width: 980px) {
  .cl2-explorer-grid {
    grid-template-columns: 1fr;
    padding: var(--cl2-space-md) 0 var(--cl2-space-xl);
  }

  .cl2-explorer-filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--cl2-space-sm);
    height: 40px;
    padding: 0 var(--cl2-space-lg);
    border: 1px solid var(--cl2-border);
    border-radius: var(--cl2-radius-lg);
    background: var(--cl2-white);
    color: var(--cl2-text);
    font-weight: 700;
    font-size: var(--cl2-fs-md);
    cursor: pointer;
    margin-bottom: var(--cl2-space-md);
  }

  .cl2-explorer-filters {
    display: none;
    position: static;
    order: -1;
  }

  .cl2-explorer-filters.is-open {
    display: flex;
  }
}

@media (max-width: 620px) {
  .cl2-explorer-row {
    grid-template-columns: 24px 60px minmax(0, 1fr) auto;
    gap: var(--cl2-space-sm);
    padding: var(--cl2-space-sm) var(--cl2-space-md);
  }

  /* .cl2-explorer-thumb's own box (84x50, desktop) and its inner silhouette
     (74px wide) were never resized to match this 60px grid track above — the
     oversized box simply painted past its track into the name/maker column
     next to it (a grid item isn't auto-shrunk to its track just because the
     track is narrower). Matching them to the track — with the same ~10px
     silhouette-vs-box margin the desktop size uses — is what actually stops
     the overlap; the model-name column's own overflow/ellipsis rules were
     never the problem (a one-character name overlapped just as much as a
     long one). */
  .cl2-explorer-thumb {
    width: 60px;
    height: 36px;
  }

  .cl2-explorer-thumb .mdc-silhouette {
    width: 50px;
  }

  .cl2-explorer-sparkcell {
    display: none;
  }

  .cl2-explorer-metrics .status-mix {
    width: 96px;
  }

  .cl2-explorer-name {
    font-size: var(--cl2-fs-lg);
  }

  .cl2-explorer-name-en {
    display: none;
  }
}


/* ── Moved verbatim out of index.php's own two inline <style> blocks
   (unconditional — both were always loaded, same as this file). ── */
    .highlight{color:var(--accent)}
    .table-panel{overflow:hidden}
    .controls{padding:14px 20px;border-bottom:1px solid var(--border);background:var(--surface);display:grid;grid-template-columns:minmax(220px,2fr) repeat(2,minmax(140px,1fr)) auto;gap:10px;align-items:center}
    .controls input,.controls select{min-height:38px;width:100%;border:1px solid var(--border);border-radius:6px;background:#fff;color:var(--text);padding:8px 12px}
    @media(max-width:1380px){.controls{grid-template-columns:repeat(2,minmax(0,1fr))}}
    @media(max-width:1080px){.table-summary{display:block}.controls{grid-template-columns:1fr}.table-wrap{max-height:none}}

    /* Homepage update/freshness strip lives in assets/ui-v2/index.css (.cl2-update-strip);
       the national metrics strip lives there too (.cl2-metrics). */

    /* Model explorer (.cl2-explorer-*) CSS lives in assets/ui-v2/index.css. */