/* Comparison page (list/templates/list/comparison_page.html). Builds on
   occasion_page.css (.occ-page layout, hero, CTAs, FAQ palette); this file only
   adds the intro, the table and the "when" list. Scoped under .cmp-page. */
.cmp-page {
  max-width: 860px;
}

.cmp-intro {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--occ-ink-2);
  margin: 0;
}

/* The table scrolls sideways on narrow phones instead of squeezing the
   three columns into unreadable slivers. */
.cmp-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -0.75rem;
  padding: 0 0.75rem;
}

.cmp-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.95rem;
  line-height: 1.4;
}

.cmp-table th,
.cmp-table td {
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--occ-line);
  vertical-align: top;
  text-align: left;
}

.cmp-table thead th {
  font-weight: 700;
  color: var(--occ-ink);
  border-bottom: 2px solid var(--occ-line);
}

.cmp-table tbody th {
  font-weight: 600;
  color: var(--occ-ink-2);
  width: 32%;
}

/* Our own column, lightly tinted so the eye finds it first. */
.cmp-table .cmp-us {
  background: rgba(254, 166, 77, 0.10);
}

.cmp-table thead .cmp-us {
  color: var(--occ-brand-deep);
}

/* A tick, cross or dash in front of each cell's text. The text always says
   the full answer, so the marker is a reading aid, not the information. */
.cmp-table td[data-mark]::before {
  display: inline-block;
  width: 1.2em;
  margin-right: 0.25em;
  font-weight: 700;
}

.cmp-table td[data-mark="good"]::before {
  content: "\2713";
  color: #2E7D32;
}

.cmp-table td[data-mark="bad"]::before {
  content: "\2717";
  color: #B23A48;
}

.cmp-table td[data-mark="partly"]::before {
  content: "\2013";
  color: var(--occ-ink-2);
}

.cmp-when {
  margin: 0;
}

.cmp-when dt {
  font-weight: 700;
  margin-top: 1rem;
}

.cmp-when dd {
  margin: 0.25rem 0 0;
  color: var(--occ-ink-2);
  line-height: 1.6;
}