@layer components {
  /* Dependency-free uploader (uploads_controller.js). Drop zone on top, preview
     rows below — mirrors the attachment-row look (attachment.css) and reuses the
     SIMAP .progress / .progress-bar utility for the per-file bar. */

  /* The drop zone follows the standard form-input rules (.form__input): same
     border width/radius and the same blue focus ring + border tint on hover /
     keyboard focus / active drag. It keeps the dashed border as its distinguishing
     "drop here" affordance. */
  .uploads__zone {
    width: 100%;
    min-height: 9rem;
    padding: var(--block-space-double) var(--inline-space);
    border: var(--border-size, 2px) dashed var(--color-gray-light);
    border-radius: var(--border-radius);
    background-color: var(--color-bg);
    color: var(--color-ink-muted);
    cursor: pointer;
    text-align: center;
    outline: none;
    transition:
      box-shadow 250ms,
      border-color 250ms;
  }

  /* Inert children keep dragenter/dragleave on the zone itself, so the JS
     highlight is a plain class toggle (no depth counting). */
  .uploads__zone > * {
    pointer-events: none;
  }

  .uploads__zone:hover,
  .uploads__zone:focus-visible,
  .uploads__zone--active {
    border-color: color-mix(in oklch, var(--color-blue-bright), transparent 50%);
    box-shadow: 0 0 0 2px var(--color-blue-bright);
  }

  .uploads__list {
    margin-block-start: var(--block-space-half);
  }

  /* The .file-attachment-row + .file-attachment-row separator (attachment.css)
     already draws the between-rows border. */
  .uploads__icon {
    width: 20px;
  }

  .uploads__thumb {
    width: 20px;
    height: 20px;
    border-radius: var(--border-radius);
    object-fit: contain;
  }

  .uploads__thumb--image {
    object-fit: cover;
  }

  .uploads__remove {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  .uploads__filename {
    line-height: 1.3;
  }

  /* Progress bar sits beneath the filename and only shows while uploading; on
     completion or refusal it collapses so a finished row is just
     icon · filename · remove. */
  .uploads__progress {
    margin-block-start: var(--block-space-third);
    opacity: 0;
    transition: opacity 150ms linear;
  }

  .uploads__row--uploading .uploads__progress {
    opacity: 1;
  }

  .uploads__row--complete .uploads__progress,
  .uploads__row--error .uploads__progress {
    display: none;
  }

  .uploads__row--uploading .uploads__filename {
    opacity: 0.6;
  }

  .uploads__row--error .uploads__filename {
    color: var(--color-red);
  }
}