/* Narrow-phone test UI: the same field shell for native/custom selects.
 * Loaded in the head before legacy styles so no square/intermediate shell is
 * painted. This is presentation only: native inputs and their handlers remain. */
/* One action/control radius, taken from the operating .ccLaunch button.
 * The first important layer prevents late legacy tab styles from changing it.
 * Calendar date-number circles, badges and cards are not button shells. */
@layer peV2PhoneShape20261018i, peV2PhoneControls20261018;
@layer peV2PhoneShape20261018i {
  @media (max-width:768px) {
    html.peV2PhoneRenderGuard {
      --v2-button-radius:9px;
    }
    html.peV2PhoneRenderGuard :is(button,[role="button"],input[type="button"],input[type="submit"],input[type="reset"],select,input[type="date"],input[type="month"],.peV2RegistrationDate):not(:where(.peV2MonthCalendar *,.homeSchedulePane *,#loginScreen *)) {
      border-radius:var(--v2-button-radius)!important;
    }
  }
}
@layer peV2PhoneControls20261018 {
  @media (max-width:768px) {
    html.peV2PhoneRenderGuard {
      --v2-field-line:#d5e0e9;
      --v2-field-ink:#203247;
      --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='%234e6c86' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    }
    html.peV2PhoneRenderGuard :where(
      select:not([multiple]):not([size]),select[size="1"],
      input[type="date"],input[type="month"],
      .mobileContextPickerButton,.mobileAssessPickerButton,
      .mobileProgressPickerButton,.mobileClubPickerButton,
      #calendarModal .calendarAddDateFieldCustom>button
    ) {
      box-sizing:border-box!important;
      width:100%!important;
      min-width:0!important;
      max-width:100%!important;
      height:44px!important;
      min-height:44px!important;
      margin:0!important;
      padding:0 32px 0 10px!important;
      border:1px solid var(--v2-field-line)!important;
      border-radius:10px!important;
      background-color:#fff!important;
      color:var(--v2-field-ink)!important;
      box-shadow:none!important;
      font-family:inherit!important;
      font-size:16px!important;
      line-height:1.4!important;
      text-align:center!important;
      text-align-last:center!important;
      -webkit-tap-highlight-color:transparent!important;
    }
    html.peV2PhoneRenderGuard :where(
      select:not([multiple]):not([size]),select[size="1"],
      .mobileContextPickerButton,.mobileAssessPickerButton,
      .mobileProgressPickerButton,.mobileClubPickerButton,
      #calendarModal .calendarAddDateFieldCustom>button
    ) {
      appearance:none!important;
      -webkit-appearance:none!important;
      background-image:var(--v2-field-chevron)!important;
      background-repeat:no-repeat!important;
      background-size:16px 16px!important;
      background-position:right 10px center!important;
    }
    html.peV2PhoneRenderGuard :where(
      .mobileContextPickerButton,.mobileAssessPickerButton,
      .mobileProgressPickerButton,.mobileClubPickerButton,
      #calendarModal .calendarAddDateFieldCustom>button
    ) {
      position:relative!important;
      display:flex!important;
      align-items:center!important;
      justify-content:center!important;
      gap:0!important;
    }
    html.peV2PhoneRenderGuard :where(
      .mobileContextPickerButton,.mobileAssessPickerButton,
      .mobileProgressPickerButton,.mobileClubPickerButton
    )>b {
      width:100%!important;min-width:0!important;
      text-align:center!important;white-space:nowrap!important;
      overflow:hidden!important;text-overflow:ellipsis!important;
      font-size:inherit!important;line-height:1.4!important;
    }
    /* Draw one chevron, not a native arrow plus the legacy glyph/SVG. */
    html.peV2PhoneRenderGuard :where(
      .mobileContextPickerButton,.mobileAssessPickerButton,
      .mobileProgressPickerButton,.mobileClubPickerButton
    )>span:last-child,
    html.peV2PhoneRenderGuard #calendarModal .calendarAddDateFieldCustom>button>i {
      display:none!important;
    }
    html.peV2PhoneRenderGuard :is(input[type="date"],input[type="month"]) {
      appearance:none!important;-webkit-appearance:none!important;
      padding-inline:10px!important;
    }
    html.peV2PhoneRenderGuard :is(input[type="date"],input[type="month"])::-webkit-date-and-time-value {
      min-height:1.4em;text-align:center;font-size:16px;
    }
    html.peV2PhoneRenderGuard #calendarModal .calendarAddHeader {
      display:grid!important;grid-template-columns:minmax(0,1fr) 38px!important;
      align-items:center!important;gap:12px!important;
      min-height:64px!important;padding:12px 14px 12px 18px!important;
    }
    html.peV2PhoneRenderGuard #calendarModal .calendarAddHeading,
    html.peV2PhoneRenderGuard #calendarModal .calendarAddHeading>div,
    html.peV2PhoneRenderGuard #calendarModal .calendarAddHeading h3 {
      margin:0!important;min-width:0!important;align-self:center!important;
    }
    html.peV2PhoneRenderGuard #calendarModal .calendarAddClose {
      position:static!important;inset:auto!important;transform:none!important;
      align-self:center!important;justify-self:end!important;
      display:grid!important;place-items:center!important;
      width:38px!important;min-width:38px!important;height:38px!important;
      margin:0!important;padding:0!important;line-height:1!important;
    }
    html.peV2PhoneRenderGuard :is(#calendarModal,#peV2CalendarDay,#homeUpcomingEditor) .peV2RegistrationDate {
      position:relative!important;display:block!important;
      box-sizing:border-box!important;width:100%!important;min-width:0!important;
      height:44px!important;min-height:44px!important;padding:0!important;
      border:1px solid var(--v2-field-line)!important;border-radius:10px!important;
      background:#fff!important;
    }
    html.peV2PhoneRenderGuard #calendarModal .peV2RegistrationDate>#calendarAddDateWeekday {
      display:none!important;
    }
    html.peV2PhoneRenderGuard #homeUpcomingEditor.peV2UpcomingDateInline .homeUpcomingWeekday {
      display:none!important;
    }
    html.peV2PhoneRenderGuard #calendarModal .peV2RegistrationDate #calendarAddDateDisplay {
      position:absolute!important;opacity:0!important;pointer-events:none!important;
    }
    html.peV2PhoneRenderGuard :is(#calendarModal,#peV2CalendarDay,#homeUpcomingEditor) .peV2RegistrationDateText {
      position:absolute!important;inset:0!important;display:flex!important;
      align-items:center!important;justify-content:center!important;
      margin:0!important;padding:0 4px!important;box-sizing:border-box!important;
      font-size:clamp(11px,3.15vw,13px)!important;line-height:1.4!important;
      font-weight:600!important;color:var(--v2-field-ink)!important;
      white-space:nowrap!important;pointer-events:none!important;
    }
    html.peV2PhoneRenderGuard :is(#calendarModal,#peV2CalendarDay,#homeUpcomingEditor) .peV2RegistrationDate>input[type="date"] {
      position:absolute!important;inset:0!important;z-index:1!important;
      width:100%!important;height:100%!important;min-height:0!important;
      border:0!important;opacity:0!important;cursor:pointer!important;
    }
    html.peV2PhoneRenderGuard :is(#calendarModal,#peV2CalendarDay,#homeUpcomingEditor) .peV2RegistrationDate>input[type="date"]::-webkit-calendar-picker-indicator {
      position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;
    }
    /* Keyboard date editing remains visible; touch still opens the same
       native picker. The passive label never intercepts the original input. */
    html.peV2PhoneRenderGuard :is(#calendarModal,#peV2CalendarDay,#homeUpcomingEditor) .peV2RegistrationDateKeyboard>input[type="date"],
    html.peV2PhoneRenderGuard :is(#calendarModal,#peV2CalendarDay,#homeUpcomingEditor) .peV2RegistrationDateEmpty>input[type="date"] {
      opacity:1!important;
    }
    html.peV2PhoneRenderGuard :is(#calendarModal,#peV2CalendarDay,#homeUpcomingEditor) .peV2RegistrationDateKeyboard>.peV2RegistrationDateText {
      visibility:hidden!important;
    }
    html.peV2PhoneRenderGuard #calendarModal .peV2RegistrationDate>#calendarAddDateButton {
      width:100%!important;height:100%!important;min-height:0!important;
      border:0!important;background-image:none!important;
    }
    html.peV2PhoneRenderGuard .peV2RegisterIcon {
      display:block!important;width:28px!important;height:28px!important;
      margin:0!important;flex:none!important;
    }
    html.peV2PhoneRenderGuard :where(
      select,input[type="date"],input[type="month"],
      .mobileContextPickerButton,.mobileAssessPickerButton,
      .mobileProgressPickerButton,.mobileClubPickerButton,
      #calendarModal .calendarAddDateFieldCustom>button
    ):disabled {
      background-color:#f4f6f8!important;color:#8693a0!important;
      opacity:1!important;cursor:not-allowed!important;
    }
    /* Attendance status colors convey meaning; only their shell is unified. */
    html.peV2PhoneRenderGuard .mobileClubPickerButton.status-present:not(:disabled) {background-color:#f0fbf4!important;border-color:#83c79e!important;color:#16753a!important;}
    html.peV2PhoneRenderGuard .mobileClubPickerButton.status-absent:not(:disabled) {background-color:#fff4f4!important;border-color:#e8a6a6!important;color:#b63333!important;}
    html.peV2PhoneRenderGuard .mobileClubPickerButton.status-late:not(:disabled) {background-color:#fff9eb!important;border-color:#eacb83!important;color:#9a6700!important;}
    html.peV2PhoneRenderGuard .mobileClubPickerButton.status-official:not(:disabled) {background-color:#f1f8ff!important;border-color:#9ac4e8!important;color:#296b9f!important;}
    html.peV2PhoneRenderGuard .mobileClubPickerButton.status-early:not(:disabled) {background-color:#f8f4ff!important;border-color:#bea9e0!important;color:#65469a!important;}
    /* Summary selectors keep their two-part text, but share the field edge. */
    html.peV2PhoneRenderGuard :is([data-rf48-class-toggle],[data-sf51-class],[data-v2gp-toggle]) {
      border:1px solid var(--v2-field-line)!important;
      border-radius:10px!important;box-shadow:none!important;background-color:#fff!important;
    }
  }
}