/* mail-r3.css — phone redesign round 3 (task 0c576e18). Phone only (<=760px). Desktop untouched. */
@media (max-width:760px){
html.r3{--r3-s1:#f4f1fa;--r3-s2:#ece6f7;--r3-hl:#ebe3fb;--r3-ink:#1f1530;--r3-mut:#6f6782;--r3-card:#fff;--r3-bg:#fbfaff;--r3-line:#ebe6f3}
/* ---------- header: avatar + account line on the start side, round icon buttons on the end side ---------- */
html.r3 #hdr{display:flex;align-items:center;gap:2px;min-height:60px;padding-inline:8px;background:var(--r3-bg);border-bottom:1px solid var(--r3-line);box-shadow:none}
html.r3 #hdr>.brand,html.r3 #hdr>.sp,html.r3 #hdr>[data-view=settings],html.r3 #hdr>#ymm-sw,html.r3 #hdr [data-wal]{display:none!important}
html.r3 #hdr>#acct{order:-3;flex:0 0 auto;display:flex;align-items:center;gap:4px}
html.r3 #hdr>#acct .av{width:40px!important;height:40px!important;min-width:40px;border-radius:50%!important;font-size:16px;font-weight:700;margin:2px}
html.r3 #hdr>.r3-acl{order:-2;flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;height:48px;padding:0 6px;border:0;background:none;font:inherit;color:var(--r3-ink);text-align:start;cursor:pointer}
html.r3 #hdr>.r3-acl b{font-size:16px;font-weight:700;line-height:1.25;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
html.r3 #hdr>.r3-acl small{font-size:13px;color:var(--r3-mut);line-height:1.25;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
html.r3 #hdr>nav.tabs{order:1;flex:0 0 auto;display:flex;gap:0;padding:0;margin:0;background:none;border:0}
html.r3 #hdr>.y365-sw{order:2}
html.r3 #hdr>[data-menu]{order:3}
/* every header icon control: a 44px hit box with a 40px round soft surface */
html.r3 #hdr>nav.tabs>button,html.r3 #hdr>.y365-sw,html.r3 #hdr>[data-menu]{width:44px!important;min-width:44px!important;height:44px!important;padding:2px!important;border:0!important;border-radius:50%!important;background:var(--r3-s1)!important;background-clip:content-box!important;color:var(--r3-ink)!important;display:grid!important;place-items:center;box-shadow:none!important}
html.r3 #hdr>nav.tabs>button:not([aria-selected=true]){background:transparent!important}
html.r3 #hdr>nav.tabs>button[aria-selected=true]{background:var(--r3-hl)!important;background-clip:content-box!important;color:var(--p8,#3b1366)!important}
html.r3 #hdr>nav.tabs>button[aria-selected=true]::after,html.r3 #hdr>nav.tabs>button::before{display:none!important}
html.r3 #hdr>nav.tabs>button span{display:none!important}
html.r3 #hdr>nav.tabs>button .ic,html.r3 #hdr>[data-menu] .ic,html.r3 #hdr>.y365-sw svg{width:20px;height:20px}
/* ---------- list: single column, larger type, softer surfaces ---------- */
html.r3 .mail.m-list>.list{background:var(--r3-bg)}
html.r3 .mail.m-list .lhead{padding:12px 14px 6px}
html.r3 .mail.m-list .lhead .search{border-radius:999px!important;background:var(--r3-s1)!important;border:1px solid transparent!important;min-height:46px}
html.r3 .mail.m-list .lhead .search input{font-size:16px!important}
html.r3 .mail.m-list .lbar h2{font-size:22px;font-weight:800;letter-spacing:0}
html.r3 .mail.m-list .it{padding:14px 16px!important;gap:12px!important;border-bottom:1px solid var(--r3-line)}
html.r3 .mail.m-list .it .who{font-size:16.5px!important;font-weight:600}
html.r3 .mail.m-list .it.unread .who{font-weight:800}
html.r3 .mail.m-list .it .sub{font-size:15.5px!important}
html.r3 .mail.m-list .it .sn{font-size:14.5px!important;color:var(--r3-mut)}
html.r3 .mail.m-list .it .when{font-size:13px!important;color:var(--r3-mut)}
html.r3 .mail.m-list .it>.av{width:44px!important;height:44px!important;border-radius:50%!important;font-size:16px}
html.r3 .mail.m-list .it.on{background:var(--r3-hl)}
/* floating pill new message */
html.r3 .mail.m-list .fab{border-radius:999px!important;height:54px!important;padding:0 24px!important;font-size:16px!important}
/* ---------- drawer (side menu) ---------- */
html.r3 .mail .rail{top:0!important;width:min(330px,88vw)!important;z-index:60!important;padding:calc(10px + env(safe-area-inset-top)) 14px 0!important;gap:6px!important;background:var(--r3-card)!important;border:0!important;border-start-end-radius:24px;border-end-end-radius:24px;box-shadow:0 20px 60px -10px rgba(36,9,63,.35)!important;display:flex!important;flex-direction:column}
html.r3 .mail.rail-open .scrim{inset:0!important;z-index:59!important;background:rgba(20,12,36,.38)!important}
html.r3 .mail .rail>.btn.primary.wide[data-compose]{display:none!important}
html.r3 .rail .r3-dh{display:flex;align-items:center;gap:12px;padding:6px 2px 12px;border-bottom:1px solid var(--r3-line);margin-bottom:6px}
html.r3 .rail .r3-av{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:linear-gradient(135deg,#3b1366,#7a3fd0);color:#fff;font-weight:700;font-size:19px}
html.r3 .rail .r3-dt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
html.r3 .rail .r3-dt b{font-size:17px;font-weight:700;color:var(--r3-ink);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
html.r3 .rail .r3-dt small{font-size:13.5px;color:var(--r3-mut)}
html.r3 .r3-rb{width:44px;height:44px;min-width:44px;border-radius:50%;border:0;background:var(--r3-s1);color:var(--r3-ink);display:grid;place-items:center;cursor:pointer;padding:0;flex:0 0 auto}
html.r3 .r3-rb .ic{width:20px;height:20px}
html.r3 .rail .accsel{padding:0 4px}
html.r3 .rail .accsel select{min-height:44px;border-radius:14px;background:var(--r3-s1);border:1px solid transparent;font-size:15px;padding-inline:12px}
html.r3 .rail .r3-sec{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:40px;padding:10px 8px 4px;border:0;background:none;font:inherit;font-size:13px;font-weight:700;color:var(--r3-mut);cursor:pointer;text-align:start}
html.r3 .rail .r3-sec .ic{width:16px;height:16px;transition:transform .15s}
html.r3 .rail .r3-sec[aria-expanded=false] .ic{transform:rotate(90deg)}
html.r3[dir=ltr] .rail .r3-sec[aria-expanded=false] .ic,html.r3 [dir=ltr] .rail .r3-sec[aria-expanded=false] .ic{transform:rotate(-90deg)}
html.r3 .rail .r3-lab{cursor:default;min-height:32px}
html.r3 .rail nav.folders.r3-col{display:none!important}
html.r3 .rail nav.folders{display:flex;flex-direction:column;gap:2px}
html.r3 .rail .fhead{padding:12px 8px 2px!important;font-size:13px!important;color:var(--r3-mut)}
html.r3 .rail .fi{min-height:50px!important;padding:10px 12px!important;gap:14px!important;border-radius:16px!important;font-size:16.5px!important;color:var(--r3-ink);width:100%}
html.r3 .rail .fi .ic{width:21px;height:21px;color:var(--r3-mut);flex:0 0 auto}
html.r3 .rail .fi .mx-dot{flex:0 0 12px!important;width:12px!important;height:12px!important;border-radius:50%!important;margin-inline:4px}
html.r3 .rail .fi span:not(.mx-dot){flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
html.r3 .rail .fi.on{background:var(--r3-hl)!important;color:var(--p8,#3b1366)!important;font-weight:700}
html.r3 .rail .fi.on .ic{color:var(--p7,#4f1d86)}
html.r3 .rail .fi b{min-width:24px;height:24px;padding:0 7px!important;border-radius:999px!important;display:inline-grid;place-items:center;font-size:12.5px!important;font-weight:700;background:var(--p7,#4f1d86)!important;color:#fff!important;margin-inline-start:auto}
html.r3 .rail .r3-new{font-style:normal;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--r3-hl);color:var(--p8,#3b1366)}
html.r3 .rail .note.conn{border-radius:16px;margin:6px 2px}
html.r3 .rail .r3-card{display:flex;align-items:center;gap:12px;margin:10px 2px 4px;padding:14px;border-radius:20px;background:linear-gradient(135deg,#f3edff,#e9e0fb);color:var(--r3-ink)}
html.r3 .rail .r3-card[hidden]{display:none}
html.r3 .rail .r3-ci{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--p7,#4f1d86);flex:0 0 auto}
html.r3 .rail .r3-ci .ic{width:20px;height:20px}
html.r3 .rail .r3-ct{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
html.r3 .rail .r3-ct small{font-size:12.5px;color:var(--r3-mut)}
html.r3 .rail .r3-ct b{font-size:16px;font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
html.r3 .rail .r3-pill{min-height:44px;padding:0 18px;border-radius:999px;border:0;background:var(--p8,#3b1366);color:#fff;font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;flex:0 0 auto}
html.r3 .rail .r3-bot{position:sticky;bottom:0;margin:auto -14px 0;padding:12px 14px calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px;background:linear-gradient(to top,var(--r3-card) 78%,rgba(255,255,255,0));z-index:2}
html.r3 .rail .r3-cta{margin-inline-start:auto;min-height:50px;padding:0 22px;border-radius:999px;border:0;background:var(--grad,linear-gradient(135deg,#3b1366,#7a3fd0));color:#fff;font:inherit;font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px;box-shadow:0 10px 24px -10px rgba(59,19,102,.6);cursor:pointer;white-space:nowrap}
html.r3 .rail .r3-cta .ic{width:19px;height:19px}
html.r3 .rail .r3-cta{min-width:0;flex:0 1 auto;justify-content:center}
html.r3 .rail .r3-cta span{overflow:hidden;text-overflow:ellipsis}
@media (max-width:360px){html.r3 .mail .rail{width:92vw!important}html.r3 .rail .r3-bot{gap:8px}html.r3 .rail .r3-cta{padding:0 14px;font-size:15px}}
/* mode picker becomes a bottom sheet on phones */
html.r3 .ymm-pick{top:auto!important;bottom:calc(10px + env(safe-area-inset-bottom))!important;left:10px!important;right:10px!important;width:auto!important;border-radius:22px!important;padding:14px!important;z-index:90!important}
html.r3 .ymm-pick .ymm-mo{min-height:56px;border-radius:16px}
/* ---------- dark theme (follows the phone's setting) ---------- */
@media (prefers-color-scheme:dark){
 html.r3{color-scheme:dark;--bg:#121019;--card:#1b1825;--ink:#ece8f5;--ink2:#cfc8de;--mut:#a59eb6;--line:#2c2738;--p1:#231d33;--p2:#2e2545;--acc2:#2e2545;--r3-s1:#231f2e;--r3-s2:#2b2638;--r3-hl:#352a52;--r3-ink:#ece8f5;--r3-mut:#a59eb6;--r3-card:#1b1825;--r3-bg:#121019;--r3-line:#2a2536}
 html.r3 body{background:var(--bg);color:var(--ink)}
 html.r3 #hdr{background:var(--r3-bg)!important}
 html.r3 .mail,html.r3 .mail .list,html.r3 .mail .read,html.r3 .mail .rp,html.r3 .lhead,html.r3 .lbar,html.r3 .items{background:var(--r3-bg)!important;color:var(--ink)}
 html.r3 .mail .it{color:var(--ink)}
 html.r3 .mail .it.unread{background:#18141f}
 html.r3 .rail .fi.on,html.r3 #hdr>nav.tabs>button[aria-selected=true]{color:#d9c8ff!important}
 html.r3 .rail .fi.on .ic{color:#c3a8ff}
 html.r3 .rail .r3-card{background:linear-gradient(135deg,#2a2140,#322653)}
 html.r3 .rail .r3-ci{background:#1b1825;color:#c3a8ff}
 html.r3 .rail .r3-pill{background:#c3a8ff;color:#1b1030}
 html.r3 .rail .r3-bot{background:linear-gradient(to top,var(--r3-card) 78%,rgba(27,24,37,0))}
 html.r3 .ymm-pick,html.r3 .menu,html.r3 .pop{background:var(--card)!important;color:var(--ink)}
 html.r3[data-yo-app] header#hdr,html.r3[data-yo-app].yoc-on header#hdr{background:#121019!important;border-bottom-color:#2a2536!important}
 html.r3 #hdr>.r3-acl b{color:#ece8f5}
 html.r3 .fc,html.r3 .ymm-e,html.r3 .ymm-e button,html.r3 .ymm-rib,html.r3 .ymm-rib button,html.r3 .chip,html.r3 .ymk,html.r3 .ymk-invite{background:#231f2e!important;color:#e4def0!important;border-color:#352f44!important}
 html.r3 .fc.on,html.r3 .fc[aria-pressed=true],html.r3 .fc[aria-selected=true]{background:#5b3fa3!important;color:#fff!important}
 html.r3 .ymm-e *{color:inherit}
 html.r3 .rail .accsel select{color:#ece8f5!important;background:#231f2e!important}
 html.r3 .mail .it .ck input{accent-color:#8b6bd8;filter:invert(.88) hue-rotate(180deg)}
 html.r3 input,html.r3 select,html.r3 textarea{background:var(--r3-s1);color:var(--ink);border-color:var(--line)}
}
}

/* w67-cg-07d00f: phone header — the account name is never cut. The theme switch moves into the account menu (one tap away); on phones the name may use two lines (the selected tab already names the view); at 360 px and below, where no name fits, the name button gives way (the menu button beside it opens the same drawer and the avatar names the account). */
@media (max-width:480px){html.r3 #hdr>#yo-thm26{display:none!important}html.r3 #hdr>.r3-acl{height:auto;min-height:44px;min-width:0}html.r3 #hdr>.r3-acl b{white-space:normal;font-size:14px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere;text-overflow:clip}html.r3 #hdr>.r3-acl small{display:none}}
@media (max-width:360px){html.r3 #hdr>.r3-acl{display:none!important}}