/* MIDI tools (MERGE, SPLIT, TRANSPOSE, CHANNEL): small grey boxes with a
   coloured name plate, a readout, and their jacks along the bottom. */

.mt {
  --ink: #e9ecef;
  --ink-dim: #8d949b;
  --line: rgba(233, 236, 239, 0.45);
  --tool: #4da3c7;

  display: flex;
  flex-direction: column;
  gap: 10px;
  width: max-content;
  min-width: 260px;
  padding: 12px 16px 14px;
  border-radius: 10px;
  border: 1px solid #08090a;
  border-top: 4px solid var(--tool);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #33373c, #222529);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -3px 0 rgba(0, 0, 0, 0.35),
    0 20px 28px rgba(0, 0, 0, 0.5),
    0 4px 8px rgba(0, 0, 0, 0.4);
  color: var(--ink);
}
.mt-split { --tool: #4fbf7a; }
.mt-transpose { --tool: #f0a13a; }
.mt-channel { --tool: #a77dff; }

.mt-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mt-brand { display: flex; flex-direction: column; gap: 2px; }
.mt-logo { font: 700 18px/1 var(--logo-font); letter-spacing: 0.06em; color: var(--tool); }
.mt-sub { font: 700 7.5px var(--font); letter-spacing: 0.26em; color: var(--ink-dim); }

.mt-lcd {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  min-width: 108px;
  min-height: 34px;
  padding: 4px 10px;
  border-radius: 4px;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 40%, #0a201c, var(--vfd-bg));
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 0 1px #000;
  color: var(--vfd);
  font: 600 12px var(--mono);
  text-shadow: 0 0 6px rgba(125, 255, 224, 0.7);
  white-space: nowrap;
}
.mt-lcd b { font-size: 15px; font-weight: 600; }
.mt-lcd small { font-size: 9px; opacity: 0.75; }

.mt-controls { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; }
.mt-count { display: flex; align-items: center; gap: 10px; }
.mt-count-label { font: 700 8.5px var(--font); letter-spacing: 0.2em; color: var(--ink-dim); }
.mt-count-row { display: flex; align-items: center; gap: 6px; }
.mt-count-num { min-width: 22px; font: 700 15px var(--mono); text-align: center; color: var(--ink); }
.mt-btn {
  width: 26px;
  height: 24px;
  border: 1px solid #0a0b0c;
  border-radius: 4px;
  background: linear-gradient(180deg, #474c52, #2d3035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: var(--ink);
  font: 700 14px/1 var(--font);
  cursor: pointer;
}
.mt-btn:hover:not(:disabled) { background: linear-gradient(180deg, #52575e, #33373c); }
.mt-btn:disabled { opacity: 0.35; cursor: default; }
.mt-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.mt-jacks {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  padding: 8px 10px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.05);
}
.mt-jack[hidden] { display: none; }
.mt-arrow { align-self: center; margin-top: -14px; font-size: 14px; color: var(--tool); }
.mt-arrow.big { margin: 14px 4px 0; font-size: 18px; }