/* Quem só lê (sem login ou sem participar): convite no lugar do composer e o Sobre em modal na
   primeira visita. */
.composer--visitor { color: var(--gray-text); }
.avatar--guest { width: 40px; height: 40px; border-radius: 50%; background: var(--border); color: var(--gray); display: grid; place-items: center; flex: none; }

.about-modal, .auth-modal { position: fixed; inset: 0; z-index: 1300; display: grid; grid-template-columns: minmax(0, 640px); place-content: center; padding: 24px 16px; }
.auth-modal { z-index: 1350; grid-template-columns: minmax(0, 454px); }  /* por cima do Sobre: o botão dele abre o login */
.about-modal__backdrop, .auth-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.about-modal__panel, .auth-modal__panel { position: relative; max-height: calc(100vh - 48px); overflow-y: auto; }
.auth-modal__panel { width: auto; max-width: none; min-height: 200px; }
.about-modal__close, .auth-modal__close { position: absolute; top: 12px; right: 12px; color: var(--ink); }  /* X preto, mais visível que o cinza padrão */
.auth-note { margin: 0 0 16px; padding: 8px 12px; border-radius: var(--r-md); background: var(--yellow-flash); font: 500 14px/20px var(--font); }
.about-modal .about-title { display: flex; align-items: center; gap: 10px; padding-right: 40px; }
.about-modal .about-title .brand-icon { flex: none; }
.about-modal__close .icon, .auth-modal__close .icon { stroke: currentColor; stroke-width: 18; stroke-linejoin: round; }  /* X mais grosso nos modais (04/10/2026) */
/* botões presos ao pé do painel: no celular o texto do Sobre é longo */

.join-note--invite { color: var(--ink); font-weight: 500; }  /* chegou pelo link de convite */