@scope (inline-edit-ui) {
  :where(:scope) {
    --inline-edit-bg-hover:    var(--a-bg-muted);
    --inline-edit-bg-edit:     var(--a-bg);
    --inline-edit-outline:     var(--a-accent-strong);
    --inline-edit-placeholder: var(--a-fg-subtle);
    --inline-edit-px:          var(--a-space-1);
    --inline-edit-py:          var(--a-space-0-5);
    --inline-edit-radius:      var(--a-radius-sm);
  }

  :scope {
    /* Inline-block so padding works without breaking text flow when
       embedded inside a paragraph or heading. Falls back to inline for
       table cells (where the cell already contains the box). */
    display: inline-block;
    box-sizing: border-box;
    padding-inline: var(--inline-edit-px);
    padding-block: var(--inline-edit-py);
    margin-inline: calc(-1 * var(--inline-edit-px));
    margin-block: calc(-1 * var(--inline-edit-py));
    border-radius: var(--inline-edit-radius);
    cursor: text;
    color: inherit;
    font: inherit;
    transition: background-color var(--a-duration-fast) var(--a-easing-out);
    /* Make sure focus-visible outline can land on us (we set tabindex=0) */
    outline-offset: 2px;
  }

  /* Hover affordance — subtle bg tint so the user sees this IS editable.
     Suppressed when disabled / readonly / already editing. */
  :scope:not([editing]):not([disabled]):not([readonly]):hover {
    background: var(--inline-edit-bg-hover);
  }

  /* Editing state — flat background + accent outline for focus clarity */
  :scope[editing] {
    background: var(--inline-edit-bg-edit);
    outline: 2px solid var(--inline-edit-outline);
    outline-offset: 0;
    cursor: text;
  }

  /* Empty-value placeholder — show the [placeholder] attr as faint text
     when the host has no text content + isn't being edited. */
  :scope:empty:not([editing])::before {
    content: attr(placeholder);
    color: var(--inline-edit-placeholder);
    font-style: italic;
  }

  :scope[disabled],
  :scope[readonly] {
    cursor: default;
    opacity: 0.6;
  }

  :scope[disabled] {
    pointer-events: none;
  }
}
