/*
 * Form controls.
 *
 * Text fields are a single line under the text, matching how titles are
 * edited in place: quiet until focused, then the full-strength rule.
 * Choosing from a list is done with a chip that opens a menu (see badges.css).
 */

.input,
.textarea {
    width: 100%;
    min-height: var(--control-height);
    padding: var(--space-2) 0;
    border: 0;
    border-bottom: var(--border-width) solid var(--color-hairline);
    border-radius: 0;
    background: none;
    color: var(--color-fg);
    font-size: var(--text-md);
    line-height: 1.3;
    transition: border-color var(--transition);
}

.input:hover,
.textarea:hover {
    border-bottom-color: var(--color-muted);
}

.input:focus,
.input:focus-visible,
.textarea:focus,
.textarea:focus-visible {
    outline: none;
    box-shadow: none;
    border-bottom-color: var(--color-fg);
}

.input::placeholder,
.textarea::placeholder {
    color: var(--color-muted);
    opacity: 1;
}

.textarea {
    min-height: 5rem;
    line-height: var(--line-normal);
    resize: vertical;
}

/* A value that is shown but can't be changed here. */
.input:disabled {
    border-bottom-color: transparent;
    color: var(--color-muted);
    opacity: 0.6;
    cursor: not-allowed;
}

.input--small {
    min-height: var(--control-height-small);
    padding-block: var(--space-1);
    font-size: var(--text-sm);
}

/* Text edited in place: no rule at all until it has focus. */
.input--plain {
    min-height: 0;
    padding: 0;
    border-bottom-color: transparent;
}

.input--plain:hover {
    border-bottom-color: transparent;
}

.input--plain:focus,
.input--plain:focus-visible {
    border-bottom-color: var(--color-fg);
}

.form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.field__label {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
}

.field__hint {
    font-size: var(--text-sm);
    color: var(--color-muted);
}

/* Errors are marked with weight and an icon rather than colour. */
.field__error,
.form__message {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
}

.field__error::before {
    content: "\2192\00a0";
}

.form__message {
    padding: var(--space-3);
    border: var(--border);
    border-radius: var(--radius-small);
}

.form__message--success {
    background: var(--color-fg);
    color: var(--color-bg);
}

.input[aria-invalid="true"] {
    border-bottom-style: dashed;
    border-bottom-color: var(--color-fg);
}

.check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    cursor: pointer;
}

.check input {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    accent-color: var(--color-fg);
}

/* Password requirements, ticked off as they are met. */
.checklist {
    display: grid;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-muted);
}

.checklist__item.is-met {
    color: var(--color-fg);
    font-weight: var(--font-weight-medium);
}

/* An on/off switch: a track with a knob that slides across. Filled in when on. */
.switch {
    --switch-height: 1.125rem;
    --switch-inset: 2px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-fg);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
}

.switch__track {
    position: relative;
    flex: none;
    width: calc(var(--switch-height) * 1.8);
    height: var(--switch-height);
    border: var(--border);
    border-radius: var(--radius-round);
    background: var(--color-bg);
    transition: background var(--nav-duration) var(--nav-ease);
}

.switch__knob {
    position: absolute;
    top: var(--switch-inset);
    left: var(--switch-inset);
    width: calc(var(--switch-height) - 2 * var(--switch-inset) - 2 * var(--border-width));
    aspect-ratio: 1;
    border-radius: var(--radius-round);
    background: var(--color-fg);
    transition: translate var(--nav-duration) var(--nav-ease), background var(--nav-duration) var(--nav-ease);
}

.switch[aria-checked="true"] .switch__track {
    background: var(--color-fg);
}

.switch[aria-checked="true"] .switch__knob {
    background: var(--color-bg);
    translate: calc(var(--switch-height) * 0.8) 0;
}

.switch:focus-visible {
    outline: none;
}

.switch:focus-visible .switch__track {
    box-shadow: var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
    .switch__track,
    .switch__knob {
        transition: none;
    }
}