/* =============================================================================
   Signal Path — design tokens + base
   ============================================================================= */

:root {
  /* Core surfaces */
  --bg:                  #0F1419;
  --bg-elev:             #161C24;
  --bg-canvas:           #0B0F14;
  --fg:                  #E8EAED;
  --fg-dim:              #9AA0A6;
  --fg-muted:            #5A6470;
  --border:              rgba(255, 255, 255, 0.06);
  --border-strong:       rgba(255, 255, 255, 0.14);

  /* Signal colors — also used on edges + ports */
  --signal-clean:        #4ADE80;  /* green-cyan, healthy nominal */
  --signal-hot:          #FBBF24;  /* amber, near clipping */
  --signal-clipped:      #EF4444;  /* red, distorted */
  --signal-thin:         #60A5FA;  /* blue, HPF too high */
  --signal-hum:          #A78BFA;  /* violet, phantom-related symptom */
  --signal-dead:         #2A3038;  /* dim, no flow */

  /* Accent */
  --accent:              #5EEAD4;
  --accent-dim:          #2DD4BF;

  /* Node */
  --node-fill:           #161C24;
  --node-stroke:         rgba(255, 255, 255, 0.08);
  --node-stroke-hover:   rgba(255, 255, 255, 0.18);
  --node-stroke-selected: var(--accent);
  --node-shadow:         0 4px 12px rgba(0, 0, 0, 0.35);

  /* Port */
  --port-fill:           #0B0F14;
  --port-stroke:         #5A6470;
  --port-stroke-active:  var(--accent);

  /* Type */
  --font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Node category accent colours (header tint + icon) */
  --cat-source:     #F0913A;   /* warm amber   — mics, instruments  */
  --cat-cable:      #4FA8D8;   /* steel blue   — all cables         */
  --cat-processor:  #3ABFB0;   /* teal         — DI box, stage box  */
  --cat-console:    #A07DE8;   /* violet       — mixer              */
  --cat-amp:        #E85A3A;   /* orange-red   — power amp          */
  --cat-output:     #3DC980;   /* green        — speakers, monitors */
  --cat-wing:       #6380E0;   /* indigo       — WING modules       */

  /* Geometry */
  --radius:        12px;
  --radius-sm:     8px;
  --gap:           12px;
  --pad:           16px;

  /* Motion */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --dur-quick:   140ms;
  --dur-base:    240ms;

  /* Layout */
  --topbar-h:      52px;
  --footer-h:      52px;
  --palette-w:     220px;
  --inspector-w:   280px;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:                  #F7F5F0;
    --bg-elev:             #FFFFFF;
    --bg-canvas:           #FBF9F5;
    --fg:                  #1A2028;
    --fg-dim:              #5A6470;
    --fg-muted:            #9AA0A6;
    --border:              rgba(0, 0, 0, 0.08);
    --border-strong:       rgba(0, 0, 0, 0.16);

    --signal-clean:        #16A34A;
    --signal-hot:          #D97706;
    --signal-clipped:      #DC2626;
    --signal-thin:         #2563EB;
    --signal-hum:          #7C3AED;
    --signal-dead:         #D7D3CC;

    --accent:              #0D9488;

    --node-fill:           #FFFFFF;
    --node-stroke:         rgba(0, 0, 0, 0.10);
    --node-stroke-hover:   rgba(0, 0, 0, 0.20);
    --node-shadow:         0 2px 8px rgba(0, 0, 0, 0.10);

    --port-fill:           #FFFFFF;
    --port-stroke:         #9AA0A6;
  }
}

/* ========================================================================== */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#app {
  display: grid;
  grid-template-rows: var(--topbar-h) 1fr var(--footer-h);
  grid-template-columns: var(--palette-w) 1fr var(--inspector-w);
  grid-template-areas:
    "topbar    topbar    topbar"
    "palette   canvas    inspector"
    "footer    footer    footer";
  height: 100vh;
}

/* TopBar */
.topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 0 var(--pad);
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
}
.topbar .brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.topbar .brand b   { font-weight: 600; letter-spacing: -0.01em; }
.topbar .brand .sub { color: var(--fg-dim); font-size: 12px; }
.topbar .spacer    { flex: 1; }

.btn {
  appearance: none;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--fg);
  font: inherit;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-quick) var(--ease), border-color var(--dur-quick) var(--ease);
}
.btn:hover { background: rgba(255,255,255,0.04); border-color: var(--fg-dim); }
.btn[aria-pressed="true"] {
  background: var(--accent);
  color: #04221C;
  border-color: var(--accent);
}
.btn-ghost { border-color: transparent; }

.toggle-group {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.toggle-group .btn {
  border: none;
  border-radius: 0;
  border-right: 1px solid var(--border-strong);
}
.toggle-group .btn:last-child { border-right: none; }

/* Palette */
.palette {
  grid-area: palette;
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  padding: var(--pad);
  overflow-y: auto;
}
.palette h2 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  margin: 0 0 12px 0;
}
.palette .item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-quick) var(--ease), border-color var(--dur-quick) var(--ease), transform var(--dur-quick) var(--ease);
}
.palette .item + .item { margin-top: 2px; }
.palette .item:hover {
  background: rgba(255,255,255,0.04);
  border-color: var(--border-strong);
}
.palette .item:active { transform: translateY(1px); }
.palette .item .icon {
  width: 22px; height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-dim);
}
.palette .group { margin-bottom: 18px; }

/* Canvas */
.canvas {
  grid-area: canvas;
  position: relative;
  overflow: hidden;
  background: var(--bg-canvas);
}
.canvas svg.surface {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
}
.canvas svg.surface:active { cursor: grabbing; }

/* ---- Node SVG styles ------------------------------------------------------ */

/* Card body fill — this is the primary hit target for node selection + drag */
.node-bg {
  fill: var(--node-fill);
  pointer-events: all;
}

/* Category header tint (colour set per-category below) */
.node-header-bg {
  pointer-events: none;
  opacity: 0.18;
}
.cat-source    .node-header-bg { fill: var(--cat-source);    }
.cat-cable     .node-header-bg { fill: var(--cat-cable);     }
.cat-processor .node-header-bg { fill: var(--cat-processor); }
.cat-console   .node-header-bg { fill: var(--cat-console);   }
.cat-amp       .node-header-bg { fill: var(--cat-amp);       }
.cat-output    .node-header-bg { fill: var(--cat-output);    }
.cat-wing      .node-header-bg { fill: var(--cat-wing);      }

/* Card border (no fill — shows bg through) */
.node-rect {
  fill: none;
  stroke: var(--node-stroke);
  stroke-width: 1;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.40));
  transition: stroke var(--dur-quick) var(--ease);
  pointer-events: none;
}
.node-group:hover .node-rect   { stroke: var(--node-stroke-hover); }
.node-group.selected .node-rect { stroke: var(--node-stroke-selected); stroke-width: 1.5;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 40%, transparent)); }

/* Icon — colour matches category */
.node-icon { pointer-events: none; }
.cat-source    .node-icon { color: var(--cat-source);    }
.cat-cable     .node-icon { color: var(--cat-cable);     }
.cat-processor .node-icon { color: var(--cat-processor); }
.cat-console   .node-icon { color: var(--cat-console);   }
.cat-amp       .node-icon { color: var(--cat-amp);       }
.cat-output    .node-icon { color: var(--cat-output);    }
.cat-wing      .node-icon { color: var(--cat-wing);      }

/* Header divider */
.node-divider {
  stroke: var(--border-strong);
  stroke-width: 1;
  pointer-events: none;
}

/* Labels */
.node-group .node-label {
  fill: var(--fg);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  pointer-events: none;
  user-select: none;
}
.node-group .node-sublabel {
  fill: var(--fg-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  pointer-events: none;
  user-select: none;
}
.node-group { cursor: grab; }
.node-group.dragging { cursor: grabbing; }

/* ---- Ports ---------------------------------------------------------------- */

/* Invisible hit circle — handles pointer events, large tap area */
.port-hit {
  fill: transparent;
  stroke: none;
  cursor: crosshair;
  pointer-events: all;  /* transparent fill needs explicit override in SVG */
}
/* Visual circle — purely decorative, no pointer events */
.port-vis {
  fill: var(--port-fill);
  stroke: var(--port-stroke);
  stroke-width: 1.8;
  pointer-events: none;
  transition: stroke var(--dur-quick) var(--ease), r var(--dur-quick) var(--ease);
}

/* Hover / feedback: drive the visible circle via its sibling hit class */
.port-hit:hover + .port-vis,
.port-hit.hot    + .port-vis { stroke: var(--port-stroke-active); r: 9; }
.port-hit.invalid-target + .port-vis { stroke: var(--signal-clipped); r: 9; }
.port-hit.valid-target   + .port-vis { stroke: var(--signal-clean);   r: 9; }

/* Also handle old .port class (legacy / compat) */
.port {
  fill: var(--port-fill);
  stroke: var(--port-stroke);
  stroke-width: 1.8;
  cursor: crosshair;
  transition: stroke var(--dur-quick) var(--ease);
}
.port:hover, .port.hot { stroke: var(--port-stroke-active); }
.port.invalid-target { stroke: var(--signal-clipped); }
.port.valid-target   { stroke: var(--signal-clean); }

/* Edges */
.edge {
  fill: none;
  stroke-width: 2;
  pointer-events: stroke;
  cursor: pointer;
  transition: stroke var(--dur-base) var(--ease), stroke-width var(--dur-quick) var(--ease);
  stroke-linecap: round;
}
.edge.q-silent  { stroke: var(--signal-dead);  }
.edge.q-clean   { stroke: var(--signal-clean); filter: drop-shadow(0 0 4px var(--signal-clean)); }
.edge.q-hot     { stroke: var(--signal-hot);   }
.edge.q-clipped { stroke: var(--signal-clipped); }
.edge.q-thin    { stroke: var(--signal-thin); }
.edge.q-hum     { stroke: var(--signal-hum); }
.edge.selected  { stroke-width: 3.5; }
.edge-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 14;
  pointer-events: stroke;
  cursor: pointer;
}

/* Pending edge while user is drawing */
.edge-pending {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 4 4;
  pointer-events: none;
}

/* Background dot grid */
.dot-grid { fill: rgba(255,255,255,0.04); }
@media (prefers-color-scheme: light) { .dot-grid { fill: rgba(0,0,0,0.06); } }

/* Particles — animated dots travelling along edges */
.particle-layer { pointer-events: none; }
.particle {
  pointer-events: none;
  fill: var(--signal-clean);
}
.particle.p-clean   { fill: var(--signal-clean);   filter: drop-shadow(0 0 4px var(--signal-clean)); }
.particle.p-hot     { fill: var(--signal-hot);     filter: drop-shadow(0 0 3px var(--signal-hot)); }
.particle.p-clipped { fill: var(--signal-clipped); filter: drop-shadow(0 0 3px var(--signal-clipped)); }
.particle.p-thin    { fill: var(--signal-thin);    filter: drop-shadow(0 0 3px var(--signal-thin)); }
.particle.p-hum     { fill: var(--signal-hum);     filter: drop-shadow(0 0 3px var(--signal-hum)); }

/* Success pulse on a clean edge */
.edge.pulsing {
  stroke-width: 4;
  filter: drop-shadow(0 0 10px var(--signal-clean)) drop-shadow(0 0 4px var(--signal-clean));
  transition: stroke-width 200ms var(--ease), filter 200ms var(--ease);
}

/* Failure shake on a node group */
@keyframes node-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-4px, 0); }
  40% { transform: translate( 4px, 0); }
  60% { transform: translate(-3px, 0); }
  80% { transform: translate( 3px, 0); }
}
.node-group.shaking {
  /* The .node-group has an existing transform: translate(x, y). We layer the
     shake via animation on a child <g>, so define it instead via a CSS var
     trick: applying the keyframes directly here would clobber the position
     transform. We use the SVG attribute-driven path: animate the rect only. */
  animation: none; /* parent stays put; child rect handles the shake below */
}
.node-group.shaking .node-rect {
  animation: node-shake 360ms var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .node-group.shaking .node-rect { animation: none; }
  .edge.pulsing { transition: none; filter: none; stroke-width: 2; }
  .particle { display: none; }
}

/* Locked-node treatment */
.node-group.locked { cursor: default; }
.node-group.locked .node-bg { opacity: 0.88; }
.lock-chip { pointer-events: none; }

/* ---- Zoom controls (HTML overlay, bottom-right of canvas) ---------------- */
.zoom-controls {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 12;
  pointer-events: all;
}
.zoom-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-elev);
  color: var(--fg);
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.40);
  transition: background var(--dur-quick) var(--ease),
              border-color var(--dur-quick) var(--ease),
              transform 80ms var(--ease);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  padding: 0;
}
.zoom-btn:hover { background: var(--bg-hover, color-mix(in srgb, var(--bg-elev) 70%, white)); border-color: var(--accent); }
.zoom-btn:active { transform: scale(0.92); }
.zoom-fit-btn { font-size: 14px; }

/* Palette hidden in Fault Finder */
.palette.hidden { display: none; }

/* Right rail: diagnostic above inspector */
.diagnostic-host {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.diagnostic-host:empty { display: none; }

/* Editor panel */
.editor-panel-host:empty { display: none; }
.editor-section {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.editor-section:last-of-type { border-bottom: none; }

/* Text inputs (used in editor + meta forms) */
.text-input {
  width: 100%;
  background: var(--bg-canvas);
  color: var(--fg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font: inherit;
  font-size: 12.5px;
  font-family: var(--font-sans);
}
.text-input.compact { padding: 5px 8px; font-size: 11.5px; }
.text-input.textarea { font-family: var(--font-sans); resize: vertical; min-height: 50px; }
.text-input:focus {
  outline: none;
  border-color: var(--accent);
}

.editor-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 6px;
}
.editor-actions .btn { font-size: 12px; padding: 8px 10px; }

.fault-row {
  display: grid;
  grid-template-columns: 1fr 100px auto;
  gap: 6px;
  align-items: center;
}
.fault-row .level-select { margin-left: 0; min-width: 0; }
.fault-row .btn { padding: 6px 10px; font-size: 11.5px; }

.fault-listing {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-canvas);
}

.mylevel-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 12px;
}
.mylevel-row:last-child { border-bottom: none; }
.mylevel-row .k { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kv-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  font-size: 11.5px;
}
.kv-row .k { color: var(--fg-dim); }
.kv-row .v { font-family: var(--font-mono); color: var(--fg); }

/* Brief banner — overlaid on the canvas in Blueprint / Fault Finder */
.brief-banner {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 70%;
  box-shadow: var(--node-shadow);
  z-index: 10;
  pointer-events: none;
}
.brief-banner b { font-size: 12px; letter-spacing: -0.005em; }
.brief-banner span { font-size: 13px; color: var(--fg-dim); line-height: 1.4; }

/* Mode bar */
.mode-toggle .btn {
  font-size: 12px;
  padding: 5px 10px;
}
.level-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 6px 28px 6px 10px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--fg-dim) 50%),
    linear-gradient(135deg, var(--fg-dim) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  margin-left: 6px;
}
.level-select:focus { outline: none; border-color: var(--accent); }
.level-select:disabled { opacity: 0.5; cursor: not-allowed; }

/* Hint panel (footer) */
.hint-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.hint-btn { font-size: 12px; padding: 5px 12px; flex-shrink: 0; }
.hint-text {
  font-size: 12.5px;
  color: var(--fg-dim);
  font-style: italic;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.hint-text.visible { opacity: 1; }

/* Diagnostic panel — appears in inspector area in Fault Finder */
.panel-heading {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  margin: 0 0 8px 0;
}
.panel-empty { color: var(--fg-muted); font-style: italic; }
.panel-sub { color: var(--fg); margin-bottom: 10px; font-size: 13px; }

.category-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 12px;
}
.category-btn {
  font-size: 12px;
  padding: 8px 10px;
  text-align: center;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--fg);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--dur-quick) var(--ease);
}
.category-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.04);
  border-color: var(--fg-dim);
}
.category-btn.matched {
  background: rgba(74, 222, 128, 0.10);
  border-color: var(--signal-clean);
  color: var(--signal-clean);
  cursor: default;
}
.category-btn.cleared {
  background: rgba(154, 160, 166, 0.06);
  border-color: var(--border);
  color: var(--fg-muted);
  cursor: default;
}

.diag-log {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.diag-row {
  font-size: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.diag-row.matched {
  background: rgba(74, 222, 128, 0.08);
  border-color: rgba(74, 222, 128, 0.3);
  color: var(--fg);
}
.diag-row.cleared {
  background: transparent;
  color: var(--fg-muted);
}

.diag-score {
  margin-top: 14px;
  padding: 8px 10px;
  background: var(--bg-canvas);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 12px;
}
.diag-score .k { color: var(--fg-dim); }
.diag-score .v { color: var(--fg); font-weight: 600; }

/* Success modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  z-index: 100;
  transition: opacity var(--dur-base) var(--ease);
  pointer-events: none;
}
.modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.modal-card {
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 28px;
  width: min(520px, 90vw);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  transform: scale(0.96);
  transition: transform var(--dur-base) var(--ease);
}
.modal-backdrop.open .modal-card {
  transform: scale(1);
}
.modal-eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 8px;
}
.modal-title {
  font-size: 22px;
  margin: 0 0 16px 0;
  letter-spacing: -0.01em;
}
.modal-stars {
  font-size: 28px;
  letter-spacing: 4px;
  margin: 8px 0 14px 0;
}
.modal-score {
  display: flex;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  margin-bottom: 14px;
  color: var(--fg-dim);
}
.modal-score .v { color: var(--fg); font-weight: 600; }
.modal-why {
  color: var(--fg);
  line-height: 1.55;
  margin: 0 0 22px 0;
}
.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.btn.btn-primary {
  background: var(--accent);
  color: #04221C;
  border-color: var(--accent);
}
.btn.btn-primary:hover {
  background: var(--accent-dim);
  border-color: var(--accent-dim);
}

/* Inspector */
.inspector {
  grid-area: inspector;
  background: var(--bg-elev);
  border-left: 1px solid var(--border);
  padding: var(--pad);
  overflow-y: auto;
}
.inspector h2 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  margin: 0 0 12px 0;
}
.inspector .empty { color: var(--fg-muted); font-style: italic; }
.inspector .row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.inspector .row .k { color: var(--fg-dim); }
.inspector .row .v { font-family: var(--font-mono); }

/* Inspector heading */
.inspector-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-top: 4px;
}
.inspector-subtitle {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-muted);
  margin-bottom: 14px;
  word-break: break-all;
}

/* Field */
.inspector .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border);
}
.inspector .field-label {
  font-size: 12px;
  color: var(--fg-dim);
  font-weight: 500;
}
.inspector .field-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.inspector .field-block {
  margin-top: 14px;
}
.inspector .field-heading {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  font-weight: 600;
  margin: 0 0 8px 0;
}

/* Switch (custom checkbox) */
.inspector .field.switch,
.inspector .switch.compact {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.inspector .switch-input {
  appearance: none;
  position: absolute;
  pointer-events: none;
  opacity: 0;
}
.inspector .switch-visual {
  position: relative;
  display: inline-block;
  width: 30px; height: 16px;
  background: var(--border-strong);
  border-radius: 999px;
  transition: background var(--dur-quick) var(--ease);
  flex-shrink: 0;
  cursor: pointer;
}
.inspector .switch-visual::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 12px; height: 12px;
  background: var(--fg);
  border-radius: 50%;
  transition: left var(--dur-quick) var(--ease);
}
.inspector .switch-input:checked + .switch-visual {
  background: var(--accent);
}
.inspector .switch-input:checked + .switch-visual::after {
  left: 16px;
}
.inspector .switch-state {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-dim);
  margin-left: auto;
}
.inspector .switch.compact .switch-visual {
  width: 26px; height: 14px;
}
.inspector .switch.compact .switch-visual::after {
  width: 10px; height: 10px;
}
.inspector .switch.compact .switch-input:checked + .switch-visual::after {
  left: 14px;
}

/* Range slider */
.inspector .slider input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  background: var(--border-strong);
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  margin: 0;
}
.inspector .slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-elev);
  box-shadow: 0 0 0 1px var(--accent);
  cursor: grab;
  transition: transform var(--dur-quick) var(--ease);
}
.inspector .slider input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-elev);
  cursor: grab;
}
.inspector .slider input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.15);
  cursor: grabbing;
}
.inspector .slider-readout {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-dim);
  min-width: 38px;
  text-align: right;
}
.inspector .slider.compact {
  display: flex;
  align-items: center;
  gap: 6px;
}
.inspector .slider.compact input[type="range"] {
  flex: 1;
  min-width: 30px;
}

/* Select */
.inspector .field.select select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background: var(--bg-canvas);
  color: var(--fg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 7px 28px 7px 10px;
  font: inherit;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--fg-dim) 50%),
    linear-gradient(135deg, var(--fg-dim) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.inspector .field.select select:focus {
  outline: none;
  border-color: var(--accent);
}

/* Channel grid — vertical strips (one column per channel, like a real mixer) */
.inspector .channel-grid-v {
  display: flex;
  flex-direction: row;
  gap: 0;
  overflow-x: auto;
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-canvas);
  padding: 6px 4px;
}

.inspector .channel-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 58px;
  padding: 4px 6px 8px;
  border-right: 1px solid var(--border);
}

.inspector .channel-strip:last-child { border-right: none; }

.inspector .strip-ch-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  text-align: center;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-strong);
  width: 100%;
  margin-bottom: 2px;
}

.inspector .strip-ctrl-label {
  font-size: 8.5px;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  line-height: 1.2;
}

.inspector .strip-section-label {
  font-size: 8px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed var(--border-strong);
  width: 100%;
}

/* Vertical slider control block */
.inspector .strip-slider-ctrl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.inspector .strip-slider-ctrl .slider-readout {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--fg-dim);
  text-align: center;
}

/* Vertical range input */
.inspector .vert-range {
  writing-mode: vertical-lr;
  direction: rtl;
  width: 22px;
  height: 72px;
  cursor: ns-resize;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  padding: 0;
  margin: 0;
}
.inspector .vert-range::-webkit-slider-runnable-track {
  width: 4px;
  height: 72px;
  background: var(--border-strong);
  border-radius: 4px;
}
.inspector .vert-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-elev);
  box-shadow: 0 0 0 1px var(--accent);
  cursor: grab;
  margin-left: -5px;
}
.inspector .vert-range::-moz-range-track {
  width: 4px;
  background: var(--border-strong);
  border-radius: 4px;
}
.inspector .vert-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-elev);
  cursor: grab;
}
/* Aux send slider — accent-dimmed tint to distinguish from faders */
.inspector .send-range::-webkit-slider-thumb {
  background: var(--signal-hot);
  box-shadow: 0 0 0 1px var(--signal-hot);
}
.inspector .send-range::-moz-range-thumb {
  background: var(--signal-hot);
}

/* Toggle control inside a channel strip */
.inspector .strip-toggle-ctrl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

/* Legacy horizontal channel grid — kept for any future use */
.inspector .channel-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  margin-top: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px;
  background: var(--bg-canvas);
}
.inspector .channel-row {
  display: grid;
  grid-template-columns: 24px repeat(5, minmax(0, 1fr));
  gap: 6px;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.inspector .channel-row:last-child { border-bottom: none; }
.inspector .channel-row.channel-head {
  color: var(--fg-muted);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 6px;
}
.inspector .channel-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-family: var(--font-mono);
  min-width: 0;
}
.inspector .channel-cell.ch-num {
  color: var(--fg-dim);
  font-weight: 600;
  justify-content: center;
}

/* Danger button */
.inspector .btn-danger {
  background: transparent;
  color: #FCA5A5;
  border-color: rgba(252,165,165,0.4);
}
.inspector .btn-danger:hover {
  background: rgba(239, 68, 68, 0.10);
  border-color: rgba(252,165,165,0.7);
}

/* Danger outline button (used in reset modal) */
.btn-danger-outline {
  background: transparent;
  color: #FCA5A5;
  border-color: rgba(252,165,165,0.4);
}
.btn-danger-outline:hover {
  background: rgba(239, 68, 68, 0.10);
  border-color: rgba(252,165,165,0.7);
}

/* Score pill */
.score-pill {
  color: var(--accent);
  border-color: rgba(94,234,212,0.35);
}
.score-dot {
  background: var(--accent) !important;
}
.score-pill b { font-weight: 700; }

/* Footer */
.footer {
  grid-area: footer;
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 0 var(--pad);
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  color: var(--fg-dim);
  font-size: 13px;
}
.footer .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
}
.footer .status-pill.ok    { color: var(--signal-clean); border-color: rgba(74,222,128,0.4); }
.footer .status-pill.bad   { color: var(--signal-clipped); border-color: rgba(239,68,68,0.4); }
.footer .status-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}

/* Toast */
.toast-host {
  position: fixed;
  bottom: 64px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  z-index: 50;
}
.toast {
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  color: var(--fg);
  padding: 10px 14px;
  border-radius: var(--radius);
  box-shadow: var(--node-shadow);
  font-size: 13px;
  max-width: 460px;
  pointer-events: auto;
  animation: toast-in var(--dur-base) var(--ease);
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reduced motion: disable animations & transitions */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
  }
}

/* Screen-reader-only utility class */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Visible focus rings for keyboard nav. We hide them on pointer (mouse / touch)
   activation via :focus-visible, so the page doesn't get noisy when clicking. */
.btn:focus-visible,
.text-input:focus-visible,
.level-select:focus-visible,
.field.select select:focus-visible,
.inspector .slider input[type="range"]:focus-visible,
.palette .item:focus-visible,
.category-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* SVG focus targets — port hit-areas + nodes get a halo via keyboard. */
.port-hit:focus-visible,
.port:focus-visible {
  outline: none;
}
.port-hit:focus-visible + .port-vis {
  stroke: var(--accent);
  stroke-width: 3;
  filter: drop-shadow(0 0 4px var(--accent));
}
.node-group:focus-visible .node-rect {
  stroke: var(--accent);
  stroke-width: 1.5;
}

/* Tablet */
@media (max-width: 1024px) {
  #app {
    grid-template-columns: 180px 1fr 260px;
  }
  .topbar { gap: 6px; padding: 0 12px; }
  .topbar .brand .sub { display: none; }
  .level-select { font-size: 11px; padding: 5px 24px 5px 8px; }
}

/* Mobile — palette and inspector become bottom sheets */
@media (max-width: 768px) {
  #app {
    /* Two-row topbar: controls row is auto-height, canvas fills the rest */
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "canvas"
      "footer";
  }

  /* ---- Topbar: two stacked rows so controls never overflow ---- */
  .topbar {
    /* Allow children to wrap into two rows without horizontal scroll.
       overflow must stay visible so native <select> dropdowns are not clipped. */
    flex-wrap: wrap;
    align-content: center;
    gap: 4px 6px;
    padding: 6px 10px;
    height: auto;
    min-height: var(--topbar-h);
    overflow: visible;          /* ← critical: don't clip native select dropdown */
    position: relative;
    z-index: 30;                /* above bottom sheets */
  }
  /* ---- Row 1: brand (left) + action buttons (right) ---- */
  .topbar .brand      { order: 0; flex-shrink: 0; }
  .topbar .brand b    { font-size: 13px; }
  .topbar .brand .sub { display: none; }
  /* Spacer pushes everything after it to the far right on row 1 */
  .topbar .spacer     { order: 1; flex: 1; display: block; }

  [data-world-toggle] { order: 2; flex-shrink: 0; }
  [data-sound]        { order: 3; flex-shrink: 0; font-size: 11px; padding: 4px 8px; }
  [data-reset]        { order: 4; flex-shrink: 0; font-size: 11px; padding: 4px 8px; }
  [data-save-as], [data-editor-toggle] { display: none; }

  /* ---- Row 2: level selector + mode toggle, full width ---- */
  [data-mode-bar] {
    order: 5;
    flex: 1 1 100%;       /* forces its own row */
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    min-width: 0;
    overflow: visible;    /* don't clip native <select> dropdown */
  }
  .toggle-group { flex-shrink: 0; }
  .toggle-group .btn { padding: 4px 7px; font-size: 10px; }
  .level-select {
    flex: 1;
    font-size: 11px;
    min-width: 0;
    max-width: 100%;
    padding: 4px 22px 4px 8px;
  }

  /* Score pill: hide text on very small screens to save space */
  .score-pill { font-size: 10px; padding: 3px 6px; }

  /* ---- Canvas pan hint ---- */
  .canvas-pan-hint {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.5);
    color: var(--fg-dim);
    font-size: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
  }
  .canvas-pan-hint.visible { opacity: 1; }

  /* ---- Bottom sheets ---- */
  .palette, .inspector {
    position: fixed;
    left: 0; right: 0;
    background: var(--bg-elev);
    border-top: 1px solid var(--border-strong);
    border-left: none; border-right: none;
    /* Use 55vh max so the canvas stays usable even when a sheet is open */
    max-height: 55vh;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 20;
    padding-top: 28px;
    /* Peek height = drag handle (20px) + section heading (~36px) = ~56px */
    transform: translateY(calc(100% - 56px));
    transition: transform var(--dur-base) var(--ease);
    cursor: pointer;
  }
  .palette.open, .inspector.open {
    transform: translateY(0);
    cursor: default;
  }
  .palette::before, .inspector::before {
    content: '';
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 4px;
    border-radius: 999px;
    background: var(--border-strong);
    pointer-events: none;
  }
  .palette > h2:first-of-type,
  .inspector > h2:first-of-type,
  .inspector > .panel-heading:first-child {
    margin-top: 0;
    padding-top: 8px;
  }

  /* Keep sheets above the footer */
  .palette   { bottom: var(--footer-h); }
  .inspector { bottom: calc(var(--footer-h) + 56px); }

  /* ---- Footer ---- */
  .footer { font-size: 11px; gap: 6px; padding: 0 10px; }
  .footer .hint-panel { display: none; }
  .footer .status-pill { font-size: 10px; padding: 3px 6px; }

  /* ---- Modals ---- */
  .brief-banner { font-size: 12px; padding: 8px 12px; max-width: 92%; top: 8px; }
  .modal-card { padding: 22px; }
  .modal-title { font-size: 19px; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions .btn { flex: 1 1 auto; text-align: center; }

  /* ---- Inspector channel strip: compress on narrow screens ---- */
  .inspector .channel-strip { min-width: 48px; }
  .inspector .vert-range    { height: 56px; }

  /* ---- Editor panel ---- */
  .editor-actions { grid-template-columns: 1fr; }
  .fault-row { grid-template-columns: 1fr; }

  /* ---- Zoom controls on mobile ---- */
  /* Anchor to top-right so they're always visible regardless of sheet state. */
  .zoom-controls {
    top: 10px;
    bottom: auto;
    right: 10px;
    gap: 6px;
  }
  .zoom-btn {
    width: 44px;
    height: 44px;
    font-size: 22px;
    border-radius: 12px;
    box-shadow: 0 3px 14px rgba(0,0,0,0.55);
  }
  .zoom-fit-btn { font-size: 16px; }
  .zoom-fit-btn svg { width: 18px; height: 18px; }
}