/* ============================================================
   Riff Constructor — tool-specific styles (rc- prefix)
   ============================================================ */

.rc-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ── Hero ── */
.rc-hero {
  background: var(--hero-bg);
  color: var(--hero-ink);
  padding: 56px 0 52px;
}
.rc-hero-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.rc-hero-title {
  font-size: 38px;
  font-weight: 300;
  letter-spacing: -0.025em;
  margin: 0 0 10px;
}
.rc-hero-sub {
  font-size: 15px;
  color: var(--hero-ink-dim);
  font-weight: 300;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 620px;
}

/* ── About ── */
.rc-about {
  margin: 44px auto 28px;
  max-width: 760px;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
}
.rc-about p { margin: 0 0 12px; }
.rc-about p:last-child { margin-bottom: 0; }
.rc-about strong { color: var(--ink); font-weight: 500; }
.rc-about em { color: var(--ink); font-style: italic; }

/* ── Global control bar ── */
.rc-controlbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin: 0 0 24px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.rc-controlbar-group {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.rc-pitch-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rc-pitch-label {
  font: 600 9.5px/1 var(--font);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.rc-key-select,
.rc-oct-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  font: 600 12px/1 var(--font-mono);
  padding: 6px 18px 6px 8px;
  border-radius: 5px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><polyline points='2,3 4,5.2 6,3' fill='none' stroke='%23999' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 5px center;
  background-size: 8px 8px;
}
.rc-key-select { min-width: 46px; }
.rc-oct-select { min-width: 42px; }
.rc-bpm-input {
  width: 58px;
  font: 600 12.5px/1 var(--font-mono);
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 6px;
  text-align: center;
  -moz-appearance: textfield;
}
.rc-bpm-input::-webkit-outer-spin-button,
.rc-bpm-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.rc-bpm-input:focus { outline: none; border-color: var(--ink); }
.rc-bpm-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rc-bpm-icon {
  width: 14px;
  height: 14px;
  color: var(--ink-faint);
  display: inline-flex;
}

/* ── Transport buttons ── */
.rc-transport {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.rc-play {
  appearance: none;
  background: var(--ink);
  color: var(--bg);
  border: 0;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s, transform 0.15s;
}
.rc-play:hover { opacity: 0.88; }
.rc-play:active { transform: scale(0.97); }
.rc-play.is-playing { background: var(--ink-dim); }
.rc-play svg { width: 11px; height: 11px; }
.rc-play .rc-stop-label { display: none; }
.rc-play.is-playing .rc-play-label { display: none; }
.rc-play.is-playing .rc-stop-label { display: inline-flex; }
.rc-loop, .rc-export-trigger, .rc-clear {
  appearance: none;
  background: transparent;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.rc-loop:hover,
.rc-export-trigger:hover,
.rc-clear:hover { color: var(--ink); border-color: var(--line-bright); }
.rc-loop.is-active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.rc-loop svg, .rc-export-trigger svg, .rc-clear svg { width: 14px; height: 14px; }

/* ── Bar timeline ── */
.rc-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 22px;
  position: relative;
}
.rc-bar {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 200px;
  position: relative;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.rc-bar:hover { border-color: var(--line-bright); }
.rc-bar.is-current { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.rc-bar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 22px;
}
.rc-bar-index {
  font: 600 9px/1 var(--font);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.rc-bar-name {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.rc-bar-mood {
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
}
.rc-bar-notation {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  padding: 4px 2px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
}
.rc-bar-notation svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.rc-bar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.rc-bar-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  border-radius: 999px;
  width: 24px;
  height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.rc-bar-btn:hover { color: var(--ink); border-color: var(--line-bright); }
.rc-bar-btn svg { width: 11px; height: 11px; }
.rc-bar-btn.is-active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
/* Solo play — fill the button when active to signal "currently playing this bar" */
.rc-bar-solo-play .rc-bar-stop-icon { display: none; }
.rc-bar-solo-play.is-playing { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.rc-bar-solo-play.is-playing .rc-bar-play-icon { display: none; }
.rc-bar-solo-play.is-playing .rc-bar-stop-icon { display: inline-flex; }
.rc-bar-solo-loop.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* Empty bar — large "+" target */
.rc-bar.is-empty {
  cursor: pointer;
  background: transparent;
  border-style: dashed;
}
.rc-bar.is-empty:hover { background: var(--bg-card); }
.rc-bar-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  gap: 6px;
  pointer-events: none;
}
.rc-bar-empty svg {
  width: 28px;
  height: 28px;
  color: var(--ink-faint);
}
.rc-bar-empty-label {
  font: 600 10px/1 var(--font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* SVG element styles (mirror MP) */
.rc-tab-string { stroke: var(--ink-dim); stroke-width: 0.7; }
.rc-tab-label { fill: var(--ink-dim); font: 600 8.5px/1 var(--font-mono); dominant-baseline: middle; }
.rc-tab-label--thin { font-style: italic; }
.rc-tab-chip { display: none; }
.rc-tab-fret { fill: var(--ink); font: 700 7px/1 var(--font-display); letter-spacing: 0.01em; }
.rc-tab-fret--compact { font-size: 6.5px; }
.rc-tab-fret.is-lit { animation: rc-fret-glow 0.7s ease-out forwards; }
@keyframes rc-fret-glow {
  0%   { fill: #fff; filter: drop-shadow(0 0 4px var(--ink)); }
  55%  { fill: var(--ink); filter: drop-shadow(0 0 2px var(--ink)); }
  100% { fill: var(--ink); filter: none; }
}
.rc-tab-nut { fill: var(--ink); stroke: none; }
.rc-slot-highlight {
  fill: var(--ink);
  fill-opacity: 1;
  opacity: 0;
  pointer-events: none;
}
.rc-slot-highlight.is-lit {
  animation: rc-slot-flash 0.65s ease-out forwards;
}
@keyframes rc-slot-flash {
  0%   { opacity: 0.4; }
  100% { opacity: 0; }
}
.rc-tab-stem { stroke: var(--ink); stroke-width: 1; stroke-linecap: butt; }
.rc-tab-beam { stroke: var(--ink); stroke-width: 1.6; stroke-linecap: butt; }

/* ── Drum pattern strip ── */
.rc-drums {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 0 0 26px;
}
.rc-bass .rc-drums-head { margin-bottom: 4px; }
.rc-bass-note {
  margin: 0;
  font-size: 12px;
  color: var(--ink-faint);
}
.rc-drums-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 12px;
}
.rc-drums-label {
  font: 600 10px/1 var(--font);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.rc-drums-options {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.rc-drum-opt {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  font: 500 11.5px/1 var(--font);
  letter-spacing: 0.04em;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.rc-drum-opt:hover { color: var(--ink); border-color: var(--line-bright); }
.rc-drum-opt.is-active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.rc-drum-grid {
  display: grid;
  grid-template-columns: 50px repeat(16, 1fr);
  gap: 2px;
  align-items: center;
}
.rc-drum-lane-label {
  font: 600 9.5px/1 var(--font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-right: 8px;
  text-align: right;
}
.rc-drum-cell {
  appearance: none;
  padding: 0;
  cursor: pointer;
  height: 14px;
  border-radius: 2px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  transition: transform 0.08s, background 0.12s, border-color 0.12s, opacity 0.12s;
}
.rc-drum-cell:hover { border-color: var(--ink); }
.rc-drum-cell:active { transform: scale(0.96); }
.rc-drum-cell:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.rc-drum-cell.is-hit { background: var(--ink); border-color: var(--ink); }
.rc-drum-cell.is-ghost { opacity: 0.48; }
.rc-drum-cell.is-beat {
  border-left-color: var(--line-bright);
  border-left-width: 2px;
}
.rc-drum-empty {
  grid-column: 2 / -1;
  text-align: center;
  color: var(--ink-faint);
  font-size: 12px;
  padding: 12px 0;
}

/* ── Phrase picker modal ── */
.rc-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 300;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 20px 20px;
}
.rc-picker {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.45);
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rc-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 8px;
}
.rc-picker-title {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  color: var(--ink);
}
.rc-picker-close {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  border-radius: 999px;
  width: 24px;
  height: 24px;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rc-picker-close:hover { color: var(--ink); border-color: var(--line-bright); }
.rc-picker-close svg { width: 12px; height: 12px; }
.rc-picker-search {
  margin: 6px 18px 12px;
  font: 500 13px/1 var(--font);
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
}
.rc-picker-search:focus { outline: none; border-color: var(--ink); }
.rc-picker-list {
  overflow-y: auto;
  padding: 0 18px 16px;
}
.rc-picker-group { margin-bottom: 14px; }
.rc-picker-group-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 8px;
}
.rc-picker-mood-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.rc-picker-group-label {
  font: 600 10px/1 var(--font);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.rc-picker-item {
  appearance: none;
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  text-align: left;
  transition: border-color 0.2s, background 0.2s;
}
.rc-picker-item:hover { border-color: var(--line-bright); background: var(--bg-alt); }
.rc-picker-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.rc-picker-item-name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}
.rc-picker-item-form {
  font: 600 8.5px/1 var(--font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-faint);
  white-space: nowrap;
}
.rc-picker-item-form--gesture {
  color: var(--ink);
  border-color: var(--ink);
}
.rc-picker-item-preview {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
}
.rc-picker-item-preview svg {
  display: block;
  width: auto;
  height: 64px;
  max-width: 100%;
  overflow: visible;
}
.rc-picker-empty {
  text-align: center;
  color: var(--ink-faint);
  padding: 30px 0;
  font-size: 13px;
}

/* ── Export dropdown ── */
.rc-export {
  position: relative;
  display: inline-block;
}
.rc-export > summary { list-style: none; }
.rc-export > summary::-webkit-details-marker { display: none; }
.rc-export-summary {
  appearance: none;
  background: transparent;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  user-select: none;
}
.rc-export-summary:hover { color: var(--ink); border-color: var(--line-bright); }
.rc-export[open] .rc-export-summary {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.rc-export-summary svg { width: 14px; height: 14px; }
.rc-export-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  padding: 4px;
  min-width: 110px;
  z-index: 50;
  display: grid;
  gap: 2px;
}
.rc-export-opt {
  appearance: none;
  background: transparent;
  border: 0;
  font: 600 11px/1 var(--font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 9px 11px;
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  transition: background 0.15s, color 0.15s;
}
.rc-export-opt:hover { background: var(--bg-alt); color: var(--ink); }
.rc-export-opt:disabled,
.rc-export-opt.is-capped {
  cursor: not-allowed;
  opacity: 0.45;
}
.rc-export-opt.is-busy { cursor: wait; }
.rc-export-spin {
  display: none;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--line);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: rc-spin 0.7s linear infinite;
}
.rc-export-opt.is-busy .rc-export-spin { display: inline-block; }
@keyframes rc-spin { to { transform: rotate(360deg); } }
.rc-export-divider { height: 1px; background: var(--line); margin: 2px 4px; }
.rc-export-quota {
  font: 500 10px/1.4 var(--font);
  color: var(--ink-faint);
  padding: 6px 10px 4px;
  text-transform: none;
}

/* ── Toast (re-uses MP pattern) ── */
.rc-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translate(-50%, 8px);
  background: var(--ink);
  color: var(--bg);
  font: 500 13px/1 var(--font);
  padding: 12px 18px;
  border-radius: 999px;
  box-shadow: var(--shadow-card);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 400;
}
.rc-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ── Floating bar (reuse av-float-panel from MP/HC, just bring it back here) ── */
.av-float-panel {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
}

.av-global-loop {
  appearance: none;
  background: transparent;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  flex-shrink: 0;
}
.av-global-loop svg { width: 13px; height: 13px; }
.av-global-loop:hover { color: var(--ink); border-color: var(--line-bright); }
.av-global-loop.is-active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

/* ── Timbre dropdown (mirror MP) ── */
.rc-timbre-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.rc-timbre-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.rc-timbre-details { position: relative; }
.rc-timbre-details > summary { list-style: none; }
.rc-timbre-details > summary::-webkit-details-marker { display: none; }
.rc-timbre-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 130px;
  justify-content: space-between;
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--ink);
  font: 500 13px/1 var(--font);
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.rc-timbre-summary:hover { border-color: var(--line-bright); }
.rc-timbre-details[open] .rc-timbre-summary {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.rc-timbre-panel {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  padding: 8px;
  min-width: 220px;
  max-height: 360px;
  overflow-y: auto;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.rc-timbre-group {
  grid-column: 1 / -1;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 8px 8px 4px;
}
.rc-timbre-opt {
  appearance: none;
  background: transparent;
  border: 0;
  text-align: left;
  font: 500 12px/1 var(--font);
  color: var(--ink-dim);
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.rc-timbre-opt:hover  { background: var(--bg-alt); color: var(--ink); }
.rc-timbre-opt.is-active { background: var(--ink); color: var(--bg); }

/* Gain knob row — shown only when a distorted-family timbre is active */
.rc-timbre-gain {
  grid-column: 1 / -1;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 6px;
  margin-top: 6px;
  border-top: 1px solid var(--line);
}
.rc-timbre-gain-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  flex: 0 0 auto;
}
.rc-timbre-gain-slider {
  flex: 1 1 auto;
  appearance: none;
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  outline: none;
}
.rc-timbre-gain-slider::-webkit-slider-thumb {
  appearance: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--ink);
  cursor: pointer;
}
.rc-timbre-gain-slider::-moz-range-thumb {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--ink);
  border: 0;
  cursor: pointer;
}
.rc-timbre-gain-value {
  flex: 0 0 auto;
  font: 500 11px/1 var(--font);
  color: var(--ink-dim);
  min-width: 50px;
  text-align: right;
}

/* ── Play-range selector ── */
.rc-range-curtain {
  position: absolute;
  top: 0; bottom: 0;
  background: var(--bg);
  opacity: 0.6;
  pointer-events: none;
  z-index: 4;
}
.rc-range-curtain-left  { border-radius: var(--card-radius) 0 0 var(--card-radius); }
.rc-range-curtain-right { border-radius: 0 var(--card-radius) var(--card-radius) 0; }

.rc-range-handle {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  margin-left: -1px;
  pointer-events: none;
  z-index: 6;
}

.rc-range-handle-track {
  position: absolute;
  top: 10px; bottom: 10px;
  left: 0;
  width: 2px;
  background: var(--ink);
  border-radius: 1px;
  opacity: 0.4;
  pointer-events: none;
}

/* Left handle — pill grip */
.rc-range-grip {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  background: var(--ink);
  width: 10px;
  height: 34px;
  border-radius: 999px;
  pointer-events: auto;
  cursor: ew-resize;
  user-select: none;
  touch-action: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.32);
  transition: transform 0.1s, box-shadow 0.1s;
}
.rc-range-grip:hover        { box-shadow: 0 3px 14px rgba(0, 0, 0, 0.48); }
.rc-range-grip.is-dragging  { transform: translate(-50%, -50%) scale(1.12); }

/* Right handle — badge with count */
.rc-range-badge {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  background: var(--ink);
  color: var(--bg);
  border-radius: 9px;
  padding: 8px 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  cursor: ew-resize;
  pointer-events: auto;
  user-select: none;
  touch-action: none;
  transition: transform 0.1s, box-shadow 0.1s;
}
.rc-range-badge:hover        { box-shadow: 0 3px 16px rgba(0, 0, 0, 0.5); }
.rc-range-badge.is-dragging  { transform: translate(-50%, -50%) scale(1.08); }
.rc-range-n {
  font: 700 16px/1 var(--font-mono);
}
.rc-range-unit {
  font: 600 7.5px/1 var(--font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.65;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .rc-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rc-range-curtain,
  .rc-range-handle { display: none; }
}
@media (max-width: 480px) {
  .rc-timeline {
    grid-template-columns: 1fr;
  }
  .rc-drum-grid {
    grid-template-columns: 40px repeat(16, 1fr);
  }
}