/*
 * PE-Class compact phone refinements v11793
 * iPhone 15 Pro-specific typography and field containment.  Shared folded
 * Fold7 behavior stays in the existing compact-mobile owners.
 */
@media (max-width: 768px) {
  /*
   * The compact club header now contains only the trophy/title line.
   */
  body.mobileClubView .mobileClubSelectorHead {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-inline: 8px !important;
  }

  body.mobileClubView .mobileClubSelectorHead > div {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    min-width: 0 !important;
  }

  body.mobileClubView .mobileClubSelectorHead > div > p {
    width: auto !important;
    min-width: 0 !important;
  }

  body.mobileClubView .mobileClubSelectorHead p {
    align-items: flex-start !important;
    text-align: left !important;
  }

  body.mobileClubView .mobileClubSelectorHead .mobileClubTitleLine {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  body.mobileClubView .mobileClubSelectorHead .mobileClubTitleLine > span {
    flex: 0 0 auto !important;
    font-size: 21px !important;
    line-height: 1 !important;
  }

  body.mobileClubView
  .mobileClubSelectorGrid.single > .mobileClubPickerField > span {
    box-sizing: border-box !important;
    padding-inline-start: 8px !important;
  }

  /*
   * Subject and lesson belong to the same selector row, matching the existing
   * year/semester row.
   */
  body.mobileSubjectPlanView
  .mobileSubjectPlanSelectorGrid > .mobileProgressPickerField.wide {
    grid-column: auto !important;
  }

  /*
   * These compact title rows no longer have an explanatory subtitle.  Keep
   * each title vertically centered against its icon without retaining a
   * phantom second row.
   */
  body.mobileAssessmentView .mobileAssessmentSelectorTitle {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
  }

  body.mobileAssessmentView .mobileAssessmentSelectorTitle > span {
    grid-row: auto !important;
    flex: 0 0 auto !important;
    line-height: 1 !important;
  }

  body.mobileAssessmentView .mobileAssessmentSelectorTitle > b {
    display: flex !important;
    align-items: center !important;
    align-self: stretch !important;
  }

  :is(
    body.mobileSubjectPlanView .mobileSubjectPlanSelectorTitle,
    body.mobileClassProgressView .mobileClassProgressSelectorTitle
  ) > div {
    align-self: stretch !important;
    justify-content: center !important;
  }

  /*
   * Student and PAPS selectors do not need a semester field.  Use the freed
   * horizontal space for one compact four-field row:
   * [학년도 | 학년 | 반 | 학생 선택].
   */
  :is(#mobileStudentSelector, #mobilePapsSelector)
  .mobileStudentSelectorGrid {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1.05fr)
      minmax(0, .9fr)
      minmax(0, .78fr)
      minmax(0, 1.55fr) !important;
    align-items: end !important;
    gap: 4px !important;
  }

  #mobileStudentSelector .mobileStudentSelectorGrid > .mobilePickerField,
  #mobileStudentSelector .mobileStudentPerson,
  #mobilePapsSelector .mobilePapsSelectorGrid > .mobilePickerField {
    grid-column: auto !important;
    min-width: 0 !important;
  }

  :is(#mobileStudentSelector, #mobilePapsSelector)
  .mobilePickerField > span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 10px !important;
  }

  :is(#mobileStudentSelector, #mobilePapsSelector)
  :is(.mobileContextPickerButton, .mobileStudentPersonButton) {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 2px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 5px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  :is(#mobileStudentSelector, #mobilePapsSelector)
  :is(.mobileContextPickerButton, .mobileStudentPersonButton) > b {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  :is(#mobileStudentSelector, #mobilePapsSelector)
  :is(
    .mobileContextPickerButton > span,
    .mobileStudentPersonChevron
  ) {
    flex: 0 0 auto !important;
    font-size: 11px !important;
  }

  /*
   * Selector values always sit on the geometric center of their field.  The
   * dropdown chevron is taken out of the flex flow so it cannot push the text.
   */
  :is(
    #mStudentYearButton,
    #mStudentGradeButton,
    #mStudentClassButton,
    #mPapsYear,
    #mPapsGrade,
    #mPapsClass
  ) {
    position: relative !important;
    justify-content: center !important;
    text-align: center !important;
  }

  :is(
    #mStudentYearButton,
    #mStudentGradeButton,
    #mStudentClassButton,
    #mPapsYear,
    #mPapsGrade,
    #mPapsClass
  ) > span[aria-hidden="true"] {
    position: absolute !important;
    right: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  #mStudentPersonButton {
    position: relative !important;
    justify-content: center !important;
    text-align: center !important;
  }

  #mStudentPersonButton > .mobileStudentPersonChevron {
    position: absolute !important;
    right: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  /*
   * Korean explanatory copy should wrap only between words.  It remains on
   * one line whenever the available width permits.
   */
  html.pe87IPhone body :is(
    .mobileClubPanelHead p,
    .mobileClubSelectorHead small,
    .mobileStudentSelectorTitle small,
    .mobilePapsSelectorTitle small,
    .mobilePapsExportOnly p,
    .hint,
    .greenGuide
  ) {
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
  }

  /*
   * Explicit <br> elements own the two lines.  Prevent Korean character
   * breaking from turning the final word into an unwanted third line.
   */
  html.pe87IPhone[data-pe-tab="paps"]
  #mobilePapsDashboardCard .mobilePapsActionRow >
  :is(#mPapsBulkMale, #mPapsBulkFemale, #mPapsDelete) {
    gap: 2px !important;
    padding-inline: 1px !important;
    font-size: 10px !important;
  }

  html.pe87IPhone[data-pe-tab="paps"]
  #mobilePapsDashboardCard .mobilePapsActionRow >
  :is(#mPapsBulkMale, #mPapsBulkFemale, #mPapsDelete) > span {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  /*
   * iOS gives date inputs an intrinsic minimum width.  Reset that intrinsic
   * width so the date field and the note input share the exact card edge.
   */
  html.pe87IPhone[data-pe-tab="students"]
  #app.studentScreen #studentDetail .studentNoteRow > :is(#noteDate, #noteText) {
    display: block !important;
    inline-size: 100% !important;
    width: 100% !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
    max-inline-size: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /*
   * The disabled lesson selector and the long activity placeholder are
   * single-line instructions on iPhone.  Normal activity text returns to
   * wrapping as soon as the teacher enters content.
   */
  html.pe87IPhone .calendarAddModal #calendarAddSubjectLesson {
    padding-inline: 4px 20px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  html.pe87IPhone .calendarAddModal #calendarAddActivity:placeholder-shown {
    overflow-x: hidden !important;
    white-space: nowrap !important;
    font-size: 10.5px !important;
    letter-spacing: -.25px !important;
  }

  html.pe87IPhone .calendarAddModal #calendarAddActivity::placeholder {
    color: #7a8996 !important;
    font-size: 10.5px !important;
    letter-spacing: -.25px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 390px) {
  body.mobileClubView .mobileClubSelectorHead {
    padding-inline: 6px !important;
  }

  body.mobileClubView
  .mobileClubSelectorGrid.single > .mobileClubPickerField > span {
    padding-inline-start: 6px !important;
  }
}