/* Shared controls and floating surfaces, based on the lyric editor. */
:root{--control-border:#e2e2e2;--control-hover:#f0f0f0;--surface-border:#dedede;--surface-shadow:0 8px 32px #00000014,0 2px 6px #00000006;--line:#dedede}
button{border-color:var(--control-border);border-radius:10px;transition:background-color .14s,border-color .14s,box-shadow .14s,transform .1s,color .14s;-webkit-tap-highlight-color:transparent}
button:not(:disabled):hover{border-color:#c9c9c9;background-color:var(--control-hover);box-shadow:0 2px 7px #00000009}
button:not(:disabled):active{transform:scale(.97);box-shadow:none}
button:disabled{opacity:.35;box-shadow:none;transform:none}
button:focus-visible{outline:2px solid #666;outline-offset:3px;box-shadow:0 0 0 4px #fff}
button.primary,.play-button{background:#111;border-color:#111;color:#fff}
button.primary:not(:disabled):hover,.play-button:not(:disabled):hover{background:#303030;border-color:#303030;box-shadow:0 3px 10px #0002}
button.danger,#lyric-delete,#picker-remove,#remove-event{color:#b52b2b!important}
button.danger:not(:disabled):hover,#lyric-delete:not(:disabled):hover,#picker-remove:not(:disabled):hover,#remove-event:not(:disabled):hover{background:#fff0f0!important;border-color:#f0caca}
input:not([type=range]):not([type=checkbox]):not([type=color]),select,textarea{border-color:#dedede;border-radius:10px;transition:border-color .14s,box-shadow .14s;background:#fff}
input:not([type=range]):not([type=checkbox]):not([type=color]):focus,select:focus,textarea:focus{border-color:#888;outline:none;box-shadow:0 0 0 3px #11111109}
.icon-button,.surface-action{display:inline-grid;place-items:center;width:34px;height:34px;min-width:34px;padding:7px;border:0;border-radius:50%;background:#f1f1f1;line-height:1}
.mobile-only{display:none}
.surface-action{width:36px;height:36px;min-width:36px;flex:none}
.surface-action svg,.range-icon svg,.lyric-action svg,.icon-button svg{pointer-events:none;transition:transform .14s}
.surface-action:hover svg,.range-icon:hover svg,.lyric-action:hover svg,.icon-button:hover svg{transform:scale(1.08)}
.mode-switch,.picker-tabs,#chord-edit-tools{background:#f0f0f0;border-radius:12px;padding:3px;gap:3px}
.mode-switch button,.picker-tabs button,#chord-edit-tools button{border:0;border-radius:9px;background:transparent;box-shadow:none}
.mode-switch button.active,.picker-tabs button.active,#chord-edit-tools button.active{background:#fff;color:#111;box-shadow:0 1px 5px #00000017}
.picker-tabs{display:flex;margin-bottom:10px}.picker-tabs button{padding:6px 12px;font-size:12px}
.toggle{border:1px solid transparent;border-radius:10px}.toggle.active{border-color:#ddd;background:#eee;color:#111}
.editor-tabs{gap:4px;padding-bottom:4px}.editor-tabs button{border-radius:9px;border:0}.editor-tabs button.active{background:#eaeaea;border:0;color:#111}
.song-card{border-radius:12px}.song-card.active{background:#e9e9e9}.song-card:not(:disabled):hover{border-color:transparent}
.section-name-button,.score-title-button,.meta-text-button{border-radius:5px}.section-name-button:not(:disabled):hover,.score-title-button:not(:disabled):hover,.meta-text-button:not(:disabled):hover{box-shadow:0 0 0 4px #f0f0f0}
.score-popover,.score-popover[data-kind],#song-menu,#annotation-stack,dialog{border:1px solid var(--surface-border);border-radius:16px;background:#fff;box-shadow:var(--surface-shadow)}
.score-popover,.score-popover[data-kind]{padding:12px}
.score-popover[data-kind=metadata]{width:368px}.score-popover[data-kind=chord]{width:368px}
.score-popover :is(input,textarea,select){border-radius:10px}
.compact-toolbar,.lyric-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.compact-symbol{width:32px;height:36px;flex:none;margin-right:auto;color:#555}
.score-popover .compact-toolbar .range-icon,.score-popover .annotation-view-head .range-icon,.lyric-action{display:inline-grid;place-items:center;flex:none;border:0;border-radius:50%;width:36px!important;height:36px!important;min-height:36px!important;padding:8px!important;background:#f1f1f1!important;box-shadow:none}
.score-popover .compact-toolbar .range-icon:not(:disabled):hover,.score-popover .annotation-view-head .range-icon:not(:disabled):hover,.lyric-action:not(:disabled):hover{background:#e7e7e7!important;box-shadow:0 2px 7px #0000000b}
.score-popover :is(#section-confirm,#annotation-confirm,#metadata-confirm),#lyric-confirm{background:#111!important;color:white}
.score-popover :is(#section-confirm,#annotation-confirm,#metadata-confirm):hover,#lyric-confirm:hover{background:#333!important}
.score-popover :is(.compact-toolbar,.annotation-view-head) .danger:not(:disabled):hover,#lyric-delete:not(:disabled):hover{background:#ffeaea!important}
#metadata-form>input:last-child,#metadata-form>textarea:last-child{margin-bottom:0}#metadata-form>label{font-size:12px;color:#666;margin:0 0 5px}
#picker-search{margin-bottom:10px}#picker-chords{gap:7px;margin-bottom:0}#picker-chords button{border-color:#e7e7e7;border-radius:11px;padding:8px 3px}#picker-chords button:hover{border-color:#bcbcbc;background:#fafafa;box-shadow:0 3px 9px #0000000b}
.annotation-view-head{gap:6px;min-height:36px}.annotation-tail{border-color:var(--surface-border)}
#range-tools{padding:4px;gap:3px;height:42px;border:1px solid var(--surface-border);border-radius:23px;box-shadow:var(--surface-shadow)}
#range-tools .range-icon{width:32px;height:32px;min-width:32px;padding:7px;border-radius:50%;background:#f4f4f4}
#range-tools .range-icon:hover{background:#e8e8e8}#range-tools .range-icon.active{background:#111;color:white}
#song-menu{padding:6px;border-radius:14px}#song-menu button{border:0;padding:9px 11px;border-radius:9px;background:transparent}#song-menu button:hover{background:#f2f2f2;box-shadow:none}
dialog{width:368px;padding:14px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 32px);overflow:auto}
dialog::backdrop{background:#11111136;backdrop-filter:blur(3px)}
.dialog-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:14px}.dialog-toolbar h2{flex:1;font-size:15px;font-weight:600;line-height:1.45;letter-spacing:0;margin:0;min-width:0}
dialog #dialog-message{margin:0 2px 14px;font-size:13px;color:#555;line-height:1.7;white-space:pre-wrap}
dialog #dialog-message:last-child{margin-bottom:0}dialog #dialog-input-label{display:grid;gap:5px;font-size:12px;color:#666}dialog #dialog-input{width:100%;padding:10px 11px}
dialog .surface-action.danger{background:#fff0f0;border:0}dialog .surface-action.danger:hover{background:#ffe2e2!important}
.score-popover:not([hidden]),#song-menu:not([hidden]),dialog[open]{animation:surface-appear .13s ease-out}
@keyframes surface-appear{from{opacity:0}to{opacity:1}}
.icon-button{place-content:center;flex-shrink:0}.icon-button svg,.play-button svg{display:block;flex:none}
.library-hidden #show-library{display:inline-grid}
.play-button{place-content:center;line-height:0}.play-button svg{width:20px;height:20px}
button.bar-boundary-insert span{position:absolute;left:50%;top:50%;display:grid;place-items:center;transform:translate(-50%,-50%) scale(.8);line-height:0}
button.bar-boundary-insert span svg{display:block;width:16px;height:16px;pointer-events:none}
button.bar-boundary-insert:hover span,button.bar-boundary-insert:focus-visible span{transform:translate(-50%,-50%) scale(1)}
button.bar-boundary-insert:active span{transform:translate(-50%,-50%) scale(.9)}
#library .search{display:flex;align-items:center;gap:9px;min-height:42px;margin:20px 0 16px;padding:0 12px;border:1px solid #e2e2e2;border-radius:12px;background:#fff;transition:border-color .14s,box-shadow .14s}
#library .search:hover{border-color:#c7c7c7}#library .search:focus-within{border-color:#999;box-shadow:0 0 0 3px #11111108}
#library .search-icon{display:grid;place-items:center;flex:0 0 18px;width:18px;height:18px;color:#777;line-height:0}
#library .search-icon svg{display:block;width:18px;height:18px}
#library .search input{flex:1;min-width:0;width:100%;padding:10px 0;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;outline:none;font-size:14px;line-height:20px;color:#222}
#library .search input::placeholder{color:#888;opacity:1}
@media(max-width:850px){#show-library{display:inline-grid}}
@media(pointer:coarse){button.bar-boundary-insert span{transform:translate(-50%,-50%) scale(.9)}}
@media(pointer:coarse){.surface-action,.lyric-action,.score-popover .compact-toolbar .range-icon,.score-popover .annotation-view-head .range-icon{width:40px!important;height:40px!important;min-height:40px!important}#range-tools{height:48px}#range-tools .range-icon{width:38px;height:38px;min-width:38px}}
@media(max-width:760px){.mobile-only{display:inline-grid}#mobile-scrim:active{transform:none}.score-popover[data-kind]{max-width:calc(100vw - 16px)}.score-popover[data-kind^=annotation]{max-width:calc(100vw - 20px)}dialog{padding:14px}.dialog-toolbar .surface-action{min-height:36px}}
@media(prefers-reduced-motion:reduce){button,input,select,textarea,.surface-action svg,.range-icon svg,.lyric-action svg,.icon-button svg{transition:none!important}.score-popover:not([hidden]),#song-menu:not([hidden]),dialog[open]{animation:none}button:not(:disabled):active{transform:none}}