/* ============================================================
   SolGrid — Global CSS (sol- prefixed, no scoping needed)
   Uses CSS Grid layout for flexible columns and frozen support.
   All classes prefixed with sol-grid- to avoid conflicts.
   ============================================================ */

/* ─────────────────────────────────────────────────────────────────
   UNLAYERED coexistence guards — host apps ship unlayered global
   resets (button {}, a {}) which beat ANY @layer rule per the CSS
   spec. These minimal re-assertions of the load-bearing button
   chrome (compound specificity button.sol-*) guarantee correct
   render regardless of what loads alongside SolsticioUI. Everything
   else in this file lives in @layer solsticio-components below.
   ───────────────────────────────────────────────────────────────── */
button.sol-grid-toolbar-btn,
button.sol-grid-pager-btn,
button.sol-grid-filter-menu-btn {
    border: 1px solid var(--sol-border, #E2E5EC);
    border-radius: var(--sol-radius-action);
    background: var(--sol-bg-surface, #FFFFFF);
    color: var(--sol-text-primary, #111827);
    font-family: inherit;
    cursor: pointer;
}

button.sol-grid-filter-menu-btn--apply {
    background: var(--sol-accent, #4F7FFF);
    color: var(--sol-on-accent);
}

@layer solsticio-components {


/* === Grid Container === */
.sol-grid {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--sol-card-border);
    border-radius: var(--sol-radius-card);
    box-shadow: var(--sol-elev-card);
    overflow: hidden;
    font-family: var(--sol-font-family, system-ui, sans-serif);
    font-size: var(--sol-font-size-base, 0.8125rem);
    color: var(--sol-text-primary, #111827);
    background: var(--sol-bg-surface, #FFFFFF);
    /* A flexible column's share of the rows' minimum width: its cells' inline padding (and border). */
    --sol-grid-flex-floor: calc(2 * var(--sol-space-3, 0.75rem));
    /* The grid's layers (sticky header, sticky and pinned group headers, frozen cells) stack among
       themselves, not with the page: a page's fixed app bar stays above them. */
    isolation: isolate;
}

/* While a popup is open the grid stacks with the page as before, so the popup is not held inside
   the grid's layer: its own popups, and a dialog, menu or list box a template opens. */
.sol-grid:has(.sol-grid-filter-menu, .sol-grid-popup-overlay, .sol-grid-context-menu,
              .sol-grid-column-chooser-panel, .sol-grid-presets-panel,
              [role="dialog"], [role="alertdialog"], [role="menu"], [role="listbox"]) {
    isolation: auto;
}

.sol-grid--bordered {
    --sol-grid-flex-floor: calc(2 * var(--sol-space-3, 0.75rem) + 1px);
}

/* === Row layout via CSS Grid === */
.sol-grid-row {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: var(--sol-grid-columns, 1fr);
    /* stretch (not center): cells fill the row height so divider lines stay aligned with multi-line cells */
    align-items: stretch;
    min-height: var(--sol-row-height, 36px);
}

/* Rows are at least as wide as their tracks, so scrolled sideways they paint to the last column;
   so are a detail row and the empty and loading states, which would otherwise scroll away. Not the
   aggregate row: it scrolls its own overflow and paints its own box. */
.sol-grid-row:not(.sol-grid-footer-row),
.sol-grid-group-header,
.sol-grid-group-footer,
.sol-grid-pinned-groups,
.sol-grid-detail-row,
.sol-grid-empty,
.sol-grid-loading {
    box-sizing: border-box;
    min-width: var(--sol-grid-row-min-width, 0px);
}

/* === Density variants === */
.sol-grid--compact .sol-grid-row {
    min-height: var(--sol-row-height-compact, 28px);
}
.sol-grid--relaxed .sol-grid-row {
    min-height: var(--sol-row-height-relaxed, 44px);
}

/* === Header === */
.sol-grid-header {
    position: sticky;
    top: 0;
    z-index: var(--sol-z-sticky, 100);
    /* Reserve the same scrollbar gutter as the body so column tracks stay aligned
       in browsers with classic (space-taking) scrollbars. Overlay scrollbars
       reserve 0 on both, so alignment holds everywhere. Only on a grid whose body can
       actually scroll: on one that pages and grows, the gutter is dead space. */
    overflow: hidden;
    /* A clipping flex item may shrink to nothing: in a grid of fixed Height whose toolbar wraps
       on a phone, the body gives up height, never the headings. */
    flex-shrink: 0;
}

.sol-grid--scrollable .sol-grid-header {
    scrollbar-gutter: stable;
}

/* Column captions speak the data voice: mono caps (Material stays sans). */
.sol-grid-header-row {
    background: var(--sol-bg-sunken);
    border-bottom: 1px solid var(--sol-border, #E2E5EC);
    font-family: var(--sol-font-family-mono);
    font-weight: var(--sol-font-weight-semibold, 600);
    font-size: var(--sol-font-size-xs, 0.625rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sol-text-tertiary);
}

[data-sol-skin="material"] .sol-grid-header-row {
    font-family: var(--sol-font-family);
    font-weight: var(--sol-font-weight-medium, 500);
    font-size: var(--sol-font-size-sm, 0.75rem);
}

/* === Cells === */
.sol-grid-cell {
    padding: var(--sol-space-2, 0.5rem) var(--sol-space-3, 0.75rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sol-grid-cell--header {
    user-select: none;
    display: flex;
    align-items: center;
    gap: var(--sol-space-1, 0.25rem);
    position: relative;   /* anchors the resize handle; a frozen header is sticky instead, which anchors it too */
}

.sol-grid-cell--sortable {
    cursor: pointer;
}

.sol-grid-cell--sortable:hover {
    background: var(--sol-accent-muted, rgba(79, 127, 255, 0.1));
    --sol-grid-row-tint: var(--sol-accent-muted, rgba(79, 127, 255, 0.1));
}

.sol-grid-cell--center {
    text-align: center;
    justify-content: center;
}

/* A number column keeps its digits in columns whatever its alignment. */
.sol-grid-cell--numeric {
    font-variant-numeric: tabular-nums;
}

/* Numeric columns: mono + tabular-nums, the suite's data-figures mark. */
.sol-grid-cell--right {
    text-align: end;
    justify-content: flex-end;
    font-family: var(--sol-font-family-mono);
    font-variant-numeric: tabular-nums;
}

.sol-grid-header-row .sol-grid-cell--right {
    font-family: inherit;
}

.sol-grid-cell--checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* === Frozen columns — the edge and its offset are bound inline, as logical insets ===
   A pinned cell covers what scrolls under it, so it paints its row's tint over an opaque
   base: hover, selection and stripes reach the pinned cells like the rest of the row.
   Layers, top down: the column header (--sol-z-sticky), the sticky and pinned group headers
   (one below), frozen cells (two below), so a group header covers the frozen cells it passes. */
.sol-grid-row > .sol-grid-cell.sol-grid-cell--frozen-left,
.sol-grid-row > .sol-grid-cell.sol-grid-cell--frozen-right {
    position: sticky;
    z-index: calc(var(--sol-z-sticky) - 2);
    background: linear-gradient(var(--sol-grid-row-tint, transparent), var(--sol-grid-row-tint, transparent))
        var(--sol-grid-row-base, var(--sol-bg-surface));
}

.sol-grid-header-row > .sol-grid-cell--frozen-left,
.sol-grid-header-row > .sol-grid-cell--frozen-right,
.sol-grid-band-row > .sol-grid-cell--frozen-left {
    z-index: var(--sol-z-sticky-header);
}

.sol-grid-header-row,
.sol-grid-footer-row {
    --sol-grid-row-base: var(--sol-bg-sunken);
}

.sol-grid-band-row {
    --sol-grid-row-base: var(--sol-bg-muted, #F0F2F5);
}

/* The label fills the cell, so a tap anywhere in it toggles the checkbox. */
.sol-grid-checkbox-hit {
    display: flex;
    flex: 1;
    align-self: stretch;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sol-grid-cell-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === Sort indicators === */
.sol-grid-sort-icon {
    font-size: 0.6rem;
    color: var(--sol-accent);
    flex-shrink: 0;
}

/* === Body === */
.sol-grid-body {
    overflow-y: auto;
    flex: 1;
    /* Flex items refuse to shrink below their content by default (min-height: auto);
       without this, a fixed grid Height is ignored and the body grows to its full
       content height — which breaks virtualization's scroll viewport. */
    min-height: 0;
}

.sol-grid--scrollable .sol-grid-body {
    scrollbar-gutter: stable;
}

/* Virtualized body: the spacer assumes one height for every row, so every row is pinned to it
   (--sol-grid-row-height = ItemSize, set by the body), whatever line height the page sets. A row
   being edited keeps its natural height, so its editor and a validation message still show. */
.sol-grid-body--virtual .sol-grid-row {
    height: var(--sol-grid-row-height, var(--sol-row-height, 36px));
    min-height: 0;
}

.sol-grid-body--virtual .sol-grid-row:is(.sol-grid-row--editing, :has(> .sol-grid-cell--editing)) {
    height: auto;
    min-height: var(--sol-grid-row-height, var(--sol-row-height, 36px));
}

/* Keyboard scroll-into-view keeps the focused row below the pinned group headers: the body
   reserves one header per pinned level (--sol-grid-pinned-levels, set by the body). */
.sol-grid-body {
    scroll-padding-block-start: calc(var(--sol-grid-pinned-levels, 0) * var(--sol-grid-group-header-h, var(--sol-row-height, 36px)));
}

.sol-grid-body--virtual {
    scroll-padding-block-start: calc(var(--sol-grid-pinned-levels, 0) * var(--sol-grid-row-height, var(--sol-row-height, 36px)));
}

.sol-grid-body--virtual .sol-grid-group-header,
.sol-grid-body--virtual .sol-grid-group-footer {
    box-sizing: border-box;
    height: var(--sol-grid-row-height, var(--sol-row-height, 36px));
    min-height: 0;
    overflow: hidden;
}

/* Sticky group headers (StickyGroupHeaders): each level pins below its ancestors, so the
   offset is the header height times the level — a fixed height keeps the arithmetic exact.
   A custom tall header template sets --sol-grid-group-header-h to match. */
.sol-grid-group-header--sticky {
    position: sticky;
    top: calc(var(--sol-grid-group-header-h, var(--sol-row-height, 36px)) * var(--sol-grid-group-level, 0));
    z-index: calc(var(--sol-z-sticky, 100) - 1);
    box-sizing: border-box;
    height: var(--sol-grid-group-header-h, var(--sol-row-height, 36px));
    min-height: 0;
    overflow: hidden;
}

.sol-grid-body--virtual .sol-grid-group-header--sticky {
    --sol-grid-group-header-h: var(--sol-grid-row-height, var(--sol-row-height, 36px));
}

/* Pinned group context (Virtualize + StickyGroupHeaders): the window recycles a header once its
   rows scroll past, so copies of the enclosing headers are drawn over the top of the body. The
   strip is zero-height, stuck to the top, on the sticky headers' layer and ahead of them in the
   flow: a real header arriving from below paints over it, as one sticky header covers the last. */
.sol-grid-pinned-groups {
    position: sticky;
    top: 0;
    z-index: calc(var(--sol-z-sticky, 100) - 1);
    box-sizing: border-box;
    height: 0;
}

/* Each copy keeps the sticky header's look and its level offset (`top`). */
.sol-grid-pinned-groups > .sol-grid-group-header--pinned {
    position: absolute;
    inset-inline: 0;
}

/* Row reorder handle (AllowRowReorder): a narrow leading cell, grab cursor, muted glyph. */
.sol-grid-row__handle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--sol-text-muted);
    cursor: grab;
    user-select: none;
}

.sol-grid-row__handle:active {
    cursor: grabbing;
}

.sol-grid-cell--handle {
    padding: 0;
}

/* === Row states === */
.sol-grid-row:not(.sol-grid-header-row) {
    border-bottom: 1px solid var(--sol-border-muted, #ECEEF2);
    transition: background-color var(--sol-transition-fast, 100ms ease);
}

/* === Striped rows (via parent modifier) ===
   Every second data row by its data index (--alt), not its place among the rendered siblings: a
   virtual window, a group row or the pinned strip ahead of the rows cannot flip it. The base the
   row states paint over: one class of weight and ahead of them, so hover, selection, an open
   detail and an edit win on a striped row too. */
:where(.sol-grid--striped) .sol-grid-row--alt {
    background: var(--sol-bg-muted, #F0F2F5);
    --sol-grid-row-tint: var(--sol-bg-muted, #F0F2F5);
}

.sol-grid-row--hoverable:hover {
    background: var(--sol-accent-muted, rgba(79, 127, 255, 0.1));
    --sol-grid-row-tint: var(--sol-accent-muted, rgba(79, 127, 255, 0.1));
}

.sol-grid-row--selected {
    background: var(--sol-accent-muted, rgba(79, 127, 255, 0.1));
    --sol-grid-row-tint: var(--sol-accent-muted, rgba(79, 127, 255, 0.1));
}

.sol-grid-row--selected:hover {
    background: var(--sol-accent-muted, rgba(79, 127, 255, 0.2));
    --sol-grid-row-tint: var(--sol-accent-muted, rgba(79, 127, 255, 0.2));
}

.sol-grid-row--expanded {
    background: var(--sol-bg-muted, #F0F2F5);
    --sol-grid-row-tint: var(--sol-bg-muted, #F0F2F5);
}

.sol-grid-row--focused {
    outline: none;
    box-shadow: inset var(--sol-focus-shadow);
}

.sol-grid-cell--selected {
    background: var(--sol-accent-muted, rgba(79, 127, 255, 0.12));
    --sol-grid-row-tint: var(--sol-accent-muted, rgba(79, 127, 255, 0.12));
}

/* The focused cell's mark is light on its corners (the Light section at the end). */

/* === Batch editing change indicators === */
.sol-grid-row--modified {
    border-inline-start: 3px solid var(--sol-warning, #E8A317);
}

.sol-grid-row--added {
    border-inline-start: 3px solid var(--sol-success, #22C55E);
}

.sol-grid-row--deleted {
    border-inline-start: 3px solid var(--sol-danger, #EF4444);
    opacity: 0.5;
    text-decoration: line-through;
}

.sol-grid-cell--modified {
    background: var(--sol-warning-muted, rgba(232, 163, 23, 0.08));
    --sol-grid-row-tint: var(--sol-warning-muted, rgba(232, 163, 23, 0.08));
}

/* Screen reader only — visually hidden but accessible */
.sol-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Bordered variant — adds cell borders */
.sol-grid--bordered .sol-grid-cell {
    border-inline-end: 1px solid var(--sol-border, #E2E5EC);
}
.sol-grid--bordered .sol-grid-cell:last-child {
    border-inline-end: none;
}
.sol-grid--bordered .sol-grid-row {
    border-bottom: 1px solid var(--sol-border, #E2E5EC);
}

/* === Footer row (aggregates) === */
.sol-grid-footer-row {
    background: var(--sol-bg-sunken);
    border-top: 2px solid var(--sol-border-strong);
    font-weight: var(--sol-font-weight-semibold, 600);
    font-size: var(--sol-font-size-sm, 0.75rem);
    font-variant-numeric: tabular-nums;
}

.sol-grid-cell--footer {
    padding: var(--sol-space-2, 0.5rem) var(--sol-space-3, 0.75rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sol-grid-aggregate-label {
    color: var(--sol-text-muted, #6B7280);
    margin-inline-end: var(--sol-space-1, 0.25rem);
}

/* === Column Resize === */
.sol-grid-resize-handle {
    position: absolute;
    top: 0;
    inset-inline-end: -2px;
    bottom: 0;
    width: 5px;
    cursor: col-resize;
    z-index: 10;
}

.sol-grid-resize-handle:hover,
.sol-grid--resizing .sol-grid-resize-handle {
    background: var(--sol-accent, #4F7FFF);
    opacity: 0.4;
}

/* === Column Reorder === */
.sol-grid-cell--dragging {
    opacity: 0.5;
}

.sol-grid-cell--drag-over {
    border-inline-start: 2px solid var(--sol-accent, #4F7FFF);
}

/* === Editing === */
.sol-grid-row--editing {
    background: var(--sol-accent-muted, rgba(79, 127, 255, 0.05));
    --sol-grid-row-tint: var(--sol-accent-muted, rgba(79, 127, 255, 0.05));
}

.sol-grid-cell--editing {
    padding: var(--sol-space-1, 0.25rem);
}

.sol-grid-edit-input {
    width: 100%;
    height: calc(var(--sol-control-h) - 4px);
    padding: 0 var(--sol-space-2, 0.5rem);
    border: 1px solid var(--sol-accent, #4F7FFF);
    border-radius: var(--sol-radius-control);
    background: var(--sol-bg-sunken);
    color: var(--sol-text-primary, #111827);
    font-family: inherit;
    font-size: max(1em, var(--sol-font-size-field-min, 0px));
    outline: none;
    box-sizing: border-box;
}

.sol-grid-edit-input:focus {
    box-shadow: var(--sol-focus-shadow);
}

.sol-grid-edit-input--invalid {
    border-color: var(--sol-danger, #EF4444);
}

.sol-grid-edit-input--invalid:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sol-danger) 25%, transparent);
}

.sol-grid-edit-error {
    display: block;
    font-size: 0.65rem;
    color: var(--sol-danger, #EF4444);
    margin-top: 2px;
    line-height: 1;
}

/* === Group rows === */
.sol-grid-group-header {
    display: flex;
    align-items: center;
    min-height: var(--sol-row-height, 36px);
    background: var(--sol-bg-sunken);
    border-bottom: 1px solid var(--sol-border, #E2E5EC);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--sol-transition-fast, 100ms ease);
}

.sol-grid-group-header:hover {
    background: var(--sol-accent-muted, rgba(79, 127, 255, 0.08));
}

.sol-grid-group-header--expanded {
    border-bottom-color: var(--sol-accent, #4F7FFF);
}

.sol-grid-group-header-content {
    display: flex;
    align-items: center;
    gap: var(--sol-space-2, 0.5rem);
    padding: var(--sol-space-2, 0.5rem) var(--sol-space-3, 0.75rem);
    font-weight: var(--sol-font-weight-semibold, 600);
    font-size: var(--sol-font-size-sm, 0.75rem);
}

.sol-grid-group-toggle {
    flex-shrink: 0;
    width: 16px;
    text-align: center;
    font-size: 0.7rem;
    color: var(--sol-text-muted, #6B7280);
}

.sol-grid-group-title {
    color: var(--sol-text-muted, #6B7280);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sol-grid-group-key {
    color: var(--sol-text-primary, #111827);
}

.sol-grid-group-count {
    color: var(--sol-text-tertiary);
    font-weight: var(--sol-font-weight-normal, 400);
    font-family: var(--sol-font-family-mono);
    font-variant-numeric: tabular-nums;
}

.sol-grid-group-footer {
    display: flex;
    align-items: center;
    min-height: var(--sol-row-height, 36px);
    background: var(--sol-bg-sunken);
    border-bottom: 1px solid var(--sol-border-muted, #ECEEF2);
    font-size: var(--sol-font-size-sm, 0.75rem);
    color: var(--sol-text-muted, #6B7280);
    font-variant-numeric: tabular-nums;
    padding: var(--sol-space-1, 0.25rem) var(--sol-space-3, 0.75rem);
}

/* === Detail row === */
.sol-grid-detail-row {
    border-bottom: 1px solid var(--sol-border, #E2E5EC);
    background: var(--sol-bg-muted, #F0F2F5);
}

.sol-grid-detail-content {
    padding: var(--sol-space-4, 1rem);
}

/* === Empty and Loading states === */
.sol-grid-empty,
.sol-grid-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sol-space-10, 2.5rem) var(--sol-space-4, 1rem);
    color: var(--sol-text-muted, #6B7280);
}

/* Widened with the rows, the message stays on screen while the body scrolls sideways. */
.sol-grid-empty > .sol-grid-empty-text,
.sol-grid-loading > .sol-grid-loading-text {
    position: sticky;
    inset-inline: var(--sol-space-4, 1rem);
}

/* === Checkbox === */
/* A drawn box over the native checkbox, which keeps the focus, the keys and the state assistive tech
   reads. Ticking draws the mark as a transition, so a row that scrolls in already selected shows it
   still; when select-all ticks, the mark runs down the selected rows one step apart. */
.sol-grid-check {
    display: inline-grid;
    place-items: center;
    flex: none;
}

.sol-grid-check > * {
    grid-area: 1 / 1;
}

.sol-grid-checkbox {
    appearance: none;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 2px solid var(--sol-border-strong);
    border-radius: var(--sol-radius-sm);
    background: var(--sol-bg-surface);
    cursor: pointer;
    transition: background var(--sol-transition-fast), border-color var(--sol-transition-fast);
}

.sol-grid-checkbox:hover {
    border-color: var(--sol-accent);
}

.sol-grid-checkbox:checked {
    background: var(--sol-accent);
    border-color: var(--sol-accent);
}

.sol-grid-checkbox:focus-visible {
    outline: none;
    box-shadow: var(--sol-focus-shadow);
}

.sol-grid-check__tick {
    width: 12px;
    height: 12px;
    pointer-events: none;
    color: var(--sol-on-accent);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0;
}

.sol-grid-checkbox:checked + .sol-grid-check__tick {
    stroke-dashoffset: 0;
    opacity: 1;
    transition: stroke-dashoffset var(--sol-motion-draw) var(--sol-ease-enter)
        calc(var(--sol-grid-check-step, 0) * var(--sol-motion-step));
}

.sol-grid:has(:is(.sol-grid-cell--header, .sol-grid-cardbar__select) .sol-grid-checkbox:checked) [aria-selected="true"] {
    --sol-grid-check-step: 5;
}
.sol-grid:has(:is(.sol-grid-cell--header, .sol-grid-cardbar__select) .sol-grid-checkbox:checked) [aria-selected="true"]:nth-child(1 of [aria-selected="true"]) { --sol-grid-check-step: 0; }
.sol-grid:has(:is(.sol-grid-cell--header, .sol-grid-cardbar__select) .sol-grid-checkbox:checked) [aria-selected="true"]:nth-child(2 of [aria-selected="true"]) { --sol-grid-check-step: 1; }
.sol-grid:has(:is(.sol-grid-cell--header, .sol-grid-cardbar__select) .sol-grid-checkbox:checked) [aria-selected="true"]:nth-child(3 of [aria-selected="true"]) { --sol-grid-check-step: 2; }
.sol-grid:has(:is(.sol-grid-cell--header, .sol-grid-cardbar__select) .sol-grid-checkbox:checked) [aria-selected="true"]:nth-child(4 of [aria-selected="true"]) { --sol-grid-check-step: 3; }
.sol-grid:has(:is(.sol-grid-cell--header, .sol-grid-cardbar__select) .sol-grid-checkbox:checked) [aria-selected="true"]:nth-child(5 of [aria-selected="true"]) { --sol-grid-check-step: 4; }

/* === Pager === */
.sol-grid-footer {
    border-top: 1px solid var(--sol-border, #E2E5EC);
    background: var(--sol-bg-sunken);
}

.sol-grid-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sol-space-2, 0.5rem) var(--sol-space-3, 0.75rem);
    font-size: var(--sol-font-size-sm, 0.75rem);
    color: var(--sol-text-tertiary);
    gap: var(--sol-space-3, 0.75rem);
}

.sol-grid-pager-info {
    white-space: nowrap;
    font-family: var(--sol-font-family-mono);
    font-variant-numeric: tabular-nums;
}

.sol-grid-pager-buttons {
    display: flex;
    align-items: center;
    gap: var(--sol-space-1, 0.25rem);
}

.sol-grid-pager-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--sol-control-h) - 4px);
    height: calc(var(--sol-control-h) - 4px);
    border: 1px solid var(--sol-border, #E2E5EC);
    border-radius: var(--sol-radius-action);
    background: var(--sol-bg-surface, #FFFFFF);
    color: var(--sol-text-primary, #111827);
    cursor: pointer;
    font-size: var(--sol-font-size-sm, 0.75rem);
    transition: all var(--sol-transition-fast, 100ms ease);
}

.sol-grid-pager-btn:hover:not(:disabled) {
    background: var(--sol-accent-muted, rgba(79, 127, 255, 0.1));
    border-color: var(--sol-accent, #4F7FFF);
}

.sol-grid-pager-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.sol-grid-pager-current {
    padding: 0 var(--sol-space-2, 0.5rem);
    font-weight: var(--sol-font-weight-medium, 500);
    font-family: var(--sol-font-family-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sol-grid-pager-size {
    box-sizing: border-box;
    height: calc(var(--sol-control-h) - 4px);
    padding: 0 var(--sol-space-2, 0.5rem);
    border: 1px solid var(--sol-border, #E2E5EC);
    border-radius: var(--sol-radius-control);
    background: var(--sol-bg-surface, #FFFFFF);
    color: var(--sol-text-primary, #111827);
    font-size: max(var(--sol-font-size-sm, 0.75rem), var(--sol-font-size-field-min, 0px));
    cursor: pointer;
}

/* ============================================================
   Responsive folding by the viewport: group 3 at <=1024px, 2 at <=768px, 1 at <=480px.
   A folded column keeps its cells and its track, both collapsed to zero; lengths that depend
   on it read var(--sol-grid-collapse-N, <length>). display: none moved later cells into its track.
   ============================================================ */
@media (max-width: 1024px) {
    .sol-grid {
        --sol-grid-collapse-3: 0px;
    }

    .sol-grid .sol-grid-cell[data-sol-responsive="3"] {
        visibility: hidden;
        min-width: 0;
        height: 0;
        padding: 0;
        border: 0;
    }
}

@media (max-width: 768px) {
    /* A flexible column without MinWidth keeps a readable floor: the grid scrolls sideways
       instead of squeezing it. Its track and the rows' minimum width read this. */
    .sol-grid {
        --sol-grid-collapse-2: 0px;
        --sol-grid-flex-min: 8rem;
    }

    .sol-grid .sol-grid-cell[data-sol-responsive="2"] {
        visibility: hidden;
        min-width: 0;
        height: 0;
        padding: 0;
        border: 0;
    }

    /* Stack pager on mobile */
    .sol-grid-pager {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .sol-grid {
        --sol-grid-collapse-1: 0px;
    }

    /* The buttons take a row of their own, wrapping rather than being clipped when the grid is
       narrower than five finger-sized buttons; the page info follows the size select on the
       next. Only the info moves, so the focus order stays the visual order. */
    .sol-grid-pager-buttons {
        flex: 1 1 100%;
        flex-wrap: wrap;
        justify-content: center;
    }

    .sol-grid-pager-info {
        order: 1;
    }

    .sol-grid .sol-grid-cell[data-sol-responsive="1"] {
        visibility: hidden;
        min-width: 0;
        height: 0;
        padding: 0;
        border: 0;
    }
}

/* Inside the header, which scrolls and reserves the gutter for it. */
.sol-grid-filter-row {
    background: var(--sol-bg-surface, #FFFFFF);
    border-bottom: 1px solid var(--sol-border, #E2E5EC);
}

/* The aggregates row is a sibling of the body: it clips its own overflow, which the body's
   scroll moves, and reserves the same gutter. */
.sol-grid-footer-row {
    overflow: hidden;
}

.sol-grid--scrollable .sol-grid-footer-row {
    scrollbar-gutter: stable;
}

.sol-grid-cell--filter {
    padding: var(--sol-space-1, 0.25rem) var(--sol-space-2, 0.5rem);
}

.sol-grid-filter-input {
    width: 100%;
    height: calc(var(--sol-control-h) - 4px);
    padding: 0 var(--sol-space-2, 0.5rem);
    border: 1px solid var(--sol-border, #E2E5EC);
    border-radius: var(--sol-radius-control);
    background: var(--sol-bg-sunken);
    color: var(--sol-text-primary, #111827);
    font-size: max(var(--sol-font-size-sm, 0.75rem), var(--sol-font-size-field-min, 0px));
    font-family: inherit;
    outline: none;
    transition: border-color var(--sol-transition-fast, 100ms ease);
    box-sizing: border-box;
}

.sol-grid-filter-input:focus {
    border-color: var(--sol-accent, #4F7FFF);
    box-shadow: var(--sol-focus-shadow);
}

.sol-grid-filter-input::placeholder {
    color: var(--sol-text-disabled, #D1D5DB);
}

.sol-grid-filter-input[type="date"] {
    cursor: pointer;
}

select.sol-grid-filter-input {
    cursor: pointer;
    appearance: auto;
}

.sol-grid-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sol-space-2, 0.5rem) var(--sol-space-3, 0.75rem);
    border-bottom: 1px solid var(--sol-border, #E2E5EC);
    background: var(--sol-bg-surface, #FFFFFF);
    gap: var(--sol-space-3, 0.75rem);
    flex-wrap: wrap;
}

.sol-grid-toolbar-left {
    display: flex;
    align-items: center;
    gap: var(--sol-space-3, 0.75rem);
    flex: 1 1 auto; /* sized by its content, so the groups wrap before they overlap */
    min-width: 0;
}

.sol-grid-toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--sol-space-2, 0.5rem);
    flex-wrap: wrap;
    min-width: 0;
}

.sol-grid-toolbar-title {
    font-size: var(--sol-font-size-md, 0.875rem);
    font-weight: var(--sol-font-weight-semibold, 600);
    color: var(--sol-text-primary, #111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Natural-language input (ShowNlSearch): the interpreter's explanation reads below the field. */
.sol-grid-toolbar-ask {
    display: flex;
    flex-direction: column;
    gap: var(--sol-space-1, 0.25rem);
    min-width: 16rem;
}

.sol-grid-toolbar-ask-status {
    display: flex;
    align-items: center;
    gap: var(--sol-space-2, 0.5rem);
    font-size: var(--sol-font-size-xs, 0.6875rem);
    color: var(--sol-text-muted);
    min-height: 1em;
}

.sol-grid-toolbar-search-input {
    box-sizing: border-box;
    height: calc(var(--sol-control-h) - 4px);
    padding: 0 var(--sol-space-2, 0.5rem);
    border: 1px solid var(--sol-border, #E2E5EC);
    border-radius: var(--sol-radius-control);
    background: var(--sol-bg-sunken);
    color: var(--sol-text-primary, #111827);
    font-size: max(var(--sol-font-size-sm, 0.75rem), var(--sol-font-size-field-min, 0px));
    font-family: inherit;
    outline: none;
    width: 160px;
    min-width: 160px;
    transition: border-color var(--sol-transition-fast, 100ms ease);
}

.sol-grid-toolbar-search-input:focus {
    border-color: var(--sol-accent, #4F7FFF);
    box-shadow: var(--sol-focus-shadow);
}

.sol-grid-toolbar-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: var(--sol-space-1, 0.25rem);
    height: calc(var(--sol-control-h) - 4px);
    padding: 0 var(--sol-space-2, 0.5rem);
    border: 1px solid var(--sol-border, #E2E5EC);
    border-radius: var(--sol-radius-action);
    background: var(--sol-bg-surface, #FFFFFF);
    color: var(--sol-text-primary, #111827);
    font-size: var(--sol-font-size-sm, 0.75rem);
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--sol-transition-fast, 100ms ease);
}

.sol-grid-toolbar-btn:hover {
    background: var(--sol-accent-muted, rgba(79, 127, 255, 0.1));
    border-color: var(--sol-accent, #4F7FFF);
}

[data-sol-skin="material"] .sol-grid-toolbar-btn {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: var(--sol-font-weight-medium, 500);
}

/* A phone: the groups wrap. The title keeps its width, up to the row, and the fields wrap
   under it instead of squeezing it; the ask field shares a row and shrinks with it. */
@media (max-width: 480px) {
    .sol-grid-toolbar-left,
    .sol-grid-toolbar-right {
        flex-wrap: wrap;
    }

    .sol-grid-toolbar-title {
        flex: 0 0 auto;
        max-width: 100%;
    }

    .sol-grid-toolbar-ask {
        flex: 1 1 12rem;
        min-width: 0;
    }
}

/* Column chooser dropdown */
.sol-grid-column-chooser {
    position: relative;
}

.sol-grid-column-chooser-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--sol-z-dropdown, 1000) - 1);
}

.sol-grid-column-chooser-panel {
    position: absolute;
    top: 100%;
    inset-inline-end: 0;
    margin-top: var(--sol-space-1, 0.25rem);
    padding: var(--sol-space-2, 0.5rem);
    background: var(--sol-bg-elevated, #FFFFFF);
    border: 1px solid var(--sol-border, #E2E5EC);
    border-radius: var(--sol-radius-menu);
    box-shadow: var(--sol-elev-overlay);
    z-index: var(--sol-z-dropdown, 1000);
    min-width: 180px;
    max-height: 300px;
    overflow-y: auto;
}

.sol-grid-column-chooser-item {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--sol-space-2, 0.5rem);
    padding: var(--sol-space-1, 0.25rem) var(--sol-space-2, 0.5rem);
    font-size: var(--sol-font-size-sm, 0.75rem);
    cursor: pointer;
    border-radius: var(--sol-radius-control);
    white-space: nowrap;
}

.sol-grid-column-chooser-item:hover {
    background: var(--sol-bg-muted, #F0F2F5);
}

/* Material skin — grid inputs adopt the filled-field anatomy. */
[data-sol-skin="material"] .sol-grid-filter-input,
[data-sol-skin="material"] .sol-grid-toolbar-search-input {
    border-color: transparent;
    border-radius: var(--sol-radius-control) var(--sol-radius-control) 0 0;
    background: var(--sol-bg-muted);
    box-shadow: inset 0 -1px 0 0 var(--sol-line);
}
[data-sol-skin="material"] .sol-grid-filter-input:focus,
[data-sol-skin="material"] .sol-grid-toolbar-search-input:focus {
    border-color: transparent;
    box-shadow: inset 0 -2px 0 0 var(--sol-accent);
}

/* === Filter menu icon in header === */
.sol-grid-filter-icon {
    background: none;
    border: none;
    color: var(--sol-text-muted, #6B7280);
    cursor: pointer;
    padding: 0 2px;
    font-size: 0.6rem;
    line-height: 1;
    opacity: 0.4;
    transition: opacity var(--sol-transition-fast, 100ms ease);
    margin-inline-start: auto;
}

.sol-grid-cell--header:hover .sol-grid-filter-icon {
    opacity: 0.8;
}

.sol-grid-filter-icon--active {
    opacity: 1;
    color: var(--sol-accent, #4F7FFF);
}

/* === Filter menu popup === */
.sol-grid-filter-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9998;
}

.sol-grid-filter-menu {
    position: absolute;
    inset-inline-end: 0;
    top: 100%;
    z-index: 9999;
    background: var(--sol-bg-elevated);
    border: 1px solid var(--sol-border, #E2E5EC);
    border-radius: var(--sol-radius-menu);
    box-shadow: var(--sol-elev-overlay);
    min-width: 260px;
    max-width: 320px;
    animation: sol-enter-pour var(--sol-motion-enter) var(--sol-ease-enter) backwards;
}

.sol-grid-filter-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sol-space-2, 0.5rem) var(--sol-space-3, 0.75rem);
    border-bottom: 1px solid var(--sol-border, #E2E5EC);
}

.sol-grid-filter-menu-title {
    font-size: var(--sol-font-size-sm, 0.75rem);
    font-weight: var(--sol-font-weight-semibold, 600);
    color: var(--sol-text-primary);
}

.sol-grid-filter-menu-close {
    box-sizing: border-box;
    background: none;
    border: none;
    font-size: 1rem;
    color: var(--sol-text-muted, #6B7280);
    cursor: pointer;
    line-height: 1;
}

.sol-grid-filter-menu-body {
    padding: var(--sol-space-3, 0.75rem);
    display: flex;
    flex-direction: column;
    gap: var(--sol-space-3, 0.75rem);
}

.sol-grid-filter-menu-label {
    display: block;
    font-size: var(--sol-font-size-xs, 0.625rem);
    font-weight: var(--sol-font-weight-medium, 500);
    color: var(--sol-text-muted, #6B7280);
    margin-bottom: 2px;
}

.sol-grid-filter-menu-select,
.sol-grid-filter-menu-input {
    width: 100%;
    padding: var(--sol-space-1, 0.25rem) var(--sol-space-2, 0.5rem);
    border: 1px solid var(--sol-border, #E2E5EC);
    border-radius: var(--sol-radius-control);
    background: var(--sol-bg-sunken);
    color: var(--sol-text-primary);
    font-size: max(var(--sol-font-size-sm, 0.75rem), var(--sol-font-size-field-min, 0px));
    font-family: inherit;
    box-sizing: border-box;
}

.sol-grid-filter-menu-select:focus,
.sol-grid-filter-menu-input:focus {
    outline: none;
    border-color: var(--sol-accent, #4F7FFF);
    box-shadow: var(--sol-focus-shadow);
}

.sol-grid-filter-menu-unique-list {
    max-height: 160px;
    overflow-y: auto;
    border: 1px solid var(--sol-border, #E2E5EC);
    border-radius: var(--sol-radius-control);
    padding: var(--sol-space-1, 0.25rem);
}

.sol-grid-filter-menu-unique-item {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--sol-space-1, 0.25rem);
    padding: 2px var(--sol-space-1, 0.25rem);
    font-size: var(--sol-font-size-xs, 0.625rem);
    cursor: pointer;
    border-radius: 2px;
}

.sol-grid-filter-menu-unique-item:hover {
    background: var(--sol-bg-muted, #F0F2F5);
}

.sol-grid-filter-menu-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--sol-space-2, 0.5rem);
    padding: var(--sol-space-2, 0.5rem) var(--sol-space-3, 0.75rem);
    border-top: 1px solid var(--sol-border, #E2E5EC);
}

.sol-grid-filter-menu-btn {
    box-sizing: border-box;
    padding: var(--sol-space-1, 0.25rem) var(--sol-space-3, 0.75rem);
    border-radius: var(--sol-radius-action);
    font-size: var(--sol-font-size-xs, 0.625rem);
    font-weight: var(--sol-font-weight-medium, 500);
    cursor: pointer;
    border: 1px solid transparent;
}

.sol-grid-filter-menu-btn--clear {
    background: var(--sol-bg-muted, #F0F2F5);
    color: var(--sol-text-primary);
    border-color: var(--sol-border, #E2E5EC);
}

.sol-grid-filter-menu-btn--apply {
    background: var(--sol-accent, #4F7FFF);
    color: var(--sol-on-accent);
}

.sol-grid-filter-menu-btn--apply:hover {
    background: var(--sol-accent-hover, #3D6BEB);
}

/* === View presets panel === */
.sol-grid-presets {
    position: relative;
}

.sol-grid-presets-panel {
    position: absolute;
    inset-inline-end: 0;
    top: 100%;
    z-index: 9999;
    background: var(--sol-bg-elevated);
    border: 1px solid var(--sol-border, #E2E5EC);
    border-radius: var(--sol-radius-menu);
    box-shadow: var(--sol-elev-overlay);
    min-width: 220px;
    padding: var(--sol-space-2, 0.5rem);
}

.sol-grid-presets-save {
    display: flex;
    gap: var(--sol-space-1, 0.25rem);
    margin-bottom: var(--sol-space-2, 0.5rem);
}

.sol-grid-presets-input {
    flex: 1;
    padding: var(--sol-space-1, 0.25rem) var(--sol-space-2, 0.5rem);
    border: 1px solid var(--sol-border, #E2E5EC);
    border-radius: var(--sol-radius-control);
    font-size: max(var(--sol-font-size-xs, 0.625rem), var(--sol-font-size-field-min, 0px));
    font-family: inherit;
}

.sol-grid-presets-save-btn {
    padding: var(--sol-space-1, 0.25rem) var(--sol-space-2, 0.5rem);
    background: var(--sol-accent, #4F7FFF);
    color: var(--sol-on-accent);
    border: none;
    border-radius: var(--sol-radius-action);
    font-size: var(--sol-font-size-xs, 0.625rem);
    cursor: pointer;
}

.sol-grid-presets-save-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sol-grid-presets-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sol-grid-presets-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sol-space-1, 0.25rem) var(--sol-space-2, 0.5rem);
    border-radius: var(--sol-radius-control);
}

.sol-grid-presets-item:hover {
    background: var(--sol-bg-muted, #F0F2F5);
}

.sol-grid-presets-item-name {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--sol-font-size-sm, 0.75rem);
    color: var(--sol-text-primary);
    text-align: start;
    flex: 1;
    padding: 0;
}

.sol-grid-presets-item-delete {
    background: none;
    border: none;
    color: var(--sol-text-muted, #6B7280);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0 2px;
}

.sol-grid-presets-item-delete:hover {
    color: var(--sol-danger, #EF4444);
}

.sol-grid-presets-empty {
    font-size: var(--sol-font-size-xs, 0.625rem);
    color: var(--sol-text-muted, #6B7280);
    text-align: center;
    padding: var(--sol-space-2, 0.5rem);
}

/* === Column bands (header groups) === */
.sol-grid-band-row {
    background: var(--sol-bg-muted, #F0F2F5);
    border-bottom: 1px solid var(--sol-border, #E2E5EC);
}

.sol-grid-cell--band {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--sol-row-height, 36px) * 0.75);
    font-size: var(--sol-font-size-xs, 0.625rem);
    font-weight: var(--sol-font-weight-semibold, 600);
    color: var(--sol-text-muted, #6B7280);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-inline-end: 1px solid var(--sol-border, #E2E5EC);
}

.sol-grid-cell--band:last-child {
    border-inline-end: none;
}

.sol-grid-band-text {
    padding: 0 var(--sol-space-2, 0.5rem);
}

/* === Context menu === */
.sol-grid-context-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
}

.sol-grid-context-menu {
    background: var(--sol-bg-elevated);
    border: 1px solid var(--sol-border, #E2E5EC);
    border-radius: var(--sol-radius-menu);
    box-shadow: var(--sol-elev-overlay);
    min-width: 160px;
    padding: var(--sol-space-1, 0.25rem) 0;
    animation: sol-enter-pour var(--sol-motion-enter) var(--sol-ease-enter) backwards;
}

/* === Infinite scroll sentinel === */
.sol-grid-scroll-sentinel {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    color: var(--sol-text-muted, #6B7280);
    font-size: var(--sol-font-size-sm, 0.75rem);
}

/* === Group panel (drag-to-group drop zone) === */
.sol-grid-group-panel {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sol-space-2, 0.5rem);
    min-height: 36px;
    padding: var(--sol-space-2, 0.5rem) var(--sol-space-3, 0.75rem);
    background: var(--sol-bg-sunken);
    border-bottom: 1px solid var(--sol-border, #E2E5EC);
    transition: background-color var(--sol-transition-fast, 100ms ease),
                border-color var(--sol-transition-fast, 100ms ease);
}

.sol-grid-group-panel--drag-over {
    background: var(--sol-accent-muted, rgba(79, 127, 255, 0.1));
    border-color: var(--sol-accent, #4F7FFF);
    border-style: dashed;
}

.sol-grid-group-panel-hint {
    color: var(--sol-text-muted, #6B7280);
    font-size: var(--sol-font-size-sm, 0.75rem);
    font-style: italic;
}

.sol-grid-group-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sol-space-1, 0.25rem);
    padding: 2px var(--sol-space-2, 0.5rem);
    background: var(--sol-bg-surface);
    border: 1px solid var(--sol-border, #E2E5EC);
    border-radius: var(--sol-radius-full, 9999px);
    font-size: var(--sol-font-size-xs, 0.625rem);
    font-weight: var(--sol-font-weight-medium, 500);
    cursor: grab;
    user-select: none;
}

.sol-grid-group-chip-text {
    color: var(--sol-text-primary);
}

.sol-grid-group-chip-remove {
    background: none;
    border: none;
    color: var(--sol-text-muted, #6B7280);
    cursor: pointer;
    padding: 0 2px;
    font-size: 0.8rem;
    line-height: 1;
    border-radius: 50%;
}

.sol-grid-group-chip-remove:hover {
    color: var(--sol-danger, #EF4444);
    background: var(--sol-danger-muted, rgba(239, 68, 68, 0.1));
}

.sol-grid-group-panel-clear {
    background: none;
    border: none;
    color: var(--sol-text-muted, #6B7280);
    font-size: var(--sol-font-size-xs, 0.625rem);
    cursor: pointer;
    text-decoration: underline;
    padding: 2px var(--sol-space-1, 0.25rem);
}

.sol-grid-group-panel-clear:hover {
    color: var(--sol-danger, #EF4444);
}

/* === Popup edit dialog === */
/* The popup editor follows the dialog contract: over the page, inside the viewport's gutter,
   full width on a phone. */
.sol-grid-popup-overlay {
    box-sizing: border-box;
    position: fixed;
    inset: 0;
    padding: var(--sol-space-4, 1rem);
    background: var(--sol-overlay, rgba(0, 0, 0, 0.45));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: sol-fade-in 150ms ease;
}

.sol-grid-popup {
    box-sizing: border-box;
    background: var(--sol-bg-elevated);
    border-radius: var(--sol-radius-card);
    box-shadow: var(--sol-elev-overlay);
    min-width: min(400px, calc(100vw - 2 * var(--sol-space-4, 1rem)));
    max-width: min(600px, calc(100vw - 2 * var(--sol-space-4, 1rem)));
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    animation: sol-scale-in 150ms ease;
    font-family: var(--sol-font-family);
}

.sol-grid-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sol-space-4, 1rem) var(--sol-space-5, 1.25rem);
    border-bottom: 1px solid var(--sol-border, #E2E5EC);
}

.sol-grid-popup-title {
    margin: 0;
    font-size: var(--sol-font-size-md, 0.875rem);
    font-weight: var(--sol-font-weight-semibold, 600);
    color: var(--sol-text-primary);
}

.sol-grid-popup-close {
    box-sizing: border-box;
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--sol-text-muted, #6B7280);
    cursor: pointer;
    padding: var(--sol-space-1, 0.25rem);
    border-radius: var(--sol-radius-action);
    line-height: 1;
}

.sol-grid-popup-close:hover {
    background: var(--sol-bg-muted, #F0F2F5);
    color: var(--sol-text-primary);
}

.sol-grid-popup-body {
    padding: var(--sol-space-5, 1.25rem);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--sol-space-4, 1rem);
}

.sol-grid-popup-field {
    display: flex;
    flex-direction: column;
    gap: var(--sol-space-1, 0.25rem);
}

.sol-grid-popup-label {
    font-size: var(--sol-font-size-sm, 0.75rem);
    font-weight: var(--sol-font-weight-medium, 500);
    color: var(--sol-text-muted, #6B7280);
}

.sol-grid-popup-input {
    width: 100%;
    padding: var(--sol-space-2, 0.5rem) var(--sol-space-3, 0.75rem);
    border: 1px solid var(--sol-border, #E2E5EC);
    border-radius: var(--sol-radius-control);
    font-size: max(var(--sol-font-size-sm, 0.75rem), var(--sol-font-size-field-min, 0px));
    font-family: inherit;
    color: var(--sol-text-primary, #111827);
    background: var(--sol-bg-sunken);
    transition: border-color var(--sol-transition-fast, 100ms ease),
                box-shadow var(--sol-transition-fast, 100ms ease);
    box-sizing: border-box;
}

.sol-grid-popup-input:focus {
    outline: none;
    border-color: var(--sol-accent, #4F7FFF);
    box-shadow: var(--sol-focus-shadow);
}

.sol-grid-popup-input--invalid {
    border-color: var(--sol-danger, #EF4444);
}

.sol-grid-popup-input--invalid:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sol-danger) 25%, transparent);
}

.sol-grid-popup-error {
    font-size: 0.65rem;
    color: var(--sol-danger, #EF4444);
    line-height: 1.2;
}

.sol-grid-popup-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--sol-space-2, 0.5rem);
    padding: var(--sol-space-3, 0.75rem) var(--sol-space-5, 1.25rem);
    border-top: 1px solid var(--sol-border, #E2E5EC);
}

.sol-grid-popup-btn {
    box-sizing: border-box;
    padding: var(--sol-space-2, 0.5rem) var(--sol-space-4, 1rem);
    border-radius: var(--sol-radius-action);
    font-size: var(--sol-font-size-sm, 0.75rem);
    font-weight: var(--sol-font-weight-medium, 500);
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color var(--sol-transition-fast, 100ms ease);
}

[data-sol-skin="material"] .sol-grid-popup-btn {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sol-grid-popup-btn--cancel {
    background: var(--sol-bg-muted, #F0F2F5);
    color: var(--sol-text-primary);
    border-color: var(--sol-border, #E2E5EC);
}

.sol-grid-popup-btn--cancel:hover {
    background: var(--sol-border, #E2E5EC);
}

.sol-grid-popup-btn--save {
    background: var(--sol-accent, #4F7FFF);
    color: var(--sol-on-accent);
}

.sol-grid-popup-btn--save:hover {
    background: var(--sol-accent-hover, #3D6BEB);
}

.sol-grid-popup-btn--save:active {
    background: var(--sol-accent-active);
}

/* A phone: the editor takes the full width between the gutters. */
@media (max-width: 480px) {
    .sol-grid-popup {
        width: 100%;
    }
}

/* Touch: fields, buttons and the close button reach the 44px minimum; the field font
   floor comes from --sol-font-size-field-min. */
@media (pointer: coarse) {
    .sol-grid-popup-close,
    .sol-grid-popup-btn {
        min-width: var(--sol-touch-target-min, 2.75rem);
        min-height: var(--sol-touch-target-min, 2.75rem);
    }

    .sol-grid-popup-input {
        min-height: var(--sol-touch-target-min, 2.75rem);
    }
}

/* Forced touch (data-sol-touch on <html>): the block above, whatever the pointer. */
:where([data-sol-touch]) .sol-grid-popup-close,
:where([data-sol-touch]) .sol-grid-popup-btn {
  min-width: var(--sol-touch-target-min, 2.75rem);
  min-height: var(--sol-touch-target-min, 2.75rem);
}
:where([data-sol-touch]) .sol-grid-popup-input {
  min-height: var(--sol-touch-target-min, 2.75rem);
}

/* === Grid Action Buttons === */
.sol-grid-action {
    box-sizing: border-box;
    display: inline-flex;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    gap: var(--sol-space-1, 4px);
    padding: 0 var(--sol-space-1, 4px);
    height: calc(var(--sol-row-height, 36px) - 10px);
    min-width: calc(var(--sol-row-height, 36px) - 10px);
    border: none;
    border-radius: var(--sol-radius-action);
    background: transparent;
    color: var(--sol-text-secondary, #374151);
    cursor: pointer;
    font-size: var(--sol-font-size-sm, 0.75rem);
    font-family: inherit;
    line-height: 1;
    transition: background var(--sol-transition-fast, 100ms ease),
                color var(--sol-transition-fast, 100ms ease);
    flex-shrink: 0;
}

.sol-grid-action:hover {
    background: var(--sol-bg-muted, #F0F2F5);
    color: var(--sol-text-primary, #111827);
}

.sol-grid-action:active {
    background: var(--sol-border, #E2E5EC);
}

.sol-grid-action:focus-visible {
    outline: none;
    box-shadow: var(--sol-focus-shadow);
}

.sol-grid-action--primary {
    color: var(--sol-accent, #4F7FFF);
}

.sol-grid-action--primary:hover {
    background: var(--sol-accent-muted, rgba(79, 127, 255, 0.1));
    color: var(--sol-accent-hover, #3B6EEE);
}

.sol-grid-action--danger {
    color: var(--sol-danger, #EF4444);
}

.sol-grid-action--danger:hover {
    background: var(--sol-danger-muted, rgba(239, 68, 68, 0.1));
    color: var(--sol-danger, #DC2626);
}

/* A ghost action reads as a text run inside a data cell. The outline says "pressable"
   without the raised weight that would compete with the surface the grid sits on. */
.sol-grid-action--outlined {
    border: 1px solid var(--sol-border);
    color: var(--sol-text-primary);
}

.sol-grid-action--outlined:hover {
    background: var(--sol-bg-muted);
    border-color: var(--sol-text-tertiary, var(--sol-text-secondary));
}

.sol-grid-action--disabled,
.sol-grid-action:disabled {
    color: var(--sol-text-disabled, #D1D5DB);
    cursor: not-allowed;
    pointer-events: none;
}

.sol-grid-action__icon {
    flex-shrink: 0;
    display: inline-flex;
}

/* Icons render inside a .sol-grid-action__icon wrapper (a SolIcons fill glyph or a
   built-in stroke fallback). Size them to the compact 16px action footprint. */
.sol-grid-action__icon > svg {
    display: block;
    width: 16px;
    height: 16px;
}

.sol-grid-action__label {
    white-space: nowrap;
}

/* Touch: a row action takes the row's full height and grows to the 44px minimum
   when its column has room. A column sized for a mouse shares its width among the
   actions instead of clipping the last one — give it Width="auto" to fit them all. */
@media (pointer: coarse) {
    /* The leading tracks: the grid template reads these. */
    .sol-grid {
        --sol-grid-track-handle: var(--sol-touch-target-min, 2.75rem);
        --sol-grid-track-select: var(--sol-touch-target-min, 2.75rem);
    }

    /* No hover reveals the filter icon, so it is always shown, and a finger-sized square
       centred on it is its hit area. The header cell clips the square at its edges. */
    .sol-grid-filter-icon,
    .sol-grid-cell--header:hover .sol-grid-filter-icon {
        position: relative;
        opacity: 1;
    }

    .sol-grid-filter-icon::after {
        content: '';
        position: absolute;
        inset-block-start: calc(50% - var(--sol-touch-target-min, 2.75rem) / 2);
        inset-inline-start: calc(50% - var(--sol-touch-target-min, 2.75rem) / 2);
        width: var(--sol-touch-target-min, 2.75rem);
        height: var(--sol-touch-target-min, 2.75rem);
    }

    .sol-grid-cell:has(.sol-grid-action) {
        display: flex;
        align-items: center;
        padding-block: 0;
    }

    .sol-grid-action {
        height: var(--sol-touch-target-min, 2.75rem);
        min-width: var(--sol-touch-target-min, 2.75rem);
    }

    /* Directly in the cell it is a flex item, so it may give up width to fit the column. */
    .sol-grid-cell > .sol-grid-action {
        flex: 0 1 var(--sol-touch-target-min, 2.75rem);
        min-width: auto;
    }

    /* An auto column is measured by what overflows it: keep its actions at full width, so
       the measurement sizes the column for a finger instead of for the squeezed actions. */
    .sol-grid-cell--auto > .sol-grid-action {
        flex-shrink: 0;
    }

    /* Toolbar and grouping-panel buttons: the tokens set their height; these set the rest. */
    .sol-grid-toolbar-btn {
        min-width: var(--sol-touch-target-min, 2.75rem);
        justify-content: center;
    }

    .sol-grid-group-chip-remove,
    .sol-grid-group-panel-clear {
        min-width: var(--sol-touch-target-min, 2.75rem);
        min-height: var(--sol-touch-target-min, 2.75rem);
    }

    /* Filter menu and column chooser: every control and every row a finger can hit. */
    .sol-grid-filter-menu-close,
    .sol-grid-filter-menu-btn {
        min-width: var(--sol-touch-target-min, 2.75rem);
        min-height: var(--sol-touch-target-min, 2.75rem);
    }

    .sol-grid-filter-menu-select,
    .sol-grid-filter-menu-input,
    .sol-grid-filter-menu-unique-item,
    .sol-grid-column-chooser-item {
        min-height: var(--sol-touch-target-min, 2.75rem);
    }

    .sol-grid-filter-menu-unique-list {
        max-height: calc(5 * var(--sol-touch-target-min, 2.75rem));
    }
}

/* Forced touch (data-sol-touch on <html>): the block above, whatever the pointer. */
:where([data-sol-touch]) .sol-grid {
  --sol-grid-track-handle: var(--sol-touch-target-min, 2.75rem);
  --sol-grid-track-select: var(--sol-touch-target-min, 2.75rem);
}
:where([data-sol-touch]) .sol-grid-filter-icon,
:where([data-sol-touch]) .sol-grid-cell--header:hover .sol-grid-filter-icon {
  position: relative;
  opacity: 1;
}
:where([data-sol-touch]) .sol-grid-filter-icon::after {
  content: '';
  position: absolute;
  inset-block-start: calc(50% - var(--sol-touch-target-min, 2.75rem) / 2);
  inset-inline-start: calc(50% - var(--sol-touch-target-min, 2.75rem) / 2);
  width: var(--sol-touch-target-min, 2.75rem);
  height: var(--sol-touch-target-min, 2.75rem);
}
:where([data-sol-touch]) .sol-grid-cell:has(.sol-grid-action) {
  display: flex;
  align-items: center;
  padding-block: 0;
}
:where([data-sol-touch]) .sol-grid-action {
  height: var(--sol-touch-target-min, 2.75rem);
  min-width: var(--sol-touch-target-min, 2.75rem);
}
:where([data-sol-touch]) .sol-grid-cell > .sol-grid-action {
  flex: 0 1 var(--sol-touch-target-min, 2.75rem);
  min-width: auto;
}
:where([data-sol-touch]) .sol-grid-cell--auto > .sol-grid-action {
  flex-shrink: 0;
}
:where([data-sol-touch]) .sol-grid-toolbar-btn {
  min-width: var(--sol-touch-target-min, 2.75rem);
  justify-content: center;
}
:where([data-sol-touch]) .sol-grid-group-chip-remove,
:where([data-sol-touch]) .sol-grid-group-panel-clear {
  min-width: var(--sol-touch-target-min, 2.75rem);
  min-height: var(--sol-touch-target-min, 2.75rem);
}
:where([data-sol-touch]) .sol-grid-filter-menu-close,
:where([data-sol-touch]) .sol-grid-filter-menu-btn {
  min-width: var(--sol-touch-target-min, 2.75rem);
  min-height: var(--sol-touch-target-min, 2.75rem);
}
:where([data-sol-touch]) .sol-grid-filter-menu-select,
:where([data-sol-touch]) .sol-grid-filter-menu-input,
:where([data-sol-touch]) .sol-grid-filter-menu-unique-item,
:where([data-sol-touch]) .sol-grid-column-chooser-item {
  min-height: var(--sol-touch-target-min, 2.75rem);
}
:where([data-sol-touch]) .sol-grid-filter-menu-unique-list {
  max-height: calc(5 * var(--sol-touch-target-min, 2.75rem));
}

@keyframes sol-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes sol-scale-in {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Reduced motion — overlay enter animations become instant. */
@media (prefers-reduced-motion: reduce) {
    .sol-grid-filter-menu,
    .sol-grid-context-menu,
    .sol-grid-popup-overlay,
    .sol-grid-popup {
        animation-duration: 0.01ms;
    }
}

} /* @layer solsticio-components */

/* ============================================================
   Card view (CardBreakpoint / cardBreakpoint). At or below the breakpoint each data row is a
   card: a "title  value" line per column, then a footer with the row's controls. The same
   markup, restyled, so keyboard, selection, editing, templates and roles work as in the table.
   By the viewport: a grid in a narrow panel of a wide screen stays a table. One static query
   per breakpoint, widest first, so the first paint is right. The three blocks differ only in
   their class and width. Both platforms carry this section verbatim, except that Angular styles
   the bar's own controls in the bar's stylesheet (sol-grid-card-bar.css).
   ============================================================ */
@layer solsticio-components {
    /* Card-only markup: card-enabled grids render it, a card block shows it. */
    .sol-grid-cell-label,
    .sol-grid-card-more,
    .sol-grid-cardbar {
        display: none;
    }

    /* A line's title, floated into the line's start padding: the value keeps its own flow. */
    .sol-grid-cell-label {
        box-sizing: border-box;
        float: inline-start;
        width: var(--sol-grid-card-label-width, 6.5rem);
        margin-inline-start: calc(-1 * (var(--sol-grid-card-label-width, 6.5rem) + var(--sol-space-3, 0.75rem)));
        color: var(--sol-text-tertiary);
        font-family: var(--sol-font-family-mono);
        font-size: var(--sol-font-size-xs, 0.6875rem);
        font-weight: var(--sol-font-weight-semibold, 600);
        letter-spacing: 0.05em;
        text-transform: uppercase;
        overflow-wrap: anywhere;
    }

    [data-sol-skin="material"] .sol-grid-cell-label {
        font-family: var(--sol-font-family);
        font-weight: var(--sol-font-weight-medium, 500);
        font-size: var(--sol-font-size-sm, 0.75rem);
    }

    /* The bar, in the header row's place: the sort chooser and its direction, the filter
       chooser, then select-all, which takes the next line when the choosers fill theirs. */
    .sol-grid-cardbar {
        box-sizing: border-box;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--sol-space-2, 0.5rem);
        padding: var(--sol-space-2, 0.5rem) var(--sol-space-3, 0.75rem);
        border-bottom: 1px solid var(--sol-border);
        background: var(--sol-bg-surface);
        font-size: var(--sol-font-size-sm, 0.75rem);
    }

    /* The bar's controls. */
    .sol-grid-cardbar__select,
    .sol-grid-cardbar__sort {
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        gap: var(--sol-space-2, 0.5rem);
        min-height: calc(var(--sol-control-h) - 4px);
    }

    .sol-grid-cardbar__sort {
        flex: 1 1 12rem;
        max-width: 22rem;
    }

    .sol-grid-cardbar__select {
        margin-inline-start: auto;
        cursor: pointer;
    }

    .sol-grid-cardbar__field {
        box-sizing: border-box;
        flex: 1 1 9rem;
        min-width: 0;
        max-width: 16rem;
        height: calc(var(--sol-control-h) - 4px);
        padding: 0 var(--sol-space-2, 0.5rem);
        border: 1px solid var(--sol-border);
        border-radius: var(--sol-radius-control);
        background: var(--sol-bg-surface);
        color: var(--sol-text-primary);
        font-family: inherit;
        font-size: max(var(--sol-font-size-sm, 0.75rem), var(--sol-font-size-field-min, 0px));
        cursor: pointer;
    }

    .sol-grid-cardbar__field--active {
        border-color: var(--sol-accent);
        color: var(--sol-accent);
    }

    .sol-grid-cardbar__direction {
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: calc(var(--sol-control-h) - 4px);
        min-height: calc(var(--sol-control-h) - 4px);
        padding: 0 var(--sol-space-2, 0.5rem);
        border: 1px solid var(--sol-border);
        border-radius: var(--sol-radius-action);
        background: var(--sol-bg-surface);
        color: var(--sol-text-primary);
        font-family: inherit;
        font-size: var(--sol-font-size-sm, 0.75rem);
        cursor: pointer;
    }

    .sol-grid-cardbar__direction:hover {
        background: var(--sol-accent-muted);
        border-color: var(--sol-accent);
    }

    .sol-grid-cardbar__field:focus-visible,
    .sol-grid-cardbar__direction:focus-visible {
        outline: none;
        box-shadow: var(--sol-focus-shadow);
    }

    /* A card's "More": last in its footer, at its end; the actions before it push that end
       already. Opening it shows the folded columns' lines. */
    .sol-grid-card-more {
        box-sizing: border-box;
        order: 2;
        align-items: center;
        margin-inline-start: auto;
        padding-inline: var(--sol-space-1, 0.25rem) var(--sol-space-2, 0.5rem);
    }

    :is(.sol-grid-cell--actions, .sol-grid-cell:has(.sol-grid-action)) ~ .sol-grid-card-more {
        margin-inline-start: 0;
    }

    .sol-grid-card-more__toggle {
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--sol-space-2, 0.5rem);
        min-width: calc(var(--sol-control-h) - 4px);
        min-height: calc(var(--sol-control-h) - 4px);
        padding: 0 var(--sol-space-2, 0.5rem);
        border: 1px solid var(--sol-border);
        border-radius: var(--sol-radius-action);
        background: var(--sol-bg-surface);
        color: var(--sol-text-primary);
        font-size: var(--sol-font-size-sm, 0.75rem);
        white-space: nowrap;
        list-style: none;
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
    }

    .sol-grid-card-more__toggle::-webkit-details-marker {
        display: none;
    }

    .sol-grid-card-more__toggle:hover {
        background: var(--sol-accent-muted);
        border-color: var(--sol-accent);
    }

    .sol-grid-card-more__toggle:focus-visible {
        outline: none;
        box-shadow: var(--sol-focus-shadow);
    }

    /* A drawn chevron, so there is nothing to read out; physical sides, so it points down in
       either writing direction. */
    .sol-grid-card-more__toggle::after {
        content: '';
        width: 0.375em;
        height: 0.375em;
        margin-block-end: 0.2em;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(45deg);
    }

    [open] > .sol-grid-card-more__toggle::after {
        margin-block: 0.2em 0;
        transform: rotate(-135deg);
    }

    /* A row template fills its card. No effect on a table row, which is a grid, not a flexbox. */
    .sol-grid-row-template {
        flex: 1 1 100%;
    }

    /* Touch: a card line is at least a finger tall, and a single line centres its text in it. */
    @media (pointer: coarse) {
        .sol-grid {
            --sol-grid-card-line-min: var(--sol-touch-target-min, 2.75rem);
            --sol-grid-card-line-pad: calc((var(--sol-touch-target-min, 2.75rem) - var(--sol-line-height-normal, 1.5) * 1em) / 2);
        }
    }

    /* Forced touch (data-sol-touch on <html>): the block above, whatever the pointer. */
    :where([data-sol-touch]) .sol-grid {
      --sol-grid-card-line-min: var(--sol-touch-target-min, 2.75rem);
      --sol-grid-card-line-pad: calc((var(--sol-touch-target-min, 2.75rem) - var(--sol-line-height-normal, 1.5) * 1em) / 2);
    }

    @media (max-width: 1024px) {
        /* The bar takes the header's place; the filter menu it opens is a sheet at the bottom. */
        .sol-grid--cards-lg > .sol-grid-cardbar {
            display: flex;
        }

        .sol-grid--cards-lg > .sol-grid-header {
            display: none;
        }

        .sol-grid--cards-lg > .sol-grid-filter-menu {
            position: fixed;
            inset: auto var(--sol-space-2, 0.5rem) var(--sol-space-2, 0.5rem);
            min-width: 0;
            max-width: none;
            max-height: calc(100dvh - 2 * var(--sol-space-4, 1rem));
            overflow-y: auto;
        }

        /* Each data row a card, the aggregates row a card of totals after them. */
        .sol-grid--cards-lg > .sol-grid-body {
            --sol-grid-row-min-width: 0px;
            padding-block: var(--sol-space-2, 0.5rem);
            background: var(--sol-bg-sunken);
        }

        /* No specificity: a row's states (hover, selection, editing, a batch change) keep theirs. */
        :where(.sol-grid--cards-lg > .sol-grid-body > .sol-grid-row, .sol-grid--cards-lg > .sol-grid-footer-row) {
            background: var(--sol-bg-surface);
            border-inline-start: 1px solid var(--sol-card-border);
            box-shadow: var(--sol-elev-card);
        }

        .sol-grid--cards-lg > .sol-grid-body > .sol-grid-row,
        .sol-grid--cards-lg > .sol-grid-footer-row {
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            min-width: 0;
            height: auto;
            margin: 0 var(--sol-space-2, 0.5rem) var(--sol-space-2, 0.5rem);
            padding-block: var(--sol-space-1, 0.25rem);
            border-block: 1px solid var(--sol-card-border);
            border-inline-end: 1px solid var(--sol-card-border);
            border-radius: var(--sol-radius-card);
            overflow: visible;
            line-height: calc(var(--sol-line-height-normal, 1.5) * 1em);
        }

        .sol-grid--cards-lg > .sol-grid-body > .sol-grid-row:has(+ .sol-grid-detail-row) {
            margin-block-end: 0;
            border-end-start-radius: 0;
            border-end-end-radius: 0;
        }

        .sol-grid--cards-lg > .sol-grid-body > .sol-grid-detail-row {
            box-sizing: border-box;
            margin: 0 var(--sol-space-2, 0.5rem) var(--sol-space-2, 0.5rem);
            border: 1px solid var(--sol-card-border);
            border-block-start: 0;
            border-end-start-radius: var(--sol-radius-card);
            border-end-end-radius: var(--sol-radius-card);
        }

        /* Group rows: full-width section headers between the cards. */
        :where(.sol-grid--cards-lg > .sol-grid-body) > :is(.sol-grid-group-header, .sol-grid-group-footer) {
            margin-block-end: var(--sol-space-2, 0.5rem);
            border: 0;
        }

        /* A line: the title in its start padding, the value in its own flow, wrapping. */
        .sol-grid--cards-lg > .sol-grid-body > .sol-grid-row > .sol-grid-cell,
        .sol-grid--cards-lg > .sol-grid-footer-row > .sol-grid-cell {
            box-sizing: border-box;
            display: flow-root;
            flex: 1 0 100%;
            min-width: 0;
            min-height: var(--sol-grid-card-line-min, 0px);
            padding-block: var(--sol-grid-card-line-pad, var(--sol-space-1, 0.25rem));
            padding-inline: calc(2 * var(--sol-space-3, 0.75rem) + var(--sol-grid-card-label-width, 6.5rem)) var(--sol-space-3, 0.75rem);
            border: 0;
            overflow: visible;
            white-space: normal;
            text-overflow: clip;
            overflow-wrap: anywhere;
            text-align: start;
        }

        .sol-grid--cards-lg > .sol-grid-body > .sol-grid-row > .sol-grid-cell > .sol-grid-cell-label,
        .sol-grid--cards-lg > .sol-grid-footer-row > .sol-grid-cell > .sol-grid-cell-label {
            display: block;
        }

        /* A pinned column is not pinned on a card: the row paints its tint. */
        .sol-grid--cards-lg > .sol-grid-body > .sol-grid-row > :is(.sol-grid-cell--frozen-left, .sol-grid-cell--frozen-right),
        .sol-grid--cards-lg > .sol-grid-footer-row > :is(.sol-grid-cell--frozen-left, .sol-grid-cell--frozen-right) {
            position: static;
            background: none;
        }

        /* The footer: the expander and the selection box, then the actions, then "More". */
        .sol-grid--cards-lg > .sol-grid-body > .sol-grid-row > :is(.sol-grid-cell--expander, .sol-grid-cell--checkbox, .sol-grid-cell--actions, .sol-grid-cell:has(.sol-grid-action)) {
            --sol-grid-card-display: flex;
            --sol-grid-card-line-min: 0px;
            --sol-grid-card-line-pad: 0px;
            order: 2;
            display: flex;
            flex: 0 0 auto;
            align-items: center;
            min-height: 0;
            padding: 0;
        }

        .sol-grid--cards-lg > .sol-grid-body > .sol-grid-row > .sol-grid-cell--expander {
            width: var(--sol-grid-track-expander, 36px);
            height: var(--sol-grid-track-expander, 36px);
        }

        .sol-grid--cards-lg > .sol-grid-body > .sol-grid-row > .sol-grid-cell--checkbox {
            width: var(--sol-grid-track-select, 40px);
            height: var(--sol-grid-track-select, 40px);
        }

        .sol-grid--cards-lg > .sol-grid-body > .sol-grid-row > :is(.sol-grid-cell--actions, .sol-grid-cell:has(.sol-grid-action)) {
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: var(--sol-space-1, 0.25rem);
            margin-inline-start: auto;
            padding-inline: var(--sol-space-2, 0.5rem);
        }

        .sol-grid--cards-lg > .sol-grid-body > .sol-grid-row > :is(.sol-grid-cell--actions, .sol-grid-cell:has(.sol-grid-action)) > .sol-grid-cell-label,
        .sol-grid--cards-lg > .sol-grid-body > .sol-grid-row > :is(.sol-grid-cell--handle, .sol-grid-row__handle),
        .sol-grid--cards-lg > .sol-grid-footer-row > .sol-grid-cell:not(:has(> .sol-grid-cell-label)) {
            display: none;
        }

        /* The folded lines show while the card's "More" is open, and while its row is edited. */
        .sol-grid--cards-lg > .sol-grid-body > .sol-grid-row:is(:has(> .sol-grid-card-more [open]), .sol-grid-row--editing, :has(> .sol-grid-cell--editing)) > .sol-grid-cell[data-sol-responsive] {
            display: var(--sol-grid-card-display, flow-root);
            visibility: visible;
            height: auto;
            min-height: var(--sol-grid-card-line-min, 0px);
            padding-block: var(--sol-grid-card-line-pad, var(--sol-space-1, 0.25rem));
        }
    }

    @media (max-width: 768px) {
        /* The bar takes the header's place; the filter menu it opens is a sheet at the bottom. */
        .sol-grid--cards-md > .sol-grid-cardbar {
            display: flex;
        }

        .sol-grid--cards-md > .sol-grid-header {
            display: none;
        }

        .sol-grid--cards-md > .sol-grid-filter-menu {
            position: fixed;
            inset: auto var(--sol-space-2, 0.5rem) var(--sol-space-2, 0.5rem);
            min-width: 0;
            max-width: none;
            max-height: calc(100dvh - 2 * var(--sol-space-4, 1rem));
            overflow-y: auto;
        }

        /* Each data row a card, the aggregates row a card of totals after them. */
        .sol-grid--cards-md > .sol-grid-body {
            --sol-grid-row-min-width: 0px;
            padding-block: var(--sol-space-2, 0.5rem);
            background: var(--sol-bg-sunken);
        }

        /* No specificity: a row's states (hover, selection, editing, a batch change) keep theirs. */
        :where(.sol-grid--cards-md > .sol-grid-body > .sol-grid-row, .sol-grid--cards-md > .sol-grid-footer-row) {
            background: var(--sol-bg-surface);
            border-inline-start: 1px solid var(--sol-card-border);
            box-shadow: var(--sol-elev-card);
        }

        .sol-grid--cards-md > .sol-grid-body > .sol-grid-row,
        .sol-grid--cards-md > .sol-grid-footer-row {
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            min-width: 0;
            height: auto;
            margin: 0 var(--sol-space-2, 0.5rem) var(--sol-space-2, 0.5rem);
            padding-block: var(--sol-space-1, 0.25rem);
            border-block: 1px solid var(--sol-card-border);
            border-inline-end: 1px solid var(--sol-card-border);
            border-radius: var(--sol-radius-card);
            overflow: visible;
            line-height: calc(var(--sol-line-height-normal, 1.5) * 1em);
        }

        .sol-grid--cards-md > .sol-grid-body > .sol-grid-row:has(+ .sol-grid-detail-row) {
            margin-block-end: 0;
            border-end-start-radius: 0;
            border-end-end-radius: 0;
        }

        .sol-grid--cards-md > .sol-grid-body > .sol-grid-detail-row {
            box-sizing: border-box;
            margin: 0 var(--sol-space-2, 0.5rem) var(--sol-space-2, 0.5rem);
            border: 1px solid var(--sol-card-border);
            border-block-start: 0;
            border-end-start-radius: var(--sol-radius-card);
            border-end-end-radius: var(--sol-radius-card);
        }

        /* Group rows: full-width section headers between the cards. */
        :where(.sol-grid--cards-md > .sol-grid-body) > :is(.sol-grid-group-header, .sol-grid-group-footer) {
            margin-block-end: var(--sol-space-2, 0.5rem);
            border: 0;
        }

        /* A line: the title in its start padding, the value in its own flow, wrapping. */
        .sol-grid--cards-md > .sol-grid-body > .sol-grid-row > .sol-grid-cell,
        .sol-grid--cards-md > .sol-grid-footer-row > .sol-grid-cell {
            box-sizing: border-box;
            display: flow-root;
            flex: 1 0 100%;
            min-width: 0;
            min-height: var(--sol-grid-card-line-min, 0px);
            padding-block: var(--sol-grid-card-line-pad, var(--sol-space-1, 0.25rem));
            padding-inline: calc(2 * var(--sol-space-3, 0.75rem) + var(--sol-grid-card-label-width, 6.5rem)) var(--sol-space-3, 0.75rem);
            border: 0;
            overflow: visible;
            white-space: normal;
            text-overflow: clip;
            overflow-wrap: anywhere;
            text-align: start;
        }

        .sol-grid--cards-md > .sol-grid-body > .sol-grid-row > .sol-grid-cell > .sol-grid-cell-label,
        .sol-grid--cards-md > .sol-grid-footer-row > .sol-grid-cell > .sol-grid-cell-label {
            display: block;
        }

        /* A pinned column is not pinned on a card: the row paints its tint. */
        .sol-grid--cards-md > .sol-grid-body > .sol-grid-row > :is(.sol-grid-cell--frozen-left, .sol-grid-cell--frozen-right),
        .sol-grid--cards-md > .sol-grid-footer-row > :is(.sol-grid-cell--frozen-left, .sol-grid-cell--frozen-right) {
            position: static;
            background: none;
        }

        /* The footer: the expander and the selection box, then the actions, then "More". */
        .sol-grid--cards-md > .sol-grid-body > .sol-grid-row > :is(.sol-grid-cell--expander, .sol-grid-cell--checkbox, .sol-grid-cell--actions, .sol-grid-cell:has(.sol-grid-action)) {
            --sol-grid-card-display: flex;
            --sol-grid-card-line-min: 0px;
            --sol-grid-card-line-pad: 0px;
            order: 2;
            display: flex;
            flex: 0 0 auto;
            align-items: center;
            min-height: 0;
            padding: 0;
        }

        .sol-grid--cards-md > .sol-grid-body > .sol-grid-row > .sol-grid-cell--expander {
            width: var(--sol-grid-track-expander, 36px);
            height: var(--sol-grid-track-expander, 36px);
        }

        .sol-grid--cards-md > .sol-grid-body > .sol-grid-row > .sol-grid-cell--checkbox {
            width: var(--sol-grid-track-select, 40px);
            height: var(--sol-grid-track-select, 40px);
        }

        .sol-grid--cards-md > .sol-grid-body > .sol-grid-row > :is(.sol-grid-cell--actions, .sol-grid-cell:has(.sol-grid-action)) {
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: var(--sol-space-1, 0.25rem);
            margin-inline-start: auto;
            padding-inline: var(--sol-space-2, 0.5rem);
        }

        .sol-grid--cards-md > .sol-grid-body > .sol-grid-row > :is(.sol-grid-cell--actions, .sol-grid-cell:has(.sol-grid-action)) > .sol-grid-cell-label,
        .sol-grid--cards-md > .sol-grid-body > .sol-grid-row > :is(.sol-grid-cell--handle, .sol-grid-row__handle),
        .sol-grid--cards-md > .sol-grid-footer-row > .sol-grid-cell:not(:has(> .sol-grid-cell-label)) {
            display: none;
        }

        /* The folded lines show while the card's "More" is open, and while its row is edited. */
        .sol-grid--cards-md > .sol-grid-body > .sol-grid-row:is(:has(> .sol-grid-card-more [open]), .sol-grid-row--editing, :has(> .sol-grid-cell--editing)) > .sol-grid-cell[data-sol-responsive] {
            display: var(--sol-grid-card-display, flow-root);
            visibility: visible;
            height: auto;
            min-height: var(--sol-grid-card-line-min, 0px);
            padding-block: var(--sol-grid-card-line-pad, var(--sol-space-1, 0.25rem));
        }
    }

    @media (max-width: 480px) {
        /* The bar takes the header's place; the filter menu it opens is a sheet at the bottom. */
        .sol-grid--cards-sm > .sol-grid-cardbar {
            display: flex;
        }

        .sol-grid--cards-sm > .sol-grid-header {
            display: none;
        }

        .sol-grid--cards-sm > .sol-grid-filter-menu {
            position: fixed;
            inset: auto var(--sol-space-2, 0.5rem) var(--sol-space-2, 0.5rem);
            min-width: 0;
            max-width: none;
            max-height: calc(100dvh - 2 * var(--sol-space-4, 1rem));
            overflow-y: auto;
        }

        /* Each data row a card, the aggregates row a card of totals after them. */
        .sol-grid--cards-sm > .sol-grid-body {
            --sol-grid-row-min-width: 0px;
            padding-block: var(--sol-space-2, 0.5rem);
            background: var(--sol-bg-sunken);
        }

        /* No specificity: a row's states (hover, selection, editing, a batch change) keep theirs. */
        :where(.sol-grid--cards-sm > .sol-grid-body > .sol-grid-row, .sol-grid--cards-sm > .sol-grid-footer-row) {
            background: var(--sol-bg-surface);
            border-inline-start: 1px solid var(--sol-card-border);
            box-shadow: var(--sol-elev-card);
        }

        .sol-grid--cards-sm > .sol-grid-body > .sol-grid-row,
        .sol-grid--cards-sm > .sol-grid-footer-row {
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            min-width: 0;
            height: auto;
            margin: 0 var(--sol-space-2, 0.5rem) var(--sol-space-2, 0.5rem);
            padding-block: var(--sol-space-1, 0.25rem);
            border-block: 1px solid var(--sol-card-border);
            border-inline-end: 1px solid var(--sol-card-border);
            border-radius: var(--sol-radius-card);
            overflow: visible;
            line-height: calc(var(--sol-line-height-normal, 1.5) * 1em);
        }

        .sol-grid--cards-sm > .sol-grid-body > .sol-grid-row:has(+ .sol-grid-detail-row) {
            margin-block-end: 0;
            border-end-start-radius: 0;
            border-end-end-radius: 0;
        }

        .sol-grid--cards-sm > .sol-grid-body > .sol-grid-detail-row {
            box-sizing: border-box;
            margin: 0 var(--sol-space-2, 0.5rem) var(--sol-space-2, 0.5rem);
            border: 1px solid var(--sol-card-border);
            border-block-start: 0;
            border-end-start-radius: var(--sol-radius-card);
            border-end-end-radius: var(--sol-radius-card);
        }

        /* Group rows: full-width section headers between the cards. */
        :where(.sol-grid--cards-sm > .sol-grid-body) > :is(.sol-grid-group-header, .sol-grid-group-footer) {
            margin-block-end: var(--sol-space-2, 0.5rem);
            border: 0;
        }

        /* A line: the title in its start padding, the value in its own flow, wrapping. */
        .sol-grid--cards-sm > .sol-grid-body > .sol-grid-row > .sol-grid-cell,
        .sol-grid--cards-sm > .sol-grid-footer-row > .sol-grid-cell {
            box-sizing: border-box;
            display: flow-root;
            flex: 1 0 100%;
            min-width: 0;
            min-height: var(--sol-grid-card-line-min, 0px);
            padding-block: var(--sol-grid-card-line-pad, var(--sol-space-1, 0.25rem));
            padding-inline: calc(2 * var(--sol-space-3, 0.75rem) + var(--sol-grid-card-label-width, 6.5rem)) var(--sol-space-3, 0.75rem);
            border: 0;
            overflow: visible;
            white-space: normal;
            text-overflow: clip;
            overflow-wrap: anywhere;
            text-align: start;
        }

        .sol-grid--cards-sm > .sol-grid-body > .sol-grid-row > .sol-grid-cell > .sol-grid-cell-label,
        .sol-grid--cards-sm > .sol-grid-footer-row > .sol-grid-cell > .sol-grid-cell-label {
            display: block;
        }

        /* A pinned column is not pinned on a card: the row paints its tint. */
        .sol-grid--cards-sm > .sol-grid-body > .sol-grid-row > :is(.sol-grid-cell--frozen-left, .sol-grid-cell--frozen-right),
        .sol-grid--cards-sm > .sol-grid-footer-row > :is(.sol-grid-cell--frozen-left, .sol-grid-cell--frozen-right) {
            position: static;
            background: none;
        }

        /* The footer: the expander and the selection box, then the actions, then "More". */
        .sol-grid--cards-sm > .sol-grid-body > .sol-grid-row > :is(.sol-grid-cell--expander, .sol-grid-cell--checkbox, .sol-grid-cell--actions, .sol-grid-cell:has(.sol-grid-action)) {
            --sol-grid-card-display: flex;
            --sol-grid-card-line-min: 0px;
            --sol-grid-card-line-pad: 0px;
            order: 2;
            display: flex;
            flex: 0 0 auto;
            align-items: center;
            min-height: 0;
            padding: 0;
        }

        .sol-grid--cards-sm > .sol-grid-body > .sol-grid-row > .sol-grid-cell--expander {
            width: var(--sol-grid-track-expander, 36px);
            height: var(--sol-grid-track-expander, 36px);
        }

        .sol-grid--cards-sm > .sol-grid-body > .sol-grid-row > .sol-grid-cell--checkbox {
            width: var(--sol-grid-track-select, 40px);
            height: var(--sol-grid-track-select, 40px);
        }

        .sol-grid--cards-sm > .sol-grid-body > .sol-grid-row > :is(.sol-grid-cell--actions, .sol-grid-cell:has(.sol-grid-action)) {
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: var(--sol-space-1, 0.25rem);
            margin-inline-start: auto;
            padding-inline: var(--sol-space-2, 0.5rem);
        }

        .sol-grid--cards-sm > .sol-grid-body > .sol-grid-row > :is(.sol-grid-cell--actions, .sol-grid-cell:has(.sol-grid-action)) > .sol-grid-cell-label,
        .sol-grid--cards-sm > .sol-grid-body > .sol-grid-row > :is(.sol-grid-cell--handle, .sol-grid-row__handle),
        .sol-grid--cards-sm > .sol-grid-footer-row > .sol-grid-cell:not(:has(> .sol-grid-cell-label)) {
            display: none;
        }

        /* The folded lines show while the card's "More" is open, and while its row is edited. */
        .sol-grid--cards-sm > .sol-grid-body > .sol-grid-row:is(:has(> .sol-grid-card-more [open]), .sol-grid-row--editing, :has(> .sol-grid-cell--editing)) > .sol-grid-cell[data-sol-responsive] {
            display: var(--sol-grid-card-display, flow-root);
            visibility: visible;
            height: auto;
            min-height: var(--sol-grid-card-line-min, 0px);
            padding-block: var(--sol-grid-card-line-pad, var(--sol-space-1, 0.25rem));
        }
    }

    /* Folding on a card. At each width the columns ResponsivePriority folds there leave the
       card's face, to show after its lines while its "More" is open, and "More" appears. A pair
       of card class and column group belongs to the widest query both are on at. */
    @media (max-width: 1024px) {
        .sol-grid--cards-lg > .sol-grid-body > .sol-grid-row > .sol-grid-cell[data-sol-responsive="3"] {
            display: none;
        }

        .sol-grid--cards-lg > .sol-grid-body > .sol-grid-row > .sol-grid-cell[data-sol-responsive="3"]:not(.sol-grid-cell--actions, :has(.sol-grid-action)) {
            order: 1;
        }

        .sol-grid--cards-lg > .sol-grid-body > .sol-grid-row > .sol-grid-card-more[data-sol-card-more="3"] {
            display: flex;
        }
    }

    @media (max-width: 768px) {
        :is(.sol-grid--cards-md, .sol-grid--cards-lg) > .sol-grid-body > .sol-grid-row > .sol-grid-cell:is([data-sol-responsive="2"], [data-sol-responsive="3"]) {
            display: none;
        }

        :is(.sol-grid--cards-md, .sol-grid--cards-lg) > .sol-grid-body > .sol-grid-row > .sol-grid-cell:is([data-sol-responsive="2"], [data-sol-responsive="3"]):not(.sol-grid-cell--actions, :has(.sol-grid-action)) {
            order: 1;
        }

        :is(.sol-grid--cards-md, .sol-grid--cards-lg) > .sol-grid-body > .sol-grid-row > .sol-grid-card-more:is([data-sol-card-more="2"], [data-sol-card-more="3"]) {
            display: flex;
        }
    }

    @media (max-width: 480px) {
        :is(.sol-grid--cards-sm, .sol-grid--cards-md, .sol-grid--cards-lg) > .sol-grid-body > .sol-grid-row > .sol-grid-cell[data-sol-responsive] {
            display: none;
        }

        :is(.sol-grid--cards-sm, .sol-grid--cards-md, .sol-grid--cards-lg) > .sol-grid-body > .sol-grid-row > .sol-grid-cell[data-sol-responsive]:not(.sol-grid-cell--actions, :has(.sol-grid-action)) {
            order: 1;
        }

        :is(.sol-grid--cards-sm, .sol-grid--cards-md, .sol-grid--cards-lg) > .sol-grid-body > .sol-grid-row > .sol-grid-card-more[data-sol-card-more] {
            display: flex;
        }
    }
}

/* ============================================================
   Forced colors — selection, focus and state survive with outlines.
   ============================================================ */
@layer solsticio-components {
  @media (forced-colors: active) {
    .sol-grid-checkbox { forced-color-adjust: none; background: Canvas; border-color: CanvasText; }
    .sol-grid-checkbox:checked { background: Highlight; border-color: Highlight; }
    .sol-grid-checkbox:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; box-shadow: none; }
    .sol-grid-check__tick { color: HighlightText; }
    .sol-grid-row--selected,
    .sol-grid-row--selected:hover,
    .sol-grid-row[aria-selected="true"] {
      outline: 2px solid Highlight;
      outline-offset: -2px;
    }
    .sol-grid-row--expanded { border-inline-start: 3px solid CanvasText; }
    .sol-grid-cell:focus-visible,
    .sol-grid-row:focus-visible,
    .sol-grid-action:focus-visible,
    .sol-grid-toolbar-btn:focus-visible,
    .sol-grid-expander:focus-visible {
      outline: 2px solid Highlight;
      outline-offset: -2px;
      box-shadow: none;
    }
    .sol-grid-action { border: 1px solid ButtonText; }
    .sol-grid-action--primary { border-width: 2px; }
    .sol-grid-action--danger { border-style: dashed; }
    .sol-grid-action--disabled,
    .sol-grid-action:disabled { border-color: GrayText; color: GrayText; }
    .sol-grid-filter-icon--active { outline: 1px solid Highlight; }
  }
}

/* ============================================================
   Light — what changed, what is saving, where the active cell is.
   ============================================================ */
@layer solsticio-components {
  /* A changed value (HighlightChanges): a wash that fades and, on a number, an arrow for the way it
     moved. The alternate names restart both when the same cell changes again. The wash is an inset
     shadow, so a frozen cell keeps the opaque background that covers what scrolls under it. */
  .sol-grid-cell--changed {
    --sol-grid-change-color: var(--sol-accent);
    animation: sol-grid-wash 1.4s ease-out;
  }

  .sol-grid-cell--changed-alt { animation-name: sol-grid-wash-alt; }
  .sol-grid-cell--changed-good { --sol-grid-change-color: var(--sol-success); }
  .sol-grid-cell--changed-bad { --sol-grid-change-color: var(--sol-danger); }

  .sol-grid-cell--changed-up > .sol-grid-cell-text::before,
  .sol-grid-cell--changed-down > .sol-grid-cell-text::before {
    display: inline-block;
    margin-inline-end: 0.3em;
    font-size: 0.62rem;
    vertical-align: 1px;
    color: var(--sol-grid-change-color);
    animation: sol-grid-arrow 2.6s ease-out forwards;
  }

  .sol-grid-cell--changed-up > .sol-grid-cell-text::before { content: "\25B2"; content: "\25B2" / ""; }
  .sol-grid-cell--changed-down > .sol-grid-cell-text::before { content: "\25BC"; content: "\25BC" / ""; }
  .sol-grid-cell--changed-alt > .sol-grid-cell-text::before { animation-name: sol-grid-arrow-alt; }

  /* Past ChangeBurstLimit: no wash, a dot in the corner while the mark lasts. */
  .sol-grid-cell--changed-quiet { animation: none; }

  .sol-grid-cell--changed-quiet::after {
    content: "";
    position: absolute;
    inset-block-start: 6px;
    inset-inline-end: 4px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--sol-accent);
    pointer-events: none;
  }

  /* Low specificity: a frozen cell stays sticky, which positions its marks as well. */
  .sol-grid-cell:where(.sol-grid-cell--changed-quiet, .sol-grid-cell--focused) { position: relative; }

  /* The active cell: light on opposite corners, dimmed while focus is outside the grid. */
  .sol-grid-cell--focused:not(.sol-grid-cell--editing)::before,
  .sol-grid-cell--focused:not(.sol-grid-cell--editing)::after {
    content: "";
    position: absolute;
    inset: auto;
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    border: 0 solid var(--sol-accent);
    border-radius: 0;
    background: none;
    opacity: 0.45;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--sol-accent) calc(var(--sol-fx-glow) * 100%), transparent));
    pointer-events: none;
  }

  .sol-grid-cell--focused:not(.sol-grid-cell--editing)::before {
    inset-block-start: 2px;
    inset-inline-start: 2px;
    border-block-start-width: 2px;
    border-inline-start-width: 2px;
    border-start-start-radius: 3px;
  }

  .sol-grid-cell--focused:not(.sol-grid-cell--editing)::after {
    inset-block-end: 2px;
    inset-inline-end: 2px;
    border-block-end-width: 2px;
    border-inline-end-width: 2px;
    border-end-end-radius: 3px;
  }

  .sol-grid:focus-within .sol-grid-cell--focused::before,
  .sol-grid:focus-within .sol-grid-cell--focused::after {
    opacity: 1;
  }

  /* A row's save (SetRowState): the edge light while saving and its flash on the outcome. Last in the
     row and on the frozen cells' layer, it paints over them and under a group header. */
  .sol-grid-row > .sol-edge-light {
    z-index: calc(var(--sol-z-sticky) - 2);
  }

  .sol-grid-row--failed {
    border-inline-start: 3px solid var(--sol-danger);
    background: var(--sol-danger-muted);
    --sol-grid-row-tint: var(--sol-danger-muted);
  }

  @keyframes sol-grid-wash {
    from { box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--sol-grid-change-color) 32%, transparent); }
    to { box-shadow: inset 0 0 0 100vmax transparent; }
  }

  @keyframes sol-grid-wash-alt {
    from { box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--sol-grid-change-color) 32%, transparent); }
    to { box-shadow: inset 0 0 0 100vmax transparent; }
  }

  @keyframes sol-grid-arrow {
    0%, 80% { opacity: 1; }
    100% { opacity: 0; }
  }

  @keyframes sol-grid-arrow-alt {
    0%, 80% { opacity: 1; }
    100% { opacity: 0; }
  }

  /* Reduced motion: the marks stay while they last, nothing moves. */
  @media (prefers-reduced-motion: reduce) {
    .sol-grid-cell--changed:not(.sol-grid-cell--changed-quiet) {
      animation: none;
      box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--sol-grid-change-color) 18%, transparent);
    }

    .sol-grid-cell--changed > .sol-grid-cell-text::before { animation: none; }
  }

  @media (forced-colors: active) {
    .sol-grid-cell--focused::before,
    .sol-grid-cell--focused::after {
      border-color: Highlight;
      filter: none;
      opacity: 1;
    }

    .sol-grid-cell--changed-quiet::after {
      forced-color-adjust: none;
      background: Highlight;
    }

    .sol-grid-row--failed { border-inline-start: 3px double CanvasText; }
  }
}

/* Entrances: the chooser and the saved views pour out of their button, and the items of every grid
   menu follow one step apart (tokens: entrance primitive). */
@layer solsticio-components {
.sol-grid-column-chooser-panel,
.sol-grid-presets-panel {
    animation: sol-enter-pour var(--sol-motion-enter) var(--sol-ease-enter) backwards;
}

.sol-grid-filter-menu-unique-item,
.sol-grid-context-menu > *,
.sol-grid-column-chooser-item,
.sol-grid-presets-item {
    animation: sol-enter-item var(--sol-step-time, 0s) var(--sol-ease-enter)
      calc(var(--sol-step, 0) * var(--sol-motion-step)) backwards;
}
}