/* textarea.css — multi-line text input. Block alias: .textarea
   Markup:    <textarea class="textarea" id="…" rows="4" …></textarea>
   Modifiers: .textarea--auto-grow (field-sizing: content between --textarea-min-rows and
              --textarea-max-rows, then scrolls; falls back to rows + vertical resize)
   Counter:   reuse .field__counter + js/form-field.js (data-counter on the textarea)
   States:    :hover, :focus-visible, :disabled, :read-only, aria-invalid="true" | :user-invalid.
              Docs-only freeze classes: .is-hover, .is-focus-visible.
   Visual language matches .input (text-field.css): same border, radius, ring and state tokens. */
@layer components {
  .textarea {
    --_border: var(--input-border);
    --_bg: var(--input-bg);
    --textarea-min-rows: 3;
    --textarea-max-rows: 12;

    display: block;
    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: calc(var(--size-control-md) * 2);
    margin: 0;
    padding-block: var(--space-2);
    padding-inline: var(--space-3);
    border: var(--border-width-thin) solid var(--_border);
    border-radius: var(--input-radius);
    background: var(--_bg);
    color: var(--color-text-default);
    font-family: inherit;
    font-size: var(--font-size-md); /* 16px: no iOS zoom on focus */
    line-height: var(--font-line-height-normal);
    resize: vertical;
    transition: border-color var(--motion-duration-fast) var(--motion-easing-standard);
  }
  .textarea::placeholder { color: var(--color-text-subtle); opacity: 1; }

  /* Auto-grow: content-sized between min and max rows. Without support, rows= + resize apply. */
  @supports (field-sizing: content) {
    .textarea--auto-grow {
      field-sizing: content;
      min-block-size: calc(var(--textarea-min-rows) * 1lh + 2 * var(--space-2) + 2 * var(--border-width-thin));
      max-block-size: calc(var(--textarea-max-rows) * 1lh + 2 * var(--space-2) + 2 * var(--border-width-thin));
      resize: none;
    }
  }

  /* Hover */
  .textarea:hover:not(:disabled, :read-only),
  .textarea.is-hover { --_border: var(--color-text-muted); }

  /* Focus — ring plus focus border */
  .textarea:focus-visible,
  .textarea.is-focus-visible {
    --_border: var(--color-border-focus);
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }

  /* Invalid — inset line doubles the border weight without layout shift */
  .textarea[aria-invalid="true"],
  .textarea:user-invalid {
    --_border: var(--color-border-invalid);
    box-shadow: inset 0 0 0 var(--border-width-thin) var(--_border);
  }

  /* Read-only: focusable, copyable, no emphasis */
  .textarea:read-only:not(:disabled) {
    --_bg: var(--color-bg-subtle);
    --_border: var(--color-border-default);
    resize: none;
  }

  /* Disabled */
  .textarea:disabled {
    --_bg: var(--color-bg-muted);
    --_border: var(--color-border-subtle);
    color: var(--color-text-disabled);
    cursor: not-allowed;
    resize: none;
  }
  .textarea:disabled::placeholder { color: var(--color-text-disabled); }

  @media (forced-colors: active) {
    .textarea { border-color: CanvasText; }
    .textarea:disabled { border-color: GrayText; color: GrayText; }
  }
}