/* A maximum of five visible operations share an icon row. */
#range-tools{--operation-size:32px;display:grid;grid-template-columns:repeat(var(--operation-columns,5),var(--operation-size));height:auto;min-height:0;width:max-content;gap:4px;padding:6px;border-radius:16px;max-height:calc(var(--visible-height,100dvh) - 16px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
#range-tools .range-icon{width:var(--operation-size);height:var(--operation-size);min-width:var(--operation-size);min-height:var(--operation-size);padding:7px}
.technique-options{grid-template-columns:repeat(var(--operation-columns,5),40px)}
.operation-label{display:none;pointer-events:none}
/* Detail mode keeps the icon bare and makes each action a readable row. */
body[data-operation-menu=detailed] #range-tools{grid-template-columns:minmax(0,1fr);width:224px;gap:2px;padding:6px;border-radius:14px}
body[data-operation-menu=detailed] #range-tools .range-icon,
body[data-operation-menu=detailed] .technique-options>.technique-option{display:flex;align-items:center;justify-content:flex-start;gap:11px;width:100%;height:auto;min-width:0;min-height:38px;padding:9px 11px;border:0;border-radius:8px;background:transparent;box-shadow:none;color:#222;text-align:left;white-space:normal;transform:none}
body[data-operation-menu=detailed] #range-tools .range-icon:not(:disabled):hover,
body[data-operation-menu=detailed] .technique-options>.technique-option[aria-disabled=false]:hover{background:#f2f2f2;box-shadow:none;transform:none}
body[data-operation-menu=detailed] #range-tools .range-icon.active,
body[data-operation-menu=detailed] .technique-options>.technique-option[aria-pressed=true]{background:#ededed;color:#111;font-weight:650}
body[data-operation-menu=detailed] #range-tools .range-icon.active:hover,
body[data-operation-menu=detailed] .technique-options>.technique-option[aria-pressed=true]:hover{background:#e5e5e5;color:#111}
body[data-operation-menu=detailed] #range-tools .range-icon.danger,
body[data-operation-menu=detailed] .technique-options>.technique-option.danger{color:#b73d3d}
body[data-operation-menu=detailed] #range-tools .range-icon>svg,
body[data-operation-menu=detailed] .technique-options>.technique-option>svg{flex:none;display:block;width:20px;height:20px;border:0;border-radius:0;background:none;box-shadow:none;transform:none}
body[data-operation-menu=detailed] .operation-label{display:block;font-size:13px;line-height:1.4;overflow-wrap:anywhere}
body[data-operation-menu=detailed] #score-popover[data-kind=technique]{width:240px;max-width:calc(100vw - 16px);max-height:calc(var(--visible-height,100dvh) - 16px - env(safe-area-inset-bottom));overflow:auto;padding:6px;border-radius:14px;scrollbar-width:thin}
body[data-operation-menu=detailed] .technique-options{grid-template-columns:minmax(0,1fr);gap:2px}
@media(max-width:760px),(pointer:coarse){#range-tools{--operation-size:40px}body[data-operation-menu=detailed] #range-tools .range-icon,body[data-operation-menu=detailed] .technique-options>.technique-option{min-height:42px}.technique-options{grid-template-columns:repeat(var(--operation-columns,5),44px)}}
@media print{#range-tools{display:none!important}}
#range-tools .keyboard-menu-active,.technique-options>.keyboard-menu-active{background:#e5e5e5!important;outline:1px solid #999;outline-offset:0;box-shadow:none!important}
#score-scroll:focus{outline:none;box-shadow:none}
.keyboard-string-marker,.keyboard-fret-preview{pointer-events:none}
@media print{.keyboard-string-marker,.keyboard-fret-preview{display:none!important}}