/* ============================================================
   compare.css — comparison table
   Used by /guides/dead-mans-switch-comparison
   CSP is style-src 'self', so all styling must live in a served
   stylesheet like this one — inline style="" attributes are blocked.
   All colors come from the site.css design tokens, so the table is
   theme-aware (light/dark) for free.
   ============================================================ */

.cmp-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-6) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.cmp {
  width: 100%;
  min-width: 760px;            /* keep columns legible; scroll on narrow screens */
  border-collapse: collapse;
  background: var(--color-surface);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.cmp caption {
  caption-side: top;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.cmp th,
.cmp td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

/* Column headers (the questions) */
.cmp thead th {
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  vertical-align: bottom;
  border-bottom: 2px solid var(--color-border-strong);
}

/* First column = the method name. Sticky so it stays visible while the
   answer columns scroll horizontally. */
.cmp tbody th {
  position: sticky;
  left: 0;
  min-width: 150px;
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
  border-right: 1px solid var(--color-border);
}

/* Zebra striping for scanability */
.cmp tbody tr:nth-child(even) td,
.cmp tbody tr:nth-child(even) th {
  background: var(--color-surface-raised);
}

/* Status marks: a colored glyph before the qualifier text, so a row can
   be scanned at a glance without reading every cell. */
.cmp td.c-yes,
.cmp td.c-no,
.cmp td.c-mid {
  padding-left: var(--space-4);
}
.cmp .c-yes::before,
.cmp .c-no::before,
.cmp .c-mid::before {
  display: inline-block;
  width: 1.1em;
  margin-left: -0.1em;
  font-weight: var(--weight-bold);
}
.cmp .c-yes::before { content: "\2713"; color: var(--color-success-border); } /* ✓ */
.cmp .c-no::before  { content: "\2715"; color: var(--color-danger-border); }  /* ✕ */
.cmp .c-mid::before { content: "\007E"; color: var(--color-warning-border); } /* ~ */

/* Featured row = deadkey. Defined AFTER the zebra rule so it wins. */
.cmp tbody tr.is-featured td,
.cmp tbody tr.is-featured th {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  font-weight: var(--weight-medium);
}
.cmp tbody tr.is-featured th {
  box-shadow: inset 3px 0 0 var(--color-success-border);
}
.cmp tbody tr:last-child td,
.cmp tbody tr:last-child th {
  border-bottom: none;
}

/* A small hint that the table scrolls on narrow screens */
.cmp-hint {
  display: none;
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}
@media (max-width: 760px) {
  .cmp-hint { display: block; }
}