/* mixeditor.css -- Übergangs-Editor der Mix-Engine (zu mixeditor.js).
 * Farben und Schrift aus den Tokens des Hosts (siehe mixeditor.js). */

.mixedit {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin: 0 0.625rem 0.375rem 2.5rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.375rem;
  background: var(--pane-head);
  font-size: 0.75rem;
}
.me-field { display: flex; flex-direction: column; gap: 0.1875rem; min-width: 0; }
.me-field span { color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-field small { color: var(--ink-faint); font-size: 0.6875rem; }
.me-field input, .me-field select { width: 100%; }
.me-actions { display: flex; gap: 0.375rem; align-items: center; }
.me-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.5rem 0.75rem;
  align-items: start;
}
.me-effects { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.me-effects .check { margin: 0; font-size: 0.75rem; }
/* Übergangs-Editor: Transportleiste, Zeitleiste (Canvas), Clip-Zeilen. */
.mixedit:focus { outline: none; }
.mixedit:focus-within { border-color: var(--accent); }
.ed-transport { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.ed-transport button[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.ed-play { min-width: 6.5rem; font-weight: 600; }
.ed-readout { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.ed-status { color: var(--accent); min-width: 4.5rem; }
.ed-canvas {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 0.25rem;
  touch-action: none;
  user-select: none;
}
.ed-help { margin: 0; color: var(--ink-faint); font-size: 0.6875rem; line-height: 1.6; }
.ed-help b { color: var(--ink-soft); font-weight: 600; }
.ed-panel { display: flex; flex-direction: column; gap: 0.625rem; }
/* Ausgewählter Tempo-Punkt: Werte genau eintippen */
.ed-point {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.75rem;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--pane-head);
  font-size: 0.8125rem;
}
.ed-point[hidden] { display: none; }
.ed-point label { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--ink-soft); }
.ed-point input { width: 6.5em; font-variant-numeric: tabular-nums; }
.ed-point-hint { color: var(--ink-faint); font-size: 0.6875rem; }
.ed-clips { display: flex; flex-direction: column; gap: 0.25rem; align-items: flex-start; }
.ed-clip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  width: 100%;
  padding: 0.25rem 0.5rem;
  border-left: 3px solid var(--clip-a);
  background: var(--clip-a-bg);
  border-radius: 0.25rem;
}
.ed-clip-b { border-left-color: var(--clip-b); background: var(--clip-b-bg); }
.ed-clip-name { font-weight: 600; min-width: 0; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-clip input[type="number"] { width: 5.5rem; padding-block: 0.125rem; }
.ed-label { color: var(--ink-faint); margin-left: 0.5rem; }
.ed-pct { font-variant-numeric: tabular-nums; color: var(--ink-soft); min-width: 3.5rem; }
.ed-sync { margin-left: 1.5rem; }
.ed-sync[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.mixedit .check { display: inline-flex; gap: 0.375rem; align-items: center; }
/* Raster-Korrektur je Clip */
.me-gridtools { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.me-bpm { color: var(--ink-faint); margin: 0 0.25rem; }
.me-bpm.is-unsure { color: var(--danger, #a33a2a); }
/* Vorhören: Pegel und „nur rechts“ (gilt nur im eigenen Browser) */
.ed-cue { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--ink-soft); margin-left: 0.5rem; }
.ed-cue input { width: 6rem; accent-color: var(--accent); }