/* Logged-in mobile header should match the public-facing header proportions while leaving the mode bar in place. */
@media (max-width:760px){
  html body .site-header{
    background:linear-gradient(180deg,#101923 0%,#0b1218 100%)!important;
    border-bottom:1px solid rgba(217,157,18,.86)!important;
    box-shadow:0 10px 24px rgba(0,0,0,.28)!important;
  }

  html body .site-header .site-header-inner:has(.header-mode-switch){
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"brand actions" "mode mode"!important;
    align-items:center!important;
    min-height:0!important;
    width:100%!important;
    max-width:100vw!important;
    padding:8px 12px 0!important;
    gap:3px 10px!important;
  }

  html body .site-header .site-header-inner:has(.header-mode-switch) .brand{
    grid-area:brand!important;
    grid-template-columns:56px minmax(0,1fr)!important;
    column-gap:8px!important;
    row-gap:0!important;
    max-width:calc(100vw - 170px)!important;
    min-height:58px!important;
    align-items:center!important;
  }

  html body .site-header .site-header-inner:has(.header-mode-switch) .brand-logo-wrap,
  html body .site-header .site-header-inner:has(.header-mode-switch) .brand-logo,
  html body .site-header .site-header-inner:has(.header-mode-switch) .brand-logo-svg{
    width:54px!important;
    height:54px!important;
    min-width:54px!important;
    max-width:54px!important;
    min-height:54px!important;
    max-height:54px!important;
  }

  html body .site-header .site-header-inner:has(.header-mode-switch) .brand-name{
    font-size:clamp(1.13rem,5.2vw,1.42rem)!important;
    line-height:.95!important;
    letter-spacing:-.055em!important;
    align-self:end!important;
  }

  html body .site-header .site-header-inner:has(.header-mode-switch) .brand-tagline{
    font-size:clamp(.62rem,2.65vw,.76rem)!important;
    line-height:1.02!important;
    align-self:start!important;
  }

  html body .site-header .site-header-inner:has(.header-mode-switch) .header-actions{
    grid-area:actions!important;
    align-self:center!important;
    justify-self:end!important;
    display:flex!important;
    align-items:center!important;
    gap:9px!important;
    min-width:max-content!important;
  }

  html body .site-header .site-header-inner:has(.header-mode-switch) .header-search-button,
  html body .site-header .site-header-inner:has(.header-mode-switch) .profile-chip{
    width:58px!important;
    height:58px!important;
    min-width:58px!important;
    min-height:58px!important;
    max-width:58px!important;
    max-height:58px!important;
    padding:0!important;
    border-radius:999px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:visible!important;
  }

  html body .site-header .site-header-inner:has(.header-mode-switch) .header-search-button{
    width:54px!important;
    height:42px!important;
    min-width:54px!important;
    min-height:42px!important;
    max-width:54px!important;
    max-height:42px!important;
    border:1px solid rgba(224,176,80,.88)!important;
    border-radius:999px!important;
    background:linear-gradient(180deg,#090806 0%,#171006 100%)!important;
    box-shadow:0 8px 18px rgba(0,0,0,.32),0 0 0 1px rgba(255,228,150,.08) inset!important;
    color:#ffd873!important;
    font-size:1.05rem!important;
  }

  html body .site-header .site-header-inner:has(.header-mode-switch) .profile-chip{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  html body .site-header .site-header-inner:has(.header-mode-switch) .profile-chip-text{
    display:none!important;
  }

  html body .site-header .site-header-inner:has(.header-mode-switch) .profile-avatar{
    width:56px!important;
    height:56px!important;
    min-width:56px!important;
    min-height:56px!important;
    border-radius:999px!important;
    border:2px solid rgba(224,176,80,.48)!important;
    box-shadow:0 6px 16px rgba(0,0,0,.34)!important;
    overflow:visible!important;
  }

  html body .site-header .site-header-inner:has(.header-mode-switch) .profile-avatar img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    border-radius:999px!important;
  }

  html body .site-header .site-header-inner:has(.header-mode-switch) .profile-notification-badge{
    top:-7px!important;
    right:-8px!important;
    min-width:22px!important;
    height:22px!important;
    padding:0 5px!important;
    font-size:.68rem!important;
    line-height:22px!important;
    border:2px solid #0b1218!important;
  }

  /* Keep the user mode bar exactly below the header row, just trim the wasted breathing room around it. */
  html body .site-header .site-header-inner:has(.header-mode-switch) .header-center-controls{
    grid-area:mode!important;
    width:100%!important;
    padding-top:2px!important;
    margin:0!important;
  }

  html body .site-header .site-header-inner:has(.header-mode-switch) .header-mode-switch{
    width:calc(100vw - 28px)!important;
    max-width:calc(100vw - 28px)!important;
    margin:0 auto!important;
  }
}

@media (max-width:380px){
  html body .site-header .site-header-inner:has(.header-mode-switch) .brand{
    grid-template-columns:50px minmax(0,1fr)!important;
    max-width:calc(100vw - 152px)!important;
  }
  html body .site-header .site-header-inner:has(.header-mode-switch) .brand-logo-wrap,
  html body .site-header .site-header-inner:has(.header-mode-switch) .brand-logo,
  html body .site-header .site-header-inner:has(.header-mode-switch) .brand-logo-svg{
    width:50px!important;height:50px!important;min-width:50px!important;min-height:50px!important;
  }
  html body .site-header .site-header-inner:has(.header-mode-switch) .header-search-button,
  html body .site-header .site-header-inner:has(.header-mode-switch) .profile-chip{
    width:46px!important;height:40px!important;min-width:46px!important;min-height:40px!important;max-width:46px!important;max-height:40px!important;
  }
  html body .site-header .site-header-inner:has(.header-mode-switch) .profile-avatar{
    width:50px!important;height:50px!important;min-width:50px!important;min-height:50px!important;
  }
}