/* Craig Soundboard: your own sampler. The casing is the current person's
   color, the pads sit in a dark bed tinted by it, and everything you press
   travels: a hard edge under each key that shrinks when it goes down.
   Flat fills and hard edges only (no blur, gradients or glass), so the
   Android version can copy it one to one. */

:root {
  --board: #1F3FA8;                                                /* casing, set per person by app.js */
  --board-deep: color-mix(in srgb, var(--board) 60%, black);        /* edges of casing-colored keys */
  --bed: color-mix(in srgb, var(--board) 24%, #141318);             /* the recessed pad bed */
  --bed-edge: color-mix(in srgb, var(--bed) 55%, black);
  --ink: #1C1740;
  --paper: #FFFFFF;
  --chalk: #ECEAF2;
  --chalk-edge: #A9A5BA;
  --line: #D6D3E0;
  --muted: #57527A;
  --record: #D8261F;
  --led: #FFE58A;
  --font-display: "Anybody", "Arial Narrow", system-ui, sans-serif;
  --font-ui: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;
  --gutter: 16px;
  --max: 1040px;
  --toolbar-h: 76px;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  background: var(--board);
  transition: background-color 0.3s ease;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--board);
  color: #fff;
  font: 400 1rem/1.4 var(--font-ui);
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.3s ease;
}

button, input { font: inherit; color: inherit; }
/* Read by screen readers, not seen. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ── Header: nameplate, speaker grille, bank keys ───────────────────── */

.top {
  max-width: var(--max);
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 18px) var(--gutter) 0;
}

.title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.title-tools { flex: none; display: flex; align-items: center; gap: 8px; }

/* Settings: small and up in the corner, away from where thumbs play. */
.settings-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--bed);
  font-size: 1.3rem;
  line-height: 1;
}

h1 {
  margin: 0;
  font: 900 clamp(1.6rem, 8.4vw, 3.6rem)/1 var(--font-display);
  font-stretch: 78%;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Speaker grille: lights up column by column with the sound level. */
.grille {
  flex: none;
  display: grid;
  grid-template-rows: repeat(3, 6px);
  grid-auto-flow: column;
  grid-auto-columns: 6px;
  gap: 4px;
  padding: 8px 9px;
  border-radius: 9px;
  background: var(--bed);
}
.grille span {
  border-radius: 50%;
  background: rgb(255 255 255 / 0.14);
  transition: background-color 60ms;
}
.grille span.lit { background: var(--led); }

/* Bank keys, one per person, each in that person's color. The current
   board's key is latched down and lit. */
.people {
  display: flex;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0 0 6px;
}

.person {
  --c-edge: color-mix(in srgb, var(--c) 55%, black);
  flex: 1 1 0;
  max-width: 150px;
  min-width: min-content;   /* a name is never squeezed; if the row overflows, pads.js swaps in the menu */
  min-height: 48px;
  padding: 6px 8px;
  border: 0;
  border-radius: 12px;
  background: var(--c);
  box-shadow: 0 5px 0 var(--c-edge);
  font: 800 1.1rem/1 var(--font-display);
  font-stretch: 88%;
  white-space: nowrap;
  transition: transform 50ms, box-shadow 50ms;
}
.person-menu { position: relative; flex: 1 1 auto; max-width: 340px; }
.person-menu-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  max-width: none;
  padding: 6px 16px;
  text-align: left;
}
.person-menu-btn > :first-child { overflow: hidden; text-overflow: ellipsis; }
.person-list {
  position: absolute;
  z-index: 5;
  top: calc(100% - 2px);
  left: 0;
  right: 0;
  display: grid;
  gap: 6px;
  max-height: min(60dvh, 420px);
  margin: 0;
  padding: 8px;
  overflow-y: auto;
  border-radius: 14px;
  background: var(--bed);
  box-shadow: 0 6px 0 var(--bed-edge);
  list-style: none;
}
.person-item {
  width: 100%;
  min-height: 48px;
  padding: 6px 14px;
  border: 0;
  border-radius: 10px;
  background: var(--c);
  color: #fff;
  font: 800 1.1rem/1 var(--font-display);
  font-stretch: 88%;
  text-align: left;
}
.person-item[aria-current="true"] { outline: 3px solid #fff; outline-offset: -3px; }
.person-item[aria-current="true"]::after { content: " ✓"; }
.person:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--c-edge); }
.person[aria-current="true"] {
  background: var(--chalk);
  color: var(--ink);
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--chalk-edge);
}

/* ── Pad bed ────────────────────────────────────────────────────────── */

main {
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px var(--gutter) calc(var(--toolbar-h) + env(safe-area-inset-bottom) + 24px);
}

.notice {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bed);
  max-width: 60ch;
}
.edit-hint { margin: 0 0 12px; font-weight: 700; max-width: 60ch; }

/* The version, small, in the bottom corner of the page. */
.version { margin: 18px 0 0; text-align: right; font-size: 0.75rem; opacity: 0.8; font-variant-numeric: tabular-nums; }

.pads {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 12px;
  padding: 14px 12px 18px;
  border-radius: 22px;
  background: var(--bed);
  box-shadow: inset 0 4px 0 var(--bed-edge);
}
@media (min-width: 560px) { .pads { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Section headings across the pad grid: the person's own sounds, then Kit. */
.pad-section {
  grid-column: 1 / -1;
  margin: 4px 2px -6px;
  font: 800 1.05rem/1.2 var(--font-display);
  letter-spacing: 0.02em;
  color: #fff;
}
.pad-section:not(:first-child) { margin-top: 14px; }
/* A kit group's header: full width, tappable, opens or closes the group. */
.pad-group {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: rgb(255 255 255 / 0.08);
  color: #fff;
  font: 800 1.05rem/1.2 var(--font-ui);
  text-align: left;
}
.pad-group[aria-expanded="true"] { background: rgb(255 255 255 / 0.14); }
.pad-group-caret { width: 1em; }
.pad-group-count { margin-left: auto; padding: 2px 10px; border-radius: 999px; background: rgb(255 255 255 / 0.15); font-size: 0.9rem; }
@media (min-width: 820px) {
  .pads { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 18px; padding: 22px 20px 26px; }
  .pads .pad { padding: 16px 16px 16px 18px; }
  .pad .pad-label { font-size: 1.65rem; }
  .pad .pad-emoji { font-size: 2.4rem; }
  .top .grille { grid-template-rows: repeat(3, 9px); grid-auto-columns: 9px; gap: 6px; padding: 11px 12px; border-radius: 12px; }
}

/* A pad: picture top left, key number top right, legend bottom left,
   voice bottom right. */
.pad {
  --pad: #FFD60A;
  --pad-edge: color-mix(in srgb, var(--pad) 55%, black);
  position: relative;
  display: grid;
  grid-template:
    "emoji key" auto
    ".     .  " 1fr
    "label voice" auto / 1fr auto;
  column-gap: 6px;
  aspect-ratio: 1 / 0.82;
  padding: 12px 12px 12px 14px;
  border: 0;
  border-radius: 14px;
  background: var(--pad);
  color: var(--ink);
  box-shadow: 0 6px 0 var(--pad-edge);
  text-align: left;
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: transform 50ms, box-shadow 50ms;
}

/* Playback fills the pad left to right. */
.pad::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(255 255 255 / 0.45);
  transform-origin: left;
  transform: scaleX(var(--progress, 0));
  pointer-events: none;
}

.pad:not(.pad-add):active,
.pad.hit {
  transform: translateY(5px);
  box-shadow: 0 1px 0 var(--pad-edge);
}

.pad-emoji {
  grid-area: emoji;
  position: relative;
  align-self: start;
  font-size: clamp(1.6rem, 6.4vw, 2.1rem);
  line-height: 1;
}
.pad-label {
  grid-area: label;
  position: relative;
  align-self: end;
  font: 800 clamp(1rem, 4.9vw, 1.4rem)/1.02 var(--font-display);
  font-stretch: 84%;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.pad-voice {
  grid-area: voice;
  position: relative;
  align-self: end;
  font-size: 1.3rem;
  line-height: 1;
}
.pad-key {
  grid-area: key;
  position: relative;
  display: none;
  font: 800 0.95rem/1 var(--font-display);
}
@media (hover: hover) and (pointer: fine) { .pad-key { display: block; } }

.pad-badge {
  grid-area: key;
  position: relative;
  align-self: start;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}

/* Held down and repeating: the pad stays pressed and its edge pulses. */
.pad.looping {
  transform: translateY(5px);
  box-shadow: 0 1px 0 var(--pad-edge), 0 0 0 4px #fff;
  animation: loop-pulse 0.5s ease-in-out infinite alternate;
}
@keyframes loop-pulse { to { box-shadow: 0 1px 0 var(--pad-edge), 0 0 0 7px rgb(255 255 255 / 0.5); } }

/* The empty slot at the end of the bed. */
.pad-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  color: #fff;
  box-shadow: none;
  border: 2px dashed rgb(255 255 255 / 0.4);
  text-align: center;
}
.pad-add .pad-emoji { align-self: center; font: 400 2.6rem/1 var(--font-ui); }
.pad-add .pad-label { align-self: center; font: 700 1rem/1.2 var(--font-ui); }
.pad-add:hover { border-color: rgb(255 255 255 / 0.8); }

.pad.broken {
  --pad-edge: #8E89A3;
  background: repeating-linear-gradient(135deg, #D9D6E3 0 12px, #C9C5D6 12px 24px);
}

/* Edit mode: pads wobble so it is obvious a tap edits instead of plays. */
body.editing .pad:not(.pad-add) { animation: wobble 0.34s ease-in-out infinite alternate; }
body.editing .pad:nth-child(even):not(.pad-add) { animation-delay: -0.17s; }
body.editing .pad.hidden-clip { opacity: 0.45; }
/* Tapped once in edit mode: held still and ringed, waiting for a swap. */
body.editing .pads .pad.selected {
  animation: none;
  outline: 4px solid #fff;
  outline-offset: 4px;
  scale: 1.04;
}

/* Dragging to reorder: the held pad lifts and follows the pointer. */
body.editing .pad:not(.pad-add) { cursor: grab; }
body.reordering, body.reordering .pad { cursor: grabbing; }
.pad.dragging {
  z-index: 2;
  animation: none !important;
  scale: 1.06;
  box-shadow: 0 14px 0 var(--pad-edge), 0 18px 30px rgb(0 0 0 / 0.35);
  pointer-events: none;
}
@keyframes wobble {
  from { transform: rotate(-1.2deg); }
  to { transform: rotate(1.2deg); }
}

/* ── Beat maker ─────────────────────────────────────────────────────── */

/* Same bed as the pads. Each row is a sound and its 16 pills (one bar),
   grouped four to a beat; on a phone the four beats wrap two and two. */
.seq {
  padding: 14px 12px 18px;
  border-radius: 22px;
  background: var(--bed);
  box-shadow: inset 0 4px 0 var(--bed-edge);
}

.seq-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 16px; }
.seq-play {
  min-height: 52px;
  min-width: 120px;
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  background: var(--led);
  color: var(--ink);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--led) 50%, black);
  font: 800 1.15rem/1 var(--font-ui);
  transition: transform 50ms, box-shadow 50ms;
}
.seq-play:active, .seq-play[aria-pressed="true"] { transform: translateY(4px); box-shadow: 0 1px 0 color-mix(in srgb, var(--led) 50%, black); }
.seq-lib {
  min-height: 52px;
  padding: 0 16px;
  border: 2px solid rgb(255 255 255 / 0.6);
  border-radius: 12px;
  background: transparent;
  color: #fff;
  font-weight: 800;
}
/* How many bars the beat is: 1, 2 or 4, as latching keys. */
.seq-barsel { display: inline-flex; border: 2px solid rgb(255 255 255 / 0.6); border-radius: 12px; overflow: hidden; }
.seq-barsel button { min-height: 48px; padding: 0 12px; border: 0; background: transparent; color: #fff; font-weight: 800; white-space: nowrap; }
.seq-barsel button[aria-pressed="true"] { background: var(--led); color: var(--ink); }
.seq-tempo { flex: 1 1 220px; display: grid; grid-template-columns: auto 1fr 5.5em; align-items: center; gap: 12px; font-weight: 800; }
.seq-tempo input { width: 100%; min-height: 44px; accent-color: var(--led); }
.seq-tempo output { text-align: right; font-variant-numeric: tabular-nums; }
.seq-empty { margin: 0 0 12px; font-weight: 700; }

.seq-rows { position: relative; display: grid; gap: 14px; }

/* The playhead bar, drawn over the rows at the step being played. */
.seq-playhead { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.seq-bar {
  position: absolute;
  width: 4px;
  margin-left: -2px;
  border-radius: 2px;
  background: #fff;
  /* The dark edge keeps it visible where it crosses the light sound pickers. */
  box-shadow: 0 0 0 1.5px var(--ink), 0 0 12px 2px rgb(255 255 255 / 0.45);
}
.seq-row { --pill: var(--led); display: grid; gap: 10px; justify-items: start; }
.seq-row .seq-steps { justify-self: stretch; }
@media (min-width: 720px) {
  /* Wide enough for the card beside the pills: one line per row. */
  .seq-row { grid-template-columns: auto 1fr; align-items: center; }
}

/* A small pad: the same look as on the board, at a size that fits a row or a
   chooser cell. Beats the board's wide-screen pad font sizes. */
.pad.pad-mini {
  aspect-ratio: 1;
  padding: 7px 7px 7px 8px;
  border-radius: 11px;
  box-shadow: 0 4px 0 var(--pad-edge);
  column-gap: 3px;
}
.pad.pad-mini .pad-emoji { font-size: 1.35rem; }
.pad.pad-mini .pad-label { font-size: 0.78rem; font-stretch: 75%; line-height: 1; overflow-wrap: normal; overflow: hidden; }
.pad.pad-mini .pad-voice { font-size: 0.95rem; }
.pad.pad-mini:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--pad-edge); }
.pad.pad-add.pad-mini { box-shadow: none; }
.pad.pad-add.pad-mini .pad-emoji { font-size: 1.6rem; }
.pad.pad-add.pad-mini .pad-label { font: 700 0.78rem/1.1 var(--font-ui); }
.seq-card { width: 88px; }  /* narrowest that fits "Craig Soundboard!" without clipping */

/* The row's head: its sound card, then its own controls (Ring, and the
   speed, pill count or BPM for the tempo mode chosen in Settings). Beside
   the card on every width; the whole head sits left of the pills on wide
   screens and above them on phones. */
.seq-head { display: flex; align-items: center; gap: 8px; }
.seq-tools { display: grid; gap: 6px; justify-items: start; }
.seq-tool {
  min-width: 44px;
  min-height: 40px;
  padding: 0 10px;
  border: 2px solid rgb(255 255 255 / 0.5);
  border-radius: 10px;
  background: transparent;
  color: #fff;
  font: 800 0.9rem/1 var(--font-ui);
  white-space: nowrap;
}
.seq-tool[aria-pressed="true"] { background: var(--led); border-color: var(--led); color: var(--ink); }
.seq-stepper { display: flex; align-items: center; gap: 4px; }
.seq-stepper .seq-tool { padding: 0; font-size: 1.1rem; }
.seq-stepper output { min-width: 4.6em; text-align: center; font: 800 0.85rem/1 var(--font-ui); font-variant-numeric: tabular-nums; }
/* A muted row keeps its pills, dimmed, so it's clear it is silent. */
.seq-row.muted .seq-steps, .seq-row.muted .seq-card { opacity: 0.4; }
/* Pills past a row's length (Pills tempo mode) are hidden, not just dimmed. */
.seq-beat[hidden], .pill[hidden] { display: none; }

/* One group per beat of the time signature. A group grows with its pill
   count (4 or 6) and needs ~30px a pill, so groups wrap onto more lines when
   the row is narrow: two 4-pill beats a line on a phone, all of 4/4 on one
   line when wide. */
/* Bars stack, one block each; in a block, beat groups wrap to fit. */
.seq-steps { display: grid; gap: 10px; }
.seq-measure { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.seq-measure[hidden] { display: none; }
.seq-measure + .seq-measure { padding-top: 10px; border-top: 2px dashed rgb(255 255 255 / 0.15); }
.seq-beat {
  --size: 4;
  flex: var(--size) 1 calc(var(--size) * 30px + 10px);
  display: grid;
  grid-template-columns: repeat(var(--size), minmax(0, 1fr));
  gap: 5px;
  padding: 5px;
  border-radius: 14px;
  background: rgb(255 255 255 / 0.06);
}
@media (max-width: 719px) { .seq-beat { flex-basis: calc(var(--size) * 36px + 10px); } }

/* Vertical pills: dim when off, the sound's pad color when on. The playhead
   lights the column being played; a lit pill that is on flashes white. */
.pill {
  height: 64px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.13);
  transition: background-color 60ms, transform 60ms;
}
.pill[aria-pressed="true"] { background: var(--pill); box-shadow: 0 3px 0 color-mix(in srgb, var(--pill) 55%, black); }
.pill.now { outline: 2px solid rgb(255 255 255 / 0.7); outline-offset: 1px; }
.pill.now[aria-pressed="true"] { background: #fff; transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--pill) 55%, black); }

.seq-add {
  margin-top: 16px;
  min-height: 48px;
  padding: 0 18px;
  border: 2px dashed rgb(255 255 255 / 0.5);
  border-radius: 12px;
  background: transparent;
  color: #fff;
  font-weight: 800;
}

/* ── Toolbar ────────────────────────────────────────────────────────── */

.toolbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 10;  /* above everything that scrolls under it: the playhead, a dragged pad */
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))) calc(14px + env(safe-area-inset-bottom));
  background: var(--board);
  box-shadow: 0 -2px 0 var(--board-deep);
  transition: background-color 0.3s ease;
}

.tool {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  background: var(--bed);
  color: #fff;
  box-shadow: 0 5px 0 var(--bed-edge);
  font-weight: 800;
  font-size: 1.05rem;
  white-space: nowrap;  /* a label on two lines reads as two buttons */
  transition: transform 50ms, box-shadow 50ms;
}
/* Three tools on a narrow phone: tighter padding and gaps so they fit on one line. */
@media (max-width: 420px) {
  .toolbar { gap: 8px; }
  .tool { padding: 0 12px; gap: 8px; font-size: 1rem; }
}
@media (max-width: 360px) {
  .toolbar { gap: 6px; padding-left: 10px; padding-right: 10px; }
  .tool { padding: 0 9px; gap: 6px; font-size: 0.92rem; }
}
.tool:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--bed-edge); }
.tool[aria-pressed="true"] {
  background: var(--chalk);
  color: var(--ink);
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--chalk-edge);
}

.tool-stop::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--record);
}

/* ── Sheet (new / edit sound) ───────────────────────────────────────── */

dialog#sheet, dialog#chooser, dialog#library, dialog#people-dialog, dialog#settings-dialog {
  width: min(560px, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: var(--paper);
  color: var(--ink);
}
dialog#sheet::backdrop, dialog#chooser::backdrop, dialog#library::backdrop, dialog#people-dialog::backdrop, dialog#settings-dialog::backdrop { background: rgb(20 19 24 / 0.62); }
dialog#sheet :focus-visible, dialog#chooser :focus-visible, dialog#library :focus-visible, dialog#people-dialog :focus-visible, dialog#settings-dialog :focus-visible { outline-color: var(--board); }

@media (max-width: 600px) {
  dialog#sheet, dialog#chooser, dialog#library, dialog#people-dialog, dialog#settings-dialog {
    width: 100%;
    max-width: 100%;
    margin: auto 0 0;
    border-radius: 24px 24px 0 0;
  }
}

#sheet-form, .chooser-body { padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); }

/* The chooser shows the board's sounds on a piece of the pad bed. */
.chooser-groups { display: grid; gap: 14px; margin-bottom: 16px; }
.chooser-group h3 {
  display: inline-block;
  margin: 0 0 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--c);
  color: #fff;
  font: 800 1rem/1.2 var(--font-display);
}
.chooser-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0 0 8px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--c);
  color: #fff;
  font: 800 1rem/1.2 var(--font-display);
}
.chooser-grid[hidden] { display: none; }
.chooser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 14px 10px;
  padding: 14px 12px 18px;
  border-radius: 18px;
  background: var(--bed);
}
.chooser-grid :focus-visible { outline-color: #fff; }
.chooser-grid .pad[aria-pressed="true"] { outline: 4px solid #fff; outline-offset: 3px; }
.chooser-grid .pad.pad-mini { padding: 10px 10px 10px 12px; }
.chooser-grid .pad.pad-mini .pad-emoji { font-size: 1.7rem; }
.chooser-grid .pad.pad-mini .pad-label { font-size: 1rem; }
#chooser-remove { margin-right: auto; }

/* People editor: name, a row of deep colors, hide/delete. */
.pe-list { display: grid; gap: 12px; margin: 0 0 16px; padding: 0; list-style: none; }
.pe-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 10px;
  padding: 12px;
  border-radius: 14px;
  background: var(--c);
  color: #fff;
}
.pe-row.pe-hidden { opacity: 0.55; }
.pe-name {
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: rgb(255 255 255 / 0.92);
  color: var(--ink);
  font: 800 1.1rem/1 var(--font-ui);
}
.pe-row .quiet { color: #fff; }
.pe-row .quiet:disabled { opacity: 0.4; cursor: not-allowed; }
.pe-row .danger.armed { background: #fff; color: #B3261E; }
/* Deleted boards.json people, to bring back. */
.pe-gone { margin-top: 20px; padding-top: 14px; border-top: 2px solid var(--line); }
.pe-gone h3 { margin: 0 0 8px; font: 800 1.05rem/1.2 var(--font-ui); }
.pe-gone-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pe-gone-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 4px 4px 14px; border-left: 8px solid var(--c); border-radius: 10px; background: var(--chalk); font-weight: 800; }
.pe-colors { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.pe-colors button {
  width: 44px;
  height: 44px;
  border: 2px solid rgb(255 255 255 / 0.85);
  border-radius: 50%;
  background: var(--sw);
}
.pe-colors button[aria-pressed="true"] { outline: 3px solid #fff; outline-offset: 2px; }

/* Settings: one block per topic, with the Beats choice as big radio cards. */
.set-note { min-height: 1.4em; margin: -6px 0 6px; font-weight: 700; }
.set-section { margin: 0 0 22px; padding: 0; border: 0; min-width: 0; }
.set-section h3, .set-section legend { margin: 0 0 4px; padding: 0; font: 800 1.15rem/1.2 var(--font-ui); }
.set-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-dark { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.chip-dark input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.chip-dark:focus-within { outline: 3px solid var(--board); outline-offset: 3px; }
.set-radio {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  margin: 0 0 8px;
  padding: 10px 12px;
  border: 2px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}
.set-radio input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--board); }
.set-radio:has(input:checked) { border-color: var(--board); background: var(--chalk); }
.set-radio:has(input:focus-visible) { outline: 3px solid var(--board); outline-offset: 2px; }
.set-about { margin: 0; }
.set-group { margin: 12px 0 0; padding: 0; border: 0; min-width: 0; }
.set-group legend { margin: 0 0 6px; padding: 0; font-weight: 800; }
.set-switch input { border-radius: 6px; }

/* Saved beats: a name field, then the library, newest first. */
.lib-save-row { display: flex; gap: 10px; }
.lib-save-row input { flex: 1; min-width: 0; }
.lib-save-row .primary { min-height: 52px; }
.lib-note { min-height: 1.4em; margin: 8px 0 4px; font-weight: 700; }
.lib-sound-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.lib-bars { display: inline-flex; border: 2px solid var(--line); border-radius: 12px; overflow: hidden; }
.lib-bars button { min-height: 44px; padding: 0 12px; border: 0; background: #fff; font-weight: 700; }
.lib-bars button[aria-pressed="true"] { background: var(--board); color: #fff; }
.chip-dark:disabled { opacity: 0.5; }
/* A button waiting for its second press ("Tap again"). */
.chip-dark.armed, #lib-new.armed { padding: 0 16px; border-radius: 12px; background: #B3261E; color: #fff; text-decoration: none; }
.lib-empty { margin: 8px 0 0; color: var(--muted); }
.lib-list { display: grid; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.lib-beat {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  background: var(--chalk);
}
.lib-beat.current { box-shadow: inset 0 0 0 3px var(--board); }
.lib-text { display: grid; min-width: 0; }
.lib-name { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-info { color: var(--muted); font-size: 0.9rem; }
.lib-thumb { display: grid; gap: 3px; padding: 6px; border-radius: 8px; background: var(--bed); }
.lib-thumb div { --pill: var(--led); display: grid; grid-template-columns: repeat(16, 4px); gap: 2px; }
.lib-thumb span { height: 6px; border-radius: 2px; background: rgb(255 255 255 / 0.15); }
.lib-thumb span.on { background: var(--pill); }
.chip-dark {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: var(--board);
  color: #fff;
  font-weight: 800;
}
@media (max-width: 420px) {
  .lib-beat { grid-template-columns: auto 1fr; }
  .lib-beat .chip-dark { justify-self: start; }
}

.sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.sheet-head h2 {
  margin: 4px 0 0;
  font: 900 1.75rem/1.02 var(--font-display);
  font-stretch: 80%;
  text-wrap: balance;
}

.close {
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: var(--chalk);
  font-size: 1.1rem;
}

/* The recorder: a piece of the pad bed, with a real REC button. */
.capture {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px;
  margin-bottom: 20px;
  border-radius: 18px;
  background: var(--bed);
  color: #fff;
}
dialog#sheet .capture :focus-visible { outline-color: #fff; }

.rec {
  --rec-edge: color-mix(in srgb, var(--record) 55%, black);
  flex: none;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  width: 96px;
  height: 96px;
  border: 0;
  border-radius: 50%;
  background: var(--record);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 6px 0 var(--rec-edge);
  transition: transform 50ms, box-shadow 50ms;
}
.rec:active, .rec[aria-pressed="true"] { transform: translateY(5px); box-shadow: 0 1px 0 var(--rec-edge); }
.rec-cap { width: 20px; height: 20px; border-radius: 50%; background: #fff; }
.rec[aria-pressed="true"] .rec-cap { border-radius: 4px; animation: blink 1s steps(2) infinite; }
.rec:disabled { background: #6E6A80; --rec-edge: #45424F; color: #E6E4EE; cursor: not-allowed; }
@keyframes blink { 50% { opacity: 0.3; } }

.capture-body { flex: 1; min-width: 0; }
.grille-lg { margin: 0 0 12px; padding: 0; background: none; grid-template-rows: repeat(3, 8px); grid-auto-columns: 8px; gap: 5px; }
.capture-status { margin: 0 0 12px; font-weight: 700; }

.capture-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 2px solid rgb(255 255 255 / 0.75);
  border-radius: 12px;
  background: transparent;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.chip:disabled { opacity: 0.45; cursor: default; }
.chip input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.chip:focus-within { outline: 3px solid #fff; outline-offset: 3px; }

.field { display: block; margin: 0 0 20px; padding: 0; border: 0; min-width: 0; }
.field-name { display: block; margin: 0 0 8px; padding: 0; font-weight: 800; font-size: 1.05rem; }
.field input {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font-size: 1.15rem;
}
.field input:focus-visible { outline: 3px solid var(--board); outline-offset: 0; border-color: transparent; }

.field-hint { margin: 0 0 10px; color: var(--muted); }

/* Voices: small keys that latch when chosen. */
.voices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 12px 8px;
}
.voices button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 6px 10px;
  border: 0;
  border-radius: 12px;
  background: var(--chalk);
  box-shadow: 0 4px 0 var(--line);
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1.1;
  text-align: left;
  transition: transform 50ms, box-shadow 50ms;
}
.voices button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.voices button[aria-pressed="true"] {
  background: var(--board);
  color: #fff;
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--board-deep);
}
.voices button:disabled { opacity: 0.45; cursor: default; }
.voice-emoji { font-size: 1.45rem; line-height: 1; }

/* The slider for voices with a setting (speed or pitch), under the voice keys. */
.amount {
  display: grid;
  grid-template-columns: auto 1fr minmax(7.5em, auto);
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--chalk);
  font-weight: 800;
}
.amount[hidden] { display: none; }
.amount input { width: 100%; min-height: 44px; accent-color: var(--board); }
.amount input:disabled { opacity: 0.45; }
.amount output { text-align: right; font-variant-numeric: tabular-nums; }

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 6px;
}
.emoji-grid button {
  aspect-ratio: 1;
  border: 0;
  border-radius: 10px;
  background: var(--chalk);
  font-size: 1.5rem;
}
.emoji-grid button[aria-pressed="true"] { background: #fff; box-shadow: inset 0 0 0 3px var(--board); }

/* Swatches are tiny pads in each color. */
.swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 10px; }
@media (min-width: 480px) { .swatches { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.swatches button {
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: var(--c);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--c) 55%, black);
  transition: transform 50ms, box-shadow 50ms;
}
.swatches button[aria-pressed="true"] {
  transform: translateY(3px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--c) 55%, black), 0 0 0 3px #fff, 0 0 0 6px var(--ink);
}

.sheet-error {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #FDE3E2;
  color: #8A1512;
  font-weight: 700;
}

.sheet-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.primary {
  min-height: 56px;
  padding: 0 28px;
  border: 0;
  border-radius: 14px;
  background: var(--board);
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  box-shadow: 0 5px 0 var(--board-deep);
  transition: transform 50ms, box-shadow 50ms;
}
.primary:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--board-deep); }
.quiet {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  background: none;
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#remove-btn { margin-right: auto; }
.danger { color: #B3261E; }
.danger.armed { padding: 0 16px; border-radius: 12px; background: #B3261E; color: #fff; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  /* Nothing moves on its own; presses still show by changing shape. */
  *, ::before, ::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  html, body, .toolbar { transition: none; }
  body.editing .pad:not(.pad-add) { animation: none; outline: 3px dashed rgb(255 255 255 / 0.8); outline-offset: 4px; }
  .rec[aria-pressed="true"] .rec-cap { animation: none; }
  .pad.looping { animation: none; }
}