Patternflow

/* Patternflow Audio — mapping editor. Same cream instrument palette as the
   popup (popup.css is the source of these values). */
:root {
  --cream: #f4efe6;
  --cream-2: #ede7db;
  --ink: #141414;
  --muted: #6b655a;
  --faint: #a69f90;
  --rule: #d9d1c0;
  --led: #e8552e;
  --ok: #267a43;
  --bad: #b43b2d;
  --field: #fbf7ef;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 12px/1.45 Inter, ui-sans-serif, system-ui, sans-serif;
}

.page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mono { font-family: var(--mono); }
.dimText { color: var(--muted); }
.hint { font-size: 11px; color: var(--faint); }
.spacer { flex-grow: 1; }

/* ── header ── */
header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 9px; }
.led { width: 8px; height: 8px; background: var(--led); border-radius: 1px; }
.title { font-size: 14px; font-weight: 600; }
.kicker { font-family: var(--mono); font-size: 10px; letter-spacing: 0.09em; color: var(--muted); }
.cluster { display: flex; align-items: center; gap: 8px; }

.chip {
  border: 1px solid var(--rule); border-radius: 2px; background: var(--field);
  padding: 5px 10px; font-family: var(--mono); font-size: 11px; color: var(--ink);
}
.chip.dim { color: var(--muted); }
.okChip { border-color: var(--ok); color: var(--ok); }

.primaryBtn {
  font: inherit; font-size: 12px; cursor: pointer;
  border: 1px solid var(--ink); border-radius: 2px;
  background: var(--ink); color: var(--cream); padding: 6px 14px;
}
.primaryBtn:disabled { opacity: 0.35; cursor: default; }
.ghostBtn {
  font: inherit; font-size: 11px; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 2px;
  background: var(--field); color: var(--muted); padding: 6px 12px;
}
.ghostBtn:hover { border-color: var(--led); color: var(--led); }

/* ── toolbar / toggles ── */
.toolbar { display: flex; align-items: center; gap: 10px; }
.damping { display: flex; align-items: center; gap: 8px; }
.damping input { width: 130px; accent-color: var(--led); }
.damping .mono { font-size: 11px; min-width: 56px; text-align: right; }
.toggleWrap {
  font: inherit; cursor: pointer; display: flex; align-items: center; gap: 7px;
  border: 1px solid var(--ink); border-radius: 2px; background: var(--field); padding: 5px 11px;
}
.toggleLabel { font-size: 11px; font-weight: 500; }
.toggle {
  width: 22px; height: 12px; background: var(--rule); border-radius: 7px;
  position: relative; display: inline-block; border: 0; cursor: pointer; padding: 0;
  flex: none;
}
.toggle .dotK, .toggleWrap .dotK {
  position: absolute; left: 1px; top: 1px; width: 10px; height: 10px;
  background: var(--field); border-radius: 50%; transition: left 0.12s;
}
.toggleWrap .toggle { pointer-events: none; }
.toggleWrap.on .toggle { background: var(--ok); }
.toggleWrap.on .dotK { left: 11px; }
.toggle.small.on { background: var(--ok); }
.toggle.small.on .dotK { left: 11px; }

/* ── main plot ── */
.plotWrap {
  position: relative; background: var(--field);
  border: 1px solid var(--rule); border-radius: 2px;
}
#plot { display: block; cursor: default; touch-action: none; }
.tag {
  position: absolute; display: flex; align-items: center; gap: 6px;
  background: var(--cream-2); border: 1px solid var(--rule); border-radius: 2px;
  padding: 2px 7px; pointer-events: none;
}
.tag.sel { border-color: var(--led); }
.tag.mutedTag { opacity: 0.55; }
.tagText { font-family: var(--mono); font-size: 10px; }

/* ── curve panel ── */
.panel {
  display: flex; gap: 20px; background: var(--field);
  border: 1px solid var(--rule); border-radius: 2px; padding: 16px 18px;
}
.col { display: flex; flex-direction: column; gap: 8px; }
.col.grow { flex-grow: 1; gap: 12px; }
.colKicker { font-family: var(--mono); font-size: 10px; letter-spacing: 0.09em; color: var(--muted); }
.vr { width: 1px; background: var(--rule); }
#curve { display: block; touch-action: none; }

.presetsCol { width: 268px; }
.presetGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.preset {
  font: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  border: 1px solid var(--rule); border-radius: 2px; background: var(--cream);
  padding: 9px 4px 7px;
}
.preset span { font-size: 10px; font-weight: 500; color: var(--ink); }
.preset.on { border-color: var(--led); }
.preset.on span { font-weight: 600; }
.stepsRow { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); }
.stepsRow[hidden] { display: none; }
.stepsRow button {
  font: inherit; cursor: pointer; width: 18px; height: 18px; padding: 0; line-height: 1;
  border: 1px solid var(--rule); border-radius: 2px; background: var(--cream); color: var(--ink);
}

/* ── settings column ── */
.bandHead { display: flex; align-items: baseline; gap: 8px; }
.bandName { font-size: 13px; font-weight: 600; white-space: nowrap; }
.field { display: flex; flex-direction: column; gap: 6px; }
.fieldRow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fieldLabel { font-size: 11px; color: var(--muted); }

.seg { display: flex; }
.knobBtn {
  font: inherit; font-family: var(--mono); font-size: 11px; cursor: pointer;
  border: 1px solid var(--rule); background: var(--cream); color: var(--muted);
  padding: 6px 14px; border-left-width: 0;
}
.knobBtn:first-child { border-left-width: 1px; border-radius: 2px 0 0 2px; }
.knobBtn:last-child { border-radius: 0 2px 2px 0; }
.knobBtn.on { border-color: var(--ink); background: var(--ink); color: var(--cream); }

.outTrack { position: relative; height: 18px; cursor: pointer; touch-action: none; }
.outRail { position: absolute; left: 4px; right: 4px; top: 8px; height: 2px; background: var(--rule); }
.outFill { position: absolute; top: 7.5px; height: 3px; background: var(--led); }
.outHandle {
  position: absolute; top: 4px; width: 9px; height: 10px;
  background: var(--field); border: 1px solid var(--ink);
}

/* ── footer chips ── */
.chips { display: flex; align-items: center; gap: 8px; }
.chipCard {
  font: inherit; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  background: var(--field); border: 1px solid var(--rule); border-radius: 2px;
  padding: 7px 12px;
}
.chipCard.sel { border-color: var(--led); }
.chipCard.mutedChip { opacity: 0.55; }
.chipDot { width: 6px; height: 6px; background: var(--led); border-radius: 1px; }
.chipCard .mono { font-size: 11px; }
.arrow { font-size: 10px; color: var(--faint); }

/* ── output presets + preview ── */
.outPresets { display: flex; gap: 6px; }
.outPreset {
  font: inherit; font-size: 10px; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 2px;
  background: var(--cream); color: var(--muted); padding: 3px 8px;
}
.outPreset:hover { border-color: var(--led); color: var(--led); }

.pvOverlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(20, 20, 20, 0.45);
  display: flex; align-items: center; justify-content: center;
}
.pvOverlay[hidden] { display: none; }
.pvCard {
  background: var(--cream); border: 1px solid var(--ink); border-radius: 3px;
  padding: 18px; display: flex; flex-direction: column; gap: 12px;
  width: 640px; max-width: 94vw;
}
.pvHead { display: flex; justify-content: space-between; align-items: center; }
.pvChips { display: flex; gap: 8px; }
.pvSig {
  font: inherit; font-size: 11px; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 2px;
  background: var(--field); color: var(--ink); padding: 5px 11px;
}
.pvSig.on { border-color: var(--led); font-weight: 600; }
#pvScope { display: block; background: var(--field); border: 1px solid var(--rule); }
.pvLegend { display: flex; gap: 7px; align-items: center; }
.pvKeyIn, .pvKeyOut { width: 16px; height: 3px; display: inline-block; }
.pvKeyIn { background: var(--faint); }
.pvKeyOut { background: var(--led); }