/* Ride the Lead (/balance/ride): the lead's fader beside its automation lane. On top of app.css's console (.bdesk,
   .strip, .fader); tokens from app.css. */
.bdesk.rdesk{grid-template-columns:104px minmax(0,1fr);width:100%;max-width:760px;align-items:stretch}
.rdesk .strip{box-shadow:inset -1px 0 0 rgba(0,0,0,.55),inset -2px 0 0 rgba(255,236,210,.04)}
.rlane{position:relative;min-width:0;margin:0 12px 0 10px;min-height:236px;border-radius:6px;background:#06110e;border:1px solid #17241f;box-shadow:inset 0 1px 6px rgba(0,0,0,.9)}
.rlane canvas{position:absolute;inset:0 0 30px;width:100%;height:calc(100% - 30px);display:block}
.rlane__count{position:absolute;inset:0 0 30px;display:grid;place-items:center;font:800 64px/1 'Saira Condensed','Saira Fallback',sans-serif;color:var(--signal);text-shadow:0 0 24px rgba(var(--signal-rgb),.55);pointer-events:none}
.rlane__count:empty{display:none}
.rlane__key{position:absolute;left:10px;right:10px;bottom:6px;display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;font:700 9.5px/1.6 'Space Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.rk::before{content:"";display:inline-block;width:14px;height:3px;border-radius:2px;margin:0 6px 2px 0;vertical-align:middle}
.rk--ref::before{background:var(--level)}
.rk--you::before{background:var(--signal)}
.rk--act::before{height:8px;background:rgba(244,239,231,.14)}
.rdesk.is-riding .rlane{border-color:rgba(var(--signal-rgb),.55);box-shadow:inset 0 1px 6px rgba(0,0,0,.9),0 0 18px -4px rgba(var(--signal-rgb),.5)}
@media (max-width:560px){
  .bdesk.rdesk{grid-template-columns:72px minmax(0,1fr)}
  .rlane{min-height:184px;margin:0 8px 0 6px}
  .rlane__count{font-size:48px}
  .rlane canvas,.rlane__count{inset:0 0 46px;height:calc(100% - 46px)}
}
/* the phrases: press one on the lane to choose it, drag to set its level */
.rlane canvas{cursor:ns-resize;touch-action:none;outline:none;border-radius:6px}
.rlane canvas:focus-visible{box-shadow:0 0 0 2px rgba(var(--signal-rgb),.6)}
.rtools{margin-top:10px}
.rtools .key.on{color:var(--signal);border-color:rgba(var(--signal-rgb),.6)}
.rk[hidden]{display:none}
