/* Pocket drum machine — base.css already handles type, buttons and cards. This only draws the
   sequencer and the board. */

main { max-width: 720px; }
.lede { color: var(--soft); margin-bottom: 20px; }
.lede b { color: var(--ink); }

.machine { padding: 16px; }

/* Transport: play button + tempo */
.transport { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.btn.play { min-width: 104px; font-size: 15px; }
.btn.play.on { background: #2c2622; }
.tempo { flex: 1; min-width: 0; }
.tempo label { margin-bottom: 2px; }
.tempo b { color: var(--ink); font-variant-numeric: tabular-nums; }
/* The slider is drawn by hand: base.css's input rule would give it a border and a fill, and the
   default look is far too heavy here */
.tempo input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 20px; padding: 0; border: none; background: transparent; }
.tempo input[type=range]:focus { box-shadow: none; outline: none; }
.tempo input[type=range]::-webkit-slider-runnable-track { height: 5px; border-radius: 3px; background: var(--line); }
.tempo input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -6.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 1px 4px rgba(80,60,40,.32); cursor: pointer; }
.tempo input[type=range]::-moz-range-track { height: 5px; border-radius: 3px; background: var(--line); }
.tempo input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border: none; border-radius: 50%; background: var(--accent); cursor: pointer; }

/* The grid: one column of drum names on the left + 16 columns of squares. On a phone the squares
   get narrower but keep their height, so they're still easy to hit.
   ⚠️The name column is sized for the longest label ("Open hat"). Rename a drum to something longer
   and you must widen this, or the name gets clipped. */
.gridwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.grid {
  display: grid;
  grid-template-columns: 66px repeat(16, minmax(15px, 1fr));
  gap: 4px;
  min-width: 300px;
  touch-action: pan-y;          /* let the page scroll up and down, but keep sideways drag for painting */
}

.tname {
  font-size: 12px; color: var(--soft);
  background: transparent; border: none; padding: 0 6px 0 0;
  text-align: right; font-weight: 600; white-space: nowrap;
  display: flex; align-items: center; justify-content: flex-end;
  cursor: pointer; border-radius: 6px;
}
.tname:hover { color: var(--accent); background: transparent; filter: none; }
.tname:active { transform: none; }

.cell {
  height: 34px; padding: 0; border: none; border-radius: 6px;
  background: #ece3d6;
  box-shadow: none;
  transition: background .1s linear, transform .06s;
  cursor: pointer;
  touch-action: none;           /* no scrolling on the squares themselves — that gesture is painting */
}
.cell.beat { background: #ded0ba; }        /* every 4th square starts a beat: darker, easier to count */
.cell:hover { filter: none; background: #d8c9b3; }
/* Lit squares get exactly one colour. You read the pattern off which squares are lit, and shading
   the lit ones differently muddles the picture — you can't see the beat at a glance any more */
.cell.on, .cell.on.beat { background: var(--accent); box-shadow: 0 2px 6px rgba(201,138,94,.4); }
.cell.head { outline: 2px solid #2c2622; outline-offset: 1px; }
.cell.on.head { transform: scale(1.08); }
.cell:active { transform: scale(.94); }

.tools { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.tools .btn { padding: 8px 14px; font-size: 14px; }
.hint { font-size: 12px; margin-left: auto; }

.nameRow { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.nameRow label { grid-column: 1 / -1; }
/* Inside a grid an input refuses to go below its intrinsic width (about 20 characters), and it will
   blow out the row and the whole page with it. min-width:0 is the key that unlocks that — without
   this line, everything to the right is pushed off a phone screen. */
.nameRow input { min-width: 0; }

.sec { font-size: 17px; margin: 28px 0 10px; }
.sec .muted { font-size: 13px; font-weight: 400; }

.board { list-style: none; padding: 0; margin: 0; }
.board li {
  display: grid; grid-template-columns: 40px 1fr auto;
  align-items: center; gap: 10px;
  padding: 7px 10px; border-bottom: 1px solid var(--line); font-size: 15px;
}
.board li:last-child { border-bottom: none; }
.board li.mine { background: rgba(201,138,94,.1); border-radius: 8px; }
.board li.mine .nm::after { content: " · you"; color: var(--accent); font-size: 12px; }
.board .mini { padding: 4px 0; width: 34px; font-size: 13px; border-radius: 8px; }
.board .bp { font-size: 13px; color: var(--soft); font-variant-numeric: tabular-nums; }
.board .empty { display: block; color: var(--soft); font-size: 14px; padding: 14px 2px; border: none; }

.note { font-size: 13px; margin-top: 20px; }

@media (max-width: 600px) {
  .grid { grid-template-columns: 56px repeat(16, minmax(12px, 1fr)); gap: 3px; min-width: 0; }
  .cell { height: 30px; border-radius: 5px; }
  .tname { font-size: 11px; padding-right: 4px; }
  .transport { gap: 12px; }
  .btn.play { min-width: 84px; }
  .hint { display: none; }
  /* A narrow screen can't fit "input + long button" side by side, so they stack and the button
     spans the full width */
  .nameRow { grid-template-columns: 1fr; }
  .nameRow .btn { width: 100%; }
  .machine { padding: 12px; }
}