/* ---------- app chrome (dark) ---------- */
:root{
  --app-bg:#121317;
  --app-panel:#1b1d23;
  --app-panel-2:#23262e;
  --app-ink:#e9eaee;
  --app-muted:#9aa1ad;
  --app-line:#343841;
  --app-accent:#ff7a45;
}
/* ---------- paper (always light: it is printed) ---------- */
.sheet{
  --ink:#17181c;
  --muted:#6b7280;
  --line:#d6d6dc;
  --tick:#a4a4ae;
  --face:#ffffff;
  --accent:#c2410c;
  --drop:#c9c9d1;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:14px/1.45 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--app-bg); color:var(--app-ink);
}
button,input,select{font:inherit}

/* ---------- toolbar ---------- */
.toolbar{
  position:sticky; top:0; z-index:50;
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  padding:10px 16px; background:var(--app-panel); border-bottom:1px solid var(--app-line);
}
.brand{font-weight:700; letter-spacing:-.01em; margin-right:4px}
.toolbar .spacer{flex:1}
.btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; border:1px solid var(--app-line); background:var(--app-panel-2);
  color:var(--app-ink); border-radius:8px; cursor:pointer;
}
.btn:hover{border-color:#4a505c; background:#2a2e37}
.btn.primary{background:var(--app-accent); border-color:var(--app-accent); color:#1a0d06; font-weight:600}
.btn.primary:hover{background:#ff8d5f; border-color:#ff8d5f}
.switch{display:inline-flex; align-items:center; gap:7px; cursor:pointer; user-select:none}
.switch input{margin:0; accent-color:var(--app-accent)}

/* ---------- paper ---------- */
.paper-wrap{padding:24px 16px 90px; display:flex; justify-content:center}
.page-scale{width:1100px}
.sheet{
  background:#fff; color:var(--ink); width:1100px;
  border-radius:8px; padding:26px 34px 30px; box-shadow:0 10px 34px rgba(0,0,0,.45);
}
.sheet-head{margin-bottom:14px}
.sheet-title{
  font-size:26px; font-weight:700; letter-spacing:-.01em; color:var(--ink);
  border:1px solid transparent; background:transparent; border-radius:6px;
  padding:2px 6px; margin:0 0 2px -6px; width:100%; max-width:640px;
}
.sheet-sub{
  color:var(--muted); border:1px solid transparent; background:transparent;
  border-radius:6px; padding:2px 6px; margin-left:-6px; width:100%; max-width:640px;
}
.sheet input{color:var(--ink)}
body.edit .sheet-title:hover,body.edit .sheet-sub:hover,
body.edit .pedal-name:hover,body.edit .pedal-sub:hover,body.edit .ctl-label:hover{
  border-color:var(--line);
}
.sheet-title:focus,.sheet-sub:focus,.pedal-name:focus,.pedal-sub:focus,.ctl-label:focus{
  outline:none; border-color:var(--accent);
}

/* ---------- board / rows ---------- */
.board{display:block}
.row{display:flex; flex-wrap:nowrap; gap:16px; align-items:flex-start; border-radius:8px}
.row.tail-over,.ctl-row.tail-over{
  outline:2px dashed var(--accent); outline-offset:5px;
}

/* strip between rows: new-row target */
.strip{position:relative; height:12px}
body.edit .strip{height:26px}
.strip-line{
  position:absolute; left:0; right:0; top:50%; height:0;
  border-top:1.5px dashed transparent; transform:translateY(-50%);
}
body.edit .strip:hover .strip-line,.strip.over .strip-line{border-top-color:var(--drop)}
.strip.over .strip-line{border-top-color:var(--accent)}
.strip .plus{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  opacity:0; transition:opacity .12s;
}
body.edit .strip:hover .plus{opacity:1}

.plus{
  width:22px; height:22px; border-radius:50%; display:none;
  align-items:center; justify-content:center; padding:0; line-height:1;
  background:#fff; color:var(--ink); border:1px solid var(--line);
  font-size:15px; cursor:pointer; z-index:4;
}
body.edit .plus{display:inline-flex}
.plus:hover{border-color:var(--accent); color:var(--accent)}

/* ---------- pedal ---------- */
.pedal{
  position:relative; flex:0 0 auto; background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:10px 12px 12px; break-inside:avoid; page-break-inside:avoid;
  display:flex; flex-direction:column;
  /* a pedal can be resized freely, but never smaller than what it holds */
  min-width:min-content; min-height:min-content;
}
.resize{
  position:absolute; right:3px; bottom:3px; width:13px; height:13px; display:none;
  cursor:nwse-resize; touch-action:none;
  border-right:2px solid var(--drop); border-bottom:2px solid var(--drop);
  border-bottom-right-radius:4px;
}
body.edit .pedal:hover .resize{display:block}
.resize:hover{border-color:var(--accent)}
.pedal.dragging{opacity:.35}
.pedal > .plus{position:absolute; top:50%; transform:translateY(-50%); opacity:0; transition:opacity .12s}
/* centred in the row gap, clear of anything inside the card */
.pedal > .plus.left{left:-17px}
.pedal > .plus.right{right:-17px}
body.edit .pedal:hover > .plus,
body.edit .pedal:hover + .pedal > .plus.left{opacity:1}
.pedal::before,.pedal::after{
  content:""; position:absolute; top:6px; bottom:6px; width:3px; border-radius:3px;
  background:var(--accent); opacity:0;
}
.pedal::before{left:-9px}
.pedal::after{right:-9px}
.pedal.ins-left::before,.pedal.ins-right::after{opacity:1}

.pedal-head{position:relative; margin-bottom:9px; flex:0 0 auto}
.pedal-name{
  font-size:15px; font-weight:700; width:100%; min-width:0; color:var(--ink);
  border:1px solid transparent; background:transparent; border-radius:6px; padding:2px 5px; margin-left:-5px;
}
.pedal-sub{
  font-size:12px; color:var(--muted); width:100%; min-width:0;
  border:1px solid transparent; background:transparent; border-radius:6px; padding:1px 5px; margin-left:-5px;
}
.pedal-tools{
  position:absolute; top:-9px; right:-7px; display:none; gap:2px; z-index:5;
  background:#fff; border:1px solid var(--line); border-radius:8px; padding:2px;
}
body.edit .pedal:hover .pedal-tools{display:flex}
.pedal-tools button,.ctl-tools button{
  border:0; background:transparent; color:var(--ink); cursor:pointer;
  padding:2px 5px; font-size:12px; line-height:1.3; border-radius:5px;
}
.pedal-tools button:hover,.ctl-tools button:hover{background:#eeeef2}
.pedal-tools button.danger,.ctl-tools button.danger{color:#b91c1c}

/* ---------- control area inside a pedal ---------- */
.ctl-area{display:flex; flex-direction:column; justify-content:space-evenly; flex:1}
.ctl-row{display:flex; gap:10px; align-items:flex-start; justify-content:space-evenly; border-radius:6px}
.ctl-strip{position:relative; height:5px}
body.edit .ctl-strip{height:16px}
.ctl-strip .strip-line{border-top-width:1px}
body.edit .ctl-strip:hover .strip-line,.ctl-strip.over .strip-line{border-top-color:var(--drop)}
.ctl-strip.over .strip-line{border-top-color:var(--accent)}
.ctl-strip .plus{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
                 opacity:0; transition:opacity .12s}
body.edit .ctl-strip:hover .plus{opacity:1}
.empty-slot{border:1.5px dashed var(--drop); border-radius:8px; padding:14px; text-align:center}

/* ---------- control ---------- */
.ctl{position:relative; flex:0 0 78px; width:78px; text-align:center}
.ctl svg{display:block; width:100%; height:auto; touch-action:none; cursor:pointer}
.ctl-label{
  display:block; width:100%; text-align:center; overflow:hidden; text-overflow:ellipsis; font-size:11px; font-weight:600; color:var(--ink);
  border:1px solid transparent; background:transparent; border-radius:5px; padding:1px 2px; margin-top:3px;
}
.ctl-val{font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums}
.ctl-tools{
  position:absolute; top:-8px; right:-4px; display:none; gap:1px; z-index:3;
  background:#fff; border:1px solid var(--line); border-radius:6px; padding:1px;
}
body.edit .ctl:hover .ctl-tools{display:flex}
.grip-btn{cursor:grab}
.grip-btn:active{cursor:grabbing}
.ctl.dragging{opacity:.35}
.ctl > .plus{
  position:absolute; top:34%; transform:translateY(-50%);
  width:18px; height:18px; font-size:13px; opacity:0; transition:opacity .12s;
}
/* kept inside the pedal, so they never meet the card's own buttons */
.ctl > .plus.left{left:-6px}
.ctl > .plus.right{right:-6px}
body.edit .ctl:hover > .plus,
body.edit .ctl:hover + .ctl > .plus.left{opacity:1}
.ctl::before,.ctl::after{
  content:""; position:absolute; top:2px; height:66%; width:3px; border-radius:3px;
  background:var(--accent); opacity:0;
}
.ctl::before{left:-8px}
.ctl::after{right:-8px}
.ctl.ins-left::before,.ctl.ins-right::after{opacity:1}
.btn.tiny{padding:3px 9px; font-size:12px; background:#f4f4f7; color:var(--ink); border-color:var(--line)}
.btn.tiny:hover{background:#eaeaef; border-color:#b9b9c2}

/* ---------- svg parts ---------- */
.dial-face{fill:var(--face); stroke:var(--ink); stroke-width:2.2}
.tick{stroke:var(--tick); stroke-width:1.3; stroke-linecap:round}
.tick.major{stroke:var(--ink); stroke-width:2}
.tick.zero{stroke:var(--ink); stroke-width:2.6}
.pointer{stroke:var(--accent); stroke-width:3.4; stroke-linecap:round}
.hub{fill:var(--ink)}
.sw-track{fill:var(--face); stroke:var(--ink); stroke-width:2.2}
.sw-tick{stroke:var(--tick); stroke-width:1.4; stroke-linecap:round}
.sw-lever{fill:var(--accent)}
.sw-label{fill:var(--muted); font-size:12px}
.sw-label.on{fill:var(--ink); font-weight:700}
.spacer-box{fill:none; stroke:var(--drop); stroke-width:1.5; stroke-dasharray:5 5}
body:not(.edit) .spacer-box{display:none}

/* ---------- modal ---------- */
dialog{
  border:1px solid var(--app-line); border-radius:12px; padding:0; max-width:400px; width:92%;
  background:var(--app-panel); color:var(--app-ink);
}
dialog::backdrop{background:rgba(0,0,0,.6)}
.m-head{padding:14px 16px; border-bottom:1px solid var(--app-line); font-weight:700}
.m-body{padding:14px 16px; display:grid; gap:10px}
.m-foot{padding:12px 16px; border-top:1px solid var(--app-line); display:flex; gap:8px; justify-content:flex-end}
.btn.danger{color:#fca5a5; border-color:#5d3030; background:#2a1d1d}
.btn.danger:hover{color:#fecaca; border-color:#7a3d3d; background:#3a2424}
.m-foot .btn.danger{margin-right:auto}
.field{display:grid; gap:4px}
.field label{font-size:12px; color:var(--app-muted)}
.field input,.field select{
  padding:7px 9px; border:1px solid var(--app-line); border-radius:7px;
  background:var(--app-panel-2); color:var(--app-ink); width:100%;
}
.hint{font-size:11px; color:var(--app-muted)}

/* ---------- context menu ---------- */
.menu{
  position:fixed; z-index:200; min-width:186px; padding:5px;
  background:var(--app-panel); color:var(--app-ink);
  border:1px solid var(--app-line); border-radius:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.5);
}
.menu-head{padding:5px 9px 6px; font-size:11px; color:var(--app-muted)}
.menu button{
  display:block; width:100%; text-align:left; padding:7px 9px;
  background:transparent; border:0; color:var(--app-ink); border-radius:7px; cursor:pointer;
}
.menu button:hover{background:var(--app-panel-2)}

/* ---------- print ---------- */
@page{size:A4 landscape; margin:12mm}
@media print{
  body{background:#fff}
  .toolbar,.pedal-tools,.ctl-tools,.grip,.plus,.strip-line,.menu,.no-print{display:none !important}
  .paper-wrap{padding:0; display:block}
/* the on-screen zoom is a viewport convenience only; paper is 1:1 */
  .page-scale{width:auto !important; zoom:1 !important}
  .sheet{width:auto; box-shadow:none; border-radius:0; padding:0}
  .strip{height:10px}
  .ctl-strip{height:4px}
  .spacer-box{display:none !important}
  .row{gap:10px}
  .pedal{border-color:#999}
  .sheet input{color:#000 !important}
}