/* ============================================================
   OB — Comparison Table — scoped component styles
   Phase 3 / Plan 03-02 / BRAND-07

   Ported from design/phase-03-performance-electronics/mockups/oberbuilt.css
   lines 258–300. All token references use --ob-* prefix.

   Pre-approved literal: rgba(0,184,212,0.06) on .ob-cmp tr.is-pinned
   background. The 0,184,212 channels = --ob-cyan-500. No semantic alpha
   token exists for this tint — same precedent as pillar-card-grid #F4F8FB.
   See .planning/phases/03-performance-electronics-pillar/03-PATTERNS.md §7.

   Dual delivery:
     - Front end: enqueued via wp_enqueue_scripts in functions.php
     - VB iframe: injected via ?inline import + IIFE in index.jsx
   ============================================================ */

.ob-cmp-wrap {
  width: 100%;
  max-width: var(--ob-container);
  margin: 0 auto;
}

.ob-cmp-region {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--ob-bg-card);
  border: 1px solid var(--ob-border);
  border-radius: var(--ob-r-lg);
}

.ob-cmp-region:focus-visible {
  outline: 2px solid var(--ob-border-focus);
  outline-offset: 2px;
}

table.ob-cmp {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-family: var(--ob-font-sans);
}

table.ob-cmp caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ob-cmp thead th {
  background: var(--ob-bg-inset);
  border-bottom: 2px solid var(--ob-border-strong);
  padding: 0;
  vertical-align: middle;
  text-align: left;
}

.ob-cmp thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--ob-bg-inset);
}

.ob-cmp .th-static {
  display: block;
  padding: var(--ob-s-4) var(--ob-s-5);
  font-family: var(--ob-font-display);
  font-size: var(--ob-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ob-track-caps);
  color: var(--ob-fg-3);
}

.ob-cmp .sort-btn {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ob-s-3);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--ob-s-3) var(--ob-s-5);
  font-family: var(--ob-font-display);
  font-size: var(--ob-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ob-track-caps);
  color: var(--ob-fg-3);
  text-align: left;
}

.ob-cmp .sort-btn .unit {
  font-weight: 400;
  color: var(--ob-fg-4);
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--ob-font-mono);
  margin-left: 4px;
}

.ob-cmp .sort-ico {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--ob-fg-4);
}

.ob-cmp .sort-ico .up,
.ob-cmp .sort-ico .down {
  fill: currentColor;
}

.ob-cmp th[aria-sort="ascending"] .sort-ico .up { fill: var(--ob-accent); }
.ob-cmp th[aria-sort="ascending"] .sort-ico .down { opacity: 0.3; }
.ob-cmp th[aria-sort="descending"] .sort-ico .down { fill: var(--ob-accent); }
.ob-cmp th[aria-sort="descending"] .sort-ico .up { opacity: 0.3; }

.ob-cmp th[aria-sort="ascending"] .sort-btn,
.ob-cmp th[aria-sort="descending"] .sort-btn {
  color: var(--ob-fg-2);
}

.ob-cmp tbody th,
.ob-cmp tbody td {
  padding: var(--ob-s-4) var(--ob-s-5);
  border-bottom: 1px solid var(--ob-border);
  vertical-align: middle;
}

.ob-cmp tbody tr:last-child th,
.ob-cmp tbody tr:last-child td {
  border-bottom: none;
}

.ob-cmp tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--ob-bg-card);
  text-align: left;
  font-family: var(--ob-font-sans);
  font-weight: 600;
  font-size: var(--ob-text-base);
  color: var(--ob-fg-1);
  min-width: 140px;
}

.ob-cmp td {
  font-family: var(--ob-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--ob-text-sm);
  color: var(--ob-fg-1);
  min-width: 100px;
}

.ob-cmp td.text {
  font-family: var(--ob-font-sans);
  color: var(--ob-fg-2);
}

.ob-cmp tbody tr:hover td,
.ob-cmp tbody tr:hover th {
  background: var(--ob-bg-inset);
}

/* Pinned OBWB8m row
   Pre-approved rgba literal: channels are --ob-cyan-500 (0,184,212);
   no semantic alpha token exists for this tint. */
.ob-cmp tr.is-pinned th,
.ob-cmp tr.is-pinned td {
  background: rgba(0, 184, 212, 0.06);
  border-bottom: 1px solid var(--ob-border-strong);
}

.ob-cmp tr.is-pinned th {
  box-shadow: inset 3px 0 0 var(--ob-accent);
  color: var(--ob-fg-1);
  font-family: var(--ob-font-display);
}

.ob-cmp tr.is-pinned:hover th,
.ob-cmp tr.is-pinned:hover td {
  background: rgba(0, 184, 212, 0.10);
}

.ob-cmp .you-tag {
  display: inline-block;
  margin-left: var(--ob-s-2);
  font-family: var(--ob-font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ob-cyan-700);
  background: var(--ob-cyan-200);
  border-radius: var(--ob-r-sm);
  padding: 2px 5px;
  vertical-align: middle;
}

/* TBD competitor row */
.ob-cmp tr.is-tbd th {
  color: var(--ob-fg-4);
  font-weight: 500;
}

.ob-cmp tr.is-tbd td {
  color: var(--ob-fg-4);
}

/* Mobile: sticky Model column handled via position:sticky on tbody th (above).
   On narrow viewports the horizontal scroll region reveals data columns while
   the Model column stays pinned at left. */

/* Sort transition: only active when motion is permitted (prefers-reduced-motion:
   no-preference) — same precedent as .vt-threshold in verdict-preview-teaser. */
@media (prefers-reduced-motion: no-preference) {
  .ob-cmp tbody tr {
    transition: opacity var(--ob-t-fast) linear;
  }
}