/* CarLAB ui-v2 — shared small components used across more than one page.
   Loaded once via render_site_header() (includes/layout.php) alongside
   tokens/base/shell/responsive, so every ui-v2 page gets these for free
   with no per-page <link>. Keep this file to components that are
   genuinely identical across pages -- anything page-specific stays in
   that page's own stylesheet. */

/* ── Load-more / show-more pagination control ──
   One visual + behavioral reference for the homepage explorer
   (#hxMoreBtn), the models directory (#dirMoreBtn), and the
   manufacturers directory (#dirShowMore). Each page's own JS still owns
   its fetch/reveal logic and busy/error state entirely -- this is only
   the shared look those pages toggle standard attributes on
   (disabled, aria-busy, hidden). */
.cl2-load-more {
  display: block;
  margin: var(--cl2-space-lg) auto 0;
  padding: var(--cl2-space-sm) var(--cl2-space-xl);
  font-family: var(--cl2-font-sans);
  font-size: var(--cl2-fs-sm);
  font-weight: 600;
  color: var(--cl2-text);
  background: var(--cl2-surface);
  border: 1px solid var(--cl2-border);
  border-radius: var(--cl2-radius-sm);
  cursor: pointer;
  transition: background var(--cl2-t-fast) var(--cl2-ease);
}

.cl2-load-more:hover {
  background: var(--cl2-border);
}

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

.cl2-load-more:disabled {
  cursor: default;
  opacity: .7;
}

/* The [hidden] attribute selector has the same specificity as the class
   selector above, and an equal-specificity author rule beats the browser's
   own [hidden]{display:none} UA rule -- without this override, hiding the
   button when no more items remain would leave it visibly on screen. */
.cl2-load-more[hidden] {
  display: none;
}


/* ══════════════════════════════════════════════════════════════════════════
   Ownership / personal-import sidebar component (.cl2-ownership-*). Moved
   here VERBATIM from assets/ui-v2/maker.css so BOTH the maker detail page
   and the model detail page use one source of truth for the coverage/info
   badges + year-scope readout + toggletips. The heading row itself now
   reuses the generic .panel-head/.panel-title (carlab-analytics-shell.css,
   already loaded by both pages) on both pages too -- the maker-only
   .cl2-maker-own-headrow/-heading classes this block used to also define
   are retired now that neither page references them. */

/* ── Sidebar: ownership + personal-import — coverage/info badges + scope ──
   Two small circular buttons that reveal a toggletip on hover/focus/tap --
   closes on Escape/outside click when opened via tap -- plus the year-scope
   readout, trailing the shared .panel-head's title on the opposite (RTL:
   left) side. */

.cl2-ownership-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

/* Current year-scope readout, right after the coverage badge -- compact,
   visually secondary (muted, smaller than the heading). The accessible
   name comes entirely from the span's own aria-label (role="img" collapses
   its content to that one string); the visible text is a plain compact
   echo of the year-picker trigger's own label. */
.cl2-ownership-scope {
  font-family: var(--cl2-font-mono);
  font-size: var(--cl2-fs-2xs);
  font-weight: 600;
  color: var(--cl2-text-dim);
  white-space: nowrap;
}

.cl2-ownership-scope-num {
  /* unicode-bidi is required here -- direction alone has no effect on an
     inline element unless paired with embed/isolate (CSS spec), which is
     why a plain "direction:ltr" silently no-ops inside RTL flow. isolate
     also correctly keeps this snippet's digits/dash from being reordered
     by the surrounding Hebrew context. */
  direction: ltr;
  unicode-bidi: isolate;
}

.cl2-ownership-badge-wrap {
  position: relative;
  display: inline-flex;
}

.cl2-ownership-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--cl2-border);
  background: var(--cl2-white);
  color: var(--cl2-text-muted);
  font-family: var(--cl2-font-mono);
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  transition: border-color var(--cl2-t-fast) var(--cl2-ease), color var(--cl2-t-fast) var(--cl2-ease);
}

.cl2-ownership-badge--info {
  font-family: var(--cl2-font-sans);
  font-size: 11px;
  font-style: italic;
  font-weight: 800;
}

.cl2-ownership-badge:hover,
.cl2-ownership-badge:focus-visible {
  border-color: var(--cl2-accent);
  color: var(--cl2-accent);
}

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

.cl2-ownership-tip {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: -6px;
  z-index: 60;
  width: max-content;
  max-width: 230px;
  padding: 8px 10px;
  border-radius: var(--cl2-radius-sm);
  background: #1a1d27;
  color: #e6eaf2;
  font-family: var(--cl2-font-sans);
  font-size: var(--cl2-fs-xs);
  font-weight: 500;
  line-height: 1.5;
  text-align: right;
  box-shadow: 0 4px 14px rgba(2, 6, 23, .22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(2px);
  transition: opacity .12s ease, transform .12s ease, visibility .12s;
  pointer-events: none;
}

.cl2-ownership-badge:hover + .cl2-ownership-tip,
.cl2-ownership-badge:focus-visible + .cl2-ownership-tip,
.cl2-ownership-tip.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (max-width: 560px) {
  /* The stacked mobile sidebar is only ~280px wide and both badges sit near
     its physical-left edge (RTL: opposite side from the heading) -- anchoring
     the tip to inset-inline-start there (logical "start" = physical right in
     RTL) would grow it further left, off the edge, contributing invisible-
     but-real horizontal overflow (position:absolute boxes still count toward
     scrollWidth even at opacity:0). Anchor to the physical left edge instead
     so the box grows rightward/inward, and shrink max-width to comfortably
     fit within that ~280px column regardless of which badge triggered it. */
  .cl2-ownership-tip {
    inset-inline-end: auto;
    left: -6px;
    max-width: 200px;
  }
}

/* ── Sidebar: ownership/import cards — ui-v2 component ───────────────────
   Page-scoped rebuild of the shared .own-card component (assets/carlab-
   model-detail.css, still used verbatim/UNMODIFIED by model.php's own
   ownership cards -- this file is untouched) with NO inline visual styles:
   each category's colors are defined once, in one .cl2-ownership-card--KEY
   modifier block, not duplicated per element via an inline style attribute.
   The single genuinely dynamic value (the proportional fill width, which
   changes with the selected-year scope) is the one permitted inline custom
   property, --cl2-ownership-progress. Every other declaration below is
   copied verbatim from .own-card/.own-fill/.own-pct/.own-meta/.own-name/
   .own-n so the rendered result stays pixel-identical to the prior
   inline-style version. */

.cl2-ownership-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 11px 14px 2px;
}

.cl2-ownership-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 46px;
  padding: 5px 6px 3px 10px;
  border: 1px solid var(--cl2-ownership-brd, var(--cl2-border));
  border-radius: var(--cl2-radius-md);
  background: var(--cl2-ownership-tint, var(--cl2-white));
}

.cl2-ownership-fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--cl2-ownership-fillc, transparent);
  clip-path: inset(0 calc(100% - var(--cl2-ownership-progress, 0%)) 0 0);
  transition: clip-path .45s ease;
}

.cl2-ownership-pct {
  position: relative;
  z-index: 2;
  font-family: var(--cl2-font-sans);
  font-size: 18px;
  font-weight: 800;
  color: var(--cl2-ownership-ct, var(--cl2-text));
  letter-spacing: -.4px;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(255, 255, 255, .6);
}

.cl2-ownership-meta {
  position: relative;
  z-index: 2;
  margin-top: 4px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.cl2-ownership-name {
  font-size: 12px;
  font-family: var(--cl2-font-mono);
  font-weight: 600;
  color: var(--cl2-ownership-ct, var(--cl2-text-dim));
  text-shadow: 0 1px 2px rgba(255, 255, 255, .9);
}

.cl2-ownership-n {
  font-family: var(--cl2-font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--cl2-ownership-ct, var(--cl2-text-muted));
  direction: ltr;
  text-shadow: 0 1px 2px rgba(255, 255, 255, .9);
}

.cl2-ownership-card::after {
  content: attr(data-tooltip);
  position: absolute;
  inset-inline-end: 8px;
  bottom: calc(100% + 8px);
  min-width: 140px;
  max-width: min(260px, 70vw);
  padding: 7px 10px;
  border-radius: var(--cl2-radius-md);
  background: rgba(17, 24, 39, .94);
  color: #fff;
  font-size: var(--cl2-fs-xs);
  line-height: 1.45;
  font-family: var(--cl2-font-sans);
  text-align: right;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .08s ease, transform .08s ease;
  z-index: 20;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}

.cl2-ownership-card:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* One color definition per category — the only place any hex/rgb value for
   these six categories appears. --cl2-ownership-ct is the same darker
   (channels * 0.55) shade of the category color used for readable text;
   --tint/--fillc/--brd are the same .10/.18/.32-alpha washes as before. */
.cl2-ownership-card--private {
  --cl2-ownership-ct: rgb(32, 72, 135);
  --cl2-ownership-tint: rgba(59, 130, 246, .10);
  --cl2-ownership-fillc: rgba(59, 130, 246, .18);
  --cl2-ownership-brd: rgba(59, 130, 246, .32);
}

.cl2-ownership-card--leasing {
  --cl2-ownership-ct: rgb(76, 51, 135);
  --cl2-ownership-tint: rgba(139, 92, 246, .10);
  --cl2-ownership-fillc: rgba(139, 92, 246, .18);
  --cl2-ownership-brd: rgba(139, 92, 246, .32);
}

.cl2-ownership-card--company {
  --cl2-ownership-ct: rgb(9, 102, 71);
  --cl2-ownership-tint: rgba(16, 185, 129, .10);
  --cl2-ownership-fillc: rgba(16, 185, 129, .18);
  --cl2-ownership-brd: rgba(16, 185, 129, .32);
}

.cl2-ownership-card--dealer {
  --cl2-ownership-ct: rgb(135, 87, 6);
  --cl2-ownership-tint: rgba(245, 158, 11, .10);
  --cl2-ownership-fillc: rgba(245, 158, 11, .18);
  --cl2-ownership-brd: rgba(245, 158, 11, .32);
}

.cl2-ownership-card--rental {
  --cl2-ownership-ct: rgb(137, 63, 12);
  --cl2-ownership-tint: rgba(249, 115, 22, .10);
  --cl2-ownership-fillc: rgba(249, 115, 22, .18);
  --cl2-ownership-brd: rgba(249, 115, 22, .32);
}

.cl2-ownership-card--personal-import {
  --cl2-ownership-ct: rgb(7, 81, 75);
  --cl2-ownership-tint: rgba(13, 148, 136, .10);
  --cl2-ownership-fillc: rgba(13, 148, 136, .18);
  --cl2-ownership-brd: rgba(13, 148, 136, .32);
}

@media (max-width: 560px) {
  .cl2-ownership-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Yearly deliveries chart — shared framing. The chart itself is drawn by the
   shared assets/carlab-charts.js; .panel/.ml-chart/.chart-frame/.chart-canvas/
   .legend all live in carlab-analytics-shell.css. These three rules used to
   live in maker.css; moved here so the maker detail page and the model detail
   page frame the chart identically (heading font, click-to-select hint, and
   the visually-hidden live region). Maker renders byte-identical.
   ══════════════════════════════════════════════════════════════════════════ */

/* The shared .ml-chart .panel-title rule (carlab-analytics-shell.css) forces a
   distinct display font ("Secular One Local") on this ONE heading. Override it
   back to plain --sans on BOTH detail-page layouts so the chart heading matches
   the other section headings. --sans directly (not --display-font) so it can
   never fall back to Almoni Tzar, which stays reserved for the detail H1. */
.cl2-maker-layout .ml-chart .panel-title,
.cl2-md-layout .ml-chart .panel-title {
  font-family: var(--cl2-font-sans) !important;
}

/* Small visible caption pointing keyboard users at the real keyboard-accessible
   year control (the years list). */
.cl2-chart-hint {
  margin: var(--cl2-space-xs) var(--cl2-space-sm) 0;
  font-size: var(--cl2-fs-2xs);
  color: var(--cl2-text-dim);
}

/* 2008 data-methodology note: a small subtle icon (not a permanent paragraph) that
   opens a closeable popover on click/tap. A sibling right after the chart frame
   (see carlab-charts.js), positioned via JS-computed left/top so it sits centered
   directly under the 2008 bar/tick on the chart's own x-axis, using Chart.js's own
   scale -- repositioned on chart resize too. Hidden by default; even while open its
   own popover child is a further absolutely-positioned overlay, so none of this
   contributes to the chart frame's layout height. */
.cl2-chart-2008-wrap {
  position: absolute;
  transform: translateX(-50%);
}
.cl2-chart-2008-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--cl2-border-dark);
  border-radius: 50%;
  background: var(--cl2-surface-2);
  color: var(--cl2-text-muted);
  font-size: var(--cl2-fs-2xs);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.cl2-chart-2008-icon:hover,
.cl2-chart-2008-icon[aria-expanded="true"] {
  background: var(--cl2-border);
  color: var(--cl2-text-muted);
}
.cl2-chart-2008-popover {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  right: 0;
  width: max-content;
  max-width: min(320px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: var(--cl2-space-xl) var(--cl2-space-md) var(--cl2-space-md);
  background: #fff;
  border: 1px solid var(--cl2-border);
  border-radius: var(--cl2-radius-md);
  box-shadow: var(--cl2-shadow-lg);
  text-align: right;
}
.cl2-chart-2008-popover p {
  margin: 0;
  font-size: var(--cl2-fs-xs);
  line-height: 1.5;
  color: var(--cl2-text-muted);
}
.cl2-chart-2008-popover-close {
  position: absolute;
  top: var(--cl2-space-xs);
  left: var(--cl2-space-xs);
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--cl2-text-dim);
  font-size: var(--cl2-fs-lg);
  line-height: 1;
  cursor: pointer;
  border-radius: var(--cl2-radius-sm);
}
.cl2-chart-2008-popover-close:hover {
  background: var(--cl2-surface-2);
  color: var(--cl2-text-muted);
}

/* Standard visually-hidden utility (live regions announcing scope changes). */
.cl2-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}