/*
 * Manabi Video Navi V269 — mobile navigation and reading-page coherence.
 *
 * This is the final screen-only layer for the reported phone regressions.
 * It does not change URLs, authentication, QR, learning, payment or storage
 * behavior.  The existing drawer remains the owner of navigation state; this
 * layer only restores its input/scroll surface and gives legal pages one
 * coherent night palette.
 */

/* The brand story now uses native inline playback, so the visible player does
 * not depend on the modal JavaScript having completed its initialization. */
body.app-shell.future-ui.mnv-future-ui.public-app.shell-public.page-index
  #main-content .brand-film-stage .mnv-v269-brand-player-shell {
  display: grid !important;
  min-width: 0 !important;
  max-width: 100% !important;
  gap: 8px !important;
}

body.app-shell.future-ui.mnv-future-ui.public-app.shell-public.page-index
  #main-content .brand-film-stage .mnv-v269-brand-player {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: contain !important;
  overflow: hidden !important;
  border: 1px solid rgba(105, 218, 255, .48) !important;
  border-radius: 18px !important;
  background: #020815 !important;
  color: #ffffff !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
  box-shadow: 0 20px 54px rgba(0, 4, 24, .44) !important;
}

body.app-shell.future-ui.mnv-future-ui.public-app.shell-public.page-index
  #main-content .brand-film-stage .mnv-v269-brand-meta {
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 9px 12px !important;
  border: 1px solid rgba(105, 218, 255, .24) !important;
  border-radius: 12px !important;
  background: #081f45 !important;
  color: #dcecff !important;
  -webkit-text-fill-color: #dcecff !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

body.app-shell.future-ui.mnv-future-ui.public-app.shell-public.page-index
  #main-content .brand-film-stage .mnv-v269-brand-meta strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body.app-shell.future-ui.mnv-future-ui.public-app.shell-public.page-index
  #main-content .brand-film-stage :is(.brand-film-vignette, .brand-film-caption, .brand-film-play) {
  pointer-events: none !important;
}

body.app-shell.future-ui.mnv-future-ui.public-app.shell-public.page-index
  #main-content .brand-film-stage .mnv-v269-brand-player:focus-visible {
  outline: 3px solid #68e4ff !important;
  outline-offset: 4px !important;
}

@media screen and (max-width: 760px) {
  /* The page remains locked behind the drawer, but iOS must be allowed to
   * recognise a vertical pan that starts inside the drawer itself. */
  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;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: #061a3b !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;
    background: rgba(1, 7, 20, .58) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body.app-shell.future-ui.mnv-future-ui .site-header .site-nav-area,
  body.app-shell.future-ui.mnv-future-ui.public-app .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(100vw, 430px) !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    height: auto !important;
    max-height: calc(100dvh - var(--site-header-bottom, 64px)) !important;
    padding:
      12px
      max(14px, env(safe-area-inset-right, 0px))
      max(24px, calc(14px + env(safe-area-inset-bottom, 0px)))
      max(14px, env(safe-area-inset-left, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    border: 1px solid rgba(93, 205, 255, .34) !important;
    border-right: 0 !important;
    border-radius: 20px 0 0 0 !important;
    background:
      radial-gradient(circle at 95% 4%, rgba(53, 208, 255, .13), transparent 17rem),
      linear-gradient(165deg, #071b3e 0%, #061632 100%) !important;
    color: #f7fbff !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    filter: none !important;
    transform: translate3d(104%, 0, 0) !important;
    box-shadow: -22px 0 58px rgba(0, 3, 20, .5) !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;
    filter: none !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(.site-nav, .nav-actions, .logout-inline-form) {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 7px !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
  }

  body.app-shell.future-ui.mnv-future-ui .site-header .mnv-v243-drawer-intro {
    display: none !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, .logout-inline-form button) {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 48px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 11px 13px !important;
    border: 1px solid rgba(105, 194, 255, .28) !important;
    border-radius: 13px !important;
    background: #0a2852 !important;
    color: #f7fbff !important;
    -webkit-text-fill-color: #f7fbff !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    filter: none !important;
    white-space: normal !important;
    text-align: left !important;
    text-decoration: none !important;
    line-height: 1.35 !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, .logout-inline-form button):is(:hover, :focus-visible, :active) {
    border-color: #62dcff !important;
    background: #103768 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    outline: none !important;
  }

  body.app-shell.future-ui.mnv-future-ui .site-header .site-nav-area .nav-drawer-close {
    justify-content: space-between !important;
    background: #0d315f !important;
    font-weight: 850 !important;
  }

  body.app-shell.future-ui.mnv-future-ui .site-header .site-nav-area .nav-drawer-close b {
    display: grid !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: #173f71 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  body.app-shell.future-ui.mnv-future-ui .site-header .site-nav-area .nav-actions {
    margin-top: 2px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(101, 199, 255, .22) !important;
  }

  body.app-shell.future-ui.mnv-future-ui .site-header .site-nav-area .nav-actions .qr-nav-button {
    border-color: rgba(88, 222, 255, .48) !important;
    background: #0b3564 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  body.app-shell.future-ui.mnv-future-ui .site-header .site-nav-area .guest-pill {
    border-color: rgba(108, 199, 255, .28) !important;
    background: #061a38 !important;
    color: #dcecff !important;
    -webkit-text-fill-color: #dcecff !important;
    opacity: 1 !important;
  }

  body.app-shell.future-ui.mnv-future-ui .site-header .site-nav-area .guest-pill strong {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  /* A deterministic three-line button and a true X avoid the clipped
   * chevron/vertical MENU combinations shown by mobile Safari. */
  body.app-shell.future-ui.mnv-future-ui .site-header .nav-toggle {
    z-index: 5200 !important;
    overflow: hidden !important;
    isolation: isolate !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    filter: none !important;
  }

  body.app-shell.future-ui.mnv-future-ui .site-header .nav-toggle > span {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    margin: 2.5px auto !important;
    opacity: 1 !important;
    transform: none !important;
    transform-origin: center !important;
  }

  body.app-shell.future-ui.mnv-future-ui .site-header .nav-toggle[aria-expanded="true"] > span:nth-of-type(1),
  body.app-shell.future-ui.mnv-future-ui .site-header .nav-toggle[aria-expanded="true"] > span:nth-of-type(3) {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    margin: 0 !important;
  }

  body.app-shell.future-ui.mnv-future-ui .site-header .nav-toggle[aria-expanded="true"] > span:nth-of-type(1) {
    transform: translate(-50%, -50%) rotate(45deg) !important;
  }

  body.app-shell.future-ui.mnv-future-ui .site-header .nav-toggle[aria-expanded="true"] > span:nth-of-type(2) {
    opacity: 0 !important;
  }

  body.app-shell.future-ui.mnv-future-ui .site-header .nav-toggle[aria-expanded="true"] > span:nth-of-type(3) {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
  }

  body.app-shell.future-ui.mnv-future-ui .site-header :is(.brand, .brand-text, .brand-text strong) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;
  }

  /* Reading/legal pages: remove the unrelated light cards and gray table
   * bands, then let headings, values and links use a single dark hierarchy. */
  body.app-shell.future-ui.mnv-future-ui.shell-reading #main-content {
    width: min(100% - 24px, 920px) !important;
    max-width: 100% !important;
    padding-bottom: calc(148px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.app-shell.future-ui.mnv-future-ui.shell-reading #main-content .mf-reading-toc {
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px 0 18px !important;
    padding: 15px !important;
    overflow: hidden !important;
    border: 1px solid rgba(103, 209, 255, .38) !important;
    border-radius: 18px !important;
    background: #0a2852 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: 0 12px 30px rgba(0, 4, 24, .28) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body.app-shell.future-ui.mnv-future-ui.shell-reading #main-content .mf-reading-toc > strong {
    display: block !important;
    margin: 0 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
  }

  body.app-shell.future-ui.mnv-future-ui.shell-reading #main-content .mf-reading-toc ol {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 11px 0 0 !important;
    padding: 0 !important;
    gap: 8px !important;
    overflow: visible !important;
    list-style: none !important;
  }

  body.app-shell.future-ui.mnv-future-ui.shell-reading #main-content .mf-reading-toc li {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.app-shell.future-ui.mnv-future-ui.shell-reading #main-content .mf-reading-toc a {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    align-items: center !important;
    padding: 9px 11px !important;
    border: 1px solid rgba(99, 214, 255, .35) !important;
    border-radius: 12px !important;
    background: #071e42 !important;
    color: #8eeaff !important;
    -webkit-text-fill-color: #8eeaff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-decoration: none !important;
  }

  body.app-shell.future-ui.mnv-future-ui.shell-reading #main-content .legal-page.panel {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 22px 18px !important;
    overflow: hidden !important;
    border: 1px solid rgba(100, 205, 255, .34) !important;
    border-radius: 20px !important;
    background: linear-gradient(165deg, #0b2a56 0%, #071d42 100%) !important;
    color: #f7fbff !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: 0 18px 44px rgba(0, 4, 25, .3) !important;
  }

  body.app-shell.future-ui.mnv-future-ui.shell-reading #main-content .legal-page
    :is(h1, h2, h3, h4, strong, .eyebrow) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: none !important;
  }

  body.app-shell.future-ui.mnv-future-ui.shell-reading #main-content .legal-page
    :is(p, li, td, .muted, .legal-mini) {
    color: #d8e6f5 !important;
    -webkit-text-fill-color: #d8e6f5 !important;
    opacity: 1 !important;
    line-height: 1.8 !important;
  }

  body.app-shell.future-ui.mnv-future-ui.shell-reading #main-content .legal-page a {
    color: #78e4ff !important;
    -webkit-text-fill-color: #78e4ff !important;
    text-decoration-color: rgba(120, 228, 255, .62) !important;
  }

  body.app-shell.future-ui.mnv-future-ui.shell-reading #main-content .legal-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 18px !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.app-shell.future-ui.mnv-future-ui.shell-reading #main-content .legal-table,
  body.app-shell.future-ui.mnv-future-ui.shell-reading #main-content .legal-table tbody {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 10px !important;
    border: 0 !important;
    background: transparent !important;
  }

  body.app-shell.future-ui.mnv-future-ui.shell-reading #main-content .legal-table tr {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(105, 197, 255, .28) !important;
    border-radius: 14px !important;
    background: #081f45 !important;
  }

  body.app-shell.future-ui.mnv-future-ui.shell-reading #main-content .legal-table :is(th, td) {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 13px 14px !important;
    border: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    text-align: left !important;
  }

  body.app-shell.future-ui.mnv-future-ui.shell-reading #main-content .legal-table th {
    background: #0b3262 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 850 !important;
  }

  body.app-shell.future-ui.mnv-future-ui.shell-reading #main-content .legal-table td {
    border-top: 1px solid rgba(105, 197, 255, .18) !important;
    background: #0a274f !important;
    color: #d8e6f5 !important;
    -webkit-text-fill-color: #d8e6f5 !important;
  }

  /* Keep the support controls clear of the last paragraph/table row. */
  body.app-shell.future-ui.mnv-future-ui.shell-reading .future-utility-dock {
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
    gap: 5px !important;
  }
}

@media screen and (max-width: 380px) {
  body.app-shell.future-ui.mnv-future-ui.shell-reading #main-content .mf-reading-toc ol {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (forced-colors: active) {
  body.app-shell.future-ui.mnv-future-ui .site-header .site-nav-area,
  body.app-shell.future-ui.mnv-future-ui.shell-reading #main-content :is(.mf-reading-toc, .legal-page.panel, .legal-table tr) {
    border: 2px solid CanvasText !important;
  }
}