/* Connection Map header: desktop must use the same final spacing as the homepage in every locale. */
@media(min-width:901px){
  body.connection-map-page .fortune-header{
    position:sticky!important;
    top:0!important;
    z-index:9999!important;
    height:auto!important;
    min-height:72px!important;
    background:#fff!important;
    border-bottom:1px solid #e9e9ed!important;
    padding:0 max(24px,calc((100vw - 1360px)/2))!important;
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    grid-template-areas:"brand nav"!important;
    align-items:center!important;
    column-gap:18px!important;
    overflow:visible!important;
  }
  body.connection-map-page .brand-language-stack{
    grid-area:brand!important;
    display:flex!important;
    flex-direction:row!important;
    justify-content:flex-start!important;
    align-items:center!important;
    gap:14px!important;
    min-width:0!important;
    width:auto!important;
    flex-wrap:nowrap!important;
    overflow:visible!important;
  }
  body.connection-map-page .brand-language-stack .brand{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:max-content!important;
    white-space:nowrap!important;
    font-size:1.72rem!important;
    font-weight:950!important;
    line-height:1!important;
  }
  body.connection-map-page .fortune-header .language-switcher{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:max-content!important;
    max-width:100%!important;
    height:28px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:6px!important;
    margin:0!important;
    padding:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
  }
  body.connection-map-page .fortune-header .lang-choice{
    flex:0 0 auto!important;
    width:34px!important;
    min-width:34px!important;
    height:25px!important;
    min-height:25px!important;
    padding:0!important;
    border-radius:6px!important;
  }
  body.connection-map-page .main-fortune-nav{
    grid-area:nav!important;
    min-width:0!important;
    display:flex!important;
    gap:0!important;
    height:100%!important;
    align-items:stretch!important;
    justify-content:flex-end!important;
    overflow:visible!important;
  }
  body.connection-map-page .main-fortune-nav a{
    display:flex!important;
    align-items:center!important;
    height:100%!important;
    padding:0 15px!important;
    color:#24242b!important;
    font-size:.96rem!important;
    font-weight:750!important;
    white-space:nowrap!important;
    position:relative!important;
    transition:background .18s ease,color .18s ease!important;
    border:0!important;
    border-bottom:0!important;
    box-shadow:none!important;
    text-decoration:none!important;
    background-image:none!important;
  }
  body.connection-map-page .main-fortune-nav a:hover{
    color:#4b38d2!important;
    background:#f7f5ff!important;
  }
  body.connection-map-page .main-fortune-nav a.active,
  body.connection-map-page .main-fortune-nav a[aria-current="page"]{
    color:#4b38d2!important;
    background:#f1efff!important;
  }
  body.connection-map-page .main-fortune-nav a::before{
    border:0!important;
    box-shadow:none!important;
    text-decoration:none!important;
  }
  body.connection-map-page .main-fortune-nav a.active::after,
  body.connection-map-page .main-fortune-nav a[aria-current="page"]::after{
    content:""!important;
    position:absolute!important;
    left:15px!important;
    right:15px!important;
    bottom:0!important;
    height:3px!important;
    background:#4b38d2!important;
    border:0!important;
    box-shadow:none!important;
    display:block!important;
  }
}

/* Same responsive desktop rule used by the homepage. */
@media(min-width:901px) and (max-width:1180px){
  body.connection-map-page .brand-language-stack{
    min-width:300px!important;
  }
  body.connection-map-page .main-fortune-nav a{
    padding-left:10px!important;
    padding-right:10px!important;
    font-size:.88rem!important;
  }
  body.connection-map-page .main-fortune-nav a.active::after,
  body.connection-map-page .main-fortune-nav a[aria-current="page"]::after{
    left:10px!important;
    right:10px!important;
  }
}

/* Mobile website / App V20 behavior remains unchanged. */
@media(max-width:780px){
  body.connection-map-page .brand-language-stack{
    min-width:0!important;
    width:100%!important;
    padding:9px 0 5px!important;
    gap:10px!important;
    justify-content:space-between!important;
    flex-wrap:nowrap!important;
  }
  body.connection-map-page .brand-language-stack .brand{
    min-width:max-content!important;
    font-size:1.42rem!important;
  }
  body.connection-map-page .language-switcher{
    flex:1 1 auto!important;
    min-width:0!important;
    overflow-x:auto!important;
  }
  body.connection-map-page .main-fortune-nav{
    height:50px!important;
    justify-content:flex-start!important;
    overflow-x:auto!important;
  }
  body.connection-map-page .main-fortune-nav a{
    height:50px!important;
    padding:0 12px!important;
    border:0!important;
    border-bottom:0!important;
    box-shadow:none!important;
  }
  body.connection-map-page .main-fortune-nav a.active,
  body.connection-map-page .main-fortune-nav a[aria-current="page"]{
    border:0!important;
    border-bottom:0!important;
    box-shadow:none!important;
  }
  body.connection-map-page .main-fortune-nav a.active::after,
  body.connection-map-page .main-fortune-nav a[aria-current="page"]::after{
    left:10px!important;
    right:10px!important;
    bottom:0!important;
    height:3px!important;
  }
}

/* V20 Connection Map: primary action after a pair result uses the approved teal accent. */
body.connection-map-page #addToNetwork{
  background:#009688!important;
  color:#fff!important;
}
body.connection-map-page #addToNetwork:hover,
body.connection-map-page #addToNetwork:focus-visible{
  background:#00796B!important;
}