/* Mobile-only Settings modal structure. Desktop, iPad and unfolded Fold remain unchanged. */
@layer peMobileSettingsModal {
@media (max-width: 768px) {
  html.pe-mobile-settings-active body #settingsCWorkspace.pe-mobile-settings-workspace {
    height: auto !important; min-height: 0 !important; max-height: none !important;
    overflow: visible !important; container-type: normal !important;
    display: grid !important; grid-template-rows: auto auto !important;
  }
  html.pe-mobile-settings-active body .pe-mobile-settings-workspace .settingsCFilters {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important; width: 100% !important; padding: 12px !important;
    overflow: visible !important;
  }
  html.pe-mobile-settings-active body .pe-mobile-settings-workspace .settingsCFilter {
    width: 100% !important; min-width: 0 !important; min-height: 48px !important;
    padding: 10px 8px !important; border-radius: 12px !important;
  }
  html.pe-mobile-settings-active body .pe-mobile-settings-workspace .settingsCFilter[hidden] { display: none !important; }
  html.pe-mobile-settings-active body .pe-mobile-settings-workspace .settingsCFilter[data-settings-filter="data"] { grid-column: 1 / -1 !important; }
  html.pe-mobile-settings-open, html.pe-mobile-settings-open body { overflow: hidden !important; }
  html.pe-mobile-settings-active body #peMobileSettingsModal {
    display: none !important; position: fixed !important; z-index: 6000 !important;
    inset: var(--pe-settings-top, 0px) 0 auto !important;
    width: 100% !important; height: var(--pe-settings-height, 100dvh) !important;
    min-height: 0 !important; max-height: none !important;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
    box-sizing: border-box !important; background: rgb(21 41 62 / 36%) !important;
    overflow: hidden !important; align-items: center !important; justify-content: center !important;
  }
  html.pe-mobile-settings-active body #peMobileSettingsModal[data-open="true"] { display: flex !important; }
  html.pe-mobile-settings-active body #peMobileSettingsModal .pe-mobile-settings-panel {
    width: min(760px, 100%) !important; min-width: 0 !important;
    max-width: 100% !important; max-height: 100% !important; min-height: 0 !important;
    display: flex !important; flex-direction: column !important;
    margin: 0 !important; padding: 0 !important; overflow: hidden !important;
    background: #f6f9fd !important; border: 1px solid #dce7f2 !important;
    border-radius: 18px !important; box-shadow: 0 18px 60px rgb(18 43 71 / 20%) !important;
  }
  html.pe-mobile-settings-active body #peMobileSettingsModal .pe-mobile-settings-modal-head {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    flex: 0 0 auto !important; gap: 12px !important; padding: 10px 14px !important;
    border-bottom: 1px solid #e0e9f4 !important; background: #fff !important;
  }
  html.pe-mobile-settings-active body #peMobileSettingsModalTitle {
    font-size: 15px !important; line-height: 1.5 !important; margin: 0 !important;
    min-width: 0 !important; word-break: keep-all !important; overflow-wrap: anywhere !important;
  }
  html.pe-mobile-settings-active body #peMobileSettingsModal [data-mobile-settings-close] {
    flex: 0 0 auto !important; min-height: 44px !important; padding: 8px 14px !important;
    border: 1px solid #d7e3f0 !important; border-radius: 10px !important; background: #fff !important; color: #315a79 !important;
  }
  html.pe-mobile-settings-active body #peMobileSettingsModal .pe-mobile-settings-content {
    flex: 1 1 auto !important; min-height: 0 !important; width: 100% !important;
    padding: 12px !important; box-sizing: border-box !important;
    overflow: auto !important; overflow-x: hidden !important; overscroll-behavior: contain !important;
    scroll-padding-block: 12px !important;
    container: settingsC / inline-size;
  }
  html.pe-mobile-settings-active body #peMobileSettingsModal .settingsCGroup {
    width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 0 !important; background: transparent !important; overflow: visible !important;
    height: auto !important; max-height: none !important; min-height: 0 !important;
  }
  html.pe-mobile-settings-active body #peMobileSettingsModal :is(.settingsCGroup[hidden],.settingsCGroupHeader,.settingsCEmpty) { display: none !important; }
  html.pe-mobile-settings-active body #peMobileSettingsModal .settingsCGroup.is-open > .settingsCBody {
    display: block !important; padding: 0 !important; height: auto !important; min-height: 0 !important;
    max-height: none !important; overflow: visible !important; flex: initial !important;
  }
  html.pe-mobile-settings-active body #peMobileSettingsModal :is(.settingsCGridEducation,.settingsCGridLesson,.settingsCLessonLeft,.settingsCGridStudents,.settingsCHomeLayout,.settingsCHomeEditors,.settingsCOriginalHomeGrid,.settingsCDataGrid) {
    display: grid !important; grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important; grid-auto-rows: auto !important; gap: 10px !important;
    width: 100% !important; min-width: 0 !important; min-height: 0 !important;
    height: auto !important; max-height: none !important; overflow: visible !important; padding: 0 !important;
  }
  html.pe-mobile-settings-active body #peMobileSettingsModal :is(.adminCard,.settingsCPreview) {
    min-width: 0 !important; max-width: 100% !important; min-height: 0 !important;
    height: auto !important; max-height: none !important; grid-column: auto !important; grid-row: auto !important;
    box-sizing: border-box !important;
  }
  html.pe-mobile-settings-active body #peMobileSettingsModal .peMobileSettingsSubcard {
    display: block !important; padding: 0 12px 12px !important; overflow: hidden !important;
    border: 1px solid #dce7f2 !important; border-radius: 12px !important; background: #fff !important;
  }
  html.pe-mobile-settings-active body #peMobileSettingsModal .peMobileSettingsSubcard:not(.is-open) { padding-bottom: 0 !important; }
  html.pe-mobile-settings-active body #peMobileSettingsModal .peMobileSettingsSubcardToggle {
    display: grid !important; grid-template-columns: minmax(0, 1fr) 28px !important;
    width: calc(100% + 24px) !important; max-width: none !important; min-height: 50px !important;
    margin: 0 -12px !important; padding: 10px 12px !important; gap: 10px !important;
    border: 0 !important; border-radius: 0 !important; background: #fff !important; color: #284b68 !important;
    font-size: 12px !important; line-height: 1.5 !important;
  }
  html.pe-mobile-settings-active body #peMobileSettingsModal .peMobileSettingsSubcardArrow {
    display: grid !important; place-items: center !important; width: 28px !important; height: 28px !important;
    border-radius: 8px !important; background: #f0f5fb !important; transform: none !important;
  }
  html.pe-mobile-settings-active body #peMobileSettingsModal .peMobileSettingsSubcardArrow::before {
    content: '' !important; width: 7px !important; height: 7px !important; border-right: 2px solid #7690a7 !important;
    border-bottom: 2px solid #7690a7 !important; transform: translateY(-2px) rotate(45deg) !important;
  }
  html.pe-mobile-settings-active body #peMobileSettingsModal .is-open > .peMobileSettingsSubcardToggle .peMobileSettingsSubcardArrow::before { transform: translateY(2px) rotate(225deg) !important; }
  html.pe-mobile-settings-active body #peMobileSettingsModal .peMobileSettingsSubcard:not(.is-open) > .peMobileSettingsSubcardContent,
  html.pe-mobile-settings-active body #peMobileSettingsModal :is(.peMobileSettingsSubcardOriginalTitle,.peMobileSettingsSubcardOriginalHeader) { display: none !important; }
  html.pe-mobile-settings-active body #peMobileSettingsModal .peMobileSettingsSubcardFirstContent { margin-top: 12px !important; }
  html.pe-mobile-settings-active body #peMobileSettingsModal .adminCollapsibleCard > summary {
    display: grid !important; grid-template-columns: minmax(0, 1fr) 28px !important;
    align-items: center !important; gap: 10px !important; min-height: 50px !important;
    height: auto !important; max-height: none !important;
    padding: 10px 12px !important; box-sizing: border-box !important;
    font-size: 12px !important; line-height: 1.5 !important; text-align: center !important;
  }
  html.pe-mobile-settings-active body #peMobileSettingsModal .adminCollapsibleCard > summary :is(span,b,strong,small) {
    font-size: inherit !important; line-height: inherit !important; min-width: 0 !important;
    text-align: center !important; word-break: keep-all !important; overflow-wrap: anywhere !important;
  }
  html.pe-mobile-settings-active body #peMobileSettingsModal .adminCollapsibleCard > summary > i {
    width: 28px !important; height: 28px !important; min-height: 28px !important; min-width: 28px !important;
    display: grid !important; place-items: center !important;
    margin: 0 !important; font-size: 0 !important; line-height: 0 !important; grid-column: -2 / -1 !important;
  }
  html.pe-mobile-settings-active body #peMobileSettingsModal .adminCollapsibleCard > summary:has(> button) {
    grid-template-columns: minmax(0, 1fr) auto 28px !important;
  }
  html.pe-mobile-settings-active body #peMobileSettingsModal .adminCollapsibleCard > summary > button {
    min-width: 56px !important; width: auto !important; padding: 8px !important; white-space: nowrap !important;
  }

}
}

/* The outer workspace cannot be a fixed-position containing block. Preserve
   its original mobile @container header rules explicitly; typography and
   save labels remain the production defaults. Inner cards keep their own
   original container queries through .pe-mobile-settings-content above. */
@media (max-width: 768px) {
  .pe-mobile-settings-workspace .settingsCHeader {
    grid-template-columns: 1fr; align-items: start; gap: 12px;
  }
  .pe-mobile-settings-workspace .settingsCControls {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    justify-content: stretch; flex-wrap: wrap; width: 100%;
  }
  .pe-mobile-settings-workspace .settingsCControls .adminTopBar > .row { min-width: 0; }
  .pe-mobile-settings-workspace .settingsCControls .adminTopBar > .row > b,
  .pe-mobile-settings-workspace .settingsCSaveState { display: none; }
  .pe-mobile-settings-workspace .settingsCControls select { min-width: 0 !important; width: 100% !important; }
  .pe-mobile-settings-workspace .settingsCControls #saveAdminAll { min-width: 132px !important; }
}
@media (max-width: 480px) {
  .pe-mobile-settings-workspace .settingsCControls { grid-template-columns: minmax(0, 1fr); }
  .pe-mobile-settings-workspace .settingsCControls .adminTopBar > .row {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pe-mobile-settings-workspace .settingsCControls #saveAdminAll { width: 100% !important; }
}