/* Synthndr VA — hardware-style panel. The layout follows the signal path:
   top row is the audio chain (source -> filter -> amp), bottom row is what modulates it.
   Orange = audio path, cyan = modulation, white = voice/global. */

:root {
  --panel: #1c1d1f;
  --panel-raised: #242528;
  --panel-edge: #34353a;
  --groove: #0a0a0b;
  --display: #0d1011;
  --display-grid: #1a2124;
  --ink: #dcd8cf;          /* silkscreen text */
  --ink-muted: #8c8a84;
  --ink-faint: #5d5c58;
  --cap: #e7e3da;
  --cap-shade: #b9b4a8;
  --signal: #ff8c3a;
  --signal-dim: rgba(255, 140, 58, 0.18);
  --mod: #58c6ff;
  --mod-dim: rgba(88, 198, 255, 0.18);
  --voice: #f2efe8;
  --voice-dim: rgba(242, 239, 232, 0.14);
  --danger: #ff4d3d;
  --focus: #ffd24a;

  --font-ui: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;
  --font-num: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fader-w: 42px;
  --track-h: 92px;
  --cap-h: 14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #101112;
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overflow: hidden;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.synth {
  position: relative;
  width: 1300px;
  height: 700px;
  margin: 0 auto;
  padding: 12px 16px 14px;
  display: grid;
  grid-template-rows: 36px 1fr 1fr 96px;
  gap: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), transparent 40%),
    var(--panel);
}

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid var(--panel-edge);
  padding-bottom: 8px;
}
.wordmark {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.14em;
  color: var(--ink);
}
.wordmark span { color: var(--signal); letter-spacing: 0.06em; }

.presets { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.preset-select { position: relative; display: flex; align-items: center; }
.preset-select select {
  appearance: none;
  -webkit-appearance: none;
  width: 240px;
  height: 26px;
  padding: 0 64px 0 10px;
  border: 1px solid var(--panel-edge);
  border-radius: 3px;
  background: var(--display);
  color: var(--ink);
  font: 12px var(--font-num);
  cursor: pointer;
}
.modified {
  position: absolute;
  right: 8px;
  font: 10px var(--font-num);
  color: var(--signal);
  pointer-events: none;
}

.step {
  width: 26px;
  height: 26px;
  border: 1px solid var(--panel-edge);
  border-radius: 3px;
  background: var(--panel-raised);
  color: var(--ink);
  font: 600 15px/1 var(--font-ui);
  cursor: pointer;
}
.step:hover { background: #2e2f33; }
.step:active { background: #1a1b1d; }

.meter { display: flex; align-items: center; gap: 8px; }
.meter-label { font-size: 10px; letter-spacing: 0.12em; color: var(--ink-muted); }
.meter-bar {
  position: relative;
  width: 132px;
  height: 8px;
  border-radius: 2px;
  background: var(--groove);
  overflow: hidden;
}
.meter-fill {
  position: absolute; inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, #5a8f4f 0%, #8fc25a 70%, #e8c14a 88%, var(--danger) 100%);
  background-size: 132px 100%;
}
.meter-clip {
  position: absolute; right: 0; top: 0; bottom: 0; width: 5px;
  background: var(--danger); opacity: 0; transition: opacity 0.4s;
}
.meter-clip.on { opacity: 1; transition: none; }

.text-button {
  height: 26px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--ink-muted);
  font: 11px var(--font-ui);
  letter-spacing: 0.04em;
  cursor: pointer;
}
.text-button:hover { color: var(--ink); text-decoration: underline; }

/* ---------- licenses dialog ---------- */
.licenses {
  width: min(720px, calc(100vw - 32px));
  max-height: min(600px, calc(100vh - 32px));
  padding: 0;
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  background: var(--panel-raised);
  color: var(--ink);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  -webkit-user-select: text;
  user-select: text;
}
.licenses[open] { display: flex; flex-direction: column; }
.licenses::backdrop { background: rgba(10, 10, 11, 0.6); }
.licenses-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 10px 18px;
  border-bottom: 1px solid var(--panel-edge);
}
.licenses-head h2 { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; }
.licenses-body { padding: 14px 18px 18px; overflow: auto; font-size: 12px; line-height: 1.5; }
.licenses-body > p { margin: 0 0 10px; color: var(--ink-muted); }
.licenses-body > p.product { color: var(--ink); }
.licenses-body details { border-top: 1px solid var(--panel-edge); }
.licenses-body details:last-child { border-bottom: 1px solid var(--panel-edge); }
.licenses-body summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 2px;
  cursor: pointer;
  list-style-position: inside;
}
.licenses-body summary .lic { color: var(--ink-muted); font-family: var(--font-num); font-size: 11px; white-space: nowrap; }
.licenses-body .used { margin: 0 0 8px; color: var(--ink-muted); }
.licenses-body pre {
  margin: 0 0 12px;
  padding: 10px 12px;
  max-height: 260px;
  overflow: auto;
  border-radius: 3px;
  background: var(--display);
  color: var(--ink);
  font: 11px/1.45 var(--font-num);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---------- sections ---------- */
.row {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 0;
}

.section {
  --accent: var(--signal);
  --accent-dim: var(--signal-dim);
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 8px 10px 6px;
  border: 1px solid var(--panel-edge);
  border-radius: 4px;
  background: var(--panel-raised);
}
.section.mod { --accent: var(--mod); --accent-dim: var(--mod-dim); }
.section.voice { --accent: var(--voice); --accent-dim: var(--voice-dim); }

.row > .section + .section { margin-left: 10px; }

/* The audio path: arrows between the top-row sections. */
.flow {
  flex: 0 0 22px;
  align-self: center;
  margin-top: -110px;
  height: 2px;
  background: var(--signal);
  position: relative;
  opacity: 0.8;
}
.flow::after {
  content: "";
  position: absolute; right: -1px; top: -4px;
  border: 5px solid transparent;
  border-left: 7px solid var(--signal);
  border-right: 0;
}
.row > .flow + .section { margin-left: 0; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.section-title {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.section-title::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 7px;
  border-radius: 1px;
  background: var(--accent);
  vertical-align: 0;
}
.section-dest {
  font-size: 10px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.display {
  position: relative;
  height: 64px;
  margin-bottom: 8px;
  border-radius: 3px;
  background: var(--display);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.7);
  overflow: hidden;
}
.display canvas { width: 100%; height: 100%; display: block; }
.display-readout {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px;
  font-family: var(--font-num);
  color: var(--accent);
}
.display-readout .big { font-size: 30px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.display-readout .big.chord { font-size: 17px; letter-spacing: 0; }
.display-readout .small { font-size: 11px; color: var(--ink-muted); text-align: right; line-height: 1.6; }

.controls {
  flex: 1 1 auto;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  min-height: 0;
}

/* ---------- faders ---------- */
.fader {
  width: var(--fader-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  outline: none;
  cursor: ns-resize;
  touch-action: none;
}
.fader-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.fader-track {
  position: relative;
  width: 100%;
  flex: 1 1 var(--track-h);
  min-height: 60px;
  /* scale ticks, 0..10 like hardware silkscreen */
  background:
    repeating-linear-gradient(180deg, var(--ink-faint) 0 1px, transparent 1px 10%) center / 30px calc(100% - var(--cap-h)) no-repeat;
}
.fader-track::before { /* slot */
  content: "";
  position: absolute;
  left: 50%; top: calc(var(--cap-h) / 2); bottom: calc(var(--cap-h) / 2);
  width: 4px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: var(--groove);
  box-shadow: 0 0 0 1px #000;
}
.fader-fill {
  position: absolute;
  left: 50%;
  width: 4px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.55;
}
.fader-cap {
  position: absolute;
  left: 50%;
  width: 26px;
  height: var(--cap-h);
  transform: translateX(-50%);
  border-radius: 2px;
  background: linear-gradient(180deg, var(--cap) 0%, var(--cap-shade) 100%);
  box-shadow: 0 2px 3px rgba(0,0,0,0.6);
}
.fader-cap::after { /* index line */
  content: "";
  position: absolute; left: 3px; right: 3px; top: 50%;
  height: 2px; margin-top: -1px;
  background: var(--accent);
  box-shadow: 0 0 0 0.5px rgba(0,0,0,0.35);
}
.section.voice .fader-cap::after { background: #1c1d1f; }
.fader:focus-visible .fader-cap { outline: 2px solid var(--focus); outline-offset: 1px; }
.fader.active .fader-cap { filter: brightness(1.08); }

.fader-value {
  font: 10px var(--font-num);
  color: var(--ink-muted);
  white-space: nowrap;
  min-height: 12px;
}
.fader.active .fader-value, .fader:hover .fader-value { color: var(--accent); }

/* ---------- switches ---------- */
.switch {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 50px;
  padding-top: 0;
}
.switch-label {
  white-space: nowrap;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
  margin-bottom: 2px;
}
.switch button {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid var(--panel-edge);
  border-radius: 3px;
  background: var(--panel);
  color: var(--ink-muted);
  font: 10px var(--font-num);
  cursor: pointer;
  white-space: nowrap;
}
.switch button::before { /* LED */
  content: "";
  flex: 0 0 6px;
  height: 6px;
  border-radius: 50%;
  background: #3a3a3a;
}
.switch button[aria-checked="true"],
.switch button[aria-pressed="true"] { color: var(--ink); border-color: #45464c; }
.switch button[aria-checked="true"]::before,
.switch button[aria-pressed="true"]::before { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.switch button svg { width: 18px; height: 10px; stroke: currentColor; fill: none; stroke-width: 1.5; }

.switch.inactive { opacity: 0.4; }

/* ---------- keyboard ---------- */
.keys {
  display: flex;
  gap: 12px;
  min-height: 0;
}
.octave {
  flex: 0 0 76px;
  display: grid;
  grid-template-columns: 26px 1fr 26px;
  grid-template-rows: 26px auto;
  align-items: center;
  gap: 6px 4px;
}
.octave output { text-align: center; font: 12px var(--font-num); color: var(--ink); }
.hint {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 10px;
  line-height: 1.5;
  color: var(--ink-muted);
  text-align: center;
}

.keyboard {
  position: relative;
  flex: 1 1 auto;
  border-radius: 3px;
  background: #0b0b0c;
  padding: 3px;
  touch-action: none;
}
.key {
  position: absolute;
  border-radius: 0 0 3px 3px;
  cursor: pointer;
}
.key.white {
  top: 3px; bottom: 3px;
  background: linear-gradient(180deg, #d9d5cc, #f1eee7 85%, #d0ccc2);
  box-shadow: inset -1px 0 0 #9c978c;
}
.key.black {
  top: 3px;
  height: 58%;
  z-index: 1;
  background: linear-gradient(180deg, #2a2b2e, #151517);
  box-shadow: 0 2px 2px rgba(0,0,0,0.6);
}
.key.white.down { background: linear-gradient(180deg, #c8c3b8, #e2ddd3); }
.key.black.down { background: #0c0c0d; }
.key.sounding::after {
  content: "";
  position: absolute; left: 50%; bottom: 7px;
  width: 7px; height: 7px; margin-left: -3.5px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 8px var(--signal);
}
.key .c-label {
  position: absolute; bottom: 5px; left: 0; right: 0;
  text-align: center; font: 9px var(--font-num); color: #7c786f;
  pointer-events: none;
}
.key.sounding .c-label { display: none; }

.empty {
  position: absolute;
  left: 50%; top: 45%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: 13px;
  color: var(--ink-muted);
}

@media (prefers-reduced-motion: reduce) {
  .meter-clip { transition: none; }
}