@kanunilabs/datagrid 1.0.0

package/dist/styles.css

@@ -0,0 +1,3526 @@
+/* ─────────────────────────────────────────────────────────────
+   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
+   ─────────────────────────────────────────────────────────────
+   Six presets, each in a light and a dark palette, each at three densities.
+   Nothing here is copied from a third-party stylesheet: every rule is a
+   KanuniLabs class overriding a KanuniLabs --dg-* token. The names are the
+   industry's shared vocabulary for a grid's VISUAL DENSITY AND CHROME — the
+   same sense in which a typeface is called "grotesque" — and the palettes,
+   metrics and line work below are our own.
+
+   ── How a theme is expressed ───────────────────────────────
+   A theme is a token override and (almost) nothing else. That is the whole
+   design: the stylesheet that draws the grid already reads every colour,
+   metric, shadow and border through a custom property, so a preset never
+   restyles a component and can never fall behind one. It also costs the render
+   path exactly nothing — the browser resolves the variables during style
+   computation, and switching themes at runtime is one class swap on the root,
+   not a re-render of a single cell.
+
+   ── Why the selectors are written out three times ──────────
+   Tokens have to reach three roots: the grid itself, the enterprise wrapper
+   (a SIBLING owns the row/form editor), and anything portalled to <body>
+   (`.kanuni-datagrid-detached`). That is the same trio the base sheet declares
+   its defaults on. Writing all three also lands the block at specificity
+   (0,2,0) — equal to the base `.kanuni-datagrid-root.kanuni-datagrid-dark`
+   block and later in the file, so a theme wins; and the theme's own dark
+   variant, at (0,3,0), wins over both. Order and specificity are load-bearing
+   here: this file MUST be concatenated after DataGridTheme.css.
+   ───────────────────────────────────────────────────────────── */
+
+/* ═══════════════════════════════════════════════════════════
+   QUARTZ — modern, minimal chrome
+   ═══════════════════════════════════════════════════════════
+   The least furniture that still reads as a table: no column separators at
+   all, hairline row rules, and a header that is the same white as the body,
+   separated only by one firm line. Generous radii. For product UIs where the
+   grid sits among cards rather than inside a terminal. */
+.kanuni-datagrid-root.kanuni-datagrid-theme-quartz,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-quartz,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-quartz {
+  --dg-bg: #ffffff;
+  --dg-surface: #ffffff;
+  --dg-surface-header: #ffffff;
+  --dg-surface-hover: #f6f8fa;
+  --dg-surface-stripe: #fbfcfd;
+  --dg-border: #eaeef2;
+  --dg-border-strong: #d5dbe2;
+  --dg-text: #101828;
+  --dg-text-muted: #667085;
+  --dg-primary: #2563eb;
+  --dg-primary-soft: #dbeafe;
+  --dg-on-primary: #ffffff;   /* 5.17:1 */
+  --dg-focus-ring: #1d4ed8;
+  --dg-selected-bg: #dbeafe;
+  --dg-group-bg: #f6f8fa;
+  --dg-footer-bg: #f9fafb;
+  --dg-scrollbar-thumb: #d5dbe2;
+
+  /* No vertical rules — the whole point of the preset. */
+  --dg-cell-border: none;
+  --dg-header-cell-border: none;
+  --dg-row-border: 1px solid var(--dg-border);
+  --dg-header-border: 1px solid var(--dg-border-strong);
+
+  --dg-radius: 8px;
+  --dg-radius-control: 6px;
+  --dg-shadow-popup: 0 8px 24px -6px rgba(16, 24, 40, 0.16);
+  --dg-shadow-popup-sm: 0 6px 18px -4px rgba(16, 24, 40, 0.12);
+  --dg-shadow-menu: 0 10px 28px -8px rgba(16, 24, 40, 0.2);
+  --dg-shadow-card: 0 12px 32px -10px rgba(16, 24, 40, 0.2);
+  --dg-shadow-pinned: 4px 0 8px -6px rgba(16, 24, 40, 0.28);
+  --dg-shadow-pinned-right: -4px 0 8px -6px rgba(16, 24, 40, 0.28);
+
+  --dg-row-height: 36px;
+  --dg-header-height: 40px;
+  --dg-cell-padding-x: 12px;
+  --dg-font-size: 13px;
+  --dg-wrap-line-height: 18px;
+  --dg-header-font-size: 12px;
+  --dg-control-height: 30px;
+  --dg-filter-input-height: 26px;
+  --dg-chrome-padding-y: 8px;
+}
+
+.kanuni-datagrid-root.kanuni-datagrid-theme-quartz.kanuni-datagrid-dark,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-quartz.kanuni-datagrid-dark,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-quartz.kanuni-datagrid-dark {
+  --dg-bg: #0d1117;
+  --dg-surface: #0d1117;
+  --dg-surface-header: #0d1117;
+  --dg-surface-hover: #161b22;
+  --dg-surface-stripe: #10151c;
+  --dg-border: #21262d;
+  --dg-border-strong: #30363d;
+  --dg-text: #e6edf3;
+  --dg-text-muted: #8b949e;
+  --dg-primary: #4493f8;
+  --dg-primary-soft: #17325c;
+  --dg-focus-ring: #79c0ff;
+  --dg-selected-bg: #17325c;
+  --dg-group-bg: #161b22;
+  --dg-footer-bg: #12171e;
+  --dg-on-primary: #05101f;
+  --dg-scrollbar-thumb: #30363d;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   BALHAM — dense, ruled, financial
+   ═══════════════════════════════════════════════════════════
+   Every column and every row is ruled, the type is small, the padding is
+   tight and the corners are nearly square. Built for the case where the grid
+   IS the application and the user is counting rows on screen. */
+.kanuni-datagrid-root.kanuni-datagrid-theme-balham,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-balham,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-balham {
+  --dg-bg: #ffffff;
+  --dg-surface: #ffffff;
+  --dg-surface-header: #f2f4f6;
+  --dg-surface-hover: #e6ecf2;
+  --dg-surface-stripe: #f7f8fa;
+  --dg-border: #c8ced4;
+  --dg-border-strong: #98a2ac;
+  --dg-text: #1c2126;
+  --dg-text-muted: #5a6570;
+  /* #0b7fc4 was the intended hue and it measured 4.33:1 against the white that
+     sits on it — the group chip's own label, 12px semibold, so AA's large-text
+     exemption does not apply. Two steps darker, same hue, 5.19:1. */
+  --dg-primary: #0a72b0;
+  --dg-primary-soft: #d3e7f5;
+  --dg-on-primary: #ffffff;   /* 5.19:1 */
+  --dg-focus-ring: #0a72b0;
+  --dg-selected-bg: #cfe4f3;
+  --dg-group-bg: #e9edf1;
+  --dg-footer-bg: #f2f4f6;
+  --dg-scrollbar-thumb: #98a2ac;
+
+  /* Fully ruled: the grid character. */
+  --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-strong);
+  --dg-header-border: 1px solid var(--dg-border-strong);
+
+  --dg-radius: 2px;
+  --dg-radius-control: 2px;
+  /* Flat: a ruled grid does not need lift to separate its layers, and the
+     shadow fought the lines. Popups keep a hard border instead. */
+  --dg-shadow-popup: 0 3px 10px rgba(28, 33, 38, 0.22);
+  --dg-shadow-popup-sm: 0 2px 8px rgba(28, 33, 38, 0.18);
+  --dg-shadow-menu: 0 3px 10px rgba(28, 33, 38, 0.22);
+  --dg-shadow-card: 0 4px 14px rgba(28, 33, 38, 0.22);
+  --dg-shadow-panel: 0 3px 10px rgba(28, 33, 38, 0.18);
+  --dg-shadow-dialog: 0 10px 32px rgba(28, 33, 38, 0.34);
+  --dg-shadow-pinned: 2px 0 3px -2px rgba(28, 33, 38, 0.3);
+  --dg-shadow-pinned-right: -2px 0 3px -2px rgba(28, 33, 38, 0.3);
+
+  --dg-row-height: 25px;
+  --dg-header-height: 28px;
+  --dg-cell-padding-x: 6px;
+  --dg-font-size: 12px;
+  --dg-wrap-line-height: 16px;
+  --dg-header-font-size: 11px;
+  --dg-header-weight: 700;
+  --dg-control-height: 24px;
+  --dg-control-font-size: 11px;
+  --dg-chrome-font-size: 11px;
+  --dg-filter-input-height: 20px;
+  --dg-chrome-padding-y: 4px;
+}
+
+.kanuni-datagrid-root.kanuni-datagrid-theme-balham.kanuni-datagrid-dark,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-balham.kanuni-datagrid-dark,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-balham.kanuni-datagrid-dark {
+  --dg-bg: #1a2029;
+  --dg-surface: #1a2029;
+  --dg-surface-header: #232b36;
+  --dg-surface-hover: #2c3644;
+  --dg-surface-stripe: #1e242e;
+  --dg-border: #39434f;
+  --dg-border-strong: #566373;
+  --dg-text: #e4e9ef;
+  --dg-text-muted: #97a3b2;
+  --dg-primary: #3fa8e8;
+  --dg-primary-soft: #143349;
+  --dg-focus-ring: #7cc7f2;
+  --dg-selected-bg: #17415e;
+  --dg-group-bg: #262f3b;
+  --dg-footer-bg: #232b36;
+  --dg-on-primary: #06192a;
+  --dg-scrollbar-thumb: #566373;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   MATERIAL — tall, quiet lines, real elevation
+   ═══════════════════════════════════════════════════════════
+   Rows only, no column rules; larger rhythm; a header set in medium weight
+   with open tracking rather than bold; pill-shaped controls; and shadows that
+   actually lift. The one preset whose type scale grows rather than shrinks. */
+.kanuni-datagrid-root.kanuni-datagrid-theme-material,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-material,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-material {
+  --dg-bg: #ffffff;
+  --dg-surface: #ffffff;
+  --dg-surface-header: #ffffff;
+  --dg-surface-hover: #f4f0f7;
+  --dg-surface-stripe: #faf8fc;
+  --dg-border: #e7e0ec;
+  --dg-border-strong: #cac4d0;
+  --dg-text: #1d1b20;
+  --dg-text-muted: #49454f;
+  --dg-primary: #6750a4;
+  --dg-primary-soft: #e8def8;
+  --dg-on-primary: #ffffff;   /* 6.44:1 */
+  --dg-focus-ring: #6750a4;
+  --dg-selected-bg: #e8def8;
+  --dg-group-bg: #f5eefc;
+  --dg-footer-bg: #faf8fc;
+  --dg-scrollbar-thumb: #cac4d0;
+
+  --dg-cell-border: none;
+  --dg-header-cell-border: none;
+  --dg-row-border: 1px solid var(--dg-border);
+  --dg-header-border: 1px solid var(--dg-border-strong);
+
+  /* A label, not a heading: medium weight, opened up. */
+  --dg-header-weight: 500;
+  --dg-header-tracking: 0.04em;
+
+  --dg-radius: 12px;
+  --dg-radius-control: 20px;
+  --dg-shadow-popup: 0 4px 8px 3px rgba(29, 27, 32, 0.15), 0 1px 3px rgba(29, 27, 32, 0.3);
+  --dg-shadow-popup-sm: 0 2px 6px 2px rgba(29, 27, 32, 0.15), 0 1px 2px rgba(29, 27, 32, 0.3);
+  --dg-shadow-menu: 0 4px 8px 3px rgba(29, 27, 32, 0.15), 0 1px 3px rgba(29, 27, 32, 0.3);
+  --dg-shadow-card: 0 6px 10px 4px rgba(29, 27, 32, 0.15), 0 2px 3px rgba(29, 27, 32, 0.3);
+  --dg-shadow-panel: 0 4px 8px 3px rgba(29, 27, 32, 0.15), 0 1px 3px rgba(29, 27, 32, 0.3);
+  --dg-shadow-dialog: 0 8px 12px 6px rgba(29, 27, 32, 0.15), 0 4px 4px rgba(29, 27, 32, 0.3);
+  --dg-shadow-pinned: 4px 0 8px -5px rgba(29, 27, 32, 0.35);
+  --dg-shadow-pinned-right: -4px 0 8px -5px rgba(29, 27, 32, 0.35);
+
+  --dg-row-height: 40px;
+  --dg-header-height: 48px;
+  --dg-cell-padding-x: 16px;
+  --dg-font-size: 14px;
+  --dg-wrap-line-height: 20px;
+  --dg-header-font-size: 12px;
+  --dg-control-height: 34px;
+  --dg-control-font-size: 13px;
+  --dg-chrome-font-size: 13px;
+  --dg-filter-input-height: 28px;
+  --dg-chrome-padding-y: 10px;
+}
+
+.kanuni-datagrid-root.kanuni-datagrid-theme-material.kanuni-datagrid-dark,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-material.kanuni-datagrid-dark,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-material.kanuni-datagrid-dark {
+  --dg-bg: #141218;
+  --dg-surface: #141218;
+  --dg-surface-header: #141218;
+  --dg-surface-hover: #211f26;
+  --dg-surface-stripe: #1a171f;
+  --dg-border: #2b2930;
+  --dg-border-strong: #49454f;
+  --dg-text: #e6e0e9;
+  --dg-text-muted: #cac4d0;
+  --dg-primary: #d0bcff;
+  --dg-primary-soft: #4f378b;
+  --dg-focus-ring: #d0bcff;
+  --dg-selected-bg: #4f378b;
+  --dg-group-bg: #241f2e;
+  --dg-footer-bg: #1a171f;
+  /* The dark accent is a pale lilac: what sits on it must be near-black. */
+  --dg-on-primary: #381e72;
+  --dg-scrollbar-thumb: #49454f;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   ALPINE — airy, fully framed, high-chroma accent
+   ═══════════════════════════════════════════════════════════
+   The middle position: both sets of rules are drawn but kept light, the rhythm
+   is roomy, and the header is anchored by a doubled rule and a heavy weight so
+   it reads as a distinct band even though it shares the body's palette. */
+.kanuni-datagrid-root.kanuni-datagrid-theme-alpine,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-alpine,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-alpine {
+  --dg-bg: #ffffff;
+  --dg-surface: #ffffff;
+  --dg-surface-header: #f8f9fa;
+  --dg-surface-hover: #eef3f8;
+  --dg-surface-stripe: #fcfdfe;
+  --dg-border: #dde2e8;
+  --dg-border-strong: #b9c2cc;
+  --dg-text: #181d1f;
+  --dg-text-muted: #626b74;
+  --dg-primary: #1a73c7;
+  --dg-primary-soft: #dceafa;
+  --dg-on-primary: #ffffff;   /* 4.86:1 */
+  --dg-focus-ring: #1a73c7;
+  --dg-selected-bg: #dceafa;
+  --dg-group-bg: #eef1f4;
+  --dg-footer-bg: #f8f9fa;
+  --dg-scrollbar-thumb: #b9c2cc;
+
+  --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);
+  /* Doubled rather than coloured: the header band is defined by weight of
+     LINE, which survives every palette including the dark one. */
+  --dg-header-border: 2px solid var(--dg-border-strong);
+  --dg-header-weight: 700;
+
+  --dg-radius: 6px;
+  --dg-radius-control: 4px;
+  --dg-shadow-popup: 0 6px 20px -4px rgba(24, 29, 31, 0.22);
+  --dg-shadow-popup-sm: 0 4px 14px -3px rgba(24, 29, 31, 0.18);
+  --dg-shadow-menu: 0 8px 22px -6px rgba(24, 29, 31, 0.24);
+  --dg-shadow-card: 0 10px 28px -8px rgba(24, 29, 31, 0.24);
+  --dg-shadow-pinned: 3px 0 6px -4px rgba(24, 29, 31, 0.3);
+  --dg-shadow-pinned-right: -3px 0 6px -4px rgba(24, 29, 31, 0.3);
+
+  --dg-row-height: 34px;
+  --dg-header-height: 38px;
+  --dg-cell-padding-x: 12px;
+  --dg-font-size: 13px;
+  --dg-wrap-line-height: 18px;
+  --dg-header-font-size: 12px;
+  --dg-control-height: 28px;
+  --dg-filter-input-height: 24px;
+  --dg-chrome-padding-y: 7px;
+}
+
+.kanuni-datagrid-root.kanuni-datagrid-theme-alpine.kanuni-datagrid-dark,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-alpine.kanuni-datagrid-dark,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-alpine.kanuni-datagrid-dark {
+  --dg-bg: #181d1f;
+  --dg-surface: #181d1f;
+  --dg-surface-header: #222628;
+  --dg-surface-hover: #2b3033;
+  --dg-surface-stripe: #1c2123;
+  --dg-border: #35393c;
+  --dg-border-strong: #545a5f;
+  --dg-text: #eceff1;
+  --dg-text-muted: #9aa3aa;
+  --dg-primary: #52a8f0;
+  --dg-primary-soft: #123049;
+  --dg-focus-ring: #8ec9f7;
+  --dg-selected-bg: #16395a;
+  --dg-group-bg: #252a2d;
+  --dg-footer-bg: #222628;
+  --dg-on-primary: #04182a;
+  --dg-scrollbar-thumb: #545a5f;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   KANUNI — the house theme, light
+   ═══════════════════════════════════════════════════════════
+   The KanuniLabs identity: an ink header carrying the brand gold, over a warm
+   near-white body. It is the theme that made `--dg-on-primary` necessary —
+   the accent is #C5A55A, and white on it measures 1.9:1, so everything that
+   sits ON the accent (group chips, primary buttons, the selected calendar day)
+   takes near-black instead. `--dg-header-*` is likewise doing real work here:
+   only the header row goes ink; the group panel, filter row and footer stay
+   light, because their muted text would be unreadable on the dark fill. */
+.kanuni-datagrid-root.kanuni-datagrid-theme-kanuni,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-kanuni,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-kanuni {
+  --dg-bg: #ffffff;
+  --dg-surface: #ffffff;
+  --dg-surface-header: #faf6ed;      /* brand-50 — panels, filter row, footer */
+  --dg-surface-hover: #f7f2e6;
+  --dg-surface-stripe: #fdfbf6;
+  --dg-border: #e7e2d6;
+  --dg-border-strong: #cfc6b2;
+  --dg-text: #1c1917;
+  --dg-text-muted: #6b6154;
+  --dg-primary: #c5a55a;             /* brand-500 */
+  --dg-primary-soft: #f3ead3;        /* brand-100 */
+  /* NOT the accent: gold on white is 1.9:1 and a focus ring has to be seen.
+     brand-900 measures 7.0:1 on white. */
+  --dg-focus-ring: #6b5119;
+  --dg-on-primary: #1c1917;
+  --dg-selected-bg: #f3ead3;
+  --dg-group-bg: #faf6ed;
+  --dg-footer-bg: #faf6ed;
+  --dg-scrollbar-thumb: #cfc6b2;
+
+  /* The header band: ink, with brand foreground. */
+  --dg-header-bg: #232b33;
+  --dg-header-text: #f6efdd;
+  --dg-header-text-muted: #b6ab92;
+  --dg-header-hover: #2f3941;
+  --dg-header-cell-border: 1px solid #3a444d;
+  --dg-header-border: 2px solid #c5a55a;
+
+  --dg-cell-border: none;
+  --dg-row-border: 1px solid var(--dg-border);
+
+  --dg-radius: 6px;
+  --dg-radius-control: 4px;
+  --dg-shadow-popup: 0 10px 26px -8px rgba(35, 43, 51, 0.3);
+  --dg-shadow-popup-sm: 0 6px 18px -6px rgba(35, 43, 51, 0.24);
+  --dg-shadow-menu: 0 10px 26px -8px rgba(35, 43, 51, 0.3);
+  --dg-shadow-card: 0 12px 30px -10px rgba(35, 43, 51, 0.3);
+  --dg-shadow-pinned: 3px 0 6px -4px rgba(35, 43, 51, 0.28);
+  --dg-shadow-pinned-right: -3px 0 6px -4px rgba(35, 43, 51, 0.28);
+  --dg-overlay: rgba(28, 25, 23, 0.6);
+
+  --dg-row-height: 32px;
+  --dg-header-height: 38px;
+  --dg-cell-padding-x: 10px;
+  --dg-font-size: 13px;
+  --dg-wrap-line-height: 18px;
+  --dg-header-font-size: 12px;
+  --dg-header-tracking: 0.02em;
+  --dg-control-height: 28px;
+  --dg-filter-input-height: 24px;
+  --dg-chrome-padding-y: 7px;
+}
+
+/* `kanuni` in dark: the body follows the header down rather than the header
+   coming up, so the gold stays the only warm thing on screen. */
+.kanuni-datagrid-root.kanuni-datagrid-theme-kanuni.kanuni-datagrid-dark,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-kanuni.kanuni-datagrid-dark,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-kanuni.kanuni-datagrid-dark,
+/* ═══════════════════════════════════════════════════════════
+   KANUNI MIDNIGHT — the house theme, dark by default
+   ═══════════════════════════════════════════════════════════
+   Shares the palette below, but applies WITHOUT the `dark` flag. Listed in the
+   same block with and without `.kanuni-datagrid-dark`, so passing `dark` to a
+   grid that is already midnight is a no-op rather than a reversion to the
+   packaged slate palette. */
+.kanuni-datagrid-root.kanuni-datagrid-theme-kanuni-midnight,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-kanuni-midnight,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-kanuni-midnight,
+.kanuni-datagrid-root.kanuni-datagrid-theme-kanuni-midnight.kanuni-datagrid-dark,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-kanuni-midnight.kanuni-datagrid-dark,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-kanuni-midnight.kanuni-datagrid-dark {
+  --dg-bg: #0c0a09;
+  --dg-surface: #16130f;
+  --dg-surface-header: #221d17;
+  --dg-surface-hover: #2b241c;
+  --dg-surface-stripe: #191511;
+  --dg-border: #332b22;
+  --dg-border-strong: #4d4235;
+  --dg-text: #f5f1e8;
+  --dg-text-muted: #a89b86;
+  --dg-primary: #c5a55a;
+  --dg-primary-soft: #3d3117;
+  --dg-focus-ring: #d9bf7e;
+  --dg-on-primary: #1c1917;
+  --dg-selected-bg: #3d3117;
+  --dg-group-bg: #221d17;
+  --dg-footer-bg: #221d17;
+  --dg-scrollbar-thumb: #4d4235;
+
+  --dg-header-bg: #1c1811;
+  --dg-header-text: #f6efdd;
+  --dg-header-text-muted: #a89b86;
+  --dg-header-hover: #2b241c;
+  --dg-header-cell-border: 1px solid #332b22;
+  --dg-header-border: 2px solid #c5a55a;
+
+  --dg-cell-border: none;
+  --dg-row-border: 1px solid var(--dg-border);
+
+  --dg-danger: #f87171;
+  --dg-danger-text: #fca5a5;
+  --dg-on-danger: #450a0a;
+  --dg-warning: #fbbf24;
+  --dg-overlay: rgba(12, 10, 9, 0.72);
+
+  --dg-radius: 6px;
+  --dg-radius-control: 4px;
+  --dg-shadow-popup: 0 10px 26px -6px rgba(0, 0, 0, 0.7);
+  --dg-shadow-popup-sm: 0 6px 18px -4px rgba(0, 0, 0, 0.6);
+  --dg-shadow-menu: 0 10px 26px -6px rgba(0, 0, 0, 0.7);
+  --dg-shadow-card: 0 12px 30px -8px rgba(0, 0, 0, 0.7);
+  --dg-shadow-panel: 0 8px 20px rgba(0, 0, 0, 0.55);
+  --dg-shadow-dialog: 0 24px 48px rgba(0, 0, 0, 0.75);
+  --dg-shadow-pinned: 3px 0 6px -3px rgba(0, 0, 0, 0.7);
+  --dg-shadow-pinned-right: -3px 0 6px -3px rgba(0, 0, 0, 0.7);
+
+  --dg-row-height: 32px;
+  --dg-header-height: 38px;
+  --dg-cell-padding-x: 10px;
+  --dg-font-size: 13px;
+  --dg-wrap-line-height: 18px;
+  --dg-header-font-size: 12px;
+  --dg-header-tracking: 0.02em;
+  --dg-control-height: 28px;
+  --dg-filter-input-height: 24px;
+  --dg-chrome-padding-y: 7px;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   DENSITY
+   ═══════════════════════════════════════════════════════════
+   Compact is not "the same grid in smaller type". Every vertical measure moves
+   together — row, header, cell padding, control height, toolbar and pager
+   padding, filter field — so the proportions hold and the grid stays usable
+   rather than merely smaller. Each theme scales from its OWN normal, because a
+   Material row starts at 40px and a Balham row at 25px; one shared compact
+   value would have flattened the presets into each other at that density.
+
+   The ROW HEIGHT is deliberately absent here: it is a core value the
+   virtualizer runs on, so the component resolves it in JS (THEME_ROW_HEIGHT)
+   and core feeds it back as --dg-row-height. Everything CSS owns lives here,
+   so the two can never disagree about the row geometry. Same split the base
+   stylesheet already uses for the unthemed density presets.
+
+   All three roots are listed so a portalled popup gets the density too — the
+   base sheet's presets are root-only, which left popup controls at their
+   normal size whatever the grid was set to. */
+
+/* ── Quartz ── */
+.kanuni-datagrid-root.kanuni-datagrid-theme-quartz.kanuni-datagrid-density-compact,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-quartz.kanuni-datagrid-density-compact,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-quartz.kanuni-datagrid-density-compact {
+  --dg-header-height: 30px;
+  --dg-cell-padding-x: 8px;
+  --dg-font-size: 12px;
+  --dg-wrap-line-height: 16px;
+  --dg-header-font-size: 11px;
+  --dg-control-height: 24px;
+  --dg-control-font-size: 11px;
+  --dg-chrome-font-size: 11px;
+  --dg-filter-input-height: 20px;
+  --dg-chrome-padding-y: 4px;
+}
+
+.kanuni-datagrid-root.kanuni-datagrid-theme-quartz.kanuni-datagrid-density-comfortable,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-quartz.kanuni-datagrid-density-comfortable,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-quartz.kanuni-datagrid-density-comfortable {
+  --dg-header-height: 48px;
+  --dg-cell-padding-x: 16px;
+  --dg-font-size: 14px;
+  --dg-wrap-line-height: 20px;
+  --dg-header-font-size: 13px;
+  --dg-control-height: 34px;
+  --dg-control-font-size: 13px;
+  --dg-chrome-font-size: 13px;
+  --dg-filter-input-height: 30px;
+  --dg-chrome-padding-y: 10px;
+}
+
+/* ── Balham ── */
+.kanuni-datagrid-root.kanuni-datagrid-theme-balham.kanuni-datagrid-density-compact,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-balham.kanuni-datagrid-density-compact,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-balham.kanuni-datagrid-density-compact {
+  --dg-header-height: 22px;
+  --dg-cell-padding-x: 4px;
+  --dg-font-size: 11px;
+  --dg-wrap-line-height: 16px;
+  --dg-header-font-size: 10px;
+  --dg-control-height: 20px;
+  --dg-control-font-size: 10px;
+  --dg-chrome-font-size: 10px;
+  --dg-filter-input-height: 17px;
+  --dg-chrome-padding-y: 2px;
+}
+
+.kanuni-datagrid-root.kanuni-datagrid-theme-balham.kanuni-datagrid-density-comfortable,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-balham.kanuni-datagrid-density-comfortable,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-balham.kanuni-datagrid-density-comfortable {
+  --dg-header-height: 36px;
+  --dg-cell-padding-x: 10px;
+  --dg-font-size: 13px;
+  --dg-wrap-line-height: 18px;
+  --dg-header-font-size: 12px;
+  --dg-control-height: 28px;
+  --dg-control-font-size: 12px;
+  --dg-chrome-font-size: 12px;
+  --dg-filter-input-height: 24px;
+  --dg-chrome-padding-y: 6px;
+}
+
+/* ── Material ── */
+.kanuni-datagrid-root.kanuni-datagrid-theme-material.kanuni-datagrid-density-compact,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-material.kanuni-datagrid-density-compact,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-material.kanuni-datagrid-density-compact {
+  --dg-header-height: 36px;
+  --dg-cell-padding-x: 12px;
+  --dg-font-size: 13px;
+  --dg-wrap-line-height: 18px;
+  --dg-header-font-size: 11px;
+  --dg-control-height: 28px;
+  --dg-control-font-size: 12px;
+  --dg-chrome-font-size: 12px;
+  --dg-filter-input-height: 24px;
+  --dg-chrome-padding-y: 6px;
+}
+
+.kanuni-datagrid-root.kanuni-datagrid-theme-material.kanuni-datagrid-density-comfortable,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-material.kanuni-datagrid-density-comfortable,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-material.kanuni-datagrid-density-comfortable {
+  --dg-header-height: 56px;
+  --dg-cell-padding-x: 20px;
+  --dg-font-size: 15px;
+  --dg-wrap-line-height: 20px;
+  --dg-header-font-size: 13px;
+  --dg-control-height: 40px;
+  --dg-control-font-size: 14px;
+  --dg-chrome-font-size: 14px;
+  --dg-filter-input-height: 32px;
+  --dg-chrome-padding-y: 12px;
+}
+
+/* ── Alpine ── */
+.kanuni-datagrid-root.kanuni-datagrid-theme-alpine.kanuni-datagrid-density-compact,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-alpine.kanuni-datagrid-density-compact,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-alpine.kanuni-datagrid-density-compact {
+  --dg-header-height: 28px;
+  --dg-cell-padding-x: 8px;
+  --dg-font-size: 12px;
+  --dg-wrap-line-height: 16px;
+  --dg-header-font-size: 11px;
+  --dg-control-height: 23px;
+  --dg-control-font-size: 11px;
+  --dg-chrome-font-size: 11px;
+  --dg-filter-input-height: 19px;
+  --dg-chrome-padding-y: 4px;
+}
+
+.kanuni-datagrid-root.kanuni-datagrid-theme-alpine.kanuni-datagrid-density-comfortable,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-alpine.kanuni-datagrid-density-comfortable,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-alpine.kanuni-datagrid-density-comfortable {
+  --dg-header-height: 46px;
+  --dg-cell-padding-x: 16px;
+  --dg-font-size: 14px;
+  --dg-wrap-line-height: 20px;
+  --dg-header-font-size: 13px;
+  --dg-control-height: 34px;
+  --dg-control-font-size: 13px;
+  --dg-chrome-font-size: 13px;
+  --dg-filter-input-height: 28px;
+  --dg-chrome-padding-y: 10px;
+}
+
+/* ── Kanuni + Kanuni Midnight (one rhythm, two palettes) ── */
+.kanuni-datagrid-root.kanuni-datagrid-theme-kanuni.kanuni-datagrid-density-compact,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-kanuni.kanuni-datagrid-density-compact,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-kanuni.kanuni-datagrid-density-compact,
+.kanuni-datagrid-root.kanuni-datagrid-theme-kanuni-midnight.kanuni-datagrid-density-compact,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-kanuni-midnight.kanuni-datagrid-density-compact,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-kanuni-midnight.kanuni-datagrid-density-compact {
+  --dg-header-height: 30px;
+  --dg-cell-padding-x: 7px;
+  --dg-font-size: 12px;
+  --dg-wrap-line-height: 16px;
+  --dg-header-font-size: 11px;
+  --dg-control-height: 24px;
+  --dg-control-font-size: 11px;
+  --dg-chrome-font-size: 11px;
+  --dg-filter-input-height: 20px;
+  --dg-chrome-padding-y: 4px;
+}
+
+.kanuni-datagrid-root.kanuni-datagrid-theme-kanuni.kanuni-datagrid-density-comfortable,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-kanuni.kanuni-datagrid-density-comfortable,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-kanuni.kanuni-datagrid-density-comfortable,
+.kanuni-datagrid-root.kanuni-datagrid-theme-kanuni-midnight.kanuni-datagrid-density-comfortable,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-kanuni-midnight.kanuni-datagrid-density-comfortable,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-kanuni-midnight.kanuni-datagrid-density-comfortable {
+  --dg-header-height: 46px;
+  --dg-cell-padding-x: 14px;
+  --dg-font-size: 14px;
+  --dg-wrap-line-height: 20px;
+  --dg-header-font-size: 13px;
+  --dg-control-height: 34px;
+  --dg-control-font-size: 13px;
+  --dg-chrome-font-size: 13px;
+  --dg-filter-input-height: 28px;
+  --dg-chrome-padding-y: 10px;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   SCROLLBAR
+   ═══════════════════════════════════════════════════════════
+   Only ever applied when a theme is chosen. Left to the platform otherwise:
+   the unthemed grid must keep rendering exactly as it did, and a native
+   scrollbar is a reasonable default in a component that is dropped into
+   someone else's application.
+
+   `scrollbar-color` covers Firefox and current Chromium; the -webkit- rules
+   cover Safari and older Chromium, which ignore the standard property. Both
+   are pure paint — no extra element, nothing for the virtualizer to measure. */
+[class*='kanuni-datagrid-theme-'] .kanuni-datagrid-scroller,
+[class*='kanuni-datagrid-theme-'] .kanuni-datagrid-filter-list,
+[class*='kanuni-datagrid-theme-'] .kanuni-datagrid-detail-cell {
+  scrollbar-color: var(--dg-scrollbar-thumb) var(--dg-scrollbar-track);
+  scrollbar-width: thin;
+}
+
+[class*='kanuni-datagrid-theme-'] .kanuni-datagrid-scroller::-webkit-scrollbar,
+[class*='kanuni-datagrid-theme-'] .kanuni-datagrid-filter-list::-webkit-scrollbar,
+[class*='kanuni-datagrid-theme-'] .kanuni-datagrid-detail-cell::-webkit-scrollbar {
+  width: 11px;
+  height: 11px;
+}
+
+[class*='kanuni-datagrid-theme-'] .kanuni-datagrid-scroller::-webkit-scrollbar-track,
+[class*='kanuni-datagrid-theme-'] .kanuni-datagrid-filter-list::-webkit-scrollbar-track,
+[class*='kanuni-datagrid-theme-'] .kanuni-datagrid-detail-cell::-webkit-scrollbar-track {
+  background: var(--dg-scrollbar-track);
+}
+
+[class*='kanuni-datagrid-theme-'] .kanuni-datagrid-scroller::-webkit-scrollbar-thumb,
+[class*='kanuni-datagrid-theme-'] .kanuni-datagrid-filter-list::-webkit-scrollbar-thumb,
+[class*='kanuni-datagrid-theme-'] .kanuni-datagrid-detail-cell::-webkit-scrollbar-thumb {
+  border: 3px solid transparent;
+  border-radius: 999px;
+  /* Painted into the padding box so the 3px transparent border reads as a gap
+     rather than as a thumb that touches both edges of the gutter. */
+  background-clip: padding-box;
+  background-color: var(--dg-scrollbar-thumb);
+}
+
+[class*='kanuni-datagrid-theme-'] .kanuni-datagrid-scroller::-webkit-scrollbar-corner {
+  background: var(--dg-scrollbar-track);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   THE ONE RULE A TOKEN CANNOT CARRY
+   ═══════════════════════════════════════════════════════════
+   Four presets set `--dg-cell-border: none`, which also removes the only line
+   separating a PINNED block from the columns sliding under it. The edge shadow
+   is still there, but a shadow alone is a soft seam on a surface with no other
+   vertical rules — the frozen columns stopped reading as frozen. A hairline on
+   the edge element (there is exactly one per side, not one per cell) restores
+   it without bringing the column rules back.
+
+   Every ruled preset — Balham, Alpine — needs nothing here: the seam is
+   already drawn by the cell borders they keep. */
+.kanuni-datagrid-theme-quartz .kanuni-datagrid-pin-edge-left,
+.kanuni-datagrid-theme-material .kanuni-datagrid-pin-edge-left,
+.kanuni-datagrid-theme-kanuni .kanuni-datagrid-pin-edge-left,
+.kanuni-datagrid-theme-kanuni-midnight .kanuni-datagrid-pin-edge-left {
+  border-inline-end: 1px solid var(--dg-border-strong);
+}
+
+.kanuni-datagrid-theme-quartz .kanuni-datagrid-pin-edge-right,
+.kanuni-datagrid-theme-material .kanuni-datagrid-pin-edge-right,
+.kanuni-datagrid-theme-kanuni .kanuni-datagrid-pin-edge-right,
+.kanuni-datagrid-theme-kanuni-midnight .kanuni-datagrid-pin-edge-right {
+  border-inline-start: 1px solid var(--dg-border-strong);
+}
+
+/* ─────────────────────────────────────────────────────────────
+   KANUNILABS DataGrid — palettes
+   ─────────────────────────────────────────────────────────────
+   A palette is a SECOND, independent axis: it changes the colours and nothing
+   else. The theme keeps deciding the structure — where the rules are drawn, how
+   tall a row is, how round a control is, how much the popups lift — so
+   `theme="balham" palette="nord"` is Balham's dense ruled grid in Nord's arctic
+   blues, and `theme="material" palette="nord"` is Material's tall airy one in
+   the same blues. Four themes and six palettes is twenty-four looks out of ten
+   class names, not twenty-four stylesheets.
+
+   That split is only possible because the token layer already separates the two
+   — the theme blocks set metrics AND colours, and everything here overrides the
+   colour half of that.
+
+   ── Where these colours come from ──────────────────────────
+   The six are the colour schemes people already recognise from their editors
+   and terminals, and each is used the way its authors published it: the hues
+   below are the scheme's own, mapped onto our token vocabulary. What is OURS is
+   the mapping — which of a scheme's colours becomes the header, the stripe, the
+   accent, the thing that has to stay readable on the accent — and every
+   contrast decision that follows from it. Nothing here is imported, and no
+   stylesheet from any of those projects is involved.
+
+   Several are dark-first schemes. Where the authors published a light
+   counterpart it is used (Solarized Light, Catppuccin Latte, Gruvbox light,
+   Tokyo Night Day); where they did not, the light block is our own reading of
+   the same hue family, and says so.
+
+   ── Ordering ───────────────────────────────────────────────
+   Concatenated AFTER DataGridThemes.css. A palette block matches the theme
+   blocks' specificity exactly — three roots, two classes — so source order is
+   what makes the palette win, and the dark variants sit one class higher for
+   the same reason. Getting this backwards would leave the palette silently
+   ignored, which is why `themes.test.ts` checks the file order.
+   ───────────────────────────────────────────────────────────── */
+
+/* ═══════════════════════════════════════════════════════════
+   NORD — arctic, desaturated blue-grey
+   ═══════════════════════════════════════════════════════════
+   Polar Night for the dark surfaces, Snow Storm for the light ones, Frost for
+   the accent. The calmest of the six: low saturation everywhere, so a dense
+   grid of numbers does not vibrate. */
+.kanuni-datagrid-root.kanuni-datagrid-palette-nord,
+.kanuni-datagrid-enterprise.kanuni-datagrid-palette-nord,
+.kanuni-datagrid-detached.kanuni-datagrid-palette-nord {
+  --dg-bg: #ffffff;
+  --dg-surface: #ffffff;
+  --dg-surface-header: #eceff4;      /* Snow Storm nord6 */
+  --dg-surface-hover: #e5e9f0;       /* nord5 */
+  --dg-surface-stripe: #f7f9fb;
+  --dg-border: #dde3ec;
+  --dg-border-strong: #b8c2d0;
+  --dg-text: #2e3440;                /* Polar Night nord0 */
+  --dg-text-muted: #55607a;
+  /* Frost nord10 (#5e81ac) is the scheme's accent and measures 4.29:1 under
+     white — just under the threshold for the chip label that sits on it. One
+     step deeper, same Frost hue. */
+  --dg-primary: #4c6d94;
+  --dg-primary-soft: #dbe3ee;
+  --dg-on-primary: #ffffff;          /* 5.24:1 */
+  --dg-focus-ring: #4c6d94;
+  --dg-selected-bg: #dbe3ee;
+  --dg-group-bg: #e9edf3;
+  --dg-footer-bg: #eceff4;
+  --dg-scrollbar-thumb: #b8c2d0;
+  --dg-danger: #a2515a;              /* Aurora nord11, deepened for white text */
+  --dg-danger-text: #8f4149;
+  --dg-on-danger: #ffffff;
+  --dg-warning: #8a6220;             /* nord13 family */
+}
+
+.kanuni-datagrid-root.kanuni-datagrid-palette-nord.kanuni-datagrid-dark,
+.kanuni-datagrid-enterprise.kanuni-datagrid-palette-nord.kanuni-datagrid-dark,
+.kanuni-datagrid-detached.kanuni-datagrid-palette-nord.kanuni-datagrid-dark {
+  --dg-bg: #2e3440;                  /* nord0 */
+  --dg-surface: #2e3440;
+  --dg-surface-header: #3b4252;      /* nord1 */
+  --dg-surface-hover: #434c5e;       /* nord2 */
+  --dg-surface-stripe: #333a48;
+  --dg-border: #434c5e;
+  --dg-border-strong: #4c566a;       /* nord3 */
+  --dg-text: #eceff4;                /* nord6 */
+  --dg-text-muted: #b3bccb;
+  --dg-primary: #88c0d0;             /* Frost nord8 */
+  --dg-primary-soft: #3c5464;
+  --dg-on-primary: #17222b;          /* 9.11:1 */
+  --dg-focus-ring: #8fbcbb;
+  --dg-selected-bg: #3c5464;
+  --dg-group-bg: #39404f;
+  --dg-footer-bg: #3b4252;
+  --dg-scrollbar-thumb: #4c566a;
+  --dg-danger: #bf616a;              /* nord11 */
+  --dg-danger-text: #d9919a;
+  /* nord11 is a muted red, so the label on it has to go further down than the
+     usual near-black: #2b1113 measured 4.31:1 and this is 5.17:1. */
+  --dg-on-danger: #170709;
+  --dg-warning: #ebcb8b;             /* nord13 */
+  --dg-overlay: rgba(24, 28, 36, 0.72);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   DRACULA — near-black violet with high-chroma accents
+   ═══════════════════════════════════════════════════════════
+   The scheme is dark by design. Its light counterpart here is ours: the same
+   purple/pink family lifted onto a white ground, so switching `dark` does not
+   jump to an unrelated hue. */
+.kanuni-datagrid-root.kanuni-datagrid-palette-dracula,
+.kanuni-datagrid-enterprise.kanuni-datagrid-palette-dracula,
+.kanuni-datagrid-detached.kanuni-datagrid-palette-dracula {
+  --dg-bg: #ffffff;
+  --dg-surface: #ffffff;
+  --dg-surface-header: #f3eefb;
+  --dg-surface-hover: #ebe3f7;
+  --dg-surface-stripe: #faf7fe;
+  --dg-border: #e4dcf0;
+  --dg-border-strong: #c3b5da;
+  --dg-text: #282a36;                /* Dracula background, used as ink here */
+  --dg-text-muted: #5d5f73;
+  --dg-primary: #7449a8;             /* Purple #bd93f9, deepened for white text */
+  --dg-primary-soft: #ece2fa;
+  --dg-on-primary: #ffffff;          /* 6.87:1 */
+  --dg-focus-ring: #7449a8;
+  --dg-selected-bg: #ece2fa;
+  --dg-group-bg: #f1ebfa;
+  --dg-footer-bg: #f3eefb;
+  --dg-scrollbar-thumb: #c3b5da;
+  --dg-danger: #b03a5b;              /* Pink #ff79c6 / Red #ff5555 family */
+  --dg-danger-text: #98304d;
+  --dg-on-danger: #ffffff;
+  --dg-warning: #8a5a1c;
+}
+
+.kanuni-datagrid-root.kanuni-datagrid-palette-dracula.kanuni-datagrid-dark,
+.kanuni-datagrid-enterprise.kanuni-datagrid-palette-dracula.kanuni-datagrid-dark,
+.kanuni-datagrid-detached.kanuni-datagrid-palette-dracula.kanuni-datagrid-dark {
+  --dg-bg: #282a36;                  /* Background */
+  --dg-surface: #282a36;
+  --dg-surface-header: #343746;      /* Current Line, lightened */
+  --dg-surface-hover: #44475a;       /* Current Line */
+  --dg-surface-stripe: #2d2f3d;
+  --dg-border: #44475a;
+  --dg-border-strong: #565a72;
+  --dg-text: #f8f8f2;                /* Foreground */
+  --dg-text-muted: #a7abc4;          /* Comment #6272a4, lifted to clear AA */
+  --dg-primary: #bd93f9;             /* Purple */
+  --dg-primary-soft: #453860;
+  --dg-on-primary: #241638;          /* 8.66:1 */
+  --dg-focus-ring: #ff79c6;          /* Pink */
+  --dg-selected-bg: #453860;
+  --dg-group-bg: #32354a;
+  --dg-footer-bg: #343746;
+  --dg-scrollbar-thumb: #565a72;
+  --dg-danger: #ff5555;              /* Red */
+  --dg-danger-text: #ff8a8a;
+  --dg-on-danger: #3b0000;
+  --dg-warning: #f1fa8c;             /* Yellow */
+  --dg-overlay: rgba(18, 19, 26, 0.74);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   SOLARIZED — the fixed-lightness classic
+   ═══════════════════════════════════════════════════════════
+   The one scheme designed as a matched light/dark PAIR, which is exactly what
+   a grid with a `dark` switch wants: the accents are identical in both and only
+   the eight base tones flip. */
+.kanuni-datagrid-root.kanuni-datagrid-palette-solarized,
+.kanuni-datagrid-enterprise.kanuni-datagrid-palette-solarized,
+.kanuni-datagrid-detached.kanuni-datagrid-palette-solarized {
+  --dg-bg: #fdf6e3;                  /* base3 */
+  --dg-surface: #fdf6e3;
+  --dg-surface-header: #eee8d5;      /* base2 */
+  --dg-surface-hover: #e7e0cc;
+  --dg-surface-stripe: #f7f0dd;
+  --dg-border: #ddd6c1;
+  --dg-border-strong: #bdb7a4;
+  --dg-text: #073642;                /* base02 */
+  --dg-text-muted: #56707a;          /* base00/base01 family */
+  --dg-primary: #1f6f8b;             /* blue #268bd2, deepened for white text */
+  --dg-primary-soft: #dbe7ea;
+  --dg-on-primary: #ffffff;          /* 5.90:1 */
+  --dg-focus-ring: #1f6f8b;
+  --dg-selected-bg: #dbe7ea;
+  --dg-group-bg: #eae3cf;
+  --dg-footer-bg: #eee8d5;
+  --dg-scrollbar-thumb: #bdb7a4;
+  --dg-danger: #b3372c;              /* red #dc322f, deepened */
+  --dg-danger-text: #9c2f25;
+  --dg-on-danger: #ffffff;
+  --dg-warning: #8a5a00;             /* yellow #b58900, deepened */
+}
+
+.kanuni-datagrid-root.kanuni-datagrid-palette-solarized.kanuni-datagrid-dark,
+.kanuni-datagrid-enterprise.kanuni-datagrid-palette-solarized.kanuni-datagrid-dark,
+.kanuni-datagrid-detached.kanuni-datagrid-palette-solarized.kanuni-datagrid-dark {
+  --dg-bg: #002b36;                  /* base03 */
+  --dg-surface: #002b36;
+  --dg-surface-header: #073642;      /* base02 */
+  --dg-surface-hover: #0a4351;
+  --dg-surface-stripe: #01313d;
+  --dg-border: #0d4a58;
+  --dg-border-strong: #23606c;
+  --dg-text: #eee8d5;                /* base2 */
+  --dg-text-muted: #a4b3b6;
+  --dg-primary: #4fa3d9;             /* blue, lifted for a dark ground */
+  --dg-primary-soft: #0d4457;
+  --dg-on-primary: #00212b;          /* 7.62:1 */
+  --dg-focus-ring: #6fc3df;
+  --dg-selected-bg: #0d4457;
+  --dg-group-bg: #05323d;
+  --dg-footer-bg: #073642;
+  --dg-scrollbar-thumb: #23606c;
+  --dg-danger: #e07a72;
+  --dg-danger-text: #f0a49e;
+  --dg-on-danger: #34110d;
+  --dg-warning: #d5a63b;
+  --dg-overlay: rgba(0, 20, 26, 0.74);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   GRUVBOX — warm retro, high contrast
+   ═══════════════════════════════════════════════════════════
+   The warmest of the six, and the only one whose light mode is genuinely warm
+   rather than a cooled-off white. Both modes are the scheme's own. */
+.kanuni-datagrid-root.kanuni-datagrid-palette-gruvbox,
+.kanuni-datagrid-enterprise.kanuni-datagrid-palette-gruvbox,
+.kanuni-datagrid-detached.kanuni-datagrid-palette-gruvbox {
+  --dg-bg: #fbf1c7;                  /* light bg0 */
+  --dg-surface: #fbf1c7;
+  --dg-surface-header: #ebdbb2;      /* bg1 */
+  --dg-surface-hover: #e3d3a8;
+  --dg-surface-stripe: #f5ecc0;
+  --dg-border: #ddcfa6;
+  --dg-border-strong: #bdae8b;
+  --dg-text: #3c3836;                /* fg0 */
+  --dg-text-muted: #665c54;          /* fg3 */
+  --dg-primary: #076678;             /* light blue */
+  --dg-primary-soft: #d9e5e6;
+  --dg-on-primary: #ffffff;          /* 7.71:1 */
+  --dg-focus-ring: #076678;
+  --dg-selected-bg: #d9e5e6;
+  --dg-group-bg: #e8d9b0;
+  --dg-footer-bg: #ebdbb2;
+  --dg-scrollbar-thumb: #bdae8b;
+  --dg-danger: #9d0006;              /* light red */
+  --dg-danger-text: #9d0006;
+  --dg-on-danger: #ffffff;
+  /* The scheme's light yellow (#b57614) is 3.33:1 on this cream ground — the
+     warmth that makes Gruvbox work is also what makes its yellow weak here.
+     Same hue, two steps down, 4.72:1. */
+  --dg-warning: #8f5c0a;
+}
+
+.kanuni-datagrid-root.kanuni-datagrid-palette-gruvbox.kanuni-datagrid-dark,
+.kanuni-datagrid-enterprise.kanuni-datagrid-palette-gruvbox.kanuni-datagrid-dark,
+.kanuni-datagrid-detached.kanuni-datagrid-palette-gruvbox.kanuni-datagrid-dark {
+  --dg-bg: #282828;                  /* dark bg0 */
+  --dg-surface: #282828;
+  --dg-surface-header: #3c3836;      /* bg1 */
+  --dg-surface-hover: #504945;       /* bg2 */
+  --dg-surface-stripe: #2f2c2b;
+  --dg-border: #504945;
+  --dg-border-strong: #665c54;       /* bg3 */
+  --dg-text: #fbf1c7;                /* fg0 */
+  --dg-text-muted: #bdae93;          /* fg3 */
+  --dg-primary: #83a598;             /* dark blue */
+  --dg-primary-soft: #3b4a45;
+  --dg-on-primary: #16211d;          /* 8.24:1 */
+  --dg-focus-ring: #8ec07c;          /* aqua */
+  --dg-selected-bg: #3b4a45;
+  --dg-group-bg: #37332f;
+  --dg-footer-bg: #3c3836;
+  --dg-scrollbar-thumb: #665c54;
+  --dg-danger: #fb4934;              /* dark red */
+  --dg-danger-text: #fb8b7f;
+  --dg-on-danger: #2c0500;
+  --dg-warning: #fabd2f;             /* dark yellow */
+  --dg-overlay: rgba(20, 20, 20, 0.74);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   CATPPUCCIN — pastel, low contrast between surfaces
+   ═══════════════════════════════════════════════════════════
+   Latte for light, Mocha for dark. The softest surfaces of the six: the
+   stripe, hover and header sit very close together, which suits a grid the
+   user reads for a long stretch. */
+.kanuni-datagrid-root.kanuni-datagrid-palette-catppuccin,
+.kanuni-datagrid-enterprise.kanuni-datagrid-palette-catppuccin,
+.kanuni-datagrid-detached.kanuni-datagrid-palette-catppuccin {
+  --dg-bg: #eff1f5;                  /* Latte base */
+  --dg-surface: #eff1f5;
+  --dg-surface-header: #e6e9ef;      /* mantle */
+  --dg-surface-hover: #dce0e8;       /* crust */
+  --dg-surface-stripe: #eaecf1;
+  --dg-border: #d6dae4;
+  --dg-border-strong: #bcc0cc;       /* surface1 */
+  --dg-text: #4c4f69;                /* text */
+  --dg-text-muted: #5c5f77;          /* subtext1 */
+  --dg-primary: #1e66f5;             /* blue */
+  --dg-primary-soft: #dce4fb;
+  --dg-on-primary: #ffffff;          /* 4.88:1 */
+  --dg-focus-ring: #1e66f5;
+  --dg-selected-bg: #dce4fb;
+  --dg-group-bg: #e4e7ee;
+  --dg-footer-bg: #e6e9ef;
+  --dg-scrollbar-thumb: #bcc0cc;
+  --dg-danger: #c4304a;              /* red #d20f39, deepened for white text */
+  --dg-danger-text: #b02540;
+  --dg-on-danger: #ffffff;
+  --dg-warning: #995f14;             /* peach, deepened */
+}
+
+.kanuni-datagrid-root.kanuni-datagrid-palette-catppuccin.kanuni-datagrid-dark,
+.kanuni-datagrid-enterprise.kanuni-datagrid-palette-catppuccin.kanuni-datagrid-dark,
+.kanuni-datagrid-detached.kanuni-datagrid-palette-catppuccin.kanuni-datagrid-dark {
+  --dg-bg: #1e1e2e;                  /* Mocha base */
+  --dg-surface: #1e1e2e;
+  --dg-surface-header: #313244;      /* surface0 */
+  --dg-surface-hover: #45475a;       /* surface1 */
+  --dg-surface-stripe: #242436;
+  --dg-border: #45475a;
+  --dg-border-strong: #585b70;       /* surface2 */
+  --dg-text: #cdd6f4;                /* text */
+  --dg-text-muted: #a6adc8;          /* subtext0 */
+  --dg-primary: #89b4fa;             /* blue */
+  --dg-primary-soft: #33405e;
+  --dg-on-primary: #11182b;          /* 8.83:1 */
+  --dg-focus-ring: #b4befe;          /* lavender */
+  --dg-selected-bg: #33405e;
+  --dg-group-bg: #2a2b3c;
+  --dg-footer-bg: #313244;
+  --dg-scrollbar-thumb: #585b70;
+  --dg-danger: #f38ba8;              /* red */
+  --dg-danger-text: #f5a3ba;
+  --dg-on-danger: #3d0b1a;
+  --dg-warning: #fab387;             /* peach */
+  --dg-overlay: rgba(14, 14, 22, 0.74);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   TOKYO NIGHT — deep navy with violet and cyan
+   ═══════════════════════════════════════════════════════════
+   The most saturated of the dark six, and the one whose accent reads as a
+   colour rather than a tint. Tokyo Night Day for the light mode. */
+.kanuni-datagrid-root.kanuni-datagrid-palette-tokyo-night,
+.kanuni-datagrid-enterprise.kanuni-datagrid-palette-tokyo-night,
+.kanuni-datagrid-detached.kanuni-datagrid-palette-tokyo-night {
+  --dg-bg: #e1e2e7;                  /* Day base */
+  --dg-surface: #e1e2e7;
+  --dg-surface-header: #d4d6de;
+  --dg-surface-hover: #c9cbd6;
+  --dg-surface-stripe: #dcdde3;
+  --dg-border: #c3c6d1;
+  --dg-border-strong: #a3a7b8;
+  /* Tokyo Night Day's #3760bf is its KEYWORD blue, not its body ink — using it
+     as the text colour measured 4.03:1 on the header and 4.26:1 on a selected
+     row. The scheme's actual foreground is this darker slate-blue, which keeps
+     the character and clears every surface. */
+  --dg-text: #343b58;
+  --dg-text-muted: #4c5478;
+  --dg-primary: #2e5cb8;
+  --dg-primary-soft: #d2dcf3;
+  --dg-on-primary: #ffffff;          /* 5.64:1 */
+  --dg-focus-ring: #2e5cb8;
+  --dg-selected-bg: #d2dcf3;
+  --dg-group-bg: #d8dae2;
+  --dg-footer-bg: #d4d6de;
+  --dg-scrollbar-thumb: #a3a7b8;
+  --dg-danger: #b1364a;
+  --dg-danger-text: #9d2c3f;
+  --dg-on-danger: #ffffff;
+  --dg-warning: #8a5a12;
+}
+
+.kanuni-datagrid-root.kanuni-datagrid-palette-tokyo-night.kanuni-datagrid-dark,
+.kanuni-datagrid-enterprise.kanuni-datagrid-palette-tokyo-night.kanuni-datagrid-dark,
+.kanuni-datagrid-detached.kanuni-datagrid-palette-tokyo-night.kanuni-datagrid-dark {
+  --dg-bg: #1a1b26;                  /* Night bg */
+  --dg-surface: #1a1b26;
+  --dg-surface-header: #24283b;      /* Storm bg */
+  --dg-surface-hover: #2f334d;
+  --dg-surface-stripe: #1f2030;
+  --dg-border: #2f334d;
+  --dg-border-strong: #414868;
+  --dg-text: #c0caf5;                /* fg */
+  --dg-text-muted: #9aa5ce;
+  --dg-primary: #7aa2f7;             /* blue */
+  --dg-primary-soft: #2b3a5e;
+  --dg-on-primary: #0d1220;          /* 8.05:1 */
+  --dg-focus-ring: #7dcfff;          /* cyan */
+  --dg-selected-bg: #2b3a5e;
+  --dg-group-bg: #212335;
+  --dg-footer-bg: #24283b;
+  --dg-scrollbar-thumb: #414868;
+  --dg-danger: #f7768e;              /* red */
+  --dg-danger-text: #f993a6;
+  --dg-on-danger: #3a0713;
+  --dg-warning: #e0af68;             /* yellow */
+  --dg-overlay: rgba(10, 11, 18, 0.76);
+}