/*
 * Settings — personal settings page (display name + avatar picture).
 * The avatar well is a drop target: the whole form highlights while a file
 * is dragged over it; clicking the avatar (a <label>) opens the picker.
 *
 * Structure (BEM): .settings > .settings__section >
 *   form.settings__avatar-well > label.settings__avatar (.avatar)
 */
@layer components {
  .settings {
    display: grid;
    gap: calc(var(--u-pad) * 2);
    margin-block-start: var(--u-pad);
  }

  .settings__section {
    display: grid;
    gap: var(--u-pad);
    justify-items: start;
  }

  /* The picture section centers as a unit: avatar well, hint, remove button. */
  .settings__section--picture {
    justify-items: center;
  }

  /* Layout + dashed border come from utilities in the markup (u-well u-stack
     u-stack-half u-items-center); drag-over highlight is u-surface-active,
     toggled by the avatar-upload controller. */
  .settings__avatar-well {
    padding: var(--u-pad);
    text-align: center;
  }

  .settings__avatar {
    cursor: pointer;
    flex-shrink: 0;
  }
}