/* wave 10 (task 9ffa69cc): Mail ar-360 crawl findings — tap targets ≥44 px, solid readable text, labels dialog fits a phone.
   !important because earlier r3/r4 rules use !important (wave 9 note). */
button.av{min-width:44px!important}
.yoc-chip{min-height:44px!important}
.yoc-morebtn{min-height:44px!important}
a.att{min-height:44px!important;display:inline-flex!important;align-items:center;gap:6px}
.pvbtn{min-width:44px!important;min-height:44px!important;display:inline-flex!important;align-items:center;justify-content:center}
.pvcap i{color:#4f5660!important}
.y365-sw{min-width:44px!important;min-height:44px!important}
.tiny.muted,small.muted,.dlg small,small{color:#5a526e!important}
span.sub{color:#5a526e!important}
html.r4 .mail #items .it .sub{color:#5a526e!important}
.yt-mh{color:#5a526e!important}
.chips>button:not(.on){color:#2b2340!important;background:#fff!important;border:1px solid #d9d3e6!important}
.chips>button.on{color:#fff!important;background:#4b3fb0!important}
.dlg{max-width:calc(100vw - 16px)!important;box-sizing:border-box;overflow-x:hidden!important}
.dlg *{min-width:0;box-sizing:border-box}
.dlg input,.dlg select,.dlg textarea{max-width:100%!important}
.dlg .row,.dlg form>div,.dlg li,.dlg [class*=row]{flex-wrap:wrap!important}
@media (max-width:700px),(pointer:coarse){
 aside.rail button,nav.apps button,.yt-apps button,.y365 button{min-width:44px!important}
 .yoc-pop,.yoc-up{flex-wrap:wrap!important;max-width:calc(100vw - 16px)!important}
 .yoc-pop .yoc-s,.yoc-up .yoc-s,button.yoc-s{min-width:40px!important;min-height:40px!important}
}
span.when,span.sn,.it .sn,.it .when{color:#5a526e!important}
/* v4: beat the header's own id-level !important sizing; header tabs; reply bar solid colours */
html body #hdr #acct button.av,html body header.top .acct button.av,html body .acct>button.av{min-width:44px!important;width:44px!important;height:44px!important}
html body nav.tabs[role=tablist]>button,html body header nav.tabs>button{min-width:44px!important;min-height:44px!important}
html body button.btn[data-r="reply"]{background:#4b3fb0!important;background-image:none!important;color:#fff!important;border-color:#4b3fb0!important}
html body button.btn[data-r]:not([data-r="reply"]){background:#fff!important;background-image:none!important;color:#2b2340!important;border:1px solid #d9d3e6!important}
/* v5: mail.css sizes these with (2 ids + 2 classes)!important; out-rank it */
html body #hdr.top #acct.acct button.av.av,html body #hdr.top #acct.acct .av.av{width:44px!important;min-width:44px!important;height:44px!important}
html body #hdr.top>.y365-sw.y365-sw,html body #hdr.top>.ymm-sw.ymm-sw{width:44px!important;min-width:44px!important}
html body #hdr.top nav.tabs.tabs>button[role],html body #hdr.top nav.tabs.tabs>button{min-width:44px!important}
/* v6: filter chips' selected state and the reading-pane action buttons are solid at every moment (crawl read 1.23 and 1.04 mid-state) */
html body .r4-chips>button{transition:none!important;opacity:1!important}
html body .r4-chips>button.on,html body .r4-chips>button[aria-pressed="true"]{background:#4b3fb0!important;color:#fff!important;border-color:#4b3fb0!important}
html body .r4-chips>button:not(.on):not([aria-pressed="true"]){background:#fff!important;color:#1d1430!important}
html body button.btn[data-r]{transition:none!important;opacity:1!important}

/* w11 (task a5625906): on phones the floating assistant/compose bar sat over the open message's reply bar
   (the «إعادة توجيه» button was covered by the compose button at 360 px). Hide it while a message is open. */
@media (max-width:760px){html.r4 .mail.m-read~.r4-bar,html.r4 body:has(.mail.m-read) .r4-bar{display:none!important}}