/* Field：label + control + hint/error 一体。control 是 input / textarea / select。
   提供 inputClass / textareaClass 以便外部直接套用。 */

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

.label
{
    font-size: var(--fs-12);
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
}

.required::after
{
    content: " *";
    color: var(--state-error);
}

.input
{
    width: 100%;
    font-family: inherit;
    font-size: var(--fs-13);
    line-height: var(--lh-ui);
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--divider);
    border-radius: var(--radius-control);
    padding: 7px 10px;
    transition:
        border-color var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-fast) var(--ease-out);
}

.input:hover:not(:disabled):not(:focus)
{
    border-color: color-mix(in srgb, var(--divider) 60%, var(--text));
}

.input:focus
{
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.input:disabled
{
    background: var(--surface-sunken);
    cursor: not-allowed;
    opacity: 0.7;
}

.input::placeholder
{
    color: var(--text-muted);
    opacity: 0.6;
}

.textarea
{
    composes: input;
    resize: vertical;
    min-height: 80px;
    line-height: var(--lh-body);
}

.invalid
{
    border-color: var(--state-error) !important;
}
.invalid:focus
{
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--state-error) 22%, transparent) !important;
}

.hint
{
    font-size: var(--fs-11);
    color: var(--text-muted);
    margin-top: 2px;
}

.error
{
    font-size: var(--fs-11);
    color: var(--state-error);
    margin-top: 2px;
}
