/* Form-builder properties-panel body chrome.
 *
 * Shared across every body in Features/ApplicationDefinitions/Builder/Properties/Bodies/
 * (AppDefMetadataBody, SectionBody, GroupBody, FieldBody, MarkdownBody,
 * InfoButtonBody, SpacerBody). Form-builder spec §4 commits to a fixed visual
 * rhythm; the classes here are the substrate every body renders against.
 *
 * Why this file isn't a `.razor.css` scoped stylesheet: each body sets the
 * .fb-properties-body__* classes inside its own root, but the styles need to
 * match across sibling bodies and across body / section heading boundaries
 * the way the design handoff (properties-deep.jsx) draws them. A global file
 * with class-prefix scoping keeps the cascade flat and lets the bodies stay
 * markup-only — no per-body cascade pile.
 *
 * Class-prefix scoping: every selector starts with .fb-properties-body — the
 * only surface that mounts these classes — so leakage into other Threshold
 * surfaces is structurally prevented.
 */

.fb-properties-body {
    display: flex;
    flex-direction: column;
}

.fb-properties-body__section {
    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-4);
}

.fb-properties-body__section:last-child {
    border-bottom: none;
}

.fb-properties-body__section--flat {
    padding-top: var(--cx-space-6);
    padding-bottom: var(--cx-space-6);
}

.fb-properties-body__heading {
    margin: 0 0 var(--cx-space-3);
    font-family: var(--cx-font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cx-ink-subtle);
}

.fb-properties-body__field {
    display: flex;
    flex-direction: column;
    gap: var(--cx-space-3);
}

.fb-properties-body__field--inline {
    flex-direction: row;
    align-items: center;
    gap: var(--cx-space-3);
}

/* Toggle row — label on the left, Switch pushed to the right edge.
 * Same flex semantics as --inline, plus justify-content. Used by the
 * 6 Switch-adopted toggle sites (Required, IncludeInReporting,
 * DefaultExpanded, ShowCharCounter, ShowCalendar, PlatformDisclosure). */
.fb-properties-body__field--toggle {
    flex-direction: row;
    align-items: center;
    gap: var(--cx-space-3);
    justify-content: space-between;
}

/* Stacked label + sub-hint on the left of a toggle row, mirroring the canon
 * ToggleRow (title with a muted line beneath). Switch stays right-aligned and
 * vertically centred against the taller text block. Hint matches FieldRow's. */
.fb-properties-body__toggle-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.fb-properties-body__toggle-hint {
    font-size: 11px;
    color: var(--cx-ink-subtle);
}

.fb-properties-body__label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--cx-ink-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0;
}

.fb-properties-body__label--checkbox {
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--cx-ink);
}

/* Properties-panel inputs consume canon .fb-input.is-raised (threshold-fb.css)
 * — base chrome, focus ring, disabled state, and surface lift all cascade
 * from the canon atom. The classes below are panel-specific overrides that
 * compose on top.
 *
 * .__title-input — slim font override for Section/Group/Field title inputs:
 * 14px, weight 500 (vs base 13px, normal weight). Renders heavier so the
 * title reads as a section header rather than a generic field. Composes:
 *   class="fb-input is-raised fb-properties-body__title-input" */
.fb-properties-body__title-input {
    font-size: 14px;
    font-weight: 500;
}

.fb-properties-body__hint {
    margin: 0;
    font-size: 11.5px;
    color: var(--cx-ink-subtle);
    line-height: 1.4;
}

.fb-properties-body__radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--cx-space-3);
}

.fb-properties-body__radio {
    display: inline-flex;
    align-items: center;
    gap: var(--cx-space-3);
    font-size: 13px;
    color: var(--cx-ink);
    cursor: pointer;
}

.fb-properties-body__radio input[type="radio"]:disabled + span {
    color: var(--cx-ink-muted);
    cursor: not-allowed;
}

/* Field body — collapsible sections, warning banner, segmented control,
 * rule-chip placeholder. The <details> element provides native open/close
 * semantics; we restyle the summary marker for visual consistency. */

.fb-properties-body__section details,
details.fb-properties-body__section {
    /* details inherits .fb-properties-body__section styles applied to the element. */
}

details.fb-properties-body__section > summary.fb-properties-body__heading {
    cursor: pointer;
    list-style: none;
    padding: 0;
    user-select: none;
    display: flex;
    align-items: center;
    gap: var(--cx-space-3);
}

details.fb-properties-body__section > summary.fb-properties-body__heading::-webkit-details-marker {
    display: none;
}

details.fb-properties-body__section > summary.fb-properties-body__heading::before {
    content: "▸";
    display: inline-block;
    width: 12px;
    color: var(--cx-ink-subtle);
    transition: transform 80ms ease;
}

details.fb-properties-body__section[open] > summary.fb-properties-body__heading::before {
    transform: rotate(90deg);
}

.fb-properties-body__warning {
    margin: var(--cx-space-5) var(--cx-space-6) 0;
    padding: var(--cx-space-4) var(--cx-space-5);
    border: 1px solid var(--cx-warning-border);
    background: var(--cx-warning-soft);
    border-radius: var(--cx-radius-sm);
    color: var(--cx-warning);
    font-size: 12.5px;
    line-height: 1.5;
}

.fb-properties-body__warning strong {
    display: block;
    margin-bottom: var(--cx-space-2);
}

.fb-properties-body__warning p {
    margin: var(--cx-space-3) 0 0;
    color: var(--cx-ink-muted);
}

.fb-properties-body__type-discriminator {
    display: inline-block;
    padding: 0 var(--cx-space-3);
    background: var(--cx-surface-disabled);
    border-radius: var(--cx-radius-xs);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: var(--cx-ink-key);
}

.fb-properties-body__placeholder {
    padding: var(--cx-space-4);
    border: 1px dashed var(--cx-border-dashed);
    border-radius: var(--cx-radius-sm);
    color: var(--cx-ink-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.fb-properties-body__placeholder--inline {
    padding: var(--cx-space-3) var(--cx-space-4);
    font-size: 11.5px;
}

.fb-properties-body__placeholder code {
    padding: 0 var(--cx-space-2);
    background: var(--cx-surface-disabled);
    border-radius: var(--cx-radius-xs);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11.5px;
}

/* Phase 2 Part 2 Step 1a (B2.2.1, 2026-05-27): segmented items migrated
 * to canon v6.1's .cc-segmented > label selector. Canon Group 4 ships
 * <label> child support alongside <button> children, with active state
 * via :has(> input[type="radio"]:checked) and a visually-hidden radio
 * via .cc-segmented > label > input[type="radio"]. The form-builder's
 * Display-action <label><input type="radio"></label> markup now picks
 * up the shared atom's styling end-to-end. Closes CSS audit finding
 * #13 (item half; container half closed in B2.2). */

/* Rule-chip atom — single class driven by [data-bound]:
 *
 *   <span class="fb-rule-chip" data-bound="false">+ Add rule</span>
 *   <span class="fb-rule-chip" data-bound="true">
 *     <span class="label">show if</span>
 *     <span class="expr">applicant_type == 'first_year'</span>
 *   </span>
 *
 * .is-sm for compact sites. [data-readonly="true"] renders as a bound
 * chip but mutes ink + softens fill/border + drops the pointer cursor;
 * the sibling clear affordance is suppressed by the consumer (clear is
 * a sibling button — see .fb-rule-chip-clear, not a child).
 */
.fb-rule-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--cx-radius-pill);
    padding: 2px 10px 2px 8px;
    font-size: 11.5px;
    font-weight: 500;
    max-width: 320px;
    /* defaults match the bound state; data-bound="false" overrides below */
    background: var(--cx-rule-soft);
    border: 1px solid var(--cx-rule-border);
    color: var(--cx-rule);
}

.fb-rule-chip.is-sm {
    padding: 1px 8px 1px 6px;
    font-size: 11px;
    max-width: 240px;
}

.fb-rule-chip > .label {
    color: var(--cx-ink-muted);
    font-size: 10.5px;
}

.fb-rule-chip > .expr {
    font-family: var(--cx-font-mono);
    font-size: 11px;
    color: var(--cx-ink-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Unbound state — dashed neutral, "+ Add rule" affordance.
 * Hover warms to rule-purple to preview the bound state. */
.fb-rule-chip[data-bound="false"] {
    background: transparent;
    border: 1px dashed var(--cx-border-dashed);
    color: var(--cx-ink-subtle);
    padding: 2px 10px;
    gap: 4px;
    cursor: pointer;
    font-style: italic;
}

.fb-rule-chip[data-bound="false"].is-sm {
    padding: 1px 8px;
}

.fb-rule-chip[data-bound="false"]:hover {
    color: var(--cx-rule);
    border-color: var(--cx-rule-border);
    background: var(--cx-rule-soft);
}

.fb-rule-chip[data-bound="false"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--cx-rule-soft);
}

/* Read-only state — published-AppDef Properties chips render as a bound
 * chip (label + expr visible) but signal they can't be interacted with:
 * ink mutes one step, the rule-purple fill/border soften toward the
 * surface, the pointer cursor drops (default). No hover affordance — the
 * bound chip has no resting→hover transition, and this state explicitly
 * holds its appearance through :hover so a stray pointer doesn't imply a
 * click target. Consumer also suppresses the sibling .fb-rule-chip-clear
 * button. Composes with .is-sm. */
.fb-rule-chip[data-readonly="true"] {
    cursor: default;
    color: var(--cx-ink-muted);
    background: color-mix(in oklab, var(--cx-rule-soft) 55%, var(--cx-surface));
    border-color: color-mix(in oklab, var(--cx-rule-border) 60%, transparent);
}

.fb-rule-chip[data-readonly="true"] > .expr {
    color: var(--cx-ink-muted);
}

.fb-rule-chip[data-readonly="true"]:hover {
    color: var(--cx-ink-muted);
    background: color-mix(in oklab, var(--cx-rule-soft) 55%, var(--cx-surface));
    border-color: color-mix(in oklab, var(--cx-rule-border) 60%, transparent);
}

/* Button-shaped chip — reset native button styling so the chip's own
 * visual is preserved. Consumers at Properties bodies render the chip
 * as <button class="fb-rule-chip" ...> (clickable to open popover). The
 * disabled cursor lives on the [data-readonly] rule above (Properties
 * consumers set disabled and data-readonly in lockstep). */
button.fb-rule-chip {
    margin: 0;
    font-family: inherit;
    text-align: left;
}

/* Row wrapper — inline-flex shell that holds the chip + the sibling
 * clear button (when bound + !readonly). The chip atom is just the
 * chip; the row is its own seam so Canvas sites can render the chip
 * alone and Properties sites can render chip + clear together.
 * Distinct from .fb-rule-row (the rule-picker listbox option button,
 * lines below) — different surface, different shape. */
.fb-rule-chip-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Clear affordance — sibling button rendered next to a bound chip in
 * the Properties panel. Lives outside .fb-rule-chip so the atom stays
 * reusable at Canvas sites that don't want clear. */
.fb-rule-chip-clear {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cx-rule);
    opacity: 0.65;
    cursor: pointer;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
}

.fb-rule-chip-clear:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.04);
}

/* Rule popover (form-builder spec §8) — pick mode body. Rides on
 * RulesEditorPopover's portal-rendered shell; the shell handles position,
 * caret, shadow, and outside-click. This file styles the body. */

/* The shared portal shell (.cr-popover-shell, rules-editor.css) caps content at
   max-width:360px with overflow:hidden — sized for the narrow rules-editor
   pickers. The rule popover is 480px (canon), so lift the cap when the shell
   hosts it. Mirrors the existing :has(.cr-rule-actions__menu) shell override. */
.cr-popover-shell:has(.fb-rule-popover) {
    max-width: none;
}

.fb-rule-popover {
    display: flex;
    flex-direction: column;
    width: 480px;
    min-width: 360px;
    max-width: 560px;
    max-height: calc(100vh - 120px);
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-md);
    box-shadow: 0 20px 60px rgba(20, 22, 30, 0.22);
    overflow: hidden;
    font-size: 12.5px;
    color: var(--cx-ink);
}

.fb-rule-popover__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 8px;
    border-bottom: 1px solid var(--cx-border-faint);
}

/* Leading rule glyph in the header + the rule-glyph squares generally —
   a small accented tile carrying the rule icon. */
.fb-rule-popover__header-icon,
.fb-rule-popover__rule-glyph {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cx-rule-soft);
    border: 1px solid var(--cx-rule-border);
    border-radius: var(--cx-radius-sm);
    color: var(--cx-rule);
}

.fb-rule-popover__header-text {
    flex: 1;
    min-width: 0;
}

.fb-rule-popover__close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: none;
    background: none;
    color: var(--cx-ink-muted);
    border-radius: var(--cx-radius-sm);
    cursor: pointer;
}

.fb-rule-popover__close:hover {
    background: var(--cx-surface-sunken);
    color: var(--cx-ink-strong);
}

.fb-rule-popover__eyebrow {
    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);
}

.fb-rule-popover__title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cx-ink-strong);
}

.fb-rule-popover__context-hint {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 6px 16px;
    background: var(--cx-rule-soft);
    border-bottom: 1px solid var(--cx-rule-border);
    font-size: 11px;
    color: var(--cx-ink-muted);
}

.fb-rule-popover__context-hint svg {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--cx-rule);
}

/* Mono type chip inside the context hint (e.g. "Application"). */
.fb-rule-popover__hint-type {
    font-family: var(--cx-font-mono);
    font-weight: 600;
    color: var(--cx-ink-strong);
}

.fb-rule-popover__tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--cx-border-faint);
    padding-left: 16px;
}

.fb-rule-popover__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px 9px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--cx-ink-muted);
    cursor: pointer;
}

.fb-rule-popover__tab.is-active {
    color: var(--cx-ink-strong);
    font-weight: 600;
    border-bottom-color: var(--cx-rule);
}

.fb-rule-popover__tab-hint {
    font-family: var(--cx-font-mono);
    font-size: 10.5px;
    font-weight: 400;
    color: var(--cx-ink-subtle);
}

/* RuleComposeBody — inline composer for the simple-threshold (subject, op, value) triple */
.fb-rule-compose {
    padding: 14px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fb-rule-popover__compose-row {
    display: grid;
    /* minmax(0, 1fr) instead of plain 1fr so the form-control column can shrink
       below its intrinsic content width. <select> with long <option> text
       (e.g., "Section name · Long field title") would otherwise expand the
       grid track past the popover's max-width, pushing the FIELD label off the
       left and triggering a horizontal scrollbar. */
    grid-template-columns: 80px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.fb-rule-compose__label {
    font-family: var(--cx-font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--cx-ink-subtle);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Layout helpers — base chrome + density come from .fb-input.is-sm. The
 * popover compose row is a grid with minmax(0, 1fr) tracks; these properties
 * keep long <option> text from inflating the track past the popover's
 * max-width. The disabled state is handled by canon's .fb-input:disabled. */
.fb-rule-compose__select,
.fb-rule-value__input {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.fb-rule-compose__error {
    padding: 6px 10px;
    border: 1px solid var(--cx-error-border, #d9534f);
    border-radius: var(--cx-radius-sm);
    background: var(--cx-error-soft, #fdecea);
    color: var(--cx-error, #b03a36);
    font-size: 11.5px;
}

.fb-rule-compose__handoff-hint {
    padding: 8px 10px;
    border: 1px solid var(--cx-rule-border);
    border-radius: var(--cx-radius-sm);
    background: var(--cx-rule-soft);
    font-size: 11.5px;
    color: var(--cx-ink-strong);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.fb-rule-compose__handoff-link {
    background: var(--cx-surface);
    border: 1px solid var(--cx-rule-border);
    border-radius: var(--cx-radius-sm);
    color: var(--cx-rule);
    padding: 3px 9px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
}

.fb-rule-compose__handoff-link:disabled {
    color: var(--cx-ink-faint);
    cursor: not-allowed;
}

/* "Reads as" preview card — live chip-sentence of the composed / edited condition. */
.fb-rule-reads-as {
    padding: 10px 12px;
    background: var(--cx-rule-soft);
    border: 1px solid var(--cx-rule-border);
    border-radius: var(--cx-radius-sm);
}

.fb-rule-reads-as__eyebrow {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cx-rule);
}

.fb-rule-reads-as__body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--cx-ink-strong);
}

.fb-rule-reads-as__when {
    font-style: italic;
    color: var(--cx-ink-muted);
}

/* Edit-mode loading + fallback surfaces */
.fb-rule-edit__loading {
    padding: 24px 16px;
    text-align: center;
    color: var(--cx-ink-muted);
    font-size: 12.5px;
    font-style: italic;
}

.fb-rule-edit__fallback {
    padding: 12px 16px;
    background: var(--cx-rule-soft);
    border: 1px solid var(--cx-rule-border);
    border-radius: var(--cx-radius-sm);
    margin: 0 0 8px 0;
}

.fb-rule-edit__fallback-name {
    font-weight: 600;
    color: var(--cx-ink-strong);
    margin-bottom: 4px;
}

.fb-rule-edit__fallback-body {
    font-size: 12px;
    color: var(--cx-ink-muted);
}

.fb-rule-popover__body {
    flex: 1;
    overflow-y: auto;
    /* Default flex item min-width is auto, which lets intrinsic content of
       descendants (long <option> text in the compose body, long ChoiceList
       names in the pick list) inflate the body past the popover's max-width.
       min-width: 0 + overflow-x: hidden makes the body honor the popover's
       width. */
    min-width: 0;
    overflow-x: hidden;
}

.fb-rule-popover__list {
    padding: 6px;
    max-height: 320px;
    overflow-y: auto;
}

.fb-rule-popover__empty {
    padding: 24px 18px;
    text-align: center;
    color: var(--cx-ink-muted);
}

.fb-rule-popover__empty-heading {
    font-weight: 600;
    color: var(--cx-ink-strong);
    margin-bottom: 4px;
}

.fb-rule-popover__empty-body {
    font-size: 11.5px;
}

.fb-rule-popover__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 14px;
    background: var(--cx-surface-sunken);
    border-top: 1px solid var(--cx-border);
}

/* Pick-mode search box. Sunken bordered container with a leading icon and a
   borderless input so the field reads as part of the popover fabric. */
.fb-rule-popover__search {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 10px 2px;
    padding: 5px 8px;
    background: var(--cx-surface-sunken);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    color: var(--cx-ink-subtle);
}

.fb-rule-popover__search-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    color: var(--cx-ink-strong);
    font-size: 12.5px;
    font-family: inherit;
}

.fb-rule-popover__search-input::placeholder {
    color: var(--cx-ink-subtle);
}

/* Keyboard-affordance hints in the footer, left of the buttons. */
.fb-rule-popover__kbd-hints {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    color: var(--cx-ink-muted);
}

.fb-rule-popover__kbd-hint {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.fb-rule-popover__kbd-hints kbd {
    display: inline-flex;
    align-items: center;
    height: 14px;
    padding: 0 4px;
    font-family: var(--cx-font-mono);
    font-size: 10px;
    line-height: 13px;
    color: var(--cx-ink);
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-xs);
}

.fb-rule-popover__footer-spacer {
    flex: 1;
}

/* Rule-name authoring row in Compose / Edit. */
.fb-rule-popover__name-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fb-rule-popover__name-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--cx-ink-muted);
}

.fb-rule-popover__name-hint {
    font-weight: 400;
    color: var(--cx-ink-subtle);
}

.fb-rule-popover__name-error {
    font-size: 11px;
    color: var(--cx-error, #b03a36);
}

/* RuleRow primitive — rule list option row. Grid: leading rule glyph + content. */
.fb-rule-row {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    column-gap: 10px;
    align-items: start;
    width: 100%;
    text-align: left;
    background: none;
    border: 1px solid transparent;
    padding: 8px 10px;
    border-radius: var(--cx-radius-sm);
    cursor: pointer;
    margin: 1px 0;
    color: inherit;
    font: inherit;
}

.fb-rule-row:hover {
    background: var(--cx-surface-sunken);
}

.fb-rule-row.is-selected,
.fb-rule-row.is-selected:hover {
    background: var(--cx-rule-soft);
    border-color: var(--cx-rule-border);
}

.fb-rule-row__icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cx-rule-soft);
    border: 1px solid var(--cx-rule-border);
    border-radius: var(--cx-radius-xs);
    color: var(--cx-rule);
    margin-top: 1px;
}

.fb-rule-row.is-selected .fb-rule-row__icon {
    background: var(--cx-surface);
}

.fb-rule-row__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.fb-rule-row__name {
    font-weight: 600;
    color: var(--cx-ink-strong);
}

.fb-rule-row__desc {
    font-size: 11px;
    color: var(--cx-ink-muted);
}

/* Chip-rendered rule sentence on the pick row (compact density). */
.fb-rule-row__sentence {
    display: inline-flex;
    min-width: 0;
}

/* Row meta strip — "Used in N places · {site} · Edited X ago". */
.fb-rule-row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    color: var(--cx-ink-subtle);
}

.fb-rule-row__meta-usage {
    font-weight: 600;
    color: var(--cx-ink-muted);
}

.fb-rule-row__meta-unused {
    color: var(--cx-ink-faint);
}

.fb-rule-row__meta-sep {
    color: var(--cx-ink-faint);
}

/* Relevance group header — uppercase label + trailing hairline. */
.fb-rule-group__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cx-ink-subtle);
}

.fb-rule-group__rule {
    flex: 1;
    height: 1px;
    background: var(--cx-border-faint);
}

/* "↵ use" affordance on the selected row's right edge. */
.fb-rule-row__use {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--cx-rule);
}

.fb-rule-row__use kbd {
    display: inline-flex;
    align-items: center;
    height: 14px;
    padding: 0 4px;
    font-family: var(--cx-font-mono);
    font-size: 10px;
    line-height: 13px;
    color: var(--cx-rule);
    background: var(--cx-surface);
    border: 1px solid var(--cx-rule-border);
    border-radius: var(--cx-radius-xs);
}

/* RuleSentence — chip-rendered "[field] op [value]" sentence shared by the composer's
 * "Reads as" card (cozy) and the pick rows (.is-compact). Dark mode tracks via the
 * --cx-* tokens; no per-theme block needed. */
.fb-rule-sentence {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    line-height: 1.6;
}

.fb-rule-sentence.is-compact {
    gap: 4px;
}

.fb-rule-sentence--note {
    font-style: italic;
    color: var(--cx-ink-subtle);
    font-size: 11px;
}

.fb-rule-sentence__op {
    padding: 0 2px;
    font-style: italic;
    font-size: 12px;
    color: var(--cx-ink-muted);
}

.fb-rule-sentence.is-compact .fb-rule-sentence__op {
    font-size: 11px;
}

/* RulePill — one chip inside a sentence (field / value / fn). */
.fb-rule-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border: 1px solid transparent;
    border-radius: var(--cx-radius-sm);
    font-size: 12px;
    line-height: 1.5;
}

.fb-rule-pill.is-compact {
    padding: 0 6px;
    font-size: 11px;
}

.fb-rule-pill--field {
    background: var(--cx-action-soft);
    border-color: var(--cx-action-border);
    color: var(--cx-ink-strong);
    font-weight: 500;
}

.fb-rule-pill__section {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cx-action);
}

.fb-rule-pill.is-compact .fb-rule-pill__section {
    font-size: 8.5px;
}

.fb-rule-pill--value {
    background: var(--cx-surface);
    border-color: var(--cx-border);
    color: var(--cx-ink-strong);
    font-family: var(--cx-font-mono);
}

.fb-rule-pill--fn {
    background: var(--cx-rule-soft);
    border-color: var(--cx-rule-border);
    color: var(--cx-rule);
    font-weight: 500;
    font-style: italic;
}

.fb-rule-pill--fn svg {
    opacity: 0.75;
}

/* Highlighted field — the Dependencies block marks the current field inside each
   referencing rule's expression with a rule-soft chip (design-system §5). Defined after
   --field so the soft fill + border win on the shared element; --cx-rule-soft / -border
   carry their own light + dark values, so one rule covers both themes. */
.fb-rule-pill--highlight {
    background: var(--cx-rule-soft);
    border-color: var(--cx-rule-border);
    color: var(--cx-rule);
    font-weight: 600;
}

/* CtaButton primitive — rule popover commit / cancel button */
.fb-cta-button {
    padding: 5px 12px;
    border-radius: var(--cx-radius-sm);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.fb-cta-button--secondary {
    color: var(--cx-ink);
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
}

.fb-cta-button--primary {
    color: #fff;
    background: var(--cx-rule);
    border: 1px solid var(--cx-rule);
    font-weight: 600;
}

.fb-cta-button--primary:disabled {
    background: var(--cx-surface-disabled, var(--cx-surface-sunken));
    border-color: var(--cx-border);
    color: var(--cx-ink-faint);
    cursor: not-allowed;
}

.fb-cta-button--secondary:disabled {
    color: var(--cx-ink-faint);
    cursor: not-allowed;
}


/* Resolved Behavior — design handoff properties-deep.jsx:354-421.
 * Inline-row vocabulary: per-contributor row composes optional "AND"
 * separator + label-pill + mono expression; dashed-border-top summary
 * with Check + bold "all". Wrapper is the surface-sunken card matching
 * the design's 10/12 padding + radius-sm. Orphan handling preserved
 * via data-orphan="true" — warning-soft tint + warning-border. */

.fb-resolved-behavior {
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    background: var(--cx-surface-sunken);
}

.fb-resolved-behavior__eyebrow {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-family: var(--cx-font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cx-ink-muted);
}

.fb-resolved-behavior__empty {
    margin: 0;
    font-size: 12px;
    color: var(--cx-ink-muted);
}

.fb-resolved-behavior__stack {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.fb-resolved-behavior__row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    min-width: 0;
}

/* [data-orphan="true"] — orphan rule: referenced by the field but no longer
 * defined in the AppDef's rule set (typically after a rule deletion). The
 * row gets a warn-tone box so the admin sees the dangling reference at a
 * glance instead of trusting a resolved outcome computed from a missing
 * rule. Push-attribute pattern — state on the row, styling reacts. The
 * leading warn glyph is mounted as the row's first child by the consumer
 * (ResolvedBehavior.razor); canon tones it here. */
.fb-resolved-behavior__row[data-orphan="true"] {
    background: var(--cx-warning-soft);
    border: 1px solid var(--cx-warning-border);
    border-radius: var(--cx-radius-xs);
    padding: 4px 6px;
    margin: 0 -2px;
}
.fb-resolved-behavior__row[data-orphan="true"] > svg:first-child {
    color: var(--cx-warning);
    flex: none;
}
.fb-resolved-behavior__row[data-orphan="true"] .fb-resolved-behavior__action {
    color: var(--cx-warning);
    font-style: normal;
    font-weight: 600;
}

.fb-resolved-behavior__conj {
    font-family: var(--cx-font-mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--cx-action);
    letter-spacing: 0.02em;
}

/* __level — structural inheritance-stack label ("Section" / "Group" /
 * "Field"). A styled span, not a Pill: .cc-pill is reserved for status /
 * category / severity signals; a fixed three-value structural label is
 * a styled span. Design-system §28 (Pills signal status/category;
 * structural indicators are styled spans). */
.fb-resolved-behavior__level {
    font-size: 10px;
    font-weight: 600;
    color: var(--cx-ink-muted);
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
    padding: 0 5px;
    border-radius: var(--cx-radius-xs);
    letter-spacing: 0.02em;
}

/* __action — italic kicker between __level and the rule expression. */
.fb-resolved-behavior__action {
    color: var(--cx-ink-muted);
    font-style: italic;
    font-size: 11px;
}

/* __sentence — the rule-expression slot (canon fb.css v6.6). Trailing child
 * of __row: after __conj (AND), __level (Section / Group / Field) and the
 * italic __action (show if / hide if), the row closes with the rule's readable
 * form as a <RuleSentence> chip stack. The pill chrome is the existing §5
 * rule-reference vocabulary (.fb-rule-sentence + .fb-rule-pill); __sentence is
 * only the WRAPPER. Caps at three chips — RuleReadable.FromRule degrades past a
 * single comparison to a muted FallbackNote — so __row's flex-wrap is all the
 * long-sentence handling needed. */
.fb-resolved-behavior__sentence {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
/* NULL state — slot mounted but empty. ResolvedBehavior renders __name instead
 * when there's no root, so this is dormant here; carried for parity with canon's
 * slot contract. ORPHAN rows ([data-orphan="true"]) suppress the slot entirely —
 * the warn box + glyph + __name already signal the broken reference. */
.fb-resolved-behavior__sentence:empty::after {
    content: "no readable form";
    font-style: italic;
    font-size: 11px;
    color: var(--cx-ink-faint);
}

/* __name — name fallback that stands in for __sentence when there's no
 * renderable root: an orphan rule ("(rule unavailable)"), or a known rule whose
 * expression hasn't loaded yet / couldn't be fetched. Plain muted text (NOT the
 * retired __expr mono box); the chip stack swaps in once the root arrives. */
.fb-resolved-behavior__name {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    color: var(--cx-ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fb-resolved-behavior__summary {
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px dashed var(--cx-border-dashed);
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: var(--cx-ink-strong);
}

.fb-resolved-behavior__summary svg {
    color: var(--cx-success);
}

.fb-resolved-behavior__summary strong {
    font-weight: 600;
}

/* Platform-disclosure rows — locked-on toggles per spec §4.6. Title block
 * (label + inline lock Icon, hint below) on the left; locked Switch
 * right-aligned. Transparent surface — the disabled-bg treatment was the
 * audit's second-most-jarring visual after the lock emoji; both corrected
 * in step 5b (f). */
.fb-platform-disclosure {
    display: flex;
    align-items: flex-start;
    gap: var(--cx-space-4);
    padding: var(--cx-space-3) 0;
    background: transparent;
    border: 0;
}

.fb-platform-disclosure__title-block {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fb-platform-disclosure__label-row {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.fb-platform-disclosure__label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--cx-ink-strong);
}

.fb-platform-disclosure__lock {
    display: inline-flex;
    color: var(--cx-ink-subtle);
}

.fb-platform-disclosure__hint {
    margin: 0;
    font-size: 11px;
    color: var(--cx-ink-subtle);
    line-height: 1.5;
}

/* ADR provenance badge — finding #15a. Small mono code-style chip naming
 * the ADR(s) a disclosure traces to. Per canon properties-deep.jsx's
 * DisclosureRow: mono 9.5px 600 0.02em ink-muted, surface bg, border,
 * radius-xs (NOT pill — code-style sharp rectangle), height/line-height
 * 14/13. Values mirror canon's inline style verbatim. */
.fb-platform-disclosure__adr-badge {
    display: inline-flex;
    align-items: center;
    height: 14px;
    line-height: 13px;
    padding: 0 5px;
    font-family: var(--cx-font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--cx-ink-muted);
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-xs);
}

/* CopyTo editor — list of in-section fields with checkboxes. */
.fb-copy-to__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--cx-space-2);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    background: var(--cx-surface-raised);
}

.fb-copy-to__item {
    display: flex;
    align-items: center;
    gap: var(--cx-space-3);
    padding: var(--cx-space-3) var(--cx-space-4);
    border-bottom: 1px solid var(--cx-border-faint);
}

.fb-copy-to__item:last-child {
    border-bottom: none;
}

.fb-copy-to__item label {
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.fb-copy-to__name {
    font-size: 13px;
    color: var(--cx-ink);
}

.fb-copy-to__key {
    font-size: 11px;
    color: var(--cx-ink-key);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

.fb-properties-body__readonly-block {
    margin: 0;
    padding: var(--cx-space-4) var(--cx-space-5);
    background: var(--cx-surface-disabled);
    border: 1px solid var(--cx-border-faint);
    border-radius: var(--cx-radius-sm);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: var(--cx-ink-muted);
    line-height: 1.5;
    max-height: 160px;
    overflow: auto;
    white-space: pre;
}

/* ── ChoiceField type-specific block — spec §7 ──────────────────────────────
 *
 * The source-list card (.fb-choice-field-source) is the trigger that opens the
 * ChoiceListPicker popover. The picker (.fb-choice-list-picker) renders inside
 * RulesEditorPopover (portal); these styles target the popover body itself,
 * not the outer shell.
 */

.fb-choice-field-source {
    display: flex;
    align-items: center;
    gap: var(--cx-space-3);
    width: 100%;
    padding: var(--cx-space-3) var(--cx-space-4);
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    color: var(--cx-ink);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: border-color 80ms, box-shadow 80ms;
}

.fb-choice-field-source:hover:not(:disabled) {
    border-color: var(--cx-action-border);
}

.fb-choice-field-source:focus-visible {
    outline: none;
    border-color: var(--cx-action);
    box-shadow: 0 0 0 2px var(--cx-action-soft);
}

.fb-choice-field-source:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.fb-choice-field-source__name {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    color: var(--cx-ink-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fb-choice-field-source__scope {
    flex: 0 0 auto;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--cx-surface-sunken);
    border: 1px solid var(--cx-border-faint);
    color: var(--cx-ink-muted);
}

.fb-choice-field-source__chev {
    flex: 0 0 auto;
    color: var(--cx-ink-subtle);
    font-size: 14px;
    line-height: 1;
}

/* Picker — popover content rendered inside RulesEditorPopover. */
.fb-choice-list-picker {
    display: flex;
    flex-direction: column;
    min-width: 320px;
    max-height: 480px;
}

.fb-choice-list-picker__search {
    padding: var(--cx-space-3);
    border-bottom: 1px solid var(--cx-border-faint);
    background: var(--cx-surface);
}

/* Layout helper — base chrome + focus ring + density come from .fb-input.is-sm.
 * box-sizing ensures the input's padding doesn't push past the picker's
 * search-bar container. */
.fb-choice-list-picker__search-input {
    box-sizing: border-box;
}

.fb-choice-list-picker__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--cx-space-2) 0;
}

.fb-choice-list-picker__status {
    padding: var(--cx-space-5) var(--cx-space-4);
    text-align: center;
    font-size: 12px;
    color: var(--cx-ink-muted);
}

.fb-choice-list-picker__status--error {
    color: var(--cx-error, #b54040);
}

.fb-choice-list-picker__group {
    padding-bottom: var(--cx-space-2);
}

.fb-choice-list-picker__group-header {
    padding: var(--cx-space-3) var(--cx-space-4) var(--cx-space-2);
    font-family: var(--cx-font-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cx-ink-subtle);
}

.fb-choice-list-picker__row {
    display: flex;
    align-items: center;
    gap: var(--cx-space-3);
    width: 100%;
    padding: var(--cx-space-2) var(--cx-space-4);
    background: transparent;
    border: none;
    border-left: 2px solid transparent;
    color: var(--cx-ink);
    text-align: left;
    cursor: pointer;
    transition: background-color 80ms;
}

.fb-choice-list-picker__row:hover {
    background: var(--cx-surface-sunken);
}

.fb-choice-list-picker__row.is-selected {
    background: var(--cx-action-soft);
    border-left-color: var(--cx-action);
}

.fb-choice-list-picker__row-name {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--cx-ink-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fb-choice-list-picker__row-meta {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--cx-ink-muted);
}

.fb-choice-list-picker__row-check {
    flex: 0 0 auto;
    color: var(--cx-action);
    font-size: 12px;
}

.fb-choice-list-picker__footer {
    display: flex;
    gap: var(--cx-space-2);
    padding: var(--cx-space-3);
    border-top: 1px solid var(--cx-border-faint);
    background: var(--cx-surface-sunken);
}

.fb-choice-list-picker__create-btn {
    flex: 1;
    padding: var(--cx-space-2) var(--cx-space-3);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--cx-radius-sm);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--cx-action);
    cursor: pointer;
}

.fb-choice-list-picker__create-btn:hover:not(:disabled) {
    background: var(--cx-action-soft);
}

.fb-choice-list-picker__create-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* In-popover create form */
.fb-choice-list-picker__create {
    display: flex;
    flex-direction: column;
    gap: var(--cx-space-3);
    padding: var(--cx-space-4);
}

.fb-choice-list-picker__create-eyebrow {
    font-family: var(--cx-font-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cx-ink-subtle);
}

/* __create-name has no site-specific overrides — consumer renders the
 * canon atom directly via class="fb-input is-sm". */

.fb-choice-list-picker__create-error {
    font-size: 11.5px;
    color: var(--cx-error, #b54040);
}

.fb-choice-list-picker__create-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--cx-space-2);
}

.fb-choice-list-picker__cancel-btn,
.fb-choice-list-picker__save-btn {
    padding: var(--cx-space-2) var(--cx-space-4);
    border-radius: var(--cx-radius-sm);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.fb-choice-list-picker__cancel-btn {
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
    color: var(--cx-ink-strong);
}

.fb-choice-list-picker__save-btn {
    background: var(--cx-action);
    border: 1px solid var(--cx-action);
    color: var(--cx-action-fg, white);
}

.fb-choice-list-picker__save-btn:disabled,
.fb-choice-list-picker__cancel-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ── Meta strip + scope affordance + options preview — spec §7.5 + §7.7 ─── */

.fb-choice-list-meta {
    display: flex;
    align-items: center;
    gap: var(--cx-space-2);
    flex-wrap: wrap;
    margin-top: var(--cx-space-2);
    padding: 0 var(--cx-space-1);
    font-size: 11.5px;
    color: var(--cx-ink-muted);
}

.fb-choice-list-meta__count strong {
    color: var(--cx-ink-strong);
    font-weight: 600;
}

.fb-choice-list-meta__sep {
    color: var(--cx-ink-faint, var(--cx-border));
}

.fb-choice-list-meta__link {
    color: var(--cx-action);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    cursor: not-allowed;
}

.fb-choice-list-meta__link[aria-disabled="true"] {
    opacity: 0.65;
}

.fb-choice-list-meta__scope-line {
    color: var(--cx-ink-muted);
    font-size: 11.5px;
}

.fb-choice-scope-affordance {
    margin-top: var(--cx-space-3);
    padding: var(--cx-space-3);
    border-radius: var(--cx-radius-sm);
    display: flex;
    flex-direction: column;
    gap: var(--cx-space-2);
}

.fb-choice-scope-affordance[data-scope="shared"] {
    background: var(--cx-info-soft, var(--cx-action-soft));
    border: 1px solid var(--cx-info-border, var(--cx-action-border));
}

.fb-choice-scope-affordance[data-scope="form-local"] {
    background: var(--cx-surface-sunken);
    border: 1px solid var(--cx-border-faint);
}

.fb-choice-scope-affordance__hint {
    font-size: 11.5px;
    color: var(--cx-ink-strong);
    line-height: 1.4;
}

.fb-choice-scope-affordance__hint strong {
    font-weight: 600;
}

.fb-choice-scope-affordance__actions {
    display: flex;
    gap: var(--cx-space-2);
}

.fb-choice-scope-affordance__btn {
    padding: var(--cx-space-2) var(--cx-space-3);
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--cx-ink-strong);
    cursor: pointer;
}

.fb-choice-scope-affordance__btn:hover:not(:disabled) {
    border-color: var(--cx-action-border);
}

.fb-choice-scope-affordance__btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.fb-options-preview {
    margin-top: var(--cx-space-3);
    border: 1px solid var(--cx-border-faint);
    border-radius: var(--cx-radius-sm);
    background: var(--cx-surface);
    overflow: hidden;
}

.fb-options-preview__header {
    padding: var(--cx-space-2) var(--cx-space-3) var(--cx-space-1);
    font-family: var(--cx-font-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cx-ink-subtle);
    border-bottom: 1px solid var(--cx-border-faint);
}

.fb-options-preview__empty {
    padding: var(--cx-space-3) var(--cx-space-3);
    font-size: 11.5px;
    color: var(--cx-ink-muted);
    font-style: italic;
}

.fb-options-preview__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fb-options-preview__row {
    display: flex;
    align-items: center;
    gap: var(--cx-space-2);
    padding: var(--cx-space-2) var(--cx-space-3);
    font-size: 12px;
    color: var(--cx-ink);
    border-top: 1px solid var(--cx-border-faint);
}

.fb-options-preview__row:first-child {
    border-top: none;
}

.fb-options-preview__dot {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1.5px solid var(--cx-border-strong, var(--cx-border));
}

.fb-options-preview__label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fb-options-preview__more {
    padding: var(--cx-space-2) var(--cx-space-3);
    border-top: 1px solid var(--cx-border-faint);
    font-size: 11px;
    color: var(--cx-ink-subtle);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

.fb-choice-field-dangling {
    margin-top: var(--cx-space-2);
    padding: var(--cx-space-3);
    background: var(--cx-warning-soft, var(--cx-surface-sunken));
    border: 1px solid var(--cx-warning-border, var(--cx-border));
    border-radius: var(--cx-radius-sm);
    font-size: 11.5px;
    color: var(--cx-ink-strong);
}

/* ── Fork-to-form-local inline form — spec §7.3 ───────────────────────── */

.fb-choice-fork-form {
    margin-top: var(--cx-space-3);
    padding: var(--cx-space-3);
    background: var(--cx-surface-sunken);
    border: 1px solid var(--cx-border-faint);
    border-radius: var(--cx-radius-sm);
    display: flex;
    flex-direction: column;
    gap: var(--cx-space-2);
}

.fb-choice-fork-form__eyebrow {
    font-family: var(--cx-font-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cx-ink-subtle);
}

.fb-choice-fork-form__label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11.5px;
    color: var(--cx-ink-muted);
}

/* __name has no site-specific overrides — consumer renders the canon
 * atom directly via class="fb-input is-sm". */

.fb-choice-fork-form__error {
    font-size: 11.5px;
    color: var(--cx-error, #b54040);
}

.fb-choice-fork-form__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--cx-space-2);
}

.fb-choice-fork-form__cancel,
.fb-choice-fork-form__commit {
    padding: var(--cx-space-2) var(--cx-space-4);
    border-radius: var(--cx-radius-sm);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.fb-choice-fork-form__cancel {
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
    color: var(--cx-ink-strong);
}

.fb-choice-fork-form__commit {
    background: var(--cx-action);
    border: 1px solid var(--cx-action);
    color: var(--cx-action-fg, white);
}

.fb-choice-fork-form__cancel:disabled,
.fb-choice-fork-form__commit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ── Swap warning confirmation sub-mode — spec §7.4 ───────────────────────── */

.fb-choice-list-picker__confirm-swap {
    display: flex;
    flex-direction: column;
    padding: var(--cx-space-4);
    gap: var(--cx-space-3);
    background: var(--cx-warning-soft, var(--cx-surface-sunken));
    border-bottom: 1px solid var(--cx-warning-border, var(--cx-border));
}

.fb-choice-list-picker__confirm-eyebrow {
    font-family: var(--cx-font-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cx-warning, var(--cx-ink-strong));
}

.fb-choice-list-picker__confirm-message {
    font-size: 12.5px;
    color: var(--cx-ink-strong);
    line-height: 1.4;
}

.fb-choice-list-picker__affected-rules {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--cx-space-1);
    border: 1px solid var(--cx-border-faint);
    border-radius: var(--cx-radius-sm);
    background: var(--cx-surface);
    overflow: hidden;
}

.fb-choice-list-picker__affected-rule {
    display: flex;
    flex-direction: column;
    padding: var(--cx-space-2) var(--cx-space-3);
    border-top: 1px solid var(--cx-border-faint);
    font-size: 11.5px;
    gap: 2px;
}

.fb-choice-list-picker__affected-rule:first-child {
    border-top: none;
}

.fb-choice-list-picker__affected-rule-name {
    font-weight: 500;
    color: var(--cx-ink-strong);
}

.fb-choice-list-picker__affected-rule-missing {
    color: var(--cx-ink-muted);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
}

.fb-choice-list-picker__confirm-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--cx-space-2);
}

.fb-choice-list-picker__probe-error {
    padding: var(--cx-space-2) var(--cx-space-3);
    font-size: 11.5px;
    color: var(--cx-error, #b54040);
    background: var(--cx-error-soft, var(--cx-surface-sunken));
    border-bottom: 1px solid var(--cx-border-faint);
}

/* ── Presentation toggles — spec §7.6 ──────────────────────────────────── */

.fb-choice-presentation {
    margin-top: var(--cx-space-3);
    padding: var(--cx-space-3);
    border: 1px solid var(--cx-border-faint);
    border-radius: var(--cx-radius-sm);
    background: var(--cx-surface);
    display: flex;
    flex-direction: column;
    gap: var(--cx-space-2);
}

.fb-choice-presentation__row {
    display: flex;
    align-items: center;
    gap: var(--cx-space-3);
}

.fb-choice-presentation__row--toggle {
    justify-content: space-between;
}

.fb-choice-presentation__label {
    font-size: 12px;
    font-weight: 500;
    color: var(--cx-ink-strong);
    flex: 0 0 auto;
    min-width: 120px;
}

/* Layout helper — base chrome + focus ring + density + disabled treatment
 * come from .fb-input.is-sm. flex: 1 lets the control fill the remaining
 * track in the .fb-choice-presentation__row flex (label takes fixed width). */
.fb-choice-presentation__select,
.fb-choice-presentation__input {
    flex: 1;
}

.fb-choice-presentation__hint {
    font-size: 11px;
    color: var(--cx-ink-subtle);
    margin-left: 128px; /* approximate label-width offset so hint aligns under the input */
}

.fb-choice-presentation__warn {
    padding: var(--cx-space-2) var(--cx-space-3);
    background: var(--cx-warning-soft, var(--cx-surface-sunken));
    border: 1px solid var(--cx-warning-border, var(--cx-border));
    border-radius: var(--cx-radius-sm);
    font-size: 11.5px;
    color: var(--cx-ink-strong);
}

/* ── ChoiceField right-operand dropdown fallbacks (rendered by the shared
   RuleValueInput component used in both compose and edit modes; spec §10 #32
   for the original compose-side trigger, spec §7.4 for the dangling-value
   advisory). ─────────────────────────────────────────────────────────────── */

.fb-rule-value__choice-unavailable,
.fb-rule-value__choice-empty {
    padding: var(--cx-space-2) var(--cx-space-3);
    font-size: 11.5px;
    border-radius: var(--cx-radius-sm);
    flex: 1;
}

.fb-rule-value__choice-unavailable {
    background: var(--cx-warning-soft, var(--cx-surface-sunken));
    border: 1px solid var(--cx-warning-border, var(--cx-border));
    color: var(--cx-ink-strong);
}

.fb-rule-value__choice-empty {
    background: var(--cx-surface-sunken);
    border: 1px solid var(--cx-border-faint);
    color: var(--cx-ink-muted);
    font-style: italic;
}

.fb-rule-value__choice-dangling {
    margin-top: var(--cx-space-2);
    padding: var(--cx-space-2) var(--cx-space-3);
    background: var(--cx-warning-soft, var(--cx-surface-sunken));
    border: 1px solid var(--cx-warning-border, var(--cx-border));
    border-radius: var(--cx-radius-sm);
    font-size: 11.5px;
    color: var(--cx-ink-strong);
}

.fb-rule-value__choice-dangling strong {
    font-weight: 600;
}

/* ── Dependencies block sub-blocks (Dependencies/ components) ───────────────
   Read-only relationship surfaces inside the Dependencies PropSection. Each
   sub-block is a titled mini-section; rows that jump to a related field/rule
   are buttons. Neutral palette — dependency edges, not actions. All tokens are
   dual-defined (light + dark), so these rules cover both themes. */
.fb-dep-block {
    margin-top: var(--cx-space-4);
}

.fb-dep-block:first-child {
    margin-top: 0;
}

.fb-dep-block__title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cx-ink-muted);
    margin-bottom: var(--cx-space-2);
}

.fb-dep-block__empty {
    margin: 0;
    font-size: 11.5px;
    color: var(--cx-ink-muted);
}

.fb-dep-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--cx-space-1, 4px);
}

/* Clickable row — jumps to the related field/rule. Button reset + hover affordance. */
.fb-dep-row {
    display: flex;
    align-items: center;
    gap: var(--cx-space-2);
    width: 100%;
    padding: var(--cx-space-2) var(--cx-space-3);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--cx-radius-sm);
    text-align: left;
    cursor: pointer;
    color: var(--cx-ink-strong);
}

.fb-dep-row:hover {
    background: var(--cx-surface-sunken);
    border-color: var(--cx-border-faint);
}

.fb-dep-arrow {
    color: var(--cx-ink-muted);
    font-size: 12px;
    flex: 0 0 auto;
}

.fb-dep-chip {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}

.fb-dep-chip__eyebrow {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cx-action);
}

.fb-dep-chip__title {
    font-size: 12px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Choice-list reference row — name + scope badge + usage hint. */
.fb-dep-choicelist {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--cx-space-2);
    font-size: 12px;
}

.fb-dep-choicelist__name {
    font-weight: 600;
    color: var(--cx-ink-strong);
}

.fb-dep-choicelist__scope {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: var(--cx-radius-pill);
    background: var(--cx-info-soft, var(--cx-surface-sunken));
    color: var(--cx-info, var(--cx-ink-muted));
}

.fb-dep-choicelist__usage {
    color: var(--cx-ink-muted);
}

/* Rule-reference row — rule name above its chip-sentence expression; the whole row opens
   the rule in the rules editor. */
.fb-dep-rule {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: var(--cx-space-2) var(--cx-space-3);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--cx-radius-sm);
    text-align: left;
    cursor: pointer;
}

.fb-dep-rule:hover {
    background: var(--cx-surface-sunken);
    border-color: var(--cx-border-faint);
}

.fb-dep-rule__name {
    font-size: 12px;
    font-weight: 600;
    color: var(--cx-ink-strong);
}

/* Rename-impact — a warning box: an uppercase label + count, the stable-id explanation, and a
   collapsible before→after diff of each affected expression (canon properties-deep.jsx "Rename
   impact"). All tokens are dual-defined (light + dark), so these rules cover both themes. */
.fb-dep-rename {
    margin-top: var(--cx-space-3);
    padding: 10px 12px;
    background: var(--cx-warning-soft);
    border: 1px solid var(--cx-warning-border);
    border-radius: var(--cx-radius-sm);
}

.fb-dep-rename__head {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fb-dep-rename__icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--cx-warning);
}

.fb-dep-rename__label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cx-warning);
}

.fb-dep-rename__toggle {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 11px;
    color: var(--cx-ink-muted);
    cursor: pointer;
}

.fb-dep-rename__toggle:hover {
    color: var(--cx-ink-strong);
}

.fb-dep-rename__chevron {
    display: inline-flex;
    transform: rotate(-90deg);
    transition: transform 100ms ease;
}

.fb-dep-rename__chevron.is-open {
    transform: rotate(0deg);
}

.fb-dep-rename__warning {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--cx-ink-strong);
}

.fb-dep-rename__warning code {
    font-family: var(--cx-font-mono);
    font-size: 11.5px;
    padding: 0 5px;
    border-radius: var(--cx-radius-xs);
    background: var(--cx-surface);
    border: 1px solid var(--cx-warning-border);
}

.fb-dep-rename__hint {
    margin: 4px 0 0;
    font-size: 11px;
    line-height: 1.45;
    color: var(--cx-ink-muted);
}

.fb-dep-rename__list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fb-dep-rename__row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 6px 9px;
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-xs);
}

.fb-dep-rename__name {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--cx-ink-strong);
}

/* before → after diff lines (canon diffOld / diffNew): error-soft + faint strikethrough, then
   success-soft. The rename-target pill inside each line shows the current key (before) / the
   NEW_KEY placeholder (after); the line tint carries the removed → added signal. */
.fb-dep-rename__line {
    display: inline-block;
    max-width: 100%;
    padding: 2px 6px;
    border-radius: var(--cx-radius-xs);
}

.fb-dep-rename__line--before {
    background: var(--cx-error-soft);
    border: 1px solid var(--cx-error-border);
    text-decoration: line-through;
    text-decoration-color: var(--cx-ink-faint);
}

.fb-dep-rename__line--after {
    background: var(--cx-success-soft);
    border: 1px solid var(--cx-success-border);
}

/* Static row — a referencing rule whose chip sentence can't show the key swap (compound /
   field-to-field / rule-to-rule). Rendered once, neutral, so it doesn't read as a diff. */
.fb-dep-rename__static {
    display: inline-block;
    max-width: 100%;
    padding: 2px 6px;
    border-radius: var(--cx-radius-xs);
    background: var(--cx-surface-sunken);
    border: 1px solid var(--cx-border-faint);
}

.fb-dep-loading {
    font-size: 11.5px;
    color: var(--cx-ink-muted);
}

/* Historical-responses strip — soft separator below the Dependencies section (not a
   dependency; design-system §9). Sits flush in the panel body with a hairline top rule. */
.fb-dep-historical {
    padding: var(--cx-space-3) var(--cx-space-6);
    border-top: 1px solid var(--cx-border-faint);
    font-size: 11px;
    color: var(--cx-ink-muted);
}

/* ─────────────────────────────────────────────────────────────────────────
   "All sections" overflow popover. Portal-rendered via RulesEditorPopover, so the
   rules live in this global sheet (scoped CSS can't reach the PopoverLayer mount).
   Mirrors the .fb-rule-popover shell pattern: lift the shared shell's 360px max-width
   cap and bring the popover's own --cx-* chrome. The row glyph reuses the tab strip's
   rule-glyph vocabulary so recognition transfers.
   ───────────────────────────────────────────────────────────────────────── */
.cr-popover-shell:has(.fb-all-sections) {
    max-width: none;
}

/* No box-shadow here: the portal shell (.cr-popover-shell) clips descendant shadows
   via overflow:hidden and provides the drop shadow itself, so the content brings only
   its border + radius (declaring --cx-shadow-popover would just double the border ring
   the token bundles). */
.fb-all-sections {
    display: flex;
    flex-direction: column;
    width: 380px;
    max-width: 380px;
    max-height: 70vh;
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-md);
    overflow: hidden;
    font-size: 12.5px;
    color: var(--cx-ink);
}

.fb-all-sections__header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 12px 14px 8px;
    border-bottom: 1px solid var(--cx-border-faint);
}

.fb-all-sections__eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cx-ink-subtle);
}

.fb-all-sections__count {
    font-family: var(--cx-font-mono);
    font-size: 10.5px;
    color: var(--cx-ink-subtle);
}

.fb-all-sections__header-spacer {
    flex: 1;
}

.fb-all-sections__close {
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    border: 0;
    background: transparent;
    color: var(--cx-ink-muted);
    border-radius: var(--cx-radius-sm);
    cursor: pointer;
}

.fb-all-sections__close:hover {
    background: var(--cx-surface-sunken);
    color: var(--cx-ink-strong);
}

.fb-all-sections__search {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 8px 10px;
    padding: 5px 10px;
    background: var(--cx-surface-sunken);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    color: var(--cx-ink-subtle);
}

.fb-all-sections__search-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: 0;
    font-size: 12.5px;
    font-family: inherit;
    color: var(--cx-ink-strong);
}

.fb-all-sections__search-input::placeholder {
    color: var(--cx-ink-faint);
}

.fb-all-sections__search-clear {
    display: inline-flex;
    border: 0;
    background: transparent;
    color: var(--cx-ink-subtle);
    cursor: pointer;
    padding: 0;
}

.fb-all-sections__search-clear:hover {
    color: var(--cx-ink-strong);
}

.fb-all-sections__list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 6px 6px;
}

.fb-all-sections__row {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 9px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--cx-radius-sm);
    cursor: pointer;
    color: var(--cx-ink-strong);
    font: inherit;
}

.fb-all-sections__row:hover {
    background: var(--cx-surface-raised);
}

.fb-all-sections__row.is-active {
    background: var(--cx-action-soft);
    border-color: var(--cx-action-border);
}

.fb-all-sections__row.is-reorder {
    cursor: default;
}

.fb-all-sections__glyph {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--cx-radius-xs);
    background: var(--cx-surface-sunken);
    border: 1px solid var(--cx-border);
    color: var(--cx-ink-faint);
}

.fb-all-sections__glyph.is-rule {
    background: var(--cx-rule-soft);
    border-color: var(--cx-rule-border);
    color: var(--cx-rule);
}

.fb-all-sections__row-body {
    flex: 1;
    min-width: 0;
}

.fb-all-sections__row-label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--cx-ink-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fb-all-sections__row.is-active .fb-all-sections__row-label {
    font-weight: 600;
    color: var(--cx-action);
}

.fb-all-sections__row-sub {
    font-size: 10.5px;
    color: var(--cx-ink-subtle);
    margin-top: 1px;
}

.fb-all-sections__row-count {
    flex: 0 0 auto;
    font-family: var(--cx-font-mono);
    font-size: 10.5px;
    color: var(--cx-ink-muted);
    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-all-sections__row-current {
    flex: 0 0 auto;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cx-action);
    padding: 0 6px;
    background: var(--cx-action-soft);
    border: 1px solid var(--cx-action-border);
    border-radius: var(--cx-radius-pill);
}

.fb-all-sections__reorder-controls {
    flex: 0 0 auto;
    display: inline-flex;
    gap: 2px;
}

.fb-all-sections__reorder-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-xs);
    background: var(--cx-surface);
    color: var(--cx-ink-muted);
    cursor: pointer;
}

.fb-all-sections__reorder-btn:hover:not(:disabled) {
    background: var(--cx-action-soft);
    color: var(--cx-ink-strong);
}

.fb-all-sections__reorder-btn:disabled {
    color: var(--cx-ink-faint);
    cursor: not-allowed;
    opacity: 0.5;
}

.fb-all-sections__empty {
    padding: 32px 18px;
    text-align: center;
}

.fb-all-sections__empty-text {
    font-size: 12px;
    color: var(--cx-ink-strong);
    font-weight: 500;
}

.fb-all-sections__empty-term {
    font-family: var(--cx-font-mono);
    font-size: 11px;
    background: var(--cx-surface-sunken);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-xs);
    padding: 0 5px;
}

.fb-all-sections__empty-clear {
    margin-top: 8px;
    border: 0;
    background: transparent;
    font-size: 11.5px;
    color: var(--cx-action);
    font-weight: 500;
    cursor: pointer;
}

.fb-all-sections__footer {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: var(--cx-surface-sunken);
    border-top: 1px solid var(--cx-border);
}

.fb-all-sections__footer-spacer {
    flex: 1;
}

.fb-all-sections__footer-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 7px;
    border: 0;
    background: transparent;
    border-radius: var(--cx-radius-sm);
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
}

.fb-all-sections__reorder {
    color: var(--cx-ink-muted);
}

.fb-all-sections__reorder:hover,
.fb-all-sections__reorder.is-active {
    background: var(--cx-action-soft);
    color: var(--cx-ink-strong);
}

.fb-all-sections__add {
    color: var(--cx-action);
    font-weight: 600;
}

.fb-all-sections__add:hover {
    background: var(--cx-action-soft);
}