/* ============================================
   Data table — the interactive sibling of <xm-table>.

   Mirrors xm-table's static chrome (1px --md-sys-color-outline-variant
   hairlines, sentence-case headers, numeric right-align + tabular figures,
   number + unit carry a space "412 KB"), then layers in sort, paging, loading,
   and empty states.

   It sits on ONE surface family — surface* with ink --md-sys-color-on-surface
   (AD-13). Region differentiation is the hairline rule + an optional
   surface-container raise on the header, never a status hue (AD-11). No
   --md-sys-color-error* anywhere; the single coral accent
   (--md-sys-color-primary) marks the active sort.

   BEM block: `data-table`. Registered in scripts/check-bem.sh STRICT_BLOCKS.
   Elements: __table, __head, __row, __cell, __cell-action, __header-cell,
   __header-label, __group-cell, __sort, __sort-icon, __footer, __pagination,
   __empty, __row-fold, __row-fold-line.
   Modifiers: --sticky, --fill, --flush, __cell--end, __cell--muted,
   __header-cell--end / --sortable / --active / --group-start,
   __row--skeleton / --empty / --groups / --header.
   ============================================ */

/* The frame is the bordered box; __scroll inside it is what actually scrolls.
   They are separate so the horizontal rail can sit INSIDE the frame, under the
   totals row, without riding along with the content it scrolls. */
.data-table {
  --data-table-body: color-mix(
    in oklab,
    var(--md-sys-color-surface-container) 82%,
    var(--md-sys-color-surface)
  );
  --data-table-band-block: 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--data-table-body);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  overflow: hidden;
}

.data-table__scroll {
  min-height: 0;
}

.data-table--sticky .data-table__scroll {
  flex: 1 1 auto;
  overflow: auto;
  max-height: 100%;
}

/* Fixed widths can exceed the frame, so the layout variant scrolls sideways
   even when the header is not pinned. */
.data-table--layout .data-table__scroll {
  overflow-x: auto;
  overscroll-behavior: contain;
}

.data-table--fitted .data-table__scroll {
  overflow-x: hidden;
}

.data-table--fill {
  height: 100%;
}

.data-table--flush {
  border: 0;
  border-radius: 0;
}

.data-table__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  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);
}

.data-table--dense .data-table__table {
  font-family: var(--xm-typescale-grid-cell-font);
  font-size: var(--xm-typescale-grid-cell-size);
  font-weight: var(--xm-typescale-grid-cell-weight);
  line-height: var(--xm-typescale-grid-cell-line-height);
}

/* Declared per-column widths only bind under `table-layout: fixed`; `width:
   max-content` lets the row exceed the frame instead of squeezing columns. */
.data-table--layout .data-table__table {
  table-layout: fixed;
  width: max-content;
  min-width: 100%;
}

/* Every cell paints the body colour itself rather than letting the frame show
   through. An opaque backdrop directly behind the glyphs is what lets the
   browser use subpixel text rendering; over a transparent cell it silently
   falls back to greyscale, and the whole grid reads a shade softer. */
.data-table--layout .data-table__cell {
  background: var(--data-table-body);
}

/* A grouped row sits under its group header, so its identity column is stepped
   in — the indent is the row's only cue once the header has scrolled away. */
.data-table--layout .data-table__cell--indent {
  padding-inline-start: calc(var(--s-3-5) + var(--s-6));
}

.data-table--compact.data-table--layout .data-table__cell--indent {
  padding-inline-start: calc(var(--s-2-5) + var(--s-4-5));
}

.data-table--dense .data-table__cell--mono,
.data-table--dense .data-table__cell--mono .data-table__cell-text {
  font-family: var(--xm-typescale-grid-mono-font);
  font-size: var(--xm-typescale-grid-mono-size);
  font-weight: var(--xm-typescale-grid-mono-weight);
  line-height: var(--xm-typescale-grid-mono-line-height);
}

.data-table__sizer {
  block-size: 0;
  padding: 0;
  border: 0;
  font-size: 0;
  line-height: 0;
}

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

.data-table--sticky .data-table__head {
  position: sticky;
  top: 0;
  z-index: 1;
}

.data-table__group-cell {
  padding: var(--s-1-5) var(--s-3-5);
  text-align: center;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--xm-typescale-mono-font);
  font-size: var(--md-sys-typescale-label-small-size);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.data-table__group-cell + .data-table__group-cell,
.data-table__header-cell--group-start {
  border-inline-start: 1px solid var(--md-sys-color-outline-variant);
}

/* The band is a fixed-height strip: its label is centred by line-height rather
   than by padding, so a band with no label keeps the exact same height. */
.data-table--dense .data-table__group-cell {
  block-size: var(--data-table-band-block);
  padding: 0 var(--s-3-5);
  font-family: var(--xm-typescale-grid-band-font);
  font-size: var(--xm-typescale-grid-band-size);
  font-weight: var(--xm-typescale-grid-band-weight);
  line-height: var(--xm-typescale-grid-band-line-height);
  letter-spacing: var(--xm-typescale-grid-band-tracking);
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-table--compact {
  --data-table-band-block: 26px;
}

.data-table--compact.data-table--dense .data-table__group-cell {
  padding-inline: var(--s-2-5);
  font-size: 9.5px;
  line-height: var(--data-table-band-block);
}

/* A band cell over ungrouped columns carries no label, and therefore no rule
   under it either — otherwise the hairline claims a grouping that isn't there. */
.data-table--dense .data-table__group-cell--blank {
  border-bottom-color: transparent;
}

/* The band row already draws the vertical rules between groups; repeating them
   on the label row below boxes every column in and turns a band into a grid. */
.data-table--dense .data-table__header-cell--group-start {
  border-inline-start: 0;
}

.data-table__header-cell {
  text-align: start;
  padding: 0;
  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;
}

.data-table__header-label {
  display: inline-block;
}

/* The static label sits with the same padding the sortable hit-area carries,
   so sortable and inert headers align on a shared baseline. */
.data-table__header-cell > .data-table__header-label {
  padding: var(--s-2-5) var(--s-3-5);
}

/* Sortable header: a focusable in-cell control that fills the cell so the whole
   header is the hit target. Hover/active swap real tokens — no filter/opacity. */
.data-table__sort {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  box-sizing: border-box;
  width: 100%;
  padding: var(--s-2-5) var(--s-3-5);
  cursor: pointer;
  user-select: none;
  color: inherit;
  border-radius: var(--md-sys-shape-corner-small);
  outline: none;
}

.data-table__header-cell--sortable .data-table__sort:hover {
  background: color-mix(
    in oklab,
    var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity),
    transparent
  );
}

.data-table__header-cell--sortable .data-table__sort:active {
  background: color-mix(
    in oklab,
    var(--md-sys-color-on-surface) var(--md-sys-state-pressed-state-layer-opacity),
    transparent
  );
}

.data-table__header-cell--sortable .data-table__sort:focus-visible {
  box-shadow: var(--xm-state-focus-ring);
}

/* The active sorted column reads in the coral accent — the only emphasis (AD-11). */
.data-table__header-cell--active {
  color: var(--md-sys-color-primary);
}

.data-table__sort-icon {
  display: inline-flex;
  align-items: center;
  color: var(--md-sys-color-primary);
}

/* End-aligned (numeric) headers push their content to the trailing edge. */
.data-table__header-cell--end .data-table__sort,
.data-table__header-cell--end > .data-table__header-label {
  justify-content: flex-end;
  text-align: end;
}

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

/* Under column-layout every row rules itself off below instead of the next row
   ruling itself off above. Same hairline, but the row keeps a constant height
   wherever it sits — a row following a group header no longer loses 1px. */
.data-table--layout .data-table__row .data-table__cell {
  border-top: 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

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

.data-table__cell--muted {
  color: var(--md-sys-color-on-surface-variant);
}

/* ---------- Column layout: pinning, wrapping, resizing ----------
   A pinned cell sticks to the frame's left edge at an offset the element
   computes from the widths ahead of it. It must be OPAQUE — it paints over the
   rows scrolling beneath it — and it is separated by a hairline, never a
   shadow: this table has no shadows anywhere. */
.data-table--layout .data-table__cell--pinned,
.data-table--layout .data-table__header-cell--pinned {
  position: sticky;
  z-index: 2;
}

.data-table--layout .data-table__cell--pinned {
  background: var(--data-table-body);
}

.data-table--layout .data-table__header-cell--pinned {
  background: var(--md-sys-color-surface-container);
}

.data-table--layout .data-table__header-cell--pinned,
.data-table--layout .data-table__group-cell--pinned {
  z-index: 4;
}

.data-table--layout .data-table__group-cell--pinned {
  position: sticky;
  background: var(--md-sys-color-surface-container);
}

.data-table--layout .data-table__group-cell--pinned-last {
  border-inline-end: 1px solid var(--md-sys-color-outline-variant);
}

.data-table--sticky.data-table--layout .data-table__head .data-table__header-cell--pinned {
  z-index: 5;
}

.data-table--layout .data-table__cell--pinned-last,
.data-table--layout .data-table__header-cell--pinned-last {
  border-inline-end: 1px solid var(--md-sys-color-outline-variant);
}

/* Truncation lives on an inner block, never on the <td>: `overflow` and
   `line-clamp` on a table cell take it out of the table layout and the row
   collapses. Everything is one line with an ellipsis by default — the width is
   fixed, so overflow has to go somewhere — and a wrapped column clamps at three
   lines instead, top-aligned so a long note never stretches the row. */
.data-table__cell-text {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-table--layout .data-table__cell-text {
  inline-size: 0;
  min-inline-size: 100%;
}

.data-table--layout .data-table__cell--wrap {
  vertical-align: top;
}

.data-table--layout .data-table__cell--wrap .data-table__cell-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  white-space: normal;
  text-wrap: pretty;
  text-overflow: clip;
}

.data-table__header-inner {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  position: relative;
  min-width: 0;
}

.data-table__header-inner > .data-table__sort,
.data-table__header-inner > .data-table__header-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* An inert label inside the inner row carries the padding the sortable hit-area
   provides for itself, so labelled and sortable headers stay on one baseline. */
.data-table__header-inner > .data-table__header-label {
  padding: var(--s-2-5) var(--s-3-5);
}

/* Under column-layout the padding belongs to the inner row, not to the label:
   the row also holds the badges, the column-menu trigger and the resize handle,
   and they all have to share one padding box. */
.data-table--layout .data-table__header-inner {
  padding: var(--s-2-5) var(--s-2-5) var(--s-2-5) var(--s-3-5);
}

.data-table--layout .data-table__header-inner > .data-table__header-label,
.data-table--layout .data-table__header-inner > .data-table__sort {
  padding: 0;
  width: auto;
  gap: var(--s-1-5);
  border-radius: 0;
}

/* The `> .data-table__header-label` rule above only reaches a label that is a
   direct child of the cell; under column-layout it sits one level down, inside
   the inner row, so an end-aligned column needs the alignment restated. */
.data-table--layout .data-table__header-cell--end .data-table__header-label,
.data-table--layout .data-table__header-cell--end .data-table__sort {
  justify-content: flex-end;
  text-align: end;
}

.data-table--dense .data-table__header-cell {
  font-family: var(--xm-typescale-grid-header-font);
  font-size: var(--xm-typescale-grid-header-size);
  font-weight: var(--xm-typescale-grid-header-weight);
  line-height: var(--xm-typescale-grid-header-line-height);
}

.data-table__header-badges {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--s-1);
  padding-inline-end: var(--s-1);
}

/* Column state the user chose, stated in words rather than an unlabelled glyph
   — a lone "L" tells nobody the column is pinned. */
.data-table__header-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--s-0-5) var(--s-1);
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--xm-typescale-mono-font);
  font-size: var(--md-sys-typescale-label-small-size);
  font-weight: 500;
  white-space: nowrap;
}

.data-table__header-badge--pin {
  justify-content: center;
  inline-size: 16px;
  block-size: 16px;
  padding: 0;
  border-radius: var(--xm-shape-corner-dense-xs);
  color: var(--md-sys-color-on-surface);
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
}

/* A column frozen by configuration is not something the user chose, so its
   marker reads quieter than one they pinned for themselves. */
.data-table__header-badge--locked {
  color: var(--xm-color-on-surface-soft);
}

.data-table__header-badge--wrap {
  padding: 0;
  background: transparent;
  color: var(--xm-color-on-surface-soft);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.data-table__header-action {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  padding-inline-end: var(--s-1);
}

/* The grab strip straddles the column boundary so the target is reachable from
   either side; it only paints while pointed at. */
.data-table__resize {
  position: absolute;
  inset-block: 0;
  inset-inline-end: calc(-1 * var(--s-2));
  inline-size: var(--s-4);
  z-index: 1;
  cursor: col-resize;
  touch-action: none;
}

.data-table__resize::after {
  content: "";
  position: absolute;
  inset-block: 25%;
  inset-inline-start: 50%;
  inline-size: 1px;
  background: var(--md-sys-color-outline-variant);
}

.data-table__resize:hover::after {
  inset-block: 0;
  background: var(--md-sys-color-primary);
}

/* The handle straddles the column edge: 12px wide, centred on the boundary, with
   a hairline down the middle that stops short of the cell's own rules. */
.data-table--layout .data-table__resize {
  inset-inline-end: calc(-1 * var(--s-1-5));
  inline-size: var(--s-3);
}

.data-table--layout .data-table__resize::after {
  inset-block: 22%;
  inset-inline: 0;
  margin-inline: auto;
  background: color-mix(
    in oklab,
    var(--md-sys-color-on-surface) 20%,
    transparent
  );
}

.data-table--layout .data-table__resize:hover::after {
  inset-block: 0;
  margin-inline: 0;
  background: color-mix(
    in oklab,
    var(--md-sys-color-primary) 20%,
    transparent
  );
  inline-size: auto;
}

.data-table--banded.data-table--layout .data-table__resize::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 100%;
  block-size: var(--data-table-band-block);
}

.data-table--banded.data-table--layout .data-table__resize:hover::before {
  background: color-mix(
    in oklab,
    var(--md-sys-color-primary) 20%,
    transparent
  );
}

/* The badges and the menu trigger sit on the inner row's own padding; an extra
   trailing inset here only steals width from the label beside them. */
.data-table--layout .data-table__header-badges,
.data-table--layout .data-table__header-action {
  padding-inline-end: 0;
}

/* ---------- Totals ----------
   Pinned to the bottom of the scroll frame under sticky-header, and separated
   by the heavier outline (not the hairline) because it is a different KIND of
   row, not the next one. */
.data-table__totals .data-table__cell {
  background: var(--md-sys-color-surface-container);
  border-top: 1px solid var(--md-sys-color-outline);
  font-family: var(--xm-typescale-mono-font);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.data-table--dense .data-table__totals .data-table__cell {
  padding: var(--s-3) var(--s-3-5);
  border-top: 1px solid var(--md-sys-color-outline);
  border-bottom: 0;
  font-family: var(--xm-typescale-grid-totals-font);
  font-size: var(--xm-typescale-grid-totals-size);
  font-weight: var(--xm-typescale-grid-totals-weight);
  line-height: var(--xm-typescale-grid-totals-line-height);
}

.data-table--compact.data-table--dense .data-table__totals .data-table__cell {
  padding-block: var(--s-1-5);
  padding-inline: var(--s-2-5);
}

.data-table--sticky .data-table__totals .data-table__cell {
  position: sticky;
  bottom: 0;
  z-index: 3;
}

.data-table--sticky.data-table--layout
  .data-table__totals
  .data-table__cell--pinned {
  z-index: 4;
}

/* ---------- Overlay scroll rails ----------
   Native bars are suppressed so nothing reserves a band inside the frame. These
   rails are an ADDITIONAL affordance — wheel, trackpad and keyboard scrolling
   are untouched. */
.data-table--rails .data-table__scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.data-table--rails .data-table__scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.data-table__rail {
  position: relative;
  border-radius: var(--xm-shape-corner-dense-xs);
  background: color-mix(
    in oklab,
    var(--md-sys-color-on-surface) 8%,
    transparent
  );
  cursor: pointer;
  touch-action: none;
}

.data-table__rail-thumb {
  position: absolute;
  border-radius: var(--xm-shape-corner-dense-xs);
  background: color-mix(
    in oklab,
    var(--md-sys-color-on-surface) 32%,
    transparent
  );
}

/* The height rail overlays the right edge; the width rail gets its own strip
   under the totals so it never covers a cell. */
.data-table__rail--y {
  position: absolute;
  inset-block: var(--s-1);
  inset-inline-end: var(--s-1);
  inline-size: var(--s-1-5);
  z-index: 6;
}

/* The height rail clears the width-rail strip at the bottom rather than running
   behind it, so the two never read as one broken line. */
.data-table--layout .data-table__rail--y {
  inset-block-start: calc(var(--s-1) + 1px);
  inset-block-end: calc(var(--s-4-5) + 1px);
  inset-inline-end: calc(var(--s-1) + 1px);
  background: color-mix(
    in oklab,
    var(--md-sys-color-on-surface) 7%,
    transparent
  );
}

.data-table__rail--y .data-table__rail-thumb {
  inset-inline: 0;
}

.data-table__rail-strip {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: var(--s-1);
  border-top: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container);
}

.data-table--layout .data-table__rail-strip {
  padding: var(--s-1) calc(var(--s-1) + 1px);
}

.data-table__rail--x {
  flex: 1 1 auto;
  block-size: var(--s-1-5);
}

.data-table--layout .data-table__rail--x {
  margin-inline-end: var(--s-2-5);
  background: color-mix(
    in oklab,
    var(--md-sys-color-on-surface) 9%,
    transparent
  );
}

.data-table--layout .data-table__rail--x .data-table__rail-thumb {
  background: color-mix(
    in oklab,
    var(--md-sys-color-on-surface) 34%,
    transparent
  );
}

.data-table__rail--x .data-table__rail-thumb {
  inset-block: 0;
}

/* Hover-revealed cell affordance (a copy button, a row menu) for `renderCell`
   output. The consumer marks the element `data-table__cell-action`; it stays
   hidden until its cell is hovered or something inside it is focused. Lives in
   the DS because a light-DOM consumer stylesheet cannot cross the shadow
   boundary to style cell content on :hover. */
.data-table__cell-action {
  opacity: 0;
  transition: opacity 0.12s ease;
}
.data-table__cell:hover .data-table__cell-action,
.data-table__cell:focus-within .data-table__cell-action,
.data-table__cell-action:focus-visible {
  opacity: 1;
}
@media (hover: none) {
  .data-table__cell-action {
    opacity: 1;
  }
}

/* Monospace/tabular cells (per-column `mono`) — IDs, hashes, code-like values. */
.data-table__cell--mono {
  font-family: var(--xm-typescale-mono-font);
  font-size: var(--xm-typescale-mono-size);
  font-weight: var(--xm-typescale-mono-weight);
  line-height: var(--xm-typescale-mono-line-height);
  font-variant-numeric: tabular-nums;
}

/* Clickable rows (row-click, AD-15) — keyboard-focusable; pointer + focus ring. */
.data-table__row--clickable {
  cursor: pointer;
}
.data-table__row--clickable:focus-visible {
  outline: none;
  box-shadow: var(--xm-state-focus-ring);
}

.data-table__header-cell--expander,
.data-table__cell--expander {
  width: var(--s-10);
  padding: var(--s-2) 0 var(--s-2) var(--s-2);
  text-align: center;
}

.data-table__expander {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--s-7);
  height: var(--s-7);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  border-radius: var(--md-sys-shape-corner-small);
  cursor: pointer;
}

.data-table__expander:hover {
  background: color-mix(
    in oklab,
    var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity),
    transparent
  );
  color: var(--md-sys-color-on-surface);
}

.data-table__expander:active {
  background: color-mix(
    in oklab,
    var(--md-sys-color-on-surface) var(--md-sys-state-pressed-state-layer-opacity),
    transparent
  );
}

.data-table__expander:focus-visible {
  outline: none;
  box-shadow: var(--xm-state-focus-ring);
}

.data-table__expander-icon {
  display: inline-flex;
  align-items: center;
  transition: transform var(--md-sys-motion-duration-short3)
    var(--md-sys-motion-easing-standard);
}

.data-table__expander--open {
  color: var(--md-sys-color-on-surface);
}

.data-table__expander--open .data-table__expander-icon {
  transform: rotate(90deg);
}

.data-table__row + .data-table__row--detail .data-table__cell {
  border-top: 0;
}

.data-table__detail {
  padding: var(--s-4);
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
}

.data-table--compact .data-table__cell {
  padding-block: var(--s-1-5);
  padding-inline: var(--s-2-5);
}
.data-table--compact .data-table__sort,
.data-table--compact .data-table__header-cell > .data-table__header-label {
  padding-block: var(--s-1-5);
  padding-inline: var(--s-2-5);
}
.data-table--compact .data-table__row--skeleton .data-table__cell {
  padding-block: calc(var(--s-1-5) + 1px);
}

.data-table__bar-cell {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  justify-content: flex-end;
}

.data-table__bar {
  display: block;
  flex: 1 1 auto;
  min-width: 32px;
  max-width: 140px;
  height: 3px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-highest);
  overflow: hidden;
}

.data-table__bar-fill {
  display: block;
  height: 100%;
  inline-size: 0;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-on-surface-variant);
  transition: inline-size var(--md-sys-motion-duration-short4)
    var(--md-sys-motion-easing-standard);
}

.data-table__bar-value {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

/* In a grid the rail runs the full width the column gives it, and squares off:
   at 3px tall a full round cap eats a third of the rail's own length. */
.data-table--layout .data-table__bar-cell {
  gap: var(--s-2-5);
}

.data-table--layout .data-table__bar {
  min-width: var(--s-7);
  max-width: none;
  border-radius: var(--xm-shape-corner-hairline);
}

.data-table--layout .data-table__bar-fill {
  border-radius: var(--xm-shape-corner-hairline);
}

.data-table--layout .data-table__row--group .data-table__bar-fill {
  background: var(--md-sys-color-on-surface);
}

.data-table__row--group .data-table__cell {
  padding: 0;
  background: color-mix(
    in oklab,
    var(--md-sys-color-on-surface) 7%,
    var(--data-table-body)
  );
}

.data-table__row--group:hover .data-table__cell {
  background: color-mix(
    in oklab,
    var(--md-sys-color-on-surface) 12%,
    var(--data-table-body)
  );
}

.data-table__group-header {
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

/* A `row-header` row is the group band worn by a row that still renders its own
   cells (ADR 0041): same surface and the same fold chip, but each cell keeps the
   type its column asked for, because these are values and not aggregates. */
.data-table__row--header .data-table__cell {
  background: color-mix(
    in oklab,
    var(--md-sys-color-on-surface) 7%,
    var(--data-table-body)
  );
  font-weight: 600;
}

.data-table__row--header:hover .data-table__cell {
  background: color-mix(
    in oklab,
    var(--md-sys-color-on-surface) 12%,
    var(--data-table-body)
  );
}

.data-table__row-fold-line {
  display: flex;
  align-items: center;
  gap: calc(var(--s-2) + 1px);
  min-inline-size: 0;
}

.data-table__row-fold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  inline-size: var(--s-6);
  block-size: var(--s-6);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--xm-shape-corner-dense-md);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.data-table__row-fold:hover {
  background: color-mix(
    in oklab,
    var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity),
    transparent
  );
}

.data-table__row-fold:focus-visible {
  outline: none;
  box-shadow: var(--xm-state-focus-ring);
}

.data-table__row-fold .data-table__group-twisty {
  inline-size: var(--s-5);
  block-size: var(--s-5);
  font-size: 12px;
}

.data-table--compact .data-table__row-fold {
  inline-size: var(--s-5);
  block-size: var(--s-5);
}

.data-table--compact .data-table__row-fold .data-table__group-twisty {
  inline-size: var(--s-4);
  block-size: var(--s-4);
  font-size: 10px;
}

.data-table__row--group + .data-table__row:not(.data-table__row--group) .data-table__cell {
  border-top: 0;
}

.data-table__group-toggle {
  display: flex;
  align-items: center;
  gap: var(--s-2-5);
  box-sizing: border-box;
  width: 100%;
  padding: var(--s-2-5) var(--s-3-5);
  border: 0;
  background: transparent;
  color: var(--md-sys-color-on-surface);
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  text-align: start;
  cursor: pointer;
}

.data-table--compact .data-table__group-toggle {
  padding-block: var(--s-1-5);
  padding-inline: var(--s-2-5);
}

.data-table__group-toggle:hover {
  background: color-mix(
    in oklab,
    var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity),
    transparent
  );
}

.data-table__group-toggle:focus-visible {
  outline: none;
  box-shadow: var(--xm-state-focus-ring);
}

.data-table__group-chevron {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--md-sys-color-on-surface-variant);
  transition: transform var(--md-sys-motion-duration-short3)
    var(--md-sys-motion-easing-standard);
}

.data-table__group-chevron--open {
  transform: rotate(90deg);
}

.data-table__group-name {
  font-weight: 600;
  white-space: nowrap;
}

.data-table__group-meta {
  flex-shrink: 0;
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--xm-typescale-mono-font);
  font-size: var(--md-sys-typescale-label-medium-size);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.data-table__group-total {
  margin-inline-start: auto;
  flex-shrink: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.data-table__group-toggle .data-table__bar-fill {
  background: var(--md-sys-color-primary);
}

.data-table__group-header.data-table__cell--end {
  padding: var(--s-2-5) var(--s-3-5);
  font-weight: 600;
}

.data-table--compact .data-table__group-header.data-table__cell--end {
  padding-block: var(--s-1-5);
  padding-inline: var(--s-2-5);
}

/* A group row answers the same numeric question the totals footer does, so its
   aggregates are set in the same tabular mono — only the label is prose. */
.data-table--layout .data-table__row--group .data-table__cell {
  padding: calc(var(--s-2-5) + 1px) var(--s-3-5);
  vertical-align: middle;
  border-top: 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  font-family: var(--xm-typescale-grid-mono-font);
  font-size: var(--xm-typescale-grid-mono-size);
  font-weight: 600;
  line-height: var(--xm-typescale-grid-mono-line-height);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

/* The magnitude column states a share, not a total: it reads as a figure beside
   its rail rather than as an aggregate, so it keeps the body type. */
.data-table--layout .data-table__row--group .data-table__cell--bar {
  font-family: var(--xm-typescale-grid-cell-font);
  font-size: var(--xm-typescale-grid-cell-size);
  font-weight: var(--xm-typescale-grid-cell-weight);
}

.data-table--compact.data-table--layout .data-table__row--group .data-table__cell {
  padding-block: calc(var(--s-1-5) + 1px);
  padding-inline: var(--s-2-5);
}

.data-table--layout .data-table__row--group .data-table__group-header--label {
  padding: 0;
}

.data-table--layout .data-table__group-header--label .data-table__group-toggle {
  gap: calc(var(--s-2) + 1px);
  padding: calc(var(--s-2-5) + 1px) var(--s-3-5);
  font-family: var(--xm-typescale-grid-cell-font);
  font-size: var(--xm-typescale-grid-cell-size);
  font-weight: 600;
  line-height: var(--xm-typescale-grid-cell-line-height);
  font-variant-numeric: tabular-nums;
}

.data-table--layout .data-table__row--group .data-table__group-meta {
  color: var(--xm-color-on-surface-soft);
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
}

.data-table--compact.data-table--layout
  .data-table__group-header--label
  .data-table__group-toggle {
  gap: calc(var(--s-1-5) + 1px);
  padding-block: calc(var(--s-1-5) + 1px);
  padding-inline: var(--s-2-5);
}

.data-table__group-twisty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  inline-size: 17px;
  block-size: 17px;
  border-radius: var(--xm-shape-corner-dense-sm);
  background: color-mix(
    in oklab,
    var(--md-sys-color-on-surface) 10%,
    transparent
  );
  color: var(--md-sys-color-on-surface);
  font-family: var(--xm-typescale-mono-font);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
}

.data-table--compact .data-table__group-twisty {
  inline-size: 15px;
  block-size: 15px;
  font-size: 9px;
}

.data-table__header-cell--actions,
.data-table__cell--actions {
  width: 1%;
  white-space: nowrap;
  text-align: end;
}

.data-table__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short3)
    var(--md-sys-motion-easing-standard);
}

.data-table__row:hover .data-table__actions,
.data-table__row:focus-within .data-table__actions,
.data-table__cell--actions-always .data-table__actions {
  opacity: 1;
}

@media (hover: none) {
  .data-table__actions {
    opacity: 1;
  }
}

.data-table__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Numeric — right-aligned, tabular figures so digits line up; the unit carries
   a space in the value ("412 KB"). Matches xm-table (NFR-22 / UX-DR4). */
.data-table__header-cell--end,
.data-table__cell--end {
  text-align: end;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.data-table__row:not(.data-table__row--skeleton):not(.data-table__row--detail):not(
    .data-table__row--group
  ):hover
  .data-table__cell {
  background: color-mix(
    in oklab,
    var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity),
    transparent
  );
}

/* Opaque cells need an opaque hover: a translucent state layer over a painted
   cell would show the frame through it instead of lifting the row. The mix is
   lighter than the canonical 8% because a dense grid row is a smaller target
   and reads louder at the same value. */
.data-table--layout
  .data-table__row:not(.data-table__row--skeleton):not(.data-table__row--detail):not(
    .data-table__row--group
  ):hover
  .data-table__cell {
  background: color-mix(
    in oklab,
    var(--md-sys-color-on-surface) 5%,
    var(--data-table-body)
  );
}

/* Loading rows host composed <xm-skeleton> lines on the same column grid; the
   skeleton owns the gradient-free pulse (AD-12). No row hover under load. */
.data-table__row--skeleton .data-table__cell {
  padding-block: calc(var(--s-2-5) + 1px);
}

.data-table__empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  min-block-size: var(--data-table-empty-min, 240px);
  text-align: center;
}

.data-table__empty xm-empty-state {
  padding: var(--s-8) var(--s-4);
}

.data-table--dense .data-table__empty {
  background: var(--md-sys-color-surface-container-lowest);
}

/* Footer carries the composed <xm-pagination>, right-aligned under the grid. */
.data-table__footer {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--s-3);
}