/* 1.23.57 — Student linked-record parity with the operating mobile page.
 * Loaded after the global touch policy and before app-only control layers.
 * Important layer order, rather than broad native control resets, preserves
 * the operating attendance layout and score alignment in the Android bundle.
 * The runtime marker is removed for desktop, tablet and unfolded-Fold views.
 */
@layer peStudentRecordParity12357 {
  @media (max-width: 768px) {
    body.peMobileStudents12351:has(#mobileStudentSelector) #app.studentScreen #studentDetail
    #studentAttendance12220 :is([data-sf51-attendance-period] label, [data-sf51-attendance-period] label > span, .studentAttendanceReasons > summary, .studentAttendanceDates > summary) {
      text-align: left !important;
    }

    body.peMobileStudents12351:has(#mobileStudentSelector) #app.studentScreen #studentDetail
    :is([data-sf51-attendance-period] select, #studentAssessmentSummary .academicToolbar select) {
      appearance: none !important;
      -webkit-appearance: none !important;
      background-color: #fff !important;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m2 2 4 4 4-4' fill='none' stroke='%2352697c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
      background-repeat: no-repeat !important;
      background-position: right 12px center !important;
      background-size: 10px 7px !important;
      padding-inline: 28px !important;
      text-align: center !important;
      text-align-last: center !important;
    }

    body.peMobileStudents12351:has(#mobileStudentSelector) #app.studentScreen #studentDetail
    #studentAssessTable table.mobileAssessVertical td {
      justify-items: stretch !important;
      text-align: right !important;
    }

    body.peMobileStudents12351:has(#mobileStudentSelector) #app.studentScreen #studentDetail
    #studentAssessTable table.mobileAssessVertical td::before {
      text-align: left !important;
    }

    body.peMobileStudents12351:has(#mobileStudentSelector) #app.studentScreen #studentDetail
    #studentAssessTable table.mobileAssessVertical td > :is(b, strong, span):not(.studentAssessmentGradeBadge) {
      text-align: right !important;
    }

    body.peMobileStudents12351:has(#mobileStudentSelector) #app.studentScreen #studentDetail
    #studentAssessTable table.mobileAssessVertical .studentAssessmentGradeBadge {
      justify-self: end !important;
      text-align: center !important;
    }
  }

  /* Match the operating page's existing compact five-category row exactly. */
  @media (max-width: 640px) {
    body.peMobileStudents12351:has(#mobileStudentSelector) #app.studentScreen #studentDetail
    #studentAttendance12220 .studentAttendanceStats {
      grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
      gap: 4px !important;
    }

    body.peMobileStudents12351:has(#mobileStudentSelector) #app.studentScreen #studentDetail
    #studentAttendance12220 button.studentAttendanceStat {
      min-height: 64px !important;
      padding: 8px 1px !important;
      gap: 5px !important;
      border-radius: 7px !important;
    }

    body.peMobileStudents12351:has(#mobileStudentSelector) #app.studentScreen #studentDetail
    #studentAttendance12220 .studentAttendanceStatLabel {
      font-size: clamp(10px, 2.7vw, 11.5px) !important;
      line-height: 1.4 !important;
      white-space: nowrap !important;
    }

    body.peMobileStudents12351:has(#mobileStudentSelector) #app.studentScreen #studentDetail
    #studentAttendance12220 .studentAttendanceStatValue {
      align-items: baseline !important;
      gap: 1px !important;
      white-space: nowrap !important;
    }

    body.peMobileStudents12351:has(#mobileStudentSelector) #app.studentScreen #studentDetail
    #studentAttendance12220 .studentAttendanceStatValue b {
      font-size: clamp(15px, 4.25vw, 19px) !important;
      line-height: 1.2 !important;
    }

    body.peMobileStudents12351:has(#mobileStudentSelector) #app.studentScreen #studentDetail
    #studentAttendance12220 .studentAttendanceStatValue > span {
      font-size: 9px !important;
    }
  }
}