/* Editor column — LATCH Workbench center panel */

.wb-editor {
  min-height: 0;
}

.wb-ed-content {
  padding: 24px 28px 104px;
  width: min(100%, 980px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.wb-ed-content--preview {
  opacity: 0.92;
}

/* The Create New reset stagger is driven by GSAP — see editor-motion.js. */

/* Preview banner */
.wb-ed-preview-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(143, 179, 164, 0.1);
  border: 1px solid rgba(143, 179, 164, 0.35);
}

.wb-ed-preview-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--border-active);
}

.wb-ed-preview-actions {
  display: flex;
  gap: 6px;
}

/* Patch header card */
.wb-ed-header-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #1e1e1e;
  border: 1px solid #404040;
  border-radius: 12px;
}

.wb-ed-header-main {
  flex: 1;
  min-width: 0;
}

/* Save / Send / Export. Grouped so they wrap as a block when the editor gets
   narrow, instead of each one shrink-proofing itself and squeezing the preset
   name down to an ellipsis. */
.wb-ed-header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.wb-ed-header-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.wb-ed-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.wb-ed-patch-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  cursor: text;
  border-radius: 4px;
  padding: 2px 6px;
  margin: -2px -6px;
  outline: none;
}

.wb-ed-patch-name:hover,
.wb-ed-patch-name:focus-visible {
  background: rgba(255, 255, 255, 0.06);
}

.wb-ed-patch-name--locked {
  cursor: default;
}

.wb-ed-patch-name--locked:hover,
.wb-ed-patch-name--locked:focus-visible {
  background: none;
}

.wb-ed-name-edit {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
}

.wb-ed-name-edit:hover,
.wb-ed-name-edit:focus-visible {
  color: var(--text);
  outline: none;
}

.wb-ed-name-input {
  min-width: 120px;
  max-width: 280px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-active);
  border-radius: 6px;
  padding: 2px 8px;
  outline: none;
}

.wb-ed-patch-subtitle {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #9a9a9a;
}

.wb-ed-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  min-width: 0;
}

.wb-ed-tags-icon {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  flex-shrink: 0;
}

.wb-ed-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 4px 0 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
  color: var(--text-secondary);
  max-width: 160px;
}

.wb-ed-tag-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-ed-tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.wb-ed-tag-remove:hover,
.wb-ed-tag-remove:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  outline: none;
}

.wb-ed-tag-input {
  flex: 1 1 72px;
  max-width: 160px;
  min-width: 72px;
  height: 22px;
  padding: 0 4px;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text);
  background: none;
  border: none;
  border-bottom: 1px dashed transparent;
  outline: none;
}

.wb-ed-tag-input::placeholder {
  color: var(--text-muted);
}

.wb-ed-tag-input:focus {
  border-bottom-color: var(--border-active);
}

/* Legacy read-only tag pill (kept for safety) */
.wb-ed-tag {
  font-size: 11px;
  color: var(--text-secondary);
  background: #121212;
  border: 1px solid #404040;
  border-radius: 999px;
  padding: 2px 9px;
}

/* Buttons */
.wb-ed-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s;
}

.wb-ed-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.wb-ed-btn--save {
  background: #fff;
  border: 1px solid #fff;
  color: #0a0a0a;
}

.wb-ed-btn--outline {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--text);
}

.wb-ed-btn--sm {
  padding: 6px 12px;
}

/* Square icon variant: no label to pad around, so it takes its height from the
   text buttons beside it rather than guessing at a matching pixel value. */
.wb-ed-btn--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  padding: 0;
}

/* A little air between the marker and the command group it sits beside. */
.wb-ed-btn--fav {
  margin-right: 2px;
  color: var(--text-secondary);
  transition: color 0.15s, border-color 0.15s, background 0.15s, opacity 0.15s;
}

.wb-ed-btn--fav:hover:not(:disabled),
.wb-ed-btn--fav:focus-visible {
  color: var(--border-active);
  border-color: rgba(255, 255, 255, 0.4);
  outline: none;
}

.wb-ed-btn--fav-on {
  color: var(--border-active);
  border-color: var(--border-active);
}

/* Save As uses the shared Workbench modal shell, with a compact form sized for
   the one decision it asks the user to make. */
.wb-modal-dialog--small {
  max-width: 380px;
}

.wb-save-as-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wb-save-as-description {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.wb-save-as-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.wb-save-as-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.wb-save-as-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: none;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
}

.wb-save-as-input:focus {
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
}

.wb-save-as-input--error {
  border-color: rgba(224, 128, 128, 0.65);
}

.wb-save-as-error {
  margin-top: -7px;
  color: #e08080;
  font-size: 12px;
  line-height: 1.4;
}

.wb-save-as-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 2px;
}

/* Leave-confirm shares the compact Save As shell. Don't Save is the only
   destructive path, so it borrows the danger treatment used elsewhere. */
.wb-unsaved-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wb-unsaved-description {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

.wb-unsaved-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.wb-ed-btn--danger {
  background: transparent;
  border: 1px solid rgba(224, 128, 128, 0.45);
  color: #e08080;
}

.wb-ed-btn--danger:hover:not(:disabled) {
  background: rgba(224, 128, 128, 0.1);
  border-color: rgba(224, 128, 128, 0.7);
}

/* Algorithm + variation row */
.wb-ed-algo-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.wb-ed-algo-field {
  flex: 1;
  min-width: 0;
  max-width: 300px;
}

.wb-ed-var-field {
  flex-shrink: 0;
}

.wb-ed-direction-field {
  flex-shrink: 0;
}

.wb-ed-direction-select {
  width: auto;
  min-width: 112px;
  flex-shrink: 0;
  font-size: 11px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.wb-ed-section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #b3b3b3;
  margin-bottom: 10px;
}

.wb-ed-select {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 11px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.wb-ed-select:focus,
.wb-ed-select:focus-visible {
  outline: none;
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
}

.wb-ed-select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.wb-ed-var-btns {
  display: flex;
  gap: 6px;
}

.wb-ed-var-btn {
  width: 40px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  padding: 11px 0;
  border-radius: 8px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.55);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.wb-ed-var-btn--active {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--text);
}

.wb-ed-var-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Effect parameters */
.wb-ed-params-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.wb-ed-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wb-ed-floating-tools-wrap {
  position: fixed;
  left: var(--wb-library-width);
  right: var(--wb-context-width);
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 50;
}

.wb-ed-tools--floating {
  padding: 8px;
  border-radius: 14px;
  background: rgba(14, 14, 14, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: auto;
}

.wb-ed-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
}

.wb-ed-tool-btn:hover:not(:disabled),
.wb-ed-tool-btn:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.24);
  color: var(--text);
  outline: none;
}

.wb-ed-tool-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.wb-ed-tool-btn--label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wb-ed-param-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.wb-ed-param-group {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  padding: 16px 12px;
}

/* Five groups in a two-column grid left the looper alone on the last row with
   an empty cell beside it. Spanning both columns reclaims that space and gives
   the mode switches somewhere to sit other than stacked under the knobs. */
.wb-ed-param-group--looper {
  grid-column: 1 / -1;
}

/* Knobs left, modes right, divided. `minmax(0, …)` on the knob column stops the
   4-up grid from refusing to shrink and overflowing the card. */
.wb-ed-looper-body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.wb-ed-looper-body > .wb-ed-opts {
  padding-left: 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.09);
}

/* Below the point where two columns of content fit, fall back to stacking. */
@media (max-width: 1180px) {
  .wb-ed-looper-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .wb-ed-looper-body > .wb-ed-opts {
    padding-left: 0;
    padding-top: 16px;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
  }
}

.wb-ed-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.wb-ed-group-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b3b3b3;
}

.wb-ed-group-label--solo {
  margin-bottom: 14px;
}

.wb-ed-group-switch {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wb-ed-switch-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a7a7a;
}

/* Toggle switch */
.wb-ed-toggle {
  position: relative;
  width: 44px;
  height: 26px;
  padding: 0;
  border-radius: 13px;
  cursor: pointer;
  flex-shrink: 0;
  background: #121212;
  border: 1px solid #404040;
  transition: background 0.2s, border-color 0.2s;
}

.wb-ed-toggle--on {
  background: var(--border-active);
  border-color: var(--border-active);
}

.wb-ed-toggle--sm {
  width: 32px;
  height: 18px;
  border-radius: 9px;
}

.wb-ed-toggle--sm .wb-ed-toggle-thumb {
  width: 14px;
  height: 14px;
}

.wb-ed-toggle--sm.wb-ed-toggle--on .wb-ed-toggle-thumb {
  transform: translateX(14px);
}

.wb-ed-toggle:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.wb-ed-toggle:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.65);
  outline-offset: 2px;
}

.wb-ed-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}

.wb-ed-toggle--on .wb-ed-toggle-thumb {
  transform: translateX(18px);
}

/* Knob grid within param groups */
.wb-ed-knob-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 4px;
}

/* Looper mode switches — a label/switch list, using the same switch component
   as the group's master on/off so the modes read as siblings of it. */
.wb-ed-opts-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8f8f8f;
  margin-bottom: 10px;
}

.wb-ed-opts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}

.wb-ed-opts-helper {
  margin: 10px 2px 0;
  color: #a8a8a8;
  font-size: 10px;
  line-height: 1.45;
}

/* Each label and its switch share one pill, so the pair reads as a single
   control rather than two things that happen to sit near each other — the gap
   from `space-between` was pushing them apart at exactly the width where the
   grid is widest. */
.wb-ed-opt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 5px 6px 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  transition: background 0.15s, border-color 0.15s;
}

/* Active modes light the whole pill, not just the 32px switch inside it. Four
   small switches are hard to scan; four lit outlines are not. */
.wb-ed-opt-row--on {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.28);
}

.wb-ed-opt-label {
  font-size: 11px;
  color: #9a9a9a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.15s;
}

.wb-ed-opt-row--on .wb-ed-opt-label {
  color: var(--text);
}

/* Muted by Looper Only. Deliberately lighter than --dimmed (0.35) and with no
   `pointer-events: none`: unlike a switched-off looper, these values still get
   saved into the preset and go live the instant Looper Only comes off, so they
   have to stay editable. "Not audible right now", not "unavailable". */
.wb-ed-param-group--muted .wb-ed-knob-grid,
.wb-ed-field--muted {
  opacity: 0.5;
  transition: opacity 0.2s;
}

.wb-ed-knob-grid--dimmed {
  opacity: 0.35;
  pointer-events: none;
}

/* Locks stay usable while the looper knobs are dimmed — Randomize still
   touches them, so users need a way to hold values without turning the
   looper back on first. */
.wb-ed-knob-grid--dimmed .wb-ed-knob-lock {
  pointer-events: auto;
}

/* Individual knob */
.wb-ed-knob {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.wb-ed-knob--locked {
  opacity: 0.72;
}

.wb-ed-knob-head {
  position: relative;
  width: 52px;
  height: 52px;
}

.wb-ed-knob-circle {
  width: 100%;
  height: 100%;
  cursor: ns-resize;
  touch-action: none;
}

.wb-ed-knob--disabled .wb-ed-knob-circle {
  cursor: not-allowed;
}

.wb-ed-knob-ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1.5px solid #444;
  position: relative;
}

.wb-ed-knob-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.5px;
  height: 19px;
  background: #fff;
  border-radius: 1px;
  transform-origin: center bottom;
  pointer-events: none;
}

.wb-ed-knob-label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b3b3b3;
  text-align: center;
}

/* Corner badge on the dial — keeps label/value centered and aligned.
   Opacity and scale belong to GSAP (editor-motion.js); only colour transitions
   here, so the two don't fight over the same properties. */
.wb-ed-knob-lock {
  position: absolute;
  top: -4px;
  right: -4px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid #333;
  border-radius: 50%;
  background: #1a1a1a;
  color: #777;
  opacity: 0;
  transform: scale(0.8);
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
}

.wb-ed-knob-lock:hover,
.wb-ed-knob-lock:focus-visible {
  color: #e0e0e0;
  border-color: #555;
}

.wb-ed-knob-lock--on {
  color: #e0e0e0;
  border-color: #555;
}

.wb-ed-knob-value {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text);
  text-align: center;
}

/* Custom hover tip — faster than native title, used for lock + Randomize teaching.
   GSAP animates opacity/transform in editor-motion.js, so neither is set here. */
.wb-hover-tip {
  position: fixed;
  z-index: 400;
  opacity: 0;
  max-width: min(260px, calc(100vw - 16px));
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(18, 18, 18, 0.96);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.88);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  pointer-events: none;
}