/* ============================================================================
   JOIN'OS — componentes de marca compartilhados
   Depende de /brand/tokens.css. Servido em /brand/join-os.css.
   ============================================================================ */

/* ── WORDMARK ───────────────────────────────────────────────────────────────
   Marca escrita em Fraunces 72pt SuperSoft Regular.
     <a class="joinos" href="/">JOIN<span class="joinos-ap">'</span></a>      → agência
     <span class="joinos">JOIN<span class="joinos-ap">'</span>OS</span>       → produto/OS
   O apóstrofo é a única letra com cor atenuada (detalhe de marca herdado),
   mas agora na MESMA fonte (SuperSoft) do resto — não mais sobrescrito. */
.joinos {
  font-family: var(--os);
  font-weight: 400;
  font-style: normal;
  font-synthesis: none;
  letter-spacing: .01em;
  color: var(--fg);
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  line-height: 1;
  white-space: nowrap;
}
.joinos-ap { color: var(--muted); }

/* ── WORDMARK COMO LOGO SVG (oficial) ────────────────────────────────────────
   Logo JOIN'OS vetorizado (brand/joinos.svg) usado como MÁSCARA, pintado com
   var(--fg) → fica theme-aware (dark/light) com 1 arquivo só e markup mínimo:
     <a class="joinos-logo" href="/" aria-label="JOIN'OS"></a>
   O apóstrofo curvadinho e o desenho exato das letras (Fraunces SuperSoft) já
   vêm do SVG — não depende da fonte carregar. */
.joinos-logo {
  display: inline-block;
  height: 22px;            /* ajuste por contexto (nav ~20-22px) */
  aspect-ratio: 2048 / 402;
  background: var(--fg);
  -webkit-mask: url(/brand/joinos.svg) no-repeat center / contain;
          mask: url(/brand/joinos.svg) no-repeat center / contain;
}
/* Tamanhos utilitários (opcionais) */
.joinos--nav { font-size: 20px; }
.joinos--xl  { font-size: clamp(40px, 7vw, 96px); }

/* ── TELA DE LOGIN PADRÃO (Google + Microsoft) ───────────────────────────────
   Markup mínimo:
     <div class="auth-screen" id="auth-screen">
       <div class="auth-card">
         <span class="joinos auth-mark">JOIN<span class="joinos-ap">'</span>OS</span>
         <p class="auth-sub">Acesso restrito · JOIN'</p>
         <button class="auth-btn" data-provider="google"> …G… Entrar com Google</button>
         <button class="auth-btn" data-provider="azure">  …▣… Entrar com Microsoft</button>
         <div class="auth-msg" id="auth-msg"></div>
       </div>
     </div>
   A lógica (signInWithOAuth) cada app pluga; o visual é único. */
.auth-screen {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--bg);
  padding: 24px;
}
.auth-card {
  width: min(380px, 100%);
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
  padding: 40px 32px;
  background: var(--s);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.auth-mark   { font-size: 34px; margin-bottom: 2px; }
.auth-sub    { font-size: 13px; color: var(--muted); margin-bottom: 14px; text-align: center; }

.auth-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 13px 18px;
  font-family: var(--j); font-size: 15px; font-weight: 500;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease), transform var(--ease);
}
.auth-btn:hover  { border-color: var(--fg); transform: translateY(-1px); }
.auth-btn:active { transform: translateY(0); }
.auth-btn svg    { width: 18px; height: 18px; flex: none; }

.auth-msg {
  min-height: 18px; font-size: 13px; color: var(--muted); text-align: center;
}
.auth-msg.error { color: #e5484d; }

/* ── SINO DE NOVIDADES & AVISOS (🔔) — montado por /brand/join-os.js ──────────
   Markup injetado em <div id="joinos-bell">. Visual on-brand, theme-aware. */
.joinos-bell-wrap { position: relative; }
#joinos-bell-btn {
  position: relative; background: none; border: none; cursor: pointer;
  font-size: 16px; line-height: 1; color: var(--fg); padding: 6px; border-radius: 8px;
  transition: background var(--ease);
}
#joinos-bell-btn:hover { background: var(--faint); }
#joinos-bell-badge {
  display: none; position: absolute; top: -1px; right: -1px;
  min-width: 15px; height: 15px; padding: 0 3px; border-radius: 99px;
  background: #e05a2a; color: #fff; font-family: var(--j);
  font-size: 9px; font-weight: 700; line-height: 15px; text-align: center;
}
#joinos-bell-badge.show { display: block; }

#joinos-bell-drop {
  display: none; position: absolute; top: calc(100% + 8px); right: 0;
  width: min(340px, 92vw); max-height: 70vh; overflow-y: auto; z-index: 1000;
  background: var(--s); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--shadow); font-family: var(--j);
}
#joinos-bell-drop.open { display: block; animation: joinosDropIn .16s ease; }
@keyframes joinosDropIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

#joinos-bell-drop .bell-head {
  display: flex; align-items: center; gap: 6px; padding: 11px 13px;
  border-bottom: 1px solid var(--rule); font-size: 12px; font-weight: 600; color: var(--fg);
  position: sticky; top: 0; background: var(--s);
}
#joinos-bell-drop .bell-mark {
  margin-left: auto; background: none; border: 1px solid var(--rule); border-radius: 5px;
  color: var(--muted); cursor: pointer; font-size: 11px; padding: 2px 7px;
}
#joinos-bell-drop .bell-mark:hover { color: var(--fg); background: var(--faint); }

#joinos-bell-compose { display: none; flex-direction: column; gap: 6px; padding: 11px 13px; border-bottom: 1px solid var(--rule); }
#joinos-bell-compose .txt {
  width: 100%; background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius-sm);
  color: var(--fg); font-family: var(--j); font-size: 12px; padding: 8px 10px; outline: none;
}
#joinos-bell-compose textarea.txt { min-height: 52px; resize: vertical; }
#joinos-bell-compose .tier-btn {
  background: var(--fg); color: var(--bg); border: none; border-radius: var(--radius-sm);
  font-family: var(--j); font-size: 12px; font-weight: 600; padding: 7px 14px; cursor: pointer;
}

#joinos-bell-drop .bell-item { padding: 11px 13px; border-bottom: 1px solid var(--rule); display: flex; gap: 9px; }
#joinos-bell-drop .bell-item:last-child { border-bottom: none; }
#joinos-bell-drop .bell-item.unread { background: linear-gradient(90deg, rgba(245,244,240,.05), transparent); }
[data-theme="light"] #joinos-bell-drop .bell-item.unread { background: linear-gradient(90deg, rgba(10,10,10,.04), transparent); }
#joinos-bell-drop .bell-emoji { font-size: 16px; line-height: 1.3; flex-shrink: 0; }
#joinos-bell-drop .bell-body { min-width: 0; flex: 1; }
#joinos-bell-drop .bell-t { font-size: 12.5px; font-weight: 600; color: var(--fg); display: flex; align-items: center; gap: 6px; }
#joinos-bell-drop .bell-new {
  font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  background: var(--fg); color: var(--bg); border-radius: 8px; padding: 1px 5px;
}
#joinos-bell-drop .bell-d { font-size: 9.5px; color: var(--muted); margin-top: 1px; }
#joinos-bell-drop .bell-x { font-size: 12px; line-height: 1.5; color: var(--fg); margin-top: 4px; white-space: pre-wrap; word-break: break-word; }
#joinos-bell-drop .bell-del { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 11px; align-self: flex-start; margin-top: 4px; }
#joinos-bell-drop .bell-del:hover { color: #e05a2a; }

/* Divisor opcional "ou e-mail" */
.auth-sep {
  display: flex; align-items: center; gap: 12px;
  width: 100%; color: var(--faint); font-size: 12px; margin: 4px 0;
}
.auth-sep::before, .auth-sep::after {
  content: ""; flex: 1; height: 1px; background: var(--rule);
}