/* Family colors connect each effect's graph, controls and examples. */
:root{--fx-a:#fb7185;--fx-b:#fbbf24;--fx-c:#c084fc;--fx-d:#a3e635}
:root[data-fx-family="filter"]{--fx-a:#2dd4bf;--fx-b:#38bdf8;--fx-c:#a3e635}
:root[data-fx-family="distortion"]{--fx-a:#fbbf24;--fx-b:#fb923c;--fx-c:#fb7185}
:root[data-fx-family="amp"]{--fx-a:#fb923c;--fx-b:#fbbf24;--fx-c:#e879f9}
:root[data-fx-family="modulation"]{--fx-a:#c084fc;--fx-b:#f472b6;--fx-c:#38bdf8}
:root[data-fx-family="space"]{--fx-a:#38bdf8;--fx-b:#2dd4bf;--fx-c:#c084fc}
:root[data-fx-family="stereo"]{--fx-a:#34d399;--fx-b:#38bdf8;--fx-c:#fbbf24}
:root[data-theme="light"]{--fx-a:#be123c;--fx-b:#a16207;--fx-c:#7e22ce;--fx-d:#4d7c0f}
:root[data-theme="light"][data-fx-family="filter"]{--fx-a:#0f766e;--fx-b:#0369a1;--fx-c:#4d7c0f}
:root[data-theme="light"][data-fx-family="distortion"]{--fx-a:#a16207;--fx-b:#c2410c;--fx-c:#be123c}
:root[data-theme="light"][data-fx-family="amp"]{--fx-a:#c2410c;--fx-b:#a16207;--fx-c:#a21caf}
:root[data-theme="light"][data-fx-family="modulation"]{--fx-a:#7e22ce;--fx-b:#be185d;--fx-c:#0369a1}
:root[data-theme="light"][data-fx-family="space"]{--fx-a:#0369a1;--fx-b:#0f766e;--fx-c:#7e22ce}
:root[data-theme="light"][data-fx-family="stereo"]{--fx-a:#047857;--fx-b:#0369a1;--fx-c:#a16207}
.unit{--sig:var(--fx-a)}
.unit .head{border-top:3px solid var(--fx-a);background:linear-gradient(120deg,color-mix(in srgb,var(--fx-a) 7%,var(--panel)),var(--panel))}
#fxCat,#fxSrc{color:var(--fx-a);border-color:color-mix(in srgb,var(--fx-a) 40%,var(--line))}
.knob[data-fx-tone]{background:color-mix(in srgb,var(--sig) 5%,var(--panel));border-bottom:3px solid var(--sig)}
.knob[data-fx-tone] .kl{color:var(--sig)}
.knob[data-fx-tone]:hover{background:color-mix(in srgb,var(--sig) 12%,var(--panel))}
.segp[data-fx-tone] .mini button[aria-pressed="true"]{background:color-mix(in srgb,var(--sig) 18%,var(--panel));color:var(--sig);box-shadow:inset 0 0 0 1px var(--sig)}
.presets button[data-fx-tone]{color:var(--fx-example);border-color:color-mix(in srgb,var(--fx-example) 45%,var(--line));background:color-mix(in srgb,var(--fx-example) 8%,var(--panel))}
.presets button[data-fx-tone]:hover{background:color-mix(in srgb,var(--fx-example) 17%,var(--panel));border-color:var(--fx-example)}
.presets button[aria-pressed="true"]{box-shadow:inset 0 0 0 1px var(--fx-example)}
.rail button[data-id][aria-current="true"]{background:color-mix(in srgb,var(--fx-a) 12%,var(--panel))}
.rail button[data-id][aria-current="true"]::before{background:var(--fx-a)}
.rail button[data-id][aria-current="true"] .en{color:var(--fx-a)}

/* Home stays in the toolbar flow instead of floating over the app name. */
.bar{padding-inline-end:52px}
.bar #mms-home-fab{position:static;flex:0 0 38px;top:auto;left:auto;right:auto;margin:0;z-index:auto;box-shadow:none}
.bar .brand{min-width:0;flex-wrap:wrap}

/* Distinct colors for choices such as sine, triangle and square. */
.segp[data-fx-tone] .mini button[data-fx-choice]{color:var(--fx-choice);background:color-mix(in srgb,var(--fx-choice) 6%,var(--panel));box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--fx-choice) 40%,transparent)}
.segp[data-fx-tone] .mini button[data-fx-choice]:hover{background:color-mix(in srgb,var(--fx-choice) 15%,var(--panel))}
.segp[data-fx-tone] .mini button[data-fx-choice][aria-pressed="true"]{color:var(--fx-choice);background:color-mix(in srgb,var(--fx-choice) 20%,var(--panel));box-shadow:inset 0 0 0 2px var(--fx-choice)}

.fx-info-button{color:var(--fx-a);border-color:var(--fx-a);cursor:pointer;font-weight:700}
.fx-info-button:hover{background:color-mix(in srgb,var(--fx-a) 15%,transparent)}
.fx-info-dialog{box-sizing:border-box;width:min(620px,calc(100vw - 28px));max-height:calc(100dvh - 40px);overflow:auto;border:1px solid var(--fx-a);border-radius:18px;padding:24px;color:var(--ink);background:var(--bg);font:inherit;line-height:1.8;box-shadow:0 24px 90px #0006}
.fx-info-dialog::backdrop{background:#0009;backdrop-filter:blur(3px)}
.fx-info-dialog h2{margin:14px 0;color:var(--fx-a);font-size:1.4rem}
.fx-info-dialog h3{font-size:1rem;margin:18px 0 5px;color:var(--fx-b)}
.fx-info-dialog p{margin:0}
.fx-info-close{display:block;margin-inline-start:auto;padding:7px 14px;border:1px solid var(--fx-a);border-radius:9px;background:transparent;color:inherit;font:inherit;cursor:pointer}
.fx-info-dialog button:focus-visible,.fx-info-button:focus-visible{outline:3px solid var(--fx-b);outline-offset:3px}
@media(max-width:480px){.fx-info-dialog{padding:16px}}

/* Keep the selected sound source unmistakable in every palette. */
#srcSeg button{min-height:40px;transition:background .15s,color .15s,box-shadow .15s}
#srcSeg button[aria-pressed="true"]{background:var(--fx-a);color:#111319;font-weight:800;box-shadow:inset 0 0 0 2px var(--fx-a),0 0 0 2px var(--panel),0 0 0 4px var(--fx-a)}
:root[data-theme="light"] #srcSeg button[aria-pressed="true"]{color:#fff}
#srcSeg button[aria-pressed="true"]::before{content:"✓";display:inline-block;margin-inline-end:5px;font-weight:900}
#srcSeg button:focus-visible{outline:3px solid var(--fx-b);outline-offset:4px}
@media(prefers-reduced-motion:reduce){#srcSeg button{transition:none}}
.cleanup-shortcuts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.cleanup-shortcuts strong{font-size:13px;color:var(--muted)}
.cleanup-shortcuts button{min-height:44px;padding:10px 14px;border:1px solid var(--fx-a);border-radius:9px;color:var(--ink);background:var(--panel-2);font-weight:700}
.cleanup-shortcuts button[aria-pressed="true"]{background:var(--fx-a);color:#111319}
:root[data-theme="light"] .cleanup-shortcuts button[aria-pressed="true"]{color:#fff}
.cleanup-shortcuts button:focus-visible{outline:3px solid var(--fx-b);outline-offset:3px}
.vol-controls{display:flex;align-items:center;gap:8px;direction:ltr}
.vol-controls button{width:40px;height:40px;flex:0 0 40px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);font-size:24px;font-weight:700;line-height:1;touch-action:manipulation}
.vol-controls button:hover{border-color:var(--fx-a);color:var(--fx-a)}
.vol-controls button:focus-visible{outline:3px solid var(--fx-b);outline-offset:3px}

/* Keep English effect names aligned in the bilingual menu. */
.rail button .en{direction:ltr;text-align:left;flex:0 0 112px}
@media(max-width:900px){.rail button .en{flex-basis:auto}}

.recording-controls{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:12px 0;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.recording-controls button{min-height:44px;padding:8px 14px}
#srcSeg button:disabled{opacity:.4;cursor:not-allowed}

#srcSeg button[data-id="mic"]{font-weight:800;border:2px solid #f5b84b;background:color-mix(in srgb,#f5b84b 15%,var(--panel));color:var(--ink)}
#srcSeg button[data-id="mic"][aria-pressed="true"]{background:#f5b84b;color:#171b24;box-shadow:0 0 0 3px #f5b84b33}

.recording-controls.is-recording{border-color:#ff5268;background:color-mix(in srgb,#ff5268 14%,var(--panel))}
.recording-controls.is-recording button,#srcSeg button[data-id="mic"].is-recording{background:#df2441;color:#fff;border-color:#ff5268;opacity:1;box-shadow:0 0 0 3px #ff526833}

.recording-inputs{display:flex;flex-direction:column;gap:6px;min-width:0;width:280px;max-width:100%}
.recording-inputs label{font-weight:700;font-size:14px}
.recording-inputs select{width:100%;min-height:44px;background:var(--panel-2);color:var(--ink);border:1px solid var(--sig);border-radius:8px;padding:6px;font:inherit;font-size:16px}
.recording-inputs option{padding:6px 10px;background:var(--panel-2);color:var(--ink)}
.recording-inputs option:checked{background:var(--sig);color:#111319}
.recording-inputs select:disabled{opacity:.5}

.recording-controls{align-items:flex-end}
.recording-controls > button{margin-bottom:0;align-self:flex-end}
.recording-inputs select,.recording-inputs option{direction:ltr;text-align:left}
.recording-inputs label{text-align:start}

.song-controls{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:12px 0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.song-controls label{font-weight:700}
.song-controls select{min-height:44px;max-width:100%;padding:8px 14px;border:1px solid var(--sig);border-radius:8px;background:var(--panel-2);color:var(--ink);font:inherit;font-size:16px;text-align:left}

/* Voice and language choices keep distinct colors across effect palettes. */
.cleanup-shortcuts button[data-cleanup-source="voice-veronica"],#srcSeg button[data-id="voice-veronica"]{--choice-color:#ff79aa}
.voice-language-controls button[data-voice-language="he"]{--choice-color:#68c7ff}
.voice-language-controls button[data-voice-language="en"]{--choice-color:#b79bff}
.cleanup-shortcuts button[data-cleanup-source="voice-veronica"],.voice-language-controls button[data-voice-language],#srcSeg button[data-id="voice-veronica"]{border-color:var(--choice-color);background:color-mix(in srgb,var(--choice-color) 14%,var(--panel));color:var(--ink)}
.cleanup-shortcuts button[data-cleanup-source="voice-veronica"][aria-pressed="true"],.voice-language-controls button[data-voice-language][aria-pressed="true"],#srcSeg button[data-id="voice-veronica"][aria-pressed="true"]{background:var(--choice-color);color:#151923;box-shadow:0 0 0 2px color-mix(in srgb,var(--choice-color) 28%,transparent)}

/* Keep the theme switch away from the English toolbar home link. */
html[lang="en"] .spec-btn{left:auto;right:14px}
#srcSeg button[aria-pressed="true"],.cleanup-shortcuts button[aria-pressed="true"]{background:color-mix(in srgb,var(--fx-a) 28%,#151923);color:#fff}
#srcSeg button[data-id="mic"][aria-pressed="true"]{background:#775017;color:#fff;box-shadow:0 0 0 2px #c28b3c55}
.cleanup-shortcuts button[data-cleanup-source="voice-veronica"][aria-pressed="true"],#srcSeg button[data-id="voice-veronica"][aria-pressed="true"]{background:#87334f;color:#fff}
.voice-language-controls button[data-voice-language="he"][aria-pressed="true"]{background:#245878;color:#fff}
.voice-language-controls button[data-voice-language="en"][aria-pressed="true"]{background:#574181;color:#fff}

/* Choice surfaces stay dark in every theme. */
#srcSeg button,.cleanup-shortcuts button,.presets button,.segp .mini button{background:#202735;color:#edf1f7}
#srcSeg button:hover,.cleanup-shortcuts button:hover,.presets button:hover,.segp .mini button:hover{background:#303b4d;color:#fff}
#srcSeg button[aria-pressed="true"],.cleanup-shortcuts button[aria-pressed="true"]{background:color-mix(in srgb,var(--fx-a) 24%,#111722);color:#fff}
.presets button[data-fx-tone]{background:color-mix(in srgb,var(--fx-example) 12%,#151b27);color:#edf1f7}
.presets button[data-fx-tone][aria-pressed="true"]{background:color-mix(in srgb,var(--fx-example) 28%,#151b27);color:#fff}
.segp[data-fx-tone] .mini button[data-fx-choice]{background:color-mix(in srgb,var(--fx-choice) 12%,#151b27);color:#edf1f7}
.segp[data-fx-tone] .mini button[data-fx-choice][aria-pressed="true"]{background:color-mix(in srgb,var(--fx-choice) 28%,#151b27);color:#fff}
.cleanup-shortcuts button[data-cleanup-source="voice-veronica"],#srcSeg button[data-id="voice-veronica"]{background:#35202c;color:#fff}
.cleanup-shortcuts button[data-cleanup-source="voice-veronica"][aria-pressed="true"],#srcSeg button[data-id="voice-veronica"][aria-pressed="true"]{background:#703047;color:#fff}
.voice-language-controls button[data-voice-language="he"]{background:#192e3e;color:#fff}
.voice-language-controls button[data-voice-language="he"][aria-pressed="true"]{background:#214c67;color:#fff}
.voice-language-controls button[data-voice-language="en"]{background:#2b233c;color:#fff}
.voice-language-controls button[data-voice-language="en"][aria-pressed="true"]{background:#49376a;color:#fff}
#srcSeg button[data-id="mic"]{background:#352b1c;color:#fff}
#srcSeg button[data-id="mic"][aria-pressed="true"]{background:#63461e;color:#fff}
.recording-inputs select,.recording-inputs option,.song-controls select{background:#202735;color:#edf1f7}
.recording-inputs option:checked{background:#294b63;color:#fff}

/* Transport occupies a stable slot independent of source choices and button labels. */
.bar .transport{display:flex;align-items:center;gap:10px;flex:none}
.bar .transport #play{width:100px;justify-content:center;flex:none}
.bar .transport #byp{width:164px;justify-content:center;flex:none;white-space:nowrap}
.bar #srcSeg{order:10;flex-basis:100%}
@media(max-width:600px){.bar .brand{flex-basis:calc(100% - 62px)}.bar .transport{flex-basis:100%}}

.voice-language-controls button[data-voice-language]{min-width:76px;font-weight:800;letter-spacing:.06em;border-width:2px}
.voice-language-controls button[data-voice-language][aria-pressed="true"]{outline:2px solid var(--choice-color);outline-offset:3px}

.voice-language-controls{display:inline-flex;gap:7px;align-items:center;margin-inline:8px;padding:4px 8px;border-inline:1px solid var(--line)}
#srcSeg .voice-language-controls button{padding:7px 10px;min-width:62px;border-radius:10px}