/* MIDI test: the ports, the readouts, the screen keyboard and the message
   log. Site tokens only, so dark mode follows. */
.mt-start { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.mt-state { flex: 1 1 260px; margin: 0; font-weight: 500; }
.mt-h { font-size: 18px; }
.mt-k { margin: 0; font-size: 14px; font-weight: 500; color: var(--muted); }

.mt-devices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 8px 28px; }
.mt-ports { display: grid; gap: 2px; align-content: start; }
.mt-ports .status-row { padding: 9px 0; }
.mt-ports .grow { overflow-wrap: anywhere; }

.mt-readouts { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding-top: 16px; border-top: 1px dashed var(--line); }
.mt-readouts .readout .v { font-size: clamp(30px, 4.5vw, 40px); }
.mt-readouts .meter { margin-top: 6px; height: 10px; }
/* Pitch bend: a track with a mark at the center (0) and the current value. */
.mt-center { position: relative; height: 10px; margin-top: 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--sunk); }
.mt-center::before { content: ""; position: absolute; top: -3px; bottom: -3px; left: 50%; width: 1px; background: var(--line-strong); }
.mt-center > i { position: absolute; top: -3px; bottom: -3px; left: calc(var(--v, .5) * 100%); width: 4px; margin-left: -2px; border-radius: 2px; background: var(--accent); }

/* Screen keyboard: --whites white keys share the width; a black key sits
   over the line before white key --i. --vel (0–1) sets the light. */
.mt-piano-wrap { display: grid; gap: 8px; }
.mt-piano-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.mt-piano { position: relative; display: flex; height: clamp(96px, 16vw, 150px); user-select: none; }
.mt-key { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; padding-bottom: 6px; font: 500 10px/1 var(--f-mono); }
.mt-white { flex: 1 1 0; min-width: 0; border: 1px solid var(--line-strong); border-left-width: 0; border-radius: 0 0 6px 6px; background: var(--panel); color: var(--muted); }
.mt-white:first-child { border-left-width: 1px; }
.mt-black { position: absolute; z-index: 1; top: 0; left: calc(var(--i) / var(--whites) * 100%); width: calc(100% / var(--whites) * .62); height: 62%; transform: translateX(-50%); border-radius: 0 0 4px 4px; background: var(--ink); color: var(--panel); }
.mt-key::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--accent); opacity: 0; pointer-events: none; }
.mt-key.is-down::after { opacity: calc(.35 + .65 * var(--vel, 1)); }
.mt-vel, .mt-name { position: relative; z-index: 1; }
.mt-key.is-down .mt-vel { color: var(--accent-ink); font-weight: 600; }
.mt-key.is-down .mt-name { color: var(--accent-ink); }
.mt-held { min-height: 1.5em; }
/* In the dark theme the keys keep a piano's look, light and dark, by
   swapping which tokens they use. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mt-white { border-color: var(--line); background: var(--ink); color: var(--bg); }
  :root:not([data-theme="light"]) .mt-black { background: var(--bg); color: var(--ink); box-shadow: 0 0 0 1px var(--line-strong); }
}
:root[data-theme="dark"] .mt-white { border-color: var(--line); background: var(--ink); color: var(--bg); }
:root[data-theme="dark"] .mt-black { background: var(--bg); color: var(--ink); box-shadow: 0 0 0 1px var(--line-strong); }

.mt-send { display: grid; gap: 10px; padding-top: 16px; border-top: 1px dashed var(--line); }
.mt-out { flex: 1 1 220px; max-width: 360px; }
.mt-ch { flex: 0 0 90px; }

.mt-log-wrap { display: grid; gap: 8px; padding-top: 16px; border-top: 1px dashed var(--line); }
.mt-log-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.mt-log-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.mt-log-scroll { max-height: 340px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--sunk); }
.mt-log { width: 100%; border-collapse: collapse; font: 400 13px/1.45 var(--f-mono); font-variant-numeric: tabular-nums; }
.mt-log th { position: sticky; top: 0; z-index: 1; padding: 7px 10px; background: var(--panel); border-bottom: 1px solid var(--line); color: var(--muted); font: 500 13px var(--f-body); text-align: left; white-space: nowrap; }
.mt-log td { padding: 4px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.mt-log td:nth-child(1), .mt-log td:nth-child(3), .mt-log td:nth-child(5) { white-space: nowrap; }
.mt-log td:nth-child(2) { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-log-system td { color: var(--accent); }
.mt-log-empty td { padding: 14px 10px; color: var(--muted); font-family: var(--f-body); }

@media (max-width: 640px) {
  .mt-black .mt-vel { display: none; }
  .mt-key { font-size: 9px; }
}
@media (max-width: 520px) {
  .mt-start > button { width: 100%; }
  .mt-log td:nth-child(2), .mt-log th:nth-child(2) { display: none; }
}