/* /Features/ApplicationDefinitions/Builder/BuilderCanvasArea.razor.rz.scp.css */
/* Canvas area — cancels the parent body's padding and lays out the three-
 * panel row: [palette rail] [canvas] [(properties — step 5)].
 *
 * The strip is fixed-height; the body row fills the remaining vertical space
 * and the canvas-host inside fills the remaining horizontal space. The negative
 * margin trick mirrors how BuilderShell cancels MainLayout's content padding —
 * one ladder of negative-margin cancellation per surface that needs edge-to-edge
 * layout.
 *
 * In read-only mode the palette rail returns null markup; the canvas-host's
 * flex: 1 picks up the freed width automatically.
 */

.fb-builder-canvas-area[b-lldatklzj9] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin: calc(-1 * var(--cx-space-6));
}

.fb-builder-canvas-area__body[b-lldatklzj9] {
    flex: 1;
    min-height: 0;
    display: flex;
}

.fb-builder-canvas-area__canvas-host[b-lldatklzj9] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
/* /Features/ApplicationDefinitions/Builder/BuilderShell.razor.rz.scp.css */
/* Shell layout — flex column inside the Threshold MainLayout's content area. The
 * global sidenav + topbar (with AppDefSwitcher) stay above; the builder's own topbar
 * is the page-level chrome. Step 1 body is a single slot; rails / canvas / properties
 * lay land in steps 2–5. */

.fb-builder-shell[b-kvl8g0lqt3] {
    display: flex;
    flex-direction: column;
    /* .content-padding (in app.css) is already a flex column with min-height
     * filling viewport-minus-topbar. We claim flex: 1 so the shell takes all
     * remaining vertical space below the global topbar and above the page
     * footer; the Footer's margin-top:auto continues to pin it to the bottom.
     * The shell itself owns overflow: hidden so internal regions (palette
     * stays put, canvas scrolls). No fixed height, no negative vertical
     * margin — the shell coexists with the standard page chrome. */
    flex: 1;
    min-height: 0;
    /* Horizontal break-out: cancel .content-padding's 24px side padding so
     * the builder topbar (Forms breadcrumb / status / actions) reaches the
     * left and right edges of the content area. Vertical margins stay zero
     * so the shell flows below the global topbar + above the page footer. */
    margin-left: calc(-1 * var(--cx-space-6));
    margin-right: calc(-1 * var(--cx-space-6));
    background: var(--cx-canvas);
    color: var(--cx-ink);
    font-family: var(--cx-font);
    font-size: var(--bs-body-font-size);
    overflow: hidden;
}

.fb-builder-shell__body[b-kvl8g0lqt3] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: var(--cx-space-6);
}

/* Visually-hidden page-level aria-live region. Carries the polite-priority
 * announcements per spec §3.6 (keyboard insertion, autosave, validation,
 * selection-change). The screen-reader-only pattern: 1×1px clipped to nothing,
 * absolutely positioned out of flow, no width on parent's layout. */
.fb-aria-live[b-kvl8g0lqt3] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* fb-drag-ghost moved to form-builder-tokens.css — the ghost element is built
 * via __builder.OpenElement in PaletteDropDispatcher.BuildGhost (not a Razor
 * template), so it doesn't receive BuilderShell's scoped-CSS b-attribute and
 * scoped selectors never match. Global stylesheet is the right home. */
/* /Features/ApplicationDefinitions/Builder/Canvas/BuilderCanvas.razor.rz.scp.css */
.fb-canvas[b-ah1kewnx2e] {
    flex: 1;
    min-width: 0;
    background: var(--cx-canvas);
    overflow: auto;
    height: 100%;
}

/* Focus-ring scoping per spec §3.6 — the canvas root is tabindex=0 and
 * receives DOM focus on Tab-in, but the visible browser focus ring should
 * only appear when the most recent selection change was keyboard-driven.
 * Pointer-driven and Programmatic sources suppress the ring (the bar bar
 * on the selected element alone is enough — the ring is keyboard-only
 * affordance). Reactive: data-source is bound to
 * FormBuilderState.LastSelectionSource and updates via the canvas's
 * State.Changed subscription. */
.fb-canvas:focus-visible[b-ah1kewnx2e] {
    outline: 2px solid var(--cx-action);
    outline-offset: -2px;
}

.fb-canvas[data-source="Pointer"]:focus-visible[b-ah1kewnx2e],
.fb-canvas[data-source="Programmatic"]:focus-visible[b-ah1kewnx2e] {
    outline: none;
}

.fb-canvas__inner[b-ah1kewnx2e] {
    max-width: 880px;
    margin: 0 auto;
    padding: 8px 32px 80px;
}

.fb-canvas--empty .fb-canvas__inner[b-ah1kewnx2e] {
    padding-top: 96px;
    color: var(--cx-ink-muted);
    text-align: center;
}

.fb-canvas__empty-rows[b-ah1kewnx2e] {
    border: 1px dashed var(--cx-border-dashed);
    border-radius: var(--cx-radius-md);
    padding: 32px;
    background: var(--cx-surface-sunken);
    color: var(--cx-ink-muted);
    text-align: center;
    margin: 8px 0 16px;
}

.fb-canvas__empty-rows h3[b-ah1kewnx2e] {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--cx-ink-strong);
}

.fb-canvas__empty-rows p[b-ah1kewnx2e] {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}

.fb-canvas__add-row[b-ah1kewnx2e] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 10px;
    padding: 10px 0;
    color: var(--cx-ink-muted);
    font-size: 12px;
    font-weight: 500;
    border: 1px dashed var(--cx-border-dashed);
    border-radius: var(--cx-radius-sm);
    background: transparent;
    cursor: pointer;
    transition: border-color 100ms, color 100ms, background 100ms;
}

.fb-canvas__add-row:hover:not(:disabled)[b-ah1kewnx2e] {
    border-color: var(--cx-action-border);
    color: var(--cx-action);
    background: var(--cx-action-soft);
}

.fb-canvas__add-row:disabled[b-ah1kewnx2e] {
    cursor: not-allowed;
    opacity: .6;
}

/* ── Drag-kind cursor + pointer-events overrides ──
 *
 * The canvas root carries data-cx-drag-kind = celledge | palette | element |
 * sectiontab | none. Two CSS adjustments key off it:
 *
 * 1. Cell-edge drag: force col-resize cursor canvas-wide so a fast pointer
 *    move that outruns the 6px CellEdgeHandle hitbox doesn't revert the
 *    cursor to default mid-drag.
 *
 * 2. Palette / Element / SectionTab drag: kill pointer-events on the
 *    cell-edge handle so its col-resize cursor doesn't intercept the
 *    ghost-following drag. The handle is invisible mid-drag (opacity 0
 *    unless hovered) but its CSS cursor still applies on pointer-over.
 */

.fb-canvas[data-cx-drag-kind="celledge"][b-ah1kewnx2e],
.fb-canvas[data-cx-drag-kind="celledge"][b-ah1kewnx2e]  * {
    cursor: col-resize !important;
}

.fb-canvas[data-cx-drag-kind="palette"][b-ah1kewnx2e]  .fb-cell-edge-handle,
.fb-canvas[data-cx-drag-kind="element"][b-ah1kewnx2e]  .fb-cell-edge-handle,
.fb-canvas[data-cx-drag-kind="sectiontab"][b-ah1kewnx2e]  .fb-cell-edge-handle {
    pointer-events: none;
}
/* /Features/ApplicationDefinitions/Builder/Canvas/CanvasSectionDeletedState.razor.rz.scp.css */
/* §14.7 — "Section deleted" recall placeholder. Port of the canon inline styles
 * (main.jsx CanvasSectionDeletedState): a centered, dashed-border card on the canvas
 * surface, serif title + muted body. */

.fb-canvas-section-deleted[b-3b15gc62sl] {
    margin: 60px auto;
    max-width: 480px;
    background: var(--cx-surface);
    border: 1px dashed var(--cx-border);
    border-radius: var(--cx-radius-md);
    padding: 36px 28px;
    text-align: center;
}

.fb-canvas-section-deleted__title[b-3b15gc62sl] {
    font-family: var(--th-f-serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--cx-ink-strong);
    margin-bottom: 8px;
}

.fb-canvas-section-deleted__body[b-3b15gc62sl] {
    font-size: 13px;
    color: var(--cx-ink-muted);
    line-height: 1.55;
}
/* /Features/ApplicationDefinitions/Builder/Canvas/CellEdgeHandle.razor.rz.scp.css */
/* Cell-edge resize handle. Thin vertical strip on the right edge of the
 * cell. Hover-engaged: visible when the cell's hover state is on, the row
 * is hovered, or the handle itself is hovered. Cursor switches to
 * col-resize so the affordance reads as draggable.
 *
 * The handle is positioned absolutely so it overlaps the cell's right
 * border without consuming column-grid space. The cell's container
 * (LayoutCellView's outer .fb-cell) needs position: relative for
 * this to anchor correctly — verified in the LayoutCellView.razor.css. */

.fb-cell-edge-handle[b-x39yhg03a8] {
    position: absolute;
    top: 4px;
    right: -3px;
    bottom: 4px;
    width: 6px;
    z-index: 4;
    cursor: col-resize;
    background: transparent;
    border-radius: var(--cx-radius-xs);
    transition: background 80ms ease;
    opacity: 0;
    pointer-events: auto;
    touch-action: none;
    user-select: none;
}

/* Hover-on-cell visibility lives in the global form-builder-tokens.css —
 * ::deep here doesn't reach the cell ancestor (descends only from this
 * component's own elements). Self-hover/focus stays scoped. */
.fb-cell-edge-handle:hover[b-x39yhg03a8],
.fb-cell-edge-handle:focus-visible[b-x39yhg03a8] {
    opacity: 1;
    background: var(--cx-action-soft);
}

.fb-cell-edge-handle__grip[b-x39yhg03a8] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 18px;
    background: var(--cx-action);
    border-radius: 2px;
    opacity: 0.7;
}

.fb-cell-edge-handle:hover .fb-cell-edge-handle__grip[b-x39yhg03a8] {
    opacity: 1;
}
/* /Features/ApplicationDefinitions/Builder/Canvas/CellMetaBadge.razor.rz.scp.css */
.fb-cell-meta[b-b80r0pirhp] {
    position: absolute;
    top: 6px;
    /* Sits to the left of the per-element kebab. The kebab is at top:4 right:4
     * with an 18×18 button — so right >= 4 + 18 + 4-gap = 26 keeps the badge
     * clear of the kebab. Pre-fix this was right:8, which placed the badge
     * directly under the kebab. */
    right: 28px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--cx-ink-subtle);
    font-size: 10.5px;
    font-family: var(--cx-font-mono);
    font-weight: 500;
    opacity: 0;
    transition: opacity 100ms;
    pointer-events: none;
    background: var(--cx-surface);
    padding-left: 4px;
    border-radius: var(--cx-radius-xs);
    z-index: 1;
}

.fb-cell:hover .fb-cell-meta[b-b80r0pirhp],
.fb-cell.is-selected .fb-cell-meta[b-b80r0pirhp],
.fb-cell-meta--always[b-b80r0pirhp] {
    opacity: 1;
}

.fb-cell-meta__width[b-b80r0pirhp] {
    padding: 0 5px;
    height: 14px;
    line-height: 14px;
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-xs);
    background: var(--cx-surface-sunken);
}

.fb-cell-meta__kind[b-b80r0pirhp] {
    color: var(--cx-ink-faint);
}
/* /Features/ApplicationDefinitions/Builder/Canvas/ContentRenderers/EmptyContentView.razor.rz.scp.css */
.fb-content-empty[b-awylh20i38] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    color: var(--cx-ink-faint);
    font-size: 12px;
    font-family: var(--cx-font-mono);
    border: 1px dashed var(--cx-border-dashed);
    border-radius: var(--cx-radius-sm);
    background: var(--cx-surface-sunken);
}
/* /Features/ApplicationDefinitions/Builder/Canvas/ContentRenderers/FieldPreview.razor.rz.scp.css */
.fb-content-field[b-6y8iah7wjf] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Field-level display-rule banner per spec §5.10. Sits ABOVE the title row;
 * dashed --cx-rule-border bottom separates it from the field content so it
 * reads as "this rule wraps the field below". Suppressed by markup when
 * DisplayRuleId is null — no empty shell. */
.fb-content-field__rule-banner[b-6y8iah7wjf] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 4px 8px 6px;
    margin: -4px -4px 2px;
    border-bottom: 1px dashed var(--cx-rule-border);
}

/* Eyebrow — sans uppercase letterspaced caps in --cx-rule. Canon and spec
 * agree on sans (not mono) for this register — the FIELD-LEVEL VISIBILITY
 * label is rule-vocabulary, not structural chrome (which is mono per the
 * cycle-14 settle). */
.fb-content-field__rule-eyebrow[b-6y8iah7wjf] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cx-rule);
}

.fb-content-field__head[b-6y8iah7wjf] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

/* Multi-error count badge — pairs with ErrorChip when a field carries more
 * than one validation error. Mono digits for tabular alignment; error-soft
 * tint reads as part of the chip's group. */
.fb-content-field__error-count[b-6y8iah7wjf] {
    display: inline-flex;
    align-items: center;
    padding: 0 6px;
    border: 1px solid var(--cx-error-border);
    background: var(--cx-error-soft);
    color: var(--cx-error);
    border-radius: var(--cx-radius-pill);
    font-family: var(--cx-font-mono);
    font-size: 10.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Inline error strip — full-message readout below the cell input preview.
 * Transparent bg + error-colored text; the title-row chip carries the
 * abbreviated label and the hover popover, the strip carries the full
 * sentence. Design ref: errors-canvas.jsx InlineStrip. */
.fb-content-field__error-strip[b-6y8iah7wjf] {
    margin-top: 4px;
    padding: 5px 9px;
    color: var(--cx-error);
    font-size: 11.5px;
    line-height: 1.4;
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
}

.fb-content-field__error-strip-text[b-6y8iah7wjf] {
    flex: 1 1 auto;
}

.fb-content-field__title[b-6y8iah7wjf] {
    font-size: 13px;
    font-weight: 600;
    color: var(--cx-ink-strong);
    margin: 0;
}

.fb-content-field__required[b-6y8iah7wjf] {
    color: var(--cx-error);
    margin-left: 3px;
}

.fb-content-field__prompt[b-6y8iah7wjf] {
    color: var(--cx-ink-muted);
    font-size: 12px;
    line-height: 1.4;
}

.fb-content-field__input[b-6y8iah7wjf] {
    margin-top: 2px;
}

.fb-input-preview[b-6y8iah7wjf] {
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    color: var(--cx-ink-faint);
    font-size: 13px;
    padding: 8px 10px;
    cursor: default;
    user-select: none;
    pointer-events: none;
}

.fb-input-preview--textarea[b-6y8iah7wjf] {
    display: flex;
    align-items: flex-start;
}

.fb-input-preview--mono[b-6y8iah7wjf] {
    font-family: var(--cx-font-mono);
}

.fb-input-preview--with-icon[b-6y8iah7wjf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fb-input-preview--with-icon span[b-6y8iah7wjf] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fb-input-preview--upload[b-6y8iah7wjf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-style: dashed;
    background: var(--cx-surface-sunken);
    min-height: 48px;
}

.fb-input-preview--unknown[b-6y8iah7wjf] {
    font-family: var(--cx-font-mono);
    color: var(--cx-ink-subtle);
    text-align: center;
}

.fb-input-radios[b-6y8iah7wjf] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 2px;
}

.fb-input-radios--horizontal[b-6y8iah7wjf] {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px;
}

.fb-input-radios__item[b-6y8iah7wjf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--cx-ink);
    font-size: 12.5px;
}

.fb-input-radios__dot[b-6y8iah7wjf] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1.5px solid var(--cx-border-strong);
    background: var(--cx-surface);
    flex: 0 0 12px;
}

.fb-input-checks[b-6y8iah7wjf] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 2px;
}

.fb-input-checks--horizontal[b-6y8iah7wjf] {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px;
}

.fb-input-checks__item[b-6y8iah7wjf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--cx-ink);
    font-size: 12.5px;
}

.fb-input-checks__box[b-6y8iah7wjf] {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    border: 1.5px solid var(--cx-border-strong);
    background: var(--cx-surface);
    flex: 0 0 12px;
}

.fb-input-preview--placeholder[b-6y8iah7wjf] {
    background: var(--cx-surface-sunken);
    color: var(--cx-ink-subtle);
    font-style: italic;
}

.fb-content-field__meta[b-6y8iah7wjf] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 4px;
    color: var(--cx-ink-subtle);
    font-size: 11px;
}

.fb-content-field__meta-item[b-6y8iah7wjf] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* "Required is conditional" — rule-tinted meta entry. Same typography as the
 * base meta-item (inherits font-size + line-height); just colors the row in
 * --cx-rule so the connection between the static "Required *" indicator on
 * the title row and the RequiredIf rule chip reads at a glance. */
.fb-content-field__meta-item--rule[b-6y8iah7wjf] {
    color: var(--cx-rule);
}
/* /Features/ApplicationDefinitions/Builder/Canvas/ContentRenderers/GroupBlockView.razor.rz.scp.css */
.fb-group[b-axhybo4p84] {
    background: var(--cx-surface-sunken);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-md);
    padding: 0 0 12px;
    /* overflow: hidden was clipping per-element kebab menus on inner fields —
     * the kebab popover renders below the cell and extends past the group's
     * bottom edge. Removed; rounded corners still render correctly because
     * children fit inside the radius naturally. */
    /* Anchor the selection bar (moved out of the header into the section
     * so it spans the full group height, not just the header strip). */
    position: relative;
}

/* Group-scoped validation errors paint the outer border in the error register.
 * The inner header still keeps its own bottom-border so the group's structural
 * partition stays legible; only the group's own outer chrome changes. Cell-level
 * tint inside the group is owned by LayoutCellView. */
.fb-group[data-validation-severity="block-save"][b-axhybo4p84],
.fb-group[data-validation-severity="block-publish"][b-axhybo4p84] {
    border-color: var(--cx-error-border);
}

.fb-group__head[b-axhybo4p84] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--cx-surface);
    border-bottom: 1px solid var(--cx-border);
    position: relative;
    cursor: pointer;
    outline: none;
}

.fb-group__head:focus-visible[b-axhybo4p84] {
    box-shadow: inset 0 0 0 1.5px var(--cx-selection-bar);
}

/* Group selection bar — clarification #4: lives on the group's own section
 * (not on the wrapping cell). Spans the entire group height (header + body)
 * so the selection treatment reads as "this whole group is selected", not
 * just the header strip. Same 3px accent-tinted treatment as the section
 * header's bar for visual consistency across selection kinds. */
.fb-group__bar[b-axhybo4p84] {
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--cx-selection-bar);
    border-radius: 2px;
    pointer-events: none;
    z-index: 1;
}

.fb-group__btn[b-axhybo4p84] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: transparent;
    border: 0;
    border-radius: var(--cx-radius-xs);
    color: var(--cx-ink-subtle);
    cursor: pointer;
    transition: background 100ms, color 100ms;
}

.fb-group__btn:hover:not(:disabled)[b-axhybo4p84] {
    background: var(--cx-action-soft);
    color: var(--cx-ink-strong);
}

.fb-group__btn:disabled[b-axhybo4p84] {
    cursor: not-allowed;
    opacity: .6;
}

/* §6.4 expand/collapse caret — mirrors PropSection's chevron convention: points down when
 * expanded, rotates -90deg (pointing right) when the group is collapsed. Rotation only, so no
 * theme-specific variant is needed. */
.fb-group__chev[b-axhybo4p84] {
    transition: transform 100ms;
}

.fb-group__chev[data-state="collapsed"][b-axhybo4p84] {
    transform: rotate(-90deg);
}

.fb-group__title-row[b-axhybo4p84] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.fb-group__kind[b-axhybo4p84] {
    font-family: var(--cx-font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cx-ink-subtle);
}

.fb-group__title[b-axhybo4p84] {
    font-size: 14px;
    font-weight: 600;
    color: var(--cx-ink-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fb-group__body[b-axhybo4p84] {
    padding: 10px 8px 4px;
}
/* /Features/ApplicationDefinitions/Builder/Canvas/ContentRenderers/InfoButtonView.razor.rz.scp.css */
.fb-content-info[b-dw7t7csxz2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 8px;
    border: 1px solid var(--cx-info);
    border-color: rgba(28, 111, 138, 0.35);
    border-radius: var(--cx-radius-sm);
    background: var(--cx-info-soft);
    color: var(--cx-ink);
}

.fb-content-info__head[b-dw7t7csxz2] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--cx-info);
    font-size: 12.5px;
    font-weight: 600;
}

.fb-content-info__label[b-dw7t7csxz2] {
    flex: 1;
    min-width: 0;
}

.fb-content-info__style[b-dw7t7csxz2] {
    font-family: var(--cx-font-mono);
    font-size: 10px;
    color: var(--cx-ink-subtle);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.fb-content-info__body[b-dw7t7csxz2] {
    margin: 0;
    font-size: 12px;
    color: var(--cx-ink-muted);
    line-height: 1.45;
}
/* /Features/ApplicationDefinitions/Builder/Canvas/ContentRenderers/MarkdownPreviewView.razor.rz.scp.css */
.fb-content-markdown[b-8uzf9upien] {
    position: relative;
    padding: 4px 4px 6px;
}

.fb-content-markdown__body[b-8uzf9upien] {
    margin: 0;
    color: var(--cx-ink);
    font-size: 13px;
    line-height: 1.55;
    max-width: 64ch;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.fb-content-markdown__placeholder[b-8uzf9upien] {
    margin: 0;
    color: var(--cx-ink-faint);
    font-size: 12.5px;
    font-style: italic;
}
/* /Features/ApplicationDefinitions/Builder/Canvas/ContentRenderers/SpacerBlockView.razor.rz.scp.css */
.fb-content-spacer[b-q80negjmev] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cx-ink-faint);
    font-size: 11px;
    font-family: var(--cx-font-mono);
    border: 1px dashed var(--cx-border-dashed);
    border-radius: var(--cx-radius-sm);
    background: var(--cx-surface-sunken);
}
/* /Features/ApplicationDefinitions/Builder/Canvas/ElementDragHandle.razor.rz.scp.css */
/* Element drag handle — small grip glyph in the cell's top-left corner,
 * hover-engaged. Anchors against the cell-shell's positioning context.
 */

.fb-element-drag-handle[b-r1n4ybddv7] {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 18px;
    height: 18px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cx-ink-subtle);
    background: transparent;
    border: 0;
    border-radius: var(--cx-radius-xs);
    cursor: grab;
    opacity: 0;
    transition: opacity 80ms ease, background 80ms ease;
    touch-action: none;
}

/* Hover-on-cell visibility lives in the global form-builder-tokens.css —
 * ::deep here would search downward from this component's own elements, but
 * .fb-cell is the handle's ancestor, not descendant. Same fix as the
 * mirror ElementKebab. The self-hover/focus rules stay scoped. */
.fb-element-drag-handle:hover[b-r1n4ybddv7],
.fb-element-drag-handle:focus-visible[b-r1n4ybddv7] {
    opacity: 1;
}

.fb-element-drag-handle:hover[b-r1n4ybddv7] {
    background: var(--cx-action-soft);
    color: var(--cx-action);
}

.fb-element-drag-handle:active[b-r1n4ybddv7] {
    cursor: grabbing;
}

.fb-element-drag-handle:disabled[b-r1n4ybddv7] {
    cursor: not-allowed;
    opacity: 0;
}
/* /Features/ApplicationDefinitions/Builder/Canvas/ElementKebab.razor.rz.scp.css */
/* Per-element kebab — small ⋮ button + inline popover menu. Mounts in
 * the cell-shell's top-right corner (mirror of ElementDragHandle's
 * top-left). Hover-engaged for the button; menu stays open until a
 * menuitem click or another open-popover invalidates it.
 */

.fb-element-kebab[b-8c2wbgouvr] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Cell-corner placement — used when mounted in LayoutCellView's cell-shell.
 * Group-header mounts use the default inline positioning + the chip strip's
 * flex flow.
 */
.fb-element-kebab--cell-corner[b-8c2wbgouvr] {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 5;
}

.fb-element-kebab__button[b-8c2wbgouvr] {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cx-ink-subtle);
    background: transparent;
    border: 0;
    border-radius: var(--cx-radius-xs);
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    opacity: 0;
    transition: opacity 80ms ease, background 80ms ease;
}

/* The hover-on-cell affordance — "rolling over the cell shows the kebab" —
 * lives in the global form-builder-tokens.css. ::deep here would search
 * downward from THIS component's elements, but .fb-cell is the kebab's
 * ancestor, not descendant; the rule never matched. The button-self
 * hover/focus rules stay scoped since the button is rendered by this
 * component. */
.fb-element-kebab__button:hover[b-8c2wbgouvr],
.fb-element-kebab__button:focus-visible[b-8c2wbgouvr] {
    opacity: 1;
}

.fb-element-kebab__button:hover[b-8c2wbgouvr] {
    background: var(--cx-action-soft);
    color: var(--cx-action);
}

.fb-element-kebab__menu[b-8c2wbgouvr] {
    position: absolute;
    top: 22px;
    right: 0;
    min-width: 140px;
    background: var(--cx-surface-raised);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    box-shadow: 0 4px 16px rgba(20, 22, 30, 0.10), 0 1px 2px rgba(20, 22, 30, 0.06);
    z-index: 30;
    padding: var(--cx-space-2);
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.fb-element-kebab__item[b-8c2wbgouvr] {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    font-size: 13px;
    color: var(--cx-ink);
    background: transparent;
    border: none;
    border-radius: var(--cx-radius-xs);
    cursor: pointer;
    text-align: left;
}

.fb-element-kebab__item:hover[b-8c2wbgouvr],
.fb-element-kebab__item:focus-visible[b-8c2wbgouvr] {
    background: var(--cx-action-soft);
    outline: none;
}

.fb-element-kebab__item--destructive[b-8c2wbgouvr] {
    color: var(--cx-error);
}

.fb-element-kebab__item--destructive:hover[b-8c2wbgouvr] {
    background: var(--cx-error-soft);
}

.fb-element-kebab__divider[b-8c2wbgouvr] {
    height: 1px;
    background: var(--cx-border-faint);
    margin: 4px 0;
}

.fb-element-kebab__item--disabled[b-8c2wbgouvr],
.fb-element-kebab__item:disabled[b-8c2wbgouvr] {
    color: var(--cx-ink-subtle);
    cursor: not-allowed;
    background: transparent;
}

.fb-element-kebab__item--disabled:hover[b-8c2wbgouvr] {
    background: transparent;
}

.fb-element-kebab__current-hint[b-8c2wbgouvr] {
    margin-left: auto;
    padding-left: var(--cx-space-3);
    font-size: 10.5px;
    font-style: italic;
    color: var(--cx-ink-faint);
}

.fb-element-kebab__submenu[b-8c2wbgouvr] {
    position: absolute;
    top: 0;
    right: 100%;
    margin-right: 4px;
    min-width: 180px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--cx-surface-raised);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    box-shadow: 0 4px 16px rgba(20, 22, 30, 0.12), 0 1px 2px rgba(20, 22, 30, 0.08);
    z-index: 40;
    padding: var(--cx-space-2);
    display: flex;
    flex-direction: column;
    gap: 1px;
}
/* /Features/ApplicationDefinitions/Builder/Canvas/GridGuides.razor.rz.scp.css */
/* Grid guides — column hairlines + per-column number labels. Visibility is
 * controlled by the canvas root's data-cx-grid attribute (see the global rules
 * in form-builder-tokens.css; ancestor-spanning selectors can't live in
 * scoped CSS). Default state here is "hidden"; the global rules turn the
 * display back on for the active mode (hover → only on row hover, always →
 * unconditional, drag → unconditional during drag). */
.fb-grid-guides[b-8ze8eeuwo6] {
    position: absolute;
    inset: -6px 0 -2px;
    display: none;
    grid-template-columns: repeat(12, 1fr);
    gap: 8px;
    pointer-events: none;
    z-index: 5;
}

.fb-grid-guides__col[b-8ze8eeuwo6] {
    border-left: 1px dashed var(--cx-grid-guide-strong);
    position: relative;
}

.fb-grid-guides__col--last[b-8ze8eeuwo6] {
    border-right: 1px dashed var(--cx-grid-guide-strong);
}

.fb-grid-guides__label[b-8ze8eeuwo6] {
    position: absolute;
    top: -9px;
    left: -1px;
    font-family: var(--cx-font-mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--cx-action);
    background: var(--cx-canvas);
    padding: 0 4px;
    border-radius: var(--cx-radius-xs);
    line-height: 12px;
}
/* /Features/ApplicationDefinitions/Builder/Canvas/LayoutCellView.razor.rz.scp.css */
.fb-cell[b-0sqemjfg2d] {
    position: relative;
}

.fb-cell-shell[b-0sqemjfg2d] {
    position: relative;
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    padding: 12px 14px 10px;
    box-shadow: var(--cx-shadow-card);
    cursor: pointer;
    transition: border-color 100ms, background 100ms, box-shadow 100ms;
}

.fb-cell-shell:hover[b-0sqemjfg2d] {
    border-color: var(--cx-action-border);
}

/* Inline cell error decoration. Two severities in the --cx-error-* register:
 *   BlockSave    → soft red fill + red border + inset shadow.
 *   BlockPublish → surface bg + red border + outer outline shadow.
 * The fill-vs-outline distinction mirrors SeverityPill / ErrorChip so the
 * cell shell's severity reads at the same glance as the inline chip. */
.fb-cell-shell[data-validation-severity="block-save"][b-0sqemjfg2d] {
    background: var(--cx-error-soft);
    border-color: var(--cx-error-border);
    box-shadow:
        inset 0 0 0 1px var(--cx-error-border),
        0 1px 2px rgba(20, 22, 30, 0.05);
}

.fb-cell-shell[data-validation-severity="block-publish"][b-0sqemjfg2d] {
    border-color: var(--cx-error-border);
    box-shadow: 0 0 0 1px var(--cx-error-border);
}

/* Hover state mustn't override the error border — error decoration is
 * higher-priority than action hover affordance. The :is(...) keeps the
 * hover rule above from winning the specificity tie via order without
 * adding !important. */
.fb-cell-shell[data-validation-severity]:hover[b-0sqemjfg2d] {
    border-color: var(--cx-error-border);
}

/* Bar-only selection treatment — the left-edge bar communicates selection on
 * its own, no surrounding ring. The cell shell stays in its resting visual
 * state (slightly raised background for affordance). Per Kent: 2026-05-17,
 * bar-only is the production treatment; the ring lands only when the cell is
 * keyboard-focused (via :focus-visible — pointer-clicked selection stays
 * ringless). */
.fb-cell.is-selected .fb-cell-shell[b-0sqemjfg2d] {
    background: var(--cx-surface-raised);
}

.fb-cell-shell__bar[b-0sqemjfg2d] {
    position: absolute;
    left: -1px;
    top: -1px;
    bottom: -1px;
    width: 3px;
    background: var(--cx-selection-bar);
    border-top-left-radius: var(--cx-radius-sm);
    border-bottom-left-radius: var(--cx-radius-sm);
    pointer-events: none;
}

.fb-content-field-missing[b-0sqemjfg2d] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: var(--cx-warning-soft);
    border: 1px solid var(--cx-warning-border);
    border-radius: var(--cx-radius-sm);
    color: var(--cx-warning);
    font-size: 11.5px;
    font-weight: 500;
}

.fb-content-unknown[b-0sqemjfg2d] {
    padding: 4px 8px;
    background: var(--cx-surface-sunken);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-xs);
    color: var(--cx-ink-faint);
    font-size: 11px;
    font-family: var(--cx-font-mono);
}
/* /Features/ApplicationDefinitions/Builder/Canvas/LayoutRowView.razor.rz.scp.css */
/* Row container + 12-col grid. */

.fb-row[b-m6q9w7iqh2] {
    position: relative;
    padding-left: 22px;
    padding-right: 22px;
}

.fb-row[data-spacing="none"][b-m6q9w7iqh2]    { margin-bottom: 6px; }
.fb-row[data-spacing="compact"][b-m6q9w7iqh2] { margin-bottom: 8px; }
.fb-row[data-spacing="normal"][b-m6q9w7iqh2]  { margin-bottom: 14px; }
.fb-row[data-spacing="loose"][b-m6q9w7iqh2]   { margin-bottom: 22px; }

.fb-row__grid[b-m6q9w7iqh2] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 8px;
}

/* Row-level error decoration — paints an error-colored rail to the left
 * of the row's content area without disturbing the 12-col grid or the
 * gutters. Cell-level tint is owned by LayoutCellView. */
.fb-row[data-validation-severity="block-save"] .fb-row__grid[b-m6q9w7iqh2],
.fb-row[data-validation-severity="block-publish"] .fb-row__grid[b-m6q9w7iqh2] {
    box-shadow: -3px 0 0 0 var(--cx-error-border);
}
/* /Features/ApplicationDefinitions/Builder/Canvas/RowDropZone.razor.rz.scp.css */
/* Row drop zone — visually matches the palette/element inter-row drop
 * indicator (.fb-drop-target--bar-horizontal in DropTarget.razor.css) so a
 * row drag and a palette drag read as the same gesture family. Mirrors that
 * rule's dimensions, at-rest visibility, and active treatment exactly.
 *
 * Rendered only while a Row drag is active (BuilderCanvas gates by
 * Drag.PayloadKind == Row), so the bar appears between rows during the drag
 * and disappears on drop / cancel.
 */

.fb-row-dropzone[b-e9nt98lp0q] {
    background-color: var(--cx-action-soft);
    border-radius: var(--cx-radius-xs);
    height: 6px;
    min-height: 6px;
    width: 100%;
    margin: 4px 0;
}

.fb-row-dropzone[data-row-dropzone-hover="true"][b-e9nt98lp0q] {
    background-color: var(--cx-drop-active);
    box-shadow: 0 0 0 2px var(--cx-drop-active-border);
}
/* /Features/ApplicationDefinitions/Builder/Canvas/RowGutter.razor.rz.scp.css */
.fb-row-gutter[b-e9hedihs1w] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    opacity: 0;
    transition: opacity 100ms;
    pointer-events: none;
}

.fb-row:hover .fb-row-gutter[b-e9hedihs1w] {
    opacity: 1;
    pointer-events: auto;
}

.fb-row-gutter--left[b-e9hedihs1w] {
    left: 0;
}

.fb-row-gutter--right[b-e9hedihs1w] {
    right: 0;
}

.fb-row-gutter__btn[b-e9hedihs1w] {
    width: 18px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: var(--cx-radius-xs);
    color: var(--cx-ink-subtle);
    cursor: pointer;
    transition: background 100ms, color 100ms;
}

.fb-row-gutter__btn:hover[b-e9hedihs1w] {
    background: var(--cx-action-soft);
    color: var(--cx-ink-strong);
}

/* Grip-specific cursor — grab at rest, grabbing while a Row drag is active.
 * The canvas root's data-cx-drag-kind="row" attribute (set during a row drag)
 * is the trigger for the grabbing cursor across the whole canvas, so the
 * cursor doesn't get lost as the pointer travels off the grip during the
 * drag. Mirrors how data-cx-drag-kind="celledge" handles the col-resize cursor. */
.fb-row-gutter__btn--grip[b-e9hedihs1w] {
    cursor: grab;
    touch-action: none;
}

[data-cx-drag-kind="row"] .fb-row-gutter__btn--grip[b-e9hedihs1w],
[data-cx-drag-kind="row"][b-e9hedihs1w] {
    cursor: grabbing;
}
/* /Features/ApplicationDefinitions/Builder/Canvas/RowSpacingMenu.razor.rz.scp.css */
/* Row-options kebab menu (§19 / §7.21). Inline popover anchored to the right gutter;
 * floats over adjacent cells. The gutter container is position: relative, this menu is
 * position: absolute top-right adjacent. Spacing radio + Delete row. Mirrors the canon
 * .fb-row-kebab-* shape (group label, radio items with a meta column, divider, danger
 * delete) on this slice's own .fb-row-spacing-menu namespace. */

.fb-row-spacing-menu[b-y05jsohdai] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 190px;
    background: var(--cx-surface-raised);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    box-shadow: 0 4px 16px rgba(20, 22, 30, 0.10), 0 1px 2px rgba(20, 22, 30, 0.06);
    z-index: 20;
    padding: var(--cx-space-2);
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.fb-row-spacing-menu__group-label[b-y05jsohdai] {
    font-family: var(--th-f-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cx-ink-faint, var(--cx-ink-muted));
    padding: 4px 10px 3px;
}

.fb-row-spacing-menu__item[b-y05jsohdai] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    font-size: 13px;
    color: var(--cx-ink);
    background: transparent;
    border: none;
    border-radius: var(--cx-radius-xs);
    cursor: pointer;
    text-align: left;
}

.fb-row-spacing-menu__item:hover[b-y05jsohdai],
.fb-row-spacing-menu__item:focus-visible[b-y05jsohdai] {
    background: var(--cx-action-soft);
    outline: none;
}

.fb-row-spacing-menu__item.is-selected[b-y05jsohdai] {
    color: var(--cx-action);
    font-weight: 500;
}

.fb-row-spacing-menu__radio[b-y05jsohdai] {
    width: 14px;
    height: 14px;
    flex: none;
    border-radius: 50%;
    border: 1.5px solid var(--cx-border-strong, var(--cx-border));
    background: var(--cx-surface);
    position: relative;
}

.fb-row-spacing-menu__item.is-selected .fb-row-spacing-menu__radio[b-y05jsohdai] {
    border-color: var(--cx-action);
}

.fb-row-spacing-menu__item.is-selected .fb-row-spacing-menu__radio[b-y05jsohdai]::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--cx-action);
}

.fb-row-spacing-menu__label[b-y05jsohdai] {
    flex: 1;
    white-space: nowrap;
}

.fb-row-spacing-menu__item.is-selected .fb-row-spacing-menu__label[b-y05jsohdai] {
    font-weight: 600;
}

.fb-row-spacing-menu__meta[b-y05jsohdai] {
    font-family: var(--th-f-mono);
    font-size: 10px;
    color: var(--cx-ink-faint, var(--cx-ink-muted));
    white-space: nowrap;
}

.fb-row-spacing-menu__divider[b-y05jsohdai] {
    height: 1px;
    background: var(--cx-border-faint, var(--cx-border));
    margin: 3px 4px;
}

.fb-row-spacing-menu__ico[b-y05jsohdai] {
    width: 16px;
    flex: none;
    color: var(--cx-ink-faint, var(--cx-ink-muted));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
}

.fb-row-spacing-menu__item--danger[b-y05jsohdai] {
    color: var(--cx-error);
}

.fb-row-spacing-menu__item--danger:hover[b-y05jsohdai],
.fb-row-spacing-menu__item--danger:focus-visible[b-y05jsohdai] {
    background: var(--cx-error-soft);
}

.fb-row-spacing-menu__item--danger .fb-row-spacing-menu__ico[b-y05jsohdai] {
    color: var(--cx-error);
    opacity: 1;
}
/* /Features/ApplicationDefinitions/Builder/Canvas/SectionHeader.razor.rz.scp.css */
.fb-section-header[b-tm4xsykzdg] {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    padding: 20px 0 14px;
    border-bottom: 1px solid var(--cx-border);
    margin-bottom: 16px;
    position: relative;
    cursor: pointer;
    outline: none;
}

.fb-section-header:focus-visible[b-tm4xsykzdg] {
    /* Keyboard focus indicator — matches the selection-bar accent so
     * tabbing into the section header has a visible affordance. */
    box-shadow: inset 0 0 0 1.5px var(--cx-selection-bar);
    border-radius: var(--cx-radius-xs);
}

/* Section-scoped validation errors paint the header's bottom border red so
 * the section reads as "something is wrong here" without disturbing the
 * title layout. The section bar (left edge) is owned by selection, not by
 * validation — using the bottom border keeps the two affordances orthogonal. */
.fb-section-header[data-validation-severity="block-save"][b-tm4xsykzdg],
.fb-section-header[data-validation-severity="block-publish"][b-tm4xsykzdg] {
    border-bottom-color: var(--cx-error-border);
}

/* Selection bar — 3px on the left edge, accent-tinted, when
 * PrimarySelection.Kind == Section and ElementId matches this section.
 * Sits inside the header's padding box (not overlapping the title text)
 * via absolute positioning + the relative parent. */
.fb-section-header__bar[b-tm4xsykzdg] {
    position: absolute;
    left: -8px;
    top: 18px;
    bottom: 12px;
    width: 3px;
    background: var(--cx-selection-bar);
    border-radius: 2px;
    pointer-events: none;
}

.fb-section-header__title-block[b-tm4xsykzdg] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fb-section-header__breadcrumb[b-tm4xsykzdg] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--cx-ink-subtle);
    font-size: 11.5px;
}

.fb-section-header__sep[b-tm4xsykzdg] {
    color: var(--cx-ink-faint);
}

.fb-section-header__title[b-tm4xsykzdg] {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: var(--cx-ink-strong);
    letter-spacing: -.005em;
    outline: none;
}

.fb-section-header__btn[b-tm4xsykzdg] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 8px;
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    color: var(--cx-ink-muted);
    font-size: 12px;
    cursor: pointer;
    transition: background 100ms, color 100ms, border-color 100ms;
}

.fb-section-header__btn:hover:not(:disabled)[b-tm4xsykzdg] {
    background: var(--cx-action-soft);
    color: var(--cx-ink-strong);
    border-color: var(--cx-action-border);
}

.fb-section-header__btn:disabled[b-tm4xsykzdg] {
    cursor: not-allowed;
    opacity: .6;
}

.fb-section-header__btn--destructive[b-tm4xsykzdg] {
    color: var(--cx-error);
}

.fb-section-header__btn--destructive:hover:not(:disabled)[b-tm4xsykzdg] {
    background: var(--cx-error-soft);
    border-color: var(--cx-error-border);
    color: var(--cx-error);
}
/* /Features/ApplicationDefinitions/Builder/Canvas/StarterPatternCards.razor.rz.scp.css */
/* Starter-pattern cards — form-builder spec §7.2. Row of four hover-able
 * cards, each with a mini-canvas thumbnail and a title + description.
 * Lives inside the empty-section canvas region; styled to match the
 * design deck's deck-notes / empty-section.jsx surface tokens.
 */

.fb-starter-row[b-2dppwgjrof] {
    margin-top: 6px;
    padding: 0 8px;
}

.fb-starter-row__label[b-2dppwgjrof] {
    font-family: var(--cx-font-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cx-ink-subtle);
    margin-bottom: 10px;
}

.fb-starter-row__grid[b-2dppwgjrof] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.fb-starter-card[b-2dppwgjrof] {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    box-shadow: var(--cx-shadow-card);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: box-shadow 100ms, border-color 100ms, transform 100ms;
}

.fb-starter-card:hover[b-2dppwgjrof] {
    border-color: var(--cx-action);
    box-shadow: 0 0 0 3px var(--cx-action-soft), 0 4px 12px rgba(20, 22, 30, 0.08);
}

.fb-starter-card:focus-visible[b-2dppwgjrof] {
    outline: 2px solid var(--cx-action);
    outline-offset: 2px;
}

.fb-starter-card__thumb[b-2dppwgjrof] {
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--cx-border);
    background: var(--cx-surface-sunken);
    display: flex;
    justify-content: center;
    transition: background 100ms;
}

.fb-starter-card:hover .fb-starter-card__thumb[b-2dppwgjrof] {
    background: var(--cx-action-soft);
}

.fb-starter-card__body[b-2dppwgjrof] {
    padding: 10px 12px 12px;
}

.fb-starter-card__title[b-2dppwgjrof] {
    font-size: 13px;
    font-weight: 600;
    color: var(--cx-ink-strong);
    margin-bottom: 2px;
}

.fb-starter-card__desc[b-2dppwgjrof] {
    font-size: 11.5px;
    color: var(--cx-ink-muted);
    line-height: 1.45;
}

.fb-starter-row__footnote[b-2dppwgjrof] {
    margin-top: 20px;
    margin-bottom: 0;
    font-size: 11.5px;
    color: var(--cx-ink-subtle);
    text-align: center;
    line-height: 1.5;
}

/* Narrow viewports — stack to two columns. */
@media (max-width: 720px) {
    .fb-starter-row__grid[b-2dppwgjrof] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* /Features/ApplicationDefinitions/Builder/Canvas/SummaryFooter.razor.rz.scp.css */
/* Summary footer — collapsible bottom strip for structural validator errors.
 * Spec §9.5 + design errors-canvas.jsx ErrorsFooter.
 *
 * Pinned at the bottom of the canvas host. flex: 0 0 auto so it doesn't
 * compete with the canvas's flex:1 scroll region; the canvas scrolls
 * independently while the footer stays fixed at the viewport edge.
 */

.fb-summary-footer[b-75ajyr3ods] {
    flex: 0 0 auto;
    background: var(--cx-surface);
    border-top: 2px solid var(--cx-error);
    max-height: 40vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Clean state — green success strip, single line. */
.fb-summary-footer--clean[b-75ajyr3ods] {
    border-top: 1px solid var(--cx-success-border);
    background: var(--cx-success-soft);
    color: var(--cx-success);
    padding: 8px 18px;
    font-size: 11.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.fb-summary-footer__clean-text[b-75ajyr3ods] {
    line-height: 1;
}

/* Header bar — clickable, error-soft background, holds count + per-severity
 * pills + chevron toggle. Stays visible when collapsed; the body below
 * collapses with display:none. */
.fb-summary-footer__head[b-75ajyr3ods] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: var(--cx-error-soft);
    border: 0;
    cursor: pointer;
    user-select: none;
    color: var(--cx-error);
    text-align: left;
    width: 100%;
}

.fb-summary-footer__head:hover[b-75ajyr3ods] {
    background: color-mix(in oklab, var(--cx-error-soft) 70%, var(--cx-error-border) 30%);
}

.fb-summary-footer__head:focus-visible[b-75ajyr3ods] {
    outline: 2px solid var(--cx-action);
    outline-offset: -2px;
}

.fb-summary-footer__count[b-75ajyr3ods] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cx-error);
}

.fb-summary-footer__spacer[b-75ajyr3ods] {
    flex: 1 1 auto;
}

.fb-summary-footer__toggle[b-75ajyr3ods] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    color: var(--cx-ink-muted);
}

/* Body — scrollable when error count overflows the 40vh cap. */
.fb-summary-footer__body[b-75ajyr3ods] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px 14px 12px;
    background: var(--cx-surface);
}

/* Legend — two-line key for the fill-vs-outline severity register. */
.fb-summary-footer__legend[b-75ajyr3ods] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 4px 4px 8px;
    font-size: 10.5px;
    color: var(--cx-ink-muted);
    flex-wrap: wrap;
}

.fb-summary-footer__legend strong[b-75ajyr3ods] {
    color: var(--cx-ink-strong);
    font-weight: 600;
    margin-right: 4px;
}

.fb-summary-footer__legend-swatch[b-75ajyr3ods] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 5px;
    border: 1px solid var(--cx-error-border);
}

.fb-summary-footer__legend-swatch--save[b-75ajyr3ods] {
    background: var(--cx-error-soft);
}

.fb-summary-footer__legend-swatch--publish[b-75ajyr3ods] {
    background: transparent;
    border-width: 1.5px;
}
/* /Features/ApplicationDefinitions/Builder/Canvas/TrailingEmptyCell.razor.rz.scp.css */
/* The trailing-empty drop target's full styling lives in the GLOBAL
 * form-builder-tokens.css because the drag-state variant of this element
 * is rendered INLINE by LayoutRowView (not by this component), so scoped
 * rules here would only reach one of the two render paths.
 *
 * This file intentionally has no rules — kept as a placeholder for any
 * future TrailingEmptyCell-component-only styling that genuinely shouldn't
 * apply to the inline drag-state div. If you find yourself adding a rule
 * here, double-check whether LayoutRowView's inline render also needs it
 * (in which case the rule belongs in form-builder-tokens.css). */
/* /Features/ApplicationDefinitions/Builder/Chrome/SaveStateIndicator.razor.rz.scp.css */
/* Autosave indicator — 8-state machine per spec §15.1 + §15.4 + §18.4.
 * This state machine originated in impl (audit finding #2 / Step 1) and
 * was formalized in canon v6.1 as .fb-save-indicator[data-state]. The
 * absorption here matches canon's palette: pending=warning, saving=info
 * (with spinner), conflict=orange, session-expired / permission-denied
 * = muted-neutral. Each state's <span class="dot"> + <span class="meta">
 * + optional <button class="action"> children follow canon's flat-child
 * markup (NOT BEM-chained) per the round-trip alignment. */

.fb-save-indicator[b-lkrmzs768j] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--th-ink-3);
    font-size: 12px;
}

.fb-save-indicator > .dot[b-lkrmzs768j] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cx-success);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--cx-success) 18%, transparent);
    flex: none;
}

.fb-save-indicator > .meta[b-lkrmzs768j] {
    color: var(--th-ink-4);
    font-family: var(--th-f-mono);
    font-size: 11px;
    white-space: nowrap;
}

/* State-bearing chrome — adds padding + radius + transition for the
 * state-tinted variants (saved stays transparent to match v6 happy-path). */
.fb-save-indicator[data-state][b-lkrmzs768j] {
    padding: 2px 8px 2px 6px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    transition: background 100ms, border-color 100ms, color 100ms;
}

.fb-save-indicator[data-state="saved"][b-lkrmzs768j] {
    background: transparent;
    border-color: transparent;
}

.fb-save-indicator[data-state] > .sep[b-lkrmzs768j] {
    color: var(--cx-ink-faint);
    margin: 0 2px;
}

.fb-save-indicator[data-state] > .action[b-lkrmzs768j] {
    font-family: var(--th-f-sans);
    font-size: 11.5px;
    font-weight: 600;
    text-decoration: none;
    color: inherit;
    border: 0;
    background: transparent;
    border-bottom: 1px solid currentColor;
    border-radius: 0;
    padding: 0;
    cursor: pointer;
    line-height: 1.4;
}
.fb-save-indicator[data-state] > .action:hover[b-lkrmzs768j] { opacity: 0.85; }
.fb-save-indicator[data-state] > .action:focus-visible[b-lkrmzs768j] {
    outline: none;
    box-shadow: 0 0 0 2px var(--cx-action-soft);
    border-radius: 2px;
}

/* pending — autosave queued, debounce countdown */
.fb-save-indicator[data-state="pending"][b-lkrmzs768j] {
    color: var(--cx-warning);
    background: var(--cx-warning-soft);
    border-color: var(--cx-warning-border);
}
.fb-save-indicator[data-state="pending"] > .dot[b-lkrmzs768j] {
    background: var(--cx-warning);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--cx-warning) 18%, transparent);
}

/* saving — request in flight, spinner replaces dot */
.fb-save-indicator[data-state="saving"][b-lkrmzs768j] {
    color: var(--cx-info);
    background: var(--cx-info-soft);
    border-color: var(--cx-action-border);
}
.fb-save-indicator[data-state="saving"] > .dot[b-lkrmzs768j] {
    background: transparent;
    box-shadow: none;
    border: 1.5px solid var(--cx-info);
    border-top-color: transparent;
    background-clip: padding-box;
    animation: fb-save-indicator-spin-b-lkrmzs768j 900ms linear infinite;
}
@keyframes fb-save-indicator-spin-b-lkrmzs768j {
    to { transform: rotate(360deg); }
}

/* failed-transient — network-shaped retry; "Retry" action */
.fb-save-indicator[data-state="failed-transient"][b-lkrmzs768j] {
    color: var(--cx-error);
    background: var(--cx-surface);
    border-color: var(--cx-error-border);
}
.fb-save-indicator[data-state="failed-transient"] > .dot[b-lkrmzs768j] {
    background: transparent;
    border: 1.5px solid var(--cx-error);
    box-shadow: none;
}

/* failed-validation — block-save errors; "view" jumps to first */
.fb-save-indicator[data-state="failed-validation"][b-lkrmzs768j] {
    color: var(--cx-error);
    background: var(--cx-error-soft);
    border-color: var(--cx-error-border);
}
.fb-save-indicator[data-state="failed-validation"] > .dot[b-lkrmzs768j] {
    background: var(--cx-error);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--cx-error) 22%, transparent);
}

/* conflict — concurrent edit. Orange sits between warning amber and
 * error red so admins read it as "needs your input, not a system
 * failure". OKLCH derived from hue 55° (true orange) so it doesn't
 * collide with amber warning. */
.fb-save-indicator[data-state="conflict"][b-lkrmzs768j] {
    color: oklch(55% 0.16 55);
    background: oklch(96% 0.04 55);
    border-color: oklch(78% 0.10 55);
}
.fb-save-indicator[data-state="conflict"] > .dot[b-lkrmzs768j] {
    background: oklch(60% 0.18 55);
    box-shadow: 0 0 0 2px oklch(60% 0.18 55 / 0.22);
}

/* session-expired — Threshold auth lapse; "Sign in" action */
.fb-save-indicator[data-state="session-expired"][b-lkrmzs768j] {
    color: var(--cx-ink-muted);
    background: var(--cx-surface-sunken);
    border-color: var(--cx-border);
}
.fb-save-indicator[data-state="session-expired"] > .dot[b-lkrmzs768j] {
    background: var(--cx-ink-subtle);
    box-shadow: none;
}

/* permission-denied — role-based block; "Reload" action */
.fb-save-indicator[data-state="permission-denied"][b-lkrmzs768j] {
    color: var(--cx-ink-muted);
    background: var(--cx-surface-sunken);
    border-color: var(--cx-border);
}
.fb-save-indicator[data-state="permission-denied"] > .dot[b-lkrmzs768j] {
    background: var(--cx-ink-subtle);
    box-shadow: none;
}
/* /Features/ApplicationDefinitions/Builder/Chrome/SectionTab.razor.rz.scp.css */
/* Section tab — outer wrapper (positioning), inner button (the click
 * affordance), and kebab button (popover trigger). The wrapper's
 * position: relative anchors the absolute-positioned menu popover.
 */

.fb-section-tab[b-946b2g0w1x] {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-bottom: -1px;
    flex: 0 0 auto;
    border-bottom: 2px solid transparent;
    transition: border-color 100ms;
}

.fb-section-tab.is-active[b-946b2g0w1x] {
    border-bottom-color: var(--cx-action);
}

/* Error dot — small severity-shaped indicator inside the tab's button. Sits
 * next to the field count / rule glyph so the tab's existing affordances
 * stay where they are; the dot only appears when the section has any
 * descendant validation errors.
 *  BlockSave    → solid red square.
 *  BlockPublish → outlined red square.
 * Same fill-vs-outline shape SeverityPill uses so the dot reads as the
 * same register at-a-glance. */
.fb-section-tab-err-dot[b-946b2g0w1x] {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 1px;
    margin-left: 2px;
    border: 1.5px solid var(--cx-error);
    background: transparent;
    flex: 0 0 auto;
}

.fb-section-tab-err-dot[data-severity="block-save"][b-946b2g0w1x] {
    background: var(--cx-error);
    border-color: var(--cx-error);
}

.fb-section-tab-button[b-946b2g0w1x] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 4px 11px 4px;
    background: transparent;
    border: 0;
    color: var(--cx-ink-muted);
    font-weight: 500;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
    transition: color 100ms, background 100ms;
}

.fb-section-tab-button:hover[b-946b2g0w1x] {
    background: var(--cx-action-soft);
    color: var(--cx-ink-strong);
}

.fb-section-tab.is-active .fb-section-tab-button[b-946b2g0w1x] {
    color: var(--cx-ink-strong);
    font-weight: 600;
}

/* Step 6 (g2): drag glyph is now a SIBLING of the click button so its
 * pointerdown can dispatch a drag without conflicting with the button click.
 * It surfaces on tab hover; while a tab is being dragged the strip handles
 * the visual feedback (ghost + drop zones). */
.fb-tab-drag[b-946b2g0w1x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px 0 8px;
    color: var(--cx-ink-faint);
    cursor: grab;
    opacity: 0;
    transition: opacity 100ms;
    touch-action: none;
    user-select: none;
}

.fb-tab-drag:active[b-946b2g0w1x] {
    cursor: grabbing;
}

.fb-section-tab:hover .fb-tab-drag[b-946b2g0w1x],
.fb-section-tab.is-active .fb-tab-drag[b-946b2g0w1x] {
    opacity: 1;
}

.fb-section-tab-label[b-946b2g0w1x] {
    display: inline-flex;
    align-items: center;
}

.fb-tab-count[b-946b2g0w1x] {
    font-family: var(--cx-font-mono);
    font-size: 11px;
    color: var(--cx-ink-subtle);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.fb-tab-rule-glyph[b-946b2g0w1x] {
    display: inline-flex;
    align-items: center;
    color: var(--cx-rule);
}

/* The per-tab kebab trigger + menu now live in the shared SectionKebab
 * component; its CSS (.fb-section-kebab*) is global in threshold-fb.css because
 * the hover-reveal crosses the SectionTab→SectionKebab boundary and the menu is
 * portal-rendered. */
/* /Features/ApplicationDefinitions/Builder/Chrome/SectionTabDropZone.razor.rz.scp.css */
/* Section-tab drop zone — a narrow vertical strip between tabs. Invisible at
 * rest (only rendered during a section-tab drag); hover state surfaces the
 * action stripe. The strip's flex layout lays these out between SectionTab
 * elements; width grows on hover to make the target easier to hit without
 * pushing the strip's geometry around.
 */

.fb-section-tab-dropzone[b-252m03jdrr] {
    position: relative;
    flex: 0 0 auto;
    width: 4px;
    align-self: stretch;
    transition: width 80ms, background-color 80ms;
}

.fb-section-tab-dropzone[b-252m03jdrr]::before {
    content: "";
    position: absolute;
    inset: 8px 50% 8px 50%;
    width: 2px;
    transform: translateX(-50%);
    background: transparent;
    border-radius: 2px;
    transition: background-color 80ms;
}

.fb-section-tab-dropzone--hover[b-252m03jdrr] {
    width: 14px;
}

.fb-section-tab-dropzone--hover[b-252m03jdrr]::before {
    background: var(--cx-action);
}
/* /Features/ApplicationDefinitions/Builder/Chrome/SectionTabStrip.razor.rz.scp.css */
/* Section tab strip — horizontal navigation between sections.
 *
 * Layout:
 *   [scroll-region: [arrow.is-left] [scroller (flex-1, overflow-x-auto)] [arrow.is-right]
 *                   + abs .is-left / .is-right edge fades]
 *   [overflow "All N" button (border-left)]
 *
 * Overflow contract: the scroller clips + scrolls horizontally; the strip reads its
 * live metrics (section-tab-strip.js) and renders the arrow buttons + edge fades on
 * the canLeft / canRight result. Arrows + fades live inside fb-section-tabs-scroll-region
 * (NOT the strip) so the absolute fades anchor to the 28px arrow gutter rather than the
 * strip's right edge — where the pinned "All N" button sits.
 */

.fb-section-tabs[b-jrua67bf7o] {
    position: relative;
    display: flex;
    align-items: stretch;
    background: var(--cx-surface);
    border-bottom: 1px solid var(--cx-border);
    flex: 0 0 auto;
    overflow: hidden;
}

/* Scroll region — flexes to fill the strip minus the pinned "All N" button.
   position: relative so the absolute edge fades position against the arrow
   gutter (their offset is the arrow's 28px), not against the strip's far edge.
   min-width: 0 keeps the inner scroller from leaking its intrinsic width up the
   flex chain (the page-blowout guard). */
.fb-section-tabs-scroll-region[b-jrua67bf7o] {
    position: relative;
    display: flex;
    align-items: stretch;
    flex: 1;
    min-width: 0;
}

.fb-section-tabs-scroller[b-jrua67bf7o] {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0 8px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.fb-section-tabs-scroller[b-jrua67bf7o]::-webkit-scrollbar {
    display: none;
}

/* Overflow arrows — flank the scroller inside the region; rendered only when
   the scroller can page that direction. flex:0 0 28px so they never grow with
   tab count. Hover tracks the strip's copper-tint button hover (the sibling
   +Section / All N buttons) for consistency. */
.fb-tabs-arrow[b-jrua67bf7o] {
    position: relative;
    z-index: 2;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cx-surface);
    border: 0;
    color: var(--cx-ink-muted);
    cursor: pointer;
    transition: background 100ms, color 100ms;
}

.fb-tabs-arrow:hover[b-jrua67bf7o] {
    background: var(--cx-action-soft);
    color: var(--cx-ink-strong);
}

/* Edge fades — 24px gradient overlays just inside the 28px arrow gutter. Gated on
   the same canLeft / canRight signal as the arrows; pointer-events:none so they
   never intercept scroll or click. Fade colour is the strip's own surface. */
.fb-tabs-fade[b-jrua67bf7o] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 24px;
    pointer-events: none;
    z-index: 1;
}

.fb-tabs-fade.is-left[b-jrua67bf7o] {
    left: 28px;
    background: linear-gradient(to right, var(--cx-surface), transparent);
}

.fb-tabs-fade.is-right[b-jrua67bf7o] {
    right: 28px;
    background: linear-gradient(to left, var(--cx-surface), transparent);
}

.fb-section-add[b-jrua67bf7o] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 12px 12px 11px;
    background: transparent;
    border: 0;
    color: var(--cx-ink-muted);
    font-size: 12.5px;
    font-weight: 500;
    flex: 0 0 auto;
    white-space: nowrap;
    cursor: pointer;
    transition: background 100ms, color 100ms;
}

.fb-section-add:hover:not(:disabled)[b-jrua67bf7o] {
    background: var(--cx-action-soft);
    color: var(--cx-ink-strong);
}

.fb-section-add:disabled[b-jrua67bf7o] {
    color: var(--cx-ink-faint);
    cursor: not-allowed;
}

.fb-tabs-overflow[b-jrua67bf7o] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 12px;
    background: var(--cx-surface);
    border: 0;
    border-left: 1px solid var(--cx-border);
    color: var(--cx-ink-muted);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background 100ms, color 100ms;
}

/* :hover and the persistent open (popover-showing) state share the pressed look. */
.fb-tabs-overflow:hover[b-jrua67bf7o],
.fb-tabs-overflow.is-open[b-jrua67bf7o] {
    background: var(--cx-action-soft);
    color: var(--cx-ink-strong);
}

.fb-tab-count[b-jrua67bf7o] {
    font-family: var(--cx-font-mono);
    font-size: 10.5px;
    color: var(--cx-ink-subtle);
}
/* /Features/ApplicationDefinitions/Builder/Chrome/StatusPill.razor.rz.scp.css */
/* Status pill — three style modes from design-system §4. Step 1 ships filled (locked
 * default). Outlined / dot+text variants are accessible later via a data attribute on
 * the host, not by component re-render. */

.fb-status-pill[b-l30itkf2hx] {
    display: inline-flex;
    align-items: center;
    gap: var(--cx-space-3);
    padding: var(--cx-space-1) var(--cx-space-4);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: var(--cx-radius-pill);
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    border: 1px solid transparent;
}

.fb-status-pill__dot[b-l30itkf2hx] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.fb-status-pill__version[b-l30itkf2hx] {
    opacity: 0.85;
    font-family: var(--cx-font-mono);
    font-weight: 500;
    margin-left: var(--cx-space-2);
}

/* Status-specific surfaces. */
.fb-status-pill[data-version-status="draft"][b-l30itkf2hx] {
    background: var(--cx-status-draft-bg);
    color: var(--cx-status-draft);
    border-color: var(--cx-status-draft-border);
}
.fb-status-pill[data-version-status="draft"] .fb-status-pill__dot[b-l30itkf2hx] { background: var(--cx-status-draft); }

.fb-status-pill[data-version-status="published"][b-l30itkf2hx] {
    background: var(--cx-status-published-bg);
    color: var(--cx-status-published);
    border-color: var(--cx-status-published-border);
}
.fb-status-pill[data-version-status="published"] .fb-status-pill__dot[b-l30itkf2hx] { background: var(--cx-status-published); }

.fb-status-pill[data-version-status="superseded"][b-l30itkf2hx] {
    background: var(--cx-status-superseded-bg);
    color: var(--cx-status-superseded);
    border-color: var(--cx-status-superseded-border);
}
.fb-status-pill[data-version-status="superseded"] .fb-status-pill__dot[b-l30itkf2hx] { background: var(--cx-status-superseded); }

.fb-status-pill[data-version-status="none"][b-l30itkf2hx] {
    background: var(--cx-surface-sunken);
    color: var(--cx-ink-muted);
    border-color: var(--cx-border);
}
.fb-status-pill[data-version-status="none"] .fb-status-pill__dot[b-l30itkf2hx] { background: var(--cx-ink-faint); }
/* /Features/ApplicationDefinitions/Builder/Chrome/TopBar.razor.rz.scp.css */
/* Form-builder context bar — canon fb.css §14-72 (.fb-context-bar). Sits beneath
 * the global Threshold topbar; 3px marigold-deep left strip + marigold-soft → paper-sunk
 * gradient + composed AppDef switcher (canon places identity in this row, not above) +
 * action group on the right. Canon retired the separate static title block on
 * 2026-05-29; AppDef identity now lives inside &lt;AppDefSwitcher /&gt; (.adsw-anchor). */

.fb-context-bar[b-1njuv703z4] {
    position: relative;
    min-height: var(--th-chrome-topbar-h);
    background: linear-gradient(to right,
        var(--th-marigold-soft) 0%,
        var(--th-marigold-soft) 8px,
        var(--th-paper-sunk) 8px);
    border-bottom: 1px solid var(--th-line);
    display: flex;
    align-items: center;
    padding: 0 var(--cx-space-6) 0 var(--cx-space-5);
    gap: var(--cx-space-5);
    flex: 0 0 auto;
    min-width: 0;
}

/* 3px marigold-deep brand strip on the left edge. Direct --th-marigold-deep
   consumption is correct here — this is brand-identity accent, not action
   color. The strip is the load-bearing "you're inside the form-builder
   editing context" signal per canon's Form Builder.html visual. */
.fb-context-bar[b-1njuv703z4]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--th-marigold-deep);
}

.fb-context-spacer[b-1njuv703z4] {
    flex: 1 1 auto;
}

.fb-context-bar__actions[b-1njuv703z4] {
    display: inline-flex;
    align-items: center;
    gap: var(--cx-space-2);
}

/* Canon scopes the divider as `.fb-context-bar .fb-divider` (descendant)
   so the same atom can be reused in other context-bar-shaped surfaces. */
.fb-context-bar .fb-divider[b-1njuv703z4] {
    width: 1px;
    height: 22px;
    background: var(--cx-border);
    margin: 0 var(--cx-space-2);
    flex: none;
}

/* Phase 2 B2.1 (2026-05-27): action button + kbd + version-trigger rules
   removed; consumers migrated to .cc-btn / .cc-kbd / .cc-version-trigger
   shared atoms in threshold-chrome.css per CSS audit finding #19.
   Accepted small visual change: ghost button hover now uses --th-paper-2
   (neutral) instead of --cx-action-soft (copper); the shared atom is
   the canon-faithful render. The form-builder's specific button styling
   (5px padding, primary copper color via --cx-action) lives in the
   .cc-btn atom + post-handoff-color-fix token cascade. */

/* Chevron child of .cc-version-trigger — not a re-implementation of a
   shared atom (canon doesn't ship a chevron child class). Form-builder
   decoration only; muted ink, inline-flex centering. */
.fb-version-trigger__chevron[b-1njuv703z4] {
    color: var(--cx-ink-subtle);
    display: inline-flex;
    align-items: center;
}
/* /Features/ApplicationDefinitions/Builder/ConflictModal.razor.rz.scp.css */
/* Conflict modal — centered modal over a scrim. Matches the destructive-confirm chrome
 * family per design-system §7 (centered positioning, not the right-anchored drawer
 * family). Step 1 is the only modal the spine ships; destructive-confirm + finder
 * come in later steps and share the same scrim treatment. */

.fb-conflict-modal-scrim[b-w6t127typw] {
    position: fixed;
    inset: 0;
    background: var(--cx-overlay-scrim);
    z-index: 1040;
    backdrop-filter: blur(1px);
}

.fb-conflict-modal[b-w6t127typw] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 460px;
    max-width: calc(100vw - 48px);
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-md);
    box-shadow: var(--cx-shadow-popover), 0 24px 80px rgba(20, 22, 30, 0.28);
    z-index: 1050;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.fb-conflict-modal__header[b-w6t127typw] {
    padding: 18px 20px 14px;
    background: var(--cx-warning-soft);
    border-bottom: 1px solid var(--cx-warning-border);
}

.fb-conflict-modal__title[b-w6t127typw] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--cx-ink-strong);
    letter-spacing: -0.005em;
}

.fb-conflict-modal__body[b-w6t127typw] {
    padding: 14px 20px 12px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--cx-ink);
}

.fb-conflict-modal__body p[b-w6t127typw] {
    margin: 0 0 var(--cx-space-4);
}

.fb-conflict-modal__body p:last-child[b-w6t127typw] {
    margin-bottom: 0;
}

.fb-conflict-modal__hint[b-w6t127typw] {
    font-size: 12px;
    color: var(--cx-ink-muted);
}

.fb-conflict-modal__footer[b-w6t127typw] {
    display: flex;
    gap: var(--cx-space-3);
    justify-content: flex-end;
    padding: 12px 18px;
    background: var(--cx-surface-sunken);
    border-top: 1px solid var(--cx-border);
}

.fb-conflict-modal__btn[b-w6t127typw] {
    appearance: none;
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    padding: 6px var(--cx-space-5);
    border-radius: var(--cx-radius-sm);
    cursor: pointer;
    border: 1px solid var(--cx-border);
    background: var(--cx-surface);
    color: var(--cx-ink-strong);
}

.fb-conflict-modal__btn:focus-visible[b-w6t127typw] {
    outline: 2px solid var(--cx-action);
    outline-offset: 1px;
}

.fb-conflict-modal__btn--destructive[b-w6t127typw] {
    color: var(--cx-error);
    border-color: var(--cx-error-border);
}

.fb-conflict-modal__btn--destructive:hover[b-w6t127typw] {
    background: var(--cx-error-soft);
}

.fb-conflict-modal__btn--safe[b-w6t127typw] {
    background: var(--cx-action);
    color: var(--cx-ink-on-action);
    border-color: var(--cx-action);
    font-weight: 600;
}

.fb-conflict-modal__btn--safe:hover[b-w6t127typw] {
    background: var(--cx-action-hover);
    border-color: var(--cx-action-hover);
}
/* /Features/ApplicationDefinitions/Builder/DestructiveDeleteConfirm.razor.rz.scp.css */
/* Destructive-confirm modal — form-builder spec §14.2, faithful port of design canon
 * §7.15 (docs/design-references/design_handoff_form_builder/destructive-confirm.jsx).
 *
 * Register: an error-tinted (risk) header band carrying the trash-in-circle + the
 * element-type pill + a mono target detail; impact rows as tinted cards (rule = purple,
 * change = warning copper, section = action marigold, history = superseded neutral);
 * a footer whose SAFE action is the solid action-colored primary and whose destructive
 * action is a quiet outline — destruction available, never the path of least resistance.
 * All colors flow from the --cx-* form-builder token layer (form-builder-tokens.css). */

.fb-destructive-modal-scrim[b-gxtzncdnwa] {
    position: fixed;
    inset: 0;
    background: rgba(20, 22, 30, 0.42);
    z-index: 90;
}

.fb-destructive-modal[b-gxtzncdnwa] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 520px;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 64px);
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-md);
    box-shadow: var(--cx-shadow-popover), 0 24px 80px rgba(20, 22, 30, 0.28);
    z-index: 100;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ── Header (error-tinted band) ─────────────────────────────────────────── */

.fb-destructive-modal__header[b-gxtzncdnwa] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px 14px;
    background: var(--cx-error-soft);
    border-bottom: 1px solid var(--cx-error-border);
}

.fb-destructive-modal__icon[b-gxtzncdnwa] {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    background: var(--cx-surface);
    border: 1px solid var(--cx-error-border);
    border-radius: 50%;
    color: var(--cx-error);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fb-destructive-modal__heading[b-gxtzncdnwa] {
    flex: 1;
    min-width: 0;
}

.fb-destructive-modal__title[b-gxtzncdnwa] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--cx-ink-strong);
    letter-spacing: -0.005em;
    line-height: 1.35;
}

.fb-destructive-modal__meta[b-gxtzncdnwa] {
    font-size: 11px;
    margin-top: 4px;
    color: var(--cx-ink-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.fb-destructive-modal__pill[b-gxtzncdnwa] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cx-error);
    background: var(--cx-surface);
    border: 1px solid var(--cx-error-border);
    padding: 0 6px;
    border-radius: var(--cx-radius-pill);
    line-height: 1.6;
}

.fb-destructive-modal__target[b-gxtzncdnwa] {
    font-family: var(--cx-font-mono);
    font-size: 11px;
    color: var(--cx-ink-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.fb-destructive-modal__close[b-gxtzncdnwa] {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--cx-ink-muted);
    padding: 5px;
    margin-top: -2px;
    border-radius: var(--cx-radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.fb-destructive-modal__close:hover[b-gxtzncdnwa] {
    background: var(--cx-surface-sunken);
    color: var(--cx-ink-strong);
}

/* ── Body ───────────────────────────────────────────────────────────────── */

.fb-destructive-modal__body[b-gxtzncdnwa] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 20px 16px;
}

.fb-destructive-modal__lede[b-gxtzncdnwa] {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--cx-ink-strong);
    line-height: 1.55;
}

.fb-destructive-modal__lede strong[b-gxtzncdnwa] {
    font-weight: 600;
    color: var(--cx-ink-strong);
}

.fb-destructive-modal__muted[b-gxtzncdnwa] {
    color: var(--cx-ink-muted);
}

/* ── Impact rows (tinted cards) ─────────────────────────────────────────── */

.fb-destructive-modal__impacts[b-gxtzncdnwa] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.fb-destructive-modal__impact[b-gxtzncdnwa] {
    display: grid;
    grid-template-columns: 20px 1fr;
    column-gap: 10px;
    align-items: flex-start;
    padding: 6px 10px;
    background: var(--cx-surface);
    border: 1px solid var(--cx-border-faint);
    border-radius: var(--cx-radius-sm);
    font-size: 12px;
    color: var(--cx-ink-strong);
    line-height: 1.45;
}

.fb-destructive-modal__impact strong[b-gxtzncdnwa] {
    font-weight: 600;
}

.fb-destructive-modal__impact.is-muted[b-gxtzncdnwa] {
    grid-template-columns: 1fr;
    color: var(--cx-ink-muted);
    font-style: italic;
    background: var(--cx-surface-sunken);
    border-style: dashed;
}

.fb-destructive-modal__badge[b-gxtzncdnwa] {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--cx-radius-xs);
    font-family: var(--cx-font-mono);
    font-size: 10px;
    font-weight: 700;
    margin-top: 1px;
}

.fb-destructive-modal__badge--rule[b-gxtzncdnwa] {
    background: var(--cx-rule-soft);
    color: var(--cx-rule);
    border: 1px solid var(--cx-rule-border);
}

.fb-destructive-modal__badge--change[b-gxtzncdnwa] {
    background: var(--cx-warning-soft);
    color: var(--cx-warning);
    border: 1px solid var(--cx-warning-border);
}

.fb-destructive-modal__badge--section[b-gxtzncdnwa] {
    background: var(--cx-action-soft);
    color: var(--cx-action);
    border: 1px solid var(--cx-action-border);
}

.fb-destructive-modal__badge--history[b-gxtzncdnwa] {
    background: var(--cx-status-superseded-bg);
    color: var(--cx-status-superseded);
    border: 1px solid var(--cx-status-superseded-border);
}

/* ── "Try this instead?" offer (group) ──────────────────────────────────── */

.fb-destructive-modal__offer[b-gxtzncdnwa] {
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--cx-action-soft);
    border: 1px solid var(--cx-action-border);
    border-radius: var(--cx-radius-sm);
}

.fb-destructive-modal__offer-title[b-gxtzncdnwa] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cx-ink-strong);
}

.fb-destructive-modal__offer-spark[b-gxtzncdnwa] {
    display: inline-flex;
    color: var(--cx-action);
}

.fb-destructive-modal__offer-body[b-gxtzncdnwa] {
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--cx-ink-muted);
    line-height: 1.5;
}

.fb-destructive-modal__offer-btn[b-gxtzncdnwa] {
    appearance: none;
    margin-top: 8px;
    padding: 4px 11px;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--cx-action);
    background: var(--cx-surface);
    border: 1px solid var(--cx-action-border);
    border-radius: var(--cx-radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.fb-destructive-modal__offer-btn:hover[b-gxtzncdnwa] {
    background: var(--cx-action-soft-strong);
}

/* ── Roll-up summary (mono recap line) ──────────────────────────────────── */

.fb-destructive-modal__rollup[b-gxtzncdnwa] {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--cx-border-faint);
    font-family: var(--cx-font-mono);
    font-size: 11px;
    color: var(--cx-ink-muted);
    line-height: 1.5;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.fb-destructive-modal__footer[b-gxtzncdnwa] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--cx-surface-sunken);
    border-top: 1px solid var(--cx-border);
}

.fb-destructive-modal__audit-note[b-gxtzncdnwa] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--cx-ink-muted);
}

.fb-destructive-modal__footer-spacer[b-gxtzncdnwa] {
    flex: 1;
}

.fb-destructive-modal__btn[b-gxtzncdnwa] {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    font: inherit;
    font-size: 12.5px;
    border-radius: var(--cx-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
}

/* Destructive = quiet outline (left). Available, but not the easy path. */
.fb-destructive-modal__btn--destructive[b-gxtzncdnwa] {
    background: var(--cx-surface);
    color: var(--cx-error);
    border-color: var(--cx-error-border);
    font-weight: 500;
}

.fb-destructive-modal__btn--destructive:hover[b-gxtzncdnwa] {
    background: var(--cx-error-soft);
}

/* Safe = solid action-colored primary (right, auto-focused). */
.fb-destructive-modal__btn--safe[b-gxtzncdnwa] {
    background: var(--cx-action);
    color: var(--cx-ink-on-action);
    border-color: var(--cx-action);
    font-weight: 600;
}

.fb-destructive-modal__btn--safe:hover[b-gxtzncdnwa] {
    background: var(--cx-action-hover);
    border-color: var(--cx-action-hover);
}

.fb-destructive-modal__btn:focus-visible[b-gxtzncdnwa] {
    outline: 2px solid var(--cx-action);
    outline-offset: 1px;
}
/* /Features/ApplicationDefinitions/Builder/Dnd/DragOverlay.razor.rz.scp.css */
/* Drag overlay — fixed-position ghost following the pointer.
 *
 * pointer-events: none lets drop targets receive hover events through the
 * overlay. The transform translates the ghost so its top-left corner sits at
 * the pointer offset (slight upper-left lift so the ghost reads as "carried"
 * rather than "stuck to the pointer").
 *
 * z-index: above canvas chrome but below modal overlays. The dashboard
 * popover layer uses 800+; staying below 800 keeps modals stacked on top.
 */

.fb-drag-overlay[b-3btk6u458n] {
    position: fixed;
    pointer-events: none;
    z-index: 600;
    transform: translate(8px, 8px);
    opacity: 0.92;
    user-select: none;
}
/* /Features/ApplicationDefinitions/Builder/Dnd/DropTarget.razor.rz.scp.css */
/* Drop-target visual treatments.
 *
 * Per step-3 brief 5a: EmptyContent full-cell highlight; 6px vertical bars for
 * inter-cell gaps; 6px horizontal bars for inter-row gaps. Visuals are bound
 * to data-drop-active="true" — the controller toggles the attribute when a
 * drop target becomes / leaves hovered.
 *
 * Suppressed targets (depth-cap gate) reset pointer-events to none so they
 * don't compete for hover; the parent renders the suppressed target so the
 * markup stays stable across drag start / end, but its handlers are inert.
 */

.fb-drop-target[b-k18glr7won] {
    pointer-events: auto;
    transition: background-color 100ms, border-color 100ms, box-shadow 100ms;
}

.fb-drop-target[data-drop-suppressed="true"][b-k18glr7won] {
    pointer-events: none;
}

/* Full-cell highlight — for cells whose content is EmptyContent. The cell
 * itself has the .fb-cell-shell, and DropTarget wraps the cell to surface the
 * active state via a ring + soft fill. */
.fb-drop-target--cell[b-k18glr7won] {
    border-radius: var(--cx-radius-sm);
}

.fb-drop-target--cell[data-drop-active="true"][b-k18glr7won] {
    background-color: var(--cx-drop-active);
    box-shadow: 0 0 0 2px var(--cx-drop-active-border);
}

/* Bar treatment — vertical (inter-cell) or horizontal (inter-row, section
 * boundaries). The bar sits in the gap; default state is a 6px slot with
 * subtle fill that strengthens to drop-active when hovered. */
.fb-drop-target--bar-vertical[b-k18glr7won] {
    background-color: var(--cx-action-soft);
    border-radius: var(--cx-radius-xs);
    align-self: stretch;
    min-width: 6px;
    width: 6px;
}

.fb-drop-target--bar-vertical[data-drop-active="true"][b-k18glr7won] {
    background-color: var(--cx-drop-active);
    box-shadow: 0 0 0 2px var(--cx-drop-active-border);
}

.fb-drop-target--bar-horizontal[b-k18glr7won] {
    background-color: var(--cx-action-soft);
    border-radius: var(--cx-radius-xs);
    height: 6px;
    min-height: 6px;
    width: 100%;
    margin: 4px 0;
}

.fb-drop-target--bar-horizontal[data-drop-active="true"][b-k18glr7won] {
    background-color: var(--cx-drop-active);
    box-shadow: 0 0 0 2px var(--cx-drop-active-border);
}

/* Trailing-empty cell — already styled in TrailingEmptyCell.razor.css; the
 * DropTarget wrapper just adds the active ring on hover. */
.fb-drop-target--trailing-empty[data-drop-active="true"][b-k18glr7won] {
    box-shadow: 0 0 0 2px var(--cx-drop-active-border);
    background-color: var(--cx-drop-active);
}
/* /Features/ApplicationDefinitions/Builder/Drawer/ConfirmGate.razor.rz.scp.css */
/* Typed-name confirm gate primitive. Border + feedback color drive off
   the state attribute set by the host component. */

.fb-confirm-gate[b-1ist0one5l] {
    padding: 12px 14px;
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
}

.fb-confirm-gate--match[b-1ist0one5l] {
    background: var(--cx-status-published-bg);
    border-color: var(--cx-status-published-border);
}

.fb-confirm-gate__hint[b-1ist0one5l] {
    font-size: 12.5px;
    color: var(--cx-ink-strong);
    line-height: 1.45;
}

.fb-confirm-gate__hint strong[b-1ist0one5l] {
    font-weight: 600;
    font-family: var(--cx-font-mono);
}

.fb-confirm-gate__prompt[b-1ist0one5l] {
    margin: 8px 0 6px;
    font-size: 12.5px;
    color: var(--cx-ink);
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
}

.fb-confirm-gate__expected[b-1ist0one5l] {
    font-family: var(--cx-font-mono);
    font-size: 12px;
    color: var(--cx-ink-strong);
    background: var(--cx-surface-sunken);
    border: 1px solid var(--cx-border);
    padding: 0 5px;
    border-radius: var(--cx-radius-xs);
}

.fb-confirm-gate__input[b-1ist0one5l] {
    width: 100%;
    box-sizing: border-box;
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    padding: 7px 10px;
    font-family: var(--cx-font-mono);
    font-size: 13px;
    color: var(--cx-ink-strong);
    outline: none;
}

.fb-confirm-gate__input--match[b-1ist0one5l] {
    border-color: var(--cx-status-published-border);
}

.fb-confirm-gate__input--mismatch[b-1ist0one5l] {
    border-color: var(--cx-error-border, oklch(75% 0.12 25));
}

.fb-confirm-gate__input:focus-visible[b-1ist0one5l] {
    outline: 2px solid var(--cx-action);
    outline-offset: 1px;
}

.fb-confirm-gate__input:disabled[b-1ist0one5l] {
    opacity: 0.55;
    cursor: not-allowed;
}

.fb-confirm-gate__feedback[b-1ist0one5l] {
    margin-top: 6px;
    font-size: 11.5px;
    display: inline-flex;
    align-items: center;
}

.fb-confirm-gate__feedback--match[b-1ist0one5l] {
    color: var(--cx-status-published);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.fb-confirm-gate__feedback--mismatch[b-1ist0one5l] {
    color: var(--cx-error, oklch(55% 0.2 25));
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.fb-confirm-gate__feedback--muted[b-1ist0one5l] {
    color: var(--cx-ink-subtle);
}
/* /Features/ApplicationDefinitions/Builder/Drawer/DiffDrawer.razor.rz.scp.css */
/* ── Comparator ─────────────────────────────────────────────────────────── */

.fb-diff-comparator-wrap[b-vh762zhin7] {
    position: relative;
}

.fb-diff-comparator[b-vh762zhin7] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px 12px;
    border-top: 1px solid var(--cx-border-faint);
}

.fb-diff-comparator__label[b-vh762zhin7] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cx-ink-subtle);
    margin-right: 2px;
}

.fb-diff-comparator__picker-btn[b-vh762zhin7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    background: var(--cx-surface-sunken);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    min-width: 180px;
    font-size: 11.5px;
    color: var(--cx-ink);
}

.fb-diff-comparator__picker-btn:hover[b-vh762zhin7] {
    background: var(--cx-surface-raised);
}

.fb-diff-comparator__version-label[b-vh762zhin7] {
    font-family: var(--cx-font-mono);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--cx-ink-key);
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-xs);
    padding: 0 5px;
    height: 18px;
    line-height: 17px;
    display: inline-flex;
    align-items: center;
}

.fb-diff-comparator__placeholder[b-vh762zhin7] {
    color: var(--cx-ink-subtle);
    font-size: 12px;
}

.fb-diff-comparator__swap-btn[b-vh762zhin7] {
    width: 24px;
    height: 24px;
    color: var(--cx-ink-muted);
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
}

/* ── Picker panel ────────────────────────────────────────────────────────── */

.fb-diff-picker-panel[b-vh762zhin7] {
    position: absolute;
    top: calc(100% - 4px);
    left: 18px;
    right: 18px;
    z-index: 5;
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    box-shadow: var(--cx-shadow-popover);
    padding: 6px;
}

.fb-diff-picker-panel__header[b-vh762zhin7] {
    padding: 4px 8px 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cx-ink-subtle);
}

.fb-diff-picker-panel__list[b-vh762zhin7] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fb-diff-picker-option[b-vh762zhin7] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    text-align: left;
    padding: 6px 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--cx-radius-xs);
    color: var(--cx-ink-strong);
    cursor: pointer;
}

.fb-diff-picker-option:hover[b-vh762zhin7] {
    background: var(--cx-surface-sunken);
}

.fb-diff-picker-option.is-selected[b-vh762zhin7] {
    background: var(--cx-action-soft);
    border-color: var(--cx-action-border);
}

.fb-diff-picker-option__label[b-vh762zhin7] {
    font-size: 12px;
    font-weight: 500;
    color: var(--cx-ink-strong);
}

.fb-diff-picker-option.is-selected .fb-diff-picker-option__label[b-vh762zhin7] {
    color: var(--cx-action);
}

.fb-diff-picker-option__hint[b-vh762zhin7] {
    flex: 1;
    font-size: 10.5px;
    color: var(--cx-ink-muted);
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */

.fb-diff-toolbar[b-vh762zhin7] {
    padding: 10px 18px;
    border-bottom: 1px solid var(--cx-border-faint);
    background: var(--cx-surface);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fb-diff-toolbar__chips[b-vh762zhin7] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.fb-diff-chip[b-vh762zhin7] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--cx-ink-muted);
    background: transparent;
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-pill);
    cursor: pointer;
    white-space: nowrap;
}

.fb-diff-chip:hover[b-vh762zhin7] {
    background: var(--cx-surface-sunken);
}

.fb-diff-chip.is-active[b-vh762zhin7] {
    font-weight: 600;
    background: var(--cx-action-soft);
    border-color: var(--cx-action-border);
    color: var(--cx-action);
}

.fb-diff-chip__count[b-vh762zhin7] {
    font-size: 10px;
    font-family: var(--cx-font-mono);
    font-weight: 600;
    color: currentColor;
    opacity: 0.7;
}

.fb-diff-toolbar__controls[b-vh762zhin7] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.fb-diff-search[b-vh762zhin7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 200px;
    max-width: 260px;
    padding: 4px 9px;
    background: var(--cx-surface-sunken);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
}

.fb-diff-search__input[b-vh762zhin7] {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    font-size: 12px;
    color: var(--cx-ink-strong);
    font-family: inherit;
}

.fb-diff-section-select[b-vh762zhin7] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    background: var(--cx-surface-sunken);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    font-size: 11.5px;
    color: var(--cx-ink-muted);
}

.fb-diff-section-select__select[b-vh762zhin7] {
    background: transparent;
    border: none;
    outline: none;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--cx-ink-strong);
    font-family: inherit;
}

.fb-diff-groupby[b-vh762zhin7] {
    display: inline-flex;
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    overflow: hidden;
    background: var(--cx-surface-sunken);
}

.fb-diff-groupby__tab[b-vh762zhin7] {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--cx-ink-muted);
    background: transparent;
    cursor: pointer;
    border: none;
}

.fb-diff-groupby__tab:hover[b-vh762zhin7] {
    color: var(--cx-ink);
}

.fb-diff-groupby__tab.is-active[b-vh762zhin7] {
    font-weight: 600;
    color: var(--cx-ink-strong);
    background: var(--cx-surface);
}

.fb-diff-density-btn[b-vh762zhin7] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 7px;
    font-size: 11px;
    color: var(--cx-ink-muted);
    background: transparent;
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    cursor: pointer;
}

/* ── Body ────────────────────────────────────────────────────────────────── */

.fb-diff-body[b-vh762zhin7] {
    padding: 12px 18px 18px;
}

.fb-diff-body--composed[b-vh762zhin7] {
    padding-top: 12px;
}

.fb-diff-body__placeholder[b-vh762zhin7] {
    padding: 24px 18px;
    font-size: 13px;
    color: var(--cx-ink-muted);
    text-align: center;
}

.fb-diff-body__placeholder--error[b-vh762zhin7] {
    color: var(--cx-error);
}

.fb-diff-composed-notice[b-vh762zhin7] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 12px;
    background: var(--cx-action-soft);
    border: 1px solid var(--cx-action-border);
    border-radius: var(--cx-radius-sm);
    font-size: 11.5px;
    color: var(--cx-ink-strong);
}

/* ── Composed slab ───────────────────────────────────────────────────────── */

.fb-diff-slab[b-vh762zhin7] {
    margin-bottom: 18px;
}

.fb-diff-slab__header[b-vh762zhin7] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0 10px;
    border-bottom: 1px solid var(--cx-border-faint);
    margin-bottom: 8px;
    cursor: pointer;
    user-select: none;
    list-style: none;
}

.fb-diff-slab__header[b-vh762zhin7]::marker,
.fb-diff-slab__header[b-vh762zhin7]::-webkit-details-marker {
    display: none;
}

.fb-diff-slab__version[b-vh762zhin7] {
    font-family: var(--cx-font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--cx-ink-strong);
    padding: 0 6px;
    height: 18px;
    line-height: 17px;
    background: var(--cx-surface-sunken);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-xs);
    display: inline-flex;
    align-items: center;
}

.fb-diff-slab__count[b-vh762zhin7] {
    flex: 1;
    font-size: 10.5px;
    font-family: var(--cx-font-mono);
    color: var(--cx-ink-subtle);
}

.fb-diff-slab__body[b-vh762zhin7] {
    padding: 0 0 4px;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */

.fb-diff-body__empty-state[b-vh762zhin7] {
    padding: 64px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.fb-diff-empty__icon[b-vh762zhin7] {
    width: 48px;
    height: 48px;
    background: var(--cx-surface-sunken);
    border: 1px solid var(--cx-border);
    border-radius: 50%;
    color: var(--cx-ink-subtle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fb-diff-empty__title[b-vh762zhin7] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--cx-ink-strong);
}

.fb-diff-empty__body[b-vh762zhin7] {
    margin: 0;
    max-width: 360px;
    font-size: 12px;
    color: var(--cx-ink-muted);
    line-height: 1.5;
}

.fb-diff-empty__code[b-vh762zhin7] {
    font-family: var(--cx-font-mono);
    font-weight: 700;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.fb-diff-footer__code[b-vh762zhin7] {
    font-family: var(--cx-font-mono);
    font-size: 11px;
    font-weight: 600;
    background: var(--cx-surface-sunken);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-xs);
    padding: 0 5px;
}
/* /Features/ApplicationDefinitions/Builder/Drawer/Drawer.razor.rz.scp.css */
/* Drawer chrome — shared by versions / publish / history members. Tokens
   live in form-builder-tokens.css; this file owns layout + composition only.

   Spec §11 + design-system §8: right-anchored slide-out, 620px default
   (Diff drawer 680px per spec §11 exception), scrim 32% opacity,
   dismiss-on-scrim/Esc/X. Both light + dark themes use
   the same chrome positions — only token resolution differs (handled in
   form-builder-tokens.css's [data-bs-theme="dark"] block). */

.fb-drawer-scrim[b-9xv1d932ps] {
    position: fixed;
    inset: 0;
    background: var(--cx-overlay-scrim);
    backdrop-filter: blur(1px);
    z-index: 80;
    /* The scrim itself is the dismiss target — clicks fall through nothing
       sits over it except the drawer aside (which is z-90). */
    cursor: pointer;
}

.fb-drawer[b-9xv1d932ps] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    max-width: 90vw;
    background: var(--cx-surface);
    border-left: 1px solid var(--cx-border);
    box-shadow: var(--cx-shadow-popover),
                -24px 0 64px oklch(20% 0.015 255 / 0.18);
    display: flex;
    flex-direction: column;
    z-index: 90;
}

/* Body owns the overflow:auto so callers don't repeat it per drawer. The
   min-height:0 is the load-bearing flex hack — without it the body refuses
   to shrink and the scroll never engages inside the flex column. */
.fb-drawer__body[b-9xv1d932ps] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
/* /Features/ApplicationDefinitions/Builder/Drawer/DrawerFooter.razor.rz.scp.css */
/* Drawer footer — context line + actions. Sunken bg matches design canon's
   versions/publish/history footers. */

.fb-drawer__footer[b-xo9xjufv5z] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--cx-surface-sunken);
    border-top: 1px solid var(--cx-border);
    flex: 0 0 auto;
}

.fb-drawer__footer-context[b-xo9xjufv5z] {
    font-size: 11.5px;
    color: var(--cx-ink-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.fb-drawer__footer-spacer[b-xo9xjufv5z] {
    flex: 1 1 auto;
}

.fb-drawer__footer-actions[b-xo9xjufv5z] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
/* /Features/ApplicationDefinitions/Builder/Drawer/DrawerHeader.razor.rz.scp.css */
/* Drawer header — icon + eyebrow/heading/subline + close X. Per design canon
   v6.2: this is its own BEM block (fb-drawer-header), not an element of the
   fb-drawer block. Children: __badge (icon slot), __title (text-block
   wrapper), __eyebrow (uppercase kicker above the heading), __heading (the
   actual title text), __subline (optional descriptor beneath the heading),
   __close (dismiss X). Modifiers: --default vs --status per icon treatment. */

.fb-drawer-header[b-89oe5xozli] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-bottom: 1px solid var(--cx-border);
}

.fb-drawer-header--default[b-89oe5xozli] {
    padding: 14px 16px 13px;
    align-items: center;
}

.fb-drawer-header--status[b-89oe5xozli] {
    padding: 16px 18px 14px;
}

.fb-drawer-header__badge[b-89oe5xozli] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--cx-radius-sm);
}

.fb-drawer-header--default .fb-drawer-header__badge[b-89oe5xozli] {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    background: var(--cx-surface-sunken);
    border: 1px solid var(--cx-border);
    color: var(--cx-ink-muted);
}

.fb-drawer-header--status .fb-drawer-header__badge[b-89oe5xozli] {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    background: var(--cx-status-published-bg);
    border: 1px solid var(--cx-status-published-border);
    color: var(--cx-status-published);
}

.fb-drawer-header__title[b-89oe5xozli] {
    flex: 1;
    min-width: 0;
}

.fb-drawer-header__eyebrow[b-89oe5xozli] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cx-ink-subtle);
}

.fb-drawer-header__heading[b-89oe5xozli] {
    font-size: 14px;
    font-weight: 600;
    color: var(--cx-ink-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.fb-drawer-header--status .fb-drawer-header__heading[b-89oe5xozli] {
    font-size: 16px;
    letter-spacing: -0.005em;
    margin: 1px 0 4px;
}

.fb-drawer-header__subline[b-89oe5xozli] {
    font-size: 12px;
    color: var(--cx-ink-muted);
    margin-top: 2px;
}

.fb-drawer-header__close[b-89oe5xozli] {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--cx-ink-muted);
    padding: 5px;
    border-radius: var(--cx-radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.fb-drawer-header__close:hover[b-89oe5xozli] {
    background: var(--cx-surface-sunken);
    color: var(--cx-ink-strong);
}

.fb-drawer-header__close:focus-visible[b-89oe5xozli] {
    outline: 2px solid var(--cx-action-border);
    outline-offset: 2px;
}
/* /Features/ApplicationDefinitions/Builder/Drawer/HistoryDrawer.razor.rz.scp.css */
/* History drawer chrome — controls row (scope toggle + chips + density) +
   event list (sessions or individual). */

.fb-history-controls[b-jgnwowfo2b] {
    padding: 12px 16px 8px;
    border-bottom: 1px solid var(--cx-border-faint, var(--cx-border));
}

.fb-history-scope-toggle[b-jgnwowfo2b] {
    display: inline-flex;
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-pill);
    background: var(--cx-surface-sunken);
    overflow: hidden;
}

.fb-history-scope-toggle__tab[b-jgnwowfo2b] {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--cx-radius-pill);
    padding: 5px 14px;
    font-size: 12px;
    color: var(--cx-ink-muted);
    cursor: pointer;
    margin: 2px;
}

.fb-history-scope-toggle__tab.is-active[b-jgnwowfo2b] {
    background: var(--cx-surface);
    color: var(--cx-ink-strong);
    font-weight: 600;
    border-color: var(--cx-action-border);
}

.fb-history-filter-chips[b-jgnwowfo2b] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.fb-history-filter-chip[b-jgnwowfo2b] {
    appearance: none;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 500;
    color: var(--cx-ink-muted);
    background: transparent;
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-pill);
    cursor: pointer;
}

.fb-history-filter-chip.is-active[b-jgnwowfo2b] {
    color: var(--cx-action);
    background: var(--cx-action-soft);
    border-color: var(--cx-action-border);
}

.fb-history-density-toggle[b-jgnwowfo2b] {
    margin-top: 10px;
    display: flex;
}

.fb-history-density-toggle__button[b-jgnwowfo2b] {
    margin-left: auto;
    appearance: none;
    background: transparent;
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    padding: 3px 8px;
    font-size: 11.5px;
    color: var(--cx-ink-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.fb-history-density-toggle__button:hover[b-jgnwowfo2b] {
    color: var(--cx-ink-strong);
    background: var(--cx-surface-sunken);
}

.fb-history-body[b-jgnwowfo2b] {
    padding: 12px 16px 16px;
}

.fb-history-body__placeholder[b-jgnwowfo2b] {
    padding: 16px 4px;
    color: var(--cx-ink-muted);
    font-size: 12.5px;
}

.fb-history-body__placeholder--error[b-jgnwowfo2b] {
    color: var(--cx-error, oklch(55% 0.2 25));
}

.fb-history-body__events[b-jgnwowfo2b] {
    list-style: none;
    padding: 0;
    margin: 0;
}
/* /Features/ApplicationDefinitions/Builder/Drawer/HistoryEventRow.razor.rz.scp.css */
/* History drawer per-leaf event row — palette glyph chip (DiffMarker) + prose body + meta line.
   Matches the v6.9 canon history-drawer.jsx EventRow: 22px / 1fr grid, 18×18 chip, 12px prose at
   1.45 line-height, mono time · actor meta. The glyph chip itself is the shared .fb-diff-marker
   (bordered variant) styled in form-builder-diff.css, so the tint comes from the one palette. */

.fb-history-event[b-alht4q1kme] {
    display: grid;
    grid-template-columns: 22px 1fr;
    column-gap: 10px;
    padding: 7px 10px 7px 6px;
    margin: 4px 0;
    border-radius: var(--cx-radius-sm);
    list-style: none;
}

/* All-versions layout: glyph | version-chip | body | read-only */
.fb-history-event[data-has-version="1"][b-alht4q1kme] {
    grid-template-columns: 22px 50px 1fr auto;
    align-items: center;
    padding: 8px 10px;
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
}

.fb-history-version-chip[b-alht4q1kme] {
    font-family: var(--cx-font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--cx-ink-key);
    background: var(--cx-surface-sunken);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-xs);
    padding: 0 5px;
    height: 18px;
    line-height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    white-space: nowrap;
}

.fb-history-readonly[b-alht4q1kme] {
    font-family: var(--cx-font-mono);
    font-size: 10.5px;
    color: var(--cx-ink-faint);
    align-self: center;
    white-space: nowrap;
}

.fb-history-event:hover[b-alht4q1kme] {
    background: var(--cx-surface-raised, var(--cx-surface-sunken));
}

.fb-history-event__body[b-alht4q1kme] {
    min-width: 0;
}

.fb-history-event__summary[b-alht4q1kme] {
    font-size: 12px;
    color: var(--cx-ink-strong);
    line-height: 1.45;
}

/* The values-free descriptor that opens a rename / value-change line (e.g. "Field key"). */
.fb-history-event__descriptor[b-alht4q1kme] {
    margin-right: 2px;
}

/* Neutral before → after code chips (canon dCode): mono, sunken, bordered — the History
   drawer's transition treatment, distinct from the audit-log page's del/ins strikethrough. */
.fb-history-event__code[b-alht4q1kme] {
    font-family: var(--cx-font-mono);
    font-size: 11px;
    background: var(--cx-surface-sunken);
    border: 1px solid var(--cx-border);
    padding: 0 4px;
    border-radius: var(--cx-radius-xs);
    color: var(--cx-ink-strong);
    white-space: nowrap;
}

.fb-history-event__arrow[b-alht4q1kme] {
    color: var(--cx-ink-faint);
    margin: 0 3px;
}

.fb-history-event__meta[b-alht4q1kme] {
    font-size: 10.5px;
    color: var(--cx-ink-subtle);
    margin-top: 1px;
    font-family: var(--cx-font-mono);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
/* /Features/ApplicationDefinitions/Builder/Drawer/HistorySessionBlock.razor.rz.scp.css */
/* Collapsible session block + nested event list. */

.fb-history-session[b-t3tj99rlwo] {
    margin-bottom: 14px;
}

.fb-history-session__header[b-t3tj99rlwo] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--cx-surface-sunken);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    cursor: pointer;
    user-select: none;
}

.fb-history-session__chevron[b-t3tj99rlwo] {
    color: var(--cx-ink-subtle);
    display: inline-flex;
    transition: transform 100ms ease;
    transform: rotate(-90deg);
}

/* Canon pattern (fb.css:903) — state lives on the interactive parent
   (the session), child reacts via descendant selector. The chevron is
   visual decoration; the session is the stateful thing. */
.fb-history-session.is-open .fb-history-session__chevron[b-t3tj99rlwo] {
    transform: rotate(0deg);
}

.fb-history-session__range[b-t3tj99rlwo] {
    font-size: 11px;
    font-weight: 600;
    color: var(--cx-ink-strong);
    font-family: var(--cx-font-mono);
}

.fb-history-session__label[b-t3tj99rlwo] {
    flex: 1;
    font-size: 12px;
    color: var(--cx-ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fb-history-session__count[b-t3tj99rlwo] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--cx-action);
    background: var(--cx-action-soft);
    border: 1px solid var(--cx-action-border);
    padding: 0 7px;
    border-radius: var(--cx-radius-pill);
    font-family: var(--cx-font-mono);
}

.fb-history-session__events[b-t3tj99rlwo] {
    list-style: none;
    padding: 0 0 0 8px;
    margin: 4px 0 0 14px;
    border-left: 2px solid var(--cx-border-faint, var(--cx-border));
}
/* /Features/ApplicationDefinitions/Builder/Drawer/MetaCell.razor.rz.scp.css */
/* Label-over-value meta cell. Matches design canon's MetaItem. */

.fb-meta-cell[b-bxwr4r6878] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fb-meta-cell__label[b-bxwr4r6878] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cx-ink-subtle);
}

.fb-meta-cell__value[b-bxwr4r6878] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cx-ink-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fb-meta-cell__value--mono[b-bxwr4r6878] {
    font-family: var(--cx-font-mono);
}

.fb-meta-cell__sub[b-bxwr4r6878] {
    font-size: 10.5px;
    color: var(--cx-ink-subtle);
}
/* /Features/ApplicationDefinitions/Builder/Drawer/PublishDrawer.razor.rz.scp.css */
/* Publish drawer body — section stacking + in-flight note + diff
   placeholder + footer primary CTA. */

.fb-publish-section[b-94gui3tafa] {
    padding: 16px 18px;
}

.fb-publish-section + .fb-publish-section[b-94gui3tafa] {
    border-top: 1px solid var(--cx-border-faint, var(--cx-border));
}

.fb-publish-section__header[b-94gui3tafa] {
    margin-bottom: 10px;
}

.fb-publish-section__title[b-94gui3tafa] {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cx-ink-muted);
}

.fb-publish-section__placeholder[b-94gui3tafa] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--cx-surface-sunken);
    border: 1px dashed var(--cx-border);
    border-radius: var(--cx-radius-sm);
    color: var(--cx-ink-muted);
    font-size: 12px;
}

.fb-publish-section__placeholder p[b-94gui3tafa] {
    margin: 0;
}

.fb-publish-section__placeholder-title[b-94gui3tafa] {
    color: var(--cx-ink-strong);
    font-weight: 500;
    margin-bottom: 2px !important;
}

.fb-publish-section__placeholder-detail[b-94gui3tafa] {
    color: var(--cx-ink-muted);
}

.fb-publish-section__in-flight[b-94gui3tafa] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--cx-warning-soft, oklch(95% 0.04 80));
    border: 1px solid var(--cx-warning-border, oklch(85% 0.08 80));
    border-radius: var(--cx-radius-sm);
    color: var(--cx-ink-strong);
    font-size: 12.5px;
}

.fb-publish-section__in-flight p[b-94gui3tafa] {
    margin: 0;
}

.fb-publish-section__in-flight strong[b-94gui3tafa] {
    font-weight: 600;
    font-family: var(--cx-font-mono);
}

.fb-publish-section__in-flight-headline[b-94gui3tafa] {
    margin-bottom: 2px !important;
}

.fb-publish-section__in-flight-detail[b-94gui3tafa] {
    color: var(--cx-ink-muted);
    font-size: 11.5px;
}

/* Primary publish CTA — outcome-color discipline per design-system §7
   (the color the admin will see AFTER the action). Renders in
   status-published green when enabled, blocked-error treatment when
   structural errors block the transition. */
.fb-publish-primary[b-94gui3tafa] {
    background: var(--cx-status-published);
    color: var(--cx-ink-on-action);
    border-color: var(--cx-status-published);
    font-weight: 600;
}

.fb-publish-primary:hover:not(:disabled)[b-94gui3tafa] {
    background: var(--cx-status-published);
    filter: brightness(0.95);
}

.fb-publish-primary:disabled[b-94gui3tafa] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Phase 2 B2.6 (2026-05-27): .cc-btn.is-blocked cross-class override
 * removed — the .cc-btn.is-blocked variant now ships natively in
 * threshold-chrome.css per Phase 2 B1.1 backfill. The PublishButtonClass
 * logic in PublishDrawer.razor (line 177) already composes "cc-btn is-blocked"
 * for the blocked state; the shared atom handles the visual. */
/* /Features/ApplicationDefinitions/Builder/Drawer/SectionListItem.razor.rz.scp.css */
/* Single section row in the drawer's Sections section. Per design canon
   versions-drawer.jsx SectionRow: title + meta line + action buttons. */

.fb-section-row[b-9alya0lg1h] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    cursor: pointer;
    list-style: none;
    transition: border-color 120ms ease;
}

.fb-section-row:hover[b-9alya0lg1h] {
    border-color: var(--cx-action-border);
}

.fb-section-row[data-row-active="true"][b-9alya0lg1h] {
    border-color: var(--cx-action-border);
    background: var(--cx-action-soft);
}

.fb-section-row__title-block[b-9alya0lg1h] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fb-section-row__title[b-9alya0lg1h] {
    font-size: 13px;
    font-weight: 600;
    color: var(--cx-ink-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fb-section-row__meta[b-9alya0lg1h] {
    font-size: 11px;
    color: var(--cx-ink-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.fb-section-row__meta-fields[b-9alya0lg1h] {
    font-family: var(--cx-font-mono);
}

.fb-section-row__meta-sep[b-9alya0lg1h] {
    color: var(--cx-ink-faint, var(--cx-ink-subtle));
}

.fb-section-row__meta-rules[b-9alya0lg1h] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--cx-ink-muted);
    font-family: var(--cx-font-mono);
}

.fb-section-row__meta-rules--has-rules[b-9alya0lg1h] {
    color: var(--cx-rule, var(--cx-action));
}

.fb-section-row__actions[b-9alya0lg1h] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}

/* Phase 2 Part 2 Step 1b (B2.6.1, 2026-05-27): icon-button action rules
   removed. Buttons now consume .cc-btn + role variants (.is-ghost /
   .is-danger) + .is-sm density (canon v6.1 Group 5). The shared atoms
   handle hover/focus/disabled treatment. Small visual change accepted:
   icon-only buttons are slightly wider via .is-sm's 3px 8px padding
   compared to the prior 4px-all-around impl — readable, canon-faithful. */
/* /Features/ApplicationDefinitions/Builder/Drawer/VersionRow.razor.rz.scp.css */
/* Single version row in the Versions section. Layout per design canon
   versions-drawer.jsx VersionRow: top row (status pill + actions), meta
   strip (4-col grid), optional in-flight warning + supersession line. */

.fb-version-row[b-00q0gwfe75] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    cursor: pointer;
    list-style: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.fb-version-row:hover[b-00q0gwfe75] {
    border-color: var(--cx-action-border);
}

.fb-version-row.is-selected[b-00q0gwfe75] {
    border-color: var(--cx-action-border);
    box-shadow: inset 0 0 0 1px var(--cx-action-border);
}

.fb-version-row__top[b-00q0gwfe75] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.fb-version-row__editing-chip[b-00q0gwfe75] {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--cx-action);
    background: var(--cx-action-soft);
    border: 1px solid var(--cx-action-border);
    padding: 1px 7px;
    border-radius: var(--cx-radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.fb-version-row__spacer[b-00q0gwfe75] {
    flex: 1 1 auto;
}

.fb-version-row__actions[b-00q0gwfe75] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Phase 2 Part 2 Step 1b (B2.6.1, 2026-05-27): per-row action button
   rules removed. Buttons now consume .cc-btn + role variants
   (.is-ghost / .is-primary) + .is-sm density modifier (canon v6.1
   Group 5). The shared atoms handle all states (hover / focus /
   disabled / pressed) without per-drawer reimplementation. */

.fb-version-row__meta[b-00q0gwfe75] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding-top: 2px;
}

.fb-version-row__in-flight[b-00q0gwfe75] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    background: var(--cx-warning-soft, oklch(95% 0.04 80));
    border: 1px solid var(--cx-warning-border, oklch(85% 0.08 80));
    border-radius: var(--cx-radius-sm);
    font-size: 11.5px;
    color: var(--cx-ink-strong);
}

.fb-version-row__in-flight strong[b-00q0gwfe75] {
    font-weight: 600;
    font-family: var(--cx-font-mono);
}

.fb-version-row__in-flight-detail[b-00q0gwfe75] {
    color: var(--cx-ink-muted);
    margin-left: 4px;
}

.fb-version-row__supersession[b-00q0gwfe75] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--cx-ink-subtle);
}

.fb-version-row__supersession strong[b-00q0gwfe75] {
    color: var(--cx-ink-strong);
    font-weight: 600;
    font-family: var(--cx-font-mono);
}
/* /Features/ApplicationDefinitions/Builder/Drawer/VersionsDrawer.razor.rz.scp.css */
/* Versions drawer body styles — Versions section (rows + meta + actions)
   plus Sections section (list + add button + readonly notice). Per design
   canon's versions-drawer.jsx body layout. Each scoped CSS file owns only
   the markup unique to its component; cross-component primitives (Drawer,
   StatusPill, etc.) carry their own styles. */

.fb-versions-section[b-gkzqsdsvzx],
.fb-sections-section[b-gkzqsdsvzx] {
    padding: 16px 16px 8px;
}

.fb-sections-section[b-gkzqsdsvzx] {
    padding-bottom: 20px;
}

.fb-versions-section[b-gkzqsdsvzx] {
    border-bottom: 6px solid var(--cx-surface-sunken);
}

.fb-versions-section__header[b-gkzqsdsvzx],
.fb-sections-section__header[b-gkzqsdsvzx] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.fb-versions-section__title[b-gkzqsdsvzx],
.fb-sections-section__title[b-gkzqsdsvzx] {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cx-ink-muted);
}

.fb-versions-section__hint[b-gkzqsdsvzx],
.fb-sections-section__hint[b-gkzqsdsvzx] {
    font-size: 11px;
    color: var(--cx-ink-subtle);
    font-family: var(--cx-font-mono);
}

/* Phase 2 Part 2 Step 1b (B2.6.1, 2026-05-27): visual rules removed;
   button consumes .cc-btn.is-ghost.is-sm shared atoms (canon v6.1
   Group 5 ships .is-sm density modifier). The impl class survives as
   a positional helper only (margin-left: auto pushes the audit-log
   link to the section-header's right edge). */
.fb-versions-section__audit-log-link[b-gkzqsdsvzx] {
    margin-left: auto;
}

.fb-versions-section__placeholder[b-gkzqsdsvzx],
.fb-sections-section__placeholder[b-gkzqsdsvzx] {
    padding: 16px 4px;
    color: var(--cx-ink-muted);
    font-size: 12.5px;
}

.fb-versions-section__list[b-gkzqsdsvzx],
.fb-sections-section__list[b-gkzqsdsvzx] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Phase 2 Part 2 Step 1b (B2.6.1, 2026-05-27): visual rules removed;
   button consumes .cc-btn.is-primary.is-sm shared atoms. The impl
   class survives as a positional helper only (margin-left: auto pushes
   the Add-section button to the section-header's right edge). */
.fb-sections-section__add-button[b-gkzqsdsvzx] {
    margin-left: auto;
}

.fb-sections-section__readonly-notice[b-gkzqsdsvzx] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: var(--cx-surface-sunken);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    font-size: 11.5px;
    color: var(--cx-ink-muted);
    margin-bottom: 10px;
}
/* /Features/ApplicationDefinitions/Builder/EmptyAppDefOnRamp.razor.rz.scp.css */
/* Empty-AppDef on-ramp (form-builder §7.14 / §13.1). Ported from the design canon
 * empty-appdef.jsx — inline styles translated to scoped classes over the --cx-*
 * token layer. Every value references a token, so light + dark both resolve from
 * form-builder-tokens.css with no per-theme declarations here. */

.fb-empty-appdef[b-f5zjd119x6] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    background: var(--cx-canvas);
}

/* 860px column seats the canon's 4-up card row (Blank + three archetypes). */
.fb-empty-appdef__column[b-f5zjd119x6] {
    max-width: 860px;
    margin: 0 auto;
    padding: 64px 32px 80px;
}

/* ── Hint ──────────────────────────────────────────────────────────────── */
.fb-empty-appdef__hint[b-f5zjd119x6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 8px 0 32px;
    text-align: center;
}

.fb-empty-appdef__hint-glyph[b-f5zjd119x6] {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cx-surface-sunken);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-md);
    color: var(--cx-ink-subtle);
}

.fb-empty-appdef__hint-title[b-f5zjd119x6] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--cx-ink-strong);
    letter-spacing: -0.005em;
}

.fb-empty-appdef__hint-sub[b-f5zjd119x6] {
    margin: 0;
    max-width: 440px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--cx-ink-muted);
}

/* ── Templates ─────────────────────────────────────────────────────────── */
.fb-empty-appdef__eyebrow[b-f5zjd119x6] {
    margin-bottom: 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cx-ink-subtle);
}

.fb-empty-appdef__grid[b-f5zjd119x6] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

/* Desktop-first 4-up grid (canon). Collapse to 2-up when the column is squeezed
 * so the cards keep a usable width. */
@media (max-width: 720px) {
    .fb-empty-appdef__grid[b-f5zjd119x6] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Card ──────────────────────────────────────────────────────────────── */
.fb-empty-appdef__card[b-f5zjd119x6] {
    display: flex;
    flex-direction: column;
    padding: 0;
    text-align: left;
    font: inherit;
    color: inherit;
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    box-shadow: var(--cx-shadow-card);
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 100ms, border-color 100ms, opacity 100ms;
}

.fb-empty-appdef__card:not(:disabled):hover[b-f5zjd119x6] {
    border-color: var(--cx-action-border);
    box-shadow: 0 0 0 3px var(--cx-action-soft), var(--cx-shadow-elevated);
}

.fb-empty-appdef__card:not(:disabled):focus-visible[b-f5zjd119x6] {
    outline: 2px solid var(--cx-action);
    outline-offset: 1px;
}

/* §6 fade-with-context: deferred archetype cards stay visible but faded, with
 * the pointer killed and the body copy saying why. Cursor default (not
 * not-allowed) per canon — this isn't a blocked action, it's a not-yet-built one. */
.fb-empty-appdef__card:disabled[b-f5zjd119x6] {
    cursor: default;
}

.fb-empty-appdef__card.is-deferred[b-f5zjd119x6] {
    opacity: 0.6;
}

/* Blank card mid-create — dim slightly while the round-trip is in flight. */
.fb-empty-appdef__card[aria-busy="true"][b-f5zjd119x6] {
    opacity: 0.7;
}

.fb-empty-appdef__card-head[b-f5zjd119x6] {
    padding: 14px 14px 8px;
}

.fb-empty-appdef__card-eyebrow[b-f5zjd119x6] {
    margin-bottom: 5px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cx-ink-subtle);
}

.fb-empty-appdef__card-title[b-f5zjd119x6] {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cx-ink-strong);
}

.fb-empty-appdef__card-desc[b-f5zjd119x6] {
    margin: 4px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--cx-ink-muted);
}

.fb-empty-appdef__card-body[b-f5zjd119x6] {
    flex: 1;
    margin-top: 6px;
    padding: 10px 14px 12px;
    background: var(--cx-surface-sunken);
    border-top: 1px solid var(--cx-border-faint);
    transition: background 100ms;
}

.fb-empty-appdef__card:not(:disabled):hover .fb-empty-appdef__card-body[b-f5zjd119x6] {
    background: var(--cx-action-soft);
}

/* Blank card resting body. */
.fb-empty-appdef__card-empty[b-f5zjd119x6] {
    padding: 14px 0;
    text-align: center;
    font-family: var(--cx-font-mono);
    font-size: 11px;
    color: var(--cx-ink-faint);
}

/* Deferred archetype body — honest "not authored yet" placeholder (no fake
 * section list or counts). */
.fb-empty-appdef__card-deferred[b-f5zjd119x6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 12px 0 10px;
    text-align: center;
}

.fb-empty-appdef__card-deferred-title[b-f5zjd119x6] {
    font-family: var(--cx-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--cx-ink-muted);
}

.fb-empty-appdef__card-deferred-sub[b-f5zjd119x6] {
    font-size: 10.5px;
    line-height: 1.45;
    color: var(--cx-ink-subtle);
}

/* ── Footnote ──────────────────────────────────────────────────────────── */
.fb-empty-appdef__footnote[b-f5zjd119x6] {
    margin-top: 24px;
    text-align: center;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--cx-ink-subtle);
}
/* /Features/ApplicationDefinitions/Builder/FormBuilderPage.razor.rz.scp.css */
/* Step-1 body placeholders. Centered card on the canvas surface. Each placeholder uses
 * the same chrome so the visual register stays consistent across modes. The bodies
 * themselves (canvas, palette, properties, empty-state cards) land in later steps;
 * these are explicitly stubs. */

.fb-builder-placeholder[b-eiw95t7mfp] {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--cx-space-7);
}

.fb-builder-placeholder__card[b-eiw95t7mfp] {
    max-width: 480px;
    width: 100%;
    padding: var(--cx-space-7);
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-md);
    box-shadow: var(--cx-shadow-card);
    text-align: center;
}

.fb-builder-placeholder__card h2[b-eiw95t7mfp] {
    margin: 0 0 var(--cx-space-4);
    font-size: 16px;
    font-weight: 600;
    color: var(--cx-ink-strong);
    letter-spacing: -0.005em;
}

.fb-builder-placeholder__card p[b-eiw95t7mfp] {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--cx-ink-muted);
}

.fb-builder-placeholder__card p + p[b-eiw95t7mfp] {
    margin-top: var(--cx-space-4);
}

.fb-builder-placeholder__retry[b-eiw95t7mfp] {
    appearance: none;
    margin-top: var(--cx-space-5);
    padding: 6px var(--cx-space-5);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cx-ink-on-action);
    background: var(--cx-action);
    border: 1px solid var(--cx-action);
    border-radius: var(--cx-radius-sm);
    cursor: pointer;
}

.fb-builder-placeholder__retry:hover[b-eiw95t7mfp] {
    background: var(--cx-action-hover);
    border-color: var(--cx-action-hover);
}

.fb-builder-placeholder__retry:focus-visible[b-eiw95t7mfp] {
    outline: 2px solid var(--cx-action);
    outline-offset: 1px;
}
/* /Features/ApplicationDefinitions/Builder/Palette/PaletteFooterHint.razor.rz.scp.css */
/* Hint card visual treatment ported from canon palette.jsx (the dashed-
 * border card at the bottom of the palette body). Sunken surface so it
 * reads as instruction-not-affordance against the white card surface
 * the palette items render on. */

.fb-palette-footer-hint[b-sb84lvwwuu] {
    margin-top: 14px;
    padding: 10px 10px 11px;
    background: var(--cx-surface-sunken);
    border: 1px dashed var(--cx-border-dashed);
    border-radius: var(--cx-radius-sm);
    color: var(--cx-ink-muted);
    font-size: 11.5px;
    line-height: 1.45;
}

.fb-palette-footer-hint__head[b-sb84lvwwuu] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    color: var(--cx-ink-strong);
    font-weight: 600;
}

.fb-palette-footer-hint__body[b-sb84lvwwuu] {
    margin: 0;
    color: var(--cx-ink-muted);
}

.fb-palette-footer-hint__kbd[b-sb84lvwwuu] {
    font-family: var(--th-font-mono);
    font-size: 10.5px;
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
    border-radius: 3px;
    padding: 0 4px;
    color: var(--cx-ink-strong);
    line-height: 1.4;
}
/* /Features/ApplicationDefinitions/Builder/Palette/PaletteGroup.razor.rz.scp.css */
.fb-palette-group[b-p79pa48afg] {
    margin-top: 12px;
}

/* Collapsed rail — tighter inter-group gap since the uppercase label is gone
 * (palette.jsx: marginTop 6 when collapsed). */
.fb-palette-group.is-collapsed[b-p79pa48afg] {
    margin-top: 6px;
}

.fb-palette-group__title[b-p79pa48afg] {
    padding: 6px 4px;
    font-family: var(--cx-font-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cx-ink-subtle);
}

.fb-palette-group__items[b-p79pa48afg] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* /Features/ApplicationDefinitions/Builder/Palette/PaletteItem.razor.rz.scp.css */
/* Palette item — draggable button. Visual treatment from palette.jsx:
 * faint drag handle (visible on hover), icon tile (24×24, sunken bg →
 * surface on hover), label + hint stacked.
 */

.fb-palette-item[b-8rotfta50u] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--cx-radius-sm);
    text-align: left;
    cursor: grab;
    transition: background 100ms, border-color 100ms;
}

.fb-palette-item:hover[b-8rotfta50u] {
    background: var(--cx-action-soft);
    border-color: var(--cx-action-border);
}

.fb-palette-item:active[b-8rotfta50u] {
    cursor: grabbing;
}

.fb-palette-item:focus-visible[b-8rotfta50u] {
    outline: 2px solid var(--cx-action);
    outline-offset: 1px;
}

.fb-palette-item__drag[b-8rotfta50u] {
    width: 10px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    margin-left: -2px;
    transition: color 100ms;
}

.fb-palette-item:hover .fb-palette-item__drag[b-8rotfta50u],
.fb-palette-item:focus-visible .fb-palette-item__drag[b-8rotfta50u] {
    color: var(--cx-ink-subtle);
}

.fb-palette-item__tile[b-8rotfta50u] {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cx-surface-sunken);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-xs);
    color: var(--cx-ink-muted);
    transition: background 100ms, color 100ms;
}

.fb-palette-item:hover .fb-palette-item__tile[b-8rotfta50u] {
    background: var(--cx-surface);
    color: var(--cx-action);
}

.fb-palette-item__text[b-8rotfta50u] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.fb-palette-item__label[b-8rotfta50u] {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--cx-ink-strong);
}

.fb-palette-item__hint[b-8rotfta50u] {
    font-size: 11px;
    color: var(--cx-ink-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Collapsed rail item (palette.jsx collapsed PaletteItem) — a bare 36×36
 * centered icon button. No tile frame, no label/hint, no drag glyph; the icon
 * inherits the button color via currentColor. Drag + keyboard activation stay
 * live (the handlers are on the button regardless of layout). */
.fb-palette-item.is-collapsed[b-8rotfta50u] {
    width: 36px;
    height: 36px;
    align-self: center;
    justify-content: center;
    gap: 0;
    padding: 0;
    color: var(--cx-ink-muted);
}

.fb-palette-item.is-collapsed:hover[b-8rotfta50u] {
    background: var(--cx-action-soft);
    border-color: transparent;
    color: var(--cx-action);
}
/* /Features/ApplicationDefinitions/Builder/Palette/PaletteRail.razor.rz.scp.css */
/* Palette rail — leftmost pane in the canvas-area row. Fixed 240px width
 * per palette.jsx. Right border separates from canvas; sunken-surface bg
 * matches the design's chrome tone. */

.fb-palette-rail[b-wmya13il5j] {
    width: 240px;
    flex: 0 0 240px;
    background: var(--cx-surface);
    border-right: 1px solid var(--cx-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    transition: width 160ms ease;
}

/* Collapsed to a 44px icon rail (§3.6 / palette.jsx). The canvas-host's flex:1
 * reclaims the freed 196px automatically. Sunken-rail surface tone distinguishes
 * the collapsed rail from the expanded card surface. */
.fb-palette-rail.is-collapsed[b-wmya13il5j] {
    width: 44px;
    flex: 0 0 44px;
    background: var(--cx-surface-rail);
}

.fb-palette-rail__header[b-wmya13il5j] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--cx-border);
    min-height: 44px;
}

.fb-palette-rail__header.is-collapsed[b-wmya13il5j] {
    justify-content: center;
    padding: 10px 8px;
}

.fb-palette-rail.is-collapsed .fb-palette-rail__body[b-wmya13il5j] {
    padding: 4px 4px 12px;
}

.fb-palette-rail__title[b-wmya13il5j] {
    font-family: var(--cx-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cx-ink-subtle);
    flex: 1;
}

.fb-palette-rail__body[b-wmya13il5j] {
    overflow-y: auto;
    flex: 1;
    padding: 4px 8px 16px;
    min-height: 0;
}

/* §3.4 — search well (palette.jsx). Sunken pill with a left-inset search icon,
 * a borderless transparent input, and a '/' kbd hint on the right. */
.fb-palette-rail__search-wrap[b-wmya13il5j] {
    padding: 8px 12px 4px;
}

.fb-palette-rail__search[b-wmya13il5j] {
    position: relative;
    display: flex;
    align-items: center;
    padding: 5px 8px 5px 26px;
    background: var(--cx-surface-sunken);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
}

.fb-palette-rail__search-icon[b-wmya13il5j] {
    position: absolute;
    left: 8px;
    display: inline-flex;
    align-items: center;
    color: var(--cx-ink-subtle);
}

.fb-palette-rail__search-input[b-wmya13il5j] {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--cx-ink);
    font-size: 12.5px;
    outline: none;
}

/* Strip the native search-field clear affordance — the well owns its chrome. */
.fb-palette-rail__search-input[b-wmya13il5j]::-webkit-search-cancel-button {
    appearance: none;
}

.fb-palette-rail__search-kbd[b-wmya13il5j] {
    flex: 0 0 auto;
    margin-left: 6px;
    font-family: var(--cx-font-mono);
    font-size: 10.5px;
    color: var(--cx-ink-subtle);
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
    border-radius: 3px;
    padding: 1px 4px;
}

/* No-match line — muted, sits where the groups would be. */
.fb-palette-rail__empty[b-wmya13il5j] {
    padding: 12px 8px;
    color: var(--cx-ink-subtle);
    font-size: 11.5px;
}
/* /Features/ApplicationDefinitions/Builder/Properties/Bodies/AppDefMetadataBody.razor.rz.scp.css */
/* AppDef metadata body — form-builder spec §4.1 (AppDef root selection).
 *
 * Stack of grouped rows. Each group is padded horizontally + has bottom
 * border separators; inputs full-width. Mirrors the rules-editor's right-
 * pane group shape (one stacked layout per body), but the form-builder
 * uses its own --cx-* tokens.
 */

.fb-appdef-metadata-body[b-m2pqftm339] {
    display: flex;
    flex-direction: column;
}

.fb-appdef-metadata-body__group[b-m2pqftm339] {
    padding: var(--cx-space-5) var(--cx-space-6);
    border-bottom: 1px solid var(--cx-border-faint);
    display: flex;
    flex-direction: column;
    gap: var(--cx-space-3);
}

.fb-appdef-metadata-body__group:last-child[b-m2pqftm339] {
    border-bottom: none;
}

.fb-appdef-metadata-body__row[b-m2pqftm339] {
    display: flex;
    align-items: baseline;
    gap: var(--cx-space-5);
}

.fb-appdef-metadata-body__label[b-m2pqftm339] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--cx-ink-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0;
    min-width: 90px;
}

.fb-appdef-metadata-body__readonly[b-m2pqftm339] {
    font-size: 13px;
    color: var(--cx-ink);
    line-height: 1.4;
    word-break: break-word;
}

.fb-appdef-metadata-body__textarea[b-m2pqftm339] {
    width: 100%;
    box-sizing: border-box;
    padding: var(--cx-space-4) var(--cx-space-5);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    background: var(--cx-surface-raised);
    color: var(--cx-ink);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
    min-height: 60px;
}

.fb-appdef-metadata-body__textarea:focus[b-m2pqftm339] {
    outline: none;
    border-color: var(--cx-action);
    box-shadow: 0 0 0 3px var(--cx-action-soft);
}

.fb-appdef-metadata-body__textarea:disabled[b-m2pqftm339] {
    background: var(--cx-surface-disabled);
    color: var(--cx-ink-muted);
    cursor: not-allowed;
}

.fb-appdef-metadata-body__textarea--mono[b-m2pqftm339] {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
}

.fb-appdef-metadata-body__hint[b-m2pqftm339] {
    margin: 0;
    font-size: 11.5px;
    color: var(--cx-ink-subtle);
    line-height: 1.4;
}
/* /Features/ApplicationDefinitions/Builder/Properties/PropertiesPanel.razor.rz.scp.css */
/* Properties panel — the builder shell's right rail (form-builder spec §4).
 *
 * Sits to the right of the canvas-host inside .fb-builder-canvas-area__body,
 * mirroring the palette rail on the left. Fixed-width column, full body
 * height, scrollable body region.
 *
 * Width: 340px matches the design handoff's properties-deep.jsx aside width.
 * Background: --cx-surface (same as the rules-editor's right pane); border-left
 * separates from the canvas. The body scrolls; the header stays pinned.
 *
 * Collapsed (§4.18) swaps the whole panel for the 44px .fb-prop-rail below —
 * symmetric with the palette's collapsed rail on the left.
 */

.fb-properties-panel[b-my09lqss3a] {
    flex: 0 0 340px;
    width: 340px;
    display: flex;
    flex-direction: column;
    background: var(--cx-surface);
    border-left: 1px solid var(--cx-border);
    min-height: 0;
    overflow: hidden;
}

.fb-properties-panel__header[b-my09lqss3a] {
    display: flex;
    align-items: center;
    gap: var(--cx-space-4);
    padding: var(--cx-space-5) var(--cx-space-6);
    border-bottom: 1px solid var(--cx-border);
    /* Audit: header background flush --cx-surface, not raised. */
    background: var(--cx-surface);
}

/* Title block — eyebrow over title, flex-1 so it consumes the middle
 * column between the leading KindGlyph and trailing IconButton(s). */
.fb-properties-panel__title-block[b-my09lqss3a] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.fb-properties-panel__eyebrow[b-my09lqss3a] {
    display: block;
    font-family: var(--cx-font-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cx-ink-subtle);
    line-height: 1.2;
}

.fb-properties-panel__title[b-my09lqss3a] {
    margin: 4px 0 0;
    /* Audit: title 13.5px (was 15px). */
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cx-ink-strong);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fb-properties-panel__body[b-my09lqss3a] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--cx-space-5) 0 var(--cx-space-7);
}

.fb-properties-panel__placeholder[b-my09lqss3a] {
    padding: var(--cx-space-6);
    color: var(--cx-ink-muted);
    font-size: 13px;
    line-height: 1.5;
}

.fb-properties-panel__placeholder p[b-my09lqss3a] {
    margin: 0;
}

/* Read-only mode (PublishedReadOnly mode) — visual hint that nothing here
 * commits writes. Bodies render their inputs as disabled; the chrome dims
 * a hair so the read-only state is obvious before the admin starts typing. */
.fb-properties-panel[data-cx-readonly="true"] .fb-properties-panel__title[b-my09lqss3a] {
    color: var(--cx-ink-muted);
}

/* §4.18 — collapsed icon rail (properties-deep.jsx). 44px column mirroring the
 * palette's collapsed rail; expand toggle + one icon shortcut per section the
 * expanded body carries for this selection. */
.fb-prop-rail[b-my09lqss3a] {
    flex: 0 0 44px;
    width: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 0;
    background: var(--cx-surface-rail);
    border-left: 1px solid var(--cx-border);
    min-height: 0;
}

.fb-prop-rail__btn[b-my09lqss3a] {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: var(--cx-radius-sm);
    color: var(--cx-ink-muted);
    cursor: pointer;
    transition: background 100ms, color 100ms;
}

.fb-prop-rail__btn:hover[b-my09lqss3a] {
    background: var(--cx-action-soft);
    color: var(--cx-action);
}

/* Dependencies shortcut — the watch-item, tinted warning per canon. */
.fb-prop-rail__btn.is-warning[b-my09lqss3a] {
    color: var(--cx-warning);
}

.fb-prop-rail__btn:focus-visible[b-my09lqss3a] {
    outline: 2px solid var(--cx-action);
    outline-offset: 1px;
}
/* /Features/ApplicationDefinitions/Builder/UndoToastHost.razor.rz.scp.css */
/* Undo toast — §14.7 / canon .fb-row-undo-toast family (handoff fb.css).
 *
 * Theme-invariant DARK snackbar: the background is pinned dark and the text /
 * accents are pinned light in BOTH light and dark mode. The canon authored the
 * bg/text against --cx-ink-strong / --cx-surface (which assumes light-mode values
 * and would invert in dark mode while the rgba(255,255,255,…) inner accents do
 * not), so this pins them — same theme-invariant treatment ADR-0035 §16.4 gives
 * the cross-tenant / impersonation banners. Ambient, bottom-center, no scrim. */

.fb-row-undo-toast[b-m1oh1cw5q9] {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 92;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px 10px 14px;
    min-width: 340px;
    max-width: 520px;
    background: #1a1a1f;
    color: #fff;
    border-radius: var(--cx-radius-sm, 6px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .22), 0 2px 6px rgba(0, 0, 0, .10);
    font-family: var(--th-f-sans);
    animation: fb-row-undo-toast-in-b-m1oh1cw5q9 180ms cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes fb-row-undo-toast-in-b-m1oh1cw5q9 {
    from { opacity: 0; transform: translate(-50%, 6px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

.fb-row-undo-toast-ico[b-m1oh1cw5q9] {
    width: 22px;
    height: 22px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .10);
    border-radius: var(--cx-radius-xs, 4px);
    color: rgba(255, 255, 255, .85);
}

.fb-row-undo-toast-text[b-m1oh1cw5q9] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.2;
    min-width: 0;
}

.fb-row-undo-toast-headline[b-m1oh1cw5q9] {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.fb-row-undo-toast-meta[b-m1oh1cw5q9] {
    font-family: var(--th-f-mono);
    font-size: 10.5px;
    color: rgba(255, 255, 255, .65);
    display: flex;
    gap: 6px;
    align-items: baseline;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fb-row-undo-toast-meta .label[b-m1oh1cw5q9] {
    color: rgba(255, 255, 255, .85);
    font-family: var(--th-f-sans);
    font-size: 11.5px;
    font-style: italic;
}

.fb-row-undo-toast-meta .sep[b-m1oh1cw5q9] {
    opacity: 0.5;
}

.fb-row-undo-toast-action[b-m1oh1cw5q9] {
    margin-left: auto;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .20);
    color: #fff;
    border-radius: var(--cx-radius-xs, 4px);
    font-family: var(--th-f-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 6px 12px;
    cursor: pointer;
    transition: background 120ms, border-color 120ms;
}

.fb-row-undo-toast-action:hover[b-m1oh1cw5q9] {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .35);
}

.fb-row-undo-toast-action:focus-visible[b-m1oh1cw5q9] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .30);
}

.fb-row-undo-toast-kbd[b-m1oh1cw5q9] {
    margin-left: 8px;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .18);
    font-family: var(--th-f-mono);
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, .80);
}
/* /Features/ApplicationDefinitions/Builder/_shared/Diff/Harness/DiffHarnessPage.razor.rz.scp.css */
/* Dev harness chrome only — the row family itself styles via form-builder-diff.css. */
.fb-diff-harness[b-av0a89sx63] {
    padding: 20px 24px 48px;
    background: var(--cx-canvas);
    min-height: 100%;
}

.fb-diff-harness__toolbar[b-av0a89sx63] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.fb-diff-harness__title[b-av0a89sx63] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cx-ink-subtle);
    margin-right: 6px;
}

.fb-diff-harness__btn[b-av0a89sx63] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--cx-ink-muted);
    background: var(--cx-surface-sunken);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    cursor: pointer;
}

.fb-diff-harness__btn[data-active="True"][b-av0a89sx63] {
    color: var(--cx-action);
    background: var(--cx-action-soft);
    border-color: var(--cx-action-border);
    font-weight: 600;
}

.fb-diff-harness__panel[b-av0a89sx63] {
    max-width: 680px;
    padding: 4px 18px 18px;
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-md, 8px);
}

.fb-diff-harness__unavailable[b-av0a89sx63] {
    padding: 40px;
    color: var(--cx-ink-muted);
    font-size: 13px;
}
/* /Features/ApplicationDefinitions/Builder/_shared/ErrorChip.razor.rz.scp.css */
/* Inline-cell error chip — form-builder spec §9.4. The chip is a thin wrapper
 * around SeverityPill that carries the full-message title attribute. No own
 * visual treatment; the SeverityPill inside owns the visual register.
 *
 * The wrapping span exists so the title attribute attaches to a stable element
 * the consumer can grab via data-testid for assertions and Playwright hovers,
 * and so future affordances (count badge, action menu) can layer on without
 * destabilising the chip's API surface.
 */

.fb-error-chip[b-x8ixgsazbt] {
    display: inline-flex;
    align-items: center;
}
/* /Features/ApplicationDefinitions/Builder/_shared/ErrorRow.razor.rz.scp.css */
/* Summary-footer / impact-preview row — form-builder spec §9.5.
 *
 * Four-column grid: severity dot · label+detail · location breadcrumb · jump-to chevron.
 * Severity drives the background fill (BlockSave = red-soft; BlockPublish = surface);
 * both variants share --cx-error-border + --cx-error label color.
 */

.fb-error-row[b-jylhh8h9nm] {
    display: grid;
    grid-template-columns: 14px 1fr auto auto;
    column-gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--cx-error-border);
    border-radius: var(--cx-radius-sm);
    margin-top: 4px;
}

.fb-error-row[data-severity="block-save"][b-jylhh8h9nm] {
    background: var(--cx-error-soft);
}

.fb-error-row[data-severity="block-publish"][b-jylhh8h9nm] {
    background: var(--cx-surface);
}

/* Severity dot — fills for BlockSave, outlines for BlockPublish.
 * Matches the SeverityPill dot shape verbatim. */
.fb-error-row__dot[b-jylhh8h9nm] {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.fb-error-row[data-severity="block-save"] .fb-error-row__dot[b-jylhh8h9nm] {
    background: var(--cx-error-soft);
    border: 1.5px solid var(--cx-error-border);
}

.fb-error-row[data-severity="block-publish"] .fb-error-row__dot[b-jylhh8h9nm] {
    background: transparent;
    border: 1.5px solid var(--cx-error-border);
}

/* Label + detail block. min-width:0 lets the grid track shrink instead of
 * forcing horizontal scroll on long details. */
.fb-error-row__copy[b-jylhh8h9nm] {
    min-width: 0;
}

.fb-error-row__label[b-jylhh8h9nm] {
    font-size: 12px;
    font-weight: 600;
    color: var(--cx-error);
}

.fb-error-row__detail[b-jylhh8h9nm] {
    font-size: 11px;
    color: var(--cx-ink-strong);
    margin-top: 1px;
    line-height: 1.45;
}

/* Location breadcrumb — right-aligned, mono. */
.fb-error-row__where[b-jylhh8h9nm] {
    font-size: 11px;
    color: var(--cx-ink-muted);
    font-family: var(--cx-font-mono);
    white-space: nowrap;
}

/* Jump-to chevron — 24x24 surface button. */
.fb-error-row__jump[b-jylhh8h9nm] {
    width: 24px;
    height: 24px;
    border: 1px solid var(--cx-border);
    background: var(--cx-surface);
    color: var(--cx-ink-muted);
    border-radius: var(--cx-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.fb-error-row__jump:hover[b-jylhh8h9nm] {
    color: var(--cx-ink-strong);
    border-color: var(--cx-border-strong);
}

.fb-error-row__jump:focus-visible[b-jylhh8h9nm] {
    outline: 2px solid var(--cx-action);
    outline-offset: 1px;
}
/* /Features/ApplicationDefinitions/Builder/_shared/FieldRow.razor.rz.scp.css */
/* Properties-panel field row — properties-deep.jsx:186-198. Numbers locked
 * to the design: row margin-top 8, head gap 6 + margin-bottom 4, label
 * 12px / weight 500 / --cx-ink / text-transform none / letter-spacing
 * normal (correcting the shipped uppercase-letterspaced 11px treatment),
 * hint 11px / --cx-ink-subtle baseline-aligned with label,
 * helper/error 11px / margin-top 4 (error: --cx-error). */

.fb-field-row[b-2ls263qfp1] {
    margin-top: 8px;
}

.fb-field-row:first-child[b-2ls263qfp1] {
    margin-top: 0;
}

.fb-field-row__head[b-2ls263qfp1] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
}

.fb-field-row__label[b-2ls263qfp1] {
    /* Override --cx-properties-body__label's uppercase-letterspaced legacy:
     * sentence-case 12px weight 500 --cx-ink per design. */
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--cx-ink);
    text-transform: none;
    letter-spacing: normal;
    cursor: default;
}

.fb-field-row__hint[b-2ls263qfp1] {
    font-size: 11px;
    color: var(--cx-ink-subtle);
}

.fb-field-row__disabled-reason[b-2ls263qfp1] {
    margin-left: auto;
    padding: 1px 6px;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--cx-ink-subtle);
    background: var(--cx-surface-sunken);
    border: 1px solid var(--cx-border-faint);
    border-radius: var(--cx-radius-pill);
}

.fb-field-row__body[b-2ls263qfp1] {
    /* The body is just a passthrough container — no opinion on padding /
     * margin / display so consumers can put inputs / chips / segmented
     * groups / RenderFragments here without fighting wrapper styles. */
}

.fb-field-row--disabled .fb-field-row__body[b-2ls263qfp1] {
    opacity: 0.5;
}

.fb-field-row__helper[b-2ls263qfp1] {
    margin-top: 4px;
    font-size: 11px;
    color: var(--cx-ink-subtle);
}

.fb-field-row__error[b-2ls263qfp1] {
    margin-top: 4px;
    font-size: 11px;
    color: var(--cx-error);
}
/* /Features/ApplicationDefinitions/Builder/_shared/FieldRowPair.razor.rz.scp.css */
/* Two-column grid wrapping a Min/Max FieldRow pair. The pair itself takes
 * the same vertical rhythm as a single row, so the wrapper's margin-top
 * matches FieldRow's. Child FieldRows reset their own first-child
 * margin-top via the existing rule. */

.fb-field-row-pair[b-iqavezhznb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

/* Cancel child FieldRow margins so the pair owns the rhythm.
 * ::deep is required: FieldRow is a separate component with its own
 * scoped-CSS attribute, so a plain ".fb-field-row" selector here would
 * never match (Blazor would compile to .fb-field-row[b-pair-scope] but
 * the child carries .fb-field-row[b-row-scope]). ::deep descends through
 * the component boundary. */
[b-iqavezhznb] .fb-field-row {
    margin-top: 0;
}
/* /Features/ApplicationDefinitions/Builder/_shared/InlineRename.razor.rz.scp.css */
/* Inline rename primitive — see InlineRename.razor for the contract. The
 * surface-styling (heading size, key-chip mono font, etc.) lives on the
 * caller's chrome class, not here; this file styles only the rename-specific
 * states (focus ring, error message, placeholder ink).
 */

.fb-inline-rename[b-6f5z7qkv3u] {
    /* The display variant inherits the caller's chrome (heading, chip, …).
     * No background / padding here — the caller's chrome class owns layout. */
    cursor: text;
    outline: none;
}

.fb-inline-rename[data-locked="true"][b-6f5z7qkv3u] {
    /* Locked display surface — render as static text, no edit affordance. */
    cursor: default;
}

.fb-inline-rename--display:focus-visible[b-6f5z7qkv3u] {
    /* When the display surface holds keyboard focus, surface a focus ring so
     * F2 / Enter to engage edit mode has an affordance. The ring is the
     * accent token so it matches the design system's selection-on-focus
     * treatment. */
    outline: 2px solid var(--cx-action);
    outline-offset: 2px;
    border-radius: var(--cx-radius-xs);
}

.fb-inline-rename--input[b-6f5z7qkv3u] {
    /* The input borrows the caller's chrome (font-size, font-family, color),
     * then layers on a minimal edit affordance: a thin border + a soft
     * background so the editable area is unambiguous without dominating the
     * surrounding chrome. */
    background: var(--cx-surface-raised);
    border: 1px solid var(--cx-action-border);
    border-radius: var(--cx-radius-xs);
    padding: 1px 4px;
    color: inherit;
    font: inherit;
    line-height: inherit;
    outline: none;
    box-shadow: var(--cx-shadow-selection);
    /* Don't constrain width — the caller's chrome decides whether this is
     * 100% of a row (display-text) or chip-sized (key chip). */
}

.fb-inline-rename--input[aria-invalid="true"][b-6f5z7qkv3u] {
    border-color: var(--cx-error-border);
    box-shadow: 0 0 0 1.5px var(--cx-error);
}

.fb-inline-rename__placeholder[b-6f5z7qkv3u] {
    color: var(--cx-ink-faint);
    font-style: italic;
}

.fb-inline-rename__error[b-6f5z7qkv3u] {
    display: inline-block;
    margin-left: var(--cx-space-4);
    color: var(--cx-error);
    font-size: 11px;
    font-weight: 500;
}
/* /Features/ApplicationDefinitions/Builder/_shared/KeyChip.razor.rz.scp.css */
.fb-key-chip[b-rifchp6ddx] {
    font-family: var(--cx-font-mono);
    font-size: 11px;
    color: var(--cx-ink-key);
    background: var(--cx-surface-sunken);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-xs);
    padding: 0 5px;
    height: 16px;
    line-height: 15px;
    display: inline-flex;
    align-items: center;
    gap: var(--cx-space-2);
}

/* Editable variant — the chip wraps an InlineRename. The chip's chrome
 * (font, color, padding) cascades into the inner input via the
 * InlineRename's ChromeClass="fb-key-chip__input" + font:inherit /
 * color:inherit / line-height:inherit on the input rule. */
.fb-key-chip--editable[b-rifchp6ddx] {
    cursor: text;
}

.fb-key-chip__input[b-rifchp6ddx] {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    line-height: inherit;
    height: auto;
    padding: 0;
}

/* Locked variant — ADR-0018 / spec §3.3. Slightly dimmed text, lock icon
 * inline. Click fires the toast hint; cursor signals not-editable. */
.fb-key-chip--locked[b-rifchp6ddx] {
    cursor: help;
    color: var(--cx-ink-subtle);
}

.fb-key-chip--locked:hover[b-rifchp6ddx] {
    background: var(--cx-surface-disabled);
    border-color: var(--cx-border-strong);
}
/* /Features/ApplicationDefinitions/Builder/_shared/KindGlyph.razor.rz.scp.css */
/* 28×28 tinted-icon square — properties-deep.jsx header glyph treatment.
 * action-soft bg + action-border + action icon color. Square corners are
 * rounded via --cx-radius-sm for visual softness; the glyph is centered
 * via inline-flex. */

.fb-kind-glyph[b-u4xu0a7g2r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: var(--cx-action-soft);
    border: 1px solid var(--cx-action-border);
    border-radius: var(--cx-radius-sm);
    color: var(--cx-action);
}
/* /Features/ApplicationDefinitions/Builder/_shared/Pill.razor.rz.scp.css */
/* Inline rounded-pill primitive — component-separation.md §15.
 * Default size: padding 1px 8px / fontSize 11px / radius pill.
 * Compact size: padding 0 6px / fontSize 10.5px.
 * Variants tint bg + border + color via [data-variant].
 */

.fb-pill[b-tifs2knwun] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: var(--cx-radius-pill);
    line-height: 1.4;
    white-space: nowrap;
}

.fb-pill[data-size="compact"][b-tifs2knwun] {
    padding: 0 6px;
    font-size: 10.5px;
}

/* Default — neutral surface-sunken with a faint border. */
.fb-pill[data-variant="default"][b-tifs2knwun] {
    background: var(--cx-surface-sunken);
    border-color: var(--cx-border-faint);
    color: var(--cx-ink-muted);
}

/* Muted — softer than default; sits next to inputs without competing. */
.fb-pill[data-variant="muted"][b-tifs2knwun] {
    background: transparent;
    border-color: var(--cx-border-faint);
    color: var(--cx-ink-subtle);
}

/* Info — action palette (selected scope, current state). */
.fb-pill[data-variant="info"][b-tifs2knwun] {
    background: var(--cx-action-soft);
    border-color: var(--cx-action-border);
    color: var(--cx-action);
}

/* Warning — yellow palette for "may break" surfaces. */
.fb-pill[data-variant="warning"][b-tifs2knwun] {
    background: var(--cx-warning-soft);
    border-color: var(--cx-warning-border);
    color: var(--cx-warning);
}

/* Error — red palette for failure surfaces. */
.fb-pill[data-variant="error"][b-tifs2knwun] {
    background: var(--cx-error-soft);
    border-color: var(--cx-error-border);
    color: var(--cx-error);
}

/* Success — green palette for confirmed surfaces. */
.fb-pill[data-variant="success"][b-tifs2knwun] {
    background: var(--cx-success-soft);
    border-color: var(--cx-success-border);
    color: var(--cx-success);
}

/* Rule — purple palette for rule-reference surfaces. */
.fb-pill[data-variant="rule"][b-tifs2knwun] {
    background: var(--cx-rule-soft);
    border-color: var(--cx-rule-border);
    color: var(--cx-rule);
}
/* /Features/ApplicationDefinitions/Builder/_shared/PropSection.razor.rz.scp.css */
/* Collapsible properties-panel section — properties-deep.jsx:138-184.
 * Numbers locked to the design's PropSection: header padding 12/14/8, headline
 * variant 14/14/8 + surface bg; title 10.5/11.5 weight 700 letterspacing .08em
 * uppercase; chevron ink-subtle rotates -90deg when closed, 100ms; body padding
 * 2/14/14. The button reset (background, border, padding) is required because
 * the header is <button> for keyboard activation, not <div>. */

.fb-prop-section[b-a56bsggubj] {
    border-bottom: 1px solid var(--cx-border-faint);
    background: transparent;
}

.fb-prop-section--headline[b-a56bsggubj] {
    background: var(--cx-surface);
}

.fb-prop-section__head[b-a56bsggubj] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 12px 14px 8px;
    background: transparent;
    border: 0;
    cursor: pointer;
    user-select: none;
    text-align: left;
    /* Native button focus outline; the section's own outline is added via
     * :focus-visible so non-keyboard clicks don't show a ring. */
    outline: none;
}

.fb-prop-section--headline .fb-prop-section__head[b-a56bsggubj] {
    padding: 14px 14px 8px;
}

.fb-prop-section__head:focus-visible[b-a56bsggubj] {
    box-shadow: inset 0 0 0 2px var(--cx-action);
}

.fb-prop-section__chev[b-a56bsggubj] {
    display: inline-flex;
    color: var(--cx-ink-subtle);
    transform: rotate(0deg);
    transition: transform 100ms;
}

.fb-prop-section__chev[data-state="closed"][b-a56bsggubj] {
    transform: rotate(-90deg);
}

.fb-prop-section__title[b-a56bsggubj] {
    font-family: var(--cx-font-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cx-ink-muted);
}

.fb-prop-section--headline .fb-prop-section__title[b-a56bsggubj] {
    font-size: 11.5px;
    color: var(--cx-ink-strong);
}

/* Badge → Pill consolidation: the count badge previously had its own
 * bespoke styles (mono font + 600 weight + action palette + pill-radius).
 * Pill primitive's `info` variant + `compact` size carries the action
 * palette + tight padding + radius. Font drops from mono to inherit and
 * weight from 600 to 500 — accepted as the consolidation contract.
 * Spacing relies on the header's `gap: 6px` flex spacing (vs the prior
 * 10px = 6px gap + 4px margin-left). */

.fb-prop-section__hint[b-a56bsggubj] {
    margin-left: auto;
    font-size: 11px;
    color: var(--cx-ink-subtle);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.fb-prop-section__body[b-a56bsggubj] {
    padding: 2px 14px 14px;
}
/* /Features/ApplicationDefinitions/Builder/_shared/SeverityPill.razor.rz.scp.css */
/* Inline severity-indicator pill — form-builder spec §9.4.
 * Default size: padding 1px 7px, font 11px, pill radius.
 * Compact size: padding 0 6px, font 10.5px (matches Pill).
 *
 * Two variants in the --cx-error-* register:
 *   BlockSave   — soft red fill + red border + filled red dot
 *   BlockPublish — transparent surface + red border + outlined red dot
 *
 * Both share --cx-error text color so the label reads at the same hue.
 */

.fb-severity-pill[b-w6z2knpons] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid var(--cx-error-border);
    border-radius: var(--cx-radius-pill);
    color: var(--cx-error);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.fb-severity-pill[data-size="compact"][b-w6z2knpons] {
    padding: 0 6px;
    font-size: 10.5px;
}

/* BlockSave — solid red-soft fill + filled square dot.
 * Matches the design's errBadge / pillSave token treatment. */
.fb-severity-pill[data-severity="block-save"][b-w6z2knpons] {
    background: var(--cx-error-soft);
}

.fb-severity-pill[data-severity="block-save"] .fb-severity-pill__dot[b-w6z2knpons] {
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background: var(--cx-error);
    flex: 0 0 auto;
}

/* BlockPublish — transparent surface + outlined square dot.
 * Matches the design's pillPub token treatment. */
.fb-severity-pill[data-severity="block-publish"][b-w6z2knpons] {
    background: transparent;
}

.fb-severity-pill[data-severity="block-publish"] .fb-severity-pill__dot[b-w6z2knpons] {
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background: transparent;
    border: 1.5px solid var(--cx-error);
    flex: 0 0 auto;
}

.fb-severity-pill__text[b-w6z2knpons] {
    display: inline-block;
}
/* /Features/ApplicationDefinitions/Builder/_shared/Switch.razor.rz.scp.css */
/* Pill-toggle Switch — properties-deep.jsx:787-805. Resets the native button
 * styling (background, border, padding) so the pill is the visual, not the
 * <button> chrome. Dimensions and animation curves locked to the design's
 * 30×17 / 13×13 / 100ms / 120ms numbers. */

.fb-switch[b-094p8v2pab] {
    position: relative;
    display: inline-block;
    flex: 0 0 30px;
    width: 30px;
    height: 17px;
    padding: 0;
    border: 0;
    border-radius: var(--cx-radius-pill);
    cursor: pointer;
    transition: background 100ms;
    /* Native button outline is replaced by a focus-visible ring sized to
     * sit just outside the pill — Tab nav lands a visible 2px halo. */
    outline: none;
}

.fb-switch--off[b-094p8v2pab] {
    background: var(--cx-border-strong);
}

.fb-switch--on[b-094p8v2pab] {
    background: var(--cx-action);
}

.fb-switch:disabled[b-094p8v2pab],
.fb-switch[aria-disabled="true"][b-094p8v2pab] {
    cursor: not-allowed;
    opacity: .55;
}

.fb-switch:focus-visible[b-094p8v2pab] {
    box-shadow: 0 0 0 2px var(--cx-canvas), 0 0 0 4px var(--cx-action);
}

.fb-switch__thumb[b-094p8v2pab] {
    position: absolute;
    top: 2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #ffffff;
    /* Subtle shadow per design — locked literal because var(--cx-shadow-*) tokens
     * are surface-elevation values, not knob highlights. The "no hex literals"
     * rule applies to colors; a black-with-alpha shadow at fixed magnitude is
     * a structural depth cue, not a palette swatch. */
    box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
    transition: left 120ms;
}

.fb-switch--off .fb-switch__thumb[b-094p8v2pab] { left: 2px; }
.fb-switch--on .fb-switch__thumb[b-094p8v2pab] { left: 15px; }
/* /Features/Session/CrossScopeEntryError.razor.rz.scp.css */
.xs-error[b-5qgn3qp6u5] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--th-paper, #fff);
}

.xs-error__card[b-5qgn3qp6u5] {
    max-width: 30rem;
    text-align: center;
    padding: 2.25rem 2rem;
    border: 1px solid var(--th-line, #e3e0d8);
    border-radius: 0.75rem;
    background: var(--th-paper-2, #fbf9f4);
}

.xs-error__icon[b-5qgn3qp6u5] {
    font-size: 1.75rem;
    color: var(--th-advant, #2f6f8f);
    margin-bottom: 0.75rem;
}

.xs-error__title[b-5qgn3qp6u5] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--th-ink, #1c1a17);
    margin: 0 0 0.5rem;
}

.xs-error__body[b-5qgn3qp6u5] {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--th-ink-3, #5c574e);
    margin: 0 0 1.25rem;
}

.xs-error__action[b-5qgn3qp6u5] {
    min-width: 9rem;
}