/* Planet Sound — "Sound shaping" in the sound panel: a tape machine and a three-band compressor.
   A small hardware rack on the glass: engraved labels, lamps, ivory knobs. */

.shape { margin-top: 20px; border-top: 1px solid var(--glass-line, var(--rule)); padding-top: 4px; }
.shape > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 0; font-weight: 600; font-size: 14px;
  -webkit-tap-highlight-color: transparent;
}
.shape > summary::-webkit-details-marker { display: none; }
.shape > summary::after { content: '+'; margin-left: auto; color: var(--graphite); font-weight: 400; font-size: 18px; line-height: 1; }
.shape[open] > summary::after { content: '\2212'; }
.shape-state { font-weight: 500; font-size: 12.5px; color: var(--graphite); }
.shape-state.live { color: var(--k-lit); }

.rack {
  position: relative; border-radius: 16px; padding: 14px 12px 12px; margin-bottom: 8px;
  background:
    radial-gradient(circle at 10px 10px, rgba(0,0,0,.28) 0 2.2px, rgba(255,255,255,.5) 2.4px 3px, transparent 3.2px),
    radial-gradient(circle at calc(100% - 10px) 10px, rgba(0,0,0,.28) 0 2.2px, rgba(255,255,255,.5) 2.4px 3px, transparent 3.2px),
    radial-gradient(circle at 10px calc(100% - 10px), rgba(0,0,0,.28) 0 2.2px, rgba(255,255,255,.5) 2.4px 3px, transparent 3.2px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), rgba(0,0,0,.28) 0 2.2px, rgba(255,255,255,.5) 2.4px 3px, transparent 3.2px),
    linear-gradient(180deg, color-mix(in srgb, #d8c89f 30%, transparent), color-mix(in srgb, #b9a77a 20%, transparent));
  border: 1px solid var(--glass-line, var(--rule));
  box-shadow: inset 0 1px 0 var(--glass-hi, rgba(255,255,255,.6)), inset 0 -10px 24px -16px rgba(60, 40, 10, .35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rack { background:
    radial-gradient(circle at 10px 10px, rgba(0,0,0,.5) 0 2.2px, rgba(255,255,255,.35) 2.4px 3px, transparent 3.2px),
    radial-gradient(circle at calc(100% - 10px) 10px, rgba(0,0,0,.5) 0 2.2px, rgba(255,255,255,.35) 2.4px 3px, transparent 3.2px),
    radial-gradient(circle at 10px calc(100% - 10px), rgba(0,0,0,.5) 0 2.2px, rgba(255,255,255,.35) 2.4px 3px, transparent 3.2px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), rgba(0,0,0,.5) 0 2.2px, rgba(255,255,255,.35) 2.4px 3px, transparent 3.2px),
    linear-gradient(180deg, rgba(226, 200, 140, .10), rgba(120, 96, 50, .10)); }
}
:root[data-theme="dark"] .rack { background:
    radial-gradient(circle at 10px 10px, rgba(0,0,0,.5) 0 2.2px, rgba(255,255,255,.35) 2.4px 3px, transparent 3.2px),
    radial-gradient(circle at calc(100% - 10px) 10px, rgba(0,0,0,.5) 0 2.2px, rgba(255,255,255,.35) 2.4px 3px, transparent 3.2px),
    radial-gradient(circle at 10px calc(100% - 10px), rgba(0,0,0,.5) 0 2.2px, rgba(255,255,255,.35) 2.4px 3px, transparent 3.2px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), rgba(0,0,0,.5) 0 2.2px, rgba(255,255,255,.35) 2.4px 3px, transparent 3.2px),
    linear-gradient(180deg, rgba(226, 200, 140, .10), rgba(120, 96, 50, .10)); }

.rack-tabs { display: flex; gap: 6px; margin: 0 0 10px; }
.rack-tab {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 4px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--glass-line, var(--rule)); background: var(--glass-field, transparent); color: var(--graphite);
  font: 700 10.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
}
.rack-tab[aria-selected="true"] { color: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.lamp { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--graphite) 45%, transparent); box-shadow: inset 0 1px 1px rgba(0,0,0,.35); flex: none; }
.lamp.on { background: radial-gradient(circle at 35% 30%, #ffd9a8, var(--k-lit) 55%, #a8400f); box-shadow: 0 0 8px 1px color-mix(in srgb, var(--k-lit) 70%, transparent), inset 0 -1px 1px rgba(0,0,0,.3); }

.rack-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.sw {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--glass-line, var(--rule)); background: var(--glass-field, transparent); color: var(--ink);
  font: 700 11px/1 var(--sans); letter-spacing: .13em; text-transform: uppercase;
}
.sw[aria-pressed="true"] { border-color: var(--ink); }
.rack select {
  min-height: 34px; padding: 0 28px 0 10px; border-radius: 9px; border: 1px solid var(--glass-line, var(--rule)); background-color: var(--glass-field, transparent);
  font: 500 13px var(--sans); color: var(--ink); max-width: 100%; flex: 1 1 140px; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--graphite) 50%), linear-gradient(135deg, var(--graphite) 50%, transparent 50%);
  background-position: right 14px top 14px, right 9px top 14px; background-size: 5px 5px; background-repeat: no-repeat;
}
.mini-seg { display: inline-flex; border: 1px solid var(--glass-line, var(--rule)); border-radius: 9px; overflow: hidden; background: var(--glass-field, transparent); }
.mini-seg button { border: 0; background: none; padding: 7px 10px; font: 700 11px/1 var(--sans); letter-spacing: .06em; color: var(--graphite); cursor: pointer; }
.mini-seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.mini-seg + .mini-seg, .sw + .mini-seg { margin-left: 0; }

.grp { margin: 12px 0 0; padding-top: 8px; border-top: 1px solid var(--glass-line, var(--rule)); }
.grp > h4 { margin: 0 0 4px; font: 700 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--graphite); }
.knobs { display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center; gap: 6px 0; }
.knobs.three { grid-template-columns: repeat(3, 1fr); }
.knobs .knob-box { width: 100%; max-width: 92px; }

.rack.off .knobs, .rack.off .band-tab .bt-gain { display: block; margin-top: 6px; border-top: 1px solid var(--glass-line, var(--rule)); padding-top: 6px; }
.band-tab .bt-gain .knob-box { width: 100%; }
.band-body { opacity: .5; }
.rack-note { margin: 8px 2px 0; font-size: 12.5px; color: var(--graphite); line-height: 1.4; }
.rack-note.err { color: var(--signal); }
.rack-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 6px 2px 0; }
.rack-foot .check { font-size: 13px; color: var(--graphite); }

/* multiband */
.strip { position: relative; margin: 2px 0 8px; border-radius: 10px; overflow: hidden; border: 1px solid var(--glass-line, var(--rule)); background: color-mix(in srgb, var(--paper) 55%, transparent); touch-action: none; }
.strip canvas { display: block; width: 100%; height: 92px; }
.band-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 8px; }
.band-tab { border: 1px solid var(--glass-line, var(--rule)); border-radius: 10px; background: var(--glass-field, transparent); padding: 7px 8px 8px; text-align: left; cursor: pointer; color: var(--ink); }
.band-tab[aria-selected="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.band-tab .bt-name { display: flex; align-items: center; gap: 6px; font: 700 11px/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; }
.band-tab .bt-name i { width: 9px; height: 9px; border-radius: 2px; background: var(--bc); flex: none; }
.band-tab .bt-hz { display: block; margin-top: 4px; font: 500 11.5px/1.2 var(--sans); color: var(--graphite); }
.band-tab .bt-btns { display: flex; gap: 4px; margin-top: 6px; }
.band-tab .bt-btns button { flex: 1; border: 1px solid var(--glass-line, var(--rule)); background: none; border-radius: 6px; padding: 3px 0; font: 700 10.5px/1.2 var(--sans); letter-spacing: .08em; color: var(--graphite); cursor: pointer; }
.band-tab .bt-btns button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.band-tab .bt-btns button.on[aria-pressed="true"] { background: var(--k-lit); border-color: var(--k-lit); color: #fff; }
.band-body { display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: start; }
.curve { display: block; width: 150px; height: 150px; border-radius: 10px; border: 1px solid var(--glass-line, var(--rule)); background: color-mix(in srgb, var(--paper) 55%, transparent); }
.band-body .knobs { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 520px) {
  .band-body { grid-template-columns: 1fr; }
  .curve { width: 100%; height: 130px; }
}
@media (max-width: 860px) { .knobs .knob-box { --ks: 58px; } }

/* granulator */
.gr-view { position: relative; margin: 2px 0 8px; }
.gr-view canvas { display: block; width: 100%; height: 104px; border-radius: 10px; touch-action: none; cursor: ew-resize; background: color-mix(in srgb, var(--paper) 55%, transparent); }
.gr-cap { position: absolute; bottom: 4px; font: 600 10px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); pointer-events: none; }
.gr-cap.l { left: 8px; } .gr-cap.r { right: 8px; }
.gr-over { margin: 0 0 8px; }
.gr-over[hidden] { display: none; }
.gr-over canvas { display: block; width: 100%; height: 46px; border-radius: 8px; touch-action: none; cursor: grab; border: 1px solid var(--glass-line, var(--rule)); background: color-mix(in srgb, var(--paper) 55%, transparent); }
.gr-src { margin-bottom: 8px; }
.gr-src [hidden] { display: none; }
.grp > h4:has(.gr-scale) { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.gr-scale { text-transform: none; letter-spacing: 0; font: 500 11.5px/1 var(--sans); color: var(--graphite); display: inline-flex; align-items: center; gap: 6px; }
.gr-scale select { min-height: 26px; padding: 0 22px 0 8px; font-size: 12px; flex: none; background-position: right 11px top 10px, right 6px top 10px; }
.gr-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 2px 0; }
.gr-read { margin-left: auto; font: 600 11.5px/1 var(--sans); color: var(--graphite); font-variant-numeric: tabular-nums; }
#rk-gr.off .knobs { opacity: .5; }