/* Phone subject-plan selectors only. Existing picker nodes, handlers and
   records stay unchanged. Desktop, tablets and unfolded Fold are excluded. */
@media (max-width: 640px) and (pointer: coarse) {
  html[data-pe-device="compact"]:not([data-pe-ipados="true"]):not([data-pe-fold-wide="true"]):not(.pe87FoldWide)
  body.mobileSubjectPlanView #mobileSubjectPlanSelector .mobileSubjectPlanSelectorGrid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
  html[data-pe-device="compact"]:not([data-pe-ipados="true"]):not([data-pe-fold-wide="true"]):not(.pe87FoldWide)
  body.mobileSubjectPlanView #mobileSubjectPlanSelector .mobileProgressPickerField:has(> :is(#mobileProgressYear, #mobileProgressSemester, #mobileProgressGrade)) {
    grid-column: span 2 !important;
  }
  html[data-pe-device="compact"]:not([data-pe-ipados="true"]):not([data-pe-fold-wide="true"]):not(.pe87FoldWide)
  body.mobileSubjectPlanView #mobileSubjectPlanSelector .mobileProgressPickerField:has(> :is(#mobileProgressSubject, #mobileProgressLesson)) {
    grid-column: span 3 !important;
  }
  html[data-pe-device="compact"]:not([data-pe-ipados="true"]):not([data-pe-fold-wide="true"]):not(.pe87FoldWide)
  body.mobileSubjectPlanView #mobileSubjectPlanSelector :is(#mobileProgressYear, #mobileProgressSemester, #mobileProgressGrade) {
    position: relative !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding-inline: 18px !important;
    gap: 0 !important;
    font-size: clamp(12px, 3.5vw, 14px) !important;
    text-align: center !important;
  }
  html[data-pe-device="compact"]:not([data-pe-ipados="true"]):not([data-pe-fold-wide="true"]):not(.pe87FoldWide)
  body.mobileSubjectPlanView #mobileSubjectPlanSelector :is(#mobileProgressYear, #mobileProgressSemester, #mobileProgressGrade) > b {
    font-size: inherit !important;
    text-align: center !important;
  }
  html[data-pe-device="compact"]:not([data-pe-ipados="true"]):not([data-pe-fold-wide="true"]):not(.pe87FoldWide)
  body.mobileSubjectPlanView #mobileSubjectPlanSelector :is(#mobileProgressYear, #mobileProgressSemester, #mobileProgressGrade) > span:last-child {
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 8px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    text-align: center !important;
  }
}