/* instrument.css — the Instrument Perform view (instrument.js), the third view
 * beside Pads · Live (desktop InstrumentPerformView + InstrumentPatchSidebar,
 * D-068/D-072). It replaces ONLY the grid-area content of #kit-root's
 * .kit-main; the left sidebar and the song transport stay. The Play / Voice /
 * FX patch is a collapsible column beside the grid — the web Perform has no
 * right sidebar (the desktop floating panel's `patchColumn` shape). */

/* Instrument up: everything else in the grid area steps aside (the Slip
   grid, if reparented into Live, hides with the Live surface — it keeps
   sounding underneath; nothing is stopped by a view switch). */
#kit-root.is-instrument .kit-main > :not(.inst-surface):not(.kit-arr) { display: none !important; }
#kit-root.is-instrument .live-surface { display: none !important; }
#kit-root:not(.is-instrument) .inst-surface { display: none; }

.inst-surface {
  display: flex;
  gap: 12px;
  align-items: stretch;
  width: 100%;
  min-height: max(480px, calc(100vh - 220px));
  box-sizing: border-box;
}
.inst-surface[hidden] { display: none; }
.inst-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inst-muted { color: var(--jamn-text2, #A1A1AA); font-size: 12px; }
.inst-spacer { flex: 1 1 auto; }

.inst-btn, .inst-toggle, .inst-seg-btn, .inst-chip, .inst-pop-pad {
  font: 600 12px/1 var(--font, inherit);
  color: var(--jamn-text, #fff);
  background: var(--jamn-surface2, #1C1C24);
  border: 1px solid var(--jamn-border, #2A2A36);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.inst-btn:hover, .inst-toggle:hover, .inst-seg-btn:hover { border-color: var(--jamn-accent, #8B5CF6); }
.inst-btn:disabled, .inst-toggle:disabled { opacity: .45; cursor: default; }
.inst-mini { padding: 3px 7px; font-size: 11px; }
.inst-toggle.is-on, .inst-seg-btn.is-on, .inst-btn.is-on {
  background: var(--jamn-accent, #8B5CF6);
  border-color: var(--jamn-accent, #8B5CF6);
  color: #fff;
}
.inst-toggle.is-pedal { background: #F97316; border-color: #F97316; }
.inst-seg { display: inline-flex; gap: 0; }
.inst-seg .inst-seg-btn { border-radius: 0; }
.inst-seg .inst-seg-btn:first-child { border-radius: 8px 0 0 8px; }
.inst-seg .inst-seg-btn:last-child { border-radius: 0 8px 8px 0; }
.inst-select {
  font: 600 12px/1 var(--font, inherit);
  color: var(--jamn-text, #fff);
  background: var(--jamn-surface2, #1C1C24);
  border: 1px solid var(--jamn-border, #2A2A36);
  border-radius: 8px;
  padding: 5px 6px;
  max-width: 100%;
}

/* ---------- notice ---------- */
.inst-notice {
  border: 1px solid color-mix(in srgb, #EAB308 55%, transparent);
  background: color-mix(in srgb, #EAB308 12%, transparent);
  color: var(--jamn-text, #fff);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
}
.inst-notice[hidden] { display: none; }

/* ---------- header ---------- */
.inst-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
}
.inst-head-top { display: flex; align-items: center; gap: 10px; }
.inst-source { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.inst-source-icon { font-size: 20px; }
.inst-source-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.inst-source-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inst-source-title { font-weight: 700; font-size: 15px; }
.inst-source-detail, .inst-source-hint { font-size: 12px; color: var(--jamn-text2, #A1A1AA); }
.inst-source-detail { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inst-spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--jamn-border, #2A2A36);
  border-top-color: var(--jamn-accent, #8B5CF6);
  animation: inst-spin 0.8s linear infinite;
}
@keyframes inst-spin { to { transform: rotate(360deg); } }
.inst-pick-wrap { position: relative; display: flex; gap: 6px; }
.inst-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inst-key-name { font-weight: 700; font-size: 12px; color: var(--jamn-text2, #A1A1AA); }
.inst-hint { font-size: 11px; color: rgba(255, 255, 255, 0.45); }
.inst-oct { min-width: 22px; text-align: center; font: 600 12px/1 ui-monospace, monospace; }
.inst-pitch { display: inline-flex; align-items: center; gap: 4px; }

/* ---------- pick-a-pad popover ---------- */
.inst-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  width: min(420px, 90vw);
  max-height: 360px;
  overflow: auto;
  padding: 12px;
  border-radius: 12px;
  background: var(--jamn-surface1, #14141A);
  border: 1px solid var(--jamn-border, #2A2A36);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.inst-pop-title { font-weight: 700; font-size: 14px; }
.inst-pop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.inst-pop-pad { display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; }
.inst-pop-pad.is-on { background: color-mix(in srgb, var(--jamn-accent, #8B5CF6) 50%, transparent); }
.inst-pop-swatch { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }

/* ---------- chop strip ---------- */
.inst-chop {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
}
.inst-chop[hidden] { display: none; }
/* overflow: zoomed in, the region and handles run off the visible slice (D-092) */
.inst-chop-wave { position: relative; height: 64px; cursor: ew-resize; touch-action: none; overflow: hidden; }
.inst-chop-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.inst-chop-region {
  position: absolute; top: 0; bottom: 0;
  background: color-mix(in srgb, var(--jamn-accent, #8B5CF6) 22%, transparent);
  border-radius: 4px;
  pointer-events: none;
}
.inst-chop-handle {
  position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1px;
  background: var(--jamn-accent, #8B5CF6);
  pointer-events: none;
}
.inst-chop-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 12px/1.2 ui-monospace, monospace; }
/* Whole-stem overview: the visible slice boxed; drag to pan (Chop editor's overview). */
.inst-chop-overview {
  position: relative; height: 16px; border-radius: 6px; overflow: hidden;
  background: rgba(0, 0, 0, 0.3); cursor: pointer; touch-action: none;
}
.inst-chop-overview-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.inst-chop-overview-box {
  position: absolute; top: 0; bottom: 0; box-sizing: border-box;
  border: 1.5px solid var(--jamn-accent, #8B5CF6); border-radius: 4px; pointer-events: none;
}
.inst-chop-zoom { display: inline-flex; align-items: center; gap: 4px; }
.inst-chop-zoom-label { min-width: 34px; text-align: center; }
.inst-chop-legend { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- grid ---------- */
.inst-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(34px, 1fr));
  gap: 5px;
  min-height: 320px;
  touch-action: none;
  user-select: none;
}
.inst-cell {
  --cell: #8B5CF6;
  --cell-fill: rgba(139, 92, 246, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  padding: 2px;
  border-radius: 6px;
  border: 1.5px solid transparent;
  background: var(--cell-fill);
  color: rgba(255, 255, 255, 0.95);
  font: 600 11px/1.1 var(--font, inherit);
  cursor: pointer;
  overflow: hidden;
}
.inst-cell.is-chord { font-size: 13px; }
.inst-cell.is-root { border-color: var(--cell); }
.inst-cell.is-dim { color: rgba(255, 255, 255, 0.4); }
.inst-cell.is-blank { cursor: default; }
.inst-cell.is-lit { background: #fff; color: #000; border-color: transparent; }
.inst-cell-name, .inst-cell-roman { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.inst-cell-roman { font-size: 9px; font-weight: 500; opacity: .8; }
.inst-cell-roman[hidden] { display: none; }

/* ---------- playing strip ---------- */
.inst-playing { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.inst-playing[hidden] { display: none; }
.inst-playing-label { font-weight: 700; font-size: 12px; color: var(--jamn-text2, #A1A1AA); }
.inst-chips { display: flex; gap: 6px; overflow-x: auto; min-width: 0; }
.inst-chip {
  --chip: #666;
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--chip) 30%, transparent);
  border-color: color-mix(in srgb, var(--chip) 80%, transparent);
}
.inst-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--chip); }
.inst-chip-stop { font-size: 8px; opacity: .7; }

/* ---------- patch column ---------- */
.inst-patch {
  flex: 0 0 256px;
  width: 256px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
}
.inst-surface.is-patch-closed .inst-patch { display: none; }
.inst-patch-status { font-size: 12px; color: var(--jamn-text2, #A1A1AA); padding: 2px 2px 0; }
.inst-sec { border-radius: 10px; background: rgba(255, 255, 255, 0.05); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.inst-sec-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.inst-sec-toggle {
  font: 700 13px/1 var(--font, inherit);
  color: var(--jamn-text, #fff);
  background: none; border: 0; padding: 4px 2px; cursor: pointer;
}
.inst-sec-quick { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.inst-sec-quick .inst-toggle { padding: 4px 7px; font-size: 11px; }
.inst-sec-body { display: flex; flex-direction: column; gap: 6px; }
.inst-sec-body[hidden] { display: none; }
.inst-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.inst-card { border-radius: 8px; border: 1px solid var(--jamn-border, #2A2A36); padding: 6px; display: flex; flex-direction: column; gap: 5px; }
.inst-card.is-off { opacity: .55; }
.inst-card-title { font-weight: 700; font-size: 12px; }
.inst-slider { display: grid; grid-template-columns: 38px 1fr 56px; align-items: center; gap: 6px; font-size: 11px; }
.inst-slider input { width: 100%; accent-color: var(--jamn-accent, #8B5CF6); }
.inst-slider-label { color: var(--jamn-text2, #A1A1AA); }
.inst-slider-val { text-align: right; font: 11px/1 ui-monospace, monospace; }
.inst-gate-steps { display: grid; grid-template-columns: repeat(16, 1fr); gap: 2px; }
.inst-gate-step {
  height: 16px; padding: 0; border-radius: 3px;
  border: 1px solid var(--jamn-border, #2A2A36);
  background: var(--jamn-surface2, #1C1C24);
  cursor: pointer;
}
.inst-gate-step.is-on { background: var(--jamn-accent, #8B5CF6); border-color: var(--jamn-accent, #8B5CF6); }
.inst-bend { font: 11px/1 ui-monospace, monospace; color: #F97316; }
.inst-bend[hidden] { display: none; }
.inst-env-sum { font-size: 11px; }

/* ---------- no-song sketch shell ---------- */
.inst-sketch { display: flex; flex-direction: column; gap: 8px; padding: 4px; }

/* ---------- narrow screens: patch stacks under the grid ---------- */
@media (max-width: 900px) {
  .inst-surface { flex-direction: column; }
  .inst-patch { flex: 0 0 auto; width: 100%; max-height: none; }
  .inst-grid { grid-template-rows: repeat(8, minmax(30px, 1fr)); }
}