/*
 * V268 mobile reflow repair.
 *
 * The application behavior remains owned by the existing V267 PHP and
 * JavaScript.  This final screen-only layer releases desktop minimum widths
 * on phones and gives every interactive area a single, predictable flow.
 */

@media screen and (max-width: 760px) {
  /* A compact square menu control replaces the tall MENU capsule. */
  body.app-shell.future-ui.mnv-future-ui .site-header .site-header-inner {
    min-height: 64px !important;
    align-items: center !important;
    gap: 10px !important;
  }

  body.app-shell.future-ui.mnv-future-ui .site-header .brand {
    min-width: 0 !important;
    max-width: calc(100% - 58px) !important;
  }

  body.app-shell.future-ui.mnv-future-ui .site-header .brand-text {
    min-width: 0 !important;
  }

  body.app-shell.future-ui.mnv-future-ui .site-header .nav-toggle {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    place-content: center !important;
    border: 1px solid rgba(105, 202, 255, .54) !important;
    border-radius: 14px !important;
    background: #0a2b59 !important;
    color: #ffffff !important;
    writing-mode: horizontal-tb !important;
    overflow: hidden !important;
    box-shadow: 0 8px 22px rgba(0, 4, 25, .28) !important;
  }

  body.app-shell.future-ui.mnv-future-ui .site-header .nav-toggle > span {
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    margin: 2.5px auto !important;
    border-radius: 999px !important;
    background: #ffffff !important;
  }

  body.app-shell.future-ui.mnv-future-ui .site-header .nav-toggle > .mnv-v243-nav-label {
    display: none !important;
  }

  /* Public organization pages: all five destinations remain visible. */
  body.app-shell.future-ui.mnv-future-ui.public-app.shell-public
    #main-content .org-public-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px 0 18px !important;
    padding: 8px !important;
    overflow: visible !important;
    border-radius: 18px !important;
  }

  body.app-shell.future-ui.mnv-future-ui.public-app.shell-public
    #main-content .org-public-nav > a {
    display: flex !important;
    min-width: 0 !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 7px !important;
    border-radius: 13px !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.3 !important;
  }

  body.app-shell.future-ui.mnv-future-ui.public-app.shell-public
    #main-content .org-public-nav > a:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }

  body.app-shell.future-ui.mnv-future-ui.public-app.shell-public
    #main-content .org-public-hero {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  body.app-shell.future-ui.mnv-future-ui.public-app.shell-public
    #main-content .org-public-hero :is(.hero-copy, .panel, .hero-actions) {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.app-shell.future-ui.mnv-future-ui.public-app.shell-public
    #main-content .org-public-hero .hero-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 8px !important;
  }

  body.app-shell.future-ui.mnv-future-ui.public-app.shell-public
    #main-content .org-public-hero .hero-actions :is(.button, a, button) {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    white-space: normal !important;
    text-align: center !important;
  }

  /* The four learning stages become a complete 2 x 2 map on phones. */
  body.app-shell.future-ui.mnv-future-ui:is(.page-study_session, .page-watch)
    #main-content .mf-journey-rail {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px !important;
    overflow: visible !important;
  }

  body.app-shell.future-ui.mnv-future-ui:is(.page-study_session, .page-watch)
    #main-content .mf-journey-rail > ol {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-width: 0 !important;
    width: 100% !important;
    gap: 8px !important;
    padding: 0 !important;
  }

  body.app-shell.future-ui.mnv-future-ui:is(.page-study_session, .page-watch)
    #main-content .mf-journey-rail li {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    min-width: 0 !important;
    min-height: 62px !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px !important;
    border: 1px solid rgba(105, 184, 245, .18) !important;
    border-radius: 14px !important;
  }

  body.app-shell.future-ui.mnv-future-ui:is(.page-study_session, .page-watch)
    #main-content .mf-journey-rail li::after {
    display: none !important;
    content: none !important;
  }

  body.app-shell.future-ui.mnv-future-ui:is(.page-study_session, .page-watch)
    #main-content .mf-journey-step-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
  }

  body.app-shell.future-ui.mnv-future-ui:is(.page-study_session, .page-watch)
    #main-content .mf-journey-step-copy {
    min-width: 0 !important;
  }

  body.app-shell.future-ui.mnv-future-ui:is(.page-study_session, .page-watch)
    #main-content .mf-journey-step-copy :is(strong, small) {
    display: block !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  body.app-shell.future-ui.mnv-future-ui:is(.page-study_session, .page-watch)
    #main-content .mf-journey-step-copy strong {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  body.app-shell.future-ui.mnv-future-ui:is(.page-study_session, .page-watch)
    #main-content .mf-journey-step-copy small {
    margin-top: 2px !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
  }

  /* Study pages use one reading column; no desktop side-card grid survives. */
  body.app-shell.future-ui.mnv-future-ui:is(.page-study_session, .page-watch)
    #main-content :is(.course-learning-page, .page-grid, .study-session-layout) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 16px !important;
  }

  body.app-shell.future-ui.mnv-future-ui:is(.page-study_session, .page-watch)
    #main-content :is(.study-session-main, .course-learning-aside, .aside-col, .study-session-side) {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.app-shell.future-ui.mnv-future-ui:is(.page-study_session, .page-watch)
    #main-content :is(.course-learning-aside, .aside-col, .study-session-side) {
    position: static !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  body.app-shell.future-ui.mnv-future-ui.page-study_session
    #main-content .course-watch-topline h1 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    font-size: clamp(24px, 7.2vw, 32px) !important;
    line-height: 1.2 !important;
  }

  body.app-shell.future-ui.mnv-future-ui.page-study_session
    #main-content .course-watch-topline .course-day-chip {
    width: fit-content !important;
    max-width: 100% !important;
  }

  body.app-shell.future-ui.mnv-future-ui.page-study_session
    #main-content .learning-mission-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Player title and external action stack instead of squeezing each other. */
  body.app-shell.future-ui.mnv-future-ui:is(.page-study_session, .page-watch)
    #main-content .unified-player-heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  body.app-shell.future-ui.mnv-future-ui:is(.page-study_session, .page-watch)
    #main-content .unified-player.study-session-player-card {
    padding-inline: 0 !important;
  }

  body.app-shell.future-ui.mnv-future-ui:is(.page-study_session, .page-watch)
    #main-content .unified-player-heading > div {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.app-shell.future-ui.mnv-future-ui:is(.page-study_session, .page-watch)
    #main-content .unified-player-heading :is(.chip, h2, p) {
    max-width: 100% !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    writing-mode: horizontal-tb !important;
  }

  body.app-shell.future-ui.mnv-future-ui:is(.page-study_session, .page-watch)
    #main-content .unified-player-heading h2 {
    margin: 10px 0 5px !important;
    font-size: clamp(21px, 6.4vw, 28px) !important;
    line-height: 1.34 !important;
  }

  body.app-shell.future-ui.mnv-future-ui:is(.page-study_session, .page-watch)
    #main-content .unified-player-heading > :is(.button, .external-youtube-open, .external-video-locked) {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    white-space: normal !important;
    text-align: center !important;
  }

  body.app-shell.future-ui.mnv-future-ui:is(.page-study_session, .page-watch)
    #main-content .unified-player-controls {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.app-shell.future-ui.mnv-future-ui:is(.page-study_session, .page-watch)
    #main-content .unified-player-controls :is(.player-tool, .player-speed-control) {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 7px 5px !important;
    writing-mode: horizontal-tb !important;
  }

  body.app-shell.future-ui.mnv-future-ui:is(.page-study_session, .page-watch)
    #main-content .unified-player-controls .player-speed-control {
    grid-column: auto !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
  }

  body.app-shell.future-ui.mnv-future-ui:is(.page-study_session, .page-watch)
    #main-content .unified-player-controls .player-speed-control > span {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
  }

  body.app-shell.future-ui.mnv-future-ui:is(.page-study_session, .page-watch)
    #main-content .unified-player-controls .player-speed-control select {
    width: 58px !important;
    min-width: 0 !important;
    max-width: 58px !important;
    padding-inline: 4px 17px !important;
    writing-mode: horizontal-tb !important;
  }

  body.app-shell.future-ui.mnv-future-ui.page-study_session
    #main-content .learning-focus {
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
  }

  body.app-shell.future-ui.mnv-future-ui.page-study_session
    #main-content .learning-focus > [data-focus-toggle] {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  body.app-shell.future-ui.mnv-future-ui.page-study_session
    #main-content .learning-focus-copy {
    min-width: 0 !important;
  }

  body.app-shell.future-ui.mnv-future-ui.page-study_session
    #main-content .learning-focus-copy h2 {
    font-size: clamp(20px, 6vw, 27px) !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
  }

  /* Video candidates are complete cards, not a thumbnail plus a thin column. */
  body.app-shell.future-ui.mnv-future-ui.page-study_session
    #main-content .today-video-choice-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  body.app-shell.future-ui.mnv-future-ui.page-study_session
    #main-content .today-video-choice {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  body.app-shell.future-ui.mnv-future-ui.page-study_session
    #main-content .today-video-thumb {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
  }

  body.app-shell.future-ui.mnv-future-ui.page-study_session
    #main-content .today-video-choice-body {
    min-width: 0 !important;
    padding: 13px 14px 15px !important;
  }

  body.app-shell.future-ui.mnv-future-ui.page-study_session
    #main-content .today-video-choice-body > span {
    display: block !important;
    overflow: visible !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    -webkit-line-clamp: unset !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  body.app-shell.future-ui.mnv-future-ui.page-study_session
    #main-content .today-video-choice-body small {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  /* Detail rows keep readable horizontal labels and values. */
  body.app-shell.future-ui.mnv-future-ui:is(.page-study_session, .page-watch)
    #main-content .watch-info-list > div {
    display: grid !important;
    grid-template-columns: minmax(108px, .9fr) minmax(0, 1.1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
  }

  body.app-shell.future-ui.mnv-future-ui:is(.page-study_session, .page-watch)
    #main-content .watch-info-list > div > :is(span, strong) {
    min-width: 0 !important;
    max-width: 100% !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    writing-mode: horizontal-tb !important;
  }

  body.app-shell.future-ui.mnv-future-ui:is(.page-study_session, .page-watch)
    #main-content .watch-info-list > div > strong {
    margin-left: 0 !important;
    text-align: right !important;
  }

  body.app-shell.future-ui.mnv-future-ui:is(.page-study_session, .page-watch)
    #main-content :is(.focus-list, .course-session-progress) {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.app-shell.future-ui.mnv-future-ui:is(.page-study_session, .page-watch)
    #main-content :is(.focus-list li, .course-session-progress li, .course-session-progress li > div) {
    min-width: 0 !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    writing-mode: horizontal-tb !important;
  }

  /* Keep the three support launchers usable without covering full-width CTAs. */
  body.app-shell.future-ui.mnv-future-ui .future-utility-dock {
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    bottom: calc(8px + var(--mf-mobile-nav-h, 0px) + env(safe-area-inset-bottom, 0px)) !important;
    left: auto !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
    gap: 5px !important;
  }

  body.app-shell.future-ui.mnv-future-ui .future-utility-dock
    > :is(.luxury-command-fab, .guide-fab, .qr-login-fab, .child-read-aloud) {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    border-radius: 14px !important;
  }

  body.app-shell.future-ui.mnv-future-ui.public-app.shell-public #main-content,
  body.app-shell.future-ui.mnv-future-ui:is(.page-study_session, .page-watch) #main-content {
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media screen and (max-width: 420px) {
  body.app-shell.future-ui.mnv-future-ui .site-header .brand-text small {
    display: none !important;
  }

  body.app-shell.future-ui.mnv-future-ui:is(.page-study_session, .page-watch)
    #main-content .mf-journey-rail li {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 7px 6px !important;
  }

  body.app-shell.future-ui.mnv-future-ui:is(.page-study_session, .page-watch)
    #main-content .mf-journey-step-icon {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
  }

  body.app-shell.future-ui.mnv-future-ui.page-study_session
    #main-content .today-video-choices-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  body.app-shell.future-ui.mnv-future-ui.page-study_session
    #main-content .today-video-choices-head :is(form, .button, button) {
    width: 100% !important;
  }
}

@media screen and (max-width: 360px) {
  body.app-shell.future-ui.mnv-future-ui:is(.page-study_session, .page-watch)
    #main-content .watch-info-list > div {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  body.app-shell.future-ui.mnv-future-ui:is(.page-study_session, .page-watch)
    #main-content .watch-info-list > div > strong {
    text-align: left !important;
  }
}

@media (forced-colors: active) {
  body.app-shell.future-ui.mnv-future-ui .site-header .nav-toggle,
  body.app-shell.future-ui.mnv-future-ui .mf-journey-rail li,
  body.app-shell.future-ui.mnv-future-ui .today-video-choice {
    border-color: CanvasText !important;
    background: Canvas !important;
    color: CanvasText !important;
    forced-color-adjust: auto !important;
  }
}