/* DUST workstation layout (2.4.1).
   Phone: the screen is the machine. LCD and mode keys on top, one editor deck in the middle,
   transport, banks and pads docked in the thumb zone. Wide screens: the machine on the left with
   its sliders under the pads, the editor deck on the right. Colours follow classic.css. */

/* Native app behaviour: no zoom, no text selection, no callouts or tap flashes. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;touch-action:pan-x pan-y;overscroll-behavior:none}
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:none;cursor:default}
input:not([type=range]):not([type=checkbox]),textarea{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
canvas,img,a{-webkit-user-drag:none}
button,select,label,input{touch-action:manipulation}
.pad{touch-action:none}
button:focus:not(:focus-visible),select:focus:not(:focus-visible){outline:none}

/* Shared structure */
.workstation{display:grid;position:relative;align-items:stretch}
.workstation>*{min-width:0}
.shell{pointer-events:none}
.unit{grid-area:unit}.display-frame{grid-area:display}.modes{grid-area:modes}.deck{grid-area:deck;min-height:0}
.mix-panel{grid-area:mix}.transport{grid-area:transport}.perform{grid-area:perform}.pads{grid-area:pads}.pad-bottom{grid-area:padfoot}.machine-foot{grid-area:foot}

/* Head: brand, LEDs, history */
.unit{display:flex;align-items:center;gap:10px;padding:0;color:#f2ede1}
.unit-label{display:flex;align-items:baseline;gap:8px;font-size:inherit;letter-spacing:normal;white-space:nowrap}
.unit .brand-mark{font-size:30px;font-weight:800;letter-spacing:-.09em;line-height:1}
.unit-model{font:8px 'DM Mono',monospace;letter-spacing:.14em;color:#d3cec2}
.unit-indicators{margin-left:auto;gap:10px;min-width:0}
.unit-indicators span{white-space:nowrap}
.unit-indicators b{font-weight:normal;max-width:72px;overflow:hidden;text-overflow:ellipsis}
.unit .top-actions{display:flex;align-items:center;gap:5px;color:inherit}
.unit .history-button{min-height:36px;padding:0 10px;border-color:#2f2e2a;background:linear-gradient(#3a3934,#2e2d29);color:#e3ddcf;box-shadow:0 2px 0 #23221f}
.unit .icon-button{width:36px;height:36px;border-color:#6b6960;color:#ece7dc}

/* Mode keys: hardware keys with an LED, like the SP-1200 programming buttons */
.modes{display:flex;gap:5px}
.modes button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:40px;padding:0 4px;border:1px solid #2a2925;border-radius:4px;background:linear-gradient(#3b3a35,#2e2d29);color:#d3cdbf;font:8.5px 'DM Mono',monospace;letter-spacing:.08em;white-space:nowrap;box-shadow:0 2px 0 #22211e,inset 0 1px 0 #5a5850}
.modes button::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;background:#1c1b18;box-shadow:inset 0 1px 1px #000}
.modes button.active{color:#fff1de;background:linear-gradient(#47453f,#393731);transform:translateY(1px);box-shadow:0 1px 0 #22211e,inset 0 1px 0 #66635a}
.modes button.active::before{background:#ff8a3d;box-shadow:0 0 7px #ff8939}

/* Transport and tempo */
.transport{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto repeat(2,minmax(0,.85fr));gap:6px;align-items:stretch;padding:0}
.transport-button{width:auto;height:auto;min-height:52px;gap:6px}
.tempo-cluster{margin:0;justify-content:center}
.tempo-control button{height:34px}
.tempo-control input{height:34px;font-size:18px}
.transport .utility-button{min-width:0;height:auto;padding:0 4px}
.click-key.active{background:#e18343;border-color:#a5582a;color:#1b1b18;box-shadow:0 0 12px #e1834366}

/* Banks and note repeat */
.perform{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,1.7fr) minmax(0,1.15fr);gap:6px;align-items:stretch}
.perform .bank-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:0}
.perform .bank-row button{min-width:0;height:40px}
.repeat-key{min-width:0;border:1px solid #292824;border-radius:3px;background:#34332f;color:#d8d4ca;font:8px 'DM Mono',monospace;letter-spacing:.05em;box-shadow:0 2px 0 #272622}
.repeat-key.active{background:#3e3329;border-color:#e18343;color:#ffca9b;box-shadow:0 0 10px #e1834340}
.perform select{height:40px;min-width:0;margin:0;padding:0 4px;font:10px 'DM Mono',monospace}

/* Pads */
.pads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.pad{min-height:0}

/* Pad mode and channel control */
.mix-panel .section-title:first-child{padding-top:0}
.performance-modes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:0 0 12px}
.performance-modes button{min-width:0;padding:0 3px;white-space:nowrap}
.mix-panel .fader-panel{border-top:1px solid #57544c}

/* Phone and tablet portrait: a full-screen instrument */
@media (max-width:999px){
  html,body{height:100%;overflow:hidden}
  .app{max-width:none;height:100%;padding:0}
  footer,.shell,.pad-bottom,.machine-foot{display:none}
  .audio-unsupported{position:fixed;z-index:20;left:12px;right:12px;top:calc(env(safe-area-inset-top) + 60px)}
  .workstation{box-sizing:border-box;height:100%;height:100dvh;max-width:720px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 6px) calc(env(safe-area-inset-right) + 10px) calc(env(safe-area-inset-bottom) + 8px) calc(env(safe-area-inset-left) + 10px);grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr) auto auto auto;grid-template-areas:"unit" "display" "modes" "deck" "transport" "perform" "pads";row-gap:7px;background:linear-gradient(180deg,#4f4e48,#47463f);box-shadow:inset 0 1px 0 #8a877d}
  .unit .brand-mark{font-size:26px}
  .unit-model{display:none}
  .unit-indicators{gap:8px;font-size:7px}
  .unit .history-button span{display:none}
  .unit .history-button{min-height:40px;min-width:40px;font-size:15px;padding:0}
  .unit .icon-button{width:40px;height:40px}
  .display-frame{padding:5px;border-width:2px}
  .display{min-height:0;padding:7px 11px 8px}
  .display-main{height:auto;padding:4px 0}
  .display-main strong{font-size:19px}
  .mix-panel{grid-area:deck}
  .mix-panel:not(.active){display:none}
  .deck,.mix-panel{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;scrollbar-width:none;background:#1d1d1a;border:1px solid #121210;border-radius:8px;box-shadow:inset 0 2px 10px #000b,0 1px 0 #6f6c63;padding:12px 12px 16px}
  .deck::-webkit-scrollbar,.mix-panel::-webkit-scrollbar{display:none}
  .pads{grid-auto-rows:clamp(54px,9.4dvh,104px);gap:6px}
  .pad{padding:8px 9px}
  .pad-name{font-size:9px}
  #toast{top:calc(env(safe-area-inset-top) + 58px);bottom:auto}
  /* Deck content: compact, no page-style headings */
  .panel-heading{display:none}
  .control-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .control-grid label{font-size:7.5px}
  .control-grid .stepper,.control-grid select{height:38px;margin-top:5px}
  .stepper button{width:26px;font-size:17px}
  .stepper strong{font-size:13px}
  .control-grid select{padding:0 4px;font-size:10px}
  .sequence-tools{flex-wrap:nowrap;overflow-x:auto;margin:10px -12px 2px;padding:0 12px 2px;scrollbar-width:none;touch-action:pan-x}
  .sequence-tools::-webkit-scrollbar{display:none}
  .sequence-tools .pill{flex:none;padding:10px 11px}
  .step-header{border-top:0;padding:8px 1px 7px;font-size:9px}
  .step-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
  .step{height:46px;font-size:8px;padding-bottom:6px}
  .bar-nav{margin-top:10px}
  .bar-nav button{min-height:36px}
  .event-list{max-height:none}
  .panel-note{margin-top:14px;padding-top:12px}
  .sample-ident{display:flex;margin:0 0 8px}
  .sample-ident span{display:inline;margin:0}
  #waveform{height:clamp(68px,13dvh,140px)}
  .sample-actions{margin:10px 0 14px;gap:6px}
  .sample-actions button{padding:10px}
  .sample-sliders{gap:12px 18px}
  .song-chain{min-height:72px;padding:12px}
  .project-actions{margin:14px 0}
  .mix-panel .fader input{height:clamp(72px,13dvh,120px)}
}
/* Shorter phones: drop the LCD status line, keep pads playable */
@media (max-width:999px) and (max-height:720px){
  .display-top,.display-bottom{display:none}
  .display{padding:5px 10px}
  .display-main{padding:2px 0}
  .display-main strong{font-size:17px}
  .workstation{row-gap:6px}
  .transport-button{min-height:46px;gap:4px}
  .tempo-cluster label,.tempo-cluster>small{display:none}
  .pads{grid-auto-rows:clamp(50px,8.6dvh,80px)}
  .deck,.mix-panel{padding:10px 10px 14px}
  .control-grid label{font-size:7px}
  .control-grid .stepper,.control-grid select{height:34px;margin-top:3px}
  .sequence-tools{margin:8px -10px 0;padding:0 10px 2px}
  .sequence-tools .pill{padding:8px 10px}
  .step-header{padding:6px 1px 5px}
  .step{height:40px}
}
/* Landscape phones: too short for a fixed instrument, so the page scrolls instead */
@media (max-width:999px) and (max-height:600px){
  html,body{height:auto;overflow:auto}
  .workstation{height:auto;grid-template-rows:none;padding-bottom:calc(env(safe-area-inset-bottom) + 20px)}
  .deck,.mix-panel{overflow:visible}
  .pads{grid-auto-rows:64px}
}

/* Wide screens: machine on the left (sliders under the pads), editor deck on the right */
@media (min-width:1000px){
  .workstation{grid-template-columns:minmax(0,600px) minmax(0,1fr);grid-template-rows:repeat(8,auto) 1fr;grid-template-areas:"unit modes" "display deck" "transport deck" "perform deck" "pads deck" "padfoot deck" "mix deck" "foot deck" ". deck";column-gap:40px;row-gap:14px;padding:28px 0 56px;align-items:start}
  .shell{grid-column:1;grid-row:1/9;align-self:stretch}
  .unit,.display-frame,.transport,.perform,.pads,.pad-bottom,.mix-panel,.machine-foot{margin-inline:22px}
  .unit{margin-top:18px}
  .machine-foot{margin-top:0;margin-bottom:16px}
  .modes{align-self:end}
  .modes .mix-key{display:none}
  .mix-panel{display:block}
  .pads{grid-auto-rows:minmax(88px,auto)}
  .pad-bottom{padding:2px}
  .deck{align-self:start}
}