/* CarLAB ui-v2 — model DETAIL page, page-specific styles.
   Loaded only in detail mode (see model.php: <?php if ($mode==='detail') ?>).
   Namespace: .cl2-md-* (md = model-detail).

   Block 1 — the top IDENTITY area only: breadcrumb, hero card, model-name H1,
   maker logo, body-type icon, and the year/range scope text (subtitle). The
   interactive year <select> + generation navigator remain legacy for now
   (a large JS-templated subsystem) and are rebuilt in a later block; they sit
   inside .cl2-md-hero-titlerow as a preserved slot. Everything else on the
   detail page (chart, ownership, prices, variants, recalls, related, AI, the
   sidebar) is still styled by the inline <style> block / carlab-model-detail.css
   and is untouched by this file. */

/* ── Breadcrumb ── (items only; the shared .bc-row wrapper stays in
   carlab-model-detail.css, also used by maker.php)
   Mirrors .cl2-maker-bc-* (assets/ui-v2/maker.css) value-for-value via the
   SAME shared --cl2-* tokens — not a hand-copied duplicate — so the model and
   maker breadcrumbs stay vertically/spacing-identical by construction. This
   rule was previously missing `display: flex`, which silently no-opped its
   own `align-items: center` (a flex-only property) and left the breadcrumb in
   normal inline flow — the root cause of the vertical misalignment versus the
   maker page's genuinely flex-centered breadcrumb. Padding/font-size/gap were
   also hardcoded to slightly different px values instead of these tokens. */
.cl2-md-bc {
  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-md-bc-item {
  color: var(--cl2-text-muted);
  text-decoration: none;
  transition: color var(--cl2-t-fast) var(--cl2-ease);
  padding: 2px 0;
}

.cl2-md-bc-item[href]:hover {
  color: var(--cl2-text);
}

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

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

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

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

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

/* ── Hero identity card ──
   .hero-card (shared transparent reset, carlab-analytics-shell.css) and
   .ml-hero (grid placement) stay on the <article>; .cl2-md-hero supplies the
   identity-specific padding/layout that .hero-copy used to. Right (start, RTL)
   padding is 0 so the card's content is flush with .cl2-md-main's own edge —
   matching every other main-content section (see the shared .panel-head/
   .panel-body fix below); the left (end) 12px is unchanged. */
.cl2-md-hero {
  padding: 22px 0 100px 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
}

/* Updates view: this hero card holds ONLY the title (no summary text follows inside
   it, unlike the normal page), so the normal 100px bottom padding — sized for that
   summary copy — left a large empty gap before the calendar. Scoped to .cl2-md-upd
   so the normal page's hero is untouched. */
.cl2-md-upd .cl2-md-hero {
  padding-bottom: 8px;
}

.cl2-md-hero-inner {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: flex-start;
}

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

.cl2-md-hero-titlerow {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* The one model-name H1. Almoni Tzar is used ONLY here (identity title). */
.cl2-md-hero-title {
  margin: 0;
  font-size: 40px;
  line-height: 1.05;
  font-family: "Almoni Tzar", var(--display-font);
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  text-decoration: none;
}

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

/* Maker logo, injected into the H1 client-side (CarLabLogos, no PHP resolver);
   dropped cleanly via onerror when the brand has no/failed logo. */
.cl2-md-hero-logo {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 8px;
}

/* Year/range scope text, e.g. "משומש משנת 2020". The inline-start offset keeps
   it aligned under the title text when a logo is present (set by setHeroTitle). */
.cl2-md-hero-subtitle {
  margin-top: 6px;
  margin-inline-start: var(--hero-subtitle-offset, 0);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
  font-family: var(--sans);
}

.cl2-md-hero-subtitle[hidden] {
  display: none;
}

/* Body-type icon (the identity area's model-representative visual, via
   CarLabBodyIcons). Shown/hidden by JS through inline display; its own
   fallback is simply to stay hidden when no dominant icon resolves. */
.cl2-md-hero-bodyicon {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}

.cl2-md-hero-bodyicon img,
.cl2-md-hero-bodyicon svg {
  display: block;
  opacity: .82;
  transition: opacity .2s;
}

.cl2-md-hero-bodyicon:hover img,
.cl2-md-hero-bodyicon:hover svg {
  opacity: 1;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .cl2-md-hero-bodyicon {
    display: none;
  }
}

/* (Task B: the ≤560px align-items:flex-start override here was compensating
   for the year control dropping to its own full-width row below the title —
   now that it sits compact in the same row (see the inline <style> in
   model.php), the base align-items:center above is what actually looks
   right, so this override is removed rather than left fighting it.) */
@media (max-width: 560px) {
  .cl2-md-hero-titlerow {
    gap: 8px;
  }
}

/* ── Mobile page width ──
   .main-content's shared max-width:80% (carlab-analytics-shell.css) is a
   desktop reading-column rule that was still shrinking the whole page on
   phones, on top of its own padding — this file loads AFTER that shared one
   (see model.php's <link> order) so the same class here wins the cascade,
   model-detail-page only.
   The breadcrumb/quick-actions one-row mobile override (#breadcrumb/
   #quickLinks) used to live here as a model-only override, back when maker.php's
   breadcrumb had no matching id. Now that both pages' markup uses the same ids,
   it lives in the shared assets/carlab-model-detail.css (also used by maker.php)
   right after that file's own @media(max-width:720px) block, instead of two
   copies of the same rule drifting apart. */

/* ══════════════════════════════════════════════════════════════════════════
   Block 2 — page SHELL: the main-content column + sidebar grid.

   This is only the scaffolding the detail-page blocks sit in: the two-column
   grid, the column divider, the inter-block dividers, and the shared block
   padding scale. Every block inside (chart / prices / variants / specs /
   related in the main column; ownership / recalls / trims / years in the
   sidebar) is preserved content styled by its own rules — this section does
   not re-skin the .panel / .table-panel card components, only places them.
   ══════════════════════════════════════════════════════════════════════════ */

/* Desktop: fixed 385px sidebar next to a fluid main column; both top-aligned. */
.cl2-md-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 385px;
  align-items: start;
  /* Block padding scale consumed by the panel rules below (kept identical to the
     legacy --ms-* values so block spacing does not shift). */
  --ms-1: var(--space-xs);
  --ms-2: var(--space-sm);
  --ms-3: var(--space-md);
  --ms-4: var(--space-lg);
  --ms-5: var(--space-xl);
  --ms-6: 24px;
  font-family: var(--sans);
}

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

.cl2-md-side {
  min-width: 0;
  border-inline-start: 1px solid var(--border);
}

/* A hairline between vertically stacked blocks in each column; the first block
   in a column has no top rule. */
.cl2-md-main > *:not(:first-child),
.cl2-md-side > *:not(:first-child) {
  border-top: 1px solid var(--border);
}

/* Consistent header/body padding for the preserved .panel / .table-panel blocks
   sitting inside the shell (scoped to the shell so it never leaks to other pages).
   Vertical padding tightened (was 20/16) — less air above and, especially, below the
   section headings. This is the SHARED baseline (--ms-5 gutter on both sides) used
   by BOTH .cl2-md-main and .cl2-md-side — .cl2-md-layout wraps both columns, so this
   rule must stay symmetric; the main-only flush-right override lives in its own
   .cl2-md-main-scoped rule further below, which never touches the sidebar. */
.cl2-md-layout .panel-head,
.cl2-md-layout .table-panel .panel-head {
  padding: var(--ms-3) var(--ms-5) var(--ms-2) !important;
}

.cl2-md-layout .panel-head .panel-title,
.cl2-md-layout .panel-head .panel-subtitle {
  font-family: var(--sans) !important;
}

.cl2-md-layout .panel-head {
  line-height: 0;
}

.cl2-md-layout .panel-body {
  padding: var(--ms-4) var(--ms-5);
}

/* Main-content-only flush-right override (was previously applied to the shared rule
   above, which also matches .cl2-md-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-md-main's own edge;
   left (end) keeps the same --ms-5 gutter as the shared rule. Same specificity as the
   rule above (two classes each) — placed after, so it wins for .cl2-md-main only. */
.cl2-md-main .panel-head,
.cl2-md-main .table-panel .panel-head {
  padding: var(--ms-3) 0 var(--ms-2) var(--ms-5) !important;
}

.cl2-md-main .panel-body {
  padding: var(--ms-4) 0 var(--ms-4) var(--ms-5);
}

/* Below desktop width, the shared .main-content max-width:80% (a desktop
   reading-column rule) is more gutter than either the tablet 2-column layout
   or the phone single-column layout can spare — neutralized from 1180px down
   to 0 (both ranges below get their own width handling from here). */
@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 (385px is comfortable when the main
   column has 700px+ to work with at desktop widths, but leaves too little
   at 800-1180px once max-width:80% is also gone). 300px still fits the
   sidebar's own content (3-up metrics grid, ownership cards, etc — all
   percentage/flex-based internally) while giving the main column ~390-470px
   over this range instead of ~220-385px. No display:contents here, so
   .cl2-md-main/.cl2-md-side render exactly as on desktop — same boxes, same
   DOM order, no reordering, no duplicated sidebar. */
@media (min-width: 721px) and (max-width: 1180px) {
  .cl2-md-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

/* Phone / small tablet (<=720px): stack to a single column; the sidebar's
   inline-start divider becomes the top divider once it drops below the main
   column. */
@media (max-width: 720px) {
  .cl2-md-layout {
    grid-template-columns: 1fr;
  }

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

  /* Mobile content order. .cl2-md-main/.cl2-md-side are DIRECT grid
     items of .cl2-md-layout (already display:grid here); display:contents
     removes only their OWN box, so their children become grid items of
     .cl2-md-layout in turn and can be freely reordered with `order` — same
     DOM nodes, same ids, same listeners/canvas state, nothing duplicated or
     re-rendered. (No JS move/placeholder needed: CSS can cross the
     main/aside split here because both are already in one grid context.)

     Target flow: hero+summary, then the status/total block ("תמונת מצב"'s
     required position — after the summary, before the chart), the chart,
     then the ownership-related sidebar blocks (current holder / hands /
     owners-over-time) grouped right before the main column's own "who put
     it on the road" block so the ownership story reads as one section,
     then recalls, pricing, equipment (near pricing), available years
     (reference), and finally the two "discover more" blocks — unchanged
     from their current relative position at the end. */
  .cl2-md-main,
  .cl2-md-side {
    display: contents;
  }

  .cl2-md-hero               { order: 1; }
  .hero-side                 { order: 2; border-top: 1px solid var(--border); } /* #metrics — was .cl2-md-side's own border, now on the first reordered item */
  .ml-chart                  { order: 3; }
  /* Updates view (/{maker}/{model}/updates): .cl2-md-main only has 2 direct
     children here (the hero + this wrapper around the calendar/feed/pager),
     so without an explicit order it defaulted to 0 — LOWER than .cl2-md-hero's
     order:1 — and rendered ABOVE the title instead of below it. Giving it the
     same slot "the chart" occupies on the normal page fixes that; the normal
     page has no element matching this class, so it's a no-op there. */
  .cl2-md-upd-body-wrap      { order: 3; }
  #modelOwnershipWrap        { order: 4; }
  #owhSideSection            { order: 5; }
  #ownershipTransfersSection { order: 6; }
  #ownershipDuo              { order: 7; }
  #recallsSection            { order: 8; }
  #valueSection              { order: 9; }
  #trimsTable                { order: 10; }
  #mergedVariantsSection     { order: 12; }
  #catRelatedSection         { order: 13; }
  /* .cl2-md-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: 14; }

  /* Updates view only (/{maker}/{model}?view=updates): mobile flow is just
     title, heatmap, updates feed, pagination — the sidebar (metrics,
     deliveries/ownership summary, recalls, trims, years, etc.) isn't needed
     here. Scoped off .cl2-md-upd (the updates-view marker already on
     .cl2-md-main, a DOM sibling of .cl2-md-side) rather than a bare
     `.cl2-md-side` rule, so the normal model page / maker page / model list
     sidebars are completely untouched — this selector only ever matches when
     .cl2-md-upd is present. display:none on the ancestor removes the whole
     subtree from render regardless of the per-child `order` rules above, so
     nothing needs to be undone per-block; the 1fr single-column grid above
     means removing this item leaves no empty column or gap behind it. */
  .cl2-md-main.cl2-md-upd ~ .cl2-md-side {
    display: none;
  }
}
/* Block 3 — summary metrics strip (#metrics, top of the sidebar): .cl2-md-metrics-*
   moved to assets/carlab-model-detail.css — now shared by model.php AND
   maker.php (both render the identical tile design; see that file). */

/* ══════════════════════════════════════════════════════════════════════════
   Price block — yearly entry-price line chart wrapper.

   The chart is drawn by the shared Chart.js infra (assets/carlab-charts.js
   renderMinPriceChart); this only frames it. Sits directly in #valBody (which
   supplies the 20px inline padding), and is LTR so the year axis + ₪ scale read
   left-to-right like the deliveries chart.
   ══════════════════════════════════════════════════════════════════════════ */
.cl2-md-price-chart {
  position: relative;
  height: 200px;
  margin: 4px 0 14px;
  direction: ltr;
}

.cl2-md-price-chart canvas {
  display: block;
}

@media (max-width: 560px) {
  .cl2-md-price-chart {
    height: 172px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Ownership standalone blocks — "התפלגות ידיים" and "סוגי בעלות".

   Formerly ONE tabbed sidebar card; now two independent .table-panel sections
   (#owhSideSection = hands, #ownershipTransfersSection = ownership-type) stacked
   in the sidebar and auto-divided by the .cl2-md-side hairline rule. Their inner
   widgets keep their original styles (.owh2-hands* / .ow-* live in model.php);
   this only frames them as standalone sections — no inner redesign.

   Both sections use the SAME ui-v2 section head (.panel-head / h3.panel-title) and
   the SAME 20px content gutter, so their widths, headings, and visual weight match.
   The hands widget followed the tab strip before (no heading, its own top border) —
   drop that border and align its inset to the 20px gutter. The owner-distribution
   section's current/first toggle sits in a control row below the heading (not as the
   heading), also at the 20px gutter.
   ══════════════════════════════════════════════════════════════════════════ */
.cl2-md-ownblock .owh2-hands {
  border-top: none;
  padding: 14px 20px 18px;
}

/* Coverage + info badges, trailing side of the "התפלגות ידיים" head — same shared
   badge/tooltip component as the other sidebar blocks, at its default 20px size. */
.cl2-md-ownblock-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Current/first mode toggle — a control row under the owner-distribution heading. */
.cl2-md-owtrend-controls {
  display: flex;
  padding: 12px 20px 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   "מי העלה את הרכב לכביש?" — ownership-origin block (#ownershipPathsSection).

   A central model-identity node connects (trunk + per-card connectors) down to
   one category card per ownership origin. Every card tone derives from the ONE
   category color, supplied inline as --cat (base, for the top proportion bar),
   --cat-tint (soft card background), --cat-dark (name / % / count / "עדיין
   מחזיקים"), and --cat-muted (the faded "עברו יד" side) by ownershipColorMeta().
   Heading + coverage badge reuse the shared section/badge components; this file
   only styles the node, connectors, and category cards.
   ══════════════════════════════════════════════════════════════════════════ */
.cl2-md-ownpath > .panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Coverage badge + open-full-tree button, trailing side of the head. */
.cl2-md-ownpath-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Coverage + info badges sized to match the tree-open button (.owh2-paths-tree-icon,
   28×28) so all four controls in this row read as one consistent set. Scoped to this
   block so the shared badges stay 20px everywhere else (hands/transfers). */
.cl2-md-ownpath-tools .cl2-ownership-badge--coverage,
.cl2-md-ownpath-tools .cl2-ownership-badge--info {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 11px;
}

.cl2-md-ownpath-body {
  padding: 16px 0 20px 20px;
}

/* Numbers stay LTR inside the RTL text flow. */
.cl2-md-ownpath-num {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ── Central identity node ── */
.cl2-md-ownpath-tree {
  direction: rtl;
  /* Connector/branch line color — clearly stronger than --border (#e8eaed) so the
     tree structure reads at a glance. Shared by the trunk, the horizontal bus, and
     the per-card drops. */
  --ownpath-line: #c3c9d2;
}

.cl2-md-ownpath-node {
  margin: 0 auto;
  max-width: min(100%, 320px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  padding: 11px 22px;
  background: var(--surface, #f8fafc);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.cl2-md-ownpath-node-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.cl2-md-ownpath-node-scope {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.2;
}

.cl2-md-ownpath-node-count {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-dim);
  line-height: 1.2;
  margin-top: 1px;
}

/* ── Connectors (node → cards) ── */
.cl2-md-ownpath-trunk {
  width: 2px;
  height: 16px;
  background: var(--ownpath-line, #c3c9d2);
  margin: 0 auto;
}

.cl2-md-ownpath-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--ownpath-cols, 3), minmax(0, 1fr));
  gap: 12px;
  padding-top: 16px;
  /* Horizontal branch line inset so it spans EXACTLY the first-card centre → the
     last-card centre (not the full grid width): inset = half a column =
     (100% − (N−1)·gap) / (2·N). */
  --ownpath-bus-inset: calc((100% - (var(--ownpath-cols, 3) - 1) * 12px) / (2 * var(--ownpath-cols, 3)));
}

.cl2-md-ownpath-grid::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--ownpath-bus-inset);
  right: var(--ownpath-bus-inset);
  height: 2px;
  background: var(--ownpath-line, #c3c9d2);
}

/* ── Category card ── */
.cl2-md-ownpath-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--cat-tint, #f5f6f8);
  border: 1px solid var(--border);
  border-radius: 10px;
}

/* Per-card connector up to the horizontal branch line. */
.cl2-md-ownpath-card::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 50%;
  margin-left: -1px;
  width: 2px;
  height: 16px;
  background: var(--ownpath-line, #c3c9d2);
}

/* Proportion bar — full width at the very TOP of the card; fill = share of fleet. */
.cl2-md-ownpath-bar {
  height: 5px;
  background: rgba(17, 24, 39, 0.06);
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}

.cl2-md-ownpath-bar > span {
  display: block;
  height: 100%;
  background: var(--cat, #9ca3af);
  transition: width 0.35s ease;
}

.cl2-md-ownpath-card-body {
  display: flex;
  flex-direction: column;
  padding: 11px 12px 12px;
  min-width: 0;
}

.cl2-md-ownpath-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

/* Category name + main % — the prominent line, in the category's darker tone. */
.cl2-md-ownpath-cat {
  font-size: 14px;
  font-weight: 800;
  color: var(--cat-dark, #334155);
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cl2-md-ownpath-share {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 800;
  color: var(--cat-dark, #334155);
  line-height: 1;
  flex-shrink: 0;
  direction: ltr;
  unicode-bidi: isolate;
}

/* Vehicle count, directly below the category name. */
.cl2-md-ownpath-count {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--cat-dark, #334155);
  line-height: 1;
  margin-top: 5px;
}

/* Two retention outcomes below a divider; "עברו יד" muted, with a divider between. */
.cl2-md-ownpath-splits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
}

.cl2-md-ownpath-split {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.cl2-md-ownpath-split--stay {
  padding-inline-end: 12px;
  color: var(--cat-dark, #334155);
}

.cl2-md-ownpath-split--gone {
  padding-inline-start: 12px;
  border-inline-start: 1px solid rgba(17, 24, 39, 0.1);
  color: var(--cat-muted, #64748b);
}

.cl2-md-ownpath-split-label {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cl2-md-ownpath-split-pct {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.05;
  unicode-bidi: isolate;
}

.cl2-md-ownpath-split-sub {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  opacity: 0.85;
  unicode-bidi: isolate;
}

/* Mobile: keep the SAME one-row grid as desktop — grid-template-columns
   is left at the base rule (repeat(var(--ownpath-cols)), so whatever card count
   the data has still gets one row of equal columns, no separate mobile layout —
   just compact enough to fit, and the node/trunk/connectors stay since the
   geometry (node above an N-column row) is unchanged, only narrower. */
@media (max-width: 560px) {
  .cl2-md-ownpath-body {
    padding: 14px 0 16px 10px;
  }

  .cl2-md-ownpath-grid {
    gap: 5px;
    padding-top: 14px;
  }

  .cl2-md-ownpath-card-body {
    padding: 6px 5px 7px;
  }

  .cl2-md-ownpath-card-head {
    gap: 2px;
  }

  .cl2-md-ownpath-cat {
    font-size: 10.5px;
  }

  .cl2-md-ownpath-share {
    font-size: 12px;
  }

  .cl2-md-ownpath-count {
    font-size: 9px;
    margin-top: 3px;
  }

  .cl2-md-ownpath-splits {
    gap: 3px;
    margin-top: 6px;
    padding-top: 6px;
  }

  .cl2-md-ownpath-split--stay {
    padding-inline-end: 3px;
  }

  .cl2-md-ownpath-split--gone {
    padding-inline-start: 3px;
  }

  .cl2-md-ownpath-split-label {
    font-size: 8px;
  }

  .cl2-md-ownpath-split-pct {
    font-size: 11px;
  }

  .cl2-md-ownpath-split-sub {
    font-size: 7.5px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   "מידע טכני עולמי" — lazy brochure viewer, triggered from the #techInfoOpenBtn
   quick-action icon (.ql-action, assets/carlab-model-detail.css). NO technical
   data is rendered or requested until the icon is clicked
   (assets/ui-v2/model-techinfo.js). The viewer (.cl2-tiv*) is an accessible
   near-fullscreen dialog built on demand and appended to <body>: a variant
   rail (or a mobile selector) beside a clean printable brochure. Restrained
   booklet styling — no PDF simulation, gradients, or heavy shadows beyond the
   dialog lift.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Viewer dialog ── */
.cl2-tiv {
  position: fixed;
  inset: 0;
  z-index: 9200;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cl2-tiv[hidden] {
  display: none !important;
}

.cl2-tiv-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 8, 0.5);
}

.cl2-tiv-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(1080px, 94vw);
  height: min(88vh, 920px);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.cl2-tiv-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.cl2-tiv-title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}

.cl2-tiv-sub {
  margin: 3px 0 0;
  font-size: 11.5px;
  font-family: var(--mono);
  color: var(--text-muted);
  line-height: 1.3;
}

.cl2-tiv-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.cl2-tiv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text-muted);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}

.cl2-tiv-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.cl2-tiv-close {
  width: 32px;
  padding: 0;
  font-size: 14px;
}

.cl2-tiv-close:hover {
  background: #fef2f2;
  color: #ef4444;
  border-color: #fecaca;
}

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

.cl2-tiv-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* Variant rail (desktop) — inline-start (right in RTL). */
.cl2-tiv-variants {
  width: 232px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 12px;
  border-inline-end: 1px solid var(--border);
  background: var(--surface);
}

.cl2-tiv-variant {
  display: block;
  width: 100%;
  margin-bottom: 4px;
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--text-muted);
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.35;
  text-align: start;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.cl2-tiv-variant:hover {
  background: #fff;
  color: var(--text);
}

.cl2-tiv-variant.is-active {
  background: #fff;
  border-color: var(--border);
  color: var(--text);
  font-weight: 700;
}

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

/* Compact variant selector (mobile only). */
.cl2-tiv-variant-select {
  display: none;
}

.cl2-tiv-select-lbl {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.cl2-tiv-select {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
}

.cl2-tiv-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  background: #fff;
}

/* ── Brochure — clean public-information booklet ── */
.cl2-tiv-brochure {
  max-width: 720px;
  margin: 0 auto;
  padding: 26px 28px 34px;
}

.cl2-tiv-broc-head {
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.cl2-tiv-broc-brand {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #ecfeff;
  color: #0e7490;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.cl2-tiv-broc-title {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.15;
}

.cl2-tiv-broc-variant {
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-muted);
}

.cl2-tiv-sec {
  margin-top: 22px;
}

.cl2-tiv-sec:first-of-type {
  margin-top: 0;
}

.cl2-tiv-sec-h {
  margin: 0 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.cl2-tiv-dl {
  margin: 0;
}

.cl2-tiv-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid #f1f2f4;
}

.cl2-tiv-row:last-child {
  border-bottom: none;
}

.cl2-tiv-dt {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.cl2-tiv-dd {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  text-align: start;
}

.cl2-tiv-val {
  unicode-bidi: isolate;
}

.cl2-tiv-unit {
  margin-inline-start: 4px;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-muted);
}

.cl2-tiv-broc-source {
  margin-top: 26px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.cl2-tiv-broc-source p {
  margin: 0 0 4px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ── Loading / empty / error states ── */
.cl2-tiv-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 64px 24px;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
}

.cl2-tiv-state-err {
  color: #b91c1c;
}

.cl2-tiv-spinner {
  width: 26px;
  height: 26px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: cl2TivSpin 0.7s linear infinite;
}

@keyframes cl2TivSpin {
  to {
    transform: rotate(360deg);
  }
}

.cl2-tiv-retry {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.cl2-tiv-retry:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Mobile: full-screen dialog + variant selector instead of the side rail ── */
@media (max-width: 760px) {
  .cl2-tiv-panel {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
  .cl2-tiv-variants {
    display: none;
  }
  .cl2-tiv-variant-select:not([hidden]) {
    display: block;
    flex-shrink: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
  }
  .cl2-tiv-body {
    flex-direction: column;
  }
  .cl2-tiv-brochure {
    padding: 20px 18px 28px;
  }
}

/* ── Print: only the selected brochure ── */
@media print {
  body.cl2-tiv-open > *:not(.cl2-tiv) {
    display: none !important;
  }
  body.cl2-tiv-open {
    overflow: visible !important;
  }
  .cl2-tiv {
    position: static !important;
    display: block !important;
    height: auto !important;
  }
  .cl2-tiv-backdrop,
  .cl2-tiv-head,
  .cl2-tiv-variants,
  .cl2-tiv-variant-select {
    display: none !important;
  }
  .cl2-tiv-panel {
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    display: block !important;
    overflow: visible !important;
  }
  .cl2-tiv-body {
    display: block !important;
    overflow: visible !important;
  }
  .cl2-tiv-main {
    overflow: visible !important;
  }
  .cl2-tiv-brochure {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .cl2-tiv-sec,
  .cl2-tiv-row {
    break-inside: avoid;
  }
  .cl2-tiv-sec-h {
    break-after: avoid;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   "סקירת הדגם בישראל" — the identity-hero summary CSS moved to the shared
   assets/ui-v2/summary.css (also loaded by maker.php's own "{maker} בישראל –
   תמונת מצב" summary; both render includes/model_summary.php's or
   includes/maker_summary.php's text into the SAME .cl2-md-summary* markup) so
   both pages load ONE copy instead of duplicating it.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   "עדכוני {maker} {model}" — the updates feed CSS moved to the shared
   assets/ui-v2/updates-view.css (also loaded by maker.php's own "עדכוני
   {maker}" page; both routes render includes/updates_view.php, $updatesCtx:
   'model' | 'maker') so both pages load ONE copy instead of duplicating it.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   The remainder of model.php's own inline <style> block (detail-mode-only
   CSS, moved verbatim — same selectors/declarations/media-queries/ordering).
   Previously wrapped in <?php if ($mode === 'detail'): ?> inside model.php;
   this file is already loaded only in detail mode (see model.php's own
   conditional <link> tag), so the effective behavior is unchanged.
   ══════════════════════════════════════════════════════════════════════════ */
    .main-content{
      --sans:"Assistant",sans-serif;
      --mono:"Assistant",sans-serif;
      --data-font:"Assistant",sans-serif;
      --display-font:"Assistant",sans-serif;
      --heading-font:"Assistant",sans-serif;
      font-family:var(--sans)}
    /* Page shell (.cl2-md-layout grid + .cl2-md-main/-side columns + block padding
       scale + 1180px stack) → assets/ui-v2/model.css */
    /* Hero identity layout (.cl2-md-hero / -inner / -text) → assets/ui-v2/model.css */
    .hero-side{padding:24px 0;display:grid;gap:0;align-content:start}
    /* (Hero model-image row removed.) */
    /* Hero title / logo / subtitle (.cl2-md-hero-title / -logo / -subtitle / -titlerow)
       → assets/ui-v2/model.css. The unified year-filter control's own visual
       implementation (.ynav*) is now the single shared assets/ui-v2/ynav.css (also
       loaded by maker.php) — only what is genuinely specific to this page stays below:
       the trigger label's element id (#yearNavBtnText — maker.php's own trigger label
       has a different id, #ypTriggerLabel), the visually-hidden mobile label
       treatment, and .ynav-range-head (this page's range-section caption; maker.php's
       control has no equivalent). */
    .hero-year-wrap{flex:0 0 auto;display:flex;align-items:center;gap:8px}
    .hero-year-label{font-size:12px;color:var(--text-muted);font-family:var(--sans)}
    #yearNavBtnText{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .ynav-range-head{font-family:var(--sans);font-size:11px;font-weight:700;color:var(--text-muted);margin-bottom:6px}
    /* Task B (mobile): the year control moves into the title row, opposite the
       title, instead of dropping to its own full-width row below it. Only the
       VISIBLE "בחר שנה" text label is removed — #yearNavLabel keeps its DOM
       position/content and #yearNavBtn's existing aria-labelledby="yearNavLabel
       yearNavBtnText" still reads it for the accessible name (the standard
       visually-hidden-but-announced pattern, matching assets/ui-v2/components.css'
       .cl2-sr-only, reproduced here since this file's <style> is inline PHP, not
       that shared stylesheet). No selector/state/option duplication — same
       #yearNav control, same click handling, same URL/scope logic, unchanged. */
    @media(max-width:560px){
      .hero-year-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
    }
    /* (Old "סיכום AI" CSS removed — replaced by .cl2-md-summary* in assets/ui-v2/model.css.) */
    .table-panel{scroll-margin-top:92px}
    /* summary metrics (.cl2-md-metrics-*) → assets/ui-v2/model.css */
    .table-panel{margin-bottom:0;border-top:1px solid var(--border)}
    /* .section-divider inherited from carlab-analytics-shell.css (margin:0 0 32px 0) — was a conflicting inline dup */
    /* Breathing room below the ownership donut before the next sidebar section, previously a
       literal <br><br> hack in the markup — same visual gap, scoped to this page since .reg-own
       is shared with maker.php (#makerOwnershipWrap) and must stay untouched there. */
    #modelOwnershipWrap{margin-bottom:44px}
    /* "תתי דגמים מקושרים" cards — plain editorial cards, no propulsion tinting or
       pixel-grid backgrounds. Sparkline reuses window.CarLabSparklines.fixedRangeSparklineHtml
       (the same fixed 1996–2026 mini-chart the model/maker directory rows use); the status
       bar reuses the site-wide .status-bar/.status-seg + data-sb-tip hover-tip convention. */
    .cl2-md-mv-panel{border-top:1px solid var(--border)}
    .cl2-md-mv-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:18px 0 18px 20px}
    .cl2-md-mv-card{display:flex;flex-direction:column;gap:10px;min-width:0;padding:16px 15px 14px;border:1px solid var(--border);border-radius:12px;background:#fff}
    .cl2-md-mv-title{font-size:16px;line-height:1.2;font-family:var(--sans);font-weight:700;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .cl2-md-mv-spark{width:100%;height:28px}
    .cl2-md-mv-body{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;border-top:1px solid var(--border);padding-top:10px}
    .cl2-md-mv-stat strong{display:block;font-size:16px;font-family:var(--sans);font-weight:700;color:var(--text);letter-spacing:-.3px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .cl2-md-mv-stat span{display:block;color:var(--text-dim);font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.3px}
    /* Section-footer framing only (border + padding + centering) — the button
       itself is the shared sitewide .cl2-load-more (assets/ui-v2/components.css,
       loaded via render_site_header() on every page, same design already used
       by the models/makers directories), not a page-local style. */
    .cl2-md-mv-actions{display:flex;justify-content:center;padding:18px 0 24px 20px;border-top:1px solid var(--border)}
    .cl2-md-mv-actions[hidden]{display:none}
    th,td{padding:10px 14px;border-bottom:1px solid var(--border);text-align:right;vertical-align:middle;white-space:nowrap}
    th{background:var(--surface);font-size:11px;font-family:var(--mono);color:var(--text-dim);text-transform:uppercase;letter-spacing:.2px;position:sticky;top:0;z-index:2}
    .numeric{text-align:left;direction:ltr;font-family:var(--mono);font-variant-numeric:tabular-nums}
    .status-note{display:flex;justify-content:space-between;gap:8px;color:var(--text-dim);font-size:10px;direction:rtl}
    /* Ownership transfers block (heading now uses the shared .panel-head; legacy
       .ow-panel-head/-title/-note removed) */
    .ow-trend-body{padding:10px 20px 18px}
    .ow-trend-wrap{position:relative;height:300px}
    .ow-mode-toggle{display:inline-flex;border:1px solid var(--border);border-radius:6px;overflow:hidden;flex-shrink:0;align-self:center}
    .ow-mode-btn{padding:5px 13px;font-size:12px;font-family:var(--mono);color:var(--text-muted);background:#fff;border:none;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s;line-height:1.5}
    .ow-mode-btn + .ow-mode-btn{border-right:1px solid var(--border)}
    .ow-mode-btn.active{background:var(--accent);color:#fff;font-weight:600}
    .ow-chart-toggle{position:absolute;top:10px;right:10px;z-index:10;display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none}
    .ow-chart-toggle-track{width:26px;height:14px;border-radius:999px;background:var(--border);position:relative;transition:background .2s;flex-shrink:0}
    .ow-chart-toggle-thumb{position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
    .ow-chart-toggle.on .ow-chart-toggle-track{background:var(--accent)}
    .ow-chart-toggle.on .ow-chart-toggle-thumb{transform:translateX(12px)}

    .ow-chart-toggle-tip{position:absolute;bottom:calc(100% + 7px);right:0;background:#14140f;color:#fff;font-size:11px;font-family:var(--sans);padding:5px 9px;border-radius:5px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:20;line-height:1.5}
    .ow-chart-toggle:hover .ow-chart-toggle-tip{opacity:1}
    /* ── "קריאות שירות" (service recalls) — two-level disclosure: recall-type
       groups, each expanding to one or more dated campaigns. */
    .cl2-md-svc-body{display:grid;grid-template-columns:1fr;gap:8px;padding:var(--ms-4,16px) var(--ms-5,20px)}
    .cl2-md-svc-group{border:1px solid var(--border);border-radius:8px;overflow:hidden;background:#fff}
    .cl2-md-svc-group-head{display:flex;align-items:center;gap:9px;width:100%;min-height:42px;padding:9px 12px;border:none;background:none;font:inherit;color:inherit;text-align:right;cursor:pointer}
    .cl2-md-svc-group-head:hover{background:var(--surface)}
    .cl2-md-svc-icon{width:26px;height:26px;border-radius:6px;display:grid;place-items:center;flex-shrink:0}
    .cl2-md-svc-icon--safety{background:#fef2f2;color:#dc2626}
    .cl2-md-svc-icon--service{background:#fffbeb;color:#d97706}
    .cl2-md-svc-icon svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
    .cl2-md-svc-title{flex:1;font-size:13px;font-weight:700;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .cl2-md-svc-count{font-size:10px;font-family:var(--mono);color:var(--text-muted);background:var(--surface);border:1px solid var(--border);padding:2px 7px;white-space:nowrap;flex-shrink:0}
    .cl2-md-svc-chevron{color:var(--text-dim);flex-shrink:0;transition:transform .2s}
    .cl2-md-svc-group-head[aria-expanded="true"] .cl2-md-svc-chevron{transform:rotate(180deg)}
    .cl2-md-svc-group-body{display:none;border-top:1px solid var(--border)}
    .cl2-md-svc-group[data-open="true"]>.cl2-md-svc-group-body{display:block}
    .cl2-md-svc-entry{border-bottom:1px solid var(--border)}
    .cl2-md-svc-entry:last-child{border-bottom:none}
    .cl2-md-svc-entry-head{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;border:none;background:var(--surface);font:inherit;color:inherit;text-align:right;cursor:pointer}
    .cl2-md-svc-entry-head:hover{background:var(--surface-2,#f0f0f0)}
    .cl2-md-svc-entry-date{flex:1;font-size:12px;font-family:var(--mono);color:var(--text-muted)}
    .cl2-md-svc-entry-head[aria-expanded="true"] .cl2-md-svc-chevron{transform:rotate(180deg)}
    .cl2-md-svc-entry-body{display:none;padding:10px 14px 12px;background:#fff;border-top:1px solid var(--border)}
    .cl2-md-svc-entry[data-open="true"]>.cl2-md-svc-entry-body{display:block}
    .cl2-md-svc-desc{font-size:12px;color:var(--text);line-height:1.6}
    .cl2-md-svc-meta{display:flex;flex-wrap:wrap;gap:10px 20px;border-top:1px solid var(--border);margin-top:8px;padding-top:8px}
    .cl2-md-svc-meta-item{min-width:0;max-width:100%}
    .cl2-md-svc-meta-label{font-size:9px;text-transform:uppercase;letter-spacing:.4px;color:var(--text-dim);font-family:var(--mono)}
    .cl2-md-svc-meta-value{display:block;margin-top:2px;font-size:11px;color:var(--text);word-break:break-word}
    .cl2-md-svc-degem{margin-top:6px;font-size:10px;font-family:var(--mono);color:var(--text-dim)}
    /* This section's subtitle (recall count + year range + safety count) is long
       enough to wrap to 2+ lines at narrow widths — same shared .cl2-md-layout
       .panel-head{line-height:0} issue fixed for #catRelatedSection above; scoped
       here too rather than touching the shared rule other (short-subtitle) panels
       rely on. */
    #recallsSection .panel-subtitle{line-height:1.4}
    /* ── Trims list — ranked compact equipment-level rows (sidebar; top-N + toggle) ── */
    .tl-list{display:flex;flex-direction:column;padding:6px 0}
    .tl-row{position:relative;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:9px;padding:8px 20px;overflow:hidden}
    .tl-row--extra{display:none}
    .tl-list.tl-show-all .tl-row--extra{display:grid}
    .tl-fill{position:absolute;inset-inline-start:0;top:0;bottom:0;background:var(--accent-dim);z-index:0;pointer-events:none}
    .tl-name{position:relative;z-index:1;font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .tl-share{position:relative;z-index:1;font-family:var(--mono);font-size:10px;font-weight:600;color:var(--text-dim);direction:ltr;min-width:30px;text-align:left}
    .tl-count{position:relative;z-index:1;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--text-muted);direction:ltr;min-width:48px;text-align:left}
    .tl-more{display:block;width:100%;padding:9px 20px;border:none;border-top:1px solid var(--border);background:none;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--accent);cursor:pointer;text-align:center;transition:background .12s}
    .tl-more:hover{background:var(--surface)}
    .tl-empty{padding:22px 20px;text-align:center;font-size:13px;color:var(--text-muted)}
    /* Same-category competing-models block */
    /* "דגמים נוספים בקטגוריה" cards — same editorial-card proportions as the
       "תתי דגמים מקושרים" cards (.cl2-md-mv-*) just above this block: bordered,
       rounded, flex-column, footer pinned to the bottom via margin-top:auto so
       cards line up regardless of how many lines a name wraps to. Only identity
       (Hebrew + English name) and total vehicle count remain — no active count,
       no years-on-road. */
    .cl2-md-catrel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;padding:18px 0 18px 20px}
    .cl2-md-catrel-card{display:flex;flex-direction:column;gap:8px;min-width:0;padding:16px 15px 14px;border:1px solid var(--border);border-radius:12px;background:#fff;text-decoration:none;color:inherit;transition:border-color .14s}
    .cl2-md-catrel-card:hover{border-color:var(--text-muted)}
    .cl2-md-catrel-name{font-size:15px;line-height:1.3;font-family:var(--sans);font-weight:700;color:var(--text)}
    .cl2-md-catrel-name small{font-size:12px;font-weight:400;color:var(--text-muted)}
    .cl2-md-catrel-en{font-size:10.5px;font-family:var(--mono);color:var(--text-dim);text-transform:uppercase;letter-spacing:.3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .cl2-md-catrel-count{display:flex;align-items:baseline;gap:5px;border-top:1px solid var(--border);padding-top:8px;margin-top:auto}
    .cl2-md-catrel-count strong{font-size:14px;font-family:var(--sans);font-weight:700;color:var(--text)}
    .cl2-md-catrel-count span{font-size:10px;font-family:var(--mono);color:var(--text-dim);text-transform:uppercase;letter-spacing:.3px}
    .cl2-md-catrel-link{font-size:12px;font-family:var(--mono);color:var(--text-muted);text-decoration:none;white-space:nowrap;padding:5px 10px;border:1px solid var(--border);transition:color .12s,border-color .12s}
    .cl2-md-catrel-link:hover{color:var(--text);border-color:var(--text-muted)}
    /* This section's subtitle is long enough to wrap to 2+ lines once the sibling
       .cl2-md-catrel-link squeezes the title column at narrow widths — the shared
       .cl2-md-layout .panel-head{line-height:0} (meant to collapse an EMPTY
       subtitle to zero height) then draws every wrapped line on top of the last.
       Scoped fix for this section only; the shared rule is left untouched since
       other panels rely on it for their (short, single-line) subtitles. */
    #catRelatedSection .panel-subtitle{line-height:1.4}
    /* (.trim-chip / .tct-* grid styles removed — trims now render as the .tl-* list above.) */
    /* ── Years grid ── */
    /* ── Years list — compact per-year registration-status rows (sidebar) ── */
    /* ── Ownership & Secondary Market Behavior section ── */
    .owh-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--border)}
    .owh-stat{background: #f8f9fa;padding:22px 22px 20px;border-left:1px solid var(--border)}
    .owh-stat:last-child{border-left:none}
    .owh-stat-value{font-size:36px;font-weight:800;font-family:var(--heading-font);color:var(--text);letter-spacing:-1.5px;line-height:1}
    .owh-stat-value--text{font-size:18px;letter-spacing:-.3px;line-height:1.2;padding-top:4px}
    .owh-stat-label{font-size:12px;color:var(--text);margin-top:10px;font-weight:600;line-height:1.3;display:flex;align-items:flex-start;gap:4px}
    .owh-stat-support{font-size:11px;color:var(--text-dim);margin-top:5px;line-height:1.45}
    .owh-stat-ci{font-size:10px;color:var(--text-dim);font-family:var(--mono);margin-top:3px}
    .owh-section-label{padding:12px 22px 0;font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);border-top:1px solid var(--border)}
    .owh-survival{padding:16px 0px 18px;border-top:1px solid var(--border)}
    .owh-survival-title{font-size:16px;font-weight:600;color:var(--text);margin-bottom:3px;display:flex;align-items:center;gap:6px}
    .owh-survival-desc{font-size:11px;color:var(--text-dim);margin-bottom:14px}
    .owh-survival-track{direction: ltr;display:flex;gap:0;height:32px;border-radius:0;overflow:hidden;background:var(--border)}
    .owh-survival-seg{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;font-family:var(--mono);color:#fff;font-weight:700;transition:flex .4s ease;min-width:0;overflow:hidden}
    .owh-survival-labels{display:flex;margin-top:6px;font-size:10px;font-family:var(--mono);color:var(--text-dim)}
    .owh-survival-label{text-align:center}
    .owh-chains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--border)}
    .owh-chain{padding:18px 22px;border-left:1px solid var(--border);display:flex;flex-direction:column;gap:3px}
    .owh-chain:last-child{border-left:none}
    .owh-chain-count{font-size:28px;font-weight:800;font-family:var(--heading-font);color:var(--text);letter-spacing:-1px;line-height:1}
    .owh-chain-label{font-size:12px;font-weight:600;color:var(--text);margin-top:8px}
    .owh-chain-support{font-size:11px;color:var(--text-dim);margin-top:3px;line-height:1.4}
    .owh-chain-pct{font-size:11px;color:var(--text-muted);font-family:var(--mono);margin-top:6px}
    .owh-coverage{padding:10px 0px;font-size:12px;color:var(--text-dim);font-family:var(--mono);display:flex;justify-content:space-between;align-items:center}
    .owh-quality-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;font-family:var(--mono)}
    .owh-quality-badge.high{background:var(--green-bg);color:var(--green)}
    .owh-quality-badge.medium{background:var(--amber-bg);color:var(--amber)}
    .owh-quality-badge.low{background:var(--surface);color:var(--text-dim)}
    /* ── Tooltip ── */
    .owh-tip{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;background:var(--border);color:var(--text-dim);font-size:9px;font-weight:700;font-family:var(--mono);cursor:help;position:relative;flex-shrink:0;vertical-align:middle;margin-right:5px;user-select:none}
    .owh-tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);right:-8px;width:230px;background:#1a1d27;color:#d4dbe8;font-size:11px;font-weight:400;line-height:1.55;padding:9px 12px;border-radius:6px;pointer-events:none;opacity:0;transition:opacity .18s;z-index:200;box-shadow:0 4px 16px rgba(0,0,0,.45);white-space:normal;font-family:var(--sans)}
    .owh-tip::before{content:'';position:absolute;bottom:calc(100% + 2px);right:3px;border:5px solid transparent;border-top-color:#1a1d27;pointer-events:none;opacity:0;transition:opacity .18s;z-index:201}
    .owh-tip:hover::after,.owh-tip:hover::before{opacity:1}
    /* Root cause of the model-page horizontal-overflow bug: this tooltip is always
       present in layout (opacity:0, not display:none), right-anchored -8px from
       its 14px icon at a fixed 230px width. Icons live throughout the page's
       normal text flow, not near a right edge with 238px of clearance, so on any
       narrow viewport the tooltip's box extends past the left edge of the page
       and expands the document's own horizontal scroll -- independent of whether
       the tooltip is actually visible. Centering it on the icon and narrowing it
       only below the page's own existing 760px tier keeps desktop/tablet exactly
       as-is and fits every current icon position with margin to spare. */
    @media(max-width:760px){
      .owh-tip::after{width:180px;right:auto;left:50%;transform:translateX(-50%)}
      .owh-tip::before{right:auto;left:50%;transform:translateX(-50%)}
    }
    /* ── Origin-group tabs ── */
    .owh-tab-bar{margin-bottom: 10px;display:flex;gap:0;border-bottom:1px solid var(--border)}
    .owh-tab-panel[hidden]{display:none}
    .owh-tab-cov{display:inline-flex;align-items:center;padding:1px 7px;border-radius:999px;font-size:9px;font-weight:700;font-family:var(--mono)}
    .owh-tab-cov.medium{background:var(--amber-bg);color:var(--amber)}
    .owh-tab-cov.low{border:1px solid var(--border);color:var(--text-muted)}
    .owh-tab-cov.insufficient{background:var(--red-bg,#fef2f2);color:var(--red,#dc2626)}
    .owh-tab-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--border)}
    .owh-cov-warn-bar{padding:7px 22px;border-top:1px solid var(--border);display:flex;align-items:center;gap:6px;font-size:11px;color:var(--amber,#d97706);font-family:var(--mono);background:var(--amber-bg,#fffbeb)}
    .owh-insufficient{padding:40px 22px;text-align:center;border-top:1px solid var(--border)}
    /* ── Top ownership sequences table ── */
    .owh-seq-wrap{padding:14px 22px 18px;border-top:1px solid var(--border)}
    .owh-seq-label{font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);font-weight:600;margin-bottom:10px}
    .owh-seq-table{width:100%;border-collapse:collapse;font-size:12px}
    .owh-seq-table th{padding:6px 10px;border-bottom:1px solid var(--border);color:var(--text-muted);font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;text-align:right}
    .owh-seq-table th:first-child,.owh-seq-table td:first-child{text-align:left;width:52px}
    .owh-seq-table th:nth-child(2),.owh-seq-table td:nth-child(2){width:80px;text-align:left}
    .owh-seq-table td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
    .owh-seq-table tr:last-child td{border-bottom:none}
    .owh-seq-table tr:hover td{background:var(--surface)}
    .owh-seq-pct{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--text)}
    .owh-seq-count{font-family:var(--mono);font-size:12px;color:var(--text-muted)}
    .owh-seq-chips{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
    .owh-seq-arrow{color:var(--text-dim);font-size:11px;font-family:var(--mono);direction:ltr;unicode-bidi:isolate;white-space:nowrap}
    /* ── Raw sample panel ── */
    .owh-source{border-top:1px solid var(--border)}
    .owh-source-toggle{width:100%;padding:10px 0px;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-size:12px;font-family:var(--mono);color:var(--text-dim);text-align:right}
    .owh-source-toggle:hover{background:var(--surface)}
    .owh-source-toggle svg{transition:transform .2s;flex-shrink:0}
    .owh-source-toggle.open svg{transform:rotate(180deg)}
    .owh-source-body{display:none;padding:10px 0px 15px;overflow-x:auto}
    .owh-source-body.open{display:block}
    .owh-source-table{width:100%;border-collapse:collapse;font-size:11px;font-family:var(--mono)}
    .owh-source-table th{padding:7px 0px 7px 10px;border-bottom:1px solid var(--border);color:var(--text-muted);font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}
    .owh-source-table td{padding:5px 10px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:top;white-space:nowrap}
    .owh-source-table tr:last-child td{border-bottom:none}
    .owh-source-table tr:hover td{background:var(--surface)}
    .owh-ev-seq{display:flex;flex-wrap:wrap;gap:3px}
    .owh-ev{display:inline-flex;align-items:center;gap:3px;font-size:10px}
    .owh-ev-type{padding:1px 5px;border-radius:3px;font-weight:600;background:var(--surface);color:var(--text)}
    .owh-ev-type.fleet{background:#4c1d95;color:#ddd6fe}
    .owh-ev-type.private{background:#14532d;color:#86efac}
    .owh-ev-type.dealer{background:#422006;color:#fed7aa}
    .owh-ev-date{color:var(--text-dim);font-size:9px}
    .owh-ev-arrow{color:var(--text-dim);font-size:9px}
    .owh-source-note{font-size:10px;color:var(--text-dim);margin-top:10px;font-family:var(--mono)}
    /* ── CarLAB Ownership Score ── */
    /* ── Year filter ── */
    .owh-year-loading{font-size:10px;color:var(--text-dim);font-family:var(--mono)}
    @media(max-width:1180px){.owh-grid{grid-template-columns:repeat(2,1fr)}.owh-chains{grid-template-columns:1fr}.owh-chain{border-left:none;border-top:1px solid var(--border)}}
    @media(max-width:600px){.owh-grid{grid-template-columns:1fr}.owh-stat{border-left:none;border-top:1px solid var(--border)}.owh-chains{grid-template-columns:1fr}}
    /* ── Redesigned ownership block (owh2-) ── */
    .owh2-summary{display:flex;align-items:flex-start;gap:0;border-bottom:1px solid var(--border);background:var(--surface)}
    .owh2-score-area{display:flex;align-items:center;gap:14px;padding:20px 24px;border-left:1px solid var(--border);flex-shrink:0;min-width:220px}
    .owh2-score-area--limited{flex-direction:column;align-items:flex-start;gap:4px}
    .owh2-score-num{font-size:56px;font-weight:800;font-family:var(--heading-font);line-height:1;letter-spacing:-2.5px;flex-shrink:0;font-variant-numeric:tabular-nums}
    .owh2-score-meta{display:flex;flex-direction:column;gap:3px}
    .owh2-score-title{font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);font-weight:600;display:flex;align-items:center;gap:4px}
    .owh2-score-label{font-size:14px;font-weight:700;color:var(--text);line-height:1.2}
    .owh2-score-limited-icon{font-size:22px;line-height:1}
    .owh2-score-limited-label{font-size:12px;font-weight:600;color:var(--text-muted)}
    .owh2-score-limited-text{font-size:11px;color:var(--text-dim);max-width:160px;line-height:1.4}
    .owh2-summary-main{flex:1;padding:20px 24px;display:flex;flex-direction:column;gap:10px}
    .owh2-headline{font-size:14px;line-height:1.65;color:var(--text)}
    .owh2-factors{display:flex;flex-wrap:wrap;gap:3px 16px;margin-top:2px}
    .owh2-factor{font-size:11px;line-height:1.5;color:var(--text-muted)}
    .owh2-factor--pos{color:#15803d}
    .owh2-factor--neg{color:#b45309}
    .owh2-summary-footer{display:flex;align-items:center;gap:8px;margin-top:4px}
    .owh2-cov-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:10px;font-weight:700;font-family:var(--mono);white-space:nowrap}
    .owh2-cov-badge::before{content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0}
    .owh2-cov-badge--high{background:var(--green-bg,#f0fdf4);color:var(--green,#16a34a)}.owh2-cov-badge--high::before{background:var(--green,#16a34a)}
    .owh2-cov-badge--medium{background:var(--amber-bg,#fffbeb);color:var(--amber,#d97706)}.owh2-cov-badge--medium::before{background:var(--amber,#d97706)}
    .owh2-cov-badge--low{background:var(--surface-2,#f3f4f6);color:var(--text-muted)}.owh2-cov-badge--low::before{background:var(--text-dim)}
    .owh2-cov-badge--insufficient{background:var(--red-bg,#fef2f2);color:var(--red,#dc2626)}.owh2-cov-badge--insufficient::before{background:var(--red,#dc2626)}
    .owh2-score-badge{display:inline-block;padding:1px 7px;border-radius:999px;font-size:9px;font-weight:700;font-family:var(--mono);vertical-align:middle;margin:0 2px}
    .owh2-score-badge--partial{background:var(--amber-bg,#fffbeb);color:var(--amber,#d97706)}
    .owh2-score-badge--young{background:#eff6ff;color:#2563eb}
    .owh2-score-subnote{font-size:10px;font-family:var(--mono);color:var(--text-dim);line-height:1.45;margin-top:3px}
    .owh2-score-comps-toggle{background:none;border:none;font-size:11px;font-family:var(--mono);color:var(--text-dim);cursor:pointer;padding:0;margin-top:4px;text-decoration:underline dotted;text-underline-offset:2px}
    .owh2-score-comps-toggle:hover{color:var(--text-muted)}
    .owh2-comps-wrap{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:5px 24px}
    .owh2-comp{display:flex;align-items:center;gap:7px}
    .owh2-comp-lbl{font-size:10px;color:var(--text-dim);font-family:var(--mono);min-width:80px;text-align:right;flex-shrink:0}
    .owh2-comp-bar-wrap{flex:1;height:3px;background:var(--border);border-radius:999px;overflow:hidden}
    .owh2-comp-bar{height:100%;border-radius:999px}
    .owh2-comp-val{font-size:10px;font-family:var(--mono);color:var(--text-muted);min-width:20px}
    .owh2-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:1px solid var(--border)}
    .owh2-card{padding:20px 20px 18px;border-left:1px solid var(--border);display:flex;flex-direction:column;gap:0}
    .owh2-card:last-child{border-left:none}
    .owh2-card--hidden{display:none}
    .owh2-card-label{font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);font-weight:600;margin-bottom:10px;line-height:1.3}
    .owh2-card-val{font-size:22px;font-weight:800;font-family:var(--heading-font);color:var(--text);letter-spacing:-.5px;line-height:1.1;margin-bottom:8px}
    .owh2-card-val--na{font-size:14px;font-weight:400;color:var(--text-dim);letter-spacing:0}
    .owh2-card-body{font-size:12px;color:var(--text);line-height:1.6;flex:1;margin-bottom:8px}
    .owh2-card-method{font-size:10px;font-family:var(--mono);color:var(--text-dim);line-height:1.4;margin-top:auto;padding-top:8px;border-top:1px solid var(--border)}
    .owh2-card-support{font-size:10px;color:var(--text-muted);margin-top:4px;line-height:1.4}
    .owh2-paths{padding:16px 22px 18px;border-bottom:1px solid var(--border)}
    .owh2-paths-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
    .owh2-paths-head-title{display:flex;align-items:center;gap:6px}
    .owh2-paths-title{font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);font-weight:600}
    /* Icon-only tree button (inside header, opposite side from title) */
    .owh2-paths-list{display:flex;flex-direction:column;gap:15px}
    .owh2-path-row{display:flex;flex-direction:row;align-items:center;gap:10px}
    .owh2-path-bar-wrap{width:80px;flex-shrink:0;height:6px;background:var(--border);border-radius:3px;overflow:hidden}
    .owh2-path-bar{height:100%;border-radius:999px;background:var(--accent);opacity:.55;transition:width .3s}
    .owh2-path-chips{display:flex;align-items:center;gap:3px;flex:1;flex-wrap:wrap;direction:rtl;unicode-bidi:isolate;justify-content:flex-start}
    .owh2-path-chips>*{unicode-bidi:isolate}
    .owh2-path-stats{display:flex;align-items:center;gap:8px;flex-shrink:0;font-family:var(--mono)}
    .owh2-path-pct{font-size:13px;font-weight:700;color:var(--text)}
    .owh2-path-count{font-size:11px;color:var(--text-dim)}
    /* ── Paths sidebar (embedded inside owh2-summary as left column) ── */
    .owh2-summary-paths{width:234px;flex-shrink:0;border-right:1px solid var(--border);display:flex;flex-direction:column}
    .owh2-summary-paths .owh2-paths{padding:12px 14px 14px;border-bottom:none;flex:1;display:flex;flex-direction:column}
    .owh2-summary-paths .owh2-paths-head{margin-bottom:8px}
    .owh2-summary-paths .owh2-paths-list{gap:5px;flex:1}
    /* Sidebar path-row: retention bar on one side, share badge on the other. */
    .owh2-summary-paths .owh2-path-row{flex-direction:row;gap:8px;align-items:center}
    .owh2-summary-paths .owh2-path-chips{order:-1;flex:1;gap:2px;line-height:1.45;justify-content:flex-start}
    .owh2-summary-paths .owh2-path-bar-wrap{width:68px;flex-shrink:0;height:5px}
    .owh2-summary-paths .owh-ev-type{font-size:9px;padding:1px 4px}
    .owh2-summary-paths .owh-seq-arrow{font-size:9px}
    .owh2-summary-paths .owh2-path-pct{font-size:11px;font-weight:700;line-height:1.2}
    .owh2-summary-paths .owh2-path-count{font-size:9px;line-height:1.2;color:var(--text-dim)}
    /* ── Compact ownership summary: one row per first-level tree branch ───── */
    .owh2-branch-head{display:grid;grid-template-columns:32% minmax(0,1fr);align-items:end;gap:12px;margin:4px 0 8px}
    .owh2-branch-head-label{font-size:12px;font-family:var(--mono);font-weight:700;line-height:1.4;color:var(--text-muted)}
    .owh2-branch-head-label--badge{text-align:right}
    .owh2-branch-head-label--bar{text-align:right;font-size:11px;line-height:1.45}
    .owh2-branch-row{position:relative;display:grid;grid-template-columns:32% minmax(0,1fr);align-items:center;gap:12px}
    .owh2-branch-row::after{
      content:attr(data-tooltip);
      position:absolute;
      inset-inline-end:0;
      bottom:calc(100% + 8px);
      min-width:180px;
      max-width:min(320px,72vw);
      padding:9px 12px;
      border-radius:8px;
      background:rgba(17,24,39,.94);
      color:#fff;
      font-size:11px;
      line-height:1.55;
      font-family:var(--sans);
      text-align:right;
      white-space:normal;
      pointer-events:none;
      opacity:0;
      transform:translateY(2px);
      transition:opacity .08s ease,transform .08s ease;
      z-index:30;
      box-shadow:0 6px 18px rgba(0,0,0,.22);
    }
    .owh2-branch-row:hover::after{opacity:1;transform:translateY(0)}
    .owh2-branch-badge-wrap{display:flex;align-items:center;min-width:0}
    .owh2-branch-badge{position:relative;isolation:isolate;overflow:hidden;width:100%;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:6px;font-size:12px;font-weight:800;line-height:1;white-space:nowrap;border:1px solid transparent}
    .owh2-branch-badge::before{content:"";position:absolute;inset-block:0;inset-inline-end:0;width:var(--branch-share,0%);background:var(--branch-fill,rgba(59,130,246,.14));pointer-events:none;z-index:0}
    .owh2-branch-badge-pct,.owh2-branch-badge-type{position:relative;z-index:1}
    .owh2-branch-badge-pct{font-family:var(--sans);letter-spacing:0}
    .owh2-branch-badge-type{font-size:11px}
    .owh2-branch-info{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,20px);align-items:center;gap:0px;min-width:0}
    .owh2-branch-pct{padding-right: 5px;font-size:11px;font-weight:800;font-family:var(--sans);letter-spacing:0;line-height:1;text-align:center;white-space:nowrap}
    .owh2-branch-pct--green{color:#16a34a}
    .owh2-branch-pct--gray{color:#64748b}
    .owh2-branch-pct--zero{color:#94a3b8}
    .owh2-branch-row .owh2-path-bar-wrap{position:relative;width:100%;height:24px;background:#d9dee5;border-radius:6px;overflow:hidden;display:flex;justify-content:flex-end}
    .owh2-branch-row .owh2-path-bar{position:relative;height:100%;border-radius:6px;background:#59bc66!important;opacity:1}
    .owh2-path-bar-label{position:absolute;top:50%;transform:translateY(-50%);font-size:10px;font-family:var(--mono);font-weight:700;line-height:1;white-space:nowrap;pointer-events:none;user-select:none}
    .owh2-path-bar-label--gray{inset-inline-start:8px;color:#5b6472}
    .owh2-path-bar-label--green{inset:0;display:flex;align-items:center;justify-content:center;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.16);transform:none}
    .owh2-branch-row--channel{opacity:.6}
    /* ── Inline second-level preview (expand a first-level branch) ───────── */
    .owh2-branch-item{display:flex;flex-direction:column}
    .owh2-branch-item--expandable > .owh2-branch-row{cursor:pointer;border-radius:8px;transition:background .12s}
    .owh2-branch-item--expandable > .owh2-branch-row:hover{background:var(--surface,#f4f5f7)}
    .owh2-branch-chev{position:relative;z-index:1;margin-inline-start:auto;font-size:9px;line-height:1;opacity:.65;transition:transform .18s ease}
    .owh2-branch-item--open > .owh2-branch-row .owh2-branch-chev{transform:rotate(180deg)}
    .owh2-branch-children{display:flex;flex-direction:column;gap:6px;margin-top:6px;padding-inline-start:12px;border-inline-start:2px solid var(--border)}
    .owh2-branch-children[hidden]{display:none}
    .owh2-branch-subrow .owh2-branch-badge{background:var(--surface,#f1f3f5);border-color:var(--border);color:var(--text);font-weight:700;gap:8px;justify-content:flex-start}
    .owh2-branch-subrow .owh2-branch-badge::before{display:none}
    .owh2-branch-badge-count{position:relative;z-index:1;font-family:var(--mono);font-size:11px;font-weight:800;color:var(--text-muted)}
    .owh2-branch-subrow .owh2-branch-badge-count{margin-inline-start:auto}
    .owh2-branch-subrow .owh2-path-bar-wrap{height:18px}
    /* route = colored ownership chips + direction marker (read the route by color) */
    .owh2-route{position:relative;z-index:1;display:inline-flex;align-items:center;gap:2px;direction:rtl;unicode-bidi:isolate}
    .owh2-route-chip{display:inline-block;width:15px;height:11px;border-radius:4px;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
    .owh2-route-arrow{font-size:9px;color:var(--text-dim);direction:ltr;unicode-bidi:isolate;margin:0 1px}
    /* small, subtle ownership-color legend at the bottom of the block */
    .owh2-legend{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:18px;justify-content: space-between;font-size:9.5px;font-family:var(--mono);color:var(--text-muted);line-height:1}
    .owh2-legend-item{display:inline-flex;align-items:center;gap:4px}
    .owh2-legend-dot{width:10px;height:10px;border-radius:2px;flex-shrink:0}
    .owh2-summary-paths .owh2-branch-badge-wrap{min-width:0}
    .owh2-summary-paths .owh2-branch-badge{padding:5px 10px}
    .owh2-summary-paths .owh2-branch-badge-pct{font-size:15px}
    .owh2-summary-paths .owh2-branch-badge-type{font-size:10.5px}
    .owh2-summary-paths .owh2-branch-info{font-size:9px}
    @media(max-width:900px){.owh2-summary-paths{display:none}}

    /* "מי העלה את הרכב לכביש?" ownership-origin tree → rebuilt as .cl2-md-ownpath-*
       (assets/ui-v2/model.css). Legacy .owrt-* styles removed. */

    /* Full transfer-paths tree modal (.owt-*) removed -- deferred from launch
       (docs/deferred-public-features.md). The compact "מסלולי בעלות" summary
       cards use their own, separate .cl2-md-ownpath-* styling elsewhere in this
       file and are unaffected. */
    /* (Sidebar ownership tab strip removed — "התפלגות ידיים" and "סוגי בעלות" are now
       two standalone .cl2-md-ownblock sections; their standalone framing lives in
       assets/ui-v2/model.css.) */
    /* ── Hands distribution widget ── */
    .owh2-hands{padding:18px 22px 20px;border-top:1px solid var(--border)}
    .owh2-hands-total{font-size:10px;font-family:var(--mono);color:var(--text-dim)}
    .owh2-hands-toggle{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:11px;font-weight:600;color:var(--text-muted);cursor:pointer;user-select:none;flex-shrink:0}
    .owh2-hands-toggle input{width:14px;height:14px;cursor:pointer;accent-color:#3b82f6;margin:0}
    .owh2-hands-rows{display:flex;flex-direction:column;gap:8px}
    .owh2-hands-row{display:flex;align-items:center;gap:10px}
    .owh2-hands-label{font-size:11px;font-weight:700;font-family:var(--mono);color:var(--text);min-width:62px;flex-shrink:0;text-align:right}
    .owh2-hands-bar-wrap{flex:1;height:6px;background:var(--border);border-radius:999px;overflow:hidden}
    .owh2-hands-bar{height:100%;border-radius:999px;transition:width .5s cubic-bezier(.4,0,.2,1)}
    .owh2-hands-pct{font-size:12px;font-weight:700;font-family:var(--mono);color:var(--text);min-width:34px;text-align:left;flex-shrink:0}
    .owh2-hands-count{font-size:10px;font-family:var(--mono);color:var(--text-dim);flex-shrink:0}
    .owh2-hands-note{margin-top:12px;font-size:10px;font-family:var(--mono);color:var(--text-dim);line-height:1.5}
    .owh2-maturity-warn{padding:8px 22px;font-size:11px;color:var(--amber,#d97706);background:var(--amber-bg,#fffbeb);font-family:var(--mono);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px}
    .owh2-trend-chip{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;font-size:10px;font-weight:700;font-family:var(--mono);white-space:nowrap}
    .owh2-trend-chip--private{background:#eff6ff;color:#1d4ed8}
    .owh2-trend-chip--fleet{background:#fef3c7;color:#92400e}
    .owh2-trend-chip--shift-up{background:#f0fdf4;color:#15803d}
    .owh2-trend-chip--shift-down{background:#fff7ed;color:#c2410c}
    @media(max-width:1180px){.owh2-cards{grid-template-columns:repeat(3,1fr)}.owh2-card:nth-child(3){border-left:none}.owh2-score-area{min-width:180px}}
    @media(max-width:760px){.owh2-summary{flex-direction:column}.owh2-score-area{border-left:none;border-bottom:1px solid var(--border);min-width:unset;width:100%}.owh2-cards{grid-template-columns:repeat(2,1fr)}.owh2-card:nth-child(2n){border-left:none}.owh2-card:nth-child(3){border-left:1px solid var(--border)}.owh2-comps-wrap{grid-template-columns:1fr}}
    @media(max-width:480px){.owh2-cards{grid-template-columns:1fr}.owh2-card{border-left:none!important;border-top:1px solid var(--border)}}
    .model-picker{padding:40px 0 60px;max-width:480px}
    .picker-title{font-size:22px;font-family:var(--display-font);font-weight:700;color:var(--text);margin:0 0 6px}
    .picker-sub{font-size:13px;color:var(--text-dim);margin:0 0 28px}
    .picker-field{margin-bottom:16px}
    .picker-label{display:block;font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.3px;color:var(--text-dim);margin-bottom:6px}
    .picker-select{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:0;background:var(--surface);font-family:var(--sans);font-size:14px;color:var(--text);cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 12px center;direction:rtl}
    .picker-select:disabled{opacity:.45;cursor:not-allowed}
    .picker-btn{margin-top:8px;padding:10px 24px;background:var(--accent);color:#fff;border:none;font-family:var(--sans);font-size:14px;font-weight:600;cursor:pointer;border-radius:0}
    .picker-btn:disabled{opacity:.4;cursor:not-allowed}
    /* Body-type icon (.cl2-md-hero-bodyicon) → assets/ui-v2/model.css */
    /* Shell 1180px single-column stack → assets/ui-v2/model.css */
    /* ── Ownership block "מי העלה את הרכב לכביש?": stays in the main column directly
         below the deliveries chart, full width. ("מי מחזיק ברכב היום?" was moved back
         to the sidebar, under the hero-card.) The road section itself is unchanged. ── */
    .own-duo-grid{display:grid;grid-template-columns:1fr;gap:20px;align-items:start}
    .own-duo-col{min-width:0}
    .own-duo-col>.table-panel{margin:0}
    @media(max-width:760px){.cl2-md-mv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
    @media(max-width:480px){.cl2-md-mv-grid{grid-template-columns:1fr}}
    /* ── Official price — Ministry/importer price-list yearly entry-price chart ── */
    /* price line chart wrapper (.cl2-md-price-chart) → assets/ui-v2/model.css */
    .val-body{padding:14px 0 4px 20px}
    .val-note{margin:10px 0 14px 20px;padding-top:10px;border-top:1px solid var(--border);font-size:10.5px;color:var(--text-muted);line-height:1.5}
    .val-empty{padding:18px;text-align:center;color:var(--text-muted);font-size:13px}
    /* Old inline car2db spec block (.sp-*) removed — replaced by the lazy
       "מידע טכני עולמי" entry + viewer (.cl2-md-techinfo* in assets/ui-v2/model.css,
       assets/ui-v2/model-techinfo.js). */