/* ---------------------------------------------------------------------------
   Compare
   ---------------------------------------------------------------------------
   Almost everything on this page is the scene kit doing its job. The only thing
   that needs its own rules is the table, because a comparison table is the one
   component the kit has never had to draw.
   ------------------------------------------------------------------------ */

.srcm-root {
  position: relative;
}

/* ---------------------------------------------------------------------------
   The table
   ------------------------------------------------------------------------ */

/*
 * IT SCROLLS INSIDE ITSELF, NEVER THE PAGE.
 *
 * Four columns of readable text will not fit 390px and no amount of type
 * scaling changes that honestly. The wrapper takes the overflow so the table
 * can be swiped where it stands, and the page body never scrolls sideways -
 * which is a harness failure, and correctly so: a page that drifts left and
 * right under a thumb feels broken whatever caused it.
 *
 * tabindex and the role come with the scroll container rather than being
 * decoration: a region that scrolls has to be reachable and announced, or a
 * keyboard user can see there is more table and has no way to reach it.
 */
.srcm-table-wrap {
  margin-top: clamp(24px, 4vh, 40px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 16px;
  border: 1px solid var(--srh-hairline);
  background: rgba(10, 36, 114, 0.28);
}

.srcm-table-wrap:focus-visible {
  outline: 2px solid var(--srk-accent-live, var(--srh-accent));
  outline-offset: 3px;
}

.srk-page .srcm-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: clamp(14px, 1vw, 16px);
}

/*
 * The caption describes the table when it is read out of page order, so it is
 * available to a screen reader and not to the eye: the heading above it already
 * says this to a sighted reader, and saying it twice is noise.
 */
.srk-page .srcm-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.srk-page .srcm-table th,
.srk-page .srcm-table td {
  padding: clamp(12px, 1.4vw, 18px) clamp(12px, 1.4vw, 20px);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--srh-hairline);
}

.srk-page .srcm-table tbody tr:last-child th,
.srk-page .srcm-table tbody tr:last-child td {
  border-bottom: 0;
}

.srk-page .srcm-table thead th {
  color: var(--srh-pale);
  font-size: clamp(13px, 0.9vw, 15px);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom-color: rgba(77, 138, 255, 0.4);
}

/* The row header is the question, so it carries the weight of the row. */
.srk-page .srcm-table tbody th {
  color: var(--srh-pale);
  font-weight: 600;
  width: 26%;
}

.srk-page .srcm-table td {
  color: var(--srh-ink);
}

/*
 * OUR COLUMN IS MARKED, NOT CROWNED.
 *
 * The page this replaces headed its own column "NO CONTEST", which is a
 * scoreboard rather than a comparison and reads as marketing however true the
 * cells underneath it are. A tint and a brighter ink say "this is the one we
 * make" and leave the reader to draw the conclusion, which is the only version
 * of this that survives a sceptical buyer.
 */
.srk-page .srcm-table .srcm-ours,
.srk-page .srcm-table thead th:last-child {
  background: rgba(44, 229, 167, 0.07);
  color: var(--srh-pale);
}

.srk-page .srcm-table thead th:last-child {
  color: var(--srk-accent-live, var(--srh-accent));
}

/*
 * A HINT THAT THE TABLE CONTINUES.
 *
 * Below about 760px the table is always wider than its container, and on a
 * touch device there is no scrollbar to say so: the reader sees two tidy
 * columns and no reason to think there are two more. A soft fade at the right
 * edge is the standard way to say "keep going" without adding chrome or a
 * sentence of instructions.
 *
 * Scoped to the width where it is always true. An always-on fade at 1440, where
 * the whole table fits, would be pointing at nothing.
 */
@media (max-width: 760px) {
  .srcm-table-wrap {
    background-image: linear-gradient(
      to left,
      var(--srk-bg, #04182C) 0%,
      color-mix(in srgb, var(--srk-bg, #04182C) 55%, transparent) 40%,
      transparent 100%
    );
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 40px 100%;
    /* `scroll` pins it to the box rather than to the content, so it stays at
       the edge while the table slides underneath. */
    background-attachment: scroll;
  }

  @supports not (background: color-mix(in srgb, red 20%, transparent)) {
    .srcm-table-wrap {
      background-image: linear-gradient(to left, var(--srk-bg, #04182C), transparent);
    }
  }
}

/* ---------------------------------------------------------------------------
   The closer
   ------------------------------------------------------------------------ */

.srcm-narrow {
  max-width: 62ch;
}

.srcm-centre {
  text-align: center;
  margin-inline: auto;
}

.srk-page .srcm-centre p {
  margin-inline: auto;
}

.srcm-centre-actions {
  justify-content: center;
}