/* =====================================================================================
   mh-mail.css - INTERNAL MAIL (26 Sep 2026)

   The mail window (#mhMail), its dock (.ml-dock), the top bar mail button (#mailBtn)
   and the user menu width. Every value on the window is COPIED from the Staff Account
   popup (#mhDetail.mint-host), measured with getComputedStyle on 26 Sep - rail
   gradient, glass pane, capsule head, .mint-w tile, footer pair. Not re-derived.

   Its own id because a client record (#mhDetail) can be open UNDER the mail window at
   the same time. Prefix ml- was checked free app-wide before it was claimed.

   Layers: #hhDetail 99990 < mail window 100000 < dock 100001 < feedback 100091.
   The dock sits bottom LEFT so it never covers a record's footer buttons.
   ===================================================================================== */

/* ------------------------------------------------------------------ tokens */
#mhMail, #mhCompose, .ml-dock {
  --ml-canvas: #E1E6EB;
  --ml-ink: #1C2A25;
  --ml-ink-1: #1C2733;
  --ml-muted: #677579;
  --ml-label: #7A8A84;
  --ml-pine: #2F6B57;
  --ml-pine-ink: #375A50;
  --ml-tab-ink: #2A4C41;
  --ml-glass: rgba(var(--tg-rgb,255,255,255),calc(.4*var(--tg-k,1)));
  --ml-glass-rim: rgba(255,255,255,.72);
  --ml-tile: rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)));
  --ml-tile-rim: rgba(255,255,255,.85);
  --ml-lift: 0 3px 8px -5px rgba(30,55,48,.14), 0 16px 34px -18px rgba(30,55,48,.26);
  --ml-tile-sh: 0 6px 16px -12px rgba(30,55,48,.35);
  --ml-card-sh: 0 22px 54px -26px rgba(30,55,48,.42);
  --ml-grad: radial-gradient(120% 55% at 90% 3%, rgba(255,255,255,.18), rgba(255,255,255,0) 42%),
             linear-gradient(162deg, #42856E 0%, #2F6B57 60%, #2A5749 100%);
  --ml-rail: radial-gradient(120% 55% at 90% 3%, rgba(255,255,255,.14), rgba(0,0,0,0) 42%),
             linear-gradient(162deg, #2E4A43 0%, #213A33 100%);
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* ------------------------------------------------------------------ stage + window */
#mhMail.ml-stage { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 20px; }
#mhMail .ml-behind { position: absolute; inset: 0; background: rgba(12,24,20,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: mlFade .18s ease both; }
#mhMail .ml-win {
  position: relative; z-index: 1; display: flex; outline: none;
  width: min(1520px, calc(97 * var(--mh-vw, 1vw)));
  height: min(calc(93 * var(--mh-vh, 1vh)), 920px);
  border-radius: 20px; overflow: hidden;
  background: var(--ml-canvas); border: 1px solid rgb(217,223,231);
  box-shadow: 0 50px 110px -22px rgba(8,18,14,.62);
  animation: mlIn .22s cubic-bezier(.2,.8,.2,1) both;
}
@media (max-height: 760px) { #mhMail .ml-win { height: calc(98 * var(--mh-vh, 1vh)); } }
@keyframes mlIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes mlFade { from { opacity: 0; } to { opacity: 1; } }
:is(#mhMail, #mhCompose) svg { display: block; flex: none; }
:is(#mhMail, #mhCompose) button { font: inherit; cursor: pointer; }

/* ------------------------------------------------------------------ rail (Staff Account's) */
:is(#mhMail, #mhCompose) .ml-rail { flex: 0 0 320px; display: flex; flex-direction: column; min-height: 0; color: #fff; background: var(--ml-rail); }
:is(#mhMail, #mhCompose) .ml-rhead { display: flex; align-items: center; gap: 14px; padding: 26px 26px 22px; }
:is(#mhMail, #mhCompose) .ml-ric { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(var(--tg-rgb,255,255,255),calc(.15*var(--tg-k,1))); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
:is(#mhMail, #mhCompose) .ml-ric svg { width: 26px; height: 26px; }
:is(#mhMail, #mhCompose) .ml-rtitle { font-size: 23px; font-weight: 800; letter-spacing: -.46px; text-transform: uppercase; }
:is(#mhMail, #mhCompose) .ml-rscroll { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 16px; padding: 2px 12px 18px; scrollbar-width: none; }
:is(#mhMail, #mhCompose) .ml-rscroll::-webkit-scrollbar { display: none; }

:is(#mhMail, #mhCompose) .ml-compose {
  display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; margin: 0 14px;
  border: 0; border-radius: 14px; background: rgba(var(--tg-rgb,255,255,255),.94); color: #213A33;
  font-size: 15px; font-weight: 800; letter-spacing: .2px;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.55), inset 0 -1px 0 rgba(30,55,48,.08);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
:is(#mhMail, #mhCompose) .ml-compose svg { width: 19px; height: 19px; }
:is(#mhMail, #mhCompose) .ml-compose:hover { background: rgb(var(--tg-rgb,255,255,255)); transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(0,0,0,.6); }

:is(#mhMail, #mhCompose) .ml-flist { display: flex; flex-direction: column; gap: 4px; }
:is(#mhMail, #mhCompose) .ml-fold {
  display: flex; align-items: center; gap: 13px; width: 100%; padding: 10px 14px; border: 0; border-radius: 14px;
  background: transparent; color: #fff; text-align: left; transition: background .15s ease;
}
:is(#mhMail, #mhCompose) .ml-fold:hover { background: rgba(var(--tg-rgb,255,255,255),calc(.07*var(--tg-k,1))); }
:is(#mhMail, #mhCompose) .ml-fold.on { background: rgba(var(--tg-rgb,255,255,255),calc(.13*var(--tg-k,1))); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
/* the pack's rail chip, the same one .sum-ic wears (measured: 56px there; 44 for six rows) */
:is(#mhMail, #mhCompose) .ml-fic {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border-radius: 4px 12px 12px 4px; background: rgba(191,210,186,.14);
  box-shadow: inset 3.5px 0 0 #BFD2BA; color: #BFD2BA;
}
:is(#mhMail, #mhCompose) .ml-fic svg { width: 20px; height: 20px; }
:is(#mhMail, #mhCompose) .ml-fold.on .ml-fic { background: rgba(191,210,186,.24); color: #fff; }
:is(#mhMail, #mhCompose) .ml-fc { flex: 1; min-width: 0; display: flex; flex-direction: column-reverse; gap: 2px; }
:is(#mhMail, #mhCompose) .ml-fk { font-size: 15px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(#mhMail, #mhCompose) .ml-fn {
  min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center;
  background: rgb(var(--tg-rgb,255,255,255)); color: #213A33; font-size: 11.5px; font-weight: 800; flex: none;
}
:is(#mhMail, #mhCompose) .ml-fn.warn { background: #E8B04A; color: #2B1D05; }

/* ------------------------------------------------------------------ pane */
:is(#mhMail, #mhCompose) .ml-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--ml-canvas); }
:is(#mhMail, #mhCompose) .ml-top { display: flex; align-items: center; gap: 14px; padding: 28px 36px 0; }
:is(#mhMail, #mhCompose) .ml-search {
  flex: 1; min-width: 0; height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 12px 0 20px; margin: 0;
  background: var(--ml-glass); border: 1px solid var(--ml-glass-rim); border-radius: 18px; box-shadow: var(--ml-lift);
  -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); color: var(--ml-pine-ink); cursor: text;
}
:is(#mhMail, #mhCompose) .ml-search svg { width: 19px; height: 19px; }
:is(#mhMail, #mhCompose) .ml-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; font-weight: 600; color: var(--ml-ink); }
:is(#mhMail, #mhCompose) .ml-search input::placeholder { color: #8C9A97; font-weight: 500; }
:is(#mhMail, #mhCompose) .ml-sx { width: 32px; height: 32px; border: 0; border-radius: 10px; background: transparent; color: var(--ml-muted); display: grid; place-items: center; }
:is(#mhMail, #mhCompose) .ml-sx:hover { background: rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1))); color: var(--ml-ink-1); }
:is(#mhMail, #mhCompose) .ml-sx svg { width: 15px; height: 15px; }
:is(#mhMail, #mhCompose) .ml-tbtn {
  width: 48px; height: 48px; flex: none; display: grid; place-items: center; padding: 0;
  background: var(--ml-glass); border: 1px solid var(--ml-glass-rim); border-radius: 12px; box-shadow: var(--ml-lift);
  -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); color: var(--ml-pine-ink);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
:is(#mhMail, #mhCompose) .ml-tbtn svg { width: 19px; height: 19px; }
:is(#mhMail, #mhCompose) .ml-tbtn:hover {
  background: rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1))); color: var(--ml-ink-1); transform: translateY(-2px);
  box-shadow: 0 3px 7px -4px rgba(30,55,48,.18), 0 10px 20px -10px rgba(30,55,48,.26), inset 0 0 0 1px rgba(255,255,255,.85);
}

:is(#mhMail, #mhCompose) .ml-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); gap: 22px; padding: 22px 36px 4px; }
/* the two cards = .pd-card.mint */
:is(#mhMail, #mhCompose) .ml-list, :is(#mhMail, #mhCompose) .ml-read {
  min-height: 0; min-width: 0; display: flex; flex-direction: column; padding: 18px;
  background: var(--ml-glass); border: 1px solid var(--ml-glass-rim); border-radius: 22px; box-shadow: var(--ml-card-sh);
  -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
}
/* the capsule head = .mint-ph + .mint-tab */
:is(#mhMail, #mhCompose) .ml-ph {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 43px; padding: 7px 8px 7px 20px;
  background: rgba(var(--tg-rgb,255,255,255),calc(.6*var(--tg-k,1))); border: 1px solid rgba(255,255,255,.8);border-right-color:var(--tg-edge-r,rgba(255,255,255,.8));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.8)); border-radius: 999px; box-shadow: 0 6px 16px -12px rgba(30,55,48,.3);
}
:is(#mhMail, #mhCompose) .ml-tab { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-size: 12.5px; font-weight: 800; letter-spacing: 1.375px; text-transform: uppercase; color: var(--ml-tab-ink); }
:is(#mhMail, #mhCompose) .ml-tab svg { width: 18px; height: 18px; }
:is(#mhMail, #mhCompose) .ml-phn { font-size: 12px; font-weight: 700; color: var(--ml-muted); padding-right: 12px; white-space: nowrap; }

/* ------------------------------------------------------------------ list rows = .mint-w tiles */
:is(#mhMail, #mhCompose) .ml-rows { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding: 2px 2px 6px; }
:is(#mhMail, #mhCompose) .ml-row {
  position: relative; display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; flex: none;
  padding: 12px 34px 12px 14px; border: 1px solid var(--ml-tile-rim); border-radius: 16px;
  background: var(--ml-tile); box-shadow: var(--ml-tile-sh); color: var(--ml-ink);
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
:is(#mhMail, #mhCompose) .ml-row:hover { background: rgba(var(--tg-rgb,255,255,255),.92); transform: translateY(-1px); }
:is(#mhMail, #mhCompose) .ml-row.on { background: rgb(var(--tg-rgb,255,255,255)); box-shadow: inset 4px 0 0 var(--ml-pine), 0 10px 22px -14px rgba(30,55,48,.45); }
:is(#mhMail, #mhCompose) .ml-rc { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
:is(#mhMail, #mhCompose) .ml-r1 { display: flex; align-items: baseline; gap: 10px; }
/* MAILBOLD01 (owner, 1 Oct 2026): "same as Gmail - a new email's title and user name must be bold, and when the user
   clicks on it, it immediately turns un-bold". A READ conversation was 650 (semi-bold) against 800 unread, so every row
   looked bold. Now a read row is REGULAR (450) and only an UNREAD row is bold (800), sender + subject + time. */
:is(#mhMail, #mhCompose) .ml-who { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 450; color: var(--ml-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(#mhMail, #mhCompose) .ml-when { flex: none; font-size: 11.5px; font-weight: 500; color: var(--ml-muted); }
:is(#mhMail, #mhCompose) .ml-subj { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 14px; font-weight: 450; color: var(--ml-ink); }
:is(#mhMail, #mhCompose) .ml-st { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(#mhMail, #mhCompose) .ml-row.unread .ml-who, :is(#mhMail, #mhCompose) .ml-row.unread .ml-st { font-weight: 800; }
:is(#mhMail, #mhCompose) .ml-row.unread .ml-when { color: var(--ml-pine); font-weight: 800; }
:is(#mhMail, #mhCompose) .ml-cnt { flex: none; padding: 1px 7px; border-radius: 999px; background: rgba(47,107,87,.12); color: var(--ml-pine); font-size: 10.5px; font-weight: 800; }
:is(#mhMail, #mhCompose) .ml-imp { flex: none; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: #C6824F; color: #fff; font-size: 11px; font-weight: 900; }
:is(#mhMail, #mhCompose) .ml-snip { font-size: 12.5px; line-height: 1.45; color: var(--ml-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:is(#mhMail, #mhCompose) .ml-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; }
:is(#mhMail, #mhCompose) .ml-dot { position: absolute; right: 14px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--ml-pine); box-shadow: 0 0 0 3px rgba(47,107,87,.16); }

/* avatars - the photo studio default when there is no photo (never initials) */
:is(#mhMail, #mhCompose) .ml-av, .ml-dock .ml-av { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #F4F0E6; overflow: hidden; }
:is(#mhMail, #mhCompose) .ml-av svg { width: 46%; height: 46%; }
:is(#mhMail, #mhCompose) .ml-av.lg { width: 44px; height: 44px; }
:is(#mhMail, #mhCompose) .ml-av.sm { width: 30px; height: 30px; }
:is(#mhMail, #mhCompose) .ml-av.xs { width: 22px; height: 22px; }
/* a draft row: the pen chip instead of a face, and the word Draft in the house red (Gmail's cue) */
:is(#mhMail, #mhCompose) .ml-av.dr { border-radius: 4px 12px 12px 4px; background: rgba(192,83,58,.1); box-shadow: inset 3px 0 0 #C0533A; color: #B04A33; }
:is(#mhMail, #mhCompose) .ml-av.dr svg { width: 19px; height: 19px; }
:is(#mhMail, #mhCompose) .ml-drl { flex: none; color: #C0533A; font-weight: 800; }

/* pills */
:is(#mhMail, #mhCompose) .ml-pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 750; white-space: nowrap; }
:is(#mhMail, #mhCompose) .ml-pill svg { width: 12px; height: 12px; }
:is(#mhMail, #mhCompose) .ml-pill.due { background: rgba(47,107,87,.12); color: var(--ml-pine); }
:is(#mhMail, #mhCompose) .ml-pill.soon { background: rgba(196,154,51,.18); color: #7E5A0E; }
:is(#mhMail, #mhCompose) .ml-pill.late { background: rgba(182,91,67,.14); color: #A0452F; }
:is(#mhMail, #mhCompose) .ml-pill.wait { background: rgba(94,122,131,.14); color: #496670; }
:is(#mhMail, #mhCompose) .ml-pill.rec { background: rgba(var(--tg-rgb,255,255,255),.85); box-shadow: inset 0 0 0 1px rgba(30,55,48,.12); color: var(--ml-pine-ink); }
:is(#mhMail, #mhCompose) .ml-pill.imp { background: rgba(198,130,79,.16); color: #9A5A2A; }
:is(#mhMail, #mhCompose) .ml-star { color: #C49A33; display: inline-grid; }
:is(#mhMail, #mhCompose) .ml-star svg { width: 15px; height: 15px; fill: currentColor; }

/* empty + idle */
:is(#mhMail, #mhCompose) .ml-empty, :is(#mhMail, #mhCompose) .ml-idle { margin: auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 28px 18px; color: var(--ml-muted); font-size: 13.5px; line-height: 1.5; max-width: 420px; }
:is(#mhMail, #mhCompose) .ml-empty b, :is(#mhMail, #mhCompose) .ml-idle b { font-size: 17px; color: var(--ml-ink); }
:is(#mhMail, #mhCompose) .ml-eic, :is(#mhMail, #mhCompose) .ml-idle-ic { width: 60px; height: 60px; border-radius: 6px 18px 18px 6px; display: grid; place-items: center; margin-bottom: 6px; background: rgba(47,107,87,.1); box-shadow: inset 4px 0 0 var(--ml-pine); color: var(--ml-pine); }
:is(#mhMail, #mhCompose) .ml-eic svg, :is(#mhMail, #mhCompose) .ml-idle-ic svg { width: 28px; height: 28px; }
:is(#mhMail, #mhCompose) .ml-idle .ui-btn { margin-top: 10px; }

/* ------------------------------------------------------------------ reading pane */
:is(#mhMail, #mhCompose) .ml-thead { flex: none; }
:is(#mhMail, #mhCompose) .ml-ph-subj .ml-tab { flex: 1; }
:is(#mhMail, #mhCompose) .ml-subjtx { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: none; letter-spacing: 0; font-size: 15.5px; color: var(--ml-ink); }
:is(#mhMail, #mhCompose) .ml-acts { display: flex; gap: 6px; flex: none; }
:is(#mhMail, #mhCompose) .ml-ibtn { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 10px; border: 1px solid rgba(255,255,255,.9);border-right-color:var(--tg-edge-r,rgba(255,255,255,.9));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.9)); background: rgba(var(--tg-rgb,255,255,255),calc(.7*var(--tg-k,1))); color: var(--ml-pine-ink); transition: background .15s ease, transform .15s ease; }
:is(#mhMail, #mhCompose) .ml-ibtn svg { width: 17px; height: 17px; }
:is(#mhMail, #mhCompose) .ml-ibtn:hover { background: rgb(var(--tg-rgb,255,255,255)); transform: translateY(-1px); color: var(--ml-ink-1); }
:is(#mhMail, #mhCompose) .ml-ibtn.on { color: #C49A33; }
:is(#mhMail, #mhCompose) .ml-ibtn.on svg { fill: currentColor; }

:is(#mhMail, #mhCompose) .ml-msgs { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 14px; margin-top: 14px; padding: 2px 4px 8px 2px; }
:is(#mhMail, #mhCompose) .ml-msg { flex: none; padding: 18px 20px; border-radius: 18px; background: var(--ml-tile); border: 1px solid var(--ml-tile-rim); box-shadow: var(--ml-tile-sh); }
:is(#mhMail, #mhCompose) .ml-msg.mine { background: rgba(232,242,237,.84); }
:is(#mhMail, #mhCompose) .ml-mh { display: flex; align-items: flex-start; gap: 12px; }
:is(#mhMail, #mhCompose) .ml-mhc { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
:is(#mhMail, #mhCompose) .ml-mfrom { font-size: 15px; font-weight: 750; color: var(--ml-ink); }
:is(#mhMail, #mhCompose) .ml-mjob { margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--ml-muted); }
:is(#mhMail, #mhCompose) .ml-mto { font-size: 12.5px; color: var(--ml-muted); }
:is(#mhMail, #mhCompose) .ml-mtime { flex: none; font-size: 12px; font-weight: 600; color: var(--ml-muted); white-space: nowrap; padding-top: 2px; }
:is(#mhMail, #mhCompose) .ml-mflags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
:is(#mhMail, #mhCompose) .ml-mbody { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--ml-ink); white-space: pre-wrap; overflow-wrap: anywhere; }

/* the records a message is about - a chip that opens the record */
:is(#mhMail, #mhCompose) .ml-recs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 16px; }
:is(#mhMail, #mhCompose) .ml-recs.in { margin-top: 8px; }
:is(#mhMail, #mhCompose) .ml-rec {
  display: flex; align-items: center; gap: 11px; min-width: 0; padding: 10px 12px; text-align: left;
  border-radius: 14px; background: rgba(var(--tg-rgb,255,255,255),.88); border: 1px solid rgba(30,55,48,.1); box-shadow: var(--ml-tile-sh); color: var(--ml-ink);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
:is(#mhMail, #mhCompose) button.ml-rec:hover { transform: translateY(-2px); border-color: rgba(47,107,87,.45); box-shadow: 0 12px 24px -14px rgba(30,55,48,.5); }
:is(#mhMail, #mhCompose) .ml-rec-ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 4px 11px 11px 4px; background: rgba(47,107,87,.1); box-shadow: inset 3px 0 0 var(--ml-pine); color: var(--ml-pine); }
:is(#mhMail, #mhCompose) .ml-rec-ic svg { width: 18px; height: 18px; }
:is(#mhMail, #mhCompose) .ml-rec-ic.sm { width: 30px; height: 30px; }
:is(#mhMail, #mhCompose) .ml-rec-ic.sm svg { width: 15px; height: 15px; }
:is(#mhMail, #mhCompose) .ml-rec-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
:is(#mhMail, #mhCompose) .ml-rec-k { font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--ml-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(#mhMail, #mhCompose) .ml-rec-v { font-size: 14px; font-weight: 700; color: var(--ml-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(#mhMail, #mhCompose) .ml-rec-go { color: var(--ml-pine); }
:is(#mhMail, #mhCompose) .ml-rec-go svg { width: 16px; height: 16px; }
:is(#mhMail, #mhCompose) .ml-rec-x { width: 26px; height: 26px; flex: none; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--ml-muted); }
:is(#mhMail, #mhCompose) .ml-rec-x svg { width: 13px; height: 13px; }
:is(#mhMail, #mhCompose) .ml-rec-x:hover { background: rgba(182,91,67,.12); color: #A0452F; }

/* read receipts on the messages YOU sent */
:is(#mhMail, #mhCompose) .ml-rcpts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px dashed rgba(30,55,48,.14); }
:is(#mhMail, #mhCompose) .ml-rcpt { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
:is(#mhMail, #mhCompose) .ml-rcpt svg { width: 13px; height: 13px; }
:is(#mhMail, #mhCompose) .ml-rcpt.seen { background: rgba(47,107,87,.1); color: var(--ml-pine); }
:is(#mhMail, #mhCompose) .ml-rcpt.unseen { background: rgba(30,55,48,.06); color: var(--ml-muted); }
:is(#mhMail, #mhCompose) .ml-rt { font-weight: 500; opacity: .85; }

/* ------------------------------------------------------------------ compose = the tile standard */
:is(#mhMail, #mhCompose) .ml-cmp { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 12px; margin-top: 14px; padding: 2px 4px 10px 2px; }
:is(#mhMail, #mhCompose) .ml-w {
  position: relative; display: flex; flex-direction: column; gap: 2px; margin: 0; text-align: left; flex: none;
  padding: 12px 16px 14px 30px; border-radius: 16px;
  background: var(--ml-tile); border: 1px solid var(--ml-tile-rim); box-shadow: var(--ml-tile-sh); color: var(--ml-ink);
}
:is(#mhMail, #mhCompose) .ml-w::before { content: ""; position: absolute; left: 14px; top: 17px; width: 7px; height: 7px; border-radius: 50%; background: var(--ml-pine); box-shadow: 0 0 0 3px rgba(47,107,87,.16); }
/* empty = .4 white + 1px dashed + hollow dot (the kit's empty language) */
:is(#mhMail, #mhCompose) .ml-w.e { background: rgba(var(--tg-rgb,255,255,255),calc(.4*var(--tg-k,1))); border: 1px dashed rgba(30,55,48,.18); }
:is(#mhMail, #mhCompose) .ml-w.e::before { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(47,107,87,.6); }
:is(#mhMail, #mhCompose) .ml-w:focus-within { background: rgba(var(--tg-rgb,255,255,255),.9); border-style: solid; border-color: rgba(47,107,87,.35); }
:is(#mhMail, #mhCompose) .ml-w.bad { border: 1px solid #C0533A; box-shadow: 0 0 0 3px rgba(192,83,58,.12); }
:is(#mhMail, #mhCompose) .ml-w.bad::before { background: #C0533A; box-shadow: 0 0 0 3px rgba(192,83,58,.16); }
:is(#mhMail, #mhCompose) .ml-w.lockt { background: rgba(var(--tg-rgb,255,255,255),calc(.4*var(--tg-k,1))); }
:is(#mhMail, #mhCompose) .ml-w.lockt .ml-vl { color: var(--ml-muted); }
:is(#mhMail, #mhCompose) .ml-w.open { z-index: 60; }
:is(#mhMail, #mhCompose) .ml-lb { font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--ml-label); line-height: 15px; }
:is(#mhMail, #mhCompose) .ml-hint { margin-left: 6px; text-transform: none; letter-spacing: 0; font-weight: 600; color: #9AA8A3; }
:is(#mhMail, #mhCompose) .ml-vl { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 650; line-height: 24px; color: var(--ml-ink); min-width: 0; }
:is(#mhMail, #mhCompose) .ml-vl svg { width: 17px; height: 17px; }
:is(#mhMail, #mhCompose) .ml-in { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; font-weight: 650; line-height: 24px; color: var(--ml-ink); }
:is(#mhMail, #mhCompose) .ml-in::placeholder { color: #9AA8A3; font-weight: 500; }
/* NO GHOST INSIDE A TILE (owner, 26 Sep: "each field got a ghost in it, clear them").
   The app-wide control rule (.mh-app :is(input, textarea) + its :hover/:focus) paints a fill,
   a 1px border, a focus ring and 12px corners on every input - a second box inside the tile.
   The TILE is the field here, so every control in the mail window is bare in every state. */
:is(#mhMail, #mhCompose) :is(input, textarea), :is(#mhMail, #mhCompose) :is(input, textarea):hover, :is(#mhMail, #mhCompose) :is(input, textarea):focus, :is(#mhMail, #mhCompose) :is(input, textarea):focus-visible {
  border: 0; outline: 0; box-shadow: none; background: transparent; border-radius: 0; padding: 0; -webkit-appearance: none; appearance: none;
}
:is(#mhMail, #mhCompose) .ml-ta { min-height: 200px; resize: vertical; font-size: 15px; font-weight: 500; line-height: 24px; margin-top: 2px; }
:is(#mhMail, #mhCompose) .ml-row2 { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 12px; }
:is(#mhMail, #mhCompose) .ml-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
:is(#mhMail, #mhCompose) .ml-chip {
  height: 30px; padding: 0 13px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  background: rgba(var(--tg-rgb,255,255,255),calc(.75*var(--tg-k,1))); border: 1px solid rgba(30,55,48,.14); color: var(--ml-pine-ink);
  transition: background .15s ease, transform .15s ease;
}
:is(#mhMail, #mhCompose) .ml-chip:hover { background: rgb(var(--tg-rgb,255,255,255)); transform: translateY(-1px); }
:is(#mhMail, #mhCompose) .ml-chip.on { background: var(--ml-grad); border-color: transparent; color: #fff; box-shadow: 0 4px 12px -4px rgba(47,107,87,.45); }
:is(#mhMail, #mhCompose) .ml-note { margin-top: 8px; font-size: 12px; line-height: 1.45; color: var(--ml-muted); }
:is(#mhMail, #mhCompose) .ml-tog { cursor: pointer; justify-content: flex-start; align-items: stretch; text-align: left; padding-right: 72px; }
:is(#mhMail, #mhCompose) .ml-sw { position: absolute; right: 16px; top: 50%; width: 40px; height: 24px; margin-top: -12px; border-radius: 999px; background: rgba(30,55,48,.18); transition: background .15s ease; }
:is(#mhMail, #mhCompose) .ml-sw i { position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: rgb(var(--tg-rgb,255,255,255)); box-shadow: 0 2px 5px rgba(0,0,0,.2); transition: transform .15s ease; }
:is(#mhMail, #mhCompose) .ml-tog.on .ml-sw { background: #C6824F; }
:is(#mhMail, #mhCompose) .ml-tog.on .ml-sw i { transform: translateX(16px); }
:is(#mhMail, #mhCompose) .ml-tog.on .ml-vl { color: #9A5A2A; }
:is(#mhMail, #mhCompose) .ml-addcc {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px; margin-top: -2px;
  border-radius: 999px; border: 1px dashed rgba(47,107,87,.4); background: rgba(47,107,87,.07); color: var(--ml-pine); font-size: 12.5px; font-weight: 800;
}
:is(#mhMail, #mhCompose) .ml-addcc svg { width: 13px; height: 13px; }
:is(#mhMail, #mhCompose) .ml-addcc:hover { background: rgba(47,107,87,.13); }

/* people in To / Cc */
:is(#mhMail, #mhCompose) .ml-pw { cursor: text; }
:is(#mhMail, #mhCompose) .ml-people { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 3px; min-height: 28px; }
:is(#mhMail, #mhCompose) .ml-person { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 3px 0 4px; border-radius: 999px; background: rgb(var(--tg-rgb,255,255,255)); border: 1px solid rgba(30,55,48,.12); font-size: 13px; font-weight: 700; color: var(--ml-ink); }
:is(#mhMail, #mhCompose) .ml-px { width: 22px; height: 22px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--ml-muted); }
:is(#mhMail, #mhCompose) .ml-px svg { width: 12px; height: 12px; }
:is(#mhMail, #mhCompose) .ml-px:hover { background: rgba(182,91,67,.12); color: #A0452F; }
:is(#mhMail, #mhCompose) .ml-pin { flex: 1; min-width: 180px; width: auto; font-size: 15px; }

/* the list anchored to the tile (left:0 right:0, 10px below - the dropdown engine's placement) */
:is(#mhMail, #mhCompose) .ml-pop {
  position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 70;
  display: flex; flex-direction: column; gap: 3px; padding: 7px; max-height: 288px; overflow: auto;
  background: rgba(var(--tg-rgb,255,255,255),.98); border: 1px solid rgba(30,55,48,.12); border-radius: 16px;
  box-shadow: 0 22px 48px -18px rgba(28,39,51,.34); animation: mlPop .14s ease both; scrollbar-width: thin;
}
/* the record picker is the LAST tile - its list opens upward so the scroller never clips it */
:is(#mhMail, #mhCompose) .ml-recw .ml-pop { top: auto; bottom: calc(100% + 10px); }
@keyframes mlPop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
:is(#mhMail, #mhCompose) .ml-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 11px; cursor: pointer; color: var(--ml-ink); }
:is(#mhMail, #mhCompose) .ml-opt.hi { background: rgba(47,107,87,.1); }
:is(#mhMail, #mhCompose) .ml-oc { flex: 1; min-width: 0; display: flex; flex-direction: column; }
:is(#mhMail, #mhCompose) .ml-on { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(#mhMail, #mhCompose) .ml-os { font-size: 12px; color: var(--ml-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(#mhMail, #mhCompose) .ml-ocode { flex: none; font-size: 11.5px; font-weight: 800; letter-spacing: .5px; color: var(--ml-pine); }
:is(#mhMail, #mhCompose) .ml-pop-empty { padding: 12px; font-size: 13px; color: var(--ml-muted); }
:is(#mhMail, #mhCompose) .ml-recsearch { display: flex; align-items: center; gap: 9px; margin-top: 8px; color: var(--ml-label); }
:is(#mhMail, #mhCompose) .ml-recsearch svg { width: 16px; height: 16px; }
:is(#mhMail, #mhCompose) .ml-recsearch .ml-in { font-size: 14.5px; font-weight: 600; }

:is(#mhMail, #mhCompose) .ml-err { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: rgba(192,83,58,.1); border: 1px solid rgba(192,83,58,.3); color: #9A3B26; font-size: 13.5px; font-weight: 650; }
:is(#mhMail, #mhCompose) .ml-err svg { width: 18px; height: 18px; }

/* ------------------------------------------------------------------ footer pair (FOOTBTN18 values) */
:is(#mhMail, #mhCompose) .ml-foot { flex: none; display: flex; align-items: center; gap: 12px; padding: 18px 36px; background: var(--ml-canvas); }
:is(#mhMail, #mhCompose) .ml-fhint { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ml-muted); min-width: 0; }
:is(#mhMail, #mhCompose) .ml-fhint svg { width: 14px; height: 14px; }
:is(#mhMail, #mhCompose) .ml-spacer { flex: 1; }
:is(#mhMail, #mhCompose) .ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 12px;
  font-size: 14.5px; font-weight: 700; white-space: nowrap; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
:is(#mhMail, #mhCompose) .ui-btn svg { width: 18px; height: 18px; }
:is(#mhMail, #mhCompose) .ui-btn.primary { background: var(--ml-grad); color: #fff; border: 1px solid transparent; box-shadow: 0 4px 12px -2px rgba(47,107,87,.42); }
:is(#mhMail, #mhCompose) .ui-btn.primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 20px -4px rgba(47,107,87,.5); }
:is(#mhMail, #mhCompose) .ui-btn.secondary {
  background: var(--ml-glass); border: 1px solid var(--ml-glass-rim); color: var(--ml-pine-ink); box-shadow: var(--ml-lift);
  -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
}
:is(#mhMail, #mhCompose) .ui-btn.secondary:hover:not(:disabled) {
  background: rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1))); color: var(--ml-ink-1); transform: translateY(-2px);
  box-shadow: 0 3px 7px -4px rgba(30,55,48,.18), 0 10px 20px -10px rgba(30,55,48,.26), inset 0 0 0 1px rgba(255,255,255,.85);
}
:is(#mhMail, #mhCompose) .ui-btn:disabled { opacity: .6; cursor: default; }

/* ------------------------------------------------------------------ the dock */
.ml-dock {
  /* BOTTOM LEFT, just past the nav rail: a record footer keeps its buttons on the RIGHT and only
     its "Last updated" text on the left - measured on the client and household records, 26 Sep. */
  position: fixed; left: 104px; bottom: 22px; z-index: 100001; display: flex; align-items: center; gap: 6px;
  padding: 6px 6px 6px 6px; border-radius: 18px; color: #fff; background: var(--ml-rail);
  box-shadow: 0 22px 48px -16px rgba(8,18,14,.6), inset 0 0 0 1px rgba(255,255,255,.1);
  animation: mlDock .22s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes mlDock { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.ml-dock svg { display: block; }
.ml-dock button { font: inherit; cursor: pointer; }
.ml-dock .ml-dk-main { display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 320px; padding: 4px 12px 4px 4px; border: 0; border-radius: 14px; background: transparent; color: #fff; text-align: left; }
.ml-dock .ml-dk-main:hover { background: rgba(var(--tg-rgb,255,255,255),calc(.08*var(--tg-k,1))); }
.ml-dock .ml-dk-ic { position: relative; width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 12px; background: rgba(var(--tg-rgb,255,255,255),calc(.15*var(--tg-k,1))); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.ml-dock .ml-dk-ic svg { width: 22px; height: 22px; }
.ml-dock .ml-dk-n { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; background: #E0483C; color: #fff; font-size: 10px; font-weight: 800; box-shadow: 0 0 0 2px #2E4A43; }
.ml-dock .ml-dk-tx { min-width: 0; display: flex; flex-direction: column; }
.ml-dock .ml-dk-k { font-size: 10.5px; font-weight: 700; letter-spacing: 1.05px; text-transform: uppercase; color: rgb(155,183,149); }
.ml-dock .ml-dk-v { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-dock .ml-dk-btn { width: 40px; height: 40px; flex: none; padding: 0; display: grid; place-items: center; border: 0; border-radius: 12px; background: rgba(var(--tg-rgb,255,255,255),calc(.1*var(--tg-k,1))); color: #fff; transition: background .15s ease; }
.ml-dock .ml-dk-btn svg { width: 17px; height: 17px; }
.ml-dock .ml-dk-btn:hover { background: rgba(var(--tg-rgb,255,255,255),calc(.2*var(--tg-k,1))); }

/* The feedback bubble floats at 100091, over the window's Send button. The mail window is a
   full-screen popup, so the bubble steps out while it is open and returns with the dock. */
body:has(#mhMail, #mhCompose) .fb-fab { display: none; }

/* ------------------------------------------------------------------ top bar mail button + user menu */
.mh-app #mailBtn { position: relative; }
.mh-app #mailBtn .badge { display: none; }
.mh-app #mailBtn.has-mail .badge {
  display: flex; align-items: center; justify-content: center; position: absolute; top: -5px; right: -5px;
  width: auto; min-width: 18px; height: 18px; padding: 0 5px; border: none; border-radius: 999px;
  background: #E0483C; color: #fff; font-size: 10px; font-weight: 800; line-height: 1; text-align: center;
  box-shadow: 0 0 0 2px var(--mh-surface); z-index: 3;
}
.mh-app .tbm-item .tbm-count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; background: #E0483C; color: #fff; font-size: 10.5px; font-weight: 800; }
/* "the user menu must be same size with the user menu list when it appears" (owner, 26 Sep).
   The chip and the list now share ONE width: the chip is never narrower than the list's old
   248px, and the list takes the chip's width, edge for edge. */
.mh-app .tb-user { min-width: 248px; }
.mh-app .tb-user .tb-chev { margin-left: auto; }
.mh-app .tb-user-wrap .tb-menu { left: 0; right: 0; width: auto; }

/* ------------------------------------------------------------------ dark */
body.dark #mhMail, body.dark #mhCompose, body.dark .ml-dock {
  --ml-canvas: #1A232B;
  --ml-ink: #EAF0F4;
  --ml-ink-1: #EAF0F4;
  --ml-muted: #8C9AA5;
  --ml-label: #8C9AA5;
  --ml-pine-ink: #8FBBA5;
  --ml-tab-ink: #B7D6C8;
  --ml-glass: rgba(255,255,255,.05);
  --ml-glass-rim: rgba(180,210,235,.14);
  --ml-tile: rgba(255,255,255,.06);
  --ml-tile-rim: rgba(180,210,235,.14);
  --ml-lift: 0 3px 8px -5px rgba(0,0,0,.45), 0 16px 34px -18px rgba(0,0,0,.6);
  --ml-tile-sh: 0 6px 16px -12px rgba(0,0,0,.55);
  --ml-card-sh: 0 22px 54px -26px rgba(0,0,0,.7);
}
body.dark #mhMail .ml-win { border-color: rgba(180,210,235,.12); }
body.dark :is(#mhMail, #mhCompose) .ml-ph { background: rgba(var(--tg-rgb,255,255,255),calc(.07*var(--tg-k,1))); border-color: rgba(180,210,235,.16); box-shadow: 0 6px 16px -12px rgba(0,0,0,.6); }
body.dark :is(#mhMail, #mhCompose) .ml-row:hover, body.dark :is(#mhMail, #mhCompose) .ml-w:focus-within { background: rgba(var(--tg-rgb,255,255,255),calc(.1*var(--tg-k,1))); }
body.dark :is(#mhMail, #mhCompose) .ml-row.on { background: rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1))); box-shadow: inset 4px 0 0 #6FB396, 0 10px 22px -14px rgba(0,0,0,.6); }
body.dark :is(#mhMail, #mhCompose) .ml-msg.mine { background: rgba(111,179,150,.1); }
body.dark :is(#mhMail, #mhCompose) .ml-w.e, body.dark :is(#mhMail, #mhCompose) .ml-w.lockt { background: rgba(var(--tg-rgb,255,255,255),calc(.03*var(--tg-k,1))); border-color: rgba(180,210,235,.18); }
body.dark :is(#mhMail, #mhCompose) .ml-rec, body.dark :is(#mhMail, #mhCompose) .ml-person, body.dark :is(#mhMail, #mhCompose) .ml-chip, body.dark :is(#mhMail, #mhCompose) .ml-ibtn, body.dark :is(#mhMail, #mhCompose) .ml-pill.rec { background: rgba(var(--tg-rgb,255,255,255),calc(.07*var(--tg-k,1))); border-color: rgba(180,210,235,.16); color: var(--ml-ink); }
body.dark :is(#mhMail, #mhCompose) .ml-chip.on { background: var(--ml-grad); color: #fff; border-color: transparent; }
body.dark :is(#mhMail, #mhCompose) .ml-pop { background: #22303A; border-color: rgba(180,210,235,.16); }
body.dark :is(#mhMail, #mhCompose) .ml-opt.hi { background: rgba(143,187,165,.14); }
body.dark :is(#mhMail, #mhCompose) .ui-btn.secondary:hover:not(:disabled), body.dark :is(#mhMail, #mhCompose) .ml-tbtn:hover { background: rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1))); box-shadow: 0 3px 8px -5px rgba(0,0,0,.45), inset 0 0 0 1px rgba(180,210,235,.16); }
body.dark :is(#mhMail, #mhCompose) .ml-rec-ic, body.dark :is(#mhMail, #mhCompose) .ml-eic, body.dark :is(#mhMail, #mhCompose) .ml-idle-ic { background: rgba(143,187,165,.12); color: #8FBBA5; box-shadow: inset 3px 0 0 #8FBBA5; }
body.dark :is(#mhMail, #mhCompose) .ml-pill.due, body.dark :is(#mhMail, #mhCompose) .ml-rcpt.seen, body.dark :is(#mhMail, #mhCompose) .ml-cnt { background: rgba(143,187,165,.14); color: #8FBBA5; }
body.dark :is(#mhMail, #mhCompose) .ml-rcpt.unseen { background: rgba(var(--tg-rgb,255,255,255),calc(.06*var(--tg-k,1))); }
body.dark :is(#mhMail, #mhCompose) .ml-rcpts { border-top-color: rgba(180,210,235,.14); }
body.dark :is(#mhMail, #mhCompose) .ml-w::before { background: #8FBBA5; box-shadow: 0 0 0 3px rgba(143,187,165,.16); }
body.dark :is(#mhMail, #mhCompose) .ml-w.e::before { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(143,187,165,.6); }
body.dark :is(#mhMail, #mhCompose) .ml-dot { background: #8FBBA5; }
body.dark :is(#mhMail, #mhCompose) .ml-rec-go { color: #8FBBA5; }
body.dark :is(#mhMail, #mhCompose) .ml-sw { background: rgba(var(--tg-rgb,255,255,255),calc(.18*var(--tg-k,1))); }
body.dark :is(#mhMail, #mhCompose) .ml-tog.on .ml-sw { background: #C6824F; }
body.dark :is(#mhMail, #mhCompose) .ml-drl { color: #E58A74; }
body.dark :is(#mhMail, #mhCompose) .ml-av.dr { background: rgba(229,138,116,.12); box-shadow: inset 3px 0 0 #E58A74; color: #E58A74; }
body.dark :is(#mhMail, #mhCompose) .ml-row.unread .ml-when { color: #8FBBA5; }

@media (prefers-reduced-motion: reduce) {
  #mhMail .ml-win, #mhMail .ml-behind, .ml-dock, :is(#mhMail, #mhCompose) .ml-pop { animation: none; }
  :is(#mhMail, #mhCompose) .ml-row:hover, :is(#mhMail, #mhCompose) .ui-btn:hover, :is(#mhMail, #mhCompose) .ml-tbtn:hover, :is(#mhMail, #mhCompose) button.ml-rec:hover, :is(#mhMail, #mhCompose) .ml-compose:hover { transform: none; }
}

/* narrow windows - the list steps aside for the reading pane */
@media (max-width: 1100px) {
  :is(#mhMail, #mhCompose) .ml-rail { flex-basis: 250px; }
  :is(#mhMail, #mhCompose) .ml-body { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); padding: 18px 22px 4px; gap: 16px; }
  :is(#mhMail, #mhCompose) .ml-top, :is(#mhMail, #mhCompose) .ml-foot { padding-left: 22px; padding-right: 22px; }
  :is(#mhMail, #mhCompose) .ml-row2 { grid-template-columns: 1fr; }
}

/* =====================================================================================
   THE COMPOSE POPUP (#mhCompose) - Gmail's shape, the house material (owner, 26 Sep 2026:
   "spread the compose and reply ... like Gmail pop up", "Cc and Bcc in front of the To",
   "only the send and delete"). Bottom right, on the bottom edge, over any page. Its fields
   are the mail window's own classes - every #mhMail rule above is widened to it with
   :is(), never copied. Layers: above the mail window (100000) and its dock (100001).
   ===================================================================================== */
#mhCompose .mc-pop {
  position: fixed; right: 24px; bottom: 0; z-index: 100003;
  width: min(640px, calc(100vw - 32px)); height: min(720px, calc(100 * var(--mh-vh, 1vh) - 20px));
  display: flex; flex-direction: column; overflow: hidden; outline: none;
  border-radius: 16px 16px 0 0; background: var(--ml-canvas); color: var(--ml-ink);
  box-shadow: 0 26px 64px -12px rgba(8,18,14,.5), 0 0 0 1px rgba(30,55,48,.12);
  animation: mcUp .22s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes mcUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
#mhCompose.min .mc-pop { width: 340px; height: auto; }
#mhCompose.big .mc-behind { position: fixed; inset: 0; z-index: 100002; background: rgba(12,24,20,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: mlFade .18s ease both; }
#mhCompose.big .mc-pop {
  inset: 0; margin: auto; animation: none;
  width: min(1000px, calc(94 * var(--mh-vw, 1vw))); height: min(860px, calc(92 * var(--mh-vh, 1vh))); border-radius: 18px;
}

/* the header bar = the rail's pine */
#mhCompose .mc-head { flex: none; display: flex; align-items: center; gap: 4px; height: 48px; padding: 0 8px 0 20px; background: var(--ml-rail); color: #fff; cursor: default; }
#mhCompose.min .mc-head { cursor: pointer; }
#mhCompose .mc-title { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mhCompose .mc-hb { width: 34px; height: 34px; flex: none; padding: 0; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: rgba(255,255,255,.88); transition: background .15s ease; }
#mhCompose .mc-hb svg { width: 16px; height: 16px; }
#mhCompose .mc-hb:hover { background: rgba(var(--tg-rgb,255,255,255),calc(.16*var(--tg-k,1))); color: #fff; }

/* THE BODY IS THE MAIL WINDOW'S (owner, 26 Sep: "turn the COMPOSE mock same as our default interface -
   it's getting white"). The canvas, and every line - To, Cc, Bcc, Subject, Message - is the same
   .ml-w tile the window uses: label on top, pine dot, empty = dashed + hollow dot. */
#mhCompose .mc-body { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; background: var(--ml-canvas); }
/* To / Cc / Bcc / Subject - ONE joined tile, rows ruled apart (owner, 26 Sep: "connected with each
   other like before"). The block wears the tile's material; the rows are lines inside it. */
#mhCompose .mc-group { flex: none; border-radius: 16px; background: var(--ml-tile); border: 1px solid var(--ml-tile-rim); box-shadow: var(--ml-tile-sh); }
#mhCompose .mc-row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 7px 14px 7px 18px; margin: 0; }
#mhCompose .mc-row + .mc-row { border-top: 1px solid rgba(30,55,48,.09); }
#mhCompose .mc-row:first-child { border-radius: 15px 15px 0 0; }
#mhCompose .mc-row:last-child { border-radius: 0 0 15px 15px; }
#mhCompose .mc-row:focus-within { background: rgba(var(--tg-rgb,255,255,255),calc(.6*var(--tg-k,1))); }
#mhCompose .mc-row.open { z-index: 60; }
#mhCompose .mc-row.bad { box-shadow: inset 3px 0 0 #C0533A; }
#mhCompose .mc-row.lockt { color: var(--ml-muted); }
#mhCompose .mc-lb { flex: none; width: 62px; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--ml-label); }
#mhCompose .mc-row .ml-in { flex: 1; font-size: 15px; }
#mhCompose .mc-pl { cursor: text; }
#mhCompose .mc-pl .ml-people { flex: 1; min-width: 0; margin: 0; min-height: 30px; }
#mhCompose .mc-ccb { flex: none; display: flex; gap: 2px; }
#mhCompose .mc-ccb button { border: 0; background: transparent; padding: 4px 8px; border-radius: 8px; font-size: 12.5px; font-weight: 800; letter-spacing: .3px; color: var(--ml-pine-ink); }
#mhCompose .mc-ccb button:hover { color: var(--ml-pine); background: rgba(47,107,87,.1); }
#mhCompose .mc-subj { flex: 1; min-width: 0; font-size: 15px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mhCompose .mc-msg { flex: 1 0 auto; min-height: 200px; }
#mhCompose .mc-ta { flex: 1; min-height: 150px; resize: none; margin-top: 2px; font-size: 15px; font-weight: 500; line-height: 24px; }
#mhCompose .mc-ta::placeholder { color: #9AA8A3; font-weight: 500; }
#mhCompose .ml-pop { top: calc(100% + 10px); }

#mhCompose .mc-attached { margin-top: 0; }

/* THE FOOTER: Send, then Reply by / Importance / Records as buttons that open their choices (Gmail's
   pattern, owner 26 Sep), Delete last. The buttons wear the glass secondary of the footer pair - a
   labelled control, not a bare grey icon (he turned those down). A chosen value turns the button pine. */
#mhCompose .mc-foot { flex: none; position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 14px 14px 16px; border-top: 1px solid rgba(30,55,48,.08); background: var(--ml-canvas); }
#mhCompose .mc-send { height: 42px; padding: 0 20px; }
#mhCompose .mc-tools { position: relative; display: flex; gap: 6px; min-width: 0; }
/* VOLBUILD01d (2 Oct 2026) - EACH MENU OPENS AT ITS OWN BUTTON. Owner: "the drop down menus ... location ... must be
   below the field and it must show there ... correct it on every where". They used to anchor to the GROUP, so
   Importance opened 46px and Records 92px to the LEFT of the button that was pressed. Each tool is the anchor now,
   and every menu opens from its own button's left edge. MEASURED: all three stay inside the compose window
   (Records 1263 + 380 = 1643 inside its 1683 edge); right-aligning Records instead put 120px of it OUTSIDE. */
#mhCompose .mc-tool { position: relative; }
/* ICONS, not words (owner, 26 Sep: "adding icons instead of the texts ... would get very small area") -
   a 40px glass square each; the state still shows: the date beside the clock, the flag turns clay,
   a count badge on Records. The full words live in each button's hover hint. */
#mhCompose .mc-tb {
  position: relative; height: 40px; min-width: 40px; justify-content: center; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 12px; white-space: nowrap;
  background: var(--ml-glass); border: 1px solid var(--ml-glass-rim); box-shadow: var(--ml-lift); color: var(--ml-pine-ink);
  font-size: 13px; font-weight: 750; transition: background .15s ease, transform .15s ease;
}
#mhCompose .mc-tb svg { width: 17px; height: 17px; }
#mhCompose .mc-tool.imp.set .mc-tb svg { fill: currentColor; }
#mhCompose .mc-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; background: var(--ml-pine); color: #fff; font-size: 10.5px; font-weight: 800; box-shadow: 0 0 0 2px var(--ml-canvas); }
#mhCompose .mc-tb .mc-car { width: 12px; height: 12px; opacity: .7; transition: transform .15s ease; }
#mhCompose .mc-tb:hover { background: rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1))); transform: translateY(-1px); }
#mhCompose .mc-tool.on .mc-tb { background: rgb(var(--tg-rgb,255,255,255)); }
#mhCompose .mc-tool.on .mc-car { transform: rotate(180deg); }
#mhCompose .mc-tool.set .mc-tb { background: rgba(47,107,87,.12); border-color: rgba(47,107,87,.32); color: var(--ml-pine); }
#mhCompose .mc-tool.imp.set .mc-tb { background: rgba(198,130,79,.16); border-color: rgba(198,130,79,.4); color: #9A5A2A; }

/* the menu each one opens - upward, anchored to its button */
#mhCompose .mc-menu {
  position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 80; width: 330px; padding: 14px;
  border-radius: 16px; background: rgba(var(--tg-rgb,255,255,255),.98); border: 1px solid rgba(30,55,48,.12);
  box-shadow: 0 22px 48px -18px rgba(28,39,51,.42); animation: mlPop .14s ease both;
}
#mhCompose .mc-menu-sm { width: 250px; padding: 12px; }
#mhCompose .mc-menu-rec { width: 380px; }
#mhCompose .mc-menu-h { margin-bottom: 9px; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--ml-label); }
#mhCompose .mc-menu .ml-chips { margin-top: 0; }
#mhCompose .mc-menu-sep { height: 1px; margin: 13px 0 12px; background: rgba(30,55,48,.09); }
#mhCompose .mc-menu-note { margin-top: 10px; font-size: 12px; line-height: 1.45; color: var(--ml-muted); }
#mhCompose .mc-dp { width: 100%; }
#mhCompose .mc-opt-row { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border: 0; border-radius: 11px; background: transparent; text-align: left; color: var(--ml-ink); }
#mhCompose .mc-opt-row:hover { background: rgba(47,107,87,.08); }
#mhCompose .mc-opt-row.on { background: rgba(47,107,87,.1); }
#mhCompose .mc-opt-row.imp.on { background: rgba(198,130,79,.14); }
#mhCompose .mc-opt-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; background: rgba(47,107,87,.1); color: var(--ml-pine); }
#mhCompose .mc-opt-row.imp .mc-opt-ic { background: rgba(198,130,79,.16); color: #9A5A2A; }
#mhCompose .mc-opt-ic svg { width: 15px; height: 15px; }
#mhCompose .mc-opt-tx { flex: 1; display: flex; flex-direction: column; }
#mhCompose .mc-opt-tx b { font-size: 14px; }
#mhCompose .mc-opt-tx span { font-size: 12px; color: var(--ml-muted); }
#mhCompose .mc-opt-ok { color: var(--ml-pine); }
#mhCompose .mc-opt-ok svg { width: 16px; height: 16px; }
#mhCompose .mc-search { display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 12px; border-radius: 12px; background: var(--ml-canvas); color: var(--ml-label); }
#mhCompose .mc-search svg { width: 16px; height: 16px; }
#mhCompose .mc-search .ml-in { font-size: 14px; font-weight: 600; }
#mhCompose .mc-results { margin-top: 8px; max-height: 230px; overflow: auto; display: flex; flex-direction: column; gap: 3px; }

#mhCompose .mc-spacer { flex: 1; }
#mhCompose .mc-hsaved { flex: none; margin-right: 6px; font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.7); white-space: nowrap; }
#mhCompose .mc-trash { width: 42px; height: 42px; flex: none; padding: 0; display: grid; place-items: center; border: 0; border-radius: 12px; background: transparent; color: var(--ml-muted); transition: background .15s ease, color .15s ease; }
#mhCompose .mc-trash svg { width: 20px; height: 20px; }
#mhCompose .mc-trash:hover:not(:disabled) { background: rgba(192,83,58,.1); color: #A0452F; }
body.dark #mhCompose .mc-menu { background: #22303A; border-color: rgba(180,210,235,.16); }
body.dark #mhCompose .mc-tool.on .mc-tb { background: rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1))); }
body.dark #mhCompose .mc-tool.set .mc-tb { background: rgba(143,187,165,.14); color: #8FBBA5; border-color: rgba(143,187,165,.3); }
body.dark #mhCompose .mc-search { background: rgba(var(--tg-rgb,255,255,255),calc(.06*var(--tg-k,1))); }
body.dark #mhCompose .mc-menu-sep { background: rgba(180,210,235,.12); }

/* the Bcc line in a message you sent */
#mhMail .ml-bcc { color: #8A6A45; }

body.dark #mhCompose .mc-pop { box-shadow: 0 26px 64px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(180,210,235,.14); }
body.dark #mhCompose .mc-foot { border-top-color: rgba(180,210,235,.1); }
body.dark #mhCompose .mc-row + .mc-row { border-top-color: rgba(180,210,235,.12); }
body.dark #mhCompose .mc-row:focus-within { background: rgba(var(--tg-rgb,255,255,255),calc(.05*var(--tg-k,1))); }
body.dark #mhCompose .mc-ccb button:hover { color: #8FBBA5; background: rgba(143,187,165,.1); }
body.dark #mhMail .ml-bcc { color: #D9B98C; }
@media (prefers-reduced-motion: reduce) { #mhCompose .mc-pop, #mhCompose .mc-behind { animation: none; } }

/* ------------------------------------------------------------------ LABELS (28 Sep)
   Owner: "add labels like email and users able to create labels and move the email to each
   labels like Gmail". Each person's own. Eight colours; each has a BRIGHT tone (--lc, read on
   the pine rail and in dark mode), a DEEP tone (--ld, read on the light canvas) and a tint (--lb). */
#mhMail [data-c="pine"]  { --lc: #9FD3B8; --ld: #2F6B57; --lb: rgba(47,107,87,.13); }
#mhMail [data-c="teal"]  { --lc: #86D9D2; --ld: #1F6E6A; --lb: rgba(31,110,106,.13); }
#mhMail [data-c="sky"]   { --lc: #9CCBEE; --ld: #2C6A94; --lb: rgba(44,106,148,.13); }
#mhMail [data-c="slate"] { --lc: #C3CDD6; --ld: #4A5A68; --lb: rgba(74,90,104,.13); }
#mhMail [data-c="plum"]  { --lc: #D6B5E8; --ld: #6E3F8A; --lb: rgba(110,63,138,.13); }
#mhMail [data-c="rose"]  { --lc: #F4B3C7; --ld: #A23A5E; --lb: rgba(162,58,94,.12); }
#mhMail [data-c="clay"]  { --lc: #F2B394; --ld: #A0452F; --lb: rgba(160,69,47,.13); }
#mhMail [data-c="gold"]  { --lc: #F1D07A; --ld: #7E5A0E; --lb: rgba(196,154,51,.2); }

/* the rail: a "Labels" head with +, then the label rows (the folder row, chip in the label's colour) */
/* the rail scrolls once labels make it taller than the window - nothing in it may shrink (the
   Compose button and folder rows were squashed flat before this) */
:is(#mhMail, #mhCompose) .ml-rscroll > * { flex-shrink: 0; }
#mhMail .ml-lsec { display: flex; flex-direction: column; gap: 6px; }
#mhMail .ml-lrow .ml-fold { padding: 6px 14px; }
#mhMail .ml-lrow .ml-fic { width: 34px; height: 34px; border-radius: 4px 10px 10px 4px; }
#mhMail .ml-lrow .ml-fic svg { width: 17px; height: 17px; }
#mhMail .ml-lrow .ml-fk { font-size: 14.5px; }
#mhMail .ml-lhead { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 0 16px; font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255,255,255,.62); }
#mhMail .ml-ladd { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 10px; display: grid; place-items: center; background: rgba(var(--tg-rgb,255,255,255),calc(.1*var(--tg-k,1))); color: #fff; transition: background .15s ease; }
#mhMail .ml-ladd:hover { background: rgba(var(--tg-rgb,255,255,255),calc(.2*var(--tg-k,1))); }
#mhMail .ml-ladd svg { width: 16px; height: 16px; }
#mhMail .ml-lrow { position: relative; }
#mhMail .ml-ledit { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; padding: 0; border: 0; border-radius: 10px; display: grid; place-items: center; background: rgba(var(--tg-rgb,255,255,255),calc(.14*var(--tg-k,1))); color: #fff; opacity: 0; pointer-events: none; transition: opacity .15s ease, background .15s ease; }
#mhMail .ml-ledit svg { width: 15px; height: 15px; }
#mhMail .ml-ledit:hover { background: rgba(var(--tg-rgb,255,255,255),calc(.26*var(--tg-k,1))); }
#mhMail .ml-lrow:hover .ml-ledit, #mhMail .ml-ledit:focus-visible { opacity: 1; pointer-events: auto; }
#mhMail .ml-lrow:hover .ml-fn { visibility: hidden; }
#mhMail .ml-rail .ml-lic { background: color-mix(in srgb, var(--lc) 16%, transparent); box-shadow: inset 3.5px 0 0 var(--lc); color: var(--lc); }
#mhMail .ml-rail .ml-fold.on .ml-lic { background: color-mix(in srgb, var(--lc) 30%, transparent); color: #fff; }

/* the chip a labelled conversation wears - square-ish, so it never reads as a status pill */
#mhMail .ml-lchip { display: inline-flex; align-items: center; gap: 3px; height: 22px; max-width: 170px; padding: 0 8px; border-radius: 6px; background: var(--lb); color: var(--ld); font-size: 11px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mhMail .ml-lchip-x { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 5px; display: grid; place-items: center; background: transparent; color: inherit; opacity: .65; }
#mhMail .ml-lchip-x svg { width: 11px; height: 11px; }
#mhMail .ml-lchip-x:hover { opacity: 1; background: rgba(0,0,0,.07); }

/* Move to / Labels - the two menus off the reading pane's head */
#mhMail .ml-thead { position: relative; z-index: 6; }
#mhMail .ml-hmw { position: relative; display: flex; gap: 6px; }
#mhMail .ml-ibtn.open { background: rgb(var(--tg-rgb,255,255,255)); color: var(--ml-ink-1); }
#mhMail .ml-hm {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 50; width: 290px; padding: 12px; text-align: left;
  border-radius: 16px; background: rgba(var(--tg-rgb,255,255,255),.98); border: 1px solid rgba(30,55,48,.12);
  box-shadow: 0 22px 48px -18px rgba(28,39,51,.42); animation: mlPop .14s ease both;
}
#mhMail .ml-hm-h { margin: 2px 4px 9px; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--ml-label); }
#mhMail .ml-hm-search { display: flex; align-items: center; gap: 9px; height: 40px; margin: 0 0 8px; padding: 0 12px; border-radius: 12px; background: var(--ml-canvas); color: var(--ml-label); cursor: text; }
#mhMail .ml-hm-search svg { width: 15px; height: 15px; }
#mhMail .ml-hm-search .ml-in { font-size: 14px; font-weight: 600; }
#mhMail .ml-hm-list { max-height: 260px; overflow: auto; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; }
#mhMail .ml-hm-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 11px; background: transparent; text-align: left; color: var(--ml-ink); font-size: 14px; font-weight: 650; }
#mhMail .ml-hm-row:hover { background: rgba(47,107,87,.08); }
#mhMail .ml-hm-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 4px 9px 9px 4px; background: rgba(47,107,87,.1); color: var(--ml-pine); box-shadow: inset 3px 0 0 var(--ml-pine); }
#mhMail .ml-hm-ic svg { width: 15px; height: 15px; }
#mhMail .ml-hm-tx { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mhMail .ml-hm-box { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border-radius: 5px; box-shadow: inset 0 0 0 1.6px rgba(30,55,48,.3); color: #fff; }
#mhMail .ml-hm-box svg { width: 13px; height: 13px; }
#mhMail .ml-hm-row.on .ml-hm-box { background: var(--ml-pine); box-shadow: none; }
#mhMail .ml-hm-empty { padding: 10px 8px; font-size: 13px; color: var(--ml-muted); }
#mhMail .ml-hm-sep { height: 1px; margin: 8px 2px; background: rgba(30,55,48,.09); }
#mhMail .ml-hm-new { color: var(--ml-pine); }
#mhMail .ml-hm-new .ml-hm-ic { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(47,107,87,.35); }
#mhMail :is(.ml-hm, .ml-dlg) .ml-lic { background: var(--lb); color: var(--ld); box-shadow: inset 3px 0 0 var(--ld); }

/* the label editor - New label / Edit label, over the window */
#mhMail .ml-dlg-back { position: absolute; inset: 0; z-index: 20; background: rgba(12,24,20,.32); animation: mlFade .15s ease both; }
#mhMail .ml-dlg {
  position: absolute; z-index: 21; inset: 0; margin: auto; width: min(440px, calc(100% - 40px)); height: fit-content;
  display: flex; flex-direction: column; gap: 14px; padding: 20px 22px;
  border-radius: 20px; background: var(--ml-canvas); border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 40px 90px -24px rgba(8,18,14,.6); animation: mlFade .15s ease both;
}
#mhMail .ml-dlg-h { display: flex; align-items: center; gap: 12px; }
#mhMail .ml-dlg-ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 4px 12px 12px 4px; }
#mhMail .ml-dlg-ic svg { width: 19px; height: 19px; }
#mhMail .ml-dlg-t { flex: 1; font-size: 18px; font-weight: 800; letter-spacing: -.2px; color: var(--ml-ink-1); }
#mhMail .ml-dlg-lb { margin: 2px 2px -6px; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--ml-label); }
#mhMail .ml-sws { display: flex; flex-wrap: wrap; gap: 10px; padding: 2px; }
#mhMail .ml-swc { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--ld); color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.45); transition: transform .12s ease; }
#mhMail .ml-swc:hover { transform: scale(1.08); }
#mhMail .ml-swc.on { box-shadow: 0 0 0 3px var(--ml-canvas), 0 0 0 5px var(--ld); }
#mhMail .ml-swc svg { width: 16px; height: 16px; }
#mhMail .ml-dlg-note { font-size: 13px; font-weight: 650; color: #9A3B26; }
#mhMail .ml-dlg-f { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
#mhMail .ml-dlg-del { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; color: var(--ml-muted); font-size: 14px; font-weight: 700; transition: background .15s ease, color .15s ease; }
#mhMail .ml-dlg-del svg { width: 18px; height: 18px; }
#mhMail .ml-dlg-del:hover { background: rgba(192,83,58,.1); color: #A0452F; }
#mhMail .ml-dlg-del.sure, #mhMail .ml-dlg-del.sure:hover { background: #C0533A; color: #fff; }

body.dark #mhMail :is(.ml-hm, .ml-dlg) { background: #22303A; border-color: rgba(180,210,235,.16); }
body.dark #mhMail .ml-hm-search { background: rgba(var(--tg-rgb,255,255,255),calc(.06*var(--tg-k,1))); }
body.dark #mhMail .ml-hm-sep { background: rgba(180,210,235,.12); }
body.dark #mhMail .ml-hm-row:hover { background: rgba(143,187,165,.1); }
body.dark #mhMail .ml-hm-ic { background: rgba(143,187,165,.12); color: #8FBBA5; box-shadow: inset 3px 0 0 #8FBBA5; }
body.dark #mhMail .ml-hm-box { box-shadow: inset 0 0 0 1.6px rgba(180,210,235,.35); }
body.dark #mhMail .ml-hm-row.on .ml-hm-box { background: #6FB396; box-shadow: none; }
body.dark #mhMail .ml-ibtn.open { background: rgba(var(--tg-rgb,255,255,255),calc(.14*var(--tg-k,1))); }
body.dark #mhMail .ml-lchip { background: color-mix(in srgb, var(--lc) 16%, transparent); color: var(--lc); }
body.dark #mhMail :is(.ml-hm, .ml-dlg) .ml-lic { background: color-mix(in srgb, var(--lc) 16%, transparent); color: var(--lc); box-shadow: inset 3px 0 0 var(--lc); }
body.dark #mhMail .ml-swc.on { box-shadow: 0 0 0 3px #22303A, 0 0 0 5px var(--lc); }
body.dark #mhMail .ml-dlg-note { color: #F2A48D; }
body.dark #mhMail .ml-hm-new { color: #8FBBA5; }
body.dark #mhMail .ml-hm-new .ml-hm-ic { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(143,187,165,.45); }
body.dark :is(#mhMail, #mhCompose) .ml-pill.soon { background: rgba(232,176,74,.16); color: #EBC47A; }
body.dark :is(#mhMail, #mhCompose) .ml-pill.late { background: rgba(224,122,95,.16); color: #F2A48D; }

/* ------------------------------------------------------------------ MORE / LESS, TRASH, IMPORTANT, FOLLOW UP (28 Sep)
   Owner: "same as Gmail add the More with down arrow ... the More must change to Less and arrow up".
   The More row is quieter than a folder (no rail-chip bar), so it reads as a switch, not a place. */
#mhMail .ml-more .ml-mic { background: transparent; box-shadow: none; color: rgba(255,255,255,.7); }
#mhMail .ml-more .ml-fk { color: rgba(255,255,255,.78); font-weight: 600; }
#mhMail .ml-more:hover .ml-mic, #mhMail .ml-more:hover .ml-fk { color: #fff; }

/* the reading pane's toolbar row - under the subject capsule */
#mhMail .ml-tbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 6px 2px; }
#mhMail .ml-tsep { width: 1px; height: 22px; margin: 0 4px; background: rgba(30,55,48,.14); }
#mhMail .ml-ibtn.del:hover { color: #A0452F; background: rgb(var(--tg-rgb,255,255,255)); }
#mhMail .ml-ibtn.imp.on { color: #B86A33; }
#mhMail .ml-ibtn.imp.on svg { fill: currentColor; }
#mhMail .ml-tbar .ml-hm { left: 0; right: auto; }
#mhMail .ml-tbar .ml-lchip { height: 26px; max-width: 240px; gap: 5px; padding: 0 4px 0 8px; font-size: 12px; }
#mhMail .ml-tbar .ml-lchip > svg { width: 13px; height: 13px; }
#mhMail .ml-tbar .ml-lchip:first-of-type { margin-left: 6px; }
/* in the Trash: Restore to Inbox / Delete forever, with words - these two are not to be guessed */
#mhMail .ml-abtn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 11px; border-radius: 11px; border: 1px solid rgba(255,255,255,.9);border-right-color:var(--tg-edge-r,rgba(255,255,255,.9));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.9)); background: rgba(var(--tg-rgb,255,255,255),calc(.7*var(--tg-k,1))); color: var(--ml-pine-ink); font-size: 13.5px; font-weight: 750; transition: background .15s ease, transform .15s ease; }
#mhMail .ml-abtn svg { width: 16px; height: 16px; }
#mhMail .ml-abtn:hover { background: rgb(var(--tg-rgb,255,255,255)); transform: translateY(-1px); }
#mhMail .ml-abtn.danger { color: #A0452F; }
#mhMail .ml-abtn.danger:hover { background: #C0533A; color: #fff; border-color: #C0533A; }
#mhMail .ml-tnote { margin-left: 6px; font-size: 12.5px; font-weight: 650; color: #A0452F; }

/* the Trash list bar */
#mhMail .ml-trashbar { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 12px 2px 0; padding: 10px 14px; border-radius: 14px; background: rgba(var(--tg-rgb,255,255,255),calc(.55*var(--tg-k,1))); border: 1px solid rgba(255,255,255,.8);border-right-color:var(--tg-edge-r,rgba(255,255,255,.8));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.8)); font-size: 12.5px; line-height: 1.4; color: var(--ml-muted); }
#mhMail .ml-tlink { flex: none; padding: 5px 10px; border: 0; border-radius: 9px; background: transparent; color: #A0452F; font-size: 13px; font-weight: 800; }
#mhMail .ml-tlink:hover { background: rgba(192,83,58,.1); }

/* the confirm dialog (Delete forever / Empty Trash now) */
#mhMail .ml-dlg-txt { font-size: 14px; line-height: 1.55; color: var(--ml-ink); }
#mhMail .ml-dlg-danger { background: rgba(192,83,58,.12); color: #A0452F; box-shadow: inset 3px 0 0 #C0533A; }
#mhMail .ui-btn.primary.ml-danger { background: linear-gradient(162deg, #CF6A4F 0%, #B24A31 100%); box-shadow: 0 4px 12px -2px rgba(178,74,49,.45); }
#mhMail .ui-btn.primary.ml-danger:hover:not(:disabled) { box-shadow: 0 8px 20px -4px rgba(178,74,49,.55); }

body.dark #mhMail .ml-tsep { background: rgba(180,210,235,.18); }
body.dark #mhMail .ml-abtn { background: rgba(var(--tg-rgb,255,255,255),calc(.07*var(--tg-k,1))); border-color: rgba(180,210,235,.16); color: var(--ml-ink); }
body.dark #mhMail .ml-abtn:hover { background: rgba(var(--tg-rgb,255,255,255),calc(.14*var(--tg-k,1))); }
body.dark #mhMail .ml-abtn.danger, body.dark #mhMail .ml-tnote, body.dark #mhMail .ml-tlink { color: #F2A48D; }
body.dark #mhMail .ml-ibtn.imp.on { color: #E8A273; }
body.dark #mhMail .ml-trashbar { background: rgba(var(--tg-rgb,255,255,255),calc(.05*var(--tg-k,1))); border-color: rgba(180,210,235,.14); }
body.dark #mhMail .ml-dlg-danger { background: rgba(224,122,95,.16); color: #F2A48D; box-shadow: inset 3px 0 0 #E07A5F; }

/* COMPACT RAIL (28 Sep): ten folders + More + labels - every row at the label row's 46px (chip 34px),
   every row at 42px (chip 32px) so the whole rail fits a 900px-high screen with More open, the way Gmail's list does. */
#mhMail .ml-rail .ml-flist { gap: 2px; }
#mhMail .ml-rail .ml-fold { padding: 5px 14px; }
#mhMail .ml-rail .ml-fic { width: 32px; height: 32px; border-radius: 4px 10px 10px 4px; }
#mhMail .ml-rail .ml-compose { height: 48px; }
#mhMail .ml-rail .ml-rhead { padding: 22px 26px 18px; }
#mhMail .ml-rail .ml-fic svg { width: 17px; height: 17px; }
#mhMail .ml-rail .ml-fk { font-size: 14.5px; }
#mhMail .ml-rail .ml-rscroll { gap: 12px; }

/* SHORT SCREENS (28 Sep, measured 1366x768: the rail is 122px taller than the window with More open).
   The rail scrolled with its scrollbar HIDDEN, so nothing said the labels were further down. A thin,
   quiet bar now shows - only when the rail actually overflows. */
#mhMail .ml-rail .ml-rscroll { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) transparent; }
#mhMail .ml-rail .ml-rscroll::-webkit-scrollbar { display: block; width: 6px; }
#mhMail .ml-rail .ml-rscroll::-webkit-scrollbar-thumb { background: rgba(var(--tg-rgb,255,255,255),calc(.28*var(--tg-k,1))); border-radius: 6px; }
#mhMail .ml-rail .ml-rscroll::-webkit-scrollbar-track { background: transparent; }