/* Phone header and quick bar, 25 September 2026. Loaded last on every page
   that carries the mobile quick bar. Gated by html classes hr-hd1 / hr-q4. */

/* hd1  A larger name and iris on phones, with a tighter stack.
   The phone header row is already full (brand 182 + search 40 + language 57 +
   menu 48 + gaps = 339px at 375px), so the larger lock-up is paid for by 6px
   off the search button width and the language pill's side padding. The tagline
   stays at 12px: at 12.5px it wraps and the row breaks. */
@media (max-width:760px){
  html.hr-hd1 header{row-gap:2px!important;padding-bottom:6px!important}
  html.hr-hd1 header .brand{gap:8px!important}
  html.hr-hd1 header .brand img{width:34px!important;height:34px!important}
  html.hr-hd1 header .brand span{font-size:16.5px!important;line-height:1.22!important}
  html.hr-hd1 header .brand span small{font-size:12px!important;line-height:1.3!important}
  html.hr-hd1 header details.language-menu>summary{padding-left:6px!important;padding-right:6px!important}
  html.hr-hd1 header button.site-search-trigger{width:34px!important;min-width:34px!important;padding:0!important}
}
@media (max-width:360px){
  html.hr-hd1 header .brand img{width:31px!important;height:31px!important}
  html.hr-hd1 header .brand span{font-size:15.5px!important}
}

/* q4  Four buttons in the phone bar: Home, Dr Chen, Articles, Contact.
   Same 13px labels and 52px targets as the published three. */
.qn-articles{display:none!important}
html.hr-q4 .mobile-quick-nav .qn-articles{display:flex!important}
html.hr-q4 .mobile-quick-nav{grid-template-columns:repeat(4,minmax(0,1fr))!important}
html.hr-q4 .mobile-quick-nav>a{min-width:0;padding-left:4px!important;padding-right:4px!important}
html.hr-q4 .mobile-quick-nav>a>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.qn-short{display:none}
html.hr-q4 .mobile-quick-nav .qn-long{display:none}
html.hr-q4 .mobile-quick-nav .qn-short{display:inline}