/* 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, var(--textarea-bg-hover-default));
  border-color: var(--textarea-border-hover, var(--textarea-border-hover-default));
  color: var(--textarea-fg-hover, var(--textarea-fg-hover-default));
}

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

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

    /* ── State ── */
    --textarea-bg-hover-default:        var(--a-ui-bg-hover);
    --textarea-fg-hover-default:        var(--a-ui-text-hover);
    --textarea-label-fg-focus-default:  var(--a-fg-subtle);
    --textarea-bg-disabled-default:     var(--a-ui-bg-disabled);
    --textarea-fg-disabled-default:     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, var(--textarea-gap-default));
  }

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

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

  [slot="text"] {
    min-height: var(--textarea-min-height, var(--textarea-min-height-default));
    padding: var(--textarea-py, var(--textarea-py-default)) var(--textarea-px, var(--textarea-px-default));
    border: 1px solid var(--textarea-border, var(--textarea-border-default));
    border-radius: var(--textarea-radius, var(--textarea-radius-default));
    background: var(--textarea-bg, var(--textarea-bg-default));
    color: var(--textarea-fg, var(--textarea-fg-default));
    font: inherit;
    font-size: var(--textarea-font-size, var(--textarea-font-size-default));
    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-duration-default)) var(--textarea-easing, var(--textarea-easing-default)),
      border-color var(--textarea-duration, var(--textarea-duration-default)) var(--textarea-easing, var(--textarea-easing-default)),
      color        var(--textarea-duration, var(--textarea-duration-default)) var(--textarea-easing, var(--textarea-easing-default)),
      box-shadow   var(--textarea-duration, var(--textarea-duration-default)) var(--textarea-easing, var(--textarea-easing-default));
  }
  /* 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, var(--textarea-focus-ring-default));
    color: var(--textarea-fg-hover, var(--textarea-fg-hover-default));
  }
  :scope[aria-invalid="true"]:not([disabled]) [slot="text"]:focus,
  :scope[error]:not([disabled]) [slot="text"]:focus {
    box-shadow: var(--textarea-focus-ring-invalid, var(--textarea-focus-ring-invalid-default));
  }
  :scope:not([disabled]) [slot="text"]:focus + [slot="label"],
  :scope:not([disabled]):focus-within [slot="label"] {
    color: var(--textarea-label-fg-focus, var(--textarea-label-fg-focus-default));
  }

  /* Placeholder */
  [slot="text"][data-empty]::before {
    content: attr(data-placeholder);
    color: var(--textarea-placeholder-fg, var(--textarea-placeholder-fg-default));
    pointer-events: none;
  }

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