/* BlueBox Phase 3 · BGF measure · SDF place · SPV free · never fold */
:root {
  --bgs: #050607;
  --sdf-shell: #121816;
  --sdf-edge: #1e2822;
  --bgf: #05f2a0;
  --spv: #7aa2ff;
  --ezzie: #e8c547;
  --text: #e8e4df;
  --mute: #8a9188;
  --hot: #ff2a6d;
  --phi: #2de2e6;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bgs);
  color: var(--text);
  font-family: system-ui, sans-serif;
}

/* SDF raised shell */
.raised-sdf {
  border: 1px solid var(--sdf-edge);
  background: linear-gradient(165deg, #121816, #0c100e);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(0,0,0,.45);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  padding: 14px 16px;
  margin: 10px 0;
}

.neon {
  height: 5px;
  background: linear-gradient(90deg, var(--hot), var(--bgf), var(--phi), var(--ezzie));
}

.wrap { max-width: 960px; margin: 0 auto; padding: 16px; }

.brand b {
  color: var(--ezzie);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 14px;
}
.brand span { display: block; color: var(--mute); font-size: 12px; margin-top: 4px; }

.layers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.layer {
  border: 1px solid var(--sdf-edge);
  background: #0a0e0c;
  padding: 10px 12px;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.layer.on { opacity: 1; }
.layer.off { opacity: .4; }
.layer.bgf { color: var(--bgf); border-color: #0a3d2a; }
.layer.sdf { color: #c4b8a8; }
.layer.spv { color: var(--spv); border-color: #1a2a4a; }
.layer.ezzie { color: var(--ezzie); border-color: #3d3510; }

.hud {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: var(--bgf);
  margin-top: 12px;
  min-height: 1.4em;
  white-space: pre-wrap;
}
.hud .spv { color: var(--spv); }
.hud .ezzie { color: var(--ezzie); }

.stage {
  min-height: 200px;
  background: #000;
  border: 1px solid var(--sdf-edge);
  position: relative;
  overflow: hidden;
}
.stage canvas { display: block; width: 100%; height: 220px; }

.note { color: var(--mute); font-size: 12px; line-height: 1.45; margin-top: 12px; }
.phase-pill {
  display: inline-block;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid var(--sdf-edge);
  padding: 3px 8px;
  margin-right: 6px;
  color: var(--mute);
}
.phase-pill.live { color: var(--bgf); border-color: #0a3d2a; }
.phase-pill.dead { color: var(--hot); text-decoration: line-through; }
.phase-pill.next { color: var(--spv); }

/* SPV free sparks — never rewrite SDF geometry */
.spv-spark {
  position: absolute;
  width: 3px; height: 3px;
  background: var(--spv);
  border-radius: 1px;
  pointer-events: none;
  opacity: .85;
}

/* Phase 4 · ESSIE full plug dock */
.phase-pill.done { color: var(--ezzie); border-color: #3d3510; }
#plug-dock {
  margin-top: 12px;
  border: 1px solid var(--sdf-edge);
  background: #0a0e0c;
  padding: 10px;
}
.dock-head {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ezzie);
  margin-bottom: 8px;
}
.dock-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 160px;
  overflow: auto;
}
.plug-btn {
  appearance: none;
  border: 1px solid var(--sdf-edge);
  background: #050807;
  color: var(--text);
  font-size: 11px;
  padding: 6px 8px;
  cursor: pointer;
  letter-spacing: .04em;
}
.plug-btn:hover { border-color: var(--spv); color: var(--spv); }
.plug-btn.active {
  border-color: var(--ezzie);
  color: var(--ezzie);
  background: #141208;
}
#plug-stage {
  min-height: 160px;
  margin-top: 10px;
}
.plug-shell { margin: 0; }
.plug-title {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--spv);
  margin-bottom: 8px;
}
.plug-title .mute { color: var(--mute); font-size: 10px; text-transform: none; }
.plug-root { min-height: 72px; }
.spv-hud {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: var(--bgf);
  margin-top: 6px;
}
.finished-banner {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid #3d3510;
  color: var(--ezzie);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}