#account-container.skeleton {
  color: var(--outline-color);
}

#account-container header {
  display: flex;
  align-items: center;
  gap: 8px;
}

#account-container .note {
  font-size: 95%;
  line-height: 1.4;
}
#account-container .note:not(:has(p)):not(:empty) {
  /* Some notes don't have <p> tags, so we need to add some padding */
  padding: 1em 0;
}

#account-container .stats {
  display: flex;
  flex-wrap: wrap;
  column-gap: 16px;
  row-gap: 4px;
  opacity: 0.75;
  font-size: 90%;
}

#account-container .actions {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-height: 2.5em;
}
#account-container .actions button {
  align-self: flex-end;
}

#account-container .profile-metadata {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
#account-container .profile-field {
  min-width: 0;
  flex-grow: 1;
  font-size: 90%;
  background-color: var(--bg-faded-color);
  padding: 12px;
  border-radius: 8px;
  filter: saturate(0.75);
  line-height: 1.25;
}

#account-container :is(.note, .profile-field) .invisible {
  display: none;
}
#account-container :is(.note, .profile-field) .ellipsis::after {
  content: '…';
}

#account-container .profile-field b {
  font-size: 90%;
  color: var(--text-insignificant-color);
  text-transform: uppercase;
}
#account-container .profile-field b .icon {
  color: var(--green-color);
}
#account-container .profile-field p {
  margin: 0;
}