/* CIC Mail | the whole appearance, in one file.
   Same palette as CIC Connect, so the two feel like one college. */
:root{
  --teal:#0B4D4A; --teal-d:#063B39; --gold:#D4A820; --cream:#F5F1E8;
  --ink:#1A2421; --muted:#6B7A75; --line:#E5E0D4; --white:#fff;
  --danger:#8B1A1A; --radius:14px;
  --shadow:0 1px 2px rgba(11,36,33,.05),0 8px 24px rgba(11,36,33,.06);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font:15px/1.6 Arial,Helvetica,sans-serif;color:var(--ink);background:var(--cream)}
a{color:var(--teal)}
img{max-width:100%}

/* --- top bar --- */
.mtop{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;
  height:58px;padding:0 16px;background:var(--teal);color:#fff}
.mbrand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.mbrand img{height:28px;width:auto}
.mbrand b{font:700 17px Georgia,serif;color:var(--gold)}
.mspace{flex:1}
.mnew{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--gold);
  color:var(--ink);
  border-radius:22px;padding:9px 16px;text-decoration:none;font-weight:700;font-size:13.5px}
.mnew:hover{filter:brightness(1.06)}
.mme{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;
  display:grid;place-items:center;font:700 13px Georgia,serif;text-decoration:none}

/* --- layout --- */
.mwrap{display:grid;grid-template-columns:250px minmax(0,1fr);gap:0;min-height:calc(100vh - 58px)}
.mside{background:#fff;border-right:1px solid var(--line);padding:14px 12px;
  display:flex;flex-direction:column}
.mmain{padding:20px 22px 60px;min-width:0}

.maccts{margin-bottom:14px}
.macct{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:10px;
  text-decoration:none;color:var(--ink);margin-bottom:3px}
.macct:hover{background:#F8F6F1}
.macct.on{background:#F1EDE3}
.macct-d{width:9px;height:9px;border-radius:50%;background:var(--dot,#0B4D4A);flex:0 0 auto}
.macct-n{flex:1;min-width:0}
.macct-n b{display:block;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.macct-n small{display:block;color:var(--muted);font-size:11.5px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.mwarn{width:18px;height:18px;border-radius:50%;background:var(--danger);color:#fff;
  font-style:normal;font-size:11px;font-weight:700;display:grid;place-items:center}

.mfolders{border-top:1px solid var(--line);padding-top:10px}
.mfolders a{display:flex;align-items:center;padding:8px 11px;border-radius:9px;
  text-decoration:none;color:var(--ink);font-size:14px;margin-bottom:1px}
.mfolders a:hover{background:#F8F6F1}
.mfolders a.on{background:var(--teal);color:#fff;font-weight:700}
.mfolders em{margin-left:auto;font-style:normal;background:var(--gold);color:var(--ink);
  border-radius:20px;padding:1px 8px;font:700 11px sans-serif}
.mside-f{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.mside-f a{display:block;padding:7px 11px;color:var(--muted);text-decoration:none;font-size:13px}
.mside-f a:hover{color:var(--teal)}

/* --- head --- */
.mhead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:16px}
.mhead h1{font:700 24px Georgia,serif;color:var(--teal)}
.mhead p{color:var(--muted);font-size:13px;margin-top:2px}
.msearch{display:flex;gap:8px}
.msearch input{border:1px solid var(--line);border-radius:10px;padding:9px 13px;font-size:14px;
  min-width:200px;background:#fff}
.msearch button{border:0;background:var(--teal);color:#fff;border-radius:10px;
  padding:9px 15px;cursor:pointer;font-size:13.5px}

/* --- list --- */
.mlist{list-style:none;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow)}
.mlist li{border-bottom:1px solid var(--line)}
.mlist li:last-child{border-bottom:0}
.mlist a{display:flex;align-items:center;gap:12px;padding:12px 15px;text-decoration:none;
  color:var(--ink)}
.mlist a:hover{background:#F8F6F1}
.mlist li.unread{background:#FFFDF5}
.mlist li.unread .mline1 b{font-weight:700}
.mlist li.unread .mline2{color:var(--ink);font-weight:600}
.mav{flex:0 0 auto;width:38px;height:38px;border-radius:50%;color:#fff;
  display:grid;place-items:center;font:700 13px Georgia,serif}
.mrow{flex:1;min-width:0}
.mline1{display:flex;align-items:baseline;gap:10px}
.mline1 b{font-size:14.5px;font-weight:400;flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.mline1 i{font-style:normal;font-size:11.5px;color:var(--muted);flex:0 0 auto}
.mline2{display:block;font-size:13.5px;color:var(--muted);margin-top:2px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.mstar{color:var(--gold);font-size:16px}
.mempty{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:50px 20px;text-align:center;color:var(--muted)}
.mpager{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:16px;
  font-size:13px;color:var(--muted)}

/* --- one message --- */
.mback{margin-bottom:12px}
.mback a{color:var(--muted);text-decoration:none;font-size:13.5px}
.mmsg{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow)}
.mmsg h1{font:700 21px/1.35 Georgia,serif;color:var(--ink);margin-bottom:16px}
.mmsg-h{display:flex;align-items:center;gap:12px;padding-bottom:16px;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.mmsg-w{flex:1;min-width:0}
.mmsg-w b{display:block;font-size:14.5px}
.mmsg-w small{color:var(--muted);font-size:12.5px}
.mmsg-h time{color:var(--muted);font-size:12.5px}
.matts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.matt{display:inline-flex;align-items:center;gap:8px;background:#F8F6F1;border:1px solid var(--line);
  border-radius:9px;padding:8px 12px;text-decoration:none;color:var(--ink);font-size:13px}
.matt:hover{background:#F1EDE3}
.matt small{display:block;color:var(--muted);font-size:11px}
.mbody{margin-top:18px}
.mframe{width:100%;min-height:340px;border:0;background:#fff}
.mplain{white-space:pre-wrap;word-wrap:break-word;font:14px/1.65 Arial,sans-serif}
.mactions{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px;padding-top:18px;
  border-top:1px solid var(--line)}

/* --- buttons --- */
.mbtn{display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;
  background:var(--teal);color:#fff;border-radius:10px;padding:11px 18px;font-size:14px;
  font-weight:700;text-decoration:none;font-family:inherit}
.mbtn:hover{background:var(--teal-d)}
.mbtn.ghost{background:none;color:var(--teal);border:1px solid var(--teal)}
.mbtn.ghost:hover{background:#F1EDE3}
.mbtn.quiet{background:none;color:var(--muted);border:1px solid var(--line)}
.mbtn.quiet:hover{color:var(--danger);border-color:var(--danger)}
.mbtn.sm{padding:7px 13px;font-size:12.5px}

/* --- forms --- */
label{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.7px;
  color:var(--muted);font-weight:700;margin:14px 0 5px}
input[type=text],input[type=email],input[type=password],input[type=search],select,textarea{
  width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 14px;
  font:15px/1.5 Arial,sans-serif;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(11,77,74,.25);border-color:var(--teal)}
.mcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;margin-bottom:18px;box-shadow:var(--shadow)}
.mcard h2{font:700 17px Georgia,serif;color:var(--teal);margin-bottom:6px}
.mhint{color:var(--muted);font-size:13px;line-height:1.6}
.merr{color:var(--danger)}
.mflash{border-radius:11px;padding:13px 16px;margin-bottom:16px;font-size:14px;line-height:1.6}
.mflash.ok{background:#EAF6EC;border-left:4px solid #16A34A}
.mflash.err{background:#FDECEC;border-left:4px solid var(--danger)}

/* --- compose --- *
.mcc summary{cursor:pointer;color:var(--muted);font-size:13px;margin-top:12px}
.mtools{display:flex;gap:5px;margin-bottom:8px}
.mtools button{border:1px solid var(--line);background:#fff;border-radius:8px;
  min-width:34px;height:32px;cursor:pointer;font-size:13px;color:var(--ink)}
.mtools button:hover{background:#F1EDE3}
.meditor{border:1px solid var(--line);border-radius:12px;padding:14px 16px;min-height:260px;
  background:#fff;font:15px/1.65 Arial,sans-serif;overflow-y:auto;max-height:60vh}
.meditor:focus{outline:2px solid rgba(11,77,74,.25);border-color:var(--teal)}
.meditor blockquote{border-left:3px solid var(--line);margin:0;padding-left:14px;color:var(--muted)}

/* --- accounts in settings --- */
.macct-row{border:1px solid var(--line);border-left:4px solid var(--dot,#0B4D4A);
  border-radius:11px;padding:14px 16px;margin-bottom:10px;display:flex;flex-wrap:wrap;
  gap:12px;align-items:center}
.macct-i{flex:1;min-width:200px}
.macct-i b{font-size:14.5px}
.macct-i em{font-style:normal;background:var(--gold);color:var(--ink);border-radius:20px;
  padding:1px 8px;font-size:10.5px;margin-left:6px;font-weight:700}
.macct-i small{display:block;color:var(--muted);font-size:12px}
.macct-a{display:flex;gap:7px}
.msig{width:100%;border-top:1px solid var(--line);padding-top:12px}
.msig summary{cursor:pointer;color:var(--teal);font-size:13.5px;font-weight:700}

/* --- sign in --- */
.mlogin{display:grid;grid-template-columns:44% 1fr;min-height:100vh}
.mlogin-art{background:linear-gradient(150deg,var(--teal),var(--teal-d) 60%,#0A5F5A);
  color:#fff;padding:44px 40px;display:flex;flex-direction:column;justify-content:space-between}
.mlogin-art img{height:96px;width:auto;align-self:flex-start}
.mlogin-art strong{display:block;font:700 26px/1.35 Georgia,serif;margin-bottom:12px}
.mlogin-art span{font-size:14px;line-height:1.7;color:rgba(255,255,255,.78)}
.mlogin-form{padding:52px 46px;max-width:520px;margin:0 auto;width:100%;align-self:center}
.mlogin-form h1{font:700 26px Georgia,serif;color:var(--teal);margin-bottom:4px}
.msub{color:var(--muted);font-size:14px;margin-bottom:22px}
.mtabs{display:flex;gap:4px;background:#F1EDE3;border-radius:22px;padding:4px;margin-bottom:24px}
.mtabs a{flex:1;text-align:center;padding:9px;border-radius:20px;text-decoration:none;
  color:var(--muted);font-size:14px;font-weight:700}
.mtabs a.on{background:var(--teal);color:#fff}
.malt{margin-top:18px;font-size:13px;color:var(--muted);line-height:1.6}
.mlogin-form .mbtn{width:100%;margin-top:20px;padding:14px}

/* --- phones and tablets --- */
@media(max-width:900px){
  .mwrap{grid-template-columns:1fr}
  .mside{position:fixed;inset:58px auto 0 0;width:262px;z-index:40;transform:translateX(-100%);
    transition:transform .2s;box-shadow:0 0 40px rgba(0,0,0,.2)}
  .mside.open{transform:none}
  .mmain{padding:16px 14px 70px}
  .mlogin{grid-template-columns:1fr}
  .mlogin-art{padding:28px 24px;flex-direction:row;align-items:center;gap:20px}
  .mlogin-art img{height:56px}
  .mlogin-art strong{font-size:19px;margin-bottom:5px}
  .mlogin-art span{font-size:13px}
  .mlogin-form{padding:28px 22px}
  .mhead h1{font-size:21px}
  .msearch{width:100%}
  .msearch input{flex:1;min-width:0}
  .mmsg{padding:18px}
  .meditor{min-height:200px}
}
@media(min-width:721px) and (max-width:1024px){
  .meditor{min-height:280px}
}

/* ===== Writing a message =============================================
   Every field on its own line. They were laid out in a row because two
   different rules shared a name, one for the button in the sidebar and
   one for the form, and the button's display:flex won. The form now has
   a name of its own so nothing written elsewhere can reach it.
   ==================================================================== *
.mcc{margin:-4px 0 14px}
.mcc summary{list-style:none;display:inline-flex;align-items:center;gap:6px}
.mcc summary::-webkit-details-marker{display:none}
.mcc summary::before{content:'+';font-weight:700;color:var(--teal)}
.mcc[open] summary::before{content:'-'}
.mcc .mrow{margin-top:12px}

/* The toolbar */
.mtools{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 0;padding:8px;
  border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0;background:#F8F6F1}
.mtools button{min-width:34px;height:34px;border:1px solid transparent;background:transparent;
  border-radius:8px;cursor:pointer;font-size:14px;color:var(--ink);padding:0 8px;
  display:inline-flex;align-items:center;justify-content:center}
.mtools button:hover{background:#fff;border-color:var(--line)}
.mtools button.on{background:var(--teal);color:#fff}
.mtools .msep{width:1px;background:var(--line);margin:4px 3px}
.mtools input[type=color]{width:34px;height:34px;padding:0;border:1px solid var(--line);
  border-radius:8px;background:#fff;cursor:pointer}
.mtools select{height:34px;border:1px solid var(--line);border-radius:8px;font-size:13px;
  padding:0 6px;background:#fff}

.meditor{border-radius:0 0 12px 12px;min-height:300px;max-height:60vh;overflow-y:auto;
  font:15px/1.7 Arial,Helvetica,sans-serif}
.meditor:focus{outline:none;border-color:var(--teal);box-shadow:inset 0 0 0 2px rgba(11,77,74,.18)}
.meditor blockquote{border-left:3px solid var(--gold);background:#F8F6F1;
  margin:12px 0;padding:10px 14px;color:var(--muted);border-radius:0 8px 8px 0}
.meditor img{max-width:100%;height:auto}
.meditor ul,.meditor ol{margin:8px 0 8px 22px}
.meditor a{color:var(--teal)}

/* Replies quote the original underneath, not beside */
.mquote{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}

@media(max-width:900px){
  .mwrite{padding:16px}
  .meditor{min-height:240px}
  .mtools button{min-width:38px;height:38px}
}

/* Something is happening */
.mloading{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;
  background:linear-gradient(90deg,var(--gold),var(--teal),var(--gold));
  background-size:200% 100%;animation:mload 1.1s linear infinite}
@keyframes mload{0%{background-position:0 0}100%{background-position:-200% 0}}
.mfolders a.waiting,.mnew.waiting{opacity:.55}
.mfolders a.waiting::after{content:'';width:11px;height:11px;margin-left:auto;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:mspin .7s linear infinite}
@keyframes mspin{to{transform:rotate(360deg)}}

/* The day a message arrived, as a heading over its group */
.mlist li.mday{padding:0;background:none;border:0}
.mlist li.mday span{display:block;padding:14px 18px 6px;font:700 10.5px Arial,sans-serif;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.mlist li.mday:first-child span{padding-top:6px}
.mlist li.mday + li{border-top:0}

/* ===== Writing a message =============================================
   Its own class, mwrite, so no rule intended for anything else can
   change how this lays out. Every field on its own line, full width.
   ==================================================================== */
form.mwrite{display:block !important;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:24px 26px;box-shadow:var(--shadow)}
form.mwrite > label,
form.mwrite .mcc label{display:block;width:100%;font:700 11px Arial,sans-serif;
  letter-spacing:.9px;text-transform:uppercase;color:var(--muted);margin:16px 0 6px}
form.mwrite > label:first-of-type{margin-top:0}
form.mwrite input[type=text],
form.mwrite input[type=email],
form.mwrite select{display:block;width:100%;box-sizing:border-box;padding:12px 15px;
  font:15px/1.5 Arial,Helvetica,sans-serif;border:1px solid var(--line);border-radius:10px;
  background:#fff;color:var(--ink);margin:0}
form.mwrite input:focus,
form.mwrite select:focus{outline:2px solid rgba(11,77,74,.22);border-color:var(--teal)}

form.mwrite .mcc{display:block;margin-top:10px}
form.mwrite .mcc summary{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  color:var(--teal);font-size:13.5px;font-weight:700;list-style:none;padding:4px 0}
form.mwrite .mcc summary::-webkit-details-marker{display:none}
form.mwrite .mcc summary::before{content:'+';display:inline-grid;place-items:center;
  width:18px;height:18px;border-radius:50%;background:#F1EDE3;font-weight:700;line-height:1}
form.mwrite .mcc[open] summary::before{content:'\2212'}

form.mwrite .mtools{display:flex;flex-wrap:wrap;gap:4px;width:100%;box-sizing:border-box;
  padding:8px;border:1px solid var(--line);border-bottom:0;
  border-radius:12px 12px 0 0;background:#F8F6F1;margin:0}
form.mwrite .mtools button{min-width:36px;height:36px;border:1px solid transparent;
  background:transparent;border-radius:8px;cursor:pointer;font-size:14px;color:var(--ink);
  padding:0 9px;display:inline-flex;align-items:center;justify-content:center;width:auto}
form.mwrite .mtools button:hover{background:#fff;border-color:var(--line)}
form.mwrite .mtools button.on{background:var(--teal);color:#fff;border-color:var(--teal)}
form.mwrite .mtools .msep{width:1px;background:var(--line);margin:4px 4px}
form.mwrite .mtools select{width:auto;min-width:104px;height:36px;padding:0 8px;font-size:13px}
form.mwrite .mtools input[type=color]{width:36px;height:36px;padding:2px;border:1px solid var(--line);
  border-radius:8px;background:#fff;cursor:pointer}

form.mwrite .meditor{display:block;width:100%;box-sizing:border-box;
  border:1px solid var(--line);border-radius:0 0 12px 12px;padding:16px 18px;
  min-height:320px;max-height:58vh;overflow-y:auto;background:#fff;
  font:15px/1.75 Arial,Helvetica,sans-serif;color:var(--ink)}
form.mwrite .meditor:focus{outline:none;border-color:var(--teal);
  box-shadow:inset 0 0 0 2px rgba(11,77,74,.16)}
form.mwrite .meditor blockquote{border-left:3px solid var(--gold);background:#F8F6F1;
  margin:12px 0;padding:10px 15px;color:var(--muted);border-radius:0 8px 8px 0}
form.mwrite .meditor ul,form.mwrite .meditor ol{margin:8px 0 8px 24px}
form.mwrite .meditor img{max-width:100%;height:auto}

form.mwrite .mactions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
form.mwrite .mactions .mbtn{width:auto}

@media(max-width:900px){
  form.mwrite{padding:16px}
  form.mwrite .meditor{min-height:260px}
  form.mwrite .mtools button{min-width:40px;height:40px}
}

/* The lock screen */
.mlock{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:linear-gradient(150deg,var(--teal),var(--teal-d) 60%,#0A5F5A)}
.mlock-box{background:#fff;border-radius:18px;padding:34px 32px;width:min(420px,100%);
  box-shadow:0 20px 60px rgba(0,0,0,.32);text-align:center}
.mlock-crest img{height:52px;width:auto;margin-bottom:18px}
.mlock-box h1{font:700 23px Georgia,serif;color:var(--teal);margin:0 0 6px}
.mlock-box .msub{color:var(--muted);font-size:13.5px;line-height:1.65;margin:0 0 20px}
.mlock-box label{display:block;text-align:left;font:700 11px Arial;letter-spacing:.9px;
  text-transform:uppercase;color:var(--muted);margin:14px 0 6px}
.mpin{width:100%;box-sizing:border-box;text-align:center;letter-spacing:10px;
  font:700 24px monospace;padding:14px;border:1px solid var(--line);border-radius:12px;
  background:#F8F6F1;color:var(--ink)}
.mpin:focus{outline:2px solid rgba(11,77,74,.25);border-color:var(--teal);background:#fff}
.mbtn.full{width:100%;margin-top:18px;padding:14px}
.mlock-alt{margin:14px 0 0}
.mlink{background:none;border:0;color:var(--teal);font-size:13px;cursor:pointer;
  text-decoration:underline;padding:0}

/* Devices */
.mdev{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--line)}
.mdev:last-of-type{border-bottom:0}
.mdev b{display:block;font-size:14px}
.mdev b em{font-style:normal;font-size:10.5px;background:var(--gold);color:var(--ink);
  border-radius:20px;padding:2px 8px;margin-left:6px;font-weight:700}
.mdev small{color:var(--muted);font-size:12px}
.mbtn.small{padding:7px 13px;font-size:13px}
.mcheck{display:flex;align-items:center;gap:9px;margin:14px 0 4px;font-size:14px}
.mcheck input{width:17px;height:17px}
.mhint{color:var(--muted);font-size:12.5px;line-height:1.6;margin:6px 0 4px}

/* Choosing messages */
.mpick{flex:0 0 auto;display:grid;place-items:center;width:34px;align-self:stretch;cursor:pointer}
.mpick input{width:17px;height:17px;cursor:pointer}
.mlist li{display:flex;align-items:stretch}
.mlist li > a{flex:1;min-width:0}
.mlist li.picked{background:#EAF2F1}
.mbulk{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:var(--teal);color:#fff;padding:10px 14px;border-radius:12px;margin-bottom:10px;
  box-shadow:var(--shadow)}
.mbulk-all{display:flex;align-items:center;gap:7px;font-size:13px}
.mbulk-all input{width:16px;height:16px}
.mbulk-n{font-size:13px;font-weight:700;margin-right:auto;opacity:.9}
.mbtn.danger{background:#8B1A1A;color:#fff;border-color:#8B1A1A}
.mbulk .mbtn.ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.3)}
.mbulk .mbtn.ghost:hover{background:rgba(255,255,255,.25)}

/* The outbox */
.mout{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:12px 0;border-bottom:1px solid var(--line)}
.mout:last-child{border-bottom:0}
.mout-b{flex:1;min-width:0}
.mout-b b{display:block;font-size:14.5px}
.mout-b small{color:var(--muted);font-size:12px}
.mout-e{margin:6px 0 0;background:#FFF5F5;border-left:3px solid #8B1A1A;border-radius:0 6px 6px 0;
  padding:8px 11px;font:12px/1.55 monospace;color:#8B1A1A;word-break:break-word}
.mout.sent{opacity:.6}
.mside-warn{display:block;background:#8B1A1A;color:#fff;border-radius:10px;padding:9px 12px;
  margin:10px 0;font-size:12.5px;font-weight:700;text-decoration:none;text-align:center}
.mside-warn:hover{filter:brightness(1.1)}

.mout-ok{margin:6px 0 0;background:#F0F7F2;border-left:3px solid #16A34A;border-radius:0 6px 6px 0;
  padding:8px 11px;font-size:12.5px;line-height:1.55;color:#1A5B33}

/* Attaching files */
.mattach{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.mattach .mhint{margin:0}
.mfiles{display:flex;flex-direction:column;gap:7px;margin-top:14px}
.mfile{display:flex;align-items:center;gap:11px;background:#F8F6F1;border:1px solid var(--line);
  border-radius:10px;padding:9px 12px}
.mfile-i{flex:0 0 auto;width:30px;height:30px;border-radius:8px;background:var(--teal);
  position:relative}
.mfile-i::after{content:'';position:absolute;left:9px;top:8px;width:12px;height:14px;
  border:1.5px solid #fff;border-radius:2px}
.mfile.done .mfile-i{background:#16A34A}
.mfile.failed .mfile-i{background:#8B1A1A}
.mfile-b{flex:1;min-width:0}
.mfile-b b{display:block;font-size:13.5px;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.mfile-b small{color:var(--muted);font-size:11.5px}
.mfile-bar{display:block;height:3px;border-radius:2px;background:#E5E0D4;margin-top:5px;
  overflow:hidden}
.mfile-bar i{display:block;height:100%;background:var(--teal);transition:width .25s}
.mfile.done .mfile-bar{display:none}
.mfile button{border:0;background:none;color:var(--muted);font-size:20px;cursor:pointer;
  line-height:1;padding:0 4px}
.mfile button:hover{color:#8B1A1A}
.meditor.dropping{border-color:var(--teal);background:#F0F7F5;
  box-shadow:inset 0 0 0 2px rgba(11,77,74,.2)}

/* Search */
.mside-search{margin:0 0 10px}
.mside-search input{width:100%;box-sizing:border-box;padding:10px 13px;font-size:13.5px;
  border:1px solid var(--line);border-radius:22px;background:#F8F6F1}
.mside-search input:focus{outline:2px solid rgba(11,77,74,.2);border-color:var(--teal);
  background:#fff}
.msearch{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.msearch-q{flex:1;min-width:220px;padding:13px 16px;font-size:15.5px;
  border:1px solid var(--line);border-radius:12px}
.msearch-q:focus{outline:2px solid rgba(11,77,74,.22);border-color:var(--teal)}
.msearch select{padding:12px 10px;border:1px solid var(--line);border-radius:12px;font-size:14px}
.mtips{margin-top:14px}
.mtips summary{cursor:pointer;color:var(--teal);font-size:13.5px;font-weight:700;
  list-style:none;display:inline-flex;align-items:center;gap:7px}
.mtips summary::-webkit-details-marker{display:none}
.mtips summary::before{content:'?';display:inline-grid;place-items:center;width:19px;height:19px;
  border-radius:50%;background:#F1EDE3;font-size:12px}
.mtips-t{width:100%;border-collapse:collapse;margin-top:12px}
.mtips-t td{padding:6px 10px;border-bottom:1px solid var(--line);font-size:13px;
  vertical-align:top}
.mtips-t td:first-child{width:190px}
.mtips code,.mhint code{background:#F1EDE3;border-radius:5px;padding:2px 7px;
  font:12.5px monospace;color:var(--teal)}
.mfrom{display:inline-block;margin-top:3px;font-size:11px;color:var(--muted);
  background:#F1EDE3;border-radius:20px;padding:1px 9px}

/* Searching */
.mside-search{margin:0 0 10px}
.mside-search input{width:100%;box-sizing:border-box;padding:10px 13px;font-size:13.5px;
  border:1px solid var(--line);border-radius:20px;background:#F8F6F1}
.mside-search input:focus{outline:2px solid rgba(11,77,74,.2);border-color:var(--teal);
  background:#fff}
.msearch{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.msearch input[type=search]{flex:1;min-width:220px;padding:13px 16px;font-size:15px;
  border:1px solid var(--line);border-radius:12px}
.msearch input[type=search]:focus{outline:2px solid rgba(11,77,74,.2);border-color:var(--teal)}
.mhint b{color:var(--teal);font-family:monospace;font-size:12px}
.mfolder{display:inline-block;margin-top:4px;font-size:10.5px;letter-spacing:.5px;
  text-transform:uppercase;background:#E9F2F1;color:var(--teal);border-radius:20px;
  padding:2px 9px;font-weight:700}

/* Addresses completing as you type */
.mcontacts{position:absolute;z-index:120;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:0 12px 34px rgba(11,36,33,.22);overflow:hidden;max-height:280px;
  overflow-y:auto;min-width:240px}
.mcontacts button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  border:0;background:none;padding:10px 13px;cursor:pointer;color:var(--ink)}
.mcontacts button:hover,.mcontacts button.on{background:#F1EDE3}
.mc-av{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--teal);color:#fff;
  display:grid;place-items:center;font:700 12px Georgia,serif}
.mcontacts b{display:block;font-size:13.5px;font-weight:600}
.mcontacts small{display:block;color:var(--muted);font-size:11.5px}

/* Drafts */
.mside-draft{display:block;background:#F1EDE3;color:var(--teal);border-radius:10px;
  padding:9px 12px;margin:0 0 8px;font-size:12.5px;font-weight:700;text-decoration:none;
  text-align:center;border:1px solid var(--line)}
.mside-draft:hover{background:#E9E3D6}
.mdraft-note{font-size:12px;color:var(--muted);margin-left:auto}
.mdraft-x{flex:0 0 auto;display:grid;place-items:center;padding-right:12px}

/* Setting up notifications */
.msetup{max-width:660px;margin:40px auto;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:34px 34px 30px;box-shadow:var(--shadow)}
.msetup h1{font:700 23px Georgia,serif;color:var(--teal);margin:0 0 6px}
.msetup h2{font:700 15px Georgia,serif;color:var(--teal);margin:22px 0 8px}
.msetup .msub{color:var(--muted);font-size:14px;margin:0 0 20px}
.msetup textarea{width:100%;box-sizing:border-box;font:12px/1.6 monospace;padding:12px;
  border:1px solid var(--line);border-radius:10px;background:#F8F6F1;resize:vertical}
.msetup code{background:#F1EDE3;border-radius:5px;padding:2px 6px;font-size:11.5px;
  word-break:break-all}
.msteps{margin:0 0 14px 18px;padding:0}
.msteps li{font-size:14px;line-height:1.7;margin-bottom:7px;color:var(--ink)}
.mhandwrite{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.mhandwrite summary{cursor:pointer;color:var(--teal);font-size:13.5px;font-weight:700}

.mside-admin{display:block;text-align:center;font-size:12.5px;font-weight:700;
  color:var(--muted);text-decoration:none;padding:8px;border:1px solid var(--line);
  border-radius:10px;margin:0 0 8px}
.mside-admin:hover{background:#F1EDE3;color:var(--teal)}

/* Staff and student tabs on the sign in page */
.mtabs{display:flex;gap:6px;background:#F1EDE3;border-radius:22px;padding:4px;margin-bottom:20px}
.mtabs a{flex:1;text-align:center;padding:9px 8px;border-radius:20px;text-decoration:none;
  color:var(--muted);font-size:13.5px;font-weight:700}
.mtabs a.on{background:var(--teal);color:#fff}
.mtabs a:hover:not(.on){background:#fff;color:var(--teal)}

.mkv{width:100%;border-collapse:collapse}
.mkv td{padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.mkv td:first-child{color:var(--muted);width:40%}

.mflash-go{display:inline-block;margin-left:10px;background:var(--teal);color:#fff;
  border-radius:20px;padding:4px 13px;font-size:12.5px;font-weight:700;text-decoration:none}
.mflash-go:hover{filter:brightness(1.12)}

/* Two step sign in */
.msecret{font:700 19px/1.9 monospace;letter-spacing:2px;color:var(--teal);background:#F8F6F1;
  border:1px dashed var(--line);border-radius:12px;padding:16px 18px;text-align:center;
  cursor:pointer;word-break:break-all;margin:14px 0 6px;user-select:all}
.mcodes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px;
  margin:14px 0}
.mcodes span{font:700 15px monospace;letter-spacing:1px;background:#F8F6F1;
  border:1px solid var(--line);border-radius:9px;padding:11px;text-align:center;
  color:var(--ink)}

/* ===== The sign in page ==============================================
   Staff and student are told apart by colour before a word is read.
   Teal is the college itself; the deeper green belongs to students, and
   is the same green as the student ID cards.
   ==================================================================== */
.mlogin-art{position:relative;overflow:hidden}
.mlogin-staff .mlogin-art{
  background:linear-gradient(155deg,#0B4D4A 0%,#063B39 55%,#0A5F5A 100%)}
.mlogin-student .mlogin-art{
  background:linear-gradient(155deg,#123D2B 0%,#0C2A1E 55%,#1A5C3F 100%)}

/* A quiet pattern of the bridge, so the panel is not a flat wash */
.mlogin-art::before{content:'';position:absolute;inset:0;opacity:.06;
  background-image:radial-gradient(circle at 20% 30%,#fff 1px,transparent 1px),
                   radial-gradient(circle at 70% 60%,#fff 1px,transparent 1px);
  background-size:56px 56px,84px 84px}
.mlogin-art > *{position:relative;z-index:1}
.mlogin-art strong{display:block;font:700 30px/1.25 Georgia,serif;margin-bottom:14px}
.mlogin-line{display:block;font-size:14.5px;line-height:1.75;color:rgba(255,255,255,.76);
  max-width:34ch}

/* The tabs, which now decide something */
.mtabs{display:flex;gap:5px;background:#F1EDE3;border-radius:24px;padding:5px;
  margin-bottom:22px}
.mtabs a{flex:1;text-align:center;padding:11px 8px;border-radius:22px;text-decoration:none;
  color:var(--muted);font:700 14px Arial,sans-serif;transition:background .15s,color .15s}
.mtabs a:hover:not(.on){background:#fff;color:var(--teal)}
.mlogin-staff .mtabs a.on{background:#0B4D4A;color:#fff;
  box-shadow:0 2px 8px rgba(11,77,74,.3)}
.mlogin-student .mtabs a.on{background:#123D2B;color:#fff;
  box-shadow:0 2px 8px rgba(18,61,43,.3)}

.mlogin-student .mbtn{background:#123D2B}
.mlogin-student h1{color:#123D2B}
.mlogin-student .malt a{color:#123D2B}

/* A gold rule under the crest, the one piece of the brand that is
   constant between the two */
.mlogin-form h1{position:relative;padding-bottom:12px}
.mlogin-form h1::after{content:'';position:absolute;left:0;bottom:0;width:52px;height:3px;
  border-radius:2px;background:var(--gold)}

.mlock-rec{margin-top:18px;border-top:1px solid var(--line);padding-top:14px;text-align:left}
.mlock-rec summary{cursor:pointer;color:var(--teal);font-size:13px;font-weight:700;
  text-align:center;list-style:none}
.mlock-rec summary::-webkit-details-marker{display:none}
.mlock-rec .msub{font-size:12.5px;margin:10px 0}

/* Folders */
.mside-folders{display:block;text-align:center;font-size:12px;color:var(--muted);
  text-decoration:none;padding:7px;margin:4px 0 10px}
.mside-folders:hover{color:var(--teal)}
.mmove{display:inline-block}
.mmove select,.mbulk-move{border:1px solid var(--line);border-radius:9px;padding:7px 10px;
  font-size:13px;background:#fff;color:var(--ink);max-width:170px}
.mbulk-move{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.14);color:#fff}
.mbulk-move option{color:var(--ink)}