/* The signed-in owner's button and menu (account-button.js), in our colors rather than the sign-in service's. */
.acct { position: relative; display: inline-flex; }
.acct-btn { width: 40px; height: 40px; border-radius: 50%; padding: 0; cursor: pointer; display: grid; place-items: center; overflow: hidden;
  border: 2px solid rgba(255, 255, 255, .35); background: linear-gradient(135deg, #f3c58f, #e0a526); color: #3b2a05;
  font: 700 17px/1 "Fraunces", Georgia, serif; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); transition: box-shadow .15s, transform .15s; }
.acct-btn:hover, .acct-btn[aria-expanded="true"] { box-shadow: 0 0 0 3px rgba(224, 165, 38, .35), 0 2px 8px rgba(0, 0, 0, .18); }
.acct-btn:active { transform: scale(.96); }
.acct-btn img { width: 100%; height: 100%; object-fit: cover; }
.acct-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; width: 250px; background: #fff; color: #1b2430; border-radius: 14px;
  border: 1px solid #e9dfcf; box-shadow: 0 18px 44px rgba(20, 30, 45, .22); padding: .35rem; text-align: left; font: 500 14px/1.4 "Inter", system-ui, sans-serif; }
.acct-who { padding: .6rem .7rem .55rem; border-bottom: 1px solid #efe7da; margin-bottom: .3rem; display: grid; min-width: 0; }
.acct-who b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-who small { color: #5b6370; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-menu a, .acct-menu button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .5rem .7rem; border: 0; background: none;
  border-radius: 9px; color: inherit; text-decoration: none; font: inherit; cursor: pointer; }
.acct-menu a:hover, .acct-menu button:hover { background: #f6f0e6; }
.acct-menu svg { width: 17px; height: 17px; flex: none; fill: none; stroke: #8a6a3a; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.acct-menu [data-do="out"] { margin-top: .2rem; border-top: 1px solid #efe7da; border-radius: 0 0 9px 9px; padding-top: .6rem; }
/* the account pages: the button sits at the bottom of the side menu, so its menu opens upward */
.nav-foot .acct-btn { border-color: #fff; }
.nav-foot .acct-menu { top: auto; bottom: calc(100% + 10px); left: 0; right: auto; }
@media (max-width: 760px) { .nav-foot .acct-menu { bottom: auto; top: calc(100% + 10px); left: auto; right: 0; } }