/* workshop.css — the forge view (Structure → Forge → Structure loop).
 *
 * Layout + components for the workshop shell: dock | spine | bench | assistant.
 * Lifted from the Session-4 prime-reframe; the forge-line is DOM/CSS (not the old
 * canvas). All identity comes from tokens.css var()s — reskin = edit tokens.
 */

.ws-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--panel-line);
  background: linear-gradient(180deg, rgba(8, 10, 22, .7), transparent);
  position: sticky; top: 0; backdrop-filter: blur(6px); z-index: 5;
}
.ws-orbit {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border: 1px solid var(--violet-line); border-radius: 999px;
  color: var(--violet); font-size: 12.5px; background: var(--violet-dim); cursor: pointer;
}
.ws-crumb { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink2); }
.ws-crumb .here { color: var(--ink); }
.ws-crumb .sep { color: var(--ink3); }
.ws-layout { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--panel-line); border-radius: 999px; background: var(--panel-solid); color: var(--ink2); font: 600 11.5px var(--sans); cursor: pointer; }
.ws-layout:hover { border-color: var(--violet-line); color: var(--violet); }
.ws-top .sf-brand { margin-left: 14px; }

.shell {
  display: grid;
  grid-template-columns: 96px 200px 1fr 280px;
  gap: 14px;
  padding: 14px 18px 26px;
  align-items: start;
  min-height: calc(100vh - 56px);
}

/* DOCK — metric chips */
.dock { position: sticky; top: 70px; display: flex; flex-direction: column; gap: 10px; padding: 14px 10px; text-align: center; }
.dock__cap { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }
.dmetric { padding: 9px 6px; border-radius: var(--r2); border: 1px solid var(--panel-line); background: var(--panel-solid); }
.dmetric .n { font-family: var(--mono); font-size: 21px; color: var(--ink); line-height: 1; }
.dmetric .lbl { font-family: var(--mono); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); margin-top: 4px; }
.dmetric--heat { border-color: rgba(255, 178, 77, .4); background: rgba(255, 178, 77, .07); }
.dmetric--heat .n { color: var(--heat); }
.dmetric--built { border-color: rgba(95, 208, 160, .4); background: rgba(95, 208, 160, .06); }
.dmetric--built .n { color: var(--built); }
.dock__div { height: 1px; background: var(--panel-line); margin: 2px 0; }

/* SPINE — the vertical forge-line */
.spine { position: sticky; top: 70px; padding: 12px 8px 14px; }
.spine__head { display: flex; align-items: center; gap: 8px; margin: 0 4px 12px; }
.spine__title { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink2); }
.spine__plus { margin-left: auto; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--violet-line); background: var(--violet-dim); color: var(--violet); font-size: 14px; line-height: 1; cursor: pointer; }
.spine__plus:disabled { opacity: .4; cursor: default; }
.vline { display: flex; flex-direction: column; position: relative; padding: 2px 0; }
.vstn { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 9px; position: relative; padding: 3px 2px; }
.vstn .vdot { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--planned); display: grid; place-items: center; font-family: var(--mono); font-size: 11px; color: var(--ink3); background: rgba(10, 14, 30, .6); z-index: 1; }
.vstn .vnm { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.vstn:not(:last-child)::after { content: ""; position: absolute; left: 16.5px; top: 34px; width: 1.5px; height: calc(100% - 28px); background: var(--panel-line); z-index: 0; }
.vstn--done .vdot { border-color: rgba(95, 208, 160, .55); color: var(--built); background: rgba(95, 208, 160, .08); }
.vstn--done .vnm { color: var(--ink2); }
.vstn--done:not(:last-child)::after { background: rgba(95, 208, 160, .4); }
.vstn--now .vdot { border-color: var(--heat); background: rgba(255, 178, 77, .12); box-shadow: 0 0 22px rgba(255, 140, 60, .45); animation: pulse 2.6s ease-in-out infinite; }
.vstn--now .vnm { color: var(--heat); }
.vstn--ship .vdot { border-color: var(--cyan); color: var(--cyan); }
.vstn--ship .vnm { color: var(--cyan); }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 1px rgba(255,178,77,.3), 0 0 22px rgba(255,140,60,.18); } 50% { box-shadow: 0 0 0 1px rgba(255,178,77,.5), 0 0 40px rgba(255,140,60,.35); } }

/* BENCH — the Structure blueprint */
.bench { padding: 16px 18px; display: flex; flex-direction: column; overflow: hidden; }
.bench .bhead { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.bench .sf-h { font-size: 13px; color: var(--ink); margin: 0 0 2px; font-weight: 600; }
.bench .sf-sub { font-size: 11.5px; color: var(--ink3); margin: 0; }
.bp {
  position: relative; flex: 1; min-height: 200px; border-radius: var(--r); overflow: hidden;
  background:
    linear-gradient(0deg, rgba(139, 139, 255, .05), transparent),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(139, 139, 255, .06) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(139, 139, 255, .06) 31px 32px);
  border: 1px solid var(--violet-line);
  display: grid; place-items: center; padding: 24px;
}
.bp__empty { text-align: center; color: var(--ink3); font-size: 12.5px; line-height: 1.6; max-width: 360px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--panel-line); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
.chip--cyan { border-color: rgba(54, 214, 224, .4); color: var(--cyan); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); margin-top: 12px; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.dim-built { background: var(--built); } .dim-active { background: var(--heat); } .dim-planned { background: var(--planned); }

/* ── Structure ship map (Slice E — the ported preview render, live data) ────── */
.sf-structmap { flex: 1; min-height: 260px; border: 1px solid var(--panel-line); border-radius: 12px; position: relative; overflow: hidden;
  background: radial-gradient(120% 120% at 50% 45%, rgba(90,110,200,.05), transparent 70%), linear-gradient(rgba(150,160,220,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(150,160,220,.04) 1px, transparent 1px), var(--panel-solid);
  background-size: auto, 32px 32px, 32px 32px, auto; }
.sf-structmap .sm-map { position: absolute; inset: 0; }
.sf-structmap .sm-map svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sm-seglbl { font: 700 8.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.sm-nlbl { font: 600 8px var(--mono); fill: var(--ink2); text-anchor: middle; } .sm-nlbl.em { fill: #f9a8d2; }
.sf-struct-strip { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font: 600 9px var(--mono); color: var(--ink2); border: 1px solid var(--panel-line); border-radius: 999px; padding: 4px 11px; }
.sf-struct-strip .cls { color: var(--cyan); } .sf-struct-strip .dv { color: var(--heat); }
.sf-struct-strip .meter { width: 52px; height: 5px; border-radius: 3px; background: rgba(255,178,77,.18); overflow: hidden; }
.sf-struct-strip .meter i { display: block; height: 100%; background: linear-gradient(90deg, #ff7a3c, var(--heat)); }

/* ASSISTANT — Eva panel */
.assistant { position: sticky; top: 70px; display: flex; flex-direction: column; gap: 14px; padding: 14px; }
.asec__lbl { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); margin-bottom: 7px; }
.eva { display: flex; gap: 11px; align-items: flex-start; }
.eva__avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #cfd2ff, var(--violet) 55%, #4f5bcf 100%); box-shadow: 0 0 18px rgba(139, 139, 255, .5); }
.eva__line { font-size: 12.5px; line-height: 1.45; color: var(--ink); }
.eva__line b { color: var(--kernel); }
.amb { display: flex; flex-wrap: wrap; gap: 6px; }
.c-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--panel-line); background: var(--panel-solid); font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
.c-badge .c-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); }

@media (max-width: 1080px) {
  .shell { grid-template-columns: 1fr; }
  .dock, .spine, .assistant { position: static; }
}

/* ── Batch 1: HERO-band layout (A arm, default) ───────────────────────────── */
/* align-items:stretch overrides the base .shell's align-items:start — in a flex
   COLUMN that's the cross axis, so without it the band shrink-wraps narrower than
   the grid below. */
/* fixed-viewport hero: band is fixed height, the grid fills the rest, panes scroll
   internally — no page scroll, and dock/bench/Eva share one height (bottoms align). */
.shell--hero { display: flex; flex-direction: column; gap: 14px; width: 100%; align-items: stretch;
  height: calc(100vh - 56px); padding: 14px 18px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 96px 1fr 300px; gap: 14px; align-items: stretch;
  width: 100%; flex: 1; min-height: 0; }
.hero-grid > * { min-height: 0; }
.hero-grid .dock { display: flex; flex-direction: column; gap: 10px; padding: 14px 10px; text-align: center; overflow-y: auto; }
.hero-grid .assistant { display: flex; flex-direction: column; gap: 14px; padding: 14px; overflow-y: auto; }
@media (max-width: 1080px) {
  .shell--hero { height: auto; overflow: visible; }
  .hero-grid { grid-template-columns: 1fr; }
}

/* the animated forge band/column (both layouts share the canvas engine) */
.forge { border: 1px solid var(--violet-line); border-radius: var(--r); padding: 12px 14px 14px;
  background: radial-gradient(900px 360px at 72% -30%, rgba(139,139,255,.08), transparent 60%),
              radial-gradient(700px 300px at 6% 130%, rgba(255,122,60,.06), transparent 55%),
              var(--panel-solid); }
.forge__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.forge__title { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink2); }
.forge__plus { margin-left: auto; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--violet-line); background: var(--violet-dim); color: var(--violet); font: 600 11.5px var(--sans); cursor: pointer; }
.forge__plus:hover { color: var(--ink); }
.forge__shape { padding: 4px 9px; border-radius: 999px; border: 1px solid var(--panel-line); background: var(--panel-solid); color: var(--ink2); font: 600 10px var(--mono); letter-spacing: .04em; cursor: pointer; }
.forge__shape:hover { border-color: var(--violet-line); color: var(--violet); }
/* fixed-height stage — absolute-fill canvas (beats the canvas intrinsic-aspect quirk) */
.forge__stage { position: relative; height: 56px; }
.forge canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.forge__empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; pointer-events: none; }
@media (max-width: 720px) { .forge--hero .forge__stage { height: 130px; } }

/* forge focus card (Option 1) — pops by the clicked droplet over the canvas */
.forge-focus { position: absolute; z-index: 6; width: 248px; border: 1px solid var(--violet-line); border-radius: 13px;
  background: linear-gradient(180deg, rgba(16,20,40,.98), rgba(10,14,30,.98)); box-shadow: 0 18px 50px rgba(0,0,0,.55);
  padding: 12px 13px; animation: wsc-rise .15s ease both; }
.forge-focus__t { font-size: 14px; font-weight: 650; line-height: 1.25; }
.forge-focus__id { font-family: var(--mono); font-size: 10px; color: var(--ink3); }
.forge-focus__chips { display: flex; gap: 5px; flex-wrap: wrap; margin: 7px 0 11px; }
.forge-focus__chips .chip { font-family: var(--mono); font-size: 8.5px; padding: 2px 8px; }
.forge-focus__chips .chip--boss { color: var(--red, #ff6b6b); border-color: rgba(255,107,107,.5); }
.forge-focus__acts { display: flex; gap: 8px; }
.forge-focus__acts button { flex: 1; border-radius: 9px; padding: 8px 10px; font: 600 12px var(--sans); cursor: pointer; }
.forge-focus__enter { border: 1px solid var(--heat); background: rgba(255,178,77,.12); color: var(--heat); }
.forge-focus__enter:hover { background: rgba(255,178,77,.2); }
.forge-focus__detail { border: 1px solid var(--panel-line); background: transparent; color: var(--ink2); }
.forge-focus__detail:hover { border-color: var(--violet-line); color: var(--ink); }
.forge-focus__x { position: absolute; top: 7px; right: 9px; border: 0; background: transparent; color: var(--ink3); cursor: pointer; font-size: 12px; }
.forge-focus__x:hover { color: var(--ink); }

/* rail arm — the SAME canvas, vertical. Fixed-viewport HUD (the Director's target):
   everything fits, scroll only within segments; all columns share one height. */
.shell--rail { grid-template-columns: 96px 240px 1fr 300px; height: calc(100vh - 56px); overflow: hidden; align-items: stretch; }
.shell--rail .dock, .shell--rail .assistant { overflow-y: auto; min-height: 0; }
.shell--rail .bench { min-height: 0; }
.forge--rail { display: flex; flex-direction: column; padding: 12px 10px; min-height: 0; }
.forge--rail .forge__head { margin-bottom: 6px; }
.forge--rail .forge__title { font-size: 9px; }
.forge--rail .forge__plus { padding: 4px 9px; font-size: 11px; }
.forge--rail .forge__stage { flex: 1; min-height: 0; height: auto; }
.forge--rail .forge__hint { display: none; }
@media (max-width: 1080px) {
  .shell--rail { height: auto; overflow: visible; grid-template-columns: 1fr; }
  .forge--rail .forge__stage { height: 360px; flex: none; }
}

/* ── Batch 1: bench Structure | Work-orders tabs (D4) ─────────────────────── */
.btabs { display: flex; gap: 3px; border-bottom: 1px solid var(--panel-line); margin-bottom: 14px; flex: none; }
.btabs button { border: 0; background: transparent; color: var(--ink3); font: 600 12.5px var(--sans); padding: 9px 12px; cursor: pointer; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 7px; }
.btabs button.on { color: var(--violet); border-bottom-color: var(--violet); }
.btab-n { font-family: var(--mono); font-size: 9px; color: var(--ink3); border: 1px solid var(--panel-line); border-radius: 999px; padding: 1px 6px; }
/* panes fill the bench column; Structure blueprint flexes (no scroll), WO list scrolls */
.bpane { display: none; }
.bpane.on { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.bpane[data-bpane="structure"] .bp { flex: 1; min-height: 0; }
.bpane[data-bpane="wos"] { overflow-y: auto; }

.wolist { display: flex; flex-direction: column; gap: 16px; }
.wogrp { border-radius: var(--r2); transition: background .3s ease; }
.wogrp--flash { background: var(--violet-dim); box-shadow: 0 0 0 1px var(--violet-line); }
.wogrp__h { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); margin: 0 2px 7px; padding-top: 4px; }
.wogrp__n { font-family: var(--mono); font-size: 9px; color: var(--ink3); border: 1px solid var(--panel-line); border-radius: 999px; padding: 1px 6px; }
.worow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--panel-line); border-radius: 10px; background: var(--panel-solid); cursor: pointer; transition: border-color .14s, background .14s; margin-bottom: 6px; }
.worow:hover { border-color: var(--violet-line); background: var(--violet-dim); }
.worow--await { border-color: rgba(255,107,107,.45); background: rgba(255,107,107,.05); }
.worow__main { min-width: 0; flex: 1; }
.worow__t { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.worow__m { font-family: var(--mono); font-size: 10px; color: var(--ink3); margin-top: 2px; }
.worow--await .worow__m { color: var(--red, #ff6b6b); }
.worow__crew { flex: none; border: 1px solid var(--cyan); color: var(--cyan); background: rgba(54,214,224,.06); border-radius: 8px; padding: 5px 11px; font: 600 11px var(--sans); cursor: pointer; }
.worow__crew:hover { background: rgba(54,214,224,.14); }

/* ── Batch 1: Eva "awaiting you" inbox (D2) ───────────────────────────────── */
.asec__lbl--row { display: flex; align-items: center; justify-content: space-between; }
.att-close { border: 1px solid var(--panel-line); background: transparent; color: var(--ink2); border-radius: 8px; padding: 3px 9px; font: 600 10.5px var(--sans); cursor: pointer; }
.att-close:hover { border-color: var(--violet-line); color: var(--violet); }
.att-badge { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(255,107,107,.5); background: rgba(255,107,107,.08); color: var(--red, #ff6b6b); border-radius: 999px; padding: 5px 11px; font: 600 11px var(--sans); cursor: pointer; }
.att-badge .att-d { width: 6px; height: 6px; border-radius: 50%; background: var(--red, #ff6b6b); animation: att-pulse 1.4s infinite; }
.att-top { display: block; width: 100%; text-align: left; margin-top: 9px; border: 1px solid rgba(255,107,107,.4); border-radius: 11px; background: rgba(255,107,107,.06); padding: 10px 12px; cursor: pointer; }
.att-top:hover { border-color: rgba(255,107,107,.6); }
.att-top__t { font-weight: 600; font-size: 12.5px; color: var(--ink); }
.att-top__m { font-family: var(--mono); font-size: 10px; color: var(--ink3); margin-top: 2px; }
.att-more { display: block; width: 100%; text-align: left; background: transparent; border: 0; font-family: var(--mono); font-size: 9.5px; color: var(--violet); margin-top: 8px; cursor: pointer; padding: 0; }
.att-list { display: flex; flex-direction: column; }
.att-row { display: grid; grid-template-columns: 24px 1fr; gap: 9px; align-items: start; text-align: left; width: 100%; padding: 9px 0; border: 0; border-top: 1px solid var(--panel-line); background: transparent; cursor: pointer; }
.att-row:first-of-type { border-top: 0; }
.att-row__i { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; }
.att-row.boss .att-row__i { color: var(--red, #ff6b6b); border: 1px solid rgba(255,107,107,.5); }
.att-row.check .att-row__i { color: var(--heat); border: 1px solid rgba(255,178,77,.4); }
.att-row__t { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.att-row__m { display: block; font-family: var(--mono); font-size: 10px; color: var(--ink3); margin-top: 1px; }
.att-row:hover .att-row__t { color: var(--violet); }
@keyframes att-pulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .att-badge .att-d { animation: none; } }

/* ── J1: place-an-intent overlay (Work Order create) ──────────────────────── */
.wsc { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; }
.wsc__scrim { position: absolute; inset: 0; background: rgba(2, 3, 9, .68); backdrop-filter: blur(3px); }
.wsc__panel { position: relative; width: min(540px, 100%); max-height: 90vh; overflow-y: auto; padding: 22px 22px 18px; border-radius: var(--r2); animation: wsc-rise .22s ease both; }
@keyframes wsc-rise { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }
.wsc__head { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.wsc__panel .sf-h { font-size: 16px; color: var(--ink); margin: 0; font-weight: 650; }
.wsc__panel .sf-sub { font-size: 12.5px; color: var(--ink3); margin: 4px 0 16px; }
.wsc__x { margin-left: auto; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--panel-line); background: transparent; color: var(--ink3); cursor: pointer; font-size: 12px; }
.wsc__x:hover { color: var(--ink); border-color: var(--violet-line); }
.wsc__lbl { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); margin: 12px 0 6px; }
.wsc__intent, .wsc__desc { resize: vertical; line-height: 1.45; font-family: var(--sans); }
.wsc__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 4px; }
.wsc__seg { display: inline-flex; border: 1px solid var(--panel-line); border-radius: 999px; padding: 3px; gap: 2px; background: var(--panel-solid); }
.wsc__seg button { flex: 1; padding: 7px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--ink3); font-family: var(--sans); font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s ease, color .15s ease; }
.wsc__seg button.on { background: var(--violet-dim); color: var(--violet); }
.wsc__err { margin-top: 14px; padding: 9px 12px; border-radius: var(--r2); border: 1px solid var(--heat2); background: rgba(255, 122, 60, .1); color: var(--heat); font-size: 12.5px; }
.wsc__foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.wsc__foot .login__email-cta { width: auto; padding: 9px 16px; }
@media (max-width: 560px) { .wsc__row { grid-template-columns: 1fr; } }

/* ── J2: stage view (Envoy Mission Brief) ─────────────────────────────────── */
.chip--violet { border-color: var(--violet-line); color: var(--violet); }
.chip--heat { border-color: rgba(255, 178, 77, .4); color: var(--heat); }
.vstn--open { cursor: pointer; transition: background .12s ease; border-radius: 8px; }
.vstn--open:hover { background: var(--violet-dim); }
.wss__panel { width: min(640px, 100%); }
.wss__wo { margin-top: 3px; }
.wss__loading { padding: 22px 0; text-align: center; }
.wss__meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 16px; }
.wss__obj { padding: 13px 15px; border-radius: var(--r2); border: 1px solid var(--heat); background: rgba(255, 178, 77, .07); margin-bottom: 18px; }
.wss__obj-lbl { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--heat); margin-bottom: 5px; }
.wss__obj p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.wss__layers-lbl { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); margin-bottom: 8px; }
.wss__layers { display: flex; flex-direction: column; gap: 7px; }
.wss__layer { border: 1px solid var(--panel-line); border-radius: var(--r2); background: var(--panel-solid); overflow: hidden; }
.wss__layer > summary { list-style: none; cursor: pointer; padding: 11px 14px; display: flex; align-items: baseline; gap: 10px; }
.wss__layer > summary::-webkit-details-marker { display: none; }
.wss__layer > summary:hover { background: var(--violet-dim); }
.wss__layer-n { font-weight: 650; font-size: 12.5px; color: var(--ink); }
.wss__layer-hint { font-size: 11px; }
.wss__layer-body { margin: 0; padding: 0 14px 14px; font-family: var(--mono); font-size: 11px; line-height: 1.55; color: var(--ink2); white-space: pre-wrap; word-break: break-word; max-height: 340px; overflow-y: auto; }
.wss__layer-empty { padding: 0 14px 13px; }
.wss__foot { align-items: center; justify-content: space-between; }
.wss__run { padding: 9px 16px; }

/* ── J3: composed artifact + checkpoint decision ──────────────────────────── */
.wss__composing { padding: 14px 0; text-align: center; }
.wss__artifact { margin-top: 14px; }
.wss__art-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.wss__art-lbl { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }
.wss__art-body { margin: 0; padding: 13px 15px; border: 1px solid var(--panel-line); border-radius: var(--r2); background: var(--panel-solid); font-family: var(--mono); font-size: 11.5px; line-height: 1.55; color: var(--ink2); white-space: pre-wrap; word-break: break-word; max-height: 380px; overflow-y: auto; }
.wss__decision { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 13px; }
.wss__approve { padding: 9px 16px; }
.wss__decision-done { margin-top: 9px; color: var(--cyan); }

/* ── J-Spine: 6-phase grouped forge-line (replaces flat-15) ───────────────── */
.vphases { display: flex; flex-direction: column; gap: 4px; }
.vphase { border: 1px solid transparent; border-radius: 10px; }
.vphase__head { display: grid; grid-template-columns: 30px 1fr auto auto; align-items: center; gap: 9px;
  width: 100%; padding: 7px 8px; background: transparent; border: 0; cursor: pointer; text-align: left; border-radius: 10px;
  transition: background .14s ease; }
.vphase__head:hover { background: var(--violet-dim); }
.vphase__dot { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--planned);
  display: grid; place-items: center; font-family: var(--mono); font-size: 11px; color: var(--ink3);
  background: rgba(10, 14, 30, .6); }
.vphase__label { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); font-weight: 600; }
.vphase__count { font-family: var(--mono); font-size: 9px; color: var(--ink3); border: 1px solid var(--panel-line); border-radius: 999px; padding: 1px 6px; }
.vphase__chev { color: var(--ink3); font-size: 10px; transition: transform .18s ease; }
.vphase.is-open .vphase__chev { transform: rotate(180deg); }

.vphase--done .vphase__dot { border-color: rgba(95, 208, 160, .55); color: var(--built); background: rgba(95, 208, 160, .08); }
.vphase--done .vphase__label { color: var(--ink2); }
.vphase--now .vphase__dot { border-color: var(--heat); background: rgba(255, 178, 77, .12); box-shadow: 0 0 20px rgba(255, 140, 60, .4); animation: pulse 2.6s ease-in-out infinite; }
.vphase--now .vphase__label { color: var(--heat); }
.vphase--heat.vphase--idle .vphase__dot, .vphase--heat.vphase--future .vphase__dot { border-color: rgba(255, 178, 77, .3); }

/* nested stages — collapsed unless the phase is open */
.vphase__stages { display: none; padding: 2px 0 6px 12px; margin-left: 14px; border-left: 1px solid var(--panel-line); }
.vphase.is-open .vphase__stages { display: flex; flex-direction: column; gap: 1px; }
.vphase__stages .vstn { grid-template-columns: 24px 1fr; gap: 8px; padding: 2px; }
.vphase__stages .vstn .vdot { width: 24px; height: 24px; font-size: 9px; }
.vphase__stages .vstn:not(:last-child)::after { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .vphase.is-open .vphase__stages .vstn { animation: vstn-in .26s ease both; }
  @keyframes vstn-in { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
}

/* -- J2-prime: rich entered-stage view (full-surface scene + decision timer) -- */
.wss2 { position: fixed; inset: 0; z-index: 60; }
.wss2__scrim { position: absolute; inset: 0; background: rgba(2,3,9,.72); backdrop-filter: blur(4px); }
.wss2__surface { position: absolute; inset: 16px; margin: 0 auto; max-width: 1120px; display: flex; flex-direction: column;
  border: 1px solid var(--panel-line); border-radius: 18px; background: linear-gradient(180deg, rgba(10,14,30,.96), rgba(7,10,24,.98)); overflow: hidden;
  animation: wsc-rise .24s ease both; }
.wss2__top { display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-bottom: 1px solid var(--panel-line); background: var(--panel-solid); }
.wss2__back { border: 1px solid var(--panel-line); background: transparent; color: var(--ink2); border-radius: 9px; padding: 6px 11px; cursor: pointer; font: 600 12px var(--sans); }
.wss2__back:hover { border-color: var(--violet-line); color: var(--ink); }
.wss2__crumb { font-family: var(--mono); font-size: 11px; color: var(--ink3); }
.wss2__crumb b { color: var(--heat); }
.wss2__mode.seg { margin-left: auto; display: inline-flex; border: 1px solid var(--panel-line); border-radius: 999px; padding: 3px; gap: 2px; background: rgba(10,14,30,.5); }
.wss2__mode.seg button { border: 0; background: transparent; color: var(--ink3); font: 600 11px var(--sans); padding: 5px 11px; border-radius: 999px; cursor: pointer; }
.wss2__mode.seg button.on { background: var(--violet-dim); color: var(--violet); }
.wss2__tok.meter { font-family: var(--mono); font-size: 10px; color: var(--ink3); border: 1px dashed var(--panel-line); border-radius: 8px; padding: 3px 8px; }
.wss2 .iconbtn { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--panel-line); background: transparent; color: var(--ink3); cursor: pointer; font-size: 13px; }
.wss2 .iconbtn:hover { border-color: var(--violet-line); color: var(--violet); }
.wss2 .iconbtn.on { color: var(--cyan); border-color: rgba(54,214,224,.4); }

.wss2__grid { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; flex: 1; min-height: 0; }
.wss2__envoy { padding: 18px 14px; text-align: center; border-right: 1px solid var(--panel-line); overflow-y: auto; }
.envoy__sigil { width: 92px; height: 92px; margin: 2px auto 9px; }
.envoy__sigil svg { width: 100%; height: 100%; overflow: visible; }
.envoy .ring, .envoy .ring2, .envoy .core { transform-origin: 50% 50%; }
.envoy.idle .ring { animation: spin 22s linear infinite; } .envoy.idle .ring2 { animation: spin 30s linear infinite reverse; } .envoy.idle .core { animation: breathe 4s ease-in-out infinite; }
.envoy.working .ring { animation: spin 6s linear infinite; } .envoy.working .ring2 { animation: spin 4s linear infinite reverse; } .envoy.working .core { animation: hot 1.1s ease-in-out infinite; }
.wss2__envoy .who { font-weight: 650; font-size: 13.5px; }
.wss2__envoy .cls { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--violet); margin-top: 2px; }
.wss2__envoy .state { margin-top: 9px; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.wss2__envoy .state.working { color: var(--heat); } .wss2__envoy .state.idle { color: var(--ink3); }
.wss2__envoy .state .blip { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.wss2__envoy .working .blip { background: var(--heat); animation: hot 1s infinite; } .wss2__envoy .idle .blip { background: var(--ink3); }
.wss2__pillars { margin: 14px 4px 0; display: flex; flex-direction: column; gap: 7px; text-align: left; }
.wss2__pillars .pil span { font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.wss2__pillars .bar { height: 5px; border-radius: 3px; background: rgba(150,160,220,.14); margin-top: 3px; overflow: hidden; }
.wss2__pillars .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--violet), var(--cyan)); }
.wss2__supplied { color: var(--ink3) !important; margin-top: 12px; }

.wss2__scene { padding: 16px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.wss2__speak { border: 1px solid var(--violet-line); background: var(--violet-dim); border-radius: 14px; padding: 12px 15px; font-size: 14px; line-height: 1.5; }

/* stage intro — the envoy intros the station (purpose + what occurs), then Start */
.wss2__intro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; padding: 26px 16px 10px; margin: auto 0; }
.wss2__intro .wss2__speak { max-width: 620px; }
.wss2__objective { max-width: 600px; }
.wss2__obj-eyebrow { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--heat); margin-bottom: 10px; }
.wss2__obj-h { font-size: 26px; line-height: 1.2; margin: 0 0 10px; color: var(--ink); font-weight: 650; }
.wss2__obj-occurs { font-size: 14px; color: var(--ink2); line-height: 1.55; margin: 0; }
.wss2__start { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 4px; }
.wss2__start-cta { font-size: 15px; padding: 13px 32px; border-radius: 12px; }
.wss2__brief-link { border: 0; background: transparent; color: var(--ink3); font: 600 11.5px var(--sans); cursor: pointer; }
.wss2__brief-link:hover { color: var(--violet); }
/* full-screen affordance */
.wss2--full .wss2__surface { inset: 0; border-radius: 0; max-width: none; }
.wss2 .iconbtn#wss2-full.on { color: var(--cyan); border-color: rgba(54,214,224,.4); }
.wss2__work { display: flex; flex-direction: column; gap: 10px; }
.wss2__decision { border: 1px solid var(--heat); border-radius: 14px; background: rgba(255,178,77,.06); padding: 13px 15px; }
.wss2__decision .dh { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; flex-wrap: wrap; }
.wss2__decision .qt { font-weight: 650; font-size: 14px; }
.wss2 .timer { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; color: var(--heat); transition: opacity .2s; }
.wss2 .tbar { width: 120px; height: 6px; border-radius: 3px; background: rgba(255,178,77,.18); overflow: hidden; }
.wss2 .tbar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--heat2), var(--heat)); transform-origin: left; }
.wss2 .tbar i.run { animation: countdown var(--dur,10s) linear forwards; }
.wss2 .pause { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--heat); background: transparent; color: var(--heat); cursor: pointer; font-size: 10px; }
.wss2 .opts { display: flex; flex-direction: column; gap: 7px; }
.wss2 .opt { border: 1px solid var(--panel-line); border-radius: 10px; padding: 9px 12px; cursor: pointer; transition: border-color .14s, background .14s; position: relative; }
.wss2 .opt:hover { border-color: var(--violet-line); background: var(--violet-dim); }
.wss2 .opt.rec { border-style: dashed; }
.wss2 .opt.sel { border-color: var(--good, #5fd0a0); background: rgba(95,208,160,.08); }
.wss2 .opt .ol { font-size: 13px; font-weight: 600; } .wss2 .opt .tr { font-size: 11px; color: var(--ink3); margin-top: 2px; }
.wss2 .opt .pick { position: absolute; right: 10px; top: 9px; font-family: var(--mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: var(--violet); }
.wss2 .resolved { font-size: 12.5px; color: var(--good, #5fd0a0); margin-top: 9px; }
.wss2__composing { padding: 8px 0; }

/* D6 — verb interaction panels (Refine / Question) + pinned strip */
.wss2__verbpanel { border: 1px solid var(--violet-line); background: var(--violet-dim); border-radius: 12px; padding: 12px 14px; animation: wsc-rise .16s ease both; margin-bottom: 4px; }
.wss2__verbpanel.q { border-color: rgba(54,214,224,.4); background: rgba(54,214,224,.06); }
.wss2__verbpanel .vp-h { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--violet); margin-bottom: 8px; }
.wss2__verbpanel .vp-h.q { color: var(--cyan); }
.wss2__verbpanel .vp-field { width: 100%; border: 1px solid var(--panel-line); background: rgba(4,5,12,.6); color: var(--ink); border-radius: 9px; padding: 9px 11px; font: 400 13px var(--sans); resize: vertical; }
.wss2__verbpanel .vp-row { display: flex; gap: 8px; margin-top: 9px; align-items: center; }
.wss2__verbpanel .vp-go { padding: 8px 15px; }
.wss2__verbpanel .vp-x { padding: 8px 13px; }
.wss2__verbpanel .vp-ack { font-family: var(--mono); font-size: 10px; color: var(--ink3); line-height: 1.5; }
.wss2__pins { border: 1px solid rgba(255,217,138,.4); background: rgba(255,217,138,.06); border-radius: 12px; padding: 10px 13px; margin-bottom: 4px; }
.wss2__pins-h { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--kernel); margin-bottom: 7px; }
.wss2__pin { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--ink2); padding: 3px 0; }
.wss2__pin span { color: var(--kernel); }
.wss2__pins-fwd { font-family: var(--mono); font-size: 9px; color: var(--ink3); margin-top: 6px; border-top: 1px dashed var(--panel-line); padding-top: 6px; }

/* Enriched stage render (Propose+) — Scroll / Carousel (A/B) */
.wss2__enriched { display: flex; flex-direction: column; gap: 12px; }
.wss2__en-head { display: flex; }
.wss2__en-toggle { margin-left: auto; border: 1px solid var(--panel-line); background: var(--panel-solid); color: var(--ink2); border-radius: 999px; padding: 4px 11px; font: 600 10px var(--mono); letter-spacing: .04em; cursor: pointer; }
.wss2__en-toggle:hover { border-color: var(--violet-line); color: var(--violet); }
.wss2__en-beats { display: flex; flex-direction: column; gap: 12px; }
.wss2__enriched--carousel .wss2__en-beats { min-height: 240px; }
.wss2__slide { display: none; }
.wss2__slide.on { display: block; animation: wsc-rise .2s ease both; }
/* scroll mode reveals beats sequentially (inline animation-delay staggers them) so
   the result reads as streaming in, not appearing all at once. */
.wss2__enriched--scroll .wss2__slide { display: block; animation: wsc-rise .34s ease both; }
@media (prefers-reduced-motion: reduce) { .wss2__enriched--scroll .wss2__slide { animation: none; } }

/* Honest "composing" indicator (during the compose wait). */
.wss2__forging { padding: 18px 2px; }
.wss2__forging-h { display: flex; align-items: center; gap: 10px; font: 600 14px var(--sans); color: var(--ink); margin-bottom: 8px; }
.wss2__forging-h .spin { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--panel-line); border-top-color: var(--kernel); animation: sf-spin .8s linear infinite; flex: 0 0 auto; }
.wss2__forging-sub { font-size: 12.5px; color: var(--ink3); line-height: 1.55; max-width: 540px; }
.wss2__forging-t { font-family: var(--mono); color: var(--ink2); }
@keyframes sf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wss2__forging-h .spin { animation: none; } }
.wss2__en-nav { display: flex; align-items: center; gap: 10px; padding-top: 4px; }
.wss2__en-nav button { border: 1px solid var(--panel-line); background: transparent; color: var(--ink2); border-radius: 9px; padding: 7px 13px; font: 600 12px var(--sans); cursor: pointer; }
.wss2__en-nav button:disabled { opacity: .4; cursor: default; }
.wss2__en-dots { display: flex; gap: 6px; margin: 0 auto; }
.wss2__en-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bg2, #070a18); border: 1px solid var(--ink3); cursor: pointer; }
.wss2__en-dot.on { background: var(--violet); border-color: var(--violet); box-shadow: 0 0 8px var(--violet); }
.wss2__en-dot.done { background: var(--good, #5fd0a0); border-color: var(--good, #5fd0a0); }
.wss2__beat { border: 1px solid var(--panel-line); border-radius: 14px; background: var(--panel-solid); padding: 13px 15px; }
.wss2__beat-k { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--violet); font-weight: 600; margin-bottom: 8px; }
.wss2__beat-k.gold { color: var(--kernel); }
/* Per-stage signature accents (Director 2026-06-18 — identity per stage). */
.wss2__beat-k--gold { color: var(--kernel); }
.wss2__beat-k--cyan { color: var(--cyan); }
.wss2__beat-k--heat { color: var(--heat); }
.wss2__beat-k--good { color: var(--good, #5fd0a0); }
.wss2__beat-k--violet { color: var(--violet); }
.wss2__sg { display: inline-block; margin-right: 7px; font-size: 12px; transform: translateY(.5px); opacity: .9; }
/* The signed beat carries a faint left-rule in its accent so the shape reads at a glance. */
.wss2__beat--checklist, .wss2__beat--findings, .wss2__beat--sequence, .wss2__beat--verdict, .wss2__beat--proposal { position: relative; }
.wss2__beat-p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink2); }
.wss2__prop { display: grid; grid-template-columns: 116px 1fr; gap: 6px 12px; font-size: 13px; margin: 4px 0 0; }
.wss2__prop dt { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink3); padding-top: 2px; }
.wss2__prop dd { margin: 0; color: var(--ink); line-height: 1.5; }
/* checklist — criteria / constraints / sign-off (things to satisfy) */
.wss2__chk { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.wss2__chk li { display: flex; gap: 9px; align-items: flex-start; }
.wss2__chk .ck { font-size: 14px; color: var(--cyan); line-height: 1.4; flex: 0 0 auto; }
.wss2__chk .ci { display: flex; flex-direction: column; gap: 1px; }
.wss2__chk .ci b { font-size: 12.5px; color: var(--ink); font-weight: 650; }
.wss2__chk .ci span { font-size: 12.5px; color: var(--ink2); line-height: 1.45; }
/* findings — what we discovered (terrain / triage / stress) */
.wss2__find { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
.wss2__find li { display: grid; grid-template-columns: 132px 1fr; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--panel-line); }
.wss2__find li:last-child { border-bottom: 0; }
.wss2__find .fk { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .07em; color: var(--heat); padding-top: 2px; }
.wss2__find .fv { font-size: 13px; color: var(--ink); line-height: 1.5; }
/* sequence — ordered build/release steps */
.wss2__seq { margin: 4px 0 0; padding: 0 0 0 4px; list-style: none; counter-reset: seq; display: flex; flex-direction: column; gap: 8px; }
.wss2__seq li { counter-increment: seq; display: flex; flex-direction: column; gap: 1px; padding-left: 30px; position: relative; }
.wss2__seq li::before { content: counter(seq); position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--good, #5fd0a0); color: var(--good, #5fd0a0); font: 600 10px var(--mono); display: grid; place-items: center; }
.wss2__seq li b { font-size: 12.5px; color: var(--ink); font-weight: 650; }
.wss2__seq li span { font-size: 12.5px; color: var(--ink2); line-height: 1.45; }
/* verdict — emphasised result (spike outcome / release call) */
.wss2__verdict { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.wss2__verdict .vd { border: 1px solid var(--panel-line); border-left: 3px solid var(--cyan); border-radius: 9px; padding: 9px 12px; background: rgba(54,214,224,.04); }
.wss2__verdict .vk { display: block; font-family: var(--mono); font-size: 8.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--cyan); margin-bottom: 3px; }
.wss2__verdict .vv { font-size: 13.5px; color: var(--ink); line-height: 1.5; }
.wss2__decs-sub { font-size: 12px; color: var(--ink3); margin: 2px 0 10px; }
.wss2__boss { border: 1px solid var(--red, #ff6b6b); border-radius: 13px; background: rgba(255,107,107,.06); padding: 13px 15px; margin-bottom: 11px; }
.wss2__boss .dh { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; flex-wrap: wrap; }
.wss2__boss .qt { font-weight: 650; font-size: 14px; }
.wss2__bopt { border: 1px solid var(--panel-line); border-radius: 10px; padding: 9px 12px; margin-top: 7px; position: relative; cursor: pointer; transition: border-color .14s, background .14s; }
.wss2__bopt:hover { border-color: var(--violet-line); background: var(--violet-dim); }
.wss2__bopt.rec { border-style: dashed; }
.wss2__bopt.sel { border-color: var(--good, #5fd0a0); background: rgba(95,208,160,.08); }
.wss2__bopt .pick { position: absolute; right: 10px; top: 9px; font-family: var(--mono); font-size: 8px; text-transform: uppercase; color: var(--violet); }
.wss2__bopt .ol { font-size: 13px; font-weight: 600; } .wss2__bopt .tr { font-size: 11.5px; color: var(--ink3); margin-top: 2px; }
.wss2__conf { font-family: var(--mono); font-size: 8.5px; border-radius: 999px; padding: 2px 9px; display: inline-flex; align-items: center; gap: 5px; margin-left: auto; }
.wss2__conf--high { color: var(--good, #5fd0a0); background: rgba(95,208,160,.1); } .wss2__conf--high .d { background: var(--good, #5fd0a0); }
.wss2__conf--medium { color: var(--heat); background: rgba(255,178,77,.1); } .wss2__conf--medium .d { background: var(--heat); }
.wss2__conf--low { color: var(--red, #ff6b6b); background: rgba(255,107,107,.1); } .wss2__conf--low .d { background: var(--red, #ff6b6b); }
.wss2__conf .d { width: 6px; height: 6px; border-radius: 50%; }
.wss2__adv { border: 1px solid var(--panel-line); border-radius: 11px; background: var(--panel-solid); padding: 10px 13px; margin-bottom: 8px; }
.wss2__adv .aq { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wss2__adv .atag { font-family: var(--mono); font-size: 8px; text-transform: uppercase; color: var(--cyan); border: 1px solid rgba(54,214,224,.35); border-radius: 999px; padding: 1px 7px; }
.wss2__adv .achips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.wss2__achip { font-size: 12px; border: 1px solid var(--panel-line); border-radius: 8px; padding: 5px 10px; color: var(--ink2); }
.wss2__achip.rec { border-color: var(--violet-line); background: var(--violet-dim); color: var(--ink); }
.wss2__achip .pk { font-family: var(--mono); font-size: 7.5px; text-transform: uppercase; color: var(--violet); margin-left: 6px; }
.wss2__adv .anote { font-family: var(--mono); font-size: 9px; color: var(--ink3); margin-top: 7px; }

.wss2__verbs { display: flex; align-items: center; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--panel-line); background: var(--panel-solid); flex-wrap: wrap; }
.wss2__verbspace { flex: 1; }
.wss2 .verb { border: 1px solid var(--panel-line); background: transparent; color: var(--ink2); border-radius: 10px; padding: 9px 14px; cursor: pointer; font: 600 12.5px var(--sans); }
.wss2 .verb:hover:not(:disabled) { border-color: var(--violet-line); color: var(--ink); }
.wss2 .verb:disabled { opacity: .4; cursor: default; }

.wss2__modal { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; z-index: 5; }
.wss2__modal-scrim { position: absolute; inset: 0; background: rgba(2,3,9,.6); }
.wss2__modal-card { position: relative; width: min(640px, 100%); max-height: 80%; overflow: auto; padding: 16px 18px; border-radius: 14px; }
.wss2__modal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.wss2__modal-head b { font-size: 13px; } .wss2__modal-head .iconbtn { margin-left: auto; }
.wss2__modal-body { margin: 0; font-family: var(--mono); font-size: 11.5px; line-height: 1.55; color: var(--ink2); white-space: pre-wrap; word-break: break-word; }

@keyframes hot { 0%,100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes countdown { to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .envoy.idle .ring, .envoy.idle .ring2, .envoy.idle .core, .envoy.working .ring, .envoy.working .ring2, .envoy.working .core { animation: none; }
  .wss2 .tbar i.run { animation-duration: .01s; }
}
@media (max-width: 820px) {
  .wss2__surface { inset: 0; border-radius: 0; }
  .wss2__grid { grid-template-columns: 1fr; }
  .wss2__envoy { border-right: 0; border-bottom: 1px solid var(--panel-line); display: flex; align-items: center; gap: 14px; text-align: left; flex-wrap: wrap; }
  .envoy__sigil { width: 56px; height: 56px; margin: 0; }
  .wss2__pillars, .wss2__pillars-lbl, .wss2__ways-lbl, .wss2__flow { display: none; }
}

/* ── Way-of-working chips (envoy panel) · per starforge-preview ────────────── */
.wss2__ways-lbl, .wss2__pillars-lbl { font-family: var(--mono); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); margin: 14px 4px 7px; text-align: left; }
.wss2__ways { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-start; padding: 0 4px; }
.wss2__ways .way { font-family: var(--mono); font-size: 8.5px; font-weight: 600; color: var(--cyan); background: rgba(54,214,224,.08); border: 1px solid rgba(54,214,224,.28); border-radius: 6px; padding: 3px 7px; }
.wss2__ways .way.star { color: var(--kernel); background: rgba(245,196,81,.08); border-color: rgba(245,196,81,.32); }

/* ── Flow rail (right) — the turns + progress · per starforge-preview ──────── */
.wss2__flow { width: 150px; border-left: 1px solid var(--panel-line); padding: 16px 12px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.wss2__flow-h { font-family: var(--mono); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); margin-bottom: 8px; }
.wss2__flow-step { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: 11px; color: var(--ink3); transition: color .2s; }
.wss2__flow-step .d { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--ink3); flex: none; transition: all .2s; }
.wss2__flow-step.done { color: var(--ink2); } .wss2__flow-step.done .d { background: var(--good, #5fd0a0); border-color: var(--good, #5fd0a0); }
.wss2__flow-step.now { color: var(--heat); } .wss2__flow-step.now .d { background: var(--heat); border-color: var(--heat); box-shadow: 0 0 8px var(--heat); }

/* ── Turn-by-turn dialogue: speak bubble + typing + lead label + beat reveal ─ */
/* Focus the active turn; prior/next turns recede as context (preview's .turn.dim). */
.wss2__beatwrap { transition: opacity .3s ease; }
.wss2__beatwrap.dim { opacity: .18; }
.wss2__beatwrap.enter { animation: wss2-turn-in .42s ease both; }
@keyframes wss2-turn-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wss2__beatwrap.enter { animation: none; } }
.wss2__speak { border: 1px solid var(--violet-line); background: var(--violet-dim); border-radius: 14px; padding: 12px 15px; font-size: 14px; line-height: 1.5; min-height: 20px; color: var(--ink); }
.wss2__caret::after { content: '▌'; color: var(--violet); animation: wss2-blink 1s steps(1) infinite; }
@keyframes wss2-blink { 50% { opacity: 0; } }
.wss2__lead { font: 600 12.5px var(--sans); color: var(--ink2); margin: 13px 0 7px; display: flex; align-items: center; gap: 9px; }
.wss2__lead::before { content: ''; width: 16px; height: 1px; background: var(--violet-line); flex: none; }

/* ── Decision cards: advisory gets the SAME rich card as blocker (no chips) ── */
.wss2__dcard--advisory { border-color: var(--violet-line); background: rgba(140,150,210,.045); }
.wss2__dcard-desc { margin: 0 0 9px; font-size: 13px; color: var(--ink2); }
.wss2__anote { font-family: var(--mono); font-size: 9px; color: var(--ink3); margin-top: 9px; }

/* ── Hand-off · decision-log beat (reuses .le rows) ───────────────────────── */
.wss2__handoff .le { display: grid; grid-template-columns: 14px 1fr auto; gap: 9px; align-items: start; font-size: 12.5px; padding: 6px 0; border-top: 1px solid var(--panel-line); }
.wss2__handoff .le:first-of-type { border-top: 0; }
.wss2__handoff .le-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; }
.wss2__handoff .le-by { font-family: var(--mono); font-size: 8px; color: var(--ink3); }

/* ── Continue button (turn gate) · hidden until a gate opens ───────────────── */
/* The managed countdown is an OUTLINE FILL-BAR: the button fills left→right over the
   read-delay (preview format, Director-preferred over the radial ring). */
.cbtn.wss2__continue { position: relative; overflow: hidden; margin-left: auto; display: inline-flex; align-items: center; gap: 9px; border: 1px solid rgba(95,208,160,.5); background: linear-gradient(135deg, rgba(95,208,160,.25), rgba(54,214,224,.15)); color: var(--ink); border-radius: 10px; padding: 8px 16px; cursor: pointer; font: 600 12.5px var(--sans); opacity: 0; pointer-events: none; transition: opacity .25s; }
.cbtn.wss2__continue.show { opacity: 1; pointer-events: auto; }
.cbtn.wss2__continue:not(.counting):not(.locked).show { animation: wss2-cpulse 1.8s ease-in-out infinite; }
@keyframes wss2-cpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(95,208,160,0); } 50% { box-shadow: 0 0 16px 1px rgba(95,208,160,.45); } }
.wss2__cfill { position: absolute; inset: 0; width: 0; z-index: 0; background: linear-gradient(135deg, rgba(95,208,160,.4), rgba(54,214,224,.25)); }
.cbtn.wss2__continue.counting .wss2__cfill { animation: wss2-cfill var(--cdur, 3s) linear forwards; }
@keyframes wss2-cfill { from { width: 0; } to { width: 100%; } }
.wss2__continue-lbl { position: relative; z-index: 1; }
/* Boss / scope-defining call: Continue is LOCKED ("Make the call ▸") until the human picks. */
.cbtn.wss2__continue.locked { opacity: .5; cursor: not-allowed; border-color: rgba(255,107,107,.5); }
.cbtn.wss2__continue.locked .wss2__cfill { display: none; }

/* Managed observe note — shown instead of the accept→advance checkpoint when the orchestrator
   owns advancement (the stage view observes, doesn't drive). */
.wss2__managed-note { margin-top: 14px; border: 1px solid var(--panel-line); border-radius: 12px; padding: 12px 15px; font-size: 13px; line-height: 1.5; color: var(--ink2); background: rgba(95,208,160,.06); }
.wss2__managed-note b { color: var(--ink); }

/* The human's intent echoed back — the "YOU …" opener (per the preview). */
.wss2__intent { border: 1px dashed var(--panel-line); border-radius: 13px; padding: 11px 14px; font-size: 13.5px; line-height: 1.5; color: var(--ink); background: rgba(10,14,30,.35); }
.wss2__intent .wss2__ip { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink3); margin-right: 8px; border: 1px solid var(--panel-line); border-radius: 6px; padding: 2px 6px; }

/* -- forge-line plasma: the active WO "being worked" in its phase chamber -- */
.vphase--now .vphase__dot { position: relative; overflow: visible; }
.vphase--now .vphase__dot::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%; z-index: -1;
  background: conic-gradient(from 0deg, transparent 0%, var(--heat2) 18%, var(--kernel) 32%, transparent 55%, transparent 100%);
  filter: blur(2.5px); opacity: .7; animation: plasma-spin 1.7s linear infinite;
}
.vphase--now .vphase__dot::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,217,138,.5), transparent 70%);
  animation: plasma-pulse 1.4s ease-in-out infinite;
}
@keyframes plasma-spin { to { transform: rotate(360deg); } }
@keyframes plasma-pulse { 0%,100% { opacity: .35; } 50% { opacity: .85; } }
@media (prefers-reduced-motion: reduce) {
  .vphase--now .vphase__dot::before { animation: none; opacity: .5; }
  .vphase--now .vphase__dot::after { animation: none; opacity: .55; }
}

/* -- multi-turn streaming (item 3): turn blocks in the scene -- */
.wss2__turn { border: 1px solid var(--panel-line); border-radius: 12px; background: var(--panel-solid); padding: 12px 14px; }
.wss2__turn-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; }
.wss2__turn-n { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--violet); font-weight: 600; }
.wss2__turn-k { font-size: 10px; }
.wss2__turn-lines { display: flex; flex-direction: column; gap: 5px; }
.wss2__turn-lines .line { font-size: 13.5px; line-height: 1.5; color: var(--ink2); opacity: 0; transform: translateY(5px); transition: opacity .4s ease, transform .4s ease; }
.wss2__turn-lines .line.in { opacity: 1; transform: none; }
.wss2__turn .wss2__decision { margin-top: 11px; }
@media (prefers-reduced-motion: reduce) { .wss2__turn-lines .line { transition: none; opacity: 1; transform: none; } }

/* -- J3-prime: severity + impact badges + boss turn + decision log -- */
.wss2__auto { border: 1px solid var(--panel-line); background: transparent; color: var(--ink3); border-radius: 999px; padding: 5px 11px; cursor: pointer; font: 600 10.5px var(--mono); letter-spacing: .04em; }
.wss2__auto:hover { border-color: var(--violet-line); color: var(--ink2); }
.wss2__auto.on { color: var(--red, #ff6b6b); border-color: rgba(255,107,107,.5); background: rgba(255,107,107,.07); }

.sev { font-family: var(--mono); font-size: 8px; letter-spacing: .07em; text-transform: uppercase; border-radius: 999px; padding: 1px 7px; }
.sev--advisory { color: var(--cyan); border: 1px solid rgba(54,214,224,.4); }
.sev--blocker { color: var(--red, #ff6b6b); border: 1px solid rgba(255,107,107,.5); background: rgba(255,107,107,.08); }

.ibadges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.ibadge { font-family: var(--mono); font-size: 8.5px; letter-spacing: .04em; text-transform: uppercase; border-radius: 6px; padding: 2px 7px; border: 1px solid var(--panel-line); color: var(--ink3); }
.ibadge--up { color: var(--heat); border-color: rgba(255,178,77,.4); }
.ibadge--down { color: var(--good, #5fd0a0); border-color: rgba(95,208,160,.4); }
.ibadge--neu { color: var(--cyan); border-color: rgba(54,214,224,.35); }
.ibadge--lg { font-weight: 700; border-width: 1.5px; padding: 2px 8px; letter-spacing: .05em; } /* D7: material (large) impact reads louder */
.ibadge--lg.ibadge--up { background: rgba(255,178,77,.1); }
.ibadge--lg.ibadge--down { background: rgba(95,208,160,.1); }

.wss2__turn--boss { border-color: rgba(255,107,107,.5); background: radial-gradient(120% 120% at 50% 0%, rgba(255,107,107,.08), var(--panel-solid)); position: relative; }
.wss2__decision--boss { border-color: var(--red, #ff6b6b); background: rgba(255,107,107,.06); position: relative; overflow: hidden; }
.wss2__decision--boss::before { content: ""; position: absolute; inset: -2px; border-radius: 16px; z-index: 0; background: conic-gradient(from 0deg, transparent, rgba(255,107,107,.22), transparent 40%); animation: bspin 5s linear infinite; }
.wss2__decision--boss > * { position: relative; z-index: 1; }
@keyframes bspin { to { transform: rotate(360deg); } }
.wss2 .timer.timer--await { color: var(--red, #ff6b6b); }

.wss2__log { margin-top: 4px; }
.wss2__log-h { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); margin-bottom: 7px; }
.wss2__log .le { display: grid; grid-template-columns: 12px 1fr auto; gap: 9px; align-items: start; font-size: 12px; padding: 5px 0; border-top: 1px solid var(--panel-line); }
.wss2__log .le:first-of-type { border-top: 0; }
.wss2__log .le-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; }
.wss2__log .le-t { color: var(--ink2); }
.wss2__log .le-by { font-family: var(--mono); font-size: 9px; color: var(--ink3); white-space: nowrap; }
.wss2__log .le-sev { font-family: var(--mono); font-size: 8px; text-transform: uppercase; margin-left: 7px; }
.wss2__log .le-sev--blocker { color: var(--red, #ff6b6b); }
.wss2__log .le-sev--advisory { color: var(--cyan); }
@media (prefers-reduced-motion: reduce) { .wss2__decision--boss::before { animation: none; } }

/* -- J-Detail: tabbed WO-detail view + dock WO entry -- */
.dock__wo { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; border: 1px solid var(--panel-line); background: var(--panel-solid); border-radius: 10px; padding: 9px 11px; cursor: pointer; transition: border-color .14s, background .14s; }
.dock__wo:hover { border-color: var(--violet-line); background: var(--violet-dim); }
.dock__wo-t { font-size: 12px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.dock__wo .cap { font-size: 9.5px; color: var(--violet); }

.wod { position: fixed; inset: 0; z-index: 60; }
.wod__scrim { position: absolute; inset: 0; background: rgba(2,3,9,.72); backdrop-filter: blur(4px); }
.wod__surface { position: absolute; inset: 16px; margin: 0 auto; max-width: 880px; display: flex; flex-direction: column; border: 1px solid var(--panel-line); border-radius: 18px; background: linear-gradient(180deg, rgba(10,14,30,.96), rgba(7,10,24,.98)); overflow: hidden; animation: wsc-rise .24s ease both; }
.wod__top { display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-bottom: 1px solid var(--panel-line); background: var(--panel-solid); }
.wod__back { border: 1px solid var(--panel-line); background: transparent; color: var(--ink2); border-radius: 9px; padding: 6px 11px; cursor: pointer; font: 600 12px var(--sans); }
.wod__back:hover { border-color: var(--violet-line); color: var(--ink); }
.wod__crumb { font-size: 13px; } .wod__crumb b { color: var(--ink); } .wod__crumb .cap { font-family: var(--mono); font-size: 10px; color: var(--ink3); margin-left: 6px; }
.wod__x { margin-left: auto; }
.wod__chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 16px 0; }
.wod__chips .chip { font-family: var(--mono); font-size: 10px; border: 1px solid var(--panel-line); border-radius: 999px; padding: 3px 9px; color: var(--ink2); }
.wod__chips .chip--heat { color: var(--heat); border-color: rgba(255,178,77,.4); }
.wod__tabs { display: flex; gap: 3px; border-bottom: 1px solid var(--panel-line); margin: 12px 16px 0; flex-wrap: wrap; }
.wod__tabs button { border: 0; background: transparent; color: var(--ink3); font: 600 12.5px var(--sans); padding: 9px 12px; cursor: pointer; border-bottom: 2px solid transparent; }
.wod__tabs button.on { color: var(--violet); border-bottom-color: var(--violet); }
.wod__body { padding: 14px 16px 18px; overflow-y: auto; }
.wod__pane { display: none; } .wod__pane.on { display: block; }
.wod-empty { padding: 16px 0; }

.wod-ph { border: 1px solid var(--panel-line); border-radius: 12px; margin-bottom: 8px; overflow: hidden; }
.wod-ph--now { border-color: var(--heat); } .wod-ph--done { border-color: rgba(95,208,160,.35); }
.wod-ph-h { display: flex; align-items: center; gap: 11px; padding: 11px 14px; cursor: pointer; background: var(--panel-solid); }
.wod-ph-h:hover { background: var(--violet-dim); }
.wod-ph-dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 10px; border: 1.5px solid var(--ink3); color: var(--ink3); }
.wod-ph--done .wod-ph-dot { border-color: var(--good, #5fd0a0); color: var(--good, #5fd0a0); background: rgba(95,208,160,.08); }
.wod-ph--now .wod-ph-dot { border-color: var(--heat); color: var(--heat); box-shadow: 0 0 14px rgba(255,140,60,.4); }
.wod-ph-nm { font-weight: 650; font-size: 13.5px; } .wod-ph-sum { margin-left: auto; font-family: var(--mono); font-size: 9px; color: var(--ink3); }
.wod-ph-chev { color: var(--ink3); transition: transform .18s; margin-left: 8px; } .wod-ph.open .wod-ph-chev { transform: rotate(180deg); }
.wod-ph-body { display: none; padding: 6px 14px 13px 51px; } .wod-ph.open .wod-ph-body { display: block; }
.wod-run { padding: 8px 0; border-top: 1px solid var(--panel-line); } .wod-run:first-child { border-top: 0; }
.wod-run--enter { display: block; width: 100%; text-align: left; font: inherit; color: var(--ink2); background: transparent; border-top: 1px solid var(--panel-line); border-left: 0; border-right: 0; border-bottom: 0; cursor: pointer; padding: 9px 10px; border-radius: 8px; transition: background .14s; }
.wod-run--enter:first-child { border-top: 0; }
.wod-run--enter:hover { background: var(--violet-dim); }
.wod-run-go { color: var(--violet); opacity: 0; transition: opacity .14s; margin-left: 6px; }
.wod-run--enter:hover .wod-run-go { opacity: 1; }
.wod-run-top { display: flex; align-items: center; gap: 9px; font-size: 12.5px; } .wod-run-stage { font-weight: 600; } .wod-run-meta { margin-left: auto; font-family: var(--mono); font-size: 9px; color: var(--ink3); text-transform: uppercase; }
.wod-pbar { height: 5px; border-radius: 3px; background: rgba(150,160,220,.14); overflow: hidden; margin-top: 6px; }
.wod-pbar i { display: block; height: 100%; border-radius: 3px; } .wod-pbar i.done { background: var(--good, #5fd0a0); } .wod-pbar i.run { background: linear-gradient(90deg, var(--heat2), var(--heat)); animation: pulsebar 1.6s ease-in-out infinite; }
.wod-run-sum { font-size: 11.5px; color: var(--ink3); margin-top: 5px; line-height: 1.45; }
/* Start-without-entering button + its forging bar (Director 2026-06-22). */
.wod-run-wrap { display: flex; align-items: stretch; gap: 8px; }
.wod-run-wrap .wod-run--enter { flex: 1; }
.wod-start { flex: 0 0 auto; align-self: center; border: 1px solid var(--kernel); background: rgba(245,196,81,.08); color: var(--kernel); border-radius: 9px; padding: 7px 12px; font: 600 11.5px var(--sans); cursor: pointer; transition: background .14s; white-space: nowrap; }
.wod-start:hover:not(:disabled) { background: rgba(245,196,81,.18); }
.wod-start:disabled { opacity: .6; cursor: default; }
.wod-pbar i.forging { background: linear-gradient(90deg, var(--heat2, #b5701a), var(--heat)); animation: pulsebar 1.6s ease-in-out infinite; }

.wod-beat { border-left: 2px solid var(--violet-line); padding: 0 0 14px 14px; margin-left: 6px; position: relative; }
.wod-beat::before { content: ""; position: absolute; left: -5px; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--violet); }
.wod-beat.done::before { background: var(--good, #5fd0a0); } .wod-beat.now::before { background: var(--heat); }
.wod-bt { font-weight: 650; font-size: 13px; } .wod-bd { font-size: 12.5px; color: var(--ink2); margin-top: 3px; line-height: 1.5; }

.wod-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--panel-line); font-size: 12.5px; }
.wod-row:first-child { border-top: 0; }
.wod-k { font-family: var(--mono); font-size: 8px; text-transform: uppercase; color: var(--ink3); border: 1px solid var(--panel-line); border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
.wod-v b { color: var(--ink); } .wod-when { font-family: var(--mono); font-size: 9px; color: var(--ink3); white-space: nowrap; }
.wod-view { border: 1px solid var(--cyan); color: var(--cyan); background: rgba(54,214,224,.06); border-radius: 8px; padding: 4px 11px; font: 600 11px var(--sans); cursor: pointer; }
.wod-metagrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.wod-mcard { border: 1px solid var(--panel-line); border-radius: 10px; background: var(--panel-solid); padding: 11px 13px; }
.wod-ml { font-family: var(--mono); font-size: 8.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink3); } .wod-mv { font-size: 15px; font-weight: 650; margin-top: 3px; }
.wod-runs-lbl { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); margin: 4px 0 8px; }
@keyframes pulsebar { 0%,100% { opacity: .7; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wod-pbar i.run { animation: none; } }
@media (max-width: 720px) { .wod__surface { inset: 0; border-radius: 0; } .wod-metagrid { grid-template-columns: 1fr; } }

/* ══ Uplift P5 · FX floor — WO chip popup (mote / lane-row click) + locked dual-rail ══
 * Ported from mocks/uplift-floor-mock.html (.wopop / .drail). The forge-line itself
 * renders as the compact instrument BAND via forgeLine.js orientation:'band' (no CSS
 * needed there — the renderer adapts to the organism tile's height). These classes are
 * P5-owned + namespaced (wh-wopop / wh-drail) so they never collide with the P2 zone-hub
 * rewrite in workshopHome.css. Popup positions absolute within .wh (its offset parent). */
.wh-wopop { position: absolute; z-index: 60; width: 288px; padding: 13px 15px; display: flex; flex-direction: column; gap: 9px;
  border: 1px solid var(--panel-line); border-radius: 14px; background: rgba(10,13,26,.97); box-shadow: 0 22px 54px rgba(0,0,0,.6); }
.wh-wopop[hidden] { display: none; }
.wh-wopop__hd { display: flex; align-items: center; gap: 9px; }
.wh-wopop__id { font: 700 12px var(--mono); color: var(--kernel, #ffd27a); }
.wh-wopop__zn { margin-left: auto; font: 600 8.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; border: 1px solid; border-radius: 999px; padding: 2px 9px; }
.wh-wopop__t { font-family: var(--hud, var(--sans)); font-weight: 650; font-size: 14.5px; color: var(--ink); }
.wh-wopop__s { font-size: 11.5px; color: var(--ink3); line-height: 1.45; } .wh-wopop__s b { color: var(--ink2); }
.wh-wopop__ft { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.wh-wopop__go { flex: 1; text-align: center; border-radius: 10px; padding: 9px; font: 700 11px var(--sans); cursor: pointer;
  border: 1px solid rgba(95,208,160,.5); background: linear-gradient(135deg, rgba(95,208,160,.24), rgba(54,214,224,.12)); color: var(--ink); }
.wh-wopop__go:hover { filter: brightness(1.12); }
.wh-wopop__det { border-radius: 10px; padding: 9px 12px; font: 700 11px var(--sans); cursor: pointer; border: 1px solid var(--panel-line); background: rgba(10,14,30,.6); color: var(--ink2); }
.wh-wopop__det:hover { border-color: var(--violet-line); color: var(--ink); }
/* dual-rail (locked): work heat 3px / budget cyan 3px / elapsed 1.5px */
.wh-drail { display: flex; flex-direction: column; gap: 3px; }
.wh-drail__lr { display: flex; justify-content: space-between; font: 600 8px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.wh-drail__lr .w { color: var(--heat); } .wh-drail__lr .bu { color: var(--cyan); }
.wh-drail__rl { height: 3px; border-radius: 999px; background: rgba(150,160,220,.12); overflow: hidden; }
.wh-drail__rl i { display: block; height: 100%; border-radius: 999px; }
.wh-drail__rl.work i { background: linear-gradient(90deg, var(--heat2, #ffb24d), var(--heat)); }
.wh-drail__rl.budget i { background: linear-gradient(90deg, #1f8f9c, var(--cyan)); }
.wh-drail__rl.elapsed { height: 1.5px; } .wh-drail__rl.elapsed i { background: var(--ink3); }
.wh-drail__note { font: 600 8px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); margin-top: 2px; }