/* ══ /plate — desktop ═════════════════════════════════════════════════════════
   Loaded ONLY by plate.php's desktop branch. Reads exclusively from the --cl2-* tokens, and
   borrows two shapes the site already has:

     the CARD is .cl2-hero-card's treatment (white, 1px --cl2-border, --cl2-radius-lg,
     --cl2-shadow-sm, --cl2-space-xl padding) — so a group card belongs to the same card system as
     the homepage's hero cards;

     the FIELD ROW is the technical-spec viewer's (.cl2-tiv-sec-h / -row / -dt / -dd in model.css):
     a tracked uppercase caption over baseline-aligned label/value rows. Redeclared here rather
     than reused because those rules live inside model.css — 82 KB of Model-page stylesheet this
     page has no other reason to load.

   The KPI strip borrows the homepage metrics strip's TREATMENT (one card, value over label,
   middot separators) but declares its own rules: .cl2-metrics lives in index.css, and loading the
   homepage's 43 KB stylesheet to get four numbers is not reuse.

   plate.php loads assets/carlab-analytics-shell.css before this file — that is what supplies
   body{background/color}, the base type and .main-content. render_site_header() does not. */

.cl2-plate { padding-bottom: var(--cl2-space-4xl); }

/* ── intro ─────────────────────────────────────────────────────────────────── */
.cl2-plate-intro { margin-bottom: var(--cl2-space-2xl); }
.cl2-plate-title {
  margin: 0 0 var(--cl2-space-sm);
  font-family: var(--cl2-font-sans);
  font-size: var(--cl2-fs-xl);
  font-weight: 800;
  line-height: 1.2;
  color: var(--cl2-text);
}
.cl2-plate-lede {
  margin: 0;
  max-width: 62ch;
  font-size: var(--cl2-fs-lg);
  line-height: 1.65;
  color: var(--cl2-text-muted);
}

/* ── search card ───────────────────────────────────────────────────────────── */
.cl2-plate-search {
  background: var(--cl2-white);
  border: 1px solid var(--cl2-border);
  border-radius: var(--cl2-radius-lg);
  box-shadow: var(--cl2-shadow-sm);
  padding: var(--cl2-space-xl);
  margin-bottom: var(--cl2-space-2xl);
}
.cl2-plate-lbl {
  display: block;
  margin-bottom: var(--cl2-space-sm);
  font-size: var(--cl2-fs-sm);
  font-weight: 700;
  color: var(--cl2-text-muted);
}
/* The field does not stretch to the full width of a 1440px page — a plate is eight characters, and
   a text box the width of the viewport tells the reader to expect a sentence. */
.cl2-plate-inputrow { display: flex; align-items: center; gap: var(--cl2-space-md); max-width: 520px; }
.cl2-plate-field {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: var(--cl2-space-sm);
  height: 46px;
  padding-inline: var(--cl2-space-md);
  border-radius: var(--cl2-radius-md);
  background: var(--cl2-surface);
  /* inset ring, not a border: the box keeps its size between states (idle / focus / error). */
  box-shadow: inset 0 0 0 1px var(--cl2-border-dark);
}
.cl2-plate-field:focus-within { box-shadow: inset 0 0 0 1.5px var(--cl2-accent); background: var(--cl2-white); }
.cl2-plate-field.is-bad { box-shadow: inset 0 0 0 1.5px var(--cl2-status-final); }
.cl2-plate-badge { flex: none; width: 18px; height: 18px; color: var(--cl2-text-dim); }
.cl2-plate-badge svg { width: 100%; height: 100%; }
/* LTR and tracked: a registration number is a number, and letting it take the paragraph's RTL
   direction reorders the three groups. */
.cl2-plate-input {
  flex: 1; min-width: 0;
  border: 0; background: none; outline: none;
  direction: ltr; text-align: center;
  font-family: var(--cl2-font-sans);
  font-size: 18px; font-weight: 700; letter-spacing: .06em;
  color: var(--cl2-text);
}
.cl2-plate-input::placeholder { color: var(--cl2-text-dim); font-weight: 500; }
.cl2-plate-go {
  flex: none;
  height: 46px;
  padding-inline: var(--cl2-space-xl);
  border: 0; border-radius: var(--cl2-radius-md);
  background: var(--cl2-accent);
  color: #fff;
  font-family: var(--cl2-font-sans);
  font-size: var(--cl2-fs-md); font-weight: 700;
  cursor: pointer;
}
.cl2-plate-go:hover { filter: brightness(1.06); }
.cl2-plate-go:focus-visible { outline: 2px solid var(--cl2-accent); outline-offset: 2px; }
.cl2-plate-hint {
  margin: var(--cl2-space-sm) 0 0;
  font-size: var(--cl2-fs-sm);
  color: var(--cl2-text-dim);
}
.cl2-plate-hint.is-bad { color: var(--cl2-status-final); font-weight: 600; }

/* ── result head ───────────────────────────────────────────────────────────── */
.cl2-plate-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--cl2-space-md);
  margin-bottom: var(--cl2-space-lg);
}
.cl2-plate-idblock { flex: 1 1 320px; min-width: 0; }
.cl2-plate-status {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: var(--cl2-space-xs);
  font-size: var(--cl2-fs-sm); font-weight: 700;
  color: var(--cl2-text-muted);
}
.cl2-plate-dot { width: 7px; height: 7px; border-radius: 99px; background: currentColor; }
.cl2-plate-status--ok   { color: var(--cl2-status-active); }
.cl2-plate-status--warn { color: #b7791f; }
.cl2-plate-status--bad  { color: var(--cl2-status-final); }
.cl2-plate-vehicle {
  margin: 0;
  font-size: var(--cl2-fs-2xl); font-weight: 800; line-height: 1.25;
  color: var(--cl2-text);
}
.cl2-plate-vsub {
  margin: var(--cl2-space-2xs) 0 0;
  font-size: var(--cl2-fs-md);
  color: var(--cl2-text-muted);
}
.cl2-plate-flag {
  margin: 0;
  padding: 6px 12px;
  border-radius: var(--cl2-radius-sm);
  background: var(--cl2-surface-2);
  font-size: var(--cl2-fs-sm); font-weight: 700;
  color: var(--cl2-text-muted);
  white-space: nowrap;
}
.cl2-plate-flag--warn { background: #fdf5e2; color: #b7791f; }

/* ── the headline numbers ──────────────────────────────────────────────────── */
/* The homepage metrics strip's treatment: one card, values over labels, middot separators. Each
   cell also carries a NOTE the homepage's does not — a kilometre reading means nothing without the
   date it was taken on, and a licence date means nothing without "still valid". */
.cl2-plate-kpis {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: var(--cl2-space-lg);
  margin-bottom: var(--cl2-space-2xl);
  padding: var(--cl2-space-xl);
  background: var(--cl2-white);
  border: 1px solid var(--cl2-border);
  border-radius: var(--cl2-radius-lg);
  box-shadow: var(--cl2-shadow-sm);
}
.cl2-plate-kpi {
  flex: 1 1 150px; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; text-align: center;
}
.cl2-plate-kpi-v {
  margin: 0;
  font-size: var(--cl2-fs-xl); font-weight: 800; line-height: 1.1;
  color: var(--cl2-text);
  white-space: nowrap;
  unicode-bidi: isolate;
}
.cl2-plate-kpi-k { font-size: var(--cl2-fs-sm); font-weight: 600; color: var(--cl2-text-muted); }
.cl2-plate-kpi-n { font-size: var(--cl2-fs-2xs); font-weight: 500; color: var(--cl2-text-dim); unicode-bidi: isolate; }
.cl2-plate-kpi-sep { flex: none; align-self: center; color: var(--cl2-border-dark); }
@media (max-width: 768px) {
  .cl2-plate-kpi-sep { display: none; }
  .cl2-plate-kpi { flex-basis: 45%; }
}

/* ── the group grid ────────────────────────────────────────────────────────── */
/* Two columns, each card its own height. align-items:start is what lets a 5-row card sit beside a
   12-row one without stretching to match it — the alternative is a JS masonry pass for no gain. */
.cl2-plate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--cl2-space-lg);
}
.cl2-plate-card {
  min-width: 0;
  background: var(--cl2-white);
  border: 1px solid var(--cl2-border);
  border-radius: var(--cl2-radius-lg);
  box-shadow: var(--cl2-shadow-sm);
  padding: var(--cl2-space-xl);
}
/* The rail and the recalls read along their own axis and get the whole width. */
.cl2-plate-card--wide { margin-top: var(--cl2-space-lg); }
.cl2-plate-card--warn { border-color: #f0d9a8; }

.cl2-plate-card-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--cl2-space-md);
  margin: 0 0 var(--cl2-space-sm);
  padding-bottom: var(--cl2-space-sm);
  border-bottom: 1px solid var(--cl2-border);
  font-family: var(--cl2-font-sans);
  font-size: var(--cl2-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--cl2-text-muted);
}
.cl2-plate-card-n { flex: none; font-size: var(--cl2-fs-2xs); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--cl2-text-dim); }
.cl2-plate-card-n--warn { color: #b7791f; }

.cl2-plate-dl { margin: 0; }
/* space-between, NOT the mobile screen's fixed label column. Every other label/value list on this
   site puts the value at the far end of the row, and at desktop width there is room for it; at
   375px the same rule strands the value mid-line, which is why mobile pins a column instead. Same
   data, two correct answers. */
.cl2-plate-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--cl2-space-lg);
  padding: 8px 0;
  border-bottom: 1px solid var(--cl2-surface-2);
}
.cl2-plate-row:last-child { border-bottom: 0; }
.cl2-plate-k { margin: 0; font-size: var(--cl2-fs-md); color: var(--cl2-text-muted); }
.cl2-plate-v {
  margin: 0;
  font-size: var(--cl2-fs-md); font-weight: 600;
  color: var(--cl2-text);
  text-align: end;
  /* isolate so a Latin trim code or a date inside an RTL row cannot reorder the row around it */
  unicode-bidi: isolate;
}
.cl2-plate-v.is-muted { color: var(--cl2-text-dim); font-weight: 500; }

/* ── ownership ─────────────────────────────────────────────────────────────── */
.cl2-plate-owners {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--cl2-space-md);
  margin: 0; padding: 0; list-style: none;
}
.cl2-plate-owner {
  display: flex; flex-direction: column; gap: 3px;
  padding: var(--cl2-space-md);
  border: 1px solid var(--cl2-border);
  border-radius: var(--cl2-radius-md);
  background: var(--cl2-surface);
}
.cl2-plate-owner.is-now { border-color: var(--cl2-accent); background: var(--cl2-accent-dim); }
.cl2-plate-owner-k { font-size: var(--cl2-fs-xs); font-weight: 700; color: var(--cl2-text-dim); }
.cl2-plate-owner.is-now .cl2-plate-owner-k { color: var(--cl2-accent); }
.cl2-plate-owner-t { font-size: var(--cl2-fs-lg); font-weight: 700; color: var(--cl2-text); }
.cl2-plate-owner-d { font-size: var(--cl2-fs-sm); color: var(--cl2-text-muted); unicode-bidi: isolate; }

/* ── recalls ───────────────────────────────────────────────────────────────── */
.cl2-plate-alert {
  margin: 0 0 var(--cl2-space-md);
  padding: var(--cl2-space-md);
  border-radius: var(--cl2-radius-md);
  background: #fdf5e2;
  font-size: var(--cl2-fs-md); font-weight: 600;
  color: #b7791f;
}
.cl2-plate-recalls {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--cl2-space-md);
  margin: 0; padding: 0; list-style: none;
}
.cl2-plate-recall {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--cl2-space-md);
  border: 1px solid var(--cl2-border);
  border-radius: var(--cl2-radius-md);
}
.cl2-plate-recall-h { display: flex; align-items: baseline; gap: var(--cl2-space-sm); font-size: var(--cl2-fs-lg); font-weight: 700; color: var(--cl2-text); }
.cl2-plate-recall-id { font-size: var(--cl2-fs-xs); font-weight: 500; color: var(--cl2-text-dim); unicode-bidi: isolate; }
.cl2-plate-recall-b { font-size: var(--cl2-fs-md); line-height: 1.6; color: var(--cl2-text-muted); }
.cl2-plate-recall-m { font-size: var(--cl2-fs-sm); color: var(--cl2-text-dim); }

/* ── states ────────────────────────────────────────────────────────────────── */
.cl2-plate-state {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--cl2-space-sm);
  padding: var(--cl2-space-4xl) var(--cl2-space-xl);
  border: 1px dashed var(--cl2-border-dark);
  border-radius: var(--cl2-radius-lg);
  text-align: center;
}
.cl2-plate-state-i { width: 44px; height: 44px; color: var(--cl2-text-dim); }
.cl2-plate-state h2 { margin: 0; font-size: var(--cl2-fs-2xl); font-weight: 700; color: var(--cl2-text); }
.cl2-plate-state p  { margin: 0; max-width: 52ch; font-size: var(--cl2-fs-md); line-height: 1.65; color: var(--cl2-text-muted); }
.cl2-plate-state--idle { border-style: dashed; background: var(--cl2-surface); }

/* ── loading ───────────────────────────────────────────────────────────────── */
.cl2-plate-skel[hidden] { display: none; }
.cl2-plate-skel-strip { height: 92px; border-radius: var(--cl2-radius-lg); background: var(--cl2-surface-2); margin-bottom: var(--cl2-space-2xl); }
.cl2-plate-skel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cl2-space-lg); }
.cl2-plate-skel-card { height: 210px; border-radius: var(--cl2-radius-lg); background: var(--cl2-surface-2); }
.cl2-plate-loading { margin: var(--cl2-space-lg) 0 0; text-align: center; font-size: var(--cl2-fs-md); color: var(--cl2-text-muted); }
@media (prefers-reduced-motion: no-preference) {
  .cl2-plate-skel-strip, .cl2-plate-skel-card { animation: cl2PlatePulse 1.4s ease-in-out infinite; }
  @keyframes cl2PlatePulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
}

/* ── closing matter ────────────────────────────────────────────────────────── */
.cl2-plate-warn {
  margin: var(--cl2-space-xl) 0 0;
  font-size: var(--cl2-fs-sm); line-height: 1.6;
  color: #b7791f;
}
.cl2-plate-legal {
  margin: var(--cl2-space-xl) 0 0;
  max-width: 78ch;
  font-size: var(--cl2-fs-sm); line-height: 1.7;
  color: var(--cl2-text-dim);
}

/* ── responsive: the site's own breakpoints ────────────────────────────────── */
@media (max-width: 1024px) {
  /* One column before the cards get too narrow to hold a label and a value on one line. */
  .cl2-plate-grid, .cl2-plate-skel-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .cl2-plate-title { font-size: var(--cl2-fs-2xl); }
  .cl2-plate-inputrow { max-width: none; }
  .cl2-plate-head { align-items: flex-start; }
}
@media (max-width: 480px) {
  .cl2-plate-inputrow { flex-direction: column; align-items: stretch; }
  .cl2-plate-go { width: 100%; }
  .cl2-plate-row { gap: var(--cl2-space-md); }
}

/* ── the button while the lookup runs ──────────────────────────────────────── */
/* The press starts a navigation that takes four to six seconds, and until it lands this page is
   what the reader is looking at. A button that still reads "בדיקת רכב" in its resting state for
   that long reads as a click that did nothing.
   pointer-events is what actually blocks a second press — the button is deliberately NOT disabled,
   because disabling a submit button from inside its own submit handler cancels the submission in
   some browsers. */
.cl2-plate-go.is-busy {
  pointer-events: none;
  background: var(--cl2-accent-mid);
  color: var(--cl2-accent);
}
.cl2-plate-go.is-busy::after {
  content: "";
  display: inline-block;
  width: 13px; height: 13px;
  margin-inline-start: 8px;
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: cl2PlateSpin .7s linear infinite;
}
@keyframes cl2PlateSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cl2-plate-go.is-busy::after { animation: none; opacity: .6; }
}