/* Mentions (js/mentions.js): members tagging each other. The @ picker under a box being typed in, an
   @username that's a tag, "👥 Tagging" under the post box, and "👥 Tagged" under a post. From mock-mentions. */
.mn-pick { position: fixed; z-index: 4000; display: grid; gap: 2px; max-height: min(320px, 50vh); overflow-y: auto; padding: 6px; border-radius: 16px; background: #fff;
  box-shadow: 0 0 0 1px #e6e3fb, 0 14px 34px rgba(21, 14, 94, .22); box-sizing: border-box; }
.mn-pick[hidden] { display: none; }
.mn-hit { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 9px; border: 0; border-radius: 10px; background: none; color: #150e5e;
  font: inherit; text-align: left; cursor: pointer; }
.mn-hit:hover, .mn-hit[aria-selected="true"] { background: #f4f2fd; }
.mn-hit.is-off { opacity: .55; cursor: not-allowed; }
.mn-hit.is-off:hover { background: none; }
.mn-hit > span:last-child { min-width: 0; }
.mn-hit b { display: block; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.mn-hit em { color: #6b6890; font-style: normal; font-weight: 600; font-size: 12.5px; }
.mn-hit small { display: block; color: #6b6890; font-size: 12px; }
.mn-none { margin: 6px 8px; color: #6b6890; font-size: 13px; }
.mn-av { flex: none; display: grid; width: 30px; height: 30px; }
.mn-av .acct-av { width: 30px; height: 30px; font-size: 11px; }

/* an @username that's a tag */
.mn-at { color: #4232d4; font-weight: 700; text-decoration: none; }
.mn-at:hover { text-decoration: underline; }

/* who the box tags, and who a post tags */
.mn-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mn-who[hidden] { display: none; }
.mn-who-lab { color: #4b4870; font-size: 12.5px; font-weight: 800; }
.mn-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: #f1eefe; color: #150e5e; font-size: 12.5px; font-weight: 700; }
.mn-chip .mn-av, .mn-chip .mn-av .acct-av { width: 22px; height: 22px; font-size: 9px; }
.mn-tagged { display: flex; gap: 6px; margin: 0; color: #6b6890; font-size: 13px; }
.mn-tagged a { color: #3d3a6b; font-weight: 700; text-decoration: none; }
.mn-tagged a:hover { text-decoration: underline; }
.mn-tagged[hidden] { display: none; }
/* ⋯ on a post that tags you: Remove my tag */
.mn-more { position: relative; }
.mn-more[hidden] { display: none; }
.mn-menu { position: absolute; z-index: 5; right: 0; bottom: calc(100% + 4px); display: grid; min-width: 190px; padding: 6px; border-radius: 14px; background: #fff;
  box-shadow: 0 0 0 1px #e6e3fb, 0 14px 34px rgba(21, 14, 94, .22); }
.mn-menu[hidden] { display: none; }
.mn-menu button { min-height: 44px; padding: 8px 12px; border: 0; border-radius: 10px; background: none; color: #150e5e; font: 600 14px var(--font-read); text-align: left; cursor: pointer; }
.mn-menu button:hover { background: #f4f2fd; }
.mn-done { margin: 0; padding: 8px 12px; border-radius: 12px; background: #e3f5ec; color: #0a7d4f; font-size: 13px; font-weight: 700; }
.mn-done button { margin-left: 6px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }

/* a comment someone opened from a notice */
.cm-c.is-found { border-radius: 14px; box-shadow: 0 0 0 3px #a98bff; }