nexus-shared 3.2.0 → 4.1.0

package/src/Styles/Nexus.Table.css

@@ -1,1387 +1,1458 @@
-@layer nexus.components {
-  /*
-   * Data table: a bar (tabs, search, buttons), a frame holding the table (a header that stays while rows scroll, a
-   * checkbox column on the left and the actions on the right that stay while columns scroll), and a footer with the
-   * range and the pager. While rows are selected, a bar with their actions covers the column headings.
-   */
-  .nx-table {
-    --nx-table-bg: var(--nx-surface);
-    --nx-table-head-bg: color-mix(in oklab, var(--nx-text) 4%, var(--nx-surface));
-    --nx-table-hover: color-mix(in oklab, var(--nx-text) 3%, var(--nx-surface));
-    --nx-table-selected: color-mix(in oklab, var(--nx-primary) 11%, var(--nx-surface));
-    --nx-table-selected-hover: color-mix(in oklab, var(--nx-primary) 16%, var(--nx-surface));
-    --nx-table-flash: color-mix(in oklab, var(--nx-success) 18%, var(--nx-surface));
-    --nx-table-line: var(--nx-border);
-    --nx-table-head-h: calc(var(--nx-row) + 8px);
-    /* The band of group headings above the columns' own, when any column names a group. */
-    --nx-table-group-h: 30px;
-    /* How many rows the header has: 1, or 2 while a band stands above the headings (`data-head-rows`). */
-    --nx-table-head-rows: 1;
-    /* The whole header, which the loading bar and the selection bar are measured from. */
-    --nx-table-head-all: calc(var(--nx-table-head-h) + (var(--nx-table-head-rows) - 1) * var(--nx-table-group-h));
-    --nx-table-row-h: calc(var(--nx-row) + 12px);
-    --nx-table-pad-x: 12px;
-    --nx-table-select-w: 44px;
-    --nx-table-font: var(--nx-text-md);
-    --nx-table-edge: light-dark(rgb(16 24 40 / 0.14), rgb(0 0 0 / 0.55));
-
-    container: nx-table / inline-size;
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-    overflow: clip;
-    /* One frame round the bar, the rows and the footer. */
-    border: 1px solid var(--nx-table-line);
-    border-radius: var(--nx-radius-lg);
-    background: var(--nx-table-bg);
-    box-shadow: var(--nx-shadow-sm);
-    color: var(--nx-text);
-  }
-
-  .nx-table[data-head-rows="2"] {
-    --nx-table-head-rows: 2;
-  }
-
-  .nx-table--sm {
-    --nx-table-head-h: calc(var(--nx-row) + 2px);
-    --nx-table-group-h: 26px;
-    --nx-table-row-h: calc(var(--nx-row) + 4px);
-    --nx-table-pad-x: 10px;
-    --nx-table-select-w: 38px;
-    --nx-table-font: var(--nx-text-sm);
-  }
-
-  /*
-   * The bar, and a line under it. One line on a wide table: the Add section (the table's Add and the page's own
-   * buttons) and the lists on the left; Reload, the options (⋮) and the search, rows per page inside it, on the right.
-   * A narrower table moves whole parts onto lines of their own, never a lone item: the search takes the top line
-   * under 670px (with nothing on the left, the buttons' line), Reload goes into the options menu under 375px, and,
-   * beside lists, the Add section takes the last line under 325px. On the admin shell, whose menu leaves the screen
-   * at 900px, those are windows of 695, 400 and 350px. The lists show their labels from 900px (TabButtons
-   * `labels="auto"`), where the line holds them with room to spare.
-   */
-  .nx-table__bar {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--nx-space-2);
-    margin: 6px var(--nx-space-2);
-  }
-
-  .nx-table__bar:not(:has(:not(.nx-table__bar-end):not(:empty))) {
-    display: none;
-  }
-
-  .nx-table__bar:has(:not(.nx-table__bar-end):not(:empty)) + .nx-table__frame {
-    border-top: 1px solid var(--nx-table-line);
-  }
-
-  .nx-table__bar-add,
-  .nx-table__bar-start,
-  .nx-table__bar-end {
-    display: flex;
-    align-items: center;
-    gap: var(--nx-space-2);
-    min-width: 0;
-  }
-
-  /* A page's own tabs and filters may run long: they wrap inside their part. */
-  .nx-table__bar-start {
-    flex-wrap: wrap;
-  }
-
-  /* A part whose page content renders nothing (an empty fragment) is no part: no room, no gap, no step. */
-  .nx-table__bar-add:empty,
-  .nx-table__bar-start:empty {
-    display: none;
-  }
-
-  /* The right side takes the room left on its line, so it ends at the bar's end. */
-  .nx-table__bar-end {
-    margin-inline-start: auto;
-  }
-
-  /* 19rem where there is room. A line breaks on the 12rem basis, so the search narrows before the bar takes a line. */
-  .nx-table__search {
-    flex: 1 1 12rem;
-    min-width: 0;
-    max-width: 19rem;
-  }
-
-  /* Rows per page inside the search box, at its start, with a line between the two. */
-  .nx-table__search .nx-field__actions--start {
-    align-self: stretch;
-    padding-right: 0;
-    padding-left: 2px;
-    border-right: 1px solid var(--nx-field-border);
-  }
-
-  .nx-table__page-size--field.nx-btn {
-    min-width: 0;
-    height: calc(var(--nx-field-height) - 8px);
-    gap: 0;
-    padding: 0 2px 0 4px;
-    color: var(--nx-text-muted);
-    font-variant-numeric: tabular-nums;
-  }
-
-  .nx-table__page-size--field .nx-icon {
-    width: 14px;
-    height: 14px;
-  }
-
-  .nx-table__page-size--field:hover {
-    color: var(--nx-text);
-  }
-
-  /* The search comes first and takes the room: the top line beside an Add section or lists, else the buttons' line. */
-  @container nx-table (width < 670px) {
-    .nx-table__search {
-      order: -1;
-      max-width: none;
-    }
-
-    .nx-table__bar:has(> :is(.nx-table__bar-add, .nx-table__bar-start):not(:empty)) > .nx-table__search {
-      flex-basis: 100%;
-    }
-  }
-
-  /* DataTable reads this to offer Reload in the options menu. */
-  @container nx-table (width < 375px) {
-    .nx-table__reload {
-      display: none;
-    }
-  }
-
-  /*
-   * Beside lists, the Add section goes last and takes its line. Its buttons share it equally (the Add is a `block`
-   * button, so its label stays centred), or each takes a line of its own when they do not fit side by side.
-   */
-  @container nx-table (width < 325px) {
-    .nx-table__bar:has(> .nx-table__bar-start:not(:empty)) > .nx-table__bar-add {
-      flex-basis: 100%;
-      flex-wrap: wrap;
-      order: 1;
-    }
-
-    .nx-table__bar:has(> .nx-table__bar-start:not(:empty)) > .nx-table__bar-add > * {
-      flex: 1 1 0;
-    }
-  }
-
-  /*
-   * The same steps for a bar whose parts are wider than the widths above expect (a long Add label, the page's own
-   * buttons, cozy density): DataTable squeezes it (`data-squeeze`) one step at a time, each keeping the ones before.
-   */
-  .nx-table__bar[data-squeeze] > .nx-table__search {
-    order: -1;
-    max-width: none;
-  }
-
-  .nx-table__bar[data-squeeze]:has(> :is(.nx-table__bar-add, .nx-table__bar-start):not(:empty)) > .nx-table__search {
-    flex-basis: 100%;
-  }
-
-  .nx-table__bar[data-squeeze~="reload"] .nx-table__reload {
-    display: none;
-  }
-
-  .nx-table__bar[data-squeeze~="add"] > .nx-table__bar-add {
-    flex-basis: 100%;
-    flex-wrap: wrap;
-    order: 1;
-  }
-
-  .nx-table__bar[data-squeeze~="add"] > .nx-table__bar-add > * {
-    flex: 1 1 0;
-  }
-
-  /*
-   * `fill`: the table takes the height it is given instead of growing with its rows. The bar and the footer keep their
-   * own height, the frame takes the rest, and the rows scroll inside it. Nothing below the table moves when a page
-   * holds fewer rows, and the page behind it never gains a scrollbar.
-   */
-  .nx-table--fill {
-    height: 100%;
-    min-height: 0;
-  }
-
-  .nx-table--fill > .nx-table__frame {
-    display: flex;
-    flex: 1 1 auto;
-    flex-direction: column;
-    min-height: 0;
-  }
-
-  .nx-table--fill .nx-table__scroll {
-    flex: 1 1 auto;
-    min-height: 0;
-    /* The room for the scrollbar is kept, so the headings do not shift the moment the rows need one. */
-    scrollbar-gutter: stable;
-  }
-
-  /* The rows' part of the frame: the selection bar and the loading bar are placed in it. */
-  .nx-table__frame {
-    position: relative;
-    min-width: 0;
-    overflow: hidden;
-  }
-
-  .nx-table__scroll {
-    overflow: auto;
-    overscroll-behavior-x: contain;
-    scrollbar-width: thin;
-    scrollbar-color: color-mix(in oklab, var(--nx-text-subtle) 75%, transparent) transparent;
-  }
-
-  .nx-table__table {
-    width: 100%;
-    border-collapse: separate;
-    border-spacing: 0;
-    font-size: var(--nx-table-font);
-    line-height: 1.45;
-  }
-
-  /* Cells */
-  .nx-table__cell,
-  .nx-table__heading {
-    box-sizing: border-box;
-    padding: 4px var(--nx-table-pad-x);
-    text-align: start;
-    vertical-align: middle;
-  }
-
-  .nx-table__cell {
-    height: var(--nx-table-row-h);
-    border-bottom: 1px solid var(--nx-table-line);
-    background: var(--nx-row-bg);
-  }
-
-  .nx-table__row {
-    --nx-row-bg: var(--nx-table-bg);
-  }
-
-  /* The last row's line would double the frame. */
-  .nx-table__row:last-child > .nx-table__cell {
-    border-bottom: 0;
-  }
-
-  .nx-table__row:not(.nx-table__row--message, .nx-table__row--skeleton):hover {
-    --nx-row-bg: var(--nx-table-hover);
-  }
-
-  /* A row a click opens says so under the pointer. Only the pointer changes: nothing in the row moves on hover. */
-  .nx-table__row[data-open] {
-    cursor: pointer;
-  }
-
-  .nx-table__row[data-selected] {
-    --nx-row-bg: var(--nx-table-selected);
-  }
-
-  .nx-table__row[data-selected]:hover {
-    --nx-row-bg: var(--nx-table-selected-hover);
-  }
-
-  /* Muted text on a selected row's tint moves toward the text color, so it keeps 4.5:1 in every theme. */
-  .nx-table__row[data-selected] :is(.nx-table__number, .nx-table__dash, .nx-table__no) {
-    color: color-mix(in oklab, var(--nx-text-muted), var(--nx-text) 45%);
-  }
-
-  /* Columns scroll under the pinned ones: a soft shadow shows there is more on that side. */
-  .nx-table__frame[data-scroll-start] {
-    --nx-table-start-edge: 8px 0 8px -8px var(--nx-table-edge);
-  }
-
-  .nx-table__frame[data-scroll-end] {
-    --nx-table-end-edge: -8px 0 8px -8px var(--nx-table-edge);
-  }
-
-  .nx-table__row[data-busy] > .nx-table__cell:not(.nx-table__cell--actions) {
-    color: var(--nx-text-muted);
-  }
-
-  /* A row just added or saved: a green wash that fades (a steady one with reduced motion, until the mark goes). */
-  .nx-table__row[data-flash] > .nx-table__cell {
-    animation: nx-table-flash 1600ms ease-out;
-  }
-
-  @keyframes nx-table-flash {
-    from {
-      background-color: var(--nx-table-flash);
-    }
-  }
-
-  .nx-table__cell--start {
-    text-align: start;
-  }
-
-  .nx-table__cell--center {
-    text-align: center;
-  }
-
-  .nx-table__cell--end {
-    text-align: end;
-    font-variant-numeric: tabular-nums;
-  }
-
-  /* A value ends in "…" at the column's width (24rem when the column sets none). */
-  .nx-table__value {
-    display: block;
-    max-width: var(--nx-col-max, 24rem);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .nx-table__cell--wrap .nx-table__value {
-    max-width: var(--nx-col-max, 32rem);
-    white-space: normal;
-    overflow-wrap: anywhere;
-  }
-
-  .nx-table__cell--end .nx-table__value {
-    margin-left: auto;
-  }
-
-  .nx-table__cell--center .nx-table__value {
-    margin-inline: auto;
-  }
-
-  /*
-   * Pinned columns stay while the others scroll: the numbers and checkbox column and the actions always, and
-   * any column the user pins from its menu. Their distance from the edge is measured from the headings before them.
-   */
-  .nx-table__cell[data-pin],
-  .nx-table__heading[data-pin] {
-    position: sticky;
-    z-index: 1;
-    background: var(--nx-row-bg);
-  }
-
-  .nx-table__heading[data-pin] {
-    z-index: 3;
-    background: var(--nx-table-head-bg);
-  }
-
-  /* The last pinned column of a side carries the shadow the others scroll under. */
-  .nx-table__cell[data-pin="left"][data-pin-edge],
-  .nx-table__heading[data-pin="left"][data-pin-edge] {
-    box-shadow: var(--nx-table-start-edge, 0 0 #0000);
-  }
-
-  .nx-table__cell[data-pin="right"][data-pin-edge],
-  .nx-table__heading[data-pin="right"][data-pin-edge] {
-    box-shadow: var(--nx-table-end-edge, 0 0 #0000);
-  }
-
-  /* The first column: the row's number, with its checkbox in the same place. */
-  .nx-table__cell--index {
-    width: var(--nx-table-select-w);
-    min-width: var(--nx-table-select-w);
-    padding: 0;
-    text-align: center;
-  }
-
-  .nx-table__number {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    color: var(--nx-text-muted);
-    font-size: var(--nx-text-xs);
-    font-variant-numeric: tabular-nums;
-    font-weight: 500;
-  }
-
-  .nx-table__check {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    min-height: 28px;
-  }
-
-  .nx-table__check .nx-choice__control {
-    margin: 0;
-  }
-
-  /* Both in the one cell: the number, until the row is under the pointer or anything is selected. */
-  .nx-table__cell--index[data-swap] > .nx-table__number,
-  .nx-table__cell--index[data-swap] > .nx-table__check {
-    position: absolute;
-    inset: 0;
-    width: auto;
-    transition: opacity var(--nx-duration);
-  }
-
-  .nx-table__cell--index[data-swap] > .nx-table__check {
-    opacity: 0;
-  }
-
-  .nx-table__row:hover > .nx-table__cell--index[data-swap] > .nx-table__check,
-  /* The heading's own cell may stand in the band row, so the whole header counts as hovering it. */
-  .nx-table__thead:hover .nx-table__cell--index[data-swap] > .nx-table__check,
-  .nx-table__cell--index[data-swap]:focus-within > .nx-table__check,
-  .nx-table[data-selecting] .nx-table__cell--index[data-swap] > .nx-table__check {
-    opacity: 1;
-  }
-
-  .nx-table__row:hover > .nx-table__cell--index[data-swap] > .nx-table__number,
-  .nx-table__thead:hover .nx-table__cell--index[data-swap] > .nx-table__number,
-  .nx-table__cell--index[data-swap]:focus-within > .nx-table__number,
-  .nx-table[data-selecting] .nx-table__cell--index[data-swap] > .nx-table__number {
-    opacity: 0;
-  }
-
-  /* A touch screen has no pointer to hover with, so the checkbox stays. */
-  @media (hover: none) {
-    .nx-table__cell--index[data-swap] > .nx-table__check {
-      opacity: 1;
-    }
-
-    .nx-table__cell--index[data-swap] > .nx-table__number {
-      opacity: 0;
-    }
-  }
-
-  /*
-   * The sections above the page: a row across the table whose button folds a set of the user's records open and shut -
-   * the ones they pinned, their favourites - and the rows themselves, which show in the list below as well. A section's
-   * row wears the section's icon where the rows of the page show their number.
-   */
-  .nx-table__section-cell {
-    padding: 0;
-    border-bottom: 1px solid var(--nx-table-line);
-    background: var(--nx-table-head-bg);
-  }
-
-  .nx-table__section-toggle {
-    display: flex;
-    align-items: center;
-    gap: var(--nx-space-2);
-    width: 100%;
-    min-height: var(--nx-table-head-h);
-    padding: 0 var(--nx-table-pad-x);
-    border: 0;
-    background: none;
-    color: var(--nx-text);
-    font: inherit;
-    font-size: var(--nx-table-font);
-    font-weight: 600;
-    text-align: start;
-    cursor: pointer;
-    transition: background-color var(--nx-duration);
-  }
-
-  .nx-table__section-toggle:hover {
-    background: color-mix(in oklab, var(--nx-text) 5%, transparent);
-  }
-
-  .nx-table__section-toggle:focus-visible {
-    outline: none;
-    box-shadow: inset 0 0 0 2px var(--nx-primary);
-  }
-
-  .nx-table__section-caret,
-  .nx-table__section-icon,
-  .nx-table__mark {
-    flex-shrink: 0;
-    width: 15px;
-    height: 15px;
-    color: var(--nx-text-muted);
-  }
-
-  /* A row's marks, where its number would be: one under the other, in the line a single mark takes. */
-  .nx-table__marks {
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 2px;
-  }
-
-  .nx-table__section-caret {
-    transition: transform var(--nx-duration);
-  }
-
-  .nx-table__section[data-open] .nx-table__section-caret {
-    transform: rotate(90deg);
-  }
-
-  .nx-table__section-count {
-    color: var(--nx-text-muted);
-    font-weight: 400;
-    font-variant-numeric: tabular-nums;
-  }
-
-  .nx-table__section-loading {
-    width: 14px;
-    height: 14px;
-    color: var(--nx-text-muted);
-  }
-
-  [data-nx-motion="reduce"] .nx-table__section-caret,
-  [data-nx-motion="reduce"] .nx-table__section-toggle {
-    transition: none;
-  }
-
-  .nx-table__cell--actions {
-    width: 1px;
-    padding-inline: 4px 8px;
-    white-space: nowrap;
-  }
-
-  /*
-   * Once the user has given a column a width, the table lays its columns out from the list of widths, so dragging one
-   * edge moves that edge only. The filler column takes whatever space the others leave.
-   */
-  .nx-table[data-sized] .nx-table__table {
-    table-layout: fixed;
-  }
-
-  .nx-table__cell--filler {
-    padding: 0;
-    background: var(--nx-row-bg);
-  }
-
-  .nx-table__heading.nx-table__cell--filler {
-    background: var(--nx-table-head-bg);
-  }
-
-  .nx-table__actions {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 2px;
-  }
-
-  /* Header: stays at the top while rows scroll. */
-  .nx-table__heading {
-    position: sticky;
-    top: 0;
-    z-index: 2;
-    height: var(--nx-table-head-h);
-    border-bottom: 1px solid var(--nx-table-line);
-    background: var(--nx-table-head-bg);
-    color: var(--nx-text);
-    font-size: var(--nx-text-xs);
-    font-weight: 650;
-    white-space: nowrap;
-  }
-
-  /* A heading that holds the sort button, the column's menu, and the edge to drag keeps no padding of its own. */
-  .nx-table__heading:has(> .nx-table__heading-inner) {
-    padding: 0;
-  }
-
-  /*
-   * Columns in bands: a group's heading spans the columns next to each other that name it, and the columns with no
-   * group keep one heading as tall as both rows. Both rows stay while the rows scroll, the band on top.
-   */
-  .nx-table__head--leaves > .nx-table__heading {
-    top: var(--nx-table-group-h);
-  }
-
-  .nx-table__heading--group {
-    height: var(--nx-table-group-h);
-    border-bottom: 0;
-    text-align: center;
-  }
-
-  /* The line under a band stops short of its edges, so two bands beside each other read as two, not as one rule. */
-  .nx-table__heading--group::after {
-    content: "";
-    position: absolute;
-    right: var(--nx-table-pad-x);
-    bottom: 0;
-    left: var(--nx-table-pad-x);
-    height: 1px;
-    background: var(--nx-table-line);
-  }
-
-  .nx-table__group {
-    display: block;
-    overflow: hidden;
-    color: var(--nx-text);
-    font-size: var(--nx-text-xs);
-    font-weight: 700;
-    letter-spacing: 0.04em;
-    text-overflow: ellipsis;
-    text-transform: uppercase;
-  }
-
-  .nx-table__heading-inner {
-    display: flex;
-    align-items: center;
-    min-width: 0;
-    height: 100%;
-  }
-
-  .nx-table__heading-label {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .nx-table__heading-inner > .nx-table__heading-label {
-    flex: 1 1 auto;
-    padding: 0 var(--nx-table-pad-x);
-  }
-
-  /* A sortable heading is one button across its cell, beside the column's menu. */
-  .nx-table__sort {
-    display: flex;
-    flex: 1 1 auto;
-    align-items: center;
-    gap: 6px;
-    min-width: 0;
-    height: 100%;
-    padding: 0 4px 0 var(--nx-table-pad-x);
-    border: 0;
-    background: transparent;
-    color: inherit;
-    font: inherit;
-    text-align: inherit;
-    cursor: pointer;
-    transition: background-color var(--nx-duration);
-  }
-
-  .nx-table__cell--end .nx-table__sort {
-    flex-direction: row-reverse;
-    padding: 0 var(--nx-table-pad-x) 0 4px;
-  }
-
-  .nx-table__cell--center .nx-table__sort {
-    justify-content: center;
-  }
-
-  /* The column's menu (pin, move, fit, hide): at the end of the heading, and shown while it is hovered or focused. */
-  .nx-table__col-menu.nx-btn {
-    flex: 0 0 auto;
-    width: 20px;
-    min-width: 20px;
-    height: calc(var(--nx-table-head-h) - 12px);
-    margin-right: 2px;
-    padding: 0;
-    border-radius: var(--nx-radius-sm);
-    opacity: 0;
-    transition: opacity var(--nx-duration);
-  }
-
-  .nx-table__col-menu .nx-icon {
-    width: 14px;
-    height: 14px;
-  }
-
-  .nx-table__heading:hover .nx-table__col-menu,
-  .nx-table__col-menu:is(:focus, :focus-visible),
-  .nx-table__col-menu[aria-expanded="true"] {
-    opacity: 1;
-  }
-
-  @media (hover: none) {
-    .nx-table__col-menu.nx-btn {
-      opacity: 1;
-    }
-  }
-
-  /* The edge of a heading: drag it for the column's width, double-click it to fit the content. */
-  .nx-table__resizer {
-    position: absolute;
-    top: 0;
-    right: -2px;
-    z-index: 4;
-    width: 8px;
-    height: 100%;
-    touch-action: none;
-    cursor: col-resize;
-  }
-
-  .nx-table__resizer::after {
-    content: "";
-    position: absolute;
-    top: 7px;
-    bottom: 7px;
-    left: 3px;
-    width: 2px;
-    border-radius: 1px;
-    background: transparent;
-    transition: background-color var(--nx-duration);
-  }
-
-  .nx-table__heading:hover > .nx-table__resizer::after,
-  .nx-table__resizer[data-active]::after {
-    background: var(--nx-primary);
-  }
-
-  .nx-table__resizer[data-active]::after {
-    top: 0;
-    bottom: 0;
-  }
-
-  /* Dragging a heading to another place: the heading being moved, and a line where it will land. */
-  .nx-table__heading[data-dragging] {
-    background: color-mix(in oklab, var(--nx-primary) 14%, var(--nx-table-head-bg));
-  }
-
-  .nx-table__heading[data-drop-before]::before,
-  .nx-table__heading[data-drop-after]::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    z-index: 5;
-    width: 2px;
-    background: var(--nx-primary);
-  }
-
-  .nx-table__heading[data-drop-before]::before {
-    left: 0;
-  }
-
-  .nx-table__heading[data-drop-after]::after {
-    right: 0;
-  }
-
-  .nx-table[data-col-drag] .nx-table__head {
-    user-select: none;
-  }
-
-  .nx-table[data-col-drag] :is(.nx-table__heading, .nx-table__sort, .nx-table__col-menu, .nx-table__resizer) {
-    cursor: grabbing;
-  }
-
-  .nx-table[data-col-resize] :is(.nx-table__heading, .nx-table__sort, .nx-table__cell) {
-    cursor: col-resize;
-  }
-
-  .nx-table__sort:hover:not(:disabled) {
-    background: color-mix(in oklab, var(--nx-text) 5%, transparent);
-  }
-
-  .nx-table__sort:focus-visible {
-    outline: none;
-    box-shadow: inset 0 0 0 2px var(--nx-primary);
-  }
-
-  .nx-table__sort:disabled {
-    cursor: default;
-  }
-
-  .nx-table__sort-icon {
-    flex-shrink: 0;
-    width: 14px;
-    height: 14px;
-    color: var(--nx-text-muted);
-    opacity: 0;
-    transition: opacity var(--nx-duration);
-  }
-
-  .nx-table__sort[data-sorted] .nx-table__sort-icon {
-    color: var(--nx-text);
-    opacity: 1;
-  }
-
-  .nx-table__sort:is(:hover, :focus-visible):not(:disabled) .nx-table__sort-icon {
-    opacity: 1;
-  }
-
-  @media (hover: none) {
-    .nx-table__sort:not(:disabled) .nx-table__sort-icon {
-      opacity: 0.7;
-    }
-  }
-
-  /* Values */
-  .nx-table__dash,
-  .nx-table__no {
-    color: var(--nx-text-muted);
-  }
-
-  .nx-table__yes {
-    display: inline-flex;
-    color: var(--nx-success);
-  }
-
-  .nx-table__yes .nx-icon {
-    width: 16px;
-    height: 16px;
-  }
-
-  /* An option with a tone: a tag with a dot of its color; the text keeps the text color, readable on every tint. */
-  .nx-table__tag {
-    --nx-tag-tone: var(--nx-text-muted);
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    max-width: 100%;
-    padding: 1px 8px;
-    border-radius: var(--nx-radius-full);
-    background: color-mix(in oklab, var(--nx-tag-tone) 14%, var(--nx-surface));
-    color: var(--nx-text);
-    font-size: var(--nx-text-xs);
-    font-weight: 500;
-    line-height: 1.6;
-    vertical-align: middle;
-  }
-
-  .nx-table__tag::before {
-    content: "";
-    flex-shrink: 0;
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: var(--nx-tag-tone);
-  }
-
-  .nx-table__tag[data-tone="primary"] {
-    --nx-tag-tone: var(--nx-primary);
-  }
-
-  .nx-table__tag[data-tone="success"] {
-    --nx-tag-tone: var(--nx-success);
-  }
-
-  .nx-table__tag[data-tone="warning"] {
-    --nx-tag-tone: var(--nx-warning);
-  }
-
-  .nx-table__tag[data-tone="danger"] {
-    --nx-tag-tone: var(--nx-danger);
-  }
-
-  .nx-table__tag[data-tone="info"] {
-    --nx-tag-tone: var(--nx-info);
-  }
-
-  /* A tag after a value (a column's `tag`): "Asia" then "Trashed", a word's space apart. */
-  .nx-table__tag--after {
-    margin-inline-start: var(--nx-space-2);
-  }
-
-  /* Placeholders while the first rows load. */
-  .nx-table__bone {
-    display: block;
-    height: 0.75em;
-    border-radius: var(--nx-radius-sm);
-    background: color-mix(in oklab, var(--nx-text) 9%, transparent);
-    animation: nx-table-pulse 1.6s ease-in-out infinite;
-  }
-
-  .nx-table__cell--end .nx-table__bone {
-    margin-left: auto;
-  }
-
-  @keyframes nx-table-pulse {
-    50% {
-      opacity: 0.45;
-    }
-  }
-
-  /* A message across the table: no rows, no matches, a failed load. */
-  .nx-table__message-cell {
-    padding: 0;
-    background: var(--nx-table-bg);
-  }
-
-  .nx-table__message {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 4px;
-    padding: 40px var(--nx-space-4);
-    text-align: center;
-  }
-
-  .nx-table__message-icon {
-    width: 28px;
-    height: 28px;
-    margin-bottom: 6px;
-    color: var(--nx-text-muted);
-  }
-
-  .nx-table__message[data-tone="danger"] .nx-table__message-icon {
-    color: var(--nx-danger);
-  }
-
-  .nx-table__message-title {
-    margin: 0;
-    font-size: var(--nx-text-md);
-    font-weight: 600;
-  }
-
-  .nx-table__message-detail {
-    max-width: 36rem;
-    margin: 0;
-    color: var(--nx-text-muted);
-    font-size: var(--nx-text-sm);
-  }
-
-  .nx-table__message-actions {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: var(--nx-space-2);
-    margin-top: var(--nx-space-3);
-  }
-
-  /* A thin bar under the header while a load runs with rows on screen. The rows dim only if it takes a moment. */
-  .nx-table__progress {
-    position: absolute;
-    top: calc(var(--nx-table-head-all) - 1px);
-    right: 0;
-    left: 0;
-    z-index: 4;
-    height: 2px;
-    overflow: hidden;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity var(--nx-duration);
-  }
-
-  .nx-table__progress::before {
-    content: "";
-    position: absolute;
-    inset: 0 auto 0 0;
-    width: 35%;
-    background: var(--nx-primary);
-    animation: nx-table-progress 1.1s ease-in-out infinite;
-  }
-
-  @keyframes nx-table-progress {
-    from {
-      transform: translateX(-100%);
-    }
-    to {
-      transform: translateX(290%);
-    }
-  }
-
-  .nx-table[data-refreshing] .nx-table__progress {
-    opacity: 1;
-  }
-
-  .nx-table__table > tbody {
-    transition: opacity var(--nx-duration);
-  }
-
-  .nx-table[data-refreshing] .nx-table__table > tbody {
-    opacity: 0.55;
-    transition-delay: 180ms;
-  }
-
-  /* The selection bar covers the column headings, so the table does not move when it shows. */
-  .nx-table__selection {
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: var(--nx-table-index-w, var(--nx-table-select-w));
-    z-index: 5;
-    display: flex;
-    align-items: center;
-    gap: var(--nx-space-2);
-    height: calc(var(--nx-table-head-all) - 1px);
-    padding: 0 var(--nx-space-2) 0 2px;
-    background: var(--nx-table-selected);
-  }
-
-  .nx-table__frame:has(.nx-table__selection) .nx-table__heading.nx-table__cell--index {
-    background: var(--nx-table-selected);
-  }
-
-  .nx-table__selection-count {
-    flex-shrink: 0;
-    padding-right: var(--nx-space-2);
-    font-size: var(--nx-text-sm);
-    font-weight: 600;
-    font-variant-numeric: tabular-nums;
-    white-space: nowrap;
-  }
-
-  /* With ways to select by what the rows are, the count is the button that opens them. */
-  .nx-table__selection-pick .nx-table__selection-count {
-    padding-right: 0;
-  }
-
-  .nx-table__selection-actions {
-    display: flex;
-    flex: 1 1 auto;
-    align-items: center;
-    gap: 2px;
-    min-width: 0;
-    overflow: hidden;
-  }
-
-  /* Every action on the selected rows in one split button: the name of the one shown must stay readable. */
-  .nx-table__mass {
-    min-width: 0;
-  }
-
-  .nx-table__mass .nx-btn__label,
-  .nx-table__mass .nx-split__main .nx-btn__label {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .nx-table__selection-clear {
-    flex-shrink: 0;
-    margin-left: auto;
-  }
-
-  /* A narrow table keeps the action's name and drops the word "Clear"; it stays for screen readers and in the tooltip. */
-  @container nx-table (max-width: 560px) {
-    .nx-table__selection-clear.nx-btn {
-      width: var(--nx-btn-height);
-      padding: 0;
-    }
-
-    .nx-table__selection-clear .nx-btn__label {
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      overflow: hidden;
-      clip-path: inset(50%);
-      white-space: nowrap;
-    }
-  }
-
-  /* Footer: the frame's bottom band, the range on the left and the pager on the right. */
-  .nx-table__footer {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--nx-space-2) var(--nx-space-4);
-    min-height: var(--nx-footbar);
-    padding: 6px var(--nx-space-2) 6px var(--nx-table-pad-x);
-    border-top: 1px solid var(--nx-table-line);
-  }
-
-  .nx-table__range {
-    margin: 0;
-    color: var(--nx-text-muted);
-    font-size: var(--nx-text-sm);
-    font-variant-numeric: tabular-nums;
-  }
-
-  /* The numbers themselves read as the text colour, so the line is skimmed at a glance. */
-  .nx-table__range b {
-    color: var(--nx-text);
-    font-weight: 600;
-  }
-
-  .nx-table__page-info {
-    color: var(--nx-text-muted);
-    font-size: var(--nx-text-sm);
-    font-variant-numeric: tabular-nums;
-    white-space: nowrap;
-  }
-
-  .nx-table__paging {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--nx-space-2);
-    margin-left: auto;
-  }
-
-  .nx-table__page-size {
-    color: var(--nx-text-muted);
-    font-variant-numeric: tabular-nums;
-  }
-
-  .nx-table__pager {
-    display: flex;
-    align-items: center;
-    gap: 2px;
-  }
-
-  .nx-table__page-list {
-    display: flex;
-    align-items: center;
-    gap: 2px;
-  }
-
-  .nx-table__page {
-    min-width: var(--nx-control-sm);
-    height: var(--nx-control-sm);
-    padding: 0 6px;
-    border: 0;
-    border-radius: var(--nx-radius);
-    background: transparent;
-    color: var(--nx-text);
-    font: inherit;
-    font-size: var(--nx-text-sm);
-    font-variant-numeric: tabular-nums;
-    cursor: pointer;
-    transition: background-color var(--nx-duration);
-  }
-
-  .nx-table__page:hover:not(:disabled, [aria-current]) {
-    background: var(--nx-surface-hover);
-  }
-
-  .nx-table__page:focus-visible {
-    outline: none;
-    box-shadow: var(--nx-focus-ring);
-  }
-
-  .nx-table__page[aria-current] {
-    background: var(--nx-primary-solid);
-    color: var(--nx-primary-text);
-    font-weight: 600;
-    cursor: default;
-  }
-
-  .nx-table__page:disabled {
-    opacity: 0.5;
-    cursor: default;
-  }
-
-  .nx-table__page-gap {
-    min-width: 20px;
-    color: var(--nx-text-muted);
-    text-align: center;
-  }
-
-  /* A narrow table drops the page buttons: "Page 6 of 24" and the arrows are enough. */
-  @container nx-table (max-width: 520px) {
-    .nx-table__page-list {
-      display: none;
-    }
-  }
-
-  [data-nx-motion="reduce"] .nx-table__bone {
-    animation: none;
-  }
-
-  [data-nx-motion="reduce"] .nx-table__row[data-flash] > .nx-table__cell {
-    animation: none;
-  }
-
-  [data-nx-motion="reduce"] .nx-table__row[data-flash] {
-    --nx-row-bg: var(--nx-table-flash);
-  }
-
-  [data-nx-motion="reduce"] .nx-table__progress::before {
-    width: 100%;
-    animation: none;
-    opacity: 0.6;
-  }
-
-  /*
-   * The panels under the table's options button (⋮), Columns and Filters: a head, a body that scrolls when the window
-   * is short, and a foot. They share the .nx-popover panel with the menu, and hold controls rather than actions, so a
-   * click inside never closes them.
-   */
-  .nx-table-panel {
-    --nx-popover-pad: var(--nx-space-2);
-
-    position: fixed;
-    inset: auto;
-    outline: none;
-  }
-
-  .nx-table-panel__head {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: var(--nx-space-3);
-    padding: 2px var(--nx-space-2) 6px;
-  }
-
-  .nx-table-panel__title {
-    font-weight: 600;
-  }
-
-  .nx-table-panel__count {
-    color: var(--nx-text-muted);
-    font-size: var(--nx-text-xs);
-    font-variant-numeric: tabular-nums;
-  }
-
-  .nx-table-panel__foot {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    margin-top: var(--nx-space-2);
-    padding-top: var(--nx-space-2);
-    border-top: 1px solid var(--nx-border);
-  }
-
-  /* The Columns panel: a checkbox per column and a handle to drag it into another place. */
-  .nx-columns {
-    --nx-columns-row-h: var(--nx-row);
-    min-width: 232px;
-    max-width: min(320px, calc(100% - 16px));
-  }
-
-  .nx-columns--sm {
-    --nx-columns-row-h: calc(var(--nx-row) - 4px);
-    font-size: var(--nx-text-sm);
-  }
-
-  .nx-columns__list {
-    display: flex;
-    flex-direction: column;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  .nx-columns__row {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    min-height: var(--nx-columns-row-h);
-    padding: 0 var(--nx-space-2) 0 2px;
-    border: 1px solid transparent;
-    border-radius: var(--nx-radius);
-  }
-
-  .nx-columns__row:hover {
-    background: var(--nx-surface-hover);
-  }
-
-  /* The row being dragged stays in place and goes quiet; a line shows where it would land. */
-  .nx-columns__row[data-held] {
-    background: var(--nx-surface-hover);
-    opacity: 0.6;
-  }
-
-  .nx-columns__row[data-drop] {
-    border-color: var(--nx-primary);
-  }
-
-  /* A band: its own line, with the columns under it indented along a line that says where the band ends. */
-  .nx-columns__row--band {
-    display: block;
-    padding: 0;
-  }
-
-  .nx-columns__row--band:hover {
-    background: none;
-  }
-
-  .nx-columns__band {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    min-height: var(--nx-columns-row-h);
-    padding: 0 var(--nx-space-2) 0 2px;
-    border-radius: var(--nx-radius);
-  }
-
-  .nx-columns__band:hover {
-    background: var(--nx-surface-hover);
-  }
-
-  .nx-columns__band .nx-columns__label {
-    font-weight: 600;
-  }
-
-  .nx-columns__band-count {
-    flex: none;
-    color: var(--nx-text-subtle);
-    font-size: var(--nx-text-xs);
-    font-variant-numeric: tabular-nums;
-  }
-
-  .nx-columns__children {
-    margin: 0 0 2px 13px;
-    padding: 0 0 0 9px;
-    border-left: 1px solid var(--nx-border);
-    list-style: none;
-  }
-
-  /* A column whose band is hidden stays readable but plainly off. */
-  .nx-columns__row--child:has(input:disabled) .nx-columns__label {
-    color: var(--nx-text-subtle);
-  }
-
-  .nx-columns__handle {
-    display: inline-flex;
-    flex: none;
-    align-items: center;
-    justify-content: center;
-    width: 20px;
-    height: var(--nx-columns-row-h);
-    padding: 0;
-    border: 0;
-    border-radius: var(--nx-radius-sm);
-    background: none;
-    color: var(--nx-text-subtle);
-    cursor: grab;
-    touch-action: none;
-  }
-
-  .nx-columns__handle:hover {
-    color: var(--nx-text);
-  }
-
-  .nx-columns__handle:focus-visible {
-    outline: none;
-    box-shadow: var(--nx-focus-ring);
-  }
-
-  .nx-columns[data-dragging] .nx-columns__handle {
-    cursor: grabbing;
-  }
-
-  .nx-columns__handle--fixed {
-    cursor: default;
-  }
-
-  .nx-columns__choice {
-    flex: 1 1 auto;
-    min-width: 0;
-    padding: 2px 0;
-  }
-
-  .nx-columns__label {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .nx-columns__pin {
-    display: inline-flex;
-    flex: none;
-    color: var(--nx-text-subtle);
-  }
-
-  .nx-columns__pin .nx-icon {
-    width: 14px;
-    height: 14px;
-  }
-
-  .nx-columns__note {
-    margin: 6px 0 0;
-    padding: 0 var(--nx-space-2);
-    color: var(--nx-text-muted);
-    font-size: var(--nx-text-xs);
-    line-height: 1.4;
-  }
-
-  /* The Filters panel: one column of small inputs (the form's grid spans every cell this narrow), and the rows left. */
-  .nx-table-filters {
-    --nx-form-row-gap: var(--nx-space-3);
-    width: min(22rem, calc(100vw - 16px));
-    font-size: var(--nx-text-sm);
-  }
-
-  /* In line with the head, with room for a focus ring inside the scroller. */
-  .nx-table-filters__form {
-    padding: 2px var(--nx-space-2);
-  }
-
-  .nx-table-filters__rows {
-    margin-right: auto;
-    padding-left: var(--nx-space-2);
-    color: var(--nx-text-muted);
-    font-size: var(--nx-text-xs);
-    font-variant-numeric: tabular-nums;
-  }
-}
+@layer nexus.components {
+  /*
+   * Data table: a bar (tabs, search, buttons), a frame holding the table (a header that stays while rows scroll, a
+   * checkbox column on the left and the actions on the right that stay while columns scroll), and a footer with the
+   * range and the pager. While rows are selected, a bar with their actions covers the column headings.
+   */
+  .nx-table {
+    --nx-table-bg: var(--nx-surface);
+    --nx-table-head-bg: color-mix(in oklab, var(--nx-text) 4%, var(--nx-surface));
+    --nx-table-hover: color-mix(in oklab, var(--nx-text) 3%, var(--nx-surface));
+    --nx-table-selected: color-mix(in oklab, var(--nx-primary) 11%, var(--nx-surface));
+    --nx-table-selected-hover: color-mix(in oklab, var(--nx-primary) 16%, var(--nx-surface));
+    --nx-table-flash: color-mix(in oklab, var(--nx-success) 18%, var(--nx-surface));
+    --nx-table-line: var(--nx-border);
+    --nx-table-head-h: calc(var(--nx-row) + 8px);
+    /* The band of group headings above the columns' own, when any column names a group. */
+    --nx-table-group-h: 30px;
+    /* How many rows the header has: 1, or 2 while a band stands above the headings (`data-head-rows`). */
+    --nx-table-head-rows: 1;
+    /* The whole header, which the loading bar and the selection bar are measured from. */
+    --nx-table-head-all: calc(var(--nx-table-head-h) + (var(--nx-table-head-rows) - 1) * var(--nx-table-group-h));
+    --nx-table-row-h: calc(var(--nx-row) + 12px);
+    --nx-table-pad-x: 12px;
+    --nx-table-select-w: 44px;
+    --nx-table-font: var(--nx-text-md);
+    --nx-table-edge: light-dark(rgb(16 24 40 / 0.14), rgb(0 0 0 / 0.55));
+
+    container: nx-table / inline-size;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    overflow: clip;
+    /* One frame round the bar, the rows and the footer. */
+    border: 1px solid var(--nx-table-line);
+    border-radius: var(--nx-radius-lg);
+    background: var(--nx-table-bg);
+    box-shadow: var(--nx-shadow-sm);
+    color: var(--nx-text);
+  }
+
+  .nx-table[data-head-rows="2"] {
+    --nx-table-head-rows: 2;
+  }
+
+  .nx-table--sm {
+    --nx-table-head-h: calc(var(--nx-row) + 2px);
+    --nx-table-group-h: 26px;
+    --nx-table-row-h: calc(var(--nx-row) + 4px);
+    --nx-table-pad-x: 10px;
+    --nx-table-select-w: 38px;
+    --nx-table-font: var(--nx-text-sm);
+  }
+
+  /*
+   * The bar, and a line under it. One line on a wide table: the Add section (the table's Add and the page's own
+   * buttons) and the lists on the left; Reload, the options (⋮) and the search, rows per page inside it, on the right.
+   * A narrower table moves whole parts onto lines of their own, never a lone item: the search takes the top line
+   * under 670px (with nothing on the left, the buttons' line), Reload goes into the options menu under 375px, and,
+   * beside lists, the Add section takes the last line under 325px. On the admin shell, whose menu leaves the screen
+   * at 900px, those are windows of 695, 400 and 350px. The lists show their labels from 900px (TabButtons
+   * `labels="auto"`), where the line holds them with room to spare.
+   */
+  .nx-table__bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--nx-space-2);
+    margin: 6px var(--nx-space-2);
+  }
+
+  .nx-table__bar:not(:has(:not(.nx-table__bar-end):not(:empty))) {
+    display: none;
+  }
+
+  /* What the rows are (`caption`): a line over the bar, inside the frame, so a table beside another starts level with it. */
+  .nx-table__caption {
+    margin: var(--nx-space-2) var(--nx-space-3) 0;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-md);
+    line-height: 1.5;
+    overflow-wrap: anywhere;
+  }
+
+  .nx-table__bar:has(:not(.nx-table__bar-end):not(:empty)) + .nx-table__frame {
+    border-top: 1px solid var(--nx-table-line);
+  }
+
+  .nx-table__bar-add,
+  .nx-table__bar-start,
+  .nx-table__bar-end {
+    display: flex;
+    align-items: center;
+    gap: var(--nx-space-2);
+    min-width: 0;
+  }
+
+  /* A page's own tabs and filters may run long: they wrap inside their part. */
+  .nx-table__bar-start {
+    flex-wrap: wrap;
+  }
+
+  /*
+   * The Add section's items keep their own widths on a shared line: none shrinks to its longest word (a switch's
+   * label) or runs into the lists, so a bar that does not fit takes its next step instead. On the line the section
+   * takes of its own (below) they share it, and one that would not fit its share takes a line of its own, whole. The
+   * Add is `block` for that line; beside other parts it is as wide as its label.
+   */
+  .nx-table__bar-add > * {
+    flex: none;
+    min-width: fit-content;
+  }
+
+  .nx-table__bar-add > :is(.nx-btn--block, .nx-split--block) {
+    width: auto;
+  }
+
+  /* A part whose page content renders nothing (an empty fragment) is no part: no room, no gap, no step. */
+  .nx-table__bar-add:empty,
+  .nx-table__bar-start:empty {
+    display: none;
+  }
+
+  /* The right side takes the room left on its line, so it ends at the bar's end. */
+  .nx-table__bar-end {
+    margin-inline-start: auto;
+  }
+
+  /* 19rem where there is room. A line breaks on the 12rem basis, so the search narrows before the bar takes a line. */
+  .nx-table__search {
+    flex: 1 1 12rem;
+    min-width: 0;
+    max-width: 19rem;
+  }
+
+  /* Rows per page inside the search box, at its start, with a line between the two. */
+  .nx-table__search .nx-field__actions--start {
+    align-self: stretch;
+    padding-right: 0;
+    padding-left: 2px;
+    border-right: 1px solid var(--nx-field-border);
+  }
+
+  .nx-table__page-size--field.nx-btn {
+    min-width: 0;
+    height: calc(var(--nx-field-height) - 8px);
+    gap: 0;
+    padding: 0 2px 0 4px;
+    color: var(--nx-text-muted);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .nx-table__page-size--field .nx-icon {
+    width: 14px;
+    height: 14px;
+  }
+
+  .nx-table__page-size--field:hover {
+    color: var(--nx-text);
+  }
+
+  /* The search comes first and takes the room: the top line beside an Add section or lists, else the buttons' line. */
+  @container nx-table (width < 670px) {
+    .nx-table__search {
+      order: -1;
+      max-width: none;
+    }
+
+    .nx-table__bar:has(> :is(.nx-table__bar-add, .nx-table__bar-start):not(:empty)) > .nx-table__search {
+      flex-basis: 100%;
+    }
+  }
+
+  /* DataTable reads this to offer Reload in the options menu. */
+  @container nx-table (width < 375px) {
+    .nx-table__reload {
+      display: none;
+    }
+  }
+
+  /*
+   * Beside lists, the Add section goes last and takes its line. Its buttons share it equally (the Add is a `block`
+   * button, so its label stays centred), or each takes a line of its own when they do not fit side by side.
+   */
+  @container nx-table (width < 325px) {
+    .nx-table__bar:has(> .nx-table__bar-start:not(:empty)) > .nx-table__bar-add {
+      flex-basis: 100%;
+      flex-wrap: wrap;
+      order: 1;
+    }
+
+    .nx-table__bar:has(> .nx-table__bar-start:not(:empty)) > .nx-table__bar-add > * {
+      flex: 1 1 0;
+    }
+  }
+
+  /*
+   * The same steps for a bar whose parts are wider than the widths above expect (a long Add label, the page's own
+   * buttons, cozy density): DataTable squeezes it (`data-squeeze`) one step at a time, each keeping the ones before.
+   */
+  .nx-table__bar[data-squeeze] > .nx-table__search {
+    order: -1;
+    max-width: none;
+  }
+
+  .nx-table__bar[data-squeeze]:has(> :is(.nx-table__bar-add, .nx-table__bar-start):not(:empty)) > .nx-table__search {
+    flex-basis: 100%;
+  }
+
+  .nx-table__bar[data-squeeze~="reload"] .nx-table__reload {
+    display: none;
+  }
+
+  .nx-table__bar[data-squeeze~="add"] > .nx-table__bar-add {
+    flex-basis: 100%;
+    flex-wrap: wrap;
+    order: 1;
+  }
+
+  .nx-table__bar[data-squeeze~="add"] > .nx-table__bar-add > * {
+    flex: 1 1 0;
+  }
+
+  /*
+   * `fill`: the table takes the height it is given instead of growing with its rows. The bar and the footer keep their
+   * own height, the frame takes the rest, and the rows scroll inside it. Nothing below the table moves when a page
+   * holds fewer rows, and the page behind it never gains a scrollbar.
+   */
+  .nx-table--fill {
+    height: 100%;
+    min-height: 0;
+  }
+
+  .nx-table--fill > .nx-table__frame {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .nx-table--fill .nx-table__scroll {
+    flex: 1 1 auto;
+    min-height: 0;
+    /* The room for the scrollbar is kept, so the headings do not shift the moment the rows need one. */
+    scrollbar-gutter: stable;
+  }
+
+  /* The rows' part of the frame: the selection bar and the loading bar are placed in it. */
+  .nx-table__frame {
+    position: relative;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .nx-table__scroll {
+    overflow: auto;
+    overscroll-behavior-x: contain;
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in oklab, var(--nx-text-subtle) 75%, transparent) transparent;
+  }
+
+  .nx-table__table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    font-size: var(--nx-table-font);
+    line-height: 1.45;
+  }
+
+  /* Cells */
+  .nx-table__cell,
+  .nx-table__heading {
+    box-sizing: border-box;
+    padding: 4px var(--nx-table-pad-x);
+    text-align: start;
+    vertical-align: middle;
+  }
+
+  .nx-table__cell {
+    height: var(--nx-table-row-h);
+    border-bottom: 1px solid var(--nx-table-line);
+    background: var(--nx-row-bg);
+  }
+
+  .nx-table__row {
+    --nx-row-bg: var(--nx-table-bg);
+  }
+
+  /* The last row's line would double the frame. */
+  .nx-table__row:last-child > .nx-table__cell {
+    border-bottom: 0;
+  }
+
+  .nx-table__row:not(.nx-table__row--message, .nx-table__row--skeleton):hover {
+    --nx-row-bg: var(--nx-table-hover);
+  }
+
+  /*
+   * A row that reads strong (`rowStrong`): an unread thread. Its cells' text heavier and in the text colour; nothing
+   * else, so the row keeps its height and reads plain again once it is read.
+   */
+  .nx-table__row[data-strong] > .nx-table__cell {
+    color: var(--nx-text);
+    font-weight: 600;
+  }
+
+  /* A row a click opens or picks says so under the pointer. Only the pointer changes: nothing in the row moves on hover. */
+  .nx-table__row:is([data-open], [data-pick]) {
+    cursor: pointer;
+  }
+
+  /* A selected row, and the picked one (`onPick`): the same tint, which the checkbox or the list beside tells apart. */
+  .nx-table__row:is([data-selected], [data-picked]) {
+    --nx-row-bg: var(--nx-table-selected);
+  }
+
+  .nx-table__row:is([data-selected], [data-picked]):hover {
+    --nx-row-bg: var(--nx-table-selected-hover);
+  }
+
+  /* Muted text on a selected row's tint moves toward the text color, so it keeps 4.5:1 in every theme. */
+  .nx-table__row:is([data-selected], [data-picked]) :is(.nx-table__number, .nx-table__dash, .nx-table__no) {
+    color: color-mix(in oklab, var(--nx-text-muted), var(--nx-text) 45%);
+  }
+
+  /*
+   * The keyboard's focus on a row's radio button (`onPick`), which is out of sight: a ring round the row, drawn on its
+   * cells as the tree's rows draw theirs, so a pinned cell carries its part of it.
+   */
+  .nx-table__row:has(.nx-table__pick:focus-visible) > .nx-table__cell {
+    box-shadow:
+      inset 0 2px 0 var(--nx-primary),
+      inset 0 -2px 0 var(--nx-primary);
+  }
+
+  .nx-table__row:has(.nx-table__pick:focus-visible) > .nx-table__cell:first-child {
+    box-shadow:
+      inset 2px 0 0 var(--nx-primary),
+      inset 0 2px 0 var(--nx-primary),
+      inset 0 -2px 0 var(--nx-primary);
+  }
+
+  .nx-table__row:has(.nx-table__pick:focus-visible) > .nx-table__cell:last-child {
+    box-shadow:
+      inset -2px 0 0 var(--nx-primary),
+      inset 0 2px 0 var(--nx-primary),
+      inset 0 -2px 0 var(--nx-primary);
+  }
+
+  /* Columns scroll under the pinned ones: a soft shadow shows there is more on that side. */
+  .nx-table__frame[data-scroll-start] {
+    --nx-table-start-edge: 8px 0 8px -8px var(--nx-table-edge);
+  }
+
+  .nx-table__frame[data-scroll-end] {
+    --nx-table-end-edge: -8px 0 8px -8px var(--nx-table-edge);
+  }
+
+  .nx-table__row[data-busy] > .nx-table__cell:not(.nx-table__cell--actions) {
+    color: var(--nx-text-muted);
+  }
+
+  /* A row just added or saved: a green wash that fades (a steady one with reduced motion, until the mark goes). */
+  .nx-table__row[data-flash] > .nx-table__cell {
+    animation: nx-table-flash 1600ms ease-out;
+  }
+
+  @keyframes nx-table-flash {
+    from {
+      background-color: var(--nx-table-flash);
+    }
+  }
+
+  .nx-table__cell--start {
+    text-align: start;
+  }
+
+  .nx-table__cell--center {
+    text-align: center;
+  }
+
+  .nx-table__cell--end {
+    text-align: end;
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* A value ends in "…" at the column's width (24rem when the column sets none). */
+  .nx-table__value {
+    display: block;
+    max-width: var(--nx-col-max, 24rem);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .nx-table__cell--wrap .nx-table__value {
+    max-width: var(--nx-col-max, 32rem);
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+
+  .nx-table__cell--end .nx-table__value {
+    margin-left: auto;
+  }
+
+  .nx-table__cell--center .nx-table__value {
+    margin-inline: auto;
+  }
+
+  /*
+   * Pinned columns stay while the others scroll: the numbers and checkbox column and the actions always, and
+   * any column the user pins from its menu. Their distance from the edge is measured from the headings before them.
+   */
+  .nx-table__cell[data-pin],
+  .nx-table__heading[data-pin] {
+    position: sticky;
+    z-index: 1;
+    background: var(--nx-row-bg);
+  }
+
+  .nx-table__heading[data-pin] {
+    z-index: 3;
+    background: var(--nx-table-head-bg);
+  }
+
+  /* The last pinned column of a side carries the shadow the others scroll under. */
+  .nx-table__cell[data-pin="left"][data-pin-edge],
+  .nx-table__heading[data-pin="left"][data-pin-edge] {
+    box-shadow: var(--nx-table-start-edge, 0 0 #0000);
+  }
+
+  .nx-table__cell[data-pin="right"][data-pin-edge],
+  .nx-table__heading[data-pin="right"][data-pin-edge] {
+    box-shadow: var(--nx-table-end-edge, 0 0 #0000);
+  }
+
+  /* The first column: the row's number, with its checkbox in the same place. */
+  .nx-table__cell--index {
+    width: var(--nx-table-select-w);
+    min-width: var(--nx-table-select-w);
+    padding: 0;
+    text-align: center;
+  }
+
+  .nx-table__number {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    font-variant-numeric: tabular-nums;
+    font-weight: 500;
+  }
+
+  .nx-table__check {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    min-height: 28px;
+  }
+
+  .nx-table__check .nx-choice__control {
+    margin: 0;
+  }
+
+  /* Both in the one cell: the number, until the row is under the pointer or anything is selected. */
+  .nx-table__cell--index[data-swap] > .nx-table__number,
+  .nx-table__cell--index[data-swap] > .nx-table__check {
+    position: absolute;
+    inset: 0;
+    width: auto;
+    transition: opacity var(--nx-duration);
+  }
+
+  .nx-table__cell--index[data-swap] > .nx-table__check {
+    opacity: 0;
+  }
+
+  .nx-table__row:hover > .nx-table__cell--index[data-swap] > .nx-table__check,
+  /* The heading's own cell may stand in the band row, so the whole header counts as hovering it. */
+  .nx-table__thead:hover .nx-table__cell--index[data-swap] > .nx-table__check,
+  .nx-table__cell--index[data-swap]:focus-within > .nx-table__check,
+  .nx-table[data-selecting] .nx-table__cell--index[data-swap] > .nx-table__check {
+    opacity: 1;
+  }
+
+  .nx-table__row:hover > .nx-table__cell--index[data-swap] > .nx-table__number,
+  .nx-table__thead:hover .nx-table__cell--index[data-swap] > .nx-table__number,
+  .nx-table__cell--index[data-swap]:focus-within > .nx-table__number,
+  .nx-table[data-selecting] .nx-table__cell--index[data-swap] > .nx-table__number {
+    opacity: 0;
+  }
+
+  /* A touch screen has no pointer to hover with, so the checkbox stays. */
+  @media (hover: none) {
+    .nx-table__cell--index[data-swap] > .nx-table__check {
+      opacity: 1;
+    }
+
+    .nx-table__cell--index[data-swap] > .nx-table__number {
+      opacity: 0;
+    }
+  }
+
+  /*
+   * The sections above the page: a row across the table whose button folds a set of the user's records open and shut -
+   * the ones they pinned, their favourites - and the rows themselves, which show in the list below as well. A section's
+   * row wears the section's icon where the rows of the page show their number.
+   */
+  .nx-table__section-cell {
+    padding: 0;
+    border-bottom: 1px solid var(--nx-table-line);
+    background: var(--nx-table-head-bg);
+  }
+
+  .nx-table__section-toggle {
+    display: flex;
+    align-items: center;
+    gap: var(--nx-space-2);
+    width: 100%;
+    min-height: var(--nx-table-head-h);
+    padding: 0 var(--nx-table-pad-x);
+    border: 0;
+    background: none;
+    color: var(--nx-text);
+    font: inherit;
+    font-size: var(--nx-table-font);
+    font-weight: 600;
+    text-align: start;
+    cursor: pointer;
+    transition: background-color var(--nx-duration);
+  }
+
+  .nx-table__section-toggle:hover {
+    background: color-mix(in oklab, var(--nx-text) 5%, transparent);
+  }
+
+  .nx-table__section-toggle:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--nx-primary);
+  }
+
+  .nx-table__section-caret,
+  .nx-table__section-icon,
+  .nx-table__mark {
+    flex-shrink: 0;
+    width: 15px;
+    height: 15px;
+    color: var(--nx-text-muted);
+  }
+
+  /* A row's marks, where its number would be: one under the other, in the line a single mark takes. */
+  .nx-table__marks {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2px;
+  }
+
+  .nx-table__section-caret {
+    transition: transform var(--nx-duration);
+  }
+
+  .nx-table__section[data-open] .nx-table__section-caret {
+    transform: rotate(90deg);
+  }
+
+  .nx-table__section-count {
+    color: var(--nx-text-muted);
+    font-weight: 400;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .nx-table__section-loading {
+    width: 14px;
+    height: 14px;
+    color: var(--nx-text-muted);
+  }
+
+  [data-nx-motion="reduce"] .nx-table__section-caret,
+  [data-nx-motion="reduce"] .nx-table__section-toggle {
+    transition: none;
+  }
+
+  .nx-table__cell--actions {
+    width: 1px;
+    padding-inline: 4px 8px;
+    white-space: nowrap;
+  }
+
+  /*
+   * Once the user has given a column a width, the table lays its columns out from the list of widths, so dragging one
+   * edge moves that edge only. The filler column takes whatever space the others leave.
+   */
+  .nx-table[data-sized] .nx-table__table {
+    table-layout: fixed;
+  }
+
+  .nx-table__cell--filler {
+    padding: 0;
+    background: var(--nx-row-bg);
+  }
+
+  .nx-table__heading.nx-table__cell--filler {
+    background: var(--nx-table-head-bg);
+  }
+
+  .nx-table__actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 2px;
+  }
+
+  /* Header: stays at the top while rows scroll. */
+  .nx-table__heading {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    height: var(--nx-table-head-h);
+    border-bottom: 1px solid var(--nx-table-line);
+    background: var(--nx-table-head-bg);
+    color: var(--nx-text);
+    font-size: var(--nx-text-xs);
+    font-weight: 650;
+    white-space: nowrap;
+  }
+
+  /* A heading that holds the sort button, the column's menu, and the edge to drag keeps no padding of its own. */
+  .nx-table__heading:has(> .nx-table__heading-inner) {
+    padding: 0;
+  }
+
+  /*
+   * Columns in bands: a group's heading spans the columns next to each other that name it, and the columns with no
+   * group keep one heading as tall as both rows. Both rows stay while the rows scroll, the band on top.
+   */
+  .nx-table__head--leaves > .nx-table__heading {
+    top: var(--nx-table-group-h);
+  }
+
+  .nx-table__heading--group {
+    height: var(--nx-table-group-h);
+    border-bottom: 0;
+    text-align: center;
+  }
+
+  /* The line under a band stops short of its edges, so two bands beside each other read as two, not as one rule. */
+  .nx-table__heading--group::after {
+    content: "";
+    position: absolute;
+    right: var(--nx-table-pad-x);
+    bottom: 0;
+    left: var(--nx-table-pad-x);
+    height: 1px;
+    background: var(--nx-table-line);
+  }
+
+  .nx-table__group {
+    display: block;
+    overflow: hidden;
+    color: var(--nx-text);
+    font-size: var(--nx-text-xs);
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-overflow: ellipsis;
+    text-transform: uppercase;
+  }
+
+  .nx-table__heading-inner {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    height: 100%;
+  }
+
+  .nx-table__heading-label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .nx-table__heading-inner > .nx-table__heading-label {
+    flex: 1 1 auto;
+    padding: 0 var(--nx-table-pad-x);
+  }
+
+  /* A sortable heading is one button across its cell, beside the column's menu. */
+  .nx-table__sort {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+    height: 100%;
+    padding: 0 4px 0 var(--nx-table-pad-x);
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: inherit;
+    cursor: pointer;
+    transition: background-color var(--nx-duration);
+  }
+
+  .nx-table__cell--end .nx-table__sort {
+    flex-direction: row-reverse;
+    padding: 0 var(--nx-table-pad-x) 0 4px;
+  }
+
+  .nx-table__cell--center .nx-table__sort {
+    justify-content: center;
+  }
+
+  /* The column's menu (pin, move, fit, hide): at the end of the heading, and shown while it is hovered or focused. */
+  .nx-table__col-menu.nx-btn {
+    flex: 0 0 auto;
+    width: 20px;
+    min-width: 20px;
+    height: calc(var(--nx-table-head-h) - 12px);
+    margin-right: 2px;
+    padding: 0;
+    border-radius: var(--nx-radius-sm);
+    opacity: 0;
+    transition: opacity var(--nx-duration);
+  }
+
+  .nx-table__col-menu .nx-icon {
+    width: 14px;
+    height: 14px;
+  }
+
+  .nx-table__heading:hover .nx-table__col-menu,
+  .nx-table__col-menu:is(:focus, :focus-visible),
+  .nx-table__col-menu[aria-expanded="true"] {
+    opacity: 1;
+  }
+
+  @media (hover: none) {
+    .nx-table__col-menu.nx-btn {
+      opacity: 1;
+    }
+  }
+
+  /* The edge of a heading: drag it for the column's width, double-click it to fit the content. */
+  .nx-table__resizer {
+    position: absolute;
+    top: 0;
+    right: -2px;
+    z-index: 4;
+    width: 8px;
+    height: 100%;
+    touch-action: none;
+    cursor: col-resize;
+  }
+
+  .nx-table__resizer::after {
+    content: "";
+    position: absolute;
+    top: 7px;
+    bottom: 7px;
+    left: 3px;
+    width: 2px;
+    border-radius: 1px;
+    background: transparent;
+    transition: background-color var(--nx-duration);
+  }
+
+  .nx-table__heading:hover > .nx-table__resizer::after,
+  .nx-table__resizer[data-active]::after {
+    background: var(--nx-primary);
+  }
+
+  .nx-table__resizer[data-active]::after {
+    top: 0;
+    bottom: 0;
+  }
+
+  /* Dragging a heading to another place: the heading being moved, and a line where it will land. */
+  .nx-table__heading[data-dragging] {
+    background: color-mix(in oklab, var(--nx-primary) 14%, var(--nx-table-head-bg));
+  }
+
+  .nx-table__heading[data-drop-before]::before,
+  .nx-table__heading[data-drop-after]::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 5;
+    width: 2px;
+    background: var(--nx-primary);
+  }
+
+  .nx-table__heading[data-drop-before]::before {
+    left: 0;
+  }
+
+  .nx-table__heading[data-drop-after]::after {
+    right: 0;
+  }
+
+  .nx-table[data-col-drag] .nx-table__head {
+    user-select: none;
+  }
+
+  .nx-table[data-col-drag] :is(.nx-table__heading, .nx-table__sort, .nx-table__col-menu, .nx-table__resizer) {
+    cursor: grabbing;
+  }
+
+  .nx-table[data-col-resize] :is(.nx-table__heading, .nx-table__sort, .nx-table__cell) {
+    cursor: col-resize;
+  }
+
+  .nx-table__sort:hover:not(:disabled) {
+    background: color-mix(in oklab, var(--nx-text) 5%, transparent);
+  }
+
+  .nx-table__sort:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--nx-primary);
+  }
+
+  .nx-table__sort:disabled {
+    cursor: default;
+  }
+
+  .nx-table__sort-icon {
+    flex-shrink: 0;
+    width: 14px;
+    height: 14px;
+    color: var(--nx-text-muted);
+    opacity: 0;
+    transition: opacity var(--nx-duration);
+  }
+
+  .nx-table__sort[data-sorted] .nx-table__sort-icon {
+    color: var(--nx-text);
+    opacity: 1;
+  }
+
+  .nx-table__sort:is(:hover, :focus-visible):not(:disabled) .nx-table__sort-icon {
+    opacity: 1;
+  }
+
+  @media (hover: none) {
+    .nx-table__sort:not(:disabled) .nx-table__sort-icon {
+      opacity: 0.7;
+    }
+  }
+
+  /* Values */
+  .nx-table__dash,
+  .nx-table__no {
+    color: var(--nx-text-muted);
+  }
+
+  .nx-table__yes {
+    display: inline-flex;
+    color: var(--nx-success);
+  }
+
+  .nx-table__yes .nx-icon {
+    width: 16px;
+    height: 16px;
+  }
+
+  /* An option with a tone: a tag with a dot of its color; the text keeps the text color, readable on every tint. */
+  .nx-table__tag {
+    --nx-tag-tone: var(--nx-text-muted);
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    max-width: 100%;
+    padding: 1px 8px;
+    border-radius: var(--nx-radius-full);
+    background: color-mix(in oklab, var(--nx-tag-tone) 14%, var(--nx-surface));
+    color: var(--nx-text);
+    font-size: var(--nx-text-xs);
+    font-weight: 500;
+    line-height: 1.6;
+    vertical-align: middle;
+  }
+
+  .nx-table__tag::before {
+    content: "";
+    flex-shrink: 0;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--nx-tag-tone);
+  }
+
+  .nx-table__tag[data-tone="primary"] {
+    --nx-tag-tone: var(--nx-primary);
+  }
+
+  .nx-table__tag[data-tone="success"] {
+    --nx-tag-tone: var(--nx-success);
+  }
+
+  .nx-table__tag[data-tone="warning"] {
+    --nx-tag-tone: var(--nx-warning);
+  }
+
+  .nx-table__tag[data-tone="danger"] {
+    --nx-tag-tone: var(--nx-danger);
+  }
+
+  .nx-table__tag[data-tone="info"] {
+    --nx-tag-tone: var(--nx-info);
+  }
+
+  /* A tag after a value (a column's `tag`): "Asia" then "Trashed", a word's space apart. */
+  .nx-table__tag--after {
+    margin-inline-start: var(--nx-space-2);
+  }
+
+  /* A word with no state to tell (a keyword in a record's card): the tag without its dot. */
+  .nx-table__tag--plain::before {
+    content: none;
+  }
+
+  /* Placeholders while the first rows load. */
+  .nx-table__bone {
+    display: block;
+    height: 0.75em;
+    border-radius: var(--nx-radius-sm);
+    background: color-mix(in oklab, var(--nx-text) 9%, transparent);
+    animation: nx-table-pulse 1.6s ease-in-out infinite;
+  }
+
+  .nx-table__cell--end .nx-table__bone {
+    margin-left: auto;
+  }
+
+  @keyframes nx-table-pulse {
+    50% {
+      opacity: 0.45;
+    }
+  }
+
+  /* A message across the table: no rows, no matches, a failed load. */
+  .nx-table__message-cell {
+    padding: 0;
+    background: var(--nx-table-bg);
+  }
+
+  /*
+   * The cell spans every column, so on a table wider than its frame the message is held to the part on screen:
+   * sticky at the start edge and as wide as the scroller shows (DataTable measures it into --nx-table-view-w).
+   */
+  .nx-table__message {
+    position: sticky;
+    inset-inline-start: 0;
+    box-sizing: border-box;
+    width: var(--nx-table-view-w, 100%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    padding: 40px var(--nx-space-4);
+    text-align: center;
+  }
+
+  .nx-table__message-icon {
+    width: 28px;
+    height: 28px;
+    margin-bottom: 6px;
+    color: var(--nx-text-muted);
+  }
+
+  .nx-table__message[data-tone="danger"] .nx-table__message-icon {
+    color: var(--nx-danger);
+  }
+
+  .nx-table__message-title {
+    margin: 0;
+    font-size: var(--nx-text-md);
+    font-weight: 600;
+  }
+
+  .nx-table__message-detail {
+    max-width: 36rem;
+    margin: 0;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+  }
+
+  .nx-table__message-actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--nx-space-2);
+    margin-top: var(--nx-space-3);
+  }
+
+  /* A thin bar under the header while a load runs with rows on screen. The rows dim only if it takes a moment. */
+  .nx-table__progress {
+    position: absolute;
+    top: calc(var(--nx-table-head-all) - 1px);
+    right: 0;
+    left: 0;
+    z-index: 4;
+    height: 2px;
+    overflow: hidden;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--nx-duration);
+  }
+
+  .nx-table__progress::before {
+    content: "";
+    position: absolute;
+    inset: 0 auto 0 0;
+    width: 35%;
+    background: var(--nx-primary);
+    animation: nx-table-progress 1.1s ease-in-out infinite;
+  }
+
+  @keyframes nx-table-progress {
+    from {
+      transform: translateX(-100%);
+    }
+    to {
+      transform: translateX(290%);
+    }
+  }
+
+  .nx-table[data-refreshing] .nx-table__progress {
+    opacity: 1;
+  }
+
+  .nx-table__table > tbody {
+    transition: opacity var(--nx-duration);
+  }
+
+  .nx-table[data-refreshing] .nx-table__table > tbody {
+    opacity: 0.55;
+    transition-delay: 180ms;
+  }
+
+  /* The selection bar covers the column headings, so the table does not move when it shows. */
+  .nx-table__selection {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: var(--nx-table-index-w, var(--nx-table-select-w));
+    z-index: 5;
+    display: flex;
+    align-items: center;
+    gap: var(--nx-space-2);
+    height: calc(var(--nx-table-head-all) - 1px);
+    padding: 0 var(--nx-space-2) 0 2px;
+    background: var(--nx-table-selected);
+  }
+
+  .nx-table__frame:has(.nx-table__selection) .nx-table__heading.nx-table__cell--index {
+    background: var(--nx-table-selected);
+  }
+
+  .nx-table__selection-count {
+    flex-shrink: 0;
+    padding-right: var(--nx-space-2);
+    font-size: var(--nx-text-sm);
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  /* With ways to select by what the rows are, the count is the button that opens them. */
+  .nx-table__selection-pick .nx-table__selection-count {
+    padding-right: 0;
+  }
+
+  .nx-table__selection-actions {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    gap: 2px;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  /* Every action on the selected rows in one split button: the name of the one shown must stay readable. */
+  .nx-table__mass {
+    min-width: 0;
+  }
+
+  .nx-table__mass .nx-btn__label,
+  .nx-table__mass .nx-split__main .nx-btn__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .nx-table__selection-clear {
+    flex-shrink: 0;
+    margin-left: auto;
+  }
+
+  /* A narrow table keeps the action's name and drops the word "Clear"; it stays for screen readers and in the tooltip. */
+  @container nx-table (max-width: 560px) {
+    .nx-table__selection-clear.nx-btn {
+      width: var(--nx-btn-height);
+      padding: 0;
+    }
+
+    .nx-table__selection-clear .nx-btn__label {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+  }
+
+  /* Footer: the frame's bottom band, the range on the left and the pager on the right. */
+  .nx-table__footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--nx-space-2) var(--nx-space-4);
+    min-height: var(--nx-footbar);
+    padding: 6px var(--nx-space-2) 6px var(--nx-table-pad-x);
+    border-top: 1px solid var(--nx-table-line);
+  }
+
+  .nx-table__range {
+    margin: 0;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* The numbers themselves read as the text colour, so the line is skimmed at a glance. */
+  .nx-table__range b {
+    color: var(--nx-text);
+    font-weight: 600;
+  }
+
+  .nx-table__page-info {
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  .nx-table__paging {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--nx-space-2);
+    margin-left: auto;
+  }
+
+  .nx-table__page-size {
+    color: var(--nx-text-muted);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .nx-table__pager {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+  }
+
+  .nx-table__page-list {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+  }
+
+  .nx-table__page {
+    min-width: var(--nx-control-sm);
+    height: var(--nx-control-sm);
+    padding: 0 6px;
+    border: 0;
+    border-radius: var(--nx-radius);
+    background: transparent;
+    color: var(--nx-text);
+    font: inherit;
+    font-size: var(--nx-text-sm);
+    font-variant-numeric: tabular-nums;
+    cursor: pointer;
+    transition: background-color var(--nx-duration);
+  }
+
+  .nx-table__page:hover:not(:disabled, [aria-current]) {
+    background: var(--nx-surface-hover);
+  }
+
+  .nx-table__page:focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  .nx-table__page[aria-current] {
+    background: var(--nx-primary-solid);
+    color: var(--nx-primary-text);
+    font-weight: 600;
+    cursor: default;
+  }
+
+  .nx-table__page:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+
+  .nx-table__page-gap {
+    min-width: 20px;
+    color: var(--nx-text-muted);
+    text-align: center;
+  }
+
+  /* A narrow table drops the page buttons: "Page 6 of 24" and the arrows are enough. */
+  @container nx-table (max-width: 520px) {
+    .nx-table__page-list {
+      display: none;
+    }
+  }
+
+  [data-nx-motion="reduce"] .nx-table__bone {
+    animation: none;
+  }
+
+  [data-nx-motion="reduce"] .nx-table__row[data-flash] > .nx-table__cell {
+    animation: none;
+  }
+
+  [data-nx-motion="reduce"] .nx-table__row[data-flash] {
+    --nx-row-bg: var(--nx-table-flash);
+  }
+
+  [data-nx-motion="reduce"] .nx-table__progress::before {
+    width: 100%;
+    animation: none;
+    opacity: 0.6;
+  }
+
+  /*
+   * The panels under the table's options button (⋮), Columns and Filters: a head, a body that scrolls when the window
+   * is short, and a foot. They share the .nx-popover panel with the menu, and hold controls rather than actions, so a
+   * click inside never closes them.
+   */
+  .nx-table-panel {
+    --nx-popover-pad: var(--nx-space-2);
+
+    position: fixed;
+    inset: auto;
+    outline: none;
+  }
+
+  .nx-table-panel__head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--nx-space-3);
+    padding: 2px var(--nx-space-2) 6px;
+  }
+
+  .nx-table-panel__title {
+    font-weight: 600;
+  }
+
+  .nx-table-panel__count {
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .nx-table-panel__foot {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    margin-top: var(--nx-space-2);
+    padding-top: var(--nx-space-2);
+    border-top: 1px solid var(--nx-border);
+  }
+
+  /* The Columns panel: a checkbox per column and a handle to drag it into another place. */
+  .nx-columns {
+    --nx-columns-row-h: var(--nx-row);
+    min-width: 232px;
+    max-width: min(320px, calc(100% - 16px));
+  }
+
+  .nx-columns--sm {
+    --nx-columns-row-h: calc(var(--nx-row) - 4px);
+    font-size: var(--nx-text-sm);
+  }
+
+  .nx-columns__list {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .nx-columns__row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-height: var(--nx-columns-row-h);
+    padding: 0 var(--nx-space-2) 0 2px;
+    border: 1px solid transparent;
+    border-radius: var(--nx-radius);
+  }
+
+  .nx-columns__row:hover {
+    background: var(--nx-surface-hover);
+  }
+
+  /* The row being dragged stays in place and goes quiet; a line shows where it would land. */
+  .nx-columns__row[data-held] {
+    background: var(--nx-surface-hover);
+    opacity: 0.6;
+  }
+
+  .nx-columns__row[data-drop] {
+    border-color: var(--nx-primary);
+  }
+
+  /* A band: its own line, with the columns under it indented along a line that says where the band ends. */
+  .nx-columns__row--band {
+    display: block;
+    padding: 0;
+  }
+
+  .nx-columns__row--band:hover {
+    background: none;
+  }
+
+  .nx-columns__band {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-height: var(--nx-columns-row-h);
+    padding: 0 var(--nx-space-2) 0 2px;
+    border-radius: var(--nx-radius);
+  }
+
+  .nx-columns__band:hover {
+    background: var(--nx-surface-hover);
+  }
+
+  .nx-columns__band .nx-columns__label {
+    font-weight: 600;
+  }
+
+  .nx-columns__band-count {
+    flex: none;
+    color: var(--nx-text-subtle);
+    font-size: var(--nx-text-xs);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .nx-columns__children {
+    margin: 0 0 2px 13px;
+    padding: 0 0 0 9px;
+    border-left: 1px solid var(--nx-border);
+    list-style: none;
+  }
+
+  /* A column whose band is hidden stays readable but plainly off. */
+  .nx-columns__row--child:has(input:disabled) .nx-columns__label {
+    color: var(--nx-text-subtle);
+  }
+
+  .nx-columns__handle {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: var(--nx-columns-row-h);
+    padding: 0;
+    border: 0;
+    border-radius: var(--nx-radius-sm);
+    background: none;
+    color: var(--nx-text-subtle);
+    cursor: grab;
+    touch-action: none;
+  }
+
+  .nx-columns__handle:hover {
+    color: var(--nx-text);
+  }
+
+  .nx-columns__handle:focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  .nx-columns[data-dragging] .nx-columns__handle {
+    cursor: grabbing;
+  }
+
+  .nx-columns__handle--fixed {
+    cursor: default;
+  }
+
+  .nx-columns__choice {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: 2px 0;
+  }
+
+  .nx-columns__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .nx-columns__pin {
+    display: inline-flex;
+    flex: none;
+    color: var(--nx-text-subtle);
+  }
+
+  .nx-columns__pin .nx-icon {
+    width: 14px;
+    height: 14px;
+  }
+
+  .nx-columns__note {
+    margin: 6px 0 0;
+    padding: 0 var(--nx-space-2);
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    line-height: 1.4;
+  }
+
+  /* The Filters panel: one column of small inputs (the form's grid spans every cell this narrow), and the rows left. */
+  .nx-table-filters {
+    --nx-form-row-gap: var(--nx-space-3);
+    width: min(22rem, calc(100vw - 16px));
+    font-size: var(--nx-text-sm);
+  }
+
+  /* In line with the head, with room for a focus ring inside the scroller. */
+  .nx-table-filters__form {
+    padding: 2px var(--nx-space-2);
+  }
+
+  .nx-table-filters__rows {
+    margin-right: auto;
+    padding-left: var(--nx-space-2);
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    font-variant-numeric: tabular-nums;
+  }
+}