/*
 * Manabi Video Navi V284
 * iPad public-drawer input ownership and shared mobile MyPage menu contrast.
 */

/* Public navigation switches to a drawer through 1800px.  Keep this repair on
 * the same breakpoint: iPadOS desktop-site mode commonly reports 1194-1366px
 * and was therefore outside V283's 1180px touch repair. */
@media screen and (max-width: 1800px) {
  html.mobile-nav-open,
  html.mobile-nav-open body.public-app.mobile-nav-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: auto !important;
  }

  body.app-shell.public-app.mobile-nav-open .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 7000 !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.public-app.mobile-nav-open .nav-scrim {
    z-index: 6990 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body.app-shell.public-app .site-header .site-nav-area.open,
  body.app-shell.public-app .site-header .site-nav-area[aria-hidden="false"] {
    z-index: 7010 !important;
    contain: none !important;
    isolation: isolate !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) !important;
  }

  body.app-shell.public-app .site-header .site-nav-area.open::before,
  body.app-shell.public-app .site-header .site-nav-area.open::after,
  body.app-shell.public-app .site-header .site-nav-area[aria-hidden="false"]::before,
  body.app-shell.public-app .site-header .site-nav-area[aria-hidden="false"]::after {
    pointer-events: none !important;
  }

  body.app-shell.public-app .site-header .site-nav-area.open
    :is(.nav-drawer-close, .site-nav a, .site-nav button, .nav-actions a, .nav-actions button),
  body.app-shell.public-app .site-header .site-nav-area[aria-hidden="false"]
    :is(.nav-drawer-close, .site-nav a, .site-nav button, .nav-actions a, .nav-actions button) {
    position: relative !important;
    z-index: 2 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }
}

/* MypageUI::nav() is shared by MyPage, history, favorites, records, Karte,
 * goals and account screens.  Scope the contrast contract to the component,
 * not page-mypage, so every light mobile tile gets a real foreground color. */
@media screen and (max-width: 780px) {
  body.app-shell #main-content .mobile-mypage-menu,
  body.app-shell #main-content .mobile-mypage-menu > summary {
    color: #17324f !important;
    -webkit-text-fill-color: #17324f !important;
    text-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.app-shell #main-content .mobile-mypage-menu > summary :is(span, strong, small),
  body.app-shell #main-content .mobile-mypage-menu > summary::after {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.app-shell #main-content .mobile-mypage-menu-grid > a {
    position: relative !important;
    isolation: isolate !important;
    color: #17324f !important;
    -webkit-text-fill-color: #17324f !important;
    background: #f7fbff !important;
    text-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    mix-blend-mode: normal !important;
  }

  body.app-shell #main-content .mobile-mypage-menu-grid > a::before,
  body.app-shell #main-content .mobile-mypage-menu-grid > a::after {
    z-index: 0 !important;
    pointer-events: none !important;
  }

  body.app-shell #main-content .mobile-mypage-menu-grid > a > * {
    position: relative !important;
    z-index: 1 !important;
  }

  body.app-shell #main-content .mobile-mypage-menu-grid > a
    > span:not(.mobile-mypage-menu-icon) {
    display: block !important;
    min-width: 0 !important;
    color: #17324f !important;
    -webkit-text-fill-color: #17324f !important;
    font-size: clamp(13px, 3.35vw, 16px) !important;
    font-weight: 850 !important;
    line-height: 1.4 !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    mix-blend-mode: normal !important;
  }

  body.app-shell #main-content .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;
    filter: none !important;
  }

  body.app-shell #main-content .mobile-mypage-menu-grid > a .mobile-mypage-menu-icon svg {
    color: inherit !important;
    stroke: currentColor !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.app-shell #main-content .mobile-mypage-menu-grid > a.is-active {
    border-color: #76b8e8 !important;
    background: #e5f2ff !important;
    color: #102d4a !important;
    -webkit-text-fill-color: #102d4a !important;
    box-shadow: inset 0 3px #2583ef !important;
  }

  body.app-shell #main-content .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 #main-content .mobile-mypage-menu-grid > a.is-danger,
  body.app-shell #main-content .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 #main-content .mobile-mypage-menu-grid > a.is-danger {
    background: #fff5f6 !important;
  }

  body.app-shell #main-content .mobile-mypage-menu-grid > a.is-search,
  body.app-shell #main-content .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 #main-content .mobile-mypage-menu-grid > a.is-search {
    background: linear-gradient(135deg, #0c72bd, #5e2bc1) !important;
  }

  body.app-shell #main-content .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, .16) !important;
  }
}

@media (forced-colors: active) {
  body.app-shell #main-content .mobile-mypage-menu-grid > a {
    color: LinkText !important;
    -webkit-text-fill-color: currentColor !important;
    forced-color-adjust: auto !important;
  }
}