@qoretechnologies/reqraft 0.10.66-pr.145.gcb1e59d → 0.10.66

package/dist/components/form/engine/compactRowStyles.js

@@ -27,7 +27,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledAbsorbedLabel = exports.StyledAbsorbedField = exports.StyledGroupBody = exports.StyledColorSwatch = exports.StyledCodePreview = exports.MONO_FONT_STACK = exports.StyledRowInset = exports.StyledColumn = exports.StyledActionSlot = exports.StyledStatusDot = exports.StyledRowActions = exports.StyledRowValue = exports.StyledCardLabel = exports.StyledCardHeading = exports.StyledLabelDesc = exports.StyledRowLabel = exports.StyledLabelBlock = exports.StyledEditCard = exports.StyledClusterNode = exports.StyledStatusBoxGroupLabel = exports.StyledRequiredClusterHeader = exports.StyledRequiredClusterBox = exports.StyledStatusBox = exports.StyledGroupHeaderLine = exports.StyledGroupHeader = exports.StyledCompactPanel = exports.PANEL_LEFT_CSS = exports.LABEL_COL = exports.LABEL_COL_VAR = exports.LABEL_AFFORDANCE_WIDTH = exports.LABEL_COL_MAX = exports.LABEL_COL_MIN = exports.CALM_SECTION_HEADER_INSET = exports.CALM_SECTION_INSET = exports.GROUP_INDENT = exports.COMPACT_PANEL_LEFT = exports.COMPACT_VALUE_LEFT = exports.COMPACT_ROW_GAP = exports.COMPACT_ROW_PAD_X = exports.COMPACT_LABEL_COL = exports.HEADER_GAP = void 0;
+exports.StyledAbsorbedLabel = exports.StyledAbsorbedField = exports.StyledGroupBody = exports.StyledCodePreview = exports.MONO_FONT_STACK = exports.StyledRowInset = exports.StyledColumn = exports.StyledActionSlot = exports.StyledStatusDot = exports.StyledRowActions = exports.StyledRowValue = exports.StyledCardLabel = exports.StyledCardHeading = exports.StyledLabelDesc = exports.StyledLabelAsterisk = exports.StyledLabelName = exports.StyledRowLabel = exports.StyledLabelBlock = exports.StyledEditCard = exports.StyledClusterNode = exports.StyledStatusBoxGroupLabel = exports.StyledRequiredClusterHeader = exports.StyledRequiredClusterBox = exports.StyledStatusBox = exports.StyledGroupHeaderLine = exports.StyledGroupHeader = exports.StyledCompactPanel = exports.PANEL_LEFT_CSS = exports.LABEL_COL = exports.LABEL_COL_VAR = exports.LABEL_AFFORDANCE_WIDTH = exports.labelAffordanceWidth = exports.LABEL_HELP_WIDTH_TOUCH = exports.LABEL_HELP_WIDTH = exports.LABEL_ASTERISK_WIDTH = exports.LABEL_ASTERISK_SIZE = exports.LABEL_COLUMN_MIN = exports.LABEL_COL_MAX = exports.GROUP_INDENT = exports.isCompactNarrow = exports.COMPACT_STACKED_VALUE_INDENT = exports.COMPACT_MIN_VALUE_WIDTH = exports.COMPACT_PANEL_LEFT = exports.COMPACT_VALUE_LEFT = exports.COMPACT_ROW_GAP = exports.COMPACT_ROW_PAD_X = exports.COMPACT_LABEL_COL = exports.HEADER_GAP = void 0;
 var reqore_1 = require("@qoretechnologies/reqore");
 var sizes_1 = require("@qoretechnologies/reqore/dist/constants/sizes");
 var styled_components_1 = __importStar(require("styled-components"));
@@ -46,47 +46,74 @@ exports.COMPACT_ROW_GAP = 14; // grid column gap
 exports.COMPACT_VALUE_LEFT = exports.COMPACT_ROW_PAD_X + exports.COMPACT_LABEL_COL + exports.COMPACT_ROW_GAP;
 // The surface starts a touch left of the value text, for inner left padding.
 exports.COMPACT_PANEL_LEFT = exports.COMPACT_VALUE_LEFT - 10;
-// Left offset for the group sub-labels / cluster header, kept equal to the row's
-// own horizontal padding so the labels line up flush with the field labels below
-// them (no extra gutter — the spine/rail that used a fluid indent are gone).
-exports.GROUP_INDENT = "".concat(exports.COMPACT_ROW_PAD_X, "px");
 /**
- * Calm appearance: the inset of everything inside a section — rows, group
- * headings, the one-of sentence, and the section's own header label, so all of
- * them start on one left edge.
+ * The least room a row's value has beside its label (qorus#646, David: "on a narrow screen... put the wide output
+ * on a line below the header, slightly indented"). A form where the value column would be narrower stacks its rows:
+ * the label and the row's actions on the first line, the value under them, indented by
+ * `COMPACT_STACKED_VALUE_INDENT`.
  */
-exports.CALM_SECTION_INSET = 16;
+exports.COMPACT_MIN_VALUE_WIDTH = 320;
+/** How far a stacked row's value is indented under its label. */
+exports.COMPACT_STACKED_VALUE_INDENT = 12;
 /**
- * The extra inset a calm section header's label needs to land on that edge:
- * Reqore pads a `normal` panel's title bar by `PADDING_FROM_SIZE.normal`, and
- * the label makes up the rest itself.
+ * Whether a form `width` wide stacks its rows: beside a label column `labelColumn` wide (the measured one,
+ * `LABEL_COL_VAR`), the row's gap and its padding, its value column would be under `COMPACT_MIN_VALUE_WIDTH`. With
+ * the widest labels (220px and their affordances) that is a form under about 600px; with the narrowest, about 500px.
  */
-exports.CALM_SECTION_HEADER_INSET = exports.CALM_SECTION_INSET - sizes_1.PADDING_FROM_SIZE.normal;
+var isCompactNarrow = function (width, labelColumn) {
+    return width - (labelColumn + exports.COMPACT_ROW_GAP + 2 * exports.COMPACT_ROW_PAD_X) < exports.COMPACT_MIN_VALUE_WIDTH;
+};
+exports.isCompactNarrow = isCompactNarrow;
+// Left offset for the group sub-labels / cluster header, kept equal to the row's
+// own horizontal padding so the labels line up flush with the field labels below
+// them (no extra gutter — the spine/rail that used a fluid indent are gone).
+exports.GROUP_INDENT = "".concat(exports.COMPACT_ROW_PAD_X, "px");
 // Measured label column (GLOBAL). The label column sizes to the WIDEST field
-// label across the whole form, clamped to [MIN, MAX]. FormEngine measures the
+// label across the whole form, its text clamped to MAX, and is never narrower
+// than LABEL_COLUMN_MIN. FormEngine measures the
 // labels once and writes the result to `LABEL_COL_VAR` on the compact scroll
 // wrap; the grid column and the value-surface offsets below all read it (falling
 // back to the fixed default until the measurement lands). Expressing the offsets
 // FROM the column var preserves the "value surface starts at a constant x"
 // invariant — the column may resize, but the surface stays glued to its edge.
-exports.LABEL_COL_MIN = 120;
 exports.LABEL_COL_MAX = exports.COMPACT_LABEL_COL; // 220
 /**
- * Room reserved beside a field's NAME for the chrome that trails it, summed from
- * the parts rather than guessed: the required asterisk (10px), the `?` that opens
- * the long description (12px), and the two 3px gaps of `StyledRowLabel`.
+ * The narrowest label column, chrome included: a form of short names keeps the column it always had (a 120px floor
+ * under the name plus the 32px its chrome was reckoned at). The floor is the column's, not the name's: put under the
+ * name, it widened every form by the help button's real width, where only names that need the room should take it.
+ */
+exports.LABEL_COLUMN_MIN = 152;
+/** The required asterisk beside a name, and the room it takes: the icon and its tiny left margin. */
+exports.LABEL_ASTERISK_SIZE = 10;
+exports.LABEL_ASTERISK_WIDTH = exports.LABEL_ASTERISK_SIZE + 2;
+/**
+ * The help button beside a name: reqore's `tiny` button (26px), or `small` (32px) for a finger. It is a button in the
+ * tab order (qorus#646), so the room it takes is its own width, not the 12px of the icon it once was.
+ */
+exports.LABEL_HELP_WIDTH = sizes_1.SIZE_TO_PX.tiny;
+exports.LABEL_HELP_WIDTH_TOUCH = sizes_1.SIZE_TO_PX.small;
+/**
+ * Room reserved beside a field's NAME for the chrome that trails it, summed from the parts rather than guessed: the
+ * required asterisk, the help button and the two 3px gaps of the name's line.
  *
- * Added to the measured column AFTER the min/max clamp. Inside it, a label long
- * enough to reach the ceiling spends the allowance on itself and the `?` wraps to
- * a line of its own.
+ * Added to the measured column AFTER the min/max clamp. Inside it, a label long enough to reach the ceiling wraps,
+ * with the asterisk on its last line, after its last word, and the help at the column's right edge.
  *
- * The 4px of slack is not padding for its own sake: the measurement rounds (an
- * off-DOM `offsetWidth` is an integer) while the rendered text width is
- * fractional, so a column sized to the exact sum still wraps. Measured on an auth
- * profile — "Authentication Schemes" renders 152px of text and needs
- * 152+3+10+3+12 = 180, was given exactly 180, and wrapped anyway.
+ * It counted the help as the 12px icon it was before it became a button (26px): every name within 14px of the
+ * column's width put its asterisk on a line of its own under it (Foxhoundn, qlip #392: "The required asterisk on a
+ * new line is not good, keep it on the same line as the field name").
+ *
+ * The 4px of slack is not padding for its own sake: the measurement rounds (an off-DOM `offsetWidth` is an integer)
+ * while the rendered text width is fractional, so a column sized to the exact sum still wraps. Measured on an auth
+ * profile — "Authentication Schemes" renders 152px of text and, given exactly the sum, wrapped anyway.
  */
-exports.LABEL_AFFORDANCE_WIDTH = 10 + 12 + 3 * 2 + 4;
+var labelAffordanceWidth = function (coarse) {
+    if (coarse === void 0) { coarse = false; }
+    return exports.LABEL_ASTERISK_WIDTH + (coarse ? exports.LABEL_HELP_WIDTH_TOUCH : exports.LABEL_HELP_WIDTH) + 3 * 2 + 4;
+};
+exports.labelAffordanceWidth = labelAffordanceWidth;
+/** The room beside a name for a mouse's pointer; a finger's help is wider (`labelAffordanceWidth(true)`). */
+exports.LABEL_AFFORDANCE_WIDTH = (0, exports.labelAffordanceWidth)();
 exports.LABEL_COL_VAR = '--readfirst-label-col';
 exports.LABEL_COL = "var(".concat(exports.LABEL_COL_VAR, ", ").concat(exports.COMPACT_LABEL_COL, "px)");
 exports.PANEL_LEFT_CSS = "calc(".concat(exports.LABEL_COL, " + ").concat(exports.COMPACT_ROW_PAD_X + exports.COMPACT_ROW_GAP - 10, "px)");
@@ -94,9 +121,9 @@ exports.PANEL_LEFT_CSS = "calc(".concat(exports.LABEL_COL, " + ").concat(exports
 // gives its sticky header) with a translucent theme tint + a moderate blur, the
 // way the IDE's DashboardModule overrides its own header. `translateZ(0)`
 // promotes the header to its own GPU layer, which stops the backdrop-filter
-// repaint flicker on scroll. `$headerBg` is a pre-mixed translucent colour so
+// repaint flicker on scroll. `$headerBg` is a pre-mixed translucent color so
 // content blurs softly through.
-exports.StyledCompactPanel = (0, styled_components_1.default)(reqore_1.ReqorePanel)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  /* The wrapper must not clip, or nothing INSIDE it can pin.\n  \n     ReqorePanel sets its wrapper to `overflow: hidden` unless its own header\n     is sticky \u2014 and a clipping box is a scrollport, so a status box header\n     inside it resolves against the wrapper instead of the page and stops\n     pinning. That coupling is right for the panel's own header and wrong for\n     its descendants': a host that turns this form's toolbar off (a two-field\n     form inside a longer page, where a pinned search bar is the biggest thing\n     on screen and the least useful) was silently turning the box headers off\n     with it.\n  \n     The clip is the panel's rounded corners, and this panel is transparent and\n     border-less \u2014 `flat raised minimal`, no background of its own \u2014 so there\n     is nothing for it to clip. */\n  ", "\n  /* A NARROW header dressed by the consumer (`compactPanelProps` label, icon\n     or actions) stacks: the label and the consumer's actions share the first\n     line, and the toolbar takes the whole second line.\n\n     ReqorePanel lays its header out as one unwrapping row \u2014 the label, then an\n     action group that never shrinks. The toolbar is one of those actions and\n     is as wide as the form, so at phone width the label was squeezed to\n     nothing and the consumer's own action was pushed past the panel's edge and\n     clipped. Flattening the action group (`display: contents`) lets its\n     members wrap with the label, and `order` moves the toolbar after them. */\n  ", "\n  > .reqore-panel-title {\n    /* The blur + translateZ exist only to make the STICKY top-level toolbar ghost\n       content beneath it; a nested sub-form's header isn't sticky, so skip them\n       (and the stacking context translateZ creates). */\n    ", "\n    /* Above the status-box headers, which pin just below this toolbar. A\n       pinned header cannot leave its own box, so when the end of a box\n       scrolls up past the toolbar it pushes the header up with it \u2014 and with\n       both at ReqorePanel's sticky z-index the header, later in the\n       document, slid OVER the toolbar and covered the search and the\n       meter. One step higher and it slides under the toolbar's blur\n       instead. Nested sub-forms pin nothing, so they keep the default. */\n    ", "\n    /* The glass itself. A classic panel paints its own surface behind the\n       header; a calm one is transparent, so without this the pinned toolbar\n       had nothing behind it at all and the rows \u2014 and a box header leaving its\n       box \u2014 scrolled through the meter and the search in full contrast. */\n    ", "\n    padding-top: ", "px;\n    /* A header with a SEARCH ROW keeps the `big` gap below it \u2014 a tall\n       interactive control earns separation from the content it filters. A\n       header without one (search hidden via `compactToolbar`, self-hidden on\n       a single-option form, or no toolbar at all) is a thin strip, and at\n       `big` its padding stacked onto the panel content's own 8px into a 26px\n       dead band between the completion meter and the first status box \u2014\n       rejected on build #140 as \"unnecessarily big\". `normal` lands it at\n       the boxes' own 10px rhythm, and scoping the change here keeps every\n       search-bearing form pixel-identical. */\n    padding-bottom: ", "px;\n  }\n\n  /* Group framing. The HORIZONTAL rule is a real element in the header\n     (StyledGroupHeaderLine) so it sits on the name's row, centred, and stretches\n     from the name out to the status chip pinned at the far end \u2014 which needs the\n     title's left group to fill the header width. The VERTICAL group spine is\n     drawn by StyledGroupBody (so it shares the required-group rail's coordinate\n     space and the two line up instead of doubling). */\n  .options-readfirst-group {\n    position: relative;\n  }\n  .options-readfirst-group > .reqore-panel-title > :first-child,\n  .options-readfirst-group > .reqore-panel-title > :first-child > :first-child,\n  .options-readfirst-group .reqore-panel-title-label-row {\n    flex: 1 1 auto;\n    min-width: 0;\n  }\n\n  /* An injected option action declared `show: 'hover'` \u2014 the shape ReqorePanel\n     honours on the classic path \u2014 is revealed only while its row or card is\n     hovered or holds focus. The compact slots render plain buttons, so the gate\n     has to be CSS here. Kept focus-visible too, so the action stays reachable by\n     keyboard. Opacity rather than display keeps the slot's width stable, so rows\n     don't reflow on hover. */\n  .options-injected-action-hover {\n    opacity: 0;\n    /* Not hit-testable while invisible \u2014 an opacity:0 button still takes taps\n       and clicks, which reads as a mystery control firing out of nowhere. */\n    pointer-events: none;\n    transition: opacity 0.15s ease;\n  }\n  .readfirst-row:hover .options-injected-action-hover,\n  .readfirst-row:focus-within .options-injected-action-hover,\n  .options-readfirst-card:hover .options-injected-action-hover,\n  .options-readfirst-card:focus-within .options-injected-action-hover {\n    opacity: 1;\n    pointer-events: auto;\n  }\n  /* Touch and other hover-less pointers never fire :hover, so a hover-gated\n     action would be permanently unreachable there. Show it unconditionally\n     instead \u2014 losing the tidiness beats losing the functionality. */\n  @media (hover: none), (pointer: coarse) {\n    .options-injected-action-hover {\n      opacity: 1;\n      pointer-events: auto;\n    }\n  }\n"], ["\n  /* The wrapper must not clip, or nothing INSIDE it can pin.\n  \n     ReqorePanel sets its wrapper to \\`overflow: hidden\\` unless its own header\n     is sticky \u2014 and a clipping box is a scrollport, so a status box header\n     inside it resolves against the wrapper instead of the page and stops\n     pinning. That coupling is right for the panel's own header and wrong for\n     its descendants': a host that turns this form's toolbar off (a two-field\n     form inside a longer page, where a pinned search bar is the biggest thing\n     on screen and the least useful) was silently turning the box headers off\n     with it.\n  \n     The clip is the panel's rounded corners, and this panel is transparent and\n     border-less \u2014 \\`flat raised minimal\\`, no background of its own \u2014 so there\n     is nothing for it to clip. */\n  ", "\n  /* A NARROW header dressed by the consumer (\\`compactPanelProps\\` label, icon\n     or actions) stacks: the label and the consumer's actions share the first\n     line, and the toolbar takes the whole second line.\n\n     ReqorePanel lays its header out as one unwrapping row \u2014 the label, then an\n     action group that never shrinks. The toolbar is one of those actions and\n     is as wide as the form, so at phone width the label was squeezed to\n     nothing and the consumer's own action was pushed past the panel's edge and\n     clipped. Flattening the action group (\\`display: contents\\`) lets its\n     members wrap with the label, and \\`order\\` moves the toolbar after them. */\n  ", "\n  > .reqore-panel-title {\n    /* The blur + translateZ exist only to make the STICKY top-level toolbar ghost\n       content beneath it; a nested sub-form's header isn't sticky, so skip them\n       (and the stacking context translateZ creates). */\n    ", "\n    /* Above the status-box headers, which pin just below this toolbar. A\n       pinned header cannot leave its own box, so when the end of a box\n       scrolls up past the toolbar it pushes the header up with it \u2014 and with\n       both at ReqorePanel's sticky z-index the header, later in the\n       document, slid OVER the toolbar and covered the search and the\n       meter. One step higher and it slides under the toolbar's blur\n       instead. Nested sub-forms pin nothing, so they keep the default. */\n    ", "\n    /* The glass itself. A classic panel paints its own surface behind the\n       header; a calm one is transparent, so without this the pinned toolbar\n       had nothing behind it at all and the rows \u2014 and a box header leaving its\n       box \u2014 scrolled through the meter and the search in full contrast. */\n    ", "\n    padding-top: ", "px;\n    /* A header with a SEARCH ROW keeps the \\`big\\` gap below it \u2014 a tall\n       interactive control earns separation from the content it filters. A\n       header without one (search hidden via \\`compactToolbar\\`, self-hidden on\n       a single-option form, or no toolbar at all) is a thin strip, and at\n       \\`big\\` its padding stacked onto the panel content's own 8px into a 26px\n       dead band between the completion meter and the first status box \u2014\n       rejected on build #140 as \"unnecessarily big\". \\`normal\\` lands it at\n       the boxes' own 10px rhythm, and scoping the change here keeps every\n       search-bearing form pixel-identical. */\n    padding-bottom: ", "px;\n  }\n\n  /* Group framing. The HORIZONTAL rule is a real element in the header\n     (StyledGroupHeaderLine) so it sits on the name's row, centred, and stretches\n     from the name out to the status chip pinned at the far end \u2014 which needs the\n     title's left group to fill the header width. The VERTICAL group spine is\n     drawn by StyledGroupBody (so it shares the required-group rail's coordinate\n     space and the two line up instead of doubling). */\n  .options-readfirst-group {\n    position: relative;\n  }\n  .options-readfirst-group > .reqore-panel-title > :first-child,\n  .options-readfirst-group > .reqore-panel-title > :first-child > :first-child,\n  .options-readfirst-group .reqore-panel-title-label-row {\n    flex: 1 1 auto;\n    min-width: 0;\n  }\n\n  /* An injected option action declared \\`show: 'hover'\\` \u2014 the shape ReqorePanel\n     honours on the classic path \u2014 is revealed only while its row or card is\n     hovered or holds focus. The compact slots render plain buttons, so the gate\n     has to be CSS here. Kept focus-visible too, so the action stays reachable by\n     keyboard. Opacity rather than display keeps the slot's width stable, so rows\n     don't reflow on hover. */\n  .options-injected-action-hover {\n    opacity: 0;\n    /* Not hit-testable while invisible \u2014 an opacity:0 button still takes taps\n       and clicks, which reads as a mystery control firing out of nowhere. */\n    pointer-events: none;\n    transition: opacity 0.15s ease;\n  }\n  .readfirst-row:hover .options-injected-action-hover,\n  .readfirst-row:focus-within .options-injected-action-hover,\n  .options-readfirst-card:hover .options-injected-action-hover,\n  .options-readfirst-card:focus-within .options-injected-action-hover {\n    opacity: 1;\n    pointer-events: auto;\n  }\n  /* Touch and other hover-less pointers never fire :hover, so a hover-gated\n     action would be permanently unreachable there. Show it unconditionally\n     instead \u2014 losing the tidiness beats losing the functionality. */\n  @media (hover: none), (pointer: coarse) {\n    .options-injected-action-hover {\n      opacity: 1;\n      pointer-events: auto;\n    }\n  }\n"])), function (_a) {
+exports.StyledCompactPanel = (0, styled_components_1.default)(reqore_1.ReqorePanel)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  /* The wrapper must not clip, or nothing INSIDE it can pin.\n  \n     ReqorePanel sets its wrapper to `overflow: hidden` unless its own header\n     is sticky \u2014 and a clipping box is a scrollport, so a status box header\n     inside it resolves against the wrapper instead of the page and stops\n     pinning. That coupling is right for the panel's own header and wrong for\n     its descendants': a host that turns this form's toolbar off (a two-field\n     form inside a longer page, where a pinned search bar is the biggest thing\n     on screen and the least useful) was silently turning the box headers off\n     with it.\n  \n     The clip is the panel's rounded corners, and this panel is transparent and\n     border-less \u2014 `flat raised minimal`, no background of its own \u2014 so there\n     is nothing for it to clip. */\n  ", "\n  /* A NARROW header dressed by the consumer (`compactPanelProps` label, icon\n     or actions) stacks: the label and the consumer's actions share the first\n     line, and the toolbar takes the whole second line.\n\n     ReqorePanel lays its header out as one unwrapping row \u2014 the label, then an\n     action group that never shrinks. The toolbar is one of those actions and\n     is as wide as the form, so at phone width the label was squeezed to\n     nothing and the consumer's own action was pushed past the panel's edge and\n     clipped. Flattening the action group (`display: contents`) lets its\n     members wrap with the label, and `order` moves the toolbar after them. */\n  ", "\n  > .reqore-panel-title {\n    /* The blur + translateZ exist only to make the STICKY top-level toolbar ghost\n       content beneath it; a nested sub-form's header isn't sticky, so skip them\n       (and the stacking context translateZ creates). */\n    ", "\n    /* Above the status-box headers, which pin just below this toolbar. A\n       pinned header cannot leave its own box, so when the end of a box\n       scrolls up past the toolbar it pushes the header up with it \u2014 and with\n       both at ReqorePanel's sticky z-index the header, later in the\n       document, slid OVER the toolbar and covered the search and the\n       meter. One step higher and it slides under the toolbar's blur\n       instead. Nested sub-forms pin nothing, so they keep the default. */\n    ", "\n    padding-top: ", "px;\n    /* A header with a SEARCH ROW keeps the `big` gap below it \u2014 a tall\n       interactive control earns separation from the content it filters. A\n       header without one (search hidden via `compactToolbar`, self-hidden on\n       a single-option form, or no toolbar at all) is a thin strip, and at\n       `big` its padding stacked onto the panel content's own 8px into a 26px\n       dead band between the completion meter and the first status box \u2014\n       rejected on build #140 as \"unnecessarily big\". `normal` lands it at\n       the boxes' own 10px rhythm, and scoping the change here keeps every\n       search-bearing form pixel-identical. */\n    padding-bottom: ", "px;\n  }\n\n  /* Group framing. The HORIZONTAL rule is a real element in the header\n     (StyledGroupHeaderLine) so it sits on the name's row, centered, and stretches\n     from the name out to the status chip pinned at the far end \u2014 which needs the\n     title's left group to fill the header width. The VERTICAL group spine is\n     drawn by StyledGroupBody (so it shares the required-group rail's coordinate\n     space and the two line up instead of doubling). */\n  .options-readfirst-group {\n    position: relative;\n  }\n  .options-readfirst-group > .reqore-panel-title > :first-child,\n  .options-readfirst-group > .reqore-panel-title > :first-child > :first-child,\n  .options-readfirst-group .reqore-panel-title-label-row {\n    flex: 1 1 auto;\n    min-width: 0;\n  }\n\n  /* An injected option action declared `show: 'hover'` \u2014 the shape ReqorePanel\n     honors on the classic path \u2014 is revealed only while its row or card is\n     hovered or holds focus. The compact slots render plain buttons, so the gate\n     has to be CSS here. Kept focus-visible too, so the action stays reachable by\n     keyboard. Opacity rather than display keeps the slot's width stable, so rows\n     don't reflow on hover. */\n  .options-injected-action-hover {\n    opacity: 0;\n    /* Not hit-testable while invisible \u2014 an opacity:0 button still takes taps\n       and clicks, which reads as a mystery control firing out of nowhere. */\n    pointer-events: none;\n    transition: opacity 0.15s ease;\n  }\n  .readfirst-row:hover .options-injected-action-hover,\n  .readfirst-row:focus-within .options-injected-action-hover,\n  .options-readfirst-card:hover .options-injected-action-hover,\n  .options-readfirst-card:focus-within .options-injected-action-hover {\n    opacity: 1;\n    pointer-events: auto;\n  }\n  /* Touch and other hover-less pointers never fire :hover, so a hover-gated\n     action would be permanently unreachable there. Show it unconditionally\n     instead \u2014 losing the tidiness beats losing the functionality. */\n  @media (hover: none), (pointer: coarse) {\n    .options-injected-action-hover {\n      opacity: 1;\n      pointer-events: auto;\n    }\n  }\n"], ["\n  /* The wrapper must not clip, or nothing INSIDE it can pin.\n  \n     ReqorePanel sets its wrapper to \\`overflow: hidden\\` unless its own header\n     is sticky \u2014 and a clipping box is a scrollport, so a status box header\n     inside it resolves against the wrapper instead of the page and stops\n     pinning. That coupling is right for the panel's own header and wrong for\n     its descendants': a host that turns this form's toolbar off (a two-field\n     form inside a longer page, where a pinned search bar is the biggest thing\n     on screen and the least useful) was silently turning the box headers off\n     with it.\n  \n     The clip is the panel's rounded corners, and this panel is transparent and\n     border-less \u2014 \\`flat raised minimal\\`, no background of its own \u2014 so there\n     is nothing for it to clip. */\n  ", "\n  /* A NARROW header dressed by the consumer (\\`compactPanelProps\\` label, icon\n     or actions) stacks: the label and the consumer's actions share the first\n     line, and the toolbar takes the whole second line.\n\n     ReqorePanel lays its header out as one unwrapping row \u2014 the label, then an\n     action group that never shrinks. The toolbar is one of those actions and\n     is as wide as the form, so at phone width the label was squeezed to\n     nothing and the consumer's own action was pushed past the panel's edge and\n     clipped. Flattening the action group (\\`display: contents\\`) lets its\n     members wrap with the label, and \\`order\\` moves the toolbar after them. */\n  ", "\n  > .reqore-panel-title {\n    /* The blur + translateZ exist only to make the STICKY top-level toolbar ghost\n       content beneath it; a nested sub-form's header isn't sticky, so skip them\n       (and the stacking context translateZ creates). */\n    ", "\n    /* Above the status-box headers, which pin just below this toolbar. A\n       pinned header cannot leave its own box, so when the end of a box\n       scrolls up past the toolbar it pushes the header up with it \u2014 and with\n       both at ReqorePanel's sticky z-index the header, later in the\n       document, slid OVER the toolbar and covered the search and the\n       meter. One step higher and it slides under the toolbar's blur\n       instead. Nested sub-forms pin nothing, so they keep the default. */\n    ", "\n    padding-top: ", "px;\n    /* A header with a SEARCH ROW keeps the \\`big\\` gap below it \u2014 a tall\n       interactive control earns separation from the content it filters. A\n       header without one (search hidden via \\`compactToolbar\\`, self-hidden on\n       a single-option form, or no toolbar at all) is a thin strip, and at\n       \\`big\\` its padding stacked onto the panel content's own 8px into a 26px\n       dead band between the completion meter and the first status box \u2014\n       rejected on build #140 as \"unnecessarily big\". \\`normal\\` lands it at\n       the boxes' own 10px rhythm, and scoping the change here keeps every\n       search-bearing form pixel-identical. */\n    padding-bottom: ", "px;\n  }\n\n  /* Group framing. The HORIZONTAL rule is a real element in the header\n     (StyledGroupHeaderLine) so it sits on the name's row, centered, and stretches\n     from the name out to the status chip pinned at the far end \u2014 which needs the\n     title's left group to fill the header width. The VERTICAL group spine is\n     drawn by StyledGroupBody (so it shares the required-group rail's coordinate\n     space and the two line up instead of doubling). */\n  .options-readfirst-group {\n    position: relative;\n  }\n  .options-readfirst-group > .reqore-panel-title > :first-child,\n  .options-readfirst-group > .reqore-panel-title > :first-child > :first-child,\n  .options-readfirst-group .reqore-panel-title-label-row {\n    flex: 1 1 auto;\n    min-width: 0;\n  }\n\n  /* An injected option action declared \\`show: 'hover'\\` \u2014 the shape ReqorePanel\n     honors on the classic path \u2014 is revealed only while its row or card is\n     hovered or holds focus. The compact slots render plain buttons, so the gate\n     has to be CSS here. Kept focus-visible too, so the action stays reachable by\n     keyboard. Opacity rather than display keeps the slot's width stable, so rows\n     don't reflow on hover. */\n  .options-injected-action-hover {\n    opacity: 0;\n    /* Not hit-testable while invisible \u2014 an opacity:0 button still takes taps\n       and clicks, which reads as a mystery control firing out of nowhere. */\n    pointer-events: none;\n    transition: opacity 0.15s ease;\n  }\n  .readfirst-row:hover .options-injected-action-hover,\n  .readfirst-row:focus-within .options-injected-action-hover,\n  .options-readfirst-card:hover .options-injected-action-hover,\n  .options-readfirst-card:focus-within .options-injected-action-hover {\n    opacity: 1;\n    pointer-events: auto;\n  }\n  /* Touch and other hover-less pointers never fire :hover, so a hover-gated\n     action would be permanently unreachable there. Show it unconditionally\n     instead \u2014 losing the tidiness beats losing the functionality. */\n  @media (hover: none), (pointer: coarse) {\n    .options-injected-action-hover {\n      opacity: 1;\n      pointer-events: auto;\n    }\n  }\n"])), function (_a) {
     var $stickyBoxes = _a.$stickyBoxes;
     return $stickyBoxes ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        &&& {\n          overflow: visible;\n        }\n      "], ["\n        &&& {\n          overflow: visible;\n        }\n      "]))) : '';
 }, function (_a) {
@@ -108,78 +135,57 @@ exports.StyledCompactPanel = (0, styled_components_1.default)(reqore_1.ReqorePan
 }, function (_a) {
     var $nested = _a.$nested;
     return ($nested ? '' : 'z-index: 3;');
-}, function (_a) {
-    var $calm = _a.$calm, $nested = _a.$nested, $headerBg = _a.$headerBg;
-    return $calm && !$nested ? "background-color: ".concat($headerBg, ";") : '';
 }, sizes_1.GAP_FROM_SIZE[exports.HEADER_GAP], function (_a) {
     var $tightHeader = _a.$tightHeader;
     return $tightHeader ? sizes_1.GAP_FROM_SIZE.normal : sizes_1.GAP_FROM_SIZE[exports.HEADER_GAP];
 });
 // Compact group header laid out as the panel's `label`: the group name, a
 // hairline that fades toward the status chip, and the chip pinned at the end.
-exports.StyledGroupHeader = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  /* Calm: the label, its quiet count and (on Needs attention) the one amber\n     dot read as a single phrase, so they sit closer than the default's\n     label-and-chip pair. */\n  gap: ", "px;\n  /* \u2026and starts on the rows' left edge. */\n  padding-left: ", "px;\n  flex: 1;\n  min-width: 0;\n"], ["\n  display: flex;\n  align-items: center;\n  /* Calm: the label, its quiet count and (on Needs attention) the one amber\n     dot read as a single phrase, so they sit closer than the default's\n     label-and-chip pair. */\n  gap: ", "px;\n  /* \u2026and starts on the rows' left edge. */\n  padding-left: ", "px;\n  flex: 1;\n  min-width: 0;\n"])), function (_a) {
-    var $calm = _a.$calm;
-    return ($calm ? 8 : 12);
-}, function (_a) {
-    var $calm = _a.$calm;
-    return ($calm ? exports.CALM_SECTION_HEADER_INSET : 0);
-});
+exports.StyledGroupHeader = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n"])));
 exports.StyledGroupHeaderLine = styled_components_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  flex: 1;\n  height: 2px;\n  min-width: 16px;\n  background: linear-gradient(to right, ", ", transparent);\n"], ["\n  flex: 1;\n  height: 2px;\n  min-width: 16px;\n  background: linear-gradient(to right, ", ", transparent);\n"])), function (_a) {
     var $color = _a.$color;
     return $color;
 });
 // A status box (Needs attention / Set / Optional). Matches the "Focus" prototype:
 // a barely-there accent border + a ~5%-opacity tint, NOT the loud intent border a
-// stock ReqorePanel draws. `$accent` is the box's theme colour (warning/success/
+// stock ReqorePanel draws. `$accent` is the box's theme color (warning/success/
 // muted).
-exports.StyledStatusBox = (0, styled_components_1.default)(reqore_1.ReqorePanel)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  ", "\n\n  /* A PINNED header needs a surface of its own.\n  \n     The box's tint lives on the wrapper, behind the header, and a `minimal`\n     panel header is transparent \u2014 which is right while the header sits in the\n     flow over its own box, and wrong the moment it pins, because the rows then\n     scroll THROUGH it. Reqore's backdrop blur softens them but a 12% tint over\n     moving text still reads as two overlaid labels.\n  \n     So repaint the pinned header as the box looks at rest: an opaque layer of\n     the page background with the box's own translucent tint composited on top,\n     which is exactly what the eye sees where the box meets the page. The\n     Optional box already carries an opaque `$bg`, so that is used as-is.\n  \n     Only when `$surface` is supplied \u2014 i.e. only on a form that pins at all \u2014\n     so an unpinned box is pixel-identical to before.\n\n     Calm boxes carry no tint, so the pinned header is just the panel surface\n     the caller passes as `$surface`. */\n  ", "\n"], ["\n  ", "\n\n  /* A PINNED header needs a surface of its own.\n  \n     The box's tint lives on the wrapper, behind the header, and a \\`minimal\\`\n     panel header is transparent \u2014 which is right while the header sits in the\n     flow over its own box, and wrong the moment it pins, because the rows then\n     scroll THROUGH it. Reqore's backdrop blur softens them but a 12% tint over\n     moving text still reads as two overlaid labels.\n  \n     So repaint the pinned header as the box looks at rest: an opaque layer of\n     the page background with the box's own translucent tint composited on top,\n     which is exactly what the eye sees where the box meets the page. The\n     Optional box already carries an opaque \\`$bg\\`, so that is used as-is.\n  \n     Only when \\`$surface\\` is supplied \u2014 i.e. only on a form that pins at all \u2014\n     so an unpinned box is pixel-identical to before.\n\n     Calm boxes carry no tint, so the pinned header is just the panel surface\n     the caller passes as \\`$surface\\`. */\n  ", "\n"])), function (_a) {
-    var $calm = _a.$calm, $accent = _a.$accent, $bg = _a.$bg;
-    return $calm ? (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        &&& {\n          border-radius: 10px;\n        }\n      "], ["\n        &&& {\n          border-radius: 10px;\n        }\n      "]))) : (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n        &&& {\n          border: 1px solid ", ";\n          /* $bg lets the muted \"Optional\" box opt into a darker, recessed surface\n             instead of the faint accent tint the coloured boxes use. */\n          background: ", ";\n          border-radius: 10px;\n        }\n      "], ["\n        &&& {\n          border: 1px solid ", ";\n          /* $bg lets the muted \"Optional\" box opt into a darker, recessed surface\n             instead of the faint accent tint the coloured boxes use. */\n          background: ", ";\n          border-radius: 10px;\n        }\n      "])), "".concat($accent, "33"), $bg || "".concat($accent, "1f"));
+exports.StyledStatusBox = (0, styled_components_1.default)(reqore_1.ReqorePanel)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  &&& {\n    border: 1px solid ", ";\n    /* $bg lets the muted \"Optional\" box opt into a darker, recessed surface\n       instead of the faint accent tint the colored boxes use. */\n    background: ", ";\n    border-radius: 10px;\n  }\n\n  /* A PINNED header needs a surface of its own.\n  \n     The box's tint lives on the wrapper, behind the header, and a `minimal`\n     panel header is transparent \u2014 which is right while the header sits in the\n     flow over its own box, and wrong the moment it pins, because the rows then\n     scroll THROUGH it. Reqore's backdrop blur softens them but a 12% tint over\n     moving text still reads as two overlaid labels.\n  \n     So repaint the pinned header as the box looks at rest: an opaque layer of\n     the page background with the box's own translucent tint composited on top,\n     which is exactly what the eye sees where the box meets the page. The\n     Optional box already carries an opaque `$bg`, so that is used as-is.\n  \n     Only when `$surface` is supplied \u2014 i.e. only on a form that pins at all \u2014\n     so an unpinned box is pixel-identical to before. */\n  ", "\n"], ["\n  &&& {\n    border: 1px solid ", ";\n    /* $bg lets the muted \"Optional\" box opt into a darker, recessed surface\n       instead of the faint accent tint the colored boxes use. */\n    background: ", ";\n    border-radius: 10px;\n  }\n\n  /* A PINNED header needs a surface of its own.\n  \n     The box's tint lives on the wrapper, behind the header, and a \\`minimal\\`\n     panel header is transparent \u2014 which is right while the header sits in the\n     flow over its own box, and wrong the moment it pins, because the rows then\n     scroll THROUGH it. Reqore's backdrop blur softens them but a 12% tint over\n     moving text still reads as two overlaid labels.\n  \n     So repaint the pinned header as the box looks at rest: an opaque layer of\n     the page background with the box's own translucent tint composited on top,\n     which is exactly what the eye sees where the box meets the page. The\n     Optional box already carries an opaque \\`$bg\\`, so that is used as-is.\n  \n     Only when \\`$surface\\` is supplied \u2014 i.e. only on a form that pins at all \u2014\n     so an unpinned box is pixel-identical to before. */\n  ", "\n"])), function (_a) {
+    var $accent = _a.$accent;
+    return "".concat($accent, "33");
 }, function (_a) {
-    var $surface = _a.$surface, $accent = _a.$accent, $bg = _a.$bg, $calm = _a.$calm;
-    return $surface ? (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        &&& > .reqore-panel-title {\n          background-color: ", ";\n          ", "\n        }\n      "], ["\n        &&& > .reqore-panel-title {\n          background-color: ", ";\n          ", "\n        }\n      "])), $bg || $surface, $bg || $calm ? '' : "background-image: linear-gradient(".concat($accent, "1f, ").concat($accent, "1f);")) : '';
+    var $accent = _a.$accent, $bg = _a.$bg;
+    return $bg || "".concat($accent, "1f");
+}, function (_a) {
+    var $surface = _a.$surface, $accent = _a.$accent, $bg = _a.$bg;
+    return $surface ? (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        &&& > .reqore-panel-title {\n          background-color: ", ";\n          ", "\n        }\n      "], ["\n        &&& > .reqore-panel-title {\n          background-color: ", ";\n          ", "\n        }\n      "])), $bg || $surface, $bg ? '' : "background-image: linear-gradient(".concat($accent, "1f, ").concat($accent, "1f);")) : '';
 });
 // "One of the below is required" cluster box — wraps the members of an unmet
 // one-of required group (in the Needs-attention box) so the constraint reads as
 // one unit. The connection rail + status nodes still render inside (they convey
 // which member satisfies the group); this box adds the explicit heading.
-exports.StyledRequiredClusterBox = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  ", "\n  /* The members render directly here (not via the gapped group body), so give\n     them the same modest gap the rest of the rows have. Pin the divider-centring\n     var to that gap (it doesn't widen in narrow like the group body's does). */\n  display: flex;\n  flex-flow: column;\n  --readfirst-row-gap: ", "px;\n  gap: ", "px;\n"], ["\n  ", "\n  /* The members render directly here (not via the gapped group body), so give\n     them the same modest gap the rest of the rows have. Pin the divider-centring\n     var to that gap (it doesn't widen in narrow like the group body's does). */\n  display: flex;\n  flex-flow: column;\n  --readfirst-row-gap: ", "px;\n  gap: ", "px;\n"])), function (_a) {
-    var $calm = _a.$calm, $border = _a.$border, $tint = _a.$tint;
-    return $calm ?
-        ''
-        : (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n        border: 1px solid ", ";\n        border-radius: 8px;\n        background: ", ";\n        padding: 2px 6px 6px;\n        margin: 4px 0;\n      "], ["\n        border: 1px solid ", ";\n        border-radius: 8px;\n        background: ", ";\n        padding: 2px 6px 6px;\n        margin: 4px 0;\n      "])), $border, $tint);
-}, function (_a) {
-    var $calm = _a.$calm;
-    return ($calm ? 0 : 4);
+exports.StyledRequiredClusterBox = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  border: 1px solid ", ";\n  border-radius: 8px;\n  background: ", ";\n  padding: 2px 6px 6px;\n  margin: 4px 0;\n  /* The members render directly here (not via the gapped group body), so give\n     them the same modest gap the rest of the rows have. Pin the divider-centering\n     var to that gap (it doesn't widen in narrow like the group body's does). */\n  display: flex;\n  flex-flow: column;\n  --readfirst-row-gap: 4px;\n  gap: 4px;\n"], ["\n  border: 1px solid ", ";\n  border-radius: 8px;\n  background: ", ";\n  padding: 2px 6px 6px;\n  margin: 4px 0;\n  /* The members render directly here (not via the gapped group body), so give\n     them the same modest gap the rest of the rows have. Pin the divider-centering\n     var to that gap (it doesn't widen in narrow like the group body's does). */\n  display: flex;\n  flex-flow: column;\n  --readfirst-row-gap: 4px;\n  gap: 4px;\n"])), function (_a) {
+    var $border = _a.$border;
+    return $border;
 }, function (_a) {
-    var $calm = _a.$calm;
-    return ($calm ? 0 : 4);
+    var $tint = _a.$tint;
+    return $tint;
 });
-exports.StyledRequiredClusterHeader = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  color: ", ";\n  font-weight: 600;\n  /* Calm: an amber sentence over the rows it is about, at the rows' own text\n     size and inset \u2014 the instruction, not an upper-case eyebrow. */\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  color: ", ";\n  font-weight: 600;\n  /* Calm: an amber sentence over the rows it is about, at the rows' own text\n     size and inset \u2014 the instruction, not an upper-case eyebrow. */\n  ", "\n"])), function (_a) {
+exports.StyledRequiredClusterHeader = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 0 4px ", ";\n  font-size: 10px;\n  font-weight: 600;\n  letter-spacing: 1px;\n  text-transform: uppercase;\n  color: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 0 4px ", ";\n  font-size: 10px;\n  font-weight: 600;\n  letter-spacing: 1px;\n  text-transform: uppercase;\n  color: ", ";\n"])), exports.GROUP_INDENT, function (_a) {
     var $color = _a.$color;
     return $color;
-}, function (_a) {
-    var $calm = _a.$calm;
-    return $calm ? (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n        padding: 12px ", "px 2px;\n        font-size: 13px;\n      "], ["\n        padding: 12px ", "px 2px;\n        font-size: 13px;\n      "])), exports.CALM_SECTION_INSET) : (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n        padding: 8px 0 4px ", ";\n        font-size: 10px;\n        letter-spacing: 1px;\n        text-transform: uppercase;\n      "], ["\n        padding: 8px 0 4px ", ";\n        font-size: 10px;\n        letter-spacing: 1px;\n        text-transform: uppercase;\n      "])), exports.GROUP_INDENT);
 });
 // Thin schema-group sub-label inside a status box (CONNECTION / AUTHENTICATION /
 // …). Quiet by design — the box header is the loud heading; this just keeps each
 // field's group context as you scan. Indented to the rows' content line.
-//
-// Calm: the group's name as written (no upper-casing), at the rows' text size in
-// the primary text colour — the field labels below it are grey, so the heading
-// is told apart by colour and the space above it, not by shouting.
-exports.StyledStatusBoxGroupLabel = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
-    var $calm = _a.$calm, $color = _a.$color;
-    return $calm ? (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n        font-size: 13px;\n        font-weight: 600;\n        color: ", ";\n        padding: 14px ", "px 2px;\n      "], ["\n        font-size: 13px;\n        font-weight: 600;\n        color: ", ";\n        padding: 14px ", "px 2px;\n      "])), $color || 'inherit', exports.CALM_SECTION_INSET) : (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n        font-size: 10px;\n        font-weight: 500;\n        letter-spacing: 1px;\n        text-transform: uppercase;\n        opacity: 0.5;\n        padding: 8px 0 2px ", ";\n      "], ["\n        font-size: 10px;\n        font-weight: 500;\n        letter-spacing: 1px;\n        text-transform: uppercase;\n        opacity: 0.5;\n        padding: 8px 0 2px ", ";\n      "])), exports.GROUP_INDENT);
-});
+exports.StyledStatusBoxGroupLabel = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  font-size: 10px;\n  font-weight: 500;\n  letter-spacing: 1px;\n  text-transform: uppercase;\n  opacity: 0.5;\n  padding: 8px 0 2px ", ";\n"], ["\n  font-size: 10px;\n  font-weight: 500;\n  letter-spacing: 1px;\n  text-transform: uppercase;\n  opacity: 0.5;\n  padding: 8px 0 2px ", ";\n"])), exports.GROUP_INDENT);
 // Required-group "connection" rail: contiguous members are linked by a continuous
 // vertical rail (StyledGroupBody draws it; the line bridges the row gaps and is
 // trimmed to the first/last node). Each member carries a status node — absolutely
 // positioned in the EXISTING left gutter, so labels keep their place — tied to the
 // label by a short stub. Theme-derived: the node's hollow centre is painted the
 // form background so it MASKS the rail behind it; filled when the member is set.
-exports.StyledClusterNode = styled_components_1.default.span(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  position: absolute;\n  left: -14px;\n  top: 13px;\n  width: 12px;\n  height: 12px;\n  box-sizing: border-box;\n  border-radius: 50%;\n  border: 2px solid ", ";\n  background: ", ";\n  box-shadow: 0 0 5px ", ";\n  z-index: 1;\n  pointer-events: none;\n  /* short stub toward the label \u2014 stops a few px short so it doesn't touch it */\n  &::after {\n    content: '';\n    position: absolute;\n    left: 100%;\n    top: 50%;\n    width: 6px;\n    height: 2px;\n    transform: translateY(-1px);\n    background: ", ";\n  }\n"], ["\n  position: absolute;\n  left: -14px;\n  top: 13px;\n  width: 12px;\n  height: 12px;\n  box-sizing: border-box;\n  border-radius: 50%;\n  border: 2px solid ", ";\n  background: ", ";\n  box-shadow: 0 0 5px ", ";\n  z-index: 1;\n  pointer-events: none;\n  /* short stub toward the label \u2014 stops a few px short so it doesn't touch it */\n  &::after {\n    content: '';\n    position: absolute;\n    left: 100%;\n    top: 50%;\n    width: 6px;\n    height: 2px;\n    transform: translateY(-1px);\n    background: ", ";\n  }\n"])), function (_a) {
+exports.StyledClusterNode = styled_components_1.default.span(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  position: absolute;\n  left: -14px;\n  top: 13px;\n  width: 12px;\n  height: 12px;\n  box-sizing: border-box;\n  border-radius: 50%;\n  border: 2px solid ", ";\n  background: ", ";\n  box-shadow: 0 0 5px ", ";\n  z-index: 1;\n  pointer-events: none;\n  /* short stub toward the label \u2014 stops a few px short so it doesn't touch it */\n  &::after {\n    content: '';\n    position: absolute;\n    left: 100%;\n    top: 50%;\n    width: 6px;\n    height: 2px;\n    transform: translateY(-1px);\n    background: ", ";\n  }\n"], ["\n  position: absolute;\n  left: -14px;\n  top: 13px;\n  width: 12px;\n  height: 12px;\n  box-sizing: border-box;\n  border-radius: 50%;\n  border: 2px solid ", ";\n  background: ", ";\n  box-shadow: 0 0 5px ", ";\n  z-index: 1;\n  pointer-events: none;\n  /* short stub toward the label \u2014 stops a few px short so it doesn't touch it */\n  &::after {\n    content: '';\n    position: absolute;\n    left: 100%;\n    top: 50%;\n    width: 6px;\n    height: 2px;\n    transform: translateY(-1px);\n    background: ", ";\n  }\n"])), function (_a) {
     var $color = _a.$color;
     return $color;
 }, function (_a) {
@@ -192,37 +198,57 @@ exports.StyledClusterNode = styled_components_1.default.span(templateObject_18 |
     var $color = _a.$color;
     return $color;
 });
-exports.StyledEditCard = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  gap: 8px;\n  background: ", ";\n  /* Calm: an open field is a row of its section, set apart by the section's own\n     hairlines and the active-row tint \u2014 not a second card drawn inside the\n     first. */\n  ", "\n\n  /* Single-value editors (operators, long-string, markdown, richtext, byte-size)\n     carry the card's own \"Clear value\" action, so suppress the value input's\n     built-in ReqoreInput clear \u2014 ReqoreInput has no prop to hide it, and a\n     separate input \u2715 plus the row-level trash action\n     read as a duplicate. Multi-input cards (hash/list/\u2026) are not marked single,\n     so their per-sub-field clears stay. */\n  &.options-readfirst-card-single .reqore-clear-input-button {\n    display: none;\n  }\n"], ["\n  display: flex;\n  flex-flow: column;\n  gap: 8px;\n  background: ", ";\n  /* Calm: an open field is a row of its section, set apart by the section's own\n     hairlines and the active-row tint \u2014 not a second card drawn inside the\n     first. */\n  ", "\n\n  /* Single-value editors (operators, long-string, markdown, richtext, byte-size)\n     carry the card's own \"Clear value\" action, so suppress the value input's\n     built-in ReqoreInput clear \u2014 ReqoreInput has no prop to hide it, and a\n     separate input \u2715 plus the row-level trash action\n     read as a duplicate. Multi-input cards (hash/list/\u2026) are not marked single,\n     so their per-sub-field clears stay. */\n  &.options-readfirst-card-single .reqore-clear-input-button {\n    display: none;\n  }\n"])), function (_a) {
+exports.StyledEditCard = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  padding: 12px;\n  display: flex;\n  flex-flow: column;\n  gap: 8px;\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n\n  /* Single-value editors (operators, long-string, markdown, richtext, byte-size)\n     carry the card's own \"Clear value\" action, so suppress the value input's\n     built-in ReqoreInput clear \u2014 ReqoreInput has no prop to hide it, and a\n     separate input \u2715 plus the row-level trash action\n     read as a duplicate. Multi-input cards (hash/list/\u2026) are not marked single,\n     so their per-sub-field clears stay. */\n  &.options-readfirst-card-single .reqore-clear-input-button {\n    display: none;\n  }\n"], ["\n  padding: 12px;\n  display: flex;\n  flex-flow: column;\n  gap: 8px;\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n\n  /* Single-value editors (operators, long-string, markdown, richtext, byte-size)\n     carry the card's own \"Clear value\" action, so suppress the value input's\n     built-in ReqoreInput clear \u2014 ReqoreInput has no prop to hide it, and a\n     separate input \u2715 plus the row-level trash action\n     read as a duplicate. Multi-input cards (hash/list/\u2026) are not marked single,\n     so their per-sub-field clears stay. */\n  &.options-readfirst-card-single .reqore-clear-input-button {\n    display: none;\n  }\n"])), function (_a) {
     var $bg = _a.$bg;
     return $bg;
 }, function (_a) {
-    var $calm = _a.$calm, $border = _a.$border;
-    return $calm ? (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n        padding: 12px ", "px;\n      "], ["\n        padding: 12px ", "px;\n      "])), exports.CALM_SECTION_INSET) : (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n        padding: 12px;\n        border: 1px solid ", ";\n        border-radius: 8px;\n      "], ["\n        padding: 12px;\n        border: 1px solid ", ";\n        border-radius: 8px;\n      "])), $border);
+    var $border = _a.$border;
+    return $border;
 });
 // Recurring micro-layouts of the read-first rows and their popovers.
-exports.StyledLabelBlock = styled_components_1.default.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  gap: 2px;\n  min-width: 0;\n"], ["\n  display: flex;\n  flex-flow: column;\n  gap: 2px;\n  min-width: 0;\n"])));
-exports.StyledRowLabel = styled_components_1.default.div(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 3px;\n  color: ", ";\n  font-weight: 600;\n  font-size: 13px;\n  min-width: 0;\n  white-space: normal;\n  overflow-wrap: anywhere;\n  cursor: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 3px;\n  color: ", ";\n  font-weight: 600;\n  font-size: 13px;\n  min-width: 0;\n  white-space: normal;\n  overflow-wrap: anywhere;\n  cursor: ", ";\n"])), function (_a) {
+exports.StyledLabelBlock = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  gap: 2px;\n  min-width: 0;\n"], ["\n  display: flex;\n  flex-flow: column;\n  gap: 2px;\n  min-width: 0;\n"])));
+/* An option's help is a button in the tab order (qorus#646), beside the name on its line: a button is a block,
+   which put it on a line of its own under a name in a narrow label column. Its target is reqore's `tiny` (26px),
+   or `small` (32px) for a finger, taller than the name's line: it reaches into the row's padding rather than
+   making every row with help taller. Its focus ring is reqore's, drawn inside it: one outside it overlapped the
+   name's last letter. */
+var HELP_BUTTON_BESIDE_THE_NAME = "\n  .options-readfirst-help {\n    display: inline-flex;\n    vertical-align: middle;\n    flex-shrink: 0;\n    margin-top: -5px;\n    margin-bottom: -5px;\n  }\n  .options-readfirst-help-touch {\n    margin-top: -8px;\n    margin-bottom: -8px;\n  }\n";
+exports.StyledRowLabel = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 3px;\n  color: ", ";\n  font-weight: 600;\n  font-size: 13px;\n  min-width: 0;\n  white-space: normal;\n  overflow-wrap: anywhere;\n  cursor: ", ";\n  /* what the option takes goes under the name where both do not fit on a line (a phone): beside it, it took the\n     name's room, which broke a word in two (\"Compute d\", qorus#646) */\n  flex-wrap: wrap;\n  row-gap: 2px;\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 3px;\n  color: ", ";\n  font-weight: 600;\n  font-size: 13px;\n  min-width: 0;\n  white-space: normal;\n  overflow-wrap: anywhere;\n  cursor: ", ";\n  /* what the option takes goes under the name where both do not fit on a line (a phone): beside it, it took the\n     name's room, which broke a word in two (\"Compute d\", qorus#646) */\n  flex-wrap: wrap;\n  row-gap: 2px;\n  ", "\n"])), function (_a) {
     var $color = _a.$color;
     return $color;
 }, function (_a) {
     var $pointer = _a.$pointer;
     return ($pointer ? 'pointer' : 'inherit');
+}, HELP_BUTTON_BESIDE_THE_NAME);
+/**
+ * An option's name, its asterisk and its help: one group.
+ *
+ * In a row's label column (`$fill`) it is the column's width: the name on the left, wrapping, and the help at the
+ * column's right edge, so every row's (?) is on one line down the form rather than a step after each name
+ * (Foxhoundn, qlip #392: "please right align the question mark to get rid of the stair-case look"). The help is on
+ * the name's first line.
+ */
+exports.StyledLabelName = styled_components_1.default.span(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  ", "\n  min-width: 0;\n"], ["\n  ", "\n  min-width: 0;\n"])), function (_a) {
+    var $fill = _a.$fill;
+    return $fill ? (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n        display: grid;\n        grid-template-columns: minmax(0, 1fr) auto;\n        align-items: start;\n        width: 100%;\n        column-gap: 3px;\n\n        .options-readfirst-help {\n          justify-self: end;\n        }\n        /* A stacked row's label is the row's whole width, with no column for the help to line up in: at its\n           right edge the help floated alone, away from the name it explains (Foxhoundn, qlip #400: \"On mobile\n           the question mark should stay with the label\"). It follows the name. */\n        .readfirst-narrow & {\n          grid-template-columns: minmax(0, max-content) auto;\n          justify-content: start;\n\n          .options-readfirst-help {\n            justify-self: start;\n          }\n        }\n        /* what the option takes flows after the name, under it where both do not fit */\n        .options-readfirst-type {\n          display: inline-flex;\n          vertical-align: middle;\n          margin-left: 4px;\n        }\n      "], ["\n        display: grid;\n        grid-template-columns: minmax(0, 1fr) auto;\n        align-items: start;\n        width: 100%;\n        column-gap: 3px;\n\n        .options-readfirst-help {\n          justify-self: end;\n        }\n        /* A stacked row's label is the row's whole width, with no column for the help to line up in: at its\n           right edge the help floated alone, away from the name it explains (Foxhoundn, qlip #400: \"On mobile\n           the question mark should stay with the label\"). It follows the name. */\n        .readfirst-narrow & {\n          grid-template-columns: minmax(0, max-content) auto;\n          justify-content: start;\n\n          .options-readfirst-help {\n            justify-self: start;\n          }\n        }\n        /* what the option takes flows after the name, under it where both do not fit */\n        .options-readfirst-type {\n          display: inline-flex;\n          vertical-align: middle;\n          margin-left: 4px;\n        }\n      "]))) : (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n        display: inline-flex;\n        align-items: center;\n        gap: 3px;\n      "], ["\n        display: inline-flex;\n        align-items: center;\n        gap: 3px;\n      "])));
 });
+/** A name's asterisk: after a word joiner, which no line breaks at, so it is on the line of the name's last word. */
+exports.StyledLabelAsterisk = styled_components_1.default.span(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  white-space: nowrap;\n"], ["\n  white-space: nowrap;\n"])));
 // A field's short_desc rendered under its name in the (narrow) label column,
 // revealed by the row's ⓘ. Reuses ReqoreP for the muted-note styling (size +
 // effect opacity); the only custom bit is the line-clamp that keeps it from
 // pushing the row wide.
-exports.StyledLabelDesc = (0, styled_components_1.default)(reqore_1.ReqoreP)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  margin-top: 2px;\n  white-space: normal;\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n"], ["\n  margin-top: 2px;\n  white-space: normal;\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n"])));
-exports.StyledCardHeading = styled_components_1.default.div(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  min-width: 0;\n"], ["\n  display: flex;\n  flex-flow: column;\n  min-width: 0;\n"])));
+exports.StyledLabelDesc = (0, styled_components_1.default)(reqore_1.ReqoreP)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  margin-top: 2px;\n  white-space: normal;\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n"], ["\n  margin-top: 2px;\n  white-space: normal;\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n"])));
+exports.StyledCardHeading = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  min-width: 0;\n"], ["\n  display: flex;\n  flex-flow: column;\n  min-width: 0;\n"])));
 /* The card (expanded) label matches the read-row label exactly — same size /
    weight / case — so a field's name doesn't switch styles when you open it. */
-exports.StyledCardLabel = styled_components_1.default.div(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  font-size: 13px;\n  font-weight: 600;\n  color: ", ";\n  display: flex;\n  align-items: center;\n  gap: 4px;\n"], ["\n  font-size: 13px;\n  font-weight: 600;\n  color: ", ";\n  display: flex;\n  align-items: center;\n  gap: 4px;\n"])), function (_a) {
+exports.StyledCardLabel = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  font-size: 13px;\n  font-weight: 600;\n  color: ", ";\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  flex-wrap: wrap;\n  row-gap: 2px;\n  ", "\n"], ["\n  font-size: 13px;\n  font-weight: 600;\n  color: ", ";\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  flex-wrap: wrap;\n  row-gap: 2px;\n  ", "\n"])), function (_a) {
     var $color = _a.$color;
     return $color;
-});
+}, HELP_BUTTON_BESIDE_THE_NAME);
 /* min-width: 0 lets the grid cell shrink below its content's intrinsic width
    so the ellipsis engages instead of overflowing. */
-exports.StyledRowValue = styled_components_1.default.div(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  min-width: 0;\n  font-size: 13px;\n  /* Value + inline reason(s) share the line, wrapping the reason below only when\n     it doesn't fit (the Focus prototype's layout). */\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  column-gap: 10px;\n  row-gap: 2px;\n  /* The muted/translucent colour applies to the VALUE TEXT only \u2014 not the whole\n     cell \u2014 so the message panels and the structured preview below render at full\n     opacity instead of inheriting the dimmed value colour. */\n  .options-readfirst-valuetext {\n    min-width: 0;\n    max-width: 100%;\n    color: ", ";\n    font-style: ", ";\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  /* The code size chip kept above an OPEN editor. The read row puts the same chip\n     at the top of the value cell with a 2px row-gap under it; matching that here is\n     what stops the editor moving as the field opens. */\n  .options-readfirst-editing-summary {\n    margin-bottom: 2px;\n  }\n  .options-readfirst-reason {\n    font-style: italic;\n    font-size: 12px;\n    line-height: 1.3;\n  }\n  /* Schema message panels: full width of the value column, on their own line\n     directly beneath the value. */\n  .options-readfirst-info-panel {\n    flex-basis: 100%;\n    width: 100%;\n    display: flex;\n    flex-flow: column;\n    gap: 4px;\n    margin-top: 4px;\n  }\n  /* Read-only companions of the value: what a chosen option means, on its own\n     line under it; and a long text drawn in full in the inset. */\n  .options-readfirst-choice-desc {\n    flex-basis: 100%;\n    width: 100%;\n    min-width: 0;\n    font-size: 12px;\n    line-height: 1.4;\n    opacity: 0.6;\n  }\n  .options-readfirst-text {\n    color: ", ";\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n    line-height: 1.5;\n  }\n"], ["\n  min-width: 0;\n  font-size: 13px;\n  /* Value + inline reason(s) share the line, wrapping the reason below only when\n     it doesn't fit (the Focus prototype's layout). */\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  column-gap: 10px;\n  row-gap: 2px;\n  /* The muted/translucent colour applies to the VALUE TEXT only \u2014 not the whole\n     cell \u2014 so the message panels and the structured preview below render at full\n     opacity instead of inheriting the dimmed value colour. */\n  .options-readfirst-valuetext {\n    min-width: 0;\n    max-width: 100%;\n    color: ", ";\n    font-style: ", ";\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  /* The code size chip kept above an OPEN editor. The read row puts the same chip\n     at the top of the value cell with a 2px row-gap under it; matching that here is\n     what stops the editor moving as the field opens. */\n  .options-readfirst-editing-summary {\n    margin-bottom: 2px;\n  }\n  .options-readfirst-reason {\n    font-style: italic;\n    font-size: 12px;\n    line-height: 1.3;\n  }\n  /* Schema message panels: full width of the value column, on their own line\n     directly beneath the value. */\n  .options-readfirst-info-panel {\n    flex-basis: 100%;\n    width: 100%;\n    display: flex;\n    flex-flow: column;\n    gap: 4px;\n    margin-top: 4px;\n  }\n  /* Read-only companions of the value: what a chosen option means, on its own\n     line under it; and a long text drawn in full in the inset. */\n  .options-readfirst-choice-desc {\n    flex-basis: 100%;\n    width: 100%;\n    min-width: 0;\n    font-size: 12px;\n    line-height: 1.4;\n    opacity: 0.6;\n  }\n  .options-readfirst-text {\n    color: ", ";\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n    line-height: 1.5;\n  }\n"])), function (_a) {
+exports.StyledRowValue = styled_components_1.default.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  min-width: 0;\n  font-size: 13px;\n  /* Value + inline reason(s) share the line, wrapping the reason below only when\n     it doesn't fit (the Focus prototype's layout). */\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  column-gap: 10px;\n  row-gap: 2px;\n  /* The muted/translucent color applies to the VALUE TEXT only \u2014 not the whole\n     cell \u2014 so the message panels and the structured preview below render at full\n     opacity instead of inheriting the dimmed value color. */\n  .options-readfirst-valuetext {\n    min-width: 0;\n    max-width: 100%;\n    color: ", ";\n    font-style: ", ";\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  /* A value that is a web address: a link, underlined, broken anywhere so a long one wraps inside the row, with a\n     focus ring of its own color when reached with the keyboard. */\n  .options-readfirst-link {\n    text-decoration: underline;\n    text-underline-offset: 2px;\n    overflow-wrap: anywhere;\n    border-radius: 2px;\n  }\n  .options-readfirst-link:focus-visible {\n    outline: 2px solid currentColor;\n    outline-offset: 2px;\n  }\n  /* The code size chip kept above an OPEN editor. The read row puts the same chip\n     at the top of the value cell with a 2px row-gap under it; matching that here is\n     what stops the editor moving as the field opens. */\n  .options-readfirst-editing-summary {\n    margin-bottom: 2px;\n  }\n  .options-readfirst-reason {\n    font-style: italic;\n    font-size: 12px;\n    line-height: 1.3;\n  }\n  /* The reason that follows the value shares its line and wraps within its own box. As a flex item\n     sized to its text it could only share the line whole: a reason longer than the room beside the\n     value went to the line below as a block, and an empty value's dash was left alone on its line,\n     the reason under it like the text of a list item under its bullet (qorus#646). It goes below\n     only when the value leaves it less than 16em. */\n  .options-readfirst-valuetext + .options-readfirst-reason {\n    flex: 1 1 16em;\n    min-width: 0;\n  }\n  /* Schema message panels: full width of the value column, on their own line\n     directly beneath the value. */\n  .options-readfirst-info-panel {\n    flex-basis: 100%;\n    width: 100%;\n    display: flex;\n    flex-flow: column;\n    gap: 4px;\n    margin-top: 4px;\n  }\n  /* Read-only companions of the value: what a chosen option means, on its own\n     line under it; and a long text drawn in full in the inset. */\n  .options-readfirst-choice-desc {\n    flex-basis: 100%;\n    width: 100%;\n    min-width: 0;\n    font-size: 12px;\n    line-height: 1.4;\n    opacity: 0.6;\n  }\n  .options-readfirst-text {\n    color: ", ";\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n    line-height: 1.5;\n  }\n"], ["\n  min-width: 0;\n  font-size: 13px;\n  /* Value + inline reason(s) share the line, wrapping the reason below only when\n     it doesn't fit (the Focus prototype's layout). */\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  column-gap: 10px;\n  row-gap: 2px;\n  /* The muted/translucent color applies to the VALUE TEXT only \u2014 not the whole\n     cell \u2014 so the message panels and the structured preview below render at full\n     opacity instead of inheriting the dimmed value color. */\n  .options-readfirst-valuetext {\n    min-width: 0;\n    max-width: 100%;\n    color: ", ";\n    font-style: ", ";\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  /* A value that is a web address: a link, underlined, broken anywhere so a long one wraps inside the row, with a\n     focus ring of its own color when reached with the keyboard. */\n  .options-readfirst-link {\n    text-decoration: underline;\n    text-underline-offset: 2px;\n    overflow-wrap: anywhere;\n    border-radius: 2px;\n  }\n  .options-readfirst-link:focus-visible {\n    outline: 2px solid currentColor;\n    outline-offset: 2px;\n  }\n  /* The code size chip kept above an OPEN editor. The read row puts the same chip\n     at the top of the value cell with a 2px row-gap under it; matching that here is\n     what stops the editor moving as the field opens. */\n  .options-readfirst-editing-summary {\n    margin-bottom: 2px;\n  }\n  .options-readfirst-reason {\n    font-style: italic;\n    font-size: 12px;\n    line-height: 1.3;\n  }\n  /* The reason that follows the value shares its line and wraps within its own box. As a flex item\n     sized to its text it could only share the line whole: a reason longer than the room beside the\n     value went to the line below as a block, and an empty value's dash was left alone on its line,\n     the reason under it like the text of a list item under its bullet (qorus#646). It goes below\n     only when the value leaves it less than 16em. */\n  .options-readfirst-valuetext + .options-readfirst-reason {\n    flex: 1 1 16em;\n    min-width: 0;\n  }\n  /* Schema message panels: full width of the value column, on their own line\n     directly beneath the value. */\n  .options-readfirst-info-panel {\n    flex-basis: 100%;\n    width: 100%;\n    display: flex;\n    flex-flow: column;\n    gap: 4px;\n    margin-top: 4px;\n  }\n  /* Read-only companions of the value: what a chosen option means, on its own\n     line under it; and a long text drawn in full in the inset. */\n  .options-readfirst-choice-desc {\n    flex-basis: 100%;\n    width: 100%;\n    min-width: 0;\n    font-size: 12px;\n    line-height: 1.4;\n    opacity: 0.6;\n  }\n  .options-readfirst-text {\n    color: ", ";\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n    line-height: 1.5;\n  }\n"])), function (_a) {
     var $color = _a.$color;
     return $color;
 }, function (_a) {
@@ -232,44 +258,40 @@ exports.StyledRowValue = styled_components_1.default.div(templateObject_27 || (t
     var $color = _a.$color;
     return $color;
 });
-exports.StyledRowActions = styled_components_1.default.div(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  /* No align-self override: the actions (incl. the status dot) follow the row's\n     own vertical alignment \u2014 CENTRED on the common single-line row, TOP-aligned\n     (first line) on the tall rows that opt into align-items:start (descriptions /\n     message panels / hash previews). */\n  gap: 6px;\n"], ["\n  display: flex;\n  align-items: center;\n  /* No align-self override: the actions (incl. the status dot) follow the row's\n     own vertical alignment \u2014 CENTRED on the common single-line row, TOP-aligned\n     (first line) on the tall rows that opt into align-items:start (descriptions /\n     message panels / hash previews). */\n  gap: 6px;\n"])));
-// A single status mark pinned at the row's trailing edge: one dot, colour =
+exports.StyledRowActions = styled_components_1.default.div(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  /* No align-self override: the actions (incl. the status dot) follow the row's\n     own vertical alignment \u2014 CENTRED on the common single-line row, TOP-aligned\n     (first line) on the tall rows that opt into align-items:start (descriptions /\n     message panels / hash previews). */\n  gap: 6px;\n"], ["\n  display: flex;\n  align-items: center;\n  /* No align-self override: the actions (incl. the status dot) follow the row's\n     own vertical alignment \u2014 CENTRED on the common single-line row, TOP-aligned\n     (first line) on the tall rows that opt into align-items:start (descriptions /\n     message panels / hash previews). */\n  gap: 6px;\n"])));
+// A single status mark pinned at the row's trailing edge: one dot, color =
 // severity (danger/warning/success). This is the "Focus" read-first signal that
 // replaces the recessed value surface's intent stripe — attention dots carry a
 // faint ring, a plain "set" dot does not. `unset` rows render no dot.
-exports.StyledStatusDot = styled_components_1.default.span(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  flex: 0 0 auto;\n  background: ", ";\n  box-shadow: ", ";\n"], ["\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  flex: 0 0 auto;\n  background: ", ";\n  box-shadow: ", ";\n"])), function (_a) {
+exports.StyledStatusDot = styled_components_1.default.span(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  flex: 0 0 auto;\n  background: ", ";\n  box-shadow: ", ";\n"], ["\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  flex: 0 0 auto;\n  background: ", ";\n  box-shadow: ", ";\n"])), function (_a) {
     var $color = _a.$color;
     return $color;
 }, function (_a) {
     var $color = _a.$color, $ring = _a.$ring;
     return ($ring ? "0 0 0 3px ".concat($color, "22") : 'none');
 });
-exports.StyledActionSlot = styled_components_1.default.span(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n  display: inline-flex;\n  justify-content: center;\n  width: ", "px;\n  flex: 0 0 auto;\n"], ["\n  display: inline-flex;\n  justify-content: center;\n  width: ", "px;\n  flex: 0 0 auto;\n"])), function (_a) {
+exports.StyledActionSlot = styled_components_1.default.span(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  display: inline-flex;\n  justify-content: center;\n  width: ", "px;\n  flex: 0 0 auto;\n"], ["\n  display: inline-flex;\n  justify-content: center;\n  width: ", "px;\n  flex: 0 0 auto;\n"])), function (_a) {
     var $width = _a.$width;
     return $width;
 });
-exports.StyledColumn = styled_components_1.default.div(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n"], ["\n  display: flex;\n  flex-flow: column;\n"])));
+exports.StyledColumn = styled_components_1.default.div(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n"], ["\n  display: flex;\n  flex-flow: column;\n"])));
 // The structured hash/list preview, rendered inside the value cell directly
 // under the value summary. Full-width of the value column (it's a flex child of
 // the wrapping value cell) so it lines up with the value, not the label gutter.
-exports.StyledRowInset = styled_components_1.default.div(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n  flex-basis: 100%;\n  width: 100%;\n  margin-top: 4px;\n"], ["\n  flex-basis: 100%;\n  width: 100%;\n  margin-top: 4px;\n"])));
+exports.StyledRowInset = styled_components_1.default.div(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  flex-basis: 100%;\n  width: 100%;\n  margin-top: 4px;\n"], ["\n  flex-basis: 100%;\n  width: 100%;\n  margin-top: 4px;\n"])));
 /**
- * The stack literal text renders in: source, ids, tokens, data strings.
- *
- * Defined HERE rather than taken from reqore's `ReqoreFonts.mono`, which is the
- * same stack. Reqore is a peer dependency at `>=0.71.16` and that export arrived
- * later, so reading it would crash every consumer inside the declared range —
- * the whole form preview lost over a font choice. One local constant costs
- * nothing and keeps the code preview and the schema view's data values
- * identical, which is the only reason to share it in the first place.
+ * The stack literal text renders in: source, ids, tokens, data strings - reqore's own (`ReqoreFonts.mono`), as
+ * the expression editor's, so the code preview, the schema view's data values and the editor's text are one face.
+ * It has been in reqore since 0.72.7, below the peer range (`>=0.74.0`). Never the bare generic `monospace`:
+ * that is the browser's default fixed-width font (Courier in Chrome on macOS), larger than the text beside it.
  */
-exports.MONO_FONT_STACK = "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace";
+exports.MONO_FONT_STACK = reqore_1.ReqoreFonts.mono;
 // A collapsed code-block preview shown under the value summary for a
 // `code-editor` field.  Multi-line, monospace, subtle background — matches
 // the aesthetic of the classic code-view surface but small enough to sit
 // inside a read-row.  Height is capped by the wrapping `ReqoreCollapsibleContent`
 // so the "Show more" affordance stays useful.
-exports.StyledCodePreview = styled_components_1.default.pre(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n  margin: 0;\n  padding: 8px 10px;\n  border-radius: 4px;\n  background: ", ";\n  border: 1px solid ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: 11.5px;\n  line-height: 1.5;\n  white-space: pre;\n  overflow: auto;\n  max-width: 100%;\n"], ["\n  margin: 0;\n  padding: 8px 10px;\n  border-radius: 4px;\n  background: ", ";\n  border: 1px solid ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: 11.5px;\n  line-height: 1.5;\n  white-space: pre;\n  overflow: auto;\n  max-width: 100%;\n"])), function (_a) {
+exports.StyledCodePreview = styled_components_1.default.pre(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n  margin: 0;\n  padding: 8px 10px;\n  border-radius: 4px;\n  background: ", ";\n  border: 1px solid ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: 11.5px;\n  line-height: 1.5;\n  white-space: pre;\n  overflow: auto;\n  max-width: 100%;\n"], ["\n  margin: 0;\n  padding: 8px 10px;\n  border-radius: 4px;\n  background: ", ";\n  border: 1px solid ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: 11.5px;\n  line-height: 1.5;\n  white-space: pre;\n  overflow: auto;\n  max-width: 100%;\n"])), function (_a) {
     var $bg = _a.$bg;
     return $bg;
 }, function (_a) {
@@ -279,15 +301,7 @@ exports.StyledCodePreview = styled_components_1.default.pre(templateObject_33 ||
     var $fg = _a.$fg;
     return $fg;
 }, exports.MONO_FONT_STACK);
-// A small inline colour swatch shown before an rgbcolor value's hex string.
-exports.StyledColorSwatch = styled_components_1.default.span(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n  width: 12px;\n  height: 12px;\n  border-radius: 3px;\n  flex: 0 0 auto;\n  background: ", ";\n  border: 1px solid ", ";\n"], ["\n  width: 12px;\n  height: 12px;\n  border-radius: 3px;\n  flex: 0 0 auto;\n  background: ", ";\n  border: 1px solid ", ";\n"])), function (_a) {
-    var $color = _a.$color;
-    return $color;
-}, function (_a) {
-    var $border = _a.$border;
-    return $border;
-});
-exports.StyledGroupBody = styled_components_1.default.div(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  position: relative;\n  /* Exposed as a var so the inter-field divider can centre itself in the gap\n     (the gap differs wide vs narrow). */\n  --readfirst-row-gap: 4px;\n  gap: var(--readfirst-row-gap);\n\n  /* Indent each field block under the group header by a FLUID step. The %\n     resolves against this container's width (not the screen), so it tracks the\n     (Field blocks no longer get a left gutter \u2014 the spine/rail that needed it are\n     gone, so rows sit flush against the box, like the Focus prototype.) */\n  > * {\n    margin-left: 0;\n  }\n\n  /* No group spine: the \"Focus\" look keeps the rows flat against the box. (The\n     required-group rail is a separate descendant ::after and still renders.) */\n\n  .readfirst-row {\n    display: grid;\n    /* Fixed label column: the recessed value surface (::before below) starts at a\n       constant x, so the label width can't flex or the stripe would drift off the\n       value edge. The value column is minmax(0, 1fr) \u2014 a bare 1fr keeps its\n       min-content width, so a long unbroken value (e.g. a URL) would force the\n       grid wider than its container and produce a horizontal scrollbar. The 0\n       minimum lets it shrink and the value cell's ellipsis take over instead. */\n    grid-template-columns: ", " minmax(0, 1fr) auto;\n    /* CENTRE the cells vertically: on the common single-line read row the label,\n       value and status dot all sit on one centred line. Tall rows (a shown\n       description, message panels or a hash preview) opt back into top-alignment\n       (.readfirst-row-info-open / .readfirst-row-tall below) so the label + dot\n       stay on the value's FIRST line instead of floating to the middle. */\n    align-items: center;\n    gap: 14px;\n    /* Generous, SYMMETRIC vertical padding so a single-line row isn't cramped\n       (content sits with even breathing room top + bottom); a min-height floor\n       keeps the rare shorter row a comfortable tap target. */\n    min-height: 40px;\n    padding: 9px 10px;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: background 0.12s ease;\n  }\n  /* A dim hairline in the gap below each field so its start/end reads clearly.\n     Absolutely positioned (not a border) so it stays straight + full-width and\n     the row's rounded hover highlight is unaffected; sits in the inter-row gap. */\n  .readfirst-row::after {\n    content: '';\n    position: absolute;\n    /* Inset to the row's horizontal padding so the line spans the content, not\n       the full box edge-to-edge. */\n    left: ", "px;\n    right: ", "px;\n    /* Centred in the inter-field gap (which differs wide vs narrow) so the space\n       above and below each line is equal. */\n    bottom: calc(var(--readfirst-row-gap, 4px) / -2);\n    height: 1px;\n    background: ", ";\n    opacity: 0.5;\n    pointer-events: none;\n    z-index: 0;\n  }\n  .readfirst-row:last-child::after {\n    display: none;\n  }\n  .readfirst-row:hover {\n    background: ", ";\n  }\n  .readfirst-row:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: -2px;\n    background: ", ";\n  }\n  /* A hidden (not-yet-added) field surfaced by the search is dimmed. */\n  .readfirst-row-hidden {\n    opacity: 0.65;\n  }\n  /* The \"N more fields\" control IS a field row \u2014 same grid, same padding, same\n     hover \u2014 so it lines up with the rows above instead of floating as a scrap\n     of text in the box's corner. A dashed edge and a lower-contrast label are\n     what say it is not itself a field: nothing here can be set.\n\n     It spans both content columns because it has no label/value split, and it\n     drops the inter-row hairline (the ::after rule) since it always sits last. */\n  .readfirst-more-row {\n    grid-template-columns: 1fr auto;\n    border: 1px dashed ", ";\n    background: transparent;\n    width: 100%;\n    text-align: left;\n    font: inherit;\n    color: inherit;\n    /* The dashed edge replaces the hairline; two lines would read as a divider\n       AND a border stacked. */\n    margin-top: 2px;\n  }\n  .readfirst-more-row::after {\n    display: none;\n  }\n  .readfirst-more-row:hover {\n    background: ", ";\n    border-style: solid;\n  }\n  .readfirst-more-row:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: -2px;\n  }\n  /* The chevron points the way the click goes: down to reveal, up to fold. */\n  .readfirst-more-row .readfirst-more-chevron {\n    transition: transform 0.15s ease;\n  }\n  .readfirst-more-row[aria-expanded='true'] .readfirst-more-chevron {\n    transform: rotate(180deg);\n  }\n  /* A disabled field (schema disabled flag or unmet dependencies) is not a\n     click target \u2014 no hover invite, not-allowed cursor; a lock replaces the\n     pencil. */\n  /* A disabled field reads dimmed (its name + value at 0.6) \u2014 clearly inactive. */\n  .readfirst-row-disabled {\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n  .readfirst-row-disabled:hover {\n    background: transparent;\n  }\n  /* Required-group linkage: hovering a member highlights every sibling row \u2014\n     just a background tint, no left stripe (that reads as an intent edge). */\n  .readfirst-row-group-highlight {\n    background: ", ";\n  }\n  .readfirst-row-flash {\n    animation: readfirstRowFlash 1.4s ease;\n  }\n  @keyframes readfirstRowFlash {\n    0% {\n      background: ", ";\n    }\n    100% {\n      background: transparent;\n    }\n  }\n  /* A scalar row being edited in place: the real editor replaces the value\n     cell. The row stops being a click target (the editor owns the clicks) and\n     keeps a constant active background. Vertical padding is tightened so the\n     editor fits inside the same ~38px the read row occupies \u2014 switching into\n     (and out of) inline editing must not shift the rows around it. */\n  .readfirst-row-editing {\n    cursor: default;\n    /* Top-anchor the cells: with multi-line editors (e.g. allowed-values =\n       input + picker), per-cell centring gives every control a different\n       anchor. Instead everything aligns to the FIRST editor line \u2014 label and\n       the \u2713/\u21BA cluster get small offsets to sit optically centred on it. */\n    align-items: start;\n    background: ", ";\n    /* No top padding (the per-cell nudges below anchor the editor to the first\n       line), but a real BOTTOM padding so the editor never sits flush against\n       the row's bottom edge \u2014 a tall input used to look clipped/unfinished. */\n    padding-top: 0;\n    padding-bottom: 9px;\n    /* Tighter column gap: the editor's trailing template \u22EE and our \u2713 should\n       read as one control cluster, not two separated groups. */\n    column-gap: 6px;\n  }\n  /* Centre each cell's content on the row's ~38px first-line band. The label\n     text (+10) and the \u2713/\u21BA cluster (+3) were already nudged, but the editor\n     cell was not \u2014 so a single-line input sat ~3px above the buttons. A 32px\n     control needs +3 to centre in 38px, so the editor gets the same offset and\n     lines up with the buttons. (A multi-line editor's first line lands on the\n     band too; its extra rows grow downward.) */\n  .readfirst-row-editing > div:nth-child(1) {\n    padding-top: 10px;\n  }\n  .readfirst-row-editing > div:nth-child(2) {\n    padding-top: 3px;\n  }\n  .readfirst-row-editing > div:nth-child(3) {\n    padding-top: 3px;\n  }\n  /* A read-only row is not a control. No pointer and no hover tint, because a\n     click does nothing; and its value wraps in full \u2014 the row is the only\n     rendering the value gets, so a line cut with an ellipsis would be the\n     reader's whole answer. */\n  .readfirst-row-read {\n    cursor: default;\n  }\n  .readfirst-row-read:hover {\n    background: transparent;\n  }\n  .readfirst-row-read .options-readfirst-valuetext {\n    white-space: pre-wrap;\n    overflow: visible;\n    text-overflow: clip;\n    overflow-wrap: anywhere;\n  }\n  .readfirst-row-editing:hover {\n    background: ", ";\n  }\n\n  /* Narrow FORMS (phone / slim drawer): stack each row \u2014 label + actions share\n     the first line, the value cell (or the inline editor) takes the full width\n     beneath. The class is set from a measured wrap width (react-use useMeasure)\n     rather than a viewport media query, so a slim desktop drawer stacks too.\n     The 3 row children are placed explicitly:\n     label (1,1) \u00B7 actions (1,2) \u00B7 value (2, span both). */\n  /* Generous breathing room BETWEEN fields when stacked \u2014 far easier to scan and\n     less overwhelming on a phone. */\n  &.readfirst-narrow {\n    --readfirst-row-gap: 18px;\n  }\n  &.readfirst-narrow .readfirst-row {\n    grid-template-columns: minmax(0, 1fr) auto;\n    gap: 2px 14px;\n    position: relative;\n  }\n  &.readfirst-narrow .readfirst-row > :nth-child(1) {\n    grid-column: 1;\n    grid-row: 1;\n  }\n  &.readfirst-narrow .readfirst-row > :nth-child(3) {\n    grid-column: 2;\n    grid-row: 1;\n  }\n  &.readfirst-narrow .readfirst-row > :nth-child(2) {\n    grid-column: 1 / -1;\n    grid-row: 2;\n  }\n  /* Read (non-editing) rows: float the trailing actions (status dot + the\n     hover-revealed delete/revert) out of the grid flow so a delete button can't\n     inflate the first row and push the value down. They're pinned to a band the\n     height of the LABEL line and vertically centred in it \u2014 so the dot always\n     sits at the same place (centred on the field name), never the bare corner. */\n  &.readfirst-narrow .readfirst-row:not(.readfirst-row-editing) > :nth-child(3) {\n    position: absolute;\n    top: 2px;\n    right: 10px;\n    height: 22px;\n  }\n  &.readfirst-narrow .readfirst-row:not(.readfirst-row-editing) > :nth-child(1) {\n    padding-right: 46px;\n  }\n\n  /* Focus calm rows: NO recessed value surface and NO intent stripe. Row status\n     is carried by the trailing status dot; message/preview panels keep their own\n     intent backgrounds. The (now invisible) pseudo is retained only to preserve\n     the block's positioning/stacking context that the required-group rail and its\n     cluster nodes resolve against \u2014 removing it would unmoor them. */\n  > *:not(.options-readfirst-card) {\n    position: relative;\n  }\n  > *:not(.options-readfirst-card)::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    left: ", ";\n    background: transparent;\n    pointer-events: none;\n    z-index: 0;\n  }\n  /* Content rides above the surface layer \u2014 except the cluster node, which is\n     absolutely positioned in the gutter and must keep its own positioning. */\n  > *:not(.options-readfirst-card) > *:not(.options-readfirst-node) {\n    position: relative;\n    z-index: 1;\n  }\n\n  /* (The required-group connection rail was removed \u2014 the \"One of the below is\n     required\" box now carries the grouping.) */\n\n  /* Tall rows top-anchor (overriding the row's centred default) so the label and\n     dot stay on the value's FIRST line rather than floating to the vertical\n     middle: .readfirst-row-info-open = a shown short_desc grows the LABEL;\n     .readfirst-row-tall = message panels / a hash preview grow the VALUE cell. */\n  .readfirst-row-info-open,\n  .readfirst-row-tall {\n    align-items: start;\n  }\n  /* Narrow stacks label-over-value: the value aligns flush UNDER the label (no\n     indent), like the Focus prototype. */\n  &.readfirst-narrow .readfirst-row > :nth-child(2) {\n    padding-left: 0;\n  }\n  &.readfirst-narrow > *:not(.options-readfirst-card)::before {\n    left: 0;\n  }\n  /* Touch layouts have no hover: a slot reserved for the hover-revealed edit\n     pencil is permanent dead space that insets every chip from the edge \u2014\n     drop it (rows are tap-to-edit; the lock/add slots stay, they're static). */\n  &.readfirst-narrow .options-readfirst-trailing-hover-only {\n    /* !important: the slot carries an inline display for the desktop layout. */\n    display: none !important;\n  }\n  /* Stacked rows: keep them tight (match the Focus prototype). The min-height is\n     dropped so a 2-line label+value row sizes to its content instead of being\n     padded out to 38px. The in-place editor keeps zero padding (below). */\n  &.readfirst-narrow .readfirst-row {\n    padding-top: 2px;\n    padding-bottom: 2px;\n    min-height: 0;\n  }\n  &.readfirst-narrow .readfirst-row-editing {\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n\n  /* CALM appearance \u2014 a section of label/value rows split by hairlines.\n\n     Every entry the body holds (a row, the column an open row sits in, a\n     group heading, the one-of cluster, the \"N more fields\" control) is drawn\n     edge to edge with ONE full-width hairline above it, the same colour as the\n     section's own edge. The first entry's line is the one under the section\n     header (a minimal header draws none of its own). Two things take no line,\n     because a heading and the rows it heads read as one block: the entry right\n     under a group heading (or its subtitle), and the first row under the\n     cluster's sentence.\n\n     Rows lose their rounded hover pill and the inset hairline between them, and\n     take the section's 16px inset. Placed last so it wins over the narrow\n     rules above, which a phone-width calm form also matches. */\n  ", "\n"], ["\n  display: flex;\n  flex-flow: column;\n  position: relative;\n  /* Exposed as a var so the inter-field divider can centre itself in the gap\n     (the gap differs wide vs narrow). */\n  --readfirst-row-gap: 4px;\n  gap: var(--readfirst-row-gap);\n\n  /* Indent each field block under the group header by a FLUID step. The %\n     resolves against this container's width (not the screen), so it tracks the\n     (Field blocks no longer get a left gutter \u2014 the spine/rail that needed it are\n     gone, so rows sit flush against the box, like the Focus prototype.) */\n  > * {\n    margin-left: 0;\n  }\n\n  /* No group spine: the \"Focus\" look keeps the rows flat against the box. (The\n     required-group rail is a separate descendant ::after and still renders.) */\n\n  .readfirst-row {\n    display: grid;\n    /* Fixed label column: the recessed value surface (::before below) starts at a\n       constant x, so the label width can't flex or the stripe would drift off the\n       value edge. The value column is minmax(0, 1fr) \u2014 a bare 1fr keeps its\n       min-content width, so a long unbroken value (e.g. a URL) would force the\n       grid wider than its container and produce a horizontal scrollbar. The 0\n       minimum lets it shrink and the value cell's ellipsis take over instead. */\n    grid-template-columns: ", " minmax(0, 1fr) auto;\n    /* CENTRE the cells vertically: on the common single-line read row the label,\n       value and status dot all sit on one centred line. Tall rows (a shown\n       description, message panels or a hash preview) opt back into top-alignment\n       (.readfirst-row-info-open / .readfirst-row-tall below) so the label + dot\n       stay on the value's FIRST line instead of floating to the middle. */\n    align-items: center;\n    gap: 14px;\n    /* Generous, SYMMETRIC vertical padding so a single-line row isn't cramped\n       (content sits with even breathing room top + bottom); a min-height floor\n       keeps the rare shorter row a comfortable tap target. */\n    min-height: 40px;\n    padding: 9px 10px;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: background 0.12s ease;\n  }\n  /* A dim hairline in the gap below each field so its start/end reads clearly.\n     Absolutely positioned (not a border) so it stays straight + full-width and\n     the row's rounded hover highlight is unaffected; sits in the inter-row gap. */\n  .readfirst-row::after {\n    content: '';\n    position: absolute;\n    /* Inset to the row's horizontal padding so the line spans the content, not\n       the full box edge-to-edge. */\n    left: ", "px;\n    right: ", "px;\n    /* Centred in the inter-field gap (which differs wide vs narrow) so the space\n       above and below each line is equal. */\n    bottom: calc(var(--readfirst-row-gap, 4px) / -2);\n    height: 1px;\n    background: ", ";\n    opacity: 0.5;\n    pointer-events: none;\n    z-index: 0;\n  }\n  .readfirst-row:last-child::after {\n    display: none;\n  }\n  .readfirst-row:hover {\n    background: ", ";\n  }\n  .readfirst-row:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: -2px;\n    background: ", ";\n  }\n  /* A hidden (not-yet-added) field surfaced by the search is dimmed. */\n  .readfirst-row-hidden {\n    opacity: 0.65;\n  }\n  /* The \"N more fields\" control IS a field row \u2014 same grid, same padding, same\n     hover \u2014 so it lines up with the rows above instead of floating as a scrap\n     of text in the box's corner. A dashed edge and a lower-contrast label are\n     what say it is not itself a field: nothing here can be set.\n\n     It spans both content columns because it has no label/value split, and it\n     drops the inter-row hairline (the ::after rule) since it always sits last. */\n  .readfirst-more-row {\n    grid-template-columns: 1fr auto;\n    border: 1px dashed ", ";\n    background: transparent;\n    width: 100%;\n    text-align: left;\n    font: inherit;\n    color: inherit;\n    /* The dashed edge replaces the hairline; two lines would read as a divider\n       AND a border stacked. */\n    margin-top: 2px;\n  }\n  .readfirst-more-row::after {\n    display: none;\n  }\n  .readfirst-more-row:hover {\n    background: ", ";\n    border-style: solid;\n  }\n  .readfirst-more-row:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: -2px;\n  }\n  /* The chevron points the way the click goes: down to reveal, up to fold. */\n  .readfirst-more-row .readfirst-more-chevron {\n    transition: transform 0.15s ease;\n  }\n  .readfirst-more-row[aria-expanded='true'] .readfirst-more-chevron {\n    transform: rotate(180deg);\n  }\n  /* A disabled field (schema disabled flag or unmet dependencies) is not a\n     click target \u2014 no hover invite, not-allowed cursor; a lock replaces the\n     pencil. */\n  /* A disabled field reads dimmed (its name + value at 0.6) \u2014 clearly inactive. */\n  .readfirst-row-disabled {\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n  .readfirst-row-disabled:hover {\n    background: transparent;\n  }\n  /* Required-group linkage: hovering a member highlights every sibling row \u2014\n     just a background tint, no left stripe (that reads as an intent edge). */\n  .readfirst-row-group-highlight {\n    background: ", ";\n  }\n  .readfirst-row-flash {\n    animation: readfirstRowFlash 1.4s ease;\n  }\n  @keyframes readfirstRowFlash {\n    0% {\n      background: ", ";\n    }\n    100% {\n      background: transparent;\n    }\n  }\n  /* A scalar row being edited in place: the real editor replaces the value\n     cell. The row stops being a click target (the editor owns the clicks) and\n     keeps a constant active background. Vertical padding is tightened so the\n     editor fits inside the same ~38px the read row occupies \u2014 switching into\n     (and out of) inline editing must not shift the rows around it. */\n  .readfirst-row-editing {\n    cursor: default;\n    /* Top-anchor the cells: with multi-line editors (e.g. allowed-values =\n       input + picker), per-cell centring gives every control a different\n       anchor. Instead everything aligns to the FIRST editor line \u2014 label and\n       the \u2713/\u21BA cluster get small offsets to sit optically centred on it. */\n    align-items: start;\n    background: ", ";\n    /* No top padding (the per-cell nudges below anchor the editor to the first\n       line), but a real BOTTOM padding so the editor never sits flush against\n       the row's bottom edge \u2014 a tall input used to look clipped/unfinished. */\n    padding-top: 0;\n    padding-bottom: 9px;\n    /* Tighter column gap: the editor's trailing template \u22EE and our \u2713 should\n       read as one control cluster, not two separated groups. */\n    column-gap: 6px;\n  }\n  /* Centre each cell's content on the row's ~38px first-line band. The label\n     text (+10) and the \u2713/\u21BA cluster (+3) were already nudged, but the editor\n     cell was not \u2014 so a single-line input sat ~3px above the buttons. A 32px\n     control needs +3 to centre in 38px, so the editor gets the same offset and\n     lines up with the buttons. (A multi-line editor's first line lands on the\n     band too; its extra rows grow downward.) */\n  .readfirst-row-editing > div:nth-child(1) {\n    padding-top: 10px;\n  }\n  .readfirst-row-editing > div:nth-child(2) {\n    padding-top: 3px;\n  }\n  .readfirst-row-editing > div:nth-child(3) {\n    padding-top: 3px;\n  }\n  /* A read-only row is not a control. No pointer and no hover tint, because a\n     click does nothing; and its value wraps in full \u2014 the row is the only\n     rendering the value gets, so a line cut with an ellipsis would be the\n     reader's whole answer. */\n  .readfirst-row-read {\n    cursor: default;\n  }\n  .readfirst-row-read:hover {\n    background: transparent;\n  }\n  .readfirst-row-read .options-readfirst-valuetext {\n    white-space: pre-wrap;\n    overflow: visible;\n    text-overflow: clip;\n    overflow-wrap: anywhere;\n  }\n  .readfirst-row-editing:hover {\n    background: ", ";\n  }\n\n  /* Narrow FORMS (phone / slim drawer): stack each row \u2014 label + actions share\n     the first line, the value cell (or the inline editor) takes the full width\n     beneath. The class is set from a measured wrap width (react-use useMeasure)\n     rather than a viewport media query, so a slim desktop drawer stacks too.\n     The 3 row children are placed explicitly:\n     label (1,1) \u00B7 actions (1,2) \u00B7 value (2, span both). */\n  /* Generous breathing room BETWEEN fields when stacked \u2014 far easier to scan and\n     less overwhelming on a phone. */\n  &.readfirst-narrow {\n    --readfirst-row-gap: 18px;\n  }\n  &.readfirst-narrow .readfirst-row {\n    grid-template-columns: minmax(0, 1fr) auto;\n    gap: 2px 14px;\n    position: relative;\n  }\n  &.readfirst-narrow .readfirst-row > :nth-child(1) {\n    grid-column: 1;\n    grid-row: 1;\n  }\n  &.readfirst-narrow .readfirst-row > :nth-child(3) {\n    grid-column: 2;\n    grid-row: 1;\n  }\n  &.readfirst-narrow .readfirst-row > :nth-child(2) {\n    grid-column: 1 / -1;\n    grid-row: 2;\n  }\n  /* Read (non-editing) rows: float the trailing actions (status dot + the\n     hover-revealed delete/revert) out of the grid flow so a delete button can't\n     inflate the first row and push the value down. They're pinned to a band the\n     height of the LABEL line and vertically centred in it \u2014 so the dot always\n     sits at the same place (centred on the field name), never the bare corner. */\n  &.readfirst-narrow .readfirst-row:not(.readfirst-row-editing) > :nth-child(3) {\n    position: absolute;\n    top: 2px;\n    right: 10px;\n    height: 22px;\n  }\n  &.readfirst-narrow .readfirst-row:not(.readfirst-row-editing) > :nth-child(1) {\n    padding-right: 46px;\n  }\n\n  /* Focus calm rows: NO recessed value surface and NO intent stripe. Row status\n     is carried by the trailing status dot; message/preview panels keep their own\n     intent backgrounds. The (now invisible) pseudo is retained only to preserve\n     the block's positioning/stacking context that the required-group rail and its\n     cluster nodes resolve against \u2014 removing it would unmoor them. */\n  > *:not(.options-readfirst-card) {\n    position: relative;\n  }\n  > *:not(.options-readfirst-card)::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    left: ", ";\n    background: transparent;\n    pointer-events: none;\n    z-index: 0;\n  }\n  /* Content rides above the surface layer \u2014 except the cluster node, which is\n     absolutely positioned in the gutter and must keep its own positioning. */\n  > *:not(.options-readfirst-card) > *:not(.options-readfirst-node) {\n    position: relative;\n    z-index: 1;\n  }\n\n  /* (The required-group connection rail was removed \u2014 the \"One of the below is\n     required\" box now carries the grouping.) */\n\n  /* Tall rows top-anchor (overriding the row's centred default) so the label and\n     dot stay on the value's FIRST line rather than floating to the vertical\n     middle: .readfirst-row-info-open = a shown short_desc grows the LABEL;\n     .readfirst-row-tall = message panels / a hash preview grow the VALUE cell. */\n  .readfirst-row-info-open,\n  .readfirst-row-tall {\n    align-items: start;\n  }\n  /* Narrow stacks label-over-value: the value aligns flush UNDER the label (no\n     indent), like the Focus prototype. */\n  &.readfirst-narrow .readfirst-row > :nth-child(2) {\n    padding-left: 0;\n  }\n  &.readfirst-narrow > *:not(.options-readfirst-card)::before {\n    left: 0;\n  }\n  /* Touch layouts have no hover: a slot reserved for the hover-revealed edit\n     pencil is permanent dead space that insets every chip from the edge \u2014\n     drop it (rows are tap-to-edit; the lock/add slots stay, they're static). */\n  &.readfirst-narrow .options-readfirst-trailing-hover-only {\n    /* !important: the slot carries an inline display for the desktop layout. */\n    display: none !important;\n  }\n  /* Stacked rows: keep them tight (match the Focus prototype). The min-height is\n     dropped so a 2-line label+value row sizes to its content instead of being\n     padded out to 38px. The in-place editor keeps zero padding (below). */\n  &.readfirst-narrow .readfirst-row {\n    padding-top: 2px;\n    padding-bottom: 2px;\n    min-height: 0;\n  }\n  &.readfirst-narrow .readfirst-row-editing {\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n\n  /* CALM appearance \u2014 a section of label/value rows split by hairlines.\n\n     Every entry the body holds (a row, the column an open row sits in, a\n     group heading, the one-of cluster, the \"N more fields\" control) is drawn\n     edge to edge with ONE full-width hairline above it, the same colour as the\n     section's own edge. The first entry's line is the one under the section\n     header (a minimal header draws none of its own). Two things take no line,\n     because a heading and the rows it heads read as one block: the entry right\n     under a group heading (or its subtitle), and the first row under the\n     cluster's sentence.\n\n     Rows lose their rounded hover pill and the inset hairline between them, and\n     take the section's 16px inset. Placed last so it wins over the narrow\n     rules above, which a phone-width calm form also matches. */\n  ", "\n"])), exports.LABEL_COL, exports.COMPACT_ROW_PAD_X, exports.COMPACT_ROW_PAD_X, function (_a) {
+exports.StyledGroupBody = styled_components_1.default.div(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  position: relative;\n  /* Exposed as a var so the inter-field divider can center itself in the gap\n     (the gap differs wide vs narrow). */\n  --readfirst-row-gap: 4px;\n  gap: var(--readfirst-row-gap);\n\n  /* Indent each field block under the group header by a FLUID step. The %\n     resolves against this container's width (not the screen), so it tracks the\n     (Field blocks no longer get a left gutter \u2014 the spine/rail that needed it are\n     gone, so rows sit flush against the box, like the Focus prototype.) */\n  > * {\n    margin-left: 0;\n  }\n\n  /* No group spine: the \"Focus\" look keeps the rows flat against the box. (The\n     required-group rail is a separate descendant ::after and still renders.) */\n\n  .readfirst-row {\n    display: grid;\n    /* Fixed label column: the recessed value surface (::before below) starts at a\n       constant x, so the label width can't flex or the stripe would drift off the\n       value edge. The value column is minmax(0, 1fr) \u2014 a bare 1fr keeps its\n       min-content width, so a long unbroken value (e.g. a URL) would force the\n       grid wider than its container and produce a horizontal scrollbar. The 0\n       minimum lets it shrink and the value cell's ellipsis take over instead. */\n    grid-template-columns: ", " minmax(0, 1fr) auto;\n    /* CENTRE the cells vertically: on the common single-line read row the label,\n       value and status dot all sit on one centered line. Tall rows (a shown\n       description, message panels or a hash preview) opt back into top-alignment\n       (.readfirst-row-info-open / .readfirst-row-tall below) so the label + dot\n       stay on the value's FIRST line instead of floating to the middle. */\n    align-items: center;\n    gap: 14px;\n    /* Generous, SYMMETRIC vertical padding so a single-line row isn't cramped\n       (content sits with even breathing room top + bottom); a min-height floor\n       keeps the rare shorter row a comfortable tap target. */\n    min-height: 40px;\n    padding: 9px 10px;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: background 0.12s ease;\n  }\n  /* A dim hairline in the gap below each field so its start/end reads clearly.\n     Absolutely positioned (not a border) so it stays straight + full-width and\n     the row's rounded hover highlight is unaffected; sits in the inter-row gap. */\n  .readfirst-row::after {\n    content: '';\n    position: absolute;\n    /* Inset to the row's horizontal padding so the line spans the content, not\n       the full box edge-to-edge. */\n    left: ", "px;\n    right: ", "px;\n    /* Centered in the inter-field gap (which differs wide vs narrow) so the space\n       above and below each line is equal. */\n    bottom: calc(var(--readfirst-row-gap, 4px) / -2);\n    height: 1px;\n    background: ", ";\n    opacity: 0.5;\n    pointer-events: none;\n    z-index: 0;\n  }\n  .readfirst-row:last-child::after {\n    display: none;\n  }\n  /* A row lights up under a pointer that hovers. A finger's tap leaves the browser's :hover on what it tapped\n     until the next tap elsewhere, so on a touch screen the row stayed lit after the tap as if it were chosen\n     (FormEngine \u00B7 A Row Stacks On A Phone, a tap on its link). The keyboard's focus lights it on any device. */\n  @media (hover: hover) {\n    .readfirst-row:hover {\n      background: ", ";\n    }\n  }\n  .readfirst-row:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: -2px;\n    background: ", ";\n  }\n  /* A hidden (not-yet-added) field surfaced by the search is dimmed. */\n  .readfirst-row-hidden {\n    opacity: 0.65;\n  }\n  /* The \"N more fields\" control IS a field row \u2014 same grid, same padding, same\n     hover \u2014 so it lines up with the rows above instead of floating as a scrap\n     of text in the box's corner. A dashed edge and a lower-contrast label are\n     what say it is not itself a field: nothing here can be set.\n\n     It spans both content columns because it has no label/value split, and it\n     drops the inter-row hairline (the ::after rule) since it always sits last. */\n  .readfirst-more-row {\n    grid-template-columns: 1fr auto;\n    border: 1px dashed ", ";\n    background: transparent;\n    width: 100%;\n    text-align: left;\n    font: inherit;\n    color: inherit;\n    /* The dashed edge replaces the hairline; two lines would read as a divider\n       AND a border stacked. */\n    margin-top: 2px;\n  }\n  .readfirst-more-row::after {\n    display: none;\n  }\n  @media (hover: hover) {\n    .readfirst-more-row:hover {\n      background: ", ";\n      border-style: solid;\n    }\n  }\n  .readfirst-more-row:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: -2px;\n  }\n  /* The chevron points the way the click goes: down to reveal, up to fold. */\n  .readfirst-more-row .readfirst-more-chevron {\n    transition: transform 0.15s ease;\n  }\n  .readfirst-more-row[aria-expanded='true'] .readfirst-more-chevron {\n    transform: rotate(180deg);\n  }\n  /* A disabled field (schema disabled flag or unmet dependencies) is not a\n     click target \u2014 no hover invite, not-allowed cursor; a lock replaces the\n     pencil. */\n  /* A disabled field reads dimmed (its name + value at 0.6) \u2014 clearly inactive. */\n  .readfirst-row-disabled {\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n  .readfirst-row-disabled:hover {\n    background: transparent;\n  }\n  /* Required-group linkage: hovering a member highlights every sibling row \u2014\n     just a background tint, no left stripe (that reads as an intent edge). */\n  .readfirst-row-group-highlight {\n    background: ", ";\n  }\n  .readfirst-row-flash {\n    animation: readfirstRowFlash 1.4s ease;\n  }\n  @keyframes readfirstRowFlash {\n    0% {\n      background: ", ";\n    }\n    100% {\n      background: transparent;\n    }\n  }\n  /* A scalar row being edited in place: the real editor replaces the value\n     cell. The row stops being a click target (the editor owns the clicks) and\n     keeps a constant active background. Vertical padding is tightened so the\n     editor fits inside the same ~38px the read row occupies \u2014 switching into\n     (and out of) inline editing must not shift the rows around it. */\n  .readfirst-row-editing {\n    cursor: default;\n    /* Top-anchor the cells: with multi-line editors (e.g. allowed-values =\n       input + picker), per-cell centering gives every control a different\n       anchor. Instead everything aligns to the FIRST editor line \u2014 label and\n       the \u2713/\u21BA cluster get small offsets to sit optically centered on it. */\n    align-items: start;\n    background: ", ";\n    /* No top padding (the per-cell nudges below anchor the editor to the first\n       line), but a real BOTTOM padding so the editor never sits flush against\n       the row's bottom edge \u2014 a tall input used to look clipped/unfinished. */\n    padding-top: 0;\n    padding-bottom: 9px;\n    /* Tighter column gap: the editor's trailing template \u22EE and our \u2713 should\n       read as one control cluster, not two separated groups. */\n    column-gap: 6px;\n  }\n  /* Center each cell's content on the row's ~38px first-line band. The label\n     text (+10) and the \u2713/\u21BA cluster (+3) were already nudged, but the editor\n     cell was not \u2014 so a single-line input sat ~3px above the buttons. A 32px\n     control needs +3 to center in 38px, so the editor gets the same offset and\n     lines up with the buttons. (A multi-line editor's first line lands on the\n     band too; its extra rows grow downward.) */\n  .readfirst-row-editing > div:nth-child(1) {\n    padding-top: 10px;\n  }\n  .readfirst-row-editing > div:nth-child(2) {\n    padding-top: 3px;\n  }\n  .readfirst-row-editing > div:nth-child(3) {\n    padding-top: 3px;\n  }\n  /* A read-only row is not a control. No pointer and no hover tint, because a\n     click does nothing; and its value wraps in full \u2014 the row is the only\n     rendering the value gets, so a line cut with an ellipsis would be the\n     reader's whole answer. */\n  .readfirst-row-read {\n    cursor: default;\n  }\n  .readfirst-row-read:hover {\n    background: transparent;\n  }\n  .readfirst-row-read .options-readfirst-valuetext {\n    white-space: pre-wrap;\n    overflow: visible;\n    text-overflow: clip;\n    overflow-wrap: anywhere;\n  }\n  @media (hover: hover) {\n    .readfirst-row-editing:hover {\n      background: ", ";\n    }\n  }\n\n  /* Narrow FORMS (phone / slim drawer): stack each row \u2014 label + actions share\n     the first line, the value cell (or the inline editor) takes the width\n     beneath. The class is set where the value column would be narrower than\n     COMPACT_MIN_VALUE_WIDTH beside the measured label column (isCompactNarrow),\n     from the measured wrap width (react-use useMeasure) rather than a viewport\n     media query, so a slim desktop drawer stacks too.\n     The 3 row children are placed explicitly:\n     label (1,1) \u00B7 actions (1,2) \u00B7 value (2, span both). */\n  /* Generous breathing room BETWEEN fields when stacked \u2014 far easier to scan and\n     less overwhelming on a phone. */\n  &.readfirst-narrow {\n    --readfirst-row-gap: 18px;\n  }\n  &.readfirst-narrow .readfirst-row {\n    grid-template-columns: minmax(0, 1fr) auto;\n    gap: 2px 14px;\n    position: relative;\n  }\n  &.readfirst-narrow .readfirst-row > :nth-child(1) {\n    grid-column: 1;\n    grid-row: 1;\n  }\n  &.readfirst-narrow .readfirst-row > :nth-child(3) {\n    grid-column: 2;\n    grid-row: 1;\n  }\n  &.readfirst-narrow .readfirst-row > :nth-child(2) {\n    grid-column: 1 / -1;\n    grid-row: 2;\n  }\n  /* Read (non-editing) rows: float the trailing actions (status dot + the\n     hover-revealed delete/revert) out of the grid flow so a delete button can't\n     inflate the first row and push the value down. They're pinned to a band the\n     height of the LABEL line and vertically centered in it \u2014 so the dot always\n     sits at the same place (centered on the field name), never the bare corner. */\n  &.readfirst-narrow .readfirst-row:not(.readfirst-row-editing) > :nth-child(3) {\n    position: absolute;\n    top: 2px;\n    right: 10px;\n    height: 22px;\n  }\n  &.readfirst-narrow .readfirst-row:not(.readfirst-row-editing) > :nth-child(1) {\n    padding-right: 46px;\n  }\n\n  /* Focus calm rows: NO recessed value surface and NO intent stripe. Row status\n     is carried by the trailing status dot; message/preview panels keep their own\n     intent backgrounds. The (now invisible) pseudo is retained only to preserve\n     the block's positioning/stacking context that the required-group rail and its\n     cluster nodes resolve against \u2014 removing it would unmoor them. */\n  > *:not(.options-readfirst-card) {\n    position: relative;\n  }\n  > *:not(.options-readfirst-card)::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    left: ", ";\n    background: transparent;\n    pointer-events: none;\n    z-index: 0;\n  }\n  /* Content rides above the surface layer \u2014 except the cluster node, which is\n     absolutely positioned in the gutter and must keep its own positioning. */\n  > *:not(.options-readfirst-card) > *:not(.options-readfirst-node) {\n    position: relative;\n    z-index: 1;\n  }\n\n  /* (The required-group connection rail was removed \u2014 the \"One of the below is\n     required\" box now carries the grouping.) */\n\n  /* Tall rows top-anchor (overriding the row's centered default) so the label and\n     dot stay on the value's FIRST line rather than floating to the vertical\n     middle: .readfirst-row-info-open = a shown short_desc grows the LABEL;\n     .readfirst-row-tall = message panels / a hash preview grow the VALUE cell. */\n  .readfirst-row-info-open,\n  .readfirst-row-tall {\n    align-items: start;\n  }\n  /* Narrow stacks label-over-value: the value sits on the line below the label,\n     slightly indented under it (David, qorus#646), so it reads as the label's. */\n  &.readfirst-narrow .readfirst-row > :nth-child(2) {\n    padding-left: ", "px;\n  }\n  &.readfirst-narrow > *:not(.options-readfirst-card)::before {\n    left: 0;\n  }\n  /* Touch layouts have no hover: a slot reserved for the hover-revealed edit\n     pencil is permanent dead space that insets every chip from the edge \u2014\n     drop it (rows are tap-to-edit; the lock/add slots stay, they're static). */\n  &.readfirst-narrow .options-readfirst-trailing-hover-only {\n    /* !important: the slot carries an inline display for the desktop layout. */\n    display: none !important;\n  }\n  /* Stacked rows: keep them tight (match the Focus prototype). The min-height is\n     dropped so a 2-line label+value row sizes to its content instead of being\n     padded out to 38px. The in-place editor keeps zero padding (below). */\n  &.readfirst-narrow .readfirst-row {\n    padding-top: 2px;\n    padding-bottom: 2px;\n    min-height: 0;\n  }\n  &.readfirst-narrow .readfirst-row-editing {\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n"], ["\n  display: flex;\n  flex-flow: column;\n  position: relative;\n  /* Exposed as a var so the inter-field divider can center itself in the gap\n     (the gap differs wide vs narrow). */\n  --readfirst-row-gap: 4px;\n  gap: var(--readfirst-row-gap);\n\n  /* Indent each field block under the group header by a FLUID step. The %\n     resolves against this container's width (not the screen), so it tracks the\n     (Field blocks no longer get a left gutter \u2014 the spine/rail that needed it are\n     gone, so rows sit flush against the box, like the Focus prototype.) */\n  > * {\n    margin-left: 0;\n  }\n\n  /* No group spine: the \"Focus\" look keeps the rows flat against the box. (The\n     required-group rail is a separate descendant ::after and still renders.) */\n\n  .readfirst-row {\n    display: grid;\n    /* Fixed label column: the recessed value surface (::before below) starts at a\n       constant x, so the label width can't flex or the stripe would drift off the\n       value edge. The value column is minmax(0, 1fr) \u2014 a bare 1fr keeps its\n       min-content width, so a long unbroken value (e.g. a URL) would force the\n       grid wider than its container and produce a horizontal scrollbar. The 0\n       minimum lets it shrink and the value cell's ellipsis take over instead. */\n    grid-template-columns: ", " minmax(0, 1fr) auto;\n    /* CENTRE the cells vertically: on the common single-line read row the label,\n       value and status dot all sit on one centered line. Tall rows (a shown\n       description, message panels or a hash preview) opt back into top-alignment\n       (.readfirst-row-info-open / .readfirst-row-tall below) so the label + dot\n       stay on the value's FIRST line instead of floating to the middle. */\n    align-items: center;\n    gap: 14px;\n    /* Generous, SYMMETRIC vertical padding so a single-line row isn't cramped\n       (content sits with even breathing room top + bottom); a min-height floor\n       keeps the rare shorter row a comfortable tap target. */\n    min-height: 40px;\n    padding: 9px 10px;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: background 0.12s ease;\n  }\n  /* A dim hairline in the gap below each field so its start/end reads clearly.\n     Absolutely positioned (not a border) so it stays straight + full-width and\n     the row's rounded hover highlight is unaffected; sits in the inter-row gap. */\n  .readfirst-row::after {\n    content: '';\n    position: absolute;\n    /* Inset to the row's horizontal padding so the line spans the content, not\n       the full box edge-to-edge. */\n    left: ", "px;\n    right: ", "px;\n    /* Centered in the inter-field gap (which differs wide vs narrow) so the space\n       above and below each line is equal. */\n    bottom: calc(var(--readfirst-row-gap, 4px) / -2);\n    height: 1px;\n    background: ", ";\n    opacity: 0.5;\n    pointer-events: none;\n    z-index: 0;\n  }\n  .readfirst-row:last-child::after {\n    display: none;\n  }\n  /* A row lights up under a pointer that hovers. A finger's tap leaves the browser's :hover on what it tapped\n     until the next tap elsewhere, so on a touch screen the row stayed lit after the tap as if it were chosen\n     (FormEngine \u00B7 A Row Stacks On A Phone, a tap on its link). The keyboard's focus lights it on any device. */\n  @media (hover: hover) {\n    .readfirst-row:hover {\n      background: ", ";\n    }\n  }\n  .readfirst-row:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: -2px;\n    background: ", ";\n  }\n  /* A hidden (not-yet-added) field surfaced by the search is dimmed. */\n  .readfirst-row-hidden {\n    opacity: 0.65;\n  }\n  /* The \"N more fields\" control IS a field row \u2014 same grid, same padding, same\n     hover \u2014 so it lines up with the rows above instead of floating as a scrap\n     of text in the box's corner. A dashed edge and a lower-contrast label are\n     what say it is not itself a field: nothing here can be set.\n\n     It spans both content columns because it has no label/value split, and it\n     drops the inter-row hairline (the ::after rule) since it always sits last. */\n  .readfirst-more-row {\n    grid-template-columns: 1fr auto;\n    border: 1px dashed ", ";\n    background: transparent;\n    width: 100%;\n    text-align: left;\n    font: inherit;\n    color: inherit;\n    /* The dashed edge replaces the hairline; two lines would read as a divider\n       AND a border stacked. */\n    margin-top: 2px;\n  }\n  .readfirst-more-row::after {\n    display: none;\n  }\n  @media (hover: hover) {\n    .readfirst-more-row:hover {\n      background: ", ";\n      border-style: solid;\n    }\n  }\n  .readfirst-more-row:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: -2px;\n  }\n  /* The chevron points the way the click goes: down to reveal, up to fold. */\n  .readfirst-more-row .readfirst-more-chevron {\n    transition: transform 0.15s ease;\n  }\n  .readfirst-more-row[aria-expanded='true'] .readfirst-more-chevron {\n    transform: rotate(180deg);\n  }\n  /* A disabled field (schema disabled flag or unmet dependencies) is not a\n     click target \u2014 no hover invite, not-allowed cursor; a lock replaces the\n     pencil. */\n  /* A disabled field reads dimmed (its name + value at 0.6) \u2014 clearly inactive. */\n  .readfirst-row-disabled {\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n  .readfirst-row-disabled:hover {\n    background: transparent;\n  }\n  /* Required-group linkage: hovering a member highlights every sibling row \u2014\n     just a background tint, no left stripe (that reads as an intent edge). */\n  .readfirst-row-group-highlight {\n    background: ", ";\n  }\n  .readfirst-row-flash {\n    animation: readfirstRowFlash 1.4s ease;\n  }\n  @keyframes readfirstRowFlash {\n    0% {\n      background: ", ";\n    }\n    100% {\n      background: transparent;\n    }\n  }\n  /* A scalar row being edited in place: the real editor replaces the value\n     cell. The row stops being a click target (the editor owns the clicks) and\n     keeps a constant active background. Vertical padding is tightened so the\n     editor fits inside the same ~38px the read row occupies \u2014 switching into\n     (and out of) inline editing must not shift the rows around it. */\n  .readfirst-row-editing {\n    cursor: default;\n    /* Top-anchor the cells: with multi-line editors (e.g. allowed-values =\n       input + picker), per-cell centering gives every control a different\n       anchor. Instead everything aligns to the FIRST editor line \u2014 label and\n       the \u2713/\u21BA cluster get small offsets to sit optically centered on it. */\n    align-items: start;\n    background: ", ";\n    /* No top padding (the per-cell nudges below anchor the editor to the first\n       line), but a real BOTTOM padding so the editor never sits flush against\n       the row's bottom edge \u2014 a tall input used to look clipped/unfinished. */\n    padding-top: 0;\n    padding-bottom: 9px;\n    /* Tighter column gap: the editor's trailing template \u22EE and our \u2713 should\n       read as one control cluster, not two separated groups. */\n    column-gap: 6px;\n  }\n  /* Center each cell's content on the row's ~38px first-line band. The label\n     text (+10) and the \u2713/\u21BA cluster (+3) were already nudged, but the editor\n     cell was not \u2014 so a single-line input sat ~3px above the buttons. A 32px\n     control needs +3 to center in 38px, so the editor gets the same offset and\n     lines up with the buttons. (A multi-line editor's first line lands on the\n     band too; its extra rows grow downward.) */\n  .readfirst-row-editing > div:nth-child(1) {\n    padding-top: 10px;\n  }\n  .readfirst-row-editing > div:nth-child(2) {\n    padding-top: 3px;\n  }\n  .readfirst-row-editing > div:nth-child(3) {\n    padding-top: 3px;\n  }\n  /* A read-only row is not a control. No pointer and no hover tint, because a\n     click does nothing; and its value wraps in full \u2014 the row is the only\n     rendering the value gets, so a line cut with an ellipsis would be the\n     reader's whole answer. */\n  .readfirst-row-read {\n    cursor: default;\n  }\n  .readfirst-row-read:hover {\n    background: transparent;\n  }\n  .readfirst-row-read .options-readfirst-valuetext {\n    white-space: pre-wrap;\n    overflow: visible;\n    text-overflow: clip;\n    overflow-wrap: anywhere;\n  }\n  @media (hover: hover) {\n    .readfirst-row-editing:hover {\n      background: ", ";\n    }\n  }\n\n  /* Narrow FORMS (phone / slim drawer): stack each row \u2014 label + actions share\n     the first line, the value cell (or the inline editor) takes the width\n     beneath. The class is set where the value column would be narrower than\n     COMPACT_MIN_VALUE_WIDTH beside the measured label column (isCompactNarrow),\n     from the measured wrap width (react-use useMeasure) rather than a viewport\n     media query, so a slim desktop drawer stacks too.\n     The 3 row children are placed explicitly:\n     label (1,1) \u00B7 actions (1,2) \u00B7 value (2, span both). */\n  /* Generous breathing room BETWEEN fields when stacked \u2014 far easier to scan and\n     less overwhelming on a phone. */\n  &.readfirst-narrow {\n    --readfirst-row-gap: 18px;\n  }\n  &.readfirst-narrow .readfirst-row {\n    grid-template-columns: minmax(0, 1fr) auto;\n    gap: 2px 14px;\n    position: relative;\n  }\n  &.readfirst-narrow .readfirst-row > :nth-child(1) {\n    grid-column: 1;\n    grid-row: 1;\n  }\n  &.readfirst-narrow .readfirst-row > :nth-child(3) {\n    grid-column: 2;\n    grid-row: 1;\n  }\n  &.readfirst-narrow .readfirst-row > :nth-child(2) {\n    grid-column: 1 / -1;\n    grid-row: 2;\n  }\n  /* Read (non-editing) rows: float the trailing actions (status dot + the\n     hover-revealed delete/revert) out of the grid flow so a delete button can't\n     inflate the first row and push the value down. They're pinned to a band the\n     height of the LABEL line and vertically centered in it \u2014 so the dot always\n     sits at the same place (centered on the field name), never the bare corner. */\n  &.readfirst-narrow .readfirst-row:not(.readfirst-row-editing) > :nth-child(3) {\n    position: absolute;\n    top: 2px;\n    right: 10px;\n    height: 22px;\n  }\n  &.readfirst-narrow .readfirst-row:not(.readfirst-row-editing) > :nth-child(1) {\n    padding-right: 46px;\n  }\n\n  /* Focus calm rows: NO recessed value surface and NO intent stripe. Row status\n     is carried by the trailing status dot; message/preview panels keep their own\n     intent backgrounds. The (now invisible) pseudo is retained only to preserve\n     the block's positioning/stacking context that the required-group rail and its\n     cluster nodes resolve against \u2014 removing it would unmoor them. */\n  > *:not(.options-readfirst-card) {\n    position: relative;\n  }\n  > *:not(.options-readfirst-card)::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    left: ", ";\n    background: transparent;\n    pointer-events: none;\n    z-index: 0;\n  }\n  /* Content rides above the surface layer \u2014 except the cluster node, which is\n     absolutely positioned in the gutter and must keep its own positioning. */\n  > *:not(.options-readfirst-card) > *:not(.options-readfirst-node) {\n    position: relative;\n    z-index: 1;\n  }\n\n  /* (The required-group connection rail was removed \u2014 the \"One of the below is\n     required\" box now carries the grouping.) */\n\n  /* Tall rows top-anchor (overriding the row's centered default) so the label and\n     dot stay on the value's FIRST line rather than floating to the vertical\n     middle: .readfirst-row-info-open = a shown short_desc grows the LABEL;\n     .readfirst-row-tall = message panels / a hash preview grow the VALUE cell. */\n  .readfirst-row-info-open,\n  .readfirst-row-tall {\n    align-items: start;\n  }\n  /* Narrow stacks label-over-value: the value sits on the line below the label,\n     slightly indented under it (David, qorus#646), so it reads as the label's. */\n  &.readfirst-narrow .readfirst-row > :nth-child(2) {\n    padding-left: ", "px;\n  }\n  &.readfirst-narrow > *:not(.options-readfirst-card)::before {\n    left: 0;\n  }\n  /* Touch layouts have no hover: a slot reserved for the hover-revealed edit\n     pencil is permanent dead space that insets every chip from the edge \u2014\n     drop it (rows are tap-to-edit; the lock/add slots stay, they're static). */\n  &.readfirst-narrow .options-readfirst-trailing-hover-only {\n    /* !important: the slot carries an inline display for the desktop layout. */\n    display: none !important;\n  }\n  /* Stacked rows: keep them tight (match the Focus prototype). The min-height is\n     dropped so a 2-line label+value row sizes to its content instead of being\n     padded out to 38px. The in-place editor keeps zero padding (below). */\n  &.readfirst-narrow .readfirst-row {\n    padding-top: 2px;\n    padding-bottom: 2px;\n    min-height: 0;\n  }\n  &.readfirst-narrow .readfirst-row-editing {\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n"])), exports.LABEL_COL, exports.COMPACT_ROW_PAD_X, exports.COMPACT_ROW_PAD_X, function (_a) {
     var $divider = _a.$divider;
     return $divider;
 }, function (_a) {
@@ -320,10 +334,7 @@ exports.StyledGroupBody = styled_components_1.default.div(templateObject_36 || (
 }, function (_a) {
     var $hover = _a.$hover;
     return $hover;
-}, exports.PANEL_LEFT_CSS, function (_a) {
-    var $calm = _a.$calm, $hairline = _a.$hairline;
-    return $calm ? (0, styled_components_1.css)(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n        && {\n          --readfirst-row-gap: 0px;\n          gap: 0;\n        }\n        && > *,\n        && > .options-readfirst-required-cluster > * {\n          border-top: 1px solid ", ";\n        }\n        && > .options-readfirst-group-label + *,\n        && > .options-readfirst-group-subtitle + *,\n        && .options-readfirst-required-cluster-header,\n        && .options-readfirst-required-cluster-header + * {\n          border-top: 0;\n        }\n        && .readfirst-row {\n          min-height: 44px;\n          padding: 10px ", "px;\n          border-radius: 0;\n        }\n        && .readfirst-row::after {\n          display: none;\n        }\n        /* The open row keeps the read row's band: 3px above the editor's 32px\n           control centres it where the read row centred its text. */\n        && .readfirst-row-editing {\n          padding-top: 3px;\n          padding-bottom: 10px;\n        }\n        /* The section's rounded bottom corners, which a full-bleed hover or an\n           open row's tint would otherwise square off. */\n        && > :last-child,\n        && > :last-child > :last-child {\n          border-bottom-left-radius: 9px;\n          border-bottom-right-radius: 9px;\n        }\n        /* \"N more fields\" is a quiet last row: the hairline above it says where\n           the section's fields end; a dashed box around it said it again. */\n        && .readfirst-more-row {\n          border: 0;\n          border-top: 1px solid ", ";\n          margin-top: 0;\n        }\n        &&.readfirst-narrow {\n          --readfirst-row-gap: 0px;\n        }\n        &&.readfirst-narrow .readfirst-row {\n          padding: 10px ", "px;\n          min-height: 0;\n        }\n        &&.readfirst-narrow .readfirst-row-editing {\n          padding-top: 3px;\n          padding-bottom: 10px;\n        }\n        &&.readfirst-narrow .readfirst-row:not(.readfirst-row-editing) > :nth-child(3) {\n          top: 10px;\n          right: ", "px;\n        }\n        /* READ mode is one list with no section around it \u2014 usually inside a\n           card the host already drew \u2014 so it adds no panel and no inset of its\n           own: the rows sit flush with the host's content edge, split by the\n           same hairlines, with no line above the first. */\n        &&.readfirst-read-list > :first-child {\n          border-top: 0;\n        }\n        &&.readfirst-read-list .readfirst-row,\n        &&.readfirst-read-list .options-readfirst-group-label,\n        &&.readfirst-read-list .options-readfirst-group-subtitle {\n          padding-left: 0;\n          padding-right: 0;\n          margin-left: 0;\n        }\n        &&.readfirst-read-list.readfirst-narrow\n          .readfirst-row:not(.readfirst-row-editing)\n          > :nth-child(3) {\n          right: 0;\n        }\n      "], ["\n        && {\n          --readfirst-row-gap: 0px;\n          gap: 0;\n        }\n        && > *,\n        && > .options-readfirst-required-cluster > * {\n          border-top: 1px solid ", ";\n        }\n        && > .options-readfirst-group-label + *,\n        && > .options-readfirst-group-subtitle + *,\n        && .options-readfirst-required-cluster-header,\n        && .options-readfirst-required-cluster-header + * {\n          border-top: 0;\n        }\n        && .readfirst-row {\n          min-height: 44px;\n          padding: 10px ", "px;\n          border-radius: 0;\n        }\n        && .readfirst-row::after {\n          display: none;\n        }\n        /* The open row keeps the read row's band: 3px above the editor's 32px\n           control centres it where the read row centred its text. */\n        && .readfirst-row-editing {\n          padding-top: 3px;\n          padding-bottom: 10px;\n        }\n        /* The section's rounded bottom corners, which a full-bleed hover or an\n           open row's tint would otherwise square off. */\n        && > :last-child,\n        && > :last-child > :last-child {\n          border-bottom-left-radius: 9px;\n          border-bottom-right-radius: 9px;\n        }\n        /* \"N more fields\" is a quiet last row: the hairline above it says where\n           the section's fields end; a dashed box around it said it again. */\n        && .readfirst-more-row {\n          border: 0;\n          border-top: 1px solid ", ";\n          margin-top: 0;\n        }\n        &&.readfirst-narrow {\n          --readfirst-row-gap: 0px;\n        }\n        &&.readfirst-narrow .readfirst-row {\n          padding: 10px ", "px;\n          min-height: 0;\n        }\n        &&.readfirst-narrow .readfirst-row-editing {\n          padding-top: 3px;\n          padding-bottom: 10px;\n        }\n        &&.readfirst-narrow .readfirst-row:not(.readfirst-row-editing) > :nth-child(3) {\n          top: 10px;\n          right: ", "px;\n        }\n        /* READ mode is one list with no section around it \u2014 usually inside a\n           card the host already drew \u2014 so it adds no panel and no inset of its\n           own: the rows sit flush with the host's content edge, split by the\n           same hairlines, with no line above the first. */\n        &&.readfirst-read-list > :first-child {\n          border-top: 0;\n        }\n        &&.readfirst-read-list .readfirst-row,\n        &&.readfirst-read-list .options-readfirst-group-label,\n        &&.readfirst-read-list .options-readfirst-group-subtitle {\n          padding-left: 0;\n          padding-right: 0;\n          margin-left: 0;\n        }\n        &&.readfirst-read-list.readfirst-narrow\n          .readfirst-row:not(.readfirst-row-editing)\n          > :nth-child(3) {\n          right: 0;\n        }\n      "])), $hairline, exports.CALM_SECTION_INSET, $hairline, exports.CALM_SECTION_INSET, exports.CALM_SECTION_INSET) : '';
-});
+}, exports.PANEL_LEFT_CSS, exports.COMPACT_STACKED_VALUE_INDENT);
 // One absorbed sibling, rendered inside its host row's container rather than
 // on a row of its own (see `absorb_fields`). The pair this exists for is a code
 // editor and its language: reading them as two unrelated rows one above the
@@ -333,10 +344,10 @@ exports.StyledGroupBody = styled_components_1.default.div(templateObject_36 || (
 // element it now sits in, and separated from the editor below it by a hairline
 // rather than a gap — the two share one container, so the seam has to look like
 // a division inside it and not like two stacked things.
-exports.StyledAbsorbedField = styled_components_1.default.div(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n  padding-bottom: 8px;\n  margin-bottom: 8px;\n  border-bottom: 1px solid ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n  padding-bottom: 8px;\n  margin-bottom: 8px;\n  border-bottom: 1px solid ", ";\n"])), function (_a) {
+exports.StyledAbsorbedField = styled_components_1.default.div(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n  padding-bottom: 8px;\n  margin-bottom: 8px;\n  border-bottom: 1px solid ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n  padding-bottom: 8px;\n  margin-bottom: 8px;\n  border-bottom: 1px solid ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return "".concat(theme.main, "22");
 });
-exports.StyledAbsorbedLabel = (0, styled_components_1.default)(reqore_1.ReqoreP)(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n  flex: 0 0 auto;\n  margin: 0;\n"], ["\n  flex: 0 0 auto;\n  margin: 0;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38;
+exports.StyledAbsorbedLabel = (0, styled_components_1.default)(reqore_1.ReqoreP)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n  flex: 0 0 auto;\n  margin: 0;\n"], ["\n  flex: 0 0 auto;\n  margin: 0;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31;
 //# sourceMappingURL=compactRowStyles.js.map