html, body {
  margin: 0; padding: 0; background: #111; color: #fff; font-family: sans-serif;
}
.hidden { display: none; }
.top-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px;
}
.midi-controls { display: flex; align-items: center; }
.midi-controls button,
.midi-controls select {
  background: #00f; color: #fff; border: none; padding: 8px 12px;
  margin-right: 8px; cursor: pointer; border-radius: 4px;
}
.midi-controls select { background: #333; color: #fff; }
#base-channel { background: #333; color: #fff; }
.title { font-size: 1.2rem; font-weight: bold; }
.fx-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 16px; padding: 16px;
}
.fx-column {
  background: #222; border-radius: 8px; padding: 12px;
  display: flex; flex-direction: column; align-items: center;
}
.bus-toggle {
  width: 100%; padding: 8px; margin-bottom: 12px;
  border: none; border-radius: 4px; cursor: pointer;
}
.bus-toggle.off { background: #444; }
.bus-toggle.on  { background: #0a0; }
.fx-select {
  width: 100%; margin-bottom: 12px; padding: 6px;
  background: #333; color: #fff; border: 1px solid #555;
  border-radius: 4px;
}
.param { width: 100%; margin: 6px 0; }
.param input[type=range] { width: 100%; }
.param-label { display: block; text-align: center; font-size: 0.8rem; color: #ccc; margin-top: 4px; }
.param .value {
  text-align: center; margin-top: 2px; font-size: 0.85rem;
}
#toast {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  background: rgba(255,0,0,0.9); color: #fff; padding: 12px 16px; border-radius: 6px;
  font-weight: bold; box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.boolean-toggle {
  display: inline-block; width: 40px; height: 20px; position: relative;
  border-radius: 10px; background: #555; vertical-align: middle; cursor: pointer;
}
.boolean-toggle input {
  opacity: 0; width: 0; height: 0;
}
.slider-dot {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #bbb; transition: .3s;
}
.boolean-toggle input:checked + .slider-dot {
  transform: translateX(20px); background: #0a0;
}
.param.hidden {
  display: none;
}
.enum-select + .value { display: none; }
select.enum-select {
  width: 100%; background: #333; color: #fff; border: 1px solid #555;
  border-radius: 4px; padding: 3px;
}

.morph-container {
  display: flex; flex-direction: column; align-items: center;
  margin: 16px; padding: 16px; background: #222; border-radius: 8px;
  max-width: 400px;
}
.morph-container h2 {
  margin: 0 0 12px; font-size: 1rem; text-align: center;
}
#morph-pad {
  width: 300px; height: 300px; background: #333; position: relative;
  touch-action: auto !important; border: 2px solid #666; border-radius: 6px;
  margin-bottom: 1em;
}
.morph-corner-label {
  color: #ccc; font-size: 0.8rem; position: absolute;
}
.morph-corner-label.tl { top: 2px; left: 4px; }
.morph-corner-label.tr { top: 2px; right: 4px; }
.morph-corner-label.bl { bottom: 2px; left: 4px; }
.morph-corner-label.br { bottom: 2px; right: 4px; }
.pad-joystick {
  width: 20px; height: 20px; background: #fc0; border-radius: 50%;
  position: absolute; transform: translate(-10px, -10px);
  pointer-events: none;
}

.lfo-controls {
  display: flex; flex-direction: column; gap: 0.6em; margin-top: 16px;
  padding: 12px; border-radius: 8px; background: #222;
  max-width: 400px;
}
.lfo-row {
  display: flex; align-items: center; justify-content: space-between;
}
.lfo-row label { margin-right: 8px; font-size: 0.9rem; cursor: pointer; }
.lfo-row select, .lfo-row input {
  flex: 1; background: #333; color: #fff; border: 1px solid #555;
  border-radius: 4px; padding: 4px;
}
:root {
  --bg: #111;
  --fg: #fff;
  --accent: #fc0;
  --panel-bg: #222;
  --button-bg: #333;
}

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: sans-serif;
  display: grid;
  grid-template-rows: auto 1fr;   /* top-bar + main area */
  grid-template-columns: 1fr;     /* full width */
}

.main {
  display: grid;
  grid-template-columns: 2fr 2fr 3fr;  /* FX | Morph+LFO | Presets */
  gap: 16px;
  padding: 16px;
}

.fx-panel { /* no additional overrides */ }
.morph-lfo-panel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.morph-container,
.lfo-controls,
.preset-panel {
  background: var(--panel-bg);
  padding: 12px;
  border-radius: 8px;
  margin: 0;
  max-width: none;  /* let them fill their grid cell */
}
.lfo-controls { margin-top: 0; }
.preset-panel h2 {
  margin-top: 0;
  font-size: 1rem;
  text-align: center;
}
.preset-grid {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(10, auto);
  gap: 4px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
.preset-grid .slot {
  background: var(--button-bg);
  color: var(--fg);
  border: none;
  padding: 4px;
  font-size: 0.75rem;
  border-radius: 4px;
  cursor: pointer;

  /* prevent accidental multi‐selection when dragging */
  -webkit-user-select: none;  /* Chrome/Safari */
  -moz-user-select: none;     /* Firefox */
  -ms-user-select: none;      /* IE10+/Edge */
  user-select: none;          /* standard */
}

/* (1) Disable any dragging on the grid container itself */
.preset-grid {
  /* Prevent the grid from generating a drag image */
  -webkit-user-drag: none;  /* Chrome, Safari */
  -moz-user-drag: none;     /* Firefox */
  user-drag: none;          /* future‐standard */
}

/* (2) Ensure slots cannot be text‐selected or dragged as part of a larger block */
.preset-grid .slot {
  /* Prevent text/element selection */
  -webkit-user-select: none; /* Chrome/Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE10+/Edge */
  user-select: none;         /* standard */

  /* (Optional) If you haven’t already, make sure each slot is explicitly draggable */
  /* In your HTML: <button class="slot" draggable="true" …>…</button> */
}
.preset-grid .slot.active {
  background: var(--accent);
  color: #000;
}
.preset-grid::-webkit-scrollbar {
  width: 8px;
}
.preset-grid::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 4px;
}

.lfo-subpanel { margin-top: 1em; }
.hidden         { display: none !important; }

/* ensure the range and value spans align */
.lfo-row input[type=range] { flex: 1; margin: 0 0.5em; }
.lfo-row span { width: 3em; text-align: right; display: inline-block; }

.lfo-controls h2 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 1rem;
  text-align: center;
}

/* corner-capture toggle buttons */
.corner-btn {
  position: absolute;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: 1px solid #fff;
  color: #fff;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity .2s, background .2s;
}
.corner-btn:hover { opacity: 1; }
.corner-btn.active {
  background: #0a0;
  opacity: 1;
}

/* position each corner button */
.corner-btn.tl { top: 4px; left: -30px; }
.corner-btn.tr { top: 4px; right: -30px; }
.corner-btn.bl { bottom: 4px; left: -30px; }
.corner-btn.br { bottom: 4px; right: -30px; }

/* 1) fix column width so parameters never resize it */
.fx-column {
  flex: 0 0 220px;      /* lock to 220px */
  position: relative;   /* for absolute handle */
}

/* 2) “grab bar” styling */
.fx-handle {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 6px;
  background: rgba(255,255,255,0.1);
  cursor: grab;
  transition: background .2s;
}
.fx-column.drop-target .fx-handle {
  background: rgba(255,255,255,0.3);
}

/* shake keyframes */
@keyframes shake {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-5px); }
  40%  { transform: translateX(5px); }
  60%  { transform: translateX(-5px); }
  80%  { transform: translateX(5px); }
  100% { transform: translateX(0); }
}

/* apply shake */
.fx-column.shake {
  animation: shake 0.3s ease-in-out;
}

/* 1) Make top-bar positioned for absolute centering of title */
.top-bar {
  position: relative; /* added */
  display: flex;
  align-items: center;
  padding: 5px;
}

/* 2) Center the title absolutely */
.title {
  position: absolute; /* added */
  left: 50%;          /* added */
  transform: translateX(-50%); /* added */
}

/* 3) Push the randomize controls to the right */
#randomize-controls {
  margin-left: auto;  /* added */
  /* you can remove the inline style on the element itself */
}

/* 4) Increase FX column height */
.fx-column {
  flex: 0 0 220px;    /* keep width locked */
  position: relative;
  min-height: 510px;  /* added: larger vertical space */
}

/* 5) Enlarge the draggable “grab bar” */
.fx-handle {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8px;        /* increased from 6px */
  background: rgba(255,255,255,0.1);
  cursor: grab;
  transition: background .2s;
}

/* styles.css  [oai_citation:1‡styles.css](file-service://file-Eto6sRBuhB7Z2BBjCXjqpn) */

/* Full‐screen semi-transparent backdrop */
#help-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  box-sizing: border-box;
}

/* Hidden by default */
#help-overlay.hidden {
  display: none;
}

/* The white help box */
#help-overlay .help-content {
  background: #111;
  color: #fff;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0,0,0,0.7);
}

#help-overlay h1 {
  margin-top: 0;
  font-size: 1.8rem;
}

#help-overlay section {
  margin-bottom: 1.5em;
}

#help-overlay section h2 {
  font-size: 1.2rem;
  margin-bottom: 0.5em;
}

#help-overlay ul {
  padding-left: 1.2em;
}

#help-overlay .help-close-hint {
  text-align: center;
  margin-top: 2em;
  font-style: italic;
  opacity: 0.7;
}
#morph-joystick {
  left: 50%;
  top:  50%;
}
.modulated-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.param.modulated {
  opacity: 0.5;
  pointer-events: none;
}
.param.modulated .value {
  /* keep the value label visible */
  pointer-events: auto;
  opacity: 1;
}

#randomize-controls button {
  background: #00f;
  color: #fff;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 4px;
}


#panic-button {
  /* Match the dimensions of your FX‐type dropdowns */
  width: 100px;
  height: 32px;

  /* Styling */
  background-color: #cc0000;   /* bright red */
  color: #ffffff;              /* white text */
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;

  /* Place it in line with the FX‐columns */
  margin-right: 8px;           /* give some space to the first FX column */
  margin-bottom: 4px;          /* small gap if it wraps */
}

/* Optional: change hover/active states */
#panic-button:hover {
  background-color: #ff3333;
}
#panic-button:active {
  background-color: #aa0000;
}

/* Pulsing “flash” for any slot that has the .active class */
@keyframes pulse-active {
  0%, 100% {
    background: var(--accent);
    color: #000;
  }
  50% {
    background: #fff;
    color: #000;
  }
}

/* (A) Static highlight for “saved but not loaded” slots */
.preset-grid .slot.active:not(.current) {
  background: var(--accent);
  color: #000;
}

/* (B) Only flash if the slot is both saved AND current */
.preset-grid .slot.active.current {
  animation: pulse-active 1s ease-in-out infinite;
}

/* (C) Ensure a “current but empty” slot stays with default styling */
.preset-grid .slot.current:not(.active) {
  background: var(--button-bg);
  color: var(--fg);
}

.slot.drag-over,
.corner-btn.drag-over {
  outline: 2px dashed #4CAF50;
}

.preset-panel h2 {
  transition: background-color 0.2s ease;
}

.preset-panel h2:hover {
  background-color: rgba(255, 255, 0, 0.2); /* light yellow */
  cursor: pointer;
}

html, body, * {
  -webkit-user-select: none; /* Safari/Chrome */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE10+ */
  user-select: none;         /* Standard */
}
/* Sidechain panel wrapper */
.sidechain-panel {
  background: var(--panel-bg);
  padding: 12px;
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
  max-width: none;
}

/* Panel header */
.sidechain-panel h2 {
  margin-top: 0;
  font-size: 1rem;
  text-align: center;
}

/* 1) Two-column grid for Envelope+ADSR (col 1) & Curve+Velocity (col 2) */
.sidechain-panel #sc-panel {
  display: grid;
  /* make col 1 fixed or proportionally smaller than col 2 */
  grid-template-columns: 150px 1fr;
  /* or, if you prefer relative units: */
  /* grid-template-columns: 0.7fr 1.3fr; */
  grid-auto-rows: auto;
  gap: 1em 1.5em;
  margin-bottom: 1em;
}

#sc-curve, #env-time,
#sc-velocity {
  /* e.g. cap at 120px, or whatever fits your layout */
  max-width: 100px !important;
  /* optionally center them inside their flex row */
  margin-left: auto;
  margin-right: auto;
}

/* Column 1: envelope length + ADSR */
#sc-envelope-group {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}

/* Column 2: curve + velocity */
.sidechain-panel .sc-controls > button {
  width: 100%;
  margin-bottom: 0.75em;
  padding: 0.5em;
  font-size: 0.9rem;
  background: var(--button-bg);
  border: 1px solid var(--button-border);
  border-radius: 4px;
  cursor: pointer;
}

/* Labels inside both columns */
#sc-envelope-group label,
.sc-controls label {
  font-size: 0.9rem;
}

/* 2) Destinations list spans both columns below */
.sidechain-panel .sc-destinations {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5em 1em;
  margin-top: 0.5em;
}

/* Each destination row uses two grid cells */
.sc-row {
  display: contents;
}
.sc-dest,
.sc-depth {
  width: 100%;
}




/* Any additional ADSR info text */
.sc-adsr-info {
  color: #ccc;
  text-align: center;
  font-size: 0.8rem;
  margin-bottom: 4px;
}

.sidechain-panel #sc-learn {
  width: 100%;
  padding: 0.5em;
  margin-bottom: 1em;
  font-size: 0.9rem;
  background: var(--button-bg);
  border: 1px solid var(--button-border);
  border-radius: 4px;
  cursor: pointer;
}

#sc-trigger {
  position: relative;
  background-color: #444;      /* base color */
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.1s ease;  /* smooth updates */
}

.sidechain-panel .sc-controls > div { margin-bottom: 0.75em; }

.sc-destinations .sc-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
}

/* In your styles.css, add: */
.adsr-stages label {
  white-space: nowrap;       /* never break the “D: ” etc. */
  margin-right: 0.5em;       /* small gap to the value */
}

.adsr-stages span[id$="-value"] {
  display: inline-block;     /* treat the numbers as a block */
  width: 4ch;                /* reserve exactly 4 “0”-widths */
  text-align: right;         /* keep numbers aligned to the right */
  margin-right: 1em;         /* gap before the slider */
}

/* ensure the slider fills the rest of the row: */
.adsr-stages div input[type="range"] {
  flex: 1;
}

:root { --gutter: 16px; }

.container        { padding-inline: var(--gutter); }

/* remove now-redundant padding */
.top-bar,
.fx-grid,
.morph-lfo-panel  { padding-inline: 0; }

/* let sub-panels grow/shrink with grid */
.morph-container,
.lfo-controls,
.preset-panel     { max-width: none; }

.sc-controls input[type=range] { flex: 1; margin-inline: .5em; }
.sc-controls span            { width: 3em; text-align: right; }

.mobile-mod {
  background:#555;
  border:1px solid #888;
}
.mobile-mod:active { background:#0a0; }

@media (max-width: 1280px) {
  .fx-grid         { grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); }
  .fx-column       { flex: 1 1 180px; }       /* allow shrink */
  .morph-lfo-panel { grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); }
}

#sc-learn.waiting { background:#fc0;  color:#000; }
#sc-learn.learned { background:#0a0;  color:#000; }

.modulated-clickable input,
.modulated-clickable select { cursor: crosshair; }

#bus‑matrix{font-size:.72rem;border-collapse:collapse;margin-right:2em}
#bus‑matrix th,#bus‑matrix td{padding:.5px 1.5px;text-align:center}
#bus‑matrix input{transform:scale(.6);cursor:pointer}


/* at the end of styles.css, to override earlier rules */
.top-bar {
  justify-content: flex-start;  /* switch from space-between to flex-start */
}

/* push the matrix to the far right within .top-bar */
#bus-matrix {
  margin-left: auto;
}

/* remove the “auto” you added on the randomize buttons */
#randomize-controls {
  margin-left: 0;
}

/* —— Just add gap to the bus‐matrix —— */
#bus-matrix {
  /* keep its normal size, but add a reliable gap on the right */
  margin-right: 1.5em !important;
}

/* undo any accidental left-auto on other controls */
#randomize-controls {
  margin-left: 0 !important;
}

#bus-matrix th,
#bus-matrix td {
  padding: .2px .8px !important;   /* was .5px 1.5px – shrink both vertical & horizontal gaps */
}

#bus-matrix input {
  transform: scale(.75) !important; /* was .8 – slightly smaller checkboxes */
}

.bus .btn {
  margin-right: 0.25em;
}
#panic-fx {
  /* match the other buttons */
  padding: 8px 12px;
  line-height: 1;        /* optional, to make sizing exact */
  margin: 0 8px 0 0;      /* small right‐gap if you like */
  background-color: #c00;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
#panic-fx:hover   { background-color: #f33; }
#panic-fx:active  { background-color: #a00; }

/* Layout the two toggles in a row, each half-width */
.toggle-row {
  display: flex;
  width: 100%;
  gap: 4px;
  margin-bottom: 12px;
}
.toggle-row .fx-toggle,
.toggle-row .bus-toggle {
  flex: 1;
}

/* When FX is ON, make it orange */
.fx-toggle {
  width: 100%;
  padding: 8px;
  margin-bottom: 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
/* FX On/Off buttons — grey when off, yellow when on */
.fx-toggle.off {
  background: #444;
  color: #fff;
}
.fx-toggle.on {
  background: var(--accent);  /* same as presets.active */
  color: #000;                /* good contrast on yellow */
}

@media (pointer: coarse) and (orientation: landscape) {
  html {
    /* scale the entire render layer to fit */
    /* zoom removed */
  }
}

.top-bar {
  position: relative; /* ensure its children can be absolute */
}

.center-group {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 1em; /* optional spacing between Shift ▶️ Title ▶️ Cmd */
}

/* If you already have .title centered absolutely, you can remove that older rule */
.title {
  position: static; /* reset any previous absolute centering */
  transform: none;
}

/* hide by default */
#virtual-mods {
  display: none;
}

/* show only on touch/tablet/phone */
@media (pointer: coarse) {
  #virtual-mods {
    display: flex;           /* or block/grid, whatever layout you want */
    gap: 8px;                /* optional spacing between the buttons */
    position: absolute;      /* position as before in your top-bar */
    top: 8px;
    right: 8px;
     order: 0;
  }

  /* make the buttons look a bit more “mobile-friendly” */
  #virtual-mods .mobile-mod {
    padding: 6px 10px;
    font-size: 0.9rem;
     order: 0;
  }
}

.fx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

/* ————————————————————————————————————————————————————————— Shift & Cmd match “blue” buttons ————————————————————————————————————————————————————————— */
#v-shift,
#v-cmd {
  /* mirror .midi-controls button styling */
  background: #00f;
  color: #fff;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 4px;
}

/* when held down (your JS toggles .active on pointerdown/pointerup) */
#v-shift.active,
#v-cmd.active {
  background: #0c0;                  /* green to show “on” */
  /* optional: white inset glow for extra pop */
  box-shadow: inset 0 0 0 2px #fff;
}

/* default (desktop) */
#virtual-mods,
#v-shift,
#v-cmd {
  display: none;
}

/* tablet/phone: force them visible */
@media (pointer: coarse) {
  #virtual-mods {
    display: flex !important;
    gap: 0.5em;
    align-items: center;
  }
  #v-shift,
  #v-cmd {
    display: inline-block !important;
  }



  html, body {
    /* allow vertical swipes to scroll the page again */
    touch-action: pan-x pan-y;
  }

  .morph-container {
  /* keep your existing padding; add extra on left/right for buttons */
  padding: 16px 30px;
}
/* optionally remove .morph-pad’s bottom margin if you want tighter vertical spacing */
#morph-pad {
  margin-bottom: 0;
}



/* --------------------------------------- */
/* Responsive Overrides for Tablet Users */
/* --------------------------------------- */

/* 1. FX Grid becomes fluid */
.fx-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 1rem !important;
}

/* 2. FX Column flexible sizing */
.fx-column {
  flex: 1 1 180px !important;
  min-height: auto !important;
}

/* 3. Morph Container fluid */
.morph-container {
  max-width: none !important;
  width: 100% !important;
}

/* 4. Morph Pad aspect ratio */
#morph-pad {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  max-width: 400px !important;
}

/* 5. Preset Grid fluid */
.preset-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)) !important;
  grid-auto-rows: auto !important;
  gap: 4px !important;
  max-height: none !important;
  overflow-y: visible !important;
}

/* 6. Sidechain panel responsive */
.sidechain-panel #sc-panel {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 1em 1.5em !important;
}
@media (min-width: 600px) {
  .sidechain-panel #sc-panel {
    grid-template-columns: 0.7fr 1.3fr !important;
    grid-template-rows: none !important;
  }
}
.sidechain-panel #sc-panel * {
  max-width: none !important;
}

/* 7. Panic button fluid */
#panic-button {
  width: auto !important;
  height: auto !important;
  padding: 0.5em 1em !important;
}

/* 8. Main layout single column on small */
@media (max-width: 900px) {
  .main {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
  }
}

/* 9. Mobile-specific tweaks */
@media (max-width: 1280px) {
  .fx-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  }
  .fx-column {
    flex: 1 1 180px !important;
  }
  .morph-lfo-panel {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  }
}

/* 10. Coarse pointer/tablet scale */
@media (pointer: coarse) and (orientation: landscape) {
  html {
    /* zoom removed */
  }
}



#rotate-overlay {
  display: none;            /* only this display property */
  position: fixed;
  inset: 0;
  background: #111;
  color: #fff;
  font-size: 1.2rem;
  text-align: center;
  /* use flexbox, but only once we display it below */
  align-items: center;
  justify-content: center;
  padding: 1em;
  z-index: 10000;
}
@media (pointer: coarse) and (orientation: portrait) {
  /* show the hint… */
  #rotate-overlay {
    display: flex;
  }

}

/* Reset any hidden overrides that might block content */
.hidden {
  display: none !important;
}

/* ——————————————————————————————————————————————————————
   Tablet-only “Please rotate” overlay (no more hiding the app)
   —————————————————————————————————————————————————————— */
#rotate-overlay {
  display: none;           /* hide by default */
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: 1.2rem;
  text-align: center;
  align-items: center;     /* for flex centering */
  justify-content: center;
  z-index: 10000;
  pointer-events: none;    /* allow touches through when hidden */
}

/* Only on true touch devices, small viewports, portrait mode */
@media (pointer: coarse) and (max-width: 1024px) and (orientation: portrait) {
  #rotate-overlay {
    display: flex;         /* show the overlay */
    pointer-events: all;   /* block touches behind it */
  }
}

@media (pointer: coarse) {
  html, body { touch-action: pan-x pan-y; }
}

@media (pointer: coarse) {
  .preset-grid {
    grid-template-columns: repeat(16, minmax(30px, 1fr)) !important;
    max-height: calc(100vh - 100px) !important;    /* same as desktop */
    overflow-y: auto !important;                   /* scroll vertically */
    overflow-x: hidden !important;
  }
}

@media (pointer: coarse) {
  .morph-container,
  .lfo-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #morph-toggle,
  #lfo-header-toggle {
    width: 100%;
    margin-bottom: 0.5em;
    text-align: center;
  }
}

@media (pointer: coarse) {
  #morph-pad {
    width: 80% !important;
    max-width: 240px !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 auto 1em;
  }
}

@media (pointer: coarse) {
  /* squeeze preset grid down by half */
  .preset-grid {
    /* each column min‐width 15px instead of 30px */
    grid-template-columns: repeat(16, minmax(15px, 1fr)) !important;
    /* each row min‐height 15px instead of auto */
    grid-template-rows: repeat(10, minmax(25px, auto)) !important;
    /* tighten gaps */
    gap: 2px !important;
  }

  /* shrink the slots themselves */
  .preset-grid .slot {
    padding: 2px !important;       /* half of 4px */
    font-size: 0.6rem !important;   /* half of 0.75rem */
    border-radius: 2px !important;  /* half of 4px */
  }
}

}

/* Tablet: re-draw the vertical divider */
@media (pointer: coarse) {
  .morph-lfo-panel {
    position: relative;
  }
  .morph-lfo-panel > .morph-container {
    border-right: 2px solid #000;
    padding-right: 1rem;
  }
}

@media (pointer: coarse) {
  .lfo-controls {
    align-items: flex-start !important;
  }
  .lfo-row {
    width: 100%;
    justify-content: space-between !important;
  }
}

@media (pointer: coarse) {
  /* lock fx-column height to desktop value */
  .fx-column {
    min-height: 510px !important;
  }
}

/* ── undo/redo only on touch/tablet ───────────────── */
.mobile-mod {
  display: none !important;
}
@media (pointer: coarse) {
  .mobile-mod {
    display: inline-flex !important;
  }
}

/* — PATCH: tighten top-bar, collapse grid gap & slim bus-matrix, tablet order — */
.top-bar {
  /* reduce vertical padding while preserving horizontal */
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}
body {
  /* collapse default gap between grid rows */
  grid-row-gap: 0 !important;
}
#bus-matrix {
  /* collapse table borders and tighten line height */
  border-collapse: collapse;
  line-height: 1 !important;
}
#bus-matrix th,
#bus-matrix td {
  /* tighter cell padding */
  padding: 0 .4em !important;
}
#bus-matrix input {
  /* small checkboxes but keep hit area via margin */
  width: 14px !important;
  height: 14px !important;
  margin: 0 1px !important;
}
@media (pointer: coarse) {
  /* finger‑friendly checkboxes on touch devices */
  #bus-matrix input {
    width: 18px !important;
    height: 18px !important;
  }
  /* reorder tablet-only virtual modifiers */
  #undo-btn { order: 0 !important; }
  #redo-btn { order: 1 !important; }
  .title    { order: 2 !important; }
  #v-shift  { order: 3 !important; }
  #v-cmd    { order: 4 !important; }
  .center-group { gap: .6em !important; }
}

/* ── UNDO/REDO only on touch devices ───────────────────────────────────── */
#undo-btn,
#redo-btn,
.mobile-mod {
  display: none !important;
}
@media (pointer: coarse) {
  #undo-btn,
  #redo-btn,
  .mobile-mod {
    display: inline-flex !important;
  }
}

/* ———————————————————————————————
   Tablet: slim the top‑bar bus matrix
   ——————————————————————————————— */
@media (pointer: coarse) and (min-width: 600px) {

  /* 1) Bring check‑box visuals back to the desktop size
        but keep a finger‑friendly hit‑area with padding. */
  #bus-matrix input{
    width:14px !important;          /* visual box */
    height:14px !important;
    /* invisible padding expands the tap‑zone to ≈36 × 36 px */
    padding:11px;                   /* counts towards hit‑area only */
    box-sizing:content-box;
  }

  /* 2) Tighten the horizontal rhythm a little more */
  #bus-matrix th,
  #bus-matrix td{
    padding:0 .25em !important;     /* was .4em */
  }

  /* 3) Shorter labels on the virtual modifier keys so the
        matrix can live further right before touching them. */
  #v-shift::before{content:"⇧";}    /* glyph only */
  #v-cmd::before  {content:"⌘";}

  #v-shift,
  #v-cmd{
    font-size:0;                    /* hide the original text */
    padding:8px;                    /* square button – still touch‑safe */
  }
}

/* ———————————————————————————————————————————————————
   Tablet: enlarge & relabel Shift / Cmd with emojis
   ——————————————————————————————————————————————————— */
@media (pointer: coarse) and (min-width: 600px) {

  /* 1) Bigger font-size & padding so the labels read nicely */
  #v-shift,
  #v-cmd {
    font-size: 1rem !important;       /* bump up from zero */
    padding: 10px 14px !important;    /* a little extra tap-area */
    line-height: 1;                   /* keep it snug */
  }

  /* 2) Use ::before to inject both emoji + text labels */
  #v-shift::before {
    content: "🔼";             /* arrow + word + extra emoji */
    display: inline-block;            /* ensure it shows */
  }
  #v-cmd::before {
    content: "⌘";              /* command symbol + word + emoji */
    display: inline-block;
  }

  /* 3) Hide the original button text if you still have “– Shift –” in HTML */
  #v-shift,
  #v-cmd {
    color: inherit;                   /* keeps text-color correct */
  }
  #v-shift > *,
  #v-cmd > * {
    display: none;                    /* hide any nested text nodes */
  }
}

/* ——————————————————————————————————————————————————
   Tablet / touch: style ↩️ Undo & ↪️ Redo like ⇧ Shift & ⌘ Cmd
   —————————————————————————————————————————————————— */
@media (pointer: coarse) {
  #undo-btn,
  #redo-btn {
    /* copy the exact button spec used by #v-shift / #v‑cmd */
    background: #00f;
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 1rem;        /* keep the arrow glyph crisp */
    line-height: 1;
    cursor: pointer;
  }

  /* same “pressed” feedback as Shift / Cmd */
  #undo-btn:active,
  #redo-btn:active {
    background: #0c0;
    box-shadow: inset 0 0 0 2px #fff;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Touch / tablet ‑ landscape  ·  keep the single bottom row exactly
   ─────────────────────────────────────────────────────────────────────── */
@media (pointer: coarse) and (orientation: landscape) {

  /* 1 ▸ replicate the desktop grid: 4 fixed columns, uniform gap */
  .morph-lfo-panel{
    display: grid !important;                    /* override any flex/fallback */
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;                        /* keeps the “black space” */
    align-items: start;                          /* top‑align so nothing rides up */
  }

  /* 2 ▸ pin each sub‑panel to its natural column (DOM order is already right) */
  .morph-container { grid-column: 1; }
  .lfo-controls    { grid-column: 2; }
  .sidechain-panel { grid-column: 3; }
  .preset-panel    { grid-column: 4; }

  /* 3 ▸ let the Morph panel breathe – drop the extra 30 px gutter on the left */
  .morph-container{
    padding-inline: 16px !important;             /* same as desktop */
    border-right: none !important;               /* grid gap acts as the divider */
  }

  /* 4 ▸ ensure the controls can shrink without overflowing */
  .morph-container,
  .lfo-controls,
  .sidechain-panel,
  .preset-panel{
    min-width: 0;                                /* prevents unintended overflow */
  }
}

/* ─── Tablet/touch overrides ─────────────────────────────────────────── */
@media (pointer:coarse){
  /* keep the 16 px gutters exactly like desktop */
  .morph-container{margin:0!important;padding-inline:16px!important;}
  .morph-lfo-panel{align-items:start;}
  /* sliders large enough for thumbs */
}

/* pad must never scroll the page while dragging */
#morph-pad{touch-action:none!important;}

/* --- tablet / phone override ------------------------------------- */
@media (pointer: coarse) {
  /* Time, Curve, Gain */
  #env-time,
  #sc-curve,
  #sc-velocity,
  /* Delay, Attack, Decay, Sustain, Release */
  #sc-envelope-group input[type="range"] {
    max-width: none !important;   /* let flex:1 decide */
    width: 100%;                  /* fill the row */
  }
}

@media (pointer: coarse) {
  /* Undo the star-rule for everything except ranges */
  .sidechain-panel #sc-panel *:not(input[type="range"]) {
    width: auto !important;
    max-width: none !important;
  }

  /* Now only fill the row on the sliders themselves */
  .sidechain-panel #sc-panel input[type="range"] {
    width: 100%   !important;
    max-width: none !important;
    /* (optional) make the track taller for fat thumbs */
    height: 1.0rem;
  }
}

/* styles.css */
/* ——— Tablet: “hover” state for preset slots ——— */
@media (pointer: coarse) {
  .preset-grid {
    position: relative; /* ensure z-index works if needed */
    overflow: visible;  /* allow enlarged slots to spill out */
  }

  .preset-grid .slot {
    transition: transform 0.1s ease, z-index 0.1s ease;
    touch-action: none; /* we’ll handle touch gestures ourselves */
  }

  .preset-grid .slot.slot-hover {
    transform: scale(2);
    z-index: 10;
  }
}


/* Touchscreen modifier buttons */
.mobile-mod,
.mobile-modifier {
  touch-action: manipulation;
}

.mobile-mod.active,
.mobile-modifier.active {
  filter: brightness(1.3);
}

#help-overlay .help-content {
  -webkit-overflow-scrolling: touch;
}


/* === Global scale — keep the 1366×1024 layout intact =============== */
@media (pointer: coarse) and (orientation: landscape) {
  #app-wrapper {
    transform: none !important;
    width: 100%     !important;
    height: auto    !important;
  }
  html, body { overflow: visible !important; }
}