/* Parameter list (right of the panel). Colours follow the panel: frame #C8C888, title band #b3b378, dark outline #3b3b3b, LCD green. */
#stage{ display:flex; gap:8px; align-items:flex-start; width:max-content; }
#main{ width:960px; flex:none; }
#plist{ width:380px; flex:none; display:flex; flex-direction:column; background:var(--bg); border:1px solid var(--dk); height:var(--mainh, 613px); font:11px/1.35 ui-monospace,"SF Mono",Menlo,Consolas,monospace; color:var(--ink); }
#plist .ph{ padding:4px 8px; background:var(--hd); border-bottom:1px solid var(--dk); font:700 13px "Hiragino Sans","Yu Gothic UI",system-ui,sans-serif; display:flex; justify-content:space-between; align-items:center; }
#plist .ph small{ font:10px monospace; opacity:.7; font-weight:400; }
#plist .pn{ margin:5px; padding:4px 8px; background:var(--lcd); color:var(--lcdf); border:1px solid var(--lcd-edge); }
#plist .pn b{ display:block; font-size:14px; font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#plist .pn span{ font-size:10px; opacity:.75; }
#plist .tools{ display:flex; gap:4px; padding:0 5px 5px; align-items:center; font:10px "Hiragino Sans","Yu Gothic UI",system-ui,sans-serif; }
#plist .tools label{ display:flex; gap:3px; align-items:center; cursor:pointer; margin-right:auto; }
#plist .tools button{ background:var(--dk); color:var(--on-dk); font:700 10px inherit; padding:2px 8px; border-radius:3px; box-shadow:inset 0 -2px 0 var(--dk-sh); cursor:pointer; }
#plist .scroll{ flex:1; overflow:auto; padding:0 5px 5px; scrollbar-color:var(--dk) transparent; scrollbar-width:thin; }
#plist section{ border:1px solid var(--dk); background:var(--panel); margin-bottom:4px; }
#plist h3{ margin:0; padding:0 6px; background:var(--hd); border-bottom:1px solid var(--dk); font:700 11px "Hiragino Sans","Yu Gothic UI",system-ui,sans-serif; }
#plist h4{ margin:0; padding:1px 6px 0; font:700 10px "Hiragino Sans","Yu Gothic UI",system-ui,sans-serif; background:var(--sub-bg); }
#plist .r{ display:grid; grid-template-columns:30px 1fr auto; gap:0 6px; padding:0 6px; align-items:baseline; }
#plist .r:nth-child(even){ background:var(--row-alt); }
#plist .no{ opacity:.55; text-align:right; }
#plist .nm{ white-space:nowrap; overflow:hidden; background:linear-gradient(to right,transparent 0,transparent 0); }
#plist .v{ text-align:right; min-width:92px; }
#plist .v .vi{ width:38px; padding:0 4px; margin:0; border:0; border-radius:0; font:inherit; text-align:right; background:var(--lcd); color:var(--lcdf); box-shadow:none; }
#plist .v .vi:focus{ outline:2px solid var(--on); outline-offset:-1px; background:var(--lcd-edge); }
#plist .v em{ font-style:normal; opacity:.8; margin-right:4px; }
#plist .v em[hidden]{ display:none; }
#plist .r.ch .v .vi{ background:var(--led); color:var(--ch-fg); box-shadow:0 0 0 1px var(--on) inset; }
#plist .r.un .nm, #plist .r.un .no{ opacity:.45; }
#plist .r.un .nm::after{ content:" – not used"; font-size:9px; }
#plist .r.off{ display:none; }
#plist.onlych .r:not(.ch){ display:none; }
#plist.onlych h4:not(.has), #plist.onlych section:not(.has){ display:none; }
#plist .foot{ padding:3px 8px; border-top:1px solid var(--dk); background:var(--hd); font:10px "Hiragino Sans","Yu Gothic UI",system-ui,sans-serif; display:flex; gap:10px; }
#plist .foot .sw1{ display:inline-block; width:9px; height:9px; vertical-align:-1px; margin-right:3px; border:1px solid var(--dk); }

/* BPM box: the generic ".btn input" rule makes inputs invisible overlays (for the file picker); the BPM number must stay visible */
.btn.bpmbox input{ position:static; inset:auto; opacity:1; width:44px; cursor:text; }

/* update-history window (click "UPDATED" in the title) */
#title .date:hover{ filter:brightness(1.25); }
#histdlg{ width:min(560px, 92vw); max-height:80vh; padding:0; border:1px solid var(--dk); background:var(--bg); color:var(--ink); font:12px/1.5 "Hiragino Sans","Yu Gothic UI",system-ui,sans-serif; }
#histdlg::backdrop{ background:rgba(0,0,0,.45); }
#histdlg .hh{ display:flex; justify-content:space-between; align-items:center; padding:4px 8px; background:var(--hd); border-bottom:1px solid var(--dk); font-size:13px; }
#histdlg .hh button{ background:var(--dk); color:var(--on-dk); font:700 10px inherit; padding:2px 8px; margin-left:4px; border-radius:3px; cursor:pointer; box-shadow:inset 0 -2px 0 var(--dk-sh); }
#histdlg .hb{ padding:6px 14px 12px; overflow:auto; max-height:calc(80vh - 34px); }
#histdlg h2, #histdlg h3{ margin:8px 0 4px; font-size:14px; background:var(--tag); color:var(--on-dk); padding:1px 8px; display:inline-block; }
#histdlg ul{ margin:4px 0 8px; padding-left:18px; list-style:disc; } #histdlg li{ margin:2px 0; }
#histdlg code{ font:11px ui-monospace,Menlo,Consolas,monospace; background:var(--sub-bg); padding:0 3px; }

/* Page layout: the whole UI (panel + parameter list) sits in the middle of the browser window with a 10px margin on every side.
   margin:auto centres it both ways; when the window is smaller than the UI it starts at the 10px margin and scrolls. */
html{ min-height:100%; }
body{ box-sizing:border-box; min-height:100vh; min-width:max-content; padding:10px; display:flex; }
#stage{ margin:auto; }

/* Footer: credits to the original Synth1 (under the oscilloscope, same width as the panel) */
#credits{ margin-top:6px; padding:5px 10px; border:1px solid var(--dk); background:var(--bg); color:var(--ink); font:11px/1.5 "Hiragino Sans","Yu Gothic UI",system-ui,sans-serif; }
#credits p{ margin:0; }
#credits p.small{ font-size:10px; opacity:.75; }
#credits a{ color:inherit; font-weight:700; text-decoration:underline; text-underline-offset:2px; }
#credits a:hover{ color:var(--on); }

/* pop-up list of an LCD button (effect type / delay type / chorus type) */
.lcd.pop{ cursor:pointer; }
.lcdmenu{ position:fixed; z-index:50; display:grid; grid-auto-flow:column; background:var(--lcd); border:1px solid var(--lcd-edge); box-shadow:0 3px 10px rgba(0,0,0,.45); font:12px/18px monospace; }
.lcdmenu .lcdopt{ display:block; min-width:46px; padding:1px 10px; text-align:left; background:transparent; color:var(--lcdf); cursor:pointer; white-space:nowrap; }
.lcdmenu .lcdopt:hover, .lcdmenu .lcdopt:focus-visible{ background:var(--lcdf); color:var(--lcd); outline:none; }
.lcdmenu .lcdopt.sel{ box-shadow:inset 3px 0 0 var(--on); font-weight:700; }
.lcdmenu .lcdopt img{ height:14px; vertical-align:middle; filter:var(--lcd-ico); }

/* patch display: click to choose a patch from the folder */
#lcdbox.pl-click{ cursor:pointer; }
.lcdmenu.pl{ display:block; max-height:min(60vh, 420px); overflow:auto; scrollbar-color:var(--lcdf) transparent; scrollbar-width:thin; }
.lcdmenu.pl .lcdopt{ display:flex; gap:10px; width:100%; }
.lcdmenu.pl .lcdopt i{ font-style:normal; opacity:.6; min-width:2.2em; text-align:right; }
.lcdmenu.pl .lcdopt.more{ border-top:1px solid var(--lcdf); opacity:.85; }

/* MIDI input (js/midi.js) */
.midibtn .mdot{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-left:4px; background:#777; vertical-align:middle; }
.midibtn.on .mdot{ background:#3fe05a; }
.midibtn.act .mdot{ background:#fff; box-shadow:0 0 5px #fff; }
.midipanel{ display:block; width:360px; max-height:calc(100vh - 8px); overflow:auto; padding:8px 10px; color:var(--lcdf); font:12px/1.5 monospace; }
.midipanel .dim{ opacity:.7; }
.midipanel .mhead{ display:flex; justify-content:space-between; border-bottom:1px solid var(--lcdf); margin-bottom:4px; }
.midipanel .merr{ color:var(--on); }
.midipanel .mrow{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.midipanel .mrow .tgt{ margin-left:auto; }
.midipanel .mrow .val{ min-width:3.5em; text-align:center; }
.midipanel .lcdopt{ width:100%; }
.midipanel .lcdopt.tgl{ width:auto; }
.midipanel .sb2{ background:transparent; color:var(--lcdf); border:0; cursor:pointer; font:inherit; padding:0 6px; }
.midipanel .sb2:hover{ background:var(--lcdf); color:var(--lcd); }
.midipanel .msep{ border-top:1px solid var(--lcdf); margin-top:4px; padding-top:4px; }
.midipanel .mfoot{ display:flex; gap:6px; margin-top:6px; }
.midipanel .mfoot .btn{ padding:2px 8px; font-size:11px; border:0; font-family:inherit; }
.midipanel .mfoot .r{ margin-left:auto; }
#midistat{ position:fixed; left:8px; bottom:8px; z-index:40; display:none; font:11px monospace; background:rgba(0,0,0,.8); color:#7dff9b; padding:3px 8px; border-radius:3px; pointer-events:none; }
.learning{ outline:2px dashed var(--on); outline-offset:2px; animation:mlearn .7s steps(2) infinite; }
@keyframes mlearn{ 50%{ outline-color:transparent; } }