/* ACID·01 — bassline unit chrome
   editorial monospace base, retro-analog silkscreen palette, single dark theme */

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#EDE6D8;
  --paper:#161310;
  --c:#FFD41E;   /* acid yellow — primary accent */
  --m:#FF6A00;   /* orange */
  --y:#E5352B;   /* red */
  --hair:rgba(237,230,216,.26);
  --field:#0e0c09;
  --hover:#000;
  --chev:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M13 6L8 11L3 6' stroke='%23EDE6D8' stroke-linejoin='bevel'/></svg>");
}
html,body{height:100%}
body{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  background:var(--paper);
  color:var(--ink);
  display:flex;flex-direction:column;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- top bar ---------- */
#topbar{display:flex;align-items:stretch;border-bottom:1px solid var(--hair);flex:0 0 auto}
#brand{padding:10px 16px;display:flex;flex-direction:column;justify-content:center;min-width:232px}
#brand b{font-size:14px;letter-spacing:.16em;font-weight:800}
#brand span{font-size:8.5px;letter-spacing:.2em;opacity:.6;margin-top:4px}
#topfill{flex:1}
#brandmark{
  display:flex;align-items:center;padding:0 16px;
  border-right:1px solid var(--hair);color:var(--ink);
}
#brandmark svg{height:17px;width:auto;display:block}
#brandmark:hover{opacity:.55}

/* ---------- layout ---------- */
main{flex:1;display:flex;min-height:0}
#stage{flex:1;display:flex;flex-direction:column;min-width:0;padding:16px 16px 10px}
#cwrap{position:relative;flex:1;border:1px solid var(--hair);min-height:0;overflow:hidden;background:var(--field)}
#cv{position:absolute;top:0;left:0;display:block}
#caption{
  padding:9px 2px 2px;font-size:10px;letter-spacing:.13em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85;
}

/* ---------- control panel ---------- */
#panel{
  width:312px;flex:0 0 auto;border-left:1px solid var(--hair);
  overflow-y:auto;background:var(--paper);padding-bottom:36px;
}
#panel::-webkit-scrollbar{width:5px}
#panel::-webkit-scrollbar-thumb{background:var(--hair)}
.sec{padding:12px 14px 14px;border-bottom:1px solid var(--hair)}
.sec h3{
  font-size:9px;letter-spacing:.22em;font-weight:700;margin-bottom:10px;
  display:flex;align-items:center;gap:8px;text-transform:uppercase;
}
.sec h3::after{content:'';flex:1;height:1px;background:var(--hair)}

.row{display:grid;grid-template-columns:86px 1fr 42px;align-items:center;gap:8px;margin:7px 0}
.row label{font-size:9px;letter-spacing:.13em;text-transform:uppercase}
.row .val{font-size:9px;text-align:right;opacity:.75;font-variant-numeric:tabular-nums}

/* ---------- inputs ---------- */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:16px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:1.5px;background:var(--ink)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:9px;height:13px;background:var(--ink);margin-top:-5.75px;border:none}
input[type=range]:hover::-webkit-slider-thumb{background:var(--c)}
input[type=range]::-moz-range-track{height:1.5px;background:var(--ink)}
input[type=range]::-moz-range-thumb{width:9px;height:13px;background:var(--ink);border:none;border-radius:0}

button{
  font-family:inherit;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  background:transparent;border:1.2px solid var(--ink);color:var(--ink);
  padding:7px 8px;cursor:pointer;
}
button:hover{background:var(--hover)}
button.on{background:var(--ink);color:var(--paper)}
button:active{transform:translateY(1px)}
button:disabled{opacity:.3;pointer-events:none}
button.rec-live{background:var(--y);border-color:var(--y);color:#fff}

button.ic{position:relative;padding-left:26px;padding-right:26px}
button.ic .bl{display:inline-block}
button.ic .bi{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:13px;height:13px}
button.ic .bi svg{display:block;width:100%;height:100%}
select:focus,input:focus{outline:1.5px solid var(--c);outline-offset:-1.5px}

.seg{display:flex}
.seg button{flex:1;border-right-width:0;padding:7px 2px}
.seg button:last-child{border-right-width:1.2px}
/* stacked boxed controls share one stroke */
.sec>button+.seg,.sec>.seg+.seg,.sec>.seg+button,.sec>button+button{margin-top:-1.2px}
.wide{width:100%;margin-top:6px}
.hint{font-size:8.5px;letter-spacing:.1em;opacity:.5;margin-top:8px;line-height:1.5}

/* ---------- knobs ---------- */
.knobs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 4px;margin-top:6px}
.knob{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:ns-resize;touch-action:none;user-select:none;-webkit-user-select:none}
.knob svg{display:block}
.knob .kl{font-size:7.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.knob .kv{font-size:8px;opacity:.55;font-variant-numeric:tabular-nums;height:10px}
.knob:hover .kl{color:var(--c);opacity:1}

/* ---------- deck: readout strip + keyboard ---------- */
#deck{flex:0 0 auto;border:1px solid var(--hair);margin-top:10px;background:var(--paper)}
#strip{display:grid;grid-template-columns:repeat(16,1fr);border-bottom:1px solid var(--hair)}
.scell{
  position:relative;padding:6px 1px 7px;text-align:center;
  border-right:1px solid var(--hair);cursor:pointer;user-select:none;-webkit-user-select:none;min-width:0;
}
.scell:last-child{border-right:none}
.scell:nth-child(4n+1){background:rgba(237,230,216,.035)}
.scell .nn{display:block;font-size:10px;letter-spacing:.02em}
.scell .om{display:block;font-size:7.5px;opacity:.55;margin-top:2px;height:9px}
.scell.rest .nn,.scell.rest .om{opacity:.22}
.scell.tie .nn{opacity:.5}
.scell.acc::before{content:'';position:absolute;top:0;left:18%;right:18%;height:3px;background:var(--m)}
.scell.sld::after{content:'';position:absolute;right:-10px;top:46%;width:20px;height:1.5px;background:var(--c);z-index:2;pointer-events:none}
.scell.play{box-shadow:inset 0 -3px 0 var(--c)}
.scell.cur{outline:1.5px solid var(--c);outline-offset:-1.5px}

#deckrow{display:grid;grid-template-columns:auto 1fr auto;min-height:104px}
#funcs{display:flex;flex-direction:column;padding:8px;border-right:1px solid var(--hair);width:206px}
.frow{display:flex}
.frow+.frow{margin-top:-1.2px}
.frow button{flex:1;padding:6px 2px;font-size:8px;border-right-width:0}
.frow button:last-child{border-right-width:1.2px}
.frow button.lit{color:var(--c);border-color:var(--ink)}
.frow.hid{display:none}

#keys{position:relative;margin:8px;min-width:0;display:grid;grid-template-columns:repeat(8,1fr)}
.wkey{
  position:relative;border:1.2px solid var(--ink);border-left-width:0;
  background:transparent;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;
}
.wkey:first-child{border-left-width:1.2px}
.wkey span{position:absolute;bottom:3px;left:0;right:0;text-align:center;font-size:7px;opacity:.45;pointer-events:none}
.wkey.down{background:var(--ink)}
.wkey.down span{color:var(--paper);opacity:.9}
.bkey{
  position:absolute;top:0;height:54%;background:var(--ink);z-index:2;cursor:pointer;
  user-select:none;-webkit-user-select:none;touch-action:none;
}
.bkey.down{background:var(--c)}
#keys.dim{opacity:.35;pointer-events:none}

#trans{display:flex;flex-direction:column;justify-content:center;padding:8px;border-left:1px solid var(--hair);width:118px}
#trans button{padding:10px 2px}
#trans button+button{margin-top:-1.2px}

/* ---------- start gate ---------- */
#gate{
  position:fixed;inset:0;z-index:60;background:var(--paper);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
#gate span{border:1.2px solid var(--ink);padding:14px 24px;font-size:11px;letter-spacing:.24em}
#gate:hover span{background:var(--c);border-color:var(--c);color:#000}

/* ---------- mobile: panel becomes a bottom sheet ---------- */
#actionbar,#scrim{display:none}
@media (max-width:720px){
  body{height:100dvh}
  #brand{min-width:0;padding:8px 12px}
  #brand span{display:none}
  #stage{padding:10px 10px calc(64px + env(safe-area-inset-bottom))}
  #caption{display:none}
  #deckrow{display:flex;flex-wrap:wrap;min-height:0}
  #funcs{order:1;flex:1;width:auto;border-right:none;border-bottom:1px solid var(--hair)}
  #trans{order:2;width:auto;border-bottom:1px solid var(--hair);flex-direction:row;gap:0;align-items:stretch}
  #trans button{padding:8px 10px}
  #trans button.ic{padding-left:10px;padding-right:24px}
  #trans button.ic .bi{right:6px}
  #trans button+button{margin-top:0;margin-left:-1.2px}
  #keys{order:3;flex-basis:100%;height:64px;margin:8px}
  .scell .om{display:none}
  .scell{padding:5px 1px 6px}
  .scell .nn{font-size:8.5px}
  #panel{
    position:fixed;left:0;right:0;bottom:0;width:auto;max-height:72dvh;z-index:30;
    border-left:none;border-top:1px solid var(--hair);
    transform:translateY(100%);transition:transform .28s ease;
    overflow-y:auto;overscroll-behavior:contain;
    padding-bottom:calc(36px + env(safe-area-inset-bottom));
  }
  #panel::before{content:'';display:block;width:44px;height:4px;background:var(--hair);margin:8px auto 2px}
  body.sheet-open #panel{transform:translateY(0)}
  #scrim{
    display:block;position:fixed;inset:0;z-index:25;background:rgba(0,0,0,.45);
    opacity:0;pointer-events:none;transition:opacity .28s;
  }
  body.sheet-open #scrim{opacity:1;pointer-events:auto}
  #actionbar{
    display:flex;position:fixed;left:10px;right:10px;z-index:20;
    bottom:calc(10px + env(safe-area-inset-bottom));
  }
  #actionbar button{flex:1;padding:14px 2px;background:var(--paper);touch-action:manipulation}
  #actionbar button.on{background:var(--ink);color:var(--paper)}
  #actionbar button.rec-live{background:var(--y);color:#fff}
  #actionbar button+button{border-left-width:0}
}