/* Drum Machine — red/dark theme */

:root {
  /* Roland TR-808, 1980 — cream panel in wood, with the famous orange /
     amber / yellow / white step rows. The colour IS the interface. */
  --chassis: #6f4b2a;         /* wood */
  --chassis-edge: rgba(30, 18, 8, 0.6);
  --cheek: var(--wood);       /* panel-hw.css end cheeks */
  --cheek-w: 22px;
  --bg: #cfc7b8;
  --panel-bg: #ded7c9;
  --panel-border: #a89e8c;
  --accent: #e8531f;          /* 808 orange */
  --accent-dim: #b23c12;
  --accent-bright: #ff7a45;
  --text: #2b2620;
  --text-dim: #6b6355;
  --knob-track: #b7ae9c;
  --slider-thumb: #e8531f;
  --danger: #c0392b;
  --led: #ff3b2f;
  --cap: #5c554a;
  --cap-edge: rgba(0,0,0,0.45);
  --display-bg: #23201a;
  --display-ink: #ff8a3d;
  --display-grid: rgba(255, 138, 61, 0.12);
  --readout-bg: transparent;
  --readout-ink: #8a3410;
  --readout-border: transparent;
  --readout-glow: none;
  --panel-radius: 3px;
  --shadow-strength: 0.5;
  --label-weight: 700;
  --title-tracking: 2.4px;
  /* 808 step-row colours, used by the sequencer grid */
  --step-1: #e8531f;
  --step-2: #f0912a;
  --step-3: #f5c542;
  --step-4: #e8e2d5;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg); color: var(--text); font-family: 'Segoe UI', system-ui, sans-serif; font-size: 12px; overflow-x: hidden; }

.synth-container { max-width: 1200px; margin: 0 auto; padding: 10px; }
.synth-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 8px; margin-bottom: 8px; }
.synth-header h1 { font-size: 18px; font-weight: 700; color: var(--accent); letter-spacing: 2px; text-transform: uppercase; }
.header-controls { display: flex; align-items: center; gap: 12px; }

.panel { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 6px; padding: 10px; }
.panel-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent); margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--panel-border); }

.control-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.control-row label { width: 50px; font-size: 10px; color: var(--text-dim); text-transform: uppercase; flex-shrink: 0; }
.control-row .val { width: 40px; text-align: right; font-size: 10px; font-family: 'Courier New', monospace; color: var(--accent); flex-shrink: 0; }

input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1; height: 4px; background: var(--knob-track); border-radius: 2px; outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--slider-thumb); cursor: pointer; }
select { background: #2a1010; color: var(--text); border: 1px solid var(--panel-border); border-radius: 3px; padding: 2px 4px; font-size: 11px; outline: none; }

.btn { background: var(--accent-dim); color: #fff; border: none; border-radius: 4px; padding: 6px 16px; font-size: 12px; font-weight: 600; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; }
.btn:hover { background: var(--accent); color: #000; }
.btn:disabled { background: #333; color: #666; }
.btn-small { padding: 3px 8px; font-size: 10px; }
.btn-play { background: #228822; }
.btn-play:hover { background: #44cc44; }
.btn-play.active { background: #ff4444; }

/* Transport */
.transport { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; padding: 8px 16px; background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 8px; }

/* Step sequencer grid */
.seq-grid { margin-bottom: 8px; overflow-x: auto; }
.seq-row { display: flex; align-items: center; gap: 2px; margin-bottom: 2px; }
.seq-label { width: 70px; font-size: 10px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; flex-shrink: 0; padding-right: 4px; text-align: right; cursor: pointer; }
.seq-label:hover { color: var(--accent); }
.seq-label.selected { color: var(--accent-bright); }
/* The 808's step buttons are its signature: four colour groups across the
   bar (orange / amber / yellow / white) so you read the beat by colour
   before you read the labels. Group = which sixteenth of the bar. */
.seq-step {
  flex: 1 1 0;
  min-width: 26px;
  height: 34px;
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  /* Unlit = coloured plastic cap, not an empty hole: the 808's buttons are
     moulded in these colours and merely light up when a step is on. */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--step-color) 52%, #cfc6b4) 0%,
    color-mix(in srgb, var(--step-color) 38%, #b3a996) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 2px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: background 90ms ease, box-shadow 90ms ease;
  --step-color: var(--step-1);
}
/* Colour by position in the bar, TR-808 style */
.seq-step:nth-child(4n+1) { --step-color: var(--step-1); }
.seq-step:nth-child(4n+2) { --step-color: var(--step-2); margin-left: 5px; }
.seq-step:nth-child(4n+3) { --step-color: var(--step-3); }
.seq-step:nth-child(4n+4) { --step-color: var(--step-4); }

.seq-step:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 0 0 1px rgba(0,0,0,0.45); }
.seq-step.on {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--step-color) 100%, #fff 18%) 0%,
    var(--step-color) 55%,
    color-mix(in srgb, var(--step-color) 80%, #000 20%) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 10px color-mix(in srgb, var(--step-color) 55%, transparent);
}
.seq-step.current { outline: 2px solid rgba(30, 20, 10, 0.85); outline-offset: -2px; }

/* Instrument names sit on the panel like silkscreen, right-aligned into the grid. */
.seq-row > .seq-label,
.seq-row > span:first-child { letter-spacing: 0.1em; }
.seq-vol { width: 50px; height: 4px; margin-left: 4px; flex-shrink: 0; }

/* Channel editor */
.channel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }

/* Scope */
#scope { width: 100%; height: 80px; border-radius: 4px; background: #1a0a0a; }