/*
 * V283 — Practice Lab tablet reflow.
 *
 * V242 assigns the named areas "answer learning". Earlier tablet guards
 * changed only grid-template-columns, leaving the two named areas on two
 * implicit columns. iPad Safari desktop mode then gave the learning column its
 * min-content width and squeezed the answer/paper into a narrow vertical strip.
 */

@media screen and (max-width: 1450px) {
  body.app-shell.future-ui.mnv-future-ui.page-practice_lab #main-content
    :is(
      .practice-shell,
      .practice-question,
      .practice-unified-workspace,
      .practice-unified-answer,
      .practice-unified-learning,
      .practice-question-head,
      .practice-answer-area,
      .handwriting-workspace,
      .handwriting-paper,
      .handwriting-problem-print,
      .handwriting-canvas-wrap,
      .handwriting-zoom-tools,
      .practice-hints,
      .practice-confidence,
      .practice-study-dock
    ) {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.app-shell.future-ui.mnv-future-ui.page-practice_lab #main-content
    :is(.practice-unified-answer, .practice-unified-learning) {
    width: 100% !important;
  }

  body.app-shell.future-ui.mnv-future-ui.page-practice_lab #main-content
    .handwriting-problem-print :is(strong, p, span),
  body.app-shell.future-ui.mnv-future-ui.page-practice_lab #main-content
    .practice-question-head :is(h2, p) {
    min-width: 0 !important;
    max-width: 100% !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  body.app-shell.future-ui.mnv-future-ui.page-practice_lab #main-content
    :is(.handwriting-toolbar, .handwriting-zoom-tools, .practice-confidence) {
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  body.app-shell.future-ui.mnv-future-ui.page-practice_lab #main-content
    .practice-study-dock {
    left: auto !important;
    right: auto !important;
  }
}

/* iPad landscape and iPadOS "desktop website" widths. The answer keeps the
 * larger track, while the learning panel remains visible without forcing an
 * implicit overflow column. */
@media screen and (min-width: 901px) and (max-width: 1450px) {
  /* MyPage used to release only the declared columns at tablet widths. Its
   * direct children could then keep an earlier grid position, leaving the
   * menu as a narrow sliver and pushing the dashboard beyond the right edge.
   * Every top-level dashboard region now owns the same real column. */
  body.app-shell.future-ui.mnv-future-ui.shell-learner.page-mypage
    #main-content .dash-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  body.app-shell.future-ui.mnv-future-ui.shell-learner.page-mypage
    #main-content .dash-layout > :is(.desktop-dash-nav, .mobile-mypage-menu, div, .dash-side) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.app-shell.future-ui.mnv-future-ui.shell-learner.page-mypage
    #main-content .desktop-dash-nav {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: max-content !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.app-shell.future-ui.mnv-future-ui.shell-learner.page-mypage
    #main-content .dash-side {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.app-shell.future-ui.mnv-future-ui.shell-learner.page-mypage
    #main-content :is(
      .dash-greet,
      .plan-chip-card,
      .today-learning-card,
      .today-learning-copy,
      .today-learning-metrics,
      .stat-cards,
      .stat-card,
      .next-card,
      .next-body,
      .next-actions,
      .route-cards,
      .route-card-s,
      .pricing-teaser,
      .side-card
    ) {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.app-shell.future-ui.mnv-future-ui.page-practice_lab #main-content
    .practice-unified-workspace {
    grid-template-columns: minmax(0, 1.9fr) minmax(265px, .85fr) !important;
    grid-template-areas: "answer learning" !important;
    gap: 14px !important;
    width: 100% !important;
    overflow: visible !important;
  }

  body.app-shell.future-ui.mnv-future-ui.page-practice_lab #main-content
    .practice-unified-answer {
    grid-area: answer !important;
  }

  body.app-shell.future-ui.mnv-future-ui.page-practice_lab #main-content
    .practice-unified-learning {
    grid-area: learning !important;
    position: sticky !important;
    top: 16px !important;
  }

  body.app-shell.future-ui.mnv-future-ui.page-practice_lab #main-content
    .practice-question-head {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
  }

  body.app-shell.future-ui.mnv-future-ui.page-practice_lab #main-content
    .practice-question-badges {
    min-width: 0 !important;
    max-width: 12rem !important;
  }

  body.app-shell.future-ui.mnv-future-ui.page-practice_lab #main-content
    .practice-answer-contract {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.app-shell.future-ui.mnv-future-ui.page-practice_lab #main-content
    .handwriting-canvas-wrap[data-canvas-viewport] {
    height: clamp(430px, 56dvh, 610px) !important;
  }

  body.app-shell.future-ui.mnv-future-ui.page-practice_lab #main-content
    .practice-study-dock .practice-submit {
    white-space: normal !important;
  }

  /* Route cards keep three genuine tracks on iPad. Each card's thumbnail and
   * copy use one internal track, preventing the old 260px thumbnail minimum
   * from squeezing the title/actions into a one-character strip. */
  body.app-shell.future-ui.mnv-future-ui:is(.page-route, .page-route_preview)
    #main-content .route-timeline {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-columns: auto !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  body.app-shell.future-ui.mnv-future-ui:is(.page-route, .page-route_preview)
    #main-content :is(.route-step, .video-card, .video-card-main, .video-thumb, .video-body) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.app-shell.future-ui.mnv-future-ui:is(.page-route, .page-route_preview)
    #main-content .video-card-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "thumbnail"
      "copy" !important;
    height: 100% !important;
  }

  body.app-shell.future-ui.mnv-future-ui:is(.page-route, .page-route_preview)
    #main-content .video-thumb {
    grid-area: thumbnail !important;
  }

  body.app-shell.future-ui.mnv-future-ui:is(.page-route, .page-route_preview)
    #main-content .video-body {
    grid-area: copy !important;
    min-height: 0 !important;
  }

  body.app-shell.future-ui.mnv-future-ui:is(.page-route, .page-route_preview)
    #main-content .video-card :is(h2, h3, p, b, strong, span, small, a, button) {
    min-width: 0 !important;
    max-width: 100% !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
  }
}

/* iPad drawer input contract. V269 repaired the same iOS hit-testing problem
 * for phones only. Tablet Safari still inherited touch-action:none on the
 * entire body, while the scrim and drawer lived in competing stacking
 * contexts. Keep the document locked, but return pan/tap ownership to the
 * drawer and place it unambiguously above its scrim. */
@media screen and (max-width: 1180px) {
  html.mobile-nav-open,
  html.mobile-nav-open body.mobile-nav-open,
  body.app-shell.future-ui.mnv-future-ui.mobile-nav-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: auto !important;
  }

  body.app-shell.future-ui.mnv-future-ui.mobile-nav-open .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 5000 !important;
    isolation: isolate !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body.app-shell.future-ui.mnv-future-ui.mobile-nav-open .site-header::before,
  body.app-shell.future-ui.mnv-future-ui.mobile-nav-open .site-header::after,
  body.app-shell.future-ui.mnv-future-ui.mobile-nav-open .site-header-inner::before,
  body.app-shell.future-ui.mnv-future-ui.mobile-nav-open .site-header-inner::after {
    pointer-events: none !important;
  }

  body.app-shell.future-ui.mnv-future-ui .nav-scrim {
    z-index: 4900 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body.app-shell.future-ui.mnv-future-ui .site-header .site-nav-area {
    position: fixed !important;
    z-index: 5100 !important;
    top: var(--site-header-bottom, calc(64px + env(safe-area-inset-top, 0px))) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    display: flex !important;
    width: min(62vw, 430px) !important;
    min-width: min(82vw, 340px) !important;
    max-width: 100vw !important;
    height: auto !important;
    max-height: calc(100dvh - var(--site-header-bottom, 64px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    contain: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  body.app-shell.future-ui.mnv-future-ui .site-header .site-nav-area.open,
  body.app-shell.future-ui.mnv-future-ui .site-header .site-nav-area[aria-hidden="false"] {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) !important;
  }

  body.app-shell.future-ui.mnv-future-ui .site-header .site-nav-area.open *,
  body.app-shell.future-ui.mnv-future-ui .site-header .site-nav-area[aria-hidden="false"] * {
    pointer-events: auto !important;
  }

  body.app-shell.future-ui.mnv-future-ui .site-header .site-nav-area
    :is(.nav-drawer-close, .site-nav a, .site-nav button, .nav-actions a, .nav-actions button) {
    position: relative !important;
    z-index: 1 !important;
    touch-action: manipulation !important;
  }
}

@media screen and (max-width: 680px) {
  body.app-shell.future-ui.mnv-future-ui .site-header .site-nav-area {
    width: min(100vw, 430px) !important;
    min-width: 0 !important;
  }
}

/* Portrait tablets and phones intentionally use one track. Both the column
 * list and the named areas are reset together so no implicit second column can
 * reappear. The learning context stays before the answer at these widths. */
@media screen and (max-width: 900px) {
  body.app-shell.future-ui.mnv-future-ui.page-practice_lab #main-content
    .practice-unified-workspace {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "learning"
      "answer" !important;
    width: 100% !important;
  }

  body.app-shell.future-ui.mnv-future-ui.page-practice_lab #main-content
    .practice-unified-learning {
    grid-area: learning !important;
    position: static !important;
  }

  body.app-shell.future-ui.mnv-future-ui.page-practice_lab #main-content
    .practice-unified-answer {
    grid-area: answer !important;
  }

  body.app-shell.future-ui.mnv-future-ui:is(.page-route, .page-route_preview)
    #main-content .route-timeline {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-columns: auto !important;
    width: 100% !important;
    overflow: visible !important;
  }

  body.app-shell.future-ui.mnv-future-ui:is(.page-route, .page-route_preview)
    #main-content :is(.route-step, .video-card, .video-card-main, .video-thumb, .video-body) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.app-shell.future-ui.mnv-future-ui:is(.page-route, .page-route_preview)
    #main-content .video-card-main {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media screen and (max-width: 680px) {
  body.app-shell.future-ui.mnv-future-ui.page-practice_lab #main-content
    .practice-question-head,
  body.app-shell.future-ui.mnv-future-ui.page-practice_lab #main-content
    .practice-answer-contract {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-shell.future-ui.mnv-future-ui.page-practice_lab #main-content
    .practice-question-badges {
    max-width: 100% !important;
  }
}

/* Fullscreen player chrome must not inherit a narrow grid track or a vertical
 * text rule after iPad rotation.  Fixed positioning uses the fullscreen
 * viewport itself, while the safe-area insets keep the action clear of the
 * camera/home-indicator edges. */
.unified-player-stage:fullscreen .unified-fullscreen-exit,
.unified-player-stage:-webkit-full-screen .unified-fullscreen-exit,
.unified-player-stage.is-fallback-fullscreen .unified-fullscreen-exit {
  position: fixed !important;
  z-index: 2147483647 !important;
  top: max(14px, env(safe-area-inset-top)) !important;
  right: max(14px, env(safe-area-inset-right)) !important;
  bottom: auto !important;
  left: auto !important;
  display: inline-flex !important;
  width: auto !important;
  min-width: 94px !important;
  max-width: calc(100vw - 28px) !important;
  height: auto !important;
  min-height: 48px !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 10px 16px !important;
  overflow: visible !important;
  border-radius: 999px !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;
  line-height: 1 !important;
  touch-action: manipulation !important;
}

.unified-player-stage:fullscreen .unified-fullscreen-exit span,
.unified-player-stage:-webkit-full-screen .unified-fullscreen-exit span,
.unified-player-stage.is-fallback-fullscreen .unified-fullscreen-exit span {
  display: inline !important;
  width: auto !important;
  min-width: 0 !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  transform: none !important;
}

/* Mobile MyPage: every light menu card owns an explicit dark text/icon pair.
 * The support launchers return to document flow on this long menu so they can
 * never cover either a menu card or the persistent bottom navigation. */
@media screen and (max-width: 780px) {
  body.app-shell.future-ui.mnv-future-ui.shell-learner.page-mypage
    .mobile-mypage-menu-grid > a {
    color: #17324f !important;
    -webkit-text-fill-color: #17324f !important;
    text-shadow: none !important;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
  }

  body.app-shell.future-ui.mnv-future-ui.shell-learner.page-mypage
    .mobile-mypage-menu-grid > a > span:not(.mobile-mypage-menu-icon) {
    display: block !important;
    color: #17324f !important;
    -webkit-text-fill-color: #17324f !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1.4 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.app-shell.future-ui.mnv-future-ui.shell-learner.page-mypage
    .mobile-mypage-menu-grid > a .mobile-mypage-menu-icon {
    color: #155fca !important;
    -webkit-text-fill-color: #155fca !important;
    background: #e3efff !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.app-shell.future-ui.mnv-future-ui.shell-learner.page-mypage
    .mobile-mypage-menu-grid > a .mobile-mypage-menu-icon svg {
    color: inherit !important;
    stroke: currentColor !important;
    opacity: 1 !important;
  }

  body.app-shell.future-ui.mnv-future-ui.shell-learner.page-mypage
    .mobile-mypage-menu-grid > a.is-active {
    color: #102d4a !important;
    -webkit-text-fill-color: #102d4a !important;
  }

  body.app-shell.future-ui.mnv-future-ui.shell-learner.page-mypage
    .mobile-mypage-menu-grid > a.is-active > span:not(.mobile-mypage-menu-icon) {
    color: #102d4a !important;
    -webkit-text-fill-color: #102d4a !important;
  }

  body.app-shell.future-ui.mnv-future-ui.shell-learner.page-mypage
    .mobile-mypage-menu-grid > a.is-danger,
  body.app-shell.future-ui.mnv-future-ui.shell-learner.page-mypage
    .mobile-mypage-menu-grid > a.is-danger > span:not(.mobile-mypage-menu-icon) {
    color: #8a2636 !important;
    -webkit-text-fill-color: #8a2636 !important;
  }

  body.app-shell.future-ui.mnv-future-ui.shell-learner.page-mypage
    .mobile-mypage-menu-grid > a.is-search,
  body.app-shell.future-ui.mnv-future-ui.shell-learner.page-mypage
    .mobile-mypage-menu-grid > a.is-search > span:not(.mobile-mypage-menu-icon) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  body.app-shell.future-ui.mnv-future-ui.shell-learner.page-mypage
    .mobile-mypage-menu-grid > a.is-search .mobile-mypage-menu-icon {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: rgba(255, 255, 255, .14) !important;
  }

  body.app-shell.future-ui.mnv-future-ui:is(.shell-learner, .shell-family)
    .future-utility-dock {
    position: relative !important;
    inset: auto !important;
    z-index: 20 !important;
    display: flex !important;
    width: min(calc(100% - 28px), 680px) !important;
    max-width: calc(100% - 28px) !important;
    margin: 16px auto calc(104px + env(safe-area-inset-bottom, 0px)) !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: none !important;
  }

  body.app-shell.future-ui.mnv-future-ui:is(.shell-learner, .shell-family)
    .future-utility-dock > :is(.luxury-command-fab, .guide-fab, .qr-login-fab, .child-read-aloud) {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    pointer-events: auto !important;
  }

  /* The family selector remains horizontally scrollable, but no longer stays
   * over the document while the guardian reads or edits a child card. */
  body.app-shell.future-ui.mnv-future-ui.shell-family .mf-family-switcher {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    z-index: 20 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 16px 0 22px !important;
    border-inline: 1px solid var(--mnv-v246-line, rgba(104, 190, 255, .3)) !important;
    border-radius: 18px !important;
    scroll-margin-top: 16px !important;
  }

  /* Light islands inside the cosmic family/learner shell require their own
   * dark ink. Inheriting the shell's inverse text made these blocks appear
   * blank in iPhone Safari. */
  body.app-shell.future-ui.mnv-future-ui.shell-learner.page-manabi_karte
    .karte-hero,
  body.app-shell.future-ui.mnv-future-ui.shell-family
    :is(.family-outcome-summary, .family-outcome-grid > article, .family-print-learning) {
    border-color: #c6d8e7 !important;
    background: linear-gradient(145deg, #ffffff, #f1f8ff) !important;
    color: #17324f !important;
    -webkit-text-fill-color: #17324f !important;
    text-shadow: none !important;
    opacity: 1 !important;
  }

  body.app-shell.future-ui.mnv-future-ui.shell-learner.page-manabi_karte
    .karte-hero :is(h1, h2, h3, h4, p, strong, span, small),
  body.app-shell.future-ui.mnv-future-ui.shell-family
    :is(.family-outcome-summary, .family-outcome-grid > article, .family-print-learning)
    :is(h1, h2, h3, h4, p, strong, span, small, dt, dd) {
    color: #17324f !important;
    -webkit-text-fill-color: #17324f !important;
    text-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.app-shell.future-ui.mnv-future-ui.shell-learner.page-manabi_karte
    .karte-hero .eyebrow,
  body.app-shell.future-ui.mnv-future-ui.shell-family
    :is(.family-outcome-summary, .family-print-learning) .eyebrow {
    color: #43cce6 !important;
    -webkit-text-fill-color: #43cce6 !important;
  }

  body.app-shell.future-ui.mnv-future-ui.shell-family .family-security-note {
    border: 1px solid #9fd6c5 !important;
    background: #eaf8f3 !important;
    color: #145c4b !important;
    -webkit-text-fill-color: #145c4b !important;
    text-shadow: none !important;
    opacity: 1 !important;
  }

  body.app-shell.future-ui.mnv-future-ui.shell-family
    .family-security-note :is(span, strong, small, p, svg) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    stroke: currentColor !important;
    opacity: 1 !important;
  }

  body.app-shell.future-ui.mnv-future-ui.shell-family
    .guardian-progress-ring > div :is(strong, small, span) {
    color: #17324f !important;
    -webkit-text-fill-color: #17324f !important;
    text-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}