/*
 * FX Rack v2 — FXA.B.U.3
 *
 * Pedalboard layout, paramSchema-driven.  Stage 1: sliders inside
 * pedal-casings; Stage 2 (B.U.3.5) swaps in canvas rotary knobs while
 * preserving the same DOM structure + class names.
 *
 * Theme parity: NO hex/rgba literals.  Every visual value goes through
 * a role token from docs/TOKEN-CATALOG.md.
 *
 * @fx-architecture-locked: ui:fx-rack-v2-css
 */

.module-fx-rack-v2 {
  border: 1px solid var(--role-line);
  border-radius: var(--bay-radius-md);
  background: var(--role-surface-panel);
  color: var(--role-text-primary);
}

.module-fx-rack-v2 > .fx-rack-v2-summary {
  cursor: pointer;
  list-style: none;
  padding: 0.5rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.module-fx-rack-v2 > .fx-rack-v2-summary::-webkit-details-marker {
  display: none;
}

.module-fx-rack-v2 > .fx-rack-v2-summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.4rem;
  color: var(--role-text-muted);
  transition: transform 120ms ease-out;
}

.module-fx-rack-v2[open] > .fx-rack-v2-summary::before {
  transform: rotate(90deg);
}

.fx-rack-v2-status-pill {
  font-size: 0.78rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--bay-radius-sm);
  background: var(--role-surface-sunken);
  color: var(--role-text-muted);
  border: 1px solid var(--role-line-subtle);
}

.fx-rack-v2-body {
  padding: 0.5rem 0.75rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* ───────────── Header strip (source picker + FX-on) ───────────── */

.fx-rack-v2-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--role-line-subtle);
  border-radius: var(--bay-radius-sm);
  background: var(--role-surface-card);
}

.fx-rack-v2-source {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}

.fx-rack-v2-source-label {
  color: var(--role-text-muted);
  font-weight: 500;
}

/* B-finetune.2 — Sources block: items with LED + name + info-icon. */
.fx-rack-v2-source-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.5rem;
  border-radius: var(--bay-radius-sm);
  background: var(--role-surface-sunken);
  color: var(--role-text-primary);
  border: 1px solid var(--role-line-subtle);
  user-select: none;
}

.fx-rack-v2-source-item--toggle {
  cursor: pointer;
}

.fx-rack-v2-source-checkbox {
  accent-color: var(--role-accent-active);
  margin: 0;
}

.fx-rack-v2-source-led {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--role-surface-card);
  border: 1px solid var(--role-line-subtle);
  flex: 0 0 auto;
}

.fx-rack-v2-source-led--on {
  background: var(--role-accent-active);
  box-shadow: 0 0 0.25rem var(--role-accent-active);
  border-color: var(--role-line-strong);
}

.fx-rack-v2-source-name {
  font-size: 0.85rem;
}

.fx-rack-v2-source-info {
  font-size: 0.78rem;
  color: var(--role-text-muted);
  cursor: help;
  user-select: none;
}

.fx-rack-v2-source-info:hover {
  color: var(--role-accent-active);
}

/* Backward-compat with legacy class names (kept until next render
 * cycle finishes). */
.fx-rack-v2-source-always { /* superseded by .fx-rack-v2-source-item--always */ }
.fx-rack-v2-source-toggle { /* superseded by .fx-rack-v2-source-item--toggle */ }

.fx-rack-v2-fxon {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  margin-left: auto;
  font-weight: 600;
}

.fx-rack-v2-fxon input[type="checkbox"] {
  accent-color: var(--role-accent-active);
}

/* ───────────── Pedalboard chain ───────────── */

.fx-rack-v2-chain {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}

.fx-rack-v2-chain-arrow {
  align-self: center;
  font-size: 1rem;
  color: var(--role-text-muted);
  line-height: 1;
}

.fx-rack-v2-empty {
  text-align: center;
  font-style: italic;
  color: var(--role-text-muted);
  padding: 1rem;
  border: 1px dashed var(--role-line-subtle);
  border-radius: var(--bay-radius-sm);
}

/* ───────────── Pedal card ───────────── */

.fx-pedal {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "head head"
    "body lane";
  gap: 0.4rem 0.75rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--role-line);
  border-radius: var(--bay-radius-md);
  background: var(--role-surface-card);
  box-shadow:
    inset 1px 1px 0 var(--role-bezel-highlight),
    inset -1px -1px 0 var(--role-bezel-shadow-inset);
}

.fx-pedal[data-active="false"] {
  opacity: 0.65;
}

.fx-pedal-head {
  grid-area: head;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border-bottom: 1px solid var(--role-line-subtle);
  padding-bottom: 0.35rem;
}

.fx-pedal-led {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 999px;
  background: var(--role-surface-sunken);
  border: 1px solid var(--role-line-subtle);
  flex: 0 0 auto;
}

.fx-pedal[data-active="true"] .fx-pedal-led {
  background: var(--role-accent-active);
  box-shadow: 0 0 0.3rem var(--role-accent-active);
}

.fx-pedal-name {
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--role-text-primary);
}

.fx-pedal-spacer {
  flex: 1;
}

.fx-pedal-onoff {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  cursor: pointer;
  color: var(--role-text-muted);
}

.fx-pedal-onoff input[type="checkbox"] {
  accent-color: var(--role-accent-active);
}

.fx-pedal-remove {
  background: var(--role-button-face-secondary);
  color: var(--role-text-on-dark);
  border: 1px solid var(--role-line-subtle);
  border-radius: var(--bay-radius-sm);
  font-size: 0.78rem;
  padding: 0.15rem 0.45rem;
  cursor: pointer;
  line-height: 1;
}

.fx-pedal-remove:hover {
  background: var(--role-button-face-pressed);
}

/* Body: algorithm pills + knobs */

.fx-pedal-body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.fx-pedal-algo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}

.fx-pedal-algo-label {
  font-size: 0.78rem;
  color: var(--role-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 0.3rem;
}

.fx-pedal-algo-pill {
  border: 1px solid var(--role-line-subtle);
  border-radius: var(--bay-radius-sm);
  padding: 0.18rem 0.55rem;
  font-size: 0.82rem;
  background: var(--role-button-face-primary);
  color: var(--role-text-primary);
  cursor: pointer;
  line-height: 1.2;
}

.fx-pedal-algo-pill[data-selected="true"] {
  background: var(--role-accent-active);
  color: var(--role-text-on-accent);
  border-color: var(--role-line-strong);
}

.fx-pedal-knobs {
  display: grid;
  /* PG.2.k.3 — bumped 140 → 190 to fit the per-param mini-visualizer
   * (44 px) on the same line as label + rotary + value without
   * squeezing.  Falls back to existing minmax behaviour when the
   * mini-viz column is empty. */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.4rem 0.75rem;
}

.fx-pedal-knob {
  display: grid;
  /* PG.2.k.3 — 4-column grid: label · widget · value · mini-viz.
   * Knobs without a registered mini-viz painter leave the 4th column
   * empty (auto-sized to 0). */
  grid-template-columns: minmax(48px, auto) 1fr auto auto;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
}

.fx-pedal-knob-miniviz {
  /* Sits in the 4th grid cell on the same row as label/widget/value. */
  margin: 0;
}

.fx-pedal-knob-label {
  color: var(--role-text-muted);
  white-space: nowrap;
}

.fx-pedal-knob-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--role-text-primary);
  min-width: 2.5rem;
}

.fx-pedal-knob input[type="range"] {
  width: 100%;
  accent-color: var(--role-accent-active);
}

/* B.U.3.5 — canvas rotary knob.  Painted via JS using the same
 * `var(--role-*)` tokens; CSS sizes the canvas and adds the focus
 * outline.  Identical DOM slot to the legacy input[type=range]: the
 * rotary lives between .fx-pedal-knob-label and .fx-pedal-knob-value. */
.fx-pedal-knob canvas.fx-pedal-rotary {
  display: block;
  width: 38px;
  height: 38px;
  cursor: ns-resize;
  margin: 0 auto;
  user-select: none;
  touch-action: none;
  outline: none;
}

.fx-pedal-knob canvas.fx-pedal-rotary:focus-visible {
  /* The component paints its own focus ring on the canvas; suppress
   * the browser default that would otherwise show around the box. */
  outline: none;
}

/* Right lane column: lane pills + mix slider */

.fx-pedal-lane {
  grid-area: lane;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 9rem;
}

.fx-pedal-lane-pills {
  display: flex;
  gap: 0.2rem;
}

.fx-pedal-lane-pill {
  flex: 1;
  text-align: center;
  border: 1px solid var(--role-line-subtle);
  background: var(--role-button-face-primary);
  color: var(--role-text-muted);
  border-radius: var(--bay-radius-sm);
  padding: 0.15rem 0.3rem;
  font-size: 0.74rem;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.fx-pedal-lane-pill[data-selected="true"] {
  background: var(--role-accent-cursor);
  color: var(--role-text-on-accent);
  border-color: var(--role-line-strong);
}

.fx-pedal-lane-pill[data-allowed="false"] {
  opacity: 0.35;
  cursor: not-allowed;
}

.fx-pedal-mix {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--role-text-muted);
}

.fx-pedal-mix input[type="range"] {
  width: 100%;
  accent-color: var(--role-accent-armed);
}

.fx-pedal-mix-value {
  font-variant-numeric: tabular-nums;
  color: var(--role-text-primary);
  min-width: 2.5rem;
  text-align: right;
}

/* ───────────── Add-pedal row ───────────── */

.fx-rack-v2-add {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.55rem;
  border: 1px dashed var(--role-line-subtle);
  border-radius: var(--bay-radius-sm);
  background: var(--role-surface-sunken);
  color: var(--role-text-muted);
  font-size: 0.85rem;
}

.fx-rack-v2-add select {
  background: var(--role-surface-card);
  color: var(--role-text-primary);
  border: 1px solid var(--role-line-subtle);
  border-radius: var(--bay-radius-sm);
  padding: 0.18rem 0.45rem;
  font-size: 0.82rem;
}

.fx-rack-v2-add button {
  background: var(--role-button-face-primary);
  color: var(--role-text-primary);
  border: 1px solid var(--role-line-subtle);
  border-radius: var(--bay-radius-sm);
  padding: 0.2rem 0.6rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
}

.fx-rack-v2-add button:hover {
  background: var(--role-button-face-pressed);
  color: var(--role-text-on-accent);
}

/* ───────────── Output footer ───────────── */

.fx-rack-v2-output {
  text-align: center;
  font-size: 0.82rem;
  color: var(--role-text-muted);
  padding: 0.25rem;
}

/* ───────────── Legacy FX modules marked deprecated (B.U.4b) ───────────── */

.module-effect-rack--deprecated,
.module-effect-routing--deprecated,
.module-effect-parameters--deprecated {
  opacity: 0.72;
  border-style: dashed;
  border-color: var(--role-line-subtle);
}

.effect-legacy-tag {
  font-style: italic;
  font-weight: 400;
  font-size: 0.78em;
  color: var(--role-text-muted);
  margin-left: 0.3rem;
}

.effect-legacy-note {
  border-left: 3px solid var(--role-accent-armed);
  padding-left: 0.5rem;
  background: var(--role-surface-sunken);
  color: var(--role-text-muted);
}

/* ───────────── Mobile reflow ───────────── */

@media (max-width: 640px) {
  .fx-pedal {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "lane"
      "body";
  }
  .fx-pedal-lane {
    min-width: 0;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
  }
  .fx-pedal-mix {
    flex: 1 1 auto;
  }
}

/* FXM.4c — multi-rack matrix: ADDED send-rack cards below the main synth rack.
 * Role-token only (theme-parity + no-hardcoded-colors safe). */
.fx-rack-v2-matrix {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--role-line-subtle);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fx-rack-v2-sendrack {
  border: 1px solid var(--role-line);
  border-radius: var(--bay-radius-md);
  background: var(--role-surface-card);
  padding: 10px 12px;
}
.fx-rack-v2-sendrack-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.fx-rack-v2-sendrack-label {
  color: var(--role-text-muted);
  font-weight: 800;
  font-size: 0.74rem;
  letter-spacing: 0.03em;
}
.fx-rack-v2-sendrack-remove {
  margin-left: auto;
  border: 1px solid var(--role-line-subtle);
  border-radius: var(--bay-radius-sm);
  background: var(--role-surface-sunken);
  color: var(--role-text-muted);
  padding: 3px 9px;
  font-size: 0.72rem;
  cursor: pointer;
}
.fx-rack-v2-sendrack-remove:hover {
  color: var(--role-text-primary);
  border-color: var(--role-line);
}
.fx-rack-v2-add-rack {
  margin-top: 2px;
}