/*
 * Generic form fields (portable) — floating-label pattern.
 * Markup contract: .form-field > (.control + label), label AFTER the
 * control, associated by for/id. Text-like controls carry
 * placeholder=" " so the label acts as the placeholder.
 * Required tokens: --field-radius, --border, --surface, --highlight,
 * --danger, --text-muted.
 */

.form-field {
    position: relative;
    flex: 1 1 10rem;
}

.form-field .control {
    inline-size: 100%;
    padding-block: 0.85rem 0.3rem;
    padding-inline: 0.5rem;
    font: inherit;
    color: var(--text-primary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--field-radius, 0.25rem);
}

.form-field label {
    position: absolute;
    inset-block-start: 0.65rem;
    inset-inline-start: 0.5rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    pointer-events: none;
    transition: all 0.12s ease-out;
}

/* Float when filled or focused (placeholder-shown = empty). */
.form-field .control:focus + label,
.form-field .control:not(:placeholder-shown) + label,
.form-field select.control + label {
    inset-block-start: 0.12rem;
    font-size: 0.62rem;
}

.form-field .control:focus {
    border-color: var(--highlight);
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Invalid only after user interaction — never flag pristine fields. */
.form-field .control:user-invalid {
    border-color: var(--danger);
}

.form-field .field-error {
    display: block;
    color: var(--danger);
    font-size: 0.7rem;
    min-block-size: 0.9rem;
    margin-block-start: 0.1rem;
}

/* Native checkboxes/radios, tinted via token. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--primary);
}

/* Form rows wrap intrinsically — no breakpoints. */
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}