/* The form field components (docs/STYLE-GUIDE.md, 2026-10-13), from the Settings fields (assets/settings-v2.css
   .settings-input, .st-switch) so new forms look like the ones already shipped. Load after tokens.css.

     <label class="mk-field"><span class="mk-label">Display name</span>
       <input class="mk-input" type="text"><span class="mk-hint">Shown at the table.</span></label>
     <label class="mk-switch"><input type="checkbox"><span class="mk-switch-track"></span> Mute sounds</label>

   Focus: a focused field's own border turns gold, no outline ring or glow. Buttons, switches and checkboxes keep a
   :focus-visible outline. Error: .is-error on the field turns the border red and the hint red. */
.mk-field { display: grid; gap: var(--muck-space-2); min-width: 0; }
.mk-label { font: 600 13px/1.3 var(--muck-font); color: var(--muck-text-2); }
.mk-hint { font: 400 12px/1.45 var(--muck-font); color: var(--muck-text-3); }

.mk-input, .mk-select, .mk-textarea {
  width: 100%; min-width: 0; min-height: 44px; box-sizing: border-box; margin: 0; padding: 0 var(--muck-space-4);
  border: 1px solid var(--muck-line-strong); border-radius: var(--muck-radius-field); background: var(--muck-surface-3);
  color: var(--muck-text); font: 500 14px var(--muck-font); transition: border-color var(--muck-dur-fast);
}
.mk-textarea { min-height: 96px; padding: var(--muck-space-3) var(--muck-space-4); line-height: 1.5; resize: vertical; }
.mk-input::placeholder, .mk-textarea::placeholder { color: var(--muck-text-3); }
.mk-input:hover, .mk-select:hover, .mk-textarea:hover { border-color: var(--muck-text-3); }
.mk-input:focus, .mk-select:focus, .mk-textarea:focus { outline: none; border-color: var(--muck-gold); box-shadow: none; }
.mk-input:disabled, .mk-select:disabled, .mk-textarea:disabled { opacity: .6; cursor: not-allowed; }
.mk-field.is-error .mk-input, .mk-field.is-error .mk-select, .mk-field.is-error .mk-textarea { border-color: var(--muck-red); }
.mk-field.is-error .mk-hint { color: var(--muck-red); }

.mk-check { accent-color: var(--muck-gold); width: 18px; height: 18px; }
.mk-check:focus-visible { outline: 2px solid var(--muck-gold); outline-offset: 2px; }

.mk-switch { position: relative; display: inline-flex; align-items: center; gap: var(--muck-space-3); min-height: 44px; cursor: pointer; font: 500 14px var(--muck-font); color: var(--muck-text); }
.mk-switch input { position: absolute; width: 44px; height: 26px; margin: 0; opacity: 0; cursor: pointer; }
.mk-switch-track { position: relative; flex: none; width: 44px; height: 26px; box-sizing: border-box; border: 1px solid var(--muck-line-strong); border-radius: var(--muck-radius-pill); background: var(--muck-surface-3); transition: background var(--muck-dur), border-color var(--muck-dur); }
.mk-switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--muck-text-2); transition: transform var(--muck-dur), background var(--muck-dur); }
.mk-switch input:checked + .mk-switch-track { border-color: var(--muck-gold); background: var(--muck-gold); }
.mk-switch input:checked + .mk-switch-track::after { transform: translateX(18px); background: var(--muck-gold-ink); }
.mk-switch input:focus-visible + .mk-switch-track { outline: 2px solid var(--muck-gold); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .mk-input, .mk-select, .mk-textarea, .mk-switch-track, .mk-switch-track::after { transition: none; } }