/*
  The photo box in the listing editor, and nothing else.

  ============================================================
  why this is not in styles.css
  ============================================================
  The same argument `lang.css` makes, for the second thing the portal has and the console does
  not. `styles.css` is a VERBATIM COPY of `admin/styles.css` and has to stay one; the console has
  no photo editor — staff review listings, they do not write them — so these rules there would be
  dead CSS parked in another app to avoid a second file. A second file is the honest version.

  Every value below is a token from styles.css. There are no literals here for the same reason
  there are none there.
*/

/*
  A place to drop photographs, which has to LOOK like one before the drag starts.

  Dashed rather than solid: the only visual language a browser has for "this accepts something"
  that does not also read as a text field. It holds the thumbnails, the picker and the hint, so
  the whole box is the target and a near-miss still lands.
*/
.dropzone {
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
  padding: var(--s-lg);
  border: 1px dashed var(--line);
  border-radius: var(--r-card);
  background: var(--surface2);
}

/*
  Mid-drag. The accent wash, because it is the same "this is where it goes" the rest of the
  product uses for a live target — and a colour change rather than a size change, so nothing
  under the pointer moves while somebody is aiming at it.
*/
.dropzone.dragging {
  border-color: var(--accent);
  border-style: solid;
  background: var(--accent-wash);
}

/*
  Thumbnails, consistently sized.

  The `width` attribute on the img is what sizes it today, which leaves a portrait photograph
  three times taller than a landscape one beside it — and a business reads that as the portal
  having mangled the picture. A fixed box and `object-fit: cover` shows every one of them as the
  16:9 the app will crop it to anyway.
*/
.dropzone img {
  width: 96px;
  height: 54px;
  object-fit: cover;
  border-radius: var(--r-inner);
  border: 1px solid var(--line);
  display: block;
}

/* The picker's own label sits inside the box, so it does not need the field's outer spacing. */
.dropzone .field {
  margin: 0;
}

/*
  The thumbnails read left to right.

  `.row.tight` is `justify-content: flex-end` — right for a pair of buttons at the end of a
  header, which is what it was written for, and wrong for a strip of photographs: it put "No
  photographs yet." hard against the right edge of a box whose every other line starts on the
  left.
*/
.dropzone .row.tight {
  justify-content: flex-start;
}