/* ============================================================================
   VOICE-GUIDE.CSS -- the spoken-instructions mute toggle button.
   Shared by the guided voice-capture modal and the 7-step wizard nav bar.
   ========================================================================== */

.vg-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 9px;
  border: 1px solid var(--border, #2a2f3a);
  background: var(--panel-2, #1e222b);
  color: var(--text-dim, #9aa0ac);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease, background .12s ease, box-shadow .12s ease;
}
.vg-toggle:hover { border-color: var(--accent, #ff6b35); color: var(--text, #e8eaed); }
.vg-toggle:active { transform: translateY(1px); }
.vg-toggle.on {
  border-color: var(--accent-2, #35c2ff);
  color: var(--accent-2, #35c2ff);
  background: rgba(53, 194, 255, 0.12);
  box-shadow: 0 0 0 1px rgba(53, 194, 255, 0.25) inset;
}

/* compact variant for the wizard nav bar */
.vg-toggle.vg-sm { width: 28px; height: 28px; font-size: 13px; }