.site-header:has(.site-account) {
  flex-wrap: wrap;
  row-gap: 0.8rem;
}
.site-account {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem 1rem;
  flex-basis: 100%;
  font-size: 0.95rem;
  line-height: 1.4;
}
.site-account a,
.site-account button {
  font: inherit;
  color: var(--gold-hi, #ebcb85);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
}
.site-account button:disabled {
  opacity: 0.6;
  cursor: wait;
}
.account-name {
  max-width: 24ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-note {
  color: var(--muted, #bcb5a8);
  font-size: 0.85rem;
}
#boot .site-account {
  justify-content: flex-start;
  margin: 1rem 0;
  padding: 1rem 0;
  border-block: 1px solid #5f513b;
}
#boot .account-note {
  flex-basis: 100%;
}
.site-account [hidden] {
  display: none !important;
}
@media (max-width: 700px) {
  .site-account {
    justify-content: flex-start;
  }
  .site-account .account-note {
    flex-basis: 100%;
  }
}