/* panel.css — encoders.ca front-panel skin */
:root {
  --panel-0:#1c1c20;
  --panel-1:#16161a;
  --panel-2:#0f0f12;
  --etch:#2a2a30;
  --silk:#b9b3a4;        /* silkscreen ink */
  --silk-dim:#6f6a5e;
  --accent:#ff7a18;       /* amber-orange LED */
  --accent-2:#26c2a0;     /* secondary (teal) */
  --cream:#e8dcc0;
  --shadow:0 1px 0 rgba(255,255,255,.04), 0 2px 6px rgba(0,0,0,.5);
  --font-display:'Oswald', sans-serif;
  --font-mono:'Spline Sans Mono', ui-monospace, monospace;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { height:100%; }
body {
  background:
    radial-gradient(120% 90% at 50% -10%, #2a2a31 0%, #141417 55%, #0a0a0c 100%);
  background-attachment:fixed;
  font-family:var(--font-display);
  color:var(--silk);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100%;
  display:flex; align-items:flex-start; justify-content:center;
  padding:clamp(8px, 2.5vw, 28px);
}
/* fit-mode: bezel is transform-scaled to fit; pin to top, suppress scroll */
body.fit-mode { align-items:flex-start; justify-content:center; overflow:hidden; padding:8px; height:100vh; }
body.fit-mode .bezel { width:1180px; flex:none; }

/* ---------- outer bezel ---------- */
.bezel {
  width:min(1180px, 100%);
  border-radius:26px;
  padding:clamp(10px,1.6vw,18px);
  background:
    linear-gradient(180deg, #3a3a40, #131316 60%, #0c0c0e);
  box-shadow:
    0 30px 80px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -2px 6px rgba(0,0,0,.6);
}

/* ---------- the panel (brushed metal) ---------- */
.panel {
  position:relative;
  border-radius:16px;
  padding:clamp(14px,2.2vw,26px);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0 2px, rgba(0,0,0,.02) 2px 4px),
    linear-gradient(180deg, var(--panel-0), var(--panel-1) 55%, var(--panel-2));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 0 1px rgba(0,0,0,.5),
    inset 0 -30px 60px rgba(0,0,0,.35);
  overflow:hidden;
}
/* fine brushed grain + vignette */
.panel::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay; opacity:.5;
}
.panel::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(130% 100% at 50% 0%, transparent 60%, rgba(0,0,0,.45) 100%);
}

/* ---------- top rail ---------- */
.rail {
  display:flex; align-items:center; gap:16px;
  justify-content:space-between;
  padding-bottom:clamp(12px,1.8vw,20px);
  margin-bottom:clamp(12px,1.8vw,20px);
  border-bottom:1px solid var(--etch);
  position:relative; z-index:2;
}
.rail::after { /* engraved separator highlight */
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:rgba(255,255,255,.05);
}
.brand { display:flex; align-items:baseline; gap:10px; }
.logo-dot {
  width:12px; height:12px; border-radius:50%;
  background:#3a2a18;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6);
  align-self:center;
  transition:background .4s, box-shadow .4s;
}
.logo-dot.on {
  background:var(--accent);
  box-shadow:0 0 12px 2px rgba(255,122,24,.7), inset 0 0 2px rgba(255,255,255,.6);
}
.wordmark {
  font-weight:700; letter-spacing:.26em; font-size:clamp(18px,2.6vw,28px);
  color:#efe9da;
  text-shadow:0 1px 0 rgba(0,0,0,.6), 0 -1px 0 rgba(255,255,255,.08);
}
.sub { font-family:var(--font-mono); color:var(--silk-dim); font-size:.7em; letter-spacing:.2em; }

.readout {
  display:flex; align-items:center; gap:12px;
  margin-left:auto; margin-right:8px;
  padding:8px 12px; border-radius:8px;
  background:linear-gradient(180deg,#0a120f,#060a09);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.8), inset 0 0 0 1px rgba(40,194,160,.12);
  min-width:0;
}
#scope { display:block; width:clamp(120px,18vw,220px); height:44px; }
.readout-meta { display:flex; flex-direction:column; gap:2px; font-family:var(--font-mono); }
.mode-name { color:var(--accent-2); font-size:13px; letter-spacing:.18em; font-weight:600; }
.value-name { color:#5f7d74; font-size:11px; letter-spacing:.04em; white-space:nowrap; }

/* power button (hardware toggle) */
.power {
  position:relative; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background:linear-gradient(180deg,#2a2a2f,#141416);
  border:none; border-radius:12px;
  padding:12px 16px;
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
  color:var(--silk-dim);
  font-family:var(--font-display); font-size:11px; letter-spacing:.18em;
  transition:transform .08s, box-shadow .2s, color .3s;
}
.power:active { transform:translateY(1px); }
.power-ring {
  width:26px; height:26px; border-radius:50%;
  border:2px solid #44444a;
  position:relative;
  transition:border-color .3s, box-shadow .3s;
}
.power-ring::before {
  content:""; position:absolute; left:50%; top:-3px; width:2px; height:12px;
  background:#44444a; transform:translateX(-50%); border-radius:2px;
  transition:background .3s, box-shadow .3s;
}
.power[aria-pressed="true"] { color:var(--accent); }
.power[aria-pressed="true"] .power-ring { border-color:var(--accent); box-shadow:0 0 12px rgba(255,122,24,.6); }
.power[aria-pressed="true"] .power-ring::before { background:var(--accent); box-shadow:0 0 8px var(--accent); }

/* share button */
.share {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:linear-gradient(180deg,#2a2a2f,#141416); border:none; border-radius:12px;
  padding:12px 14px; cursor:pointer; color:var(--silk-dim);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
  font-family:var(--font-display); font-size:11px; letter-spacing:.16em;
  transition:transform .08s, color .25s, box-shadow .25s;
}
.share:active { transform:translateY(1px); }
.share:hover { color:var(--accent-2); }
.share-ico { font-size:18px; line-height:1; transform:rotate(0deg); color:var(--accent-2); }
.share.done { color:var(--accent-2); box-shadow:0 0 12px rgba(38,194,160,.5), inset 0 1px 0 rgba(255,255,255,.06); }

/* ---------- toggle bank ---------- */
.toggles {
  display:flex; flex-wrap:wrap; gap:clamp(8px,1.4vw,18px);
  justify-content:center;
  padding:clamp(8px,1.4vw,14px) 0 clamp(12px,1.8vw,18px);
  margin-bottom:clamp(12px,1.8vw,18px);
  border-bottom:1px solid var(--etch);
  position:relative; z-index:2;
}
.toggles::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:rgba(255,255,255,.05); }
.sw-cell { display:flex; flex-direction:column; align-items:center; gap:6px; min-width:92px; }
.sw-cell canvas.sw {
  width:clamp(88px,12vw,116px); height:clamp(54px,7.5vw,68px);
  display:block; cursor:pointer; outline:none; touch-action:manipulation;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.4));
}
.sw-cell canvas.sw:focus-visible { filter:drop-shadow(0 0 5px rgba(255,122,24,.7)); }
.sw-label { font-size:clamp(9px,1.1vw,11px); letter-spacing:.14em; font-weight:600; color:var(--silk-dim); text-transform:uppercase; }

/* ---------- per-voice mixer strip ---------- */
.vmix {
  display:flex; align-items:flex-end; gap:clamp(12px,2vw,26px);
  justify-content:center;
  padding:clamp(8px,1.2vw,12px) 0 clamp(10px,1.4vw,14px);
  margin-bottom:clamp(12px,1.8vw,18px);
  border-bottom:1px solid var(--etch);
  position:relative; z-index:2;
}
.vmix::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:rgba(255,255,255,.05); }
.vmix-title { font-family:var(--font-mono); font-size:10px; letter-spacing:.22em; color:var(--silk-dim); align-self:center; margin-right:4px; }
.vmix-cell { display:flex; flex-direction:column; align-items:center; gap:5px; }
.vmix-cell canvas.vfader-mini { width:clamp(26px,3.4vw,40px); height:clamp(46px,6.4vw,64px); display:block; cursor:ns-resize; touch-action:none; }
.vmix-label { font-size:clamp(9px,1.1vw,11px); letter-spacing:.14em; font-weight:600; color:var(--silk); }
.vmix-val { font-family:var(--font-mono); font-size:10px; color:var(--silk-dim); }

/* ---------- fader-mode switch in the sequencer header ---------- */
.seq-fadermode { display:flex; align-items:flex-end; }
.seq-fadermode .sw-cell.compact { min-width:72px; }
.seq-fadermode .sw-cell.compact canvas.sw { width:clamp(72px,9vw,96px); height:clamp(48px,6.5vw,58px); }

/* ---------- knob grid ---------- */
.grid {
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:clamp(10px,1.6vw,22px);
  position:relative; z-index:2;
}
.cell {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:10px 6px 12px;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.012), rgba(0,0,0,.18));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.cell canvas.knob {
  width:100%; max-width:128px; aspect-ratio:1/1; height:auto;
  display:block; cursor:grab; outline:none;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));
  touch-action:none;
}
.cell canvas.knob.grabbing { cursor:grabbing; }
.cell canvas.knob:focus-visible { filter:drop-shadow(0 0 6px rgba(255,122,24,.8)); }
.klabel {
  font-size:clamp(10px,1.3vw,13px); letter-spacing:.16em; font-weight:600;
  color:var(--silk); text-transform:uppercase;
  text-shadow:0 1px 0 rgba(0,0,0,.7);
}
.kval {
  font-family:var(--font-mono); font-size:11px; color:var(--silk-dim);
  letter-spacing:.02em; min-height:13px;
}

/* ---------- sequencer strip ---------- */
.seq {
  margin-top:clamp(14px,2vw,22px);
  padding:clamp(12px,1.8vw,18px);
  border-radius:12px;
  background:linear-gradient(180deg, #121215, #0b0b0d);
  box-shadow:inset 0 2px 10px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.03), inset 0 0 0 1px rgba(255,176,0,.06);
  position:relative; z-index:2;
}
.seq-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:clamp(8px,1.2vw,12px); flex-wrap:wrap; }
.seq-title { font-size:clamp(11px,1.4vw,14px); letter-spacing:.24em; font-weight:600; color:var(--silk); padding-top:6px; }
.seq-editzone { display:grid; grid-template-columns:auto auto; grid-template-areas:'banner banner' 'edit fader'; gap:8px 14px; align-items:end; justify-content:end; }
.seq-editzone .edit-banner { grid-area:banner; justify-self:end; }
.seq-editzone > .seq-edit { grid-area:edit; }
.seq-editzone > .seq-fadermode { grid-area:fader; }
/* edit banner: makes the knob->step link unmistakable */
.edit-banner {
  display:flex; align-items:center; gap:8px;
  padding:5px 12px; border-radius:7px;
  background:linear-gradient(180deg,#1d1606,#0d0a04);
  box-shadow:inset 0 1px 4px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,122,24,.22);
  font-family:var(--font-mono);
}
.eb-label { font-size:9px; letter-spacing:.2em; color:var(--silk-dim); }
.eb-step { font-size:13px; font-weight:600; letter-spacing:.08em; color:var(--accent); text-shadow:0 0 8px rgba(255,122,24,.5); }
.eb-vals { font-size:11px; color:#c9a36a; letter-spacing:.02em; }
.seq-edit { display:flex; gap:clamp(8px,1.4vw,16px); flex-wrap:wrap; }
.edit-cell { display:flex; flex-direction:column; align-items:center; gap:4px; }
.edit-cell canvas.knob.small { width:clamp(46px,6vw,62px); aspect-ratio:1/1; height:auto; cursor:grab; display:block; touch-action:none; filter:drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.klabel.sm { font-size:clamp(8px,1vw,10px); letter-spacing:.12em; }
.kval.sm { font-size:10px; color:var(--accent); }

/* legend strip */
.seq-legend {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 26px;
  margin-bottom:10px; padding:7px 4px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.03em; color:var(--silk-dim);
  border-top:1px solid rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.04);
}
.seq-legend span { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.seq-legend .lg-hint { color:var(--accent); flex-basis:100%; }
.lg { width:11px; height:11px; border-radius:3px; flex:none; }
.lg.led { border-radius:50%; background:var(--accent); box-shadow:0 0 6px var(--accent); }
.lg.fader { background:linear-gradient(180deg,#ffb000,#7a5300); }
.lg.btn { background:linear-gradient(180deg,#ffb43a,#e07a10); }
.lg.acc-dot { border-radius:50%; background:radial-gradient(circle at 40% 35%, #ff8a3a, #c23a00); box-shadow:0 0 5px rgba(255,90,20,.6); }

.seq-steps {
  display:grid; grid-template-columns:repeat(16, 1fr);
  gap:clamp(3px,.6vw,7px);
}
.step-col {
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:7px 2px; border-radius:8px;
  background:linear-gradient(180deg, rgba(255,255,255,.012), rgba(0,0,0,.22));
  position:relative;
  transition:box-shadow .15s, background .15s;
}
.step-col.beat { background:linear-gradient(180deg, rgba(255,176,0,.06), rgba(0,0,0,.22)); }
.step-col.beat::before { content:""; position:absolute; top:3px; left:6px; right:6px; height:2px; background:rgba(255,176,0,.25); border-radius:2px; }
.step-col.selected { box-shadow:0 0 0 2px var(--accent), 0 0 14px rgba(255,122,24,.45); background:linear-gradient(180deg, rgba(255,122,24,.12), rgba(0,0,0,.25)); }
.step-led {
  width:8px; height:8px; border-radius:50%;
  background:#2a2a2f; box-shadow:inset 0 0 0 1px rgba(0,0,0,.6);
  transition:background .04s, box-shadow .04s;
}
.step-led.lit { background:var(--accent); box-shadow:0 0 9px 2px rgba(255,122,24,.85); }
.step-pitch { font-family:var(--font-mono); font-size:9px; letter-spacing:.02em; color:var(--silk-dim); min-height:11px; }
.step-col.selected .step-pitch { color:var(--accent); }
.fader-wrap { width:100%; height:clamp(64px,11vh,108px); display:flex; justify-content:center; }
.fader { width:100%; height:100%; cursor:ns-resize; touch-action:none; }
.step-btn {
  width:100%; aspect-ratio:1/1; max-width:30px; border:none; cursor:pointer;
  border-radius:5px; position:relative;
  background:linear-gradient(180deg, #26262b, #131316);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 2px 4px rgba(0,0,0,.5);
  transition:background .12s, box-shadow .12s, transform .06s;
}
.step-btn:active { transform:translateY(1px); }
.step-btn.on {
  background:linear-gradient(180deg, #ffb43a, #e07a10);
  box-shadow:0 0 10px rgba(255,140,20,.55), inset 0 1px 0 rgba(255,255,255,.3);
}
.step-num { font-family:var(--font-mono); font-size:9px; color:var(--silk-dim); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.step-btn.on .step-num { color:#3a2206; font-weight:600; }
/* accent toggle dot */
.step-acc {
  width:14px; height:14px; border:none; cursor:pointer; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #3a3a40, #161618);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6);
  transition:background .12s, box-shadow .12s;
}
.step-acc.on { background:radial-gradient(circle at 40% 35%, #ff8a3a, #c23a00); box-shadow:0 0 8px rgba(255,90,20,.7); }

/* ---------- footplate ---------- */
.footplate {
  position:relative; margin-top:clamp(14px,2vw,22px);
  padding-top:14px; border-top:1px solid var(--etch);
  text-align:center; z-index:2;
}
.silk { font-family:var(--font-mono); font-size:10px; letter-spacing:.22em; color:var(--silk-dim); }
.screw {
  position:absolute; width:12px; height:12px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #6a6a70, #1a1a1d 70%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6), 0 1px 1px rgba(255,255,255,.05);
}
.screw::after { content:""; position:absolute; inset:3px; border-top:1.5px solid rgba(0,0,0,.55); transform:rotate(35deg); }
.screw.tl { left:2px; top:-6px; } .screw.tr { right:2px; top:-6px; }
.screw.bl { left:2px; bottom:2px; } .screw.br { right:2px; bottom:2px; }

/* ---------- boot overlay ---------- */
.boot {
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 40%, rgba(20,20,24,.86), rgba(6,6,8,.97));
  backdrop-filter:blur(3px);
  transition:opacity .6s ease, visibility .6s;
}
.boot.hidden { opacity:0; visibility:hidden; }
.boot-btn {
  display:flex; flex-direction:column; align-items:center; gap:18px;
  background:none; border:none; cursor:pointer; color:var(--silk);
}
.boot-knob {
  width:120px; height:120px; border-radius:50%;
  background:
    radial-gradient(circle at 38% 30%, #f0e6cd, #d9c79f 55%, #7c6c47 100%);
  box-shadow:
    0 0 0 10px rgba(255,255,255,.03),
    0 0 0 11px rgba(0,0,0,.5),
    0 18px 40px rgba(0,0,0,.6),
    inset 0 -8px 18px rgba(0,0,0,.35);
  position:relative;
  animation:bob 2.6s ease-in-out infinite;
}
.boot-knob::after {
  content:""; position:absolute; left:50%; top:12px; width:4px; height:26px;
  background:#3a2c14; border-radius:3px; transform:translateX(-50%);
  box-shadow:0 0 6px rgba(255,122,24,.4);
}
.boot-text { font-size:20px; letter-spacing:.34em; font-weight:600; color:#efe9da; }
.boot-hint { font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; color:var(--silk-dim); }
@keyframes bob { 0%,100%{transform:translateY(0) rotate(-12deg);} 50%{transform:translateY(-6px) rotate(8deg);} }

/* ---------- power-on reveal ---------- */
.panel .cell { opacity:0; transform:translateY(8px); }
.panel.live .cell { animation:powerup .5s cubic-bezier(.2,.7,.2,1) forwards; }
.panel.live .cell:nth-child(1){animation-delay:.04s}.panel.live .cell:nth-child(2){animation-delay:.08s}
.panel.live .cell:nth-child(3){animation-delay:.12s}.panel.live .cell:nth-child(4){animation-delay:.16s}
.panel.live .cell:nth-child(5){animation-delay:.20s}.panel.live .cell:nth-child(6){animation-delay:.24s}
.panel.live .cell:nth-child(7){animation-delay:.28s}.panel.live .cell:nth-child(8){animation-delay:.32s}
.panel.live .cell:nth-child(9){animation-delay:.36s}.panel.live .cell:nth-child(10){animation-delay:.40s}
.panel.live .cell:nth-child(11){animation-delay:.44s}.panel.live .cell:nth-child(12){animation-delay:.48s}
@keyframes powerup { to { opacity:1; transform:translateY(0); } }

/* ---------- responsive ---------- */
@media (max-width:860px) {
  .grid { grid-template-columns:repeat(3, 1fr); }
  /* tidy switch rows instead of ragged wrap */
  .toggles { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px 8px; justify-items:center; }
  .sw-cell { min-width:0; width:100%; }
  .sw-cell canvas.sw { width:100%; max-width:120px; height:clamp(52px,11vw,64px); }
}
@media (max-width:640px) {
  /* sequencer: keep 16 columns but allow horizontal swipe */
  .seq-steps {
    grid-template-columns:repeat(16, minmax(28px, 1fr));
    overflow-x:auto; overflow-y:hidden;
    padding-bottom:8px;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }
  .step-col { scroll-snap-align:start; }
  .seq-steps::-webkit-scrollbar { height:6px; }
  .seq-steps::-webkit-scrollbar-thumb { background:rgba(255,176,0,.3); border-radius:3px; }
}
@media (max-width:560px) {
  .grid { grid-template-columns:repeat(2, 1fr); gap:14px; }
  .toggles { grid-template-columns:repeat(3, 1fr); }
  .rail { flex-wrap:wrap; }
  .readout { order:3; width:100%; margin:0; justify-content:center; }
  .wordmark { font-size:22px; }
  .cell canvas.knob { max-width:140px; }
  .silk { font-size:8px; letter-spacing:.14em; }
  .seq-head { justify-content:center; }
}
@media (max-width:380px) {
  .grid { gap:10px; }
  .toggles { grid-template-columns:repeat(2, 1fr); }
  .klabel { letter-spacing:.1em; }
}

/* reduced motion */
@media (prefers-reduced-motion:reduce) {
  .panel.live .cell { animation:none; opacity:1; transform:none; }
  .boot-knob { animation:none; }
}

/* sequencer cells share the powerup reveal but shouldn't start hidden */
.panel .step-col, .panel .sw-cell, .panel .edit-cell { opacity:1; }