/* Production mobile class-lesson dialogs. Existing typography, records and desktop layouts
   remain unchanged; an open phone dialog also survives rotation/unfolding. */
@layer peClassPlan12289 {
  @media (min-width: 0px) {
    html.pe-class-plan-enabled #peClassPlanDialog12289,
    html.pe-class-plan-enabled #peClassPlanDialog12289 * {
      box-sizing: border-box;
      min-width: 0;
    }

    html.pe-class-plan-enabled #peClassPlanDialog12289 {
      position: fixed;
      inset: auto 0 auto;
      top: var(--pe-plan-viewport-top, 0px);
      z-index: 32000;
      display: grid;
      align-items: end;
      justify-items: center;
      width: 100%;
      height: var(--pe-plan-viewport-height, 100dvh);
      padding: 12px;
      overflow: hidden;
      background: rgb(18 39 61 / 42%);
      color: #243d53;
      font-family: var(--pe-local-control-family, var(--site-font-family));
      font-synthesis: none;
      -webkit-tap-highlight-color: transparent;
      overscroll-behavior: contain;
    }

    html.pe-class-plan-enabled #peClassPlanDialog12289[hidden] { display: none !important; }

    html.pe-class-plan-enabled #peClassPlanDialog12289 .pePlanPanel {
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 560px;
      max-height: calc(var(--pe-plan-viewport-height, 100dvh) - 24px);
      min-height: 0;
      margin: 0;
      overflow: hidden;
      border: 1px solid #d2e2ef;
      border-radius: 19px;
      background: #fff;
      box-shadow: 0 16px 54px rgb(12 35 57 / 24%);
    }

    html.pe-class-plan-enabled #peClassPlanDialog12289 .pePlanModalHead {
      position: relative;
      flex: 0 0 auto;
      display: block;
      min-height: 77px;
      margin: 0;
      padding: 17px 63px 15px 18px;
      border-bottom: 1px solid #e3edf5;
      background: #f7fbff;
      text-align: left !important;
    }
    html.pe-class-plan-enabled #peClassPlanDialog12289 .pePlanEyebrow {
      display: block;
      margin: 0 0 5px;
      color: #63819b;
      font-size: 9.5px !important;
      line-height: 1.35 !important;
      text-align: left !important;
    }
    html.pe-class-plan-enabled #peClassPlanDialog12289 .pePlanModalHead h2 {
      margin: 0 !important;
      color: #203e58;
      font-size: 14px !important;
      line-height: 1.4 !important;
      word-break: keep-all;
      overflow-wrap: anywhere;
      text-align: left !important;
    }
    html.pe-class-plan-enabled #peClassPlanDialog12289 .pePlanModalHead [data-pe-plan-action="close"] {
      position: absolute;
      top: 14px;
      right: 11px;
      width: 44px;
      height: 44px;
      min-height: 44px;
      padding: 0 !important;
      border: 1px solid #d7e4ef;
      border-radius: 11px;
      background: #fff;
      color: #53738b;
      font-size: 18.5px !important;
      line-height: 1 !important;
    }

    html.pe-class-plan-enabled #peClassPlanDialog12289 .pePlanModalBody {
      flex: 1 1 auto;
      min-height: 0;
      padding: 17px 16px 19px;
      overflow-x: hidden;
      overflow-y: auto;
      scroll-behavior: auto;
      overflow-anchor: none;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
      scrollbar-width: thin;
      scrollbar-color: #c5d9e9 transparent;
    }
    html.pe-class-plan-enabled #peClassPlanDialog12289 .pePlanForm { display: grid; gap: 15px; }
    html.pe-class-plan-enabled #peClassPlanDialog12289 .pePlanTwoCols {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    html.pe-class-plan-enabled #peClassPlanDialog12289 .pePlanField {
      display: flex !important;
      flex-direction: column;
      gap: 7px;
      margin: 0;
    }
    html.pe-class-plan-enabled #peClassPlanDialog12289 .pePlanField > span {
      color: #57728a;
      font-size: 10.5px !important;
      line-height: 1.4 !important;
      text-align: center !important;
      word-break: keep-all;
      overflow-wrap: anywhere;
    }
    html.pe-class-plan-enabled #peClassPlanDialog12289 .pePlanField :is(input, select, textarea) {
      width: 100%;
      max-width: 100%;
      min-height: 44px !important;
      margin: 0;
      padding: 10px 11px !important;
      border: 1px solid #cfdeeb !important;
      border-radius: 10px !important;
      outline: none;
      background-color: #fff;
      color: #243e56;
      font-family: var(--pe-local-control-family, var(--site-font-family)) !important;
      font-size: 11.5px !important;
      font-weight: 400 !important;
      line-height: 1.55 !important;
      text-align: center !important;
      -webkit-user-select: text;
      user-select: text;
    }
    html.pe-class-plan-enabled #peClassPlanDialog12289 .pePlanField select {
      padding-right: 26px !important;
      padding-left: 26px !important;
      background-position: right 10px center !important;
      background-size: 9px 6px !important;
      text-align-last: center !important;
    }
    /* Date's native calendar icon must not push the visible value off centre. */
    html.pe-class-plan-enabled #peClassPlanDialog12289[data-plan-kind="class"] input[data-plan-draft="lessonDate"] {
      position: relative;
      display: block;
      height: 44px;
      padding-inline: 25px !important;
      text-align: center !important;
    }
    html.pe-class-plan-enabled #peClassPlanDialog12289[data-plan-kind="class"] input[data-plan-draft="lessonDate"]::-webkit-datetime-edit {
      display: inline-flex;
      justify-content: center;
      width: 100%;
      padding: 0;
    }
    html.pe-class-plan-enabled #peClassPlanDialog12289[data-plan-kind="class"] input[data-plan-draft="lessonDate"]::-webkit-datetime-edit-fields-wrapper {
      padding: 0;
    }
    html.pe-class-plan-enabled #peClassPlanDialog12289[data-plan-kind="class"] input[data-plan-draft="lessonDate"]::-webkit-date-and-time-value {
      width: 100%;
      margin: 0;
      text-align: center;
    }
    html.pe-class-plan-enabled #peClassPlanDialog12289[data-plan-kind="class"] input[data-plan-draft="lessonDate"]::-webkit-calendar-picker-indicator {
      position: absolute;
      top: 50%;
      right: 8px;
      width: 14px;
      height: 14px;
      margin: 0;
      padding: 0;
      transform: translateY(-50%);
    }
    html.pe-class-plan-enabled #peClassPlanDialog12289 .pePlanField textarea {
      min-height: 108px !important;
      resize: vertical;
      text-align: left !important;
      word-break: keep-all;
      overflow-wrap: anywhere;
      white-space: pre-wrap;
    }
    html.pe-class-plan-enabled #peClassPlanDialog12289 textarea[data-plan-draft="memo"] {
      min-height: 76px !important;
    }
    html.pe-class-plan-enabled #peClassPlanDialog12289 .pePlanActivityHead {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 26px;
      margin: 0 0 -8px;
      color: #57728a;
      font-size: 10.5px !important;
      line-height: 1.4 !important;
    }
    html.pe-class-plan-enabled #peClassPlanDialog12289 .pePlanActivityHead [data-pe-plan-link] {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 24px;
      padding: 3px 8px;
      border: 1px solid #deebf5;
      border-radius: 7px;
      background: #f4f9fd;
      color: #6e8aa1;
      font-size: 9.5px !important;
      line-height: 1.4 !important;
      white-space: nowrap;
    }
    html.pe-class-plan-enabled #peClassPlanDialog12289 [data-pe-plan-message] {
      margin: 12px 0 0;
      color: #8a5930;
      font-size: 10px !important;
      line-height: 1.5 !important;
      text-align: center;
      word-break: keep-all;
      overflow-wrap: anywhere;
    }
    html.pe-class-plan-enabled #peClassPlanDialog12289 .pePlanField :is(input, select, textarea):focus {
      border-color: #6ca7d8;
      box-shadow: 0 0 0 3px rgb(69 145 207 / 12%);
    }
    html.pe-class-plan-enabled #peClassPlanDialog12289 .pePlanField :is(input, select, textarea):disabled {
      background-color: #f4f7fa;
      color: #71889a;
    }

    html.pe-class-plan-enabled #peClassPlanDialog12289 .pePlanModalFoot {
      flex: 0 0 auto;
      display: grid;
      gap: 9px;
      padding: 11px 16px 14px;
      border-top: 1px solid #e0eaf2;
      background: #fff;
    }
    html.pe-class-plan-enabled #peClassPlanDialog12289 .pePlanPager {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: center;
      gap: 10px;
    }
    html.pe-class-plan-enabled #peClassPlanDialog12289 .pePlanPager > :not(button) {
      min-width: 42px;
      color: #69839a;
      font-size: 10px !important;
      line-height: 1.4 !important;
      text-align: center !important;
      white-space: nowrap;
    }
    html.pe-class-plan-enabled #peClassPlanDialog12289 .pePlanSaveRow {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr);
      gap: 8px;
    }
    html.pe-class-plan-enabled #peClassPlanDialog12289 .pePlanSaveRow {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    html.pe-class-plan-enabled #peClassPlanDialog12289 .pePlanSaveRow > button {
      width: 100%;
      height: 44px;
    }
    html.pe-class-plan-enabled #peClassPlanDialog12289 button {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      min-height: 44px !important;
      margin: 0 !important;
      padding: 9px 8px !important;
      border: 1px solid #d2e0ec !important;
      border-radius: 10px !important;
      background: #f8fbfd !important;
      color: #45647c !important;
      box-shadow: none !important;
      font-size: 10px !important;
      line-height: 1.35 !important;
      text-align: center !important;
      white-space: nowrap;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
    html.pe-class-plan-enabled #peClassPlanDialog12289 button:focus-visible {
      outline: 3px solid rgb(51 141 208 / 24%);
      outline-offset: 2px;
    }
    html.pe-class-plan-enabled #peClassPlanDialog12289 button:disabled {
      opacity: .42;
      cursor: default;
    }
    html.pe-class-plan-enabled #peClassPlanDialog12289 :is([data-pe-plan-action="save"], .pePlanSaveRow .green) {
      border-color: #179655 !important;
      background: #22ad66 !important;
      color: #fff !important;
    }
    html.pe-class-plan-enabled #peClassPlanDialog12289 .pePlanDiscard {
      padding: 10px;
      border: 1px solid #edcfab;
      border-radius: 10px;
      background: #fff9f1;
      color: #785331;
      font-size: 10px !important;
      line-height: 1.5;
      text-align: center;
      word-break: keep-all;
      overflow-wrap: anywhere;
    }
    html.pe-class-plan-enabled #peClassPlanDialog12289 .pePlanDiscard[hidden] { display: none !important; }
    html.pe-class-plan-enabled #peClassPlanDialog12289 .pePlanDiscard p { margin: 0 0 8px; font-size: 10px !important; }
    html.pe-class-plan-enabled #peClassPlanDialog12289 .pePlanDiscard > div { display: flex; gap: 6px; }
    html.pe-class-plan-enabled #peClassPlanDialog12289 .pePlanDiscard button { flex: 1; font-size: 9.5px !important; }

  }
  @media (max-width: 768px) {
    html.pe-class-plan-enabled .pePlanCompact > :is(.mobileSubjectPlanFields, .mobileClassProgressFields),
    html.pe-class-plan-enabled .pePlanCompact :is(.mobileSubjectPlanCardState, .mobileClassProgressCardState) {
      display: none !important;
    }
    html.pe-class-plan-enabled :is(.mobileSubjectPlanCard, .mobileClassProgressCard).pePlanCompact {
      padding: 11px 12px !important;
      border-radius: 13px !important;
      box-shadow: 0 2px 9px rgb(31 56 88 / 4%) !important;
    }
    html.pe-class-plan-enabled .pePlanCompact > header {
      grid-template-columns: auto minmax(0, 1fr) 40px !important;
      min-height: 30px;
      margin: 0 0 8px !important;
      padding: 0 0 8px !important;
      gap: 8px;
    }
    /* The lesson number keeps the shared production card size. */
    html.pe-class-plan-enabled .pePlanCompact :is(.mobileSubjectPlanCheck, .mobileClassProgressCheck) {
      min-height: 30px;
      font-size: 9.5px !important;
    }
    html.pe-class-plan-enabled .pePlanCompact .pePlanSummary {
      position: relative;
      display: block !important;
      width: 100%;
      min-height: 70px !important;
      margin: 0 !important;
      padding: 3px 21px 5px !important;
      border: 0 !important;
      border-radius: 8px !important;
      background: transparent !important;
      color: #29455d !important;
      box-shadow: none !important;
      font-size: 10.5px !important;
      text-align: center !important;
      white-space: normal !important;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    html.pe-class-plan-enabled .pePlanCompact .pePlanSummaryTitle {
      display: block !important;
      margin: 0;
      color: #2a4b65;
      font-size: 11px !important;
      line-height: 1.5 !important;
      word-break: keep-all !important;
      overflow-wrap: anywhere !important;
      white-space: normal !important;
    }
    html.pe-class-plan-enabled .pePlanCompact .pePlanSummaryMeta {
      display: block !important;
      margin: 3px 0 0;
      color: #7c90a1;
      font-size: 9.5px !important;
      line-height: 1.5 !important;
      word-break: keep-all !important;
      overflow-wrap: anywhere !important;
      white-space: normal !important;
    }
    html.pe-class-plan-enabled .pePlanCompact .pePlanSummaryActivity {
      display: -webkit-box !important;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      margin: 6px 0 0;
      overflow: hidden !important;
      color: #6a7f91;
      font-size: 10px !important;
      line-height: 1.6 !important;
      word-break: keep-all !important;
      overflow-wrap: anywhere !important;
      white-space: normal !important;
    }
    html.pe-class-plan-enabled .pePlanCompact .pePlanSummaryArrow {
      position: absolute;
      right: 2px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 24px;
      color: #6095bf;
      font-size: 16.5px !important;
      line-height: 1 !important;
    }
    /* Class lesson cards are reading content, not centred button labels. */
    html.pe-class-plan-enabled .mobileClassProgressCard.pePlanCompact > header {
      grid-template-columns: auto minmax(0, 1fr) auto !important;
    }
    html.pe-class-plan-enabled .mobileClassProgressCard.pePlanCompact > header > strong {
      text-align: left !important;
      white-space: nowrap;
    }
    html.pe-class-plan-enabled .mobileClassProgressCard.pePlanCompact .pePlanLessonDate {
      justify-self: end;
      color: #70869b;
      font-size: 10px !important;
      line-height: 1.4 !important;
      text-align: right !important;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }
    html.pe-class-plan-enabled .pePlanCompact .pePlanSummary {
      padding: 3px 20px 5px 0 !important;
      text-align: left !important;
    }
    html.pe-class-plan-enabled .pePlanCompact .pePlanClassDetail {
      display: grid !important;
      grid-template-columns: 61px minmax(0, 1fr);
      align-items: start !important;
      justify-content: start !important;
      gap: 5px;
      margin: 0 0 5px;
      text-align: left !important;
      font-size: 10.5px !important;
      line-height: 1.65 !important;
    }
    html.pe-class-plan-enabled .pePlanCompact .pePlanClassDetail:has(+ .pePlanSummaryArrow) { margin-bottom: 0; }
    html.pe-class-plan-enabled .pePlanCompact .pePlanClassLabel {
      color: #6a8195;
      text-align: left !important;
      white-space: nowrap !important;
    }
    html.pe-class-plan-enabled .pePlanCompact .pePlanClassValue {
      min-width: 0;
      color: #29455d;
      text-align: left !important;
      white-space: pre-wrap !important;
      word-break: keep-all !important;
      overflow-wrap: anywhere !important;
    }
    html.pe-class-plan-enabled #mobileClassProgressHost .mobileClassProgressDashboardHead {
      align-items: center !important;
      gap: 8px;
    }
    html.pe-class-plan-enabled #mobileClassProgressHost .mobileClassProgressDashboardHead h2 {
      white-space: nowrap;
    }
    html.pe-class-plan-enabled #mobileClassProgressHost [data-mobile-class-progress-status] {
      min-height: 28px;
      padding: 0 9px;
      border-color: #d0e5f5 !important;
      background: #edf7ff !important;
      color: #347dac !important;
      font-size: 9.5px !important;
      line-height: 1.35 !important;
      white-space: nowrap;
    }

    @media (prefers-reduced-motion: no-preference) {
      html.pe-class-plan-enabled #peClassPlanDialog12289 .pePlanPanel {
        animation: pePlanDialogPreviewIn 150ms ease-out;
      }
    }
  }
}

@keyframes pePlanDialogPreviewIn {
  from { opacity: .55; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}