/* A balanced two-tier reading console instead of scattered controls. */
.reader-tools{display:block;padding:16px 17px 15px;border-radius:13px;border-color:var(--border);box-shadow:0 3px 16px #263d2605;backdrop-filter:blur(14px);background:var(--paper);margin-top:24px;margin-bottom:19px}
.reader-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0}
.reader-actions .tool-group{padding:4px 6px;background:var(--bg);border:1px solid var(--border);border-radius:8px;gap:5px;min-height:41px}
.reader-actions .tool-group>label{font-size:8px;letter-spacing:1px;font-weight:600;padding:0 6px;color:var(--muted)}
.reader-actions .tool-group>button{height:30px;width:30px;min-width:30px;border:0;border-radius:5px;background:transparent;color:var(--ink);padding:0}
.reader-actions .tool-group>button:hover{background:var(--paper);box-shadow:0 1px 5px #293c2510}
.reader-actions #current-key{min-width:35px;min-height:30px;display:grid;place-items:center;padding:3px 6px;border-radius:5px;background:var(--paper);font-size:13px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.reader-actions #transpose-note{font-size:9px;line-height:1.6;color:var(--muted);margin:0 4px;max-width:95px}
.reader-actions>button{display:inline-flex;justify-content:center;align-items:center;gap:7px;min-height:38px;border:1px solid var(--border);background:var(--paper);padding:8px 12px;border-radius:7px;font-size:10px;line-height:1.8;color:var(--ink);white-space:nowrap}
.reader-actions>button:hover{background:var(--bg);border-color:#b5c5a0}
.reader-actions>button .ui-icon{width:15px;height:15px}
.reader-actions #focus-toggle{color:#577244;background:#f0f4e7;border-color:#d4dfc4}
.reader-actions #focus-toggle[aria-pressed=true]{background:#31583f;color:#f3f6e9;border-color:#31583f}
.reader-actions .reader-shuffle{margin-left:auto;font-size:10px;color:#687f50;background:#f8f9f1}
.reader-tools .scroll-control{margin-top:15px;padding-top:15px;border-top:1px solid var(--border)}
.scroll-control-title{margin-bottom:12px}
.scroll-control-label{font-size:9px;letter-spacing:1.6px;font-weight:600}
#scroll-status{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:20px;background:var(--bg);font-size:9px;line-height:1.5;color:var(--muted);font-variant-numeric:tabular-nums}
#scroll-status:before{content:'';width:5px;height:5px;border-radius:50%;background:#a6af9b}
.scroll-control:has(#scroll-toggle.on) #scroll-status{background:#e7f0dc;color:#577840}
.scroll-control:has(#scroll-toggle.on) #scroll-status:before{background:#70984e}
.scroll-control-main{gap:15px}
.scroll-control #scroll-toggle{min-width:105px;height:42px;padding:0 17px;gap:9px;background:#2e563e;border-color:#2e563e;border-radius:8px;color:#f3f6e9;font-size:11px;font-weight:500;box-shadow:0 2px 6px #2e563e13}
.scroll-control #scroll-toggle:hover{background:#3b684a;border-color:#3b684a}
.scroll-control #scroll-toggle.on{background:#3e674b;border-color:#3e674b}
.scroll-control #scroll-toggle .ui-icon{width:17px;height:17px}
.scroll-speed-input{border:1px solid var(--border);background:var(--bg);border-radius:8px;padding:3px;gap:2px;flex-shrink:0}
.scroll-speed-input>button{width:31px;height:33px;background:transparent;border:0;border-radius:5px;color:var(--muted)}
.scroll-speed-input>button:hover{background:var(--paper);color:var(--ink)}
.speed-number-wrap{height:33px;border:1px solid var(--border);border-radius:5px;padding:0 8px;gap:4px;min-width:70px;background:var(--paper)}
#scroll-speed{width:38px;font-size:13px;line-height:1.5;color:var(--ink)}
.speed-number-wrap>span:last-child{font:11px 'DM Sans',sans-serif;color:var(--muted)}
.scroll-slider-wrap{max-width:none;min-width:140px;gap:8px;flex:1}
#scroll-range{--range-active:#809966;--range-track:#dfe5d7;appearance:none;-webkit-appearance:none;border:0;border-radius:999px;height:22px;min-height:22px;margin:0;background:linear-gradient(to right,var(--range-active) 0%,var(--range-active) 9.1%,var(--range-track) 9.1%,var(--range-track) 100%);background-size:100% 5px;background-repeat:no-repeat;background-position:center;outline-offset:4px;cursor:pointer}
#scroll-range::-webkit-slider-runnable-track{height:5px;background:transparent;border:0;border-radius:999px}
#scroll-range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:17px;height:17px;margin-top:-6px;border:3px solid var(--paper);border-radius:50%;background:#75915b;box-shadow:0 0 0 1px #81996a,0 2px 5px #36452d1c}
#scroll-range::-moz-range-track{height:5px;background:transparent;border:0;border-radius:999px}
#scroll-range::-moz-range-thumb{width:12px;height:12px;border:3px solid var(--paper);border-radius:50%;background:#75915b;box-shadow:0 0 0 1px #81996a}
.scroll-range-labels{font-size:8px;letter-spacing:.1px;line-height:1.6}
.scroll-reset{padding:9px 6px;font-size:10px;min-height:34px;text-decoration:none;color:#738a5b}
.scroll-reset:hover{color:var(--ink)}
#scroll-help{font-size:9px;line-height:2;margin:11px 0 0;color:var(--muted)}
.reader-actions button,.chord-chip-list button,.scroll-control button{transition:background-color .16s,border-color .16s,box-shadow .16s,transform .16s}
.reader-actions button:active,.scroll-control button:active{transform:translateY(1px)}
#chords-used{padding:18px 20px 19px;border-radius:12px;box-shadow:0 2px 12px #263d2603;margin-bottom:20px}
.chords-heading{margin-bottom:14px}
.chords-heading strong{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--ink)}
.chords-heading strong>span{display:grid;place-items:center;min-width:20px;min-height:20px;background:var(--bg);border:1px solid var(--border);border-radius:50%;font-size:9px;margin-left:0;color:var(--muted)}
.chords-heading>small{font-size:9px;line-height:1.8;color:var(--muted)}
.chord-chip-list{gap:8px}
.chord-chip-list button{min-height:37px;min-width:44px;padding:8px 13px;border-radius:7px;border-color:#dce5ce;background:#f0f4e7;color:#5f7c45;font-size:12px;box-shadow:0 1px 2px #374b2310}
.chord-chip-list button:hover{transform:translateY(-2px);background:#e5edd7;border-color:#b7cba0;box-shadow:0 4px 10px #374b2310}
.chord-chip-list button:active{transform:translateY(0)}
body.dark .reader-tools,body.dark #chords-used{box-shadow:0 3px 18px #0000000b}
body.dark .reader-actions #focus-toggle,body.dark .reader-actions .reader-shuffle{background:#30412e;border-color:#4a5f3d;color:#c6d9ad}
body.dark .reader-actions #focus-toggle[aria-pressed=true]{background:#668653;color:#f4f6e9}
body.dark #scroll-range{--range-active:#a4be88;--range-track:#45543b}
body.dark .scroll-control:has(#scroll-toggle.on) #scroll-status{background:#364b2e;color:#c0d8a4}
body.dark .chord-chip-list button{background:#30412b;border-color:#4b603c;color:#c7dfac}
body.dark .chord-chip-list button:hover{background:#3c5233;border-color:#7b9863}
@media(max-width:850px){.reader-tools{padding:14px}.reader-actions{gap:8px}.reader-actions .reader-shuffle{margin-left:0}.scroll-control-main{gap:12px}}
@media(max-width:600px){.reader-tools{padding:13px;border-radius:11px;margin-top:19px}.reader-actions{gap:7px}.reader-actions .tool-group{padding:3px 4px;min-height:38px;gap:3px}.reader-actions .tool-group>label{font-size:7px;padding:0 5px;letter-spacing:.8px}.reader-actions .tool-group>button{min-width:29px;width:29px;height:29px}.reader-actions #current-key{min-width:32px;min-height:29px;font-size:12px}.reader-actions #transpose-note{display:none}.reader-actions>button{min-height:35px;padding:7px 10px;font-size:9px;gap:6px}.reader-actions #print-song,.reader-actions #share-song{min-width:35px;width:35px;padding:0}.reader-actions #print-song .action-label,.reader-actions #share-song .action-label{display:none}.reader-actions .reader-shuffle{order:3;margin:0;flex:1;font-size:9px}.reader-actions #focus-toggle{order:3}.reader-tools .scroll-control{margin-top:13px;padding-top:13px}.scroll-control-title{margin-bottom:11px}.scroll-control-label{font-size:8px;letter-spacing:1.3px}#scroll-status{font-size:8px;padding:4px 7px}.scroll-control-main{gap:12px;flex-wrap:wrap}.scroll-control #scroll-toggle{height:40px;flex:1;min-width:85px;font-size:10px;padding:0 12px}.scroll-speed-input{margin-left:auto;gap:1px}.scroll-speed-input>button{width:29px;height:31px}.speed-number-wrap{height:31px;min-width:65px;padding:0 7px}#scroll-speed{font-size:12px;width:35px}.scroll-slider-wrap{flex-basis:calc(100% - 75px);min-width:130px;gap:9px}.scroll-reset{font-size:9px;margin-left:auto;padding:6px 1px}.scroll-range-labels{font-size:7px}#scroll-help{font-size:8px;line-height:2.1;max-width:100%;margin-top:10px}#chords-used{padding:15px;border-radius:11px;margin-bottom:17px}.chords-heading{gap:7px;margin-bottom:13px}.chords-heading strong{font-size:10px}.chords-heading>small{font-size:8px}.chord-chip-list{gap:7px}.chord-chip-list button{min-height:37px;min-width:41px;font-size:11px;padding:8px 11px}}
@media(prefers-reduced-motion:reduce){.reader-actions button,.chord-chip-list button,.scroll-control button{transition:none}.chord-chip-list button:hover{transform:none}}
.reader-artist-link{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .15s}
.reader-artist-link:hover,.reader-artist-link:focus-visible{text-decoration-color:currentColor}
.artist-source-link{color:var(--muted);text-decoration:none;font-size:.85em;margin-left:2px}
.artist-source-link:hover{color:inherit}
/* Mobile smoothness */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
button,a,select,input,label,[data-song],[data-artist]{touch-action:manipulation}
@media(max-width:850px){
 /* The reader toolbar has an opaque background, so its blur only cost scroll frames. */
 .reader-tools{backdrop-filter:none}
 .draw-dialog,#chord-dialog,#listen-panel{overscroll-behavior:contain}
}
@media(hover:none){
 /* Touch: no hover lift left stuck on a card after tapping it. */
 .pick-art:hover img,.chord-chip-list button:hover,.mood-card:hover{transform:none}
}
/* Only transpose and auto-scroll travel with the chord sheet. */
.reader-extra-tools{position:static;margin-top:22px;margin-bottom:10px;padding:0;background:none}.reader-tools{position:sticky;top:10px;padding:14px 18px;margin-top:0;border-radius:14px}.reader-compact-main{display:flex;align-items:center;justify-content:space-between;gap:28px}.compact-transpose{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:160px}.compact-transpose>label{width:100%;font-size:10px;color:var(--muted);margin-bottom:3px}.compact-transpose>button{width:35px;height:35px;padding:0;border:1px solid var(--border);border-radius:9px;background:var(--bg);font-size:20px;color:var(--ink)}.compact-transpose #current-key{font-size:15px;min-width:28px;text-align:center}.compact-transpose #transpose-note{display:none}.reader-compact-main .scroll-control{border:0;margin:0;padding:0;min-width:0;flex:0 1 430px}.reader-compact-main .scroll-control-title,.reader-compact-main #scroll-help,.reader-compact-main .scroll-range-labels,.reader-compact-main #speed-down,.reader-compact-main #speed-up,.reader-compact-main #speed-reset{display:none}.reader-compact-main .scroll-control-main{display:grid;grid-template-columns:40px 68px minmax(75px,1fr);gap:10px;align-items:center}.reader-compact-main #scroll-toggle{min-width:40px;width:40px;height:40px;min-height:40px;padding:0;border-radius:9px;font-size:18px}.reader-compact-main #scroll-toggle>span{display:none}.reader-compact-main .scroll-speed-input{display:block}.reader-compact-main .speed-number-wrap{border:0;background:none;padding:0;gap:2px}.reader-compact-main #scroll-speed{width:46px;font-size:13px;padding:3px;background:transparent}.reader-compact-main .scroll-slider-wrap{margin:0;min-width:0}.reader-compact-main #scroll-range{width:100%;margin:0}.reader-compact-main .tool-group{border:0;background:none;padding:0}
@media(max-width:600px){.reader-tools{top:0;padding:12px}.reader-compact-main{gap:12px}.compact-transpose{min-width:120px;gap:4px}.compact-transpose>button{width:30px;height:32px}.compact-transpose #current-key{font-size:13px;min-width:23px}.reader-compact-main .scroll-control{flex:1}.reader-compact-main .scroll-control-main{grid-template-columns:34px minmax(60px,1fr);gap:7px}.reader-compact-main .scroll-speed-input{grid-column:2;grid-row:1;justify-self:end}.reader-compact-main #scroll-toggle{width:34px;min-width:34px;height:34px;min-height:34px;grid-row:1/3}.reader-compact-main .scroll-slider-wrap{grid-column:2;grid-row:2}.reader-extra-tools{gap:7px}}
@media print{.reader-extra-tools{display:none!important}}
/* The two playing controls stay at the bottom from the moment a song opens. */
#reader-view .reader-tools{position:fixed;top:auto;bottom:18px;left:calc(var(--sidebar) + 30px);right:30px;width:auto;max-width:1050px;margin:0 auto;z-index:40;box-shadow:0 8px 35px #0002}#reader-view{padding-bottom:140px}body.focus-mode #reader-view .reader-tools{top:auto;left:24px;right:24px;bottom:18px}
@media(max-width:600px){#reader-view .reader-tools{top:auto;left:12px;right:12px;bottom:78px}#reader-view{padding-bottom:170px}body.focus-mode #reader-view .reader-tools{top:auto;left:12px;right:12px;bottom:12px}body.focus-mode #reader-view{padding-bottom:130px}}
#sidebar-toggle{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;margin-right:14px;min-height:36px;padding:7px 11px;border:1px solid var(--border);border-radius:8px;background:var(--paper);color:var(--ink);font-size:11px}#sidebar-toggle>span:first-child{font-size:17px}#sidebar-toggle:focus-visible{outline:2px solid var(--green);outline-offset:3px}
@media(min-width:601px){body.sidebar-collapsed{--sidebar:0px}body.sidebar-collapsed .sidebar{display:none}body.sidebar-collapsed .app-shell{margin-left:0}}
@media(max-width:600px){#sidebar-toggle{display:none}}
@media print{#sidebar-toggle{display:none!important}}
/* Compact floating play bar: small centered pill, one row on every width. Song cards open the reader; no inline play button. */
#reader-view .reader-tools{left:calc(var(--sidebar) + 30px);right:30px;bottom:14px;width:fit-content;max-width:calc(100% - 24px);padding:6px 10px;border-radius:12px;box-shadow:0 4px 18px #0002}
#reader-view{padding-bottom:90px}
#reader-view .reader-compact-main{gap:14px;flex-wrap:nowrap}
#reader-view .compact-transpose{min-width:0;flex-wrap:nowrap;gap:4px}
#reader-view .compact-transpose>label{display:none}
#reader-view .compact-transpose>button{width:28px;height:28px;font-size:15px;border-radius:7px}
#reader-view .compact-transpose #current-key{font-size:13px;min-width:24px}
#reader-view .reader-compact-main .scroll-control{flex:0 0 auto}
#reader-view .reader-compact-main .scroll-control-main{grid-template-columns:30px 50px 110px;gap:6px}
#reader-view .reader-compact-main #scroll-toggle{width:30px;min-width:30px;height:30px;min-height:30px;font-size:14px;border-radius:7px;grid-row:auto}
#reader-view .reader-compact-main .scroll-speed-input{grid-column:auto;grid-row:auto;justify-self:start;padding:0;border:0;background:none}
#reader-view .reader-compact-main .scroll-slider-wrap{grid-column:auto;grid-row:auto}
#reader-view .reader-compact-main #scroll-speed{width:34px;font-size:12px}
#scroll-range::-webkit-slider-thumb{width:13px;height:13px;margin-top:-4px;border-width:2px}
#scroll-range::-moz-range-thumb{width:9px;height:9px;border-width:2px}
.pick-listen{display:none!important}
@media(max-width:600px){#reader-view .reader-tools{left:50%;right:auto;transform:translateX(-50%);bottom:72px;padding:5px 8px}#reader-view{padding-bottom:130px}body.focus-mode #reader-view .reader-tools{left:50%;right:auto;bottom:10px}#reader-view .reader-compact-main{gap:10px}#reader-view .reader-compact-main .scroll-control-main{grid-template-columns:30px 44px 80px;gap:5px}}
.artist-avatar{overflow:hidden;flex-shrink:0}.artist-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
/* Play bar: a little larger, captions for Key/Speed, and −/+ speed buttons. */
#reader-view .reader-tools{padding:12px 14px 8px}
#reader-view .compact-transpose,#reader-view .reader-compact-main .scroll-control{position:relative;padding-top:12px}
#reader-view .compact-transpose::before,#reader-view .reader-compact-main .scroll-control::before{position:absolute;top:-2px;left:2px;font-size:9px;font-weight:700;letter-spacing:.6px;color:var(--muted);white-space:nowrap}
#reader-view .compact-transpose::before{content:'KEY · TRANSPOSE'}
#reader-view .reader-compact-main .scroll-control::before{content:'SCROLL SPEED'}
#reader-view .compact-transpose>button{width:34px;height:34px;font-size:17px;border-radius:8px}
#reader-view .compact-transpose #current-key{font-size:16px;min-width:30px}
#reader-view .compact-transpose #transpose-note{display:inline-block;font-size:10px;font-weight:700;color:#5f7a47;min-width:16px;max-width:none;margin:0}
#reader-view .reader-compact-main .scroll-control-main{grid-template-columns:36px auto 120px;gap:8px}
#reader-view .reader-compact-main #scroll-toggle{width:36px;min-width:36px;height:36px;min-height:36px;font-size:16px}
#reader-view .reader-compact-main #speed-down,#reader-view .reader-compact-main #speed-up{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid var(--border);border-radius:7px;background:var(--bg);color:var(--ink);font-size:16px}
#reader-view .reader-compact-main .scroll-speed-input{display:flex;align-items:center;gap:4px}
#reader-view .reader-compact-main #scroll-speed{width:34px;font-size:13px;text-align:center}
.capo-group{flex-wrap:wrap}.capo-group #capo-value{min-width:20px;text-align:center}.capo-group #capo-note{font-size:11px;color:var(--muted);margin-left:4px}
@media(max-width:600px){#reader-view .reader-tools{padding:11px 8px 6px}#reader-view .compact-transpose::before{content:'KEY'}#reader-view .reader-compact-main .scroll-control::before{content:'SPEED'}#reader-view .reader-compact-main .scroll-control-main{grid-template-columns:32px auto 64px;gap:5px}#reader-view .compact-transpose>button{width:30px;height:30px}#reader-view .reader-compact-main #scroll-toggle{width:32px;min-width:32px;height:32px;min-height:32px}#reader-view .reader-compact-main #speed-down,#reader-view .reader-compact-main #speed-up{width:24px;height:24px}#reader-view .reader-compact-main #scroll-speed{width:28px}#reader-view .reader-compact-main .speed-number-wrap>span{display:none}#reader-view .reader-compact-main{gap:10px}}
#reader-view .reader-compact-main .speed-number-wrap{width:auto;min-width:0;padding:0 2px;display:inline-flex;align-items:center;gap:1px}
/* Chord summary grid: name, mini diagram, usage count. */
.chord-summary{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px!important}
.chord-summary button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 6px 6px!important;min-height:0!important;font-size:14px!important;font-weight:700}
.chord-summary-diagram{display:block;width:100%;max-width:84px;pointer-events:none}.chord-summary-diagram svg{display:block;width:100%;height:auto}.chord-summary-diagram .chord-unavailable{display:none}
.chord-summary button small{font-size:10px;font-weight:500;opacity:.7}
@media(max-width:600px){.chord-summary{grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:7px!important}.chord-summary button{font-size:12px!important;padding:6px 4px 4px!important}}
/* Android phones (≤420px): bar fits on one row, tap targets ≥40px. */
@media(max-width:420px){
 #reader-view .reader-tools{left:8px;right:8px;transform:none;width:auto;padding:10px 10px 6px}
 #reader-view .reader-compact-main{justify-content:space-between;gap:8px}
 #reader-view .compact-transpose #key-reset,#reader-view .reader-compact-main .scroll-slider-wrap{display:none}
 #reader-view .reader-compact-main .scroll-control-main{grid-template-columns:40px auto;gap:6px}
 #reader-view .compact-transpose>button,#reader-view .reader-compact-main #scroll-toggle{width:40px;min-width:40px;height:40px;min-height:40px}
 #reader-view .reader-compact-main #speed-down,#reader-view .reader-compact-main #speed-up{width:34px;height:34px}
 .reader-actions .tool-group button,#theme-toggle,.lang-switch button,.favorite-button{min-width:40px;min-height:40px}
 .reader-artist-link{min-height:36px;display:inline-flex;align-items:center}
 .library-toolbar select,#sort{min-height:40px}
}
@media(max-width:420px){
 header .header-right button{min-height:40px;min-width:40px}
 .reader-actions button,#reader-back,#lyrics-toggle{min-height:40px}
 /* Inline chord names stay compact but get a larger invisible touch area. */
 #sheet .chord{position:relative}#sheet .chord::after{content:'';position:absolute;inset:-9px -5px}
}
/* Brand mark (guitar + songbook) beside the existing wordmark; dark variant in dark mode. */
.brand-mark{display:inline-flex;flex:none;line-height:0}.brand-mark img{display:block;height:auto}
.brand-mark .dark-only,body.dark .brand-mark img:not(.dark-only){display:none}body.dark .brand-mark .dark-only{display:block}
.sidebar .brand{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}.sidebar .brand .brand-mark{grid-row:span 2}.sidebar .brand .brand-mark img{width:40px}.sidebar .brand .brand-sub{margin-top:4px}
.mobile-brand{align-items:center;gap:6px}.mobile-brand .brand-mark img{width:30px}
@media(max-width:600px){.mobile-brand{display:inline-flex}}
.sidebar .brand .brand-symbol{font-size:36px;letter-spacing:-3px}
@media(max-width:400px){.mobile-brand{font-size:23px;gap:4px}.mobile-brand .brand-mark img{width:24px}header .header-right{gap:6px}}
@media(max-width:400px){header{padding:0 12px;gap:8px}header .tools-entry{padding-left:10px;padding-right:10px}}