/*
 * Form controls.
 *
 *   <div class="field">
 *     <label class="field__label" for="u">Username</label>
 *     <input class="input" id="u" name="username">
 *     <p class="field__hint">Case-sensitive.</p>
 *     <p class="field__error">Required.</p>
 *   </div>
 *
 *   <label class="switch">
 *     <input type="checkbox" role="switch" checked>
 *     <span class="switch__track"></span>
 *     <span class="switch__label">Autonomous</span>
 *   </label>
 *
 * `.form__input / __select / __textarea / __label / __group / __hint /
 * __error` are the pre-5.102 names and stay as synonyms for one release.
 */
.form { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.form__title { margin: 0; font-size: var(--fs-xl); }
.form__submit { align-self: flex-start; }
.form__row { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: flex-end; }
.form__row > * { flex: 1 1 160px; min-width: 0; }

.field, .form__group { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.field--inline { flex-direction: row; align-items: center; gap: var(--sp-2); }
.field__label, .form__label { font-size: var(--fs-sm); font-weight: 500; color: var(--color-text-muted); }
.field__hint,  .form__hint  { font-size: var(--fs-xs); color: var(--color-text-dim); }
.form__hint--muted { font-size: var(--fs-xs); }
.field__error, .form__error { font-size: var(--fs-xs); color: var(--color-danger); }
.field__error:empty { display: none; }
.field--error .input, .field--error .select, .field--error .textarea { border-color: var(--color-danger); }

.input, .select, .textarea,
.form__input, .form__select, .form__textarea {
    width: 100%;
    min-height: var(--height-control);
    padding: var(--sp-2) var(--sp-3);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    font-size: var(--fs-sm);
    line-height: 1.3;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.input::placeholder, .textarea::placeholder,
.form__input::placeholder, .form__textarea::placeholder { color: var(--color-text-dim); }
.input:hover, .select:hover, .textarea:hover,
.form__input:hover, .form__select:hover, .form__textarea:hover { border-color: var(--color-border-hi); }
.input:focus, .select:focus, .textarea:focus,
.form__input:focus, .form__select:focus, .form__textarea:focus {
    outline: none;
    border-color: var(--color-primary-hi);
    background: var(--color-surface);
}
.input:disabled, .select:disabled, .textarea:disabled,
.form__input:disabled, .form__select:disabled, .form__textarea:disabled { opacity: 0.5; cursor: not-allowed; }
.input--sm, .select--sm { min-height: var(--height-control-sm); padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs); }
.textarea, .form__textarea { min-height: 96px; resize: vertical; }
.textarea--mono { font-family: var(--font-mono); }

/* Native select: hide the UA arrow and draw a chevron. */
.select, .form__select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: var(--sp-6);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right var(--sp-2) center;
    background-size: 16px;
}
.select option, .form__select option { background: var(--color-surface); }

/* One-time / backup codes: mono and letter-spaced. */
.input--code, .form__input--code { font-family: var(--font-mono); letter-spacing: 0.15em; }

/* Checkbox / radio: accent colour only. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-primary); width: 16px; height: 16px; margin: 0; }
.check { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); cursor: pointer; }

/* Range slider */
input[type="range"] { accent-color: var(--color-primary); width: 100%; }

/* ── Switch ─────────────────────────────────────────────────────── */
/* The checkbox (role=switch) stays in the tab order but is visually
   collapsed; the track and thumb are painted from its :checked /
   :focus-visible / :disabled state via sibling selectors. Generalised
   from the settings page's `.settings__switch` (which remains as a
   synonym in _settings.css for one release). */
.switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    cursor: pointer;
    user-select: none;
    font-size: var(--fs-sm);
}
.switch input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}
.switch__track {
    position: relative;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
    border-radius: var(--radius-pill);
    background: var(--color-surface-hi);
    border: 1px solid var(--color-border);
    transition: background var(--t-fast), border-color var(--t-fast);
}
.switch__track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-text-muted);
    transition: transform var(--t-fast), background var(--t-fast);
}
.switch input:checked + .switch__track { background: var(--color-primary); border-color: var(--color-primary); }
.switch input:checked + .switch__track::after { transform: translateX(18px); background: #fff; }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.switch input:disabled + .switch__track { opacity: 0.5; }
.switch input:disabled ~ .switch__label { opacity: 0.5; }
.switch__label { color: var(--color-text); }
.switch__state { font-family: var(--font-mono); font-size: var(--fs-xs); min-width: 3ch; color: var(--color-text-muted); }
.switch--sm .switch__track { width: 32px; height: 18px; }
.switch--sm .switch__track::after { width: 12px; height: 12px; }
.switch--sm input:checked + .switch__track::after { transform: translateX(14px); }