/* Shared phone layout. Library navigation and the reading dock occupy the same
   bottom edge; the score is a focused detail view with an explicit back link. */
.mobile-only,.nav-short{display:none}
.practice-timeline{flex:1;min-width:150px}
.practice-timeline .practice-seek{min-width:0;width:100%}
#score-tools-content{min-width:0}

@media screen and (max-width:760px),screen and (max-width:1100px) and (max-height:500px){
 :root{--mobile-edge:16px;--mobile-nav-height:72px}
 html{scroll-padding-bottom:90px}
 body{padding-bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));font-size:14px}
 body .workspace{margin:0;min-width:0}
 body main{padding:18px var(--mobile-edge) 24px;max-width:760px}
 body .topbar,body .app-footer{display:none}
 button,a,input,select,textarea,summary{touch-action:manipulation}
 input:not([type=range]):not([type=checkbox]),select,textarea{font-size:16px}
 .primary,.secondary,.danger,.icon-button{min-height:44px}
 .primary,.secondary,.danger{font-size:13px;padding:10px 14px;border-radius:9px;line-height:1.4}
 .text-button{display:inline-flex;align-items:center;min-height:44px;font-size:12px;line-height:1.4}
 .mobile-only{display:inline-flex}

 /* Collection shell: recognizable brand above, labelled destinations below. */
 body .sidebar{position:static;display:flex;width:100%;min-height:60px;padding:8px var(--mobile-edge);background:var(--bg);border:0}
 body .sidebar .brand{width:auto;min-height:44px;justify-content:flex-start;gap:9px;font-size:26px}
 body .sidebar .brand-icon{width:36px;height:36px}
 body .sidebar .brand-type{display:block}
 body .sidebar .brand-sub,body .sidebar .nav-label,body .sidebar-bottom{display:none}
 body .sidebar nav{position:fixed;inset:auto 0 0;z-index:20;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));padding:5px max(8px,env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));margin:0;gap:4px;overflow:visible;background:#f7f8f4f7;border-top:1px solid #d4ddcd;box-shadow:0 -4px 22px #223c3208}
 body .sidebar .nav-item{display:flex;flex-direction:column;justify-content:center;gap:4px;width:100%;height:60px;min-height:44px;margin:0;padding:5px 2px;border-radius:11px;font-size:11px;font-weight:550;color:#687569}
 body .sidebar .nav-item>span:first-child{font-size:22px;width:auto;line-height:1.1}
 body .sidebar .nav-text,body .sidebar .nav-count{display:none}
 body .sidebar .nav-short{display:block}
 body .sidebar .nav-item.active{background:#e4eddc;color:#254b3e}
 .page-heading{flex-direction:row;align-items:center;gap:12px;margin:0 0 20px}
 .page-heading>div{min-width:0}
 .page-heading .eyebrow,.page-heading .intro{display:none}
 .page-heading h1{font-size:30px;letter-spacing:-.7px;line-height:1.15;margin:0}
 .page-heading h1>span{display:none}
 .page-heading .primary{width:auto;flex-shrink:0;font-size:12px;padding:10px 12px;gap:5px}
 .page-heading .primary>span{font-size:18px}
 .collection-toolbar{display:flex;flex-direction:column-reverse;align-items:stretch;gap:10px;margin-bottom:14px}
 .search{display:flex;min-width:0;gap:9px;border:1px solid #d4ddcd;background:#fff;border-radius:10px;padding:0 12px}
 .search>span{font-size:22px}
 .search input{width:100%;min-width:0;height:46px;padding:10px 0;border:0;font-size:16px}
 .tabs{gap:6px;border:0;align-items:center}
 .tabs button{min-height:44px;padding:8px 14px;border:1px solid transparent;border-radius:8px;font-size:12px}
 .tabs button.active{background:#e8eedf;border-color:#d4dfca;color:var(--green)}
 .tabs span{background:#d5e2c7;font-size:10px}
 .cards.archive-list{gap:10px}
 .archive-list .card{grid-template-columns:34px minmax(0,1fr) 14px;gap:0 11px;min-height:96px;padding:14px 12px;border-radius:12px}
 .archive-list .card-icon{width:32px;height:38px;font-size:23px}
 .archive-list .card h3{font-size:21px;line-height:1.2;margin:0 0 5px}
 .archive-list .card p{font-size:11px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .card-details{gap:5px 8px;margin-top:7px}
 .card-meta{font-size:11px}
 .archive-list .origin-tag{font-size:10px}
 .guide-banner{margin-top:20px;padding:14px;border-radius:10px;gap:12px}
 .guide-banner strong{font-size:18px;line-height:1.25}
 .guide-banner strong+span{display:none}
 .mobile-backup{display:inline-flex;margin-top:14px}
 .storage-footnote{font-size:11px;line-height:1.6;margin:12px 0}
 .empty-state{padding:24px 18px;border-radius:12px}
 .empty-state h2{font-size:24px}

 /* Reading: two compact rows above the page, tools never push the music away. */
 body.score-mode{padding-bottom:var(--score-scroll-height,calc(64px + env(safe-area-inset-bottom)));background:#e9ede4}
 body.score-mode .sidebar{display:none}
 body.score-mode main{padding:0;max-width:none}
 body.score-mode .workspace{max-width:100%;overflow-x:clip}
 #score-view .reader{border:0;border-radius:0;margin:0;overflow:visible}
 #score-view .reader-heading{display:flex;align-items:center;flex-wrap:nowrap;gap:8px;padding:8px max(10px,env(safe-area-inset-right)) 6px max(6px,env(safe-area-inset-left));background:var(--bg)}
 #score-view .score-titlebar{display:grid;grid-template-columns:44px minmax(0,1fr);flex:1;min-width:0;width:auto;gap:2px 6px}
 #back-to-library{grid-column:1;grid-row:1 / span 2;display:flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0;font-size:22px;border-radius:8px}
 #back-to-library .back-word{display:none}
 #score-view #reader-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;grid-column:2;font-size:19px;line-height:1.2;letter-spacing:-.2px;overflow-wrap:anywhere}
 #score-storage{grid-column:2;grid-row:2;font-size:9px;line-height:1.2;padding:2px 6px;justify-self:start}
 #score-view .reader-tools{display:none}
 #mobile-transposition{grid-column:2;grid-row:3;font-size:10px;color:var(--green);font-weight:600}
 .tools-trigger{flex:0 0 70px;min-height:48px;align-items:center;justify-content:center;flex-direction:column;gap:2px;padding:4px;border:1px solid #d5ddce;border-radius:9px;background:#fff;color:var(--green);font-size:10px}
 .tools-trigger>span:first-child{font-size:22px;line-height:1}
 #score-view .score-options{display:flex;flex-wrap:nowrap;gap:8px;padding:6px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));border-top:0;border-bottom:1px solid #d6dfce;background:var(--bg)}
 #score-view .voice-control{flex:1 1 auto;flex-wrap:nowrap;min-width:0}
 #score-view .voice-control .view-label{display:none}
 #score-view .voice-control select{flex:1 1 auto;width:100%;min-width:0;max-width:100%;height:44px;font-size:16px;padding:8px 10px;border:1px solid #bccbb2;border-radius:8px}
 .fit-button{flex:0 0 auto;align-items:center;justify-content:center;min-height:44px;padding:8px 10px;font-size:12px;border:1px solid #bccbb2;border-radius:8px;background:#fff;color:var(--green);white-space:nowrap}
 .fit-button[aria-pressed=true]{background:#e4eddc;border-color:#91a77c}
 #score-view .paper-scroll{padding:8px 4px;max-width:100%;background:#e9ede4;touch-action:pan-x pan-y;overflow-anchor:none}
 #score-view .paper{padding:10px 12px 16px;box-shadow:0 1px 6px #223c3210}
 #notation svg:has(.abcjs-title):not(:has(.abcjs-note)){display:none!important}
 #score-view .reader-footer{padding:12px 16px;gap:8px;font-size:10px;background:var(--bg)}
 #score-view #sheet-notes{font-size:12px;line-height:1.6}
 #score-view .paper-bottom{font-size:10px;letter-spacing:0}
 #score-scroll{left:0;right:0;z-index:20;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:8px max(12px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:#f7f8f4f7;box-shadow:0 -3px 20px #223c3210}
 #score-scroll .zoom-control{display:flex;flex-wrap:nowrap;margin:0!important;gap:4px;justify-content:flex-start}
 #score-scroll .zoom-control>span{display:none}
 #score-scroll .zoom-button{min-width:44px;width:44px;height:44px;padding:0;font-size:20px;border-radius:8px}
 #score-scroll .zoom-reset{width:46px;min-width:46px;font-size:11px}
 #score-scroll #zoom-value{min-width:35px;font-size:11px}
 #score-scroll .scroll-buttons{margin:0;gap:6px}
 #score-scroll .scroll-buttons button{width:44px;height:44px;min-height:44px;font-size:21px}
 #score-scroll .scroll-hint{display:none}

 /* Every dialog uses the same safe-area aware sheet and generous form fields. */
 html:has(dialog[open]){overflow:hidden}
 dialog{position:fixed;inset:auto 0 0;width:100%;max-width:760px;max-height:calc(100dvh - max(12px,env(safe-area-inset-top)));margin:0 auto;padding:20px max(20px,env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));border:1px solid #d1dcc8;border-bottom:0;border-radius:20px 20px 0 0;overflow-y:auto;overscroll-behavior:contain;background:var(--bg)}
 dialog::backdrop{background:#15291d70;backdrop-filter:blur(3px)}
 dialog h2{font-size:27px;line-height:1.2;padding-right:30px;margin:5px 0 14px;overflow-wrap:anywhere}
 dialog .eyebrow{display:none}
 dialog>p,dialog .copy-hint{font-size:12px;line-height:1.6}
 dialog .dialog-close{right:10px;top:10px}
 dialog .dialog-close .icon-button{width:44px;height:44px;background:var(--bg)}
 dialog .copy-field{gap:6px;margin:16px 0;font-size:13px}
 dialog .copy-field input,dialog .copy-field select,dialog textarea,dialog .pitch-context-group select{min-height:46px;font-size:16px;border-radius:8px}
 dialog .dialog-actions{position:sticky;bottom:calc(-20px - env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;margin-top:20px;padding:12px 0 calc(12px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line);z-index:1}
 dialog .dialog-actions>*{flex:1 1 auto;white-space:normal;justify-content:center;min-height:44px;text-align:center}
 dialog .dialog-actions>.primary{flex-basis:100%}
 dialog .dialog-actions>.danger{background:#fff5f1;color:#853c2d;border-color:#ddbcaf}
 dialog .derive-row{grid-template-columns:1fr;gap:0}
 dialog .voice-methods{display:grid;grid-template-columns:1fr;gap:8px}
 dialog .dropzone{margin-top:18px;padding:18px}
 dialog pre{font-size:12px;max-height:50dvh}
 .sheet-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
 .tools-sheet .sheet-heading{position:sticky;top:0;z-index:2;background:var(--bg);box-shadow:0 0 0 24px var(--bg)}
 .sheet-heading h2{margin:0;padding:0}
 .sheet-heading p{font-size:12px;color:var(--muted);margin:5px 0 0;overflow-wrap:anywhere}
 .sheet-heading form{flex-shrink:0}
 .sheet-heading .icon-button{width:44px;height:44px;background:#fff}
 .tools-sheet .reader-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 16px;width:100%}
 .tools-sheet .reader-actions button{min-height:58px;min-width:0;margin:0!important;padding:8px 4px;font-size:12px;white-space:normal;background:#fff;border:1px solid #d3ddcb;border-radius:9px;line-height:1.3}
 .tools-sheet #favorite,.tools-sheet #delete-score{display:flex;flex-direction:column;gap:3px;font-size:19px}
 .tools-sheet #favorite::after{content:'Favorit';font-size:11px}
 .tools-sheet #favorite[aria-pressed=true]{background:#e4eddc}
 .tools-sheet #delete-score::after{content:'Entfernen';font-size:11px}
 .tools-sheet .tools-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:16px 0 0}
 .tools-sheet .tools-options>.secondary{white-space:normal;font-size:12px;min-height:48px;background:#fff}
 .tools-sheet .tools-options>.compact-control{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;white-space:normal;margin:6px 0}
 .tools-sheet .tools-options select{width:auto;flex:1;max-width:65%;min-height:44px;font-size:16px;padding:8px}
 .tools-sheet .tools-options>.text-button{grid-column:1/-1}
 .tools-sheet .score-status{grid-column:1/-1;padding:10px 0;font-size:11px;border:0}
 .tools-sheet .score-tags{font-size:11px;flex-wrap:wrap}
 .reading-settings{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
 .reading-settings h3{font-size:12px;font-weight:600;margin:0 0 6px;color:var(--muted)}
 .reading-settings .scroll-step-label{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:12px;font-size:13px}
 .reading-settings #scroll-step{font-size:16px;min-height:44px;max-width:180px}

 /* Media uses the same list rhythm; folders do not grow into a second page. */
 .media-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin-bottom:16px}
 .media-toolbar .primary,.media-toolbar .secondary{font-size:12px}
 .media-toolbar .search{grid-column:1/-1;margin:0;width:100%}
 .media-layout{display:block}
 .media-folders{border:0;padding:0;margin-bottom:18px;min-width:0}
 .media-folders .eyebrow{display:none}
 #folder-tree{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:5px}
 .folder-button{flex:0 0 auto;width:auto;max-width:85%;min-height:44px;border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:12px;background:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .folder-button.active{background:#e4eddc;border-color:#b3c6a5}
 .media-location{align-items:center;margin-bottom:10px;gap:8px}
 .media-location h2{font-size:22px}
 .media-location .text-button{font-size:11px;text-align:right;flex-shrink:0}
 .media-track{display:grid;grid-template-columns:44px minmax(0,1fr);gap:6px 12px;padding:14px 0}
 .media-track>.icon-button{grid-column:1;grid-row:1;width:44px;height:44px;border-radius:10px;background:#fff}
 .media-track-info{grid-column:2;grid-row:1}
 .media-track h3{font-size:21px;line-height:1.2}
 .media-track p{font-size:11px;line-height:1.5;overflow-wrap:anywhere}
 .media-track-actions{grid-column:2;display:flex;flex-direction:row;gap:8px}
 .media-track-actions .text-button{padding:0 10px;min-height:44px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:11px}
 .media-score-links a{display:flex;align-items:center;min-height:44px;font-size:12px}
 #media-player{margin:0 0 18px}
 #score-player{padding:10px 12px;background:#f7f8f4}
 .practice-player,.practice-compact{padding:12px;border:1px solid #d5dfca;border-radius:12px;background:#edf2e5}
 .practice-heading,.practice-compact .practice-heading{margin-bottom:10px}
 .practice-title,.practice-compact .practice-title{font-size:12px;line-height:1.4}
 .practice-controls{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:8px}
 .practice-controls>.practice-button{min-height:44px;font-size:13px;background:#fff}
 .practice-controls>.practice-button:first-child{background:var(--green);color:#fff;border-color:var(--green)}
 .practice-controls>.practice-restart{width:44px;font-size:0}
 .practice-controls>.practice-restart::after{content:'↺';font-size:22px}
 .practice-timeline{grid-column:1/-1;display:flex;align-items:center;gap:7px;min-width:0;min-height:44px}
 .practice-controls .practice-timeline .practice-seek{flex:1;min-width:0;width:100%;height:44px;margin:0}
 .practice-controls .practice-time{font-size:11px}
 .practice-options>summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;font-size:12px;list-style:none;cursor:pointer}
 .practice-options>summary::after{content:'＋';font-size:20px}
 .practice-options[open]>summary::after{content:'−'}
 .practice-settings{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin:0;padding:8px 0;border-top:1px solid #d4dfca}
 .practice-settings label{display:flex;min-height:44px;gap:8px;font-size:12px;width:100%}
 .practice-settings input[type=range]{flex:1;min-width:0;width:auto;height:44px}
 .practice-settings select{flex:1;min-width:0;min-height:44px;font-size:16px}
 .practice-settings .practice-shortcut-toggle{margin-left:0;font-size:11px!important}
 .practice-pitch-note{font-size:11px}
 .guide-intro{padding:20px;border-radius:12px}
 .guide-intro>.eyebrow{display:none}
 .guide-intro h2{font-size:30px}
 .guide-intro>p:last-child{font-size:13px}
 .steps{grid-template-columns:1fr;gap:20px;margin:24px 0}
 .steps article{padding-top:14px}
 .steps article>span{font-size:24px}
 .steps h3{margin:4px 0 8px;font-size:23px}
 .steps p,.guide-details p{font-size:13px;line-height:1.65}
 .guide-details{grid-template-columns:1fr;padding:20px;gap:12px}
}

@media screen and (max-width:360px){
 :root{--mobile-edge:12px}
 .page-heading{gap:8px}
 .page-heading h1{font-size:27px}
 .page-heading .primary{padding-inline:9px}
 .archive-list .card{grid-template-columns:minmax(0,1fr) 14px;padding:13px}
 .archive-list .card-icon{display:none}
 .archive-list .card-info,.archive-list .card-details{grid-column:1}
 .archive-list .card-arrow{grid-column:2}
 #score-scroll{gap:8px;padding-inline:8px}
 .tools-sheet .reader-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media screen and (max-width:1100px) and (max-height:500px){
 #score-view .reader-heading{padding-block:4px}
 #score-view .score-titlebar{display:flex;gap:8px}
 #score-view #reader-title{font-size:18px}
 #score-storage{flex-shrink:0}
 .tools-trigger{flex-direction:row;flex-basis:105px;min-height:44px;gap:7px;font-size:11px}
 #score-view .score-options{padding-block:3px}
 #score-scroll{padding-block:5px}
 dialog{max-height:calc(100dvh - 8px);max-width:680px}
}
@media print{.mobile-only,.nav-short,#score-tools-dialog{display:none!important}}
@media(max-width:600px){#simplify-dialog{padding:24px 17px;max-height:94vh}.simplify-panels{grid-template-columns:1fr}.simplify-event{font-size:12px;min-height:42px;display:inline-flex;align-items:center}.simplify-actions{display:grid;grid-template-columns:1fr 1fr}.simplify-actions .copy-field{max-width:none}.simplify-actions button{width:100%;min-height:46px}#simplify-dialog .dialog-actions{flex-wrap:wrap}#simplify-save{width:100%;min-height:48px}}