/* threshold-chrome.css — bespoke cc-* chrome.
   --------------------------------------------------------------------
   Lifted from the design handoff:
     prototypes/02-chrome/chrome.css           (cc-shell, cc-sidenav, cc-tenant,
                                                cc-user, cc-nav, cc-topbar, cc-main,
                                                cc-page, cc-pill, cc-btn, cc-page-head,
                                                cc-context-bar)
     prototypes/02-chrome/threshold-chrome.css (cc-lockup-2, xr-wordmark,
                                                xr-threshold-rule, xr-divider,
                                                cc-lockup-product, cc-footer +
                                                supporting cc-foot-* chrome)

   Per ADR-0035 §13 these surfaces have no Bootstrap equivalent and are
   built bespoke. Hard Rule 4's locked-accent inventory is enforced here:
   --xr-bind appears in exactly two rules (.xr-threshold-rule and
   .cc-foot-bind-rule), and --marigold-deep appears only in the named
   inventory (cc-lockup-product, cc-tenant-crest gradient, cc-context-*,
   cc-icon-btn-dot).

   Local override beyond the verbatim lift: .cc-tenant--display-only
   neutralises hover affordances for ADR-0034's v1 display-only tenant
   chip (no switcher attached yet). The base .cc-tenant rule stays as
   the handoff specifies it for Phase 2+ when the switcher attaches. */

/* ==================================================================
   Outer shell — CSS Grid: sidenav column + main content column.
   ================================================================== */
.cc-shell {
    display: grid;
    /* Cap BOTH grid tracks at minmax(0, 1fr) so neither axis grows past the
     * viewport when content would otherwise force it.
     *   Rows: without the cap .cc-main's natural height grows past 100vh
     *   (especially with the AppDef switcher bar adding 44px above the page
     *   body), pushing .cc-page below the fold and scrolling the whole page
     *   instead of just the canvas — FormBuilderLayoutTests'
     *   Page_level_scroll_containers_stay_at_zero catches this.
     *   Columns: a wide, non-shrinking child (e.g. the form builder's
     *   section-tab strip at high section counts) would otherwise grow the
     *   content column to its intrinsic width and give the page a horizontal
     *   scrollbar. The default 1fr column's min is its content's min-content;
     *   minmax(0, 1fr) drops that to 0 so the column stays at the available
     *   width and inner scroll containers (the section-tab scroller) clip
     *   internally — Section_tab_strip_overflows_internally catches this. */
    grid-template-columns: var(--th-chrome-sidenav-w) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    background: var(--th-paper);
    color: var(--th-ink);
    height: 100vh;
    width: 100%;
    font-family: var(--th-font-sans);
}

/* ==================================================================
   Sidenav
   ================================================================== */
.cc-sidenav {
    background: var(--th-paper-3);
    border-right: 1px solid var(--th-line);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
}

/* -------- Typographic lockup (replaces .cc-lockup) ----------------- */
.cc-lockup-2 {
    padding: 14px 16px 14px 18px;
    border-bottom: 1px solid var(--th-line);
    min-height: 52px;
    display: flex;
    align-items: center;
}

/* Stacked — recommended. */
.cc-lockup-2.is-stacked {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-top: 12px;
    padding-bottom: 12px;
    min-height: 64px;
}
.cc-lockup-2.is-stacked .xr-wordmark {
    font-family: var(--th-font-serif);
    font-weight: 500;
    font-size: 13.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--th-ink);
    line-height: 1;
    margin-bottom: 6px;
}
.cc-lockup-2.is-stacked .xr-threshold-rule {
    height: 1.5px;
    width: 56px;
    background: var(--th-xr-bind);
    margin: 0 0 6px 0;
    border-radius: 1px;
}
.cc-lockup-2.is-stacked .cc-lockup-product {
    font-family: var(--th-font-serif);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.005em;
    color: var(--th-marigold-deep);
    line-height: 1;
}

/* Inline — alternate. */
.cc-lockup-2.is-inline {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.cc-lockup-2.is-inline .xr-wordmark {
    font-family: var(--th-font-serif);
    font-weight: 500;
    font-size: 11.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--th-ink);
    line-height: 1;
}
.cc-lockup-2.is-inline .xr-divider {
    width: 1px;
    height: 16px;
    background: var(--th-xr-bind);
    flex: none;
}
.cc-lockup-2.is-inline .cc-lockup-product {
    font-family: var(--th-font-serif);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.005em;
    color: var(--th-marigold-deep);
    line-height: 1;
}

/* -------- Snapshot-test inline override (Phase 5) -----------------
   When index.html's pre-paint script sets data-lockup-layout="inline"
   on <html> (driven by the localStorage key snapshot tests set before
   navigation), restyle the stacked lockup markup to match the inline
   variant. Production users never have the localStorage key set, so
   these rules stay dormant. The Blazor side is unaware — NavMenu
   continues to render Layout="stacked".

   The two variants use different child elements in markup (.xr-threshold-rule
   vs .xr-divider), so the override resizes the threshold rule into a
   vertical divider rather than relying on the .xr-divider element to
   appear. Token references stay aligned with the .is-inline rules
   above; this is a structural transform of the same chrome, not a
   second design. */
[data-lockup-layout="inline"] .cc-lockup-2.is-stacked {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
    padding-bottom: 14px;
    min-height: 52px;
}
[data-lockup-layout="inline"] .cc-lockup-2.is-stacked .xr-wordmark {
    font-size: 11.5px;
    letter-spacing: 0.16em;
    margin-bottom: 0;
}
[data-lockup-layout="inline"] .cc-lockup-2.is-stacked .xr-threshold-rule {
    width: 1px;
    height: 16px;
    margin: 0;
    border-radius: 0;
}
[data-lockup-layout="inline"] .cc-lockup-2.is-stacked .cc-lockup-product {
    font-size: 16px;
}

/* -------- Tenant identity strip ----------------------------------- */
.cc-tenant {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--th-line);
    cursor: pointer;
}
.cc-tenant:hover { background: var(--th-paper-2); }

/* v1 display-only override (ADR-0034) — neutralise hover affordance
   so the chip doesn't look interactive when no switcher is attached. */
.cc-tenant--display-only,
.cc-tenant--display-only:hover {
    cursor: default;
    background: transparent;
}

.cc-tenant-crest {
    width: 26px; height: 26px;
    border-radius: 4px;
    background: linear-gradient(140deg, var(--th-marigold-deep), oklch(35% 0.07 50));
    color: var(--th-paper);
    display: grid; place-items: center;
    font-family: var(--th-font-serif);
    font-weight: 600;
    font-size: 13px;
    flex-shrink: 0;
    letter-spacing: -0.01em;
}
.cc-tenant-body { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; flex: 1; }
.cc-tenant-name {
    font-size: var(--th-size-13);
    font-weight: 600;
    color: var(--th-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Phase 5: .cc-tenant-meta rule removed — TenantChip trim per v5 handoff
   dropped the ADMIN badge / FALL 2026 meta line; the chip is now
   crest + name + switch icon only. */
.cc-tenant-switch { color: var(--th-ink-4); display: inline-flex; }

/* -------- Nav stack ------------------------------------------------ */
.cc-nav {
    flex: none;
    padding: 14px 8px 10px;
}
.cc-nav-section {
    margin-bottom: 14px;
}
.cc-nav-section-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--th-ink-4);
    padding: 6px 10px 4px;
}
/* Aspirational group: header with no entries (e.g., PROSPECTS, COMMUNICATIONS,
   INTEGRATIONS pre-build). Softened to communicate "structure exists, content
   not yet" without introducing a new accent. */
.cc-nav-section.is-aspirational {
    opacity: 0.5;
}
.cc-nav-section.is-aspirational .cc-nav-section-label {
    color: var(--th-ink-4);
}
.cc-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    margin: 1px 0;
    border-radius: var(--th-radius-3);
    color: var(--th-ink-2);
    font-size: var(--th-size-14);
    cursor: pointer;
    position: relative;
    user-select: none;
    text-decoration: none;
}
.cc-nav-item:hover { background: oklch(89% 0.006 80); color: var(--th-ink); }
.cc-nav-item.is-active,
.cc-nav-item.active {
    background: var(--th-paper-sunk);
    color: var(--th-ink);
    font-weight: 500;
    box-shadow: inset 0 0 0 1px var(--th-line);
}
.cc-nav-item.is-active::before,
.cc-nav-item.active::before {
    content: "";
    position: absolute;
    left: -8px; top: 50%;
    width: 2px; height: 16px;
    background: var(--th-advant);
    border-radius: 1px;
    transform: translateY(-50%);
}
.cc-nav-ico {
    color: var(--th-ink-3);
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}
.cc-nav-item.is-active .cc-nav-ico,
.cc-nav-item.active .cc-nav-ico { color: var(--th-advant-deep); }

/* Coming-soon placeholder: visible nav entry that is not a destination yet.
   Muted weight + non-interactive; the italic "(coming soon)" meta makes the
   placeholder status unambiguous. */
.cc-nav-item.is-coming-soon {
    opacity: 0.5;
    pointer-events: none;
    cursor: default;
}
.cc-nav-item.is-coming-soon:hover {
    background: transparent;
    color: var(--th-ink-2);
}
.cc-nav-coming-soon-meta {
    font-style: italic;
    color: var(--th-ink-4);
    margin-left: 4px;
}

.cc-nav-children {
    margin: 2px 0 4px 26px;
    padding-left: 10px;
    border-left: 1px solid var(--th-line);
}
.cc-nav-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    font-size: var(--th-size-13);
    color: var(--th-ink-2);
    border-radius: var(--th-radius-3);
    cursor: pointer;
    margin: 1px 0;
    text-decoration: none;
}
.cc-nav-child:hover { background: oklch(89% 0.006 80); color: var(--th-ink); }
.cc-nav-child.is-active,
.cc-nav-child.active { color: var(--th-ink); font-weight: 500; background: var(--th-advant-soft); }
.cc-nav-child-count {
    font-family: var(--th-font-mono);
    font-size: 11px;
    color: var(--th-ink-3);
    font-variant-numeric: tabular-nums;
}
.cc-nav-child.is-active .cc-nav-child-count,
.cc-nav-child.active .cc-nav-child-count { color: var(--th-advant-deep); }

/* -------- User block ----------------------------------------------
   Relocated from the topbar to the sidenav floor in Phase 5. The
   chevron click toggles the cc-user-menu, which opens UPWARD because
   the chip sits at the bottom of the sidenav above the footer. Phase 5
   adds: .cc-user.is-open (active state), .cc-user-chevron (icon slot),
   .cc-user-menu (popup), .cc-user-menu-item, .cc-user-menu-sep,
   .cc-user--signed-out (NotAuthorized variant rendered as a sign-in
   link). */
.cc-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin: 4px 8px 0;
    border-radius: var(--th-radius-3);
    cursor: pointer;
    position: relative;
    user-select: none;
}
.cc-user:hover { background: var(--th-paper-2); }
.cc-user.is-open { background: var(--th-paper-2); }
.cc-user-spacer { flex: 1; min-height: 24px; }
.cc-user-avatar {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: oklch(50% 0.08 220);
    color: var(--th-paper);
    display: grid; place-items: center;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}
.cc-user-body { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; flex: 1; }
.cc-user-name { font-size: var(--th-size-13); font-weight: 500; color: var(--th-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-user-role { font-size: 11px; color: var(--th-ink-3); }
.cc-user-chevron {
    color: var(--th-ink-4);
    transition: transform 120ms ease;
    flex-shrink: 0;
}
.cc-user.is-open .cc-user-chevron { transform: rotate(180deg); }

/* Upward-opening popup menu. Positioned absolutely above the chip; the
   bottom: 100% + margin-bottom keeps a small gap between menu and chip. */
.cc-user-menu {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 8px;
    right: 8px;
    background: var(--th-paper);
    border: 1px solid var(--th-line);
    border-radius: var(--th-radius-3);
    box-shadow: 0 6px 16px oklch(20% 0.01 255 / 0.10);
    padding: 4px;
    z-index: 50;
    display: flex;
    flex-direction: column;
}
.cc-user-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: var(--th-radius-3);
    font-size: var(--th-size-13);
    color: var(--th-ink);
    text-decoration: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    width: 100%;
}
.cc-user-menu-item:hover { background: var(--th-paper-2); }
.cc-user-menu-item i { color: var(--th-ink-3); width: 16px; text-align: center; }
.cc-user-menu-sep {
    height: 1px;
    background: var(--th-line);
    margin: 4px 0;
}

/* NotAuthorized fallback — rendered as an anchor link to the login flow.
   No avatar, no body row, no menu. Same chip dimensions for layout
   stability across auth state transitions. */
.cc-user--signed-out {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin: 4px 8px 0;
    border-radius: var(--th-radius-3);
    color: var(--th-ink);
    font-size: var(--th-size-13);
    text-decoration: none;
    cursor: pointer;
}
.cc-user--signed-out:hover { background: var(--th-paper-2); color: var(--th-ink); }
.cc-user--signed-out i { color: var(--th-ink-3); }

/* ==================================================================
   Main column
   ================================================================== */
.cc-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--th-paper);
}

/* Topbar */
.cc-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    height: var(--th-chrome-topbar-h);
    padding: 0 20px 0 24px;
    border-bottom: 1px solid var(--th-line);
    background: var(--th-paper);
    flex: none;
}
.cc-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--th-size-14);
    color: var(--th-ink-3);
    flex: 1;
    min-width: 0;
}
.cc-breadcrumb-sep { color: var(--th-ink-4); font-size: 11px; }
.cc-breadcrumb-leaf { color: var(--th-ink); font-weight: 500; }

/* cc-topbar-search — placeholder palette trigger. Renders as a <button> so
   the click-to-open affordance is canonical even though the universal
   command palette ships later. Button-reset (transparent base, no default
   chrome) and same look as the handoff's div-shaped element. */
.cc-topbar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--th-paper-2);
    border: 1px solid var(--th-line);
    border-radius: var(--th-radius-5);
    padding: 5px 10px;
    width: 280px;
    font-size: var(--th-size-13);
    color: var(--th-ink-3);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: border-color 80ms ease, background 80ms ease;
}
.cc-topbar-search:hover { border-color: var(--th-ink-4); background: var(--th-paper); }
.cc-topbar-search:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--th-advant-soft);
}
.cc-topbar-search-icon { color: var(--th-ink-4); display: inline-flex; }
.cc-topbar-search-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-topbar-search kbd {
    margin-left: auto;
    font-family: var(--th-font-mono);
    font-size: 10px;
    color: var(--th-ink-4);
    border: 1px solid var(--th-line);
    background: var(--th-paper);
    border-radius: 3px;
    padding: 0 4px;
}

.cc-topbar-actions { display: flex; align-items: center; gap: 4px; }

.cc-icon-btn {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border-radius: var(--th-radius-3);
    color: var(--th-ink-2);
    cursor: pointer;
    position: relative;
    background: transparent;
    border: 0;
}
.cc-icon-btn:hover { background: var(--th-paper-2); color: var(--th-ink); }
.cc-icon-btn-dot {
    position: absolute;
    top: 6px; right: 6px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--th-marigold-deep);
    border: 1.5px solid var(--th-paper);
}

/* Theme switch — segmented sun | moon pill. Both icons visible; the
   active icon gets the lift treatment (var(--th-paper-sunk) chip + accent
   color); the inactive icon stays muted. Click anywhere on the pill
   flips theme. Per v5 handoff chrome.css (.cc-theme-switch / .cc-theme-opt). */
.cc-theme-switch {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--th-line);
    border-radius: var(--th-radius-pill);
    background: var(--th-paper-2);
    padding: 2px;
    margin-right: 4px;
    gap: 0;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 80ms ease, background 80ms ease;
}
.cc-theme-switch:hover { border-color: var(--th-ink-4); }
.cc-theme-switch:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--th-advant-soft);
}
.cc-theme-opt {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 22px;
    color: var(--th-ink-4);
    border-radius: var(--th-radius-pill);
    transition: background 80ms ease, color 80ms ease;
}
.cc-theme-opt.is-active {
    background: var(--th-paper-sunk);
    color: var(--th-marigold-deep);
    box-shadow: 0 1px 2px oklch(20% 0.01 255 / 0.08);
}

/* Page area inside main column.
 *
 * display: flex + flex-direction: column is required so descendants like
 * <BuilderShell> (.fb-builder-shell with flex: 1; min-height: 0) actually
 * receive a definite height to flex against. Without it the shell falls back
 * to its content's natural height — the form-builder canvas can't bound its
 * overflow:auto, and a long form scrolls the page instead of the canvas. The
 * form-builder layout-invariant smoke (canvas scrolls internally; page-level
 * scroll containers stay at zero) catches that regression. */
.cc-page {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    padding: 4px 24px 0;
    display: flex;
    flex-direction: column;
}

/* Page-head title row */
.cc-page-head {
    padding: 22px 0 14px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}
.cc-page-head h1 {
    margin: 0;
    font-family: var(--th-font-serif);
    font-weight: 500;
    font-size: var(--th-size-24);
    letter-spacing: -0.012em;
    color: var(--th-ink);
}
.cc-page-head .sub {
    margin-top: 4px;
    font-size: var(--th-size-13);
    color: var(--th-ink-3);
}

/* ==================================================================
   Footer — signature chrome.
   ================================================================== */
.cc-footer {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 32px;
    padding: 18px 24px 20px;
    background: var(--th-paper);
    border-top: 1px solid var(--th-line);
    font-family: var(--th-font-sans);
    color: var(--th-ink-3);
    font-size: var(--th-size-13);
    flex: none;
}

.cc-foot-endorse {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cc-foot-endorse-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    gap: 5px;
}
.cc-foot-endorse-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--th-ink-3);
    letter-spacing: 0.005em;
}
.cc-foot-endorse-line .product-of {
    font-style: italic;
    font-family: var(--th-font-serif);
    color: var(--th-ink-3);
    font-size: 13px;
}
.cc-foot-advant-wm {
    font-family: var(--th-font-serif);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--th-ink);
    line-height: 1;
}
.cc-foot-bind-rule {
    height: 1px;
    width: 28px;
    background: var(--th-xr-bind);
    border-radius: 0.5px;
}
.cc-foot-copyright {
    font-family: var(--th-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 10.5px;
    color: var(--th-ink-4);
    letter-spacing: 0.02em;
}

.cc-foot-nav {
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: 12px;
}
.cc-foot-nav a,
.cc-foot-nav .cc-foot-link {
    color: var(--th-ink-3);
    text-decoration: none;
    cursor: pointer;
    letter-spacing: 0.005em;
}
.cc-foot-nav a:hover,
.cc-foot-nav .cc-foot-link:hover { color: var(--th-ink); }
.cc-foot-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--th-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--th-ink-3);
}
.cc-foot-status .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--th-ok);
}

/* Constrained variant — narrow dialogs, settings panels. */
.cc-footer.is-constrained {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px 18px 16px;
    text-align: left;
}
.cc-footer.is-constrained .cc-foot-nav {
    gap: 16px;
    font-size: 11.5px;
}
.cc-footer.is-constrained .cc-foot-endorse-text { gap: 4px; }
.cc-footer.is-constrained .cc-foot-bind-rule { width: 20px; }
.cc-footer.is-constrained .cc-foot-copyright { font-size: 10px; }

/* ==================================================================
   Status pill + button atoms — kept inside the chrome layer because
   destinations reference .cc-pill / .cc-btn for status displays and
   destination-level CTAs that don't read as Bootstrap atoms.
   ================================================================== */
.cc-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 7px;
    border-radius: var(--th-radius-pill);
    font-size: 11px;
    font-weight: 500;
    font-family: var(--th-font-sans);
    letter-spacing: 0.01em;
    line-height: 1.6;
    border: 1px solid transparent;
}
.cc-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cc-pill > .meta {
    opacity: 0.85;
    font-family: var(--th-f-mono);
    font-weight: 500;
}
.cc-pill.is-ok    { background: var(--th-ok-soft);   color: oklch(38% 0.10 155); }
.cc-pill.is-warn  { background: var(--th-warn-soft); color: oklch(42% 0.13 65); }
.cc-pill.is-risk  { background: var(--th-risk-soft); color: oklch(40% 0.14 25); }
.cc-pill.is-info  { background: var(--th-info-soft); color: oklch(38% 0.12 230); }
.cc-pill.is-neutral { background: var(--th-paper-2); color: var(--th-ink-2); border-color: var(--th-line); }

/* Outlined — transparent fill, colored border + ink (modifier composes
   with any tone — .cc-pill.is-ok.is-outlined etc.). */
.cc-pill.is-outlined { background: transparent; }

/* Dot-only — no fill, no border; dot + text only. */
.cc-pill.is-dot {
    background: transparent;
    border-color: transparent;
    padding: 1px 4px;
}
.cc-pill.is-dot > .dot {
    width: 7px;
    height: 7px;
    box-shadow: 0 0 0 2px color-mix(in oklab, currentColor 18%, transparent);
}

/* Small variant — tighter padding + slightly smaller font. */
.cc-pill.is-sm { padding: 1px 7px; font-size: 11px; }

.cc-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: var(--th-radius-3);
    font-size: var(--th-size-13);
    font-weight: 500;
    font-family: var(--th-font-sans);
    border: 1px solid var(--th-line-2);
    background: var(--th-paper-sunk);
    color: var(--th-ink);
    cursor: pointer;
    line-height: 1.4;
}
.cc-btn:hover { background: var(--th-paper-2); border-color: var(--th-ink-4); }
.cc-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--cx-action-soft);
    border-color: var(--cx-action);
}
.cc-btn:disabled,
.cc-btn[aria-disabled="true"]:not(.is-blocked):not(.is-primary--blocked) {
    background: var(--th-paper-2);
    color: var(--th-ink-4);
    border-color: var(--th-line);
    cursor: not-allowed;
}

/* ── is-primary ─────────────────────────────────────────────────────
   Per canon v6.1 Group 0 — consumes --cx-action (semantic action
   token) instead of --th-advant-deep. In form-builder context
   --cx-action resolves to marigold copper per the 2026-05-25
   handoff-color-fix; Threshold-wide, --cx-action is defined at :root
   in form-builder-tokens.css so this atom resolves correctly
   anywhere the chrome ships. Dark-variant cascade auto-tracks via
   --cx-action's [data-bs-theme="dark"] retune — no per-mode
   override needed. */
.cc-btn.is-primary {
    background: var(--cx-action);
    border-color: var(--cx-action);
    color: var(--cx-ink-on-action);
}
.cc-btn.is-primary:hover {
    background: var(--cx-action-hover);
    border-color: var(--cx-action-hover);
}
.cc-btn.is-primary:focus-visible {
    box-shadow: 0 0 0 3px var(--cx-action-soft-strong);
    border-color: var(--cx-action);
}
.cc-btn.is-primary:disabled,
.cc-btn.is-primary[aria-disabled="true"]:not(.is-blocked):not(.is-primary--blocked) {
    background: oklch(from var(--cx-action) l calc(c * 0.3) h / 0.55);
    border-color: oklch(from var(--cx-action) l calc(c * 0.3) h / 0.55);
    color: var(--cx-ink-on-action);
}

.cc-btn.is-ghost { background: transparent; border-color: transparent; color: var(--th-ink-2); }
.cc-btn.is-ghost:hover { background: var(--th-paper-2); color: var(--th-ink); }
.cc-btn.is-ghost:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--cx-action-soft);
}

/* ── is-danger ─────────────────────────────────────────────────────
   Outlined red on light substrate, error-tone palette via --cx-*
   per the 2026-05-25 handoff-color-fix cycle (commit 74cc899). Danger
   stays distinct per design-system §10 — focus uses --cx-error, not
   the global action outline. Backfilled per audit finding #3 (Phase 1
   Session 1); form-builder consumer migrated in Phase 2 B2.1 (commit
   ffecd36). */
.cc-btn.is-danger {
    background: var(--cx-error-soft);
    color: var(--cx-error);
    border-color: var(--cx-error-border);
}
.cc-btn.is-danger:hover {
    background: oklch(from var(--th-risk) l c h / 0.16);
    border-color: oklch(from var(--th-risk) l c h / 0.60);
}
.cc-btn.is-danger:focus-visible {
    outline: 2px solid var(--cx-error);
    outline-offset: 1px;
    box-shadow: none;
}

/* ── is-muted ──────────────────────────────────────────────────────
   Ghost-shaped button rendered at muted ink — used for restrained
   actions ("View errors", "Open in editor", "Reset"). Form-builder
   consumer migrated in Phase 2 B2.1 (commit ffecd36). Not in canon's
   chrome.css; impl-needed variant added during backfill (canon handoff
   D batch should canonicalize). */
.cc-btn.is-muted {
    background: transparent;
    border-color: transparent;
    color: var(--th-ink-3);
}
.cc-btn.is-muted:hover:not(:disabled) {
    background: var(--cx-action-soft);
    border-color: var(--cx-action-border);
    color: var(--th-ink);
}
.cc-btn.is-muted:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--cx-action-soft);
}

/* ── is-icon ───────────────────────────────────────────────────────
   28×28 square for topbar quick actions (sparkle / bell / theme-flip).
   Same shape as the existing .cc-icon-btn at line 500 — kept as a
   .cc-btn variant for consumer migration (Phase 2 B2 may consolidate
   the two paths once .cc-icon-btn consumers are identified). */
.cc-btn.is-icon {
    width: 28px;
    height: 28px;
    padding: 0;
    justify-content: center;
    background: transparent;
    border-color: transparent;
    color: var(--th-ink-2);
    position: relative;
}
.cc-btn.is-icon:hover {
    background: var(--th-paper-2);
    color: var(--th-ink);
}
.cc-btn.is-icon > .cc-btn-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--th-marigold-deep);
    border: 1.5px solid var(--th-paper);
}

/* ── is-blocked / is-primary--blocked ─────────────────────────────
   Disabled-with-reason variant per design-system §7. Uses
   aria-disabled instead of disabled so the click still fires (routes
   to the validation-summary footer). Per canon v6.1 (formalized
   from impl during the round-trip), the visual reads as a muted
   action color — not an error-tone treatment. The button stays
   visibly "the action you can't take" instead of switching to a
   different palette. Error semantics surface via the error count
   in the .cc-btn-count slot + the focus-visible error ring. */
.cc-btn.is-blocked,
.cc-btn.is-primary.is-primary--blocked,
.cc-btn.is-primary.is-blocked {
    background: oklch(from var(--cx-action) l calc(c * 0.55) h / 0.65);
    border-color: oklch(from var(--cx-action) l calc(c * 0.55) h / 0.65);
    color: var(--cx-ink-on-action);
    cursor: not-allowed;
}
.cc-btn.is-blocked:hover,
.cc-btn.is-primary--blocked:hover,
.cc-btn.is-primary.is-blocked:hover {
    background: oklch(from var(--cx-action) l calc(c * 0.55) h / 0.65);
    border-color: oklch(from var(--cx-action) l calc(c * 0.55) h / 0.65);
}
.cc-btn.is-blocked:focus-visible,
.cc-btn.is-primary--blocked:focus-visible {
    box-shadow: 0 0 0 3px var(--cx-error-soft);
    border-color: var(--cx-error-border);
}
.cc-btn.is-blocked > .cc-btn-count,
.cc-btn.is-primary--blocked > .cc-btn-count {
    font-family: var(--th-f-mono);
    font-size: 10.5px;
    color: inherit;
    opacity: 0.85;
    background: oklch(from var(--cx-error) l c h / 0.20);
    border: 1px solid oklch(from var(--cx-error) l c h / 0.45);
    border-radius: 999px;
    padding: 0 6px;
    margin-left: 2px;
}

/* ── is-rule ──────────────────────────────────────────────────────
   Primary button that commits a rule reference (rule popover Save
   CTA). Rule-purple instead of action-copper — visually ties the
   button to the rule-purple chip family it commits to. Per audit
   finding #22 (Phase 1 Session 3) — intentional VALUE-MISMATCH vs
   --cx-action that should be preserved as a canonical variant.
   Form-builder's .fb-cta-button--primary migrates here in Phase 2 B2. */
.cc-btn.is-rule {
    background: var(--cx-rule);
    border-color: var(--cx-rule);
    color: #ffffff;
}
.cc-btn.is-rule:hover {
    background: oklch(from var(--cx-rule) calc(l - 0.06) c h);
    border-color: oklch(from var(--cx-rule) calc(l - 0.06) c h);
}
.cc-btn.is-rule:focus-visible {
    box-shadow: 0 0 0 3px var(--cx-rule-soft);
    border-color: var(--cx-rule);
}
.cc-btn.is-rule:disabled,
.cc-btn.is-rule[aria-disabled="true"] {
    background: oklch(from var(--cx-rule) l calc(c * 0.3) h / 0.55);
    border-color: oklch(from var(--cx-rule) l calc(c * 0.3) h / 0.55);
    color: #ffffff;
}

/* ── is-sm ────────────────────────────────────────────────────────
   Density modifier per canon v6.1 Group 5. Tighter padding + smaller
   font for in-drawer / in-row button density. Composes with any role
   variant (.is-ghost / .is-primary / .is-danger / etc.). Pairs with
   .cc-segmented.is-small / .cc-pill.is-sm sibling pattern. */
.cc-btn.is-sm {
    padding: 3px 8px;
    font-size: 11.5px;
    gap: 4px;
}
.cc-btn.is-sm > kbd,
.cc-btn.is-sm .cc-kbd {
    font-size: 9.5px;
    padding: 0 3px;
}

/* ── Keyboard hint pill inside buttons (⌘K, /) ────────────────────
   .cc-btn > kbd inherits the button's foreground so it tones with
   the variant. The standalone .cc-kbd atom (below) carries the same
   visual but stands alone. */
.cc-btn > kbd {
    font-family: var(--th-f-mono);
    font-size: 10px;
    color: var(--th-ink-4);
    background: var(--th-paper);
    border: 1px solid var(--th-line);
    border-radius: 3px;
    padding: 0 4px;
    margin-left: 2px;
}

/* ==================================================================
   Section divider with serif label — editorial moment used by
   page-level chrome on Authoring destinations.
   ================================================================== */
.cc-section-rule {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 28px 0 14px;
}
.cc-section-rule .label {
    font-family: var(--th-font-serif);
    font-size: var(--th-size-15);
    font-style: italic;
    color: var(--th-marigold-deep);
    font-weight: 500;
}
.cc-section-rule .rule {
    flex: 1;
    height: 1px;
    background: var(--th-line);
}
.cc-section-rule .meta {
    font-size: 11px;
    color: var(--th-ink-4);
    font-family: var(--th-font-mono);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ==================================================================
   Banners — cross-tenant (cyan) + impersonation (amber)
   --------------------------------------------------------------------
   Persistent session signals required by ADR-0034. Lifted from the
   design handoff (prototypes/07-handoff-doc/handoff.css §4
   "SYSTEM-STATE MOCKS").

   The --banner-* tokens are defined locally here (rather than in
   threshold-tokens.css's brand layer) because they encode a
   surface-specific palette, not a brand-layer primitive — only the
   .cc-banner rules below consume them. They have no dark-mode override
   by design: cyan and amber are session-flavor signals, not surface
   accents that should track theme; they read identically across both
   themes per the snapshot fixtures. Locked-accent inventory (ADR-0035
   Hard Rule 4) is unaffected: no --th-xr-bind, no --th-marigold-deep
   here.

   Per-flavor tokens: bg (fill), bg-hover (action button hover),
   fg (label + body shared text ink), strong-fg (body strong-bolds —
   tenant name, "yourself", impersonated name; visually heavier),
   em-fg (body italics — operator name, audit attribution; between
   fg and strong-fg), edge (3px ::before accent and action button
   border — same oklch by design), rule (border-bottom).

   Text colors are theme-invariant too so contrast against the
   theme-invariant background is consistent in both themes. Pairing
   them with --th-ink / --th-ink-2 (which DO track theme) produced
   WCAG AA failures for the body strong-bolds and italics in dark
   mode — surfaced by the Phase 3 live smoke.
   ================================================================== */
:root {
    --banner-cross-tenant-bg:         oklch(96% 0.025 220);
    --banner-cross-tenant-bg-hover:   oklch(92% 0.04  220);
    --banner-cross-tenant-fg:         oklch(26% 0.06  220);
    --banner-cross-tenant-strong-fg:  oklch(18% 0.08  220);
    --banner-cross-tenant-em-fg:      oklch(22% 0.08  220);
    --banner-cross-tenant-edge:       oklch(45% 0.13  220);
    --banner-cross-tenant-rule:       oklch(70% 0.09  220);

    --banner-impersonation-bg:        oklch(96% 0.04  75);
    --banner-impersonation-bg-hover:  oklch(93% 0.06  75);
    --banner-impersonation-fg:        oklch(30% 0.07  55);
    --banner-impersonation-strong-fg: oklch(22% 0.10  55);
    --banner-impersonation-em-fg:     oklch(26% 0.10  55);
    --banner-impersonation-edge:      oklch(55% 0.15  55);
    --banner-impersonation-rule:      oklch(70% 0.13  65);
}

.cc-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 16px 9px 14px;
    font-family: var(--th-font-sans);
    font-size: var(--th-size-13);
    border-bottom: 1px solid;
}
.cc-banner::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0; width: 3px;
}
.cc-banner .ico { display: inline-grid; place-items: center; }
.cc-banner .label {
    font-family: var(--th-font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
}
/* Body text inherits color from the variant block below (var(--banner-*-fg)).
   strong + em get explicit per-variant tokens for visual hierarchy. The base
   --ink / --ink-2 tokens deliberately don't appear here — they track theme,
   the banner backgrounds do not, and pairing them produced WCAG AA failures
   for the body strong-bolds and italics in dark mode (surfaced by Phase 3
   live smoke). */
.cc-banner .body { line-height: 1.4; }
.cc-banner .body strong { font-weight: 600; }
.cc-banner .body .em { font-family: var(--th-font-serif); font-style: italic; }
.cc-banner .spacer { flex: 1; }
.cc-banner .action {
    font-family: var(--th-font-sans);
    font-size: 12px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: var(--th-radius-3);
    border: 1px solid;
    cursor: pointer;
    background: transparent;
}

/* Cross-tenant cyan — operator working AS THEMSELVES in another tenant */
.cc-banner.is-cross-tenant {
    background: var(--banner-cross-tenant-bg);
    border-bottom-color: var(--banner-cross-tenant-rule);
    color: var(--banner-cross-tenant-fg);
}
.cc-banner.is-cross-tenant::before { background: var(--banner-cross-tenant-edge); }
.cc-banner.is-cross-tenant .label { color: var(--banner-cross-tenant-fg); }
.cc-banner.is-cross-tenant .body strong { color: var(--banner-cross-tenant-strong-fg); }
.cc-banner.is-cross-tenant .body .em { color: var(--banner-cross-tenant-em-fg); }
.cc-banner.is-cross-tenant .action {
    border-color: var(--banner-cross-tenant-edge);
    color: var(--banner-cross-tenant-fg);
}
.cc-banner.is-cross-tenant .action:hover {
    background: var(--banner-cross-tenant-bg-hover);
}

/* Impersonation amber — operator working AS another user */
.cc-banner.is-impersonation {
    background: var(--banner-impersonation-bg);
    border-bottom-color: var(--banner-impersonation-rule);
    color: var(--banner-impersonation-fg);
}
.cc-banner.is-impersonation::before { background: var(--banner-impersonation-edge); }
.cc-banner.is-impersonation .label { color: var(--banner-impersonation-fg); }
.cc-banner.is-impersonation .body strong { color: var(--banner-impersonation-strong-fg); }
.cc-banner.is-impersonation .body .em { color: var(--banner-impersonation-em-fg); }
.cc-banner.is-impersonation .action {
    border-color: var(--banner-impersonation-edge);
    color: var(--banner-impersonation-fg);
}
.cc-banner.is-impersonation .action:hover {
    background: var(--banner-impersonation-bg-hover);
}

/* ==================================================================
   Toast stack — canonical toast surface as of the Phase 4 close.
   Replaces the prior DxToastProvider mount, which was removed from
   MainLayout. Top-right placement mirrors the legacy alignment so the
   migration is chrome-only. Status colors resolve via --ok / --warn /
   --risk token variants so dark mode tracks automatically. Admin
   destinations still inject IToastNotificationService; their calls
   silently no-op pending the parallel admin redesign cycle.
   ================================================================== */
.cc-toast-stack {
    position: fixed;
    top: calc(var(--th-chrome-topbar-h) + 12px);
    right: 16px;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    max-width: 360px;
}
.cc-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--th-line-2);
    border-left-width: 3px;
    border-radius: var(--th-radius-3);
    background: var(--th-paper-sunk);
    color: var(--th-ink);
    font-family: var(--th-font-sans);
    font-size: var(--th-size-14);
    line-height: 1.4;
}
.cc-toast__body {
    flex: 1 1 auto;
    min-width: 0;
}
.cc-toast__close {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    padding: 0;
    margin: -2px -4px 0 0;
    color: var(--th-ink-3);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.cc-toast__close:hover { color: var(--th-ink); }
.cc-toast--info  { border-left-color: var(--th-advant); }
.cc-toast--ok    { border-left-color: var(--th-ok); }
.cc-toast--warn  { border-left-color: var(--th-warn); }
.cc-toast--risk  { border-left-color: var(--th-risk); }

/* ==================================================================
   Phase 2 B1 backfilled atoms — canon .cc-* shared atoms previously
   missing from impl per CSS audit finding #19. Atoms land here
   alongside existing .fb-* re-implementations until Phase 2 B2
   consumer migration swaps the consumers.
   ================================================================== */

/* ── .cc-kbd ───────────────────────────────────────────────────────
   Standalone keyboard-hint pill. Same visual as .cc-btn > kbd; used
   outside button context (palette footer hint, section-kebab menu
   hint slots). Form-builder consumers migrated in Phase 2 B2.1
   (commit ffecd36). */
.cc-kbd {
    font-family: var(--th-f-mono);
    font-size: 10px;
    color: var(--th-ink-4);
    background: var(--th-paper);
    border: 1px solid var(--th-line);
    border-radius: 3px;
    padding: 0 4px;
}

/* ── .cc-eyebrow ───────────────────────────────────────────────────
   Small-caps mono label above a title. The most-re-implemented atom
   per the CSS audit — form-builder ships at least 7 BEM-chained
   re-implementations (.fb-properties-panel__eyebrow,
   .fb-properties-body__heading, .fb-drawer-header__eyebrow,
   .fb-meta-cell__label, .fb-publish-section__title,
   .fb-versions-section__title, .fb-history-session blocks). Phase 2
   B2 consolidates them all here. */
.cc-eyebrow {
    font-family: var(--th-f-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--th-ink-3);
}

/* ── .cc-switch ────────────────────────────────────────────────────
   Boolean toggle (iOS-style pill). Form-builder's _shared/Switch.razor.css
   migrates here in Phase 2 B2 (and form-builder properties panel
   toggles consume via the Switch primitive). */
.cc-switch {
    width: 30px;
    height: 17px;
    border-radius: 999px;
    background: var(--th-line-2);
    position: relative;
    display: inline-block;
    flex: 0 0 30px;
    cursor: pointer;
    transition: background 100ms;
    border: none;
    padding: 0;
}
.cc-switch::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--th-paper-sunk);
    box-shadow: 0 1px 2px oklch(20% 0.01 255 / 0.32);
    transition: left 120ms;
}
.cc-switch.is-on { background: var(--cx-action); }
.cc-switch.is-on::before { left: 15px; }
.cc-switch.is-locked {
    background: color-mix(in oklch, var(--cx-action) 50%, var(--th-paper-sunk));
}
.cc-switch:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--cx-action-soft);
}
.cc-switch[disabled],
.cc-switch[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── .cc-segmented ─────────────────────────────────────────────────
   2–3 mutually-exclusive options on one line. Children may be
   <button> (view-filter pattern: Show all / Mine only) OR
   <label><input type="radio"></label> (form-state pattern: Display-
   action Show / Hide). Canon v6.1 Group 4 ships both via parallel
   selectors. Active state for buttons uses .is-active modifier;
   active state for labels reads from the inner radio's :checked via
   :has() — form binding stays native + accessible. */
.cc-segmented {
    display: inline-flex;
    border: 1px solid var(--th-line-2);
    border-radius: 5px;
    overflow: hidden;
    background: var(--th-paper-sunk);
}
.cc-segmented > button,
.cc-segmented > label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 12px;
    font-size: 12.5px;
    font-weight: 500;
    font-family: var(--th-f-sans);
    color: var(--th-ink-2);
    background: transparent;
    border: none;
    border-left: 1px solid var(--th-line-2);
    cursor: pointer;
    line-height: 1.4;
    transition: background 80ms, color 80ms;
    position: relative;
}
.cc-segmented > button:first-child,
.cc-segmented > label:first-child { border-left: none; }
.cc-segmented > button:hover,
.cc-segmented > label:hover { background: var(--th-paper-2); color: var(--th-ink); }

/* Visually-hidden radio input inside the <label> children — keeps the
   element in the accessibility tree + focus order without rendering its
   native widget. The label's :has() selector reads the :checked state. */
.cc-segmented > label > input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

.cc-segmented > button.is-active,
.cc-segmented > label:has(> input[type="radio"]:checked) {
    color: #ffffff;
    background: var(--cx-action);
}
.cc-segmented > button:focus-visible,
.cc-segmented > label:focus-within {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--cx-action-soft);
}
.cc-segmented > label:has(> input[type="radio"]:disabled) {
    cursor: not-allowed;
    color: var(--th-ink-4);
}
.cc-segmented.is-small > button,
.cc-segmented.is-small > label {
    padding: 4px 10px;
    font-size: 12px;
}

/* ── .cc-field-icon ────────────────────────────────────────────────
   Soft-tinted square for field-type / section-type eyebrow headers.
   Form-builder's _shared/KindGlyph primitive migrates here in Phase
   2 B2. Three tone variants per canon chrome.css: advant (blue-soft
   tint for generic fields), copper (marigold-soft for editorial),
   neutral (paper-toned for system fields). Two sizes: default 28×28
   and .is-sm 22×22. */
.cc-field-icon {
    width: 28px;
    height: 28px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border: 1px solid transparent;
}
.cc-field-icon.is-sm { width: 22px; height: 22px; }
.cc-field-icon.is-advant {
    background: var(--th-advant-soft);
    border-color: var(--th-advant-soft);
    color: var(--th-advant-deep);
}
.cc-field-icon.is-copper {
    background: var(--th-marigold-soft);
    border-color: var(--th-marigold-soft);
    color: var(--th-marigold-deep);
}
.cc-field-icon.is-neutral {
    background: var(--th-paper-2);
    border-color: var(--th-line-2);
    color: var(--th-ink-2);
}

/* ── .cc-version-trigger ───────────────────────────────────────────
   Form-builder's version status trigger — wraps a StatusPill + chevron
   in a clickable target with a hover well. Form-builder's existing
   .fb-version-trigger (TopBar.razor.css:175) is the consumer that
   migrates here in Phase 2 B2.

   Per CSS audit Phase 1 Session 1, impl re-implements this atom in
   form-builder-scoped TopBar.razor.css; the rest of Threshold
   doesn't ship it (this atom is form-builder-specific in canon but
   lives in chrome.css because the shape is general — Atlas / Compass
   could consume the same trigger pattern). */
.cc-version-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 8px;
    border-radius: 3px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: background 120ms, border-color 120ms;
}
.cc-version-trigger:hover {
    background: var(--cx-action-soft);
    border-color: var(--cx-action-border);
}
.cc-version-trigger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--th-advant-soft);
}
.cc-version-trigger:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}