/* Messages from CertForm: the Messages view, the Important banner, and the
   preview page (messages/preview.html). Colours fall back for the preview,
   which doesn't have the app's variables. */
.nav-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.15rem;height:1.15rem;padding:0 .3rem;
  margin-left:.3rem;border-radius:999px;background:var(--c1,#c8102e);color:#fff;font-size:.7rem;font-weight:700;line-height:1}
.nav-count[hidden]{display:none}
#navMessagesBtn{position:relative}
/* Icon-only top bar on phones: the count sits on the bell's corner. */
@media(max-width:560px){ .nav-count{position:absolute;top:.05rem;right:-.1rem;margin:0;min-width:1rem;height:1rem;font-size:.62rem} }
.msg-filter{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0 1rem}
.msg-list{display:flex;flex-direction:column;gap:1rem;max-width:46rem}
.msg-card{background:var(--card,#fff);border:1px solid var(--line,#d6d8dc);border-left:4px solid var(--line,#d6d8dc);
  border-radius:var(--radius,10px);padding:1rem 1.1rem;scroll-margin-top:5rem;overflow-wrap:anywhere}
.msg-card.cat-new{border-left-color:#1c7c3c}
.msg-card.cat-important{border-left-color:var(--c1,#c8102e)}
.msg-card.cat-general{border-left-color:#2a6ebb}
.msg-head{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;font-size:.8rem}
.msg-cat{font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:.1rem .45rem;border-radius:5px;border:1px solid transparent}
.msg-cat.cat-new{background:#e3f2e8;color:#1c7c3c;border-color:#7dbd92}
.msg-cat.cat-important{background:#fbe9ec;color:#a50d26;border-color:#e0a0a8}
.msg-cat.cat-general{background:#e6effa;color:#1f5596;border-color:#a9c4e6}
.msg-unread{font-weight:700;color:var(--c1,#c8102e)}
.msg-unread::before{content:"";display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:currentColor;margin-right:.3rem;vertical-align:.05rem}
.msg-date{margin-left:auto;color:var(--muted,#5a626b)}
.msg-title{font-size:1.15rem;margin:.5rem 0 .3rem}
.msg-body{line-height:1.5}
.msg-body h3{font-size:1.05rem;margin:1rem 0 .3rem}
.msg-body h4,.msg-body h5{font-size:.95rem;margin:.9rem 0 .3rem}
.msg-body p,.msg-body ul,.msg-body ol,.msg-body blockquote,.msg-body figure{margin:.5rem 0}
.msg-body ul,.msg-body ol{padding-left:1.4rem}
.msg-body blockquote{border-left:3px solid var(--line,#d6d8dc);padding:.1rem 0 .1rem .8rem;color:var(--muted,#5a626b)}
.msg-body img{max-width:100%;height:auto;border-radius:var(--radius-sm,6px);border:1px solid var(--line-soft,#e7e8ea)}
.msg-body figure{margin-left:0;margin-right:0}
.msg-body figcaption{font-size:.85rem;color:var(--muted,#5a626b);margin-top:.25rem}
.msg-body code{font-family:var(--mono,ui-monospace,monospace);font-size:.9em;background:#f1f2f4;padding:.05rem .3rem;border-radius:4px}
.msg-body a{color:#1f5596}
.msg-alert{border-color:var(--c1,#c8102e);margin:.6rem 0}
.msg-alert-row{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem .8rem}
.msg-alert-row+.msg-alert-row{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--line-soft,#e7e8ea)}
.msg-alert-text{flex:1 1 14rem}
.msg-alert-text .ico{color:var(--c1,#c8102e)}
.msg-alert-actions{display:flex;gap:.4rem}