/*
 * Academy layout contract.
 *
 * Route styles own their visual identity. This final shared layer owns the
 * container tiers, major grid rhythm and semantic type scale so moving from
 * one Academy destination to another never changes the page geometry.
 */

body[data-surface="academy"]:not(.immersive-game-active) #app-shell > .page:not(.onboarding-page) {
  width: min(var(--academy-content-wide), calc(100% - (2 * var(--academy-gutter))));
  margin-inline: auto;
  padding: var(--academy-page-padding) 0 calc(var(--academy-page-padding) + var(--academy-space-5));
}

body[data-surface="academy"]:not(.immersive-game-active) :is(
  .dashboard-v3,
  .learning-v2,
  .learning-v2-message,
  .games-v2,
  .games-v2-message,
  .classes-v2,
  .teaching-v2,
  .assignments-v1,
  .assignments-v2-composer
) {
  width: 100%;
  max-width: var(--academy-content-wide);
  margin-inline: auto;
  padding-top: 0;
}

body[data-surface="academy"]:not(.immersive-game-active) :is(
  .practice-v2,
  .practice-v2-message,
  .progress-v2,
  .profile-v2,
  .lesson-engine.lesson-v2
) {
  width: 100%;
  max-width: var(--academy-content-standard);
  margin-inline: auto;
  padding-top: 0;
}

body[data-surface="academy"]:not(.immersive-game-active) .lesson-v2 .lesson-engine-flow {
  width: 100%;
  max-width: var(--academy-content-reading);
  margin-inline: auto;
}

body[data-surface="academy"]:not(.immersive-game-active) :is(
  .dashboard-v3-metrics,
  .dashboard-v3-workspace,
  .dashboard-v3-plan-grid,
  .dashboard-v3-tool-grid,
  .learning-v2-level-grid,
  .learning-v2-unit-grid,
  .practice-v2-skill-grid,
  .practice-v2-level-grid,
  .practice-v2-unit-grid,
  .games-v2-grid,
  .classes-v2-grid,
  .assignments-v1-grid,
  .assignments-v1-detail-grid,
  .progress-v2-summary,
  .progress-v2-layout,
  .profile-v2-layout
) {
  column-gap: var(--academy-grid-gap);
  row-gap: var(--academy-grid-gap);
}

body[data-surface="academy"]:not(.immersive-game-active) #app-shell > .page:not(.onboarding-page) :is(h1, h2, h3, h4) {
  margin-top: 0;
  font-family: var(--academy-font-sans);
  font-weight: 800;
  letter-spacing: var(--academy-tracking-heading);
  line-height: var(--academy-leading-heading);
}

body[data-surface="academy"]:not(.immersive-game-active) #app-shell > .page:not(.onboarding-page) h1 {
  font-size: var(--academy-type-h1);
}

body[data-surface="academy"]:not(.immersive-game-active) #app-shell > .page:not(.onboarding-page) h2 {
  font-size: var(--academy-type-h2);
}

body[data-surface="academy"]:not(.immersive-game-active) #app-shell > .page:not(.onboarding-page) h3 {
  font-size: var(--academy-type-h3);
}

body[data-surface="academy"]:not(.immersive-game-active) #app-shell > .page:not(.onboarding-page) h4 {
  font-size: var(--academy-type-body);
}

body[data-surface="academy"]:not(.immersive-game-active) #app-shell > .page:not(.onboarding-page) :is(
  .dashboard-v3-hero-copy,
  .learning-v2-hero,
  .practice-v2-hero,
  .games-v2-hero,
  .classes-v2-hero,
  .teaching-v2-hero,
  .classes-v2-detail-hero,
  .progress-v2-hero,
  .profile-v2-hero,
  .assignments-v1-detail-hero
) :is(h1, h2) {
  font-size: var(--academy-type-h1);
}

body[data-surface="academy"]:not(.immersive-game-active) :is(
  .section-heading,
  .dashboard-v3-hero-copy,
  .learning-v2-hero-copy,
  .practice-v2-hero-copy,
  .games-v2-hero-copy,
  .classes-v2-hero > div,
  .teaching-v2-hero > div,
  .classes-v2-detail-hero > div,
  .progress-v2-hero-content,
  .profile-v2-hero-copy,
  .assignments-v1-detail-hero > div
) > p:not(.eyebrow):not([class*="kicker"]) {
  max-width: var(--academy-measure);
  font-size: var(--academy-type-body);
  line-height: var(--academy-leading-body);
}

body[data-surface="academy"]:not(.immersive-game-active) :is(
  .eyebrow,
  .dashboard-kicker,
  .dashboard-v3-role-label,
  .learning-v2-kicker,
  .learning-v2-unit-number,
  .learning-v2-level-code,
  .practice-v2-kicker,
  .practice-v2-card-meta,
  .practice-v2-level-code,
  .practice-v2-unit-number,
  .games-v2-kicker,
  .games-v2-category,
  .classes-v2-kicker,
  .assignments-v1-kicker,
  .progress-v2-kicker,
  .progress-v2-section-kicker,
  .profile-v2-kicker
) {
  font-size: var(--academy-type-label);
  letter-spacing: 0.09em;
  line-height: 1.35;
}

body[data-surface="academy"]:not(.immersive-game-active) :is(
  .dashboard-v3-section-head,
  .dashboard-v3-panel-head,
  .learning-v2-section-heading,
  .practice-v2-section-heading,
  .games-v2-section-heading,
  .classes-v2-section-heading,
  .progress-v2-panel-heading
) {
  margin-bottom: var(--academy-space-4);
}

@media (max-width: 900px) {
  body[data-surface="academy"]:not(.immersive-game-active) :is(
    .dashboard-v3-workspace,
    .classes-v2-grid,
    .assignments-v1-detail-grid,
    .progress-v2-layout,
    .profile-v2-layout
  ) {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  body[data-surface="academy"]:not(.immersive-game-active) #app-shell > .page:not(.onboarding-page) {
    width: min(100% - 24px, var(--academy-content-wide));
    padding-top: var(--academy-space-5);
  }

  body[data-surface="academy"]:not(.immersive-game-active) :is(
    .dashboard-v3-metrics,
    .learning-v2-level-grid,
    .practice-v2-level-grid,
    .practice-v2-unit-grid,
    .games-v2-grid,
    .assignments-v1-grid,
    .progress-v2-summary
  ) {
    grid-template-columns: minmax(0, 1fr);
  }
}