/* Live's MIDI Note Editor (js/drills/roll.js) and the drum / harmony / MIDI editing games. */
.nr{background:var(--dev);border:1px solid var(--devline);color:var(--devtext);margin-bottom:14px;user-select:none;-webkit-user-select:none}
.nr-tools{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px 8px;border-bottom:1px solid var(--devline);font-size:12px}
.nr-tb{background:color-mix(in srgb,var(--dev2) 70%,#000);border:1px solid var(--devline);color:var(--devtext);font:inherit;font-size:12px;padding:4px 9px;border-radius:3px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.nr-tb:hover{border-color:#6a7073}
.nr-tb.on{background:var(--devacc);color:#1b1b1b;border-color:var(--devacc)}
.nr-tb .kbd{font-size:9px;opacity:.7}
.nr-sp{flex:1}
.nr-grid select,.nr-lbl select,.sc-l select,.qset select{background:color-mix(in srgb,var(--dev2) 70%,#000);border:1px solid var(--devline);color:var(--devtext);font-size:12px;padding:3px 4px;border-radius:3px}
.nr-lbl{display:inline-flex;gap:6px;align-items:center;font-size:12px}
.nr-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.nr-inner{min-width:max(100%,calc(var(--steps) * 18px + var(--kw,92px)))}
.nr.wide .nr-inner{min-width:max(100%,calc(var(--steps) * 16px + var(--kw,92px)))}
.nr-ruler{display:grid;grid-template-columns:var(--kw,92px) 1fr;height:18px;border-bottom:1px solid var(--devline);background:color-mix(in srgb,var(--dev2) 70%,#000)}
.nr-rlane{position:relative}
.nr-rlane span{position:absolute;top:2px;font-family:var(--mono);font-size:10px;color:#8a9194;padding-left:3px;border-left:1px solid #4a4f52;height:14px;line-height:14px}
.nr-rlane span.bar{color:#e7eaeb;border-left-color:#9aa1a4}
.nr-body{display:grid;grid-template-columns:var(--kw,92px) 1fr}
.nr-keys{border-right:1px solid var(--devline)}
.nr-key{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:0 6px;font-size:10.5px;background:#3a3e40;color:#e3e6e7;border-bottom:1px solid #2a2c2d;cursor:pointer;white-space:nowrap;overflow:hidden;font-family:var(--mono)}
.nr-key small{font-size:9px;color:#8a9194}
.nr-key.blk{background:#1f2122;color:#8a9194}
.nr-key.hi{box-shadow:inset 3px 0 0 var(--devacc)}
.nr-key.foc{background:#50565a;color:#fff}
.nr-key:hover{filter:brightness(1.15)}
.nr-lane{position:relative;cursor:pointer;touch-action:none;overflow:hidden}
.nr.drawing .nr-lane{cursor:crosshair}
.nr-bg,.nr-notes{position:absolute;inset:0}
.nr-row{position:absolute;left:0;right:0;background:#2c2f30;border-bottom:1px solid #26292a}
.nr-row.blk{background:#232526}
.nr-row.hi{background:#3a3f37}.nr-row.blk.hi{background:#33382f}
.nr-col{position:absolute;top:0;bottom:0;width:0;border-left:1px solid #313537}
.nr-col.beat{border-left-color:#43484b}.nr-col.bar{border-left-color:#7d8487}
.nr-note{position:absolute;background:color-mix(in srgb,var(--devacc) calc(45% + var(--v) * 55%),#3a3e40);border:1px solid #1b1b1b;border-radius:2px;box-sizing:border-box;min-width:4px}
.nr-note::after{content:"";position:absolute;right:0;top:0;bottom:0;width:5px;cursor:ew-resize}
.nr-note.sel{background:#ff6e5a;border-color:#fff}
.nr-note.off{background:#6b6f72;opacity:.55}
.nr-note.ok{background:var(--teal)}
.nr-note.bad{background:var(--red)}
.nr-note.miss{background:transparent;border:2px dashed #e7eaeb}
.nr-ch{position:absolute;left:2px;top:0;font-size:8px;font-style:normal;color:#1b1b1b;line-height:1.6}
.nr-ph{position:absolute;top:0;bottom:0;width:2px;background:#fff;opacity:.7;display:none;pointer-events:none}
.nr-exp{border-top:1px solid var(--devline);display:grid;grid-template-columns:var(--kw,92px) 1fr}
.nr-etabs{display:flex;flex-direction:column;gap:2px;padding:4px;border-right:1px solid var(--devline);font-size:11px}
.nr-et{background:none;border:1px solid transparent;color:#9aa1a4;font:inherit;text-align:left;padding:2px 4px;cursor:pointer;border-radius:2px}
.nr-et.on{color:#fff;border-color:var(--devline);background:#35393b}
.nr-eval{font-size:9.5px;color:#9aa1a4;padding:2px 4px;white-space:normal;line-height:1.25}
.nr-elane{position:relative;height:64px;background:#232526;cursor:ns-resize;touch-action:none}
.nr-stems{position:absolute;inset:4px 0 0 0}
.nr-stem{position:absolute;bottom:0;width:3px;margin-left:2px;background:var(--devacc)}
.nr-stem::before{content:"";position:absolute;top:-3px;left:-2px;width:7px;height:7px;border-radius:50%;background:inherit}
.nr-stem.dim{opacity:.28}.nr-stem.off{background:#6b6f72}
.chordstrip{display:grid;grid-template-columns:var(--kw,92px) repeat(var(--bars),minmax(0,1fr));font-family:var(--mono);font-size:12px;border-bottom:1px solid var(--devline);background:#35393b}
.chordstrip::before{content:"Chords";font-size:10px;color:#9aa1a4;align-self:center;padding-left:6px}
.chordstrip span{padding:3px 6px;border-left:2px solid #e0b25c;color:#fff}
.clockhost{display:inline-flex}
.jobs{margin:0 0 12px;padding-left:20px}.jobs li{margin:4px 0}
/* Clip View scale section, Chord device, Notes tools */
.sc-body,.nrp-body{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.sc-l{display:inline-flex;gap:6px;align-items:center;font-size:12px}
.qset{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:12px;padding:8px;border:1px solid var(--devline);background:color-mix(in srgb,var(--dev2) 70%,#000)}
.qset[hidden]{display:none}
.qset .qamt{width:56px;background:#1f2122;border:1px solid var(--devline);color:var(--devtext);padding:2px 4px}
.chorddev .knobrow{gap:8px}
/* mini step grids used as answers in Beat by Ear */
.minians{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))!important}
.minians .ans{display:flex;flex-direction:column;align-items:stretch;gap:6px}
.mini{display:grid;grid-template-columns:58px repeat(16,minmax(0,1fr));gap:2px;width:100%}
.mini-l{font-size:9px;text-align:left;opacity:.75;white-space:nowrap;overflow:hidden}
.mini i{height:10px;background:#3a3e40;display:block}
.mini i.b{box-shadow:inset 1px 0 0 #9aa1a4}
.mini-cap:empty{display:none}
@media (max-width:520px){.nr{--kw:74px}.nr.pads{--kw:112px!important}.nr-inner{min-width:max(100%,calc(var(--steps) * 15px + var(--kw)))}.nr-key{font-size:9.5px;padding:0 4px}.mini{grid-template-columns:44px repeat(16,minmax(0,1fr))}}
.d-hrm{--areac:#e0b25c}
.nr-keys,.nr-corner,.nr-etabs{position:sticky;left:0;z-index:3;background:var(--dev)}
.nr-corner{background:color-mix(in srgb,var(--dev2) 70%,#000)}
.chordstrip::before{position:sticky;left:0;z-index:3;background:#35393b}