/* =====================================================================
   CIC Mail | assets/unread.css
   The waiting bar, the mailbox counts, and unread.php.

   Its own file rather than an edit to mail.css: mail.css is the whole
   appearance of the product in one place and this is an addition, so
   keeping them apart means this can be removed by deleting one link.

   Every colour is taken from the variables mail.css already declares.
   ===================================================================== */

/* --- the bar ---------------------------------------------------------
   Under the header, above everything else, on every page except the one
   it leads to. It is a link, not a banner: a count somebody cannot act
   on is just a worry. */
.mnewbar{
  display:flex;align-items:center;gap:10px;
  padding:10px 16px;
  background:var(--teal);color:#fff;text-decoration:none;
  font-size:13.5px;line-height:1.3}
.mnewbar:hover{background:var(--teal-d)}
.mnewbar-i{display:grid;place-items:center;flex:0 0 auto;opacity:.85}
.mnewbar b{
  display:grid;place-items:center;min-width:24px;height:24px;flex:0 0 auto;
  background:var(--gold);color:var(--ink);border-radius:999px;
  padding:0 7px;font:700 12.5px/1 sans-serif}
.mnewbar-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mnewbar-go{
  flex:0 0 auto;border:1px solid rgba(255,255,255,.45);border-radius:999px;
  padding:4px 12px;font-size:12.5px}
.mnewbar:hover .mnewbar-go{background:rgba(255,255,255,.14)}
.mnewbar:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}

/* --- the count beside each mailbox -----------------------------------
   Nothing at all when a mailbox is clear, so the eye goes straight to
   the ones that are not. A row of zeroes reads as noise. */
.macct-n-b{
  flex:0 0 auto;font-style:normal;
  min-width:21px;height:21px;padding:0 6px;
  display:grid;place-items:center;
  background:var(--teal);color:#fff;border-radius:999px;
  font:700 11.5px/1 sans-serif}
.macct.on .macct-n-b{background:var(--gold);color:var(--ink)}
/* The name matters more than the number, so the number never pushes it
   out of the row. */
.macct-n{min-width:0}

/* --- unread.php ------------------------------------------------------ */

/* Which mailbox needs attention, answered before any message is read. */
.munb{
  display:grid;gap:8px;margin-bottom:16px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.munb-c{
  display:flex;align-items:center;gap:9px;
  padding:12px 13px;border-radius:var(--radius);
  background:var(--white);border:1px solid var(--line);
  text-decoration:none;color:var(--ink);font-size:13.5px}
.munb-c:hover{border-color:var(--teal)}
.munb-d{
  width:9px;height:9px;border-radius:50%;flex:0 0 auto;
  background:var(--dot,var(--teal))}
.munb-c b{
  flex:1;min-width:0;font-weight:400;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.munb-c i{font-style:normal;color:var(--muted);font-size:12.5px;flex:0 0 auto}
.munb-c.has{border-color:var(--teal);background:#F4F8F7}
.munb-c.has b{font-weight:700}
.munb-c.has i{
  min-width:22px;height:22px;padding:0 7px;display:grid;place-items:center;
  background:var(--teal);color:#fff;border-radius:999px;
  font:700 12px/1 sans-serif}

/* Which mailbox a message landed in. Without it a combined list is a
   pile of mail with no idea which door it came through. */
.munl-w{
  display:inline-flex;align-items:center;gap:6px;margin-top:3px;
  color:var(--muted);font-size:11.5px}
.munl-w em{
  width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  background:var(--dot,var(--teal))}

@media(max-width:640px){
  .mnewbar{padding:9px 12px;gap:8px;font-size:13px}
  .mnewbar-go{display:none}
  .munb{grid-template-columns:1fr 1fr}
}