@scope (upload-ui) {
  :where(:scope) {
    /* ── Tokens ── */
    --upload-gap:              var(--a-space-2);
    --upload-radius:           var(--a-radius-md);
    --upload-font:             var(--a-ui-size);
    --upload-border:           var(--a-border-subtle);
    --upload-border-hover:     var(--a-accent);
    --upload-border-dragover:  var(--a-accent-bg);
    --upload-bg-dragover:      var(--a-accent-muted);
    --upload-fg:               var(--a-fg-subtle);
    --upload-fg-hover:         var(--a-accent);
    --upload-label-fg:         var(--a-fg);
    --upload-label-weight:     var(--a-weight-medium);
    --upload-label-size:       var(--a-label-size);
    --upload-hint-fg:          var(--a-fg-muted);
    --upload-hint-size:        var(--a-ui-sm);
    --upload-bg-disabled:      var(--a-ui-bg-disabled);
    --upload-fg-disabled:      var(--a-ui-text-disabled);
    --upload-border-disabled:  var(--a-ui-border-disabled);
    --upload-focus-ring:       var(--a-focus-ring);
    --upload-focus-ring-invalid: var(--a-focus-ring-invalid);

    /* ── Spacing ── */
    --upload-dropzone-pad:     var(--a-space-6);

    /* ── Transitions ── */
    --upload-duration:         var(--a-duration-fast);
    --upload-easing:           var(--a-easing);
  }

  :scope {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--upload-gap);
    font-size: var(--upload-font);
  }

  /* Label via ::before */
  :scope::before {
    content: attr(label);
    font-size: var(--upload-label-size);
    font-weight: var(--upload-label-weight);
    color: var(--upload-label-fg);
  }
  :scope:not([label])::before,
  :scope[label=""]::before {
    display: none;
  }

  /* Dropzone */
  [data-dropzone] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--upload-dropzone-pad);
    border: 2px dashed var(--upload-border);
    border-radius: var(--upload-radius);
    color: var(--upload-fg);
    font-size: var(--upload-font);
    text-align: center;
    cursor: pointer;
    transition:
      border-color var(--upload-duration) var(--upload-easing),
      background var(--upload-duration) var(--upload-easing),
      color var(--upload-duration) var(--upload-easing),
      box-shadow var(--upload-duration) var(--upload-easing);
  }
  [data-dropzone]:hover {
    border-color: var(--upload-border-hover);
    color: var(--upload-fg-hover);
  }
  [data-dropzone]:focus-visible {
    /* Canonical ring via L3 token (see semantics.css FOCUS block). */
    outline: none;
    box-shadow: var(--upload-focus-ring);
  }
  [data-dropzone][data-dragover] {
    border-color: var(--upload-border-dragover);
    background: var(--upload-bg-dragover);
  }

  /* Hint via ::after on span */
  span[hint]::after {
    content: attr(hint);
    font-size: var(--upload-hint-size);
    color: var(--upload-hint-fg);
  }
  span[hint=""]::after {
    display: none;
  }
  span:not([hint])::after {
    display: none;
  }

  /* File list */
  [data-filelist] {
    display: flex;
    flex-direction: column;
    gap: var(--upload-gap);
    font-size: var(--upload-font);
  }
  [data-filelist]:empty {
    display: none;
  }

  /* Disabled */
  :scope[disabled] {
    pointer-events: none;
    color: var(--upload-fg-disabled);
  }
  :scope[disabled] [data-dropzone] {
    background: var(--upload-bg-disabled);
    border-color: var(--upload-border-disabled);
    color: var(--upload-fg-disabled);
    cursor: not-allowed;
  }
}
