/* The photo picker (components/photo-field.js): the current photo (or the
   initial) as a circle, the pick button beside it, the hint under it. */

.photo-row { display: flex; align-items: center; gap: var(--md); margin-bottom: var(--lg); }
.photo-row .field-hint { margin-top: 0.5rem; }
.photo-row .form-message { margin: 0.75rem 0 0; }   /* the photo's own message, under its hint */
.photo-preview {
  flex: none;
  width: 6rem;
  height: 6rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: var(--hair);
  border-radius: var(--pill);
  background: var(--bg-2);
}
.photo-preview img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; display: block; }
.photo-initial { font-size: 2rem; font-weight: var(--light); }
.photo-pick { cursor: pointer; }