/* The account control in the top-right — sign-in button, avatar, and its menu.
   app.js injects this markup into every page that has a .topbar, so the styles
   belong with it rather than in any one page.

   Previously written out twice, in bs.css and again in index.html, and the two
   had already drifted: the home page's copy had lost the avatar's letter-spacing
   and the menu's bottom corner radius, and had gained a text-align the other
   never got. This file is the merge of both — the text-align included, since the
   home page centres its body text and the menu must not inherit that. */

.bs-signin { color: var(--red); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  font-size: 0.82rem; border: 1px solid var(--red); border-radius: 6px; padding: 8px 16px;
  text-decoration: none; white-space: nowrap; }
.bs-signin:hover { background: var(--red); color: #fff; text-decoration: none; }

.bs-acct { position: relative; }
.bs-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--red); color: #fff; border: none;
  cursor: pointer; font-weight: 900; font-size: 0.85rem; letter-spacing: 0.04em; font-family: inherit; }
.bs-avatar:hover { opacity: 0.85; }

.bs-menu { display: none; position: absolute; right: 0; top: 46px; min-width: 210px; background: var(--panel);
  border: 1px solid #2a2a2a; border-radius: 10px; padding: 6px; z-index: 90; text-align: left;
  box-shadow: 0 12px 30px rgba(0,0,0,0.6); }
.bs-menu.open { display: block; }
.bs-menu-head { padding: 10px 12px 12px; border-bottom: 1px solid #2a2e33; margin-bottom: 6px; }
.bs-menu-head b { display: block; color: #fff; font-size: 0.9rem; }
.bs-menu-head span { display: block; color: #666; font-size: 0.76rem; margin-top: 2px; word-break: break-all; }
.bs-menu a { display: block; padding: 9px 12px; border-radius: 6px; color: #bbb; font-size: 0.87rem;
  text-decoration: none; }
.bs-menu a:hover { background: #171717; color: #fff; text-decoration: none; }
.bs-menu a.danger { color: #ff8866; border-top: 1px solid #2a2e33; margin-top: 6px; padding-top: 11px;
  border-radius: 0 0 6px 6px; }