/* Data tables. Real <table> markup with <caption> and scope="col".
   Cells: .num (right, tabular), .rank (big serif position), .who (the name), .soft (secondary).
   Wide tables: wrap in <div class="table-wrap"> to scroll sideways inside the card.
   V2-SHELL: the head row sits on ink-1 between hairlines; rows are 52px.
   Narrow space: when the nearest size container (every .view is one, .cq makes more)
   is under 560px, rows become two-line cards. Cells with data-label show "Label: value";
   .num cells with data-short show "Lv 90". */

.table-wrap { overflow-x: auto; }
.data-table { width: 100%; font-variant-numeric: tabular-nums; }
.data-table thead th { background: var(--ink-1); box-shadow: inset 0 -1px 0 var(--line-strong), inset 0 1px 0 var(--line-soft); }
.data-table th {
  padding: var(--s-3);
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  text-align: left;
  color: var(--accent);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.data-table.is-sticky th { position: sticky; top: 0; background: var(--ink-2); z-index: 1; }
.data-table td { height: 52px; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr { transition: background-color var(--dur-1) var(--ease-out); }
.data-table tbody tr:hover { background: var(--tint); }
.data-table .num, .data-table th.num { text-align: right; }
.data-table .rank {
  width: 3.5rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
}
.data-table th.rank { font-family: var(--font-label); font-size: var(--fs-xs); }
/* Podium: the top three positions are brighter. */
.data-table tbody tr:nth-child(-n + 3) .rank { color: var(--accent-hi); }
.data-table .who { font-weight: 600; overflow-wrap: anywhere; }
.data-table .soft { color: var(--text-2); }
.data-table tr.is-me { background: var(--tint); }

@container (max-width: 560px) {
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; }
  .data-table tr {
    display: grid;
    grid-template-columns: 2.25rem 1fr auto;
    gap: 0.1rem var(--s-2);
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--line);
  }
  .data-table tbody tr:last-child { border-bottom: 0; }
  .data-table td { height: auto; padding: 0; border: 0; }
  .data-table td.rank { grid-row: span 3; width: auto; }
  .data-table td.who { grid-column: 2; }
  .data-table td.num { grid-column: 3; grid-row: 1; }
  .data-table td[data-label] { grid-column: 2 / -1; font-size: 0.85rem; color: var(--text-2); text-align: left; }
  .data-table td[data-label]::before { content: attr(data-label) ": "; color: var(--text-3); }
  .data-table td.num[data-short]::before { content: attr(data-short) " "; color: var(--text-2); font-size: 0.8rem; }
}

/* Key/value list: account summary, item details. */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-2) var(--s-5); }
.kv dt { color: var(--text-2); font-size: var(--fs-sm); }
.kv dd { font-variant-numeric: tabular-nums; }