/* Hands-free cook mode (task 823.4): the mic switch, the status bar and the settings dialog. Loaded on cook pages only. */
.hf-toggle { gap: 6px; padding: 0 12px; }
.hf-toggle .mic { flex: none; }
.hf-word { font: 600 .95rem var(--sans); }
.hf-toggle[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.hf-toggle[data-state="blocked"], .hf-toggle[data-state="nomic"], .hf-toggle[data-state="error"] { border-color: var(--bad); color: var(--bad); }

.hf-bar { width: 100%; max-width: 980px; margin: 10px auto 0; padding: 10px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); display: grid; gap: 4px; }
.hf-bar[hidden] { display: none; }
.hf-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hf-status { margin: 0; flex: 1; min-width: 12em; font-weight: 600; }
.hf-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.hf-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; background: var(--star-empty); }
.hf-bar[data-state="listening"] .hf-dot { background: var(--herb); box-shadow: 0 0 0 0 color-mix(in srgb, var(--herb) 60%, transparent); animation: hf-pulse 1.6s ease-out infinite; }
.hf-bar[data-state="starting"] .hf-dot { background: var(--honey); }
.hf-bar.speaking .hf-dot { background: var(--accent); animation: none; }
.hf-bar[data-state="blocked"] .hf-dot, .hf-bar[data-state="nomic"] .hf-dot, .hf-bar[data-state="error"] .hf-dot { background: var(--bad); animation: none; }
.hf-bar[data-state="blocked"], .hf-bar[data-state="nomic"], .hf-bar[data-state="error"] { border-color: var(--bad); background: var(--bad-soft); }
@keyframes hf-pulse { 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.hf-answer { margin: 0; font-size: 1.2rem; font-weight: 600; }
.hf-answer:empty, .hf-heard:empty { display: none; }
.hf-heard { margin: 0; }
.hf-heard.miss { font-style: italic; }
.hf-hint { margin: 0; }
.size-2 .hf-answer { font-size: 1.45rem; }
.size-3 .hf-answer { font-size: 1.7rem; }

.hf-dialog { border: 0; border-radius: 20px; padding: 0; width: min(580px, 94vw); max-height: 90vh; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.hf-dialog::backdrop { background: rgba(20, 10, 0, .5); }
.hf-body { padding: 14px 20px 20px; }
.hf-body .lede { margin-top: 0; }
.hf-commands { margin: 12px 0; }
.hf-commands summary { cursor: pointer; font-weight: 600; }
.hf-commands ul { margin: 8px 0 0; padding-left: 1.2em; }
.hf-speech { border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px 14px; margin: 12px 0; display: grid; gap: 4px; }
.hf-speech legend { font-weight: 700; padding: 0 6px; }
.hf-speech select, .hf-speech input[type="range"] { width: 100%; margin-bottom: 8px; }
.hf-speech input[type="range"] { accent-color: var(--accent); min-height: 32px; }
.hf-body .form-foot { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }

@media (max-width: 640px) {
  .hf-word { display: none; }
  .hf-toggle { padding: 0; }
  .hf-bar { margin: 8px 12px 0; width: auto; padding: 8px 12px; }
  .hf-actions .btn { padding: .3em .7em; }
  .hf-answer:not(:empty) ~ .hf-hint { display: none; }
}