/* ============================================================
   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: the SCENARIO DECK ──────────────────────────────────────
   One bordered island: identity (name-first, picker folded to a chevron) | Save split |
   promote | fork·compare·share | More. Every control aligns to the shared --negbar-ctl
   height; the Save split is the bar's ONLY brand-filled element. */
.neg-scenariobar {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    padding: 3px;
    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 32px 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;
}

/* Save split-button: primary Save (brand) + attached chevron - the deck's one filled control. */
.neg-scenariobar__split { position: relative; display: inline-flex; align-items: center; height: var(--negbar-ctl, 32px); }
.neg-scenariobar__save {
    display: inline-flex; align-items: center; gap: 5px; height: 100%;
    padding: 0 12px; border: 1px solid var(--v-accent-brand); border-right: 0;
    border-radius: 7px 0 0 7px; background: var(--v-accent-brand); color: #fff;
    font-size: 0.8rem; font-weight: 700; cursor: pointer;
}
.neg-scenariobar__save:hover:not(:disabled) { filter: brightness(1.07); }
.neg-scenariobar__caret {
    display: inline-flex; align-items: center; justify-content: center; height: 100%;
    padding: 0 9px; border: 1px solid var(--v-accent-brand);
    border-left: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 0 7px 7px 0; background: var(--v-accent-brand); color: #fff; cursor: pointer;
}
.neg-scenariobar__caret:hover:not(:disabled) { filter: brightness(1.07); }
.neg-scenariobar__save:disabled, .neg-scenariobar__caret:disabled { opacity: 0.5; cursor: not-allowed; }
.neg-scenariobar__save:focus-visible, .neg-scenariobar__caret:focus-visible { outline: 2px solid var(--v-ink); outline-offset: 1px; }

/* Icon actions: quiet 32px 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;
    border: 1px solid var(--v-border); border-radius: 8px;
    background: var(--v-surface);
    box-shadow: 0 6px 18px rgba(var(--v-ink-rgb), 0.14);
    white-space: nowrap;
}

/* BU-536: below 1280px the fork/compare/share ghosts leave the bar and their labeled
   copies appear in the More menu - a deliberate fold, nothing silently lost. */
.neg-scenariobar__menu-item--folded { display: none; }
@media (max-width: 1280px) {
    .neg-scenariobar__icon--fold { display: none; }
    .neg-scenariobar__menu-item--folded { display: flex; }
}

/* 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);
}
.neg-scenariobar__menu--right { left: auto; right: 0; }
.neg-scenariobar__menu-item {
    display: flex; align-items: center; gap: 9px; width: 100%;
    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,
.neg[data-testid] .neg-scopes__strat { margin: 0; }

/* 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 isolate handles under each sunburst.
   Drag a pill to the split zone to divide the scope by that vector;
   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; }
/* empty board area = divide bin (drop a wedge here to peel it out) */
.neg .neg-scopes__grid.bin-armed { outline: 2px dashed var(--v-border-strong); outline-offset: 8px; border-radius: 14px; }
.neg .neg-scopes__grid.bin-over { outline-color: var(--v-accent-brand-aa); }
.neg .neg-dragzone__split.is-armed-isolate { border-color: var(--v-accent-brand-aa); background: var(--v-accent-brand-tint); }
.neg .neg-dragzone__split.is-over {
    border-color: var(--v-accent-brand-aa); background: var(--v-accent-brand-soft);
    box-shadow: 0 0 0 1px var(--v-accent-brand-aa);
}

/* ============================================================
   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.
   ============================================================ */
.neg[data-testid] .neg-scopes__count,
.neg[data-testid] .neg-scopes__sub,
.neg[data-testid] .neg-scopes__strat { 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; }
.sim .sim__head--compact .sim__eyebrow {
    font-size: 10px !important; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--v-ink-muted) !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(--v-ink) !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__isolate {
    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__isolate:hover { filter: brightness(1.06); }
.neg .neg-slice-pop__isolate: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__isolate { 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 / Voices / Commit each live OFF the main canvas in a
   right-side slide-over, opened from a vertical trigger rail. The section markup stays in place;
   .neg-drawer fixes it off-screen and .is-open slides it in. */
.neg .neg-drawertabs {
    /* anchored bottom-right so it never collides with the budget re-expand tab (sticky top-right). */
    position: fixed; top: auto; bottom: 26px; right: 0; z-index: 46;
    display: flex; flex-direction: column; gap: 7px;
}
.neg .neg-drawertab {
    writing-mode: vertical-rl;
    background: var(--v-surface-raised); color: var(--v-ink);
    border: 1px solid var(--v-line); border-right: 0;
    border-radius: 10px 0 0 10px; padding: 15px 7px;
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
    cursor: pointer; box-shadow: -2px 2px 9px rgba(0, 0, 0, 0.08);
    transition: background 0.15s ease, color 0.15s ease;
}
.neg .neg-drawertab:hover { background: var(--v-canvas); }
.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-liverail {
    position: sticky;
    top: 12px;
    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-canvas);
    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 */
.neg .neg-scope-card__title { font-size: 0.6rem; line-height: 1.15; letter-spacing: 0.08em; opacity: 0.7; }
/* 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; opacity: 0.62;
    transition: opacity 0.15s ease;
}
.neg[data-testid] .neg-dragzone:hover,
.neg[data-testid] .neg-scopes__grid.bin-armed ~ .neg-dragzone,
.neg[data-testid] .neg-dragzone.is-over { opacity: 1 !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: 0 1 auto;
    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 and the meta
       (flex-shrink 4 below) gives way first when the row tightens */
    flex: 0 1 auto;
    min-width: 150px;
}
.neg[data-testid] .neg-topbar__meta {
    font-size: 0.8rem;
    color: var(--v-ink-dim);
    margin: 0 !important;
    white-space: nowrap;
    flex: 0 4 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);
    color: var(--v-surface);
    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;
}

/* Deliberate degrade (breakpoints account for the ~250px app sidebar eating into the
   content width): at 1280 the meta drops WITH the fork/compare/share fold (the title is
   the identity); below 1100 the right cluster wraps under the title as an intentional
   second row. The 1280 fold into More lives with the scenariobar block above. */
@media (max-width: 1280px) {
    .neg[data-testid] .neg-topbar__meta { display: none; }
}
@media (max-width: 1100px) {
    .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-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-canvas); }
.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: 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-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: 5px; flex-wrap: wrap; }
.neg .neg-channels__stage-chip {
    appearance: none; cursor: pointer; line-height: 1;
    font-size: 11px; font-weight: 600; padding: 4px 9px;
    color: var(--v-ink-dim);
    background: var(--v-surface);
    border: 1px solid var(--v-border); border-radius: 999px;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.neg .neg-channels__stage-chip:hover:not(:disabled) { border-color: var(--v-accent-brand-aa); color: var(--v-ink); }
.neg .neg-channels__stage-chip.is-on {
    background: var(--v-accent-brand-aa); color: var(--v-canvas); border-color: var(--v-accent-brand-aa);
}
.neg .neg-channels__stage-chip:disabled { opacity: 0.55; cursor: default; }
.neg .neg-channels__stage-chip:focus-visible { outline: 2px solid var(--v-accent-brand-aa); outline-offset: 1px; }

/* ── 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); }
.neg .neg-scopes-compact .neg-scope-tile__divide { position: relative; margin-left: auto; }
.neg .neg-scopes-compact .neg-scope-tile__divide-btn {
    -webkit-appearance: none; appearance: none; cursor: pointer;
    padding: 2px 8px; border-radius: 6px;
    font-size: 0.66rem; font-weight: 700; color: var(--v-ink-dim);
    background: var(--v-surface-raised); border: 1px solid var(--v-line-strong);
}
.neg .neg-scopes-compact .neg-scope-tile__divide-btn:hover { border-color: var(--v-accent-brand); color: var(--v-accent-brand-aa); }
.neg .neg-scopes-compact .neg-scope-tile__divide-menu {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 30;
    display: flex; flex-direction: column; min-width: 126px; padding: 4px;
    background: var(--v-surface-raised); border: 1px solid var(--v-line-strong);
    border-radius: 8px; box-shadow: 0 8px 24px -8px rgba(var(--v-ink-rgb), 0.34);
}
.neg .neg-scopes-compact .neg-scope-tile__divide-menu button {
    -webkit-appearance: none; appearance: none; cursor: pointer; text-align: left;
    padding: 6px 8px; border-radius: 5px; border: 0; background: transparent;
    font-size: 0.72rem; color: var(--v-ink);
}
.neg .neg-scopes-compact .neg-scope-tile__divide-menu button:hover { 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); }
.neg[data-theme="dark"] .neg-scopes-compact .neg-scope-tile__divide-btn { 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) 34px; }
.neg[data-testid] .neg-shell--rail-collapsed { grid-template-columns: minmax(0, 1fr) 34px !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: 50px; 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-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; }
/* 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%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* codex HIGH-2 + critique: inset the drawer trigger rail off the edge so it doesn't collide with
   the workbench's lower-right corner / scroll track; pull the clipped budget tab in from the edge. */
.neg .neg-drawertabs { right: 6px; bottom: 20px; }
.neg .neg-shell--rail-collapsed { grid-template-columns: minmax(0, 1fr) 44px; }
.neg[data-testid] .neg-shell--rail-collapsed { grid-template-columns: minmax(0, 1fr) 44px !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;
    }
}