/*
 * components/files: the drop zone of ui/Dropzone.js in the DS FileField look (components/forms/FileField.jsx).
 * A 2px DASHED --border-default boundary (a target, not an edge) at --radius-md, --s-6/--s-4 of room to aim at, the
 * 32px upload glyph (1.75 stroke) in --text-subtle, the prompt --type-body medium in --text-strong and the constraint
 * --type-body-sm in --text-subtle. The brand tint (--surface-brand-subtle, --border-brand) and the brand glyph show
 * only while files are over it: at rest the accent stays with the page's primary action.
 */
.ae-file-field { display: grid; gap: 2px; min-width: 0; } /* the DS FormField gap to the hint below */
.ae-file-zone {
  display: grid; place-items: center; gap: var(--s-2); width: 100%; margin: 0; padding: var(--s-6) var(--s-4);
  background: var(--surface-card); color: var(--text-body); font: inherit; text-align: center;
  border: var(--border-width-emphasis) dashed var(--border-default); border-radius: var(--radius-md);
  outline: none; cursor: pointer; transition: var(--transition-control);
}
.ae-file-zone > * { pointer-events: none; } /* drag events come from the zone alone, not from its text */
.ae-file-zone:hover { border-color: var(--border-strong); }
.ae-file-zone:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ae-file-zone.is-invalid { border-color: var(--status-danger-fg); }
.ae-file-zone.is-over { background: var(--surface-brand-subtle); border-color: var(--border-brand); }
.ae-file-zone:disabled { opacity: 0.5; cursor: not-allowed; }
.ae-file-zone:disabled:hover { border-color: var(--border-default); }
.ae-file-zone__glyph { color: var(--text-subtle); stroke-width: 1.75; transition: var(--transition-control); }
.ae-file-zone.is-over .ae-file-zone__glyph { color: var(--text-brand); }
.ae-file-zone__text { display: grid; gap: 2px; min-width: 0; }
.ae-file-zone__prompt { font: var(--type-body); font-weight: var(--weight-medium); color: var(--text-strong); }
.ae-file-zone__constraint { font: var(--type-body-sm); color: var(--text-subtle); max-width: 80ch; overflow-wrap: anywhere; }

/* compact: the slimmer zone above a list of chosen files; glyph beside the text */
.ae-file-field.is-compact .ae-file-zone {
  grid-template-columns: auto minmax(0, 1fr); place-items: center start; gap: var(--s-3); padding: var(--s-3) var(--s-4);
  text-align: start;
}