/* ============================================================
   app-textarea — native multi-line text input (the <app-textarea>
   tag helper). Multi-line peer of app-textbox (ADR 0014). Shares the
   label-above look and token theming; the field is a resizable
   <textarea> sized by its rows attribute.
   ============================================================ */
@layer components {
    .app-textarea {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        width: 100%;
    }

    .app-textarea__label {
        font-size: var(--fs-ui-sm);
        color: var(--color-ink-mute);
    }

    .app-textarea__input {
        box-sizing: border-box;
        width: 100%;
        /* Natural height comes from the rows attribute; resize stays vertical
           (also set globally in app-reset.css) so users can grow it, not break
           the column width. */
        resize: vertical;
        min-height: 4rem;
        font: inherit;
        line-height: 1.5;
        color: var(--color-ink);
        background: var(--color-surface);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-sm);
        padding: var(--space-2) var(--space-3);
        transition: border-color var(--dur-base) var(--ease),
                    box-shadow var(--dur-base) var(--ease);
    }

    .app-textarea__input::placeholder {
        color: var(--color-ink-faint);
    }

    .app-textarea__input:focus-visible {
        outline: none;
        border-color: var(--color-accent);
        box-shadow: 0 0 0 2px var(--color-accent-soft);
    }

    .app-textarea__input:disabled,
    .app-textarea__input[readonly] {
        background: var(--color-surface-alt);
        color: var(--color-ink-mute);
        cursor: not-allowed;
    }

    .app-textarea--disabled .app-textarea__label {
        opacity: 0.5;
    }
}