/* =====================================================================
   NEON-84 PATCH EDITOR (built by editor.js). Reuses the main sheet's
   .sqbar/.sb/.tab/.sep/.sqlbl/.bezel/.screen; everything else is scoped
   under #pe so it can't leak into the main panel.
   ===================================================================== */
#pe { position: fixed; inset: 0; z-index: 35; display: none; flex-direction: column;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, var(--chassis-2), var(--chassis)); }
#pe.show { display: flex; }

/* ---------- top bar ---------- */
#pe .pe-top, #pe .pe-pick { height: 54px; border-bottom: 2px solid #000; box-shadow: 0 1px 0 #34313d; }
#pe .sb { height: 36px; }
#pe .tab { width: 34px; height: 36px; }
#pe .tab.off { opacity: .3; pointer-events: none; }
#pe .tab.used::after { background: var(--stripe2); box-shadow: 0 0 4px var(--stripe2); }
#pe .tab.on.used::after { background: #0b0a0e; box-shadow: none; }
#pe .pe-back { min-width: 72px; }
#pe .pe-bezel { flex: 0 0 auto; padding: 4px; border-radius: 5px; }
#pe .pe-lcd { display: block; width: 188px; height: 33px; }
#pe .pe-fac.sure { background: linear-gradient(180deg, #ff5a6e, #d93a50); color: #2a0509;
  box-shadow: 0 0 10px rgba(255,80,100,.6), 0 2px 0 #0b0a0e; animation: peSure .4s steps(1) infinite; }
@keyframes peSure { 50% { box-shadow: 0 0 2px rgba(255,80,100,.3), 0 2px 0 #0b0a0e; } }

#pe .pe-pick { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: none;
  background: linear-gradient(180deg, #2b1f2a, #1b141c); }
#pe .pe-pick.show { display: flex; }
#pe .pe-picklbl { color: var(--accent); text-shadow: 0 0 6px var(--glow, transparent); padding: 0 6px; }

/* ---------- body: section panels ---------- */
#pe .pe-body { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; touch-action: pan-y;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #3a3744 transparent; }
#pe .pe-grid { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; padding: 8px 10px 12px; }
#pe .pe-sec { flex: 1 1 auto; min-width: 0; max-width: 100%; border-radius: 6px; overflow: hidden;
  background: linear-gradient(180deg, #24222b, #1a181f);
  box-shadow: 0 0 0 1px #000, 0 2px 0 1px #0b0a0e, inset 0 1px 0 rgba(255,255,255,.07); }
/* Juno-style coloured section header strip with engraved dark lettering */
#pe .pe-sh { height: 17px; display: flex; align-items: center; gap: 7px; padding: 0 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.08)), var(--sc);
  font: 900 9px/1 Roboto, sans-serif; letter-spacing: 3px; color: #17131a;
  text-shadow: 0 1px 0 rgba(255,255,255,.35); box-shadow: inset 0 -1px 0 rgba(0,0,0,.45); }
#pe .pe-sh b { font: 800 8px/1 Roboto, sans-serif; letter-spacing: 1px; opacity: .55; }
#pe .pe-ctls { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-around; gap: 6px 4px; padding: 8px 6px 7px; }

/* labels shared by knobs, enums and the ADSR view */
#pe .pe-kl { font: 800 7.5px/1 Roboto, sans-serif; letter-spacing: 1.3px; color: var(--text); white-space: nowrap; }

/* ---------- knobs (same look as the main .kdial/.kcap, 40px) ---------- */
#pe .pe-knob { width: 52px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: ns-resize; touch-action: none; }
#pe .pe-dial { width: 40px; height: 40px; border-radius: 50%; position: relative;
  background: conic-gradient(from -135deg, #2a2731 0deg, #2a2731 var(--a0, 0deg), var(--accent) var(--a0, 0deg),
    var(--accent) var(--a1, 0deg), #2a2731 var(--a1, 0deg), #2a2731 270deg, transparent 270deg); }
#pe .pe-dial::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #0c0b10; }
#pe .pe-cap { position: absolute; inset: 5px; border-radius: 50%; transform: rotate(var(--rot, -135deg));
  background: radial-gradient(circle at 35% 30%, #5b5766, #2a2731 55%, #17151c);
  box-shadow: 0 3px 5px rgba(0,0,0,.7), inset 0 1px 1px rgba(255,255,255,.18); }
#pe .pe-cap::after { content: ""; position: absolute; left: 50%; top: 2px; width: 3px; height: 9px; margin-left: -1.5px;
  border-radius: 2px; background: #f4efe2; box-shadow: 0 0 3px rgba(255,255,255,.5); }
/* value readout: dim LCD text under the label, and over the cap while dragging */
#pe .pe-kval { font: 700 7.5px/1 Roboto, sans-serif; font-style: normal; letter-spacing: .5px; color: var(--lit);
  opacity: .7; white-space: nowrap; }
#pe .pe-kv { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; display: none;
  padding: 3px 4px; border-radius: 3px; background: var(--lcd-bg); color: var(--lit);
  font: 800 9px/1 Roboto, sans-serif; letter-spacing: .5px; white-space: nowrap; pointer-events: none;
  text-shadow: 0 0 5px var(--lit); box-shadow: 0 0 0 1px #000, 0 0 10px var(--glow, transparent); }
#pe .pe-knob.drag .pe-kv { display: block; }
#pe .pe-knob.drag .pe-kval { opacity: 1; text-shadow: 0 0 4px var(--lit); }
#pe .pe-knob.drag .pe-dial { filter: drop-shadow(0 0 4px var(--glow, transparent)); }

/* ---------- enum: segmented buttons ---------- */
#pe .pe-enum { display: flex; flex-direction: column; align-items: center; gap: 5px; }
#pe .pe-seg { display: flex; gap: 3px; padding: 3px; border-radius: 6px; background: #0c0b10;
  box-shadow: inset 0 1px 3px #000, 0 1px 0 #34313d; }
#pe .pe-seg button { border: 0; min-width: 38px; height: 36px; padding: 0 6px; border-radius: 4px; position: relative;
  font: 800 9px/1 Roboto, sans-serif; letter-spacing: 1px; color: #aaa5b4;
  background: linear-gradient(180deg, #34313c, #26232d); box-shadow: 0 2px 0 #0b0a0e, inset 0 1px 0 rgba(255,255,255,.1); }
#pe .pe-seg button.glyph { min-width: 36px; padding: 0 3px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; }
#pe .pe-seg svg { width: 22px; height: 11px; overflow: visible; }
#pe .pe-seg svg path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
#pe .pe-seg small { font: 800 6.5px/1 Roboto, sans-serif; letter-spacing: .5px; }
#pe .pe-seg button.on { color: #0b0a0e; background: var(--accent);
  box-shadow: 0 0 10px var(--glow, transparent), 0 1px 0 #0b0a0e; transform: translateY(1px); }

/* ---------- ADSR view ---------- */
#pe .pe-envw { display: flex; flex-direction: column; align-items: center; gap: 5px; }
#pe .pe-envb { padding: 3px; border-radius: 4px; }
#pe .pe-env { display: block; width: 100px; height: 44px; }

/* ---------- audition keyboard ---------- */
#pe .pe-kbar { flex: 0 0 auto; height: 28vh; min-height: 84px; max-height: 150px; display: flex; gap: 8px; padding: 7px 10px 9px;
  border-top: 2px solid #000; box-shadow: inset 0 1px 0 #34313d; background: linear-gradient(180deg, #1c1a21, #141318); }
#pe .pe-kside { flex: 0 0 58px; display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; gap: 3px; }
#pe .pe-kside .sb { justify-content: center; padding: 0 4px; height: auto; min-height: 30px; flex: 1; }
#pe .pe-octl { text-align: center; color: var(--accent); }
#pe .pe-kframe { flex: 1; min-width: 0; position: relative; border-radius: 4px 4px 7px 7px; background: #050407; padding: 0 3px 4px;
  box-shadow: inset 0 4px 8px #000, 0 1px 0 #34313d; }
#pe .pe-kframe::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; z-index: 5; pointer-events: none;
  background: linear-gradient(180deg, #8a1f3a, #3a0f1d); box-shadow: 0 2px 4px rgba(0,0,0,.8); border-radius: 4px 4px 0 0; }
#pe .pe-keys { position: absolute; left: 3px; right: 3px; top: 0; bottom: 4px; overflow: hidden; touch-action: none; }
#pe .pek { position: absolute; top: 0; }
#pe .pek.w { bottom: 0; border-radius: 0 0 5px 5px; z-index: 1;
  background: linear-gradient(180deg, #d9d2c0 0%, #f6f1e5 8%, #f1ebde 80%, #e2dac8 94%, #c9bfab 100%);
  box-shadow: inset -1px 0 0 #b4ab98, inset 1px 0 0 #fffaf0, 0 3px 0 #8f8674; }
#pe .pek.b { z-index: 2; height: 60%; border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, #050506 0%, #26242c 6%, #1a181f 78%, #333039 88%, #0e0d12 100%);
  box-shadow: inset 1px 0 0 #3d3a45, inset -1px 0 0 #000, 0 3px 4px rgba(0,0,0,.6); }
#pe .pek.w.down { background: linear-gradient(180deg, #cfc7b4 0%, #ece5d5 10%, var(--accent) 260%);
  box-shadow: inset -1px 0 0 #b4ab98, inset 0 0 16px var(--glow, transparent), 0 1px 0 #8f8674; }
#pe .pek.b.down { background: linear-gradient(180deg, #050506 0%, #1e1c22 8%, #18161c 70%, var(--accent) 180%);
  box-shadow: inset 0 0 12px var(--glow, transparent), 0 1px 2px rgba(0,0,0,.6); }
#pe .pek.down::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 7px; height: 3px; border-radius: 2px;
  background: var(--accent); box-shadow: 0 0 8px 2px var(--accent); }
#pe .pe-klbl { position: absolute; left: 0; right: 0; bottom: 13px; text-align: center; pointer-events: none;
  font: 700 9px/1 Roboto, sans-serif; color: #c2264f; }

/* ---------- small screens (640x320 class) ---------- */
@media (max-width: 720px) {
  #pe .pe-lcd { width: 150px; height: 27px; }
  #pe .pe-back { min-width: 56px; padding: 0 8px; }
  #pe .pe-top, #pe .pe-pick { height: 50px; gap: 5px; }
  #pe .pe-grid { gap: 6px; padding: 6px 6px 10px; }
  #pe .pe-kside { flex-basis: 50px; }
}
@media (max-height: 340px) {
  #pe .pe-kbar { min-height: 76px; padding: 5px 8px 7px; }
  #pe .pe-ctls { padding: 6px 5px 5px; }
}
/* big screens: a touch more room per control */
@media (min-width: 1000px) and (min-height: 440px) {
  #pe .pe-knob { width: 58px; }
  #pe .pe-dial { width: 44px; height: 44px; }
  #pe .pe-env { width: 120px; height: 50px; }
}