/* ===========================
 * Textarea Component Styles
 * ===========================
 * Multi-line extension of the Input component. Composes the shared
 * .input-group / .input-field / .input-label / .input-help-text rules
 * from css/components/inputs.css — inputs.css MUST be loaded BEFORE
 * this file (both in <head> and in every Show Code Setup block).
 * ===========================
 * Sizes: sm (32px min-height), md (40px min-height, default)
 * States: default, filled, focused, disabled, error — all inherited
 *         from inputs.css via the shared .input-field state classes
 *         (:focus-within, .input-error, .input-disabled). Only the
 *         two gaps inputs.css can't cover for a <textarea> are added
 *         below (section 3 and section 4).
 * Elements: .input-textarea (field modifier), .input-el (the
 *           <textarea>, reusing Input's markup contract), optional
 *           [data-autogrow] behavior (js/textarea.js), optional
 *           .input-char-count counter (js/textarea.js)
 * ===========================
 * Dark mode handled entirely by the inherited CSS custom properties —
 * zero textarea-specific dark-mode overrides needed.
 * No new :root tokens — every value below is an existing token or a
 * literal already established by inputs.css's own .input-tags rules.
 * =========================== */


/* ─── 1. Field container — auto-height instead of the fixed single-line
   height inputs.css sets on .input-field. Mirrors the vertical rhythm
   .input-tags already established for auto-height multi-row fields
   (inputs.css section 12: 6px/12px md, 4px/10px sm). ─── */

.input-field.input-textarea {
  height: auto;
  min-height: 40px;
  align-items: stretch;
  padding: 6px 12px;
}

.input-field.input-textarea.input-sm {
  min-height: 32px;
  padding: 4px 10px;
}


/* ─── 2. The <textarea class="input-el"> itself ───
   Text color, placeholder color, font, and width are already inherited
   for free from inputs.css's `.input-field input, .input-field .input-el`
   rule (section 4) and its sm-size font override (section 8) — only
   textarea-specific resize behavior is added here. ─── */

.input-field.input-textarea .input-el {
  resize: vertical;
  min-height: var(--line-height-md); /* one text line (24px) — the field's own
    min-height (40px, section 1) is the true resize floor, not this inner rule */
}

.input-field.input-textarea.input-sm .input-el {
  min-height: var(--line-height-sm); /* one text line (20px) — the sm field's
    own min-height (32px, section 1) is the true resize floor */
}

/* Auto-grow opt-in — js/textarea.js sets height from scrollHeight, so
   the manual resize handle is turned off (they'd fight each other) and
   overflow degrades to a scrollbar if a consumer caps max-height. */
.input-field.input-textarea .input-el[data-autogrow] {
  resize: none;
  overflow-y: auto;
}


/* ─── 3. State: Disabled ───
   inputs.css's disabled color rule (section 11) targets the `input`
   TAG plus the `.input-text` / `.input-placeholder` demo-only classes
   — it never matches `.input-el`, so a disabled textarea needs its own
   color rule here. The disabled background/border ARE already free
   (they're painted on the shared .input-field.input-disabled container,
   not the inner control). ─── */

.input-field.input-textarea.input-disabled .input-el {
  color: var(--text-disabled);
  cursor: not-allowed;
}


/* ─── 4. Char count ───
   Mirrors .input-help-text (inputs.css section 7) exactly, reusing the
   same tokens, with the count right-aligned under the field. ─── */

.input-char-count {
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-sm);
  color: var(--text-tertiary);
  text-align: right;
}
