/* ---- board ---- */
/* re:sound, the soundboard: a house panel holding a strip (lamp, title, master), the grid of
   36 pads laid out like the keyboard, the import row, the tray and the trimmer over it all.
   The pads are silver keys; a loaded pad is cream, a playing one yellow with its fill rising;
   an empty one is a dashed recess. Settings first; the widths only change settings. */
.bd-board {
  --bd-gap: var(--sp-4);
  --bd-cols: 3;                       /* the grid: three across on a phone (room for a pad's tools), six from 480, nine (the keyboard's rows) from 768 */
  --bd-pad-gap: var(--sp-2);
  --bd-pad-radius: 6px;
  --bd-lamp: 12px;
  --bd-fill-op: .35;
  --bd-range-w: 112px;
  --bd-range-h: 24px;                /* a slider is a 24px target at least (WCAG 2.2, 2.5.8) */
  --bd-blur: 8px;                    /* the board behind the trimmer, blurred */
  --bd-veil: 55%;                    /* how much of the dark glass lies over it */
  --bd-press: 1px;                   /* how far a pad goes down when pressed or playing */
  --bd-tool: 26px;                   /* a pad's tool buttons, in their own row at its foot */
  --bd-note-h: 20px;                 /* the import's note keeps its line even when empty */
  --bd-editor-w: 620px;
  --bd-wave-h: 120px;
  --bd-label-w: 72px;                /* the trimmer's labels column ("fade out" fits) */
  --bd-val-w: 72px;                  /* the trimmer's readouts column */
  display: grid; gap: var(--bd-gap); min-width: 0;
}
@media (min-width: 480px) { .bd-board { --bd-cols: 6; } }
@media (min-width: 768px) { .bd-board { --bd-cols: 9; } }

/* The strip: the lamp, the name, the tag, the master level on the right. */
.bd-strip { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding-bottom: var(--sp-3); border-bottom: var(--line); }
.bd-lamp { width: var(--bd-lamp); height: var(--bd-lamp); border-radius: 50%; background: var(--idle); border: var(--line); flex: none; transition: background var(--press); }
.bd-lamp[data-on] { background: var(--rec); }
.bd-title { font: var(--t-h4); margin: 0; }
.bd-pre { color: var(--sage-lo); }
.bd-tag { font: var(--t-ui-small); color: var(--muted); }
.bd-master { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.bd-label { font: var(--t-ui-small); color: var(--muted); }
.bd-lead { font: var(--t-body); margin: 0; color: var(--muted); }
.bd-range { width: var(--bd-range-w); height: var(--bd-range-h); accent-color: var(--sage-lo); }

/* The pads. */
.bd-grid { display: grid; grid-template-columns: repeat(var(--bd-cols), minmax(0, 1fr)); gap: var(--bd-pad-gap); }
.bd-pad {
  isolation: isolate;               /* its tools stay above its words, never above the trimmer */
  position: relative; aspect-ratio: 1 / 1; border-radius: var(--bd-pad-radius); overflow: hidden; cursor: pointer; user-select: none;
  background: var(--silver); border: var(--line); box-shadow: var(--bevel-silver), var(--drop-1);
  padding: var(--sp-1) var(--sp-2); display: flex; flex-direction: column; justify-content: space-between; text-align: left;
  transition: transform var(--press), box-shadow var(--press);
}
.bd-pad:focus-visible { outline: var(--line-w-thick) solid var(--ink); outline-offset: var(--sp-1); }
.bd-pad:hover:not(.bd-empty) { transform: translateY(var(--lift)); }
.bd-pad:active:not(.bd-empty), .bd-pad[data-state="playing"] { transform: translateY(var(--bd-press)); box-shadow: var(--bevel-silver-in), var(--drop-none); }
.bd-empty { background: var(--paper); border-style: dashed; box-shadow: none; cursor: default; }
.bd-pad[data-armed] { background: var(--leaf); border-style: solid; }
.bd-pad[data-state="playing"] { background: var(--yellow); box-shadow: var(--bevel-yellow), var(--drop-none); }
.bd-pad > span { position: relative; }
.bd-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-1); flex: none; }
/* The fill rises from the pad's foot as the clip plays; the tools sit in its corner. Both stand
   out of the flow (named with the pad, so they outrank the rule above that puts its words in it). */
.bd-pad > .bd-fill { position: absolute; left: 0; bottom: 0; width: 100%; height: 0; background: var(--sage); opacity: var(--bd-fill-op); pointer-events: none; }
.bd-key { font: var(--t-key); color: var(--muted); flex: none; }
.bd-pad[data-state="playing"] .bd-key, .bd-pad[data-state="playing"] .bd-dur { color: var(--ink); }
.bd-name { font: var(--t-ui-small); line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-word; }
.bd-empty .bd-name, .bd-empty .bd-dur { display: none; }
.bd-dur { font: var(--t-ui-small); color: var(--muted); flex: none; }
.bd-pad > .bd-tools { z-index: 2; display: flex; gap: var(--sp-1); flex: none; }
.bd-tool { width: var(--bd-tool); height: var(--bd-tool); padding: 0; font: var(--t-ui-small); line-height: 1; cursor: pointer; border: var(--line); border-radius: var(--bd-pad-radius); background: var(--paper); color: var(--ink); }
.bd-tool:hover, .bd-tool:focus-visible { background: var(--yellow); }
.bd-padname { width: 100%; font: var(--t-ui-small); padding: var(--sp-px) var(--sp-1); border: var(--line); border-radius: var(--bd-pad-radius); background: var(--paper); color: var(--ink); }
.bd-padname:focus { outline: none; border-color: var(--sage-lo); }

/* Live clips from the host's Space (re:sound's Clip, docs/live-clip-design.md): a tray above
   the pads, a row for each clip: its time and length, its shape, its line and who said it,
   then re:trim (it opens the trimmer, the clip loaded) or discard. */
.bd-live { --bd-peak-h: 20px; --bd-peak-bar: 2px; --bd-pick-w: 184px; --bd-play: 40px; display: grid; gap: var(--sp-2); padding: var(--sp-3); background: var(--card-fill); border: var(--line); border-radius: var(--bd-pad-radius); }
.bd-live[hidden] { display: none; }
.bd-live-h { font: var(--t-ui); margin: 0; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.bd-livetag { font: var(--t-key); padding: var(--sp-px) var(--sp-2); border-radius: var(--bd-pad-radius); background: var(--rec); color: var(--white); }
.bd-livecount { font: var(--t-ui-small); color: var(--muted); }
.bd-livelist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
/* A row: play | the line, then when + its shape | who said it, re:trim, discard. */
.bd-liverow { display: grid; grid-template-columns: var(--bd-play) minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-2) var(--sp-3); background: var(--paper); border: var(--line); border-radius: var(--bd-pad-radius); }
.bd-liverow[data-new] { border-color: var(--yellow); box-shadow: var(--bevel-yellow); }
.bd-liveplay { width: var(--bd-play); height: var(--bd-play); display: grid; place-items: center; padding: 0; font: var(--t-ui); color: var(--ink); background: var(--cream); border: var(--line); border-radius: 50%; cursor: pointer; }
.bd-liveplay:hover { background: var(--tan); }
.bd-liveplay[data-playing] { background: var(--yellow); }
.bd-liveplay-off { cursor: default; color: var(--muted); background: transparent; }
.bd-livemain { min-width: 0; display: grid; gap: var(--sp-1); }
.bd-livequote { font: var(--t-ui-medium); margin: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.bd-livemeta { margin: 0; display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.bd-livewhen { font: var(--t-ui-small); color: var(--muted); white-space: nowrap; }
.bd-peaks { display: flex; align-items: center; gap: var(--sp-px); height: var(--bd-peak-h); overflow: hidden; }
.bd-peaks i { display: block; flex: none; width: var(--bd-peak-bar); background: var(--sage-lo); border-radius: var(--sp-px); }
.bd-liveside { display: flex; align-items: center; gap: var(--sp-3); justify-content: flex-end; }
.bd-livecredit { font: var(--t-ui-small); color: var(--muted); margin: 0; display: flex; align-items: center; gap: var(--sp-2); }
.bd-livecredit select { width: var(--bd-pick-w); max-width: var(--bd-pick-w); }
.bd-liveacts { display: flex; align-items: center; gap: var(--sp-2); }
/* Narrow: play beside the line, the controls on a row of their own beneath. */
@media (max-width: 767px) {
  .bd-liverow { grid-template-columns: var(--bd-play) minmax(0, 1fr); }
  .bd-liveside { grid-column: 1 / -1; justify-content: space-between; flex-wrap: wrap; }
}

/* The music bed: a row of its own above the import row. */
.bd-bed { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3); background: var(--card-fill); border: var(--line); border-radius: var(--bd-pad-radius); }
.bd-bed[data-playing] { background: var(--yellow); box-shadow: var(--bevel-yellow); }
.bd-bed-l { display: inline-flex; align-items: center; gap: var(--sp-1); font: var(--t-ui); }
.bd-bed-n { font: var(--t-ui-small); flex: 1 1 160px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-bed-v { display: inline-flex; align-items: center; gap: var(--sp-2); }

/* The import row, its note, the tray and the notes. */
.bd-import { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; padding-top: var(--sp-3); border-top: var(--line); }
.bd-mine { flex: 1 1 200px; min-width: 0; }
.bd-url { flex: 2 1 260px; min-width: 0; }
.bd-importnote { font: var(--t-ui-small); color: var(--muted); margin: 0; min-height: var(--bd-note-h); }
.bd-importnote[data-bad] { color: var(--warn); }
.bd-tray { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; padding-top: var(--sp-3); border-top: var(--line); }
.bd-hint { margin-left: auto; font: var(--t-ui-small); color: var(--muted); }
.bd-note { font: var(--t-ui-small); color: var(--muted); margin: 0; max-width: 72ch; }
.bd-me { font: var(--t-ui-small); margin: 0; }
.bd-board[data-dragging] .bd-empty { background: var(--leaf); border-style: solid; }

/* The extension's row: a line, and the install steps as numbered cards, each with a drawing of
   what the host will see (Dan, 2026-10-22: "a user friendly visual layout"). One column on a
   phone, two from 768, four across from 1024. */
.bd-ext {
  --bd-step-cols: 1;
  --bd-num: 32px;
  --bd-art-h: 64px;
  --bd-round: 999px;
  --bd-toggle-w: 34px; --bd-toggle-h: 20px; --bd-knob: 12px;
  display: grid; gap: var(--sp-3); padding-top: var(--sp-3); border-top: var(--line);
}
@media (min-width: 768px) { .bd-ext { --bd-step-cols: 2; } }
@media (min-width: 1024px) { .bd-ext { --bd-step-cols: 4; } }
.bd-extline { font: var(--t-ui); margin: 0; }
.bd-extline[data-here] { color: var(--dusk); }   /* the house's dark green: 4.5:1 and more on paper */
.bd-summary { font: var(--t-ui); cursor: pointer; }
.bd-steps { list-style: none; margin: var(--sp-4) 0 var(--sp-3); padding: var(--sp-2) 0 0 var(--sp-2); display: grid; gap: var(--sp-5) var(--sp-4); grid-template-columns: repeat(var(--bd-step-cols), minmax(0, 1fr)); }
.bd-step { position: relative; display: grid; gap: var(--sp-2); align-content: start; padding: var(--sp-5) var(--sp-4) var(--sp-4); }
.bd-num { position: absolute; top: calc(var(--sp-3) * -1); left: calc(var(--sp-3) * -1); width: var(--bd-num); height: var(--bd-num); border-radius: 50%;
  display: grid; place-items: center; font: var(--t-ui); background: var(--yellow); border: var(--line); box-shadow: var(--bevel-yellow); }
.bd-art { min-height: var(--bd-art-h); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-2); background: var(--paper); border: var(--line); border-radius: var(--bd-pad-radius); }
.bd-step-h { font: var(--t-ui); margin: 0; }
.bd-step-p { font: var(--t-ui-small); color: var(--muted); margin: 0; }
/* the drawings: a file, Chrome's address bar, its Developer mode switch, its Load unpacked button, keys, the dock's tab */
.bd-chip { display: inline-flex; align-items: center; gap: var(--sp-1); font: var(--t-ui-small); padding: var(--sp-1) var(--sp-2); background: var(--white); border: var(--line); border-radius: var(--bd-pad-radius); }
.bd-load { background: var(--steel-hi); }
.bd-bar { font: var(--t-ui-small); font-family: var(--code); padding: var(--sp-1) var(--sp-3); background: var(--white); border: var(--line); border-radius: var(--bd-round); }
.bd-dev { display: inline-flex; align-items: center; gap: var(--sp-2); font: var(--t-ui-small); }
.bd-toggle { position: relative; width: var(--bd-toggle-w); height: var(--bd-toggle-h); border-radius: var(--bd-round); background: var(--sage); border: var(--line); }
.bd-toggle i { position: absolute; top: 50%; right: var(--sp-px); width: var(--bd-knob); height: var(--bd-knob); transform: translateY(-50%); border-radius: 50%; background: var(--white); border: var(--line); }
.bd-cap { font: var(--t-key); padding: var(--sp-1) var(--sp-2); background: var(--silver); border: var(--line); border-radius: var(--bd-pad-radius); box-shadow: var(--bevel-silver); }
.bd-plus { font: var(--t-ui); }
.bd-keys { display: inline-flex; align-items: center; gap: var(--sp-1); }
.bd-tabmini { display: inline-flex; align-items: center; gap: var(--sp-1); font: var(--t-ui-small); padding: var(--sp-1) var(--sp-2); background: var(--paper); border: var(--line); border-radius: var(--bd-pad-radius); }
.bd-copy { justify-self: start; }
.bd-step .bd-btn { justify-self: start; }

/* Sharing the board (re:sound shared, 2026-10-24): under the extension's row, the invites waiting,
   the boards shared with this account, and "Share re:sound with…": a handle and Invite, the list
   (each handle, how it stands, Remove), and "Share my board" with when it last did. A shared pad
   on a guest's board carries a small tag with the host's handle. */
.bd-share { --bd-handle-w: 220px; --bd-from-max: 100%; display: grid; gap: var(--sp-3); padding-top: var(--sp-3); border-top: var(--line); }
.bd-share[hidden], .bd-sharepart[hidden], .bd-invites[hidden] { display: none; }
.bd-sharepart { display: grid; gap: var(--sp-2); }
.bd-share-h { font: var(--t-ui); margin: 0; }
.bd-shareform { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin: 0; }
.bd-sharehandle { flex: 0 1 var(--bd-handle-w); min-width: 0; }
.bd-sharelist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.bd-sharelist:empty { display: none; }
.bd-sharerow { display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; padding: var(--sp-2) var(--sp-3); background: var(--paper); border: var(--line); border-radius: var(--bd-pad-radius); }
.bd-sharewho { font: var(--t-ui); min-width: 0; overflow-wrap: anywhere; }
.bd-sharestate { font: var(--t-key); padding: var(--sp-px) var(--sp-2); border-radius: var(--bd-pad-radius); background: var(--card-fill); border: var(--line); }
.bd-sharestate[data-status="active"] { background: var(--leaf); }
.bd-sharestate[data-status="waiting"] { background: var(--yellow); }
.bd-sharerow .bt-link { margin-left: auto; }
.bd-sharetext { font: var(--t-ui-small); margin: 0; flex: 1 1 260px; min-width: 0; }
.bd-sharepads { display: flex; gap: var(--sp-2) var(--sp-3); align-items: center; flex-wrap: wrap; }
.bd-sharewhen { font: var(--t-ui-small); color: var(--muted); }
.bd-invites { display: grid; gap: var(--sp-2); }
.bd-invite { display: grid; gap: var(--sp-2); padding: var(--sp-3); background: var(--card-fill); border: var(--line); border-radius: var(--bd-pad-radius); }
.bd-invite-tag { margin: 0; }
.bd-invite-h { font: var(--t-ui); margin: 0; }
.bd-invitecard .bd-invite { padding: 0; background: none; border: 0; }
.bd-invitecard .bd-invite-h { font: var(--t-h5); }
.bd-from { font: var(--t-ui-small); color: var(--dusk); max-width: var(--bd-from-max); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-pad[data-state="playing"] .bd-from { color: var(--ink); }

/* The trimmer, over the board. */
.bd-sheet { position: fixed; inset: 0; background: color-mix(in srgb, var(--glass) var(--bd-veil), transparent); backdrop-filter: blur(var(--bd-blur)); -webkit-backdrop-filter: blur(var(--bd-blur)); display: flex; align-items: center; justify-content: center; padding: var(--sp-4); z-index: calc(var(--z-skip) + 10); overflow: auto; }   /* above the pads, the deck and the menus */
.bd-editor { width: 100%; max-width: var(--bd-editor-w); padding: var(--sp-4); display: grid; gap: var(--sp-3); }
.bd-h { font: var(--t-h5); margin: 0; }
.bd-sub { font: var(--t-ui-small); color: var(--muted); margin: 0; }
.bd-wave { width: 100%; height: var(--bd-wave-h); display: block; background: var(--paper); border: var(--line); border-radius: var(--bd-pad-radius); }
.bd-field { display: grid; grid-template-columns: var(--bd-label-w) minmax(0, 1fr); align-items: center; gap: var(--sp-2); }
.bd-input { width: 100%; }
.bd-slider { display: grid; grid-template-columns: var(--bd-label-w) minmax(0, 1fr) var(--bd-val-w); align-items: center; gap: var(--sp-2); }
.bd-slider .bd-range { width: 100%; }
.bd-val { font: var(--t-ui-small); text-align: right; }
.bd-len { font: var(--t-ui-small); color: var(--muted); margin: 0; }
.bd-row { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.bd-check { display: flex; align-items: center; gap: var(--sp-1); font: var(--t-ui-small); color: var(--muted); cursor: pointer; }
.bd-check input { accent-color: var(--sage); }
.bd-spacer { margin-left: auto; }
.bd-working { font: var(--t-ui); color: var(--sage-lo); margin: 0; }
/* Out of Re:Cap credit, in place of the board (the approved design, 2026-10-23): the dash part's card,
   its words on the left, and on the right the robot standing behind the recorder, the recorder's
   display paused in the house's cyan. The tag is the pill part's, on tan as the design has it. */
.bd-paused {
  --bd-scene-h: 360px;
  --bd-bot-w: 190px;
  --bd-deck-w: 300px;
  --bd-deck-lift: -6px;              /* the recorder stands a little over the robot's feet */
  --bd-screen-at: 23.4%;             /* the recorder's display, where the art has it */
  --bd-screen-top: 54.5%;
  --bd-screen-w: 36.6%;
  --bd-screen-h: 33%;
  --bd-screen-bg: #071214;           /* the display's own black */
  --bd-screen-radius: 2px;
  --bd-screen-font: 400 11px/1 var(--pix);
  --bd-screen-track: 1px;
  --bd-screen-glow: 0 0 5px rgba(7, 250, 252, .7);
}
.bd-paused .pi-tag { background: var(--tan); color: var(--ink); box-shadow: inset 0 0 0 var(--line-w) var(--ink); }
.bd-scene { position: relative; display: grid; justify-items: center; align-content: end; min-height: var(--bd-scene-h); }
.bd-bot { position: relative; z-index: 1; width: var(--bd-bot-w); height: auto; image-rendering: pixelated; }
.bd-deck { position: relative; z-index: 2; display: block; width: var(--bd-deck-w); max-width: 100%; margin-top: var(--bd-deck-lift); }
.bd-vcr { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.bd-screen {
  position: absolute; left: var(--bd-screen-at); top: var(--bd-screen-top); width: var(--bd-screen-w); height: var(--bd-screen-h);
  display: grid; place-items: center; background: var(--bd-screen-bg); border-radius: var(--bd-screen-radius);
  color: var(--vfd); font: var(--bd-screen-font); letter-spacing: var(--bd-screen-track); text-shadow: var(--bd-screen-glow); white-space: nowrap;
}
@media (min-width: 1024px) { .bd-paused > .bd-scene { grid-column: 2; grid-row: 1; } }

/* On a phone there is no keyboard: a pad shows its name, not its key, and is pressed by hand. */
@media (max-width: 767px) { .bd-board { --bd-tool: 22px; } .bd-top { display: none; } .bd-pad { padding: var(--sp-1); } .bd-tools { gap: var(--sp-px); } }
@media (prefers-reduced-motion: reduce) { .bd-pad, .bd-lamp { transition: none; } }