/* Image field. A `.field` that holds uploaded images instead of a text
   control, so the label, the help line and the error all come from
   `ui/input/field.css` and only what is genuinely its own lives here.

   Read `ui/image-field/CONTEXT.md` first. The structure below follows the CSS
   gap note there; three values differ and each says why. */

@layer components {
  /* The field's grid places `.field__label` and `.field__status` on one row and
     spans everything else, so the thumbs, the picker and the status all sit in
     their own full-width rows without this file arranging anything. */

  .image-field__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  /* No images, no row and no gap. An empty flex container still takes a grid
     row and the field's own `gap` either side of it, which is 8px of nothing
     above the picker on every component that has no image yet. */
  .image-field__thumbs:empty { display: none; }

  /* The picker sizes to its label. `.field` is a grid and its items stretch,
     so a `btn--sm` was rendering as a full-width bar, which is the one shape a
     small secondary button is not. */
  .image-field > .btn { justify-self: start; }

  .image-field__thumb {
    position: relative;
    /* `aspect-ratio` rather than a matching width and height: the thumb is a
       square by intent, and a square declared as two numbers stops being one
       the moment either is overridden. */
    inline-size: 6rem;
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface-2);
  }

  .image-field__img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    /* The alt is empty because the thumb sits beside its own remove button in
       a labelled list, so the image is decorative in this context. A broken
       or still-loading source therefore shows the recessed plate underneath
       rather than a browser's own broken-image mark. */
    display: block;
  }

  /* The remove control. Small on screen, because it sits over a 96px thumb,
     but a 44px target on a touch pointer: the visual size and the hit area are
     different things and DESIGN.md section 4 asks for the second one. */
  .image-field__remove {
    position: absolute;
    inset-block-start: var(--space-1);
    inset-inline-end: var(--space-1);
    inline-size: 1.5rem;
    block-size: 1.5rem;
    display: grid;
    place-items: center;
    border-radius: var(--radius-pill);
    /* Not `white` on `black`. A component that writes a colour literal has a
       bug (DESIGN.md section 2), and on a skin with a warm ground a pure black
       scrim is the wrong black. Both come from the palette. */
    background: color-mix(in oklab, var(--bg) 72%, transparent);
    color: var(--text);
    border: 1px solid color-mix(in oklab, var(--text) 22%, transparent);
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--dur-2) var(--ease-out),
                color var(--dur-2) var(--ease-out);
  }
  .image-field__remove::after {
    /* The 44px target, drawn as an invisible box around the visible control so
       the button does not have to be 44px on screen. */
    content: "";
    position: absolute;
    inset: -10px;
  }
  .image-field__remove:hover {
    background: var(--danger);
    color: var(--text-on-accent);
    border-color: transparent;
  }
  .image-field__remove:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

  @media (pointer: coarse) {
    /* Room for a thumb on a phone, and a control big enough to hit without
       zooming. */
    .image-field__thumb { inline-size: 5.5rem; }
  }

  .image-field__status {
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: var(--text-sm-lh);
    margin: 0;
  }
  /* An `aria-live` region that is empty most of the time. It should announce
     when it fills, and take no room when it does not. */
  .image-field__status:empty { display: none; }

  @media (prefers-reduced-motion: reduce) {
    .image-field__remove { transition: none; }
  }
}