/* Website sign-in (signin.js): the login box signed in, and its messages. Uses the page's own tokens. */
.login.gb-signed .field,
.login.gb-signed .lrow,
.login.gb-signed .lmini,
.login.gb-signed .reclaim { display: none; }
.gb-me { display: grid; gap: 10px; margin-top: 14px; }
.gb-me[hidden], .gb-msg[hidden] { display: none; }
.gb-who { margin: 0; font-size: 12.5px; font-weight: 800; color: var(--muted); letter-spacing: .2px; }
.gb-who b { display: block; margin-top: 2px; font-family: var(--disp); font-weight: 400; font-size: 22px; line-height: 1.15; color: var(--ink); overflow-wrap: anywhere; }
.gb-play { height: 46px; border-radius: 14px; display: grid; place-items: center; font-family: var(--disp); font-size: 21px; letter-spacing: .4px; color: #fff;
  background: linear-gradient(#ff8b4a, var(--play)); box-shadow: 0 3px 0 var(--play2), 0 12px 22px -12px rgba(232, 67, 15, .8); transition: transform .2s var(--spring); }
.gb-play:hover { transform: translateY(-2px); }
.gb-out { justify-self: center; min-height: 32px; padding: 4px 10px; border: 0; border-radius: 8px; background: none; font: 800 12.5px Nunito, system-ui, sans-serif; color: var(--muted); cursor: pointer; }
.gb-out:hover { color: var(--blue); background: #eef3ff; }
.gb-msg { margin: 12px 0 0; padding: 8px 11px; border-radius: 11px; background: #eef3ff; color: #1f47b8; font-size: 12.5px; font-weight: 800; line-height: 1.4; }
.gb-msg.bad { background: #fdecef; color: #a3173d; }
.login.gb-busy .b-in, .login.gb-busy .b-reg { opacity: .6; pointer-events: none; }
.b-in:focus-visible, .b-reg:focus-visible, .gb-play:focus-visible, .gb-out:focus-visible { outline: 3px solid rgba(47, 102, 245, .45); outline-offset: 2px; }
.gb-page { justify-self: center; font-size: 13px; font-weight: 900; color: var(--blue); }
.gb-page:hover { text-decoration: underline; }

/* The signed-in chip in the top bar, on every page: links to the player page */
.u-me { display: flex; align-items: center; gap: 7px; padding: 3px 10px 3px 3px; border-radius: 999px; background: #fff; border: 1px solid rgba(29, 39, 66, .1); color: var(--ink); font-weight: 800; }
.u-me img { width: 26px; height: 26px; border-radius: 50%; object-fit: contain; background: linear-gradient(#eaf3ff, #d9e8fb); }
.u-me:hover { border-color: #b9ccf6; }
@media (max-width: 680px) {
  .u-live { white-space: nowrap; }
  .util .wrap:has(.u-me) .u-brand .pill { display: none; }
  .u-me span { display: none; }
  .u-me { padding: 3px; }
}