/* Shared application navigation, project toolbar, and MIDI connection menu. */
.app-header{height:72px;min-height:72px;display:flex;align-items:center;padding:0 26px;border-bottom:1px solid var(--line);gap:32px;background:#12151b;font:14px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;position:relative;z-index:50;box-sizing:border-box}
.app-header .brand{display:flex;align-items:center;gap:10px;color:#eff3f7;font-size:22px;font-weight:650;white-space:nowrap;text-decoration:none}
.app-header .brand b{color:var(--accent);font-size:28px}
.app-header .brand span{font-weight:400;font-size:14px;letter-spacing:normal;border-left:1px solid #39414e;padding-left:14px;margin-left:4px;color:var(--accent)}
.app-header nav{display:flex;gap:24px}
.app-header nav a{color:var(--muted);text-decoration:none}
.app-header nav a:hover{color:#fff}
.header-tools{margin-left:auto;display:flex;gap:16px;align-items:center;min-width:0}
.app-header .bridge-link{margin:0;font-size:12px;color:var(--accent);text-decoration:none;white-space:nowrap}
.app-header .bridge-link:hover{text-decoration:underline}
.app-header #connection{margin:0;font-size:12px;color:#dfe7ee}
.toolbar{display:flex;gap:8px;align-items:center;padding:14px 24px;border-bottom:1px solid var(--line);flex-wrap:wrap;font:14px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.toolbar .grow{flex:1}
.toolbar a{color:var(--accent);text-decoration:none}
.toolbar input{font:600 14px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-width:0;max-width:100%;background:#10151c;color:#e6edf5;border:1px solid #39414e;border-radius:5px;padding:8px}
.toolbar button,.midi-popover button{font:inherit;background:#242a33;color:#e6edf5;border:1px solid #39414e;border-radius:6px;padding:9px 11px;cursor:pointer;white-space:nowrap}
.toolbar button:hover,.midi-popover button:hover{background:#35404b}
.toolbar button.primary{background:var(--accent);color:#172018;border-color:var(--accent);font-weight:650}
.midi-menu{position:relative;border:0;padding:0;margin:0}
.midi-menu>summary{display:block;list-style:none;margin:0;padding:8px 10px;border:1px solid #39414e;border-radius:6px;white-space:nowrap;cursor:pointer;font-size:12px;color:var(--muted)}
.midi-menu>summary::before,.midi-menu[open]>summary::before{content:none}
.midi-menu>summary::-webkit-details-marker{display:none}
.midi-menu.has-inputs>summary{color:var(--accent)}
.midi-popover{position:absolute;right:0;top:calc(100% + 12px);width:320px;max-width:calc(100vw - 32px);padding:18px;background:#171b22;border:1px solid #39414e;border-radius:8px;box-shadow:0 12px 36px #0008;white-space:normal;font-size:12px;color:#dfe7ee}
.midi-popover .row{display:flex;gap:8px;flex-wrap:wrap}
.midi-popover button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
.midi-popover a{color:var(--accent);text-decoration:none}
.midi-status{color:#aebac7;line-height:1.6;overflow-wrap:anywhere;margin:10px 0 14px}
.midi-devices{margin:12px 0;padding-left:18px;color:var(--muted);line-height:1.6}
.app-header :focus-visible,.toolbar :focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:1000px){.app-header{height:auto;padding:14px;gap:14px;flex-wrap:wrap}.app-header .brand{font-size:18px}.app-header nav{gap:12px}.header-tools{gap:10px}.toolbar{padding:12px}}
@media(max-width:550px){.header-tools{width:100%;justify-content:space-between;margin:0}.midi-popover{left:0;right:auto}}

#workspace-divider{cursor:col-resize;touch-action:none;background:#12171e;border-inline:1px solid var(--line);position:relative}
#workspace-divider::after{content:"";position:absolute;top:45%;height:48px;left:2px;width:2px;border-radius:2px;background:#52616e}
#workspace-divider:hover,#workspace-divider:focus-visible{background:#334334;outline:1px solid var(--accent);outline-offset:-1px}
body.resizing-workspace{cursor:col-resize;user-select:none}
body.resizing-workspace #editor-viewport{pointer-events:none}

#assignments{container-type:inline-size;container-name:assignments}
#assignments>.assignment-picker{display:flex;flex-wrap:nowrap;gap:6px;align-items:center}
#assignments>.assignment-picker>select{flex:1;min-width:0;width:0;max-width:100%}
.assignment-picker>button{flex:none;white-space:nowrap}
@container assignments (max-width:300px){.assignment-picker .assign-word{display:none}}
.app-header .midi-popover .bridge-link{display:block;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.toolbar{position:relative;z-index:40}
.toolbar details.toolbar-menu{position:relative;border:0;padding:0;margin:0}
.toolbar-menu>summary{list-style:none;margin:0;padding:9px 11px;border:1px solid #39414e;border-radius:6px;background:#242a33;color:#e6edf5;cursor:pointer;font-size:14px;white-space:nowrap;font-weight:500}
.toolbar-menu>summary::-webkit-details-marker{display:none}
.toolbar-menu>summary::before,.toolbar-menu[open]>summary::before{content:none}
.toolbar-menu>summary.needs-assignment,.export-menu>summary{background:var(--accent);color:#172018;border-color:var(--accent);font-weight:650}
.toolbar-popover{position:absolute;left:0;top:calc(100% + 8px);width:380px;max-width:calc(100vw - 32px);max-height:65vh;overflow:auto;padding:18px;box-sizing:border-box;background:#171b22;color:#dfe7ee;border:1px solid #45515d;border-radius:8px;box-shadow:0 12px 36px #0008}
.export-menu .toolbar-popover{left:auto;right:0}
.toolbar-popover h3{margin:0 0 12px;font-size:14px}
.toolbar-popover p{font-size:12px;line-height:1.6;color:#aebac7}
.toolbar-popover .wide{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0;font-size:12px}
.toolbar-popover .wide input[type=range]{flex:1;min-width:80px}
.toolbar-popover #obs-url{width:100%;font-size:12px;font-weight:400}
.toolbar-popover .field input{font-weight:400}
@media(max-width:550px){.toolbar details.toolbar-menu{position:static}.toolbar-menu .toolbar-popover{left:12px;right:auto;top:100%;width:calc(100% - 24px)}}
:root{--status-height:40px}
body{padding-bottom:var(--status-height)}
body>#notice{position:fixed;inset:auto 0 0;width:100%;box-sizing:border-box;min-height:40px;max-height:30vh;overflow:auto;margin:0;padding:10px 24px;border-top:1px solid var(--line);background:#12151b;color:#aab6c3;font-size:12px;line-height:1.6;z-index:100;opacity:1}
body>#notice.status-attention{animation:status-attention 2s ease-out}
@keyframes status-attention{0%,15%{background:#86451e;color:#fff;border-color:#ffbd7c}100%{background:#12151b;color:#aab6c3;border-color:var(--line)}}
@media(prefers-reduced-motion:reduce){body>#notice.status-attention{animation:none;border-top-color:#ffbd7c}}
body.preview{padding-bottom:0}
.toolbar-menu>summary.needs-attention{border-color:#ffbd7c;color:#ffbd7c}
.toolbar-menu>summary.needs-attention.needs-assignment{color:#172018}
/* Binary settings remain native keyboard-operable controls with switch semantics. */
input[type=checkbox][role=switch],.wide input[type=checkbox][role=switch]{appearance:none;-webkit-appearance:none;position:relative;display:inline-block;flex:0 0 auto;width:30px;min-width:30px;height:18px;margin:0;padding:0;border:1px solid #52606e;border-radius:999px;background:#303a46;cursor:pointer;vertical-align:middle;transition:background .15s,border-color .15s}
input[type=checkbox][role=switch]::before{content:"";position:absolute;width:12px;height:12px;left:2px;top:2px;border-radius:50%;background:#e8eef4;transition:transform .15s}
input[type=checkbox][role=switch]:checked{background:var(--accent);border-color:var(--accent)}
input[type=checkbox][role=switch]:checked::before{transform:translateX(12px);background:#172018}
input[type=checkbox][role=switch]:disabled{opacity:.4;cursor:default}
input[type=checkbox][role=switch]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(prefers-reduced-motion:reduce){input[type=checkbox][role=switch],input[type=checkbox][role=switch]::before{transition:none}}

.configure-instruments{display:inline-block;padding:8px 11px;border:1px solid color-mix(in srgb,var(--accent) 35%,#39414e);border-radius:6px;background:color-mix(in srgb,var(--accent) 8%,#171b22);color:var(--accent);font-size:12px;line-height:1.4;text-decoration:none;white-space:nowrap}
.configure-instruments:hover{background:color-mix(in srgb,var(--accent) 18%,#171b22);text-decoration:none;border-color:var(--accent)}
.configure-instruments:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.instrument-customization{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.instrument-customization p{margin:0 0 10px;font-size:12px;color:#aebac7}
.numeric-control{position:relative;display:block;min-width:0;width:100%}
.numeric-control input[type=number]{width:100%;box-sizing:border-box;padding-right:30px}
.field-unit{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:11px;line-height:1;pointer-events:none;user-select:none}

/* Numeric fields use direct entry without native stepper arrows. */
input[type=number]{appearance:textfield;-moz-appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* Project menus stay above composition controls and the editor. */
.toolbar .file-button{display:inline-flex;align-items:center;font:inherit;line-height:normal;padding:9px 11px;border:1px solid #39414e;border-radius:6px;box-sizing:border-box}
button.icon-only{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:24px;min-height:24px;padding:4px;line-height:1}
button.icon-only svg{display:block;width:18px;height:18px;flex:none;pointer-events:none}
button.icon-only[hidden]{display:none!important}
@keyframes assignment-invite{0%,100%{box-shadow:0 0 4px 1px color-mix(in srgb,var(--accent) 20%,transparent)}50%{box-shadow:0 0 20px 5px color-mix(in srgb,var(--accent) 55%,transparent),0 0 0 2px color-mix(in srgb,var(--accent) 55%,transparent)}}
#instrument-menu:not([open])>#instrument-summary.needs-assignment{animation:assignment-invite 2.2s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){#instrument-menu:not([open])>#instrument-summary.needs-assignment{animation:none;box-shadow:0 0 7px color-mix(in srgb,var(--accent) 20%,transparent)}}