/* Soundboard — light, friendly classroom theme (BLUEPRINT D22, e01s02).
 * Cream page, white cards, 3px ink outlines, pill buttons, sticker lifts.
 *
 * Section map — later stories edit ONLY their own marked section:
 *   tokens · fonts · base · header · account (s03) · layout (s04) · stage ·
 *   pads · edit-grid (s08) · panel · controls · style-picker (s09) ·
 *   recorder (s10/s11) · status · motion
 */

/* ==== tokens ==== */
:root {
  /* surfaces */
  --bg:        #FFF7EA;   /* warm cream page */
  --surface:   #FFFFFF;   /* panels, header */
  --surface-2: #FFF1D6;   /* inset areas (stage background, inputs) */
  --ink:       #1E2240;   /* text + outlines */
  --ink-2:     #4A4F75;   /* secondary text (>= 7:1 on --surface) */
  --ink-3:     #5A5F82;   /* hints (>= 4.5:1 on --surface and --surface-2) */
  --grid-line: #E7D9BD;   /* edit-mode grid cells */
  /* accents */
  --accent:    #5B6CFF;   /* primary buttons, focus */
  --ok:        #1FB57A;
  --warn:      #FFB020;
  --danger:    #F0434D;
  /* shape */
  --outline:   3px;       /* every pad, button, panel */
  --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-pill: 999px;
  --lift: 0 4px 0 var(--ink);          /* "sticker" shadow under pads/buttons */
  --lift-pressed: 0 1px 0 var(--ink);
  /* type */
  --font-ui:   "Fredoka", "Nunito", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;
}

/* ==== fonts ==== */
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/fredoka-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../fonts/nunito-latin-wght-normal.woff2") format("woff2");
}

/* pad fonts (e01s09) — only downloaded when a pad uses them; licences in fonts/README.md */
@font-face { font-family: "Baloo 2"; font-weight: 400 800; font-display: swap; src: url("../fonts/baloo2-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap; src: url("../fonts/atkinson-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-display: swap; src: url("../fonts/atkinson-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Bungee"; font-weight: 400; font-display: swap; src: url("../fonts/bungee-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Permanent Marker"; font-weight: 400; font-display: swap; src: url("../fonts/permanent-marker-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Press Start 2P"; font-weight: 400; font-display: swap; src: url("../fonts/press-start-2p-latin-400-normal.woff2") format("woff2"); }

/* ==== base ==== */
* { box-sizing: border-box; }
html, body { margin: 0; }

html, body { height: 100%; }
body.sb-page {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  overflow: hidden; /* the shell fits the screen; only the edit panel scrolls */
  -webkit-font-smoothing: antialiased;
}

/* every control gets a friendly, visible focus ring */
.sb-pad:focus-visible,
.sb-btn:focus-visible,
.swatch:focus-visible,
.sb-input:focus-visible,
.sb-num:focus-visible,
.sb-range:focus-visible,
.sb-check input:focus-visible,
.sb-pub__label input:focus-visible,
.sb-back:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* ==== header ==== */
.sb-top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 60px;
  padding: 0 12px 0 14px;
  background: var(--surface);
  border: var(--outline) solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: var(--lift);
}

.sb-brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.sb-back {
  font: 600 15px/1 var(--font-body);
  color: var(--ink-2);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  border: 2px solid transparent;
}
.sb-back:hover { color: var(--ink); border-color: var(--grid-line); background: var(--surface-2); }
.sb-brand__mark {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--warn);
  border: 2px solid var(--ink);
  display: inline-block;
  flex: 0 0 auto;
}
.sb-brand__name {
  font: 700 22px/1.1 var(--font-ui);
  letter-spacing: .01em;
  color: var(--ink);
  flex: 0 0 auto;
}
/* current board name; truncates before anything else in the header gives way */
.sb-title {
  font: 600 16px/1.2 var(--font-ui);
  color: var(--ink-2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb-brand__name + .sb-title::before { content: "\00b7  "; color: var(--ink-3); }

.sb-top__right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.sb-top .sb-btn { min-height: 44px; padding-top: 0; padding-bottom: 0; }
.sb-stop__icon { display: none; }
.sb-led {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--grid-line);
  border: 2px solid var(--ink);
  display: inline-block;
  flex: 0 0 auto;
}
.sb-led.on { background: var(--ok); }
.sb-led.is-live { animation: sb-breathe 1.4s ease-in-out infinite; }

/* ==== account ==== */
/* e01s03: one small control at the right of the header + an anchored popover */
.sb-account { position: relative; flex: 0 0 auto; display: flex; align-items: center; }
.sb-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; max-width: 180px;
  padding: 0 12px 0 6px;
  background: var(--surface);
  color: var(--ink);
  border: var(--outline) solid var(--ink);
  border-radius: var(--r-pill);
  box-shadow: var(--lift);
  font: 600 15px/1 var(--font-ui);
  cursor: pointer;
}
.sb-chip:active { transform: translateY(2px); box-shadow: var(--lift-pressed); }
.sb-chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.sb-chip__initial {
  flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  border: 2px solid var(--ink);
  font: 700 16px/1 var(--font-ui);
}
.sb-chip__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sb-popover {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 20;
  width: min(320px, calc(100vw - 32px));
  padding: 16px;
  background: var(--surface);
  border: var(--outline) solid var(--ink);
  border-radius: var(--r-md);
  box-shadow: var(--lift);
  font: 400 15px/1.45 var(--font-body);
  color: var(--ink);
}
.sb-popover__title { margin: 0; font: 600 17px/1.3 var(--font-ui); }
.sb-popover .sb-hint { margin: 4px 0 12px; }
.sb-popover__form .sb-btn { width: 100%; justify-content: center; }
.sb-popover__err { margin: 0 0 10px; min-height: 0; color: var(--danger); font-weight: 700; }
.sb-popover__err:empty { display: none; }
.sb-popover__foot { margin: 12px 0 0; font-size: 14px; color: var(--ink-2); }
.sb-popover__foot a { color: var(--accent); font-weight: 700; }

@media (max-width: 600px) {
  .sb-chip { padding: 0 6px; }
  .sb-chip__name { display: none; }
}

/* ==== layout ==== */
/* e01s04: the whole app is one screen-high column — header, workspace, status —
 * and the page itself never scrolls. The workspace holds the stage (as big as fits)
 * and, in edit mode, the panel: a right-hand column in landscape, a bottom sheet
 * (peek / half / full) in portrait or on narrow screens. */
#sb-app.sb {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 1600px;
  margin: 0 auto;
  padding:
    max(12px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}

.sb-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sb-stage-wrap {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  container-type: size;
  display: grid;
  place-items: center;
}

/* edit panel wrapper (the scrolling content inside is #sb-rack) */
.sb-sheet {
  flex: 0 0 45%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--outline) solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: var(--lift);
  overflow: hidden;
}
.sb[data-sheet="peek"] .sb-sheet { flex-basis: 64px; }
.sb[data-sheet="full"] .sb-sheet { flex-basis: 85%; }
.sb.is-play .sb-sheet { display: none; }

.sb-sheet__grab {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 0;
  border-bottom: 2px solid var(--grid-line);
  background: transparent;
  color: var(--ink);
  font: 600 15px/1.2 var(--font-ui);
  text-align: left;
  cursor: grab;
  touch-action: none; /* the grab bar is dragged; don't scroll the page */
}
.sb-sheet__grab:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.sb-sheet__bar {
  flex: 0 0 auto;
  width: 44px; height: 6px;
  border-radius: var(--r-pill);
  background: var(--grid-line);
  box-shadow: inset 0 0 0 2px var(--ink-3);
}
.sb-sheet__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* landscape with room: panel becomes a right-hand column, no grab bar */
@media (min-aspect-ratio: 1/1) and (min-width: 900px) {
  .sb-main { flex-direction: row; }
  .sb-sheet,
  .sb[data-sheet] .sb-sheet { flex: 0 0 360px; height: 100%; }
  .sb-sheet__grab { display: none; }
}

/* small screens: tighter header; icon-only back link, STOP and mode labels */
@media (max-width: 600px) {
  #sb-app.sb { gap: 10px; }
  .sb-top { height: 52px; padding: 0 8px 0 10px; gap: 8px; }
  .sb-top__right { gap: 8px; }
  .sb-wide { display: none; }
  .sb-brand__name { display: none; }
  .sb-brand__mark { display: none; }
  .sb-title::before, .sb-brand__name + .sb-title::before { content: none; }
  .sb-back { padding: 8px 6px; }
}
@media (max-width: 400px) {
  .sb-stop__icon { display: inline; }
  .sb-stop__txt { display: none; }
  .sb-led { display: none; }
}

/* ==== stage ==== */
.sb-stage {
  display: grid;
  grid-template-columns: repeat(var(--cols, 9), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows, 6), minmax(0, 1fr));
  gap: clamp(6px, 1.2cqmin, 14px);
  /* as large as the wrap allows while keeping the grid's cols:rows shape */
  width: min(100cqw, 100cqh * var(--cols, 9) / var(--rows, 6));
  height: min(100cqh, 100cqw * var(--rows, 6) / var(--cols, 9));
  padding: clamp(8px, 1.6cqmin, 16px);
  background: var(--surface-2);
  border: var(--outline) solid var(--ink);
  border-radius: var(--r-lg);
}

.sb-empty {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  font: 600 15px/1.5 var(--font-ui);
  text-align: center;
  padding: 20px;
}

/* ==== pads ==== */
/*
 * Note for s08 (ui-stage.js): the pad colour reaches CSS today only as
 * --pad-rest/--pad-live/--pad-glow rgba() strings (alpha .18/.85/.55). The
 * fill below therefore uses --pad-live, the strongest available. If ui-stage
 * also sets `--pad-color: <full hex>`, swap the fill to that for full strength.
 */
.sb-pad {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: var(--outline) solid var(--ink);
  border-radius: var(--r-md);
  background: var(--pad-color, var(--pad-live, var(--warn)));
  color: var(--ink);
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--lift);
  transition: transform .06s ease, box-shadow .06s ease;
  -webkit-tap-highlight-color: transparent;
}

.sb-pad:hover { filter: brightness(1.03); }

.sb-pad:active,
.sb-pad.is-live {
  transform: translateY(3px);
  box-shadow: var(--lift-pressed), inset 0 0 0 3px #fff;
}

.sb-pad.is-selected {
  outline: 4px dashed var(--accent);
  outline-offset: 4px;
}

/* dead pad = has a sound reference but no loaded clip */
.sb-pad.is-dead {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(30, 34, 64, .14) 0 10px,
    rgba(30, 34, 64, 0) 10px 20px
  );
}
.sb-pad.is-dead .sb-pad__snd { color: var(--danger); font-weight: 700; }

.sb-pad__led {
  position: absolute; top: 8px; left: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(30, 34, 64, .35);
  border: 2px solid var(--ink);
}
.sb-pad.is-live .sb-pad__led { background: var(--ok); border-color: #fff; }

.sb-pad__emoji { font-size: clamp(14px, 26cqmin, 48px); line-height: 1; }
.sb-pad__label {
  font: 700 clamp(12px, 22cqmin, 64px)/1.1 var(--pad-font, var(--font-ui));
  color: inherit;
  max-width: 92%;
  text-align: center;
  overflow-wrap: anywhere;
  /* long labels wrap to 3 lines, then ellipsis */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.sb-pad__snd {
  font: 600 11px/1.2 var(--font-body);
  color: var(--ink-2);
  max-width: 92%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==== edit-grid ==== */
/* e01s08: visible cells, selection frame with 8 resize handles, snapping ghost.
 * Stacking: cells (DOM first) < pads < frame < ghost. */
.sb-stage.is-editing { touch-action: none; }
.sb-stage.is-editing .sb-pad { touch-action: none; cursor: grab; z-index: 1; }
.sb-stage.is-editing .sb-pad.is-selected { outline: none; }
.sb-stage.is-dragging,
.sb-stage.is-dragging .sb-pad { cursor: grabbing; }

.sb-cell {
  appearance: none;
  min-width: 0; min-height: 0;
  margin: 0; padding: 0;
  background: transparent;
  border: 2px dashed var(--grid-line);
  border-radius: var(--r-sm);
  color: var(--ink-3);
  font: 700 20px/1 var(--font-ui);
  pointer-events: none;
}
.sb-cell.is-free { pointer-events: auto; cursor: copy; }
.sb-cell.is-free:hover,
.sb-cell.is-free:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  outline: none;
}
.sb-cell.is-free:hover::after,
.sb-cell.is-free:focus-visible::after { content: "+"; }

.sb-frame {
  position: relative;
  z-index: 2;
  margin: -7px;
  border: 4px solid var(--accent);
  border-radius: calc(var(--r-md) + 6px);
  pointer-events: none;
}
.sb-handle {
  position: absolute;
  width: 18px; height: 18px;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 50%;
  pointer-events: auto;
  touch-action: none;
}
/* 44px invisible touch target around each 18px handle */
.sb-handle::before { content: ""; position: absolute; inset: -16px; border-radius: 50%; }
.sb-handle--nw { top: 0;    left: 0;    cursor: nwse-resize; }
.sb-handle--n  { top: 0;    left: 50%;  cursor: ns-resize; }
.sb-handle--ne { top: 0;    left: 100%; cursor: nesw-resize; }
.sb-handle--e  { top: 50%;  left: 100%; cursor: ew-resize; }
.sb-handle--se { top: 100%; left: 100%; cursor: nwse-resize; }
.sb-handle--s  { top: 100%; left: 50%;  cursor: ns-resize; }
.sb-handle--sw { top: 100%; left: 0;    cursor: nesw-resize; }
.sb-handle--w  { top: 50%;  left: 0;    cursor: ew-resize; }

.sb-ghost {
  position: relative;
  z-index: 3;
  pointer-events: none;
  border: 4px dashed var(--ok);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--ok) 20%, transparent);
}
.sb-ghost.is-bad {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 20%, transparent);
}
.sb-stage.is-dragging:has(.sb-ghost.is-bad) { cursor: not-allowed; }

.sb-pad.is-reject { animation: sb-shake .32s ease-in-out; }
@keyframes sb-shake {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* grid-size steppers in the Board section */
.sb-steppers { gap: 14px; flex-wrap: wrap; }
.sb-stepper { display: flex; align-items: center; gap: 6px; }
.sb-stepper__label { font: 600 13px/1 var(--font-ui); color: var(--ink-2); margin-right: 2px; }
.sb-stepper__btn { min-width: 44px; justify-content: center; padding-left: 0; padding-right: 0; }
.sb-stepper__val { min-width: 2.2ch; text-align: center; font: 700 17px/1 var(--font-ui); }

/* ==== panel ==== */
.sb-rack {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sb-sec {
  background: var(--surface-2);
  border: var(--outline) solid var(--ink);
  border-radius: var(--r-md);
  padding: 14px;
}
.sb-sec > h3 {
  margin: 0 0 12px;
  font: 600 15px/1.2 var(--font-ui);
  color: var(--ink);
}

.sb-hint { margin: 10px 0 0; font: 400 13px/1.5 var(--font-body); color: var(--ink-3); }

.sb-block { margin: 0 0 12px; padding-bottom: 12px; border-bottom: 2px solid var(--grid-line); }
.sb-block:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.sb-subhead {
  font: 600 12px/1.2 var(--font-ui);
  color: var(--ink-3);
  margin: 0 0 8px;
}

.sb-field { margin: 0 0 10px; }
.sb-field--sm label { font-size: 11px; }
.sb-field--sm .sb-num { min-height: 40px; font-size: 15px; }

/* public toggle wrapper (s03 territory, base styling here) */
.sb-pub { margin-top: 4px; }
.sb-field label {
  display: block;
  font: 600 12px/1.2 var(--font-ui);
  color: var(--ink-2);
  margin-bottom: 5px;
}

.sb-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sb-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

.sb-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 8px; }
.sb-check {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 14px/1 var(--font-body); color: var(--ink);
  cursor: pointer; margin: 4px 0 10px;
}
.sb-check input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }

/* swatches */
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch {
  width: 28px; height: 28px;
  border-radius: 9px;
  border: 2px solid var(--ink);
  cursor: pointer;
  transition: transform .08s ease;
}
.swatch:hover { transform: translateY(-2px); }
.swatch.is-active { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }

/* current sound */
.sb-snd-cur { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sb-snd-name {
  font: 700 13px/1.2 var(--font-body);
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 8px 10px;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* faders */
.sb-fxwrap { display: flex; flex-direction: column; }
.sb-fx { margin: 0 0 10px; }
.sb-fx__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sb-fx__label { font: 600 12px/1.2 var(--font-ui); color: var(--ink-2); }
.sb-fx__val { font: 700 12px/1 var(--font-body); color: var(--ink); }
.sb-fxblock { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 2px dashed var(--grid-line); }
.sb-fxblock:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
/* e01s06: per-effect on/off pill switch */
.sb-fxblock__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.sb-fxblock__head .sb-fx__label { font: 600 14px/1.2 var(--font-ui); color: var(--ink); }
.sb-switch {
  min-width: 52px; min-height: 28px; padding: 2px 12px;
  border: 2px solid var(--grid-line); border-radius: 999px;
  background: var(--surface-2); color: var(--ink-3);
  font: 700 12px/1.4 var(--font-ui); cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.sb-switch.is-on { background: var(--accent); border-color: var(--accent); color: #000; }
.sb-switch:active { transform: translateY(1px); }
/* e01s06: effect off — dim the label, hide the sliders/select */
.sb-fxblock--off .sb-fx__label { color: var(--ink-3); }
.sb-fxblock--off .sb-fxblock__body, .sb-fxblock--off .sb-field { display: none; }
/* e01s06: reset effects button */
.sb-fxreset { margin-top: 4px; }

/* library */
.sb-lib { display: flex; flex-direction: column; gap: 8px; }
.lib-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--surface);
  transition: border-color .12s ease, background .12s ease;
}
.lib-item:hover { background: var(--surface-2); }
.lib-item__meta { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.lib-item__name { font: 700 13px/1.2 var(--font-body); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-item__size { font: 600 11px/1 var(--font-body); color: var(--ink-3); }
.lib-item .sb-btn { min-height: 0; padding: 8px 12px; font-size: 13px; }

/* boards list */
.sb-boards { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; max-height: 220px; overflow-y: auto; }
.board-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 12px;
}
.board-item__name { font: 700 13px/1.4 var(--font-body); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-item .sb-btn { flex: 0 0 auto; min-height: 0; padding: 8px 12px; font-size: 13px; }
.board-item.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, #fff);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
}

/* public toggle + share link */
.sb-pub__label {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; font: 600 13px/1.5 var(--font-body); color: var(--ink);
}
.sb-pub__label input[type=checkbox] { flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.sb-share { flex: 1 1 auto; min-width: 0; font-size: 13px; }

/* scrollbars (panel + boards list) */
.sb-rack, .sb-boards { scrollbar-width: thin; scrollbar-color: var(--grid-line) transparent; }
.sb-rack::-webkit-scrollbar, .sb-boards::-webkit-scrollbar { width: 10px; }
.sb-rack::-webkit-scrollbar-thumb, .sb-boards::-webkit-scrollbar-thumb { background: var(--grid-line); border-radius: 8px; }
.sb-rack::-webkit-scrollbar-track, .sb-boards::-webkit-scrollbar-track { background: transparent; }

/* ==== controls ==== */
/* buttons: pill, 3px ink outline, sticker lift, min 44px */
.sb-btn {
  font: 600 15px/1.2 var(--font-ui);
  color: var(--ink);
  background: var(--surface);
  border: var(--outline) solid var(--ink);
  border-radius: var(--r-pill);
  padding: 10px 18px;
  min-height: 44px;
  cursor: pointer;
  box-shadow: var(--lift);
  white-space: nowrap;
  transition: transform .06s ease, box-shadow .06s ease, background .12s ease, color .12s ease;
}
.sb-btn:hover { filter: brightness(.97); }
.sb-btn:active {
  transform: translateY(3px);
  box-shadow: var(--lift-pressed);
}
.sb-btn:disabled { opacity: .45; cursor: default; box-shadow: var(--lift); }

/* primary = accent fill + black text ("Save edits"; black for 5.03:1 on accent) */
.sb-btn--primary {
  background: var(--accent);
  color: #000;
  box-shadow: var(--lift), 0 0 0 2px var(--surface), 0 0 0 5px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* public board: mode button hidden entirely (not just disabled) */
.sb-btn.is-hidden { display: none; }

/* warn = amber fill + ink text (Reset board, Clear) */
.sb-btn--warn {
  background: var(--warn);
  color: var(--ink);
}

/* danger = red fill + black text (Delete pad, STOP; black for 5.6:1) */
.sb-btn--danger,
#sb-stop {
  background: var(--danger);
  color: #000;
}

/* inputs */
.sb-input,
input[type="number"].sb-num {
  width: 100%;
  background: var(--surface-2);
  border: var(--outline) solid var(--ink);
  border-radius: var(--r-sm);
  min-height: 44px;
  padding: 8px 12px;
  font: 600 16px/1.2 var(--font-body);
  color: var(--ink);
}
.sb-input::placeholder { color: var(--ink-3); }

select.sb-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* range sliders: thick rounded track, big round thumb */
input[type="range"].sb-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  background: transparent;
  cursor: pointer;
  margin: 2px 0;
}
input[type="range"].sb-range::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 999px;
  background: var(--grid-line);
  border: 2px solid var(--ink);
}
input[type="range"].sb-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px; height: 28px;
  margin-top: -12px;
  border-radius: 50%;
  background: var(--accent);
  border: var(--outline) solid var(--ink);
  box-shadow: 0 2px 0 var(--ink);
}
input[type="range"].sb-range::-moz-range-track {
  height: 10px;
  border-radius: 999px;
  background: var(--grid-line);
  border: 2px solid var(--ink);
}
input[type="range"].sb-range::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  border: var(--outline) solid var(--ink);
  box-shadow: 0 2px 0 var(--ink);
}

/* ==== style-picker ==== */
/* e01s09: per-pad text style on the pad, and the inline controls in the panel. */
.sb-pad { container-type: size; color: var(--pad-fg, var(--ink)); }
.sb-pad__snd { color: inherit; opacity: .8; }
.sb-pad[data-bold="false"] .sb-pad__label { font-weight: 400; }
.sb-pad[data-caps="true"] .sb-pad__label { text-transform: uppercase; }
.sb-pad[data-size="s"]  .sb-pad__label { font-size: min(14px, 40cqmin); }
.sb-pad[data-size="m"]  .sb-pad__label { font-size: min(18px, 40cqmin); }
.sb-pad[data-size="l"]  .sb-pad__label { font-size: min(26px, 40cqmin); }
.sb-pad[data-size="xl"] .sb-pad__label { font-size: min(36px, 40cqmin); }

.sb-style__field { margin-bottom: 12px; }
.sb-style__label { display: block; margin-bottom: 6px; }
.sb-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-swatch {
  appearance: none;
  position: relative;
  padding: 0;
  background: var(--sw);
  border: var(--outline) solid var(--ink);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.sb-swatch--lg { width: 36px; height: 36px; }
.sb-swatch--sm { width: 28px; height: 28px; border-radius: 9px; }
.sb-swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--accent); }
.sb-swatch[aria-pressed="true"]::after {
  content: "\2713";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font: 700 16px/1 var(--font-ui);
  color: var(--ink);
  text-shadow: 0 0 3px #fff, 0 0 3px #fff;
}
.sb-swatch:focus-visible, .sb-chip-btn:focus-visible, .sb-seg:focus-visible, .sb-more > summary:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 3px;
}

.sb-more { margin: 4px 0 12px; }
.sb-more > summary {
  cursor: pointer;
  font: 600 14px/1 var(--font-ui);
  color: var(--accent);
  padding: 10px 0;
  list-style-position: inside;
}
.sb-more[open] > summary { margin-bottom: 6px; }
input[type="range"].sb-range.sb-range--hue::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, #f20d0d, #f2f20d, #0df20d, #0df2f2, #0d0df2, #f20df2, #f20d0d);
}
input[type="range"].sb-range.sb-range--hue::-moz-range-track {
  background: linear-gradient(90deg, #f20d0d, #f2f20d, #0df20d, #0df2f2, #0d0df2, #f20df2, #f20d0d);
}
input[type="range"].sb-range.sb-range--light::-webkit-slider-runnable-track { background: var(--track, var(--grid-line)); }
input[type="range"].sb-range.sb-range--light::-moz-range-track { background: var(--track, var(--grid-line)); }
.sb-hex { max-width: 140px; font-family: ui-monospace, Menlo, monospace; text-transform: uppercase; }

.sb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-chip-btn {
  appearance: none;
  min-height: 40px;
  padding: 0 14px;
  background: var(--surface);
  color: var(--ink);
  border: var(--outline) solid var(--ink);
  border-radius: var(--r-pill);
  font: 600 15px/1 var(--font-ui);
  cursor: pointer;
}
.sb-chip-btn[aria-pressed="true"] { background: var(--accent); color: #fff; }
.sb-font-chip { font-size: 16px; }
.sb-toggle-bold { font-weight: 800; min-width: 44px; }
.sb-toggle-caps { letter-spacing: .04em; min-width: 52px; }

.sb-segmented {
  display: inline-flex;
  border: var(--outline) solid var(--ink);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.sb-seg {
  appearance: none;
  min-width: 44px; min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-left: 2px solid var(--ink);
  background: var(--surface);
  color: var(--ink);
  font: 600 15px/1 var(--font-ui);
  cursor: pointer;
}
.sb-seg:first-child { border-left: 0; }
.sb-seg[aria-pressed="true"] { background: var(--accent); color: #fff; }
.sb-style__row { align-items: flex-start; flex-wrap: wrap; justify-content: flex-start; gap: 16px; }

.sb-lcd__action {
  appearance: none;
  border: 0; padding: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* ==== recorder ==== */
/* e01s10: inline recorder (replaces the Sound block / Library in place). */
.sb-btn--rec { color: var(--danger); }
.sb-rec { display: flex; flex-direction: column; gap: 12px; }
.sb-rec__stage { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 6px 0; }
.sb-rec__ringwrap { position: relative; width: 120px; height: 120px; display: grid; place-items: center; }
.sb-rec__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.sb-rec__ring-track { fill: none; stroke: var(--grid-line); stroke-width: 8; }
.sb-rec__ring-arc { fill: none; stroke: var(--danger); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset .05s linear; }
.sb-rec__big {
  position: relative;
  width: 76px; height: 76px;
  border-radius: 50%;
  border: var(--outline) solid var(--ink);
  background: var(--danger);
  box-shadow: var(--lift);
  display: grid; place-items: center;
  cursor: pointer;
}
.sb-rec__big:active { transform: translateY(3px); box-shadow: var(--lift-pressed); }
.sb-rec__big:disabled { opacity: .5; cursor: default; }
.sb-rec__big:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.sb-rec__dot { width: 26px; height: 26px; border-radius: 50%; background: #fff; }
.sb-rec__square { width: 24px; height: 24px; border-radius: 5px; background: #fff; }
.sb-rec__count { font: 700 64px/120px var(--font-ui); height: 120px; color: var(--danger); }
.sb-rec__meter {
  width: min(100%, 260px); height: 14px;
  border: 2px solid var(--ink); border-radius: var(--r-pill);
  background: var(--surface); overflow: hidden;
}
.sb-rec__meter-fill {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--ok) 0 60%, var(--warn) 60% 85%, var(--danger) 85%);
  background-size: 260px 100%;
  transition: width .05s linear;
}
.sb-rec__status { margin: 0; text-align: center; font: 600 15px/1.4 var(--font-body); color: var(--ink-2); }
.sb-rec__status.is-error { color: var(--danger); }
.sb-rec__secs { font: 700 18px/1 var(--font-ui); color: var(--danger); }
.sb-rec__wave {
  --wave: var(--accent);
  display: block; width: 100%; height: 120px;
  background: var(--surface);
  border: var(--outline) solid var(--ink);
  border-radius: var(--r-sm);
}
.sb-rec__actions { justify-content: flex-start; flex-wrap: wrap; }

/* e01s11: trim editor — handles sit over the waveform; outside the selection is shaded */
.sb-trim__wave { position: relative; touch-action: none; }
.sb-trim__wave .sb-rec__wave { margin: 0; }
.sb-trim__shade {
  position: absolute; top: 3px; bottom: 3px;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
  pointer-events: none;
}
.sb-trim__shade--l { left: 3px; border-radius: calc(var(--r-sm) - 3px) 0 0 calc(var(--r-sm) - 3px); }
.sb-trim__shade--r { right: 3px; border-radius: 0 calc(var(--r-sm) - 3px) calc(var(--r-sm) - 3px) 0; }
.sb-trim__handle {
  position: absolute; top: -6px; bottom: -6px;
  width: 8px; margin-left: -4px;
  background: var(--danger);
  border: 2px solid var(--ink);
  border-radius: var(--r-pill);
  cursor: ew-resize;
  touch-action: none;
  z-index: 2;
}
.sb-trim__handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -18px; right: -18px; } /* 44px target */
.sb-trim__handle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sb-trim__playhead {
  display: none;
  position: absolute; top: 3px; bottom: 3px;
  width: 2px; margin-left: -1px;
  background: var(--ok);
  pointer-events: none;
  z-index: 1;
}
.sb-trim__info { margin: 0; font: 600 13px/1.3 var(--font-ui); color: var(--ink-2); text-align: center; }
.sb-trim__tool:disabled { opacity: .45; }

/* ==== status ==== */
.sb-lcd {
  flex: 0 0 auto;
  display: block;
  height: 32px;
  font: 700 14px/26px var(--font-body);
  color: var(--ink);
  background: var(--surface);
  border: var(--outline) solid var(--ink);
  border-radius: var(--r-pill);
  padding: 0 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb.is-play .sb-lcd:not(.is-error) { display: none; }
.sb-lcd.is-error {
  background: var(--danger);
  color: #000;
}

/* ==== motion ==== */
@keyframes sb-breathe {
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--ok) 30%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}