npm - @kanunilabs/datagrid-react - Versions diffs - 1.0.2 → 1.1.0 - Mend

@kanunilabs/datagrid-react 1.0.2 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/styles.css CHANGED Viewed

@@ -1,2354 +1,2383 @@
-/* ─────────────────────────────────────────────────────────────
-   KANUNILABS DataGrid — isolated theme system
-   ─────────────────────────────────────────────────────────────
-   Every rule is scoped under .kanuni-datagrid-root so the host app's CSS
-   cannot bleed in and ours cannot bleed out. Tokens mirror the PivotGrid
-   vocabulary (--pivot-*) with a --dg-* prefix so the two products can be
-   themed side by side without collisions.
-   ───────────────────────────────────────────────────────────── */
-/* ── Design tokens ───────────────────────────────────────────
-   Declared on more than the grid root because two things render OUTSIDE it
-   and still have to look like the grid: the enterprise wrapper (which owns
-   the row/form editor, a SIBLING of the root) and any layer portalled to
-   <body> (the lookup list, tagged `.kanuni-datagrid-detached`).
-   Tokens defined only on the root left those resolving `var(--dg-surface)` to
-   nothing — which is not a fallback but an INVALID declaration, so the popup
-   editor rendered fully transparent and unreadable over the grid.
-   Only the custom properties live here. The grid's own box (border, radius,
-   overflow, flex) stays on the root below: giving it to the wrapper would draw
-   a second border around the whole component and clip the editor. */
-.kanuni-datagrid-root,
-.kanuni-datagrid-enterprise,
-.kanuni-datagrid-detached {
-  /* ── Color tokens ── */
-  --dg-bg: #ffffff;
-  --dg-surface: #ffffff;
-  --dg-surface-header: #f8fafc;      /* slate-50 */
-  --dg-surface-hover: #f1f5f9;       /* slate-100 */
-  --dg-surface-stripe: #fafafa;
-  --dg-border: #e2e8f0;              /* slate-200 */
-  --dg-border-strong: #cbd5e1;       /* slate-300 */
-  --dg-text: #0f172a;                /* slate-900 */
-  --dg-text-muted: #64748b;          /* slate-500 */
-  /* sky-700, and the depth is the point rather than the hue.
-     This was sky-500 (#0ea5e9), which is the accent EVERY foreground in the
-     grid is drawn from: the sort caret over the header, the active funnel, the
-     editor underline, the detail rule, and the white label on a group chip or
-     a primary button. On a light surface sky-500 measures 2.77:1 under white
-     and 2.65:1 as a caret on the header — under the 4.5:1 that text needs and
-     under the 3:1 that an icon needs. sky-600 was not enough either (4.10:1
-     white-on). sky-700 clears both: 5.93:1 under white, 5.67:1 on the header.
-     The dark palette below keeps sky-400 — it is already at 8.33:1 there,
-     because the problem was never the hue, it was using a mid-tone accent
-     against a white background. */
-  --dg-primary: #0369a1;             /* sky-700 */
-  --dg-primary-soft: #e0f2fe;        /* sky-100 */
-  --dg-focus-ring: #0369a1;          /* matches the accent */
-  /* Cell flash (P1.7). Translucent so the row's own background — striped,
-     selected, dirty — stays visible under the pulse rather than being
-     replaced by it. */
-  --dg-flash-bg: rgba(3, 105, 161, 0.35);
-  --dg-flash-duration: 700ms;
-  /* Cell note marker (P3.3). Red on purpose and NOT the accent: the accent
-     means "the grid did this" (focus, selection, sort), and a note means
-     "a person put something here" — two different kinds of signal. */
-  --dg-note-marker: #dc2626;
-  /* ── Semantic colours ──────────────────────────────────────
-     Every default below is the literal that used to be written inline at the
-     point of use, so a grid with no theme renders exactly as before. They are
-     tokens now because a theme has to be able to move them: `--dg-on-primary`
-     is the clearest case — the KanuniLabs accent is a GOLD, and the white that
-     reads fine on sky-500 measures about 2:1 on it. A theme that can recolour
-     the chip but not the text on the chip is a theme that ships unreadable
-     buttons. */
-  /* The header row is its own surface, separate from `--dg-surface-header`.
-     They default to the same value, and every theme here but one keeps them
-     that way — but a corporate theme with an INK header still wants the group
-     panel, the filter row and the footer to stay light. Without the split, the
-     one token dragged all four along and the panel hints (muted text) went
-     unreadable on the dark fill. */
-  --dg-header-bg: var(--dg-surface-header);
-  --dg-header-text: var(--dg-text);
-  --dg-header-text-muted: var(--dg-text-muted);
-  --dg-header-hover: var(--dg-surface-hover);
-  --dg-on-primary: #ffffff;
-  --dg-danger: #dc2626;              /* red-600 — borders, solid fills */
-  --dg-danger-text: #b91c1c;         /* red-700 — text on a light surface */
-  --dg-on-danger: #ffffff;           /* text ON a solid --dg-danger fill */
-  --dg-warning: #b45309;             /* amber-700 */
-  --dg-selected-bg: var(--dg-primary-soft);
-  /* Search highlight (P2.4). Amber rather than the accent: the accent already
-     means "selected" and "focused" in this grid, and a third meaning on the
-     same colour would make a highlighted cell read as a selected one. */
-  --dg-highlight-bg: #fde68a;        /* amber-200 */
-  --dg-highlight-text: #713f12;      /* amber-900 — 8.9:1 on the above */
-  --dg-group-bg: var(--dg-surface-header);
-  --dg-footer-bg: var(--dg-surface-header);
-  --dg-overlay: rgba(15, 23, 42, 0.55);
-  --dg-scrollbar-thumb: var(--dg-border-strong);
-  --dg-scrollbar-track: transparent;
-  /* ── Elevation ──
-     A flat theme sets these to `none`; Material raises them. */
-  --dg-shadow-popup: 0 10px 25px -5px rgba(15, 23, 42, 0.25);
-  --dg-shadow-popup-sm: 0 8px 24px rgba(15, 23, 42, 0.16);
-  --dg-shadow-menu: 0 12px 28px rgba(15, 23, 42, 0.22);
-  --dg-shadow-card: 0 12px 32px rgba(15, 23, 42, 0.18);
-  --dg-shadow-panel: 0 8px 20px rgba(0, 0, 0, 0.12);
-  --dg-shadow-dialog: 0 24px 48px rgba(0, 0, 0, 0.28);
-  /* ── Metric tokens ── */
-  --dg-row-height: 28px;
-  --dg-header-height: 32px;
-  --dg-cell-padding-x: 8px;
-  --dg-font-size: 13px;
-  --dg-header-font-size: 12px;
-  --dg-radius: 6px;
-  --dg-shadow-pinned: 2px 0 4px -2px rgba(15, 23, 42, 0.18);
-  --dg-shadow-pinned-right: -2px 0 4px -2px rgba(15, 23, 42, 0.18);
-  /* ── Line work ─────────────────────────────────────────────
-     Whole SHORTHANDS rather than a colour and a width, so a theme can drop a
-     line entirely (`none`) instead of only fading it. This is most of what
-     separates the presets: Balham rules every column and every row, Material
-     rules rows only, Quartz keeps the rows faint and skips the columns. */
-  --dg-cell-border: 1px solid var(--dg-border);
-  --dg-row-border: 1px solid var(--dg-border);
-  --dg-header-cell-border: 1px solid var(--dg-border);
-  --dg-header-border: 1px solid var(--dg-border-strong);
-  /* ── Header treatment ── */
-  --dg-header-weight: 600;
-  --dg-header-transform: none;
-  --dg-header-tracking: normal;
-  /* ── Chrome (toolbar, pager, panels, popups) ──
-     Sized separately from the data surface: a compact grid shrinks its rows
-     hard, but a 9px button is not usable at any density. */
-  --dg-chrome-font-size: 12px;
-  --dg-chrome-padding-y: 6px;
-  --dg-control-height: 26px;
-  --dg-control-font-size: 12px;
-  --dg-filter-input-height: 22px;
-  --dg-radius-control: 4px;
-  /* The line box a WRAPPED cell lays its text out on, and the height an editor
-     takes in one. Whole pixels — see the note on `--wrap` below. */
-  --dg-wrap-line-height: 18px;
-}
-/* Detached surfaces carry the foreground as well as the tokens, for the reason
-   the enterprise wrapper does: a portalled layer is a child of <body>, so
-   anything inside it written as `color: inherit` would resolve against the host
-   page rather than against the grid it belongs to. The dialog and the row
-   editor set their own colour, but the box AROUND them is the safety net. */
-.kanuni-datagrid-detached {
-  color: var(--dg-text);
-}
-/* The grid's own box. */
-.kanuni-datagrid-root {
-  box-sizing: border-box;
-  font-family: inherit;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  border: 1px solid var(--dg-border);
-  border-radius: var(--dg-radius);
-  background: var(--dg-bg);
-  color: var(--dg-text);
-  font-size: var(--dg-font-size);
-  line-height: 1.4;
-}
-.kanuni-datagrid-root *,
-.kanuni-datagrid-root *::before,
-.kanuni-datagrid-root *::after {
-  box-sizing: border-box;
-}
-/* Dark theme: opt in with .kanuni-datagrid-root.kanuni-datagrid-dark */
-.kanuni-datagrid-root.kanuni-datagrid-dark,
-.kanuni-datagrid-enterprise.kanuni-datagrid-dark,
-.kanuni-datagrid-detached.kanuni-datagrid-dark {
-  --dg-bg: #0b1120;
-  --dg-surface: #0f172a;
-  --dg-surface-header: #16233c;
-  --dg-surface-hover: #1e293b;
-  --dg-surface-stripe: #101a2e;
-  --dg-border: #24344d;
-  --dg-border-strong: #334155;
-  --dg-text: #e2e8f0;
-  --dg-text-muted: #94a3b8;
-  --dg-primary: #38bdf8;
-  --dg-primary-soft: #0c4a6e;
-  --dg-focus-ring: #7dd3fc;
-  /* Lifted for a dark surface: crimson on near-black reads as brown. */
-  --dg-note-marker: #f87171;
-  --dg-shadow-pinned: 2px 0 4px -2px rgba(0, 0, 0, 0.55);
-  --dg-shadow-pinned-right: -2px 0 4px -2px rgba(0, 0, 0, 0.55);
-  /* The semantic set, re-pointed for a dark surface. `--dg-on-primary` goes
-     DARK here because the dark accent is a light sky-400. */
-  --dg-on-primary: #082f49;
-  /* Dark: a muted amber fill with light text, so the mark reads as emphasis
-     instead of glowing off a dark surface the way amber-200 would. */
-  --dg-highlight-bg: #78350f;        /* amber-900 */
-  --dg-highlight-text: #fef3c7;      /* amber-100 — 9.6:1 on the above */
-  --dg-danger: #f87171;
-  --dg-danger-text: #fca5a5;
-  /* The dark danger is a LIGHT red, so what sits on it has to be dark. White
-     on #f87171 measures 2.4:1 — the delete button's own label. */
-  --dg-on-danger: #450a0a;
-  --dg-warning: #fbbf24;
-  --dg-overlay: rgba(2, 6, 23, 0.7);
-  --dg-scrollbar-thumb: #475569;
-  --dg-shadow-popup: 0 10px 25px -5px rgba(0, 0, 0, 0.6);
-  --dg-shadow-popup-sm: 0 8px 24px rgba(0, 0, 0, 0.5);
-  --dg-shadow-menu: 0 12px 28px rgba(0, 0, 0, 0.55);
-  --dg-shadow-card: 0 12px 32px rgba(0, 0, 0, 0.55);
-  --dg-shadow-panel: 0 8px 20px rgba(0, 0, 0, 0.45);
-  --dg-shadow-dialog: 0 24px 48px rgba(0, 0, 0, 0.65);
-}
-/* ── Single scroll container (§7.4: NO dual-table architecture) ────────
-   The header and the body live in ONE scroller, so horizontal alignment
-   cannot drift: there is no second element to keep in sync. */
-.kanuni-datagrid-scroller {
-  position: relative;
-  flex: 1 1 auto;
-  overflow: auto;
-  overscroll-behavior: contain;
-  /* Scroll anchoring must be OFF in a virtualized scroller. Under scroll
-     compression the rows legitimately move relative to the canvas on every
-     scroll; Chrome's anchoring reads that as "content shifted under the user"
-     and walks scrollTop back to chase the anchor row. During a scrollbar drag
-     the correction is deferred and applied on mouse RELEASE — the reported
-     symptom (2026-08-14, 1M rows): the last rows peek out while dragging and
-     snap back when the button is let go, leaving the true bottom unreachable
-     by user scrolling while programmatic probes see nothing wrong. */
-  overflow-anchor: none;
-  background: var(--dg-surface);
-}
-/* Sized to the full virtual extent so the native scrollbar is accurate. */
-.kanuni-datagrid-canvas {
-  position: relative;
-}
-/* ── Header ───────────────────────────────────────────────── */
-/* ── Header bands (multi-level headers) ──────────────────────
-   Siblings of the header row, each sticky at its own offset so the whole
-   stack stays put while the rows scroll under it. */
-.kanuni-datagrid-band-row {
-  position: sticky;
-  z-index: 4;
-  display: flex;
-  background: var(--dg-header-bg);
-  /* Deliberately a literal, not `--dg-header-cell-border`: that token is the
-     COLUMN separator, which some themes drop entirely. The line under a band
-     row is structural — without it a two-level header reads as one tall box. */
-  border-bottom: 1px solid var(--dg-border);
-}
-.kanuni-datagrid-band-cell {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 0;
-  padding: 0 8px;
-  border-inline-end: var(--dg-header-cell-border);
-  background: var(--dg-header-bg);
-  color: var(--dg-header-text);
-  font-size: calc(var(--dg-font-size) - 1px);
-  font-weight: var(--dg-header-weight);
-}
-/* No band at this level: the column's own header reaches up through here, so
-   the box must be INVISIBLE rather than an empty cell with borders. */
-.kanuni-datagrid-band-cell--spacer {
-  border-inline-end: none;
-}
-.kanuni-datagrid-band-cell--pinned {
-  position: sticky;
-  z-index: 5;
-}
-.kanuni-datagrid-band-label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.kanuni-datagrid-header {
-  position: sticky;
-  top: 0;
-  z-index: 3;
-  display: flex;
-  height: var(--dg-header-height);
-  background: var(--dg-header-bg);
-  border-bottom: var(--dg-header-border);
-}
-.kanuni-datagrid-header-cell {
-  /* Anchors the resize handle. Pinned headers override this with `sticky`,
-     which is also a positioned ancestor, so the handle works there too. */
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  flex: none;
-  height: 100%;
-  padding: 0 var(--dg-cell-padding-x);
-  background: var(--dg-header-bg);
-  border-inline-end: var(--dg-header-cell-border);
-  font-size: var(--dg-header-font-size);
-  font-weight: var(--dg-header-weight);
-  letter-spacing: var(--dg-header-tracking);
-  text-transform: var(--dg-header-transform);
-  color: var(--dg-header-text);
-  white-space: nowrap;
-  overflow: hidden;
-  user-select: none;
-}
-.kanuni-datagrid-header-cell--sortable {
-  cursor: pointer;
-}
-.kanuni-datagrid-header-cell--sortable:hover {
-  background: var(--dg-header-hover);
-}
-.kanuni-datagrid-header-label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.kanuni-datagrid-sort-indicator {
-  flex: none;
-  font-size: 10px;
-  line-height: 1;
-  color: var(--dg-primary);
-}
-.kanuni-datagrid-sort-order {
-  flex: none;
-  font-size: 9px;
-  color: var(--dg-header-text-muted);
-}
-/* ── Rows and cells ───────────────────────────────────────── */
-.kanuni-datagrid-viewport {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  will-change: transform;
-}
-.kanuni-datagrid-row {
-  display: flex;
-  height: var(--dg-row-height);
-  background: var(--dg-surface);
-  border-bottom: var(--dg-row-border);
-  /* Dragging a CELL RANGE must not also drag a text selection. The browser
-     starts one on any mousedown-and-move over text, so the user got two
-     overlapping highlights at once — the grid's range in pale blue and the
-     native selection in solid blue — with no way to tell which one the totals
-     strip was summing. The header and footer already do this; the data rows
-     were the gap. Copying is not lost: the range owns Ctrl+C. */
-  user-select: none;
-}
-/* ── Auto-height rows ──────────────────────────────────────
-   A grid with an `autoHeight` column lets its rows grow. The row's height is
-   NOT written inline here: it is measured after layout and handed to the window
-   engine, which owns the scroll canvas and every row offset. Setting it inline
-   as well would make the measurement read back whatever was set — the row would
-   agree with itself and never grow.
-   `min-height` keeps a one-line row exactly the height it was, so turning the
-   feature on does not resize the rows that did not need it. */
-.kanuni-datagrid-root[data-auto-height] .kanuni-datagrid-row {
-  height: auto;
-  min-height: var(--dg-row-height);
-}
-/* Every OTHER cell of an autoHeight grid must stretch to its row.
-   The base rule's `height: 100%` cannot resolve against the row's
-   `height: auto`, so it computed as content height and every single-line cell
-   collapsed to its text — 18px inside a 28px row, worse inside a wrapped one.
-   Two user-visible symptoms (report, 2026-08-14): the focus rectangle hugged
-   the TEXT instead of the cell, and a click in the lower band of a cell landed
-   on the bare row — no column resolved, so nothing got focused. Stretching is
-   what the base rule always meant; `align-items: center` then keeps single-line
-   text centred exactly as in a fixed-height grid. The wrap cell is excluded:
-   its own block sizes it to its text on purpose — that is how the row learns
-   how tall to be. */
-.kanuni-datagrid-root[data-auto-height] .kanuni-datagrid-row .kanuni-datagrid-cell:not(.kanuni-datagrid-cell--wrap) {
-  height: auto;
-  align-self: stretch;
-}
-/* Anything the user genuinely types into, or reads as prose, gets it back. */
-.kanuni-datagrid-row input,
-.kanuni-datagrid-row textarea,
-.kanuni-datagrid-row select,
-.kanuni-datagrid-detail-cell,
-.kanuni-datagrid-editform-cell {
-  user-select: text;
-}
-.kanuni-datagrid-row--odd {
-  background: var(--dg-surface-stripe);
-}
-.kanuni-datagrid-row:hover,
-.kanuni-datagrid-row:hover .kanuni-datagrid-cell--pinned {
-  background: var(--dg-surface-hover);
-}
-.kanuni-datagrid-cell {
-  display: flex;
-  align-items: center;
-  flex: none;
-  height: 100%;
-  padding: 0 var(--dg-cell-padding-x);
-  border-inline-end: var(--dg-cell-border);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-/* ── autoHeight: the columns that wrap ─────────────────────
-   Only the columns that asked for it. Everything else keeps its single line and
-   its ellipsis — wrapping a whole grid because one column needed to is how a
-   dense table turns into a wall of text.
-   The doubled class is deliberate and load-bearing. `.kanuni-datagrid-cell--wrap`
-   alone has the same specificity as the base rule directly above, so whichever
-   came LAST in the file won; written earlier in the sheet it lost silently and
-   the cells kept `white-space: nowrap` while everything else about the feature
-   worked. Two classes settle it regardless of where this block sits. */
-.kanuni-datagrid-cell.kanuni-datagrid-cell--wrap {
-  white-space: normal;
-  overflow: visible;
-  text-overflow: clip;
-  /* `anywhere` and not `break-word`: an unbroken 200-character token (a URL, a
-     serial number) otherwise overflows its column and lands on the next one. */
-  overflow-wrap: anywhere;
-  align-items: flex-start;
-  /* Not `height: 100%` — the cell has to be as tall as its own text, or the row
-     it is supposed to stretch never learns it needs to grow. */
-  height: auto;
-  align-self: stretch;
-  padding-block: 4px;
-  /* An INTEGER line box, not a ratio. `1.35` against the 13px body font lays
-     out at 17.55px, so every wrapped row landed on a fractional boundary and
-     its 1px border rendered a pixel thick on some rows and two on others.
-     A token now, because a theme moves the body font under it — 18px is right
-     for 13px text and cramped for Material's 14px. */
-  line-height: var(--dg-wrap-line-height);
-}
-.kanuni-datagrid-cell--number {
-  justify-content: flex-end;
-  font-variant-numeric: tabular-nums;
-}
-.kanuni-datagrid-cell--center {
-  justify-content: center;
-}
-/* ── Pinned columns = sticky cells inside the same row (§7.4) ──────────
-   Compositor-friendly and layout-free; structurally immune to the
-   header/body desync bug class of a dual-table design. */
-.kanuni-datagrid-cell--pinned,
-.kanuni-datagrid-header-cell--pinned {
-  position: sticky;
-  z-index: 2;
-  background: inherit;
-}
-/* HARDENING: a pinned cell is sticky, whatever else it becomes.
-   State classes keep anchoring their markers with `position: relative` —
-   the dirty corner, the range overlay, whatever comes next — and on a pinned
-   cell that override turns `insetInlineStart` from a parking threshold into a
-   literal shift: the cell jumps sideways by its whole inset and parks over its
-   neighbour. It happened twice from two different classes in one day
-   (range-anchor on click, dirty on commit), so the guarantee lives HERE at
-   three-class specificity instead of as a `:not(--pinned)` chased onto every
-   state rule. Sticky is itself a positioned ancestor, so those markers lose
-   nothing. */
-.kanuni-datagrid-root .kanuni-datagrid-cell.kanuni-datagrid-cell--pinned {
-  position: sticky;
-}
-/* A STICKY column sits in the scrolling order and parks itself only once it
-   would leave the viewport. It needs a lower z-index than a truly pinned
-   column: when the two meet, the pinned one is the fixed landmark and has to
-   win, or the sticky column would slide over the top of it. */
-.kanuni-datagrid-cell--sticky {
-  z-index: 1;
-}
-.kanuni-datagrid-header-cell--pinned {
-  z-index: 4;
-  background: var(--dg-header-bg);
-}
-.kanuni-datagrid-cell--pinned-left:last-of-type,
-.kanuni-datagrid-header-cell--pinned-left:last-of-type {
-  box-shadow: var(--dg-shadow-pinned);
-}
-.kanuni-datagrid-pin-edge-left {
-  box-shadow: var(--dg-shadow-pinned);
-}
-.kanuni-datagrid-pin-edge-right {
-  box-shadow: var(--dg-shadow-pinned-right);
-}
-/* Spacer that reserves the width of columns outside the horizontal window. */
-.kanuni-datagrid-spacer {
-  flex: none;
-  height: 100%;
-}
-/* ── Toolbar ──────────────────────────────────────────────── */
-.kanuni-datagrid-toolbar {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex: none;
-  padding: var(--dg-chrome-padding-y) 8px;
-  background: var(--dg-surface);
-  border-bottom: 1px solid var(--dg-border);
-  font-size: var(--dg-chrome-font-size);
-}
-.kanuni-datagrid-toolbar-spacer {
-  flex: 1 1 auto;
-}
-.kanuni-datagrid-toolbar-search {
-  width: min(260px, 40%);
-  height: var(--dg-control-height);
-  padding: 0 8px;
-  border: 1px solid var(--dg-border-strong);
-  border-radius: var(--dg-radius-control);
-  background: var(--dg-surface);
-  color: var(--dg-text);
-  font: inherit;
-  font-size: var(--dg-control-font-size);
-}
-.kanuni-datagrid-toolbar-search:focus {
-  outline: none;
-  border-color: var(--dg-primary);
-}
-.kanuni-datagrid-toolbar > button {
-  padding: 3px 10px;
-  border: 1px solid var(--dg-border-strong);
-  border-radius: var(--dg-radius-control);
-  background: var(--dg-surface);
-  color: inherit;
-  font: inherit;
-  font-size: var(--dg-control-font-size);
-  cursor: pointer;
-}
-.kanuni-datagrid-toolbar > button:hover:not(:disabled) {
-  background: var(--dg-surface-hover);
-}
-.kanuni-datagrid-toolbar > button:disabled {
-  opacity: 0.6;
-  cursor: default;
-}
-.kanuni-datagrid-toolbar-error {
-  color: var(--dg-danger-text);
-  font-size: 11px;
-}
-/*
- * The same message, but floating where a context menu just was — the cell
- * menu's Export entries have nowhere else to report a missing optional peer.
- * Sized and boxed like a menu so it reads as coming from one; it is a BUTTON
- * because clicking it dismisses it, and a click target has to be one.
- */
-.kanuni-datagrid-menu-error {
-  position: fixed;
-  /* Same layer as the context menu it replaces — see the rule further down. */
-  z-index: 1200;
-  max-width: 320px;
-  padding: 8px 10px;
-  text-align: left;
-  background: var(--dg-surface);
-  border: 1px solid var(--dg-danger-text);
-  border-radius: var(--dg-radius);
-  box-shadow: var(--dg-shadow-menu);
-  font-size: var(--dg-font-size);
-  cursor: pointer;
-}
-.kanuni-datagrid-column-chooser .kanuni-datagrid-filter-item {
-  cursor: pointer;
-}
-/* ── Pager ────────────────────────────────────────────────── */
-.kanuni-datagrid-pager {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 12px;
-  flex: none;
-  padding: 5px 8px;
-  background: var(--dg-surface);
-  border-top: 1px solid var(--dg-border);
-  font-size: var(--dg-chrome-font-size);
-}
-.kanuni-datagrid-pager-size {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  color: var(--dg-text-muted);
-}
-.kanuni-datagrid-pager-size select {
-  padding: 2px 4px;
-  border: 1px solid var(--dg-border-strong);
-  border-radius: var(--dg-radius-control);
-  background: var(--dg-surface);
-  color: var(--dg-text);
-  font: inherit;
-  font-size: var(--dg-control-font-size);
-}
-.kanuni-datagrid-pager-range {
-  color: var(--dg-text-muted);
-  font-variant-numeric: tabular-nums;
-}
-.kanuni-datagrid-pager-buttons {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  margin-left: auto;
-}
-.kanuni-datagrid-pager-buttons button {
-  min-width: 26px;
-  height: calc(var(--dg-control-height) - 2px);
-  border: 1px solid var(--dg-border-strong);
-  border-radius: var(--dg-radius-control);
-  background: var(--dg-surface);
-  color: inherit;
-  font: inherit;
-  cursor: pointer;
-}
-.kanuni-datagrid-pager-buttons button:hover:not(:disabled) {
-  background: var(--dg-surface-hover);
-}
-.kanuni-datagrid-pager-buttons button:disabled {
-  opacity: 0.45;
-  cursor: default;
-}
-.kanuni-datagrid-pager-current {
-  padding: 0 6px;
-  font-variant-numeric: tabular-nums;
-}
-/* ── Group panel ──────────────────────────────────────────── */
-.kanuni-datagrid-group-panel {
-  display: flex;
-  align-items: flex-start;
-  flex-wrap: wrap;
-  gap: 8px;
-  flex: none;
-  padding: var(--dg-chrome-padding-y) 8px;
-  background: var(--dg-surface-header);
-  border-bottom: 1px solid var(--dg-border);
-  font-size: var(--dg-chrome-font-size);
-}
-/* ── Cascading levels ──────────────────────────────────────
-   One row per level, each indented past the one above and joined to it by an
-   elbow. Grouping is a hierarchy; a flat row of chips said nothing about which
-   column was the OUTER level, which is the only thing the order encodes. */
-.kanuni-datagrid-group-levels {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-}
-.kanuni-datagrid-group-level {
-  position: relative;
-  display: flex;
-  align-items: center;
-  /* --dg-group-level is set per chip from its index. */
-  padding-inline-start: calc(var(--dg-group-level, 0) * 18px);
-}
-/* The elbow: down from the parent chip, then right into this one. */
-.kanuni-datagrid-group-level:not(:first-child)::before {
-  content: '';
-  position: absolute;
-  inset-inline-start: calc((var(--dg-group-level, 1) - 1) * 18px + 9px);
-  top: -3px;
-  bottom: 50%;
-  width: 9px;
-  border-inline-start: 1px solid var(--dg-border-strong);
-  border-block-end: 1px solid var(--dg-border-strong);
-  border-end-start-radius: 4px;
-  pointer-events: none;
-}
-/* Drop indicator while a level is dragged over another. */
-.kanuni-datagrid-group-level--drop-before::after,
-.kanuni-datagrid-group-level--drop-after::after {
-  content: '';
-  position: absolute;
-  inset-inline: calc(var(--dg-group-level, 0) * 18px) 0;
-  height: 2px;
-  border-radius: 1px;
-  background: var(--dg-primary);
-  pointer-events: none;
-}
-.kanuni-datagrid-group-level--drop-before::after {
-  top: -2px;
-}
-.kanuni-datagrid-group-level--drop-after::after {
-  bottom: -2px;
-}
-.kanuni-datagrid-group-panel-actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-inline-start: auto;
-}
-.kanuni-datagrid-group-panel--over {
-  background: var(--dg-primary-soft);
-  outline: 2px dashed var(--dg-primary);
-  outline-offset: -3px;
-}
-.kanuni-datagrid-group-panel-hint {
-  color: var(--dg-text-muted);
-}
-.kanuni-datagrid-group-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 2px 6px 2px 10px;
-  border-radius: 999px;
-  background: var(--dg-primary);
-  color: var(--dg-on-primary);
-  font-weight: 600;
-  white-space: nowrap;
-}
-.kanuni-datagrid-group-chip[draggable='true'] {
-  cursor: grab;
-}
-.kanuni-datagrid-group-chip:focus-visible {
-  outline: 2px solid var(--dg-focus-ring);
-  outline-offset: 2px;
-}
-.kanuni-datagrid-group-chip button {
-  border: none;
-  background: transparent;
-  color: inherit;
-  font-size: 14px;
-  line-height: 1;
-  cursor: pointer;
-}
-.kanuni-datagrid-group-panel-actions > button {
-  padding: 2px 8px;
-  border: 1px solid var(--dg-border-strong);
-  border-radius: var(--dg-radius-control);
-  background: var(--dg-surface);
-  color: inherit;
-  font: inherit;
-  font-size: 12px;
-  cursor: pointer;
-}
-.kanuni-datagrid-group-select select {
-  padding: 2px 6px;
-  border: 1px solid var(--dg-border-strong);
-  border-radius: var(--dg-radius-control);
-  background: var(--dg-surface);
-  color: inherit;
-  font: inherit;
-  font-size: 12px;
-}
-/* ── Group rows ───────────────────────────────────────────── */
-.kanuni-datagrid-group-row {
-  background: var(--dg-group-bg);
-  cursor: pointer;
-  font-weight: 600;
-}
-.kanuni-datagrid-group-row:hover {
-  background: var(--dg-surface-hover);
-}
-.kanuni-datagrid-group-cell {
-  /* Sticky so the label stays readable while scrolling horizontally. */
-  position: sticky;
-  inset-inline-start: 0;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  height: 100%;
-  padding: 0 var(--dg-cell-padding-x);
-  white-space: nowrap;
-}
-.kanuni-datagrid-group-twisty {
-  display: inline-block;
-  width: 12px;
-  color: var(--dg-text-muted);
-}
-.kanuni-datagrid-group-caption {
-  color: var(--dg-text-muted);
-  font-weight: 400;
-}
-.kanuni-datagrid-group-count {
-  color: var(--dg-text-muted);
-  font-weight: 400;
-}
-/* Nested levels step back toward the body colour so depth reads at a glance
-   without needing to count the indent. */
-.kanuni-datagrid-group-row--level-1 {
-  background: color-mix(in srgb, var(--dg-surface-header) 60%, var(--dg-surface));
-}
-.kanuni-datagrid-group-row--level-2 {
-  background: color-mix(in srgb, var(--dg-surface-header) 35%, var(--dg-surface));
-}
-.kanuni-datagrid-group-row--level-3 {
-  background: color-mix(in srgb, var(--dg-surface-header) 18%, var(--dg-surface));
-}
-/* Aggregates trail the label; they must not push the count off-screen, so the
-   whole strip stays on one line and simply clips at the viewport edge. */
-.kanuni-datagrid-group-aggregate {
-  margin-left: 12px;
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-}
-.kanuni-datagrid-group-aggregate-label {
-  color: var(--dg-text-muted);
-  font-weight: 400;
-}
-.kanuni-datagrid-group-chip-level {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 15px;
-  height: 15px;
-  border-radius: 999px;
-  /* A wash of the chip's own FOREGROUND, not a fixed white: on a gold chip the
-     text is near-black, and a white pip on it disappeared. */
-  background: color-mix(in srgb, var(--dg-on-primary) 25%, transparent);
-  font-size: 10px;
-  font-weight: 700;
-}
-.kanuni-datagrid-group-chip button[disabled] {
-  opacity: 0.4;
-  cursor: default;
-}
-.kanuni-datagrid-group-row--focused {
-  outline: 2px solid var(--dg-focus-ring);
-  outline-offset: -2px;
-}
-/* ── Master-detail ────────────────────────────────────────── */
-.kanuni-datagrid-detail-toggle-cell {
-  padding: 0;
-}
-.kanuni-datagrid-detail-toggle {
-  width: 100%;
-  height: 100%;
-  border: none;
-  background: transparent;
-  color: var(--dg-text-muted);
-  font-size: 11px;
-  line-height: 1;
-  cursor: pointer;
-}
-.kanuni-datagrid-detail-toggle:hover {
-  color: var(--dg-text);
-}
-/* The panel is sized in whole rows by the component (span x rowHeight); this
-   rule only styles it. Overriding the height here would desync it from the
-   filler slots the virtualizer reserved. */
-.kanuni-datagrid-detail-row {
-  background: var(--dg-surface);
-  border-bottom: 1px solid var(--dg-border);
-}
-.kanuni-datagrid-detail-cell {
-  position: sticky;
-  inset-inline-start: 0;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  padding: 8px 12px;
-  overflow: auto;
-  border-inline-start: 3px solid var(--dg-primary);
-}
-/* ── In-grid edit form (mode: 'form') ─────────────────────── */
-/* Sticky to the scroller's inline start so the form stays put while the
-   columns scroll under it — a form that slides off to the left with column 40
-   is a form the user has to chase. Width is the VIEWPORT's, not the canvas's,
-   for the same reason. */
-.kanuni-datagrid-editform-row {
-  background: var(--dg-surface);
-  border-bottom: 1px solid var(--dg-border);
-}
-.kanuni-datagrid-editform-cell {
-  position: sticky;
-  inset-inline-start: 0;
-  box-sizing: border-box;
-  /* The VIEWPORT's width, not the row's — see `--dg-viewport-width`. Falls
-     back to the row when nothing has measured yet (SSR, first paint). */
-  width: var(--dg-viewport-width, 100%);
-  height: 100%;
-  padding: 0;
-  border-inline-start: 3px solid var(--dg-primary);
-}
-/* ── Summary bar ──────────────────────────────────────────── */
-.kanuni-datagrid-summary-bar {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 16px;
-  flex: none;
-  padding: 5px 8px;
-  background: var(--dg-footer-bg);
-  border-top: var(--dg-header-border);
-  font-size: var(--dg-chrome-font-size);
-}
-.kanuni-datagrid-summary-item {
-  display: inline-flex;
-  align-items: baseline;
-  gap: 4px;
-}
-.kanuni-datagrid-summary-label {
-  color: var(--dg-text-muted);
-}
-/* ── Selection ────────────────────────────────────────────── */
-.kanuni-datagrid-row--selected,
-.kanuni-datagrid-row--selected .kanuni-datagrid-cell--pinned {
-  background: var(--dg-selected-bg);
-}
-.kanuni-datagrid-row--selected:hover,
-.kanuni-datagrid-row--selected:hover .kanuni-datagrid-cell--pinned {
-  background: var(--dg-selected-bg);
-  filter: brightness(0.97);
-}
-.kanuni-datagrid-select-cell {
-  justify-content: center;
-  padding: 0;
-}
-.kanuni-datagrid-select-cell input {
-  accent-color: var(--dg-primary);
-  cursor: pointer;
-}
-/* ── Row numbers (gap analysis P3.5) ───────────────────────── */
-/* Muted and tabular on purpose. The number is an address, not data: at full
-   text weight it competes with the first real column, and proportional digits
-   make a column of numbers ragged down its right edge. */
-.kanuni-datagrid-rownum-cell {
-  color: var(--dg-text-muted);
-  font-variant-numeric: tabular-nums;
-  background: var(--dg-header-bg);
-  user-select: none;
-}
-.kanuni-datagrid-row--selected .kanuni-datagrid-rownum-cell {
-  background: var(--dg-selected-bg);
-}
-/* ── Keyboard focus ───────────────────────────────────────── */
-/* Focus is virtual (aria-activedescendant), so it must be drawn explicitly —
-   there is no browser focus ring on the cell itself. `inset` keeps the outline
-   from being clipped by the neighbouring cell. */
-.kanuni-datagrid-cell--focused {
-  outline: 2px solid var(--dg-focus-ring);
-  outline-offset: -2px;
-}
-.kanuni-datagrid-scroller:focus {
-  outline: none;
-}
-.kanuni-datagrid-scroller:focus-visible {
-  outline: 2px solid var(--dg-focus-ring);
-  outline-offset: -2px;
-}
-/* Visually hidden but still read aloud. */
-.kanuni-datagrid-sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-/* ── Header filter button ──────────────────────────────────
-   Hidden until the header is hovered or focused (`filterIconMode: 'hover'`,
-   the default). `visibility` rather than `display` so the icon does not push
-   the label around when it appears — the space is reserved either way. */
-.kanuni-datagrid-filter-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  margin-inline-start: auto;
-  padding: 1px 3px;
-  border: none;
-  border-radius: 3px;
-  background: transparent;
-  /* Lives INSIDE the header cell, so it follows the header's foreground: on an
-     ink header the body's muted slate is barely visible. */
-  color: var(--dg-header-text-muted);
-  line-height: 0;
-  cursor: pointer;
-  visibility: hidden;
-}
-.kanuni-datagrid-header-cell:hover > .kanuni-datagrid-filter-button,
-.kanuni-datagrid-header-cell:focus-within > .kanuni-datagrid-filter-button,
-.kanuni-datagrid-filter-button--pinned,
-/* An ACTIVE filter is the only sign that rows are being withheld, so it stays
-   visible in both modes — hiding it would make the grid look simply empty. */
-.kanuni-datagrid-filter-button--active {
-  visibility: visible;
-}
-.kanuni-datagrid-filter-button:hover {
-  background: var(--dg-primary-soft);
-  color: var(--dg-text);
-  /* `--dg-primary-soft` is a LIGHT tint in every light theme, so the label on
-     it is the body text, not the header's — this is the one spot in the header
-     that deliberately does not follow `--dg-header-text`. */
-}
-.kanuni-datagrid-filter-button--active {
-  color: var(--dg-primary);
-  background: var(--dg-primary-soft);
-}
-/* ── Column reorder (drag & drop) ──────────────────────────
-   The indicator is an inset shadow, not a border: a border would change the
-   cell's box and shift every column to its right by a pixel mid-drag. */
-.kanuni-datagrid-header-cell--drop-before {
-  box-shadow: inset 3px 0 0 -1px var(--dg-primary);
-}
-.kanuni-datagrid-header-cell--drop-after {
-  box-shadow: inset -3px 0 0 -1px var(--dg-primary);
-}
-[dir='rtl'] .kanuni-datagrid-header-cell--drop-before {
-  box-shadow: inset -3px 0 0 -1px var(--dg-primary);
-}
-[dir='rtl'] .kanuni-datagrid-header-cell--drop-after {
-  box-shadow: inset 3px 0 0 -1px var(--dg-primary);
-}
-/* ── Column resize handle ─────────────────────────────────── */
-.kanuni-datagrid-resize-handle {
-  position: absolute;
-  inset-block: 0;
-  inset-inline-end: -3px;
-  width: 7px;
-  z-index: 5;
-  cursor: col-resize;
-  /* Invisible by default; the line under the cursor is what marks the seam. */
-  background: transparent;
-  touch-action: none;
-}
-.kanuni-datagrid-resize-handle:hover::after,
-.kanuni-datagrid-header-cell--resizing .kanuni-datagrid-resize-handle::after {
-  content: '';
-  position: absolute;
-  inset-block: 4px;
-  inset-inline-start: 3px;
-  width: 2px;
-  border-radius: 1px;
-  background: var(--dg-primary);
-}
-/* ── Loading overlay (busy + percentage) ──────────────────── */
-.kanuni-datagrid-loading-overlay {
-  position: absolute;
-  inset: 0;
-  z-index: 20;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: color-mix(in srgb, var(--dg-bg) 62%, transparent);
-  /* Pointer-transparent: a recompute triggered by typing must not swallow the
-     next keystroke aimed at the filter box. */
-  pointer-events: none;
-}
-/* Exporting is the one phase that takes the grid away, so it looks like it.
-   The sheet is nearly opaque instead of a hint, it swallows clicks instead of
-   letting them fall through to a grid that cannot answer them, and the cursor
-   says wait. See the comment on `data-blocking` in GridLoadingOverlay.tsx. */
-.kanuni-datagrid-loading-overlay[data-blocking='true'] {
-  background: color-mix(in srgb, var(--dg-bg) 92%, transparent);
-  pointer-events: auto;
-  cursor: progress;
-}
-.kanuni-datagrid-loading-card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 10px;
-  padding: 18px 24px;
-  border: 1px solid var(--dg-border);
-  border-radius: calc(var(--dg-radius) + 4px);
-  background: var(--dg-surface);
-  box-shadow: var(--dg-shadow-card);
-  color: var(--dg-text);
-  font-size: var(--dg-chrome-font-size);
-}
-.kanuni-datagrid-loading-spinner {
-  width: 26px;
-  height: 26px;
-  border: 2px solid transparent;
-  border-bottom-color: var(--dg-primary);
-  border-radius: 50%;
-  animation: kanuni-datagrid-spin 1s linear infinite;
-}
-.kanuni-datagrid-loading-label {
-  font-weight: 500;
-  color: var(--dg-text-muted);
-}
-.kanuni-datagrid-loading-progress {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
-  width: 220px;
-}
-.kanuni-datagrid-loading-track {
-  width: 100%;
-  height: 6px;
-  border-radius: 999px;
-  overflow: hidden;
-  background: color-mix(in srgb, var(--dg-border) 70%, transparent);
-}
-.kanuni-datagrid-loading-fill {
-  height: 100%;
-  border-radius: 999px;
-  background: var(--dg-primary);
-  transition: width 160ms ease-out;
-}
-.kanuni-datagrid-loading-percent {
-  font-size: 11px;
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-}
-/* ── Filter panel (cxGrid) ────────────────────────────────────
-   Under the footer, outside the scroller: the conditions describe the whole
-   result, so they must not scroll away with the rows. */
-.kanuni-datagrid-filter-panel {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex: none;
-  padding: 4px 8px;
-  background: var(--dg-surface-header);
-  border-top: 1px solid var(--dg-border);
-  font-size: var(--dg-chrome-font-size);
-  color: var(--dg-text);
-}
-/* Suspended: the conditions are still there, just not being applied. Dimmed
-   rather than hidden — there has to be something to switch back on. */
-.kanuni-datagrid-filter-panel--suspended .kanuni-datagrid-filter-panel-text {
-  opacity: 0.5;
-  text-decoration: line-through;
-}
-.kanuni-datagrid-filter-panel-clear,
-.kanuni-datagrid-filter-panel-builder {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  width: 18px;
-  height: 18px;
-  padding: 0;
-  border: 1px solid transparent;
-  border-radius: var(--dg-radius-control);
-  background: transparent;
-  color: var(--dg-text-muted);
-  font: inherit;
-  line-height: 1;
-  cursor: pointer;
-}
-.kanuni-datagrid-filter-panel-clear:hover:not(:disabled),
-.kanuni-datagrid-filter-panel-builder:hover:not(:disabled) {
-  background: var(--dg-surface-hover);
-  border-color: var(--dg-border-strong);
-  color: var(--dg-text);
-}
-.kanuni-datagrid-filter-panel-clear:disabled,
-.kanuni-datagrid-filter-panel-builder:disabled {
-  opacity: 0.4;
-  cursor: default;
-}
-.kanuni-datagrid-filter-panel-toggle {
-  flex: none;
-  margin: 0;
-  accent-color: var(--dg-primary);
-  cursor: pointer;
-}
-.kanuni-datagrid-filter-panel-text {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.kanuni-datagrid-filter-panel-builder {
-  margin-inline-start: auto;
-}
-/* Shown only for phases that can actually stop — see CANCELLABLE in the overlay. */
-.kanuni-datagrid-loading-cancel {
-  margin-top: 8px;
-  padding: 3px 12px;
-  border: 1px solid var(--dg-border);
-  border-radius: var(--dg-radius);
-  background: var(--dg-surface);
-  color: inherit;
-  font: inherit;
-  font-size: 11px;
-  cursor: pointer;
-}
-.kanuni-datagrid-loading-cancel:hover {
-  background: var(--dg-surface-hover);
-}
-@media (prefers-reduced-motion: reduce) {
-  .kanuni-datagrid-loading-spinner {
-    animation-duration: 3s;
-  }
-  .kanuni-datagrid-loading-fill {
-    transition: none;
-  }
-}
-/* ── Filter row (under the header, same sticky geometry) ──── */
-.kanuni-datagrid-filter-row {
-  position: sticky;
-  /* Clears the BANDS as well as the header. `--dg-band-offset` is published by
-     the component (0 when there are no bands); the header height stays a
-     variable here so density keeps working. Sticking at the header height alone
-     parked this row inside the header on any banded grid, and the two drew over
-     each other as soon as the user scrolled. */
-  top: calc(var(--dg-band-offset, 0px) + var(--dg-header-height));
-  z-index: 3;
-  display: flex;
-  height: var(--dg-header-height);
-  background: var(--dg-surface-header);
-  border-bottom: var(--dg-header-border);
-}
-.kanuni-datagrid-filter-cell {
-  display: flex;
-  align-items: center;
-  flex: none;
-  height: 100%;
-  padding: 0 4px;
-  background: var(--dg-surface-header);
-  border-inline-end: var(--dg-header-cell-border);
-  overflow: hidden;
-}
-.kanuni-datagrid-filter-cell--pinned {
-  position: sticky;
-  z-index: 4;
-  background: var(--dg-surface-header);
-}
-.kanuni-datagrid-filter-input {
-  width: 100%;
-  min-width: 0;
-  height: var(--dg-filter-input-height);
-  padding: 0 6px;
-  border: 1px solid var(--dg-border-strong);
-  border-radius: var(--dg-radius-control);
-  background: var(--dg-surface);
-  color: var(--dg-text);
-  font: inherit;
-  font-size: var(--dg-control-font-size);
-}
-.kanuni-datagrid-filter-input:focus {
-  outline: none;
-  border-color: var(--dg-primary);
-}
-/* ── Header filter popup (portaled — see GridPortal) ──────── */
-.kanuni-datagrid-portal {
-  /* The portal host must not paint or capture anything itself. */
-  position: static;
-  border: none;
-  background: transparent;
-  overflow: visible;
-}
-/* ── Band fold toggle (P2.6) ──────────────────────────────── */
-.kanuni-datagrid-band-toggle {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  width: 16px;
-  height: 16px;
-  margin-inline-end: 4px;
-  padding: 0;
-  border: none;
-  border-radius: 3px;
-  background: transparent;
-  color: var(--dg-text-muted);
-  font-size: 10px;
-  line-height: 1;
-  cursor: pointer;
-}
-.kanuni-datagrid-band-toggle:hover {
-  background: var(--dg-primary-soft);
-  color: var(--dg-text);
-}
-.kanuni-datagrid-band-toggle:focus-visible {
-  outline: 2px solid var(--dg-focus-ring);
-  outline-offset: -1px;
-}
-/* ── Search highlight (P2.4) ──────────────────────────────── */
-/* A <mark>, so the match is in the accessibility tree as emphasis rather than
-   as a colour only. The browser default is a hard yellow that fights every
-   theme; these follow the accent instead. */
-.kanuni-datagrid-highlight {
-  padding: 0;
-  border-radius: 2px;
-  background: var(--dg-highlight-bg);
-  color: var(--dg-highlight-text);
-  font-weight: 600;
-}
-/* ── Cell / header tooltip (P2.1) ─────────────────────────── */
-.kanuni-datagrid-tooltip {
-  position: fixed;
-  /* Above every popup: a tooltip describes whatever is under the pointer, and
-     the pointer can be over a popup. */
-  z-index: 1100;
-  /* The tooltip must never be the hover target — it appears UNDER the pointer's
-     path, and taking the pointer would fire mouseout on the cell that asked for
-     it, hiding the tooltip, which un-hovers it, which shows it again. */
-  pointer-events: none;
-  max-width: 420px;
-  padding: 4px 8px;
-  border: 1px solid var(--dg-border-strong);
-  border-radius: var(--dg-radius);
-  background: var(--dg-surface);
-  color: var(--dg-text);
-  box-shadow: var(--dg-shadow-popup);
-  font-size: var(--dg-font-size);
-  line-height: 1.45;
-  /* Long values wrap instead of running off-screen; a pasted paragraph in a
-     cell is exactly the case the tooltip exists for. */
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-.kanuni-datagrid-filter-popup {
-  position: fixed;
-  z-index: 1000;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  width: 260px;
-  max-height: 340px;
-  padding: 8px;
-  border: 1px solid var(--dg-border-strong);
-  border-radius: var(--dg-radius);
-  /* Explicit background: a transparent popup was the PivotGrid drill-down bug. */
-  background: var(--dg-surface);
-  color: var(--dg-text);
-  box-shadow: var(--dg-shadow-popup);
-  font-size: var(--dg-font-size);
-}
-.kanuni-datagrid-filter-search {
-  width: 100%;
-  height: var(--dg-control-height);
-  padding: 0 8px;
-  border: 1px solid var(--dg-border-strong);
-  border-radius: var(--dg-radius-control);
-  background: var(--dg-surface);
-  color: var(--dg-text);
-  font: inherit;
-  font-size: var(--dg-control-font-size);
-}
-/* "There are more values than these." Sits directly under the search box
-   because the search box is the answer to it — on a capped list, search scans
-   the whole dataset rather than the values already on screen. */
-.kanuni-datagrid-filter-truncated {
-  margin: 6px 0 0;
-  font-size: 11px;
-  line-height: 1.4;
-  color: var(--dg-text-muted);
-}
-.kanuni-datagrid-filter-actions {
-  display: flex;
-  gap: 6px;
-}
-.kanuni-datagrid-filter-actions button,
-.kanuni-datagrid-filter-footer button {
-  padding: 3px 8px;
-  border: 1px solid var(--dg-border-strong);
-  border-radius: var(--dg-radius-control);
-  background: var(--dg-surface);
-  color: var(--dg-text);
-  font: inherit;
-  font-size: var(--dg-control-font-size);
-  cursor: pointer;
-}
-.kanuni-datagrid-filter-actions button:hover,
-.kanuni-datagrid-filter-footer button:hover {
-  background: var(--dg-surface-hover);
-}
-.kanuni-datagrid-filter-primary {
-  background: var(--dg-primary) !important;
-  border-color: var(--dg-primary) !important;
-  color: var(--dg-on-primary) !important;
-}
-.kanuni-datagrid-filter-list {
-  flex: 1 1 auto;
-  overflow-y: auto;
-  /* Windowed list — scroll anchoring off for the same reason as the main
-     scroller: rows repositioning during scroll read as content shifts and the
-     browser fights the gesture. See `.kanuni-datagrid-scroller`. */
-  overflow-anchor: none;
-  /* Stop the wheel from CHAINING into the grid once the list hits its end.
-     Without this, wheeling to the bottom of the list keeps going and scrolls
-     the rows underneath — which moves the anchor and closes the popup, in the
-     middle of a gesture the user meant for the list. */
-  overscroll-behavior: contain;
-  border: 1px solid var(--dg-border);
-  border-radius: var(--dg-radius-control);
-}
-.kanuni-datagrid-filter-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 3px 6px;
-  cursor: pointer;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  /* FIXED, and the virtualizer depends on it: the list renders only the rows in
-     view and positions them by `index x FILTER_ITEM_HEIGHT`. A label that
-     wrapped to two lines would put every row below it out of place. Single-line
-     is already enforced by `white-space: nowrap` above; this makes the height
-     the popup computes with a fact rather than an assumption.
-     Keep in sync with FILTER_ITEM_HEIGHT in GridHeaderFilterPopup.tsx. */
-  height: 25px;
-  box-sizing: border-box;
-  flex: none;
-}
-.kanuni-datagrid-filter-item:hover,
-.kanuni-datagrid-filter-item--active {
-  background: var(--dg-surface-hover);
-}
-.kanuni-datagrid-filter-item input {
-  flex: none;
-  accent-color: var(--dg-primary);
-}
-.kanuni-datagrid-filter-empty {
-  padding: 10px;
-  color: var(--dg-text-muted);
-  text-align: center;
-}
-.kanuni-datagrid-filter-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 6px;
-}
-/* ── Empty state ──────────────────────────────────────────── */
-.kanuni-datagrid-empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 32px 16px;
-  color: var(--dg-text-muted);
-  font-size: var(--dg-font-size);
-}
-/* ── Accessibility ────────────────────────────────────────── */
-.kanuni-datagrid-root :focus-visible {
-  outline: 2px solid var(--dg-focus-ring);
-  outline-offset: -2px;
-}
-@media (prefers-reduced-motion: reduce) {
-  .kanuni-datagrid-viewport {
-    will-change: auto;
-  }
-}
-/* ── Remote loading rows (P10) ────────────────────────────── */
-/* A row that exists on the server but has not arrived. It keeps its slot so
-   the scrollbar and every row index stay exact while the block is in flight. */
-.kanuni-datagrid-row--loading {
-  align-items: center;
-}
-.kanuni-datagrid-loading-cell {
-  position: sticky;
-  inset-inline-start: 0;
-  flex: 1;
-  border-inline-end: none;
-}
-.kanuni-datagrid-loading-bar {
-  display: block;
-  width: 40%;
-  max-width: 240px;
-  height: 8px;
-  border-radius: 4px;
-  background: var(--dg-surface-hover);
-  animation: kanuni-datagrid-pulse 1.2s ease-in-out infinite;
-}
-@keyframes kanuni-datagrid-pulse {
-  0%,
-  100% {
-    opacity: 0.45;
-  }
-  50% {
-    opacity: 1;
-  }
-}
-/* Respect a reduced-motion preference: the pulse is decoration, and a user who
-   asked for stillness should get a static placeholder. */
-@media (prefers-reduced-motion: reduce) {
-  .kanuni-datagrid-loading-bar {
-    animation: none;
-  }
-}
-/* ── RTL ──────────────────────────────────────────────────────
-   Insets are logical (inset-inline-*), so sticky columns flip on their own.
-   What does NOT flip automatically is a directional SHADOW: the edge shadow
-   that separates a left-pinned block from the scrolling body has to fall on
-   the other side when the writing direction reverses. */
-.kanuni-datagrid-root[dir='rtl'] .kanuni-datagrid-pin-edge-left,
-[dir='rtl'] .kanuni-datagrid-root .kanuni-datagrid-pin-edge-left {
-  box-shadow: var(--dg-shadow-pinned-right);
-}
-.kanuni-datagrid-root[dir='rtl'] .kanuni-datagrid-pin-edge-right,
-[dir='rtl'] .kanuni-datagrid-root .kanuni-datagrid-pin-edge-right {
-  box-shadow: var(--dg-shadow-pinned);
-}
-/* The sort caret and the resize handle are positioned, not flowed. */
-.kanuni-datagrid-root[dir='rtl'] .kanuni-datagrid-resize-handle,
-[dir='rtl'] .kanuni-datagrid-root .kanuni-datagrid-resize-handle {
-  right: auto;
-  left: 0;
-}
-/* ── Density presets ──────────────────────────────────────────
-   The ROW HEIGHT is not set here: it is a core value (the virtualizer runs on
-   it), so the component resolves the preset into `rowHeight` and core feeds it
-   back as --dg-row-height. What lives here is everything CSS owns — header
-   height, padding and type scale — so the two can never disagree about the
-   row geometry. */
-.kanuni-datagrid-root.kanuni-datagrid-density-compact {
-  --dg-header-height: 28px;
-  --dg-cell-padding-x: 6px;
-  --dg-font-size: 12px;
-  --dg-header-font-size: 11px;
-}
-.kanuni-datagrid-root.kanuni-datagrid-density-comfortable {
-  --dg-header-height: 40px;
-  --dg-cell-padding-x: 12px;
-  --dg-font-size: 14px;
-  --dg-header-font-size: 13px;
-}
-/* ── Row context menu ─────────────────────────────────────── */
-.kanuni-datagrid-context-menu {
-  position: fixed;
-  z-index: 1200;
-  min-width: 180px;
-  max-width: 320px;
-  /*
-   * A menu longer than the screen scrolls instead of running off it: the
-   * clamp in `GridContextMenu` can only move a menu that FITS, and an app row
-   * menu with a dozen entries plus the built-ins does not.
-   *
-   * This is safe only because the SUBMENU is portaled as a sibling. While it
-   * was a child, any overflow value other than `visible` clipped it away
-   * entirely — which is why this rule was removed once before.
-   */
-  max-height: calc(100vh - 16px);
-  overflow-y: auto;
-  padding: 4px;
-  border: 1px solid var(--dg-border-strong);
-  border-radius: var(--dg-radius);
-  background: var(--dg-surface);
-  color: var(--dg-text);
-  box-shadow: var(--dg-shadow-menu);
-  font-size: var(--dg-font-size);
-}
-.kanuni-datagrid-context-menu:focus {
-  outline: none;
-}
-.kanuni-datagrid-menu-row {
-  position: relative;
-}
-.kanuni-datagrid-menu-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 5px 8px;
-  border: none;
-  border-radius: var(--dg-radius-control);
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  text-align: start;
-  cursor: pointer;
-}
-/* Hover and keyboard highlight share one class so the two navigation modes
-   look identical — a menu where the arrow keys highlight differently from the
-   mouse reads as two different menus. */
-.kanuni-datagrid-menu-item:hover:not(:disabled),
-.kanuni-datagrid-menu-item--active:not(:disabled) {
-  background: var(--dg-surface-hover);
-}
-.kanuni-datagrid-menu-item:disabled {
-  opacity: 0.45;
-  cursor: default;
-}
-.kanuni-datagrid-menu-icon {
-  display: inline-flex;
-  align-items: center;
-  flex: none;
-  width: 16px;
-}
-.kanuni-datagrid-menu-label {
-  flex: 1 1 auto;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.kanuni-datagrid-menu-shortcut {
-  flex: none;
-  color: var(--dg-text-muted);
-  font-size: 11px;
-}
-.kanuni-datagrid-menu-caret {
-  flex: none;
-  color: var(--dg-text-muted);
-}
-.kanuni-datagrid-menu-separator {
-  height: 1px;
-  margin: 4px 6px;
-  background: var(--dg-border);
-}
-/* Submenus open toward the inline end, so they flip in RTL for free. */
-/*
- * Positioned in VIEWPORT coordinates by `GridContextMenu`, because it is a
- * sibling of the menu rather than a child — see the comment there. It inherits
- * the menu's box from the shared class; only the positioning differs.
- */
-.kanuni-datagrid-submenu {
-  position: fixed;
-}
-/* ── Toolbar icon button + export menu ────────────────────── */
-.kanuni-datagrid-toolbar-icon-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 24px;
-  padding: 0;
-}
-/* Spinner shown in place of the icon while an export runs, so the button does
-   not change size and the toolbar does not reflow mid-export. */
-.kanuni-datagrid-toolbar-busy {
-  width: 12px;
-  height: 12px;
-  border: 2px solid var(--dg-border-strong);
-  border-top-color: var(--dg-primary);
-  border-radius: 50%;
-  animation: kanuni-datagrid-spin 0.7s linear infinite;
-}
-@keyframes kanuni-datagrid-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .kanuni-datagrid-toolbar-busy {
-    animation: none;
-  }
-}
-/* The export menu reuses the popup shell but is a plain list of actions. */
-.kanuni-datagrid-export-menu {
-  width: 190px;
-  gap: 2px;
-  padding: 4px;
-}
-.kanuni-datagrid-chooser-empty {
-  padding: 8px 4px;
-  color: var(--dg-text-muted);
-  font-style: italic;
-}
-/* ── Column-aligned footer row (punch #18) ─────────────────
-   Sticky to the BOTTOM of the same scroller the header sticks to the top of, so
-   it scrolls horizontally with the columns and stays put vertically. */
-/* ── Pinned top/bottom rows (P2.3) ────────────────────────── */
-/* Sticky in the same stack as the header and the footer. `--dg-pinned-gap`
-   counts the header-height rows between this block and its edge (header +
-   filter row above, footer below), so the offset follows the THEME's header
-   height instead of a number measured in JS at the previous theme's size. */
-.kanuni-datagrid-pinned-rows {
-  position: sticky;
-  /* Above the data rows, below the header — a pinned row must not cover the
-     header when the grid is scrolled to the very top. */
-  z-index: 2;
-  display: flex;
-  flex-direction: column;
-  background: var(--dg-surface-header);
-}
-.kanuni-datagrid-pinned-rows--top {
-  top: calc(var(--dg-band-offset, 0px) + var(--dg-header-height) * var(--dg-pinned-gap, 1));
-  border-bottom: var(--dg-header-border);
-}
-.kanuni-datagrid-pinned-rows--bottom {
-  bottom: calc(var(--dg-header-height) * var(--dg-pinned-gap, 0));
-  border-top: var(--dg-header-border);
-}
-/* The rows inside keep the grid's cell geometry but not its striping — these
-   are not part of the alternating rhythm of the data. */
-.kanuni-datagrid-pinned-rows .kanuni-datagrid-row,
-.kanuni-datagrid-pinned-rows .kanuni-datagrid-cell {
-  background: var(--dg-surface-header);
-}
-.kanuni-datagrid-footer-row {
-  position: sticky;
-  bottom: 0;
-  z-index: 3;
-  display: flex;
-  height: var(--dg-header-height);
-  background: var(--dg-footer-bg);
-  border-top: var(--dg-header-border);
-}
-/* Totals at the TOP (P2.8) — same row, other edge. The border swaps sides so
-   the rule always separates the totals from the DATA, not from the header. */
-.kanuni-datagrid-footer-row--top {
-  top: calc(var(--dg-band-offset, 0px) + var(--dg-header-height) * var(--dg-pinned-gap, 1));
-  bottom: auto;
-  border-top: none;
-  border-bottom: var(--dg-header-border);
-}
-.kanuni-datagrid-footer-cell {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  flex: none;
-  height: 100%;
-  padding: 0 var(--dg-cell-padding-x);
-  background: var(--dg-footer-bg);
-  border-inline-end: var(--dg-header-cell-border);
-  font-size: var(--dg-header-font-size);
-  white-space: nowrap;
-  overflow: hidden;
-  user-select: none;
-}
-.kanuni-datagrid-footer-cell--number {
-  justify-content: flex-end;
-  font-variant-numeric: tabular-nums;
-}
-.kanuni-datagrid-footer-cell--pinned {
-  position: sticky;
-  /* Above the unpinned footer cells, matching the header's pinned layer. */
-  z-index: 4;
-}
-.kanuni-datagrid-footer-cell:hover {
-  background: var(--dg-surface-hover);
-  cursor: context-menu;
-}
-.kanuni-datagrid-footer-value {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-weight: 600;
-  color: var(--dg-text);
-}
-/* The affordance in an empty cell: barely there until hovered, so an untouched
-   footer reads as blank rather than as a row of dots. */
-.kanuni-datagrid-footer-hint {
-  margin-inline-start: auto;
-  color: var(--dg-border-strong);
-  opacity: 0;
-}
-.kanuni-datagrid-footer-cell:hover .kanuni-datagrid-footer-hint {
-  opacity: 1;
-}
-/* ── Focused row (gap G6) ──────────────────────────────────
-   Deliberately NOT the selection colour: focus is where the keyboard is,
-   selection is what an action applies to, and a user who cannot tell them
-   apart cannot tell what "delete selected" is about to do. An inset bar on the
-   leading edge reads as "you are here" without competing with the row tint. */
-/* Mixed into the row's OWN colour, never into `transparent`.
-   Pinned cells take `background: inherit`, so a see-through row tint made them
-   see-through too — and a sticky cell you can see through shows the columns
-   sliding along underneath it, which reads as two rows of text printed on top
-   of each other. Both variants below are opaque, and keep the stripe. */
-.kanuni-datagrid-row--focused {
-  background: color-mix(in srgb, var(--dg-primary) 7%, var(--dg-surface));
-  box-shadow: inset 3px 0 0 0 var(--dg-primary);
-}
-.kanuni-datagrid-row--odd.kanuni-datagrid-row--focused {
-  background: color-mix(in srgb, var(--dg-primary) 7%, var(--dg-surface-stripe));
-}
-/* Selected AND focused: the selection tint wins, the bar still marks the row. */
-.kanuni-datagrid-row--focused.kanuni-datagrid-row--selected {
-  box-shadow: inset 3px 0 0 0 var(--dg-primary);
-}
-[dir='rtl'] .kanuni-datagrid-row--focused,
-[dir='rtl'] .kanuni-datagrid-row--focused.kanuni-datagrid-row--selected {
-  box-shadow: inset -3px 0 0 0 var(--dg-primary);
-}
-/* ── Row drag & drop (G7) ─────────────────────────────────── */
-/*
- * A sticky GRIP overlaid at the row's inline start, not a lead column: a third
- * lead column would have to be threaded through `leadColumnWidth`, every
- * sticky offset and every aria-colindex across six components, and those
- * drifting apart is exactly what desynchronizes header and body.
- */
-.kanuni-datagrid-row-grip {
-  position: sticky;
-  inset-inline-start: 0;
-  z-index: 5;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  width: 0;
-  overflow: visible;
-  color: var(--dg-text-muted, #94a3b8);
-  cursor: grab;
-  opacity: 0;
-  transition: opacity 120ms ease;
-}
-/* Takes no horizontal space (width: 0) so column geometry is untouched; the
-   glyph is painted into the row's own leading padding. */
-.kanuni-datagrid-row-grip > svg {
-  position: absolute;
-  /* Past the row-number column when one is showing (audit finding #4): the
-     glyph used to sit at 1px unconditionally, which put it on top of the
-     digits once P3.5 parked a number column at the inline start — visible at
-     six-digit row counts, where the right-aligned number reaches the cell's
-     left edge. The adapter sets the variable; without it nothing changes. */
-  inset-inline-start: calc(var(--dg-grip-inset, 0px) + 1px);
-}
-.kanuni-datagrid-row:hover .kanuni-datagrid-row-grip {
-  opacity: 1;
-}
-.kanuni-datagrid-row-grip:active {
-  cursor: grabbing;
-}
-/* The drop line. An INSET box-shadow rather than a border: a border would add
-   a pixel to the row and shift every row below it by one as the pointer moves,
-   which reads as the whole grid twitching. */
-.kanuni-datagrid-row--drop-before {
-  box-shadow: inset 0 2px 0 0 var(--dg-primary);
-}
-.kanuni-datagrid-row--drop-after {
-  box-shadow: inset 0 -2px 0 0 var(--dg-primary);
-}
-/* ── Tree data (P1.4) ──────────────────────────────────────
-   Indentation is inline on the cell (depth is data); everything visual lives
-   here so all six themes and dark mode restyle the toggle for free. */
-.kanuni-datagrid-tree-cell {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  min-width: 0;
-}
-.kanuni-datagrid-tree-toggle {
-  flex: none;
-  width: 16px;
-  height: 16px;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: var(--dg-text-muted, #64748b);
-  font-size: 10px;
-  line-height: 16px;
-  cursor: pointer;
-  border-radius: var(--dg-radius-control, 4px);
-}
-.kanuni-datagrid-tree-toggle:hover {
-  color: var(--dg-text, #0f172a);
-  background: var(--dg-surface-hover, #f1f5f9);
-}
-.kanuni-datagrid-tree-toggle--leaf {
-  cursor: default;
-  pointer-events: none;
-}
-/* Shown only because a descendant matched the filter — visibly the path,
-   not a match. */
-.kanuni-datagrid-tree-cell--ancestor {
-  color: var(--dg-text-muted, #64748b);
-}
-/* ── Cell flash (P1.7) ─────────────────────────────────────
-   The "this number just changed" pulse. Driven by a class the adapter adds
-   and removes; the colour is a token so all six themes and dark mode inherit
-   it, and the animation is what fades — no JS frame loop. */
-.kanuni-datagrid-cell--flash {
-  animation: kanuni-datagrid-flash var(--dg-flash-duration, 700ms) ease-out;
-}
-@keyframes kanuni-datagrid-flash {
-  from {
-    background-color: var(--dg-flash-bg, rgba(3, 105, 161, 0.35));
-  }
-  to {
-    background-color: transparent;
-  }
-}
-/* A flashing grid is exactly the kind of motion that triggers vestibular
-   symptoms. Reduced-motion keeps the SIGNAL — the cell still marks itself —
-   and drops the animation. */
-@media (prefers-reduced-motion: reduce) {
-  .kanuni-datagrid-cell--flash {
-    animation: none;
-    background-color: var(--dg-flash-bg, rgba(3, 105, 161, 0.35));
-  }
-}
-/* ── Print layout (gap analysis P3.4) ──────────────────────────
-   Everything that makes the grid fast on screen is what ruins it on paper. The
-   scroller is a clipped, fixed-height box holding one screenful; the print
-   engine gets exactly that and paginates twenty rows out of a hundred thousand.
-   This class undoes the five things that clip the content, in the order they
-   clip it: the root's own box, the scroll container, the canvas that carries
-   the virtual height, the absolutely-positioned viewport, and the block
-   transform that parks the rendered window at its scroll offset.
-   The class is set by the ADAPTER, not by a bare `@media print`, because the
-   rows themselves have to be re-rendered — CSS cannot un-virtualize a list that
-   does not exist in the DOM. */
-.kanuni-datagrid-print {
-  height: auto !important;
-  max-height: none !important;
-  overflow: visible !important;
-  /* Apps mount the grid as a flex child that fills the page — the shape a
-     screen layout wants. Flex sizing beats `height: auto`, so the box kept the
-     viewport's height and the rows below the fold printed on top of whatever
-     came next. `flex: none` hands the sizing back to the content.
-     A host that constrains the grid from further out still has to release it;
-     the grid can only unclip itself. */
-  flex: none !important;
-}
-.kanuni-datagrid-print .kanuni-datagrid-scroller {
-  height: auto !important;
-  max-height: none !important;
-  overflow: visible !important;
-}
-.kanuni-datagrid-print .kanuni-datagrid-canvas,
-.kanuni-datagrid-print .kanuni-datagrid-rows {
-  /* The virtual extent, in a document that is no longer virtual.
-     `.kanuni-datagrid-rows` is the one that matters and the one that was
-     missed first: it carries the scroll canvas's height inline, and with the
-     viewport put back in flow inside it, that inline height decided how much
-     of the grid reached the page — five hundred rows printed as two hundred
-     pixels of paper. The canvas is here for the same reason one level up. */
-  height: auto !important;
-}
-.kanuni-datagrid-print .kanuni-datagrid-viewport {
-  position: static;
-  /* The block offset is a scroll position. On paper there is no scrolling, and
-     leaving it in pushed the first row down by however far the user happened to
-     have scrolled. */
-  transform: none !important;
-  will-change: auto;
-}
-/* Sticky is meaningless without a scrolling ancestor, but it still creates the
-   stacking and offset behaviour — a pinned column would print on top of the
-   cell it sits beside. In flow, each cell keeps its own width and order. */
-.kanuni-datagrid-print .kanuni-datagrid-header,
-.kanuni-datagrid-print .kanuni-datagrid-band-row,
-.kanuni-datagrid-print .kanuni-datagrid-filter-row,
-.kanuni-datagrid-print .kanuni-datagrid-pinned-rows,
-.kanuni-datagrid-print .kanuni-datagrid-footer-row {
-  position: static !important;
-}
-/* Rules that only make sense once the ink is on paper. */
-@media print {
-  /* Release the page around the grid.
-     A grid is normally mounted as a flex child filling a viewport-height shell,
-     and every ancestor in that chain holds it at one screen — the grid can
-     unclip itself and still print one page. The adapter marks the ROOT ELEMENT
-     while print layout is on, because CSS cannot reach an ancestor from a class
-     on the grid, and only for the duration.
-     The grid's OWN wrappers are named; the host's are not, so an app with its
-     own fixed-height shell needs the same two lines on it. */
-  .kanuni-datagrid-printing,
-  .kanuni-datagrid-printing body,
-  .kanuni-datagrid-printing .kanuni-datagrid-enterprise,
-  .kanuni-datagrid-printing .kanuni-datagrid-main {
-    height: auto !important;
-    max-height: none !important;
-    overflow: visible !important;
-    flex: none !important;
-  }
-  /* A row split across a page break is unreadable — the top half of the text on
-     one sheet and the bottom half on the next. */
-  .kanuni-datagrid-print .kanuni-datagrid-row,
-  .kanuni-datagrid-print .kanuni-datagrid-group-row {
-    break-inside: avoid;
-    page-break-inside: avoid;
-  }
-  /* Chrome and Safari drop background colours by default, which turns the
-     header, the group banners and the row striping into undifferentiated white.
-     The structure IS the meaning here, so ask for them back. */
-  .kanuni-datagrid-print {
-    -webkit-print-color-adjust: exact;
-    print-color-adjust: exact;
-  }
-  /* Controls that print as furniture: nothing on paper can be clicked, and each
-     one costs a column of width that the data needs. */
-  .kanuni-datagrid-print .kanuni-datagrid-toolbar,
-  .kanuni-datagrid-print .kanuni-datagrid-filter-panel,
-  .kanuni-datagrid-print .kanuni-datagrid-pager,
-  .kanuni-datagrid-print .kanuni-datagrid-status-bar,
-  .kanuni-datagrid-print .kanuni-datagrid-sidebar,
-  .kanuni-datagrid-print .kanuni-datagrid-resize-handle,
-  .kanuni-datagrid-print .kanuni-datagrid-filter-button {
-    display: none !important;
-  }
-}
-/* ── Cell notes (gap analysis P3.3) ────────────────────────────
-   A note is something a PERSON attached to this cell, and the whole value of
-   the marker is that you can find those cells without hovering every one of
-   them. Excel's corner triangle, for the same reason and in the same corner. */
-.kanuni-datagrid-cell--noted {
-  position: relative;
-}
-.kanuni-datagrid-cell--noted::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  /* Logical, not `right`: in an RTL grid the marker belongs in the corner the
-     reader's eye ends at, which is the other one. */
-  inset-inline-end: 0;
-  width: 0;
-  height: 0;
-  /* A triangle from borders — no glyph, no font dependency, no extra element in
-     a cell the row memo is built to keep cheap. */
-  border-top: 6px solid var(--dg-note-marker);
-  border-inline-start: 6px solid transparent;
-  pointer-events: none;
-}
-.kanuni-datagrid-note-editor {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 8px;
-  min-width: 260px;
-}
-.kanuni-datagrid-note-input {
-  font: inherit;
-  color: var(--dg-text);
-  background: var(--dg-surface);
-  border: 1px solid var(--dg-border);
-  border-radius: var(--dg-radius);
-  padding: 6px 8px;
-  resize: vertical;
-  min-height: 64px;
-}
-.kanuni-datagrid-note-input:focus-visible {
-  outline: 2px solid var(--dg-focus-ring);
-  outline-offset: -1px;
-}
-.kanuni-datagrid-note-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 6px;
-}
-/* ── Cell spans (gap analysis P3.1) ────────────────────────────
-   The block is an absolutely-positioned child of the cell, not a taller cell.
-   A taller cell would change the height of its ROW, and a grid with an
-   `autoHeight` column measures rows and feeds the result back to the engine —
-   block inflates row, row moves offsets, offsets resize block, React ends it
-   with "Maximum update depth exceeded". Out of the flow, the cell stays the
-   height it always was. */
-.kanuni-datagrid-cell--span {
-  position: relative;
-  /* The box reaches past the cell's own bottom edge on purpose. */
-  overflow: visible;
-}
-.kanuni-datagrid-span-box {
-  position: absolute;
-  top: 0;
-  inset-inline: 0;
-  display: flex;
-  /* Top-aligned, not centred: a two-row block and a fifty-row block should put
-     the value in the same place, and a reader looks for it beside the first row
-     of the group. */
-  align-items: flex-start;
-  /* Horizontal padding matches an ordinary cell so the value lines up with the
-     column above and below. The top padding centres it within the block's FIRST
-     row — the grid's line-height is 1.4, so half the leftover row height puts
-     it exactly where an unmerged cell would sit. */
-  padding: calc((var(--dg-row-height) - 1.4em) / 2) var(--dg-cell-padding-x);
-  /* Its own background: the row underneath ends where the row does, and the
-     rest of the block would show whatever is behind it. */
-  background: var(--dg-surface);
-  /* Above the STATIC center cells of later rows (which would otherwise paint
-     their backgrounds over everything below the block's first row) — but below
-     the pinned columns' 2. The audit caught 3 here: a center column's block
-     painted OVER the left-pinned column during horizontal scroll, because the
-     box competes in the viewport's stacking context while a box inside a
-     pinned cell is scoped by its parent's own context. */
-  z-index: 1;
-  border-bottom: var(--dg-row-border);
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-.kanuni-datagrid-cell--span-covered {
-  /* No content, no rules. The block above owns this space. */
-  border-bottom: none;
-  background: transparent;
-}
-/* The FOCUSED covered cell lifts over the block and shows its own content —
-   this is what makes an editor opened on it visible (audit finding #3), and
-   arrowing through a merge gives per-row feedback instead of a void. */
-.kanuni-datagrid-cell--span-covered.kanuni-datagrid-cell--focused {
-  position: relative;
-  z-index: 2;
-  background: var(--dg-surface);
-  border-bottom: var(--dg-row-border);
-}
-/* A merged block sits over rows that stripe, get selected and get hovered.
-   Their treatment must not show THROUGH the block — only beside it. */
-.kanuni-datagrid-row--odd .kanuni-datagrid-span-box,
-.kanuni-datagrid-row--selected .kanuni-datagrid-span-box {
-  background: var(--dg-surface);
-}
-/* ── Filter popup resize handle (user request, 2026-08-14) ─────
-   One corner, chosen by where there is room to grow: bottom-right normally,
-   bottom-left when the popup is clamped against the viewport's right edge.
-   Drawn as the familiar diagonal ridges so it reads as "drag me". */
-.kanuni-datagrid-popup-resize {
-  position: absolute;
-  bottom: 0;
-  width: 14px;
-  height: 14px;
-  z-index: 2;
-  background:
-    repeating-linear-gradient(
-      -45deg,
-      transparent 0 3px,
-      var(--dg-border-strong) 3px 4px
-    );
-  opacity: 0.7;
-}
-.kanuni-datagrid-popup-resize--right {
-  right: 0;
-  cursor: nwse-resize;
-  clip-path: polygon(100% 0, 100% 100%, 0 100%);
-}
-.kanuni-datagrid-popup-resize--left {
-  left: 0;
-  cursor: nesw-resize;
-  clip-path: polygon(0 0, 100% 100%, 0 100%);
-  background:
-    repeating-linear-gradient(
-      45deg,
-      transparent 0 3px,
-      var(--dg-border-strong) 3px 4px
-    );
-}
+/* ─────────────────────────────────────────────────────────────
+   KANUNILABS DataGrid — isolated theme system
+   ─────────────────────────────────────────────────────────────
+   Every rule is scoped under .kanuni-datagrid-root so the host app's CSS
+   cannot bleed in and ours cannot bleed out. Tokens mirror the PivotGrid
+   vocabulary (--pivot-*) with a --dg-* prefix so the two products can be
+   themed side by side without collisions.
+   ───────────────────────────────────────────────────────────── */
+/* ── Design tokens ───────────────────────────────────────────
+   Declared on more than the grid root because two things render OUTSIDE it
+   and still have to look like the grid: the enterprise wrapper (which owns
+   the row/form editor, a SIBLING of the root) and any layer portalled to
+   <body> (the lookup list, tagged `.kanuni-datagrid-detached`).
+   Tokens defined only on the root left those resolving `var(--dg-surface)` to
+   nothing — which is not a fallback but an INVALID declaration, so the popup
+   editor rendered fully transparent and unreadable over the grid.
+   Only the custom properties live here. The grid's own box (border, radius,
+   overflow, flex) stays on the root below: giving it to the wrapper would draw
+   a second border around the whole component and clip the editor. */
+.kanuni-datagrid-root,
+.kanuni-datagrid-enterprise,
+.kanuni-datagrid-detached {
+  /* ── Color tokens ── */
+  --dg-bg: #ffffff;
+  --dg-surface: #ffffff;
+  --dg-surface-header: #f8fafc;      /* slate-50 */
+  --dg-surface-hover: #f1f5f9;       /* slate-100 */
+  --dg-surface-stripe: #fafafa;
+  --dg-border: #e2e8f0;              /* slate-200 */
+  --dg-border-strong: #cbd5e1;       /* slate-300 */
+  --dg-text: #0f172a;                /* slate-900 */
+  --dg-text-muted: #64748b;          /* slate-500 */
+  /* sky-700, and the depth is the point rather than the hue.
+     This was sky-500 (#0ea5e9), which is the accent EVERY foreground in the
+     grid is drawn from: the sort caret over the header, the active funnel, the
+     editor underline, the detail rule, and the white label on a group chip or
+     a primary button. On a light surface sky-500 measures 2.77:1 under white
+     and 2.65:1 as a caret on the header — under the 4.5:1 that text needs and
+     under the 3:1 that an icon needs. sky-600 was not enough either (4.10:1
+     white-on). sky-700 clears both: 5.93:1 under white, 5.67:1 on the header.
+     The dark palette below keeps sky-400 — it is already at 8.33:1 there,
+     because the problem was never the hue, it was using a mid-tone accent
+     against a white background. */
+  --dg-primary: #0369a1;             /* sky-700 */
+  --dg-primary-soft: #e0f2fe;        /* sky-100 */
+  --dg-focus-ring: #0369a1;          /* matches the accent */
+  /* Cell flash (P1.7). Translucent so the row's own background — striped,
+     selected, dirty — stays visible under the pulse rather than being
+     replaced by it. */
+  --dg-flash-bg: rgba(3, 105, 161, 0.35);
+  --dg-flash-duration: 700ms;
+  /* Cell note marker (P3.3). Red on purpose and NOT the accent: the accent
+     means "the grid did this" (focus, selection, sort), and a note means
+     "a person put something here" — two different kinds of signal. */
+  --dg-note-marker: #dc2626;
+  /* ── Semantic colours ──────────────────────────────────────
+     Every default below is the literal that used to be written inline at the
+     point of use, so a grid with no theme renders exactly as before. They are
+     tokens now because a theme has to be able to move them: `--dg-on-primary`
+     is the clearest case — the KanuniLabs accent is a GOLD, and the white that
+     reads fine on sky-500 measures about 2:1 on it. A theme that can recolour
+     the chip but not the text on the chip is a theme that ships unreadable
+     buttons. */
+  /* The header row is its own surface, separate from `--dg-surface-header`.
+     They default to the same value, and every theme here but one keeps them
+     that way — but a corporate theme with an INK header still wants the group
+     panel, the filter row and the footer to stay light. Without the split, the
+     one token dragged all four along and the panel hints (muted text) went
+     unreadable on the dark fill. */
+  --dg-header-bg: var(--dg-surface-header);
+  --dg-header-text: var(--dg-text);
+  --dg-header-text-muted: var(--dg-text-muted);
+  --dg-header-hover: var(--dg-surface-hover);
+  --dg-on-primary: #ffffff;
+  --dg-danger: #dc2626;              /* red-600 — borders, solid fills */
+  --dg-danger-text: #b91c1c;         /* red-700 — text on a light surface */
+  --dg-on-danger: #ffffff;           /* text ON a solid --dg-danger fill */
+  --dg-warning: #b45309;             /* amber-700 */
+  --dg-selected-bg: var(--dg-primary-soft);
+  /* Search highlight (P2.4). Amber rather than the accent: the accent already
+     means "selected" and "focused" in this grid, and a third meaning on the
+     same colour would make a highlighted cell read as a selected one. */
+  --dg-highlight-bg: #fde68a;        /* amber-200 */
+  --dg-highlight-text: #713f12;      /* amber-900 — 8.9:1 on the above */
+  --dg-group-bg: var(--dg-surface-header);
+  --dg-footer-bg: var(--dg-surface-header);
+  --dg-overlay: rgba(15, 23, 42, 0.55);
+  --dg-scrollbar-thumb: var(--dg-border-strong);
+  --dg-scrollbar-track: transparent;
+  /* ── Elevation ──
+     A flat theme sets these to `none`; Material raises them. */
+  --dg-shadow-popup: 0 10px 25px -5px rgba(15, 23, 42, 0.25);
+  --dg-shadow-popup-sm: 0 8px 24px rgba(15, 23, 42, 0.16);
+  --dg-shadow-menu: 0 12px 28px rgba(15, 23, 42, 0.22);
+  --dg-shadow-card: 0 12px 32px rgba(15, 23, 42, 0.18);
+  --dg-shadow-panel: 0 8px 20px rgba(0, 0, 0, 0.12);
+  --dg-shadow-dialog: 0 24px 48px rgba(0, 0, 0, 0.28);
+  /* ── Metric tokens ── */
+  --dg-row-height: 28px;
+  --dg-header-height: 32px;
+  --dg-cell-padding-x: 8px;
+  --dg-font-size: 13px;
+  --dg-header-font-size: 12px;
+  --dg-radius: 6px;
+  --dg-shadow-pinned: 2px 0 4px -2px rgba(15, 23, 42, 0.18);
+  --dg-shadow-pinned-right: -2px 0 4px -2px rgba(15, 23, 42, 0.18);
+  /* ── Line work ─────────────────────────────────────────────
+     Whole SHORTHANDS rather than a colour and a width, so a theme can drop a
+     line entirely (`none`) instead of only fading it. This is most of what
+     separates the presets: Balham rules every column and every row, Material
+     rules rows only, Quartz keeps the rows faint and skips the columns. */
+  --dg-cell-border: 1px solid var(--dg-border);
+  --dg-row-border: 1px solid var(--dg-border);
+  --dg-header-cell-border: 1px solid var(--dg-border);
+  --dg-header-border: 1px solid var(--dg-border-strong);
+  /* A band's EDGE is not a column separator, so it gets its own token rather
+     than riding on `--dg-header-cell-border`. Quartz and Material set that one
+     to `none` on purpose — they rule rows, not columns — and the bands went
+     with it: "Where" and "Sales" sat over their columns with nothing marking
+     where either one started or stopped. Same argument the band row's
+     `border-bottom` already makes: a band boundary is structural. A theme can
+     still override this token if it wants a different line.
+     Mixed from the header TEXT rather than taken from a border token, because
+     both border tokens are too faint for a 24px vertical segment: measured on
+     Quartz against the header background, `--dg-border` gives 1.17:1 and
+     `--dg-border-strong` 1.39:1 — lines that are technically drawn and
+     practically invisible, i.e. a fix that changes nothing the user sees. The
+     mix lands near 2:1 and follows the theme in both light and dark, since the
+     header text is what already has to be readable on that ground. */
+  --dg-band-cell-border: 1px solid color-mix(in srgb, var(--dg-header-text) 32%, transparent);
+  /* ── Header treatment ── */
+  --dg-header-weight: 600;
+  --dg-header-transform: none;
+  --dg-header-tracking: normal;
+  /* ── Chrome (toolbar, pager, panels, popups) ──
+     Sized separately from the data surface: a compact grid shrinks its rows
+     hard, but a 9px button is not usable at any density. */
+  --dg-chrome-font-size: 12px;
+  --dg-chrome-padding-y: 6px;
+  --dg-control-height: 26px;
+  --dg-control-font-size: 12px;
+  --dg-filter-input-height: 22px;
+  --dg-radius-control: 4px;
+  /* The line box a WRAPPED cell lays its text out on, and the height an editor
+     takes in one. Whole pixels — see the note on `--wrap` below. */
+  --dg-wrap-line-height: 18px;
+}
+/* Detached surfaces carry the foreground as well as the tokens, for the reason
+   the enterprise wrapper does: a portalled layer is a child of <body>, so
+   anything inside it written as `color: inherit` would resolve against the host
+   page rather than against the grid it belongs to. The dialog and the row
+   editor set their own colour, but the box AROUND them is the safety net. */
+.kanuni-datagrid-detached {
+  color: var(--dg-text);
+}
+/* The grid's own box. */
+.kanuni-datagrid-root {
+  box-sizing: border-box;
+  font-family: inherit;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid var(--dg-border);
+  border-radius: var(--dg-radius);
+  background: var(--dg-bg);
+  color: var(--dg-text);
+  font-size: var(--dg-font-size);
+  line-height: 1.4;
+}
+.kanuni-datagrid-root *,
+.kanuni-datagrid-root *::before,
+.kanuni-datagrid-root *::after {
+  box-sizing: border-box;
+}
+/* Dark theme: opt in with .kanuni-datagrid-root.kanuni-datagrid-dark */
+.kanuni-datagrid-root.kanuni-datagrid-dark,
+.kanuni-datagrid-enterprise.kanuni-datagrid-dark,
+.kanuni-datagrid-detached.kanuni-datagrid-dark {
+  --dg-bg: #0b1120;
+  --dg-surface: #0f172a;
+  --dg-surface-header: #16233c;
+  --dg-surface-hover: #1e293b;
+  --dg-surface-stripe: #101a2e;
+  --dg-border: #24344d;
+  --dg-border-strong: #334155;
+  --dg-text: #e2e8f0;
+  --dg-text-muted: #94a3b8;
+  --dg-primary: #38bdf8;
+  --dg-primary-soft: #0c4a6e;
+  --dg-focus-ring: #7dd3fc;
+  /* Lifted for a dark surface: crimson on near-black reads as brown. */
+  --dg-note-marker: #f87171;
+  --dg-shadow-pinned: 2px 0 4px -2px rgba(0, 0, 0, 0.55);
+  --dg-shadow-pinned-right: -2px 0 4px -2px rgba(0, 0, 0, 0.55);
+  /* The semantic set, re-pointed for a dark surface. `--dg-on-primary` goes
+     DARK here because the dark accent is a light sky-400. */
+  --dg-on-primary: #082f49;
+  /* Dark: a muted amber fill with light text, so the mark reads as emphasis
+     instead of glowing off a dark surface the way amber-200 would. */
+  --dg-highlight-bg: #78350f;        /* amber-900 */
+  --dg-highlight-text: #fef3c7;      /* amber-100 — 9.6:1 on the above */
+  --dg-danger: #f87171;
+  --dg-danger-text: #fca5a5;
+  /* The dark danger is a LIGHT red, so what sits on it has to be dark. White
+     on #f87171 measures 2.4:1 — the delete button's own label. */
+  --dg-on-danger: #450a0a;
+  --dg-warning: #fbbf24;
+  --dg-overlay: rgba(2, 6, 23, 0.7);
+  --dg-scrollbar-thumb: #475569;
+  --dg-shadow-popup: 0 10px 25px -5px rgba(0, 0, 0, 0.6);
+  --dg-shadow-popup-sm: 0 8px 24px rgba(0, 0, 0, 0.5);
+  --dg-shadow-menu: 0 12px 28px rgba(0, 0, 0, 0.55);
+  --dg-shadow-card: 0 12px 32px rgba(0, 0, 0, 0.55);
+  --dg-shadow-panel: 0 8px 20px rgba(0, 0, 0, 0.45);
+  --dg-shadow-dialog: 0 24px 48px rgba(0, 0, 0, 0.65);
+}
+/* ── Single scroll container (§7.4: NO dual-table architecture) ────────
+   The header and the body live in ONE scroller, so horizontal alignment
+   cannot drift: there is no second element to keep in sync. */
+.kanuni-datagrid-scroller {
+  position: relative;
+  flex: 1 1 auto;
+  overflow: auto;
+  overscroll-behavior: contain;
+  /* Scroll anchoring must be OFF in a virtualized scroller. Under scroll
+     compression the rows legitimately move relative to the canvas on every
+     scroll; Chrome's anchoring reads that as "content shifted under the user"
+     and walks scrollTop back to chase the anchor row. During a scrollbar drag
+     the correction is deferred and applied on mouse RELEASE — the reported
+     symptom (2026-08-14, 1M rows): the last rows peek out while dragging and
+     snap back when the button is let go, leaving the true bottom unreachable
+     by user scrolling while programmatic probes see nothing wrong. */
+  overflow-anchor: none;
+  background: var(--dg-surface);
+}
+/* Sized to the full virtual extent so the native scrollbar is accurate. */
+.kanuni-datagrid-canvas {
+  position: relative;
+}
+/* ── Header ───────────────────────────────────────────────── */
+/* ── Header bands (multi-level headers) ──────────────────────
+   Siblings of the header row, each sticky at its own offset so the whole
+   stack stays put while the rows scroll under it. */
+.kanuni-datagrid-band-row {
+  position: sticky;
+  z-index: 4;
+  display: flex;
+  background: var(--dg-header-bg);
+  /* Deliberately a literal, not `--dg-header-cell-border`: that token is the
+     COLUMN separator, which some themes drop entirely. The line under a band
+     row is structural — without it a two-level header reads as one tall box. */
+  border-bottom: 1px solid var(--dg-border);
+}
+.kanuni-datagrid-band-cell {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  padding: 0 8px;
+  background: var(--dg-header-bg);
+  color: var(--dg-header-text);
+  font-size: calc(var(--dg-font-size) - 1px);
+  font-weight: var(--dg-header-weight);
+}
+/* A real band is drawn as a bounded box, so its extent is readable: the right
+   edge on every one, and the left edge only where the thing before it is NOT
+   another band. Bands that touch therefore share one line instead of drawing
+   two beside each other. */
+.kanuni-datagrid-band-cell:not(.kanuni-datagrid-band-cell--spacer) {
+  border-inline-end: var(--dg-band-cell-border);
+}
+.kanuni-datagrid-band-cell--spacer + .kanuni-datagrid-band-cell:not(.kanuni-datagrid-band-cell--spacer),
+.kanuni-datagrid-band-cell:first-child:not(.kanuni-datagrid-band-cell--spacer) {
+  border-inline-start: var(--dg-band-cell-border);
+}
+/* No band at this level: the column's own header reaches up through here, so
+   the box must be INVISIBLE rather than an empty cell with borders. */
+.kanuni-datagrid-band-cell--spacer {
+  border-inline-end: none;
+  border-inline-start: none;
+}
+.kanuni-datagrid-band-cell--pinned {
+  position: sticky;
+  z-index: 5;
+}
+.kanuni-datagrid-band-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.kanuni-datagrid-header {
+  position: sticky;
+  top: 0;
+  z-index: 3;
+  display: flex;
+  height: var(--dg-header-height);
+  background: var(--dg-header-bg);
+  border-bottom: var(--dg-header-border);
+}
+.kanuni-datagrid-header-cell {
+  /* Anchors the resize handle. Pinned headers override this with `sticky`,
+     which is also a positioned ancestor, so the handle works there too. */
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex: none;
+  height: 100%;
+  padding: 0 var(--dg-cell-padding-x);
+  background: var(--dg-header-bg);
+  border-inline-end: var(--dg-header-cell-border);
+  font-size: var(--dg-header-font-size);
+  font-weight: var(--dg-header-weight);
+  letter-spacing: var(--dg-header-tracking);
+  text-transform: var(--dg-header-transform);
+  color: var(--dg-header-text);
+  white-space: nowrap;
+  overflow: hidden;
+  user-select: none;
+}
+.kanuni-datagrid-header-cell--sortable {
+  cursor: pointer;
+}
+.kanuni-datagrid-header-cell--sortable:hover {
+  background: var(--dg-header-hover);
+}
+.kanuni-datagrid-header-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.kanuni-datagrid-sort-indicator {
+  flex: none;
+  font-size: 10px;
+  line-height: 1;
+  color: var(--dg-primary);
+}
+.kanuni-datagrid-sort-order {
+  flex: none;
+  font-size: 9px;
+  color: var(--dg-header-text-muted);
+}
+/* ── Rows and cells ───────────────────────────────────────── */
+.kanuni-datagrid-viewport {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  will-change: transform;
+}
+.kanuni-datagrid-row {
+  display: flex;
+  height: var(--dg-row-height);
+  background: var(--dg-surface);
+  border-bottom: var(--dg-row-border);
+  /* Dragging a CELL RANGE must not also drag a text selection. The browser
+     starts one on any mousedown-and-move over text, so the user got two
+     overlapping highlights at once — the grid's range in pale blue and the
+     native selection in solid blue — with no way to tell which one the totals
+     strip was summing. The header and footer already do this; the data rows
+     were the gap. Copying is not lost: the range owns Ctrl+C. */
+  user-select: none;
+}
+/* ── Auto-height rows ──────────────────────────────────────
+   A grid with an `autoHeight` column lets its rows grow. The row's height is
+   NOT written inline here: it is measured after layout and handed to the window
+   engine, which owns the scroll canvas and every row offset. Setting it inline
+   as well would make the measurement read back whatever was set — the row would
+   agree with itself and never grow.
+   `min-height` keeps a one-line row exactly the height it was, so turning the
+   feature on does not resize the rows that did not need it. */
+.kanuni-datagrid-root[data-auto-height] .kanuni-datagrid-row {
+  height: auto;
+  min-height: var(--dg-row-height);
+}
+/* Every OTHER cell of an autoHeight grid must stretch to its row.
+   The base rule's `height: 100%` cannot resolve against the row's
+   `height: auto`, so it computed as content height and every single-line cell
+   collapsed to its text — 18px inside a 28px row, worse inside a wrapped one.
+   Two user-visible symptoms (report, 2026-08-14): the focus rectangle hugged
+   the TEXT instead of the cell, and a click in the lower band of a cell landed
+   on the bare row — no column resolved, so nothing got focused. Stretching is
+   what the base rule always meant; `align-items: center` then keeps single-line
+   text centred exactly as in a fixed-height grid. The wrap cell is excluded:
+   its own block sizes it to its text on purpose — that is how the row learns
+   how tall to be. */
+.kanuni-datagrid-root[data-auto-height] .kanuni-datagrid-row .kanuni-datagrid-cell:not(.kanuni-datagrid-cell--wrap) {
+  height: auto;
+  align-self: stretch;
+}
+/* Anything the user genuinely types into, or reads as prose, gets it back. */
+.kanuni-datagrid-row input,
+.kanuni-datagrid-row textarea,
+.kanuni-datagrid-row select,
+.kanuni-datagrid-detail-cell,
+.kanuni-datagrid-editform-cell {
+  user-select: text;
+}
+.kanuni-datagrid-row--odd {
+  background: var(--dg-surface-stripe);
+}
+.kanuni-datagrid-row:hover,
+.kanuni-datagrid-row:hover .kanuni-datagrid-cell--pinned {
+  background: var(--dg-surface-hover);
+}
+.kanuni-datagrid-cell {
+  display: flex;
+  align-items: center;
+  flex: none;
+  height: 100%;
+  padding: 0 var(--dg-cell-padding-x);
+  border-inline-end: var(--dg-cell-border);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+/* ── autoHeight: the columns that wrap ─────────────────────
+   Only the columns that asked for it. Everything else keeps its single line and
+   its ellipsis — wrapping a whole grid because one column needed to is how a
+   dense table turns into a wall of text.
+   The doubled class is deliberate and load-bearing. `.kanuni-datagrid-cell--wrap`
+   alone has the same specificity as the base rule directly above, so whichever
+   came LAST in the file won; written earlier in the sheet it lost silently and
+   the cells kept `white-space: nowrap` while everything else about the feature
+   worked. Two classes settle it regardless of where this block sits. */
+.kanuni-datagrid-cell.kanuni-datagrid-cell--wrap {
+  white-space: normal;
+  overflow: visible;
+  text-overflow: clip;
+  /* `anywhere` and not `break-word`: an unbroken 200-character token (a URL, a
+     serial number) otherwise overflows its column and lands on the next one. */
+  overflow-wrap: anywhere;
+  align-items: flex-start;
+  /* Not `height: 100%` — the cell has to be as tall as its own text, or the row
+     it is supposed to stretch never learns it needs to grow. */
+  height: auto;
+  align-self: stretch;
+  padding-block: 4px;
+  /* An INTEGER line box, not a ratio. `1.35` against the 13px body font lays
+     out at 17.55px, so every wrapped row landed on a fractional boundary and
+     its 1px border rendered a pixel thick on some rows and two on others.
+     A token now, because a theme moves the body font under it — 18px is right
+     for 13px text and cramped for Material's 14px. */
+  line-height: var(--dg-wrap-line-height);
+}
+.kanuni-datagrid-cell--number {
+  justify-content: flex-end;
+  font-variant-numeric: tabular-nums;
+}
+.kanuni-datagrid-cell--center {
+  justify-content: center;
+}
+/* ── Pinned columns = sticky cells inside the same row (§7.4) ──────────
+   Compositor-friendly and layout-free; structurally immune to the
+   header/body desync bug class of a dual-table design. */
+.kanuni-datagrid-cell--pinned,
+.kanuni-datagrid-header-cell--pinned {
+  position: sticky;
+  z-index: 2;
+  background: inherit;
+}
+/* HARDENING: a pinned cell is sticky, whatever else it becomes.
+   State classes keep anchoring their markers with `position: relative` —
+   the dirty corner, the range overlay, whatever comes next — and on a pinned
+   cell that override turns `insetInlineStart` from a parking threshold into a
+   literal shift: the cell jumps sideways by its whole inset and parks over its
+   neighbour. It happened twice from two different classes in one day
+   (range-anchor on click, dirty on commit), so the guarantee lives HERE at
+   three-class specificity instead of as a `:not(--pinned)` chased onto every
+   state rule. Sticky is itself a positioned ancestor, so those markers lose
+   nothing. */
+.kanuni-datagrid-root .kanuni-datagrid-cell.kanuni-datagrid-cell--pinned {
+  position: sticky;
+}
+/* A STICKY column sits in the scrolling order and parks itself only once it
+   would leave the viewport. It needs a lower z-index than a truly pinned
+   column: when the two meet, the pinned one is the fixed landmark and has to
+   win, or the sticky column would slide over the top of it. */
+.kanuni-datagrid-cell--sticky {
+  z-index: 1;
+}
+.kanuni-datagrid-header-cell--pinned {
+  z-index: 4;
+  background: var(--dg-header-bg);
+}
+.kanuni-datagrid-cell--pinned-left:last-of-type,
+.kanuni-datagrid-header-cell--pinned-left:last-of-type {
+  box-shadow: var(--dg-shadow-pinned);
+}
+.kanuni-datagrid-pin-edge-left {
+  box-shadow: var(--dg-shadow-pinned);
+}
+.kanuni-datagrid-pin-edge-right {
+  box-shadow: var(--dg-shadow-pinned-right);
+}
+/* Spacer that reserves the width of columns outside the horizontal window. */
+.kanuni-datagrid-spacer {
+  flex: none;
+  height: 100%;
+}
+/* ── Toolbar ──────────────────────────────────────────────── */
+.kanuni-datagrid-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: none;
+  padding: var(--dg-chrome-padding-y) 8px;
+  background: var(--dg-surface);
+  border-bottom: 1px solid var(--dg-border);
+  font-size: var(--dg-chrome-font-size);
+}
+.kanuni-datagrid-toolbar-spacer {
+  flex: 1 1 auto;
+}
+.kanuni-datagrid-toolbar-search {
+  width: min(260px, 40%);
+  height: var(--dg-control-height);
+  padding: 0 8px;
+  border: 1px solid var(--dg-border-strong);
+  border-radius: var(--dg-radius-control);
+  background: var(--dg-surface);
+  color: var(--dg-text);
+  font: inherit;
+  font-size: var(--dg-control-font-size);
+}
+.kanuni-datagrid-toolbar-search:focus {
+  outline: none;
+  border-color: var(--dg-primary);
+}
+.kanuni-datagrid-toolbar > button {
+  padding: 3px 10px;
+  border: 1px solid var(--dg-border-strong);
+  border-radius: var(--dg-radius-control);
+  background: var(--dg-surface);
+  color: inherit;
+  font: inherit;
+  font-size: var(--dg-control-font-size);
+  cursor: pointer;
+}
+.kanuni-datagrid-toolbar > button:hover:not(:disabled) {
+  background: var(--dg-surface-hover);
+}
+.kanuni-datagrid-toolbar > button:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+.kanuni-datagrid-toolbar-error {
+  color: var(--dg-danger-text);
+  font-size: 11px;
+}
+/*
+ * The same message, but floating where a context menu just was — the cell
+ * menu's Export entries have nowhere else to report a missing optional peer.
+ * Sized and boxed like a menu so it reads as coming from one; it is a BUTTON
+ * because clicking it dismisses it, and a click target has to be one.
+ */
+.kanuni-datagrid-menu-error {
+  position: fixed;
+  /* Same layer as the context menu it replaces — see the rule further down. */
+  z-index: 1200;
+  max-width: 320px;
+  padding: 8px 10px;
+  text-align: left;
+  background: var(--dg-surface);
+  border: 1px solid var(--dg-danger-text);
+  border-radius: var(--dg-radius);
+  box-shadow: var(--dg-shadow-menu);
+  font-size: var(--dg-font-size);
+  cursor: pointer;
+}
+.kanuni-datagrid-column-chooser .kanuni-datagrid-filter-item {
+  cursor: pointer;
+}
+/* ── Pager ────────────────────────────────────────────────── */
+.kanuni-datagrid-pager {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12px;
+  flex: none;
+  padding: 5px 8px;
+  background: var(--dg-surface);
+  border-top: 1px solid var(--dg-border);
+  font-size: var(--dg-chrome-font-size);
+}
+.kanuni-datagrid-pager-size {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--dg-text-muted);
+}
+.kanuni-datagrid-pager-size select {
+  padding: 2px 4px;
+  border: 1px solid var(--dg-border-strong);
+  border-radius: var(--dg-radius-control);
+  background: var(--dg-surface);
+  color: var(--dg-text);
+  font: inherit;
+  font-size: var(--dg-control-font-size);
+}
+.kanuni-datagrid-pager-range {
+  color: var(--dg-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+.kanuni-datagrid-pager-buttons {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: auto;
+}
+.kanuni-datagrid-pager-buttons button {
+  min-width: 26px;
+  height: calc(var(--dg-control-height) - 2px);
+  border: 1px solid var(--dg-border-strong);
+  border-radius: var(--dg-radius-control);
+  background: var(--dg-surface);
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+.kanuni-datagrid-pager-buttons button:hover:not(:disabled) {
+  background: var(--dg-surface-hover);
+}
+.kanuni-datagrid-pager-buttons button:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+.kanuni-datagrid-pager-current {
+  padding: 0 6px;
+  font-variant-numeric: tabular-nums;
+}
+/* ── Group panel ──────────────────────────────────────────── */
+.kanuni-datagrid-group-panel {
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 8px;
+  flex: none;
+  padding: var(--dg-chrome-padding-y) 8px;
+  background: var(--dg-surface-header);
+  border-bottom: 1px solid var(--dg-border);
+  font-size: var(--dg-chrome-font-size);
+}
+/* ── Cascading levels ──────────────────────────────────────
+   One row per level, each indented past the one above and joined to it by an
+   elbow. Grouping is a hierarchy; a flat row of chips said nothing about which
+   column was the OUTER level, which is the only thing the order encodes. */
+.kanuni-datagrid-group-levels {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.kanuni-datagrid-group-level {
+  position: relative;
+  display: flex;
+  align-items: center;
+  /* --dg-group-level is set per chip from its index. */
+  padding-inline-start: calc(var(--dg-group-level, 0) * 18px);
+}
+/* The elbow: down from the parent chip, then right into this one. */
+.kanuni-datagrid-group-level:not(:first-child)::before {
+  content: '';
+  position: absolute;
+  inset-inline-start: calc((var(--dg-group-level, 1) - 1) * 18px + 9px);
+  top: -3px;
+  bottom: 50%;
+  width: 9px;
+  border-inline-start: 1px solid var(--dg-border-strong);
+  border-block-end: 1px solid var(--dg-border-strong);
+  border-end-start-radius: 4px;
+  pointer-events: none;
+}
+/* Drop indicator while a level is dragged over another. */
+.kanuni-datagrid-group-level--drop-before::after,
+.kanuni-datagrid-group-level--drop-after::after {
+  content: '';
+  position: absolute;
+  inset-inline: calc(var(--dg-group-level, 0) * 18px) 0;
+  height: 2px;
+  border-radius: 1px;
+  background: var(--dg-primary);
+  pointer-events: none;
+}
+.kanuni-datagrid-group-level--drop-before::after {
+  top: -2px;
+}
+.kanuni-datagrid-group-level--drop-after::after {
+  bottom: -2px;
+}
+.kanuni-datagrid-group-panel-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-inline-start: auto;
+}
+.kanuni-datagrid-group-panel--over {
+  background: var(--dg-primary-soft);
+  outline: 2px dashed var(--dg-primary);
+  outline-offset: -3px;
+}
+.kanuni-datagrid-group-panel-hint {
+  color: var(--dg-text-muted);
+}
+.kanuni-datagrid-group-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 6px 2px 10px;
+  border-radius: 999px;
+  background: var(--dg-primary);
+  color: var(--dg-on-primary);
+  font-weight: 600;
+  white-space: nowrap;
+}
+.kanuni-datagrid-group-chip[draggable='true'] {
+  cursor: grab;
+}
+.kanuni-datagrid-group-chip:focus-visible {
+  outline: 2px solid var(--dg-focus-ring);
+  outline-offset: 2px;
+}
+.kanuni-datagrid-group-chip button {
+  border: none;
+  background: transparent;
+  color: inherit;
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+}
+.kanuni-datagrid-group-panel-actions > button {
+  padding: 2px 8px;
+  border: 1px solid var(--dg-border-strong);
+  border-radius: var(--dg-radius-control);
+  background: var(--dg-surface);
+  color: inherit;
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+.kanuni-datagrid-group-select select {
+  padding: 2px 6px;
+  border: 1px solid var(--dg-border-strong);
+  border-radius: var(--dg-radius-control);
+  background: var(--dg-surface);
+  color: inherit;
+  font: inherit;
+  font-size: 12px;
+}
+/* ── Group rows ───────────────────────────────────────────── */
+.kanuni-datagrid-group-row {
+  background: var(--dg-group-bg);
+  cursor: pointer;
+  font-weight: 600;
+}
+.kanuni-datagrid-group-row:hover {
+  background: var(--dg-surface-hover);
+}
+.kanuni-datagrid-group-cell {
+  /* Sticky so the label stays readable while scrolling horizontally. */
+  position: sticky;
+  inset-inline-start: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 100%;
+  padding: 0 var(--dg-cell-padding-x);
+  white-space: nowrap;
+}
+.kanuni-datagrid-group-twisty {
+  display: inline-block;
+  width: 12px;
+  color: var(--dg-text-muted);
+}
+.kanuni-datagrid-group-caption {
+  color: var(--dg-text-muted);
+  font-weight: 400;
+}
+.kanuni-datagrid-group-count {
+  color: var(--dg-text-muted);
+  font-weight: 400;
+}
+/* Nested levels step back toward the body colour so depth reads at a glance
+   without needing to count the indent. */
+.kanuni-datagrid-group-row--level-1 {
+  background: color-mix(in srgb, var(--dg-surface-header) 60%, var(--dg-surface));
+}
+.kanuni-datagrid-group-row--level-2 {
+  background: color-mix(in srgb, var(--dg-surface-header) 35%, var(--dg-surface));
+}
+.kanuni-datagrid-group-row--level-3 {
+  background: color-mix(in srgb, var(--dg-surface-header) 18%, var(--dg-surface));
+}
+/* Aggregates trail the label; they must not push the count off-screen, so the
+   whole strip stays on one line and simply clips at the viewport edge. */
+.kanuni-datagrid-group-aggregate {
+  margin-left: 12px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+.kanuni-datagrid-group-aggregate-label {
+  color: var(--dg-text-muted);
+  font-weight: 400;
+}
+.kanuni-datagrid-group-chip-level {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 15px;
+  height: 15px;
+  border-radius: 999px;
+  /* A wash of the chip's own FOREGROUND, not a fixed white: on a gold chip the
+     text is near-black, and a white pip on it disappeared. */
+  background: color-mix(in srgb, var(--dg-on-primary) 25%, transparent);
+  font-size: 10px;
+  font-weight: 700;
+}
+.kanuni-datagrid-group-chip button[disabled] {
+  opacity: 0.4;
+  cursor: default;
+}
+.kanuni-datagrid-group-row--focused {
+  outline: 2px solid var(--dg-focus-ring);
+  outline-offset: -2px;
+}
+/* ── Master-detail ────────────────────────────────────────── */
+.kanuni-datagrid-detail-toggle-cell {
+  padding: 0;
+}
+.kanuni-datagrid-detail-toggle {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background: transparent;
+  color: var(--dg-text-muted);
+  font-size: 11px;
+  line-height: 1;
+  cursor: pointer;
+}
+.kanuni-datagrid-detail-toggle:hover {
+  color: var(--dg-text);
+}
+/* The panel is sized in whole rows by the component (span x rowHeight); this
+   rule only styles it. Overriding the height here would desync it from the
+   filler slots the virtualizer reserved. */
+.kanuni-datagrid-detail-row {
+  background: var(--dg-surface);
+  border-bottom: 1px solid var(--dg-border);
+}
+.kanuni-datagrid-detail-cell {
+  position: sticky;
+  inset-inline-start: 0;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 8px 12px;
+  overflow: auto;
+  border-inline-start: 3px solid var(--dg-primary);
+}
+/* ── In-grid edit form (mode: 'form') ─────────────────────── */
+/* Sticky to the scroller's inline start so the form stays put while the
+   columns scroll under it — a form that slides off to the left with column 40
+   is a form the user has to chase. Width is the VIEWPORT's, not the canvas's,
+   for the same reason. */
+.kanuni-datagrid-editform-row {
+  background: var(--dg-surface);
+  border-bottom: 1px solid var(--dg-border);
+}
+.kanuni-datagrid-editform-cell {
+  position: sticky;
+  inset-inline-start: 0;
+  box-sizing: border-box;
+  /* The VIEWPORT's width, not the row's — see `--dg-viewport-width`. Falls
+     back to the row when nothing has measured yet (SSR, first paint). */
+  width: var(--dg-viewport-width, 100%);
+  height: 100%;
+  padding: 0;
+  border-inline-start: 3px solid var(--dg-primary);
+}
+/* ── Summary bar ──────────────────────────────────────────── */
+.kanuni-datagrid-summary-bar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 16px;
+  flex: none;
+  padding: 5px 8px;
+  background: var(--dg-footer-bg);
+  border-top: var(--dg-header-border);
+  font-size: var(--dg-chrome-font-size);
+}
+.kanuni-datagrid-summary-item {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 4px;
+}
+.kanuni-datagrid-summary-label {
+  color: var(--dg-text-muted);
+}
+/* ── Selection ────────────────────────────────────────────── */
+.kanuni-datagrid-row--selected,
+.kanuni-datagrid-row--selected .kanuni-datagrid-cell--pinned {
+  background: var(--dg-selected-bg);
+}
+.kanuni-datagrid-row--selected:hover,
+.kanuni-datagrid-row--selected:hover .kanuni-datagrid-cell--pinned {
+  background: var(--dg-selected-bg);
+  filter: brightness(0.97);
+}
+.kanuni-datagrid-select-cell {
+  justify-content: center;
+  padding: 0;
+}
+.kanuni-datagrid-select-cell input {
+  accent-color: var(--dg-primary);
+  cursor: pointer;
+}
+/* ── Row numbers (gap analysis P3.5) ───────────────────────── */
+/* Muted and tabular on purpose. The number is an address, not data: at full
+   text weight it competes with the first real column, and proportional digits
+   make a column of numbers ragged down its right edge. */
+.kanuni-datagrid-rownum-cell {
+  color: var(--dg-text-muted);
+  font-variant-numeric: tabular-nums;
+  background: var(--dg-header-bg);
+  user-select: none;
+}
+.kanuni-datagrid-row--selected .kanuni-datagrid-rownum-cell {
+  background: var(--dg-selected-bg);
+}
+/* ── Keyboard focus ───────────────────────────────────────── */
+/* Focus is virtual (aria-activedescendant), so it must be drawn explicitly —
+   there is no browser focus ring on the cell itself. `inset` keeps the outline
+   from being clipped by the neighbouring cell. */
+.kanuni-datagrid-cell--focused {
+  outline: 2px solid var(--dg-focus-ring);
+  outline-offset: -2px;
+}
+.kanuni-datagrid-scroller:focus {
+  outline: none;
+}
+.kanuni-datagrid-scroller:focus-visible {
+  outline: 2px solid var(--dg-focus-ring);
+  outline-offset: -2px;
+}
+/* Visually hidden but still read aloud. */
+.kanuni-datagrid-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+/* ── Header filter button ──────────────────────────────────
+   Hidden until the header is hovered or focused (`filterIconMode: 'hover'`,
+   the default). `visibility` rather than `display` so the icon does not push
+   the label around when it appears — the space is reserved either way. */
+.kanuni-datagrid-filter-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  margin-inline-start: auto;
+  padding: 1px 3px;
+  border: none;
+  border-radius: 3px;
+  background: transparent;
+  /* Lives INSIDE the header cell, so it follows the header's foreground: on an
+     ink header the body's muted slate is barely visible. */
+  color: var(--dg-header-text-muted);
+  line-height: 0;
+  cursor: pointer;
+  visibility: hidden;
+}
+.kanuni-datagrid-header-cell:hover > .kanuni-datagrid-filter-button,
+.kanuni-datagrid-header-cell:focus-within > .kanuni-datagrid-filter-button,
+.kanuni-datagrid-filter-button--pinned,
+/* An ACTIVE filter is the only sign that rows are being withheld, so it stays
+   visible in both modes — hiding it would make the grid look simply empty. */
+.kanuni-datagrid-filter-button--active {
+  visibility: visible;
+}
+.kanuni-datagrid-filter-button:hover {
+  background: var(--dg-primary-soft);
+  color: var(--dg-text);
+  /* `--dg-primary-soft` is a LIGHT tint in every light theme, so the label on
+     it is the body text, not the header's — this is the one spot in the header
+     that deliberately does not follow `--dg-header-text`. */
+}
+.kanuni-datagrid-filter-button--active {
+  color: var(--dg-primary);
+  background: var(--dg-primary-soft);
+}
+/* ── Column reorder (drag & drop) ──────────────────────────
+   The indicator is an inset shadow, not a border: a border would change the
+   cell's box and shift every column to its right by a pixel mid-drag. */
+.kanuni-datagrid-header-cell--drop-before {
+  box-shadow: inset 3px 0 0 -1px var(--dg-primary);
+}
+.kanuni-datagrid-header-cell--drop-after {
+  box-shadow: inset -3px 0 0 -1px var(--dg-primary);
+}
+[dir='rtl'] .kanuni-datagrid-header-cell--drop-before {
+  box-shadow: inset -3px 0 0 -1px var(--dg-primary);
+}
+[dir='rtl'] .kanuni-datagrid-header-cell--drop-after {
+  box-shadow: inset 3px 0 0 -1px var(--dg-primary);
+}
+/* ── Column resize handle ─────────────────────────────────── */
+.kanuni-datagrid-resize-handle {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: -3px;
+  width: 7px;
+  z-index: 5;
+  cursor: col-resize;
+  /* Invisible by default; the line under the cursor is what marks the seam. */
+  background: transparent;
+  touch-action: none;
+}
+.kanuni-datagrid-resize-handle:hover::after,
+.kanuni-datagrid-header-cell--resizing .kanuni-datagrid-resize-handle::after {
+  content: '';
+  position: absolute;
+  inset-block: 4px;
+  inset-inline-start: 3px;
+  width: 2px;
+  border-radius: 1px;
+  background: var(--dg-primary);
+}
+/* ── Loading overlay (busy + percentage) ──────────────────── */
+.kanuni-datagrid-loading-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in srgb, var(--dg-bg) 62%, transparent);
+  /* Pointer-transparent: a recompute triggered by typing must not swallow the
+     next keystroke aimed at the filter box. */
+  pointer-events: none;
+}
+/* Exporting is the one phase that takes the grid away, so it looks like it.
+   The sheet is nearly opaque instead of a hint, it swallows clicks instead of
+   letting them fall through to a grid that cannot answer them, and the cursor
+   says wait. See the comment on `data-blocking` in GridLoadingOverlay.tsx. */
+.kanuni-datagrid-loading-overlay[data-blocking='true'] {
+  background: color-mix(in srgb, var(--dg-bg) 92%, transparent);
+  pointer-events: auto;
+  cursor: progress;
+}
+.kanuni-datagrid-loading-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 18px 24px;
+  border: 1px solid var(--dg-border);
+  border-radius: calc(var(--dg-radius) + 4px);
+  background: var(--dg-surface);
+  box-shadow: var(--dg-shadow-card);
+  color: var(--dg-text);
+  font-size: var(--dg-chrome-font-size);
+}
+.kanuni-datagrid-loading-spinner {
+  width: 26px;
+  height: 26px;
+  border: 2px solid transparent;
+  border-bottom-color: var(--dg-primary);
+  border-radius: 50%;
+  animation: kanuni-datagrid-spin 1s linear infinite;
+}
+.kanuni-datagrid-loading-label {
+  font-weight: 500;
+  color: var(--dg-text-muted);
+}
+.kanuni-datagrid-loading-progress {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  width: 220px;
+}
+.kanuni-datagrid-loading-track {
+  width: 100%;
+  height: 6px;
+  border-radius: 999px;
+  overflow: hidden;
+  background: color-mix(in srgb, var(--dg-border) 70%, transparent);
+}
+.kanuni-datagrid-loading-fill {
+  height: 100%;
+  border-radius: 999px;
+  background: var(--dg-primary);
+  transition: width 160ms ease-out;
+}
+.kanuni-datagrid-loading-percent {
+  font-size: 11px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+/* ── Filter panel (cxGrid) ────────────────────────────────────
+   Under the footer, outside the scroller: the conditions describe the whole
+   result, so they must not scroll away with the rows. */
+.kanuni-datagrid-filter-panel {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: none;
+  padding: 4px 8px;
+  background: var(--dg-surface-header);
+  border-top: 1px solid var(--dg-border);
+  font-size: var(--dg-chrome-font-size);
+  color: var(--dg-text);
+}
+/* Suspended: the conditions are still there, just not being applied. Dimmed
+   rather than hidden — there has to be something to switch back on. */
+.kanuni-datagrid-filter-panel--suspended .kanuni-datagrid-filter-panel-text {
+  opacity: 0.5;
+  text-decoration: line-through;
+}
+.kanuni-datagrid-filter-panel-clear,
+.kanuni-datagrid-filter-panel-builder {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: var(--dg-radius-control);
+  background: transparent;
+  color: var(--dg-text-muted);
+  font: inherit;
+  line-height: 1;
+  cursor: pointer;
+}
+.kanuni-datagrid-filter-panel-clear:hover:not(:disabled),
+.kanuni-datagrid-filter-panel-builder:hover:not(:disabled) {
+  background: var(--dg-surface-hover);
+  border-color: var(--dg-border-strong);
+  color: var(--dg-text);
+}
+.kanuni-datagrid-filter-panel-clear:disabled,
+.kanuni-datagrid-filter-panel-builder:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+.kanuni-datagrid-filter-panel-toggle {
+  flex: none;
+  margin: 0;
+  accent-color: var(--dg-primary);
+  cursor: pointer;
+}
+.kanuni-datagrid-filter-panel-text {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.kanuni-datagrid-filter-panel-builder {
+  margin-inline-start: auto;
+}
+/* Shown only for phases that can actually stop — see CANCELLABLE in the overlay. */
+.kanuni-datagrid-loading-cancel {
+  margin-top: 8px;
+  padding: 3px 12px;
+  border: 1px solid var(--dg-border);
+  border-radius: var(--dg-radius);
+  background: var(--dg-surface);
+  color: inherit;
+  font: inherit;
+  font-size: 11px;
+  cursor: pointer;
+}
+.kanuni-datagrid-loading-cancel:hover {
+  background: var(--dg-surface-hover);
+}
+@media (prefers-reduced-motion: reduce) {
+  .kanuni-datagrid-loading-spinner {
+    animation-duration: 3s;
+  }
+  .kanuni-datagrid-loading-fill {
+    transition: none;
+  }
+}
+/* ── Filter row (under the header, same sticky geometry) ──── */
+.kanuni-datagrid-filter-row {
+  position: sticky;
+  /* Clears the BANDS as well as the header. `--dg-band-offset` is published by
+     the component (0 when there are no bands); the header height stays a
+     variable here so density keeps working. Sticking at the header height alone
+     parked this row inside the header on any banded grid, and the two drew over
+     each other as soon as the user scrolled. */
+  top: calc(var(--dg-band-offset, 0px) + var(--dg-header-height));
+  z-index: 3;
+  display: flex;
+  height: var(--dg-header-height);
+  background: var(--dg-surface-header);
+  border-bottom: var(--dg-header-border);
+}
+.kanuni-datagrid-filter-cell {
+  display: flex;
+  align-items: center;
+  flex: none;
+  height: 100%;
+  padding: 0 4px;
+  background: var(--dg-surface-header);
+  border-inline-end: var(--dg-header-cell-border);
+  overflow: hidden;
+}
+.kanuni-datagrid-filter-cell--pinned {
+  position: sticky;
+  z-index: 4;
+  background: var(--dg-surface-header);
+}
+.kanuni-datagrid-filter-input {
+  width: 100%;
+  min-width: 0;
+  height: var(--dg-filter-input-height);
+  padding: 0 6px;
+  border: 1px solid var(--dg-border-strong);
+  border-radius: var(--dg-radius-control);
+  background: var(--dg-surface);
+  color: var(--dg-text);
+  font: inherit;
+  font-size: var(--dg-control-font-size);
+}
+.kanuni-datagrid-filter-input:focus {
+  outline: none;
+  border-color: var(--dg-primary);
+}
+/* ── Header filter popup (portaled — see GridPortal) ──────── */
+.kanuni-datagrid-portal {
+  /* The portal host must not paint or capture anything itself. */
+  position: static;
+  border: none;
+  background: transparent;
+  overflow: visible;
+}
+/* ── Band fold toggle (P2.6) ──────────────────────────────── */
+.kanuni-datagrid-band-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 16px;
+  height: 16px;
+  margin-inline-end: 4px;
+  padding: 0;
+  border: none;
+  border-radius: 3px;
+  background: transparent;
+  color: var(--dg-text-muted);
+  font-size: 10px;
+  line-height: 1;
+  cursor: pointer;
+}
+.kanuni-datagrid-band-toggle:hover {
+  background: var(--dg-primary-soft);
+  color: var(--dg-text);
+}
+.kanuni-datagrid-band-toggle:focus-visible {
+  outline: 2px solid var(--dg-focus-ring);
+  outline-offset: -1px;
+}
+/* ── Search highlight (P2.4) ──────────────────────────────── */
+/* A <mark>, so the match is in the accessibility tree as emphasis rather than
+   as a colour only. The browser default is a hard yellow that fights every
+   theme; these follow the accent instead. */
+.kanuni-datagrid-highlight {
+  padding: 0;
+  border-radius: 2px;
+  background: var(--dg-highlight-bg);
+  color: var(--dg-highlight-text);
+  font-weight: 600;
+}
+/* ── Cell / header tooltip (P2.1) ─────────────────────────── */
+.kanuni-datagrid-tooltip {
+  position: fixed;
+  /* Above every popup: a tooltip describes whatever is under the pointer, and
+     the pointer can be over a popup. */
+  z-index: 1100;
+  /* The tooltip must never be the hover target — it appears UNDER the pointer's
+     path, and taking the pointer would fire mouseout on the cell that asked for
+     it, hiding the tooltip, which un-hovers it, which shows it again. */
+  pointer-events: none;
+  max-width: 420px;
+  padding: 4px 8px;
+  border: 1px solid var(--dg-border-strong);
+  border-radius: var(--dg-radius);
+  background: var(--dg-surface);
+  color: var(--dg-text);
+  box-shadow: var(--dg-shadow-popup);
+  font-size: var(--dg-font-size);
+  line-height: 1.45;
+  /* Long values wrap instead of running off-screen; a pasted paragraph in a
+     cell is exactly the case the tooltip exists for. */
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.kanuni-datagrid-filter-popup {
+  position: fixed;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 260px;
+  max-height: 340px;
+  padding: 8px;
+  border: 1px solid var(--dg-border-strong);
+  border-radius: var(--dg-radius);
+  /* Explicit background: a transparent popup was the PivotGrid drill-down bug. */
+  background: var(--dg-surface);
+  color: var(--dg-text);
+  box-shadow: var(--dg-shadow-popup);
+  font-size: var(--dg-font-size);
+}
+.kanuni-datagrid-filter-search {
+  width: 100%;
+  height: var(--dg-control-height);
+  padding: 0 8px;
+  border: 1px solid var(--dg-border-strong);
+  border-radius: var(--dg-radius-control);
+  background: var(--dg-surface);
+  color: var(--dg-text);
+  font: inherit;
+  font-size: var(--dg-control-font-size);
+}
+/* "There are more values than these." Sits directly under the search box
+   because the search box is the answer to it — on a capped list, search scans
+   the whole dataset rather than the values already on screen. */
+.kanuni-datagrid-filter-truncated {
+  margin: 6px 0 0;
+  font-size: 11px;
+  line-height: 1.4;
+  color: var(--dg-text-muted);
+}
+.kanuni-datagrid-filter-actions {
+  display: flex;
+  gap: 6px;
+}
+.kanuni-datagrid-filter-actions button,
+.kanuni-datagrid-filter-footer button {
+  padding: 3px 8px;
+  border: 1px solid var(--dg-border-strong);
+  border-radius: var(--dg-radius-control);
+  background: var(--dg-surface);
+  color: var(--dg-text);
+  font: inherit;
+  font-size: var(--dg-control-font-size);
+  cursor: pointer;
+}
+.kanuni-datagrid-filter-actions button:hover,
+.kanuni-datagrid-filter-footer button:hover {
+  background: var(--dg-surface-hover);
+}
+.kanuni-datagrid-filter-primary {
+  background: var(--dg-primary) !important;
+  border-color: var(--dg-primary) !important;
+  color: var(--dg-on-primary) !important;
+}
+.kanuni-datagrid-filter-list {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  /* Windowed list — scroll anchoring off for the same reason as the main
+     scroller: rows repositioning during scroll read as content shifts and the
+     browser fights the gesture. See `.kanuni-datagrid-scroller`. */
+  overflow-anchor: none;
+  /* Stop the wheel from CHAINING into the grid once the list hits its end.
+     Without this, wheeling to the bottom of the list keeps going and scrolls
+     the rows underneath — which moves the anchor and closes the popup, in the
+     middle of a gesture the user meant for the list. */
+  overscroll-behavior: contain;
+  border: 1px solid var(--dg-border);
+  border-radius: var(--dg-radius-control);
+}
+.kanuni-datagrid-filter-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 6px;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* FIXED, and the virtualizer depends on it: the list renders only the rows in
+     view and positions them by `index x FILTER_ITEM_HEIGHT`. A label that
+     wrapped to two lines would put every row below it out of place. Single-line
+     is already enforced by `white-space: nowrap` above; this makes the height
+     the popup computes with a fact rather than an assumption.
+     Keep in sync with FILTER_ITEM_HEIGHT in GridHeaderFilterPopup.tsx. */
+  height: 25px;
+  box-sizing: border-box;
+  flex: none;
+}
+.kanuni-datagrid-filter-item:hover,
+.kanuni-datagrid-filter-item--active {
+  background: var(--dg-surface-hover);
+}
+.kanuni-datagrid-filter-item input {
+  flex: none;
+  accent-color: var(--dg-primary);
+}
+.kanuni-datagrid-filter-empty {
+  padding: 10px;
+  color: var(--dg-text-muted);
+  text-align: center;
+}
+.kanuni-datagrid-filter-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 6px;
+}
+/* ── Empty state ──────────────────────────────────────────── */
+.kanuni-datagrid-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32px 16px;
+  color: var(--dg-text-muted);
+  font-size: var(--dg-font-size);
+}
+/* ── Accessibility ────────────────────────────────────────── */
+.kanuni-datagrid-root :focus-visible {
+  outline: 2px solid var(--dg-focus-ring);
+  outline-offset: -2px;
+}
+@media (prefers-reduced-motion: reduce) {
+  .kanuni-datagrid-viewport {
+    will-change: auto;
+  }
+}
+/* ── Remote loading rows (P10) ────────────────────────────── */
+/* A row that exists on the server but has not arrived. It keeps its slot so
+   the scrollbar and every row index stay exact while the block is in flight. */
+.kanuni-datagrid-row--loading {
+  align-items: center;
+}
+.kanuni-datagrid-loading-cell {
+  position: sticky;
+  inset-inline-start: 0;
+  flex: 1;
+  border-inline-end: none;
+}
+.kanuni-datagrid-loading-bar {
+  display: block;
+  width: 40%;
+  max-width: 240px;
+  height: 8px;
+  border-radius: 4px;
+  background: var(--dg-surface-hover);
+  animation: kanuni-datagrid-pulse 1.2s ease-in-out infinite;
+}
+@keyframes kanuni-datagrid-pulse {
+  0%,
+  100% {
+    opacity: 0.45;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+/* Respect a reduced-motion preference: the pulse is decoration, and a user who
+   asked for stillness should get a static placeholder. */
+@media (prefers-reduced-motion: reduce) {
+  .kanuni-datagrid-loading-bar {
+    animation: none;
+  }
+}
+/* ── RTL ──────────────────────────────────────────────────────
+   Insets are logical (inset-inline-*), so sticky columns flip on their own.
+   What does NOT flip automatically is a directional SHADOW: the edge shadow
+   that separates a left-pinned block from the scrolling body has to fall on
+   the other side when the writing direction reverses. */
+.kanuni-datagrid-root[dir='rtl'] .kanuni-datagrid-pin-edge-left,
+[dir='rtl'] .kanuni-datagrid-root .kanuni-datagrid-pin-edge-left {
+  box-shadow: var(--dg-shadow-pinned-right);
+}
+.kanuni-datagrid-root[dir='rtl'] .kanuni-datagrid-pin-edge-right,
+[dir='rtl'] .kanuni-datagrid-root .kanuni-datagrid-pin-edge-right {
+  box-shadow: var(--dg-shadow-pinned);
+}
+/* The sort caret and the resize handle are positioned, not flowed. */
+.kanuni-datagrid-root[dir='rtl'] .kanuni-datagrid-resize-handle,
+[dir='rtl'] .kanuni-datagrid-root .kanuni-datagrid-resize-handle {
+  right: auto;
+  left: 0;
+}
+/* ── Density presets ──────────────────────────────────────────
+   The ROW HEIGHT is not set here: it is a core value (the virtualizer runs on
+   it), so the component resolves the preset into `rowHeight` and core feeds it
+   back as --dg-row-height. What lives here is everything CSS owns — header
+   height, padding and type scale — so the two can never disagree about the
+   row geometry. */
+.kanuni-datagrid-root.kanuni-datagrid-density-compact {
+  --dg-header-height: 28px;
+  --dg-cell-padding-x: 6px;
+  --dg-font-size: 12px;
+  --dg-header-font-size: 11px;
+}
+.kanuni-datagrid-root.kanuni-datagrid-density-comfortable {
+  --dg-header-height: 40px;
+  --dg-cell-padding-x: 12px;
+  --dg-font-size: 14px;
+  --dg-header-font-size: 13px;
+}
+/* ── Row context menu ─────────────────────────────────────── */
+.kanuni-datagrid-context-menu {
+  position: fixed;
+  z-index: 1200;
+  min-width: 180px;
+  max-width: 320px;
+  /*
+   * A menu longer than the screen scrolls instead of running off it: the
+   * clamp in `GridContextMenu` can only move a menu that FITS, and an app row
+   * menu with a dozen entries plus the built-ins does not.
+   *
+   * This is safe only because the SUBMENU is portaled as a sibling. While it
+   * was a child, any overflow value other than `visible` clipped it away
+   * entirely — which is why this rule was removed once before.
+   */
+  max-height: calc(100vh - 16px);
+  overflow-y: auto;
+  padding: 4px;
+  border: 1px solid var(--dg-border-strong);
+  border-radius: var(--dg-radius);
+  background: var(--dg-surface);
+  color: var(--dg-text);
+  box-shadow: var(--dg-shadow-menu);
+  font-size: var(--dg-font-size);
+}
+.kanuni-datagrid-context-menu:focus {
+  outline: none;
+}
+.kanuni-datagrid-menu-row {
+  position: relative;
+}
+.kanuni-datagrid-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 5px 8px;
+  border: none;
+  border-radius: var(--dg-radius-control);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+/* Hover and keyboard highlight share one class so the two navigation modes
+   look identical — a menu where the arrow keys highlight differently from the
+   mouse reads as two different menus. */
+.kanuni-datagrid-menu-item:hover:not(:disabled),
+.kanuni-datagrid-menu-item--active:not(:disabled) {
+  background: var(--dg-surface-hover);
+}
+.kanuni-datagrid-menu-item:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+.kanuni-datagrid-menu-icon {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  width: 16px;
+}
+.kanuni-datagrid-menu-label {
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.kanuni-datagrid-menu-shortcut {
+  flex: none;
+  color: var(--dg-text-muted);
+  font-size: 11px;
+}
+.kanuni-datagrid-menu-caret {
+  flex: none;
+  color: var(--dg-text-muted);
+}
+.kanuni-datagrid-menu-separator {
+  height: 1px;
+  margin: 4px 6px;
+  background: var(--dg-border);
+}
+/* Submenus open toward the inline end, so they flip in RTL for free. */
+/*
+ * Positioned in VIEWPORT coordinates by `GridContextMenu`, because it is a
+ * sibling of the menu rather than a child — see the comment there. It inherits
+ * the menu's box from the shared class; only the positioning differs.
+ */
+.kanuni-datagrid-submenu {
+  position: fixed;
+}
+/* ── Toolbar icon button + export menu ────────────────────── */
+.kanuni-datagrid-toolbar-icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 24px;
+  padding: 0;
+}
+/* Spinner shown in place of the icon while an export runs, so the button does
+   not change size and the toolbar does not reflow mid-export. */
+.kanuni-datagrid-toolbar-busy {
+  width: 12px;
+  height: 12px;
+  border: 2px solid var(--dg-border-strong);
+  border-top-color: var(--dg-primary);
+  border-radius: 50%;
+  animation: kanuni-datagrid-spin 0.7s linear infinite;
+}
+@keyframes kanuni-datagrid-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .kanuni-datagrid-toolbar-busy {
+    animation: none;
+  }
+}
+/* The export menu reuses the popup shell but is a plain list of actions. */
+.kanuni-datagrid-export-menu {
+  width: 190px;
+  gap: 2px;
+  padding: 4px;
+}
+.kanuni-datagrid-chooser-empty {
+  padding: 8px 4px;
+  color: var(--dg-text-muted);
+  font-style: italic;
+}
+/* ── Column-aligned footer row (punch #18) ─────────────────
+   Sticky to the BOTTOM of the same scroller the header sticks to the top of, so
+   it scrolls horizontally with the columns and stays put vertically. */
+/* ── Pinned top/bottom rows (P2.3) ────────────────────────── */
+/* Sticky in the same stack as the header and the footer. `--dg-pinned-gap`
+   counts the header-height rows between this block and its edge (header +
+   filter row above, footer below), so the offset follows the THEME's header
+   height instead of a number measured in JS at the previous theme's size. */
+.kanuni-datagrid-pinned-rows {
+  position: sticky;
+  /* Above the data rows, below the header — a pinned row must not cover the
+     header when the grid is scrolled to the very top. */
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  background: var(--dg-surface-header);
+}
+.kanuni-datagrid-pinned-rows--top {
+  top: calc(var(--dg-band-offset, 0px) + var(--dg-header-height) * var(--dg-pinned-gap, 1));
+  border-bottom: var(--dg-header-border);
+}
+.kanuni-datagrid-pinned-rows--bottom {
+  bottom: calc(var(--dg-header-height) * var(--dg-pinned-gap, 0));
+  border-top: var(--dg-header-border);
+}
+/* The rows inside keep the grid's cell geometry but not its striping — these
+   are not part of the alternating rhythm of the data. */
+.kanuni-datagrid-pinned-rows .kanuni-datagrid-row,
+.kanuni-datagrid-pinned-rows .kanuni-datagrid-cell {
+  background: var(--dg-surface-header);
+}
+.kanuni-datagrid-footer-row {
+  position: sticky;
+  bottom: 0;
+  z-index: 3;
+  display: flex;
+  height: var(--dg-header-height);
+  background: var(--dg-footer-bg);
+  border-top: var(--dg-header-border);
+}
+/* Totals at the TOP (P2.8) — same row, other edge. The border swaps sides so
+   the rule always separates the totals from the DATA, not from the header. */
+.kanuni-datagrid-footer-row--top {
+  top: calc(var(--dg-band-offset, 0px) + var(--dg-header-height) * var(--dg-pinned-gap, 1));
+  bottom: auto;
+  border-top: none;
+  border-bottom: var(--dg-header-border);
+}
+.kanuni-datagrid-footer-cell {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  flex: none;
+  height: 100%;
+  padding: 0 var(--dg-cell-padding-x);
+  background: var(--dg-footer-bg);
+  border-inline-end: var(--dg-header-cell-border);
+  font-size: var(--dg-header-font-size);
+  white-space: nowrap;
+  overflow: hidden;
+  user-select: none;
+}
+.kanuni-datagrid-footer-cell--number {
+  justify-content: flex-end;
+  font-variant-numeric: tabular-nums;
+}
+.kanuni-datagrid-footer-cell--pinned {
+  position: sticky;
+  /* Above the unpinned footer cells, matching the header's pinned layer. */
+  z-index: 4;
+}
+.kanuni-datagrid-footer-cell:hover {
+  background: var(--dg-surface-hover);
+  cursor: context-menu;
+}
+.kanuni-datagrid-footer-value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 600;
+  color: var(--dg-text);
+}
+/* The affordance in an empty cell: barely there until hovered, so an untouched
+   footer reads as blank rather than as a row of dots. */
+.kanuni-datagrid-footer-hint {
+  margin-inline-start: auto;
+  color: var(--dg-border-strong);
+  opacity: 0;
+}
+.kanuni-datagrid-footer-cell:hover .kanuni-datagrid-footer-hint {
+  opacity: 1;
+}
+/* ── Focused row (gap G6) ──────────────────────────────────
+   Deliberately NOT the selection colour: focus is where the keyboard is,
+   selection is what an action applies to, and a user who cannot tell them
+   apart cannot tell what "delete selected" is about to do. An inset bar on the
+   leading edge reads as "you are here" without competing with the row tint. */
+/* Mixed into the row's OWN colour, never into `transparent`.
+   Pinned cells take `background: inherit`, so a see-through row tint made them
+   see-through too — and a sticky cell you can see through shows the columns
+   sliding along underneath it, which reads as two rows of text printed on top
+   of each other. Both variants below are opaque, and keep the stripe. */
+.kanuni-datagrid-row--focused {
+  background: color-mix(in srgb, var(--dg-primary) 7%, var(--dg-surface));
+  box-shadow: inset 3px 0 0 0 var(--dg-primary);
+}
+.kanuni-datagrid-row--odd.kanuni-datagrid-row--focused {
+  background: color-mix(in srgb, var(--dg-primary) 7%, var(--dg-surface-stripe));
+}
+/* Selected AND focused: the selection tint wins, the bar still marks the row. */
+.kanuni-datagrid-row--focused.kanuni-datagrid-row--selected {
+  box-shadow: inset 3px 0 0 0 var(--dg-primary);
+}
+[dir='rtl'] .kanuni-datagrid-row--focused,
+[dir='rtl'] .kanuni-datagrid-row--focused.kanuni-datagrid-row--selected {
+  box-shadow: inset -3px 0 0 0 var(--dg-primary);
+}
+/* ── Row drag & drop (G7) ─────────────────────────────────── */
+/*
+ * A sticky GRIP overlaid at the row's inline start, not a lead column: a third
+ * lead column would have to be threaded through `leadColumnWidth`, every
+ * sticky offset and every aria-colindex across six components, and those
+ * drifting apart is exactly what desynchronizes header and body.
+ */
+.kanuni-datagrid-row-grip {
+  position: sticky;
+  inset-inline-start: 0;
+  z-index: 5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 0;
+  overflow: visible;
+  color: var(--dg-text-muted, #94a3b8);
+  cursor: grab;
+  opacity: 0;
+  transition: opacity 120ms ease;
+}
+/* Takes no horizontal space (width: 0) so column geometry is untouched; the
+   glyph is painted into the row's own leading padding. */
+.kanuni-datagrid-row-grip > svg {
+  position: absolute;
+  /* Past the row-number column when one is showing (audit finding #4): the
+     glyph used to sit at 1px unconditionally, which put it on top of the
+     digits once P3.5 parked a number column at the inline start — visible at
+     six-digit row counts, where the right-aligned number reaches the cell's
+     left edge. The adapter sets the variable; without it nothing changes. */
+  inset-inline-start: calc(var(--dg-grip-inset, 0px) + 1px);
+}
+.kanuni-datagrid-row:hover .kanuni-datagrid-row-grip {
+  opacity: 1;
+}
+.kanuni-datagrid-row-grip:active {
+  cursor: grabbing;
+}
+/* The drop line. An INSET box-shadow rather than a border: a border would add
+   a pixel to the row and shift every row below it by one as the pointer moves,
+   which reads as the whole grid twitching. */
+.kanuni-datagrid-row--drop-before {
+  box-shadow: inset 0 2px 0 0 var(--dg-primary);
+}
+.kanuni-datagrid-row--drop-after {
+  box-shadow: inset 0 -2px 0 0 var(--dg-primary);
+}
+/* ── Tree data (P1.4) ──────────────────────────────────────
+   Indentation is inline on the cell (depth is data); everything visual lives
+   here so all six themes and dark mode restyle the toggle for free. */
+.kanuni-datagrid-tree-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+}
+.kanuni-datagrid-tree-toggle {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--dg-text-muted, #64748b);
+  font-size: 10px;
+  line-height: 16px;
+  cursor: pointer;
+  border-radius: var(--dg-radius-control, 4px);
+}
+.kanuni-datagrid-tree-toggle:hover {
+  color: var(--dg-text, #0f172a);
+  background: var(--dg-surface-hover, #f1f5f9);
+}
+.kanuni-datagrid-tree-toggle--leaf {
+  cursor: default;
+  pointer-events: none;
+}
+/* Shown only because a descendant matched the filter — visibly the path,
+   not a match. */
+.kanuni-datagrid-tree-cell--ancestor {
+  color: var(--dg-text-muted, #64748b);
+}
+/* ── Cell flash (P1.7) ─────────────────────────────────────
+   The "this number just changed" pulse. Driven by a class the adapter adds
+   and removes; the colour is a token so all six themes and dark mode inherit
+   it, and the animation is what fades — no JS frame loop. */
+.kanuni-datagrid-cell--flash {
+  animation: kanuni-datagrid-flash var(--dg-flash-duration, 700ms) ease-out;
+}
+@keyframes kanuni-datagrid-flash {
+  from {
+    background-color: var(--dg-flash-bg, rgba(3, 105, 161, 0.35));
+  }
+  to {
+    background-color: transparent;
+  }
+}
+/* A flashing grid is exactly the kind of motion that triggers vestibular
+   symptoms. Reduced-motion keeps the SIGNAL — the cell still marks itself —
+   and drops the animation. */
+@media (prefers-reduced-motion: reduce) {
+  .kanuni-datagrid-cell--flash {
+    animation: none;
+    background-color: var(--dg-flash-bg, rgba(3, 105, 161, 0.35));
+  }
+}
+/* ── Print layout (gap analysis P3.4) ──────────────────────────
+   Everything that makes the grid fast on screen is what ruins it on paper. The
+   scroller is a clipped, fixed-height box holding one screenful; the print
+   engine gets exactly that and paginates twenty rows out of a hundred thousand.
+   This class undoes the five things that clip the content, in the order they
+   clip it: the root's own box, the scroll container, the canvas that carries
+   the virtual height, the absolutely-positioned viewport, and the block
+   transform that parks the rendered window at its scroll offset.
+   The class is set by the ADAPTER, not by a bare `@media print`, because the
+   rows themselves have to be re-rendered — CSS cannot un-virtualize a list that
+   does not exist in the DOM. */
+.kanuni-datagrid-print {
+  height: auto !important;
+  max-height: none !important;
+  overflow: visible !important;
+  /* Apps mount the grid as a flex child that fills the page — the shape a
+     screen layout wants. Flex sizing beats `height: auto`, so the box kept the
+     viewport's height and the rows below the fold printed on top of whatever
+     came next. `flex: none` hands the sizing back to the content.
+     A host that constrains the grid from further out still has to release it;
+     the grid can only unclip itself. */
+  flex: none !important;
+}
+.kanuni-datagrid-print .kanuni-datagrid-scroller {
+  height: auto !important;
+  max-height: none !important;
+  overflow: visible !important;
+}
+.kanuni-datagrid-print .kanuni-datagrid-canvas,
+.kanuni-datagrid-print .kanuni-datagrid-rows {
+  /* The virtual extent, in a document that is no longer virtual.
+     `.kanuni-datagrid-rows` is the one that matters and the one that was
+     missed first: it carries the scroll canvas's height inline, and with the
+     viewport put back in flow inside it, that inline height decided how much
+     of the grid reached the page — five hundred rows printed as two hundred
+     pixels of paper. The canvas is here for the same reason one level up. */
+  height: auto !important;
+}
+.kanuni-datagrid-print .kanuni-datagrid-viewport {
+  position: static;
+  /* The block offset is a scroll position. On paper there is no scrolling, and
+     leaving it in pushed the first row down by however far the user happened to
+     have scrolled. */
+  transform: none !important;
+  will-change: auto;
+}
+/* Sticky is meaningless without a scrolling ancestor, but it still creates the
+   stacking and offset behaviour — a pinned column would print on top of the
+   cell it sits beside. In flow, each cell keeps its own width and order. */
+.kanuni-datagrid-print .kanuni-datagrid-header,
+.kanuni-datagrid-print .kanuni-datagrid-band-row,
+.kanuni-datagrid-print .kanuni-datagrid-filter-row,
+.kanuni-datagrid-print .kanuni-datagrid-pinned-rows,
+.kanuni-datagrid-print .kanuni-datagrid-footer-row {
+  position: static !important;
+}
+/* Rules that only make sense once the ink is on paper. */
+@media print {
+  /* Release the page around the grid.
+     A grid is normally mounted as a flex child filling a viewport-height shell,
+     and every ancestor in that chain holds it at one screen — the grid can
+     unclip itself and still print one page. The adapter marks the ROOT ELEMENT
+     while print layout is on, because CSS cannot reach an ancestor from a class
+     on the grid, and only for the duration.
+     The grid's OWN wrappers are named; the host's are not, so an app with its
+     own fixed-height shell needs the same two lines on it. */
+  .kanuni-datagrid-printing,
+  .kanuni-datagrid-printing body,
+  .kanuni-datagrid-printing .kanuni-datagrid-enterprise,
+  .kanuni-datagrid-printing .kanuni-datagrid-main {
+    height: auto !important;
+    max-height: none !important;
+    overflow: visible !important;
+    flex: none !important;
+  }
+  /* A row split across a page break is unreadable — the top half of the text on
+     one sheet and the bottom half on the next. */
+  .kanuni-datagrid-print .kanuni-datagrid-row,
+  .kanuni-datagrid-print .kanuni-datagrid-group-row {
+    break-inside: avoid;
+    page-break-inside: avoid;
+  }
+  /* Chrome and Safari drop background colours by default, which turns the
+     header, the group banners and the row striping into undifferentiated white.
+     The structure IS the meaning here, so ask for them back. */
+  .kanuni-datagrid-print {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+  /* Controls that print as furniture: nothing on paper can be clicked, and each
+     one costs a column of width that the data needs. */
+  .kanuni-datagrid-print .kanuni-datagrid-toolbar,
+  .kanuni-datagrid-print .kanuni-datagrid-filter-panel,
+  .kanuni-datagrid-print .kanuni-datagrid-pager,
+  .kanuni-datagrid-print .kanuni-datagrid-status-bar,
+  .kanuni-datagrid-print .kanuni-datagrid-sidebar,
+  .kanuni-datagrid-print .kanuni-datagrid-resize-handle,
+  .kanuni-datagrid-print .kanuni-datagrid-filter-button {
+    display: none !important;
+  }
+}
+/* ── Cell notes (gap analysis P3.3) ────────────────────────────
+   A note is something a PERSON attached to this cell, and the whole value of
+   the marker is that you can find those cells without hovering every one of
+   them. Excel's corner triangle, for the same reason and in the same corner. */
+.kanuni-datagrid-cell--noted {
+  position: relative;
+}
+.kanuni-datagrid-cell--noted::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  /* Logical, not `right`: in an RTL grid the marker belongs in the corner the
+     reader's eye ends at, which is the other one. */
+  inset-inline-end: 0;
+  width: 0;
+  height: 0;
+  /* A triangle from borders — no glyph, no font dependency, no extra element in
+     a cell the row memo is built to keep cheap. */
+  border-top: 6px solid var(--dg-note-marker);
+  border-inline-start: 6px solid transparent;
+  pointer-events: none;
+}
+.kanuni-datagrid-note-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px;
+  min-width: 260px;
+}
+.kanuni-datagrid-note-input {
+  font: inherit;
+  color: var(--dg-text);
+  background: var(--dg-surface);
+  border: 1px solid var(--dg-border);
+  border-radius: var(--dg-radius);
+  padding: 6px 8px;
+  resize: vertical;
+  min-height: 64px;
+}
+.kanuni-datagrid-note-input:focus-visible {
+  outline: 2px solid var(--dg-focus-ring);
+  outline-offset: -1px;
+}
+.kanuni-datagrid-note-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 6px;
+}
+/* ── Cell spans (gap analysis P3.1) ────────────────────────────
+   The block is an absolutely-positioned child of the cell, not a taller cell.
+   A taller cell would change the height of its ROW, and a grid with an
+   `autoHeight` column measures rows and feeds the result back to the engine —
+   block inflates row, row moves offsets, offsets resize block, React ends it
+   with "Maximum update depth exceeded". Out of the flow, the cell stays the
+   height it always was. */
+.kanuni-datagrid-cell--span {
+  position: relative;
+  /* The box reaches past the cell's own bottom edge on purpose. */
+  overflow: visible;
+}
+.kanuni-datagrid-span-box {
+  position: absolute;
+  top: 0;
+  inset-inline: 0;
+  display: flex;
+  /* Top-aligned, not centred: a two-row block and a fifty-row block should put
+     the value in the same place, and a reader looks for it beside the first row
+     of the group. */
+  align-items: flex-start;
+  /* Horizontal padding matches an ordinary cell so the value lines up with the
+     column above and below. The top padding centres it within the block's FIRST
+     row — the grid's line-height is 1.4, so half the leftover row height puts
+     it exactly where an unmerged cell would sit. */
+  padding: calc((var(--dg-row-height) - 1.4em) / 2) var(--dg-cell-padding-x);
+  /* Its own background: the row underneath ends where the row does, and the
+     rest of the block would show whatever is behind it. */
+  background: var(--dg-surface);
+  /* Above the STATIC center cells of later rows (which would otherwise paint
+     their backgrounds over everything below the block's first row) — but below
+     the pinned columns' 2. The audit caught 3 here: a center column's block
+     painted OVER the left-pinned column during horizontal scroll, because the
+     box competes in the viewport's stacking context while a box inside a
+     pinned cell is scoped by its parent's own context. */
+  z-index: 1;
+  border-bottom: var(--dg-row-border);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.kanuni-datagrid-cell--span-covered {
+  /* No content, no rules. The block above owns this space. */
+  border-bottom: none;
+  background: transparent;
+}
+/* The FOCUSED covered cell lifts over the block and shows its own content —
+   this is what makes an editor opened on it visible (audit finding #3), and
+   arrowing through a merge gives per-row feedback instead of a void. */
+.kanuni-datagrid-cell--span-covered.kanuni-datagrid-cell--focused {
+  position: relative;
+  z-index: 2;
+  background: var(--dg-surface);
+  border-bottom: var(--dg-row-border);
+}
+/* A merged block sits over rows that stripe, get selected and get hovered.
+   Their treatment must not show THROUGH the block — only beside it. */
+.kanuni-datagrid-row--odd .kanuni-datagrid-span-box,
+.kanuni-datagrid-row--selected .kanuni-datagrid-span-box {
+  background: var(--dg-surface);
+}
+/* ── Filter popup resize handle (user request, 2026-08-14) ─────
+   One corner, chosen by where there is room to grow: bottom-right normally,
+   bottom-left when the popup is clamped against the viewport's right edge.
+   Drawn as the familiar diagonal ridges so it reads as "drag me". */
+.kanuni-datagrid-popup-resize {
+  position: absolute;
+  bottom: 0;
+  width: 14px;
+  height: 14px;
+  z-index: 2;
+  background:
+    repeating-linear-gradient(
+      -45deg,
+      transparent 0 3px,
+      var(--dg-border-strong) 3px 4px
+    );
+  opacity: 0.7;
+}
+.kanuni-datagrid-popup-resize--right {
+  right: 0;
+  cursor: nwse-resize;
+  clip-path: polygon(100% 0, 100% 100%, 0 100%);
+}
+.kanuni-datagrid-popup-resize--left {
+  left: 0;
+  cursor: nesw-resize;
+  clip-path: polygon(0 0, 100% 100%, 0 100%);
+  background:
+    repeating-linear-gradient(
+      45deg,
+      transparent 0 3px,
+      var(--dg-border-strong) 3px 4px
+    );
+}
 /* ─────────────────────────────────────────────────────────────
    KANUNILABS DataGrid — packaged themes