/* Avatars
 * Two-axis identity: crew_color (per GroupMembership, 1..12) drives the
 * --avatar-color and --avatar-ink custom properties; avatar_content_kind
 * (per User: initial/photo/icon) selects the inner content. The wrapping
 * partial sets the customs inline; this file styles the silhouette and
 * content slots.
 *
 * Used in chat, map, member lists, crew cards, schedule highlights.
 */

@layer components {
  .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover;
    vertical-align: middle;
    flex-shrink: 0;
    font-weight: 700;
    user-select: none;
    /* Tighten wide-letter initials (M, W) so they don't kiss the edges
     * of small avatar circles. */
    letter-spacing: -0.02em;

    /* Identity color + ink, set inline by the partial wrapping the avatar
     * (e.g. _member_avatar). Legacy --c1..--c5 classes and --initials
     * override these. */
    background: var(--avatar-color, transparent);
    color: var(--avatar-ink, currentColor);
  }

  /* Size variants — calibrated for festival-distance recognisability.
   * Every size is at least 24px so the colour silhouette and content
   * read at arm's length, in sunlight, one-handed.
   */
  .avatar--xs {
    width: 24px;
    height: 24px;
    font-size: 0.625rem;
  }

  /* Crew context: 32px circles used in row avatar stacks across Lineup,
   * My picks, and Crew tabs. Big enough that initials and icons
   * disambiguate at a glance even when -5px overlap eats the edges. */
  .avatar--crew {
    width: 32px;
    height: 32px;
    font-size: 0.875rem;
    font-weight: 500;
  }

  /* Crew context large: 36px used on converge cards where crew is the
   * primary subject of the row. */
  .avatar--crew-lg {
    width: 36px;
    height: 36px;
    font-size: 0.9375rem;
    font-weight: 500;
  }

  .avatar--sm {
    width: 36px;
    height: 36px;
    font-size: 0.875rem;
  }

  .avatar--md {
    width: 44px;
    height: 44px;
    font-size: 1.0625rem;
  }

  .avatar--lg {
    width: 64px;
    height: 64px;
    font-size: 1.5rem;
  }

  .avatar--xl {
    width: 112px;
    height: 112px;
    font-size: 2.25rem;
  }

  .avatar--xxl {
    width: 144px;
    height: 144px;
    font-size: 2.75rem;
  }

  /* Initials fallback (default, for when no color class applied) */
  .avatar__initials {
    background: color-mix(in oklch, var(--color-accent) 20%, var(--color-surface));
    color: var(--color-accent);
    letter-spacing: 0.02em;
  }

  /* Legacy 5-color palette — kept until all callsites migrate to crew_color */
  .avatar--c1 { background: var(--color-av-1); color: var(--color-av-1-text); }
  .avatar--c2 { background: var(--color-av-2); color: var(--color-av-2-text); }
  .avatar--c3 { background: var(--color-av-3); color: var(--color-av-3-text); }
  .avatar--c4 { background: var(--color-av-4); color: var(--color-av-4-text); }
  .avatar--c5 { background: var(--color-av-5); color: var(--color-av-5-text); }

  /* Content slot — wraps initial text, photo, or icon SVG inside the
   * silhouette so cropping and sizing are consistent across kinds. */
  .avatar__content {
    inline-size: 100%;
    block-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .avatar__content img,
  .avatar__content svg {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }

  /* Icon content sizes down so it doesn't kiss the silhouette edge. */
  .avatar__content--icon svg {
    inline-size: 62%;
    block-size: 62%;
    color: var(--avatar-ink);
    fill: currentColor;
  }

  /* Containment so the avatar stack inside can react to its host card's
   * width instead of the viewport. Lets cramped cards shrink avatars
   * without affecting roomier cards on the same page. */
  .lineup-row,
  .compact-header__crew-strip,
  .split-card__row,
  .converge-card,
  .pick-card {
    container-type: inline-size;
  }

  /* Avatar stack — overlapping horizontal row */
  .avatar-stack {
    display: inline-flex;
    align-items: center;

    & .avatar {
      border: 2px solid var(--color-surface);
      margin-inline-start: -5px;

      &:first-child {
        margin-inline-start: 0;
      }
    }
  }

  .avatar-stack__overflow {
    background: var(--color-surface);
    color: var(--color-ink-muted);
    border-color: var(--color-border);

    /* The chip is a <button> that triggers a popover. Reset button
     * defaults so it visually matches the avatar siblings. */
    cursor: pointer;
    font-family: inherit;
    line-height: 1;

    &:hover {
      filter: brightness(1.1);
    }

    &:focus-visible {
      outline: 2px solid oklch(var(--lch-flare));
      outline-offset: 2px;
    }
  }

  /* ── Stack overflow popover (native HTML popover API) ── */
  .avatar-stack__popover {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-ink);
    padding: var(--block-space-s);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    max-inline-size: min(360px, 90vw);
    max-block-size: 60vh;
    overflow-y: auto;
    margin: 0;

    &::backdrop {
      background: rgba(0, 0, 0, 0.4);
    }
  }

  .avatar-stack__popover-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.5rem;
  }

  .avatar-stack__popover-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
  }

  .avatar-stack__popover-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
  }

  .avatar-stack__popover-name {
    font-weight: 500;
    font-size: 0.9375rem;
  }

  /* When a host card is narrower than ~360px, drop stack avatars to
   * --xs (24px) so the artist name + time + star button still fit.
   * Also tightens the overlap proportionally. */
  @container (max-width: 360px) {
    .avatar-stack .avatar {
      width: 24px;
      height: 24px;
      font-size: 0.625rem;

      &:not(:first-child) {
        margin-inline-start: -4px;
      }
    }
  }

  /* Grid-sized avatar (matches preset image dimensions) */
  .avatar--grid {
    width: 56px;
    height: 56px;
    font-size: 1.25rem;
  }

  /* Preset avatar grid for selection */
  .avatar-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space);
    margin-block: var(--block-space);
  }

  .avatar-grid label {
    cursor: pointer;
    border-radius: 50%;
    border: 3px solid transparent;
    transition: border-color 100ms ease;
    margin: 0;

    &:has(input:checked) {
      border-color: oklch(var(--lch-flare));
    }

    & input[type="radio"] {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }

    & img {
      display: block;
      width: 56px;
      height: 56px;
      border-radius: 50%;
    }
  }

  /* Online status dot overlay */
  .avatar-status {
    position: relative;

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      right: 0;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 2px solid var(--color-surface);
      background: var(--color-ink-muted);
    }

    &--online::after { background: oklch(var(--lch-laser)); }
    &--idle::after { background: oklch(var(--lch-golden)); }
  }
}