/*
  Wortic macOS UI Kit — Avatar
  wm-avatar

  Glowup 2026: fallback de iniciais com gradiente de marca (azul→cyan,
  momento-assinatura), anel hairline interno que define a borda sobre
  fotos claras, brilho superior sutil e sombra de contato fina.

  Uma medida só manda: --_wm-avatar-size. Ponto de status, anel de
  recorte e sobreposição do grupo DERIVAM dela em vez de repetirem
  números fixos. Antes disso, o ponto de 10px e a sobreposição de -8px
  valiam para todo tamanho: num avatar xs o ponto comia a inicial, e
  num grupo xl os avatares mal se tocavam enquanto o chip "+N" ficava
  do tamanho de um avatar md ao lado de círculos de 64px. Achado
  renderizando os cinco tamanhos lado a lado, não lendo o CSS.
*/

@layer components {
  .wm-avatar {
    /* A ÚNICA medida crua do componente; o resto sai daqui. */
    --_wm-avatar-size: 32px;
    /* 31,25% da face, com piso de 8px: abaixo disso o anel de recorte
       come a cor e o ponto vira um borrão cinza. */
    --_wm-avatar-dot: max(8px, calc(var(--_wm-avatar-size) * 0.3125));
    /* Anel que separa o ponto (e os avatares do grupo) do fundo. */
    --_wm-avatar-ring: max(1.5px, calc(var(--_wm-avatar-size) * 0.0625));
    /* Um quarto da face escondido pelo vizinho — proporção constante. */
    --_wm-avatar-overlap: calc(var(--_wm-avatar-size) * -0.25);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--_wm-avatar-size);
    height: var(--_wm-avatar-size);
    border-radius: 50%;
    /* Gradiente de assinatura da marca com CONTRASTE MEDIDO.
       A versão anterior ia de --wm-accent (10%) a --wm-accent-secondary
       (125%) e, no ponto onde as iniciais realmente ficam, media 3.06:1
       contra o branco — reprovado para texto de 13px, que exige 4.5:1.
       O cyan não some: ele passa a entrar mais tarde, e o índigo da
       paleta oficial entra na cabeceira para segurar a base escura.
       Medido no Chromium, na faixa das iniciais, nos tamanhos md e xl:
       4.92:1 no pior pixel, 6.64:1 na mediana. */
    background: var(
      --wm-gradient-brand,
      linear-gradient(
        140deg,
        var(--wm-brand-indigo) -10%,
        var(--wm-accent) 60%,
        var(--wm-accent-secondary, var(--wm-brand-cyan)) 200%
      )
    );
    color: var(--wm-label-on-accent);
    font-size: var(--wm-font-size-body);
    font-weight: var(--wm-font-weight-semibold);
    letter-spacing: 0.01em;
    text-shadow: 0 0.5px 1px rgba(0, 10, 60, 0.28);
    user-select: none;
    box-shadow:
      var(--wm-shadow-ring),
      var(--wm-shadow-1),
      inset 0 0.5px 0.5px rgba(255, 255, 255, 0.3),
      inset 0 0 0 var(--wm-border-width-hairline) rgba(0, 0, 0, 0.08);
  }

  /* Quem recorta a foto é a PRÓPRIA foto, não um overflow:hidden na
     raiz. Com overflow na raiz, o ponto de status — que por definição
     transborda a circunferência — saía cortado em meia-lua nos cinco
     tamanhos. Está no print: era o defeito mais visível do componente
     e nenhuma checagem automática pegava, porque a classe existia e a
     página respondia 200. corner-shape: inherit mantém o squircle do
     avatar quadrado (declaração ignorada onde não houver suporte). */
  .wm-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    corner-shape: inherit;
  }

  /* O glifo acompanha a face: metade dela. Sem esta regra o ícone ficava
     travado nos 16px do .wm-icon — no xs ele estourava o círculo e no xl
     virava um ponto perdido no meio de 64px. Visto no print dos cinco
     tamanhos lado a lado; nenhum checador de classe pega isto. */
  .wm-avatar .wm-icon {
    --wm-icon-size: calc(var(--_wm-avatar-size) * 0.5);
  }

  .wm-avatar--xs { --_wm-avatar-size: 20px; font-size: var(--wm-font-size-caption); }
  .wm-avatar--sm { --_wm-avatar-size: 24px; font-size: var(--wm-font-size-caption); }
  /* 16px não está na escala: entre title3 (15px, iniciais apertadas
     num círculo de 44px) e title2 (17px, esbarrava no anel hairline).
     Literal proposital, não token errado. */
  .wm-avatar--lg { --_wm-avatar-size: 44px; font-size: 16px; }
  .wm-avatar--xl { --_wm-avatar-size: 64px; font-size: var(--wm-font-size-title1); }

  .wm-avatar--square {
    border-radius: var(--wm-radius-sm);
  }
  .wm-avatar--square.wm-avatar--lg {
    border-radius: var(--wm-radius-md);
  }
  .wm-avatar--square.wm-avatar--xl {
    border-radius: var(--wm-radius-lg);
  }

  /* O status vive DENTRO do avatar (overflow:hidden recorta a foto),
     por isso ele é encostado na quina com um recuo proporcional. */
  .wm-avatar__status {
    position: absolute;
    right: calc(var(--_wm-avatar-size) * -0.02);
    bottom: calc(var(--_wm-avatar-size) * -0.02);
    width: var(--_wm-avatar-dot);
    height: var(--_wm-avatar-dot);
    border-radius: 50%;
    background: var(--wm-success);
    border: var(--_wm-avatar-ring) solid var(--wm-surface-primary);
    box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.18);
  }
  .wm-avatar__status--away { background: var(--wm-warning); }
  /* Offline não é "verde apagado": é OCO. Em --wm-label-quaternary
     (alpha .20 no claro, .22 no escuro) o ponto sumia contra o anel e
     "offline" ficava idêntico a "sem status nenhum" — visto no print
     dos cinco tamanhos. Agora a diferença é de FORMA, não só de cor:
     cheio = presente, oco = ausente do sistema. Sobrevive ao
     daltonismo e ao alto contraste. */
  .wm-avatar__status--offline {
    background: var(--wm-surface-primary);
    box-shadow:
      0 0.5px 1px rgba(0, 0, 0, 0.18),
      inset 0 0 0 max(1px, calc(var(--_wm-avatar-size) * 0.035)) var(--wm-label-secondary);
  }

  .wm-avatar-group {
    /* O grupo carrega a MESMA medida dos avatares que estão dentro
       dele, porque o chip "+N" é irmão dos avatares e não conseguiria
       herdar a variável de um deles. */
    --_wm-avatar-size: 32px;
    --_wm-avatar-ring: max(1.5px, calc(var(--_wm-avatar-size) * 0.0625));
    --_wm-avatar-overlap: calc(var(--_wm-avatar-size) * -0.25);
    --_wm-avatar-more-font: var(--wm-font-size-subheadline);
    display: flex;
    align-items: center;
  }
  .wm-avatar-group--xs { --_wm-avatar-size: 20px; --_wm-avatar-more-font: var(--wm-font-size-caption2); }
  .wm-avatar-group--sm { --_wm-avatar-size: 24px; --_wm-avatar-more-font: var(--wm-font-size-caption2); }
  .wm-avatar-group--lg { --_wm-avatar-size: 44px; --_wm-avatar-more-font: var(--wm-font-size-body); }
  .wm-avatar-group--xl { --_wm-avatar-size: 64px; --_wm-avatar-more-font: var(--wm-font-size-title3); }

  .wm-avatar-group .wm-avatar {
    border: var(--_wm-avatar-ring) solid var(--wm-surface-primary);
    margin-inline-start: var(--_wm-avatar-overlap);
    box-shadow:
      var(--wm-shadow-1),
      inset 0 0.5px 0.5px rgba(255, 255, 255, 0.3);
  }
  .wm-avatar-group .wm-avatar:first-child {
    margin-inline-start: 0;
  }
  .wm-avatar-group__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--_wm-avatar-size);
    height: var(--_wm-avatar-size);
    border-radius: 50%;
    /* "+4" é CONTEÚDO — quantas pessoas ficaram de fora — e não uma
       dica secundária: sai em --wm-label-primary. Em
       --wm-label-secondary, num chip de 11px, o número no escuro
       sumia contra o fundo. */
    background: var(--wm-fill-secondary);
    color: var(--wm-label-primary);
    font-size: var(--_wm-avatar-more-font);
    font-weight: var(--wm-font-weight-semibold);
    font-variant-numeric: tabular-nums;
    border: var(--_wm-avatar-ring) solid var(--wm-surface-primary);
    margin-inline-start: var(--_wm-avatar-overlap);
    box-shadow: var(--wm-shadow-1);
  }
}