/**
 * Photon Grid base styles — editing system.
 *
 * Chrome owned by the `src/editing` pipeline rather than by any individual
 * editor: how an open editor sits inside its cell, the focus and rejection
 * affordances, the popup shell, the native-picker treatment, and the
 * assistive-technology-only surfaces.
 *
 * Concatenated immediately after `editorsCss` (see `base-styles.ts`), which
 * holds the older `.pg-editor*` rules a theme may already target. Being later
 * in the same stylesheet is what lets these refine those rules without raising
 * specificity — the ordering is load-bearing, so keep it.
 *
 * Every value resolves a theme token; the literals after each `var()` are
 * fallbacks so an unstyled or server-rendered grid is still legible.
 */
export declare const editorsSystemCss = "/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   Editing system (src/editing)\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n/* \u2500\u2500 The editing cell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   The ring is drawn on the CELL, as an 'outline', not on the control and not\n   as a pseudo-element.\n\n   Drawing it on the input meant it traced the input's box, which is inset from\n   the cell by the cell's own padding and sits above the row's bottom border \u2014\n   so the ring visibly clipped at the edges and left slivers of white between\n   itself and the cell boundary.\n\n   ### Why not ::after, which is how the selection edges do it\n   Because ::after on a cell already belongs to the selection system, and that\n   system *removes* it: an edited cell is always the active cell, and\n   cells.css.ts carries\n\n     .pg-cell--active-cell:not(.pg-cell--in-selection)::after { content: none }\n     .pg-cell--single-cell-selection.pg-cell--in-selection\n       .pg-cell--active-cell::after                          { content: none }\n\n   at two and three classes respectively. A '.pg-cell--editing::after' rule is\n   one class, so 'content: none' won and the ring simply never existed \u2014 no\n   pseudo-element was generated at all. Chaining enough selection classes onto\n   the editing rule to outrank those would work, but it would also have to be\n   redone, one class longer, for the rejection flash that recolours the same\n   ring \u2014 a specificity ladder that grows every time the selection CSS changes.\n\n   'outline' sidesteps it entirely: a separate property nothing in the selection\n   system touches, drawn outside the border box so it cannot be clipped by the\n   cell's own overflow, and \u2014 unlike box-shadow, which the selection rules *do*\n   claim and which this file already has to neutralise with !important \u2014 free of\n   any existing contention. It also follows 'border-radius', which is what makes\n   the corner treatment possible at all. */\n\n.pg-cell--editing {\n  position: relative;\n  padding: 0;\n  /* Above neighbouring cells so the ring is never overpainted by the next\n     cell's background or border. */\n  z-index: 2;\n  border-radius: var(--pg-cell-editing-radius, 4px);\n  outline: var(--pg-cell-editing-outline-width, 2px) solid\n           var(--pg-cell-editing-outline-color, var(--pg-colors-primary, #2563eb));\n  /* Negative, so the ring is drawn *inside* the cell's own box. A zero or\n     positive offset puts it in the neighbouring column's territory, where that\n     cell's background paints straight over it. */\n  outline-offset: calc(var(--pg-cell-editing-outline-width, 2px) * -1);\n}\n\n.pg-cell--editing .pg-cell__inner {\n  /* No inline padding while editing: the control spans the cell edge to edge,\n     so the ring on the cell is the only thing framing it. A small block inset\n     keeps the field off the row's top and bottom borders. */\n  padding-inline: 0;\n  padding-block: 2px;\n  /* An inline editor may legitimately paint outside its box (a native picker\n     indicator, a focus glow); the cell clips nothing while editing. */\n  overflow: visible;\n}\n\n/* \u2500\u2500 The fill handle stands down while editing \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   The handle sits in the bottom-right corner of the selection's last cell \u2014\n   which, for the single-cell selection a double-click produces, is the cell now\n   being edited. Left there it overlaps the editing ring at exactly the corner\n   the ring turns, reads as a stray artefact on top of a live control, and gives\n   the cell two conflicting drag affordances at once.\n\n   Hidden rather than removed: display:none takes it out of hit-testing too, so\n   a stray press on the corner cannot start a fill drag out of an open editor,\n   and the handle returns by itself the moment the session ends \u2014 no teardown\n   step that a cancelled or crashed edit could skip. */\n\n.pg-cell--editing .pg-fill-handle { display: none; }\n\n/* \u2500\u2500 The control inside an editing cell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   Transparent, so the cell's own editing surface (above) is what shows.\n\n   Two backgrounds stacked here \u2014 the cell's and the control's \u2014 differed by a\n   hair in several themes and produced a visible inner rectangle. One surface,\n   owned by the cell, keeps the field looking like a single solid control.\n\n   No inline padding: the cell's inner already zeroes it, and an editor adding\n   its own would reintroduce exactly the inset that was asked to go. */\n\n.pg-cell--editing .pg-editor {\n  width: 100%;\n  height: 100%;\n  /* The inner is a flex row, so a bare width:100% is still subject to the\n     item's own shrink and to min-width:auto \u2014 a <select> whose longest option\n     is wider than the column would otherwise refuse to shrink to it, and a\n     short control would sit narrower than the cell. Growing and shrinking from\n     a 100% basis, with the automatic minimum removed, pins the control to the\n     cell at every column width. */\n  flex: 1 1 100%;\n  min-width: 0;\n  padding-inline: 0;\n  padding-block: 0;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  box-sizing: border-box;\n  /* The ring lives on the cell now; a second one here would double-draw. */\n  box-shadow: none;\n}\n\n.pg-cell--editing .pg-editor:focus,\n.pg-cell--editing .pg-editor:focus-visible {\n  outline: none;\n  box-shadow: none;\n}\n\n/* \u2500\u2500 The editing cell's surface \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   An editing cell gets its own solid background rather than inheriting the\n   row's.\n\n   That is the opposite of what the rest of the cell does, and deliberate: while\n   editing, the cell is a control, and a control needs a stable, opaque,\n   maximal-contrast surface to type into. Inheriting a hover tint, a zebra\n   stripe or a selection wash under live text made the field read as \"part of\n   the row\" instead of \"the thing you are typing in\", and the tint shifted the\n   moment the pointer moved.\n\n   ### Why the long selectors and the !important\n   An edited cell is also the focused cell, so it always carries the selection\n   classes \u2014 and those rules in cells.css.ts are deliberately aggressive:\n   .pg-cell--in-selection paints a fill with !important, and\n   .pg-cell--single-cell-selection.pg-cell--in-selection.pg-cell--active-cell\n   forces background-color: transparent !important at specificity 0,3,0. A\n   plain .pg-cell--editing rule (0,1,0, no !important) loses to both, which is\n   why the editing cell kept showing the row through it.\n\n   Chaining .pg-cell--editing onto each of those combinations outranks them, and\n   !important is required to answer the !important they already use \u2014 it is\n   matching the existing convention in that file, not papering over specificity.\n\n   ### Why light and dark are separate rules with separate tokens\n   A single token gets pinned by an app to one literal \u2014 the example app pins\n   --pg-colors-cell-edit-background to #ffffff \u2014 and that value would then follow\n   the grid into dark mode and paint a white cell on a dark row. Giving dark its\n   own hook lets an app override either mode without breaking the other, while\n   overriding neither still yields white on light and dark on dark. */\n\n.pg-cell--editing,\n.pg-cell--editing.pg-cell--in-selection,\n.pg-cell--editing.pg-cell--active-cell,\n.pg-cell--editing.pg-cell--in-selection.pg-cell--active-cell,\n.pg-cell--editing.pg-cell--single-cell-selection.pg-cell--in-selection.pg-cell--active-cell {\n  background-color: var(--pg-colors-cell-edit-background, #fff) !important;\n  /* The selection rules also stamp their own inset ring. Two rings \u2014 theirs and\n     the editing outline \u2014 is the doubled/clipped border that made an editing\n     cell look broken. The editing ring is the only one that should show. */\n  box-shadow: none !important;\n}\n\n[data-pg-mode='dark'] .pg-cell--editing,\n[data-pg-mode='dark'] .pg-cell--editing.pg-cell--in-selection,\n[data-pg-mode='dark'] .pg-cell--editing.pg-cell--active-cell,\n[data-pg-mode='dark'] .pg-cell--editing.pg-cell--in-selection.pg-cell--active-cell,\n[data-pg-mode='dark'] .pg-cell--editing.pg-cell--single-cell-selection.pg-cell--in-selection.pg-cell--active-cell {\n  background-color: var(\n    --pg-colors-cell-edit-background-dark,\n    var(--pg-colors-surface-raised, var(--pg-colors-surface, #1e293b))\n  ) !important;\n  box-shadow: none !important;\n}\n\n/* The range-outline ::after those selection rules draw would sit under the\n   editing ring at a different inset. One frame, not two. */\n.pg-cell--editing.pg-cell--in-selection::after { border-width: 0; }\n\n.pg-editor::placeholder { color: var(--pg-colors-text-secondary, #94a3b8); }\n\n/* Applied by EditorHost to whatever getGui() returned, so a custom editor is\n   boxed like a built-in without having to know about it. */\n.pg-editor-root { box-sizing: border-box; max-width: 100%; }\n\n/* \u2500\u2500 Rejected value: one red pulse, then gone \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   A rejection is an event, not a state. The cell pulses red so the *location*\n   of the problem is unmistakable, and the *reason* travels to a toast, which\n   has room for a sentence a column does not. The previous persistent border\n   plus inline banner competed with the editor for the same few pixels and left\n   the grid looking broken long after the user had understood the problem.\n\n   Animated on 'outline-color', for the same reason the ring itself moved off\n   ::after: the pseudo-element an editing cell would have used is deleted by the\n   selection rules, so the old flash recoloured a border that was never drawn. */\n\n.pg-cell--editing.pg-cell--invalid-flash {\n  animation: pg-editor-invalid-pulse 600ms ease-out 1;\n}\n\n/* A cell with no editor open (onInvalid: 'accept') has no ring to recolour, so\n   it gets a transparent one for the duration of the pulse. */\n.pg-cell--invalid-flash:not(.pg-cell--editing) {\n  border-radius: var(--pg-cell-editing-radius, 4px);\n  outline: var(--pg-cell-editing-outline-width, 2px) solid transparent;\n  outline-offset: calc(var(--pg-cell-editing-outline-width, 2px) * -1);\n  animation: pg-editor-invalid-cell-pulse 600ms ease-out 1;\n}\n\n@keyframes pg-editor-invalid-pulse {\n  0%   { outline-color: var(--pg-colors-danger, #dc2626); }\n  70%  { outline-color: var(--pg-colors-danger, #dc2626); }\n  /* Settles back to the ring's own colour, not to primary directly \u2014 a grid\n     that retinted the ring would otherwise watch every rejection fade to a\n     colour it had overridden away. */\n  100% { outline-color: var(--pg-cell-editing-outline-color, var(--pg-colors-primary, #2563eb)); }\n}\n\n@keyframes pg-editor-invalid-cell-pulse {\n  0%   { outline-color: var(--pg-colors-danger, #dc2626); }\n  70%  { outline-color: var(--pg-colors-danger, #dc2626); }\n  100% { outline-color: transparent; }\n}\n\n/* \u2500\u2500 Native picker inputs (date / datetime / time) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   The browser owns the calendar and clock popovers and they cannot be styled;\n   what can be styled is the field that summons them, and the indicator that\n   invites the click. Giving these a visible affordance is the difference\n   between a date cell that looks editable and one that looks like text. */\n\n.pg-editor--picker {\n  padding-right: 6px;\n  cursor: pointer;\n  font-variant-numeric: tabular-nums;\n}\n\n.pg-editor--picker::-webkit-calendar-picker-indicator {\n  padding: 3px;\n  margin-left: 2px;\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  opacity: 0.55;\n  cursor: pointer;\n  transition: opacity 120ms ease, background 120ms ease;\n}\n\n.pg-editor--picker:hover::-webkit-calendar-picker-indicator,\n.pg-editor--picker:focus::-webkit-calendar-picker-indicator {\n  opacity: 1;\n  background: var(--pg-colors-primary-subtle, #eff6ff);\n}\n\n/* Firefox and Safari render no indicator at all; the field still reads as a\n   control because of the cell ring and the pointer cursor above. */\n.pg-editor--picker::-webkit-datetime-edit { padding: 0; }\n.pg-editor--picker::-webkit-datetime-edit-fields-wrapper { padding: 0; }\n\n/* \u2500\u2500 Select \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   Fills the cell exactly, so the closed control and its open list are both as\n   wide as the column \u2014 and follow it as the column is resized, because the\n   width is a percentage of a cell whose width is already driven by the column\n   stylesheet. A real chevron, so a select cell is distinguishable from a text\n   cell before it is clicked; drawn as a background image because a <select>\n   cannot host children. */\n\n.pg-cell--editing .pg-editor--select {\n  width: 100%;\n  max-width: 100%;\n  min-width: 0;\n  /* A <select>'s intrinsic width is that of its longest option, and as a flex\n     item it would keep it. Both are re-stated here because this rule is the one\n     a theme is most likely to override wholesale. */\n  flex: 1 1 100%;\n  box-sizing: border-box;\n  appearance: none;\n  -webkit-appearance: none;\n  /* Matches the inline padding a rendered cell uses, so the closed control's\n     text sits exactly where the cell's own text was and the value does not\n     visibly jump left when the editor opens. */\n  padding-left: 12px;\n  padding-right: 26px;\n  cursor: pointer;\n  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),\n                    linear-gradient(135deg, currentColor 50%, transparent 50%);\n  background-position: calc(100% - 14px) calc(50% + 1px), calc(100% - 9px) calc(50% + 1px);\n  background-size: 5px 5px, 5px 5px;\n  background-repeat: no-repeat;\n  /* An explicit colour, where every other editor is deliberately transparent.\n     A <select> is the one control whose *popup* the browser paints for us, and\n     Chrome paints that popup with the select's own computed background-color \u2014\n     'transparent' resolves to white there, which is why a dark grid dropped a\n     white option list on the user. The token is the one the editing cell paints\n     itself with, so the closed control still looks like part of the cell. */\n  background-color: var(--pg-colors-cell-edit-background, #fff);\n  color: var(--pg-colors-text-primary, #0f172a);\n}\n\n/* The options themselves. Chrome takes the popup's background from the select,\n   but Firefox and Safari paint each row from the option's own colours, so both\n   have to be stated or one of the three keeps a white list. */\n.pg-cell--editing .pg-editor--select option {\n  background-color: var(--pg-colors-cell-edit-background, #fff);\n  color: var(--pg-colors-text-primary, #0f172a);\n}\n\n[data-pg-mode='dark'] .pg-cell--editing .pg-editor--select,\n[data-pg-mode='dark'] .pg-cell--editing .pg-editor--select option {\n  background-color: var(\n    --pg-colors-cell-edit-background-dark,\n    var(--pg-colors-surface-raised, var(--pg-colors-surface, #1e293b))\n  );\n  color: var(--pg-colors-text-primary, #e2e8f0);\n}\n\n/* \u2500\u2500 Composite editors (control + readout) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   Shared by the range and colour editors so neither re-invents the same row.\n   Any custom editor pairing a control with a label can reuse it. */\n\n.pg-editor-group {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  height: 100%;\n  /* Matches the single-control case: no inline padding while editing. */\n  padding-inline: 0;\n  box-sizing: border-box;\n  background: transparent;\n}\n.pg-editor-group .pg-editor { padding: 0; }\n.pg-editor-group__readout {\n  flex: 0 0 auto;\n  min-width: 4ch;\n  text-align: right;\n  color: var(--pg-colors-text-secondary, #64748b);\n  font-variant-numeric: tabular-nums;\n  font-size: var(--pg-typography-font-size-sm, 12px);\n}\n\n/* \u2500\u2500 Colour \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   One swatch, sized like a control rather than stretched to fill the cell.\n   A full-width colour input reads as a block of paint, not as a picker. */\n\n.pg-editor-group--color { gap: 10px; }\n\n.pg-cell--editing .pg-editor--color {\n  flex: 0 0 auto;\n  width: 30px;\n  height: 20px;\n  padding: 0;\n  border: 1px solid var(--pg-colors-border, #cbd5e1);\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  background: transparent;\n  cursor: pointer;\n  overflow: hidden;\n}\n/* The native swatch carries its own inset padding in Blink/WebKit, which shows\n   as a white frame around the colour. Zeroing it makes the control read as a\n   solid chip. */\n.pg-editor--color::-webkit-color-swatch-wrapper { padding: 0; }\n.pg-editor--color::-webkit-color-swatch { border: none; border-radius: 3px; }\n.pg-editor--color::-moz-color-swatch { border: none; border-radius: 3px; }\n\n.pg-editor--color-hex {\n  flex: 1;\n  min-width: 0;\n  font-variant-numeric: tabular-nums;\n  text-transform: uppercase;\n}\n\n.pg-editor__color-presets { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }\n.pg-editor__color-preset {\n  width: 14px;\n  height: 14px;\n  padding: 0;\n  border: 1px solid var(--pg-colors-border, #e2e8f0);\n  border-radius: 3px;\n  cursor: pointer;\n}\n.pg-editor__color-preset:focus-visible {\n  outline: 2px solid var(--pg-colors-primary, #2563eb);\n  outline-offset: 1px;\n}\n\n/* \u2500\u2500 Range \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pg-cell--editing .pg-editor--range {\n  flex: 1;\n  min-width: 0;\n  height: 4px;\n  padding: 0;\n  accent-color: var(--pg-colors-primary, #2563eb);\n  cursor: pointer;\n}\n\n/* \u2500\u2500 Switch \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pg-cell--editing .pg-editor--switch {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  width: auto;\n  padding-inline: 0;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n}\n.pg-editor__switch-track {\n  position: relative;\n  flex: 0 0 auto;\n  width: 34px;\n  height: 18px;\n  border-radius: 9px;\n  background: var(--pg-colors-border-strong, #cbd5e1);\n  transition: background 140ms ease;\n}\n.pg-editor__switch-thumb {\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  background: var(--pg-colors-surface, #fff);\n  box-shadow: 0 1px 3px rgba(0,0,0,0.28);\n  transition: transform 140ms ease;\n}\n.pg-editor--switch-on .pg-editor__switch-track { background: var(--pg-colors-primary, #2563eb); }\n.pg-editor--switch-on .pg-editor__switch-thumb { transform: translateX(16px); }\n.pg-editor--switch:focus-visible .pg-editor__switch-track {\n  box-shadow: 0 0 0 2px var(--pg-colors-surface, #fff),\n              0 0 0 4px var(--pg-colors-primary, #2563eb);\n}\n\n/* \u2500\u2500 Checkbox \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pg-cell--editing .pg-editor--checkbox {\n  width: 16px;\n  height: 16px;\n  margin-inline: 0;\n  margin-block: 0;\n  padding: 0;\n  accent-color: var(--pg-colors-primary, #2563eb);\n  cursor: pointer;\n}\n\n/* \u2500\u2500 Password reveal \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pg-editor__reveal {\n  flex: 0 0 auto;\n  padding: 3px 7px;\n  border: none;\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  background: transparent;\n  color: var(--pg-colors-text-secondary, #64748b);\n  font-size: var(--pg-typography-font-size-xs, 11px);\n  cursor: pointer;\n}\n.pg-editor__reveal:hover,\n.pg-editor__reveal[aria-pressed='true'] {\n  background: var(--pg-colors-background-alt, #f1f5f9);\n  color: var(--pg-colors-text-primary, #0f172a);\n}\n.pg-editor__reveal:focus-visible {\n  outline: 2px solid var(--pg-colors-primary, #2563eb);\n  outline-offset: -1px;\n}\n\n/* \u2500\u2500 Popup shell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   Portalled editors \u2014 textarea, autocomplete, and any custom editor whose\n   isPopup() returns true. position:fixed is what lets it escape the grid's\n   overflow clipping; PopupService writes the coordinates. */\n\n.pg-editor-popup {\n  position: fixed;\n  z-index: 99999;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  padding: 8px;\n  background: var(--pg-colors-surface, #fff);\n  border: 1px solid var(--pg-colors-border, #e2e8f0);\n  border-radius: var(--pg-borders-radius-lg, 10px);\n  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.08);\n  overflow: hidden;\n  /* Hidden until PopupService has measured and placed it; without this the\n     popup paints once at the origin and visibly jumps into position. */\n  opacity: 0;\n  transform: translateY(-4px) scale(0.98);\n  transform-origin: top center;\n  transition: opacity 130ms ease, transform 130ms ease;\n}\n.pg-editor-popup--visible { opacity: 1; transform: translateY(0) scale(1); }\n.pg-editor-popup[data-placement='above'] { transform-origin: bottom center; }\n\n/* Inside a popup the control is a normal bordered field again \u2014 there is no\n   cell ring out here to stand in for one. */\n.pg-editor-popup .pg-editor {\n  height: auto;\n  padding: 7px 9px;\n  border: 1px solid var(--pg-colors-border, #cbd5e1);\n  border-radius: var(--pg-borders-radius-sm, 6px);\n  background: var(--pg-colors-surface-raised, #fff);\n  color: var(--pg-colors-text-primary, #0f172a);\n}\n.pg-editor-popup .pg-editor:focus {\n  border-color: var(--pg-colors-primary, #2563eb);\n  box-shadow: 0 0 0 3px var(--pg-colors-primary-subtle, rgba(37,99,235,0.16));\n}\n.pg-editor-popup .pg-editor--textarea {\n  min-height: 96px;\n  resize: vertical;\n  line-height: 1.55;\n}\n\n/* \u2500\u2500 Autocomplete listbox \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* The combobox fills the popup, which PopupService has already sized to the\n   cell. Without this the root shrink-wraps its widest option and the search\n   field above it ends up narrower than the list below \u2014 the two halves of one\n   control disagreeing about how wide they are. */\n.pg-editor-combobox {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: 0;\n  min-height: 0;\n}\n.pg-editor-popup .pg-editor--autocomplete { width: 100%; box-sizing: border-box; }\n\n.pg-editor-listbox {\n  margin: 6px 0 0;\n  padding: 0;\n  list-style: none;\n  max-height: 220px;\n  overflow-y: auto;\n}\n\n/* \u2500\u2500 Virtualised list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   The spacer holds the full scroll height of every option; the window holds\n   only the rows in view and is moved down by a single transform. Both carry\n   role=\"presentation\", so the accessibility tree still sees a listbox whose\n   children are options. */\n\n.pg-editor-listbox__spacer { position: relative; }\n.pg-editor-listbox__window {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  /* Its own layer, so scrolling repaints the window rather than the popup. */\n  will-change: transform;\n}\n/* A windowed row must be exactly as tall as the maths assumes, or the rows\n   drift out of step with the scrollbar. Only applied inside the window, so a\n   short list keeps its natural, content-sized rows. */\n.pg-editor-listbox__window .pg-editor-option {\n  height: var(--pg-ac-row-height, 32px);\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n}\n.pg-editor-option {\n  padding: 7px 10px;\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  cursor: pointer;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: var(--pg-colors-text-primary, #0f172a);\n  font-size: inherit;\n}\n.pg-editor-option:hover,\n.pg-editor-option--active { background: var(--pg-colors-row-hover, var(--pg-colors-background-alt, #f1f5f9)); }\n.pg-editor-option[aria-selected='true'] {\n  /* The same pair a selected row uses: the subtle primary wash behind it, and\n     the primary itself for the text \u2014 which is also what a link cell resolves\n     to, so a chosen option and a link are the same colour in every theme. */\n  background: var(--pg-colors-primary-subtle, #eff6ff);\n  color: var(--pg-colors-primary, #2563eb);\n  font-weight: 500;\n}\n.pg-editor-option[aria-selected='true']:hover {\n  background: var(--pg-colors-primary-subtle-hover, var(--pg-colors-primary-subtle, #eff6ff));\n}\n.pg-editor-option--empty { color: var(--pg-colors-text-secondary, #64748b); cursor: default; }\n.pg-editor-option--empty:hover { background: transparent; }\n\n/* \u2500\u2500 Waiting for a remote list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   A row, not an overlay: the list is already the right shape and the right\n   width, and a spinner sitting in it keeps the popup from resizing when the\n   results land. It reads as \"the list is being filled in\" rather than as a\n   panel covering something. */\n\n.pg-editor-option--loading {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--pg-colors-text-secondary, #64748b);\n  cursor: default;\n}\n.pg-editor-option--loading:hover { background: transparent; }\n\n.pg-editor-spinner {\n  flex: none;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  /* Three-quarters of a ring in the track colour and a quarter in the accent:\n     the gap is what makes the rotation visible without animating anything but\n     one transform. */\n  border: 2px solid var(--pg-colors-border, #e2e8f0);\n  border-top-color: var(--pg-colors-primary, #2563eb);\n  animation: pg-editor-spin 700ms linear infinite;\n}\n@keyframes pg-editor-spin { to { transform: rotate(360deg); } }\n\n/* \u2500\u2500 Multi-select \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   The tick is drawn from the option's own aria-selected state, so the visual\n   state and the announced state cannot disagree \u2014 there is only one source for\n   both, and no second element to keep in step. */\n\n.pg-editor-option--checkable {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.pg-editor-option__label {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.pg-editor-option__check {\n  flex: none;\n  position: relative;\n  /* The grid's own checkbox tokens, not a second set: a tick in a dropdown and\n     a tick in a row are the same control to the user, and two token families\n     drift apart the first time a theme retints one of them. Geometry matches\n     the variant stylesheets exactly, so the two read as one component. */\n  width: var(--pg-sizing-checkbox-size, 16px);\n  height: var(--pg-sizing-checkbox-size, 16px);\n  box-sizing: border-box;\n  border: 1px solid var(--pg-colors-checkbox-border, var(--pg-colors-border, #cbd5e1));\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  background: var(--pg-colors-checkbox-background, var(--pg-colors-surface, #fff));\n  transition:\n    background var(--pg-transitions-duration-fast, 120ms) ease,\n    border-color var(--pg-transitions-duration-fast, 120ms) ease;\n}\n.pg-editor-option[aria-selected='true'] .pg-editor-option__check {\n  border-color: var(--pg-colors-primary, #2563eb);\n  background: var(--pg-colors-primary, #2563eb);\n}\n/* The tick: two borders of a rotated box, at the same offsets the row\n   checkboxes use, so it needs no icon asset and lines up with them. */\n.pg-editor-option[aria-selected='true'] .pg-editor-option__check::after {\n  content: '';\n  position: absolute;\n  left: 4px;\n  top: 1px;\n  width: 5px;\n  height: 9px;\n  border: 2px solid var(--pg-colors-on-primary, #fff);\n  border-top: none;\n  border-left: none;\n  transform: rotate(45deg);\n}\n\n/* The check-all row, between the search box and the list it acts on. The box\n   itself carries the pg-checkbox class, so it *is* the grid's checkbox \u2014 every\n   theme variant skins it along with the ones in the rows, including the\n   indeterminate state. Only layout is set here. */\n.pg-editor-selectall {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 6px;\n  padding: 6px 10px;\n  border-bottom: 1px solid var(--pg-colors-border, #e2e8f0);\n  cursor: pointer;\n  user-select: none;\n  color: var(--pg-colors-text-secondary, #64748b);\n  font-size: inherit;\n}\n.pg-editor-selectall:hover { color: var(--pg-colors-text-primary, #0f172a); }\n.pg-editor-selectall__box { margin: 0; }\n.pg-editor-selectall__box:disabled { cursor: default; }\n.pg-editor-selectall:has(.pg-editor-selectall__box:disabled) {\n  opacity: 0.5;\n  cursor: default;\n}\n\n/* \u2500\u2500 Assistive-technology-only text \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   Visually hidden but never display:none \u2014 content that is not rendered is not\n   announced, which would defeat the purpose. Functional geometry, not theming,\n   so no tokens here. */\n\n.pg-editor-live-region,\n.pg-editor-sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* \u2500\u2500 Reduced motion \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   The rejection pulse and the popup entrance are decorative. The invalid state\n   still reaches the user through the toast and through aria-invalid, so\n   removing the motion costs no information. */\n\n@media (prefers-reduced-motion: reduce) {\n  .pg-editor-popup { transition: none; transform: none; }\n  .pg-editor-popup--visible { transform: none; }\n  .pg-cell--editing.pg-cell--invalid-flash,\n  .pg-cell--invalid-flash:not(.pg-cell--editing) { animation: none; }\n  /* No pulse, so the rejection has to be a steady colour instead \u2014 otherwise\n     the only visual signal disappears along with the motion. */\n  .pg-cell--editing.pg-cell--invalid-flash,\n  .pg-cell--invalid-flash:not(.pg-cell--editing) {\n    outline-color: var(--pg-colors-danger, #dc2626);\n  }\n  .pg-editor__switch-track,\n  .pg-editor__switch-thumb { transition: none; }\n}\n\n/* \u2500\u2500 Forced colours (Windows high contrast) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   System colours replace every token, so the ring has to be re-stated in terms\n   the mode understands or the editing cell loses its outline entirely. */\n\n@media (forced-colors: active) {\n  .pg-cell--editing { outline-color: Highlight; }\n  .pg-cell--editing.pg-cell--invalid-flash,\n  .pg-cell--invalid-flash:not(.pg-cell--editing) { outline-color: LinkText; }\n  .pg-editor-popup { border-color: CanvasText; }\n}\n.pg-cell--editing > .pg-cell__inner:has(> .pg-editor--select) {\n  padding-inline: 0 !important;\n}\n";
//# sourceMappingURL=editors-system.css.d.ts.map