/* v3 upload component (templates/admin/core/components/_lg_upload.html,
   js/v3/upload.js; admin redesign plan §11 decisions 196-200). One box that
   shows one state at a time (data-state on the field): empty · busy · done ·
   failed. The preview frame has the purpose's real shape so the crop is
   visible (decision 200). Progress is a native <progress> (no width
   animation). Role tokens only. */

.lg-upload > p { margin: 0; }   /* label + hint are <p> (the button carries the name) */

.lg-upload__box {
  border: 1px dashed var(--border-control);
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: var(--space-4);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.lg-upload[data-state="done"] .lg-upload__box { border-style: solid; border-color: var(--border); }
.lg-upload.is-drag .lg-upload__box { border-color: var(--primary); background: var(--primary-tint); }
.lg-upload[data-state="failed"] .lg-upload__box { border-color: var(--danger); }

/* One part at a time. */
.lg-upload [data-lg-upload-part] { display: none; }
.lg-upload[data-state="empty"] [data-lg-upload-part="empty"],
.lg-upload[data-state="busy"] [data-lg-upload-part="busy"],
.lg-upload[data-state="failed"] [data-lg-upload-part="failed"] { display: flex; }
.lg-upload[data-state="done"] [data-lg-upload-part="done"] { display: grid; }

.lg-upload__empty { flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.lg-upload__icon { display: inline-flex; color: var(--text-muted); }
.lg-upload__drop { color: var(--text-muted); font-size: var(--size-caption); line-height: var(--leading-caption); }

.lg-upload__busy { flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.lg-upload__bar { display: flex; align-items: center; gap: var(--space-3); width: 100%; }
.lg-upload__progress {
  flex: 1;
  height: 0.5rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--neutral-tint);
  overflow: hidden;
  appearance: none;
}
.lg-upload__progress::-webkit-progress-bar { background: var(--neutral-tint); border-radius: var(--radius-pill); }
.lg-upload__progress::-webkit-progress-value { background: var(--primary); border-radius: var(--radius-pill); }
.lg-upload__progress::-moz-progress-bar { background: var(--primary); border-radius: var(--radius-pill); }
.lg-upload__pct { min-width: 3rem; text-align: end; color: var(--text-muted); }

.lg-upload__done { margin: 0; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: center; }
.lg-upload__frame {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--neutral-tint);
}
.lg-upload--square .lg-upload__frame { width: 6rem; aspect-ratio: 1 / 1; }
.lg-upload--wide .lg-upload__frame { width: 12rem; aspect-ratio: 16 / 9; }
.lg-upload--tall .lg-upload__frame { width: 6rem; aspect-ratio: 1140 / 1300; }
.lg-upload__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lg-upload__meta { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.lg-upload__name { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.lg-upload__size { color: var(--text-muted); font-size: var(--size-caption); line-height: var(--leading-caption); }
.lg-upload__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }

.lg-upload__failed { flex-direction: column; gap: var(--space-2); }
.lg-upload__fail-text { margin: 0; color: var(--danger); }
.lg-upload__warn {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  background: var(--warning-tint);
  color: var(--text);
  font-size: var(--size-caption);
  line-height: var(--leading-caption);
}

@media (max-width: 40em) {
  .lg-upload__done { grid-template-columns: 1fr; }
  .lg-upload--wide .lg-upload__frame { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .lg-upload__box { transition: none; }
}