/* Stage-Ansicht: 3D links, Cue-Panel rechts. Farben aus dem NC Design System. */
:root {
  --nc-offwhite: #FCFDFF;
  --nc-offblack: #0A0A0A;
  --nc-pink: #D81E5B;
  --nc-pink-l: #FFBCE6;
  --nc-cyan: #ABF0FF;
  --nc-grey: #8A8F99;
  --panel-w: 320px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--nc-offblack);
  color: var(--nc-offwhite);
  font-family: "Space Grotesk", system-ui, sans-serif;
}

#viewport { position: fixed; inset: 0 var(--panel-w) 0 0; }
#gl, #css3d { position: absolute; inset: 0; }
/* CSS3D-Ebene liegt oben, lässt Maus aber zur 3D-Navigation durch. Nur die Screens fangen Klicks. */
#css3d { pointer-events: none; }
#css3d iframe { pointer-events: auto; border: 0; background: var(--nc-offwhite); }

#cue-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: var(--panel-w);
  background: var(--nc-offwhite); color: var(--nc-offblack);
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px; overflow-y: auto;
  border-left: 1px solid #dfe2e8;
}
.label {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  letter-spacing: .08em; color: var(--nc-grey);
}
.cue-current { font-size: 18px; font-weight: 600; margin-top: 4px; }
.cue-buttons { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
button {
  font: inherit; font-size: 14px; padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--nc-offblack); background: transparent; color: var(--nc-offblack);
}
button.go { background: var(--nc-pink); border-color: var(--nc-pink); color: var(--nc-offwhite); font-weight: 600; }
button:focus-visible { outline: 2px solid var(--nc-cyan); outline-offset: 2px; }

#cue-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #dfe2e8; }
#cue-list li {
  display: grid; grid-template-columns: 56px 1fr; gap: 8px;
  padding: 8px 4px; border-bottom: 1px solid #eef0f4; cursor: pointer;
}
#cue-list li .id { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--nc-grey); }
#cue-list li .phase { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--nc-grey); }
#cue-list li.active { background: var(--nc-pink-l); }
#cue-list li.active .id { color: var(--nc-pink); }

.block { display: flex; flex-direction: column; gap: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { font-size: 12px; padding: 6px 8px; }
#log {
  margin: 0; font-family: "JetBrains Mono", monospace; font-size: 11px;
  max-height: 160px; overflow-y: auto; white-space: pre-wrap; color: #444;
}

#light-pane { position: fixed; top: 12px; left: 12px; width: 280px; }