/* sequencer-v2.css — SQ2 "Build a Groove" component styles.
   Codified tokens only (DESIGN-LANGUAGE.md): navy #0B1526 ground, orange
   #B93A03 the single accent (actions + active steps), gold #C9A45C
   hairline frames ONLY — never text, never a fill. Anton display,
   Oswald everything else. Everything is namespaced .sq2-; nothing leaks
   into the host page. Page scroll stays vertical: the step grid scrolls
   inside its own box (.sq2-scroll), per the site scroll law. */

.sq2 {
  --sq2-navy: #0B1526;
  --sq2-panel: #0E1A2E;
  --sq2-cell: #122239;
  --sq2-cell-edge: #1B3050;
  --sq2-ink: #FFFFFF;
  --sq2-muted: #B9C2CC;
  --sq2-orange: #B93A03;
  --sq2-orange-bright: #E8622C;
  --sq2-gold: #C9A45C;
  --sq2-frame: 1px solid rgba(201, 164, 92, .30);
  font-family: "Oswald", "Helvetica Neue", Arial, sans-serif;
  color: var(--sq2-ink);
  background: var(--sq2-navy);
  border: var(--sq2-frame);
  border-radius: 18px;
  padding: 16px;
  margin: 16px 0;
}
.sq2 *, .sq2 *::before, .sq2 *::after { box-sizing: border-box; }
.sq2 button { font-family: inherit; cursor: pointer; }
.sq2 button:focus-visible, .sq2 input:focus-visible {
  outline: 2px solid var(--sq2-orange-bright); outline-offset: 2px;
}

/* ---- header ---- */
.sq2-title {
  font-family: "Anton", "Oswald", sans-serif;
  font-size: 1.45rem; font-weight: 400; letter-spacing: .02em;
  text-transform: uppercase; margin: 0 0 4px; color: var(--sq2-ink);
}
.sq2-sub { color: var(--sq2-muted); font-size: .9rem; line-height: 1.45; margin: 0 0 12px; }

/* ---- transport ---- */
.sq2-transport { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 0 0 12px; }
.sq2-play {
  background: var(--sq2-orange); color: #fff; border: 1px solid var(--sq2-orange-bright);
  border-radius: 999px; padding: 0 26px; min-height: 48px; min-width: 128px;
  font-size: 1rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
@media (hover:hover) { .sq2-play:hover { filter: brightness(1.08); } }
.sq2-play:active { transform: scale(.97); }
.sq2-play.is-playing { background: transparent; color: var(--sq2-ink); border-color: var(--sq2-cell-edge); }
.sq2-tempo { display: flex; align-items: center; gap: 8px; flex: 1 1 190px; min-width: 180px; }
.sq2-rowlabel {
  color: var(--sq2-muted); font-size: .74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; white-space: nowrap;
}
.sq2-bpm { flex: 1; accent-color: var(--sq2-orange); min-height: 32px; }
.sq2-bpmval { font-size: .9rem; min-width: 62px; text-align: right; font-variant-numeric: tabular-nums; }
.sq2-swing { display: flex; align-items: center; gap: 6px; }
.sq2-chip {
  background: var(--sq2-cell); color: var(--sq2-muted); border: 1px solid var(--sq2-cell-edge);
  border-radius: 999px; padding: 0 13px; min-height: 36px; font-size: .84rem; letter-spacing: .04em;
}
.sq2-chip.is-on { background: var(--sq2-orange); border-color: var(--sq2-orange-bright); color: #fff; }

/* ---- preset cards ---- */
.sq2-presets { display: flex; gap: 8px; margin: 0 0 12px; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.sq2-preset {
  flex: 1 0 auto; text-align: left; background: var(--sq2-cell); color: var(--sq2-ink);
  border: 1px solid var(--sq2-cell-edge); border-radius: 12px; padding: 9px 14px; min-height: 52px;
}
.sq2-preset-name { display: block; font-size: .95rem; font-weight: 600; letter-spacing: .03em; white-space: nowrap; }
.sq2-preset-meta { display: block; color: var(--sq2-muted); font-size: .78rem; letter-spacing: .08em; margin-top: 1px; }
.sq2-preset.is-on { border-color: var(--sq2-orange-bright); box-shadow: inset 0 0 0 1px var(--sq2-orange-bright); }
.sq2-clear {
  flex: 0 0 auto; background: transparent; color: var(--sq2-muted);
  border: 1px solid var(--sq2-cell-edge); border-radius: 12px; padding: 0 16px; min-height: 52px; font-size: .9rem;
}

/* ---- step grid (scrolls inside its own box only) ---- */
.sq2-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; border-radius: 12px; }
.sq2-grid { display: grid; gap: 4px; min-width: 852px; } /* 92px label + 16 x 44px pads + gaps */
.sq2-beatnum {
  color: var(--sq2-muted); font-size: .74rem; letter-spacing: .1em;
  display: flex; align-items: flex-end; padding-left: 2px; height: 18px;
}
.sq2-beatnum.beat { color: var(--sq2-ink); font-weight: 600; }
.sq2-lanelabel {
  position: sticky; left: 0; z-index: 2; text-align: left;
  background: var(--sq2-panel); border: 1px solid var(--sq2-cell-edge); border-radius: 9px;
  padding: 5px 8px; min-height: 44px; color: var(--sq2-ink);
  display: flex; flex-direction: column; justify-content: center; gap: 0;
}
.sq2-lane-name { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; line-height: 1.15; }
.sq2-lane-sound {
  font-size: .68rem; color: var(--sq2-muted); letter-spacing: .04em; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 76px;
}
.sq2-lanelabel.is-open { border-color: var(--sq2-orange-bright); }
.sq2-step {
  background: var(--sq2-cell); border: 1px solid var(--sq2-cell-edge); border-radius: 9px;
  min-width: 44px; min-height: 44px; padding: 0; color: #fff;
  font-size: .72rem; font-weight: 600; letter-spacing: .02em;
}
.sq2-step.beat { border-color: rgba(201, 164, 92, .45); }
.sq2-step.on { background: var(--sq2-orange); border-color: var(--sq2-orange-bright); }
.sq2-step.now { box-shadow: inset 0 0 0 2px var(--sq2-gold); }
.sq2-step.on.now { box-shadow: inset 0 0 0 2px #fff; }
.sq2-step.sel { box-shadow: 0 0 0 2px var(--sq2-gold); }
.sq2-step.on.sel { box-shadow: 0 0 0 2px var(--sq2-gold), inset 0 0 0 2px rgba(255,255,255,.35); }
@media (hover:hover) { .sq2-step:not(.on):hover { border-color: rgba(201, 164, 92, .55); } }

/* ---- sound-picker tray + 808 note row ---- */
.sq2-tray, .sq2-noterow {
  margin-top: 10px; background: var(--sq2-panel); border: var(--sq2-frame);
  border-radius: 12px; padding: 10px 12px;
}
.sq2-tray-head, .sq2-noterow-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px;
}
.sq2-tray-title, .sq2-noterow-title { font-size: .86rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.sq2-tray-close, .sq2-noterow-clear {
  background: transparent; color: var(--sq2-muted); border: 1px solid var(--sq2-cell-edge);
  border-radius: 999px; padding: 0 12px; min-height: 32px; font-size: .8rem;
}
.sq2-tray-opts, .sq2-noterow-notes { display: flex; flex-wrap: wrap; gap: 8px; }
.sq2-opt {
  background: var(--sq2-cell); color: var(--sq2-ink); border: 1px solid var(--sq2-cell-edge);
  border-radius: 999px; padding: 0 16px; min-height: 42px; font-size: .9rem; letter-spacing: .03em;
}
.sq2-opt.is-on { background: var(--sq2-orange); border-color: var(--sq2-orange-bright); color: #fff; }
.sq2-note {
  background: var(--sq2-cell); color: var(--sq2-ink); border: 1px solid var(--sq2-cell-edge);
  border-radius: 9px; min-width: 44px; min-height: 42px; padding: 0 8px; font-size: .88rem; font-weight: 600;
}
.sq2-note.is-on { background: var(--sq2-orange); border-color: var(--sq2-orange-bright); color: #fff; }
.sq2-noterow-hint { color: var(--sq2-muted); font-size: .8rem; margin: 8px 0 0; }

/* ---- status + explainer ---- */
.sq2-status { color: var(--sq2-muted); font-size: .86rem; min-height: 1.25em; margin: 10px 0 0; }
.sq2-explainer { color: var(--sq2-muted); font-size: .86rem; line-height: 1.5; margin: 8px 0 0; }

/* glow while a step is playing, mirroring the v1 dwell behaviour */
.sq2:has(.sq2-step.now) .sq2-play { animation: sq2-glow 2.2s ease-in-out infinite; }
@keyframes sq2-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 98, 44, 0); }
  50% { box-shadow: 0 0 0 5px rgba(232, 98, 44, .22); }
}
@media (prefers-reduced-motion: reduce) {
  .sq2-play, .sq2-step, .sq2-chip, .sq2-opt, .sq2-note { transition: none !important; animation: none !important; }
}

/* loop export (WAV) — ported from sequencer v1 #16 */
.sq2-export { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0 4px; }
.sq2-export-btn, .sq2-export-link {
  font: inherit; font-size: 14px; padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--sq2-cell-edge); background: transparent; color: var(--sq2-ink);
  cursor: pointer; text-decoration: none; display: inline-block;
}
.sq2-export-btn { background: var(--sq2-orange); border-color: transparent; color: #fff; font-weight: 600; }
@media (hover:hover) { .sq2-export-btn:hover { filter: brightness(1.08); } .sq2-export-link:hover { border-color: var(--sq2-ink); } }
.sq2-export-btn:active { transform: scale(.97); }