/* The audio devices: the AUDIO button in the top bar and its panel (it shares
   the MIDI panel's frame, rows and chips, midi.css). */

.audio-btn { display: inline-flex; align-items: center; gap: 7px; }
.audio-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0d240f;
  box-shadow: 0 0 0 1px #000;
}
.audio-led.on { background: #4dff8a; box-shadow: 0 0 0 1px #000, 0 0 8px 2px rgba(77, 255, 138, 0.6); }
.audio-count {
  padding: 1px 5px;
  border-radius: 8px;
  background: #0b0c0d;
  font: 600 9.5px var(--mono);
  color: var(--vfd);
  white-space: nowrap;
}

.audio-panel { width: min(620px, calc(100vw - 32px)); max-height: min(78vh, 760px); }

.ap-system {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 10px;
}
.ap-system-name { font: 600 12px var(--font); color: #dfe2e5; }
.ap-note { flex-basis: 100%; font: 10.5px/1.4 var(--font); color: #8b9198; }
.ap-allow { margin-top: 10px; padding: 8px 10px; border-radius: 5px; background: #20271c; }
.ap-allow p { margin: 0 0 8px; font: 11px/1.45 var(--font); color: #c9d6bd; }

.ap-label {
  flex: none;
  width: 92px;
  font: 700 9px var(--font);
  letter-spacing: 0.18em;
  color: var(--rail-dim);
}
.ap-field { display: flex; align-items: flex-start; gap: 10px; margin-top: 8px; }
.ap-field > .ap-label { padding-top: 6px; }
.ap-select {
  height: 26px;
  max-width: 100%;
  padding: 0 6px;
  border: 1px solid #0a0b0c;
  border-radius: 4px;
  background: #2a2e33;
  color: #dfe2e5;
  font: 600 11px var(--font);
}
.ap-device { flex: 1; min-width: 0; }
.ap-pick { flex: none; height: 26px; }
.ap-select:disabled { opacity: 0.55; }
.ap-select:focus-visible, .ap-icon:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.ap-state { margin: 6px 0 0 102px; font: 600 10.5px var(--mono); color: var(--vfd); }
.ap-state.warn { color: #ffb35c; }
.ap-restart {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 0 102px;
  padding: 6px 8px;
  border-radius: 4px;
  background: #3b2f18;
  font: 11px var(--font);
  color: #ffe2b8;
}
.ap-restart .rail-btn { margin-left: auto; }

/* Input devices. */
.ap-input { gap: 8px; }
.ap-range { flex: none; font: 700 10px var(--mono); color: #9fe6b0; }
.ap-ch { flex: none; font: 600 10px var(--mono); color: #8b9198; }
.ap-ch.warn { color: #ffb35c; }
/* A device's channels as the jacks take them, each with its level. */
.ap-channels { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.ap-channel {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 7px 0 6px;
  border-radius: 10px;
  background: #0b0c0d;
  font: 700 9.5px var(--mono);
  color: #9fe6b0;
}
.ap-level {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0d240f;
  box-shadow: 0 0 0 1px #000;
}
.ap-level::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #4dff8a;
  box-shadow: 0 0 6px 1px rgba(77, 255, 138, 0.8);
  opacity: var(--level, 0);
}
.ap-status { flex: none; }
.ap-status.ap-live { color: #4dff8a; }
.ap-status.ap-starting, .ap-status.ap-off { color: #8b9198; }
.ap-led.ap-live { background: #4dff8a; box-shadow: 0 0 0 1px #000, 0 0 6px 1px rgba(77, 255, 138, 0.6); }
.ap-tools { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; }
.ap-icon {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #b8bec4;
  font-size: 10px;
  cursor: pointer;
}
.ap-icon:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); }
.ap-icon:disabled { opacity: 0.3; cursor: default; }
.ap-add { margin-top: 8px; }

@media (max-width: 640px) {
  .ap-label { width: auto; }
  .ap-field { flex-wrap: wrap; }
  .ap-state, .ap-restart { margin-left: 0; }
}