/* mail-w27.css — office wave 27 (4d02132c): panel-aware desktop header.
   The body already gives the Copilot panel its width (html.yoc-on.yoc-desk body{margin-inline-end:var(--yoc-w)}), so the header
   is as wide as the main column (960 px at 1280 with the panel open). Its contents needed ~1045 px, so the account box wrapped
   (the «50» pill was pushed above the header) and «Outlook» spilled out of its button. The header is now a size container and its
   contents step down by the header's OWN width (panel open or closed, any panel width): labels become icon-only (still named for
   screen readers), and the right-hand group never shrinks or wraps. The account box keeps its own one-row layout. */
@media (min-width:901px){
  html body header#hdr{min-width:0}
  html body header#hdr>a.brand{flex:0 0 auto!important;white-space:nowrap!important}
  html body header#hdr>a.brand span{white-space:nowrap!important}
  html body header#hdr>#ymm-sw,html body header#hdr>#yo-thm26,html body header#hdr>button.btn.icon,html body header#hdr>#acct,html body header#hdr>.y365-sw{flex:0 0 auto!important}
  html body header#hdr>#ymm-sw{width:auto!important;max-width:none!important;white-space:nowrap!important;overflow:visible}
  html body header#hdr>button.btn.icon{width:40px!important;min-width:40px!important}
  html body header#hdr>#acct{flex-wrap:nowrap!important;white-space:nowrap!important}
  html body header#hdr>.yox-fab{flex:0 0 auto!important;white-space:nowrap}
  html body header#hdr>nav.tabs{flex:0 1 auto;min-width:0}
}

/* tiers are set by yo-hdr27.js from the header's own width (ResizeObserver), so they follow the panel open/closed and any panel width.
   Labels stepped out stay readable by screen readers (clipped, not removed). */
html body header#hdr[data-fit] .yox-fab kbd{display:none!important}
html body header#hdr:is([data-fit="2"],[data-fit="3"])>.yox-fab{padding-inline:10px!important}
html body header#hdr:is([data-fit="2"],[data-fit="3"])>.yox-fab>span,
html body header#hdr[data-fit="3"]>nav.tabs>button>span,html body header#hdr[data-fit="3"]>a.brand>span:not(.logo),html body header#hdr[data-fit="3"]>#ymm-sw>span{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;margin:0!important;padding:0!important}
html body header#hdr[data-fit="2"]>nav.tabs>button{padding-inline:10px!important}
html body header#hdr[data-fit="3"]>nav.tabs>button{padding-inline:12px!important}
html body header#hdr[data-fit="3"]>#ymm-sw{padding-inline:10px!important}
/* the command ribbon under the header: when it is wider than the main column, its buttons tighten (t1) and then go icon-only (t2)
   instead of letting the last button («Pane below») be cut at the edge. */
html:is([data-yo-rib],[data-yo-fit="2"],[data-yo-fit="3"]) body .ymm-rib .ymm-rb{padding-inline:2px!important;min-width:42px!important}
html:is([data-yo-rib],[data-yo-fit="2"],[data-yo-fit="3"]) body .ymm-rib{gap:0!important;padding-inline:6px!important}
html:is([data-yo-rib="2"],[data-yo-fit="3"]) body .ymm-rib .ymm-rb>span{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important}
html:is([data-yo-rib="2"],[data-yo-fit="3"]) body .ymm-rib .ymm-rb{min-width:36px!important}

/* in-app dark mode with real rows (seen with the product's own preview inbox): the list's secondary text (subject, snippet,
   time) kept its light-mode grey #5a526e (2.47:1 on the dark list), and the thread-count pill kept #3b1366 on dark (1.16:1). */
html.dark span.sub,html.dark span.when,html.dark span.sn,html.dark .it .sn,html.dark .it .when,html.dark .it .sub{color:#c3bdd8!important}
html.dark.r4 .mail #items .it .sub,html.dark.r4 .mail #items .it .sn,html.dark.r4 .mail #items .it .when{color:#c3bdd8!important}
html.dark .cnt,html.dark .it .cnt{background:#2e2752!important;color:#e9e1ff!important}