/** * Styles for the built-in cell renderers. * * Every value comes from a theme token with a literal fallback, and every * value-driven quantity (a progress bar's fill, a tag's colour) arrives as a * CSS custom property rather than an inline declaration — that is what keeps * these themeable, and it is also what lets the renderers' `patch` hooks update * a cell with one property write instead of a rebuild. */ export declare const builtInRenderersCss = "\n/* \u2500\u2500 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\u2500\u2500\u2500\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.pg-cell__value--multiline {\n white-space: pre-line;\n line-height: var(--pg-typography-line-height-tight, 1.3);\n}\n/* Clamped multiline. The line count is a custom property so the renderer sets\n one value rather than emitting a rule per column. */\n.pg-cell__value--clamped,\n.pg-long-text__text--clamped {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: var(--pg-cell-max-lines, 2);\n line-clamp: var(--pg-cell-max-lines, 2);\n overflow: hidden;\n}\n.pg-cell__value--json {\n font-family: var(--pg-typography-font-family-mono, ui-monospace, monospace);\n font-size: var(--pg-typography-font-size-xs, 11px);\n}\n\n/* \u2500\u2500 Long 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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n/* The root drops the base .pg-cell__value clipping and hands it to the text\n element instead: the toggle is absolutely positioned, and an overflow-hidden\n ancestor would clip it away at the corner it is supposed to sit in. */\n.pg-cell__value--long-text {\n overflow: visible;\n min-width: 0;\n}\n.pg-long-text__text {\n display: block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n/* Gutter for the toggle, held open whether or not it is currently visible, so\n the ellipsis lands clear of the icon and nothing reflows on hover. */\n.pg-long-text__text--inset {\n padding-inline-end: var(--pg-long-text-toggle-gutter, 22px);\n}\n/* Clamped variants wrap, so the single-line ellipsis rule has to give way.\n The display value is re-asserted rather than inherited from the shared clamp\n rule in the Text section above: both selectors are one class deep, so the\n base rule between them would win on source order and quietly kill the\n line clamp. */\n.pg-long-text__text--clamped {\n display: -webkit-box;\n white-space: normal;\n text-overflow: clip;\n word-break: break-word;\n line-height: var(--pg-typography-line-height-tight, 1.3);\n}\n\n/* Anchored to the cell (.pg-cell is the nearest positioned ancestor), not to\n the text, so the control sits in a fixed corner instead of drifting with the\n value's length. Its size and inset are component tokens rather than raw\n pixels \u2014 the scale stops at --pg-spacing-xs, and this control needs to sit\n tighter into the corner than 4px allows. */\n.pg-long-text__toggle {\n position: absolute;\n inset-block-end: var(--pg-long-text-toggle-inset, 2px);\n inset-inline-end: var(--pg-long-text-toggle-inset, 2px);\n /* Above everything else that can appear inside a cell \u2014 the fill handle and\n the selection canvas both sit at 10. A control the user can see but only\n partly press is worse than one that is not offered at all. */\n z-index: var(--pg-long-text-toggle-z, 11);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--pg-long-text-toggle-size, 18px);\n height: var(--pg-long-text-toggle-size, 18px);\n padding: 0;\n border: none;\n border-radius: var(--pg-borders-radius-sm, 4px);\n background: var(--pg-colors-surface-overlay, #fff);\n color: var(--pg-colors-text-secondary, #64748b);\n box-shadow: var(--pg-shadows-xs, 0 1px 2px rgba(15, 23, 42, 0.12));\n cursor: pointer;\n font-family: inherit;\n transition:\n opacity var(--pg-transitions-duration-fast, 120ms) var(--pg-transitions-easing-base, ease),\n background var(--pg-transitions-duration-fast, 120ms) var(--pg-transitions-easing-base, ease),\n color var(--pg-transitions-duration-fast, 120ms) var(--pg-transitions-easing-base, ease);\n}\n/* The reveal is opacity only \u2014 the control stays hit-testable at all times.\n Gating pointer-events on :hover made the press a race: the browser hit-tests\n pointerdown against whatever style is committed at that instant, so a press\n landing in the same frame the cell first hovers would resolve to the cell\n underneath and the toggle would appear to do nothing. There is no\n invisible-but-clickable state to worry about either \u2014 reaching this corner\n with a cursor is what hovers the cell, so by then the control is already\n shown.\n\n Scoped to devices that can actually hover: on a touch screen there is no\n hover to enter, and a control hidden behind one would be invisible and\n unreachable forever. */\n@media (hover: hover) {\n .pg-long-text__toggle--hover { opacity: 0; }\n .pg-cell:hover .pg-long-text__toggle--hover,\n .pg-long-text__toggle--hover:focus-visible,\n .pg-long-text__toggle--hover[aria-expanded='true'] {\n opacity: 1;\n }\n}\n.pg-long-text__toggle:hover,\n.pg-long-text__toggle[aria-expanded='true'] {\n background: var(--pg-colors-surface-sunken, #f1f5f9);\n color: var(--pg-colors-text-primary, #0f172a);\n}\n.pg-long-text__toggle:focus-visible {\n outline: var(--pg-borders-width-focus, 2px) solid var(--pg-colors-primary, #2563eb);\n outline-offset: 1px;\n}\n/* Press target wider than the paint. The visual is a deliberately unobtrusive\n 18px, well under the ~24px a pointer target should offer, so the whole icon\n plus a margin around it answers to a press rather than only the part of the\n glyph the cursor happens to land on. Costs no layout \u2014 the pseudo-element is\n positioned, so it never affects the cell's box. */\n.pg-long-text__toggle::after {\n content: '';\n position: absolute;\n inset: calc(var(--pg-long-text-toggle-hit-slop, 5px) * -1);\n}\n/* The fill handle claims the same corner on the active range's last cell.\n Step aside rather than stack \u2014 one of the two would be unclickable. */\n.pg-cell--has-fill-handle .pg-long-text__toggle {\n inset-inline-end: var(--pg-spacing-md, 12px);\n}\n\n/* \u2500\u2500 Long text overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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/* Fixed, and on document.body, for the same reason as the avatar roster below:\n anchored inside the grid it would be clipped by the scroll container and\n would scroll away from its own trigger. Width joins the coordinates as a\n custom property because it too is resolved per cell at open time. */\n.pg-long-text-overlay {\n position: fixed;\n top: var(--pg-overlay-y, 0);\n left: var(--pg-overlay-x, 0);\n z-index: var(--pg-z-overlay, 1200);\n display: none;\n box-sizing: border-box;\n width: var(--pg-overlay-width, 320px);\n max-height: var(--pg-overlay-max-height, 320px);\n overflow-y: auto;\n padding: var(--pg-spacing-sm, 8px) var(--pg-spacing-md, 12px);\n border: 1px solid var(--pg-colors-border, #e2e8f0);\n border-radius: var(--pg-borders-radius-md, 8px);\n background: var(--pg-colors-surface-overlay, #fff);\n box-shadow: var(--pg-shadows-dropdown, 0 16px 48px rgba(15, 23, 42, 0.24));\n color: var(--pg-colors-text-primary, #0f172a);\n font-size: var(--pg-typography-font-size-sm, 12px);\n}\n.pg-long-text-overlay--open { display: block; }\n.pg-long-text-overlay:focus { outline: none; }\n\n.pg-long-text-overlay__title {\n margin-block-end: var(--pg-spacing-xs, 4px);\n font-size: var(--pg-typography-font-size-xs, 11px);\n font-weight: var(--pg-typography-font-weight-semibold, 600);\n text-transform: uppercase;\n letter-spacing: var(--pg-typography-letter-spacing-wide, 0.04em);\n color: var(--pg-colors-text-secondary, #64748b);\n}\n/* The heading element is reused across opens, so an untitled panel hides it\n rather than the overlay rebuilding its subtree each time. */\n.pg-long-text-overlay__title--hidden { display: none; }\n\n/* pre-wrap keeps the value's own line breaks; overflow-wrap is what stops an\n unbroken 400-character token from widening the panel past its anchor. */\n.pg-long-text-overlay__body {\n white-space: pre-wrap;\n overflow-wrap: anywhere;\n line-height: var(--pg-typography-line-height-base, 1.5);\n}\n\n/* \u2500\u2500 Links \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.pg-cell-link {\n color: var(--pg-colors-primary, #2563eb);\n text-decoration: none;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.pg-cell-link:hover { text-decoration: underline; }\n.pg-cell-link:focus-visible {\n outline: var(--pg-borders-width-focus, 2px) solid var(--pg-colors-primary, #2563eb);\n outline-offset: 1px;\n border-radius: var(--pg-borders-radius-sm, 4px);\n}\n\n/* \u2500\u2500 Media \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.pg-cell-image {\n border-radius: var(--pg-borders-radius-sm, 4px);\n display: block;\n flex-shrink: 0;\n}\n.pg-cell-image--round,\n.pg-cell-avatar--round { border-radius: var(--pg-borders-radius-pill, 9999px); }\n/* Initials fallback. Its background is set per-value by the renderer, so only\n the text colour is themed here \u2014 white reads against every generated hue. */\n.pg-cell-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: #fff;\n font-size: var(--pg-typography-font-size-xs, 11px);\n font-weight: var(--pg-typography-font-weight-semibold, 600);\n border-radius: var(--pg-borders-radius-sm, 4px);\n letter-spacing: var(--pg-typography-letter-spacing-wide, 0.02em);\n}\n\n/* \u2500\u2500 Profile \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 avatar's diameter is one custom property the renderer may override per\n column, and every other measurement here is derived from it \u2014 so a 36px\n avatar retunes the whole cell without a second declaration. */\n.pg-cell__value--profile {\n display: flex;\n align-items: center;\n min-width: 0;\n width: 100%;\n}\n.pg-profile {\n --pg-profile-avatar-size: 32px;\n display: flex;\n align-items: center;\n gap: var(--pg-spacing-sm, 8px);\n min-width: 0;\n width: 100%;\n}\n.pg-profile__avatar {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n flex: 0 0 auto;\n width: var(--pg-profile-avatar-size, 32px);\n height: var(--pg-profile-avatar-size, 32px);\n overflow: hidden;\n background: var(--pg-colors-surface-sunken, #f1f5f9);\n /* Scaled from the diameter rather than fixed, so initials stay proportionate\n at every configured size. */\n font-size: calc(var(--pg-profile-avatar-size, 32px) * 0.36);\n font-weight: var(--pg-typography-font-weight-semibold, 600);\n line-height: 1;\n}\n.pg-profile__avatar--circle { border-radius: var(--pg-borders-radius-pill, 9999px); }\n.pg-profile__avatar--rounded { border-radius: var(--pg-borders-radius-md, 8px); }\n.pg-profile__avatar--square { border-radius: 0; }\n.pg-profile__avatar--initials {\n background: var(--pg-profile-avatar-color, var(--pg-colors-primary, #2563eb));\n color: #fff;\n letter-spacing: var(--pg-typography-letter-spacing-wide, 0.02em);\n}\n.pg-profile__avatar--icon { color: var(--pg-profile-avatar-color, var(--pg-colors-text-secondary, #64748b)); }\n.pg-profile__image {\n width: 100%;\n height: 100%;\n display: block;\n object-fit: var(--pg-profile-avatar-fit, cover);\n}\n\n/* min-width: 0 on both the text block and its lines is what lets the ellipsis\n happen at all \u2014 a flex item defaults to min-content, which refuses to shrink\n below the longest word. */\n.pg-profile__text {\n display: flex;\n min-width: 0;\n flex: 1 1 auto;\n}\n.pg-profile--stacked .pg-profile__text {\n flex-direction: column;\n justify-content: center;\n gap: 1px;\n}\n.pg-profile--inline .pg-profile__text {\n flex-direction: row;\n align-items: baseline;\n gap: var(--pg-spacing-xs, 4px);\n}\n.pg-profile__title,\n.pg-profile__subtitle {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.pg-profile__title {\n color: var(--pg-colors-text-primary, #0f172a);\n font-weight: var(--pg-typography-font-weight-medium, 500);\n line-height: var(--pg-typography-line-height-tight, 1.3);\n}\n.pg-profile__subtitle {\n color: var(--pg-colors-text-secondary, #64748b);\n font-size: var(--pg-typography-font-size-xs, 11px);\n line-height: var(--pg-typography-line-height-tight, 1.3);\n}\n.pg-profile--inline .pg-profile__subtitle { flex: 0 1 auto; }\n.pg-profile__separator {\n flex: 0 0 auto;\n color: var(--pg-colors-text-secondary, #64748b);\n font-size: var(--pg-typography-font-size-xs, 11px);\n}\n\n/* \u2500\u2500 Country \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.pg-cell__value--country {\n display: inline-flex;\n align-items: center;\n gap: var(--pg-spacing-xs, 4px);\n min-width: 0;\n}\n.pg-cell-flag {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n line-height: 1;\n}\n/* Flags are wider than they are tall, so a rounded corner and a hairline\n border are what stop a white flag (Japan, Switzerland) from dissolving into\n the row behind it. */\n.pg-cell-flag__img {\n display: block;\n border-radius: var(--pg-borders-radius-sm, 2px);\n object-fit: cover;\n}\n/* Emoji flags are drawn a touch small against body text at the same size. */\n.pg-cell-flag--emoji {\n font-size: calc(var(--pg-typography-font-size-md, 13px) * 1.15);\n}\n.pg-cell-country__name {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* \u2500\u2500 Pills \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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/* .pg-badge, .pg-badge--overflow and .pg-cell__value--tags are already defined\n (in context-menu.css.ts and editors.css.ts) and are not repeated here \u2014 only\n the variants this feature adds are. */\n.pg-badge--chip {\n display: inline-flex;\n align-items: center;\n gap: var(--pg-spacing-xs, 4px);\n}\n.pg-badge--tag { font-weight: var(--pg-typography-font-weight-medium, 500); }\n.pg-cell__value--badge,\n.pg-cell__value--chip,\n.pg-cell__value--tag {\n display: inline-flex;\n align-items: center;\n gap: var(--pg-spacing-xs, 4px);\n min-width: 0;\n overflow: hidden;\n}\n\n/* \u2500\u2500 Icon \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.pg-cell__value--icon {\n display: inline-flex;\n align-items: center;\n gap: var(--pg-spacing-xs, 4px);\n}\n.pg-cell-icon__label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* \u2500\u2500 Progress \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.pg-cell__value--progress {\n display: flex;\n align-items: center;\n gap: var(--pg-spacing-sm, 8px);\n width: 100%;\n min-width: 0;\n}\n.pg-cell-progress {\n flex: 1 1 auto;\n min-width: 24px;\n height: var(--pg-progress-height, 6px);\n border-radius: var(--pg-borders-radius-pill, 9999px);\n background: var(--pg-colors-surface-sunken, #f1f5f9);\n overflow: hidden;\n}\n/* The fill is a scale transform rather than a width so an update is a\n compositor-only change \u2014 no layout, no paint of the track. */\n.pg-cell-progress__fill {\n height: 100%;\n width: 100%;\n transform-origin: left center;\n transform: scaleX(var(--pg-progress-fraction, 0));\n background: var(--pg-progress-color, var(--pg-colors-primary, #2563eb));\n transition: transform var(--pg-transitions-duration-base, 150ms)\n var(--pg-transitions-easing-base, ease);\n}\n.pg-cell-progress__label {\n flex: 0 0 auto;\n font-size: var(--pg-typography-font-size-xs, 11px);\n color: var(--pg-colors-text-secondary, #64748b);\n font-variant-numeric: tabular-nums;\n}\n\n/* \u2500\u2500 Rating \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.pg-cell__value--rating {\n display: inline-flex;\n align-items: center;\n gap: 1px;\n}\n.pg-cell-rating__item {\n display: inline-flex;\n color: var(--pg-colors-border-strong, #cbd5e1);\n}\n.pg-cell-rating__item--on { color: var(--pg-colors-warning, #f59e0b); }\n.pg-cell-rating__value {\n margin-left: var(--pg-spacing-xs, 4px);\n font-size: var(--pg-typography-font-size-xs, 11px);\n color: var(--pg-colors-text-secondary, #64748b);\n font-variant-numeric: tabular-nums;\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\u2500 */\n/* The colour itself arrives as --pg-cell-color, written by the renderer; every\n other value here is a theme token. That split is what lets a theme restyle\n the swatch \u2014 its size, radius, border, the checkerboard \u2014 without knowing\n anything about the data, and it is what makes a repaint a two-property write\n rather than a rebuilt cell. */\n.pg-cell__value--color {\n display: inline-flex;\n align-items: center;\n gap: var(--pg-spacing-xs, 4px);\n min-width: 0;\n}\n.pg-cell-color__swatch {\n flex: 0 0 auto;\n width: var(--pg-cell-swatch-size, 14px);\n height: var(--pg-cell-swatch-size, 14px);\n background-color: var(--pg-cell-color, transparent);\n /* An inset ring rather than a border: it cannot shift the swatch's box, so a\n column of swatches stays on one baseline whatever the theme sets it to.\n A ring is also what keeps a white or transparent swatch visible at all. */\n box-shadow: inset 0 0 0 1px var(--pg-colors-border-strong, #cbd5e1);\n}\n.pg-cell-color__swatch--square { border-radius: 0; }\n.pg-cell-color__swatch--rounded { border-radius: var(--pg-borders-radius-sm, 4px); }\n.pg-cell-color__swatch--circle { border-radius: var(--pg-borders-radius-pill, 9999px); }\n.pg-cell-color__swatch--bar {\n width: var(--pg-cell-swatch-bar-width, 22px);\n height: var(--pg-cell-swatch-bar-height, 6px);\n border-radius: var(--pg-borders-radius-pill, 9999px);\n}\n/* Translucent colours only. The colour is painted as a gradient layer *over*\n the checkerboard so it composites against it exactly as it would against the\n cell, which is the whole point of showing the checks. */\n.pg-cell-color__swatch--alpha {\n background-image:\n linear-gradient(var(--pg-cell-color, transparent), var(--pg-cell-color, transparent)),\n conic-gradient(\n var(--pg-cell-checker-color, rgba(15, 23, 42, 0.18)) 0deg 90deg,\n transparent 90deg 180deg,\n var(--pg-cell-checker-color, rgba(15, 23, 42, 0.18)) 180deg 270deg,\n transparent 270deg 360deg\n );\n background-size: 100% 100%, var(--pg-cell-checker-size, 6px) var(--pg-cell-checker-size, 6px);\n background-color: var(--pg-colors-surface, #ffffff);\n}\n.pg-cell-color__text {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-variant-numeric: tabular-nums;\n}\n/* Filled variant: the label sits on the colour, in whichever of black or white\n the renderer measured as readable against it. */\n.pg-cell-color--fill .pg-cell-color__text {\n min-width: var(--pg-cell-swatch-size, 14px);\n padding: var(--pg-cell-color-pill-padding-y, 2px) var(--pg-spacing-sm, 8px);\n border-radius: var(--pg-borders-radius-pill, 9999px);\n background: var(--pg-cell-color, transparent);\n color: var(--pg-cell-color-contrast, var(--pg-colors-text-primary, #0f172a));\n box-shadow: inset 0 0 0 1px var(--pg-colors-border-strong, #cbd5e1);\n font-size: var(--pg-typography-font-size-xs, 11px);\n line-height: var(--pg-typography-line-height-tight, 1.3);\n}\n\n/* \u2500\u2500 Avatar group \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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/* Sizes are a named scale, set once as custom properties and consumed by every\n rule below, so a variant retunes the whole component by overriding two\n values rather than a dozen declarations. */\n.pg-avatar-group--xs { --pg-avatar-size: 18px; --pg-avatar-overlap: 4px; }\n.pg-avatar-group--sm { --pg-avatar-size: 24px; --pg-avatar-overlap: 6px; }\n.pg-avatar-group--md { --pg-avatar-size: 30px; --pg-avatar-overlap: 8px; }\n.pg-avatar-group--lg { --pg-avatar-size: 38px; --pg-avatar-overlap: 10px; }\n\n.pg-cell__value--avatar-group {\n display: inline-flex;\n align-items: center;\n min-width: 0;\n}\n.pg-avatar-group {\n display: inline-flex;\n align-items: center;\n /* A negative margin on every item after the first is what produces the\n overlap. Reversing the flex direction would stack them the other way but\n also reverse the reading order for a screen reader, so the z-index rules\n below do that job instead. */\n padding-inline-start: var(--pg-avatar-overlap, 8px);\n}\n.pg-avatar-group__item {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n flex: 0 0 auto;\n width: var(--pg-avatar-size, 24px);\n height: var(--pg-avatar-size, 24px);\n margin-inline-start: calc(var(--pg-avatar-overlap, 8px) * -1);\n border-radius: var(--pg-borders-radius-pill, 9999px);\n /* The ring is what separates one avatar from the one it overlaps. It is the\n row background rather than a border colour so the stack reads correctly on\n hovered, selected and striped rows alike. */\n box-shadow: 0 0 0 2px var(--pg-colors-row-background, #fff);\n background: var(--pg-colors-surface-sunken, #f1f5f9);\n overflow: hidden;\n font-size: calc(var(--pg-avatar-size, 24px) * 0.4);\n font-weight: var(--pg-typography-font-weight-semibold, 600);\n line-height: 1;\n}\n/* Earlier avatars sit above later ones, so the stack reads left-to-right the\n way the eye scans it. */\n.pg-avatar-group__item:nth-child(1) { z-index: 6; }\n.pg-avatar-group__item:nth-child(2) { z-index: 5; }\n.pg-avatar-group__item:nth-child(3) { z-index: 4; }\n.pg-avatar-group__item:nth-child(4) { z-index: 3; }\n.pg-avatar-group__item:nth-child(5) { z-index: 2; }\n.pg-avatar-group__item:nth-child(n + 6) { z-index: 1; }\n\n.pg-avatar-group__img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n}\n.pg-avatar-group__item--initials {\n background: var(--pg-avatar-color, var(--pg-colors-primary, #2563eb));\n color: #fff;\n letter-spacing: var(--pg-typography-letter-spacing-wide, 0.02em);\n}\n/* The counter is a real button, so its own appearance has to be reset before\n the shared item rules can take effect. */\n.pg-avatar-group__more {\n padding: 0;\n border: none;\n font-family: inherit;\n cursor: pointer;\n background: var(--pg-colors-surface-sunken, #f1f5f9);\n color: var(--pg-colors-text-secondary, #64748b);\n transition: background var(--pg-transitions-duration-fast, 120ms)\n var(--pg-transitions-easing-base, ease);\n}\n.pg-avatar-group__more:hover:not(:disabled) {\n background: var(--pg-colors-border-strong, #cbd5e1);\n color: var(--pg-colors-text-primary, #0f172a);\n}\n.pg-avatar-group__more:disabled { cursor: default; }\n.pg-avatar-group__more:focus-visible {\n outline: var(--pg-borders-width-focus, 2px) solid var(--pg-colors-primary, #2563eb);\n outline-offset: 1px;\n}\n\n/* \u2500\u2500 Avatar group overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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/* Fixed, and on document.body: anchored inside the grid it would be clipped by\n the scroll container and would scroll away from its own trigger. The two\n coordinates arrive as custom properties because position is genuinely\n dynamic \u2014 everything else about the panel stays in this stylesheet. */\n.pg-avatar-overlay {\n position: fixed;\n top: var(--pg-overlay-y, 0);\n left: var(--pg-overlay-x, 0);\n z-index: var(--pg-z-overlay, 1200);\n display: none;\n box-sizing: border-box;\n width: var(--pg-avatar-overlay-width, 240px);\n max-height: var(--pg-overlay-max-height, 320px);\n overflow-y: auto;\n padding: var(--pg-spacing-xs, 4px);\n border: 1px solid var(--pg-colors-border, #e2e8f0);\n border-radius: var(--pg-borders-radius-md, 8px);\n background: var(--pg-colors-surface-overlay, #fff);\n box-shadow: var(--pg-shadows-dropdown, 0 16px 48px rgba(15, 23, 42, 0.24));\n color: var(--pg-colors-text-primary, #0f172a);\n font-size: var(--pg-typography-font-size-sm, 12px);\n}\n.pg-avatar-overlay--open { display: block; }\n.pg-avatar-overlay:focus { outline: none; }\n\n.pg-avatar-overlay__title {\n padding: var(--pg-spacing-xs, 4px) var(--pg-spacing-sm, 8px);\n font-size: var(--pg-typography-font-size-xs, 11px);\n font-weight: var(--pg-typography-font-weight-semibold, 600);\n text-transform: uppercase;\n letter-spacing: var(--pg-typography-letter-spacing-wide, 0.04em);\n color: var(--pg-colors-text-secondary, #64748b);\n}\n.pg-avatar-overlay__list { display: flex; flex-direction: column; }\n\n.pg-avatar-overlay__row {\n display: flex;\n align-items: center;\n gap: var(--pg-spacing-sm, 8px);\n width: 100%;\n box-sizing: border-box;\n padding: var(--pg-spacing-xs, 4px) var(--pg-spacing-sm, 8px);\n border: none;\n border-radius: var(--pg-borders-radius-sm, 4px);\n background: transparent;\n color: inherit;\n font: inherit;\n text-align: start;\n min-width: 0;\n}\n.pg-avatar-overlay__row--interactive { cursor: pointer; }\n.pg-avatar-overlay__row--interactive:hover {\n background: var(--pg-colors-row-hover, #f0f7ff);\n}\n.pg-avatar-overlay__row--interactive:focus-visible {\n outline: var(--pg-borders-width-focus, 2px) solid var(--pg-colors-primary, #2563eb);\n outline-offset: -2px;\n}\n\n.pg-avatar-overlay__avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: var(--pg-avatar-overlay-size, 26px);\n height: var(--pg-avatar-overlay-size, 26px);\n border-radius: var(--pg-borders-radius-pill, 9999px);\n overflow: hidden;\n background: var(--pg-colors-surface-sunken, #f1f5f9);\n font-size: var(--pg-typography-font-size-xs, 11px);\n font-weight: var(--pg-typography-font-weight-semibold, 600);\n}\n.pg-avatar-overlay__avatar--initials {\n background: var(--pg-avatar-color, var(--pg-colors-primary, #2563eb));\n color: #fff;\n}\n.pg-avatar-overlay__img { width: 100%; height: 100%; object-fit: cover; display: block; }\n\n.pg-avatar-overlay__text { min-width: 0; }\n.pg-avatar-overlay__name {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.pg-avatar-overlay__detail {\n font-size: var(--pg-typography-font-size-xs, 11px);\n color: var(--pg-colors-text-secondary, #64748b);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\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 */\n/* Built from the same checkbox input the checkbox renderer uses, so it keeps\n native semantics, keyboard behaviour and the delegated toggle handler; only\n the painting differs.\n\n Selectors are input.pg-cell-checkbox--switch, not the bare class.\n .pg-cell-checkbox sets a 16x16 box and lives in a stylesheet module\n concatenated after this one, so at equal specificity it would win and squash\n the track into a circle. Element + class outranks it regardless of source\n order, which makes these rules independent of the module ordering in\n base-styles.ts. */\ninput.pg-cell-checkbox--switch {\n appearance: none;\n -webkit-appearance: none;\n position: relative;\n flex-shrink: 0;\n box-sizing: border-box;\n width: var(--pg-switch-width, 30px);\n height: var(--pg-switch-height, 18px);\n padding: 0;\n margin: 0;\n border: none;\n border-radius: var(--pg-borders-radius-pill, 9999px);\n background: var(--pg-colors-border-strong, #cbd5e1);\n cursor: pointer;\n transition: background var(--pg-transitions-duration-fast, 120ms)\n var(--pg-transitions-easing-base, ease);\n}\n/* The knob. Inset by --pg-switch-gap on every side, so its size and travel are\n both derived from the track \u2014 change the track and the knob follows. */\ninput.pg-cell-checkbox--switch::after {\n content: '';\n position: absolute;\n top: var(--pg-switch-gap, 2px);\n left: var(--pg-switch-gap, 2px);\n width: calc(var(--pg-switch-height, 18px) - (var(--pg-switch-gap, 2px) * 2));\n height: calc(var(--pg-switch-height, 18px) - (var(--pg-switch-gap, 2px) * 2));\n border-radius: var(--pg-borders-radius-pill, 9999px);\n background: var(--pg-colors-surface, #fff);\n box-shadow: var(--pg-shadows-xs, 0 1px 2px rgba(15, 23, 42, 0.25));\n transition: transform var(--pg-transitions-duration-fast, 120ms)\n var(--pg-transitions-easing-base, ease);\n}\ninput.pg-cell-checkbox--switch:checked {\n background: var(--pg-colors-primary, #2563eb);\n}\ninput.pg-cell-checkbox--switch:checked::after {\n transform: translateX(\n calc(var(--pg-switch-width, 30px) - var(--pg-switch-height, 18px))\n );\n}\ninput.pg-cell-checkbox--switch:hover:not(:disabled) {\n background: var(--pg-colors-text-disabled, #94a3b8);\n}\ninput.pg-cell-checkbox--switch:checked:hover:not(:disabled) {\n background: var(--pg-colors-primary-hover, #1d4ed8);\n}\ninput.pg-cell-checkbox--switch:disabled {\n cursor: default;\n opacity: var(--pg-opacity-disabled, 0.65);\n}\ninput.pg-cell-checkbox--switch:focus-visible {\n outline: var(--pg-borders-width-focus, 2px) solid var(--pg-colors-primary, #2563eb);\n outline-offset: 2px;\n}\n\n/* \u2500\u2500 Button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.pg-cell-button {\n display: inline-flex;\n align-items: center;\n gap: var(--pg-spacing-xs, 4px);\n padding: 2px var(--pg-spacing-sm, 8px);\n border: 1px solid var(--pg-colors-border, #e2e8f0);\n border-radius: var(--pg-borders-radius-sm, 4px);\n background: var(--pg-colors-surface, #fff);\n color: var(--pg-colors-text-primary, #0f172a);\n font-family: inherit;\n font-size: var(--pg-typography-font-size-xs, 11px);\n font-weight: var(--pg-typography-font-weight-medium, 500);\n cursor: pointer;\n white-space: nowrap;\n transition: background var(--pg-transitions-duration-fast, 100ms)\n var(--pg-transitions-easing-base, ease);\n}\n.pg-cell-button:hover:not(:disabled) { background: var(--pg-colors-row-hover, #f0f7ff); }\n.pg-cell-button:disabled {\n cursor: default;\n opacity: var(--pg-opacity-disabled, 0.65);\n}\n.pg-cell-button--primary {\n background: var(--pg-colors-primary, #2563eb);\n border-color: var(--pg-colors-primary, #2563eb);\n color: var(--pg-colors-on-primary, #fff);\n}\n.pg-cell-button--primary:hover:not(:disabled) {\n background: var(--pg-colors-primary-hover, #1d4ed8);\n}\n.pg-cell-button--danger {\n background: var(--pg-colors-error, #dc2626);\n border-color: var(--pg-colors-error, #dc2626);\n color: #fff;\n}\n\n/* \u2500\u2500 Actions \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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/* Tone is expressed as two custom properties \u2014 an accent and the text drawn on\n it \u2014 set once per variant and consumed by every rule below. A variant\n therefore restyles by naming two colours instead of redeclaring the button. */\n.pg-cell__value--actions {\n display: flex;\n align-items: center;\n min-width: 0;\n width: 100%;\n}\n.pg-actions {\n display: flex;\n align-items: center;\n gap: var(--pg-spacing-xs, 4px);\n min-width: 0;\n width: 100%;\n}\n.pg-actions--start { justify-content: flex-start; }\n.pg-actions--center { justify-content: center; }\n.pg-actions--end { justify-content: flex-end; }\n.pg-actions--sm { --pg-action-padding-y: 2px; --pg-action-font-size: var(--pg-typography-font-size-xs, 11px); }\n.pg-actions--md { --pg-action-padding-y: 4px; --pg-action-font-size: var(--pg-typography-font-size-sm, 12px); }\n\n.pg-action {\n --pg-action-accent: var(--pg-colors-border-strong, #cbd5e1);\n --pg-action-on-accent: var(--pg-colors-text-primary, #0f172a);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n gap: var(--pg-spacing-xs, 4px);\n box-sizing: border-box;\n padding: var(--pg-action-padding-y, 2px) var(--pg-spacing-sm, 8px);\n border: 1px solid var(--pg-action-accent);\n border-radius: var(--pg-borders-radius-sm, 4px);\n background: var(--pg-colors-surface, #fff);\n color: var(--pg-action-on-accent);\n font-family: inherit;\n font-size: var(--pg-action-font-size, 11px);\n font-weight: var(--pg-typography-font-weight-medium, 500);\n line-height: 1.4;\n white-space: nowrap;\n cursor: pointer;\n transition: background var(--pg-transitions-duration-fast, 100ms)\n var(--pg-transitions-easing-base, ease);\n}\n.pg-action:hover:not(:disabled) { background: var(--pg-colors-row-hover, #f0f7ff); }\n.pg-action:focus-visible {\n outline: var(--pg-borders-width-focus, 2px) solid var(--pg-colors-primary, #2563eb);\n outline-offset: 1px;\n}\n.pg-action:disabled {\n cursor: default;\n opacity: var(--pg-opacity-disabled, 0.65);\n}\n.pg-action__label {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n/* An icon-only button is square rather than a wide pill with a glyph adrift in\n it \u2014 the padding that reads correctly beside a label is too much without one. */\n.pg-action:not(:has(.pg-action__label)) {\n padding-inline: var(--pg-spacing-xs, 4px);\n}\n\n.pg-action--secondary {\n --pg-action-accent: var(--pg-colors-border, #e2e8f0);\n --pg-action-on-accent: var(--pg-colors-text-primary, #0f172a);\n}\n.pg-action--primary {\n --pg-action-accent: var(--pg-colors-primary, #2563eb);\n --pg-action-on-accent: var(--pg-colors-on-primary, #fff);\n background: var(--pg-action-accent);\n}\n.pg-action--primary:hover:not(:disabled) { background: var(--pg-colors-primary-hover, #1d4ed8); }\n/* The consequential tones stay outlined rather than filled: a row of solid\n red and amber buttons repeated down a column reads as an error state. The\n accent carries the meaning through the border and the text. */\n.pg-action--success {\n --pg-action-accent: var(--pg-colors-success, #16a34a);\n --pg-action-on-accent: var(--pg-colors-success, #16a34a);\n}\n.pg-action--warning {\n --pg-action-accent: var(--pg-colors-warning, #f59e0b);\n --pg-action-on-accent: var(--pg-colors-warning, #f59e0b);\n}\n.pg-action--danger {\n --pg-action-accent: var(--pg-colors-error, #dc2626);\n --pg-action-on-accent: var(--pg-colors-error, #dc2626);\n}\n.pg-action--ghost {\n --pg-action-accent: transparent;\n --pg-action-on-accent: var(--pg-colors-text-secondary, #64748b);\n background: transparent;\n}\n.pg-action--menu { padding-inline: var(--pg-spacing-xs, 4px); }\n.pg-action--menu[aria-expanded='true'] {\n background: var(--pg-colors-surface-sunken, #f1f5f9);\n color: var(--pg-colors-text-primary, #0f172a);\n}\n/* Busy: the control is already disabled by the executor, so this only has to\n say why. A pulse rather than a spinner keeps it to one property and no extra\n element inside a button that may be 20px wide. */\n.pg-action--busy {\n opacity: var(--pg-opacity-disabled, 0.65);\n animation: pg-action-pulse var(--pg-transitions-duration-slow, 900ms)\n var(--pg-transitions-easing-base, ease) infinite alternate;\n}\n@keyframes pg-action-pulse {\n from { opacity: var(--pg-opacity-disabled, 0.65); }\n to { opacity: 1; }\n}\n@media (prefers-reduced-motion: reduce) {\n .pg-action--busy { animation: none; }\n}\n\n/* \u2500\u2500 Actions menu \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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/* Fixed, and on document.body: anchored inside the grid it would be clipped by\n the scroll container and would scroll away from its own trigger. The two\n coordinates arrive as custom properties because position is genuinely\n dynamic \u2014 everything else about the panel stays in this stylesheet. */\n.pg-actions-menu {\n position: fixed;\n top: var(--pg-overlay-y, 0);\n left: var(--pg-overlay-x, 0);\n z-index: var(--pg-z-overlay, 1200);\n display: none;\n box-sizing: border-box;\n min-width: var(--pg-actions-menu-width, 160px);\n max-height: var(--pg-overlay-max-height, 320px);\n overflow-y: auto;\n padding: var(--pg-spacing-xs, 4px);\n border: 1px solid var(--pg-colors-border, #e2e8f0);\n border-radius: var(--pg-borders-radius-md, 8px);\n background: var(--pg-colors-surface-overlay, #fff);\n box-shadow: var(--pg-shadows-dropdown, 0 16px 48px rgba(15, 23, 42, 0.24));\n color: var(--pg-colors-text-primary, #0f172a);\n font-size: var(--pg-typography-font-size-sm, 12px);\n}\n.pg-actions-menu--open { display: block; }\n.pg-actions-menu:focus { outline: none; }\n.pg-actions-menu__title {\n padding: var(--pg-spacing-xs, 4px) var(--pg-spacing-sm, 8px);\n font-size: var(--pg-typography-font-size-xs, 11px);\n font-weight: var(--pg-typography-font-weight-semibold, 600);\n text-transform: uppercase;\n letter-spacing: var(--pg-typography-letter-spacing-wide, 0.04em);\n color: var(--pg-colors-text-secondary, #64748b);\n}\n.pg-actions-menu__title--hidden { display: none; }\n.pg-actions-menu__list { display: flex; flex-direction: column; }\n\n.pg-actions-menu__item {\n display: flex;\n align-items: center;\n gap: var(--pg-spacing-sm, 8px);\n width: 100%;\n box-sizing: border-box;\n padding: var(--pg-spacing-xs, 4px) var(--pg-spacing-sm, 8px);\n border: none;\n border-radius: var(--pg-borders-radius-sm, 4px);\n background: transparent;\n color: inherit;\n font: inherit;\n text-align: start;\n cursor: pointer;\n}\n.pg-actions-menu__item:hover:not(:disabled) {\n background: var(--pg-colors-row-hover, #f0f7ff);\n}\n.pg-actions-menu__item:focus-visible {\n outline: var(--pg-borders-width-focus, 2px) solid var(--pg-colors-primary, #2563eb);\n outline-offset: -2px;\n}\n.pg-actions-menu__item:disabled {\n cursor: default;\n opacity: var(--pg-opacity-disabled, 0.65);\n}\n.pg-actions-menu__item--danger { color: var(--pg-colors-error, #dc2626); }\n.pg-actions-menu__item--warning { color: var(--pg-colors-warning, #f59e0b); }\n.pg-actions-menu__item--success { color: var(--pg-colors-success, #16a34a); }\n.pg-actions-menu__item--primary { color: var(--pg-colors-primary, #2563eb); }\n/* Fixed-width slot, occupied or not, so labels line up down the menu instead\n of stepping in and out with each item's icon. */\n.pg-actions-menu__icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: 16px;\n height: 16px;\n}\n.pg-actions-menu__label {\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n"; //# sourceMappingURL=built-in-renderers.css.d.ts.map