/* MathsPilot learner shell: shared sizing, navigation, and page clearance tokens. */
:root {
  --student-mobile-nav-height: 82px;
  --layer-modal-scrim: 20;
  --layer-modal-content: 21;
  --layer-mobile-nav: 40;
}

html {
  scrollbar-gutter: stable;
  scroll-padding-bottom: var(--student-mobile-bottom-clearance, 0px);
}

body.portal-student {
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --header-height: 72px;
  --page-max-width: 1480px;
  --page-max-width-large: 2920px;
  --page-content-grid-large: minmax(0, 1.24fr) minmax(520px, .62fr);
  --page-padding-x: clamp(16px, 2.4vw, 40px);
  --page-bottom-gap: clamp(14px, 2.4vw, 24px);
  --page-padding-bottom: var(--page-bottom-gap);
  --compact-gap: clamp(8px, 1vw, 14px);
  --modal-footer-height: 72px;
  --bottom-nav-height: 82px;
  --student-mobile-nav-height: var(--bottom-nav-height);
  --student-mobile-nav-gap: var(--page-bottom-gap);
  --student-mobile-bottom-clearance: calc(var(--bottom-nav-height) + var(--safe-bottom) + var(--page-bottom-gap));
  --sidebar-width: clamp(220px, 12vw, 224px);
  --sidebar-rail-width: 76px;
  --game-board-size: min(100%, 62dvh);
  --student-nav-width: var(--sidebar-width);
  --student-shell-gap: clamp(14px, 1.4vw, 22px);
  --site-gutter: var(--page-padding-x);
  --site-max: var(--page-max-width);
  --site-width: min(var(--page-max-width), calc(100vw - var(--page-padding-x) * 2));
  --student-dashboard-content-max: none;
}

@media (min-width: 2200px) {
  body.portal-student {
    --page-max-width: clamp(1960px, 74vw, var(--page-max-width-large));
    --page-padding-x: clamp(56px, 3vw, 112px);
    --student-shell-gap: clamp(22px, 1.4vw, 36px);
    --sidebar-width: 224px;
    --student-nav-width: var(--sidebar-width);
  }

  body.portal-student:not(.runner-fullscreen-mode) .student-shell:has(> .student-side-nav) {
    gap: var(--student-shell-gap);
  }

  body.portal-student .student-home-game-stage {
    grid-template-columns: var(--page-content-grid-large);
    align-items: start;
  }

  body.portal-student :is(.student-game-hub-stack--with-context, .student-competition-hub) {
    grid-template-columns: minmax(0, 1.18fr) minmax(520px, .62fr);
    align-items: start;
  }

  body.portal-student :is(.student-home-kid-actions, .student-competition-round-grid, .student-sats-paper-list, .student-reward-grid) {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }

  body.portal-student :is(.student-progress-card-grid, .student-history-grid, .student-bookwork-grid) {
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  }
}

body.portal-student .button-row--dashboard-sync {
  margin-top: 10px;
}

body.portal-student .question-rendering-cross-section {
  width: 100%;
  display: grid;
  gap: clamp(14px, 1.6vw, 22px);
}

body.portal-student [data-question-rendering-cross-section-mount] {
  width: var(--site-width);
  max-width: var(--site-width);
  margin-inline: auto;
  padding-block: clamp(16px, 2vw, 28px) 40px;
}

body.portal-student .question-rendering-cross-section__head {
  display: grid;
  gap: 6px;
}

body.portal-student .question-rendering-cross-section__head h1 {
  margin: 0;
  color: var(--text-strong);
  font-size: clamp(2rem, 3.4vw, 3.35rem);
  line-height: 1.05;
}

body.portal-student .question-rendering-cross-section__head p {
  max-width: 72ch;
  margin: 0;
  color: var(--text-body);
}

body.portal-student .question-rendering-cross-section__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(12px, 1.3vw, 18px);
  align-items: start;
}

body.portal-student .question-rendering-cross-card {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: clamp(12px, 1.2vw, 16px);
  border: 1px solid var(--line-default);
  border-radius: 20px;
  background: color-mix(in srgb, var(--bg-panel) 92%, var(--brand-100) 8%);
  box-shadow: var(--shadow-sm);
  overflow: visible;
}

body.portal-student .question-rendering-cross-card__title {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

body.portal-student .question-rendering-cross-card__title h2 {
  min-width: 0;
  margin: 0;
  color: var(--text-strong);
  font-size: 1rem;
  line-height: 1.18;
}

body.portal-student .question-rendering-cross-card__title span {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 44%;
  padding: 4px 8px;
  border: 1px solid var(--line-default);
  border-radius: 999px;
  color: var(--text-body);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  white-space: normal;
}

body.portal-student .question-rendering-cross-card__prompt {
  min-height: 2.2em;
  margin: 0;
  color: var(--text-body);
  font-size: .88rem;
  line-height: 1.35;
}

body.portal-student .question-rendering-cross-card__visual {
  min-width: 0;
  min-height: clamp(190px, 24vw, 320px);
  display: grid;
  align-items: center;
  overflow: visible;
}

body.portal-student .question-rendering-cross-card--text-only .question-rendering-cross-card__visual {
  min-height: 96px;
}

body.portal-student .question-rendering-cross-card__visual :is(.visual-svg, .visual-svg--grid) {
  width: min(100%, 320px);
  max-width: 100%;
  min-height: clamp(180px, 48vw, 300px);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
}

body.portal-student .question-rendering-cross-card__visual .image-overlay {
  width: 100%;
  max-width: 100%;
}

body.portal-student .question-rendering-cross-card__visual .image-overlay-stack {
  max-height: none;
}

body.portal-student .question-rendering-cross-card__visual .image-overlay__image {
  width: 100%;
  max-height: clamp(190px, 28vw, 340px);
  object-fit: contain;
}

body.portal-student .question-rendering-cross-card__answer {
  min-width: 0;
}

body.portal-student .question-rendering-cross-card__answer :is(.runner-answer-field, .runner-answer-field input, .option-chip) {
  min-height: 44px;
}

@media (max-width: 760px) {
  body.portal-student .question-rendering-cross-section__grid {
    grid-template-columns: 1fr;
  }

  body.portal-student .question-rendering-cross-card {
    border-radius: 18px;
  }

  body.portal-student .question-rendering-cross-card__visual {
    min-height: clamp(180px, 56vw, 250px);
  }

  body.portal-student .question-rendering-cross-card__visual :is(.visual-svg, .visual-svg--grid) {
    width: min(100%, 286px);
    min-height: clamp(180px, 76vw, 286px);
  }
}

body:not(.runner-fullscreen-mode) .mp-topbar {
  background: transparent;
  backdrop-filter: none;
}

.mp-brand-lockup .mp-brand-lockup__image--dark {
  display: none;
}

html[data-appearance=dark] .mp-brand-lockup .mp-brand-lockup__image--light {
  display: none;
}

html[data-appearance=dark] .mp-brand-lockup .mp-brand-lockup__image--dark {
  display: block;
}

body.portal-student:not(.runner-fullscreen-mode) .student-shell:has(> .student-side-nav) {
  width: var(--site-width);
  max-width: var(--site-width);
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  grid-template-areas:
    "topbar topbar"
    "nav page";
  gap: var(--student-shell-gap);
  align-items: start;
  align-content: start;
  margin-inline: auto;
  padding-block: 0 32px;
}

body.portal-student:not(.runner-fullscreen-mode) .student-shell:has(> .student-side-nav) > .mp-topbar {
  grid-area: topbar;
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}

body.portal-student:not(.runner-fullscreen-mode) .student-shell:has(> .student-side-nav) > .mp-topbar .mp-topbar__inner {
  width: 100%;
  max-width: 100%;
}

body.portal-student:not(.runner-fullscreen-mode) .student-shell:has(> .student-side-nav) > .student-side-nav {
  grid-area: nav;
  width: var(--sidebar-width);
  max-width: var(--sidebar-width);
  min-width: 0;
}

body.portal-student:not(.runner-fullscreen-mode) .student-shell:has(> .student-side-nav) > .student-shell__body {
  grid-area: page;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding-inline: 0;
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
}

body.portal-student:not(.runner-fullscreen-mode) .student-shell:has(> .student-side-nav) > .student-shell__body > .student-page-content,
body.portal-student:not(.runner-fullscreen-mode) .student-shell:has(> .student-side-nav) > .student-shell__body:not(:has(> .student-page-content)) {
  width: 100%;
  max-width: none;
  min-width: 0;
}

body.portal-student:not(.runner-fullscreen-mode) .student-shell:has(> .student-side-nav) > .student-shell__body > .student-page-content,
body.portal-student:not(.runner-fullscreen-mode) .student-shell:has(> .student-side-nav) > .student-shell__body > :is(
  .student-home-page,
  .student-game-hub-page,
  .student-official-exams-page,
  .student-sats-page,
  .student-competition-page--v18-8-57
) {
  width: 100%;
  max-width: none;
  min-width: 0;
  grid-column: 1 / -1;
  justify-self: stretch;
}

body.portal-student:not(.runner-fullscreen-mode) .student-shell.student-nav-collapsed:has(> .student-side-nav) {
  grid-template-columns: var(--sidebar-rail-width) minmax(0, 1fr);
}

body.portal-student:not(.runner-fullscreen-mode) .student-shell.student-nav-collapsed > .student-side-nav,
body.portal-student:not(.runner-fullscreen-mode) .student-shell--rail > .student-side-nav {
  width: var(--sidebar-rail-width);
  max-width: var(--sidebar-rail-width);
  padding: 12px 8px;
  border-radius: 24px;
}

body.portal-student:not(.runner-fullscreen-mode) .student-shell.student-nav-collapsed > .student-side-nav :is(
  .student-side-nav__title,
  .student-side-nav__label,
  .student-side-nav__section-label,
  .student-side-nav__section-chevron
),
body.portal-student:not(.runner-fullscreen-mode) .student-shell--rail > .student-side-nav :is(
  .student-side-nav__title,
  .student-side-nav__label,
  .student-side-nav__section-label,
  .student-side-nav__section-chevron
) {
  display: none;
}

body.portal-student:not(.runner-fullscreen-mode) .student-shell.student-nav-collapsed > .student-side-nav :is(.student-side-nav__header, .student-side-nav__section-toggle-main),
body.portal-student:not(.runner-fullscreen-mode) .student-shell--rail > .student-side-nav :is(.student-side-nav__header, .student-side-nav__section-toggle-main) {
  justify-content: center;
}

body.portal-student:not(.runner-fullscreen-mode) .student-shell.student-nav-collapsed > .student-side-nav :is(.student-side-nav__link, .student-side-nav__section-toggle),
body.portal-student:not(.runner-fullscreen-mode) .student-shell--rail > .student-side-nav :is(.student-side-nav__link, .student-side-nav__section-toggle) {
  justify-content: center;
  padding-inline: 8px;
}

body.portal-student:not(.runner-fullscreen-mode) .student-side-nav__icon-wrap,
body.portal-student:not(.runner-fullscreen-mode) .student-side-nav__icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
}

body.portal-student:not(.runner-fullscreen-mode) .student-side-nav__toggle {
  inline-size: 44px;
  block-size: 44px;
  min-width: 44px;
  min-height: 44px;
  flex: 0 0 44px;
  margin-inline-start: auto;
  margin-inline-end: 0;
}

body.portal-student:not(.runner-fullscreen-mode) .student-shell.student-nav-collapsed > .student-side-nav .student-side-nav__toggle,
body.portal-student:not(.runner-fullscreen-mode) .student-shell--rail > .student-side-nav .student-side-nav__toggle {
  margin-inline: 0;
}

body.portal-student:not(.runner-fullscreen-mode) :is(
  .student-shell,
  .student-shell__body,
  .student-page-content,
  .student-card,
  .student-sats-custom-panel,
  .student-sudoku-game,
  .portal-puzzle-focus__surface
) {
  scroll-padding-bottom: var(--student-mobile-bottom-clearance);
}

@media (min-width: 961px) and (max-width: 1180px) and (orientation: landscape) {
  body.portal-student {
    --page-padding-x: clamp(14px, 2vw, 24px);
    --sidebar-width: var(--sidebar-rail-width);
    --student-nav-width: var(--sidebar-rail-width);
  }

  body.portal-student:not(.runner-fullscreen-mode) .student-shell:has(> .student-side-nav) {
    grid-template-columns: var(--sidebar-rail-width) minmax(0, 1fr);
    gap: 12px;
  }

  body.portal-student:not(.runner-fullscreen-mode) .student-shell:has(> .student-side-nav) > .student-side-nav {
    width: var(--sidebar-rail-width);
    max-width: var(--sidebar-rail-width);
    padding: 12px 8px;
    border-radius: 24px;
  }

  body.portal-student:not(.runner-fullscreen-mode) .student-shell:has(> .student-side-nav) > .student-side-nav :is(
    .student-side-nav__title,
    .student-side-nav__label,
    .student-side-nav__section-label,
    .student-side-nav__section-chevron
  ) {
    display: none;
  }

  body.portal-student:not(.runner-fullscreen-mode) .student-shell:has(> .student-side-nav) > .student-side-nav :is(.student-side-nav__header, .student-side-nav__section-toggle-main) {
    justify-content: center;
  }

  body.portal-student:not(.runner-fullscreen-mode) .student-shell:has(> .student-side-nav) > .student-side-nav :is(.student-side-nav__link, .student-side-nav__section-toggle) {
    justify-content: center;
    padding-inline: 8px;
  }
}

@media (max-width: 960px), (min-width: 961px) and (max-width: 1100px) and (orientation: portrait) {
  body.portal-student {
    --header-height: 56px;
    --bottom-nav-height: clamp(76px, 9.6dvh, 88px);
    --page-padding-x: clamp(12px, 4vw, 22px);
    --page-bottom-gap: clamp(14px, 4vw, 24px);
    --sidebar-width: 0px;
    --student-nav-width: 0px;
  }

  body.portal-student:not(.runner-fullscreen-mode) .mp-topbar--student-dashboard .mp-topbar__inner {
    min-height: calc(var(--header-height) + var(--safe-top));
    padding-block: max(6px, var(--safe-top)) 8px;
  }

  body.portal-student:not(.runner-fullscreen-mode) .mp-topbar--student-dashboard .mp-topbar__center--metrics {
    display: none;
  }

  body.portal-student:not(.runner-fullscreen-mode) .student-shell:has(> .student-side-nav) {
    width: var(--site-width);
    max-width: var(--site-width);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "topbar"
      "page";
    gap: 12px;
    padding-bottom: calc(var(--student-mobile-bottom-clearance) + 8px);
  }

  body.portal-student:not(.runner-fullscreen-mode) .student-shell:has(> .student-side-nav) > .student-side-nav {
    display: none;
  }

  body.portal-student:not(.runner-fullscreen-mode) .student-shell:has(> .student-side-nav) > .student-shell__body,
  body.portal-student:not(.runner-fullscreen-mode) .student-shell__body,
  body.portal-student:not(.runner-fullscreen-mode) .student-shell__body--with-nav,
  body.portal-student:not(.runner-fullscreen-mode) .student-page-content {
    width: 100%;
    max-width: none;
    padding-bottom: var(--student-mobile-bottom-clearance);
    scroll-padding-bottom: var(--student-mobile-bottom-clearance);
  }

  body.portal-student:not(.runner-fullscreen-mode) .student-mobile-nav {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--layer-mobile-nav);
    min-height: var(--bottom-nav-height);
    padding: 0 max(10px, env(safe-area-inset-left, 0px)) calc(10px + var(--safe-bottom));
  }

  body.portal-student:not(.runner-fullscreen-mode) .student-mobile-nav__bar {
    grid-template-columns: repeat(var(--student-mobile-nav-columns, 5), minmax(0, 1fr));
    max-width: min(720px, calc(100vw - 20px));
    margin-inline: auto;
  }

  body.portal-student:not(.runner-fullscreen-mode) .student-mobile-nav__link {
    min-height: clamp(54px, 7.2dvh, 62px);
  }

  body.portal-student:not(.runner-fullscreen-mode) .student-mobile-nav__sheet {
    width: min(520px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
  }
}

@media (min-width: 1920px) {
  body.portal-student {
    --page-padding-x: clamp(32px, 3vw, 72px);
    --student-shell-gap: clamp(18px, 1.25vw, 28px);
  }
}

body.portal-student :is(.btn, button):is(:disabled, [disabled], [aria-disabled="true"]) {
  transform: none;
  cursor: not-allowed;
  opacity: 1;
}

body.portal-student .btn.primary:is(:disabled, [disabled], [aria-disabled="true"]),
body.portal-student button.btn.primary:is(:disabled, [disabled], [aria-disabled="true"]) {
  border-color: color-mix(in srgb, var(--line-default, rgba(55, 66, 99, 0.2)) 82%, transparent);
  background: color-mix(in srgb, var(--bg-panel-2, #f7f1e8) 88%, #ffffff 12%);
  color: color-mix(in srgb, var(--text-body, #48566d) 70%, #ffffff 30%);
  box-shadow: none;
}

body.portal-student .btn.primary:is(:disabled, [disabled], [aria-disabled="true"]):is(:hover, :focus-visible),
body.portal-student button.btn.primary:is(:disabled, [disabled], [aria-disabled="true"]):is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--line-default, rgba(55, 66, 99, 0.2)) 82%, transparent);
  background: color-mix(in srgb, var(--bg-panel-2, #f7f1e8) 88%, #ffffff 12%);
  color: color-mix(in srgb, var(--text-body, #48566d) 70%, #ffffff 30%);
  box-shadow: none;
}

html[data-appearance=dark] body.portal-student .btn.primary:is(:disabled, [disabled], [aria-disabled="true"]),
html[data-appearance=dark] body.portal-student button.btn.primary:is(:disabled, [disabled], [aria-disabled="true"]) {
  border-color: color-mix(in srgb, var(--line-default, rgba(188, 198, 230, 0.2)) 76%, transparent);
  background: color-mix(in srgb, var(--bg-panel, #202744) 86%, #000000 14%);
  color: color-mix(in srgb, var(--text-body, #c6cee8) 58%, var(--bg-panel, #202744) 42%);
}

body.portal-student :is(.learner-option-card, .game-option-card, .game-level-card, .portal-puzzle-variant-card, .student-sats-entry-card, .student-sats-paper-row) {
  position: relative;
}

body.portal-student :is(.learner-option-card, .game-option-card, .game-level-card, .portal-puzzle-variant-card, .student-sats-entry-card, .student-sats-paper-row):is(.is-selected, .is-active, [aria-pressed="true"]) {
  border-color: color-mix(in srgb, var(--brand-600, #5d7ff4) 72%, var(--line-default, rgba(55, 66, 99, 0.2)) 28%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--brand-600, #5d7ff4) 42%, transparent),
    0 14px 30px rgba(31, 47, 82, 0.1);
}

body.portal-student :is(.learner-option-card, .game-option-card, .game-level-card, .portal-puzzle-variant-card, .student-sats-entry-card, .student-sats-paper-row):is(.is-selected, .is-active, [aria-pressed="true"])::after {
  content: "Selected";
  position: absolute;
  top: 10px;
  right: 10px;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-600, #5d7ff4) 16%, #ffffff 84%);
  color: var(--brand-800, #24365b);
  font-size: 0.68rem;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0;
  pointer-events: none;
}

body.portal-student :is(.learner-option-card, .game-option-card, .game-level-card, .portal-puzzle-variant-card, .student-sats-entry-card, .student-sats-paper-row):is(:disabled, [disabled], [aria-disabled="true"])::after {
  content: none;
}

html[data-appearance=dark] body.portal-student :is(.learner-option-card, .game-option-card, .game-level-card, .portal-puzzle-variant-card, .student-sats-entry-card, .student-sats-paper-row):is(.is-selected, .is-active, [aria-pressed="true"])::after {
  background: color-mix(in srgb, var(--brand-300, #cbd7ff) 20%, var(--bg-panel-2, #253055) 80%);
  color: var(--text-strong, #f4f6ff);
}

body.portal-student .learner-setup :is(.learner-option-card, .student-sats-custom-choice-button, .student-sats-custom-goal-card, .student-sats-custom-status-card, .student-sats-custom-marks-card, .student-sats-custom-topic-card, .student-sats-custom-year-card, .student-sats-custom-paper-card, .student-sats-custom-count-card):is(.is-selected, .is-active, [aria-pressed="true"]):not(:disabled):not([disabled]):not([aria-disabled="true"])::after {
  content: "\2713";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--brand-600, #5d7ff4) 28%, #ffffff 72%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-600, #5d7ff4) 88%, #ffffff 12%);
  color: #ffffff;
  font-size: 0.8rem;
  line-height: 1;
  font-weight: 900;
  pointer-events: none;
  box-shadow: 0 8px 18px rgba(31, 47, 82, 0.12);
}

html[data-appearance=dark] body.portal-student .learner-setup :is(.learner-option-card, .student-sats-custom-choice-button, .student-sats-custom-goal-card, .student-sats-custom-status-card, .student-sats-custom-marks-card, .student-sats-custom-topic-card, .student-sats-custom-year-card, .student-sats-custom-paper-card, .student-sats-custom-count-card):is(.is-selected, .is-active, [aria-pressed="true"]):not(:disabled):not([disabled]):not([aria-disabled="true"])::after {
  border-color: color-mix(in srgb, var(--student-theme-primary, var(--brand-500, #7fa3ff)) 48%, rgba(255, 255, 255, 0.24) 52%);
  background: color-mix(in srgb, var(--student-theme-primary, var(--brand-500, #7fa3ff)) 78%, #ffffff 22%);
  color: #111827;
}