/* A face that opens: the photo large on the modal's sheet, and Alterar the step that changes it in the same sheet. */
.ds-profile-photo { position: relative; display: inline-flex; }
.ds-profile-photo__face {
  --hover-size: 0;
  padding: 0;
  border: 0;
  border-radius: var(--ds-radius-full);
  background: none;
  line-height: 0;
  cursor: zoom-in;
}
.ds-profile-photo__face--empty { cursor: pointer; }
/* The sheet hangs from the face in the page, so it takes back the leading a wrapper around the face zeroes. */
.ds-profile-photo__sheet { line-height: 1.375; }
.ds-profile-photo__face:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; }

/* The stage is a quiet fill one step above the sheet, never black, and the photo keeps its shape inside it. */
.ds-profile-photo__stage {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  max-block-size: 70dvh;
  overflow: hidden;
  background: var(--ds-fill-elevated);
}
.ds-profile-photo__image { inline-size: 100%; block-size: 100%; object-fit: contain; }
.ds-profile-photo__actions { display: flex; justify-content: flex-end; margin-block-start: var(--ds-modal-gap); }
.ds-profile-photo__back[hidden] { display: none; }

/* v5: one width for both steps, so Alterar never makes the sheet jump; the stage's corner is the sheet's less its edge. */
html[data-visual="v5"] .cs-modal.ds-profile-photo__sheet { inline-size: min(480px, 92vw); }
html[data-visual="v5"] .ds-profile-photo__sheet > .cs-modal__panel { text-align: start; }
html[data-visual="v5"] .ds-profile-photo__stage { border-radius: calc(var(--ds-radius-3xl) - var(--ds-modal-pad)); }

/* The titles sit on the left in a row as tall as the close, so the x never lands on the photo or on a tile; Voltar mirrors
   the close across the sheet and the picker's title makes room for it. */
html[data-visual="v5"] :is(.ds-profile-photo__title, .cs-avatar-picker__title) {
  display: flex;
  align-items: center;
  min-block-size: 32px;
  margin: 0 calc(32px + var(--ds-space-2)) var(--ds-modal-gap) 0;
  overflow-wrap: anywhere;
}
html[data-visual="v5"] .ds-profile-photo__back.cs-btn--icon { position: absolute; inset-block-start: 0.6rem; inset-inline-start: 0.6rem; }
html[data-visual="v5"] .ds-profile-photo__pick:has(> .ds-profile-photo__back:not([hidden])) .cs-avatar-picker__title {
  margin-inline-start: calc(32px + var(--ds-space-2));
}

/* The file field under the upload tile is invisible, so its focus is drawn on the tile. */
.cs-avatar-picker__tile--upload:has(> .cs-avatar-picker__file:focus-visible) { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }
/* The photo worn now, when it is none of the tiles (a teammate's upload): chosen, and nothing to press. */
.cs-avatar-picker__tile--current { padding: 0; cursor: default; }

/* The picker: tiles on the quiet fill with no frame, the chosen one outlined inside its own edge; the source mark in the
   corner below; the hint left aligned under the grid, one gap away. */
html[data-visual="v5"] .cs-avatar-picker__grid { gap: var(--ds-space-2); }
html[data-visual="v5"] .cs-avatar-picker__tile { border: 0; border-radius: var(--ds-radius-xl); background: var(--ds-fill-elevated); }
html[data-visual="v5"] .cs-avatar-picker__tile--upload { color: var(--ds-on-cta-soft); }
html[data-visual="v5"] .cs-avatar-picker__tile.is-selected { box-shadow: none; color: var(--ds-on-cta-soft); outline: 2px solid var(--ds-on-cta-soft); outline-offset: -2px; }
html[data-visual="v5"] .cs-avatar-picker__tile-label { font-size: var(--ds-font-size-2xs); }
html[data-visual="v5"] .cs-avatar-picker__flag { inset: auto 6px 6px auto; background: var(--ds-media-badge); color: var(--ds-on-media); }
html[data-visual="v5"] .cs-avatar-picker__hint { max-inline-size: none; margin: var(--ds-modal-gap) 0 0; text-align: start; }

@media (any-hover: hover) {
  html[data-visual="v5"] .cs-avatar-picker__tile:not(.cs-avatar-picker__tile--current):hover { background: var(--ds-fill-hover-elevated); }
}