/*
 * Forms (WP9; UI-Design-Principles Sec. 6/9). Label ABOVE the field, help text
 * below, inline error under the field in --gtx-danger WITH an icon — never a mere
 * border colour (Sec. 9). Optional fields are marked "(optional)"; required ones
 * are unmarked (Sec. 6).
 *
 * Class schema: gtx-field, gtx-field__label, gtx-field__optional, gtx-field__hint,
 * gtx-field__error, gtx-field__error-icon, gtx-input, gtx-select, gtx-textarea,
 * gtx-checkbox, gtx-field.is-invalid.
 */

.gtx-form > * + * {
    margin-top: var(--gtx-s4);
}

.gtx-field {
    display: flex;
    flex-direction: column;
    gap: var(--gtx-s1);
}

.gtx-field__label {
    font-size: var(--gtx-fs-ui);
    font-weight: 600;
    color: var(--gtx-text);
}

.gtx-field__optional {
    color: var(--gtx-text-dim);
    font-weight: 400;
    font-size: var(--gtx-fs-meta);
}

.gtx-field__hint {
    color: var(--gtx-text-dim);
    font-size: var(--gtx-fs-meta);
}

.gtx-input,
.gtx-select,
.gtx-textarea {
    width: 100%;
    padding: var(--gtx-s2) var(--gtx-s3);
    min-height: 40px;
    background: var(--gtx-bg);
    color: var(--gtx-text);
    border: 1px solid var(--gtx-line);
    border-radius: var(--gtx-r-s);
    font-size: var(--gtx-fs-ui);
    transition: border-color var(--gtx-t-fast) var(--gtx-ease);
}

.gtx-textarea {
    min-height: 96px;
    resize: vertical;
    font-family: inherit;
}

.gtx-input::placeholder,
.gtx-textarea::placeholder {
    color: var(--gtx-text-dim);
}

.gtx-input:hover,
.gtx-select:hover,
.gtx-textarea:hover {
    border-color: var(--gtx-text-dim);
}

/* Mono for technical inputs (ports, tokens, slugs) — opt in with gtx-input--mono. */
.gtx-input--mono {
    font-family: var(--gtx-font-mono);
}

/* Invalid: red border AND an icon + text message below (Sec. 9 — never colour alone). */
.gtx-field.is-invalid .gtx-input,
.gtx-field.is-invalid .gtx-select,
.gtx-field.is-invalid .gtx-textarea {
    border-color: var(--gtx-danger);
}

.gtx-field__error {
    display: flex;
    align-items: center;
    gap: var(--gtx-s1);
    color: var(--gtx-danger);
    font-size: var(--gtx-fs-meta);
    font-weight: 600;
}

.gtx-field__error-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

/* Checkbox / radio rows: control beside its label. */
.gtx-checkbox {
    flex-direction: row;
    align-items: center;
    gap: var(--gtx-s2);
}

.gtx-checkbox input {
    width: 18px;
    height: 18px;
    accent-color: var(--gtx-ember);
}

.gtx-form__actions {
    display: flex;
    gap: var(--gtx-s2);
    flex-wrap: wrap;
    align-items: center;
}