/* Only the test site's narrow-phone Settings page is adjusted here. */
@media (max-width:768px) {
  html.peV2PhoneSettings body #app #settingsCWorkspace .settingsCTitleIcon svg {
    display:block;width:22px;height:22px;flex:none;
  }
  /* Do not override the hidden body of a collapsed settings accordion. */
  html.peV2PhoneSettings body #app #settingsCWorkspace.settingsC
  :is(.adminSemesterCard:not(.peMobileSettingsSubcard),.adminSemesterCard.is-open)>.semesterFixedGrid {
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-flow:row!important;gap:8px!important;
    box-sizing:border-box!important;width:100%!important;min-width:0!important;max-width:100%!important;
  }
  html.peV2PhoneSettings body #app #settingsCWorkspace.settingsC .adminSemesterCard .semesterFixedToggle {
    display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;
    box-sizing:border-box!important;width:100%!important;min-width:0!important;max-width:100%!important;
    height:52px!important;min-height:52px!important;margin:0!important;padding:10px 6px!important;
    white-space:nowrap!important;text-align:center!important;
  }
  html.peV2PhoneSettings body #app #settingsCWorkspace.settingsC
  :is(.adminSemesterPeriodCard:not(.peMobileSettingsSubcard),.adminSemesterPeriodCard.is-open)>.adminSemesterPeriodList {
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-flow:row!important;align-items:stretch!important;gap:8px!important;
    box-sizing:border-box!important;width:100%!important;min-width:0!important;max-width:100%!important;
  }
  html.peV2PhoneSettings body #app #settingsCWorkspace.settingsC .adminSemesterPeriodList>.adminSemesterPeriodFieldset {
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;align-content:start!important;gap:10px!important;
    box-sizing:border-box!important;width:100%!important;min-width:0!important;max-width:100%!important;
    height:100%!important;margin:0!important;padding:10px 7px!important;
  }
  html.peV2PhoneSettings body #app #settingsCWorkspace.settingsC .adminSemesterPeriodFieldset>label {
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:5px!important;
    box-sizing:border-box!important;width:100%!important;min-width:0!important;max-width:100%!important;
  }
  /* The original dynamic year label stays associated with its school input.
     Leave display alone so a closed school accordion remains hidden. */
  html.peV2PhoneSettings body #settingsCWorkspace.settingsC .adminSchoolCard .adminSchoolLabel {
    grid-template-columns:max-content minmax(0,1fr)!important;
    align-items:center!important;gap:10px!important;
    box-sizing:border-box!important;width:100%!important;min-width:0!important;max-width:100%!important;
  }
  html.peV2PhoneSettings body #settingsCWorkspace.settingsC .adminSchoolCard .adminSchoolLabel>span {
    margin:0!important;white-space:nowrap!important;text-align:left!important;
  }
  html.peV2PhoneSettings body #settingsCWorkspace.settingsC .adminSchoolCard .adminSchoolLabel>#adminSchoolName {
    box-sizing:border-box!important;width:100%!important;min-width:0!important;max-width:100%!important;
  }
}
/* Keep the original year/semester/save controls and their handlers in place.
   The label shares their row even on the smallest supported phone width. */
@layer peMobileSettingsModal {
  @media (max-width:768px) {
    html.peV2PhoneSettings body #settingsCWorkspace .settingsCControls {
      display:grid!important;grid-template-columns:minmax(0,1fr) 64px!important;
      align-items:center!important;gap:6px!important;
    }
    html.peV2PhoneSettings body #settingsCWorkspace .settingsCControls .adminTopBar>.row {
      display:grid!important;grid-template-columns:auto minmax(0,1.2fr) minmax(0,1fr)!important;
      align-items:center!important;gap:4px!important;min-width:0!important;
    }
    html.peV2PhoneSettings body #settingsCWorkspace .settingsCControls .adminTopBar>.row>b {
      display:block!important;font-size:12px!important;line-height:1.4!important;
      white-space:nowrap!important;margin:0!important;
    }
    html.peV2PhoneSettings body #settingsCWorkspace .settingsCControls #saveAdminAll {
      width:64px!important;min-width:0!important;max-width:64px!important;
      padding:8px 4px!important;gap:3px!important;font-size:13px!important;
    }
  }
  @media (max-width:360px) {
    html.peV2PhoneSettings body #settingsCWorkspace.settingsC .settingsCControls {
      grid-template-columns:minmax(0,1fr) 60px!important;padding-inline:4px!important;
    }
    html.peV2PhoneSettings body #settingsCWorkspace .settingsCControls .adminTopBar>.row>b {
      font-size:11px!important;
    }
    html.peV2PhoneSettings body #settingsCWorkspace .settingsCControls #saveAdminAll {
      width:60px!important;max-width:60px!important;
    }
  }
}
/* Reuse the existing control layer, with a more specific Settings-only rule,
   so native date fields fit both equal-width semester columns at 320px. */
@layer peV2PhoneControls20261018 {
  @media (max-width:768px) {
    html.peV2PhoneSettings #settingsCWorkspace .settingsCControls :is(#adminYearSelect,#adminSemesterSelect) {
      padding:0 14px 0 2px!important;background-size:12px 12px!important;
      background-position:right 2px center!important;font-size:16px!important;
    }
    html.peV2PhoneSettings #settingsCWorkspace .adminSemesterPeriodFieldset input[type="date"] {
      box-sizing:border-box!important;width:100%!important;min-width:0!important;max-width:100%!important;
      padding-inline:4px!important;font-size:12px!important;
    }
    html.peV2PhoneSettings #settingsCWorkspace .adminSemesterPeriodFieldset input[type="date"]::-webkit-date-and-time-value,
    html.peV2PhoneSettings #settingsCWorkspace .adminSemesterPeriodFieldset input[type="date"]::-webkit-datetime-edit,
    html.peV2PhoneSettings #settingsCWorkspace .adminSemesterPeriodFieldset input[type="date"]::-webkit-datetime-edit-fields-wrapper {
      font-size:12px!important;min-width:0!important;padding:0!important;text-align:center!important;
    }
    html.peV2PhoneSettings #settingsCWorkspace .adminSemesterPeriodFieldset input[type="date"]::-webkit-calendar-picker-indicator {
      width:13px!important;min-width:13px!important;margin:0 0 0 1px!important;padding:0!important;
    }
  }
}