@layer components {
  /* Square avatar: uploads are centre-cropped on attach, CSS only keeps
     the box square for the Telegram-photo and initial-letter stand-ins. */
  .avatar {
    --size: 2.5rem;
    inline-size: var(--size);
    block-size: var(--size);
    flex: none;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-s);
  }

  .avatar-lg {
    --size: 4.5rem;
  }

  .avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mist);
    color: var(--muted);
    font-size: var(--step-00);
    font-weight: 700;
  }

  /* Profile avatar: the square itself is the upload hit target; hint and
     × sit beside it on one line so the fieldset is not a tall stack. */
  .avatar-field {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-m);
  }

  .avatar-pick {
    display: inline-flex;
    flex: none;
    cursor: pointer;
    border-radius: var(--radius-s);
    touch-action: manipulation;

    &:has(input:focus-visible) {
      outline: var(--stroke) solid var(--paprika);
      outline-offset: 0.15em;
    }

    .avatar {
      pointer-events: none;
    }
  }

  .avatar-side {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-s);
    flex: 1 1 8rem;
    min-inline-size: 0;
  }

  .avatar-meta {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    min-inline-size: 0;

    .hint {
      flex: 1 1 auto;
      min-inline-size: 0;
      margin: 0;
    }

    .kill {
      appearance: none;
      display: flex;
      flex: none;
      align-items: center;
      justify-content: center;
      min-block-size: var(--touch);
      min-inline-size: var(--touch);
      inline-size: var(--touch);
      margin-inline-start: auto;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--over);
      font: inherit;
      font-size: 1.35em;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
      touch-action: manipulation;
    }
  }
}