/**
 * Primitive — Textarea
 *
 * Expected HTML: <textarea class="ec-textarea" data-material="water"></textarea>
 *
 * Same treatment as Input (see input.css) — vertical resize only, so a
 * customer never fights the page's horizontal layout.
 */

.ec-textarea {
	display: block;
	width: 100%;
	min-height: 6rem;
	padding: var(--ec-space-3) var(--ec-space-4);
	border: 1px solid var(--ec-color-border);
	border-radius: var(--ec-radius-sm);
	background-color: var(--ec-color-surface);
	color: var(--ec-color-text-primary);
	font-family: var(--ec-font-family-base);
	font-size: var(--ec-font-size-body);
	line-height: var(--ec-line-height-base);
	resize: vertical;
	transition: border-color var(--ec-duration-base) var(--ec-ease-standard);
}

.ec-textarea::placeholder {
	color: var(--ec-color-text-secondary);
}

.ec-textarea:focus-visible {
	outline: 2px solid var(--ec-material-color);
	outline-offset: 2px;
	border-color: var(--ec-material-color);
}

.ec-textarea[disabled] {
	background-color: var(--ec-color-surface-elevated);
	color: var(--ec-color-text-secondary);
	cursor: not-allowed;
	opacity: 0.7;
}

.ec-textarea--error {
	border-color: var(--ec-color-danger);
}

/* Compact modifier — same convention as .ec-input--compact
   (sections/hq-management.css) for a short, low-frequency note field
   that doesn't need the shared 6rem floor. resize:vertical is
   inherited unchanged, so an operator can still drag it taller. */
.ec-textarea--compact.ec-textarea {
	min-height: var(--ec-space-8);
}