/* CO84 Synth page. Uses the site's colour variables from styles.css. */
.synth-section { max-width: 1180px; }

.synth-title { display: block; margin: 0 auto 1rem; max-width: 100%; height: auto; }

.synth-note { text-align: center; color: var(--yellow); border: 1px solid var(--yellow); border-radius: var(--radius); padding: .8rem 1rem; max-width: 36rem; margin: 0 auto 1.5rem; }

.synth {
  border: 2px solid var(--pink);
  border-radius: var(--radius);
  box-shadow: 0 0 24px rgba(255, 46, 147, 0.5);
  background: #05000c;
  padding: .8rem;
  position: relative;
}
.synth button, .synth select, .synth input { font-family: Orbitron, system-ui, sans-serif; }
.synth button { cursor: pointer; }
.synth button:focus-visible, .synth select:focus-visible, .synth input:focus-visible,
.knob:focus-visible, .wheel:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ---- top bar */
.synth-top { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; margin-bottom: .8rem; }
.sound-status { font: 700 .68rem/1.3 Orbitron, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); min-width: 9.5rem; max-width: 14rem; }
.sound-status.on { color: var(--yellow); text-shadow: 0 0 10px rgba(255, 238, 5, .6); }
.patch-picker { display: flex; align-items: center; gap: .4rem; flex: 1 1 16rem; min-width: 0; }
.patch-picker select { flex: 1; min-width: 0; }
.synth select {
  background: #12001f; color: var(--fg); border: 1px solid rgba(25, 227, 255, .55); border-radius: 8px;
  padding: .45rem .5rem; font-size: .8rem;
}
.synth .btn-small { padding: .45rem .8rem; }
.patch-actions { display: flex; gap: .4rem; }
.tempo { font-family: Orbitron, sans-serif; font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; display: flex; align-items: center; gap: .35rem; }
.tempo input { width: 4rem; background: #12001f; color: var(--yellow); border: 1px solid rgba(25, 227, 255, .55); border-radius: 8px; padding: .4rem .3rem; text-align: center; font-size: .85rem; }
.scope { width: 180px; height: 44px; max-width: 100%; border: 1px solid rgba(25, 227, 255, .35); border-radius: 8px; background: #08000f; margin-left: auto; }

/* ---- panels */
.synth-panels { display: flex; flex-direction: column; gap: .6rem; }
.synth-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.panel {
  flex: var(--cells) 1 calc(var(--cells) * 4.4rem);
  min-width: 0;
  background: rgba(19, 0, 34, .9);
  border: 1px solid rgba(255, 46, 147, .35);
  border-radius: 10px;
  padding: .35rem .5rem .6rem;
}
.panel h3 { margin: 0 0 .25rem; font: 700 .68rem/1.2 Orbitron, sans-serif; letter-spacing: .1em; color: var(--yellow); text-transform: uppercase; }
.panel-controls { display: flex; flex-wrap: wrap; justify-content: space-around; gap: .3rem .2rem; }
.ctl { display: flex; flex-direction: column; align-items: center; width: 4.4rem; min-width: 0; }
.ctl-label { font: 700 .62rem/1.2 Orbitron, sans-serif; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .2rem; white-space: nowrap; }
.ctl-value { font: 500 .66rem/1.2 Orbitron, sans-serif; color: var(--fg); background: #12001f; border: 1px solid rgba(255, 255, 255, .12); border-radius: 5px; padding: .12rem .2rem; min-width: 4.1rem; text-align: center; margin-top: .15rem; white-space: nowrap; }
.ctl select { width: 100%; font-size: .68rem; padding: .35rem .2rem; margin-top: .55rem; }

.knob { width: 3.5rem; height: 3.5rem; cursor: ns-resize; touch-action: none; border-radius: 50%; user-select: none; -webkit-user-select: none; }
.knob svg { width: 100%; height: 100%; display: block; overflow: visible; }
.knob .k-track { stroke: #3a2a55; fill: none; stroke-width: 3; stroke-linecap: round; }
.knob .k-val { stroke: var(--pink); fill: none; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(255, 46, 147, .8)); }
.knob .k-body { fill: url(#knob-grad); stroke: #000; stroke-width: 1; }
.knob .k-tick { stroke: #fff; stroke-width: 2.6; stroke-linecap: round; }

.toggle { margin-top: .5rem; min-width: 3.4rem; padding: .5rem .6rem; font-size: .7rem; border-radius: 8px; border: 1px solid var(--cyan); background: #12001f; color: var(--muted); }
.toggle[aria-pressed="true"] { background: var(--pink); border-color: var(--pink); color: #fff; box-shadow: 0 0 12px rgba(255, 46, 147, .6); }

/* ---- keyboard section */
.keys-panel { display: flex; gap: .7rem; align-items: stretch; margin-top: .6rem; background: rgba(19, 0, 34, .9); border: 1px solid rgba(255, 46, 147, .35); border-radius: 10px; padding: .6rem; }
.keys-side { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .5rem; flex: 0 0 auto; }
.oct-buttons { display: flex; flex-direction: column; gap: .4rem; }
.oct-label { font: 700 .75rem Orbitron, sans-serif; color: var(--fg); letter-spacing: .05em; }
.wheels { display: flex; gap: .5rem; flex: 0 0 auto; }
.wheel-wrap { display: flex; flex-direction: column; align-items: center; gap: .25rem; font: 700 .58rem Orbitron, sans-serif; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.wheel {
  width: 2.7rem; height: 7.4rem; border-radius: 10px; border: 1px solid #000; touch-action: none; cursor: ns-resize; position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,.6) 0 2px, transparent 2px 7px),
    linear-gradient(to right, #14081f, #5f4a80 50%, #14081f);
  background-position: 0 var(--ridge, 0px), 0 0;
}
.wheel::after { content: ""; position: absolute; left: .4rem; right: .4rem; height: 3px; top: var(--pos, 50%); transform: translateY(-50%); background: var(--yellow); box-shadow: 0 0 8px rgba(255, 238, 5, .8); border-radius: 2px; }
.wheel.bipolar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); background: linear-gradient(to right, var(--pink) 0 .35rem, transparent .35rem calc(100% - .35rem), var(--pink) calc(100% - .35rem)); }

.kb-wrap { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.pan-strip { position: relative; height: 1.5rem; border: 1px solid rgba(25, 227, 255, .45); border-radius: 999px; background: #08000f; touch-action: none; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.pan-thumb { position: absolute; top: 1px; bottom: 1px; left: 0; min-width: 36px; border-radius: 999px; background: linear-gradient(#ff5db0, var(--pink)); box-shadow: 0 0 12px rgba(255, 46, 147, .6); display: flex; align-items: center; justify-content: center; font: 700 .58rem Orbitron, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #fff; white-space: nowrap; overflow: hidden; cursor: grab; }
.pan-strip:active .pan-thumb { cursor: grabbing; }
.keyboard { position: relative; width: 100%; height: 8.5rem; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; background: #000; border-radius: 6px; }
.keys-track { position: absolute; top: 0; left: 0; bottom: 0; will-change: transform; }
.key { box-sizing: border-box; position: absolute; top: 0; }
.key.white { bottom: 0; background: linear-gradient(#f7f3ff, #d9d0ee); border: 1px solid #130022; border-top: 0; border-radius: 0 0 5px 5px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: .25rem; font: 700 .6rem Orbitron, sans-serif; color: #5a4a78; }
.key.white.down { background: linear-gradient(#ffd1e9, var(--pink)); }
.key.black { height: 58%; background: linear-gradient(#3a2d52, #0a0412); border: 1px solid #000; border-top: 0; border-radius: 0 0 4px 4px; z-index: 2; box-shadow: 0 3px 4px rgba(0,0,0,.6); }
.key.black.down { background: linear-gradient(var(--pink), #7a0f48); }

.midi-status { margin: .6rem 0 0; font-size: .75rem; color: var(--muted); text-align: center; min-height: 1.2em; }
.midi-status button { background: none; border: 1px solid var(--cyan); color: var(--cyan); border-radius: 999px; padding: .25rem .8rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; }

.synth-help { max-width: 760px; margin: 2.5rem auto 0; }
.synth-help kbd { font: 700 .75rem Orbitron, sans-serif; background: #12001f; border: 1px solid var(--cyan); border-radius: 5px; padding: .05rem .35rem; color: var(--yellow); }

@media (max-width: 760px) {
  .scope { margin-left: 0; flex: 1 1 100%; width: 100%; }
  .keys-panel { flex-wrap: wrap; justify-content: center; }
  .kb-wrap { flex: 1 1 100%; order: 3; }
  .keyboard { height: 9rem; }
  .keys-side { flex-direction: row; }
  .oct-buttons { flex-direction: row; }
  .wheel { height: 5.2rem; }
  .patch-actions { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .synth * { transition: none !important; }
}

/* the site's .btn rule would otherwise override the hidden attribute */
.synth [hidden] { display: none !important; }