/* CarLAB ui-v2 — maker.php (detail mode) page-specific blocks.
   Block: maker-page identity (breadcrumb + logo/name hero H1 only) — the
   first visible block on the page. Chart/sidebar/metrics/model-list/year-
   filter keep their existing (legacy) markup/styling and are not touched here. */

/* ── Breadcrumb ───────────────────────────────────────────────────────
   Page-scoped duplicate of the shared .breadcrumb/.bc-* box styling
   (assets/carlab-model-detail.css) under .cl2-maker-bc-* — the shared file
   itself is left untouched so model.php's identical breadcrumb is
   unaffected. */

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

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

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

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

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

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

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

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

/* ── Identity hero: logo + H1 + year-filter row ──────────────────────
   .hero-card is already flattened to no border/shadow/background sitewide
   (assets/carlab-analytics-shell.css) — dropped here since it contributed
   no styling. Sizes/gaps otherwise match the pre-existing legacy design
   exactly (this block preserves layout, it does not redesign it). */

.cl2-maker-hero {
  /* Right (start, RTL) padding is 0 so the card is flush with .cl2-maker-main's own
     edge — matching model.css's .cl2-md-hero and the shared .panel-head/.panel-body
     fix below; the left (end) gutter is unchanged. */
  padding: var(--cl2-space-2xl) 0 var(--cl2-space-2xl) var(--cl2-space-xl);
  /* flex-column so the "{maker} בישראל – תמונת מצב" summary (.cl2-md-summary,
     assets/ui-v2/summary.css) can sit as a stacked sibling BELOW .cl2-maker-hero-inner,
     exactly like model.css's .cl2-md-hero hosts its own summary block. No visible
     effect on the updates-view hero (includes/updates_view.php's maker-context
     markup), which still has only the one .cl2-maker-hero-inner child. */
  display: flex;
  flex-direction: column;
}

.cl2-maker-hero-inner {
  display: flex;
  flex-direction: row;
  gap: var(--cl2-space-2xl);
  align-items: flex-start;
}

.cl2-maker-hero-text {
  flex: 1;
  min-width: 0;
}

.cl2-maker-hero-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--cl2-space-lg);
  flex-wrap: wrap;
}

/* Almoni Tzar is the one sanctioned use of the identity serif — the
   maker-name H1 only. Fallback chain unchanged from the legacy page. */
.cl2-maker-hero-title {
  margin: 0;
  font-size: 40px;
  line-height: 1.05;
  font-family: "Almoni Tzar", var(--display-font);
  font-weight: 700;
  color: var(--cl2-text);
  display: flex;
  align-items: center;
  gap: var(--cl2-space-md);
  min-width: 0;
}

.cl2-maker-hero-logo {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: var(--cl2-radius-md);
}

.cl2-maker-hero-title-text {
  min-width: 0;
}

/* Active year-scope suffix ("· 2022" / "- שנים 2018–2024") -- deliberately
   NOT Almoni Tzar (that stays the sanctioned identity font for the maker
   name only): plain --sans, muted, and visibly smaller than the 40px brand
   name so it reads as a secondary filter indicator, not part of the brand. */
.cl2-maker-hero-scope {
  font-family: var(--cl2-font-sans);
  font-weight: 600;
  font-size: .6em;
  color: var(--cl2-text-muted);
}

.cl2-maker-hero-scope-num {
  /* unicode-bidi required -- direction alone has no effect on an inline
     element without embed/isolate (CSS spec); same fix used on this file's
     .cl2-ownership-scope-num for the same reason. */
  direction: ltr;
  unicode-bidi: isolate;
}

@media (max-width: 760px) {
  .cl2-maker-hero-inner {
    gap: var(--cl2-space-md);
  }

  .cl2-maker-hero-title {
    font-size: 32px;
  }
}

@media (max-width: 560px) {
  .cl2-maker-hero-row {
    align-items: flex-start;
    /* Keep title + year-selector on ONE row (model.php's equivalent titlerow
       reaches this via trigger-label truncation instead — see ynav.css's own
       mobile rule + #ypTriggerLabel's always-on max-width:160px above — this
       page just also needs the row itself pinned to nowrap, since unlike
       model.php's row it previously had no anti-wrap declaration at all and
       would drop the ynav control to its own line under a long maker name). */
    flex-wrap: nowrap;
  }
}

/* ── Year selector: shared control, page-specific overrides only ─────────
   The .ynav* visual implementation itself (button/panel/item/range
   dimensions, typography, border, radius, shadow, icon, states) is now ONE
   canonical stylesheet: assets/ui-v2/ynav.css, loaded by both this page and
   model.php — see that file's own header comment for the consolidation
   rationale. Only what is genuinely specific to THIS page stays below: the
   trigger label's element id (#ypTriggerLabel — model.php's own trigger
   label has a different id, #yearNavBtnText), the inline range-validity
   hint/error text (model.php's range applies via full navigation instead of
   in-page validation, so it has no equivalent), a few extra :focus-visible
   states this page added beyond the shared control, and a mobile RTL
   panel-position flip this page needs that model.php does not. All state/
   URL/filtering logic (applyYear/applyRange/clearScope/makerScope, in-page
   updates + history, unlike model.php's full-navigation version) is
   unaffected by any of this — this stylesheet supplies visuals only. */

.hero-year-wrap {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

#ypTriggerLabel {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ynav-range-row select:focus-visible {
  outline: 2px solid var(--cl2-accent);
  outline-offset: 1px;
}

/* Maker-only additions beyond the shared control: inline range-validity hint/
   error text. model.php's ynav has no equivalent since its range applies via
   full navigation instead of in-page validation -- kept from the previous
   maker-only selector, styled to sit quietly under the shared range row. */
.yp-range-hint {
  margin-top: 4px;
  font-size: 10px;
  color: var(--cl2-text-muted);
}

.yp-range-error {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #b91c1c;
}

.ynav-range-go:focus-visible {
  outline: 2px solid var(--cl2-accent);
  outline-offset: 2px;
}

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

@media (max-width: 560px) {
  .ynav-panel {
    inset-inline-end: auto;
    inset-inline-start: 0;
  }
}

/* ── Main/sidebar layout shell ───────────────────────────────────────
   The two-column grid itself (main content + a 385px sidebar for metrics/
   years). Its children — the chart, the model list, and the sidebar's
   metrics/years panels — are still legacy markup (.panel/.panel-head/
   .table-panel/etc.), keeping their existing styling; this only restyles the
   wrapper around them. The main column is intentionally left plain here —
   no width/height assumptions carried over from the old category-card
   gallery — so a future dense, explorer-style model list can drop in
   without fighting leftover card-gallery sizing. */

.cl2-maker-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 385px;
  align-items: start;
}

.cl2-maker-main,
.cl2-maker-side {
  min-width: 0;
}

.cl2-maker-main > *:not(:first-child),
.cl2-maker-side > *:not(:first-child) {
  border-top: 1px solid var(--cl2-border);
}

.cl2-maker-side {
  border-inline-start: 1px solid var(--cl2-border);
}

/* Legacy .panel-head/.panel-body padding (still used by the chart/models/
   years panels below) is set with !important sitewide
   (assets/carlab-analytics-shell.css) — this descendant override needs its
   own !important to win, exactly as the pre-rebuild .model-layout rule did.
   This is the SHARED baseline (--cl2-space-xl gutter on both sides) used by
   BOTH .cl2-maker-main and .cl2-maker-side — .cl2-maker-layout wraps both
   columns, so this rule must stay symmetric; the main-only flush-right
   override lives in its own .cl2-maker-main-scoped rule further below. */
.cl2-maker-layout .panel-head,
.cl2-maker-layout .table-panel .panel-head {
  padding: var(--cl2-space-xl) var(--cl2-space-xl) var(--cl2-space-lg) !important;
}

.cl2-maker-layout .panel-body {
  padding: var(--cl2-space-lg) var(--cl2-space-xl);
}

/* Main-content-only flush-right override (was previously applied to the shared rule
   above, which also matches .cl2-maker-side's own panel-head/panel-body and stripped
   the sidebar's internal horizontal padding — this narrower selector fixes that).
   Right (start, RTL) is 0 so every main section begins flush with .cl2-maker-main's
   own edge; left (end) keeps the same --cl2-space-xl gutter as the shared rule. Same
   specificity as the rule above — placed after, so it wins for .cl2-maker-main only. */
.cl2-maker-main .panel-head,
.cl2-maker-main .table-panel .panel-head {
  padding: var(--cl2-space-xl) 0 var(--cl2-space-lg) var(--cl2-space-xl) !important;
}

.cl2-maker-main .panel-body {
  padding: var(--cl2-space-lg) 0 var(--cl2-space-lg) var(--cl2-space-xl);
}

/* Below desktop width, the shared .main-content max-width:80%
   (carlab-analytics-shell.css) is more gutter than either the tablet
   2-column layout or the phone single-column layout can spare — neutralized
   here exactly as assets/ui-v2/model.css does for the model page (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;
  }
}

/* Tablet (721px-1180px): KEEP the desktop 2-column grid and sidebar order —
   just narrow the fixed sidebar column, mirroring assets/ui-v2/model.css's
   own .cl2-md-layout tablet step exactly (same breakpoint, same 300px). No
   display:contents here, so .cl2-maker-main/.cl2-maker-side render exactly
   as on desktop — same boxes, same DOM order, no reordering, no duplicated
   sidebar. Replaces the previous behavior of collapsing straight to a single
   column at 1180px, which gave up the two-column layout too early. */
@media (min-width: 721px) and (max-width: 1180px) {
  .cl2-maker-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

/* Phone (<=720px): stack to a single column — the same breakpoint
   assets/ui-v2/model.css's own .cl2-md-layout uses for its final collapse. */
@media (max-width: 720px) {
  .cl2-maker-layout {
    grid-template-columns: 1fr;
  }

  .cl2-maker-side {
    border-inline-start: none;
  }

  /* Mobile content order — the SAME display:contents + order technique
     model.css's .cl2-md-layout uses at this breakpoint: .cl2-maker-main/
     .cl2-maker-side are already direct grid items of .cl2-maker-layout
     (display:grid above), so removing only their OWN box lets their
     children become grid items in turn and reorder freely with `order` —
     same DOM nodes/ids/listeners/canvas state, nothing duplicated or
     re-rendered. Target flow: hero+summary, then the status card (#metrics,
     was .cl2-maker-side's own first child), the chart, then the ownership
     block (#makerOwnershipWrap — a direct sibling of the status aside in the
     markup, not nested inside it, so it can carry its own order
     independently, exactly like model.php's #modelOwnershipWrap), and
     finally the model list (this page's own main-column content, unchanged
     relative position at the end). */
  .cl2-maker-main,
  .cl2-maker-side {
    display: contents;
  }

  .cl2-maker-hero { order: 1; }
  .hero-side      { order: 2; border-top: 1px solid var(--cl2-border); } /* #metrics — was .cl2-maker-side's own border, now on the first reordered item */
  .ml-chart       { order: 3; }
  /* Maker updates view (/{maker}/updates): .cl2-maker-main only has 2 direct
     children here (the hero + this wrapper around the calendar/feed/pager),
     so without an explicit order it would default to 0 — LOWER than
     .cl2-maker-hero's order:1 — and render ABOVE the title instead of below
     it. Same fix as model.css's own equivalent rule; the normal maker page
     has no element matching this class, so it's a no-op there. */
  .cl2-md-upd-body-wrap { order: 3; }
  #makerOwnershipWrap    { order: 4; }
  #modelsTable           { order: 5; }
  /* .cl2-maker-main's LAST child (the bottom "latest updates" teaser) — without an
     explicit order it defaults to 0, LOWER than every sibling above, and renders FIRST
     instead of last (same class of bug as .cl2-md-upd-body-wrap above). Must stay the
     highest order on the page so it always lands at the end of the single-column
     mobile flow. */
  .cl2-md-upd-teaser     { order: 6; }
}

/* Maker updates view only (/{maker}/updates): mobile flow is just title,
   heatmap, updates feed, pagination — the sidebar (survival/status metrics,
   ownership summary) isn't needed here. Scoped off .cl2-md-upd (the shared
   updates-view marker, also used by model.php, now on .cl2-maker-main — a
   DOM sibling of .cl2-maker-side) rather than a bare `.cl2-maker-side` rule,
   so the normal maker page sidebar is completely untouched — this selector
   only ever matches when .cl2-md-upd is present. display:none always wins
   here regardless of the display:contents rule above (higher specificity —
   three classes vs one), so the sidebar stays fully hidden on the updates
   view exactly as before; the reorder rules above only ever affect the
   normal page, since none of their selectors exist inside the updates view
   except .cl2-maker-hero (harmless — it's the same "order:1" slot either
   way) and .cl2-md-upd-body-wrap (explicitly ordered above for this exact
   reason). 720px (not 1180px): the same narrow-mobile breakpoint standard
   used for model.css's own equivalent rule — the 721-1180px tablet range
   keeps the normal stacked-but-present sidebar, only genuine mobile removes
   it. */
@media (max-width: 720px) {
  .cl2-maker-main.cl2-md-upd ~ .cl2-maker-side {
    display: none;
  }
}

/* Base layout for the sidebar's identity/status card — shared class name with
   model.php's own hero-side (that page's copy lives inline in its own
   <style>, not a shared file); duplicated here rather than touching model.php
   to keep the risk to the existing model page at zero. Needed for the
   mobile reorder above: without it, #metrics would render with no vertical
   breathing room once .hero-side becomes a standalone reordered flow item. */
.hero-side {
  padding: 24px 0;
  display: grid;
  gap: 0;
  align-content: start;
}

/* Maker updates view only, desktop/tablet (721px+ — the range where the sidebar
   above is actually visible, adjacent to the calendar's end side). The shared
   calendar's normal end-side gutter (.cl2-md-upd-body-wrap's padding, var(--ms-5),
   assets/ui-v2/updates-view.css) is defined only in assets/ui-v2/model.css, which
   this page never loads, so it silently resolves to nothing here — leaving the
   calendar's end-side nav arrow flush against the sidebar with no breathing room.
   This restores just that missing spacing, scoped to the calendar only (the feed/
   pager below keep their existing spacing unchanged, as does the shared component
   and the model page, which already has its own working gutter). */
@media (min-width: 721px) {
  .cl2-maker-main.cl2-md-upd .cl2-md-cal {
    margin-inline-end: var(--cl2-space-xl);
  }
}

/* ── Model list ───────────────────────────────────────────────────────
   Dense rows, same visual language as the homepage model
   explorer (.cl2-explorer-row family in assets/ui-v2/index.css) — page-
   scoped here rather than cross-linked, same reasoning as the breadcrumb/
   layout-shell duplication above. Category grouping is a light divider
   row inside the SAME continuous list, not a separate large section.
   .status-mix/.status-bar/.status-seg are genuinely shared (assets/
   carlab-analytics-shell.css, already loaded on this page) — reused as-is,
   not duplicated. */

/* Sort-mode toggle, opposite side of the "דגמים" heading (.panel-head's own
   shared justify-content:space-between, assets/carlab-analytics-shell.css,
   places it there for free). Two real buttons, selected state via
   aria-pressed only -- no separate visual-only state to keep in sync. */
.cl2-model-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-model-sort-btn {
  appearance: none;
  background: transparent;
  border: none;
  border-radius: var(--cl2-radius-pill);
  padding: 6px 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-model-sort-btn:hover {
  color: var(--cl2-text);
}

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

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

@media (max-width: 560px) {
  .cl2-model-sort-btn {
    padding: 5px 10px;
    font-size: var(--cl2-fs-2xs);
  }
}

.cl2-maker-models-list {
  margin: 0;
  /* Same start/end split as this panel's own .panel-head (.cl2-maker-layout
     .panel-head above): flush on the right (start) so rows line up with the
     now-flush "דגמים" title, var(--cl2-space-xl) kept on the left (end) so
     rows don't sit flush against the sidebar divider. */
  padding: 0 0 0 var(--cl2-space-xl);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--cl2-space-sm);
}

.cl2-maker-model-divider {
  display: flex;
  align-items: baseline;
  gap: var(--cl2-space-sm);
  flex-wrap: wrap;
  padding: var(--cl2-space-md) 0 var(--cl2-space-2xs);
}

.cl2-maker-model-divider:first-child {
  padding-top: 0;
}

.cl2-maker-model-divider-name {
  font-size: var(--cl2-fs-md);
  font-weight: 700;
  color: var(--cl2-text);
}

.cl2-maker-model-divider-count {
  font-size: var(--cl2-fs-xs);
  color: var(--cl2-text-muted);
}

.cl2-maker-model-divider-link {
  margin-inline-start: auto;
  font-size: var(--cl2-fs-xs);
  font-weight: 600;
  color: var(--cl2-accent);
  text-decoration: none;
}

.cl2-maker-model-divider-link:hover {
  text-decoration: underline;
}

.cl2-maker-model-divider-link:focus-visible {
  outline: 2px solid var(--cl2-accent);
  outline-offset: 2px;
  border-radius: var(--cl2-radius-sm);
}

.cl2-maker-model-row {
  display: grid;
  /* status-mix at 130px (not 170px) matches the width already used at the
     768px breakpoint below -- it was more than the bar+percentage text ever
     needs, and reclaiming it is what actually gives the name column (the
     only flexible column) enough room: most He+En name pairs were
     truncating even though the row had visible free space.
     Sparkline at 100px (not 140px): fixedRangeSparklineHtml() draws 31 fixed
     2px-wide bars (one per 1996-2026) with 1px gaps -- a hard ~92px content
     width regardless of container size, so the previous 140px was ~48px of
     pure unused padding around a centered, non-scaling chart. 100px keeps a
     ~4px margin on each side with zero visual change to the chart itself.
     Years (70px) and count (90px) already match their exact longest-content
     width on real data (a 4-digit-en dash-4-digit range; "275,272 רכבים") --
     no safe margin to reclaim from either without risking truncation there. */
  grid-template-columns: 84px minmax(0, 1fr) 70px 130px 90px 100px;
  align-items: center;
  gap: var(--cl2-space-sm);
  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;
  transition: border-color var(--cl2-t-fast) var(--cl2-ease),
    box-shadow var(--cl2-t-fast) var(--cl2-ease);
}

.cl2-maker-model-row:hover,
.cl2-maker-model-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;
}

/* Same treatment as the homepage explorer's .cl2-explorer-thumb (assets/ui-v2/
   index.css): fixed-size box, image via object-fit:contain, the shared
   fallback silhouette a bit smaller than the box so it reads as a glyph, not
   a stretched icon. Secondary to the name/data next to it -- fixed compact
   size, never grows into a card. */
.cl2-maker-model-thumb {
  width: 84px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

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

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

.cl2-maker-model-id {
  min-width: 0;
}

.cl2-maker-model-name {
  /* display:block (not the span default of inline) so nowrap/overflow/
     text-overflow below actually clip+ellipsize against the grid cell's
     width -- on an inline box they're a no-op and long He+En name pairs
     spill into the next column instead of truncating. */
  display: block;
  font-family: var(--cl2-font-sans);
  font-weight: 700;
  font-size: var(--cl2-fs-lg);
  color: var(--cl2-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cl2-maker-model-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-maker-model-years {
  font-family: var(--cl2-font-mono);
  font-size: var(--cl2-fs-xs);
  color: var(--cl2-text-muted);
  text-align: center;
  /* unicode-bidi required -- direction alone has no effect on an inline
     element without embed/isolate (CSS spec); same fix as this file's
     .cl2-ownership-scope-num / .cl2-maker-hero-scope-num. Without it a
     range like "1996–2026" could render with digits/dash reordered by
     the surrounding RTL context. */
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
}

.cl2-maker-model-row .status-mix {
  display: flex;
  flex-direction: column;
  gap: var(--cl2-space-2xs);
  min-width: 0;
}

.cl2-maker-model-status-pct {
  font-family: var(--cl2-font-mono);
  font-size: var(--cl2-fs-2xs);
  color: var(--cl2-text-muted);
}

.cl2-maker-model-count {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

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

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

.cl2-maker-model-spark {
  height: 22px;
  pointer-events: none;
}

.cl2-maker-model-empty {
  padding: var(--cl2-space-4xl) var(--cl2-space-lg);
  text-align: center;
  color: var(--cl2-text-dim);
  list-style: none;
}

@media (max-width: 768px) {
  .cl2-maker-model-row {
    grid-template-columns: 56px minmax(0, 1fr) 130px 90px;
    gap: var(--cl2-space-sm);
    padding: var(--cl2-space-sm) var(--cl2-space-md);
  }

  .cl2-maker-model-thumb {
    width: 56px;
    height: 34px;
  }

  .cl2-maker-model-thumb .mdc-silhouette {
    width: 44px;
  }

  .cl2-maker-model-years,
  .cl2-maker-model-spark {
    display: none;
  }
}

@media (max-width: 560px) {
  .cl2-maker-model-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .cl2-maker-model-thumb {
    display: none;
  }

  .cl2-maker-model-row .status-mix {
    display: none;
  }

  .cl2-maker-model-name-en {
    display: none;
  }
}

/* ── Sidebar: status trio (active/inactive/deregistered) ────────────────
   Renders via the same .cl2-md-metrics-* tiles model.php uses (shared CSS,
   assets/carlab-model-detail.css) instead of the old .ri-/.vs-card component
   this page used to render through CarLabRegistry.renderStatus() — no
   page-scoped override needed here; the shared design has no card border to
   strip and no first-child top-padding gap to compensate for. */

/* Yearly-chart framing (.ml-chart .panel-title font override, .cl2-chart-hint,
   .cl2-sr-only) moved to assets/ui-v2/components.css so the maker + model detail
   pages share one source of truth. */


/* ── Moved verbatim out of maker.php's own inline <style> block (was
   wrapped in <?php if ($mode === 'detail'): ?> there; this file is already
   loaded only in detail mode, so the effective behavior is unchanged). ── */
    /* .section-divider inherited from carlab-analytics-shell.css (margin:0 0 32px 0) — was a conflicting inline dup */
    /* Breadcrumb + maker identity hero + the main/sidebar layout shell CSS
       live in assets/ui-v2/maker.css; the shared year-selector (.ynav*)
       visual implementation lives in assets/ui-v2/ynav.css (also loaded by
       model.php — maker.css keeps only its own page-specific overrides). The
       chart/models/years panels inside the shell are still legacy
       (.panel/.panel-head/.table-panel etc.) and untouched — only the
       .model-layout/.ml-main/.ml-side wrapper around them was rebuilt. */
    .table-panel{scroll-margin-top:92px}

    .model-panel-head{flex-wrap:wrap}

    /* mdc-above size for maker model cards — matches the models directory page */
    .mdc-above{width:230px;max-width:100%;height:150px;margin-inline:auto}
    /* border-top parity with model.php's own analogous .table-panel rule: needed so
       #modelsTable keeps a visible top divider once the mobile single-column reorder
       (assets/ui-v2/maker.css, @media max-width:720px) removes .cl2-maker-main's own
       sibling-divider rule (that rule only fires while .cl2-maker-main still renders
       as a real box — display:contents at that breakpoint stops it from applying). */
    .table-panel{margin-bottom:0;border-top:1px solid var(--border)}
    /* .vs-cards/.vs-card's own @media(max-width:560px) mobile rule already lives in the
       shared assets/carlab-model-detail.css (loaded by this page); the previous
       duplicate copy here was removed. */