.account { display: flex; align-items: center; gap: .625rem; margin-right: .75rem; }
.account span { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: .8125rem; font-weight: 700; }

.google-sign-in {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  min-height: 40px;
  padding: 0 .875rem;
  border: 1px solid #c9cfca;
  border-radius: 4px;
  background: var(--surface);
  color: #29332e;
  box-shadow: 0 1px 2px rgba(22, 34, 28, .08);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.google-sign-in:hover {
  border-color: #9ca8a0;
  box-shadow: 0 3px 8px rgba(22, 34, 28, .12);
  transform: translateY(-1px);
}

.google-sign-in:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(22, 34, 28, .08); }

.google-sign-in:focus-visible {
  outline: 3px solid rgba(8, 122, 85, .25);
  outline-offset: 2px;
}

.google-sign-in__icon { width: 18px; height: 18px; flex: 0 0 18px; }

@media (max-width: 620px) {
  .account { margin-left: auto; margin-right: 0; }
  .account span { display: none; }
  .topbar #sign-in { display: inline-flex; min-height: 34px; padding: 0 .625rem; font-size: .75rem; }
  .google-sign-in__icon { width: 16px; height: 16px; flex-basis: 16px; }
}