/* ──────────────────────────────────────────────────────────────────────
 * carlab-model-detail.css — shared detail-page components used by BOTH
 * model.php and maker.php. Extracted from model.php's inline <style>.
 * model.php is the canonical source for these rules.
 *
 * CASCADE: link this AFTER carlab-analytics-shell.css and BEFORE the page's
 * inline <style> so page-specific rules can still override. Selectors here
 * use page-unique prefixes (.vs- .ql- .quick-links .reg- .cl2-md-) so they
 * never collide with shell/base rules.
 *
 * .cl2-md-metrics-* (the #metrics survival/status tiles) is the one .cl2-md-
 * prefixed exception living here instead of assets/ui-v2/model.css — moved so
 * maker.php can render the identical tile design instead of its own older
 * .ri-/.vs-card component (now retired; only .vs-pct-dec survives, reused by
 * both pages' unrelated ownership-card percentage spans).
 *
 * NOT shared (kept page-specific inline): the .merged-variant / .mv- sub-model
 * cards, which genuinely diverge — maker renders them as 3-col clickable links
 * with powertrain colours; model renders a 4-col panel. Also page-specific:
 * .table-panel, .metrics (dead — see .cl2-md-metrics- above), .section-divider.
 * model.php's detail SHELL (.cl2-md-layout grid + .cl2-md-main/-side columns)
 * and identity block (.cl2-md-hero-*, .cl2-md-bc-*) still live in
 * assets/ui-v2/model.css.
 * ────────────────────────────────────────────────────────────────────── */
.bc-row{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;border-bottom:1px solid var(--border)}
/* model.php's breadcrumb items migrated to .cl2-md-bc-* (assets/ui-v2/model.css).
   maker.php uses .cl2-maker-bc-*; both share only the .bc-row wrapper above. */
.quick-links{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end;padding:6px 0}
.quick-links[hidden]{display:none}
.ql-action{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;border:1px solid var(--border);border-radius:999px;background:#fff;color:var(--text-muted);cursor:pointer;transition:color .12s,border-color .12s,background .12s}
.ql-action svg{width:14px;height:14px;display:block}
.ql-action:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-dim)}
.ql-action:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ql-action[hidden]{display:none}
.ql-action:disabled{cursor:not-allowed;opacity:.4}
.ql-action:disabled:hover{color:var(--text-muted);border-color:var(--border);background:#fff}
.ql-action-rtl-back{transform:scaleX(-1)}
@media(max-width:720px){
  .bc-row{flex-wrap:wrap}
  .quick-links{width:100%;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:8px}
  .quick-links::-webkit-scrollbar{display:none}
  /* Both pages' markup uses the SAME ids on the breadcrumb nav (#breadcrumb) and quick-
     actions nav (#quickLinks) — originally a model.php-only override (moved here once
     maker.php's breadcrumb got the matching id too), so this now keeps breadcrumb +
     action icons in ONE row on both pages instead of the plain rules above wrapping
     quick-links onto its own full-width strip: .bc-row back to nowrap; #breadcrumb
     becomes the flexible/scrollable member (truncates/scrolls internally if too long);
     #quickLinks is pinned to its intrinsic width and no longer scrolls. */
  .bc-row{flex-wrap:nowrap}
  #breadcrumb{flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  #breadcrumb::-webkit-scrollbar{display:none}
  #quickLinks{flex:0 0 auto;width:auto;overflow-x:visible;padding-bottom:0}
}
/* .vs-pct-dec is the one surviving piece of the old .ri-/.vs- survival-tile
   design (replaced below by .cl2-md-metrics-*, shared by both pages) — it's
   still used as the "smaller trailing decimal" span inside each page's own
   ownership-card percentage (model.php/maker.php's local vsPctHtml()
   helpers), unrelated to the tiles themselves. */
.vs-pct-dec{font-size:.6em;letter-spacing:0}

/* ══════════════════════════════════════════════════════════════════════════
   Survival/status tiles (#metrics) — shared by model.php AND maker.php.
   Compact, flat, editorial: a headline total + year range, a thin status bar,
   and a 3-up active/inactive/final figure grid — percentage on top, label +
   count sharing one row underneath. Was model.php-only (assets/ui-v2/
   model.css) with maker.php rendering the older .ri-/.vs-card design via the
   now-removed CarLabRegistry.renderStatus(); both pages now render the
   IDENTICAL markup (their own local renderMetrics()-equivalent JS) so this
   one shared block is the only place the visual design lives. */
.cl2-md-metrics {
  display: block;
}

.cl2-md-metrics-total {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  padding: 0 14px;
}

.cl2-md-metrics-num {
  font-family: var(--sans);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.5px;
  line-height: 1;
  color: var(--text);
  direction: ltr;
  unicode-bidi: isolate;
}

.cl2-md-metrics-cap {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.cl2-md-metrics-bar {
  height: 8px;
  display: flex;
  margin: 11px 14px 0;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface);
}

.cl2-md-metrics-seg {
  min-width: 3px;
  transition: width .35s ease;
}

.cl2-md-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 14px 14px 0;
}

.cl2-md-metrics-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  padding: 2px 12px 6px;
  border-inline-start: 1px solid var(--border);
  border-top: 3px solid transparent;
}

.cl2-md-metrics-item:first-child {
  border-inline-start: none;
}

.cl2-md-metrics-item.is-active   { border-top-color: var(--status-active); }
.cl2-md-metrics-item.is-inactive { border-top-color: var(--status-inactive); }
.cl2-md-metrics-item.is-final    { border-top-color: var(--status-final); }

/* Data-stream pixel background (assets/carlab-header-stream.js, reused via the
   shared .cl2-pixel-stream opt-in) — spans the full card height behind both
   columns, tinted per status via data-pixel-color and scaled by data-percent. */
.cl2-md-metrics-pixel {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.cl2-md-metrics-pixel > canvas.header-matrix {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.cl2-md-metrics-pct {
  position: relative;
  z-index: 1;
  display: block;
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.5px;
  line-height: 1;
  unicode-bidi: isolate;
}

.cl2-md-metrics-pct-dec {
  font-size: .6em;
  letter-spacing: 0;
}

.cl2-md-metrics-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 8px;
  row-gap: 0;
  width: 100%;
  min-width: 0;
}

.cl2-md-metrics-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cl2-md-metrics-count {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  direction: ltr;
  unicode-bidi: isolate;
  flex: 0 0 auto;
  white-space: nowrap;
}

.cl2-md-metrics-item.is-active   .cl2-md-metrics-pct,
.cl2-md-metrics-item.is-active   .cl2-md-metrics-label,
.cl2-md-metrics-item.is-active   .cl2-md-metrics-count { color: #15803d; }
.cl2-md-metrics-item.is-inactive .cl2-md-metrics-pct,
.cl2-md-metrics-item.is-inactive .cl2-md-metrics-label,
.cl2-md-metrics-item.is-inactive .cl2-md-metrics-count { color: #b45309; }
.cl2-md-metrics-item.is-final    .cl2-md-metrics-pct,
.cl2-md-metrics-item.is-final    .cl2-md-metrics-label,
.cl2-md-metrics-item.is-final    .cl2-md-metrics-count { color: #b91c1c; }

@media (max-width: 480px) {
  .cl2-md-metrics-pct {
    font-size: 20px;
  }
  .cl2-md-metrics-item {
    padding-inline: 8px;
  }
}

/* .reg-own is the wrapper both pages' OWN ownership blocks use (maker.php's
   renderMakerOwnership(), model.php's own inline renderer — both render
   .cl2-ownership-card markup, not .own-card). The .own-grid/.own-card pixel-
   fill component that used to live below this (built by the now-removed
   CarLabRegistry.renderOwnership(), assets/carlab-registry-sidebar.js) had
   zero callers anywhere in the repo and was removed together with it. */
.reg-own{margin-top:16px;padding-top:15px;border-top:1px solid var(--border)}
.reg-own[hidden]{display:none}