/* ============================================
   Table — static, semantic, hairline-ruled grid.

   <xm-table> renders a real <table> in its shadow root. Borders are
   1px --md-sys-color-outline-variant hairlines (no 2px, no heavy
   elevation). The table sits on one surface family — surface* with
   ink --md-sys-color-on-surface (AD-13). Header rows are
   differentiated by the hairline rule + an optional surface-container
   raise, never a status hue (AD-11).

   Numeric cells right-align (text-align: end) with tabular figures so
   columns of numbers line up; the number + unit carry a space (412 KB)
   in the content (NFR-22 / UX-DR4).

   Static only — sorting / paging live in xm-data-table (Epic 6).
   ============================================ */

.table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-sys-typescale-body-medium-font);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  /* A hairline frame around the whole grid. */
  border: 1px solid var(--md-sys-color-outline-variant);
}

.table__caption {
  caption-side: top;
  text-align: start;
  padding: 0 0 var(--s-2);
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--md-sys-typescale-label-large-font);
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: 500;
}

.table__head {
  background: var(--md-sys-color-surface-container-low);
}

.table__header-cell {
  text-align: start;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-sys-typescale-label-large-font);
  font-size: var(--md-sys-typescale-label-medium-size);
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
}

.table__row + .table__row .table__cell {
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

.table__cell {
  padding: var(--s-3) var(--s-4);
  text-align: start;
  vertical-align: middle;
  color: var(--md-sys-color-on-surface);
}

/* Secondary ink for muted cells (e.g. timestamps). */
.table__cell--muted {
  color: var(--md-sys-color-on-surface-variant);
}

/* Numeric — right-aligned, tabular figures so digits line up. */
.table__header-cell--numeric,
.table__cell--numeric {
  text-align: end;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Zebra is intentionally omitted — the hairline rule does the region
   work (UX-DR10). A subtle row-hover keeps long tables scannable
   without a status hue. */
.table__row:hover .table__cell {
  background: color-mix(in oklab, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);
}