/* Tablet/unfolded-Fold calendar-only fit. No data, phone or desktop changes. */
@media (min-width: 700px) {
  html:is([data-pe-device="tablet"], [data-pe-ipados="true"], [data-pe-fold-wide="true"])
  #calendarModal .calEditGrid.calendarLinkedEditGrid {
    grid-template-columns: minmax(0, .72fr) minmax(0, 1fr) minmax(0, 1.45fr) minmax(0, .82fr) !important;
    gap: 10px 8px !important;
    align-items: start !important;
  }

  html:is([data-pe-device="tablet"], [data-pe-ipados="true"], [data-pe-fold-wide="true"])
  #calendarModal .calendarLinkedEditGrid > label {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html:is([data-pe-device="tablet"], [data-pe-ipados="true"], [data-pe-fold-wide="true"])
  #calendarModal .calendarLinkedEditGrid > label.wide {
    grid-column: 1 / -1 !important;
  }

  html:is([data-pe-device="tablet"], [data-pe-ipados="true"], [data-pe-fold-wide="true"])
  #calendarModal .calendarLinkedEditGrid > label > span {
    text-align: center !important;
    white-space: nowrap !important;
  }

  html:is([data-pe-device="tablet"], [data-pe-ipados="true"], [data-pe-fold-wide="true"])
  #calendarModal .calendarLinkedEditGrid select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-inline: 6px 22px !important;
    font-size: 12px !important;
    text-align: center !important;
    text-align-last: center !important;
    white-space: nowrap !important;
    text-overflow: ellipsis;
  }

  /* Keep a two-digit class and its suffix together. The period and class
     may occupy two neat lines when the seven-column calendar is narrow. */
  html:is([data-pe-device="tablet"], [data-pe-ipados="true"], [data-pe-fold-wide="true"])
  #calendarBox .calEvents > .lessonBadge {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px 4px !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-inline: 3px !important;
    font-size: clamp(10px, 1.25vw, 12px) !important;
    text-align: center !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  html:is([data-pe-device="tablet"], [data-pe-ipados="true"], [data-pe-fold-wide="true"])
  #calendarBox .calEvents > .lessonBadge > b {
    flex: 0 0 auto !important;
    font-size: inherit !important;
    white-space: nowrap !important;
  }
}