/* ==========================================================================
   Profile Picture / Avatar

   Two things wear the same circle: somebody's uploaded picture, and the two
   letters that stand in for it when there is none (see
   shared/_profile_picture). The size lives on the wrapper so that the two are
   always the same size as each other, whichever the row happens to get — a
   table where a face is a pixel wider than a set of initials reads as broken.
   ========================================================================== */
.profile-picture {
  /* The size the circle is, in one place. The modifiers below change this and
     nothing else. */
  --profile-picture-size: 34px;

  display: inline-block;
  flex: 0 0 auto;
  line-height: 0;
}

.profile-picture__placeholder,
.profile-picture__image {
  width: var(--profile-picture-size);
  height: var(--profile-picture-size);
  border: 2px solid var(--color-primary-green);
  border-radius: var(--radius-full);
}

.profile-picture__placeholder {
  background-color: var(--color-secondary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: var(--font-size-small);
  font-weight: bold;
  letter-spacing: 0.02em;
}

.profile-picture__placeholder span {
  color: var(--color-white);
  font-size: var(--font-size-small);
  font-weight: 600;
}

/* `cover` rather than `contain`: the image is already a square cropped in the
   browser, so this only has to survive the odd one stored before that was true
   (and an image that has not loaded yet). */
.profile-picture__image {
  object-fit: cover;
  /* Behind a transparent PNG, so a face is never cut out of the page itself. */
  background-color: var(--color-secondary-dark);
}

/* == Sizes ==
   Small for the dense rows — a stack of overlapping recipients. Large for the
   places the picture is the subject rather than a label: the account menu, and
   the settings section that sets it. */
.profile-picture--small {
  --profile-picture-size: 26px;
}

.profile-picture--large {
  --profile-picture-size: 64px;
}

.profile-picture--large .profile-picture__placeholder span {
  font-size: var(--font-size-large);
}

/* ==========================================================================
   The field that sets it
   ========================================================================== */
.avatar-field__row {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.avatar-field__figure {
  position: relative;
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
}

.avatar-field__preview,
.avatar-field__placeholder {
  width: 80px;
  height: 80px;
  border: 2px solid var(--color-primary-green);
  border-radius: var(--radius-full);
}

.avatar-field__preview {
  object-fit: cover;
  background-color: var(--color-secondary-dark);
}

.avatar-field__placeholder {
  background-color: var(--color-secondary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: var(--font-size-large);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* `[hidden]` needs saying because the two above are flex. */
.avatar-field__preview[hidden],
.avatar-field__placeholder[hidden] {
  display: none;
}

.avatar-field__controls {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* The choose control is a <label> around a file input, because a file input
   cannot be made to look like the rest of the buttons on the form. The input
   itself is taken out of the layout rather than hidden with `display: none`,
   which would take it out of the keyboard order with it. */
.avatar-field__choose {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.avatar-field__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Focus has to be drawn on the label, since that is what is visible. */
.avatar-field__input:focus-visible + span,
.avatar-field__choose:focus-within {
  outline: 2px solid var(--color-primary-green);
  outline-offset: 2px;
}

/* Both take the full width so the hint and any error read as lines under the
   controls rather than as another column beside them. */
.avatar-field__controls .form__hint,
.avatar-field__error {
  flex: 1 0 100%;
  margin: 0;
}

.avatar-field__error {
  color: var(--color-danger);
  font-size: var(--font-size-small);
}

.avatar-field__error[hidden] {
  display: none;
}

/* ==========================================================================
   The firm logo field

   Beside the profile picture field because they are the same control with a
   different shape — a logo is fitted inside a box rather than cropped square
   (see shared/_logo_field).
   ========================================================================== */
/* Wraps, because this field lives in the firm's edit drawer and a drawer is
   narrow. Without it the preview and the buttons sit on one line that is wider
   than the drawer, and "Choose logo" ends up off the edge of it. */
.logo-field__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-start;
}

/* Dark, because that is what the logo sits on where it matters most: the
   masthead of a generated report is the firm's own navy. A mark that vanishes
   against this will vanish there, which is worth finding out here. */
.logo-field__figure {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 172px;
  height: 64px;
  padding: var(--space-2);
  background: var(--color-secondary-dark);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* Fitted, never filled: the whole point of the shape is that the mark is not
   cropped. */
.logo-field__preview {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.logo-field__placeholder {
  color: var(--color-white);
  font-size: var(--font-size-small);
  opacity: 0.7;
}

.logo-field__preview[hidden],
.logo-field__placeholder[hidden] {
  display: none;
}

/* `1 1 200px` rather than `1 1 auto`: below 200px of its own the whole block
   drops onto the line under the preview rather than being squeezed. */
.logo-field__controls {
  display: flex;
  flex: 1 1 200px;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* As the avatar's: a <label> around a file input, with the input taken out of
   the layout rather than hidden, so it keeps its place in the keyboard order. */
.logo-field__choose {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.logo-field__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.logo-field__choose:focus-within {
  outline: 2px solid var(--color-primary-green);
  outline-offset: 2px;
}

.logo-field__controls .form__hint,
.logo-field__error {
  flex: 1 0 100%;
  margin: 0;
}

.logo-field__error {
  color: var(--color-danger);
  font-size: var(--font-size-small);
}

.logo-field__error[hidden] {
  display: none;
}