/* SPDX-License-Identifier: MIT */
/* The board: flat, clean cards (spec §9.3). */
:root {
  --bg: #15171c;
  --canvas: #111317;
  --panel: #1d2027;
  --panel-2: #252932;
  --panel-3: #2d323d;
  --line: #333845;
  --text: #e7e9ee;
  --muted: #8b92a3;
  --accent: #4fd1c5;
  --mod: #f6c35b;
  --warn: #ff7a6b;
  --sel: #7aa7ff;
  --node-w: 184px;
  /* Signal colours (spec §7.1) */
  --sig-control: #f6c35b;
  --sig-gate: #5bd17a;
  --sig-trigger: #5bd17a;
  --sig-pitch: #60a5fa;
  --sig-audio: #ff6b6b;
  --sig-notes: #a78bfa;
  --sig-patchbay: #e5e7eb;
  --sig-any: #f472b6;   /* patch bay inlets: they take any cable but notes */
  font: 13px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden; }
body { display: flex; flex-direction: column; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--line);
         border-radius: 6px; padding: 3px 10px; cursor: pointer; }
button:hover { background: var(--panel-3); }
button:disabled { opacity: .4; cursor: default; }
kbd { font: inherit; font-size: 11px; color: var(--muted); }

/* ---- top bar */
#top { display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 41px; box-sizing: border-box; background: var(--panel);
       border-bottom: 1px solid var(--line); flex: none; }
#crumbs { display: flex; align-items: center; gap: 4px; font-weight: 600; }
#crumbs a { color: var(--muted); cursor: pointer; text-decoration: none; }
#crumbs a:hover { color: var(--text); }
#crumbs .here { color: var(--text); }
#crumbs .sep { color: var(--line); }
.spacer { flex: 1; }
#status { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- layout */
#main { flex: 1; display: flex; min-height: 0; }

/* ---- canvas */
#canvas { flex: 1; position: relative; overflow: hidden; background: var(--canvas); outline: none;
          background-image: radial-gradient(var(--panel-2) 1px, transparent 1px); background-size: 24px 24px; }
#world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
#cables { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
#nodes { position: absolute; left: 0; top: 0; }
#band { position: absolute; border: 1px solid var(--sel); background: rgba(122, 167, 255, .08); pointer-events: none; }
#empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
         color: var(--muted); font-size: 14px; pointer-events: none; padding: 40px; }
#cell-close { position: absolute; top: 50px; right: 12px; z-index: 6; }
#navbar { position: absolute; top: 10px; right: 12px; z-index: 6; display: flex; align-items: center; gap: 2px; padding: 3px;
          background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
#navbar button { width: 26px; height: 24px; padding: 0; line-height: 1; font-size: 14px; background: transparent; border-color: transparent; }
#navbar button:hover { background: var(--panel-3); }
#navbar .nav-sep { width: 1px; height: 16px; margin: 0 3px; background: var(--line); }
#hint { position: absolute; left: 12px; bottom: 10px; color: var(--muted); font-size: 11px; pointer-events: none; }

/* ---- nodes */
.node { position: absolute; width: var(--node-w); background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.node.port { border-left: 4px solid var(--accent); border-radius: 0 8px 8px 0; }
.node.cell { border: 2px solid #59607080; background: var(--panel-2); }
.node.voice { border-color: #c084fc80; }
.node.drop-target { border-color: var(--sel); box-shadow: 0 0 0 3px var(--sel); }
.n-voices { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; padding: 0 8px 6px; }
.vdot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.vdot.on { background: #c084fc; box-shadow: 0 0 4px #c084fc; }
.n-warn { margin-left: auto; color: var(--warn); font-size: 10px; }
.node.boundary { background: var(--panel-2); border-style: dashed; }
.node.selected { border-color: var(--sel); box-shadow: 0 0 0 1px var(--sel); }
.node.port.selected { border-left-color: var(--accent); }
.node.ghost { opacity: .5; border-style: dashed; }
.node.bypassed { border-style: dashed; }
.node.bypassed .n-title { opacity: .6; }
.node.muted .n-head { text-decoration: line-through; color: var(--muted); }
.node.dim { opacity: .25; }
.node.flash { animation: flash 1.2s ease-out; }
@keyframes flash { 0% { box-shadow: 0 0 0 6px var(--sel); } 100% { box-shadow: 0 0 0 0 transparent; } }
.n-head { display: flex; align-items: baseline; gap: 6px; padding: 6px 8px 4px; cursor: move; }
.n-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.n-sub { color: var(--muted); font-size: 11px; margin-left: auto; white-space: nowrap; overflow: hidden;
         text-overflow: ellipsis; max-width: 80px; }
.n-badge { font-size: 10px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.n-rename { width: 100%; font: inherit; font-weight: 600; color: var(--text); background: var(--panel-3);
            border: 1px solid var(--sel); border-radius: 4px; padding: 0 4px; }
.n-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); padding: 0 0 6px; cursor: move; }
.n-ins, .n-outs { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.jack { display: flex; align-items: center; gap: 5px; height: 18px; font-size: 11px; color: var(--muted); min-width: 0; }
.jack .jl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jack.in { padding-left: 0; }
.jack.out { justify-content: flex-end; }
.jack.param .jl { font-style: italic; color: var(--mod); }
.dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--c, var(--muted)); background: var(--canvas);
       flex: none; cursor: crosshair; }
.jack.in .dot { margin-left: -6px; }
.jack.out .dot { margin-right: -6px; background: var(--c, var(--muted)); }
.jack.connected .dot { background: var(--c); }
.jack.add { color: var(--muted); font-style: italic; opacity: .6; }
.jack.more { justify-content: flex-end; color: var(--muted); cursor: pointer; padding-right: 8px; }
.jack.more:hover { color: var(--text); }
.jack.add .dot { border-style: dashed; }
.jack.drop-ok .dot { box-shadow: 0 0 0 4px rgba(255, 255, 255, .25); }
.jack.drop-no { opacity: .3; }
/* The port a drop would reach right now: the dot swells with a ring, the label lights up. */
.jack.drop-hover .dot { background: var(--c, #fff); transform: scale(1.5); box-shadow: 0 0 0 4px rgba(255, 255, 255, .55), 0 0 10px var(--c, #fff); }
.jack.drop-hover .jl { color: var(--text); }
canvas.scope { width: 34px; height: 12px; flex: none; }
.zoomed-out .jack .jl, .zoomed-out canvas.scope { visibility: hidden; }

/* ---- cables */
.cable { fill: none; stroke: var(--c); stroke-width: 2.2; stroke-linecap: round; opacity: .9; }
.cable.notes { stroke-width: 4; }
.cable.trigger { stroke-dasharray: 5 4; }
.cable.ghost, .cable.dim { opacity: .2; }
.cable.selected { stroke-width: 4; opacity: 1; filter: drop-shadow(0 0 3px var(--c)); }
.cable.hover { opacity: 1; stroke-width: 3.4; filter: drop-shadow(0 0 3px var(--c)); }
.cable.notes.hover { stroke-width: 5; }
.cable.temp { stroke-dasharray: 6 4; opacity: .8; }
/* Signal pulse: faint light travelling from output to input while the signal moves. */
.cable-pulse { fill: none; stroke: var(--c); stroke-width: 2.2; stroke-linecap: round; pointer-events: none;
               stroke-dasharray: 10 70; opacity: calc(var(--act, 0) * .55); filter: brightness(1.8) blur(.6px);
               transition: opacity .25s linear; animation: cable-pulse 1.4s linear infinite; }
.cable.notes + .cable-pulse { stroke-width: 4; }
@keyframes cable-pulse { from { stroke-dashoffset: 80; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .cable-pulse { animation: none; stroke-dasharray: none; opacity: calc(var(--act, 0) * .25); } }
/* Activity meter at the input end of the hovered cable. */
.cable-meter { position: absolute; z-index: 5; pointer-events: none; display: flex; flex-direction: column; gap: 3px; padding: 5px 7px;
               background: var(--panel); border: 1px solid var(--c, var(--line)); border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.cable-meter canvas { display: block; }
.cable-meter .cm-val { font-size: 10px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--muted); text-align: right; }
.cable-hit { fill: none; stroke: transparent; stroke-width: 12; pointer-events: stroke; cursor: pointer; }

/* ---- popovers */
.popover { position: absolute; z-index: 20; background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
           box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
#search { width: 260px; padding: 6px; }
#search-input { width: 100%; font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--line);
                border-radius: 6px; padding: 5px 8px; outline: none; }
#search-list { max-height: 300px; overflow-y: auto; margin-top: 4px; }
.s-item { padding: 4px 8px; border-radius: 5px; cursor: pointer; display: flex; gap: 8px; align-items: baseline; }
.s-item .sub { color: var(--muted); font-size: 11px; margin-left: auto; }
.s-item.active { background: var(--panel-3); }
#menu, .submenu { padding: 4px; min-width: 190px; }
.submenu { z-index: 21; max-height: 70vh; overflow-y: auto; }
.m-item.has-sub .key { margin-left: auto; }
.m-item { padding: 5px 10px; border-radius: 5px; cursor: pointer; display: flex; gap: 12px; }
.m-item:hover { background: var(--panel-3); }
.m-item .key { margin-left: auto; color: var(--muted); font-size: 11px; }
.m-item.disabled { color: var(--muted); pointer-events: none; }
/* A preset's description under its menu (or the search list) while it is hovered or active. */
.m-hint, #search-hint { color: var(--muted); font-size: 11px; line-height: 1.35; padding: 6px 10px 4px;
  border-top: 1px solid var(--line); margin-top: 4px; max-width: 260px; min-height: 2.7em; white-space: normal; }
#search-hint { max-width: none; }
.m-hint:empty::before { content: "\00a0"; }
.m-ask { padding: 6px; display: flex; flex-direction: column; gap: 6px; width: 220px; }
.m-ask-label { color: var(--muted); font-size: 11px; }
.m-sep { height: 1px; background: var(--line); margin: 4px 0; }
#cable-pop { padding: 8px 10px; display: flex; align-items: center; gap: 8px; font-size: 12px; }
#cable-pop input[type=range] { width: 120px; accent-color: var(--mod); }
#cable-pop .v { font-variant-numeric: tabular-nums; width: 40px; text-align: right; }

/* ---- floating module views (spec §9.4) */
/* its own stacking context: the windows' ever-growing z-index must never climb over menus and popovers (z-index 20+) */
#views { position: absolute; inset: 0; pointer-events: none; z-index: 7; }
.vwin { position: absolute; pointer-events: auto; width: 760px; max-width: calc(100vw - 24px); background: var(--panel); border: 1px solid var(--line);
        border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); overflow: hidden; }
.vwin.front { z-index: 5; }
.v-grip { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; touch-action: none;
          background: linear-gradient(135deg, transparent 50%, var(--muted) 50%, var(--muted) 56%, transparent 56%,
                                       transparent 70%, var(--muted) 70%, var(--muted) 76%, transparent 76%); opacity: .6; }
.v-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; background: var(--panel-2);
          border-bottom: 1px solid var(--line); cursor: move; }
.v-title { font-weight: 600; color: var(--accent); }
.v-head .pen { opacity: .5; font-size: 12px; }
.v-head .pen:hover { opacity: 1; }
.v-rename { width: 140px; flex: none; }
.v-sub { color: var(--muted); font-size: 11px; }
.v-head button { background: none; border: 0; padding: 0 4px; color: var(--muted); }
.v-head button:hover { color: var(--text); }
.v-head .help.on { color: var(--accent); }
.v-head .pin { opacity: .45; filter: grayscale(1); transform: rotate(45deg); }
.v-head .pin.on { opacity: 1; filter: none; transform: none; }
.v-head .help { font-weight: 700; width: 20px; height: 20px; border: 1px solid var(--line); border-radius: 50%;
                padding: 0; font-size: 11px; line-height: 18px; }
.v-head .help.on { border-color: var(--accent); }
.v-head .spacer { flex: 1; }
.v-head .power { font-size: 14px; }
.v-head .power.on { color: var(--accent); text-shadow: 0 0 6px var(--accent); }
.v-body { max-height: 70vh; overflow-y: auto; }
.vwin.port { width: fit-content; min-width: 260px; max-width: min(520px, calc(100vw - 24px)); }
.vwin.doc { width: 560px; }
.vwin.wiring { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; }
.vwin.wiring .v-head { grid-column: 1 / -1; }
.v-ins { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px 6px 12px; max-width: 140px;
         border-right: 1px solid var(--line); background: var(--panel-2); }

/* ---- module documentation (bleep-markdown.js) */
.v-doc { padding: 4px 16px 16px; font-size: 12.5px; line-height: 1.5; user-select: text; -webkit-user-select: text; }
.v-doc h1 { font-size: 17px; margin: 10px 0 6px; color: var(--accent); }
.v-doc h2 { font-size: 13px; margin: 18px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.v-doc h3 { font-size: 11px; margin: 14px 0 4px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.v-doc p, .v-doc ul, .v-doc ol { margin: 6px 0; }
.v-doc ul, .v-doc ol { padding-left: 18px; }
.v-doc li { margin: 3px 0; }
.v-doc strong { color: var(--text); font-weight: 600; }
.v-doc em { color: #c7ccd8; }
.v-doc code { font: 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--panel-2); border-radius: 4px; padding: 0 3px; }
.v-doc pre { background: var(--panel-2); border-radius: 6px; padding: 8px 10px; overflow-x: auto; }
.v-doc pre code { background: none; padding: 0; }
.v-doc table { border-collapse: collapse; width: 100%; margin: 6px 0; font-size: 12px; }
.v-doc th, .v-doc td { text-align: left; vertical-align: top; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.v-doc th { color: var(--muted); font-weight: 500; font-size: 11px; }
.v-doc img { max-width: 100%; border-radius: 6px; }
.v-doc a { color: var(--accent); }
/* A jack hidden by the module's current mode but still patched (JackSpec::show). */
.jack.unused { opacity: .45; }
.jack.unused .jl { text-decoration: line-through; }
/* Short notices (e.g. a memory-heavy module inside a Voice Cell). */
.board-notice { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
                background: var(--panel-2, #20242c); color: var(--text, #e6e6e6); border: 1px solid var(--line, #333);
                border-radius: 8px; padding: 8px 14px; font-size: 12px; transition: opacity .2s, transform .2s; z-index: 1000; }
.board-notice.show { opacity: 1; transform: translate(-50%, 0); }

/* ---- front panels (panels.js, doc/specs/panels.md) ---- */
.n-panel { margin-left: auto; background: none; border: 0; padding: 0 2px; color: var(--muted); font-size: 14px; cursor: pointer; }
.n-panel:hover { color: var(--accent); }
.n-help { background: none; border: 1px solid var(--muted); border-radius: 50%; width: 15px; height: 15px; padding: 0; margin-left: 4px;
  color: var(--muted); font-size: 10px; line-height: 13px; font-weight: 600; cursor: pointer; flex: none; }
.n-help.first { margin-left: auto; }
.n-help:hover { color: var(--accent); border-color: var(--accent); }
#help-pop { width: 320px; max-height: 70vh; overflow-y: auto; padding: 10px 12px; font-size: 12px; line-height: 1.45; white-space: normal; }
#help-pop .h-title { font-weight: 600; margin-bottom: 6px; }
#help-pop p { margin: 0 0 8px; color: var(--text, inherit); }
#help-pop .h-fig { margin: 4px 0 8px; }
#help-pop .h-fig img { max-width: 100%; border-radius: 4px; display: block; }
#help-pop figcaption { color: var(--muted); font-size: 11px; margin-top: 3px; }
.pwin { width: auto; max-width: calc(100% - 16px); }
.pwin .v-body { max-height: calc(100vh - 140px); overflow: auto; }
.bp-root { padding: 0; }
.bp-tabs { display: flex; gap: 2px; padding: 6px 10px 0; border-bottom: 1px solid var(--line); }
.bp-tabs button { background: none; border: 0; border-radius: 6px 6px 0 0; padding: 5px 14px; color: var(--muted); cursor: pointer; }
.bp-tabs button.on { background: var(--panel-2); color: var(--text); box-shadow: inset 0 -2px var(--accent); }
.bp-stage { position: relative; }
.bp-c { position: absolute; box-sizing: border-box; user-select: none; }
.bp-c[hidden] { display: none; }
.bp-text { font-size: 20px; font-weight: 600; line-height: 40px; letter-spacing: .02em; }
.bp-section { border: 1px solid var(--line); border-radius: 8px; background: transparent; z-index: 0; }
.bp-c:not(.bp-section) { z-index: 1; }
.bp-section > span { position: absolute; left: 10px; top: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--c); }
.bp-c > i { position: absolute; left: -4px; right: -4px; bottom: 0; text-align: center; font-style: normal; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-dial, .bp-slider, .bp-wheel { cursor: ns-resize; touch-action: none; }
.bp-dial svg { position: absolute; left: 50%; top: 0; width: 60px; height: 60px; margin-left: -30px; }
.bp-dial path { fill: none; stroke-width: 5; stroke-linecap: round; }
.bp-dial .track { stroke: var(--line); }
.bp-dial .val { stroke: var(--accent); }
.bp-dial .tick { stroke: var(--text); stroke-width: 3; stroke-linecap: round; }
.bp-slider u, .bp-wheel u { position: absolute; left: 50%; top: 6px; bottom: 20px; width: 6px; margin-left: -3px; background: var(--line); border-radius: 3px; }
.bp-slider s, .bp-wheel s { position: absolute; left: 50%; width: 24px; height: 12px; margin-left: -12px; background: var(--accent); border-radius: 3px; }
.bp-meter u { position: absolute; top: 6px; bottom: 20px; width: 8px; background: var(--line); border-radius: 2px; overflow: hidden; }
.bp-meter u:nth-of-type(1) { left: 6px; } .bp-meter u:nth-of-type(2) { left: 22px; }
.bp-meter b { position: absolute; left: 0; right: 0; bottom: 0; background: var(--accent); }
.bp-view { overflow: auto; border-radius: 6px; }
.bp-view .bleep-view { width: 100%; box-sizing: border-box; }
.bp-box { position: relative; }
.bp-c.dead { opacity: .35; }
.bp-unknown { border: 1px dashed var(--line); border-radius: 6px; }

/* ---- panels: buttons, selects, placeholders, full screen ---- */
.bp-text.caption { font-size: 12px; font-weight: 400; color: var(--muted); line-height: 20px; letter-spacing: 0; }
.bp-button { cursor: pointer; }
.bp-button s { position: absolute; left: 4px; right: 4px; top: 2px; bottom: 20px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); }
.bp-button s.on { background: var(--accent); border-color: var(--accent); }
.bp-select select { position: absolute; left: 2px; right: 2px; top: 4px; height: 28px; font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; }
.bp-view.placeholder, .bp-panel > .dead { border: 1px dashed var(--line); border-radius: 6px; display: grid; place-items: center; color: var(--muted); }
.bp-panel { overflow: hidden; }
.bp-panel .bp-box { position: relative; }
.pwin .pwin-tools button { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0 4px; }
.pwin .pwin-tools button.on, .pwin .pwin-tools button:hover { color: var(--accent); }
.pwin.full { left: 0 !important; top: 0 !important; width: 100% !important; height: 100%; max-width: none; border-radius: 0; z-index: 900; display: flex; flex-direction: column; }
.pwin.full .v-body { flex: 1; max-height: none; overflow: hidden; display: grid; place-items: center; grid-template: minmax(0, 1fr) / minmax(0, 1fr); }  /* the track is the window's size, so a taller panel is scaled around its centre */
.pwin.full .bp-root { transform-origin: center center; }
.pwin.editing { width: calc(100% - 16px); }
.pwin.editing .v-title { cursor: text; }
.pwin .v-title .n-rename { width: 16em; }
.pwin.editing .v-body { max-height: none; overflow: hidden; }
.pwin .v-grip { display: none; }
.pwin.editing .v-grip { display: block; z-index: 3; }

/* ---- panel editor ---- */
.pe { display: flex; flex-direction: column; height: var(--pe-h, calc(100vh - 150px)); min-height: 380px; outline: none; }
.pe-bar { display: flex; align-items: center; gap: 12px; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.pe-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.pe-seg button { border: 0; border-radius: 0; background: none; padding: 3px 12px; }
.pe-seg button.on { background: var(--accent); color: #0b0d10; }
.pe-hint { font-size: 11px; color: var(--muted); }
.pe-main { flex: 1; display: flex; min-height: 0; }
.pe-side, .pe-insp { width: clamp(240px, 22%, 360px); flex: none; overflow: auto; padding: 8px; font-size: 12px; }
.pe-side { border-right: 1px solid var(--line); }
.pe-insp { border-left: 1px solid var(--line); }
.pe-centre { flex: 1; overflow: auto; padding: 12px; background: var(--bg, #15171c); }
.pe h4 { margin: 8px 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pe-pal { display: block; width: 100%; text-align: left; margin-bottom: 4px; }
.pe-hit { position: absolute; box-sizing: border-box; cursor: move; outline: 1px dashed transparent; z-index: 5; }
.pe-hit:hover { outline-color: var(--muted); }
.pe-hit.sel { outline: 2px solid var(--accent); }
.pe-hit.bg { z-index: 1; pointer-events: none; outline: 1px dashed var(--line); }
.pe-hit.bg .pe-grip, .pe-sec-head { pointer-events: auto; }
.pe-sec-head { position: absolute; left: 0; right: 0; top: 0; height: 28px; cursor: move; }
.pe-marquee { position: absolute; z-index: 10; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); pointer-events: none; }
.pe-grip { position: absolute; right: -4px; bottom: -4px; width: 10px; height: 10px; background: var(--accent); border-radius: 2px; cursor: nwse-resize; display: none; }
.pe-hit.sel .pe-grip { display: block; }
.pe-chip { position: absolute; left: 0; right: 0; top: -2px; transform: translateY(-100%); background: var(--panel-3); color: var(--text); font-size: 10px; border-radius: 4px; padding: 1px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.pe-chip.none { background: #7f1d1d; }
.pe-field { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.pe-field > span { color: var(--muted); font-size: 11px; }
.pe-field input, .pe-field select, .pe-search { font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; padding: 3px 6px; width: 100%; box-sizing: border-box; }
.pe-xy { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 6px; }
.pe-acts { display: flex; gap: 6px; margin-top: 8px; }
.pe-list, .pe-palette { margin-top: 6px; }
.pe-node { padding: 3px 6px; cursor: pointer; border-radius: 4px; display: flex; justify-content: space-between; gap: 6px; }
.pe-node:hover, .pe-knob:hover { background: var(--panel-3); }
.pe-node small { color: var(--muted); }
.pe-knob { padding: 2px 6px; cursor: pointer; border-radius: 4px; }
.pe-knob.wired { color: var(--accent); }
.pe-wire { border: 1px solid var(--line); border-radius: 6px; padding: 6px; margin-bottom: 6px; }
.pe-wire-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.pe-range { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.pe-range input { width: 54px; font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; padding: 2px 4px; }
.pe-units, .pe-note, .pe-empty { color: var(--muted); font-size: 11px; margin: 4px 0; }
.pe-learn.on { background: var(--accent); color: #0b0d10; }
.pe-tabrow { display: flex; gap: 4px; margin-bottom: 4px; }
.pe-tabrow input { flex: 1; font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; min-width: 0; }

/* ---- keys ---- */
.bp-keys { touch-action: none; }
.bp-keys .k { position: absolute; box-sizing: border-box; cursor: pointer; }
.bp-keys .k.w { top: 0; bottom: 0; background: #e7e9ee; border: 1px solid #15171c; border-radius: 0 0 4px 4px; }
.bp-keys .k.b { top: 0; height: 62%; background: #15171c; border-radius: 0 0 3px 3px; z-index: 2; }
.bp-keys .k.w.on { background: var(--accent); }
.bp-keys .k.b.on { background: var(--accent); filter: brightness(.7); }
.bp-keys.dead { opacity: .35; }
.pe-group { color: var(--muted); text-transform: uppercase; font-size: 10px; letter-spacing: .06em; cursor: default; }
.pe-knob small { float: right; color: var(--muted); }
.bp-xy { border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); cursor: crosshair; touch-action: none; }
.bp-xy s { position: absolute; width: 14px; height: 14px; margin: 0 0 -7px -7px; border-radius: 50%; background: var(--accent); pointer-events: none; }

/* ---- preset browser (standalone app, spec §11.5) */
#main { position: relative; }
#pb { position: absolute; inset: 0; z-index: 40; background: rgba(10, 11, 14, .6); display: flex;
      align-items: center; justify-content: center; padding: 28px; }
.pb-box { width: min(960px, 100%); height: min(640px, 100%); background: var(--panel); border: 1px solid var(--line);
          border-radius: 10px; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); overflow: hidden; }
.pb-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.pb-title { font-weight: 600; font-size: 14px; }
.pb-search, .pb-save input { flex: 1; font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--line);
                              border-radius: 6px; padding: 5px 8px; user-select: text; -webkit-user-select: text; }
.pb-save { display: flex; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.pb-body { flex: 1; display: flex; min-height: 0; }
.pb-groups { width: 210px; flex: none; overflow-y: auto; padding: 8px; border-right: 1px solid var(--line); }
.pb-group { display: flex; justify-content: space-between; gap: 8px; padding: 5px 8px; border-radius: 5px; cursor: pointer; }
.pb-group:hover { background: var(--panel-3); }
.pb-group.active { background: var(--panel-3); color: var(--accent); }
.pb-count { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.pb-sep { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding: 12px 8px 4px; }
.pb-list { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.pb-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; }
.pb-card:hover, .pb-card.current { border-color: var(--accent); }
.pb-card-head { display: flex; align-items: baseline; gap: 8px; }
.pb-name { font-weight: 600; }
.pb-chip { color: var(--muted); font-size: 11px; border: 1px solid var(--line); border-radius: 10px; padding: 0 7px; }
.pb-desc { color: var(--muted); margin-top: 3px; line-height: 1.4; }
.pb-foot { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.pb-tags { flex: 1; color: var(--muted); font-size: 11px; }
.pb-load { background: var(--accent); color: #0d1f1d; border-color: var(--accent); font-weight: 600; }
.pb-load:hover { background: #6fe0d5; }
.pb-empty { color: var(--muted); padding: 30px; text-align: center; }

/* ---- Store section (store.js) ---- */
.sections { display: inline-flex; align-items: flex-end; gap: 2px; align-self: flex-end; margin: 0 28px -1px 0; }
.sections button { border: 1px solid transparent; border-bottom: 0; border-radius: 7px 7px 0 0; background: transparent;
                   color: var(--muted); padding: 0 16px; margin: 0; height: 32px; position: relative; }
.sections button:hover { color: var(--text); background: var(--panel-2); }
.sections button.on { background: var(--canvas); color: var(--text); border-color: var(--line); height: 33px; font-weight: 600; }
body.in-store .sections button.on { background: var(--bg); }
#undo, #redo { display: inline-flex; align-items: center; justify-content: center; padding: 4px 7px; }
#undo svg, #redo svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.in-store #main, body.in-store #crumbs, body.in-store #add, body.in-store #panels, body.in-store #presets,
body.in-store #undo, body.in-store #redo { display: none; }
#store { position: absolute; top: 41px; left: 0; right: 0; bottom: 0; overflow: auto; padding: 16px 24px 32px; background: var(--bg); color: var(--text); font-size: 13px; }
#store h2 { margin: 0; font-size: 18px; font-weight: 600; }
#store h3 { margin: 22px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
#store .st-head-line { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; }
#store .st-summary { color: var(--muted); }
#store .st-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
#store .st-tabs button { border: 0; background: transparent; color: var(--muted); padding: 7px 14px; border-bottom: 2px solid transparent; border-radius: 0; }
#store .st-tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
#store .st-message:not(:empty) { margin: 0 0 10px; color: var(--warn); }
#store .st-bar { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; }
#store .st-search { flex: 1; max-width: 320px; background: var(--panel); border: 1px solid var(--line); color: var(--text); padding: 6px 9px; border-radius: 5px; }
#store button { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); padding: 5px 11px; border-radius: 5px; cursor: pointer; }
#store button:hover:not(:disabled) { background: var(--panel-3); }
#store button.primary { background: var(--accent); color: #07201d; border-color: var(--accent); font-weight: 600; }
#store button:disabled { opacity: .5; cursor: default; }
/* ---- Settings section (settings.js): the Store section's look ---- */
#help { position: absolute; top: 41px; left: 0; right: 0; bottom: 0; overflow: auto; padding: 16px 24px 32px; background: var(--bg); color: var(--text); font-size: 13px; }
#help h2 { margin: 0; font-size: 18px; font-weight: 600; }
#help h3 { margin: 22px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
#help .st-head-line { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; }
#help .st-message:not(:empty) { margin: 0 0 10px; color: var(--warn); }
#help .hp-address, #help .hp-empty { color: var(--muted); }
#help .hp-search { box-sizing: border-box; width: 100%; max-width: 420px; margin: 0 0 6px; background: var(--panel); border: 1px solid var(--line); color: var(--text); padding: 7px 10px; border-radius: 5px; font: inherit; }
#help .hp-hits { display: flex; flex-direction: column; gap: 6px; max-width: 760px; margin-top: 12px; }
#help .hp-hit { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 9px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; color: var(--text); font: inherit; cursor: pointer; }
#help .hp-hit:hover { background: var(--panel-2); border-color: var(--accent); }
#help .hp-group { margin-left: 10px; font-weight: 400; font-size: 11px; color: var(--muted); }
#help mark { background: transparent; color: var(--accent); font-weight: 600; }
#help .hp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
#help .hp-tile { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; color: var(--text); font: inherit; cursor: pointer; }
#help .hp-tile:hover { background: var(--panel-2); border-color: var(--accent); }
#help .hp-title { font-weight: 600; }
#help .hp-desc { color: var(--muted); font-size: 12px; line-height: 1.4; }
#settings { position: absolute; top: 41px; left: 0; right: 0; bottom: 0; overflow: auto; padding: 16px 24px 32px; background: var(--bg); color: var(--text); font-size: 13px; }
#settings h2 { margin: 0; font-size: 18px; font-weight: 600; }
#settings h3 { margin: 22px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
#settings .st-head-line { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; }
#settings .st-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
#settings .st-tabs button { border: 0; background: transparent; color: var(--muted); padding: 7px 14px; border-bottom: 2px solid transparent; border-radius: 0; }
#settings .st-tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
#settings .st-message:not(:empty) { margin: 0 0 10px; color: var(--warn); }
#settings .st-body { max-width: 640px; }
#settings .st-bar { display: flex; gap: 8px; margin: 12px 0; align-items: center; }
#settings button { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); padding: 5px 11px; border-radius: 5px; cursor: pointer; }
#settings button:hover:not(:disabled) { background: var(--panel-3); }
#settings button:disabled { opacity: .5; cursor: default; }
#settings .st-note { padding: 8px 11px; margin: 0 0 12px; border-left: 3px solid var(--line); background: var(--panel); color: var(--muted); border-radius: 0 5px 5px 0; }
#settings .st-note.bad { border-left-color: var(--warn); color: var(--text); }
#settings .st-row.single { padding: 6px 0; color: var(--muted); }
#settings .st-empty { color: var(--muted); padding: 4px 0; }
#settings .se-row { display: grid; grid-template-columns: 180px 1fr; gap: 4px 12px; align-items: center; margin: 8px 0; }
#settings .se-hint { grid-column: 2; color: var(--muted); font-size: 12px; }
#settings .se-check, #settings .st-toggle { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
#settings .se-channels { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px 12px; }
#settings .se-advanced { margin: 10px 0; }
#settings .se-advanced summary { cursor: pointer; color: var(--muted); }
#settings select, #settings input[type=text], #settings input[type=number] { background: var(--panel); border: 1px solid var(--line); color: var(--text); padding: 5px 8px; border-radius: 5px; min-width: 0; }
#settings input[type=number] { width: 90px; }
.st-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); }
.st-card { width: min(480px, calc(100vw - 32px)); padding: 18px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.st-card .st-toggle { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0; }
.st-card h2 { margin: 0 0 8px; font-size: 16px; }
.st-card p { margin: 0 0 12px; color: var(--muted); }
.st-card .st-message { white-space: pre-line; margin: 10px 0 0; }
.st-card .st-bar { justify-content: flex-end; margin-top: 14px; }
#store .st-note { padding: 8px 11px; margin: 0 0 12px; border-left: 3px solid var(--line); background: var(--panel); color: var(--muted); border-radius: 0 5px 5px 0; }
#store .st-note.warn { border-left-color: var(--mod); color: var(--text); }
#store .st-note.bad { border-left-color: var(--warn); color: var(--text); }
#store .st-list { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
#store .st-row { display: grid; grid-template-columns: 1.4fr .7fr .7fr 1.6fr 1fr; gap: 10px; align-items: center; padding: 7px 12px; border-top: 1px solid var(--line); }
#store .st-row.plugins { grid-template-columns: 1.4fr .5fr 3fr; }
#store .st-row.single { grid-template-columns: 1fr; }
#store .st-row:first-child { border-top: 0; }
#store .st-head { background: var(--panel); color: var(--muted); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
#store .st-name { font-weight: 600; }
#store .st-ver { color: var(--muted); font-variant-numeric: tabular-nums; }
#store .st-why { color: var(--muted); font-size: 11px; margin-left: 8px; }
#store .st-actions { display: flex; gap: 6px; justify-content: flex-end; }
#store .st-busy { color: var(--accent); }
#store .st-empty { padding: 14px 12px; color: var(--muted); }
#store .st-badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; border: 1px solid var(--line); }
#store .st-badge.ok { color: #7ee2a8; border-color: #2c6b4a; }
#store .st-badge.warn { color: var(--mod); border-color: #7a5d1f; }
#store .st-badge.bad { color: var(--warn); border-color: #7a3a33; }
#store .st-tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
#store .st-tile { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); }
#store .st-pic { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: #0d0f13; border-bottom: 1px solid var(--line); }
#store .st-pic img { width: 100%; height: 100%; object-fit: contain; }
#store .st-pic span { font-size: 40px; font-weight: 700; color: #0d0f13; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--muted); }
#store .st-pic.module span { background: #5eead4; } #store .st-pic.plugin span { background: #7dd3fc; } #store .st-pic.preset span { background: #f0abfc; }
#store .st-tile-body { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; flex: 1; }
#store .st-tags { display: flex; gap: 5px; flex-wrap: wrap; }
#store .st-tag { font-size: 10px; letter-spacing: .05em; text-transform: uppercase; padding: 1px 7px; border-radius: 10px; border: 1px solid var(--line); color: var(--muted); }
#store .st-summary { color: var(--muted); font-size: 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#store .st-info { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: auto; }
#store .st-tile .st-actions { justify-content: flex-start; min-height: 24px; }
#store .st-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
#store .st-select { background: var(--panel); border: 1px solid var(--line); color: var(--text); padding: 5px 8px; border-radius: 5px; font-size: 12px; }
#store .st-chip { padding: 3px 10px; border-radius: 12px; font-size: 11px; }
#store .st-chip.on { background: var(--accent); color: #07201d; border-color: var(--accent); }
#store .st-toggle { display: flex; align-items: center; gap: 9px; padding: 7px 0; }
#nodes .node.missing { border-style: dashed; opacity: .85; }
#nodes .node .n-missing { padding: 6px 10px; color: var(--muted); font-size: 11px; }
#nodes .node .n-install { margin: 0 10px 8px; padding: 3px 10px; font-size: 11px; background: var(--accent); color: #07201d; border: 0; border-radius: 4px; cursor: pointer; }
#nodes .node .n-install:disabled { opacity: .6; cursor: default; }

/* In a plugin window (Bleep Instrument, Bleep FX): only the cell's panel, filling the window. */
body.plugin #top, body.plugin #hint, body.plugin #world, body.plugin #band, body.plugin #empty,
body.plugin #cell-close, body.plugin #navbar, body.plugin .pwin .v-head { display: none; }
body.plugin #canvas { background: var(--panel); }
body.plugin .pwin.full { border: 0; }

/* ---- selects: the closed control and its menu (select-menu.js) match the buttons and popovers */
select { -webkit-appearance: none; appearance: none; cursor: pointer; outline: none; font: inherit; color: var(--text);
         background-color: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; padding: 3px 6px;
         padding-right: 20px !important; text-overflow: ellipsis;
         background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'><path d='M1 1l3 3 3-3' fill='none' stroke='%238b92a3' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
         background-repeat: no-repeat !important; background-position: right 7px center !important; }
select:hover { border-color: #4a5163 !important; }
select:focus-visible { border-color: var(--accent) !important; }
.sel-menu { position: fixed; z-index: 100; padding: 4px; overflow-y: auto; box-sizing: border-box; font-size: 12px; }
.sel-item { white-space: nowrap; }
.sel-item.active { background: var(--panel-3); }
.sel-item.current { color: var(--accent); }
.sel-item.disabled { opacity: .5; }
.sel-group { padding: 6px 10px 2px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }

/* A panel's modules, folded into one stack on the board */
.pgroup { position: absolute; width: var(--node-w); box-sizing: border-box; height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 10px;
  background: var(--panel-2); border: 1px dashed var(--muted); border-radius: 8px; cursor: grab; user-select: none; font-size: 12px; }
.pgroup.open { border-style: solid; }
.pgroup small { margin-left: auto; color: var(--muted); }
.pgroup .pg-arrow { color: var(--muted); }
.node.grouped { border-left-style: dashed; }

/* Sign-in and Share… (account.js) */
.ac-back { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .55); display: flex; align-items: center; justify-content: center; }
.ac-box { width: min(420px, 92vw); background: var(--panel, #1b1e25); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; }
.ac-box h3 { margin: 0 0 10px; }
.ac-box label { display: block; margin: 10px 0; font-size: 12px; color: var(--muted); }
.ac-box input, .ac-box textarea, .ac-box select { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 6px 8px; font: inherit; color: var(--text); background: var(--bg, #15171c); border: 1px solid var(--line); border-radius: 6px; }
.ac-note { color: var(--muted); font-size: 13px; line-height: 1.4; }
.ac-code { margin: 14px 0 4px; text-align: center; font: 600 28px/1.2 ui-monospace, Menlo, monospace; letter-spacing: .12em; }
.ac-msg { min-height: 18px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.ac-msg.bad { color: #e2706a; }
.ac-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.ac-primary { background: var(--accent); color: var(--bg, #15171c); border-color: var(--accent); font-weight: 600; }
#store .st-account { max-width: 520px; }
#store .st-account .ac-code { text-align: left; }