/*
 * PE-Class 11988 — exact wide lesson-calendar page header
 *
 * PC, MacBook, iPad landscape and Fold7 unfolded use the same page-head
 * structure and geometry as the subject-progress waiting screen.  Compact
 * mobile keeps the dedicated calendar card and controls unchanged.
 */
@media (min-width: 769px) {
  /* Match the desktop subject-progress canvas without overriding device owners. */
  body.lessonCalendarApp #app {
    background: #fff !important;
  }

  html:not(.pe87Ipad):not(.pe87IpadRuntime):not(.pe87FoldWide):not([data-pe-fold-wide="true"])
  body.lessonCalendarApp #app {
    padding: var(--pe-f-app-padding, 18px) !important;
  }

  /* PC, MacBook and iPad hide record-location text just like subject progress. */
  html:not(.pe87FoldWide):not([data-pe-fold-wide="true"])
  body.lessonCalendarApp #app > .pe87Crumb {
    display: none !important;
  }

  /* Reset the former card owner and reproduce .pe87PageHead exactly. */
  body.lessonCalendarApp #app > .calendarWidePageHead {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  body.lessonCalendarApp #app > .calendarWidePageHead > h2 {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 22px !important;
    line-height: normal !important;
    white-space: nowrap !important;
  }

  body.lessonCalendarApp #app > .calendarWidePageHead > .calendarHeaderControls {
    display: flex !important;
    flex: 0 1 auto !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body.lessonCalendarApp #app > .calendarWidePageHead
  > .calendarHeaderControls > :is(.btn, .monthPickerWrap) {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body.lessonCalendarApp #app > .calendarWidePageHead
  > .calendarHeaderControls > .monthPickerWrap {
    width: 180px !important;
  }

  body.lessonCalendarApp #app > .calendarWidePageHead
  > .calendarHeaderControls > :is(#calPrev, #calNext) {
    width: 95px !important;
  }

  body.lessonCalendarApp #app > .calendarWidePageHead
  > .calendarHeaderControls > #calToday {
    width: 72px !important;
  }

  body.lessonCalendarApp #app > .calendarWidePageHead
  > .calendarHeaderControls :is(.btn, .monthPickerButton) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  html:is(.pe87Ipad, .pe87IpadRuntime, .pe87FoldWide, [data-pe-fold-wide="true"])
  body.lessonCalendarApp #app > .calendarWidePageHead
  > .calendarHeaderControls :is(.btn, .monthPickerButton) {
    height: 44px !important;
    min-height: 44px !important;
  }

  html:is(.pe87FoldWide, [data-pe-fold-wide="true"])
  body.lessonCalendarApp #app > .calendarWidePageHead
  > .calendarHeaderControls {
    gap: 6px !important;
  }

  html:is(.pe87FoldWide, [data-pe-fold-wide="true"])
  body.lessonCalendarApp #app > .calendarWidePageHead
  > .calendarHeaderControls > .monthPickerWrap {
    width: 150px !important;
  }

  html:is(.pe87FoldWide, [data-pe-fold-wide="true"])
  body.lessonCalendarApp #app > .calendarWidePageHead
  > .calendarHeaderControls > :is(#calPrev, #calNext) {
    width: 82px !important;
  }

  html:is(.pe87FoldWide, [data-pe-fold-wide="true"])
  body.lessonCalendarApp #app > .calendarWidePageHead
  > .calendarHeaderControls > #calToday {
    width: 68px !important;
  }
}