/* Topbarens kontodel (inloggningsknapp, kontomeny och avdelaren framför dem).
   ENDA källan: laddas av app.html med en <link> och av sekundärsidorna via
   @import i shared.css. Lägg aldrig en egen kopia i sidornas style-block --
   sidspecifika avvikelser läggs som overrides efteråt. */

/* Kontodelen är navigation, inte en åtgärd: dämpad så den inte konkurrerar
   med premiumknapparna till vänster. Avdelaren markerar gruppbytet och sitter
   framför det första kontoelementet, alltså Premium i utloggat läge och
   kontomenyn i inloggat. */
#authBadge,#userMenu{position:relative;margin-left:10px}
#authBadge::before,#userMenu::before{content:"";position:absolute;left:-10px;top:50%;
  transform:translateY(-50%);width:1px;height:22px;background:#C3DCDB}

/* Logga in och kontomenyn är samma sorts element (kontodelen) och delar
   utseende -- bara innehållet skiljer. */
#authBtn,#userMenuBtn{font-size:15px;font-weight:500;color:#5a6f78;background:#F1F7F7;
  border:1px solid #C3DCDB;border-radius:8px;padding:7px 14px;cursor:pointer;
  display:flex;align-items:center;gap:8px;max-width:240px;white-space:nowrap;
  transition:background .2s ease,color .2s ease,border-color .2s ease}
#authBtn .material-symbols-rounded,#userMenuBtn .material-symbols-rounded{font-size:20px;flex-shrink:0}
#userMenuBtn .btn-email{overflow:hidden;text-overflow:ellipsis}
#authBtn:hover,#userMenuBtn:hover{background:#e9f4f3;border-color:#9bd3d8;color:#1f545e}