/* ============================================================
   neg-engine.css  —  F-059 / BU-417
   GLOBAL (non-scoped) rules for the production negotiation engine.
   These target elements rendered INSIDE the BU-408 SVG primitive
   child components (SvgRibbon / SvgArc / SvgBar) - Blazor scoped CSS
   can't reach child-component output, so the cross-component motion +
   hover/dim/flow states live here.

   ZERO hardcoded hex - every colour resolves from --v-* vibe tokens.
   All motion is CSS-only and respects prefers-reduced-motion.
   ============================================================ */

/* ── BU-417 supply-chain flow links: faint curved ribbons drawn BEHIND the
   node-card columns. Kept quiet (the scoped .neg-chain__links sets the low
   opacity); a slow directional dash drift reads as flow without distraction. ── */
.neg-chain__flow.svg-ribbon {
    stroke-dasharray: 4 8;
    animation: neg-flow 1.6s linear infinite;
}

@keyframes neg-flow {
    from { stroke-dashoffset: 12; }
    to   { stroke-dashoffset: 0; }
}

/* ── BU-417 gauges: the value arc grows in on render (the track is static). ── */
.neg-gauge__value.svg-arc {
    animation: neg-fade-in 0.6s ease-out both;
}

/* ── Layer 6 reuse heat map (BU-402): cell intensity transition on load/filter ── */
.neg-heat-cell {
    transition: fill 0.4s ease, opacity 0.3s ease;
    animation: neg-fade-in 0.5s ease-out both;
}

@keyframes neg-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .neg-chain__flow.svg-ribbon {
        animation: none !important;
        stroke-dasharray: none !important;
    }
    .neg-gauge__value.svg-arc {
        animation: none !important;
    }
    .neg-heat-cell {
        animation: none !important;
        transform: none !important;
    }
}

/* ============================================================
   BU-503 — PRODUCTION SPEC WORKBENCH FOLLOWS THE GLOBAL VIBE SKIN
   (supersedes the BU-453/BU-454 private light/dark Compose skin)

   The .neg subtree used to redefine the ENTIRE --v-* scale locally (a hardcoded
   light base + a .neg[data-theme="dark"] override) which, by custom-property
   proximity, WON over the global :root[data-theme="<vibe>"] blocks — so swapping
   carbon-lime / estuary / harbor-night / sepia-ledger never repainted the page.

   That local scale is now REMOVED. Every --v-* the workbench consumes resolves
   straight from the active global vibe (jargan-vibe-palette.css via
   :root[data-theme]) or the vibe-neutral bare :root default. The only tokens kept
   here are local semantic ALIASES the shared palette does not define — each mapped
   onto its vibe-driven counterpart so it, too, follows the active vibe. The private
   "Dark" toggle is gone (light/dark now comes from the vibe). Brand accent stays
   JARGAN Traffic Orange in every vibe (--v-accent-brand, palette-preserved).
   ============================================================ */
.neg {
    /* Local aliases not in the shared vibe palette — routed to their vibe token so
       the workbench recolours with the global skin (BU-503). */
    --v-text:           var(--v-ink);
    --v-text-secondary: var(--v-ink-dim);
    --v-muted:          var(--v-ink-muted);
    --v-ink-faint:      var(--v-ink-muted);
    --v-accent:         var(--v-accent-brand);
    /* Elevation shadow — translucent-black scrim; theme-invariant by design. */
    --v-shadow:         rgba(0, 0, 0, 0.18);
}

/* design-sync v3: Compose Traffic-Orange top edge on the page (CSS-only) */
.neg { border-top: 3px solid var(--v-accent-brand); }

/* ── WF-446 / BU-509 / BU-536 / BU-777: the SCENARIO DECK ─────────────────────────────
   One bordered island: identity (name-first, picker folded to a chevron) | Save |
   Promote | Share | More. Every control aligns to the shared 44px --negbar-ctl
   tap target. Save as new and Template stay behind More. */
.neg-scenariobar {
    --negbar-ctl: 44px;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    padding: 4px;
    border: 1px solid var(--v-border);
    border-radius: 10px;
    background: var(--v-surface);
}

/* Identity cluster: pencil affordance + inline-editable name (THE scenario identity,
   shown once) + the chevron-only native picker. Borderless (focus draws an outline)
   so the pick + name can use the full rail hit height. */
.neg-scenariobar__id {
    display: inline-flex; align-items: center; gap: 0;
    height: var(--negbar-ctl, 32px);
    padding: 0 0 0 8px; border-radius: 7px;
    background: var(--v-surface-sunken);
}
.neg-scenariobar__id:focus-within { outline: 2px solid var(--v-accent-brand); outline-offset: -1px; background: var(--v-surface); }
.neg-scenariobar__pencil { display: inline-flex; color: var(--v-ink-muted); }
.neg-scenariobar__name {
    border: 0; background: transparent; font-weight: 700; width: 150px;
    height: 100%; padding: 0 6px; border-radius: 6px;
    font-size: 0.8rem; color: var(--v-ink);
}
.neg-scenariobar__name::placeholder { color: var(--v-ink-muted, #666); }
.neg-scenariobar__name:hover:not(:read-only):not(:focus) { background: var(--v-hover); }
.neg-scenariobar__name:focus { outline: none; }
.neg-scenariobar__name:read-only { color: var(--v-ink-dim); cursor: default; }

/* The native select collapses to a chevron-only picker: full native dropdown, same
   testid, keyboard operable - and zero duplicated scenario-name text in the bar. */
.neg-scenariobar__pick {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: var(--negbar-ctl, 32px); height: var(--negbar-ctl, 32px);
    border-radius: 0 7px 7px 0; color: var(--v-ink-dim);
}
.neg-scenariobar__pick:hover { background: var(--v-hover); color: var(--v-ink); }
.neg-scenariobar__pick:focus-within { outline: 2px solid var(--v-accent-brand-aa); outline-offset: 1px; }
.neg-scenariobar__select {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; border: 0; padding: 0;
}

/* Menu anchor. BU-777 keeps the retired Save split-button retired: Save is a rail
   button again, while Save as new and Template remain plain More-menu items. */
.neg-scenariobar__split { position: relative; display: inline-flex; align-items: center; height: var(--negbar-ctl, 32px); }

/* Primary rail actions: visible, labelled and sized for touch. */
.neg-scenariobar__rail-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-height: var(--negbar-ctl, 44px); padding: 0 12px;
    border: 1px solid var(--v-border); border-radius: 8px;
    background: var(--v-surface); color: var(--v-ink);
    font-size: 0.78rem; font-weight: 800; letter-spacing: -0.01em;
    cursor: pointer;
    transition: border-color 0.16s ease, color 0.16s ease, background-color 0.16s ease;
}
.neg-scenariobar__rail-btn .lucide { color: var(--v-accent-brand-aa); }
.neg-scenariobar__rail-btn:hover:not(:disabled) { border-color: var(--v-accent-brand-aa); color: var(--v-accent-brand-aa); background: var(--v-hover); }
.neg-scenariobar__rail-btn:focus-visible { outline: 2px solid var(--v-accent-brand-aa); outline-offset: 1px; }
.neg-scenariobar__rail-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.neg-scenariobar__rail-btn--save {
    border-color: var(--v-accent-brand);
    background: var(--v-accent-brand);
    color: var(--v-on-accent);
}
.neg-scenariobar__rail-btn--save .lucide { color: var(--v-on-accent); }
.neg-scenariobar__rail-btn--save:hover:not(:disabled) {
    border-color: var(--v-accent-brand-aa);
    background: var(--v-accent-brand-aa);
    color: var(--v-on-accent);
}
.neg-scenariobar__rail-btn--save:hover:not(:disabled) .lucide { color: var(--v-on-accent); }

/* Icon actions: quiet ghosts inside the deck; the border appears on hover so the
   resting bar shows one island, not nine boxed buttons. */
.neg-scenariobar__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--negbar-ctl, 32px); height: var(--negbar-ctl, 32px); padding: 0;
    border: 1px solid transparent; border-radius: 7px;
    background: transparent; color: var(--v-ink-dim); cursor: pointer;
}
.neg-scenariobar__icon:hover:not(:disabled) { border-color: var(--v-border); color: var(--v-accent-brand-aa); background: var(--v-hover); }
.neg-scenariobar__icon:focus-visible { outline: 2px solid var(--v-accent-brand-aa); outline-offset: 1px; }
.neg-scenariobar__icon:disabled { opacity: 0.4; cursor: not-allowed; }
.neg-scenariobar__icon--promote { border-color: var(--v-accent-brand); color: var(--v-accent-brand-aa); background: var(--v-accent-brand-tint); }
.neg-scenariobar__icon--promote:hover:not(:disabled) { background: var(--v-accent-brand); color: #fff; }

.neg-scenariobar__divide { width: 1px; height: 18px; background: var(--v-border); margin: 0 2px; }

/* BU-536: transient feedback ("Saved ...", proposal link) floats in a chip anchored
   UNDER the deck - it never widens the row, so the controls never shift. */
.neg-scenariobar__flash {
    position: absolute; top: calc(100% + 7px); right: 0; z-index: 1100;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 5px 10px;
    --neg-flash-accent-readable: var(--v-accent-brand-aa);
    --neg-flash-accent-readable: color-mix(in srgb, var(--v-accent-brand-aa) 82%, var(--v-ink));
    border: 1px solid var(--v-border); border-radius: 8px;
    background: var(--v-surface);
    color: var(--neg-flash-accent-readable);
    box-shadow: 0 6px 18px rgba(var(--v-ink-rgb), 0.14);
    white-space: nowrap;
}

.neg-scenariobar__flash .neg-scenariobar__status,
.neg-scenariobar__flash .neg-scenariobar__sharelink {
    color: var(--neg-flash-accent-readable);
}

/* BU-779: the flash's dismiss control. Same ✕ affordance as the drawer/overlay closes
   (.neg-drawer__close), sized to the chip: always visible while the chip is, never
   competing with the status text for the eye. Tokenised, no hardcoded hex (BU-407). */
.neg-scenariobar__flash-x {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; padding: 0; margin-left: 2px;
    font-size: 1.05rem; line-height: 1;
    /* --v-ink-dim, not --v-ink-muted: the glyph clears 4.5:1 on --v-surface in every vibe. */
    background: transparent; color: var(--v-ink-dim);
    border: 1px solid var(--v-border); border-radius: 5px;
    cursor: pointer;
}
.neg-scenariobar__flash-x:hover { background: var(--v-hover); color: var(--v-ink); border-color: var(--v-ink-dim); }
.neg-scenariobar__flash-x:focus-visible { outline: 2px solid var(--v-accent-brand-aa); outline-offset: 1px; }

/* BU-768: the BU-536 responsive fold is retired. Fork/compare/share no longer have bar
   copies to fold away, so there is nothing to hide or reveal at 1280px - every scenario
   action other than Promote is in the More menu, reachable at every width. */

/* Overflow / save dropdown menu. */
.neg-scenariobar__scrim { position: fixed; inset: 0; z-index: 1200; background: transparent; }
.neg-scenariobar__menu {
    position: absolute; top: calc(100% + 5px); left: 0; z-index: 1250; min-width: 190px;
    display: flex; flex-direction: column; padding: 5px;
    background: var(--v-surface); border: 1px solid var(--v-border); border-radius: 10px;
    box-shadow: 0 12px 32px rgba(var(--v-ink-rgb), 0.22);
    /* BU-768: the menu now carries every scenario action at 44px tap height, so guard
       against a short viewport clipping the bottom items (Delete lives down there). */
    max-height: min(70vh, 560px); overflow-y: auto;
}
.neg-scenariobar__menu--right { left: auto; right: 0; }
.neg-scenariobar__menu-item {
    display: flex; align-items: center; gap: 9px; width: 100%;
    /* BU-768: 44px minimum tap target - the menu is now the only home for most actions. */
    min-height: 44px;
    padding: 8px 10px; border: 0; border-radius: 7px; background: transparent;
    color: var(--v-ink); font-size: 0.78rem; font-weight: 600; text-align: left; cursor: pointer;
}
.neg-scenariobar__menu-item:hover:not(:disabled) { background: var(--v-hover); }
.neg-scenariobar__menu-item:disabled { opacity: 0.4; cursor: not-allowed; }
.neg-scenariobar__menu-item .lucide { color: var(--v-ink-muted); flex: 0 0 auto; }
.neg-scenariobar__menu-item--danger { color: var(--v-error); }
.neg-scenariobar__menu-item--danger .lucide { color: var(--v-error); }
.neg-scenariobar__menu-item--danger:hover:not(:disabled) { background: var(--v-error); color: #fff; }
.neg-scenariobar__menu-item--danger:hover:not(:disabled) .lucide { color: #fff; }
.neg-scenariobar__menu-sep { height: 1px; background: var(--v-line); margin: 4px 6px; }

/* BU-494 (F-061): scenario comparison overlay. */
.neg-cmp-scrim {
    position: fixed; inset: 0; z-index: 900;
    background: rgba(0,0,0,0.45);
}
.neg-cmp {
    position: fixed; z-index: 901;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(1000px, 94vw); max-height: 88vh; overflow: auto;
    background: var(--v-surface); color: var(--v-ink);
    border: 1px solid var(--v-border); border-radius: 14px;
    padding: 20px 22px; box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.neg-cmp__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.neg-cmp__title { font-size: 1.1rem; font-weight: 700; margin: 0; color: var(--v-ink); }
.neg-cmp__subtitle { font-size: 0.9rem; font-weight: 700; margin: 16px 0 8px; color: var(--v-ink); }
.neg-cmp__close {
    padding: 6px 12px; border: 1px solid var(--v-border); border-radius: 8px;
    background: var(--v-surface); color: var(--v-ink); font-weight: 600; cursor: pointer;
}
.neg-cmp__close:hover { border-color: var(--v-accent-brand-aa); color: var(--v-accent-brand-aa); }
.neg-cmp__pick { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.neg-cmp__picklab { font-size: 0.8rem; font-weight: 700; color: var(--v-ink); }
.neg-cmp__pickitem { display: inline-flex; align-items: center; gap: 5px; font-size: 0.82rem; color: var(--v-ink); cursor: pointer; }
.neg-cmp__run {
    padding: 6px 14px; border: 1px solid var(--v-accent-brand-aa); border-radius: 8px;
    background: var(--v-accent-brand-aa); color: #fff; font-weight: 700; cursor: pointer;
}
.neg-cmp__run:disabled { opacity: 0.45; cursor: not-allowed; }
.neg-cmp__status { font-size: 0.85rem; color: var(--v-ink); }
.neg-cmp__tablewrap { overflow-x: auto; }
.neg-cmp__table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.neg-cmp__table th, .neg-cmp__table td {
    padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--v-border); color: var(--v-ink);
}
.neg-cmp__table thead th { font-weight: 700; background: var(--v-surface-2, transparent); }
.neg-cmp__table tbody th { font-weight: 600; }
.neg-cmp__delta--good { color: #1a7f37; font-weight: 700; }
.neg-cmp__delta--bad { color: #c0392b; font-weight: 700; }
.neg-cmp__diffs { margin-top: 8px; }
.neg-cmp__diff { border: 1px solid var(--v-border); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.neg-cmp__callout { font-size: 0.9rem; font-weight: 700; color: var(--v-ink); margin: 0 0 8px; }
.neg-cmp__scopediff { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--v-ink); }
.neg-cmp__scopelab { font-weight: 700; color: var(--v-ink); }
.neg-cmp__scopelist { margin: 0 0 6px 16px; padding: 0; }
.neg-cmp__none { color: var(--v-ink-muted, #666); font-style: italic; }
.neg-cmp__groupdiff { color: #b45309; font-weight: 600; }

/* BU-495 (F-061): scenario lineage tree. */
.neg-lineage { width: min(640px, 92vw); }
.neg-lin__tree, .neg-lin__children { list-style: none; margin: 0; padding-left: 0; }
.neg-lin__children { padding-left: 22px; border-left: 2px solid var(--v-border); margin-left: 8px; margin-top: 4px; }
.neg-lin__node { padding: 4px 0; }
.neg-lin__label {
    display: inline-block; padding: 4px 10px; border: 1px solid var(--v-border);
    border-radius: 8px; background: var(--v-surface); color: var(--v-ink);
    font-size: 0.84rem; font-weight: 600;
}
.neg-lin__label.is-current { border-color: var(--v-accent-brand-aa); color: var(--v-accent-brand-aa); }
.neg-lin__orphan { font-size: 0.76rem; color: #b45309; margin-left: 8px; font-style: italic; }

/* BU-496 (F-061): scenario template picker. */
.neg-tpl { width: min(760px, 92vw); }
.neg-tpl__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.neg-tpl__card {
    display: flex; flex-direction: column; gap: 6px; text-align: left;
    padding: 14px 16px; border: 1px solid var(--v-border); border-radius: 12px;
    background: var(--v-surface); color: var(--v-ink); cursor: pointer;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.neg-tpl__card:hover:not(:disabled) { border-color: var(--v-accent-brand-aa); box-shadow: 0 4px 14px rgba(0,0,0,0.12); }
.neg-tpl__card:focus-visible { outline: 2px solid var(--v-accent-brand-aa); outline-offset: 1px; }
.neg-tpl__card:disabled { opacity: 0.5; cursor: not-allowed; }
.neg-tpl__name { font-size: 0.95rem; font-weight: 700; color: var(--v-ink); }
.neg-tpl__desc { font-size: 0.8rem; line-height: 1.35; color: var(--v-ink); }

/* WF-447 (F-061): approval lifecycle modal. */
.neg-lc { width: min(560px, 92vw); }
.neg-lc__row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.neg-lc__name { font-size: 1rem; font-weight: 700; color: var(--v-ink); }
.neg-lc__status {
    padding: 3px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 700;
    border: 1px solid var(--v-border); color: var(--v-ink); background: var(--v-surface);
}
.neg-lc__status--proposed { color: #b45309; border-color: #b45309; }
.neg-lc__status--approved { color: #1a7f37; border-color: #1a7f37; }
.neg-lc__status--promoted { color: #fff; background: #1a7f37; border-color: #1a7f37; }
.neg-lc__status--archived { color: #666; }
.neg-lc__steps { list-style: none; margin: 0 0 16px; padding: 0; }
.neg-lc__step {
    display: flex; flex-direction: column; gap: 2px; padding: 8px 0 8px 22px;
    border-left: 2px solid var(--v-border); position: relative;
}
.neg-lc__step::before {
    content: ""; position: absolute; left: -7px; top: 12px; width: 12px; height: 12px;
    border-radius: 50%; background: var(--v-surface); border: 2px solid var(--v-border);
}
.neg-lc__step.is-done::before { background: #1a7f37; border-color: #1a7f37; }
.neg-lc__steplab { font-size: 0.86rem; font-weight: 600; color: var(--v-ink); }
.neg-lc__audit { font-size: 0.76rem; color: var(--v-ink); }
.neg-lc__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.neg-lc__gatehint { font-size: 0.78rem; color: #b45309; margin: 8px 0 0; }
.neg-lc__error { font-size: 0.8rem; color: #c0392b; font-weight: 600; margin: 8px 0 0; }

/* BU-497 (F-061): proposal share links. */
.neg-scenariobar__sharelink { font-size: 0.74rem; font-weight: 700; color: var(--v-accent-brand-aa); text-decoration: underline; }
.neg-cmp__share { font-size: 0.82rem; color: var(--v-ink); margin: 4px 0 14px; }
.neg-cmp__share a { color: var(--v-accent-brand-aa); font-weight: 600; word-break: break-all; }

/* WF-448 (F-061): scenario optimizer modal. */
.neg-opt { width: min(680px, 92vw); }
.neg-opt__controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin-bottom: 16px; }
.neg-opt__field { display: flex; flex-direction: column; gap: 4px; }
.neg-opt__lab { font-size: 0.78rem; font-weight: 700; color: var(--v-ink); }
.neg-opt__input {
    padding: 7px 10px; border: 1px solid var(--v-border); border-radius: 8px;
    background: var(--v-surface); color: var(--v-ink); font-size: 0.86rem; width: 140px;
}
.neg-opt__input:focus-visible { outline: 2px solid var(--v-accent-brand-aa); outline-offset: 1px; }
.neg-opt__summary { font-size: 0.9rem; font-weight: 700; color: var(--v-ink); margin: 0 0 14px; border-left: 3px solid var(--v-accent-brand-aa); padding-left: 12px; }
.neg-opt__cands { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.neg-opt__card { border: 1px solid var(--v-border); border-radius: 12px; padding: 14px 16px; background: var(--v-surface); }
.neg-opt__card.is-fit { border-color: #1a7f37; }
.neg-opt__cardhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.neg-opt__candname { font-size: 0.92rem; font-weight: 700; color: var(--v-ink); }
.neg-opt__fit { font-size: 0.7rem; font-weight: 700; color: #fff; background: #1a7f37; border-radius: 999px; padding: 2px 8px; }
.neg-opt__tradeoff { font-size: 0.84rem; color: var(--v-ink); margin: 0 0 10px; }
.neg-scenariobar__btn {
    padding: 5px 10px;
    border: 1px solid var(--v-border);
    border-radius: 8px;
    background: var(--v-surface);
    color: var(--v-ink);
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.16s ease, color 0.16s ease, background-color 0.16s ease;
}
.neg-scenariobar__btn:hover:not(:disabled) { border-color: var(--v-accent-brand-aa); color: var(--v-accent-brand-aa); }
.neg-scenariobar__btn:focus-visible { outline: 2px solid var(--v-accent-brand-aa); outline-offset: 1px; }
.neg-scenariobar__btn:disabled { opacity: 0.45; cursor: not-allowed; }
.neg-scenariobar__btn--danger:hover:not(:disabled) { border-color: #c0392b; color: #c0392b; }
.neg-scenariobar__status {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--v-accent-brand-aa);
    margin-left: 2px;
}

/* ============================================================
   BU-456 — HERO STARBURST: make the Scope Composer "sing"
   Beau: "this page isnt singing though. Starburst game needs to be more
   prominent - larger, polished, professional." Prominence + polish ONLY —
   no change to the sunburst engine / IA / rail / BU-452 toggle / markup.
   Authored in this NON-scoped sheet with a higher-specificity .neg[data-testid]
   prefix so they win over the scoped .razor.css defaults (no scopedcss rebuild).
   ============================================================ */

/* The rings ARE the hero: enlarge the sunburst well past the old 320px cap so
   the composer dominates the top of the page and the drag targets feel generous. */
.neg[data-testid] .neg-scope-card__burst { max-width: 460px; }

/* Crisper ring separators hold up at the larger diameter. */
.neg[data-testid] .neg-scope-card__wedge { stroke-width: 1.5; }

/* Roomier, more confident scope cards with a premium raised finish + soft lift. */
.neg[data-testid] .neg-scope-card {
    padding: 22px 20px 18px;
    gap: 14px;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(var(--v-ink-rgb), 0.06),
                0 6px 16px rgba(var(--v-ink-rgb), 0.07),
                0 18px 40px -24px rgba(var(--v-ink-rgb), 0.20);
}
.neg[data-testid] .neg-scope-card:hover,
.neg[data-testid] .neg-scope-card:focus-within {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(var(--v-ink-rgb), 0.10),
                0 18px 44px -16px rgba(var(--v-ink-rgb), 0.22);
}

/* The composer band earns real presence as the page lead: more breathing room,
   a slightly heavier accent top rule, and a bolder hero count. */
.neg[data-testid] .neg-scopes {
    padding: 30px 30px 32px;
    gap: 22px;
    border-top-width: 4px;
}
.neg[data-testid] .neg-scopes__count-n { font-size: 3.6rem; letter-spacing: -0.035em; }
.neg[data-testid] .neg-scopes__count-lab { font-size: 1.1rem; }

/* Narrow screens: keep the bigger bursts from overpowering a phone column. */
@media (max-width: 960px) {
    .neg[data-testid] .neg-scope-card__burst { max-width: 380px; }
    .neg[data-testid] .neg-scopes { padding: 22px 18px 24px; }
    .neg[data-testid] .neg-scopes__count-n { font-size: 3rem; }
}

/* Honour reduced-motion: the card lift is the only motion added here. */
@media (prefers-reduced-motion: reduce) {
    .neg[data-testid] .neg-scope-card,
    .neg[data-testid] .neg-scope-card:hover,
    .neg[data-testid] .neg-scope-card:focus-within { transform: none; }
}

/* ── Hoist the board: pull the starbursts up the page by tightening the chrome
   above them so the composer reads as the lead, not buried under preamble. The
   engagement name already appears in the host header directly above, so the neg
   head H1 is demoted to a quiet label rather than a third giant repeat. ── */
.neg[data-testid] { padding-top: 4px; gap: 12px; }
.neg[data-testid] .neg-head { padding-bottom: 10px; }
.neg[data-testid] .neg-head__title { font-size: 1.4rem; margin-top: 1px; }
.neg[data-testid] .neg-scopes { padding-top: 20px; gap: 16px; }
.neg[data-testid] .neg-scopes__sub { margin: 0; } /* BU-783: __strat dropped with its markup */

/* Hoist the starburst board directly under the count + controls (CSS flex order,
   no markup change) so the composer is the immediate lead. The legend follows the
   bursts it decodes; the split drop-zone, reuse bar and disclosure drop below. */
.neg[data-testid] .neg-scopes__head     { order: 0; }
.neg[data-testid] .neg-combinebar        { order: 1; }
.neg[data-testid] .neg-scopes__grid      { order: 2; }
.neg[data-testid] .neg-scopes__legend    { order: 3; }
.neg[data-testid] .neg-efficiency        { order: 4; }
.neg[data-testid] .neg-dragzone          { order: 5; }
.neg[data-testid] .neg-scopes__more      { order: 6; }

/* ============================================================
   BU-456 RING COMPOSER — per-ring divide handles under each sunburst.
   A fully-specified scope shows a dashed "fully specified" lock chip.
   ============================================================ */
.neg .neg-scope-card__rings {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin: 2px 0 8px; min-height: 22px; justify-content: center;
}
.neg .neg-scope-card__rings-lab {
    font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em;
    font-weight: 700; color: var(--v-ink-muted);
}
.neg .neg-scope-card__ringhandle {
    display: inline-flex; align-items: center;
    font-size: 0.72rem; font-weight: 700; line-height: 1;
    padding: 4px 11px 4px 9px; border-radius: 999px; cursor: grab;
    color: var(--v-ink); background: var(--v-surface);
    border: 1px solid var(--v-border-strong);
    user-select: none; white-space: nowrap;
    transition: border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.neg .neg-scope-card__ringhandle:hover { border-color: var(--v-accent-brand-aa); color: var(--v-accent-brand-aa); }
.neg .neg-scope-card__ringhandle:active { cursor: grabbing; transform: scale(0.96); }
.neg .neg-scope-card__ringhandle:focus-visible { outline: 2px solid var(--v-accent-brand-aa); outline-offset: 1px; }
.neg .neg-scope-card__ringhandle--voice { box-shadow: inset 3px 0 0 var(--v-chart-1); }
.neg .neg-scope-card__ringhandle--stage { box-shadow: inset 3px 0 0 var(--v-chart-2); }
.neg .neg-scope-card__ringhandle--media { box-shadow: inset 3px 0 0 var(--v-chart-3); }
.neg .neg-scope-card__rings-atomic {
    font-size: 0.7rem; font-weight: 600; color: var(--v-ink-muted);
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px;
    border: 1px dashed var(--v-border-strong); background: transparent;
}

/* ============================================================
   BU-456 POINTER-DRAG COMPOSER — in-sunburst grab (ports the v3 mockup).
   Grab a colored wedge arc (peel/move) or the scope center (merge); a floating
   ghost follows the pointer; drop targets + the divide bin light up.
   ============================================================ */
.neg-composer-ghost {
    position: fixed; z-index: 2147483600; pointer-events: none;
    transform: translate(-50%, -50%);
    background: var(--v-accent-brand); color: #fff;
    font: 700 0.78rem/1 system-ui, -apple-system, "Segoe UI", sans-serif;
    white-space: nowrap; padding: 7px 13px; border-radius: 999px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.3);
}
/* the sunburst is the grab surface (wedges peel/move, center merges) */
.neg .neg-scope-card__burst { cursor: grab; touch-action: none; position: relative; }
.neg .neg-scope-card.is-composing { opacity: 0.5; }
.neg .neg-scope-card.is-drop-target {
    border-color: var(--v-accent-brand-aa) !important;
    box-shadow: 0 0 0 2px var(--v-accent-brand-aa), 0 12px 28px rgba(var(--v-ink-rgb), 0.18) !important;
    transform: translateY(-2px);
}

/* ════════════════ BU-461: KEYHOLE drop-target opening (cursor-following) ════════════════
   When a scope is the live drop target, scope-composer-drag.js reshapes its .neg-scope-card__mouth
   path to carve a KEYHOLE gap out of the rings (wide at the inner hole, tapering to a notch at the
   rim) that FOLLOWS THE CURSOR - it faces the pointer and widens as the drag arrives. The path is
   filled with the card surface so the rings read as parted per-ring. No pulse, no chomp - the
   opening is a direct response to the pointer. The .is-drop-target border/glow (above) still marks
   the target; the cursor-follow is identical for dropping a slice OR combining scopes. */
.neg .neg-scope-card__mouth { fill: var(--v-surface-raised); pointer-events: none; }
/* keep the rings vibrant while the keyhole is open (don't let any drag-over :hover dim them) */
.neg .neg-scope-card.is-drop-target .neg-scope-card__arc { opacity: 1; }
.neg .neg-scope-card.is-drop-target .neg-scope-card__wedge--d2 { opacity: 0.74; }
.neg .neg-scope-card.is-drop-target .neg-scope-card__wedge--d3 { opacity: 0.55; }
.neg .neg-scope-card.is-drop-target .neg-scope-card__wedge--d4 { opacity: 0.4; }
/* BU-669: the standalone bin outline and the split zone it decorated are both retired - the
   .neg-scope-dropline (NegotiationEngine.razor.css) is the one drag-to-separate zone now.
   BU-673: its former drophint sibling pill was removed as a redundant second popover. */

/* ============================================================
   BU-456 DECLUTTER + PROGRESSIVE DISCLOSURE (Beau: "so much redundant
   information and not enough room to breathe"; charts below the fold).
   ------------------------------------------------------------
   Head: drop the "N scopes" announcement (you can count the sunbursts) and the
   two explainer paragraphs. Card: the sunburst + its center number + title +
   cost is the resting state; the duplicate deliverable count, the yield prose,
   and the voice-chip row collapse into the existing "Composition" expand tier.
   ============================================================ */
/* BU-783: __strat is no longer in the markup, so it no longer needs hiding here. */
.neg[data-testid] .neg-scopes__count,
.neg[data-testid] .neg-scopes__sub { display: none !important; }
.neg[data-testid] .neg-scopes { padding-top: 14px; gap: 12px; }

/* resting card = sunburst + center "N DELIV" + title + cost. Everything else is
   revealed by the per-card "Composition" toggle (progressive disclosure). */
.neg .neg-scope-card:not(.is-expanded) .neg-scope-card__headline .neg-scope-card__hl:not(.neg-scope-card__hl--cost),
.neg .neg-scope-card:not(.is-expanded) .neg-scope-card__hl-div,
.neg .neg-scope-card:not(.is-expanded) .neg-scope-card__yield-story,
.neg .neg-scope-card:not(.is-expanded) .neg-scope-card__yield-key,
.neg .neg-scope-card:not(.is-expanded) .neg-scope-card__secondary { display: none; }

/* ============================================================
   BU-456 COLLAPSE 4 HEADER SYSTEMS -> compact bars (Beau: "cut the top
   height by 60-70% ... it is not hierarchy, it is repetition"). The host app
   bar is one breadcrumb line; the component header drops its duplicate title
   and reads as a tight control bar. Target: charts within ~110px of the top.
   ============================================================ */
/* host app bar: one tight "Production Economy Simulator / <Engagement>" line */
.sim .sim__head--compact {
    padding: 9px 28px 8px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--v-border);
}
.sim .sim__head--compact .sim__crumb { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
/* BU-752: these two rules are (0,3,0) with !important and decide the breadcrumb band's
   ink. --v-ink-muted / --v-ink ARE defined off-vibe as LIGHT-surface values (#5a636d,
   #06222b), but this band sits on the app shell's dark cockpit -> measured 3.09:1 and
   1.14:1. Route them through the shell slots, which are undefined off-vibe (so the
   on-dark literal wins) and alias back to --color-ink / --color-accent-strong under
   any explicit vibe, so a reskin still repaints the band. */
.sim .sim__head--compact .sim__eyebrow {
    font-size: 10px !important; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--color-shell-accent, #FF6B1A) !important; font-weight: 700; margin: 0 !important;
}
.sim .sim__head--compact .sim__crumb-sep { color: var(--v-ink-muted); font-weight: 400; }
.sim .sim__head--compact .sim__title {
    font-size: 1.05rem !important; font-weight: 700 !important; line-height: 1.2 !important;
    margin: 0 !important; color: var(--color-shell-ink, #f2f3f5) !important; letter-spacing: -0.01em;
}
/* tabs: tight, directly under the app bar */
.sim .sim__viewtabs { padding: 6px 28px !important; margin: 0 !important; gap: 6px; }

/* component header: meta + controls on ONE tight row (the big title is gone) */
.neg[data-testid] .neg-head {
    padding: 8px 0 8px !important;
    align-items: center;
    border-bottom: 1px solid var(--v-border);
}
.neg[data-testid] .neg-head__lead { flex-direction: row; align-items: baseline; gap: 10px; }
.neg[data-testid] .neg-head__meta { margin: 0 !important; font-size: 0.8rem; }
/* the "Production scopes" eyebrow is redundant - the charts ARE the scopes. Pull the board
   up tight under the Group-by toolbar; tighten the view tabs. */
.neg[data-testid] .neg-scopes__eyebrow { display: none; }
.neg[data-testid] .neg-scopes { padding-top: 6px !important; gap: 8px; }
.sim .sim__viewtabs { padding-top: 4px !important; padding-bottom: 4px !important; }

/* ============================================================
   BU-456 POST-ACTION FEEDBACK = FLOATING TOAST (Beau: "when you put them above
   the charts, they push the charts down ... need to be like a popover").
   The move-rationale and the combine prompt were in-flow flex children ABOVE the
   grid (rationale order:0), so each move inserted ~146px and shoved the charts
   down. Take them OUT OF FLOW (fixed toasts) so the charts never move. The
   rationale already carries a dismiss control. Tokenized; reduced-motion safe.
   ============================================================ */
.neg .neg-rationale {
    position: fixed !important;
    right: 20px; bottom: 20px; left: auto; top: auto;
    z-index: 1000; width: min(440px, calc(100vw - 40px));
    box-shadow: 0 14px 38px rgba(var(--v-ink-rgb), 0.26);
    animation: neg-toast-in 0.28s ease-out both;
}
.neg .neg-combinebar.is-shown {
    position: fixed !important;
    left: 50%; bottom: 20px; right: auto; top: auto;
    transform: translateX(-50%);
    z-index: 999;
    box-shadow: 0 14px 38px rgba(var(--v-ink-rgb), 0.26);
}
@keyframes neg-toast-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .neg .neg-rationale { animation: none; } }

/* ════════════════ BU-456: inline scope-name editing ════════════════ */
/* The scope title becomes a click-to-rename button. The scoped .razor.css rule sets
   the title type treatment; here we strip the button chrome and add the affordance. */
.neg .neg-scope-card__title--btn {
    appearance: none; -webkit-appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    padding: 1px 5px; margin: 0;
    cursor: text;
    display: inline-flex; align-items: center; gap: 5px;
    font: inherit;
    transition: background 120ms ease, border-color 120ms ease;
}
.neg .neg-scope-card__title--btn:hover {
    background: var(--v-accent-brand-tint);
    border-color: var(--v-accent-brand-soft);
}
.neg .neg-scope-card__title--btn:focus-visible {
    outline: 2px solid var(--v-accent-brand-aa); outline-offset: 1px;
}
.neg .neg-scope-card__title-pen {
    opacity: 0; color: var(--v-ink-muted); flex: 0 0 auto;
    transition: opacity 120ms ease;
}
.neg .neg-scope-card__title--btn:hover .neg-scope-card__title-pen,
.neg .neg-scope-card__title--btn:focus-visible .neg-scope-card__title-pen { opacity: 0.85; }
/* a renamed scope: the custom name reads as a name (not an ALL-CAPS code), default
   carried alongside as a faint badge so the producer can still see "Scope N". */
.neg .neg-scope-card__title--btn.is-custom {
    text-transform: none; letter-spacing: 0.01em; color: var(--v-ink);
}
.neg .neg-scope-card__title-default {
    font-size: 8.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--v-ink-muted);
    background: var(--v-surface-sunken);
    border: 1px solid var(--v-line);
    border-radius: 999px; padding: 0 5px; line-height: 1.5;
}
.neg .neg-scope-card__title-edit {
    appearance: none; -webkit-appearance: none;
    font: inherit; font-size: 0.98rem; font-weight: 800; letter-spacing: -0.01em;
    text-align: center;
    color: var(--v-ink);
    background: var(--v-canvas);
    border: 1.5px solid var(--v-accent-brand-aa);
    border-radius: 6px; padding: 2px 7px;
    width: min(100%, 200px);
    box-shadow: 0 0 0 3px var(--v-accent-brand-soft);
}
.neg .neg-scope-card__title-edit:focus { outline: none; }

/* inherit-parent-name chip: appears on a child card after a combine/divide/move when
   the parent had a custom name. One click adopts the name; the × dismisses. */
.neg .neg-scope-card__inherit {
    display: inline-flex; align-items: center; gap: 1px; margin-top: 3px;
    animation: neg-toast-in 0.24s ease-out both;
}
.neg .neg-scope-card__inherit-accept {
    appearance: none; -webkit-appearance: none; cursor: pointer;
    font-size: 0.66rem; font-weight: 700; line-height: 1.3;
    color: var(--v-accent-brand-aa);
    background: var(--v-accent-brand-tint);
    border: 1px solid var(--v-accent-brand-soft);
    border-radius: 999px 4px 4px 999px;
    padding: 1px 8px;
    max-width: 168px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.neg .neg-scope-card__inherit-accept:hover { background: var(--v-accent-brand-soft); }
.neg .neg-scope-card__inherit-dismiss {
    appearance: none; -webkit-appearance: none; cursor: pointer;
    font-size: 0.78rem; line-height: 1;
    color: var(--v-ink-muted);
    background: var(--v-accent-brand-tint);
    border: 1px solid var(--v-accent-brand-soft); border-left: none;
    border-radius: 4px 999px 999px 4px;
    padding: 1px 6px;
}
.neg .neg-scope-card__inherit-dismiss:hover { color: var(--v-ink); }
@media (prefers-reduced-motion: reduce) { .neg .neg-scope-card__inherit { animation: none; } }

/* ════════════════ BU-457: slice drill-down popover ════════════════ */
/* Floating (fixed) so it never pushes the charts down. Clamped to the viewport. */
.neg .neg-slice-pop-backdrop { position: fixed; inset: 0; z-index: 1200; background: transparent; }
.neg .neg-slice-pop {
    position: fixed; z-index: 1201;
    left: min(var(--neg-slice-x, 50vw), calc(100vw - 380px));
    top:  min(var(--neg-slice-y, 40vh), calc(100vh - 340px));
    width: 360px; max-width: calc(100vw - 24px); max-height: 320px;
    display: flex; flex-direction: column;
    background: var(--v-surface);
    border: 1px solid var(--v-border);
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(var(--v-ink-rgb), 0.30);
    overflow: hidden;
    animation: neg-toast-in 0.18s ease-out both;
}
.neg .neg-slice-pop:focus { outline: none; }
.neg .neg-slice-pop__head {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--v-line);
    background: var(--v-surface-sunken);
}
.neg .neg-slice-pop__title {
    font-size: 0.78rem; font-weight: 800; color: var(--v-ink);
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.neg .neg-slice-pop__count { font-size: 0.66rem; font-weight: 700; color: var(--v-ink-dim); flex: 0 0 auto; white-space: nowrap; }
.neg .neg-slice-pop__close {
    appearance: none; -webkit-appearance: none; cursor: pointer; flex: 0 0 auto;
    font-size: 1rem; line-height: 1; color: var(--v-ink-muted);
    background: transparent; border: none; padding: 2px 5px; border-radius: 4px;
}
.neg .neg-slice-pop__close:hover { color: var(--v-ink); background: var(--v-line-subtle); }
.neg .neg-slice-pop__actions {
    padding: 7px 12px; border-bottom: 1px solid var(--v-line);
    background: var(--v-surface);
}
.neg .neg-slice-pop__separate {
    appearance: none; -webkit-appearance: none; cursor: pointer;
    width: 100%;
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.01em;
    color: #fff;
    background: var(--v-accent-brand-aa);
    border: 1px solid var(--v-accent-brand-aa);
    border-radius: 7px;
    padding: 6px 10px;
    transition: filter 120ms ease;
}
.neg .neg-slice-pop__separate:hover { filter: brightness(1.06); }
.neg .neg-slice-pop__separate:focus-visible { outline: 2px solid var(--v-ink); outline-offset: 1px; }
/* dark theme's brand shade is lighter -> white text would fail AA; flip to dark ink. */
.neg[data-theme="dark"] .neg-slice-pop__separate { color: var(--v-canvas); }
.neg .neg-slice-pop__empty { padding: 18px 12px; font-size: 0.78rem; color: var(--v-ink-dim); text-align: center; }
.neg .neg-slice-pop__scroll { overflow: auto; }
.neg .neg-slice-pop__table { width: 100%; border-collapse: collapse; font-size: 0.7rem; }
.neg .neg-slice-pop__table th {
    position: sticky; top: 0;
    text-align: left; font-weight: 700; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--v-ink-dim);
    background: var(--v-surface);
    padding: 5px 8px; border-bottom: 1px solid var(--v-line); white-space: nowrap;
}
.neg .neg-slice-pop__table td {
    padding: 5px 8px; color: var(--v-ink);
    border-bottom: 1px solid var(--v-line-subtle); white-space: nowrap;
}
.neg .neg-slice-pop__table tbody tr:hover td { background: var(--v-line-subtle); }
.neg .neg-slice-pop__num { color: var(--v-ink-dim); font-variant-numeric: tabular-nums; }
.neg .neg-slice-pop__spec { color: var(--v-ink-dim); }
@media (prefers-reduced-motion: reduce) { .neg .neg-slice-pop { animation: none; } }

/* ════════════════ BU-456: no-blink re-solve ════════════════
   After the scopes paint once, the grid gets `is-live`. The card + wedge entrance reveals are
   one-time; replaying them on every combine/divide produced the board-wide blink/refresh. Once
   live, suppress them so a single action updates the cells in place (position-keyed cards reuse
   their DOM; net-new cells just appear). 4-class specificity beats the scoped 1-class rule. */
.neg .neg-scopes__grid.is-live .neg-scope-card { animation: none; }
.neg .neg-scopes__grid.is-live .neg-scope-card__arc { animation: none; }
/* BU-492: the same no-blink suppression for the LANE / STATE-ZONE layout (BU-472 / BU-490).
   The grid rule above never matched cards inside `.neg-lane__track`, so every combine/split
   replayed the card + arc entrance reveal -> the board flashed white. Mirror it for lanes. */
.neg .neg-lane__track.is-live .neg-scope-card { animation: none; }
.neg .neg-lane__track.is-live .neg-scope-card__arc { animation: none; }

/* BU-490 (layout reorg, 2026-06-30): hide the budget-savings region ("Options to meet your
   budget" = the levers band + sensitivity simulator) and the "Show supporting breakdowns"
   diagnostics for now, per Beau. Reversible: delete this block to restore them. */
.neg [data-testid="neg-diag"],
.neg [data-testid="neg-sec-levers"],
.neg [data-testid="neg-sim"] { display: none !important; }

/* BU-490: side-drawer system. Channels and Voices open a right-side slide-over from the
   sticky budget-rail trigger group. The section markup stays in place;
   .neg-drawer fixes it off-screen and .is-open slides it in. */
.neg .neg-drawertabs {
    align-self: flex-end;
    display: flex; flex-direction: column; gap: 7px;
    width: 68px;
}
.neg .neg-drawertab {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 52px; padding: 9px 5px; cursor: pointer;
    background: color-mix(in srgb, var(--v-accent-brand) 7%, var(--v-surface)); color: var(--v-ink);
    border: 1px solid var(--v-border); border-right: none;
    border-radius: 9px 0 0 9px;
    font-size: 0.56rem; font-weight: 800; letter-spacing: 0.1em; line-height: 1.1; text-transform: uppercase;
    box-shadow: -1px 0 4px -2px rgba(0,0,0,0.18); text-align: center;
    transition: background 0.15s ease, color 0.15s ease;
}
.neg .neg-drawertab:hover { background: color-mix(in srgb, var(--v-accent-brand) 16%, var(--v-surface)); border-color: var(--v-accent-brand-aa); }
.neg .neg-drawertab.is-active { background: var(--v-accent-brand-aa); color: #fff; border-color: var(--v-accent-brand-aa); }
.neg .neg-drawer-scrim {
    position: fixed; inset: 0; z-index: 45;
    background: rgba(0, 0, 0, 0.28);
    animation: neg-scrim-in 0.16s ease both;
}
@keyframes neg-scrim-in { from { opacity: 0; } to { opacity: 1; } }
.neg .neg-drawer {
    position: fixed !important; top: 0; right: 0; z-index: 50;
    width: min(460px, 92vw); height: 100vh; max-height: 100vh;
    margin: 0 !important; border-radius: 0 !important;
    overflow-y: auto; overflow-x: hidden;
    background: var(--v-surface-raised);
    box-shadow: -10px 0 34px rgba(0, 0, 0, 0.22);
    /* !important so a section's own transform (e.g. .neg-dragzone) can't leave the drawer on-screen. */
    transform: translateX(100%) !important; transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}
.neg .neg-drawer.is-open { transform: translateX(0) !important; }
.neg .neg-drawer__close {
    position: absolute; top: 14px; right: 16px; z-index: 2;
    width: 30px; height: 30px; border-radius: 8px;
    border: 1px solid var(--v-line); background: var(--v-canvas);
    color: var(--v-ink); font-size: 14px; line-height: 1; cursor: pointer;
}
.neg .neg-drawer__close:hover { background: var(--v-surface-raised); }
/* the Voices legend reads as a clean drawer panel, not a cramped strip. */
.neg .neg-scopes__legend.neg-drawer { display: block; padding: 56px 24px 28px; }
.neg .neg-scopes__legend.neg-drawer > * { margin-bottom: 16px; }

/* ════════════════ BU-490 WORKBENCH ════════════════
   One single frame, no per-zone headers/footers. Uncommitted (unlocked) scopes fill the work
   surface (wrap to fill, scroll vertically); committed (locked) scopes sit in a single full-card
   row at the bottom, set off by a divider + a faint committed tint - distinguished by POSITION,
   not a labelled header. Per-zone borders/headers removed so the whole thing reads as a bench. */
.neg .neg-scope-lanes {
    border: 1px solid var(--v-border); border-radius: 16px;
    background: var(--v-canvas);
    padding: 16px; gap: 0;
    /* the bench fills the viewport: work surface scrolls, committed row pinned at the foot. */
    display: flex; flex-direction: column;
    height: 80vh; max-height: 80vh;
}
.neg .neg-scope-lanes .neg-lane {
    border-width: 0; border-style: none; background: transparent; border-radius: 0; padding: 0;
}
.neg .neg-scope-lanes .neg-lane__head { display: none; }
/* uncommitted = the work surface: cards wrap to fill; this region scrolls vertically */
.neg .neg-scope-lanes .neg-lane--todo {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
}
.neg .neg-scope-lanes .neg-lane--todo .neg-lane__track {
    flex-flow: row wrap; overflow-x: visible; gap: 14px; padding: 0 4px 14px 0;
}
/* committed = a single full-card row pinned at the foot, as a clearly DISTINCT recessed tray
   (its own tinted surface + inset shadow + border) so it reads as a separate zone from the open
   work surface above - no header needed. */
.neg .neg-scope-lanes .neg-lane--target {
    flex: 0 0 auto;
    margin-top: 16px; padding: 14px 12px 12px;
    background: rgba(47, 125, 91, 0.10);
    border: 1px solid rgba(47, 125, 91, 0.34);
    border-radius: 14px;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.06);
}
.neg .neg-scope-lanes .neg-lane--target .neg-lane__track {
    flex-flow: row nowrap; overflow-x: auto; gap: 14px; padding-bottom: 4px;
}
/* each committed card carries a faint green edge so it reads as locked even out of context */
.neg .neg-scope-lanes .neg-lane--target .neg-scope-card {
    border-color: rgba(47, 125, 91, 0.42);
}
/* Committed cards are READ-ONLY summaries, not instruments: the only decision here is keep-or-
   unlock. Hide the editing controls (Composition / Combine / Divide); the lock toggle top-right
   stays as the unlock. Shrink the sunburst a touch so the tray reads as a lean committed shelf. */
.neg .neg-scope-lanes .neg-lane--target .neg-scope-card__actions,
.neg .neg-scope-lanes .neg-lane--target .neg-scope-card__select,
.neg .neg-scope-lanes .neg-lane--target .neg-scope-card__divide { display: none !important; }
.neg .neg-scope-lanes .neg-lane--target .neg-scope-card__burst { max-width: 150px; }
.neg .neg-scope-lanes .neg-lane--target .neg-scope-card { padding-bottom: 12px; }

/* ── BU-490: committed REVIEW mode - the ledger expands into a dense audit view ──
   The green "Review committed" button toggles it; the committed tray then takes over the whole
   frame (work surface hidden), cards go back to FULL detail, and an audit totals bar summarises
   the commitment (count / deliverables / cost / finished). "Let's double-check our committed scopes." */
.neg .neg-committed-review {
    position: absolute; top: -13px; right: 16px; z-index: 3;
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em;
    padding: 5px 12px; border-radius: 8px; cursor: pointer;
    background: #1f6e4f; color: #fff; border: 1px solid #1a5c42;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}
.neg .neg-committed-review:hover { background: #1a5c42; }
.neg .neg-committed-totals {
    display: flex; flex-wrap: wrap; gap: 22px; align-items: baseline;
    padding: 2px 4px 14px; margin: 4px 0 8px;
    border-bottom: 1px solid rgba(47, 125, 91, 0.30);
}
.neg .neg-committed-totals__k { font-size: 0.82rem; color: var(--v-ink-dim); }
.neg .neg-committed-totals__k b { font-size: 1.1rem; color: #1f6e4f; font-weight: 800; margin-right: 3px; }
/* expanded review takes over the frame */
.neg .neg-scope-lanes.is-reviewing .neg-lane--todo { display: none; }
.neg .neg-scope-lanes.is-reviewing .neg-lane--target { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-top: 0; }
.neg .neg-scope-lanes.is-reviewing .neg-lane--target .neg-lane__track { flex-flow: row wrap; overflow-x: visible; }
/* restore FULL-detail committed cards while auditing */
.neg .neg-scope-lanes.is-reviewing .neg-lane--target .neg-scope-card__actions,
.neg .neg-scope-lanes.is-reviewing .neg-lane--target .neg-scope-card__select,
.neg .neg-scope-lanes.is-reviewing .neg-lane--target .neg-scope-card__divide { display: flex !important; }
.neg .neg-scope-lanes.is-reviewing .neg-lane--target .neg-scope-card__burst { max-width: 196px; }

/* ============================================================
   BU-462 DENSITY PASS — "Smaller, Denser, More Actionable" (Beau brief, 2026-06-25).
   The BU-456 hero sizing made the three sunbursts ~460px and ate the whole first
   viewport; the actionable budget + options sat 2000-3000px down. Shrink the
   composer ~48%, compact the exec "Plan summary" cards into a tight status strip,
   mute the redundant orange section eyebrows, and tighten every card's padding/
   shadow so the answer + levers rise toward the fold. Preserves the sunburst game,
   the BU-452 capture-ring toggle, AA contrast, and #blazor-error-ui. CSS-only.
   ============================================================ */

/* 1 ── Sunbursts: hero 460 -> 240 (~48% smaller); crisper card chrome, less lift. */
.neg[data-testid] .neg-scope-card__burst { max-width: 240px; }
.neg[data-testid] .neg-scope-card {
    padding: 10px 12px 9px;
    gap: 7px;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(var(--v-ink-rgb), 0.05),
                0 4px 12px -6px rgba(var(--v-ink-rgb), 0.12);
}
.neg[data-testid] .neg-scope-card:hover,
.neg[data-testid] .neg-scope-card:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(var(--v-ink-rgb), 0.08),
                0 10px 22px -12px rgba(var(--v-ink-rgb), 0.18);
}
.neg[data-testid] .neg-scopes { padding: 12px 18px 14px; gap: 10px; }
.neg[data-testid] .neg-scopes__grid { gap: 12px; }
.neg[data-testid] .neg-scope-card__title { font-size: 0.92rem; }
@media (max-width: 960px) {
    .neg[data-testid] .neg-scope-card__burst { max-width: 210px; }
}

/* 2 ── Section headers: drop the redundant orange eyebrow, shrink the H2 so the
   sections stop announcing themselves with a 3-line banner each. */
.neg .neg-sec-head__eyebrow { display: none; }
.neg .neg-sec-head__title { font-size: 1.18rem; margin: 0 0 8px; letter-spacing: -0.01em; }
.neg .neg-panel__eyebrow { font-size: 9px; letter-spacing: 0.1em; margin-bottom: 2px; }

/* 3 ── "Plan summary" exec band -> compact status strip. Five cards stay on one
   tight row; hero verdict shrinks; the verbose per-card explainer sentence is
   demoted (title attr / disclosure carries it) so the row is scannable, not prose. */
.neg .neg-exec { padding: 12px 18px 14px; gap: 10px; }
.neg .neg-exec__grid { gap: 10px; }
.neg .neg-exec__card { padding: 10px 12px; border-radius: 10px;
    box-shadow: 0 1px 2px rgba(var(--v-ink-rgb), 0.05); gap: 3px; }
.neg .neg-exec__sowhat { display: none; }
.neg .neg-exec__hero-n,
.neg .neg-exec__hero-n--over,
.neg .neg-exec__hero-n--under { font-size: 1.5rem; }
.neg .neg-exec__val { font-size: 1.5rem; }
.neg .neg-exec__hero-sub { font-size: 0.74rem; }

/* 4 ── KPI strip + diagnostic panels + rail: trim padding, soften shadows, less
   border noise. Diagnostics read as supporting detail, not co-equal hero cards. */
.neg .neg-kpis { padding: 10px 18px; gap: 12px; }
.neg .neg-panel,
.neg .neg-channel-panel,
.neg .neg-quadrant,
.neg .neg-sankey,
.neg .neg-funnel,
.neg .neg-sim { padding: 12px 14px; border-radius: 10px;
    box-shadow: 0 1px 3px -1px rgba(var(--v-ink-rgb), 0.10); }
.neg .neg-rail { padding: 14px 16px; }
.neg .neg-grid.neg-workspace-grid { gap: 12px; }

/* 5 ── Trim the vertical air between the big page bands so the actionable budget +
   "Options to meet your budget" levers climb toward the fold. */
.neg .neg-exec,
.neg .neg-kpis,
.neg .neg-scopes__overview { margin-top: 10px; }

/* BU-462 corrective: the exec hero number was 73.6px and wrapped to 3 lines (230px),
   stretching all 5 status cards to 339px via grid-row stretch. Beat the
   .neg[data-testid] specificity, cap the number, and stop the stretch so the band
   reads as a one-line status strip (~110px) not a 510px panel. */
.neg[data-testid] .neg-exec__grid { align-items: start; }
.neg[data-testid] .neg-exec__hero-n,
.neg[data-testid] .neg-exec__hero-n--over,
.neg[data-testid] .neg-exec__hero-n--under { font-size: 1.7rem; line-height: 1.12; }
.neg[data-testid] .neg-exec__val { font-size: 1.6rem; line-height: 1.12; }
.neg[data-testid] .neg-exec__card { padding: 10px 12px; }
.neg[data-testid] .neg-exec__hero-sub { font-size: 0.74rem; }
/* scope card below-burst meta: tighten the title/cost/rings/toggle stack */
.neg[data-testid] .neg-scope-card__meta { gap: 4px; }

/* BU-462: the redundant orange section eyebrows ("Plan summary", "Cost & coverage
   detail", "Adjust the plan") sit on a higher-specificity display:flex base; the H2
   below each already names the section. Force them out. */
.neg[data-testid] .neg-sec-head__eyebrow { display: none !important; }
.neg[data-testid] .neg-sec-head__title { margin-top: 0; }

/* ════════════════════════════════════════════════════════════════════════════
   BU-462 STRUCTURAL LAYER 2 — above-the-fold reorder + two-column sticky rail.
   Goal: at 1366x768 the user sees project context, budget status, scope controls,
   live cost impact and the first adjustable options without scrolling. CSS-only;
   all colours resolve from --v-* tokens; over/under reuse --v-error / --v-success
   (both clear WCAG AA at small text on every vibe per the BU-436 rail note).
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Thin budget/status strip above the scope builder (one line) ── */
.neg .neg-budgetbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 10px 0 4px;
    padding: 7px 14px;
    border: 1px solid var(--v-border);
    border-left: 3px solid var(--v-success);
    border-radius: 9px;
    background: var(--v-surface);
    font-size: 0.82rem;
    line-height: 1.2;
}
.neg .neg-budgetbar.is-over { border-left-color: var(--v-error); }
.neg .neg-budgetbar__lab {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.66rem;
    color: var(--v-ink-muted);
}
.neg .neg-budgetbar__seg { display: inline-flex; align-items: baseline; gap: 6px; }
.neg .neg-budgetbar__k { font-size: 0.7rem; color: var(--v-ink-muted); font-weight: 600; }
.neg .neg-budgetbar__v { font-size: 0.92rem; font-weight: 700; color: var(--v-ink); }
.neg .neg-budgetbar__seg--verdict { margin-left: auto; }
.neg .neg-budgetbar__v--over { color: var(--v-error); }
.neg .neg-budgetbar__v--under { color: var(--v-success); }

/* ── 2. TWO-COLUMN shell (BU-462 brief re-issued: above-the-fold goal needs budget + live
   cost + the fastest-fix options visible WITHOUT scrolling — impossible stacked in one
   column). The sticky right rail carries budget status + live estimate + recommended-change
   chips + Apply, so all of that sits beside the (compact) scope builder, above the fold. ── */
.neg .neg-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 264px;
    gap: 16px;
    align-items: start;
}
.neg .neg-shell__main { min-width: 0; position: relative; }  /* positioning context for the exiting template gate overlay (BU-501) */
.neg .neg-shell__rail { min-width: 0; display: block; }
.neg .neg-railgroup {
    position: sticky;
    top: 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.neg .neg-liverail {
    display: flex;
    flex-direction: column;
    gap: 7px;
    border: 1px solid var(--v-border);
    border-radius: 12px;
    background: var(--v-surface);
    padding: 14px 14px 13px;
    box-shadow: 0 1px 3px -1px rgba(var(--v-ink-rgb), 0.10);
}
.neg .neg-liverail__eyebrow {
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--v-ink-muted);
}
.neg .neg-liverail__row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.neg .neg-liverail__k { font-size: 0.74rem; color: var(--v-ink-muted); font-weight: 600; }
.neg .neg-liverail__v { font-size: 1.02rem; font-weight: 700; color: var(--v-ink); }
.neg .neg-liverail__verdict {
    margin-top: 1px;
    padding: 6px 8px;
    border-radius: 8px;
    text-align: center;
    background: color-mix(in srgb, var(--v-success) 9%, var(--v-surface));
}
.neg .neg-liverail__verdict.is-over { background: color-mix(in srgb, var(--v-error) 9%, var(--v-surface)); }
.neg .neg-liverail__verdict-n { font-size: 0.92rem; font-weight: 700; color: var(--v-success); }
.neg .neg-liverail__verdict.is-over .neg-liverail__verdict-n { color: var(--v-error); }
.neg .neg-liverail__rec {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 4px;
    padding-top: 9px;
    border-top: 1px solid var(--v-border);
}
.neg .neg-liverail__rec-lab {
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--v-ink-muted);
}
.neg .neg-liverail__rec-none { font-size: 0.76rem; color: var(--v-ink-muted); }
.neg .neg-liverail__rec-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.neg .neg-liverail__rec-k { font-size: 0.72rem; color: var(--v-ink-muted); }
.neg .neg-liverail__rec-v { font-size: 0.84rem; font-weight: 700; color: var(--v-ink); }
.neg .neg-liverail__apply {
    /* AA-safe accent button: --v-accent-brand-aa fill + --v-canvas text clears AA on
       both vibes (mirrors .neg-actions__apply; --v-on-accent white fails at 2.33:1). */
    margin-top: 4px;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    background: var(--v-accent-brand-aa);
    color: var(--v-on-accent, #fff);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}
.neg .neg-liverail__apply:disabled { opacity: 0.45; cursor: default; }
.neg .neg-liverail__apply:not(:disabled):hover { filter: brightness(1.05); }

/* ── 3. Options ABOVE diagnostics. The content grid holds three children:
   the collapsed diagnostics <details> (neg-diag), the "Options to meet your
   budget" band (neg-sec-levers) and the simulator (neg-sim). Make the grid a
   flex column and float the options above the diagnostics via order. ── */
.neg .neg-grid.neg-workspace-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.neg .neg-grid.neg-workspace-grid > [data-testid="neg-sec-levers"] { order: 1; }
.neg .neg-grid.neg-workspace-grid > [data-testid="neg-sim"]        { order: 2; }
.neg .neg-grid.neg-workspace-grid > .neg-diag                      { order: 3; }

/* ── 4. Collapsed-by-default diagnostics disclosure ── */
.neg .neg-diag {
    border: 1px solid var(--v-border);
    border-radius: 10px;
    background: var(--v-surface);
}
.neg .neg-diag > .neg-diag__sum {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.neg .neg-diag > .neg-diag__sum::-webkit-details-marker { display: none; }
.neg .neg-diag__ic { display: inline-flex; color: var(--v-ink-muted); transition: transform 0.15s ease; }
.neg .neg-diag[open] > .neg-diag__sum .neg-diag__ic { transform: rotate(180deg); }
.neg .neg-diag__lab { font-size: 0.84rem; font-weight: 700; color: var(--v-ink); }
.neg .neg-diag__hint { font-size: 0.72rem; color: var(--v-ink-muted); }
.neg .neg-diag[open] { padding-bottom: 12px; }
.neg .neg-diag .prodspec-bento { margin: 0 12px; }

/* ── 5. Denser options (simulator) rows ── */
.neg .neg-sim-item { padding: 7px 10px; }
.neg .neg-sim-item__main { gap: 8px; }
.neg .neg-sim-list { gap: 5px; }
.neg .neg-sim-budget { padding: 8px 12px; gap: 14px; }

/* ── 6. Collapse to single column on narrow viewports. Below ~960px the sticky
   rail stacks under the main column (the live read flows inline). ── */
@media (max-width: 960px) {
    .neg .neg-shell { grid-template-columns: 1fr; }
    .neg .neg-liverail { position: static; }
    .neg .neg-budgetbar__seg--verdict { margin-left: 0; }
}

/* ============================================================
   BU-462 BAND MERGE — collapse the stacked bands above the charts (Beau: "condense
   the top 20% — nothing above the charts has changed"). The charts sat at y364 behind
   FOUR stacked page bands: breadcrumb, view-tabs, meta row, budget strip. Merge them:
   breadcrumb + tabs share one row; the budget folds inline into the header lead. The
   global app nav (apphdr) is the shared site shell and is left alone.
   ============================================================ */
/* 1. breadcrumb + view tabs on ONE row (tabs were a separate ~49px band) */
.sim .sim__head--compact {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.sim .sim__head--compact .sim__viewtabs { padding: 0 !important; margin: 0 !important; }

/* 2. budget folded inline into the header lead (was a standalone 33px strip band) */
.neg .neg-head__lead { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; min-width: 0; }
.neg .neg-head .neg-budgetbar {
    display: inline-flex; align-items: baseline; gap: 12px;
    border: 0; border-left: 2px solid var(--v-border); border-radius: 0;
    padding: 0 0 0 12px; margin: 0; background: none; box-shadow: none;
}
.neg .neg-head .neg-budgetbar.is-over { border-left-color: var(--v-error); }
.neg .neg-head .neg-budgetbar__seg--verdict { margin-left: 0; }

/* 3. tighten the header itself so the merged bar stays one tight line */
.neg[data-testid] .neg-head { padding-top: 6px !important; padding-bottom: 6px !important; flex-wrap: wrap; row-gap: 6px; }

/* BU-462: the global content <main> pads 24px at top; on the Production Spec page that
   is dead space between the app nav and the breadcrumb. Scope it down via :has so only
   this page tightens (other pages keep the 24px). */
main:has(.sim) { padding-top: 8px !important; }
.sim { padding-top: 4px; }

/* ============================================================
   BU-463 /frontend-design CRAFT PASS — commit to ONE aesthetic: "production ledger".
   The page ran three competing type systems — Bricolage display headers, JetBrains-Mono
   KPIs/exec hero, but generic Helvetica for the PRIMARY figures (sunburst DELIV counts +
   budget bar). A planning instrument should speak every figure in one precise voice.
   Unify all figures into the mono instrument numeral; give the engagement title editorial
   display character; warm the clinical canvas a hair; keep the orange alert accent.
   Brand-preserving, AA-safe, theme-token-aware, no layout/IA change.
   ============================================================ */
/* 1. every key figure in ONE instrument numeral voice (mono, tabular) */
.neg .neg-scope-card__burst text,
.neg .neg-budgetbar__v,
.neg .neg-scope-card__hl-v,
.neg .neg-scope-card__ys-x {
    font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
/* 2. the engagement title carries the editorial display face (was generic Helvetica) */
.sim .sim__title {
    font-family: "Bricolage Grotesque", var(--font-display, Georgia), serif;
    font-weight: 700; letter-spacing: -0.015em;
}
/* 3. BU-503: the page canvas follows the ACTIVE global vibe, not a hardcoded amber wash.
   The old kraft-paper tint (color-mix with #E0A24A) is a leftover of the private Compose
   skin BU-503 removes: it pushed the surface ~18 ΔE off the vibe's own --color-canvas token,
   so under a light vibe it read as an un-themed near-white leak (reskin white-chrome gate).
   Routing straight to the vibe tokens keeps the page recolouring with every skin (cream under
   sepia-ledger, navy under harbor-night, etc.) AND lands exactly on the theme surface tokens.
   Panels sit one step up on --v-surface so the work surface still reads as raised "paper". */
.sim { background: var(--v-canvas); }
.sim .neg[data-testid] { background: var(--v-surface); }
/* the warm canvas is darker than clinical white, so darken the muted-ink labels that sit
   directly on it back to AA 4.5:1 against the kraft (hard project rule). Direct class
   overrides because the muted token is redefined at .neg scope and beats a token override. */
.neg .neg-budgetbar__k,
.neg .neg-scopes__legend-ring,
.neg .neg-scopes__legend-rings,
.neg .neg-scope-card__rings-lab,
.neg .neg-liverail__k { color: var(--v-ink-dim) !important; }
/* 4. the budget-over verdict carries brand alert weight, matching the exec hero */
.neg .neg-budgetbar__v--over { color: var(--v-error); font-weight: 800; }

/* ── BU-463 BOLD: make the "production ledger" direction unmistakable ──────────────
   A masthead title, orange ledger rules under section heads, a heavier accent edge on
   the scope band, and bigger instrument numerals. Visible at a glance, layout intact. */
/* masthead: the engagement name reads as a confident title, not a breadcrumb tail */
.sim .sim__title { font-size: 1.5rem; font-weight: 800; }
/* a Traffic-Orange ledger rule under each section head + the scope-band masthead */
.neg .neg-sec-head__title {
    display: inline-block;
    border-bottom: 3px solid var(--v-accent-brand);
    padding-bottom: 3px; line-height: 1.05;
}
/* heavier branded top edge on the scope composer band — it is the page's lead */
.neg[data-testid] .neg-scopes { border-top: 4px solid var(--v-accent-brand) !important; }
/* the sunburst center counts are the headline figures — give them instrument scale */
.neg .neg-scope-card__burst text[font-size="26"] { font-size: 30px; }
/* the live-budget rail reads as a ledger readout: mono values, hairline rules between rows */
.neg .neg-liverail__v { font-family: var(--font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; }
.neg .neg-liverail__row { border-bottom: 1px solid color-mix(in srgb, var(--v-ink) 12%, transparent); padding-bottom: 5px; }

/* ============================================================
   BU-463 FRAME THE STARBURST — the burst is the page's whole point (Beau, from day one),
   but it sat 11px from the card top with a 201px title/cost/actions block below it (near
   equal visual weight) — crammed, not framed. Compact the meta so the burst is the clear
   hero (~70% of the card) with a tidy caption + one-line action row beneath it.
   ============================================================ */
/* a touch more presence for the hero */
.neg[data-testid] .neg-scope-card__burst { max-width: 256px; }
/* the "SCOPE n" index reads as a quiet eyebrow, not a 26px line */
/* BU-755: dropped `opacity: 0.7`. The label is already de-emphasised by size, tracking
   and --v-ink-dim; stacking container opacity on top took "SCOPE 1" to 4.09:1. Without
   it the same dim ink measures 5.8:1 on the white card and the hierarchy is unchanged. */
.neg .neg-scope-card__title { font-size: 0.6rem; line-height: 1.15; letter-spacing: 0.08em; }
/* tighten the name + cost stack */
.neg .neg-scope-card__primary { gap: 1px; }
.neg .neg-scope-card__headline { gap: 4px; margin-top: 1px; }
.neg .neg-scope-card__headline,
.neg .neg-scope-card__headline * { line-height: 1.1; }
/* the three controls sit on ONE tight row when the card is wide; at narrow card widths
   (29-scope 100%-unique grid, ~170px) they WRAP inside the card instead of overflowing the
   right edge into the gutter/next card. BU-475: nowrap was making Divide escape the card. */
.neg .neg-scope-card__actions {
    padding-top: 7px !important; margin-top: 1px; gap: 6px;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
}
.neg .neg-scope-card__actions > * {
    font-size: 0.7rem !important; padding: 5px 9px !important; line-height: 1 !important;
    white-space: nowrap;
}
/* a hair of breathing room under the burst so it reads as framed, not jammed to the top */
.neg .neg-scope-card { padding-top: 13px !important; }

/* BU-463 frame corrective: the scoped .neg-scope-card__*[b-hash] rules load after this
   file and tie on specificity, so .neg .x lost. Bump to .neg[data-testid] (0,3,0) + the
   buttons get !important to collapse the 73px wrapping action stack into ONE ~30px row. */
.neg[data-testid] .neg-scope-card__actions {
    padding-top: 7px !important; margin-top: 2px !important; gap: 5px !important;
    display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
    align-items: center !important; justify-content: center !important;
}
/* BU-475: tightened so all three controls fit ONE tight row down to the grouped ~230px card
   width (preserving the BU-463 single-row density); only the extreme-narrow 170px 29-scope
   grid wraps - and there it wraps INSIDE the card rather than overflowing the right edge. */
.neg[data-testid] .neg-scope-card__actions > * {
    font-size: 0.66rem !important; padding: 4px 6px !important;
    line-height: 1 !important; height: auto !important; min-height: 0 !important; margin: 0 !important;
    max-width: 100% !important; white-space: nowrap !important;
}
.neg[data-testid] .neg-scope-card__select { gap: 3px !important; }
.neg[data-testid] .neg-scope-card__primary { gap: 0 !important; }
.neg[data-testid] .neg-scope-card__title { font-size: 0.58rem !important; margin: 0 !important; }
.neg[data-testid] .neg-scope-card__name { line-height: 1.15 !important; }
.neg[data-testid] .neg-scope-card__headline { gap: 4px !important; margin-top: 2px !important; line-height: 1.05 !important; }

/* ============================================================
   BU-463 FIX THE COVER-UP (Beau: "the recommended plan card is covering the starburst
   section"). .neg-actions is position:sticky; bottom:0; z-index:20 — a viewport-bottom
   pinned "Recommended Plan" bar. In the two-column shell the scope cards are tall, so the
   sticky bar floats and PAINTS OVER the bottom ~140px of the starbursts. The sticky right
   rail (.neg-liverail) already keeps budget + Apply visible, so this bar no longer needs
   to be a floating overlay. Drop it into normal flow: it now sits BELOW the starbursts and
   never covers them. (0,3,0 to beat the scoped rule.)
   ============================================================ */
/* BU-462 brief: the sticky rail is back as the budget + recommended-plan + Apply home, so
   this in-flow bar is redundant again — hide it (and it was the thing covering the bursts). */
.neg[data-testid] .neg-actions { display: none !important; }

/* recommended-change chips inside the sidebar rail: stacked full-width pills */
.neg .neg-liverail__chips { display: flex; flex-direction: column; gap: 5px; margin: 2px 0 8px; }
/* BU-468: the recommended-change label can be long ("Merge voices: Finding Meaning -
   SCIMJW ...") - let it WRAP to as many lines as it needs instead of being clipped.
   align-items:flex-start so the saved-$ stays pinned top-right while the label wraps. */
.neg .neg-liverail__chip {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
    padding: 6px 9px; border-radius: 8px;
    background: var(--v-surface-sunken); border: 1px solid var(--v-border);
    font-size: 0.74rem; line-height: 1.3;
}
.neg .neg-liverail__chip-lab {
    color: var(--v-ink);
    flex: 1 1 auto; min-width: 0;
    white-space: normal; overflow-wrap: anywhere; word-break: break-word;
}
.neg .neg-liverail__chip-save {
    color: var(--v-success); font-weight: 700;
    flex: 0 0 auto;
    font-family: var(--font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ============================================================
   BU-463 DECLUTTER THE HERO (Beau: "/frontend-ui to fix this mess"). The three starbursts
   were ringed by ~210px of supporting chrome — a tall drag-split zone, a reuse-efficiency
   stat bar, and a 3-line ring legend — all competing with the hero. Quiet them so the
   bursts breathe: one-line legend, compact efficiency, slim at-rest drag target. Reductive
   only; nothing removed, no interaction broken. (0,3,0 to win.)
   ============================================================ */
/* BU-468: the BU-463 "one tight line" squash made the ring legend an illegible run-on
   (Beau: "senseless and woefully underdesigned"). The legend is now a compact two-group
   key (glyph + spaced ring rows + voice colours) - let it keep its own layout/spacing and
   stop forcing it onto a single 0.66rem line. */
.neg[data-testid] .neg-scopes__legend {
    padding: 12px 14px !important; gap: 12px 28px !important;
    opacity: 1;
    display: flex !important; flex-wrap: wrap !important; align-items: stretch !important;
    justify-content: flex-start !important;
}
.neg[data-testid] .neg-scopes__legend-rings {
    display: flex !important; flex-direction: column !important; gap: 5px !important;
}
/* reuse-efficiency -> compact single-line stat, not a 56px bar */
.neg[data-testid] .neg-efficiency {
    padding: 5px 10px !important; margin: 2px 0 !important;
    display: flex !important; align-items: center !important; gap: 10px !important;
}
.neg[data-testid] .neg-efficiency__eyebrow { font-size: 0.6rem !important; margin: 0 !important; }
/* the split drop-zone is a target during drag; at rest it is just instruction — slim it */
.neg[data-testid] .neg-dragzone {
    padding: 8px 12px !important; margin-top: 4px !important;
    /* BU-755: this used to be `opacity: 0.62` to say "at rest this is just instruction".
       Container opacity dims the TEXT as well as the chrome, and it dragged every child
       of the drag zone under AA at once (measured: Undo move 3.27:1, Recommended
       arrangement 3.35:1, Commit arrangement 2.93:1 - all of which pass at full opacity).
       De-emphasise with the border and backdrop instead, so the labels keep their real
       contrast and only the frame recedes. */
    border-color: var(--v-border) !important;
    background: transparent !important;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.neg[data-testid] .neg-dragzone:hover,
.neg[data-testid] .neg-scopes.is-gap-dragging .neg-dragzone,
.neg[data-testid] .neg-dragzone.is-over {
    /* BU-755: was `opacity: 1` to undo the at-rest dimming. That dimming is gone, so
       the active state now emphasises with the accent border + a faint wash instead. */
    border-color: var(--v-accent-brand-aa) !important;
    background: var(--v-accent-brand-tint) !important;
}

/* ============================================================
   BU-463 SINGLE-COLUMN CLEANUP (Beau kept: "What this plan costs" band + "Options"; folded:
   sidebar rail + "Cost and coverage breakdown"). Hide the redundant breakdown stat strip +
   its header — the 4/7/125/90/95% counts are already in the page header meta AND the exec
   band above it. The interactive channel/voice detail + the heavy diagnostics below remain
   (the diagnostics are already behind their own "Show supporting breakdowns" disclosure).
   And with the rail folded the scope cards are full-width now, so grow the hero bursts.
   ============================================================ */
.neg[data-testid] .neg-sec-head--detail,
.neg[data-testid] .neg-kpis { display: none !important; }
/* BU-462 brief "smaller, denser": the bursts shrink hard to keep the scope builder compact
   so the rail's budget + fixes sit above the fold beside it. */
.neg[data-testid] .neg-scope-card__burst { max-width: 188px; }

/* ============================================================
   BU-462 DE-DUP (Beau: "Still seeing a lot of redundant information"). The budget answer
   (Over by $500 / $1,500 / $2,000) was stated FOUR times: header meta + sticky rail + exec
   band hero + a standalone budget-status/allocation panel. The sticky rail is the single
   budget home; cut the three duplicates. Each fact now appears once in its primary surface.
   ============================================================ */
/* 1. header meta no longer restates the budget (the rail owns it); keep scope counts only */
.neg[data-testid] .neg-head__lead .neg-budgetbar { display: none !important; }
/* 2. the exec band keeps the PLAN-HEALTH stats (deliverables / readiness / coverage / reuse)
   but drops its duplicate "Over by $500" budget hero card — the rail states budget. */
.neg[data-testid] .neg-exec__card--hero { display: none !important; }
/* 3. the standalone budget-status + allocation + requirements panel duplicates the rail's
   budget and buries allocation detail; fold it (supporting detail belongs in diagnostics). */
.neg[data-testid] .neg-workspace .neg-rail { display: none !important; }

/* ============================================================
   BU-464 (2026-06-25, Beau): IA restructure chrome.
   - Engine-level tabs (.neg-tabs): Scope Builder / Heat Map.
   - Voice & channel details DRAWER (.neg-drawer) + scrim, replacing the
     always-visible neg-channel-panel + neg-voice-panel.
   - .neg-detailstrigger button that opens the drawer.
   - .neg-heatmap panel for the moved coverage view.
   All colours resolve from --v-* tokens; active-toggle treatment mirrors
   the page's AA-safe .neg-toggle__btn.is-active (color-mix toward --v-ink).
   ============================================================ */

/* ── engine tablist ── */
.neg[data-testid] .neg-tabs {
    display: flex;
    gap: 4px;
    margin: 4px 0 14px;
    border-bottom: 1px solid var(--v-border);
    padding-bottom: 0;
}
.neg[data-testid] .neg-tabs__tab {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    color: var(--v-ink-dim);
    font-size: 0.86rem;
    font-weight: 600;
    padding: 9px 18px;
    cursor: pointer;
    position: relative;
    bottom: -1px;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.neg[data-testid] .neg-tabs__tab:hover { color: var(--v-ink); background: var(--v-hover); }
.neg[data-testid] .neg-tabs__tab.is-active {
    color: var(--v-ink);
    background: var(--v-surface-raised, var(--v-surface));
    border-color: var(--v-border);
    border-bottom: 1px solid var(--v-surface-raised, var(--v-surface));
}
.neg[data-testid] .neg-tabs__tab.is-active::after {
    content: "";
    position: absolute;
    left: 10px; right: 10px; top: 0;
    height: 3px;
    border-radius: 0 0 2px 2px;
    background: color-mix(in srgb, var(--v-accent-brand-aa), var(--v-ink) 18%);
}
.neg[data-testid] .neg-tabs__tab:focus-visible {
    outline: 2px solid var(--v-accent-brand-aa);
    outline-offset: 2px;
}

/* ── voice & channel details trigger ── */
.neg[data-testid] .neg-detailstrigger {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 10px;
}
.neg[data-testid] .neg-detailstrigger__btn {
    appearance: none;
    background: var(--v-surface);
    border: 1px solid var(--v-border-strong, var(--v-border));
    border-radius: 8px;
    color: var(--v-ink);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 8px 14px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.neg[data-testid] .neg-detailstrigger__btn:hover {
    background: var(--v-hover);
    border-color: color-mix(in srgb, var(--v-accent-brand-aa), var(--v-ink) 18%);
}
.neg[data-testid] .neg-detailstrigger__btn:focus-visible {
    outline: 2px solid var(--v-accent-brand-aa);
    outline-offset: 2px;
}

/* ── details drawer (right-side pop-out) ── */
.neg[data-testid] .neg-drawer-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    z-index: 1090;
    animation: neg-drawer-fade 0.16s ease;
}
.neg[data-testid] .neg-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(460px, 94vw);
    background: var(--v-surface-raised, var(--v-surface));
    border-left: 1px solid var(--v-border-strong, var(--v-border));
    box-shadow: -18px 0 48px rgba(0, 0, 0, 0.28);
    z-index: 1091;
    display: flex;
    flex-direction: column;
    animation: neg-drawer-slide 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.neg[data-testid] .neg-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--v-border);
    flex: 0 0 auto;
}
.neg[data-testid] .neg-drawer__title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--v-ink);
}
.neg[data-testid] .neg-drawer__close {
    appearance: none;
    background: transparent;
    border: 1px solid var(--v-border);
    border-radius: 8px;
    width: 32px; height: 32px;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--v-ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}
.neg[data-testid] .neg-drawer__close:hover { background: var(--v-hover); }
.neg[data-testid] .neg-drawer__close:focus-visible {
    outline: 2px solid var(--v-accent-brand-aa);
    outline-offset: 2px;
}
.neg[data-testid] .neg-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 18px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
@keyframes neg-drawer-slide {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
@keyframes neg-drawer-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .neg[data-testid] .neg-drawer,
    .neg[data-testid] .neg-drawer-scrim { animation: none; }
}

/* ── heat map tab panel ── */
.neg[data-testid] .neg-heatmap {
    background: var(--v-surface-raised, var(--v-surface));
    border: 1px solid var(--v-border);
    border-radius: 12px;
    padding: 20px 22px 24px;
}
.neg[data-testid] .neg-heatmap__head { margin-bottom: 16px; }
.neg[data-testid] .neg-heatmap__eyebrow {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--v-ink-muted, var(--v-ink-dim));
}
.neg[data-testid] .neg-heatmap__title {
    margin: 2px 0 4px;
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--v-ink);
}
.neg[data-testid] .neg-heatmap__sub {
    margin: 0;
    font-size: 0.84rem;
    color: var(--v-ink-dim);
    max-width: 64ch;
}
/* the moved overview lays out the rollup + coverage side by side inside the panel */
.neg[data-testid] .neg-heatmap .neg-scopes__overview {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 26px;
    align-items: start;
}
@media (max-width: 880px) {
    .neg[data-testid] .neg-heatmap .neg-scopes__overview { grid-template-columns: 1fr; }
}

/* ============================================================
   BU-462 TOP-CHROME CRUSH (Beau + screenshot: "top sections taking up over 50% of vertical
   space"; measured burst at y488 = 70% of the fold, ~99px of it empty inter-band gaps). The
   .neg container had gap:16px between every band + per-band margins stacked it taller. Crush
   the gaps, tighten each band, and lift the "Voice & channel details" trigger out of its own
   band onto the tab row so the bursts start near the top.
   ============================================================ */
.neg[data-testid] { gap: 4px !important; }
.sim .sim__head--compact { padding: 5px 28px 4px !important; }
.sim .sim__viewtabs { padding-top: 2px !important; padding-bottom: 2px !important; }
.neg[data-testid] .neg-head { padding: 2px 0 !important; margin: 0 !important; }
.neg .neg-tabs { margin: 0 0 2px !important; }
.neg[data-testid] .neg-scopes { padding-top: 4px !important; }
.neg .neg-scopes__head { margin: 0 0 2px !important; }
/* lift the drawer trigger onto the tab row's right edge (was its own ~37px band + gaps) */
.neg .neg-detailstrigger {
    margin: -40px 0 6px auto !important;
    width: max-content !important;
    position: relative; z-index: 5;
}

/* BU-462 top-crush round 2: still 56% -> push under 50%. Tighten the breadcrumb, the
   group-by header, and the burst's card top padding so the burst sits higher in its card. */
.sim .sim__head--compact { padding: 3px 28px 3px !important; }
.neg[data-testid] .neg-head { padding: 1px 0 !important; font-size: 0.8rem; }
.neg[data-testid] .neg-scopes__head { padding: 2px 0 !important; }
.neg .neg-scopes__head .neg-scopes__controls { row-gap: 4px !important; }
.neg[data-testid] .neg-scope-card { padding-top: 7px !important; }

/* ============================================================
   BU-462 SOURCE TWO-ROW MERGE (Beau, 2026-06-26): "reduce the 6 stacked header
   bands to a total of 2." Done in MARKUP, not padding overrides. Below the shared
   global app nav there are now exactly TWO page rows before the bursts:
     ROW 1 = .neg-topbar  : engagement name + voices/channels/deliverables meta (left),
             Scope Builder | Heat Map tabs + folded secondary controls (Actual/Scenario,
             Compose/Plan Generator/Stacks chips, Detailed view, Dark) (right).
     ROW 2 = .neg-scopes__head .neg-scopes__controls : Group by + grouping pills inline,
             with the Voice & channel details drawer trigger right-aligned.
   The host breadcrumb (.sim__head--compact) is hidden in the engine view (the engagement
   name moved into ROW 1); it only re-appears in the Detailed Simulator view.
   ============================================================ */

/* ── ROW 1 (BU-536 overhaul): one bar, ONE control grammar, one 32px control height.
   Left = identity (title + meta). Right = two segmented groups (view tabs, plan lens)
   + the scenario deck. Alignment is structural: every control derives its height from
   --negbar-ctl, so nothing sits on its own baseline. ── */
.neg[data-testid] .neg-topbar {
    --negbar-ctl: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: nowrap;
    margin: 0 0 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--v-border);
}
.neg[data-testid] .neg-topbar__lead {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
    flex: 1 1 0;
    overflow: hidden;
}
.neg[data-testid] .neg-topbar__title {
    font-family: var(--font-display, inherit);
    font-size: 1.06rem;
    font-weight: 700;
    color: var(--v-ink);
    letter-spacing: -0.01em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* the title is the page's identity: it keeps a readable floor (raised from
       150 to 210 - BU-742) and shrinks gracefully via that floor + ellipsis.
       flex-shrink:0 was tried and reverted: it let title overflow lead's own
       (still-shrinkable) box, which lead's overflow:hidden then hard-clipped
       with no ellipsis at all - worse than the bug it was meant to fix. */
    flex: 0 1 auto;
    min-width: 210px;
}
.neg[data-testid] .neg-topbar__meta {
    font-size: 0.8rem;
    color: var(--v-ink-dim);
    margin: 0 !important;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.neg[data-testid] .neg-topbar__right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

/* ONE segmented-control grammar for both the view tabs (Scope Builder | Heat Map) and
   the plan lens (Actual | Scenario): an inset track; the active segment fills with the
   AA-safe brand token and inverts to surface-colored text, so the pair reads as the
   same instrument at two sizes and contrast holds in every vibe. */
.neg[data-testid] .neg-topbar .neg-tabs,
.neg[data-testid] .neg-topbar .neg-viewtoggle--global {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: var(--negbar-ctl);
    padding: 2px;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 9px;
    background: color-mix(in srgb, var(--v-ink) 7%, transparent);
}
.neg[data-testid] .neg-topbar .neg-tabs__tab,
.neg[data-testid] .neg-topbar .neg-viewtoggle--global .neg-viewtoggle__btn {
    display: inline-flex;
    align-items: center;
    height: 100%;
    bottom: 0;
    padding: 0 13px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--v-ink-dim);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.neg[data-testid] .neg-topbar .neg-tabs__tab:hover:not(.is-active),
.neg[data-testid] .neg-topbar .neg-viewtoggle--global .neg-viewtoggle__btn:hover:not(.is-active) {
    color: var(--v-ink);
    background: var(--v-hover);
}
.neg[data-testid] .neg-topbar .neg-tabs__tab.is-active,
.neg[data-testid] .neg-topbar .neg-viewtoggle--global .neg-viewtoggle__btn.is-active {
    background: var(--v-accent-brand-aa);
    /* BU-755: was var(--v-surface) - a near-white paper tone that only reaches 4.34:1
       on the accent under sepia-ledger. --v-on-accent is the slot paired to the accent
       per vibe, so it tracks the fill instead of the page surface. */
    color: var(--v-on-accent);
    font-weight: 700;
    border: 0;
}
.neg[data-testid] .neg-topbar .neg-tabs__tab.is-active::after { display: none; }
.neg[data-testid] .neg-topbar .neg-tabs__tab:focus-visible,
.neg[data-testid] .neg-topbar .neg-viewtoggle--global .neg-viewtoggle__btn:focus-visible {
    outline: 2px solid var(--v-accent-brand-aa);
    outline-offset: 2px;
}

/* The right-side controls are fixed-width, so hide metadata from the actual remaining lead
   width rather than a guessed viewport breakpoint. Below 1100 the right cluster still wraps
   under the title as the final fallback. */
@media (max-width: 1650px) {
    .neg[data-testid] .neg-topbar__meta { display: none; }
}
@media (max-width: 1450px) {
    .neg[data-testid] .neg-topbar { flex-wrap: wrap; row-gap: 8px; }
    .neg[data-testid] .neg-topbar__right {
        flex: 1 1 100%;
        min-width: 0;
        flex-wrap: wrap;
        row-gap: 8px;
        justify-content: flex-start;
    }
    .neg[data-testid] .neg-topbar .neg-scenariobar__name { width: 120px; }
}

/* ── ROW 2: Group by + pills inline, drawer trigger right-aligned ── */
/* The old standalone .neg-detailstrigger band (and its -40px negative-margin lift hack)
   are retired: the trigger now lives INSIDE .neg-scopes__controls. Reset that hack. */
.neg[data-testid] .neg-scopes__head .neg-scopes__controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    row-gap: 6px !important;
}
.neg[data-testid] .neg-scopes__controls .neg-detailstrigger.neg-scopes__detailstrigger {
    margin: 0 0 0 auto !important;   /* push to the right edge of the controls row */
    width: max-content !important;
    position: static;
}
.neg[data-testid] .neg-scopes__detailstrigger .neg-detailstrigger__btn {
    padding: 6px 12px;
    font-size: 0.78rem;
}

/* ============================================================
   BU-465 COMPACT GROUPING DROPDOWN (Beau, 2026-06-26): collapse Row 2 into ONE control.
   The grouping pill radiogroup + the "Voice & channel details" trigger + the capture-ring
   toggle become a single menu button. Row 2 is now ~32px tall (one button) instead of a
   wrapping pill strip, so the bursts rise. All colours resolve from --v-* tokens; AA-safe
   (--v-ink on --v-surface, focus ring --v-accent-brand-aa). Popover floats over content.
   ============================================================ */
.neg[data-testid] .neg-scopes__controls .neg-groupmenu {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: max-content;
}
.neg[data-testid] .neg-groupmenu__trigger {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--v-surface);
    border: 1px solid var(--v-border-strong, var(--v-border));
    border-radius: 8px;
    color: var(--v-ink);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 6px 12px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.neg[data-testid] .neg-groupmenu__trigger:hover:not(:disabled) {
    background: var(--v-hover);
    border-color: color-mix(in srgb, var(--v-accent-brand-aa), var(--v-ink) 18%);
}
.neg[data-testid] .neg-groupmenu__trigger:focus-visible {
    outline: 2px solid var(--v-accent-brand-aa);
    outline-offset: 2px;
}
.neg[data-testid] .neg-groupmenu__trigger:disabled { opacity: 0.6; cursor: progress; }
.neg[data-testid] .neg-groupmenu__trigger-lab {
    color: var(--v-ink-dim);
    font-weight: 600;
}
.neg[data-testid] .neg-groupmenu__trigger-val { color: var(--v-ink); }
.neg[data-testid] .neg-groupmenu__caret {
    color: var(--v-ink-dim);
    font-size: 0.7rem;
    transition: transform 0.15s ease;
}
.neg[data-testid] .neg-groupmenu.is-open .neg-groupmenu__caret { transform: rotate(180deg); }

/* click-away scrim: invisible, sits below the popover, above the page */
.neg[data-testid] .neg-groupmenu__scrim {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: transparent;
}
.neg[data-testid] .neg-groupmenu__pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1081;
    min-width: 248px;
    background: var(--v-surface-raised, var(--v-surface));
    border: 1px solid var(--v-border-strong, var(--v-border));
    border-radius: 10px;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.22);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    animation: neg-groupmenu-pop 0.14s ease;
}
.neg[data-testid] .neg-groupmenu__pop:focus-visible { outline: none; }
.neg[data-testid] .neg-groupmenu__item {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 7px;
    color: var(--v-ink);
    font-size: 0.82rem;
    font-weight: 500;
    padding: 8px 10px;
    cursor: pointer;
    transition: background 0.12s ease;
}
.neg[data-testid] .neg-groupmenu__item:hover:not(:disabled),
.neg[data-testid] .neg-groupmenu__item:focus-visible {
    background: var(--v-hover);
    outline: none;
}
.neg[data-testid] .neg-groupmenu__item:disabled { opacity: 0.55; cursor: progress; }
.neg[data-testid] .neg-groupmenu__item.is-active {
    background: color-mix(in srgb, var(--v-accent-brand-aa) 12%, var(--v-surface));
    color: var(--v-ink);
    font-weight: 700;
}
.neg[data-testid] .neg-groupmenu__item-check {
    flex: 0 0 14px;
    width: 14px;
    color: var(--v-accent-brand-aa);
    font-weight: 700;
    font-size: 0.82rem;
    line-height: 1;
}
.neg[data-testid] .neg-groupmenu__item-lab { flex: 1 1 auto; }
.neg[data-testid] .neg-groupmenu__sep {
    height: 1px;
    margin: 4px 6px;
    background: var(--v-border);
}

.neg[data-testid] .neg-reuse-target {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    width: max-content;
    min-height: 30px;
    padding: 3px;
    border: 1px solid var(--v-border-strong, var(--v-border));
    border-radius: 999px;
    background: var(--v-surface);
}

.neg[data-testid] .neg-reuse-target__lab {
    padding: 0 7px 0 8px;
    color: var(--v-ink-dim);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.neg[data-testid] .neg-reuse-target__btn {
    appearance: none;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--v-ink);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 750;
    line-height: 1;
    padding: 6px 10px;
    transition: background 0.14s ease, color 0.14s ease;
}

.neg[data-testid] .neg-reuse-target__btn:hover:not(:disabled),
.neg[data-testid] .neg-reuse-target__btn:focus-visible {
    background: var(--v-hover);
    outline: none;
}

.neg[data-testid] .neg-reuse-target__btn.is-active {
    background: var(--v-accent-brand-aa);
    color: var(--v-on-accent, #fff);
}

.neg[data-testid] .neg-reuse-target__btn:disabled {
    cursor: progress;
    opacity: 0.62;
}

.neg[data-testid] .neg-reuse-actual {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-height: 30px;
    padding: 6px 10px;
    border: 1px solid var(--v-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--v-surface) 84%, var(--v-accent-brand-aa) 16%);
    color: var(--v-ink);
    width: max-content;
}

.neg[data-testid] .neg-reuse-actual__lab {
    color: var(--v-ink-dim);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.neg[data-testid] .neg-reuse-actual__val {
    color: var(--v-ink);
    font-size: 0.9rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.neg[data-testid] .neg-reuse-actual__unit {
    margin-left: 1px;
    color: var(--v-ink-dim);
    font-size: 0.66rem;
    font-weight: 800;
}
.neg[data-testid] .neg-groupmenu__item--action {
    color: var(--v-ink-dim);
    font-weight: 600;
}
.neg[data-testid] .neg-groupmenu__item--action:hover:not(:disabled),
.neg[data-testid] .neg-groupmenu__item--action:focus-visible { color: var(--v-ink); }
@keyframes neg-groupmenu-pop {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .neg[data-testid] .neg-groupmenu__pop { animation: none; }
    .neg[data-testid] .neg-groupmenu__caret { transition: none; }
}

/* ============================================================
   BU-462 (Beau: "ugly - too many header strips"), scoped to this page only via
   :has(.neg-topbar) so no other page is affected and it's fully reversible:
   hide the SECOND global app-nav row (Home/Build/Compose menu) — on a focused planning
   tool the logo bar + the 2 page rows are enough; nav stays reachable via the logo.
   (The old rule hiding the redundant Compose/Plan Generator/Stacks chips is gone -
   BU-536 removed that dead markup from the component itself.)
   ============================================================ */
body:has(.neg-topbar) .apphdr-row2 { display: none !important; }

/* ============================================================
   BU-467 — CHANNELS PANEL (Scope Builder tab, below the bursts/reuse)
   Lists every engagement channel with frequency + stages, a Paid/Organic
   segmented control, and a cross-post parent dropdown. Fully --v-* tokenized;
   AA contrast on text + active segment; reskins live with the rest of /neg.
   ============================================================ */
.neg .neg-channels {
    margin-top: 18px;
    padding: 16px 18px;
    background: var(--v-surface);
    border: 1px solid var(--v-border);
    border-radius: 10px;
}
.neg .neg-channels__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.neg .neg-channels__eyebrow { display: block; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v-ink-muted); margin-bottom: 2px; }
.neg .neg-channels__title { font-size: 16px; line-height: 1.1; margin: 0; color: var(--v-ink); }
.neg .neg-channels__sub { font-size: 12px; line-height: 1.4; margin: 4px 0 0; color: var(--v-ink-dim); max-width: 60ch; }
.neg .neg-channels__busy { font-size: 11px; color: var(--v-accent-brand-aa); white-space: nowrap; }
.neg .neg-channels__error { font-size: 12px; color: var(--v-error); margin: 0 0 10px; }
.neg .neg-channels__empty { font-size: 13px; color: var(--v-ink-dim); padding: 10px 0; }

.neg .neg-channels__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.neg .neg-channels__row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 10px 12px;
    background: var(--v-surface-raised);
    border: 1px solid var(--v-line);
    border-radius: 8px;
}
.neg .neg-channels__id { display: flex; flex-direction: column; gap: 2px; min-width: 180px; }
.neg .neg-channels__name { font-size: 13px; font-weight: 600; color: var(--v-ink); }
.neg .neg-channels__meta { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--v-ink-dim); }
.neg .neg-channels__dot { color: var(--v-ink-muted); }
.neg .neg-channels__controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* Paid / Organic segmented control */
.neg .neg-channels__seg { display: inline-flex; border: 1px solid var(--v-border); border-radius: 7px; overflow: hidden; }
.neg .neg-channels__seg-btn {
    appearance: none; border: 0; background: var(--v-surface);
    color: var(--v-ink-dim); font-size: 12px; font-weight: 600;
    padding: 5px 12px; cursor: pointer; line-height: 1;
}
.neg .neg-channels__seg-btn + .neg-channels__seg-btn { border-left: 1px solid var(--v-border); }
.neg .neg-channels__seg-btn:hover:not(:disabled) { background: var(--v-hover); color: var(--v-ink); }
.neg .neg-channels__seg-btn.is-active { background: var(--v-accent-brand-aa); color: var(--v-on-accent, #fff); }
.neg .neg-channels__seg-btn:disabled { opacity: 0.55; cursor: default; }
.neg .neg-channels__seg-btn:focus-visible { outline: 2px solid var(--v-accent-brand-aa); outline-offset: -2px; }

/* Cross-post parent dropdown */
.neg .neg-channels__cross { display: inline-flex; align-items: center; gap: 7px; }
.neg .neg-channels__cross-lab { font-size: 11px; color: var(--v-ink-dim); white-space: nowrap; }
.neg .neg-channels__cross-select {
    appearance: auto; font-size: 12px; padding: 5px 8px;
    background: var(--v-surface); color: var(--v-ink);
    border: 1px solid var(--v-border); border-radius: 6px; cursor: pointer;
}
.neg .neg-channels__cross-select:hover:not(:disabled) { border-color: var(--v-border-strong); }
.neg .neg-channels__cross-select:disabled { opacity: 0.55; cursor: default; }
.neg .neg-channels__cross-select:focus-visible { outline: 2px solid var(--v-accent-brand-aa); outline-offset: 1px; }

/* ============================================================
   BU-462 (Beau: "what's the benefit of artificially shrinking the desktop viewport?").
   The bursts were hard-capped at 188px for the 1366 laptop fold, leaving them tiny in the
   ~457px cards on a wide desktop. Make them RESPONSIVE: ~190px compact on a laptop (keeps the
   fold tight), scaling up to ~400px on a wide screen so the hero charts use the room.
   ============================================================ */
.neg[data-testid] .neg-scope-card__burst { max-width: var(--neg-burst-cap, clamp(200px, 16vw, 400px)); }

/* ============================================================
   BU-462 (Beau screenshot: budget rail clipped off the right edge on a wide desktop). Root
   cause: NegotiationEngine.razor.css uses a `width:100vw; left:50%; margin-left:-50vw`
   breakout to escape MainLayout's centered .container. 100vw includes the scrollbar and
   doesn't reconcile with the grid, so on wide screens the content is wider than the visible
   viewport and the right column (the sticky rail) spills off-screen. Fix: make THIS page's
   container full-width and neutralize the vw breakout, so the shell fits the real viewport
   at any width. Scoped via :has(.neg-topbar) so only the Production Spec page is affected.
   ============================================================ */
body:has(.neg-topbar) main .container { max-width: 100% !important; }
.neg[data-testid] {
    width: auto !important;
    left: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* belt-and-suspenders: the main column must always be able to shrink so the 264px rail fits */
.neg[data-testid] .neg-shell { grid-template-columns: minmax(0, 1fr) 264px !important; }

/* BU-462: the .sim wrapper also caps at max-width:1440, which (with the breakout removed)
   re-centers the page in a 1440 column and wastes the desktop width. Lift it on this page so
   the content genuinely fills the viewport; the shell's minmax(0,1fr)+264 keeps the rail in. */
body:has(.neg-topbar) .sim { max-width: 100% !important; }

/* ════════════════════════════════════════════════════════════════════════════════════
   BU-466 / BU-469 / BU-471 (2026-06-28, Beau): reuse SLIDER, channels inline editors,
   wedge HOVER preview, and the redesigned slice-detail card list. All --v-* tokens, AA.
   ════════════════════════════════════════════════════════════════════════════════════ */

/* ── BU-466: the reuse readout is now an interactive slider ───────────────────────────
   Override the BU-468 single-row !important so the slider gets a column layout with room. */
.neg[data-testid] .neg-efficiency.neg-efficiency--slider {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 5px !important;
    padding: 7px 12px !important;
}
.neg .neg-efficiency--slider .neg-efficiency__lab {
    display: flex; align-items: baseline; gap: 8px;
}
.neg .neg-efficiency--slider .neg-efficiency__val { font-size: 0.92rem; font-weight: 800; color: var(--v-ink); margin-left: auto; }
.neg .neg-efficiency--slider .neg-efficiency__unit { font-size: 0.62rem; font-weight: 700; color: var(--v-ink-dim); margin-left: 1px; }
.neg .neg-efficiency--slider .neg-efficiency__busy { font-size: 0.62rem; font-weight: 700; color: var(--v-accent-brand-aa); }
.neg .neg-efficiency__slider-row { display: flex; align-items: center; gap: 9px; }
.neg .neg-efficiency__end {
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--v-ink-dim); flex: 0 0 auto; white-space: nowrap;
}
.neg .neg-efficiency__track-wrap {
    position: relative; flex: 1 1 auto; height: 18px; display: flex; align-items: center;
}
/* reuse-% outcome bar painted BEHIND the thumb (the control sets strictness; this shows result) */
.neg .neg-efficiency__track-wrap .neg-efficiency__fill {
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    height: 6px; border-radius: 3px; pointer-events: none;
    background: var(--v-accent-brand-aa); opacity: 0.32;
    transition: width 0.2s ease;
}
.neg .neg-efficiency__range {
    position: relative; z-index: 1; -webkit-appearance: none; appearance: none;
    width: 100%; height: 18px; margin: 0; background: transparent; cursor: pointer;
}
.neg .neg-efficiency__range:disabled { cursor: default; opacity: 0.6; }
/* track */
.neg .neg-efficiency__range::-webkit-slider-runnable-track {
    height: 6px; border-radius: 3px; background: var(--v-line);
}
.neg .neg-efficiency__range::-moz-range-track {
    height: 6px; border-radius: 3px; background: var(--v-line);
}
/* thumb */
.neg .neg-efficiency__range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; margin-top: -6px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--v-accent-brand-aa); border: 2px solid var(--v-surface);
    box-shadow: 0 1px 4px rgba(var(--v-ink-rgb), 0.35);
}
.neg .neg-efficiency__range::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--v-accent-brand-aa); border: 2px solid var(--v-surface);
    box-shadow: 0 1px 4px rgba(var(--v-ink-rgb), 0.35);
}
.neg .neg-efficiency__range:focus-visible { outline: none; }
.neg .neg-efficiency__range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--v-ink); outline-offset: 2px; }
.neg .neg-efficiency__range:focus-visible::-moz-range-thumb { outline: 2px solid var(--v-ink); outline-offset: 2px; }
.neg .neg-efficiency--slider .neg-efficiency__hint { font-size: 0.66rem; color: var(--v-ink-dim); line-height: 1.3; }
@media (prefers-reduced-motion: reduce) {
    .neg .neg-efficiency__track-wrap .neg-efficiency__fill { transition: none; }
}

/* ── BU-775: reuse-efficiency legibility on the OFF-VIBE (default) state ──────────────
   Off-vibe, the base --v-* palette can split: the container's background token
   (--v-surface-sunken) resolves DARK (the cockpit default) while --v-ink /
   --v-ink-dim stay light-surface inks — measured 1.18:1 (__val) and 2.07:1
   (eyebrow, unit, end labels, hint) on the dark readout. The dark container is
   intended; the split pair is the bug. Fix: on the same four off-vibe sentinels
   the page's dark-default CSS keys on, pin the container to ONE self-consistent
   cockpit pairing (charcoal sunken surface + on-dark inks + on-dark accent) by
   redefining the tokens locally. Every rule that paints this container already
   reads these tokens, so no color declarations change. An explicit vibe does not
   match these selectors and repaints exactly as before. Values match the
   dark-default token set (surface-sunken #101216, ink ramp #eef1f4 / #b8c0c8 /
   #8a949e, hover #232830, accent-aa #ff8a4d) so this block is a no-op wherever
   that dark-default override also applies. All pairs >= 4.5:1 (see BU-775). */
:root:not([data-theme]) .neg .neg-efficiency,
:root[data-theme=""] .neg .neg-efficiency,
:root[data-theme="default"] .neg .neg-efficiency {
    --v-surface-sunken: #101216;   /* container bg (razor.css reads it) — 16.6:1 vs ink */
    --v-ink:            #eef1f4;   /* __val "96" — 16.57:1 */
    --v-ink-dim:        #b8c0c8;   /* eyebrow / unit / end labels / hint — 10.19:1 */
    --v-ink-muted:      #8a949e;   /* any muted ink inside the readout — 6.08:1 */
    --v-ink-rgb:        238, 241, 244;
    --v-hover:          #232830;   /* __shift.is-down chip bg: 8.04:1 with ink-dim */
    --v-accent-brand-aa:   #ff8a4d;               /* __busy, __shift.is-up, fill/thumb — 8.04:1 on sunken */
    --v-accent-brand-tint: rgba(255, 107, 26, 0.08); /* is-up chip bg: 7.36:1 with accent-aa */
}

/* ── BU-469: channels-panel inline frequency / unit / stage editors ───────────────────── */
.neg .neg-channels__edit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 4px; }
.neg .neg-channels__field { display: inline-flex; align-items: center; gap: 6px; }
.neg .neg-channels__field-lab { font-size: 11px; color: var(--v-ink-dim); white-space: nowrap; }
.neg .neg-channels__freq-input {
    width: 56px; font-size: 12px; padding: 4px 6px; text-align: right;
    background: var(--v-surface); color: var(--v-ink);
    border: 1px solid var(--v-border); border-radius: 6px;
}
.neg .neg-channels__freq-input:hover:not(:disabled) { border-color: var(--v-border-strong); }
.neg .neg-channels__freq-input:focus-visible { outline: 2px solid var(--v-accent-brand-aa); outline-offset: 1px; }
.neg .neg-channels__freq-input:disabled { opacity: 0.55; cursor: default; }
.neg .neg-channels__unit-select {
    appearance: auto; font-size: 12px; padding: 4px 6px;
    background: var(--v-surface); color: var(--v-ink);
    border: 1px solid var(--v-border); border-radius: 6px; cursor: pointer;
}
.neg .neg-channels__unit-select:hover:not(:disabled) { border-color: var(--v-border-strong); }
.neg .neg-channels__unit-select:focus-visible { outline: 2px solid var(--v-accent-brand-aa); outline-offset: 1px; }
.neg .neg-channels__unit-select:disabled { opacity: 0.55; cursor: default; }
.neg .neg-channels__stages-edit { display: inline-flex; align-items: center; gap: 6px; }
/* Channels-row stage display moved to the shared StageSelector compact variant
   (Shared/StageSelector.razor, Compact="true") - four fixed A/C/D/R slots, so the
   old variable-width .neg-channels__stage-chip pill run is gone. */

/* Voice popover "Stages reached" row - same four-slot component, read-only. */
.neg .neg-vpop__stages { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.neg .neg-vpop__stages-lab { font-size: 11px; color: var(--v-ink-dim); white-space: nowrap; }

/* ── BU-471(a): pre-drag hover preview popover ────────────────────────────────────────── */
.neg .neg-wedge-hover {
    position: fixed; z-index: 1300; pointer-events: none;
    left: min(calc(var(--neg-hover-x, 50vw) + 14px), calc(100vw - 252px));
    top:  min(calc(var(--neg-hover-y, 40vh) + 14px), calc(100vh - 168px));
    width: 236px; max-width: calc(100vw - 16px);
    background: var(--v-surface);
    border: 1px solid var(--v-border); border-radius: 9px;
    box-shadow: 0 10px 30px rgba(var(--v-ink-rgb), 0.28);
    padding: 8px 10px;
    animation: neg-toast-in 0.12s ease-out both;
}
/* BU-508: ring header - the "you are here" dimension the hovered wedge encodes. */
.neg .neg-wedge-hover__ring {
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 7px; margin-bottom: 7px; border-bottom: 1px solid var(--v-line);
}
.neg .neg-wedge-hover__ring-ico {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 7px;
    background: var(--v-accent-brand-tint); color: var(--v-accent-brand-aa);
}
.neg .neg-wedge-hover__ring-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.neg .neg-wedge-hover__ring-dim {
    font-size: 0.52rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--v-ink-muted);
}
.neg .neg-wedge-hover__ring-val {
    font-size: 0.8rem; font-weight: 800; color: var(--v-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.neg .neg-wedge-hover__count {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px;
    font-size: 0.66rem; font-weight: 800; color: var(--v-ink-dim); white-space: nowrap;
}
/* Stable icon-led vector grid: same slots every hover; the pinned ring's row is emphasized. */
.neg .neg-wedge-hover__bits { display: flex; flex-direction: column; gap: 2px; }
.neg .neg-wedge-hover__bit {
    display: flex; align-items: center; gap: 7px; font-size: 0.68rem;
    padding: 2px 5px; border-radius: 5px; border: 1px solid transparent;
}
.neg .neg-wedge-hover__bit-ico { flex: 0 0 auto; display: inline-flex; color: var(--v-ink-muted); }
.neg .neg-wedge-hover__bit-val {
    min-width: 0; color: var(--v-ink-dim); font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    display: inline-flex; align-items: center;
}
.neg .neg-wedge-hover__bit.is-current { background: var(--v-accent-brand-tint); border-color: var(--v-accent-brand); }
.neg .neg-wedge-hover__bit.is-current .neg-wedge-hover__bit-ico { color: var(--v-accent-brand-aa); }
.neg .neg-wedge-hover__bit.is-current .neg-wedge-hover__bit-val { color: var(--v-ink); font-weight: 800; }
.neg .neg-wedge-hover__hint {
    display: flex; align-items: center; gap: 4px;
    margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--v-line);
    font-size: 0.58rem; color: var(--v-ink-muted);
}
.neg .neg-wedge-hover__hint-sep { opacity: 0.5; }
@media (prefers-reduced-motion: reduce) { .neg .neg-wedge-hover { animation: none; } }

/* ── BU-471(b): redesigned slice-detail card list ─────────────────────────────────────── */
.neg .neg-slice-pop__list, .neg .neg-slice-pop__scroll[data-testid="neg-slice-pop-list"] {
    display: flex; flex-direction: column; gap: 6px; padding: 8px 10px;
}
.neg .neg-slice-pop__item {
    position: relative; display: grid;
    grid-template-columns: 22px 1fr; align-items: start; gap: 8px;
    padding: 7px 9px 7px 12px;
    background: var(--v-surface-sunken);
    border: 1px solid var(--v-line); border-radius: 8px;
}
.neg .neg-slice-pop__rail {
    position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 3px;
    background: var(--v-ink-muted);
}
.neg .neg-slice-pop__rail--video { background: var(--v-medium-video); }
.neg .neg-slice-pop__rail--photo { background: var(--v-medium-photo); }
.neg .neg-slice-pop__rail--copy  { background: var(--v-medium-copy); }
.neg .neg-slice-pop__media-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 6px; color: var(--v-canvas);
    background: var(--v-ink-muted);
}
.neg .neg-slice-pop__media-ic--video { background: var(--v-medium-video); }
.neg .neg-slice-pop__media-ic--photo { background: var(--v-medium-photo); }
.neg .neg-slice-pop__media-ic--copy  { background: var(--v-medium-copy); }
.neg .neg-slice-pop__main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.neg .neg-slice-pop__item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.neg .neg-slice-pop__deliv { font-size: 0.76rem; font-weight: 700; color: var(--v-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.neg .neg-slice-pop__plat {
    display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto;
    font-size: 0.62rem; color: var(--v-ink-dim); white-space: nowrap;
}
.neg .neg-slice-pop__plat svg { color: var(--v-ink-muted); }
.neg .neg-slice-pop__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.neg .neg-slice-pop__chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.64rem; font-weight: 600; color: var(--v-ink);
    padding: 2px 7px; border-radius: 999px;
    background: var(--v-surface); border: 1px solid var(--v-line);
}
.neg .neg-slice-pop__chip svg { flex: 0 0 auto; }
.neg .neg-slice-pop__chip--voice { border-color: var(--v-accent-brand-aa); }
.neg .neg-slice-pop__chip--voice svg { color: var(--v-accent-brand-aa); }
.neg .neg-slice-pop__chip--stage svg { color: var(--v-ink-dim); }
.neg .neg-slice-pop__chip--video { border-left: 3px solid var(--v-medium-video); }
.neg .neg-slice-pop__chip--video svg { color: var(--v-medium-video); }
.neg .neg-slice-pop__chip--photo { border-left: 3px solid var(--v-medium-photo); }
.neg .neg-slice-pop__chip--photo svg { color: var(--v-medium-photo); }
.neg .neg-slice-pop__chip--copy  { border-left: 3px solid var(--v-medium-copy); }
.neg .neg-slice-pop__chip--copy svg { color: var(--v-medium-copy); }
.neg .neg-slice-pop__chip--mixed svg { color: var(--v-ink-muted); }
.neg .neg-slice-pop__spec-line {
    font-size: 0.62rem; color: var(--v-ink-dim);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   BU-472 — ADAPTIVE COMPACT SCOPE TILES (many thin single-combo scopes)
   A 100%-unique campaign yields ~29 single voice/stage/medium scopes; a single combo has no
   ring to vary, so its sunburst is a meaningless 2-colour donut. Here the scope selector
   becomes a dense, scannable board: grouped by medium with a light header (icon + sub-totals),
   each scope a compact tile - medium rail + voice colour dot + name, funnel stage pill, the
   deliverable count as the hero number, and the cost. A fraction of the donut wall's height.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.neg .neg-scopes-compact { display: flex; flex-direction: column; gap: 26px; margin-top: 4px; }

/* ── medium group ─────────────────────────────────────────────────────────────────────── */
.neg .neg-cmg { display: flex; flex-direction: column; gap: 12px; }
.neg .neg-cmg__head {
    display: flex; align-items: center; gap: 10px;
    padding-bottom: 9px; border-bottom: 1px solid var(--v-line);
}
.neg .neg-cmg__icon {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 26px; height: 26px; border-radius: 7px; color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.neg .neg-cmg__icon--video { background: var(--v-medium-video); }
.neg .neg-cmg__icon--photo { background: var(--v-medium-photo); }
.neg .neg-cmg__icon--copy  { background: var(--v-medium-copy); }
.neg .neg-cmg__icon--mixed { background: var(--v-ink-muted); }
.neg .neg-cmg__name {
    font-size: 0.82rem; font-weight: 700; letter-spacing: 0.045em;
    text-transform: uppercase; color: var(--v-ink);
}
.neg .neg-cmg__meta {
    margin-left: auto; display: inline-flex; align-items: baseline; gap: 6px;
    font-size: 0.72rem; color: var(--v-ink-dim); font-variant-numeric: tabular-nums;
}
.neg .neg-cmg__meta-n { font-weight: 700; color: var(--v-ink-dim); }
.neg .neg-cmg__meta-cost { font-weight: 700; color: var(--v-ink); }
.neg .neg-cmg__sep { color: var(--v-line-strong); }

/* ── tile grid ────────────────────────────────────────────────────────────────────────── */
.neg .neg-cmg__grid {
    display: grid; gap: 10px; list-style: none; margin: 0; padding: 0;
    grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
}

/* ── tile (overrides the donut card's heavy padding/shadow/radius via the double class) ─── */
.neg .neg-scopes-compact .neg-scope-card.neg-scope-tile {
    position: relative; display: flex; flex-direction: column;
    padding: 0; gap: 0; min-height: 0; overflow: hidden;
    border-radius: 11px; border: 1px solid var(--v-line);
    background: var(--v-surface-raised);
    box-shadow: 0 1px 2px rgba(var(--v-ink-rgb), 0.05);
    transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.neg .neg-scopes-compact .neg-scope-tile::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--neg-tile-med, var(--v-ink-muted));
}
.neg .neg-scopes-compact .neg-scope-tile:hover {
    border-color: var(--v-line-strong); transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(var(--v-ink-rgb), 0.06), 0 10px 24px -16px rgba(var(--v-ink-rgb), 0.30);
}
.neg .neg-scopes-compact .neg-scope-card.neg-scope-tile.is-selected {
    border-color: var(--v-accent-brand);
    box-shadow: 0 0 0 2px var(--v-accent-brand-soft), 0 1px 2px rgba(var(--v-ink-rgb), 0.06);
}

/* clickable body */
.neg .neg-scopes-compact .neg-scope-tile__body {
    -webkit-appearance: none; appearance: none; border: 0; background: transparent;
    cursor: pointer; text-align: left; width: 100%;
    display: flex; flex-direction: column; gap: 11px; padding: 11px 12px 12px 15px;
}
.neg .neg-scopes-compact .neg-scope-tile__body:focus-visible {
    outline: 2px solid var(--v-accent-brand); outline-offset: -2px; border-radius: 9px;
}

/* voice row */
.neg .neg-scopes-compact .neg-scope-tile__voicerow { display: flex; align-items: center; gap: 7px; }
.neg .neg-scopes-compact .neg-scope-tile__voicedot {
    width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
    background: var(--neg-tile-voice, var(--v-ink-muted));
    box-shadow: 0 0 0 2px var(--v-surface-raised), inset 0 0 0 1px rgba(var(--v-ink-rgb), 0.18);
}
.neg .neg-scopes-compact .neg-scope-tile__voice {
    flex: 1 1 auto; min-width: 0; line-height: 1.2;
    font-size: 0.8rem; font-weight: 600; color: var(--v-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* stage pill (decorative funnel hue on the border only; text stays AA on sunken bg) */
.neg .neg-scopes-compact .neg-scope-tile__stage {
    flex: 0 0 auto; padding: 2px 6px; border-radius: 0 4px 4px 0;
    font-size: 0.56rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--v-ink-dim); background: var(--v-surface-sunken);
    border-left: 2px solid var(--stage-hue, var(--v-ink-muted));
}
.neg .neg-scope-tile__stage--awareness     { --stage-hue: #0284C7; }
.neg .neg-scope-tile__stage--consideration { --stage-hue: #7C3AED; }
.neg .neg-scope-tile__stage--decision      { --stage-hue: #059669; }
.neg .neg-scope-tile__stage--retention     { --stage-hue: #DB2777; }
.neg .neg-scope-tile__stage--advocacy      { --stage-hue: #CA8A04; }
.neg .neg-scope-tile__stage--other         { --stage-hue: var(--v-ink-muted); }

/* stat row — deliverable count is the hero, cost trails right */
.neg .neg-scopes-compact .neg-scope-tile__statrow {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 8px;
}
.neg .neg-scopes-compact .neg-scope-tile__count { display: flex; align-items: baseline; gap: 5px; }
.neg .neg-scopes-compact .neg-scope-tile__count-n {
    font-size: 1.7rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em;
    color: var(--v-ink); font-variant-numeric: tabular-nums;
}
.neg .neg-scopes-compact .neg-scope-tile__count-k {
    font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--v-ink-muted);
}
.neg .neg-scopes-compact .neg-scope-tile__cost {
    font-size: 0.82rem; font-weight: 700; color: var(--v-ink-dim); font-variant-numeric: tabular-nums;
}

/* actions footer — Combine + Divide, kept from the donut composer */
.neg .neg-scopes-compact .neg-scope-tile__actions {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 12px 7px 15px;
    border-top: 1px solid var(--v-line-subtle); background: var(--v-surface-sunken);
}
.neg .neg-scopes-compact .neg-scope-tile__select {
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
    font-size: 0.68rem; font-weight: 600; color: var(--v-ink-dim);
}
.neg .neg-scopes-compact .neg-scope-tile__select input { margin: 0; cursor: pointer; accent-color: var(--v-accent-brand); }
/* BU-786: the compact tile carries the same COMPOUND Divide button as the donut
   card - "Divide by" + Medium / Voice / Stage inline, no trigger and no popover.
   Tuned one notch smaller for the tile footer, min-width:0 so a narrow lane
   shrinks the group instead of pushing it out of the tile. */
.neg .neg-scopes-compact .neg-scope-tile__divide { position: relative; margin-left: auto; min-width: 0; }
.neg .neg-scopes-compact .neg-scope-card__divide--compound {
    border-radius: 6px; border-color: var(--v-line-strong); background: var(--v-surface-raised);
}
.neg .neg-scopes-compact .neg-scope-card__divide-label {
    padding: 2px 6px; font-size: 0.62rem; color: var(--v-ink-dim);
}
.neg .neg-scopes-compact .neg-scope-card__divide-seg {
    padding: 2px 7px; font-size: 0.66rem; color: var(--v-ink-dim);
    background: var(--v-surface-raised); border-left-color: var(--v-line-strong);
}
.neg .neg-scopes-compact .neg-scope-card__divide-seg:hover:not(:disabled) {
    background: var(--v-accent-brand-tint); color: var(--v-accent-brand-aa);
}

/* first-paint stagger; suppressed once live so re-solves update in place (no flash) */
.neg .neg-scopes-compact:not(.is-live) .neg-scope-tile { animation: negTileIn .3s ease both; }
@keyframes negTileIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.neg .neg-scopes-compact .neg-scope-tile.is-flash { animation: negTileFlash .9s ease; }
@keyframes negTileFlash {
    0%   { box-shadow: 0 0 0 2px var(--v-accent-brand); }
    100% { box-shadow: 0 1px 2px rgba(var(--v-ink-rgb), 0.05); }
}

/* dark theme */
.neg[data-theme="dark"] .neg-scopes-compact .neg-scope-card.neg-scope-tile {
    background: var(--v-surface-raised); border-color: var(--v-line);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.40);
}
.neg[data-theme="dark"] .neg-scopes-compact .neg-scope-tile__actions { background: var(--v-surface-sunken); }
.neg[data-theme="dark"] .neg-scopes-compact .neg-scope-tile__stage { background: rgba(255, 255, 255, 0.06); }
/* BU-786: the compound Divide button replaces the old .neg-scope-tile__divide-btn trigger. */
.neg[data-theme="dark"] .neg-scopes-compact .neg-scope-card__divide--compound,
.neg[data-theme="dark"] .neg-scopes-compact .neg-scope-card__divide-seg { background: var(--v-surface-sunken); }

@media (prefers-reduced-motion: reduce) {
    .neg .neg-scopes-compact .neg-scope-tile,
    .neg .neg-scopes-compact:not(.is-live) .neg-scope-tile { animation: none; transition: none; }
}

/* ============================================================
   BU-473 + BU-474 (2026-06-28): collapsible budget rail + per-efficiency accept/remove.
   ============================================================ */

/* --- BU-473: collapse the rail -> scopes area goes full width --- */
.neg .neg-shell--rail-collapsed { grid-template-columns: minmax(0, 1fr) 68px; }
.neg[data-testid] .neg-shell--rail-collapsed { grid-template-columns: minmax(0, 1fr) 68px !important; }
.neg .neg-shell__rail.is-collapsed { min-width: 0; }

/* collapsed rail = slim sticky re-expand tab */
.neg .neg-liverail__reexpand {
    position: sticky; top: 12px;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 7px;
    width: 68px; min-height: 96px; padding: 10px 5px 12px; cursor: pointer;
    border: 1px solid var(--v-border); border-right: none;
    border-radius: 9px 0 0 9px;
    background: color-mix(in srgb, var(--v-accent-brand) 7%, var(--v-surface));
    color: var(--v-ink);
    box-shadow: -1px 0 4px -2px rgba(0,0,0,0.18);
    text-align: center;
}
.neg .neg-liverail__reexpand:hover {
    background: color-mix(in srgb, var(--v-accent-brand) 16%, var(--v-surface));
    border-color: var(--v-accent-brand-aa);
}
.neg .neg-liverail__reexpand-chev {
    font-size: 0.95rem; line-height: 1; font-weight: 800; color: var(--v-accent-brand-aa);
}
.neg .neg-liverail__reexpand-lab {
    font-size: 0.56rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--v-ink-dim);
    line-height: 1.1;
}
.neg .neg-liverail__reexpand-val {
    font-size: 0.66rem; font-weight: 700; line-height: 1.15;
    font-family: var(--font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums;
    word-break: break-word;
}
.neg .neg-liverail__reexpand.is-over .neg-liverail__reexpand-val { color: var(--v-error); font-weight: 700; }
.neg .neg-liverail__reexpand.is-within .neg-liverail__reexpand-val { color: var(--v-success); font-weight: 700; }

/* expanded rail header row holds the eyebrow + collapse button */
.neg .neg-liverail__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.neg .neg-liverail__collapse {
    flex: 0 0 auto; width: 22px; height: 22px; padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--v-border); border-radius: 6px;
    background: var(--v-surface); color: var(--v-muted); font-size: 0.95rem; line-height: 1;
}
.neg .neg-liverail__collapse:hover { background: var(--v-surface-sunken); color: var(--v-ink); border-color: var(--v-accent); }

/* under the single-column breakpoint, never reserve a rail column */
@media (max-width: 960px) {
    .neg .neg-shell--rail-collapsed { grid-template-columns: 1fr; }
    .neg[data-testid] .neg-shell--rail-collapsed { grid-template-columns: 1fr !important; }
    .neg .neg-liverail__reexpand { writing-mode: horizontal-tb; width: auto; flex-direction: row; }
    .neg .neg-drawertabs { align-self: stretch; flex-direction: row; width: auto; }
    .neg .neg-drawertab { flex: 1 1 0; min-height: 0; border-right: 1px solid var(--v-border); border-radius: 9px; }
    .neg .neg-liverail__reexpand-chev { transform: none; }
}

/* --- BU-474: per-efficiency Accept + Remove --- */
.neg .neg-liverail__chip {
    flex-direction: column; align-items: stretch; gap: 6px;
}
.neg .neg-liverail__chip-main {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
.neg .neg-liverail__chip.is-accepted {
    border-color: var(--v-success);
    box-shadow: inset 3px 0 0 0 var(--v-success);
    background: color-mix(in srgb, var(--v-success) 7%, var(--v-surface-sunken));
}
.neg .neg-liverail__chip-acts { display: flex; gap: 6px; }
.neg .neg-liverail__chip-act {
    flex: 1 1 auto; cursor: pointer;
    padding: 4px 8px; border-radius: 6px;
    font-size: 0.68rem; font-weight: 700; letter-spacing: .02em;
    border: 1px solid var(--v-border); background: var(--v-surface);
    line-height: 1.1;
}
.neg .neg-liverail__chip-accept { color: #2f6b2f; }
.neg .neg-liverail__chip-accept:hover { background: color-mix(in srgb, var(--v-success) 12%, var(--v-surface)); border-color: var(--v-success); }
.neg .neg-liverail__chip-accept.is-on { background: var(--v-success); border-color: var(--v-success); color: #fff; }
.neg .neg-liverail__chip-remove { color: var(--v-error); }
.neg .neg-liverail__chip-remove:hover { background: color-mix(in srgb, var(--v-error) 12%, var(--v-surface)); border-color: var(--v-error); color: var(--v-error); }

/* ============================================================
   BU-472 STARBURSTS-IN-LANES (Beau, 2026-06-28)
   The many-thin (100%-unique) scope state keeps the EXACT starburst cards and
   drag-to-merge of the grid; only the container changes. Instead of one tall
   ~5900px vertical donut wall, scopes are grouped by medium into short,
   horizontally-scrolling lanes (VIDEO / PHOTO / COPY ...). Tokenized colours,
   AA-safe accent (#BD4500), usable scrollbar. Drag works across lanes because
   HTML5 drop targets fire regardless of which scroll box they sit in.
   ============================================================ */
.neg .neg-scope-lanes {
    display: flex; flex-direction: column; gap: 20px;
    margin-top: 4px; min-width: 0;
}
.neg .neg-lane {
    display: flex; flex-direction: column; gap: 10px; min-width: 0;
    border: 1px solid var(--v-line); border-radius: 14px;
    background: var(--v-canvas);
    padding: 14px 0 14px 16px;
}
.neg .neg-lane__head {
    display: flex; align-items: center; gap: 10px;
    padding: 0 16px 11px 0; margin-right: 0;
    border-bottom: 1px solid var(--v-line);
}
.neg .neg-lane__icon {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 28px; height: 28px; border-radius: 8px; color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.neg .neg-lane__icon--video { background: var(--v-medium-video); }
.neg .neg-lane__icon--photo { background: var(--v-medium-photo); }
.neg .neg-lane__icon--copy  { background: var(--v-medium-copy); }
.neg .neg-lane__icon--mixed { background: var(--v-ink-muted); }
.neg .neg-lane__name {
    font-size: 0.86rem; font-weight: 800; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--v-ink);
}
.neg .neg-lane__meta {
    margin-left: auto; display: inline-flex; align-items: baseline; gap: 6px;
    font-size: 0.74rem; color: var(--v-ink-dim);
    font-variant-numeric: tabular-nums; white-space: nowrap; padding-right: 2px;
}
.neg .neg-lane__meta-n { font-weight: 800; color: var(--v-ink); }
.neg .neg-lane__meta-cost { font-weight: 800; color: var(--v-accent-brand-aa); }
.neg .neg-lane__sep { color: var(--v-line-strong); }

/* BU-490: completion-STATE zones replace media-type lanes at scale (Targets vs
   Unfinished/ungrouped). Media-agnostic, so mixed-media scopes sort by the same rule.
   A coloured left edge + tinted icon distinguishes the two zones; the dashed edge on
   the Unfinished zone signals "work in progress, not yet committed". Tokens keep it
   theme-correct on both the light neutral and the carbon dark skin. */
.neg .neg-lane--target { border-left: 3px solid var(--v-success); }
.neg .neg-lane--todo   { border-left: 3px dashed var(--v-warning); }
.neg .neg-lane__icon--target { background: var(--v-success); }
.neg .neg-lane__icon--todo   { background: var(--v-warning); }
.neg .neg-lane__desc {
    font-size: 0.74rem; font-weight: 600; color: var(--v-ink-dim);
    margin-left: 2px; white-space: nowrap;
}

/* BU-490: per-scope producer LOCK toggle. Locking a scope commits it as a "target" and moves
   it into the Targets zone; unlocking returns it to Unfinished/ungrouped. Quiet affordance when
   unlocked, committed green when locked. The transition snaps the glyph (approximates the
   lucide-animated lock); the lock-open -> lock glyph swap carries the shackle close. */
.neg .neg-scope-lock {
    position: absolute; top: 10px; right: 10px; z-index: 4;
    width: 30px; height: 30px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--v-line); background: var(--v-surface-raised);
    color: var(--v-ink-dim); cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.neg .neg-scope-lock:hover { border-color: var(--v-border-strong); color: var(--v-ink); transform: translateY(-1px); }
.neg .neg-scope-lock svg { display: block; transition: transform .24s cubic-bezier(.34, 1.56, .64, 1); }
.neg .neg-scope-lock.is-locked { background: var(--v-success); border-color: var(--v-success); color: #fff; }
.neg .neg-scope-lock.is-locked svg { transform: translateY(-1px) scale(1.06); }
.neg .neg-scope-lock:focus-visible { outline: 2px solid var(--v-accent-brand-aa); outline-offset: 2px; }

/* BU-490: inline unlock prompt (block + offer unlock). A floating toast so it is visible
   wherever the blocked edit happened. Dark surface with hardcoded #fff text per the contrast
   rule (never CSS-var text on a dark fill). */
.neg .neg-lock-prompt {
    /* sits clear ABOVE the combine selection bar (also fixed bottom-center) so it is never
       obscured when a blocked edit was a checkbox-combine. */
    position: fixed; bottom: 92px; left: 50%; transform: translateX(-50%); z-index: 70;
    display: flex; align-items: center; gap: 12px;
    background: var(--v-ink); border-radius: 13px;
    padding: 12px 14px 12px 16px; box-shadow: 0 10px 32px rgba(0, 0, 0, 0.30);
    animation: neg-lock-prompt-in 0.18s ease both;
}
.neg .neg-lock-prompt > svg { color: #fff; flex: 0 0 auto; }
.neg .neg-lock-prompt__msg { color: #fff; font-size: 0.86rem; font-weight: 600; }
.neg .neg-lock-prompt__confirm,
.neg .neg-lock-prompt__cancel {
    border: 0; border-radius: 8px; padding: 7px 14px;
    font-size: 0.82rem; font-weight: 800; cursor: pointer;
}
.neg .neg-lock-prompt__confirm { background: var(--v-success); color: #fff; }
.neg .neg-lock-prompt__cancel { background: rgba(255, 255, 255, 0.16); color: #fff; }
.neg .neg-lock-prompt__cancel:hover { background: rgba(255, 255, 255, 0.26); }
@keyframes neg-lock-prompt-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* The horizontal scroll track of starburst cards. */
.neg .neg-lane__track {
    display: flex; flex-flow: row nowrap; align-items: stretch;
    gap: 14px; list-style: none; margin: 0;
    padding: 6px 16px 12px 0;
    overflow-x: auto; overflow-y: visible;
    scrollbar-width: thin;
    scrollbar-color: var(--v-border-strong) transparent;
    overscroll-behavior-x: contain;
    scroll-padding-left: 2px;
}
.neg .neg-lane__track::-webkit-scrollbar { height: 10px; }
.neg .neg-lane__track::-webkit-scrollbar-track { background: transparent; }
.neg .neg-lane__track::-webkit-scrollbar-thumb {
    background: var(--v-border-strong); border-radius: 999px;
    border: 2px solid var(--v-canvas);
}
.neg .neg-lane__track::-webkit-scrollbar-thumb:hover { background: var(--v-ink-muted); }

/* Fixed lane width per card so it never collapses in the flex row; internal
   layout (burst + meta + footer) is identical to the grid card. */
.neg .neg-lane__track .neg-scope-card {
    flex: 0 0 300px; width: 300px; max-width: 300px;
}
.neg[data-testid] .neg-lane__track .neg-scope-card__burst { max-width: 196px; }
/* BU-772: in the many-scopes lane view the burst is small, so the composition view is
   capped to match it and the lane card keeps its height. */
.neg[data-testid] .neg-lane__track .neg-scope-card__comp { --neg-comp-h: 230px; }
/* Lift a dragging / drop-target card above the scrollbox so its highlight is
   not clipped by the lane's overflow. */
.neg .neg-lane__track .neg-scope-card.is-dragging,
.neg .neg-lane__track .neg-scope-card.is-drop-target { z-index: 3; }

@media (max-width: 720px) {
    .neg .neg-lane { padding-left: 12px; }
    .neg .neg-lane__track .neg-scope-card { flex-basis: 264px; width: 264px; }
}

/* ============================================================
   BU-476 (2026-06-28): push the Production Spec engine to the browser edges.
   The content sat behind 84px of stacked horizontal padding (main.p-4 24 +
   .container 12 + .sim 20 + .neg 28). Collapse the outer three to 0 and let
   .neg carry a single small 14px gutter, so the lanes + rail run edge-to-edge.
   Scoped to the engine page via body:has(.neg-topbar) so other pages are untouched.
   ============================================================ */
body:has(.neg-topbar) main.flex-grow-1 { padding-left: 0 !important; padding-right: 0 !important; }
body:has(.neg-topbar) main .container { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; }
body:has(.neg-topbar) .sim { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; }
body:has(.neg-topbar) .neg { padding-left: 14px !important; padding-right: 14px !important; }
/* the compact sim header (breadcrumb/view tabs) used a 28px inset; match the new 14px gutter */
body:has(.neg-topbar) .sim .sim__head--compact,
body:has(.neg-topbar) .sim .sim__viewtabs { padding-left: 14px !important; padding-right: 14px !important; }

/* BU-473: under the single-column breakpoint the collapsed tab goes horizontal -
   reset the vertical label/value so they read left-to-right there. */
@media (max-width: 960px) {
    .neg .neg-liverail__reexpand { writing-mode: horizontal-tb; flex-direction: row; width: auto; min-height: 0; border-right: 1px solid var(--v-border); border-radius: 9px; }
    .neg .neg-liverail__reexpand-lab,
    .neg .neg-liverail__reexpand-val { writing-mode: horizontal-tb; }
}

/* ============================================================
   BU-486 (2026-06-28): WHOLE PLAN heatmap as the hero (starburst removed).
   Big, full-width Voice x Stage grid with the real value IN every cell, a
   color ramp capped so dark ink stays AA on the hottest cell, per-voice (row)
   and per-stage (column) totals, and a grand-total badge. Tokenized + AA.
   ============================================================ */
.neg[data-testid] .neg-heatmap .neg-scopes__overview { display: block; }
.neg .neg-hm { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.neg .neg-hm__topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.neg .neg-hm__metric { display: inline-flex; gap: 4px; padding: 3px; border-radius: 9px; background: var(--v-surface-sunken); border: 1px solid var(--v-border); }
.neg .neg-hm__metric-btn {
    appearance: none; border: 0; cursor: pointer; background: transparent;
    padding: 6px 13px; border-radius: 7px; font-size: 0.78rem; font-weight: 700;
    color: var(--v-ink-dim); letter-spacing: .01em; white-space: nowrap;
}
.neg .neg-hm__metric-btn:hover { color: var(--v-ink); }
.neg .neg-hm__metric-btn.is-active { background: var(--v-accent-brand-aa); color: #fff; }
.neg .neg-hm__grand { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; }
.neg .neg-hm__grand-n { font-family: var(--font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; font-size: 1.5rem; font-weight: 800; color: var(--v-ink); }
.neg .neg-hm__grand-lab { font-size: 0.64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--v-ink-muted); }

.neg .neg-hm__scroll { overflow-x: auto; }
.neg .neg-hm__tbl { border-collapse: separate; border-spacing: 3px; width: 100%; table-layout: auto; }
.neg .neg-hm__tbl th, .neg .neg-hm__tbl td { font-variant-numeric: tabular-nums; }

.neg .neg-hm__corner { text-align: left; font-size: 0.66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--v-ink-muted); padding: 6px 8px; white-space: nowrap; }
.neg .neg-hm__chhead, .neg .neg-hm__tothead {
    font-size: 0.72rem; font-weight: 800; letter-spacing: .02em; text-transform: capitalize;
    color: var(--v-ink); padding: 8px 10px; text-align: center; white-space: nowrap;
}
.neg .neg-hm__tothead { color: var(--v-ink-muted); text-transform: uppercase; font-size: 0.66rem; letter-spacing: .08em; }

.neg .neg-hm__rowhead {
    text-align: left; padding: 6px 12px 6px 8px; white-space: nowrap;
    font-size: 0.82rem; font-weight: 700; color: var(--v-ink);
    display: flex; align-items: center; gap: 8px; min-height: 46px;
}
.neg .neg-hm__rowdot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.neg .neg-hm__rowname { overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.neg .neg-hm__rowhead--tot { color: var(--v-ink-muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: .06em; }

/* the heat cell: orange ramp by --hm-a, mixed into surface and capped at 55% so the
   dark value text always clears AA on the hottest cell; the number is the hero. */
.neg .neg-hm__cell {
    height: 46px; min-width: 62px; text-align: center; border-radius: 7px;
    background: color-mix(in srgb, var(--v-accent-brand) calc(var(--hm-a, 0) * 55%), var(--v-surface));
    transition: outline-color .12s ease;
}
.neg .neg-hm__cell.is-empty { background: var(--v-surface-sunken); }
.neg .neg-hm__cellval { font-size: 0.92rem; font-weight: 800; color: #2a1c10; font-variant-numeric: tabular-nums; }
.neg .neg-hm__cell.is-empty .neg-hm__cellval { color: var(--v-ink-faint); }
.neg .neg-hm__cell:hover, .neg .neg-hm__cell:focus-visible { outline: 2px solid var(--v-accent-brand-aa); outline-offset: -2px; }

.neg .neg-hm__rowtot, .neg .neg-hm__coltot, .neg .neg-hm__grandtot {
    text-align: center; font-weight: 800; font-variant-numeric: tabular-nums;
    background: var(--v-surface-sunken); color: var(--v-ink); border-radius: 7px; padding: 6px 10px; font-size: 0.86rem;
}
.neg .neg-hm__footrow th, .neg .neg-hm__footrow td { padding-top: 9px; }
.neg .neg-hm__grandtot { background: color-mix(in srgb, var(--v-accent-brand) 16%, var(--v-surface)); color: var(--v-accent-brand-aa); }

.neg .neg-hm__legend { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; color: var(--v-ink-muted); }
.neg .neg-hm__legend-cap { font-weight: 600; }
.neg .neg-hm__sw { width: 26px; height: 12px; border-radius: 3px; background: color-mix(in srgb, var(--v-accent-brand) calc(var(--hm-a, 0) * 55%), var(--v-surface)); border: 1px solid var(--v-border); }

/* ═══════════ BU-487/488/489 — voices legend, ring legend, heatmap subtitle ═══════════ */

/* BU-489: heatmap explanatory copy relegated behind a small disclosure */
.neg .neg-heatmap__help { margin: 2px 0 0; }
.neg .neg-heatmap__help-sum {
    display: inline-flex; align-items: center; gap: 5px; width: fit-content; cursor: pointer;
    font-size: 0.72rem; font-weight: 600; color: var(--v-ink-dim); list-style: none;
}
.neg .neg-heatmap__help-sum::-webkit-details-marker { display: none; }
.neg .neg-heatmap__help-sum::before {
    content: "›"; display: inline-block; font-weight: 700; color: var(--v-accent-brand-aa);
    transition: transform .15s ease;
}
.neg .neg-heatmap__help[open] .neg-heatmap__help-sum::before { transform: rotate(90deg); }
.neg .neg-heatmap__help .neg-heatmap__sub { margin-top: 6px; }

/* ══════════ BU-490 UI POLISH PASS (codex review + screenshot critique, 2026-07-01) ══════════ */

/* codex HIGH-1: the "Review committed" button is position:absolute; give it a positioned parent
   so it anchors to the committed tray, not .neg. */
.neg .neg-scope-lanes .neg-lane--target { position: relative; }

/* ZONE DISTINCTION (Beau: "not distinct"; codex M3; screenshot critique): the committed tray
   is clearly a separate, deeper-tinted recess, and its cards read as SEALED - desaturated + a
   tinted surface - so the two zones differ in the CARDS, not just a padlock colour. */
.neg .neg-scope-lanes .neg-lane--target {
    background: rgba(47, 125, 91, 0.15);
    border-color: rgba(47, 125, 91, 0.46);
    box-shadow: inset 0 3px 15px rgba(31, 110, 79, 0.11);
    margin-top: 20px;
}
.neg .neg-scope-lanes .neg-lane--target .neg-scope-card {
    filter: saturate(0.72);
    background: #f7fbf8;
    border-color: rgba(47, 125, 91, 0.4);
}
.neg .neg-scope-lanes .neg-lane--todo { padding-bottom: 6px; }

/* CARD SCANNABILITY (screenshot critique: wall of near-identical donuts; voice buried; long
   names break layout). Flip the hierarchy so the VOICE x STAGE line leads and the medium title
   recedes, and TRUNCATE that line so a long voice never wraps and pushes the cost off the card. */
.neg .neg-scope-card__title-txt { font-size: 0.9rem; font-weight: 700; color: var(--v-ink-dim); }
.neg .neg-scope-card__collapsed {
    display: block; max-width: 100%;
    font-size: 0.92rem; font-weight: 700; color: var(--v-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.neg .neg-scope-card__name {
    display: block; max-width: 100%;
    font-size: 0.8rem !important; font-weight: 600 !important; color: var(--v-ink-dim) !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* The rail group owns all three compact controls, so reserve its full 50px width when collapsed. */
.neg .neg-shell--rail-collapsed { grid-template-columns: minmax(0, 1fr) 68px; }
.neg[data-testid] .neg-shell--rail-collapsed { grid-template-columns: minmax(0, 1fr) 68px !important; }

/* codex M4: in review mode keep the audit totals PINNED while the committed cards scroll. */
.neg .neg-scope-lanes.is-reviewing .neg-committed-totals {
    position: sticky; top: 0; z-index: 2;
    background: var(--v-canvas);
    margin: 0 -12px 10px; padding: 10px 12px 12px;
    box-shadow: 0 1px 0 rgba(47, 125, 91, 0.3);
}

/* BU-490 polish CORRECTION: the scoped card CSS (Jargan.Client.styles.css) loads after neg-engine
   and wins on equal specificity, so the card-hierarchy flip above did nothing. Force it: mute the
   redundant medium title ("Photo") and make the voice x stage line the card's prominent identity,
   so the wall of near-identical donuts becomes scannable by what actually differs. */
.neg .neg-scope-card__title-txt { font-size: 0.8rem !important; font-weight: 600 !important; color: var(--v-ink-dim) !important; }
.neg .neg-scope-card__collapsed { font-size: 0.96rem !important; font-weight: 800 !important; color: var(--v-ink) !important; letter-spacing: -0.01em; }

/* BU-499: several button rows used display:block, which top-biases the label by ~2px (not truly
   vertically centered). Force h+v centering on the button rows so every label sits dead-centre. */
.neg .neg-scenariobar__btn,
.neg .neg-viewtoggle__btn,
.neg .neg-detailedlink,
.neg .neg-tabs__tab,
.neg .neg-combinebar__go,
.neg .neg-combinebar__clear,
.neg .neg-dragzone__undo,
.neg .neg-dragzone__commit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.1 !important;
}

/* ============================================================
   BU-500 (F-061) — COMPARISON AS A DECISION SURFACE
   Inline winner-select / reject / rename / delete on the compare
   table, plus the winner column highlight. Vibe tokens only, AA both
   themes (ink on white light theme; tokens flip on .neg[data-theme=dark]).
   ============================================================ */
.neg-cmp__winner-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    /* AA: white on a hardcoded #BD4500 fill = 5.23:1 in both themes (the brand fill #DD5100
       only reaches 4.0:1 with white text, which fails for this small bold pill). */
    color: #fff;
    background: #BD4500;
    vertical-align: middle;
}
.neg-cmp__table thead th.is-winner {
    background: var(--v-accent-brand-tint);
    box-shadow: inset 0 -2px 0 0 var(--v-accent-brand);
}
.neg-cmp__actionsrow th,
.neg-cmp__actionsrow td {
    border-top: 2px solid var(--v-line-strong);
    padding-top: 10px;
    vertical-align: top;
}
.neg-cmp__act {
    display: inline-block;
    margin: 2px 3px 2px 0;
    padding: 4px 9px;
    border: 1px solid var(--v-border-strong);
    border-radius: 7px;
    background: var(--v-surface);
    color: var(--v-ink);
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.neg-cmp__act:hover:not(:disabled) { border-color: var(--v-accent-brand-aa); color: var(--v-accent-brand-aa); }
.neg-cmp__act:focus-visible { outline: 2px solid var(--v-accent-brand-aa); outline-offset: 1px; }
.neg-cmp__act:disabled { opacity: 0.4; cursor: not-allowed; }
.neg-cmp__act--winner { border-color: var(--v-accent-brand); color: var(--v-accent-brand-aa); font-weight: 700; }
.neg-cmp__act--winner.is-winner { background: #BD4500; color: #fff; border-color: #BD4500; }
.neg-cmp__act--reject:hover:not(:disabled) { border-color: var(--v-warning); color: var(--v-warning); }
.neg-cmp__act--delete:hover:not(:disabled) { border-color: var(--v-error); color: var(--v-error); }
.neg-cmp__act--save { border-color: #BD4500; color: #fff; background: #BD4500; font-weight: 700; }
.neg-cmp__rename-input {
    width: 130px;
    padding: 3px 6px;
    border: 1px solid var(--v-accent-brand-aa);
    border-radius: 6px;
    font-size: 0.78rem;
    color: var(--v-ink);
    background: var(--v-surface);
}
.neg-cmp__actionstatus {
    margin: 10px 0 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--v-accent-brand-aa);
}

/* ============================================================
   BU-501 (F-061) — TEMPLATE-FIRST ENTRY + ANIMATED SCOPE ENTRANCE
   All the motion FEEL is tunable from the variables in this .neg block;
   the polish pass edits these knobs only. GPU-friendly (transform+opacity),
   fully disabled under prefers-reduced-motion.
   ============================================================ */
.neg {
    --neg-enter-dur: 320ms;      /* per-scope-card entrance duration */
    --neg-enter-stagger: 45ms;   /* delay added per card index */
    --neg-enter-rise: 18px;      /* how far each scope card travels up */
    --neg-enter-ease: cubic-bezier(0.22, 1, 0.36, 1);  /* snappy ease-out (spring-ish) */
    --neg-gate-dur: 300ms;       /* template-card entrance */
    --neg-gate-exit: 240ms;      /* suggestions clearing out */
    --neg-gate-stagger: 40ms;
}

.neg-tplgate {
    max-width: 1000px;
    margin: 8px auto 24px;
    padding: 22px 22px 18px;
    border: 1px solid var(--v-border);
    border-radius: 16px;
    background: var(--v-surface);
    box-shadow: 0 6px 26px rgba(0, 0, 0, 0.08);
}
.neg-tplgate__eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--v-accent-brand-aa);
}
.neg-tplgate__title { margin: 4px 0 4px; font-size: 1.5rem; font-weight: 800; color: var(--v-ink); }
.neg-tplgate__sub { margin: 0 0 16px; font-size: 0.9rem; color: var(--v-ink-dim); max-width: 60ch; }
.neg-tplgate__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.neg-tplgate__card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 15px 16px;
    text-align: left;
    border: 1px solid var(--v-border-strong);
    border-radius: 12px;
    background: var(--v-surface);
    cursor: pointer;
    transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
    animation: negGateCardIn var(--neg-gate-dur) var(--neg-enter-ease) both;
    animation-delay: calc(var(--tpl-i, 0) * var(--neg-gate-stagger));
}
.neg-tplgate__card:hover:not(:disabled) { border-color: var(--v-accent-brand-aa); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); transform: translateY(-2px); }
.neg-tplgate__card:focus-visible { outline: 2px solid var(--v-accent-brand-aa); outline-offset: 2px; }
.neg-tplgate__card:disabled { opacity: 0.6; cursor: default; }
.neg-tplgate__name { font-size: 1rem; font-weight: 700; color: var(--v-ink); }
.neg-tplgate__desc { font-size: 0.8rem; line-height: 1.4; color: var(--v-ink-dim); }
.neg-tplgate__foot { margin-top: 16px; }
.neg-tplgate__skip {
    padding: 8px 14px;
    border: 1px solid var(--v-border-strong);
    border-radius: 9px;
    background: transparent;
    color: var(--v-ink-dim);
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
}
.neg-tplgate__skip:hover:not(:disabled) { border-color: var(--v-accent-brand-aa); color: var(--v-accent-brand-aa); }

/* Suggestions clearing out on select / dismiss. While exiting, the gate lifts OUT of flow and
   overlays the top of the workbench (which has mounted beneath it via the `|| _templateGateExiting`
   render guard) so the two cross-fade with no empty frame between them. Its offset parent is
   .neg-shell__main (position: relative). */
.neg-tplgate.is-exiting {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 6;
    animation: negGateOut var(--neg-gate-exit) var(--neg-enter-ease) both;
    pointer-events: none;
}
.neg-tplgate.is-exiting .neg-tplgate__card {
    animation: negGateCardOut var(--neg-gate-exit) var(--neg-enter-ease) both;
    animation-delay: calc(var(--tpl-i, 0) * 26ms);
}

@keyframes negGateCardIn {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}
@keyframes negGateCardOut {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(-10px) scale(0.96); }
}
@keyframes negGateOut {
    from { opacity: 1; }
    to   { opacity: 0; transform: scale(0.985); }
}

/* Solved scopes flying/settling into the containers after a template applies. Every scope card
   already carries --neg-scope-i inline, so the entrance staggers by grid position. */
.neg-scopes.is-entering .neg-scope-card {
    /* !important overrides the BU-456 `.neg-scopes__grid.is-live .neg-scope-card { animation: none }`
       reveal-suppression (higher specificity, non-important). The reduced-motion block below is
       also !important and comes later in source, so it still wins when motion is reduced. */
    animation: negScopeEnter var(--neg-enter-dur) var(--neg-enter-ease) both !important;
    animation-delay: calc(var(--neg-scope-i, 0) * var(--neg-enter-stagger)) !important;
    will-change: transform, opacity;
}
@keyframes negScopeEnter {
    from { opacity: 0; transform: translateY(var(--neg-enter-rise)) scale(0.95); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .neg-tplgate__card,
    .neg-tplgate.is-exiting,
    .neg-tplgate.is-exiting .neg-tplgate__card,
    .neg-scopes.is-entering .neg-scope-card {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* =====================================================   BU-766: the right-hand rail must touch the browser's right edge.
   The rail is the last track of the .neg-shell grid, so it stops wherever the
   page's right padding stops. On this route two paddings still stack there
   (measured in the running app at 1440 and 1920):
     .app-shell__content   26px   MainLayout.razor.css
     .neg                  14px   the 'body:has(.neg-topbar) .neg' override above
   = 40px between the rail's flush-cut tabs (border-right:none, radius
   9px 0 0 9px) and the viewport edge they were drawn against. (.sim's own
   20px is already zeroed by that same override block; .neg's base 28px never
   applies on this page.)

   Deleting the remaining padding is wrong - every other band on the page
   (topbar, thin budget strip, heat map panel, footer bar) needs it. Pull ONLY
   the shell grid past it instead. The freed 40px lands in the minmax(0,1fr)
   main column; the rail track keeps its width (264px, or 68px collapsed) and
   its right edge lands on the viewport's.

   This is NOT the full-bleed breakout BU-462 removed above: no 100vw, no
   left:50% / margin-left:-50vw. That pattern measured against a viewport unit
   that includes the scrollbar and clipped this very rail off-screen. A px
   margin is measured against the real content box, so it cannot overshoot.
   ============================================================ */
.neg[data-testid] { --neg-edge-inset: 40px; }
.neg[data-testid] .neg-shell { margin-right: calc(-1 * var(--neg-edge-inset)); }

/* Below the single-column breakpoint the rail stacks under the main column -
   there is no rail track to flush, so the pull would only shove content
   off-screen. Matches the 960px collapse rules earlier in this file. */
@media (max-width: 960px) {
    .neg[data-testid] .neg-shell { margin-right: 0; }
}

/* ============================================================
   BU-759 - COUNT-DRIVEN SCOPE-CARD LAYOUT
   The scope area allocates space by how many scopes exist. Card markup, the SVG sunburst
   and the drag-to-merge affordance are untouched - only sizing/flow changes.
     n1  - card spans the full hero; at >=1180px viewport the burst sits BESIDE the info
           column, below that it stacks BENEATH it. Burst scales with the viewport.
     n2  - stacked card, intermediate burst (smaller than n1, larger than n3+).
     n3+ - unchanged (inherits the clamp() default from the rule near line 1993).
   --neg-burst-cap is set on the GRID only, so the many-scopes lane view (.neg-lane__track)
   and the compact-tile view (.neg-scopes-compact) never see it.
   ============================================================ */
.neg[data-testid] .neg-scopes__grid--n1 { --neg-burst-cap: min(46vh, 30vw, 460px); }
.neg[data-testid] .neg-scopes__grid--n2 { --neg-burst-cap: min(34vh, 18vw, 320px); }

@media (min-width: 1180px) {
    .neg[data-testid] .neg-scopes__grid--n1 .neg-scope-card {
        display: grid;
        grid-template-columns: min(var(--neg-burst-cap, 400px), 42%) minmax(0, 1fr);
        column-gap: clamp(20px, 3vw, 56px);
        align-items: center;
        justify-items: center;
    }
    /* BU-772: composition view occupies the burst's column - one slot, two views. */
    .neg[data-testid] .neg-scopes__grid--n1 .neg-scope-card__burst,
    .neg[data-testid] .neg-scopes__grid--n1 .neg-scope-card__comp {
        width: 100%;
        max-width: none;
        grid-column: 1;
    }
    .neg[data-testid] .neg-scopes__grid--n1 .neg-scope-card__meta {
        grid-column: 2;
        max-width: 620px;
        width: 100%;
        margin-inline: auto;
    }
}

/* ============================================================
   BU-771 — SEPARATE THE THREE THINGS: visualization / view controls / scope controls.
   The scope card footer used to be one flat centred row holding four controls of two
   completely different kinds: two that only REDRAW the same scope (centre-ring preset,
   Composition read-out) and two that RESTRUCTURE it and re-solve the plan (Combine,
   Divide). Nothing in the UI said which was which.

   The fix is two labelled `role="group"` regions with deliberately different weight:
     · .neg-scope-ctl--view  — ghost: no fill, DASHED hairline, muted ink, outline pills,
                               an eye glyph. Reads as a display switch.
     · .neg-scope-ctl--edit  — brand-tinted panel, SOLID border with a 3px accent rule down
                               its leading edge, SOLID-FILLED pills, a fork glyph. Reads as
                               an edit, because it is one.
   So the read is: dashed + hollow = look; solid + filled + accent edge = change.

   CONTRAST. Do NOT reintroduce the "--v-canvas on --v-ink" inversion that used to live here. The
   old comment claimed it was the one fill pair clearing AA in every vibe. It is false, and it
   shipped a 1.14:1 defect. koi-shell.js (the ambient pond, on by default) sets INLINE
   --v-canvas:#0b1216 and --v-ink:#06222b on <html> in the default state, shadowing the vibe
   palette, so both sides of that pair resolve near-black. koi leaves --v-ink-rgb and
   --v-surface-rgb alone, so the filled chips now read the vibe's TRUE ink/surface through
   rgb(var(--v-ink-rgb)) / rgb(var(--v-surface-rgb)). Computed over all 12 vibe blocks in
   jargan-vibe-palette.css, with and without the koi override: worst case 8.36:1
   (pastel-mondrian). White-on-accent is NOT available: --v-on-accent #ffffff is 5.20:1 on the
   light vibes' #bd4500 but only 2.33:1 on the dark vibes' #ff8a4d. So the accent stays on
   BORDERS and the panel TINT only (decorative, 3:1), never behind text. Also deliberately NOT
   routed through --color-status-*-text, whose color-mix fallback is unreachable while
   --signal-amt is 0% on light vibes.
   Specificity is .neg[data-testid] (0,3,0) so these beat both the BU-462/BU-463 density
   overrides above and the component-scoped [b-hash] rules that load after this file.
   ============================================================ */

/* BU-783: the BU-771 one-time key paragraph is gone from the markup; its rules went with
   it. The .neg-ctlchip family chip below STAYS -- it is still used by the combine bar and
   the per-scope control labels. */

/* the family chip - the single token a user learns once and then recognises on every card */
.neg[data-testid] .neg-ctlchip {
    display: inline-flex; align-items: center; gap: 4px;
    flex: 0 0 auto;
    font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    line-height: 1; white-space: nowrap;
    padding: 3px 7px; border-radius: 999px;
}
.neg[data-testid] .neg-ctlchip svg { flex: 0 0 auto; }
.neg[data-testid] .neg-ctlchip--view {
    color: var(--v-ink-dim);
    background: transparent;
    border: 1px dashed var(--v-border-strong);
}
/* solid, inverted, and hard-edged: the "this writes" chip. The inversion reads the vibe's TRUE
   ink/surface via the -rgb tokens, which the koi pond does not shadow. Worst case 8.36:1. */
.neg[data-testid] .neg-ctlchip--edit {
    color: rgb(var(--v-surface-rgb));
    background: rgb(var(--v-ink-rgb));
    border: 1px solid rgb(var(--v-ink-rgb));
    border-left: 3px solid var(--v-accent-brand-aa);
    border-radius: 4px;
}

/* base group chrome - shared by the rich starburst card, the lane cards (same fragment)
   and the compact tile branch, which parents its group on .neg-scope-tile__actions. */
.neg[data-testid] .neg-scope-ctl {
    display: flex; flex-flow: row wrap; align-items: center; gap: 5px;
    min-width: 0; padding: 5px 7px; border-radius: 9px;
}

.neg .neg-scopes-compact .neg-scope-tile__actions > .neg-scope-ctl {
    flex: 1 1 auto; width: 100%;
}

/* the two footer groups. The row itself stops being a centred pile of four buttons and
   becomes a left-aligned pair of blocks that wrap as a unit on the ~170px dense grid. */
.neg[data-testid] .neg-scope-card__actions {
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 7px !important;
}
.neg[data-testid] .neg-scope-card__actions > .neg-scope-ctl {
    display: flex !important; flex-flow: row wrap !important;
    align-items: center !important; gap: 5px !important;
    /* min-width is what makes the two families stack on the ~170px 29-scope grid and sit
       side by side on the roomy 3-scope grid - a CONTAINER decision, not a viewport one,
       so a narrow card on a wide monitor still wraps instead of crushing both groups. */
    flex: 1 1 auto; min-width: 132px;
    padding: 5px 7px !important;
    font-size: 0.66rem !important;
    white-space: normal !important;
    max-width: 100% !important;
}
/* soft + hollow + dashed = "this only looks" */
.neg[data-testid] .neg-scope-ctl--view {
    background: transparent;
    border: 1px dashed var(--v-border);
    border-radius: 999px;
}
/* hard-cornered + tinted + accent edge = "this writes" */
.neg[data-testid] .neg-scope-ctl--edit {
    background: var(--v-accent-brand-tint);
    border: 1px solid var(--v-accent-brand-aa);
    border-left-width: 3px;
    border-radius: 4px;
}
/* the group's own label chip must not inherit the generic action-row button padding */
.neg[data-testid] .neg-scope-ctl__lab { flex: 0 0 auto; margin: 0 1px 0 0 !important; }

/* keep the BU-462/BU-463 density: the controls are now grandchildren of the row, so the
   compact sizing has to be re-stated one level down. */
.neg[data-testid] .neg-scope-ctl > .neg-scope-card__expand,
.neg[data-testid] .neg-scope-ctl > .neg-scope-card__select,
.neg[data-testid] .neg-scope-ctl > .neg-scope-card__divide > .neg-scope-card__divide-btn,
.neg[data-testid] .neg-scope-ctl > .neg-scope-card__ringpreset {
    font-size: 0.66rem !important; line-height: 1 !important;
    height: auto !important; min-height: 0 !important; margin: 0 !important;
    max-width: 100% !important; white-space: nowrap !important;
}
.neg[data-testid] .neg-scope-ctl > .neg-scope-card__expand,
.neg[data-testid] .neg-scope-ctl > .neg-scope-card__divide > .neg-scope-card__divide-btn {
    padding: 4px 6px !important;
}
.neg[data-testid] .neg-scope-ctl > .neg-scope-card__select { gap: 3px !important; padding: 0 !important; }
.neg[data-testid] .neg-scope-ctl > .neg-scope-card__ringpreset { padding: 2px !important; }
.neg[data-testid] .neg-scope-ctl > .neg-scope-card__divide { padding: 0 !important; }

/* VIEW family: strip the brand colour off the display controls so only the restructure
   family carries it. A display toggle that glows the same orange as Divide is the exact
   confusion this card exists to remove. */
.neg[data-testid] .neg-scope-ctl--view .neg-scope-card__expand {
    color: var(--v-ink-dim);
    background: transparent;
    border: 1px solid var(--v-border);
    font-weight: 600;
}
.neg[data-testid] .neg-scope-ctl--view .neg-scope-card__expand:hover {
    color: var(--v-ink); background: var(--v-hover); border-color: var(--v-border-strong);
}
.neg[data-testid] .neg-scope-ctl--view .neg-scope-card__expand.is-open {
    color: var(--v-ink); background: var(--v-surface-sunken); border-color: var(--v-border-strong);
}
.neg[data-testid] .neg-scope-ctl--view .neg-scope-card__ringpreset {
    border: 1px solid var(--v-border);
    background: transparent;
}
.neg[data-testid] .neg-scope-ctl--view .neg-scope-card__ringpreset-btn { font-weight: 600; }
/* selected = a RING, not a fill. The view family never uses a solid pill, so "which ring is
   at the centre" can't be misread as the same kind of thing as Divide. inset box-shadow
   instead of a border so selecting one does not reflow the switch by 2px. */
.neg[data-testid] .neg-scope-ctl--view .neg-scope-card__ringpreset-btn.is-active {
    color: var(--v-ink);
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--v-ink);
    font-weight: 800;
}

/* RESTRUCTURE family: heavier in every dimension the eye reads before it reads words -
   solid fill vs the view family's hollow outline, full-strength --v-ink vs --v-ink-dim,
   800 vs 600 weight. Divide becomes a filled commit-style button rather than the tinted
   ghost it was, so it can never be mistaken for the Composition toggle beside it. */
.neg[data-testid] .neg-scope-ctl--edit .neg-scope-card__divide-btn {
    color: rgb(var(--v-surface-rgb));
    background: rgb(var(--v-ink-rgb));
    border: 1px solid rgb(var(--v-ink-rgb));
    font-weight: 800;
}
.neg[data-testid] .neg-scope-ctl--edit .neg-scope-card__divide-btn:hover,
.neg[data-testid] .neg-scope-ctl--edit .neg-scope-card__divide-btn.is-open {
    background: rgb(var(--v-ink-rgb));
    border-color: var(--v-accent-brand-aa);
    box-shadow: 0 0 0 2px var(--v-accent-brand-tint);
    color: rgb(var(--v-surface-rgb));
}
.neg[data-testid] .neg-scope-ctl--edit .neg-scope-card__divide-btn:focus-visible {
    outline: 2px solid var(--v-accent-brand-aa); outline-offset: 2px;
}
.neg[data-testid] .neg-scope-ctl--edit .neg-scope-card__select {
    color: var(--v-ink);
    font-weight: 800;
}

/* the combine bar is the section-level member of the restructure family */
.neg[data-testid] .neg-combinebar__fam { margin-right: 2px; }

/* Phone / narrow shell: force the stack outright rather than relying on the min-width. */
@media (max-width: 720px) {
    .neg[data-testid] .neg-scope-card__actions > .neg-scope-ctl { flex: 1 1 100%; }
}

/* Committed/target lane cards hide their whole action row already; make sure the two new
   groups follow the same rule rather than surviving as empty chrome. */
.neg .neg-scope-lanes .neg-lane--target .neg-scope-ctl { display: none !important; }
.neg .neg-scope-lanes.is-reviewing .neg-lane--target .neg-scope-ctl { display: flex !important; }

@media (prefers-reduced-motion: reduce) {
    .neg[data-testid] .neg-scope-ctl,
    .neg[data-testid] .neg-ctlchip { transition: none !important; }
}

/* ============================================================================
   BU-755 — legibility of the negotiation engine under the NO-VIBE (Default) state.

   Root cause, measured: with no explicit vibe the --v-* palette is internally
   inconsistent. --v-surface is #ffffff and --v-ink / --v-ink-dim / --v-ink-muted
   are LIGHT-surface inks (#06222b / #3f4750 / #5a636d), but --v-canvas is the DARK
   cockpit/koi backdrop #0b1216. Two consequences, 27 failing elements:

     A. Blocks painted on --v-canvas (or --v-surface-sunken, also dark off-vibe)
        inherit the light-surface inks -> 1.18:1 and 2.07:1. This is the whole
        "Reuse efficiency" readout, the combine bar and the Composition pill.
     B. --v-canvas is ALSO used as the ink colour on accent fills (the "text on
        orange" idiom). Under a light vibe that is correct - the canvas is light.
        Off-vibe it paints #0b1216 on #bd4500 -> 3.61:1. Fixed by --v-on-accent
        (below), which every explicit vibe aliases straight back to its own canvas,
        so vibe rendering is byte-identical to before this card.

   Both fixes are keyed to the off-vibe state ONLY, so no vibe repaint changes.
   ========================================================================== */

/* B: ink on an accent fill. --v-on-accent ALREADY EXISTED in jargan-vibe-palette.css -
   this card did not invent it, it just started using it here instead of --v-canvas.
   That surfaced a latent palette bug: every vibe declared --v-on-accent: #ffffff, but
   the seven dark vibes pair it with the LIGHT accent #ff8a4d = 2.33:1. Those seven are
   now repaired at the definition site (#1c1206, 7.90:1), which also fixes every element
   that was already reading the token before this card. Nothing is aliased here on
   purpose: --v-canvas turned out to be page-dependent, so it is the wrong source. */



/* ============================================================================
   BU-757 — Default IS the dark cockpit; give this page cockpit surfaces.

   ThemeService names the default "Default Glass" and F-065 made the dark cockpit the
   default backdrop, but the palette's base :root block is still a LIGHT set
   (--v-surface #ffffff, --v-ink #06222b). Only --v-canvas was ever darkened. That is
   why this page stacked three inversions: dark shell -> white slab -> black scopes
   canvas -> white scope card.

   Structure and values are lifted from the carbon-lime vibe (a charcoal surface ramp
   already AA-verified against Traffic Orange), with the canvas moved to the cockpit
   #0c0d10 and the panels to the jgn-glass #16181d / #1b1e24 so this page matches the
   sidebar and /home instead of inventing a fourth grey. Brand stays Traffic Orange.
   Chart / stage / medium ramps are deliberately NOT touched - the sunburst is
   brand-neutral categorical and already reads on charcoal.

   Scoped to .sim and to the off-vibe sentinels: an explicit vibe still supplies its own
   --v-* set and repaints normally. The base :root block is the real long-term fix but
   it feeds every page and the SPA, so it is carded separately rather than flipped here.
   ========================================================================== */
:root:not([data-theme]) .sim,
:root[data-theme=""] .sim,
:root[data-theme="default"] .sim,
:root[data-theme="light"] .sim {
    --v-canvas:         #0c0d10;
    --v-surface:        #16181d;
    --v-surface-raised: #1b1e24;
    --v-surface-sunken: #101216;
    --v-hover:          #232830;
    --v-ink:            #eef1f4;
    --v-ink-dim:        #b8c0c8;
    --v-ink-muted:      #8a949e;
    --v-ink-rgb:        238, 241, 244;
    --v-surface-rgb:    22, 24, 29;
    --v-line:           rgba(184, 192, 200, 0.14);
    --v-line-strong:    rgba(184, 192, 200, 0.22);
    --v-line-subtle:    rgba(184, 192, 200, 0.08);
    --v-border:         #3a424a;
    --v-border-strong:  #5a646e;

    /* BRAND SIGNAL - Traffic Orange, on-dark shades (same pairing as carbon-lime). */
    --v-accent-brand:      #ff6b1a;
    --v-accent-brand-aa:   #ff8a4d;
    --v-on-accent:         #1c1206;
    --v-accent-brand-soft: rgba(255, 107, 26, 0.12);
    --v-accent-brand-tint: rgba(255, 107, 26, 0.08);

    --v-success: #66e08a;
    --v-warning: #ffcc55;
    --v-error:   #ff6b6b;
    --v-info:    #6ad0ff;
}

/* ============================================================================
   BU-780 — Scope card hierarchy: name first, asset-medium facts second.

   The earlier scannability pass promoted the collapsed/unifying value above the
   editable scope name. That made a renamed scope read weaker than the split value
   that produced it. This restores the producer mental model: the scope name is the
   object identity; cost and asset mediums are the compact facts; controls sit before
   lower-priority makeup chips.
   ========================================================================== */
.neg[data-testid] .neg-scope-card__meta {
    gap: 6px !important;
}
.neg[data-testid] .neg-scope-card__primary {
    gap: 5px !important;
}
.neg[data-testid] .neg-scope-card__title--btn {
    max-width: 100%;
    justify-content: center;
    padding: 2px 7px;
}
.neg[data-testid] .neg-scope-card__title-txt {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.98rem !important;
    font-weight: 850 !important;
    letter-spacing: -0.015em !important;
    color: var(--v-ink) !important;
}
.neg[data-testid] .neg-scope-card__title--btn.is-custom .neg-scope-card__title-txt {
    font-size: 1.12rem !important;
    font-weight: 900 !important;
}
.neg[data-testid] .neg-scope-card__title-default {
    font-size: 0.54rem !important;
    color: var(--v-ink-muted) !important;
}
.neg[data-testid] .neg-scope-card__collapsed {
    font-size: 0.68rem !important;
    font-weight: 650 !important;
    color: var(--v-ink-dim) !important;
    letter-spacing: 0.01em !important;
}
.neg[data-testid] .neg-scope-card__headline {
    display: grid !important;
    grid-template-columns: minmax(62px, 0.82fr) 1px minmax(82px, 1.25fr) 1px minmax(62px, 0.82fr);
    align-items: stretch !important;
    gap: 0 !important;
    width: min(100%, 360px);
    margin-top: 2px !important;
    overflow: hidden;
    border: 1px solid var(--v-line);
    border-radius: 10px;
    background: var(--v-surface-sunken);
}
.neg[data-testid] .neg-scope-card__headline .neg-scope-card__hl {
    min-width: 0;
    padding: 6px 7px;
}
.neg[data-testid] .neg-scope-card__headline .neg-scope-card__hl-div {
    display: block !important;
    width: 1px;
    min-height: 100%;
    background: var(--v-line);
}
.neg[data-testid] .neg-scope-card__headline .neg-scope-card__hl-v {
    font-size: 1rem !important;
}
.neg[data-testid] .neg-scope-card__hl--mediums .neg-scope-card__hl-v {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.88rem !important;
    color: var(--v-ink) !important;
}
.neg[data-testid] .neg-scope-card__headline .neg-scope-card__hl-k {
    font-size: 0.53rem !important;
    letter-spacing: 0.07em !important;
}
.neg[data-testid] .neg-scope-card:not(.is-expanded) .neg-scope-card__headline .neg-scope-card__hl,
.neg[data-testid] .neg-scope-card:not(.is-expanded) .neg-scope-card__headline .neg-scope-card__hl-div {
    display: flex !important;
}
.neg[data-testid] .neg-scope-card:not(.is-expanded) .neg-scope-card__headline .neg-scope-card__hl-div {
    display: block !important;
}
.neg[data-testid] .neg-scope-card__actions {
    order: 2;
    margin-top: 2px !important;
    padding-top: 6px !important;
}
.neg[data-testid] .neg-scope-card__secondary {
    order: 3;
    margin-top: 5px !important;
    padding-top: 7px !important;
}

/* ============================================================================
   BU-781 — final scope-card polish: media with assets.

   The card should read like a production object, not a stack of admin chips:
   scope identity first, chart second, then one compact fact strip:
   cost / media + asset count / deliverables reached. Controls become two calm
   footer rows. View changes presentation; Restructure changes the plan.
   ========================================================================== */
.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) {
    padding: 12px 12px 10px !important;
    gap: 9px !important;
    align-items: center !important;
}

.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-card__meta {
    display: contents !important;
}

.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-card__primary,
.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-card__secondary,
.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-card__actions {
    width: 100%;
    max-width: 460px;
}

.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-card__primary {
    order: 0;
    gap: 7px !important;
}

.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-card__burst,
.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-card__comp {
    order: 1;
}

.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-card__burst {
    max-width: var(--neg-burst-cap, clamp(190px, 14vw, 285px)) !important;
    margin-top: 0;
}

.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-card__title--btn {
    justify-content: center;
    min-height: 24px;
    padding: 1px 7px !important;
}

.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-card__title-txt {
    font-size: 1.04rem !important;
    font-weight: 900 !important;
    letter-spacing: -0.025em !important;
}

.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-card__headline {
    grid-template-columns: minmax(64px, 0.78fr) 1px minmax(108px, 1.45fr) 1px minmax(72px, 0.9fr);
    width: 100%;
    margin-top: 0 !important;
    border-radius: 11px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--v-surface-sunken) 94%, var(--v-ink) 6%), var(--v-surface-sunken));
}

.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-card__headline .neg-scope-card__hl {
    justify-content: center;
    gap: 2px;
    padding: 7px 8px !important;
}

.neg[data-testid] .neg-scope-card__hl--media-assets {
    min-width: 0;
}

.neg[data-testid] .neg-scope-card__media-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--v-ink);
    font-size: 0.88rem;
    font-weight: 850;
    line-height: 1.05;
}

.neg[data-testid] .neg-scope-card__asset-count {
    color: var(--v-accent-brand-aa);
    font-size: 0.78rem;
    font-weight: 850;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.neg[data-testid] .neg-scope-card__hl--deliverables .neg-scope-card__hl-v {
    color: var(--v-ink);
}

.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-card__actions {
    order: 2;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    margin-top: 0 !important;
    padding: 8px 0 0 !important;
    border-top: 1px solid var(--v-line);
}

.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-ctl {
    width: 100%;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center !important;
    gap: 7px !important;
}

.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-ctl__lab {
    justify-self: start;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--v-ink-muted) !important;
    font-size: 0.56rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-card__ringpreset,
.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-card__select,
.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-card__divide {
    min-width: 0;
}

.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-ctl--view .neg-scope-card__ringpreset {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-start;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-ctl--view .neg-scope-card__ringpreset-btn,
.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-ctl--view .neg-scope-card__expand,
.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-card__select,
.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-card__divide-btn {
    min-height: 25px !important;
    padding: 5px 8px !important;
    border-radius: 8px !important;
    font-size: 0.68rem !important;
    line-height: 1 !important;
}

.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-ctl--view .neg-scope-card__ringpreset-btn,
.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-ctl--view .neg-scope-card__expand {
    color: var(--v-ink-dim);
    border: 1px solid var(--v-line) !important;
    background: color-mix(in srgb, var(--v-surface-sunken) 74%, transparent) !important;
}

.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-ctl--view .neg-scope-card__ringpreset-btn.is-active,
.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-ctl--view .neg-scope-card__expand.is-open {
    color: var(--v-ink) !important;
    border-color: var(--v-border-strong) !important;
    background: var(--v-hover) !important;
    box-shadow: none !important;
}

.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-ctl--edit {
    grid-template-columns: 72px auto auto 1fr;
}

.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-card__select {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0 !important;
    width: max-content;
    color: var(--v-ink-dim);
    border: 1px solid var(--v-line) !important;
    background: color-mix(in srgb, var(--v-surface-sunken) 74%, transparent);
    cursor: pointer;
}

.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-card__select input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-card__select.is-selected {
    color: var(--v-on-accent);
    border-color: var(--v-accent-brand-aa) !important;
    background: var(--v-accent-brand-aa);
}

.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-card__divide-btn {
    color: var(--v-on-accent) !important;
    background: var(--v-accent-brand-aa) !important;
    border: 1px solid var(--v-accent-brand-aa) !important;
    font-weight: 850 !important;
}

.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-card__secondary {
    order: 3;
    margin-top: 0 !important;
    padding-top: 7px !important;
}

@media (max-width: 980px) {
    .neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-ctl,
    .neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-ctl--edit {
        grid-template-columns: 1fr;
    }
    .neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-ctl__lab {
        justify-self: center;
    }
}

/* ============================================================================
   BU-782 — scope-card controls and reuse meter cleanup.

   The card controls were still trying to fit a label plus multiple buttons into
   one narrow row. At 289px card width that made VIEW / RESTRUCTURE collide with
   the actual buttons. Stack each control family instead.

   The reuse block is no longer an input slider. Grouping strictness already has
   the "Group by" control; this block now reports actual media reuse.
   ========================================================================== */
.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-ctl {
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    gap: 6px !important;
}

.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-ctl__lab {
    width: 100%;
    justify-content: flex-start !important;
}

.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-ctl--view .neg-scope-card__ringpreset {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
}

.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-ctl--view .neg-scope-card__ringpreset-btn,
.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-ctl--view .neg-scope-card__expand {
    width: 100%;
}

.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-ctl--edit {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
}

.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-ctl--edit .neg-scope-ctl__lab {
    grid-column: 1 / -1;
}

/* BU-786 x BU-771 MERGE FIX (2026-08-15). The --edit group is a 2-column GRID
   (above), so Combine takes column 1 and the compound Divide-by was handed
   column 2 -- 152px for a control that needs ~250px. It is `flex-wrap: nowrap`
   + `overflow: hidden` (the overflow rounds its corners), so it did not wrap or
   scroll: it CLIPPED "Voice" and "Stage" off the card entirely, on all three
   cards.

   Measured at 1440x900: the group's rect reported right=589, inside the card's
   602, while its own segments ran to 609 and 658. overflow:hidden clamps the
   CONTAINER's rect, so the container reports a lie and only the children show
   the clip -- and the BU-786 acceptance check compared that clamped rect to the
   1440 VIEWPORT rather than to the parent card, a test it could never fail.
   Check children against their container, not containers against the window.

   Span the full row, like the label chip above it. 309px comfortably fits. */
.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-ctl--edit .neg-scope-card__divide--compound {
    grid-column: 1 / -1;
    min-width: 0;
}
/* ...and the three segments SHARE the row they now span. Without this they keep
   their content width and leave a dead strip after "Stage" that reads like the
   control failed to finish rendering. The "Divide by" label keeps its intrinsic
   width; only the segments flex. */
.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-ctl--edit .neg-scope-card__divide--compound .neg-scope-card__divide-seg {
    flex: 1 1 0;
    text-align: center;
}

.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-card__select,
.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-card__divide,
.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-card__divide-btn {
    width: 100% !important;
}

.neg[data-testid] .neg-efficiency.neg-efficiency--target {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 7px !important;
    padding: 10px 12px !important;
}

.neg .neg-efficiency--target .neg-efficiency__lab {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.neg .neg-efficiency--target .neg-efficiency__target {
    margin-left: auto;
    color: var(--v-accent-brand-aa);
    font-size: 0.82rem;
    font-weight: 850;
}

.neg .neg-efficiency--target .neg-efficiency__val {
    color: var(--v-ink);
    font-size: 0.95rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.neg .neg-efficiency--target .neg-efficiency__unit {
    margin-left: 1px;
    color: var(--v-ink-dim);
    font-size: 0.62rem;
    font-weight: 750;
}

.neg .neg-efficiency--target .neg-efficiency__slider-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
}

.neg .neg-efficiency--target .neg-efficiency__track-wrap {
    position: relative;
    height: 20px;
    min-width: 0;
}

.neg .neg-efficiency--target .neg-efficiency__track-wrap--actual::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 6px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: var(--v-line);
}

.neg .neg-efficiency--target .neg-efficiency__track-wrap--target {
    display: flex;
    align-items: center;
}

.neg .neg-efficiency--target .neg-efficiency__range {
    width: 100%;
}

.neg .neg-efficiency--target .neg-efficiency__actual {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding-top: 7px;
    border-top: 1px solid var(--v-line);
}

.neg .neg-efficiency--target .neg-efficiency__actual-lab {
    color: var(--v-ink-dim);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.neg .neg-efficiency--target .neg-efficiency__fill {
    position: absolute;
    left: 0;
    top: 50%;
    height: 6px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: var(--v-accent-brand-aa);
    opacity: 0.78;
    transition: width 0.2s ease;
}

.neg .neg-efficiency--target .neg-efficiency__marker {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: var(--v-accent-brand-aa);
    border: 2px solid var(--v-surface);
    box-shadow: 0 1px 5px rgba(var(--v-ink-rgb), 0.38);
}

.neg .neg-efficiency--target .neg-efficiency__hint {
    color: var(--v-ink-dim);
    font-size: 0.68rem;
    line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
    .neg .neg-efficiency--target .neg-efficiency__fill { transition: none; }
}

/* ============================================================================
   BU-782 responsive repair — scope cards must not get squeezed until their own
   facts clip. Earlier rules allowed three ~210px cards at tablet width; the grid
   fit, but the cost/media/deliverable strip became unreadable. Keep a real card
   floor, then make phone cards stack their headline facts instead of clipping.
   ========================================================================== */
.neg[data-testid] {
    max-width: 100%;
    overflow-x: clip;
}

.neg[data-testid] .neg-shell,
.neg[data-testid] .neg-shell__main,
.neg[data-testid] .neg-scopes,
.neg[data-testid] .neg-scopes__head,
.neg[data-testid] .neg-scopes__grid {
    min-width: 0;
    max-width: 100%;
}

.neg[data-testid] .neg-scopes__grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
    justify-items: stretch;
}

.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) {
    min-width: 0 !important;
}

.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-card__primary,
.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-card__secondary,
.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-card__actions {
    min-width: 0;
}

.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-card__headline .neg-scope-card__hl {
    min-width: 0;
}

.neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-card__headline .neg-scope-card__hl-v,
.neg[data-testid] .neg-scope-card__media-name,
.neg[data-testid] .neg-scope-card__asset-count {
    overflow-wrap: anywhere;
}

@media (max-width: 1120px) {
    .neg[data-testid] .neg-scopes__grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) !important;
    }
}

@media (max-width: 960px) {
    body:has(.neg-topbar) main .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: clip;
    }

    .neg[data-testid] {
        padding-inline: clamp(10px, 3vw, 18px) !important;
    }

    .neg[data-testid] .neg-shell {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px;
        margin-right: 0 !important;
    }

    .neg[data-testid] .neg-shell__rail {
        max-width: 100%;
        overflow-x: clip;
    }

    .neg[data-testid] .neg-scopes__controls {
        max-width: 100%;
    }
}

@media (max-width: 720px) {
    .neg[data-testid] .neg-scopes {
        padding-inline: clamp(10px, 4vw, 16px) !important;
    }

    .neg[data-testid] .neg-scopes__grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .neg[data-testid] .neg-scope-card:not(.neg-scope-tile) {
        width: 100% !important;
        max-width: 460px;
        margin-inline: auto;
    }
}

@media (max-width: 560px) {
    .neg[data-testid] .neg-topbar {
        align-items: stretch;
        gap: 8px;
    }

    .neg[data-testid] .neg-topbar__lead {
        flex: 1 1 100%;
        width: 100%;
    }

    .neg[data-testid] .neg-topbar__title {
        min-width: 0;
        white-space: normal;
    }

    .neg[data-testid] .neg-topbar__right {
        width: 100%;
        align-items: stretch;
        gap: 8px;
    }

    .neg[data-testid] .neg-scenariobar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        width: 100%;
        max-width: 100%;
        align-items: center;
        gap: 4px;
        white-space: normal;
    }

    .neg[data-testid] .neg-scenariobar__id {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .neg[data-testid] .neg-scenariobar__name {
        width: 100%;
        min-width: 0;
    }

    .neg[data-testid] .neg-scenariobar [data-testid="neg-scenario-save"] {
        grid-column: 2;
        grid-row: 1;
    }

    .neg[data-testid] .neg-scenariobar [data-testid="neg-scenario-promote"] {
        grid-column: 3;
        grid-row: 1;
    }

    .neg[data-testid] .neg-scenariobar [data-testid="neg-scenario-share"] {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }

    .neg[data-testid] .neg-scenariobar__split {
        grid-column: 2 / 4;
        grid-row: 2;
        justify-self: end;
    }

    .neg[data-testid] .neg-scenariobar__rail-btn,
    .neg[data-testid] .neg-scenariobar__icon,
    .neg[data-testid] .neg-scenariobar__split {
        flex: 0 0 auto;
    }

    .neg[data-testid] .neg-scenariobar__divide {
        display: none;
    }


    .neg[data-testid] .neg-reuse-target,
    .neg[data-testid] .neg-reuse-actual,
    .neg[data-testid] .neg-scopes__reset {
        max-width: 100%;
    }

    .neg[data-testid] .neg-scope-card:not(.neg-scope-tile) {
        padding: 11px 10px 10px !important;
    }

    .neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-card__headline {
        grid-template-columns: 1fr !important;
        width: 100%;
        max-width: 260px;
        border-radius: 12px;
    }

    .neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-card__headline .neg-scope-card__hl-div {
        display: none !important;
    }

    .neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-card__headline .neg-scope-card__hl {
        padding: 7px 10px !important;
        border-bottom: 1px solid var(--v-line);
    }

    .neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-card__headline .neg-scope-card__hl:last-child {
        border-bottom: 0;
    }

    .neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-card__headline .neg-scope-card__hl-v,
    .neg[data-testid] .neg-scope-card__media-name {
        white-space: normal !important;
        text-overflow: clip !important;
    }

    .neg[data-testid] .neg-scope-card:not(.neg-scope-tile) .neg-scope-card__burst {
        max-width: min(100%, 248px) !important;
    }
}

@media (max-width: 420px) {
    .neg[data-testid] {
        padding-inline: 8px !important;
    }

    .neg[data-testid] .neg-scopes {
        padding-inline: 8px !important;
    }

    .neg[data-testid] .neg-scope-card:not(.neg-scope-tile) {
        max-width: 100%;
    }
}

/* ============================================================
   BU-785 (Beau, 2026-08-14) — COMBINE / DIVIDE / VIEW ARE ICON BUTTONS
   "'Combine' and 'Divide' buttons should be buttons with icons, likewise
    with 'View: Voice, platform, medium' using a minimalist custom
    starburst icon"

   The glyphs themselves are drawn in NegotiationEngine.razor (NegIcon*),
   in the page's own wedge/burst vocabulary — no icon font, no stock set.
   They are emitted as MarkupString, which means Blazor's CSS isolation
   never stamps them with the component's b-* scope attribute: a scoped
   rule in NegotiationEngine.razor.css CANNOT reach them (isolation
   rewrites the LAST compound of a selector). So every icon rule lives
   HERE, in the global sheet, and is written with the `.neg …` /
   `.neg[data-testid] …` prefixes this file already uses.

   COLOUR: every glyph paints with `currentColor`, inheriting the colour
   its own label already carries, so no icon introduces a new hex literal
   and no icon can drift from its label's tuned contrast. The one glyph
   that is the card's own named subject — the View starburst — is pinned
   to --v-accent-brand-aa, the AA-tuned brand token the page already uses
   for Divide and for the active burst wedges, so the "custom starburst"
   the Ask asks for is the one thing on that pill you cannot miss.

   Contrast, dark theme, WCAG 2.x, ancestor backgrounds composited.
   MEASURED on the running page (not estimated) — the label glyphs inherit
   their control's colour, so the control's ratio IS the icon's ratio:
     Combine pill      rgb(238,241,244) on rgb(22,24,29)  = 15.66:1
     Divide button     rgb(255,138,77)  on rgb(35,40,48)  =  6.34:1
     View/grouping     rgb(238,241,244) on rgb(33,38,45)  = 13.43:1
     View starburst    rgb(255,138,77)  on rgb(33,38,45)  =  6.62:1
   ============================================================ */

/* Shared glyph box. `overflow: visible` keeps the round stroke caps of
   the starburst's outermost rays from being clipped by the viewBox. */
.neg .neg-ico {
    flex: 0 0 auto;
    display: block;
    overflow: visible;
    pointer-events: none;
}

/* ── VIEW: the header grouping trigger leads with the starburst ───────
   Sized a touch larger than the label's cap height and painted brand, so
   the pill reads icon-first — "View" with a burst on it — rather than as
   a text pill with a decoration. The label word beside it is "View:", the
   name the card itself uses for this control. */
.neg[data-testid] .neg-groupmenu__trigger .neg-ico--starburst {
    width: 16px;
    height: 16px;
    color: var(--v-accent-brand-aa);
    transition: transform 0.18s ease;
}
.neg[data-testid] .neg-groupmenu__trigger:hover:not(:disabled) .neg-ico--starburst,
.neg[data-testid] .neg-groupmenu.is-open .neg-groupmenu__trigger .neg-ico--starburst {
    transform: rotate(22.5deg);
}

/* THE PER-CARD Voice / Platform / Medium SWITCH DELIBERATELY GETS NO ICON.
   It is the closest thing on the page to the Ask's literal wording, and a
   starburst was fitted there first — then measured at 1440px in the grid
   layout: .neg-scope-card__ringpreset is ALREADY 42px wider than the 134px
   it is given (scrollWidth 176 vs clientWidth 134, a pre-existing overflow
   this card did not create), so its "Medium" pill paints ~28px outside the
   card edge. A 12px starburst plus its gap took that spill to 51px. Buying
   wording-fidelity there costs a visible layout regression on every card in
   the grid, so that row is left byte-identical to baseline — no markup, no
   rule. The Ask's View control is served by the header grouping trigger
   below, which is the control the card names and which has room for it. */

/* ── COMBINE: the floating combine bar's primary action ────────────── */
.neg .neg-combinebar__go {
    gap: 7px;
}
.neg .neg-combinebar__go .neg-ico--combine {
    width: 14px;
    height: 14px;
}

/* ── COMBINE: the per-scope selector. Under the hood it is STILL the same
      checkbox — same data-testid, same @onchange, same aria-label, so the
      click path and the floating combine bar are untouched. What changes
      is only what it looks like: pill chrome, the merge icon, and a
      brand-filled selected state that says what the tick used to say. The
      native tick is folded away (it survives in the DOM for a11y and for
      label activation) because a tick AND a merge icon AND the word
      "Combine" is three ways of saying one thing, and the row it lives in
      only has ~460px before it wraps. ──────────────────────────────── */
.neg[data-testid] .neg-scope-card__select,
.neg .neg-scopes-compact .neg-scope-tile__select {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: 1px solid var(--v-border-strong, var(--v-border));
    border-radius: 6px;
    background: var(--v-surface);
    color: var(--v-ink);
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.neg .neg-scopes-compact .neg-scope-tile__select {
    padding: 2px 8px;
    gap: 5px;
}
/* visually hidden, still focusable, still toggled by clicking the label */
.neg[data-testid] .neg-scope-card__select input[type="checkbox"],
.neg .neg-scopes-compact .neg-scope-tile__select input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}
.neg[data-testid] .neg-scope-card__select:hover,
.neg .neg-scopes-compact .neg-scope-tile__select:hover {
    border-color: var(--v-accent-brand-aa);
}
/* the hidden input still takes keyboard focus - show it on the pill */
.neg[data-testid] .neg-scope-card__select:has(input:focus-visible),
.neg .neg-scopes-compact .neg-scope-tile__select:has(input:focus-visible) {
    outline: 2px solid var(--v-accent-brand-aa);
    outline-offset: 2px;
}
/* Icon-first: the glyph is deliberately larger than the 0.66rem label beside
   it, so the control reads as an ICON button carrying a word, not as a text
   button with a bullet in front. */
.neg[data-testid] .neg-scope-card__select .neg-ico--combine {
    width: 14px;
    height: 14px;
}
.neg .neg-scopes-compact .neg-scope-tile__select .neg-ico--combine {
    width: 12px;
    height: 12px;
}
/* selected: the icon's two rings and the label go brand, matching Divide */
.neg[data-testid] .neg-scope-card__select:has(input:checked),
.neg .neg-scopes-compact .neg-scope-tile__select:has(input:checked) {
    color: var(--v-accent-brand-aa);
    border-color: var(--v-accent-brand-aa);
    background: var(--v-accent-brand-tint);
}

/* ── DIVIDE: icon + label on one baseline. NO text caret — the wedge glyph
      is the affordance now, and a glyph plus a word plus a "▾" is three
      marks for one action. aria-haspopup / aria-expanded still carry the
      menu semantics, and ToggleDivideMenu is untouched. ─────────────── */
.neg[data-testid] .neg-scope-card__divide-btn,
.neg .neg-scopes-compact .neg-scope-tile__divide-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
}
/* The BU-475 row rule sizes `.neg-scope-card__actions > *`, and Divide's
   button is NOT a direct child of that row — it hangs inside the
   .neg-scope-card__divide positioning wrapper (the menu anchors off it).
   So the button never got the row's type scale and photographed 8px taller
   than Combine beside it. Give it the row's own metrics explicitly. */
.neg[data-testid] .neg-scope-card__divide {
    display: inline-flex;
    align-items: center;
    /* The wrapper carried 4px/6px of its own padding, so its flex box measured
       81px around a 69px button and 32px around a 24px one. In the wide layout
       that only wasted room; in the 136px GRID card, where the row wraps, it
       pushed the orange pill 6px left of the Combine pill above it and opened
       a 13px rag between them where every other gap is 5px. Measured on the
       running grid, not guessed. The menu anchors off this element's own
       position:relative, which padding does not affect. !important is not
       decoration here: the BU-463 row rule above sets `padding: 4px 6px
       !important` on every direct child of .neg-scope-card__actions, and a
       plain declaration loses to it no matter how specific the selector is —
       measured, the wrapper stayed 90px wide until this was marked. */
    padding: 0 !important;
}
.neg[data-testid] .neg-scope-card__divide-btn {
    font-size: 0.66rem;
    padding: 4px 8px;
    min-height: 24px;
}
/* ONE STACK, NOT A RAG. At 1440px the scope GRID gives this row 136px of inner
   width, and an icon+label Combine (76px) plus an icon+label Divide (81px)
   cannot share that line — measured, 157.7px needed against a 131px budget
   after the row's 5px gap. Shrinking type or dropping a label to force them
   side by side would buy 26px by making the two new controls the least legible
   things on the card, which is the opposite of what this card asks for. So the
   wrap is accepted and made deliberate: both pills take the SAME width and
   centre their contents, so Composition / Combine / Divide read as one flush
   stack rather than three ragged pills that happened to wrap. In the wide
   single-scope layout the row is 460px, everything still sits on one line
   (88 + 78 + 78 + 190 + gaps = 449), and the equal width just tidies it. */
.neg[data-testid] .neg-scope-card__select,
.neg[data-testid] .neg-scope-card__divide-btn {
    min-width: 78px;
    justify-content: center;
}
.neg .neg-scopes-compact .neg-scope-tile__divide-btn {
    gap: 5px;
}
.neg[data-testid] .neg-scope-card__divide-btn .neg-ico--divide {
    width: 14px;
    height: 14px;
}
.neg .neg-scopes-compact .neg-scope-tile__divide-btn .neg-ico--divide {
    width: 12px;
    height: 12px;
}
/* BU-786: the compound Divide-by button leads with the icon as a DIRECT child of
   --compound, ahead of the "Divide by" label span, so it inherits none of that
   label's padding; and the .neg-scope-card__divide wrapper carries
   `padding: 0 !important` (BU-463, above), so the icon rendered flush against
   the pill's left border. It has to be styled from THIS global sheet, not the
   component's scoped .razor.css: the icon is injected via MarkupString
   (@NegIconDivide) and so never receives the component's `b-*` scope attribute,
   which a scoped rule would require in order to match. */
.neg .neg-scope-card__divide--compound > .neg-ico--divide {
    margin-left: 7px;
}
.neg .neg-scopes-compact .neg-scope-card__divide--compound > .neg-ico--divide {
    margin-left: 6px;
}
/* open state: the two halves pull a little further apart, so the button still
   says "this is the one that is currently open" without a chevron to rotate. */
.neg[data-testid] .neg-scope-card__divide-btn .neg-ico--divide,
.neg .neg-scopes-compact .neg-scope-tile__divide-btn .neg-ico--divide {
    transition: transform 0.18s ease;
}
.neg[data-testid] .neg-scope-card__divide-btn.is-open .neg-ico--divide,
.neg .neg-scopes-compact .neg-scope-tile__divide-btn.is-open .neg-ico--divide {
    transform: scaleX(1.14);
}

/* ── THE ROW READS AS ONE GROUP ───────────────────────────────────────
   Combine and Divide now carry 14px glyphs, which makes them taller than
   the 0.66rem text pill they sit beside; left alone the row photographs as
   two new buttons bolted onto an old one. One shared minimum height (and
   the row's existing centre alignment) puts all of the card's action pills
   on one line of the same size. min-height needs !important only because
   the BU-475 row rule above sets `min-height: 0 !important`.

   HEIGHT ONLY — no corner radius here. An earlier draft also set
   `border-radius: 6px` on every child of this row, which was redundant for
   the two controls this card owns (Combine's pill and Divide's button both
   set their own 6px) and actively WRONG for the one it does not: BU-672's
   Voice/Platform/Medium ring-preset switch is a 999px pill by design, and
   the blanket rule squared it off — measured 999px → 6px on the running
   page. This card does not get to restyle its neighbour, so the radius
   declaration is gone and each control keeps the corners it came with. */
.neg[data-testid] .neg-scope-card__actions > * {
    min-height: 24px !important;
}

@media (prefers-reduced-motion: reduce) {
    .neg .neg-ico,
    .neg[data-testid] .neg-scope-card__divide-btn .neg-ico--divide,
    .neg .neg-scopes-compact .neg-scope-tile__divide-btn .neg-ico--divide {
        transition: none;
    }
    .neg[data-testid] .neg-scope-card__divide-btn.is-open .neg-ico--divide,
    .neg .neg-scopes-compact .neg-scope-tile__divide-btn.is-open .neg-ico--divide {
        transform: none;
    }
    .neg[data-testid] .neg-groupmenu__trigger:hover:not(:disabled) .neg-ico--starburst,
    .neg[data-testid] .neg-groupmenu.is-open .neg-groupmenu__trigger .neg-ico--starburst {
        transform: none;
    }
}