/* 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{display:none!important} /* w91o: icon-only at the tight tiers; the button keeps its own aria-label «Search commands», so nothing is lost (a clipped span read as cut-off text) */
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}

/* w91k: the reduce-motion button was 36px wide on phones; same 44px as the buttons beside it */
@media (max-width:760px){#yo-mot{min-width:44px!important;min-height:44px}}
/* w91o (1 Nov): with the Outlook ribbon on screen, «New mail» lives in the ribbon; the folder rail's own «New message» was the same command twice, 170 px apart. Phones (r4, drawer) keep theirs. */
@media (min-width:901px){html:not(.r4) body:has(#ymm-rib) .rail>.btn.primary.wide[data-compose]{display:none}}
/* w113-themes (theme-matrix contrast sweep) — Mail design tokens per theme.
   --yo-mut-ink: secondary text (dates, times, subjects, small labels) was a hard-coded light grey #5a526e with !important (wave 10),
   so in dark mode the meeting dates in «Your upcoming meetings» read 2.34:1. It is a token now: light keeps #5a526e, dark uses the dark list grey.
   --p8: brand ink on tinted surfaces (selected segment «Month», settings tabs, chips). The dark theme darkens the tints but kept the ink (1.20:1);
   dark now uses the same violet hue, lighter. The one rule that paints --p8 as a background (.fc.on) keeps a mid violet under white text.
   The unflagged star (Flag) was the line colour (1.27:1 light, 1.44:1 dark); it is a muted ink now (3:1+ for a control icon). */
html.dark{--yo-mut-ink:#c3bdd8;--p8:#dfcaf6}
html.dark .fc.on{background:#5b3fa3;border-color:#5b3fa3;color:#fff}
.star:not(.on){color:#8a82a0}.star:not(.on):hover{color:var(--ink2)}
html.dark .star:not(.on){color:#9a91ba}html.dark .star:not(.on):hover{color:#d6d0f2}
/* w113-themes-mail-20261102 */
/* w144-mail-phone (task c1daa3e6): Mail on a phone vs Outlook mobile.
   1) The open message had no visible Reply on phones: mail-r4 hides the reading pane's [data-r] buttons until «المزيد» is tapped,
      and w11 hides the floating «رد» bar while a message is open. Reply / Reply all / Forward now sit under the message,
      pinned to the bottom of the reading pane (one tap, like Outlook mobile). The bilingual-reply button stays behind «المزيد».
   3) Compose: the Send row is pinned to the bottom of the sheet and the sheet follows the on-screen keyboard (see mail-r4.js w144 block).
   2) In the list, an English name or subject inside an Arabic row (and the reverse) lost its START when truncated
      («…ales Director – Eastern Province»). Each line now takes its own direction, so the ellipsis falls at its end,
      while the row keeps the page's alignment. */
@media (max-width:760px){
html.r4:not(.r4-rx) .mail.m-read #read .replybar [data-r]{display:inline-flex!important}
html.r4 .mail.m-read #read .replybar{position:sticky;bottom:0;z-index:4;flex-wrap:wrap;gap:8px;margin-top:12px;padding:8px 0 calc(8px + env(safe-area-inset-bottom,0px));background:var(--r4-bg,#fff);border-top:1px solid var(--r4-line,#efebf5)}
html.r4 .mail.m-read #read .replybar [data-r]{flex:1 1 auto;min-width:0;min-height:44px;justify-content:center;white-space:nowrap}
/* w152-reach-coverage (task 9553da8b): keyboard focus on a link or button near the end of a message (an attachment, its download) scrolls clear of the sticky reply bar instead of landing under it */
html.r4 .mail.m-read #read{scroll-padding-bottom:84px}
/* w144 fix-up: the reading pane kept 104 px of bottom padding for the floating bar (hidden in the reader since w11), which held the pinned bar 104 px above the bottom, over the attachments */
html.r4 .mail.m-read #read{padding-bottom:0!important}
/* w144 fix-up: in the phone reader the header and ribbon are hidden (r4), but .mail kept their 110 px, leaving a blank band under the pinned bar */
@media (max-width:760px){html.r4.r4-read .mail.m-read{height:100dvh!important}}
}
.mail #items .it .who,.mail #items .it .sub,.mail #items .it .sn{unicode-bidi:plaintext}
html[dir=rtl] .mail #items .it .who,html[dir=rtl] .mail #items .it .sub,html[dir=rtl] .mail #items .it .sn{text-align:right}
html[dir=ltr] .mail #items .it .who,html[dir=ltr] .mail #items .it .sub,html[dir=ltr] .mail #items .it .sn{text-align:left}
@media (max-width:760px){
.dlg.wide.cdlg .cfoot{position:sticky;bottom:0;z-index:3;background:#fff;margin-inline:-16px;padding:8px 16px;border-top:1px solid #eee9f5}
html.dark .dlg.wide.cdlg .cfoot{background:#1b1834;border-top-color:#2a2436}
html.yo-kb .dlg-back:has(> .dlg.cdlg){top:var(--yo-vvt,0px);bottom:auto;height:var(--yo-vvh,100dvh)}
html.yo-kb .dlg.wide.cdlg{height:var(--yo-vvh,100dvh);max-height:var(--yo-vvh,100dvh)}
}
/* w144-mail-phone-20261103 */