@soxa-ui/theme-base 0.0.0-stage → 0.3.0-beta.1

package/src/components/table.css

@@ -0,0 +1,1513 @@
+/* ─── Table ───────────────────────────────────────────────────
+ * A table after the APG Table and Sortable Table patterns.
+ *
+ *   .so-table__viewport              window around the table — a block: scrolls sideways
+ *     .so-table                      root — `table`
+ *       .so-table__head              head — `thead`
+ *         .so-table__head-row        header row — `tr`
+ *           .so-table__select        header of the selection column — `th`, "select all" checkbox
+ *           .so-table-column         column header — Table.Column (`th`)
+ *             __content             content row: the label and the sort button
+ *               __text              label — on every column, the `header` slot
+ *               __sort              sort button (Button) of a sortable column
+ *                 __sort-icon       arrow in its text area: icon of the `arrowUpward` role
+ *             __resizer             strip of the width handle at the header's end
+ *               __input             its field — `input type="range"`, transparent
+ *       .so-table__body              body — `tbody`
+ *         .so-table-row              row — Table.Row (`tr`)
+ *           __select                cell of the selection column — `td`, the row's checkbox
+ *           __cell                  cell — `td`, `th` in the row header column
+ *         .so-table__empty-row       row of the empty state — `tr`
+ *           .so-table__empty         its full-width cell — `td`, the `empty` slot
+ *         .so-table__filler-row      window spacer — `tr` in place of the skipped rows
+ *           .so-table__filler        its full-width cell — `td`, height from the style
+ *
+ * From the core: on the root — `data-disabled`, the `--size-*` modifier,
+ * `data-overflow` (columns wider than the place; absent — the place isn't
+ * measured yet), `data-sized` (a width is known for every shown column — its
+ * own or the core's layout; absent — no columns, or one at least has no width),
+ * `data-sticky-head`, `data-virtual` (the window of a `Virtual` wrapper) and
+ * the gesture flags, absent at rest altogether: `data-resizing` — a width handle
+ * is dragged, `data-dragging` — a column is being moved, `data-reorder-preview`
+ * — a column of a `column` table is being moved; on a column header —
+ * `data-align`, `data-resizing` (its handle is dragged), `data-reorderable` and
+ * `data-dragging` (it is carried), and the width as `--so-table-column-width`;
+ * on a row — `data-disabled`; on a cell — the column's `data-align`. The markup
+ * writes the height of the skipped rows to the spacer (`--so-filler-height`,
+ * shared with other lists), and the layout plugin `TTableHeadPlugin` the height
+ * of the sticky head (`--so-table-head-height`, `setup/` of the shared layer;
+ * the theme installs it).
+ *
+ * Geometry follows Button of the same size (`button.css`): a body row is its
+ * height and a focus ring bleed above and below (`--so-table-bleed`), a cell's
+ * padding is its padding and the same bleed. A button the consumer puts into a
+ * cell or a header label fits the row without stretching it, and its focus ring
+ * stays in its cell: not on the next column and not past the table's edge,
+ * where a scrolling container would clip it. The head row is lower than a body
+ * row (`--so-table-head-trim`): column labels are denser than data. The
+ * selection column is as wide as a CheckBox box of the same size
+ * (`check-box.css`) and the cell padding on both sides. The cells have a font
+ * scale of their own (`--so-table-font-size-<size>`), a step smaller than
+ * Button's: a table is data, not button labels. The block puts the steps of its
+ * size into variables on the table root, and everything else counts from them;
+ * a nested table sets its own on its own root and doesn't inherit the outer
+ * ones. For the same reason the rules that depend on the root are written from
+ * it with child combinators — they don't reach the cells of a nested table.
+ *
+ * The core lays out the column widths — of a column with its own width and of
+ * one without — by the place of the window and the table's `columnFit`, within
+ * the column's bounds. The browser's fixed layout reads neither `min-width` nor
+ * `max-width` of cells and can't share the place between bounded columns, so
+ * the base computes no widths: it puts the column's variable into the header's
+ * width. The layout is fixed (`table-layout: fixed`): a column with a width
+ * gets exactly it, whatever the content. The content doesn't change the width:
+ * there may be thousands of rows, the layout needn't measure every cell, and the
+ * columns don't jump when the rows are sorted, filtered or replaced. A long word
+ * wraps at the column's width and doesn't spill past its edge.
+ *
+ * With every shown column's width known, the table is as wide as their sum, not
+ * as the whole place: otherwise the browser's layout would hand the excess out
+ * to all columns, the widths would drift from the core's, and the handle
+ * wouldn't hold the edge. The core has already summed them by the place: in the
+ * filling modes the sum is the place, and wider than it the window scrolls.
+ * Until the core lays the columns out by a measured place (no `data-overflow`
+ * yet — the first frame, the server), a column without a width takes its
+ * minimum (below, at the header), and the table is the sum of the widths too:
+ * as wide as the place, it would hand the excess out to every column, the
+ * selection column included, and the layout plugin, measuring that column with
+ * its share, would give the core a place short by it — the columns would be
+ * laid out twice. Measured, the table is as wide as the place while a width is
+ * missing — there are no columns.
+ *
+ * The window (`__viewport`) is a block as wide as the place, with the table in
+ * it. The base makes it a block, not the tag: the window is a `div` by default
+ * (`<div so-table>` in Angular, `<div is="so-table">` in Web Components), but in
+ * Angular the consumer picks the window's tag, and on an inline tag it would
+ * stand inline without the rule. Columns wider than the place
+ * (`data-overflow='true'` on the table) — the window scrolls sideways; they fit
+ * (`false`) — it clips horizontally (`overflow-x: clip`): a frame where the
+ * measure lags behind the window's narrowing doesn't flash a scrollbar, and
+ * `clip` doesn't make the window a scroll container. No flag — the window clips
+ * nothing. The sticky head is an exception (below, at it). Chromium paints a
+ * scrollable window whole, not the band at the screen, and the rows painted
+ * past that band pay for the sideways scroll (`packages/themes/base/AGENTS.md`,
+ * «Окно и закреплённая шапка Table»).
+ *
+ * Rules multiplied by every body cell stand only under a gesture flag that is
+ * absent at rest, and no rule has a `:has()` condition on the table root: the
+ * browser checks it by walking the whole body on every style recalc of the root
+ * (`packages/themes/base/AGENTS.md`, «Правило на каждую ячейку Table — под
+ * признаком, которого на покое нет»). So what a condition over the headers
+ * could tell, the core gives as a root flag: widths — `data-sized`, a gesture —
+ * `data-resizing` and `data-dragging`. Guarded by `table-reorder.spec.ts`.
+ *
+ * The table has no surface of its own — no background, no border. Only the
+ * sticky head has an opaque background — the surface of the place (below).
+ *
+ * The look — text color and tabular figures, the weight of headers and cells,
+ * the lines of the head and the rows, selection and hover veils, header
+ * corners, the grid's focus ring, the sort button and arrow — its visibility,
+ * turn and priority number, — the width handle's line, the column ghost, the
+ * carried header's look, the drop mark, the reorder motion — neighbours making
+ * room, landing, the whole column, — the line under the sticky head and forced
+ * colors mode — is the theme's. */
+
+/* The bleed around a button in a cell — exactly the focus ring (the same number
+ * as in Calendar); how much lower the head row is than a body row; the cell
+ * font by size; the minimum of a column without a width; the gap between the
+ * label and the sort button and the button's padding around the arrow; the
+ * width of the handle's strip. The defaults are the numbers of the oren theme; a
+ * theme sets its own on the document root. */
+:root {
+	--so-table-bleed: 0.25rem;
+	--so-table-head-trim: 2px;
+
+	/* The cells are a step smaller than the text next to them, and every step
+	 * counts from the font of the place: 4px smaller at `sm`, 2px at `normal`,
+	 * the font of the place at `lg`, 2px and 4px larger at `xl` and `2xl` — 12 /
+	 * 14 / 16 / 18 / 20px at a 16px place, 10 / 12 / 14 / 16 / 18px at 14px.
+	 * `em` resolves where the variable is read: on the root `table`, against its
+	 * viewport, that is the place. The place of a nested table is its cell. */
+	--so-table-font-size-sm: calc(1em - 0.25rem);
+	--so-table-line-height-sm: calc(1 / 0.75);
+	--so-table-font-size-normal: calc(1em - 0.125rem);
+	--so-table-line-height-normal: calc(1.25 / 0.875);
+	--so-table-font-size-lg: 1em;
+	--so-table-line-height-lg: 1.5;
+	--so-table-font-size-xl: calc(1em + 0.125rem);
+	--so-table-line-height-xl: calc(1.75 / 1.125);
+	--so-table-font-size-2xl: calc(1em + 0.25rem);
+	--so-table-line-height-2xl: calc(1.75 / 1.25);
+
+	--so-table-column-min-width: 10em;
+	--so-table-sort-gap: 0.25rem;
+	--so-table-sort-padding: 0.125rem;
+	--so-table-resizer-width: 14px;
+}
+
+/* Without a modifier the size is `normal`: the core always writes `--size-*`,
+ * but the block must look like the default without it too.
+ *
+ * - `--so-table-button`, `--so-table-button-inline` — height and padding of
+ *   Button of the same size;
+ * - `--so-table-row` — a body row's height: the button and the bleed above and
+ *   below;
+ * - `--so-table-head-row` — the head row's height. The sort button is smaller
+ *   than a button of the size, and its focus ring fits the head;
+ * - `--so-table-cell-inline` — a cell's padding: the button's padding and the
+ *   same bleed. A header label stands in the same padding, right above the text
+ *   of the cells;
+ * - `--so-table-check` — the side of the checkbox box.
+ *
+ * A stacking context of its own (`isolation`): the handle strips are raised
+ * over the next header and the sort buttons (`z-index`), but the raise doesn't
+ * reach over the table's neighbours on the page. */
+.so-table {
+	--so-table-button: var(--so-button-height-normal);
+	--so-table-button-inline: var(--so-button-padding-normal);
+	--so-table-check: var(--so-check-box-size-normal);
+	--so-table-row: calc(var(--so-table-button) + 2 * var(--so-table-bleed));
+	--so-table-head-row: calc(var(--so-table-row) - var(--so-table-head-trim));
+	--so-table-cell-inline: calc(var(--so-table-button-inline) + var(--so-table-bleed));
+	width: 100%;
+	table-layout: fixed;
+	border-collapse: collapse;
+	isolation: isolate;
+	font-size: var(--so-table-font-size-normal);
+	line-height: var(--so-table-line-height-normal);
+}
+
+.so-table--size-sm {
+	--so-table-button: var(--so-button-height-sm);
+	--so-table-button-inline: var(--so-button-padding-sm);
+	--so-table-check: var(--so-check-box-size-sm);
+	font-size: var(--so-table-font-size-sm);
+	line-height: var(--so-table-line-height-sm);
+}
+
+.so-table--size-normal {
+	--so-table-button: var(--so-button-height-normal);
+	--so-table-button-inline: var(--so-button-padding-normal);
+	--so-table-check: var(--so-check-box-size-normal);
+	font-size: var(--so-table-font-size-normal);
+	line-height: var(--so-table-line-height-normal);
+}
+
+.so-table--size-lg {
+	--so-table-button: var(--so-button-height-lg);
+	--so-table-button-inline: var(--so-button-padding-lg);
+	--so-table-check: var(--so-check-box-size-lg);
+	font-size: var(--so-table-font-size-lg);
+	line-height: var(--so-table-line-height-lg);
+}
+
+.so-table--size-xl {
+	--so-table-button: var(--so-button-height-xl);
+	--so-table-button-inline: var(--so-button-padding-xl);
+	--so-table-check: var(--so-check-box-size-xl);
+	font-size: var(--so-table-font-size-xl);
+	line-height: var(--so-table-line-height-xl);
+}
+
+.so-table--size-2xl {
+	--so-table-button: var(--so-button-height-2xl);
+	--so-table-button-inline: var(--so-button-padding-2xl);
+	--so-table-check: var(--so-check-box-size-2xl);
+	font-size: var(--so-table-font-size-2xl);
+	line-height: var(--so-table-line-height-2xl);
+}
+
+/* A disabled table fades as a whole, by its root (`disabled.css`) — the head,
+ * the rows and the empty state. Its rows are disabled with it — their
+ * `disabled` spreads from the table, — the sort buttons and checkboxes too, and
+ * under the faded root they don't fade a second time. */
+.so-table[data-disabled='true'] {
+	opacity: var(--so-disabled-opacity);
+}
+
+.so-table[data-disabled='true'] > * {
+	--so-disabled-opacity: 1;
+}
+
+/* The table is as wide as the sum of its column widths (see above) until the
+ * place is measured (no `data-overflow`) and once a width is known for every
+ * shown column (`data-sized`). A fixed table is never narrower than the sum of
+ * its column widths, whatever width it is given (CSS 2.1, 17.5.2.1), so at zero
+ * it is exactly the sum. A measured table without columns has no `data-sized` —
+ * an empty head would collapse it. */
+.so-table:not([data-overflow]),
+.so-table[data-sized='true'] {
+	inline-size: 0;
+}
+
+/* While a handle is dragged — the handle's cursor over the whole table and no
+ * text selection: the pointer leaves the strip, and the column's edge follows
+ * it. */
+.so-table[data-resizing='true'] {
+	cursor: col-resize;
+	-webkit-user-select: none;
+	user-select: none;
+}
+
+/* The window — a block that scrolls sideways by the table's flag (see above).
+ * With a sticky head the window doesn't scroll (below, at it). The `:has()`
+ * condition here is on the window, not on the table root: there is one table
+ * under the window. */
+.so-table__viewport {
+	display: block;
+}
+
+.so-table__viewport:has(> .so-table[data-overflow='false']) {
+	overflow-x: clip;
+}
+
+.so-table__viewport:has(> .so-table[data-overflow='true']:not([data-sticky-head='true'])) {
+	overflow-x: auto;
+}
+
+/* Cells — what all of them share, in the head and in the body: padding at the
+ * row's ends and the middle vertically. The padding above and below is the
+ * focus ring bleed, and the row itself holds the height: a button of the
+ * table's size fits the row exactly, and a line of text stands in the middle.
+ * Text of several lines stretches the table row — with the same padding from
+ * the line as a button has.
+ *
+ * Alignment follows `data-align`: the core writes it on a cell; the cells of
+ * the selection column have none and stand at the start. The sides are
+ * logical, in RTL `start` is the right edge. The browser centers `th` — the base
+ * sets the side itself.
+ *
+ * A long word (an address, an email, a number) wraps at the column's width
+ * instead of going under the next one: the layout is fixed, and the content
+ * doesn't widen the column. */
+.so-table-column,
+.so-table__select,
+.so-table-row__cell,
+.so-table-row__select,
+.so-table__empty {
+	padding-inline: var(--so-table-cell-inline);
+	padding-block: var(--so-table-bleed);
+	text-align: start;
+	vertical-align: middle;
+	overflow-wrap: break-word;
+}
+
+.so-table-column[data-align='center'],
+.so-table__select[data-align='center'],
+.so-table-row__cell[data-align='center'],
+.so-table-row__select[data-align='center'],
+.so-table__empty[data-align='center'] {
+	text-align: center;
+}
+
+.so-table-column[data-align='end'],
+.so-table__select[data-align='end'],
+.so-table-row__cell[data-align='end'],
+.so-table-row__select[data-align='end'],
+.so-table__empty[data-align='end'] {
+	text-align: end;
+}
+
+/* The head row is `--so-table-head-trim` lower than a body row. */
+.so-table__head-row {
+	block-size: var(--so-table-head-row);
+}
+
+/* The head is raised over the body (`z-index`) — sticky or in the flow: it is
+ * painted after everything positioned in the body — the field of a row's
+ * checkbox, the `required` mark of Switch, the checkbox itself. There are
+ * several such pieces per row, and without the raise the browser would paint
+ * them after the headers. Then a header that became a layer of its own — a
+ * neighbour making room with the theme's transition, the landing of a carried
+ * one, a sort arrow turning — would make it check every body piece against
+ * that layer on every layerization (`packages/themes/base/AGENTS.md`, «Правило
+ * на каждую ячейку Table — под признаком, которого на покое нет»). A raised
+ * head is painted after the body, and there is nothing to check against its
+ * layers. Under a sticky head (below) the raise also takes the presses: rows go
+ * under it, and a checkbox's field would catch the presses on it from under
+ * the head.
+ *
+ * The raise is `sticky` without an edge, not `relative`: with no inset the two
+ * are the same — the same stacking context and painting order, — but WebKit
+ * turns `relative` on a row group into `static` and keeps `sticky` (the sticky
+ * head stands on it). The sticky head only adds the edge and the backing.
+ *
+ * The body is not made a layer of its own: in its own layer the browser puts a
+ * row's veil next to its line rather than under it, and a light stripe shows
+ * between two selected rows. A raise in a consumer's cell higher than the
+ * head's goes over it. */
+.so-table > .so-table__head {
+	position: sticky;
+	z-index: 30;
+}
+
+/* A column header. The width is the variable the core computes: the column's
+ * own width or the layout's by the place. Without it — until the core lays the
+ * columns out — the column takes its minimum: `--so-table-column-min-width` (in
+ * oren ten font sizes, about twenty characters of text) and the cell padding on
+ * both sides. The minimum is the width itself, not a strut in the header: fixed
+ * layout takes the column widths from the header cells, and WebKit doesn't
+ * look at their content at all. Positioned: the width handle's strip stands at
+ * its end (below). */
+.so-table-column {
+	position: relative;
+	inline-size: var(
+		--so-table-column-width,
+		calc(var(--so-table-column-min-width) + 2 * var(--so-table-cell-inline))
+	);
+}
+
+/* The header's content is a row: the label, and on a sortable column the sort
+ * button after it, centered vertically. The label is the head cell's text: it
+ * stands in the header's padding right above the text of the cells below.
+ *
+ * The label shrinks below its longest word (`min-width: 0`): the column wraps
+ * such a word, as in a cell, instead of pushing the button past the edge. It
+ * doesn't grow: the button stands right after the label, like the arrow in
+ * ClickUp tables, instead of drifting to the other edge of the cell. The lines
+ * of a wrapped label go to the column's side: the label inherits `text-align`
+ * from the header.
+ *
+ * Between the label and the button — the `--so-table-sort-gap` gap: no narrower
+ * than half of what the button lacks to the minimum target, so the button's hit
+ * zone (below) doesn't reach over the label — the consumer's own control in the
+ * label is pressable whole. */
+.so-table-column__content {
+	display: flex;
+	align-items: center;
+	gap: var(--so-table-sort-gap);
+}
+
+.so-table-column__text {
+	min-width: 0;
+}
+
+/* Centered — the label with the button in the middle of the cell. */
+.so-table-column[data-align='center'] > .so-table-column__content {
+	justify-content: center;
+}
+
+/* At the end — at the cell's end, with the button before the label: the label
+ * stands over the end of the column's numbers, and the arrow on the outer
+ * side. The flex order is logical, and in RTL the button moves to the right of
+ * the label by itself; the reversed row starts at the cell's end. */
+.so-table-column[data-align='end'] > .so-table-column__content {
+	flex-direction: row-reverse;
+}
+
+/* The sort button is a square around the arrow in the header's font (`1em`)
+ * with `--so-table-sort-padding` around it: the base drops Button's sized height
+ * and padding — the markup passes the button no size, the column doesn't know
+ * the table's size, and the font comes from the header. The path from the
+ * header to the button is child combinators: the header's rules don't reach a
+ * button in the label of a nested table. The weight is above Button's scale
+ * (`button.css`).
+ *
+ * The arrow with the priority number the theme appends stands centered in the
+ * button, whole: Button's text area would cut the number with an ellipsis.
+ *
+ * The hit zone is an invisible square centered on the button, its side the
+ * minimum pointer target (`--so-target-size`, `target.css`), as for a tag's
+ * cross: the button itself is smaller. The zone is the button's pseudo-element:
+ * a press on it is a press on the button, and the button looks the same. The
+ * height fits at any size, and the zone doesn't reach over the label: the row's
+ * gap keeps them apart (above). At the border between columns the width
+ * handle's strip lies over the button and its zone (below): the press there is
+ * the handle's. */
+.so-table-column > .so-table-column__content > .so-table-column__sort {
+	flex-shrink: 0;
+	height: auto;
+	padding: var(--so-table-sort-padding);
+	font: inherit;
+}
+
+.so-table-column > .so-table-column__content > .so-table-column__sort > .so-button__text {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	overflow: visible;
+}
+
+.so-table-column > .so-table-column__content > .so-table-column__sort::before {
+	content: '';
+	position: absolute;
+	inset: calc(50% - var(--so-target-size) / 2);
+}
+
+/* The arrow's wrapper is an inline flex centered on the line. The theme turns
+ * the wrapper's content, not the wrapper: the priority number stands in it as
+ * well and stays upright. */
+.so-table-column__sort-icon {
+	display: inline-flex;
+	flex-shrink: 0;
+	align-items: center;
+}
+
+.so-table-column__sort-icon > * {
+	flex-shrink: 0;
+}
+
+/* The width handle is a strip at the header's end, its full height. The strip
+ * itself is invisible; the theme draws the border line between the columns
+ * that shows when the pointer reaches for the handle. The cursor is the width
+ * handle's.
+ *
+ * The strip is a grab zone `--so-table-resizer-width` wide (14 px in oren).
+ * That is narrower than the minimum pointer target of WCAG 2.5.8 (24 px) — the
+ * owner's decision: a 24 px strip took 12 px off the head cell at each edge of
+ * a column, and a narrow column couldn't be sorted without touching the handle.
+ * Without a pointer the column's width changes with the keys on the handle's
+ * field. The strip stands centered on the border between columns: half on its
+ * own header, half on the next one — where one aims to take the edge. Over the
+ * next header and over the sort buttons (`z-index`): the button stands at the
+ * label, and with a label as wide as the column it reaches the border — there
+ * the press is the handle's, and past the strip the button's.
+ *
+ * The strip takes the gesture whole (`touch-action: none`): a finger dragging
+ * a column's edge must not scroll the page.
+ *
+ * On the last column the strip lies whole on its own header: past the table's
+ * edge it would widen the scroll of its container. */
+.so-table-column__resizer {
+	position: absolute;
+	inset-block: 0;
+	inset-inline-end: calc(-1 * var(--so-table-resizer-width) / 2);
+	z-index: 1;
+	inline-size: var(--so-table-resizer-width);
+	cursor: col-resize;
+	-webkit-user-select: none;
+	user-select: none;
+	touch-action: none;
+}
+
+.so-table-column:last-child > .so-table-column__resizer {
+	inset-inline-end: 0;
+}
+
+/* The handle's field fills the strip and is transparent: it stays in the
+ * accessibility tree and the focus order, and a screen reader draws its cursor
+ * frame around the strip. It doesn't catch the pointer: the plugin drags, not
+ * the browser — otherwise two would move the edge. */
+.so-table-column__input {
+	position: absolute;
+	inset: 0;
+	width: 100%;
+	height: 100%;
+	margin: 0;
+	padding: 0;
+	opacity: 0;
+	appearance: none;
+	pointer-events: none;
+}
+
+/* A column is moved by its header. The column extension writes the gesture's
+ * marks, the gesture plugin the shifts. A finger dragging a header along the
+ * row doesn't scroll the table: along the row the gesture is the reorder's,
+ * across it the page's scroll.
+ *
+ * The carried header (`data-dragging`) is raised over its neighbours and their
+ * handles: it follows the pointer — by the shift the gesture plugin writes on
+ * it (`--so-table-column-drag`), in any motion mode, — while its look, the
+ * released header's way to its place and the drop mark over it are the
+ * theme's. The shift is `translate`, not a margin: the head's layout doesn't
+ * change with it. The carried header has no handle — no one drags the column's
+ * edge now. */
+.so-table-column[data-reorderable='true'] {
+	touch-action: pan-y;
+}
+
+.so-table-column[data-dragging='true'] {
+	z-index: 3;
+	translate: var(--so-table-column-drag, 0) 0;
+}
+
+.so-table-column[data-dragging='true'] > .so-table-column__resizer {
+	visibility: hidden;
+}
+
+/* The whole column (`reorderPreview: 'column'`): the cells of the drawn rows
+ * follow the headers — a neighbour's cells shift with its header, and the cells
+ * of the carried column are hidden in their place. The base ties a cell to its
+ * header by the column's number: the cell of the k-th column of a row
+ * (`:nth-child(k of .so-table-row__cell)` — the selection column doesn't count)
+ * follows the k-th header of the head. Rows and cells carry no marks — they
+ * would be repainted on every change of the place: the body learns of the
+ * gesture from the head, and rows the window draws in mid-gesture pick it up by
+ * themselves. Up to thirty numbers: `sibling-index()` would give the number
+ * without enumeration, but it is Baseline only since August 2026, and the
+ * themes' browser policy doesn't take it yet (the owner's decision).
+ *
+ * Everything here stands under the root flag `data-reorder-preview`, present
+ * only in a gesture: the column extension sets it when a column of a `column`
+ * table is taken and removes it with the same repaint that moves the column. A
+ * rule per column number is multiplied by every body cell, and the browser
+ * matches a selector right to left — from the cell, reaching the root last; it
+ * sees the flag's name on the ancestors before matching (the ancestor filter),
+ * but not its value. So at rest no ancestor of a cell has the name, and the
+ * rule costs a cell nothing. Don't lengthen the ancestor chain of a cell rule —
+ * root, body, row: the filter keeps only a few nearest names of a selector, and
+ * the root's flag would drop out of them.
+ *
+ * The body reads the head through a `:has()` selector on the head itself, and
+ * the body, the head's sibling, gets the variables — what to do with the cells
+ * of each column (`--so-table-cells-<k>-shift`, `--so-table-cells-<k>-hidden`);
+ * the cells only read them. The column's number isn't last in the name: the
+ * base's guard would read a name ending in a number as a step of the theme's
+ * palette. A condition on the root would walk the whole body to depth three,
+ * all its rows and cells, — on the head the walk is a score of its nodes. A
+ * condition on the cell costs more still: the browser rechecks it for every
+ * cell on every change of a mark.
+ *
+ * Shifting and hiding the cells is the theme's call — its motion: the
+ * variables it sets on the body — how far to shift the neighbours' cells
+ * (`--so-table-body-shift`: they all give way to one side) and what to do with
+ * the carried column's cells (`--so-table-body-dragged`); the cells'
+ * transition is the theme's too, under the same root flag. The rules per column
+ * number only hand the variables to the cells and change nothing without a
+ * theme: without the variable the declaration is invalid, and the cell stays
+ * as it was — unshifted, with the row's visibility. With more than thirty
+ * columns the theme sets no body variables, and the body stands whole rather
+ * than partly. */
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row > .so-table-column:nth-child(1 of .so-table-column)[data-shift]
+	)
+	~ .so-table__body {
+	--so-table-cells-1-shift: var(--so-table-body-shift);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row
+			> .so-table-column:nth-child(1 of .so-table-column)[data-dragging='true']
+	)
+	~ .so-table__body {
+	--so-table-cells-1-hidden: var(--so-table-body-dragged);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__body
+	> .so-table-row
+	> .so-table-row__cell:nth-child(1 of .so-table-row__cell) {
+	translate: var(--so-table-cells-1-shift) 0;
+	visibility: var(--so-table-cells-1-hidden);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row > .so-table-column:nth-child(2 of .so-table-column)[data-shift]
+	)
+	~ .so-table__body {
+	--so-table-cells-2-shift: var(--so-table-body-shift);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row
+			> .so-table-column:nth-child(2 of .so-table-column)[data-dragging='true']
+	)
+	~ .so-table__body {
+	--so-table-cells-2-hidden: var(--so-table-body-dragged);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__body
+	> .so-table-row
+	> .so-table-row__cell:nth-child(2 of .so-table-row__cell) {
+	translate: var(--so-table-cells-2-shift) 0;
+	visibility: var(--so-table-cells-2-hidden);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row > .so-table-column:nth-child(3 of .so-table-column)[data-shift]
+	)
+	~ .so-table__body {
+	--so-table-cells-3-shift: var(--so-table-body-shift);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row
+			> .so-table-column:nth-child(3 of .so-table-column)[data-dragging='true']
+	)
+	~ .so-table__body {
+	--so-table-cells-3-hidden: var(--so-table-body-dragged);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__body
+	> .so-table-row
+	> .so-table-row__cell:nth-child(3 of .so-table-row__cell) {
+	translate: var(--so-table-cells-3-shift) 0;
+	visibility: var(--so-table-cells-3-hidden);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row > .so-table-column:nth-child(4 of .so-table-column)[data-shift]
+	)
+	~ .so-table__body {
+	--so-table-cells-4-shift: var(--so-table-body-shift);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row
+			> .so-table-column:nth-child(4 of .so-table-column)[data-dragging='true']
+	)
+	~ .so-table__body {
+	--so-table-cells-4-hidden: var(--so-table-body-dragged);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__body
+	> .so-table-row
+	> .so-table-row__cell:nth-child(4 of .so-table-row__cell) {
+	translate: var(--so-table-cells-4-shift) 0;
+	visibility: var(--so-table-cells-4-hidden);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row > .so-table-column:nth-child(5 of .so-table-column)[data-shift]
+	)
+	~ .so-table__body {
+	--so-table-cells-5-shift: var(--so-table-body-shift);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row
+			> .so-table-column:nth-child(5 of .so-table-column)[data-dragging='true']
+	)
+	~ .so-table__body {
+	--so-table-cells-5-hidden: var(--so-table-body-dragged);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__body
+	> .so-table-row
+	> .so-table-row__cell:nth-child(5 of .so-table-row__cell) {
+	translate: var(--so-table-cells-5-shift) 0;
+	visibility: var(--so-table-cells-5-hidden);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row > .so-table-column:nth-child(6 of .so-table-column)[data-shift]
+	)
+	~ .so-table__body {
+	--so-table-cells-6-shift: var(--so-table-body-shift);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row
+			> .so-table-column:nth-child(6 of .so-table-column)[data-dragging='true']
+	)
+	~ .so-table__body {
+	--so-table-cells-6-hidden: var(--so-table-body-dragged);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__body
+	> .so-table-row
+	> .so-table-row__cell:nth-child(6 of .so-table-row__cell) {
+	translate: var(--so-table-cells-6-shift) 0;
+	visibility: var(--so-table-cells-6-hidden);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row > .so-table-column:nth-child(7 of .so-table-column)[data-shift]
+	)
+	~ .so-table__body {
+	--so-table-cells-7-shift: var(--so-table-body-shift);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row
+			> .so-table-column:nth-child(7 of .so-table-column)[data-dragging='true']
+	)
+	~ .so-table__body {
+	--so-table-cells-7-hidden: var(--so-table-body-dragged);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__body
+	> .so-table-row
+	> .so-table-row__cell:nth-child(7 of .so-table-row__cell) {
+	translate: var(--so-table-cells-7-shift) 0;
+	visibility: var(--so-table-cells-7-hidden);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row > .so-table-column:nth-child(8 of .so-table-column)[data-shift]
+	)
+	~ .so-table__body {
+	--so-table-cells-8-shift: var(--so-table-body-shift);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row
+			> .so-table-column:nth-child(8 of .so-table-column)[data-dragging='true']
+	)
+	~ .so-table__body {
+	--so-table-cells-8-hidden: var(--so-table-body-dragged);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__body
+	> .so-table-row
+	> .so-table-row__cell:nth-child(8 of .so-table-row__cell) {
+	translate: var(--so-table-cells-8-shift) 0;
+	visibility: var(--so-table-cells-8-hidden);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row > .so-table-column:nth-child(9 of .so-table-column)[data-shift]
+	)
+	~ .so-table__body {
+	--so-table-cells-9-shift: var(--so-table-body-shift);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row
+			> .so-table-column:nth-child(9 of .so-table-column)[data-dragging='true']
+	)
+	~ .so-table__body {
+	--so-table-cells-9-hidden: var(--so-table-body-dragged);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__body
+	> .so-table-row
+	> .so-table-row__cell:nth-child(9 of .so-table-row__cell) {
+	translate: var(--so-table-cells-9-shift) 0;
+	visibility: var(--so-table-cells-9-hidden);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row > .so-table-column:nth-child(10 of .so-table-column)[data-shift]
+	)
+	~ .so-table__body {
+	--so-table-cells-10-shift: var(--so-table-body-shift);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row
+			> .so-table-column:nth-child(10 of .so-table-column)[data-dragging='true']
+	)
+	~ .so-table__body {
+	--so-table-cells-10-hidden: var(--so-table-body-dragged);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__body
+	> .so-table-row
+	> .so-table-row__cell:nth-child(10 of .so-table-row__cell) {
+	translate: var(--so-table-cells-10-shift) 0;
+	visibility: var(--so-table-cells-10-hidden);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row > .so-table-column:nth-child(11 of .so-table-column)[data-shift]
+	)
+	~ .so-table__body {
+	--so-table-cells-11-shift: var(--so-table-body-shift);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row
+			> .so-table-column:nth-child(11 of .so-table-column)[data-dragging='true']
+	)
+	~ .so-table__body {
+	--so-table-cells-11-hidden: var(--so-table-body-dragged);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__body
+	> .so-table-row
+	> .so-table-row__cell:nth-child(11 of .so-table-row__cell) {
+	translate: var(--so-table-cells-11-shift) 0;
+	visibility: var(--so-table-cells-11-hidden);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row > .so-table-column:nth-child(12 of .so-table-column)[data-shift]
+	)
+	~ .so-table__body {
+	--so-table-cells-12-shift: var(--so-table-body-shift);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row
+			> .so-table-column:nth-child(12 of .so-table-column)[data-dragging='true']
+	)
+	~ .so-table__body {
+	--so-table-cells-12-hidden: var(--so-table-body-dragged);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__body
+	> .so-table-row
+	> .so-table-row__cell:nth-child(12 of .so-table-row__cell) {
+	translate: var(--so-table-cells-12-shift) 0;
+	visibility: var(--so-table-cells-12-hidden);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row > .so-table-column:nth-child(13 of .so-table-column)[data-shift]
+	)
+	~ .so-table__body {
+	--so-table-cells-13-shift: var(--so-table-body-shift);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row
+			> .so-table-column:nth-child(13 of .so-table-column)[data-dragging='true']
+	)
+	~ .so-table__body {
+	--so-table-cells-13-hidden: var(--so-table-body-dragged);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__body
+	> .so-table-row
+	> .so-table-row__cell:nth-child(13 of .so-table-row__cell) {
+	translate: var(--so-table-cells-13-shift) 0;
+	visibility: var(--so-table-cells-13-hidden);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row > .so-table-column:nth-child(14 of .so-table-column)[data-shift]
+	)
+	~ .so-table__body {
+	--so-table-cells-14-shift: var(--so-table-body-shift);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row
+			> .so-table-column:nth-child(14 of .so-table-column)[data-dragging='true']
+	)
+	~ .so-table__body {
+	--so-table-cells-14-hidden: var(--so-table-body-dragged);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__body
+	> .so-table-row
+	> .so-table-row__cell:nth-child(14 of .so-table-row__cell) {
+	translate: var(--so-table-cells-14-shift) 0;
+	visibility: var(--so-table-cells-14-hidden);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row > .so-table-column:nth-child(15 of .so-table-column)[data-shift]
+	)
+	~ .so-table__body {
+	--so-table-cells-15-shift: var(--so-table-body-shift);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row
+			> .so-table-column:nth-child(15 of .so-table-column)[data-dragging='true']
+	)
+	~ .so-table__body {
+	--so-table-cells-15-hidden: var(--so-table-body-dragged);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__body
+	> .so-table-row
+	> .so-table-row__cell:nth-child(15 of .so-table-row__cell) {
+	translate: var(--so-table-cells-15-shift) 0;
+	visibility: var(--so-table-cells-15-hidden);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row > .so-table-column:nth-child(16 of .so-table-column)[data-shift]
+	)
+	~ .so-table__body {
+	--so-table-cells-16-shift: var(--so-table-body-shift);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row
+			> .so-table-column:nth-child(16 of .so-table-column)[data-dragging='true']
+	)
+	~ .so-table__body {
+	--so-table-cells-16-hidden: var(--so-table-body-dragged);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__body
+	> .so-table-row
+	> .so-table-row__cell:nth-child(16 of .so-table-row__cell) {
+	translate: var(--so-table-cells-16-shift) 0;
+	visibility: var(--so-table-cells-16-hidden);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row > .so-table-column:nth-child(17 of .so-table-column)[data-shift]
+	)
+	~ .so-table__body {
+	--so-table-cells-17-shift: var(--so-table-body-shift);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row
+			> .so-table-column:nth-child(17 of .so-table-column)[data-dragging='true']
+	)
+	~ .so-table__body {
+	--so-table-cells-17-hidden: var(--so-table-body-dragged);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__body
+	> .so-table-row
+	> .so-table-row__cell:nth-child(17 of .so-table-row__cell) {
+	translate: var(--so-table-cells-17-shift) 0;
+	visibility: var(--so-table-cells-17-hidden);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row > .so-table-column:nth-child(18 of .so-table-column)[data-shift]
+	)
+	~ .so-table__body {
+	--so-table-cells-18-shift: var(--so-table-body-shift);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row
+			> .so-table-column:nth-child(18 of .so-table-column)[data-dragging='true']
+	)
+	~ .so-table__body {
+	--so-table-cells-18-hidden: var(--so-table-body-dragged);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__body
+	> .so-table-row
+	> .so-table-row__cell:nth-child(18 of .so-table-row__cell) {
+	translate: var(--so-table-cells-18-shift) 0;
+	visibility: var(--so-table-cells-18-hidden);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row > .so-table-column:nth-child(19 of .so-table-column)[data-shift]
+	)
+	~ .so-table__body {
+	--so-table-cells-19-shift: var(--so-table-body-shift);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row
+			> .so-table-column:nth-child(19 of .so-table-column)[data-dragging='true']
+	)
+	~ .so-table__body {
+	--so-table-cells-19-hidden: var(--so-table-body-dragged);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__body
+	> .so-table-row
+	> .so-table-row__cell:nth-child(19 of .so-table-row__cell) {
+	translate: var(--so-table-cells-19-shift) 0;
+	visibility: var(--so-table-cells-19-hidden);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row > .so-table-column:nth-child(20 of .so-table-column)[data-shift]
+	)
+	~ .so-table__body {
+	--so-table-cells-20-shift: var(--so-table-body-shift);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row
+			> .so-table-column:nth-child(20 of .so-table-column)[data-dragging='true']
+	)
+	~ .so-table__body {
+	--so-table-cells-20-hidden: var(--so-table-body-dragged);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__body
+	> .so-table-row
+	> .so-table-row__cell:nth-child(20 of .so-table-row__cell) {
+	translate: var(--so-table-cells-20-shift) 0;
+	visibility: var(--so-table-cells-20-hidden);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row > .so-table-column:nth-child(21 of .so-table-column)[data-shift]
+	)
+	~ .so-table__body {
+	--so-table-cells-21-shift: var(--so-table-body-shift);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row
+			> .so-table-column:nth-child(21 of .so-table-column)[data-dragging='true']
+	)
+	~ .so-table__body {
+	--so-table-cells-21-hidden: var(--so-table-body-dragged);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__body
+	> .so-table-row
+	> .so-table-row__cell:nth-child(21 of .so-table-row__cell) {
+	translate: var(--so-table-cells-21-shift) 0;
+	visibility: var(--so-table-cells-21-hidden);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row > .so-table-column:nth-child(22 of .so-table-column)[data-shift]
+	)
+	~ .so-table__body {
+	--so-table-cells-22-shift: var(--so-table-body-shift);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row
+			> .so-table-column:nth-child(22 of .so-table-column)[data-dragging='true']
+	)
+	~ .so-table__body {
+	--so-table-cells-22-hidden: var(--so-table-body-dragged);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__body
+	> .so-table-row
+	> .so-table-row__cell:nth-child(22 of .so-table-row__cell) {
+	translate: var(--so-table-cells-22-shift) 0;
+	visibility: var(--so-table-cells-22-hidden);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row > .so-table-column:nth-child(23 of .so-table-column)[data-shift]
+	)
+	~ .so-table__body {
+	--so-table-cells-23-shift: var(--so-table-body-shift);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row
+			> .so-table-column:nth-child(23 of .so-table-column)[data-dragging='true']
+	)
+	~ .so-table__body {
+	--so-table-cells-23-hidden: var(--so-table-body-dragged);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__body
+	> .so-table-row
+	> .so-table-row__cell:nth-child(23 of .so-table-row__cell) {
+	translate: var(--so-table-cells-23-shift) 0;
+	visibility: var(--so-table-cells-23-hidden);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row > .so-table-column:nth-child(24 of .so-table-column)[data-shift]
+	)
+	~ .so-table__body {
+	--so-table-cells-24-shift: var(--so-table-body-shift);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row
+			> .so-table-column:nth-child(24 of .so-table-column)[data-dragging='true']
+	)
+	~ .so-table__body {
+	--so-table-cells-24-hidden: var(--so-table-body-dragged);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__body
+	> .so-table-row
+	> .so-table-row__cell:nth-child(24 of .so-table-row__cell) {
+	translate: var(--so-table-cells-24-shift) 0;
+	visibility: var(--so-table-cells-24-hidden);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row > .so-table-column:nth-child(25 of .so-table-column)[data-shift]
+	)
+	~ .so-table__body {
+	--so-table-cells-25-shift: var(--so-table-body-shift);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row
+			> .so-table-column:nth-child(25 of .so-table-column)[data-dragging='true']
+	)
+	~ .so-table__body {
+	--so-table-cells-25-hidden: var(--so-table-body-dragged);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__body
+	> .so-table-row
+	> .so-table-row__cell:nth-child(25 of .so-table-row__cell) {
+	translate: var(--so-table-cells-25-shift) 0;
+	visibility: var(--so-table-cells-25-hidden);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row > .so-table-column:nth-child(26 of .so-table-column)[data-shift]
+	)
+	~ .so-table__body {
+	--so-table-cells-26-shift: var(--so-table-body-shift);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row
+			> .so-table-column:nth-child(26 of .so-table-column)[data-dragging='true']
+	)
+	~ .so-table__body {
+	--so-table-cells-26-hidden: var(--so-table-body-dragged);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__body
+	> .so-table-row
+	> .so-table-row__cell:nth-child(26 of .so-table-row__cell) {
+	translate: var(--so-table-cells-26-shift) 0;
+	visibility: var(--so-table-cells-26-hidden);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row > .so-table-column:nth-child(27 of .so-table-column)[data-shift]
+	)
+	~ .so-table__body {
+	--so-table-cells-27-shift: var(--so-table-body-shift);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row
+			> .so-table-column:nth-child(27 of .so-table-column)[data-dragging='true']
+	)
+	~ .so-table__body {
+	--so-table-cells-27-hidden: var(--so-table-body-dragged);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__body
+	> .so-table-row
+	> .so-table-row__cell:nth-child(27 of .so-table-row__cell) {
+	translate: var(--so-table-cells-27-shift) 0;
+	visibility: var(--so-table-cells-27-hidden);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row > .so-table-column:nth-child(28 of .so-table-column)[data-shift]
+	)
+	~ .so-table__body {
+	--so-table-cells-28-shift: var(--so-table-body-shift);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row
+			> .so-table-column:nth-child(28 of .so-table-column)[data-dragging='true']
+	)
+	~ .so-table__body {
+	--so-table-cells-28-hidden: var(--so-table-body-dragged);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__body
+	> .so-table-row
+	> .so-table-row__cell:nth-child(28 of .so-table-row__cell) {
+	translate: var(--so-table-cells-28-shift) 0;
+	visibility: var(--so-table-cells-28-hidden);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row > .so-table-column:nth-child(29 of .so-table-column)[data-shift]
+	)
+	~ .so-table__body {
+	--so-table-cells-29-shift: var(--so-table-body-shift);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row
+			> .so-table-column:nth-child(29 of .so-table-column)[data-dragging='true']
+	)
+	~ .so-table__body {
+	--so-table-cells-29-hidden: var(--so-table-body-dragged);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__body
+	> .so-table-row
+	> .so-table-row__cell:nth-child(29 of .so-table-row__cell) {
+	translate: var(--so-table-cells-29-shift) 0;
+	visibility: var(--so-table-cells-29-hidden);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row > .so-table-column:nth-child(30 of .so-table-column)[data-shift]
+	)
+	~ .so-table__body {
+	--so-table-cells-30-shift: var(--so-table-body-shift);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__head:has(
+		> .so-table__head-row
+			> .so-table-column:nth-child(30 of .so-table-column)[data-dragging='true']
+	)
+	~ .so-table__body {
+	--so-table-cells-30-hidden: var(--so-table-body-dragged);
+}
+
+.so-table[data-reorder-preview='column']
+	> .so-table__body
+	> .so-table-row
+	> .so-table-row__cell:nth-child(30 of .so-table-row__cell) {
+	translate: var(--so-table-cells-30-shift) 0;
+	visibility: var(--so-table-cells-30-hidden);
+}
+
+/* While a header is carried — the "grabbing" cursor over the whole table and
+ * no text selection: the pointer leaves its header. The core sets the root flag
+ * (`data-dragging`) for the whole gesture, landing included — as long as the
+ * carried header's mark. The sort button sets its own cursor, and in the
+ * carried header it is overridden. */
+.so-table[data-dragging='true'] {
+	cursor: grabbing;
+	-webkit-user-select: none;
+	user-select: none;
+}
+
+.so-table-column[data-dragging='true'] .so-table-column__sort {
+	cursor: grabbing;
+}
+
+/* The selection column is as wide as the checkbox box and the cell padding on
+ * both sides: from the table's edge to the box as far as to the text of the
+ * first column without selection, and from the box to the next column's text as
+ * far as between the texts of neighbouring columns. The box is centered in the
+ * cell, also when its size differs from the table's. */
+.so-table__select,
+.so-table-row__select {
+	inline-size: calc(var(--so-table-check) + 2 * var(--so-table-cell-inline));
+}
+
+.so-table__select > .so-check-box,
+.so-table-row__select > .so-check-box {
+	margin-inline: auto;
+}
+
+/* A row is as high as the button and the bleeds: never lower, and higher when
+ * a cell's content is.
+ *
+ * A disabled row fades its data cells. The checkbox in the selection cell is
+ * disabled with the row and fades by itself. The line under the row, which the
+ * theme draws, is the row's border, not the cells', and doesn't fade with
+ * them. */
+.so-table-row {
+	block-size: var(--so-table-row);
+}
+
+.so-table-row[data-disabled='true'] > .so-table-row__cell {
+	opacity: var(--so-disabled-opacity);
+}
+
+.so-table-row[data-disabled='true'] > .so-table-row__cell > * {
+	--so-disabled-opacity: 1;
+}
+
+/* The empty state is a full-width cell with centered text. The padding above
+ * and below is a table row each: a table without rows doesn't collapse into its
+ * head, and the empty band reads as the place for data. */
+.so-table__empty {
+	text-align: center;
+	padding-block: var(--so-table-row);
+}
+
+/* The window (`data-virtual`, a `Virtual` wrapper): the body draws only the
+ * visible rows, and spacers stand in place of the skipped ones. All rows in the
+ * window are of one height — the window counts a row's place from the step, and
+ * a row higher than the step would shift the spacers. So a cell's text is one
+ * line, and what doesn't fit is cut with an ellipsis: a long word doesn't wrap
+ * here.
+ *
+ * A spacer is an empty band as high as the skipped rows: no padding and no
+ * borders, under `aria-hidden`. */
+.so-table[data-virtual='true'] > .so-table__body > .so-table-row > .so-table-row__cell {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow-wrap: normal;
+}
+
+.so-table__filler-row {
+	border-width: 0;
+}
+
+.so-table__filler {
+	block-size: var(--so-filler-height, 0);
+	padding: 0;
+	border-width: 0;
+}
+
+/* The sticky head (`data-sticky-head`) stands at the top edge of the scroll — a
+ * container's or the page's — and the rows go under it. Without the attribute
+ * the head leaves with the rows.
+ *
+ * The head sticks whole (`thead`), not its cells. A sticky element is a layer
+ * of its own, and cells would make a layer per column: the width handle's
+ * strip, half of which lies on the next header, and the drop mark over the
+ * carried header would go under the neighbour. The head is one layer, and the
+ * raises inside it are the same as without sticking. Its raise holds the head
+ * over the body (above), and sticking only adds the edge to it.
+ *
+ * The offset from the scroll's top edge is the `--so-table-head-offset`
+ * variable, zero without it. A plus is for the app's sticky bar: it is set on
+ * the table or its wrapper that scrolls with the page, not on the document root
+ * — or a nested scroll container would take the same offset. A minus is for a
+ * container's top padding: the browser sticks below the padding, and the rows
+ * leaving would show through the padding over the head. A table whose window
+ * lies right in the body of Dialog and Drawer or in the content of Popover gets
+ * it from them — a context on the window (`modal.css`,
+ * `components/popover.css`) the table inherits.
+ *
+ * The backing is the surface of the place (`--so-place-surface`, `place.css`):
+ * the head covers the rows, and the table has no surface of its own. The place
+ * declares the surface — the theme's page, a panel, the app's card. The row
+ * group's background alone isn't enough: the browser puts it into each cell's
+ * area — a header's rounded corners cut it, in WebKit the rows showed through
+ * under the head's outer corners, and the place a carried header left has none
+ * of it. So the head's background lies once more under the whole head — the
+ * head's `::after` with a negative `z-index`: it goes into the head's layer,
+ * under the headers, and their veils lie over it. It travels with no header,
+ * and the place a carried header (`data-dragging`) left stays covered, at the
+ * head's outer corners too. Its color is the head's background itself
+ * (`inherit`): a theme that takes the head out of forced colors and paints it
+ * the system color of the page (oren does) gets the backing in that color too,
+ * while the variable would keep the theme's color there.
+ *
+ * The backing's size is the head's height, not its insets: in WebKit a row
+ * group is no containing block for an absolute box, the table is, and a backing
+ * stretched by its insets covered the whole table, the body included. The
+ * height is the one the layout plugin writes (`--so-table-head-height`, below at
+ * focus); until there is one — the head row, and a head wrapped into several
+ * rows is backed by its first one. The theme draws the line under the head in
+ * the head's background, and the backing would cover it too — so it stops
+ * short of the head's bottom by the line's thickness (`--so-table-head-border`;
+ * zero without a theme). `::after`, not `::before`: the engine wraps a row
+ * group's pseudo-element into an anonymous row, and before the head row it
+ * becomes the first row of the fixed layout — Chromium then lays the table out
+ * zero wide. The selection header is positioned, like the column headers:
+ * WebKit paints a cell without a layer of its own together with the row group's
+ * background, under the backing. A theme whose head background doesn't hold in
+ * mid-transition of a header's color — Chromium loses it there — also paints
+ * the backing with an inset shadow of the head (oren does, together with the
+ * line under the head).
+ *
+ * Focus below the head: a grid cell focus went up to (↑, PageUp) and a field in
+ * a cell after Shift+Tab stand below the head, not behind it. The scroll margin
+ * to focus (`scroll-margin-block-start`) is on everything in the body: the
+ * browser scrolls to the focused node itself, and it may lie deep in a cell.
+ * The margin is the head's height and the offset when it is a plus: a minus
+ * only brings the head back to the edge the browser measures from. The cell's
+ * content adds the cell's bleed to it: a control's focus ring lies outside, and
+ * a grid cell's inside. The layout plugin writes the height
+ * (`--so-table-head-height`): labels wrap, a header slot may hold anything, and
+ * the head may be higher than the head row. Until there is a height — the head
+ * row.
+ *
+ * The window of a table with a sticky head doesn't scroll, even when the
+ * columns are wider than the place (above, at the window). Sideways scrolling
+ * (`overflow-x`) scrolls the height as well: the window would become the
+ * nearest scroll for the head, with nothing to scroll in height — and the head
+ * wouldn't stick. So the table goes past the window, and the consumer's
+ * container or the page scrolls it sideways. The window may still clip a table
+ * that fits (`clip`) with a sticky head: that doesn't make it a scroll
+ * container. */
+.so-table[data-sticky-head='true'] > .so-table__head {
+	inset-block-start: var(--so-table-head-offset, 0px);
+	background-color: var(--so-place-surface);
+}
+
+.so-table[data-sticky-head='true'] > .so-table__head > .so-table__head-row > .so-table__select {
+	position: relative;
+}
+
+.so-table[data-sticky-head='true'] > .so-table__head::after {
+	content: '';
+	position: absolute;
+	inset-inline: 0;
+	inset-block-start: 0;
+	block-size: calc(
+		var(--so-table-head-height, var(--so-table-head-row)) - var(--so-table-head-border, 0px)
+	);
+	z-index: -1;
+	background-color: inherit;
+}
+
+/* A cell — the grid's focus ring is inside it */
+.so-table[data-sticky-head='true'] > .so-table__body > * > * {
+	scroll-margin-block-start: calc(
+		max(0px, var(--so-table-head-offset, 0px)) +
+			var(--so-table-head-height, var(--so-table-head-row))
+	);
+}
+
+/* A cell's content — the focus ring is outside, on the cell's bleed */
+.so-table[data-sticky-head='true'] > .so-table__body > * > * * {
+	scroll-margin-block-start: calc(
+		max(0px, var(--so-table-head-offset, 0px)) +
+			var(--so-table-head-height, var(--so-table-head-row)) + var(--so-table-bleed)
+	);
+}