/* Manabi Video Navi V293
 * Shared mobile MyPage menu summary surface/ink contract.
 *
 * MypageUI::nav() is reused by account, billing, history, plan and learning
 * pages whose outer menu may be either light or dark. The summary therefore
 * owns one opaque surface instead of assuming the parent background.
 */

@media screen and (max-width: 780px) {
  body.app-shell #main-content .mobile-mypage-menu > summary {
    position: relative !important;
    z-index: 2 !important;
    min-height: 64px !important;
    border: 1px solid #2e73b8 !important;
    border-radius: 20px 20px 0 0 !important;
    background: #0a315e !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 5px 18px rgba(4, 25, 54, .13) !important;
    text-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    isolation: isolate !important;
  }

  body.app-shell #main-content .mobile-mypage-menu:not([open]) > summary {
    border-radius: 20px !important;
  }

  body.app-shell #main-content .mobile-mypage-menu > summary > span,
  body.app-shell #main-content .mobile-mypage-menu > summary strong {
    position: relative !important;
    z-index: 1 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1.35 !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 > summary small {
    position: relative !important;
    z-index: 1 !important;
    color: #d9eaff !important;
    -webkit-text-fill-color: #d9eaff !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.35 !important;
    text-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
  }

  body.app-shell #main-content .mobile-mypage-menu > summary::after {
    position: relative !important;
    z-index: 1 !important;
    color: #7fe9ff !important;
    -webkit-text-fill-color: #7fe9ff !important;
    text-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
  }

  body.app-shell #main-content .mobile-mypage-menu > summary > span > svg {
    position: relative !important;
    z-index: 1 !important;
    color: #ffad5c !important;
    -webkit-text-fill-color: #ffad5c !important;
    stroke: currentColor !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
  }

  body.app-shell #main-content .mobile-mypage-menu > summary:focus-visible {
    outline: 3px solid #7fe9ff !important;
    outline-offset: -5px !important;
  }
}

@media (forced-colors: active) {
  body.app-shell #main-content .mobile-mypage-menu > summary,
  body.app-shell #main-content .mobile-mypage-menu > summary :is(strong, small, span) {
    border-color: ButtonText !important;
    background: Canvas !important;
    color: CanvasText !important;
    -webkit-text-fill-color: currentColor !important;
    forced-color-adjust: auto !important;
  }
}