/* Compare page (pages/compare/, pages/tr/compare/). Loaded after cine.css via
   front matter `css: compare`. Builds on the shared .cmp / .m / .tile rules
   without changing them: everything here is scoped to .page-compare. */

/* ---------- legend ---------- */
.page-compare .cmp-legend {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14px; color: var(--fg-2);
}
.page-compare .cmp-legend li { display: inline-flex; align-items: center; gap: 8px; }
.page-compare .cmp-legend .m { flex: none; }

.page-compare .cmp-hint { display: none; margin: 0 0 12px; font-size: 14px; color: var(--fg-2); }
@media (min-width: 761px) and (max-width: 1239px) { .page-compare .cmp-hint { display: block; } }

/* ---------- full table (wider than 760px) ---------- */
.page-compare .cmp-full { border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.page-compare .cmp-full .cmp { min-width: 1060px; font-size: 15px; }
.page-compare .cmp-full .cmp th, .page-compare .cmp-full .cmp td { padding: 14px 8px; }
.page-compare .cmp-full .cmp tbody tr:last-child > * { border-bottom: 0; }
.page-compare .cmp-full .cmp thead th {
  font-size: 14px; line-height: 1.25; padding-top: 20px; padding-bottom: 16px;
  background: var(--bg-2); color: var(--fg-2); width: 6.6rem;
}
.page-compare .cmp-full .cmp thead th a { color: inherit; text-decoration: none; border-radius: 4px; }
.page-compare .cmp-full .cmp thead th a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.page-compare .cmp-full .cmp thead th.feat {
  text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3);
}
.page-compare .cmp-full .cmp tbody th { font-size: 15px; line-height: 1.4; color: var(--fg-2); padding-right: 18px; }
.page-compare .cmp-full .cmp tbody th strong { color: var(--fg); font-weight: 600; }

/* sticky capability column + Deskmap column; opaque backgrounds so the
   scrolled cells pass underneath */
.page-compare .cmp-full .cmp th:first-child {
  position: sticky; left: 0; z-index: 2; box-sizing: border-box;
  width: 17rem; min-width: 17rem; max-width: 17rem; background: var(--bg);
}
.page-compare .cmp-full .cmp thead th:first-child { background: var(--bg-2); z-index: 3; }
.page-compare .cmp-full .cmp .us {
  position: sticky; left: 17rem; z-index: 2; box-sizing: border-box; width: 7.4rem; min-width: 7.4rem;
  background: color-mix(in srgb, var(--accent) 9%, var(--bg));
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--accent) 26%, var(--line)), inset 1px 0 0 color-mix(in srgb, var(--accent) 26%, var(--line));
}
.page-compare .cmp-full .cmp thead th.us {
  z-index: 3; border-radius: 0; font-size: 16px; font-weight: 700;
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-2));
  box-shadow: inset 0 3px 0 var(--accent), inset -1px 0 0 color-mix(in srgb, var(--accent) 26%, var(--line)), inset 1px 0 0 color-mix(in srgb, var(--accent) 26%, var(--line));
}
.page-compare .cmp-full .cmp tbody tr:hover > th { background: color-mix(in srgb, var(--fg) 4%, var(--bg)); color: var(--fg); }
.page-compare .cmp-full .cmp tbody tr:hover > td { background: color-mix(in srgb, var(--fg) 4%, var(--bg)); }
.page-compare .cmp-full .cmp tbody tr:hover > td.us { background: color-mix(in srgb, var(--accent) 15%, var(--bg)); }
.page-compare .cmp-full .m { width: 15px; height: 15px; }
.page-compare .cmp-full .m.n { width: 13px; height: 13px; }
.page-compare .cmp-full .m.na { width: 13px; height: 2px; }

/* ---------- card view (phones, 760px and narrower) ---------- */
.page-compare .cmp-cards { display: none; list-style: none; margin: 0; padding: 0; gap: 12px; }
.page-compare .cc {
  background: var(--tile); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 16px 16px;
}
.page-compare .cc h3 { margin: 0 0 12px; font-size: 17px; line-height: 1.35; font-weight: 500; letter-spacing: -0.012em; color: var(--fg-2); }
.page-compare .cc h3 strong { color: var(--fg); font-weight: 650; }
.page-compare .cc ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.page-compare .cc li {
  display: flex; align-items: center; gap: 9px; min-width: 0; padding: 8px 10px; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--line); font-size: 14px; line-height: 1.25; color: var(--fg-2);
}
.page-compare .cc li > span:not(.sr) { min-width: 0; overflow-wrap: anywhere; }
.page-compare .cc li.y { color: var(--fg); }
.page-compare .cc li.us {
  grid-column: 1 / -1; font-weight: 650; color: var(--fg);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg)); border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
}
.page-compare .cc .m { flex: none; }
@media (min-width: 480px) { .page-compare .cc ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .page-compare .cmp-full { display: none; }
  .page-compare .cmp-cards { display: grid; }
  .page-compare .cmp-legend { gap: 8px 16px; font-size: 13.5px; }
  .page-compare .cmp-legend li { align-items: flex-start; }
  .page-compare .cmp-legend .m { margin-top: 3px; }
}

/* ---------- notes ---------- */
.page-compare .note { scroll-margin-top: calc(var(--nav-h) + 24px); }
.page-compare .note:target { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.page-compare .note p { line-height: 1.6; }
.page-compare .note em { color: var(--fg); font-style: normal; font-weight: 600; }
.page-compare .note-src { margin-top: auto; padding-top: 18px; }
.page-compare .note-src .kicker { margin-bottom: 10px; color: var(--fg-3); }
.page-compare ul.src { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.page-compare ul.src a {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg); color: var(--fg); font-size: 14px; font-weight: 500;
  text-decoration: none; transition: border-color .2s, color .2s;
}
.page-compare ul.src a::after { content: "↗" / ""; font-size: 12px; color: var(--fg-3); }
.page-compare ul.src a:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); color: var(--accent); }
.page-compare ul.src a:hover::after { color: var(--accent); }

/* ---------- closing ---------- */
.page-compare .end-text { margin: 22px auto 0; }

@media (prefers-reduced-motion: reduce) {
  .page-compare ul.src a { transition: none; }
}