:root{
  /* Confessor – Condemned inspired */
  --bg:        #0B0B0C;
  --panel:     #1B1B1E;
  --ink:       #E7D4C9;
  --muted:     #BFAEA5;
  --line:      #3F3A40;
  --accent-1:  #7A1C26; /* deep crimson */
  --accent-2:  #5B0F19; /* wine */
  --accent-3:  #C97E79; /* dusty rose */

  --kick:      #5B0F19;
  --snare:     #C97E79;
  --ride:      #7A1C26;

  --label-w:   140px;   /* fixed left column width (a bit wider for labels) */
  --col-w:     24px;    /* width of one 1/16 column (affects scroll speed) */
}

*{ box-sizing: border-box }
html,body{ height:100% }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
}

.container{ max-width: 1200px; margin: 28px auto; padding: 0 16px }
.title{ margin:0 0 6px 0; font-size: clamp(24px, 4vw, 36px); letter-spacing: 0.02em; font-weight: 800 }
h2{ margin:0; font-size: 18px }
.muted{ color: var(--muted) }
.footer{ margin: 10px 0 30px; color:#3F3A40}

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
}

.stack{ display:flex; flex-direction: column }
.row{ display:flex; align-items:center; }
.wrap{ flex-wrap: wrap }
.gap-xs{ gap:6px }
.gap-sm{ gap:10px }
.gap-lg{ gap:18px }
.push-right{ margin-left:auto }

.inputs-row{
  display:flex; gap:14px; align-items:flex-end; flex-wrap: wrap;
}
.grow{ flex: 1 1 420px }

.ts-input{
  width: 100%;
  min-width: 320px;
}
.bpm-wrap{ width: 120px }             /* compact area for BPM */
.bpm-input{
  width: 100%;
  text-align: right;
  padding-right: 10px;
}

/* Controls */
input{
  background:var(--bg);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
  outline:none;
}
input:focus{ border-color: var(--accent-3) }

.btn{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 14px;
  cursor:pointer;
}
.btn:hover{ background:#141416 }
.btn-primary{
  background:var(--accent-1);
  border-color: var(--accent-2);
}
.btn-primary:hover{ background:var(--accent-2) }
.btn-ghost{
  background:transparent;
}
/* Radio → emoji toggle (☐ when off, 💀 when on) */
.radio{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  cursor:pointer;
  user-select:none;
}

/* hide native circle */
.radio input{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
}

/* place emoji before the text inside the span */
.radio span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.radio input + span::before{
  content:"☐";
  font-size:18px;
  line-height:1;
}
.radio input:checked + span::before{
  content:"💀";
}

/* keyboard focus */
.radio input:focus-visible + span{
  outline:2px solid var(--accent-3);
  outline-offset:2px;
  border-radius:8px;
}

.error{
  background: #3a1115;
  border:1px solid #7a2a32;
  color:#ffdede;
  padding:8px 10px;
  border-radius:8px;
}

/* Legend dots */
.legend{ color:var(--muted); font-size:14px }
.dot{
  width:12px; height:12px; border-radius:50%; display:inline-block; margin-right:6px;
  box-shadow: 0 0 0 1px #000 inset, 0 0 6px #0008;
}
.dot.kick{ background:var(--kick) }
.dot.snare{ background:var(--snare) }
.dot.ride{ background:var(--ride) }

/* ---------- GRID (no visible scrollbars; fixed playhead; auto-scroll) ---------- */
.grid-viewport{
  position: relative;
  overflow: hidden;           /* hide native scrollbars */
  border:1px solid var(--line);
  border-radius:12px;
}

/* fixed playhead on the left edge of the scrolling area */
.playhead{
  position:absolute;
  left:var(--label-w);
  top:0; bottom:0;
  width:2px;
  background: var(--accent-3);
  box-shadow: 0 0 0 1px #000a, 0 0 10px #0008;
  z-index: 6;
}

/* inner layout: fixed left column + scrolling right column */
.grid-inner{
  display:flex;
  position: relative;
}

/* left column with track labels (on top, opaque bg) */
.left-col{
  width: var(--label-w);
  flex: 0 0 var(--label-w);
  border-right:1px solid var(--line);
  position: sticky;
  left: 0;
  z-index: 5;                 /* sits above scroll area */
  background: var(--panel);   /* prevents hits showing under labels */
}
.left-col .label{
  height:28px;
  display:flex; align-items:center; padding:6px 12px;
  color:var(--ink);
}
.left-col .label.header{ height:28px; border-bottom:1px solid var(--line) }

/* right column that we translate for scrolling (below labels) */
.scroll-col{
  will-change: transform;
  transform: translateX(0);
  position: relative;
  z-index: 1;
}

/* ruler and tracks share the same column grid */
.ruler{
  position:sticky; top:0; z-index:2;
  background: linear-gradient(#141416, #0f0f11);
  border-bottom:1px solid var(--line);
  display:grid;
}
.ruler .cell{
  height:28px; display:flex; align-items:center; justify-content:center;
  color:#aaa; font-size:11px; border-left:1px solid #141416;
}
.measure{ border-left: 2px solid #6b646b !important; }

/* tracks */
.track{ display:flex; border-bottom:1px solid var(--line) }
.track .cells{ display:grid }
.track .cells .cell{
  position:relative; height:28px; border-left:1px solid #141416;
}
.cell .hit{
  position:absolute; inset:4px; border-radius:6px;
  box-shadow: 0 0 0 1px #000 inset, 0 6px 10px #0006;
}
.hit.kick{ background:var(--kick) }
.hit.snare{ background:var(--snare) }
.hit.ride{ background:var(--ride) }