/* Keep long statuses inside the date rail, including compact/mobile cards. */
.portal-shell .appointment-card--modular .appointment-status-rail,
.portal-shell .appointment-card--modular .appointment-rail-state {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  grid-template-columns: minmax(0, 1fr);
}

.portal-shell .appointment-card--modular .appointment-status-rail .status-badge {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: auto;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.45;
  letter-spacing: .025em;
}

.portal-shell .appointment-card--modular .appointment-status-rail .status-badge > span {
  display: inline-block;
  margin-right: 4px;
  vertical-align: middle;
}

.portal-shell .appointment-card--modular .appointment-status-rail .appointment-date {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.portal-shell .appointment-card--modular .appointment-status-rail .appointment-context-tag {
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.4;
}

@media (max-width: 700px) {
  .portal-shell .appointment-card.appointment-card--modular {
    grid-template-columns: 104px minmax(0, 1fr);
  }

  .portal-shell .appointment-card--modular .appointment-summary {
    grid-template-columns: minmax(0, 1fr);
  }
}