/* Shared navigation, settings layouts, switches and fullscreen control. */
:root{color-scheme:dark;background:#111;--surface-finish:linear-gradient(100deg,#21182b,#130f19 55%,#251b30)}
body[data-site-page] musi-header button{margin:0}
/* Source controls must not paint in the workspace before the header mounts them. */
body[data-site-page]>#controls,body[data-site-page=tuning]>#harmonicPanel,body[data-site-page=compose]>#tracksPanel,body[data-site-page=compose] #analyzerPanel>#analyzerOptionsRow,body[data-site-page=sounds] .performance-column>#designer-settings,body[data-site-page=binaural]>#dropdownMenu{display:none}

/* The Flower of Life cover handles loading; navigation stays native. */
musi-header{display:block;flex:none;position:sticky;top:0;z-index:50;min-height:58px}body[data-site-page] musi-header button{font:12px/1.3 Arial,sans-serif;padding:6px 10px;border:1px solid #663388;border-radius:5px;background:#4b1570;color:#eee;cursor:pointer}body[data-site-page] musi-header button:disabled{opacity:.4;cursor:not-allowed}body[data-site-page] musi-header button:focus-visible{outline:2px solid #64e0ce;outline-offset:3px}body[data-site-page] #controls{top:var(--site-header-height,58px)}body[data-site-page=sounds]>.topbar{display:block;padding:0;border:0;background:none;position:sticky;top:0;z-index:50;flex:none}body[data-site-page=sounds]>.topbar musi-header{position:relative}body[data-site-page=sounds] .floating-sound-tools{z-index:60}body[data-site-page=binaural]{height:100dvh;display:flex;flex-direction:column;overflow:hidden}body[data-site-page=binaural] #transport{position:static;display:flex;gap:7px;align-items:center;flex-wrap:wrap}body[data-site-page=binaural] #menuButton{position:static;font-size:18px;padding:3px 9px}body[data-site-page=binaural] #dropdownMenu{top:calc(var(--site-header-height,58px) + 5px);z-index:60;border:1px solid #663388;border-radius:6px}body[data-site-page=binaural] #ui{flex:1;min-height:0;max-height:none;height:auto;padding:20px;overflow-y:auto}body[data-site-page=binaural] #ui h1{margin:0;font-size:24px}body[data-site-page=analyzer] #analyzers,body[data-site-page=tuning] #analyzers{min-height:0}@media(max-width:700px){body[data-site-page=binaural] #ui{padding:14px}body[data-site-page=binaural] #ui h1{display:block;font-size:21px}}
body[data-site-page=binaural] #transport button{font:12px/1.3 Arial,sans-serif;padding:6px 10px}body[data-site-page=binaural] #transport #menuButton{font-size:18px;padding:3px 9px}

/* Settings live under the active navigation tab; existing IDs/audio handlers stay intact. */
body[data-site-page] .site-settings{font:13px/1.5 Arial,sans-serif;color:#eee;min-width:0}
body[data-site-page] .site-settings #controls{position:static;display:flex;flex-direction:column;gap:22px;padding:0;background:none;border:0}
.site-settings #controls .row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:end;margin:0;padding:0 0 20px;border-bottom:1px solid #49305e}
.site-settings #controls .row:last-child{padding-bottom:0;border:0}
.site-settings #controls .row>*{margin:0;min-width:0;max-width:100%}
.site-settings #avgKeyTime,.site-settings #labelFontSize,.site-settings #refPitch,.site-settings #bpmInput,.site-settings #countInRounds,.site-settings #titleInput{width:100%}
.site-settings label{font-size:13px;color:#c5b6d0;line-height:1.5}
.site-settings #controls label:not(:has(input[type=checkbox])){display:flex;flex-direction:column;align-items:stretch;gap:8px}
body[data-site-page] .site-settings input:not([type=checkbox]):not([type=range]),body[data-site-page] .site-settings select{box-sizing:border-box;width:100%;min-width:0;max-width:100%;min-height:38px;padding:8px 10px;border:1px solid #664680;border-radius:6px;background:#160f1e;color:#eee;font:inherit}
body[data-site-page] .site-settings button{min-height:38px;padding:8px 12px;font:13px/1.4 Arial,sans-serif;white-space:normal}
.site-settings input[type=range]{width:100%;accent-color:#be98ed;cursor:pointer}
.site-settings .settings-group-title{font-size:14px;color:#be98ed;margin:24px 0 14px}
.site-settings #stringTabs{gap:8px;grid-column:1/-1}
.site-settings #harmonicPanel{margin-top:22px;padding:16px;border:1px solid #49305e;border-radius:8px;box-shadow:none}
.site-settings #harmonicPanel h2{font-size:14px;min-height:32px}
.site-settings #harmonicPanel h2>button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:36px;margin:0;padding:0;border:0;background:none;text-align:left;color:#be98ed}
.site-settings #harmonicPanel:not(.collapsed){display:flex;flex-wrap:wrap;gap:12px 20px}
.site-settings #harmonicPanel h2,.site-settings #harmonicList{width:100%}
.site-settings #tracksPanel{padding:0;background:none;box-shadow:none;border:0}
.site-settings .track-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(100px,auto);gap:14px;padding:14px;align-items:end}
.site-settings .track-row .track-remove{grid-column:-2/-1;margin-left:0}
.site-settings .track-row .track-error:empty{display:none}
.site-settings .track-row label:not(:has(input[type=checkbox])){flex-direction:column;align-items:stretch;gap:8px}
.site-settings .analyzer-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 20px;margin:0}
body[data-site-page] .site-settings #dropdownMenu{display:block;position:static;padding:0;border:0;background:none}
.site-settings #designer-settings{padding:0;margin:0;border:0;background:none}
.site-settings #designer-settings>summary{display:none}
.site-settings #designer-settings .settings-content{padding:0;gap:24px}
.site-settings #designer-settings .project-actions{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.site-settings #designer-settings .panel{padding:16px}
.site-settings #designer-settings .export-grid{gap:18px}
.site-settings details{margin-top:18px;padding-top:16px}
.site-settings summary{padding:6px 0;cursor:pointer}
.site-settings input:focus-visible,.site-settings select:focus-visible,.site-settings summary:focus-visible{outline:2px solid #64e0ce;outline-offset:3px}
body[data-site-page=binaural] #ui>.panel{box-sizing:border-box;padding:16px;border-radius:8px}
body[data-site-page=binaural] #ui>.panel h2{margin:0;font-size:16px;line-height:1.5}
body[data-site-page=binaural] #ui>.panel:not(.collapsed)>h2{margin-bottom:16px}
body[data-site-page=binaural] #ui>.panel:not(.collapsed)>label:not(:has(input[type=checkbox])),body[data-site-page=binaural] .fx-box label{display:flex;flex-direction:column;gap:8px;margin:12px 0}
body[data-site-page=binaural] #ui>.panel input:not([type=checkbox]):not([type=range]),body[data-site-page=binaural] #ui>.panel select{box-sizing:border-box;max-width:100%;min-height:36px;padding:7px 9px;margin:0}
body[data-site-page=binaural] .fx-box{padding-top:16px;margin-bottom:18px}
body[data-site-page=binaural] .fx-header{margin-bottom:12px}

/* One native-input switch style also covers dynamically created track/options controls. */
:where(body[data-site-page]) input[type=checkbox]{appearance:none;-webkit-appearance:none;display:inline-block;position:relative;box-sizing:border-box;flex:0 0 42px;width:42px;height:24px;min-width:42px;margin:0;padding:3px;border:1px solid #685278;border-radius:999px;background:#30243c;vertical-align:middle;cursor:pointer;transition:background-color .15s,border-color .15s}
:where(body[data-site-page]) input[type=checkbox]::before{content:'';display:block;width:16px;height:16px;border-radius:50%;background:#c6b7d1;box-shadow:0 1px 3px #0005;transform:translateX(0);transition:transform .15s,background-color .15s}
:where(body[data-site-page]) input[type=checkbox]:checked{background:#7141a0;border-color:#be98ed}
:where(body[data-site-page]) input[type=checkbox]:checked::before{transform:translateX(18px);background:#fff}
:where(body[data-site-page]) input[type=checkbox]:hover:not(:disabled){border-color:#64e0ce}
:where(body[data-site-page]) input[type=checkbox]:focus-visible{outline:2px solid #64e0ce;outline-offset:3px}
:where(body[data-site-page]) input[type=checkbox]:disabled{opacity:.4;cursor:not-allowed}
:where(body[data-site-page]:not([data-site-page=sounds])) label:has(>input[type=checkbox]){display:inline-flex;flex-direction:row;align-items:center;gap:12px;min-height:36px;margin:0;cursor:pointer}
body[data-site-page] .site-settings label:has(>input[type=checkbox]){display:flex;flex-direction:row-reverse;align-items:center;justify-content:space-between;gap:12px;min-height:38px;margin:0;cursor:pointer}
body[data-site-page] #overlays label:has(input[type=checkbox]){display:flex;gap:12px;align-items:center;margin:8px 0}
:where(body[data-site-page]) label:has(input[type=checkbox]:disabled){cursor:not-allowed}
@media(max-width:700px){.site-settings #controls .row,.site-settings .analyzer-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px}.site-settings #designer-settings .project-actions{grid-template-columns:1fr}.site-settings #designer-settings .export-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.site-settings .track-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.site-settings .track-row input[type=text]{width:100%}}
@media(max-width:420px){.site-settings #controls .row,.site-settings .analyzer-options{grid-template-columns:1fr}.site-settings #designer-settings .export-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){:where(body[data-site-page]) input[type=checkbox],:where(body[data-site-page]) input[type=checkbox]::before{transition:none}}
@media(forced-colors:active){:where(body[data-site-page]) input[type=checkbox]{appearance:auto;-webkit-appearance:auto;forced-color-adjust:auto}:where(body[data-site-page]) input[type=checkbox]::before{display:none}}

body[data-site-page] #fullscreenToggle{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));z-index:80;width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:6px;border:1px solid #663388;border-radius:7px;background:#4b1570;color:#eee;font:26px/1 Arial,sans-serif;cursor:pointer;box-shadow:0 3px 12px #0005}
body[data-site-page] #fullscreenToggle:hover{background:#5c2290;border-color:#be98ed}
body[data-site-page] #fullscreenToggle:focus-visible{outline:2px solid #64e0ce;outline-offset:3px}

/* Match the Master fader housing across dropdowns and expanded settings. */
body[data-site-page] select,body[data-site-page] .site-settings select,body[data-site-page] #controls select{background-color:#130f19;background-image:var(--surface-finish);color:#eee}
body[data-site-page] select option,body[data-site-page] select optgroup{background:#130f19;color:#eee}
body[data-site-page=sounds] .site-settings #designer-settings{background:var(--surface-finish)}
body[data-site-page=sounds] details,body[data-site-page=sounds] #copy-swap-popout,body[data-site-page=sounds] .inspect-view-menu,body[data-site-page=sounds] #inspect-view-options,body[data-site-page=sounds] #palette-tools,body[data-site-page=sounds] .sound-help-popout,body[data-site-page] .site-settings #harmonicPanel,body[data-site-page=binaural] #ui>.panel{background:var(--surface-finish)}