/* Reference desktop geometry shared with the four homepage sections. The
   controller adds these classes only for mouse/trackpad desktop layouts. */
html.desktop-page-fitted { overflow-x: clip; overflow-y: auto; scroll-snap-type: none; }
html.desktop-page-fitted body.workspace-page { overflow-x: clip; overflow-y: visible; }
html.desktop-page-fitted.desktop-page-fixed,
html.desktop-page-fitted.desktop-page-fixed body.workspace-page { height: 100%; overflow: clip !important; }

html.desktop-page-fitted body.workspace-page main#main-content.desktop-page-fitted {
  --reading-frame: 1600px; --reading-title: 84px; --reading-gap: 64px;
  --testimonials-frame: 1600px; --testimonials-title: 84px; --testimonials-gap: 64px;
  --portal-frame: 1600px; --portal-title: 84px;
  --admin-frame: 1600px; --admin-title: 84px;
  --course-frame: 1600px; --course-title: 84px; --course-gap: 64px; --course-space: 80px;
  --workspace-gap: 36px;
  --admin-calendar-heading-height: 105.08px;
  --admin-calendar-grid-height: 594.92px;
  position: relative; display: block; box-sizing: border-box;
  width: 100%; max-width: none; min-height: 0;
  height: var(--desktop-page-height); margin: 0; padding: 0;
  overflow: clip;

  & > .desktop-page-stage {
    position: absolute; left: 50%; top: var(--desktop-page-top);
    width: 1600px; min-height: 960px; height: auto; box-sizing: border-box;
    display: grid; grid-template-columns: minmax(0, 1fr);
    grid-template-rows: max-content minmax(min-content, 1fr); gap: 40px;
    padding: 32px 0; margin: 0;
    transform: translateX(-50%) scale(var(--desktop-page-scale));
    transform-origin: 50% 0;
  }
  & .workspace-heading { margin: 0; }
  & .workspace-heading h1 { font-size: 84px; line-height: 1.02; }
  & .workspace-heading p { font: 300 16px/1.55 var(--sans); margin-top: 18px; }
  & :is(.policy-section, .testimonials-grid) { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 64px; }
  & .policy-section > :is(h2,h3) { font-size: 48px; }

  & .portal-login h2, & .admin-login h2, & .admin-topbar h2 { font-size: 48px; }
  & .portal-dashboard-grid { grid-template-columns: repeat(2,minmax(0,1fr)); min-height: 500px; height: auto; }
  & .portal-lessons-card { contain: none; height: auto; }
  & .portal-lessons-list { overflow: visible; height: auto; flex: 0 0 auto; padding-right: 0; scrollbar-gutter: auto; }
  & .portal-lesson { grid-template-columns: 56px minmax(0,1fr) auto; }
  & .portal-lesson-actions { grid-column: 3; flex-direction: row; align-items: center; gap: 10px; }
  & .portal-lesson-actions :is(button,a) { min-height: 0; }
  & .portal-account { grid-template-columns: minmax(0,1fr); grid-template-rows: repeat(2,minmax(min-content,1fr)); }
  & .portal-account-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  & .portal-yki { min-height: 0; }
  & .portal-success h2 { font-size: 46px; }

  & .admin-stats { grid-template-columns: repeat(4,minmax(0,1fr)); }
  & .admin-teaching-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  & .admin-student-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  & .admin-lesson-row { grid-template-columns: 56px minmax(0,1fr) auto; }
  & .admin-lesson-row > .admin-actions { grid-column: auto; justify-content: flex-end; }
  & .admin-outcomes { grid-column: auto; justify-content: flex-end; }
  & .admin-week-grid { column-gap: 16px; }
  & .admin-login .admin-form { gap: 18px; }
  & .admin-login input { padding: 10px 0 12px; }
  & .admin-login h2 { margin-bottom: 24px; }

  & :is(.course-intro, .course-section-header, .course-update, .course-enrol) {
    grid-template-columns: repeat(2,minmax(0,1fr)); gap: 64px;
  }
  & .course-skill-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  & .course-summary { padding: 52px; }
  & #course-view .course-summary h3 { font-size: 32px; }
  & #course-view h2 { font-size: 48px; }
  & #course-view .course-skill-grid h3 { font-size: 28px; }

  /* Native dialogs stay outside the page transform, with their own measured
     scale so long edit forms remain fully accessible within the viewport. */
  & > dialog[open] {
    position: fixed; inset: 50% auto auto 50%; margin: 0;
    max-width: none; max-height: none; overflow: visible;
    transform: translate(-50%,-50%) scale(var(--desktop-dialog-scale, var(--desktop-page-scale)));
    transform-origin: center;
  }
  & > .portal-dialog { width: 510px; }
  & > .admin-dialog { width: 720px; }
}

html.desktop-page-fitted body.workspace-page > .contact-footer { margin-top: 0; }