/* SPDX-License-Identifier: MIT */
/* Module views (bleep-view.js). Colours come from the board's tokens. */
.bleep-view { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
/* Landscape: the custom display and the controls side by side (hook "side"), or stacked full width. */
.bv-stage { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bv-side .bv-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; gap: 12px; }
.bv-side .bv-custom { flex-direction: column; }
.bv-side .bv-custom .bv-panel { flex: 1 1 auto; }
/* Controls: sections (cards) flowing left to right. */
.bv-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; min-width: 0; }
.bv-sec { background: var(--panel-2); border-radius: 10px; padding: 7px 8px 8px; display: flex; flex-direction: column; gap: 4px; }
.bv-sec-title { font-size: 10px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; padding-left: 2px; }
.bv-sec-body { display: flex; flex-direction: column; gap: 6px; }
.bv-sec-knobs { display: flex; flex-wrap: wrap; gap: 2px 4px; }
.bv-column .bv-sec-knobs { flex-direction: column; flex-wrap: nowrap; }
.bv-sec-settings { display: flex; flex-wrap: wrap; gap: 6px; }
.bv-sec-settings .bv-setting { background: none; padding: 0; flex-direction: column; align-items: flex-start; gap: 2px; }
.bv-sec-flat { flex: 1 1 100%; }
.bv-settings-first .bv-sec:last-child { order: -1; }
.bv-knob { background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 3px 2px 4px; width: 80px;
           display: flex; flex-direction: column; align-items: center; gap: 1px; }
.bv-knob.drop-ok { border-color: var(--accent); background: var(--panel-3); }
.bv-knob.drop-hover { border-color: var(--mod); box-shadow: 0 0 0 2px var(--mod); }
.bv-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.bv-knob svg { width: 50px; height: 50px; cursor: ns-resize; touch-action: none; }
.bv-value { font-variant-numeric: tabular-nums; font-size: 11px; }
.bv-modulated .bv-label { color: var(--mod); }
.bv-track { stroke: var(--line); fill: none; stroke-width: 4; stroke-linecap: round; }
.bv-arc { stroke: var(--accent); fill: none; stroke-width: 4; stroke-linecap: round; }
.bv-ring { stroke: var(--mod); fill: none; stroke-width: 3; stroke-linecap: round; }
.bv-pointer { stroke: var(--text); stroke-width: 2; stroke-linecap: round; }
.bv-amounts { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.bv-amount { display: flex; align-items: center; gap: 4px; font-size: 10px; background: var(--panel);
             border-radius: 4px; padding: 1px 4px; cursor: ns-resize; color: var(--mod); }
.bv-amount-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.bv-amount-value { font-variant-numeric: tabular-nums; }
.bv-amount-remove { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0 2px; font-size: 12px; }
.bv-amount-remove:hover { color: var(--warn); }
.bv-settings { display: flex; flex-wrap: wrap; gap: 8px; }
.bv-setting { background: var(--panel-2); border-radius: 8px; padding: 5px 8px; display: flex; align-items: center; gap: 8px; }
.bv-setting select, .bv-number { background: var(--panel); color: var(--text); border: 1px solid var(--line);
                                  border-radius: 6px; padding: 2px 4px; font: inherit; font-size: 12px; }
.bv-number { width: 64px; }
.bv-toggle { background: var(--panel); color: var(--muted); border: 1px solid var(--line); border-radius: 6px;
             padding: 3px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.bv-toggle.on { background: var(--accent); color: #0d1014; border-color: var(--accent); }
.bv-custom { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.bv-panel { background: var(--panel-2); border-radius: 8px; padding: 6px 8px; flex: 1 1 220px; }
.bv-panel h2 { font-size: 10px; margin: 0 0 4px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; font-weight: 500; }
/* :where keeps this default easy to override from a module view */
:where(.bv-panel) canvas { width: 100%; height: 80px; display: block; }
.bv-description { margin: 0; color: var(--muted); font-size: 12px; }
.bv-knob.bv-stepped .bv-arc { stroke-dasharray: 2 2; }
/* Buttons (ModuleSpec::buttons). */
.bv-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.bv-button { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 6px;
             padding: 4px 12px; font: inherit; font-size: 12px; cursor: pointer; user-select: none; }
.bv-button:hover { border-color: var(--accent); }
.bv-button.on, .bv-button:active { background: var(--accent); color: #0d1014; border-color: var(--accent); }
/* WAV drop targets (BleepView.mediaDrop). */
.bv-drop { border: 1px dashed var(--line); border-radius: 8px; padding: 8px; color: var(--muted); font-size: 12px;
           text-align: center; cursor: pointer; }
.bv-drop.over { border-color: var(--accent); color: var(--text); background: var(--panel-3); }
.bv-drop.busy { opacity: .5; pointer-events: none; }

/* Parts (bleep-view.js showOnly): one display, section or button bar of a view fills its box; the rest stays laid out but invisible. */
.bleep-view.bv-part { height: 100%; box-sizing: border-box; position: relative; overflow: hidden; padding: 0; gap: 0; }
.bleep-view.bv-part .bv-path { flex: 1 1 0; min-height: 0; min-width: 0; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; }
.bleep-view.bv-part .bv-path:is(.bv-sec, .bv-buttons) { flex: 0 1 auto; align-self: flex-start; max-width: 100%; }
.bleep-view.bv-part .bv-path.bv-buttons { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.bleep-view.bv-part .bv-off { position: absolute; left: 0; top: 0; width: 100%; visibility: hidden; pointer-events: none; }
.bleep-view.bv-part .bv-fill { flex: 1 1 0; height: 0 !important; min-height: 0; }
.bleep-view.bv-part canvas.bv-fill:only-child { width: 100%; }

/* Preset bar (bleep-view.js makePresetBar) and its menu, the same in every module view. */
.bv-presets { display: flex; align-items: center; gap: 4px; }
.bv-pbtn { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 6px;
           padding: 3px 9px; font: inherit; font-size: 12px; cursor: pointer; line-height: 1.2; }
.bv-pbtn:hover { border-color: var(--accent); }
.bv-ppick { flex: 0 1 240px; min-width: 150px; display: flex; align-items: center; gap: 6px; text-align: left; background: var(--panel-2);
            color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px; font: inherit; font-size: 12px; cursor: pointer; }
.bv-ppick:hover { border-color: var(--accent); }
.bv-pname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bv-pnone { color: var(--muted); font-style: italic; }
.bv-pmark { color: var(--accent); font-size: 9px; }
.bv-pcaret { color: var(--muted); font-size: 10px; }
.bv-psave { margin-left: 4px; }
.bv-psave.bv-pdirty { background: var(--accent); color: #0d1014; border-color: var(--accent); }
.bv-pmenu { position: fixed; z-index: 1000; width: 280px; overflow-y: auto; background: var(--panel); color: var(--text);
            border: 1px solid var(--line); border-radius: 8px; padding: 4px; font-size: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.bv-phead { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 7px 8px 3px; }
.bv-pitem { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 5px; cursor: pointer; }
.bv-pitem:hover { background: var(--panel-3); }
.bv-pitem.on { color: var(--accent); background: var(--panel-2); }
.bv-pitem-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bv-pdel { background: none; border: 0; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; padding: 0 3px; }
.bv-pdel:hover, .bv-pdel.sure { color: var(--warn); }
.bv-pempty { color: var(--muted); padding: 3px 8px 5px; }
.bv-pfoot { border-top: 1px solid var(--line); margin-top: 5px; padding: 7px 4px 3px; display: flex; flex-direction: column; gap: 6px; }
.bv-pform { display: flex; gap: 4px; }
.bv-pinput { flex: 1; min-width: 0; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 6px;
             padding: 3px 7px; font: inherit; font-size: 12px; }
.bv-pinput:focus { outline: none; border-color: var(--accent); }
.bv-pmsg { color: var(--warn); font-size: 11px; }
.bv-pmsg:empty { display: none; }
.bv-pinit { align-self: flex-start; color: var(--muted); }