.page {
  container-type: inline-size;
  padding: 0 var(--gutter);
}
.grid {
  display: flex;
  flex-direction: column;
  gap: var(--gap-section);
}
.heroColumn,
.accounts {
  display: flex;
  flex-direction: column;
  gap: var(--gap-section);
  min-width: 0;
}
/* Desktop: the balance beside the accounts. */
@container (min-width: 760px) {
  .grid {
    display: grid;
    grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
    align-items: start;
    gap: var(--s6);
  }
  .heroColumn {
    position: sticky;
    top: var(--s4);
  }
}
.sectionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  min-height: var(--touch-target);
}
.sectionTitle {
  font: var(--type-title-medium);
  letter-spacing: var(--tracking-title-medium);
}
.list {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.collapsible {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: var(--row-min);
  padding: 0 var(--s4);
  border: none;
  border-radius: var(--radius-large);
  background: var(--surface-container-low);
  color: var(--on-surface-variant);
  font: var(--type-title-small);
  letter-spacing: var(--tracking-title-small);
  text-align: start;
  cursor: pointer;
}
.collapsible:hover {
  background: var(--surface-container);
}
.collapsibleLabel {
  flex: 1;
}
.skeleton {
  display: block;
  height: 76px;
  border-radius: var(--radius-account-card);
  background: var(--surface-container-high);
}
.addLabel {
  white-space: nowrap;
}
@media (max-width: 479px) {
  .addLabel {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
.emptyColumn {
  display: flex;
  flex-direction: column;
  gap: var(--gap-section);
  max-width: 640px;
}
.welcome {
  flex-direction: row;
  align-items: center;
  gap: var(--s4);
}
.pair {
  display: inline-flex;
  flex: none;
}
.pairAvatar + .pairAvatar {
  margin-left: -10px;
  box-shadow: 0 0 0 2px var(--card);
}
.welcomeText {
  display: flex;
  flex-direction: column;
}
.welcomeTitle {
  font: var(--type-title-medium);
  letter-spacing: var(--tracking-title-medium);
}
.welcomeBody {
  font: var(--type-body-medium);
  letter-spacing: var(--tracking-body-medium);
  color: var(--on-surface-variant);
}
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  padding: var(--s8) var(--gutter);
  text-align: center;
}
.pile {
  display: inline-flex;
}
.pile > * + * {
  margin-left: -12px;
}
.emptyTitle {
  font: var(--type-headline-small);
}
.emptyBody {
  max-width: 44ch;
  font: var(--type-body-large);
  letter-spacing: var(--tracking-body-large);
  color: var(--on-surface-variant);
}