/* DS6 Vertical Slice — living prototype. Applies all tranche 1 + 2 decisions. */

*, *::before, *::after { box-sizing: border-box; }
/* Scrollbar — thin, dark, arc-tinted thumb */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--arc-rgb), 0.3); }
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent; }
html, body { margin:0; padding:0; width:100%; height:100%; overflow:hidden;
  background:#0a0e1a; color:#e5e7eb;
  font-family:"Geist",-apple-system,sans-serif; font-size:14px; }
body { --arc-rgb: 34, 211, 238; --arc-hue: #22d3ee; }
body[data-arc="reliability"] { --arc-rgb: 34, 211, 238;  --arc-hue: #22d3ee; }
body[data-arc="velocity"]    { --arc-rgb: 249, 115, 22;  --arc-hue: #f97316; }
body[data-arc="delight"]     { --arc-rgb: 232, 121, 249; --arc-hue: #e879f9; }
body {
  /* Tint B baseline: panels neutral; arc only on semantic elements. */
  background: #0a0e1a;
  transition: background 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
body.is-focus-mode .spine { box-shadow: inset 0 0 60px rgba(var(--arc-rgb), 0.1); }

/* ── Top strip ──────────────────────────── */
.top-strip {
  position:fixed; top:0; left:0; right:0; height:46px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; gap:20px;
  background:rgba(255,255,255,0.02);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid rgba(255,255,255,0.05);
  box-shadow: inset 0 -2px 0 var(--arc-hue);
  transition: box-shadow 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index:10;
}

.crumb { display:flex; align-items:center; gap:10px; font-family:"Geist Mono",monospace; font-size:12px; color:#6b7280; position:relative; }
.crumb__item { color:#9ca3af; cursor:pointer; transition: color 160ms, text-shadow 160ms; }
.crumb__item:hover { color: var(--arc-hue); text-shadow: 0 0 8px rgba(var(--arc-rgb), 0.4); }
.crumb__sep { opacity:0.4; }

.crumb-fork {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:6px;
  border: 1px solid rgba(var(--arc-rgb), 0.35);
  background: rgba(var(--arc-rgb), 0.08);
  color: #e5e7eb; font-weight:500;
  box-shadow: 0 0 12px rgba(var(--arc-rgb), 0.18);
  cursor:pointer; font-family: inherit; font-size: 12px;
}
.crumb-fork__name { color: #e5e7eb; }
.crumb-fork__suffix { color: var(--arc-hue); padding-left: 4px; border-left: 1px solid rgba(var(--arc-rgb), 0.3); margin-left: 4px; }
.crumb-fork__chevron { color: var(--arc-hue); transform: translateY(1px); transition: transform 160ms; }
.crumb-fork[aria-expanded="true"] .crumb-fork__chevron { transform: translateY(1px) rotate(180deg); }

.fork-menu {
  position: absolute; top: 42px; left: 180px;
  background: rgba(17,24,39,0.96);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 6px;
  min-width: 210px;
  box-shadow: 0 16px 36px rgba(0,0,0,0.55), 0 0 0 1px rgba(var(--arc-rgb), 0.12);
  z-index: 20;
  display: none;
}
.fork-menu.is-open { display: block; }
.fork-mi {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 9px 12px; border-radius: 6px;
  border: 0; background: transparent;
  font: 500 13px "Geist",sans-serif; color: #cbd5e1; cursor: pointer;
}
.fork-mi:hover { background: rgba(255,255,255,0.04); color: #e5e7eb; }
.fork-mi.is-active { background: rgba(var(--arc-rgb), 0.12); color: var(--arc-hue); }
.fork-mi__k { font-family: "Geist Mono",monospace; font-size: 10px; color: #6b7280; }

.hud-slot { display:flex; align-items:center; gap:14px; font-family:"Geist Mono",monospace; font-size:12px; color:#9ca3af; margin-left:auto; }
.hud-arc { border-left: 3px solid var(--arc-hue); padding-left:8px; transition: border-color 900ms; }
.hud-arc b { color:#e5e7eb; }
.arc-demo { display:flex; gap:3px; }
.arc-btn {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
  width:22px; height:22px; border-radius:50%; cursor:pointer;
  font-size:10px; padding:0; display:inline-flex; align-items:center; justify-content:center;
}
.arc-btn[data-arc="reliability"] { color:#22d3ee; }
.arc-btn[data-arc="velocity"]    { color:#f97316; }
.arc-btn[data-arc="delight"]     { color:#e879f9; }
.arc-btn:hover { background: rgba(255,255,255,0.08); }
.hud-thermal { display:inline-flex; align-items:center; gap:6px; }
.flame { filter: drop-shadow(0 0 6px rgba(251,191,36,0.5)); font-size:14px; }

/* ── Workshop body ─────────────────────── */
.workshop {
  position:absolute; top:46px; left:0; right:0; bottom:0;
  display:grid;
  grid-template-columns: 96px 195px 1fr 280px;
  /* Single row forced to fill the container so tall children can't push the
     grid below the viewport. Each column sets min-height:0 so internal
     overflow scroll takes effect instead of bleeding out. */
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}
.workshop > .dock,
.workshop > .spine,
.workshop > .bench,
.workshop > .assistant {
  min-height: 0; min-width: 0; max-height: 100%;
  /* Backlog #36 — CSS containment isolates paint for each panel. When
     body[data-arc] changes and the CSS var cascade triggers repaints on
     the 494 var(--arc-*) usages in this stylesheet, each container
     repaints independently rather than as one big region. Measurable
     improvement on arc cycling / switching. */
  contain: paint;
}

/* ── DOCK: icons + metrics ─────────────── */
.dock {
  background: rgba(255,255,255,0.015);
  backdrop-filter: blur(10px);
  border-right: 1px solid rgba(255,255,255,0.04);
  box-shadow: 3px 0 14px rgba(0,0,0,0.35);
  padding: 14px 10px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative; z-index: 2;
}
/* Faint 1px arc edge at the top — studio is still "lit" without bleeding arc into the panel */
.dock::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--arc-hue), transparent);
  opacity: 0.3; pointer-events: none;
  transition: opacity 600ms;
}
.dock__icons { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.dock-ic {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #9ca3af; cursor: pointer; font-size: 14px;
  border: 0; background: transparent; font-family: inherit;
  transition: background 120ms, color 120ms, box-shadow 120ms;
}
.dock-ic:hover { background: rgba(255,255,255,0.05); color:#e5e7eb; }
.dock-ic.is-active {
  background: rgba(var(--arc-rgb), 0.16);
  color: var(--arc-hue);
  box-shadow: 0 0 10px 1px rgba(var(--arc-rgb), 0.28);
}
.dock__div { height: 1px; min-height: 1px; flex-shrink: 0; width: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent); margin: 2px 0; }
.dock__icons--secondary { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
/* Dock clock */
.dock__clock {
  text-align: center; padding: 4px 0;
  font: 300 22px/1 "Geist Mono", monospace;
  font-variant-numeric: tabular-nums;
  color: #e5e7eb; letter-spacing: -0.02em;
  cursor: pointer; user-select: none;
  transition: color 0.15s;
}
.dock__clock:hover { color: #fff; }
.dock__clock .dock-clock__period {
  font-size: 9px; font-weight: 600; letter-spacing: 0.1em;
  color: #6b7280; display: block; margin-top: 1px;
}

.dock__metrics { display: flex; flex-direction: column; gap: 14px; padding: 2px 4px; margin-top: auto; }
.dock-metric {
  cursor: pointer; padding: 6px 4px; border-radius: 6px;
  position: relative; border: 0; background: transparent; text-align: left;
  font-family: inherit;
  transition: background 120ms;
}
.dock-metric:hover { background: rgba(var(--arc-rgb), 0.06); }
.dock-metric::before {
  content:''; position:absolute; left:0; top:4px; bottom:4px;
  width:2px; background:var(--arc-hue); opacity:0.4; border-radius:999px;
  transition: opacity 120ms, box-shadow 120ms;
}
.dock-metric:hover::before { opacity:1; box-shadow: 0 0 8px var(--arc-hue); }
.dock-metric.muted::before { background: #64748b; opacity:0.4; }
.dock-metric.is-active {
  background: rgba(var(--arc-rgb), 0.1);
}
.dock-metric.is-active::before { opacity: 1; box-shadow: 0 0 10px var(--arc-hue); }
.dock-metric .n { font: 300 32px/1 "Geist Mono",monospace; padding-left: 10px; color: #e5e7eb; font-variant-numeric: tabular-nums; }
.dock-metric.muted .n { color: #64748b; }
.dock-metric .lbl {
  font: 600 9px "Geist",sans-serif; letter-spacing: 0.14em;
  text-transform: uppercase; color: #9ca3af; margin-top: 2px; padding-left: 10px;
}
.dock__hint {
  font: italic 10px "Geist",sans-serif; color: #6b7280; text-align: center;
  padding: 8px 0;
}

/* ── SPINE ─────────────────────────────── */
.spine {
  position:relative;
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(14px) saturate(1.15);
  border-right: 1px solid rgba(255,255,255,0.05);
  padding:16px 10px;
  display:flex; flex-direction:column;
  transition: box-shadow 600ms;
}
.spine::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(var(--arc-rgb), 0.06), transparent 60%),
    radial-gradient(ellipse at 0% 100%, rgba(var(--arc-rgb), 0.04), transparent 55%);
  transition: background 900ms;
}
.spine__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; padding: 0 4px;
  position: relative; z-index: 1;
  min-height: 24px;  /* reserve space so ghost stays centred */
}
.spine__title {
  font: 600 10px "Geist",sans-serif; letter-spacing: 0.14em; text-transform: uppercase;
  color: #6b7280;
}
.spine__plus {
  width: 22px; height: 22px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(var(--arc-rgb), 0.08);
  border: 1px dashed rgba(var(--arc-rgb), 0.4);
  color: var(--arc-hue);
  font: 600 14px "Geist Mono",monospace; line-height: 1;
  cursor: pointer; padding: 0;
  transition: background 140ms, border-color 140ms, box-shadow 140ms, transform 140ms;
}
.spine__plus:hover {
  background: rgba(var(--arc-rgb), 0.18);
  border-style: solid;
  border-color: rgba(var(--arc-rgb), 0.7);
  box-shadow: 0 0 12px rgba(var(--arc-rgb), 0.4), inset 0 0 0 1px rgba(var(--arc-rgb), 0.2);
  transform: scale(1.08);
}
.spine__plus:active { transform: scale(0.95); }

/* Ghost droplet — lives in the header row, horizontally centred on the pipe,
   vertically centred with the PIPELINE text + + button. Rendered as a
   translucent "unreal" droplet matching the draft-droplet look from tranche
   3 design lock: softer fill, dashed arc ring, gentle opacity pulse. */
.spine__ghost {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  width: 18px; height: 18px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 30%,
    rgba(255,255,255,0.5),
    rgba(var(--arc-rgb), 0.32) 55%,
    rgba(var(--arc-rgb), 0) 100%
  );
  border: 1px dashed rgba(var(--arc-rgb), 0.55);
  box-shadow: 0 0 10px rgba(var(--arc-rgb), 0.22);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  transition:
    opacity 220ms cubic-bezier(0.2,0.8,0.2,1),
    transform 220ms cubic-bezier(0.2,0.8,0.2,1);
}
body.is-forming-wo .spine__ghost {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: ghost-draft-pulse 2.4s ease-in-out infinite 200ms;
}
/* Draft look: soft opacity breathing, not a glow pulse — same pattern as
   translucent draft-in-Requirements from the tranche 3 mocks. */
@keyframes ghost-draft-pulse {
  0%,100% { opacity: 0.55; box-shadow: 0 0 8px rgba(var(--arc-rgb), 0.2); }
  50%     { opacity: 0.95; box-shadow: 0 0 16px rgba(var(--arc-rgb), 0.38); }
}
/* Flash fires on click — droplet briefly "solidifies" (bumps toward committed
   look) before the modal opens. */
.spine__ghost.is-flashed {
  animation: ghost-commit-flash 340ms cubic-bezier(0.2,0.8,0.2,1);
}
@keyframes ghost-commit-flash {
  0% {
    opacity: 0.9;
    background: radial-gradient(circle at 32% 30%, rgba(255,255,255,0.5), rgba(var(--arc-rgb), 0.32) 55%, rgba(var(--arc-rgb), 0) 100%);
    box-shadow: 0 0 14px rgba(var(--arc-rgb), 0.3);
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    background: radial-gradient(circle at 32% 30%, #fff, var(--arc-hue) 55%, rgba(var(--arc-rgb), 0.6) 100%);
    box-shadow: 0 0 30px rgba(var(--arc-rgb), 0.85);
    transform: translate(-50%, -50%) scale(1.3);
    border-style: solid;
    border-color: rgba(var(--arc-rgb), 0.9);
  }
  100% {
    opacity: 0.55;
    background: radial-gradient(circle at 32% 30%, rgba(255,255,255,0.5), rgba(var(--arc-rgb), 0.32) 55%, rgba(var(--arc-rgb), 0) 100%);
    box-shadow: 0 0 10px rgba(var(--arc-rgb), 0.22);
    transform: translate(-50%, -50%) scale(1);
  }
}
/* Drop animation — ghost falls from header into the first chamber position.
   Uses position:fixed during animation so it renders above the scrim (z:90).
   The ghost starts at its natural position and drops ~180px into the first chamber. */
.spine__ghost.is-dropping {
  position: fixed;
  z-index: 95;
  animation: ghost-drop-into-chamber 320ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
}
@keyframes ghost-drop-into-chamber {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  60% {
    opacity: 0.9;
    transform: translateY(180px) scale(0.85);
  }
  80% {
    opacity: 0.7;
    transform: translateY(160px) scale(0.9);
  }
  100% {
    opacity: 0;
    transform: translateY(170px) scale(0.7);
  }
}
#spine-canvas { flex:1; width:100%; position:relative; z-index:1; cursor:pointer; }

/* ── BENCH ─────────────────────────────── */
.bench { overflow-y:auto; padding:24px 28px; }
.bench h1 { font: 600 28px "Geist",sans-serif; letter-spacing:-0.01em; margin:0 0 6px; }
.bench h2 { font: 600 18px "Geist",sans-serif; margin: 22px 0 10px; }
.bench .subtitle { color:#9ca3af; margin:0 0 18px; }
.bench .crumb-mini {
  font-family:"Geist Mono",monospace; font-size:11px; color:#6b7280;
  margin-bottom:8px; display:flex; align-items:center; gap:8px;
}
.bench .crumb-mini__current { color: #9ca3af; }

.card {
  background: rgba(17,24,39,0.65);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 12px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.3);
}
.card--glass {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(12px);
  box-shadow:
    0 0 0 1px rgba(var(--arc-rgb), 0.1),
    0 8px 26px rgba(0,0,0,0.4),
    0 0 22px rgba(var(--arc-rgb), 0.08),
    inset 0 1px 0 rgba(255,255,255,0.04);
}
.card-label {
  font: 600 10px "Geist",sans-serif; letter-spacing:0.14em;
  color:#6b7280; text-transform:uppercase; margin-bottom:6px;
}

/* Home metric tiles (click-through from dock also lands here) */
.home-metrics { display:flex; gap:40px; margin-top: 10px; }
.home-metric .n { font: 300 44px "Geist Mono",monospace; font-variant-numeric: tabular-nums; }
.home-metric .lbl { color:#9ca3af; font-size: 12px; }
.home-metric.muted .n { color:#64748b; }

/* Quick actions */
.btn {
  background: linear-gradient(135deg, rgba(var(--arc-rgb),0.35), rgba(var(--arc-rgb),0.20));
  color:#e5e7eb; border: 1px solid rgba(var(--arc-rgb),0.45);
  border-radius: 8px;
  font: 600 13px "Geist",sans-serif;
  padding: 9px 14px; letter-spacing:0.02em;
  cursor:pointer;
  box-shadow: 0 0 0 1px rgba(var(--arc-rgb),0.2), 0 0 16px rgba(var(--arc-rgb),0.20), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: box-shadow 140ms, transform 140ms;
  font-family: inherit;
}
.btn:hover { box-shadow: 0 0 0 1px rgba(var(--arc-rgb),0.35), 0 0 28px rgba(var(--arc-rgb),0.35), inset 0 1px 0 rgba(255,255,255,0.12); transform: translateY(-1px); }
.btn:active { transform: scale(0.98); }
.btn--ghost {
  background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.08);
  color:#9ca3af; box-shadow:none;
}
.btn--ghost:hover { color:#e5e7eb; border-color: rgba(var(--arc-rgb),0.3); transform:none; box-shadow: 0 0 12px rgba(var(--arc-rgb),0.15); }
.btn--danger { color:#f87171; border-color: rgba(239,68,68,0.25); }
.btn--danger:hover { color:#ef4444; border-color: rgba(239,68,68,0.55); box-shadow: 0 0 12px rgba(239,68,68,0.20); }

/* Archive surface — list of archived WOs (off-spine terminal state) */
.archive-list { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.archive-row {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 12px 16px; border-radius: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  color: #cbd5e1; cursor: pointer; font-family: inherit; text-align: left;
  transition: background 140ms, border-color 140ms, transform 140ms;
}
.archive-row:hover {
  background: rgba(var(--arc-rgb), 0.05);
  border-color: rgba(var(--arc-rgb), 0.3);
  transform: translateX(2px);
}
.archive-row__id {
  font: 500 11px "Geist Mono",monospace; color: #9ca3af; letter-spacing: 0.04em;
}
.archive-row__title { font: 600 13px "Geist",sans-serif; color: #e5e7eb; margin-top: 2px; }
.archive-row__meta { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.actions-row { display:flex; gap:10px; margin-top: 14px; align-items:center; flex-wrap: wrap; }
.actions-row__label {
  font: 500 11px "Geist Mono",monospace; color: #9ca3af;
  letter-spacing: 0.04em; margin-right: 4px;
}
.actions-row__label b { color: var(--arc-hue); }

/* DS6 v0-stage chip — shows the actual stage the Director is acting on */
.stage-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 10px; border-radius: 999px;
  background: rgba(var(--arc-rgb), 0.10);
  border: 1px solid rgba(var(--arc-rgb), 0.30);
  box-shadow: 0 0 10px rgba(var(--arc-rgb), 0.18);
  flex-shrink: 0;
}
.stage-chip__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--arc-hue);
  box-shadow: 0 0 8px var(--arc-hue);
  animation: wo-awaiting-pulse 2s ease-in-out infinite;
}
.stage-chip__name {
  font: 600 11px "Geist",sans-serif;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--arc-hue);
}
.kbd-hint { font-family:"Geist Mono",monospace; font-size:10px; opacity:0.6; margin-left:4px; }

/* F3 — Checkpoint countdown pill. Sits inline with the Proceed/Hold/Refine
 * buttons. Arc-hue on urgent; dims when paused; red flash at expiry. */
.cp-timer {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 8px; border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  font: 500 12px "Geist",sans-serif; color: #d1d5db;
  flex-shrink: 0;
  transition: border-color 180ms, background 180ms, color 180ms;
}
.cp-timer__icon { font-size: 12px; opacity: 0.85; }
.cp-timer__label { letter-spacing: 0.01em; }
.cp-timer__label b {
  font: 600 12px "Geist Mono", monospace; color: #e5e7eb;
  min-width: 38px; display: inline-block; text-align: right;
}
.cp-timer__pause {
  margin-left: 2px;
  background: transparent; border: none; cursor: pointer;
  color: #9ca3af; font-size: 11px; padding: 0 4px;
  border-radius: 4px;
}
.cp-timer__pause:hover { color: #e5e7eb; background: rgba(255,255,255,0.06); }
.cp-timer.is-paused {
  border-color: rgba(250,204,21,0.35); color: #fde68a;
}
.cp-timer.is-paused .cp-timer__label b { color: #fde68a; }
.cp-timer.is-urgent {
  border-color: rgba(var(--arc-rgb),0.50);
  background: rgba(var(--arc-rgb),0.08);
  color: #e5e7eb;
  animation: cp-urgent-pulse 1s ease-in-out infinite;
}
.cp-timer.is-urgent .cp-timer__label b { color: var(--arc-hue); }
.cp-timer.is-expired {
  border-color: rgba(248,113,113,0.55); color: #fecaca;
  background: rgba(248,113,113,0.07);
}
.cp-timer--manual {
  border-color: rgba(100,116,139,0.35);
  color: #94a3b8;
  background: rgba(100,116,139,0.07);
}
.cp-timer--gated {
  border-color: rgba(248,113,113,0.45);
  color: #fca5a5;
  background: rgba(248,113,113,0.08);
}
@keyframes cp-urgent-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(var(--arc-rgb),0); }
  50%      { box-shadow: 0 0 10px rgba(var(--arc-rgb),0.35); }
}

/* CHECKPOINT_OPEN_QUESTIONS_DESIGN_LOCK — question badge + modal.
 * Rendered on the checkpoint control row when the just-completed stage
 * emitted openQuestions[]. Gated state (blocker open) is amber-red so the
 * Director notices before attempting Proceed. */
.cp-qbadge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px; border-radius: 999px;
  font: 600 11px "Inter", sans-serif; letter-spacing: 0.02em;
  border: 1px solid rgba(100,116,139,0.35);
  color: #cbd5e1; background: rgba(100,116,139,0.08);
}
.cp-qbadge__blocker { color: #fca5a5; }
.cp-qbadge__advisory { color: #fde68a; }
.cp-qbadge--gated {
  border-color: rgba(248,113,113,0.55);
  background: rgba(248,113,113,0.10);
  animation: cp-qbadge-pulse 2.4s ease-in-out infinite;
}
@keyframes cp-qbadge-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(248,113,113,0); }
  50%      { box-shadow: 0 0 10px rgba(248,113,113,0.30); }
}

.cp-qmodal {
  display: flex; flex-direction: column; gap: 12px;
  min-width: 480px; max-width: 640px; max-height: 80vh; overflow: hidden;
}
.cp-qmodal__header { padding: 14px 16px 6px; border-bottom: 1px solid rgba(100,116,139,0.25); }
.cp-qmodal__title { font: 600 15px "Inter", sans-serif; color: #e5e7eb; margin: 0; }
.cp-qmodal__sub { font: 500 12px "Inter", sans-serif; color: #94a3b8; margin-top: 4px; }
.cp-qmodal__body { padding: 8px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.cp-qmodal__card {
  padding: 12px 14px; border-radius: 8px;
  border: 1px solid rgba(100,116,139,0.25);
  background: rgba(30,41,59,0.35);
}
.cp-qmodal__card--blocker { border-color: rgba(248,113,113,0.40); background: rgba(248,113,113,0.06); }
.cp-qmodal__qtext { font: 500 13px "Inter", sans-serif; color: #e5e7eb; margin: 0 0 8px; }
.cp-qmodal__pill {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font: 600 10px "Inter", sans-serif; letter-spacing: 0.04em; text-transform: uppercase;
  margin-left: 8px;
}
.cp-qmodal__pill--blocker { background: rgba(248,113,113,0.15); color: #fca5a5; }
.cp-qmodal__pill--advisory { background: rgba(253,224,71,0.12); color: #fde68a; }
.cp-qmodal__opts { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.cp-qmodal__opts label {
  display: flex; align-items: flex-start; gap: 8px;
  font: 500 12px "Inter", sans-serif; color: #cbd5e1;
  padding: 4px 6px; border-radius: 4px; cursor: pointer;
}
.cp-qmodal__opts label:hover { background: rgba(100,116,139,0.10); }
.cp-qmodal__freeform {
  width: 100%; min-height: 64px; margin-top: 6px;
  padding: 8px 10px; border-radius: 6px;
  border: 1px solid rgba(100,116,139,0.35);
  background: rgba(15,23,42,0.60); color: #e5e7eb;
  font: 500 12px "Inter", sans-serif; resize: vertical;
}
.cp-qmodal__ack {
  display: inline-block; margin-top: 6px;
  font: 500 11px "Inter", sans-serif; color: #94a3b8;
  background: none; border: none; padding: 2px 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.cp-qmodal__ack:hover { color: #fde68a; }
.cp-qmodal__ack--active { color: #fde68a; text-decoration: none; font-weight: 600; }
.cp-qmodal__footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; border-top: 1px solid rgba(100,116,139,0.25);
}
.cp-qmodal__counter { font: 500 12px "Inter", sans-serif; color: #94a3b8; }
.cp-qmodal__counter b { color: #fca5a5; }

/* F2 — Refine inline surface. Sits just above the stage actions row;
 * arc-hued border so it reads as a live action surface, not decoration. */
.cp-refine {
  margin: 10px 0 8px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(var(--arc-rgb), 0.05);
  border: 1px solid rgba(var(--arc-rgb), 0.25);
  animation: cp-refine-in 180ms cubic-bezier(0.33, 1, 0.68, 1);
}
.cp-refine__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.cp-refine__title {
  font: 600 12px "Geist", sans-serif; color: var(--arc-hue);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.cp-refine__close {
  background: transparent; border: none; color: #9ca3af;
  font-size: 14px; cursor: pointer; padding: 0 4px;
  border-radius: 4px;
}
.cp-refine__close:hover { color: #e5e7eb; background: rgba(255,255,255,0.06); }
.cp-refine__hint {
  font: 400 11.5px "Geist", sans-serif; color: #94a3b8;
  margin: 0 0 8px; line-height: 1.5;
}
.cp-refine__input {
  width: 100%; box-sizing: border-box;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.10);
  color: #e5e7eb; padding: 8px 10px; border-radius: 6px;
  font: 400 12.5px "Geist", sans-serif; line-height: 1.5;
  resize: vertical; min-height: 60px;
}
.cp-refine__input:focus {
  outline: none;
  border-color: rgba(var(--arc-rgb), 0.50);
  box-shadow: 0 0 0 2px rgba(var(--arc-rgb), 0.12);
}
.cp-refine__actions {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px;
}
@keyframes cp-refine-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* F7 — First-checkpoint callout. Appears inline in the actions row the
 * first time a Director encounters a checkpoint; dismissable forever. */
.cp-tutorial {
  flex-basis: 100%;
  margin: 8px 0 0;
  position: relative;
  background: rgba(var(--arc-rgb), 0.08);
  border: 1px solid rgba(var(--arc-rgb), 0.40);
  border-radius: 8px;
  padding: 10px 14px;
  animation: cp-tutorial-in 260ms cubic-bezier(0.33, 1, 0.68, 1);
}
.cp-tutorial__arrow {
  position: absolute; top: -6px; left: 28px;
  width: 10px; height: 10px;
  background: rgba(var(--arc-rgb), 0.08);
  border-top: 1px solid rgba(var(--arc-rgb), 0.40);
  border-left: 1px solid rgba(var(--arc-rgb), 0.40);
  transform: rotate(45deg);
}
.cp-tutorial__body {
  font: 400 12px "Geist", sans-serif; color: #d1d5db; line-height: 1.55;
}
.cp-tutorial__body strong { color: var(--arc-hue); font-weight: 600; }
.cp-tutorial__body b { color: #e5e7eb; font-weight: 600; }
.cp-tutorial__close {
  margin-left: 10px;
  font: 600 11px "Geist", sans-serif;
  background: rgba(var(--arc-rgb), 0.25);
  border: 1px solid rgba(var(--arc-rgb), 0.50);
  color: var(--arc-hue);
  padding: 3px 10px; border-radius: 5px; cursor: pointer;
  transition: background 160ms, border-color 160ms;
}
.cp-tutorial__close:hover {
  background: rgba(var(--arc-rgb), 0.40);
  border-color: var(--arc-hue);
}
.cp-tutorial.is-dismissing {
  opacity: 0; transform: translateY(-4px);
  transition: opacity 180ms, transform 180ms;
}
@keyframes cp-tutorial-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* WO list rows — run-card view (T4.4 locked: run-card view in workshop) */
.wo-list { display:flex; flex-direction:column; gap:6px; }
.wo-group-head {
  padding: 9px 14px; margin-top: 4px;
  font: 600 10px "Geist",sans-serif; letter-spacing:0.14em; text-transform:uppercase;
  color: var(--arc-hue);
  background: rgba(var(--arc-rgb), 0.05);
  border-radius: 6px;
}
.wo-row {
  display: grid; grid-template-columns: 20px 1fr auto auto;
  gap: 12px; align-items: center;
  padding: 11px 14px; border-radius: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  cursor: pointer;
  transition: border-color 140ms, box-shadow 140ms, transform 140ms;
}
.wo-row:hover {
  border-color: rgba(var(--arc-rgb), 0.35);
  box-shadow: 0 0 0 1px rgba(var(--arc-rgb), 0.22), 0 0 20px rgba(var(--arc-rgb), 0.2);
  transform: translateY(-1px);
}
.wo-droplet {
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #fff, var(--arc-hue) 55%, rgba(var(--arc-rgb),0.5));
  box-shadow: 0 0 14px 3px rgba(var(--arc-rgb), 0.45);
  flex: 0 0 auto;
}
.wo-droplet--blocked {
  background: radial-gradient(circle at 32% 30%, #94a3b8, #64748b 55%, rgba(100,116,139,0.4));
  box-shadow: 0 0 8px rgba(100,116,139,0.2);
  opacity: 0.65;
  animation: blocked-droplet-breathe 3s ease-in-out infinite;
}
@keyframes blocked-droplet-breathe {
  0%,100% { opacity: 0.55; box-shadow: 0 0 6px rgba(100,116,139,0.15); }
  50% { opacity: 0.7; box-shadow: 0 0 10px rgba(100,116,139,0.25); }
}
.wo-droplet--archived { background: transparent; border: 1px dashed rgba(255,255,255,0.25); box-shadow: none; opacity: 0.55; }
.wo-droplet--awaiting {
  background: radial-gradient(circle at 32% 30%, #fff, #fbbf24 55%, rgba(251,191,36,0.5));
  box-shadow: 0 0 14px 3px rgba(251,191,36,0.5);
  animation: wo-awaiting-pulse 1.6s ease-in-out infinite;
}
@keyframes wo-awaiting-pulse {
  0%, 100% { box-shadow: 0 0 14px 3px rgba(251,191,36,0.5); }
  50%      { box-shadow: 0 0 22px 5px rgba(251,191,36,0.8); }
}
.wo-main { min-width: 0; }
.wo-main .wo-title {
  font: 500 13px "Geist", sans-serif;
  color: #e5e7eb;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wo-main .wo-meta {
  font: 500 11px "Geist Mono", monospace;
  color: #6b7280;
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wo-main .wo-meta b { color: var(--arc-hue); font-weight: 500; }
.wo-id { font-family: "Geist Mono", monospace; font-size: 12px; color: #9ca3af; }

.wo-status {
  font: 600 10px "Geist", sans-serif;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid transparent;
}
.wo-status--running  { background: rgba(251,191,36,0.12); color: #fbbf24; border-color: rgba(251,191,36,0.28); }
.wo-status--awaiting { background: rgba(251,191,36,0.18); color: #fbbf24; border-color: rgba(251,191,36,0.4); }
.wo-status--blocked  { background: rgba(100,116,139,0.12); color: #94a3b8; border-color: rgba(100,116,139,0.25); }
.wo-status--archived { background: rgba(255,255,255,0.04); color: #9ca3af; border: 1px dashed rgba(255,255,255,0.12); }

/* DS6 Journey 8 — Workforce surface */
.wf-pool {
  margin-top: 14px; padding: 14px 16px 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
}
.wf-pool__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.wf-pool__title {
  font: 600 10px "Geist",sans-serif; letter-spacing: 0.14em;
  text-transform: uppercase; color: #9ca3af; flex: 1;
}
.wf-pool__grid {
  display: flex; flex-wrap: wrap; gap: 8px;
  min-height: 40px;
}
.wf-pool__empty {
  font: 400 12px "Geist",sans-serif; color: #6b7280; font-style: italic;
  padding: 6px 4px;
}

.wf-agent {
  position: relative;
  padding: 8px 30px 8px 10px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  cursor: grab;
  transition: all 140ms;
  display: flex; flex-direction: column; gap: 3px;
  min-width: 140px;
}
.wf-agent:hover { border-color: rgba(var(--arc-rgb),0.35); transform: translateY(-1px); }
.wf-agent.is-dragging { opacity: 0.4; cursor: grabbing; }
.wf-agent__top { display: flex; align-items: baseline; gap: 6px; }
.wf-agent__name { font: 600 12px "Geist",sans-serif; color: #e5e7eb; }
.wf-agent__source {
  font: 500 9px "Geist Mono",monospace; color: #6b7280;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.wf-agent__dots { display: flex; gap: 4px; }
.wf-rc-dot {
  width: 8px; height: 8px; border-radius: 50%;
  box-shadow: 0 0 4px currentColor;
}
.wf-agent__retire {
  position: absolute; top: 6px; right: 6px;
  width: 20px; height: 20px; border-radius: 4px;
  background: transparent; border: 0; cursor: pointer;
  color: #6b7280; font-size: 13px; line-height: 1;
  font-family: inherit; opacity: 0;
  transition: opacity 120ms;
}
.wf-agent:hover .wf-agent__retire { opacity: 0.8; }
.wf-agent__retire:hover { color: #ef4444; opacity: 1 !important; }

.wf-roles {
  margin-top: 14px;
  display: grid; gap: 8px;
}
.wf-role {
  padding: 10px 14px;
  background: rgba(255,255,255,0.015);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 10px;
  transition: border-color 140ms, background 140ms;
}
.wf-role.is-drop-over {
  border-color: rgba(var(--arc-rgb),0.5);
  background: rgba(var(--arc-rgb),0.06);
  box-shadow: 0 0 18px rgba(var(--arc-rgb),0.20) inset;
}
.wf-role__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.wf-role__dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 6px currentColor; }
.wf-role__name { font: 600 12px "Geist",sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: #e5e7eb; }
.wf-role__count { font: 500 10px "Geist",sans-serif; color: #9ca3af; margin-left: auto; }

/* Per-role oversight toggle (UI-only in J8 — Phase 4 wires behaviour) */
.wf-oversight {
  display: flex; align-items: center; gap: 8px;
  margin-left: 10px;
}
.wf-oversight__label {
  font: 600 9px "Geist",sans-serif; letter-spacing: 0.12em;
  text-transform: uppercase; color: #6b7280;
}
.wf-oversight__seg {
  display: flex; padding: 2px; gap: 2px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
}
.wf-oversight__btn {
  padding: 4px 10px; border-radius: 4px;
  background: transparent; border: 0;
  color: #9ca3af; cursor: pointer;
  font: 600 9.5px "Geist",sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all 120ms;
}
.wf-oversight__btn:hover { color: #e5e7eb; background: rgba(255,255,255,0.03); }
.wf-oversight__btn.is-active {
  color: var(--arc-hue);
  background: rgba(var(--arc-rgb),0.14);
  box-shadow: 0 0 8px rgba(var(--arc-rgb),0.25);
}
.wf-role__chain { display: flex; flex-wrap: wrap; gap: 6px; min-height: 34px; align-items: center; }
.wf-role__empty {
  font: 400 11px "Geist",sans-serif; color: #6b7280; font-style: italic;
  padding: 4px 2px;
}

.wf-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 6px 5px 10px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  cursor: grab;
  font-family: inherit;
  transition: all 120ms;
}
.wf-chip:hover { border-color: rgba(var(--arc-rgb),0.35); }
.wf-chip.is-dragging { opacity: 0.4; cursor: grabbing; }
.wf-chip--primary { border-color: rgba(var(--arc-rgb),0.45); background: rgba(var(--arc-rgb),0.08); }
.wf-chip__star { color: var(--arc-hue); font-size: 11px; }
.wf-chip__ord {
  font: 600 9px "Geist Mono",monospace; color: #6b7280;
  min-width: 12px; text-align: center;
}
.wf-chip__name { font: 500 11px "Geist",sans-serif; color: #e5e7eb; }
.wf-chip__rm {
  width: 18px; height: 18px; border-radius: 3px;
  background: transparent; border: 0; cursor: pointer;
  color: #6b7280; font-size: 11px; line-height: 1;
  font-family: inherit;
  transition: color 120ms;
}
.wf-chip__rm:hover { color: #ef4444; }

/* Journey 8C — review-step Workforce tab rows */
.rv-wf-row {
  padding: 10px 12px; border-radius: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  margin-bottom: 8px;
}
.rv-wf-row__head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
}
.rv-wf-tag {
  margin-left: auto;
  font: 500 9.5px "Geist Mono",monospace; color: var(--arc-hue);
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px;
  background: rgba(var(--arc-rgb),0.08); border: 1px solid rgba(var(--arc-rgb),0.25);
}
.rv-wf-tag--warn {
  color: #fbbf24; background: rgba(251,191,36,0.08);
  border-color: rgba(251,191,36,0.30);
}
.wo-status--ok       { background: rgba(34,197,94,0.12); color: #22c55e; border-color: rgba(34,197,94,0.25); }
.wo-status--idle     { background: rgba(255,255,255,0.03); color: #9ca3af; border-color: rgba(255,255,255,0.06); }

.wo-lane {
  font: 600 10px "Geist", sans-serif; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(var(--arc-rgb),0.08); color: var(--arc-hue); border: 1px solid rgba(var(--arc-rgb),0.25);
}
.wo-stage-chip {
  font: 600 9px "Geist",sans-serif; letter-spacing: 0.1em; text-transform: uppercase;
  color: #9ca3af;
}

/* WO detail */
.detail-header { margin-bottom:12px; }
.detail-header__top { display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
.detail-header__title { display:flex; align-items:center; gap:12px; }
.detail-droplet {
  width:28px; height:28px; border-radius:50%;
  background: radial-gradient(circle at 32% 30%, #fff, var(--arc-hue) 55%, rgba(var(--arc-rgb),0.5));
  box-shadow: 0 0 22px 4px rgba(var(--arc-rgb), 0.4);
}
.pill {
  display:inline-flex; padding:2px 9px; border-radius:999px;
  font:600 10px/1 "Geist",sans-serif; letter-spacing:0.08em; text-transform:uppercase;
  background: rgba(var(--arc-rgb),0.12); color: var(--arc-hue); border:1px solid rgba(var(--arc-rgb),0.3);
  margin-right:4px;
}
.pill--lane { background: rgba(255,255,255,0.04); color:#9ca3af; border-color: rgba(255,255,255,0.08); }
.pill--meta { background: rgba(255,255,255,0.03); color:#9ca3af; border-color: rgba(255,255,255,0.06); font: 500 10px "Geist Mono",monospace; letter-spacing: 0.06em; }
.card--meta-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px !important; }

.tabrow {
  display:flex; gap:2px; padding:3px;
  background:rgba(255,255,255,0.03);
  border-radius:8px; border:1px solid rgba(255,255,255,0.04);
  width:fit-content; margin-bottom:14px;
}
.tab {
  padding:5px 11px; border-radius:5px;
  font:500 11px "Geist",sans-serif; color:#9ca3af; cursor:pointer;
  border: 0; background: transparent; font-family: inherit;
}
.tab:hover { color: #e5e7eb; }
.tab.is-active { background: rgba(var(--arc-rgb),0.14); color: var(--arc-hue); }

.criteria { padding-left: 20px; margin: 6px 0; }
.criteria li { margin:4px 0; color:#cbd5e1; line-height:1.6; }

/* Runs — flat list fallback */
.run-row {
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-bottom:1px solid rgba(255,255,255,0.04);
  font-size:12px;
}
.run-row:last-child { border-bottom:0; }
.run-dot { width:9px; height:9px; border-radius:50%; }
.run-dot--ok   { background:#22c55e; box-shadow:0 0 8px #22c55e; }
.run-dot--fail { background:#ef4444; box-shadow:0 0 8px #ef4444; }
.run-dot--run  { background:#fbbf24; box-shadow:0 0 10px #fbbf24; animation: run-pulse 1.3s infinite; }
.run-dot--idle   { background: rgba(156,163,175,0.4); }
.run-dot--queued { background: rgba(156,163,175,0.6); box-shadow: 0 0 4px rgba(156,163,175,0.4); }
@keyframes run-pulse { 0%,100% { opacity:0.6 } 50% { opacity:1 } }
.run-id { font-family:"Geist Mono",monospace; color:#9ca3af; font-size:11px; }
.run-model { font-family:"Geist Mono",monospace; color:#6b7280; font-size:10.5px; margin-left:auto; }

/* Runs — tributaries card */
.tributaries {
  display:grid; grid-template-columns: 1fr 1fr; gap:12px;
}
.tributary {
  background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.05);
  border-radius:10px; padding:12px 14px;
}
.tributary__head { display:flex; align-items:center; gap:8px; margin-bottom:4px; }

/* ── ASSISTANT ─────────────────────────── */
.assistant {
  position:relative;
  background: rgba(255,255,255,0.015);
  backdrop-filter: blur(10px);
  border-left: 1px solid rgba(255,255,255,0.04);
  box-shadow: -3px 0 14px rgba(0,0,0,0.35);
  padding: 10px 14px; overflow-y:auto;
  z-index: 2;
  transition: padding 200ms ease;
}
/* Panel header toolbar: layout switch + collapse toggle. Pinned top-right.
   Absolute positioning so the toolbar floats above section content and
   survives collapsed-mode height changes. */
.asst-header {
  position: absolute; top: 8px; right: 8px;
  display: flex; align-items: center; gap: 8px;
  z-index: 2;
}

/* Collapsed mode — hide the layout switch (AP-1b/AP-2b only meaningful
   when expanded) and tighten the header gap so the collapse toggle sits
   cleanly inside the 56px rail without overflowing. */
body.is-assistant-collapsed .asst-layout-switch { display: none; }
body.is-assistant-collapsed .asst-header {
  top: 10px; right: 10px; gap: 0;
}

/* Layout A/B light-switch — classic pill toggle. OFF = AP-1b (Structured),
   ON = AP-2b (Voice-forward). Thumb slides across; labels sit inside the
   track so the affordance reads at a glance. */
.asst-layout-switch {
  background: transparent; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center;
}
.asst-layout-switch__track {
  position: relative;
  display: inline-flex; align-items: center;
  width: 54px; height: 22px; border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  transition: background 200ms ease, border-color 200ms ease;
}
.asst-layout-switch:hover .asst-layout-switch__track {
  border-color: rgba(var(--arc-rgb), 0.35);
}
.asst-layout-switch__label {
  position: relative; z-index: 2;
  flex: 1; text-align: center;
  font: 600 9px "Geist Mono", monospace;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.35);
  transition: color 220ms ease;
  pointer-events: none;
}
.asst-layout-switch__thumb {
  position: absolute; top: 2px; left: 2px;
  width: 24px; height: 16px; border-radius: 9px;
  background: linear-gradient(180deg, rgba(var(--arc-rgb),0.55), rgba(var(--arc-rgb),0.25));
  box-shadow: 0 0 8px rgba(var(--arc-rgb), 0.45), inset 0 1px 0 rgba(255,255,255,0.15);
  transition: transform 260ms cubic-bezier(0.33, 1, 0.68, 1);
  z-index: 1;
}
.asst-layout-switch[aria-checked="true"] .asst-layout-switch__thumb {
  transform: translateX(26px);
}
.asst-layout-switch[aria-checked="false"] .asst-layout-switch__label--off {
  color: var(--arc-hue);
}
.asst-layout-switch[aria-checked="true"]  .asst-layout-switch__label--on {
  color: var(--arc-hue);
}

/* Collapse toggle — small chevron next to the layout switch. Rotates in
   collapsed state so the affordance reverses (› expands, ‹ collapses). */
.asst-toggle {
  position: relative;
  width: 24px; height: 24px; border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #9ca3af; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 140ms ease;
}
.asst-toggle:hover {
  color: var(--arc-hue);
  border-color: rgba(var(--arc-rgb), 0.35);
  background: rgba(var(--arc-rgb), 0.08);
}
.asst-toggle__icon {
  font: 600 14px "Geist Mono", monospace; line-height: 1;
  transition: transform 200ms ease;
  display: inline-block;
}
body.is-assistant-collapsed .asst-toggle__icon { transform: rotate(180deg); }

/* Collapsed: narrow column with badges only. Workshop grid re-weighs the
   assistant column to ~52px; everything inside hides except badges which
   stack vertically and show dot + optional count chip. */
body.is-assistant-collapsed .workshop {
  grid-template-columns: 96px 180px 1fr 52px;
}
body.is-assistant-collapsed .assistant {
  padding: 40px 6px 10px;
}
body.is-assistant-collapsed .assistant > .asst__section,
body.is-assistant-collapsed .assistant > #batch-panel,
body.is-assistant-collapsed .assistant .c-title {
  display: none;
}
body.is-assistant-collapsed .constellation {
  padding: 0; border-bottom: none;
}
body.is-assistant-collapsed .c-grid {
  grid-template-columns: 1fr; gap: 6px;
}
body.is-assistant-collapsed .c-badge {
  padding: 6px; justify-content: center;
  position: relative;
}
body.is-assistant-collapsed .c-label { display: none; }
body.is-assistant-collapsed .c-badge .c-count:not([hidden]) {
  display: inline-flex; align-items: center; justify-content: center;
  position: absolute; top: -2px; right: -2px;
  min-width: 14px; height: 14px; padding: 0 3px;
  border-radius: 7px; border: 1px solid rgba(0, 0, 0, 0.6);
  background: var(--role-colour, #64748b);
  color: #0b0e13;
  font: 700 9px "Geist", sans-serif;
}
/* Count chip on role badges — always visible when non-zero. In expanded
   mode it sits inline after the role name (shows activity at a glance).
   In collapsed mode the corner-badge override kicks in. */
.c-count {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: auto;
  min-width: 18px; height: 16px; padding: 0 5px;
  border-radius: 999px;
  background: var(--role-colour);
  color: #0b0e13;
  font: 700 9.5px "Geist", sans-serif;
}
.c-count[hidden] { display: none; }
.amb-badges .c-badge[data-role="chronicler"] { --role-colour: #f59e0b; }
.amb-badges .c-badge[data-role="observer"]   { --role-colour: #22c55e; }
.amb-badges .c-badge[data-role="strategist"] { --role-colour: #6366f1; }
.amb-badges .c-badge[data-role="optimiser"]  { --role-colour: #8b5cf6; }
/* Faint 1px arc edge at the top (matches dock). No radial wash. */
.assistant::before {
  content:''; position:absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--arc-hue), transparent);
  opacity: 0.3; pointer-events: none;
  transition: opacity 600ms;
}
.assistant > * { position:relative; z-index:1; }

.constellation { padding: 4px 4px 10px; border-bottom:1px solid rgba(255,255,255,0.04); }
.c-title { font:600 10px "Geist",sans-serif; letter-spacing:0.14em; text-transform:uppercase; color:#6b7280; margin-bottom:10px; }
.c-grid { display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
.c-badge {
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:8px;
  background: rgba(255,255,255,0.02);
  font-size:12px; color:#e5e7eb;
}
.c-dot {
  width:10px; height:10px; border-radius:50%;
  background: var(--role-colour, #64748b);
  box-shadow: 0 0 10px 2px var(--role-colour, transparent);
  animation: breath var(--breath-dur, 3s) ease-in-out infinite;
}
.c-badge[data-role="chronicler"]  { --role-colour:#fbbf24; }
.c-badge[data-role="observer"]    { --role-colour:#22c55e; }
.c-badge[data-role="strategist"]  { --role-colour:#3b82f6; }
.c-badge[data-role="optimiser"]   { --role-colour:#a855f7; }
.c-badge[data-role="observer"]    .c-dot { animation-delay: -0.6s; animation-duration: 3.3s; }
.c-badge[data-role="strategist"]  .c-dot { animation-delay: -1.2s; animation-duration: 3.1s; }
.c-badge[data-role="optimiser"]   .c-dot { animation-delay: -1.8s; animation-duration: 2.8s; }
@keyframes breath {
  0%,100% { opacity:0.55; transform:scale(0.92); box-shadow: 0 0 8px 1px var(--role-colour); }
  50%     { opacity:1;    transform:scale(1.18); box-shadow: 0 0 18px 4px var(--role-colour); }
}

/* DS2 ambient graduation — tier-gated locked state.
   Power level 0 (role not available at current tier) → dim + no motion.
   Hover shows a tooltip ("Unlocks at higher tier") via the [title] attr. */
.c-badge.is-locked {
  filter: grayscale(1); opacity: 0.35;
  cursor: not-allowed;
}
.c-badge.is-locked .c-dot {
  animation: none;
  box-shadow: none;
  background: rgba(148, 163, 184, 0.5);
}

/* Active state — role has produced ≥1 record in the last 60s.
   animation-duration is set inline by renderAmbientRoles (rate-driven):
   1-2 recs/min → 1.5s | 3-5 → 1.0s | 6+ → 0.6s. .is-active also lifts the
   glow slightly so the pulse reads as intentional, not just faster breath. */
.c-badge .c-dot.is-active {
  box-shadow: 0 0 14px 3px var(--role-colour);
}

/* Clickable when powered — badge is the entry into role-filtered feed.
   .is-filter-active = currently selected filter (persistent ring). */
.c-badge:not(.is-locked) { cursor: pointer; transition: background 140ms; }
.c-badge:not(.is-locked):hover { background: rgba(var(--arc-rgb), 0.04); }
.c-badge.is-filter-active {
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px var(--role-colour);
}

/* Ambient feed cards in assistant panel — one card per active record.
   Role colour on the left-edge accent; signalType + age on the right. */
.asst-ambient-feed { display: flex; flex-direction: column; gap: 6px; }
.asst-ambient-feed__empty {
  color: #6b7280; font-size: 12px; font-style: italic;
  padding: 4px 2px;
}
.asst-ambient-card {
  position: relative;
  padding: 8px 10px 8px 12px; border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-left: 2px solid var(--role-colour, #64748b);
}
.asst-ambient-card[data-role="chronicler"]  { --role-colour: #f59e0b; }
.asst-ambient-card[data-role="observer"]    { --role-colour: #22c55e; }
.asst-ambient-card[data-role="strategist"]  { --role-colour: #6366f1; }
.asst-ambient-card[data-role="optimiser"]   { --role-colour: #8b5cf6; }
.asst-ambient-card--warning { border-color: rgba(251, 191, 36, 0.25); }
.asst-ambient-card--error,
.asst-ambient-card--critical { border-color: rgba(239, 68, 68, 0.30); }

.asst-ambient-card__head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
  flex-wrap: wrap;
}
.asst-ambient-card__role {
  font: 600 9px "Geist", sans-serif; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--role-colour);
}
.asst-ambient-card__signal { font-size: 10px; }
.asst-ambient-card__age { margin-left: auto; font-size: 10px; }
.asst-ambient-card__summary {
  font-size: 12.5px; color: #cbd5e1; line-height: 1.4;
}
.asst-ambient-card__reco {
  margin-top: 4px; font-size: 11.5px; color: #9ca3af;
  font-style: italic;
}

/* Filter label + clear button in the AMBIENT FEED section header. */
.asst__filter-label {
  margin-left: 4px; font-weight: 600;
  text-transform: none; letter-spacing: 0;
}
.asst__filter-value[data-role="chronicler"]  { --role-colour: #f59e0b; }
.asst__filter-value[data-role="observer"]    { --role-colour: #22c55e; }
.asst__filter-value[data-role="strategist"]  { --role-colour: #6366f1; }
.asst__filter-value[data-role="optimiser"]   { --role-colour: #8b5cf6; }
.asst__filter-clear {
  background: transparent; border: 0; cursor: pointer;
  color: #6b7280; padding: 0 4px;
  font: 600 12px "Geist", sans-serif;
  transition: color 120ms;
}
.asst__filter-clear:hover { color: var(--arc-hue); }
.asst__filter-clear--inline {
  color: var(--arc-hue); text-decoration: underline; font-size: 11.5px;
  font-weight: 500;
}

.asst__section { padding: 10px 4px; border-bottom:1px solid rgba(255,255,255,0.04); }
.asst__section:last-child { border-bottom:0; }
.asst__label { font:600 10px "Geist",sans-serif; letter-spacing:0.14em; text-transform:uppercase; color:#6b7280; margin-bottom:6px; }
.asst__body { font-size:13px; color:#e5e7eb; line-height:1.55; }
.asst__body b { color: var(--arc-hue); font-weight:600; }
.asst__pulse { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px;
  background: var(--arc-hue); box-shadow: 0 0 6px var(--arc-hue); animation: breath 2s ease-in-out infinite; }

/* ── Agents / workforce surface (T4.1) ── */
.role-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  position: relative;
}
.role-card[data-role="executor"]   { --rc: var(--arc-hue); --rcrgb: var(--arc-rgb); }
.role-card[data-role="architect"]  { --rc: #a855f7; --rcrgb: 168,85,247; }
.role-card[data-role="verifier"]   { --rc: #22c55e; --rcrgb: 34,197,94; }
.role-card[data-role="chronicler"] { --rc: #fbbf24; --rcrgb: 251,191,36; }
.role-card[data-role="director"]   { --rc: #e879f9; --rcrgb: 232,121,249; }
.role-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.role-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--rc); box-shadow: 0 0 12px 2px var(--rc); flex: 0 0 auto; }
.role-name { font: 600 15px "Geist",sans-serif; color:#e5e7eb; }
.role-meta { font: 500 11px "Geist Mono",monospace; color:#9ca3af; margin-left: auto; }
.role-body { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.role-workers { flex: 1; }
.role-workers__label,
.role-oversight__label {
  font: 600 9px "Geist Mono",monospace;
  letter-spacing: 0.14em; text-transform: uppercase; color: #6b7280;
  margin-bottom: 4px;
}
.worker-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 6px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.05);
  font-size: 11.5px; color: #cbd5e1;
  margin-right: 6px; margin-top: 4px;
  cursor: grab;
}
.worker-chip .wcdot { width: 7px; height: 7px; border-radius: 50%; background: var(--rc); box-shadow: 0 0 5px var(--rc); }
.worker-chip .wcstate { font: 500 9px "Geist Mono",monospace; color: #6b7280; letter-spacing: 0.06em; text-transform: uppercase; margin-left: 4px; }
.worker-chip.is-running .wcstate { color: var(--rc); }
.worker-chip .wcpref { font-size: 10px; color: var(--rc); margin-left: 2px; opacity: 0.7; }

.auton-dial {
  display: flex; gap: 2px; padding: 2px;
  background: rgba(0,0,0,0.3); border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.05);
}
.auton-dial button {
  padding: 4px 10px; border-radius: 4px; border: 0;
  background: transparent; color: #9ca3af;
  font: 600 10px "Geist Mono",monospace; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; font-family: inherit;
  transition: background 140ms, color 140ms, box-shadow 140ms;
}
.auton-dial button:hover { color: #e5e7eb; }
.auton-dial button.is-active {
  background: rgba(var(--rcrgb), 0.2);
  color: var(--rc);
  box-shadow: 0 0 6px rgba(var(--rcrgb), 0.4);
}

/* ── WO detail timeline (T4.5) ─────────── */
.wt-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px; padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.wt-droplet {
  width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #fff, var(--arc-hue) 55%, rgba(var(--arc-rgb),0.5));
  box-shadow: 0 0 22px 4px rgba(var(--arc-rgb), 0.35);
  flex: 0 0 auto;
}
.wt-droplet--blocked { background: #64748b; box-shadow: none; opacity: 0.6; }
.wt-droplet--awaiting {
  background: radial-gradient(circle at 32% 30%, #fff, #fbbf24 55%, rgba(251,191,36,0.5));
  box-shadow: 0 0 20px 4px rgba(251,191,36,0.5);
  animation: wo-awaiting-pulse 1.6s ease-in-out infinite;
}
.wt-chamber-pill {
  display: inline-flex; padding: 3px 10px; border-radius: 999px;
  font: 600 10px "Geist Mono",monospace; letter-spacing: 0.1em; text-transform: uppercase;
  background: rgba(var(--arc-rgb), 0.14); color: var(--arc-hue);
  border: 1px solid rgba(var(--arc-rgb), 0.3);
  margin-left: auto;
}

.wt-stage {
  position: relative;
  padding: 12px 14px 12px 34px;
  margin-left: 4px;
  border-left: 2px solid rgba(255,255,255,0.06);
}
.wt-stage::before {
  content: ''; position: absolute; left: -7px; top: 16px;
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 2px solid #0a0e1a;
}
.wt-stage--complete { border-left-color: rgba(34,197,94, 0.5); }
.wt-stage--complete::before { background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.wt-stage--current { border-left-color: var(--arc-hue); }
.wt-stage--current::before {
  background: var(--arc-hue); box-shadow: 0 0 12px var(--arc-hue);
  animation: wo-awaiting-pulse 2s ease-in-out infinite;
}
.wt-stage--upcoming { opacity: 0.5; }
.wt-stage--blocked { border-left-color: #64748b; }
.wt-stage--blocked::before { background: #64748b; box-shadow: none; }
.wt-stage__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wt-stage__name {
  font: 600 11px "Geist",sans-serif;
  letter-spacing: 0.12em; text-transform: uppercase; color: #e5e7eb;
}
.wt-stage__owner { font: 500 11px "Geist",sans-serif; color: #9ca3af; }
.wt-stage__outcome { font-size: 12.5px; color: #cbd5e1; margin-top: 4px; line-height: 1.5; }
.wt-stage__run-row { font: 500 11px "Geist Mono",monospace; color: #9ca3af; margin-top: 4px; }
.wt-artifact-chip {
  display: inline-block;
  font: 500 10px "Geist Mono",monospace;
  padding: 2px 7px; border-radius: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  color: #9ca3af;
  margin: 4px 4px 0 0;
}

/* DS6 Journey 5 · Pass 2 — chamber rows with v0-stage sub-lists. */
.wt-chamber {
  position: relative;
  margin-left: 4px;
  border-left: 2px solid rgba(255,255,255,0.15);
  padding: 0;
  margin-bottom: 2px;
}
.wt-chamber--complete { border-left-color: rgba(34,197,94, 0.5); }
.wt-chamber--current  { border-left-color: var(--arc-hue); }
.wt-chamber--upcoming { opacity: 0.55; }
.wt-chamber--blocked  { border-left-color: #64748b; }
.wt-chamber__head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  position: relative; width: 100%;
  padding: 10px 14px 10px 34px;
  background: transparent; border: 0; color: inherit;
  cursor: pointer; font-family: inherit; text-align: left;
  transition: background 140ms;
}
.wt-chamber__head:hover { background: rgba(255,255,255,0.02); }
.wt-chamber__head::before {
  content: ''; position: absolute; left: -7px; top: 14px;
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 2px solid #0a0e1a;
}
.wt-chamber--complete .wt-chamber__head::before { background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.wt-chamber--current  .wt-chamber__head::before { background: var(--arc-hue); box-shadow: 0 0 12px var(--arc-hue); animation: wo-awaiting-pulse 2s ease-in-out infinite; }
.wt-chamber--blocked  .wt-chamber__head::before { background: #64748b; box-shadow: none; }
.wt-chamber__caret {
  font-size: 9px; color: #6b7280;
  transition: transform 160ms;
  display: inline-block; width: 10px;
  transform: rotate(-90deg);
}
.wt-chamber.is-open > .wt-chamber__head > .wt-chamber__caret { transform: rotate(0); color: var(--arc-hue); }
.wt-chamber__summary { font-size: 12px; color: #9ca3af; margin-left: auto; }
.wt-chamber__body {
  max-height: 0; overflow: hidden;
  padding: 0 14px 0 46px;
  border-top: 1px dashed rgba(255,255,255,0.04);
  opacity: 0;
  transition: max-height 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
              padding 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
              opacity 180ms;
}
/* Either explicit click-open OR transient hover-open reveals the body */
.wt-chamber.is-open > .wt-chamber__body,
.wt-chamber.is-hover-open > .wt-chamber__body {
  max-height: 600px;
  opacity: 1;
  padding: 6px 14px 10px 46px;
}
@media (prefers-reduced-motion: reduce) {
  .wt-chamber__body { transition: none; }
}

/* Chamber-level skipped state — keep the left line CLEARLY visible so the
   pipeline reads as continuous; dash it to signal skip; dim only the dot + text. */
.wt-chamber--skipped {
  /* Dashed line at a similar visual weight as adjacent chambers — not dimmed,
     not hidden, just textured differently so the skip reads semantically
     without fragmenting the pipeline. */
  border-left-style: dashed;
  border-left-color: rgba(148, 163, 184, 0.45);
}
.wt-chamber--skipped .wt-chamber__head::before {
  background: transparent;
  border: 1px dashed rgba(255,255,255,0.28);
  box-shadow: none;
}
.wt-chamber--skipped .wt-chamber__head {
  opacity: 0.55;
}
.wt-chamber--skipped .wt-chamber__summary {
  color: #6b7280; font-style: italic;
}

/* Sub-stage row inside a chamber */
.wt-sub {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 6px 0; position: relative;
  font: 500 11.5px "Geist",sans-serif; color: #cbd5e1;
}
.wt-sub__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.15);
  flex-shrink: 0;
}
.wt-sub__name { font: 600 11px "Geist",sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: #e5e7eb; }
.wt-sub__owner { color: #6b7280; font-size: 11px; }
.wt-sub__state {
  font: 500 9px "Geist",sans-serif; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 4px;
  background: rgba(255,255,255,0.04); color: #9ca3af;
  margin-left: auto;
}
.wt-sub--complete .wt-sub__dot   { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
.wt-sub--complete .wt-sub__state { color: #22c55e; background: rgba(34,197,94,0.08); }
.wt-sub--current  .wt-sub__dot   { background: var(--arc-hue); box-shadow: 0 0 8px var(--arc-hue); animation: wo-awaiting-pulse 2s ease-in-out infinite; }
.wt-sub--current  .wt-sub__state { color: var(--arc-hue); background: rgba(var(--arc-rgb), 0.10); }
.wt-sub--awaiting .wt-sub__dot   { background: #fbbf24; box-shadow: 0 0 8px #fbbf24; animation: wo-awaiting-pulse 2s ease-in-out infinite; }
.wt-sub--awaiting .wt-sub__state { color: #fbbf24; background: rgba(251,191,36,0.10); }
.wt-sub--blocked  .wt-sub__dot   { background: #64748b; }
.wt-sub--blocked  .wt-sub__state { color: #94a3b8; background: rgba(100,116,139,0.08); }
.wt-sub--upcoming { opacity: 0.55; }
.wt-sub--skipped { opacity: 0.4; }
.wt-sub--skipped .wt-sub__dot   { background: transparent; border: 1px dashed rgba(255,255,255,0.15); }
.wt-sub--skipped .wt-sub__state { color: #6b7280; font-style: italic; }
/* Orphaned: position-past stage with no completed run. Distinct from skipped
   (skipped is by-lane-design; orphaned is a bug — pipeline advanced past
   without firing a worker). Visually amber/red to be noticed. */
.wt-sub--orphaned { opacity: 0.85; }
.wt-sub--orphaned .wt-sub__dot   { background: transparent; border: 1px dashed rgba(248, 113, 113, 0.55); box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.20); }
.wt-sub--orphaned .wt-sub__state { color: #f87171; background: rgba(248, 113, 113, 0.08); font-weight: 600; }
.wt-sub--orphaned::after {
  content: '⚠ ORPHANED';
  margin-left: 8px;
  font: 600 9px 'Geist Mono', monospace;
  letter-spacing: 0.10em;
  color: #f87171;
}
.wt-sub__runs {
  font: 500 10.5px "Geist Mono",monospace; color: #9ca3af;
  display: inline-flex; align-items: center; gap: 6px;
}
.wt-sub__runlog {
  flex-basis: 100%; margin: 4px 0 0 15px;
  border-left: 1px dashed rgba(255,255,255,0.08);
  padding-left: 10px;
  display: flex; flex-direction: column; gap: 3px;
}
.wt-sub__runlog-row {
  display: flex; align-items: center; gap: 8px;
  font: 500 10.5px "Geist Mono",monospace; color: #9ca3af;
}
.wt-sub__runlog-row .run-id { color: #e5e7eb; }

/* F5 — Checkpoint history narrative inside a completed sub-stage. Same
 * dashed gutter as the runlog so history reads as a second thread of
 * activity alongside the runs. */
.wt-sub__cp-history {
  flex-basis: 100%; margin: 4px 0 0 15px;
  border-left: 1px dashed rgba(var(--arc-rgb), 0.15);
  padding-left: 10px;
  display: flex; flex-direction: column; gap: 3px;
}
.wt-sub__cp-row {
  display: flex; align-items: flex-start; gap: 6px;
  font: 500 10.5px "Geist",sans-serif; color: #9ca3af;
  padding: 2px 0;
}
.wt-sub__cp-icon {
  font-size: 10px; color: var(--arc-hue); flex: 0 0 auto;
  width: 14px; text-align: center; line-height: 1.4;
}
.wt-sub__cp-text { flex: 1; line-height: 1.5; color: #d1d5db; }
.wt-sub__cp-row--refine .wt-sub__cp-text { color: #fde68a; }
.wt-sub__cp-row--hold   .wt-sub__cp-text { color: #e2e8f0; }
.wt-sub__runlog-row.is-live {
  background: rgba(var(--arc-rgb), 0.06);
  border-radius: 4px; padding: 6px 8px; margin-left: -4px;
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  box-shadow: inset 0 0 0 1px rgba(var(--arc-rgb), 0.22);
}
.wt-sub__runlog-row.is-live .run-id { color: var(--arc-hue); }
.wt-sub__runlog-row.is-live .runlog-row__head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.wt-sub__runlog-row.is-live .runlog-row__role { margin-left: 2px; }
.wt-sub__runlog-row.is-live .runlog-row__elapsed {
  margin-left: auto; color: var(--arc-hue);
  display: inline-flex; align-items: center; gap: 6px;
}
.runlog-row__pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--arc-hue);
  box-shadow: 0 0 6px var(--arc-hue);
  animation: wo-activity-pulse 1.4s ease-in-out infinite;
}
@keyframes wo-activity-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
/* Progress bar — smooth fill driven by turns/maxTurns. Transitions smoothly
   between turn updates so the bar doesn't jump. On completion, a green fill
   expands from the right to take the remaining space. */
.run-progress-bar {
  height: 4px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden; display: flex;
}
.run-progress-bar__fill {
  height: 100%; flex-shrink: 0;
  transition: width 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Live run — amber fill */
.run-progress-bar__fill--run {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  box-shadow: 0 0 6px rgba(251, 191, 36, 0.4);
}
/* Completed ok — cyan/arc fill */
.run-progress-bar__fill--ok,
.run-progress-bar__fill--complete {
  background: linear-gradient(90deg, rgba(var(--arc-rgb), 0.6), rgba(var(--arc-rgb), 0.8));
  transition: none;
}
/* Failed — red fill */
.run-progress-bar__fill--fail,
.run-progress-bar__fill--failed {
  background: linear-gradient(90deg, #ef4444, #f87171);
  transition: none;
}
/* Partial — amber, stopped early */
.run-progress-bar__fill--partial {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  transition: none;
}
/* Completion fill — green, fills remaining space from right */
.run-progress-bar__complete {
  height: 100%; flex-shrink: 0;
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.3), rgba(34, 197, 94, 0.5));
  animation: progress-complete-fill 0.6s ease-out forwards;
}
/* Fix D — over-budget overflow: thin red bar extending past the 100% baseline.
   Rendered alongside the main fill so Director can see at a glance that the
   run exceeded its allotted budget without reading the numbers. */
.run-progress-bar__overflow {
  height: 100%; flex-shrink: 0;
  background: linear-gradient(90deg, #f87171, #dc2626);
  box-shadow: 0 0 6px rgba(220, 38, 38, 0.45);
  animation: progress-overflow-pulse 1.6s ease-in-out infinite;
}
@keyframes progress-overflow-pulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}
/* Run row with overflow — slight row-level tint so the row reads as "over" without shouting. */
.wt-sub__runlog-row.is-over-budget .runlog-row__turns { color: #fca5a5; }
/* Calibrated budget (row-level) — the small up-arrow chip next to maxTurns.
   Reinforces the bar overflow: budget was raised for this run vs a prior one. */
.run-cal-chip {
  display: inline-block; margin-left: 4px;
  font: 700 10px "Geist Mono", monospace;
  color: #fbbf24; letter-spacing: 0.04em;
  vertical-align: 1px;
}
@keyframes progress-complete-fill {
  from { opacity: 0; } to { opacity: 1; }
}
}
.runlog-row__meta {
  font: 500 10px "Geist Mono", monospace;
  color: rgba(156, 163, 175, 0.85);
}
.runlog-row__turns, .runlog-row__actions { color: #e5e7eb; }

/* Liquid collapse — smooth sliding animation for the panel when the
   Director collapses or expands. Uses cubic-bezier tuned for a
   "settling fluid" feel: eases in quickly, overshoots slightly, settles.
   Applied to the workshop grid-template-columns + the assistant column's
   own padding + inner section opacity. */
.workshop {
  transition: grid-template-columns 420ms cubic-bezier(0.33, 1, 0.68, 1);
}

.assistant {
  /* padding transition already declared on .assistant; now also animate
     inner-section fade as we approach the collapsed state. */
  transition: padding 420ms cubic-bezier(0.33, 1, 0.68, 1);
}
.assistant .asec {
  transition: opacity 260ms ease-out, transform 300ms cubic-bezier(0.33, 1, 0.68, 1);
}
/* Fade out ONLY sections that should be invisible in collapsed mode
   (In Context; the voice body of Assistant is handled separately via
   display:none below). Assistant section itself stays visible in
   collapsed mode — it anchors the rail with Eva's avatar + team-col. */
/* (collapsed headline cards hidden — dot strip replaces them) */

/* ══════════════════════════════════════════════════════════════════
   AP-1b Assistant panel sections — per DS6_ASSISTANT_PANEL_DESIGN_LOCK
   ══════════════════════════════════════════════════════════════════ */
.asec {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.asec:last-child { border-bottom: none; padding-bottom: 0; }
.asec[hidden] { display: none; }
.asec__label {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font: 600 10px "Geist", sans-serif; letter-spacing: 0.14em;
  text-transform: uppercase; color: #6b7280; margin-bottom: 8px;
}
.asec__tag {
  font-weight: 500; text-transform: none; letter-spacing: 0;
  color: #9ca3af; font-size: 11px;
}
.asec__body { display: flex; flex-direction: column; gap: 6px; }

/* Section 1: Assistant voice card. Two-column layout — avatar + team-col
   on the left, voice line + actions on the right. */
.asst-card {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border-radius: 10px;
  background: linear-gradient(135deg,
    rgba(var(--arc-rgb), 0.06), rgba(var(--arc-rgb), 0.02));
  border: 1px solid rgba(var(--arc-rgb), 0.22);
}
.asst-left {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
}
.asst-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: radial-gradient(circle at 30% 28%,
    rgba(255, 255, 255, 0.95) 0%,
    var(--arc-hue) 45%,
    rgba(var(--arc-rgb), 0.12) 90%);
  box-shadow: 0 0 16px 2px rgba(var(--arc-rgb), 0.45);
  animation: avatar-rest 4s ease-in-out infinite;
}
.asst-avatar.is-speaking { animation: avatar-speak 0.55s ease-in-out infinite; }
@keyframes avatar-rest {
  0%, 100% { transform: scale(0.95); box-shadow: 0 0 12px 1px rgba(var(--arc-rgb), 0.35); }
  50%      { transform: scale(1.05); box-shadow: 0 0 22px 4px rgba(var(--arc-rgb), 0.55); }
}
@keyframes avatar-speak {
  0%, 100% { transform: scale(0.98); }
  25%      { transform: scale(1.10); }
  50%      { transform: scale(1.02); }
  75%      { transform: scale(1.14); }
}

/* Team-col — 4 vertical dots below avatar, "feeding up" into her. */
.team-col {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.team-col .team-pill {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--role-colour, #64748b);
  transition: box-shadow 200ms, opacity 200ms, transform 200ms;
}
.team-col .team-pill[data-role="chronicler"] { --role-colour: #f59e0b; }
.team-col .team-pill[data-role="observer"]   { --role-colour: #22c55e; }
.team-col .team-pill[data-role="strategist"] { --role-colour: #6366f1; }
.team-col .team-pill[data-role="optimiser"]  { --role-colour: #8b5cf6; }
.team-col .team-pill.is-steady {
  opacity: 0.45;
  box-shadow: 0 0 4px var(--role-colour);
}
.team-col .team-pill.is-active {
  opacity: 1;
  box-shadow: 0 0 10px 2px var(--role-colour);
  animation: team-pill-pulse 1.2s ease-in-out infinite;
}
.team-col .team-pill.is-locked {
  background: rgba(148, 163, 184, 0.35);
  box-shadow: none; opacity: 0.45;
}
@keyframes team-pill-pulse {
  0%, 100% { transform: scale(0.92); }
  50%      { transform: scale(1.15); }
}

.asst-voice { flex: 1; min-width: 0; }
.asst-voice__line {
  font: 400 13px/1.45 "Geist", sans-serif; color: #e5e7eb;
}
.asst-voice__line em {
  font-style: normal; color: var(--arc-hue); font-weight: 500;
}
.asst-voice__actions {
  display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap;
}
.btn-voice {
  padding: 4px 10px; border-radius: 5px;
  font: 600 10px "Geist", sans-serif;
  letter-spacing: 0.04em; text-transform: uppercase;
  cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04); color: #cbd5e1;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.btn-voice:hover { border-color: rgba(var(--arc-rgb), 0.35); color: var(--arc-hue); }
.btn-voice--arc {
  background: rgba(var(--arc-rgb), 0.18); color: var(--arc-hue);
  border-color: rgba(var(--arc-rgb), 0.45);
}
.btn-voice--arc:hover { background: rgba(var(--arc-rgb), 0.28); }
.btn-voice--ghost { background: transparent; color: #9ca3af; }

/* Authority badges — rendered inline on action buttons. Per design lock:
   Ask = no badge (baseline), Undo = arc-tinted, Auto = green. Tiny so the
   button label stays primary; the badge is glanceable context. */
.auth-badge {
  display: inline-flex; align-items: center;
  margin-left: 6px; padding: 1px 5px;
  border-radius: 3px; border: 1px solid;
  font: 600 8.5px "Geist", sans-serif; letter-spacing: 0.04em;
  text-transform: none;
  vertical-align: middle;
}
.auth-badge--ask {
  background: rgba(148,163,184,0.1); color: #9ca3af; border-color: rgba(148,163,184,0.3);
}
.auth-badge--undo {
  background: rgba(var(--arc-rgb), 0.18); color: var(--arc-hue); border-color: rgba(var(--arc-rgb), 0.4);
}
.auth-badge--auto {
  background: rgba(34,197,94,0.12); color: #22c55e; border-color: rgba(34,197,94,0.3);
}

/* Section 2: Requires Attention. "All clear" line when empty; composed
   card with amber accent when items present. */
.asst-clear-line {
  display: flex; align-items: center; gap: 8px;
  color: #6b7280; font-size: 12px;
}
.asst-clear-line::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 6px #22c55e;
}
.attention-card {
  padding: 10px 12px; border-radius: 8px;
  background: rgba(251, 191, 36, 0.06);
  border: 1px solid rgba(251, 191, 36, 0.30);
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 6px;
}
.attention-card:last-child { margin-bottom: 0; }
.attention-card__head {
  display: flex; align-items: center; gap: 8px;
  font: 600 11.5px "Geist", sans-serif; color: #fbbf24;
}
.attention-card__icon {
  font-size: 13px; line-height: 1; opacity: 0.85;
}
.attention-card__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #fbbf24; box-shadow: 0 0 8px #fbbf24;
  animation: team-pill-pulse 1.8s ease-in-out infinite;
}
.attention-card__body { font-size: 12.5px; color: #cbd5e1; line-height: 1.4; }
.attention-card__actions { display: flex; gap: 6px; flex-wrap: wrap; }
.btn-attention {
  padding: 5px 10px; border-radius: 5px;
  background: rgba(251, 191, 36, 0.2); color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.45);
  font: 600 10px "Geist", sans-serif;
  letter-spacing: 0.04em; text-transform: uppercase;
  cursor: pointer;
}
.btn-attention:hover { background: rgba(251, 191, 36, 0.30); }

/* Governance variant — purple tint to distinguish from checkpoint amber.
   Critical governance flags get a brighter border + glow. */
.attention-card--gov {
  background: rgba(168, 85, 247, 0.06);
  border-color: rgba(168, 85, 247, 0.30);
}
.attention-card--gov .attention-card__head { color: #a855f7; }
.attention-card--gov .attention-card__dot {
  background: #a855f7; box-shadow: 0 0 8px #a855f7;
}
.attention-card--critical {
  border-color: rgba(239, 68, 68, 0.45);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.1);
}
.btn-attention--gov {
  background: rgba(168, 85, 247, 0.2); color: #a855f7;
  border-color: rgba(168, 85, 247, 0.45);
}
.btn-attention--gov:hover { background: rgba(168, 85, 247, 0.3); }

/* F6 — stale hold attention card. Amber-ish since it's a soft nudge,
 * not a blocker. Clock icon doubles as the "been waiting a while" cue. */
.attention-card--stale-hold {
  background: rgba(251, 191, 36, 0.05);
  border-color: rgba(251, 191, 36, 0.30);
}
.attention-card--stale-hold .attention-card__head { color: #fde68a; }

/* Section 3: Specialist. Ambient badges row + role-filtered carousel. */
.amb-badges {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  margin-bottom: 8px;
}
.amb-badges .c-badge {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  font: 500 12px "Geist", sans-serif; color: #e5e7eb;
  cursor: pointer;
}
.specialist-body {
  min-height: 44px;
}
.specialist-empty {
  color: #6b7280; font-size: 12px; font-style: italic;
  padding: 4px 2px; line-height: 1.5;
}
.specialist-card {
  padding: 10px 12px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-left: 2px solid var(--role-colour, #64748b);
  display: flex; flex-direction: column; gap: 6px;
}
.specialist-card[data-role="chronicler"] { --role-colour: #f59e0b; }
.specialist-card[data-role="observer"]   { --role-colour: #22c55e; }
.specialist-card[data-role="strategist"] { --role-colour: #6366f1; }
.specialist-card[data-role="optimiser"]  { --role-colour: #8b5cf6; }
.specialist-card--warning  { border-color: rgba(251, 191, 36, 0.25); }
.specialist-card--error,
.specialist-card--critical { border-color: rgba(239, 68, 68, 0.30); }
.specialist-card__head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.specialist-card__signal { font-size: 10px; }
.specialist-card__age    { margin-left: auto; font-size: 10px; }
.specialist-card__summary {
  font-size: 12.5px; color: #cbd5e1; line-height: 1.4;
}
.specialist-card__reco {
  margin-top: 2px; font-size: 11.5px; color: #9ca3af; font-style: italic;
}
.specialist-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-top: 6px;
  font: 500 11px "Geist Mono", monospace;
}
.btn-link {
  background: transparent; border: 0; cursor: pointer;
  color: #9ca3af; padding: 2px 5px; border-radius: 3px;
  font: inherit;
}
.btn-link:hover { color: var(--arc-hue); background: rgba(var(--arc-rgb), 0.06); }
.btn-link--dim { color: #6b7280; font-size: 12px; }

/* Section 3: Headlines ticker carousel — single card, swipeable */
.headlines-carousel {
  position: relative; overflow: hidden;
  touch-action: pan-y; user-select: none;
}
.headline-card {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  min-height: 72px;
  position: relative;
}
.headline-card__icon {
  font-size: 20px; flex-shrink: 0; width: 26px; text-align: center;
  padding-top: 2px;
}
.headline-card__text { flex: 1; min-width: 0; }
.headline-card__title {
  font: 600 14px "Geist", sans-serif; color: #e5e7eb;
  margin-bottom: 4px; line-height: 1.3;
}
.headline-card__detail {
  font: 12px/1.45 "Geist", sans-serif; color: #9ca3af;
}
.headline-card__nav {
  position: absolute; top: 8px; right: 10px;
  font: 500 9px "Geist Mono", monospace; color: #4b5563;
  letter-spacing: 0.06em;
}
.headlines-pips {
  display: flex; justify-content: center; gap: 5px;
  padding: 8px 0 2px;
}
.headline-pip {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.12);
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}
.headline-pip--active {
  background: var(--arc-hue);
  box-shadow: 0 0 6px rgba(var(--arc-rgb), 0.4);
}
.headline-pip:hover { background: rgba(255,255,255,0.25); }

/* Headlines: dot strip (collapsed mode only) */
.headlines-dots {
  display: none; /* hidden in expanded mode */
}
/* Collapsed state: hide carousel + pips, show dot strip */
body.is-assistant-collapsed .asec--headlines .headlines-carousel,
body.is-assistant-collapsed .asec--headlines .headlines-pips { display: none; }
body.is-assistant-collapsed .asec--headlines .headlines-dots {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 2px 0;
}
.hl-dot {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.hl-dot:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.15);
  transform: scale(1.08);
}
.hl-dot:active { transform: scale(0.95); }

/* Legacy: keep context-card for any remaining references */
.context-card {
  padding: 10px 12px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.context-card__head {
  font: 500 13px "Geist", sans-serif; color: #e5e7eb;
  margin-bottom: 4px; line-height: 1.3;
}
.context-card__meta {
  font: 500 11px "Geist Mono", monospace;
  color: #9ca3af;
}
.context-card__actions {
  margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap;
}
.btn-context {
  padding: 5px 10px; border-radius: 5px;
  background: rgba(255, 255, 255, 0.04); color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font: 600 10px "Geist", sans-serif;
  letter-spacing: 0.04em; text-transform: uppercase;
  cursor: pointer;
}
.btn-context:hover { border-color: rgba(var(--arc-rgb), 0.35); color: var(--arc-hue); }
.btn-context--arc {
  background: rgba(var(--arc-rgb), 0.18); color: var(--arc-hue);
  border-color: rgba(var(--arc-rgb), 0.45);
}
.btn-context--arc:hover { background: rgba(var(--arc-rgb), 0.28); }

/* ══════════════════════════════════════════════════════════════════
   AP-2b layout variant — Assistant-forward (per design lock)
   Activated via .assistant[data-panel-layout="ap-2b"]. Differences vs AP-1b:
   · Attention section absorbed into the Assistant voice line (hidden)
   · Assistant card gets a larger avatar + slightly more padding
   · Specialist becomes a thin strip — badges at top, single-line
     summary body; tapping either opens a pre-filtered float (follow-up)
   ══════════════════════════════════════════════════════════════════ */
.assistant[data-panel-layout="ap-2b"] .asec--attention {
  display: none;
}
.assistant[data-panel-layout="ap-2b"] .asec--assistant .asst-avatar {
  width: 38px; height: 38px;
}
.assistant[data-panel-layout="ap-2b"] .asec--assistant .asst-card {
  padding: 14px 16px;
}
.assistant[data-panel-layout="ap-2b"] .asec--assistant .asst-voice__line {
  font-size: 13.5px;
}
.assistant[data-panel-layout="ap-2b"] .asec--specialist .specialist-body {
  min-height: 32px;
}
.assistant[data-panel-layout="ap-2b"] .asec--specialist .specialist-card {
  padding: 8px 10px;
}
.assistant[data-panel-layout="ap-2b"] .asec--specialist .specialist-card__reco {
  display: none;
}

/* AP-2b thin-strip summary when no role selected — single-line composite
   of active roles + signal count. Tap opens the all-roles float. */
.spec-strip {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 8px;
  cursor: pointer; text-align: left;
  font: 500 12px "Geist", sans-serif; color: #cbd5e1;
  transition: border-color 140ms, background 140ms;
}
.spec-strip:hover {
  border-color: rgba(var(--arc-rgb), 0.35);
  background: rgba(var(--arc-rgb), 0.04);
}
.spec-strip__dots { display: flex; gap: 3px; }
.spec-strip__dot {
  width: 6px; height: 6px; border-radius: 50%;
  box-shadow: 0 0 4px currentColor;
}
.spec-strip__dot[data-role="chronicler"] { background: #fbbf24; color: #fbbf24; }
.spec-strip__dot[data-role="observer"]   { background: #22c55e; color: #22c55e; }
.spec-strip__dot[data-role="strategist"] { background: #3b82f6; color: #3b82f6; }
.spec-strip__dot[data-role="optimiser"]  { background: #a855f7; color: #a855f7; }
.spec-strip__body { flex: 1; }
.spec-strip__body b { color: #e5e7eb; font-weight: 500; }
.spec-strip__chev { color: #6b7280; font: 600 14px "Geist Mono", monospace; }

/* All-roles specialist float (AP-2b) — compact row per role showing the
   top signal summary + count. Tap a row → sets that role as filter,
   closes float, scrolls Specialist card into view. */
.spec-all-row {
  display: flex; align-items: flex-start; gap: 10px;
  width: 100%; padding: 8px 10px;
  background: transparent; border: 1px solid rgba(255,255,255,0.04);
  border-radius: 6px; margin-bottom: 6px;
  cursor: pointer; text-align: left;
  transition: border-color 120ms, background 120ms;
}
.spec-all-row:last-child { margin-bottom: 0; }
.spec-all-row:hover {
  border-color: rgba(var(--arc-rgb), 0.35);
  background: rgba(var(--arc-rgb), 0.04);
}
.spec-all-row__dot {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  margin-top: 4px;
  box-shadow: 0 0 6px currentColor;
}
.spec-all-row__dot[data-role="chronicler"] { background: #fbbf24; }
.spec-all-row__dot[data-role="observer"]   { background: #22c55e; }
.spec-all-row__dot[data-role="strategist"] { background: #3b82f6; }
.spec-all-row__dot[data-role="optimiser"]  { background: #a855f7; }
.spec-all-row__main { flex: 1; min-width: 0; }
.spec-all-row__head {
  display: flex; gap: 8px; align-items: baseline;
  font: 600 11px "Geist", sans-serif; color: #e5e7eb;
  margin-bottom: 2px;
}
.spec-all-row__head b { font-weight: 500; }
.spec-all-row__summary {
  font-size: 11.5px; color: #cbd5e1; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.spec-all-row__chev { color: #6b7280; font: 600 14px "Geist Mono", monospace; }

/* ══════════════════════════════════════════════════════════════════
   Collapsed-mode rail (AP-3): 56px column.
   Structure top-to-bottom: collapse toggle · Eva avatar + team-col ·
   amber attention tile (only when awaiting) · 4 role badges.
   Float menus anchor to each of these elements.
   ══════════════════════════════════════════════════════════════════ */
body.is-assistant-collapsed .asec--assistant .asec__label,
body.is-assistant-collapsed .asec--attention .asec__label,
body.is-assistant-collapsed .asec--headlines .asec__label,
body.is-assistant-collapsed .asec--specialist .asec__label,
body.is-assistant-collapsed .asec--specialist .specialist-body,
body.is-assistant-collapsed .asst-card .asst-voice {
  display: none;
}
/* Borders / dividers don't belong in the narrow rail. */
body.is-assistant-collapsed .asec {
  border-bottom: none; padding: 6px 0;
}
body.is-assistant-collapsed .asec--attention .asst-clear-line,
body.is-assistant-collapsed .asec--attention .attention-card__body,
body.is-assistant-collapsed .asec--attention .attention-card__actions {
  display: none;
}
/* Attention collapses into a single compact tile per flag kind. Shows
   just the icon (⚠ checkpoint / ⚖ governance) with a count chip corner-
   badge — no wrapping text. Width-constrained so it never overflows the
   56px rail. Still clickable to open the attention float in AP-3. */
body.is-assistant-collapsed .attention-card {
  padding: 8px 6px;
  margin: 0 auto;
  width: 40px; min-height: 36px;
  background: rgba(251,191,36,0.12);
  border-radius: 8px; border-color: rgba(251,191,36,0.45);
  display: flex; align-items: center; justify-content: center;
}
body.is-assistant-collapsed .attention-card__head {
  justify-content: center; align-items: center; gap: 0;
  margin: 0; position: relative;
  flex-wrap: nowrap;
}
body.is-assistant-collapsed .attention-card__head b { display: none; }
body.is-assistant-collapsed .attention-card__dot { display: none; }
body.is-assistant-collapsed .attention-card__icon {
  font-size: 18px; line-height: 1;
}
body.is-assistant-collapsed .attention-card--gov {
  background: rgba(168,85,247,0.12); border-color: rgba(168,85,247,0.45);
}

/* Count chip (rendered in the card head, hidden by default; shown only
   when the panel is collapsed). Corner-anchored on the tile. */
.attention-card__count { display: none; }
body.is-assistant-collapsed .attention-card__count {
  display: inline-flex; align-items: center; justify-content: center;
  position: absolute; top: -8px; right: -10px;
  min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 999px;
  background: #fbbf24; color: #0b0e13;
  border: 1px solid var(--bg, #0b0e13);
  font: 700 9px "Geist", sans-serif;
}
body.is-assistant-collapsed .attention-card--gov .attention-card__count {
  background: #a855f7;
}
/* Eva's card becomes a clean, centered avatar + vertical team-col.
   Avatar + pills remain interactive (clicking opens the voice float). */
body.is-assistant-collapsed .asst-card {
  padding: 4px 0; justify-content: center;
  background: transparent; border: 0;
}
body.is-assistant-collapsed .asst-left {
  flex-direction: column; gap: 8px; align-items: center;
}
body.is-assistant-collapsed .team-col { gap: 6px; }
/* Role badges stack vertically, full-width of the rail, centered. */
body.is-assistant-collapsed .amb-badges {
  grid-template-columns: 1fr; gap: 6px; margin-bottom: 0;
}
body.is-assistant-collapsed .amb-badges .c-badge {
  padding: 6px; justify-content: center; position: relative;
}
body.is-assistant-collapsed .amb-badges .c-label { display: none; }

/* ══════════════════════════════════════════════════════════════════
   Mobile AP-4b — panel-as-app (per DS6_ASSISTANT_PANEL_DESIGN_LOCK)
   Breakpoint: ≤768px in portrait collapses the 4-col grid into the
   assistant panel + a bottom-nav strip. Landscape restores the
   desktop-like vertical spine column for spatial familiarity.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) and (orientation: portrait) {
  /* ── Mobile 2b layout ──
     Header (compact) → Eva + attention toggle (2b) → Pipeline/Bench area → bottom-nav.
     Assistant panel hidden; pipeline fills the viewport below the compact info strip. */
  .workshop {
    display: flex !important; flex-direction: column;
    min-height: 100dvh;
  }
  .workshop > .dock,
  .workshop > .spine,
  .workshop > .bench { display: none; }

  /* Hide the full assistant panel — 2b mode shows a compact summary strip instead */
  .workshop > .assistant {
    display: none !important;
  }
  .asst-toggle { display: none; }

  /* ── Header: compact mobile strip ── */
  .top-strip {
    padding: 6px 10px;
    min-height: 40px;
  }
  /* Hide breadcrumbs on mobile — keep only the fork dropdown */
  .crumb__item, .crumb__sep { display: none; }
  .crumb-fork { margin-left: 0; }
  .crumb-fork__suffix { display: none; }
  .crumb-fork__name { font-size: 13px; max-width: 140px; }
  /* Compact HUD — show only arc buttons, thermal, and user menu */
  .hud-arc { display: none; }
  .hud-api { display: none; }
  .hud-streak { display: none !important; }
  .hud-queue { display: none !important; }
  .arc-demo { gap: 4px; }
  .arc-btn { width: 18px; height: 18px; font-size: 12px; }
  .hud-thermal { font-size: 11px; padding: 3px 6px; }

  /* ── Mobile 2b summary strip — replaces full assistant panel ── */
  #mobile-2b { display: flex !important; }

  /* ── Pipeline area — fills remaining space ── */
  #mobile-spine {
    display: block !important;
    position: relative;
    bottom: auto; left: auto; right: auto;
    flex: 1; min-height: 0;
    margin: 0;
    border-radius: 0;
    border: none;
    background: rgba(11, 14, 19, 0.6);
    padding: 10px 10px 80px; /* room for bottom-nav */
    overflow-y: auto;
  }
  /* When WO detail is shown, hide the pipeline and show bench */
  body.mob-bench-active #mobile-spine { display: none !important; }
  body.mob-bench-active #mobile-bench { display: block !important; }

  /* ── Mobile bench — WO detail rendered here when a WO is selected ── */
  #mobile-bench {
    display: none;
    flex: 1; min-height: 0;
    padding: 10px 12px 80px;
    overflow-y: auto;
    background: rgba(11, 14, 19, 0.6);
  }

  /* ── Bottom nav ── */
  #mobile-nav { display: flex; }
}

/* ── Mobile 2b summary strip ── */
.mobile-2b {
  display: none; /* shown via media query */
  flex-direction: column; gap: 6px;
  padding: 8px 12px;
  background: rgba(17, 20, 28, 0.85);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  flex-shrink: 0;
}
.mobile-2b__eva {
  display: flex; align-items: center; gap: 8px;
  font: 500 12px "Geist", sans-serif; color: #cbd5e1;
}
.mobile-2b__eva-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(var(--arc-rgb),0.25), rgba(var(--arc-rgb),0.08));
  border: 1px solid rgba(var(--arc-rgb),0.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--arc-hue);
}
.mobile-2b__attn {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 0;
}
.mobile-2b__attn-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e; flex-shrink: 0;
}
.mobile-2b__attn-dot.has-work { background: #fbbf24; }
.mobile-2b__attn-text {
  font: 400 11px "Geist", sans-serif; color: #9ca3af;
}

/* Horizontal spine preview (AP-4b) — glass chambers on a tinted pipe
   with a flow droplet travelling along. Scrollable; tap to expand a
   chamber inline. Shown ≤768px portrait; hidden otherwise. */
.mobile-spine {
  position: fixed;
  left: 12px; right: 12px;
  bottom: 82px;
  padding: 8px 0 24px;
  background: rgba(17, 20, 28, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  z-index: 88;
}
.mobile-spine[hidden] { display: none; }
.mobile-spine__head {
  display: flex; justify-content: space-between;
  padding: 0 14px;
  font: 600 9px "Geist", sans-serif; letter-spacing: 0.14em;
  text-transform: uppercase; color: #6b7280;
  margin-bottom: 4px;
}
.mobile-spine__now {
  color: var(--arc-hue); font-weight: 500;
  text-transform: none; letter-spacing: 0; font-size: 10px;
}
.mobile-spine__track {
  position: relative; height: 88px;
}
.mobile-spine__pipe {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 18px; transform: translateY(-50%);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(90deg,
    rgba(var(--arc-rgb), 0) 0%,
    rgba(var(--arc-rgb), 0.04) 50%,
    rgba(var(--arc-rgb), 0) 100%);
  pointer-events: none;
}
.mobile-spine__flow {
  position: absolute; top: 50%; left: 0;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,255,255,0.9) 0%,
    var(--arc-hue) 45%,
    rgba(var(--arc-rgb), 0) 80%);
  opacity: 0.55;
  animation: mobile-spine-flow 9s linear infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes mobile-spine-flow {
  0%   { left: 0%;   opacity: 0;   }
  12%  { opacity: 0.6; }
  50%  { opacity: 0.7; }
  88%  { opacity: 0.4; }
  100% { left: 100%; opacity: 0;   }
}
.mobile-spine__scroll {
  position: relative;
  display: flex; align-items: center; gap: 26px;
  padding: 22px 14px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.mobile-spine__scroll::-webkit-scrollbar { display: none; }

.mob-cham {
  position: relative; flex: 0 0 auto;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  scroll-snap-align: center;
  cursor: pointer;
  transition: width 260ms ease, height 260ms ease,
              border-color 180ms, box-shadow 180ms;
}
.mob-cham::after {
  content: ''; position: absolute; inset: -6px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--arc-rgb), 0.2) 0%, transparent 65%);
  opacity: 0; transition: opacity 200ms;
}
.mob-cham.is-current {
  border-color: rgba(var(--arc-rgb), 0.7);
  box-shadow: 0 0 0 1px rgba(var(--arc-rgb), 0.35);
}
.mob-cham.is-current::after { opacity: 1; }
.mob-cham.is-expanded {
  width: 72px; height: 72px;
  border-color: rgba(var(--arc-rgb), 0.5);
  background: rgba(var(--arc-rgb), 0.05);
  box-shadow: 0 0 20px rgba(var(--arc-rgb), 0.3);
}
.mob-cham__drop {
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%,
    rgba(255,255,255,0.95) 0%,
    var(--arc-hue) 55%,
    rgba(var(--arc-rgb), 0.3) 90%);
  box-shadow: 0 0 12px 2px rgba(var(--arc-rgb), 0.35);
  pointer-events: none;
}
.mob-cham.is-current .mob-cham__drop {
  width: 16px; height: 16px;
  animation: mob-drop-pulse 2s ease-in-out infinite;
}
@keyframes mob-drop-pulse {
  0%, 100% { box-shadow: 0 0 10px 2px rgba(var(--arc-rgb), 0.35); }
  50%      { box-shadow: 0 0 18px 5px rgba(var(--arc-rgb), 0.55); }
}
.mob-cham.is-expanded .mob-cham__drop { display: none; }
.mob-cham.is-empty .mob-cham__drop { display: none; }
.mob-cham__wos {
  position: relative; width: 58px; height: 58px;
  display: none;
}
.mob-cham.is-expanded .mob-cham__wos { display: block; }
.mob-wo-drop {
  position: absolute;
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%,
    rgba(255,255,255,0.95) 0%,
    var(--arc-hue) 55%,
    rgba(var(--arc-rgb), 0.25) 90%);
  box-shadow: 0 0 8px 1px rgba(var(--arc-rgb), 0.4);
  cursor: pointer;
  transition: transform 180ms;
}
.mob-wo-drop:hover { transform: scale(1.18); }
.mob-cham__count {
  position: absolute; top: -6px; left: -6px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: rgba(var(--arc-rgb), 0.2);
  color: var(--arc-hue);
  border: 1px solid rgba(var(--arc-rgb), 0.5);
  font: 700 9px "Geist Mono", monospace;
  display: inline-flex; align-items: center; justify-content: center;
}
.mob-cham__awaiting {
  position: absolute; top: -4px; right: -4px;
  min-width: 14px; height: 14px; padding: 0 3px; border-radius: 999px;
  background: #fbbf24; color: #0b0e13;
  border: 1px solid var(--bg, #0b0e13);
  font: 700 9px "Geist", sans-serif;
  display: inline-flex; align-items: center; justify-content: center;
}
.mob-cham__label {
  position: absolute; top: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  font: 600 8px "Geist", sans-serif; letter-spacing: 0.12em;
  text-transform: uppercase; color: #6b7280;
  white-space: nowrap;
}
.mob-cham.is-current .mob-cham__label { color: var(--arc-hue); }

/* Mobile bottom-nav — fixed to viewport bottom, surface-switcher pill. */
.mobile-nav {
  position: fixed; left: 12px; right: 12px; bottom: 14px;
  display: none; justify-content: space-around; align-items: center;
  padding: 8px 4px;
  background: rgba(17, 20, 28, 0.95);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 32px rgba(0,0,0,0.55);
  z-index: 90;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav__btn {
  background: transparent; border: 0; cursor: pointer;
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 14px; border-radius: 10px;
  color: #9ca3af;
  transition: color 120ms, background 120ms;
}
.mobile-nav__btn:hover { color: #e5e7eb; }
.mobile-nav__btn.is-active {
  color: var(--arc-hue);
  background: rgba(var(--arc-rgb), 0.10);
}
.mobile-nav__icon { font: 600 18px "Geist Mono", monospace; line-height: 1; }
.mobile-nav__label { font: 500 10px "Geist", sans-serif; }

/* Landscape on small screens — return to a desktop-like layout so the
   spine's vertical spatial metaphor is preserved (Director preference). */
@media (max-width: 1024px) and (orientation: landscape) {
  .workshop {
    grid-template-columns: 64px 140px 1fr 260px;
  }
}

/* Float menus for collapsed mode (AP-3) — anchored to rail elements.
   Each float opens next to its anchor with a subtle fade + slide; close
   animation in reverse. Max 3 concurrent per design lock. */
.asst-float {
  width: 300px;
  background: rgba(17, 20, 28, 0.96);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(var(--arc-rgb), 0.28);
  border-radius: 10px;
  padding: 12px 14px 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.55),
              0 0 24px rgba(var(--arc-rgb), 0.18);
  animation: float-in 220ms cubic-bezier(0.33, 1, 0.68, 1);
  transition: opacity 180ms ease, transform 180ms ease;
  display: flex; flex-direction: column;
  overflow: hidden;  /* body handles scroll */
}
.asst-float__body {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.asst-float.is-closing {
  opacity: 0; transform: translateX(6px) scale(0.98);
  pointer-events: none;
}
@keyframes float-in {
  from { opacity: 0; transform: translateX(-6px) scale(0.96); }
  to   { opacity: 1; transform: translateX(0)   scale(1); }
}
.asst-float::before {
  content: ''; position: absolute;
  right: -7px; top: 14px;
  width: 12px; height: 12px;
  background: rgba(17, 20, 28, 0.96);
  border-right: 1px solid rgba(var(--arc-rgb), 0.28);
  border-top:   1px solid rgba(var(--arc-rgb), 0.28);
  transform: rotate(45deg);
}
.asst-float__close {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 5px;
  background: transparent; border: 0; cursor: pointer;
  color: #6b7280; font: 600 14px "Geist", sans-serif; line-height: 1;
  transition: color 120ms, background 120ms;
}
.asst-float__close:hover { color: #ef4444; background: rgba(239,68,68,0.1); }
.asst-float__head {
  font: 600 10px "Geist", sans-serif; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--arc-hue);
  margin-bottom: 10px; padding-right: 22px;
}
.asst-float__body { display: flex; flex-direction: column; gap: 6px; }

/* Queued row — honest idle state. No progress bar, no elapsed timer, dim
   dot without pulse. Distinguishes "waiting for a runtime slot" from
   "actively burning turns". */
.wt-sub__runlog-row.is-queued {
  background: rgba(255,255,255,0.025);
  border-radius: 4px; padding: 6px 8px; margin-left: -4px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.wt-sub__runlog-row.is-queued .runlog-row__queue {
  margin-left: auto; color: rgba(156,163,175,0.85);
}
.wt-sub__runlog-row.is-queued .runlog-row__pos,
.wt-sub__runlog-row.is-queued .runlog-row__eta { color: #cbd5e1; }

/* ══════════════════════════════════════════════════
   Tier 2.2 · Inline worker config + hire sheet (on agents surface)
   ══════════════════════════════════════════════════ */

.worker-chip.is-open {
  border-color: rgba(var(--arc-rgb), 0.5);
  box-shadow: 0 0 10px rgba(var(--arc-rgb), 0.25);
}
.worker-chip--disabled { opacity: 0.55; filter: grayscale(0.4); }
.worker-chip--add {
  border-style: dashed;
  color: var(--arc-hue);
  cursor: pointer;
}
.worker-chip--add:hover {
  background: rgba(var(--arc-rgb), 0.08);
  border-color: rgba(var(--arc-rgb), 0.45);
}
.worker-config {
  margin-top: 10px;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(var(--arc-rgb), 0.22);
  border-radius: 10px;
  box-shadow: 0 0 14px rgba(var(--arc-rgb), 0.1);
  animation: wc-rise 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes wc-rise {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.worker-config__title {
  font: 600 12px "Geist Mono", monospace;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--arc-hue); margin-bottom: 10px;
}
.worker-config--hire { border-style: dashed; }
.worker-config__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.worker-config__row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 12px; color: #cbd5e1; gap: 8px;
}
.worker-config__label { color: #9ca3af; font: 500 11px "Geist Mono", monospace; letter-spacing: 0.04em; }
.worker-config__row input[type="text"],
.worker-config__row select {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e5e7eb;
  padding: 4px 8px;
  border-radius: 5px;
  font: 500 12px "Geist", sans-serif;
  font-family: inherit;
  min-width: 0;
}
.worker-config__row input[type="text"]:focus,
.worker-config__row select:focus {
  outline: none;
  border-color: rgba(var(--arc-rgb), 0.55);
  box-shadow: 0 0 0 3px rgba(var(--arc-rgb), 0.12);
}
.worker-config__row input[type="checkbox"] { accent-color: var(--arc-hue); }
.worker-config__actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }

/* Radial menu items container (T2.1 context-aware) */
.radial-items { position: absolute; inset: 0; }

/* ══════════════════════════════════════════════════
   Tier 2.3 · Header indicators (queue / streak / thermal popover / offline)
   ══════════════════════════════════════════════════ */

.hud-queue, .hud-thermal {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #9ca3af;
  font: 500 11px "Geist Mono", monospace;
  cursor: pointer; font-family: inherit;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.hud-queue:hover, .hud-thermal:hover {
  background: rgba(var(--arc-rgb), 0.08);
  border-color: rgba(var(--arc-rgb), 0.3);
  color: #e5e7eb;
}
.hud-queue__icon { color: var(--arc-hue); }
.hud-queue__n { font-weight: 600; color: #e5e7eb; }
.hud-streak {
  display: inline-flex; align-items: center; gap: 4px;
  font: 500 11px "Geist Mono", monospace; color: #fbbf24;
}
.hud-streak__icon { filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.5)); }

.hud-popover {
  position: fixed; top: 60px; right: 14px;
  width: 280px;
  background: rgba(17, 24, 39, 0.98);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(var(--arc-rgb), 0.12);
  z-index: 200;
  display: none;
  color: #cbd5e1; font-size: 12.5px;
}
.hud-popover.is-open { display: block; }
.hud-popover__head {
  font: 600 10px "Geist", sans-serif;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--arc-hue); margin-bottom: 8px;
}
.hud-popover__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 12.5px;
}
.hud-popover__row:last-child { border-bottom: 0; }
.hud-popover__row b { color: #e5e7eb; }
.hud-popover__hint {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  font: italic 11px "Geist", sans-serif; color: #6b7280; line-height: 1.5;
}

/* Journey 9 · entity thermal zone colour coding + network sub-section */
.hud-thermal[data-zone="cool"]     { border-color: rgba(var(--arc-rgb), 0.20); }
.hud-thermal[data-zone="warm"]     { border-color: rgba(251, 191, 36, 0.45); color: #fbbf24; }
.hud-thermal[data-zone="warm"] .flame     { filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6)); }
.hud-thermal[data-zone="hot"]      { border-color: rgba(239, 68, 68, 0.55); color: #f87171; }
.hud-thermal[data-zone="hot"] .flame       { filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.7)); }
.hud-thermal[data-zone="critical"] { border-color: #ef4444; color: #fff; background: rgba(239, 68, 68, 0.14); }
.hud-thermal[data-zone="critical"] .flame  { animation: hud-critical-pulse 1.5s ease-in-out infinite; }
@keyframes hud-critical-pulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.6)); }
  50%      { filter: drop-shadow(0 0 16px rgba(239, 68, 68, 1)); }
}

.hud-popover__section {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.hud-popover__section-head {
  font: 600 10px "Geist",sans-serif; letter-spacing: 0.14em;
  text-transform: uppercase; color: #6b7280;
  display: flex; justify-content: space-between; align-items: center;
}
.hud-popover__section-meta { color: #9ca3af; font-weight: 500; }
.hud-popover__section-hint {
  font: italic 10.5px "Geist",sans-serif; color: #6b7280; line-height: 1.5;
  margin-top: 4px;
}

/* Queue popover list */
.hud-popover--queue { width: 320px; }
.hud-queue-list { display: flex; flex-direction: column; gap: 4px; }
.hud-queue-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 5px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
}
.hud-queue-row.is-current {
  background: rgba(var(--arc-rgb), 0.06);
  border-color: rgba(var(--arc-rgb), 0.25);
}
.hud-queue-row__badge {
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05); color: #9ca3af;
  font: 600 10px "Geist Mono",monospace; flex-shrink: 0;
}
.hud-queue-row__id { font: 600 11px "Geist Mono",monospace; color: #e5e7eb; }
.hud-queue-row__meta { font: 500 10px "Geist Mono",monospace; color: #9ca3af; }
.hud-queue-row__this {
  margin-left: auto;
  font: 600 9px "Geist Mono",monospace; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--arc-hue);
  padding: 2px 6px; border-radius: 3px;
  background: rgba(var(--arc-rgb), 0.10);
}

.hud-offline-banner {
  position: fixed; top: 54px; left: 50%; transform: translateX(-50%);
  padding: 8px 16px; border-radius: 999px;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.35);
  color: #fbbf24;
  font: 500 12px "Geist Mono", monospace;
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.2);
  z-index: 50;
  display: flex; align-items: center; gap: 10px;
}
.hud-offline-banner__dismiss {
  background: transparent; border: 0; color: #fbbf24;
  cursor: pointer; font-size: 16px; padding: 0;
}
body.is-offline .hud-offline-banner { display: flex !important; }
body.is-offline .hud-arc { border-left-color: #fbbf24 !important; }

/* API status chip — green dot when online, slate when offline */
.hud-api {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font: 500 10px "Geist Mono", monospace;
  letter-spacing: 0.06em;
  color: #9ca3af;
  cursor: pointer; font-family: inherit;
}
.hud-api__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #64748b; box-shadow: none;
  transition: background 200ms, box-shadow 200ms;
}
.hud-api.is-online .hud-api__dot { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
.hud-api.is-online { color: #22c55e; border-color: rgba(34, 197, 94, 0.35); }

/* ══════════════════════════════════════════════════
   Tier 2.4 · Zone grouping on chamber run-card view
   ══════════════════════════════════════════════════ */

.zone-group { margin: 10px 0 14px; }
.zone-group__head {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px;
  font: 600 10px "Geist", sans-serif;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: 4px;
}
.zone-group__label { color: #cbd5e1; }
.zone-group__count {
  padding: 1px 7px; border-radius: 999px;
  background: rgba(var(--arc-rgb), 0.1);
  color: var(--arc-hue);
  border: 1px solid rgba(var(--arc-rgb), 0.3);
  font-size: 10px;
}
.zone-group__dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 6px currentColor; }
.zone-group__dot--awaiting { background: #fbbf24; color: #fbbf24; }
.zone-group__dot--running  { background: #fbbf24; color: #fbbf24; animation: run-pulse 1.3s infinite; }
.zone-group__dot--blocked  { background: #64748b; color: #64748b; box-shadow: none; }
.zone-group__dot--queued   { background: var(--arc-hue); color: var(--arc-hue); }
.zone-group__dot--ready    { background: #22c55e; color: #22c55e; }

.zone-group__batch {
  margin-left: auto;
  padding: 4px 10px; border-radius: 6px;
  background: rgba(var(--arc-rgb), 0.1);
  border: 1px solid rgba(var(--arc-rgb), 0.35);
  color: var(--arc-hue);
  font: 600 10px "Geist", sans-serif;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
  transition: background 140ms, box-shadow 140ms;
}
.zone-group__batch:hover { background: rgba(var(--arc-rgb), 0.18); box-shadow: 0 0 10px rgba(var(--arc-rgb), 0.3); }
.zone-group[data-zone="awaiting"] .zone-group__batch {
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.35);
  color: #fbbf24;
}
.zone-group[data-zone="awaiting"] .zone-group__batch:hover { background: rgba(251, 191, 36, 0.18); box-shadow: 0 0 10px rgba(251, 191, 36, 0.3); }

/* ══════════════════════════════════════════════════
   Tier 2.5 · Governance via assistant + panel (stub inline)
   ══════════════════════════════════════════════════ */

.asst-gov-card {
  padding: 10px 12px; margin: 4px 0 8px;
  background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 10px;
}
.asst-gov-card b { color: #a855f7; font-weight: 600; }
.asst-gov-card .review-btn {
  display: inline-block; margin-top: 8px;
  padding: 5px 10px; border-radius: 6px;
  background: rgba(168, 85, 247, 0.2); color: #a855f7;
  font: 600 10px "Geist", sans-serif;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid rgba(168, 85, 247, 0.45);
  cursor: pointer;
}

.gov-panel {
  position: fixed; top: 72px; right: 20px;
  width: 420px; max-height: 70vh; overflow-y: auto;
  background: rgba(17, 24, 39, 0.98);
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: 12px;
  box-shadow: 0 24px 50px rgba(0,0,0,0.55), 0 0 32px rgba(168, 85, 247, 0.2);
  padding: 16px 18px; z-index: 81;
  display: none;
}
.gov-panel.is-open { display: block; }
.gov-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  font: 600 10px "Geist", sans-serif;
  letter-spacing: 0.14em; text-transform: uppercase; color: #a855f7;
  margin-bottom: 10px;
}
.gov-row {
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 12px; color: #cbd5e1;
}
.gov-row__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.gov-row__sev {
  font: 600 9px "Geist", sans-serif; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 3px;
}
.gov-row__sev--critical { background: rgba(239, 68, 68, 0.15); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.35); }
.gov-row__sev--warn     { background: rgba(251, 191, 36, 0.15); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.35); }
.gov-row__override {
  display: none;
  margin-top: 8px; padding: 8px;
  background: rgba(0,0,0,0.2);
  border-radius: 6px;
}
.gov-row.is-open .gov-row__override { display: block; }
.gov-row__override textarea {
  width: 100%; min-height: 50px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 5px;
  color: #e5e7eb; font: 400 12px "Geist", sans-serif;
  padding: 6px 8px; font-family: inherit;
}
.gov-row__actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 6px; }
.gov-row__actions button {
  padding: 5px 10px; border-radius: 5px;
  font: 600 10px "Geist", sans-serif; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03); color: #9ca3af;
}
.gov-row__actions .override { background: rgba(168, 85, 247, 0.2); color: #a855f7; border-color: rgba(168, 85, 247, 0.45); }

/* ══════════════════════════════════════════════════
   Tranche 7 · Auxiliary surfaces (Docs / Account / Hosting / Admin)
   ══════════════════════════════════════════════════ */

/* Fork menu divider (Hosting/Admin separated from primary 4) */
.fork-menu__div {
  height: 1px; margin: 6px 4px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
}

/* Docs surface */
.docs-layout { display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: start; margin-top: 6px; }
.docs-nav { border-right: 1px solid rgba(255,255,255,0.04); padding-right: 14px; overflow: auto; position: sticky; top: 0; }
.docs-nav__section { font: 600 10px "Geist",sans-serif; letter-spacing: 0.14em; color: #6b7280; text-transform: uppercase; margin: 12px 0 4px; }
.docs-nav__section:first-child { margin-top: 0; }
.docs-nav__item { padding: 5px 8px; font-size: 12.5px; color: #cbd5e1; border-radius: 5px; cursor: pointer; transition: background 120ms, color 120ms; }
.docs-nav__item:hover { background: rgba(255,255,255,0.04); color: #e5e7eb; }
.docs-nav__item.is-active { background: rgba(var(--arc-rgb), 0.12); color: var(--arc-hue); }
.docs-nav__item--loading { color: #6b7280; font-style: italic; cursor: default; }
.docs-nav__item--empty { color: #4b5563; font-style: italic; cursor: default; }
.docs-nav__tag {
  font: 600 8px "Geist Mono", monospace; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 1px 5px; border-radius: 3px; margin-left: 6px;
  background: rgba(251,191,36,0.1); color: #fbbf24; border: 1px solid rgba(251,191,36,0.2);
  vertical-align: middle;
}
.spec-content { font: 13px/1.65 "Geist", sans-serif; }
.spec-content h3 { font: 600 18px "Geist", sans-serif; margin: 20px 0 8px; color: #e5e7eb; }
.spec-content h4 { font: 600 15px "Geist", sans-serif; margin: 16px 0 6px; color: #d1d5db; }
.spec-content h5 { font: 600 13px "Geist", sans-serif; margin: 12px 0 4px; color: #cbd5e1; }
.doc-editor {
  width: 100%; padding: 12px 14px;
  background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; color: #cbd5e1;
  font: 13px/1.6 "Geist Mono", monospace;
  resize: vertical; min-height: 200px;
  transition: border-color 0.2s;
}
.doc-editor:focus { outline: none; border-color: rgba(var(--arc-rgb), 0.4); }
.doc-proposal-banner {
  padding: 12px 14px; border-radius: 10px; margin-bottom: 14px;
  background: rgba(251,191,36,0.04);
  border: 1px solid rgba(251,191,36,0.2);
}
.doc-proposal-banner__head {
  font: 600 12px "Geist", sans-serif; color: #e5e7eb; margin-bottom: 4px;
}
.doc-proposal-banner__rationale {
  font: 11px "Geist", sans-serif; color: #9ca3af; font-style: italic;
}
.doc-proposal-diff__body {
  margin-top: 8px; padding: 10px 12px; border-radius: 6px;
  background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.06);
  font: 12px/1.5 "Geist", sans-serif; color: #cbd5e1;
  max-height: 300px; overflow-y: auto;
}
.docs-body { overflow: auto; padding-right: 8px; min-height: 200px; }
.docs-body h3 { font: 600 20px "Geist",sans-serif; margin: 0 0 6px; letter-spacing: -0.01em; }
.docs-body h4 { font: 600 14px "Geist",sans-serif; color: #e5e7eb; margin: 16px 0 6px; }
.docs-body p { font-size: 12.5px; color: #cbd5e1; line-height: 1.6; margin: 0 0 10px; }
.docs-body pre { font-family: "Geist Mono",monospace; font-size: 11.5px; background: rgba(0,0,0,0.3); padding: 8px 10px; border-radius: 6px; color: #cbd5e1; border: 1px solid rgba(255,255,255,0.04); }

/* Account / Hosting cards */
.account-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  max-width: 640px;
}
.account-row { display: flex; align-items: center; gap: 12px; }
.account-row__main { flex: 1; color: #cbd5e1; font-size: 13px; }
.account-row__meta { color: #6b7280; font: 500 11px "Geist Mono",monospace; }
.account-avatar {
  width: 32px; height: 32px; border-radius: 8px;
  background: radial-gradient(circle at 32% 30%, rgba(var(--arc-rgb), 0.4), rgba(var(--arc-rgb), 0.14));
  border: 1px solid rgba(var(--arc-rgb), 0.35);
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 14px "Geist",sans-serif; color: #e5e7eb;
}
.account-card b { color: var(--arc-hue); }

/* Phase 4 · P4.1 — automation mode segmented control (launch + WO detail) */
.auto-mode-seg {
  display: flex; gap: 6px; margin-top: 6px;
}
.auto-mode-seg__btn {
  flex: 1; padding: 10px 12px; border-radius: 8px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.06);
  color: #cbd5e1; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; gap: 3px;
  text-align: left; transition: all 140ms;
}
.auto-mode-seg__btn:hover { border-color: rgba(var(--arc-rgb), 0.35); }
.auto-mode-seg__btn.is-active {
  background: rgba(var(--arc-rgb), 0.10);
  border-color: rgba(var(--arc-rgb), 0.45);
  box-shadow: 0 0 12px rgba(var(--arc-rgb), 0.20);
}
.auto-mode-seg__title { font: 600 12.5px "Geist",sans-serif; color: #e5e7eb; }
.auto-mode-seg__btn.is-active .auto-mode-seg__title { color: var(--arc-hue); }
.auto-mode-seg__sub { font: 400 11px "Geist",sans-serif; color: #9ca3af; }

/* Compact version for WO-detail header */
.wo-automation-seg {
  display: flex; gap: 2px; padding: 2px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
}
.wo-automation-seg__btn {
  padding: 4px 10px; border-radius: 4px;
  background: transparent; border: 0; cursor: pointer;
  color: #9ca3af;
  font: 600 10px "Geist",sans-serif;
  letter-spacing: 0.08em; text-transform: uppercase;
  transition: all 120ms;
}
.wo-automation-seg__btn:hover { color: #e5e7eb; }
.wo-automation-seg__btn.is-active {
  color: var(--arc-hue);
  background: rgba(var(--arc-rgb), 0.14);
  box-shadow: 0 0 8px rgba(var(--arc-rgb), 0.25);
}

/* Journey 10 — account exit actions row */
.account-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.account-actions .btn { flex-shrink: 0; }

/* Ensemble satellite row (reused on Account Tier card) */
.ensemble-sat-row { display: inline-flex; gap: 6px; align-items: center; }
.ens-sat {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--sc, rgba(255,255,255,0.15));
  box-shadow: 0 0 10px 1px var(--sc, transparent);
  transition: filter 220ms;
}
.ens-sat[data-role="chronicler"] { --sc: #fbbf24; }
.ens-sat[data-role="observer"]   { --sc: #22c55e; }
.ens-sat[data-role="strategist"] { --sc: #3b82f6; }
.ens-sat[data-role="optimiser"]  { --sc: #a855f7; }
.ens-sat.dormant { background: rgba(100,116,139,0.3); box-shadow: none; filter: grayscale(0.7); opacity: 0.4; }

/* Hosting mode pill */
.hosting-mode {
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  color: #9ca3af;
  font: 500 12px "Geist Mono",monospace;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 140ms, border-color 140ms;
}
.hosting-mode:hover { border-color: rgba(var(--arc-rgb), 0.35); color: #e5e7eb; }
.hosting-mode.is-active {
  background: rgba(var(--arc-rgb), 0.1);
  border-color: rgba(var(--arc-rgb), 0.4);
  color: var(--arc-hue);
  font-weight: 600;
}

/* Admin surface */
.admin-tabrow {
  display: flex; gap: 2px; padding: 3px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 8px; width: fit-content; margin-bottom: 18px;
}
.admin-tab {
  padding: 6px 12px; border-radius: 5px;
  background: transparent; border: 0;
  font: 500 12px "Geist",sans-serif;
  color: #9ca3af; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background 120ms, color 120ms, box-shadow 120ms;
  font-family: inherit;
}
.admin-tab:hover { color: #e5e7eb; }
.admin-tab.is-active {
  background: rgba(var(--arc-rgb), 0.14);
  color: var(--arc-hue);
  box-shadow: 0 0 8px 1px rgba(var(--arc-rgb), 0.3);
}
.admin-chip {
  font: 600 8px "Geist Mono",monospace;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 1px 4px; border-radius: 3px;
  background: rgba(var(--arc-rgb), 0.14); color: var(--arc-hue);
  border: 1px solid rgba(var(--arc-rgb), 0.3);
}
.admin-chip--new {
  background: rgba(34,197,94, 0.14); color: #22c55e;
  border-color: rgba(34,197,94, 0.35);
}
.admin-chip--planned {
  background: rgba(251,191,36, 0.12); color: #fbbf24;
  border-color: rgba(251,191,36, 0.30);
}

/* Audit table */
.audit-table { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 10px; overflow: hidden; }
.audit-row {
  padding: 10px 14px;
  display: grid; grid-template-columns: 90px 1fr 90px 180px; gap: 12px;
  font-size: 12px; color: #cbd5e1;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.audit-row--head {
  background: rgba(255,255,255,0.02);
  font: 600 10px "Geist Mono",monospace;
  letter-spacing: 0.14em; color: #9ca3af; text-transform: uppercase;
  border-top: 0;
}
.mono-muted { font-family: "Geist Mono",monospace; color: #6b7280; font-size: 11px; }
.mono-arc { font-family: "Geist Mono",monospace; color: var(--arc-hue); font-size: 11px; }

/* People tab */
.admin-people { margin-top: 6px; }
.people-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.people-row {
  display: grid; grid-template-columns: 32px 1fr auto auto; gap: 12px; align-items: center;
  padding: 10px 12px;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 10px;
}
.people-row__avatar {
  width: 28px; height: 28px; border-radius: 6px;
  background: rgba(var(--arc-rgb), 0.12);
  border: 1px solid rgba(var(--arc-rgb), 0.35);
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 12px "Geist",sans-serif; color: var(--arc-hue);
}
.people-row__main { font-size: 13px; color: #cbd5e1; }
.people-row__pill {
  font: 600 10px "Geist Mono",monospace; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(var(--arc-rgb), 0.12); color: var(--arc-hue);
  border: 1px solid rgba(var(--arc-rgb), 0.3);
}
.people-row__role { color: #9ca3af; font-size: 12px; }

/* Tier config matrix */
.tier-matrix {
  display: grid;
  grid-template-columns: 140px repeat(6, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  overflow: hidden;
}
.tier-matrix--caps .tier-matrix__role-hdr--cap { font-size: 11px; }
.tier-matrix__corner {
  background: rgba(15,20,32,0.8);
  padding: 8px 10px;
}
.tier-matrix__tier-hdr {
  background: rgba(15,20,32,0.8);
  padding: 8px 4px;
  font: 600 10px "Geist Mono", monospace;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #9ca3af; text-align: center;
}
.tier-matrix__role-hdr {
  background: rgba(15,20,32,0.6);
  padding: 8px 10px;
  font: 500 12px "Geist", sans-serif;
  color: #d1d5db;
  display: flex; align-items: center; gap: 6px;
  border-top: 1px solid rgba(255,255,255,0.03);
}
.tier-matrix__role-icon { font-size: 13px; opacity: 0.7; }
.tier-matrix__cell {
  background: rgba(15,20,32,0.4);
  padding: 6px 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-top: 1px solid rgba(255,255,255,0.03);
  transition: background 0.15s;
}
.tier-matrix__cell:hover { background: rgba(255,255,255,0.04); }
.tier-matrix__dot {
  width: 10px; height: 10px; border-radius: 50%;
  transition: background 0.2s, box-shadow 0.2s;
}
.tier-matrix__level {
  font: 600 9px "Geist Mono", monospace;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.tier-matrix__check {
  font: 600 14px "Geist", sans-serif;
}

/* ══════════════════════════════════════════════════
   CAPABILITY CONFIG — admin tab (custody spectrum)
   ══════════════════════════════════════════════════ */

.cap-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cap-row {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 14px 18px;
}

.cap-row__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.cap-row__icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

.cap-row__title { flex: 1; min-width: 0; }

.cap-row__name {
  display: block;
  font: 600 13px "Geist", sans-serif;
  color: #e2e8f0;
}

.cap-row__desc {
  display: block;
  font: 11px "Geist", sans-serif;
  color: #6b7280;
  margin-top: 1px;
}

.cap-row__custody {
  font: 600 10px "Geist Mono", monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* ── Spectrum (3-node horizontal) ── */

.cap-row__spectrum {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.cap-spectrum-arrow {
  display: flex;
  align-items: center;
  padding: 8px 4px 0;
  color: rgba(255,255,255,0.1);
  font-size: 14px;
  flex-shrink: 0;
}

.cap-spectrum-node {
  flex: 1;
  text-align: center;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.cap-spectrum-node:hover:not(.cap-spectrum-node--active) {
  background: rgba(255,255,255,0.04);
}
.cap-spectrum-node--active {
  background: rgba(255,255,255,0.04);
}

.cap-spectrum-node__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0 auto 6px;
  transition: all 0.2s;
}

.cap-spectrum-node__label {
  font: 500 11.5px "Geist Mono", monospace;
  color: #6b7280;
  margin-bottom: 3px;
  text-transform: capitalize;
}

.cap-spectrum-node__desc {
  font: 10.5px "Geist", sans-serif;
  color: #4b5563;
  line-height: 1.4;
}

.cap-row__hint {
  font: 10.5px "Geist Mono", monospace;
  color: #4b5563;
  margin-top: 8px;
  text-align: center;
  font-style: italic;
}

/* ── Collection boundary chips ── */

.collection-chip {
  font: 500 11.5px "Geist Mono", monospace;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.06);
}
.collection-chip--server {
  background: rgba(34,197,94,0.06);
  color: #86efac;
  border-color: rgba(34,197,94,0.15);
}
.collection-chip--client {
  background: rgba(245,158,11,0.06);
  color: #fcd34d;
  border-color: rgba(245,158,11,0.15);
}

/* ══════════════════════════════════════════════════
   R16 — DEP MODE overlay toggle (spine header button + overlay dimming)
   ══════════════════════════════════════════════════ */

.spine__dep-toggle {
  position: absolute; top: 4px; right: 40px;
  width: 22px; height: 22px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #9ca3af;
  font: 600 11px "Geist Mono",monospace; line-height: 1;
  cursor: pointer; padding: 0;
  transition: background 140ms, border-color 140ms, color 140ms, box-shadow 140ms;
  z-index: 2;
}
.spine__dep-toggle:hover {
  background: rgba(255,255,255,0.08);
  color: #e5e7eb;
}
.spine__dep-toggle.is-active {
  background: rgba(var(--arc-rgb), 0.16);
  border-color: rgba(var(--arc-rgb), 0.4);
  color: var(--arc-hue);
  box-shadow: 0 0 8px rgba(var(--arc-rgb), 0.3);
}

body.is-dep-mode .spine { box-shadow: inset 0 0 80px rgba(var(--arc-rgb), 0.05); }
body.is-dep-mode .spine__plus { opacity: 0.5; }

/* ══════════════════════════════════════════════════
   Portal-entry stage (overlays workshop when no full session — R18 / R19)
   ══════════════════════════════════════════════════ */

.portal-stage {
  position: fixed; inset: 0;
  display: none;
  z-index: 9997;
  /* flex-start + margin:auto on the card is the robust recipe that both
     centres short content AND keeps a long card fully scrollable — plain
     align-items:center clips the top when content > viewport. */
  align-items: flex-start; justify-content: center;
  padding: 24px;
  background:
    radial-gradient(ellipse at 25% 25%, rgba(var(--arc-rgb), 0.12), transparent 60%),
    radial-gradient(ellipse at 75% 75%, rgba(var(--arc-rgb), 0.08), transparent 65%),
    #0a0e1a;
  overflow-y: auto; overflow-x: hidden;
}
.portal-stage.is-open { display: flex; }
.pe-scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.3); pointer-events: none; }

.pe-card {
  position: relative; z-index: 2;
  max-width: 480px; width: 100%;
  margin: auto 0;  /* centres vertically when short; flush-top when tall */
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(var(--arc-rgb), 0.1),
    0 20px 50px rgba(0,0,0,0.5),
    0 0 40px rgba(var(--arc-rgb), 0.14),
    inset 0 1px 0 rgba(255,255,255,0.05);
  padding: 30px 28px;
  color: #e5e7eb;
  animation: pe-card-rise 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes pe-card-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pe-entity { max-width: 560px; }

.pe-logo {
  width: 56px; height: 56px; margin: 0 auto 16px;
  border-radius: 14px;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,0.2), rgba(var(--arc-rgb), 0.5) 50%, rgba(var(--arc-rgb), 0.1));
  border: 1px solid rgba(var(--arc-rgb), 0.35);
  box-shadow: 0 0 32px rgba(var(--arc-rgb), 0.3), inset 0 0 14px rgba(var(--arc-rgb), 0.2);
  display: flex; align-items: center; justify-content: center;
  font: 600 20px "Geist Mono",monospace;
  color: #e5e7eb;
}
.pe-logo--sm { width: 44px; height: 44px; margin-bottom: 12px; font-size: 16px; }

.pe-title { font: 300 30px "Geist",sans-serif; margin: 0 0 6px; letter-spacing: -0.01em; text-align: center; }
.pe-subtitle { color: #9ca3af; font-size: 13px; text-align: center; margin: 0 0 22px; }

.pe-input {
  width: 100%; padding: 12px 14px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: #e5e7eb; font: 400 14px "Geist",sans-serif;
  font-family: inherit;
  margin-bottom: 10px;
}
.pe-input:focus { outline: none; border-color: rgba(var(--arc-rgb), 0.55); box-shadow: 0 0 0 3px rgba(var(--arc-rgb), 0.14); }

.pe-btn {
  width: 100%; padding: 12px 16px; border-radius: 8px;
  border: 1px solid rgba(var(--arc-rgb), 0.45);
  background: linear-gradient(135deg, rgba(var(--arc-rgb), 0.35), rgba(var(--arc-rgb), 0.2));
  color: #e5e7eb; font: 600 13px "Geist",sans-serif; letter-spacing: 0.02em;
  box-shadow: 0 0 16px rgba(var(--arc-rgb), 0.22), inset 0 1px 0 rgba(255,255,255,0.1);
  cursor: pointer; font-family: inherit;
  transition: box-shadow 140ms, transform 140ms;
}
.pe-btn:hover { box-shadow: 0 0 26px rgba(var(--arc-rgb), 0.4); transform: translateY(-1px); }
.pe-btn--ghost {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
  color: #9ca3af;
  box-shadow: none;
}
.pe-btn--ghost:hover { background: rgba(255,255,255,0.08); color: #e5e7eb; transform: none; box-shadow: none; }

.pe-footer-line { color: #6b7280; font-size: 11px; text-align: center; margin: 14px 0 0; }

.pe-breadcrumb { font: 500 11px "Geist Mono",monospace; letter-spacing: 0.06em; color: #6b7280; margin-bottom: 14px; display: flex; gap: 8px; align-items: center; justify-content: center; }
.pe-crumb { color: #9ca3af; cursor: pointer; }
.pe-crumb:hover { color: var(--arc-hue); }
.pe-crumb-sep { opacity: 0.4; }
.pe-crumb-current { color: #e5e7eb; font-weight: 500; }

.pe-entity-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 14px; }
.pe-entity-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 12px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.05);
  cursor: pointer; text-align: left;
  font-family: inherit;
  transition: border-color 140ms, box-shadow 140ms, transform 140ms;
}
.pe-entity-row:hover {
  border-color: rgba(var(--arc-rgb), 0.35);
  box-shadow: 0 0 0 1px rgba(var(--arc-rgb), 0.22), 0 0 22px rgba(var(--arc-rgb), 0.22);
  transform: translateY(-1px);
}
.pe-entity-avatar {
  width: 44px; height: 44px; border-radius: 10px; flex: 0 0 44px;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,0.14), rgba(var(--arc-rgb), 0.42) 50%, rgba(var(--arc-rgb), 0.14));
  border: 1px solid rgba(var(--arc-rgb), 0.35);
  box-shadow: 0 0 14px rgba(var(--arc-rgb), 0.22), inset 0 0 10px rgba(var(--arc-rgb), 0.15);
  display: flex; align-items: center; justify-content: center;
  color: #e5e7eb; font: 600 18px "Geist",sans-serif;
}
.pe-entity-avatar--create {
  background: rgba(var(--arc-rgb), 0.08);
  border-style: dashed; color: var(--arc-hue);
}
.pe-entity-main { flex: 1; min-width: 0; }
.pe-entity-name { font: 600 15px "Geist",sans-serif; color: #e5e7eb; }
.pe-entity-desc { font-size: 12.5px; color: #9ca3af; line-height: 1.5; margin-top: 2px; }
.pe-entity-meta { font: 500 11px "Geist Mono",monospace; color: #6b7280; margin-top: 4px; }
.pe-chip {
  font: 600 10px "Geist Mono",monospace;
  padding: 1px 6px; border-radius: 3px;
  background: rgba(var(--arc-rgb), 0.14); color: var(--arc-hue);
  border: 1px solid rgba(var(--arc-rgb), 0.3);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.pe-entity-row--create { border-style: dashed; }
.pe-footer-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; }
.pe-footer-row__left { display: flex; gap: 8px; }
.pe-footer-row .pe-btn--ghost { width: auto; padding: 7px 14px; font-size: 11px; }

/* DS6 Tranche 7 — arc-tint cycle (DS5 port). Transitions the arc variables
   on the 600ms cubic-bezier when body[data-arc] changes between reliability,
   velocity and delight. @property lets the custom properties animate. */
@property --arc-hue { syntax: '<color>'; inherits: true; initial-value: #22d3ee; }
@property --arc-rgb { syntax: '*'; inherits: true; initial-value: 34, 211, 238; }
body { transition: --arc-hue 600ms cubic-bezier(0.2, 0.8, 0.2, 1),
                     --arc-rgb 600ms cubic-bezier(0.2, 0.8, 0.2, 1); }
body[data-arc="reliability"] { --arc-hue: #22d3ee; --arc-rgb: 34, 211, 238; }
body[data-arc="velocity"]    { --arc-hue: #f97316; --arc-rgb: 249, 115, 22; }
body[data-arc="delight"]     { --arc-hue: #e879f9; --arc-rgb: 232, 121, 249; }

/* DS5 port: ambient drifting orbs behind the portal content — the "breathing
   base" beneath the arc cycle. Permanent; never foreground. */
#portal-stage.is-open::before,
#portal-stage.is-open::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  pointer-events: none; z-index: 0;
  filter: blur(80px);
  opacity: 0.4;
  background: radial-gradient(circle, rgba(var(--arc-rgb), 0.35), transparent 70%);
  animation: portal-orb-drift 18s ease-in-out infinite;
  transition: background 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
#portal-stage.is-open::before { width: 380px; height: 380px; top: 10%; left: -5%; }
#portal-stage.is-open::after  { width: 320px; height: 320px; bottom: 8%; right: -4%; animation-delay: -9s; opacity: 0.3; }
@keyframes portal-orb-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(40px, -30px) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  #portal-stage.is-open::before, #portal-stage.is-open::after { animation: none; }
}

/* DS5 port: arc-change ripple — injected on each cycle tick. Scales + fades
   a radial from centre; mix-blend-mode: screen makes it feel like light,
   not colour. This is the DS5 "tidal" signature. */
.portal-arc-ripple {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(var(--arc-rgb), 0.28) 0%,
    rgba(var(--arc-rgb), 0.16) 28%,
    rgba(var(--arc-rgb), 0.08) 52%,
    rgba(var(--arc-rgb), 0.03) 72%,
    transparent 88%
  );
  opacity: 0;
  animation: portal-arc-ripple 3600ms cubic-bezier(0.38, 0, 0.32, 1) forwards;
  mix-blend-mode: screen; filter: blur(8px);
}
@keyframes portal-arc-ripple {
  0%   { opacity: 0;    transform: scale(0.55); }
  18%  { opacity: 0.55; }
  48%  { opacity: 1;    transform: scale(1.02); }
  72%  { opacity: 0.85; transform: scale(1.12); }
  100% { opacity: 0;    transform: scale(1.35); }
}
@media (prefers-reduced-motion: reduce) { .portal-arc-ripple { display: none; } }

/* Portal content sits above orbs + ripple. */
#portal-stage > .pe-card,
#portal-stage > .ep-card,
#portal-stage > .onb-stage,
#portal-stage > .pe-scrim { position: relative; z-index: 1; }

/* DS6 Phase 2 — WO construction loader (INTAKE run in progress) */
.construct-card {
  padding: 32px 28px 24px;
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
}
.construct-ring { width: 64px; height: 64px; position: relative; }
.construct-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.construct-ring__track {
  fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 3;
}
.construct-ring__arc {
  fill: none; stroke: var(--arc-hue); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 36 120;
  animation: construct-spin 1.2s linear infinite;
  filter: drop-shadow(0 0 6px rgba(var(--arc-rgb), 0.5));
}
@keyframes construct-spin {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -156; }
}
.construct-title {
  font: 500 14px "Geist",sans-serif; color: #e5e7eb;
  text-align: center;
}
.construct-steps {
  list-style: none; padding: 0; margin: 8px 0 0;
  display: flex; flex-direction: column; gap: 2px;
  align-self: center; width: fit-content;
}
.construct-steps li {
  position: relative; padding: 6px 0 6px 28px;
  font: 500 12.5px "Geist",sans-serif; color: #6b7280;
  transition: color 200ms;
}
.construct-steps li::before {
  content: '○'; position: absolute; left: 4px; top: 6px;
  font-family: "Geist Mono", monospace; font-size: 12px;
  color: #4b5563; transition: color 200ms, content 200ms;
}
.construct-steps li.is-active {
  color: var(--arc-hue); font-weight: 600;
  background: rgba(var(--arc-rgb), 0.06);
  border-radius: 5px;
}
.construct-steps li.is-active::before {
  content: '▸'; color: var(--arc-hue);
}
.construct-steps li.is-done { color: #22c55e; }
.construct-steps li.is-done::before { content: '✓'; color: #22c55e; }
.construct-foot {
  margin-top: 8px; display: flex; flex-direction: column;
  align-items: center; gap: 8px; width: 100%;
}
.construct-foot details {
  color: #9ca3af; font: 400 11px "Geist",sans-serif; text-align: center;
}
.construct-foot summary {
  cursor: pointer; color: var(--arc-hue); padding: 2px 0;
}
.construct-foot summary:hover { text-decoration: underline; }
.construct-foot details p { margin: 4px 0 0; line-height: 1.5; }
.construct-actions {
  display: flex; gap: 10px; align-items: center; justify-content: center;
  margin-top: 4px;
}

/* Energized "Enter stage" CTA — applied via .btn--energized class on the
   create-enter-stage button when the propose run completes. The button gets
   a gradient pulse, soft glow, and a sweeping spark effect via ::after.
   Communicates "the run finished, this is now alive — click here". */
.btn--energized {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg,
    rgba(96, 165, 250, 0.95),
    rgba(167, 139, 250, 0.95),
    rgba(96, 165, 250, 0.95)) !important;
  background-size: 200% 200% !important;
  border: 1px solid rgba(167, 139, 250, 0.85) !important;
  color: #fff !important;
  box-shadow:
    0 0 0 0 rgba(167, 139, 250, 0.7),
    0 0 24px rgba(96, 165, 250, 0.55),
    0 4px 18px rgba(0, 0, 0, 0.45) !important;
  animation:
    btn-energized-gradient 3s ease-in-out infinite,
    btn-energized-pulse 2s ease-in-out infinite;
  transition: transform 0.18s ease, filter 0.18s ease;
}
.btn--energized:hover {
  transform: translateY(-1px) scale(1.025);
  filter: brightness(1.12);
}
.btn--energized::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -40%;
  width: 35%;
  background: linear-gradient(110deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%);
  transform: skewX(-22deg);
  animation: btn-energized-spark 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes btn-energized-gradient {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes btn-energized-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(167, 139, 250, 0.6),
      0 0 24px rgba(96, 165, 250, 0.55),
      0 4px 18px rgba(0, 0, 0, 0.45);
  }
  50% {
    box-shadow:
      0 0 0 8px rgba(167, 139, 250, 0),
      0 0 36px rgba(96, 165, 250, 0.85),
      0 4px 18px rgba(0, 0, 0, 0.45);
  }
}
@keyframes btn-energized-spark {
  0%   { left: -40%; }
  60%  { left: 110%; }
  100% { left: 110%; }
}

/* Round 2 — construct-complete state (post-AI parse) */
.construct-ring.is-complete .construct-ring__arc {
  stroke: rgba(34, 211, 238, 0.85);
  animation: none;
  stroke-dasharray: 113;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 380ms ease, stroke 380ms ease;
}
.construct-summary {
  display: flex; flex-direction: column; gap: 8px;
  margin: 12px 16px 14px;
  padding: 12px 14px;
  background: rgba(34, 211, 238, 0.05);
  border: 1px solid rgba(34, 211, 238, 0.18);
  border-radius: 10px;
  text-align: center;
}
.construct-summary__title {
  font: 600 15px "Geist", sans-serif;
  color: #e5e7eb;
  line-height: 1.35;
}
.construct-summary__pills {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
}
.construct-summary__pills .pill {
  font-size: 11px; padding: 3px 9px; border-radius: 999px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10);
  color: #cbd5e1;
}
.construct-summary__pills .pill--lane-rapid    { color: #4ade80; border-color: rgba(74, 222, 128, 0.30); }
.construct-summary__pills .pill--lane-standard { color: #38bdf8; border-color: rgba(56, 189, 248, 0.30); }
.construct-summary__pills .pill--lane-deep     { color: #c084fc; border-color: rgba(192, 132, 252, 0.30); }
.construct-summary__pills .pill--blocker       { color: #f87171; border-color: rgba(248, 113, 113, 0.40); background: rgba(248, 113, 113, 0.08); }
.construct-summary__pills .pill--advisory      { color: #fbbf24; border-color: rgba(251, 191, 36, 0.30); background: rgba(251, 191, 36, 0.06); }
.construct-summary__hint {
  font-size: 11px; color: #94a3b8; line-height: 1.5;
}
.construct-summary__watch {
  margin-top: 8px;
  font-size: 11px; color: #67e8f9;
  font-style: italic;
  display: inline-flex; align-items: center; gap: 6px;
}
.construct-summary__watch::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: #67e8f9;
  animation: construct-watch-pulse 1.6s ease-in-out infinite;
}
@keyframes construct-watch-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

/* DS6 Phase 2 — review form (DS5 11-field WO form reshaped as tabs) */
.review-title-input {
  width: 100%; padding: 7px 10px; border-radius: 6px;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.08);
  color: #e5e7eb; font: 600 17px "Geist",sans-serif;
  font-family: inherit;
}
.review-title-input:focus {
  outline: none; border-color: rgba(var(--arc-rgb), 0.5);
  box-shadow: 0 0 0 2px rgba(var(--arc-rgb), 0.12);
}

/* Tabs */
.review-tabs {
  display: flex; gap: 2px; margin: 12px 0 10px;
  padding: 3px; background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
}
.review-tab {
  flex: 1; padding: 7px 12px; border-radius: 5px;
  border: 0; background: transparent;
  font: 600 11.5px "Geist Mono",monospace; letter-spacing: 0.08em;
  text-transform: uppercase; color: #9ca3af;
  cursor: pointer; font-family: inherit;
  transition: all 140ms;
}
.review-tab:hover { color: #e5e7eb; background: rgba(255,255,255,0.03); }
.review-tab.is-active {
  background: rgba(var(--arc-rgb), 0.12);
  color: var(--arc-hue);
  box-shadow: 0 0 10px rgba(var(--arc-rgb), 0.25);
}
/* CHECKPOINT_OPEN_QUESTIONS_DESIGN_LOCK — Questions tab state.
 * Advisory: subtle amber; blocker: red glow that pulses so it draws the eye. */
.review-tab--questions { display: inline-flex; align-items: center; gap: 6px; }
.review-tab--has-advisories {
  color: #fde68a;
  box-shadow: inset 0 0 0 1px rgba(253,224,71,0.25);
}
.review-tab--has-advisories.is-active {
  background: rgba(253,224,71,0.10);
  color: #fde68a;
  box-shadow: 0 0 10px rgba(253,224,71,0.30);
}
.review-tab--has-blockers {
  color: #fca5a5;
  box-shadow: inset 0 0 0 1px rgba(248,113,113,0.35);
  animation: review-tab-blocker-pulse 2.6s ease-in-out infinite;
}
.review-tab--has-blockers.is-active {
  background: rgba(248,113,113,0.12);
  color: #fca5a5;
  box-shadow: 0 0 14px rgba(248,113,113,0.40);
  animation: none;
}
@keyframes review-tab-blocker-pulse {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(248,113,113,0.35); }
  50%      { box-shadow: inset 0 0 0 1px rgba(248,113,113,0.55), 0 0 10px rgba(248,113,113,0.30); }
}
.review-tab__qbadge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: rgba(253,224,71,0.18);
  color: #fde68a; font: 700 10px "Geist Mono",monospace; letter-spacing: 0;
}
.review-tab__qbadge--blocker { background: rgba(248,113,113,0.22); color: #fca5a5; }

/* Summary banner: compact replacement for the old full-list banner. */
.review-banner--qsummary { padding: 8px 10px; }
.review-banner--qsummary.has-blockers { border-color: rgba(248,113,113,0.35); background: rgba(248,113,113,0.05); }
.review-banner--qsummary.has-blockers .review-banner__label { color: #fca5a5; }
.review-banner__jump {
  display: inline-block; margin-left: 8px;
  background: none; border: 0; padding: 2px 6px;
  color: #60a5fa; font: 600 11px "Geist",sans-serif;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.review-banner__jump:hover { color: #93c5fd; }

/* Pane */
.review-pane { display: none; }
.review-pane.is-active { display: block; animation: review-pane-in 240ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes review-pane-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* Fields */
.review-field { margin-bottom: 12px; }
.review-field__label {
  display: block; font: 600 10px "Geist",sans-serif;
  letter-spacing: 0.14em; text-transform: uppercase; color: #9ca3af;
  margin-bottom: 4px;
}
.review-field__input {
  width: 100%; padding: 8px 10px; border-radius: 5px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.06);
  color: #e5e7eb; font: 400 13px "Geist",sans-serif;
  font-family: inherit; resize: vertical;
}
.review-field__input:focus {
  outline: none; border-color: rgba(var(--arc-rgb), 0.5);
  box-shadow: 0 0 0 2px rgba(var(--arc-rgb), 0.10);
}
.review-field__readonly {
  padding: 8px 10px; border-radius: 5px;
  background: rgba(0,0,0,0.12); border: 1px dashed rgba(255,255,255,0.06);
  color: #9ca3af; font: 400 12.5px "Geist",sans-serif;
  line-height: 1.5;
}
.review-field-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}

/* Criteria list */
.review-criteria-list {
  list-style: none; padding: 0; margin: 0 0 8px;
  counter-reset: critcount;
}
.review-criteria-list li {
  counter-increment: critcount;
  display: flex; gap: 8px; align-items: center; margin-bottom: 6px;
}
.review-criteria-list li::before {
  content: counter(critcount) ".";
  font: 500 11px "Geist Mono",monospace; color: #6b7280;
  flex-shrink: 0; min-width: 20px;
}
.review-crit-input {
  flex: 1; padding: 6px 10px; border-radius: 4px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.06);
  color: #e5e7eb; font: 400 12.5px "Geist",sans-serif;
  font-family: inherit;
}
.review-crit-input:focus {
  outline: none; border-color: rgba(var(--arc-rgb), 0.5);
}
.review-crit-rm {
  width: 24px; height: 24px; border-radius: 5px;
  background: transparent; border: 1px solid rgba(255,255,255,0.06);
  color: #6b7280; font-size: 14px; line-height: 1; cursor: pointer;
  font-family: inherit;
  transition: all 120ms;
}
.review-crit-rm:hover { color: #ef4444; border-color: rgba(239,68,68,0.4); }
.btn--small { padding: 5px 10px !important; font-size: 11px !important; }

/* Banners */
.review-banner {
  padding: 10px 12px; margin-bottom: 10px; border-radius: 6px;
  background: rgba(var(--arc-rgb), 0.05);
  border: 1px solid rgba(var(--arc-rgb), 0.20);
  font: 400 12px "Geist",sans-serif;
}
.review-banner--info { background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.3); }
.review-banner__label {
  font: 600 10px "Geist",sans-serif; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--arc-hue); margin-bottom: 5px;
}
.review-banner--info .review-banner__label { color: #60a5fa; }
.review-banner__body { color: #cbd5e1; line-height: 1.5; }
.review-banner__list { margin: 0; padding-left: 18px; color: #cbd5e1; line-height: 1.5; }
.review-banner__list li { margin: 2px 0; }
.review-banner__pill {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font: 600 9px "Geist",sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
  vertical-align: middle;
}
.review-banner__pill--blocker { background: rgba(248,113,113,0.15); color: #fca5a5; }
.review-banner__pill--advisory { background: rgba(253,224,71,0.12); color: #fde68a; }

/* DS6 Tranche 7 — Forante brand footer on landing */
.pe-brand-footer {
  margin-top: 18px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.04);
  display: flex; justify-content: center; gap: 6px;
  font: 500 10.5px "Geist Mono",monospace; color: #6b7280;
  letter-spacing: 0.06em;
}
.pe-brand-link {
  color: #9ca3af; text-decoration: none;
  transition: color 140ms, text-shadow 140ms;
}
.pe-brand-link:hover {
  color: var(--arc-hue);
  text-shadow: 0 0 6px rgba(var(--arc-rgb), 0.35);
}
.pe-brand-sep { color: #4b5563; }

/* Gear-icon manage trigger on entity/product rows */
.ep-row { position: relative; }
.ep-row__gear {
  position: absolute; top: 50%; right: 10px;
  transform: translateY(-50%);
  background: transparent; border: 0; cursor: pointer;
  width: 26px; height: 26px; border-radius: 6px;
  color: #6b7280; opacity: 0;
  font-size: 13px; line-height: 1;
  font-family: inherit;
  transition: all 140ms;
}
.ep-row:hover .ep-row__gear { opacity: 0.8; }
.ep-row__gear:hover {
  opacity: 1 !important; color: var(--arc-hue);
  background: rgba(var(--arc-rgb), 0.10);
}

/* Manage menu dropdown */
.ep-manage-menu {
  min-width: 180px;
  background: rgba(15, 20, 32, 0.98);
  backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(var(--arc-rgb), 0.25);
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(var(--arc-rgb), 0.12), 0 16px 48px rgba(0,0,0,0.5);
  padding: 6px;
  animation: ep-menu-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes ep-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ep-manage-menu__title {
  padding: 6px 10px 8px;
  font: 600 10px "Geist Mono",monospace;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--arc-hue);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 4px;
}
.ep-manage-menu__item {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: 6px;
  background: transparent; border: 0; cursor: pointer;
  color: #e5e7eb; font: 500 12px "Geist",sans-serif;
  font-family: inherit;
  transition: background 120ms, color 120ms;
}
.ep-manage-menu__item:hover { background: rgba(var(--arc-rgb), 0.08); color: var(--arc-hue); }
.ep-manage-menu__item--danger { color: #ef4444; }
.ep-manage-menu__item--danger:hover { background: rgba(239,68,68,0.10); color: #f87171; }

/* Platform Admin button styling (ghost + subtle glow) */
.pe-btn--admin { color: var(--arc-hue) !important; border-color: rgba(var(--arc-rgb), 0.25) !important; }
.pe-btn--admin:hover { background: rgba(var(--arc-rgb), 0.08) !important; }

/* Platform Admin panel — scaffold modal */
.ep-admin-panel { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; padding: 32px; }
.ep-admin-panel__scrim {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
}
.ep-admin-panel__card {
  position: relative; z-index: 1;
  max-width: 640px; width: 100%;
  background: rgba(15, 20, 32, 0.96);
  backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(var(--arc-rgb), 0.25);
  border-radius: 16px;
  padding: 22px 26px;
  box-shadow: 0 0 0 1px rgba(var(--arc-rgb), 0.12), 0 20px 60px rgba(0,0,0,0.55);
  animation: ep-menu-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ep-admin-panel__head {
  display: flex; gap: 12px; align-items: center;
  padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 14px;
}
.ep-admin-panel__close {
  width: auto !important; padding: 6px 10px !important; font-size: 12px !important;
}
.ep-admin-panel__body {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.ep-admin-tile {
  padding: 14px 16px; border-radius: 10px;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.06);
  text-align: left; cursor: pointer; font-family: inherit;
  transition: all 140ms;
}
.ep-admin-tile:hover {
  border-color: rgba(var(--arc-rgb), 0.4);
  background: rgba(var(--arc-rgb), 0.06);
  transform: translateY(-1px);
}
.ep-admin-tile__name { font: 600 13px "Geist",sans-serif; color: #e5e7eb; margin-bottom: 3px; }
.ep-admin-tile__desc { font: 400 11px "Geist",sans-serif; color: #9ca3af; line-height: 1.4; }
.ep-admin-panel__note {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.04);
  font: 400 11px "Geist",sans-serif; font-style: italic;
  color: #6b7280; text-align: center;
}

/* DS6 Tranche 7 — landing lede (blends tagline with product explanation) */
.pe-lede {
  color: #cbd5e1; font: 400 12.5px "Geist",sans-serif;
  text-align: center; line-height: 1.55; margin: 0 auto 20px;
  max-width: 420px;
}

/* Two-stage landing: welcome CTA screen uses centred column */
.pe-body--centered { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }

/* Sign-in form block — separates form area from landing intro (fixes spacing) */
.pe-form {
  margin-top: 8px; padding: 18px 20px;
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.pe-form-title {
  font: 600 14px "Geist",sans-serif; color: #e5e7eb;
  letter-spacing: -0.01em; margin-bottom: 0;
}
.pe-form-sub {
  font: 400 12px "Geist",sans-serif; color: #9ca3af;
  line-height: 1.5; margin-bottom: 8px;
}
.pe-form .pe-input-label {
  font: 600 10px "Geist",sans-serif; letter-spacing: 0.14em;
  text-transform: uppercase; color: #9ca3af;
  margin-bottom: 0;
}

/* DS6 Tranche 7 — entity/product picker (list + live preview) */
.ep-card {
  position: relative; z-index: 2;
  max-width: 820px; width: 100%;
  /* Give the card a consistent stature — fill most of the viewport but cap
     at 760px so it doesn't look comically tall on very large screens. */
  height: min(760px, calc(100vh - 48px));
  background: rgba(255,255,255,0.025);
  backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(var(--arc-rgb),0.12),
              0 20px 60px rgba(0,0,0,0.5),
              0 0 40px rgba(var(--arc-rgb),0.15),
              inset 0 1px 0 rgba(255,255,255,0.06);
  padding: 22px 26px;
  margin: auto 0;
  display: flex; flex-direction: column;
  gap: 14px;
  overflow: hidden;
}

/* Entity-admin variant — wider, taller, inner scroll region */
.ep-card--admin {
  max-width: 1280px;
  height: calc(100vh - 40px);
  padding: 20px 24px;
  gap: 0;
}
.ep-card--admin #entity-admin-mount {
  flex: 1 1 auto;
  min-height: 0;        /* critical: allows flex child to shrink + scroll */
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 10px;
  margin-right: -6px;   /* offset scrollbar gutter so content feels full-width */
}
.ep-card--admin .admin-tabrow {
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  padding-bottom: 4px;
  margin-bottom: 4px;
  scrollbar-width: thin;
}
.ep-card--admin .admin-tabrow::-webkit-scrollbar { height: 5px; }
.ep-card--admin .admin-tab {
  white-space: nowrap;
  flex-shrink: 0;
}
.ep-card--admin h1 {
  margin: 4px 0 4px;
}
.ep-card--admin .subtitle {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.55;
  max-width: 900px;
}
.ep-head { display: flex; gap: 14px; align-items: flex-start; flex-shrink: 0; }
.ep-head .pe-logo { flex-shrink: 0; margin: 0; }
.ep-head__main { flex: 1; min-width: 0; }
.ep-head .pe-title { text-align: left; margin: 0; font-size: 22px; }

/* Path breadcrumb — persistent across entity/product; reads as a journey */
.ep-path {
  display: flex; align-items: center; gap: 8px; margin-top: 4px;
  font: 500 11px "Geist",sans-serif; letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ep-path__step {
  background: transparent; border: 0; padding: 0; font: inherit;
  color: #9ca3af; cursor: default; font-family: inherit;
  transition: color 120ms;
}
.ep-path__step--current { color: var(--arc-hue); text-shadow: 0 0 8px rgba(var(--arc-rgb), 0.4); }
.ep-path__step--dim { opacity: 0.35; }
.ep-path__step--back { cursor: pointer; }
.ep-path__step--back:hover { color: var(--arc-hue); text-shadow: 0 0 6px rgba(var(--arc-rgb), 0.3); }
.ep-path__sep { color: #6b7280; opacity: 0.5; }

/* Body is the slide surface — card frame stays put */
.ep-body { display: flex; flex: 1; min-height: 0; }
.ep-body .ep-split { width: 100%; }

/* Rail-based carousel (Tranche 7 path metaphor) — both stations live in DOM;
   the track is the viewport, the rail translates to pan the camera. */
.ep-track {
  flex: 1; min-height: 0;
  overflow: hidden;
  position: relative;
}
.ep-rail {
  display: flex; width: 200%; height: 100%;
  transition: transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
.ep-track[data-stage="entities"] .ep-rail { transform: translateX(0%); }
.ep-track[data-stage="products"] .ep-rail { transform: translateX(-50%); }
.ep-station { width: 50%; flex-shrink: 0; padding-right: 2px; }
.ep-station .ep-split { height: 100%; }
@media (prefers-reduced-motion: reduce) {
  .ep-rail { transition: none; }
}

/* Split the list column into scrollable list + sticky create-footer */
.ep-list-col {
  display: flex; flex-direction: column;
  min-height: 0; min-width: 0;
  height: 100%;  /* pin to grid-row height so internal flex can divide it */
  gap: 6px;
}
.ep-list-col .ep-list { flex: 1 1 0; min-height: 0; padding-right: 6px; }
.ep-list-footer {
  flex-shrink: 0; padding-top: 6px;
  border-top: 1px dashed rgba(var(--arc-rgb), 0.15);
}
.ep-list-footer .ep-row { width: 100%; }

/* Split now uses 2-col with list-col scroll only; overall split fills station */
.ep-split { min-height: 0; }

.ep-split {
  display: grid; grid-template-columns: 1fr 1.05fr;
  grid-template-rows: minmax(0, 1fr);  /* bound the row so columns can clip + scroll */
  gap: 14px; flex: 1; min-height: 0;
  height: 100%;
}
.ep-list {
  display: flex; flex-direction: column; gap: 6px;
  overflow-y: auto; overflow-x: hidden;
  padding-right: 6px;
  min-height: 0;  /* allows flex child to shrink and scroll */
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--arc-rgb), 0.35) transparent;
}
.ep-list::-webkit-scrollbar { width: 6px; }
.ep-list::-webkit-scrollbar-track { background: transparent; }
.ep-list::-webkit-scrollbar-thumb {
  background: rgba(var(--arc-rgb), 0.25);
  border-radius: 999px;
  transition: background 200ms;
}
.ep-list::-webkit-scrollbar-thumb:hover { background: rgba(var(--arc-rgb), 0.5); }
.ep-preview::-webkit-scrollbar { width: 6px; }
.ep-preview::-webkit-scrollbar-track { background: transparent; }
.ep-preview::-webkit-scrollbar-thumb { background: rgba(var(--arc-rgb), 0.25); border-radius: 999px; }
.ep-preview { scrollbar-width: thin; scrollbar-color: rgba(var(--arc-rgb), 0.35) transparent; }

/* Slide transitions — entity → product slides left, back slides right */
@keyframes ep-slide-in-left  { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ep-slide-in-right { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: translateX(0); } }
.ep-slide-in-left  { animation: ep-slide-in-left  420ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.ep-slide-in-right { animation: ep-slide-in-right 420ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@media (prefers-reduced-motion: reduce) {
  .ep-slide-in-left, .ep-slide-in-right { animation: none; }
}

/* Compact entity chip in product-picker header — replaces ← Back + breadcrumb */
.ep-back-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 8px; border-radius: 999px;
  background: rgba(var(--arc-rgb), 0.08);
  border: 1px solid rgba(var(--arc-rgb), 0.25);
  color: #e5e7eb; cursor: pointer; font-family: inherit;
  transition: all 150ms;
  flex-shrink: 0;
}
.ep-back-chip:hover {
  background: rgba(var(--arc-rgb), 0.14);
  border-color: rgba(var(--arc-rgb), 0.5);
  transform: translateX(-2px);
}
.ep-back-chip__arrow { font: 600 12px "Geist Mono",monospace; color: var(--arc-hue); }
.ep-back-chip__avatar {
  width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font: 600 11px "Geist",sans-serif; color: var(--arc-hue);
  background: rgba(var(--arc-rgb), 0.18); border: 1px solid rgba(var(--arc-rgb), 0.3);
}
.ep-back-chip__label { font: 500 11px "Geist Mono",monospace; letter-spacing: 0.04em; color: #cbd5e1; }
.ep-row {
  display: flex; gap: 10px; align-items: center;
  padding: 9px 12px; border-radius: 8px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.05);
  cursor: pointer; transition: all 140ms;
  font-family: inherit; text-align: left;
  flex-shrink: 0;
}
.ep-row:hover, .ep-row.is-active {
  background: rgba(var(--arc-rgb),0.10);
  border-color: rgba(var(--arc-rgb),0.45);
  box-shadow: 0 0 10px rgba(var(--arc-rgb),0.20);
}
.ep-row--create { border-style: dashed; }
.ep-row__main { min-width: 0; flex: 1; }
.ep-row__name { font: 600 12.5px "Geist",sans-serif; color:#e5e7eb; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ep-row__meta { font: 500 10px "Geist Mono",monospace; color:#9ca3af; margin-top: 3px; letter-spacing: 0.04em; }

.ep-avatar {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font: 600 14px "Geist",sans-serif; color: var(--arc-hue);
  background: rgba(var(--arc-rgb),0.12); border: 1px solid rgba(var(--arc-rgb),0.3);
}
.ep-avatar--sm { width: 30px; height: 30px; font-size: 12px; }
.ep-avatar--create { background: rgba(var(--arc-rgb),0.06); border-style: dashed; }

/* Preview pane */
.ep-preview {
  padding: 16px 18px; border-radius: 12px;
  background: rgba(var(--arc-rgb),0.05);
  border: 1px solid rgba(var(--arc-rgb),0.25);
  display: flex; flex-direction: column;
  overflow-y: auto; min-height: 0;
}
.ep-preview__hdr { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.ep-preview__hdr .ep-avatar { width: 42px; height: 42px; font-size: 16px; }
.ep-preview__title { font: 600 15px "Geist",sans-serif; color:#e5e7eb; }
.ep-preview__stats { display: flex; gap: 8px; font: 500 10px "Geist Mono",monospace; color:#9ca3af; letter-spacing: 0.04em; margin-top: 4px; }
.ep-preview__stat { padding: 3px 8px; background: rgba(0,0,0,0.3); border-radius: 4px; text-transform: capitalize; }
.ep-preview__desc { color: #cbd5e1; font-size: 12px; margin: 4px 0 10px; line-height: 1.5; }
.ep-preview__prods-label { font: 600 9px "Geist Mono",monospace; color:#9ca3af; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 6px; }
.ep-preview__prods { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.ep-preview__prod {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px; color:#e5e7eb; padding: 8px 10px;
  background: rgba(0,0,0,0.22); border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.04);
  cursor: pointer; transition: all 120ms;
  font-family: inherit; text-align: left;
}
.ep-preview__prod:hover {
  background: rgba(var(--arc-rgb),0.10);
  border-color: rgba(var(--arc-rgb),0.40);
  transform: translateX(2px);
}
.ep-preview__prod-arrow { color: var(--arc-hue); font-weight: 600; opacity: 0.4; transition: opacity 120ms; }
.ep-preview__prod:hover .ep-preview__prod-arrow { opacity: 1; }
.ep-preview__empty { color: #6b7280; font-size: 12px; font-style: italic; }
.ep-preview__btn {
  margin-top: auto; padding: 10px 14px; border-radius: 8px;
  background: linear-gradient(135deg, rgba(var(--arc-rgb),0.35), rgba(var(--arc-rgb),0.2));
  border: 1px solid rgba(var(--arc-rgb),0.45); color:#e5e7eb;
  font: 600 12px "Geist",sans-serif; cursor:pointer; font-family: inherit;
  transition: box-shadow 140ms, transform 140ms;
}
.ep-preview__btn:hover { box-shadow: 0 0 18px rgba(var(--arc-rgb),0.35); transform: translateY(-1px); }

.eg-tier-chip {
  display: inline-block; padding: 2px 6px; margin-right: 6px;
  border-radius: 3px; color: var(--arc-hue);
  border: 1px solid rgba(var(--arc-rgb),0.3);
  font-size: 9px; text-transform: capitalize;
}

/* ── Mobile portal — stacked layout for entity/product pickers ──── */
@media (max-width: 768px) {
  .ep-card {
    max-width: 100%; width: 100%;
    height: 100vh; height: 100dvh;
    border-radius: 0; padding: 16px 14px;
    box-shadow: none; border: none;
    background: rgba(11,14,19,0.97);
  }
  .ep-head .pe-title { font-size: 18px; }
  .ep-head .pe-logo { display: none; }

  /* Stack the split — list above preview, both scrollable */
  .ep-split {
    display: flex !important;
    flex-direction: column;
    grid-template-columns: unset;
    gap: 10px;
  }
  .ep-list-col { height: auto; max-height: 45vh; }
  .ep-preview {
    flex: 1; min-height: 120px;
    border-radius: 10px;
    padding: 14px;
  }
  .ep-row { padding: 10px; }
  .ep-row__name { font-size: 13px; }
  .ep-avatar--sm { width: 32px; height: 32px; font-size: 13px; }

  /* Footer — full width, stacked */
  .pe-footer-row {
    flex-direction: column; gap: 8px;
    padding-top: 8px;
  }
  .pe-footer-row__left { width: 100%; display: flex; gap: 8px; }
  .pe-footer-row .pe-btn { flex: 1; text-align: center; }
}

/* DS6 Tranche 6 — onboarding sheet (single-scroll progressive reveal, R18) */
/* Onboarding wrapper — now a lightweight contents box; the host .portal-stage
   owns scroll + centering for all pre-workshop screens (pe-card + onb-card). */
.onb-stage {
  position: relative; z-index: 2;
  width: 100%; display: flex; justify-content: center;
  margin: auto 0;
}
.onb-card {
  background: rgba(255,255,255,0.025);
  backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(var(--arc-rgb), 0.12),
              0 20px 60px rgba(0,0,0,0.5),
              0 0 40px rgba(var(--arc-rgb), 0.15),
              inset 0 1px 0 rgba(255,255,255,0.06);
  padding: 22px 28px; max-width: 540px; width: 100%; position: relative;
  margin: auto 0;
  /* Fit viewport; scroll internally when content is taller */
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: rgba(var(--arc-rgb),0.35) transparent;
}
.onb-card::-webkit-scrollbar { width: 6px; }
.onb-card::-webkit-scrollbar-track { background: transparent; }
.onb-card::-webkit-scrollbar-thumb { background: rgba(var(--arc-rgb),0.25); border-radius: 999px; }
.onb-card--wide { max-width: 920px; }
/* Tighter spacing so the full sheet fits a typical viewport without scroll */
.onb-card { padding: 16px 22px; }
.onb-card .onb-logo { width: 40px; height: 40px; margin: 0 auto 6px; font-size: 14px; }
.onb-card .onb-title { font-size: 22px; margin-bottom: 2px; }
.onb-card .onb-subtitle { margin-bottom: 12px; font-size: 12px; }
.onb-card .onb-section { padding: 10px 12px; margin-bottom: 6px; }
.onb-card .onb-field__input { padding: 9px 12px; font-size: 13px; }
.onb-card .ensemble-viz { padding-bottom: 14px; margin: 6px 0 2px; gap: 6px; }
.onb-card .ens-sat { width: 16px; height: 16px; }
.onb-card .ens-sat .label { font-size: 8.5px; margin-top: 3px; letter-spacing: 0; }
.onb-card .onb-btn { padding: 10px 14px; font-size: 12.5px; }
/* Upgrade-only: submit + back buttons don't need auto scroll */
.onb-card > .onb-btn, .onb-card > .pe-btn--link { flex-shrink: 0; }
.onb-logo {
  width: 54px; height: 54px; border-radius: 14px; margin: 0 auto 14px;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,0.2), rgba(var(--arc-rgb),0.5) 50%, rgba(var(--arc-rgb),0.12) 100%);
  border: 1px solid rgba(var(--arc-rgb), 0.4);
  box-shadow: 0 0 28px rgba(var(--arc-rgb), 0.35), inset 0 0 12px rgba(var(--arc-rgb), 0.2);
  display: flex; align-items: center; justify-content: center;
  color: #e5e7eb; font: 600 18px "Geist Mono",monospace;
}
.onb-title { font: 300 30px "Geist",sans-serif; color: #e5e7eb; margin: 0 0 6px; letter-spacing: -0.01em; text-align: center; }
.onb-subtitle { font: 500 13px "Geist",sans-serif; color: #9ca3af; text-align: center; margin: 0 0 22px; line-height: 1.5; }

/* Sections — done / active / upcoming. Reveal animation: upcoming sections
   are partly collapsed + dim; when they activate, they expand + fade in. */
.onb-section {
  padding: 14px 16px; border-radius: 10px; margin-bottom: 10px;
  background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04);
  transition: opacity 420ms cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 420ms, background 420ms;
  animation: onb-section-reveal 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes onb-section-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .onb-section { animation: none; }
}
.onb-section--active {
  background: rgba(var(--arc-rgb),0.06); border-color: rgba(var(--arc-rgb),0.30);
}
.onb-section--upcoming { opacity: 0.45; pointer-events: none; }
.onb-section--done {
  background: rgba(34,197,94,0.06); border-color: rgba(34,197,94,0.25);
  display: flex; align-items: center; gap: 10px;
}
.onb-section--done .onb-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 8px #22c55e;
}
.onb-section__tag {
  font: 600 10px "Geist Mono",monospace; letter-spacing: 0.14em;
  color: var(--arc-hue); text-transform: uppercase; margin-bottom: 8px;
}
.onb-section--upcoming .onb-section__tag { color: #6b7280; }
.onb-section__tag--done { color: #22c55e; margin-bottom: 0; }
.onb-section__value { font-size: 12.5px; color: #cbd5e1; }

.onb-field__input {
  width: 100%; padding: 11px 14px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: #e5e7eb; font: 400 14px "Geist",sans-serif;
  font-family: inherit; box-sizing: border-box;
}
.onb-field__input:focus { outline: none; border-color: rgba(var(--arc-rgb), 0.55); box-shadow: 0 0 0 3px rgba(var(--arc-rgb), 0.12); }

.onb-btn {
  width: 100%; padding: 12px 16px; border-radius: 8px;
  background: linear-gradient(135deg, rgba(var(--arc-rgb),0.35), rgba(var(--arc-rgb),0.2));
  border: 1px solid rgba(var(--arc-rgb), 0.45);
  color: #e5e7eb; font: 600 13px "Geist",sans-serif; letter-spacing: 0.02em;
  box-shadow: 0 0 16px rgba(var(--arc-rgb), 0.22), inset 0 1px 0 rgba(255,255,255,0.1);
  cursor: pointer; font-family: inherit;
  transition: box-shadow 140ms, transform 140ms, opacity 140ms;
}
.onb-btn:hover:not(:disabled) { box-shadow: 0 0 26px rgba(var(--arc-rgb), 0.4); transform: translateY(-1px); }
.onb-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Sticky onboarding card — head + scroll body + pinned footer */
.onb-card--sticky { padding: 0; overflow: hidden; }
.onb-card--sticky .onb-card__head { padding: 16px 22px 4px; flex-shrink: 0; }
.onb-card--sticky .onb-card__body { padding: 4px 22px 10px; flex: 1; min-height: 0; overflow-y: auto; }
.onb-card--sticky .onb-card__body::-webkit-scrollbar { width: 6px; }
.onb-card--sticky .onb-card__body::-webkit-scrollbar-thumb { background: rgba(var(--arc-rgb),0.25); border-radius: 999px; }
.onb-card--sticky .onb-card__footer {
  padding: 10px 22px 16px; flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,0.05);
  background: linear-gradient(to top, rgba(0,0,0,0.25), transparent);
}

/* Two-stage onboarding rail — name station + tier station, camera pans */
.onb-card--rail {
  padding: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  height: min(720px, calc(100vh - 48px));
  max-height: calc(100vh - 48px);
}
.onb-card--rail .onb-card__head {
  padding: 16px 22px 8px; flex-shrink: 0;
  display: flex; gap: 14px; align-items: flex-start;
}
.onb-card--rail .onb-card__head .onb-logo { margin: 0; flex-shrink: 0; }
.onb-card--rail .onb-head__main { flex: 1; min-width: 0; }
.onb-card--rail .onb-title { text-align: left; margin: 0; font-size: 20px; }
.onb-card--rail .onb-head__main .ep-path { margin-top: 4px; }
.onb-card--rail .onb-card__footer {
  padding: 8px 22px 12px; flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,0.05);
  background: linear-gradient(to top, rgba(0,0,0,0.20), transparent);
  display: flex; flex-direction: column; gap: 4px;
}
.onb-card--rail .onb-btn { margin-top: 0; }
.onb-track { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.onb-rail {
  display: flex; width: 200%; height: 100%;
  transition: transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
.onb-track[data-stage="name"] .onb-rail { transform: translateX(0%); }
.onb-track[data-stage="tier"] .onb-rail { transform: translateX(-50%); }
.onb-station {
  width: 50%; flex-shrink: 0;
  padding: 6px 22px 8px;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: rgba(var(--arc-rgb),0.35) transparent;
}
.onb-station::-webkit-scrollbar { width: 6px; }
.onb-station::-webkit-scrollbar-thumb { background: rgba(var(--arc-rgb),0.25); border-radius: 999px; }
/* Centred single-task stations (like the Name stage): content floats in the middle */
.onb-station--centred { display: flex; align-items: center; justify-content: center; }
.onb-station--centred .onb-station__inner { width: 100%; max-width: 460px; }
.onb-hint { color: #9ca3af; font: 400 11.5px "Geist",sans-serif; line-height: 1.55; margin: 12px 2px 0; text-align: center; }

/* Multi-line description — a bit taller to invite detail */
.onb-field__input--area {
  margin-top: 8px; min-height: 96px; resize: vertical; line-height: 1.5;
  font-family: inherit;
}
@media (prefers-reduced-motion: reduce) { .onb-rail { transition: none; } }

/* Role matrix — one column per role, vertical capability stack */
.tier-matrix {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; margin-top: 6px;
}
.role-col {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 6px 10px; border-radius: 8px;
  background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.04);
  transition: opacity 300ms, filter 300ms, background 300ms;
}
.role-col--dormant { opacity: 0.35; filter: grayscale(0.7); }
.role-col__sat {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--sc, rgba(255,255,255,0.1));
  box-shadow: 0 0 10px 2px var(--sc, transparent);
  margin-bottom: 6px;
}
.role-col__sat[data-role="optimiser"]  { --sc: #a855f7; }
.role-col__sat[data-role="chronicler"] { --sc: #fbbf24; }
.role-col__sat[data-role="observer"]   { --sc: #22c55e; }
.role-col__sat[data-role="strategist"] { --sc: #3b82f6; }
.role-col__sat.dormant { background: rgba(100,116,139,0.3); box-shadow: none; }
.role-col__name {
  font: 600 11px "Geist",sans-serif; color: #e5e7eb;
  margin-bottom: 8px; letter-spacing: 0.02em;
}
.role-col__body { display: flex; flex-direction: column; gap: 2px; width: 100%; }
/* Inline tier-tag + desc row — saves vertical space so matrix fits viewport */
.role-col__cap {
  display: flex; align-items: flex-start; gap: 6px;
  padding: 3px 6px; border-radius: 4px;
  background: rgba(255,255,255,0.015);
  border-left: 2px solid transparent;
  transition: all 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
  opacity: 0.32;
}
.role-col__cap.is-lit {
  opacity: 1;
  background: rgba(var(--arc-rgb), 0.08);
  border-left-color: var(--arc-hue);
}
.role-col__cap-tier {
  flex: 0 0 28px;
  font: 600 8px "Geist Mono",monospace; letter-spacing: 0.06em;
  text-transform: uppercase; color: #6b7280;
  padding-top: 1px;
}
.role-col__cap.is-lit .role-col__cap-tier { color: var(--arc-hue); }
.role-col__cap-desc {
  flex: 1;
  font: 400 10px "Geist",sans-serif; color: #9ca3af;
  line-height: 1.3;
}
.role-col__cap.is-lit .role-col__cap-desc { color: #cbd5e1; }
.role-col__unlock {
  font: 400 10px "Geist",sans-serif; color: #6b7280;
  text-align: center; font-style: italic; padding: 6px 4px;
}
.role-col__unlock b { color: var(--arc-hue); font-weight: 600; font-style: normal; }

/* Tier carousel (the buttons below the matrix) */
.tier-carousel {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin: 6px 0 0;
}
.tier-carousel--extra { grid-template-columns: repeat(6, 1fr); gap: 6px; }
.tier-carousel--extra .tier-card { padding: 6px 8px; min-width: 0; }
.tier-carousel--extra .tier-card__name { font-size: 11.5px; }
.tier-carousel--extra .tier-card__price { font-size: 10px; }
/* When "Need more?" is expanded (6 tiers), switch to 3-col x 2-row grid */
.tier-carousel:has(> :nth-child(5)) { grid-template-columns: repeat(3, 1fr); }
.tier-card {
  padding: 6px 10px; border-radius: 8px;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.06);
  text-align: left; cursor: pointer;
  transition: all 160ms; font-family: inherit;
  /* Inline name + price on one row to reduce vertical height */
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.tier-card:hover { border-color: rgba(var(--arc-rgb), 0.3); transform: translateY(-1px); }
.tier-card.is-active {
  background: rgba(var(--arc-rgb), 0.08);
  border-color: rgba(var(--arc-rgb), 0.5);
  box-shadow: 0 0 16px rgba(var(--arc-rgb), 0.25);
}
.tier-card__head { display: flex; flex-direction: column; gap: 2px; }
.tier-card__name { font: 600 12.5px "Geist",sans-serif; color: #e5e7eb; }
.tier-card__price { font: 500 10.5px "Geist Mono",monospace; color: var(--arc-hue); letter-spacing: 0.04em; white-space: nowrap; }
.tier-card__card { font: 400 9px "Geist Mono",monospace; color: #6b7280; letter-spacing: 0.08em; text-transform: uppercase; }
.tier-card__bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 3px; }
.tier-card__bullets li {
  font: 400 10px "Geist",sans-serif; color: #cbd5e1; line-height: 1.4;
  padding-left: 10px; position: relative;
}
.tier-card__bullets li::before {
  content: '•'; position: absolute; left: 0; top: 0; color: var(--arc-hue); opacity: 0.6;
}

/* Need more? link */
.onb-need-more {
  margin-top: 6px; width: 100%; padding: 6px;
  background: transparent; border: 1px dashed rgba(var(--arc-rgb), 0.3);
  border-radius: 8px; color: #9ca3af;
  font: 500 11px "Geist",sans-serif; cursor: pointer; font-family: inherit;
  transition: all 140ms;
}
.onb-need-more:hover {
  border-color: rgba(var(--arc-rgb), 0.5); color: var(--arc-hue);
  background: rgba(var(--arc-rgb), 0.04);
}

/* Poetic tier tagline — replaces the bullet-based "ensemble" one-liner */
.ensemble-blurb {
  text-align: center; font: 400 13px "Geist",sans-serif;
  font-style: italic; color: var(--arc-hue);
  margin: 8px 0 4px; letter-spacing: 0.01em;
  text-shadow: 0 0 8px rgba(var(--arc-rgb), 0.25);
  transition: color 300ms, text-shadow 300ms;
}
.ensemble-blurb b { color: var(--arc-hue); font-weight: 600; }

/* Awaken pulse — fires when a role comes online on tier click */
@keyframes ens-awaken {
  0%   { transform: scale(1);   box-shadow: 0 0 14px 2px var(--sc, transparent); }
  40%  { transform: scale(1.6); box-shadow: 0 0 30px 10px var(--sc, transparent); }
  70%  { transform: scale(1.2); box-shadow: 0 0 22px 6px var(--sc, transparent); }
  100% { transform: scale(1);   box-shadow: 0 0 14px 2px var(--sc, transparent); }
}
.ens-sat--awaken { animation: ens-awaken 1000ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@media (prefers-reduced-motion: reduce) { .ens-sat--awaken { animation: none; } }

.ensemble-viz {
  position: relative; margin: 10px 0 6px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; align-items: center; justify-items: center;
  padding-bottom: 18px; /* room for labels */
}
.ens-sat {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--sc, rgba(255,255,255,0.1));
  box-shadow: 0 0 14px 2px var(--sc, transparent);
  position: relative; transition: all 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ens-sat[data-role="chronicler"] { --sc: #fbbf24; }
.ens-sat[data-role="observer"]   { --sc: #22c55e; }
.ens-sat[data-role="strategist"] { --sc: #3b82f6; }
.ens-sat[data-role="optimiser"]  { --sc: #a855f7; }
.ens-sat.dormant { background: rgba(100,116,139,0.3); box-shadow: none; filter: grayscale(0.7); opacity: 0.4; }
.ens-sat .label {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 4px;
  font: 500 9px "Geist Mono",monospace; color: #9ca3af; white-space: nowrap; letter-spacing: 0.02em;
}
.ens-sat.dormant .label { color: #64748b; }

.ptype-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
.ptype-grid .tier-card { max-width: none; min-width: 0; }

.pe-btn--link {
  background: transparent; border: 0; color: var(--arc-hue);
  width: 100%; padding: 8px; cursor: pointer;
  font: 500 12px "Geist",sans-serif; margin-top: 8px;
}
.pe-btn--link:hover { text-decoration: underline; }

/* ── Voice mic button ──────────────────────── */
.voice-mic-btn {
  position: absolute; right: 8px; top: 8px;
  width: 32px; height: 32px; border-radius: 50%; border: 0;
  background: rgba(var(--arc-rgb), 0.12); color: #9ca3af; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 150ms, color 150ms, box-shadow 150ms;
}
/* Inline variant — flows with template chips instead of overlaying textarea */
.voice-mic-btn--inline {
  position: static;
  flex-shrink: 0;
  align-self: center;
}
.voice-mic-btn:hover { background: rgba(var(--arc-rgb), 0.25); color: var(--arc-hue); }
.voice-mic-btn.is-listening {
  background: rgba(239,68,68,0.2); color: #f87171;
  animation: mic-pulse 1s ease-in-out infinite;
}
.voice-mic-btn.is-processing {
  background: rgba(var(--arc-rgb), 0.2); color: var(--arc-hue);
  animation: mic-pulse 1.5s ease-in-out infinite;
}
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.3); }
  50% { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}
/* Avatar listening state */
.asst-avatar.is-voice-listening {
  box-shadow: 0 0 0 3px rgba(239,68,68,0.4), 0 0 20px rgba(239,68,68,0.2) !important;
}

/* ── Build-target chips (App / Site) ──────── */
.chip {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  font: 600 9px "Geist Mono",monospace; letter-spacing: 0.05em; text-transform: uppercase;
  vertical-align: middle; margin-left: 4px;
}
.chip--app  { background: rgba(34,211,238,0.15); color: #22d3ee; }
.chip--site { background: rgba(168,85,247,0.15); color: #a855f7; }

/* ── Logo button (header left) ──────────── */
.logo-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px; text-decoration: none;
  color: #9ca3af; transition: color 150ms, background 150ms;
}
.logo-btn:hover { color: var(--arc-hue); background: rgba(var(--arc-rgb), 0.1); }
.logo-btn__mark { width: 22px; height: 22px; }

/* ── Dock brand (bottom) ──────────── */
.dock__brand {
  font: 500 9px "Geist Mono",monospace; letter-spacing: 0.08em;
  color: #4b5563; text-decoration: none; text-align: center;
  padding: 6px 0 2px; transition: color 150ms;
}
.dock__brand:hover { color: var(--arc-hue); }

/* ── User menu (header right) ──────────── */
.user-menu-slot { position: relative; }
.user-menu-btn {
  width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(var(--arc-rgb), 0.18); color: var(--arc-hue);
  font: 600 13px "Geist",sans-serif; display: flex; align-items: center; justify-content: center;
  transition: background 150ms, box-shadow 150ms;
}
.user-menu-btn:hover { background: rgba(var(--arc-rgb), 0.3); box-shadow: 0 0 12px rgba(var(--arc-rgb), 0.25); }
.user-menu-pop {
  position: absolute; top: 40px; right: 0; width: 220px;
  background: #1a1f2e; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5); padding: 8px 0;
  display: none; z-index: 9999;
}
.user-menu-pop.is-open { display: block; }
.user-menu-pop__header { padding: 8px 14px 2px; font: 600 13px "Geist",sans-serif; color: #e5e7eb; }
.user-menu-pop__email { padding: 0 14px 8px; font: 11px "Geist Mono",monospace; color: #6b7280; }
.user-menu-pop__div { height: 1px; background: rgba(255,255,255,0.06); margin: 4px 0; }
.user-menu-pop__item {
  display: block; width: 100%; padding: 8px 14px; border: 0; background: transparent;
  font: 12.5px "Geist",sans-serif; color: #cbd5e1; cursor: pointer; text-align: left;
}
.user-menu-pop__item:hover { background: rgba(var(--arc-rgb), 0.08); color: #fff; }
.user-menu-pop__item--danger { color: #f87171; }
.user-menu-pop__item--danger:hover { background: rgba(239,68,68,0.1); color: #fca5a5; }

/* ── Onboarding tour ──────────────────────── */
.tour-overlay { position: fixed; inset: 0; z-index: 10002; }
/* During tour, pull the header below the backdrop so it dims properly.
   Highlighted elements get z-index:10003 individually. */
body.is-touring .top-strip { z-index: 1; }
.tour-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); }
.tour-tooltip {
  position: fixed; width: 280px; max-width: 85vw;
  background: #131825; border: 1px solid rgba(var(--arc-rgb), 0.3);
  border-radius: 12px; padding: 18px 20px; z-index: 10004;
  box-shadow: 0 16px 48px rgba(0,0,0,0.7), 0 0 24px rgba(var(--arc-rgb), 0.15);
  backdrop-filter: none;
}
.tour-tooltip__title { font: 600 16px "Geist",sans-serif; color: var(--arc-hue); margin-bottom: 8px; }
.tour-tooltip__body { font: 13px/1.6 "Geist",sans-serif; color: #cbd5e1; margin-bottom: 16px; }
.tour-tooltip__actions { display: flex; align-items: center; gap: 8px; }
.tour-tooltip__skip { background: transparent; border: 0; color: #6b7280; cursor: pointer; font: 12px "Geist",sans-serif; }
.tour-tooltip__skip:hover { color: #9ca3af; }
.tour-tooltip__progress { flex: 1; text-align: center; font: 11px "Geist Mono",monospace; color: #6b7280; }
.tour-tooltip__next {
  background: rgba(var(--arc-rgb), 0.15); border: 1px solid rgba(var(--arc-rgb), 0.3);
  color: var(--arc-hue); cursor: pointer; padding: 6px 16px; border-radius: 6px;
  font: 500 12px "Geist",sans-serif; transition: background 150ms;
}
.tour-tooltip__next:hover { background: rgba(var(--arc-rgb), 0.25); }

/* Crumb items now clickable — arc hover glow (extends tranche 1 treatment) */
.top-strip .crumb__item[role="button"]:hover {
  color: var(--arc-hue);
  text-shadow: 0 0 8px rgba(var(--arc-rgb), 0.35);
}
.top-strip .crumb__item[role="button"]:focus-visible {
  outline: 2px solid rgba(var(--arc-rgb), 0.55);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ══════════════════════════════════════════════════
   R19 · Cinematic entrance — "studio lights up" on onboarding completion.
   Full-viewport overlay fades in/out + arc wash rises through shell.
   ══════════════════════════════════════════════════ */

/* DS6 R19 · cinematic "studio lights up" entrance — Tranche 6.3 B lock.
   Layout: spine fluid on left third, narration card on right, satellites top-
   right, ambient arc-wash behind. Stays up until user clicks Begin (or 6s). */
.entrance-overlay {
  position: fixed; inset: 0; z-index: 9998;
  pointer-events: auto;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(var(--arc-rgb), 0.18), transparent 55%),
    rgba(8, 12, 22, 0.78);
  backdrop-filter: blur(2px);
  animation: entrance-bg-fade 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.entrance-overlay.is-dismissing { animation: entrance-bg-out 480ms cubic-bezier(0.4, 0, 0.6, 1) forwards; }
@keyframes entrance-bg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes entrance-bg-out { from { opacity: 1; } to { opacity: 0; } }

/* Arc-wash pulse — the tidal reveal behind everything */
.entrance-pulse {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 35% 50%, rgba(var(--arc-rgb), 0.25), transparent 55%);
  mix-blend-mode: screen; filter: blur(10px);
  animation: entrance-pulse-rise 2500ms cubic-bezier(0.38, 0, 0.32, 1) both;
}
@keyframes entrance-pulse-rise {
  0%   { opacity: 0; transform: scale(0.6); }
  40%  { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0.7; transform: scale(1.15); }
}

/* Spine on left-quarter — closer to card to reduce dead space */
.entrance-spine {
  position: absolute; top: 60px; bottom: 60px; left: 20%;
  width: 120px;
  animation: entrance-spine-rise 1800ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms both;
}
.entrance-spine svg { width: 100%; height: 100%; overflow: visible; }
@keyframes entrance-spine-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fluid rise — a bright slice travels down the spine (tidal, 2 passes) */
.entrance-spine__fluid {
  stroke-dasharray: 90 320;
  stroke-dashoffset: 410;
  opacity: 0;
  animation: entrance-fluid-flow 2600ms cubic-bezier(0.4, 0, 0.2, 1) 400ms infinite;
}
@keyframes entrance-fluid-flow {
  0%   { stroke-dashoffset: 410; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { stroke-dashoffset: -410; opacity: 0; }
}

/* Chambers wake in sequence as fluid descends */
.entrance-spine__chamber {
  opacity: 0.6;
  animation: entrance-chamber-wake 700ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--stagger) both;
}
@keyframes entrance-chamber-wake {
  0%   { opacity: 0.15; transform-origin: center; }
  45%  { opacity: 1; fill: rgba(var(--arc-rgb), 0.22); }
  100% { opacity: 1; fill: rgba(var(--arc-rgb), 0.10); }
}

/* Droplets pop in, stage-by-stage, riding the fluid down */
.entrance-spine__droplet {
  r: 0;
  animation: entrance-droplet-pop 900ms cubic-bezier(0.34, 1.56, 0.64, 1) var(--stagger) forwards;
  filter: drop-shadow(0 0 6px rgba(var(--arc-rgb), 0.6));
}
@keyframes entrance-droplet-pop {
  0%   { r: 0; }
  55%  { r: 6; }
  80%  { r: 4; }
  100% { r: 4; }
}

/* Bridge — trails of light arcing from spine to narration card */
.entrance-bridge {
  position: absolute; top: 0; bottom: 0;
  left: 24%; right: 20%;
  pointer-events: none; overflow: visible;
}
.entrance-bridge svg { width: 100%; height: 100%; overflow: visible; }
.entrance-trail {
  stroke-dasharray: 140 600;
  stroke-dashoffset: 740;
  opacity: 0;
  animation: entrance-trail-flow 3400ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.entrance-trail--1 { animation-delay: 800ms; }
.entrance-trail--2 { animation-delay: 1400ms; }
.entrance-trail--3 { animation-delay: 2000ms; }
@keyframes entrance-trail-flow {
  0%   { stroke-dashoffset: 740; opacity: 0; }
  15%  { opacity: 0.9; }
  75%  { opacity: 0.9; }
  100% { stroke-dashoffset: -740; opacity: 0; }
}

/* Floating motes filling the middle space */
.entrance-mote {
  position: absolute; width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--arc-hue);
  box-shadow: 0 0 12px 3px rgba(var(--arc-rgb), 0.55);
  opacity: 0; pointer-events: none;
  animation: entrance-mote-drift 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.entrance-mote--1 { top: 35%; left: 8%;  animation-delay:   500ms; }
.entrance-mote--2 { top: 55%; left: 22%; animation-delay:  1100ms; width: 3px; height: 3px; }
.entrance-mote--3 { top: 42%; left: 45%; animation-delay:  1600ms; }
.entrance-mote--4 { top: 62%; left: 62%; animation-delay:  2200ms; width: 3px; height: 3px; }
.entrance-mote--5 { top: 30%; left: 78%; animation-delay:  2800ms; }
@keyframes entrance-mote-drift {
  0%   { opacity: 0; transform: translate(0, 12px); }
  30%  { opacity: 0.9; }
  70%  { opacity: 0.9; }
  100% { opacity: 0; transform: translate(60px, -40px); }
}

/* Role satellites top-right, staggered pulse-on */
.entrance-sats {
  position: absolute; top: 32px; right: 32px;
  display: flex; gap: 10px; align-items: center;
}
.entrance-sat {
  width: 18px; height: 18px; border-radius: 50%;
  opacity: 0;
  animation: entrance-sat-in 700ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--stagger) forwards;
}
@keyframes entrance-sat-in {
  0%   { opacity: 0; transform: scale(0.4); }
  60%  { opacity: 1; transform: scale(1.25); }
  100% { opacity: 1; transform: scale(1); }
}
.entrance-sat.dormant { animation-delay: 0ms; opacity: 0.35; transform: scale(1); }

/* Narration card on the right */
.entrance-copy {
  position: absolute;
  top: 50%; right: 14%;
  transform: translateY(-50%);
  max-width: 400px;
  padding: 28px 32px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(var(--arc-rgb), 0.25);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(var(--arc-rgb), 0.12),
              0 20px 60px rgba(0,0,0,0.5),
              0 0 30px rgba(var(--arc-rgb), 0.18);
  animation: entrance-copy-rise 1400ms cubic-bezier(0.2, 0.8, 0.2, 1) 600ms both;
}
@keyframes entrance-copy-rise {
  from { opacity: 0; transform: translate(12px, calc(-50% + 12px)); }
  to   { opacity: 1; transform: translate(0, -50%); }
}
.entrance-copy__title {
  font: 300 30px "Geist",sans-serif; color: #e5e7eb;
  margin: 0 0 8px; letter-spacing: -0.01em;
}
.entrance-copy__sub {
  font: 500 11px "Geist Mono",monospace; color: var(--arc-hue);
  letter-spacing: 0.14em; text-transform: uppercase;
  margin: 0 0 14px;
}
.entrance-copy__narration {
  color: #cbd5e1; font: 400 13px "Geist",sans-serif;
  line-height: 1.6; margin: 0 0 18px;
}
.entrance-copy__begin {
  width: 100%; padding: 11px 18px; border-radius: 8px;
  background: linear-gradient(135deg, rgba(var(--arc-rgb),0.35), rgba(var(--arc-rgb),0.20));
  border: 1px solid rgba(var(--arc-rgb), 0.45);
  color: #e5e7eb; font: 600 13px "Geist",sans-serif; letter-spacing: 0.02em;
  box-shadow: 0 0 18px rgba(var(--arc-rgb), 0.25), inset 0 1px 0 rgba(255,255,255,0.08);
  cursor: pointer; font-family: inherit;
  transition: box-shadow 160ms, transform 160ms;
}
.entrance-copy__begin:hover { box-shadow: 0 0 32px rgba(var(--arc-rgb), 0.45); transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  .entrance-overlay,
  .entrance-pulse,
  .entrance-spine,
  .entrance-spine__droplet,
  .entrance-sat,
  .entrance-copy {
    animation-duration: 300ms !important;
  }
}

/* Mobile-ish fallback — stack narration below spine */
@media (max-width: 880px) {
  .entrance-spine { left: 50%; transform: translateX(-50%); width: 100px; top: 40px; bottom: 50%; }
  .entrance-sats { top: 20px; right: 20px; }
  .entrance-copy { top: auto; bottom: 24px; right: 20px; left: 20px; transform: none; max-width: none; }
  @keyframes entrance-copy-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
}
body.is-entering .spine {
  animation: entrance-spine-fill 2400ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms;
}
@keyframes entrance-spine-fill {
  0% { filter: brightness(0.5); opacity: 0.5; }
  100% { filter: brightness(1); opacity: 1; }
}
body.is-entering .c-dot {
  animation: entrance-sat-pulse 2400ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--stagger, 0s);
}
.c-badge[data-role="chronicler"] .c-dot { --stagger: 400ms; }
.c-badge[data-role="observer"]   .c-dot { --stagger: 700ms; }
.c-badge[data-role="strategist"] .c-dot { --stagger: 1000ms; }
.c-badge[data-role="optimiser"]  .c-dot { --stagger: 1300ms; }
@keyframes entrance-sat-pulse {
  0%   { filter: brightness(1); box-shadow: 0 0 10px 1px var(--role-colour); }
  30%  { filter: brightness(2); box-shadow: 0 0 36px 10px var(--role-colour); }
  100% { filter: brightness(1); box-shadow: 0 0 10px 1px var(--role-colour); }
}

@media (prefers-reduced-motion: reduce) {
  .entrance-overlay { animation: entrance-overlay-reduced 900ms linear forwards; }
  @keyframes entrance-overlay-reduced { 0% { opacity: 0; } 40% { opacity: 0.8; } 100% { opacity: 0; } }
  body.is-entering .spine,
  body.is-entering .c-dot { animation: none; }
}

/* ── Create flow (tranche 3) ───────────── */
.create-scrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  z-index: 90;
  display: none;
}
.create-scrim.is-open { display: block; }
.create-modal {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(0.96);
  width: 680px; max-width: 94vw;
  max-height: 90vh;
  background: rgba(17,24,39,0.96);
  border: 1px solid rgba(var(--arc-rgb), 0.28);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 40px rgba(var(--arc-rgb), 0.22);
  padding: 0;  /* inner layout manages its own spacing */
  z-index: 91;
  display: none;
  opacity: 0;
  overflow: hidden;  /* only the panes scroll, not the whole modal */
  flex-direction: column;
  transition: opacity 160ms, transform 180ms cubic-bezier(0.2,0.8,0.2,1);
}
.create-modal.is-open { display: flex; opacity: 1; transform: translate(-50%,-50%) scale(1); }
/* Inner layout — sticky head + scrolling body (step) + sticky footer (actions) */
.create-modal__head { display:flex; align-items:center; gap:10px; padding: 20px 24px 12px; flex-shrink: 0; }
.create-step { padding: 0 24px 20px; overflow-y: auto; overflow-x: hidden; flex: 1; min-height: 0; scrollbar-gutter: stable; }
/* Hide scrollbar when content fits — only show when actually scrollable */
.create-step:not(:hover) { scrollbar-width: none; }
.create-step:not(:hover)::-webkit-scrollbar { display: none; }
.create-actions {
  flex-shrink: 0;
  padding: 12px 24px 20px;
  border-top: 1px solid rgba(255,255,255,0.04);
  background: linear-gradient(to top, rgba(0,0,0,0.25), transparent);
  display: flex; align-items: center; gap: 10px; justify-content: flex-end;
}
.create-actions .stash-hint { margin-right: auto; color: #6b7280; font: 400 11px "Geist",sans-serif; }
.create-modal__title { font: 600 18px "Geist",sans-serif; }
.create-modal__close { margin-left:auto; color:#9ca3af; background:transparent; border:0; cursor:pointer; font-size:18px; }

.create-modal__mini {
  position: absolute; top: 24px; right: 56px;
  width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,0.35), rgba(var(--arc-rgb), 0.15) 60%, rgba(var(--arc-rgb), 0) 100%);
  box-shadow: 0 0 18px rgba(var(--arc-rgb), 0.2), inset 0 0 0 1px rgba(var(--arc-rgb), 0.22);
  transition: background 220ms cubic-bezier(0.2,0.8,0.2,1), box-shadow 220ms cubic-bezier(0.2,0.8,0.2,1);
  pointer-events: none;
  z-index: 2;
}
/* When bouncing during construct, disable position transition so JS drives it */
.create-modal__mini.is-bouncing {
  transition: background 220ms, box-shadow 220ms;
}
.create-modal__mini.fill-1 {
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,0.7), rgba(var(--arc-rgb), 0.5) 55%, rgba(var(--arc-rgb), 0.15) 95%);
  box-shadow: 0 0 20px rgba(var(--arc-rgb), 0.35);
}
.create-modal__mini.fill-2 {
  background: radial-gradient(circle at 32% 30%, #fff, var(--arc-hue) 55%, rgba(var(--arc-rgb), 0.3));
  box-shadow: 0 0 26px rgba(var(--arc-rgb), 0.5), inset 0 1px 0 rgba(255,255,255,0.2);
  transform: scale(1.1);
}
.create-modal__mini.fill-3 {
  background: radial-gradient(circle at 32% 30%, #fff, var(--arc-hue) 55%, rgba(var(--arc-rgb), 0.4));
  box-shadow: 0 0 32px rgba(var(--arc-rgb), 0.6), inset 0 1px 0 rgba(255,255,255,0.25);
  transform: scale(1.2);
}

.create-field { margin-bottom: 10px; }
.create-field__label { font: 600 10px "Geist Mono",monospace; letter-spacing: 0.14em; text-transform: uppercase; color:#9ca3af; margin-bottom: 3px; }
.create-field__input {
  width: 100%; padding: 8px 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  color: #e5e7eb; font: 400 13px "Geist",sans-serif;
  font-family: inherit;
}
.create-field__input:focus { outline: none; border-color: rgba(var(--arc-rgb), 0.5); box-shadow: 0 0 0 3px rgba(var(--arc-rgb), 0.12); }
textarea.create-field__input { resize: vertical; min-height: 60px; }

/* Template picker — quick-start chips */
.template-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.template-picker__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.template-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  color: #d1d5db; font: 400 11px "Geist",sans-serif;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  white-space: nowrap;
}
.template-chip:hover {
  background: rgba(var(--arc-rgb), 0.1);
  border-color: rgba(var(--arc-rgb), 0.35);
  color: #f3f4f6;
  box-shadow: 0 0 12px rgba(var(--arc-rgb), 0.12);
  transform: translateY(-1px);
}
.template-chip:active { transform: translateY(0); }
.template-chip.is-active {
  background: rgba(var(--arc-rgb), 0.15);
  border-color: rgba(var(--arc-rgb), 0.5);
  color: #fff;
  box-shadow: 0 0 16px rgba(var(--arc-rgb), 0.18), inset 0 0 0 1px rgba(var(--arc-rgb), 0.15);
}
.template-chip__icon { font-size: 13px; opacity: 0.85; transition: opacity 0.15s; }
.template-chip:hover .template-chip__icon { opacity: 1; }
.template-chip__cat { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.5; margin-left: 2px; }

/* Dependency chips + cards */
.dep-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.dep-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  font-size: 11px; color: #d1d5db;
  white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.dep-chip:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.18);
}
.dep-chip--blocker {
  border-color: rgba(239,68,68,0.35);
  color: #fca5a5;
  background: rgba(239,68,68,0.06);
}
.dep-chip--blocker:hover {
  background: rgba(239,68,68,0.1);
  border-color: rgba(239,68,68,0.5);
  box-shadow: 0 0 8px rgba(239,68,68,0.12);
}
.dep-chip--downstream {
  border-color: rgba(var(--arc-rgb),0.3);
  color: rgba(var(--arc-rgb),1);
  background: rgba(var(--arc-rgb),0.04);
}
.dep-chip--downstream:hover {
  background: rgba(var(--arc-rgb),0.08);
  box-shadow: 0 0 8px rgba(var(--arc-rgb),0.1);
}
.dep-chip__stage {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em;
  opacity: 0.7; padding: 1px 4px;
  background: rgba(255,255,255,0.06); border-radius: 6px;
}
.dep-blocked-card {
  animation: dep-pulse 2.5s ease-in-out infinite;
  box-shadow: 0 0 20px rgba(239,68,68,0.06);
}
@keyframes dep-pulse {
  0%,100% { border-color: rgba(239,68,68,0.25); box-shadow: 0 0 20px rgba(239,68,68,0.04); }
  50% { border-color: rgba(239,68,68,0.45); box-shadow: 0 0 24px rgba(239,68,68,0.1); }
}
.dep-info-card {
  font-size: 12px;
  padding: 10px 12px;
}

/* WO Pack review */
.pack-header {
  font-size: 12px; color: #d1d5db; padding: 10px 14px;
  background: linear-gradient(135deg, rgba(var(--arc-rgb), 0.08), rgba(var(--arc-rgb), 0.03));
  border: 1px solid rgba(var(--arc-rgb), 0.18);
  border-radius: 10px; margin-bottom: 10px;
  line-height: 1.5;
}
.pack-badge {
  display: inline-block; padding: 2px 10px; border-radius: 10px;
  background: rgba(var(--arc-rgb), 0.22); color: rgba(var(--arc-rgb), 1);
  font: 600 10px "Geist Mono",monospace; letter-spacing: 0.08em; text-transform: uppercase;
  margin-right: 8px;
  box-shadow: 0 0 8px rgba(var(--arc-rgb), 0.1);
}
.pack-cards { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.pack-card {
  display: flex; gap: 12px; padding: 10px 14px;
  background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.pack-card:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(var(--arc-rgb), 0.2);
  box-shadow: 0 2px 12px rgba(0,0,0,0.15), 0 0 0 1px rgba(var(--arc-rgb), 0.08);
  transform: translateY(-1px);
}
.pack-card__seq {
  font: 700 16px "Geist Mono",monospace; color: rgba(var(--arc-rgb), 0.9);
  min-width: 30px; padding-top: 1px;
  text-shadow: 0 0 12px rgba(var(--arc-rgb), 0.2);
}
.pack-card__body { flex: 1; min-width: 0; }
.pack-card__title { font: 500 13px "Geist",sans-serif; color: #e5e7eb; margin-bottom: 3px; }
.pack-card__meta { font-size: 10px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 3px; }
.pack-card__desc { font-size: 11px; color: #6b7280; line-height: 1.4; }
.pack-actions { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 12px; }

/* WO droplet dependency indicator */
.wo-droplet__dep-badge {
  position: absolute; top: -4px; right: -4px;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(239,68,68,0.85); color: #fff;
  font-size: 8px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(0,0,0,0.35);
  pointer-events: none;
  box-shadow: 0 0 6px rgba(239,68,68,0.3);
  animation: dep-badge-pulse 2s ease-in-out infinite;
}
@keyframes dep-badge-pulse {
  0%,100% { box-shadow: 0 0 6px rgba(239,68,68,0.3); }
  50% { box-shadow: 0 0 10px rgba(239,68,68,0.5); }
}

/* ─── Loading & skeleton states ─── */
.skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.03) 25%,
    rgba(255,255,255,0.06) 50%,
    rgba(255,255,255,0.03) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.8s ease-in-out infinite;
  border-radius: 6px;
}
.skeleton--pill { border-radius: 999px; }
.skeleton--circle { border-radius: 50%; }
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.loading-fade-in {
  animation: loading-fade 0.3s ease-out forwards;
  opacity: 0;
}
@keyframes loading-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Staggered fade-in for list items */
.loading-fade-in:nth-child(1) { animation-delay: 0ms; }
.loading-fade-in:nth-child(2) { animation-delay: 50ms; }
.loading-fade-in:nth-child(3) { animation-delay: 100ms; }
.loading-fade-in:nth-child(4) { animation-delay: 150ms; }
.loading-fade-in:nth-child(5) { animation-delay: 200ms; }
.loading-fade-in:nth-child(6) { animation-delay: 250ms; }

/* ─── WO detail panel transitions ─── */
.bench .card {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.bench .card:hover {
  border-color: rgba(255,255,255,0.08);
}

/* ─── Construct flow polish ─── */
.construct-steps li {
  transition: color 0.25s ease, opacity 0.25s ease;
}
.construct-steps li.is-done {
  transition: color 0.3s ease;
}
.construct-ring {
  transition: box-shadow 0.3s ease;
}

/* Viscosity slider */
.visc-box { position: relative; padding: 16px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 10px; }
.visc-track {
  position: relative; height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--arc-rgb),0.5) 0%, rgba(var(--arc-rgb),0.35) 50%, rgba(var(--arc-rgb),0.2) 100%);
  margin: 8px 0 10px;
  cursor: pointer;
}
.visc-knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #fff, var(--arc-hue) 55%, rgba(var(--arc-rgb),0.5));
  box-shadow: 0 0 16px rgba(var(--arc-rgb), 0.5);
  transition: left 160ms cubic-bezier(0.2,0.8,0.2,1);
  pointer-events: none;
}
.visc-ticks { display: flex; justify-content: space-between; font: 600 10px "Geist Mono",monospace; letter-spacing: 0.1em; color: #9ca3af; text-transform: uppercase; }
.visc-ticks span.is-active { color: var(--arc-hue); font-weight: 700; }
.visc-preview {
  margin-top: 10px;
  font: italic 11px "Geist",sans-serif; color: #6b7280;
}
.visc-preview b { color: var(--arc-hue); font-style: normal; }
.visc-preview__drop { display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #fff, var(--arc-hue) 55%, rgba(var(--arc-rgb),0.5));
  box-shadow: 0 0 10px rgba(var(--arc-rgb),0.4);
  vertical-align: middle; margin-right: 6px; transition: transform 160ms; }

/* Review step */
.review-head { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.05); margin-bottom: 14px; }
.review-droplet-row { display: flex; align-items: center; gap: 10px; }
.review-droplet {
  width: 24px; height: 24px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #fff, var(--arc-hue) 55%, rgba(var(--arc-rgb),0.5));
  box-shadow: 0 0 18px rgba(var(--arc-rgb), 0.4);
}
.review-section { margin-bottom: 12px; padding: 12px 14px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 10px; }
.review-section__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.review-section__label { font: 600 10px "Geist Mono",monospace; letter-spacing: 0.14em; text-transform: uppercase; color: #9ca3af; }
.review-section label.chk { font-size: 11px; color:#9ca3af; display:flex; align-items:center; gap:6px; cursor:pointer; }
.review-section label.chk input { accent-color: var(--arc-hue); }
.review-section p, .review-section ol { font-size: 12.5px; color:#cbd5e1; margin: 4px 0; line-height: 1.5; }
.review-section ol { padding-left: 18px; }

.create-actions { display: flex; gap: 8px; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.05); }
.create-actions .stash-hint { font: italic 11px "Geist",sans-serif; color: #6b7280; margin-right: auto; }

/* Spine-top + affordance */
.spine-plus-hint {
  position: absolute; top: 18px; left: 0; right: 0; text-align: center;
  z-index: 2; pointer-events: none;
  opacity: 0; transition: opacity 160ms;
}
.spine:hover .spine-plus-hint { opacity: 1; }

/* Ghost droplet on canvas is drawn in code; any create-entry hover sets this class on body */
body.is-creating .spine { box-shadow: inset 0 0 60px rgba(var(--arc-rgb), 0.12); }

/* ── Batch checkpoint panel (T5.3) ────── */
.batch-scrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(3px);
  z-index: 80; display: none;
}
.batch-scrim.is-open { display: block; }
.batch-panel {
  position: fixed; top: 72px; right: 20px;
  width: 360px; max-width: 92vw;
  max-height: 70vh; overflow-y: auto;
  background: rgba(17,24,39,0.98);
  border: 1px solid rgba(251,191,36, 0.35);
  border-radius: 12px;
  box-shadow: 0 24px 50px rgba(0,0,0,0.55), 0 0 32px rgba(251,191,36, 0.2);
  padding: 16px 18px; z-index: 81;
  display: none; opacity: 0;
  transform: translateY(-6px);
  transition: opacity 180ms, transform 220ms cubic-bezier(0.2,0.8,0.2,1);
}
.batch-panel.is-open { display: block; opacity: 1; transform: translateY(0); }
.batch-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  font: 600 10px "Geist Mono",monospace;
  letter-spacing: 0.14em; text-transform: uppercase; color: #fbbf24;
  margin-bottom: 10px;
}
.batch-panel__close {
  background: transparent; border: 0;
  color: #9ca3af; font-size: 18px; cursor: pointer;
}
.batch-panel__close:hover { color: #e5e7eb; }
.batch-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  margin-bottom: 6px; font-size: 12.5px; color: #e5e7eb;
}
.batch-item input[type="checkbox"] { accent-color: #fbbf24; }
.batch-item__main { flex: 1; min-width: 0; }
.batch-item__id {
  font-family: "Geist Mono",monospace;
  font-size: 11px; color: #9ca3af;
}
.batch-item__meta {
  font: 500 11px "Geist Mono",monospace;
  color: #6b7280;
}
.batch-panel__actions { display: flex; gap: 6px; margin-top: 10px; }
.batch-btn {
  flex: 1; padding: 8px 12px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03); color: #cbd5e1;
  font: 600 11px "Geist Mono",monospace;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; font-family: inherit;
}
.batch-btn--ok {
  background: rgba(34,197,94, 0.14); color: #22c55e;
  border-color: rgba(34,197,94, 0.35);
}
.batch-btn--hold {
  background: rgba(251,191,36, 0.14); color: #fbbf24;
  border-color: rgba(251,191,36, 0.35);
}
.batch-btn:hover { filter: brightness(1.15); }
.batch-panel__hint {
  margin-top: 10px;
  font: italic 10px "Geist",sans-serif;
  color: #6b7280; text-align: center;
}

/* Assistant "Director needs" card (T5.3) — renders inside .asst when count > 0 */
.asst-needs-card {
  padding: 10px 12px;
  background: rgba(251,191,36, 0.08);
  border: 1px solid rgba(251,191,36, 0.3);
  border-radius: 10px;
  margin: 4px 0 8px;
}
.asst-needs-card b { color: #fbbf24; font-weight: 600; }
.asst-needs-card .review-btn {
  display: inline-block; margin-top: 8px;
  padding: 5px 10px; border-radius: 6px;
  background: rgba(251,191,36, 0.2); color: #fbbf24;
  font: 600 10px "Geist Mono",monospace;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid rgba(251,191,36, 0.45);
  cursor: pointer; font-family: inherit;
}
.asst-needs-card .review-btn:hover {
  background: rgba(251,191,36, 0.28);
  box-shadow: 0 0 10px rgba(251,191,36, 0.3);
}

/* ── Arc selector (WO creation) ────────── */
.arc-selector { display: flex; gap: 6px; margin-top: 4px; }
.arc-sel-btn {
  padding: 5px 14px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.08);
  background: transparent; color: #9ca3af; cursor: pointer;
  font: 500 12px "Geist",sans-serif; transition: all 150ms;
}
.arc-sel-btn:hover { border-color: var(--sel-clr); color: var(--sel-clr); }
.arc-sel-btn.is-active {
  background: rgba(var(--arc-rgb), 0.12); border-color: var(--sel-clr);
  color: var(--sel-clr); font-weight: 600;
}

/* ── App dialog (replaces window.alert/confirm) ── */
.app-dialog-overlay {
  position: fixed; inset: 0; z-index: 10010;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center;
}
.app-dialog {
  background: #131825; border: 1px solid rgba(var(--arc-rgb), 0.25);
  border-radius: 12px; padding: 20px 24px; width: 360px; max-width: 90vw;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
}
.app-dialog__title { font: 600 15px "Geist",sans-serif; color: #e5e7eb; margin-bottom: 8px; }
.app-dialog__body { font: 13px/1.6 "Geist",sans-serif; color: #cbd5e1; margin-bottom: 16px; }
.app-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; }
.app-dialog__btn {
  padding: 6px 16px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.1);
  background: transparent; color: #9ca3af; cursor: pointer;
  font: 500 12px "Geist",sans-serif; transition: all 150ms;
}
.app-dialog__btn:hover { background: rgba(255,255,255,0.06); color: #e5e7eb; }
.app-dialog__btn--primary {
  background: rgba(var(--arc-rgb), 0.15); border-color: rgba(var(--arc-rgb), 0.3);
  color: var(--arc-hue);
}
.app-dialog__btn--primary:hover { background: rgba(var(--arc-rgb), 0.25); }
.app-dialog__btn--danger {
  background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.3);
  color: #f87171;
}
.app-dialog__btn--danger:hover { background: rgba(239,68,68,0.2); }

/* ── Droplet hover tooltip ─────────────── */
.droplet-tip {
  position: fixed; z-index: 999; pointer-events: none; display: none;
  background: #131825; border: 1px solid rgba(var(--arc-rgb), 0.25);
  border-radius: 6px; padding: 6px 10px; max-width: 200px;
  font: 11.5px/1.4 "Geist",sans-serif; color: #cbd5e1;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}
.droplet-tip__id { font: 600 10px "Geist Mono",monospace; color: var(--arc-hue); }

/* ── Worker detail popover ─────────────── */
.worker-pop {
  position: fixed; z-index: 10001;
  width: 340px; max-height: 420px;
  overflow-y: auto;
  background: rgba(15, 20, 32, 0.97);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(var(--arc-rgb), 0.22);
  border-radius: 14px;
  padding: 14px 16px 16px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.55), 0 0 24px rgba(var(--arc-rgb), 0.12);
  animation: float-in 180ms cubic-bezier(0.33, 1, 0.68, 1);
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--arc-rgb), 0.3) transparent;
}
.worker-pop__hdr {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 10px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.worker-pop__avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(var(--arc-rgb), 0.18);
  display: flex; align-items: center; justify-content: center;
  font: 600 16px "Geist", sans-serif; color: var(--arc-hue);
  flex-shrink: 0;
  border: 1.5px solid rgba(var(--arc-rgb), 0.25);
}
.worker-pop__label {
  font: 600 9px "Geist Mono", monospace;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #6b7280; margin-bottom: 5px;
}
/* Name row + badge */
.wp-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.wp-name { font: 600 14px "Geist", sans-serif; color: #e5e7eb; }
.wp-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font: 600 9px "Geist Mono", monospace; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 6px;
  background: rgba(255,255,255,0.05); color: #6b7280;
  border: 1px solid rgba(255,255,255,0.08);
}
.wp-badge--agency {
  background: rgba(var(--arc-rgb), 0.1);
  color: var(--arc-hue);
  border-color: rgba(var(--arc-rgb), 0.25);
}
.wp-bio {
  font: 11px/1.45 "Geist", sans-serif; color: #9ca3af;
  margin-top: 2px;
}
/* Capable roles */
.wp-roles { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.wp-role {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 6px;
  font: 600 11px "Geist", sans-serif;
  background: color-mix(in srgb, var(--role-color) 12%, transparent);
  color: var(--role-color);
  border: 1px solid color-mix(in srgb, var(--role-color) 25%, transparent);
}
.wp-role__icon { font-size: 12px; opacity: 0.8; }
/* Two-column traits + stats */
.wp-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wp-col {}
/* Behaviour mode */
.wp-mode { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.wp-mode__label { font: 11px "Geist", sans-serif; color: #6b7280; }
.wp-mode__value { font: 600 11px "Geist", sans-serif; color: #cbd5e1; text-transform: capitalize; }
/* Trait rows with gem bars */
.wp-trait { margin-bottom: 5px; }
.wp-trait__label { font: 11px "Geist", sans-serif; color: #6b7280; display: block; margin-bottom: 2px; }
.wp-trait__bar { display: flex; gap: 3px; }
.wp-gem {
  width: 14px; height: 6px; border-radius: 2px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.wp-gem--lit {
  background: rgba(var(--arc-rgb), 0.55);
  border-color: rgba(var(--arc-rgb), 0.4);
  box-shadow: 0 0 4px rgba(var(--arc-rgb), 0.2);
}
/* Stats */
.wp-stat { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.wp-stat__label { font: 11px "Geist", sans-serif; color: #6b7280; }
.wp-stat__value { font: 600 12px "Geist Mono", monospace; color: #cbd5e1; }

/* ── Radial menu ───────────────────────── */
.radial-menu {
  position: fixed;
  width: 200px; height: 200px;
  pointer-events: none;
  z-index: 100;
  display: none;
}
.radial-menu.is-open { display: block; pointer-events: auto; }
.radial-disk {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--arc-rgb), 0.22) 0%, transparent 70%);
  box-shadow: 0 0 40px rgba(var(--arc-rgb), 0.3), inset 0 0 0 1px rgba(var(--arc-rgb), 0.3);
  backdrop-filter: blur(6px);
}
/* Centre droplet — sits at the heart of the radial, wobbles like an atom */
.radial-droplet {
  position: absolute;
  left: 50%; top: 50%;
  width: 20px; height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--arc-hue) 55%, rgba(var(--arc-rgb), 0.4));
  box-shadow: 0 0 14px rgba(var(--arc-rgb), 0.5), 0 0 4px rgba(255,255,255,0.3);
  animation: radial-wobble 1.8s ease-in-out infinite;
  z-index: 2; pointer-events: none;
}
@keyframes radial-wobble {
  0%, 100% { transform: translate(0, 0); }
  15%  { transform: translate(2px, -1px); }
  30%  { transform: translate(-1.5px, 1.5px); }
  45%  { transform: translate(1px, 2px); }
  60%  { transform: translate(-2px, -0.5px); }
  75%  { transform: translate(1.5px, -1.5px); }
  90%  { transform: translate(-0.5px, 1px); }
  animation: radial-in 220ms cubic-bezier(0.2,0.8,0.2,1);
}
@keyframes radial-in { from { transform: scale(0.5); opacity: 0 } to { transform: scale(1); opacity: 1 } }
.radial-item {
  position: absolute; width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--arc-hue);
  border-radius: 50%;
  background: rgba(10,14,26,0.95);
  border: 1px solid rgba(var(--arc-rgb), 0.4);
  box-shadow: 0 4px 14px rgba(0,0,0,0.5), 0 0 16px rgba(var(--arc-rgb), 0.3);
  cursor: pointer;
}
.radial-item:hover {
  background: rgba(var(--arc-rgb), 0.16);
  border-color: var(--arc-hue);
  box-shadow: 0 4px 18px rgba(0,0,0,0.6), 0 0 24px rgba(var(--arc-rgb), 0.5);
}

/* Account → Preferences rows (panel layout, Eva voice, voice rate). */
.account-pref-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 0; border-top: 1px solid rgba(255,255,255,0.04);
}
.account-pref-row:first-of-type { border-top: none; padding-top: 4px; }
.account-pref__main { flex: 1; min-width: 0; }
.account-pref__title {
  font: 500 13px "Geist", sans-serif; color: #e5e7eb;
}
.account-pref__hint {
  font: 400 11.5px "Geist", sans-serif; color: #6b7280;
  margin-top: 2px; line-height: 1.5;
}
.account-pref__value {
  color: var(--arc-hue); font: 500 11px "Geist Mono", monospace;
  margin-left: 6px;
}
.account-pref__select {
  background: #1a1f2e;
  border: 1px solid rgba(255,255,255,0.12);
  color: #e5e7eb; padding: 6px 10px; border-radius: 5px;
  font: 500 12px "Geist", sans-serif;
  max-width: 340px;
}
.account-pref__select option { background: #1a1f2e; color: #e5e7eb; padding: 4px 8px; }
.account-pref__select optgroup { color: var(--arc-hue); font-style: normal; font-weight: 600; }
.account-pref__select--wide { min-width: 300px; }
.account-pref__slider { width: 140px; accent-color: var(--arc-hue); }

/* Light-switch style toggle — mirrors the panel-header layout switch */
.account-pref__switch {
  position: relative; cursor: pointer;
  width: 46px; height: 22px; flex: 0 0 auto;
}
.account-pref__switch input { position: absolute; opacity: 0; pointer-events: none; }
.account-pref__switch-track {
  position: absolute; inset: 0; border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  transition: background 180ms, border-color 180ms;
}
.account-pref__switch-track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 9px;
  background: #64748b;
  transition: transform 220ms cubic-bezier(0.33, 1, 0.68, 1), background 180ms;
}
.account-pref__switch input:checked ~ .account-pref__switch-track {
  background: rgba(var(--arc-rgb), 0.25);
  border-color: rgba(var(--arc-rgb), 0.45);
}
.account-pref__switch input:checked ~ .account-pref__switch-track::after {
  transform: translateX(22px);
  background: var(--arc-hue);
}

/* Voice picker control — select + "Show all" toggle stacked so the
 * filter checkbox sits just under the dropdown without cramping the row. */
.account-pref__voice-control {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  flex: 0 0 auto;
}
.account-pref__voice-filter {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font: 400 11px "Geist", sans-serif; color: #9ca3af;
  user-select: none;
}
.account-pref__voice-filter input { accent-color: var(--arc-hue); }

/* Voice pool readout — per-provider capacity chips. Zone hue matches
 * the Intelligence Grid convention: cool green → warm amber → hot red. */
.voice-pool {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 8px;
}
.voice-pool__chip {
  font: 500 10.5px "Geist Mono", monospace;
  padding: 3px 8px; border-radius: 9px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: #9ca3af;
  white-space: nowrap;
}
.voice-pool__chip b { font-weight: 600; color: #e5e7eb; }
.voice-pool__chip.is-cool     { border-color: rgba(52,211,153,0.35); color: #6ee7b7; }
.voice-pool__chip.is-warm     { border-color: rgba(251,191,36,0.40); color: #fde68a; }
.voice-pool__chip.is-hot      { border-color: rgba(248,113,113,0.45); color: #fecaca; }
.voice-pool__chip.is-critical { border-color: rgba(248,113,113,0.60); color: #fca5a5; background: rgba(248,113,113,0.07); }
.voice-pool__empty {
  font: 400 11px "Geist", sans-serif; color: #6b7280; font-style: italic;
}

/* ── Artifacts tab ───────────────────────── */
.artifacts-list {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 6px;
}
.artifact-row {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  padding: 8px 10px;
}
.artifact-row__head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 6px;
  font: 600 10.5px "Geist Mono", monospace;
}
.artifact-row__stage {
  color: var(--arc-hue);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.artifact-row__type, .artifact-row__run, .artifact-row__action {
  color: #9ca3af; font-weight: 500;
}
.artifact-row__body {
  font: 500 11.5px/1.55 "Geist Mono", monospace;
  color: #cbd5e1;
  white-space: pre-wrap; word-break: break-word;
  margin: 0;
  max-height: 240px; overflow: auto;
}
details.artifact-row__body { max-height: none; overflow: visible; padding: 0; }
details.artifact-row__body > summary {
  cursor: pointer; list-style: none;
  color: var(--arc-hue); font: 500 11px "Geist Mono", monospace;
}
details.artifact-row__body > summary::-webkit-details-marker { display: none; }
details.artifact-row__body[open] > summary { color: #9ca3af; }
details.artifact-row__body pre { margin: 0; }

/* ── Demo sandbox banner ───────────────────────────────────────────────
   Mounted below the top strip when the current session is an ephemeral
   sandbox. Persistent — follows the user across workshop surfaces.
*/
.sandbox-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px;
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.04));
  border-bottom: 1px solid rgba(251, 191, 36, 0.25);
  color: #fde68a;
  font: 12px/1.4 "Geist", system-ui, sans-serif;
}
.sandbox-banner[hidden] { display: none; }
.sandbox-banner__pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.6);
  animation: sandboxPulse 2.4s infinite;
  flex-shrink: 0;
}
@keyframes sandboxPulse {
  0% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(251, 191, 36, 0); }
  100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
}
.sandbox-banner__text { flex: 1; display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.sandbox-banner__title { font-weight: 600; color: #fde68a; }
.sandbox-banner__sub { color: #fcd34d; font-family: "Geist Mono", monospace; font-size: 11px; }
.sandbox-banner__save {
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.4);
  color: #fde68a;
  padding: 4px 12px;
  border-radius: 6px;
  font: 500 11.5px "Geist", system-ui, sans-serif;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.sandbox-banner__save:hover { background: rgba(251, 191, 36, 0.25); border-color: rgba(251, 191, 36, 0.6); }
.sandbox-banner__save:active { transform: translateY(1px); }

/* ── Export menu (artifact download dropdown) ─────────────────────────
   Per ARTIFACT_EXPORT_SPEC §4. Small popover anchored below the trigger
   button showing JSON / Word / Excel options.
*/
.export-menu { position: relative; display: inline-block; }
.export-menu__popover {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 40;
  background: rgba(15, 23, 42, 0.98); border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px; padding: 4px; min-width: 220px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  display: flex; flex-direction: column; gap: 2px;
}
.export-menu__popover[hidden] { display: none; }
.export-menu__item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: transparent; border: 0; cursor: pointer;
  color: #e2e8f0; font: 500 12px "Geist", system-ui, sans-serif;
  text-align: left; border-radius: 4px;
  transition: background 0.1s;
}
.export-menu__item:hover:not(:disabled) { background: rgba(129, 140, 248, 0.1); }
.export-menu__item:disabled { opacity: 0.4; cursor: not-allowed; }
.export-menu__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  background: rgba(129, 140, 248, 0.15); border-radius: 4px;
  font: 600 10px "Geist Mono", monospace; color: #a5b4fc;
  flex-shrink: 0;
}
.export-menu__label { flex: 1; }
.export-menu__hint { color: #6b7280; font-size: 10.5px; font-weight: 400; }

/* ══════════════════════════════════════════════════
   Embed mode — when the portal is iframed by Polaris
   Platform Admin. Strips chrome so only the admin
   panel renders inside the iframe.
   ══════════════════════════════════════════════════ */
body.portal--embedded { background: transparent; }
body.portal--embedded .portal-stage {
  position: static; padding: 0;
  background: transparent;
  overflow: visible;
}
body.portal--embedded .pe-scrim { display: none; }
body.portal--embedded .ep-card,
body.portal--embedded .pe-card {
  background: transparent;
  border: none;
  box-shadow: none;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 18px 22px;
}
/* Hide any residual chrome that might bleed through (workshop shell, etc.) */
body.portal--embedded #workshop-root,
body.portal--embedded .workshop-shell,
body.portal--embedded .pe-topnav,
body.portal--embedded .ep-topbar { display: none !important; }

/* ══════════════════════════════════════════════════
   Entity creation wizard (DS6 · 4-stage RTS-style)
   Stages: Identity / Power / Posture / Summary
   ══════════════════════════════════════════════════ */
.wiz-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.wiz-head__sigil {
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 36px;
  font-weight: 700;
}
.wiz-head__main { flex: 1; min-width: 0; }
.wiz-tabs { display: flex; align-items: center; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.wiz-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  font: 600 10px ui-monospace, monospace;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: all 160ms;
}
.wiz-tab:disabled { cursor: not-allowed; }
.wiz-tab--current { background: rgba(34,211,238,0.16); border-color: rgba(34,211,238,0.5); color: var(--arc-hue, #67e8f9); }
.wiz-tab--done    { color: rgba(34,211,238,0.85); border-color: rgba(34,211,238,0.32); }
.wiz-tab--done::before { content: '\2713'; margin-right: 2px; opacity: 0.85; }
.wiz-tab--next, .wiz-tab--pending { color: rgba(255,255,255,0.32); }
.wiz-tab__num { font-weight: 700; opacity: 0.7; }
.wiz-tab__label { letter-spacing: 0.04em; }
.wiz-tab__sep { color: rgba(255,255,255,0.16); padding: 0 2px; }
.wiz-tab:not(:disabled):hover { color: var(--text-main, #f0f0f5); border-color: rgba(34,211,238,0.4); }

.wiz-stage { padding: 4px 0 8px; }
.wiz-stage__lead { margin-bottom: 14px; }
.wiz-stage__title { font: 600 18px 'Inter', sans-serif; letter-spacing: -0.012em; margin: 0 0 4px; }
.wiz-stage__title em { color: var(--arc-hue, #67e8f9); font-style: normal; }
.wiz-stage__sub { font-size: 13px; color: var(--text-muted, #9ca3af); line-height: 1.55; margin: 0; }

.wiz-identity {
  display: grid; grid-template-columns: 110px 1fr; gap: 18px;
  align-items: flex-start;
}
.wiz-identity__sigil-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wiz-identity__form { display: flex; flex-direction: column; gap: 10px; }
.wiz-sigil {
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  position: relative;
  transition: all 320ms ease-out;
}
.wiz-sigil--lg { border-radius: 18px; }
.wiz-sigil__caption {
  font: 500 9.5px 'Geist Mono', monospace;
  letter-spacing: 0.1em; color: var(--text-dim, #5a5a72);
  text-transform: uppercase;
}
.wiz-sigil__caption code { background: rgba(255,255,255,0.04); padding: 1px 5px; border-radius: 3px; font-size: 9px; }

.wiz-field { display: block; }
.wiz-field__tag {
  display: block;
  font: 600 10px ui-monospace, monospace;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-dim, #5a5a72);
  margin-bottom: 4px;
}
.wiz-field__optional {
  font-weight: 500; letter-spacing: 0.04em; text-transform: none;
  color: var(--text-dim, #5a5a72); opacity: 0.75;
  margin-left: 4px;
}
.wiz-field__input {
  width: 100%;
  padding: 8px 12px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 7px;
  color: var(--text-main, #f0f0f5);
  font: 400 14px 'Inter', sans-serif;
  outline: none;
  transition: border-color 160ms;
}
.wiz-field__input:focus { border-color: rgba(34,211,238,0.5); }
.wiz-field__input--area { font-size: 13px; line-height: 1.5; resize: vertical; min-height: 0; }
.wiz-field__select { cursor: pointer; }

.wiz-cap-grid {
  display: grid;
  /* 2-column grid with shrink-to-fit tracks so capability cards stay equal
     width and don't push past their column. minmax(0, 1fr) is the load-
     bearing detail (lets tracks shrink below content min-width). */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 700px) { .wiz-cap-grid { grid-template-columns: minmax(0, 1fr); } }
.wiz-cap {
  padding: 10px 12px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  min-width: 0;
}
.wiz-cap__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.wiz-cap__icon { font: 700 16px ui-monospace, monospace; color: var(--arc-hue, #67e8f9); width: 22px; text-align: center; }
.wiz-cap__name { font: 600 13px 'Inter', sans-serif; }
.wiz-cap__sub { font: 500 11px 'Inter', sans-serif; color: var(--text-muted, #9ca3af); }
.wiz-cap__forms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.wiz-cap__form {
  padding: 8px 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 7px;
  text-align: left;
  cursor: pointer;
  transition: all 160ms;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
  overflow: hidden;
}
.wiz-cap__form-name, .wiz-cap__form-hint { min-width: 0; word-break: normal; overflow-wrap: break-word; }
.wiz-cap__form:hover { border-color: rgba(34,211,238,0.32); background: rgba(34,211,238,0.04); }
.wiz-cap__form.is-selected {
  border-color: var(--arc-hue, #67e8f9);
  background: rgba(34,211,238,0.10);
  box-shadow: 0 0 12px rgba(34,211,238,0.18);
}
.wiz-cap__form-name { font: 600 11.5px 'Inter', sans-serif; color: var(--text-main, #f0f0f5); }
.wiz-cap__form-hint { font: 500 10px 'Inter', sans-serif; color: var(--text-muted, #9ca3af); line-height: 1.4; }
.wiz-cap__form.is-selected .wiz-cap__form-name { color: var(--arc-hue, #67e8f9); }
.wiz-posture__foot { text-align: right; margin-top: 8px; }

.wiz-summary-card {
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(34,211,238,0.06), rgba(15,18,28,0.4));
  border: 1px solid rgba(34,211,238,0.32);
  border-radius: 14px;
}
.wiz-summary__hero { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.wiz-summary__hero-info { flex: 1; min-width: 0; }
.wiz-summary__name { font: 700 22px 'Geist', 'Inter', sans-serif; letter-spacing: -0.012em; margin-bottom: 2px; }
.wiz-summary__sector { font: 500 11px ui-monospace, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted, #9ca3af); }
.wiz-summary__mission { margin-top: 6px; font-size: 12px; color: var(--text-muted, #9ca3af); font-style: italic; line-height: 1.4; }

.wiz-summary__row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.wiz-summary__pill {
  display: inline-flex; flex-direction: column;
  padding: 5px 11px;
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
}
.wiz-summary__pill--accent { background: rgba(34,211,238,0.14); border-color: rgba(34,211,238,0.42); }
.wiz-summary__pill-label { font: 600 8.5px 'Geist Mono', monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim, #5a5a72); line-height: 1; margin-bottom: 1px; }
.wiz-summary__pill-value { font: 600 12px 'Inter', sans-serif; color: var(--text-main, #f0f0f5); line-height: 1; }
.wiz-summary__pill--accent .wiz-summary__pill-value { color: var(--arc-hue, #67e8f9); }

.wiz-summary__section { margin-bottom: 12px; }
.wiz-summary__section-tag { font: 600 10px 'Geist Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim, #5a5a72); margin-bottom: 6px; }
.wiz-summary__caps { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.wiz-summary__cap {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 9px;
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 7px;
  font: 500 11px 'Inter', sans-serif;
}
.wiz-summary__cap.is-customised { border-color: rgba(34,211,238,0.45); background: rgba(34,211,238,0.06); }
.wiz-summary__cap-icon { color: var(--arc-hue, #67e8f9); font: 700 12px ui-monospace, monospace; }
.wiz-summary__cap-name { font-weight: 600; flex: 1; }
.wiz-summary__cap-form { font: 600 10px ui-monospace, monospace; letter-spacing: 0.06em; color: var(--text-muted, #9ca3af); }
.wiz-summary__cap.is-customised .wiz-summary__cap-form { color: var(--arc-hue, #67e8f9); }

.wiz-summary__coowners summary {
  cursor: pointer; font: 600 10px ui-monospace, monospace;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-muted, #9ca3af);
  outline: none; list-style: none;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 0;
}
.wiz-summary__cap-tier-hint { margin-left: auto; font-weight: 500; font-size: 9.5px; color: var(--text-dim, #5a5a72); letter-spacing: 0.04em; text-transform: none; }

.wiz-footer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wiz-footer .onb-btn { flex: 1; min-width: 200px; }

@media (max-width: 640px) {
  .wiz-identity { grid-template-columns: 1fr; }
  .wiz-identity__sigil-col { flex-direction: row; gap: 10px; }
  .wiz-cap__forms { grid-template-columns: 1fr; }
}

/* ── Subscription section (Summary stage, paid tiers only) ──────────── */
.wiz-summary__sub { margin-top: 4px; }
.wiz-sub-card {
  background: linear-gradient(180deg, rgba(255,193,77,0.06), rgba(15,18,28,0.4));
  border: 1px solid rgba(255,193,77,0.32);
  border-radius: 10px;
  padding: 12px 14px;
}
.wiz-sub-card__main { margin-bottom: 10px; }
.wiz-sub-card__price {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px;
}
.wiz-sub-card__price-tier {
  font: 600 13px 'Inter', sans-serif;
  color: var(--text-main, #f0f0f5);
}
.wiz-sub-card__price-amount {
  font: 700 18px 'Geist', 'Inter', sans-serif;
  letter-spacing: -0.012em;
  color: rgba(255,193,77,0.95);
}
.wiz-sub-card__hint {
  font-size: 12px; color: var(--text-muted, #9ca3af); line-height: 1.45;
}
.wiz-sub-card__testbanner {
  display: flex; align-items: flex-start; gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255,193,77,0.2);
  margin-top: 10px;
}
.wiz-sub-card__testbanner-tag {
  flex: 0 0 auto;
  padding: 2px 8px;
  background: rgba(255,193,77,0.18);
  border: 1px solid rgba(255,193,77,0.42);
  border-radius: 999px;
  font: 700 9px 'Geist Mono', monospace;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,193,77,0.95);
  line-height: 1.6;
}
.wiz-sub-card__testbanner-text {
  font-size: 11.5px; color: var(--text-muted, #9ca3af); line-height: 1.5;
}

/* ── Test-mode confirmation dialog (custom modal — richer than appAlert) ─ */
.test-mode-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: tmFadeIn 200ms ease-out;
}
@keyframes tmFadeIn { from { opacity: 0; } to { opacity: 1; } }
.test-mode-dialog {
  background: linear-gradient(180deg, rgba(20,24,36,0.98), rgba(15,18,28,0.98));
  border: 1px solid rgba(255,193,77,0.42);
  border-radius: 14px;
  padding: 22px 24px;
  width: 100%; max-width: 480px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 30px rgba(255,193,77,0.1);
  animation: tmSlideIn 280ms cubic-bezier(0.32, 0.72, 0.16, 1);
  color: var(--text-main, #f0f0f5);
}
@keyframes tmSlideIn { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.test-mode-dialog__title {
  font: 600 17px 'Inter', sans-serif;
  margin: 0 0 10px;
  color: rgba(255,193,77,0.95);
  letter-spacing: -0.01em;
}
.test-mode-dialog__body {
  font-size: 13.5px; line-height: 1.55;
  color: var(--text-main, #f0f0f5);
  margin: 0 0 14px;
}
.test-mode-dialog__card {
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.test-mode-dialog__card-tag {
  font: 600 9px 'Geist Mono', monospace;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-dim, #5a5a72);
  margin-bottom: 4px;
}
.test-mode-dialog__card-num code {
  font: 600 16px ui-monospace, 'Geist Mono', monospace;
  letter-spacing: 0.06em;
  color: rgba(255,193,77,0.95);
  background: transparent;
}
.test-mode-dialog__card-meta {
  font-size: 11px; color: var(--text-muted, #9ca3af);
  margin-top: 4px;
}
.test-mode-dialog__foot {
  font-size: 12px; color: var(--text-muted, #9ca3af);
  line-height: 1.5; margin: 0 0 14px;
}
.test-mode-dialog__actions {
  display: flex; justify-content: flex-end; gap: 8px;
}
.test-mode-dialog__actions .pe-btn--ghost {
  padding: 8px 14px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-muted, #9ca3af);
  border-radius: 7px;
  font: 600 12px 'Inter', sans-serif;
  cursor: pointer;
}
.test-mode-dialog__actions .pe-btn--ghost:hover { color: var(--text-main, #f0f0f5); border-color: rgba(255,255,255,0.25); }
.test-mode-dialog__actions .pe-btn--primary {
  padding: 8px 16px;
  background: linear-gradient(135deg, rgba(255,193,77,0.32), rgba(255,193,77,0.16));
  border: 1px solid rgba(255,193,77,0.5);
  color: rgba(255,193,77,0.95);
  border-radius: 7px;
  font: 600 12px 'Inter', sans-serif;
  cursor: pointer;
}
.test-mode-dialog__actions .pe-btn--primary:hover {
  box-shadow: 0 0 16px rgba(255,193,77,0.32);
  transform: translateY(-1px);
}