/* Comparison pages only: nothing outside /vs/* uses these, so they stay out of doc.css — that
   file serves legal long-form, a different reader at a different pace. */

/* A comparison table needs more width than legal prose. At 40em, four columns squeeze every
   cell down to two or three words per line. */
.doc-wide { max-width: 52em; }
.doc-wide h1 { margin-bottom: 22px; }
/* The 30em max-width .lede carries is measured for the landing page's two-column hero; in a
   single-column article it leaves the intro narrower than every paragraph beneath it, which reads
   as unfinished layout. Here it follows the body column instead. */
.doc-wide .lede { font-size: 18.5px; margin-bottom: 8px; max-width: none; }

/* When the table outgrows the viewport, only the table scrolls sideways — body never does. */
.table-scroll { overflow-x: auto; margin: 0 0 18px; }

.compare {
  border-collapse: collapse;
  width: 100%;
  min-width: 40em;
  font-size: 15px;
}
.compare th, .compare td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
/* Three text colours for three roles, each declared once — rather than setting one in the shared
   block only for every th to override it. */
.compare td { color: var(--body-text); }
.compare thead th {
  color: var(--active-text);
  font-weight: 560;
  font-size: 14px;
  white-space: nowrap;
}
/* The leading column labels its row instead of holding data, so it is a th semantically — and it
   has to read as distinct from the cells. */
.compare tbody th {
  color: var(--primary-text);
  font-weight: 500;
  white-space: nowrap;
}
/* The second column is our own product, so it gets a faint wash — but no ticks and crosses:
   which cells count as a win is the reader's call, ours is only to line the facts up. */
.compare td:first-of-type {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.compare .yes { color: var(--primary-text); }
.compare .no { color: var(--secondary-text); }