/* Mobile-only fixes for headings whose Japanese labels must remain horizontal. */
#team-list-caption > span + span::before {
  content: "・";
  margin-right: 8px;
}

@media (max-width: 680px) {
  #manager-view .team-section > .section-heading,
  #manager-view .team-section > .section-heading > div,
  #employees-view .paid-leave-section > .section-heading,
  #employees-view .paid-leave-section > .section-heading > div,
  #manager-view .team-section h2,
  #manager-view #team-list-caption,
  #manager-view #team-list-caption > span,
  #employees-view #paid-leave-title {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
  }

  #manager-view .team-section > .section-heading,
  #employees-view .paid-leave-section > .section-heading {
    display: block;
  }

  #manager-view .team-section > .section-heading > div:first-child,
  #employees-view .paid-leave-section > .section-heading > div:first-child {
    width: 100%;
    min-width: 0;
  }

  #manager-view #team-list-caption {
    display: block;
    line-height: 1.55;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
  }

  #manager-view #team-list-caption > span {
    display: inline;
    white-space: nowrap;
  }

  #manager-view #team-list-caption > span + span::before {
    margin-right: 7px;
  }

  #employees-view #paid-leave-title {
    display: block;
    line-height: 1.45;
    white-space: nowrap;
    word-break: keep-all;
  }
}