/* ============================== email hosting ==============================
   The stylesheet for the mail client (web/mail.js).

   This file exists because the page had none. mail.js was rewritten into a
   client - a top bar, a rail of mailboxes, a list, a reader, and setup
   sections behind a gear - and its markup landed with no rules behind it, so
   every control drew itself in the browser's own colours: white search boxes,
   unstyled buttons, labels sitting on top of each other. The panel and the
   demo both showed that.

   It is a separate file rather than another section of app.css for one reason:
   the mail page is a small application of its own, its class names are all
   `m`-prefixed and nothing else uses them, so the rules can be read in one
   place without scrolling past four thousand lines of panel.

   Colours are the panel's tokens, so every colour theme carries here too.
   ========================================================================= */

/* ---- the frame ---------------------------------------------------------- */
/* `mfull` is the page filling the view: the top bar, the two panes and the
   status line together own the height, and only the panes scroll. */
.mailapp{display:flex;flex-direction:column;height:calc(100vh - 128px);min-height:520px;
  background:var(--bg2);border:1px solid var(--border);border-radius:14px;overflow:hidden}
#view > .mailapp{margin:0}

/* ---- top bar ------------------------------------------------------------ */
.mtop{display:flex;align-items:center;gap:10px;padding:9px 12px;flex:0 0 auto;
  background:var(--panel);border-bottom:1px solid var(--border)}
.mbrand{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text);white-space:nowrap}
.mbrand b{font-size:14px;letter-spacing:.01em}
.mbrandmark,.mbrandlogo{width:20px;height:20px;flex:0 0 20px;object-fit:contain;color:var(--accent)}

/* The search box is the one control a mail client is judged by, so it gets the
   room: a pill with the magnifier inside it, and the browser's own clear button
   suppressed because there is a real one beside it. */
.msearch{display:flex;align-items:center;gap:7px;flex:0 1 360px;min-width:150px;
  background:var(--panel2);border:1px solid var(--border);border-radius:9px;padding:5px 8px}
.msearch:focus-within{border-color:var(--border2);box-shadow:0 0 0 2px var(--accent-soft)}
.msearchicon{width:15px;height:15px;flex:0 0 15px;color:var(--faint)}
.msearch input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--text);
  font:inherit;font-size:13px;padding:2px 0}
.msearch input::-webkit-search-cancel-button,
.msearch input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.msearch input::placeholder{color:var(--faint)}
.mqwipe{width:24px;height:24px;opacity:.7}
.mqwipe:hover{opacity:1}

.miconbtn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  flex:0 0 auto;border:1px solid transparent;border-radius:8px;background:transparent;
  color:var(--dim);cursor:pointer;transition:background .13s,border-color .13s,color .13s}
.miconbtn:hover{background:var(--panel2);border-color:var(--border);color:var(--text)}
.miconbtn:disabled{opacity:.45;cursor:not-allowed}
.micon{width:16px;height:16px}
.mwho{margin-left:2px;font-size:12px;color:var(--faint);white-space:nowrap}

/* ---- the two panes ------------------------------------------------------ */
.mmain{display:grid;grid-template-columns:238px minmax(0,1fr);flex:1 1 auto;min-height:0}
.mrail{display:flex;flex-direction:column;gap:2px;padding:10px 8px 14px;overflow:auto;
  background:var(--panel);border-right:1px solid var(--border);min-height:0}
.mcontent{min-width:0;min-height:0;overflow:auto;background:var(--bg2)}

/* Compose: the one thing a mail page is opened to do, so it is the only filled
   button in the rail. */
.mnew{display:flex;align-items:center;justify-content:center;gap:8px;margin:2px 4px 8px;
  padding:9px 12px;border:0;border-radius:9px;background:var(--accent2);color:#231006;
  font:inherit;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 4px 14px -8px rgba(0,0,0,.9)}
.mnew:hover{filter:brightness(1.07)}
.mnew .micon{width:15px;height:15px}

.mrailsec{margin:12px 8px 3px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);font-weight:700}
.mrail .mrailsec:first-child{margin-top:4px}

.mritem{display:flex;align-items:center;gap:9px;width:100%;padding:7px 8px;border:1px solid transparent;
  border-radius:9px;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.mritem:hover{background:var(--panel2)}
.mritem.on{background:var(--accent-soft);border-color:var(--border2)}
.mritem.on .mricon{color:var(--accent)}
.mricon{width:16px;height:16px;flex:0 0 16px;color:var(--faint)}
.mritem.on .mricon,.mritem:hover .mricon{color:var(--accent)}
.mrtxt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.mrtxt b{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mritem.on .mrtxt b{color:var(--accent)}
.mrtxt i{font-size:10.5px;font-style:normal;color:var(--faint);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.mrbump{flex:0 0 auto;min-width:19px;padding:1px 6px;border-radius:999px;background:var(--accent2);
  color:#231006;font-size:10.5px;font-weight:800;text-align:center}
.mrcount{flex:0 0 auto;font-size:11px;color:var(--faint)}
.mrailtip{padding:8px;font-size:11.5px;line-height:1.55;color:var(--faint)}
.mrailback{margin-top:6px;border-top:1px solid var(--border);border-radius:0 0 9px 9px}

/* The gear's menu. It hangs under the button that opened it, and its own rows
   are the rail's rows so the two never look like different controls. */
#mgearpanel{position:relative;z-index:40}
.mgear{position:absolute;top:-2px;right:0;min-width:216px;padding:6px;display:flex;
  flex-direction:column;gap:2px;background:var(--panel2);border:1px solid var(--border2);
  border-radius:12px;box-shadow:0 20px 44px -22px rgba(0,0,0,.95)}
.mgearrow{display:flex;align-items:center;gap:9px;padding:8px;border:0;border-radius:8px;
  background:transparent;color:var(--text);font:inherit;font-size:12.5px;text-align:left;cursor:pointer}
.mgearrow:hover{background:var(--panel3)}

/* ---- the list ----------------------------------------------------------- */
.mailpanes{display:grid;grid-template-columns:minmax(280px,400px) minmax(0,1fr);height:100%;min-height:0}
.mailpanes.mreading{grid-template-columns:0 minmax(0,1fr)}
.mailpanes.mreading > .mframe{display:none}
.mframe{display:flex;flex-direction:column;min-height:0;min-width:0;border-right:1px solid var(--border)}
.mlist,.mframe > div{flex:1;min-height:0;overflow:auto}
.mrows{display:flex;flex-direction:column}

/* A day divider is a label, not a band: the list already has enough lines. */
.mday{padding:9px 14px 3px;border-top:1px solid var(--border);background:var(--bg2)}
.mday:first-child{border-top:0}
.mday span{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);font-weight:700}

.mline{display:flex;align-items:center;gap:4px;padding:0 8px 0 10px;border-bottom:1px solid var(--border);
  background:transparent;transition:background .12s}
.mline:hover{background:var(--panel)}
.mline.unread{background:var(--panel)}
/* The selection is a left rule plus a tint: a tint alone disappears on the row
   the pointer is already on. */
.mline.on{background:var(--accent-soft);box-shadow:inset 2px 0 0 var(--accent)}
.mline.picked{background:var(--accent-soft)}
.mcheck{display:flex;align-items:center;padding:2px;flex:0 0 auto;opacity:0;transition:opacity .12s}
.mline:hover .mcheck,.mline.picked .mcheck,.mline.on .mcheck{opacity:1}
.mcheck input{width:13px;height:13px;accent-color:var(--accent2);cursor:pointer}

.mrow{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:9px 0;border:0;
  background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.mav{display:inline-flex;align-items:center;justify-content:center;flex:0 0 28px;width:28px;height:28px;
  border-radius:50%;color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.02em}
.mmid{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.mline1{display:flex;align-items:baseline;gap:6px;min-width:0}
.mline1 .mwho{font-size:12.5px;font-weight:600;color:var(--text);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.mline.unread .mline1 .mwho{font-weight:800}
.maddr{font-size:11px;font-style:normal;color:var(--faint);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:52%}
.mdate{margin-left:auto;flex:0 0 auto;font-size:10.5px;color:var(--faint);white-space:nowrap}
.mline.unread .mdate{color:var(--accent);font-weight:700}
.mline2{display:flex;align-items:baseline;gap:5px;min-width:0;font-size:12px;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mline2 b{font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis}
.mline.unread .mline2 b{font-weight:800;color:var(--text)}
.msnip{color:var(--faint);overflow:hidden;text-overflow:ellipsis}
.msrc{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:var(--accent)}
.mrcicon{width:11px;height:11px}

/* Quick actions stay out of the way until the row is under the pointer, and
   come back for the row that is open. */
.mquick{display:flex;align-items:center;gap:0;flex:0 0 auto;opacity:0;transition:opacity .12s}
.mline:hover .mquick,.mline.on .mquick{opacity:1}
.mquick .miconbtn{width:26px;height:26px;color:var(--faint)}
.mquick .miconbtn:hover{color:var(--text)}

/* The bar that appears when something is ticked, inside the list's own column. */
#mbulk{display:flex;align-items:center;gap:6px;padding:7px 10px;background:var(--panel2);
  border-bottom:1px solid var(--border2);position:sticky;top:0;z-index:3}
#mbulk[hidden]{display:none}
#mbulk b{font-size:12px;color:var(--accent)}

/* ---- the reader --------------------------------------------------------- */
.mreader{min-width:0;min-height:0;overflow:auto;display:flex;flex-direction:column}
.mrtools{display:flex;align-items:center;gap:6px;padding:8px 12px;flex-wrap:wrap;
  position:sticky;top:0;z-index:2;background:var(--bg2);border-bottom:1px solid var(--border)}
.mrtools .mback{margin-right:2px}
.mrsub{margin:16px 18px 4px;font-size:17px;font-weight:700;line-height:1.32;color:var(--text)}
.mrhead{display:flex;align-items:flex-start;gap:10px;padding:6px 18px 13px;
  border-bottom:1px solid var(--border);flex-wrap:wrap}
.mrwho{display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--dim);min-width:0}
.mrwho b{color:var(--text);font-size:13px}
.mrline{font-size:11.5px;font-style:normal;color:var(--faint)}
.mrwhen{margin-left:auto;font-size:11.5px;color:var(--faint);white-space:nowrap}
.mailbody{padding:16px 18px 26px;font-size:13.5px;line-height:1.68;color:var(--text);
  white-space:pre-wrap;word-break:break-word}
.mailbody img{max-width:100%;height:auto;border-radius:8px}

/* "Nothing open" and "this folder is empty" are the two states a mail client
   shows most often, so they get air rather than a grey sentence at the top. */
.mrempty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  min-height:220px;height:100%;padding:40px 22px;text-align:center;color:var(--faint)}
.mrempty b{font-size:13.5px;color:var(--dim)}
.mrempty .note{max-width:44ch;line-height:1.6}
.mbig{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:50%;background:var(--panel2);border:1px solid var(--border)}
.mbigicon{width:22px;height:22px;color:var(--faint)}

/* ---- setup sections ------------------------------------------------------ */
/* These sit in the content column, so they are cards inside a column, not a
   page of their own: one measure, a gap, and no full-width tables. */
.mcontent > .panel{margin:14px}
.mcontent > .panel + .panel{margin-top:0}
.mcontent h3{font-size:14.5px}

.mailfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:9px;margin-top:10px}
.mailfacts > div{display:flex;flex-direction:column;gap:3px;padding:10px 11px;border-radius:10px;
  background:var(--panel2);border:1px solid var(--border)}
.mailfacts b{font-size:13.5px}

/* The rail of steps in "what to do next": numbers, a title, one sentence. */
.msteps{display:flex;flex-direction:column;gap:8px;margin:10px 0 0;padding:0;list-style:none;counter-reset:s}
.msteps li{counter-increment:s;padding:10px 11px 10px 36px;position:relative;border-radius:10px;
  background:var(--panel2);border:1px solid var(--border)}
.msteps li::before{content:counter(s);position:absolute;left:11px;top:10px;width:18px;height:18px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:800}
.msteps li.bad::before{background:rgba(239,68,68,.16);color:var(--red)}
.msteptop{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.msteptop b{font-size:13px}

/* The path a message takes, drawn as three stops side by side. */
.mpath{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:9px;margin:10px 0}
.mpath > div{display:flex;flex-direction:column;gap:3px;padding:10px 11px;border-radius:10px;
  background:var(--panel2);border:1px solid var(--border)}
.mpath b{font-size:12.5px}

/* Delivery mode picker and the per-domain rows. */
.mmodes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;margin:10px 0}
.mmode{display:flex;flex-direction:column;gap:4px;padding:10px 11px;border-radius:10px;text-align:left;
  background:var(--panel2);border:1px solid var(--border);color:var(--text);font:inherit;cursor:pointer}
.mmode:hover{border-color:var(--border2)}
.mmode.on{border-color:var(--accent);background:var(--accent-soft)}
.mmode b{font-size:12.5px}

.mdelivrow{padding:10px 0;border-top:1px solid var(--border)}
.mdelivrow:first-of-type{border-top:0}

/* Domain rows: a name, its badges, and its switches on one line that wraps. */
.mdom{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 0;border-top:1px solid var(--border)}
.mdom b{font-size:12.5px}

/* Mailbox creation form. */
.mboxtop{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;padding:10px 0 2px}
.mboxtitle{font-size:12.5px;font-weight:700}

/* ---- compose ------------------------------------------------------------ */
/* A window, not a page: it floats over the list so the message being replied to
   is still there behind it. */
.mcompose{position:fixed;right:18px;bottom:18px;width:min(560px,calc(100vw - 36px));
  max-height:calc(100vh - 36px);display:flex;flex-direction:column;z-index:6000;
  background:var(--panel);border:1px solid var(--border2);border-radius:13px;overflow:hidden;
  box-shadow:0 32px 70px -30px rgba(0,0,0,.95)}
.mchead{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--panel2);
  border-bottom:1px solid var(--border);font-size:12.5px;font-weight:700}
.mcheck{color:var(--dim)}
.mcbody{display:flex;flex-direction:column;gap:7px;padding:11px 12px;overflow:auto;min-height:0}
.mcrow{display:flex;align-items:center;gap:8px}
.mcrow label{flex:0 0 52px;font-size:11.5px;color:var(--faint)}
.mctext{min-height:180px;resize:vertical;font-family:inherit;font-size:13px;line-height:1.6;
  width:100%;padding:9px 10px;border-radius:9px;border:1px solid var(--border);
  background:var(--bg2);color:var(--text)}
.mcfoot{display:flex;align-items:center;gap:8px;padding:9px 12px;border-top:1px solid var(--border);
  background:var(--panel2)}

/* ---- the status line ---------------------------------------------------- */
.mfoot{display:flex;align-items:center;gap:9px;flex:0 0 auto;padding:7px 12px;flex-wrap:wrap;
  background:var(--panel);border-top:1px solid var(--border);font-size:12px}
.mstat{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.mstat .dot{width:7px;height:7px;border-radius:50%;flex:0 0 7px}
.mstatsep{width:1px;height:13px;background:var(--border);flex:0 0 1px}
.mstatmsg{color:var(--red)}
.mpowered{margin-left:auto;font-size:11px;color:var(--faint);white-space:nowrap}
.mpowered a{color:var(--faint)}

/* ---- narrow windows ----------------------------------------------------- */
/* A phone gets one pane. The reader takes the width when a message is open, and
   its Back button is what returns to the list, which is how a mail client on a
   phone has worked since the first one. */
@media(max-width:900px){
  .mmain{grid-template-columns:1fr}
  .mrail{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--border);
    padding:8px;gap:6px;max-height:168px}
  .mrailsec{display:none}
  .mnew{flex:1 0 100%;margin:0 0 4px}
  .mritem{width:auto;flex:1 1 auto}
  .mrtxt i{display:none}
  .mailapp{height:auto;min-height:0}
  .mailpanes{grid-template-columns:1fr}
  .mframe{border-right:0}
  .mailapp .mailpanes.mreading .mframe{display:none}
  .mailapp .mailpanes:not(.mreading) .mreader{display:none}
  .mreader .mrempty{min-height:160px}
  .mcompose{right:8px;left:8px;bottom:8px;width:auto}
}