/* bdd-modern.css
   The Bass Daddy Devices mini-synth look (YOI_DOCS decisions/redesign-macros): graphite, soft
   depth, one accent. Every colour, font and radius is a variable here, so a product restyles by
   overriding :root (the vowel synth sets its own --bdd-accent). Fonts ship with the plug-in:
   Manrope and a subset of Unbounded, both under the SIL Open Font License (see *-OFL.txt). */

@font-face { font-family: 'Manrope'; src: url('Manrope.ttf') format('truetype'); font-weight: 200 800; }
@font-face { font-family: 'Unbounded'; src: url('Unbounded.ttf') format('truetype'); font-weight: 200 900; }

:root {
    --bdd-ground: #15181c;
    --bdd-surface: #1a1d22;
    --bdd-card: #1e2227;
    --bdd-raised: #272c33;
    --bdd-well: #101215;
    --bdd-sheet: #1c2025;
    --bdd-line: #23272d;
    --bdd-line-strong: #2b3037;
    --bdd-ink: #e6e9ed;
    --bdd-ink-soft: #cfd4da;
    --bdd-muted: #8b939d;
    --bdd-faint: #5d656f;
    --bdd-accent: #f2a93b;
    --bdd-radius: 12px;
    --bdd-font: 'Manrope', 'Helvetica Neue', sans-serif;
    --bdd-display: 'Unbounded', 'Arial Black', sans-serif;
}

.bdd-label { font: 700 11px/1 var(--bdd-font); letter-spacing: 0.12em; color: var(--bdd-muted); text-transform: uppercase; }
.bdd-value { font: 600 12px/1 var(--bdd-font); color: var(--bdd-ink); font-variant-numeric: tabular-nums; }
.bdd-card { background: var(--bdd-surface); border: 1px solid var(--bdd-line); border-radius: var(--bdd-radius); }
.bdd-well { background: var(--bdd-well); border: 1px solid var(--bdd-line); border-radius: var(--bdd-radius); box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.45); }

/* Anything that can be focused shows it clearly. */
.bdd-dial:focus-visible, .bdd-fader:focus-visible, .bdd-level:focus-visible, .bdd-choice button:focus-visible {
    outline: 2px solid var(--bdd-accent); outline-offset: 3px; border-radius: 8px;
}
.bdd-dimmed { opacity: 0.45; }

/* Dial: an accent arc on a track, a softly lit body with a pointer, name and value underneath. */
.bdd-dial { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: ns-resize; touch-action: none; user-select: none; }
.bdd-dial-face { position: relative; }
.bdd-dial-face svg { position: absolute; inset: 0; overflow: visible; }
.bdd-dial-track { fill: none; stroke: var(--bdd-raised); stroke-linecap: round; }
.bdd-dial-arc { fill: none; stroke: var(--bdd-accent); stroke-linecap: round; }
.bdd-dial-body {
    position: absolute; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #3a4049, #22262c 70%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.bdd-dial-pointer { position: absolute; left: 50%; top: 11%; width: 2px; height: 21%; margin-left: -1px; border-radius: 1px; background: var(--bdd-ink); }

/* Fader: a slim horizontal slider with its name and value above it. */
.bdd-fader { display: flex; flex-direction: column; gap: 8px; cursor: ew-resize; touch-action: none; user-select: none; }
.bdd-fader-head { display: flex; align-items: baseline; justify-content: space-between; }
.bdd-fader-name { font: 600 12px/1 var(--bdd-font); color: var(--bdd-ink-soft); }
.bdd-fader-track { position: relative; height: 4px; border-radius: 2px; background: var(--bdd-raised); margin: 5px 0; }
.bdd-fader-fill { position: absolute; left: 0; top: 0; height: 4px; border-radius: 2px; background: var(--bdd-accent); }
.bdd-fader-thumb { position: absolute; top: -5px; width: 14px; height: 14px; margin-left: -7px; border-radius: 7px; background: var(--bdd-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.bdd-fader.inline { flex-direction: row; align-items: center; gap: 10px; }
.bdd-fader.inline .bdd-fader-track { width: 120px; }

/* Choice: segmented buttons in a well, across or stacked. */
.bdd-choice { display: inline-flex; gap: 2px; padding: 3px; background: #121418; border: 1px solid #262a31; border-radius: 8px; }
.bdd-choice.vertical { flex-direction: column; }
.bdd-choice.stretch { display: flex; }
.bdd-choice.stretch button { flex-grow: 1; }
.bdd-choice button {
    min-width: 36px; height: 26px; padding: 0 10px; border: none; border-radius: 6px; cursor: pointer;
    background: transparent; color: var(--bdd-muted); font: 600 11px/1 var(--bdd-font);
}
.bdd-choice button:hover { color: var(--bdd-ink-soft); }
.bdd-choice button.selected { background: var(--bdd-raised); color: var(--bdd-ink); }
.bdd-choice button.icon { display: grid; place-items: center; min-width: 30px; padding: 0 6px; }
.bdd-choice button.icon svg { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* LEVEL: a tall fader with a stereo meter beside it. */
.bdd-level { display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: ns-resize; touch-action: none; user-select: none; }
.bdd-level-body { flex-grow: 1; display: flex; gap: 8px; align-items: stretch; min-height: 120px; }
.bdd-level-track { position: relative; width: 8px; border-radius: 4px; background: #121418; border: 1px solid #262a31; }
.bdd-level-fill { position: absolute; left: -1px; bottom: -1px; width: 8px; border-radius: 4px; background: linear-gradient(var(--bdd-ink), var(--bdd-muted)); }
.bdd-level-thumb { position: absolute; left: -9px; width: 24px; height: 10px; margin-bottom: -5px; border-radius: 3px; background: var(--bdd-ink); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
.bdd-level-meter { display: flex; gap: 3px; }
.bdd-level-bar { position: relative; width: 4px; border-radius: 2px; background: #121418; overflow: hidden; }
.bdd-level-bar div { position: absolute; left: 0; bottom: 0; width: 4px; border-radius: 2px; background: linear-gradient(var(--bdd-accent), color-mix(in srgb, var(--bdd-accent) 35%, #15181c)); }

/* Menu button, and the menu it opens (openMenu builds .menu / .menu-item). Scoped to the modern
   stage, so the pixel panel's menu keeps its own look. */
.bdd-menu-button {
    height: 30px; padding: 0 10px; border: 1px solid #262a31; border-radius: 8px; cursor: pointer;
    background: var(--bdd-card); color: var(--bdd-ink); font: 600 12px/1 var(--bdd-font);
}
.bdd-menu-button:hover { border-color: var(--bdd-line-strong); background: var(--bdd-raised); }
.bdd-menu-button:focus-visible { outline: 2px solid var(--bdd-accent); outline-offset: 2px; }
.bdd-modern .menu {
    position: absolute; z-index: 20; display: grid; gap: 2px; padding: 4px;
    background: var(--bdd-sheet); border: 1px solid var(--bdd-line-strong); border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
.bdd-modern .menu-item {
    height: 28px; padding: 0 12px; border: none; border-radius: 6px; cursor: pointer; text-align: left;
    background: transparent; color: var(--bdd-ink-soft); font: 600 12px/1 var(--bdd-font); white-space: nowrap;
}
.bdd-modern .menu-item:hover { background: var(--bdd-raised); color: var(--bdd-ink); }
.bdd-modern .menu-item.selected { color: var(--bdd-accent); }

/* Pad: two parameters on one surface (CHARACTER: throat across, resonance up). */
.bdd-pad { position: relative; overflow: hidden; cursor: crosshair; touch-action: none; user-select: none; box-sizing: border-box; }
.bdd-pad:focus-visible { outline: 2px solid var(--bdd-accent); outline-offset: 3px; }
.bdd-pad-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.bdd-filter-grid { fill: none; stroke: #343a42; stroke-width: 1; opacity: .75; vector-effect: non-scaling-stroke; }
.bdd-filter-area { fill: var(--bdd-accent); opacity: .07; }
.bdd-filter-response { fill: none; stroke: var(--bdd-accent); stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 2px color-mix(in srgb, var(--bdd-accent) 55%, transparent)); }
.bdd-filter-response[data-mode="bp"] { stroke: #77c9ed; filter: drop-shadow(0 0 2px rgba(119,201,237,.55)); }
.bdd-filter-cutoff { fill: none; stroke: var(--bdd-ink); stroke-width: 1; stroke-dasharray: 3 3; opacity: .78; vector-effect: non-scaling-stroke; }
.bdd-pad-grid { fill: none; stroke: #1c2025; stroke-width: 1; vector-effect: non-scaling-stroke; }
.bdd-pad-peak { fill: none; stroke: var(--bdd-accent); stroke-width: 1.5; opacity: 0.28; vector-effect: non-scaling-stroke; }
.bdd-pad-peak-fill { fill: var(--bdd-accent); opacity: 0.05; }
.bdd-pad-cross-x { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed color-mix(in srgb, var(--bdd-accent) 30%, transparent); pointer-events: none; }
.bdd-pad-cross-y { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed color-mix(in srgb, var(--bdd-accent) 30%, transparent); pointer-events: none; }
.bdd-pad-dot {
    position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; pointer-events: none;
    background: var(--bdd-accent); box-shadow: 0 0 0 8px color-mix(in srgb, var(--bdd-accent) 14%, transparent);
}
.bdd-pad-dot::after { content: ''; position: absolute; left: 5px; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--bdd-ground); }
.bdd-pad-axis { position: absolute; left: 12px; font: 600 10px/1 var(--bdd-font); letter-spacing: 0.06em; color: var(--bdd-faint); text-transform: uppercase; pointer-events: none; }
.bdd-pad-axis.bottom { bottom: 10px; }
.bdd-pad-axis.top { top: 10px; }

/* Value button: a menu button's look for a continuous value you drag (free time). */
.bdd-value-button { display: inline-flex; align-items: center; box-sizing: border-box; cursor: ns-resize; touch-action: none; user-select: none; font-variant-numeric: tabular-nums; }
.bdd-value-button.held { border-color: var(--bdd-line-strong); background: var(--bdd-raised); }

/* Tabs: segmented buttons that fill their row (the details sheet's pages). */
.bdd-tabs { border-radius: 9px; }
.bdd-tabs button { height: 28px; border-radius: 7px; font-size: 12px; }