/* Lucide and retained destination artwork share a 24-unit grid; optical sizing is independent of targets. */
body svg.ui-icon {width:var(--ui-glyph,28px);height:var(--ui-glyph,28px);flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
body svg.icon-list-music {--ui-glyph:34px;stroke-width:1.5;} /* Short, wide artwork; keep the rendered stroke near 2px. */
body svg.icon-folder-open {--ui-glyph:30px;} /* Wide silhouette needs more vertical presence. */
body svg.icon-mt-notes,body svg.icon-notebook-pen {--ui-glyph:27px;} /* Dense full-height detail. */
body svg.icon-piano {--ui-glyph:30px;}
body svg.icon-file-music {--ui-glyph:28px;}
body svg.icon-text-align-start {--ui-glyph:28px;}
/* Destination paths restored without bringing back their former dimensions. */
body svg.icon-mt-score,body svg.icon-mt-lyrics {--ui-glyph:28px;}
body svg.icon-mt-lists,body svg.icon-mt-files {--ui-glyph:30px;stroke-width:1.7;}
body svg.icon-mt-keyboard-front {--ui-glyph:34px;stroke-width:1.5;} /* Shallow horizontal keybed. */
body svg.icon-settings,body svg.icon-mt-settings {--ui-glyph:27px;}
body :is(.favorite,.text-favorite)[aria-pressed=true] svg.ui-icon {fill:currentColor;}
:root {--nav-ink:#275f7b;--nav-surface:#fafbfd;--nav-border:#aac2cd;--nav-active:linear-gradient(115deg,#32639d,#237d79);--nav-focus:#276599;}
[data-library-theme=dark] {--nav-ink:#c1e7f0;--nav-surface:#1e303a;--nav-border:#527985;--nav-focus:#9cd6f5;}
#lyrics-view {--nav-ink:#275f7b;--nav-surface:#fafbfd;--nav-border:#aac2cd;--nav-focus:#276599;}
#lyrics-view.lyrics-dark {--nav-ink:#c1e7f0;--nav-surface:#1e303a;--nav-border:#527985;--nav-focus:#9cd6f5;}
body :is(.home-toolbar,.workspace-return,.library-quick-access,.lyrics-footer) :is(button:not(.library-nav):not(#songs)),body:not(.lyrics-open):not(.library-open) .masthead :is(#score-size,#show-lyrics,#score-tools,#reset),body .display-settings-toggle {background:var(--nav-surface);color:var(--nav-ink);border:1px solid var(--nav-border);border-radius:8px;}
body :is(.home-toolbar,.workspace-return,.library-quick-access,.lyrics-footer,.masthead) button:is([aria-current=page],[aria-expanded=true],[aria-pressed=true]):not(.library-nav):not(#songs) {background:var(--nav-active);color:white;border-color:#307987;box-shadow:inset 0 -3px 0 #ffffff55;}
body :is(.home-toolbar,.workspace-return,.library-quick-access,.lyrics-footer) button:focus-visible,body .display-settings-toggle:focus-visible {outline:2px solid var(--nav-focus);outline-offset:2px;}
body :is(.home-toolbar,.workspace-return,.library-quick-access,.lyrics-footer) button:hover:not(:disabled) {filter:brightness(.96);}
/* Score glyph remains visible at every width; view choice is still in the same menu. */
body .masthead .toolbar #score-size {width:44px;min-width:44px;flex:0 0 44px;padding:0;}
body .masthead #score-size .score-view-icon {display:block;width:28px;height:28px;}
body .masthead #score-view-label,body .masthead #score-size>svg:not(.score-view-icon) {display:none;}
body .masthead #score-tools-menu svg.ui-icon {width:22px;height:22px;}
body .masthead #score-tools-menu svg:is(.icon-chevron-right,.icon-chevron-left) {width:18px;height:18px;}
body .masthead .score-focus-control svg.ui-icon {width:16px;height:16px;}
/* Equal outer zones reserve a true center, independent of optional controls.
   Focus stays attached to the masthead in both states, including when its toolbar is inert. */
@media screen and (min-width:601px) {
 body:not(.iphone-score-ui) .masthead .toolbar {display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);column-gap:6px;padding-inline:max(12px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));}
 body:not(.iphone-score-ui) .masthead .toolbar .playing-controls {display:flex;grid-column:1;grid-row:1;justify-self:start;align-items:center;gap:6px;min-width:0;}
 body:not(.iphone-score-ui) .masthead .toolbar .utility-controls {display:flex;grid-column:3;grid-row:1;justify-self:end;align-items:center;gap:6px;min-width:0;}
 body:not(.iphone-score-ui) .masthead .toolbar #key {min-width:44px;max-width:clamp(44px,calc(50vw - 260px),140px);}
 body:not(.iphone-score-ui) .masthead #show-lyrics {margin-left:0;}
 body:not(.iphone-score-ui) .masthead .score-focus-control {left:calc(50% - 22px);right:auto;}
 body:not(.iphone-score-ui) .masthead .score-focus-control::before {left:8px;right:auto;box-sizing:border-box;}
 body:not(.iphone-score-ui) .masthead .score-focus-control svg {left:14px;right:auto;}
}
/* Library at left; reciprocal Score switch immediately beside Settings at right. */
body #lyrics-view .lyrics-footer {display:flex;justify-content:flex-start;gap:8px;}
body .lyrics-footer :is(.lyrics-score-toggle,.display-settings-toggle),body .workspace-return .display-settings-toggle {display:inline-flex;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;min-height:44px;margin:0;padding:0;}
.display-settings {margin-left:auto;flex:none;}
body .lyrics-footer .lyrics-score-toggle {margin-left:auto;}
body .lyrics-footer .display-settings {margin-left:0;}
body .display-settings-menu {position:fixed;z-index:40;display:grid;gap:12px;width:250px;max-width:calc(100vw - 16px);overflow:auto;padding:14px;border:1px solid var(--popup-border);border-radius:10px;background:var(--popup-surface);color:var(--popup-ink);box-shadow:0 8px 28px #173e3b33;}
body .display-settings-menu[hidden] {display:none;}
body .display-settings-menu h2 {font:600 15px/1.4 system-ui,sans-serif;margin:0;padding-bottom:8px;border-bottom:1px solid var(--popup-border);}
body .display-settings-menu label {display:grid;gap:6px;font:500 14px/1.4 system-ui,sans-serif;}
body .display-settings-menu select {width:100%;min-height:44px;font:16px system-ui,sans-serif;padding:8px;border:1px solid var(--popup-border);border-radius:7px;background:var(--popup-surface);color:var(--popup-ink);}
body :is(#keyboard-view,#lyrics-view) .display-settings-menu button {display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;height:auto;min-height:44px;padding:8px 10px;font:500 14px/1.4 system-ui,sans-serif;background:var(--nav-surface);color:var(--nav-ink);border:1px solid var(--nav-border);border-radius:7px;}
body .display-settings-menu svg.ui-icon {width:22px;height:22px;}
body .display-settings-menu :is(button,select):focus-visible {outline:2px solid var(--nav-focus);outline-offset:2px;}
#lyrics-view {--popup-surface:var(--lyrics-bg);--popup-ink:var(--lyrics-ink);--popup-border:var(--lyrics-muted);}
@media print {.display-settings {display:none!important;}}

/* Neutral inactive surfaces; color belongs to the artwork, not a pastel wash. */
:root {--icon-paint:url("#mt-icon-blue-teal");}
[data-library-theme=dark] {--icon-paint:url("#mt-icon-blue-teal-dark");}
#lyrics-view {--icon-paint:url("#mt-icon-blue-teal");}
#lyrics-view.lyrics-dark {--icon-paint:url("#mt-icon-blue-teal-dark");}
body :is(.home-toolbar,.workspace-return,.library-quick-access,.lyrics-footer) svg.ui-icon,
body:not(.lyrics-open):not(.library-open) .masthead :is(#score-size,#show-lyrics,#score-tools,#reset)>svg.ui-icon {stroke:var(--icon-paint);}
body :is(.home-toolbar,.workspace-return,.library-quick-access,.lyrics-footer) svg.ui-icon [fill=currentColor],
body:not(.lyrics-open):not(.library-open) .masthead :is(#score-size,#show-lyrics,#score-tools,#reset)>svg.ui-icon [fill=currentColor] {fill:var(--icon-paint);}
body :is(.home-toolbar,.workspace-return,.library-quick-access,.lyrics-footer) button:is([aria-current=page],[aria-expanded=true],[aria-pressed=true]),
body:not(.lyrics-open):not(.library-open) .masthead :is(#score-size,#show-lyrics,#score-tools,#reset):is([aria-current=page],[aria-expanded=true],[aria-pressed=true]) {--icon-paint:currentColor;}

body:not(.lyrics-open):not(.library-open) .masthead :is(#show-lyrics,#score-tools,#reset):not(:disabled):hover {background:var(--nav-surface);filter:brightness(1.08);}
body:not(.lyrics-open):not(.library-open) .masthead :is(#score-size,#show-lyrics,#score-tools,#reset):is([aria-expanded=true],[aria-pressed=true]):not(:disabled) {background:var(--nav-active);color:white;border-color:#307987;--icon-paint:currentColor;}

/* Home display control: retain the target and focus ring without a destination tile. */
body #library-home .home-toolbar .library-theme-toggle[aria-pressed]:not(:disabled) {background:transparent;border-color:transparent;box-shadow:none;}

/* Musical controls: quiet view selector and Key, subordinate Reset. */
.masthead {--music-control-surface:#f8f9fa;--music-control-hover:#edf0f3;--music-control-pressed:#e1e7ec;--music-control-ink:#253e50;--music-control-border:#a5b4be;--music-key-border:#347d94;--music-key-surface:#fff;--music-reset-ink:#587788;--music-reset-surface:transparent;}
[data-library-theme=dark] .masthead {--music-control-surface:#292d32;--music-control-hover:#363c43;--music-control-pressed:#434b54;--music-control-ink:#f0f2f4;--music-control-border:#77848e;--music-key-border:#83c5d7;--music-key-surface:#30353b;--music-reset-ink:#99b3c0;--music-reset-surface:#292d32;}
body:not(.lyrics-open):not(.library-open) .masthead .toolbar .playing-controls :is(#score-size,#key,#reset) {height:44px;min-height:44px;border:1px solid var(--music-control-border);border-radius:6px;background:var(--music-control-surface);color:var(--music-control-ink);box-shadow:none;--icon-paint:inherit;}
body:not(.lyrics-open):not(.library-open) .masthead .toolbar .playing-controls #key {position:relative;border-color:var(--music-control-border);background:var(--music-key-surface);}
body:not(.lyrics-open):not(.library-open) .masthead .toolbar .playing-controls #reset {background:var(--music-reset-surface);color:var(--music-reset-ink);--icon-paint:currentColor;}
@media (hover:hover) and (pointer:fine) {
body:not(.lyrics-open):not(.library-open) .masthead .toolbar .playing-controls :is(#score-size,#key,#reset):not(:disabled):hover {background:var(--music-control-hover);border-color:var(--music-key-border);filter:none;}
}
body:not(.lyrics-open):not(.library-open) .masthead .toolbar .playing-controls :is(#score-size,#key,#reset):not(:disabled):is(:active,[aria-expanded=true],[aria-pressed=true]),
body:has(#key-dialog[open]) .masthead .toolbar .playing-controls #key {background:var(--music-control-pressed);border-color:var(--music-key-border);color:var(--music-control-ink);box-shadow:none;--icon-paint:inherit;}
body:not(.lyrics-open):not(.library-open) .masthead .toolbar .playing-controls :is(#score-size,#key,#reset):focus-visible {outline:2px solid var(--nav-focus);outline-offset:2px;}

/* Background mode is a neutral menu toggle, with a quiet state mark at the right. */
#score-tools-menu #score-page-theme {background:transparent;color:var(--ink);box-shadow:none;}
#score-tools-menu #score-page-theme::after {content:"";width:1em;margin-left:auto;color:var(--accent-strong);}
#score-tools-menu #score-page-theme[aria-checked=true]::after {content:"\2713";}

/* Shared accepted Settings artwork; utility launcher has no theme-state decoration. */
body:not(.lyrics-open):not(.library-open) .masthead .toolbar #score-tools {background:var(--music-control-surface);color:var(--music-control-ink);border-color:var(--music-control-border);box-shadow:none;--icon-paint:inherit;}
body:not(.lyrics-open):not(.library-open) .masthead .toolbar #score-tools:is(:hover,[aria-expanded=true]):not(:disabled) {background:var(--music-control-hover);color:var(--music-control-ink);box-shadow:none;--icon-paint:inherit;filter:none;}
body:not(.lyrics-open):not(.library-open) .masthead #score-tools>svg.icon-mt-settings {width:27px;height:27px;stroke-width:1.8;}

/* Key is content-sized; fixed icon targets must never dictate its text width. */
body:not(.lyrics-open):not(.library-open) .masthead .toolbar .playing-controls #key {width:84px;min-width:84px;max-width:84px;flex:0 0 auto;flex-direction:row;gap:4px;white-space:nowrap;}

/* One pair gap and native-scrollbar reservation for Score and Lyrics.
   Subtract the currently occupied gutter so visible scrollbars are not counted twice. */
:root {--score-lyrics-scrollbar:0px;--score-lyrics-edge:12px;--score-lyrics-gap:6px;--score-lyrics-right:max(var(--score-lyrics-edge),env(safe-area-inset-right,0px));}
@media screen {
 body:not(.lyrics-open):not(.library-open) .masthead .toolbar,body #lyrics-view .lyrics-footer {padding-right:calc(var(--score-lyrics-right) + max(0px,var(--score-lyrics-scrollbar) - (100vw - 100%)));}
 body .masthead .toolbar .footer-view-pair,body #lyrics-view .footer-view-pair {display:flex;align-items:center;gap:var(--score-lyrics-gap);flex:none;}
 body #lyrics-view .footer-view-pair {margin-left:auto;}
}
@media screen and (max-width:600px) {:root {--score-lyrics-edge:4px;}}

/* Signature details remain in the selector and accessible name/title. */
body .masthead #key-signature {display:none;}

/* Predictable iPhone groups: tonic and mode fit a stable Key target at every width. */
@media screen {
 body.iphone-score-ui .masthead .toolbar {display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;column-gap:2px;}
 body.iphone-score-ui .masthead .toolbar .playing-controls {display:flex;grid-column:1;grid-row:1;align-items:center;gap:2px;min-width:0;}
 body.iphone-score-ui .masthead .toolbar .utility-controls {grid-column:3;grid-row:1;justify-self:end;}
 body.iphone-score-ui:not(.lyrics-open):not(.library-open) .masthead .toolbar .playing-controls #key {width:64px;min-width:64px;max-width:64px;}
}

/* Lyrics uses compact peer rows and its original A/size menu, not a select field. */
body #lyrics-settings-panel {gap:4px;padding:10px;--popup-hover:color-mix(in srgb,var(--popup-ink) 12%,var(--popup-surface));}
body #lyrics-view #lyrics-settings-panel button {position:relative;min-height:44px;gap:8px;padding:8px 6px;border:1px solid transparent;background:transparent;color:var(--popup-ink);font:500 14px/1.4 system-ui,sans-serif;box-shadow:none;}
body #lyrics-view #lyrics-settings-panel button:is(:hover,:active,:focus-visible) {background:var(--popup-hover);}
body #lyrics-settings-panel .lyrics-font-art {width:20px;flex:none;font-size:19px;line-height:20px;text-align:center;}
body #lyrics-settings-panel .lyrics-font-chevron {margin-left:auto;font-size:20px;line-height:20px;}
body #lyrics-view #lyrics-settings-panel #lyrics-theme {padding-right:20px;}
body #lyrics-settings-panel #lyrics-theme::after {content:"";position:absolute;right:4px;}
body #lyrics-settings-panel #lyrics-theme[aria-checked=true]::after {content:"✓";}
body #lyrics-settings-panel .lyrics-font-menu {z-index:41;width:176px;min-width:176px;background:var(--popup-surface);border-color:var(--popup-border);}
body #lyrics-settings-panel .lyrics-font-menu[hidden] {display:none;}
body #lyrics-settings-panel .lyrics-font-menu button[aria-checked=true] {background:transparent;}
body #lyrics-settings-panel .lyrics-font-menu button[aria-checked=true]::after {content:"✓";margin-left:auto;}
/* Narrow desktop keeps the edge Focus target outside the toolbar's hit areas.
   At 320px, seven readable targets cannot fit one row; reserve a second row. */
@media screen and (max-width:600px) {
 body:not(.iphone-score-ui):not(.lyrics-open):not(.library-open) .masthead .toolbar {padding-right:calc(52px + var(--score-lyrics-right) + max(0px,var(--score-lyrics-scrollbar) - (100vw - 100%)));}
 body:not(.iphone-score-ui):not(.lyrics-open):not(.library-open) .masthead .toolbar .playing-controls #key {width:64px;min-width:64px;max-width:64px;}
}
@media screen and (max-width:360px) {
 body:not(.iphone-score-ui) .masthead .toolbar {display:grid;grid-template-columns:minmax(0,1fr);row-gap:2px;}
 body:not(.iphone-score-ui) .masthead .toolbar .playing-controls {display:flex;grid-column:1;grid-row:1;gap:2px;min-width:0;}
 body:not(.iphone-score-ui) .masthead .toolbar .utility-controls {display:flex;grid-column:1;grid-row:2;justify-self:end;}
}

/* Sound replaces the Lyrics settings rows in-place, like the Score submenu. */
#lyrics-settings-panel.lyrics-sound-open>:not(.lyrics-sound-wrap) {display:none;}
#lyrics-settings-panel .lyrics-sound-wrap[hidden],#lyrics-settings-panel #lyrics-sound[hidden],#lyrics-sound-options[hidden] {display:none;}
#lyrics-sound-options [aria-checked=true]::after {content:'✓';margin-left:auto;}

/* Labeled Focus targets reserve their space; narrow desktop uses a second row. */
@media screen{
 body:not(.iphone-score-ui) .masthead .score-focus-control{width:144px;min-width:144px;left:calc(50% - 72px);right:auto;gap:6px;padding:0 8px;border:1px solid #b7c8d5;border-radius:8px;background:#f7f9fb;font:500 13px/1.2 system-ui}
 body:not(.iphone-score-ui) .masthead .score-focus-control::before{display:none}
 body:not(.iphone-score-ui) .masthead .score-focus-control svg{position:static;flex:none}
 body:not(.iphone-score-ui) .masthead .score-focus-control:hover{background:#eaf2f8}
 body.iphone-score-ui .score-focus-control span{display:none}
 body.iphone-score-ui .masthead.controls-hidden #score-show-controls:not([hidden]){display:inline-flex!important}
}
@media screen and (min-width:701px){body:not(.iphone-score-ui) .masthead .toolbar{grid-template-columns:minmax(0,1fr) 144px minmax(0,1fr)}}
@media screen and (max-width:700px){
 body:not(.iphone-score-ui):not(.lyrics-open):not(.library-open) .masthead .toolbar{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:2px;padding:4px 4px calc(52px + var(--playing-safe-bottom))}
 body:not(.iphone-score-ui) .masthead .toolbar .playing-controls{gap:2px}
 body:not(.iphone-score-ui):not(.lyrics-open):not(.library-open) .masthead .toolbar .playing-controls #key{width:64px;min-width:64px;max-width:64px}
}

/* Destination labels never affect Score/Lyrics or the compact phone footers. */
body :is(.home-toolbar,.workspace-return,.library-quick-access) .footer-destination-label{display:none}
@media screen and (min-width:700px){
 body:not(.iphone-score-ui) :is(#library-home,#library,#lists-view,#files-view,#texts-view,#keyboard-view) :is(.home-toolbar,.workspace-return,.library-quick-access) button[data-footer-destination]{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:auto;min-width:44px;height:44px;min-height:44px;padding:0 10px;gap:7px;font:500 13px/1.2 system-ui,sans-serif}
 body:not(.iphone-score-ui) :is(.home-toolbar,.workspace-return,.library-quick-access) .footer-destination-label{display:inline;white-space:nowrap}
}

/* The reading-view switch has the same slot in both footers; Lyrics reserves
   the marking slot as spacing, without adding an unavailable action. */
body .masthead .toolbar #score-markup {display:none;}
@media screen and (min-width:600px) {
 body .masthead .toolbar #score-markup {display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border:1px solid var(--music-control-border);border-radius:8px;background:var(--music-control-surface);color:var(--music-control-ink);}
 body .masthead .toolbar #score-markup[aria-pressed=true] {background:var(--nav-active);color:white;}
 body #lyrics-view .footer-view-pair .lyrics-score-toggle {margin-right:calc(44px + var(--score-lyrics-gap));}
}
@media screen and (min-width:601px) and (max-width:700px) {
 body:not(.iphone-score-ui):not(.lyrics-open):not(.library-open) .masthead .toolbar {padding-right:calc(var(--score-lyrics-right) + max(0px,var(--score-lyrics-scrollbar) - (100vw - 100%)));}
}

/* Fixed destination slots prevent Lists/Files/Notes labels and legacy icon
   sizing from moving neighboring controls between workspaces. */
body :is(#lists-view,#files-view,#texts-view) .workspace-return {gap:8px;}
body :is(#lists-view,#files-view,#texts-view) .workspace-return button[data-footer-destination] {display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;gap:7px;}
body :is(#lists-view,#files-view,#texts-view) .workspace-return button[data-footer-destination] svg {flex:none;width:30px;height:30px;}
@media screen and (min-width:700px) {
 body:not(.iphone-score-ui) :is(#lists-view,#files-view,#texts-view) .workspace-return button[data-footer-destination] {flex-basis:88px;width:88px;min-width:88px;padding:0 7px;}
}

/* Wide pointer-driven windows: full-width chrome, workspace-aligned controls.
   Touch/tablet and narrow layouts retain their established safe-area geometry. */
@media screen and (min-width:1200px) and (hover:hover) and (pointer:fine) {
 body :is(#library,#lists-view,#files-view,#texts-view,#keyboard-view)>:is(.library-quick-access,.workspace-return),
 body #lyrics-view .lyrics-footer,
 body:not(.lyrics-open):not(.library-open) .masthead .toolbar {
  padding-left:max(12px,env(safe-area-inset-left,0px),var(--desktop-footer-left,12px));
  padding-right:max(12px,env(safe-area-inset-right,0px),var(--desktop-footer-right,12px));
 }
 /* Preserve the existing shared view-switch slot when Score paper is wider. */
 body:not(.lyrics-open):not(.library-open) .masthead .toolbar {
  padding-right:max(12px,env(safe-area-inset-right,0px),var(--desktop-footer-right,12px),calc((100% - var(--lyrics-content-width))/2));
 }
}

/* Reading return buttons follow the title banner; compact phones stay unchanged. */
@media screen and (min-width:701px) {
 body:not(.iphone-score-ui) #lyrics-view .lyrics-footer,
 body:not(.iphone-score-ui):not(.lyrics-open):not(.library-open) .masthead .toolbar {
  padding-left:max(env(safe-area-inset-left,0px),var(--reading-footer-left,var(--desktop-footer-left,12px)));
 }
}