/* Comparison tables: one treatment for every table on the site (2026-10-17).
 *
 * A table opts in with class="stack-table" and its wrapper with
 * class="stack-table-wrap". The localization build links this sheet on any
 * page that has one and labels every body cell with its column header
 * (data-label), in the page's own language, from the table's <thead>
 * (scripts/localize/lib/stack-tables.mjs). The markup stays a real table, so
 * search engines and wide-screen readers see rows and columns. When the
 * stacked phone layout sets display: block, some screen readers (Safari with
 * VoiceOver) stop announcing table structure; the visible labels carry it.
 *
 * Desktop: headers and first cells wrap instead of forcing the table wider
 * than the article column, and six-column tables break out of the column.
 * Phones: each row becomes a card and each cell shows its column name, so
 * nothing scrolls sideways.
 */

.stack-table-wrap .stack-table { min-width: 0; }
.stack-table-wrap .stack-table th,
.stack-table-wrap .stack-table td {
  white-space: normal;
  overflow-wrap: break-word;
}

/* Wide tables leave a narrow article column on desktop: centred on it and
   never wider than the page. Below that width they stack like every table
   does on a phone, since the column is too narrow for six columns. */
@media (min-width: 960px) {
  .stack-table-wrap.stack-table-wide {
    width: min(1000px, calc(100vw - 64px));
    max-width: none;
    margin-left: calc(50% - min(500px, 50vw - 32px));
  }
}

/* Phones, and wide tables below 960px: each row is a card and each cell
   names its column. */
@media (max-width: 640px) {
  div.stack-table-wrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .stack-table-wrap .stack-table,
  .stack-table-wrap .stack-table tbody,
  .stack-table-wrap .stack-table tr,
  .stack-table-wrap .stack-table th,
  .stack-table-wrap .stack-table td {
    display: block;
    width: auto;
  }
  .stack-table-wrap .stack-table { background: none; margin: 0; }
  /* Column headers move into each cell's label; the header row stays in
     the markup for assistive technology. */
  .stack-table-wrap .stack-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .stack-table-wrap .stack-table tbody tr {
    margin: 0 0 12px;
    padding: 14px 16px;
    border: 1px solid var(--border, #2A2A38);
    border-radius: var(--site-radius, 14px);
    background: var(--surface, #111118);
  }
  .stack-table-wrap .stack-table tbody tr > th,
  .stack-table-wrap .stack-table tbody tr > td {
    padding: 6px 0;
    border: 0;
    text-align: left;    background: none;
  }
  /* A highlighted row keeps its emphasis on the card's edge. */
  .stack-table-wrap .stack-table tbody tr.highlight { border-color: var(--site-link, #B8A8FF); }
  .stack-table-wrap .stack-table tbody tr > :first-child {
    padding-top: 0;
    color: var(--site-text-primary, #F4F3FB);
    font-size: 16px;
    font-weight: 600;
  }
  .stack-table-wrap .stack-table [data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--site-text-secondary, #AAA8BE);
    font-size: var(--site-label-size, 12px);
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.5;
    text-transform: uppercase;
  }
}
@media (max-width: 959px) {
  div.stack-table-wrap.stack-table-wide {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .stack-table-wide .stack-table,
  .stack-table-wide .stack-table tbody,
  .stack-table-wide .stack-table tr,
  .stack-table-wide .stack-table th,
  .stack-table-wide .stack-table td {
    display: block;
    width: auto;
  }
  .stack-table-wide .stack-table { background: none; margin: 0; }
  /* Column headers move into each cell's label; the header row stays in
     the markup for assistive technology. */
  .stack-table-wide .stack-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .stack-table-wide .stack-table tbody tr {
    margin: 0 0 12px;
    padding: 14px 16px;
    border: 1px solid var(--border, #2A2A38);
    border-radius: var(--site-radius, 14px);
    background: var(--surface, #111118);
  }
  .stack-table-wide .stack-table tbody tr > th,
  .stack-table-wide .stack-table tbody tr > td {
    padding: 6px 0;
    border: 0;
    text-align: left;    background: none;
  }
  /* A highlighted row keeps its emphasis on the card's edge. */
  .stack-table-wide .stack-table tbody tr.highlight { border-color: var(--site-link, #B8A8FF); }
  .stack-table-wide .stack-table tbody tr > :first-child {
    padding-top: 0;
    color: var(--site-text-primary, #F4F3FB);
    font-size: 16px;
    font-weight: 600;
  }
  .stack-table-wide .stack-table [data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--site-text-secondary, #AAA8BE);
    font-size: var(--site-label-size, 12px);
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.5;
    text-transform: uppercase;
  }
}