/* Safari 17.x bug: `:scope:not(...) [descendant]:hover` inside `@scope`
   doesn't match the scope root. Plain selector outside works. See
   docs/BROWSER-COMPAT.md §3a. */
textarea-ui:not([disabled]) [slot="text"]:hover {
  background: var(--textarea-bg-hover);
  border-color: var(--textarea-border-hover);
  color: var(--textarea-fg-hover);
}

@scope (textarea-ui) {
  :where(:scope) {
    /* ── Tokens (wired to --a-ui-*) ── */
    --textarea-bg:              var(--a-ui-bg);
    --textarea-fg:              var(--a-ui-text);
    --textarea-border:          var(--a-ui-border);
    --textarea-border-hover:    var(--a-ui-border-hover);
    --textarea-focus-ring:      var(--a-focus-ring);
    --textarea-focus-ring-invalid: var(--a-focus-ring-invalid);
    --textarea-radius:          var(--a-radius);
    --textarea-min-height:      calc(var(--a-size) * 2);
    --textarea-px:              var(--a-ui-px);
    --textarea-py:              var(--a-ui-px);
    --textarea-font-size:       var(--a-ui-size);
    --textarea-font-family:     var(--a-font-family-ui);
    --textarea-label-size:      var(--a-label-size);
    --textarea-label-fg:        var(--a-label-color);
    --textarea-placeholder-fg:  var(--a-ui-text-placeholder);
    --textarea-gap:             var(--a-space-1);

    /* ── Transition ── */
    --textarea-duration:        var(--a-duration-fast);
    --textarea-easing:          var(--a-easing);

    /* ── State ── */
    --textarea-bg-hover:        var(--a-ui-bg-hover);
    --textarea-fg-hover:        var(--a-ui-text-hover);
    --textarea-label-fg-focus:  var(--a-fg-subtle);
    --textarea-bg-disabled:     var(--a-ui-bg-disabled);
    --textarea-fg-disabled:     var(--a-ui-text-disabled);
    text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
}

  :scope {
    /* ── Base ── */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--textarea-gap);
  }

  :scope[data-direction="row"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  [slot="label"] {
    font-size: var(--textarea-label-size);
    color: var(--textarea-label-fg);
  }
  [slot="label"][label]::after { content: attr(label); }

  [slot="text"] {
    /* Positioning context for the [data-empty]::before placeholder pseudo,
       which is absolutely positioned (out of inline flow) so the caret
       renders at content-start instead of after the placeholder text. */
    position: relative;
    min-height: var(--textarea-min-height);
    padding: var(--textarea-py) var(--textarea-px);
    border: 1px solid var(--textarea-border);
    border-radius: var(--textarea-radius);
    background: var(--textarea-bg);
    color: var(--textarea-fg);
    font: inherit;
    /* font-family floor — see segment.css rationale. */
    font-family: var(--textarea-font-family);
    font-size: var(--textarea-font-size);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-y: auto;
    cursor: text;
    outline: none;
    transition:
      background   var(--textarea-duration) var(--textarea-easing),
      border-color var(--textarea-duration) var(--textarea-easing),
      color        var(--textarea-duration) var(--textarea-easing),
      box-shadow   var(--textarea-duration) var(--textarea-easing);
  }
  /* hover rule moved outside @scope — see Safari 17.x bug note at top. */
  :scope:not([disabled]) [slot="text"]:focus {
    /* Canonical ring via L3 token (see semantics.css FOCUS block).
       `:focus` (not :focus-visible) is deliberate — the caret lives
       in the contenteditable [slot="text"] span; :focus-visible on
       the host wouldn't match the actual input surface. */
    outline: none;
    box-shadow: var(--textarea-focus-ring);
    color: var(--textarea-fg-hover);
  }
  :scope[aria-invalid="true"]:not([disabled]) [slot="text"]:focus,
  :scope[error]:not([disabled]) [slot="text"]:focus {
    box-shadow: var(--textarea-focus-ring-invalid);
  }
  :scope:not([disabled]) [slot="text"]:focus + [slot="label"],
  :scope:not([disabled]):focus-within [slot="label"] {
    color: var(--textarea-label-fg-focus);
  }

  /* Placeholder — see input.css companion comment. Out-of-flow positioning
     prevents the inline pseudo box from pushing the caret position to the
     right of the placeholder text after type-then-delete. */
  [slot="text"][data-empty]::before {
    content: attr(data-placeholder);
    color: var(--textarea-placeholder-fg);
    pointer-events: none;
    position: absolute;
    inset: 0;
    padding: inherit;
  }

  /* Disabled */
  :scope[disabled] [slot="text"] {
    background: var(--textarea-bg-disabled);
    color: var(--textarea-fg-disabled);
    cursor: not-allowed;
  }
}
