/* ── CSS Custom Properties — Dark (default) ─────────────────────────────── */
:root {
    --bg-1:        #0a0c10;
    --bg-2:        #11151c;
    --bg-3:        #1a1f27;
    --border-1:    #262c36;
    --border-2:    #3d444d;
    --text-1:      #cdd6e0;
    --text-2:      #7d8794;
    --green:       #3fb950;
    --green-dim:   rgba(63,185,80,0.15);
    --glow:        rgba(63,185,80,0.35);
    --blue:        #58a6ff;
    --yellow:      #d29922;
    --red:         #f85149;
    --purple:      #d2a8ff;
    --orange:      #ffa657;
    --flash-col:   rgba(88,166,255,0.25);
    --synth-col:   #7ee787;
    --pattern-col: #d2a8ff;
    --timevar-col: #ffa657;
    --keyword-col: #79c0ff;
    --cp-width:    240px;
    /* CodeMirror token colors — theme-aware */
    --cm-keyword:  #ff7b72;
    --cm-number:   #79c0ff;
    --cm-string:   #a5d6ff;
    --cm-def:      #7ee787;
}

:root.cyberpunk {
    --bg-1:        #0a0a16;
    --bg-2:        #1a1a2e;
    --bg-3:        #0a0a1e;
    --border-1:    #ff2e97;
    --border-2:    #00f6ff;
    --text-1:      #00ff9f;
    --text-2:      #cc6699;
    --green:       #00ff9f;
    --green-dim:   rgba(0,255,159,0.15);
    --glow:        rgba(0,255,159,0.45);
    --blue:        #00f6ff;
    --yellow:      #ffff00;
    --red:         #ff0054;
    --purple:      #ff2e97;
    --orange:      #ff9900;
    --flash-col:   rgba(255,46,151,0.35);
    --synth-col:   #00ff9f;
    --pattern-col: #ff2e97;
    --timevar-col: #ffff00;
    --keyword-col: #00f6ff;
    --cm-keyword:  #ff2e97;
    --cm-number:   #00f6ff;
    --cm-string:   #00ff9f;
    --cm-def:      #ffff00;
}

:root.synthwave {
    --bg-1:        #241734;
    --bg-2:        #2b1d44;
    --bg-3:        #1a102a;
    --border-1:    #6a3fa8;
    --border-2:    #9d5cd0;
    --text-1:      #f3e6ff;
    --text-2:      #c09de0;
    --green:       #72f1b8;
    --green-dim:   rgba(114,241,184,0.15);
    --glow:        rgba(114,241,184,0.4);
    --blue:        #36f9f6;
    --yellow:      #fede5d;
    --red:         #fe4450;
    --purple:      #e040fb;
    --orange:      #fd971f;
    --flash-col:   rgba(224,64,251,0.3);
    --synth-col:   #72f1b8;
    --pattern-col: #e040fb;
    --timevar-col: #fede5d;
    --keyword-col: #36f9f6;
    --cm-keyword:  #fe4450;
    --cm-number:   #36f9f6;
    --cm-string:   #72f1b8;
    --cm-def:      #fede5d;
}

/* Terminal — pure black, green phosphor + amber. */
:root.terminal {
    --bg-1:        #000000;
    --bg-2:        #050805;
    --bg-3:        #0a120a;
    --border-1:    #154015;
    --border-2:    #1f6b1f;
    --text-1:      #33ff66;
    --text-2:      #1f9d4d;
    --green:       #33ff66;
    --green-dim:   rgba(51,255,102,0.15);
    --glow:        rgba(51,255,102,0.45);
    --blue:        #33ddcc;
    --yellow:      #ffcc33;
    --red:         #ff5544;
    --purple:      #66ffaa;
    --orange:      #ffaa33;
    --flash-col:   rgba(51,255,102,0.22);
    --synth-col:   #33ff66;
    --pattern-col: #66ffaa;
    --timevar-col: #ffcc33;
    --keyword-col: #00ffaa;
    --cm-keyword:  #00ffaa;
    --cm-number:   #ffcc33;
    --cm-string:   #66ff99;
    --cm-def:      #33ff66;
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Discreet scrollbars ────────────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--border-1) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-1); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--border-2); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ── Layout ───────────────────────────────────────────────────────────────── */
body {
    background: var(--bg-1);
    color: var(--text-1);
    font-family: 'Courier New', monospace;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: row;
}

#editor-container {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    position: relative;
}

/* ── Toolbar ──────────────────────────────────────────────────────────────── */
#toolbar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    background: linear-gradient(var(--bg-2), var(--bg-1));
    border-bottom: 1px solid var(--border-1);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.title {
    color: var(--green);
    font-size: 13px;
    font-weight: bold;
    margin-right: 4px;
    letter-spacing: 0.5px;
    text-shadow: 0 0 8px var(--glow);
}
.title::before { content: '▸ '; opacity: 0.7; }

button {
    background: var(--bg-3);
    color: var(--text-1);
    border: 1px solid var(--border-1);
    padding: 3px 12px;
    cursor: pointer;
    border-radius: 4px;
    font-family: monospace;
    font-size: 11px;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    white-space: nowrap;
}
button:hover  { background: var(--bg-2); border-color: var(--border-2); color: #fff; }
button:active { background: var(--green-dim); border-color: var(--green); }
button:disabled { opacity: 0.3; cursor: default; }
button:disabled:hover { background: var(--bg-3); border-color: var(--border-1); color: var(--text-1); }
button#btn-boot.booted { background: var(--green-dim); border-color: var(--green); color: var(--green); text-shadow: 0 0 6px var(--glow); }

#bpm-wrap { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-2); }
#bpm-input {
    width: 52px;
    background: var(--bg-1);
    color: var(--text-1);
    border: 1px solid var(--border-1);
    padding: 2px 5px;
    font-family: monospace;
    font-size: 11px;
    border-radius: 4px;
    text-align: center;
    transition: border-color 0.12s, box-shadow 0.12s;
    -moz-appearance: textfield;     /* hide the native number spinners (Firefox) */
    appearance: textfield;
}
/* hide the native number spinners (WebKit/Blink) */
#bpm-input::-webkit-outer-spin-button,
#bpm-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#bpm-input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 2px var(--green-dim); }

#status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-2); flex-shrink: 0; transition: background 0.2s; }
#status-dot.booting { background: var(--yellow); box-shadow: 0 0 6px var(--yellow); }
#status-dot.ready   { background: var(--green); box-shadow: 0 0 6px var(--glow); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.5; } }

#synth-status { font-size: 10px; color: var(--text-2); }

#load-meter { font-size: 10px; color: var(--text-2); font-family: monospace; white-space: nowrap; }
#load-meter.ok  { color: var(--green); }
#load-meter.mid { color: var(--yellow); }
#load-meter.hi  { color: var(--red); }

/* User identity (multiplayer only — revealed via .active) */
#user-box { display: none; align-items: center; gap: 5px; }
#user-box.active { display: flex; }
#user-name {
    width: 92px;
    background: var(--bg-1);
    color: var(--text-1);
    border: 1px solid var(--border-1);
    padding: 2px 7px;
    font-family: monospace;
    font-size: 11px;
    border-radius: 4px;
    transition: border-color 0.12s, box-shadow 0.12s;
}
#user-name:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 2px var(--green-dim); }
#user-color {
    width: 18px; height: 18px; padding: 0;
    border: 1px solid var(--border-1); border-radius: 4px;
    background: none; cursor: pointer; flex-shrink: 0;
}

#theme-select,
#examples-select {
    background: var(--bg-3);
    color: var(--text-2);
    border: 1px solid var(--border-1);
    font-family: monospace;
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 3px;
    cursor: pointer;
}
#examples-select { max-width: 130px; }

#panel-toggle-btn {
    padding: 3px 8px;
    font-size: 10px;
    color: var(--text-2);
}

/* ── Editor ───────────────────────────────────────────────────────────────── */
#editor-wrap { flex: 1; overflow: hidden; min-height: 0; }

.CodeMirror {
    height: 100%;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    background: var(--bg-1);
    color: var(--text-1);
    line-height: 1.55;
}
.CodeMirror-gutters     { background: var(--bg-1); border-right: 1px solid var(--bg-3); }
.CodeMirror-linenumber  { color: var(--border-2); }
.CodeMirror-cursor      { border-left: 2px solid var(--green); }
.CodeMirror-selected    { background: rgba(88,166,255,0.15) !important; }
.CodeMirror-activeline-background { background: var(--bg-2) !important; }
.CodeMirror-matchingbracket { color: var(--green) !important; background: var(--green-dim); font-weight: bold; }
/* Live degree highlight — the array element a player is currently sounding */
.wfd-playing {
    background: rgba(63,185,80,0.45) !important;
    border-radius: 2px;
    box-shadow: 0 0 7px var(--glow);
    color: #fff !important;
    font-weight: bold;
}
/* Hide the editor's horizontal scrollbar (the bar above the log). Long lines
   still scroll via cursor navigation / trackpad; the vertical bar stays. */
.CodeMirror-hscrollbar { display: none !important; }

/* Python token colors — use CSS vars so themes apply */
.cm-keyword  { color: var(--cm-keyword); }
.cm-number   { color: var(--cm-number); }
.cm-string   { color: var(--cm-string); }
.cm-comment  { color: var(--text-2); font-style: italic; }
.cm-operator { color: var(--cm-keyword); }
.cm-def      { color: var(--cm-def); }
/* CodeMirror's default theme colours these dark-purple (#30a) — unreadable on a
   dark editor. Re-map to the theme's variable/def colours. */
.cm-builtin    { color: var(--cm-def); }
.cm-variable-2 { color: var(--cm-def); }
.cm-property   { color: var(--text-1); }
.cm-atom       { color: var(--cm-number); }

/* FoxDot overlay tokens */
.cm-fd-synth    { color: var(--synth-col); font-weight: bold; }
.cm-fd-pattern  { color: var(--pattern-col); }
.cm-fd-timevar  { color: var(--timevar-col); }
.cm-fd-keyword  { color: var(--keyword-col); }
.cm-fd-player   { color: var(--blue); }

/* Flash highlight on eval */
.flash-highlight { background-color: var(--flash-col) !important; transition: background-color 0.4s ease; }

/* ── Log resize handle ────────────────────────────────────────────────────── */
#log-handle {
    height: 4px;
    background: var(--border-1);
    cursor: row-resize;
    flex-shrink: 0;
    transition: background 0.1s;
}
#log-handle:hover { background: var(--blue); }

/* ── Log ──────────────────────────────────────────────────────────────────── */
#log {
    height: 110px;
    overflow-y: auto;
    padding: 4px 10px;
    background: var(--bg-1);
    border-top: 1px solid var(--bg-3);
    font-size: 11px;
    flex-shrink: 0;
    min-height: 30px;
    max-height: 60vh;
}
.log-info  { color: var(--text-2); }
.log-ok    { color: var(--green); }
.log-warn  { color: var(--yellow); }
.log-error { color: var(--red); }
.log-eval  { color: var(--blue); }

/* ── Split view — peers' evals feed (below the shared editor, session only) ─── */
#peer-handle {
    height: 4px;
    background: var(--border-1);
    flex-shrink: 0;
}
#peer-feed {
    height: 30vh;
    overflow-y: auto;
    padding: 6px 10px;
    background: var(--bg-1);
    border-top: 1px solid var(--bg-3);
    font-family: monospace;
    font-size: 12px;
    line-height: 1.45;
    flex-shrink: 0;
    min-height: 40px;
    max-height: 70vh;
}
#peer-feed.hidden, #peer-handle.hidden { display: none; }
.peer-eval { white-space: pre-wrap; word-break: break-word; margin-bottom: 4px; opacity: 0.95; }
.peer-eval .peer-name { font-weight: bold; margin-right: 6px; }
.peer-eval .peer-code { color: var(--text-1); }
.peer-feed-empty { color: var(--text-2); font-style: italic; }

/* ── Zen — hide all UI except the editor (clean view for performing/projection) */
body.zen #toolbar,
body.zen #crash-panel,
body.zen #log,
body.zen #log-handle,
body.zen #peer-feed,
body.zen #peer-handle,
body.zen #docs-panel { display: none !important; }

/* ── Crashpanel ───────────────────────────────────────────────────────────── */
#crash-panel {
    width: var(--cp-width);
    min-width: 160px;
    background: var(--bg-2);
    border-left: 1px solid var(--border-1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100vh;
    height: 100dvh;
    flex-shrink: 0;
    font-size: 11px;
    user-select: none;
    transition: width 0.2s;
}
#cp-header { position: sticky; top: 0; z-index: 2; background: var(--bg-2); }
#crash-panel.hidden { width: 0; border: none; }

#cp-header {
    padding: 5px 10px;
    background: var(--bg-1);
    border-bottom: 1px solid var(--border-1);
    text-align: center;
}
#cp-header .cp-title {
    font-size: 13px;
    font-weight: bold;
    color: var(--green);
    letter-spacing: 1px;
}
#cp-header .cp-subtitle {
    font-size: 9px;
    color: var(--text-2);
    margin-top: 2px;
}

.cp-section {
    padding: 5px 10px;
    border-bottom: 1px solid var(--border-1);
}
.cp-section h3 {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-2);
    margin-bottom: 3px;
}

/* Phrase counters — current bar within 4/8/16/32/64-bar phrases (integer jumps). */
#cp-phrases { display: flex; gap: 2px; margin: 3px 0 4px; }
.cp-phrase {
    flex: 1;
    font-family: monospace;
    font-size: 9px;
    text-align: center;
    padding: 2px 0;
    border-radius: 2px;
    color: var(--text-1);
    background: var(--bg-3);
    overflow: hidden;
    white-space: nowrap;
}

/* Foldable sections — click the header to collapse/expand. */
.cp-fold-h { cursor: pointer; user-select: none; }
.cp-fold-h:hover { color: var(--text-1); }
.cp-fold-h::before {
    content: '▾';
    display: inline-block;
    width: 10px;
    font-size: 8px;
    opacity: 0.6;
    letter-spacing: 0;
}
.cp-section.collapsed .cp-fold-h::before { content: '▸'; }
/* !important: beats ID-level display rules (e.g. #cp-midi-monitor { display:flex }) */
.cp-section.collapsed > *:not(:first-child) { display: none !important; }
.cp-section.collapsed { padding-bottom: 5px; }

.cp-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0;
    color: var(--text-1);
}
.cp-label { color: var(--text-2); }
.cp-value { color: var(--text-1); font-weight: bold; }
.cp-value.green { color: var(--green); }
.cp-value.blue  { color: var(--blue); }
.cp-value.yellow { color: var(--yellow); }

/* Beat display */
#cp-beat {
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    color: var(--green);
    padding: 1px 0;
    letter-spacing: 2px;
}
#cp-beat-sub { font-size: 9px; color: var(--text-2); text-align: center; margin-bottom: 4px; }

/* Players */
#cp-players { display: flex; flex-direction: column; gap: 2px; }

.cp-player-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 4px;
    border-radius: 2px;
    border: 1px solid transparent;
    opacity: 0.4;
    transition: opacity 0.2s, border-color 0.2s;
}
.cp-player-row.active {
    opacity: 1;
    border-color: var(--border-1);
    background: var(--bg-3);
}
.cp-player-name { color: var(--blue); font-weight: bold; flex: 1; }
.cp-player-synth { color: var(--text-2); font-size: 10px; flex: 1; text-align: center; }
.cp-player-age { font-size: 10px; font-family: monospace; margin: 0 6px; min-width: 30px; text-align: right; }
.cp-player-stop {
    background: none;
    border: none;
    color: var(--red);
    cursor: pointer;
    padding: 0 2px;
    font-size: 10px;
    opacity: 0.6;
    border-radius: 2px;
}
.cp-player-stop:hover { opacity: 1; background: rgba(248,81,73,0.15); }

/* MIDI panel */
#cp-midi-status { font-size: 10px; color: var(--text-1); padding: 2px 0; }
.midi-ok  { color: var(--green); }
.midi-bad { color: var(--red); }
.midi-hint { font-size: 10px; color: var(--yellow); font-style: italic; padding: 2px 0; }
#cp-midi-monitor, #cp-midi-bindings { display: flex; flex-direction: column; gap: 1px; margin: 2px 0; }
#cp-midi-bindings { border-top: 1px dashed var(--border-1); padding-top: 2px; }
.midi-row { display: flex; align-items: center; gap: 6px; font-family: monospace; font-size: 10px; }
.midi-cc { color: var(--text-2); min-width: 34px; }
.midi-cc.bound { color: var(--blue); font-weight: bold; }
.midi-meter { color: var(--green); letter-spacing: -1px; flex: 1; }
.midi-val { color: var(--text-1); min-width: 30px; text-align: right; }
.midi-curve { color: var(--text-2); font-style: italic; }

/* Link panel */
#cp-link-status { font-size: 10px; color: var(--text-1); padding: 2px 0; }
.link-row { display: flex; align-items: center; gap: 4px; padding: 1px 0; }
.link-ok  { color: var(--green); }
.link-off { color: var(--text-2); }
.link-wait { color: var(--yellow); }

/* Tap tempo */
#cp-tap {
    width: 100%;
    margin-top: 3px;
    background: var(--bg-3);
    color: var(--text-2);
    border: 1px solid var(--border-1);
    padding: 3px;
    font-size: 10px;
    cursor: pointer;
    border-radius: 3px;
    font-family: monospace;
}
#cp-tap:hover { color: var(--text-1); border-color: var(--blue); }
#cp-tap.tapping { color: var(--blue); border-color: var(--blue); }

/* Scale/Root selects */
.cp-select {
    background: var(--bg-3);
    color: var(--text-1);
    border: 1px solid var(--border-1);
    font-family: monospace;
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 2px;
    cursor: pointer;
    width: 100%;
    margin-top: 2px;
}

/* ── CodeMirror show-hint ─────────────────────────────────────────────────── */
.CodeMirror-hints {
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    font-family: monospace;
    font-size: 12px;
    max-height: 300px;
    z-index: 9999;
    padding: 2px;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.CodeMirror-hint {
    color: var(--text-1);
    padding: 3px 10px;
    border-left: 2px solid transparent;
}
.CodeMirror-hint-active {
    background: var(--bg-3) !important;
    border-left-color: var(--blue) !important;
    color: var(--text-1) !important;
}
.hint-synth    { color: var(--synth-col); }
.hint-fx       { color: var(--purple); }
.hint-pattern  { color: var(--pattern-col); }
.hint-timevar  { color: var(--timevar-col); }
.hint-method   { color: var(--blue); }
.hint-param    { color: var(--text-1); }
.hint-sep {
    background: var(--bg-1);
    color: var(--text-2);
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 10px 2px;
    cursor: default;
    pointer-events: none;
}

/* ── Docs panel ───────────────────────────────────────────────────────────────── */
#docs-panel {
    position: absolute;
    inset: 0;
    background: var(--bg-1);
    display: flex;
    flex-direction: column;
    z-index: 100;
    border-right: 1px solid var(--border-1);
    transition: opacity 0.15s;
}
#docs-panel.hidden { display: none; }

#docs-header {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 8px 0 0;
    border-bottom: 1px solid var(--border-1);
    background: var(--bg-2);
    flex-shrink: 0;
}

.docs-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--text-2);
    font-size: 11px;
    padding: 7px 14px;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: color 0.1s, border-color 0.1s;
}
.docs-tab:hover  { color: var(--text-1); background: none; }
.docs-tab.active { color: var(--blue); border-bottom-color: var(--blue); }

#docs-close {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-2);
    font-size: 14px;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 3px;
}
#docs-close:hover { color: var(--red); background: none; }

#docs-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 18px;
    font-size: 12px;
    line-height: 1.6;
}

/* Tables */
.docs-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 4px;
}
.docs-table th {
    text-align: left;
    color: var(--text-2);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 8px 6px;
    border-bottom: 1px solid var(--border-1);
}
.docs-table td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--bg-3);
    vertical-align: top;
}
.docs-table tr:last-child td { border-bottom: none; }
.docs-table tr:hover td { background: var(--bg-2); }

.docs-key {
    color: var(--blue);
    font-weight: bold;
    white-space: nowrap;
    min-width: 160px;
}
.docs-val {
    color: var(--orange);
    font-size: 11px;
    white-space: nowrap;
}

.docs-group-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-2);
    padding: 6px 0 4px;
    border-bottom: 1px solid var(--border-1);
    margin-bottom: 4px;
}

/* Synths grid */
.docs-synth {
    padding: 8px 10px;
    border: 1px solid var(--border-1);
    border-radius: 4px;
    margin-bottom: 6px;
    background: var(--bg-2);
}
.docs-synth:hover { border-color: var(--border-2); }
.docs-synth-name {
    color: var(--synth-col);
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 5px;
}
.docs-synth-params {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
}
.docs-synth-params .docs-param {
    color: var(--text-2);
}
.docs-synth-params .docs-param::after { content: '='; color: var(--border-2); }
.docs-synth-params .docs-val {
    color: var(--orange);
}

.docs-fx-group { margin-bottom: 16px; }

/* Guide tab */
.docs-section {
    border: 1px solid var(--border-1);
    border-radius: 5px;
    margin-bottom: 18px;
    overflow: hidden;
}
.docs-section-title {
    background: var(--bg-2);
    border-bottom: 1px solid var(--border-1);
    padding: 7px 14px;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.8px;
    color: var(--green);
    text-transform: uppercase;
}
/* Category header on the Examples page — groups sections like the dropdown optgroups */
.docs-cat {
    margin: 16px 0 2px;
    padding: 4px 14px;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--amber, #e0a030);
    border-bottom: 2px solid var(--border-1);
}
.docs-cat:first-child { margin-top: 0; }
.docs-sub-title {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-2);
    padding: 12px 14px 4px;
}
.docs-step {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 5px 14px 2px;
    font-size: 12px;
}
.docs-step-n {
    background: var(--border-1);
    color: var(--text-2);
    border-radius: 50%;
    width: 17px;
    height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: bold;
    flex-shrink: 0;
}
.docs-code {
    background: var(--bg-1);
    border-top: 1px solid var(--bg-3);
    border-bottom: 1px solid var(--bg-3);
    margin: 4px 0;
    padding: 8px 18px;
    font-size: 11px;
    line-height: 1.7;
    color: var(--text-1);
    overflow-x: auto;
    white-space: pre;
    font-family: 'Courier New', monospace;
    cursor: copy;
    position: relative;
    transition: background 0.2s;
}
.docs-code:hover { background: var(--bg-2); }
.docs-code.copied { background: var(--green-dim); }
.docs-code.copied::after {
    content: "copied ✓";
    position: absolute;
    top: 4px; right: 8px;
    font-size: 9px;
    color: var(--green);
}
.docs-note {
    background: rgba(88,166,255,0.07);
    border-left: 3px solid var(--blue);
    margin: 6px 14px;
    padding: 5px 10px;
    font-size: 11px;
    color: var(--text-2);
    line-height: 1.5;
}
.docs-note code, .docs-step code {
    background: var(--bg-3);
    border-radius: 3px;
    padding: 0 4px;
    font-size: 11px;
    color: var(--orange);
}

/* Section sequencer tokens */
.cm-foxdot-track   { color: var(--orange); font-weight: bold; }
.cm-foxdot-section { color: var(--yellow); font-weight: bold; }

/* Active #@ section — persistent highlight + a blink when it (re)evaluates */
.section-active { box-shadow: inset 3px 0 0 var(--green); background: rgba(63,185,80,0.10); }
.section-blink  { animation: section-blink-anim 0.65s ease; }
@keyframes section-blink-anim {
    0%   { background: rgba(63,185,80,0.5); }
    100% { background: rgba(63,185,80,0.10); }
}

/* Session / peers panel (multiplayer only — revealed via .active) */
#cp-session { display: none; }
#cp-session.active { display: block; }
#cp-peers { display: flex; flex-direction: column; gap: 3px; }
.cp-peer { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-1); }
.cp-peer-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 4px currentColor; }
.cp-peer-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Session chat */
#cp-chat-log { margin-top: 8px; max-height: 160px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.cp-chat-msg { font-size: 11px; color: var(--text-1); line-height: 1.35; word-break: break-word; }
.cp-chat-name { font-weight: bold; margin-right: 2px; }
#cp-chat-input {
    width: 100%; margin-top: 5px;
    background: var(--bg-1); color: var(--text-1);
    border: 1px solid var(--border-1); border-radius: 4px;
    padding: 3px 7px; font-family: monospace; font-size: 11px;
    transition: border-color 0.12s, box-shadow 0.12s;
}
#cp-chat-input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 2px var(--green-dim); }

/* Composition parts panel */
#cp-parts { display: flex; flex-direction: column; gap: 2px; }
.cp-part {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    cursor: pointer;
    color: var(--text-2);
    display: flex;
    align-items: center;
    gap: 6px;
}
.cp-part .cp-part-name { flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-prog { display: inline-flex; flex-wrap: wrap; gap: 2px; margin-left: auto; justify-content: flex-end; }
.cp-prog i { width: 5px; height: 5px; border-radius: 1px; background: var(--border-1); transition: background 0.1s; }
.cp-prog i.on { background: var(--green); box-shadow: 0 0 3px var(--glow); }
.cp-part:hover { background: var(--bg-3); color: var(--text-1); }
.cp-part.track { color: var(--orange); font-weight: bold; margin-top: 4px; cursor: default; }
.cp-part.track:hover { background: none; }
.cp-part.active { color: var(--green); background: var(--green-dim); font-weight: bold; }
.cp-part .cp-part-beats { color: var(--text-2); font-size: 9px; margin-left: 4px; }
#cp-autoplay { font-size: 9px; color: var(--text-2); margin: 2px 0 4px; }
#cp-autoplay.on { color: var(--green); }

#cp-stop-autoplay { width: 100%; padding: 4px; margin-bottom: 6px; font-size: 10px; }
#cp-stop-autoplay:not(:disabled) { border-color: var(--red); color: var(--red); }
#cp-stop-autoplay:not(:disabled):hover { background: rgba(248,81,73,0.12); }

/* Rec buttons — blink red while recording */
button.recording {
    color: var(--red);
    border-color: var(--red);
    animation: rec-blink 1s steps(1) infinite;
}
@keyframes rec-blink { 50% { opacity: 0.45; } }

/* Alt+I inspector tooltip */
.wfd-tip {
    position: absolute;
    z-index: 9999;
    max-width: 420px;
    background: var(--bg-2);
    border: 1px solid var(--border-2);
    border-radius: 5px;
    padding: 7px 10px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: var(--text-1);
    box-shadow: 0 4px 14px rgba(0,0,0,0.5);
    pointer-events: none;
    line-height: 1.5;
}
.wfd-tip-kind {
    display: inline-block;
    font-size: 9px;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 3px;
    margin-right: 6px;
    background: var(--bg-3);
    color: var(--text-2);
}
.wfd-kind-synth    { color: var(--green); }
.wfd-kind-fx       { color: var(--orange); }
.wfd-kind-pattern  { color: var(--purple); }
.wfd-kind-timevar  { color: var(--orange); }
.wfd-kind-function { color: var(--blue); }
.wfd-tip-sig  { color: var(--green); font-weight: bold; }
.wfd-tip-desc { margin-top: 5px; color: var(--text-2); }
.wfd-tip-val  {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid var(--border-1);
    color: var(--blue);
    word-break: break-all;
}

/* Changelog list */
.docs-changelog { margin: 4px 0 0 0; padding-left: 18px; }
.docs-changelog li { font-size: 11px; line-height: 1.6; color: var(--text-1); margin-bottom: 3px; }
.docs-link {
    color: var(--blue);
    cursor: pointer;
    white-space: nowrap;
    font-weight: bold;
}
.docs-link:hover { text-decoration: underline; }

/* Brief highlight when an example is jumped to from the changelog */
.ex-flash { animation: ex-flash-anim 1.2s ease; }
@keyframes ex-flash-anim {
    0%   { background: var(--flash-col); }
    100% { background: transparent; }
}

/* Version label next to the title — clickable, opens the changelog */
.version-tag {
    font-size: 10px;
    color: var(--text-2);
    border: 1px solid var(--border-1);
    border-radius: 3px;
    padding: 1px 5px;
    margin-left: -2px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.version-tag:hover { color: var(--green); border-color: var(--green); }

/* Multiplayer cursors (Yjs awareness) */
.remote-caret {
    position: absolute;
    border-left: 2px solid;
    height: 1.2em;
    pointer-events: none;
}
.remote-caret-label {
    position: absolute;
    top: -1.2em;
    left: -1px;
    font-size: 10px;
    padding: 0 3px;
    border-radius: 3px 3px 3px 0;
    white-space: nowrap;
    pointer-events: none;
}