/* header.css — Faixa superior (.topbar: identificação do usuário e "Sair", sempre no canto superior direito) e cabeçalho da página
   (.pagehead: botão voltar, título e passo atual; aparece nas telas de passo como salas e marcar, na Home fica oculto). */

.topbar{display:flex;justify-content:flex-end;align-items:center;margin-bottom:1.5rem}
.profilewrap{position:relative}

/* Gatilho: avatar + nome + perfil. Clicar abre o cartão abaixo dele (js/invites.js). */
.profile{display:flex;align-items:center;gap:.7rem;min-width:0;border-radius:12px;padding:.3rem .5rem .3rem .3rem}
.profile:hover,.profile[aria-expanded="true"]{background:var(--primary-soft)}
.profile:focus-visible{outline:3px solid var(--brand-light);outline-offset:2px}
.pinfo{min-width:0;text-align:right}
.pinfo b{display:block;font-size:.95rem;line-height:1.2;color:var(--text)}
.pinfo small{color:var(--muted);font-size:.8rem}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--primary-soft);color:var(--brand);display:grid;place-items:center;flex:none}

/* Cartão da conta: dados da pessoa, perfil, o que ela acessa e "Sair do portal". */
.profilecard{position:absolute;top:calc(100% + 10px);right:0;z-index:40;width:300px;max-width:calc(100vw - 2.4rem);background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:1.1rem 1.2rem 1rem;text-align:left}
.pc-head{display:flex;align-items:center;gap:.8rem;margin-bottom:.8rem}
.pc-head .avatar{width:48px;height:48px}
.pc-head .avatar .i{width:24px;height:24px}
.pc-id{min-width:0}
.pc-id b{display:block;font-size:1rem;line-height:1.25;color:var(--text);overflow-wrap:anywhere}
.pc-id small{display:block;color:var(--muted);font-size:.82rem;overflow-wrap:anywhere}
.profilecard .badge{margin-bottom:.7rem}
.pc-desc{color:var(--muted);font-size:.85rem;line-height:1.4;margin-bottom:.9rem}
.pc-sep{border:0;border-top:1px solid var(--border);margin:0 0 .5rem}
.pc-item{display:flex;align-items:center;gap:.7rem;width:100%;padding:.65rem .5rem;border-radius:10px;font-weight:700;font-size:.92rem;color:var(--text)}
.pc-item:hover{background:var(--off)}
.pc-item:focus-visible{outline:3px solid var(--brand-light);outline-offset:-3px}
.pc-item .i{width:19px;height:19px;color:var(--muted);flex:none}

.pagehead{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}
.pagehead h1{font-size:1.7rem;line-height:1.2}
.pagehead p{color:var(--muted)}