/* Mail on the computer (deskmail.js). Only the desktop's own tokens from app.css, so Light, Dark and Automatic follow
   the switch in Settings. One Amber action per view, no shadows, icons drawn with a 1.75 stroke. */
/* Text size (switch mail_text_size, deskmail.js JangoMailText): ONE number sets every mail font size in this file, deskmailthreads.css and deskmailextras.css.
   Each size is its old px times --mail-fs (1 when the attribute is not set: the switch off, or Standard), and a size under 12px is lifted to --mail-min.
   Larger: 8/7, so the 14px base reads at 16px, 13px chips at 15px, 12px times at 13.7px, 11px counts at 12.6px. Tune --mail-fs here. */
:root[data-mail-text="larger"]{--mail-fs:1.1429;--mail-min:12px}
#mail{flex:1;min-width:0;display:flex;height:100%;background:var(--page);color:var(--ink);font-size:calc(14px * var(--mail-fs,1));line-height:1.4}
#mail .grow{flex:1;min-width:0}

/* the list */
.ml-list{width:var(--side-mail,400px);flex:none;display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--hair-soft);background:var(--page);position:relative}
.ml-stale{display:flex;align-items:center;gap:8px;margin:0 16px 8px;padding:6px 10px;border-radius:8px;background:var(--card);border:1px solid var(--card-line);color:var(--inkm);font-size:calc(12px * var(--mail-fs,1))}
.ml-stale-retry{flex:none}
#mail.list-hidden .ml-list{display:none}
.ml-head{padding:16px 16px 12px;display:flex;flex-direction:column;gap:12px}
.ml-top{display:flex;align-items:center;gap:10px}
.ml-title{font-size:calc(24px * var(--mail-fs,1));font-weight:700;letter-spacing:-.02em;margin:0;line-height:1.2}
.ml-acct{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 10px;border-radius:999px;background:var(--card);border:1px solid var(--card-line);font-size:calc(12px * var(--mail-fs,1));font-weight:500;color:var(--ink)}
.ml-compose{min-height:32px;height:32px;padding:0 14px;gap:6px;border-radius:999px;font-size:calc(14px * var(--mail-fs,1));font-weight:600;display:inline-flex;align-items:center}
.ml-compose.ml-sec{background:var(--input);color:var(--ink);border:1px solid var(--card-line)}
.ml-find{height:38px;border-radius:12px;background:var(--card);border-color:var(--card-line);padding:0 8px 0 12px}
.ml-find input{cursor:pointer}
.ml-find kbd{margin-left:auto}
.ml-chips{gap:6px}
.ml-chip{height:28px;padding:0 12px;font-size:calc(13px * var(--mail-fs,1));display:inline-flex;align-items:center;gap:6px}
.ml-count{font-size:max(var(--mail-min,0px),calc(11px * var(--mail-fs,1)));font-weight:600;padding:0 6px;border-radius:999px;background:var(--card);color:var(--ink);line-height:16px}
.ml-chip[aria-pressed="true"] .ml-count{background:var(--chip-on-ink);color:var(--chip-on)}
.ml-rows{list-style:none;margin:0;padding:0;flex:1;min-height:0;overflow-y:auto;border-top:1px solid var(--hair-soft)}
.ml-row{height:64px;padding:0 16px;display:flex;flex-direction:column;justify-content:center;gap:4px;border-bottom:1px solid var(--hair-soft);cursor:pointer;outline-offset:-2px}
.ml-row:hover{background:var(--hover)}
.ml-row.sel{background:var(--sel)}
.ml-r1{display:flex;align-items:center;gap:6px;line-height:1.2}
.ml-dot{width:8px;height:8px;border-radius:50%;flex:none;margin-right:2px}
.ml-row.unread .ml-dot{background:var(--ink)}
.ml-who{flex:1;min-width:0;font-size:calc(14px * var(--mail-fs,1));font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-row.unread .ml-who{font-weight:700}
.ml-n{color:var(--inkm);font-size:calc(12px * var(--mail-fs,1));font-weight:400}
.ml-time{flex:none;font-size:calc(12px * var(--mail-fs,1));color:var(--inkm)}
.ml-row.unread .ml-time{color:var(--ink);font-weight:600}
.ml-r2{display:flex;align-items:center;gap:8px;font-size:calc(13px * var(--mail-fs,1));line-height:1.2;min-width:0}
.ml-line{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--inkm)}
.ml-tag{font-size:max(var(--mail-min,0px),calc(11px * var(--mail-fs,1)));font-weight:500;color:var(--inkm);margin-right:6px}
.ml-subj{color:var(--ink);font-weight:500}
.ml-row:not(.unread) .ml-subj{font-weight:400}
.ml-prev{color:var(--inkm)}
.ml-att{flex:none;display:inline-flex;align-items:center;gap:4px;max-width:150px;height:20px;padding:0 6px;border-radius:6px;background:var(--card);border:1px solid var(--card-line);font-size:max(var(--mail-min,0px),calc(11px * var(--mail-fs,1)));color:var(--ink);white-space:nowrap;overflow:hidden}
.ml-att span{overflow:hidden;text-overflow:ellipsis}
.ml-att svg{flex:none;color:var(--inkm)}
button.ml-att:hover{border-color:var(--ink)}
.ml-unsub{color:var(--inkm)}
.ml-note{padding:18px 16px;color:var(--inkm);font-size:calc(13px * var(--mail-fs,1));list-style:none}
.ml-off{padding:40px 24px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.ml-off p{margin:0;font-size:calc(15px * var(--mail-fs,1));line-height:1.5;max-width:22em}
.ml-retry{min-height:32px;padding:0 16px;border-radius:999px;font-size:calc(13px * var(--mail-fs,1))}
.ml-prog-host,.ml-panel{margin:0 16px 8px}
.ml-prog-host[hidden],.ml-panel[hidden],.ml-prog[hidden]{display:none!important}
.ml-prog{display:flex;flex-direction:column;gap:8px;padding:14px 16px;max-width:34em}
.ml-prog-text{margin:0;font-size:calc(14px * var(--mail-fs,1));line-height:1.45;color:var(--ink)}
.ml-prog-bar{position:relative;height:6px;border-radius:999px;background:var(--card-line,rgba(128,128,128,.25));overflow:hidden}
.ml-prog-bar i{display:block;height:100%;width:0;border-radius:999px;background:var(--ink,currentColor);transition:width .3s ease}
.ml-prog-bar.ml-indet i{position:absolute;width:35%;animation:ml-indet 1.4s ease-in-out infinite}
@keyframes ml-indet{0%{left:-35%}100%{left:100%}}
@media (prefers-reduced-motion:reduce){.ml-prog-bar.ml-indet i{animation:none;width:100%;opacity:.5}}
.ml-problem{display:flex;flex-direction:column;gap:10px;padding:18px 16px;max-width:34em;align-items:flex-start}
.ml-problem-title{margin:0;font-size:calc(17px * var(--mail-fs,1))}
.ml-problem-why{margin:0;font-size:calc(13px * var(--mail-fs,1));line-height:1.5;color:var(--inkm)}
.ml-problem-steps{margin:0;padding-left:20px;font-size:calc(14px * var(--mail-fs,1));line-height:1.55}
.ml-problem-btns{display:flex;gap:8px;flex-wrap:wrap}

/* the reading pane */
.ml-read{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0;background:var(--page)}
#mail.doc-open .ml-read{flex:none;width:560px;border-right:1px solid var(--hair-soft)}
.ml-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center}
.ml-empty p{margin:0}
.ml-rhead{display:flex;align-items:center;gap:16px;padding:14px 24px;border-bottom:1px solid var(--hair-soft);flex:none}
.ml-back{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 10px;border-radius:999px;border:1px solid var(--card-line);background:var(--card);font-size:calc(13px * var(--mail-fs,1));color:var(--inkm);flex:none}
.ml-back:hover{color:var(--ink)}
.ml-rinfo{flex:1;min-width:0}
.ml-rtitle{font-size:calc(20px * var(--mail-fs,1));font-weight:600;letter-spacing:-.01em;margin:0 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.ml-rmeta{margin:0;font-size:calc(13px * var(--mail-fs,1));color:var(--inkm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-tools{display:flex;gap:4px;flex:none}
.ml-tools .icon-btn{border-radius:10px}
.ml-tools .icon-btn:hover{background:var(--card)}
.ml-stream{flex:1;min-height:0;overflow-y:auto;padding:20px 24px 24px;display:flex;flex-direction:column;gap:12px}
.ml-catch{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--card-line);border-radius:14px;padding:14px 16px;flex:none}
.ml-orb{width:18px;height:18px;border-radius:50%;flex:none;margin-top:1px;background:radial-gradient(circle at 35% 30%,#f6d79a 0,#ebaa4c 30%,#6f7f45 66%,#114834 100%)}
.ml-catch-h{margin:0 0 6px;font-size:calc(13px * var(--mail-fs,1));font-weight:600}
.ml-catch ul{margin:0;padding-left:18px;font-size:calc(13px * var(--mail-fs,1));line-height:1.5}
.ml-catch li{margin-bottom:3px}
.ml-needs{margin:6px 0 0;font-size:calc(13px * var(--mail-fs,1));font-weight:600}
.ml-fold{flex:none;height:22px;border-radius:999px;border:1px solid var(--card-line);background:var(--card);color:var(--inkm);font-size:calc(13px * var(--mail-fs,1));font-weight:500;padding:0 12px}
.ml-fold:hover{color:var(--ink);border-color:var(--line2)}
.ml-bar{flex:none;display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--card-line);background:var(--card);text-align:left;color:var(--ink);font-size:calc(13px * var(--mail-fs,1))}
.ml-bar:hover{border-color:var(--line2)}
.ml-bar-who{width:130px;flex:none;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-bar-gist{flex:1;min-width:0;color:var(--inkm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-bar-time{flex:none;font-size:calc(12px * var(--mail-fs,1));color:var(--inkm)}
.ml-av{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--input);border:1px solid var(--card-line);font-size:calc(12px * var(--mail-fs,1));font-weight:600;color:var(--ink)}
.ml-av.small{width:24px;height:24px;font-size:max(var(--mail-min,0px),calc(10px * var(--mail-fs,1)))}
.ml-msg{flex:none;background:var(--card);border:1px solid var(--card-line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:14px}
.ml-msg-wrap{display:flex;flex-direction:column;gap:12px;flex:none}
.ml-mhead{display:flex;align-items:center;gap:10px}
.ml-mwho{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ml-mname{display:flex;align-items:baseline;gap:6px;min-width:0;font-size:calc(14px * var(--mail-fs,1))}
.ml-maddr{font-size:calc(12px * var(--mail-fs,1));color:var(--inkm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-mto{font-size:calc(12px * var(--mail-fs,1));color:var(--inkm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-mtime{flex:none;font-size:calc(12px * var(--mail-fs,1));color:var(--inkm)}
.ml-mfold{width:28px;height:28px}
.ml-mbody{font-size:calc(14px * var(--mail-fs,1));line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.ml-quoted{margin:-4px 0 0;font-size:calc(12px * var(--mail-fs,1));color:var(--inkm)}
.ml-tiles{display:flex;gap:10px;flex-wrap:wrap}
.ml-tile{width:220px;height:64px;display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;border:1px solid var(--card-line);background:var(--input);text-align:left;color:var(--ink)}
.ml-tile:hover{border-color:var(--ink)}
.ml-thumb{width:36px;height:46px;flex:none;border-radius:4px;background:#f4f1ea;border:1px solid var(--card-line);display:flex;flex-direction:column;gap:3px;padding:7px 5px}
.ml-thumb i{display:block;height:2px;border-radius:1px;background:#8d9793}
.ml-thumb i:nth-child(2n){width:70%}
.ml-thumb.big{width:72px;height:92px;padding:12px 9px;gap:6px}
.ml-tinfo{min-width:0;display:flex;flex-direction:column;gap:2px}
.ml-tname{font-size:calc(13px * var(--mail-fs,1));font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-tsize{font-size:max(var(--mail-min,0px),calc(11px * var(--mail-fs,1)));color:var(--inkm)}
.ml-mfoot{display:flex;justify-content:flex-end;padding-top:6px;border-top:1px solid var(--hair-soft)}
.ml-link{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 8px;border-radius:6px;border:0;background:none;color:var(--ink);font-size:calc(13px * var(--mail-fs,1));font-weight:500}
.ml-link:hover{background:var(--hover)}

/* the reply box at the bottom */
.ml-dock{flex:none;padding:14px 24px 8px;border-top:1px solid var(--hair-soft)}
.ml-reply,.ml-inline{background:var(--card);border:1px solid var(--card-line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.ml-inline{margin-left:48px;padding:14px 16px}
.ml-reply.drop-on,.ml-inline.drop-on,.ml-comp.drop-on{outline:2px dashed var(--focus);outline-offset:-2px}
.ml-reply-to{margin:0;font-size:calc(12px * var(--mail-fs,1));color:var(--inkm);display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden}
.ml-reply-to b{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis}
.ml-reply-in,.ml-inline-in,.ml-body-in{width:100%;resize:none;border:0;background:none;outline:none;color:var(--ink);font:inherit;font-size:calc(14px * var(--mail-fs,1));line-height:1.5;padding:2px 0}
.ml-reply-in::placeholder,.ml-inline-in::placeholder,.ml-body-in::placeholder,.ml-subj-in::placeholder{color:var(--inkm)}
.ml-inline-in{min-height:90px}
.ml-bar-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:4px}
.ml-inline .ml-bar-tools{border-top:1px solid var(--hair-soft);padding-top:10px}
.ml-left,.ml-right{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap}
.ml-tool{width:30px;height:30px}
.ml-tool:hover{background:var(--hover)}
.ml-tool.on{color:var(--ink)}
.ml-toggle{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 8px;border-radius:6px;border:1px solid var(--card-line);background:var(--input);font-size:calc(12px * var(--mail-fs,1));color:var(--inkm)}
.ml-toggle.on{color:var(--ink);font-weight:600;border-color:var(--ink)}
/* mail_hub_contrast (F3422): dark-theme label colour only. --inkm (#8d9793) on --input (#20332d) is 4.44:1; this is 6.07:1. Off: the root carries data-mail-hub-old. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-mail-hub-old]) .ml-toggle:not(.on){color:#a5b2aa}}
:root[data-theme="dark"]:not([data-mail-hub-old]) .ml-toggle:not(.on){color:#a5b2aa}
.ml-when{font-size:calc(12px * var(--mail-fs,1));color:var(--inkm)}
.ml-send2{height:32px;min-height:32px;padding:0 18px;border-radius:999px;font-size:calc(13px * var(--mail-fs,1));font-weight:600}
.chip-btn.ml-send2{background:var(--input)}
.ml-hints{flex:none;margin:0;padding:6px 24px 12px;display:flex;justify-content:center;gap:14px;font-size:calc(12px * var(--mail-fs,1));color:var(--inkm);flex-wrap:wrap}
.ml-hints b{color:var(--ink);font-weight:500}
.ml-hints span+span::before{content:"·";margin-right:14px;color:var(--inkm)}

/* replying to one message (d2) */
.ml-heads{display:flex;flex-wrap:wrap;gap:6px 18px;padding-bottom:10px;border-bottom:1px solid var(--hair-soft)}
.ml-addr{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0;flex:1 1 220px}
.ml-heads .ml-addr{flex:0 1 auto}
.ml-heads .ml-addr-in{min-width:90px}
.ml-addr-l{font-size:calc(13px * var(--mail-fs,1));color:var(--inkm)}
.ml-pill{display:inline-flex;align-items:center;gap:2px;height:24px;padding:0 4px 0 8px;border-radius:6px;background:var(--input);border:1px solid var(--card-line);font-size:calc(12px * var(--mail-fs,1));font-weight:500}
.ml-pill-x{width:18px;height:18px;display:grid;place-items:center;border:0;background:none;color:var(--inkm);padding:0;border-radius:4px}
.ml-pill-x:hover{color:var(--ink)}
.ml-addr-in{flex:1;min-width:120px;border:0;background:none;outline:none;color:var(--ink);font:inherit;font-size:calc(13px * var(--mail-fs,1));height:24px}
.ml-files{display:flex;gap:8px;flex-wrap:wrap}
.ml-file{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 6px 0 10px;border-radius:8px;border:1px solid var(--card-line);background:var(--input);font-size:calc(13px * var(--mail-fs,1));max-width:280px}
.ml-file svg{flex:none;color:var(--inkm)}
.ml-file-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-file-s{font-size:max(var(--mail-min,0px),calc(11px * var(--mail-fs,1)));color:var(--inkm);flex:none}
.ml-split{display:inline-flex;align-items:stretch;padding:0;gap:0;overflow:hidden;height:36px}
.ml-split button{border:0;background:none;color:inherit;font:inherit;font-weight:600;display:inline-flex;align-items:center;gap:8px}
.ml-split-go{padding:0 12px 0 16px}
.ml-split-more{padding:0 12px 0 10px}
.ml-split-line{width:1px;margin:9px 0;background:var(--on-amber);opacity:.35}
.ml-menu .menu-item.strong{font-weight:600}
.ml-pick{display:flex;gap:8px;align-items:center;padding:6px}
.ml-pick input{font:inherit;font-size:calc(13px * var(--mail-fs,1));color:var(--ink);background:var(--input);border:1px solid var(--input-line);border-radius:8px;padding:5px 8px;color-scheme:inherit}

/* the composer (in the reading pane) */
.ml-comp{flex:1;min-height:0;display:flex;flex-direction:column}
.ml-comp-form{flex:1;min-height:0;display:flex;flex-direction:column;gap:0;padding:8px 24px 16px}
.ml-comp-form>.ml-addr{flex:none;min-height:44px;border-bottom:1px solid var(--hair-soft);padding:6px 0}
.ml-from{font:inherit;font-size:calc(13px * var(--mail-fs,1));color:var(--ink);background:none;border:0;outline:none;padding:2px 0;max-width:100%}
.ml-from option{background:var(--card);color:var(--ink)}
.ml-ccbtn{margin-left:auto;color:var(--inkm);font-size:calc(12px * var(--mail-fs,1))}
.ml-subj-in{flex:none;height:46px;border:0;border-bottom:1px solid var(--hair-soft);background:none;outline:none;color:var(--ink);font:inherit;font-size:calc(16px * var(--mail-fs,1));font-weight:600;padding:0}
.ml-body-in{flex:1;min-height:160px;padding:14px 0}
.ml-comp-form .ml-files{padding-bottom:10px}
.ml-comp-form .ml-bar-tools{border-top:1px solid var(--hair-soft);padding-top:12px}
.ml-when-chips{display:flex;gap:6px;flex-wrap:wrap}
.ml-when-chips .chip{height:28px;font-size:calc(12px * var(--mail-fs,1))}
.ml-send{min-height:36px;padding:0 18px}
/* One compact footer on the writing page (lane a-composefooter): Attach icon left, bigger Send with its clock right; every target 44px. */
.ml-comp-form .ml-bar-tools{min-height:64px;padding:6px 0 0}
.ml-foot-tool{width:44px;height:44px}
.ml-sendgroup{display:inline-flex;align-items:stretch;border-radius:999px;overflow:hidden;background:var(--amber);color:var(--on-amber)}
.ml-sendgroup .ml-send{min-height:52px;height:52px;min-width:98px;padding:0 14px 0 20px;border-radius:0;font-size:calc(17.5px * var(--mail-fs,1))}
.ml-sendgroup .ml-send-clock{width:48px;min-height:52px;height:52px;padding:0;border:0;border-left:1px solid color-mix(in srgb,var(--on-amber) 35%,transparent);border-radius:0;background:transparent;color:var(--on-amber)}
.ml-sendgroup .ml-send-clock:hover{background:color-mix(in srgb,var(--on-amber) 10%,transparent)}
.ml-sendgroup .ml-send-clock.on{background:color-mix(in srgb,var(--on-amber) 14%,transparent)}
@media (max-width:420px){.ml-comp-form .ml-bar-tools{flex-wrap:wrap;justify-content:flex-end}}

/* an attachment, side by side (d3) */
.ml-doc{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0;background:var(--page)}
.ml-dhead{flex:none;display:flex;align-items:center;gap:14px;padding:12px 20px;border-bottom:1px solid var(--hair-soft);flex-wrap:wrap}
.ml-dname{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.ml-dname b{font-size:calc(15px * var(--mail-fs,1));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-dpages{flex:none;font-size:calc(12px * var(--mail-fs,1));color:var(--inkm);border:1px solid var(--card-line);border-radius:6px;padding:1px 8px}
.ml-zoom{display:flex;align-items:center;gap:2px;height:32px;padding:0 4px;border-radius:999px;border:1px solid var(--card-line);background:var(--card)}
.ml-zbtn{min-width:28px;height:26px;border:0;background:none;border-radius:999px;color:var(--ink);font-size:calc(15px * var(--mail-fs,1));padding:0 6px}
.ml-zbtn:hover{background:var(--hover)}
.ml-zfit{font-size:calc(12px * var(--mail-fs,1))}
.ml-pct{min-width:44px;text-align:center;font-size:calc(13px * var(--mail-fs,1));font-variant-numeric:tabular-nums}
.ml-dacts{display:flex;align-items:center;gap:8px}
.ml-dbtn{height:32px;border-radius:999px;padding:0 12px;font-size:calc(13px * var(--mail-fs,1));background:var(--card)}
.ml-dview{flex:1;min-height:0;overflow:auto;padding:24px;display:flex;align-items:flex-start;justify-content:center}
.ml-img{display:block;max-width:none;border-radius:4px;background:#fff}
.ml-img.fit{max-width:100%;height:auto}
.ml-dnote{margin:40px 0 0}
.ml-dcard{margin-top:40px;width:min(380px,100%);display:flex;flex-direction:column;align-items:center;gap:10px;padding:28px 24px;border-radius:14px;border:1px solid var(--card-line);background:var(--card);text-align:center}
.ml-dcard b{font-size:calc(15px * var(--mail-fs,1));overflow-wrap:anywhere}
.ml-dcard p{margin:0;font-size:calc(13px * var(--mail-fs,1))}
.ml-dcard-row{display:flex;gap:8px;margin-top:4px}
.ml-dcard-row .chip-btn{height:34px;border-radius:999px;padding:0 14px;font-size:calc(13px * var(--mail-fs,1))}
.ml-ask{flex:none;padding:10px 20px 18px}
.ml-ask input{width:100%;height:44px;border-radius:999px;border:1px solid var(--card-line);background:var(--card);color:var(--ink);font:inherit;font-size:calc(14px * var(--mail-fs,1));padding:0 18px;outline:none}
.ml-ask input::placeholder{color:var(--inkm)}
.ml-ask input:focus-visible{outline:2px solid var(--focus);outline-offset:1px}

/* ⌘K for mail (d4): the chats' palette frame, with matched words in an Amber tint */
.ml-q{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:calc(18px * var(--mail-fs,1));color:var(--ink);outline:none}
.ml-q::-webkit-search-cancel-button{display:none}
.ml-opt{gap:12px}
.ml-opt .opt-two{gap:2px}
.ml-opt .opt-sub{font-size:calc(13px * var(--mail-fs,1))}
.ml-opt-side{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.ml-opt-time{font-size:calc(12px * var(--mail-fs,1));color:var(--inkm)}
.ml-opt-ic{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:6px;border:1px solid var(--card-line);background:var(--input);color:var(--inkm)}
mark.ml-hit{background:color-mix(in srgb,var(--amber) 30%,transparent);color:var(--ink);border-radius:3px;padding:0 2px;font-weight:inherit}

@media (max-width:1180px){.ml-list{width:var(--side-mail,340px)}#mail.doc-open .ml-read{width:440px}}
@media (max-width:760px){.ml-list{width:280px}.ml-rhead,.ml-stream,.ml-dock{padding-left:14px;padding-right:14px}}
@media print{body.ml-printing *{visibility:hidden}body.ml-printing .ml-img,body.ml-printing .ml-img *{visibility:visible}body.ml-printing .ml-img{position:fixed;left:0;top:0;max-width:100%}}

/* The iPhone's mail switches on the page (lane a2-web-mail). Each block is read only when its switch is on (deskmail.js on()). */
.ml-set{flex:none}
.ml-tabs{gap:6px;flex-wrap:wrap}
.ml-chips{flex-wrap:wrap}
/* mail_smartlist: coloured rows, up to two lines of what the sender wrote, a small category tag */
.ml-row.smart{height:auto;min-height:64px;padding-top:10px;padding-bottom:10px}
.ml-row.smart .ml-r2{align-items:flex-start}
.ml-row.smart .ml-line{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ml-row.smart .ml-who{font-weight:600}
.ml-row.smart.unread .ml-dot{background:var(--amber)}
.ml-cat{display:inline-block;font-size:max(var(--mail-min,0px),calc(10px * var(--mail-fs,1)));font-weight:600;letter-spacing:.02em;padding:0 6px;margin-right:6px;border-radius:999px;line-height:16px;color:var(--ink);background:color-mix(in srgb,var(--cat,#8d9793) 24%,transparent);border:1px solid color-mix(in srgb,var(--cat,#8d9793) 55%,transparent)}
.cat-orders{--cat:#1a8f86}.cat-money{--cat:#2f9e44}.cat-calendar{--cat:#3b7dd8}.cat-newsletters,.cat-notifications{--cat:#8d9793}
.ml-row.smart[data-cat="people"] .ml-dot{outline:0}
/* mail_replied_marks */
.ml-mark{flex:none;font-size:max(var(--mail-min,0px),calc(11px * var(--mail-fs,1)));font-weight:500;color:var(--inkm);padding:0 6px;border-radius:999px;border:1px solid var(--card-line);line-height:16px}
/* mail_needs_block: its own tinted block with an accent bar */
.ml-sec-h{display:flex;align-items:center;gap:8px;padding:10px 16px 6px;font-size:calc(12px * var(--mail-fs,1));font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--inkm);list-style:none}
.ml-sec-h.needs{color:var(--ink);background:color-mix(in srgb,var(--amber) 14%,transparent);border-left:3px solid var(--amber)}
.ml-row.in-needs{background:color-mix(in srgb,var(--amber) 8%,transparent);border-left:3px solid var(--amber);height:auto;min-height:56px;padding-top:8px;padding-bottom:8px}
.ml-row.in-needs .ml-line{overflow:hidden;white-space:nowrap}
.ml-why{display:block;font-size:max(var(--mail-min,0px),calc(11px * var(--mail-fs,1)));color:var(--inkm);margin-top:2px}
.ml-fold-h{cursor:pointer;border-top:1px solid var(--hair-soft)}
.ml-fold-h::after{content:"Show";margin-left:auto;font-weight:500;text-transform:none;letter-spacing:0}
.ml-fold-h[aria-expanded="true"]::after{content:"Hide"}
.ml-row.quiet{opacity:.72}
.ml-group{list-style:none;padding:10px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;border-bottom:1px solid var(--hair-soft);background:var(--card)}
/* the notice bar: Undo, offers, draft questions */
.ml-notice{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:14px;max-width:min(560px,92%);padding:10px 16px;border-radius:12px;background:var(--ink);color:var(--page);font-size:calc(13px * var(--mail-fs,1))}
.ml-notice[hidden]{display:none}
.ml-notice .ml-link{color:var(--page);font-weight:600;text-decoration:underline}
#mail{position:relative}
/* mail_rating, mail_nextstep, mail_team_thread */
.ml-rate{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 24px 0;padding:10px 14px;border:1px solid var(--card-line);border-radius:12px;background:var(--card)}
.ml-rate-q{margin:0;flex:1;min-width:10em;font-size:calc(13px * var(--mail-fs,1))}
.ml-rate-caps{display:flex;gap:8px}
.ml-cap{height:30px;padding:0 14px;min-width:7.5em;justify-content:center}
.ml-cap.on,.ml-cap[aria-pressed="true"]{background:var(--ink);color:var(--page)}
.ml-next{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 24px 0}
.ml-next-l{font-size:calc(12px * var(--mail-fs,1));font-weight:600;color:var(--inkm)}
.ml-team{margin:10px 24px 0;padding:8px 12px;border-radius:10px;font-size:calc(13px * var(--mail-fs,1));background:color-mix(in srgb,#3b7dd8 14%,transparent);border:1px solid color-mix(in srgb,#3b7dd8 40%,transparent)}
/* mail_thread_bar */
.ml-grab{display:flex;justify-content:center;align-items:center;width:100%;height:24px;flex:none;background:none;border:0;cursor:pointer;padding:0}
.ml-grab-bar{display:block;width:44px;height:5px;border-radius:999px;background:var(--card-line)}
.ml-grab:hover .ml-grab-bar,.ml-grab:focus-visible .ml-grab-bar{background:var(--ink)}
/* mail_orb_label */
.ml-ask{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:999px;border:1px solid var(--card-line);background:var(--card);color:var(--ink);font-size:calc(12px * var(--mail-fs,1))}
.ml-ask .ml-orb{width:14px;height:14px;flex:none}
/* mail_from_infer */
.ml-from-why{font-size:calc(12px * var(--mail-fs,1));color:var(--inkm);margin-left:8px}
/* thread_polish: room for a three-line title, sections of different tints, the importance card as two capsules */
.ml.tp .ml-rtitle{white-space:normal;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ml.tp .ml-rhead{padding-top:18px}
.ml.tp .ml-msg.mine{background:color-mix(in srgb,var(--amber) 8%,var(--card))}
.ml.tp .ml-catch{background:color-mix(in srgb,#3b7dd8 9%,var(--card))}
.ml.tp .ml-dock{border-top:1px solid var(--hair-soft);background:color-mix(in srgb,var(--ink) 3%,var(--page))}
.ml.tp .ml-rate{flex-direction:column;align-items:stretch}
.ml.tp .ml-rate-caps .ml-cap{flex:1}
@media (max-width:760px){.ml-rate{margin-left:14px;margin-right:14px}.ml-next,.ml-team{margin-left:14px;margin-right:14px}}

/* people suggested while an address is typed (mail_recipient_suggest, lane a-mail-recipients) */
.ml-addr{position:relative}
.ml-sugg{position:absolute;left:0;top:100%;z-index:30;width:min(100%,440px);max-height:288px;overflow:auto;margin-top:2px;padding:4px;border-radius:10px;background:var(--card);border:1px solid var(--card-line)}
.ml-sugg[hidden]{display:none}
.ml-sugg-row{display:flex;flex-direction:column;gap:1px;padding:6px 10px;border-radius:7px;cursor:pointer;min-width:0}
.ml-sugg-row.sel,.ml-sugg-row:hover{background:var(--sel)}
.ml-sugg-n{font-size:calc(13px * var(--mail-fs,1));color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-sugg-a{font-size:calc(12px * var(--mail-fs,1));color:var(--inkm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}