/*
 * synth-internals.css
 *
 * Static styles extracted from inline `style="..."` attributes in the
 * synth-app JS templates so the synth-app CSP can drop
 * `'unsafe-inline'` from `style-src`. See follow-up to PR #1791 (#1475
 * security review item #3). Dynamic per-element style writes that
 * remain (e.g. modulation-matrix per-cell `backgroundColor`) use the
 * DOM API (`element.style.setProperty`, `element.style.x = ...`) which
 * is not subject to `style-src 'unsafe-inline'` in CSP3.
 */

/* ---------------------------------------------------------------
 * Generic visibility utility
 *
 * Used in place of `style="display: none;"` for elements that are
 * hidden until JS reveals them. Class names need to be stable
 * across innerHTML template literals (html-template.js) and do not
 * conflict with any existing class in the synth-app stylesheets.
 *
 * `!important` is intentional and matches the pattern established
 * by every mainstream utility framework (Bootstrap `.d-none`,
 * Tailwind `.hidden`, etc.). The reason is specificity: at least
 * one of the elements this class is applied to (`.lfo-content-2`)
 * is targeted by a higher-specificity layout rule —
 * `.lfo-section .lfo-content-2 { display: flex; }` in
 * `11-filter-env-lfo.css` (specificity 0,2,0 vs `.synth-hidden`'s
 * 0,1,0) — which would otherwise win on initial render and leave
 * the LFO2 panel visible. `!important` also removes a latent
 * single-class tie with `.file-midi-group` in `09-layout-main.css`
 * (which currently works only because this stylesheet is loaded
 * after the numbered core CSS).
 *
 * Consequence for JS writers: because `!important` outranks
 * inline styles set via `element.style.display = '...'`, every
 * writer that toggles visibility on a `.synth-hidden` element
 * MUST add/remove the class instead of writing an inline display.
 * See `wavetablesynth.js` LFO/ENV page handlers and
 * `synthController.js` multiband toggle for the reference pattern.
 * --------------------------------------------------------------- */
.synth-hidden {
    display: none !important;
}

/* ---------------------------------------------------------------
 * LFO / arp / delay rate knob + sync toggle wrapper
 *
 * Wraps the rate knob and its sibling sync-toggle button so the
 * button can position itself absolutely relative to the knob. Used
 * 4x: LFO1 rate, LFO2 rate, delay time, arp rate.
 * --------------------------------------------------------------- */
.lfo-knob-sync-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ---------------------------------------------------------------
 * Sync toggle positioning modifiers
 *
 * The base `.lfo-sync-toggle` rule lives in 11-filter-env-lfo.css
 * and already supplies `background: transparent; border: none;
 * cursor: pointer; padding: 2px; width: 20px; height: 20px;
 * display: flex; align-items: center; justify-content: center;`.
 *
 * The previous inline `style="..."` attribute overrode that base
 * rule with `position: absolute; top: 44px;` plus a per-instance
 * `right` offset and `font-size: 13px;`. The three modifier
 * classes below replicate those overrides without inline styles.
 * The `font-size: 13px;` is intentional — it differs from the
 * base 14px and was previously enforced only by the inline
 * attribute; keeping 13px preserves the rendered glyph size.
 * --------------------------------------------------------------- */
.lfo-sync-toggle-positioned {
    position: absolute;
    top: 44px;
    font-size: 13px;
}

.lfo-sync-toggle-positioned--right-2 {
    right: 2px;
}

.lfo-sync-toggle-positioned--right-neg7 {
    right: -7px;
}

.lfo-sync-toggle-positioned--right-neg6 {
    right: -6px;
}

/* ---------------------------------------------------------------
 * Visualizer container
 *
 * The element already carries `id="visualizer-container"`; an ID
 * selector keeps the class surface minimal and matches how other
 * unique elements in the synth-app are styled.
 * --------------------------------------------------------------- */
#visualizer-container {
    min-width: 300px;
    flex: 1;
}

/* ---------------------------------------------------------------
 * Custom LFO editor side-label spacing
 *
 * Adds the previously-inline `margin-top: 6px;` separator between
 * the SEGMENT/SNAP/GRID/GRID Y/GRID Y SCALE label groups in the
 * custom LFO editor side panel (4 instances).
 * --------------------------------------------------------------- */
.lfo-side-label--spaced {
    margin-top: 6px;
}