/* controls.css — VCR control bar layout and styling (AC-06.1, AC-06.5) */

/* ── Control bar footer ────────────────────────────────────────────────── */
#controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: var(--color-dim);
  border-top: 1px solid var(--color-grey);
  position: relative;
  z-index: 200;
}

/* ── Individual control buttons ────────────────────────────────────────── */
.ctrl-btn {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  min-width: 3.5rem;
  padding: 0.45rem 0.8rem;
  border: 2px solid currentColor;
  background: transparent;
  color: var(--color-phosphor);
  cursor: pointer;
  text-transform: uppercase;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  position: relative;
}

.ctrl-btn:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--color-phosphor);
  color: var(--color-bg);
}

.ctrl-btn:active:not(:disabled):not([aria-disabled="true"]) {
  transform: scale(0.95);
}

.ctrl-btn:disabled,
.ctrl-btn[aria-disabled="true"] {
  color: var(--color-grey);
  border-color: var(--color-grey);
  cursor: not-allowed;
}

/* ── Pressed / active state ────────────────────────────────────────────── */
.ctrl-btn.pressed {
  background: var(--color-phosphor);
  color: var(--color-bg);
}

/* ── Focus-visible (T-20): explicit override so ctrl-btn always shows a ring
   even when the ambient :focus-visible rule in base.css is in effect.
   Uses amber outline (3 px, offset 3 px) to stand out against the dark
   --color-dim control-bar background.                                       */
.ctrl-btn:focus-visible {
  outline: 3px solid var(--color-amber);
  outline-offset: 3px;
}

/* ── Audio indicator ───────────────────────────────────────────────────── */
#audio-indicator {
  margin-left: 1rem;
  font-size: 1rem;
  color: var(--color-grey);
  user-select: none;
  display: none; /* shown by audio.js when audio is unavailable */
}

#audio-indicator.visible { display: inline; }

/* ── Separator dot between button groups ────────────────────────────────── */
.ctrl-sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-grey);
  flex-shrink: 0;
}