/* Person avatars (DESIGN.md "Project and team colours"): the kangaroo heads from the sprite
   app/assets/images/avatars/heads.svg, one of eight per person and workspace (memberships.avatar_color),
   drawn by ShellHelper#avatar. The size comes from the SVG's width and height; the flat art carries
   its own colours and edge, so it reads on paper, ground, cream and ink alike. */
.avatar { display: inline-block; flex: none; overflow: visible; vertical-align: middle; }

/* The initials badge where the name isn't shown (32 px and up): paper circle, ink initials */
.avatar-badge circle { fill: #fff; stroke: #cbd0dd; stroke-width: 0.75; }
.avatar-badge text { fill: #141a2e; font-family: Manrope, system-ui, sans-serif; font-weight: 800; letter-spacing: 0.01em; }

/* Next to a name */
.shell .main .report .c-label .avatar-row { margin: -4px 8px -4px 0; }
.shell .main .person-pick .avatar { margin-right: -4px; }

/* The colour pickers (Profile, and the Team page's menu): project_colors.css's radio chips, with a
   head in place of the dot. */
.color-choice .avatar { margin: -4px -2px -4px -4px; }

/* The Team page: a small menu per person with the eight heads and Save */
.avatar-menu { position: relative; display: inline-block; }
.avatar-menu summary { list-style: none; }
.avatar-menu summary::-webkit-details-marker { display: none; }
.shell .main .avatar-menu[open] summary { background: #e8ebf2; color: var(--text); }
.menu-pop.avatar-pop { width: min(340px, calc(100vw - 32px)); padding: 14px; text-align: left; white-space: normal; }
.shell .main .avatar-pop .color-choices { margin: 0 0 12px; }
.shell .main .avatar-pop .color-choices legend { overflow-wrap: anywhere; }
.avatar-pop .color-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shell .main .avatar-pop input[type="submit"].button { width: 100%; }

@media (forced-colors: active) {
  .avatar { forced-color-adjust: none; }
}

/* The Team page's table lets the menu reach past its edge; its header keeps the round corners. Row
   actions stay on one line on wide screens (Colour, Remove). */
.shell .main table.team { overflow: visible; }
.shell .main table.team thead th:first-child { border-top-left-radius: 13px; }
.shell .main table.team thead th:last-child { border-top-right-radius: 13px; }
@media (min-width: 761px) {
  .shell .main table.team .row-actions { flex-wrap: nowrap; }
}