/* Shared mobile learning header.
   Applies to all 5 primary tabs. Desktop/tablet >=768px is untouched. */
@media (max-width:767px){
  :root{
    --mobile-profile-control-height:44px;
    --mobile-profile-stat-width:46px;
  }

  /* Keep the profile row identical on all five primary tabs. */
  .learning-page-header .header-learning-summary,
  .map-auth-header .map-header-profile-row{
    width:100%!important;
    min-width:0!important;
    min-height:var(--mobile-profile-control-height)!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:6px!important;
    overflow:visible!important;
    position:relative!important;
    z-index:70!important;
  }

  .learning-page-header #header-profile-badge,
  .map-auth-header #header-profile-badge{
    flex:1 1 0%!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    overflow:visible!important;
    padding-right:0!important;
    position:relative!important;
    z-index:80!important;
  }

  .learning-page-header #profile-switcher-wrapper,
  .map-auth-header #profile-switcher-wrapper{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    position:relative!important;
    z-index:90!important;
  }

  .learning-page-header #btn-toggle-profile-menu,
  .map-auth-header #btn-toggle-profile-menu{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:var(--mobile-profile-control-height)!important;
    min-height:var(--mobile-profile-control-height)!important;
    display:flex!important;
    align-items:center!important;
    overflow:hidden!important;
    padding:5px 6px!important;
    gap:4px!important;
    border-radius:14px!important;
  }

  .learning-page-header #btn-toggle-profile-menu>span:nth-child(1),
  .map-auth-header #btn-toggle-profile-menu>span:nth-child(1){
    flex:0 0 auto!important;
    font-size:20px!important;
  }

  /* Let the child's name use real available space instead of a hard pixel cap. */
  .learning-page-header #btn-toggle-profile-menu>span:nth-child(2),
  .map-auth-header #btn-toggle-profile-menu>span:nth-child(2){
    flex:0 1 42%!important;
    min-width:0!important;
    max-width:42%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:11.5px!important;
  }

  /* Grade/title gets the rest of the profile capsule. */
  .learning-page-header #btn-toggle-profile-menu>span:nth-child(3),
  .map-auth-header #btn-toggle-profile-menu>span:nth-child(3){
    flex:1 1 auto!important;
    min-width:0!important;
    max-width:none!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    padding-left:5px!important;
    padding-right:5px!important;
    font-size:9px!important;
  }

  .learning-page-header #profile-dropdown-icon,
  .map-auth-header #profile-dropdown-icon{
    display:none!important;
  }

  /* Same stat dimensions on learning tabs and the map tab. */
  .learning-page-header .header-learning-stats{
    position:static!important;
    display:flex!important;
    align-items:center!important;
    flex:0 0 auto!important;
    gap:6px!important;
  }

  .learning-page-header .header-learning-stats>div,
  .map-auth-header .map-header-profile-row>div:not(#header-profile-badge){
    box-sizing:border-box!important;
    width:var(--mobile-profile-stat-width)!important;
    min-width:var(--mobile-profile-stat-width)!important;
    height:var(--mobile-profile-control-height)!important;
    min-height:var(--mobile-profile-control-height)!important;
    flex:0 0 var(--mobile-profile-stat-width)!important;
    padding:0 5px!important;
    gap:3px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:12px!important;
    font-size:10px!important;
  }

  .learning-page-header .header-learning-stats>div>span:first-child,
  .map-auth-header .map-header-profile-row>div:not(#header-profile-badge)>span:first-child{
    font-size:14px!important;
    flex:0 0 auto!important;
  }

  /* Dropdown must escape the compact profile capsule. */
  .learning-page-header #profile-switcher-dropdown,
  .map-auth-header #profile-switcher-dropdown{
    position:absolute!important;
    left:0!important;
    right:auto!important;
    top:calc(100% + 8px)!important;
    width:min(320px, calc(100vw - 24px))!important;
    max-width:calc(100vw - 24px)!important;
    z-index:220!important;
    overflow:visible!important;
  }
}

@media (max-width:420px){
  :root{
    --mobile-profile-stat-width:44px;
  }

  .learning-page-header #btn-toggle-profile-menu>span:nth-child(2),
  .map-auth-header #btn-toggle-profile-menu>span:nth-child(2){
    flex-basis:43%!important;
    max-width:43%!important;
  }

  .learning-page-header #btn-toggle-profile-menu>span:nth-child(3),
  .map-auth-header #btn-toggle-profile-menu>span:nth-child(3){
    font-size:8.75px!important;
    padding-left:4px!important;
    padding-right:4px!important;
  }
}

@media (max-width:360px){
  :root{
    --mobile-profile-control-height:40px;
    --mobile-profile-stat-width:40px;
  }

  .learning-page-header #btn-toggle-profile-menu,
  .map-auth-header #btn-toggle-profile-menu{
    padding-left:5px!important;
    padding-right:5px!important;
    gap:3px!important;
  }

  .learning-page-header #btn-toggle-profile-menu>span:nth-child(2),
  .map-auth-header #btn-toggle-profile-menu>span:nth-child(2){
    flex-basis:46%!important;
    max-width:46%!important;
    font-size:11px!important;
  }

  .learning-page-header #btn-toggle-profile-menu>span:nth-child(3),
  .map-auth-header #btn-toggle-profile-menu>span:nth-child(3){
    font-size:8px!important;
  }
}