/* Phone-only neutral action system. This must be the FIRST style layer so
 * legacy important colors cannot flash back during renders. Never grayscale a
 * whole button: sport glyphs/photos and actual color-choice data stay intact. */
@layer peV2Monochrome20261018k {
  @media (max-width:768px) {
    html.peV2PhoneRenderGuard:not([data-pe-screen="login"]) {
      --v2-neutral-ink:#333;--v2-neutral-line:#d4d4d4;
      --v2-neutral-muted:#828282;--v2-danger-ink:#b53232;
      --v2-field-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;
    }
    /* Content controls keep their own presentation. A calendar date, lesson
       row or navigation tab is not a standalone action-button shell. */
    html.peV2PhoneRenderGuard:not([data-pe-screen="login"]) :where(button,[role="button"],input[type="button"],input[type="submit"],input[type="reset"]):not(:where(.ccColor[data-color],.peV2MonthCalendar *,.homeSchedulePane *)) {
      background-color:#fff!important;background-image:none!important;
      color:var(--v2-neutral-ink)!important;border-color:var(--v2-neutral-line)!important;
      box-shadow:none!important;text-shadow:none!important;
      -webkit-tap-highlight-color:transparent!important;
    }
    html.peV2PhoneRenderGuard:not([data-pe-screen="login"]) :where(button,[role="button"]):not(:where(.ccColor[data-color],.peV2MonthCalendar *,.homeSchedulePane *)) :where(span,strong,b,i,small,em,svg,div,label) {
      color:inherit!important;text-shadow:none!important;
    }
    html.peV2PhoneRenderGuard:not([data-pe-screen="login"]) :where(button,[role="button"]):not(:where(.peV2MonthCalendar *,.homeSchedulePane *))::before,
    html.peV2PhoneRenderGuard:not([data-pe-screen="login"]) :where(button,[role="button"]):not(:where(.peV2MonthCalendar *,.homeSchedulePane *))::after {color:inherit!important;text-shadow:none!important;}
    /* Explicit action components only; do not add borders to every button. */
    html.peV2PhoneRenderGuard:not([data-pe-screen="login"]) :is(button,input,a[role="button"]):is(.btn,.miniBtn,[data-v2-action-role],[data-rf49-menu-action],[data-sf51-forward],[data-v2gp-forward]):not(:where(.peV2MonthCalendar *,.homeSchedulePane *,[data-v2-nav],[role="tab"],[role="option"])) {
      border:1px solid var(--v2-neutral-line)!important;
    }
    html.peV2PhoneRenderGuard:not([data-pe-screen="login"]) :is(button,[role="button"]):not(:where(.peV2MonthCalendar *,.homeSchedulePane *)) svg,
    html.peV2PhoneRenderGuard:not([data-pe-screen="login"]) :is(h1,h2,h3,.mobileSubjectPlanSelectorTitle,.mobileClassProgressSelectorTitle,.mobileStudentSelectorTitle,.mobileAssessmentSelectorTitle) svg,
    html.peV2PhoneRenderGuard:not([data-pe-screen="login"]) :is(.peV2LineIcon,.peV2RegisterIcon):not(:where(.peV2MonthCalendar *,.homeSchedulePane *)) {
      color:var(--v2-neutral-ink)!important;filter:grayscale(1)!important;
    }
    /* Keep original neutral chevrons and native selection owners. */
    html.peV2PhoneRenderGuard:not([data-pe-screen="login"]) :is(select,.mobileContextPickerButton,.mobileAssessPickerButton,.mobileProgressPickerButton,.mobileClubPickerButton,input[type="date"],input[type="month"],.peV2RegistrationDate) {
      background-color:#fff!important;color:var(--v2-neutral-ink)!important;
      border-color:var(--v2-neutral-line)!important;box-shadow:none!important;
    }
    html.peV2PhoneRenderGuard:not([data-pe-screen="login"]) :is(select:not([multiple]):not([size]),select[size="1"],.mobileContextPickerButton,.mobileAssessPickerButton,.mobileProgressPickerButton,.mobileClubPickerButton,#calendarModal .calendarAddDateFieldCustom>button) {
      background-image:var(--v2-field-chevron)!important;
    }
    /* Selection and keyboard focus remain distinguishable without blue fill. */
    html.peV2PhoneRenderGuard:not([data-pe-screen="login"]) :is(button,[role="button"]):is(.is-active,.active,.selected,[aria-pressed="true"],[aria-selected="true"]):not(:where(.ccColor[data-color],.peV2MonthCalendar *,.homeSchedulePane *)) {
      background-color:#f0f0f0!important;border-color:#666!important;
      color:#202020!important;
    }
    html.peV2PhoneRenderGuard:not([data-pe-screen="login"]) :is(button,[role="button"]):focus-visible {
      outline:2px solid #555!important;outline-offset:2px!important;
    }
    html.peV2PhoneRenderGuard:not([data-pe-screen="login"]) :is(button,[role="button"],input[type="button"],input[type="submit"]):is([data-v2-action-role="danger"],.is-danger,.rf49-danger,[id*="delete" i],[data-subject-delete-mode="complete"],[id="adminFactoryResetSubmit"],[data-admin-factory-reset-open],[id="openAdminFactoryReset"]):not(:where(.ccColor[data-color])) {
      background-color:#fff!important;background-image:none!important;
      border-color:var(--v2-neutral-line)!important;color:var(--v2-danger-ink)!important;
    }
    /* The text is the destructive emphasis; its line icon stays neutral. */
    html.peV2PhoneRenderGuard:not([data-pe-screen="login"]) :is([data-v2-action-role="danger"],.rf49-danger,.is-danger) svg {color:var(--v2-neutral-ink)!important;}
    html.peV2PhoneRenderGuard:not([data-pe-screen="login"]) :is(button,[role="button"],input[type="button"],input[type="submit"],select):is(:disabled,[aria-disabled="true"]):not(:where(.ccColor[data-color],.peV2MonthCalendar *,.homeSchedulePane *)) {
      background-color:#f5f5f5!important;color:var(--v2-neutral-muted)!important;
      border-color:#dedede!important;opacity:1!important;box-shadow:none!important;
      cursor:not-allowed!important;
    }
    html.peV2PhoneRenderGuard:not([data-pe-screen="login"]) :is(button,[role="button"]):is(:disabled,[aria-disabled="true"]) svg {color:var(--v2-neutral-muted)!important;}
    /* Calendar / today / upcoming retain their original home stylesheet. */
    html.peV2PhoneRenderGuard:not([data-pe-screen="login"]) .peV2UpcomingBadge {
      background:#f1f1f1!important;color:#555!important;
    }
    html.peV2PhoneRenderGuard:not([data-pe-screen="login"]) :is(input[type="checkbox"],input[type="radio"]) {accent-color:#444!important;}
    html.peV2PhoneRenderGuard:not([data-pe-screen="login"]) .peV2RegisterIcon {filter:none!important;}
    /* Header presentation only: never modify the saved profile image. */
    html.peV2PhoneRenderGuard:not([data-pe-screen="login"]) .pe87Top .pe87Brand {filter:grayscale(1)!important;}
    html.peV2PhoneRenderGuard:not([data-pe-screen="login"]) .pe87Top .pe87Title :is(strong,b) {color:#333!important;}
    html.peV2PhoneRenderGuard:not([data-pe-screen="login"]) .pe87Top .pe87Logo {
      border-color:#777!important;box-shadow:0 2px 8px #00000014!important;
    }
    /* The dismiss surface is a button for accessibility, not an opaque card. */
    html.peV2PhoneRenderGuard:not([data-pe-screen="login"]) #mobileTabSheet[data-v2-menu] .mobileTabBackdrop {
      background:rgba(24,24,24,.24)!important;border:0!important;
      border-radius:0!important;box-shadow:none!important;
      backdrop-filter:blur(6px)!important;-webkit-backdrop-filter:blur(6px)!important;
    }
    /* A single clipped outer frame owns all four roster corners. Shared cell
       dividers avoid double-width lines when the general button border applies. */
    html.peV2PhoneRenderGuard:not([data-pe-screen="login"]) body.peMobileStudents12351 #app #studentList {
      overflow:hidden!important;border:1px solid var(--v2-neutral-line)!important;
      border-radius:15px!important;isolation:isolate!important;
    }
    html.peV2PhoneRenderGuard:not([data-pe-screen="login"]) body.peMobileStudents12351 #app #studentList>.studentBtn {
      border:0!important;border-right:1px solid var(--v2-neutral-line)!important;
      border-bottom:1px solid var(--v2-neutral-line)!important;
      border-radius:0!important;outline-offset:-2px!important;
    }
    html.peV2PhoneRenderGuard:not([data-pe-screen="login"]) body.peMobileStudents12351 #app #studentList>.studentBtn:nth-child(even) {border-right:0!important;}
    html.peV2PhoneRenderGuard:not([data-pe-screen="login"]) #studentList .name>.badge :is([data-v2-line-icon],.peV2LineIcon) {
      width:12px!important;height:12px!important;min-width:12px!important;
      flex:0 0 12px!important;vertical-align:-1px!important;
    }
    html.peV2PhoneRenderGuard:not([data-pe-screen="login"]) [data-sf51-management-list] [data-sf51-forward] {
      display:grid!important;grid-template-columns:20px minmax(0,1fr)!important;
      align-items:center!important;justify-content:normal!important;gap:12px!important;
      text-align:left!important;
    }
    html.peV2PhoneRenderGuard:not([data-pe-screen="login"]) [data-sf51-forward]>span:first-child {
      display:grid!important;place-items:center!important;width:20px!important;
      height:20px!important;min-width:20px!important;margin:0!important;padding:0!important;
      line-height:1!important;
    }
    html.peV2PhoneRenderGuard:not([data-pe-screen="login"]) [data-sf51-forward] [data-v2-line-icon] {margin:0!important;}
    html.peV2PhoneRenderGuard:not([data-pe-screen="login"]) [data-sf51-forward]>strong {line-height:1.4!important;text-align:left!important;}
    html.peV2PhoneRenderGuard:not([data-pe-screen="login"]) .adminFactoryResetCardIcon {
      background:none!important;border:0!important;box-shadow:none!important;
      border-radius:0!important;width:20px!important;height:20px!important;
      min-width:20px!important;padding:0!important;color:var(--v2-neutral-ink)!important;
    }
    html.peV2PhoneRenderGuard:not([data-pe-screen="login"]) .adminFactoryResetCardIcon [data-v2-line-icon] {margin:0!important;}
    html.peV2PhoneRenderGuard:not([data-pe-screen="login"]) .peMobileSettingsSubcardArrow {
      background:#f5f5f5!important;color:#555!important;border-color:var(--v2-neutral-line)!important;
    }
  }
}