/* Compact editing surfaces and transport controls. */
#editor{background:#fafafa;border-left:1px solid #e6e6e6;padding:19px 18px 28px;scrollbar-width:thin;scrollbar-color:#cecece transparent}
.editor-heading{display:flex;align-items:center;gap:9px;margin:0 0 17px;min-height:34px}
.editor-heading strong{flex:1;min-width:0;color:#444;font-size:12px;font-weight:500;line-height:1.5;font-variant-numeric:tabular-nums}
.editor-heading>div{display:flex;align-items:center;gap:8px}
.editor-heading .info-dot{color:#777;border-color:#d4d4d4;background:white;width:19px;height:19px}
#editor #close-editor{background:#f0f0f0;border-radius:50%;padding:8px}
#editor .editor-tabs{display:flex;gap:4px;padding:4px;border:1px solid #e6e6e6;border-radius:13px;background:#eeeeee;margin:0 0 21px}
#editor .editor-tabs button{flex:1;border:0;border-radius:9px;padding:8px 10px;background:transparent;color:#777;font-size:12px;box-shadow:none}
#editor .editor-tabs button.active{background:#fff;color:#111;font-weight:600;border:0;box-shadow:0 1px 5px #0000000e}
#editor .editor-tabs button:not(.active):hover{background:#e5e5e5;color:#222}
#editor section>label{display:grid;gap:7px;font-size:12px;color:#555;margin:0 0 16px}
#editor :is(input:not([type=range]):not([type=checkbox]),select,textarea){border:1px solid #e1e1e1;border-radius:11px;background:white;padding:9px 11px;font-size:13px;color:#222;min-height:39px}
#editor :is(input:not([type=range]):not([type=checkbox]),select,textarea):focus{border-color:#999;box-shadow:0 0 0 3px #00000007}
#editor #chord-edit-tools{display:flex;align-items:center;gap:3px;padding:4px;margin:0 0 10px;border:1px solid #e6e6e6;border-radius:12px;background:#efefef}
#chord-edit-tools #finger-mode,#chord-edit-tools #barre-mode{min-height:31px;padding:6px 9px;font-size:12px;border-radius:8px}
#chord-edit-tools .icon-button{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;min-width:28px;padding:6px;border-radius:50%;background:transparent}
#chord-edit-tools .icon-button:hover{background:white;box-shadow:none}
#chord-edit-tools .icon-button svg{width:15px;height:15px}
#chord-edit-tools #fret-range{font:11px ui-monospace,Consolas,monospace;color:#666;min-width:25px;text-align:center}
#chord-editor-svg{height:248px;display:flex;align-items:center;justify-content:center;background:white;border:1px solid #e5e5e5;border-radius:15px;margin:0 0 14px;padding:12px 8px;overflow:hidden}
#chord-editor-svg svg{height:100%;max-width:100%;width:auto}
#editor .chord-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 36px;gap:6px;align-items:center}
#editor .chord-actions button{display:flex;align-items:center;justify-content:center;gap:5px;min-height:36px;padding:8px 5px;font-size:12px;border-radius:11px;line-height:1.4}
#editor .chord-actions button svg{flex:none;width:16px;height:16px}
#editor #remove-chord{width:36px;height:36px;min-width:36px;padding:8px;border-radius:50%;background:#fff1f1}
#editor .preset-heading{display:flex;align-items:center;gap:8px;margin:24px 0 12px;padding-top:20px;border-top:1px solid #e7e7e7}
#editor .preset-heading strong{font-size:12px;font-weight:600;color:#444}
#editor #new-preset{display:flex;align-items:center;justify-content:center;gap:4px;margin-left:auto;border:0;border-radius:9px;background:#efefef;min-height:30px;padding:6px 9px;font-size:11px;color:#444}
#editor #new-preset svg{width:14px;height:14px;flex:none}
#editor #preset-search{margin:0 0 12px;min-height:38px;font-size:12px;padding:9px 11px}
#editor #preset-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:none;overflow:visible}
#editor .preset-button{padding:10px 4px 4px;border:1px solid #e5e5e5;border-radius:12px;background:#fff;min-width:0}
#editor .preset-button:hover{border-color:#bdbdbd;box-shadow:0 3px 12px #00000009}
#editor .preset-button strong{font-size:12px;font-weight:600;color:#333;line-height:1.4;margin-bottom:4px}
#editor .preset-button svg{height:auto;width:100%}
#editor .string-picks{margin:0 0 19px;padding:0;border:0}
#editor .string-picks legend{font-size:12px;color:#555;margin-bottom:9px}
#editor #string-picks{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
#editor #string-picks label{display:grid;place-items:center;padding:0;height:36px;min-width:0;border:1px solid #e1e1e1;border-radius:50%;background:white;font:12px ui-monospace,Consolas,monospace;color:#777;transition:background .14s,border-color .14s,color .14s,transform .1s}
#editor #string-picks label:hover{border-color:#aaa}
#editor #string-picks label:has(input:checked){background:#222;color:white;border-color:#222;box-shadow:0 2px 5px #0000000e}
#editor #string-picks label:active{transform:scale(.94)}
#editor #string-picks label:has(input:focus-visible){outline:2px solid #666;outline-offset:3px}
#editor #strength{display:block;appearance:none;-webkit-appearance:none;width:100%;height:28px;margin:0;padding:0;border:0;background:transparent;cursor:pointer;touch-action:pan-y}
#strength::-webkit-slider-runnable-track{height:4px;border-radius:10px;background:linear-gradient(to right,#292929 0 var(--range-fill,83.33%),#dedede var(--range-fill,83.33%) 100%)}
#strength::-moz-range-track{height:4px;background:#dedede;border-radius:10px}
#strength::-moz-range-progress{height:4px;background:#292929;border-radius:10px}
#strength::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border:1px solid #bcbcbc;border-radius:50%;background:white;box-shadow:0 1px 4px #0002;transition:box-shadow .14s}
#strength::-moz-range-thumb{width:14px;height:14px;border:1px solid #bcbcbc;border-radius:50%;background:white;box-shadow:0 1px 4px #0002}
#strength:hover::-webkit-slider-thumb{box-shadow:0 0 0 5px #00000008,0 1px 4px #0002}
#strength-value{margin-left:auto;font:12px ui-monospace,Consolas,monospace;color:#333;float:right}
#editor .strength-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
#editor .inline-controls{display:flex;gap:8px;margin:15px 0 0}
#editor .inline-controls button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:37px;padding:8px 11px;font-size:12px;border-radius:11px}
#editor .inline-controls .primary{flex:1}
#editor #remove-event{border:1px solid #f0dede;background:#fff6f6}
#editor .pattern-actions{padding-top:20px;margin-top:24px;border-top:1px solid #e7e7e7}
#editor .pattern-actions label{display:grid;gap:8px;font-size:12px;color:#555;margin:0 0 10px}
#editor #apply-pattern{width:100%;display:flex;align-items:center;justify-content:center;gap:7px;min-height:38px;border-color:#dedede;border-radius:11px;background:#fff;font-size:12px}
#editor #apply-pattern:hover{border-color:#aaa;background:#f2f2f2}
#editor #delete-bar{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:9px 10px;margin:20px 0 0;min-height:36px;border-radius:10px;font-size:12px}
#song-menu .menu-history{display:flex;gap:5px;padding:0 0 7px;margin:0 0 5px;border-bottom:1px solid #ececec}
#song-menu .menu-history button{display:flex;align-items:center;justify-content:center;gap:7px;flex:1;width:0;min-width:0;min-height:38px;padding:8px 6px;border-radius:11px;background:#f5f5f5;font-size:12px}
#song-menu .menu-history button:hover{background:#eaeaea}
#song-menu .menu-history button svg{width:16px;height:16px;flex:none}
.transport .scroll-control{position:relative;display:block;flex:none;width:auto;min-height:0;margin:0;padding:0!important;border:0;grid-area:auto}
.transport #scroll-toggle{display:inline-grid;place-items:center;width:34px;height:34px;min-width:34px;min-height:34px;padding:7px;border:0;border-radius:50%;background:transparent;color:#555;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.transport #scroll-toggle:hover,.transport #scroll-toggle[aria-expanded=true]{background:#f0f0f0;color:#111}
.transport #scroll-toggle.active{background:#111;color:#fff}
.transport #scroll-toggle.holding{box-shadow:0 0 0 4px #00000008}
#scroll-popover{position:absolute;right:-6px;top:calc(100% + 20px);width:230px;padding:15px 16px;border:1px solid #dedede;border-radius:17px;background:#fff;box-shadow:0 8px 32px #00000014,0 2px 6px #00000006;z-index:20;animation:surface-appear .13s ease-out}
#scroll-popover .setting-label{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px;min-height:20px;color:#555;font-size:12px}
#scroll-popover label{display:block;font-size:12px;line-height:1.5;color:#555}
#scroll-popover output{margin-left:auto;white-space:nowrap;font:12px ui-monospace,Consolas,monospace;color:#333}
#scroll-popover #scroll-speed{display:block;width:100%;height:28px;min-height:0;padding:0;margin:0}
@media screen and (min-width:761px) and (max-width:1050px){.edit-mode #editor{width:282px;min-width:282px;padding-left:14px;padding-right:14px}.transport{gap:8px}}
@media screen and (max-width:760px){
 /* The body-level scrim must sit below the editor, not above an isolated ancestor. */
 #workspace{isolation:auto}
 #editor,.edit-mode #editor{position:fixed;z-index:55;top:auto;left:0;right:0;bottom:var(--keyboard-inset,0px);width:100%;min-width:0;height:min(78dvh,var(--visible-height,78dvh));max-height:calc(var(--visible-height,100dvh) - 12px);padding:14px 18px max(24px,env(safe-area-inset-bottom));border:1px solid #dedede;border-radius:21px 21px 0 0;background:#fafafa;box-shadow:0 -8px 40px #0000001c;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
 .edit-mode.mobile-editor-open #editor{display:block}
 #editor .editor-heading{position:sticky;top:-14px;z-index:3;margin:-1px -3px 15px;padding:7px 3px 10px;min-height:50px;background:#fafafa;border-bottom:1px solid #e7e7e7}
 #editor .editor-heading strong{font-size:13px}
 #editor #close-editor{display:inline-grid;place-items:center;width:40px;height:40px;min-width:40px;min-height:40px;border:0;padding:11px}
 #editor .editor-tabs button{min-height:40px}
 #editor :is(input:not([type=range]):not([type=checkbox]),select,textarea){min-height:42px;font-size:16px}
 #editor #chord-edit-tools{gap:4px;padding:4px}
 #chord-edit-tools #finger-mode,#chord-edit-tools #barre-mode{min-height:40px;padding:8px 12px;font-size:13px}
 #chord-edit-tools .icon-button{width:40px;height:40px;min-width:40px;min-height:40px;padding:11px}
 #chord-edit-tools #fret-range{font-size:12px;min-width:28px}
 #chord-editor-svg{height:254px;padding:12px;margin-bottom:15px}
 #editor .chord-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 40px;gap:8px}
 #editor .chord-actions button{min-height:42px;font-size:13px}
 #editor #remove-chord{width:40px;height:40px;min-width:40px;min-height:40px;padding:10px}
 #editor #new-preset{min-height:40px;padding:8px 11px;font-size:12px}
 #editor #preset-search{min-height:42px;font-size:16px}
 #editor #preset-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 #editor #string-picks{gap:8px}
 #editor #string-picks label{height:42px;min-height:42px;font-size:13px;border-radius:12px}
 #editor #strength{height:34px}
 #strength::-webkit-slider-thumb{width:20px;height:20px;margin-top:-8px}
 #editor .inline-controls button,#editor #apply-pattern,#editor #delete-bar{min-height:42px}
 #song-menu .menu-history button{min-height:40px}
 .transport{gap:5px}
 .transport #volume-button,.transport #scroll-toggle{width:40px;height:40px;min-width:40px;min-height:40px;padding:11px}
 .transport .scroll-control{margin:0;justify-content:initial;min-height:0}
 #scroll-popover{right:-3px;top:calc(100% + 15px);width:218px;max-width:calc(100vw - 24px);padding:14px 16px}
 #scroll-popover label{display:block;font-size:12px}
 #scroll-popover #scroll-speed{width:100%;height:32px;min-height:0;padding:0}
 #volume-popover{top:calc(100% + 15px)}
}
@media screen and (max-width:360px){
 .transport{gap:3px;padding-left:6px;padding-right:6px}
 #row-position{min-width:33px}
 .transport #volume-button,.transport #scroll-toggle{width:40px;min-width:40px;padding:11px}
 #editor,.edit-mode #editor{padding-left:13px;padding-right:13px}
 #chord-edit-tools #finger-mode,#chord-edit-tools #barre-mode{padding-left:9px;padding-right:9px}
 #editor .chord-actions{gap:5px}
}
@media(prefers-reduced-motion:reduce){#scroll-popover{animation:none}#editor #string-picks label{transition:none}}
@media print{#editor,#scroll-popover{display:none!important}}