/* Roller's controls, for its own page and the all-instruments page. */
h2.inline { margin: 0 8px 0 0; }
.ro-panel { padding: 16px; margin-bottom: 24px; }
.ro-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ro-row[hidden], .ro-follows[hidden] { display: none; }
.ro-row label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.ro-follows { font-size: 13px; color: var(--muted); }
.ro-follows b { color: var(--text); }
.ro-groups { display: flex; flex-wrap: wrap; gap: 18px 36px; }
.ro-group h3 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 8px; }
.knobs { display: flex; flex-wrap: wrap; gap: 8px 4px; }

/* Sixteen steps; it scrolls sideways inside its panel on a narrow screen. */
.ro-grid-wrap { overflow-x: auto; padding-bottom: 4px; margin-top: 14px; }
.ro-grid { display: grid; grid-template-columns: repeat(16, minmax(34px, 1fr)); gap: 4px; min-width: 600px; }
.ro-step { user-select: none; -webkit-user-select: none; padding: 0; height: 52px; border-radius: 6px; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.ro-step.alt { background: color-mix(in srgb, var(--bg) 70%, var(--line)); }
.ro-step b { font: 600 12px var(--mono); }
.ro-step small { font: 10px var(--mono); opacity: 0.8; }
.ro-step[data-kind="r"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.ro-step[data-kind="o"] { background: color-mix(in srgb, var(--accent) 65%, var(--bg)); border-color: var(--accent); color: #fff; }
.ro-step[data-kind="f"] { background: color-mix(in srgb, var(--accent) 40%, var(--bg)); border-color: var(--accent); color: #fff; }
/* The low fifth darkest, then the third and seventh lighter, so a riff's
   shape reads at a glance. */
.ro-step[data-kind="l"] { background: color-mix(in srgb, var(--accent) 85%, #000); border-color: var(--accent); color: #fff; }
.ro-step[data-kind="t"] { background: color-mix(in srgb, var(--accent) 28%, var(--bg)); border-color: var(--accent); color: var(--text); }
.ro-step[data-kind="s"] { background: color-mix(in srgb, var(--accent) 18%, var(--bg)); border-color: var(--accent); color: var(--text); }
.ro-step.now { outline: 2px solid var(--text); outline-offset: -2px; }