/* ==========================================================================
   compare.css — the capability matrix.

   Sticky in both axes: the header row pins under the site chrome, and the
   capability label plus the NavTrax column pin to the left edge. The two axes
   intersect at the corner cell, which needs the highest z-index of the four
   sticky classes — hence the explicit layering below.
   ========================================================================== */

/* --- Controls --------------------------------------------------------- */
.cmp-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
  margin-bottom: var(--s-6);
}
.cmp-filters { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.cmp-filter {
  padding: 8px 15px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-stroke-1);
  background: var(--glass-tint-1);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg-3);
  transition: border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.cmp-filter:hover { color: var(--fg-1); border-color: var(--glass-stroke-2); }
.cmp-filter[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--glass-tint-2); }

.cmp-toggle { display: inline-flex; align-items: center; gap: var(--s-2); font-size: 13px; color: var(--fg-3); cursor: pointer; }
.cmp-toggle input { accent-color: var(--mint-400); width: 15px; height: 15px; }

.cmp-jump { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); margin-left: auto; }
.cmp-jump a { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; color: var(--fg-4); }
.cmp-jump a:hover { color: var(--accent); }

/* --- Scroll container ------------------------------------------------- */
.cmp-scroll {
  position: relative;
  overflow: auto;
  max-height: calc(100vh - var(--chrome-h) - 90px);
  border-radius: var(--r-md);
  border: 1px solid var(--glass-stroke-2);
  background: rgba(6,10,20,0.7);
  box-shadow: var(--shadow-3);
  overscroll-behavior-x: contain;
}
.cmp-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.cmp { width: max-content; min-width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.cmp__col-label { width: 268px; }
.cmp__col-self  { width: 224px; }
.cmp__col-rival { width: 196px; }

/* --- Header row (sticky top) ------------------------------------------ */
.cmp thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: var(--s-4) var(--s-4) var(--s-4);
  text-align: left;
  vertical-align: bottom;
  background: #0a1020;
  border-bottom: 1px solid var(--glass-stroke-2);
  box-shadow: 0 1px 0 var(--glass-stroke-2);
}
.cmp__head-name { display: block; font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--fg-1); line-height: 1.15; }
.cmp__head-vendor { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-4); }
.cmp__head-badge { margin-top: var(--s-3); }

.cmp thead th.cmp__head--self { background: #0c1a18; }
.cmp thead th.cmp__head--self .cmp__head-name { color: var(--mint-200); }

/* Corner + NavTrax header pin on both axes, so they need to sit above the
   header row (z 3) and above the sticky body columns (z 2). */
.cmp thead th.cmp__corner {
  left: 0;
  z-index: 6;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-4);
  position: sticky;
  border-right: 1px solid var(--glass-stroke-2);
}
.cmp thead th:nth-child(2) { position: sticky; left: 268px; z-index: 5; border-right: 1px solid var(--mint-600); }

/* --- Category band ---------------------------------------------------- */
.cmp__cat-cell {
  position: sticky;
  left: 0;
  z-index: 4;
  padding: var(--s-5) var(--s-4) var(--s-3);
  text-align: left;
  background: linear-gradient(90deg, rgba(20,32,54,0.96), rgba(10,16,32,0.96));
  border-top: 1px solid var(--glass-stroke-2);
  border-bottom: 1px solid var(--fg-5);
}
.cmp__cat-name { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--fg-1); }
.cmp__cat-count { margin-left: var(--s-3); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-4); }

/* --- Rows -------------------------------------------------------------- */
.cmp tbody tr[data-verdict]:hover .cmp__cell,
.cmp tbody tr[data-verdict]:hover .cmp__label { background-color: rgba(255,255,255,0.045); }

.cmp__label {
  position: sticky;
  left: 0;
  z-index: 2;
  padding: var(--s-4);
  text-align: left;
  vertical-align: top;
  background: #080e1c;
  border-right: 1px solid var(--glass-stroke-2);
  border-bottom: 1px solid var(--fg-5);
}
.cmp__label-text { display: block; font-size: 13.5px; line-height: 1.4; color: var(--fg-2); }
.cmp__label-verdict { display: inline-block; margin-top: 7px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; }
.cmp__label-verdict[data-v="lead"]::before   { content: "NavTrax leads"; color: var(--mint-400); }
.cmp__label-verdict[data-v="behind"]::before { content: "Competitor leads"; color: var(--amber-300); }
.cmp__label-verdict[data-v="even"]::before   { content: "Level"; color: var(--fg-4); }

.cmp__cell {
  padding: var(--s-4);
  vertical-align: top;
  border-bottom: 1px solid var(--fg-5);
  border-right: 1px solid rgba(255,255,255,0.04);
}
.cmp__cell--self {
  position: sticky;
  left: 268px;
  z-index: 2;
  background: #0a1614;
  border-right: 1px solid var(--mint-600);
}

.cmp__v { display: flex; align-items: baseline; gap: var(--s-2); }
.cmp__glyph { font-style: normal; font-size: 13px; line-height: 1; }
.cmp__vt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }

.is-yes     .cmp__glyph, .cmp__glyph.is-yes     { color: var(--mint-400); }
.is-yes     .cmp__vt { color: var(--mint-200); }
.is-partial .cmp__glyph, .cmp__glyph.is-partial { color: var(--amber-300); }
.is-partial .cmp__vt { color: var(--amber-200); }
.is-no      .cmp__glyph, .cmp__glyph.is-no      { color: var(--fg-4); }
.is-no      .cmp__vt { color: var(--fg-4); }
.is-unclear .cmp__glyph, .cmp__glyph.is-unclear { color: var(--magenta-400); }
.is-unclear .cmp__vt { color: var(--fg-3); }
.is-value   .cmp__vt { font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--fg-1); font-family: var(--font-ui); font-weight: 500; }

.cmp__note { display: block; margin-top: 7px; font-size: 11.5px; line-height: 1.45; color: var(--fg-3); }
.cmp[data-notes="off"] .cmp__note { display: none; }

/* Low-confidence cells are marked, never hidden. */
.cmp__cell[data-conf="low"] { position: relative; }
.cmp__cell[data-conf="low"]::after,
.cmp__conf-mark {
  content: "";
  position: absolute;
  top: 10px; right: 8px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--magenta-400);
  opacity: 0.7;
}
.cmp__conf-mark { position: static; display: inline-block; }
.cmp__cell--self[data-conf="low"]::after { display: none; }

/* --- Filters ---------------------------------------------------------- */
.cmp[data-filter="lead"]   tbody tr[data-verdict]:not([data-verdict="lead"]),
.cmp[data-filter="behind"] tbody tr[data-verdict]:not([data-verdict="behind"]),
.cmp[data-filter="diff"]   tbody tr[data-verdict="even"] { display: none; }
.cmp tbody[data-empty="true"] { display: none; }

/* --- Key -------------------------------------------------------------- */
.cmp-key { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); margin-top: var(--s-5); }
.cmp-summary--self { border-color: var(--mint-600); background: var(--glass-tint-2); }

@media (max-width: 1180px) {
  .cmp-jump { display: none; }
}
@media (max-width: 860px) {
  .cmp__col-label { width: 190px; }
  .cmp__col-self  { width: 176px; }
  .cmp__col-rival { width: 164px; }
  .cmp thead th:nth-child(2) { left: 190px; }
  .cmp__cell--self { left: 190px; }
  .cmp__label-verdict { display: none; }
}