/* Phone-width account icon beside the hamburger on the public pages
   (added by shared/navAuth.js): gray when logged out, blue when logged in.
   On wider screens the header's own "تسجيل الدخول" / "حسابي" button is used. */

/* the icon and the hamburger travel together; on desktop the wrapper is
   hidden so it can't upset the header's spacing */
.header-tools { display: none; align-items: center; gap: 4px; }

.account-icon {
  display: flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  color: #7b8794;
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: background .2s, color .2s;
}
.account-icon svg { width: 27px; height: 27px; }
.account-icon:hover { background: var(--light); }
.account-icon:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.account-icon.is-logged-in { color: var(--blue); }

@media (max-width: 480px) {
  .header-tools { display: flex; }
  /* the icon replaces the login link inside the opened menu */
  html.has-account-icon .nav-links .login-btn { display: none !important; }
}