/* Soundboard - soundboard.css
 * BRIEF-169 step 5: on the Bench. The cap and socket machinery is the
 * bespoke component here; its per-button colours are user data carried
 * in --cap-colour custom properties, not skin styling. Chrome colours
 * now read tokens; shared components come from bench.css.
 */

/* ----- Page wrapper ----- */

.sb-page {
  max-width:  720px;
  margin:     0 auto;
  padding:    32px 8px 80px;
}

.sb-title {
  font-family:    var(--font-display);
  font-size:      42px;
  font-weight:    700;
  color:          var(--ink);
  margin:         0 0 6px;
  letter-spacing: 0.02em;
}

.sb-frame {
  font-family: var(--font-body);
  font-size:   15px;
  font-weight: 300;
  color:       var(--ink-faint);
  margin:      0 0 28px;
}

/* ----- Controls row ----- */

.sb-controls {
  margin-bottom: 24px;
}

.sb-vol-row {
  display:     flex;
  align-items: center;
  gap:         12px;
}

.sb-vol-label {
  font-family:    var(--font-body);
  font-size:      11px;
  font-weight:    500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color:          var(--ink-faint);
  white-space:    nowrap;
}

.sb-vol {
  flex:            1;
  max-width:       180px;
  -webkit-appearance: none;
  appearance:      none;
  height:          3px;
  border-radius:   2px;
  background:      rgba(244,247,245,0.15);
  outline:         none;
  cursor:          pointer;
}

.sb-vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  width:         14px;
  height:        14px;
  border-radius: 50%;
  background:    var(--accent);
  cursor:        pointer;
  border:        none;
}

.sb-vol::-moz-range-thumb {
  width:         14px;
  height:        14px;
  border-radius: 50%;
  background:    var(--accent);
  cursor:        pointer;
  border:        none;
}

/* ----- Tabs ----- */

.sb-tabs {
  display:       flex;
  gap:           0;
  border-bottom: 1px solid rgba(244,247,245,0.12);
  margin-bottom: 28px;
}

.sb-tab {
  font-family:    var(--font-body);
  font-size:      13px;
  font-weight:    400;
  letter-spacing: 0.05em;
  color:          var(--ink-faint);
  background:     none;
  border:         none;
  padding:        8px 18px 10px;
  cursor:         pointer;
  position:       relative;
  transition:     color 0.15s;
}

.sb-tab::after {
  content:          '';
  position:         absolute;
  bottom:           -1px;
  left:             0;
  right:            0;
  height:           2px;
  background:       var(--accent);
  transform:        scaleX(0);
  transform-origin: left;
  transition:       transform 0.15s ease-out;
}

.sb-tab.is-active {
  color: var(--ink);
}

.sb-tab.is-active::after {
  transform: scaleX(1);
}

.sb-tab:hover:not(.is-active) { color: rgba(234,240,236,0.65); }

/* ----- Button grid ----- */

.sb-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  row-gap:               30px;
  column-gap:            0;
  justify-items:         center;
}

/* ----- Button wrapper (grid item) ----- */

.sb-btn-wrap {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            10px;
}

/* ----- Socket (bezel ring) ----- */

.sb-socket {
  position:        relative;
  width:           110px;
  height:          110px;
  border-radius:   50%;
  /* Conic gradient suggests a machined brushed-metal ring */
  background:      conic-gradient(
    rgba(244,247,245,0.22)  0deg,
    rgba(244,247,245,0.05)  55deg,
    rgba(244,247,245,0.22)  110deg,
    rgba(244,247,245,0.05)  165deg,
    rgba(244,247,245,0.22)  220deg,
    rgba(244,247,245,0.05)  280deg,
    rgba(244,247,245,0.22)  360deg
  );
  /* Deep inset so the button reads as recessed into a panel */
  box-shadow:      inset 0 5px 14px rgba(0,0,0,0.70),
                   inset 0 -2px 5px rgba(244,247,245,0.06),
                   0 3px 12px rgba(0,0,0,0.45);
  display:         flex;
  align-items:     center;
  justify-content: center;
}

@media (min-width: 900px) {
  .sb-socket {
    width:  128px;
    height: 128px;
  }
}

/* ----- Cap (pressable face) ----- */

.sb-cap {
  width:         84px;
  height:        84px;
  border-radius: 50%;
  border:        none;
  padding:       0;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  /*
   * Physical dome gradient:
   *   tight highlight ellipse at upper-left -> colour -> darkened edge.
   * The ellipse stops short so most of the cap reads as the solid base
   * colour, with visible darkening at the bottom to sell the curve.
   */
  background:    radial-gradient(
    ellipse 58% 48% at 36% 28%,
    rgba(255,255,255,0.44)  0%,
    rgba(255,255,255,0.12)  28%,
    var(--cap-colour)       52%,
    var(--cap-dark)         100%
  );
  /*
   * Four-layer shadow stack:
   *   outer blur = ambient depth
   *   tight drop  = contact shadow under the dome lip
   *   inset bottom = underside of the dome going dark
   *   inset top    = subtle rim catch-light
   */
  box-shadow:    0 8px 22px rgba(0,0,0,0.60),
                 0 2px 6px  rgba(0,0,0,0.40),
                 inset 0 -5px 10px rgba(0,0,0,0.32),
                 inset 0  2px  4px rgba(255,255,255,0.10);
  position:      relative;
  transition:    transform 0.09s ease-out, box-shadow 0.09s ease-out;
  user-select:   none;
  -webkit-tap-highlight-color: transparent;
}

@media (min-width: 900px) {
  .sb-cap {
    width:  100px;
    height: 100px;
  }
}

/* Press: 3px travel, shadow collapses. Spring back via default transition. */
.sb-cap:active,
.sb-cap.press {
  transform:  translateY(3px);
  box-shadow: 0 3px 7px  rgba(0,0,0,0.65),
              0 1px 2px  rgba(0,0,0,0.45),
              inset 0 -2px 4px rgba(0,0,0,0.38),
              inset 0  1px 2px rgba(255,255,255,0.08);
}

/* Pollen (#f0cc60) and spark (#7ec8e3): bright caps, slate glyph, slate-tinted shadows. */
.sb-cap--bright {
  box-shadow: 0 8px 22px rgba(46,61,58,0.55),
              0 2px 6px  rgba(46,61,58,0.38),
              inset 0 -5px 10px rgba(46,61,58,0.28),
              inset 0  2px  4px rgba(255,255,255,0.12);
}

.sb-cap--bright:active,
.sb-cap--bright.press {
  box-shadow: 0 3px 7px  rgba(46,61,58,0.65),
              0 1px 2px  rgba(46,61,58,0.48),
              inset 0 -2px 4px rgba(46,61,58,0.38),
              inset 0  1px 2px rgba(255,255,255,0.10);
}

/* ----- Ring glyph ----- */

.sb-glyph {
  font-family:    var(--font-body);
  font-size:      28px;
  font-weight:    300;
  line-height:    1;
  color:          rgba(244,247,245,0.45);
  display:        block;
  pointer-events: none;
  user-select:    none;
  transition:     color 0.14s, transform 0.14s;
  text-shadow:    0 1px 3px rgba(0,0,0,0.45);
}

.sb-cap:active .sb-glyph,
.sb-cap.press  .sb-glyph {
  color:     rgba(244,247,245,0.90);
  transform: scale(1.08);
}

/* Pollen and spark: slate glyph so they do not glow */
.sb-cap--bright .sb-glyph {
  color:       rgba(46,61,58,0.40);
  text-shadow: 0 1px 2px rgba(255,255,255,0.20);
}

.sb-cap--bright:active .sb-glyph,
.sb-cap--bright.press  .sb-glyph {
  color: rgba(46,61,58,0.88);
}

/* ----- Button label ----- */

.sb-label {
  font-family:    var(--font-body);
  font-size:      11px;
  font-weight:    400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          rgba(234,240,236,0.85);
  text-align:     center;
  line-height:    1.3;
}

/* ----- Colour mode toggle button ----- */

.sb-colour-mode-btn {
  font-family:    var(--font-body);
  font-size:      11px;
  font-weight:    300;
  letter-spacing: 0.08em;
  color:          var(--ink-faint);
  background:     none;
  border:         none;
  border-bottom:  1px solid rgba(234,240,236,0.20);
  padding:        0 0 1px;
  cursor:         pointer;
  transition:     color 0.15s, border-color 0.15s;
  margin-top:     2px;
}

.sb-colour-mode-btn:hover {
  color:             rgba(234,240,236,0.80);
  border-bottom-color: rgba(234,240,236,0.50);
}

.sb-page.is-colour-mode .sb-colour-mode-btn {
  color:               var(--accent);
  border-bottom-color: var(--accent);
}

/* ----- Colour dot ----- */

.sb-dot-wrap {
  position:      absolute;
  top:           -3px;
  right:         -3px;
  width:         20px;
  height:        20px;
  border-radius: 50%;
  border:        2px solid rgba(46,61,58,0.7);
  cursor:        pointer;
  overflow:      hidden;
  display:       none;
  flex-shrink:   0;
}

.sb-page.is-colour-mode .sb-dot-wrap {
  display: block;
}

.sb-colour-input {
  position: absolute;
  opacity:  0;
  width:    250%;
  height:   250%;
  top:      -75%;
  left:     -75%;
  cursor:   pointer;
}

/* ----- Yours tab ----- */

.sb-yours-signed-out {
  display:     flex;
  flex-direction: column;
  align-items: flex-start;
  gap:         16px;
  padding:     8px 0 24px;
}

.sb-yours-caption {
  font-family: var(--font-body);
  font-size:   14px;
  font-weight: 300;
  color:       var(--ink-faint);
  margin:      0;
}

/* ----- Builder mode ----- */

.sb-builder-header {
  margin-bottom: 20px;
}

.sb-builder-heading {
  font-family:    var(--font-display);
  font-size:      22px;
  font-weight:    700;
  color:          var(--ink);
  margin:         0 0 4px;
  letter-spacing: 0.02em;
}

.sb-builder-helper {
  font-family: var(--font-body);
  font-size:   13px;
  font-weight: 300;
  color:       var(--ink-faint);
  margin:      0;
}

.sb-builder-form {
  margin-bottom: 28px;
}

.sb-builder-search-row {
  display: flex;
  gap:     8px;
  margin-bottom: 12px;
}

.sb-builder-search-input {
  flex:          1;
  font-family:   var(--font-body);
  font-size:     14px;
  font-weight:   300;
  padding:       9px 11px;
  border:        1px solid rgba(244,247,245,0.15);
  border-radius: 4px;
  background:    rgba(244,247,245,0.06);
  color:         var(--ink);
  outline:       none;
  transition:    border-color 0.12s;
}

.sb-builder-search-input::placeholder { color: rgba(234,240,236,0.35); }
.sb-builder-search-input:focus        { border-color: var(--accent); }

.sb-builder-search-btn {
  font-family:    var(--font-body);
  font-size:      13px;
  font-weight:    400;
  letter-spacing: 0.04em;
  color:          var(--ink);
  background:     var(--slate-mid, rgba(244,247,245,0.10));
  border:         1px solid rgba(244,247,245,0.15);
  border-radius:  4px;
  padding:        9px 16px;
  cursor:         pointer;
  white-space:    nowrap;
  transition:     background 0.12s, border-color 0.12s;
}

.sb-builder-search-btn:hover { background: rgba(244,247,245,0.15); }

/* Builder results list */
.sb-builder-results {
  margin-bottom: 16px;
}

.sb-result-row {
  display:       flex;
  align-items:   center;
  gap:           12px;
  padding:       8px 4px;
  border-bottom: 1px solid rgba(244,247,245,0.07);
  font-family:   var(--font-body);
  font-size:     13px;
  font-weight:   300;
  color:         var(--ink);
  cursor:        pointer;
  transition:    background 0.1s;
  border-radius: 3px;
}

.sb-result-row:hover       { background: rgba(244,247,245,0.05); }
.sb-result-row.is-selected { background: rgba(92,138,122,0.12); }

.sb-result-name {
  flex:        1;
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb-result-meta {
  font-size:  11px;
  color:      var(--ink-faint);
  white-space: nowrap;
  flex-shrink: 0;
}

.sb-result-play {
  font-family:   var(--font-body);
  font-size:     11px;
  font-weight:   300;
  color:         var(--ink-faint);
  background:    transparent;
  border:        1px solid rgba(244,247,245,0.15);
  border-radius: 3px;
  padding:       3px 8px;
  cursor:        pointer;
  white-space:   nowrap;
  flex-shrink:   0;
  transition:    color 0.12s, border-color 0.12s;
}

.sb-result-play:hover { color: var(--ink); border-color: rgba(244,247,245,0.35); }

/* Pin row */
.sb-builder-pin-row {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-wrap:   wrap;
}

.sb-builder-label-input {
  flex:          1;
  min-width:     120px;
  font-family:   var(--font-body);
  font-size:     14px;
  font-weight:   300;
  padding:       8px 11px;
  border:        1px solid rgba(244,247,245,0.15);
  border-radius: 4px;
  background:    rgba(244,247,245,0.06);
  color:         var(--ink);
  outline:       none;
  transition:    border-color 0.12s;
}

.sb-builder-label-input::placeholder { color: rgba(234,240,236,0.35); }
.sb-builder-label-input:focus        { border-color: var(--accent); }

.sb-builder-colour-wrap {
  width:         32px;
  height:        32px;
  border-radius: 50%;
  border:        2px solid rgba(244,247,245,0.20);
  overflow:      hidden;
  cursor:        pointer;
  position:      relative;
  display:       block;
  flex-shrink:   0;
  background:    var(--accent);
}

.sb-builder-colour-wrap input[type="color"] {
  position: absolute;
  opacity:  0;
  width:    200%;
  height:   200%;
  top:      -50%;
  left:     -50%;
  cursor:   pointer;
}

.sb-builder-pin-btn {
  font-family:    var(--font-body);
  font-size:      13px;
  font-weight:    400;
  letter-spacing: 0.04em;
  color:          var(--ink);
  background:     var(--accent);
  border:         none;
  border-radius:  4px;
  padding:        9px 16px;
  cursor:         pointer;
  transition:     background 0.12s;
  white-space:    nowrap;
}

.sb-builder-pin-btn:hover    { background: var(--good); }
.sb-builder-pin-btn:disabled { opacity: 0.45; cursor: default; }

.sb-builder-status {
  font-family: var(--font-body);
  font-size:   13px;
  font-weight: 300;
  color:       var(--ink-faint);
  margin:      8px 0 0;
}

.sb-builder-status.is-err { color: var(--stop); }

/* Empty state */
.sb-empty {
  font-family:  var(--font-body);
  font-size:    14px;
  font-weight:  300;
  color:        var(--ink-faint);
  grid-column:  1 / -1;
  padding:      20px 0;
  margin:       0;
}

/* Remove link on custom buttons */
.sb-remove-link {
  font-family:     var(--font-body);
  font-size:       10px;
  font-weight:     300;
  letter-spacing:  0.08em;
  text-transform:  uppercase;
  color:           rgba(234,240,236,0.35);
  background:      none;
  border:          none;
  cursor:          pointer;
  padding:         0;
  transition:      color 0.12s;
}

.sb-remove-link:hover { color: var(--stop); }

/* ----- Feedback widget (hidden until first press) ----- */

#tool-feedback { display: none; }

/* ----- Disclosure ----- */

.sb-disclosure {
  margin-top:    40px;
  border-top:    1px solid rgba(244,247,245,0.08);
  padding-top:   16px;
}

.sb-disclosure-trigger {
  display:     flex;
  align-items: center;
  gap:         8px;
  background:  none;
  border:      none;
  cursor:      pointer;
  font-family: var(--font-body);
  font-size:   12px;
  font-weight: 300;
  color:       var(--ink-faint);
  padding:     0;
  transition:  color 0.15s;
}

.sb-disclosure-trigger:hover { color: var(--ink); }

.sb-disclosure-arrow {
  font-size:   9px;
  transition:  transform 0.2s ease-out;
  display:     inline-block;
}

.sb-disclosure-trigger[aria-expanded="true"] .sb-disclosure-arrow {
  transform: rotate(90deg);
}

.sb-disclosure-panel {
  padding:     16px 0 0;
}

.sb-disclosure-body {
  font-family:  var(--font-body);
  font-size:    12px;
  font-weight:  300;
  color:        var(--ink-faint);
  margin:       0 0 16px;
  line-height:  1.6;
  max-width:    460px;
}

/* Scrub */
.sb-scrub-btn {
  font-family: var(--font-body);
  font-size:   12px;
  font-weight: 300;
  color:       var(--stop);
  background:  none;
  border:      1px solid rgba(181,110,110,0.30);
  border-radius: 3px;
  padding:     5px 12px;
  cursor:      pointer;
  transition:  background 0.12s, border-color 0.12s;
}

.sb-scrub-btn:hover { background: rgba(181,110,110,0.08); border-color: var(--stop); }

.sb-scrub-confirm {
  margin-top: 12px;
}

.sb-scrub-msg {
  font-family: var(--font-body);
  font-size:   12px;
  font-weight: 300;
  color:       var(--ink-faint);
  margin:      0 0 10px;
  max-width:   420px;
  line-height: 1.5;
}

.sb-scrub-btns {
  display: flex;
  gap:     10px;
}

.sb-scrub-yes {
  font-family:   var(--font-body);
  font-size:     12px;
  font-weight:   400;
  color:         var(--ink);
  background:    var(--stop);
  border:        none;
  border-radius: 3px;
  padding:       5px 14px;
  cursor:        pointer;
  transition:    background 0.12s;
}

.sb-scrub-yes:hover { background: #9e5a5a; }

.sb-scrub-cancel {
  font-family: var(--font-body);
  font-size:   12px;
  font-weight: 300;
  color:       var(--ink-faint);
  background:  none;
  border:      none;
  cursor:      pointer;
  padding:     5px 0;
  transition:  color 0.12s;
}

.sb-scrub-cancel:hover { color: var(--ink); }

.sb-scrub-done {
  font-family: var(--font-body);
  font-size:   12px;
  font-weight: 300;
  color:       var(--accent);
  margin:      8px 0 0;
}

/* ----- Rule ----- */

.sb-rule {
  border:        none;
  border-top:    1px solid rgba(244,247,245,0.08);
  margin:        32px 0 0;
}