/* compare.css — השוואת רכבים, desktop class.
 *
 * The desktop surface has the width for the matrix the phone deliberately refuses: one
 * sticky label column on the RIGHT (this is an RTL document, so `right` is the reading
 * edge) and one column per vehicle. It reuses the existing .panel card from
 * carlab-analytics-shell.css and only adds the table and the slot strip.
 *
 * Colours are --cl2-* tokens throughout. The desktop design system is light-only —
 * there is no prefers-color-scheme or data-theme anywhere in assets/ui-v2 — so this file
 * does not invent a dark theme that no other desktop page has.
 */

.cl2-cmp-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--cl2-space-xl) var(--cl2-space-lg) var(--cl2-space-4xl);
}

.cl2-cmp-h1 {
  font-size: var(--cl2-fs-xl);
  font-weight: 700;
  color: var(--cl2-text);
  margin: 0 0 var(--cl2-space-lg);
}

.cl2-cmp-wrap .panel { margin-bottom: var(--cl2-space-lg); }
.cl2-cmp-wrap .panel-head { padding: var(--cl2-space-md) var(--cl2-space-lg); }
.cl2-cmp-wrap .panel-body { padding: var(--cl2-space-lg); }

.cl2-cmp-lead {
  font-size: var(--cl2-fs-lg);
  color: var(--cl2-text-muted);
  line-height: 1.6;
  margin: 0 0 var(--cl2-space-md);
}

/* ── The vehicle strip ──────────────────────────────────────────────────────────────── */

.cl2-cmp-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--cl2-space-lg);
  margin-bottom: var(--cl2-space-lg);
}

.cl2-cmp-slots .panel { margin-bottom: 0; }

.cl2-cmp-slot .panel-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cl2-space-xs);
  text-align: center;
}

.cl2-cmp-img {
  width: 100%;
  max-width: 190px;
  height: auto;
  aspect-ratio: 2.4;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.cl2-cmp-name {
  font-size: var(--cl2-fs-2xl);
  font-weight: 700;
  color: var(--cl2-text);
  text-decoration: none;
  line-height: 1.25;
}

.cl2-cmp-name:hover { color: var(--cl2-accent); }

.cl2-cmp-scope { font-size: var(--cl2-fs-sm); color: var(--cl2-text-muted); }

.cl2-cmp-remove {
  margin-top: var(--cl2-space-xs);
  font-size: var(--cl2-fs-sm);
  color: var(--cl2-text-dim);
  text-decoration: none;
}

.cl2-cmp-remove:hover { color: var(--cl2-status-final); }

.cl2-cmp-slot--add { border-style: dashed; }

/* ── Cohort warning ─────────────────────────────────────────────────────────────────── */

.cl2-cmp-cohort {
  padding: var(--cl2-space-md) var(--cl2-space-lg);
  margin-bottom: var(--cl2-space-lg);
  background: var(--cl2-surface);
  border: 1px solid var(--cl2-border);
  border-inline-start: 3px solid var(--cl2-status-inactive);
  border-radius: var(--cl2-radius-lg);
  font-size: var(--cl2-fs-md);
  color: var(--cl2-text-muted);
  line-height: 1.6;
}

.cl2-cmp-cohort strong { color: var(--cl2-text); }

.cl2-cmp-cohort-fix {
  display: inline-block;
  margin-top: var(--cl2-space-xs);
  font-weight: 600;
  color: var(--cl2-accent);
  text-decoration: none;
}

.cl2-cmp-cohort-fix:hover { text-decoration: underline; }

/* ── Summary ────────────────────────────────────────────────────────────────────────── */

.cl2-cmp-verdicts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--cl2-space-md);
}

.cl2-cmp-verdict {
  padding: var(--cl2-space-md);
  background: var(--cl2-accent-dim);
  border-radius: var(--cl2-radius-lg);
}

.cl2-cmp-verdict-t {
  display: block;
  font-size: var(--cl2-fs-sm);
  font-weight: 600;
  color: var(--cl2-text-muted);
  margin-bottom: var(--cl2-space-2xs);
}

.cl2-cmp-verdict-v {
  display: block;
  font-size: var(--cl2-fs-lg);
  font-weight: 700;
  color: var(--cl2-text);
}

/* ── The matrix ─────────────────────────────────────────────────────────────────────── */

/* Wide content scrolls inside its own container rather than pushing the page sideways. */
.cl2-cmp-panel .panel-body { overflow-x: auto; }

.cl2-cmp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--cl2-fs-md);
}

.cl2-cmp-table th,
.cl2-cmp-table td {
  padding: var(--cl2-space-sm) var(--cl2-space-md);
  border-block-end: 1px solid var(--cl2-border);
  text-align: center;
  vertical-align: middle;
}

.cl2-cmp-table tbody tr:last-child th,
.cl2-cmp-table tbody tr:last-child td { border-block-end: 0; }

/* The label column stays put while the vehicle columns scroll — RTL, so it sticks right. */
.cl2-cmp-lbl {
  position: sticky;
  right: 0;
  z-index: 1;
  background: var(--cl2-white);
  text-align: start;
  font-weight: 500;
  color: var(--cl2-text-muted);
  min-width: 190px;
}

.cl2-cmp-note {
  display: block;
  font-size: var(--cl2-fs-xs);
  color: var(--cl2-text-dim);
  font-weight: 400;
  margin-top: var(--cl2-space-2xs);
}

.cl2-cmp-colh {
  font-size: var(--cl2-fs-md);
  font-weight: 700;
  color: var(--cl2-text);
  min-width: 150px;
}

.cl2-cmp-num {
  display: block;
  font-size: var(--cl2-fs-2xl);
  font-weight: 700;
  color: var(--cl2-text);
  font-variant-numeric: tabular-nums;
}

.cl2-cmp-sub {
  display: block;
  font-size: var(--cl2-fs-xs);
  color: var(--cl2-text-dim);
}

.cl2-cmp-latin { direction: ltr; unicode-bidi: isolate; }

/* Winner: accent + weight + a star, never colour alone. */
.cl2-cmp-val.is-win { background: var(--cl2-accent-dim); }
.cl2-cmp-val.is-win .cl2-cmp-num { color: var(--cl2-accent); }
.cl2-cmp-crown { font-size: var(--cl2-fs-sm); color: var(--cl2-accent); }

/* ── Picker ─────────────────────────────────────────────────────────────────────────── */

.cl2-cmp-picker { position: relative; }

.cl2-cmp-picker-lbl {
  display: block;
  font-size: var(--cl2-fs-sm);
  font-weight: 600;
  color: var(--cl2-text-muted);
  margin-bottom: var(--cl2-space-xs);
}

.cl2-cmp-input {
  width: 100%;
  padding: var(--cl2-space-sm) var(--cl2-space-md);
  font: inherit;
  font-size: var(--cl2-fs-lg);
  color: var(--cl2-text);
  background: var(--cl2-surface);
  border: 1px solid var(--cl2-border-dark);
  border-radius: var(--cl2-radius-md);
  box-sizing: border-box;
}

.cl2-cmp-input:focus {
  outline: none;
  border-color: var(--cl2-accent);
  box-shadow: 0 0 0 3px var(--cl2-accent-mid);
}

.cl2-cmp-results { margin-top: var(--cl2-space-xs); }

.cl2-cmp-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cl2-space-md);
  padding: var(--cl2-space-sm) var(--cl2-space-md);
  border-block-end: 1px solid var(--cl2-border);
  color: var(--cl2-text);
  text-decoration: none;
  font-size: var(--cl2-fs-md);
}

.cl2-cmp-result:hover { background: var(--cl2-surface-2); }
.cl2-cmp-result-n { font-size: var(--cl2-fs-sm); color: var(--cl2-text-dim); }

.cl2-cmp-msg {
  padding: var(--cl2-space-sm) var(--cl2-space-md);
  font-size: var(--cl2-fs-md);
  color: var(--cl2-text-muted);
}

/* ── Methodology ────────────────────────────────────────────────────────────────────── */

.cl2-cmp-method ul { margin: 0; padding-inline-start: var(--cl2-space-xl); }

.cl2-cmp-method li {
  font-size: var(--cl2-fs-md);
  color: var(--cl2-text-muted);
  line-height: 1.7;
  margin-bottom: var(--cl2-space-xs);
}