.density-switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 11px;
  background: #e9edf4;
}

.density-option {
  border: 0;
  border-radius: 8px;
  padding: 7px 12px;
  background: transparent;
  color: #737d8f;
  font-size: 12px;
  white-space: nowrap;
}

.density-option.active {
  background: #fff;
  color: var(--primary);
  font-weight: 750;
  box-shadow: 0 2px 8px rgba(35, 50, 90, .08);
}

.density-compact .panel,
.density-panel.density-compact,
.checkin-sections.density-compact .panel {
  padding: 14px;
  margin-top: 12px;
}

.density-ultra .panel,
.density-panel.density-ultra,
.checkin-sections.density-ultra .panel {
  padding: 10px;
  margin-top: 9px;
}

.density-compact .panel h2,
.density-panel.density-compact h2,
.checkin-sections.density-compact h2 {
  margin-bottom: 9px;
  font-size: 19px;
}

.density-ultra .panel h2,
.density-panel.density-ultra h2,
.checkin-sections.density-ultra h2 {
  margin-bottom: 7px;
  font-size: 17px;
}

.density-compact .dense-list,
.density-panel.density-compact .dense-list,
.checkin-sections.density-compact .dense-list {
  gap: 5px;
}

.density-ultra .dense-list,
.density-panel.density-ultra .dense-list,
.checkin-sections.density-ultra .dense-list {
  gap: 3px;
}

.density-compact .appointment-row,
.density-panel.density-compact .appointment-row,
.density-compact .checkin-row {
  min-height: 56px;
  padding: 8px 10px;
  border-radius: 9px;
  gap: 8px;
}

.density-ultra .appointment-row,
.density-panel.density-ultra .appointment-row,
.density-ultra .checkin-row {
  min-height: 43px;
  padding: 5px 8px;
  border-radius: 7px;
  gap: 6px;
}

.density-compact .appointment-row .list-meta,
.density-panel.density-compact .appointment-row .list-meta,
.density-compact .checkin-row .list-meta {
  margin-top: 1px;
  line-height: 1.3;
}

.density-ultra .appointment-row .list-title,
.density-panel.density-ultra .appointment-row .list-title,
.density-ultra .checkin-row .list-title {
  font-size: 13px;
  line-height: 1.2;
}

.density-ultra .appointment-row .list-meta,
.density-panel.density-ultra .appointment-row .list-meta,
.density-ultra .checkin-row .list-meta {
  max-width: 46vw;
  margin-top: 0;
  overflow: hidden;
  color: #7d8696;
  font-size: 10px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.density-compact .row-actions,
.density-ultra .row-actions {
  flex-wrap: nowrap;
  gap: 6px;
}

.density-compact .row-actions .button {
  padding: 8px 11px;
}

.density-ultra .row-actions .button {
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 11px;
}

.density-ultra .row-actions .pill {
  padding: 4px 6px;
  font-size: 10px;
}

@media (max-width: 760px) {
  .density-switch {
    width: 100%;
  }

  .density-option {
    flex: 1;
    padding-inline: 8px;
  }

  .density-ultra .appointment-row .list-meta,
  .density-panel.density-ultra .appointment-row .list-meta,
  .density-ultra .checkin-row .list-meta {
    max-width: 38vw;
  }
}