/* ==========================================================================
   COMPONENTS · DATA TABLE — the skinned, scrollable ledger table that sits on
   top of the bare <table> element styles: a horizontal-scroll frame, optional
   zebra in the deckle tone, row hover, and band-bearing cells that drop a badge
   into a data row. For the comparison and member-area grids.
   ========================================================================== */

/* The scroll frame keeps wide tables from breaking the page on small screens */
.op-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  -webkit-overflow-scrolling: touch;
}
.op-table-scroll > table { margin: 0; }
.op-table-scroll th:first-child,
.op-table-scroll td:first-child { padding-left: var(--space-md); }
.op-table-scroll th:last-child,
.op-table-scroll td:last-child { padding-right: var(--space-md); }

/* Skin applied to the <table> itself */
.op-table thead th {
  background: var(--surface-sunken);
  position: sticky;
  top: 0;
  z-index: 1;
}
.op-table--zebra tbody tr:nth-child(even) { background: color-mix(in oklab, var(--surface-sunken) 55%, var(--surface-raised)); }
.op-table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); }
.op-table tbody tr:hover { background: var(--accent-wash); }

/* A score cell: a band ink figure inline, optionally with the corner tick */
.op-table__score {
  font-family: var(--font-data);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--bk-ink, var(--text));
  text-align: right;
}
.op-table__band {
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--bk-ink, var(--text-secondary));
}

/* No-data: the score cell carries the diagonal hatch register (never bare
   paper), matching the map, the empty state and _comparison.css. The band word
   + em-dash already encode it; the hatch is the third, non-hue channel. */
.op-table tr[data-band="none"] .op-table__score,
.op-table td[data-band="none"] { background-image: var(--hatch-image); }

/* Row leader (the country name column) stays serif and ink */
.op-table__leader {
  font-family: var(--font-reading);
  color: var(--text);
  font-weight: var(--weight-medium);
}

/* ==========================================================================
   COMPONENTS · DATA TABLE · RANKING — .op-table--ranked turns the ledger into a
   league table: a narrow leading mono rank cell (1, 2, 3…). Rank one earns a
   restrained INK emphasis — an ink left keyline and bolder figure — never a gold
   or medal hue, so the placing reads as record, not reward.
   ========================================================================== */

/* The rank cell: a narrow, content-hugging mono numeral column */
.op-table__rank {
  inline-size: 1%;                 /* collapse the column to its digits */
  white-space: nowrap;
  text-align: center;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--feat-tabular);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}

/* Reserve the keyline on every rank cell so the leader never shifts the column */
.op-table--ranked .op-table__rank { border-left: 2px solid transparent; }

/* First placing — ink, not gold: a heavier figure behind a solid-ink keyline */
.op-table--ranked tbody tr:first-child .op-table__rank {
  border-left-color: var(--surface-inverse);
  font-weight: var(--weight-bold);
  color: var(--text);
}

/* ==========================================================================
   COMPONENTS · DATA TABLE · SORTABLE HEADER — .op-table__sort is a real <button>
   filling a sortable <th>; the th carries aria-sort and the button draws the
   sort glyph in ::after — a faint up/down when unsorted, a solid ▲ / ▼ when
   active. Keyboard-operable, focus-visible, and aria-correct.
   ========================================================================== */

.op-table__sort {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4em;
  inline-size: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  text-align: inherit;
  transition: var(--transition-ink);
}
/* numeric headers sit right, so the control and its glyph follow the figures */
th[data-numeric] .op-table__sort { justify-content: flex-end; }

/* The glyph: mono, and faint by default (the column is sortable but unsorted) */
.op-table__sort::after {
  content: "\2195";                /* ↕ up-down: sortable, not yet sorted */
  font-family: var(--font-data);
  font-size: 0.9em;
  line-height: 1;
  color: var(--text-muted);
  transition: var(--transition-ink);
}
th[aria-sort="none"] .op-table__sort::after      { content: "\2195"; color: var(--text-muted); }
th[aria-sort="ascending"] .op-table__sort::after  { content: "\25B2"; color: var(--text); }  /* ▲ */
th[aria-sort="descending"] .op-table__sort::after { content: "\25BC"; color: var(--text); }  /* ▼ */

/* The active column's label reads ink, not muted secondary */
th[aria-sort="ascending"] .op-table__sort,
th[aria-sort="descending"] .op-table__sort { color: var(--text); }

/* Hover / focus bring the label and its glyph up to full ink */
.op-table__sort:hover { color: var(--text); }
.op-table__sort:hover::after { color: var(--text); }
.op-table__sort:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}