/* ==========================================================================
   COMPONENTS · COMPARISON — the side-by-side matrix where COUNTRIES ARE COLUMNS
   and FACTORS ARE ROWS (the transpose of the one-row-per-country ledger). A
   real <table> in .op-table-scroll, with a sticky serif leader column and a
   sticky country-header row that read correctly together at the corner. Each
   body cell is a band-bearing score read three ways — mono numeral, small-caps
   band word, and a non-hue pip whose height encodes the band via --bk-pos.
   ========================================================================== */

.op-comparison {
  border-collapse: separate;            /* separate keeps sticky cell edges honest */
  border-spacing: 0;
  width: 100%;
  font-size: var(--text-sm);
}

/* — The sticky country-header row — */
.op-comparison thead th {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--surface-sunken);
  border-bottom: 1.5px solid var(--rule-strong);
  vertical-align: bottom;
  text-transform: none;                 /* the header carries serif, not a grotesque caps run */
  min-inline-size: 9rem;
}

/* The corner: sticky on BOTH axes, so it sits over leader and header alike.
   Selector is deliberately specific enough to out-rank `.op-comparison thead th`
   for the z-index, or the header row would paint over it on horizontal scroll. */
.op-comparison thead th.op-comparison__corner {
  position: sticky;
  left: 0;
  z-index: var(--z-popover);
  border-right: 1px solid var(--rule-strong);
  min-inline-size: 11rem;
}

/* Each country column is tagged at its head by its OVERALL band — a keyline in
   the band ink (the th carries data-band), so a column reads its standing before
   a single cell is. Out-specifies the generic thead-th border to win the colour. */
.op-comparison thead th.op-comparison__col { border-bottom: 2px solid var(--bk-line, var(--rule-strong)); }

/* — A country column header: name + ISO + mini overall (data-band on the th) — */
.op-comparison__colhead { display: flex; flex-direction: column; gap: var(--space-3xs); }
.op-comparison__colhead-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2xs);
}
.op-comparison__country {
  font-family: var(--font-reading);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}
.op-comparison__iso {
  font-family: var(--font-data);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--feat-tabular);
  text-transform: uppercase;
  color: var(--text-muted);
}
.op-comparison__overall { display: inline-flex; align-items: baseline; gap: 0.4em; margin-top: var(--space-3xs); }
.op-comparison__overall-score {
  font-family: var(--font-data);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--feat-tabular);
  color: var(--bk-ink, var(--text));
}
.op-comparison__overall-band {
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--bk-ink, var(--text-secondary));
}

/* The quiet remove control — never the rubric until intent (hover/focus) */
.op-comparison__remove {
  font-family: var(--font-furniture);
  font-size: var(--text-base);
  line-height: 1;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  padding: 0.05em 0.32em;
  cursor: pointer;
  transition: var(--transition-ink);
}
.op-comparison__remove:hover { color: var(--accent); border-color: var(--rule); }
.op-comparison__remove:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* — The sticky serif leader column (factor names) — */
.op-comparison__leader {
  position: sticky;
  left: 0;
  z-index: var(--z-raised);
  background: var(--surface-raised);
  border-right: 1px solid var(--rule-strong);
  font-family: var(--font-reading);
  font-weight: var(--weight-medium);
  color: var(--text);
}
.op-comparison tbody tr:hover .op-comparison__leader { color: var(--accent); }   /* a calm, printed hover */

/* — A score cell: the redundant trio, compact (data-band on the td) — */
.op-comparison__cell { display: flex; align-items: center; gap: var(--space-2xs); }
.op-comparison__score {
  font-family: var(--font-data);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--feat-tabular);
  color: var(--bk-ink, var(--text));
}
.op-comparison__band {
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--bk-ink, var(--text-secondary));
}

/* The pip: a hairline track with an index mark at --bk-pos (good rides high,
   poor sits low) — a third, non-hue channel beyond numeral and word. */
.op-comparison__pip { position: relative; flex: none; inline-size: 0.7em; block-size: 1.45em; }
.op-comparison__pip::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  inline-size: 1px;
  transform: translateX(-50%);
  background: color-mix(in oklab, var(--bk-line, var(--rule)) 45%, transparent);
}
.op-comparison__pip::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: var(--bk-pos, 50%);
  block-size: 0.26em;
  border-radius: var(--radius-xs);
  background: var(--bk-ink, var(--text));
  transform: translateY(-50%);
}

/* No-data: a hatched plate (never bare grey); the pip marks fall away */
.op-comparison td[data-band="none"] { background-color: var(--surface); background-image: var(--hatch-image); }
.op-comparison td[data-band="none"] .op-comparison__pip::before,
.op-comparison td[data-band="none"] .op-comparison__pip::after { display: none; }
.op-comparison td[data-band="none"] .op-comparison__score { color: var(--text-muted); }

/* — The trailing add column: a dashed invitation header + a faint empty slot — */
.op-comparison__addcol { vertical-align: bottom; }
.op-comparison__add {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
  background: transparent;
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius-xs);
  padding: 0.5em 0.8em;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-ink);
}
.op-comparison__add:hover { color: var(--accent); border-color: var(--accent-keyline); background: var(--accent-wash); }
.op-comparison__add:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.op-comparison__slot {
  background: color-mix(in oklab, var(--surface-sunken) 45%, transparent);
  border-left: 1px dashed var(--rule);
}