/* Only keep the issue number on one line; the rest of the card layout stays unchanged. */
.record-list .record-item .card-header .period-info .period-number {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  flex-shrink: 0 !important;
  font-size: clamp(.82rem, 3.8vw, 1.15rem) !important;
  letter-spacing: 0 !important;
}

/* Keep the period and timestamp readable when translations are long. The
   compiled page originally put both values in one flex row, which made the
   timestamp collide with the period number on narrow screens. */
.record-list .record-item .card-header {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  row-gap: .55rem !important;
}

.record-list .record-item .card-header .period-info {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 100% !important;
  min-width: 0 !important;
  gap: .65rem !important;
}

.record-list .record-item .card-header .period-info .period-label {
  flex: 0 0 min(7.2rem, 30%) !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
}

.record-list .record-item .card-header .period-info .period-number {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.record-list .record-item .card-header .create-time {
  flex: 1 1 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  padding-top: .45rem !important;
  border-top: 1px solid rgba(118, 99, 80, .2) !important;
  text-align: right !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}