/* ==========================================================================
   OpenMobile-2 — table widgets. Additions to main.css §12 only.
   .rt = results table (Table 2), .ec = environment comparison (Table 1).
   ========================================================================== */

/* --------------------------------------------------------- results table */
/* separate borders: with collapse, a sticky cell leaves its borders behind */
.rt table.data { border-collapse: separate; border-spacing: 0; }
.rt thead tr.group th { padding: 12px 12px 3px; border-bottom: none; letter-spacing: 0.09em; }
.rt thead th.sortable { outline-offset: -2px; }
.rt th.rt-bstart, .rt td.rt-bstart { border-left: 1px solid var(--chart-grid); }

/* sticky first column. The cell paints its own ground; our rows and hover
   layer the row tint over it, and the accent bar moves onto the cell. */
.rt th:first-child, .rt td:first-child {
  position: sticky; left: 0; z-index: 1;
  background-color: var(--surface-2);
}
.rt thead th:first-child { z-index: 3; background-color: var(--surface-3); }
.rt tbody tr:hover td:first-child,
.rt tbody tr.ours td:first-child { background-image: linear-gradient(var(--chart-track), var(--chart-track)); }
.rt tbody tr.ours td:first-child { box-shadow: inset 3px 0 0 var(--accent-500); }
.rt tbody tr.ours:hover td:first-child { background-image: linear-gradient(var(--surface-1b), var(--surface-1b)); }

/* group label rows: not sticky themselves, the label inside is */
.rt tbody tr.rt-group td {
  position: static;
  padding: 14px 16px 5px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-dim);
  background: transparent;
  border-bottom: 1px solid var(--hairline-cool);
}
.rt tbody tr.rt-group:hover, .rt tbody tr.rt-group:hover td { background: transparent; }
.rt tr.rt-group span { position: sticky; left: 16px; display: inline-block; }

/* names, model rows and stage rows: body font; the tint and the accent bar mark our rows */
.rt tbody td:first-child, .ec tbody td.ec-text { font-family: var(--font-body); font-size: 14px; }
.rt td.rt-name { color: var(--text-hi); font-weight: 500; }
.rt tr.rt-model td { border-bottom: none; padding-bottom: 1px; }
.rt tr.rt-model td.rt-name { font-weight: 600; }
.rt .tag.ours { margin-left: 8px; vertical-align: 1px; }
.rt tr.rt-stage td { padding-top: 5px; padding-bottom: 5px; }
.rt tr.rt-stage td:first-child { padding-left: 34px; color: var(--text-dim); }
.rt tr.rt-final td:not(.best):not(.rt-null) { color: var(--text-hi); }
.rt tr.rt-final td:first-child { font-weight: 500; }

/* numbers */
.rt td.rt-num { font-family: var(--font-mono); font-size: 13px; }
.rt td.rt-null { color: var(--text-faint); }
.rt .rt-star { font-size: 0.74em; line-height: 0; margin-left: 1px; }
.rt .rt-std { font-size: 10.5px; color: var(--text-faint); margin-left: 5px; }
.rt td.best .rt-std { color: var(--text-dim); }
.rt-note .rt-fn { display: inline-block; margin-right: 18px; }
.rt-note .rt-key { font-family: var(--font-mono); color: var(--text); }

/* ------------------------------------------------- environment comparison */
.ec table.data td { padding: 7px 12px; }
.ec th.ec-text, .ec td.ec-text { text-align: left; }
.ec th.ec-c, .ec td.ec-c { text-align: center; }
.ec td.ec-num { font-family: var(--font-mono); font-size: 13px; }
.ec .ec-yes { color: var(--ok); vertical-align: -3px; }
.ec .ec-no { color: var(--text-faint); opacity: 0.55; vertical-align: -3px; }
.ec .ec-partial { color: var(--text-dim); font-size: 15px; cursor: help; }
.ec tr.ours .tag { margin-left: 8px; vertical-align: 1px; }

@media (max-width: 600px) {
  .ec table.data th, .ec table.data td { padding-left: 9px; padding-right: 9px; }
  .rt table.data thead th, .rt table.data td { padding-left: 9px; padding-right: 9px; }
  .rt tr.rt-stage td:first-child { padding-left: 26px; }
}