:root {
  /* Surfaces */
  --bg:     #0f0f17;
  --s0:     #0c0c18;
  --s1:     #16162a;
  --s2:     #1e1e35;
  --s3:     #262642;
  --border: #2a2a48;
  --border-soft: #22223e;

  /* Chrome accent — used ONLY for focus, links, neutral UI accents.
     Never for live-show state (see semantic tokens below). */
  --accent: #6366f1;
  --acc2:   #4f52c8;
  --accent-soft: rgba(99,102,241,.14);

  /* Generic feedback */
  --green:  #22c55e;
  --red:    #ef4444;
  --amber:  #fbbf24;

  /* Type */
  --text:   #f1f1fb;
  --muted:  #9494c2;
  --muted-2:#6c6c93;

  /* Semantic tokens — reserved colors for live state.
     Do not reuse for chrome. */
  --cue-standby:    #a5b4fc;   /* "next on GO" */
  --cue-standby-bg: rgba(165,180,252,.55);
  --cue-running:    #4ade80;   /* fading in */
  --cue-running-bg: rgba(74,222,128,.32);
  --cue-last:       #f59e0b;   /* most-recently fired */
  --cue-last-bg:    rgba(245,158,11,.22);

  --device-ok:      #22c55e;
  --device-off:     #ef4444;
  --device-warn:    #f5a524;

  --copilot-width: 460px;
  --app-font-scale: 1.35;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.45;
  zoom: var(--app-font-scale);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex; flex-direction: column;
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.app-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: margin-right 0.28s ease;
}
body.copilot-open .app-shell {
  margin-right: var(--copilot-width);
}
body.copilot-resizing .app-shell {
  transition: none;
}

/* ── Output cell: dim when at zero ──────────────────────
   When the fill bar height is exactly 0%, the channel is
   either unpatched or held at 0. Either way it should
   visually recede so the lit channels pop. */
.cell:has(.cell-bg[style*="height: 0%"]) .cell-v {
  color: var(--muted-2);
  opacity: .45;
}
.cell:has(.cell-bg[style*="height: 0%"]) .cell-icon {
  opacity: .35;
}

/* ── Wordmark ──────────────────────────────────────────
   Replaces the old italic-<em> color-swap with a unified
   weight + a small mark. Set per-spot in HTML. */
.brand-mark {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.brand-mark em {
  /* legacy em is now plain — not colored, not italic */
  font-style: normal;
  color: inherit;
}
.brand-glyph {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background:
    conic-gradient(from -90deg, var(--accent) 0 25%, transparent 25% 100%);
  box-sizing: border-box;
}
.brand-glyph.lg { width: 22px; height: 22px; }

/* Workflow step kicker — shared by the Step 1/2/3 empty screens. */
.step-kicker {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 10px;
}
.step-kicker span { color: var(--accent); }

/* Stage width/depth axis labels (rig hero + design preview), fed from the
   linked theatre's venue profile. Empty labels collapse. */
.stage-dim {
  position: absolute;
  z-index: 5;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--muted);
  background: rgba(15, 15, 23, .6);
  border-radius: 5px;
  padding: 1px 8px;
  pointer-events: none;
  white-space: nowrap;
}
.stage-dim:empty { display: none; }
.stage-dim-w { bottom: 5px; left: 50%; transform: translateX(-50%); }
.stage-dim-d { right: 0; top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: 50% 50%; margin-right: -2px; }