/*!*************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./app/forge-design-tokens.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************/
/*
 * forge-design-tokens.css — CANONICAL FORGE_DESIGN runtime token layer
 * ----------------------------------------------------------------------------
 * Mission 2 (g-wb-m2, 2026-06-07). This is the single materialisation in CODE
 * of the FORGE_DESIGN governed design system spec at `.docs/design/FORGE_DESIGN.md`.
 * Until now FORGE_DESIGN existed only as a doc + two scattered CSS comments
 * (see 04_DESIGN_ASSET_LIBRARY_PLAN.md §0/§1 + FORGE_DESIGN.md "Known Gaps":
 * "Token convergence not yet executed in code"). This file closes that gap.
 *
 * NAMESPACE: `--fd-*` ("forge-design") is a NEW, additive namespace. It does
 * NOT override the pre-existing drifted token systems (`--forge-*` at
 * globals.css ~11536, `--ws-glass-*` at globals.css ~27, pepper-chat-p3.css,
 * .forge-v2-shell). Those remain untouched in this PR. Converging them onto
 * `--fd-*` (and reconciling the ~12-file asset-manifest drift) is the
 * documented Mission 2 follow-up migration — NOT a sweeping rewrite here.
 *
 * VALUES are the FORGE_DESIGN.md spec verbatim (that file wins on conflict).
 * Consumed type-safely from TSX via apps/workbench/app/lib/forgeDesignTokens.ts.
 * GOVERNED rule: one accent (molten amber). No second brand color. Black canvas
 * only (no light mode). Glass is a chrome material, never behind body text.
 */

:root {
  /* ── Canvas & glass (black-glass only; no light mode) ───────────────────── */
  --fd-color-canvas-black: #000000;
  --fd-color-glass-charcoal: #0a0a0a;
  --fd-color-glass-charcoal-2: #121212;
  --fd-color-glass-scrim: rgba(0, 0, 0, 0.72);

  /* ── Steel ladder (structure / dividers / secondary text) ───────────────── */
  --fd-color-steel-900: #161616;
  --fd-color-steel-700: #262626; /* hairline rim / 1px divider */
  --fd-color-steel-500: #3a3a3a; /* strong divider / input underline */
  --fd-color-steel-300: #8a8a8a; /* muted metadata, captions */
  --fd-color-steel-200: #b4b4b4; /* secondary body */

  /* ── Text on dark ───────────────────────────────────────────────────────── */
  --fd-color-on-dark: #f5f5f5;
  --fd-color-on-dark-soft: #cfcfcf;
  --fd-color-on-amber: #1a0d00;

  /* ── The single reserved accent — molten amber. Heat only. ──────────────── */
  --fd-color-molten-amber: #ff7a18;
  --fd-color-molten-amber-hot: #ffae3c;
  --fd-color-molten-amber-deep: #c2410c;
  --fd-color-molten-glow: rgba(255, 122, 24, 0.35);
  --fd-color-molten-glow-soft: rgba(255, 122, 24, 0.1); /* faint amber fill — gated/governed chip background */

  /* ── Semantic status (muted; never competes with amber) ─────────────────── */
  --fd-color-status-good: #4ea672;
  --fd-color-status-warn: #d4a017;
  --fd-color-status-missing: #b04a4a;
  --fd-color-link: #9fb8d6;

  /* ── Typography families (functional trinity) ───────────────────────────── */
  --fd-font-display: "Forge Display", "Saira", system-ui, sans-serif;
  --fd-font-body: Inter, system-ui, sans-serif;
  --fd-font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* ── Type scale (size · weight · line-height · tracking) ─────────────────── */
  --fd-font-size-display-xl: 64px;
  --fd-font-size-display-lg: 40px;
  --fd-font-size-display-md: 28px;
  --fd-font-size-title-md: 18px;
  --fd-font-size-body-md: 16px;
  --fd-font-size-body-sm: 14px;
  --fd-font-size-label-caps: 11px;
  --fd-font-size-telemetry: 13px;
  --fd-font-weight-display: 200;
  --fd-font-weight-body: 400;
  --fd-font-weight-label: 600;
  --fd-line-body: 1.55;
  --fd-tracking-label-caps: 1.5px;

  /* ── Radius ─────────────────────────────────────────────────────────────── */
  --fd-radius-none: 0px;
  --fd-radius-sm: 6px;
  --fd-radius-md: 12px; /* default card/panel radius */
  --fd-radius-lg: 18px;
  --fd-radius-pill: 9999px;

  /* ── Spacing (4px base unit) ────────────────────────────────────────────── */
  --fd-space-xxs: 4px;
  --fd-space-xs: 8px;
  --fd-space-sm: 12px;
  --fd-space-md: 16px;
  --fd-space-lg: 24px;
  --fd-space-xl: 40px;
  --fd-space-xxl: 64px;
  --fd-space-section: 96px;

  /* ── Component composites (recipe tokens) ───────────────────────────────── */
  --fd-glass-backdrop: blur(18px) saturate(120%); /* black-glass-card */
  --fd-glass-border: 1px solid var(--fd-color-steel-700);
  --fd-molten-focus-ring: 0 0 0 3px var(--fd-color-molten-glow);
}

/*!********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./app/pepper-chat-p3.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************/
/* ============================================================
   Workbench P3 — Pepper chat-feel rebuild (2026-05-21)
   Pipeline: workbench-p3-pepper-interaction-durable-intel-2026-05-21
   DCLA: L34 Workbench Surface + L02 Persona + L05 Knowledge Library
   --------------------------------------------------------------
   - pepper-bubble        user/assistant/system-error chat bubbles
   - pepper-event-card    collapsible tool/evidence card with chips
   - pepper-empty         four-tile durable-intelligence empty state
   ============================================================ */

/* Chat bubbles */
.pepper-bubble {
  position: relative;
  display: block;
  max-width: 92%;
  margin: 4px 0;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  background: rgba(11, 16, 16, 0.6) !important;
  border: 1px solid rgba(178, 205, 188, 0.18) !important;
}
.pepper-bubble--user {
  margin-left: auto;
  background: linear-gradient(135deg, rgba(120, 140, 255, 0.18), rgba(80, 100, 200, 0.14)) !important;
  border-color: rgba(180, 195, 255, 0.32) !important;
}
.pepper-bubble--assistant {
  margin-right: auto;
  background: linear-gradient(135deg, rgba(225, 218, 168, 0.10), rgba(24, 38, 39, 0.88)) !important;
  border-color: rgba(225, 218, 168, 0.28) !important;
}
.pepper-bubble--system-error {
  margin-right: auto;
  background: linear-gradient(135deg, rgba(220, 90, 90, 0.16), rgba(40, 12, 12, 0.66)) !important;
  border-color: rgba(220, 90, 90, 0.42) !important;
}
.pepper-bubble__role {
  display: block;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-faint, rgba(224, 234, 220, 0.66));
  margin-bottom: 2px;
}
.pepper-bubble__text {
  margin: 2px 0 0 !important;
  white-space: pre-wrap;
  color: rgba(244, 249, 239, 0.96);
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
}
.pepper-bubble__source {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  color: var(--fg-faint, rgba(224, 234, 220, 0.6));
}

/* Tool/evidence event card */
.pepper-event-card {
  display: block;
  margin: 6px 0;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(178, 205, 188, 0.22) !important;
  background: rgba(5, 9, 9, 0.5) !important;
}
.pepper-event-card--tool {
  border-left: 3px solid rgba(120, 200, 230, 0.55) !important;
}
.pepper-event-card--evidence {
  border-left: 3px solid rgba(225, 218, 168, 0.7) !important;
}
.pepper-event-card__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 4px;
}
.pepper-event-card__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pepper-event-card__label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  color: rgba(120, 200, 230, 0.95);
}
.pepper-event-card__time {
  font-size: 10px;
  color: var(--fg-faint, rgba(224, 234, 220, 0.6));
  letter-spacing: 0.04em;
}
.pepper-event-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.pepper-event-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  font-size: 10px;
  line-height: 1.4;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(224, 234, 220, 0.82);
}
.pepper-event-card__chip strong {
  font-weight: 700;
  color: var(--fg-faint, rgba(224, 234, 220, 0.62));
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pepper-event-card__chip em {
  font-style: normal;
  color: rgba(244, 249, 239, 0.96);
  font-weight: 600;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pepper-event-card__chip--role {
  background: rgba(120, 200, 230, 0.12);
  border-color: rgba(120, 200, 230, 0.32);
}
.pepper-event-card__chip--source-derived {
  background: rgba(120, 200, 230, 0.08);
}
.pepper-event-card__chip--source-read-only {
  background: rgba(120, 200, 230, 0.06);
}
.pepper-event-card__chip--source-planned {
  background: rgba(225, 175, 80, 0.14);
  border-color: rgba(225, 175, 80, 0.36);
}
.pepper-event-card__chip--source-fallback {
  background: rgba(220, 90, 90, 0.14);
  border-color: rgba(220, 90, 90, 0.38);
}
.pepper-event-card__chip--source-manual {
  background: rgba(180, 180, 180, 0.08);
}
.pepper-event-card__chip--authority {
  background: rgba(225, 218, 168, 0.08);
  border-color: rgba(225, 218, 168, 0.26);
}
.pepper-event-card__chip--tier {
  background: rgba(178, 205, 188, 0.08);
  border-color: rgba(178, 205, 188, 0.26);
}
.pepper-event-card__summary {
  margin: 4px 0 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: rgba(244, 249, 239, 0.94);
  font-weight: 500 !important;
}
.pepper-event-card__expand {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  background: transparent;
  border: 1px solid rgba(120, 200, 230, 0.38);
  border-radius: 4px;
  color: rgba(120, 200, 230, 0.95);
  cursor: pointer;
  margin-top: 2px;
}
.pepper-event-card__expand:hover {
  background: rgba(120, 200, 230, 0.08);
}
.pepper-event-card__body {
  margin: 6px 0 0;
  padding: 8px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 6px;
  color: rgba(244, 249, 239, 0.92);
  max-height: 360px;
  overflow-y: auto;
}

/* Four-tile durable-intelligence empty state */
.pepper-empty {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px !important;
  border: 1px solid rgba(225, 218, 168, 0.22) !important;
  border-radius: 10px !important;
  background:
    radial-gradient(circle at 18% -10%, rgba(225, 218, 168, 0.08), transparent 42%),
    linear-gradient(135deg, rgba(24, 38, 39, 0.55), rgba(5, 9, 9, 0.6)) !important;
}
.pepper-empty__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pepper-empty__eyebrow {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(225, 218, 168, 0.85);
}
.pepper-empty__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: rgba(252, 255, 249, 0.99);
  line-height: 1.3;
}
.pepper-empty__lede {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(224, 234, 220, 0.82);
}
.pepper-empty__evidence {
  font-size: 11px;
  color: rgba(225, 218, 168, 0.85);
}
.pepper-empty__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 720px) {
  .pepper-empty__grid {
    grid-template-columns: 1fr;
  }
}
.pepper-empty__tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(11, 16, 16, 0.62);
  border: 1px solid rgba(178, 205, 188, 0.22);
}
.pepper-empty__tile--kb {
  border-left: 3px solid rgba(225, 218, 168, 0.7);
}
.pepper-empty__tile--war-room {
  border-left: 3px solid rgba(255, 140, 90, 0.7);
}
.pepper-empty__tile--goldmine {
  border-left: 3px solid rgba(178, 205, 188, 0.55);
  background: rgba(11, 16, 16, 0.5);
}
.pepper-empty__tile--neuropath {
  border-left: 3px solid rgba(120, 200, 230, 0.7);
}
.pepper-empty__tile-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pepper-empty__tile-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint, rgba(224, 234, 220, 0.6));
  font-weight: 700;
}
.pepper-empty__tile-title {
  font-size: 13px;
  font-weight: 700;
  color: rgba(252, 255, 249, 0.99);
  line-height: 1.3;
}
.pepper-empty__tile-body {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(244, 249, 239, 0.92);
}
.pepper-empty__tile-meta {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  -moz-column-gap: 6px;
       column-gap: 6px;
  row-gap: 2px;
  font-size: 10px;
  color: var(--fg-faint, rgba(224, 234, 220, 0.62));
}
.pepper-empty__tile-meta > div {
  display: contents;
}
.pepper-empty__tile-meta dt {
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.pepper-empty__tile-meta dd {
  margin: 0;
  color: rgba(224, 234, 220, 0.82);
}
.pepper-empty__tile-action {
  display: flex;
  justify-content: flex-start;
  margin-top: 2px;
}
.pepper-empty__btn {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid rgba(178, 205, 188, 0.38);
  border-radius: 5px;
  background: transparent;
  color: rgba(224, 234, 220, 0.92);
  cursor: pointer;
}
.pepper-empty__btn:hover {
  background: rgba(178, 205, 188, 0.08);
}
.pepper-empty__btn--primary {
  border-color: rgba(225, 218, 168, 0.5);
  background: rgba(225, 218, 168, 0.08);
  color: rgba(252, 255, 249, 0.98);
}
.pepper-empty__foot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 6px;
  border-top: 1px solid rgba(178, 205, 188, 0.16);
}
.pepper-empty__foot-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(224, 234, 220, 0.6);
  font-weight: 700;
}
.pepper-empty__foot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pepper-empty__foot-note {
  margin: 4px 0 0;
  font-size: 11px;
  color: rgba(224, 234, 220, 0.66);
  line-height: 1.5;
}

/* ============================================================
   Workbench P4 (2026-05-21) — chat-loop visual attachment.
   Pipeline: workbench-p4-pepper-interaction-loop-2026-05-21.
   - Tool/evidence cards that follow a user bubble feel attached
     (subtler top margin + indent) instead of free-floating debug
     panels. The card still owns its own border, chips, and
     summary — this only adjusts proximity to the prior turn.
   - Assistant explanation bubble that introduces a routed card
     gets a thinner bottom edge so the card it leads into reads
     as a single unit instead of two disconnected blocks.
   ============================================================ */
.pepper-bubble--user + .pepper-event-card {
  margin-top: 2px;
  margin-left: 8%;
}
.pepper-bubble--assistant + .pepper-event-card {
  margin-top: 2px;
}
.pepper-bubble--assistant:has(+ .pepper-event-card) {
  margin-bottom: 0;
  border-bottom-left-radius: 4px !important;
}
/* When two tool/evidence cards stack, tighten the gap so a route
   that fans out (e.g. routes overview → routed result) reads as a
   sequence rather than two unrelated cards. */
.pepper-event-card + .pepper-event-card {
  margin-top: 3px;
}

/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/*
! tailwindcss v3.4.6 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: JetBrains Mono, ui-monospace, monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
  display: none;
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .container {
    max-width: 1536px;
  }
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.isolate {
  isolation: isolate;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.shrink {
  flex-shrink: 1;
}
.grow {
  flex-grow: 1;
}
.\!transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.resize {
  resize: both;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.border {
  border-width: 1px;
}
.font-mono {
  font-family: JetBrains Mono, ui-monospace, monospace;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
.italic {
  font-style: italic;
}
.ordinal {
  --tw-ordinal: ordinal;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.underline {
  text-decoration-line: underline;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-filter {
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600;700&display=swap');

/* =====================================================================
   WORKBENCH VISUAL-SYSTEM DESIGN TOKENS (2026-05-21)
   Pipeline: workbench-visual-system-normalization-2026-05-21
   DCLA: L34 Workbench Surface + L14 Meta-System

   Canonical design tokens for the layered glass / molten edge system.
   All glass surfaces (top hero band, left command spine, Build modal /
   surface panels, details sheet, bottom evidence strip, Pepper dock,
   Pepper Workspace / chat) consume these via var(--ws-*) so the entire
   visual system rebrands by editing this block only.

   Rule 13 (DCLA-mandatory at creation) — this token block maps to L34
   Workbench Surface (the substrate it tokenizes) and L14 Meta-System
   (it's a cross-cutting design-system primitive).

   Procedural assets in /assets/workbench-layered/glass-panel-layers/
   remain replaceable via the ComfyUI asset pipeline; tokens here drive
   composition/placement around those assets.
   ===================================================================== */
:root {
  /* --- Glass surface geometry --- */
  --ws-glass-radius: 10px;
  --ws-glass-radius-inner: 6px;
  --ws-glass-border-width: 5px;
  --ws-glass-blur: 14px;
  --ws-glass-saturate: 125%;

  /* --- Glass surface fill (translucent dark) --- */
  --ws-glass-bg:
    linear-gradient(180deg, rgba(20, 22, 26, 0.55) 0%, rgba(8, 10, 14, 0.78) 100%);
  --ws-glass-bg-strong:
    linear-gradient(180deg, rgba(24, 26, 32, 0.78) 0%, rgba(10, 12, 16, 0.88) 100%);
  --ws-glass-inner-card-bg: rgba(10, 14, 18, 0.55);

  /* --- Molten edge palette --- */
  --ws-molten-warm: rgba(255, 165, 65, 0.85);
  --ws-molten-rim: rgba(255, 165, 65, 0.32);
  --ws-molten-glow-outer: rgba(255, 140, 50, 0.12);
  --ws-molten-glow-strong: rgba(255, 140, 50, 0.22);
  --ws-molten-divider: rgba(255, 143, 58, 0.18);
  --ws-molten-divider-faint: rgba(255, 143, 58, 0.10);

  /* --- Bevel / inset highlights (the angled-glass illusion) --- */
  --ws-bevel-top: rgba(255, 200, 130, 0.10);
  --ws-bevel-corner: rgba(255, 235, 200, 0.35);
  --ws-bevel-edge: rgba(255, 200, 140, 0.14);
  --ws-bevel-rim-inset: rgba(255, 255, 255, 0.025);

  /* --- Depth shadows (clean: one soft warm glow + one lift) --- */
  --ws-shadow-lift: 0 14px 36px rgba(0, 0, 0, 0.55);
  --ws-shadow-lift-strong: 0 22px 48px rgba(0, 0, 0, 0.68);
  --ws-shadow-glow: 0 0 30px rgba(255, 140, 50, 0.14);
  --ws-shadow-glow-strong: 0 0 36px rgba(255, 140, 50, 0.22);

  /* --- Composite: clean glass surface recipe (Build-modal reference) --- */
  --ws-surface-shadow:
    var(--ws-shadow-glow),
    var(--ws-shadow-lift),
    inset 0 1px 0 var(--ws-bevel-top);
  --ws-surface-shadow-strong:
    var(--ws-shadow-glow-strong),
    var(--ws-shadow-lift-strong),
    inset 0 1px 0 var(--ws-bevel-top);

  /* --- Canonical clean border (NOT 9-slice; that read as flat orange line) --- */
  --ws-border: 1px solid var(--ws-molten-rim);

  /* --- Inner card / chip / button --- */
  --ws-card-bg: rgba(12, 16, 22, 0.62);
  --ws-card-border: 1px solid var(--ws-bevel-edge);
  --ws-card-shadow: inset 0 1px 0 var(--ws-bevel-top);
}

/* Forge Workbench v2: isolated Option 7 command center route. */
.forge-v2-shell {
  --v2-bg: #05070b;
  --v2-void: #090a0f;
  --v2-metal: rgba(11, 16, 23, 0.84);
  --v2-glass: rgba(15, 20, 28, 0.72);
  --v2-line: rgba(255, 143, 58, 0.34);
  --v2-line-cool: rgba(96, 231, 255, 0.26);
  --v2-orange: #ff792f;
  --v2-ember: #ffb45f;
  --v2-cyan: #66e8ff;
  --v2-purple: #a777ff;
  --v2-text: #f9f2e8;
  --v2-muted: rgba(249, 242, 232, 0.68);
  min-height: 100vh;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  overflow: hidden;
  color: var(--v2-text);
  background:
    radial-gradient(1100px 720px at 52% 12%, rgba(255, 98, 24, 0.18), transparent 60%),
    radial-gradient(800px 520px at 92% 20%, rgba(96, 231, 255, 0.10), transparent 62%),
    radial-gradient(680px 520px at 18% 92%, rgba(167, 119, 255, 0.11), transparent 58%),
    linear-gradient(180deg, #05070b 0%, #0b0b10 54%, #05060a 100%);
  font-family: var(--font-body);
}

.forge-v2-shell * {
  box-sizing: border-box;
}

.forge-v2-nav {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  overflow-y: auto;
  padding: 14px 10px;
  border-right: 1px solid rgba(255, 143, 58, 0.20);
  background:
    linear-gradient(180deg, rgba(255, 143, 58, 0.08), transparent 28%),
    rgba(5, 7, 11, 0.92);
  box-shadow: 16px 0 44px rgba(0, 0, 0, 0.38);
}

.forge-v2-mark {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 10px 8px;
  color: var(--v2-text);
  text-decoration: none;
  border: 1px solid rgba(255, 143, 58, 0.26);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 121, 47, 0.15), rgba(96, 231, 255, 0.06));
}

.forge-v2-mark-cube {
  width: 28px;
  height: 28px;
  border: 1px solid var(--v2-orange);
  transform: rotate(45deg);
  background:
    linear-gradient(135deg, rgba(255, 121, 47, 0.12), rgba(255, 180, 95, 0.28)),
    rgba(0, 0, 0, 0.28);
  box-shadow: 0 0 18px rgba(255, 121, 47, 0.45);
}

.forge-v2-mark strong,
.forge-v2-mark em {
  display: block;
  grid-column: 2;
  font-style: normal;
  line-height: 1.1;
}

.forge-v2-mark strong {
  font-family: var(--font-display);
  font-size: 15px;
}

.forge-v2-mark em {
  color: var(--v2-ember);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.forge-v2-nav section {
  margin-top: 18px;
}

.forge-v2-nav h2,
.panel-title span,
.forge-v2-topline span,
.forge-v2-brief > span {
  color: var(--v2-cyan);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.forge-v2-nav h2 {
  margin: 0 0 7px;
  padding: 0 8px;
  color: var(--v2-ember);
}

.forge-v2-nav section a {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 33px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: rgba(249, 242, 232, 0.78);
  text-decoration: none;
  font-size: 12px;
}

.forge-v2-nav section a span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--v2-cyan);
  border: 1px solid rgba(96, 231, 255, 0.20);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.20);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
}

.forge-v2-nav section a:hover,
.forge-v2-nav section a.active {
  color: #fff;
  border-color: rgba(255, 143, 58, 0.32);
  background: rgba(255, 121, 47, 0.10);
  box-shadow: 0 0 18px rgba(255, 121, 47, 0.12) inset;
}

.forge-v2-operator {
  margin-top: 24px;
  padding: 11px;
  border: 1px solid rgba(255, 143, 58, 0.24);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.24);
}

.forge-v2-operator span,
.forge-v2-operator strong,
.forge-v2-operator em {
  display: block;
}

.forge-v2-operator span {
  color: var(--v2-ember);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
}

.forge-v2-operator strong {
  margin-top: 5px;
  font-size: 12px;
}

.forge-v2-operator em {
  margin-top: 3px;
  color: var(--v2-muted);
  font-size: 11px;
  font-style: normal;
}

.forge-v2-command {
  min-width: 0;
  max-height: 100vh;
  overflow-y: auto;
  padding: 16px;
}

.forge-v2-topline {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.forge-v2-topline h1 {
  margin: 5px 0 0;
  color: #fff6ec;
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 0 28px rgba(255, 121, 47, 0.28);
}

.forge-v2-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.forge-v2-status span,
.forge-v2-checks strong,
.forge-v2-queue span,
.forge-v2-lanes article > span {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.05);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.tone-ready { color: #63f3ae !important; }
.tone-blocked { color: #ff8b7c !important; }
.tone-review { color: #ffd15e !important; }
.tone-planned { color: #9cd4ff !important; }
.tone-watch { color: #bf9bff !important; }

.forge-v2-stage {
  position: relative;
  min-height: 500px;
  display: grid;
  grid-template-columns: minmax(210px, 0.58fr) minmax(520px, 1.7fr) minmax(230px, 0.68fr);
  gap: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 143, 58, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018) 42%, rgba(0, 0, 0, 0.34)),
    radial-gradient(circle at 52% 45%, rgba(255, 100, 24, 0.23), transparent 47%),
    rgba(5, 8, 13, 0.92);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 22px 70px rgba(0, 0, 0, 0.62),
    0 0 54px rgba(255, 98, 24, 0.16);
}

.forge-v2-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(circle at 52% 45%, black 0%, transparent 76%);
          mask-image: radial-gradient(circle at 52% 45%, black 0%, transparent 76%);
  pointer-events: none;
}

.forge-v2-brief,
.forge-v2-orbit,
.forge-v2-model {
  position: relative;
  z-index: 1;
}

.forge-v2-brief {
  align-self: center;
  padding: 22px 0 22px 22px;
}

.forge-v2-brief p {
  margin: 12px 0 18px;
  color: var(--v2-muted);
  font-size: 14px;
  line-height: 1.55;
}

.forge-v2-brief div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.forge-v2-brief b {
  padding: 5px 7px;
  border: 1px solid rgba(255, 143, 58, 0.28);
  border-radius: 5px;
  color: #ffd5a3;
  background: rgba(255, 121, 47, 0.08);
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
}

.forge-v2-orbit {
  min-height: 500px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.forge-v2-stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.72) 0 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 121, 47, 0.76) 0 1px, transparent 1px);
  background-size: 69px 61px, 121px 97px;
  opacity: 0.25;
  animation: v2StarDrift 18s linear infinite;
}

.forge-v2-core {
  position: relative;
  z-index: 4;
  width: 246px;
  height: 246px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 27%, rgba(255, 239, 177, 0.95), rgba(255, 140, 45, 0.74) 15%, transparent 25%),
    radial-gradient(circle at 50% 53%, rgba(255, 98, 24, 0.74), rgba(92, 18, 14, 0.82) 38%, #0a0b10 74%),
    linear-gradient(135deg, #263040, #07080c);
  box-shadow:
    -42px -26px 70px rgba(111, 183, 255, 0.24) inset,
    24px 18px 52px rgba(0,0,0,0.74) inset,
    0 0 48px rgba(255, 94, 24, 0.82),
    0 0 134px rgba(255, 90, 20, 0.38);
  animation: v2CorePulse 4.8s ease-in-out infinite;
}

.forge-v2-core::before,
.forge-v2-core::after,
.forge-v2-core i {
  content: "";
  position: absolute;
  inset: -24%;
  background:
    linear-gradient(23deg, transparent 44%, rgba(255, 198, 94, 0.64) 47%, transparent 50%),
    linear-gradient(108deg, transparent 42%, rgba(255, 105, 24, 0.72) 45%, transparent 48%),
    linear-gradient(160deg, transparent 52%, rgba(255, 77, 27, 0.54) 55%, transparent 58%);
  opacity: 0.62;
}

.forge-v2-core::after {
  inset: 0;
  background: radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.18), transparent 24%);
  opacity: 1;
}

.forge-v2-core strong {
  position: relative;
  z-index: 2;
  color: rgba(17, 6, 5, 0.78);
  font-family: var(--font-display);
  font-size: 62px;
  font-weight: 800;
}

.forge-v2-ring,
.forge-v2-energy {
  position: absolute;
  z-index: 2;
  border-radius: 50%;
  pointer-events: none;
}

.forge-v2-ring {
  border: 1px solid var(--v2-line);
  box-shadow: 0 0 28px rgba(255, 106, 31, 0.22);
}

.ring-a { width: 660px; height: 205px; transform: rotate(-7deg); }
.ring-b { width: 710px; height: 225px; border-color: var(--v2-line-cool); transform: rotate(12deg); }
.ring-c { width: 590px; height: 176px; border-color: rgba(167, 119, 255, 0.28); transform: rotate(-27deg); }

.forge-v2-energy {
  width: 710px;
  height: 236px;
  border: 2px solid transparent;
  border-top-color: rgba(255, 143, 58, 0.58);
  filter: drop-shadow(0 0 12px rgba(255, 111, 34, 0.62));
  animation: v2OrbitSpin 13s linear infinite;
}

.energy-b {
  width: 610px;
  height: 205px;
  border-top-color: rgba(96, 231, 255, 0.42);
  animation-duration: 17s;
  animation-direction: reverse;
}

.forge-v2-station {
  position: absolute;
  z-index: 5;
  left: var(--x);
  top: var(--y);
  width: 116px;
  transform: translate(-50%, -50%);
  color: var(--v2-text);
  text-align: center;
  text-decoration: none;
}

.forge-v2-station span {
  width: 44px;
  height: 44px;
  margin: 0 auto 7px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(96, 231, 255, 0.64);
  border-radius: 8px;
  color: var(--v2-cyan);
  background: linear-gradient(135deg, rgba(96, 231, 255, 0.18), rgba(255, 121, 47, 0.10)), rgba(5, 12, 18, 0.84);
  box-shadow: 0 0 18px rgba(96, 231, 255, 0.28), 0 0 28px rgba(255, 111, 34, 0.16) inset;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
}

.forge-v2-station b {
  display: block;
  padding: 5px 7px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.46);
  color: var(--v2-text);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.forge-v2-station:hover span,
.forge-v2-station.selected span {
  border-color: var(--v2-orange);
  color: #ffd09c;
  box-shadow: 0 0 28px rgba(255, 121, 47, 0.62);
}

.forge-v2-model,
.forge-v2-panel,
.forge-v2-focus,
.forge-v2-lanes article,
.forge-v2-flow div,
.forge-v2-surfaces a {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.018)), var(--v2-glass);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 18px 38px rgba(0,0,0,0.34);
  backdrop-filter: blur(14px);
}

.forge-v2-model {
  align-self: center;
  margin-right: 16px;
  padding: 14px;
}

.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.panel-title b {
  color: var(--v2-ember);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.forge-v2-model > strong {
  display: block;
  margin-top: 16px;
  color: var(--v2-cyan);
  font-family: var(--font-mono);
  font-size: 36px;
  line-height: 1;
}

.forge-v2-model p,
.forge-v2-authority-copy {
  color: var(--v2-muted);
  font-size: 12px;
  line-height: 1.45;
}

.forge-v2-network {
  position: relative;
  height: 112px;
  overflow: hidden;
  margin: 12px 0;
  border: 1px solid rgba(96, 231, 255, 0.14);
  border-radius: 7px;
  background: radial-gradient(circle at 72% 45%, rgba(96,231,255,0.15), transparent 44%), rgba(0,0,0,0.24);
}

.forge-v2-network i {
  position: absolute;
  left: calc((var(--i) * 37px) % 100%);
  top: calc((var(--i) * 23px) % 100%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--v2-cyan);
  box-shadow: 0 0 10px var(--v2-cyan);
}

.forge-v2-network i:nth-child(3n) {
  background: var(--v2-orange);
  box-shadow: 0 0 10px var(--v2-orange);
}

.forge-v2-model dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.forge-v2-model dl div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.forge-v2-model dt,
.forge-v2-model dd {
  margin: 0;
  color: var(--v2-muted);
  font-size: 11px;
}

.forge-v2-model dd {
  color: var(--v2-cyan);
  font-weight: 800;
}

.forge-v2-flow {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.forge-v2-flow div {
  min-height: 70px;
  padding: 9px;
}

.forge-v2-flow span {
  color: var(--v2-cyan);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
}

.forge-v2-flow strong {
  display: block;
  margin-top: 8px;
  color: #fff7ee;
  font-size: 12px;
}

.forge-v2-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.7fr 0.85fr;
  gap: 10px;
  margin-top: 10px;
}

.forge-v2-left-panels,
.forge-v2-center-panels,
.forge-v2-right-panels {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.forge-v2-panel,
.forge-v2-focus {
  padding: 13px;
}

.forge-v2-queue,
.forge-v2-logs {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.forge-v2-queue div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 42px;
  gap: 8px;
  align-items: center;
}

.forge-v2-queue strong {
  min-width: 0;
  overflow: hidden;
  color: var(--v2-text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forge-v2-queue time,
.forge-v2-logs time,
.forge-v2-logs b {
  color: var(--v2-muted);
  font-family: var(--font-mono);
  font-size: 10px;
}

.forge-v2-logs div {
  display: grid;
  grid-template-columns: 56px 38px minmax(0, 1fr);
  gap: 8px;
  color: var(--v2-muted);
  font-size: 12px;
}

.forge-v2-logs b {
  color: var(--v2-orange);
}

.forge-v2-chat-agents {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0;
}

.forge-v2-chat-agents div {
  min-height: 82px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 7px;
  background: rgba(0,0,0,0.24);
}

.forge-v2-chat-agents strong,
.forge-v2-chat-agents span {
  display: block;
}

.forge-v2-chat-agents strong {
  color: #fff7ee;
  font-size: 13px;
}

.forge-v2-chat-agents span {
  margin-top: 5px;
  color: var(--v2-muted);
  font-size: 11px;
  line-height: 1.38;
}

.forge-v2-chat {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.forge-v2-chat textarea {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 7px;
  background: rgba(0,0,0,0.30);
  color: var(--v2-text);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.45;
  padding: 9px;
}

.forge-v2-chat button {
  min-height: 36px;
  border: 1px solid rgba(255, 121, 47, 0.42);
  border-radius: 7px;
  background: rgba(255, 121, 47, 0.12);
  color: #ffd09c;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.forge-v2-lanes {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.forge-v2-lanes article {
  min-height: 132px;
  padding: 11px;
}

.forge-v2-lanes strong,
.forge-v2-lanes p,
.forge-v2-lanes em {
  display: block;
}

.forge-v2-lanes strong {
  margin-top: 8px;
  color: #fff7ee;
  font-size: 14px;
}

.forge-v2-lanes p,
.forge-v2-lanes em {
  margin: 5px 0 0;
  color: var(--v2-muted);
  font-size: 11px;
  line-height: 1.35;
}

.forge-v2-lanes em {
  color: var(--v2-cyan);
  font-style: normal;
}

.forge-v2-focus {
  border-color: rgba(255, 143, 58, 0.34);
  background:
    radial-gradient(circle at 6% 4%, rgba(255, 121, 47, 0.16), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.018)),
    var(--v2-glass);
}

.forge-v2-focus h2 {
  margin: 14px 0;
  color: #fff7ee;
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0;
}

.forge-v2-explainer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.forge-v2-explainer section {
  min-height: 132px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 7px;
  background: rgba(0,0,0,0.22);
}

.forge-v2-explainer h3 {
  margin: 0;
  color: var(--v2-cyan);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
}

.forge-v2-explainer p {
  margin: 7px 0 0;
  color: var(--v2-muted);
  font-size: 12px;
  line-height: 1.45;
}

.forge-v2-checks {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.forge-v2-checks div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.forge-v2-checks span {
  color: var(--v2-muted);
  font-size: 12px;
}

.forge-v2-surfaces {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.forge-v2-surfaces a {
  min-height: 136px;
  padding: 11px;
  color: inherit;
  text-decoration: none;
}

.forge-v2-surfaces span,
.forge-v2-surfaces strong,
.forge-v2-surfaces em {
  display: block;
}

.forge-v2-surfaces span {
  color: var(--v2-cyan);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.forge-v2-surfaces strong {
  margin: 10px 0 7px;
  color: #fff7ee;
  font-family: var(--font-display);
  font-size: 24px;
}

.forge-v2-surfaces em {
  color: var(--v2-muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
}

.forge-v2-memory {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 14px;
}

.forge-v2-memory strong {
  color: #fff7ee;
  font-size: 24px;
}

.forge-v2-memory span,
.forge-v2-memory b {
  color: var(--v2-muted);
  font-size: 12px;
}

.forge-v2-bars {
  height: 92px;
  display: flex;
  align-items: end;
  gap: 3px;
  margin-top: 12px;
  padding: 8px;
  border-radius: 7px;
  background: linear-gradient(180deg, transparent, rgba(255, 121, 47, 0.08));
}

.forge-v2-bars i {
  flex: 1;
  height: var(--bar);
  background: linear-gradient(180deg, #ffb45f, #ff5d1c 60%, rgba(255, 93, 28, 0.24));
  box-shadow: 0 0 10px rgba(255, 93, 28, 0.42);
}

.forge-v2-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.forge-v2-metrics div {
  min-height: 86px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 7px;
  background: rgba(0,0,0,0.20);
}

.forge-v2-metrics span,
.forge-v2-metrics em {
  display: block;
  color: var(--v2-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  font-style: normal;
  text-transform: uppercase;
}

.forge-v2-metrics strong {
  display: block;
  margin: 6px 0;
  color: #fff7ee;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
}

.forge-v2-authority {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 12px;
}

.forge-v2-authority span {
  min-height: 36px;
  padding: 8px;
  border: 1px solid rgba(255, 117, 117, 0.28);
  border-radius: 7px;
  background: rgba(255, 80, 80, 0.08);
  color: #ffb1a8;
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
}

@keyframes v2CorePulse {
  0%, 100% { transform: scale(1); filter: saturate(1); }
  50% { transform: scale(1.026); filter: saturate(1.18); }
}

@keyframes v2OrbitSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes v2StarDrift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 69px 61px, -121px 97px; }
}

@media (max-width: 1320px) {
  .forge-v2-shell {
    grid-template-columns: 164px minmax(0, 1fr);
  }
  .forge-v2-stage,
  .forge-v2-grid {
    grid-template-columns: 1fr;
  }
  .forge-v2-brief,
  .forge-v2-model {
    margin: 0;
    padding: 16px;
  }
  .forge-v2-orbit {
    min-height: 430px;
  }
  .forge-v2-flow {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .forge-v2-shell {
    grid-template-columns: 1fr;
    overflow: visible;
  }
  .forge-v2-nav {
    min-height: auto;
    max-height: 44vh;
  }
  .forge-v2-command {
    max-height: none;
    overflow: visible;
    padding: 10px;
  }
  .forge-v2-topline {
    flex-direction: column;
  }
  .forge-v2-status {
    justify-content: flex-start;
  }
  .forge-v2-lanes,
  .forge-v2-surfaces,
  .forge-v2-explainer {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .forge-v2-topline h1 {
    font-size: 25px;
  }
  .forge-v2-orbit {
    min-height: 380px;
  }
  .forge-v2-core {
    width: 172px;
    height: 172px;
  }
  .forge-v2-core strong {
    font-size: 44px;
  }
  .ring-a { width: 378px; height: 132px; }
  .ring-b { width: 410px; height: 146px; }
  .ring-c { width: 330px; height: 116px; }
  .forge-v2-energy {
    width: 410px;
    height: 146px;
  }
  .energy-b {
    width: 350px;
    height: 126px;
  }
  .forge-v2-station {
    width: 88px;
  }
  .forge-v2-station span {
    width: 36px;
    height: 36px;
  }
  .forge-v2-flow,
  .forge-v2-lanes,
  .forge-v2-surfaces,
  .forge-v2-explainer,
  .forge-v2-metrics,
  .forge-v2-chat-agents {
    grid-template-columns: 1fr;
  }
  .forge-v2-queue div,
  .forge-v2-logs div {
    grid-template-columns: 1fr;
  }
}

/* DaForgeLayer Workbench -- editorial-distinct theme per operator standing
 * rule 2026-05-01: "we need to stand out more and not look like we were
 * made from AI." Design moves: Space Grotesk display font, copper accent
 * counterpoint, dot-grid canvas texture, editorial headline rhythm, stamp-
 * style status pills, sliced-corner brand mark.
 */
:root {
  /* Sharper contrast palette per operator standing rule 2026-05-01:
   * "contrast needs to be sharper and color more bold and prominate."
   * Background pulled darker; foreground pushed to pure white; accents
   * pumped to higher saturation. */
  --bg: #131115;
  --bg-panel: #1f1d24;
  --bg-elev: #2a2730;
  --bg-deep: #0d0c10;
  --fg: #f5f2eb;
  --fg-bright: #ffffff;
  --fg-dim: #c8c4bc;
  --fg-faint: #a09b91;
  --fg-muted: #b8b4ab;
  --lavender: #b39df7;             /* bolder vivid violet */
  --lavender-hover: #d0baff;       /* brighter on hover */
  --lavender-soft: #3d3458;        /* deeper shadow band */
  --copper: #e8a85c;               /* more saturated golden copper */
  --copper-soft: #5a3f1f;
  --copper-bright: #f5cb7c;
  --success: #5fe6a5;              /* punchier mint */
  --success-bg: #1f4a3a;
  --warning: #ffc845;              /* vivid amber */
  --warning-bg: #4d3818;
  --info: #5fa3ff;                 /* electric blue */
  --info-bg: #1f3a5e;
  --danger: #ff7575;               /* sharper coral red */
  --danger-bg: #4a2424;
  --border: #4a4754;               /* brighter separators */
  --border-strong: #5d5868;
  --border-bright: #7a7385;
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Consolas', 'Menlo', monospace;
  --noise:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0);
}

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Editorial canvas -- subtle dot-grid layer over body for texture
 * (anti-AI-generic move; gives the workbench a designed feel) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--noise);
  background-size: 22px 22px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}
.app { position: relative; z-index: 1; }

/* Workbench shell layout: sidebar + main */
.app {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  background: var(--bg-deep);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 16px 0;
}

.workspace-switcher {
  margin: 0 14px 14px;
  padding: 14px 16px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.workspace-switcher:hover { border-color: var(--border-bright); }
.workspace-switcher .ws-label { font-weight: 600; color: var(--fg-bright); font-size: 16px; }
.workspace-switcher .ws-caret { color: var(--fg-faint); font-size: 14px; }

.sidebar-search {
  margin: 0 14px 20px;
  padding: 12px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--fg-dim);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar-search:hover { border-color: var(--border-bright); color: var(--fg); }
.sidebar-search .kbd {
  font-size: 12px;
  color: var(--fg-faint);
  background: var(--bg-panel);
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid var(--border);
}

.sidebar-section {
  margin: 0 0 12px;
}
.sidebar-section-label {
  padding: 6px 26px;
  font-size: 12px;
  color: var(--fg-faint);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 600;
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 26px;
  font-size: 16px;
  color: var(--fg-dim);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: all 0.15s;
}
.sidebar-item:hover { color: var(--fg); background: var(--bg-panel); }
.sidebar-item.active {
  color: var(--lavender);
  background: var(--lavender-soft);
  border-left-color: var(--lavender);
}
.sidebar-item .si-icon { width: 18px; display: inline-flex; justify-content: center; font-size: 16px; }

.sidebar-footer {
  margin-top: auto;
  padding: 16px;
  border-top: 1px solid var(--border);
}
.sidebar-footer .ws-name { font-size: 15px; color: var(--fg-bright); font-weight: 600; }
.sidebar-footer .ws-status { font-size: 13px; color: var(--fg-faint); margin-top: 4px; }

/* Main */
.main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.top-bar {
  background:
    linear-gradient(180deg, rgba(168,155,214,0.05) 0%, rgba(0,0,0,0) 100%),
    var(--bg-deep);
  border-bottom: 1px solid var(--border);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 18px rgba(0,0,0,0.32);
}
.top-bar-left {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
}
.top-bar .crumbs {
  font-size: 15px;
  color: var(--fg-dim);
  border-left: 1px solid var(--border);
  padding-left: 22px;
  letter-spacing: 0.2px;
  flex: 0 0 auto;
}
.top-bar .crumbs .crumb-current {
  color: var(--fg-bright);
  font-weight: 600;
  white-space: nowrap;
}
.top-bar-rail {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--fg-muted);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.top-bar-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.top-bar-stat {
  color: var(--fg-muted);
  font-size: 12px;
  letter-spacing: 0.3px;
}

.surface-source-row,
.workflow-honesty-note {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--fg-faint);
  font-size: 12px;
}

.surface-source-row {
  margin-top: 10px;
}

.workflow-honesty-note {
  margin: 8px 0 10px;
}

/* Brand block -- editorial wordmark with sliced-corner mark + copper-edged tag.
 * Per operator standing rule 2026-05-01: "stand out more and not look like
 * we were made from AI." Space Grotesk display, tighter tracking, geometric
 * mark, copper accent on tag for an editorial signature. */
.brand-block {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: relative;
}
.brand-mark {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 0;
  background: linear-gradient(135deg, var(--lavender) 0%, var(--copper) 100%);
  /* sliced-corner geometric tile */
  clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%);
  filter: drop-shadow(0 0 14px rgba(212,165,116,0.32));
}
.brand-mark::before {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--bg-deep);
  clip-path: polygon(0 0, 100% 0, 100% 68%, 68% 100%, 0 100%);
}
.brand-mark::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, var(--lavender) 0%, var(--copper-bright) 100%);
  transform: rotate(45deg);
  box-shadow: 0 0 12px rgba(212,165,116,0.6);
}
.brand-wordmark {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.6px;
  line-height: 1;
  font-family: var(--font-display);
  display: inline-flex;
  align-items: baseline;
  text-transform: none;
}
.brand-da {
  color: var(--fg-bright);
}
.brand-forge {
  color: var(--lavender);
}
.brand-layer {
  color: var(--copper);
  font-weight: 500;
}
.brand-tag {
  font-size: 10px;
  color: var(--copper);
  text-transform: uppercase;
  letter-spacing: 2.4px;
  font-weight: 700;
  padding: 4px 10px;
  border: 1px solid var(--copper-soft);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(212,165,116,0.08) 0%, rgba(212,165,116,0.02) 100%);
  margin-left: 6px;
  font-family: var(--font-display);
}

/* Buttons */
.btn-lavender {
  background: var(--lavender);
  color: #1c1b1f;
  border-radius: 10px;
  padding: 12px 22px;
  font-size: 16px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-lavender:hover { background: var(--lavender-hover); }

.btn-ghost {
  background: transparent;
  color: var(--fg-dim);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-ghost:hover { color: var(--fg); border-color: var(--border-bright); }
.btn-lavender:disabled,
.btn-ghost:disabled,
.task-action:disabled {
  opacity: 0.58;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
.btn-lavender:disabled:hover,
.btn-ghost:disabled:hover,
.task-action:disabled:hover {
  color: inherit;
  border-color: var(--border);
  transform: none !important;
}

/* Mission Control -- workflow LEFT + chat RIGHT (per operator standing rule
 * 2026-05-01: "put workflow back to the left side not on top").
 * Workflow column has Agents (top) + Inbox (under). Chat panel takes the rest.
 */
.mission-layout {
  flex: 1;
  display: grid;
  grid-template-columns: 320px 1fr;
  background: var(--bg);
  overflow: hidden;
  min-height: 0;
}

.workflow-top {
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  padding: 18px 16px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.workflow-section-label {
  font-size: 11px;
  color: var(--fg-faint);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 600;
  margin-bottom: 8px;
}
.agent-activity-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 0;
  padding: 10px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.inbox-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.inbox-row .task-card {
  margin-bottom: 0;
}

/* Chat panel -- the primary driver. ChatGPT/Claude pattern: centered
 * max-width conversation, flat-text bubbles (no heavy cards), big rounded
 * input bar at bottom centered.
 */
.chat-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}
.chat-conversation {
  flex: 1;
  overflow-y: auto;
  padding: 40px 48px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.chat-conversation > * {
  width: 100%;
  max-width: 800px;
}
.chat-conversation .pepper-bubble + .pepper-bubble {
  margin-top: 20px;
}
.chat-input-wrap {
  background: var(--bg);
  padding: 16px 48px 28px;
  display: flex;
  justify-content: center;
}
.chat-input-wrap form {
  width: 100%;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  padding: 14px 18px 12px;
  transition: border-color 0.15s;
}
.chat-input-wrap form:focus-within {
  border-color: var(--lavender);
}
.chat-input {
  width: 100%;
  background: transparent;
  border: none;
  padding: 4px 2px;
  color: var(--fg);
  font-size: 17px;
  font-family: inherit;
  line-height: 1.55;
  resize: none;
  outline: none;
  min-height: 28px;
  max-height: 200px;
}
.chat-input::-moz-placeholder { color: var(--fg-faint); }
.chat-input::placeholder { color: var(--fg-faint); }
.chat-input-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.chat-input-hint {
  font-size: 13px;
  color: var(--fg-muted);
}
.chat-input-meta .btn-lavender {
  padding: 8px 18px;
  font-size: 14px;
  border-radius: 999px;
}

/* Live agent activity row in chat -- compact single-line strip */
.agent-activity-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
  padding: 8px 12px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 10px;
}
/* Agent chip -- layer-pill aesthetic (top-color border + glossy gradient + hover lift)
 * matching Hive Mind theme per operator standing rule 2026-05-01. */
.agent-chip-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  border: 1px solid var(--border);
  border-top: 3px solid var(--lavender);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.04) 100%),
    var(--bg-elev);
  box-shadow: 0 4px 12px rgba(0,0,0,0.22), 0 1px 0 rgba(255,255,255,0.04) inset;
}
.agent-chip-mini:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.36), 0 1px 0 rgba(255,255,255,0.07) inset;
  border-color: var(--border-bright);
}
.agent-chip-mini .agent-chip-initial {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.32);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  position: relative;
}
.agent-chip-mini .agent-chip-initial::after {
  content: "";
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fg-faint);
  border: 2px solid var(--bg-elev);
  box-sizing: content-box;
}
.agent-chip-mini[data-state="working"] .agent-chip-initial::after,
.agent-chip-mini[data-state="spawning"] .agent-chip-initial::after {
  background: var(--warning);
  animation: pulse 1.4s ease-in-out infinite;
}
.agent-chip-mini[data-state="done"] .agent-chip-initial::after { background: var(--success); }
.agent-chip-mini[data-state="failed"] .agent-chip-initial::after { background: var(--danger); }
.agent-chip-mini[data-state="idle"] .agent-chip-initial::after { background: var(--fg-faint); }
.agent-chip-mini .pill {
  padding: 1px 7px !important;
  font-size: 10px !important;
}

/* Agent fly-out drawer */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.drawer-overlay.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 540px;
  z-index: 50;
  background: var(--bg-deep);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.5);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-header {
  padding: 22px 26px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drawer-body {
  padding: 22px 26px;
  overflow-y: auto;
  flex: 1;
}
.drawer-close {
  background: none;
  border: 1px solid var(--border-strong);
  color: var(--fg-dim);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
}
.drawer-close:hover { color: var(--fg); border-color: var(--border-bright); }

/* Pepper conversation bubbles -- flat ChatGPT/Claude style; no heavy borders */
.pepper-bubble {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.pepper-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lavender) 0%, var(--lavender-hover) 100%);
  color: #1c1b1f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}
.pepper-body {
  flex: 1;
  background: transparent;
  border: none;
  padding: 4px 0;
  color: var(--fg);
  font-size: 17px;
  line-height: 1.7;
}
.pepper-bubble.dim .pepper-body {
  color: var(--fg-dim);
  font-size: 16px;
}

/* Old kanban CSS -- preserved for future expand-view modal */
.kanban {
  flex: 1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(320px, 1fr);
  gap: 14px;
  padding: 20px 28px;
  overflow-x: auto;
  background: var(--bg);
}

.column {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  min-height: 440px;
}
.column-header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}
.column-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--lavender-soft);
  color: var(--lavender);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}
.column-title { font-weight: 600; color: var(--fg-bright); font-size: 16px; }
.column-status {
  font-size: 11px;
  color: var(--success);
  display: flex;
  align-items: center;
  gap: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
}
.column-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  animation: pulse 2s ease-in-out infinite;
}
.column-count {
  margin-left: auto;
  font-size: 14px;
  color: var(--fg-faint);
}
.column-body {
  padding: 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.column-empty {
  text-align: center;
  color: var(--fg-faint);
  font-size: 14px;
  padding: 32px 0;
  font-style: italic;
}

.task-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  font-size: 15px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.task-card:hover { border-color: var(--border-bright); }
.task-meta {
  font-size: 11px;
  color: var(--fg-faint);
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.task-title { color: var(--fg); margin-bottom: 10px; line-height: 1.5; }
.task-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.task-action {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 5px 10px;
  color: var(--fg-dim);
  cursor: pointer;
  font-size: 13px;
}
.task-action:hover { color: var(--fg); border-color: var(--border-bright); }
.task-action.primary {
  background: var(--lavender-soft);
  color: var(--lavender);
  border-color: var(--lavender-soft);
}

/* System tracker (live GPU/CPU/AI status) -- top-bar right side */
.system-tracker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 12px;
  color: var(--fg-dim);
}
.sys-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sys-stat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sys-stat-dot.gpu-active { background: var(--success); animation: pulse 2s ease-in-out infinite; }
.sys-stat-dot.gpu-idle   { background: var(--lavender); }
.sys-stat-dot.cloud-off  { background: var(--fg-faint); }
.sys-stat-dot.cloud-on   { background: var(--info); animation: pulse 2s ease-in-out infinite; }
.sys-stat-dot.cpu        { background: var(--success); }
.sys-stat-label { font-weight: 600; color: var(--fg); }
.sys-stat-value { color: var(--fg-dim); }
.sys-stat-sep { color: var(--fg-faint); }

/* Role switcher (top-bar) */
.role-switcher {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  margin-right: 12px;
}
.role-switcher-label {
  font-size: 11px;
  color: var(--fg-faint);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 0 8px;
}
.role-tab {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-dim);
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
}
.role-tab:hover { color: var(--fg); background: var(--bg-elev); }
.role-tab.active {
  background: var(--lavender-soft);
  color: var(--lavender);
}

/* Pills — DEPRECATED (Mission 2 chip consolidation, g-wb-m2-pill 2026-06-07).
   Canonical chip is WorkbenchStatusChip (.wb-status-chip, --fd-* token-backed —
   shell-primitives.tsx). These `.pill`/`.pill-*` recipes use the legacy non-FORGE
   --success/--warning/--info/--danger/--lavender tokens. Migrate consumers per
   family onto WorkbenchStatusChip, then delete this block at zero consumers.
   Migrated: projects/projectChrome.tsx + actions/actionChrome.tsx + AutomationReadinessPanel
   + AgentsPage + MissionControl + KnowledgeIndexPanel + OsSystemMapPanel (StatePill/VerifyChip + goldmine-CP queue summary + evidence-packets summary + runner/connector/broker gate-status header badges + compact gate-table met/unmet rows + model-router routing-mode pills + model-router header badges + mock-plan display pills + credential-ceremony status pills) status pills.
   Deferred (behavior-tied <button> + dynamic colors): RoutingModeBadge, SafetyStateBadge, KnowledgeIndexPanel
   stage-filter toggle + Copy-handoff button (+ its .dc-pill anchor); OsSystemMapPanel ~45 remaining inline sub-panel
   status pills (first-call/route-policy/evidence-per-packet-detail/allow-forbid scope-lists/credential-ceremony sub-lists [no-token-surfaces + C8-acceptance-criteria]/etc.) + capability-state cls + .dc-pill (future per-sub-panel checkpoints). Remaining: other scattered .pill consumers (DomainChip keeps .pill as a domain
   label). Do NOT add new .pill consumers. */
.pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.pill-active { background: var(--success-bg); color: var(--success); }
.pill-paused { background: var(--warning-bg); color: var(--warning); }
.pill-info { background: var(--info-bg); color: var(--info); }
.pill-danger { background: var(--danger-bg); color: var(--danger); }
.pill-lavender { background: var(--lavender-soft); color: var(--lavender); }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

/* Status dot */
.status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.status-dot.live { background: var(--success); animation: pulse 2s ease-in-out infinite; }
.status-dot.idle { background: var(--fg-faint); }

/* Inputs */
.input {
  width: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--fg);
  font-size: 14px;
  transition: border-color 0.15s;
}
.input:focus { outline: none; border-color: var(--lavender); }
.input::-moz-placeholder { color: var(--fg-faint); }
.input::placeholder { color: var(--fg-faint); }

/* Editorial headings -- Space Grotesk display + tighter tracking + accent rule */
h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: -0.4px;
}
h1 { font-size: 26px; font-weight: 700; }
h2 { font-size: 20px; font-weight: 700; }
h3 { font-size: 17px; font-weight: 600; }

.section-label {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--copper);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
}

/* Sidebar section labels: editorial-style with copper accent rule */
.sidebar-section-label {
  font-family: var(--font-display);
  color: var(--copper) !important;
  letter-spacing: 1.6px;
  font-weight: 700;
  position: relative;
}

/* Page titles + Hive Mind title use Space Grotesk too */
.page-title, .hive-mind-title {
  font-family: var(--font-display);
  letter-spacing: -0.6px;
}

/* Hive Mind flow visualizer */
.flow-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  align-items: start;
}
@media (max-width: 1280px) {
  .flow-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .flow-grid { grid-template-columns: 1fr; }
}
.flow-layer {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 180px;
}
.flow-layer-label {
  font-size: 11px;
  color: var(--fg-faint);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 600;
  margin-bottom: 4px;
}
.flow-nodes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.flow-node {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--fg-dim);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
}
.flow-node:hover { border-color: var(--border-bright); color: var(--fg); }
.flow-node.inline {
  display: inline-flex;
  padding: 4px 10px;
  font-size: 12px;
  margin-right: 6px;
}
.flow-node-state-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.flow-node-active .flow-node-state-dot { background: var(--lavender); animation: pulse 2s ease-in-out infinite; }
.flow-node-active { border-color: var(--lavender); color: var(--fg); }
.flow-node-warm   .flow-node-state-dot { background: var(--lavender); }
.flow-node-warm   { color: var(--fg); }
.flow-node-idle   .flow-node-state-dot { background: var(--fg-faint); }
.flow-node-broken .flow-node-state-dot { background: var(--danger); }
.flow-node-broken { border-style: dashed; border-color: var(--danger); color: var(--danger); }
.flow-node-disconnected .flow-node-state-dot { background: var(--warning); }
.flow-node-disconnected { border-style: dashed; border-color: var(--warning); color: var(--warning); }
.flow-node-label { flex: 1; font-weight: 500; }

/* Hive Mind legend (top) + inspector panel (bottom) */
.flow-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  padding: 10px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 12px;
}
.flow-legend-label {
  font-size: 11px;
  color: var(--fg-faint);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 600;
  margin-right: 6px;
}
.flow-inspector {
  margin-top: 24px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.flow-inspector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border);
}
.flow-inspector-body {
  padding: 20px 22px;
}

/* ====================================================================
 * Hive Mind page (React Flow refactor) -- strong layer indicators +
 * glossy canvas. Per operator standing rule 2026-05-01: "input routing
 * spine hooke subtrat outpoine needs strong visuals and inditicators."
 * ==================================================================== */

.hive-mind-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 22px 28px;
  overflow-y: auto;
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(168,155,214,0.05) 0%, transparent 60%),
    var(--bg);
}
.hive-mind-header { margin-bottom: 18px; display: flex; justify-content: space-between; align-items: flex-end; }
.hive-mind-title {
  color: var(--fg-bright);
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -0.3px;
}
.hive-mind-subtitle {
  color: var(--fg-faint);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0;
}
.hive-mind-desc { color: var(--fg-dim); font-size: 14px; max-width: 720px; }

/* Layer indicator strip -- bold colored pills above the React Flow canvas.
 * Each pill carries the layer color, icon, label, and active/total count.
 * This is the answer to "needs strong visuals and indicators." */
.layer-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 1280px) { .layer-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .layer-strip { grid-template-columns: repeat(2, 1fr); } }
.layer-pill {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.04) 100%),
    var(--bg-panel);
  border: 1px solid var(--border);
  border-top: 4px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  position: relative;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18), 0 1px 0 rgba(255,255,255,0.04) inset;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.layer-pill:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,0.32), 0 1px 0 rgba(255,255,255,0.06) inset; }
.layer-pill-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.layer-pill-icon { font-size: 18px; font-weight: 700; }
.layer-pill-label {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
}
.layer-pill-count {
  margin-left: auto;
  font-size: 13px;
  color: var(--fg-bright);
  font-weight: 700;
  background: rgba(0,0,0,0.32);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
}
.layer-pill-desc {
  font-size: 12px;
  color: var(--fg-dim);
  letter-spacing: 0.2px;
}

/* React Flow canvas wrapper + custom node styles */
.rf-canvas-wrap {
  flex: 1;
  min-height: 480px;
  background:
    radial-gradient(800px 400px at 50% 100%, rgba(168,155,214,0.06) 0%, transparent 70%),
    var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 26px rgba(0,0,0,0.32), 0 1px 0 rgba(255,255,255,0.04) inset;
}
.rf-canvas-wrap .react-flow__renderer { background: transparent; }
.rf-canvas-wrap .react-flow__attribution { display: none; }

.rf-node {
  width: 220px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.04) 100%),
    var(--bg-panel);
  border: 1px solid var(--border);
  border-top: 3px solid var(--lavender);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--fg);
  box-shadow: 0 4px 12px rgba(0,0,0,0.32), 0 1px 0 rgba(255,255,255,0.04) inset;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.rf-node:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.42), 0 1px 0 rgba(255,255,255,0.07) inset;
}
.rf-node-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.rf-node-label {
  font-weight: 600;
  color: var(--fg-bright);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.rf-node-state-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.32);
  color: var(--fg-dim);
  border: 1px solid var(--border);
}
.rf-node-state-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fg-faint);
  flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--bg-panel);
}
.rf-node-active .rf-node-state-dot { background: var(--lavender); animation: pulse 2s ease-in-out infinite; box-shadow: 0 0 0 2px var(--bg-panel), 0 0 12px rgba(168,155,214,0.6); }
.rf-node-warm   .rf-node-state-dot { background: var(--lavender); }
.rf-node-idle   .rf-node-state-dot { background: var(--fg-faint); }
.rf-node-broken .rf-node-state-dot { background: var(--danger); animation: pulse 1.6s ease-in-out infinite; }
.rf-node-disconnected .rf-node-state-dot { background: var(--warning); }

.rf-node-active { border-color: var(--lavender); }
.rf-node-active .rf-node-state-pill { color: var(--lavender); background: rgba(168,155,214,0.16); border-color: var(--lavender); }
.rf-node-warm .rf-node-state-pill   { color: var(--lavender); background: rgba(168,155,214,0.10); }
.rf-node-broken { border-color: var(--danger); border-style: solid; }
.rf-node-broken .rf-node-state-pill { color: var(--danger); background: rgba(238,157,157,0.12); border-color: var(--danger); }
.rf-node-disconnected { border-color: var(--warning); border-style: dashed; }
.rf-node-disconnected .rf-node-state-pill { color: var(--warning); background: rgba(244,205,110,0.12); border-color: var(--warning); }

/* Focused node -- glow halo when selected via click-to-focus */
.rf-node-focused {
  box-shadow:
    0 0 0 2px var(--lavender),
    0 0 24px rgba(168,155,214,0.55),
    0 8px 22px rgba(0,0,0,0.42),
    0 1px 0 rgba(255,255,255,0.07) inset !important;
  border-color: var(--lavender) !important;
}

.rf-handle { width: 6px !important; height: 6px !important; background: var(--border-strong) !important; border: none !important; }

.rf-controls.react-flow__controls {
  background: var(--bg-panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.32) !important;
}
.rf-controls .react-flow__controls-button {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--fg-dim) !important;
  fill: var(--fg-dim) !important;
}
.rf-controls .react-flow__controls-button:hover {
  background: var(--bg-elev) !important;
  color: var(--lavender) !important;
  fill: var(--lavender) !important;
}
.rf-minimap.react-flow__minimap {
  background: var(--bg-panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
}

/* Top-bar legend pills (for hive-mind page) -- glossy strip aligned with system tracker */
.flow-legend {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.04) 100%),
    var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 11px;
  margin: 0;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
.flow-legend-label {
  font-size: 10px;
  color: var(--fg-faint);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 700;
  margin-right: 4px;
}
.flow-legend-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.18);
  color: var(--fg-dim);
}
.flow-legend-pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fg-faint);
  display: inline-block;
}
.flow-legend-active { color: var(--lavender); border-color: var(--lavender); }
.flow-legend-active .dot { background: var(--lavender); }
.flow-legend-warm   { color: var(--lavender); }
.flow-legend-warm   .dot { background: var(--lavender); opacity: 0.7; }
.flow-legend-idle   .dot { background: var(--fg-faint); }
.flow-legend-broken { color: var(--danger); border-color: var(--danger); }
.flow-legend-broken .dot { background: var(--danger); }
.flow-legend-disconnected { color: var(--warning); border-color: var(--warning); }
.flow-legend-disconnected .dot { background: var(--warning); }

/* ====================================================================
 * Pipelines page
 * ==================================================================== */

.page-pipelines, .page-skills {
  flex: 1;
  padding: 22px 28px;
  overflow-y: auto;
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(168,155,214,0.04) 0%, transparent 60%),
    var(--bg);
}
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 18px;
  gap: 16px;
}
.page-title {
  color: var(--fg-bright);
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -0.3px;
}
.page-desc { color: var(--fg-dim); font-size: 14px; max-width: 760px; }

.pipeline-filter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
.pipeline-filter-tab {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-dim);
  border-radius: 7px;
  cursor: pointer;
  background: transparent;
  border: none;
  text-transform: capitalize;
  transition: all 0.15s;
}
.pipeline-filter-tab:hover { color: var(--fg); background: var(--bg-elev); }
.pipeline-filter-tab.active { background: var(--lavender-soft); color: var(--lavender); }

.pipeline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 14px;
}
.pipeline-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.04) 100%),
    var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22), 0 1px 0 rgba(255,255,255,0.04) inset;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.pipeline-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,0.38), 0 1px 0 rgba(255,255,255,0.07) inset; border-color: var(--border-bright); }
.pipeline-card.pipeline-active   { border-left: 3px solid var(--lavender); }
.pipeline-card.pipeline-warm     { border-left: 3px solid var(--lavender); border-left-color: rgba(168,155,214,0.6); }
.pipeline-card.pipeline-idle     { border-left: 3px solid var(--fg-faint); }
.pipeline-card.pipeline-broken   { border-left: 3px solid var(--danger); border-style: solid; }
.pipeline-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.pipeline-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pipeline-status-active { background: var(--lavender); animation: pulse 2s ease-in-out infinite; box-shadow: 0 0 8px rgba(168,155,214,0.6); }
.pipeline-status-warm   { background: var(--lavender); opacity: 0.8; }
.pipeline-status-idle   { background: var(--fg-faint); }
.pipeline-status-broken { background: var(--danger); animation: pulse 1.6s ease-in-out infinite; }
.pipeline-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg-bright);
  flex: 1;
}
.pipeline-stages {
  font-size: 18px;
  font-weight: 800;
  color: var(--lavender);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.pipeline-stages-suffix {
  font-size: 9px;
  font-weight: 600;
  color: var(--fg-faint);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-top: 2px;
}
.pipeline-card-desc { color: var(--fg-dim); font-size: 13px; line-height: 1.55; margin-bottom: 12px; }
.pipeline-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.pipeline-meta-item { display: inline-flex; flex-direction: column; gap: 2px; font-size: 12px; }
.pipeline-meta-label {
  font-size: 9px;
  color: var(--fg-faint);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}
.pipeline-meta-value { color: var(--fg); font-size: 12px; font-weight: 500; }

/* ====================================================================
 * Skills page
 * ==================================================================== */

.skill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}
.skill-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.04) 100%),
    var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22), 0 1px 0 rgba(255,255,255,0.04) inset;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.skill-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,0.38), 0 1px 0 rgba(255,255,255,0.07) inset; border-color: var(--border-bright); }
.skill-card.skill-active     { border-left: 3px solid var(--lavender); }
.skill-card.skill-draft      { border-left: 3px solid var(--warning); }
.skill-card.skill-deprecated { border-left: 3px solid var(--fg-faint); opacity: 0.7; }
.skill-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.skill-card-name {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 16px;
  font-weight: 700;
  color: var(--lavender);
}
.skill-card-desc { color: var(--fg-dim); font-size: 13px; line-height: 1.55; margin-bottom: 10px; }
.skill-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.skill-meta-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--fg-dim);
  border: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.skill-meta-tag.warn { color: var(--warning); border-color: var(--warning); background: rgba(244,205,110,0.08); }
.skill-meta-tag.ok   { color: var(--success); border-color: var(--success); background: rgba(141,224,185,0.08); }

/* ====================================================================
 * Glossy polish across the workbench -- subtle gradients on panels,
 * deeper shadows, smoother card edges. Per operator standing rule
 * 2026-05-01: "I also want a more poblisheed glossy looks to the entire
 * workbench."
 * ==================================================================== */

.sidebar {
  background:
    linear-gradient(180deg, rgba(168,155,214,0.04) 0%, transparent 30%),
    var(--bg-deep);
  box-shadow: 1px 0 0 rgba(255,255,255,0.03) inset, 4px 0 16px rgba(0,0,0,0.18);
}
.workspace-switcher {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.04) 100%),
    var(--bg-panel);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18), 0 1px 0 rgba(255,255,255,0.04) inset;
}
.sidebar-search {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0.03) 100%),
    var(--bg-elev);
  box-shadow: 0 2px 6px rgba(0,0,0,0.14), 0 1px 0 rgba(255,255,255,0.04) inset;
}
.btn-lavender {
  background: linear-gradient(180deg, #c0b5e6 0%, #a89bd6 100%);
  box-shadow: 0 4px 14px rgba(168,155,214,0.32), 0 1px 0 rgba(255,255,255,0.32) inset;
  text-shadow: 0 1px 0 rgba(255,255,255,0.2);
}
.btn-lavender:hover {
  background: linear-gradient(180deg, #d2c8ee 0%, #b3a6e0 100%);
  box-shadow: 0 6px 20px rgba(168,155,214,0.5), 0 1px 0 rgba(255,255,255,0.4) inset;
  transform: translateY(-1px);
}
.btn-ghost {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0.03) 100%),
    transparent;
}
.system-tracker {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.04) 100%),
    var(--bg-panel);
  box-shadow: 0 2px 8px rgba(0,0,0,0.22), 0 1px 0 rgba(255,255,255,0.04) inset;
}
.role-switcher {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.04) 100%),
    var(--bg-panel);
  box-shadow: 0 2px 8px rgba(0,0,0,0.22), 0 1px 0 rgba(255,255,255,0.04) inset;
}
.task-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0.03) 100%),
    var(--bg-elev);
  box-shadow: 0 2px 8px rgba(0,0,0,0.14), 0 1px 0 rgba(255,255,255,0.04) inset;
}
.column {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(0,0,0,0.04) 100%),
    var(--bg-panel);
  box-shadow: 0 4px 18px rgba(0,0,0,0.22), 0 1px 0 rgba(255,255,255,0.04) inset;
}
.workflow-top {
  background:
    linear-gradient(180deg, rgba(168,155,214,0.03) 0%, transparent 25%),
    var(--bg-panel);
  box-shadow: 1px 0 0 rgba(255,255,255,0.03) inset;
}
.chat-input-wrap form {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0.04) 100%),
    var(--bg-elev);
  box-shadow: 0 4px 14px rgba(0,0,0,0.22), 0 1px 0 rgba(255,255,255,0.04) inset;
}
.flow-inspector {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.04) 100%),
    var(--bg-panel);
  box-shadow: 0 6px 24px rgba(0,0,0,0.32), 0 1px 0 rgba(255,255,255,0.04) inset;
}

/* ====================================================================
 * Click-to-focus subgraph + gap analysis (operator standing rule
 * 2026-05-01: "the flow should update so we both can checck for gaps")
 * ==================================================================== */

.rf-canvas-wrap { position: relative; }
.rf-focus-indicator {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background:
    linear-gradient(180deg, rgba(168,155,214,0.16) 0%, rgba(0,0,0,0.32) 100%),
    var(--bg-panel);
  border: 1px solid var(--lavender);
  color: var(--fg-bright);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 8px 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 16px rgba(168,155,214,0.32);
}
.rf-focus-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lavender);
  animation: pulse 1.5s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(168,155,214,0.6);
}

.gap-analysis {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  background:
    linear-gradient(180deg, rgba(168,155,214,0.05) 0%, rgba(0,0,0,0.04) 100%),
    var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 12px;
}
.gap-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gap-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--copper);
}
.gap-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gap-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 5px;
  background: rgba(168,155,214,0.1);
  color: var(--lavender);
  border: 1px solid var(--lavender-soft);
}
.gap-empty {
  font-style: italic;
  color: var(--fg-faint);
  font-size: 12px;
}
.gap-warning {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--warning);
  background: rgba(244,205,110,0.08);
  border: 1px solid var(--warning);
  border-radius: 8px;
  padding: 8px 12px;
}

/* ====================================================================
 * Pipeline & Skill flow nodes -- React Flow custom nodes for the
 * Pipelines + Skills visualizations (operator standing rule 2026-05-01:
 * "pipelines need same visuals as hivemind ... so you can visual see
 * what they do").
 * ==================================================================== */

/* Pipeline header node -- left edge of each pipeline row */
.pipeline-header-node {
  width: 260px;
  background:
    linear-gradient(135deg, rgba(168,155,214,0.08) 0%, rgba(0,0,0,0.04) 100%),
    var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--lavender);
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.32), 0 1px 0 rgba(255,255,255,0.04) inset;
  color: var(--fg);
}
.pipeline-header-node.pipeline-active   { border-left-color: var(--lavender); }
.pipeline-header-node.pipeline-warm     { border-left-color: rgba(168,155,214,0.7); }
.pipeline-header-node.pipeline-idle     { border-left-color: var(--fg-faint); }
.pipeline-header-node.pipeline-broken   { border-left-color: var(--danger); border-color: var(--danger); }
.pipeline-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.pipeline-header-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-bright);
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pipeline-header-meta {
  font-size: 10px;
  color: var(--fg-faint);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pipeline-header-tag {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(212,165,116,0.1);
  color: var(--copper);
  border: 1px solid var(--copper-soft);
}

/* Pipeline stage node */
.pipeline-stage-node {
  min-width: 160px;
  max-width: 200px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.04) 100%),
    var(--bg-elev);
  border: 1px solid var(--border);
  border-top: 2px solid var(--lavender);
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--fg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.22), 0 1px 0 rgba(255,255,255,0.04) inset;
  transition: transform 0.15s, box-shadow 0.15s;
  cursor: grab;
}
.pipeline-stage-node:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.36), 0 1px 0 rgba(255,255,255,0.06) inset;
}
.pipeline-stage-active   { border-top-color: var(--lavender); }
.pipeline-stage-warm     { border-top-color: rgba(168,155,214,0.7); }
.pipeline-stage-idle     { border-top-color: var(--fg-faint); }
.pipeline-stage-broken   { border-top-color: var(--danger); border-color: var(--danger); border-style: dashed; }
.pipeline-stage-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-bright);
  letter-spacing: -0.1px;
  display: block;
}

/* Skill category node */
.skill-category-node {
  width: 220px;
  background:
    linear-gradient(135deg, rgba(168,155,214,0.06) 0%, rgba(0,0,0,0.04) 100%),
    var(--bg-panel);
  border: 1px solid var(--border);
  border-top: 4px solid var(--lavender);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.32), 0 1px 0 rgba(255,255,255,0.04) inset;
}
.skill-category-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.skill-category-icon {
  font-size: 18px;
  font-weight: 700;
}
.skill-category-label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
}
.skill-category-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-bright);
  background: rgba(0,0,0,0.32);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 10px;
}
.skill-category-desc {
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 0.2px;
}

/* Skill flow node */
.skill-flow-node {
  width: 250px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.04) 100%),
    var(--bg-elev);
  border: 1px solid var(--border);
  border-left: 3px solid var(--lavender);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.32), 0 1px 0 rgba(255,255,255,0.04) inset;
  cursor: grab;
  transition: transform 0.15s, box-shadow 0.15s;
}
.skill-flow-node:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.42), 0 1px 0 rgba(255,255,255,0.06) inset;
}
.skill-flow-node.skill-active     { border-left-color: var(--lavender); }
.skill-flow-node.skill-draft      { border-left-color: var(--warning); }
.skill-flow-node.skill-deprecated { border-left-color: var(--fg-faint); opacity: 0.65; }
.skill-flow-name {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--lavender);
  margin-bottom: 4px;
}
.skill-flow-desc {
  font-size: 11px;
  color: var(--fg-dim);
  line-height: 1.45;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.skill-flow-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.skill-flow-tags .skill-meta-tag,
.skill-flow-tags .pill {
  font-size: 9px;
  padding: 1px 6px;
}

/* ====================================================================
 * High-gloss polish layer (operator standing rule 2026-05-01: "I also
 * want an over all more glossy look"). Pushes all panel surfaces with:
 * - bright top-edge highlight (specular reflection)
 * - dual inset highlight (top white + bottom shadow)
 * - layered drop shadow (close + ambient)
 * - subtle linear-gradient sheen via ::before
 * - dramatic hover lift + glow shimmer
 * ==================================================================== */

/* Gradient sheen helper class -- applied via ::before pseudo-element on
 * any card-like surface for that liquid/glass look. */
.gloss-sheen {
  position: relative;
  overflow: hidden;
}
.gloss-sheen::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0.02) 12%,
      transparent 28%,
      transparent 72%,
      rgba(0,0,0,0.06) 100%);
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}
.gloss-sheen > * { position: relative; z-index: 1; }

/* Push the brand block gloss */
.brand-block {
  padding: 4px 10px 4px 4px;
}

/* Top bar with stronger gloss + soft underline glow */
.top-bar {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.06) 0%,
      rgba(255,255,255,0.02) 14%,
      rgba(168,155,214,0.04) 50%,
      rgba(0,0,0,0.04) 100%),
    var(--bg-deep) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 6px 20px rgba(0,0,0,0.42),
    0 1px 0 rgba(168,155,214,0.12) !important;
}

/* Sidebar with deeper ambient + brighter top edge */
.sidebar {
  background:
    linear-gradient(180deg,
      rgba(168,155,214,0.06) 0%,
      rgba(255,255,255,0.02) 8%,
      transparent 30%),
    var(--bg-deep) !important;
  box-shadow:
    1px 0 0 rgba(255,255,255,0.06) inset,
    -1px 0 0 rgba(0,0,0,0.32) inset,
    6px 0 22px rgba(0,0,0,0.32) !important;
}

/* Sidebar items get glassy hover with sweep */
.sidebar-item {
  position: relative;
  overflow: hidden;
}
.sidebar-item:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.06) 100%),
    var(--bg-panel) !important;
}
.sidebar-item.active {
  background:
    linear-gradient(180deg,
      rgba(168,155,214,0.18) 0%,
      rgba(168,155,214,0.06) 50%,
      rgba(168,155,214,0.04) 100%),
    var(--lavender-soft) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 0 22px rgba(168,155,214,0.16) inset;
}

.workspace-switcher,
.sidebar-search {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0.02) 18%,
      rgba(0,0,0,0.06) 100%),
    var(--bg-panel) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 3px 12px rgba(0,0,0,0.32) !important;
}

/* Layer pills get aggressive gloss + bright top accent */
.layer-pill {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0.02) 18%,
      rgba(0,0,0,0.04) 70%,
      rgba(0,0,0,0.10) 100%),
    var(--bg-panel) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 6px 20px rgba(0,0,0,0.32) !important;
}
.layer-pill:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.16) inset,
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 12px 32px rgba(0,0,0,0.52),
    0 0 24px rgba(168,155,214,0.16) !important;
}

/* React Flow nodes with full gloss treatment */
.rf-node,
.pipeline-header-node,
.pipeline-stage-node,
.skill-flow-node,
.skill-category-node {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0.02) 16%,
      rgba(0,0,0,0.04) 70%,
      rgba(0,0,0,0.12) 100%),
    var(--bg-panel) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 6px 18px rgba(0,0,0,0.42) !important;
}
.rf-node:hover,
.pipeline-header-node:hover,
.pipeline-stage-node:hover,
.skill-flow-node:hover,
.skill-category-node:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 0 0 1px rgba(255,255,255,0.05) inset,
    0 12px 28px rgba(0,0,0,0.55),
    0 0 22px rgba(168,155,214,0.20) !important;
  transform: translateY(-3px) !important;
}

.pipeline-stage-node,
.skill-flow-node {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.06) 0%,
      rgba(255,255,255,0.01) 18%,
      rgba(0,0,0,0.04) 100%),
    var(--bg-elev) !important;
}

/* System tracker / role switcher / legend / filter -- glass strip pattern */
.system-tracker,
.role-switcher,
.flow-legend,
.pipeline-filter {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.06) 0%,
      rgba(255,255,255,0.01) 18%,
      rgba(0,0,0,0.04) 100%),
    var(--bg-panel) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 3px 12px rgba(0,0,0,0.28) !important;
}

/* Buttons with full gloss + light sweep on hover */
.btn-lavender {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.36) 0%,
      rgba(255,255,255,0.08) 40%,
      transparent 60%,
      rgba(0,0,0,0.16) 100%),
    linear-gradient(135deg, var(--lavender-hover) 0%, var(--lavender) 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 0 0 1px rgba(255,255,255,0.12) inset,
    0 8px 22px rgba(168,155,214,0.42),
    0 2px 6px rgba(0,0,0,0.32) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.32);
}
.btn-lavender:hover {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.46) 0%,
      rgba(255,255,255,0.14) 40%,
      transparent 60%,
      rgba(0,0,0,0.20) 100%),
    linear-gradient(135deg, #d2c8ee 0%, var(--lavender-hover) 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 0 0 1px rgba(255,255,255,0.18) inset,
    0 12px 28px rgba(168,155,214,0.55),
    0 2px 6px rgba(0,0,0,0.32) !important;
  transform: translateY(-2px) !important;
}

.btn-ghost {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.04) 100%),
    rgba(0,0,0,0.18) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 2px 6px rgba(0,0,0,0.22) !important;
}
.btn-ghost:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0.04) 100%),
    var(--bg-elev) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 4px 12px rgba(0,0,0,0.32) !important;
  transform: translateY(-1px) !important;
}

.btn-lavender:disabled,
.btn-ghost:disabled,
.task-action:disabled {
  opacity: 0.58 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

.btn-lavender:disabled:hover,
.btn-ghost:disabled:hover,
.task-action:disabled:hover {
  color: inherit !important;
  border-color: var(--border) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Agent chips, task cards, columns -- pull glass treatment forward */
.agent-chip-mini,
.task-card,
.column,
.workflow-top {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.06) 0%,
      rgba(255,255,255,0.01) 18%,
      rgba(0,0,0,0.04) 100%),
    var(--bg-elev) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 4px 14px rgba(0,0,0,0.32) !important;
}
.agent-chip-mini:hover,
.task-card:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.14) inset,
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 8px 22px rgba(0,0,0,0.45) !important;
}

/* Chat input gets glass-morphism */
.chat-input-wrap form {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.06) 0%,
      rgba(255,255,255,0.01) 18%,
      rgba(0,0,0,0.06) 100%),
    var(--bg-elev) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 8px 24px rgba(0,0,0,0.42) !important;
  backdrop-filter: blur(12px);
}
.chat-input-wrap form:focus-within {
  border-color: var(--lavender);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.16) inset,
    0 0 0 1px rgba(168,155,214,0.4) inset,
    0 12px 32px rgba(0,0,0,0.55),
    0 0 28px rgba(168,155,214,0.22) !important;
}

/* Drawer / inspector get glass + light edge */
.drawer,
.flow-inspector {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.05) 0%,
      rgba(255,255,255,0.01) 16%,
      rgba(0,0,0,0.06) 100%),
    var(--bg-panel) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 0 0 1px rgba(255,255,255,0.02) inset,
    -8px 0 32px rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(12px);
}

/* React Flow canvas wrap with reflective top edge + ambient glow */
.rf-canvas-wrap {
  background:
    radial-gradient(800px 400px at 50% 100%, rgba(168,155,214,0.08) 0%, transparent 70%),
    radial-gradient(600px 300px at 50% 0%, rgba(212,165,116,0.04) 0%, transparent 60%),
    var(--bg-deep) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 12px 36px rgba(0,0,0,0.55) !important;
}

/* Pills sharpen with glass + inset highlight */
.pill {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 0 0 1px rgba(0,0,0,0.18) inset;
}

/* ====================================================================
 * Glow Bounce -- animated light spot bouncing back and forth along
 * the colored accent band. Operator standing rules 2026-05-01:
 * - "not orbit should be like a light bouncing back an forth on top
 *   the color itself"
 * - "the color highlighets need to be made bigger"
 * - "all color highlights should have this also slow down the speed"
 *
 * Two variants:
 *   .glow-bounce        -- top-border accent (Hive Mind layer pills,
 *                          state strips, category strips, RF nodes,
 *                          pipeline stages, skill categories)
 *   .glow-bounce-left   -- left-border accent (pipeline header rows,
 *                          skill instance cards)
 *
 * Per-element color via --glow-color inline style. Animation duration
 * 6s ease-in-out alternate (slow drift). Backwards-compat alias kept
 * for .glow-orbit (older layer-strip className).
 * ==================================================================== */

.glow-bounce, .glow-orbit {
  position: relative;
  isolation: isolate;
  /* WBV v2.1: 2px color band per WBV discipline (was 8px shorthand). */
  border-top-width: 2px !important;
  border-top-style: solid !important;
}
.glow-bounce::before, .glow-orbit::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 2px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 35%,
    rgba(255,255,255,0.85) 48%,
    rgba(255,255,255,1.0) 50%,
    rgba(255,255,255,0.85) 52%,
    transparent 65%,
    transparent 100%
  );
  background-size: 240% 100%;
  background-repeat: no-repeat;
  background-position: -70% 0;
  animation: glow-bounce-h 12s ease-in-out infinite alternate;
  animation-delay: var(--glow-delay, 0s);
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 1;
}
.glow-bounce::after, .glow-orbit::after {
  content: "";
  position: absolute;
  top: -18px;
  left: 0;
  right: 0;
  height: 22px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 40%,
    var(--glow-color, #b39df7) 50%,
    transparent 60%,
    transparent 100%
  );
  background-size: 240% 100%;
  background-repeat: no-repeat;
  background-position: -70% 0;
  animation: glow-bounce-h 12s ease-in-out infinite alternate;
  animation-delay: var(--glow-delay, 0s);
  filter: blur(8px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

@keyframes glow-bounce-h {
  0%   { background-position: -70% 0; }
  100% { background-position: 170% 0; }
}

/* Vertical variant for elements with left-border accents (pipeline header,
 * skill instance cards). Light bounces up-down along the left edge. */
.glow-bounce-left {
  position: relative;
  isolation: isolate;
  /* WBV v2.1: 2px color band per WBV discipline (was 8px shorthand). */
  border-left-width: 2px !important;
  border-left-style: solid !important;
}
.glow-bounce-left::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -2px;
  width: 2px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 35%,
    rgba(255,255,255,0.85) 48%,
    rgba(255,255,255,1.0) 50%,
    rgba(255,255,255,0.85) 52%,
    transparent 65%,
    transparent 100%
  );
  background-size: 100% 240%;
  background-repeat: no-repeat;
  background-position: 0 -70%;
  animation: glow-bounce-v 12s ease-in-out infinite alternate;
  animation-delay: var(--glow-delay, 0s);
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 1;
}
.glow-bounce-left::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -18px;
  width: 22px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 40%,
    var(--glow-color, #b39df7) 50%,
    transparent 60%,
    transparent 100%
  );
  background-size: 100% 240%;
  background-repeat: no-repeat;
  background-position: 0 -70%;
  animation: glow-bounce-v 12s ease-in-out infinite alternate;
  animation-delay: var(--glow-delay, 0s);
  filter: blur(8px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

@keyframes glow-bounce-v {
  0%   { background-position: 0 -70%; }
  100% { background-position: 0 170%; }
}

/* Per-node stagger comes from inline --glow-delay (set via glowDelay(id) in
 * page.tsx). Each node gets a unique phase offset so the highlights don't
 * sync up. The strip pills also get unique delays via inline style.
 *
 * Hover speeds bounce up + brightens halo */
.glow-bounce:hover::before, .glow-orbit:hover::before, .glow-bounce-left:hover::before { animation-duration: 4s; }
.glow-bounce:hover::after,  .glow-orbit:hover::after,  .glow-bounce-left:hover::after  { animation-duration: 4s; opacity: 0.8; }

/* ====================================================================
 * Phase 1A page surfaces -- Build New wizard, Memories, Usage, Settings,
 * Scheduled, War Room, Audit, Chat, Agents.
 * ==================================================================== */

.build-new-page {
  flex: 1;
  padding: 28px 32px;
  overflow-y: auto;
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(168,155,214,0.05) 0%, transparent 60%),
    var(--bg);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.build-new-progress-row {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 880px;
  margin: 0 auto;
  width: 100%;
}
.build-new-progress-track {
  flex: 1;
  height: 6px;
  background: var(--bg-panel);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.build-new-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--lavender) 0%, var(--copper) 100%);
  border-radius: 999px;
  transition: width 0.4s ease;
  box-shadow: 0 0 12px rgba(168,155,214,0.4);
}
.build-new-progress-label {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--fg-dim);
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.build-new-progress-label strong { color: var(--lavender); font-size: 16px; }
.build-new-tech-name {
  font-family: var(--font-mono);
  color: var(--copper);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
}
.build-new-card {
  max-width: 880px;
  margin: 0 auto;
  width: 100%;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.04) 100%),
    var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 12px 36px rgba(0,0,0,0.42);
}
.build-new-step-title {
  font-family: var(--font-display);
  color: var(--fg-bright);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.6px;
  margin-bottom: 8px;
}
.build-new-step-helper { color: var(--fg-dim); font-size: 15px; line-height: 1.6; margin-bottom: 22px; }
.build-new-input {
  width: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18) inset;
  resize: vertical;
}
.build-new-input:focus {
  outline: none;
  border-color: var(--lavender);
  box-shadow: 0 0 0 3px rgba(168,155,214,0.18), 0 2px 8px rgba(0,0,0,0.18) inset;
}
.build-new-choices { display: flex; flex-direction: column; gap: 10px; }
.build-new-choice {
  text-align: left;
  padding: 14px 18px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--fg);
  font-size: 15px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.15s;
}
.build-new-choice:hover { border-color: var(--border-bright); background: var(--bg-panel); }
.build-new-choice.selected {
  border-color: var(--lavender);
  background: rgba(168,155,214,0.08);
  color: var(--fg-bright);
  box-shadow: 0 0 0 2px rgba(168,155,214,0.18);
}
.build-new-actions { display: flex; gap: 12px; margin-top: 28px; align-items: center; }
.build-new-step-strip {
  max-width: 880px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 6px;
}
.build-new-step-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font-display);
}
.build-new-step-pill:hover { border-color: var(--border-bright); }
.build-new-step-pill.current {
  border-color: var(--lavender);
  background: rgba(168,155,214,0.08);
  box-shadow: 0 0 0 2px rgba(168,155,214,0.18);
}
.build-new-step-pill.answered:not(.current) { border-color: var(--success); }
.build-new-step-pill-num { font-size: 14px; font-weight: 700; color: var(--fg-dim); font-family: var(--font-mono); }
.build-new-step-pill.current .build-new-step-pill-num { color: var(--lavender); }
.build-new-step-pill.answered:not(.current) .build-new-step-pill-num { color: var(--success); }
.build-new-step-pill-name {
  font-size: 9px;
  color: var(--fg-faint);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.build-new-summary { max-width: 880px; margin: 0 auto; width: 100%; }
.build-new-summary-head { margin-bottom: 28px; text-align: center; }
.build-new-summary-pill {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.4px;
  color: var(--copper);
  background: rgba(212,165,116,0.08);
  border: 1px solid var(--copper-soft);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 14px;
}
.build-new-summary-title {
  font-family: var(--font-display);
  color: var(--fg-bright);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.8px;
  margin-bottom: 12px;
}
.build-new-summary-desc { color: var(--fg-dim); font-size: 16px; line-height: 1.65; max-width: 640px; margin: 0 auto; }
.build-new-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
@media (max-width: 800px) { .build-new-summary-grid { grid-template-columns: 1fr; } }
.build-new-summary-card {
  display: flex;
  gap: 14px;
  padding: 14px 18px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  align-items: flex-start;
}
.build-new-summary-num { font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: var(--lavender); flex-shrink: 0; width: 36px; }
.build-new-summary-step-title { font-family: var(--font-mono); font-size: 12px; color: var(--copper); text-transform: uppercase; letter-spacing: 1.4px; font-weight: 700; margin-bottom: 4px; }
.build-new-summary-answer { color: var(--fg); font-size: 14px; line-height: 1.55; }
.build-new-summary-answer em { color: var(--fg-faint); }
.build-new-summary-actions { display: flex; justify-content: space-between; gap: 12px; }

/* Pass 6 normalization (2026-05-24): card-family consolidation.
   memory-card + usage-summary-card had nearly-identical paint (the only
   differences were memory-card's hover transition + memory-immutable copper
   border-top swap). Consolidated into combined-selector rules that share
   the base paint; new .wbv-grid-card shared substrate is introduced as the
   forward-looking primitive class so future bay-page consumers can adopt
   the molten-glass grid-card visual identity without re-declaring paint
   per-recipe. Legacy class names (memory-card / usage-summary-card / -grid
   variants) keep working unchanged via combined selectors — visual identity
   preserved exactly. */

/* Grid wrappers — shared gap; per-variant track sizing */
.memory-grid,
.usage-summary-grid,
.wbv-grid-card-grid {
  display: grid;
  gap: 14px;
}
.memory-grid,
.wbv-grid-card-grid--memory {
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}
.usage-summary-grid,
.wbv-grid-card-grid--usage {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: 18px;
}

/* Card base recipe — shared molten-glass card paint */
.wbv-grid-card,
.memory-card,
.usage-summary-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.04) 100%),
    var(--bg-panel);
  border: 1px solid var(--border);
  border-top: 3px solid var(--lavender);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22), 0 1px 0 rgba(255,255,255,0.04) inset;
}

/* Hoverable modifier — memory-card opted-in by legacy; usage-summary-card
   stays static; new consumers opt in via .wbv-grid-card--hoverable */
.memory-card,
.wbv-grid-card--hoverable {
  transition: transform 0.15s, box-shadow 0.15s;
}
.memory-card:hover,
.wbv-grid-card--hoverable:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.36), 0 1px 0 rgba(255,255,255,0.07) inset;
}

/* Immutable-accent modifier — copper border-top swap */
.memory-card.memory-immutable,
.wbv-grid-card--immutable-accent {
  border-top-color: var(--copper);
}

.memory-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.memory-type-pill {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
}
.memory-type-feedback { color: var(--lavender); background: rgba(168,155,214,0.08); border-color: var(--lavender-soft); }
.memory-type-project  { color: var(--info); background: rgba(95,163,255,0.08); border-color: var(--info); }
.memory-immutable-pill {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--copper);
  background: rgba(212,165,116,0.10);
  border: 1px solid var(--copper);
  border-radius: 4px;
  padding: 3px 10px;
}
.memory-card-title { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--fg-bright); margin-bottom: 8px; line-height: 1.4; }
.memory-card-excerpt { color: var(--fg-dim); font-size: 13px; line-height: 1.6; }
/* g-pc116 synthetic Memory DCLA spike — governance field rows + DCLA-state pill */
.memory-dcla-pill {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
  color: var(--fg-dim);
}
.memory-dcla-pill[data-tone="ok"]     { color: var(--success, #6fcf8e); border-color: var(--success, #6fcf8e); background: rgba(111,207,142,0.08); }
.memory-dcla-pill[data-tone="info"]   { color: var(--info); border-color: var(--info); background: rgba(95,163,255,0.08); }
.memory-dcla-pill[data-tone="warn"]   { color: var(--copper); border-color: var(--copper); background: rgba(212,165,116,0.10); }
.memory-dcla-pill[data-tone="danger"] { color: var(--danger, #e06c6c); border-color: var(--danger, #e06c6c); background: rgba(224,108,108,0.08); }
.memory-dcla-pill[data-tone="muted"]  { color: var(--fg-faint, var(--fg-dim)); border-color: var(--border-strong); }
.memory-card-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; margin: 10px 0 8px; }
.memory-card-meta > div { display: flex; gap: 6px; font-size: 11px; line-height: 1.5; }
.memory-card-meta dt { color: var(--fg-faint, var(--fg-dim)); font-family: var(--font-mono, monospace); }
.memory-card-meta dd { color: var(--fg-dim); margin: 0; }
.memory-card-next { font-size: 11.5px; line-height: 1.5; color: var(--fg-dim); border-top: 1px solid var(--border-soft, var(--border-strong)); padding-top: 8px; font-style: italic; }
/* g-pc117 GBrain cited-answer concept section */
.gbrain-concept { margin-top: 18px; padding: 16px; border: 1px solid var(--border-strong); border-radius: 8px; background: rgba(95,163,255,0.03); }
.gbrain-concept-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.gbrain-query { font-size: 12.5px; color: var(--fg-dim); margin: 8px 0 4px; }
.gbrain-answer { font-size: 13px; line-height: 1.6; color: var(--fg-bright); background: rgba(95,163,255,0.06); border-left: 2px solid var(--info); padding: 8px 12px; border-radius: 4px; margin-bottom: 10px; }
.gbrain-block { margin-top: 10px; }
.gbrain-block-label { font-family: var(--font-display); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--fg-faint, var(--fg-dim)); margin-bottom: 5px; }
.gbrain-empty { font-size: 12px; color: var(--fg-faint, var(--fg-dim)); font-style: italic; }
.gbrain-cited-row, .gbrain-excluded-row { display: flex; gap: 8px; align-items: baseline; font-size: 12px; line-height: 1.6; padding: 2px 0; flex-wrap: wrap; }
.gbrain-cited-title { color: var(--fg-bright); font-weight: 600; }
.gbrain-cited-meta { color: var(--fg-faint, var(--fg-dim)); font-family: var(--font-mono, monospace); font-size: 11px; }
.gbrain-gaps { margin: 0; padding-left: 18px; }
.gbrain-gaps li { font-size: 12px; line-height: 1.6; color: var(--fg-dim); }

/* Synthetic-first live-local store spike (g-pc123) — Settings → Memory. */
.memory-store-spike { margin-top: 18px; padding: 16px; border: 1px solid var(--border-strong); border-radius: 8px; background: rgba(255,176,32,0.04); }
.memory-store-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.memory-store-rows { display: flex; flex-direction: column; gap: 4px; }
.memory-store-row { display: flex; gap: 8px; align-items: baseline; font-size: 12px; line-height: 1.6; padding: 4px 0; flex-wrap: wrap; border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.04)); }
.memory-store-row-actions { display: inline-flex; gap: 6px; margin-left: auto; }

/* (Pass 6: .usage-summary-grid + .usage-summary-card paint consolidated
   into the combined-selector rules above with .memory-grid / .memory-card
   and the new .wbv-grid-card / .wbv-grid-card-grid family. Inner-content
   sub-recipes for usage-summary remain unchanged below.) */
.usage-summary-label { font-family: var(--font-display); font-size: 10px; text-transform: uppercase; letter-spacing: 1.6px; font-weight: 700; color: var(--copper); margin-bottom: 8px; }
.usage-summary-value { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--fg-bright); letter-spacing: -0.6px; margin-bottom: 4px; }
.usage-summary-sub { font-size: 12px; color: var(--fg-dim); line-height: 1.5; }
.usage-builds-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  font-size: 14px;
}
.usage-builds-table thead th {
  font-family: var(--font-display);
  text-align: left;
  padding: 12px 16px;
  color: var(--copper);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-weight: 700;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border);
}
.usage-builds-table tbody td { padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--fg); }
.usage-builds-table tbody tr:last-child td { border-bottom: none; }
.usage-builds-table tbody tr:hover { background: rgba(168,155,214,0.04); }

.settings-list { display: flex; flex-direction: column; gap: 10px; }
.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
.settings-row-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--fg-bright); margin-bottom: 4px; }
.settings-row-desc { font-size: 13px; color: var(--fg-dim); line-height: 1.55; max-width: 560px; }

.war-room-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.war-room-tile {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.04) 100%),
    var(--bg-panel);
  border: 1px solid var(--border);
  border-top: 3px solid var(--lavender);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22), 0 1px 0 rgba(255,255,255,0.04) inset;
}
.war-room-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.war-room-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.war-room-name { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--fg-bright); }
.war-room-role { font-size: 12px; color: var(--fg-dim); }
.war-room-body {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.war-room-empty { color: var(--fg-faint); font-style: italic; font-size: 13px; }

.mode-switcher .role-tab.active { font-weight: 700; }

/* ====================================================================
 * Hive Mind pipeline legend (operator standing rule 2026-05-01:
 * "whatever colors you use for pipelines needs to be the same color
 * in hive mind so its easy to identify").
 * Shows the 5 pipelines + 3 edge-kind styles so operator can decode
 * any edge in the canvas at a glance.
 * ==================================================================== */

.hive-mind-pipeline-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.04) 100%),
    var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
.hive-mind-pipeline-legend-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--copper);
  margin-right: 8px;
}
.hive-mind-pipeline-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  background: rgba(0,0,0,0.18);
}
.hive-mind-pipeline-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}
.hive-mind-edge-kind-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--fg-faint);
  margin-left: 14px;
}
.hive-mind-edge-kind {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-dim);
}
.hive-mind-edge-line {
  display: inline-block;
  width: 22px;
  height: 2px;
  background: var(--lavender);
}
.hive-mind-edge-line.dashed {
  background: repeating-linear-gradient(90deg, var(--warning) 0 4px, transparent 4px 8px);
  height: 2px;
}
.hive-mind-edge-wired      .hive-mind-edge-line { background: var(--lavender); height: 2px; }
.hive-mind-edge-capability .hive-mind-edge-line { background: var(--lavender); opacity: 0.6; height: 1.5px; }
.hive-mind-edge-aspirational { color: var(--warning); }

/* Experimental PNG-only Workbench layered composition proof. */
.layered-composition-shell {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #030405;
  color: #f8eee2;
}

.layered-composition-stage {
  position: relative;
  width: min(100vw, 177.79vh);
  height: min(100vh, 56.25vw);
  min-width: 320px;
  min-height: 180px;
  overflow: hidden;
  isolation: isolate;
  background: #030405;
}

.layered-composition-layer,
.layered-composition-neuropath {
  position: absolute;
  margin: 0;
  pointer-events: none;
  transform-origin: center;
  overflow: visible;
  will-change: transform, opacity;
}

.layered-composition-stage--editing .layered-composition-editable-layer {
  pointer-events: auto;
  cursor: grab;
}

.layered-composition-stage--editing .layered-composition-editable-layer:active {
  cursor: grabbing;
}

.layered-composition-editable-layer--selected {
  outline: 1px solid rgba(255, 255, 255, 0.66);
  outline-offset: 3px;
}

.layered-composition-layer img,
.layered-composition-neuropath img {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.layered-composition__forge {
  width: 100% !important;
  height: 100%;
}

.layered-composition__forge img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.layered-composition__core img {
  animation: layeredNodePulse 6.5s ease-in-out infinite;
}

.layered-composition__core--center img {
  animation: layeredCoreFloat 9s ease-in-out infinite;
}

.layered-composition__node--foreground img {
  animation: layeredNodePulse 5.4s ease-in-out infinite;
}

.layered-composition__node--mid img {
  animation: layeredNodeDrift 7.4s ease-in-out infinite;
}

.layered-composition__node--rear img {
  animation: layeredOrbitBreath 9.6s ease-in-out infinite;
}

.layered-composition-neuropaths {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.layered-composition-neuropath {
  aspect-ratio: 3 / 2;
}

.layered-composition-neuropath img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  transform-origin: center;
  animation: layeredPathBreath 8s ease-in-out infinite;
}

.layered-composition-neuropath--dormant img {
  animation-duration: 10.5s;
  animation-name: layeredDormantPathBreath;
}

.layered-composition-neuropath--active img {
  animation-duration: 7.2s;
}

.layered-composition-guides {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}

.layered-composition-guide-line {
  position: absolute;
  height: 1px;
  background: rgba(255, 255, 255, 0.8);
  transform-origin: center;
}

.layered-composition-guide-node {
  position: absolute;
  aspect-ratio: 3 / 2;
  border: 1px solid rgba(255, 255, 255, 0.72);
  transform: translate(-50%, -50%);
}

.layered-composition-guide-node::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}

.layered-composition-guide-node span {
  position: absolute;
  left: 50%;
  top: calc(50% + 8px);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 9px;
  transform: translateX(-50%);
}

.layered-composition-selected-box {
  position: absolute;
  aspect-ratio: 3 / 2;
  border: 1px solid rgba(142, 220, 255, 0.82);
  pointer-events: none;
}

.layered-composition-route-port-guides {
  position: absolute;
  inset: 0;
  z-index: 72;
  pointer-events: none;
}

.layered-composition-route-port-guides b {
  width: 9px;
  height: 9px;
  border: 1px solid rgba(142, 220, 255, 0.9);
  border-radius: 50%;
  background: rgba(6, 8, 9, 0.72);
  box-shadow: 0 0 10px rgba(142, 220, 255, 0.44);
}

.layered-composition-route-port-guides span {
  position: absolute;
  left: 11px;
  top: -3px;
  padding: 1px 3px;
  border: 1px solid rgba(142, 220, 255, 0.34);
  background: rgba(6, 8, 9, 0.82);
  color: rgba(248, 238, 226, 0.84);
  font-family: var(--font-mono);
  font-size: 8px;
  line-height: 1;
  white-space: nowrap;
}

.layered-composition-socket-contact-debug {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}

.layered-composition-socket-contact-debug__line {
  position: fixed;
  height: 1px;
  background: rgba(99, 255, 154, 0.72);
  transform-origin: left center;
}

.layered-composition-socket-contact-debug__line--bad {
  height: 2px;
  background: rgba(255, 79, 79, 0.9);
}

.layered-composition-socket-contact-debug__expected,
.layered-composition-socket-contact-debug__actual {
  position: fixed;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(99, 255, 154, 0.95);
  border-radius: 50%;
  background: rgba(6, 8, 9, 0.7);
  transform: translate(-50%, -50%);
}

.layered-composition-socket-contact-debug__actual {
  border-color: rgba(142, 220, 255, 0.95);
}

.layered-composition-socket-contact-debug__actual--bad {
  width: 9px;
  height: 9px;
  border-color: rgba(255, 79, 79, 0.95);
  box-shadow: 0 0 12px rgba(255, 79, 79, 0.68);
}

.layered-composition-socket-contact-debug__actual em {
  position: absolute;
  left: 12px;
  top: -4px;
  padding: 2px 4px;
  border: 1px solid rgba(255, 79, 79, 0.5);
  background: rgba(6, 8, 9, 0.86);
  color: #ffd2d2;
  font-family: var(--font-mono);
  font-size: 8px;
  font-style: normal;
  line-height: 1;
  white-space: nowrap;
}

.layered-composition-editor {
  position: fixed;
  right: 16px;
  top: 16px;
  z-index: 80;
  width: min(330px, calc(100vw - 32px));
  font-family: var(--font-mono);
  pointer-events: none;
}

.layered-composition-editor__toggle,
.layered-composition-editor__copy,
.layered-composition-editor__save,
.layered-composition-editor__reset,
.layered-composition-editor__calibration {
  border: 1px solid rgba(248, 238, 226, 0.32);
  background: rgba(6, 8, 9, 0.86);
  color: #f8eee2;
  cursor: pointer;
  font: inherit;
}

.layered-composition-editor__toggle {
  display: block;
  margin-left: auto;
  padding: 9px 12px;
  pointer-events: auto;
}

.layered-composition-editor__panel {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(248, 238, 226, 0.24);
  background: rgba(6, 8, 9, 0.9);
  color: #f8eee2;
  pointer-events: auto;
}

.layered-composition-editor__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.layered-composition-editor__field {
  display: grid;
  gap: 4px;
  font-size: 10px;
  text-transform: uppercase;
}

.layered-composition-editor__field select,
.layered-composition-editor__field input,
.layered-composition-editor__export {
  width: 100%;
  border: 1px solid rgba(248, 238, 226, 0.22);
  background: rgba(0, 0, 0, 0.58);
  color: #f8eee2;
  font: inherit;
}

.layered-composition-editor__field select,
.layered-composition-editor__field input {
  min-height: 30px;
  padding: 4px 6px;
}

.layered-composition-editor__lock {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-size: 10px;
  text-transform: uppercase;
}

.layered-composition-editor__copy,
.layered-composition-editor__save,
.layered-composition-editor__reset,
.layered-composition-editor__calibration {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px 10px;
  text-align: center;
  text-decoration: none;
  pointer-events: auto;
}

.layered-composition-editor__save {
  border-color: rgba(131, 211, 166, 0.56);
}

.layered-composition-editor__reset {
  border-color: rgba(248, 238, 226, 0.2);
  color: rgba(248, 238, 226, 0.78);
}

.layered-composition-editor__hint,
.layered-composition-editor__status {
  margin: 10px 0 0;
  font-size: 9px;
  line-height: 1.4;
}

.layered-composition-editor__hint {
  color: rgba(248, 238, 226, 0.62);
}

.layered-composition-editor__status {
  color: rgba(131, 211, 166, 0.9);
  text-transform: uppercase;
}

.layered-composition-editor__export {
  min-height: 150px;
  margin-top: 10px;
  padding: 8px;
  resize: vertical;
  font-size: 9px;
  line-height: 1.45;
}

.layered-composition-note {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 30;
  opacity: 0.58;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

@keyframes layeredNodePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}

@keyframes layeredCoreFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -0.6%, 0) scale(1.035); }
}

@keyframes layeredNodeDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(0.99); }
  50% { transform: translate3d(0.6%, -0.4%, 0) scale(1.025); }
}

@keyframes layeredOrbitBreath {
  0%, 100% { transform: scale(0.985); }
  50% { transform: scale(1.025); }
}

@keyframes layeredPathBreath {
  0%, 100% { transform: scale(1); opacity: 0.92; }
  50% { transform: scale(1.025); opacity: 1; }
}

@keyframes layeredDormantPathBreath {
  0%, 100% { transform: scale(0.98); opacity: 0.72; }
  50% { transform: scale(1.015); opacity: 0.88; }
}

@media (prefers-reduced-motion: reduce) {
  .layered-composition-layer img,
  .layered-composition-neuropath img {
    animation: none !important;
  }
}

/* Experimental SVG Hivemind route backbone. */
.svg-hivemind-shell {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #020303;
  color: rgba(248, 238, 226, 0.92);
  font-family: var(--font-mono, "Space Mono", ui-monospace, SFMono-Regular, monospace);
}

.svg-hivemind-stage {
  position: relative;
  width: min(100vw, 181vh);
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  transform: translateY(-1.8vh);
}

.workbench-panel-shell .svg-hivemind-stage {
  width: min(100vw, 181vh);
  margin-top: 3vh;
  transform: none;
}

.workbench-panel-shell {
  background: #020303;
}

.workbench-panel-shell .svg-hivemind-background {
  position: fixed;
  inset: 0;
  width: 100vw !important;
  height: 100vh !important;
  -o-object-fit: cover;
     object-fit: cover;
}

.workbench-panel-shell__top,
.workbench-panel-shell__bottom,
.workbench-panel-shell__side {
  position: absolute;
  z-index: 9;
  pointer-events: none;
}

.workbench-panel-shell__top,
.workbench-panel-shell__bottom {
  left: 14.8%;
  width: 70.4%;
  height: 12.5%;
}

.workbench-panel-shell__top {
  top: 1.4%;
}

.workbench-panel-shell__bottom {
  bottom: 1.5%;
}

.workbench-panel-shell__side {
  top: 3.2%;
  width: min(20.5vw, 348px);
  height: 93.6%;
}

.workbench-panel-shell__side--left {
  left: 1.1%;
  pointer-events: auto;
}

.workbench-panel-shell__side--right {
  right: 1.1%;
  pointer-events: auto;
}

.workbench-panel-shell .panel-mockup-detail-tab {
  pointer-events: auto;
}

.workbench-panel-shell .panel-mockup-detail-panel {
  left: 25%;
  bottom: 13.5%;
  z-index: 10;
  width: 50%;
  min-height: 158px;
  pointer-events: none;
}

.workbench-panel-shell .panel-mockup-detail-panel.is-open {
  pointer-events: none;
}

.workbench-top-status-rail,
.workbench-bottom-evidence-strip,
.workbench-os-spine,
.workbench-pepper-dock,
.workbench-focus-lens,
.workbench-dev-edit-menu {
  color: rgba(246, 248, 246, 0.96);
  font-family: var(--font-mono);
  letter-spacing: 0;
}

.workbench-top-status-rail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: min(1040px, 90%);
  min-height: 52px;
  margin: 8px auto 0;
  padding: 7px 10px;
  border: 1px solid rgba(162, 188, 176, 0.34);
  border-radius: 8px;
  background: rgba(6, 9, 10, 0.72);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.035) inset;
  pointer-events: auto;
}

.workbench-status-pill {
  display: inline-grid;
  align-content: center;
  min-width: 92px;
  max-width: 178px;
  min-height: 34px;
  padding: 5px 9px;
  border: 1px solid rgba(160, 190, 176, 0.24);
  border-radius: 6px;
  background: rgba(15, 20, 21, 0.66);
}

.workbench-status-pill span,
.workbench-os-spine__header span,
.workbench-focus-lens__header span,
.workbench-focus-lens__grid span,
.workbench-focus-lens__detail-area span,
.workbench-focus-lens__subcategories span,
.workbench-focus-lens__projects span,
.workbench-focus-lens__safe-next span,
.workbench-build-flow span,
.workbench-people-map span,
.workbench-pepper-dock__header span,
.workbench-pepper-dock__lane span,
.workbench-bottom-evidence-strip__title span,
.workbench-dev-edit-menu button span {
  display: block;
  color: rgba(171, 199, 187, 0.86);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}

.workbench-status-pill strong,
.workbench-os-spine__header strong,
.workbench-focus-lens__grid strong,
.workbench-focus-lens__detail-area strong,
.workbench-focus-lens__projects strong,
.workbench-bottom-evidence-strip__title strong,
.workbench-dev-edit-menu button strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: rgba(247, 249, 242, 0.98);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workbench-dev-edit-menu {
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 38;
  width: min(430px, 34vw);
  pointer-events: auto;
}

.workbench-dev-edit-menu > button {
  display: grid;
  min-width: 104px;
  min-height: 42px;
  margin-left: auto;
  padding: 7px 11px;
  border: 1px solid rgba(162, 188, 176, 0.36);
  border-radius: 8px;
  background: rgba(6, 9, 10, 0.82);
  color: rgba(247, 249, 242, 0.98);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.workbench-dev-edit-menu__body {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid rgba(162, 188, 176, 0.28);
  border-radius: 8px;
  background: rgba(6, 9, 10, 0.86);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.34);
}

.workbench-os-spine {
  height: 100%;
  padding: 12px;
  border: 1px solid rgba(162, 188, 176, 0.28);
  border-radius: 8px;
  background: rgba(6, 9, 10, 0.64);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
}

.workbench-os-spine__header {
  padding: 8px 8px 10px;
}

.workbench-os-spine__items {
  display: grid;
  gap: 7px;
}

.workbench-os-spine__group {
  display: grid;
  gap: 7px;
}

.workbench-os-spine__items > .workbench-os-spine__group > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 38px;
  padding: 8px;
  border: 1px solid rgba(162, 188, 176, 0.2);
  border-radius: 7px;
  background: rgba(13, 18, 19, 0.68);
  color: rgba(247, 249, 242, 0.94);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.workbench-os-spine__items > .workbench-os-spine__group > button[aria-current="true"] {
  border-color: rgba(225, 218, 168, 0.68);
  background: rgba(42, 48, 40, 0.76);
}

.workbench-os-spine__items > .workbench-os-spine__group > button span {
  color: rgba(247, 249, 242, 0.98);
  font-size: 11px;
  font-weight: 850;
}

.workbench-os-spine__items > .workbench-os-spine__group > button strong {
  color: rgba(171, 199, 187, 0.86);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.workbench-os-spine__subcategory-tray {
  display: grid;
  gap: 5px;
  margin: -1px 0 2px 12px;
  padding: 8px;
  border: 1px solid rgba(162, 188, 176, 0.24);
  border-radius: 8px;
  background: rgba(12, 17, 18, 0.64);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.025) inset;
}

.workbench-os-spine__subcategory-tray button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
  padding: 6px 7px;
  border: 1px solid rgba(162, 188, 176, 0.16);
  border-radius: 6px;
  background: rgba(5, 8, 9, 0.44);
  color: rgba(247, 249, 242, 0.94);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.workbench-os-spine__subcategory-tray button[aria-current="true"] {
  border-color: rgba(225, 218, 168, 0.62);
  background: rgba(40, 45, 38, 0.66);
}

.workbench-os-spine__subcategory-tray button span {
  color: rgba(247, 249, 242, 0.96);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.15;
}

.workbench-os-spine__subcategory-tray button strong {
  color: rgba(171, 199, 187, 0.82);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.workbench-focus-lens {
  position: absolute;
  left: min(23vw, 356px);
  top: clamp(92px, calc(3.2vh + 57px + var(--focus-lens-anchor-top, 0px)), calc(100vh - 500px));
  z-index: 18;
  width: min(49vw, 720px);
  max-height: min(58vh, 620px);
  overflow: auto;
  padding: 16px;
  border: 1px solid rgba(162, 188, 176, 0.34);
  border-radius: 8px;
  /* Stage 9 — first governed ComfyUI-generated asset consumption (pipeline
     workbench-first-governed-asset-ui-consumption-proof-2026-05-22).
     Asset: /assets/workbench-layered/glass-panel-shells/glass-panel-shell__focus-lens__active__v001.png
     (PNG RGBA 1600x1216, alpha 0..255, transparent outside shell pixels,
     produced via governed pipeline prompt_id 9c2e7660-7e25-4bef-b023-db6f0a0747af,
     evidence packet 2026-05-22T023505Z-c3f8c6af-complete-...json).
     Asset is the glass panel; the dark color underneath only shows through
     where the asset's alpha is < 255 (i.e., outside the shell pixels). The
     prior CSS-gradient "fake glass" composition was removed in this slice
     per operator hard limit "do not create fake molten/glass art with CSS". */
  background:
    url("/assets/workbench-layered/glass-panel-shells/glass-panel-shell__focus-lens__active__v001.png")
      center / 100% 100% no-repeat,
    rgba(6, 9, 10, 0.78);
  box-shadow:
    0 20px 44px rgba(0, 0, 0, 0.44),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-10px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.workbench-focus-lens.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.workbench-focus-lens__anchor {
  position: absolute;
  left: -18px;
  top: 56px;
  width: 18px;
  height: 2px;
  background: linear-gradient(90deg, rgba(162, 188, 176, 0), rgba(225, 218, 168, 0.84));
}

.workbench-focus-lens__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.workbench-focus-lens__header h2 {
  margin: 4px 0 0;
  color: rgba(247, 249, 242, 0.99);
  font-size: 20px;
  font-weight: 850;
  letter-spacing: 0;
}

.workbench-focus-lens__header button,
.workbench-focus-lens__projects button {
  border: 1px solid rgba(162, 188, 176, 0.28);
  border-radius: 7px;
  background: rgba(15, 20, 21, 0.72);
  color: rgba(247, 249, 242, 0.96);
  cursor: pointer;
  font: inherit;
}

.workbench-focus-lens__header button {
  min-width: 72px;
  padding: 7px 9px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.workbench-focus-lens__summary {
  margin: 0 0 12px;
  color: rgba(224, 230, 218, 0.9);
  font-size: 13px;
  line-height: 1.42;
}

.workbench-focus-lens__status-row {
  display: grid;
  grid-template-columns: minmax(92px, 0.35fr) minmax(0, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

.workbench-focus-lens__status-row .workbench-status-pill {
  max-width: none;
  min-height: 42px;
}

.workbench-focus-lens__status-row .workbench-status-pill strong {
  white-space: normal;
}

.workbench-focus-lens__safe-next {
  margin-bottom: 12px;
  padding: 9px 10px;
  border: 1px solid rgba(225, 218, 168, 0.24);
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(58, 61, 42, 0.62), rgba(13, 18, 19, 0.58)),
    rgba(36, 39, 29, 0.58);
}

.workbench-focus-lens__safe-next strong {
  display: block;
  margin-top: 4px;
  color: rgba(247, 249, 242, 0.98);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.workbench-build-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.workbench-build-flow li {
  min-height: 84px;
  padding: 9px;
  border: 1px solid rgba(162, 188, 176, 0.22);
  border-radius: 7px;
  background:
    radial-gradient(circle at 18% 0%, rgba(225, 218, 168, 0.08), transparent 48%),
    rgba(13, 18, 19, 0.64);
}

.workbench-build-flow strong {
  display: block;
  margin-top: 8px;
  color: rgba(247, 249, 242, 0.98);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
}

.workbench-build-flow em {
  display: block;
  margin-top: 6px;
  color: rgba(196, 207, 195, 0.82);
  font-size: 10px;
  font-style: normal;
  line-height: 1.2;
}

.workbench-people-map,
.workbench-focus-lens__subcategories,
.workbench-focus-lens__projects,
.workbench-focus-lens__grid,
.workbench-focus-lens__detail-area {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.workbench-people-map {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.workbench-people-map--single {
  grid-template-columns: 1fr;
}

.workbench-focus-lens__subcategories,
.workbench-focus-lens__grid,
.workbench-focus-lens__detail-area {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workbench-focus-lens__projects {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.workbench-people-map div,
.workbench-focus-lens__subcategories div,
.workbench-focus-lens__grid div,
.workbench-focus-lens__detail-area div,
.workbench-focus-lens__projects button {
  min-height: 44px;
  padding: 9px;
  border: 1px solid rgba(162, 188, 176, 0.2);
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(32, 41, 39, 0.62), rgba(9, 12, 13, 0.58)),
    rgba(13, 18, 19, 0.62);
}

.workbench-people-map strong,
.workbench-focus-lens__subcategories strong,
.workbench-pepper-dock__lane strong {
  display: block;
  margin-top: 4px;
  color: rgba(247, 249, 242, 0.96);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.workbench-people-map em,
.workbench-pepper-dock__lane em,
.workbench-pepper-dock__lane p {
  display: block;
  margin-top: 6px;
  color: rgba(196, 207, 195, 0.82);
  font-size: 10px;
  font-style: normal;
  line-height: 1.3;
}

.workbench-pepper-dock {
  height: 100%;
  padding: 9px;
  border: 1px solid rgba(162, 188, 176, 0.28);
  border-radius: 8px;
  background: rgba(6, 9, 10, 0.66);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
  overflow: hidden;
}

/* G-PC1: dock header — base overrides (late-cascade rule at ~18160
   is the authoritative override; this just cleans up early-cascade). */
.workbench-pepper-dock__header {
  padding: 8px 8px 10px;
  margin-bottom: 0;
}

.workbench-pepper-dock__header strong {
  display: block;
  margin-top: 2px;
  color: rgba(247, 249, 242, 0.98);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.workbench-pepper-dock__context-row,
.workbench-pepper-dock__summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 6px;
}

.workbench-pepper-dock__context-row div,
.workbench-pepper-dock__summary-grid div,
.workbench-pepper-dock__compact-card,
.workbench-pepper-dock__chat-card,
.workbench-pepper-dock__handoff {
  min-width: 0;
  padding: 6px;
  border: 1px solid rgba(162, 188, 176, 0.2);
  border-radius: 7px;
  background:
    radial-gradient(circle at 12% 0%, rgba(225, 218, 168, 0.07), transparent 46%),
    linear-gradient(135deg, rgba(30, 38, 36, 0.66), rgba(7, 10, 10, 0.7)),
    rgba(13, 18, 19, 0.68);
}

.workbench-pepper-dock__context-row span,
.workbench-pepper-dock__summary-grid span,
.workbench-pepper-dock__compact-title span,
.workbench-pepper-dock__chat-card label span {
  display: block;
  color: rgba(184, 210, 198, 0.92);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.workbench-pepper-dock__context-row strong,
.workbench-pepper-dock__summary-grid strong,
.workbench-pepper-dock__compact-card strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 5px;
  overflow: hidden;
  color: rgba(247, 249, 242, 0.98);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.32;
  word-break: break-word;
  white-space: normal;
}

.workbench-pepper-dock__compact-card p,
.workbench-pepper-dock__response-window p {
  font-size: 13px;
  line-height: 1.42;
  color: rgba(238, 240, 226, 0.92);
}

.workbench-pepper-dock__compact-stack {
  display: grid;
  gap: 7px;
  max-height: calc(100% - 110px);
  overflow-y: auto;
  overflow-x: hidden;
}

/* Slice 2A — subtle role distinction between conversational (Pepper) and
   governed-orchestration (Director / Current Governed Task) lanes inside
   the dock. Same color vocabulary already used by the bottom-strip
   selection accent; no new palette introduced. Parent selector bumps
   specificity above a later .workbench-pepper-dock__chat-card border-color
   reset in this file. */
.workbench-pepper-dock .workbench-pepper-dock__chat-card {
  border-left-width: 2px;
  border-left-style: solid;
  border-left-color: rgba(140, 220, 240, 0.7);
}
.workbench-pepper-dock .workbench-pepper-dock__compact-card--governed-task {
  border-left-width: 2px;
  border-left-style: solid;
  border-left-color: rgba(255, 168, 70, 0.75);
}

/* Slice 2A — let the dock stack scroll vertically so the Current
   Governed Task card never clips. Earlier cascade in this file sets
   overflow: hidden on .workbench-pepper-dock__compact-stack; parent
   selector bumps specificity to enable y-scroll without disturbing
   the existing flex layout. */
.workbench-pepper-dock .workbench-pepper-dock__compact-stack {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(162, 188, 176, 0.32) transparent;
}
.workbench-pepper-dock .workbench-pepper-dock__compact-stack::-webkit-scrollbar {
  width: 6px;
}
.workbench-pepper-dock .workbench-pepper-dock__compact-stack::-webkit-scrollbar-thumb {
  background: rgba(162, 188, 176, 0.32);
  border-radius: 3px;
}

.workbench-pepper-dock__compact-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}

.workbench-pepper-dock__compact-title em {
  flex: 0 0 auto;
  margin-top: 0;
  padding: 4px 6px;
  border: 1px solid rgba(162, 188, 176, 0.2);
  border-radius: 999px;
  background: rgba(5, 8, 9, 0.54);
  color: rgba(225, 218, 168, 0.9);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.workbench-pepper-dock__compact-card p,
.workbench-pepper-dock__chat-card p {
  display: -webkit-box;
  margin: 5px 0 0;
  overflow: hidden;
  color: rgba(220, 227, 217, 0.9);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.22;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.workbench-pepper-dock__compact-card small {
  display: block;
  display: -webkit-box;
  margin: 5px 0 0;
  overflow: hidden;
  color: rgba(196, 207, 195, 0.82);
  font-size: 8px;
  font-weight: 700;
  line-height: 1.2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* G-PC1 — expanded chat card fills available dock space.
   Response window grows to fill; prompt suite stays compact at bottom. */
.workbench-pepper-dock__chat-card--expanded {
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
.workbench-pepper-dock__chat-card--expanded .workbench-pepper-dock__response-window {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}

.workbench-pepper-dock__chat-card label {
  display: grid;
  gap: 3px;
  margin-top: 6px;
}

.workbench-pepper-dock__chat-card textarea {
  width: 100%;
  min-height: 38px;
  resize: none;
  padding: 7px;
  border: 1px solid rgba(162, 188, 176, 0.14);
  border-radius: 6px;
  background: rgba(5, 8, 9, 0.38);
  color: rgba(238, 242, 232, 0.84);
  font: inherit;
  font-size: 9px;
  line-height: 1.25;
}

.workbench-pepper-dock__chat-card textarea::-moz-placeholder {
  color: rgba(196, 207, 195, 0.58);
}

.workbench-pepper-dock__chat-card textarea::placeholder {
  color: rgba(196, 207, 195, 0.58);
}

/* ── G-PC1 Dock compact prompt suite ────────────────────────────── */
.pepper-dock-suite {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;
  flex: 0 0 auto;
  padding: 0 6px;
}
.pepper-dock-suite__composer {
  display: flex;
  gap: 4px;
  align-items: stretch;
}
.pepper-dock-suite__input {
  flex: 1 1 auto;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  resize: none;
  padding: 5px 7px;
  border: 1px solid rgba(162, 188, 176, 0.22);
  border-radius: 6px;
  background: rgba(5, 8, 9, 0.38);
  color: rgba(238, 242, 232, 0.84);
  font: inherit;
  font-size: 10px;
  line-height: 1.3;
}
.pepper-dock-suite__input::-moz-placeholder {
  color: rgba(196, 207, 195, 0.58);
}
.pepper-dock-suite__input::placeholder {
  color: rgba(196, 207, 195, 0.58);
}
/* Send button — spans full textarea height (top-to-bottom match) */
.pepper-dock-suite__send {
  width: 30px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid rgba(255, 178, 90, 0.35);
  border-radius: 5px;
  background: rgba(10, 14, 20, 0.60);
  color: rgba(240, 235, 225, 0.92);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pepper-dock-suite__send:hover {
  background: rgba(255, 178, 90, 0.14);
  border-color: rgba(255, 178, 90, 0.55);
}
/* Clear button — in controls row, centered under send button */
.pepper-dock-suite__clear {
  width: 24px;
  height: 24px;
  margin-left: auto;
  margin-right: 3px;
  padding: 0;
  border: 1px solid rgba(255, 178, 90, 0.30);
  border-radius: 5px;
  background: rgba(10, 14, 20, 0.60);
  color: rgba(240, 235, 225, 0.65);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pepper-dock-suite__clear:hover {
  background: rgba(255, 178, 90, 0.14);
  border-color: rgba(255, 178, 90, 0.55);
  color: rgba(240, 235, 225, 0.92);
}
.pepper-dock-suite__controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.pepper-dock-suite__select {
  font-size: 9px !important;
}
.pepper-dock-suite__pill {
  font-size: 9px !important;
  padding: 2px 6px !important;
}
.pepper-dock-suite__pill--on {
  background: rgba(255, 178, 90, 0.18) !important;
  border-color: rgba(255, 178, 90, 0.55) !important;
}

/* G-PC1 — expanded chat card: one seamless glass surface, no internal
   borders. Overrides base, v2.3 WBV, and v3 WBV card borders.
   High specificity to beat all earlier card-border selectors.
   Tightened vertical spacing — eliminate padding bloat. */
.workbench-pepper-dock .workbench-pepper-dock__chat-card.workbench-pepper-dock__chat-card--expanded,
.wbv-shell .workbench-pepper-dock .workbench-pepper-dock__chat-card.workbench-pepper-dock__chat-card--expanded {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  border-top: 1px solid rgba(255, 178, 90, 0.18) !important;
}
/* ASK PEPPER title row — warm gradient glow header matching left pane
   pepper-chat-header. Blended amber gradient, no hard border. */
.workbench-pepper-dock__chat-card--expanded .workbench-pepper-dock__compact-title {
  padding: 10px 12px 8px !important;
  margin: 0 !important;
  background: linear-gradient(180deg, rgba(255, 143, 58, 0.14) 0%, rgba(28, 29, 33, 0.0) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 220, 165, 0.10) !important;
}
/* ASK PEPPER title text — warm amber matching left pane header */
.workbench-pepper-dock__chat-card--expanded .workbench-pepper-dock__compact-title > span {
  color: rgba(255, 200, 130, 0.88) !important;
  text-shadow: 0 0 3px rgba(255, 140, 50, 0.14), 0 0 1px rgba(255, 180, 90, 0.20) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}
/* Status pill (MANUAL) — dc-pill-action amber treatment */
.workbench-pepper-dock__chat-card--expanded .workbench-pepper-dock__compact-title > em {
  font-style: normal !important;
  text-transform: uppercase !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  color: rgba(255, 200, 130, 0.92) !important;
  background: rgba(10, 14, 20, 0.60) !important;
  border: 1px solid rgba(255, 178, 90, 0.45) !important;
  border-radius: 4px !important;
  padding: 2px 8px !important;
}
/* Response window inside expanded: no own border, tight spacing;
   small horizontal inset for text breathing room. */
.workbench-pepper-dock__chat-card--expanded .workbench-pepper-dock__response-window,
.wbv-shell .workbench-pepper-dock__chat-card--expanded .workbench-pepper-dock__response-window {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 8px 12px !important;
  margin: 0 !important;
}
/* Expand Workspace button — inset to match dock header alignment since
   compact-stack now uses negative margins for edge-to-edge. */
.workbench-pepper-dock__chat-card--expanded ~ .workbench-pepper-dock__expand {
  margin-top: 4px;
  margin-left: 14px;
  margin-right: 14px;
}

.workbench-pepper-dock__summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 5px 0 0;
}

.workbench-pepper-dock__summary-grid div {
  min-height: 40px;
  padding: 6px;
}

.workbench-pepper-dock__summary-grid strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.22;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.workbench-pepper-dock__expand {
  min-height: 34px;
  border: 1px solid rgba(162, 188, 176, 0.2);
  border-radius: 7px;
  background: rgba(16, 22, 22, 0.72);
  color: rgba(247, 249, 242, 0.9);
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.workbench-pepper-dock__expand:hover {
  border-color: rgba(225, 218, 168, 0.42);
  background: rgba(28, 37, 36, 0.82);
}

.workbench-pepper-workspace {
  position: absolute;
  top: 68px;
  left: 340px;
  right: 54px;
  bottom: 0;
  z-index: 30;
  width: auto;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(162, 188, 176, 0.34);
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 14% 0%, rgba(225, 218, 168, 0.1), transparent 42%),
    radial-gradient(ellipse at 96% 12%, rgba(92, 143, 132, 0.14), transparent 48%),
    linear-gradient(135deg, rgba(29, 37, 35, 0.88), rgba(7, 10, 10, 0.88) 54%, rgba(30, 24, 18, 0.78)),
    rgba(6, 9, 10, 0.86);
  box-shadow:
    0 24px 54px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.045) inset,
    0 0 32px rgba(225, 218, 168, 0.08);
  color: rgba(246, 248, 246, 0.96);
  font-family: var(--font-mono);
  letter-spacing: 0;
  overflow: hidden;
  pointer-events: auto;
}

.workbench-pepper-workspace__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(162, 188, 176, 0.18);
}

.workbench-pepper-workspace__header span,
.workbench-pepper-workspace__context span,
.workbench-pepper-workspace__loop span,
.workbench-pepper-workspace__panel-title span,
.workbench-pepper-workspace__field span,
.workbench-pepper-workspace__transcript span,
.workbench-pepper-workspace__dl dt {
  display: block;
  color: rgba(171, 199, 187, 0.86);
  font-size: 9px;
  font-weight: 850;
  line-height: 1.1;
  text-transform: uppercase;
}

.workbench-pepper-workspace__header h2 {
  margin: 4px 0 0;
  color: rgba(247, 249, 242, 0.99);
  font-size: 18px;
  font-weight: 850;
  letter-spacing: 0;
}

.workbench-pepper-workspace__header p {
  margin: 5px 0 0;
  color: rgba(220, 227, 217, 0.86);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.workbench-pepper-workspace__header button,
.workbench-pepper-workspace__panel button {
  border: 1px solid rgba(162, 188, 176, 0.28);
  border-radius: 7px;
  background: rgba(15, 20, 21, 0.72);
  color: rgba(247, 249, 242, 0.96);
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.workbench-pepper-workspace__header button {
  min-width: 76px;
  min-height: 34px;
}

.workbench-pepper-workspace__context {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}

.workbench-pepper-workspace__context .workbench-status-pill {
  min-width: 0;
  max-width: none;
}

.workbench-pepper-workspace__loop {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.workbench-pepper-workspace__loop li,
.workbench-pepper-workspace__panel {
  border: 1px solid rgba(162, 188, 176, 0.22);
  border-radius: 7px;
  background:
    radial-gradient(circle at 14% 0%, rgba(225, 218, 168, 0.07), transparent 46%),
    linear-gradient(135deg, rgba(30, 38, 36, 0.64), rgba(7, 10, 10, 0.7)),
    rgba(13, 18, 19, 0.68);
}

.workbench-pepper-workspace__loop li {
  min-height: 50px;
  padding: 7px;
}

.workbench-pepper-workspace__loop strong {
  display: -webkit-box;
  margin-top: 6px;
  overflow: hidden;
  color: rgba(247, 249, 242, 0.96);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.workbench-pepper-workspace__summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 10px;
}

.workbench-pepper-workspace__summary div {
  min-height: 46px;
  padding: 8px 9px;
  border: 1px solid rgba(162, 188, 176, 0.18);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(20, 29, 29, 0.74), rgba(6, 9, 10, 0.58));
}

.workbench-pepper-workspace__summary span {
  display: block;
  color: rgba(171, 199, 187, 0.86);
  font-size: 9px;
  font-weight: 850;
  line-height: 1.1;
  text-transform: uppercase;
}

.workbench-pepper-workspace__summary strong {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: rgba(247, 249, 242, 0.96);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workbench-pepper-workspace__summary em {
  display: inline-block;
  margin-top: 4px;
  color: rgba(225, 218, 168, 0.9);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.workbench-pepper-workspace__grid {
  display: grid;
  grid-template-columns: minmax(420px, 1.45fr) minmax(270px, 1fr) minmax(270px, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  height: calc(100% - 300px);
  min-height: 0;
}

.workbench-pepper-workspace__panel {
  min-height: 0;
  padding: 10px;
  overflow: hidden;
}

.workbench-pepper-workspace__panel--chat {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
}

.workbench-pepper-workspace__panel-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

.workbench-pepper-workspace__panel-title em {
  flex: 0 0 auto;
  padding: 4px 6px;
  border: 1px solid rgba(162, 188, 176, 0.2);
  border-radius: 999px;
  background: rgba(5, 8, 9, 0.54);
  color: rgba(225, 218, 168, 0.9);
  font-size: 8px;
  font-style: normal;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
}

.workbench-pepper-workspace__transcript {
  display: grid;
  gap: 8px;
  flex: 1 1 auto;
  align-content: start;
  min-height: 0;
  margin-bottom: 10px;
  overflow: hidden;
}

.workbench-pepper-workspace__transcript article,
.workbench-pepper-workspace__dl div,
.workbench-pepper-workspace__preview-box {
  padding: 7px;
  border: 1px solid rgba(162, 188, 176, 0.14);
  border-radius: 6px;
  background: rgba(5, 8, 9, 0.38);
}

.workbench-pepper-workspace__transcript p,
.workbench-pepper-workspace__preview-box p,
.workbench-pepper-workspace__panel-copy {
  display: -webkit-box;
  margin: 5px 0 0;
  overflow: hidden;
  color: rgba(220, 227, 217, 0.9);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.28;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.workbench-pepper-workspace__panel--chat .workbench-pepper-workspace__transcript article:first-child {
  min-height: 132px;
  padding: 16px;
  background:
    radial-gradient(circle at 16% 0%, rgba(225, 218, 168, 0.1), transparent 38%),
    linear-gradient(135deg, rgba(20, 30, 31, 0.78), rgba(5, 8, 9, 0.62));
}

.workbench-pepper-workspace__panel--chat .workbench-pepper-workspace__transcript article:first-child p {
  max-width: 32rem;
  font-size: 13px;
  line-height: 1.45;
  -webkit-line-clamp: 4;
}

.workbench-pepper-workspace__panel-copy {
  margin: 0 0 6px;
  font-size: 11px;
  line-height: 1.3;
  -webkit-line-clamp: 2;
}

.workbench-pepper-workspace__field {
  display: grid;
  gap: 6px;
}

.workbench-pepper-workspace__panel--chat .workbench-pepper-workspace__field {
  margin-top: auto;
}

.workbench-pepper-workspace__field textarea {
  width: 100%;
  min-height: 78px;
  resize: none;
  padding: 8px;
  border: 1px solid rgba(162, 188, 176, 0.16);
  border-radius: 6px;
  background: rgba(5, 8, 9, 0.42);
  color: rgba(238, 242, 232, 0.86);
  font: inherit;
  font-size: 11px;
  line-height: 1.4;
}

.workbench-pepper-workspace__panel:not(.workbench-pepper-workspace__panel--chat)
  .workbench-pepper-workspace__field
  textarea {
  min-height: 40px;
}

.workbench-pepper-workspace__field textarea::-moz-placeholder {
  color: rgba(196, 207, 195, 0.58);
}

.workbench-pepper-workspace__field textarea::placeholder {
  color: rgba(196, 207, 195, 0.58);
}

.workbench-pepper-workspace__dl {
  display: grid;
  gap: 3px;
  margin: 0;
}

.workbench-pepper-workspace__dl dd {
  display: -webkit-box;
  margin: 2px 0 0;
  overflow: hidden;
  color: rgba(238, 242, 232, 0.92);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.15;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.workbench-pepper-workspace__panel button {
  width: 100%;
  min-height: 26px;
  margin-top: 2px;
  color: rgba(196, 207, 195, 0.72);
  cursor: not-allowed;
}

.workbench-pepper-workspace__preview-box strong {
  display: block;
  color: rgba(247, 249, 242, 0.96);
  font-size: 12px;
  font-weight: 850;
}

.workbench-pepper-workspace {
  left: 330px;
  right: 42px;
  bottom: 14px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.workbench-pepper-workspace__header h2 {
  font-size: 22px;
}

.workbench-pepper-workspace__header p {
  color: rgba(239, 245, 236, 0.9);
  font-size: 14px;
}

.workbench-pepper-workspace__header span,
.workbench-pepper-workspace__context span,
.workbench-pepper-workspace__loop span,
.workbench-pepper-workspace__panel-title span,
.workbench-pepper-workspace__field span,
.workbench-pepper-workspace__transcript span,
.workbench-pepper-workspace__dl dt {
  color: rgba(205, 222, 209, 0.94);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.workbench-pepper-workspace__context {
  margin-bottom: 8px;
}

.workbench-pepper-workspace__context .workbench-status-pill {
  min-height: 42px;
  background: rgba(5, 8, 9, 0.46);
}

.workbench-pepper-workspace__context .workbench-status-pill span {
  font-size: 10px;
}

.workbench-pepper-workspace__context .workbench-status-pill strong {
  color: rgba(250, 253, 247, 0.96);
  font-size: 13px;
  line-height: 1.2;
}

.workbench-pepper-workspace__loop {
  margin-bottom: 8px;
}

.workbench-pepper-workspace__loop li {
  min-height: 44px;
}

.workbench-pepper-workspace__loop strong {
  font-size: 11px;
}

.workbench-pepper-workspace__summary {
  margin-bottom: 10px;
}

.workbench-pepper-workspace__summary div {
  min-height: 50px;
  background: linear-gradient(135deg, rgba(22, 32, 31, 0.72), rgba(7, 10, 10, 0.56));
}

.workbench-pepper-workspace__summary span,
.workbench-pepper-workspace__summary em {
  font-size: 10px;
}

.workbench-pepper-workspace__summary strong {
  color: rgba(250, 253, 247, 0.96);
  font-size: 14px;
}

.workbench-pepper-workspace__grid {
  grid-template-columns: minmax(520px, 1.75fr) minmax(250px, 0.9fr) minmax(250px, 0.9fr);
  height: calc(100% - 294px);
}

.workbench-pepper-workspace__panel {
  padding: 12px;
}

.workbench-pepper-workspace__panel-title {
  margin-bottom: 10px;
}

.workbench-pepper-workspace__panel-title em {
  font-size: 10px;
}

.workbench-pepper-workspace__transcript {
  gap: 10px;
}

.workbench-pepper-workspace__transcript article,
.workbench-pepper-workspace__dl div,
.workbench-pepper-workspace__preview-box {
  padding: 7px;
}

.workbench-pepper-workspace__transcript p,
.workbench-pepper-workspace__preview-box p,
.workbench-pepper-workspace__panel-copy {
  color: rgba(239, 245, 236, 0.94);
  font-size: 13px;
  line-height: 1.38;
}

.workbench-pepper-workspace__panel--chat .workbench-pepper-workspace__transcript article:first-child {
  min-height: 188px;
  padding: 20px;
}

.workbench-pepper-workspace__panel--chat .workbench-pepper-workspace__transcript article:first-child p {
  max-width: 38rem;
  font-size: 16px;
  line-height: 1.55;
  -webkit-line-clamp: 4;
}

.workbench-pepper-workspace__panel-copy {
  margin-bottom: 8px;
}

.workbench-pepper-workspace__field textarea {
  min-height: 90px;
  padding: 12px;
  color: rgba(250, 253, 247, 0.96);
  font-size: 14px;
  line-height: 1.45;
}

.workbench-pepper-workspace__panel:not(.workbench-pepper-workspace__panel--chat)
  .workbench-pepper-workspace__field
  textarea {
  height: 48px;
  min-height: 48px;
  padding: 8px;
  font-size: 12px;
  line-height: 1.3;
}

.workbench-pepper-workspace__field textarea::-moz-placeholder {
  color: rgba(218, 226, 211, 0.72);
}

.workbench-pepper-workspace__field textarea::placeholder {
  color: rgba(218, 226, 211, 0.72);
}

.workbench-pepper-workspace__dl {
  gap: 5px;
}

.workbench-pepper-workspace__dl dd {
  color: rgba(244, 249, 239, 0.94);
  font-size: 12px;
  line-height: 1.3;
  -webkit-line-clamp: 2;
}

.workbench-pepper-workspace__prompt-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}

.workbench-pepper-workspace__prompt-controls button {
  flex: 0 1 auto;
  width: auto;
  min-height: 30px;
  margin-top: 0;
  padding: 0 10px;
  color: rgba(219, 229, 217, 0.7);
}

/* Pepper expanded workspace readability scale. Keep this block late so it wins over the mockup-era compact styles. */
.workbench-pepper-workspace {
  top: 54px;
  left: 300px;
  right: 24px;
  bottom: 10px;
  padding: 18px;
  background:
    radial-gradient(ellipse at 16% 0%, rgba(225, 218, 168, 0.12), transparent 40%),
    radial-gradient(ellipse at 94% 14%, rgba(92, 143, 132, 0.16), transparent 48%),
    linear-gradient(135deg, rgba(32, 43, 41, 0.94), rgba(8, 12, 12, 0.94) 56%, rgba(30, 24, 18, 0.86)),
    rgba(6, 9, 10, 0.92);
  color: rgba(250, 253, 247, 0.98);
}

.workbench-pepper-workspace__header {
  margin-bottom: 8px;
  padding-bottom: 8px;
}

.workbench-pepper-workspace__header span,
.workbench-pepper-workspace__context span,
.workbench-pepper-workspace__loop span,
.workbench-pepper-workspace__panel-title span,
.workbench-pepper-workspace__field span,
.workbench-pepper-workspace__transcript span,
.workbench-pepper-workspace__dl dt {
  color: rgba(218, 232, 219, 0.96);
  font-size: 12px;
  letter-spacing: 0.03em;
  line-height: 1.25;
}

.workbench-pepper-workspace__header h2 {
  margin-top: 6px;
  font-size: 27px;
  line-height: 1.12;
}

.workbench-pepper-workspace__header p {
  max-width: 820px;
  color: rgba(239, 245, 236, 0.94);
  font-size: 15px;
  line-height: 1.4;
}

.workbench-pepper-workspace__header button {
  min-width: 88px;
  min-height: 40px;
  font-size: 13px;
}

.workbench-pepper-workspace__context {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}

.workbench-pepper-workspace__context .workbench-status-pill {
  min-height: 50px;
  padding: 8px 12px;
  border-color: rgba(178, 205, 188, 0.24);
  background: rgba(7, 13, 13, 0.52);
}

.workbench-pepper-workspace__context .workbench-status-pill span {
  font-size: 11px;
}

.workbench-pepper-workspace__context .workbench-status-pill strong {
  color: rgba(252, 255, 249, 0.98);
  font-size: 16px;
  line-height: 1.25;
}

.workbench-pepper-workspace__loop {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.workbench-pepper-workspace__loop li {
  min-height: 38px;
  padding: 7px 10px;
  background: rgba(9, 15, 15, 0.46);
}

.workbench-pepper-workspace__loop strong {
  color: rgba(250, 253, 247, 0.98);
  font-size: 13px;
  line-height: 1.25;
}

.workbench-pepper-workspace__summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.workbench-pepper-workspace__summary div {
  min-height: 46px;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(25, 36, 34, 0.72), rgba(8, 13, 13, 0.58));
}

.workbench-pepper-workspace__summary span,
.workbench-pepper-workspace__summary em {
  font-size: 11px;
}

.workbench-pepper-workspace__summary strong {
  color: rgba(252, 255, 249, 0.98);
  font-size: 14px;
  line-height: 1.25;
}

.workbench-pepper-workspace__grid {
  grid-template-columns: minmax(500px, 1.65fr) minmax(230px, 0.72fr) minmax(230px, 0.72fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px;
  height: calc(100% - 350px);
}

.workbench-pepper-workspace__panel {
  padding: 14px;
  border-color: rgba(178, 205, 188, 0.24);
  background:
    radial-gradient(circle at 14% 0%, rgba(225, 218, 168, 0.08), transparent 46%),
    linear-gradient(135deg, rgba(28, 41, 39, 0.76), rgba(8, 12, 12, 0.72)),
    rgba(13, 18, 19, 0.76);
}

.workbench-pepper-workspace__panel--chat {
  padding: 18px;
  border-color: rgba(225, 218, 168, 0.34);
  background:
    radial-gradient(circle at 18% 0%, rgba(225, 218, 168, 0.14), transparent 42%),
    linear-gradient(135deg, rgba(32, 47, 45, 0.88), rgba(7, 12, 12, 0.78)),
    rgba(13, 18, 19, 0.82);
}

.workbench-pepper-workspace__panel-title {
  margin-bottom: 12px;
}

.workbench-pepper-workspace__panel-title span {
  font-size: 13px;
}

.workbench-pepper-workspace__panel-title em {
  padding: 5px 8px;
  color: rgba(239, 229, 174, 0.94);
  font-size: 12px;
}

.workbench-pepper-workspace__transcript {
  gap: 12px;
  margin-bottom: 12px;
  overflow-y: auto;
  padding-right: 4px;
}

.workbench-pepper-workspace__transcript article,
.workbench-pepper-workspace__dl div,
.workbench-pepper-workspace__preview-box {
  padding: 12px;
  border-color: rgba(178, 205, 188, 0.18);
  background: rgba(5, 9, 9, 0.44);
}

.workbench-pepper-workspace__panel--chat .workbench-pepper-workspace__transcript article:first-child {
  min-height: 220px;
  padding: 22px;
  background:
    radial-gradient(circle at 16% 0%, rgba(225, 218, 168, 0.14), transparent 38%),
    linear-gradient(135deg, rgba(24, 38, 39, 0.86), rgba(5, 9, 9, 0.68));
}

.workbench-pepper-workspace__transcript p,
.workbench-pepper-workspace__preview-box p,
.workbench-pepper-workspace__panel-copy {
  display: block;
  overflow: visible;
  color: rgba(244, 249, 239, 0.96);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.5;
  -webkit-line-clamp: initial;
}

.workbench-pepper-workspace__panel--chat .workbench-pepper-workspace__transcript article:first-child p {
  max-width: 48rem;
  color: rgba(252, 255, 249, 0.98);
  font-size: 17px;
  line-height: 1.62;
  -webkit-line-clamp: initial;
}

.workbench-pepper-workspace__panel-copy {
  margin-bottom: 12px;
}

.workbench-pepper-workspace__field textarea {
  min-height: 126px;
  padding: 14px 16px;
  border-color: rgba(225, 218, 168, 0.26);
  background: rgba(5, 9, 9, 0.58);
  color: rgba(252, 255, 249, 0.98);
  font-size: 16px;
  line-height: 1.55;
}

.workbench-pepper-workspace__field textarea::-moz-placeholder {
  color: rgba(224, 234, 220, 0.78);
}

.workbench-pepper-workspace__field textarea::placeholder {
  color: rgba(224, 234, 220, 0.78);
}

.workbench-pepper-workspace__dl {
  gap: 6px;
}

.workbench-pepper-workspace__dl dd {
  display: block;
  overflow: visible;
  color: rgba(250, 253, 247, 0.96);
  font-size: 15px;
  line-height: 1.35;
  -webkit-line-clamp: initial;
}

.workbench-pepper-workspace__panel:not(.workbench-pepper-workspace__panel--chat)
  .workbench-pepper-workspace__panel-copy {
  margin-bottom: 8px;
  line-height: 1.35;
}

.workbench-pepper-workspace__panel:not(.workbench-pepper-workspace__panel--chat)
  .workbench-pepper-workspace__dl div,
.workbench-pepper-workspace__panel:not(.workbench-pepper-workspace__panel--chat)
  .workbench-pepper-workspace__preview-box {
  padding: 9px;
}

.workbench-pepper-workspace__panel:not(.workbench-pepper-workspace__panel--chat)
  .workbench-pepper-workspace__dl dd {
  line-height: 1.3;
}

.workbench-pepper-workspace__panel button,
.workbench-pepper-workspace__prompt-controls button {
  min-height: 38px;
  padding: 0 14px;
  color: rgba(224, 234, 220, 0.76);
  font-size: 13px;
}

.workbench-pepper-workspace__prompt-controls {
  gap: 9px;
  margin-top: 12px;
}

.workbench-pepper-workspace__preview-box strong {
  font-size: 17px;
  line-height: 1.3;
}

@media (max-width: 1280px) {
  .workbench-pepper-workspace {
    left: 260px;
    right: 18px;
  }

  .workbench-pepper-workspace__grid {
    grid-template-columns: minmax(460px, 1.55fr) minmax(260px, 1fr);
  }
}

@media (max-width: 980px) {
  .workbench-pepper-workspace {
    left: 16px;
    right: 16px;
    top: 64px;
    overflow-y: auto;
  }

  .workbench-pepper-workspace__context,
  .workbench-pepper-workspace__summary,
  .workbench-pepper-workspace__loop,
  .workbench-pepper-workspace__grid {
    grid-template-columns: 1fr;
  }

  .workbench-pepper-workspace__grid {
    height: auto;
  }
}

/* Pepper expanded workspace IA. This late block is the authoritative readable scale for the chat-first workbench. */
.workbench-pepper-workspace {
  top: 38px;
  left: clamp(260px, 19vw, 332px);
  right: clamp(14px, 1.5vw, 28px);
  bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
  overflow: hidden;
  border-color: rgba(190, 214, 195, 0.34);
  background:
    radial-gradient(ellipse at 18% 0%, rgba(225, 218, 168, 0.12), transparent 38%),
    radial-gradient(ellipse at 96% 12%, rgba(92, 143, 132, 0.16), transparent 46%),
    linear-gradient(135deg, rgba(32, 43, 41, 0.94), rgba(8, 12, 12, 0.94) 56%, rgba(30, 24, 18, 0.86)),
    rgba(6, 9, 10, 0.92);
  color: rgba(250, 253, 247, 0.98);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

.workbench-pepper-workspace__header {
  flex: 0 0 auto;
  margin: 0;
  min-height: 26px;
  padding: 0 0 3px;
  border-bottom: 1px solid rgba(190, 214, 195, 0.18);
}

.workbench-pepper-workspace__header h2 {
  margin: 1px 0 0;
  color: rgba(252, 255, 249, 0.99);
  font-size: 18px;
  font-weight: 850;
  line-height: 1.12;
  letter-spacing: 0;
}

.workbench-pepper-workspace__header span,
.workbench-pepper-workspace__context span,
.workbench-pepper-workspace__loop span,
.workbench-pepper-workspace__chips span,
.workbench-pepper-workspace__panel-title span,
.workbench-pepper-chat__composer span,
.workbench-pepper-chat__transcript span,
.workbench-director-rail__header span,
.workbench-director-tabs span,
.workbench-director-panel span {
  display: block;
  color: rgba(218, 232, 219, 0.96);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.workbench-pepper-workspace__header button {
  min-width: 64px;
  min-height: 26px;
  border: 1px solid rgba(190, 214, 195, 0.28);
  border-radius: 7px;
  background: rgba(15, 20, 21, 0.72);
  color: rgba(247, 249, 242, 0.96);
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.workbench-pepper-workspace__context {
  flex: 0 0 auto;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.workbench-pepper-workspace__context .workbench-status-pill {
  min-width: 0;
  max-width: none;
  height: 36px;
  min-height: 36px;
  padding: 5px 10px;
  overflow: hidden;
  border-color: rgba(178, 205, 188, 0.24);
  background: rgba(7, 13, 13, 0.52);
}

.workbench-pepper-workspace__context .workbench-status-pill span {
  font-size: 10px;
}

.workbench-pepper-workspace__context .workbench-status-pill strong {
  color: rgba(252, 255, 249, 0.98);
  overflow: hidden;
  font-size: 12px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workbench-pepper-workspace__loop {
  flex: 0 0 auto;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.workbench-pepper-workspace__loop li {
  display: flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border-color: rgba(178, 205, 188, 0.18);
  background: rgba(9, 15, 15, 0.46);
}

.workbench-pepper-workspace__loop strong {
  display: inline;
  margin: 0 0 0 5px;
  color: rgba(250, 253, 247, 0.98);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
}

.workbench-pepper-workspace__loop span {
  display: inline;
  flex: 0 0 auto;
}

.workbench-pepper-workspace__chips {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.workbench-pepper-workspace__chips div {
  height: 36px;
  min-height: 36px;
  padding: 5px 10px;
  overflow: hidden;
  border: 1px solid rgba(178, 205, 188, 0.18);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(25, 36, 34, 0.72), rgba(8, 13, 13, 0.58));
}

.workbench-pepper-workspace__chips strong {
  display: block;
  margin-top: 1px;
  overflow: hidden;
  color: rgba(252, 255, 249, 0.98);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workbench-pepper-workspace__chips em {
  display: none;
  margin-top: 0;
  color: rgba(239, 229, 174, 0.94);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.workbench-pepper-workspace__layout {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(300px, 0.62fr) minmax(640px, 1.38fr);
  gap: 10px;
}

.workbench-pepper-chat,
.workbench-director-rail {
  min-height: 0;
  border: 1px solid rgba(178, 205, 188, 0.24);
  border-radius: 8px;
  background:
    radial-gradient(circle at 14% 0%, rgba(225, 218, 168, 0.09), transparent 44%),
    linear-gradient(135deg, rgba(28, 41, 39, 0.78), rgba(8, 12, 12, 0.74)),
    rgba(13, 18, 19, 0.78);
}

.workbench-pepper-chat {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-color: rgba(225, 218, 168, 0.36);
  background:
    radial-gradient(circle at 18% 0%, rgba(225, 218, 168, 0.14), transparent 42%),
    linear-gradient(135deg, rgba(32, 47, 45, 0.9), rgba(7, 12, 12, 0.8)),
    rgba(13, 18, 19, 0.84);
}

.workbench-director-rail {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  padding: 14px;
}

/* G-DC3 correction (2026-05-25) — when top-level Stage/Director tabs
   are merged INTO the rail header (not their own row), the rail has
   only two direct children: header (auto) + tab panel (1fr). The
   default 3-row template leaves the panel in an auto row and the
   Stage tab can't fill the right panel height. Modifier class
   overrides to 2-row layout so the Stage's 3/4 + 1/4 chip ratio is
   visible. */
/* G-DC3 correction — 3-row grid when Director Console sub-tabs are
   present (header / sub-tabs / content panel). Stage tab only has
   2 children (header / content) so the 3rd auto row collapses. */
.workbench-director-rail.workbench-director-rail--g-dc3-correction {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.workbench-director-rail.workbench-director-rail--g-dc3-correction
  > .workbench-director-panel {
  min-height: 0;
  height: 100%;
}

.workbench-pepper-workspace__panel-title,
.workbench-director-rail__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
}

.workbench-director-rail__header h3 {
  margin: 2px 0 0;
  color: rgba(252, 255, 249, 0.99);
  font-size: 16px;
  font-weight: 850;
  line-height: 1.15;
}

.workbench-pepper-workspace__panel-title em,
.workbench-director-rail__header em,
.workbench-director-tabs em {
  flex: 0 0 auto;
  padding: 4px 6px;
  border: 1px solid rgba(178, 205, 188, 0.22);
  border-radius: 999px;
  background: rgba(5, 8, 9, 0.54);
  color: rgba(239, 229, 174, 0.94);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.workbench-pepper-chat__transcript {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 4px;
}

.workbench-pepper-chat__transcript article,
.workbench-director-panel section {
  padding: 12px 14px;
  border: 1px solid rgba(178, 205, 188, 0.18);
  border-radius: 7px;
  background: rgba(5, 9, 9, 0.46);
}

.workbench-pepper-chat__response {
  flex: 1 1 auto;
  min-height: 220px;
  padding: 16px !important;
  border-color: rgba(225, 218, 168, 0.28) !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(225, 218, 168, 0.14), transparent 38%),
    linear-gradient(135deg, rgba(24, 38, 39, 0.88), rgba(5, 9, 9, 0.7)) !important;
}

.workbench-pepper-chat__transcript p,
.workbench-director-panel p {
  margin: 4px 0 0;
  color: rgba(244, 249, 239, 0.96);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.workbench-pepper-chat__response p {
  max-width: 52rem;
  color: rgba(252, 255, 249, 0.99);
  font-size: 16px;
  line-height: 1.55;
}

.workbench-pepper-chat__composer {
  flex: 0 0 auto;
  display: grid;
  gap: 5px;
  margin-top: 8px;
}

.workbench-pepper-chat__composer textarea {
  width: 100%;
  min-height: 90px;
  resize: none;
  padding: 12px 13px;
  border: 1px solid rgba(225, 218, 168, 0.28);
  border-radius: 7px;
  background: rgba(5, 9, 9, 0.6);
  color: rgba(252, 255, 249, 0.98);
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
}

.workbench-pepper-chat__composer textarea::-moz-placeholder {
  color: rgba(224, 234, 220, 0.78);
}

.workbench-pepper-chat__composer textarea::placeholder {
  color: rgba(224, 234, 220, 0.78);
}

.workbench-pepper-workspace__prompt-controls {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.workbench-pepper-workspace__prompt-controls button {
  width: auto;
  min-height: 30px;
  margin: 0;
  padding: 0 9px;
  border: 1px solid rgba(178, 205, 188, 0.22);
  border-radius: 7px;
  background: rgba(11, 16, 16, 0.6);
  color: rgba(224, 234, 220, 0.76);
  cursor: not-allowed;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.workbench-director-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 5px;
}

.workbench-director-tabs button {
  display: grid;
  gap: 3px;
  min-height: 34px;
  padding: 5px 7px;
  border: 1px solid rgba(178, 205, 188, 0.18);
  border-radius: 7px;
  background: rgba(7, 12, 12, 0.54);
  color: rgba(250, 253, 247, 0.96);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.workbench-director-tabs button[aria-selected="true"] {
  border-color: rgba(225, 218, 168, 0.54);
  background: rgba(35, 43, 36, 0.72);
}

.workbench-director-tabs span {
  font-size: 11px;
}

.workbench-director-tabs em {
  justify-self: start;
  padding: 3px 6px;
  font-size: 9px;
}

.workbench-director-panel {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 6px;
  overflow-y: auto;
  padding-right: 3px;
}

.workbench-protocol-block,
.workbench-director-lane-block,
.workbench-director-reconciliation {
  grid-column: 1 / -1;
}

@media (max-width: 1180px) {
  .workbench-director-panel {
    grid-template-columns: 1fr;
  }
}

.workbench-director-panel p {
  font-size: 12px;
  line-height: 1.38;
}

.workbench-director-panel h4 {
  margin: 3px 0 0;
  color: rgba(252, 255, 249, 0.98);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.25;
}

.workbench-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.workbench-task-meta span,
.workbench-task-meta em,
.workbench-task-warning {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 2px 5px;
  border: 1px solid rgba(178, 205, 188, 0.22);
  border-radius: 999px;
  background: rgba(5, 8, 9, 0.5);
  color: rgba(239, 229, 174, 0.96);
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.15;
  text-transform: uppercase;
}

.workbench-task-list {
  display: grid;
  gap: 5px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.workbench-task-list li {
  overflow-wrap: anywhere;
  padding: 6px 8px;
  border: 1px solid rgba(178, 205, 188, 0.16);
  border-radius: 7px;
  background: rgba(7, 12, 12, 0.42);
  color: rgba(244, 249, 239, 0.95);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

.workbench-task-list--chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.workbench-task-list--chips li {
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: min(100%, 330px);
  min-height: 24px;
  overflow: hidden;
  border-radius: 999px;
  color: rgba(244, 249, 239, 0.94);
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workbench-task-list--chips li,
.workbench-task-list--blocked li {
  color: rgba(239, 229, 174, 0.96);
}

.workbench-evidence-block {
  border-left: 3px solid rgba(182, 208, 194, 0.28);
  padding-left: 10px;
}

.workbench-evidence-block--expected {
  border-left-color: rgba(108, 231, 255, 0.46);
}

.workbench-evidence-block--returned {
  border-left-color: rgba(239, 229, 174, 0.5);
}

.workbench-evidence-block--missing,
.workbench-evidence-block--eligibility {
  border-left-color: rgba(255, 139, 98, 0.56);
}

.workbench-evidence-return-protocol {
  border-left: 3px solid rgba(239, 229, 174, 0.58);
  padding-left: 10px;
}

.workbench-evidence-protocol-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.workbench-evidence-protocol-grid article,
.workbench-evidence-proof-checklist div,
.workbench-review-rubric div {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(178, 205, 188, 0.16);
  border-radius: 7px;
  background: rgba(7, 12, 12, 0.42);
}

.workbench-evidence-proof-checklist,
.workbench-review-rubric {
  display: grid;
  gap: 8px;
  margin: 9px 0;
}

.workbench-evidence-proof-checklist strong,
.workbench-review-rubric strong {
  display: block;
  color: rgba(252, 255, 249, 0.98);
  font-size: 14px;
  font-weight: 850;
}

.workbench-evidence-proof-checklist em {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(5, 8, 9, 0.58);
  color: rgba(239, 229, 174, 0.9);
  font-style: normal;
  font-size: 11px;
  text-transform: uppercase;
}

.workbench-evidence-proof-checklist small {
  display: block;
  margin-top: 6px;
  color: rgba(178, 205, 188, 0.74);
}

.workbench-evidence-return-protocol pre {
  margin: 10px 0 0;
  padding: 12px;
  overflow: auto;
  border: 1px solid rgba(178, 205, 188, 0.16);
  border-radius: 7px;
  background: rgba(7, 12, 12, 0.58);
  color: rgba(252, 255, 249, 0.94);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.workbench-lifecycle-block {
  border-left: 3px solid rgba(239, 229, 174, 0.5);
  padding-left: 10px;
}

.workbench-protocol-block {
  border-left: 3px solid rgba(239, 229, 174, 0.5);
  padding-left: 7px;
}

.workbench-protocol-breadcrumb {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(98px, 1fr));
  gap: 5px;
  margin: 5px 0 0;
  padding: 0;
  list-style: none;
}

.workbench-protocol-breadcrumb__step {
  min-width: 0;
  padding: 5px 6px;
  border: 1px solid rgba(178, 205, 188, 0.16);
  border-radius: 7px;
  background: rgba(7, 12, 12, 0.42);
}

.workbench-protocol-breadcrumb__step div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
}

.workbench-protocol-breadcrumb__step span,
.workbench-protocol-breadcrumb__step em {
  overflow-wrap: anywhere;
}

.workbench-protocol-breadcrumb__step span {
  color: rgba(252, 255, 249, 0.98);
  font-size: 11px;
  font-weight: 900;
}

.workbench-protocol-breadcrumb__step em {
  padding: 3px 5px;
  border-radius: 999px;
  background: rgba(5, 8, 9, 0.58);
  color: rgba(239, 229, 174, 0.96);
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
  text-transform: uppercase;
}

.workbench-protocol-breadcrumb__step p {
  margin: 4px 0 0;
  display: -webkit-box;
  overflow: hidden;
  color: rgba(244, 249, 239, 0.9);
  font-size: 11px;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.workbench-protocol-breadcrumb__step small {
  display: none;
  margin-top: 0;
  color: rgba(178, 205, 188, 0.72);
  font-size: 10px;
  line-height: 1.25;
  overflow-wrap: anywhere;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.workbench-protocol-breadcrumb__step.is-current {
  border-color: rgba(239, 229, 174, 0.46);
}

.workbench-protocol-breadcrumb__step.is-not-received,
.workbench-protocol-breadcrumb__step.is-not-reviewed,
.workbench-protocol-breadcrumb__step.is-not-ready,
.workbench-protocol-breadcrumb__step.is-blocked {
  border-color: rgba(255, 139, 98, 0.36);
}

.workbench-director-lane-block,
.workbench-director-reconciliation,
.workbench-prompt-composition {
  border-left: 3px solid rgba(108, 231, 255, 0.36);
  padding-left: 7px;
}

.workbench-manual-handoff-preview {
  border-left: 3px solid rgba(239, 229, 174, 0.58);
  padding-left: 10px;
}

.workbench-manual-handoff-preview pre {
  max-height: 360px;
  margin: 10px 0 0;
  padding: 12px;
  overflow: auto;
  border: 1px solid rgba(178, 205, 188, 0.16);
  border-radius: 7px;
  background: rgba(7, 12, 12, 0.58);
  color: rgba(252, 255, 249, 0.94);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.workbench-director-lane-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 6px;
  margin-top: 6px;
}

.workbench-director-lane-card {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(178, 205, 188, 0.16);
  border-radius: 7px;
  background: rgba(7, 12, 12, 0.42);
}

.workbench-director-lane-card > div {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
}

.workbench-director-lane-card em {
  flex: 0 0 auto;
  color: rgba(239, 229, 174, 0.96);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
  text-transform: uppercase;
}

.workbench-director-lane-card strong,
.workbench-director-lane-card dd {
  overflow-wrap: anywhere;
}

.workbench-director-lane-card dl {
  display: grid;
  gap: 5px;
  margin: 6px 0 0;
}

.workbench-director-lane-card dt {
  color: rgba(178, 205, 188, 0.7);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.workbench-director-lane-card dd {
  margin: 2px 0 0;
  color: rgba(252, 255, 249, 0.92);
  font-size: 11px;
  line-height: 1.3;
}

.workbench-director-lane-card p {
  display: -webkit-box;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.workbench-director-lane-card dl div:nth-child(n+2) {
  display: none;
}

.workbench-director-reconciliation .workbench-task-list li {
  padding-block: 4px;
}

.workbench-task-key-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 6px;
}

.workbench-task-key-values div,
.workbench-proof-gates div {
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(178, 205, 188, 0.16);
  border-radius: 7px;
  background: rgba(7, 12, 12, 0.42);
}

.workbench-task-key-values strong {
  display: block;
  margin-top: 3px;
  overflow-wrap: anywhere;
  color: rgba(252, 255, 249, 0.98);
  font-size: 12px;
  line-height: 1.3;
}

.workbench-proof-gates {
  display: grid;
  gap: 8px;
  margin-top: 9px;
}

.workbench-proof-gates strong {
  display: block;
  color: rgba(252, 255, 249, 0.98);
  font-size: 15px;
  font-weight: 850;
}

.workbench-proof-gates em {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(5, 8, 9, 0.58);
  color: rgba(239, 229, 174, 0.96);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  text-transform: uppercase;
}

.workbench-details-sheet__section h4 {
  margin: 8px 0 0;
  color: rgba(252, 255, 249, 0.98);
  font-size: 18px;
  font-weight: 850;
  line-height: 1.25;
}

.workbench-details-sheet__section p {
  margin: 8px 0 0;
  overflow-wrap: anywhere;
  color: rgba(244, 249, 239, 0.94);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.5;
}

.workbench-details-sheet .workbench-task-key-values {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workbench-details-sheet .workbench-task-list li,
.workbench-details-sheet .workbench-task-key-values strong {
  font-size: 13px;
}

.workbench-focus-lens {
  --focus-lens-width: min(49vw, 720px);
}

.workbench-focus-lens--expanded {
  width: min(62vw, 960px);
  max-height: min(70vh, 760px);
}

@media (max-width: 1280px) {
  .workbench-pepper-workspace {
    left: 260px;
    right: 18px;
  }

  .workbench-pepper-workspace__layout {
    grid-template-columns: minmax(480px, 1.45fr) minmax(330px, 1fr);
  }
}

@media (max-width: 980px) {
  .workbench-pepper-workspace {
    left: 16px;
    right: 16px;
    top: 64px;
    overflow-y: auto;
  }

  .workbench-pepper-workspace__context,
  .workbench-pepper-workspace__loop,
  .workbench-pepper-workspace__chips,
  .workbench-pepper-workspace__layout,
  .workbench-director-tabs {
    grid-template-columns: 1fr;
  }

  .workbench-pepper-workspace__layout {
    min-height: 980px;
  }
}

.workbench-bottom-evidence-strip {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: min(1120px, 94%);
  min-height: 84px;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid rgba(162, 188, 176, 0.34);
  border-radius: 8px;
  background: rgba(6, 9, 10, 0.74);
  box-shadow: 0 -14px 30px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.035) inset;
  pointer-events: auto;
}

.workbench-bottom-evidence-strip__title {
  flex: 0 0 132px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(162, 188, 176, 0.2);
  border-radius: 7px;
  background: rgba(13, 18, 19, 0.66);
}

.workbench-bottom-evidence-strip__items {
  display: grid;
  grid-template-columns:
    minmax(100px, 1fr)
    minmax(80px, 0.75fr)
    minmax(90px, 0.8fr)
    minmax(100px, 1fr)
    minmax(125px, 1.2fr)
    minmax(110px, 1.1fr)
    minmax(125px, 1.2fr);
  flex: 1 1 auto;
  gap: 7px;
  min-width: 0;
}

.workbench-bottom-evidence-strip__cell {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(162, 188, 176, 0.2);
  border-radius: 7px;
  background: rgba(13, 18, 19, 0.66);
}

.workbench-bottom-evidence-strip__cell span {
  display: block;
  color: rgba(171, 199, 187, 0.86);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}

.workbench-bottom-evidence-strip__cell strong {
  display: -webkit-box;
  margin-top: 5px;
  overflow: hidden;
  color: rgba(247, 249, 242, 0.98);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.28;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* Workbench shell readability pass: keep the shell compact, but readable at 100% zoom. */
.workbench-top-status-rail,
.workbench-bottom-evidence-strip,
.workbench-os-spine,
.workbench-pepper-dock,
.workbench-focus-lens {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

.workbench-top-status-rail {
  width: min(1180px, 92%);
  min-height: 64px;
  gap: 8px;
  padding: 9px 12px;
}

.workbench-top-work-strip {
  display: flex;
  justify-content: center;
  gap: 8px;
  width: min(860px, 72%);
  min-height: 38px;
  margin: 8px auto 0;
  padding: 6px 10px;
  border: 1px solid rgba(225, 218, 168, 0.28);
  border-radius: 7px;
  background: rgba(6, 9, 10, 0.52);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.025) inset;
  pointer-events: auto;
}

.workbench-top-work-strip .workbench-status-pill {
  min-width: 172px;
  max-width: 260px;
  min-height: 34px;
  padding: 5px 9px;
}

.workbench-top-work-strip .workbench-status-pill span {
  font-size: 11px;
}

.workbench-top-work-strip .workbench-status-pill strong {
  font-size: 13px;
  line-height: 1.24;
}

.workbench-status-pill {
  min-width: 104px;
  max-width: 202px;
  min-height: 42px;
  padding: 7px 10px;
}

.workbench-status-pill span {
  font-size: 12px;
  line-height: 1.2;
}

.workbench-status-pill strong {
  font-size: 14px;
  line-height: 1.28;
  white-space: normal;
}

.workbench-os-spine {
  padding: 14px;
}

.workbench-os-spine__header {
  padding: 10px 10px 12px;
}

.workbench-os-spine__header span {
  font-size: 12px;
  line-height: 1.25;
}

.workbench-os-spine__header strong {
  font-size: 16px;
  line-height: 1.3;
}

.workbench-os-spine__items,
.workbench-os-spine__group {
  gap: 8px;
}

.workbench-os-spine__items > .workbench-os-spine__group > button {
  min-height: 48px;
  gap: 10px;
  padding: 10px 11px;
}

.workbench-os-spine__items > .workbench-os-spine__group > button span {
  font-size: 15px;
  line-height: 1.25;
}

.workbench-os-spine__items > .workbench-os-spine__group > button strong {
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 1.15;
}

.workbench-os-spine__subcategory-tray {
  gap: 7px;
  margin: 0 0 3px 12px;
  padding: 10px;
}

.workbench-os-spine__subcategory-tray button {
  min-height: 40px;
  gap: 10px;
  padding: 8px 10px;
}

.workbench-os-spine__subcategory-tray button span {
  font-size: 14px;
  line-height: 1.25;
}

.workbench-os-spine__subcategory-tray button strong {
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 1.15;
}

.workbench-focus-lens {
  width: min(54vw, 840px);
  max-height: min(68vh, 730px);
  padding: 20px;
}

.workbench-focus-lens--expanded {
  width: min(66vw, 1040px);
  max-height: min(76vh, 820px);
}

.workbench-focus-lens__header {
  gap: 14px;
  margin-bottom: 12px;
}

.workbench-focus-lens__header h2 {
  font-size: 23px;
  line-height: 1.2;
}

.workbench-focus-lens__header span,
.workbench-focus-lens__grid span,
.workbench-focus-lens__detail-area span,
.workbench-focus-lens__subcategories span,
.workbench-focus-lens__projects span,
.workbench-focus-lens__safe-next span,
.workbench-build-flow span,
.workbench-people-map span {
  font-size: 12px;
  line-height: 1.2;
}

.workbench-focus-lens__header button {
  min-height: 36px;
  padding: 8px 11px;
  font-size: 12px;
}

.workbench-focus-lens__summary {
  margin-bottom: 14px;
  font-size: 16px;
  line-height: 1.58;
}

.workbench-focus-lens__status-row {
  grid-template-columns: minmax(132px, 0.36fr) minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}

.workbench-focus-lens__safe-next {
  margin-bottom: 14px;
  padding: 12px;
}

.workbench-focus-lens__safe-next strong,
.workbench-build-flow strong,
.workbench-people-map strong,
.workbench-focus-lens__subcategories strong,
.workbench-focus-lens__grid strong,
.workbench-focus-lens__detail-area strong,
.workbench-focus-lens__projects strong {
  font-size: 15px;
  line-height: 1.42;
  white-space: normal;
}

.workbench-build-flow em,
.workbench-people-map em {
  font-size: 14px;
  line-height: 1.42;
}

.workbench-people-map,
.workbench-focus-lens__subcategories,
.workbench-focus-lens__projects,
.workbench-surfaced-truth,
.workbench-focus-lens__grid,
.workbench-focus-lens__detail-area {
  gap: 10px;
  margin-bottom: 14px;
}

.workbench-people-map div,
.workbench-focus-lens__subcategories div,
.workbench-focus-lens__grid div,
.workbench-focus-lens__detail-area div,
.workbench-focus-lens__projects button {
  min-height: 62px;
  padding: 12px;
}

.workbench-focus-lens__projects button {
  align-items: flex-start;
  gap: 5px;
}

.workbench-focus-lens__projects em,
.workbench-focus-lens__projects small {
  display: block;
  color: rgba(202, 217, 207, 0.84);
  font-size: 13px;
  font-style: normal;
  line-height: 1.35;
  text-align: left;
  text-transform: none;
}

.workbench-focus-lens__projects small {
  color: rgba(236, 241, 232, 0.9);
  font-size: 14px;
}

.workbench-surfaced-truth {
  display: grid;
  border: 1px solid rgba(225, 218, 168, 0.22);
  border-radius: 8px;
  padding: 12px;
  background:
    radial-gradient(circle at 12% 0%, rgba(225, 218, 168, 0.08), transparent 42%),
    linear-gradient(135deg, rgba(21, 31, 29, 0.68), rgba(7, 10, 10, 0.66));
}

.workbench-surfaced-truth__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.workbench-surfaced-truth__header span,
.workbench-surfaced-truth__summary span,
.workbench-surfaced-truth__list > span {
  color: rgba(183, 204, 193, 0.88);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.workbench-surfaced-truth__header strong {
  color: rgba(239, 229, 174, 0.92);
  font-size: 13px;
  line-height: 1.3;
  text-align: right;
  text-transform: uppercase;
}

.workbench-surfaced-truth__summary,
.workbench-surfaced-truth__list {
  display: grid;
  gap: 8px;
}

.workbench-surfaced-truth__summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.workbench-surfaced-truth__summary div,
.workbench-surfaced-truth__list div {
  border: 1px solid rgba(162, 188, 176, 0.18);
  border-radius: 7px;
  padding: 9px 10px;
  background: rgba(5, 9, 9, 0.36);
}

.workbench-surfaced-truth__summary strong,
.workbench-surfaced-truth__list strong {
  display: block;
  color: rgba(252, 255, 249, 0.96);
  font-size: 14px;
  line-height: 1.42;
  white-space: normal;
}

.workbench-surfaced-truth__list p {
  margin: 3px 0 0;
  color: rgba(229, 236, 225, 0.9);
  font-size: 14px;
  line-height: 1.42;
}

.workbench-surfaced-truth__list em {
  display: inline-block;
  margin-top: 5px;
  color: rgba(239, 229, 174, 0.92);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}

.workbench-surfaced-truth__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.workbench-surfaced-truth__chips span {
  border: 1px solid rgba(162, 188, 176, 0.18);
  border-radius: 999px;
  padding: 5px 8px;
  color: rgba(236, 241, 232, 0.9);
  background: rgba(7, 11, 11, 0.42);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.1;
}

.workbench-pepper-dock {
  display: flex;
  flex-direction: column;
  padding: 14px;
  overflow: hidden;
}

.workbench-pepper-dock__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 9px 12px;
  margin-bottom: 10px;
}

.workbench-pepper-dock__header span,
.workbench-pepper-dock__context-row span,
.workbench-pepper-dock__summary-grid span,
.workbench-pepper-dock__chip-grid span,
.workbench-pepper-dock__compact-title span,
.workbench-pepper-dock__chat-card label span {
  font-size: 12px;
  line-height: 1.2;
}

.workbench-pepper-dock__header strong {
  font-size: 16px;
  line-height: 1.3;
}

.workbench-pepper-dock__header em,
.workbench-pepper-dock__compact-title em,
.workbench-pepper-dock__chip-grid em {
  font-size: 13px;
  line-height: 1.25;
}

.workbench-pepper-dock__context-row,
.workbench-pepper-dock__summary-grid {
  gap: 8px;
  margin-bottom: 10px;
}

.workbench-pepper-dock__context-row div,
.workbench-pepper-dock__summary-grid div,
.workbench-pepper-dock__chip-grid div,
.workbench-pepper-dock__compact-card,
.workbench-pepper-dock__chat-card,
.workbench-pepper-dock__handoff,
.workbench-pepper-dock__state-chips {
  padding: 10px;
}

.workbench-pepper-dock__context-row strong,
.workbench-pepper-dock__summary-grid strong,
.workbench-pepper-dock__chip-grid strong,
.workbench-pepper-dock__compact-card strong,
.workbench-pepper-dock__chat-card strong,
.workbench-pepper-dock__lane strong {
  font-size: 14px;
  line-height: 1.35;
  white-space: normal;
}

.workbench-pepper-dock__compact-card p,
.workbench-pepper-dock__chat-card p,
.workbench-pepper-dock__compact-card small,
.workbench-pepper-dock__lane em,
.workbench-pepper-dock__lane p {
  font-size: 14px;
  line-height: 1.45;
}

.workbench-pepper-dock__compact-stack {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: none;
  overflow: hidden;
}

.workbench-pepper-dock__chat-card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-color: rgba(225, 218, 168, 0.32);
  background:
    radial-gradient(circle at 18% 0%, rgba(225, 218, 168, 0.12), transparent 42%),
    linear-gradient(135deg, rgba(31, 45, 43, 0.76), rgba(7, 11, 11, 0.7)),
    rgba(13, 18, 19, 0.72);
}

.workbench-pepper-dock__response-window {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid rgba(225, 218, 168, 0.2);
  border-radius: 7px;
  background: rgba(5, 9, 9, 0.42);
}

.workbench-pepper-dock__chat-card p {
  -webkit-line-clamp: 4;
}

.workbench-pepper-dock__chat-card strong {
  display: block;
  margin-top: 8px;
  color: rgba(252, 255, 249, 0.98);
}

.workbench-pepper-dock__prompt-teaser {
  margin-top: 12px;
}

.workbench-pepper-dock__chat-card textarea {
  min-height: 190px;
  font-size: 14px;
  line-height: 1.45;
}

.workbench-pepper-dock__state-chips {
  border: 1px solid rgba(162, 188, 176, 0.2);
  border-radius: 7px;
  background:
    radial-gradient(circle at 12% 0%, rgba(225, 218, 168, 0.07), transparent 46%),
    linear-gradient(135deg, rgba(30, 38, 36, 0.58), rgba(7, 10, 10, 0.62)),
    rgba(13, 18, 19, 0.64);
}

.workbench-pepper-dock__chip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.workbench-pepper-dock__summary-grid div,
.workbench-pepper-dock__chip-grid div {
  min-height: 0;
  padding: 7px 8px;
}

.workbench-pepper-dock__chip-grid div {
  border: 1px solid rgba(162, 188, 176, 0.18);
  border-radius: 7px;
  background: rgba(5, 9, 9, 0.42);
}

.workbench-pepper-dock__chip-grid strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
}

.workbench-pepper-dock__chip-grid em {
  display: inline-block;
  margin-top: 4px;
  color: rgba(239, 229, 174, 0.92);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}

.workbench-pepper-dock__expand {
  min-height: 44px;
  font-size: 14px;
  line-height: 1.2;
}

.workbench-bottom-evidence-strip {
  width: min(1280px, 95%);
  min-height: 98px;
  gap: 10px;
  padding: 11px;
}

.workbench-bottom-evidence-strip__title {
  flex-basis: 156px;
  padding: 10px 11px;
}

.workbench-bottom-evidence-strip__title span,
.workbench-bottom-evidence-strip__cell span {
  font-size: 12px;
  line-height: 1.2;
}

.workbench-bottom-evidence-strip__title strong,
.workbench-bottom-evidence-strip__cell strong {
  font-size: 14px;
  line-height: 1.36;
}

.workbench-bottom-evidence-strip__items {
  grid-template-columns:
    minmax(118px, 1fr)
    minmax(96px, 0.75fr)
    minmax(108px, 0.8fr)
    minmax(118px, 1fr)
    minmax(148px, 1.15fr)
    minmax(132px, 1.05fr)
    minmax(148px, 1.15fr);
  gap: 8px;
}

.workbench-bottom-evidence-strip__cell {
  padding: 10px 11px;
}

.workbench-pepper-workspace__context .workbench-status-pill strong {
  font-size: 16px;
}

.workbench-pepper-workspace__context .workbench-status-pill span {
  font-size: 12px;
}

.workbench-panel-shell--edit-enabled .workbench-panel-shell__side--right {
  opacity: 0.46;
}

.workbench-panel-shell--edit-enabled .panel-mockup-detail-panel {
  left: 23%;
  width: 42%;
}

.svg-edit-mode-toggle {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 30;
  border: 1px solid rgba(248, 238, 226, 0.28);
  background: rgba(3, 5, 5, 0.78);
  color: rgba(255, 248, 216, 0.92);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(10px);
}

.svg-edit-mode-toggle:hover {
  border-color: rgba(255, 198, 83, 0.72);
  background: rgba(255, 174, 54, 0.16);
}

.svg-hivemind-background,
.svg-hivemind-void,
.svg-hivemind-routes,
.svg-hivemind-node-layer {
  position: absolute;
  inset: 0;
}

.svg-hivemind-background {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 1;
  filter: brightness(1.16) saturate(1.08);
}

.svg-hivemind-void {
  left: 16%;
  top: 20%;
  width: 68%;
  height: auto;
  z-index: 2;
  opacity: 1;
  mix-blend-mode: normal;
  filter: brightness(1.22) saturate(1.12) drop-shadow(0 0 18px rgba(216, 255, 75, 0.28));
  pointer-events: none;
}

.svg-layout-editor-layer {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.svg-layout-editor-handle {
  position: absolute;
  aspect-ratio: 1 / 1;
  border: 1px dashed rgba(255, 242, 171, 0.58);
  background: rgba(3, 7, 8, 0.08);
  color: rgba(255, 248, 216, 0.86);
  padding: 0;
  font-family: inherit;
  font-size: 9px;
  letter-spacing: 0;
  cursor: grab;
  pointer-events: auto;
}

.svg-layout-editor-handle:active {
  cursor: grabbing;
}

.svg-layout-editor-handle span {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 100%;
  padding: 3px 5px;
  background: rgba(0, 0, 0, 0.68);
  overflow-wrap: anywhere;
}

.svg-layout-editor-handle--background,
.svg-layout-editor-handle--route-layer {
  aspect-ratio: 16 / 9;
  height: auto;
}

.svg-layout-editor-handle--void {
  aspect-ratio: 1 / 1;
}

.svg-layout-editor-handle--selected,
.svg-hivemind-core--layout-selected {
  outline: 2px solid rgba(255, 198, 83, 0.95);
  outline-offset: 4px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.82), 0 0 22px rgba(255, 184, 69, 0.42);
}

.svg-layout-editor-handle--locked {
  border-color: rgba(198, 210, 218, 0.42);
  cursor: not-allowed;
  pointer-events: none;
}

.svg-hivemind-routes {
  display: block;
  width: 100%;
  height: 100%;
  z-index: 4;
  overflow: visible;
  pointer-events: none;
}

.svg-hivemind-routes--editing {
  z-index: 12;
  pointer-events: auto;
}

.svg-hivemind-route {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  mix-blend-mode: screen;
  vector-effect: non-scaling-stroke;
}

.svg-hivemind-route--active {
  filter: url("#svg-hivemind-active-glow");
}

.svg-hivemind-route--dormant {
  filter: url("#svg-hivemind-dormant-glow");
}

.svg-hivemind-route__halo {
  stroke-width: 2.7;
  opacity: 0.28;
}

.svg-hivemind-route__ribbon {
  stroke-width: 1;
  opacity: 0.84;
}

.svg-hivemind-route__filament {
  stroke-width: 0.26;
  opacity: 1;
}

.svg-hivemind-route__spark,
.svg-hivemind-route__ember {
  stroke-linecap: round;
}

.svg-hivemind-route__spark {
  stroke-width: 0.3;
  stroke-dasharray: 2.2 17;
  animation: svgHivemindFlow 4.8s linear infinite;
  opacity: 0.88;
}

.svg-hivemind-route__ember {
  stroke-width: 0.5;
  stroke-dasharray: 0.1 22;
  animation: svgHivemindSparkFlow 6.8s linear infinite;
  opacity: 0.62;
}

.svg-hivemind-route--active .svg-hivemind-route__halo,
.svg-hivemind-route--active .svg-hivemind-route__ribbon,
.svg-hivemind-route--active .svg-hivemind-route__filament,
.svg-hivemind-route--active .svg-hivemind-route__spark,
.svg-hivemind-route--active .svg-hivemind-route__ember {
  stroke: url("#svg-hivemind-active-gradient");
}

.svg-hivemind-route--dormant .svg-hivemind-route__halo,
.svg-hivemind-route--dormant .svg-hivemind-route__ribbon,
.svg-hivemind-route--dormant .svg-hivemind-route__filament,
.svg-hivemind-route--dormant .svg-hivemind-route__spark,
.svg-hivemind-route--dormant .svg-hivemind-route__ember {
  stroke: url("#svg-hivemind-dormant-gradient");
}

.svg-hivemind-route--foreground .svg-hivemind-route__halo {
  stroke-width: 3.25;
  opacity: 0.34;
}

.svg-hivemind-route--foreground .svg-hivemind-route__ribbon {
  stroke-width: 1.12;
  opacity: 0.92;
}

.svg-hivemind-route--foreground .svg-hivemind-route__filament {
  stroke-width: 0.26;
}

.svg-hivemind-route--rear .svg-hivemind-route__halo {
  stroke-width: 2.1;
  opacity: 0.22;
}

.svg-hivemind-route--rear .svg-hivemind-route__ribbon {
  stroke-width: 0.72;
  opacity: 0.64;
}

.svg-hivemind-route--rear .svg-hivemind-route__filament {
  stroke-width: 0.16;
  opacity: 0.76;
}

.svg-hivemind-route--dormant .svg-hivemind-route__halo {
  opacity: 0.19;
}

.svg-hivemind-route--dormant .svg-hivemind-route__ribbon {
  opacity: 0.58;
}

.svg-hivemind-route--dormant .svg-hivemind-route__filament {
  opacity: 0.78;
}

.svg-hivemind-route--dormant .svg-hivemind-route__spark {
  animation-duration: 11.5s;
  opacity: 0.56;
}

.svg-hivemind-route--dormant .svg-hivemind-route__ember {
  animation-duration: 14s;
  opacity: 0.44;
}

.svg-hivemind-junction {
  filter: drop-shadow(0 0 4px rgba(255, 184, 69, 0.76)) drop-shadow(0 0 10px rgba(255, 113, 30, 0.22));
}

.svg-hivemind-junction circle:first-child {
  fill: rgba(255, 142, 35, 0.15);
  stroke: rgba(255, 219, 109, 0.86);
  stroke-width: 0.22;
  animation: svgHivemindJunctionPulse 3.8s ease-in-out infinite;
}

.svg-hivemind-junction circle:last-child {
  fill: rgba(255, 235, 155, 0.94);
}

.svg-hivemind-junction--dormant {
  filter: drop-shadow(0 0 5px rgba(202, 221, 235, 0.64)) drop-shadow(0 0 10px rgba(170, 195, 214, 0.18));
}

.svg-hivemind-junction--dormant circle:first-child {
  fill: rgba(182, 194, 207, 0.16);
  stroke: rgba(231, 238, 244, 0.76);
  animation-duration: 6.8s;
}

.svg-hivemind-junction--dormant circle:last-child {
  fill: rgba(235, 242, 247, 0.8);
}

.svg-hivemind-endpoint-debug {
  pointer-events: none;
}

.svg-hivemind-endpoint-debug__marker {
  fill: rgba(5, 7, 8, 0.76);
  stroke-width: 0.2;
}

.svg-hivemind-endpoint-debug__topology {
  stroke: rgba(105, 228, 255, 0.95);
}

.svg-hivemind-endpoint-debug__path {
  stroke: rgba(255, 242, 128, 0.95);
}

.svg-hivemind-endpoint-debug__core-anchor {
  fill: rgba(14, 23, 20, 0.58);
  stroke: rgba(119, 234, 255, 0.96);
  stroke-width: 0.24;
}

.svg-hivemind-endpoint-debug__core-anchor--hivemind {
  fill: rgba(52, 71, 8, 0.56);
  stroke: rgba(220, 255, 72, 0.98);
  stroke-width: 0.3;
}

.svg-hivemind-endpoint-debug__mismatch-line {
  stroke: rgba(255, 72, 62, 0.96);
  stroke-width: 0.28;
  stroke-dasharray: 0.6 0.45;
}

.svg-hivemind-endpoint-debug__marker--bad {
  fill: rgba(255, 45, 45, 0.62);
  stroke: rgba(255, 83, 83, 0.98);
}

.svg-hivemind-endpoint-debug__label {
  fill: rgba(255, 92, 92, 0.96);
  font-family: var(--font-mono, "Space Mono", ui-monospace, SFMono-Regular, monospace);
  font-size: 1.25px;
  letter-spacing: 0;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.72);
  stroke-width: 0.18;
}

.svg-route-snap-editor {
  pointer-events: auto;
}

.svg-route-snap-editor__target,
.svg-route-snap-editor__core-anchor,
.svg-route-snap-editor__junction-anchor {
  pointer-events: none;
}

.svg-route-snap-editor__target--junction,
.svg-route-snap-editor__junction-anchor {
  cursor: grab;
  pointer-events: auto;
}

.svg-route-snap-editor__target--junction:active,
.svg-route-snap-editor__junction-anchor:active {
  cursor: grabbing;
}

.svg-route-snap-editor__target circle {
  fill: #f7fbff;
  stroke: rgba(7, 12, 15, 0.92);
  stroke-width: 0.22;
  filter: drop-shadow(0 0 3px rgba(112, 226, 255, 0.95));
}

.svg-route-snap-editor__target--core circle {
  fill: #fff8a8;
  filter: drop-shadow(0 0 4px rgba(255, 240, 110, 0.95));
}

.svg-route-snap-editor__target--junction circle {
  fill: #78e8ff;
}

.svg-route-snap-editor__target--snap-preview circle {
  fill: #74ff7a;
  stroke: rgba(255, 255, 255, 0.98);
  stroke-width: 0.36;
  filter: drop-shadow(0 0 7px rgba(112, 255, 127, 0.98));
}

.svg-route-snap-editor__target text,
.svg-route-snap-editor__core-anchor text,
.svg-route-snap-editor__junction-anchor text,
.svg-route-snap-editor__handle text {
  fill: rgba(255, 253, 226, 0.96);
  font-family: var(--font-mono, "Space Mono", ui-monospace, SFMono-Regular, monospace);
  font-size: 1.05px;
  letter-spacing: 0;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.82);
  stroke-width: 0.22;
  text-transform: none;
}

.svg-route-snap-editor__core-anchor rect {
  fill: rgba(22, 3, 3, 0.2);
  stroke: rgba(255, 49, 58, 0.98);
  stroke-width: 0.22;
  filter: drop-shadow(0 0 3px rgba(255, 48, 58, 0.82));
}

.svg-route-snap-editor__core-anchor line {
  stroke: rgba(255, 49, 58, 0.96);
  stroke-width: 0.18;
  vector-effect: non-scaling-stroke;
}

.svg-route-snap-editor__core-anchor circle {
  fill: #fff7f4;
  stroke: rgba(255, 49, 58, 1);
  stroke-width: 0.16;
  filter: drop-shadow(0 0 4px rgba(255, 51, 61, 0.94));
}

.svg-route-snap-editor__core-anchor text {
  fill: rgba(255, 218, 218, 0.98);
}

.svg-route-snap-editor__core-anchor--unlocked {
  cursor: grab;
  pointer-events: auto;
}

.svg-route-snap-editor__core-anchor--unlocked:active {
  cursor: grabbing;
}

.svg-route-snap-editor__core-anchor--unlocked rect {
  stroke-dasharray: 0.42 0.34;
}

.svg-route-snap-editor__core-anchor--draft rect,
.svg-route-snap-editor__core-anchor--draft line,
.svg-route-snap-editor__core-anchor--draft circle {
  stroke: rgba(255, 235, 72, 0.98);
  filter: drop-shadow(0 0 6px rgba(255, 235, 72, 0.9));
}

.svg-route-snap-editor__core-anchor--snap-preview rect,
.svg-route-snap-editor__core-anchor--snap-preview line,
.svg-route-snap-editor__core-anchor--snap-preview circle {
  stroke: rgba(118, 255, 132, 0.98);
  filter: drop-shadow(0 0 6px rgba(118, 255, 132, 0.96));
}

.svg-route-snap-editor__junction-anchor polygon {
  fill: rgba(16, 46, 54, 0.74);
  stroke: rgba(111, 232, 255, 0.96);
  stroke-width: 0.22;
  filter: drop-shadow(0 0 4px rgba(111, 232, 255, 0.84));
}

.svg-route-snap-editor__junction-anchor circle {
  fill: rgba(205, 249, 255, 0.96);
}

.svg-route-snap-editor__junction-anchor text {
  fill: rgba(189, 247, 255, 0.98);
}

.svg-route-snap-editor__junction-anchor--snap-preview polygon,
.svg-route-snap-editor__junction-anchor--snap-preview circle {
  stroke: rgba(118, 255, 132, 0.98);
  filter: drop-shadow(0 0 6px rgba(118, 255, 132, 0.96));
}

.svg-route-snap-editor__control-line {
  stroke: rgba(112, 226, 255, 0.34);
  stroke-width: 0.16;
  stroke-dasharray: 0.7 0.55;
}

.svg-route-snap-editor__handle {
  cursor: grab;
  pointer-events: auto;
}

.svg-route-snap-editor__handle:active {
  cursor: grabbing;
}

.svg-route-snap-editor__handle circle,
.svg-route-snap-editor__handle rect {
  fill: rgba(2, 8, 10, 0.92);
  stroke-width: 0.24;
  filter: drop-shadow(0 0 3px rgba(255, 214, 79, 0.76));
}

.svg-route-snap-editor__handle--endpoint circle {
  stroke: rgba(255, 132, 42, 0.98);
  filter: drop-shadow(0 0 4px rgba(255, 132, 42, 0.82));
}

.svg-route-snap-editor__handle--control rect {
  stroke: rgba(109, 232, 255, 0.9);
}

.svg-route-snap-editor__snap-label {
  fill: rgba(147, 255, 161, 0.96);
  font-size: 0.82px;
}

.svg-hivemind-node-layer {
  z-index: 8;
  pointer-events: none;
}

.svg-hivemind-core {
  position: absolute;
  aspect-ratio: 3 / 2;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translate(-50%, -50%);
  cursor: pointer;
  pointer-events: auto;
}

.svg-hivemind-core::before {
  content: "";
  position: absolute;
  inset: 38%;
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(2, 5, 3, 0.64) 0%, rgba(4, 8, 5, 0.34) 44%, rgba(4, 8, 5, 0) 76%);
  box-shadow: 0 0 14px rgba(255, 177, 64, 0.14);
  pointer-events: none;
}

.svg-hivemind-core img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  filter: brightness(1.18) saturate(1.14) drop-shadow(0 0 8px rgba(255, 198, 83, 0.18));
  animation: svgHivemindNodeBreathe 7.2s ease-in-out infinite;
}

.svg-hivemind-core-anchor-marker {
  position: absolute;
  z-index: 6;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}

.svg-hivemind-core-anchor-marker--visible,
.svg-hivemind-core-anchor-marker--snap-preview {
  opacity: 1;
}

.svg-hivemind-core-anchor-marker::before,
.svg-hivemind-core-anchor-marker::after {
  content: "";
  position: absolute;
  inset: 0;
}

.svg-hivemind-core-anchor-marker::before {
  border: 2px solid rgba(255, 43, 56, 0.98);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.78), 0 0 10px rgba(255, 43, 56, 0.85);
}

.svg-hivemind-core-anchor-marker::after {
  left: 50%;
  top: -4px;
  bottom: -4px;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(255, 43, 56, 0.98);
  box-shadow: -6px 8px 0 -5px rgba(255, 43, 56, 0.98), 6px 8px 0 -5px rgba(255, 43, 56, 0.98);
}

.svg-hivemind-core-anchor-marker > span {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 250, 232, 0.98);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 7px rgba(255, 49, 58, 0.95);
}

.svg-hivemind-core-anchor-marker--snap-preview::before {
  border-color: rgba(118, 255, 132, 0.98);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.78), 0 0 10px rgba(118, 255, 132, 0.85);
}

.svg-hivemind-core--center img {
  animation: svgHivemindCorePulse 5.8s ease-in-out infinite;
}

.svg-hivemind-core--center {
  pointer-events: none;
}

.svg-hivemind-core--layout-editable,
.svg-hivemind-core--layout-editable.svg-hivemind-core--center {
  cursor: grab;
  pointer-events: auto;
}

.svg-hivemind-core--layout-editable:active {
  cursor: grabbing;
}

.svg-hivemind-core--center::before {
  inset: 39%;
  background: radial-gradient(circle, rgba(23, 46, 5, 0.66) 0%, rgba(57, 83, 6, 0.36) 42%, rgba(33, 48, 5, 0) 76%);
  box-shadow: 0 0 18px rgba(210, 255, 56, 0.22), 0 0 32px rgba(255, 196, 61, 0.09);
}

.svg-hivemind-core__shell {
  position: absolute;
  inset: 11%;
  z-index: 3;
  border: 1px solid rgba(255, 196, 76, 0.62);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(255, 140, 33, 0.22), inset 0 0 11px rgba(255, 224, 139, 0.12);
  opacity: 0;
  transform: rotate(12deg);
  pointer-events: none;
}

.svg-hivemind-stage--edit-enabled .svg-hivemind-core__shell {
  opacity: 0.82;
}

.svg-hivemind-core--cool .svg-hivemind-core__shell {
  border-color: rgba(102, 220, 255, 0.62);
  box-shadow: 0 0 14px rgba(65, 195, 255, 0.22), inset 0 0 11px rgba(132, 225, 255, 0.12);
}

.svg-hivemind-core--danger .svg-hivemind-core__shell {
  border-color: rgba(255, 92, 54, 0.74);
  box-shadow: 0 0 18px rgba(255, 63, 25, 0.3), inset 0 0 12px rgba(255, 133, 76, 0.14);
}

.svg-hivemind-core--dormant .svg-hivemind-core__shell {
  border-color: rgba(218, 229, 236, 0.56);
  box-shadow: 0 0 12px rgba(203, 222, 235, 0.16), inset 0 0 11px rgba(220, 230, 238, 0.1);
}

.svg-hivemind-stage--edit-enabled .svg-hivemind-core--selected .svg-hivemind-core__shell {
  inset: 7%;
  border-width: 2px;
  opacity: 1;
  box-shadow: 0 0 0 1px rgba(255, 249, 209, 0.3), 0 0 22px rgba(255, 184, 69, 0.38);
}

.svg-hivemind-readout,
.svg-hivemind-info-panel {
  position: fixed;
  z-index: 20;
  border: 1px solid rgba(248, 238, 226, 0.22);
  background: rgba(3, 5, 5, 0.78);
  backdrop-filter: blur(12px);
}

.svg-hivemind-readout {
  top: 18px;
  right: 18px;
  width: min(360px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 8px;
  display: grid;
  gap: 5px;
}

.svg-unified-editor__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(248, 238, 226, 0.16);
}

.svg-unified-editor__header > div {
  display: grid;
  gap: 3px;
}

.svg-unified-editor__header button,
.svg-unified-editor__mode-grid button,
.svg-editor-mini-buttons button,
.svg-neuropath-transparency-panel__buttons button,
.svg-hivemind-readout__button-grid a {
  border: 1px solid rgba(248, 238, 226, 0.22);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 248, 216, 0.88);
  padding: 6px 7px;
  font-family: inherit;
  font-size: 9px;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.svg-unified-editor__mode-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px !important;
}

.svg-unified-editor__mode-grid button {
  min-height: 29px;
  padding: 4px 3px;
  font-size: 8px;
}

.svg-hivemind-info-panel {
  left: 50%;
  bottom: 10px;
  width: min(780px, calc(100vw - 36px));
  transform: translateX(-50%);
  padding: 8px 11px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.svg-hivemind-readout div,
.svg-hivemind-info-panel div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.svg-hivemind-readout span,
.svg-hivemind-info-panel span {
  color: rgba(248, 238, 226, 0.58);
  font-size: 10px;
  text-transform: uppercase;
}

.svg-hivemind-readout strong,
.svg-hivemind-info-panel strong {
  color: rgba(255, 248, 216, 0.94);
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.svg-hivemind-readout__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: rgba(248, 238, 226, 0.78);
  font-size: 10px;
  text-transform: uppercase;
}

.svg-hivemind-readout__toggle input {
  width: 13px;
  height: 13px;
  accent-color: #ffc653;
}

.svg-hivemind-readout__button-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px !important;
}

.svg-layout-editor-panel {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(248, 238, 226, 0.16);
  background: rgba(0, 0, 0, 0.24);
}

.svg-editor-primary-controls {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  padding: 7px;
  border: 1px solid rgba(255, 198, 83, 0.22);
  background: rgba(21, 16, 7, 0.92);
  position: sticky;
  top: 0;
  z-index: 2;
}

.svg-void-transparency-panel,
.svg-selected-transparency-panel,
.svg-neuropath-transparency-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(248, 238, 226, 0.16);
  background: rgba(0, 0, 0, 0.24);
}

.svg-selected-transparency-panel input[type="range"],
.svg-void-transparency-panel input[type="range"],
.svg-neuropath-transparency-panel input[type="range"] {
  width: 100%;
}

.svg-editor-mini-buttons,
.svg-neuropath-transparency-panel__buttons {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.svg-editor-value-row {
  grid-column: 1 / -1;
  display: flex !important;
  justify-content: space-between;
  gap: 6px !important;
}

.svg-layout-editor-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px !important;
}

.svg-layout-editor-field {
  display: grid;
  gap: 4px;
}

.svg-layout-editor-field select,
.svg-layout-editor-field input {
  min-width: 0;
  border: 1px solid rgba(248, 238, 226, 0.2);
  background: rgba(0, 0, 0, 0.46);
  color: rgba(255, 248, 216, 0.92);
  padding: 5px 6px;
  font-family: inherit;
  font-size: 10px;
}

.svg-hivemind-readout__legend {
  grid-column: 1 / -1;
  display: grid !important;
  gap: 5px !important;
  padding: 8px;
  border: 1px solid rgba(248, 238, 226, 0.16);
  background: rgba(0, 0, 0, 0.26);
}

.svg-hivemind-readout__legend span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 248, 216, 0.82);
  font-size: 10px;
}

.svg-hivemind-readout__legend i {
  display: inline-block;
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
}

.svg-hivemind-readout__legend-core {
  border: 2px solid rgba(255, 49, 58, 0.95);
  box-shadow: 0 0 7px rgba(255, 49, 58, 0.78);
}

.svg-hivemind-readout__legend-endpoint {
  border: 2px solid rgba(255, 132, 42, 0.98);
  border-radius: 999px;
  box-shadow: 0 0 7px rgba(255, 132, 42, 0.72);
}

.svg-hivemind-readout__legend-junction {
  border: 2px solid rgba(111, 232, 255, 0.96);
  transform: rotate(45deg);
  box-shadow: 0 0 7px rgba(111, 232, 255, 0.72);
}

.svg-hivemind-readout__legend-control {
  border: 2px solid rgba(109, 232, 255, 0.9);
  background: rgba(2, 8, 10, 0.92);
}

.svg-hivemind-readout__button-grid button {
  border: 1px solid rgba(248, 238, 226, 0.22);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 248, 216, 0.88);
  padding: 6px 7px;
  font-family: inherit;
  font-size: 9px;
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
}

.svg-unified-editor__header button:hover,
.svg-unified-editor__header button.is-active,
.svg-unified-editor__mode-grid button:hover,
.svg-unified-editor__mode-grid button.is-active,
.svg-editor-mini-buttons button:hover,
.svg-neuropath-transparency-panel__buttons button:hover,
.svg-hivemind-readout__button-grid a:hover,
.svg-hivemind-readout__button-grid button:hover,
.svg-hivemind-readout__button-grid button.is-active {
  border-color: rgba(255, 198, 83, 0.72);
  background: rgba(255, 174, 54, 0.16);
  color: rgba(255, 246, 213, 0.98);
}

.svg-hivemind-readout__warning {
  margin: 0;
  color: rgba(255, 95, 95, 0.92);
  font-size: 10px;
  line-height: 1.35;
}

.svg-hivemind-readout__note {
  margin: 0;
  color: rgba(132, 255, 151, 0.9);
  font-size: 10px;
  line-height: 1.35;
}

.svg-hivemind-readout__json {
  min-height: 96px;
  max-height: 180px;
  resize: vertical;
  border: 1px solid rgba(248, 238, 226, 0.18);
  background: rgba(0, 0, 0, 0.48);
  color: rgba(230, 246, 255, 0.9);
  padding: 7px;
  font-family: inherit;
  font-size: 9px;
  line-height: 1.35;
}

.svg-hivemind-info-panel__warning {
  grid-column: 1 / -1;
  margin: 0;
  color: rgba(255, 104, 85, 0.9);
  font-size: 12px;
}

@keyframes svgHivemindFlow {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes svgHivemindSparkFlow {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -100;
  }
}

@keyframes svgHivemindJunctionPulse {
  0%,
  100% {
    opacity: 0.62;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes svgHivemindNodeBreathe {
  0%,
  100% {
    filter: brightness(0.96) saturate(1);
  }
  50% {
    filter: brightness(1.14) saturate(1.18);
  }
}

@keyframes svgHivemindCorePulse {
  0%,
  100% {
    filter: brightness(1) saturate(1.06) drop-shadow(0 0 10px rgba(219, 255, 74, 0.28));
  }
  50% {
    filter: brightness(1.28) saturate(1.32) drop-shadow(0 0 22px rgba(219, 255, 74, 0.5));
  }
}

@media (max-width: 760px) {
  .svg-hivemind-readout {
    top: 10px;
    right: 10px;
    width: min(260px, calc(100vw - 20px));
  }

  .svg-hivemind-info-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    bottom: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .svg-hivemind-route__spark,
  .svg-hivemind-route__ember,
  .svg-hivemind-junction circle:first-child,
  .svg-hivemind-core img {
    animation: none !important;
  }
}

.anchor-calibration-shell {
  min-height: 100vh;
  background: #050608;
  color: #f4efe7;
}

.anchor-calibration-board {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 24px;
}

.anchor-calibration-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.anchor-calibration-header p {
  margin: 0 0 4px;
  color: rgba(244, 239, 231, 0.55);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.anchor-calibration-header h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
}

.anchor-calibration-header a {
  color: #f6c874;
  font-size: 13px;
}

.anchor-calibration-header nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 12px;
}

.anchor-calibration-recovery {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
  padding: 12px;
  border: 1px solid rgba(246, 200, 116, 0.44);
  background: rgba(246, 200, 116, 0.08);
}

.anchor-calibration-recovery strong {
  color: #f6c874;
}

.anchor-calibration-recovery p {
  margin: 4px 0 0;
  color: rgba(244, 239, 231, 0.72);
  font-size: 12px;
}

.anchor-calibration-recovery button {
  border: 1px solid rgba(246, 200, 116, 0.36);
  background: rgba(5, 6, 8, 0.62);
  color: #f4efe7;
  padding: 8px 10px;
  font: inherit;
  cursor: pointer;
}

.anchor-calibration-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.anchor-calibration-panel,
.anchor-calibration-preview-shell,
.anchor-calibration-export {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(11, 13, 16, 0.92);
}

.anchor-calibration-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.anchor-calibration-field {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: rgba(244, 239, 231, 0.72);
}

.anchor-calibration-field select,
.anchor-calibration-field input,
.anchor-calibration-row input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: #080a0d;
  color: #f4efe7;
  padding: 8px 10px;
  font: inherit;
}

.anchor-calibration-pairing {
  display: grid;
  gap: 6px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  color: rgba(244, 239, 231, 0.68);
}

.anchor-calibration-pairing strong,
.anchor-calibration-export strong {
  color: #f4efe7;
}

.anchor-calibration-pairing code,
.anchor-calibration-preview-heading code {
  color: #9fd5ff;
  font-size: 11px;
  white-space: normal;
  word-break: break-all;
}

.anchor-calibration-pairing p,
.anchor-calibration-pairing ul {
  margin: 0;
}

.anchor-calibration-pairing ul {
  padding-left: 18px;
}

.anchor-calibration-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.anchor-calibration-actions button,
.anchor-calibration-row__select,
.anchor-calibration-detach {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #f4efe7;
  padding: 8px 10px;
  font: inherit;
  cursor: pointer;
}

.anchor-calibration-actions button:hover,
.anchor-calibration-row__select:hover,
.anchor-calibration-row__select.is-selected,
.anchor-calibration-detach:hover {
  border-color: rgba(246, 200, 116, 0.72);
  color: #f6c874;
}

.anchor-calibration-list {
  display: grid;
  gap: 6px;
  max-height: 260px;
  overflow: auto;
}

.anchor-calibration-row {
  display: grid;
  grid-template-columns: minmax(86px, 1fr) 82px 82px;
  gap: 6px;
}

.anchor-calibration-status {
  margin: 0;
  color: #9be78f;
  font-size: 12px;
}

.anchor-calibration-preview-shell {
  padding: 14px;
}

.anchor-calibration-preview-heading {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}

.anchor-calibration-preview-heading span {
  font-size: 14px;
  font-weight: 700;
}

.anchor-calibration-preview {
  position: relative;
  width: min(100%, 980px);
  margin: 0 auto;
  overflow: visible;
  background-color: #080a0d;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  cursor: crosshair;
}

.anchor-calibration-preview img {
  display: block;
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.anchor-calibration-marker {
  position: absolute;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 2px solid #050608;
  border-radius: 999px;
  background: #f6c874;
  color: #050608;
  transform: translate(-50%, -50%);
  cursor: grab;
  box-shadow: 0 0 0 2px rgba(246, 200, 116, 0.45);
}

.anchor-calibration-marker:active {
  cursor: grabbing;
}

.anchor-calibration-marker.is-selected {
  background: #9fd5ff;
  box-shadow: 0 0 0 3px rgba(159, 213, 255, 0.5);
}

.anchor-calibration-marker span {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  padding: 2px 5px;
  background: rgba(5, 6, 8, 0.82);
  color: #f4efe7;
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
}

.anchor-calibration-export {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding: 14px;
}

.anchor-calibration-export div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  color: rgba(244, 239, 231, 0.62);
  font-size: 12px;
}

.anchor-calibration-export textarea {
  width: 100%;
  min-height: 220px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #050608;
  color: #d7f2ff;
  padding: 12px;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  resize: vertical;
}

@media (max-width: 900px) {
  .anchor-calibration-board {
    padding: 16px;
  }

  .anchor-calibration-header,
  .anchor-calibration-workspace {
    display: grid;
  }
}

.panel-mockup-shell {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #050606;
  color: rgba(255, 248, 216, 0.94);
  isolation: isolate;
}

.panel-mockup-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  filter: brightness(1.08) saturate(1.12);
}

.panel-mockup-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 50% 55%, rgba(255, 86, 20, 0.13), transparent 38%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.68), transparent 24%, transparent 76%, rgba(0, 0, 0, 0.68));
  pointer-events: none;
}

.panel-mockup-stage {
  position: absolute;
  left: 20.5%;
  top: 14.5%;
  z-index: 3;
  width: 59%;
  height: 70%;
  border: 1px solid rgba(255, 92, 32, 0.52);
  background: rgba(5, 7, 8, 0.16);
  box-shadow: inset 0 0 34px rgba(255, 80, 22, 0.16), 0 0 34px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(1px);
}

.panel-mockup-route-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.panel-mockup-route-svg path {
  fill: none;
  stroke: url("#panel-route-gradient");
  stroke-width: 0.34;
  stroke-linecap: round;
  opacity: 0.92;
  filter: drop-shadow(0 0 4px rgba(255, 159, 33, 0.8));
}

.panel-mockup-node {
  position: absolute;
  z-index: 2;
  aspect-ratio: 1;
  margin: 0;
  transform: translate(-50%, -50%);
}

.panel-mockup-node img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  filter: brightness(1.22) saturate(1.18);
}

.panel-mockup-panel {
  position: absolute;
  top: 2.8%;
  z-index: 6;
  width: min(19.5vw, 318px);
  height: 94.4%;
  display: grid;
  place-items: stretch;
}

.panel-mockup-panel--left {
  left: 0.8%;
}

.panel-mockup-panel--right {
  right: 0.8%;
}

.panel-mockup-controls-svg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.36));
}

.panel-mockup-toolbar,
.panel-mockup-bottom-strip {
  position: absolute;
  left: 20.5%;
  z-index: 7;
  width: 59%;
  height: 12%;
  pointer-events: none;
}

.panel-mockup-toolbar {
  top: 1%;
}

.panel-mockup-bottom-strip {
  bottom: 0.7%;
  pointer-events: auto;
}

.panel-mockup-toolbar-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 14px rgba(0, 0, 0, 0.42));
}

.panel-mockup-svg-title {
  fill: rgba(255, 250, 228, 0.99);
  font-family: inherit;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.86));
}

.panel-mockup-svg-subtitle,
.panel-mockup-svg-label {
  fill: rgba(255, 218, 184, 0.88);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.82));
}

.panel-mockup-svg-value {
  fill: rgba(255, 253, 235, 0.99);
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.88));
}

.panel-mockup-mini-buttons rect {
  fill: rgba(10, 13, 15, 0.58);
  stroke: rgba(255, 128, 64, 0.32);
}

.panel-mockup-toolbar-button rect {
  stroke: rgba(255, 128, 64, 0.32);
}

.panel-mockup-mini-buttons text,
.panel-mockup-toolbar-button text {
  fill: rgba(255, 251, 226, 0.99);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.86));
}

.panel-mockup-panel-notch {
  fill: none;
  stroke: rgba(255, 156, 84, 0.42);
  stroke-linecap: round;
  stroke-width: 3;
  filter: drop-shadow(0 0 5px rgba(255, 89, 31, 0.34));
}

.panel-mockup-glass-streak {
  fill: none;
  stroke: rgba(255, 224, 202, 0.16);
  stroke-width: 9;
  stroke-linecap: round;
  opacity: 0.42;
  filter: blur(2px);
}

.panel-mockup-glass-streak--wide {
  stroke-width: 18;
  opacity: 0.26;
}

.panel-mockup-horizontal-glass {
  fill: none;
  stroke: rgba(255, 245, 235, 0.1);
  stroke-width: 11;
  stroke-linecap: round;
  opacity: 0.26;
  filter: blur(2px);
}

.panel-mockup-horizontal-notch {
  fill: none;
  stroke: rgba(255, 156, 84, 0.34);
  stroke-linecap: round;
  stroke-width: 3;
  filter: drop-shadow(0 0 4px rgba(255, 89, 31, 0.26));
}

.panel-mockup-detail-tab {
  position: absolute;
  left: 50%;
  top: -30px;
  z-index: 2;
  min-width: 126px;
  height: 34px;
  border: 1px solid rgba(255, 128, 64, 0.38);
  border-radius: 8px 8px 3px 3px;
  background:
    radial-gradient(circle at 50% 0%, rgba(210, 219, 224, 0.12), transparent 54%),
    linear-gradient(180deg, rgba(46, 55, 61, 0.24), rgba(7, 8, 9, 0.74)),
    rgba(8, 9, 10, 0.62);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.035) inset, 0 0 14px rgba(0, 0, 0, 0.44);
  color: rgba(255, 251, 226, 0.99);
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.panel-mockup-detail-tab::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 7px;
  height: 1px;
  background: rgba(255, 156, 84, 0.32);
}

.panel-mockup-detail-tab:hover,
.panel-mockup-detail-tab[aria-expanded="true"] {
  border-color: rgba(255, 168, 96, 0.58);
  background:
    linear-gradient(180deg, rgba(230, 238, 242, 0.18), rgba(8, 9, 10, 0.66)),
    rgba(8, 9, 10, 0.5);
}

.panel-mockup-detail-panel {
  position: absolute;
  left: 25%;
  bottom: 12.2%;
  z-index: 6;
  width: 50%;
  min-height: 188px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 22px;
  border: 1px solid rgba(255, 128, 64, 0.28);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 10%, rgba(210, 219, 224, 0.13), transparent 42%),
    linear-gradient(135deg, rgba(46, 55, 61, 0.28), rgba(7, 8, 9, 0.62)),
    rgba(8, 9, 10, 0.42);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.035) inset,
    0 0 20px rgba(0, 0, 0, 0.44),
    0 0 22px rgba(255, 82, 28, 0.08);
  opacity: 0;
  pointer-events: none;
  transform: translateY(22px) scale(0.98);
  transition: opacity 180ms ease, transform 180ms ease;
}

.panel-mockup-detail-panel.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.panel-mockup-detail-panel:not(.workbench-details-sheet) div {
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 128, 64, 0.24);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(212, 224, 229, 0.09), rgba(10, 13, 15, 0.5));
}

.panel-mockup-detail-panel:not(.workbench-details-sheet) span,
.panel-mockup-detail-panel:not(.workbench-details-sheet) strong {
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.86));
}

.panel-mockup-detail-panel:not(.workbench-details-sheet) span {
  color: rgba(255, 218, 184, 0.86);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.panel-mockup-detail-panel:not(.workbench-details-sheet) strong {
  margin-top: 5px;
  color: rgba(255, 253, 235, 0.99);
  font-size: 15px;
  font-weight: 800;
}

@media (max-width: 980px) {
  .panel-mockup-stage {
    left: 5%;
    top: 18%;
    width: 90%;
    height: 48%;
  }

  .panel-mockup-panel {
    top: 68%;
    width: 42%;
    height: 30%;
  }

  .panel-mockup-toolbar,
  .panel-mockup-bottom-strip {
    left: 5%;
    width: 90%;
  }

  .panel-mockup-bottom-strip {
    display: none;
  }

  .panel-mockup-detail-panel {
    left: 5%;
    bottom: 10%;
    width: 90%;
    grid-template-columns: 1fr;
  }
}

.hivemind-3d-shell {
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 86, 24, 0.18), transparent 42%),
    radial-gradient(circle at 76% 18%, rgba(87, 220, 255, 0.10), transparent 34%),
    linear-gradient(180deg, #030406 0%, #08090c 58%, #020203 100%);
  color: #fff4e7;
  font-family: var(--font-body);
}

.hivemind-3d-stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  gap: 16px;
  padding: 16px;
}

.hivemind-3d-viewer {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 139, 62, 0.22);
  border-radius: 8px;
  background: #030406;
  box-shadow: 0 0 60px rgba(255, 104, 31, 0.10) inset;
}

.hivemind-3d-viewer canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.hivemind-3d-readout {
  align-self: stretch;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
  border: 1px solid rgba(255, 139, 62, 0.32);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018)),
    rgba(5, 7, 10, 0.74);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.42), 0 0 34px rgba(255, 104, 31, 0.10) inset;
  backdrop-filter: blur(14px);
}

.hivemind-3d-readout span,
.hivemind-3d-readout dt {
  color: #6ce7ff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.hivemind-3d-readout h1 {
  margin: 8px 0 10px;
  color: #fff8ec;
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
}

.hivemind-3d-readout p,
.hivemind-3d-readout dd {
  color: rgba(255, 244, 231, 0.72);
  font-size: 12px;
  line-height: 1.45;
}

.hivemind-3d-note {
  padding: 9px 10px;
  border: 1px solid rgba(108, 231, 255, 0.20);
  background: rgba(108, 231, 255, 0.06);
}

.hivemind-3d-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.hivemind-3d-actions button {
  min-height: 34px;
  border: 1px solid rgba(255, 139, 62, 0.34);
  border-radius: 6px;
  background: rgba(255, 139, 62, 0.10);
  color: #ffd9a8;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.hivemind-3d-actions button:hover,
.hivemind-3d-actions button.is-active {
  border-color: rgba(108, 231, 255, 0.62);
  color: #a9f2ff;
  background: rgba(108, 231, 255, 0.12);
}

.hivemind-3d-readout dl {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
}

.hivemind-3d-readout div {
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.hivemind-3d-readout dt,
.hivemind-3d-readout dd {
  margin: 0;
}

.hivemind-3d-readout dd {
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.hivemind-3d-selected {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 139, 62, 0.28);
}

.hivemind-3d-selected h2 {
  margin: 0;
  color: #fff8ec;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.1;
}

.hivemind-3d-home-shell {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #030406;
  color: #fff4e7;
  font-family: var(--font-body);
}

.hivemind-3d-home-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 1;
  pointer-events: none;
}

.hivemind-3d-home-stage {
  position: absolute;
  inset: 9.5% 7.5% 5.5%;
  z-index: 4;
  min-height: 0;
  pointer-events: none;
  transform: translate(var(--home-stage-x, 0), var(--home-stage-y, 58px)) scale(var(--home-stage-scale, 1));
  transform-origin: center;
}

.hivemind-3d-home-viewer {
  position: absolute;
  inset: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 139, 62, 0.24);
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  pointer-events: auto;
}

.hivemind-3d-home-viewer:not(.is-editing) {
  border-color: transparent;
}

.hivemind-3d-home-viewer canvas {
  background: transparent !important;
}

.hivemind-3d-home-stage .hivemind-3d-readout {
  display: none;
}

.hivemind-3d-home-edit-dock {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 7px;
  border: 1px solid rgba(255, 139, 62, 0.22);
  border-radius: 8px;
  background: rgba(4, 7, 9, 0.42);
  backdrop-filter: blur(10px);
}

.hivemind-3d-home-edit-dock.is-open {
  align-items: stretch;
  flex-wrap: wrap;
  background: rgba(4, 7, 9, 0.76);
}

.hivemind-3d-home-edit-dock button,
.hivemind-3d-home-edit-dock select,
.hivemind-3d-home-edit-dock input {
  min-height: 28px;
  border: 1px solid rgba(255, 139, 62, 0.34);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.42);
  color: #fff4e7;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
}

.hivemind-3d-home-edit-dock button {
  padding: 0 10px;
  cursor: pointer;
  text-transform: uppercase;
}

.hivemind-3d-home-edit-dock button.is-active,
.hivemind-3d-home-edit-dock button:hover {
  border-color: rgba(108, 231, 255, 0.62);
  color: #a9f2ff;
}

.hivemind-3d-home-edit-dock label {
  display: grid;
  gap: 3px;
  color: #6ce7ff;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.hivemind-3d-home-edit-dock select {
  width: 260px;
  padding: 0 6px;
}

.hivemind-3d-home-edit-dock input {
  width: 72px;
  padding: 0 6px;
}

.hivemind-3d-home-edit-dock__grid,
.hivemind-3d-home-edit-dock__actions {
  display: flex;
  gap: 6px;
}

.hivemind-3d-home-edit-dock__note {
  align-self: center;
  color: #6ce7ff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
}

.workbench-panel-shell__side--left {
  opacity: var(--panel-left-opacity, 1);
  transform: translate(var(--panel-left-x, 0), var(--panel-left-y, 0)) scale(var(--panel-left-scale, 1));
  transform-origin: center;
}

.workbench-panel-shell__side--right {
  opacity: var(--panel-right-opacity, 1);
  width: min(16.4vw, 296px);
  transform: translate(var(--panel-right-x, 0), var(--panel-right-y, 0)) scale(var(--panel-right-scale, 1));
  transform-origin: center;
}

.workbench-panel-shell__top {
  opacity: var(--panel-top-opacity, 1);
  transform: translate(var(--panel-top-x, 0), var(--panel-top-y, 0)) scale(var(--panel-top-scale, 1));
  transform-origin: center;
}

.workbench-panel-shell__bottom {
  opacity: var(--panel-bottom-opacity, 1);
  transform: translate(var(--panel-bottom-x, 0), var(--panel-bottom-y, 0)) scale(var(--panel-bottom-scale, 1));
  transform-origin: center;
}

.hivemind-3d-home-stage .hivemind-3d-readout h1 {
  font-size: 24px;
  margin: 4px 0 6px;
}

.hivemind-3d-home-stage .hivemind-3d-readout p,
.hivemind-3d-home-stage .hivemind-3d-readout dd {
  font-size: 11px;
}

.hivemind-3d-home-stage .hivemind-3d-readout dl {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px 10px;
  margin-top: 10px;
}

.hivemind-3d-home-stage .hivemind-3d-selected {
  margin-top: 10px;
  padding-top: 10px;
}

.hivemind-3d-home-viewer.is-editing {
  cursor: grab;
  border-color: rgba(108, 231, 255, 0.42);
}

.hivemind-3d-home-viewer.is-editing:active {
  cursor: grabbing;
}

.hivemind-3d-home-viewer canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.hivemind-3d-home-edit-guide {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 71%;
  border: 1px dashed rgba(108, 231, 255, 0.38);
  pointer-events: none;
  z-index: 3;
}

.hivemind-3d-home-editor {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(108, 231, 255, 0.22);
}

.hivemind-3d-home-editor label {
  display: grid;
  gap: 4px;
}

.hivemind-3d-home-editor select,
.hivemind-3d-home-editor input,
.hivemind-3d-home-editor textarea {
  width: 100%;
  border: 1px solid rgba(255, 139, 62, 0.28);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.56);
  color: #fff4e7;
  font: inherit;
}

.hivemind-3d-home-editor select,
.hivemind-3d-home-editor input {
  min-height: 30px;
  padding: 4px 6px;
}

.hivemind-3d-home-editor textarea {
  min-height: 118px;
  padding: 8px;
  resize: vertical;
  font-family: var(--font-mono);
  font-size: 10px;
}

.hivemind-3d-home-editor__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.hivemind-3d-home-editor__lock {
  display: flex !important;
  grid-template-columns: none;
  align-items: center;
  gap: 8px;
}

.hivemind-3d-home-editor__lock input {
  width: auto;
  min-height: auto;
}

@media (max-width: 860px) {
  .hivemind-3d-stage {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) minmax(220px, 34vh);
    padding: 12px;
  }

  .hivemind-3d-viewer {
    min-height: 0;
  }

  .hivemind-3d-readout {
    align-self: auto;
  }

  .hivemind-3d-home-stage {
    inset: 11% 6% 7%;
  }

  .hivemind-3d-home-viewer {
    inset: 0;
  }

  .hivemind-3d-home-stage .hivemind-3d-readout {
    display: none;
  }

  .hivemind-3d-home-stage .hivemind-3d-readout dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .hivemind-3d-home-stage {
    inset: 13% 4% 12%;
  }

  .hivemind-3d-home-stage .hivemind-3d-readout h1 {
    font-size: 20px;
  }

  .hivemind-3d-home-edit-guide {
    height: 62%;
  }
}

/* Workbench shell IA refinement: global status stays concise; details read as selected-entity evidence. */
.workbench-top-status-rail {
  align-items: stretch;
  width: min(1120px, 84%);
  min-height: 54px;
  gap: 8px;
  padding: 7px 10px;
  border-color: rgba(232, 225, 177, 0.36);
  background:
    linear-gradient(90deg, rgba(255, 139, 72, 0.08), transparent 16%, transparent 84%, rgba(190, 209, 184, 0.06)),
    radial-gradient(circle at 50% 0%, rgba(229, 239, 242, 0.12), transparent 62%),
    linear-gradient(180deg, rgba(9, 16, 17, 0.82), rgba(5, 8, 9, 0.62));
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.035) inset;
}

.workbench-top-status-rail .workbench-status-pill {
  min-width: 108px;
  max-width: 184px;
  min-height: 40px;
  padding: 6px 10px;
  border-color: rgba(190, 209, 184, 0.2);
  background:
    linear-gradient(180deg, rgba(22, 31, 29, 0.66), rgba(5, 8, 8, 0.48)),
    rgba(5, 9, 9, 0.4);
}

.workbench-top-status-rail .workbench-status-pill:first-child {
  min-width: 164px;
}

.workbench-top-status-rail .workbench-status-pill:nth-child(5) {
  min-width: 188px;
}

.workbench-top-status-rail .workbench-status-pill span,
.workbench-top-work-strip .workbench-status-pill span {
  color: rgba(182, 208, 194, 0.84);
  font-size: 11px;
  line-height: 1.16;
  letter-spacing: 0.01em;
}

.workbench-top-status-rail .workbench-status-pill strong {
  color: rgba(255, 252, 231, 0.98);
  font-size: 13px;
  line-height: 1.22;
}

.workbench-top-work-strip {
  align-items: stretch;
  width: min(760px, 58%);
  min-height: 40px;
  margin-top: 5px;
  gap: 8px;
  padding: 6px 9px;
  border-color: rgba(232, 225, 177, 0.2);
  background:
    linear-gradient(90deg, transparent, rgba(232, 225, 177, 0.055), transparent),
    linear-gradient(180deg, rgba(12, 18, 18, 0.5), rgba(5, 8, 9, 0.34)),
    rgba(5, 8, 9, 0.28);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.022) inset;
}

.workbench-top-work-strip .workbench-status-pill {
  min-width: 176px;
  max-width: 240px;
  min-height: 28px;
  padding: 5px 10px;
  border-color: rgba(190, 209, 184, 0.16);
  background:
    linear-gradient(180deg, rgba(18, 25, 24, 0.44), rgba(5, 9, 9, 0.3)),
    rgba(5, 10, 10, 0.34);
}

.workbench-top-work-strip .workbench-status-pill strong {
  color: rgba(255, 250, 226, 0.94);
  font-size: 12px;
  line-height: 1.2;
}

.workbench-bottom-evidence-strip {
  width: min(1180px, calc(100vw - 740px));
  min-height: 112px;
  gap: 10px;
  padding: 12px;
  border-color: rgba(255, 152, 86, 0.3);
  background:
    linear-gradient(135deg, rgba(24, 30, 27, 0.7), rgba(6, 9, 9, 0.72)),
    rgba(5, 7, 7, 0.56);
}

.workbench-bottom-evidence-strip__title {
  flex: 0 0 176px;
  padding: 12px;
}

.workbench-bottom-evidence-strip__title span,
.workbench-bottom-evidence-strip__cell span {
  color: rgba(182, 208, 194, 0.86);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.workbench-bottom-evidence-strip__title strong,
.workbench-bottom-evidence-strip__cell strong {
  color: rgba(255, 252, 231, 0.98);
  font-size: 14px;
  line-height: 1.38;
  overflow-wrap: anywhere;
  white-space: normal;
}

.workbench-bottom-evidence-strip__items {
  grid-template-columns:
    minmax(132px, 1.12fr)
    minmax(110px, 0.82fr)
    minmax(118px, 0.9fr)
    minmax(128px, 1fr)
    minmax(148px, 1.08fr)
    minmax(142px, 1.02fr)
    minmax(154px, 1.12fr);
  gap: 8px;
}

.workbench-bottom-evidence-strip__cell {
  min-height: 76px;
  padding: 11px 12px;
  border-color: rgba(255, 152, 86, 0.2);
  background:
    linear-gradient(135deg, rgba(216, 229, 218, 0.08), rgba(7, 11, 11, 0.55)),
    rgba(4, 7, 7, 0.35);
}

.workbench-details-sheet {
  left: 50%;
  bottom: 14%;
  width: min(1180px, calc(100vw - 740px));
  max-height: calc(100vh - 360px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: auto;
  padding: 18px;
  border-color: rgba(255, 160, 96, 0.34);
  background:
    radial-gradient(circle at 50% 0%, rgba(224, 236, 233, 0.12), transparent 48%),
    linear-gradient(135deg, rgba(22, 29, 27, 0.82), rgba(5, 8, 8, 0.76)),
    rgba(5, 8, 8, 0.7);
}

.workbench-panel-shell--edit-enabled .workbench-details-sheet {
  left: 50%;
  width: min(1180px, calc(100vw - 740px));
}

.workbench-panel-shell .workbench-details-sheet,
.workbench-panel-shell.workbench-panel-shell--edit-enabled .workbench-details-sheet {
  left: 50%;
  bottom: 14%;
  width: min(1180px, calc(100vw - 740px));
  min-height: 0;
  z-index: 8;
  pointer-events: none;
  transform: translateX(-50%) translateY(22px);
}

.workbench-panel-shell .workbench-details-sheet.is-open {
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.workbench-panel-shell .panel-mockup-detail-tab[aria-expanded="true"] {
  opacity: 0;
  pointer-events: none;
}

.workbench-details-sheet__header,
.workbench-details-sheet__row {
  border-radius: 8px;
}

.workbench-details-sheet__header {
  position: relative;
  display: grid;
  gap: 5px;
  min-height: 82px;
  padding: 0 148px 10px 2px;
  border-bottom: 1px solid rgba(255, 146, 82, 0.22);
}

.workbench-details-sheet__close {
  position: absolute;
  right: 2px;
  top: 0;
  min-width: 126px;
  min-height: 34px;
  border: 1px solid rgba(255, 128, 64, 0.42);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0%, rgba(210, 219, 224, 0.12), transparent 54%),
    linear-gradient(180deg, rgba(46, 55, 61, 0.28), rgba(7, 8, 9, 0.78)),
    rgba(8, 9, 10, 0.68);
  color: rgba(255, 251, 226, 0.99);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: uppercase;
}

.workbench-details-sheet__close:hover {
  border-color: rgba(255, 168, 96, 0.62);
  background:
    linear-gradient(180deg, rgba(230, 238, 242, 0.18), rgba(8, 9, 10, 0.66)),
    rgba(8, 9, 10, 0.5);
}

.workbench-details-sheet__header span,
.workbench-details-sheet__section > span,
.workbench-details-sheet__row span {
  display: block;
  color: rgba(182, 208, 194, 0.88);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.workbench-details-sheet__header strong {
  color: rgba(255, 252, 231, 0.99);
  font-size: 22px;
  font-weight: 850;
  line-height: 1.2;
}

.workbench-details-sheet__header em {
  color: rgba(239, 229, 174, 0.92);
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.3;
}

.workbench-details-sheet__summary,
.workbench-details-sheet__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.workbench-details-sheet__section {
  display: grid;
  gap: 10px;
  padding: 0;
}

.workbench-details-sheet__row {
  min-height: 70px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 146, 82, 0.2);
  background:
    linear-gradient(135deg, rgba(222, 232, 219, 0.08), rgba(8, 12, 12, 0.56)),
    rgba(5, 8, 8, 0.4);
}

.workbench-details-sheet__row strong {
  display: block;
  margin-top: 6px;
  color: rgba(255, 252, 231, 0.98);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.42;
  overflow-wrap: anywhere;
  white-space: normal;
}

@media (max-width: 1320px) {
  .workbench-bottom-evidence-strip {
    width: min(94vw, 1120px);
  }

  .workbench-details-sheet {
    left: 50%;
    width: min(94vw, 1120px);
  }
}

/* Slice 1A — bottom evidence console selection signal. When the operator
   has engaged the Command Spine (selecting a category/subcategory), the
   bottom strip title takes a subtle ember accent so the operator can see
   the console is bound to their selection rather than the default
   governed-task source. No floating overlay; signal lives on the
   existing shell surface. */
.workbench-bottom-evidence-strip--selection .workbench-bottom-evidence-strip__title strong {
  color: rgba(255, 214, 152, 0.96);
}

/* Slice 4A — Expanded workspace usability pass.
   Rebalance lanes 50/50, bump readable font sizes, add cyan/ember lane
   accents, and style the honest no-runtime-authority footer line. Uses
   parent-selector specificity (.workbench-pepper-workspace .…) to defeat
   the multiple accreted workspace CSS blocks earlier in this file. */

.workbench-pepper-workspace .workbench-pepper-workspace__layout {
  grid-template-columns: minmax(380px, 1fr) minmax(380px, 1fr);
  gap: 14px;
}

.workbench-pepper-workspace .workbench-pepper-workspace__header span,
.workbench-pepper-workspace .workbench-pepper-workspace__context span,
.workbench-pepper-workspace .workbench-pepper-workspace__panel-title span,
.workbench-pepper-workspace .workbench-pepper-chat__composer span,
.workbench-pepper-workspace .workbench-pepper-chat__transcript span,
.workbench-pepper-workspace .workbench-director-rail__header span,
.workbench-pepper-workspace .workbench-director-tabs span,
.workbench-pepper-workspace .workbench-director-panel span {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.25;
}

.workbench-pepper-workspace .workbench-pepper-chat__transcript p,
.workbench-pepper-workspace .workbench-director-panel p {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(247, 251, 244, 0.97);
}

.workbench-pepper-workspace .workbench-pepper-chat__response p {
  font-size: 16px;
  line-height: 1.55;
}

.workbench-pepper-workspace .workbench-director-panel section h4 {
  font-size: 16px;
  line-height: 1.3;
}

.workbench-pepper-workspace .workbench-pepper-chat {
  border-left-width: 2px;
  border-left-style: solid;
  border-left-color: rgba(140, 220, 240, 0.7);
}

.workbench-pepper-workspace .workbench-director-rail {
  border-left-width: 2px;
  border-left-style: solid;
  border-left-color: rgba(255, 168, 70, 0.75);
}

.workbench-pepper-chat__no-runtime-note {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-left: 2px solid rgba(178, 205, 188, 0.32);
  border-radius: 0 4px 4px 0;
  background: rgba(8, 13, 13, 0.4);
  color: rgba(208, 218, 200, 0.86);
  font-size: 12px;
  font-style: italic;
  line-height: 1.42;
}

/* Slice 4B — focusable composer footer + governance audit toggle + Copy
   button + Copied confirmation. All read-only/local-only affordances; no
   runtime authority introduced. */

.workbench-pepper-chat__draft-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}

.workbench-pepper-chat__draft-footer small {
  color: rgba(180, 198, 188, 0.72);
  font-size: 12px;
  font-style: italic;
  line-height: 1.35;
}

.workbench-pepper-chat__draft-clear {
  padding: 4px 10px;
  border: 1px solid rgba(178, 205, 188, 0.28);
  border-radius: 4px;
  background: rgba(8, 13, 13, 0.5);
  color: rgba(218, 228, 210, 0.86);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}

.workbench-pepper-chat__draft-clear:hover {
  border-color: rgba(178, 205, 188, 0.48);
  background: rgba(13, 20, 20, 0.7);
}

/* ═══════════════════════════════════════════════════════════════════
   G-PC1 (2026-05-26) — Ask Pepper Functional Control IA Rebuild.
   Persistent control bar, integrated composer, secondary toolbar,
   and collapsible advanced routing section. Replaces scattered
   inline-styled controls per DIRECTOR_CONSOLE_IA_PROCESS_KB §1–§6.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Ask Pepper panel header ── */
.pepper-chat-header {
  display: flex;
  align-items: center;
  padding: 8px 10px 6px;
  flex-shrink: 0;
}
.pepper-chat-header__title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 200, 130, 0.88);
  text-shadow: 0 0 3px rgba(255, 140, 50, 0.14), 0 0 1px rgba(255, 180, 90, 0.20);
}

/* ── Prompt control suite (G-PC1 phase 4) — all controls anchored
   to the prompt at the bottom of the Ask Pepper panel ── */
.pepper-prompt-suite {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px 6px;
  border-top: 1px solid rgba(255, 178, 90, 0.22);
  flex-shrink: 0;
}
/* Controls row beneath prompt: left group + right mode pill */
.pepper-prompt-suite__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.pepper-prompt-suite__controls-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.pepper-prompt-suite__controls-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.pepper-prompt-suite__group {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.pepper-prompt-suite__label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 200, 130, 0.78);
  flex-shrink: 0;
}
.pepper-prompt-suite__select {
  font-size: 10px !important;
  padding: 2px 6px !important;
  background: rgba(10, 14, 20, 0.55) !important;
  color: rgba(240, 235, 225, 0.92) !important;
  border: 1px solid rgba(255, 178, 90, 0.32) !important;
  border-radius: 4px !important;
  cursor: pointer;
  min-width: 0;
  max-width: 110px;
  line-height: 1.3 !important;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' fill='none'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%23ffb25a' stroke-width='1.2'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 5px center !important;
  background-size: 8px 5px !important;
  padding-right: 16px !important;
}
.pepper-prompt-suite__select:focus {
  outline: 1px solid rgba(255, 178, 90, 0.55) !important;
  outline-offset: 1px;
}
.pepper-prompt-suite__select option {
  background: rgba(16, 20, 28, 0.98);
  color: rgba(240, 235, 225, 0.92);
  padding: 4px 8px;
  font-size: 11px;
}

/* ── GlassSelect — custom dropdown with comfyUI glass treatment ──── */
.glass-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.glass-select__label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(180, 170, 155, 0.72);
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.glass-select__trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  padding: 2px 6px;
  background: rgba(10, 14, 20, 0.55);
  color: rgba(240, 235, 225, 0.92);
  border: 1px solid rgba(255, 178, 90, 0.32);
  border-radius: 4px;
  cursor: pointer;
  min-width: 0;
  max-width: 130px;
  line-height: 1.3;
  white-space: nowrap;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.glass-select__trigger:hover {
  border-color: rgba(255, 178, 90, 0.55);
}
.glass-select__trigger:focus-visible {
  outline: 1px solid rgba(255, 178, 90, 0.55);
  outline-offset: 1px;
}
.glass-select__trigger[aria-expanded="true"] {
  border-color: rgba(255, 178, 90, 0.65);
  box-shadow: 0 0 6px rgba(255, 140, 50, 0.18);
}
.glass-select__value {
  overflow: hidden;
  text-overflow: ellipsis;
}
.glass-select__chevron {
  width: 8px;
  height: 5px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' fill='none'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%23ffb25a' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.15s ease;
}
.glass-select__trigger[aria-expanded="true"] .glass-select__chevron {
  transform: rotate(180deg);
}

/* ── Dropdown menu ────────────────────────────────────────────────── */
.glass-select__menu {
  position: absolute;
  bottom: calc(100% + 3px);
  left: 0;
  z-index: 900;
  min-width: 100%;
  max-width: 200px;
  max-height: 180px;
  overflow-y: auto;
  margin: 0;
  padding: 3px;
  list-style: none;
  background: rgba(12, 16, 24, 0.92);
  border: 1px solid rgba(255, 178, 90, 0.30);
  border-radius: 6px;
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.45),
    0 0 1px rgba(255, 178, 90, 0.20),
    inset 0 1px 0 rgba(255, 200, 130, 0.06);
}
.glass-select__menu::-webkit-scrollbar {
  width: 4px;
}
.glass-select__menu::-webkit-scrollbar-thumb {
  background: rgba(255, 178, 90, 0.25);
  border-radius: 2px;
}
.glass-select__menu::-webkit-scrollbar-track {
  background: transparent;
}

/* ── Menu items ───────────────────────────────────────────────────── */
.glass-select__item {
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 3px;
  color: rgba(240, 235, 225, 0.85);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s ease, color 0.1s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.glass-select__item:hover,
.glass-select__item--focus {
  background: rgba(255, 178, 90, 0.12);
  color: rgba(255, 220, 170, 0.95);
}
.glass-select__item--active {
  color: rgba(255, 200, 130, 0.95);
  font-weight: 500;
}
.glass-select__item--active::before {
  content: "›";
  margin-right: 4px;
  opacity: 0.6;
}
.glass-select__item--disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* dc-pill size overrides inside the prompt suite */
.pepper-prompt-suite__pill {
  font-size: 9px !important;
  padding: 2px 8px !important;
}
.pepper-prompt-suite__pill--on {
  background: rgba(255, 178, 90, 0.14) !important;
  border-color: rgba(255, 200, 130, 0.65) !important;
  box-shadow: 0 0 8px rgba(255, 140, 50, 0.22) !important;
}
/* Composer: textarea + right gutter (send + route stacked) */
.pepper-prompt-suite__composer {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.pepper-prompt-suite__gutter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.pepper-prompt-suite__gutter-anchor {
  width: 32px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}
.pepper-prompt-suite__input {
  flex: 1 1 auto;
  min-height: 52px;
  max-height: 140px;
  resize: vertical;
  padding: 8px 10px;
  border: 1px solid rgba(255, 178, 90, 0.30);
  border-radius: 8px;
  background: rgba(10, 14, 20, 0.62);
  color: rgba(240, 235, 225, 0.94);
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
}
.pepper-prompt-suite__input::-moz-placeholder {
  color: rgba(200, 210, 200, 0.40);
  font-style: italic;
}
.pepper-prompt-suite__input::placeholder {
  color: rgba(200, 210, 200, 0.40);
  font-style: italic;
}
.pepper-prompt-suite__input:focus {
  outline: none;
  border-color: rgba(255, 178, 90, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 178, 90, 0.18);
}
.pepper-prompt-suite__input:disabled {
  opacity: 0.5;
}
.pepper-prompt-suite__send {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 178, 90, 0.55);
  border-radius: 6px;
  background: rgba(28, 18, 8, 0.75);
  color: rgba(255, 200, 140, 0.96);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.pepper-prompt-suite__send:hover:not(:disabled) {
  background: rgba(40, 24, 10, 0.92);
  border-color: rgba(255, 200, 110, 0.80);
  box-shadow: 0 0 10px rgba(255, 140, 50, 0.25);
}
.pepper-prompt-suite__send:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
/* Mode pill — matches gutter button width */
.pepper-prompt-suite__mode-pill {
  font-size: 9px !important;
  padding: 0 !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  border-radius: 6px !important;
}
/* Footer: context tracker + clear/dismiss actions */
.pepper-prompt-suite__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}
.pepper-prompt-suite__ctx-tracker {
  font-size: 9px;
  color: rgba(200, 210, 200, 0.50);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.3;
}
.pepper-prompt-suite__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.pepper-prompt-suite__action-btn {
  font-size: 11px;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 178, 90, 0.22);
  border-radius: 5px;
  background: transparent;
  color: rgba(200, 210, 200, 0.60);
  cursor: pointer;
  font: inherit;
  flex-shrink: 0;
}
.pepper-prompt-suite__action-btn:hover {
  border-color: rgba(255, 178, 90, 0.40);
  color: rgba(240, 235, 225, 0.85);
}

/* ── Advanced routing accordion ── */
.pepper-chat-advanced {
  margin-top: 2px;
  border-top: 1px solid rgba(255, 178, 90, 0.10);
  flex-shrink: 0;
}
.pepper-chat-advanced__toggle {
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  color: rgba(200, 210, 200, 0.50);
  padding: 4px 10px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.pepper-chat-advanced__toggle:hover {
  color: rgba(255, 200, 130, 0.72);
}
.pepper-chat-advanced .workbench-pepper-chat__slash-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 10px;
  font-size: 11px;
}
.pepper-chat-advanced__group-label {
  color: rgba(200, 210, 200, 0.50);
  margin-right: 4px;
  font-weight: 600;
  font-size: 10px;
}
.pepper-chat-advanced__divider {
  width: 1px;
  align-self: stretch;
  background: rgba(255, 178, 90, 0.14);
  margin: 0 3px;
}
.pepper-chat-advanced__about {
  font-size: 9px;
  line-height: 1.4;
  color: rgba(200, 210, 200, 0.45);
  padding: 4px 10px 2px;
  margin: 0;
}
.pepper-chat-advanced__target-lock {
  display: block;
  font-size: 9px;
  color: rgba(200, 210, 200, 0.38);
  padding: 2px 10px 6px;
}

/* ── Context source pill rail (G-PC1 phase 3) — uses dc-pill-action ── */
.pepper-empty__ctx-rail {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0 2px;
  flex-shrink: 0;
}
.pepper-empty__ctx-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 200, 130, 0.60);
  flex-shrink: 0;
  margin-right: 2px;
}
/* Size override for dc-pill-action inside the empty-state rail */
.pepper-empty__ctx-rail .dc-pill-action {
  font-size: 10px;
  padding: 3px 10px;
}
/* Quick start pills — same dc-pill-action glass treatment */
.pepper-empty__quick-pill {
  font-size: 11px;
  padding: 4px 12px;
}

/* Slice 5B — Pepper composer → /api/chat bridge (LEGACY — kept for
   backward-compat with chat turns + history-clear). G-PC1 replaces
   the old composer/send/draft-actions with the new pepper-chat-composer
   and pepper-chat-toolbar classes above. */
.workbench-pepper-chat__draft-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.workbench-pepper-chat__send {
  padding: 5px 14px;
  border: 1px solid rgba(255, 168, 70, 0.5);
  border-radius: 5px;
  background: rgba(28, 18, 8, 0.7);
  color: rgba(255, 200, 140, 0.96);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.workbench-pepper-chat__send:hover:not(:disabled) {
  background: rgba(40, 24, 10, 0.9);
  border-color: rgba(255, 168, 70, 0.75);
}

.workbench-pepper-chat__send:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.workbench-pepper-chat__turn {
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid rgba(178, 205, 188, 0.16);
  background: rgba(8, 13, 13, 0.35);
}

.workbench-pepper-chat__turn--user {
  border-left: 3px solid rgba(120, 200, 230, 0.7);
}

.workbench-pepper-chat__turn--assistant {
  border-left: 3px solid rgba(178, 205, 188, 0.6);
}

.workbench-pepper-chat__turn--system-error {
  border-left: 3px solid rgba(255, 100, 100, 0.75);
  background: rgba(30, 10, 10, 0.4);
}

.workbench-pepper-chat__turn--pending {
  border-left: 3px solid rgba(255, 168, 70, 0.6);
  opacity: 0.85;
}

.workbench-pepper-chat__turn-role {
  font-size: 10px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  opacity: 0.72;
}

.workbench-pepper-chat__turn-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.workbench-pepper-chat__turn-source {
  font-size: 10px;
  opacity: 0.7;
}

.workbench-pepper-chat__turn-source em {
  opacity: 0.65;
  font-style: normal;
}

.workbench-pepper-chat__turn-source--routing-blocked,
.workbench-pepper-chat__turn-source--network-error,
.workbench-pepper-chat__turn-source--offline-blocked-ui {
  color: rgba(255, 160, 140, 0.85);
}

.workbench-pepper-chat__turn-source--ollama-local {
  color: rgba(150, 220, 180, 0.85);
}

.workbench-pepper-chat__turn-source--anthropic-cloud {
  color: rgba(220, 180, 120, 0.85);
}

.workbench-director-next-safe-action {
  border-left: 3px solid rgba(255, 168, 70, 0.85) !important;
}

.workbench-director-next-safe-action__head,
.workbench-manual-handoff-preview__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.workbench-director-copy-btn {
  padding: 4px 10px;
  border: 1px solid rgba(255, 168, 70, 0.5);
  border-radius: 4px;
  background: rgba(28, 18, 8, 0.6);
  color: rgba(255, 224, 184, 0.96);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 120ms ease, border-color 120ms ease;
}

.workbench-director-copy-btn:hover {
  border-color: rgba(255, 196, 120, 0.85);
  background: rgba(40, 26, 12, 0.78);
}

.workbench-director-copy-btn:active {
  background: rgba(56, 36, 16, 0.9);
}

.dc-panel {
  margin-bottom: 12px;
}
.dc-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 0 2px;
  margin-bottom: 6px;
}
.dc-panel__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(224, 234, 220, 0.82);
  margin: 0;
}
.dc-panel__pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.dc-panel__body {
  padding: 12px 14px;
  border: 1px solid rgba(178, 205, 188, 0.22);
  border-radius: 6px;
  background: rgba(11, 16, 16, 0.45);
}
.dc-panel__body p {
  margin: 0;
  font-size: 12px;
  color: rgba(244, 249, 239, 0.92);
  line-height: 1.5;
}

.dc-preconditions-panel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  max-height: 140px;
  overflow-y: auto;
}
.dc-preconditions-panel__item,
.dc-preconditions-panel__expected {
  display: block;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(244, 249, 239, 0.88);
  padding: 2px 0;
}
.dc-preconditions-panel__expected {
  font-style: italic;
  color: rgba(180, 180, 190, 0.85) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-top: 1px solid rgba(178, 205, 188, 0.12);
  margin-top: 2px;
  padding-top: 4px;
}

.dc-panel__pill-anchor {
  float: right;
  margin: 0 0 6px 10px;
}

.dc-pill,
.dc-pill-action {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid rgba(225, 218, 168, 0.35);
  border-radius: 4px;
  background: rgba(225, 218, 168, 0.12);
  color: rgba(255, 200, 130, 0.88);
  font: inherit;
  /* Mission 2 (g-wb-m2, 2026-06-07): first runtime consumer of the canonical
     FORGE_DESIGN token layer — label-caps size = 11px, ZERO visual delta.
     Source: forge-design-tokens.css / FD.font.sizeLabelCaps. */
  font-size: var(--fd-font-size-label-caps);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 0 3px rgba(255, 140, 50, 0.14), 0 0 1px rgba(255, 180, 90, 0.20);
  flex-shrink: 0;
}
.dc-pill-action {
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.dc-pill-action:hover {
  border-color: rgba(255, 200, 130, 0.65);
  box-shadow: 0 0 8px rgba(255, 200, 130, 0.25);
  background: rgba(225, 218, 168, 0.18);
}
.dc-pill-action:active {
  background: rgba(225, 218, 168, 0.24);
}
.dc-pill-action:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  box-shadow: none;
}
.wbv-shell .workbench-pepper-workspace .dc-panel__title,
.wbv-shell .workbench-pepper-workspace .workbench-director-rail h3.dc-panel__title,
.wbv-shell .workbench-pepper-workspace .workbench-director-rail span.dc-panel__title {
  color: rgba(255, 200, 130, 0.88) !important;
  text-shadow: 0 0 3px rgba(255, 140, 50, 0.14), 0 0 1px rgba(255, 180, 90, 0.20) !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
}
.wbv-shell .workbench-pepper-workspace .dc-panel__body {
  background: var(--ws-card-bg, rgba(10, 14, 20, 0.72)) !important;
  border: 1px solid rgba(255, 165, 65, 0.24) !important;
  border-radius: var(--ws-glass-radius-inner, 6px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 215, 160, 0.06),
    0 0 8px rgba(255, 140, 50, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.28) !important;
}
.wbv-shell .workbench-pepper-workspace .dc-pill,
.wbv-shell .workbench-pepper-workspace .dc-pill-action {
  padding: 3px 10px !important;
  border: 1px solid rgba(255, 178, 90, 0.55) !important;
  border-radius: 4px !important;
  background: rgba(8, 12, 18, 0.78) !important;
  color: rgba(255, 200, 130, 0.88) !important;
  /* Mission 2 (g-wb-m2): canonical FORGE_DESIGN label-caps token in the workspace
     override too, so the rendered shell pill consumes --fd-*. Zero visual delta. */
  font-size: var(--fd-font-size-label-caps) !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 3px rgba(255, 140, 50, 0.14), 0 0 1px rgba(255, 180, 90, 0.20) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.18),
    inset 0 0 0 1px rgba(255, 178, 90, 0.16),
    0 0 8px rgba(255, 140, 50, 0.22),
    0 2px 6px rgba(0, 0, 0, 0.32) !important;
}
.wbv-shell .workbench-pepper-workspace .dc-pill-action:hover {
  border-color: rgba(255, 200, 130, 0.75) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.24),
    inset 0 0 0 1px rgba(255, 178, 90, 0.22),
    0 0 12px rgba(255, 140, 50, 0.32),
    0 2px 8px rgba(0, 0, 0, 0.36) !important;
  background: rgba(255, 165, 65, 0.10) !important;
}

/* ── Governance Audit Flyout ── */
.gov-audit-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  z-index: 9500;
  padding: 24px;
}
.gov-audit-dialog {
  border-radius: 10px;
  padding: 20px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  font-size: 12px;
  color: var(--fg, #f0f0f0);
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 100%;
  overflow: hidden;
}
.gov-audit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
  flex: 1;
  overflow: auto;
  padding-right: 4px;
}
.gov-audit-grid .dc-panel {
  min-height: 96px;
  margin-bottom: 0;
}
.gov-audit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.gov-audit-header strong {
  font-size: 16px;
}
.gov-audit-header p {
  margin: 2px 0 0 0;
  font-size: 10px;
  opacity: 0.7;
}
.wbv-shell .workbench-pepper-workspace .gov-audit-dialog {
  background: var(--ws-glass-bg, rgba(17, 19, 23, 0.88)) !important;
  backdrop-filter: blur(10px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(125%) !important;
  border: 1px solid rgba(255, 165, 65, 0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,220,165,0.08),
    inset 0 0 30px rgba(0,0,0,0.18),
    0 0 40px rgba(160,120,60,0.12),
    0 8px 32px rgba(0,0,0,0.50) !important;
}
.wbv-shell .workbench-pepper-workspace .gov-audit-header {
  padding: 14px 16px !important;
  background: linear-gradient(180deg, rgba(255, 143, 58, 0.14) 0%, rgba(28, 29, 33, 0.0) 100%) !important;
  border: none !important;
  border-radius: var(--ws-glass-radius-inner, 6px) var(--ws-glass-radius-inner, 6px) 0 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 220, 165, 0.10) !important;
  margin: -20px -20px 12px -20px !important;
  min-height: 56px !important;
}
.wbv-shell .workbench-pepper-workspace .gov-audit-header .gov-audit-header__eyebrow {
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(255, 200, 130, 0.88) !important;
  text-shadow: 0 0 3px rgba(255, 140, 50, 0.14), 0 0 1px rgba(255, 180, 90, 0.20) !important;
  font-weight: 800 !important;
}
.wbv-shell .workbench-pepper-workspace .gov-audit-header h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: rgba(249, 242, 232, 0.98) !important;
  margin: 2px 0 0 !important;
}
.wbv-shell .workbench-pepper-workspace .gov-audit-header .gov-audit-header__sub {
  font-size: 10px !important;
  opacity: 0.6 !important;
  margin: 2px 0 0 !important;
}

.workbench-director-audit-toggle {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 6px 0;
}

.workbench-director-audit-toggle button {
  align-self: flex-start;
  padding: 6px 14px;
  border: 1px solid rgba(190, 214, 195, 0.3);
  border-radius: 6px;
  background: rgba(10, 14, 14, 0.62);
  color: rgba(232, 242, 224, 0.92);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.workbench-director-audit-toggle button:hover {
  border-color: rgba(190, 214, 195, 0.55);
  background: rgba(14, 22, 22, 0.78);
}

.workbench-director-audit-toggle small {
  color: rgba(184, 200, 188, 0.7);
  font-size: 11px;
  font-style: italic;
  line-height: 1.42;
}

.workbench-director-audit-panel {
  display: grid;
  gap: 10px;
  padding-top: 4px;
  border-top: 1px dashed rgba(190, 214, 195, 0.22);
}



/* ============================================================
   Workbench Shell UX consolidation v3 (2026-05-22)
   Unified design-system classes for the OS Command Spine +
   workspace SurfacePanel. References existing --v2-* tokens
   from .forge-v2-shell so the spine + panels feel native to
   the broader forge molten theme.

   Classes:
     .forge-chip                — single status chip (any size)
     .forge-chip--xs / --sm     — chip size variants
     .forge-spine-group         — top-level bay group container
     .forge-spine-group__head   — bay header row (select + expand)
     .forge-spine-group__select — bay selection button
     .forge-spine-group__expand — expand chevron button
     .forge-spine-group__children — child tray container
     .forge-spine-child         — single child row
     .forge-surface-panel       — workspace panel chrome (replaces
                                  heavy modal); docked between standing
                                  surfaces
     .forge-surface-panel__head — sticky panel header (breadcrumb +
                                  status + close)
     .forge-surface-panel__body — scroll container

   Tokens used:
     --v2-orange / --v2-ember : selected/accent
     --v2-glass / --v2-metal  : panel backgrounds
     --v2-line                : warm borders
     --v2-text / --v2-muted   : foreground tones
   ============================================================ */

.forge-chip {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 4px;
  line-height: 1.4;
  white-space: nowrap;
  font-family: var(--font-body);
}
.forge-chip--xs {
  padding: 1px 5px;
  font-size: 9px;
}
.forge-chip--sm {
  padding: 2px 7px;
  font-size: 10px;
}

/* Spine group ----------------------------------------------------------- */

.forge-spine-group {
  display: flex;
  flex-direction: column;
}
.forge-spine-group__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid rgba(162, 188, 176, 0.22);
  background: rgba(13, 18, 19, 0.74);
  transition: border-color 120ms ease, background 120ms ease;
}
.forge-spine-group__head:hover {
  border-color: rgba(225, 218, 168, 0.34);
  background: rgba(18, 24, 25, 0.82);
}
.forge-spine-group[data-selected="true"] > .forge-spine-group__head {
  border-color: rgba(255, 143, 58, 0.5);
  background: linear-gradient(135deg, rgba(60, 30, 12, 0.72), rgba(20, 22, 14, 0.6));
  box-shadow: 0 0 0 1px rgba(255, 143, 58, 0.08) inset;
}
.forge-spine-group__select {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  min-height: 32px;
  background: transparent;
  color: rgba(247, 249, 242, 0.98);
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  width: 100%;
}
.forge-spine-group__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: rgba(252, 255, 249, 0.99);
}
.forge-spine-group__expand {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 9px;
  min-width: 42px;
  background: transparent;
  color: rgba(178, 205, 188, 0.78);
  border: none;
  border-left: 1px solid rgba(162, 188, 176, 0.16);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
}
.forge-spine-group__expand:hover {
  background: rgba(255, 143, 58, 0.08);
  color: rgba(255, 180, 95, 0.95);
}
.forge-spine-group__expand-count {
  font-size: 10px;
  opacity: 0.65;
}
.forge-spine-group__expand-icon {
  font-size: 12px;
}

.forge-spine-group__children {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 4px 0 6px 12px;
  padding-left: 8px;
  border-left: 1px dashed rgba(225, 218, 168, 0.22);
}

/* Spine child row ------------------------------------------------------- */

.forge-spine-child {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  min-height: 26px;
  background: rgba(5, 8, 9, 0.5);
  color: rgba(247, 249, 242, 0.94);
  border: 1px solid rgba(162, 188, 176, 0.14);
  border-radius: 5px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 120ms ease, background 120ms ease;
}
.forge-spine-child:hover {
  border-color: rgba(225, 218, 168, 0.3);
  background: rgba(15, 20, 22, 0.72);
}
.forge-spine-child[aria-current="true"] {
  border-color: rgba(255, 143, 58, 0.55);
  background: linear-gradient(135deg, rgba(48, 26, 12, 0.7), rgba(18, 20, 14, 0.62));
}
.forge-spine-child__label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(247, 249, 242, 0.95);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Workspace surface panel ---------------------------------------------- */

.forge-surface-panel {
  position: fixed;
  top: 70px;
  left: 296px;
  right: 332px;
  bottom: 86px;
  z-index: 1700;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 143, 58, 0.32);
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(255, 143, 58, 0.08), transparent 42%),
    linear-gradient(135deg, rgba(15, 20, 28, 0.94), rgba(5, 7, 11, 0.96));
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 143, 58, 0.08) inset,
    0 0 38px rgba(255, 143, 58, 0.04);
  overflow: hidden;
  font-family: var(--font-body);
}
.forge-surface-panel__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(255, 143, 58, 0.06), rgba(5, 9, 9, 0.7) 60%);
  border-bottom: 1px solid rgba(255, 143, 58, 0.22);
  flex-shrink: 0;
}
.forge-surface-panel__head-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.forge-surface-panel__path {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.forge-surface-panel__path-segment {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  color: rgba(224, 234, 220, 0.7);
}
.forge-surface-panel__path-segment--leaf {
  font-size: 14px;
  font-weight: 700;
  color: rgba(252, 255, 249, 0.99);
}
.forge-surface-panel__path-separator {
  font-size: 10px;
  color: rgba(178, 205, 188, 0.55);
}
.forge-surface-panel__close {
  padding: 4px 10px;
  font-size: 11px;
  background: transparent;
  color: rgba(255, 180, 95, 0.92);
  border: 1px solid rgba(255, 143, 58, 0.42);
  border-radius: 4px;
  cursor: pointer;
}
.forge-surface-panel__close:hover {
  background: rgba(255, 143, 58, 0.08);
}
.forge-surface-panel__description {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(224, 234, 220, 0.78);
}
.forge-surface-panel__closure-path {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: rgba(120, 200, 230, 0.85);
}
.forge-surface-panel__body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.forge-guardrail-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 14px 0;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(224, 234, 220, 0.92);
}
.forge-guardrail-notice__label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ============================================================
   Workbench Shell UX consolidation v5 (2026-05-22)
   Surface panel BODY scope normalization. Legacy components
   mounted inside <SurfacePanel> (DCLAPage, MissionControl,
   WarRoom, Settings, Skills, Pipelines, etc.) bring their
   own pre-forge styling. These rules cascade forge tokens
   onto common legacy class names so embedded components
   feel native to the molten Workbench theme.

   Scope: only inside .forge-surface-panel__body. Outside
   the surface panel, legacy components render as before.
   ============================================================ */

.forge-surface-panel__body {
  font-family: var(--font-body);
  color: rgba(247, 249, 242, 0.94);
  font-size: 13px;
  line-height: 1.55;
  padding: 0;
}

/* Legacy page wrappers — strip the legacy outer padding inside
   the panel so SurfaceHeader sets the rhythm */
.forge-surface-panel__body .page-pipelines,
.forge-surface-panel__body .hive-mind-page,
.forge-surface-panel__body .page-mission-control,
.forge-surface-panel__body .page-war-room,
.forge-surface-panel__body .page-settings,
.forge-surface-panel__body .page-skills {
  padding: 16px 18px;
  background: transparent;
}

/* Legacy section headers — match forge typography */
.forge-surface-panel__body .hive-mind-header,
.forge-surface-panel__body .page-header {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(255, 143, 58, 0.18);
}
.forge-surface-panel__body .hive-mind-title,
.forge-surface-panel__body .page-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: rgba(252, 255, 249, 0.99);
  margin: 0 0 4px;
  font-family: var(--font-body);
}
.forge-surface-panel__body .hive-mind-subtitle {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 180, 95, 0.88);
  letter-spacing: 0.02em;
}
.forge-surface-panel__body .hive-mind-desc,
.forge-surface-panel__body .page-desc {
  font-size: 12px;
  line-height: 1.6;
  color: rgba(224, 234, 220, 0.78);
  max-width: 100%;
  margin: 0 0 8px;
}

/* Legacy filter tabs — make them match forge-chip aesthetic */
.forge-surface-panel__body .pipeline-filter {
  display: flex;
  gap: 4px;
}
.forge-surface-panel__body .pipeline-filter-tab {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(11, 16, 16, 0.6);
  color: rgba(224, 234, 220, 0.7);
  border: 1px solid rgba(162, 188, 176, 0.22);
  border-radius: 5px;
  cursor: pointer;
}
.forge-surface-panel__body .pipeline-filter-tab:hover {
  border-color: rgba(255, 143, 58, 0.4);
  color: rgba(255, 180, 95, 0.95);
  background: rgba(255, 143, 58, 0.08);
}
.forge-surface-panel__body .pipeline-filter-tab.active {
  background: linear-gradient(135deg, rgba(60, 30, 12, 0.74), rgba(20, 22, 14, 0.6));
  border-color: rgba(255, 143, 58, 0.55);
  color: rgba(255, 200, 130, 0.98);
}

/* Legacy tables — molten chrome */
.forge-surface-panel__body .usage-builds-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-body);
  font-size: 12px;
  margin-top: 4px;
  background: rgba(5, 9, 9, 0.5);
  border: 1px solid rgba(162, 188, 176, 0.18);
  border-radius: 6px;
  overflow: hidden;
}
.forge-surface-panel__body .usage-builds-table thead th {
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(255, 143, 58, 0.08);
  color: rgba(255, 180, 95, 0.92);
  border-bottom: 1px solid rgba(255, 143, 58, 0.22);
  text-align: left;
}
.forge-surface-panel__body .usage-builds-table tbody td {
  padding: 6px 10px;
  font-size: 12px;
  color: rgba(247, 249, 242, 0.94);
  border-bottom: 1px solid rgba(162, 188, 176, 0.1);
}
.forge-surface-panel__body .usage-builds-table tbody tr:last-child td {
  border-bottom: none;
}
.forge-surface-panel__body .usage-builds-table tbody tr:hover td {
  background: rgba(255, 143, 58, 0.06);
}

/* Source-row badge inline alignment */
.forge-surface-panel__body .surface-source-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* Legacy agent grid / mission-control cards inherit forge tones */
.forge-surface-panel__body .mc-fallback,
.forge-surface-panel__body .agent-fallback,
.forge-surface-panel__body .wr-fallback {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 180, 95, 0.9);
  background: rgba(255, 143, 58, 0.1);
  border: 1px solid rgba(255, 143, 58, 0.32);
  border-radius: 4px;
  padding: 2px 8px;
  display: inline-block;
}

/* Legacy code/path text matches forge mono */
.forge-surface-panel__body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: rgba(120, 200, 230, 0.92);
  background: rgba(5, 9, 9, 0.5);
  padding: 1px 5px;
  border-radius: 3px;
}

/* Legacy section spacing inside panel body */
.forge-surface-panel__body section,
.forge-surface-panel__body article {
  font-family: var(--font-body);
}

/* Subtle dim for embedded "italic note" footers */
.forge-surface-panel__body p[style*="font-style: italic"] {
  font-size: 11px !important;
  color: rgba(224, 234, 220, 0.55) !important;
  border-top: 1px dashed rgba(162, 188, 176, 0.18);
  padding-top: 8px;
  margin-top: 12px !important;
}

/* ============================================================
   Workbench Molten Glass Design System v6 (2026-05-22)
   Canonical design tokens promoted to :root so every Workbench
   component can reference them. Documented in
   .docs/WORKBENCH_DESIGN_SYSTEM.md
   ============================================================ */

:root {
  /* Core palette */
  --forge-bg: #05070b;
  --forge-glass: rgba(15, 20, 28, 0.92);
  --forge-glass-soft: rgba(15, 20, 28, 0.72);
  --forge-metal: rgba(11, 16, 23, 0.84);
  --forge-orange: #ff792f;
  --forge-orange-soft: rgba(255, 143, 58, 0.28);
  --forge-ember: #ffb45f;
  --forge-cyan: #66e8ff;
  --forge-purple: #a777ff;
  --forge-text: #f9f2e8;
  --forge-text-strong: rgba(252, 255, 249, 0.99);
  --forge-text-muted: rgba(224, 234, 220, 0.78);
  --forge-text-faint: rgba(224, 234, 220, 0.55);
  --forge-line: rgba(255, 143, 58, 0.32);
  --forge-line-soft: rgba(162, 188, 176, 0.22);
  --forge-line-cool: rgba(96, 231, 255, 0.26);

  /* Status palette — 9-status WorkbenchBayStatus taxonomy */
  --status-active-bg: rgba(120, 200, 120, 0.18);
  --status-active-fg: rgba(180, 240, 180, 0.95);
  --status-active-border: rgba(120, 200, 120, 0.55);
  --status-manual-bg: rgba(225, 218, 168, 0.18);
  --status-manual-fg: rgba(245, 235, 180, 0.95);
  --status-manual-border: rgba(225, 218, 168, 0.55);
  --status-needs-build-bg: rgba(120, 200, 230, 0.16);
  --status-needs-build-fg: rgba(180, 220, 240, 0.95);
  --status-needs-build-border: rgba(120, 200, 230, 0.5);
  --status-needs-wiring-bg: rgba(180, 160, 230, 0.18);
  --status-needs-wiring-fg: rgba(210, 200, 240, 0.95);
  --status-needs-wiring-border: rgba(180, 160, 230, 0.5);
  --status-needs-setup-bg: rgba(220, 180, 90, 0.18);
  --status-needs-setup-fg: rgba(245, 215, 150, 0.95);
  --status-needs-setup-border: rgba(220, 180, 90, 0.55);
  --status-needs-evidence-bg: rgba(220, 160, 90, 0.18);
  --status-needs-evidence-fg: rgba(245, 200, 150, 0.95);
  --status-needs-evidence-border: rgba(220, 160, 90, 0.55);
  --status-read-only-bg: rgba(178, 205, 188, 0.14);
  --status-read-only-fg: rgba(210, 230, 220, 0.95);
  --status-read-only-border: rgba(178, 205, 188, 0.45);
  --status-gated-bg: rgba(255, 170, 100, 0.16);
  --status-gated-fg: rgba(255, 210, 160, 0.95);
  --status-gated-border: rgba(255, 170, 100, 0.55);
  --status-blocked-bg: rgba(220, 90, 90, 0.18);
  --status-blocked-fg: rgba(255, 180, 180, 0.95);
  --status-blocked-border: rgba(220, 90, 90, 0.6);

  /* Spacing scale */
  --forge-space-1: 4px;
  --forge-space-2: 6px;
  --forge-space-3: 8px;
  --forge-space-4: 10px;
  --forge-space-5: 14px;
  --forge-space-6: 18px;
  --forge-space-7: 24px;

  /* Radius scale */
  --forge-radius-sm: 4px;
  --forge-radius-md: 6px;
  --forge-radius-lg: 10px;

  /* Typography scale */
  --forge-type-shell-title: 13px;
  --forge-type-bay-label: 12px;
  --forge-type-child-label: 11px;
  --forge-type-panel-title: 14px;
  --forge-type-section-title: 10px;
  --forge-type-body: 12px;
  --forge-type-body-strong: 13px;
  --forge-type-helper: 11px;
  --forge-type-code: 11px;
  --forge-type-chip-xs: 9px;
  --forge-type-chip-sm: 10px;
}

/* SystemCard — repeatable forge content card */
.forge-system-card {
  display: flex;
  flex-direction: column;
  gap: var(--forge-space-2);
  padding: var(--forge-space-4) var(--forge-space-5);
  background: var(--forge-metal);
  border: 1px solid var(--forge-line-soft);
  border-radius: var(--forge-radius-md);
  color: var(--forge-text-muted);
  font-size: var(--forge-type-body);
  line-height: 1.55;
  transition: border-color 140ms ease, background 140ms ease;
}
.forge-system-card:hover {
  border-color: var(--forge-orange-soft);
  background: rgba(15, 20, 28, 0.78);
}
.forge-system-card[data-tone="active"] { border-left: 3px solid var(--status-active-border); }
.forge-system-card[data-tone="manual"] { border-left: 3px solid var(--status-manual-border); }
.forge-system-card[data-tone="needs-build"] { border-left: 3px solid var(--status-needs-build-border); }
.forge-system-card[data-tone="needs-wiring"] { border-left: 3px solid var(--status-needs-wiring-border); }
.forge-system-card[data-tone="needs-setup"] { border-left: 3px solid var(--status-needs-setup-border); }
.forge-system-card[data-tone="needs-evidence"] { border-left: 3px solid var(--status-needs-evidence-border); }
.forge-system-card[data-tone="read-only"] { border-left: 3px solid var(--status-read-only-border); }
.forge-system-card[data-tone="gated"] { border-left: 3px solid var(--status-gated-border); }
.forge-system-card[data-tone="blocked"] { border-left: 3px solid var(--status-blocked-border); }
.forge-system-card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--forge-space-3);
}
.forge-system-card__title {
  flex: 1;
  min-width: 0;
  font-size: var(--forge-type-body-strong);
  font-weight: 700;
  line-height: 1.3;
  color: var(--forge-text-strong);
}
.forge-system-card__body {
  font-size: var(--forge-type-helper);
  line-height: 1.55;
  color: var(--forge-text-muted);
}
.forge-system-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--forge-space-2);
  font-size: var(--forge-type-code);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--forge-cyan);
}

/* SectionHeader */
.forge-section-header {
  display: flex;
  align-items: center;
  gap: var(--forge-space-3);
  font-size: var(--forge-type-section-title);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--forge-text-faint);
  padding-bottom: var(--forge-space-1);
  border-bottom: 1px dashed var(--forge-line-soft);
  margin-bottom: var(--forge-space-2);
}

/* Toolbar */
.forge-toolbar {
  display: flex;
  align-items: center;
  gap: var(--forge-space-2);
  padding: var(--forge-space-2) var(--forge-space-3);
  background: rgba(5, 7, 11, 0.6);
  border: 1px solid var(--forge-line-soft);
  border-radius: var(--forge-radius-md);
  flex-wrap: wrap;
}

/* ReadOnlyNotice / GatedActionNotice */
.forge-read-only-notice,
.forge-gated-action-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--forge-space-3);
  padding: var(--forge-space-3) var(--forge-space-4);
  border-radius: var(--forge-radius-md);
  font-size: var(--forge-type-helper);
  line-height: 1.5;
}
.forge-read-only-notice {
  background: var(--status-read-only-bg);
  border: 1px solid var(--status-read-only-border);
  color: var(--status-read-only-fg);
}
.forge-gated-action-notice {
  background: var(--status-gated-bg);
  border: 1px solid var(--status-gated-border);
  color: var(--status-gated-fg);
}
.forge-read-only-notice__label,
.forge-gated-action-notice__label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ============================================================
 * @layer workbench-visual-system-v6 (WBV v1.0)
 * Pipeline: workbench-visual-system-consolidation-2026-05-21
 * Source of truth: .docs/WORKBENCH_VISUAL_SYSTEM.md
 * Reference inspection: ComfyUI Desktop v0.22.0 @ 127.0.0.1:8000
 * Discipline: calm dark canvas + sharp rectangles + mono-dot chips +
 *             one primary action per surface + invisible chrome at rest.
 * Identity kept from DaForge: molten warm-accent palette + Home orbit hero.
 * ============================================================ */

:root {
  /* 2.1 canvas + glass */
  --wbv-canvas:        #15171c;
  --wbv-canvas-deep:   #0d0f13;
  --wbv-rail:          #17181b;
  --wbv-rail-border:   rgba(255, 143, 58, 0.18);
  --wbv-panel:         rgba(20, 23, 28, 0.92);
  --wbv-panel-strong:  rgba(20, 23, 28, 0.985);
  --wbv-panel-line:    rgba(255, 255, 255, 0.06);
  --wbv-panel-line-strong: rgba(255, 255, 255, 0.12);
  --wbv-overlay-veil:  rgba(7, 9, 13, 0.72);

  /* 2.2 type */
  --wbv-text-1: 11px;
  --wbv-text-2: 12px;
  --wbv-text-3: 13px;
  --wbv-text-4: 14px;
  --wbv-text-5: 16px;
  --wbv-text-6: 20px;
  --wbv-track-tight:  0.04em;
  --wbv-track-normal: 0;
  --wbv-fg:        rgba(249, 242, 232, 0.96);
  --wbv-fg-muted:  rgba(224, 234, 220, 0.72);
  --wbv-fg-faint:  rgba(224, 234, 220, 0.48);
  --wbv-fg-strong: rgba(252, 255, 249, 0.99);

  /* 2.3 spacing + radius */
  --wbv-s1: 4px;  --wbv-s2: 6px;  --wbv-s3: 8px;
  --wbv-s4: 10px; --wbv-s5: 12px; --wbv-s6: 16px;
  --wbv-s7: 20px; --wbv-s8: 24px;
  --wbv-r-sharp: 0px;
  --wbv-r-input: 3px;
  --wbv-r-card:  6px;
  --wbv-r-soft:  10px;

  /* 2.4 status dot palette */
  --wbv-dot-active:         #7bd17b;
  --wbv-dot-manual:         #e1da9c;
  --wbv-dot-needs-build:    #7fd0e6;
  --wbv-dot-needs-wiring:   #b8a8e6;
  --wbv-dot-needs-setup:    #dcb55a;
  --wbv-dot-needs-evidence: #dca35a;
  --wbv-dot-read-only:      #b2cdbc;
  --wbv-dot-gated:          #ffaa64;
  --wbv-dot-blocked:        #dc5a5a;

  /* primary accent re-export — single primary action color across WBV */
  --wbv-primary:       #ff792f; /* matches --forge-orange */
  --wbv-primary-hover: #ffb45f; /* matches --forge-ember */
  --wbv-primary-on:    #1a0f06;
}

/* ---------- 3. Shell wrapper (page-level discipline) ---------- */
.wbv-shell {
  position: relative;
  min-height: 100vh;
  background: var(--wbv-canvas);
  color: var(--wbv-fg);
  font-family: var(--wbv-font-ui, "Inter", system-ui, sans-serif);
  font-size: var(--wbv-text-3);
  line-height: 1.5;
}
/* When a bay hosts raster art in center stage, the wbv-shell paints a
 * veil over the raster so standing surfaces remain on calm zone. */
.wbv-shell[data-hero="true"]::before {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--wbv-overlay-veil) 0%,
    rgba(7, 9, 13, 0.32) 38%,
    rgba(7, 9, 13, 0.32) 62%,
    var(--wbv-overlay-veil) 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* ---------- 3. Rail (standing-surface container) ---------- */
.wbv-rail {
  position: relative;
  background: var(--wbv-rail);
  border-right: 1px solid var(--wbv-panel-line);
  color: var(--wbv-fg);
  font-size: var(--wbv-text-3);
  padding: var(--wbv-s5);
  display: flex;
  flex-direction: column;
  gap: var(--wbv-s5);
  min-width: 0;
}
.wbv-rail--top {
  border-right: none;
  border-bottom: 1px solid var(--wbv-panel-line);
  padding: var(--wbv-s3) var(--wbv-s6);
}
.wbv-rail--right {
  border-right: none;
  border-left: 1px solid var(--wbv-panel-line);
}
.wbv-rail--bottom {
  border-right: none;
  border-top: 1px solid var(--wbv-panel-line);
}
.wbv-rail__head {
  font-size: var(--wbv-text-1);
  letter-spacing: var(--wbv-track-tight);
  text-transform: uppercase;
  color: var(--wbv-fg-faint);
  font-weight: 600;
  margin: 0 0 var(--wbv-s2);
}

/* ---------- 3. Panel ---------- */
.wbv-panel,
.forge-surface-panel {
  background: var(--wbv-panel-strong);
  border: 1px solid var(--wbv-panel-line);
  border-radius: var(--wbv-r-card);
  padding: var(--wbv-s6);
  color: var(--wbv-fg);
  display: flex;
  flex-direction: column;
  gap: var(--wbv-s6);
  min-width: 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset, 0 8px 24px rgba(0, 0, 0, 0.32);
}
.wbv-panel__head,
.forge-surface-panel__head {
  display: flex;
  flex-direction: column;
  gap: var(--wbv-s3);
  padding: 0 0 var(--wbv-s4);
  border-bottom: 1px solid var(--wbv-panel-line);
}
.forge-surface-panel__head-row {
  display: flex;
  align-items: center;
  gap: var(--wbv-s4);
  flex-wrap: wrap;
}
.forge-surface-panel__path {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--wbv-s2);
  min-width: 0;
  flex: 1 1 auto;
}
.forge-surface-panel__path-segment {
  font-weight: 500;
  font-size: var(--wbv-text-3);
  color: var(--wbv-fg-muted);
  letter-spacing: 0;
}
.forge-surface-panel__path-segment--leaf {
  color: var(--wbv-fg-strong);
  font-weight: 700;
  font-size: var(--wbv-text-4);
}
.forge-surface-panel__path-separator {
  color: var(--wbv-fg-faint);
  font-size: var(--wbv-text-2);
}
.forge-surface-panel__close {
  background: transparent;
  color: var(--wbv-fg-muted);
  border: 1px solid var(--wbv-panel-line);
  border-radius: var(--wbv-r-input);
  padding: var(--wbv-s1) var(--wbv-s4);
  font-size: var(--wbv-text-2);
  letter-spacing: var(--wbv-track-tight);
  text-transform: uppercase;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.forge-surface-panel__close:hover {
  background: var(--wbv-rail);
  color: var(--wbv-fg);
  border-color: var(--wbv-panel-line-strong);
}
.forge-surface-panel__description {
  font-size: var(--wbv-text-2);
  color: var(--wbv-fg-muted);
  margin: 0;
  line-height: 1.5;
}
.forge-surface-panel__closure-path {
  font-family: var(--wbv-font-mono, "JetBrains Mono", monospace);
  font-size: var(--wbv-text-1);
  color: var(--wbv-fg-faint);
  display: inline-flex;
  align-items: baseline;
  gap: var(--wbv-s2);
}
.forge-surface-panel__closure-path code {
  background: var(--wbv-canvas-deep);
  padding: 1px var(--wbv-s2);
  border-radius: var(--wbv-r-input);
  color: var(--wbv-fg-muted);
  font-size: var(--wbv-text-1);
}

/* ---------- 3. Chip (mono-dot override) ---------- */
.forge-chip,
.wbv-chip {
  background: transparent !important;
  border: 1px solid var(--wbv-panel-line) !important;
  color: var(--wbv-fg-muted) !important;
  font-family: var(--wbv-font-ui, "Inter", system-ui, sans-serif);
  font-size: var(--wbv-text-1);
  letter-spacing: var(--wbv-track-tight);
  text-transform: uppercase;
  padding: 2px var(--wbv-s3) 2px var(--wbv-s3);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: var(--wbv-s2);
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.4;
}
.forge-chip::before,
.wbv-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--wbv-dot-read-only);
  flex: 0 0 6px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.forge-chip[data-status="active"]::before         { background: var(--wbv-dot-active); }
.forge-chip[data-status="manual"]::before         { background: var(--wbv-dot-manual); }
.forge-chip[data-status="needs-build"]::before    { background: var(--wbv-dot-needs-build); }
.forge-chip[data-status="needs-wiring"]::before   { background: var(--wbv-dot-needs-wiring); }
.forge-chip[data-status="needs-setup"]::before    { background: var(--wbv-dot-needs-setup); }
.forge-chip[data-status="needs-evidence"]::before { background: var(--wbv-dot-needs-evidence); }
.forge-chip[data-status="read-only"]::before      { background: var(--wbv-dot-read-only); }
.forge-chip[data-status="gated"]::before          { background: var(--wbv-dot-gated); }
.forge-chip[data-status="blocked"]::before        { background: var(--wbv-dot-blocked); }
.forge-chip--xs {
  font-size: 9px;
  padding: 1px var(--wbv-s2) 1px var(--wbv-s2);
}
.forge-chip--xs::before { width: 5px; height: 5px; flex-basis: 5px; }

/* ---------- 3. Command Spine ---------- */
.forge-spine-group {
  background: transparent;
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.forge-spine-group + .forge-spine-group {
  margin-top: var(--wbv-s1);
}
.forge-spine-group__head {
  display: flex;
  align-items: center;
  gap: var(--wbv-s2);
  padding: 0;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  transition: background 120ms ease, border-color 120ms ease;
  min-width: 0;
}
.forge-spine-group[data-selected="true"] > .forge-spine-group__head {
  border-left-color: var(--wbv-primary);
  background: rgba(255, 143, 58, 0.06);
}
.forge-spine-group[data-expanded="true"]:not([data-selected="true"]) > .forge-spine-group__head {
  border-left-color: var(--wbv-panel-line-strong);
}
.forge-spine-group__select {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wbv-s3);
  padding: var(--wbv-s3) var(--wbv-s4);
  background: transparent;
  border: none;
  color: var(--wbv-fg);
  font-family: inherit;
  font-size: var(--wbv-text-3);
  font-weight: 500;
  letter-spacing: var(--wbv-track-normal);
  text-align: left;
  cursor: pointer;
  min-width: 0;
}
.forge-spine-group__select:hover {
  color: var(--wbv-fg-strong);
}
.forge-spine-group__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.forge-spine-group__expand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--wbv-s1);
  padding: var(--wbv-s1) var(--wbv-s3);
  background: transparent;
  border: 1px solid var(--wbv-panel-line);
  border-radius: var(--wbv-r-input);
  color: var(--wbv-fg-faint);
  font-size: var(--wbv-text-1);
  font-family: var(--wbv-font-mono, monospace);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.forge-spine-group__expand:hover {
  background: var(--wbv-canvas-deep);
  color: var(--wbv-fg-muted);
  border-color: var(--wbv-panel-line-strong);
}
.forge-spine-group__expand-count {
  font-variant-numeric: tabular-nums;
}
.forge-spine-group__children {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: var(--wbv-s2) 0 var(--wbv-s2) var(--wbv-s4);
  padding-left: var(--wbv-s4);
  border-left: 1px solid var(--wbv-panel-line);
}
.forge-spine-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wbv-s3);
  padding: var(--wbv-s2) var(--wbv-s4);
  background: transparent;
  border: none;
  color: var(--wbv-fg-muted);
  font-size: var(--wbv-text-2);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
  border-left: 2px solid transparent;
  margin-left: -2px;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.forge-spine-child:hover {
  background: rgba(255, 255, 255, 0.025);
  color: var(--wbv-fg);
}
.forge-spine-child[aria-current="true"] {
  background: rgba(255, 143, 58, 0.08);
  color: var(--wbv-fg-strong);
  border-left-color: var(--wbv-primary);
}
.forge-spine-child__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 3. System card ---------- */
.forge-system-card {
  background: var(--wbv-canvas-deep);
  border: 1px solid var(--wbv-panel-line);
  border-radius: var(--wbv-r-card);
  padding: var(--wbv-s5);
  display: flex;
  flex-direction: column;
  gap: var(--wbv-s4);
  border-left: 3px solid var(--wbv-panel-line);
  min-width: 0;
  transition: border-color 120ms ease, background 120ms ease;
}
.forge-system-card:hover {
  background: rgba(255, 255, 255, 0.02);
}
.forge-system-card[data-tone="active"]         { border-left-color: var(--wbv-dot-active); }
.forge-system-card[data-tone="manual"]         { border-left-color: var(--wbv-dot-manual); }
.forge-system-card[data-tone="needs-build"]    { border-left-color: var(--wbv-dot-needs-build); }
.forge-system-card[data-tone="needs-wiring"]   { border-left-color: var(--wbv-dot-needs-wiring); }
.forge-system-card[data-tone="needs-setup"]    { border-left-color: var(--wbv-dot-needs-setup); }
.forge-system-card[data-tone="needs-evidence"] { border-left-color: var(--wbv-dot-needs-evidence); }
.forge-system-card[data-tone="read-only"]      { border-left-color: var(--wbv-dot-read-only); }
.forge-system-card[data-tone="gated"]          { border-left-color: var(--wbv-dot-gated); }
.forge-system-card[data-tone="blocked"]        { border-left-color: var(--wbv-dot-blocked); }
.forge-system-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wbv-s4);
  min-width: 0;
}
.forge-system-card__title {
  font-size: var(--wbv-text-3);
  font-weight: 600;
  color: var(--wbv-fg-strong);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.forge-system-card__body {
  font-size: var(--wbv-text-2);
  color: var(--wbv-fg-muted);
  line-height: 1.55;
}
.forge-system-card__meta {
  font-size: var(--wbv-text-1);
  color: var(--wbv-fg-faint);
  display: flex;
  align-items: center;
  gap: var(--wbv-s3);
  flex-wrap: wrap;
}

/* ---------- 3. Section header ---------- */
.forge-section-header {
  font-size: var(--wbv-text-1);
  font-weight: 700;
  letter-spacing: var(--wbv-track-tight);
  text-transform: uppercase;
  color: var(--wbv-fg-faint);
  margin: 0 0 var(--wbv-s2);
  padding-bottom: var(--wbv-s2);
  border-bottom: 1px dashed var(--wbv-panel-line);
}

/* ---------- 3. Toolbar ---------- */
.forge-toolbar {
  display: flex;
  align-items: center;
  gap: var(--wbv-s2);
  padding: var(--wbv-s2);
  background: var(--wbv-canvas-deep);
  border: 1px solid var(--wbv-panel-line);
  border-radius: var(--wbv-r-input);
  min-width: 0;
  flex-wrap: wrap;
}

/* ---------- 3. Path step (surface breadcrumb) ---------- */
.forge-surface-panel__path-step {
  display: inline-flex;
  align-items: center;
  gap: var(--wbv-s2);
  min-width: 0;
}

/* ---------- 3. Guardrail notice tone variants ---------- */
.forge-guardrail-notice[data-tone="active"]         { border-left-color: var(--wbv-dot-active); }
.forge-guardrail-notice[data-tone="manual"]         { border-left-color: var(--wbv-dot-manual); }
.forge-guardrail-notice[data-tone="needs-build"]    { border-left-color: var(--wbv-dot-needs-build); }
.forge-guardrail-notice[data-tone="needs-wiring"]   { border-left-color: var(--wbv-dot-needs-wiring); }
.forge-guardrail-notice[data-tone="needs-setup"]    { border-left-color: var(--wbv-dot-needs-setup); }
.forge-guardrail-notice[data-tone="needs-evidence"] { border-left-color: var(--wbv-dot-needs-evidence); }
.forge-guardrail-notice[data-tone="read-only"]      { border-left-color: var(--wbv-dot-read-only); }
.forge-guardrail-notice[data-tone="gated"]          { border-left-color: var(--wbv-dot-gated); }
.forge-guardrail-notice[data-tone="blocked"]        { border-left-color: var(--wbv-dot-blocked); }

/* ---------- 3. Read-only / Gated / Guardrail notices ---------- */
.forge-read-only-notice,
.forge-gated-action-notice,
.forge-guardrail-notice {
  display: flex;
  align-items: center;
  gap: var(--wbv-s3);
  padding: var(--wbv-s2) var(--wbv-s4);
  background: transparent;
  border: 1px solid var(--wbv-panel-line);
  border-radius: var(--wbv-r-input);
  font-size: var(--wbv-text-2);
  color: var(--wbv-fg-muted);
  border-left: 3px solid var(--wbv-dot-read-only);
}
.forge-gated-action-notice {
  border-left-color: var(--wbv-dot-gated);
}
.forge-guardrail-notice {
  border-left-color: var(--wbv-dot-needs-evidence);
  background: rgba(220, 163, 90, 0.04);
}
.forge-read-only-notice__label,
.forge-gated-action-notice__label,
.forge-guardrail-notice__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: var(--wbv-track-tight);
  text-transform: uppercase;
  flex-shrink: 0;
  color: var(--wbv-fg-faint);
  margin-top: 0;
}

/* ---------- 3. Buttons (.wbv-btn) ---------- */
.wbv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wbv-s2);
  padding: var(--wbv-s2) var(--wbv-s4);
  background: transparent;
  color: var(--wbv-fg-muted);
  border: 1px solid var(--wbv-panel-line);
  border-radius: var(--wbv-r-input);
  font-family: inherit;
  font-size: var(--wbv-text-2);
  font-weight: 500;
  letter-spacing: var(--wbv-track-tight);
  text-transform: uppercase;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  min-width: 0;
}
.wbv-btn:hover {
  background: var(--wbv-rail);
  color: var(--wbv-fg);
  border-color: var(--wbv-panel-line-strong);
}
.wbv-btn--primary {
  background: var(--wbv-primary);
  color: var(--wbv-primary-on);
  border-color: var(--wbv-primary);
  font-weight: 700;
}
.wbv-btn--primary:hover {
  background: var(--wbv-primary-hover);
  border-color: var(--wbv-primary-hover);
  color: var(--wbv-primary-on);
}
.wbv-btn--ghost {
  border-color: transparent;
}
.wbv-btn--ghost:hover {
  border-color: var(--wbv-panel-line);
}

/* ---------- 3. Inputs ---------- */
.wbv-input,
.wbv-textarea {
  width: 100%;
  background: var(--wbv-canvas-deep);
  color: var(--wbv-fg);
  border: 1px solid var(--wbv-panel-line);
  border-radius: var(--wbv-r-input);
  padding: var(--wbv-s3) var(--wbv-s4);
  font-family: inherit;
  font-size: var(--wbv-text-3);
  line-height: 1.5;
  transition: border-color 120ms ease, background 120ms ease;
}
.wbv-input:focus,
.wbv-textarea:focus {
  outline: none;
  border-color: var(--wbv-primary);
  background: rgba(255, 143, 58, 0.04);
}

/* ---------- 3. Table / list ---------- */
.wbv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wbv-text-3);
  color: var(--wbv-fg);
}
.wbv-table thead th {
  text-align: left;
  font-size: var(--wbv-text-1);
  font-weight: 700;
  letter-spacing: var(--wbv-track-tight);
  text-transform: uppercase;
  color: var(--wbv-fg-faint);
  padding: var(--wbv-s3) var(--wbv-s5);
  border-bottom: 1px solid var(--wbv-panel-line);
}
.wbv-table tbody td {
  padding: var(--wbv-s3) var(--wbv-s5);
  border-bottom: 1px solid var(--wbv-panel-line);
  vertical-align: top;
}
.wbv-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}
.wbv-table tbody tr[aria-current="true"],
.wbv-table tbody tr[data-selected="true"] {
  background: rgba(255, 143, 58, 0.08);
  box-shadow: inset 2px 0 0 var(--wbv-primary);
}
.wbv-table tbody td.wbv-table__num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--wbv-fg-muted);
}

/* ---------- 3. Empty / honest placeholder ---------- */
.wbv-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--wbv-s3);
  padding: var(--wbv-s8);
  background: var(--wbv-canvas-deep);
  border: 1px dashed var(--wbv-panel-line);
  border-radius: var(--wbv-r-card);
  color: var(--wbv-fg-muted);
  min-width: 0;
}
.wbv-empty__title {
  margin: 0;
  font-size: var(--wbv-text-4);
  font-weight: 700;
  color: var(--wbv-fg-strong);
  letter-spacing: var(--wbv-track-normal);
}
.wbv-empty__body {
  margin: 0;
  font-size: var(--wbv-text-2);
  line-height: 1.55;
  color: var(--wbv-fg-muted);
}

/* ---------- 3. EvidenceLink (closure path reference) ---------- */
.wbv-evidence-link {
  font-family: var(--wbv-font-mono, "JetBrains Mono", monospace);
  font-size: var(--wbv-text-1);
  color: var(--wbv-fg-faint);
  display: inline-flex;
  align-items: baseline;
  gap: var(--wbv-s2);
}
.wbv-evidence-link__label {
  font-style: normal;
  color: var(--wbv-fg-faint);
  font-family: var(--wbv-font-ui, "Inter", system-ui, sans-serif);
  font-size: var(--wbv-text-1);
  letter-spacing: var(--wbv-track-tight);
  text-transform: uppercase;
}
.wbv-evidence-link code {
  background: var(--wbv-canvas-deep);
  padding: 1px var(--wbv-s2);
  border-radius: var(--wbv-r-input);
  color: var(--wbv-fg-muted);
  font-size: var(--wbv-text-1);
}

/* ---------- 3. Scrollbar polish for WBV surfaces ---------- */
.wbv-shell *::-webkit-scrollbar,
.forge-surface-panel::-webkit-scrollbar,
.wbv-rail::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.wbv-shell *::-webkit-scrollbar-track,
.forge-surface-panel::-webkit-scrollbar-track,
.wbv-rail::-webkit-scrollbar-track {
  background: transparent;
}
.wbv-shell *::-webkit-scrollbar-thumb,
.forge-surface-panel::-webkit-scrollbar-thumb,
.wbv-rail::-webkit-scrollbar-thumb {
  background: var(--wbv-panel-line-strong);
  border-radius: 999px;
}
.wbv-shell *::-webkit-scrollbar-thumb:hover,
.forge-surface-panel::-webkit-scrollbar-thumb:hover,
.wbv-rail::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.18);
}
/* ============================================================
 * END @layer workbench-visual-system-v6
 * ============================================================ */

/* ============================================================
 * @layer workbench-visual-system-v6.2 — WBV v2.0
 * Pipeline: workbench-comfyui-grounded-visual-pass-2026-05-21
 * Source of truth: .docs/WORKBENCH_VISUAL_SYSTEM.md (v2.0 addendum)
 *
 * Discipline ported from live ComfyUI (PrimeVue Aura zinc scale):
 *   --p-surface-900: #18181b  ← content bg
 *   --p-surface-800: #27272a  ← hover bg
 *   --p-surface-700: #3f3f46  ← border
 *   menu darker than canvas (#171718 < #202020)
 *   inputs radius 0, padding 1px 4px
 *   sidebar buttons 56x56, padding 8px, no resting bg
 *   scrollbar 6px wide, transparent track
 *
 * Repainted here (DaForge identity kept warm-molten):
 *   - .page-pipelines / .hive-mind-page / .hive-mind-header
 *   - .hive-mind-title / .hive-mind-subtitle / .hive-mind-desc
 *   - .pipeline-filter / .pipeline-filter-tab
 *   - .usage-builds-table
 *   - .settings-list / .settings-row / .settings-row-title / -desc
 *   - .pill / .pill-active / .pill-paused / .pill-info / .pill-lavender
 *   - .memory-grid / .memory-card / .memory-card-head / -title / -excerpt
 *   - .layer-strip / .layer-pill
 *   - .skill-category-node / .skill-flow-node / .skill-meta-tag
 *   - .surface-source-row / SourceBadge
 *   - all <table>, <input>, <textarea>, <select>, <button> under .wbv-shell
 * ============================================================ */

:root {
  /* WBV v2.0 — warm-tinted dark surface ladder (analogue to PrimeVue zinc) */
  --wbv-surface-0:    #f9f6f0;
  --wbv-surface-50:   #1f2128;
  --wbv-surface-100:  #1c1e25;
  --wbv-surface-200:  #1a1c22;
  --wbv-surface-300:  #17191f;
  --wbv-surface-400:  #15171c;  /* = --wbv-canvas */
  --wbv-surface-500:  #131419;
  --wbv-surface-600:  #111216;
  --wbv-surface-700:  #0f1014;
  --wbv-surface-800:  #0d0f13;  /* = --wbv-canvas-deep */
  --wbv-surface-900:  #0a0b0e;
  --wbv-surface-950:  #07080a;

  /* Glass / panel depth tiers (3 levels for hierarchy) */
  --wbv-glass-1:      rgba(28, 30, 37, 0.94);   /* primary panel */
  --wbv-glass-2:      rgba(22, 24, 30, 0.96);   /* nested panel */
  --wbv-glass-3:      rgba(17, 18, 22, 0.98);   /* deepest card */

  /* Border tiers — subtle to molten */
  --wbv-line-1:       rgba(255, 255, 255, 0.04);
  --wbv-line-2:       rgba(255, 255, 255, 0.08);
  --wbv-line-3:       rgba(255, 255, 255, 0.14);
  --wbv-line-warm-1:  rgba(255, 143, 58, 0.18);
  --wbv-line-warm-2:  rgba(255, 143, 58, 0.32);
  --wbv-line-warm-3:  rgba(255, 143, 58, 0.55);

  /* Shadow ladder */
  --wbv-shadow-0:  none;
  --wbv-shadow-1:  0 1px 2px rgba(0, 0, 0, 0.32);
  --wbv-shadow-2:  0 2px 8px rgba(0, 0, 0, 0.38), 0 0 0 1px var(--wbv-line-1);
  --wbv-shadow-3:  0 8px 24px rgba(0, 0, 0, 0.48), 0 0 0 1px var(--wbv-line-2);
  --wbv-shadow-4:  0 16px 48px rgba(0, 0, 0, 0.62), 0 0 0 1px var(--wbv-line-2);
  --wbv-shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.72), 0 0 0 1px var(--wbv-line-2),
                     0 0 0 2px rgba(255, 143, 58, 0.04);

  /* Glow ladder (used for selected / focus / active) */
  --wbv-glow-soft: 0 0 0 1px var(--wbv-line-warm-2);
  --wbv-glow-mid:  0 0 0 1px var(--wbv-line-warm-3), 0 0 12px rgba(255, 143, 58, 0.16);
  --wbv-glow-hot:  0 0 0 1px rgba(255, 143, 58, 0.78), 0 0 18px rgba(255, 143, 58, 0.28);

  /* Pill / chip palette (mono-dot kept; +info / warn / ok back-compat) */
  --wbv-pill-active-dot:   var(--wbv-dot-active);
  --wbv-pill-paused-dot:   var(--wbv-dot-manual);
  --wbv-pill-info-dot:     #7fa8e0;
  --wbv-pill-warn-dot:     var(--wbv-dot-needs-evidence);
  --wbv-pill-lavender-dot: var(--wbv-dot-needs-wiring);
  --wbv-pill-ok-dot:       var(--wbv-dot-active);
}

/* ---------- v2.0 · Page wrapper (legacy class repaint) ---------- */
.wbv-shell .page-pipelines,
.wbv-shell .hive-mind-page,
.wbv-shell .page-skills,
.wbv-shell .page-audit,
.wbv-shell .page-recovery,
.wbv-shell .page-mission {
  background: transparent;
  color: var(--wbv-fg);
  display: flex;
  flex-direction: column;
  gap: var(--wbv-s6);
  padding: var(--wbv-s6);
  min-width: 0;
}

.wbv-shell .hive-mind-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--wbv-s6);
  padding-bottom: var(--wbv-s5);
  border-bottom: 1px solid var(--wbv-line-1);
  flex-wrap: wrap;
}

.wbv-shell .hive-mind-title {
  font-size: var(--wbv-text-5);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--wbv-fg-strong);
  margin: 0 0 var(--wbv-s2);
  font-family: var(--wbv-font-ui, "Inter", system-ui, sans-serif);
}
.wbv-shell .hive-mind-subtitle {
  font-size: var(--wbv-text-3);
  font-weight: 400;
  color: var(--wbv-fg-faint);
  margin-left: var(--wbv-s2);
}
.wbv-shell .hive-mind-desc {
  font-size: var(--wbv-text-2);
  color: var(--wbv-fg-muted);
  line-height: 1.55;
  margin: 0;
  max-width: 80ch;
}

/* ---------- v2.0 · Pipeline filter tabs (legacy repaint) ---------- */
.wbv-shell .pipeline-filter {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--wbv-surface-800);
  border: 1px solid var(--wbv-line-1);
  border-radius: var(--wbv-r-input);
  flex-wrap: wrap;
}
.wbv-shell .pipeline-filter-tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--wbv-fg-muted);
  font-family: inherit;
  font-size: var(--wbv-text-1);
  font-weight: 600;
  letter-spacing: var(--wbv-track-tight);
  text-transform: uppercase;
  padding: var(--wbv-s2) var(--wbv-s4);
  border-radius: 2px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.wbv-shell .pipeline-filter-tab:hover {
  color: var(--wbv-fg);
  background: var(--wbv-surface-700);
}
.wbv-shell .pipeline-filter-tab.active {
  background: var(--wbv-primary);
  color: var(--wbv-primary-on);
  font-weight: 700;
}

/* ---------- v2.0 · Table list (legacy repaint) ---------- */
.wbv-shell .usage-builds-table,
.wbv-shell .wbv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wbv-text-2);
  color: var(--wbv-fg);
  background: var(--wbv-glass-2);
  border: 1px solid var(--wbv-line-1);
  border-radius: var(--wbv-r-card);
  overflow: hidden;
}
.wbv-shell .usage-builds-table thead th,
.wbv-shell .wbv-table thead th {
  text-align: left;
  background: var(--wbv-surface-800);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--wbv-track-tight);
  text-transform: uppercase;
  color: var(--wbv-fg-faint);
  padding: var(--wbv-s3) var(--wbv-s5);
  border-bottom: 1px solid var(--wbv-line-2);
}
.wbv-shell .usage-builds-table tbody td {
  padding: var(--wbv-s3) var(--wbv-s5);
  border-bottom: 1px solid var(--wbv-line-1);
  vertical-align: middle;
  color: var(--wbv-fg-muted);
}
.wbv-shell .usage-builds-table tbody tr:last-child td { border-bottom: none; }
.wbv-shell .usage-builds-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.025);
}
.wbv-shell .usage-builds-table tbody tr:hover td {
  color: var(--wbv-fg);
}
.wbv-shell .usage-builds-table tbody td strong {
  color: var(--wbv-fg-strong);
  font-weight: 700;
}

/* ---------- v2.0 · Settings list rows ---------- */
.wbv-shell .settings-list {
  display: flex;
  flex-direction: column;
  gap: var(--wbv-s2);
  background: transparent;
}
.wbv-shell .settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wbv-s5);
  padding: var(--wbv-s5);
  background: var(--wbv-glass-2);
  border: 1px solid var(--wbv-line-1);
  border-radius: var(--wbv-r-card);
  transition: border-color 120ms ease, background 120ms ease;
}
.wbv-shell .settings-row:hover {
  background: var(--wbv-glass-1);
  border-color: var(--wbv-line-2);
}
.wbv-shell .settings-row-title {
  font-size: var(--wbv-text-3);
  font-weight: 600;
  color: var(--wbv-fg-strong);
  margin-bottom: 2px;
}
.wbv-shell .settings-row-desc {
  font-size: var(--wbv-text-2);
  color: var(--wbv-fg-muted);
  line-height: 1.5;
}

/* ---------- v2.0 · Pills (mono-dot, back-compat with legacy variants) ---------- */
.wbv-shell .pill {
  display: inline-flex;
  align-items: center;
  gap: var(--wbv-s2);
  padding: 2px var(--wbv-s3);
  background: transparent !important;
  border: 1px solid var(--wbv-line-1) !important;
  border-radius: 999px;
  font-family: inherit !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: var(--wbv-track-tight) !important;
  text-transform: uppercase !important;
  color: var(--wbv-fg-muted) !important;
  line-height: 1.4;
  white-space: nowrap;
}
.wbv-shell .pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--wbv-fg-faint);
  flex: 0 0 6px;
}
.wbv-shell .pill.pill-active::before    { background: var(--wbv-pill-active-dot); }
.wbv-shell .pill.pill-paused::before    { background: var(--wbv-pill-paused-dot); }
.wbv-shell .pill.pill-info::before      { background: var(--wbv-pill-info-dot); }
.wbv-shell .pill.pill-lavender::before  { background: var(--wbv-pill-lavender-dot); }
.wbv-shell .pill.pill-warn::before      { background: var(--wbv-pill-warn-dot); }
.wbv-shell .pill.pill-ok::before        { background: var(--wbv-pill-ok-dot); }

/* ---------- v2.0 · Memory card grid (used by Pepper chat thread cards) ---------- */
.wbv-shell .memory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--wbv-s4);
}
.wbv-shell .memory-card {
  display: flex;
  flex-direction: column;
  gap: var(--wbv-s3);
  padding: var(--wbv-s5);
  background: var(--wbv-glass-2);
  border: 1px solid var(--wbv-line-1);
  border-radius: var(--wbv-r-card);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
  min-width: 0;
}
.wbv-shell .memory-card:hover {
  background: var(--wbv-glass-1);
  border-color: var(--wbv-line-warm-1);
}
.wbv-shell .memory-card-head {
  display: flex;
  align-items: center;
  gap: var(--wbv-s2);
  font-size: var(--wbv-text-1);
  color: var(--wbv-fg-faint);
}
.wbv-shell .memory-card-title {
  font-size: var(--wbv-text-3);
  font-weight: 600;
  color: var(--wbv-fg-strong);
  line-height: 1.4;
}
.wbv-shell .memory-card-excerpt {
  font-size: var(--wbv-text-2);
  color: var(--wbv-fg-muted);
  font-style: italic;
}

/* ---------- v2.0 · Layer strip (Hive Mind / Skills category strip) ---------- */
.wbv-shell .layer-strip {
  display: grid;
  gap: var(--wbv-s3);
  padding: 0;
  margin: 0;
}
.wbv-shell .layer-pill {
  background: var(--wbv-glass-2);
  border: 1px solid var(--wbv-line-1);
  border-top: 2px solid currentColor;
  border-radius: var(--wbv-r-card);
  padding: var(--wbv-s4);
  display: flex;
  flex-direction: column;
  gap: var(--wbv-s2);
  min-width: 0;
  transition: background 120ms ease, border-color 120ms ease;
}
.wbv-shell .layer-pill:hover {
  background: var(--wbv-glass-1);
}
.wbv-shell .layer-pill-head {
  display: flex;
  align-items: center;
  gap: var(--wbv-s2);
}
.wbv-shell .layer-pill-icon {
  font-size: var(--wbv-text-4);
  flex: 0 0 auto;
}
.wbv-shell .layer-pill-label {
  font-size: var(--wbv-text-2);
  font-weight: 700;
  letter-spacing: var(--wbv-track-tight);
  text-transform: uppercase;
  flex: 1 1 auto;
  min-width: 0;
}
.wbv-shell .layer-pill-count {
  font-size: var(--wbv-text-1);
  font-family: var(--wbv-font-mono, "JetBrains Mono", monospace);
  color: var(--wbv-fg-faint);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
  padding: 1px var(--wbv-s2);
  background: var(--wbv-surface-800);
  border-radius: 999px;
}
.wbv-shell .layer-pill-desc {
  font-size: 10px;
  color: var(--wbv-fg-muted);
  line-height: 1.45;
}

/* ---------- v2.0 · Skill flow nodes (ReactFlow custom) ---------- */
.wbv-shell .skill-category-node,
.wbv-shell .skill-flow-node {
  background: var(--wbv-glass-2);
  border: 1px solid var(--wbv-line-1);
  border-radius: var(--wbv-r-card);
  padding: var(--wbv-s4);
  color: var(--wbv-fg);
  font-family: inherit;
  min-width: 0;
  box-shadow: var(--wbv-shadow-2);
}
.wbv-shell .skill-category-node {
  border-top-width: 2px;
  border-top-style: solid;
}
.wbv-shell .skill-flow-node {
  border-left-width: 2px;
  border-left-style: solid;
  border-left-color: var(--wbv-line-warm-1);
}
.wbv-shell .skill-category-row {
  display: flex;
  align-items: center;
  gap: var(--wbv-s2);
  margin-bottom: var(--wbv-s1);
}
.wbv-shell .skill-category-icon {
  font-size: var(--wbv-text-4);
}
.wbv-shell .skill-category-label {
  font-size: var(--wbv-text-3);
  font-weight: 700;
  letter-spacing: var(--wbv-track-tight);
  text-transform: uppercase;
  flex: 1 1 auto;
  min-width: 0;
}
.wbv-shell .skill-category-count {
  font-size: var(--wbv-text-1);
  font-family: var(--wbv-font-mono, monospace);
  color: var(--wbv-fg-faint);
  padding: 1px var(--wbv-s2);
  background: var(--wbv-surface-800);
  border-radius: 999px;
}
.wbv-shell .skill-category-desc {
  font-size: var(--wbv-text-1);
  color: var(--wbv-fg-muted);
}
.wbv-shell .skill-flow-name {
  font-size: var(--wbv-text-3);
  font-weight: 700;
  color: var(--wbv-fg-strong);
  margin-bottom: var(--wbv-s1);
  font-family: var(--wbv-font-mono, monospace);
}
.wbv-shell .skill-flow-desc {
  font-size: var(--wbv-text-1);
  color: var(--wbv-fg-muted);
  line-height: 1.5;
  margin-bottom: var(--wbv-s3);
}
.wbv-shell .skill-flow-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wbv-s2);
}
.wbv-shell .skill-meta-tag {
  font-size: 9px;
  letter-spacing: var(--wbv-track-tight);
  text-transform: uppercase;
  font-weight: 600;
  padding: 1px var(--wbv-s2);
  background: var(--wbv-surface-800);
  color: var(--wbv-fg-muted);
  border: 1px solid var(--wbv-line-1);
  border-radius: 2px;
}
.wbv-shell .skill-meta-tag.warn { color: var(--wbv-dot-needs-evidence); }
.wbv-shell .skill-meta-tag.ok   { color: var(--wbv-dot-active); }

/* ---------- v2.0 · SourceBadge row ---------- */
.wbv-shell .surface-source-row {
  display: inline-flex;
  align-items: center;
  gap: var(--wbv-s2);
  margin-top: var(--wbv-s2);
  flex-wrap: wrap;
}

/* ---------- v2.0 · Tag-level fallbacks scoped under .wbv-shell ---------- */
.wbv-shell input[type="text"],
.wbv-shell input[type="search"],
.wbv-shell input[type="email"],
.wbv-shell input[type="url"],
.wbv-shell input[type="number"],
.wbv-shell input[type="password"],
.wbv-shell textarea,
.wbv-shell select {
  background: var(--wbv-surface-800);
  color: var(--wbv-fg);
  border: 1px solid var(--wbv-line-1);
  border-radius: var(--wbv-r-input);
  padding: var(--wbv-s3) var(--wbv-s4);
  font-family: inherit;
  font-size: var(--wbv-text-3);
  line-height: 1.4;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
.wbv-shell input:focus,
.wbv-shell textarea:focus,
.wbv-shell select:focus {
  outline: none;
  border-color: var(--wbv-primary);
  box-shadow: var(--wbv-glow-mid);
  background: var(--wbv-surface-900);
}
.wbv-shell ::-moz-placeholder {
  color: var(--wbv-fg-faint);
  font-style: normal;
}
.wbv-shell ::placeholder {
  color: var(--wbv-fg-faint);
  font-style: normal;
}

/* ---------- v2.0 · Code blocks ---------- */
.wbv-shell code {
  background: var(--wbv-surface-800);
  padding: 1px var(--wbv-s2);
  border-radius: var(--wbv-r-input);
  font-family: var(--wbv-font-mono, "JetBrains Mono", monospace);
  font-size: 0.92em;
  color: var(--wbv-dot-needs-build);
  border: 1px solid var(--wbv-line-1);
}

/* ---------- v2.0 · Headings normalize ---------- */
.wbv-shell h1, .wbv-shell h2, .wbv-shell h3, .wbv-shell h4 {
  font-family: var(--wbv-font-ui, "Inter", system-ui, sans-serif);
  color: var(--wbv-fg-strong);
}

/* ---------- v2.0 · Modal / flyout primitive ---------- */
.wbv-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 9, 13, 0.72);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 80;
}
.wbv-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--wbv-glass-1);
  border: 1px solid var(--wbv-line-2);
  border-radius: var(--wbv-r-soft);
  box-shadow: var(--wbv-shadow-modal);
  z-index: 81;
  max-width: min(960px, calc(100vw - 64px));
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.wbv-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wbv-s4);
  padding: var(--wbv-s5) var(--wbv-s6);
  border-bottom: 1px solid var(--wbv-line-2);
  background: var(--wbv-glass-2);
}
.wbv-modal__title {
  font-size: var(--wbv-text-4);
  font-weight: 700;
  color: var(--wbv-fg-strong);
  margin: 0;
}
.wbv-modal__body {
  padding: var(--wbv-s6);
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.wbv-flyout {
  position: absolute;
  background: var(--wbv-glass-1);
  border: 1px solid var(--wbv-line-2);
  border-radius: var(--wbv-r-card);
  box-shadow: var(--wbv-shadow-3);
  padding: var(--wbv-s4);
  z-index: 60;
  min-width: 200px;
}

/* ---------- v2.0 · Selection/Focus discipline ---------- */
.wbv-shell *:focus-visible {
  outline: 2px solid var(--wbv-primary);
  outline-offset: 1px;
}

/* ---------- v2.0 · DCLA inline status chips refinement ---------- */
.wbv-shell .usage-builds-table td span[title="yes"],
.wbv-shell .usage-builds-table td span[title="partial"],
.wbv-shell .usage-builds-table td span[title="no"],
.wbv-shell .usage-builds-table td span[title="planned"] {
  border-radius: var(--wbv-r-input) !important;
  font-size: var(--wbv-text-2) !important;
  width: 24px !important;
  height: 24px !important;
  border: 1px solid var(--wbv-line-1);
}

/* ---------- v2.0 · ReactFlow handles + minimap polish ---------- */
.wbv-shell .rf-handle {
  background: var(--wbv-primary);
  border: 1px solid var(--wbv-line-warm-3);
  width: 8px;
  height: 8px;
}
.wbv-shell .rf-canvas-wrap {
  background: var(--wbv-surface-300);
  border: 1px solid var(--wbv-line-1);
  border-radius: var(--wbv-r-card);
  overflow: hidden;
}

/* ============================================================
 * END @layer workbench-visual-system-v6.2 (WBV v2.0)
 * ============================================================ */

/* ============================================================
 * @layer workbench-visual-system-v6.3 — WBV v2.1 cleanup
 * Pipeline: workbench-comfyui-grounded-visual-pass-2026-05-21
 * Scope (narrow): single-primary discipline. The legacy purple
 * .btn-lavender is the Build wizard's "Next" + similar primary
 * actions; repaint to the molten-orange single primary so the
 * workbench has ONE primary action color, matching ComfyUI's
 * one-primary discipline (--p-primary-color in their stack).
 * ============================================================ */

.wbv-shell .btn-lavender {
  background: var(--wbv-primary) !important;
  color: var(--wbv-primary-on) !important;
  border: 1px solid var(--wbv-primary) !important;
  font-weight: 700 !important;
  letter-spacing: var(--wbv-track-tight);
  text-transform: uppercase;
}
.wbv-shell .btn-lavender:hover {
  background: var(--wbv-primary-hover) !important;
  border-color: var(--wbv-primary-hover) !important;
  color: var(--wbv-primary-on) !important;
}
.wbv-shell .btn-lavender:disabled,
.wbv-shell .btn-lavender:disabled:hover {
  background: var(--wbv-surface-700) !important;
  color: var(--wbv-fg-faint) !important;
  border-color: var(--wbv-line-1) !important;
  cursor: not-allowed;
  opacity: 0.72;
}

/* ============================================================
 * END @layer workbench-visual-system-v6.3
 * ============================================================ */

/* ============================================================
 * @layer workbench-visual-system-v6.4 — WBV v2.3 layered panel/depth
 * Pipeline: workbench-comfyui-grounded-visual-pass-2026-05-21
 *
 * The Skills category bubble recipe is the proof of what works in
 * this product: dark glass + thin inset highlight + drop shadow +
 * top accent color + restrained light sweep. This layer promotes
 * that recipe into a reusable WBV layered surface system across
 * the entire workbench.
 *
 * Reusable depth recipe (composed via a single class):
 *   .wbv-layer-1   resting card / row tier  (subtle)
 *   .wbv-layer-2   standing card / dock     (mid)
 *   .wbv-layer-3   raised primary / hero    (strong; uses sweep)
 *
 * Edge + accent:
 *   .wbv-edge-warm    1px warm divider
 *   .wbv-accent-top   colored 2px top accent (uses currentColor)
 *   .wbv-accent-left  colored 2px left accent (uses currentColor)
 *
 * Motion (restrained):
 *   .wbv-sweep        applies the same 12s ease-in-out light sweep
 *                     mechanism as .glow-bounce; only on selected /
 *                     active / current surfaces. Default OFF unless
 *                     a parent has data-active="true" or .is-current.
 *
 * Class repaints below apply v2.3 depth to:
 *   - Pepper dock cards
 *   - Top status rail capsules
 *   - Bottom evidence rail blocks
 *   - Surface panels + system cards (deeper recipe than v2.0)
 *   - Settings rows + memory cards
 *   - Build wizard current step pill (raised + sweep)
 * ============================================================ */

:root {
  /* Layered depth gradient recipes (the Skills-bubble proof) */
  --wbv-layer-gradient:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.045) 0%,
      rgba(255, 255, 255, 0.012) 22%,
      rgba(0, 0, 0, 0.04) 72%,
      rgba(0, 0, 0, 0.10) 100%);
  --wbv-layer-gradient-strong:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.02) 16%,
      rgba(0, 0, 0, 0.04) 70%,
      rgba(0, 0, 0, 0.12) 100%);

  /* Inset highlight + drop shadow tiers */
  --wbv-shadow-layer-1:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 0 0 1px rgba(255, 255, 255, 0.02) inset,
    0 2px 8px rgba(0, 0, 0, 0.32);
  --wbv-shadow-layer-2:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 0 0 1px rgba(255, 255, 255, 0.025) inset,
    0 4px 14px rgba(0, 0, 0, 0.38);
  --wbv-shadow-layer-3:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 6px 18px rgba(0, 0, 0, 0.42);
  --wbv-shadow-layer-3-hover:
    0 1px 0 rgba(255, 255, 255, 0.16) inset,
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 12px 28px rgba(0, 0, 0, 0.52),
    0 0 22px rgba(255, 143, 58, 0.16);

  --wbv-sweep-duration: 12s;
}

/* ---------- v2.3 · Reusable layered classes ---------- */
.wbv-layer-1,
.wbv-layer-2,
.wbv-layer-3 {
  background:
    var(--wbv-layer-gradient),
    var(--wbv-surface-200);
  border: 1px solid var(--wbv-line-1);
  border-radius: var(--wbv-r-card);
}
.wbv-layer-1 { box-shadow: var(--wbv-shadow-layer-1); }
.wbv-layer-2 { box-shadow: var(--wbv-shadow-layer-2); }
.wbv-layer-3 {
  background:
    var(--wbv-layer-gradient-strong),
    var(--wbv-surface-100);
  box-shadow: var(--wbv-shadow-layer-3);
}
.wbv-layer-3:hover { box-shadow: var(--wbv-shadow-layer-3-hover); }

/* ---------- v2.3 · Restrained light-sweep animation ----------
 * Uses the existing glow-bounce::before mechanism but inside the
 * .wbv-sweep wrapper so it only fires where we explicitly opt-in.
 * 2px band, 12s alternate. */
.wbv-sweep {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.wbv-sweep::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 35%,
    rgba(255, 255, 255, 0.6) 48%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(255, 255, 255, 0.6) 52%,
    transparent 65%,
    transparent 100%
  );
  background-size: 240% 100%;
  background-repeat: no-repeat;
  background-position: -70% 0;
  animation: glow-bounce-h var(--wbv-sweep-duration) ease-in-out infinite alternate;
  animation-delay: var(--glow-delay, 0s);
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 1;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

/* ---------- v2.3 · Accent edge primitives ---------- */
.wbv-accent-top {
  border-top: 2px solid currentColor;
}
.wbv-accent-left {
  border-left: 2px solid currentColor;
}

/* ---------- v2.3 · Surface panel — deeper layered recipe ---------- */
.wbv-shell .forge-surface-panel,
.wbv-shell .wbv-panel {
  background:
    var(--wbv-layer-gradient),
    var(--wbv-surface-200);
  border: 1px solid var(--wbv-line-2);
  box-shadow: var(--wbv-shadow-layer-2);
}

/* ---------- v2.3 · System cards — apply layered recipe ---------- */
.wbv-shell .forge-system-card {
  background:
    var(--wbv-layer-gradient),
    var(--wbv-surface-300);
  box-shadow: var(--wbv-shadow-layer-1);
  border-color: var(--wbv-line-1);
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 200ms ease,
    transform 200ms ease;
}
.wbv-shell .forge-system-card:hover {
  background:
    var(--wbv-layer-gradient-strong),
    var(--wbv-surface-200);
  border-color: var(--wbv-line-2);
  box-shadow: var(--wbv-shadow-layer-3);
  transform: translateY(-1px);
}

/* ---------- v2.3 · Settings rows — gain depth ---------- */
.wbv-shell .settings-row {
  background:
    var(--wbv-layer-gradient),
    var(--wbv-surface-300);
  border: 1px solid var(--wbv-line-1);
  box-shadow: var(--wbv-shadow-layer-1);
  transition: background 160ms ease, border-color 160ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.wbv-shell .settings-row:hover {
  background:
    var(--wbv-layer-gradient-strong),
    var(--wbv-surface-200);
  border-color: var(--wbv-line-warm-1);
  box-shadow: var(--wbv-shadow-layer-2);
  transform: translateY(-1px);
}

/* ---------- v2.3 · Memory cards — gain depth ---------- */
.wbv-shell .memory-card {
  background:
    var(--wbv-layer-gradient),
    var(--wbv-surface-300);
  box-shadow: var(--wbv-shadow-layer-1);
  transition: background 160ms ease, border-color 160ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.wbv-shell .memory-card:hover {
  background:
    var(--wbv-layer-gradient-strong),
    var(--wbv-surface-200);
  border-color: var(--wbv-line-warm-1);
  box-shadow: var(--wbv-shadow-layer-2);
  transform: translateY(-1px);
}

/* ---------- v2.3 · Build wizard step pills + current step depth ---------- */
.wbv-shell .build-new-step-pill {
  background:
    var(--wbv-layer-gradient),
    var(--wbv-surface-300);
  border: 1px solid var(--wbv-line-1);
  box-shadow: var(--wbv-shadow-layer-1);
  border-radius: var(--wbv-r-card);
  transition: background 160ms ease, border-color 160ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.wbv-shell .build-new-step-pill:hover {
  border-color: var(--wbv-line-2);
  box-shadow: var(--wbv-shadow-layer-2);
}
.wbv-shell .build-new-step-pill.current {
  background:
    var(--wbv-layer-gradient-strong),
    var(--wbv-surface-100);
  border-color: var(--wbv-primary);
  box-shadow:
    var(--wbv-shadow-layer-3),
    0 0 0 1px var(--wbv-primary),
    0 0 18px rgba(255, 143, 58, 0.18);
  transform: translateY(-1px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.wbv-shell .build-new-step-pill.current::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%, transparent 35%,
    rgba(255, 215, 165, 0.7) 48%,
    rgba(255, 215, 165, 1) 50%,
    rgba(255, 215, 165, 0.7) 52%,
    transparent 65%, transparent 100%
  );
  background-size: 240% 100%;
  background-repeat: no-repeat;
  background-position: -70% 0;
  animation: glow-bounce-h 12s ease-in-out infinite alternate;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 1;
}

/* ---------- v2.3 · Pepper dock cards — depth ---------- */
.wbv-shell .workbench-pepper-dock__compact-card,
.wbv-shell .workbench-pepper-dock__chat-card,
.wbv-shell .workbench-pepper-dock__response-window {
  background:
    var(--wbv-layer-gradient),
    var(--wbv-surface-300);
  border: 1px solid var(--wbv-line-1);
  border-radius: var(--wbv-r-card);
  box-shadow: var(--wbv-shadow-layer-1);
}
.wbv-shell .workbench-pepper-dock__compact-card--governed-task {
  border-color: var(--wbv-line-warm-1);
}

/* ---------- v2.3 · Top status rail capsules ---------- */
.wbv-shell .workbench-status-pill {
  background:
    var(--wbv-layer-gradient),
    var(--wbv-surface-300);
  border: 1px solid var(--wbv-line-1);
  border-radius: var(--wbv-r-input);
  box-shadow: var(--wbv-shadow-layer-1);
  padding: var(--wbv-s2) var(--wbv-s4);
  font-size: var(--wbv-text-2);
}
.wbv-shell .workbench-top-status-rail,
.wbv-shell .workbench-top-work-strip {
  background: transparent;
}

/* ---------- v2.3 · Bottom evidence rail blocks ---------- */
.wbv-shell .workbench-evidence-block {
  background:
    var(--wbv-layer-gradient),
    var(--wbv-surface-300);
  border: 1px solid var(--wbv-line-1);
  border-radius: var(--wbv-r-card);
  box-shadow: var(--wbv-shadow-layer-1);
  transition: background 160ms ease, border-color 160ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.wbv-shell .workbench-evidence-block:hover {
  background:
    var(--wbv-layer-gradient-strong),
    var(--wbv-surface-200);
  border-color: var(--wbv-line-warm-1);
  box-shadow: var(--wbv-shadow-layer-2);
  transform: translateY(-1px);
}
.wbv-shell .workbench-evidence-block--returned {
  border-left: 2px solid var(--wbv-dot-active);
}
.wbv-shell .workbench-evidence-block--missing {
  border-left: 2px solid var(--wbv-dot-blocked);
}
.wbv-shell .workbench-evidence-block--expected {
  border-left: 2px solid var(--wbv-dot-needs-evidence);
}
.wbv-shell .workbench-evidence-block--eligibility {
  border-left: 2px solid var(--wbv-dot-gated);
}

/* ---------- v2.3 · Selected spine group/child gain depth ---------- */
.wbv-shell .forge-spine-group[data-selected="true"] > .forge-spine-group__head {
  background:
    var(--wbv-layer-gradient),
    rgba(255, 143, 58, 0.06);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 2px 6px rgba(0, 0, 0, 0.22),
    inset 2px 0 0 var(--wbv-primary);
  border-left-color: transparent; /* shadow inset handles it */
}
.wbv-shell .forge-spine-child[aria-current="true"] {
  background:
    var(--wbv-layer-gradient),
    rgba(255, 143, 58, 0.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    inset 2px 0 0 var(--wbv-primary),
    0 2px 6px rgba(0, 0, 0, 0.22);
  border-left-color: transparent;
}

/* ---------- v2.3 · Active primary button (.btn-lavender repaint refine) ---------- */
.wbv-shell .btn-lavender:not(:disabled) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 0 0 1px rgba(0, 0, 0, 0.18) inset,
    0 4px 14px rgba(255, 143, 58, 0.32);
}
.wbv-shell .btn-lavender:not(:disabled):hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.24) inset,
    0 0 0 1px rgba(0, 0, 0, 0.20) inset,
    0 8px 22px rgba(255, 143, 58, 0.42);
  transform: translateY(-1px);
}

/* ---------- v2.3 · Bottom evidence strip cells (actual BEM class) ---------- */
.wbv-shell .workbench-bottom-evidence-strip__cell {
  background:
    var(--wbv-layer-gradient),
    var(--wbv-surface-300);
  border: 1px solid var(--wbv-line-1);
  border-radius: var(--wbv-r-card);
  box-shadow: var(--wbv-shadow-layer-1);
  transition: background 160ms ease, border-color 160ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.wbv-shell .workbench-bottom-evidence-strip__cell:hover {
  background:
    var(--wbv-layer-gradient-strong),
    var(--wbv-surface-200);
  border-color: var(--wbv-line-warm-1);
  box-shadow: var(--wbv-shadow-layer-2);
  transform: translateY(-1px);
}
.wbv-shell .workbench-bottom-evidence-strip__title {
  font-size: var(--wbv-text-1);
  font-weight: 700;
  letter-spacing: var(--wbv-track-tight);
  text-transform: uppercase;
  color: var(--wbv-fg-faint);
}

/* ============================================================
 * END @layer workbench-visual-system-v6.4 (WBV v2.3)
 * ============================================================ */

/* ============================================================
 * @layer workbench-visual-system-v6.5 — WBV v3.0
 * Pipeline: workbench-comfyui-grounded-visual-pass-2026-05-21
 *
 * Live ComfyUI evidence (2026-05-21, http://127.0.0.1:8000 +
 * Settings dialog open via gear-icon ref_56):
 *   modal      bg #18181b  border 1px #3f3f46  radius 12px
 *              shadow 0 20px 25px -5px rgba(0,0,0,0.1),
 *                     0 8px 10px -6px rgba(0,0,0,0.1)
 *              padding 0 (header 20px / body 0 20px 20px)
 *              header fontSize 16px fontWeight 400  no border-bottom
 *              close button border-radius 50% transparent + zinc-400
 *   left rail  bg #171718  border-right 1px #313235  width 59px  pad 4px 0
 *   rail btn   56x56  bg transparent  no border  no radius
 *              color #8a8a8a  fontSize 12px  pad 8px
 *   input      bg #313235  radius 8px  pad 8px 16px  fontSize 14px
 *              shadow rgba(18,18,23,0.05) 0 1px 2px (very subtle)
 *   topbar     height 32px  transparent  no border
 *   scrollbar  width 6px  thumb radius 3px  track transparent
 *
 * Extracted construction recipe (the discipline, not the look):
 *   1. Tone-based depth ladder. Chrome moves through tones; rails
 *      are darker than canvas; surface panels are lighter than
 *      canvas; cards are slightly lighter than surface; inputs are
 *      lighter still. NO gradients on chrome — only on actively
 *      "raised" elements (current step pill, governed-task card).
 *   2. Sharp 1px monochrome borders on chrome. Warm accent borders
 *      reserved for active / governed / selected states.
 *   3. Modals: dark surface + 1px border + 12px radius + 2-layer
 *      offset drop shadow. No inset highlight. No gradient.
 *   4. Section labels: uppercase letterspaced, hierarchy by
 *      typography not by decoration.
 *   5. One primary accent per surface (theirs blue, ours molten).
 *   6. Inputs are rounded (8px) and padded generously.
 *   7. Scrollbars 6px, transparent track, thumb radius 3px.
 *
 * DaForge identity overlay:
 *   keep molten warm accent for: selected spine / governed dock
 *   card / current step / primary action / active tab indicator /
 *   hover lift. Drop gradients from chrome but keep them on
 *   "raised" objects per v2.3.
 * ============================================================ */

:root {
  /* WBV v3.0 — tone-based depth ladder (ComfyUI discipline) */
  --wbv3-canvas:      #15171c;
  --wbv3-rail:        #131418;  /* slightly darker than canvas */
  --wbv3-rail-deep:   #0f1014;  /* dock + bottom rail */
  --wbv3-surface:     #1a1c22;  /* open bay surface */
  --wbv3-surface-lo:  #181a20;
  --wbv3-card:        #1e2027;  /* cards inside surface */
  --wbv3-card-hi:     #22252c;  /* hover/active card */
  --wbv3-input:       #262a32;  /* inputs lighter than canvas (pop) */
  --wbv3-modal:       #1b1d24;
  --wbv3-modal-border:#3f3f46;

  /* Border discipline */
  --wbv3-line:        rgba(255, 255, 255, 0.06);
  --wbv3-line-strong: rgba(255, 255, 255, 0.10);
  --wbv3-line-warm:   rgba(255, 143, 58, 0.20);
  --wbv3-line-hot:    rgba(255, 143, 58, 0.55);

  /* Shadow discipline (ComfyUI = monochrome offset, not glow) */
  --wbv3-shadow-1:    0 1px 2px rgba(0, 0, 0, 0.18);
  --wbv3-shadow-2:    0 4px 10px rgba(0, 0, 0, 0.28);
  --wbv3-shadow-modal:
                      0 20px 25px -5px rgba(0, 0, 0, 0.55),
                      0 8px 10px -6px rgba(0, 0, 0, 0.4),
                      0 0 0 1px var(--wbv3-modal-border);
  --wbv3-shadow-warm: 0 4px 14px rgba(255, 143, 58, 0.18);
}

/* ---------- v3.0 · Canvas + page chrome ---------- */
.wbv-shell {
  background: var(--wbv3-canvas);
}

/* ---------- v3.0 · LEFT command spine — flat tone rail ---------- */
.wbv-shell .forge-spine,
.wbv-shell .workbench-os-spine {
  background: var(--wbv3-rail);
  border-right: 1px solid var(--wbv3-line);
  padding: var(--wbv-s4) var(--wbv-s3);
  box-shadow: none;
}
.wbv-shell .sidebar-section-label,
.wbv-shell .workbench-os-spine__header {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wbv-fg-faint);
  padding: var(--wbv-s3) var(--wbv-s4) var(--wbv-s2);
}

/* Spine groups: flat tone, sharper hit area, primary on selected */
.wbv-shell .forge-spine-group__head {
  background: transparent;
  border-left: 2px solid transparent;
  border-radius: 4px;
  transition: background 120ms ease, border-color 120ms ease;
}
.wbv-shell .forge-spine-group__head:hover {
  background: rgba(255, 255, 255, 0.025);
}
.wbv-shell .forge-spine-group[data-selected="true"] > .forge-spine-group__head {
  background: rgba(255, 143, 58, 0.08);
  border-left-color: var(--wbv-primary);
  box-shadow: inset 2px 0 0 var(--wbv-primary);
}

/* Spine children: indented under selected bay, tone-up on active */
.wbv-shell .forge-spine-group__children {
  border-left: 1px solid var(--wbv3-line);
  margin-left: var(--wbv-s4);
  padding-left: var(--wbv-s3);
}
.wbv-shell .forge-spine-child {
  background: transparent;
  border-left: 2px solid transparent;
  border-radius: 4px;
  padding: var(--wbv-s2) var(--wbv-s3);
  margin-left: -2px;
}
.wbv-shell .forge-spine-child:hover {
  background: rgba(255, 255, 255, 0.03);
}
.wbv-shell .forge-spine-child[aria-current="true"] {
  background: rgba(255, 143, 58, 0.10);
  border-left-color: var(--wbv-primary);
  color: var(--wbv-fg-strong);
  box-shadow: inset 2px 0 0 var(--wbv-primary);
}

/* ---------- v3.0 · TOP status rail — flat tone strip ---------- */
.wbv-shell .workbench-top-status-rail,
.wbv-shell .workbench-top-work-strip {
  background: var(--wbv3-rail);
  border-bottom: 1px solid var(--wbv3-line);
  padding: var(--wbv-s2) var(--wbv-s5);
  display: flex;
  gap: var(--wbv-s2);
  flex-wrap: wrap;
  box-shadow: none;
}

/* Status pills become ComfyUI-style capsules: subtle bg, 1px border,
 * label-over-value typography, no gradient, no inset glow. */
.wbv-shell .workbench-status-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 4px 10px;
  background: var(--wbv3-card);
  border: 1px solid var(--wbv3-line);
  border-radius: var(--wbv-r-input);
  box-shadow: none;
  min-width: 0;
  transition: background 120ms ease, border-color 120ms ease;
}
.wbv-shell .workbench-status-pill:hover {
  background: var(--wbv3-card-hi);
  border-color: var(--wbv3-line-strong);
}
.wbv-shell .workbench-status-pill > span:first-child {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wbv-fg-faint);
  line-height: 1.2;
}
.wbv-shell .workbench-status-pill > strong {
  font-size: 11px;
  font-weight: 600;
  color: var(--wbv-fg);
  line-height: 1.3;
  font-family: var(--wbv-font-ui, "Inter", sans-serif);
}

/* ---------- v3.0 · RIGHT Pepper dock — flat tone rail ---------- */
.wbv-shell .workbench-pepper-dock {
  background: var(--wbv3-rail-deep);
  border-left: 1px solid var(--wbv3-line);
  padding: var(--wbv-s4);
  display: flex;
  flex-direction: column;
  gap: var(--wbv-s3);
  box-shadow: none;
}
.wbv-shell .workbench-pepper-dock__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wbv-s2);
  padding: 0 var(--wbv-s2) var(--wbv-s2);
  border-bottom: 1px solid var(--wbv3-line);
}
.wbv-shell .workbench-pepper-dock__header span {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wbv-fg-faint);
  display: block;
}
.wbv-shell .workbench-pepper-dock__header strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--wbv-fg-strong);
  display: block;
}
.wbv-shell .workbench-pepper-dock__header em {
  font-size: 10px;
  font-style: normal;
  color: var(--wbv-fg-muted);
}
.wbv-shell .workbench-pepper-dock__context-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wbv-s2);
}
.wbv-shell .workbench-pepper-dock__context-row > div {
  background: var(--wbv3-card);
  border: 1px solid var(--wbv3-line);
  border-radius: var(--wbv-r-input);
  padding: var(--wbv-s2) var(--wbv-s3);
  min-width: 0;
  box-shadow: none;
}
.wbv-shell .workbench-pepper-dock__context-row span {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wbv-fg-faint);
  display: block;
  margin-bottom: 2px;
}
.wbv-shell .workbench-pepper-dock__context-row strong {
  font-size: 12px;
  color: var(--wbv-fg);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.wbv-shell .workbench-pepper-dock__compact-stack {
  display: flex;
  flex-direction: column;
  gap: var(--wbv-s3);
}
.wbv-shell .workbench-pepper-dock__chat-card,
.wbv-shell .workbench-pepper-dock__compact-card {
  background: var(--wbv3-card);
  border: 1px solid var(--wbv3-line);
  border-radius: var(--wbv-r-card);
  padding: var(--wbv-s4);
  box-shadow: var(--wbv3-shadow-1);
  display: flex;
  flex-direction: column;
  gap: var(--wbv-s2);
}
.wbv-shell .workbench-pepper-dock__compact-card--governed-task {
  border-color: var(--wbv3-line-warm);
  box-shadow: var(--wbv3-shadow-1), inset 2px 0 0 var(--wbv-primary);
  background:
    linear-gradient(180deg, rgba(255, 143, 58, 0.05) 0%, rgba(255, 143, 58, 0) 40%),
    var(--wbv3-card);
}
.wbv-shell .workbench-pepper-dock__compact-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wbv-s2);
}
.wbv-shell .workbench-pepper-dock__compact-title span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wbv-fg-faint);
}
.wbv-shell .workbench-pepper-dock__compact-title em {
  font-size: 10px;
  font-style: normal;
  color: var(--wbv-fg-muted);
  padding: 1px var(--wbv-s2);
  background: var(--wbv3-input);
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.wbv-shell .workbench-pepper-dock__response-window {
  background: var(--wbv3-rail);
  border: 1px solid var(--wbv3-line);
  border-radius: var(--wbv-r-input);
  padding: var(--wbv-s3);
  font-size: 12px;
  line-height: 1.55;
  color: var(--wbv-fg-muted);
}
.wbv-shell .workbench-pepper-dock__response-window strong {
  display: block;
  margin-top: var(--wbv-s2);
  color: var(--wbv-fg-strong);
  font-size: 11px;
}
.wbv-shell .workbench-pepper-dock__prompt-teaser {
  display: flex;
  flex-direction: column;
  gap: var(--wbv-s1);
}
.wbv-shell .workbench-pepper-dock__prompt-teaser span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wbv-fg-faint);
}
.wbv-shell .workbench-pepper-dock__prompt-teaser textarea {
  background: var(--wbv3-input);
  border: 1px solid var(--wbv3-line);
  border-radius: var(--wbv-r-input);
  padding: var(--wbv-s3);
  color: var(--wbv-fg);
  font-size: 12px;
  font-family: var(--wbv-font-ui, "Inter", sans-serif);
  resize: none;
  min-height: 56px;
}
.wbv-shell .workbench-pepper-dock__compact-card strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--wbv-fg-strong);
}
.wbv-shell .workbench-pepper-dock__compact-card p,
.wbv-shell .workbench-pepper-dock__compact-card small {
  font-size: 11px;
  color: var(--wbv-fg-muted);
  line-height: 1.5;
  margin: 0;
}
.wbv-shell .workbench-pepper-dock__compact-card small {
  font-size: 10px;
  color: var(--wbv-fg-faint);
}
.wbv-shell .workbench-pepper-dock__expand {
  background: var(--wbv-primary);
  color: var(--wbv-primary-on);
  border: 1px solid var(--wbv-primary);
  border-radius: var(--wbv-r-input);
  padding: var(--wbv-s3) var(--wbv-s4);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, box-shadow 200ms ease, transform 200ms ease;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    var(--wbv3-shadow-warm);
}
.wbv-shell .workbench-pepper-dock__expand:hover {
  background: var(--wbv-primary-hover);
  border-color: var(--wbv-primary-hover);
  transform: translateY(-1px);
}

/* ---------- v3.0 · BOTTOM evidence rail — flat tone strip ---------- */
.wbv-shell .workbench-bottom-evidence-strip {
  background: var(--wbv3-rail);
  border-top: 1px solid var(--wbv3-line);
  padding: var(--wbv-s2) var(--wbv-s5);
  box-shadow: none;
}
.wbv-shell .workbench-bottom-evidence-strip__title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wbv-fg-faint);
  margin: 0 0 var(--wbv-s2);
}
.wbv-shell .workbench-bottom-evidence-strip__items {
  display: flex;
  gap: var(--wbv-s2);
  flex-wrap: wrap;
}
.wbv-shell .workbench-bottom-evidence-strip__cell {
  background: var(--wbv3-card);
  border: 1px solid var(--wbv3-line);
  border-radius: var(--wbv-r-input);
  box-shadow: none;
  padding: var(--wbv-s2) var(--wbv-s4);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: background 120ms ease, border-color 120ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.wbv-shell .workbench-bottom-evidence-strip__cell:hover {
  background: var(--wbv3-card-hi);
  border-color: var(--wbv3-line-strong);
  box-shadow: var(--wbv3-shadow-1);
  transform: translateY(-1px);
}
.wbv-shell .workbench-bottom-evidence-strip--returned .workbench-bottom-evidence-strip__cell {
  border-left: 2px solid var(--wbv-dot-active);
}
.wbv-shell .workbench-bottom-evidence-strip--missing .workbench-bottom-evidence-strip__cell {
  border-left: 2px solid var(--wbv-dot-blocked);
}

/* ---------- v3.0 · BAY SURFACE — ComfyUI modal recipe ---------- */
.wbv-shell .forge-surface-panel,
.wbv-shell .wbv-panel {
  background: var(--wbv3-surface);
  border: 1px solid var(--wbv3-modal-border);
  border-radius: var(--wbv-r-soft); /* 10px — closer to ComfyUI 12 */
  box-shadow: var(--wbv3-shadow-modal);
  padding: var(--wbv-s6);
}
.wbv-shell .forge-surface-panel__head {
  border-bottom: 1px solid var(--wbv3-line);
  padding-bottom: var(--wbv-s4);
}
.wbv-shell .forge-surface-panel__close {
  background: transparent;
  color: var(--wbv-fg-muted);
  border: 1px solid var(--wbv3-line);
  border-radius: var(--wbv-r-input);
  padding: var(--wbv-s1) var(--wbv-s4);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.wbv-shell .forge-surface-panel__close:hover {
  background: var(--wbv3-card);
  color: var(--wbv-fg);
  border-color: var(--wbv3-line-strong);
}

/* ---------- v3.0 · System cards — flat tone (the actual ComfyUI card discipline) ---------- */
.wbv-shell .forge-system-card {
  background: var(--wbv3-card);
  border: 1px solid var(--wbv3-line);
  border-radius: var(--wbv-r-card);
  box-shadow: var(--wbv3-shadow-1);
}
.wbv-shell .forge-system-card:hover {
  background: var(--wbv3-card-hi);
  border-color: var(--wbv3-line-strong);
  box-shadow: var(--wbv3-shadow-2);
  transform: translateY(-1px);
}

/* ---------- v3.0 · Settings rows — flat with warm hover ---------- */
.wbv-shell .settings-row {
  background: var(--wbv3-card);
  border: 1px solid var(--wbv3-line);
  border-radius: var(--wbv-r-card);
  box-shadow: var(--wbv3-shadow-1);
}
.wbv-shell .settings-row:hover {
  background: var(--wbv3-card-hi);
  border-color: var(--wbv3-line-warm);
  box-shadow: var(--wbv3-shadow-2);
  transform: translateY(-1px);
}

/* ---------- v3.0 · Memory cards (chat threads) ---------- */
.wbv-shell .memory-card {
  background: var(--wbv3-card);
  border: 1px solid var(--wbv3-line);
  border-radius: var(--wbv-r-card);
  box-shadow: var(--wbv3-shadow-1);
}
.wbv-shell .memory-card:hover {
  background: var(--wbv3-card-hi);
  border-color: var(--wbv3-line-warm);
  box-shadow: var(--wbv3-shadow-2);
  transform: translateY(-1px);
}

/* ---------- v3.0 · Tables ---------- */
.wbv-shell .usage-builds-table,
.wbv-shell .wbv-table {
  background: var(--wbv3-surface-lo);
  border: 1px solid var(--wbv3-line);
}
.wbv-shell .usage-builds-table thead th,
.wbv-shell .wbv-table thead th {
  background: var(--wbv3-rail-deep);
  font-size: 9px;
  letter-spacing: 0.08em;
}
.wbv-shell .usage-builds-table tbody tr:hover {
  background: rgba(255, 143, 58, 0.04);
}

/* ---------- v3.0 · Inputs (ComfyUI rounded 8px discipline) ---------- */
.wbv-shell input[type="text"],
.wbv-shell input[type="search"],
.wbv-shell input[type="email"],
.wbv-shell input[type="url"],
.wbv-shell input[type="number"],
.wbv-shell input[type="password"],
.wbv-shell textarea,
.wbv-shell select {
  background: var(--wbv3-input);
  border: 1px solid var(--wbv3-line);
  border-radius: var(--wbv-r-input);
  padding: 8px 12px;
  font-size: 13px;
  color: var(--wbv-fg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
  transition: border-color 120ms ease, box-shadow 200ms ease, background 120ms ease;
}
.wbv-shell input:focus,
.wbv-shell textarea:focus,
.wbv-shell select:focus {
  background: var(--wbv3-input);
  border-color: var(--wbv-primary);
  box-shadow: 0 0 0 1px var(--wbv-primary), 0 1px 2px rgba(0, 0, 0, 0.10);
}

/* ---------- v3.0 · Modal / flyout — ComfyUI recipe ---------- */
.wbv-shell .wbv-modal {
  background: var(--wbv3-modal);
  border: 1px solid var(--wbv3-modal-border);
  border-radius: 12px;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.55),
    0 8px 10px -6px rgba(0, 0, 0, 0.4);
}
.wbv-shell .wbv-modal__head {
  background: transparent;
  border-bottom: none;
  padding: 20px;
  font-size: 16px;
  font-weight: 500;
}
.wbv-shell .wbv-modal__body {
  padding: 0 20px 20px;
}
.wbv-shell .wbv-flyout {
  background: var(--wbv3-modal);
  border: 1px solid var(--wbv3-modal-border);
  border-radius: 10px;
  box-shadow: var(--wbv3-shadow-modal);
}

/* ---------- v3.0 · Scrollbar (ComfyUI 6px discipline) ---------- */
.wbv-shell *::-webkit-scrollbar,
.wbv-shell::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.wbv-shell *::-webkit-scrollbar-track,
.wbv-shell::-webkit-scrollbar-track {
  background: transparent;
}
.wbv-shell *::-webkit-scrollbar-thumb,
.wbv-shell::-webkit-scrollbar-thumb {
  background: var(--wbv3-line-strong);
  border-radius: 3px;
}
.wbv-shell *::-webkit-scrollbar-thumb:hover,
.wbv-shell::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* ---------- v3.0 · Filter tabs (DCLA/Skills pipeline-filter) ---------- */
.wbv-shell .pipeline-filter {
  background: var(--wbv3-rail-deep);
  border: 1px solid var(--wbv3-line);
}
.wbv-shell .pipeline-filter-tab {
  background: transparent;
  color: var(--wbv-fg-muted);
  border-radius: 4px;
}
.wbv-shell .pipeline-filter-tab:hover {
  background: var(--wbv3-card);
  color: var(--wbv-fg);
}
.wbv-shell .pipeline-filter-tab.active {
  background: var(--wbv-primary);
  color: var(--wbv-primary-on);
  box-shadow: var(--wbv3-shadow-warm);
}

/* ---------- v3.0 · Build wizard step pills — keep raised current ---------- */
.wbv-shell .build-new-step-pill {
  background: var(--wbv3-card);
  border: 1px solid var(--wbv3-line);
  box-shadow: var(--wbv3-shadow-1);
}
.wbv-shell .build-new-step-pill:hover {
  background: var(--wbv3-card-hi);
  border-color: var(--wbv3-line-strong);
}
.wbv-shell .build-new-step-pill.current {
  background:
    linear-gradient(180deg, rgba(255, 143, 58, 0.10) 0%, rgba(255, 143, 58, 0) 50%),
    var(--wbv3-card);
  border-color: var(--wbv-primary);
  box-shadow:
    var(--wbv3-shadow-warm),
    inset 0 0 0 1px var(--wbv-primary);
  transform: translateY(-1px);
}

/* ---------- v3.0 · Skill/Layer node cards — flat with color top accent ---------- */
.wbv-shell .skill-category-node,
.wbv-shell .skill-flow-node,
.wbv-shell .layer-pill {
  background: var(--wbv3-card) !important;
  border-color: var(--wbv3-line) !important;
  box-shadow: var(--wbv3-shadow-1) !important;
}
.wbv-shell .skill-category-node:hover,
.wbv-shell .skill-flow-node:hover,
.wbv-shell .layer-pill:hover {
  background: var(--wbv3-card-hi) !important;
  border-color: var(--wbv3-line-strong) !important;
  box-shadow: var(--wbv3-shadow-2) !important;
  transform: translateY(-1px) !important;
}

/* ---------- v3.0 · Boundary / read-only / gated notices flat ---------- */
.wbv-shell .forge-guardrail-notice,
.wbv-shell .forge-read-only-notice,
.wbv-shell .forge-gated-action-notice {
  background: var(--wbv3-card);
  border: 1px solid var(--wbv3-line);
  border-radius: var(--wbv-r-input);
}
.wbv-shell .forge-guardrail-notice {
  border-left: 2px solid var(--wbv-dot-needs-evidence);
}
.wbv-shell .forge-gated-action-notice {
  border-left: 2px solid var(--wbv-dot-gated);
}

/* ============================================================
 * END @layer workbench-visual-system-v6.5 (WBV v3.0)
 * ============================================================ */

/* ============================================================
 * @layer workbench-visual-system-v6.6 — WBV v3.1
 * Skills-style canonical surface composition. SUPPORT for the
 * BaySurface / BayHeader / BayTabStrip / BayTab / CategoryStrip /
 * CategoryBubble / PresentationArea / ActionButton / Title /
 * Body / Helper / Label / Code primitives in shell-primitives.tsx.
 *
 * Construction extracted live from ComfyUI right-panel:
 *   tabs: Inter 14/400, no transform, no spacing; active = white
 *         color shift only (no underline / bg / border)
 *   h3 = 14/600 normal letter-spacing — hierarchy by weight
 *   right-panel container: bg #171718 (rail-tone), border-bottom 1px #3f3f46
 *   modal: bg #18181b + 1px #3f3f46 + radius 12 + 2-layer shadow
 *
 * Workbench identity overlay: molten primary for current/selected,
 * warm flare on bubble edges, mono-dot status chips, layered panels.
 * ============================================================ */

/* ---------- v3.1 · BaySurface ---------- */
.wbv-bay-surface {
  display: flex;
  flex-direction: column;
  gap: var(--wbv-s6);
  padding: var(--wbv-s6);
  min-width: 0;
  color: var(--wbv-fg);
  font-family: "Inter", system-ui, sans-serif;
}

/* ---------- v3.1 · BayHeader ---------- */
.wbv-bay-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--wbv-s5);
  padding-bottom: var(--wbv-s4);
  border-bottom: 1px solid var(--wbv3-line);
  min-width: 0;
  flex-wrap: wrap;
}
.wbv-bay-header__titles {
  display: flex;
  flex-direction: column;
  gap: var(--wbv-s2);
  min-width: 0;
  flex: 1 1 auto;
}
.wbv-bay-header__title {
  margin: 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: normal;
  color: var(--wbv-fg-strong);
  line-height: 1.3;
  display: inline-flex;
  align-items: baseline;
  gap: var(--wbv-s2);
  flex-wrap: wrap;
}
.wbv-bay-header__leaf {
  font-size: 13px;
  font-weight: 400;
  color: var(--wbv-fg-faint);
  letter-spacing: normal;
}
.wbv-bay-header__desc {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--wbv-fg-muted);
  line-height: 1.55;
  max-width: 78ch;
}
.wbv-bay-header__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--wbv-s2);
  flex: 0 0 auto;
}

/* ---------- v3.1 · TabStrip (ComfyUI tab discipline) ---------- */
.wbv-tab-strip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font-family: inherit;
}
.wbv-tab {
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--wbv-fg-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  padding: var(--wbv-s2) var(--wbv-s4);
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
  margin: 0;
  line-height: 1.4;
}
.wbv-tab:hover {
  color: var(--wbv-fg);
  background: rgba(255, 255, 255, 0.03);
}
.wbv-tab[data-active="true"] {
  color: var(--wbv-fg-strong);
  border-bottom-color: var(--wbv-primary);
  font-weight: 600;
}

/* ---------- v3.1 · CategoryStrip + CategoryBubble (Skills proof) ---------- */
.wbv-category-strip {
  display: grid;
  grid-template-columns: repeat(var(--wbv-strip-columns, auto-fill), minmax(180px, 1fr));
  gap: var(--wbv-s4);
}
.wbv-category-bubble {
  --wbv-bubble-accent: var(--wbv-fg-faint);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--wbv-s2);
  padding: var(--wbv-s4) var(--wbv-s5);
  background: var(--wbv3-card);
  border: 1px solid var(--wbv3-line);
  border-top: 2px solid var(--wbv-bubble-accent);
  border-radius: var(--wbv-r-card);
  box-shadow: var(--wbv3-shadow-1);
  color: var(--wbv-fg);
  font-family: inherit;
  text-align: left;
  cursor: default;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 200ms ease, transform 200ms ease;
}
button.wbv-category-bubble {
  cursor: pointer;
}
.wbv-category-bubble:hover {
  background: var(--wbv3-card-hi);
  border-color: var(--wbv3-line-strong);
  box-shadow: var(--wbv3-shadow-2);
  transform: translateY(-1px);
}
.wbv-category-bubble[data-active="true"] {
  border-color: var(--wbv-bubble-accent);
  box-shadow:
    var(--wbv3-shadow-2),
    inset 0 0 0 1px var(--wbv-bubble-accent),
    0 0 18px color-mix(in srgb, var(--wbv-bubble-accent) 24%, transparent);
}
.wbv-category-bubble__sweep {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 35%,
    rgba(255, 255, 255, 0.55) 48%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(255, 255, 255, 0.55) 52%,
    transparent 65%,
    transparent 100%
  );
  background-size: 240% 100%;
  background-repeat: no-repeat;
  background-position: -70% 0;
  animation: glow-bounce-h 14s ease-in-out infinite alternate;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}
.wbv-category-bubble__head {
  display: inline-flex;
  align-items: center;
  gap: var(--wbv-s2);
  min-width: 0;
}
.wbv-category-bubble__icon {
  font-size: 14px;
  color: var(--wbv-bubble-accent);
  flex: 0 0 auto;
  line-height: 1;
}
.wbv-category-bubble__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wbv-bubble-accent);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wbv-category-bubble__count {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--wbv-fg-faint);
  padding: 1px var(--wbv-s2);
  background: var(--wbv3-rail);
  border-radius: 999px;
  flex: 0 0 auto;
}
.wbv-category-bubble__body {
  font-size: 11px;
  font-weight: 400;
  color: var(--wbv-fg-muted);
  line-height: 1.5;
}

/* ---------- v3.1 · PresentationArea ---------- */
.wbv-presentation-area {
  display: flex;
  flex-direction: column;
  gap: var(--wbv-s5);
  min-width: 0;
  width: 100%;
}

/* ---------- v3.1 · ActionButton (3 variants) ---------- */
.wbv-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wbv-s2);
  padding: var(--wbv-s3) var(--wbv-s5);
  border-radius: var(--wbv-r-input);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.3;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 200ms ease, transform 200ms ease;
  border: 1px solid transparent;
  white-space: nowrap;
}
.wbv-action-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.wbv-action-btn--primary {
  background: var(--wbv-primary);
  color: var(--wbv-primary-on);
  border-color: var(--wbv-primary);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    var(--wbv3-shadow-warm);
}
.wbv-action-btn--primary:hover:not(:disabled) {
  background: var(--wbv-primary-hover);
  border-color: var(--wbv-primary-hover);
  transform: translateY(-1px);
}
.wbv-action-btn--secondary {
  background: var(--wbv3-card);
  color: var(--wbv-fg);
  border-color: var(--wbv3-line);
}
.wbv-action-btn--secondary:hover:not(:disabled) {
  background: var(--wbv3-card-hi);
  border-color: var(--wbv3-line-strong);
}
.wbv-action-btn--ghost {
  background: transparent;
  color: var(--wbv-fg-muted);
  border-color: transparent;
}
.wbv-action-btn--ghost:hover:not(:disabled) {
  background: var(--wbv3-card);
  color: var(--wbv-fg);
}

/* ---------- v3.1 · Typography primitives ---------- */
.wbv-title {
  margin: 0;
  font-family: inherit;
  letter-spacing: normal;
  color: var(--wbv-fg-strong);
  line-height: 1.3;
}
.wbv-title--bay     { font-size: 16px; font-weight: 700; }
.wbv-title--section { font-size: 14px; font-weight: 600; }
.wbv-title--card    { font-size: 13px; font-weight: 600; }
.wbv-body {
  margin: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  color: var(--wbv-fg);
  line-height: 1.55;
}
.wbv-body--muted { color: var(--wbv-fg-muted); }
.wbv-helper {
  font-family: inherit;
  font-size: 11px;
  font-weight: 400;
  color: var(--wbv-fg-faint);
}
.wbv-label {
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wbv-fg-faint);
}
.wbv-code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--wbv-dot-needs-build);
  background: var(--wbv3-rail);
  padding: 1px var(--wbv-s2);
  border-radius: 3px;
  border: 1px solid var(--wbv3-line);
}

/* ---------- v3.1 · Typography unification (override legacy weight chaos) ---------- */
.wbv-shell .forge-chip,
.wbv-shell .pill,
.wbv-shell .skill-meta-tag {
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}
.wbv-shell .forge-spine-group__label {
  font-weight: 600 !important;
  letter-spacing: normal !important;
}
.wbv-shell .forge-spine-child__label {
  font-weight: 400 !important;
}
.wbv-shell .workbench-pepper-dock__header span,
.wbv-shell .workbench-pepper-dock__context-row span,
.wbv-shell .workbench-pepper-dock__compact-title span,
.wbv-shell .workbench-pepper-dock__prompt-teaser span,
.wbv-shell .workbench-status-pill > span:first-child,
.wbv-shell .workbench-bottom-evidence-strip__title,
.wbv-shell .sidebar-section-label,
.wbv-shell .layer-pill-label,
.wbv-shell .skill-category-label {
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
}

/* Drop lavender text leftover from .skill-flow-name */
.wbv-shell .skill-flow-name {
  color: var(--wbv-fg-strong);
}
/* Drop purple/lavender body text — keep purple only for SESSION category accent via inline color */
.wbv-shell .memory-immutable-pill {
  color: var(--wbv-fg-strong);
  background: rgba(255, 143, 58, 0.12);
  border: 1px solid var(--wbv-line-warm-1);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 1px 6px;
  border-radius: 999px;
}

/* ============================================================
 * END @layer workbench-visual-system-v6.6 (WBV v3.1)
 * ============================================================ */

/* ============================================================
 * @layer workbench-visual-system-v6.7 — WBV v3.2 GLASS RESTORATION
 * Pipeline: workbench-comfyui-grounded-visual-pass-2026-05-21
 *
 * v3.0/v3.1 painted chrome surfaces SOLID (lost glass effect).
 * v3.2 reverts to TRUE GLASS:
 *   - translucent alpha bg over backdrop-blur
 *   - molten background visible through every standing surface
 *   - layered panels sit ABOVE the molten orbit; do not block it
 *   - Skills category bubbles get the .glow-bounce sweep BACK
 *   - lavender / colored top accents on category bubbles RESTORED
 * ============================================================ */

/* ---------- v3.2 · Standing rails BACK to glass (translucent + blur) ---------- */
.wbv-shell .forge-spine,
.wbv-shell .workbench-os-spine {
  background: rgba(19, 20, 24, 0.72);
  backdrop-filter: blur(3px) saturate(115%);
  -webkit-backdrop-filter: blur(3px) saturate(115%);
  border-right: 1px solid var(--wbv3-line);
}
.wbv-shell .workbench-top-status-rail,
.wbv-shell .workbench-top-work-strip {
  background: rgba(19, 20, 24, 0.62);
  backdrop-filter: blur(3px) saturate(115%);
  -webkit-backdrop-filter: blur(3px) saturate(115%);
  border-bottom: 1px solid var(--wbv3-line);
}
.wbv-shell .workbench-pepper-dock {
  background: rgba(15, 16, 20, 0.72);
  backdrop-filter: blur(3px) saturate(115%);
  -webkit-backdrop-filter: blur(3px) saturate(115%);
  border-left: 1px solid var(--wbv3-line);
}
.wbv-shell .workbench-bottom-evidence-strip {
  background: rgba(19, 20, 24, 0.62);
  backdrop-filter: blur(3px) saturate(115%);
  -webkit-backdrop-filter: blur(3px) saturate(115%);
  border-top: 1px solid var(--wbv3-line);
}

/* ---------- v3.2 · Bay surface: crisp panel, light blur, molten visible at gutters ---------- */
.wbv-shell .forge-surface-panel,
.wbv-shell .wbv-panel,
.wbv-shell .wbv-bay-surface {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(0, 0, 0, 0.04) 100%),
    rgba(20, 22, 28, 0.88);
  backdrop-filter: blur(4px) saturate(120%);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
  border: 1px solid var(--wbv3-modal-border);
  border-radius: 10px;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.55),
    0 8px 10px -6px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 24px rgba(255, 143, 58, 0.10),
    0 0 1px rgba(255, 143, 58, 0.35);
}

/* ---------- v3.2 · Cards layered ON the glass panel ---------- */
.wbv-shell .forge-system-card,
.wbv-shell .settings-row,
.wbv-shell .memory-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(0, 0, 0, 0.04) 100%),
    rgba(30, 32, 39, 0.52);
  backdrop-filter: blur(6px) saturate(115%);
  -webkit-backdrop-filter: blur(6px) saturate(115%);
  border: 1px solid var(--wbv3-line);
  border-radius: 8px;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.04) inset;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.wbv-shell .forge-system-card:hover,
.wbv-shell .settings-row:hover,
.wbv-shell .memory-card:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(0, 0, 0, 0.06) 100%),
    rgba(30, 32, 39, 0.66);
  border-color: var(--wbv3-line-warm);
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.38),
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 0 16px rgba(255, 143, 58, 0.12);
  transform: translateY(-1px);
}

/* ---------- v3.2 · Pepper dock cards glass + governed-task molten edge ---------- */
.wbv-shell .workbench-pepper-dock__compact-card,
.wbv-shell .workbench-pepper-dock__chat-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(0, 0, 0, 0.04) 100%),
    rgba(30, 32, 39, 0.48);
  backdrop-filter: blur(6px) saturate(115%);
  -webkit-backdrop-filter: blur(6px) saturate(115%);
  border: 1px solid var(--wbv3-line);
  border-radius: 8px;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
.wbv-shell .workbench-pepper-dock__compact-card--governed-task {
  background:
    linear-gradient(180deg, rgba(255, 143, 58, 0.08) 0%, rgba(255, 143, 58, 0.02) 30%, rgba(0, 0, 0, 0.04) 100%),
    rgba(30, 32, 39, 0.55);
  border-color: rgba(255, 143, 58, 0.38);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.32),
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    inset 2px 0 0 var(--wbv-primary),
    0 0 14px rgba(255, 143, 58, 0.16);
}
.wbv-shell .workbench-pepper-dock__response-window {
  background: rgba(19, 20, 24, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid var(--wbv3-line);
}

/* ---------- v3.2 · Top-rail capsules + bottom-rail cells glass ---------- */
.wbv-shell .workbench-status-pill {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%),
    rgba(30, 32, 39, 0.50);
  backdrop-filter: blur(4px) saturate(115%);
  -webkit-backdrop-filter: blur(4px) saturate(115%);
  border: 1px solid var(--wbv3-line);
}
.wbv-shell .workbench-bottom-evidence-strip__cell {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(0, 0, 0, 0.04) 100%),
    rgba(30, 32, 39, 0.48);
  backdrop-filter: blur(4px) saturate(115%);
  -webkit-backdrop-filter: blur(4px) saturate(115%);
  border: 1px solid var(--wbv3-line);
}

/* ---------- v3.2 · UNDO v3.0/v3.1 flattening of Skills bubbles ---------- */
/* Restore the legacy gloss recipe + glow-bounce by REMOVING the !important
 * solids that v3.0 dropped on these elements. We override them BACK to the
 * Skills-canonical recipe (gradient + colored top accent + drop shadow +
 * the .glow-bounce sweep ::before stays intact from line 3247). */
.wbv-shell .skill-category-node,
.wbv-shell .skill-flow-node,
.wbv-shell .layer-pill,
.wbv-shell .wbv-category-bubble {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.02) 16%,
      rgba(0, 0, 0, 0.04) 70%,
      rgba(0, 0, 0, 0.12) 100%),
    rgba(30, 32, 39, 0.78) !important;
  border: 1px solid var(--wbv3-line) !important;
  /* border-top stays from .glow-bounce (2px colored, set inline by component) */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 0 0 1px rgba(255, 255, 255, 0.02) inset,
    0 6px 18px rgba(0, 0, 0, 0.42) !important;
}
.wbv-shell .skill-category-node:hover,
.wbv-shell .skill-flow-node:hover,
.wbv-shell .layer-pill:hover,
.wbv-shell .wbv-category-bubble:hover {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.04) 16%,
      rgba(0, 0, 0, 0.04) 70%,
      rgba(0, 0, 0, 0.10) 100%),
    rgba(34, 37, 44, 0.88) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 12px 28px rgba(0, 0, 0, 0.55),
    0 0 22px rgba(255, 143, 58, 0.20) !important;
  transform: translateY(-2px) !important;
}

/* The .glow-bounce::before sweep already exists in globals.css line 3247.
 * Make sure my v3.1 .wbv-category-bubble__sweep has the same animation. */
.wbv-shell .wbv-category-bubble {
  position: relative;
  isolation: isolate;
}
.wbv-shell .wbv-category-bubble__sweep {
  /* keep the existing animation; just ensure top accent shows above sweep */
}

/* ---------- v3.2 · CategoryBubble — restore colored top accent as 2px molten/category ---------- */
.wbv-shell .wbv-category-bubble {
  border-top: 2px solid var(--wbv-bubble-accent, var(--wbv-fg-faint)) !important;
}

/* ---------- v3.2 · Spine items gap + footer cleanup (component-side classes) ---------- */
.wbv-shell .workbench-os-spine__items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wbv-shell .workbench-os-spine__footer {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 143, 58, 0.18);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wbv-shell .workbench-os-spine__close-bay {
  width: 100%;
  text-transform: none;
  letter-spacing: normal;
  font-size: 12px;
  font-weight: 500;
}
.wbv-shell .workbench-os-spine__footer-note {
  display: block;
  line-height: 1.4;
}

/* ---------- v3.2 · Build wizard step pills tightened (component-side) ---------- */
.wbv-shell .build-new-step-strip {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 6px;
  padding: var(--wbv-s2) 0;
}
.wbv-shell .build-new-progress-track {
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  margin-bottom: var(--wbv-s4);
}
.wbv-shell .build-new-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--wbv-primary) 0%, var(--wbv-primary-hover) 100%);
  box-shadow: 0 0 8px rgba(255, 143, 58, 0.42);
}
.wbv-shell .build-new-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(0, 0, 0, 0.04) 100%),
    rgba(30, 32, 39, 0.55);
  backdrop-filter: blur(4px) saturate(115%);
  -webkit-backdrop-filter: blur(4px) saturate(115%);
  border: 1px solid var(--wbv3-line);
  border-radius: 8px;
  padding: var(--wbv-s6);
  display: flex;
  flex-direction: column;
  gap: var(--wbv-s3);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
.wbv-shell .build-new-input {
  background: var(--wbv3-input);
  color: var(--wbv-fg);
  border: 1px solid var(--wbv3-line);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  width: 100%;
  resize: vertical;
}
.wbv-shell .build-new-input:focus {
  outline: none;
  border-color: var(--wbv-primary);
  box-shadow: 0 0 0 1px var(--wbv-primary);
}
.wbv-shell .build-new-choice {
  background: rgba(30, 32, 39, 0.5);
  border: 1px solid var(--wbv3-line);
  border-radius: 6px;
  padding: 8px 12px;
  color: var(--wbv-fg);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
  text-align: left;
}
.wbv-shell .build-new-choice:hover {
  background: rgba(34, 37, 44, 0.7);
  border-color: var(--wbv3-line-strong);
}
.wbv-shell .build-new-choice.selected {
  background: rgba(255, 143, 58, 0.08);
  border-color: var(--wbv-primary);
  color: var(--wbv-fg-strong);
  box-shadow: inset 2px 0 0 var(--wbv-primary);
}
.wbv-shell .build-new-actions {
  display: flex;
  align-items: center;
  gap: var(--wbv-s2);
  padding-top: var(--wbv-s2);
}

/* ---------- v3.2 · Build summary cards (done state) ---------- */
.wbv-shell .build-new-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--wbv-s3);
}
.wbv-shell .build-new-summary-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(0, 0, 0, 0.04) 100%),
    rgba(30, 32, 39, 0.50);
  backdrop-filter: blur(4px) saturate(115%);
  -webkit-backdrop-filter: blur(4px) saturate(115%);
  border: 1px solid var(--wbv3-line);
  border-radius: 8px;
  padding: var(--wbv-s4);
  display: flex;
  gap: var(--wbv-s3);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}
.wbv-shell .build-new-summary-num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--wbv-primary);
  line-height: 1;
}
.wbv-shell .build-new-summary-step-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wbv-fg-faint);
  margin-bottom: 4px;
}
.wbv-shell .build-new-summary-answer {
  font-size: 13px;
  color: var(--wbv-fg);
  line-height: 1.5;
}
.wbv-shell .build-new-summary-actions {
  display: flex;
  gap: var(--wbv-s2);
  justify-content: flex-end;
  padding-top: var(--wbv-s4);
}

/* ============================================================
 * END @layer workbench-visual-system-v6.7 (WBV v3.2 glass restore + outer shell)
 * ============================================================ */

/* ============================================================
 * @layer workbench-visual-system-v6.8 — WBV v3.3 readability + shell redesign
 * Pipeline: workbench-comfyui-grounded-visual-pass-2026-05-21
 *
 * Operator pain points (from screenshot review):
 *   1. Fonts too small everywhere — bump type scale
 *   2. Top rail capsules feel disconnected — group into one band
 *   3. Bottom evidence rail wastes space — bigger readable cards
 *   4. Left spine rows are flat — better active/hover depth/glow
 *   5. Right dock chat card needs the governed-task highlight treatment
 *   6. Details flyout (.workbench-details-sheet) still feels like old dense overlay
 *
 * v3.3 keeps v3.2 glass intact but FIXES readability + flyout/rails.
 * ============================================================ */

/* ---------- v3.3 · TYPE SCALE BUMP ---------- */
:root {
  /* Override v2.0 sizes upward (was 11/12/13/14) */
  --wbv-text-1: 12px;  /* helper, chip text — was 11 */
  --wbv-text-2: 13px;  /* body — was 12 */
  --wbv-text-3: 14px;  /* default UI — was 13 */
  --wbv-text-4: 15px;  /* panel title — was 14 */
  --wbv-text-5: 18px;  /* surface title — was 16 */
  --wbv-text-6: 22px;  /* bay title — was 20 */
}

/* Body baseline up to 14px */
.wbv-shell { font-size: 14px; }

/* Bay header title bigger — 18px, 700 */
.wbv-shell .wbv-bay-header__title { font-size: 18px; font-weight: 700; }
.wbv-shell .wbv-bay-header__leaf  { font-size: 14px; font-weight: 400; }
.wbv-shell .wbv-bay-header__desc  { font-size: 13px; line-height: 1.6; }

/* Tabs more readable */
.wbv-shell .wbv-tab { font-size: 13px; padding: 8px 12px; }
.wbv-shell .wbv-tab[data-active="true"] { font-size: 13px; font-weight: 600; }

/* Cards — titles 15px */
.wbv-shell .wbv-category-bubble__label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; }
.wbv-shell .wbv-category-bubble__body  { font-size: 12px; line-height: 1.55; }
.wbv-shell .wbv-category-bubble__count { font-size: 11px; }

/* Chips/pills — 11px (was 9-10) */
.wbv-shell .forge-chip,
.wbv-shell .pill,
.wbv-shell .skill-meta-tag {
  font-size: 11px !important;
  padding: 3px 8px !important;
}
.wbv-shell .forge-chip--xs { font-size: 10px !important; padding: 2px 6px !important; }

/* ---------- v3.3 · TOP RAIL REDESIGN ---------- */
.wbv-shell .workbench-top-status-rail,
.wbv-shell .workbench-top-work-strip {
  padding: 8px 16px;
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  align-items: stretch;
}
.wbv-shell .workbench-status-pill {
  flex: 0 0 auto;
  padding: 6px 14px;
  border-radius: 6px;
  min-width: 80px;
}
.wbv-shell .workbench-status-pill > span:first-child {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--wbv-fg-faint) !important;
  margin-bottom: 2px;
}
.wbv-shell .workbench-status-pill > strong {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--wbv-fg-strong) !important;
  line-height: 1.3 !important;
}

/* ---------- v3.3 · BOTTOM EVIDENCE STRIP REDESIGN ---------- */
.wbv-shell .workbench-bottom-evidence-strip {
  padding: 10px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wbv-shell .workbench-bottom-evidence-strip__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  padding-bottom: 4px;
}
.wbv-shell .workbench-bottom-evidence-strip__title > span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wbv-fg-faint);
}
.wbv-shell .workbench-bottom-evidence-strip__title > strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--wbv-fg-strong);
}
.wbv-shell .workbench-bottom-evidence-strip__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 6px;
}
.wbv-shell .workbench-bottom-evidence-strip__cell {
  padding: 8px 12px;
  border-radius: 6px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wbv-shell .workbench-bottom-evidence-strip__cell > span {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--wbv-fg-faint) !important;
}
.wbv-shell .workbench-bottom-evidence-strip__cell > strong {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--wbv-fg) !important;
  line-height: 1.4 !important;
  white-space: normal;
  word-wrap: break-word;
}

/* ---------- v3.3 · LEFT SPINE READABILITY + ACTIVE GLOW ---------- */
.wbv-shell .forge-spine-group__select {
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 8px 12px !important;
  letter-spacing: normal !important;
}
.wbv-shell .forge-spine-group__select:hover {
  color: var(--wbv-fg-strong);
  background: rgba(255, 143, 58, 0.04);
}
.wbv-shell .forge-spine-group[data-selected="true"] > .forge-spine-group__head {
  background: linear-gradient(90deg, rgba(255, 143, 58, 0.12) 0%, rgba(255, 143, 58, 0.04) 60%, transparent 100%);
  box-shadow:
    inset 3px 0 0 var(--wbv-primary),
    0 0 14px rgba(255, 143, 58, 0.14);
}
.wbv-shell .forge-spine-group[data-selected="true"] > .forge-spine-group__head .forge-spine-group__select {
  color: var(--wbv-fg-strong) !important;
  font-weight: 600 !important;
}
.wbv-shell .forge-spine-group__label {
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
}
.wbv-shell .forge-spine-child {
  font-size: 13px !important;
  padding: 6px 10px !important;
}
.wbv-shell .forge-spine-child__label {
  font-size: 13px !important;
  font-weight: 400 !important;
}
.wbv-shell .forge-spine-child[aria-current="true"] {
  background: linear-gradient(90deg, rgba(255, 143, 58, 0.14) 0%, rgba(255, 143, 58, 0.04) 60%, transparent 100%);
  box-shadow:
    inset 2px 0 0 var(--wbv-primary),
    0 0 12px rgba(255, 143, 58, 0.12);
  color: var(--wbv-fg-strong) !important;
}
.wbv-shell .forge-spine-child[aria-current="true"] .forge-spine-child__label {
  font-weight: 500 !important;
  color: var(--wbv-fg-strong) !important;
}

/* ---------- v3.3 · WORKBENCH OS SPINE HEADER ---------- */
.wbv-shell .workbench-os-spine__header,
.wbv-shell .sidebar-section-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--wbv-fg-faint) !important;
  padding: 10px 12px 6px !important;
}

/* ---------- v3.3 · PEPPER DOCK — unified card system + highlight propagation ---------- */
.wbv-shell .workbench-pepper-dock {
  padding: 14px 12px;
  gap: 10px;
}
.wbv-shell .workbench-pepper-dock__header {
  padding: 6px 8px 10px;
  border-bottom: 1px solid var(--wbv3-line);
}
.wbv-shell .workbench-pepper-dock__header span {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
}
.wbv-shell .workbench-pepper-dock__header strong {
  font-size: 15px !important;
  font-weight: 700 !important;
}
.wbv-shell .workbench-pepper-dock__header em {
  font-size: 11px !important;
}
.wbv-shell .workbench-pepper-dock__context-row {
  gap: 8px;
}
.wbv-shell .workbench-pepper-dock__context-row > div {
  padding: 8px 10px;
}
.wbv-shell .workbench-pepper-dock__context-row span {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
}
.wbv-shell .workbench-pepper-dock__context-row strong {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--wbv-fg-strong) !important;
}
.wbv-shell .workbench-pepper-dock__compact-card,
.wbv-shell .workbench-pepper-dock__chat-card {
  padding: 12px 14px;
  gap: 8px;
}
.wbv-shell .workbench-pepper-dock__compact-title span {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
}
.wbv-shell .workbench-pepper-dock__compact-title em {
  font-size: 11px !important;
}
.wbv-shell .workbench-pepper-dock__compact-card strong {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}
.wbv-shell .workbench-pepper-dock__compact-card p {
  font-size: 12px !important;
  color: var(--wbv-fg-muted) !important;
  line-height: 1.55 !important;
}
.wbv-shell .workbench-pepper-dock__compact-card small {
  font-size: 11px !important;
}
.wbv-shell .workbench-pepper-dock__response-window {
  font-size: 12px !important;
  padding: 10px 12px !important;
}
.wbv-shell .workbench-pepper-dock__response-window strong {
  font-size: 12px !important;
  margin-top: 6px !important;
}
.wbv-shell .workbench-pepper-dock__prompt-teaser span {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
}
.wbv-shell .workbench-pepper-dock__prompt-teaser textarea {
  font-size: 13px !important;
  padding: 10px 12px !important;
  min-height: 64px !important;
}
.wbv-shell .workbench-pepper-dock__expand {
  font-size: 12px !important;
  padding: 10px 14px !important;
  letter-spacing: 0.08em !important;
}

/* Highlight card variant — apply governed-task style via data-highlight="primary" */
.wbv-shell .workbench-pepper-dock__chat-card[data-highlight="primary"],
.wbv-shell .workbench-pepper-dock__compact-card[data-highlight="primary"] {
  background:
    linear-gradient(180deg, rgba(255, 143, 58, 0.08) 0%, rgba(255, 143, 58, 0.02) 30%, rgba(0, 0, 0, 0.04) 100%),
    rgba(30, 32, 39, 0.62);
  border-color: rgba(255, 143, 58, 0.38);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.32),
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    inset 2px 0 0 var(--wbv-primary),
    0 0 14px rgba(255, 143, 58, 0.16);
}

/* ---------- v3.3 · DETAILS FLYOUT (.workbench-details-sheet) REDESIGN ---------- */
.wbv-shell .workbench-details-sheet,
.wbv-shell .panel-mockup-detail-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(0, 0, 0, 0.04) 100%),
    rgba(20, 22, 28, 0.92) !important;
  backdrop-filter: blur(4px) saturate(120%);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
  border: 1px solid var(--wbv3-modal-border);
  border-radius: 10px;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.55),
    0 8px 10px -6px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 24px rgba(255, 143, 58, 0.10),
    0 0 1px rgba(255, 143, 58, 0.35) !important;
  padding: 18px 22px !important;
  color: var(--wbv-fg);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px;
}
.wbv-shell .workbench-details-sheet__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--wbv3-line);
  margin-bottom: 16px;
}
.wbv-shell .workbench-details-sheet__header > span {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--wbv-fg-faint) !important;
}
.wbv-shell .workbench-details-sheet__header > strong {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--wbv-fg-strong) !important;
  flex: 1 1 auto;
}
.wbv-shell .workbench-details-sheet__header > em {
  font-size: 12px !important;
  font-style: normal !important;
  color: var(--wbv-fg-muted) !important;
  padding: 3px 10px !important;
  background: var(--wbv3-input);
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.wbv-shell .workbench-details-sheet__close {
  background: transparent !important;
  color: var(--wbv-fg-muted) !important;
  border: 1px solid var(--wbv3-line) !important;
  border-radius: 6px !important;
  padding: 6px 14px !important;
  font-size: 11px !important;
  font-family: inherit !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.wbv-shell .workbench-details-sheet__close:hover {
  background: var(--wbv3-card);
  border-color: var(--wbv3-line-strong);
  color: var(--wbv-fg);
}
.wbv-shell .workbench-details-sheet__summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.wbv-shell .workbench-details-sheet__row {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(0, 0, 0, 0.04) 100%),
    rgba(30, 32, 39, 0.52);
  border: 1px solid var(--wbv3-line);
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.wbv-shell .workbench-details-sheet__row > span {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--wbv-fg-faint) !important;
}
.wbv-shell .workbench-details-sheet__row > strong {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--wbv-fg-strong) !important;
  line-height: 1.4 !important;
}
.wbv-shell .workbench-details-sheet__section {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(0, 0, 0, 0.04) 100%),
    rgba(30, 32, 39, 0.45);
  border: 1px solid var(--wbv3-line);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}
.wbv-shell .workbench-details-sheet__section > span:first-child {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--wbv-fg-faint) !important;
}
.wbv-shell .workbench-details-sheet__section h4 {
  margin: 0;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--wbv-fg-strong) !important;
}
.wbv-shell .workbench-details-sheet__section p {
  margin: 0;
  font-size: 13px !important;
  color: var(--wbv-fg) !important;
  line-height: 1.55 !important;
}

/* Workbench task key-values inside details sheet */
.wbv-shell .workbench-task-key-values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}
.wbv-shell .workbench-task-key-values > div {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(0, 0, 0, 0.04) 100%),
    rgba(22, 24, 30, 0.55);
  border: 1px solid var(--wbv3-line);
  border-radius: 6px;
  padding: 8px 12px;
}
.wbv-shell .workbench-task-key-values > div > span {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--wbv-fg-faint) !important;
  display: block;
  margin-bottom: 2px;
}
.wbv-shell .workbench-task-key-values > div > strong {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--wbv-fg) !important;
}

/* ============================================================
 * END @layer workbench-visual-system-v6.8 (WBV v3.3)
 * ============================================================ */

/* ============================================================
 * @layer workbench-visual-system-v6.9 — ComfyUI-built panel kit
 * Phase: v3.3-comfyui-built-panel-export
 *
 * Constructed live from ComfyUI inspection 2026-05-21:
 *   shell  #202020 / sidebar #171718 / modal #18181b
 *   border-chrome #313235 / border-modal #3f3f46
 *   active-tab = LIGHTER-TONE same-shape pill (#313235)
 *   radius rail 0 / chrome 8 / modal 12
 *   font Inter only, weight 400 default / 600 headings
 *   hierarchy by weight NOT by uppercase letter-spacing
 *   no warm-edge on chrome — warm is gated to highlight states
 *
 * DaForge identity overlay: molten warm reserved for the
 * data-highlight="primary"|"governed" variants ONLY.
 * ============================================================ */

:root {
  /* ComfyUI tone ladder */
  --wb-shell-bg:       #202020;
  --wb-rail-bg:        #171718;
  --wb-rail-bg-2:      #1a1b1d;
  --wb-modal-bg:       #18181b;
  --wb-card-bg:        #1f2024;
  --wb-card-bg-hover:  #26272b;
  --wb-active-pill:    #313235;
  --wb-input-bg:       #313235;

  /* ComfyUI border discipline */
  --wb-line-chrome:    #313235;
  --wb-line-modal:     #3f3f46;
  --wb-line-faint:     rgba(255, 255, 255, 0.05);

  /* Type */
  --wb-font:           "Inter", system-ui, sans-serif;
  --wb-text-body:      14px;
  --wb-text-tab:       14px;
  --wb-text-h3:        14px;   /* heading via weight 600 */
  --wb-text-h2:        18px;
  --wb-text-card:      14px;
  --wb-text-label:     11px;
  --wb-text-chip:      11px;
  --wb-text-helper:    12px;

  /* Color */
  --wb-fg:             rgba(255, 255, 255, 0.95);
  --wb-fg-muted:       rgb(161, 161, 170);  /* zinc-400 from ComfyUI */
  --wb-fg-faint:       rgb(133, 133, 133);

  /* Molten identity (DaForge — reserved for highlight) */
  --wb-warm:           #ff792f;
  --wb-warm-hover:     #ffb45f;
  --wb-warm-on:        #1a0f06;
  --wb-warm-rim:       rgba(255, 143, 58, 0.38);

  /* Shadow stack (ComfyUI literal) */
  --wb-shadow-input:   rgba(18, 18, 23, 0.05) 0 1px 2px;
  --wb-shadow-card:    0 4px 12px rgba(0, 0, 0, 0.28);
  --wb-shadow-modal:
                       0 20px 25px -5px rgba(0, 0, 0, 0.55),
                       0 8px 10px -6px rgba(0, 0, 0, 0.40);
}

/* ---------- WB panel-shell primitive ---------- */
.wbv-shell .wb-panel-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 22px;
  font-family: var(--wb-font);
  font-size: var(--wb-text-body);
  color: var(--wb-fg);
  min-width: 0;
}
.wbv-shell .wb-panel-shell[data-density="compact"] { padding: 12px 16px; gap: 10px; }

/* ---------- WB header band ---------- */
.wbv-shell .wb-header-band {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--wb-line-chrome);
  min-width: 0;
  flex-wrap: wrap;
}
.wbv-shell .wb-header-band__heading {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}
.wbv-shell .wb-header-band__title {
  margin: 0;
  font-family: var(--wb-font);
  font-size: var(--wb-text-h2);
  font-weight: 700;
  letter-spacing: normal;
  color: var(--wb-fg);
  line-height: 1.3;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.wbv-shell .wb-header-band__subtitle {
  font-size: var(--wb-text-h3);
  font-weight: 400;
  color: var(--wb-fg-muted);
  letter-spacing: normal;
}
.wbv-shell .wb-header-band__desc {
  margin: 0;
  font-family: var(--wb-font);
  font-size: 13px;
  color: var(--wb-fg-muted);
  line-height: 1.55;
  max-width: 80ch;
}
.wbv-shell .wb-header-band__actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

/* ---------- WB tab strip + tab pill (LIGHTER-TONE active pill) ---------- */
.wbv-shell .wb-tab-strip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: var(--wb-rail-bg);
  border: 1px solid var(--wb-line-chrome);
  border-radius: 8px;
  font-family: var(--wb-font);
}
.wbv-shell .wb-tab-pill {
  background: transparent;
  border: none;
  color: var(--wb-fg-muted);
  font-family: inherit;
  font-size: var(--wb-text-tab);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  padding: 4px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
  margin: 0;
  line-height: 1.4;
}
.wbv-shell .wb-tab-pill:hover {
  color: var(--wb-fg);
  background: rgba(255, 255, 255, 0.04);
}
.wbv-shell .wb-tab-pill[data-active="true"] {
  background: var(--wb-active-pill);
  color: var(--wb-fg);
  font-weight: 500;
}

/* ---------- WB card (ComfyUI-disciplined; flat tone + subtle shadow) ---------- */
.wbv-shell .wb-card {
  background: var(--wb-card-bg);
  border: 1px solid var(--wb-line-chrome);
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: var(--wb-shadow-card);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background 140ms ease, border-color 140ms ease;
}
.wbv-shell .wb-card:hover {
  background: var(--wb-card-bg-hover);
  border-color: rgba(255, 255, 255, 0.10);
}
.wbv-shell .wb-card[data-highlight="primary"] {
  background:
    linear-gradient(180deg, rgba(255, 143, 58, 0.06) 0%, transparent 40%),
    var(--wb-card-bg);
  border-color: var(--wb-warm-rim);
  box-shadow:
    var(--wb-shadow-card),
    inset 2px 0 0 var(--wb-warm);
}
.wbv-shell .wb-card[data-highlight="governed"] {
  background:
    linear-gradient(180deg, rgba(255, 143, 58, 0.08) 0%, transparent 50%),
    var(--wb-card-bg);
  border-color: var(--wb-warm-rim);
  box-shadow:
    var(--wb-shadow-card),
    inset 2px 0 0 var(--wb-warm),
    0 0 14px rgba(255, 143, 58, 0.14);
}
.wbv-shell .wb-card[data-highlight="warning"] {
  border-left: 2px solid #ffc845;
}
.wbv-shell .wb-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.wbv-shell .wb-card__label {
  font-size: var(--wb-text-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wb-fg-faint);
}
.wbv-shell .wb-card__value {
  font-size: var(--wb-text-card);
  font-weight: 600;
  color: var(--wb-fg);
  line-height: 1.4;
}
.wbv-shell .wb-card__meta {
  font-size: var(--wb-text-helper);
  color: var(--wb-fg-muted);
}
.wbv-shell .wb-card__body {
  font-size: 13px;
  color: var(--wb-fg-muted);
  line-height: 1.55;
}

/* ---------- WB dock card (variant of card; tighter) ---------- */
.wbv-shell .wb-dock-card {
  background: var(--wb-card-bg);
  border: 1px solid var(--wb-line-chrome);
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: var(--wb-shadow-card);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wbv-shell .wb-dock-card[data-highlight="primary"],
.wbv-shell .wb-dock-card[data-highlight="governed"] {
  background:
    linear-gradient(180deg, rgba(255, 143, 58, 0.08) 0%, transparent 45%),
    var(--wb-card-bg);
  border-color: var(--wb-warm-rim);
  box-shadow:
    var(--wb-shadow-card),
    inset 2px 0 0 var(--wb-warm);
}
.wbv-shell .wb-dock-card__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wb-fg-faint);
}
.wbv-shell .wb-dock-card__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--wb-fg);
  line-height: 1.35;
}
.wbv-shell .wb-dock-card__body {
  font-size: 12px;
  color: var(--wb-fg-muted);
  line-height: 1.55;
}

/* ---------- WB status chip (ComfyUI compact) ---------- */
.wbv-shell .wb-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  background: var(--wb-card-bg);
  color: var(--wb-fg-muted);
  border: 1px solid var(--wb-line-chrome);
  border-radius: 999px;
  font-family: var(--wb-font);
  font-size: var(--wb-text-chip);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}
.wbv-shell .wb-status-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--wb-fg-faint);
}
/* CANONICAL chip dot tones — backed by the --fd-* FORGE_DESIGN tokens
   (Mission 2 chip consolidation, g-wb-m2). Color VALUES retargeted to the
   single canonical palette; selector shape / sizing unchanged. */
.wbv-shell .wb-status-chip[data-tone="neutral"]::before   { background: var(--fd-color-steel-300); }
.wbv-shell .wb-status-chip[data-tone="active"]::before    { background: var(--fd-color-status-good); }
.wbv-shell .wb-status-chip[data-tone="warn"]::before      { background: var(--fd-color-status-warn); }
.wbv-shell .wb-status-chip[data-tone="blocked"]::before   { background: var(--fd-color-status-missing); }
.wbv-shell .wb-status-chip[data-tone="info"]::before      { background: var(--fd-color-link); }
.wbv-shell .wb-status-chip[data-tone="governed"]::before  { background: var(--fd-color-molten-amber); }

/* ---------- WB action button ---------- */
.wbv-shell .wb-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-family: var(--wb-font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.3;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 200ms ease, box-shadow 200ms ease;
  white-space: nowrap;
}
.wbv-shell .wb-action-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.wbv-shell .wb-action-btn[data-variant="primary"] {
  background: var(--wb-warm);
  color: var(--wb-warm-on);
  border-color: var(--wb-warm);
  font-weight: 700;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 4px 14px rgba(255, 143, 58, 0.32);
}
.wbv-shell .wb-action-btn[data-variant="primary"]:hover:not(:disabled) {
  background: var(--wb-warm-hover);
  border-color: var(--wb-warm-hover);
  transform: translateY(-1px);
}
.wbv-shell .wb-action-btn[data-variant="secondary"] {
  background: var(--wb-card-bg);
  color: var(--wb-fg);
  border-color: var(--wb-line-chrome);
}
.wbv-shell .wb-action-btn[data-variant="secondary"]:hover:not(:disabled) {
  background: var(--wb-card-bg-hover);
  border-color: rgba(255, 255, 255, 0.12);
}
.wbv-shell .wb-action-btn[data-variant="ghost"] {
  background: transparent;
  color: var(--wb-fg-muted);
  border-color: transparent;
}
.wbv-shell .wb-action-btn[data-variant="ghost"]:hover:not(:disabled) {
  background: var(--wb-card-bg);
  color: var(--wb-fg);
}

/* ---------- WB presentation area ---------- */
.wbv-shell .wb-presentation-area {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  width: 100%;
}

/* ---------- WB section label ---------- */
.wbv-shell .wb-section-label {
  display: inline-block;
  font-family: var(--wb-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--wb-fg-faint);
}

/* ============================================================
 * END @layer workbench-visual-system-v6.9 (ComfyUI-built kit)
 * ============================================================ */

/* ============================================================
 * @layer workbench-visual-system-v6.10 — v3.4 hero band + consumer sweep
 * Hero / header treatment for spine header, dock header, and any
 * .wb-hero-band consumer. Subtle molten top edge — gives the header
 * zone DaForge identity without coloring chrome elsewhere.
 * ============================================================ */

.wbv-shell .wb-hero-band {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 143, 58, 0.06) 0%, transparent 60%),
    var(--wb-rail-bg, #171718);
  border-top: 1px solid rgba(255, 143, 58, 0.28);
  border-bottom: 1px solid var(--wb-line-chrome, #313235);
  padding: 10px 14px;
  box-shadow: 0 1px 0 rgba(255, 143, 58, 0.06) inset;
}
.wbv-shell .wb-hero-band::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 143, 58, 0.0) 8%,
    rgba(255, 143, 58, 0.55) 50%,
    rgba(255, 143, 58, 0.0) 92%,
    transparent 100%);
}

/* Bottom evidence cell + StatusPill use compact wb-card density */
.wbv-shell .wb-card[data-density="compact"] {
  padding: 8px 12px;
  gap: 4px;
}

/* ============================================================
 * END @layer workbench-visual-system-v6.10
 * ============================================================ */

/* ============================================================
 * @layer workbench-visual-system-v6.11 — v3.5 entire-Workbench application
 * Top hero command band + universal page header + home dashboard
 * + selected-node bottom panel polish + cross-surface header treatment.
 * ============================================================ */

/* ---------- v3.5 · Top hero command band (DaForgeLayer-AI identity) ---------- */
.wbv-shell .workbench-top-hero-band {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 18px;
  flex-wrap: wrap;
}
.wbv-shell .workbench-top-hero-band__identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 6px 14px 6px 0;
  border-right: 1px solid var(--wb-line-chrome, #313235);
  margin-right: 6px;
  position: relative;
}
.wbv-shell .workbench-top-hero-band__os-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--wb-fg-faint);
  line-height: 1.2;
}
.wbv-shell .workbench-top-hero-band__os-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--wb-fg);
  letter-spacing: normal;
  line-height: 1.2;
  text-shadow: 0 0 12px rgba(255, 143, 58, 0.32);
}
.wbv-shell .workbench-top-hero-band__chips {
  display: inline-flex;
  align-items: stretch;
  gap: 4px;
  flex: 1 1 auto;
  flex-wrap: wrap;
}
.wbv-shell .workbench-top-hero-band__work {
  display: inline-flex;
  align-items: stretch;
  gap: 4px;
  flex: 0 0 auto;
  flex-wrap: wrap;
  padding-left: 10px;
  border-left: 1px solid var(--wb-line-chrome, #313235);
}

/* ---------- v3.5 · Universal page header band — apply to every surface header ---------- */
.wbv-shell .wbv-bay-header,
.wbv-shell .wb-header-band {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 143, 58, 0.05) 0%, transparent 50%),
    rgba(20, 22, 28, 0.55);
  border-radius: 10px 10px 0 0;
  padding: 14px 18px 16px;
  border-bottom: 1px solid rgba(255, 143, 58, 0.18);
  margin: -16px -16px 6px;
}
.wbv-shell .wbv-bay-header::before,
.wbv-shell .wb-header-band::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 143, 58, 0.0) 8%, rgba(255, 143, 58, 0.55) 50%, rgba(255, 143, 58, 0.0) 92%, transparent 100%);
}

/* ---------- v3.5 · HiveMind home dashboard zone (when no bay open) ---------- */
.wbv-shell .workbench-home-default-dashboard {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  background:
    linear-gradient(180deg, rgba(255, 143, 58, 0.05) 0%, transparent 60%),
    rgba(20, 22, 28, 0.82);
  border: 1px solid rgba(255, 143, 58, 0.28);
  border-radius: 12px;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.55),
    0 0 1px rgba(255, 143, 58, 0.35),
    0 0 18px rgba(255, 143, 58, 0.12);
  z-index: 4;
}

/* ---------- v3.5 · Strengthen Pepper dock + spine wb-hero-band visibility ---------- */
.wbv-shell .workbench-pepper-dock .workbench-pepper-dock__header,
.wbv-shell .workbench-os-spine .workbench-os-spine__header {
  margin: -14px -12px 8px;
  padding: 12px 14px 10px;
  background:
    linear-gradient(180deg, rgba(255, 143, 58, 0.08) 0%, transparent 70%),
    rgba(20, 22, 28, 0.55);
  border-bottom: 1px solid rgba(255, 143, 58, 0.22);
}
.wbv-shell .workbench-os-spine__header {
  margin-left: -10px;
  margin-right: -10px;
}

/* ---------- v3.5 · Bottom evidence strip readable + emphasize when node engaged ---------- */
.wbv-shell .workbench-bottom-evidence-strip[data-source="node"],
.wbv-shell .workbench-bottom-evidence-strip[data-source="governed-task"] {
  border-top: 1px solid rgba(255, 143, 58, 0.32);
}
.wbv-shell .workbench-bottom-evidence-strip[data-source="node"]::before,
.wbv-shell .workbench-bottom-evidence-strip[data-source="governed-task"]::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 143, 58, 0.55) 50%, transparent 100%);
}
.wbv-shell .workbench-bottom-evidence-strip { position: relative; }

/* ============================================================
 * END @layer workbench-visual-system-v6.11 (v3.5)
 * ============================================================ */

/* ============================================================
 * @layer workbench-visual-system-v6.12 — WBV v3.6
 * ComfyUI-built construction port + Pepper-OS molten chrome
 *
 * Ports the ComfyUI Desktop construction language (live-extracted
 * from http://127.0.0.1:8000/ on 2026-05-21, screenshot ss_7109jl7o0)
 * into the actual Workbench shell consumers:
 *   - Top hero command band (DaForge identity sigil + molten trim)
 *   - Left Command Spine (depth + molten rail rim)
 *   - Right Pepper Dock (constructed dock head + card depth)
 *   - Bottom Evidence Console (FIX clipping + readable cells)
 *   - Details flyout (sectioned constructed panels)
 *   - Category bay header (molten construction unified)
 *   - Universal wb-card (ComfyUI node-card construction)
 *   - Typography normalization (no more 9px labels)
 *
 * Pipeline: workbench-comfyui-construction-port-2026-05-21
 * DCLA: L34 Workbench Surface + L21 UI Runtime + L11 Governance
 * Inspection evidence: STAGE 1 of META_FLOW_TRACE_LOG.
 * ============================================================ */

:root {
  /* ComfyUI-derived construction tokens. Distinct from --wbv-* (visual
     system tokens) and --wb-* (existing wb-kit). These are the molten-
     forge-port tokens. */
  --wbv36-rail-bg          : rgb(23, 24, 27);
  --wbv36-canvas           : rgb(20, 21, 24);
  --wbv36-card-bg          : rgb(32, 33, 37);
  --wbv36-card-bg-raise    : rgb(40, 41, 45);
  --wbv36-card-bg-deep     : rgb(22, 23, 27);
  --wbv36-line             : rgb(58, 60, 65);
  --wbv36-line-strong      : rgb(80, 82, 88);
  --wbv36-fg               : rgba(245, 240, 232, 0.96);
  --wbv36-fg-muted         : rgba(200, 205, 215, 0.78);
  --wbv36-fg-faint         : rgba(200, 205, 215, 0.55);
  --wbv36-warm             : rgba(255, 143, 58, 0.95);
  --wbv36-warm-rim         : rgba(255, 143, 58, 0.55);
  --wbv36-warm-trace       : rgba(255, 143, 58, 0.32);
  --wbv36-warm-glow        : rgba(255, 143, 58, 0.18);
  --wbv36-warm-soft        : rgba(255, 143, 58, 0.08);
  --wbv36-shadow-deep      : 0 18px 38px rgba(0,0,0,0.55), 0 0 1px rgba(0,0,0,0.7);
  --wbv36-shadow-card      : 0 6px 18px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.025) inset;
  --wbv36-shadow-inner     : 0 0 0 1px rgba(255,255,255,0.04) inset, 0 1px 0 rgba(255,255,255,0.06) inset;
  --wbv36-radius           : 8px;
  --wbv36-radius-soft      : 10px;
}

/* ---------- v3.6 · TOP HERO COMMAND BAND (DaForge identity) ---------- */
.wbv-shell .workbench-top-hero-band {
  position: relative;
  min-height: 60px;
  padding: 10px 18px;
  gap: 12px;
  background:
    linear-gradient(180deg, rgba(255,143,58,0.06) 0%, transparent 60%),
    rgba(20, 21, 24, 0.78);
  border-bottom: 1px solid var(--wbv36-warm-trace);
  box-shadow: 0 6px 14px rgba(0,0,0,0.32);
}
.wbv-shell .workbench-top-hero-band::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, transparent 8%, var(--wbv36-warm) 50%, transparent 92%);
  opacity: 0.65;
}
.wbv-shell .workbench-top-hero-band__identity {
  position: relative;
  padding: 4px 18px 4px 4px;
  margin-right: 6px;
  border-right: 1px solid var(--wbv36-line);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.wbv-shell .workbench-top-hero-band__identity::before {
  content: "◆";
  color: var(--wbv36-warm);
  font-size: 16px;
  line-height: 1;
  text-shadow: 0 0 14px rgba(255, 143, 58, 0.7);
  filter: drop-shadow(0 0 4px rgba(255, 143, 58, 0.4));
}
.wbv-shell .workbench-top-hero-band__identity > div,
.wbv-shell .workbench-top-hero-band__identity-text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}
.wbv-shell .workbench-top-hero-band__os-label {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: var(--wbv36-fg-faint) !important;
  line-height: 1.1 !important;
}
.wbv-shell .workbench-top-hero-band__os-value {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--wbv36-fg) !important;
  letter-spacing: normal !important;
  line-height: 1.15 !important;
  text-shadow: 0 0 14px rgba(255, 143, 58, 0.36) !important;
}

/* Hero band chips — constructed pill with depth */
.wbv-shell .workbench-top-hero-band .workbench-status-pill,
.wbv-shell .workbench-top-hero-band__chips > *,
.wbv-shell .workbench-top-hero-band__work > * {
  background: var(--wbv36-card-bg) !important;
  border: 1px solid var(--wbv36-line) !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  display: inline-flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  position: relative;
  box-shadow: var(--wbv36-shadow-inner);
  transition: border-color 0.18s, background 0.18s;
}
.wbv-shell .workbench-top-hero-band .workbench-status-pill:hover,
.wbv-shell .workbench-top-hero-band__chips > *:hover,
.wbv-shell .workbench-top-hero-band__work > *:hover {
  border-color: var(--wbv36-line-strong) !important;
  background: var(--wbv36-card-bg-raise) !important;
}
.wbv-shell .workbench-top-hero-band .workbench-status-pill > span:first-child,
.wbv-shell .workbench-top-hero-band__chips > * > span:first-child,
.wbv-shell .workbench-top-hero-band__work > * > span:first-child {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase;
  color: var(--wbv36-fg-faint) !important;
  line-height: 1.1 !important;
}
.wbv-shell .workbench-top-hero-band .workbench-status-pill strong,
.wbv-shell .workbench-top-hero-band__chips > * strong,
.wbv-shell .workbench-top-hero-band__work > * strong {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--wbv36-fg) !important;
  line-height: 1.25 !important;
  margin-top: 2px !important;
}
/* Work-region (governance side) — molten left border */
.wbv-shell .workbench-top-hero-band__work {
  padding-left: 12px !important;
  border-left: 1px solid var(--wbv36-warm-trace) !important;
}

/* ---------- v3.6 · LEFT COMMAND SPINE (depth + molten rail) ---------- */
.wbv-shell .workbench-os-spine {
  background: var(--wbv36-rail-bg) !important;
  border-right: 1px solid var(--wbv36-line) !important;
  box-shadow:
    8px 0 24px rgba(0,0,0,0.42),
    inset -1px 0 0 var(--wbv36-warm-trace);
  padding: 0 !important;
  position: relative;
}
.wbv-shell .workbench-os-spine::after {
  content: "";
  position: absolute;
  top: 60px; bottom: 60px; right: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, var(--wbv36-warm-rim) 20%, var(--wbv36-warm-rim) 80%, transparent 100%);
  opacity: 0.6;
  pointer-events: none;
}
.wbv-shell .workbench-os-spine__header,
.wbv-shell .workbench-os-spine .workbench-os-spine__header {
  position: relative;
  margin: 0 !important;
  padding: 14px 16px 12px !important;
  background:
    linear-gradient(180deg, rgba(255,143,58,0.12) 0%, transparent 70%),
    rgba(28, 29, 33, 0.92) !important;
  border-bottom: 1px solid var(--wbv36-warm-trace) !important;
}
.wbv-shell .workbench-os-spine__header::before {
  content: "";
  position: absolute; top: 0; left: 12px; right: 12px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--wbv36-warm), transparent);
}
.wbv-shell .workbench-os-spine__header span {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase;
  color: var(--wbv36-fg-faint) !important;
  line-height: 1.2 !important;
}
.wbv-shell .workbench-os-spine__header strong {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--wbv36-fg) !important;
  letter-spacing: 0.02em !important;
  line-height: 1.25 !important;
}
/* Spine bay items — constructed with depth + selected molten state */
.wbv-shell .workbench-os-spine .forge-spine-group {
  margin: 4px 8px !important;
  border-radius: 8px !important;
  background: rgba(35, 37, 42, 0.45) !important;
  border: 1px solid transparent !important;
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s !important;
}
.wbv-shell .workbench-os-spine .forge-spine-group:hover {
  background: rgba(45, 47, 52, 0.6) !important;
  border-color: var(--wbv36-line) !important;
}
.wbv-shell .workbench-os-spine .forge-spine-group[data-selected="true"],
.wbv-shell .workbench-os-spine .forge-spine-group[data-selected="true"] > .forge-spine-group__head {
  background:
    linear-gradient(180deg, rgba(255,143,58,0.16) 0%, rgba(40,41,45,0.7) 100%) !important;
  border-color: var(--wbv36-warm-rim) !important;
  box-shadow:
    0 0 14px rgba(255, 143, 58, 0.18),
    inset 0 1px 0 rgba(255, 143, 58, 0.32) !important;
}
.wbv-shell .workbench-os-spine .forge-spine-group__head {
  padding: 4px !important;
  background: transparent !important;
  border-radius: 8px;
}
.wbv-shell .workbench-os-spine .forge-spine-group__select {
  padding: 8px 10px !important;
  background: transparent !important;
}
.wbv-shell .workbench-os-spine .forge-spine-group__label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--wbv36-fg) !important;
  letter-spacing: 0.01em !important;
}
.wbv-shell .workbench-os-spine .forge-spine-group__expand {
  color: var(--wbv36-fg-faint) !important;
  font-size: 11px !important;
}
.wbv-shell .workbench-os-spine .forge-spine-child {
  padding: 6px 10px 6px 22px !important;
  font-size: 12px !important;
  color: var(--wbv36-fg-muted) !important;
}
.wbv-shell .workbench-os-spine .forge-spine-child[aria-current="true"] {
  background: rgba(255, 143, 58, 0.08) !important;
  color: var(--wbv36-fg) !important;
  border-left: 2px solid var(--wbv36-warm) !important;
}

/* ---------- v3.6 · RIGHT PEPPER DOCK (constructed dock chrome) ---------- */
.wbv-shell .workbench-pepper-dock {
  background: var(--wbv36-rail-bg) !important;
  border-left: 1px solid var(--wbv36-line) !important;
  box-shadow:
    -8px 0 24px rgba(0,0,0,0.42),
    inset 1px 0 0 var(--wbv36-warm-trace);
  padding: 0 !important;
}
.wbv-shell .workbench-pepper-dock__header {
  position: relative;
  margin: 0 !important;
  padding: 14px 14px 12px !important;
  background:
    linear-gradient(180deg, rgba(255,143,58,0.12) 0%, transparent 70%),
    rgba(28, 29, 33, 0.92) !important;
  border-bottom: 1px solid var(--wbv36-warm-trace) !important;
}
.wbv-shell .workbench-pepper-dock__header::before {
  content: "";
  position: absolute; top: 0; left: 12px; right: 12px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--wbv36-warm), transparent);
}
.wbv-shell .workbench-pepper-dock__header span {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase;
  color: var(--wbv36-fg-faint) !important;
  line-height: 1.2 !important;
}
.wbv-shell .workbench-pepper-dock__header strong {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--wbv36-fg) !important;
  letter-spacing: 0.02em !important;
}
.wbv-shell .workbench-pepper-dock__header em {
  font-size: 10px !important;
  font-style: italic !important;
  color: var(--wbv36-fg-faint) !important;
  text-transform: none !important;
}
.wbv-shell .workbench-pepper-dock__context-row {
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--wbv36-line) !important;
  display: flex !important;
  gap: 10px !important;
}
.wbv-shell .workbench-pepper-dock__context-row > * {
  background: var(--wbv36-card-bg) !important;
  border: 1px solid var(--wbv36-line) !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
}
.wbv-shell .workbench-pepper-dock__compact-stack {
  padding: 8px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.wbv-shell .workbench-pepper-dock__chat-card,
.wbv-shell .workbench-pepper-dock__compact-card {
  background: var(--wbv36-card-bg) !important;
  border: 1px solid var(--wbv36-line) !important;
  border-radius: var(--wbv36-radius) !important;
  box-shadow: var(--wbv36-shadow-card) !important;
  padding: 10px 12px !important;
  position: relative;
}
.wbv-shell .workbench-pepper-dock__chat-card[data-highlight="primary"] {
  border-color: var(--wbv36-warm-rim) !important;
  box-shadow: 0 0 14px rgba(255,143,58,0.18), var(--wbv36-shadow-card) !important;
}
.wbv-shell .workbench-pepper-dock__compact-card--governed-task {
  border-color: var(--wbv36-warm) !important;
  background:
    linear-gradient(180deg, rgba(255,143,58,0.08), var(--wbv36-card-bg)) !important;
  box-shadow: 0 0 12px rgba(255,143,58,0.16), var(--wbv36-shadow-card) !important;
}
.wbv-shell .workbench-pepper-dock__compact-title {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  margin-bottom: 6px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid var(--wbv36-line) !important;
}
.wbv-shell .workbench-pepper-dock__compact-title > span:first-child {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: var(--wbv36-fg-faint) !important;
}
.wbv-shell .workbench-pepper-dock__compact-title strong {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--wbv36-fg) !important;
}
.wbv-shell .workbench-pepper-dock__response-window {
  font-size: 12px !important;
  color: var(--wbv36-fg-muted) !important;
  line-height: 1.5 !important;
}
.wbv-shell .workbench-pepper-dock__response-window strong {
  color: var(--wbv36-fg) !important;
}
.wbv-shell .workbench-pepper-dock__prompt-teaser {
  display: block !important;
  margin-top: 8px !important;
}
.wbv-shell .workbench-pepper-dock__prompt-teaser > span {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: var(--wbv36-warm) !important;
  display: block;
  margin-bottom: 4px;
}
.wbv-shell .workbench-pepper-dock__prompt-teaser textarea,
.wbv-shell .workbench-pepper-dock__prompt-teaser input {
  width: 100% !important;
  background: var(--wbv36-card-bg-deep) !important;
  border: 1px solid var(--wbv36-line) !important;
  border-radius: 4px !important;
  padding: 6px 8px !important;
  font-size: 12px !important;
  color: var(--wbv36-fg) !important;
}
.wbv-shell .workbench-pepper-dock__expand {
  margin: 0 10px 10px !important;
  width: calc(100% - 20px) !important;
  background: var(--wbv36-warm) !important;
  color: rgba(20, 20, 20, 0.95) !important;
  border: 1px solid var(--wbv36-warm-rim) !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase;
  box-shadow: 0 0 16px rgba(255, 143, 58, 0.32);
  cursor: pointer;
  transition: background 0.18s, box-shadow 0.18s;
}
.wbv-shell .workbench-pepper-dock__expand:hover {
  background: rgba(255, 168, 88, 1) !important;
  box-shadow: 0 0 22px rgba(255, 143, 58, 0.5);
}

/* ---------- v3.6 · BOTTOM EVIDENCE CONSOLE (fix clipping + brighten) ---------- */
.wbv-shell .workbench-bottom-evidence-strip {
  position: relative;
  width: min(1480px, 96%) !important;
  min-height: 96px !important;
  padding: 12px 14px !important;
  background:
    linear-gradient(180deg, rgba(255,143,58,0.06) 0%, transparent 40%),
    rgba(28, 29, 33, 0.92) !important;
  border: 1px solid var(--wbv36-line) !important;
  border-top: 1px solid var(--wbv36-warm-rim) !important;
  box-shadow:
    0 -10px 28px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255, 143, 58, 0.2) !important;
  border-radius: 10px !important;
  gap: 12px !important;
  overflow: visible !important;
  display: flex !important;
  align-items: stretch !important;
}
.wbv-shell .workbench-bottom-evidence-strip::before {
  content: "";
  position: absolute; top: 0; left: 24px; right: 24px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--wbv36-warm), transparent);
  opacity: 0.6;
  pointer-events: none;
}
.wbv-shell .workbench-bottom-evidence-strip__title {
  flex: 0 0 200px !important;
  padding: 10px 12px !important;
  background:
    linear-gradient(180deg, rgba(255,143,58,0.10) 0%, transparent 70%),
    rgba(40, 41, 45, 0.85) !important;
  border: 1px solid var(--wbv36-warm-trace) !important;
  border-radius: 8px !important;
  position: relative;
}
.wbv-shell .workbench-bottom-evidence-strip__title > span:first-child {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  color: var(--wbv36-warm) !important;
  text-transform: uppercase;
  line-height: 1.2 !important;
  display: block;
}
.wbv-shell .workbench-bottom-evidence-strip__title strong {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--wbv36-fg) !important;
  line-height: 1.32 !important;
  margin-top: 4px !important;
  display: block;
}
.wbv-shell .workbench-bottom-evidence-strip__items {
  flex: 1 1 auto !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 8px !important;
  min-width: 0 !important;
}
.wbv-shell .workbench-bottom-evidence-strip__cell {
  padding: 9px 12px !important;
  background: var(--wbv36-card-bg) !important;
  border: 1px solid var(--wbv36-line) !important;
  border-left: 2px solid var(--wbv36-warm-trace) !important;
  border-radius: 6px !important;
  min-width: 0 !important;
  box-shadow: var(--wbv36-shadow-inner);
}
.wbv-shell .workbench-bottom-evidence-strip__cell span {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: var(--wbv36-fg-faint) !important;
  text-transform: uppercase;
  line-height: 1.2 !important;
  display: block;
}
.wbv-shell .workbench-bottom-evidence-strip__cell strong {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--wbv36-fg) !important;
  line-height: 1.32 !important;
  margin-top: 4px !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- v3.6 · DETAILS FLYOUT (sectioned construction) ---------- */
.wbv-shell .workbench-details-sheet {
  background: var(--wbv36-card-bg-deep) !important;
  border: 1px solid var(--wbv36-line) !important;
  border-radius: 12px !important;
  box-shadow: var(--wbv36-shadow-deep) !important;
  position: relative;
  overflow: hidden;
}
.wbv-shell .workbench-details-sheet::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--wbv36-warm) 50%, transparent 100%);
  opacity: 0.7;
  pointer-events: none;
}
.wbv-shell .workbench-details-sheet__header {
  position: relative;
  padding: 14px 18px !important;
  background:
    linear-gradient(180deg, rgba(255,143,58,0.10) 0%, transparent 80%),
    rgba(28, 29, 33, 0.92) !important;
  border-bottom: 1px solid var(--wbv36-warm-trace) !important;
}
.wbv-shell .workbench-details-sheet__header h2,
.wbv-shell .workbench-details-sheet__header strong {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--wbv36-fg) !important;
  text-shadow: 0 0 14px rgba(255, 143, 58, 0.32);
}
.wbv-shell .workbench-details-sheet__close {
  background: var(--wbv36-card-bg) !important;
  border: 1px solid var(--wbv36-line) !important;
  border-radius: 6px !important;
  color: var(--wbv36-fg-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  padding: 6px 10px !important;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s;
}
.wbv-shell .workbench-details-sheet__close:hover {
  border-color: var(--wbv36-warm-rim) !important;
  color: var(--wbv36-warm) !important;
}
.wbv-shell .workbench-details-sheet__summary {
  padding: 12px 18px !important;
  background: var(--wbv36-card-bg-deep) !important;
  border-bottom: 1px solid var(--wbv36-line) !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 10px !important;
}
.wbv-shell .workbench-details-sheet__row {
  padding: 8px 10px !important;
  background: var(--wbv36-card-bg) !important;
  border: 1px solid var(--wbv36-line) !important;
  border-radius: 6px !important;
}
.wbv-shell .workbench-details-sheet__row span {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--wbv36-fg-faint) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.2 !important;
  display: block;
}
.wbv-shell .workbench-details-sheet__row strong {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--wbv36-fg) !important;
  margin-top: 4px !important;
  display: block;
  line-height: 1.36 !important;
}
.wbv-shell .workbench-details-sheet__section {
  margin: 10px 18px !important;
  padding: 12px 14px !important;
  background: var(--wbv36-card-bg) !important;
  border: 1px solid var(--wbv36-line) !important;
  border-left: 2px solid var(--wbv36-warm-trace) !important;
  border-radius: 8px !important;
  position: relative;
}
.wbv-shell .workbench-details-sheet__section[aria-label*="task"],
.wbv-shell .workbench-details-sheet__section[aria-label*="proof"],
.wbv-shell .workbench-details-sheet__section[aria-label*="lifecycle"] {
  border-left-color: var(--wbv36-warm) !important;
}
.wbv-shell .workbench-details-sheet__section > span:first-child,
.wbv-shell .workbench-details-sheet__section > div:first-child:not(.workbench-details-sheet__grid) {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--wbv36-fg-faint) !important;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  display: block;
  margin-bottom: 8px;
}
.wbv-shell .workbench-details-sheet__section strong {
  color: var(--wbv36-fg) !important;
  font-weight: 600 !important;
}
.wbv-shell .workbench-details-sheet__section p {
  font-size: 12px !important;
  color: var(--wbv36-fg-muted) !important;
  line-height: 1.5 !important;
}
.wbv-shell .workbench-details-sheet__section code {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 11px !important;
  background: var(--wbv36-card-bg-deep) !important;
  border: 1px solid var(--wbv36-line) !important;
  border-radius: 3px !important;
  padding: 1px 5px !important;
  color: var(--wbv36-warm) !important;
}
.wbv-shell .workbench-details-sheet__grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: 8px !important;
}
.wbv-shell .workbench-details-sheet__section ul,
.wbv-shell .workbench-details-sheet__section ol {
  margin: 6px 0 !important;
  padding-left: 18px !important;
}
.wbv-shell .workbench-details-sheet__section li {
  font-size: 12px !important;
  color: var(--wbv36-fg-muted) !important;
  line-height: 1.5 !important;
  margin-bottom: 3px;
}

/* ---------- v3.6 · CATEGORY BAY HEADER (unify across all surfaces) ---------- */
.wbv-shell .wbv-bay-header,
.wbv-shell .wb-header-band {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,143,58,0.08) 0%, transparent 65%),
    rgba(28, 29, 33, 0.85) !important;
  border-bottom: 1px solid var(--wbv36-warm-trace) !important;
  padding: 16px 20px 18px !important;
  border-radius: 10px 10px 0 0 !important;
  margin: -16px -16px 12px !important;
}
.wbv-shell .wbv-bay-header::before,
.wbv-shell .wb-header-band::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--wbv36-warm) 50%, transparent 100%);
  opacity: 0.7;
}
.wbv-shell .wbv-bay-header__title,
.wbv-shell .wb-header-band__title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--wbv36-fg) !important;
  text-shadow: 0 0 18px rgba(255, 143, 58, 0.22) !important;
  line-height: 1.2 !important;
}
.wbv-shell .wbv-bay-header__leaf,
.wbv-shell .wb-header-band__subtitle {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--wbv36-fg-faint) !important;
  margin-left: 12px !important;
}
.wbv-shell .wbv-bay-header__desc,
.wbv-shell .wb-header-band__desc {
  font-size: 13px !important;
  color: var(--wbv36-fg-muted) !important;
  line-height: 1.55 !important;
  margin-top: 4px !important;
}

/* ---------- v3.6 · UNIVERSAL CARD (ComfyUI node-card construction) ---------- */
.wbv-shell .wb-card {
  background: var(--wbv36-card-bg) !important;
  border: 1px solid var(--wbv36-line) !important;
  border-radius: var(--wbv36-radius) !important;
  box-shadow: var(--wbv36-shadow-card) !important;
  position: relative;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.wbv-shell .wb-card:hover {
  border-color: var(--wbv36-line-strong) !important;
}
.wbv-shell .wb-card[data-highlight="primary"] {
  border-color: var(--wbv36-warm-rim) !important;
  box-shadow: 0 0 12px rgba(255,143,58,0.18), var(--wbv36-shadow-card) !important;
}
.wbv-shell .wb-card[data-highlight="governed"] {
  border-color: var(--wbv36-warm) !important;
  background:
    linear-gradient(180deg, rgba(255,143,58,0.08), var(--wbv36-card-bg)) !important;
}
.wbv-shell .wb-card[data-highlight="warning"] {
  border-color: rgba(220, 90, 90, 0.55) !important;
  background:
    linear-gradient(180deg, rgba(220, 90, 90, 0.06), var(--wbv36-card-bg)) !important;
}
.wbv-shell .wb-card__head {
  padding: 8px 12px !important;
  border-bottom: 1px solid var(--wbv36-line) !important;
  background: rgba(40, 41, 45, 0.45) !important;
  border-radius: var(--wbv36-radius) var(--wbv36-radius) 0 0 !important;
}
.wbv-shell .wb-card__label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: var(--wbv36-fg-faint) !important;
  text-transform: uppercase;
}
.wbv-shell .wb-card__value {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--wbv36-fg) !important;
}
.wbv-shell .wb-card__meta {
  font-size: 11px !important;
  color: var(--wbv36-fg-faint) !important;
}
.wbv-shell .wb-card__body {
  padding: 10px 12px !important;
  font-size: 12px !important;
  color: var(--wbv36-fg-muted) !important;
  line-height: 1.5 !important;
}

/* ---------- v3.6 · DOCK CARD (variant of wb-card for dock placement) ---------- */
.wbv-shell .wb-dock-card {
  background: var(--wbv36-card-bg) !important;
  border: 1px solid var(--wbv36-line) !important;
  border-radius: var(--wbv36-radius) !important;
  box-shadow: var(--wbv36-shadow-card) !important;
  padding: 10px 12px !important;
  margin-bottom: 8px;
}
.wbv-shell .wb-dock-card[data-highlight="primary"] {
  border-color: var(--wbv36-warm-rim) !important;
  box-shadow: 0 0 12px rgba(255,143,58,0.18), var(--wbv36-shadow-card) !important;
}
.wbv-shell .wb-dock-card[data-highlight="governed"] {
  border-color: var(--wbv36-warm) !important;
}
.wbv-shell .wb-dock-card__label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: var(--wbv36-fg-faint) !important;
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}
.wbv-shell .wb-dock-card__title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--wbv36-fg) !important;
  display: block;
}
.wbv-shell .wb-dock-card__body {
  font-size: 12px !important;
  color: var(--wbv36-fg-muted) !important;
  margin-top: 6px;
  line-height: 1.5;
}

/* ---------- v3.6 · TAB STRIP + PILL (ComfyUI text-tab discipline) ---------- */
.wbv-shell .wb-tab-strip {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  border-bottom: 1px solid var(--wbv36-line) !important;
  padding: 0 14px !important;
}
.wbv-shell .wb-tab-pill {
  background: transparent !important;
  border: none !important;
  color: var(--wbv36-fg-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  padding: 8px 14px !important;
  position: relative;
  cursor: pointer;
  transition: color 0.18s;
}
.wbv-shell .wb-tab-pill:hover { color: var(--wbv36-fg) !important; }
.wbv-shell .wb-tab-pill[data-active="true"] {
  color: var(--wbv36-fg) !important;
}
.wbv-shell .wb-tab-pill[data-active="true"]::after {
  content: "";
  position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px;
  background: var(--wbv36-warm) !important;
  box-shadow: 0 0 10px rgba(255, 143, 58, 0.5);
}

/* ---------- v3.6 · STATUS CHIP + ACTION BUTTON ---------- */
.wbv-shell .wb-status-chip {
  background: var(--wbv36-card-bg) !important;
  border: 1px solid var(--wbv36-line) !important;
  border-radius: 4px !important;
  padding: 3px 8px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  color: var(--wbv36-fg-muted) !important;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
/* CANONICAL chip border/text tones — backed by the --fd-* FORGE_DESIGN tokens
   (Mission 2 chip consolidation, g-wb-m2). Only the color VALUES are retargeted
   to the canonical palette; existing !important / specificity preserved (no new
   !important introduced). */
.wbv-shell .wb-status-chip[data-tone="neutral"]  { border-color: var(--fd-color-steel-500) !important; color: var(--fd-color-steel-300) !important; }
.wbv-shell .wb-status-chip[data-tone="active"]   { border-color: var(--fd-color-status-good) !important; color: var(--fd-color-status-good) !important; }
.wbv-shell .wb-status-chip[data-tone="warn"]     { border-color: var(--fd-color-status-warn) !important; color: var(--fd-color-status-warn) !important; }
.wbv-shell .wb-status-chip[data-tone="blocked"]  { border-color: var(--fd-color-status-missing) !important; color: var(--fd-color-status-missing) !important; }
.wbv-shell .wb-status-chip[data-tone="info"]     { border-color: var(--fd-color-link) !important; color: var(--fd-color-link) !important; }
.wbv-shell .wb-status-chip[data-tone="governed"] { border-color: var(--fd-color-molten-amber) !important; color: var(--fd-color-molten-amber) !important; background: var(--fd-color-molten-glow-soft) !important; }

/* WorkbenchStatusChip COMPACT density variant (g-wb-m2-chip-size, 2026-06-07).
   For dense table/status rows (e.g. the gate met/unmet indicators) that need the
   ~8-9px legacy density without a wrapper. Shrinks font/padding/gap ONLY — tone
   color + border stay the --fd-* canonical rules above. The trailing [data-tone]
   (every chip always carries it) lifts this to specificity (0,4,0) so compact wins
   BOTH the wbv36 size (0,2,0) AND the equal-specificity in-panel rules
   (.forge-surface-panel / .workbench-pepper-workspace / .workbench-details-sheet
   .wb-status-chip = 0,3,0) regardless of source order; no new color !important. */
.wbv-shell .wb-status-chip.wb-status-chip--compact[data-tone] {
  font-size: 9px !important;
  padding: 1px 6px !important;
  gap: 4px;
  letter-spacing: 0.04em !important;
}

.wbv-shell .wb-action-btn {
  background: var(--wbv36-card-bg) !important;
  border: 1px solid var(--wbv36-line) !important;
  border-radius: 6px !important;
  color: var(--wbv36-fg) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 7px 14px !important;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}
.wbv-shell .wb-action-btn:hover {
  background: var(--wbv36-card-bg-raise) !important;
  border-color: var(--wbv36-line-strong) !important;
}
.wbv-shell .wb-action-btn[data-variant="primary"] {
  background: var(--wbv36-warm) !important;
  color: rgba(20, 20, 20, 0.95) !important;
  border-color: var(--wbv36-warm-rim) !important;
  box-shadow: 0 0 14px rgba(255,143,58,0.32);
}
.wbv-shell .wb-action-btn[data-variant="primary"]:hover {
  background: rgba(255, 168, 88, 1) !important;
  box-shadow: 0 0 20px rgba(255,143,58,0.5);
}
.wbv-shell .wb-action-btn[data-variant="ghost"] {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--wbv36-fg-muted) !important;
}

/* ---------- v3.6 · TYPOGRAPHY NORMALIZATION (kill stray purple + 9px text) ---------- */
.wbv-shell, .wbv-shell input, .wbv-shell button, .wbv-shell textarea, .wbv-shell select {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}
.wbv-shell code, .wbv-shell pre, .wbv-shell .wbv-code {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace !important;
}
/* Title primitives */
.wbv-shell .wbv-title { color: var(--wbv36-fg) !important; }
.wbv-shell .wbv-title--bay {
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 0 14px rgba(255, 143, 58, 0.18);
}
.wbv-shell .wbv-title--section {
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}
.wbv-shell .wbv-title--card {
  font-size: 13px !important;
  font-weight: 600 !important;
}
/* Body primitives */
.wbv-shell .wbv-body {
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: var(--wbv36-fg) !important;
}
.wbv-shell .wbv-body--muted {
  color: var(--wbv36-fg-muted) !important;
}
.wbv-shell .wbv-helper {
  font-size: 11px !important;
  color: var(--wbv36-fg-faint) !important;
}
.wbv-shell .wbv-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: var(--wbv36-fg-faint) !important;
}

/* ---------- v3.6 · USAGE SUMMARY GRID (used by Audit, Usage, etc.) ---------- */
.wbv-shell .usage-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}
.wbv-shell .usage-summary-card {
  padding: 12px 14px !important;
  background: var(--wbv36-card-bg) !important;
  border: 1px solid var(--wbv36-line) !important;
  border-left: 2px solid var(--wbv36-warm-trace) !important;
  border-radius: 8px !important;
  box-shadow: var(--wbv36-shadow-inner);
}
.wbv-shell .usage-summary-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: var(--wbv36-fg-faint) !important;
  text-transform: uppercase;
}
.wbv-shell .usage-summary-value {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--wbv36-fg) !important;
  margin-top: 4px !important;
  text-shadow: 0 0 12px rgba(255, 143, 58, 0.18);
}
.wbv-shell .usage-summary-sub {
  font-size: 11px !important;
  color: var(--wbv36-fg-muted) !important;
  margin-top: 4px !important;
}

/* ---------- v3.6 · USAGE BUILDS TABLE (Audit-style data tables) ---------- */
.wbv-shell .usage-builds-table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: var(--wbv36-card-bg-deep) !important;
  border: 1px solid var(--wbv36-line) !important;
  border-radius: 8px !important;
  overflow: hidden;
}
.wbv-shell .usage-builds-table thead th {
  background: var(--wbv36-card-bg) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: var(--wbv36-fg-faint) !important;
  text-transform: uppercase;
  padding: 10px 12px !important;
  text-align: left !important;
  border-bottom: 1px solid var(--wbv36-line) !important;
}
.wbv-shell .usage-builds-table tbody td {
  font-size: 12px !important;
  color: var(--wbv36-fg) !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid var(--wbv36-line) !important;
}
.wbv-shell .usage-builds-table tbody tr:hover td {
  background: rgba(255, 143, 58, 0.04) !important;
}
.wbv-shell .usage-builds-table tbody tr:last-child td {
  border-bottom: none !important;
}

/* ---------- v3.6 · CATEGORY BUBBLE / STRIP (Skills-style success-direction) ---------- */
.wbv-shell .wbv-category-strip {
  display: grid !important;
  grid-template-columns: repeat(var(--wbv-strip-columns, auto-fit), minmax(180px, 1fr)) !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}
.wbv-shell .wbv-category-bubble {
  position: relative;
  background: var(--wbv36-card-bg) !important;
  border: 1px solid var(--wbv36-line) !important;
  border-left: 3px solid var(--wbv-bubble-accent, var(--wbv36-warm-trace)) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  box-shadow: var(--wbv36-shadow-card);
  transition: border-color 0.18s, box-shadow 0.18s;
  text-align: left !important;
}
.wbv-shell .wbv-category-bubble:hover,
.wbv-shell .wbv-category-bubble[data-active="true"] {
  border-color: var(--wbv36-warm-rim) !important;
  box-shadow: 0 0 12px rgba(255, 143, 58, 0.18), var(--wbv36-shadow-card);
}
.wbv-shell .wbv-category-bubble__sweep {
  display: none;
}
.wbv-shell .wbv-category-bubble__label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: var(--wbv-bubble-accent, var(--wbv36-fg-muted)) !important;
  text-transform: uppercase;
}
.wbv-shell .wbv-category-bubble__count {
  margin-left: auto;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--wbv36-fg) !important;
  background: var(--wbv36-card-bg-deep);
  border: 1px solid var(--wbv36-line);
  border-radius: 999px;
  padding: 2px 8px;
}
.wbv-shell .wbv-category-bubble__head {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.wbv-shell .wbv-category-bubble__body {
  font-size: 12px !important;
  color: var(--wbv36-fg-muted) !important;
  line-height: 1.5 !important;
  margin-top: 6px !important;
}

/* ---------- v3.6 · PRESENTATION AREA + WB-PANEL-SHELL ---------- */
.wbv-shell .wb-panel-shell,
.wbv-shell .wbv-bay-surface {
  position: relative;
  background: var(--wbv36-canvas) !important;
  border: 1px solid var(--wbv36-line) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  box-shadow: var(--wbv36-shadow-card);
  overflow: hidden;
}
.wbv-shell .wb-presentation-area,
.wbv-shell .wbv-presentation-area {
  padding-top: 4px !important;
}

/* ---------- v3.6 · STANDALONE DEV/EDIT MENU (top-right corner) ---------- */
.wbv-shell .workbench-dev-edit-menu {
  background: var(--wbv36-card-bg-deep) !important;
  border: 1px solid var(--wbv36-line) !important;
  border-radius: 6px !important;
  box-shadow: var(--wbv36-shadow-card);
  overflow: hidden;
}
.wbv-shell .workbench-dev-edit-menu button {
  background: transparent !important;
  border: none !important;
  color: var(--wbv36-fg-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  padding: 8px 12px !important;
  cursor: pointer;
}
.wbv-shell .workbench-dev-edit-menu button strong {
  color: var(--wbv36-warm) !important;
  margin-left: 6px;
}

/* ============================================================
 * END @layer workbench-visual-system-v6.12 (WBV v3.6)
 * ============================================================ */

/* ============================================================
 * @layer workbench-visual-system-v6.13 — WBV v3.7
 * Iter-2 ComfyUI construction port. Addresses operator's 5
 * remaining defects after v3.6 landed:
 *   B) hero masthead rebuild (real command band, not chip strip)
 *   C) Pepper dock full sweep (header + cards + ask + governed)
 *   D) Details flyout anchored (not floating fullscreen)
 *   E) Spine selected-state stronger glow/trim
 *   + typography readability +1 step
 *
 * Pipeline: workbench-comfyui-construction-port-2026-05-21 (iter 2)
 * Source: live ComfyUI re-inspection ss_7109jl7o0 +
 *   ComfyUI inspector/tab discipline from .docs/WORKBENCH_VISUAL_SYSTEM.md
 * ============================================================ */

/* ---------- v3.7 · HERO COMMAND MASTHEAD (real command band) ---------- */
/* Replace the v3.6 horizontal-equal-chip strip with a proper masthead:
   - oversized hero identity block on the left
   - status chips clustered tight at right with sharper hierarchy
   - sharper vertical divider between identity + ops region
   - molten underline only at hero identity edge, not full band */
.wbv-shell .workbench-top-hero-band {
  min-height: 68px !important;
  padding: 8px 22px 10px !important;
  gap: 16px !important;
  background:
    radial-gradient(ellipse at 8% 100%, rgba(255,143,58,0.14) 0%, transparent 45%),
    linear-gradient(180deg, rgba(28,29,33,0.92) 0%, rgba(20,21,24,0.92) 100%) !important;
  border-bottom: 1px solid var(--wbv36-line) !important;
  box-shadow:
    0 6px 14px rgba(0,0,0,0.42),
    inset 0 -1px 0 rgba(255,143,58,0.18) !important;
  align-items: center !important;
}
.wbv-shell .workbench-top-hero-band::before {
  /* underline only under identity zone, not full band */
  left: 22px !important;
  right: auto !important;
  width: 280px !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--wbv36-warm) 0%, var(--wbv36-warm-rim) 60%, transparent 100%) !important;
  opacity: 0.85 !important;
  box-shadow: 0 0 14px rgba(255,143,58,0.5) !important;
}
.wbv-shell .workbench-top-hero-band__identity {
  padding: 6px 22px 6px 6px !important;
  margin-right: 4px !important;
  border-right: 1px solid var(--wbv36-line) !important;
  position: relative;
}
.wbv-shell .workbench-top-hero-band__identity::before {
  font-size: 22px !important;
  text-shadow:
    0 0 20px rgba(255,143,58,0.9),
    0 0 6px rgba(255,143,58,0.6) !important;
  filter: drop-shadow(0 0 8px rgba(255,143,58,0.45)) !important;
  /* v007.56n Position diamond absolutely so it doesn't push OS label
     and title off-center. Operator 2026-05-22: "logo still not
     centered" — the ::before diamond was taking 22px in the flex
     column, shifting the visible text downward. Absolute lifts it
     out of flex flow and parks it at the top of the identity box. */
  position: absolute !important;
  top: 8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
.wbv-shell .workbench-top-hero-band__os-label {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  color: var(--wbv36-warm) !important;
  text-transform: uppercase;
  line-height: 1.1 !important;
}
.wbv-shell .workbench-top-hero-band__os-value {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--wbv36-fg) !important;
  letter-spacing: -0.005em !important;
  line-height: 1.1 !important;
  text-shadow:
    0 0 18px rgba(255,143,58,0.5),
    0 1px 0 rgba(0,0,0,0.6) !important;
}
/* Status chip cluster — tighter, smaller, sharper hierarchy */
.wbv-shell .workbench-top-hero-band__chips,
.wbv-shell .workbench-top-hero-band__work {
  gap: 2px !important;
}
.wbv-shell .workbench-top-hero-band .workbench-status-pill,
.wbv-shell .workbench-top-hero-band__chips > *,
.wbv-shell .workbench-top-hero-band__work > * {
  padding: 5px 9px !important;
  border-radius: 4px !important;
  background:
    linear-gradient(180deg, rgba(40,41,45,0.85), rgba(32,33,37,0.85)) !important;
  border: 1px solid var(--wbv36-line) !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  min-width: 0 !important;
  transition: border-color 0.18s, background 0.18s, transform 0.18s;
}
.wbv-shell .workbench-top-hero-band .workbench-status-pill:hover,
.wbv-shell .workbench-top-hero-band__chips > *:hover,
.wbv-shell .workbench-top-hero-band__work > *:hover {
  border-color: var(--wbv36-warm-trace) !important;
  background:
    linear-gradient(180deg, rgba(50,51,55,0.95), rgba(40,41,45,0.95)) !important;
  transform: translateY(-1px);
}
.wbv-shell .workbench-top-hero-band .workbench-status-pill > span:first-child,
.wbv-shell .workbench-top-hero-band__chips > * > span:first-child,
.wbv-shell .workbench-top-hero-band__work > * > span:first-child {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  color: var(--wbv36-fg-faint) !important;
  line-height: 1.05 !important;
}
.wbv-shell .workbench-top-hero-band .workbench-status-pill strong,
.wbv-shell .workbench-top-hero-band__chips > * strong,
.wbv-shell .workbench-top-hero-band__work > * strong {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--wbv36-fg) !important;
  line-height: 1.22 !important;
  margin-top: 2px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.wbv-shell .workbench-top-hero-band__work {
  padding-left: 14px !important;
  border-left: 1px solid var(--wbv36-warm-trace) !important;
  margin-left: 4px !important;
  position: relative;
}
.wbv-shell .workbench-top-hero-band__work::before {
  /* Tiny label on the work cluster: "GOVERNANCE" */
  content: "GOVERNANCE";
  position: absolute;
  top: -7px;
  left: 14px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--wbv36-warm);
  background: rgba(20,21,24,0.92);
  padding: 0 6px;
  text-transform: uppercase;
}

/* ---------- v3.7 · PEPPER DOCK full sweep ---------- */
.wbv-shell .workbench-pepper-dock {
  background:
    linear-gradient(180deg, var(--wbv36-rail-bg) 0%, rgba(20,21,24,0.96) 100%) !important;
}
.wbv-shell .workbench-pepper-dock__header {
  padding: 16px 16px 14px !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,143,58,0.18) 0%, transparent 55%),
    rgba(28,29,33,0.96) !important;
  border-bottom: 1px solid var(--wbv36-warm-trace) !important;
}
.wbv-shell .workbench-pepper-dock__header span {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  color: var(--wbv36-warm) !important;
}
.wbv-shell .workbench-pepper-dock__header strong {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--wbv36-fg) !important;
  text-shadow: 0 0 12px rgba(255,143,58,0.22);
  display: block;
  margin-top: 2px;
}
.wbv-shell .workbench-pepper-dock__header em {
  font-size: 10px !important;
  font-style: italic !important;
  color: var(--wbv36-fg-muted) !important;
  display: block;
  margin-top: 4px;
}
.wbv-shell .workbench-pepper-dock__context-row {
  padding: 10px 12px 12px !important;
  gap: 8px !important;
}
.wbv-shell .workbench-pepper-dock__context-row > * {
  flex: 1 1 0 !important;
  padding: 6px 10px !important;
  background: var(--wbv36-card-bg) !important;
  border: 1px solid var(--wbv36-line) !important;
  border-left: 2px solid var(--wbv36-warm-trace) !important;
  border-radius: 5px !important;
  min-width: 0 !important;
}
.wbv-shell .workbench-pepper-dock__context-row > * > span:first-child {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  color: var(--wbv36-fg-faint) !important;
  text-transform: uppercase;
}
.wbv-shell .workbench-pepper-dock__context-row > * strong {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--wbv36-fg) !important;
  display: block;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Chat card preview — clearer hierarchy with section labels above */
.wbv-shell .workbench-pepper-dock__chat-card[data-highlight="primary"] {
  border-color: var(--wbv36-warm-rim) !important;
  background:
    linear-gradient(180deg, rgba(255,143,58,0.06) 0%, var(--wbv36-card-bg) 60%) !important;
  box-shadow:
    0 0 18px rgba(255,143,58,0.18),
    0 6px 14px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,143,58,0.22) !important;
}
.wbv-shell .workbench-pepper-dock__response-window {
  font-size: 12.5px !important;
  color: var(--wbv36-fg-muted) !important;
  line-height: 1.55 !important;
  padding: 6px 0 8px !important;
}
.wbv-shell .workbench-pepper-dock__response-window strong {
  color: var(--wbv36-fg) !important;
  font-weight: 600 !important;
}
.wbv-shell .workbench-pepper-dock__prompt-teaser textarea,
.wbv-shell .workbench-pepper-dock__prompt-teaser input {
  background: var(--wbv36-card-bg-deep) !important;
  border: 1px solid var(--wbv36-line) !important;
  border-bottom: 1px solid var(--wbv36-warm-trace) !important;
  border-radius: 4px !important;
  padding: 8px 10px !important;
  font-size: 12.5px !important;
  color: var(--wbv36-fg) !important;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.wbv-shell .workbench-pepper-dock__prompt-teaser textarea:focus,
.wbv-shell .workbench-pepper-dock__prompt-teaser input:focus {
  border-color: var(--wbv36-warm-rim) !important;
  box-shadow: 0 0 0 1px var(--wbv36-warm-trace), 0 0 10px rgba(255,143,58,0.18);
}
/* Governed task card — strongest emphasis (current selected work) */
.wbv-shell .workbench-pepper-dock__compact-card--governed-task {
  border: 1px solid var(--wbv36-warm) !important;
  background:
    linear-gradient(180deg, rgba(255,143,58,0.12) 0%, var(--wbv36-card-bg) 70%) !important;
  box-shadow:
    0 0 20px rgba(255,143,58,0.28),
    0 6px 14px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,143,58,0.35) !important;
}
.wbv-shell .workbench-pepper-dock__compact-card--governed-task strong {
  text-shadow: 0 0 10px rgba(255,143,58,0.32);
}
.wbv-shell .workbench-pepper-dock__expand {
  margin: 12px 12px 14px !important;
  width: calc(100% - 24px) !important;
  padding: 11px 14px !important;
  font-size: 12px !important;
  background:
    linear-gradient(180deg, rgba(255,168,88,1) 0%, var(--wbv36-warm) 100%) !important;
  border: 1px solid rgba(255,180,100,0.7) !important;
  box-shadow:
    0 0 22px rgba(255,143,58,0.4),
    inset 0 1px 0 rgba(255,210,160,0.7) !important;
}
.wbv-shell .workbench-pepper-dock__expand:hover {
  background: linear-gradient(180deg, rgba(255,180,100,1) 0%, rgba(255,158,68,1) 100%) !important;
  box-shadow: 0 0 28px rgba(255,143,58,0.6), inset 0 1px 0 rgba(255,220,180,0.85) !important;
  transform: translateY(-1px);
}

/* ---------- v3.7 · DETAILS FLYOUT anchored (not floating fullscreen) ---------- */
/* Make it feel like an inspector drawer sitting at the bottom-right of
   the workbench, anchored to the evidence rail context, with reliable
   close + max-height + scroll. */
.wbv-shell .workbench-details-sheet,
.wbv-shell .panel-mockup-detail-panel.workbench-details-sheet {
  position: fixed !important;
  right: 332px !important; /* clear of Pepper dock */
  left: 264px !important;  /* clear of left spine */
  bottom: 120px !important; /* sit above the bottom evidence rail */
  top: auto !important;
  width: auto !important;
  max-width: none !important;
  max-height: calc(100vh - 240px) !important;
  overflow: auto !important;
  border-radius: 12px 12px 8px 8px !important;
  border: 1px solid var(--wbv36-warm-rim) !important;
  box-shadow:
    0 22px 48px rgba(0,0,0,0.65),
    0 0 24px rgba(255,143,58,0.18),
    inset 0 1px 0 rgba(255,143,58,0.32) !important;
  z-index: 24 !important;
  background:
    linear-gradient(180deg, rgba(40,41,45,0.95) 0%, rgba(22,23,27,0.96) 18%) !important;
  /* Drawer-anchor arrow pointing to bottom evidence rail */
}
.wbv-shell .workbench-details-sheet::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  width: 18px;
  height: 18px;
  background: rgba(22,23,27,0.96);
  border-right: 1px solid var(--wbv36-warm-rim);
  border-bottom: 1px solid var(--wbv36-warm-rim);
  transform: translateX(-50%) rotate(45deg);
  z-index: -1;
}
.wbv-shell .workbench-details-sheet__header {
  position: sticky !important;
  top: 0 !important;
  z-index: 2;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 16px !important;
  background:
    linear-gradient(180deg, rgba(255,143,58,0.14) 0%, rgba(28,29,33,0.96) 90%) !important;
  border-bottom: 1px solid var(--wbv36-warm-rim) !important;
  backdrop-filter: blur(6px);
}
.wbv-shell .workbench-details-sheet__header span:first-child {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  color: var(--wbv36-warm) !important;
  text-transform: uppercase;
}
.wbv-shell .workbench-details-sheet__header strong {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--wbv36-fg) !important;
  flex: 1 1 auto;
  text-shadow: 0 0 14px rgba(255,143,58,0.28);
}
.wbv-shell .workbench-details-sheet__header em {
  font-size: 11px !important;
  color: var(--wbv36-fg-muted) !important;
  font-style: italic !important;
}
.wbv-shell .workbench-details-sheet__close {
  background:
    linear-gradient(180deg, rgba(45,47,52,0.95), rgba(32,33,37,0.95)) !important;
  border: 1px solid var(--wbv36-line) !important;
  border-radius: 5px !important;
  color: var(--wbv36-fg-muted) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  padding: 6px 12px !important;
  cursor: pointer;
  transition: all 0.18s;
}
.wbv-shell .workbench-details-sheet__close:hover {
  background: rgba(255,143,58,0.18) !important;
  border-color: var(--wbv36-warm-rim) !important;
  color: var(--wbv36-fg) !important;
}
.wbv-shell .workbench-details-sheet__close:active {
  transform: translateY(1px);
}
.wbv-shell .workbench-details-sheet__summary {
  padding: 12px 16px !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
}
.wbv-shell .workbench-details-sheet__section {
  margin: 8px 16px !important;
  padding: 10px 12px !important;
}
.wbv-shell .workbench-details-sheet__section:first-of-type {
  margin-top: 12px !important;
}
.wbv-shell .workbench-details-sheet__section:last-of-type {
  margin-bottom: 14px !important;
}
.wbv-shell .workbench-task-key-values {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 8px !important;
  margin-top: 6px !important;
}
.wbv-shell .workbench-task-key-values > div {
  padding: 6px 10px !important;
  background: var(--wbv36-card-bg-deep) !important;
  border: 1px solid var(--wbv36-line) !important;
  border-radius: 4px !important;
}
.wbv-shell .workbench-task-key-values > div span {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  color: var(--wbv36-fg-faint) !important;
  text-transform: uppercase;
  display: block;
}
.wbv-shell .workbench-task-key-values > div strong {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--wbv36-fg) !important;
  display: block;
  margin-top: 2px;
}
.wbv-shell .workbench-proof-gates {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 8px !important;
}
.wbv-shell .workbench-proof-gates > div {
  padding: 8px 10px !important;
  background: var(--wbv36-card-bg-deep) !important;
  border: 1px solid var(--wbv36-line) !important;
  border-left: 2px solid var(--wbv36-warm) !important;
  border-radius: 4px !important;
}
.wbv-shell .workbench-proof-gates > div strong {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--wbv36-fg) !important;
  display: block;
}
.wbv-shell .workbench-proof-gates > div em {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.10em;
  color: var(--wbv36-warm) !important;
  display: inline-block;
  margin-top: 4px;
  padding: 1px 6px;
  background: rgba(255,143,58,0.10);
  border: 1px solid var(--wbv36-warm-trace);
  border-radius: 3px;
  text-transform: uppercase;
}
.wbv-shell .workbench-proof-gates > div p {
  font-size: 11px !important;
  color: var(--wbv36-fg-muted) !important;
  margin-top: 6px !important;
  line-height: 1.45 !important;
}

/* ---------- v3.7 · LEFT SPINE selected-state stronger glow ----------
   v007.52 amendment 2026-05-22: extend selector to also fire when the
   bay is expanded with a child currently selected (:has()) or just
   data-expanded. Operator's screenshot-pair proved the bay group
   was losing its strong glow when a child took aria-current. */
.wbv-shell .workbench-os-spine .forge-spine-group[data-selected="true"],
.wbv-shell .workbench-os-spine .forge-spine-group[data-expanded="true"],
.wbv-shell .workbench-os-spine .forge-spine-group:has(.forge-spine-child[aria-current="true"]) {
  background:
    linear-gradient(180deg, rgba(255,143,58,0.22) 0%, rgba(40,41,45,0.85) 100%) !important;
  border: 1px solid var(--wbv36-warm) !important;
  box-shadow:
    0 0 22px rgba(255,143,58,0.32),
    inset 0 1px 0 rgba(255,143,58,0.55),
    inset 0 0 18px rgba(255,143,58,0.10) !important;
}
.wbv-shell .workbench-os-spine .forge-spine-group[data-selected="true"] .forge-spine-group__label,
.wbv-shell .workbench-os-spine .forge-spine-group[data-expanded="true"] .forge-spine-group__label,
.wbv-shell .workbench-os-spine .forge-spine-group:has(.forge-spine-child[aria-current="true"]) .forge-spine-group__label {
  color: var(--wbv36-fg) !important;
  font-weight: 700 !important;
  text-shadow: 0 0 10px rgba(255,143,58,0.45) !important;
}
.wbv-shell .workbench-os-spine .forge-spine-group[data-selected="true"]::before {
  content: "";
  position: absolute;
  left: -1px; top: -1px; bottom: -1px;
  width: 3px;
  background: var(--wbv36-warm);
  border-radius: 8px 0 0 8px;
  box-shadow: 0 0 12px rgba(255,143,58,0.7);
}
.wbv-shell .workbench-os-spine .forge-spine-group { position: relative; }
.wbv-shell .workbench-os-spine .forge-spine-child[aria-current="true"] {
  background:
    linear-gradient(90deg, rgba(255,143,58,0.18) 0%, rgba(255,143,58,0.04) 100%) !important;
  color: var(--wbv36-fg) !important;
  font-weight: 700 !important;
  border-left: 3px solid var(--wbv36-warm) !important;
  box-shadow: inset 0 0 12px rgba(255,143,58,0.10);
}
/* Inactive bays stay calm. Higher-specificity rule chain to beat earlier
   v3.6 / v6.11 declarations of the same property. */
.wbv-shell nav.workbench-os-spine .forge-spine-group:not([data-selected="true"]):not(:hover) {
  box-shadow: none !important;
}
.wbv-shell nav.workbench-os-spine .forge-spine-group:not([data-selected="true"]):hover {
  background: rgba(50,52,57,0.65) !important;
  border-color: var(--wbv36-line-strong) !important;
  box-shadow: 0 0 8px rgba(255,143,58,0.06) !important;
}
/* Selected bay glow — promoted specificity using nav prefix + double
   attribute selector to override any prior :not(...) rules.
   v007.52c 2026-05-22: extend to data-expanded + :has(current child)
   so the strongest glow persists when a child takes aria-current. */
.wbv-shell nav.workbench-os-spine .forge-spine-group[data-selected="true"][data-bay-id],
.wbv-shell nav.workbench-os-spine .forge-spine-group[data-expanded="true"][data-bay-id],
.wbv-shell nav.workbench-os-spine .forge-spine-group[data-bay-id]:has(.forge-spine-child[aria-current="true"]) {
  background:
    linear-gradient(180deg, rgba(255,143,58,0.22) 0%, rgba(40,41,45,0.85) 100%) !important;
  border: 1px solid var(--wbv36-warm) !important;
  box-shadow:
    0 0 24px rgba(255,143,58,0.42),
    0 0 6px rgba(255,143,58,0.6),
    inset 0 1px 0 rgba(255,143,58,0.55),
    inset 0 0 22px rgba(255,143,58,0.12) !important;
}

/* ---------- v3.7 · TYPOGRAPHY readability +1 ---------- */
/* Bump body / cell value to 13px minimum across the shell. */
.wbv-shell .workbench-bottom-evidence-strip__cell strong {
  font-size: 13.5px !important;
  font-weight: 600 !important;
}
.wbv-shell .workbench-bottom-evidence-strip__title strong {
  font-size: 16px !important;
}
.wbv-shell .wb-card__body,
.wbv-shell .wb-dock-card__body {
  font-size: 12.5px !important;
}
/* Section uppercase labels get one-step bigger */
.wbv-shell .workbench-details-sheet__section > span:first-child,
.wbv-shell .workbench-details-sheet__section > div:first-child:not(.workbench-details-sheet__grid):not(.workbench-task-key-values) {
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  font-weight: 800 !important;
}

/* ============================================================
 * END @layer workbench-visual-system-v6.13 (WBV v3.7)
 * ============================================================ */

/* ============================================================
 * @layer workbench-visual-system-v6.14 — REVOKED 2026-05-22
 *
 * Pipeline: workbench-pepper-dock-bad-border-image-cleanup-2026-05-22
 *
 * The prior v6.14 "Asset consumption v0.1" block applied a 60px-thick
 * 9-slice border-image of glass-shell__minimal__v001.png around
 * .wbv-shell .workbench-pepper-dock. Per operator instruction
 * 2026-05-22 ("STOP AND CLEAN THE BAD RIGHT-RAIL ASSET FIRST") the
 * binding is removed because it rendered as a cheap static decorative
 * frame, not a real glass-shell consumption.
 *
 * The underlying .workbench-pepper-dock rules at ~lines 4766+ (the
 * prior clean compact dock layout) re-govern the dock unmodified.
 * No CSS-art replacement is introduced.
 *
 * The asset file glass-shell__minimal__v001.png stays on disk as a
 * draft (asset-manifest.json exploratory_drafts_present[]) — only the
 * runtime binding is revoked. See asset-manifest.json
 * runtime_consumption_authorizations[id=pepper-dock-asset-consumption-2026-05-21]
 * revoked_at + revoked_reason for the audit trail.
 * ============================================================ */

/* ============================================================
 * END @layer workbench-visual-system-v6.14 (asset consumption v0.1)
 * ============================================================ */

/* ============================================================
 * @layer pepper-dock-clean-baseline-2026-05-22
 *
 * Pipeline: workbench-pepper-dock-clean-baseline-and-right-rail-asset-2026-05-22
 * Stage: 11 (clean baseline)
 *
 * PURPOSE: per operator 2026-05-22 hard rule
 *   "Restore Pepper Dock to a clean functional glass panel baseline
 *    using only minimal layout/readability CSS, not CSS-art."
 *
 * Earlier cascade layers paint the dock + inner cards with multi-stop
 * radial+linear gradients + decorative box-shadow stacks (v2.3
 * --wbv-layer-gradient, the per-card __context-row gradient at L4807-
 * 4820, the __chat-card enhanced gradient at L7194-7204, the
 * __state-chips gradient at L7238-7245). Those are "CSS-as-art"
 * shortcuts prohibited by asset-manifest.json blocked_implementation_
 * shortcuts ("css-drawn glass panel" / "css-drawn glass panels").
 *
 * This layer flattens them to solid readable surfaces. Border,
 * border-radius, padding, typography, scrollbar styling are PRESERVED
 * (those are layout/readability, not art).
 *
 * No background-image is set here — the real right-rail asset
 * (glass-panel-shell__right-rail__idle__v001.png) lands via stage 12
 * separately with its own runtime_consumption_authorization.
 * Other surfaces using --wbv-layer-gradient (top rail capsules,
 * bottom evidence blocks) are UNTOUCHED by selector scope.
 * ============================================================ */

.wbv-shell .workbench-pepper-dock {
  /* Stage 16 — Stage 15 layered binding REVOKED. Operator turn 2026-05-22:
     "STOP RANDOM PANEL IMAGE WORK ... do NOT continue random CSS polish ...
      convert the successful ComfyUI path into a controlled asset-material
      pipeline." Both prior layer assets (steam + rim) moved to
     _quarantine/_design-rejected-2026-05-22-iter4-wrong-visual-target/.
     Neutral readable baseline only — flat dark dock fill + thin border +
     subtle drop shadow. No background-image. No pseudo-element art.
     The proper layered material system is documented in
     .docs/WORKBENCH_PANEL_MATERIAL_TARGET.md and will be rebuilt under
     that spec when operator authorizes the next slice. */
  /* ── Glass Construction v2 ─────────────────────────────────────────
     Glass pane visual is now driven by the WorkbenchGlassSurface React
     primitive (shell-primitives.tsx). CSS below styles that component.
     Dock itself only gets the dark translucent base + border-image.
     ──────────────────────────────────────────────────────────────────── */
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ GLASS CONSTRUCTION v2 — WorkbenchGlassSurface primitive CSS     ║
   ║                                                                  ║
   ║ Assets: procedurally generated (NOT ComfyUI). v002 series.       ║
   ║ CSS only positions, masks, layers. CSS is NOT the visual source. ║
   ║ Pipeline designed for ComfyUI asset replacement later.           ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* Canonical glass recipe — matches Build modal (.forge-surface-panel).
   Clean dark translucent fill + restrained blur + 1px subtle border +
   soft warm outer glow + inset top highlight. NO border-image, NO
   mix-blend-mode overlays, NO oversized corner radials. */
.forge-glass-surface {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--ws-glass-radius);
  background: var(--ws-glass-bg);
  backdrop-filter: blur(var(--ws-glass-blur)) saturate(var(--ws-glass-saturate));
  -webkit-backdrop-filter: blur(var(--ws-glass-blur)) saturate(var(--ws-glass-saturate));
  border: var(--ws-border);
  box-shadow: var(--ws-surface-shadow);
}

/* Smoke/steam layer — behind glass, absolute fill */
.forge-glass-surface__smoke {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('/assets/workbench-layered/glass-panel-layers/smoke-atmospheric__v002.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.45;
  pointer-events: none;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .forge-glass-surface__smoke {
    animation: none !important;
    opacity: 0.2;
  }
}

/* Edge highlight strips — tileable asset-backed bevel cues */
.forge-glass-surface__edge-left,
.forge-glass-surface__edge-top,
.forge-glass-surface__edge-right,
.forge-glass-surface__edge-bottom {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.forge-glass-surface__edge-left {
  top: 0;
  left: 0;
  bottom: 0;
  width: 32px;
  background-image: url('/assets/workbench-layered/glass-panel-layers/glass-edge-left__v002.png');
  background-size: 32px auto;
  background-repeat: repeat-y;
}

.forge-glass-surface__edge-top {
  top: 0;
  left: 32px;
  right: 32px;
  height: 24px;
  background-image: url('/assets/workbench-layered/glass-panel-layers/glass-edge-top__v002.png');
  background-size: auto 24px;
  background-repeat: repeat-x;
}

.forge-glass-surface__edge-right {
  top: 0;
  right: 0;
  bottom: 0;
  width: 32px;
  background-image: url('/assets/workbench-layered/glass-panel-layers/glass-edge-left__v002.png');
  background-size: 32px auto;
  background-repeat: repeat-y;
  transform: scaleX(-1);
}

.forge-glass-surface__edge-bottom {
  bottom: 0;
  left: 32px;
  right: 32px;
  height: 24px;
  background-image: url('/assets/workbench-layered/glass-panel-layers/glass-edge-top__v002.png');
  background-size: auto 24px;
  background-repeat: repeat-x;
  transform: scaleY(-1);
}

/* Corner highlight pieces — bevel intersections */
.forge-glass-surface__corner-tl,
.forge-glass-surface__corner-tr,
.forge-glass-surface__corner-bl,
.forge-glass-surface__corner-br {
  position: absolute;
  z-index: 3;
  width: 48px;
  height: 48px;
  pointer-events: none;
  background-image: url('/assets/workbench-layered/glass-panel-layers/glass-corner-highlight__v002.png');
  background-size: 48px 48px;
  background-repeat: no-repeat;
}

.forge-glass-surface__corner-tl { top: 0; left: 0; }
.forge-glass-surface__corner-tr { top: 0; right: 0; transform: scaleX(-1); }
.forge-glass-surface__corner-bl { bottom: 0; left: 0; transform: scaleY(-1); }
.forge-glass-surface__corner-br { bottom: 0; right: 0; transform: scale(-1, -1); }

/* Content slot — above all visual layers */
.forge-glass-surface__content {
  position: relative;
  z-index: 4;
  display: contents;
}

/* ── Variant overrides ──────────────────────────────────────────── */

.forge-glass-surface--dock {
  background: rgba(8, 12, 18, 0.72);
}

.forge-glass-surface--spine {
  background: rgba(8, 12, 18, 0.7);
  border-radius: 10px;
}

.forge-glass-surface--topbar {
  background: rgba(8, 12, 18, 0.6);
  border-image-width: 8px;
  border-width: 8px;
}

.forge-glass-surface--bottombar {
  background: rgba(8, 12, 18, 0.65);
}

/* Glass surface border-image must survive all .wbv-shell overrides.
   Surface-specific blocks use border shorthand + !important which
   clobbers border-image. This block wins via higher specificity +
   !important to guarantee the 9-slice border asset always renders. */
.wbv-shell .forge-glass-surface {
  border-image-source: url('/assets/workbench-layered/glass-panel-layers/glass-border-9slice__v002.png') !important;
  border-image-slice: 48 fill !important;
  border-image-width: 6px !important;
  border-image-outset: 0 !important;
  border-image-repeat: stretch !important;
  border-style: solid !important;
  border-width: 6px !important;
  border-color: transparent !important;
}

.forge-glass-surface--details {
  background: rgba(8, 12, 18, 0.7);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.6),
    0 0 2px rgba(255, 165, 40, 0.45),
    0 0 20px rgba(255, 140, 30, 0.12);
}

/* Inner cards within glass surfaces — token-driven sub-surface treatment */
.forge-glass-surface .wb-card,
.forge-glass-surface .forge-system-card,
.forge-glass-surface .wb-dock-card {
  background: var(--ws-card-bg);
  border: var(--ws-card-border);
  border-radius: var(--ws-glass-radius-inner);
  box-shadow: var(--ws-card-shadow);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* =====================================================================
   GLASS SURFACE v003 REFINEMENT BLOCK (2026-05-21)
   Pipeline: workbench-visual-system-normalization-2026-05-21
   DCLA: L34 Workbench Surface + L14 Meta-System

   Token-driven refinement that consumes the canonical :root var(--ws-*)
   tokens. All glass surfaces (top hero band, left command spine, Build
   modal / surface panels, details sheet, bottom evidence strip, Pepper
   dock, Pepper Workspace / chat) compose from the same primitives so
   the entire visual system rebrands by editing :root only.

   This block lives at the end of globals.css and wins via cascade
   order + specificity. ComfyUI replacement of the 9-slice asset
   remains the long-term path; tokens drive composition around it.
   ===================================================================== */

/* --- 1. Bottom evidence strip — fix tall-title layout bug --- */
/* v3.6 set `flex: 0 0 200px` on the title, which in column flex becomes
   200px HEIGHT, pushing cells past viewport. Restore auto height so
   cells render directly under a compact title within the glass panel. */
.wbv-shell .workbench-bottom-evidence-strip {
  height: auto !important;
  min-height: auto !important;
  max-height: 200px !important;
  padding: 12px 18px !important;
  gap: 8px !important;
  display: flex !important;
  flex-direction: column !important;
}
.wbv-shell .workbench-bottom-evidence-strip__title {
  flex: 0 0 auto !important;
  padding: 4px 8px !important;
  background: transparent !important;
  border: none !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 12px !important;
}
.wbv-shell .workbench-bottom-evidence-strip__title > span {
  font-size: 9px !important;
  color: var(--wbv36-warm, rgba(255, 165, 65, 0.85)) !important;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.wbv-shell .workbench-bottom-evidence-strip__title strong {
  font-size: 13px !important;
  margin: 0 !important;
  color: rgba(247, 249, 242, 0.98) !important;
}
.wbv-shell .workbench-bottom-evidence-strip__items {
  flex: 1 1 auto !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
  gap: 8px !important;
  padding: 0 !important;
}
.wbv-shell .workbench-bottom-evidence-strip__cell {
  min-height: 52px;
  padding: 6px 10px !important;
  background: rgba(10, 14, 18, 0.55) !important;
  border: 1px solid rgba(255, 165, 40, 0.10) !important;
  border-radius: 5px !important;
  box-shadow: none !important;
}

/* --- 2. Spine — remove stacked-orange-line doubling --- */
/* Each .forge-spine-group had border-top + border-bottom both in orange,
   producing 2px doubled lines per separator. Use only border-bottom and
   exclude the last child so the molten border-image of the spine handles
   the outer edge. */
.wbv-shell .forge-glass-surface--spine .forge-spine-group,
.wbv-shell .workbench-os-spine .forge-spine-group {
  border-top: none !important;
  border-bottom: 1px solid rgba(255, 143, 58, 0.18) !important;
  background: transparent !important;
}
.wbv-shell .forge-glass-surface--spine .forge-spine-group:last-child,
.wbv-shell .workbench-os-spine .forge-spine-group:last-child {
  border-bottom: none !important;
}
.wbv-shell .forge-glass-surface--spine .forge-spine-group::before,
.wbv-shell .workbench-os-spine .forge-spine-group::before {
  display: none !important;
}
.wbv-shell .forge-glass-surface--spine .workbench-os-spine__header,
.wbv-shell .workbench-os-spine .workbench-os-spine__header {
  border-top: none !important;
  border-bottom: 1px solid rgba(255, 143, 58, 0.22) !important;
  background: transparent !important;
}
.wbv-shell .forge-glass-surface--spine .workbench-os-spine__header::before,
.wbv-shell .workbench-os-spine .workbench-os-spine__header::before {
  display: none !important;
}
.wbv-shell .forge-glass-surface--spine .workbench-os-spine__footer,
.wbv-shell .workbench-os-spine .workbench-os-spine__footer {
  border-top: 1px dashed rgba(255, 143, 58, 0.12) !important;
}
/* Child rows inside expanded group — no individual borders */
.wbv-shell .forge-glass-surface--spine .forge-spine-child {
  border: none !important;
  background: transparent !important;
  padding-left: 14px !important;
}
.wbv-shell .forge-glass-surface--spine .forge-spine-child:hover {
  background: rgba(255, 165, 65, 0.06) !important;
}

/* --- 3. Neutralize old surface backgrounds inside glass-wrapped panels --- */
/* The glass surface base already provides background, backdrop-filter, and
   border-image. Surface-specific blocks at v3.0/v3.3/v3.6 set conflicting
   `background` + `border` that flatten the glass effect. Reset them via tokens. */
.wbv-shell .forge-glass-surface.workbench-pepper-dock,
.wbv-shell .forge-glass-surface.workbench-os-spine,
.wbv-shell .forge-glass-surface.workbench-top-hero-band,
.wbv-shell .forge-glass-surface.workbench-bottom-evidence-strip,
.wbv-shell .forge-glass-surface.workbench-details-sheet,
.wbv-shell .forge-glass-surface.workbench-pepper-workspace {
  background: var(--ws-glass-bg) !important;
  backdrop-filter: blur(var(--ws-glass-blur)) saturate(var(--ws-glass-saturate)) !important;
  -webkit-backdrop-filter: blur(var(--ws-glass-blur)) saturate(var(--ws-glass-saturate)) !important;
  box-shadow: var(--ws-surface-shadow) !important;
}

/* --- 4. Top hero band — compact band feel, status tiles --- */
.wbv-shell .forge-glass-surface.workbench-top-hero-band {
  min-height: 56px !important;
  padding: 8px 18px !important;
  gap: 10px !important;
}
.wbv-shell .forge-glass-surface.workbench-top-hero-band::before {
  display: none !important;
}
.wbv-shell .forge-glass-surface.workbench-top-hero-band .workbench-status-pill {
  min-height: 36px;
  padding: 4px 10px !important;
  background: rgba(15, 20, 28, 0.55) !important;
  border: 1px solid rgba(255, 165, 65, 0.16) !important;
  border-radius: 6px !important;
  box-shadow: inset 0 1px 0 rgba(255, 200, 130, 0.06) !important;
}

/* --- 5+6. Overlay layers REMOVED (2026-05-21 canonical-recipe pass) --- */
/* The smoke / edge / corner divs produced "huge blurry gray/white corner
   blooms" via mix-blend-mode:screen. The component no longer renders
   them; this rule is a belt-and-suspenders guard against any legacy
   markup that still emits them. */
.forge-glass-surface__smoke,
.forge-glass-surface__edge-left,
.forge-glass-surface__edge-right,
.forge-glass-surface__edge-top,
.forge-glass-surface__edge-bottom,
.forge-glass-surface__corner-tl,
.forge-glass-surface__corner-tr,
.forge-glass-surface__corner-bl,
.forge-glass-surface__corner-br {
  display: none !important;
}

/* --- 7. Canonical molten border (clean 1px + warm glow, NOT border-image) --- */
.wbv-shell .forge-glass-surface {
  border: var(--ws-border) !important;
  box-shadow: var(--ws-surface-shadow) !important;
  /* Override any legacy border-image leftover from earlier passes */
  -o-border-image: none !important;
     border-image: none !important;
}

/* --- 8. Details sheet — center between spine and dock --- */
/* v3.6 positions via left:264px + right:332px, but an earlier block
   applies translateX(-50%) for legacy left:50% centering. The transform
   still applies and shifts the panel off-screen. Override to use the
   v3.6 positioning without legacy transform. */
.wbv-shell .workbench-panel-shell .forge-glass-surface.workbench-details-sheet {
  transform: translateY(22px) !important;
}
.wbv-shell .workbench-panel-shell .forge-glass-surface.workbench-details-sheet.is-open {
  transform: translateY(0) !important;
  z-index: 24;
}

/* --- 9. Surface panels (Build modal, etc.) — operator's reference target --- */
/* The .forge-surface-panel IS the canonical visual; the rest of the
   shell now matches it. Recipe: dark translucent fill + restrained
   blur + 1px molten border + strong warm outer glow + inset top
   highlight. */
.wbv-shell .forge-surface-panel {
  position: relative !important;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--ws-glass-radius) !important;
  background: var(--ws-glass-bg-strong) !important;
  backdrop-filter: blur(var(--ws-glass-blur)) saturate(var(--ws-glass-saturate)) !important;
  -webkit-backdrop-filter: blur(var(--ws-glass-blur)) saturate(var(--ws-glass-saturate)) !important;
  border: var(--ws-border) !important;
  box-shadow: var(--ws-surface-shadow-strong) !important;
  -o-border-image: none !important;
     border-image: none !important;
}
.wbv-shell .forge-surface-panel__head {
  border-bottom: 1px solid var(--ws-molten-divider) !important;
}

/* --- 10. Pepper Workspace + chat — broader surface treatment --- */
.wbv-shell .forge-glass-surface.workbench-pepper-workspace {
  padding: 8px 10px !important;
  min-height: calc(100vh - 200px);
}
/* v007.30 Chat + rail outer borders — operator: warm rim + glow
   restored to match outer workspace chrome. Background stays neutral
   (operator approved). Only rim + glow get warm. */
.wbv-shell .forge-glass-surface.workbench-pepper-workspace .workbench-pepper-chat,
.wbv-shell .forge-glass-surface.workbench-pepper-workspace .workbench-director-rail {
  background: linear-gradient(180deg, rgba(28, 30, 36, 0.55) 0%, rgba(14, 16, 22, 0.68) 100%) !important;
  border: 1.5px solid rgba(255, 178, 90, 0.55) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.14),
    0 0 14px rgba(255, 140, 50, 0.18),
    0 8px 22px rgba(0, 0, 0, 0.42) !important;
  backdrop-filter: blur(12px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(125%) !important;
}

/* --- 11. Surface-variant additions: workspace + surface --- */
.forge-glass-surface--workspace {
  background: var(--ws-glass-bg-strong);
}
.forge-glass-surface--surface {
  background: var(--ws-glass-bg-strong);
  box-shadow: var(--ws-surface-shadow-strong);
}

/* --- 12. Status pills — consistent glass tile treatment across all bands --- */
.wbv-shell .forge-glass-surface .workbench-status-pill {
  background: var(--ws-card-bg) !important;
  border: 1px solid var(--ws-molten-rim) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  box-shadow: var(--ws-card-shadow) !important;
}

/* --- 13. Buttons / chips inside glass surfaces — token-driven crisp look --- */
.wbv-shell .forge-glass-surface button:not(.workbench-details-sheet__close):not(.forge-spine-group button):not(.dc-pill-action) {
  background: var(--ws-card-bg);
  border: 1px solid var(--ws-molten-rim);
  border-radius: var(--ws-glass-radius-inner);
  box-shadow: var(--ws-card-shadow);
  color: rgba(247, 249, 242, 0.96);
  transition: border-color 160ms ease, background 160ms ease, transform 120ms ease;
}
.wbv-shell .forge-glass-surface button:not(.workbench-details-sheet__close):not(.forge-spine-group button):not(.dc-pill-action):hover {
  border-color: var(--ws-molten-warm);
  background: rgba(255, 165, 65, 0.08);
}

/* --- 14. Corner/edge artifact cleanup — kill rogue ::before / ::after --- */
/* Several legacy CSS blocks add pseudo-elements (accent lines, drawer
   anchors, decorative gradients) that escape the panel's overflow:hidden
   and produce misaligned trim. Disable any pseudo-elements directly on
   glass-wrapped surfaces. Inner content can still use pseudos freely. */
.wbv-shell .forge-glass-surface.workbench-bottom-evidence-strip::before,
.wbv-shell .forge-glass-surface.workbench-bottom-evidence-strip::after,
.wbv-shell .forge-glass-surface.workbench-top-hero-band::before,
.wbv-shell .forge-glass-surface.workbench-top-hero-band::after,
.wbv-shell .forge-glass-surface.workbench-os-spine::before,
.wbv-shell .forge-glass-surface.workbench-os-spine::after,
.wbv-shell .forge-glass-surface.workbench-pepper-dock::before,
.wbv-shell .forge-glass-surface.workbench-pepper-dock::after,
.wbv-shell .forge-glass-surface.workbench-details-sheet::before,
.wbv-shell .forge-glass-surface.workbench-details-sheet::after,
.wbv-shell .forge-glass-surface.workbench-pepper-workspace::before,
.wbv-shell .forge-glass-surface.workbench-pepper-workspace::after,
.wbv-shell .forge-surface-panel::before,
.wbv-shell .forge-surface-panel::after {
  display: none !important;
}

/* --- 15. Ensure overflow: hidden so edge/corner layers stay in-bounds --- */
.wbv-shell .forge-glass-surface,
.wbv-shell .forge-surface-panel {
  overflow: hidden !important;
}
/* Exception: details sheet may need to scroll its content internally;
   give it a clipped wrapper with inner scroll for content overflow. */
.wbv-shell .forge-glass-surface.workbench-details-sheet {
  overflow: auto !important;
}

/* --- 16. Background-image surfaces — remove competing PNG backgrounds --- */
/* Legacy panel-mockup uses background-image PNGs on some surfaces. Inside
   a glass-wrapped surface that already provides background + border-image,
   those PNGs read as "old pasted card" art. Remove on glass-wrapped only. */
.wbv-shell .forge-glass-surface .panel-mockup-detail-panel,
.wbv-shell .forge-glass-surface .workbench-focus-lens {
  background-image: none !important;
}

/* =====================================================================
   GLASS SURFACE v004 REFINEMENT BLOCK (2026-05-21)
   Pipeline: workbench-shell-glass-refine-v2-2026-05-21
   DCLA: L34 Workbench Surface + L14 Meta-System

   Goal: make the WHOLE workbench feel like the right-dock "Current
   Governed Task" card and Build modal — readable dark glass, thicker
   *designed* molten rim (NOT a thin flat orange line), clean orange
   glow, soft inner highlight, contained rounded corners. Background
   stays visible through glass. No new layers, no overlays, no border-
   image, no gray/white corner blooms.

   Strategy: keep the canonical CSS recipe. Strengthen tokens. Promote
   all shell glass surfaces (spine, dock, hero, bottombar, workspace,
   details) to the *strong* recipe Build modal already uses. Lift inner
   card recipe to match the governed-task card. Integrate Details
   button into bottom rail. Fix top-bar + dock clipping. Header parity.
   ===================================================================== */

/* --- v004.1 Token re-tune — thicker rim feel without thicker border ---
   The "designed molten rim" look is delivered by a stack of inset +
   outer warm shadows around a 1px solid border, NOT by widening the
   border. Widening would clip text on small inner cards. We layer:
     - inner warm rim shadow (creates rim thickness illusion)
     - inner top bevel highlight (subtle)
     - outer warm halo (2px tight)
     - outer warm glow (broad, soft)
     - outer drop lift
   No mix-blend modes; standard rgba alpha. */
:root {
  /* Stronger molten palette — keeps hue, raises presence */
  --ws-molten-rim: rgba(255, 165, 65, 0.48);
  --ws-molten-rim-strong: rgba(255, 178, 90, 0.72);
  --ws-molten-warm: rgba(255, 178, 90, 0.92);
  --ws-molten-divider: rgba(255, 150, 60, 0.26);
  --ws-molten-divider-faint: rgba(255, 150, 60, 0.14);

  /* Inset rim shadow stack (creates "thicker designed rim" appearance
     while keeping the border at 1px so text/layout do not shift) */
  --ws-rim-inset:
    inset 0 0 0 1px rgba(255, 178, 90, 0.20),
    inset 0 1px 0 rgba(255, 210, 150, 0.14),
    inset 0 -1px 0 rgba(255, 120, 30, 0.10);
  --ws-rim-inset-strong:
    inset 0 0 0 1px rgba(255, 178, 90, 0.32),
    inset 0 1px 0 rgba(255, 220, 160, 0.20),
    inset 0 -1px 0 rgba(255, 120, 30, 0.16),
    inset 0 0 14px rgba(255, 140, 50, 0.06);

  /* Outer molten halo — short 2-3px warm ring just outside the border;
     reads as glow continuity instead of "thin flat orange line". */
  --ws-rim-halo: 0 0 0 1px rgba(255, 165, 65, 0.18), 0 0 8px rgba(255, 140, 50, 0.18);
  --ws-rim-halo-strong: 0 0 0 1px rgba(255, 178, 90, 0.28), 0 0 12px rgba(255, 140, 50, 0.26);

  /* Composite recipes — replace v003 surface shadows */
  --ws-surface-shadow:
    var(--ws-rim-halo),
    var(--ws-rim-inset),
    var(--ws-shadow-glow),
    var(--ws-shadow-lift);
  --ws-surface-shadow-strong:
    var(--ws-rim-halo-strong),
    var(--ws-rim-inset-strong),
    var(--ws-shadow-glow-strong),
    var(--ws-shadow-lift-strong);

  /* Inner card recipe matching the "Current Governed Task" look:
     darker fill, warm rim, subtle inset top + outer tight halo. */
  --ws-card-bg: rgba(10, 14, 20, 0.72);
  --ws-card-bg-strong: rgba(8, 12, 18, 0.82);
  --ws-card-border: 1px solid rgba(255, 165, 65, 0.28);
  --ws-card-shadow:
    inset 0 1px 0 rgba(255, 215, 160, 0.10),
    inset 0 0 0 1px rgba(255, 165, 65, 0.10),
    0 0 0 1px rgba(255, 140, 50, 0.06),
    0 6px 18px rgba(0, 0, 0, 0.42);
  --ws-card-shadow-governed:
    inset 0 1px 0 rgba(255, 220, 160, 0.18),
    inset 0 0 0 1px rgba(255, 178, 90, 0.20),
    0 0 0 1px rgba(255, 165, 65, 0.24),
    0 0 14px rgba(255, 140, 50, 0.20),
    0 6px 18px rgba(0, 0, 0, 0.5);

  /* Border stays 1px — illusion comes from the shadow stack */
  --ws-border: 1px solid var(--ws-molten-rim);
  --ws-border-strong: 1px solid var(--ws-molten-rim-strong);
}

/* --- v004.2 Promote all shell glass surfaces to the strong recipe ---
   Build modal (.forge-surface-panel) already used the strong recipe and
   read as the operator target. Lift everything else to match. Each
   surface keeps a slightly different background-fill weight so the
   visual hierarchy reads (spine + dock = quietest base, hero +
   bottombar = compact bands, modal/details = primary focus). */
.wbv-shell .forge-glass-surface {
  background: var(--ws-glass-bg-strong) !important;
  border: var(--ws-border) !important;
  box-shadow: var(--ws-surface-shadow-strong) !important;
  -o-border-image: none !important;
     border-image: none !important;
}

/* Modal/details/workspace get the most prominent recipe */
.wbv-shell .forge-surface-panel,
.wbv-shell .forge-glass-surface.workbench-details-sheet,
.wbv-shell .forge-glass-surface.workbench-pepper-workspace,
.wbv-shell .forge-glass-surface--workspace,
.wbv-shell .forge-glass-surface--surface,
.wbv-shell .forge-glass-surface--details {
  background: var(--ws-glass-bg-strong) !important;
  border: var(--ws-border-strong) !important;
  box-shadow: var(--ws-surface-shadow-strong) !important;
  -o-border-image: none !important;
     border-image: none !important;
}

/* --- v004.3 Inner cards — adopt governed-task card recipe everywhere ---
   The right-dock "Current Governed Task" card is the visual ceiling.
   Lift every inner card / dock card / system card / bottom cell to the
   same recipe so the eye sees one consistent component, not "some are
   alive and some are dead". */
.wbv-shell .forge-glass-surface .wb-card,
.wbv-shell .forge-glass-surface .wb-dock-card,
.wbv-shell .forge-glass-surface .forge-system-card,
.wbv-shell .forge-glass-surface .workbench-pepper-dock__chat-card,
.wbv-shell .forge-glass-surface .workbench-pepper-dock__compact-card,
.wbv-shell .forge-glass-surface .workbench-pepper-dock__compact-card--governed-task,
.wbv-shell .forge-glass-surface .workbench-bottom-evidence-strip__cell,
.wbv-shell .forge-glass-surface .workbench-status-pill {
  background: var(--ws-card-bg) !important;
  border: 1px solid rgba(255, 165, 65, 0.22) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  box-shadow: var(--ws-card-shadow) !important;
}

/* Governed-task card gets the brightest rim/halo — it's the primary
   focal point of the dock. */
.wbv-shell .forge-glass-surface .workbench-pepper-dock__compact-card--governed-task,
.wbv-shell .forge-glass-surface .wb-card[data-highlight="governed"],
.wbv-shell .forge-glass-surface .wb-dock-card[data-highlight="governed"],
.wbv-shell .forge-glass-surface .wb-card[data-highlight="primary"],
.wbv-shell .forge-glass-surface .wb-dock-card[data-highlight="primary"] {
  background: var(--ws-card-bg-strong) !important;
  border: 1px solid var(--ws-molten-rim-strong) !important;
  box-shadow: var(--ws-card-shadow-governed) !important;
}

/* --- v004.4 Spine header ↔ Pepper-dock header parity ---
   Operator: left Command Spine header should visually match the right
   "Workbench Dock" header but with slightly thicker molten borders.
   Both headers now share a shared band recipe; spine header gets a
   thicker rim accent. */
.wbv-shell .workbench-pepper-dock__header,
.wbv-shell .workbench-os-spine__header,
.wbv-shell .forge-spine__header {
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  background: linear-gradient(180deg, rgba(20, 14, 8, 0.55) 0%, rgba(10, 8, 6, 0.42) 100%) !important;
  border-radius: var(--ws-glass-radius-inner) var(--ws-glass-radius-inner) 0 0 !important;
  border-bottom: 1px solid var(--ws-molten-divider) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 215, 160, 0.12),
    inset 0 -1px 0 rgba(255, 130, 40, 0.18) !important;
  margin-bottom: 10px !important;
}
/* Spine header — slightly thicker molten accent per operator note */
.wbv-shell .workbench-os-spine__header,
.wbv-shell .forge-spine__header {
  border-bottom: 1px solid var(--ws-molten-rim-strong) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.16),
    inset 0 -1px 0 rgba(255, 130, 40, 0.32) !important;
}
.wbv-shell .workbench-pepper-dock__header span,
.wbv-shell .workbench-os-spine__header span,
.wbv-shell .forge-spine__header span {
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ws-molten-warm) !important;
}
.wbv-shell .workbench-pepper-dock__header strong,
.wbv-shell .workbench-os-spine__header strong,
.wbv-shell .forge-spine__header strong {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: rgba(247, 249, 242, 0.98) !important;
  letter-spacing: 0.02em !important;
}

/* --- v004.5 Top hero band — fix spacing + clipping ---
   Baseline screenshot showed "DENT" / "COLLAPSED" cut off on right.
   Give the band breathing room, allow flex-wrap inside the band, and
   make sure right padding clears the dock edge. */
.wbv-shell .forge-glass-surface.workbench-top-hero-band {
  min-height: 56px !important;
  padding: 8px 22px !important;
  gap: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
}
.wbv-shell .workbench-top-hero-band__row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
}
.wbv-shell .workbench-top-hero-band__chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.wbv-shell .workbench-top-hero-band__work {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* --- v004.6 Pepper dock — fix width clipping ---
   Right edge of the dock was clipping against viewport. Pull the dock
   in from the right edge by a tighter margin and ensure padding doesn't
   double-count the border-radius. */
.wbv-shell .forge-glass-surface.workbench-pepper-dock {
  padding: 12px 14px !important;
  overflow: hidden !important;
}
/* G-PC1: dock header — match Command Spine exactly.
   Flex row (label + title on same line), transparent background,
   flush padding. Overrides v3.3/v3.6/v3.7 at 13549/14941/16022/16981. */
.wbv-shell .workbench-pepper-dock .workbench-pepper-dock__header {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  background: transparent !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid rgba(255, 143, 58, 0.22) !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 14px 16px 12px !important;
  border-radius: 0 !important;
}
/* G-PC1: Ask Pepper title — molten amber with subtle glow.
   Beats v3.6 wbv36-fg-faint at line 16123. */
.wbv-shell .workbench-pepper-dock__chat-card--expanded .workbench-pepper-dock__compact-title > span:first-child {
  color: rgba(255, 200, 130, 0.88) !important;
  text-shadow: 0 0 3px rgba(255, 140, 50, 0.14), 0 0 1px rgba(255, 180, 90, 0.20) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
}
/* G-PC1: dock prompt textarea — black fill, not grey */
.wbv-shell .workbench-pepper-dock .pepper-dock-suite__input {
  background: rgba(5, 8, 9, 0.92) !important;
  border: 1px solid rgba(255, 178, 90, 0.30) !important;
}
.wbv-shell .forge-glass-surface.workbench-pepper-dock .workbench-pepper-dock__compact-stack {
  padding-right: 0 !important;  /* G-PC1: edge-to-edge — overrides v004.6 2px */
  padding-left: 0 !important;   /* G-PC1: edge-to-edge */
  margin-left: -14px !important;
  margin-right: -14px !important;
}
/* G-PC1: dock context-row chips — match top/bottom panel amber chip treatment */
.wbv-shell .workbench-pepper-dock .workbench-pepper-dock__context-row > div {
  background: rgba(8, 12, 18, 0.80) !important;
  border: 1px solid rgba(255, 178, 90, 0.62) !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  box-shadow:
    rgba(255, 220, 165, 0.18) 0px 1px 0px 0px inset,
    rgba(255, 178, 90, 0.20) 0px 0px 0px 1px inset,
    rgba(0, 0, 0, 0.30) 0px 2px 6px !important;
}
.wbv-shell .workbench-pepper-dock .workbench-pepper-dock__context-row > div > span {
  color: rgba(255, 200, 130, 0.96) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase;
}
.wbv-shell .workbench-pepper-dock .workbench-pepper-dock__context-row > div > strong {
  color: rgba(247, 249, 242, 0.98) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

/* --- v004.7 Bottom evidence strip — alignment + rim parity ---
   Cells already get the v004.3 governed-card recipe via the selector
   chain. Tighten alignment so cells line up flush under the title and
   the rail bottom-edge sits cleanly above the integrated Details
   control (added in v004.8). */
.wbv-shell .workbench-bottom-evidence-strip {
  padding: 12px 18px 14px !important;
  gap: 10px !important;
  overflow: visible !important;
}
.wbv-shell .workbench-bottom-evidence-strip__items {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 8px !important;
}
.wbv-shell .workbench-bottom-evidence-strip__cell {
  padding: 8px 12px !important;
  min-height: 56px !important;
  background: var(--ws-card-bg) !important;
  border: 1px solid rgba(255, 165, 65, 0.22) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  box-shadow: var(--ws-card-shadow) !important;
}

/* --- v004.8 Details button — integrate into bottom rail control strip ---
   Was: absolutely positioned top:-30px, translateX(-50%) — floated above
   the rail with rounded-top-only corners, reading as a detached cheap
   tab. Now: absolute-positioned INSIDE the bottom evidence rail at its
   top-right corner, so it sits flush with the rail header — reads as
   "GOVERNED TASK ... [Details] control" not a floating tab. Same molten
   glass button recipe as other primary buttons. */
/* Parent .workbench-panel-shell__bottom is already position:absolute (at
   bottom:1.5%), so it acts as the positioning ancestor for the absolute
   Details button below — no override of its position is needed. Keep
   overflow visible so the rim halo on inner cards isn't clipped. */
.wbv-shell .workbench-panel-shell__bottom {
  overflow: visible !important;
}
.wbv-shell .panel-mockup-detail-tab {
  position: absolute !important;
  top: 10px !important;
  right: 18px !important;
  left: auto !important;
  transform: none !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 116px !important;
  height: 28px !important;
  padding: 0 14px !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  border: 1px solid var(--ws-molten-rim-strong) !important;
  background: var(--ws-card-bg-strong) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 160, 0.14),
    inset 0 0 0 1px rgba(255, 178, 90, 0.16),
    0 0 0 1px rgba(255, 165, 65, 0.16),
    0 0 10px rgba(255, 140, 50, 0.20),
    0 4px 12px rgba(0, 0, 0, 0.48) !important;
  color: rgba(247, 249, 242, 0.98) !important;
  font: 700 10px/1 inherit !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: border-color 160ms ease, box-shadow 200ms ease, background 160ms ease !important;
}
.wbv-shell .panel-mockup-detail-tab::before {
  display: none !important;
}
.wbv-shell .panel-mockup-detail-tab:hover,
.wbv-shell .panel-mockup-detail-tab[aria-expanded="true"] {
  border-color: var(--ws-molten-warm) !important;
  background: rgba(255, 165, 65, 0.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 180, 0.20),
    inset 0 0 0 1px rgba(255, 200, 110, 0.26),
    0 0 0 1px rgba(255, 178, 90, 0.32),
    0 0 16px rgba(255, 140, 50, 0.32),
    0 6px 16px rgba(0, 0, 0, 0.52) !important;
}
/* Reserve space at the right of the rail title so the button doesn't
   overlap the title text on narrow widths. */
.wbv-shell .workbench-bottom-evidence-strip__title {
  padding-right: 140px !important;
}

/* --- v004.9 Buttons / chips inside glass surfaces — token recipe ---
   The v003 button rule used --ws-card-bg / --ws-molten-rim directly.
   With v004 tokens those now produce the right "molten glass button"
   look. Also lift the chip recipe so status-pill bars share it. */
.wbv-shell .forge-glass-surface button:not(.workbench-details-sheet__close):not(.forge-spine-group button):not(.panel-mockup-detail-tab):not(.dc-pill-action) {
  background: var(--ws-card-bg) !important;
  border: 1px solid rgba(255, 165, 65, 0.24) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 215, 160, 0.10),
    0 0 0 1px rgba(255, 140, 50, 0.05),
    0 4px 12px rgba(0, 0, 0, 0.32) !important;
  color: rgba(247, 249, 242, 0.96) !important;
  transition: border-color 160ms ease, box-shadow 200ms ease, background 160ms ease !important;
}
.wbv-shell .forge-glass-surface button:not(.workbench-details-sheet__close):not(.forge-spine-group button):not(.panel-mockup-detail-tab):not(.dc-pill-action):hover {
  border-color: var(--ws-molten-warm) !important;
  background: rgba(255, 165, 65, 0.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 180, 0.18),
    0 0 0 1px rgba(255, 178, 90, 0.22),
    0 0 12px rgba(255, 140, 50, 0.22),
    0 6px 16px rgba(0, 0, 0, 0.46) !important;
}

/* --- v004.10 Spine groups — tighten + lift selected row ---
   Selected/current row reads as molten focus; non-selected rows stay
   quiet glass. v003 still left selected rows feeling weak. */
.wbv-shell .forge-glass-surface--spine .forge-spine-group__select[aria-current="true"],
.wbv-shell .workbench-os-spine .forge-spine-group__select[aria-current="true"],
.wbv-shell .forge-glass-surface--spine .forge-spine-group[data-selected="true"] .forge-spine-group__select,
.wbv-shell .workbench-os-spine .forge-spine-group[data-selected="true"] .forge-spine-group__select {
  background: rgba(255, 165, 65, 0.10) !important;
  border-color: var(--ws-molten-rim-strong) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 215, 160, 0.18),
    inset 0 0 0 1px rgba(255, 178, 90, 0.22),
    0 0 8px rgba(255, 140, 50, 0.16) !important;
}

/* --- v004.11 Edge-cleanup — make sure no legacy ::before ring escapes ---
   Some legacy blocks add a glow ring via ::before. Within the glass
   wrapper, kill them so the v004 recipe is the single source of rim. */
.wbv-shell .forge-glass-surface.workbench-pepper-dock::before,
.wbv-shell .forge-glass-surface.workbench-pepper-dock::after,
.wbv-shell .forge-glass-surface.workbench-os-spine::before,
.wbv-shell .forge-glass-surface.workbench-os-spine::after {
  display: none !important;
}

/* --- v004.12 Background view-through preserved ---
   Confirm none of the v004 backgrounds went opaque. Surfaces use alpha
   in the 0.78-0.88 range; the HiveMind scene still shows through at
   the panel edges and through the inset top highlight. */

/* =====================================================================
   GLASS SURFACE v005 REFINEMENT BLOCK (2026-05-22)
   Pipeline: workbench-shell-glass-refine-v3-2026-05-22
   DCLA: L34 Workbench Surface + L14 Meta-System

   Operator's 9 acceptance criteria:
     (1) Top header shorter, centered, no dock overlap
     (2) Dev/Edit collapsed = compact upper-right anchored control
     (3) Spine header matches dock header (thicker molten)
     (4) Parent spine selection PERSISTS when child selected (:has)
     (5) Status badges/buttons visually unified (molten theme)
     (6) Bottom rail cards = governed-task card style (already in v004)
     (7) Details button integrated into upper-right of rail (v004)
     (8) Expanded Pepper Workspace = same glass/molten system
     (9) Build modal slight border + edge highlight strengthen

   Plus layout fixes:
     - evidence strip clipped 60px below viewport — pull up
     - top hero shrink from 163px to ~80px ribbon
     - dev/edit menu shrink from 430px → ~140px compact

   No JSX changes — :has() handles parent-selection-persist via CSS.
   ===================================================================== */

/* --- v005.1 Top header → ribbon (operator: "shorter, calmer, ribbon") ---
   Also fix horizontal positioning: the absolute container `.workbench-
   panel-shell__top` sat at left:14.8% which made the band overlap the
   left spine (spine width grew). Pull the band's container in from
   both sides so it sits cleanly between spine and dock. */
.wbv-shell .workbench-panel-shell__top {
  /* v007.56d Top panel positioned at midpoint between spine/dock and
     bottom panel + max-height grown to fit BOTH chip rows without
     clipping (44px primary + 8px gap + 44px secondary + padding = ~120px). */
  left: 19% !important;
  right: 19% !important;
  width: auto !important;
  height: auto !important;
  max-height: 140px !important;
  top: 10px !important;
}
.wbv-shell .workbench-top-hero-band,
.wbv-shell .forge-glass-surface.workbench-top-hero-band {
  max-height: 140px !important;
  min-height: 130px !important;
  overflow: visible !important;
}
.wbv-shell .forge-glass-surface.workbench-top-hero-band {
  min-height: 0 !important;
  padding: 5px 14px 6px !important;
  gap: 4px !important;
  max-width: 100% !important;
}
.wbv-shell .forge-glass-surface.workbench-top-hero-band .workbench-top-hero-band__row {
  min-height: 26px !important;
  padding: 0 !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
}
.wbv-shell .forge-glass-surface.workbench-top-hero-band .workbench-top-hero-band__row::-webkit-scrollbar {
  display: none !important;
}
.wbv-shell .forge-glass-surface.workbench-top-hero-band .workbench-top-hero-band__row--identity {
  flex-wrap: nowrap !important;
  align-items: center !important;
}
.wbv-shell .forge-glass-surface.workbench-top-hero-band .workbench-top-hero-band__os-label {
  font-size: 9px !important;
  letter-spacing: 0.16em !important;
  color: var(--ws-molten-warm) !important;
  text-transform: uppercase !important;
}
.wbv-shell .forge-glass-surface.workbench-top-hero-band .workbench-top-hero-band__os-value {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: rgba(247, 249, 242, 0.98) !important;
}
.wbv-shell .forge-glass-surface.workbench-top-hero-band .workbench-status-pill {
  min-height: 24px !important;
  min-width: 0 !important;
  padding: 2px 7px !important;
  font-size: 10px !important;
  flex-shrink: 0 !important;
}
.wbv-shell .forge-glass-surface.workbench-top-hero-band .workbench-status-pill span {
  font-size: 8px !important;
  letter-spacing: 0.12em !important;
}
.wbv-shell .forge-glass-surface.workbench-top-hero-band .workbench-status-pill strong {
  font-size: 11px !important;
  margin-top: 1px !important;
}

/* --- v005.2 Dev/Edit menu → compact upper-right anchored control ---
   Was: width min(430px, 34vw) overlaying the right Pepper dock.
   Now: 140px max-width, anchored above the dock top edge (top: 8px,
   right: 18px), reads as a single compact pill. When open, body
   expands below it as a molten dropdown. */
.wbv-shell .workbench-dev-edit-menu {
  /* v007.59 DEV/EDIT button right-aligned to the Pepper Dock's right
     edge. Operator 2026-05-23: "edge of dev/edit needs to be aligned
     to the edge of the right panel". Dock has right:28px from viewport
     edge, so DEV/EDIT matches.
     v007.59c overflow visible + max-width cleared so the flyout body
     positioned absolutely below isn't clipped by the parent. */
  position: absolute !important;
  top: 4px !important;
  right: 28px !important;
  z-index: 40 !important;
  width: auto !important;
  max-width: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
}
.wbv-shell .workbench-dev-edit-menu > button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  min-width: 132px !important;
  min-height: 24px !important;
  margin: 0 !important;
  padding: 2px 10px !important;
  border: 1px solid var(--ws-molten-rim-strong) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  background: var(--ws-card-bg-strong) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 160, 0.14),
    inset 0 0 0 1px rgba(255, 178, 90, 0.16),
    0 0 0 1px rgba(255, 165, 65, 0.16),
    0 0 10px rgba(255, 140, 50, 0.20),
    0 4px 12px rgba(0, 0, 0, 0.48) !important;
  color: rgba(247, 249, 242, 0.98) !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: border-color 160ms ease, box-shadow 200ms ease, background 160ms ease !important;
}
.wbv-shell .workbench-dev-edit-menu > button:hover,
.wbv-shell .workbench-dev-edit-menu > button[aria-expanded="true"] {
  border-color: var(--ws-molten-warm) !important;
  background: rgba(255, 165, 65, 0.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 180, 0.20),
    inset 0 0 0 1px rgba(255, 200, 110, 0.26),
    0 0 0 1px rgba(255, 178, 90, 0.32),
    0 0 16px rgba(255, 140, 50, 0.30),
    0 6px 16px rgba(0, 0, 0, 0.52) !important;
}
.wbv-shell .workbench-dev-edit-menu > button span {
  font-size: 8px !important;
  letter-spacing: 0.14em !important;
  color: var(--ws-molten-warm) !important;
  margin-bottom: 0 !important;
}
.wbv-shell .workbench-dev-edit-menu > button strong {
  font-size: 11px !important;
  margin: 0 !important;
  letter-spacing: 0.04em !important;
  color: rgba(247, 249, 242, 0.98) !important;
}
.wbv-shell .workbench-dev-edit-menu__body {
  /* v007.59b Flyout body anchored to RIGHT edge of parent, opening
     leftward so it stays on-screen. Operator 2026-05-23: "fly out
     window open in the wrong direction and off screen". */
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  margin-top: 6px !important;
  padding: 10px !important;
  border: 1px solid var(--ws-molten-rim) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  background: var(--ws-glass-bg-strong) !important;
  backdrop-filter: blur(var(--ws-glass-blur)) saturate(var(--ws-glass-saturate)) !important;
  -webkit-backdrop-filter: blur(var(--ws-glass-blur)) saturate(var(--ws-glass-saturate)) !important;
  box-shadow: var(--ws-surface-shadow-strong) !important;
  width: min(280px, 70vw) !important;
  z-index: 50 !important;
}

/* --- v005.3 Spine: parent-selection-glow PERSISTS during child selection ---
   Root-cause: `isSelected = bay.id === selectedBayId && selectedChildId === null`
   so JSX strips `data-selected` from parent when child engaged. Solved
   here in pure CSS via :has() — if any child inside the group is current,
   the parent header gets the molten focus glow. No JSX change needed. */
.wbv-shell .forge-glass-surface--spine .forge-spine-group:has(.forge-spine-child[aria-current="true"]) .forge-spine-group__select,
.wbv-shell .workbench-os-spine .forge-spine-group:has(.forge-spine-child[aria-current="true"]) .forge-spine-group__select {
  background: rgba(255, 165, 65, 0.10) !important;
  border: 1px solid var(--ws-molten-rim-strong) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 215, 160, 0.18),
    inset 0 0 0 1px rgba(255, 178, 90, 0.22),
    0 0 8px rgba(255, 140, 50, 0.16) !important;
}
/* Selected child row gets a coherent rounded molten-glass selection
   surface (operator: "one coherent rounded molten-glass selection",
   not stacked orange lines). */
.wbv-shell .forge-glass-surface--spine .forge-spine-child[aria-current="true"],
.wbv-shell .workbench-os-spine .forge-spine-child[aria-current="true"] {
  background: rgba(255, 165, 65, 0.14) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  border: 1px solid var(--ws-molten-rim-strong) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 160, 0.20),
    inset 0 0 0 1px rgba(255, 178, 90, 0.20),
    0 0 6px rgba(255, 140, 50, 0.18) !important;
  margin: 2px 4px !important;
}

/* --- v005.4 Spine submenu indentation + spacing (intentional) --- */
.wbv-shell .forge-glass-surface--spine .forge-spine-group__children,
.wbv-shell .workbench-os-spine .forge-spine-group__children {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding: 4px 6px 6px 10px !important;
  margin-top: 4px !important;
  border-left: 1px solid var(--ws-molten-divider-faint) !important;
  margin-left: 8px !important;
}

/* --- v005.5 Status chips (.forge-chip) — uniform molten recipe ---
   Operator: "Buttons/chips such as ACTIVE, NEEDS-BUILD, MANUAL,
   READ-ONLY must be uniform with the molten theme." Keep each status's
   hue cue (data-status drives accent color) but use a shared dark-glass
   pill chassis so they read as ONE family. */
.wbv-shell .forge-chip {
  display: inline-flex !important;
  align-items: center !important;
  height: 18px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  background: rgba(8, 12, 18, 0.75) !important;
  border: 1px solid rgba(255, 165, 65, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 215, 160, 0.10),
    0 0 0 1px rgba(255, 140, 50, 0.04) !important;
  font-size: 8.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: rgba(247, 249, 242, 0.95) !important;
}
.wbv-shell .forge-chip--xs { height: 16px !important; padding: 0 6px !important; font-size: 8px !important; }
/* Status-color accents: keep the per-status hue as a left-accent dot
   instead of border-color, so all chips share the same chassis. */
.wbv-shell .forge-chip[data-status]::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 4px currentColor;
}
.wbv-shell .forge-chip[data-status="active"]::before { background: #84e08c; box-shadow: 0 0 4px #84e08c; }
.wbv-shell .forge-chip[data-status="needs-build"]::before { background: #66c6e8; box-shadow: 0 0 4px #66c6e8; }
.wbv-shell .forge-chip[data-status="needs-wiring"]::before { background: #b39df7; box-shadow: 0 0 4px #b39df7; }
.wbv-shell .forge-chip[data-status="needs-setup"]::before { background: #f0c560; box-shadow: 0 0 4px #f0c560; }
.wbv-shell .forge-chip[data-status="needs-evidence"]::before { background: #f0a460; box-shadow: 0 0 4px #f0a460; }
.wbv-shell .forge-chip[data-status="manual"]::before { background: #e8d8a0; box-shadow: 0 0 4px #e8d8a0; }
.wbv-shell .forge-chip[data-status="read-only"]::before { background: #b2d0bc; box-shadow: 0 0 4px #b2d0bc; }
.wbv-shell .forge-chip[data-status="gated"]::before { background: #ff9c4d; box-shadow: 0 0 4px #ff9c4d; }
.wbv-shell .forge-chip[data-status="blocked"]::before { background: #e06870; box-shadow: 0 0 4px #e06870; }

/* --- v005.6 Bottom evidence rail: clipping fix ---
   Strip was extending ~60px below viewport. Pull it up by reducing the
   absolute-positioned bottom offset and trimming the max-height so the
   rail fits within the visible shell. */
.wbv-shell .workbench-panel-shell__bottom {
  bottom: 3% !important;
  height: auto !important;
  max-height: 20% !important;
}
.wbv-shell .workbench-bottom-evidence-strip {
  max-height: none !important;
}

/* --- v005.7 Pepper Workspace expanded — apply glass/molten primitives ---
   Operator: "must receive the same visual system, not remain mostly old
   CSS." Override the legacy .workbench-pepper-workspace__panel /
   __summary / __loop / __transcript / __dl / __preview-box / quick-start
   / lane chips / context-toggle / input box with the shared recipe. */
.wbv-shell .workbench-pepper-workspace__panel,
.wbv-shell .workbench-pepper-workspace__summary > div,
.wbv-shell .workbench-pepper-workspace__loop li,
.wbv-shell .workbench-pepper-workspace__transcript article,
.wbv-shell .workbench-pepper-workspace__dl div,
.wbv-shell .workbench-pepper-workspace__preview-box {
  background: var(--ws-card-bg) !important;
  border: 1px solid rgba(255, 165, 65, 0.22) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  box-shadow: var(--ws-card-shadow) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
.wbv-shell .workbench-pepper-workspace__panel--chat,
.wbv-shell .workbench-pepper-workspace__panel--director,
.wbv-shell .workbench-pepper-workspace__panel--governed-task {
  background: var(--ws-card-bg-strong) !important;
  border: 1px solid var(--ws-molten-rim-strong) !important;
  box-shadow: var(--ws-card-shadow-governed) !important;
}
/* Panel titles inside workspace — molten band header recipe */
.wbv-shell .workbench-pepper-workspace__panel-title {
  padding: 8px 12px !important;
  background: linear-gradient(180deg, rgba(20, 14, 8, 0.55) 0%, rgba(10, 8, 6, 0.42) 100%) !important;
  border-bottom: 1px solid var(--ws-molten-divider) !important;
  border-radius: var(--ws-glass-radius-inner) var(--ws-glass-radius-inner) 0 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 215, 160, 0.12),
    inset 0 -1px 0 rgba(255, 130, 40, 0.18) !important;
  margin-bottom: 8px !important;
}
.wbv-shell .workbench-pepper-workspace__panel-title span {
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  color: var(--ws-molten-warm) !important;
  text-transform: uppercase !important;
}
.wbv-shell .workbench-pepper-workspace__panel-title em {
  font-style: normal !important;
  font-size: 9px !important;
  letter-spacing: 0.10em !important;
  color: rgba(247, 249, 242, 0.85) !important;
  font-weight: 700 !important;
}
/* Workspace buttons (quick-start / lane / context-toggle / etc.) */
.wbv-shell .workbench-pepper-workspace button:not([data-variant="ghost"]):not(.dc-pill-action),
.wbv-shell .workbench-pepper-workspace__header button:not(.dc-pill-action),
.wbv-shell .workbench-pepper-workspace__panel button:not(.dc-pill-action) {
  background: var(--ws-card-bg) !important;
  border: 1px solid rgba(255, 165, 65, 0.28) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 215, 160, 0.10),
    0 0 0 1px rgba(255, 140, 50, 0.06),
    0 4px 12px rgba(0, 0, 0, 0.36) !important;
  color: rgba(247, 249, 242, 0.96) !important;
  font-weight: 700 !important;
  transition: border-color 160ms ease, box-shadow 200ms ease, background 160ms ease !important;
}
.wbv-shell .workbench-pepper-workspace button:not([data-variant="ghost"]):not(.dc-pill-action):hover,
.wbv-shell .workbench-pepper-workspace__header button:not(.dc-pill-action):hover,
.wbv-shell .workbench-pepper-workspace__panel button:not(.dc-pill-action):hover {
  border-color: var(--ws-molten-warm) !important;
  background: rgba(255, 165, 65, 0.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 180, 0.18),
    0 0 0 1px rgba(255, 178, 90, 0.24),
    0 0 12px rgba(255, 140, 50, 0.22),
    0 6px 14px rgba(0, 0, 0, 0.44) !important;
}
/* Workspace input box — molten glass input recipe */
.wbv-shell .workbench-pepper-workspace input,
.wbv-shell .workbench-pepper-workspace textarea,
.wbv-shell .workbench-pepper-workspace .workbench-pepper-workspace__field input,
.wbv-shell .workbench-pepper-workspace .workbench-pepper-workspace__field textarea {
  background: rgba(8, 11, 16, 0.72) !important;
  border: 1px solid rgba(255, 165, 65, 0.22) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 215, 160, 0.06),
    inset 0 0 0 1px rgba(255, 140, 50, 0.04) !important;
  color: rgba(247, 249, 242, 0.98) !important;
  padding: 8px 12px !important;
}
.wbv-shell .workbench-pepper-workspace input:focus,
.wbv-shell .workbench-pepper-workspace textarea:focus {
  outline: none !important;
  border-color: var(--ws-molten-warm) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 180, 0.10),
    0 0 0 1px rgba(255, 178, 90, 0.28),
    0 0 10px rgba(255, 140, 50, 0.22) !important;
}
/* Workspace summary cells already styled in v004; ensure consistency */
.wbv-shell .workbench-pepper-workspace__summary {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  gap: 8px !important;
}
.wbv-shell .workbench-pepper-workspace__summary > div {
  padding: 8px 12px !important;
}

/* --- v005.8 Build modal — slight border + edge highlight strengthen ---
   Operator: "Slightly strengthen the border and edge highlight." */
.wbv-shell .forge-surface-panel {
  border: 1px solid var(--ws-molten-rim-strong) !important;
  box-shadow:
    0 0 0 1px rgba(255, 178, 90, 0.32),
    0 0 14px rgba(255, 140, 50, 0.28),
    var(--ws-rim-inset-strong),
    var(--ws-shadow-glow-strong),
    var(--ws-shadow-lift-strong) !important;
}
.wbv-shell .forge-surface-panel__head {
  border-bottom: 1px solid var(--ws-molten-rim-strong) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.16),
    inset 0 -1px 0 rgba(255, 130, 40, 0.20) !important;
}

/* --- v005.9 Read-only safety guard: ensure no panel exceeds viewport ---
   Final defense against a child panel growing past its parent + clipping
   off-screen. overflow:hidden on glass surfaces already exists; this
   ensures the shell's outermost layout containers also clip. */
.wbv-shell .workbench-panel-shell {
  overflow: hidden !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
}

/* Pepper dock — push down 8px to fully clear the Dev/Edit pill anchored
   at the top-right (dev/edit ends at ~y=28; dock now starts at ~y=40).
   Also constrain bottom so it doesn't clip below viewport. */
.wbv-shell .workbench-pepper-dock,
.wbv-shell .forge-glass-surface.workbench-pepper-dock {
  top: 40px !important;
  bottom: 24px !important;
  height: auto !important;
}

/* --- v005.10 Spine "Back to Home" / footer cleanup ---
   Operator: "Back to home and footer line should not look like leftover
   CSS." Apply the unified molten glass button recipe to the footer
   control and tidy the surrounding divider. */
.wbv-shell .workbench-os-spine__footer {
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px dashed var(--ws-molten-divider-faint) !important;
}
.wbv-shell .workbench-os-spine__footer button,
.wbv-shell .workbench-os-spine__footer a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 28px !important;
  padding: 4px 10px !important;
  border: 1px solid var(--ws-molten-rim) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  background: var(--ws-card-bg) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 215, 160, 0.08),
    0 4px 10px rgba(0, 0, 0, 0.32) !important;
  color: rgba(247, 249, 242, 0.94) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

/* --- v005.11 Centering safeguard for the top hero band ---
   Header was visually off-center because chips spread asymmetrically.
   With max-width 82.5% (v005.1) the band itself sits between spine and
   dock; ensure inner content is left-edge anchored (status chips reading
   like a left-flowing telemetry strip) rather than visually centered,
   which read as "awkwardly spread" per operator. */
.wbv-shell .forge-glass-surface.workbench-top-hero-band {
  justify-content: flex-start !important;
  align-items: stretch !important;
}
.wbv-shell .forge-glass-surface.workbench-top-hero-band .workbench-top-hero-band__identity {
  /* v007.56k Identity logo centered (was baseline-aligned row). */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 4px !important;
  margin-right: 16px !important;
}

/* =====================================================================
   GLASS SURFACE v006 REFINEMENT BLOCK (2026-05-22)
   Pipeline: workbench-shell-glass-refine-v4-2026-05-22
   DCLA: L34 Workbench Surface + L14 Meta-System + L17 Visual Substrate

   Completion + drill-down propagation pass. Operator screenshot
   evidence proved that v005 only reached outer chrome; deep component
   class hierarchies inside drill-downs / war-room / projects / review
   / pepper-workspace inner widgets retained old CSS. This block
   propagates the molten primitive to ALL outlier consumer classes
   identified in the component inventory.

   Also lands:
     - Top ribbon: single-row 3-zone JSX (paired w/ component restructure)
     - Spine full-bay glow (not just header button) when child engaged
     - Spine submenu container surface recipe
     - Build interview step pill anchor inside the surface, not floating
     - Pepper Workspace deep widgets (director-rail / task-key-values /
       evidence-protocol-grid / proof-gates / warning chips)
     - War Room agent tiles (.war-room-tile)
     - Page-level drill-down surfaces (.hive-mind-page / .page-pipelines)
   ===================================================================== */

/* --- v006.1 Top ribbon: single-row 3-zone flex layout ---
   Paired with the JSX restructure to __zone--identity / __zone--center /
   __zone--right. Ribbon is one row of chips (~38px tall). The right
   zone scrolls horizontally if the chip set exceeds the available width;
   identity + center keep their content visible. */
.wbv-shell .forge-glass-surface.workbench-top-hero-band.workbench-top-hero-band--ribbon {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 38px !important;
  height: 40px !important;
  max-height: 40px !important;
  padding: 4px 14px !important;
  overflow: hidden !important;
}
/* Override v005 row rules that no longer match new JSX but cascade
   onto __zone--* children via inherited grid/column rules. */
.wbv-shell .workbench-top-hero-band--ribbon .workbench-top-hero-band__zone {
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}
.wbv-shell .workbench-top-hero-band--ribbon .workbench-top-hero-band__identity {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 6px !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
.wbv-shell .workbench-panel-shell__top {
  height: 48px !important;
  max-height: 48px !important;
}
.wbv-shell .workbench-top-hero-band__zone {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 30px !important;
  min-width: 0 !important;
}
.wbv-shell .workbench-top-hero-band__zone--identity {
  flex: 0 0 auto !important;
  justify-content: flex-start !important;
}
.wbv-shell .workbench-top-hero-band__zone--center {
  flex: 0 0 auto !important;
  justify-content: flex-start !important;
}
.wbv-shell .workbench-top-hero-band__zone--right {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  justify-content: flex-end !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.wbv-shell .workbench-top-hero-band__zone--right::-webkit-scrollbar {
  display: none !important;
}
/* Right-zone chips: still don't shrink (text clipping is ugly) but the
   zone itself horizontally scrolls when there are too many. */
.wbv-shell .workbench-top-hero-band__zone--right .workbench-status-pill {
  flex-shrink: 0 !important;
}
.wbv-shell .workbench-top-hero-band--ribbon .workbench-status-pill {
  min-height: 26px !important;
  min-width: 0 !important;
  padding: 2px 8px !important;
  flex-shrink: 0 !important;
}
.wbv-shell .workbench-top-hero-band--ribbon .workbench-status-pill span {
  font-size: 8px !important;
  letter-spacing: 0.10em !important;
  margin: 0 !important;
}
.wbv-shell .workbench-top-hero-band--ribbon .workbench-status-pill strong {
  font-size: 10.5px !important;
  margin: 1px 0 0 !important;
  letter-spacing: 0.02em !important;
}
.wbv-shell .workbench-top-hero-band--ribbon .workbench-top-hero-band__os-value {
  font-size: 13px !important;
  font-weight: 700 !important;
}
.wbv-shell .workbench-top-hero-band--ribbon .workbench-top-hero-band__os-label {
  font-size: 8px !important;
  letter-spacing: 0.14em !important;
}

/* --- v006.2 Spine FULL-bay glow (the whole bay-row card glows, not
       just the header button). Operator: "I like the full category
       orange glow." */
.wbv-shell .forge-glass-surface--spine .forge-spine-group:has(.forge-spine-child[aria-current="true"]),
.wbv-shell .workbench-os-spine .forge-spine-group:has(.forge-spine-child[aria-current="true"]),
.wbv-shell .forge-glass-surface--spine .forge-spine-group[data-selected="true"],
.wbv-shell .workbench-os-spine .forge-spine-group[data-selected="true"] {
  background: linear-gradient(180deg, rgba(255, 140, 50, 0.12) 0%, rgba(255, 100, 30, 0.06) 100%) !important;
  border: 1px solid var(--ws-molten-rim-strong) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.16),
    inset 0 0 0 1px rgba(255, 178, 90, 0.20),
    0 0 14px rgba(255, 140, 50, 0.20),
    0 6px 14px rgba(0, 0, 0, 0.42) !important;
  padding: 4px !important;
  margin: 4px 0 !important;
}
/* When the whole bay is in molten focus, inner header button drops its
   own border so we don't get stacked rims. */
.wbv-shell .forge-glass-surface--spine .forge-spine-group:has(.forge-spine-child[aria-current="true"]) .forge-spine-group__select,
.wbv-shell .workbench-os-spine .forge-spine-group:has(.forge-spine-child[aria-current="true"]) .forge-spine-group__select {
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* --- v006.3 Spine submenu container — readable glass surface, not
       a bare list. Submenus were previously cut off / not styled. */
.wbv-shell .forge-glass-surface--spine .forge-spine-group__children,
.wbv-shell .workbench-os-spine .forge-spine-group__children {
  background: rgba(8, 12, 18, 0.55) !important;
  border: 1px solid var(--ws-molten-divider) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  margin: 4px 0 0 0 !important;
  padding: 6px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 215, 160, 0.08),
    0 4px 10px rgba(0, 0, 0, 0.32) !important;
}
.wbv-shell .forge-glass-surface--spine .forge-spine-group__children .forge-spine-child,
.wbv-shell .workbench-os-spine .forge-spine-group__children .forge-spine-child {
  margin: 2px 0 !important;
}

/* --- v006.4 Drill-down page surfaces — apply molten primitive to
       page wrappers (.hive-mind-page / .page-* / .workbench-people-map
       / .workbench-build-flow / .workbench-surfaced-truth). These are
       what render inside .forge-surface-panel__body on Build/Projects/
       Review/War-Room drill-downs. */
.wbv-shell .forge-surface-panel__body .hive-mind-page,
.wbv-shell .forge-surface-panel__body .page-pipelines,
.wbv-shell .forge-surface-panel__body .page-mission-control,
.wbv-shell .forge-surface-panel__body .page-war-room,
.wbv-shell .forge-surface-panel__body .page-settings,
.wbv-shell .forge-surface-panel__body .page-skills,
.wbv-shell .forge-surface-panel__body .workbench-people-map,
.wbv-shell .forge-surface-panel__body .workbench-surfaced-truth {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.wbv-shell .forge-surface-panel__body .hive-mind-header,
.wbv-shell .forge-surface-panel__body .page-header {
  padding: 10px 14px !important;
  background: linear-gradient(180deg, rgba(20, 14, 8, 0.55) 0%, rgba(10, 8, 6, 0.42) 100%) !important;
  border: 1px solid var(--ws-molten-divider) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 215, 160, 0.12),
    inset 0 -1px 0 rgba(255, 130, 40, 0.18) !important;
  margin-bottom: 12px !important;
}

/* --- v006.5 War Room agent tiles — governed card recipe ---
   Operator: "Main / Comms / Content / Ops / Research cards must not
   remain dull plain cards." */
.wbv-shell .forge-surface-panel__body .war-room-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 10px !important;
}
.wbv-shell .forge-surface-panel__body .war-room-tile {
  background: var(--ws-card-bg) !important;
  border: 1px solid rgba(255, 165, 65, 0.28) !important;
  border-top-color: rgba(255, 165, 65, 0.5) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  box-shadow: var(--ws-card-shadow) !important;
  backdrop-filter: blur(6px) !important;
  padding: 12px !important;
}
.wbv-shell .forge-surface-panel__body .war-room-tile:hover {
  border-color: var(--ws-molten-warm) !important;
  box-shadow: var(--ws-card-shadow-governed) !important;
}
.wbv-shell .forge-surface-panel__body .war-room-head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 8px !important;
}
.wbv-shell .forge-surface-panel__body .war-room-name {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: rgba(247, 249, 242, 0.98) !important;
}
.wbv-shell .forge-surface-panel__body .war-room-role {
  font-size: 11px !important;
  color: rgba(247, 249, 242, 0.7) !important;
}
.wbv-shell .forge-surface-panel__body .war-room-body {
  padding-top: 8px !important;
  border-top: 1px dashed var(--ws-molten-divider-faint) !important;
}
.wbv-shell .forge-surface-panel__body .war-room-empty {
  font-size: 11px !important;
  color: rgba(247, 249, 242, 0.6) !important;
  font-style: italic !important;
}
.wbv-shell .forge-surface-panel__body .war-room-avatar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 215, 160, 0.18) !important;
  font-weight: 800 !important;
}

/* Pills inside war-room and other drill-downs (.pill / .pill-info /
   .pill-success / .pill-warning) — unify with the chip chassis. */
.wbv-shell .forge-surface-panel__body .pill,
.wbv-shell .workbench-pepper-workspace .pill {
  display: inline-flex !important;
  align-items: center !important;
  height: 18px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  background: rgba(8, 12, 18, 0.75) !important;
  border: 1px solid rgba(255, 165, 65, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 215, 160, 0.10),
    0 0 0 1px rgba(255, 140, 50, 0.04) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: rgba(247, 249, 242, 0.92) !important;
}

/* --- v006.6 Pepper Workspace deep widgets — operator screenshot showed
       these reverted toward plain cards. */
.wbv-shell .workbench-pepper-workspace .workbench-task-key-values,
.wbv-shell .workbench-pepper-workspace .workbench-evidence-protocol-grid,
.wbv-shell .workbench-pepper-workspace .workbench-proof-gates,
.wbv-shell .workbench-pepper-workspace .workbench-review-rubric,
.wbv-shell .workbench-pepper-workspace .workbench-evidence-proof-checklist,
.wbv-shell .workbench-pepper-workspace .workbench-manual-handoff-preview,
.wbv-shell .workbench-pepper-workspace .workbench-prompt-composition,
.wbv-shell .workbench-pepper-workspace .workbench-lifecycle-block,
.wbv-shell .workbench-pepper-workspace .workbench-evidence-return-protocol,
.wbv-shell .workbench-pepper-workspace .workbench-director-next-safe-action,
.wbv-shell .workbench-pepper-workspace .workbench-protocol-breadcrumb,
.wbv-shell .workbench-pepper-workspace .workbench-task-meta {
  background: var(--ws-card-bg) !important;
  border: 1px solid rgba(255, 165, 65, 0.22) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  box-shadow: var(--ws-card-shadow) !important;
  padding: 10px 12px !important;
  margin-bottom: 8px !important;
}
.wbv-shell .workbench-pepper-workspace .workbench-director-rail {
  background: var(--ws-glass-bg-strong) !important;
  border: 1px solid var(--ws-molten-rim) !important;
  border-radius: var(--ws-glass-radius) !important;
  box-shadow: var(--ws-surface-shadow-strong) !important;
  padding: 12px !important;
}
.wbv-shell .workbench-pepper-workspace .workbench-director-tabs {
  display: flex !important;
  gap: 6px !important;
  margin-bottom: 10px !important;
  padding: 4px !important;
  background: rgba(8, 12, 18, 0.55) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  border: 1px solid var(--ws-molten-divider-faint) !important;
}
.wbv-shell .workbench-pepper-workspace .workbench-director-tabs button {
  padding: 4px 10px !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  font-size: 10px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
}
.wbv-shell .workbench-pepper-workspace .workbench-director-tabs button[aria-selected="true"] {
  background: rgba(255, 165, 65, 0.10) !important;
  border-color: var(--ws-molten-rim-strong) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 160, 0.16),
    0 0 6px rgba(255, 140, 50, 0.18) !important;
}
.wbv-shell .workbench-pepper-workspace .workbench-task-warning {
  display: inline-block !important;
  padding: 4px 10px !important;
  background: rgba(220, 90, 90, 0.14) !important;
  border: 1px solid rgba(220, 90, 90, 0.40) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  color: rgba(255, 200, 200, 0.96) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
.wbv-shell .workbench-pepper-workspace .workbench-director-copy-btn {
  padding: 3px 10px !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
}

/* --- v006.7 Build interview step pills — anchor INSIDE the surface,
       not floating. Operator's screenshot: "No anchored" on the
       1 INTERVIEW pill that floats over the stage. */
.wbv-shell .workbench-build-flow {
  display: flex !important;
  gap: 6px !important;
  padding: 8px 12px !important;
  margin-top: 12px !important;
  background: rgba(8, 12, 18, 0.55) !important;
  border: 1px solid var(--ws-molten-divider) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.wbv-shell .workbench-build-flow > * {
  flex: 0 0 auto !important;
  padding: 4px 10px !important;
  background: var(--ws-card-bg) !important;
  border: 1px solid var(--ws-molten-rim) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  color: rgba(247, 249, 242, 0.94) !important;
}
.wbv-shell .workbench-build-flow > [aria-current="true"],
.wbv-shell .workbench-build-flow > .is-active,
.wbv-shell .workbench-build-flow > [data-active="true"] {
  background: rgba(255, 165, 65, 0.14) !important;
  border-color: var(--ws-molten-rim-strong) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 160, 0.18),
    0 0 8px rgba(255, 140, 50, 0.22) !important;
  color: rgba(255, 245, 220, 1) !important;
  font-weight: 700 !important;
}

/* --- v006.8 Bottom rail responsive width — operator: "Evidence rail
       must be responsive to viewport and right dock." Already absolute
       with left/right percentage; ensure cells reflow gracefully on
       narrow widths. */
.wbv-shell .workbench-bottom-evidence-strip__items {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
}

/* --- v006.9 Pepper dock: do not squish content. v005 added bottom:24
       constraint — set min-height on inner sections to avoid collapse. */
.wbv-shell .workbench-pepper-dock .workbench-pepper-dock__compact-stack {
  gap: 10px !important;
}
.wbv-shell .workbench-pepper-dock .workbench-pepper-dock__chat-card,
.wbv-shell .workbench-pepper-dock .workbench-pepper-dock__compact-card {
  min-height: 0 !important;
}

/* --- v006.10 Spine status chip pill chassis — also covers .pill / .pill-* */
.wbv-shell .workbench-os-spine .forge-spine-group__select,
.wbv-shell .workbench-os-spine .forge-spine-group__expand {
  background: rgba(13, 18, 19, 0.68) !important;
  border: 1px solid var(--ws-molten-rim) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 215, 160, 0.06),
    0 4px 10px rgba(0, 0, 0, 0.28) !important;
}
.wbv-shell .workbench-os-spine .forge-spine-group__select:hover,
.wbv-shell .workbench-os-spine .forge-spine-group__expand:hover {
  border-color: var(--ws-molten-warm) !important;
  background: rgba(255, 165, 65, 0.08) !important;
}

/* --- v006.11 Spine selected child — coherent molten-glass row ---
   Re-tightened to live inside the now-full-bay glow without doubling. */
.wbv-shell .forge-glass-surface--spine .forge-spine-child[aria-current="true"],
.wbv-shell .workbench-os-spine .forge-spine-child[aria-current="true"] {
  background: rgba(255, 165, 65, 0.18) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  border: 1px solid var(--ws-molten-rim-strong) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 160, 0.22),
    inset 0 0 0 1px rgba(255, 178, 90, 0.24),
    0 0 6px rgba(255, 140, 50, 0.22) !important;
  margin: 2px 2px !important;
  padding-left: 12px !important;
}

/* =====================================================================
   GLASS SURFACE v007 FAILURE-CORRECTION BLOCK (2026-05-22)
   Pipeline: workbench-shell-glass-refine-v6-2026-05-22

   Each rule below is a SCREENSHOT-IDENTIFIED defect from the operator
   review of v5 PASS verdict. Worker narration was wrong; pixels were
   right. Root cause for most: v005/v006 selectors required an ancestor
   class (.forge-surface-panel__body OR .workbench-pepper-workspace)
   that drill-down surfaces (Mission Control, War Room, Personas)
   don't have — they render inside .workbench-details-sheet with a
   different class hierarchy. v007 uses PARENT-INDEPENDENT selectors.
   ===================================================================== */

/* v007.2-tier-restore Two-tier ribbon — operator wants tier 1 (large
   logo + primary chips) and tier 2 (smaller status/governance chips).
   The single-row "ribbon" approach was rejected. JSX now renders two
   __row containers; CSS sizes them differently. Glow tuned DOWN per
   operator: "the glow is a little too bright". */
.wbv-shell .forge-glass-surface.workbench-top-hero-band.workbench-top-hero-band--two-tier {
  display: grid !important;
  grid-template-rows: 48px 36px !important;
  grid-template-columns: 1fr !important;
  align-items: stretch !important;
  height: 96px !important;
  max-height: 96px !important;
  min-height: 96px !important;
  padding: 4px 14px 6px !important;
  gap: 4px !important;
  overflow: hidden !important;
}
.wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__row--identity {
  grid-row: 1 !important;
  grid-column: 1 !important;
}
.wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__row--status {
  grid-row: 2 !important;
  grid-column: 1 !important;
}
.wbv-shell .workbench-panel-shell__top {
  height: 104px !important;
  max-height: 104px !important;
}
.wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__row--identity {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 44px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__row--identity::-webkit-scrollbar { display: none !important; }
.wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__identity {
  /* v007.56l Logo spans FULL HEIGHT of hero panel and centered.
     Operator 2026-05-22: "logo is not centered height wise" +
     "you are treating the top panel as two separate panels you
     need to stop doing that". Position absolute to escape the
     2-tier grid row constraint and span the entire hero height. */
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 14px !important;
  width: 220px !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  margin-right: 0 !important;
  z-index: 2 !important;
}
.wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__os-label {
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  color: rgba(255, 178, 90, 0.96) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}
.wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__os-value {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: rgba(255, 235, 195, 0.98) !important;
  letter-spacing: 0.02em !important;
}
.wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__chips--primary {
  display: inline-flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}
.wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__row--identity .workbench-status-pill {
  min-height: 38px !important;
  padding: 6px 12px !important;
  border: 1px solid rgba(255, 178, 90, 0.55) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  background: rgba(8, 12, 18, 0.78) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.14),
    inset 0 0 0 1px rgba(255, 178, 90, 0.16),
    0 0 8px rgba(255, 140, 50, 0.22),
    0 2px 6px rgba(0, 0, 0, 0.38) !important;
  flex-shrink: 0 !important;
}
.wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__row--status {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 32px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__row--status::-webkit-scrollbar { display: none !important; }
.wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__chips--secondary {
  display: inline-flex !important;
  gap: 6px !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}
.wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__row--status .workbench-status-pill {
  min-height: 28px !important;
  padding: 3px 9px !important;
  border: 1px solid rgba(255, 165, 65, 0.40) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  background: rgba(8, 12, 18, 0.75) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 215, 160, 0.10),
    0 0 6px rgba(255, 140, 50, 0.14),
    0 2px 4px rgba(0, 0, 0, 0.32) !important;
  flex-shrink: 0 !important;
}
.wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__row--status .workbench-status-pill span {
  font-size: 8px !important;
  letter-spacing: 0.14em !important;
  color: rgba(255, 200, 130, 0.92) !important;
}
.wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__row--status .workbench-status-pill strong {
  font-size: 10px !important;
  margin-top: 1px !important;
  color: rgba(247, 249, 242, 0.96) !important;
  font-weight: 600 !important;
}
.wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__row--identity .workbench-status-pill span {
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  color: rgba(255, 200, 130, 0.96) !important;
}
.wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__row--identity .workbench-status-pill strong {
  font-size: 11.5px !important;
  margin-top: 1px !important;
  color: rgba(247, 249, 242, 0.98) !important;
  font-weight: 700 !important;
}

/* v007.2b-fixed Bottom evidence rail CELLS — molten glow (operator:
   "glow not applied to chips" pointing at the evidence rail cells).
   Adding .forge-glass-surface chain to beat the v004.3 specificity
   (0,3,0) with (0,4,0) for guaranteed cascade win. */
.wbv-shell .forge-glass-surface .workbench-bottom-evidence-strip__cell,
.wbv-shell .forge-glass-surface.workbench-bottom-evidence-strip .workbench-bottom-evidence-strip__cell {
  background: rgba(8, 12, 18, 0.78) !important;
  border: 1px solid rgba(255, 178, 90, 0.55) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.16),
    inset 0 0 0 1px rgba(255, 178, 90, 0.18),
    0 0 10px rgba(255, 140, 50, 0.22),
    0 2px 6px rgba(0, 0, 0, 0.38) !important;
}

/* v007.4 Ribbon chip glow RESTORED (operator: "chips are also back to
   now glow again"). Toned from 0.40 (too bright) and from 0.22 (no
   visible glow) to 0.32 — sweet spot per visual feedback. */
.wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__row--identity .workbench-status-pill {
  min-height: 40px !important;
  padding: 7px 13px !important;
  border: 1px solid rgba(255, 178, 90, 0.62) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  background: rgba(8, 12, 18, 0.80) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.18),
    inset 0 0 0 1px rgba(255, 178, 90, 0.20),
    0 0 10px rgba(255, 140, 50, 0.32),
    0 0 20px rgba(255, 140, 50, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.42) !important;
  flex-shrink: 0 !important;
}
.wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__row--status .workbench-status-pill {
  min-height: 30px !important;
  padding: 4px 10px !important;
  border: 1px solid rgba(255, 178, 90, 0.50) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  background: rgba(8, 12, 18, 0.78) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.12),
    inset 0 0 0 1px rgba(255, 178, 90, 0.14),
    0 0 8px rgba(255, 140, 50, 0.22),
    0 2px 4px rgba(0, 0, 0, 0.36) !important;
  flex-shrink: 0 !important;
}
/* Logo more prominent per operator request for "large hero logo" */
.wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__os-value {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: rgba(255, 235, 195, 0.99) !important;
  text-shadow: 0 0 18px rgba(255, 140, 50, 0.40), 0 0 6px rgba(255, 180, 90, 0.30) !important;
}
.wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__os-label {
  font-size: 9px !important;
  letter-spacing: 0.18em !important;
  color: rgba(255, 178, 90, 0.98) !important;
  font-weight: 800 !important;
}
/* v007.56g Shrink the OS title text so the identity logo fits in the
   ~90px gap between hero left edge and first chip. */
.wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__os-value {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}
/* Tier 1 row taller now (56px) since logo is bigger; tier 2 stays 36px.
   v007.56f bumped to 60px/60px so both 44px chip rows fit with breathing room. */
.wbv-shell .forge-glass-surface.workbench-top-hero-band.workbench-top-hero-band--two-tier {
  grid-template-rows: 60px 60px !important;
  height: 130px !important;
  max-height: 130px !important;
  min-height: 130px !important;
}
.wbv-shell .workbench-panel-shell__top {
  height: 112px !important;
  max-height: 112px !important;
}

/* v007.15 DRILL-DOWN SURFACES — apply SAME translucent glass backing as
   .forge-glass-surface (top/left/bottom/right panels). Operator: "comfyUI
   glass backing ... left rail sub-menus + pepper workspace need the
   same". The other panels use rgba(8,12,18,0.72) translucent dark glass
   + backdrop-filter blur so HiveMind background subtly shows through.
   Drill-down now uses the same recipe so it reads as a sibling, not a
   different surface family. Width clip from v007.14 preserved. */
.wbv-shell .forge-surface-panel {
  position: absolute !important;
  left: 22% !important;
  right: 22% !important;
  width: auto !important;
  max-width: calc(100vw - 624px) !important;
  background: rgba(8, 12, 18, 0.72) !important;
  border: 1.5px solid rgba(255, 178, 90, 0.55) !important;
  border-radius: var(--ws-glass-radius) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.12),
    inset 0 0 0 1px rgba(255, 178, 90, 0.14),
    0 0 14px rgba(255, 140, 50, 0.20),
    0 0 28px rgba(255, 140, 50, 0.08),
    0 12px 32px rgba(0, 0, 0, 0.58) !important;
  backdrop-filter: blur(14px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(125%) !important;
  overflow: auto !important;
}

/* v007.17 Pepper Workspace — NEUTRAL outer chrome.
   Operator: "the whole primary base is orange and doesn't look good".
   Replaced warm rim + warm halo shadows with NEUTRAL gray rim + plain
   drop shadow. Warm now only appears on semantic accents (active/
   selected chips). Translucent dark glass background preserved. */
.wbv-shell .forge-glass-surface.workbench-pepper-workspace,
.wbv-shell .workbench-pepper-workspace {
  position: fixed !important;
  top: 4px !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 4px !important;
  width: auto !important;
  height: auto !important;
  background: rgba(8, 12, 18, 0.78) !important;
  border: 1px solid rgb(58, 60, 65) !important;
  border-radius: var(--ws-glass-radius) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 12px 32px rgba(0, 0, 0, 0.58) !important;
  backdrop-filter: blur(14px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
  z-index: 60 !important;
  overflow: auto !important;
}

/* v007.24 Dual-lane comfyUI glass + warm tint/rim/glow matching top
   header. Operator: chat + rail need the same glow as top header. */
.wbv-shell .workbench-pepper-workspace .workbench-pepper-chat,
.wbv-shell .workbench-pepper-workspace .workbench-director-rail {
  background: linear-gradient(180deg, rgba(255, 143, 58, 0.08) 0%, rgba(8, 12, 18, 0.62) 18%, rgba(8, 12, 18, 0.62) 100%) !important;
  border: 1px solid rgba(255, 178, 90, 0.42) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.12),
    0 0 14px rgba(255, 140, 50, 0.18),
    0 8px 22px rgba(0, 0, 0, 0.42) !important;
  backdrop-filter: blur(12px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(125%) !important;
  padding: 16px !important;
}

/* v007.19 Inner sub-cards + list rows — operator: "too much grey over
   all making everything look dim and dark". Replace neutral gray with
   the BOTTOM RAIL CHIP RECIPE (translucent dark glass + warm 0.55
   border + warm outer glow) so every row/cell pops the same way the
   approved bottom rail cells do. Black-on-black is invisible per
   operator: "Black on black for backgrounds doesn't unless if the
   chip is sitting on glass then they pop". */
.wbv-shell .workbench-pepper-workspace .workbench-task-key-values > div,
.wbv-shell .workbench-pepper-workspace .workbench-evidence-protocol-grid > div,
.wbv-shell .workbench-pepper-workspace section section > div,
.wbv-shell .workbench-pepper-workspace .workbench-proof-gates > div,
.wbv-shell .workbench-pepper-workspace .workbench-review-rubric > div,
.wbv-shell .workbench-pepper-workspace .workbench-evidence-proof-checklist > div,
.wbv-shell .workbench-pepper-workspace ul li,
.wbv-shell .workbench-pepper-workspace section ul li,
.wbv-shell .forge-surface-panel__body ul li,
.wbv-shell .forge-surface-panel__body section ul li {
  background: rgba(8, 12, 18, 0.78) !important;
  border: 1px solid rgba(255, 178, 90, 0.55) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  padding: 8px 12px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.16),
    inset 0 0 0 1px rgba(255, 178, 90, 0.18),
    0 0 10px rgba(255, 140, 50, 0.22),
    0 2px 6px rgba(0, 0, 0, 0.38) !important;
}

/* v007.19b Active/current tab — operator: "these don't stay light up
   based on what is currently selected". Stronger warm glow on the
   actively-selected DIRECTOR/HANDOFF/EVIDENCE/PREVIEW tab so it's
   visually distinct from the other three. */
.wbv-shell .workbench-pepper-workspace [aria-selected="true"],
.wbv-shell .workbench-pepper-workspace [aria-current="true"],
.wbv-shell .workbench-pepper-workspace [data-active="true"],
.wbv-shell .workbench-pepper-workspace [data-state="active"],
.wbv-shell .workbench-pepper-workspace .is-active {
  background: rgba(255, 165, 65, 0.14) !important;
  border-color: rgba(255, 200, 110, 0.88) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 180, 0.22),
    inset 0 0 0 1px rgba(255, 200, 110, 0.32),
    0 0 14px rgba(255, 140, 50, 0.42),
    0 0 26px rgba(255, 140, 50, 0.18),
    0 2px 6px rgba(0, 0, 0, 0.32) !important;
  color: rgba(255, 240, 200, 0.99) !important;
}

/* v007.16c Active/selected tab + chip glow.
   Operator: "glow doesnt stay active based on which tab is selected". */
.wbv-shell .workbench-pepper-workspace [aria-selected="true"],
.wbv-shell .workbench-pepper-workspace [data-active="true"],
.wbv-shell .workbench-pepper-workspace .workbench-director-tabs button[aria-selected="true"],
.wbv-shell .workbench-pepper-workspace .workbench-director-tabs button.active,
.wbv-shell .workbench-pepper-workspace .workbench-tab-pill[aria-selected="true"],
.wbv-shell .workbench-pepper-workspace .wb-tab-pill[data-active="true"] {
  background: rgba(255, 165, 65, 0.10) !important;
  border-color: rgba(255, 178, 90, 0.65) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 160, 0.16),
    0 0 10px rgba(255, 140, 50, 0.30),
    0 2px 4px rgba(0, 0, 0, 0.28) !important;
  color: rgba(255, 235, 195, 0.98) !important;
}

/* v007.18 Chips/bubbles inside workspace match Details flyout chip
   style. Operator: "all the chips/bubbles is dull they don't have the
   bottom panel style or look". Outer workspace chrome stays neutral
   (v007.17), but the chips INSIDE now have the same warm-subtle border
   + small glow as the Details flyout chips (the "bottom panel" the
   operator referred to). */
.wbv-shell .workbench-pepper-workspace__context .workbench-status-pill,
.wbv-shell .workbench-pepper-workspace__context .wb-card,
.wbv-shell .workbench-pepper-workspace .workbench-director-rail .workbench-status-pill,
.wbv-shell .workbench-pepper-workspace .workbench-director-rail .wb-status-chip,
.wbv-shell .workbench-pepper-workspace .workbench-director-rail .forge-chip,
.wbv-shell .workbench-pepper-workspace .workbench-task-key-values > div,
.wbv-shell .workbench-pepper-workspace .workbench-evidence-protocol-grid > div {
  background: rgba(8, 12, 18, 0.78) !important;
  border: 1px solid rgba(255, 178, 90, 0.38) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 215, 160, 0.10),
    0 0 8px rgba(255, 140, 50, 0.18),
    0 2px 6px rgba(0, 0, 0, 0.32) !important;
  color: rgba(247, 240, 222, 0.94) !important;
}
/* All status chips inside director rail / chat / governed actions / tabs.
   v007.18-fixed: include .workbench-status-pill which is the actual
   class on the top tab elements (probe confirmed they don't have a
   __context wrapper). */
.wbv-shell .workbench-pepper-workspace .forge-chip,
.wbv-shell .workbench-pepper-workspace .wb-status-chip,
.wbv-shell .workbench-pepper-workspace .workbench-status-pill,
.wbv-shell .workbench-pepper-workspace .pill {
  background: rgba(8, 12, 18, 0.78) !important;
  border: 1px solid rgba(255, 178, 90, 0.55) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 215, 160, 0.14),
    0 0 8px rgba(255, 140, 50, 0.22),
    0 2px 6px rgba(0, 0, 0, 0.32) !important;
  color: rgba(247, 240, 222, 0.94) !important;
}

/* v007.16f GOVERNED ACTIONS / DESTRUCTIVE / APPROVAL REQUIRED — operator
   said "background fill is orange and looks bad". Replace warm fills
   with neutral, keep red destructive accent on border only. */
.wbv-shell .workbench-pepper-workspace .workbench-governed-actions,
.wbv-shell .workbench-pepper-workspace [class*="governed-actions"] {
  background: rgb(32, 33, 37) !important;
  border: 1px solid rgb(58, 60, 65) !important;
}
.wbv-shell .workbench-pepper-workspace [class*="destructive"],
.wbv-shell .workbench-pepper-workspace .forge-chip[data-status="blocked"],
.wbv-shell .workbench-pepper-workspace .pill.pill-danger {
  background: rgb(40, 25, 28) !important;
  border: 1px solid rgba(224, 104, 112, 0.55) !important;
  color: rgba(255, 200, 200, 0.94) !important;
  box-shadow: 0 0 6px rgba(224, 90, 90, 0.18) !important;
}

/* v007.16g Workspace header heading + close button rounded chrome.
   Operator: "I want this rounded style header to be the same for the
   pepper workspace top header/menu". */
.wbv-shell .workbench-pepper-workspace > header:first-child,
.wbv-shell .workbench-pepper-workspace__heading {
  padding: 16px 24px !important;
  background: linear-gradient(180deg, rgba(255, 143, 58, 0.10) 0%, rgba(28, 29, 33, 0.92) 100%) !important;
  border-bottom: 1px solid rgba(255, 178, 90, 0.30) !important;
  border-radius: var(--ws-glass-radius) var(--ws-glass-radius) 0 0 !important;
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}
/* v007.13 Drill-down HEADER matches Details flyout EXACTLY.
   DOM probe of .workbench-details-sheet__header showed:
   bg: linear-gradient(rgba(255,143,58,0.14) → rgba(28,29,33))
   border: NONE, shadow: NONE — ONLY a tiny 14% warm tint at top
   that fades into neutral gray. Operator: "too much orange on
   orange for headers and they are not layered". Strip warm border,
   strip warm shadow, strip warm text-shadow; copy exact Details
   gradient so layering reads via tonal variation, not warm stacking. */
.wbv-shell .forge-surface-panel__head {
  padding: 12px 16px !important;
  background: linear-gradient(180deg, rgba(255, 143, 58, 0.14) 0%, rgba(28, 29, 33, 0.92) 100%) !important;
  border: none !important;
  border-radius: var(--ws-glass-radius) var(--ws-glass-radius) 0 0 !important;
  box-shadow: none !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.wbv-shell .forge-surface-panel__head-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}
.wbv-shell .forge-surface-panel__path {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 10px !important;
  flex: 1 1 auto !important;
}
/* Non-leaf path segments — small uppercase eyebrow, NEUTRAL color */
.wbv-shell .forge-surface-panel__path-segment {
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(200, 205, 215, 0.65) !important;
  font-weight: 700 !important;
}
.wbv-shell .forge-surface-panel__path-separator {
  color: rgba(200, 205, 215, 0.45) !important;
  font-size: 14px !important;
  margin: 0 4px !important;
}
/* LEAF segment — BIG title, NEUTRAL light cream (no warm text-shadow) */
.wbv-shell .forge-surface-panel__path-segment--leaf {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  color: rgba(249, 242, 232, 0.98) !important;
  text-transform: none !important;
  text-shadow: none !important;
}
/* Close button — NEUTRAL gradient + neutral gray border + neutral
   text, matching .workbench-details-sheet__close exactly */
.wbv-shell .forge-surface-panel__close {
  padding: 6px 12px !important;
  background: linear-gradient(180deg, rgba(45, 47, 52, 0.95) 0%, rgba(32, 33, 37, 0.95) 100%) !important;
  border: 1px solid rgb(58, 60, 65) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  color: rgba(200, 205, 215, 0.78) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
}
.wbv-shell .forge-surface-panel__close:hover {
  background: linear-gradient(180deg, rgba(55, 58, 64, 0.98) 0%, rgba(38, 40, 44, 0.98) 100%) !important;
  border-color: rgb(74, 76, 82) !important;
  color: rgba(220, 225, 235, 0.92) !important;
}
.wbv-shell .forge-surface-panel__description {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: rgba(249, 242, 232, 0.78) !important;
  margin: 0 !important;
}
.wbv-shell .forge-surface-panel__closure-path {
  font-size: 11px !important;
  color: rgba(200, 205, 215, 0.65) !important;
}
.wbv-shell .forge-surface-panel__closure-path code {
  background: rgb(22, 23, 27) !important;
  border: 1px solid rgb(58, 60, 65) !important;
  border-radius: 4px !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  color: rgba(220, 225, 235, 0.88) !important;
}

/* v007.13b BOUNDARY note + section labels inside drill-down — neutral */
.wbv-shell .forge-surface-panel__body .boundary,
.wbv-shell .forge-surface-panel__body [class*="boundary"] {
  background: rgb(22, 23, 27) !important;
  border: 1px solid rgb(58, 60, 65) !important;
  color: rgba(220, 225, 235, 0.88) !important;
}
/* Inner section LABELS (V1 SURFACE STATUS / etc.) — neutral cool gray,
   NOT warm orange. Operator: "not layered" — fix by removing warm tints
   on label text so cards read as flat neutral surfaces. */
.wbv-shell .forge-surface-panel__body section span[style*="text-transform"],
.wbv-shell .forge-surface-panel__body section header > div > span:first-child,
.wbv-shell .forge-surface-panel__body section section > span:first-child {
  color: rgba(200, 205, 215, 0.70) !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  font-size: 10px !important;
}

/* v007.13c Pepper Workspace top tab labels neutralized too */
.wbv-shell .workbench-pepper-workspace__context span,
.wbv-shell .workbench-pepper-workspace__context .workbench-status-pill span {
  color: rgba(200, 205, 215, 0.70) !important;
}
.wbv-shell .workbench-pepper-workspace section > span:first-child,
.wbv-shell .workbench-pepper-workspace section > h3:first-child,
.wbv-shell .workbench-pepper-workspace section > h4:first-child {
  color: rgba(200, 205, 215, 0.70) !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
}

/* v007.20 Workspace section labels match Details flyout EXACTLY.
   Operator: Option A — polish cosmetics so workspace chips/cells/labels
   align with Details. DOM probe: Details __section span uses 11px/800/
   0.55 alpha/1.54px letter-spacing. Workspace was 10px/700/0.70/1.2px.
   Aligning exactly. */
.wbv-shell .workbench-pepper-workspace .workbench-director-rail span:not(.dc-preconditions-panel__item):not(.dc-preconditions-panel__expected),
.wbv-shell .workbench-pepper-workspace .workbench-director-rail .workbench-director-panel span:not(.dc-preconditions-panel__item):not(.dc-preconditions-panel__expected),
.wbv-shell .workbench-pepper-workspace .workbench-director-rail .workbench-director-panel section > span:first-child,
.wbv-shell .workbench-pepper-workspace .workbench-director-rail .workbench-director-panel section > span,
.wbv-shell .workbench-pepper-workspace .workbench-director-rail section > span:first-child,
.wbv-shell .workbench-pepper-workspace section > span:first-child,
.wbv-shell .workbench-pepper-workspace section > h3:first-child,
.wbv-shell .workbench-pepper-workspace section > h4:first-child {
  /* v007.38 Molten warm label color + subtle glow.
     Operator 2026-05-22: "all the main titles for windows are
     currently a dull grey. they should have a very subtle glow and
     have a molten color matching our theme. like how the review
     classification rubric currently looks." Matches v007.37 reference
     color (rgba(255, 200, 130, 0.88)) used on the rubric heading. */
  color: rgba(255, 200, 130, 0.88) !important;
  text-shadow: 0 0 3px rgba(255, 140, 50, 0.14), 0 0 1px rgba(255, 180, 90, 0.20) !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}
/* Row/cell labels (inside sub-cards) match Details row labels: 9px / 0.55.
   v007.38 molten warm + subtle glow (slightly dimmer than parent labels so
   the hierarchy still reads). */
.wbv-shell .workbench-pepper-workspace .workbench-task-key-values > div > span,
.wbv-shell .workbench-pepper-workspace .workbench-evidence-protocol-grid > div > span,
.wbv-shell .workbench-pepper-workspace section section > div > span:first-child {
  color: rgba(255, 195, 125, 0.78) !important;
  text-shadow: 0 0 2px rgba(255, 140, 50, 0.12) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-size: 9px !important;
}
/* Section card titles (h3/h4) inside director rail — keep readable
   light cream */
.wbv-shell .workbench-pepper-workspace .workbench-director-rail h3,
.wbv-shell .workbench-pepper-workspace .workbench-director-rail h4,
.wbv-shell .workbench-pepper-workspace .workbench-director-rail strong {
  color: rgba(249, 242, 232, 0.98) !important;
}
/* Chip pills inside director rail — preserved (semantic colors via
   their own rules; only neutralize the label spans). */
.wbv-shell .workbench-pepper-workspace .workbench-director-rail .workbench-status-pill span,
.wbv-shell .workbench-pepper-workspace .workbench-director-rail .forge-chip,
.wbv-shell .workbench-pepper-workspace .workbench-director-rail .wb-status-chip,
.wbv-shell .workbench-pepper-workspace .workbench-director-rail .pill {
  color: rgba(232, 222, 200, 0.88) !important;
}

/* v007.14c Top tabs row — operator: "top banner area correctly sized
   and chips currently being squashed". Each tab value getting cut off.
   Allow tabs to flex-wrap to multiple rows; min-width on each tab AND
   force strong/value to wrap so "Local Workbench shell — Manual
   operation" (363px) fits in tab without truncation. */
.wbv-shell .workbench-pepper-workspace__context {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 10px 14px !important;
}
.wbv-shell .workbench-pepper-workspace__context .workbench-status-pill,
.wbv-shell .workbench-pepper-workspace__context .wb-card {
  min-width: 200px !important;
  max-width: none !important;
  flex: 1 1 200px !important;
  padding: 8px 12px !important;
  white-space: normal !important;
  height: auto !important;
  min-height: 46px !important;
}
.wbv-shell .workbench-pepper-workspace__context .workbench-status-pill strong,
.wbv-shell .workbench-pepper-workspace__context .workbench-status-pill .wb-card__value,
.wbv-shell .workbench-pepper-workspace__context .wb-card strong,
.wbv-shell .workbench-pepper-workspace__context .wb-card .wb-card__value {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: normal !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  margin-top: 2px !important;
  display: block !important;
}
.wbv-shell .forge-surface-panel__body {
  padding: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

/* v007.6 (2026-05-22) Drill-down sections — bay overview content has
   INLINE styles (background/border/padding) on every section AND wraps
   them 2 levels deep, so my v007.5 `> section` only hit the outer
   wrapper. Catch the actual inner section/header elements + override
   their inline dashed borders + dim gray labels with `!important`. */

/* Outer wrapper: transparent shell so the molten panel chrome shows */
.wbv-shell .forge-surface-panel__body > section[data-bay-id],
.wbv-shell .forge-surface-panel__body > section[data-child-id] {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  gap: 12px !important;
}

/* v007.12 Inner header — Details-flyout recipe (neutral gray, no warm border) */
.wbv-shell .forge-surface-panel__body section header {
  padding: 10px 12px !important;
  background: rgb(32, 33, 37) !important;
  border: none !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22) !important;
}

/* v007.12 Inner section CARDS — copied from Details flyout recipe: solid
   neutral gray + NO warm border + subtle drop shadow only. Warm rim
   stays only on the outer panel chrome. Operator: drill-down should
   "match details flyout". */
.wbv-shell .forge-surface-panel__body section section,
.wbv-shell .forge-surface-panel__body section header,
.wbv-shell .forge-surface-panel__body > section > article,
.wbv-shell .forge-surface-panel__body .workbench-surfaced-truth,
.wbv-shell .forge-surface-panel__body .workbench-people-map,
.wbv-shell .forge-surface-panel__body .workbench-build-flow {
  background: rgb(32, 33, 37) !important;
  border: none !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22) !important;
  padding: 10px 12px !important;
}

/* Section labels — uppercase molten orange (overriding inline gray) */
.wbv-shell .forge-surface-panel__body section span[style*="text-transform"],
.wbv-shell .forge-surface-panel__body section header > div span:first-child,
.wbv-shell .forge-surface-panel__body section section > span:first-child {
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(255, 178, 90, 0.92) !important;
  font-weight: 800 !important;
}

/* Inner list items (Cross-referenced v1 control list rows) */
.wbv-shell .forge-surface-panel__body section ul {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  list-style: none !important;
}
.wbv-shell .forge-surface-panel__body section ul li {
  background: rgba(8, 11, 16, 0.55) !important;
  border: 1px solid rgba(255, 178, 90, 0.32) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  padding: 10px 14px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 215, 160, 0.08),
    0 2px 6px rgba(0, 0, 0, 0.28) !important;
}

/* v007.28 Workspace outer chrome — WARM RIM + GLOW restored per operator
   "left and right border outlines are missing the warm glow and currently
   look grey". Background stays neutral (approved earlier), only the rim
   + glow get warm color. */
.wbv-shell .forge-glass-surface.workbench-pepper-workspace,
.wbv-shell .workbench-pepper-workspace {
  background: linear-gradient(180deg, rgba(24, 26, 32, 0.68) 0%, rgba(10, 12, 16, 0.82) 100%) !important;
  border: 1.5px solid rgba(255, 178, 90, 0.55) !important;
  border-radius: var(--ws-glass-radius) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.14),
    0 0 14px rgba(255, 140, 50, 0.18),
    0 12px 32px rgba(0, 0, 0, 0.58) !important;
  backdrop-filter: blur(16px) saturate(120%) !important;
}
/* Workspace inner panels (chat lane + director lane) — neutral too */
.wbv-shell .workbench-pepper-workspace .workbench-pepper-chat,
.wbv-shell .workbench-pepper-workspace .workbench-director-rail {
  background: rgba(8, 12, 18, 0.62) !important;
  border: 1px solid rgb(58, 60, 65) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 215, 160, 0.12),
    inset 0 0 0 1px rgba(255, 178, 90, 0.14),
    0 0 10px rgba(255, 140, 50, 0.18),
    0 4px 10px rgba(0, 0, 0, 0.36) !important;
}

/* v007.8 Spine right-side status chip alignment — operator: "all left
   panel menus/dashboard are not aligned" (chips truncated like
   "NEEDS-BUIL" / "READ-ON"). Ensure chips have enough min-width for
   their longest label + right-align in the row. */
.wbv-shell .workbench-os-spine .forge-spine-group__select {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  justify-content: space-between !important;
}
.wbv-shell .workbench-os-spine .forge-spine-group__select .forge-chip,
.wbv-shell .workbench-os-spine .forge-spine-child .forge-chip,
.wbv-shell .workbench-os-spine .forge-spine-group__select .forge-chip--xs,
.wbv-shell .workbench-os-spine .forge-spine-child .forge-chip--xs {
  min-width: 110px !important;
  max-width: none !important;
  width: auto !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  padding: 0 10px !important;
}

/* =====================================================================
   v007.9 GLOBAL CHIP + WORKSPACE SECTION CONSOLIDATION (2026-05-22)
   Pipeline: workbench-shell-glass-refine-v6-2026-05-22

   Operator: "chips are messy and not all updated" + "menus are not
   updated with style the list goes on". After 5+ CSS passes the chip
   recipe was fragmented across .workbench-status-pill / .forge-chip /
   .wb-status-chip / .pill — each with its own selector cascade. This
   block defines ONE canonical chip recipe + applies it everywhere a
   chip-shaped element renders inside the shell. Also extends Details-
   flyout treatment to Pepper Workspace inner sections.
   ===================================================================== */

/* v007.9a Canonical chip recipe — applies to ALL chip elements in the
   shell regardless of which class taxonomy they were created with.
   v007.11 (2026-05-22): toned down border alpha 0.48→0.30 + outer glow
   0.14→0.05 per operator "color scheme is terrible and hurts the eyes". */
.wbv-shell .workbench-pepper-workspace .forge-chip,
.wbv-shell .workbench-pepper-workspace .wb-status-chip,
.wbv-shell .workbench-pepper-workspace .pill,
.wbv-shell .workbench-details-sheet .forge-chip,
.wbv-shell .workbench-details-sheet .wb-status-chip,
.wbv-shell .workbench-details-sheet .pill,
.wbv-shell .forge-surface-panel .forge-chip,
.wbv-shell .forge-surface-panel .wb-status-chip,
.wbv-shell .forge-surface-panel .pill {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 22px !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  background: rgba(8, 12, 18, 0.78) !important;
  border: 1px solid rgba(255, 178, 90, 0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 215, 160, 0.14),
    0 0 8px rgba(255, 140, 50, 0.22),
    0 2px 6px rgba(0, 0, 0, 0.32) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: rgba(232, 222, 200, 0.88) !important;
  white-space: nowrap !important;
}
/* Destructive / approval-required chips: red accent retained inside
   the unified chassis */
.wbv-shell .workbench-pepper-workspace .forge-chip[data-status="blocked"],
.wbv-shell .workbench-pepper-workspace .pill.pill-danger,
.wbv-shell .workbench-pepper-workspace .destructive-chip,
.wbv-shell .workbench-pepper-workspace [class*="destructive"] {
  border-color: rgba(224, 104, 112, 0.72) !important;
  color: rgba(255, 200, 200, 0.96) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 200, 0.10),
    0 0 6px rgba(224, 90, 90, 0.20),
    0 2px 4px rgba(0, 0, 0, 0.36) !important;
}

/* v007.23 THREE-LAYER COMFYUI GLASS ARCHITECTURE per operator:
   "those highlighted area the top combined header panel, the left
   pepper genercrhat and diretor work panes do not have a comfyui glass
   backing and its just CSS on top of the comfyui glass backing. Those
   should also have the comfyui glass backing layered on top for the
   base panes that sit on top of the main window base comfyUI glass."

   Layer 0: workspace outer chrome glass (v007.21)
   Layer 1: THREE sub-panels (top header, chat, rail) each get their
            own comfyUI glass — translucent dark bg + backdrop-filter
            blur + neutral rim — sitting ON TOP of base
   Layer 2: chips/cards/content on top of the sub-panel glass */

/* v007.28 Header #1 — TOP MAIN title row + context chip row are now
   visually ONE band. Remove inner-seam-creating shadows. Header has
   warm rim on top/left/right only, no bottom border, no drop shadow
   (drop shadow only on context's bottom edge so they share one shadow). */
.wbv-shell .workbench-pepper-workspace__header {
  /* v007.44 Workspace top panel = unified comfyUI glass surface.
     Operator 2026-05-22: "the top panel doesn't feel like one panel
     and the entire top area is missing the glow like how the Pepper
     General Chat and Director Work panels look like for their top
     header area. Also the left and right of the top panel is not
     blended. The middle line is not blended in again."
     Fix:
     1. Warm gradient band intensified to match interior headers
        (rgba(255,143,58,0.14) like .workbench-pepper-chat header
        and .workbench-director-rail__header v007.32 band).
     2. L/R borders SAME alpha as the context row below so the seam
        on the sides reads as one continuous rim.
     3. Bottom edge has NO border (already), no inset shadow at the
        bottom, so the join with the context row's top is invisible.
     4. Warm halo glow matches v007.40 panel recipe. */
  padding: 18px 14px !important;
  min-height: 80px !important;
  background:
    linear-gradient(180deg, rgba(255, 143, 58, 0.14) 0%, rgba(255, 143, 58, 0.04) 60%, rgba(0, 0, 0, 0) 100%),
    rgba(10, 14, 20, 0.62) !important;
  backdrop-filter: blur(10px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(125%) !important;
  border: 1px solid rgba(255, 178, 90, 0.55) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.20),
    inset 0 -1px 0 rgba(255, 220, 165, 0.10),
    inset 1px 0 0 rgba(255, 178, 90, 0.14),
    inset -1px 0 0 rgba(255, 178, 90, 0.14),
    0 0 14px rgba(255, 140, 50, 0.18),
    0 4px 10px rgba(0, 0, 0, 0.36) !important;
}
.wbv-shell .workbench-pepper-workspace__header span {
  font-size: 22px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  /* v007.38 Molten warm eyebrow label + subtle glow.
     Operator 2026-05-22: "molten color matching our theme" — applied
     to the workspace-header eyebrow ("PEPPER WORKSPACE"). */
  color: rgba(255, 200, 130, 0.88) !important;
  text-shadow: 0 0 6px rgba(255, 140, 50, 0.22), 0 0 2px rgba(255, 180, 90, 0.28) !important;
  font-weight: 800 !important;
}
.wbv-shell .workbench-pepper-workspace__header strong,
.wbv-shell .workbench-pepper-workspace__header h1,
.wbv-shell .workbench-pepper-workspace__header h2 {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  color: rgba(249, 242, 232, 0.98) !important;
  margin: 0 !important;
}
.wbv-shell .workbench-pepper-workspace__header .ws-header-chip span {
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255, 200, 130, 0.88) !important;
  text-shadow: 0 0 4px rgba(255, 140, 50, 0.18), 0 0 1px rgba(255, 180, 90, 0.22) !important;
  font-weight: 800 !important;
}
.wbv-shell .workbench-pepper-workspace__header .ws-header-chip {
  font-size: 11px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-shadow: none !important;
  color: rgba(255, 244, 231, 0.95) !important;
  font-weight: 700 !important;
  padding: 10px 10px !important;
  border-radius: 8px !important;
  flex: 0 0 auto !important;
  justify-content: center !important;
  text-align: center !important;
  background: rgba(8, 12, 18, 0.82) !important;
  border: 1px solid rgba(255, 178, 90, 0.45) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 185, 0.10),
    inset 0 0 0 1px rgba(255, 200, 110, 0.12),
    0 0 8px rgba(255, 145, 55, 0.22),
    0 0 0 1px rgba(255, 178, 90, 0.18),
    0 4px 10px rgba(0, 0, 0, 0.48) !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  min-height: 44px !important;
}
.wbv-shell .workbench-pepper-workspace__header .ws-header-chip em {
  font-style: normal !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color: rgba(239, 229, 174, 0.94) !important;
  opacity: 0.75 !important;
  text-shadow: none !important;
  letter-spacing: 0.04em !important;
}
/* v007.29 Context chip row — pulled UP by 7px (workspace flex-column gap)
   so it touches header bottom edge with no visible seam. */
.wbv-shell .workbench-pepper-workspace__context {
  padding: 8px 18px 14px !important;
  background: linear-gradient(180deg, rgba(28, 30, 36, 0.62) 0%, rgba(14, 16, 22, 0.78) 100%) !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
  border-bottom: 1px solid rgba(255, 178, 90, 0.50) !important;
  border-left: 1px solid rgba(255, 178, 90, 0.50) !important;
  border-right: 1px solid rgba(255, 178, 90, 0.50) !important;
  border-top: none !important;
  border-radius: 0 0 var(--ws-glass-radius-inner) var(--ws-glass-radius-inner) !important;
  margin: -7px 0 14px 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  box-shadow:
    0 0 16px rgba(255, 140, 50, 0.22),
    0 4px 14px rgba(0, 0, 0, 0.32) !important;
}

/* v007.32 Header #2 — PEPPER GENERAL CHAT interior header. Remove all
   borders (Layer 1 sub-panel border already wraps the area; doubling
   up created the stacked-square look operator pointed at). Just a
   gradient band at the top of the sub-panel. */
.wbv-shell .workbench-pepper-workspace .workbench-pepper-workspace__panel-title,
.wbv-shell .workbench-pepper-workspace .workbench-pepper-chat > div:first-child,
.wbv-shell .workbench-pepper-workspace .workbench-pepper-chat__header {
  padding: 14px 16px !important;
  background: linear-gradient(180deg, rgba(255, 143, 58, 0.14) 0%, rgba(28, 29, 33, 0.0) 100%) !important;
  border: none !important;
  border-radius: var(--ws-glass-radius-inner) var(--ws-glass-radius-inner) 0 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.10) !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: -16px -16px 14px -16px !important;
  min-height: 64px !important;
}
.wbv-shell .workbench-pepper-workspace .workbench-pepper-workspace__panel-title span:first-child,
.wbv-shell .workbench-pepper-workspace .workbench-pepper-chat > div:first-child span:first-child {
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  /* v007.38 Molten warm panel-title eyebrow + subtle glow.
     Operator 2026-05-22: applies to "PEPPER GENERAL CHAT" and
     "DIRECTOR WORK" interior panel-title eyebrows. */
  color: rgba(255, 200, 130, 0.88) !important;
  text-shadow: 0 0 3px rgba(255, 140, 50, 0.14), 0 0 1px rgba(255, 180, 90, 0.20) !important;
  font-weight: 800 !important;
}

/* v007.32 Header #3 — DIRECTOR WORK interior header. Same as Pepper
   Chat — no own border, just gradient band, Layer 1 panel border
   wraps everything. */
.wbv-shell .workbench-pepper-workspace .workbench-director-rail__header,
.wbv-shell .workbench-pepper-workspace .workbench-director-rail > div:first-child,
.wbv-shell .workbench-pepper-workspace .workbench-director-rail > header:first-child {
  padding: 14px 16px !important;
  background: linear-gradient(180deg, rgba(255, 143, 58, 0.14) 0%, rgba(28, 29, 33, 0.0) 100%) !important;
  border: none !important;
  border-radius: var(--ws-glass-radius-inner) var(--ws-glass-radius-inner) 0 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.10) !important;
  display: flex !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin: -16px -16px 14px -16px !important;
  min-height: 64px !important;
}
.wbv-shell .workbench-pepper-workspace .workbench-director-rail__header span:first-child,
.wbv-shell .workbench-pepper-workspace .workbench-director-rail > div:first-child > span:first-child {
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  /* v007.38 Molten warm rail-header eyebrow + subtle glow.
     Operator 2026-05-22: applies to "DIRECTOR WORK" interior eyebrow. */
  color: rgba(255, 200, 130, 0.88) !important;
  text-shadow: 0 0 3px rgba(255, 140, 50, 0.14), 0 0 1px rgba(255, 180, 90, 0.20) !important;
  font-weight: 800 !important;
}
.wbv-shell .workbench-pepper-workspace .workbench-director-rail__header strong,
.wbv-shell .workbench-pepper-workspace .workbench-director-rail__header h2,
.wbv-shell .workbench-pepper-workspace .workbench-director-rail__header h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: rgba(249, 242, 232, 0.98) !important;
}

/* v007.34 Workspace top tab chips match BOTTOM RAIL CELL sizing
   exactly. Operator: "the top panel bubbles do not look like the
   bottom panel buttons". Bottom cell: padding 8px 12px, value 15px,
   label 9px. Top tab was padding 3px 10px, value 9.5px — way smaller.
   Now explicitly matching dimensions. */
.wbv-shell .workbench-pepper-workspace__context .workbench-status-pill,
.wbv-shell .workbench-pepper-workspace__context .wb-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  min-height: 66px !important;
  padding: 8px 12px !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  background: rgba(8, 12, 18, 0.78) !important;
  border: 1px solid rgba(255, 178, 90, 0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.16),
    inset 0 0 0 1px rgba(255, 178, 90, 0.18),
    0 0 10px rgba(255, 140, 50, 0.22),
    0 2px 6px rgba(0, 0, 0, 0.38) !important;
}
.wbv-shell .workbench-pepper-workspace__context .workbench-status-pill > span:first-child,
.wbv-shell .workbench-pepper-workspace__context .wb-card .wb-card__label {
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255, 200, 130, 0.92) !important;
  font-weight: 700 !important;
  margin-bottom: 2px !important;
}
.wbv-shell .workbench-pepper-workspace__context .workbench-status-pill strong,
.wbv-shell .workbench-pepper-workspace__context .wb-card .wb-card__value,
.wbv-shell .workbench-pepper-workspace__context .wb-card strong {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: rgba(247, 249, 242, 0.96) !important;
  white-space: normal !important;
}

/* v007.33 Section cards now match the DOCK COMPACT CARD recipe
   (probed from .workbench-pepper-dock__compact-card--governed-task)
   per operator: section cards in Director Work should look like the
   dock's compact "CURRENT GOVERNED TASK" card. */
.wbv-shell .workbench-pepper-workspace section,
.wbv-shell .workbench-pepper-workspace article,
.wbv-shell .workbench-pepper-workspace .workbench-prompt-composition,
.wbv-shell .workbench-pepper-workspace .workbench-manual-handoff-preview,
.wbv-shell .workbench-pepper-workspace .workbench-evidence-return-protocol,
.wbv-shell .workbench-pepper-workspace .workbench-lifecycle-block,
.wbv-shell .workbench-pepper-workspace .workbench-task-key-values,
.wbv-shell .workbench-pepper-workspace .workbench-proof-gates,
.wbv-shell .workbench-pepper-workspace .workbench-evidence-protocol-grid,
.wbv-shell .workbench-pepper-workspace .workbench-review-rubric,
.wbv-shell .workbench-pepper-workspace .workbench-evidence-proof-checklist,
.wbv-shell .workbench-pepper-workspace .workbench-director-next-safe-action,
.wbv-shell .workbench-pepper-workspace .workbench-protocol-breadcrumb,
.wbv-shell .workbench-pepper-workspace .workbench-task-meta {
  background: rgba(8, 12, 18, 0.82) !important;
  border: 1px solid rgba(255, 178, 90, 0.72) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 160, 0.18),
    inset 0 0 0 1px rgba(255, 178, 90, 0.20),
    0 0 0 1px rgba(255, 165, 65, 0.24),
    0 0 14px rgba(255, 140, 50, 0.20),
    0 4px 12px rgba(0, 0, 0, 0.36) !important;
  padding: 10px 12px !important;
  margin-bottom: 10px !important;
}
/* Section uppercase labels inside Pepper Workspace — molten orange */
.wbv-shell .workbench-pepper-workspace section > span:first-child,
.wbv-shell .workbench-pepper-workspace section > h3:first-child,
.wbv-shell .workbench-pepper-workspace section > h4:first-child,
.wbv-shell .workbench-pepper-workspace .workbench-task-key-values > div > span,
.wbv-shell .workbench-pepper-workspace .workbench-evidence-protocol-grid > div > span {
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: rgba(255, 178, 90, 0.92) !important;
  font-weight: 800 !important;
  display: block !important;
  margin-bottom: 6px !important;
}
/* Inline key/value pairs inside workspace task-key-values + protocol grid */
.wbv-shell .workbench-pepper-workspace .workbench-task-key-values > div,
.wbv-shell .workbench-pepper-workspace .workbench-evidence-protocol-grid > div {
  background: rgba(8, 11, 16, 0.55) !important;
  border: 1px solid rgba(255, 178, 90, 0.30) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  padding: 8px 10px !important;
  margin: 4px 0 !important;
}
.wbv-shell .workbench-pepper-workspace .workbench-task-key-values strong,
.wbv-shell .workbench-pepper-workspace .workbench-evidence-protocol-grid strong {
  color: rgba(247, 249, 242, 0.96) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
/* List rows (LANE IMPACTS / ALLOWED FILES / FINAL SCOPE) — each row a card */
.wbv-shell .workbench-pepper-workspace ul {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  list-style: none !important;
  padding: 0 !important;
}
.wbv-shell .workbench-pepper-workspace ul li {
  background: rgba(8, 11, 16, 0.55) !important;
  border: 1px solid rgba(255, 178, 90, 0.32) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  padding: 8px 12px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 215, 160, 0.08),
    0 2px 6px rgba(0, 0, 0, 0.28) !important;
  color: rgba(247, 249, 242, 0.94) !important;
}

/* v007.9c Ribbon chip alignment — operator: "still does not look good,
   not aligned chips are off". Force tier-1 chips uniform height +
   alignment; tier-2 same uniformity. */
.wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__row--identity .workbench-status-pill {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  min-height: 42px !important;
  max-height: 42px !important;
  min-width: 92px !important;
  padding: 4px 12px !important;
  vertical-align: middle !important;
}
.wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__row--status .workbench-status-pill {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  min-height: 30px !important;
  max-height: 30px !important;
  min-width: 78px !important;
  padding: 3px 10px !important;
  vertical-align: middle !important;
}
.wbv-shell .workbench-bottom-evidence-strip__cell .wb-card__label,
.wbv-shell .workbench-bottom-evidence-strip__cell > span:first-child {
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  color: rgba(255, 200, 130, 0.92) !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}
.wbv-shell .workbench-bottom-evidence-strip__cell .wb-card__value,
.wbv-shell .workbench-bottom-evidence-strip__cell > strong {
  color: rgba(247, 249, 242, 0.96) !important;
  font-size: 12px !important;
  margin-top: 2px !important;
}

/* v007.2c LEGACY single-row ribbon selectors retained for back-compat
   but the JSX class is now --two-tier; these no-op unless --ribbon
   is re-added. Kept as-is to avoid risk of unrelated cascade churn. */
.wbv-shell .forge-glass-surface.workbench-top-hero-band.workbench-top-hero-band--ribbon .workbench-status-pill {
  min-height: 38px !important;
  padding: 6px 12px !important;
}
.wbv-shell .forge-glass-surface.workbench-top-hero-band.workbench-top-hero-band--ribbon .workbench-status-pill span {
  font-size: 9.5px !important;
  letter-spacing: 0.14em !important;
  color: rgba(255, 200, 130, 0.96) !important;
}
.wbv-shell .forge-glass-surface.workbench-top-hero-band.workbench-top-hero-band--ribbon .workbench-status-pill strong {
  font-size: 12px !important;
  margin-top: 2px !important;
  color: rgba(247, 249, 242, 0.98) !important;
  font-weight: 700 !important;
}
.wbv-shell .forge-glass-surface.workbench-top-hero-band.workbench-top-hero-band--ribbon {
  height: 60px !important;
  max-height: 60px !important;
  padding: 6px 14px !important;
}
.wbv-shell .forge-glass-surface.workbench-top-hero-band.workbench-top-hero-band--ribbon .workbench-top-hero-band__os-value {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: rgba(255, 220, 160, 0.98) !important;
}
.wbv-shell .forge-glass-surface.workbench-top-hero-band.workbench-top-hero-band--ribbon .workbench-top-hero-band__os-label {
  font-size: 9.5px !important;
  letter-spacing: 0.18em !important;
  color: rgba(255, 178, 90, 0.95) !important;
}

/* v007.1b Spine parent-glow PERSIST when child selected — higher specificity.
   Operator screenshot: clicking Idea Intake under Build → Build's molten
   glow DISAPPEARS. The :has() rule must fire when a child is current.
   Adding .forge-glass-surface chain for specificity match against any
   prior rule that strips background on collapse states. */
.wbv-shell .forge-glass-surface.forge-glass-surface--spine .forge-spine-group[data-expanded="true"],
.wbv-shell .forge-glass-surface.forge-glass-surface--spine .forge-spine-group:has(.forge-spine-child[aria-current="true"]),
.wbv-shell .forge-glass-surface.workbench-os-spine .forge-spine-group[data-expanded="true"],
.wbv-shell .forge-glass-surface.workbench-os-spine .forge-spine-group:has(.forge-spine-child[aria-current="true"]),
.wbv-shell .forge-glass-surface.forge-glass-surface--spine .forge-spine-group[data-selected="true"],
.wbv-shell .forge-glass-surface.workbench-os-spine .forge-spine-group[data-selected="true"] {
  /* v007.52b matches the v3.7 data-selected recipe exactly. */
  background:
    linear-gradient(180deg, rgba(255,143,58,0.22) 0%, rgba(40,41,45,0.85) 100%) !important;
  border: 1px solid rgba(255, 143, 58, 0.95) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  box-shadow:
    0 0 22px rgba(255,143,58,0.32),
    inset 0 1px 0 rgba(255,143,58,0.55),
    inset 0 0 18px rgba(255,143,58,0.10) !important;
  padding: 4px !important;
  margin: 6px 0 !important;
}

/* v007.2 Spine non-selected bays: flat row, no box (operator: no separated boxes).
   The "boxes" operator sees are the INNER __select buttons. Strip their
   border/background by default; re-apply only when the bay is active. */
.wbv-shell .forge-glass-surface--spine .forge-spine-group,
.wbv-shell .workbench-os-spine .forge-spine-group {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 1px 0 !important;
}
/* Inner button: borderless flat row by default — this is the actual
   element that was rendering as "separated boxes". */
.wbv-shell .forge-glass-surface--spine .forge-spine-group .forge-spine-group__select,
.wbv-shell .workbench-os-spine .forge-spine-group .forge-spine-group__select,
.wbv-shell .forge-glass-surface--spine .forge-spine-group .forge-spine-group__expand,
.wbv-shell .workbench-os-spine .forge-spine-group .forge-spine-group__expand {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  box-shadow: none !important;
}
.wbv-shell .forge-glass-surface--spine .forge-spine-group .forge-spine-group__select:hover,
.wbv-shell .workbench-os-spine .forge-spine-group .forge-spine-group__select:hover,
.wbv-shell .forge-glass-surface--spine .forge-spine-group .forge-spine-group__expand:hover,
.wbv-shell .workbench-os-spine .forge-spine-group .forge-spine-group__expand:hover {
  background: rgba(255, 165, 65, 0.06) !important;
  border-color: var(--ws-molten-rim) !important;
}
/* When the bay is active (selected / expanded / child engaged), wrap
   the whole bay (header + children) in the molten surround. */
/* v007.52 STRONG glow on bay group matches the data-selected="true"
   recipe from v3.7 (line 16412) — so the bay looks identical whether
   you just clicked it OR you clicked one of its children. Operator
   2026-05-22 screenshot pair proved the bay was dimming on child
   click; this unifies all three states (data-selected / data-expanded
   / has-current-child) to the same strong glow. */
.wbv-shell .forge-glass-surface--spine .forge-spine-group[data-selected="true"],
.wbv-shell .workbench-os-spine .forge-spine-group[data-selected="true"],
.wbv-shell .forge-glass-surface--spine .forge-spine-group:has(.forge-spine-child[aria-current="true"]),
.wbv-shell .workbench-os-spine .forge-spine-group:has(.forge-spine-child[aria-current="true"]),
.wbv-shell .forge-glass-surface--spine .forge-spine-group[data-expanded="true"],
.wbv-shell .workbench-os-spine .forge-spine-group[data-expanded="true"] {
  background:
    linear-gradient(180deg, rgba(255,143,58,0.22) 0%, rgba(40,41,45,0.85) 100%) !important;
  border: 1px solid var(--wbv36-warm) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  box-shadow:
    0 0 22px rgba(255,143,58,0.32),
    inset 0 1px 0 rgba(255,143,58,0.55),
    inset 0 0 18px rgba(255,143,58,0.10) !important;
  padding: 4px !important;
  margin: 6px 0 !important;
}
/* Active-bay inner button stays transparent so we don't get nested rims. */
.wbv-shell .forge-glass-surface--spine .forge-spine-group[data-selected="true"] .forge-spine-group__select,
.wbv-shell .workbench-os-spine .forge-spine-group[data-selected="true"] .forge-spine-group__select,
.wbv-shell .forge-glass-surface--spine .forge-spine-group:has(.forge-spine-child[aria-current="true"]) .forge-spine-group__select,
.wbv-shell .workbench-os-spine .forge-spine-group:has(.forge-spine-child[aria-current="true"]) .forge-spine-group__select,
.wbv-shell .forge-glass-surface--spine .forge-spine-group[data-expanded="true"] .forge-spine-group__select,
.wbv-shell .workbench-os-spine .forge-spine-group[data-expanded="true"] .forge-spine-group__select {
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}

/* v007.3 Right dock — parent (workbench-panel-shell__side--right) controls
   vertical extent. Operator wants dock to extend like the LEFT spine. The
   left side parent is top:32 bottom:32; the right one matches. Inside the
   right parent, the dock has top:40 (to clear dev/edit pill) and bottom:0
   so it fills the parent to its bottom edge.

   v007.3-width (2026-05-22): operator: "the width needs to expand more to
   match left panel". Left side is min(20.5vw, 348px); right side was
   narrowed to min(16.4vw, 296px) by line 9372. Match left explicitly. */
.wbv-shell .workbench-panel-shell__side--right {
  top: 32px !important;
  bottom: 32px !important;
  width: min(20.5vw, 348px) !important;
}
.wbv-shell .workbench-pepper-dock,
.wbv-shell .forge-glass-surface.workbench-pepper-dock {
  top: 8px !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: auto !important;
  position: absolute !important;
}

/* v007.3-bis SUPERSEDED — the earlier v007.3 block above (top:8 bottom:0)
   is the correct rule; this duplicate was leftover from the failed first
   iteration and was overriding via later cascade position. Disabled. */

/* v007.4 Pepper Workspace full-page overlay (operator: overlay entire page) */
.wbv-shell .forge-glass-surface.workbench-pepper-workspace,
.wbv-shell .workbench-pepper-workspace {
  position: fixed !important;
  top: 14px !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 14px !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  z-index: 60 !important;
  overflow: auto !important;
}

/* v007.5 Mission Control agent chips + task card + chat panel + input.
   PARENT-INDEPENDENT selectors so they apply inside workbench-details-sheet. */
.wbv-shell .agent-chip-mini {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 36px !important;
  padding: 6px 12px !important;
  background: var(--ws-card-bg) !important;
  border: 1px solid rgba(255, 165, 65, 0.28) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 215, 160, 0.10),
    0 0 0 1px rgba(255, 140, 50, 0.06),
    0 4px 12px rgba(0, 0, 0, 0.36) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(247, 249, 242, 0.96) !important;
}
.wbv-shell .agent-chip-mini:hover {
  border-color: var(--ws-molten-warm) !important;
  background: rgba(255, 165, 65, 0.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 180, 0.16),
    0 0 0 1px rgba(255, 178, 90, 0.22),
    0 0 12px rgba(255, 140, 50, 0.22) !important;
}
.wbv-shell .agent-chip-initial {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 215, 160, 0.20) !important;
  font-weight: 800 !important;
  font-size: 12px !important;
}
.wbv-shell .agent-activity-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.wbv-shell .task-card {
  background: var(--ws-card-bg) !important;
  border: 1px solid var(--ws-molten-rim) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  box-shadow: var(--ws-card-shadow) !important;
  padding: 12px !important;
  backdrop-filter: blur(6px) !important;
}
.wbv-shell .task-meta {
  display: flex !important;
  gap: 10px !important;
  font-size: 9px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--ws-molten-warm) !important;
  margin-bottom: 6px !important;
}
.wbv-shell .task-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: rgba(247, 249, 242, 0.98) !important;
  margin-bottom: 8px !important;
}
.wbv-shell .task-actions {
  display: flex !important;
  gap: 6px !important;
  margin-top: 8px !important;
}
.wbv-shell .task-action {
  padding: 4px 10px !important;
  background: rgba(8, 12, 18, 0.65) !important;
  border: 1px solid rgba(255, 165, 65, 0.22) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  color: rgba(247, 249, 242, 0.92) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
.wbv-shell .task-action.primary {
  background: rgba(255, 165, 65, 0.14) !important;
  border-color: var(--ws-molten-rim-strong) !important;
  box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.16) !important;
}
.wbv-shell .workflow-top {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.wbv-shell .workflow-section-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ws-molten-warm) !important;
  margin-bottom: 6px !important;
}
.wbv-shell .workflow-honesty-note {
  font-size: 11px !important;
  color: rgba(247, 249, 242, 0.72) !important;
  margin-bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.wbv-shell .chat-panel {
  background: rgba(8, 12, 18, 0.55) !important;
  border: 1px solid var(--ws-molten-divider) !important;
  border-radius: var(--ws-glass-radius) !important;
  padding: 16px !important;
  box-shadow: var(--ws-card-shadow) !important;
  backdrop-filter: blur(6px) !important;
}
.wbv-shell .chat-conversation {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.wbv-shell .chat-input-wrap {
  margin-top: 16px !important;
  padding: 10px !important;
  background: var(--ws-card-bg) !important;
  border: 1px solid var(--ws-molten-rim) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  box-shadow: var(--ws-card-shadow) !important;
}
.wbv-shell .chat-input {
  width: 100% !important;
  background: rgba(8, 11, 16, 0.72) !important;
  border: 1px solid rgba(255, 165, 65, 0.20) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  color: rgba(247, 249, 242, 0.98) !important;
  padding: 8px 12px !important;
  font: inherit !important;
}
.wbv-shell .chat-input:focus {
  outline: none !important;
  border-color: var(--ws-molten-warm) !important;
  box-shadow: 0 0 0 1px rgba(255, 178, 90, 0.28), 0 0 10px rgba(255, 140, 50, 0.22) !important;
}
.wbv-shell .chat-input-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 8px !important;
  gap: 12px !important;
}
.wbv-shell .chat-input-hint {
  font-size: 11px !important;
  color: rgba(247, 249, 242, 0.7) !important;
}
.wbv-shell .btn-lavender {
  padding: 6px 14px !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  border: 1px solid var(--ws-molten-rim-strong) !important;
  background: rgba(255, 165, 65, 0.14) !important;
  color: rgba(255, 245, 220, 1) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 160, 0.18),
    0 0 0 1px rgba(255, 178, 90, 0.22),
    0 0 12px rgba(255, 140, 50, 0.22) !important;
}
.wbv-shell .pepper-avatar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: rgba(167, 119, 255, 0.18) !important;
  color: rgba(220, 200, 255, 0.96) !important;
  font-weight: 800 !important;
  border: 1px solid rgba(167, 119, 255, 0.45) !important;
  flex-shrink: 0 !important;
}
.wbv-shell .pepper-body {
  background: var(--ws-card-bg) !important;
  border: 1px solid var(--ws-molten-rim) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  padding: 10px 14px !important;
  box-shadow: var(--ws-card-shadow) !important;
}
.wbv-shell .mission-layout {
  display: grid !important;
  grid-template-columns: 360px minmax(0, 1fr) !important;
  gap: 16px !important;
}

/* v007.6 War-room-tile parent-independent */
.wbv-shell .war-room-tile {
  background: var(--ws-card-bg) !important;
  border: 1px solid rgba(255, 165, 65, 0.28) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  box-shadow: var(--ws-card-shadow) !important;
  backdrop-filter: blur(6px) !important;
  padding: 12px !important;
}
.wbv-shell .war-room-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 10px !important;
}

/* v007.7 .pill family parent-independent unified chip chassis */
.wbv-shell .pill {
  display: inline-flex !important;
  align-items: center !important;
  height: 18px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  background: rgba(8, 12, 18, 0.75) !important;
  border: 1px solid rgba(255, 165, 65, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 215, 160, 0.10),
    0 0 0 1px rgba(255, 140, 50, 0.04) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: rgba(247, 249, 242, 0.92) !important;
}
.wbv-shell .pill.pill-active { border-color: rgba(132, 224, 140, 0.55) !important; color: rgba(180, 240, 180, 0.96) !important; }
.wbv-shell .pill.pill-info { border-color: rgba(102, 198, 232, 0.45) !important; color: rgba(180, 220, 240, 0.96) !important; }
.wbv-shell .pill.pill-paused { border-color: rgba(225, 218, 168, 0.55) !important; color: rgba(245, 235, 180, 0.96) !important; }
.wbv-shell .pill.pill-danger { border-color: rgba(224, 104, 112, 0.60) !important; color: rgba(255, 200, 200, 0.96) !important; }

/* v007.8 Details button is now a CHILD of .workbench-bottom-evidence-strip
   __title (per JSX refactor in WorkbenchPanelShell.tsx). It sits in the
   title row's right side via flex layout — truly inside the rail. */
.wbv-shell .workbench-bottom-evidence-strip__title {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  position: relative !important;
}
.wbv-shell .workbench-bottom-evidence-strip__details-btn {
  margin-left: auto !important;
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 116px !important;
  height: 28px !important;
  padding: 0 14px !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  border: 1px solid var(--ws-molten-rim-strong) !important;
  background: var(--ws-card-bg-strong) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 160, 0.14),
    inset 0 0 0 1px rgba(255, 178, 90, 0.16),
    0 0 0 1px rgba(255, 165, 65, 0.16),
    0 0 10px rgba(255, 140, 50, 0.20),
    0 4px 12px rgba(0, 0, 0, 0.48) !important;
  color: rgba(247, 249, 242, 0.98) !important;
  font: 700 10px/1 inherit !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transform: none !important;
  top: auto !important;
  right: auto !important;
}
.wbv-shell .workbench-bottom-evidence-strip__details-btn:hover,
.wbv-shell .workbench-bottom-evidence-strip__details-btn[aria-expanded="true"] {
  border-color: var(--ws-molten-warm) !important;
  background: rgba(255, 165, 65, 0.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 180, 0.20),
    inset 0 0 0 1px rgba(255, 200, 110, 0.26),
    0 0 0 1px rgba(255, 178, 90, 0.32),
    0 0 16px rgba(255, 140, 50, 0.32),
    0 6px 16px rgba(0, 0, 0, 0.52) !important;
}
.wbv-shell .workbench-bottom-evidence-strip__details-btn::before {
  display: none !important;
}

/* v007.35 Director Work tabs (Director/Handoff/Evidence/Preview) match
   BOTTOM RAIL CELL recipe + stronger active-state glow so the
   currently-viewed tab is clearly distinct.
   Operator 2026-05-22: "the director handoff evidence and preview
   buttons need the same treatment. Also based on what tab is currently
   being view the glow needs to stay so you know what tab you are
   currently viewing".
   Cascade: this block lands AFTER all v007.16c/v007.18/director-tabs
   selectors above so it wins source-order at equal specificity.
   Selector chain reaches deeper than the v007.16c block to clinch. */
.wbv-shell .workbench-pepper-workspace .workbench-director-rail .workbench-director-tabs button:not(.workbench-details-sheet__close):not(.forge-spine-group):not(.panel-mockup-detail-tab),
.wbv-shell .workbench-pepper-workspace .workbench-director-tabs button:not(.workbench-details-sheet__close):not(.forge-spine-group):not(.panel-mockup-detail-tab) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  padding: 8px 14px !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  background: rgba(8, 12, 18, 0.78) !important;
  border: 1px solid rgba(255, 178, 90, 0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.10),
    0 0 8px rgba(255, 140, 50, 0.14),
    0 2px 6px rgba(0, 0, 0, 0.36) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(232, 224, 210, 0.88) !important;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 200ms ease, color 160ms ease !important;
}
.wbv-shell .workbench-pepper-workspace .workbench-director-rail .workbench-director-tabs button:not(.workbench-details-sheet__close):not(.forge-spine-group):not(.panel-mockup-detail-tab):hover,
.wbv-shell .workbench-pepper-workspace .workbench-director-tabs button:not(.workbench-details-sheet__close):not(.forge-spine-group):not(.panel-mockup-detail-tab):hover {
  background: rgba(14, 20, 28, 0.84) !important;
  border-color: rgba(255, 200, 110, 0.72) !important;
  color: rgba(255, 235, 200, 0.96) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.16),
    0 0 12px rgba(255, 140, 50, 0.26),
    0 3px 8px rgba(0, 0, 0, 0.40) !important;
}
/* Active tab (aria-selected="true") — STRONGER persistent warm glow
   so the operator can see at a glance which tab is being viewed.
   Triple :not() bumps specificity to win against v004.9 forge-glass
   button rule at line 17366. */
.wbv-shell .workbench-pepper-workspace .workbench-director-rail .workbench-director-tabs button[aria-selected="true"]:not(.workbench-details-sheet__close):not(.forge-spine-group):not(.panel-mockup-detail-tab),
.wbv-shell .workbench-pepper-workspace .workbench-director-tabs button[aria-selected="true"]:not(.workbench-details-sheet__close):not(.forge-spine-group):not(.panel-mockup-detail-tab),
.wbv-shell .workbench-pepper-workspace .workbench-director-rail .workbench-director-tabs button.active:not(.workbench-details-sheet__close):not(.forge-spine-group):not(.panel-mockup-detail-tab),
.wbv-shell .workbench-pepper-workspace .workbench-director-tabs button.active:not(.workbench-details-sheet__close):not(.forge-spine-group):not(.panel-mockup-detail-tab) {
  background: rgba(255, 165, 65, 0.14) !important;
  border-color: rgba(255, 205, 120, 0.92) !important;
  color: rgba(255, 244, 220, 1) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 185, 0.24),
    inset 0 0 0 1px rgba(255, 200, 110, 0.32),
    0 0 18px rgba(255, 145, 55, 0.48),
    0 0 0 1px rgba(255, 178, 90, 0.40),
    0 4px 10px rgba(0, 0, 0, 0.48) !important;
}

/* v007.36 Neutralize OUTER wrappers that hold inner card grids — the
   inner cards should BE the panels, not wrapped in another bordered
   panel. Operator 2026-05-22 (Director tab + Evidence tab): "There
   is an extra base governed actions panel that needs to be removed.
   The governed actions should be what that current base blank panel
   is" + "Same issue ... base blank panel with border that needs to
   be removed".

   Wrappers neutralized:
   1. GovernedActionsPanel outer <section> (Director tab) — keeps the
      "Governed actions" header + status chip visible but strips the
      surrounding card chrome so the action <article> inside is the
      visible panel.
   2. .workbench-evidence-protocol-grid (Evidence tab) — strips the
      outer card chrome so the two inner <article> cards (Required
      Returned Evidence Packet Anatomy + Review Classification Rubric)
      are the panels.

   Triple :not() chains used to match/beat v007.33 specificity at
   line 19282 (.workbench-pepper-workspace section/article/...). */
.wbv-shell .workbench-pepper-workspace .workbench-director-rail [data-testid="workbench-governed-actions-panel"]:not(.workbench-details-sheet__close):not(.forge-spine-group):not(.panel-mockup-detail-tab),
.wbv-shell .workbench-pepper-workspace .workbench-evidence-protocol-grid:not(.workbench-details-sheet__close):not(.forge-spine-group):not(.panel-mockup-detail-tab) {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}
/* Keep the grid's gap layout for evidence — inner cards still flow
   side-by-side as defined in the v6.4 base. */
.wbv-shell .workbench-pepper-workspace .workbench-evidence-protocol-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

/* v007.37 Neutralize the Review Classification Rubric outer wrappers.
   Operator 2026-05-22: same issue as governed actions + protocol grid
   — the outer <article> AND the inner .workbench-review-rubric div
   are BOTH bordered, creating a 3-border-deep nest around the
   Pass / Correction-needed / Blocked inner cards (which already get
   their own chip borders via v007.18b at line 18586). Strip both
   outer wrappers so the rubric category cards (Pass / Correction-
   needed / Blocked) are the panels.
   The LEFT column (Required Returned Evidence Packet Anatomy) keeps
   its outer card chrome because its inner items are short single-
   line chips that benefit from visual grouping. */
.wbv-shell .workbench-pepper-workspace .workbench-evidence-protocol-grid > article:has(.workbench-review-rubric):not(.workbench-details-sheet__close):not(.forge-spine-group):not(.panel-mockup-detail-tab),
.wbv-shell .workbench-pepper-workspace .workbench-review-rubric:not(.workbench-details-sheet__close):not(.forge-spine-group):not(.panel-mockup-detail-tab) {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}
/* Keep the rubric stack flowing vertically with a tight gap between
   the inner Pass / Correction-needed / Blocked cards. */
.wbv-shell .workbench-pepper-workspace .workbench-review-rubric {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
/* Make sure the "Review classification rubric" label still reads as
   a section heading now that its surrounding article chrome is gone. */
.wbv-shell .workbench-pepper-workspace .workbench-evidence-protocol-grid > article:has(.workbench-review-rubric) > span:first-child {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: rgba(255, 200, 130, 0.88) !important;
  margin-bottom: 6px !important;
}

/* v007.39 Pepper General Chat tile eyebrows + titles get the same
   molten-warm treatment as workspace section labels.
   Operator 2026-05-22: "now all those type of titles need the same
   treatment. Example Pepper - Ready, KB, War Room, Goldmine, Neuropath
   ... get the subtle glow orange text then their sub title i believe
   it is stays white with a very subtle glow."
   - Eyebrows ("PEPPER — READY", "KB", "WAR ROOM", "GOLDMINE", "NEUROPATH")
     → molten warm + subtle glow (matches v007.38 toned-down values).
   - Sub-titles ("Ask Pepper...", "Knowledge Library — ...", etc.)
     → stay white but pick up a very subtle warm glow. */
.wbv-shell .workbench-pepper-workspace .pepper-empty {
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* G-PC1 phase 2: .pepper-empty__bottom-anchor removed from component;
   SubstrateTile cards replaced by compact context pill rail. */
/* G-DC3 correction-44: switch layout from grid to flexbox for resizable panels */
.wbv-shell .workbench-pepper-workspace .workbench-pepper-workspace__layout {
  display: flex !important;
  grid-template-columns: none !important;
}

/* G-DC3 correction-44: draggable resize handle between left/right panels */
.pepper-workspace-resize-handle {
  flex: 0 0 6px;
  cursor: col-resize;
  background: rgba(178, 205, 188, 0.12);
  border-left: 1px solid rgba(255, 178, 90, 0.25);
  border-right: 1px solid rgba(255, 178, 90, 0.25);
  transition: background 0.15s;
  position: relative;
  z-index: 2;
  touch-action: none;
}
.pepper-workspace-resize-handle:hover,
.pepper-workspace-resize-handle:active {
  background: rgba(255, 178, 90, 0.28);
}
.pepper-workspace-resize-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 32px;
  border-radius: 1px;
  background: rgba(255, 178, 90, 0.55);
}
.pepper-workspace-resize-handle:hover::after,
.pepper-workspace-resize-handle:active::after {
  background: rgba(255, 178, 90, 0.85);
  height: 48px;
}

/* G-DC3 correction-43: expand bottom sections edge-to-edge with
   parent frame borders (negate padding so elements blend seamlessly). */
/* G-DC3 correction-43 edge-to-edge expansion (legacy selectors kept for
   backward-compat; G-PC1 adds pepper-chat-control-bar to the list). */
.wbv-shell .workbench-pepper-workspace .workbench-pepper-chat > .workbench-pepper-chat__composer,
.wbv-shell .workbench-pepper-workspace .workbench-pepper-chat > .workbench-pepper-chat__context-row,
.wbv-shell .workbench-pepper-workspace .workbench-pepper-chat > .workbench-pepper-chat__draft-footer,
.wbv-shell .workbench-pepper-workspace .workbench-pepper-chat > .workbench-pepper-chat__no-runtime-note,
.wbv-shell .workbench-pepper-workspace .workbench-pepper-chat > .pepper-prompt-suite,
.wbv-shell .workbench-pepper-workspace .workbench-pepper-chat > details {
  margin-left: -16px !important;
  margin-right: -16px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}
/* Right panel: expand chip rail + stage badge row to rail frame edges */
.wbv-shell .workbench-pepper-workspace [data-cockpit-region="stage-agent-chip-rail"] {
  margin-left: -16px !important;
  margin-right: -19px !important;
  padding-left: 16px !important;
  padding-right: 19px !important;
}
.wbv-shell .pepper-empty__eyebrow {
  color: rgba(255, 200, 130, 0.88) !important;
  text-shadow: 0 0 3px rgba(255, 140, 50, 0.14), 0 0 1px rgba(255, 180, 90, 0.20) !important;
}
.wbv-shell .pepper-empty__head > strong,
.wbv-shell .pepper-empty__head > h1,
.wbv-shell .pepper-empty__head > h2,
.wbv-shell .pepper-empty__head > p {
  text-shadow: 0 0 2px rgba(255, 220, 180, 0.16), 0 0 1px rgba(255, 200, 140, 0.12) !important;
}

/* v007.40 ComfyUI glass backing for ALL card surfaces in the Pepper
   Workspace — Director Work section cards + inner action card.
   Operator 2026-05-22: "now all these need their own comfyUI glass
   backing. does that make sense now how you build panels on top of
   panels and add bubbles etc?"

   The cards already have the warm rim + inset highlight + outer halo
   (v007.33 dock-card recipe). Missing piece: `backdrop-filter: blur`
   so the cards read as frosted glass layered ON the workspace base
   rather than as opaque dark surfaces. Adding the blur + a subtle
   linear-gradient highlight at the top so the surface has tonal
   variation like the rest of our comfyUI layered glass.

   Targets (G-PC1 phase 2: .pepper-empty__tile removed — replaced
   by compact context pills):
   - .workbench-pepper-workspace .workbench-director-rail article — section cards
   - .workbench-pepper-workspace .workbench-director-rail section — section cards
   - [data-action-id] — the inner Sync local main action card
   - .workbench-director-tabs — the tabs row container (subtle inner shelf)
   - .workbench-evidence-block, .workbench-prompt-composition,
     .workbench-manual-handoff-preview, .workbench-lifecycle-block,
     .workbench-task-key-values — other workspace surface cards
*/
.wbv-shell .workbench-pepper-workspace .workbench-director-rail article:not([data-testid="workbench-governed-actions-panel"]):not(.workbench-details-sheet__close):not(.forge-spine-group):not(.panel-mockup-detail-tab),
.wbv-shell .workbench-pepper-workspace .workbench-director-rail > section:not([data-testid="workbench-director-governed-actions-section"]):not(.workbench-director-rail):not(.workbench-details-sheet__close):not(.forge-spine-group):not(.panel-mockup-detail-tab),
.wbv-shell .workbench-pepper-workspace .workbench-director-panel section:not(.workbench-details-sheet__close):not(.forge-spine-group):not(.panel-mockup-detail-tab),
.wbv-shell .workbench-pepper-workspace [data-action-id]:not(.workbench-details-sheet__close):not(.forge-spine-group):not(.panel-mockup-detail-tab),
.wbv-shell .workbench-pepper-workspace .workbench-evidence-block:not(.workbench-details-sheet__close):not(.forge-spine-group):not(.panel-mockup-detail-tab),
.wbv-shell .workbench-pepper-workspace .workbench-prompt-composition:not(.workbench-details-sheet__close):not(.forge-spine-group):not(.panel-mockup-detail-tab),
.wbv-shell .workbench-pepper-workspace .workbench-manual-handoff-preview:not(.workbench-details-sheet__close):not(.forge-spine-group):not(.panel-mockup-detail-tab),
.wbv-shell .workbench-pepper-workspace .workbench-lifecycle-block:not(.workbench-details-sheet__close):not(.forge-spine-group):not(.panel-mockup-detail-tab),
.wbv-shell .workbench-pepper-workspace .workbench-task-key-values:not(.workbench-details-sheet__close):not(.forge-spine-group):not(.panel-mockup-detail-tab),
.wbv-shell .workbench-pepper-workspace .dc-panel__body {
  /* Layered comfyUI glass: gradient top-highlight over translucent
     warm-tinted dark base, with backdrop blur so the warm workspace
     base bleeds through subtly. */
  background:
    linear-gradient(180deg, rgba(255, 220, 165, 0.06) 0%, rgba(255, 178, 90, 0.02) 36%, rgba(0, 0, 0, 0) 100%),
    rgba(10, 14, 20, 0.62) !important;
  backdrop-filter: blur(10px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(125%) !important;
  border: 1px solid rgba(255, 178, 90, 0.55) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.18),
    inset 0 0 0 1px rgba(255, 178, 90, 0.16),
    0 0 0 1px rgba(255, 165, 65, 0.20),
    0 0 14px rgba(255, 140, 50, 0.18),
    0 4px 14px rgba(0, 0, 0, 0.42) !important;
}
/* v007.41 Top context chips (WORKSPACE / SYSTEM / AUTHORITY / STATE /
   MODE) get the same comfyUI glass recipe as the workspace surface
   cards. Operator 2026-05-22: "now also the workspace system
   authority state mode all bubbles including those top panels need
   the same treatment." Matches the v007.40 recipe (gradient highlight
   + translucent warm-tinted base + backdrop blur + warm rim + glow). */
.wbv-shell .workbench-pepper-workspace__context .workbench-status-pill:not(.workbench-details-sheet__close):not(.forge-spine-group):not(.panel-mockup-detail-tab),
.wbv-shell .workbench-pepper-workspace__context .wb-card:not(.workbench-details-sheet__close):not(.forge-spine-group):not(.panel-mockup-detail-tab) {
  background:
    linear-gradient(180deg, rgba(255, 220, 165, 0.06) 0%, rgba(255, 178, 90, 0.02) 36%, rgba(0, 0, 0, 0) 100%),
    rgba(10, 14, 20, 0.62) !important;
  backdrop-filter: blur(10px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(125%) !important;
  border: 1px solid rgba(255, 178, 90, 0.55) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.18),
    inset 0 0 0 1px rgba(255, 178, 90, 0.16),
    0 0 0 1px rgba(255, 165, 65, 0.20),
    0 0 14px rgba(255, 140, 50, 0.18),
    0 4px 14px rgba(0, 0, 0, 0.42) !important;
}
/* v007.45 PROPAGATE the Pepper Workspace comfyUI glass treatment to
   ALL left-spine drill-down surfaces (Build / Projects / Review /
   Knowledge / War Room / Actions / Settings + every sub-category).
   Operator 2026-05-22: "now just like how we built this pepper
   workspace, is exactly how all left menu flyout windows and all
   subcategories that open need to be updated as far as design /
   layering applying glass / top rails glows etc."

   Shared drill-down classes mapped 2026-05-22:
   - .wbv-bay-surface / .wb-panel-shell  → outer chrome (workspace base)
   - .wb-header-band                      → top header band (warm grad)
   - .wbv-category-bubble                 → category panels (comfyUI glass)
   - .wbv-tab-strip                       → tab row (transparent)
   - .wbv-tab / .wb-tab-pill              → tab chips (bottom-rail recipe)
   - .wbv-presentation-area               → main content area (transparent)
   - .forge-surface-panel__closure-path   → closure chip
*/

/* ---- Outer bay surface chrome ---- */
.wbv-shell .wbv-bay-surface,
.wbv-shell .wb-panel-shell {
  background:
    linear-gradient(180deg, rgba(255, 143, 58, 0.06) 0%, rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 100%),
    rgba(10, 14, 20, 0.72) !important;
  backdrop-filter: blur(14px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(125%) !important;
  border: 1px solid rgba(255, 178, 90, 0.55) !important;
  border-radius: 12px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.18),
    inset 0 0 0 1px rgba(255, 178, 90, 0.12),
    0 0 0 1px rgba(255, 165, 65, 0.18),
    0 0 18px rgba(255, 140, 50, 0.18),
    0 8px 24px rgba(0, 0, 0, 0.48) !important;
}

/* ---- Bay top header band (warm gradient, like workspace header) ----
   Selectors chained to BEAT the v007.12 leftover rule at line 18950
   (`.forge-surface-panel__body section header`) which had (0,3,2)
   specificity. Adding the `.wb-header-band` class onto the same chain
   matches its specificity + wins source order. */
.wbv-shell .wb-header-band,
.wbv-shell .forge-surface-panel__body section header.wb-header-band,
.wbv-shell .forge-surface-panel__body .wbv-bay-surface header.wb-header-band {
  background:
    linear-gradient(180deg, rgba(255, 143, 58, 0.14) 0%, rgba(255, 143, 58, 0.04) 60%, rgba(0, 0, 0, 0) 100%),
    rgba(10, 14, 20, 0.46) !important;
  backdrop-filter: blur(10px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(125%) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 178, 90, 0.22) !important;
  border-radius: 8px 8px 0 0 !important;
  padding: 12px 14px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.20),
    0 0 14px rgba(255, 140, 50, 0.10) !important;
}

/* ---- Category bubbles (BUILD / SESSION / AUDIT / CAPTURE / OPS) ---- */
.wbv-shell .wbv-category-bubble {
  background:
    linear-gradient(180deg, rgba(255, 220, 165, 0.06) 0%, rgba(255, 178, 90, 0.02) 36%, rgba(0, 0, 0, 0) 100%),
    rgba(10, 14, 20, 0.62) !important;
  backdrop-filter: blur(10px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(125%) !important;
  border: 1px solid rgba(255, 178, 90, 0.55) !important;
  border-radius: 10px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.18),
    inset 0 0 0 1px rgba(255, 178, 90, 0.14),
    0 0 0 1px rgba(255, 165, 65, 0.18),
    0 0 14px rgba(255, 140, 50, 0.18),
    0 4px 14px rgba(0, 0, 0, 0.40) !important;
  padding: 12px 14px !important;
}
.wbv-shell .wbv-category-bubble__label,
.wbv-shell .wbv-category-bubble__head > span:first-child {
  color: rgba(255, 200, 130, 0.92) !important;
  text-shadow: 0 0 3px rgba(255, 140, 50, 0.14), 0 0 1px rgba(255, 180, 90, 0.20) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}
.wbv-shell .wbv-category-bubble__count {
  color: rgba(255, 200, 130, 0.88) !important;
  text-shadow: 0 0 3px rgba(255, 140, 50, 0.14) !important;
}

/* ---- Tab strip (transparent row, chips do the work) ---- */
.wbv-shell .wbv-tab-strip,
.wbv-shell .wb-tab-strip {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 0 10px 0 !important;
  gap: 6px !important;
}
/* Tab chips — bottom-rail-cell recipe + warm active glow */
.wbv-shell .wbv-tab,
.wbv-shell .wb-tab-pill {
  background: rgba(8, 12, 18, 0.78) !important;
  border: 1px solid rgba(255, 178, 90, 0.42) !important;
  border-radius: 8px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.10),
    0 0 8px rgba(255, 140, 50, 0.14),
    0 2px 6px rgba(0, 0, 0, 0.36) !important;
  color: rgba(232, 224, 210, 0.88) !important;
  letter-spacing: 0.10em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 200ms ease, color 160ms ease !important;
  padding: 8px 14px !important;
}
.wbv-shell .wbv-tab:hover,
.wbv-shell .wb-tab-pill:hover {
  background: rgba(14, 20, 28, 0.84) !important;
  border-color: rgba(255, 200, 110, 0.72) !important;
  color: rgba(255, 235, 200, 0.96) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.16),
    0 0 12px rgba(255, 140, 50, 0.26),
    0 3px 8px rgba(0, 0, 0, 0.40) !important;
}
.wbv-shell .wbv-tab[aria-selected="true"],
.wbv-shell .wbv-tab[data-active="true"],
.wbv-shell .wbv-tab.active,
.wbv-shell .wb-tab-pill[aria-selected="true"],
.wbv-shell .wb-tab-pill[data-active="true"],
.wbv-shell .wb-tab-pill.active {
  background: rgba(255, 165, 65, 0.14) !important;
  border-color: rgba(255, 205, 120, 0.92) !important;
  color: rgba(255, 244, 220, 1) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 185, 0.24),
    inset 0 0 0 1px rgba(255, 200, 110, 0.32),
    0 0 18px rgba(255, 145, 55, 0.48),
    0 0 0 1px rgba(255, 178, 90, 0.40),
    0 4px 10px rgba(0, 0, 0, 0.48) !important;
}

/* ---- Bay header titles get the molten-warm + subtle glow treatment ---- */
.wbv-shell .wb-header-band__title,
.wbv-shell .wbv-bay-header__title {
  color: rgba(255, 200, 130, 0.92) !important;
  text-shadow: 0 0 3px rgba(255, 140, 50, 0.14), 0 0 1px rgba(255, 180, 90, 0.20) !important;
}
.wbv-shell .wb-header-band__heading,
.wbv-shell .wbv-bay-header__leaf {
  color: rgba(249, 242, 232, 0.98) !important;
  text-shadow: 0 0 2px rgba(255, 220, 180, 0.16), 0 0 1px rgba(255, 200, 140, 0.12) !important;
}
.wbv-shell .wb-header-band__desc,
.wbv-shell .wbv-bay-header__desc {
  color: rgba(232, 224, 210, 0.78) !important;
}

/* v007.48 SUPERSEDE v007.12 grey treatment on forge-surface-panel body
   sections. Operator 2026-05-22 sweep: child-surface fallback views
   (V1 SURFACE STATUS / WHAT THIS CHILD SURFACE REPRESENTS / BAY
   CONTEXT) were still showing the rgb(32,33,37) grey from v007.12.
   Upgrade all forge-surface-panel body section containers + their
   inner headers/articles to the comfyUI warm-glass recipe. */
.wbv-shell .forge-surface-panel__body section section,
.wbv-shell .forge-surface-panel__body section header,
.wbv-shell .forge-surface-panel__body > section > article,
.wbv-shell .forge-surface-panel__body .workbench-surfaced-truth,
.wbv-shell .forge-surface-panel__body .workbench-people-map,
.wbv-shell .forge-surface-panel__body .workbench-build-flow {
  background:
    linear-gradient(180deg, rgba(255, 220, 165, 0.05) 0%, rgba(255, 178, 90, 0.02) 36%, rgba(0, 0, 0, 0) 100%),
    rgba(10, 14, 20, 0.62) !important;
  backdrop-filter: blur(8px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
  border: 1px solid rgba(255, 178, 90, 0.45) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.14),
    inset 0 0 0 1px rgba(255, 178, 90, 0.12),
    0 0 12px rgba(255, 140, 50, 0.14),
    0 3px 10px rgba(0, 0, 0, 0.38) !important;
  padding: 10px 12px !important;
}
/* The closure-path chip inside body sections gets a separate inner
   chip recipe — already covered by .forge-surface-panel__closure-path
   above; this just ensures the wrapping label is molten warm. */
.wbv-shell .forge-surface-panel__body section header > strong,
.wbv-shell .forge-surface-panel__body section header > span:first-child {
  color: rgba(255, 200, 130, 0.92) !important;
  text-shadow: 0 0 3px rgba(255, 140, 50, 0.14), 0 0 1px rgba(255, 180, 90, 0.20) !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

/* v007.47 Build bay surfaces — build-new-card / textarea / step pills.
   Operator 2026-05-22 sweep request: every bay needs uniform glass.
   - .build-new-card     → upgrade weak white-rim glass to warm rim recipe
   - .build-new-input    → solid grey textarea → translucent glass field
   - .build-new-step-pill → cold border, no active distinction → bottom-
                            rail recipe + strong warm glow on .current */
.wbv-shell .build-new-card {
  background:
    linear-gradient(180deg, rgba(255, 220, 165, 0.06) 0%, rgba(255, 178, 90, 0.02) 36%, rgba(0, 0, 0, 0) 100%),
    rgba(10, 14, 20, 0.62) !important;
  backdrop-filter: blur(10px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(125%) !important;
  border: 1px solid rgba(255, 178, 90, 0.55) !important;
  border-radius: 10px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.18),
    inset 0 0 0 1px rgba(255, 178, 90, 0.14),
    0 0 0 1px rgba(255, 165, 65, 0.18),
    0 0 14px rgba(255, 140, 50, 0.18),
    0 4px 14px rgba(0, 0, 0, 0.40) !important;
}
.wbv-shell .build-new-input,
.wbv-shell textarea.build-new-input,
.wbv-shell .wbv-bay-surface textarea,
.wbv-shell .wbv-bay-surface input[type="text"],
.wbv-shell .wbv-bay-surface input:not([type]) {
  background: rgba(8, 12, 18, 0.78) !important;
  border: 1px solid rgba(255, 178, 90, 0.42) !important;
  border-radius: 8px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.10),
    inset 0 0 0 1px rgba(255, 178, 90, 0.10),
    0 0 8px rgba(255, 140, 50, 0.10),
    0 2px 6px rgba(0, 0, 0, 0.32) !important;
  color: rgba(247, 249, 242, 0.96) !important;
  padding: 10px 12px !important;
  transition: border-color 160ms ease, box-shadow 200ms ease !important;
}
.wbv-shell .build-new-input:focus,
.wbv-shell .wbv-bay-surface textarea:focus,
.wbv-shell .wbv-bay-surface input:focus {
  outline: none !important;
  border-color: rgba(255, 200, 110, 0.78) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.18),
    0 0 14px rgba(255, 140, 50, 0.28),
    0 2px 8px rgba(0, 0, 0, 0.36) !important;
}
/* Step pills — bottom-rail recipe + strong active glow */
.wbv-shell .build-new-step-pill {
  background: rgba(8, 12, 18, 0.78) !important;
  border: 1px solid rgba(255, 178, 90, 0.42) !important;
  border-radius: 8px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.10),
    0 0 8px rgba(255, 140, 50, 0.14),
    0 2px 6px rgba(0, 0, 0, 0.36) !important;
  color: rgba(232, 224, 210, 0.86) !important;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 200ms ease !important;
}
.wbv-shell .build-new-step-pill.current,
.wbv-shell .build-new-step-pill[aria-current="step"],
.wbv-shell .build-new-step-pill[data-active="true"] {
  background: rgba(255, 165, 65, 0.14) !important;
  border-color: rgba(255, 205, 120, 0.92) !important;
  color: rgba(255, 244, 220, 1) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 185, 0.24),
    inset 0 0 0 1px rgba(255, 200, 110, 0.32),
    0 0 18px rgba(255, 145, 55, 0.48),
    0 0 0 1px rgba(255, 178, 90, 0.40),
    0 4px 10px rgba(0, 0, 0, 0.48) !important;
}
.wbv-shell .build-new-step-pill-num {
  color: rgba(255, 200, 130, 0.92) !important;
  text-shadow: 0 0 3px rgba(255, 140, 50, 0.14) !important;
}

/* v007.57 Review > Evidence Console / Mission Control — left agents
   column + right chat panel get the comfyUI glass treatment.
   Operator 2026-05-22: "review, evidence console and mission control
   all the same two agents/chat panels but they are missing the glass
   panels".
   Targets:
   - .workflow-top — left agents column (was cool grey rgb(42,39,48))
   - .chat-panel — right chat column (had weak warm border alpha 0.26)
   - .agent-activity-row — inner agent rows container (was solid dark)
   - .mission-layout — outer wrapper (was solid dark) */
/* v007.57c DCLA Review matrix table + similar usage-builds tables get
   the comfyUI glass treatment. Operator 2026-05-22: "missing glass
   panel" — the matrix container was solid cold grey rgb(22,23,27). */
.wbv-shell .usage-builds-table {
  background:
    linear-gradient(180deg, rgba(255, 220, 165, 0.05) 0%, rgba(255, 178, 90, 0.02) 36%, rgba(0, 0, 0, 0) 100%),
    rgba(10, 14, 20, 0.62) !important;
  backdrop-filter: blur(10px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(125%) !important;
  border: 1px solid rgba(255, 178, 90, 0.55) !important;
  border-radius: 10px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.18),
    inset 0 0 0 1px rgba(255, 178, 90, 0.14),
    0 0 0 1px rgba(255, 165, 65, 0.18),
    0 0 14px rgba(255, 140, 50, 0.18),
    0 4px 14px rgba(0, 0, 0, 0.40) !important;
  overflow: hidden !important;
}
.wbv-shell .usage-builds-table tr,
.wbv-shell .usage-builds-table td,
.wbv-shell .usage-builds-table th {
  background: transparent !important;
  border-color: rgba(255, 178, 90, 0.10) !important;
}

.wbv-shell .chat-input-wrap {
  /* v007.57b Chat input area gets the same glass treatment as the
     chat panel above. Operator 2026-05-22: "missing glass?" on the
     red-boxed chat input area. */
  background:
    linear-gradient(180deg, rgba(255, 220, 165, 0.06) 0%, rgba(255, 178, 90, 0.02) 36%, rgba(0, 0, 0, 0) 100%),
    rgba(10, 14, 20, 0.62) !important;
  backdrop-filter: blur(10px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(125%) !important;
  border: 1px solid rgba(255, 178, 90, 0.55) !important;
  border-radius: 10px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.18),
    inset 0 0 0 1px rgba(255, 178, 90, 0.14),
    0 0 0 1px rgba(255, 165, 65, 0.18),
    0 0 14px rgba(255, 140, 50, 0.18),
    0 4px 14px rgba(0, 0, 0, 0.40) !important;
  padding: 14px !important;
}
.wbv-shell .workflow-top,
.wbv-shell .chat-panel {
  background:
    linear-gradient(180deg, rgba(255, 220, 165, 0.06) 0%, rgba(255, 178, 90, 0.02) 36%, rgba(0, 0, 0, 0) 100%),
    rgba(10, 14, 20, 0.62) !important;
  backdrop-filter: blur(10px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(125%) !important;
  border: 1px solid rgba(255, 178, 90, 0.55) !important;
  border-radius: 10px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.18),
    inset 0 0 0 1px rgba(255, 178, 90, 0.14),
    0 0 0 1px rgba(255, 165, 65, 0.18),
    0 0 14px rgba(255, 140, 50, 0.18),
    0 4px 14px rgba(0, 0, 0, 0.40) !important;
  padding: 14px !important;
}
.wbv-shell .agent-activity-row {
  background: transparent !important;
  border: 0 !important;
}
.wbv-shell .mission-layout {
  background: transparent !important;
  gap: 16px !important;
}

/* v007.46 Inner agent cards + meta-tag bubbles inside drill-down
   surfaces. Operator 2026-05-22 (War Room > Personas / Souls): "item
   cards and bubbles need to be updated."
   Targets:
   - .memory-card — agent card container (was cold rgba 30/32/39/0.52)
   - .memory-card-title — card title (gets molten warm tint)
   - .skill-meta-tag — MODEL BINDING / RUNTIME / SOURCE bubbles
     (was rgb(13,15,19) with faint white border) */
.wbv-shell .memory-card {
  background:
    linear-gradient(180deg, rgba(255, 220, 165, 0.06) 0%, rgba(255, 178, 90, 0.02) 36%, rgba(0, 0, 0, 0) 100%),
    rgba(10, 14, 20, 0.62) !important;
  backdrop-filter: blur(10px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(125%) !important;
  border: 1px solid rgba(255, 178, 90, 0.55) !important;
  border-radius: 10px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.18),
    inset 0 0 0 1px rgba(255, 178, 90, 0.14),
    0 0 0 1px rgba(255, 165, 65, 0.18),
    0 0 14px rgba(255, 140, 50, 0.18),
    0 4px 14px rgba(0, 0, 0, 0.40) !important;
  padding: 14px !important;
}
.wbv-shell .memory-card-title {
  color: rgba(249, 242, 232, 0.98) !important;
  text-shadow: 0 0 2px rgba(255, 220, 180, 0.16), 0 0 1px rgba(255, 200, 140, 0.12) !important;
  font-weight: 700 !important;
}
.wbv-shell .memory-card-excerpt {
  color: rgba(232, 224, 210, 0.86) !important;
}
/* Meta-tag chips (MODEL BINDING / RUNTIME / SOURCE) → bottom-rail recipe.
   The .warn variant keeps its warm-amber undertone since it indicates
   a not-proven runtime status.
   v007.55b: white-space:nowrap so each chip stays on a single line;
   chips wrap as whole units to next row if card is narrow. Operator
   2026-05-22: "bubbles are getting cut off" — text was wrapping
   mid-chip leaving "PROVEN" orphaned. */
.wbv-shell .skill-meta-tag {
  background: rgba(8, 12, 18, 0.78) !important;
  border: 1px solid rgba(255, 178, 90, 0.42) !important;
  border-radius: 6px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.10),
    0 0 6px rgba(255, 140, 50, 0.12),
    0 2px 4px rgba(0, 0, 0, 0.32) !important;
  color: rgba(232, 224, 210, 0.88) !important;
  padding: 3px 8px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
}
/* Container holding meta tags — let them wrap as whole chips to next
   row when card is narrow. */
.wbv-shell .memory-card .skill-meta-tag-list,
.wbv-shell .memory-card > div:has(> .skill-meta-tag) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
.wbv-shell .skill-meta-tag.warn {
  background: rgba(60, 35, 12, 0.55) !important;
  border-color: rgba(255, 190, 100, 0.58) !important;
  color: rgba(255, 220, 165, 0.94) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.16),
    0 0 8px rgba(255, 140, 50, 0.22),
    0 2px 4px rgba(0, 0, 0, 0.32) !important;
}
/* Status pill (STATIC / FALLBACK / UNKNOWN) — keep informational
   tone but layer it onto the bottom-rail recipe so it reads as a
   chip on the same glass system. */
.wbv-shell .memory-card-head .pill,
.wbv-shell .memory-card-head .pill-info {
  background: rgba(8, 12, 18, 0.78) !important;
  border-radius: 6px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.08),
    0 0 6px rgba(102, 198, 232, 0.18),
    0 2px 4px rgba(0, 0, 0, 0.30) !important;
  padding: 3px 8px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
}

/* v007.49 Spine selected-state — glow border only, NO fill.
   v007.50 amendment: ALL spine rows (parent bay + every child)
   get the SAME subtle card backing so they read as uniform cards;
   the selected one gets the strong warm glow border ON TOP of the
   shared backing. Operator 2026-05-22: "the backgrounds need to
   have the same background as when you select a sub category;
   currently they are different and should match the sub category
   backing" + "this should not change when selecting a sub
   category" (parent bay row stays stable). */

/* v007.53 Children inside expanded/active bays are TRANSPARENT rows
   (no individual borders), so the expanded bay reads as ONE contained
   card with rows inside. Operator 2026-05-22: showed target screenshot
   — Build's expanded tray must be one cohesive card, not stacked
   individual cards. */
.wbv-shell .workbench-os-spine .forge-spine-group[data-expanded="true"] .forge-spine-child,
.wbv-shell .workbench-os-spine .forge-spine-group[data-selected="true"] .forge-spine-child,
.wbv-shell .workbench-os-spine .forge-spine-group:has(.forge-spine-child[aria-current="true"]) .forge-spine-child,
.wbv-shell nav.workbench-os-spine .forge-spine-group[data-expanded="true"] .forge-spine-child,
.wbv-shell nav.workbench-os-spine .forge-spine-group[data-selected="true"] .forge-spine-child,
.wbv-shell nav.workbench-os-spine .forge-spine-group:has(.forge-spine-child[aria-current="true"]) .forge-spine-child {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  padding: 6px 10px !important;
  transition: background 160ms ease !important;
}
/* Selected child inside the expanded bay — subtle warm-tint background
   highlight (NOT a strong border-glow that would compete with the
   outer bay's glow). Operator target shows children uniform with no
   strong selection rim. */
.wbv-shell .workbench-os-spine .forge-spine-group[data-expanded="true"] .forge-spine-child[aria-current="true"],
.wbv-shell .workbench-os-spine .forge-spine-group:has(.forge-spine-child[aria-current="true"]) .forge-spine-child[aria-current="true"],
.wbv-shell nav.workbench-os-spine .forge-spine-group[data-expanded="true"] .forge-spine-child[aria-current="true"] {
  background: rgba(255, 143, 58, 0.10) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 200, 110, 0.30) !important;
  color: rgba(255, 244, 220, 1) !important;
}
/* COLLAPSED bay children (when bay tray pops out as a flyout) still
   need their card backing — only the expanded-in-place variant goes
   transparent. The flyout uses .workbench-os-spine__subcategory-tray
   which is separate. */
.wbv-shell .workbench-os-spine__subcategory-tray .forge-spine-child {
  background: rgba(10, 14, 20, 0.46) !important;
  border: 1px solid rgba(255, 178, 90, 0.22) !important;
  border-radius: 8px !important;
  box-shadow: inset 0 1px 0 rgba(255, 220, 165, 0.08) !important;
}
/* v007.56 Top hero band PANEL WIDTH + CENTERING.
   Operator 2026-05-22: "top panel needs to be centered between the
   left and right panels. Top panel needs to be longer width-wise
   than bottom panel" + "bubbles are getting squished, top panel
   needs to expand to accommodate."
   Spine right edge ~372px. Pepper dock left edge ~1820px.
   Bottom bar runs 356-1836 (centered between spine and dock).
   Expand hero to span slightly wider — touching closer to spine + dock,
   so it's visibly WIDER than the bottom bar. */
.wbv-shell .forge-glass-surface.workbench-top-hero-band,
.wbv-shell .workbench-top-hero-band {
  margin-left: 8px !important;
  margin-right: 8px !important;
  width: auto !important;
  padding: 8px 24px !important;
}

/* v007.55 Top hero band — all chips uniform size + both rows centered.
   Operator 2026-05-22: "these are centered under the centered top
   bubbles. all bubbles/chips need to be the same size and the top
   panel height/width adjusted accordingly."
   - Primary row (Operator/Project/Mode/Environment/Evidence/Authority):
     uniform min-width, center-justified
   - Secondary row (Director/Handoff/Evidence): same chip size +
     center-justified directly under primary row */
.wbv-shell .workbench-top-hero-band__row {
  justify-content: center !important;
  gap: 8px !important;
}
.wbv-shell .workbench-top-hero-band__row--identity {
  justify-content: space-between !important;
}
.wbv-shell .workbench-top-hero-band__chips {
  justify-content: center !important;
  gap: 8px !important;
}
.wbv-shell .workbench-top-hero-band__chips--primary,
.wbv-shell .workbench-top-hero-band__chips--secondary {
  justify-content: center !important;
  flex-wrap: nowrap !important;
}
/* Uniform chip sizing across BOTH primary + secondary rows.
   Selector specificity bumped with .workbench-top-hero-band--two-tier
   prefix to beat the two-tier row--status rules that force 30px height. */
.wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__chips--primary > .workbench-status-pill,
.wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__chips--primary > .wb-card,
.wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__chips--secondary > .workbench-status-pill,
.wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__chips--secondary > .wb-card,
.wbv-shell .workbench-top-hero-band .workbench-top-hero-band__chips--primary > *,
.wbv-shell .workbench-top-hero-band .workbench-top-hero-band__chips--secondary > * {
  min-width: 140px !important;
  width: 140px !important;
  min-height: 44px !important;
  height: 44px !important;
  padding: 6px 12px !important;
  font-size: 10px !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
}
/* Center secondary row under primary row by absolutely-positioning
   the OS-label and centering chips with simple flex justify-content
   on both rows. Cleaner than grid w/ empty filler track. */
.wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__row--identity,
.wbv-shell .workbench-top-hero-band__row--identity {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
}
.wbv-shell .workbench-top-hero-band__row--identity > .workbench-top-hero-band__identity {
  /* v007.56l Identity logo positioned ABSOLUTELY to span the FULL
     hero height (130px), vertically + horizontally centered.
     Operator 2026-05-22: "logo is not centered height wise" + "stop
     treating the top panel as two separate panels". Absolute lifts
     logo out of the 2-tier grid row so it spans the whole hero. */
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 14px !important;
  width: 220px !important;
  height: auto !important;
  padding: 8px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 4px !important;
  z-index: 2 !important;
}
/* Identity row: logo flows on left, chips fill remaining + center. */
.wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__row--identity,
.wbv-shell .workbench-top-hero-band__row--identity {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  position: static !important;
  gap: 12px !important;
}
.wbv-shell .workbench-top-hero-band__row--identity > .workbench-top-hero-band__chips--primary {
  flex: 1 1 auto !important;
  justify-content: center !important;
  /* v007.56m Pad-left on chips matches the absolute-positioned logo
     width (220px + 14px left + ~16px clearance) so chips don't
     overlap the logo. */
  padding-left: 250px !important;
}
.wbv-shell .forge-glass-surface.workbench-top-hero-band--two-tier .workbench-top-hero-band__row--status,
.wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__row--status {
  padding-left: 250px !important;
}
.wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__os-value {
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  overflow: visible !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}
.wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__row--status,
.wbv-shell .workbench-top-hero-band__row--status {
  justify-content: center !important;
  display: flex !important;
}

/* v007.54 Bay's __select (the "Build" / "Projects" header button)
   stays TRANSPARENT — no extra box drawn around the bay's text.
   Operator 2026-05-22: "when you click a sub item like intake a
   highlight box gets drawn over the Build text and the little
   bubble. I don't want that box to get drawn." The outer bay-group
   carries the warm glow; the inner header button is just the
   clickable region with no chrome of its own. */
.wbv-shell nav.workbench-os-spine .forge-spine-group__select[aria-current="true"],
.wbv-shell .workbench-os-spine .forge-spine-group__select[aria-current="true"],
.wbv-shell .forge-glass-surface--spine .forge-spine-group__select[aria-current="true"],
.wbv-shell .workbench-os-spine .forge-spine-group:has(.forge-spine-child[aria-current="true"]) .forge-spine-group__select,
.wbv-shell .forge-glass-surface--spine .forge-spine-group:has(.forge-spine-child[aria-current="true"]) .forge-spine-group__select,
.wbv-shell .workbench-os-spine .forge-spine-group[data-selected="true"] .forge-spine-group__select,
.wbv-shell .workbench-os-spine .forge-spine-group[data-expanded="true"] .forge-spine-group__select {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
/* Also kill the left rail accent bar that was used to mark selected
   in earlier rules — operator wants ONLY the glow border, no extra
   chrome. */
.wbv-shell .workbench-os-spine .forge-spine-child[aria-current="true"]::before,
.wbv-shell .workbench-os-spine .forge-spine-group__select[aria-current="true"]::before,
.wbv-shell .forge-spine-group[data-selected="true"]::before {
  display: none !important;
}

/* ---- Settings > Backup/Restore usage-summary card ----
   Operator 2026-05-22 sweep: was rgb(32,33,37) solid grey.
   Also covers other tabular/usage cards using the same class
   across Backup/Restore + Usage surfaces. */
.wbv-shell .usage-summary-card {
  background:
    linear-gradient(180deg, rgba(255, 220, 165, 0.06) 0%, rgba(255, 178, 90, 0.02) 36%, rgba(0, 0, 0, 0) 100%),
    rgba(10, 14, 20, 0.62) !important;
  backdrop-filter: blur(10px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(125%) !important;
  border: 1px solid rgba(255, 178, 90, 0.55) !important;
  border-radius: 10px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.18),
    inset 0 0 0 1px rgba(255, 178, 90, 0.14),
    0 0 14px rgba(255, 140, 50, 0.18),
    0 4px 14px rgba(0, 0, 0, 0.40) !important;
}

/* ---- Forge guardrail-notice strip (BOUNDARY: ... callout) ----
   Operator 2026-05-22 sweep: showed up grey across every Projects /
   Build / Knowledge / War Room sub-category. Common element that
   appears at the top of every drill-down. */
.wbv-shell .forge-guardrail-notice {
  background:
    linear-gradient(180deg, rgba(255, 143, 58, 0.10) 0%, rgba(255, 143, 58, 0.02) 60%, rgba(0, 0, 0, 0) 100%),
    rgba(10, 14, 20, 0.62) !important;
  backdrop-filter: blur(8px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
  border: 1px solid rgba(255, 178, 90, 0.45) !important;
  border-radius: 8px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.14),
    0 0 10px rgba(255, 140, 50, 0.14),
    0 2px 8px rgba(0, 0, 0, 0.32) !important;
  padding: 10px 14px !important;
  color: rgba(232, 224, 210, 0.92) !important;
}
.wbv-shell .forge-guardrail-notice strong,
.wbv-shell .forge-guardrail-notice > span:first-child {
  color: rgba(255, 200, 130, 0.92) !important;
  text-shadow: 0 0 3px rgba(255, 140, 50, 0.14), 0 0 1px rgba(255, 180, 90, 0.20) !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
}

/* ---- Forge surface panel closure-path chip ---- */
.wbv-shell .forge-surface-panel__closure-path {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  background: rgba(8, 12, 18, 0.78) !important;
  border: 1px solid rgba(255, 178, 90, 0.42) !important;
  border-radius: 6px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.10),
    0 0 6px rgba(255, 140, 50, 0.12) !important;
  color: rgba(232, 224, 210, 0.92) !important;
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
  margin-top: 6px !important;
}

/* v007.43 <pre> / <code> blocks inside the workspace pick up the
   comfyUI glass treatment so they read as nested panels, not as
   bare code containers. Operator 2026-05-22: "missing our panel
   treatment" — highlighted the Manual Handoff Packet Preview <pre>
   block which had a faint neutral grey-green border + no glass. */
.wbv-shell .workbench-pepper-workspace pre:not(.workbench-details-sheet__close):not(.forge-spine-group):not(.panel-mockup-detail-tab),
.wbv-shell .workbench-pepper-workspace .workbench-manual-handoff-preview pre,
.wbv-shell .workbench-pepper-workspace .workbench-evidence-return-protocol pre,
.wbv-shell .workbench-pepper-workspace .workbench-prompt-composition pre {
  background:
    linear-gradient(180deg, rgba(255, 220, 165, 0.05) 0%, rgba(255, 178, 90, 0.02) 36%, rgba(0, 0, 0, 0) 100%),
    rgba(8, 12, 18, 0.58) !important;
  backdrop-filter: blur(8px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
  border: 1px solid rgba(255, 178, 90, 0.45) !important;
  border-radius: var(--ws-glass-radius-inner) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.14),
    inset 0 0 0 1px rgba(255, 178, 90, 0.12),
    0 0 12px rgba(255, 140, 50, 0.14),
    0 3px 10px rgba(0, 0, 0, 0.38) !important;
  padding: 12px 14px !important;
}

/* v007.44 The context row joins the workspace header above into ONE
   unified top panel. Operator 2026-05-22: top panel didn't feel
   like one panel — L/R borders were a different alpha than the
   header above + the context's top border drew a visible seam at
   the join. Fix:
   - L/R borders match the header above EXACTLY (same warm rim alpha).
   - Top border REMOVED so the join with header's bottom (already
     borderless) reads as one continuous panel surface.
   - Border-radius bottom-only so the panel rounds at the bottom but
     flows seamlessly into the header at the top.
   - Background tint matches header's translucent dark base so the
     fill reads continuous. */
.wbv-shell .workbench-pepper-workspace__context {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.10) 100%),
    rgba(10, 14, 20, 0.62) !important;
  backdrop-filter: blur(10px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(125%) !important;
  border-top: 0 !important;
  border-left: 1px solid rgba(255, 178, 90, 0.55) !important;
  border-right: 1px solid rgba(255, 178, 90, 0.55) !important;
  border-bottom: 1px solid rgba(255, 178, 90, 0.55) !important;
  border-radius: 0 0 var(--ws-glass-radius-inner) var(--ws-glass-radius-inner) !important;
  box-shadow:
    inset 1px 0 0 rgba(255, 178, 90, 0.14),
    inset -1px 0 0 rgba(255, 178, 90, 0.14),
    inset 0 -1px 0 rgba(255, 178, 90, 0.14),
    0 0 14px rgba(255, 140, 50, 0.16),
    0 4px 12px rgba(0, 0, 0, 0.32) !important;
  padding: 8px !important;
}

/* Director tabs row — operator 2026-05-22 correction: "this is a tab
   system no border." Strip the inner-shelf chrome that v007.40
   originally added; the four tab chips are the only visible elements
   in this row. The tabs themselves carry their own bottom-rail-cell
   recipe (v007.35) + active-state warm glow. */
.wbv-shell .workbench-pepper-workspace .workbench-director-tabs {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* G-DC3 correction — Director Console internal sub-tabs.
   These are the LEVEL 2 tabs (Director / Handoff / Evidence / Preview)
   visible only when the Director Console top-level tab is active.
   Visually distinct from the top-level Stage/Director mode selector:
   smaller horizontal pill row, secondary navigation feel.
   Uses the same molten-glass amber palette as the rest of the UI —
   no grey borders, warm glow on active tab. */
.dc-sub-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  margin: 0 0 8px 0;
  background: transparent;
  border: none;
  border-radius: 0;
}
.dc-sub-tabs__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 14px;
  border: 1px solid rgba(255, 165, 65, 0.22);
  border-radius: 6px;
  background: var(--ws-card-bg, rgba(10, 14, 20, 0.72));
  color: rgba(232, 224, 210, 0.88);
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 200ms ease;
  box-shadow:
    inset 0 1px 0 rgba(255, 215, 160, 0.06),
    0 0 0 1px rgba(255, 140, 50, 0.04),
    0 2px 6px rgba(0, 0, 0, 0.28);
}
.dc-sub-tabs__tab:hover {
  background: rgba(255, 165, 65, 0.08);
  border-color: rgba(255, 200, 110, 0.62);
  color: rgba(255, 235, 200, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 180, 0.14),
    0 0 0 1px rgba(255, 178, 90, 0.18),
    0 0 10px rgba(255, 140, 50, 0.16),
    0 4px 10px rgba(0, 0, 0, 0.36);
}
.dc-sub-tabs__tab--active,
.dc-sub-tabs__tab[aria-selected="true"] {
  background: rgba(255, 165, 65, 0.14);
  border-color: rgba(255, 205, 120, 0.92);
  color: rgba(255, 244, 220, 1);
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 180, 0.18),
    0 0 0 1px rgba(255, 178, 90, 0.28),
    0 0 14px rgba(255, 165, 65, 0.28),
    0 0 28px rgba(255, 140, 50, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.32);
}
/* Stage agent chip grid — compact war-room tiles. Must override
   .wbv-shell .workbench-pepper-workspace ul { display: flex !important }. */
.wbv-shell .workbench-pepper-workspace .stage-agent-chip-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 190px)) !important;
  gap: 6px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 5px 0 0 !important;
  overflow-y: auto !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
}
.wbv-shell .workbench-pepper-workspace .stage-agent-chip-grid .war-room-tile {
  padding: 8px 10px !important;
  min-height: auto !important;
}

/* wbv-shell override — keep molten-glass glow, no grey borders.
   Specificity must beat .wbv-shell .forge-glass-surface button:not(…):not(…):not(…)
   (6 effective class units) so we thread through forge-glass-surface +
   workbench-director-rail for 6 class selectors. */
.wbv-shell .forge-glass-surface.workbench-pepper-workspace .workbench-director-rail .dc-sub-tabs {
  display: flex !important;
  gap: 4px !important;
  padding: 3px !important;
  margin: 0 0 8px 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
.wbv-shell .forge-glass-surface.workbench-pepper-workspace .workbench-director-rail .dc-sub-tabs .dc-sub-tabs__tab {
  padding: 5px 14px !important;
  border-radius: 6px !important;
  background: rgba(8, 12, 18, 0.78) !important;
  border: 1px solid rgba(255, 178, 90, 0.50) !important;
  color: rgba(255, 244, 231, 1) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: none !important;
  min-height: auto !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.12),
    inset 0 0 0 1px rgba(255, 178, 90, 0.14),
    0 0 8px rgba(255, 140, 50, 0.22),
    0 2px 4px rgba(0, 0, 0, 0.36) !important;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 200ms ease !important;
}
.wbv-shell .forge-glass-surface.workbench-pepper-workspace .workbench-director-rail .dc-sub-tabs .dc-sub-tabs__tab:hover {
  background: rgba(255, 165, 65, 0.12) !important;
  border-color: rgba(255, 200, 110, 0.72) !important;
  color: rgba(255, 244, 231, 1) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 180, 0.18),
    inset 0 0 0 1px rgba(255, 178, 90, 0.22),
    0 0 14px rgba(255, 140, 50, 0.32),
    0 4px 10px rgba(0, 0, 0, 0.42) !important;
}
.wbv-shell .forge-glass-surface.workbench-pepper-workspace .workbench-director-rail .dc-sub-tabs .dc-sub-tabs__tab--active,
.wbv-shell .forge-glass-surface.workbench-pepper-workspace .workbench-director-rail .dc-sub-tabs .dc-sub-tabs__tab[aria-selected="true"] {
  background: rgba(255, 165, 65, 0.22) !important;
  border-color: rgba(255, 205, 120, 1) !important;
  color: rgba(255, 244, 220, 1) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 185, 0.24),
    inset 0 0 0 1px rgba(255, 200, 110, 0.28),
    0 0 0 1px rgba(255, 178, 90, 0.40),
    0 0 18px rgba(255, 145, 55, 0.48),
    0 0 32px rgba(255, 140, 50, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.36) !important;
}

/* v007.58 RESPONSIVE scaling for the top hero band.
   Operator 2026-05-22: at 2560x1440 everything looks great, but at
   smaller viewports things OVERLAP instead of scaling. Media queries
   placed at END so they win source order over the fixed-px base
   rules earlier in the file. */
@media (max-width: 2199px) {
  .wbv-shell .workbench-top-hero-band .workbench-top-hero-band__chips--primary > *,
  .wbv-shell .workbench-top-hero-band .workbench-top-hero-band__chips--secondary > *,
  .wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__chips--primary > .workbench-status-pill,
  .wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__chips--primary > .wb-card,
  .wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__chips--secondary > .workbench-status-pill,
  .wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__chips--secondary > .wb-card {
    min-width: 110px !important;
    width: 110px !important;
    padding: 5px 8px !important;
    font-size: 9px !important;
  }
  .wbv-shell .workbench-top-hero-band__row--identity > .workbench-top-hero-band__identity {
    width: 160px !important;
  }
  .wbv-shell .workbench-top-hero-band__row--identity > .workbench-top-hero-band__chips--primary {
    padding-left: 180px !important;
  }
  .wbv-shell .forge-glass-surface.workbench-top-hero-band--two-tier .workbench-top-hero-band__row--status,
  .wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__row--status {
    padding-left: 180px !important;
  }
}
@media (max-width: 1599px) {
  .wbv-shell .workbench-top-hero-band .workbench-top-hero-band__chips--primary > *,
  .wbv-shell .workbench-top-hero-band .workbench-top-hero-band__chips--secondary > *,
  .wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__chips--primary > .workbench-status-pill,
  .wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__chips--primary > .wb-card,
  .wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__chips--secondary > .workbench-status-pill,
  .wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__chips--secondary > .wb-card {
    min-width: 95px !important;
    width: 95px !important;
    padding: 4px 7px !important;
    font-size: 8.5px !important;
  }
  .wbv-shell .workbench-top-hero-band__row--identity > .workbench-top-hero-band__identity {
    width: 140px !important;
  }
  .wbv-shell .workbench-top-hero-band__row--identity > .workbench-top-hero-band__chips--primary {
    padding-left: 160px !important;
  }
  .wbv-shell .forge-glass-surface.workbench-top-hero-band--two-tier .workbench-top-hero-band__row--status,
  .wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__row--status {
    padding-left: 160px !important;
  }
}
@media (max-width: 1279px) {
  .wbv-shell .workbench-top-hero-band .workbench-top-hero-band__chips--primary > *,
  .wbv-shell .workbench-top-hero-band .workbench-top-hero-band__chips--secondary > *,
  .wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__chips--primary > .workbench-status-pill,
  .wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__chips--primary > .wb-card,
  .wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__chips--secondary > .workbench-status-pill,
  .wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__chips--secondary > .wb-card {
    min-width: 90px !important;
    width: 90px !important;
    padding: 4px 6px !important;
    font-size: 8px !important;
  }
  .wbv-shell .workbench-top-hero-band__row--identity > .workbench-top-hero-band__identity {
    width: 140px !important;
  }
  .wbv-shell .workbench-top-hero-band__row--identity > .workbench-top-hero-band__chips--primary {
    padding-left: 160px !important;
  }
  .wbv-shell .forge-glass-surface.workbench-top-hero-band--two-tier .workbench-top-hero-band__row--status,
  .wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__row--status {
    padding-left: 160px !important;
  }
  .wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__os-value {
    font-size: 12px !important;
  }
}
/* v007.58b Additional moderate-narrow breakpoint addressing
   operator-shown overflows at viewports 1100-1200px: dev/edit
   flyout narrower, spine labels readable, bottom-strip cells
   shrink. */
@media (max-width: 1199px) {
  .wbv-shell .workbench-dev-edit-menu__body {
    width: min(220px, 90vw) !important;
  }
  .wbv-shell .workbench-bottom-evidence-strip__cell {
    min-width: 0 !important;
    padding: 6px 8px !important;
    font-size: 9px !important;
  }
  .wbv-shell .workbench-bottom-evidence-strip__cell strong {
    font-size: 11px !important;
  }
  .wbv-shell .workbench-pepper-dock .workbench-pepper-dock__compact-card,
  .wbv-shell .workbench-pepper-dock .workbench-pepper-dock__chat-card {
    padding: 8px 10px !important;
  }
}
@media (max-width: 1023px) {
  .wbv-shell .workbench-top-hero-band .workbench-top-hero-band__chips--primary,
  .wbv-shell .workbench-top-hero-band .workbench-top-hero-band__chips--secondary {
    flex-wrap: wrap !important;
  }
  .wbv-shell .workbench-top-hero-band .workbench-top-hero-band__chips--primary > *,
  .wbv-shell .workbench-top-hero-band .workbench-top-hero-band__chips--secondary > *,
  .wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__chips--primary > .workbench-status-pill,
  .wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__chips--primary > .wb-card,
  .wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__chips--secondary > .workbench-status-pill,
  .wbv-shell .workbench-top-hero-band--two-tier .workbench-top-hero-band__chips--secondary > .wb-card {
    min-width: 80px !important;
    width: 80px !important;
  }
}

/* ==========================================================================
   PHASE A primitives — Workbench Visual System v3.5 additive layer
   Pipeline: PIPE-PR342-AUDIT-NORMALIZATION-2026-05-23
   DCLA: L34 Workbench Surface

   These rules style the additive primitives in shell-primitives.tsx:
     S-A1 layout:  HStack, VStack, Cluster, Grid
     S-A2 overlay: DetailSheet, Modal, Popover
     S-A3 form:    TextField, StatusBanner, FormCluster, RadioCard
     S-A4 card:    StatCard, KeyValueChip, ListRow, NoticeCard,
                   FootnoteText, ApprovalCard

   Build on existing tokens (existing rgba palettes used across the WBV /
   forge layers). No new color tokens introduced; no overrides on existing
   selectors; no consumer migrations in this slice. Adding these rules is
   zero visual regression because no DOM currently uses .wb-hstack,
   .wb-vstack, .wb-cluster, .wb-grid, .wb-overlay-scrim, .wb-detail-sheet,
   .wb-modal-root, .wb-modal, .wb-popover, .wb-textfield, .wb-status-banner,
   .wb-form-cluster, .wb-radio-card, .wb-stat-card, .wb-kv-chip, .wb-list-row,
   .wb-notice-card, .wb-footnote, or .wb-approval-card.
   ========================================================================== */

/* -- S-A1 layout -- */

.wb-hstack {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.wb-hstack[data-align="start"]    { align-items: flex-start; }
.wb-hstack[data-align="center"]   { align-items: center; }
.wb-hstack[data-align="end"]      { align-items: flex-end; }
.wb-hstack[data-align="stretch"]  { align-items: stretch; }
.wb-hstack[data-align="baseline"] { align-items: baseline; }
.wb-hstack[data-justify="start"]   { justify-content: flex-start; }
.wb-hstack[data-justify="center"]  { justify-content: center; }
.wb-hstack[data-justify="end"]     { justify-content: flex-end; }
.wb-hstack[data-justify="between"] { justify-content: space-between; }
.wb-hstack[data-justify="around"]  { justify-content: space-around; }
.wb-hstack[data-wrap="true"]       { flex-wrap: wrap; }

.wb-vstack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.wb-vstack[data-align="start"]   { align-items: flex-start; }
.wb-vstack[data-align="center"]  { align-items: center; }
.wb-vstack[data-align="end"]     { align-items: flex-end; }
.wb-vstack[data-align="stretch"] { align-items: stretch; }

.wb-cluster {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.wb-cluster[data-align="start"]  { align-items: flex-start; }
.wb-cluster[data-align="center"] { align-items: center; }
.wb-cluster[data-align="end"]    { align-items: flex-end; }

.wb-grid {
  display: grid;
  width: 100%;
}

/* -- S-A2 overlays -- */

.wb-overlay-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 90;
  backdrop-filter: blur(2px) saturate(0.85);
  -webkit-backdrop-filter: blur(2px) saturate(0.85);
}

.wb-detail-sheet {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 91;
  display: flex;
  flex-direction: column;
  background: rgba(5, 8, 8, 0.78);
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  border-left: 1px solid rgba(255, 160, 96, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    -16px 0 34px rgba(0, 0, 0, 0.4),
    0 0 22px rgba(255, 82, 28, 0.08);
}
.wb-detail-sheet[data-side="right"]  { right: 0; }
.wb-detail-sheet[data-side="left"]   {
  left: 0;
  border-left: none;
  border-right: 1px solid rgba(255, 160, 96, 0.34);
}
.wb-detail-sheet[data-side="bottom"] {
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  border-left: none;
  border-top: 1px solid rgba(255, 160, 96, 0.34);
}
.wb-detail-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 160, 96, 0.18);
}
.wb-detail-sheet__title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245, 230, 220, 0.9);
}
.wb-detail-sheet__close,
.wb-modal__close {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(245, 230, 220, 0.9);
  border-radius: 4px;
  width: 22px;
  height: 22px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.wb-detail-sheet__close:hover,
.wb-modal__close:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 160, 96, 0.55);
}
.wb-detail-sheet__body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 14px 16px;
}

.wb-modal-root {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wb-modal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.wb-modal {
  position: relative;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: rgba(5, 8, 8, 0.92);
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  border: 1px solid rgba(255, 160, 96, 0.34);
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 36px rgba(0, 0, 0, 0.6),
    0 0 24px rgba(255, 82, 28, 0.08);
}
.wb-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 160, 96, 0.18);
}
.wb-modal__title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245, 230, 220, 0.9);
}
.wb-modal__body {
  overflow: auto;
  padding: 16px;
}

.wb-popover {
  position: absolute;
  z-index: 80;
  background: rgba(5, 8, 8, 0.92);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(255, 160, 96, 0.34);
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 22px rgba(0, 0, 0, 0.5);
  padding: 10px 12px;
  min-width: 200px;
}

/* -- S-A3 form / banner -- */

.wb-textfield {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wb-textfield__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(224, 234, 220, 0.7);
}
.wb-textfield__input {
  width: 100%;
  padding: 8px 10px;
  background: rgba(8, 12, 14, 0.65);
  border: 1px solid rgba(178, 205, 188, 0.22);
  border-radius: 4px;
  color: rgba(245, 240, 232, 0.95);
  font-size: 12px;
  font-family: inherit;
  resize: vertical;
}
.wb-textfield__input:focus {
  outline: none;
  border-color: rgba(255, 160, 96, 0.55);
  box-shadow: 0 0 0 2px rgba(255, 160, 96, 0.16);
}
.wb-textfield__input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.wb-textfield__helper {
  font-size: 10px;
  color: rgba(180, 190, 185, 0.7);
}

.wb-status-banner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 4px;
  border: 1px solid rgba(178, 205, 188, 0.28);
  background: rgba(11, 16, 16, 0.6);
}
.wb-status-banner[data-tone="info"] {
  border-color: rgba(120, 200, 230, 0.45);
  background: rgba(120, 200, 230, 0.08);
}
.wb-status-banner[data-tone="success"] {
  border-color: rgba(120, 200, 120, 0.45);
  background: rgba(120, 200, 120, 0.08);
}
.wb-status-banner[data-tone="warn"] {
  border-color: rgba(225, 218, 168, 0.45);
  background: rgba(225, 218, 168, 0.08);
}
.wb-status-banner[data-tone="danger"] {
  border-color: rgba(220, 90, 90, 0.45);
  background: rgba(220, 90, 90, 0.10);
}
.wb-status-banner__title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(245, 240, 232, 0.95);
}
.wb-status-banner__body {
  font-size: 12px;
  color: rgba(210, 220, 215, 0.92);
}

.wb-form-cluster {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
}

.wb-radio-card {
  display: grid;
  grid-template-columns: auto 1fr;
  -moz-column-gap: 10px;
       column-gap: 10px;
  row-gap: 2px;
  padding: 10px 12px;
  border: 1px solid rgba(178, 205, 188, 0.22);
  border-radius: 4px;
  background: rgba(11, 16, 16, 0.6);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.wb-radio-card[data-checked="true"] {
  border-color: rgba(255, 160, 96, 0.55);
  background: rgba(255, 160, 96, 0.08);
}
.wb-radio-card[data-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}
.wb-radio-card__input {
  grid-row: 1 / span 2;
  align-self: center;
  accent-color: rgba(255, 160, 96, 0.85);
}
.wb-radio-card__label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(245, 240, 232, 0.95);
}
.wb-radio-card__description {
  font-size: 11px;
  color: rgba(190, 200, 195, 0.75);
}

/* -- S-A4 card / list -- */

.wb-stat-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: rgba(11, 16, 16, 0.6);
  border: 1px solid rgba(178, 205, 188, 0.18);
  border-radius: 4px;
}
.wb-stat-card__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(224, 234, 220, 0.7);
}
.wb-stat-card__value {
  font-size: 18px;
  font-weight: 600;
  color: rgba(245, 240, 232, 0.96);
  line-height: 1.2;
}
.wb-stat-card__sub {
  font-size: 11px;
  color: rgba(190, 200, 195, 0.78);
}
.wb-stat-card__trend {
  font-size: 11px;
  color: rgba(180, 220, 180, 0.85);
}

.wb-kv-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(11, 16, 16, 0.6);
  border: 1px solid rgba(178, 205, 188, 0.22);
  border-radius: 4px;
  font-size: 11px;
}
.wb-kv-chip__label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(180, 190, 185, 0.75);
}
.wb-kv-chip__value {
  font-size: 11px;
  font-weight: 600;
  color: rgba(245, 240, 232, 0.95);
}

.wb-list-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  -moz-column-gap: 10px;
       column-gap: 10px;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 12px;
  color: rgba(220, 225, 220, 0.92);
  text-align: left;
}
.wb-list-row[data-interactive="true"] {
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.wb-list-row[data-interactive="true"]:hover {
  background: rgba(255, 160, 96, 0.06);
  border-color: rgba(255, 160, 96, 0.28);
}
.wb-list-row__leading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wb-list-row__body {
  min-width: 0;
}
.wb-list-row__trailing {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  color: rgba(180, 190, 185, 0.75);
}

.wb-notice-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px dashed rgba(225, 218, 168, 0.34);
  background: rgba(5, 9, 9, 0.55);
}
.wb-notice-card[data-tone="info"] {
  border-color: rgba(120, 200, 230, 0.34);
}
.wb-notice-card[data-tone="needs-build"] {
  border-color: rgba(120, 200, 230, 0.34);
  background: rgba(120, 200, 230, 0.06);
}
.wb-notice-card[data-tone="needs-evidence"] {
  border-color: rgba(220, 160, 90, 0.36);
  background: rgba(220, 160, 90, 0.06);
}
.wb-notice-card[data-tone="warn"] {
  border-color: rgba(225, 218, 168, 0.45);
  background: rgba(225, 218, 168, 0.06);
}
.wb-notice-card__title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(245, 230, 220, 0.9);
}
.wb-notice-card__body {
  font-size: 12px;
  color: rgba(220, 225, 220, 0.92);
}

.wb-footnote {
  font-size: 11px;
  font-style: italic;
  color: rgba(180, 190, 185, 0.7);
}

.wb-approval-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 6px;
  background: rgba(8, 12, 14, 0.72);
  border: 1px solid rgba(178, 205, 188, 0.22);
}
.wb-approval-card[data-status="gated"] {
  border-color: rgba(255, 170, 100, 0.55);
}
.wb-approval-card[data-status="approved"] {
  border-color: rgba(120, 200, 120, 0.45);
}
.wb-approval-card[data-status="blocked"] {
  border-color: rgba(220, 90, 90, 0.55);
}
.wb-approval-card__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wb-approval-card__title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(245, 240, 232, 0.96);
}
.wb-approval-card__description {
  font-size: 11px;
  color: rgba(190, 200, 195, 0.78);
}
.wb-approval-card__body {
  font-size: 12px;
  color: rgba(220, 225, 220, 0.92);
}
.wb-approval-card__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

/* ============================================================
 * Mission row strip uniformity recipes (Pass 4 normalization 2026-05-24)
 *
 * Extracts the repeating inline-style patterns that appeared in the
 * mission/* row-strip files (ActiveOpsTimeline, BlockersBoard,
 * GovernanceStatusRow) into shared recipe classes. The paint values are
 * lifted verbatim from the prior inline values so the rendered look is
 * preserved exactly; what changes is WHERE the rule lives (now centralized,
 * not duplicated per consumer). Removes the largest concentrated block of
 * inline-style drift in the mission/ subdir while preserving PR342's
 * molten-glass visual identity (data-driven status colors stay inline).
 *
 * Recipes are scoped under .wbv-shell so they only apply inside the
 * workbench shell wrapper, matching the cascade discipline of the wb-*
 * primitives.
 * ============================================================ */

.wbv-shell .mission-two-col-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.wbv-shell .mission-two-col-section--wide {
  gap: 12px;
}
.wbv-shell .mission-key-value-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  font-size: 12px;
}
.wbv-shell .mission-section-header {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--fg-faint);
  margin-bottom: 4px;
}
.wbv-shell .mission-status-block {
  background: var(--bg-dim);
  border-radius: 8px;
  padding: 10px;
  border: 1px solid var(--border);
}
.wbv-shell .mission-status-block__title {
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 4px;
}
.wbv-shell .mission-status-block__body {
  font-size: 13px;
  color: var(--fg);
}
.wbv-shell .mission-list {
  margin: 0;
  padding-left: 16px;
  font-size: 11.5px;
}
.wbv-shell .mission-list--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ============================================================
 * Mission row strip recipes — Pass 5 expansion (2026-05-24)
 *
 * Extends the Pass 4 mission-* recipe set with the ZoneCard wrapper + its
 * sub-recipes (every mission zone is wrapped in ZoneCard, so this is the
 * highest-leverage extraction) and the tile/card-list/count-row patterns
 * shared by GlobalStatusRow + ApprovalInbox + ModelRouterRow + MiniHiveMind.
 *
 * Data-driven border / background / accent colors are preserved via CSS
 * custom properties (--mission-zone-accent-*, --mission-metric-*, etc.)
 * set inline on the consuming element, so the recipe owns layout/typography
 * and the consumer supplies the data-bound paint. Visual identity preserved
 * exactly; what changes is WHERE the rule lives.
 * ============================================================ */

/* ZoneCard wrapper (used by all 6 mission zones via ./ZoneCard) */
.wbv-shell .mission-zone-card {
  background: var(--bg-elev, #181822);
  border: 1px solid var(--mission-zone-accent-tint, rgba(179, 157, 247, 0.2));
  border-radius: 10px;
  padding: 14px;
  font-size: 12.5px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.wbv-shell .mission-zone-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.wbv-shell .mission-zone-card__accent-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mission-zone-accent-solid, #b39df7);
  box-shadow: 0 0 6px var(--mission-zone-accent-solid, #b39df7);
}
.wbv-shell .mission-zone-card__title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--fg-bright, #eee);
}
.wbv-shell .mission-zone-card__hint {
  margin-left: auto;
  font-size: 11px;
  color: var(--fg-faint);
  font-style: italic;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wbv-shell .mission-zone-card__body {
  min-width: 0;
}

/* Auto-fit tile grid — default 180px minmax; --narrow variant 150px */
.wbv-shell .mission-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.wbv-shell .mission-tile-grid--narrow {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* Three-column equal split */
.wbv-shell .mission-three-col-section {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

/* Metric pill — tint paint via CSS vars set inline by consumer */
.wbv-shell .mission-metric-pill {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  background: var(--mission-metric-bg, transparent);
  border: 1px solid var(--mission-metric-border, transparent);
  border-radius: 8px;
  min-width: 0;
}
.wbv-shell .mission-metric-pill__text {
  font-weight: 700;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wbv-shell .mission-metric-pill__text--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.wbv-shell .mission-metric-pill__subtext {
  color: var(--fg-faint);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Empty hint */
.wbv-shell .mission-empty-hint {
  color: var(--fg-faint);
  font-style: italic;
  font-size: 12px;
}

/* Vertical card list (ApprovalInbox-style) */
.wbv-shell .mission-card-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wbv-shell .mission-card-list__item {
  padding: 8px;
  background: var(--bg-deep, #11111a);
  border: 1px solid var(--mission-card-accent, rgba(255, 200, 69, 0.2));
  border-radius: 6px;
}
.wbv-shell .mission-card-list__item-title {
  font-weight: 600;
  color: var(--fg, #eee);
  margin-bottom: 2px;
}
.wbv-shell .mission-card-list__item-body {
  font-size: 11.5px;
  color: var(--fg-dim, #bbb);
}
.wbv-shell .mission-card-list__item-meta {
  margin-top: 4px;
  font-size: 11px;
  color: var(--fg-faint);
}
.wbv-shell .mission-card-list__more {
  font-size: 11px;
  color: var(--fg-faint);
  font-style: italic;
}

/* Tile (ModelRouterRow Tile-style — head + primary + secondary) */
.wbv-shell .mission-tile {
  padding: 10px;
  background: var(--bg-deep, #11111a);
  border: 1px solid var(--mission-tile-accent, transparent);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.wbv-shell .mission-tile__head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.wbv-shell .mission-tile__title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--fg-faint);
}
.wbv-shell .mission-tile__primary {
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wbv-shell .mission-tile__secondary {
  font-size: 11px;
  color: var(--fg-dim, #bbb);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Count row (MiniHiveMind CountColumn entries) */
.wbv-shell .mission-count-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.wbv-shell .mission-count-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
}
.wbv-shell .mission-count-row__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mission-count-dot, #a09b91);
}
.wbv-shell .mission-count-row__value {
  font-weight: 600;
  color: var(--mission-count-value, inherit);
}
.wbv-shell .mission-count-row__label {
  color: var(--fg-dim, #bbb);
}

/* Step meta (GlobalStatusRow "Current step" line) */
.wbv-shell .mission-step-meta {
  margin-top: 8px;
  font-size: 11px;
  color: var(--fg-faint);
}
.wbv-shell .mission-step-meta__value {
  color: var(--fg, #eee);
  font-weight: 600;
}

/* ============================================================
 * Pass 6 — .wbv-shell .wbv-grid-card active molten paint
 *
 * The dormant base recipe at line ~3700 (.wbv-grid-card / .memory-card /
 * .usage-summary-card combined) has lavender 3px border-top + var(--bg-panel)
 * background — that's the historical base that gets OVERRIDDEN by the v6.x
 * layered-art rules at globals.css:20590 (.wbv-shell .memory-card) +
 * :20894 (.wbv-shell .usage-summary-card). Those overrides set the actual
 * PR342 molten-glass paint: orange-tinted gradient, backdrop blur+saturate,
 * 1px warm-amber border, 10px radius, layered orange box-shadow glow.
 *
 * This rule extends that active molten paint to .wbv-grid-card so future
 * bay-page consumers that adopt the shared substrate class get the SAME
 * rendered look as the legacy memory-card / usage-summary-card classes.
 * Mirrors globals.css:20590 paint verbatim (same !important discipline so
 * cascade behaves consistently with the v6 layer it shadows).
 * ============================================================ */
/* ============================================================
 * Pass 8 — workbench-bay-shape recipes for NotYetScopedSurface +
 * PlaceholderBridge
 *
 * Live click-through audit (Pass 8 Lane A) found that 6 of 7 spine bays
 * (Projects / Knowledge / Actions / Review / War Room / Settings) render
 * either NotYetScopedSurface or PlaceholderBridge — both files emit the
 * SAME inline-style scaffold per surface (status header with dashed warm
 * border, control rows with cool-grey solid border, section labels, body
 * paragraphs). One component fix → 5-6 spine bays visibly normalized.
 *
 * Paint values are LITERAL LIFTS from the prior inline values
 * (NotYetScopedSurface.tsx lines 27-71, 101-167, 182-222 +
 * PlaceholderBridge.tsx lines 32-61) so rendered visual identity is
 * preserved exactly; what changes is WHERE the rule lives (now centralized,
 * not duplicated per inline site).
 * ============================================================ */

/* Outer section wrapper — used by both ChildSurface and BayOverviewSurface */
.wbv-shell .workbench-bay-shape {
  padding: 16px;
  color: rgba(224, 234, 220, 0.92);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Dashed-border status header (warm) — used by ChildSurface + BayOverviewSurface */
.wbv-shell .workbench-bay-shape__status-header {
  padding: 10px 12px;
  background: rgba(5, 9, 9, 0.55);
  border: 1px dashed rgba(225, 218, 168, 0.32);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  line-height: 1.5;
}
.wbv-shell .workbench-bay-shape__header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.wbv-shell .workbench-bay-shape__status-strong {
  color: rgba(225, 218, 168, 0.95);
}

/* Solid-border bay-context section (cool-grey) */
.wbv-shell .workbench-bay-shape__bay-context {
  padding: 10px 12px;
  background: rgba(11, 16, 16, 0.6);
  border: 1px solid rgba(178, 205, 188, 0.18);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  line-height: 1.55;
  color: rgba(224, 234, 220, 0.82);
}
.wbv-shell .workbench-bay-shape__bay-context-name {
  color: rgba(252, 255, 249, 0.95);
}
.wbv-shell .workbench-bay-shape__bay-context-desc {
  color: rgba(224, 234, 220, 0.72);
}

/* Inner section helper (flex-col stack) */
.wbv-shell .workbench-bay-shape__section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wbv-shell .workbench-bay-shape__section--gap-8 {
  gap: 8px;
}

/* Section label (uppercase letterspaced small caps) */
.wbv-shell .workbench-bay-shape__section-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(224, 234, 220, 0.7);
  font-weight: 700;
}

/* Body paragraph + footnote */
.wbv-shell .workbench-bay-shape__paragraph {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(252, 255, 249, 0.94);
}
.wbv-shell .workbench-bay-shape__bay-overview-fallback {
  margin: 0;
  font-size: 12px;
  color: rgba(224, 234, 220, 0.7);
  line-height: 1.5;
}
.wbv-shell .workbench-bay-shape__footnote {
  font-size: 10px;
  color: rgba(224, 234, 220, 0.55);
  font-style: italic;
  margin: 0;
}

/* Control row + sub-elements (grid layout per control) */
.wbv-shell .workbench-bay-shape__control-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wbv-shell .workbench-bay-shape__control-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  -moz-column-gap: 12px;
       column-gap: 12px;
  row-gap: 3px;
  padding: 10px 12px;
  background: rgba(11, 16, 16, 0.6);
  border: 1px solid rgba(178, 205, 188, 0.18);
  border-radius: 6px;
  list-style: none;
}
.wbv-shell .workbench-bay-shape__control-label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(252, 255, 249, 0.98);
  line-height: 1.35;
}
.wbv-shell .workbench-bay-shape__control-chip {
  justify-self: end;
}
.wbv-shell .workbench-bay-shape__control-description {
  grid-column: 1 / span 2;
  font-size: 11px;
  color: rgba(224, 234, 220, 0.78);
  line-height: 1.5;
}
.wbv-shell .workbench-bay-shape__control-closure {
  grid-column: 1 / span 2;
}

/* PlaceholderBridge header bar (cool-grey dashed-bottom) */
.wbv-shell .workbench-placeholder-bridge__header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(178, 205, 188, 0.72);
  padding: 6px 12px;
  border-bottom: 1px dashed rgba(178, 205, 188, 0.18);
  background: rgba(11, 16, 16, 0.4);
}
.wbv-shell .workbench-placeholder-bridge__bay-label {
  font-weight: 700;
}
.wbv-shell .workbench-placeholder-bridge__divider {
  opacity: 0.55;
}

/* ============================================================
 * Pass 9 — Mission Control default-render recipes (Review bay)
 *
 * Live click-through audit (Pass 9 Lane A) confirmed Review bay mounts
 * MissionControl.tsx. The MissionZones outer grid, internal 2-col rows,
 * pill alignment, inbox label subtext, PepperBubble inline list/divider,
 * and chat-input-meta accent are repeating inline-style patterns that
 * normalize cleanly to scoped recipes. Per-agent palette on
 * .agent-chip-mini (a.color + "22" / a.color) intentionally stays inline
 * as data-driven (Lane D classification: must remain local/data-driven).
 * Drawer surface (lines 355-410 in MissionControl.tsx) defer to Pass 10
 * since it is a click-to-open secondary surface, not Review-bay default.
 * Paint values are LITERAL LIFTS of the prior inline values; visual
 * identity preserved exactly.
 * ============================================================ */

/* Outer MissionZones grid wrapper (Slice 3 six-zone layout) */
.wbv-shell .mission-zones-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  margin-bottom: 16px;
}

/* Internal two-zone row grid (ActiveOps+Blockers, Approval+ModelRouter) */
.wbv-shell .mission-zones-grid__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
}

/* Pill push-to-end modifier (replaces marginLeft:auto inline) */
.wbv-shell .pill--push-end {
  margin-left: auto;
}

/* Inbox section-label faint subtext (e.g., "static example") */
.wbv-shell .workflow-section-label__subtext {
  color: var(--fg-faint);
  font-weight: 400;
  margin-left: 6px;
}

/* PepperBubble inline list + post-list divider */
.wbv-shell .pepper-bubble__list {
  margin: 8px 0 0 20px;
  color: var(--fg-dim);
}
.wbv-shell .pepper-bubble__divider {
  margin-top: 12px;
}

/* Chat-input-meta accent span (active app name / mode label) */
.wbv-shell .chat-input-meta__accent {
  color: var(--lavender);
}

/* ============================================================
 * Pass 10 — MissionControl agent drawer recipe family
 *
 * Live click-to-open audit (Pass 10 Lane A) inspected the drawer surface
 * that opens when the operator clicks an .agent-chip-mini button in the
 * Review bay. The drawer (MissionControl.tsx lines 346-415) had 18+
 * inline-style elements across ~10 distinct patterns (header row, avatar,
 * caption, name, intro/section margin blocks, descriptions, section
 * titles repeated 3x, empty states, task-card, activity list/row/ts/text,
 * token-usage block, footer divider). Per-agent palette inline
 * (a.color + "22" / a.color) intentionally preserved as data-driven per
 * Lane D classification.
 *
 * Paint values are LITERAL LIFTS of the prior inline values; visual
 * identity preserved exactly. Continues Pass 9 recipe-extraction pattern
 * for the same MissionControl component family.
 * ============================================================ */

/* Drawer header — row layout with avatar + name pair */
.wbv-shell .workbench-agent-drawer__header-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Drawer avatar size (per-agent bg+color stays inline as data-driven) */
.wbv-shell .workbench-agent-drawer__avatar {
  width: 40px;
  height: 40px;
  font-size: 16px;
}
/* Above-name caption ("Agent" label) */
.wbv-shell .workbench-agent-drawer__caption {
  font-size: 11px;
  color: var(--fg-faint);
}
/* Agent display name */
.wbv-shell .workbench-agent-drawer__name {
  color: var(--fg-bright);
  font-size: 22px;
  font-weight: 600;
}

/* Pill+description intro row (above the first section) */
.wbv-shell .workbench-agent-drawer__intro {
  margin-bottom: 16px;
}
.wbv-shell .workbench-agent-drawer__description {
  margin-left: 10px;
  font-size: 14px;
  color: var(--fg-dim);
}

/* Section margin block + uppercase small-caps title */
.wbv-shell .workbench-agent-drawer__section {
  margin-bottom: 20px;
}
.wbv-shell .workbench-agent-drawer__section-title {
  font-size: 11px;
  color: var(--fg-faint);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 600;
  margin-bottom: 8px;
}

/* Empty-state italic faint text */
.wbv-shell .workbench-agent-drawer__empty {
  color: var(--fg-faint);
  font-style: italic;
}
.wbv-shell .workbench-agent-drawer__empty--sm {
  font-size: 14px;
}

/* Filled task-card */
.wbv-shell .workbench-agent-drawer__task-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  color: var(--fg);
}

/* Activity list + row + meta */
.wbv-shell .workbench-agent-drawer__activity-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}
.wbv-shell .workbench-agent-drawer__activity-row {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.wbv-shell .workbench-agent-drawer__activity-ts {
  color: var(--fg-faint);
  font-size: 12px;
  margin-right: 10px;
}
.wbv-shell .workbench-agent-drawer__activity-text {
  color: var(--fg-dim);
}

/* Token-usage block */
.wbv-shell .workbench-agent-drawer__usage {
  font-size: 14px;
  color: var(--fg-dim);
}
.wbv-shell .workbench-agent-drawer__usage-count {
  color: var(--fg-bright);
  font-weight: 600;
}
.wbv-shell .workbench-agent-drawer__usage-mode {
  color: var(--lavender);
}

/* Drawer footer divider note */
.wbv-shell .workbench-agent-drawer__footer {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  font-size: 12px;
  color: var(--fg-faint);
  font-style: italic;
}

/* ============================================================
 * Pass 11 — SourceBadge component recipe family
 *
 * Pivoted from the originally-suggested Inbox task-card target (Pass 10
 * packet claim was imprecise; Lane A confirmed inboxInlineCount: 0 —
 * Inbox is already fully class-based). Honest pivot target: SourceBadge
 * component, which had 14 inline-style properties per render (outer span
 * 10 + dot span 4) and is consumed by 10 files including every mission
 * zone via ZoneCard, AgentsPage, ModelRouterRow, TopBar, DCLAPage,
 * HiveMind, WarRoom, BuildNew. One component fix → multi-consumer
 * normalization across the entire workbench.
 *
 * Per-source palette (cfg.color from SOURCE_LABEL constants) preserved
 * as data-driven via 3 CSS custom properties set inline by the component
 * (proven Pass 5 mission-metric-pill / mission-tile pattern):
 *   --source-color  = cfg.color (solid; used for label text + dot bg)
 *   --source-bg     = cfg.color + "1f" (12.16% alpha tint; chip bg)
 *   --source-border = cfg.color + "55" (33.33% alpha; chip border)
 * The two hex-suffix computations stay in JS so the recipe is paint-
 * equivalent to the prior inline-style implementation across all 6
 * source labels (live/derived/manual/fallback/planned/unknown).
 * ============================================================ */

.wbv-shell .workbench-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--source-bg);
  color: var(--source-color);
  border: 1px solid var(--source-border);
  white-space: nowrap;
}
.wbv-shell .workbench-source-badge__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--source-color);
}

.wbv-shell .wbv-grid-card {
  background:
    linear-gradient(180deg, rgba(255, 220, 165, 0.06) 0%, rgba(255, 178, 90, 0.02) 36%, rgba(0, 0, 0, 0) 100%),
    rgba(10, 14, 20, 0.62) !important;
  backdrop-filter: blur(10px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(125%) !important;
  border: 1px solid rgba(255, 178, 90, 0.55) !important;
  border-radius: 10px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.18),
    inset 0 0 0 1px rgba(255, 178, 90, 0.14),
    0 0 0 1px rgba(255, 165, 65, 0.18),
    0 0 14px rgba(255, 140, 50, 0.18),
    0 4px 14px rgba(0, 0, 0, 0.40) !important;
  /* NOTE: padding intentionally NOT set here. Composite consumers
     (memory-card wbv-grid-card / usage-summary-card wbv-grid-card) keep
     padding from their legacy v6 overrides (memory: 14px; usage: 12px 14px)
     so this pass preserves rendered padding identity. Standalone
     .wbv-grid-card consumers (future bay-page adopters) will pick up
     padding from the dormant base rule (16px 18px); a follow-up pass
     should align that to the canonical 14px once the bay-page primitive
     consumption decision is finalized. */
}

/* ═══════════════════════════════════════════════════════════════════
   G-PC1 (2026-05-26) WBV overrides — Ask Pepper control bar,
   composer, toolbar, and advanced routing. Glass-depth treatment
   per WORKBENCH_GLASS_DEPTH_UX_CONSTRUCTION_KB §2 + §10.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Ask Pepper header — warm gradient glow matching interior panel headers ── */
.wbv-shell .workbench-pepper-workspace .pepper-chat-header {
  padding: 14px 16px !important;
  background: linear-gradient(180deg, rgba(255, 143, 58, 0.14) 0%, rgba(28, 29, 33, 0.0) 100%) !important;
  border: none !important;
  border-radius: var(--ws-glass-radius-inner) var(--ws-glass-radius-inner) 0 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.10) !important;
}
.wbv-shell .workbench-pepper-workspace .pepper-chat-header__title {
  color: rgba(255, 200, 130, 0.88) !important;
  text-shadow: 0 0 3px rgba(255, 140, 50, 0.14), 0 0 1px rgba(255, 180, 90, 0.20) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

/* ── Prompt control suite WBV overrides (G-PC1 phase 4) ── */
/* Suite container glass backing */
.wbv-shell .workbench-pepper-workspace .pepper-prompt-suite {
  background:
    linear-gradient(0deg, rgba(255, 220, 165, 0.04) 0%, rgba(0, 0, 0, 0) 100%),
    rgba(10, 14, 20, 0.50) !important;
  border-top-color: rgba(255, 178, 90, 0.22) !important;
}
/* Lane / Model labels */
.wbv-shell .workbench-pepper-workspace .pepper-prompt-suite__label {
  color: rgba(255, 200, 130, 0.88) !important;
  text-shadow: 0 0 3px rgba(255, 140, 50, 0.14), 0 0 1px rgba(255, 180, 90, 0.20) !important;
}
/* Lane / Model selects — must override global .wbv-shell select */
.wbv-shell .workbench-pepper-workspace .pepper-prompt-suite__select {
  border-color: rgba(255, 178, 90, 0.35) !important;
  background-color: rgba(10, 14, 20, 0.60) !important;
  color: rgba(240, 235, 225, 0.92) !important;
  font-size: 10px !important;
  padding: 2px 16px 2px 6px !important;
  line-height: 1.3 !important;
  box-shadow: none !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.wbv-shell .workbench-pepper-workspace .pepper-prompt-suite__select option {
  background: rgba(12, 16, 24, 0.98) !important;
  color: rgba(240, 235, 225, 0.92) !important;
}
/* ── GlassSelect WBV overrides — comfyUI glass treatment ─────────── */
.wbv-shell .workbench-pepper-workspace .glass-select__label {
  color: rgba(255, 200, 130, 0.88) !important;
  text-shadow: 0 0 3px rgba(255, 140, 50, 0.14), 0 0 1px rgba(255, 180, 90, 0.20) !important;
}
.wbv-shell .workbench-pepper-workspace .glass-select__trigger {
  border-color: rgba(255, 178, 90, 0.35) !important;
  background:
    linear-gradient(180deg, rgba(255, 220, 165, 0.03) 0%, rgba(0, 0, 0, 0) 100%),
    rgba(10, 14, 20, 0.60) !important;
  color: rgba(240, 235, 225, 0.92) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.wbv-shell .workbench-pepper-workspace .glass-select__trigger:hover {
  border-color: rgba(255, 178, 90, 0.55) !important;
  box-shadow: 0 0 6px rgba(255, 140, 50, 0.14) !important;
}
.wbv-shell .workbench-pepper-workspace .glass-select__trigger[aria-expanded="true"] {
  border-color: rgba(255, 178, 90, 0.65) !important;
  box-shadow: 0 0 8px rgba(255, 140, 50, 0.22), inset 0 1px 0 rgba(255, 220, 165, 0.08) !important;
}
.wbv-shell .workbench-pepper-workspace .glass-select__menu {
  background:
    linear-gradient(180deg, rgba(255, 220, 165, 0.04) 0%, rgba(0, 0, 0, 0) 100%),
    rgba(10, 14, 20, 0.88) !important;
  border-color: rgba(255, 178, 90, 0.30) !important;
  backdrop-filter: blur(20px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.55),
    0 0 1px rgba(255, 178, 90, 0.25),
    inset 0 1px 0 rgba(255, 220, 165, 0.08) !important;
}
.wbv-shell .workbench-pepper-workspace .glass-select__item:hover,
.wbv-shell .workbench-pepper-workspace .glass-select__item--focus {
  background: rgba(255, 178, 90, 0.14) !important;
  color: rgba(255, 220, 170, 0.96) !important;
}
.wbv-shell .workbench-pepper-workspace .glass-select__item--active {
  color: rgba(255, 200, 130, 0.96) !important;
  text-shadow: 0 0 4px rgba(255, 140, 50, 0.18) !important;
}
/* Reset broad `ul li` card styling from workspace WBV rules */
.wbv-shell .workbench-pepper-workspace .glass-select__menu,
.wbv-shell .workbench-pepper-workspace ul.glass-select__menu li,
.wbv-shell .workbench-pepper-workspace section ul.glass-select__menu li {
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.wbv-shell .workbench-pepper-workspace ul.glass-select__menu {
  background:
    linear-gradient(180deg, rgba(255, 220, 165, 0.04) 0%, rgba(0, 0, 0, 0) 100%),
    rgba(10, 14, 20, 0.88) !important;
  border: 1px solid rgba(255, 178, 90, 0.30) !important;
  border-radius: 6px !important;
  padding: 3px !important;
  backdrop-filter: blur(20px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.55),
    0 0 1px rgba(255, 178, 90, 0.25),
    inset 0 1px 0 rgba(255, 220, 165, 0.08) !important;
}
.wbv-shell .workbench-pepper-workspace ul.glass-select__menu li.glass-select__item {
  padding: 4px 8px !important;
  border-radius: 3px !important;
  font-size: 10px !important;
  color: rgba(240, 235, 225, 0.85) !important;
}
.wbv-shell .workbench-pepper-workspace ul.glass-select__menu li.glass-select__item:hover,
.wbv-shell .workbench-pepper-workspace ul.glass-select__menu li.glass-select__item--focus {
  background: rgba(255, 178, 90, 0.14) !important;
  color: rgba(255, 220, 170, 0.96) !important;
}
.wbv-shell .workbench-pepper-workspace ul.glass-select__menu li.glass-select__item--active {
  color: rgba(255, 200, 130, 0.96) !important;
}

/* Active-state glow for toggle pills (Voice ON, CTX ON) */
.wbv-shell .workbench-pepper-workspace .pepper-prompt-suite__pill--on {
  background: rgba(255, 178, 90, 0.16) !important;
  border-color: rgba(255, 200, 130, 0.70) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.22),
    0 0 10px rgba(255, 140, 50, 0.28) !important;
}
/* Composer input warm glass */
.wbv-shell .workbench-pepper-workspace .pepper-prompt-suite__input {
  background:
    linear-gradient(180deg, rgba(255, 220, 165, 0.03) 0%, rgba(0, 0, 0, 0) 100%),
    rgba(10, 14, 20, 0.62) !important;
  border-color: rgba(255, 178, 90, 0.30) !important;
}
.wbv-shell .workbench-pepper-workspace .pepper-prompt-suite__input:focus {
  border-color: rgba(255, 178, 90, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(255, 178, 90, 0.20), 0 0 8px rgba(255, 140, 50, 0.12) !important;
}
/* Send button warm glow */
.wbv-shell .workbench-pepper-workspace .pepper-prompt-suite__send {
  border-color: rgba(255, 178, 90, 0.55) !important;
  background: rgba(28, 18, 8, 0.75) !important;
  color: rgba(255, 200, 140, 0.96) !important;
  box-shadow: 0 0 8px rgba(255, 140, 50, 0.15) !important;
}
.wbv-shell .workbench-pepper-workspace .pepper-prompt-suite__send:hover:not(:disabled) {
  background: rgba(40, 24, 10, 0.92) !important;
  border-color: rgba(255, 200, 110, 0.80) !important;
  box-shadow: 0 0 14px rgba(255, 140, 50, 0.30) !important;
}
/* Footer context tracker muted */
.wbv-shell .workbench-pepper-workspace .pepper-prompt-suite__ctx-tracker {
  color: rgba(200, 210, 200, 0.45) !important;
}
/* Footer action buttons */
.wbv-shell .workbench-pepper-workspace .pepper-prompt-suite__action-btn {
  border-color: rgba(255, 178, 90, 0.22) !important;
}
.wbv-shell .workbench-pepper-workspace .pepper-prompt-suite__action-btn:hover {
  border-color: rgba(255, 178, 90, 0.45) !important;
  color: rgba(255, 200, 130, 0.85) !important;
}

/* Advanced accordion warm top border */
.wbv-shell .workbench-pepper-workspace .pepper-chat-advanced {
  border-top-color: rgba(255, 178, 90, 0.12) !important;
}
.wbv-shell .workbench-pepper-workspace .pepper-chat-advanced__toggle:hover {
  color: rgba(255, 200, 130, 0.78) !important;
}

/* Context rail label warm treatment (dc-pill-action handles pill WBV) */
.wbv-shell .workbench-pepper-workspace .pepper-empty__ctx-label {
  color: rgba(255, 200, 130, 0.70) !important;
  text-shadow: 0 0 3px rgba(255, 140, 50, 0.14), 0 0 1px rgba(255, 180, 90, 0.20) !important;
}

/* G-PC1 correction: expand prompt suite + advanced to edge
   of parent frame (matches G-DC3 correction-43 pattern). */
.wbv-shell .workbench-pepper-workspace .workbench-pepper-chat > .pepper-prompt-suite,
.wbv-shell .workbench-pepper-workspace .workbench-pepper-chat > .pepper-chat-advanced {
  margin-left: -16px !important;
  margin-right: -16px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* =====================================================================
   RESPONSIVE WORKBENCH SHELL GRID (2026-05-26)
   Pipeline: workbench-responsive-shell-2026-05-26
   DCLA: L34 Workbench Surface

   Replaces the prior absolute-positioned shell layout (left:14.8%;
   width:70.4%; top:1.4%; etc. at lines 4376-4413) with a real CSS grid
   so the workbench composition resizes gracefully across the desktop
   range (1280-2560+) without panel overlap or collapse. Operator spec:
   "responsive shell/grid/layout system, not full-page scaling."

   Stable zones:
     left   = command spine          (clamp(240, 18vw, 348)px)
     top    = hero band + chip strip (auto height)
     center = HiveMind 3D stage      (minmax(0, 1fr) — fills remainder)
     right  = Pepper dock            (clamp(280, 19vw, 348)px)
     bottom = evidence console       (auto height)

   minmax(0, 1fr) on the center column (not minmax(auto, 1fr) or just 1fr)
   is critical: it prevents intrinsic content (3D canvas etc.) from forcing
   the column to exceed the available space, which would otherwise create
   horizontal page scroll and re-introduce the rail overlap.

   Selector strategy: `.wbv-shell main.workbench-panel-shell` gives one
   class + one element selector + one element selector = (0,2,1) specificity,
   beating the existing `.workbench-panel-shell` (0,1,0) and reliably
   landing the cascade after the legacy 4376-4413 block.
   ===================================================================== */

/* Shell spacing knobs (operator review 2026-05-26: "restore original-feeling
   outer gutters"). All gutter/gap values come from these vars so they can
   be tuned in one place. Defaults match the breathing room visible in the
   PR #383 baseline screenshot. */
.wbv-shell {
  --wb-shell-gutter-x: 22px;   /* viewport-edge breathing room (left/right) */
  --wb-shell-gutter-top: 16px; /* below AuthBar */
  --wb-shell-gutter-bottom: 18px;
  --wb-shell-gap-col: 18px;    /* between left rail / center / right dock */
  --wb-shell-gap-row: 14px;    /* between top band / center / bottom evidence */
}

.wbv-shell main.workbench-panel-shell {
  display: grid;
  grid-template-columns:
    clamp(240px, 18vw, 348px)
    minmax(0, 1fr)
    clamp(280px, 19vw, 348px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "left top    right"
    "left center right"
    "left bottom right";
  gap: var(--wb-shell-gap-row) var(--wb-shell-gap-col);
  padding:
    var(--wb-shell-gutter-top)
    var(--wb-shell-gutter-x)
    var(--wb-shell-gutter-bottom);
  /* Clamp to exactly the viewport area minus the AuthBar (layout.tsx has
     a <div style={paddingTop:28}>). Using `height` not `min-height` so
     content cannot push the shell past the viewport edge, which would
     cause vertical page scroll. Internal panels (dock, evidence) get
     their own overflow handling. */
  height: calc(100vh - 28px);
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  /* Containment: prevent rogue absolute-positioned descendants from
     overflowing the shell and bringing back the old wrapping bug. */
  position: relative;
}

/* Reset legacy absolute positioning on the major zone wrappers and
   assign them to grid areas. `!important` on the inset reset is needed
   because the legacy rules at 4391/4395 (`top: 1.4%`, `bottom: 1.5%`)
   leak through plain `inset: auto` in some cascade orderings — without
   the !important the evidence strip ends up positioned -31px relative
   to its grid row, overlapping the center stage. */
.wbv-shell main.workbench-panel-shell > .workbench-panel-shell__side--left {
  grid-area: left;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0;
  min-height: 0;
  max-width: none !important;
  max-height: none !important;
  pointer-events: auto;
}
.wbv-shell main.workbench-panel-shell > .workbench-panel-shell__side--right {
  grid-area: right;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0;
  min-height: 0;
  max-width: none !important;
  max-height: none !important;
  pointer-events: auto;
}
.wbv-shell main.workbench-panel-shell > .workbench-panel-shell__top {
  grid-area: top;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0;
  max-width: none !important;
  max-height: none !important;
  pointer-events: auto;
}
.wbv-shell main.workbench-panel-shell > .workbench-panel-shell__bottom {
  grid-area: bottom;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0;
  max-width: none !important;
  max-height: none !important;
  pointer-events: auto;
}
.wbv-shell main.workbench-panel-shell > .hivemind-3d-home-stage {
  grid-area: center;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0;
  min-height: 0;
  margin: 0 !important;
}

/* PEPPER DOCK STRUCTURE (operator review 2026-05-26: "Pepper workspace
   bottom controls cut off"). The dock is a flex column. Header +
   context-row pin to top; compact-stack flex-grows to fill remainder.
   Inside compact-stack, the chat-card flex-grows while the EXPAND
   WORKSPACE button stays pinned at the very bottom. Inside the chat-card,
   the title and pepper-dock-suite (Ask Pepper input + LANE/MODEL/VOICE/
   CTX buttons) pin at top/bottom; only the response-window middle scrolls.
   Net effect: the bottom controls of the dock are ALWAYS visible
   regardless of dock height; only the descriptive text in the middle
   scrolls when there isn't enough vertical room. */
.wbv-shell .workbench-panel-shell__side--right > .workbench-pepper-dock {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0;
  min-height: 0;
  max-width: none !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Dock children that should NOT shrink (header + context summary). */
.wbv-shell .workbench-pepper-dock > .workbench-pepper-dock__header,
.wbv-shell .workbench-pepper-dock > .workbench-pepper-dock__context-row,
.wbv-shell .workbench-pepper-dock > .workbench-pepper-dock__summary-grid {
  flex: 0 0 auto !important;
}

/* Compact-stack: grows to fill the remaining dock height, NO internal
   scroll itself — its child (the chat-card) handles overflow. Without
   `min-height: 0` flex children refuse to shrink below their content
   height and the compact-stack would push the EXPAND button off-bottom. */
.wbv-shell .workbench-pepper-dock > .workbench-pepper-dock__compact-stack {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Inside compact-stack: chat-card grows, EXPAND button pinned. */
.wbv-shell .workbench-pepper-dock__compact-stack > .workbench-pepper-dock__chat-card {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.wbv-shell .workbench-pepper-dock__compact-stack > .workbench-pepper-dock__expand {
  flex: 0 0 auto !important;
}

/* Inside chat-card: title pinned, response-window scrolls, suite pinned. */
.wbv-shell .workbench-pepper-dock__chat-card > .workbench-pepper-dock__compact-title {
  flex: 0 0 auto !important;
}
.wbv-shell .workbench-pepper-dock__chat-card > .workbench-pepper-dock__response-window {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}
.wbv-shell .workbench-pepper-dock__chat-card > .pepper-dock-suite {
  flex: 0 0 auto !important;
}

/* LEFT SPINE: same pattern. Spine content overflow scrolls within the
   rail, never pushes the rail past the viewport. */
.wbv-shell .workbench-panel-shell__side--left > .workbench-os-spine,
.wbv-shell .workbench-panel-shell__side--left > .forge-spine {
  height: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
/* The spine's actual scrollable body — the items list — gets overflow. */
.wbv-shell .workbench-os-spine .forge-spine__body,
.wbv-shell .workbench-os-spine .workbench-os-spine__body {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

/* The bottom evidence strip lives inside the bottom wrapper. Override
   the earlier `width: min(1120px, 94%); margin: 0 auto` so the strip
   fills the bottom grid area instead of clamping at 1120px and centering.
   !important required because line 9840 / 13765 / 14461 / 17686 / 18258
   etc. set widths at higher specificity. */
.wbv-shell .workbench-panel-shell__bottom > .workbench-bottom-evidence-strip {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* Bottom evidence row: 9 cards in one row using auto-fit minmax. The
   earlier !important rule at line 19252 wins via the cascade because it's
   declared at equal specificity but LATER. We re-declare here with
   !important AND we add a higher-specificity selector (extra .wbv-shell)
   so this lands last. minmax(70-100px, 1fr) lets cards shrink to ~75px
   wide at compact widths without wrapping. */
.wbv-shell .wbv-shell .workbench-bottom-evidence-strip__items,
.wbv-shell .workbench-panel-shell__bottom .workbench-bottom-evidence-strip__items {
  grid-template-columns: repeat(9, minmax(80px, 1fr)) !important;
  min-width: 0 !important;
}

/* Compact desktop (1200-1599): tighten rails + evidence density.
   Gutter retained — operator spec: "If fixing the gutters reduces
   available vertical space and causes clipping, solve with internal
   panel scrolling/flex layout — do not remove the gutters again." */
@media (max-width: 1599px) {
  .wbv-shell {
    --wb-shell-gutter-x: 16px;
    --wb-shell-gutter-top: 12px;
    --wb-shell-gutter-bottom: 14px;
    --wb-shell-gap-col: 14px;
    --wb-shell-gap-row: 12px;
  }
  .wbv-shell main.workbench-panel-shell {
    grid-template-columns:
      clamp(220px, 17vw, 300px)
      minmax(0, 1fr)
      clamp(260px, 18vw, 320px);
  }
  .wbv-shell .workbench-panel-shell__bottom .workbench-bottom-evidence-strip__items {
    grid-template-columns: repeat(9, minmax(70px, 1fr)) !important;
    gap: 5px !important;
  }
  .wbv-shell .workbench-bottom-evidence-strip__cell {
    padding: 6px 7px;
  }
}

/* =====================================================================
   TOP HEADER PILL DENSITY (2026-05-26)
   Pipeline: workbench-header-density-2026-05-26
   DCLA: L34 Workbench Surface

   Root cause: each .workbench-status-pill has
     min-width: 90px; flex-shrink: 0; white-space: normal
   so at narrow viewports the chips refuse to shrink, the value text
   wraps to multiple lines INSIDE each chip (chip h grows 44 → 94 → 148),
   and chips spill above/below their designed row band. This bloats the
   effective header height and pushes the Pepper dock bottom controls
   off-screen.

   Fix (per operator direction 2026-05-26 — responsive density, NOT
   forced single-row, NOT horizontal scroll):
   1. Keep the two designed chip ROWS — do NOT touch the row container's
      flex-wrap.
   2. Per-chip: allow flex shrink (flex-shrink: 1), drop min-width to a
      breakpoint var, keep the chip OUTER one line tall via
      `white-space: nowrap` on its text children with ellipsis truncation.
   3. Per-breakpoint: tune chip padding / font / min-width / row gap via
      `--wb-header-chip-*` vars so the chips compact proportionally as
      the viewport narrows, rather than growing vertically.

   Selector strategy: `.wbv-shell .workbench-status-pill` etc. — class +
   class for the boost needed over the legacy chip rules. */

.wbv-shell {
  /* Default (>= 1600px wide): original feel. */
  --wb-header-chip-font: 9px;
  --wb-header-chip-pad-x: 8px;
  --wb-header-chip-pad-y: 4px;
  --wb-header-chip-gap: 8px;
  --wb-header-chip-min: 78px;
  --wb-header-row-gap: 6px;
}

/* Apply vars to the chips themselves. flex-shrink: 1 is the critical
   change vs the legacy `flex-shrink: 0`. Children get ellipsis so text
   truncates instead of wrapping. */
.wbv-shell .workbench-status-pill,
.wbv-shell .workbench-top-hero-band__chips .wb-card,
.wbv-shell .workbench-top-hero-band__chips [class*="status-pill"] {
  min-width: var(--wb-header-chip-min) !important;
  flex-shrink: 1 !important;
  padding: var(--wb-header-chip-pad-y) var(--wb-header-chip-pad-x) !important;
  font-size: var(--wb-header-chip-font) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
.wbv-shell .workbench-status-pill > *,
.wbv-shell .workbench-top-hero-band__chips .wb-card > *,
.wbv-shell .workbench-top-hero-band__chips .wb-card__label,
.wbv-shell .workbench-top-hero-band__chips .wb-card__value {
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.wbv-shell .workbench-top-hero-band__chips {
  gap: var(--wb-header-chip-gap) !important;
  min-width: 0;
}
.wbv-shell .workbench-top-hero-band__row {
  gap: var(--wb-header-row-gap) !important;
  min-width: 0;
}

/* Normal desktop (1600-1919) — already covered by defaults; no separate
   block needed because the defaults are tuned for this size. */

/* Compact desktop (1200-1599): smaller chips. */
@media (max-width: 1599px) {
  .wbv-shell {
    --wb-header-chip-font: 8px;
    --wb-header-chip-pad-x: 6px;
    --wb-header-chip-pad-y: 3px;
    --wb-header-chip-gap: 6px;
    --wb-header-chip-min: 64px;
    --wb-header-row-gap: 5px;
  }
}

/* Narrow review (< 1200): minimum density. Chips can shrink small but
   remain readable; ellipsis truncates over-long values. */
@media (max-width: 1199px) {
  .wbv-shell {
    --wb-header-chip-font: 7.5px;
    --wb-header-chip-pad-x: 5px;
    --wb-header-chip-pad-y: 3px;
    --wb-header-chip-gap: 5px;
    --wb-header-chip-min: 52px;
    --wb-header-row-gap: 4px;
  }
}

/* =====================================================================
   PEPPER WORKSPACE TOP HEADER — SINGLE-ROW CHIP STRIP (2026-05-26)
   Pipeline: workbench-pepper-workspace-header-no-wrap-2026-05-26
   DCLA: L34 Workbench Surface

   Root cause: `.ws-header-chips` is `display: flex; flex-wrap: wrap;`
   and child `.ws-header-chip` is `flex: 0 0 auto !important;
   white-space: nowrap` so chips refuse to shrink. The 6th chip ("Mode"
   with long value text) doesn't fit row 1 and wraps to row 2 — that
   second row inflates the Pepper Workspace header by ~50px and pushes
   the bottom agent/lane controls past the viewport.

   Operator-confirmed direction 2026-05-26: "The top panel for pepper
   workspace should never have two rows. The bubbles/chips are not
   scaling correctly."

   Fix: force the chips strip to single-row (nowrap), allow each chip
   to shrink (flex: 0 1 auto + min-width: 0), and truncate the chip's
   VALUE text with ellipsis so the long Mode value doesn't force layout
   expansion. The chip LABEL (top "WORKSPACE" / "MISSION" / etc.) stays
   readable; only the long value text below it truncates.

   This is different from the workbench shell top band which has TWO
   DESIGNED rows. The Pepper Workspace header is one row by design;
   the wrap was an accidental layout failure, not intentional. */

.wbv-shell .ws-header-chips {
  flex-wrap: nowrap !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.wbv-shell .workbench-pepper-workspace__header .ws-header-chip {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
/* Truncate the long value text inside each chip (the part below the
   uppercase label). `.ws-header-chip` is flex-direction: column with
   the label as a <span> and the value as either em / strong / text node. */
.wbv-shell .workbench-pepper-workspace__header .ws-header-chip em,
.wbv-shell .workbench-pepper-workspace__header .ws-header-chip strong,
.wbv-shell .workbench-pepper-workspace__header .ws-header-chip > *:not(:first-child) {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

/* Compact-desktop (<= 1599): smaller chip padding + font. */
@media (max-width: 1599px) {
  .wbv-shell .workbench-pepper-workspace__header .ws-header-chip {
    padding: 6px 8px !important;
    font-size: 10px !important;
  }
  .wbv-shell .workbench-pepper-workspace__header .ws-header-chip span {
    font-size: 9px !important;
  }
}

/* Narrow (<= 1199): even tighter; tolerate truncation. */
@media (max-width: 1199px) {
  .wbv-shell .workbench-pepper-workspace__header .ws-header-chip {
    padding: 5px 6px !important;
    font-size: 9px !important;
  }
  .wbv-shell .workbench-pepper-workspace__header .ws-header-chip span {
    font-size: 8px !important;
  }
}

/* =====================================================================
   PEPPER WORKSPACE AGENT CHIP CARDS — VERTICAL FIT (2026-05-26)
   Pipeline: workbench-agent-chip-height-fit-2026-05-26
   DCLA: L34 Workbench Surface

   Operator-flagged 2026-05-26: "director/swarm agent lanes keep getting
   cut off, I should never have to scroll to view those."

   Root cause: each .workbench-stage-chip card is rendered with inline
   styles `aspectRatio: "1"; width: 190px (via grid minmax)` → forces
   height = 190px regardless of viewport vertical room. At realistic
   browser viewports (1920 x ~820 after browser chrome), the
   .stage-agent-chip-grid + agent cards extend ~13px past the viewport
   and the cards are cut off / require scrolling.

   Fix: cap the card max-height responsively + override the inline
   aspect-ratio so cards can be wider-than-tall when vertical room is
   tight. Internal content (avatar / name / status pill / icon row)
   compacts via smaller sizes at narrow heights.

   `!important` is required to defeat the inline `style="aspect-ratio:1"`
   set in DirectorConsoleCockpit.tsx line ~1644 — inline styles win the
   cascade except for `!important` CSS rules. */

.wbv-shell .workbench-pepper-workspace .stage-agent-chip-grid .workbench-stage-chip {
  /* Override inline aspect-ratio: 1 */
  aspect-ratio: auto !important;
  /* Cap card height for normal browser viewports. The natural content
     (avatar 56 + name + status + icons + gaps + padding) is ~165px —
     cap to 140px which clips a small amount of icon-row tail rather
     than overflowing the workspace. */
  height: clamp(96px, 16vh, 150px) !important;
  min-height: 0 !important;
  /* Stop forcing 190px width — allow narrower cards so more fit per row
     and grid stays compact. */
  max-width: 150px !important;
}

/* Tighten internal card spacing so the visible content fits the capped
   height cleanly. */
.wbv-shell .workbench-pepper-workspace .stage-agent-chip-grid .workbench-stage-chip > span:first-child {
  /* The avatar circle (inline 56x56). Reduce at smaller card heights. */
  width: clamp(28px, 5vh, 44px) !important;
  height: clamp(28px, 5vh, 44px) !important;
  font-size: clamp(14px, 2.2vh, 20px) !important;
}
.wbv-shell .workbench-pepper-workspace .stage-agent-chip-grid .workbench-stage-chip strong {
  font-size: clamp(11px, 1.6vh, 14px) !important;
}
.wbv-shell .workbench-pepper-workspace .stage-agent-chip-grid .workbench-stage-chip em {
  font-size: clamp(8px, 1.2vh, 10px) !important;
  padding: 2px 5px !important;
}
.wbv-shell .workbench-pepper-workspace .stage-agent-chip-grid .workbench-stage-chip > div[role="group"] button {
  /* The inline styles on these icon buttons include padding (3px 8px)
     plus a small width/height. After I capped the card size, padding
     became larger than content area, leaving the icon glyph (eg. ⓘ /
     ☷ / ✦) misaligned and overflowing its bubble. Force a centered
     icon-button with zero internal padding + flex center alignment so
     the glyph lines up cleanly in the middle of the bubble. */
  width: clamp(18px, 2.4vh, 22px) !important;
  height: clamp(18px, 2.4vh, 22px) !important;
  padding: 0 !important;
  font-size: clamp(10px, 1.4vh, 12px) !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* Tighten the grid itself: smaller min-card-width so more cards fit per
   row, smaller gap so the grid doesn't push the rest of the dock. */
.wbv-shell .workbench-pepper-workspace .stage-agent-chip-grid {
  grid-template-columns: repeat(auto-fill, minmax(100px, 150px)) !important;
  gap: 6px !important;
}

/* Narrow review (< 1200): minimum density + evidence horizontal scroll.
   Gutter still retained but reduced. */
@media (max-width: 1199px) {
  .wbv-shell {
    --wb-shell-gutter-x: 12px;
    --wb-shell-gutter-top: 10px;
    --wb-shell-gutter-bottom: 12px;
    --wb-shell-gap-col: 10px;
    --wb-shell-gap-row: 10px;
  }
  .wbv-shell main.workbench-panel-shell {
    grid-template-columns:
      clamp(200px, 22vw, 260px)
      minmax(0, 1fr)
      clamp(240px, 24vw, 280px);
  }
  /* Below 1200, allow the 9 cards to extend past their column with
     horizontal scroll inside the strip — preserves the single-row
     composition without forcing rail overlap. */
  .wbv-shell .workbench-panel-shell__bottom .workbench-bottom-evidence-strip__items {
    grid-template-columns: repeat(9, minmax(85px, 1fr)) !important;
    overflow-x: auto !important;
  }
}
.pepper-dock-foundation-strip {
  display: grid;
  gap: 3px;
  padding: 8px 9px;
  border: 1px solid rgba(113, 184, 255, 0.22);
  border-radius: 6px;
  background: rgba(6, 13, 20, 0.58);
}

.pepper-dock-foundation-strip span,
.pepper-dock-foundation-strip em,
.pepper-foundation-card__meta dt,
.pepper-lane-readiness-card__header span,
.pepper-bridge-card span,
.pepper-readiness-hero span {
  color: rgba(185, 223, 218, 0.72);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.pepper-dock-foundation-strip strong {
  color: rgba(247, 251, 240, 0.95);
  font-size: 12px;
  line-height: 1.25;
}

.pepper-dock-foundation-strip em {
  color: rgba(231, 237, 224, 0.72);
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
}

.pepper-bridge-grid,
.pepper-packet-grid,
.pepper-lane-readiness-grid {
  display: grid;
  gap: 9px;
}

.pepper-bridge-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 10px;
}

.pepper-packet-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pepper-lane-readiness-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pepper-bridge-card,
.pepper-foundation-card,
.pepper-lane-readiness-card,
.pepper-readiness-hero {
  border: 1px solid rgba(178, 205, 188, 0.14);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(16, 24, 23, 0.78), rgba(5, 9, 9, 0.68));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.pepper-bridge-card {
  min-height: 92px;
  padding: 9px;
}

.pepper-bridge-card p,
.pepper-foundation-card p,
.pepper-lane-readiness-card p,
.pepper-readiness-hero p {
  margin: 5px 0 0;
  color: rgba(239, 245, 235, 0.86);
  font-size: 12px;
  line-height: 1.42;
}

.pepper-bridge-card--next {
  border-color: rgba(124, 220, 150, 0.24);
}

.pepper-bridge-card--approval,
.pepper-bridge-card--simulated {
  border-color: rgba(255, 178, 90, 0.28);
}

.pepper-foundation-card,
.pepper-lane-readiness-card {
  padding: 10px;
}

.pepper-foundation-card__header,
.pepper-lane-readiness-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.pepper-foundation-card__header span {
  color: rgba(249, 252, 245, 0.95);
  font-size: 13px;
  font-weight: 800;
}

.pepper-foundation-pill {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 2px 6px;
  border: 1px solid rgba(178, 205, 188, 0.18);
  border-radius: 999px;
  color: rgba(239, 245, 235, 0.86);
  background: rgba(255, 255, 255, 0.035);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
  white-space: nowrap;
}

.pepper-foundation-pill--foundation-active {
  border-color: rgba(124, 220, 150, 0.30);
  color: rgba(172, 247, 184, 0.92);
  background: rgba(34, 124, 68, 0.16);
}

.pepper-foundation-pill--readiness-only,
.pepper-foundation-pill--gated {
  border-color: rgba(255, 178, 90, 0.32);
  color: rgba(255, 222, 156, 0.94);
  background: rgba(140, 82, 24, 0.18);
}

.pepper-foundation-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.pepper-foundation-card__chips span {
  padding: 3px 6px;
  border: 1px solid rgba(113, 184, 255, 0.17);
  border-radius: 5px;
  color: rgba(224, 239, 245, 0.82);
  background: rgba(0, 0, 0, 0.18);
  font-size: 11px;
  line-height: 1.2;
}

.pepper-foundation-card__meta {
  display: grid;
  gap: 7px;
  margin: 9px 0 0;
}

.pepper-foundation-card__meta div {
  display: grid;
  gap: 2px;
}

.pepper-foundation-card__meta dd {
  margin: 0;
  color: rgba(239, 245, 235, 0.82);
  font-size: 11px;
  line-height: 1.35;
}

.pepper-lane-readiness-card > strong {
  display: block;
  margin-top: 8px;
  color: rgba(255, 222, 156, 0.94);
  font-size: 12px;
}

.pepper-readiness-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 12px;
  margin-bottom: 10px;
  padding: 12px;
}

.pepper-readiness-hero h3 {
  margin: 4px 0 0;
  color: rgba(249, 252, 245, 0.96);
  font-size: 17px;
  line-height: 1.2;
}

.pepper-readiness-hero__facts {
  display: grid;
  gap: 7px;
}

.pepper-readiness-hero__facts div {
  display: grid;
  gap: 2px;
  padding: 8px;
  border: 1px solid rgba(178, 205, 188, 0.12);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.18);
}

.pepper-readiness-hero__facts strong,
.pepper-readiness-hero__facts em {
  overflow-wrap: anywhere;
}

.pepper-readiness-hero__facts strong {
  color: rgba(249, 252, 245, 0.95);
  font-size: 12px;
}

.pepper-readiness-hero__facts em {
  color: rgba(231, 237, 224, 0.72);
  font-size: 11px;
  font-style: normal;
  line-height: 1.3;
}

@media (max-width: 1280px) {
  .pepper-bridge-grid,
  .pepper-packet-grid,
  .pepper-lane-readiness-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pepper-readiness-hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .pepper-bridge-grid,
  .pepper-packet-grid,
  .pepper-lane-readiness-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   AUTH BAR PILL + DEV/EDIT PILL POSITIONING (2026-05-26)
   Pipeline: workbench-top-chrome-pills-2026-05-26
   DCLA: L34 Workbench Surface

   Two operator-flagged corrections shipped together:

   1. Operator Login pill must match the exact size and style of the
      dev/edit collapsed pill (solid dark bg rgba(8,12,18,0.82) +
      amber border + inset highlights + warm halo). Scaled to chrome,
      not primary-action sizing.

   2. Dev/edit collapsed pill must NOT overlap the Pepper General /
      Workbench Dock top border. It currently sits at top:4px inside
      the workbench shell which has overflow:hidden — that means
      simply moving it with negative top would CLIP it (operator-
      observed "missing" pill). Fix: switch to position:fixed so it
      escapes the shell's clipping ancestor, and pin it to the top-
      right corner of the viewport in the auth-bar chrome band. */

[data-testid="workbench-auth-bar"] .dc-pill-action {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 2px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  border-radius: 6px !important;
  background: rgba(8, 12, 18, 0.82) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255, 178, 90, 0.72) !important;
  color: rgba(247, 249, 242, 0.98) !important;
  text-shadow: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 160, 0.14),
    inset 0 0 0 1px rgba(255, 178, 90, 0.16),
    0 0 10px rgba(255, 145, 55, 0.22),
    0 2px 6px rgba(0, 0, 0, 0.38) !important;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease !important;
}
[data-testid="workbench-auth-bar"] .dc-pill-action:hover:not(:disabled) {
  border-color: rgba(255, 215, 145, 0.90) !important;
  background: rgba(14, 18, 26, 0.88) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 185, 0.22),
    inset 0 0 0 1px rgba(255, 200, 110, 0.22),
    0 0 14px rgba(255, 150, 60, 0.32),
    0 3px 8px rgba(0, 0, 0, 0.44) !important;
}
[data-testid="workbench-auth-bar"] .dc-pill-action:disabled {
  opacity: 0.42 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 165, 0.10),
    0 1px 3px rgba(0, 0, 0, 0.28) !important;
}

/* Dev/edit collapsed pill: pin to viewport (position: fixed) so it
   escapes the workbench-panel-shell overflow:hidden clip. Place it in
   the top-right corner of the auth-bar chrome band (y=4-30) so its
   bottom is well above the dock's top border at y=44. */
.wbv-shell .workbench-dev-edit-menu {
  position: fixed !important;
  top: 4px !important;
  right: 14px !important;
  z-index: 1100 !important;
}

/* =====================================================================
   PEPPER DOCK PACKET SUMMARY (2026-05-27)
   Pipeline: workbench-pepper-dock-packet-summary-correction-2026-05-27
   DCLA: L34 Workbench Surface

   Operator review 2026-05-27 (real-browser screenshot, full monitor
   resolution): the bordered-chip variant still read as a debug panel
   inside the Ask Pepper card. Final form is a single-line caption-
   style status row positioned BELOW the Ask Pepper section and ABOVE
   the Expand Workspace button — quiet, plain text, no bordered chips,
   no wrap, ellipsis on overflow. Full per-packet detail (labels /
   fields / source / boundary) lives in the Expanded Workspace packets
   tab. Same source-of-truth via lib/pepperPackets.ts.
   ===================================================================== */

.pepper-dock-packet-summary--caption {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 6px;
  margin: 2px 2px 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(208, 214, 220, 0.62);
  font-size: 10px;
  line-height: 1.2;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pepper-dock-packet-summary--caption > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pepper-dock-packet-summary__label {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(208, 214, 220, 0.55);
  font-weight: 700;
  flex-shrink: 0;
}
.pepper-dock-packet-summary__sep {
  color: rgba(208, 214, 220, 0.30);
  flex-shrink: 0;
}

/* Slice g-pc2 (2026-05-27): when the caption row is interactive
   (an onClick is provided to open the Expanded Workspace Packets
   tab), it renders as a <div role="button">. The base caption
   styling above already supplies the layout/text tokens; this
   modifier only adds the cursor + a faint hover tint + a keyboard
   focus ring. No border, no background, no padding box. */
.pepper-dock-packet-summary--button {
  cursor: pointer;
}
.pepper-dock-packet-summary--button:hover {
  color: rgba(232, 240, 232, 0.86);
}
.pepper-dock-packet-summary--button:focus-visible {
  outline: 1px solid rgba(255, 200, 130, 0.55);
  outline-offset: 2px;
  border-radius: 3px;
}

/* =====================================================================
   PEPPER WORKSPACE PACKET RENDERER (NO NEW STYLING)
   Pipeline: workbench-ux-catalog-reuse-existing-primitives-2026-05-27
   DCLA: L34 Workbench Surface

   Operator UX rule 2026-05-27 (hard correction): the prior block
   introduced `.dc-glass-card`, `.dc-meta-chip`, `.dc-meta-row`,
   `.dc-proof-grid`, `.ppk-stack` — that was new visual treatment, not
   reuse. Removed. The packet renderer now composes only pre-existing
   primitives (`.dc-panel`, `.dc-panel__header`, `.dc-panel__title`,
   `.dc-panel__body`, `.dc-pill`, `.dc-panel__pill-anchor`, `DcKeyValue`,
   `DcList`, and the inline auto-1fr label/value grid pattern at
   WorkbenchPanelShell.tsx:3757-3766 — Handoff "Worker target" panel).

   This block is intentionally empty: the catalog at
   apps/workbench/app/components/workbench-ux/index.tsx wraps the
   pre-existing classes; no new CSS is added by the packet renderer.
   ===================================================================== */

/* =====================================================================
   v007.60 (2026-05-28) — Dev/Edit flyout contents stay INSIDE the bubble
   Operator 2026-05-28: "The Dev/Edit Open bubble when clicked has options
   going off screen and not seated within the fly out bubble". The flyout
   body had width: min(280px, 70vw) but its children (hivemind edit dock)
   carried hard-pixel widths (select: 260px, input: 72px ×4, long-label
   uppercase buttons) that exceeded the 260px content width, and the body
   itself had no vertical cap, so when Edit Mode was on the flyout ran off
   the bottom of the viewport. Pure CSS tightening of existing selectors;
   no new class introduced.
   ===================================================================== */

/* Body: cap height to viewport (minus top offset + a small gutter) so a
   tall content payload scrolls INSIDE the bubble instead of running off
   screen. Box-sizing belt-and-suspenders so padding + border count
   toward the configured width. */
.wbv-shell .workbench-dev-edit-menu__body {
  box-sizing: border-box !important;
  max-height: calc(100vh - 24px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Inner hivemind edit dock: when nested inside the flyout body, must
   fit the bubble's content width and wrap freely. Items shrink, no
   horizontal overflow. */
.wbv-shell .workbench-dev-edit-menu__body .hivemind-3d-home-edit-dock {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex-wrap: wrap !important;
  box-sizing: border-box !important;
}

/* Direct children (buttons + label wrappers + grid + actions row): allow
   each pill / row to fill width and wrap rather than push past the bubble
   edge. */
.wbv-shell .workbench-dev-edit-menu__body .hivemind-3d-home-edit-dock > * {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Buttons: allow shrink + text wrap so long labels (MOVE HIVEMIND DOWN,
   MOVE WINDOW DOWN) fold instead of overflowing. */
.wbv-shell .workbench-dev-edit-menu__body .hivemind-3d-home-edit-dock button {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  word-break: break-word !important;
  box-sizing: border-box !important;
}

/* The Edit target <select> had a hard width: 260px which exceeded the
   ~240px content area inside the 280px flyout body (after 10px x2
   padding + 1px x2 border). Constrain to 100% so it always fits. */
.wbv-shell .workbench-dev-edit-menu__body .hivemind-3d-home-edit-dock select {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Numeric inputs grid: wrap when bubble is narrow; each input shrinks
   to fit. The default 4-column auto layout summed to ~330px (4 × 72px +
   gaps) which overflowed the bubble. */
.wbv-shell .workbench-dev-edit-menu__body .hivemind-3d-home-edit-dock__grid {
  flex-wrap: wrap !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.wbv-shell .workbench-dev-edit-menu__body .hivemind-3d-home-edit-dock__grid input {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Copy/Save/Reset actions row: wrap rather than overflow. */
.wbv-shell .workbench-dev-edit-menu__body .hivemind-3d-home-edit-dock__actions {
  flex-wrap: wrap !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Narrow-viewport breakpoint (already adjusts body to min(220px, 90vw))
   inherits all of the above — no extra rule needed for ≤1199px. */


/* =====================================================================
   v007.61 (2026-05-28) — Edit target dropdown readability
   Operator 2026-05-28: "the drop down list for edit target is messy
   hard to read". The base hivemind edit dock styles set the select to
   10px monospace / weight 800 with thin glass-on-glass contrast, so
   amber-on-near-black option text was hard to scan. This rule bumps
   the select's typography for the dev/edit flyout instance only,
   bumps contrast, gives a slightly taller hit target, and applies
   ellipsis when an option label exceeds the bubble's content width.
   Pure CSS tightening of an existing selector; no new class.
   ===================================================================== */
.wbv-shell .workbench-dev-edit-menu__body .hivemind-3d-home-edit-dock select {
  font-size: 12px !important;
  font-weight: 600 !important;
  font-family: var(--font-mono) !important;
  letter-spacing: 0.02em !important;
  min-height: 32px !important;
  padding: 4px 8px !important;
  background: rgba(0, 0, 0, 0.72) !important;
  color: #fdf6ec !important;
  border-color: rgba(255, 178, 90, 0.46) !important;
  text-overflow: ellipsis !important;
}
.wbv-shell .workbench-dev-edit-menu__body .hivemind-3d-home-edit-dock select:focus {
  outline: none !important;
  border-color: rgba(255, 200, 110, 0.86) !important;
  box-shadow: 0 0 0 1px rgba(255, 178, 90, 0.32),
              0 0 12px rgba(255, 140, 50, 0.22) !important;
}
.wbv-shell .workbench-dev-edit-menu__body .hivemind-3d-home-edit-dock select option {
  font-size: 12px !important;
  font-weight: 600 !important;
  background: #0a0d10 !important;
  color: #fdf6ec !important;
}
.wbv-shell .workbench-dev-edit-menu__body .hivemind-3d-home-edit-dock label > span {
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  color: rgba(255, 200, 130, 0.92) !important;
}


/* =====================================================================
   v007.62 (2026-05-28) — Edit Mode field rows get sliders
   Operator 2026-05-28: "should have sliders as well for x/y scale and
   opacity as well". The X/Y/Scale/Opacity rows in the Dev/Edit flyout
   now pair a range slider with the existing number input. This rule
   stacks the four field-labels vertically inside the bubble (the
   slider + number pair needs the full content width to be readable),
   strips the dock's default <input> border/background from any
   type="range" so the slider renders cleanly, and aligns the row.
   Pure CSS tightening; no new class.
   ===================================================================== */
.wbv-shell .workbench-dev-edit-menu__body .hivemind-3d-home-edit-dock__grid {
  flex-direction: column !important;
  /* Override the v007.60 flex-wrap: wrap on this same selector.
     In column direction, `wrap` would create multiple vertical
     columns rather than stacking the four field rows. */
  flex-wrap: nowrap !important;
  align-items: stretch !important;
}
.wbv-shell .workbench-dev-edit-menu__body .hivemind-3d-home-edit-dock__grid > label {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
.wbv-shell .workbench-dev-edit-menu__body .hivemind-3d-home-edit-dock input[type="range"] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
       appearance: none !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 22px !important;
  min-height: 22px !important;
  width: 100% !important;
  cursor: pointer !important;
}
.wbv-shell .workbench-dev-edit-menu__body .hivemind-3d-home-edit-dock input[type="range"]::-webkit-slider-runnable-track {
  height: 4px !important;
  background: linear-gradient(
    90deg,
    rgba(255, 178, 90, 0.45),
    rgba(255, 165, 65, 0.18)
  ) !important;
  border-radius: 3px !important;
}
.wbv-shell .workbench-dev-edit-menu__body .hivemind-3d-home-edit-dock input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 14px !important;
  height: 14px !important;
  margin-top: -5px !important;
  border-radius: 50% !important;
  background: #ffb25a !important;
  border: 1px solid rgba(0, 0, 0, 0.6) !important;
  box-shadow: 0 0 6px rgba(255, 140, 50, 0.55) !important;
  cursor: pointer !important;
}
.wbv-shell .workbench-dev-edit-menu__body .hivemind-3d-home-edit-dock input[type="range"]::-moz-range-track {
  height: 4px !important;
  background: linear-gradient(
    90deg,
    rgba(255, 178, 90, 0.45),
    rgba(255, 165, 65, 0.18)
  ) !important;
  border-radius: 3px !important;
}
.wbv-shell .workbench-dev-edit-menu__body .hivemind-3d-home-edit-dock input[type="range"]::-moz-range-thumb {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #ffb25a !important;
  border: 1px solid rgba(0, 0, 0, 0.6) !important;
  box-shadow: 0 0 6px rgba(255, 140, 50, 0.55) !important;
  cursor: pointer !important;
}
.wbv-shell .workbench-dev-edit-menu__body .hivemind-3d-home-edit-dock input[type="number"] {
  font-size: 11px !important;
  text-align: right !important;
}

/* ============================================================
   Knowledge Library — clean Apple-style article reader
   (g-pc66-knowledge-library-wiki-search-2026-05-30)

   Canonical typography for the Knowledge child article readers
   (KB Index / Source Library / Themes / Goldmine / Assimilated). The
   broad `.wbv-shell .forge-surface-panel__body ul li` rule (~globals
   19620) cards EVERY list item with an orange-bordered glow — correct
   for the pepper-workspace loop chips, wrong for prose articles. This
   block is scoped to `.knowledge-article` ONLY: it resets that card
   styling back to normal markdown lists and applies a calm, readable
   article style with subtle DaForgeLayer copper/gold accents on section
   headings, dividers, links, and list markers. It does not touch any
   other panel-body list, the Knowledge parent dashboard, or the gated
   Promote cockpit.
   ============================================================ */
.wbv-shell .knowledge-article {
  color: var(--fg);
  font-size: 13.5px;
  line-height: 1.7;
  max-width: 760px;
}
.wbv-shell .knowledge-article h1 {
  font-size: 21px;
  font-weight: 700;
  color: var(--fg-bright);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 4px 0 6px;
}
.wbv-shell .knowledge-article h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--copper);            /* gold section labels */
  line-height: 1.3;
  margin: 26px 0 8px;
}
.wbv-shell .knowledge-article h3 {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--fg-bright);
  margin: 18px 0 6px;
}
.wbv-shell .knowledge-article h4,
.wbv-shell .knowledge-article h5,
.wbv-shell .knowledge-article h6 {
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 14px 0 4px;
}
.wbv-shell .knowledge-article p {
  margin: 0 0 12px;
  line-height: 1.7;
  color: var(--fg);
  font-size: 13.5px;
}
.wbv-shell .knowledge-article strong { color: var(--fg-bright); font-weight: 700; }
.wbv-shell .knowledge-article em { color: var(--fg-dim); }
.wbv-shell .knowledge-article a {
  color: var(--copper-bright);
  text-decoration: none;
  border-bottom: 1px solid rgba(245, 203, 124, 0.35);
}
.wbv-shell .knowledge-article a:hover { border-bottom-color: var(--copper-bright); }

/* lists — normal markdown bullets / numbers, gold marker, no cards */
.wbv-shell .knowledge-article ul,
.wbv-shell .knowledge-article ol {
  margin: 8px 0 12px;
  padding-left: 22px;
  color: var(--fg);
  font-size: 13.5px;
  line-height: 1.7;
}
.wbv-shell .knowledge-article ul { list-style: disc; }
.wbv-shell .knowledge-article ol { list-style: decimal; }
/* Reset the broad orange-card `ul li` rule for prose lists. Specificity
   (0,3,2)+!important beats `.wbv-shell .forge-surface-panel__body ul li`
   (0,2,2)!important. */
.wbv-shell .knowledge-article li,
.wbv-shell .forge-surface-panel__body .knowledge-article ul li,
.wbv-shell .forge-surface-panel__body .knowledge-article ol li,
.wbv-shell .forge-surface-panel__body .knowledge-article section ul li {
  display: list-item !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 1px 0 !important;
  margin: 3px 0 !important;
  color: var(--fg) !important;
  list-style: inherit !important;
}
.wbv-shell .knowledge-article li::marker { color: var(--copper); }
.wbv-shell .knowledge-article li > ul,
.wbv-shell .knowledge-article li > ol { margin: 4px 0; }

/* inline code / file paths — subtle monospace pill, no heavy border */
.wbv-shell .knowledge-article code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.9em;
  background: rgba(232, 168, 92, 0.10);
  border: none;
  border-radius: 4px;
  padding: 0.5px 5px;
  color: var(--copper-bright);
}
/* code blocks — calm dark, no glow */
.wbv-shell .knowledge-article pre {
  margin: 10px 0;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  overflow-x: auto;
  font-size: 11.5px;
  line-height: 1.55;
}
.wbv-shell .knowledge-article pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  color: var(--fg-dim);
  font-size: 11.5px;
}

/* blockquote → calm note/callout with a gold left bar */
.wbv-shell .knowledge-article blockquote {
  margin: 12px 0;
  padding: 8px 14px;
  border-left: 3px solid var(--copper);
  background: rgba(232, 168, 92, 0.06);
  border-radius: 0 6px 6px 0;
  color: var(--fg-dim);
}
.wbv-shell .knowledge-article blockquote p { margin: 0; color: var(--fg-dim); }

/* divider */
.wbv-shell .knowledge-article hr {
  border: none;
  border-top: 1px solid rgba(232, 168, 92, 0.22);
  margin: 18px 0;
}

/* tables — compact, clean, gold header rule */
.wbv-shell .knowledge-article table {
  border-collapse: collapse;
  width: 100%;
  margin: 10px 0;
  font-size: 12px;
}
.wbv-shell .knowledge-article th {
  text-align: left;
  padding: 6px 10px;
  color: var(--copper);
  font-weight: 700;
  border-bottom: 1px solid rgba(232, 168, 92, 0.35);
  white-space: nowrap;
}
.wbv-shell .knowledge-article td {
  padding: 6px 10px;
  color: var(--fg-dim);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: top;
}
.wbv-shell .knowledge-article td code { font-size: 0.82em; }
.wbv-shell .knowledge-article > *:first-child { margin-top: 0; }

/* ===========================================================================
   Build bay guided-flow cockpit — scoped title-wrap override.
   Pipeline: g-pc79-build-bay-guided-flow-2026-05-30.
   The WBV system-card title is white-space:nowrap + ellipsis (good for short
   single-line labels). The Build cockpit reuses system cards for variable
   registry labels ("Skills + Workflows", "Plan drafting (...)") that would
   otherwise truncate to "04 Sk..." in narrow stage columns. This scoped rule
   (2-class specificity beats the global 1-class rule, no !important) lets
   titles wrap ONLY inside .build-guided-flow-scope so no other cockpit is
   affected.
   =========================================================================== */
.build-guided-flow-scope .forge-system-card__head { flex-wrap: wrap; }
.build-guided-flow-scope .forge-system-card__title {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

/* ===========================================================================
   SHARED COMMAND-SPINE BAY VIEWPORT + SCROLL FIX
   Pipeline: g-pc80-shell-viewport-scroll-2026-05-30.

   Applies to EVERY bay surface (Build / Projects / Review / Knowledge /
   War Room / Actions / Settings) through the single shared .forge-surface-panel
   container — one shell rule, not per-bay patches. Placed at EOF so it wins by
   source order over the prior `.wbv-shell .forge-surface-panel` override stack
   (same 0,2,0 specificity + !important). Molten/glass visuals are inherited
   unchanged (this block only touches geometry + overflow, no paint).

   Fixes two regressions found by live measurement at 1920x1080:
     1. VIEWPORT TOO SMALL / EVIDENCE-RAIL OVERLAP — the prior rule used
        left:22%/right:22% + max-width:calc(100vw-624px) (over-margined; the
        spine/dock are only ~19% each) and bottom:86px (panel bottom y994
        overlapped the evidence strip top ~y922).
     2. SCROLL TRAP — `.wbv-bay-surface`/`.wb-panel-shell { overflow:hidden }`
        clipped long bay content (~2870px) to ~637px inside the scroll body,
        so the body never scrolled and lower content was unreachable.
   =========================================================================== */

/* 1. Make the bay panel the dominant CENTER-COLUMN overlay (g-pc81).
      The shell (`.wbv-shell main.workbench-panel-shell`) is a CSS grid:
        grid-template-columns: clamp(240px,18vw,348px) | 1fr | clamp(280px,19vw,348px)
        padding: 16px 22px 18px ;  gap: 14px 18px (row col)
        grid-areas: left/top/right · left/center/right · left/bottom/right
      The top hero/status band AND the bottom evidence console occupy the
      top/bottom ROWS of the CENTER column. The .forge-surface-panel is an
      absolute overlay (z1700) inside the position:relative shell, so we align
      its left/right to the center-column edges = shell padding-x (22px) + the
      side column width + a small 8px overscan (just inside the 18px col-gap).
      That covers the hero band + evidence console pixel-for-pixel at 1920 and
      clears the left spine + right dock at every width. (At 1366 the shell
      renders its side columns ~20px narrower than the clamp() spec, so the
      min-width top/bottom chrome overflows its grid cell a few px into the
      col-gap; the 8px overscan absorbs most of it. Fully covering that residual
      would require overlapping the spine at 1920, so a small ~10-20px edge
      sliver is left documented at 1366 rather than added as a fragile
      per-viewport hack.) top:0 + bottom:8px span the panel down all three rows
      so it covers the top + bottom chrome vertically; z-index:1700 keeps it
      above the z:auto/z9 chrome. Corner controls (operator session/logout,
      dev/edit pill) sit in the side columns / top corners outside the center
      column and remain visible. */
.wbv-shell .forge-surface-panel {
  left: calc(22px + clamp(240px, 18vw, 348px) + 8px) !important;
  right: calc(22px + clamp(280px, 19vw, 348px) + 8px) !important;
  top: 0 !important;
  bottom: 8px !important;
  z-index: 1700 !important;
  width: auto !important;
  max-width: none !important;
}

/* 2. Make the surface BODY the single vertical scroll container, and stop the
      nested bay wrappers from clipping/shrinking their content. Scoped to
      inside .forge-surface-panel__body so the Pepper workspace and other
      .wb-panel-shell usages are untouched. overflow:visible (not auto) avoids
      a nested second scrollbar — the body owns the scroll. */
.wbv-shell .forge-surface-panel__body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 0 !important;
}
.wbv-shell .forge-surface-panel__body .wbv-bay-surface,
.wbv-shell .forge-surface-panel__body .wb-panel-shell {
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
}

/* ===========================================================================
   Build bay — unified guided-workspace layout (g-pc83 reshape carried forward
   + g-pc84 generalization). The 9-step walkthrough is the center of gravity;
   readiness / draft / handoff are COMPACT supporting strips (not a card wall).
   Scoped under .build-guided-flow-scope — NO shell / overlay / viewport-
   geometry change (preserves #472/#473/#474).
   =========================================================================== */

/* Starting-point chip strip (the first-class flow driver). */
.build-guided-flow-scope .build-startpoint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.build-guided-flow-scope .build-startpoint__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(171, 199, 187, 0.85);
  margin-right: 2px;
}
.build-guided-flow-scope .build-startpoint__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: rgba(224, 234, 220, 0.82);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.build-guided-flow-scope .build-startpoint__chip:hover {
  border-color: rgba(255, 178, 90, 0.5);
}
.build-guided-flow-scope .build-startpoint__chip[data-selected="true"] {
  color: rgba(255, 210, 160, 0.98);
  background: rgba(255, 165, 65, 0.12);
  border-color: rgba(255, 170, 100, 0.6);
}
/* Template-aware example-idea hint line under the starting-point strip. */
.build-guided-flow-scope .build-startpoint__hint {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(224, 234, 220, 0.7);
}
.build-guided-flow-scope .build-startpoint__hint strong {
  color: rgba(255, 210, 160, 0.9);
  font-weight: 700;
}

/* Compact supporting region: live plan + readiness side-by-side on wide,
   stacked under the step card on narrow. Handoff sits below, full width. */
.build-guided-flow-scope .build-support {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
@media (max-width: 1500px) {
  .build-guided-flow-scope .build-support {
    grid-template-columns: 1fr;
  }
}
.build-guided-flow-scope .build-mini {
  border: 1px solid rgba(255, 178, 90, 0.18);
  border-radius: 10px;
  padding: 12px 14px;
  background: rgba(10, 14, 20, 0.42);
}
.build-guided-flow-scope .build-mini__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(171, 199, 187, 0.82);
  margin-bottom: 8px;
}
.build-guided-flow-scope .build-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.build-guided-flow-scope .build-row:first-of-type {
  border-top: 0;
}
.build-guided-flow-scope .build-row__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.build-guided-flow-scope .build-row__label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(247, 249, 242, 0.92);
}
.build-guided-flow-scope .build-row__content {
  font-size: 12px;
  color: rgba(247, 249, 242, 0.88);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.build-guided-flow-scope .build-row__num {
  font-size: 11px;
  font-weight: 700;
  color: rgba(171, 199, 187, 0.7);
  flex: 0 0 auto;
  margin-top: 1px;
}
.build-guided-flow-scope .build-mini__empty {
  font-size: 12px;
  color: rgba(224, 234, 220, 0.6);
  line-height: 1.5;
}
.build-guided-flow-scope .build-handoff-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

/* ===========================================================================
   Build bay — Plan Drafter v1 (g-pc85): the prominent operator-facing build
   plan document + compact readiness grid + copy-only export. Scoped under
   .build-guided-flow-scope — NO shell / overlay / viewport change.
   =========================================================================== */
.build-guided-flow-scope .build-plan-doc {
  border: 1px solid rgba(255, 178, 90, 0.32);
  border-radius: 12px;
  padding: 16px 18px;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(255, 143, 58, 0.06), transparent 46%),
    rgba(10, 14, 20, 0.5);
}
.build-guided-flow-scope .build-plan-doc__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 178, 90, 0.2);
}
.build-guided-flow-scope .build-plan-doc__title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: rgba(252, 255, 249, 0.98);
}
.build-guided-flow-scope .build-plan-doc__sub {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(224, 234, 220, 0.72);
  max-width: 70ch;
}
.build-guided-flow-scope .build-plan-doc__sub strong {
  color: rgba(255, 210, 160, 0.92);
}
.build-guided-flow-scope .build-plan-doc__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.build-guided-flow-scope .build-plan-doc__sections {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px 22px;
}
@media (max-width: 1500px) {
  .build-guided-flow-scope .build-plan-doc__sections {
    grid-template-columns: 1fr;
  }
}
.build-guided-flow-scope .build-plan-section {
  min-width: 0;
}
.build-guided-flow-scope .build-plan-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}
.build-guided-flow-scope .build-plan-section__heading {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 210, 160, 0.86);
}
.build-guided-flow-scope .build-plan-source {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 999px;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(224, 234, 220, 0.7);
}
.build-guided-flow-scope .build-plan-source[data-source="answer"] {
  color: rgba(180, 240, 180, 0.9);
  border-color: rgba(120, 200, 120, 0.5);
}
.build-guided-flow-scope .build-plan-source[data-source="derived"] {
  color: rgba(180, 220, 240, 0.9);
  border-color: rgba(120, 200, 230, 0.5);
}
.build-guided-flow-scope .build-plan-source[data-source="suggested"] {
  color: rgba(245, 215, 150, 0.92);
  border-color: rgba(220, 180, 90, 0.55);
}
.build-guided-flow-scope .build-plan-source[data-source="gated"] {
  color: rgba(255, 200, 150, 0.92);
  border-color: rgba(255, 170, 100, 0.55);
}
.build-guided-flow-scope .build-plan-line {
  margin: 0 0 3px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(247, 249, 242, 0.9);
  overflow-wrap: anywhere;
}
.build-guided-flow-scope .build-plan-line[data-empty="true"] {
  color: rgba(224, 234, 220, 0.45);
  font-style: italic;
}
.build-guided-flow-scope .build-plan-export {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 178, 90, 0.22);
}
.build-guided-flow-scope .build-plan-textarea {
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(6, 9, 11, 0.7);
  color: rgba(224, 234, 220, 0.92);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.5;
  resize: vertical;
}
/* Readiness as a compact 2-col grid (it is now full-width under the plan). */
.build-guided-flow-scope .build-readiness-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 22px;
}
@media (max-width: 1100px) {
  .build-guided-flow-scope .build-readiness-grid {
    grid-template-columns: 1fr;
  }
}

/* Build handoff — staged browser-local proposal panel (g-pc86). Scoped; no
   shell/overlay/geometry change. */
.build-guided-flow-scope .build-proposal {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 170, 100, 0.3);
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(255, 143, 58, 0.05), transparent 50%),
    rgba(10, 14, 20, 0.46);
}
.build-guided-flow-scope .build-proposal .build-mini__head {
  margin-bottom: 6px;
}

/* Archetype context line (g-pc87): frames the selected pattern as one of
   several. Scoped; no shell/overlay/geometry change. */
.build-guided-flow-scope .build-archetype-context {
  margin: 0;
  padding: 8px 12px;
  border-left: 2px solid rgba(255, 170, 100, 0.5);
  border-radius: 0 6px 6px 0;
  background: rgba(255, 165, 65, 0.06);
  font-size: 12px;
  line-height: 1.5;
  color: rgba(224, 234, 220, 0.78);
}
.build-guided-flow-scope .build-archetype-context strong {
  color: rgba(255, 210, 160, 0.95);
}

/* ===========================================================================
   Build bay — Tools, APIs & integrations intake (g-pc88). Zapier/n8n-style
   requirement capture. Scoped under .build-guided-flow-scope — NO shell /
   overlay / viewport-geometry change. Reuses build-mini / build-startpoint.
   =========================================================================== */
.build-guided-flow-scope .build-integrations {
  border-color: rgba(255, 178, 90, 0.26);
}
.build-guided-flow-scope .build-int-intro {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(224, 234, 220, 0.74);
  max-width: 78ch;
}
.build-guided-flow-scope .build-int-intro strong {
  color: rgba(255, 210, 160, 0.9);
  font-weight: 700;
}
.build-guided-flow-scope .build-int-hint {
  margin: 0 0 10px;
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(171, 199, 187, 0.78);
  font-style: italic;
}
.build-guided-flow-scope .build-int-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.build-guided-flow-scope .build-int-input {
  flex: 1 1 200px;
  min-width: 0;
  margin: 0;
}
.build-guided-flow-scope .build-int-select {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  cursor: pointer;
}
.build-guided-flow-scope .build-int-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 10px;
}
.build-guided-flow-scope .build-int-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.build-guided-flow-scope .build-int-item:first-of-type {
  border-top: 0;
}
.build-guided-flow-scope .build-int-cat-tag {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 999px;
  margin-right: 4px;
  color: rgba(180, 220, 240, 0.9);
  border: 1px solid rgba(120, 200, 230, 0.4);
  white-space: nowrap;
}
.build-guided-flow-scope .build-int-remove {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  color: rgba(224, 234, 220, 0.6);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: border-color 120ms ease, color 120ms ease;
}
.build-guided-flow-scope .build-int-remove:hover {
  border-color: rgba(255, 120, 120, 0.5);
  color: rgba(255, 170, 160, 0.95);
}
.build-guided-flow-scope .build-int-summary {
  margin: 0 0 6px;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(224, 234, 220, 0.68);
}
.build-guided-flow-scope .build-int-p2hook {
  margin: 0;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 178, 90, 0.18);
  font-size: 11px;
  line-height: 1.45;
  color: rgba(171, 199, 187, 0.62);
}
.build-guided-flow-scope .build-int-p2hook strong {
  color: rgba(255, 210, 160, 0.82);
  font-weight: 700;
}

/* ===========================================================================
   Skills + Workflows foundation surface (g-pc89, P2). Scoped under .swf-scope.
   Molten/dark-glass language reused from the Build bay. NO shell/overlay/
   viewport-geometry change.
   =========================================================================== */
.swf-scope .swf-tabs {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(10, 14, 20, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.swf-scope .swf-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(224, 234, 220, 0.78);
  background: transparent;
  border: 1px solid transparent;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.swf-scope .swf-tab[data-selected="true"] {
  color: rgba(255, 210, 160, 0.98);
  background: rgba(255, 165, 65, 0.12);
  border-color: rgba(255, 170, 100, 0.55);
}
.swf-scope .swf-tab-count {
  font-size: 10.5px;
  font-weight: 800;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(224, 234, 220, 0.7);
}
.swf-scope .swf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 1500px) {
  .swf-scope .swf-grid {
    grid-template-columns: 1fr;
  }
}
.swf-scope .swf-library {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.swf-scope .swf-cat {
  border: 1px solid rgba(255, 178, 90, 0.16);
  border-radius: 10px;
  padding: 11px 13px;
  background: rgba(10, 14, 20, 0.42);
}
.swf-scope .swf-cat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.swf-scope .swf-cat__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 210, 160, 0.86);
}
.swf-scope .swf-cat__count {
  font-size: 11px;
  font-weight: 800;
  color: rgba(171, 199, 187, 0.7);
}
.swf-scope .swf-cat__blurb {
  margin: 3px 0 9px;
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(224, 234, 220, 0.6);
}
.swf-scope .swf-card-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 9px;
}
.swf-scope .swf-card {
  position: relative;
  text-align: left;
  cursor: pointer;
  padding: 9px 11px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.025);
  transition: border-color 120ms ease, background 120ms ease;
  min-width: 0;
}
.swf-scope .swf-card:hover {
  border-color: rgba(255, 178, 90, 0.5);
}
.swf-scope .swf-card[data-selected="true"] {
  border-color: rgba(255, 170, 100, 0.7);
  background: rgba(255, 165, 65, 0.1);
}
.swf-scope .swf-card--wide {
  grid-column: 1 / -1;
}
.swf-scope .swf-card__head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 3px;
}
.swf-scope .swf-card__cmd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  color: rgba(247, 249, 242, 0.95);
}
.swf-scope .swf-card__title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(247, 249, 242, 0.88);
}
.swf-scope .swf-card__summary {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(224, 234, 220, 0.6);
}
.swf-scope .swf-card__meta {
  margin-top: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(171, 199, 187, 0.65);
}
.swf-scope .swf-tag {
  display: inline-block;
  margin-top: 6px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.swf-scope .swf-tag--warn {
  color: rgba(245, 215, 150, 0.92);
  border-color: rgba(220, 180, 90, 0.55);
}
.swf-scope .swf-tag--ok {
  color: rgba(180, 240, 180, 0.9);
  border-color: rgba(120, 200, 120, 0.5);
}
/* wiki + chain detail panel */
.swf-scope .swf-wiki,
.swf-scope .swf-chain {
  border: 1px solid rgba(255, 178, 90, 0.28);
  border-radius: 12px;
  padding: 14px 16px;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(255, 143, 58, 0.06), transparent 46%),
    rgba(10, 14, 20, 0.5);
  position: sticky;
  top: 8px;
}
.swf-scope .swf-wiki__empty {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(224, 234, 220, 0.6);
}
.swf-scope .swf-wiki__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.swf-scope .swf-wiki__cmd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 800;
  color: rgba(255, 210, 160, 0.95);
}
.swf-scope .swf-wiki__cat {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(224, 234, 220, 0.7);
}
.swf-scope .swf-wiki__title {
  margin: 2px 0 4px;
  font-size: 15px;
  font-weight: 800;
  color: rgba(252, 255, 249, 0.98);
}
.swf-scope .swf-wiki__summary {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(224, 234, 220, 0.78);
}
.swf-scope .swf-wiki__h {
  margin: 10px 0 3px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 210, 160, 0.82);
}
.swf-scope .swf-wiki__p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(247, 249, 242, 0.88);
}
.swf-scope .swf-wiki__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
}
.swf-scope .swf-wiki__list {
  margin: 2px 0 0;
  padding-left: 16px;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(247, 249, 242, 0.85);
}
.swf-scope .swf-wiki__related {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.swf-scope .swf-wiki__related-chip {
  cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 999px;
  color: rgba(224, 234, 220, 0.85);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.swf-scope .swf-wiki__related-chip:hover {
  border-color: rgba(255, 178, 90, 0.5);
}
.swf-scope .swf-wiki__related-chip--ext {
  cursor: default;
  opacity: 0.6;
}
/* n8n-style chain preview */
.swf-scope .swf-chain__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.swf-scope .swf-chain__title {
  font-size: 14px;
  font-weight: 800;
  color: rgba(252, 255, 249, 0.98);
}
.swf-scope .swf-plan-source {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 170, 100, 0.55);
  color: rgba(255, 200, 150, 0.92);
}
.swf-scope .swf-chain__flow {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 12px;
}
.swf-scope .swf-node-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.swf-scope .swf-node {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left-width: 3px;
  border-radius: 8px;
  padding: 8px 11px;
  background: rgba(255, 255, 255, 0.025);
}
.swf-scope .swf-node--trigger { border-left-color: rgba(120, 200, 230, 0.8); }
.swf-scope .swf-node--skill   { border-left-color: rgba(179, 157, 247, 0.85); }
.swf-scope .swf-node--tool    { border-left-color: rgba(232, 168, 92, 0.85); }
.swf-scope .swf-node--action  { border-left-color: rgba(95, 230, 165, 0.8); }
.swf-scope .swf-node--gate    { border-left-color: rgba(255, 170, 100, 0.9); }
.swf-scope .swf-node__head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.swf-scope .swf-node__glyph {
  font-size: 11px;
  color: rgba(224, 234, 220, 0.7);
}
.swf-scope .swf-node__kind {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(171, 199, 187, 0.7);
}
.swf-scope .swf-node__label {
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(247, 249, 242, 0.95);
}
.swf-scope .swf-node__link {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: rgba(255, 210, 160, 0.95);
  -webkit-text-decoration: underline dotted rgba(255, 210, 160, 0.4);
          text-decoration: underline dotted rgba(255, 210, 160, 0.4);
}
.swf-scope .swf-node__note {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(224, 234, 220, 0.6);
}
.swf-scope .swf-connector {
  align-self: center;
  font-size: 14px;
  line-height: 1;
  padding: 3px 0;
  color: rgba(255, 178, 90, 0.6);
  transform: rotate(90deg);
}
.swf-scope .swf-p2hook {
  margin: 0;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 178, 90, 0.18);
  font-size: 11px;
  line-height: 1.45;
  color: rgba(171, 199, 187, 0.62);
}
.swf-scope .swf-p2hook strong {
  color: rgba(255, 210, 160, 0.82);
  font-weight: 700;
}
.swf-scope .swf-index-meta {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-left: 2px solid rgba(255, 170, 100, 0.5);
  border-radius: 0 6px 6px 0;
  background: rgba(255, 165, 65, 0.06);
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(224, 234, 220, 0.74);
}
.swf-scope .swf-index-meta strong {
  color: rgba(255, 210, 160, 0.95);
  font-weight: 700;
}
.swf-scope .swf-index-meta code {
  font-size: 10.5px;
  color: rgba(180, 220, 240, 0.9);
}
.swf-scope .swf-wiki__pending {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px dashed rgba(255, 178, 90, 0.32);
  border-radius: 8px;
  background: rgba(255, 165, 65, 0.05);
}

/* node-kind accent colors for the 3 builder kinds (g-pc91) */
.swf-scope .swf-node--manual   { border-left-color: rgba(245, 215, 150, 0.85); }
.swf-scope .swf-node--approval { border-left-color: rgba(255, 170, 100, 0.9); }
.swf-scope .swf-node--handoff  { border-left-color: rgba(120, 200, 230, 0.85); }

/* ===========================================================================
   Workflow Builder (g-pc91) — editable draft. Scoped under .swf-scope. No
   shell/overlay/viewport change.
   =========================================================================== */
.swf-scope .swf-builder {
  border: 1px solid rgba(255, 178, 90, 0.28);
  border-radius: 12px;
  padding: 14px 16px;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(255, 143, 58, 0.06), transparent 46%),
    rgba(10, 14, 20, 0.5);
}
.swf-scope .swf-builder-name {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 7px 11px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(6, 9, 11, 0.6);
  color: rgba(247, 249, 242, 0.95);
  font-size: 13px;
  font-weight: 700;
}
.swf-scope .swf-builder-add {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(10, 14, 20, 0.4);
}
.swf-scope .swf-startpoint-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}
.swf-scope .swf-builder-add__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(171, 199, 187, 0.85);
  margin-right: 2px;
}
.swf-scope .swf-kind-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(224, 234, 220, 0.82);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.swf-scope .swf-kind-chip:hover { border-color: rgba(255, 178, 90, 0.5); }
.swf-scope .swf-kind-chip[data-selected="true"] {
  color: rgba(255, 210, 160, 0.98);
  background: rgba(255, 165, 65, 0.12);
  border-color: rgba(255, 170, 100, 0.6);
}
.swf-scope .swf-builder-add__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.swf-scope .swf-builder-input {
  flex: 1 1 200px;
  min-width: 0;
  margin: 0;
  padding: 7px 11px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(6, 9, 11, 0.6);
  color: rgba(224, 234, 220, 0.92);
  font-size: 12px;
}
.swf-scope .swf-node-btn {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  color: rgba(224, 234, 220, 0.7);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: border-color 120ms ease, color 120ms ease;
}
.swf-scope .swf-node-btn:hover { border-color: rgba(255, 178, 90, 0.55); color: rgba(255, 210, 160, 0.95); }
.swf-scope .swf-node-btn--rm:hover { border-color: rgba(255, 120, 120, 0.5); color: rgba(255, 170, 160, 0.95); }
.swf-scope .swf-builder-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* ===========================================================================
   PR-5c — Brain Map connector layer.
   Dismissable view over the home stage (NOT a permanent overlay). Reuses the
   home glass vocabulary: molten orange rgba(255,139,62), cyan accent #6ce7ff,
   dark glass rgba(4,7,9), mono font.
   =========================================================================== */
.hivemind-3d-home-brain-map-toggle {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  min-height: 30px;
  padding: 0 16px;
  border: 1px solid rgba(255, 139, 62, 0.42);
  border-radius: 999px;
  background: rgba(4, 7, 9, 0.72);
  backdrop-filter: blur(10px);
  color: #ffd9b0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}
.hivemind-3d-home-brain-map-toggle:hover,
.hivemind-3d-home-brain-map-toggle.is-active {
  border-color: rgba(108, 231, 255, 0.66);
  color: #a9f2ff;
  background: rgba(4, 9, 12, 0.86);
}

/* K-23 (g-wb-os-m2a, 2026-06-07): honest flow-state source disclosure. Cyan
   "derived" palette (NOT the orange "active" / green "live" semantics) so the
   primary Hivemind surface never implies live telemetry. pointer-events:none
   keeps the canvas fully draggable beneath it. */
.hivemind-3d-home-source-note {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(680px, 92%);
  margin: 0;
  padding: 7px 14px;
  border: 1px solid rgba(108, 231, 255, 0.30);
  border-radius: 999px;
  background: rgba(4, 7, 9, 0.74);
  backdrop-filter: blur(10px);
  color: #b9c6cc;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-align: left;
  pointer-events: none;
}
.hivemind-3d-home-source-note__lead {
  flex: 0 0 auto;
  color: #a9f2ff;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hivemind-3d-home-source-note__dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #6ce7ff;
  box-shadow: 0 0 8px rgba(108, 231, 255, 0.7);
}

/* K-23 / Mission 2B (2026-06-07): read-only runtime-activation status chip.
   Top-right of the stage (clear of the centered Brain Map toggle + the
   bottom-center source caption). Dot color is data-driven by runtime state
   (green=active, amber=stale, grey=unknown). pointer-events:none keeps the
   canvas draggable beneath it. */
.hivemind-3d-home-runtime-status {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(440px, 44%);
  margin: 0;
  padding: 6px 13px;
  border: 1px solid rgba(108, 231, 255, 0.22);
  border-radius: 999px;
  background: rgba(4, 7, 9, 0.74);
  backdrop-filter: blur(10px);
  color: #c4d0d6;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-align: left;
  /* Mission 2C: chip carries more tokens (code + nodes truth); allow wrap so it
     never overflows the viewport at 1366 (no white-space:nowrap). */
  pointer-events: none;
}
.hivemind-3d-home-runtime-status__lead {
  flex: 0 0 auto;
  color: #cfe9f2;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hivemind-3d-home-runtime-status__dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--runtime-dot, #a09b91);
  box-shadow: 0 0 8px var(--runtime-dot, #a09b91);
}

.workbench-brain-map {
  position: absolute;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: min(960px, 92%);
  max-height: calc(100% - 84px);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px 16px;
  border: 1px solid rgba(255, 139, 62, 0.28);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(6, 9, 12, 0.94), rgba(4, 7, 9, 0.9));
  backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  animation: workbench-brain-map-in 160ms ease;
}
@keyframes workbench-brain-map-in {
  from { opacity: 0; transform: translate(-50%, -6px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.workbench-brain-map__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 139, 62, 0.18);
}
.workbench-brain-map__title { display: grid; gap: 2px; }
.workbench-brain-map__title span {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6ce7ff;
}
.workbench-brain-map__title strong { color: #fff4e7; font-size: 15px; }
.workbench-brain-map__selection {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255, 244, 231, 0.78);
}
.workbench-brain-map__selection strong { color: #ffd9b0; }
.workbench-brain-map__selection em { color: #6ce7ff; font-style: normal; }
.workbench-brain-map__actions { display: flex; gap: 8px; }
.workbench-brain-map__actions button {
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid rgba(255, 139, 62, 0.34);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.4);
  color: #fff4e7;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
}
.workbench-brain-map__actions button:hover,
.workbench-brain-map__mode.is-active {
  border-color: rgba(108, 231, 255, 0.62);
  color: #a9f2ff;
}

.workbench-brain-map__flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.workbench-brain-map__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 12px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
}
.workbench-brain-map__stage--live { border-color: rgba(98, 227, 195, 0.4); }
.workbench-brain-map__stage--structural { border-color: rgba(255, 139, 62, 0.3); }
.workbench-brain-map__stage--no-live-data { opacity: 0.78; border-style: dashed; }
.workbench-brain-map__stage.is-focused {
  border-color: rgba(108, 231, 255, 0.72);
  box-shadow: 0 0 0 1px rgba(108, 231, 255, 0.3), 0 10px 26px rgba(0, 0, 0, 0.4);
  background: rgba(108, 231, 255, 0.06);
}
.workbench-brain-map__stage-head { display: flex; align-items: center; gap: 8px; }
.workbench-brain-map__stage-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 139, 62, 0.18);
  color: #ffd9b0;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
}
.workbench-brain-map__stage-label { color: #fff4e7; font-size: 13px; }
.workbench-brain-map__pill {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.workbench-brain-map__pill--live { background: rgba(98, 227, 195, 0.18); color: #8ff4dc; }
.workbench-brain-map__pill--structural { background: rgba(255, 189, 46, 0.16); color: #ffd98a; }
.workbench-brain-map__pill--pending { background: rgba(154, 160, 168, 0.16); color: #c3c9d1; }
.workbench-brain-map__stage-desc {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(255, 244, 231, 0.82);
}
.workbench-brain-map__advanced {
  margin: 2px 0 0;
  display: grid;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}
.workbench-brain-map__advanced div { display: grid; gap: 1px; }
.workbench-brain-map__advanced dt {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6ce7ff;
}
.workbench-brain-map__advanced dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255, 244, 231, 0.9);
  word-break: break-word;
}
.workbench-brain-map__connector {
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 139, 62, 0.55);
  font-size: 14px;
  font-weight: 800;
  pointer-events: none;
}
.workbench-brain-map__footer {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255, 244, 231, 0.6);
  border-top: 1px solid rgba(255, 139, 62, 0.14);
  padding-top: 10px;
}
@media (max-width: 1440px) {
  .workbench-brain-map { width: min(840px, 94%); }
  .workbench-brain-map__flow { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

/* ===========================================================================
   PR-6a (visual correction) - Director Workboard command-board system.
   FORGE_DESIGN: black-glass cards, steel hairline rims, single molten-amber
   accent (#ff7a18) for alive/active/CTA, semantic status colours. Cards /
   status-glow cores / badges / kanban columns - NOT text rows.
   =========================================================================== */
.dw { --dw-amber:#ff7a18; --dw-amber-hot:#ffae3c; --dw-glass:rgba(14,12,10,0.62); --dw-glass-2:rgba(20,17,14,0.72); --dw-rim:rgba(255,255,255,0.08); --dw-good:#4ea672; --dw-warn:#d4a017; --dw-cyan:#6ce7ff; --dw-red:#e5484d; --dw-steel:#8a8a8a; display:flex; flex-direction:column; gap:12px; }
.dw__err { font-family:var(--font-mono); font-size:11px; color:#ffb3ab; margin:0; }
.dw-card { position:relative; border:1px solid var(--dw-rim); border-radius:12px; background:linear-gradient(180deg,var(--dw-glass-2),var(--dw-glass)); backdrop-filter:blur(12px); padding:13px 15px; box-shadow:0 10px 28px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.02); }
.dw-card--hot { border-color:rgba(255,122,24,0.5); box-shadow:0 12px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,122,24,0.28), 0 0 26px -6px rgba(255,122,24,0.5); }
.dw-card--hero { padding:16px 18px; }
.dw-card__eyebrow { font-family:var(--font-mono); font-size:9px; font-weight:800; letter-spacing:0.16em; text-transform:uppercase; color:var(--dw-amber); margin:0 0 4px; }
.dw-card__title { color:#f5f5f5; font-size:15px; font-weight:700; margin:0; line-height:1.25; }
.dw-card__title--lg { font-size:18px; }
.dw-card__sub { color:rgba(207,207,207,0.82); font-size:12px; line-height:1.45; margin:5px 0 0; }
.dw-card__head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.dw-card__row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:9px; }
.dw-badge { display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:9px; font-weight:800; letter-spacing:0.05em; text-transform:uppercase; padding:3px 9px; border-radius:999px; border:1px solid transparent; }
.dw-badge::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; }
.dw-badge--working { color:var(--dw-good); background:rgba(78,166,114,0.14); border-color:rgba(78,166,114,0.4); }
.dw-badge--done { color:var(--dw-good); background:rgba(78,166,114,0.2); border-color:rgba(78,166,114,0.55); }
.dw-badge--proof { color:var(--dw-warn); background:rgba(212,160,23,0.14); border-color:rgba(212,160,23,0.42); }
.dw-badge--review { color:var(--dw-cyan); background:rgba(108,231,255,0.14); border-color:rgba(108,231,255,0.4); }
.dw-badge--approval { color:var(--dw-amber); background:rgba(255,122,24,0.16); border-color:rgba(255,122,24,0.46); }
.dw-badge--blocked { color:var(--dw-red); background:rgba(229,72,77,0.15); border-color:rgba(229,72,77,0.45); }
.dw-badge--draft { color:var(--dw-warn); background:rgba(212,160,23,0.12); border-color:rgba(212,160,23,0.34); }
.dw-badge--planned, .dw-badge--idle { color:var(--dw-steel); background:rgba(138,138,138,0.12); border-color:rgba(138,138,138,0.34); }
.dw-badge--plain { color:var(--dw-steel); background:rgba(138,138,138,0.1); border-color:rgba(138,138,138,0.3); }
.dw-badge--plain::before { display:none; }
.dw-core { position:relative; flex:0 0 auto; width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:10px; font-weight:800; color:#0b0b0b; background:radial-gradient(circle at 35% 30%, #2a2a2a, #0c0c0c); border:1px solid var(--dw-rim); }
.dw-core--sm { width:20px; height:20px; font-size:8px; }
.dw-core[data-status]::after { content:""; position:absolute; inset:-3px; border-radius:50%; border:1.5px solid var(--c,var(--dw-steel)); box-shadow:0 0 10px -1px var(--c,var(--dw-steel)); }
.dw-core[data-status="working"], .dw-core[data-status="done"] { --c:var(--dw-good); }
.dw-core[data-status="proof"] { --c:var(--dw-warn); }
.dw-core[data-status="review"] { --c:var(--dw-cyan); }
.dw-core[data-status="approval"] { --c:var(--dw-amber); }
.dw-core[data-status="blocked"] { --c:var(--dw-red); }
.dw-core[data-status="idle"], .dw-core[data-status="planned"] { --c:var(--dw-steel); }
.dw-chip { display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:10px; font-weight:700; color:rgba(245,245,245,0.9); padding:2px 8px; border-radius:6px; border:1px solid var(--dw-rim); background:rgba(0,0,0,0.35); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dw-lane { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:9px 11px; border-radius:10px; border:1px solid var(--dw-rim); background:rgba(10,9,8,0.5); cursor:pointer; transition:border-color 130ms ease, background 130ms ease, transform 130ms ease; text-align:left; width:100%; }
.dw-lane:hover { border-color:rgba(255,122,24,0.4); background:rgba(16,13,11,0.6); transform:translateY(-1px); }
.dw-lane--selected { border-color:rgba(255,122,24,0.72); box-shadow:0 0 0 1px rgba(255,122,24,0.4), 0 0 22px -6px rgba(255,122,24,0.6); background:rgba(255,122,24,0.07); }
.dw-lane__name { font-size:13px; font-weight:700; color:#f5f5f5; line-height:1.2; }
.dw-lane__role { font-size:10px; color:rgba(207,207,207,0.62); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dw-lane__right { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex:0 0 auto; }
.dw-board { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:10px; align-items:start; }
.dw-col { border:1px solid var(--dw-rim); border-radius:12px; background:rgba(6,6,6,0.45); padding:10px; display:flex; flex-direction:column; gap:8px; }
.dw-col__head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.dw-col__title { font-family:var(--font-mono); font-size:10px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:rgba(245,245,245,0.82); }
.dw-col__count { font-family:var(--font-mono); font-size:10px; font-weight:800; color:var(--dw-amber); }
.dw-col__empty { font-size:10px; color:rgba(207,207,207,0.4); font-style:italic; }
.dw-progress { height:6px; border-radius:999px; background:rgba(255,255,255,0.06); overflow:hidden; margin:8px 0; }
.dw-progress__fill { height:100%; background:linear-gradient(90deg, var(--dw-amber), var(--dw-amber-hot)); border-radius:999px; }
.dw-check { display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid rgba(255,255,255,0.05); }
.dw-check__box { width:14px; height:14px; border-radius:4px; border:1px solid var(--dw-rim); flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; font-size:9px; color:var(--dw-good); }
.dw-check__box--done { border-color:rgba(78,166,114,0.6); background:rgba(78,166,114,0.16); }
.dw-check__text { font-size:12px; color:rgba(245,245,245,0.9); }
.dw-cta { display:inline-flex; align-items:center; gap:6px; min-height:30px; padding:0 14px; border-radius:8px; border:1px solid rgba(255,122,24,0.6); background:linear-gradient(180deg, rgba(255,122,24,0.92), rgba(194,65,12,0.92)); color:#1a0d00; font-family:var(--font-mono); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.04em; cursor:pointer; box-shadow:0 0 18px -4px rgba(255,122,24,0.6); }
.dw-cta:disabled { opacity:0.45; cursor:not-allowed; box-shadow:none; }
.dw-cta--ghost { background:rgba(0,0,0,0.4); color:#ffd9b0; border-color:rgba(255,122,24,0.4); box-shadow:none; }
.dw-input { flex:1; min-height:30px; border-radius:8px; border:1px solid var(--dw-rim); background:rgba(0,0,0,0.4); color:#f5f5f5; padding:0 10px; font-size:12px; }
.dw-input:focus { outline:none; border-color:rgba(255,122,24,0.5); }
.dw-rows { display:grid; gap:3px; }
.dw-rows > div { display:flex; justify-content:space-between; gap:10px; padding:4px 0; border-bottom:1px solid rgba(255,255,255,0.05); }
.dw-rows dt { font-family:var(--font-mono); font-size:9px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:var(--dw-cyan); }
.dw-rows dd { margin:0; font-family:var(--font-mono); font-size:10px; color:rgba(245,245,245,0.9); text-align:right; word-break:break-word; }
.dw-strip { display:flex; align-items:center; gap:10px; width:100%; padding:7px 12px; border-radius:10px; cursor:pointer; text-align:left; border:1px solid rgba(255,122,24,0.28); background:linear-gradient(180deg, rgba(20,17,14,0.7), rgba(10,9,8,0.6)); transition:border-color 130ms ease; }
.dw-strip:hover { border-color:rgba(255,122,24,0.55); }
.dw-strip__label { font-family:var(--font-mono); font-size:10px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:rgba(245,245,245,0.7); flex:0 0 auto; }
.dw-strip__cores { display:flex; align-items:center; gap:6px; flex:1; min-width:0; overflow:hidden; }
.dw-strip__name { font-family:var(--font-mono); font-size:11px; color:#ffd9b0; }
.dw-strip__go { flex:0 0 auto; font-family:var(--font-mono); font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:0.05em; color:var(--dw-amber); }

/* PR-6a width fix — DirectorWorkboard root spans BOTH columns of the
   .workbench-director-panel 2-col grid (root cause of the half-width board /
   empty right canvas). Applies to every tab's .dw root. */
.workbench-director-panel > .dw { grid-column: 1 / -1; min-width: 0; width: 100%; }
/* Chip board grid — mirrors the original .stage-agent-chip-grid values so the
   real StageAgentChip tiles wrap full-width even outside the .wbv-shell scope. */
.dw-chipgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 188px)); gap: 8px; list-style: none; padding: 0; margin: 6px 0 0; }
.dw-group { margin-bottom: 6px; }
.dw-group__head { display: flex; align-items: center; gap: 8px; margin: 2px 0; }
.dw-group__title { font-family: var(--font-mono); font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(245, 245, 245, 0.82); }
.dw-group__count { font-family: var(--font-mono); font-size: 10px; font-weight: 800; color: #ff7a18; }
.dw-group__none { font-size: 10px; color: rgba(207, 207, 207, 0.42); font-style: italic; }

/* PR-6c — Ask Pepper → Director handoff affordances */
.pepper-prompt-suite__to-director { white-space: nowrap; border-color: rgba(255,122,24,0.45) !important; color: #ffd9b0 !important; }
.pepper-prompt-suite__to-director:hover:not(:disabled) { border-color: rgba(255,122,24,0.7) !important; color: #a9f2ff !important; }
.pepper-prompt-suite__to-director:disabled { opacity: 0.45; cursor: not-allowed; }
.pepper-prompt-suite__last-draft { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 5px 9px; margin-bottom: 6px; border: 1px solid rgba(255,122,24,0.22); border-radius: 7px; background: rgba(4,7,9,0.45); font-family: var(--font-mono); font-size: 10px; }
.pepper-prompt-suite__last-draft span { color: #6ce7ff; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.pepper-prompt-suite__last-draft strong { color: #fff4e7; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pepper-prompt-suite__last-draft em { margin-left: auto; color: #ffd9b0; font-style: normal; font-weight: 800; text-transform: uppercase; }

/* PR-6d — Workspace Stage annotation/correction composer */
.dw-stage-annot { padding: 8px 10px; border: 1px solid rgba(255,122,24,0.24); border-radius: 10px; background: rgba(4,7,9,0.5); }
.dw-stage-annot__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dw-stage-annot__label { font-family: var(--font-mono); font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #6ce7ff; flex: 0 0 auto; }
.dw-stage-annot__row .dw-input { flex: 1 1 220px; }
.dw-stage-annot__sent { font-family: var(--font-mono); font-size: 10px; color: rgba(245,245,245,0.78); }
.dw-stage-annot__sent strong { color: #ffd9b0; }

/* PR-6e — stage pin capture overlay + marker + pin info */
.dw-pin-catcher { position: absolute; inset: 0; z-index: 20; cursor: crosshair; background: rgba(255,122,24,0.06); border: 1px dashed rgba(255,122,24,0.5); border-radius: 12px; }
.dw-pin-marker { position: absolute; z-index: 21; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid #ff7a18; background: rgba(255,122,24,0.35); box-shadow: 0 0 12px -1px #ff7a18; pointer-events: none; }
.dw-stage-annot__pin { font-family: var(--font-mono); font-size: 9px; color: #ffd9b0; }

/* PR-6h (recovered): the live-preview gated state lives in the existing
   WorkspaceStagePanel footer status chips (updated in place) — no separate strip,
   so no dedicated CSS block is needed here. */