/* Calling somebody into a comment: the picker, the typeahead, the marked name, the queue.
   28 October 2026 — "i want to be able to put at name <@name> ... so i can mark th epeople i'm
   commenting and that they get a que of notifications to attend".

   Quiet on purpose. A mention is not an alarm: the name is marked, the header carries one
   number, and nothing moves on the page until somebody presses it. */

.mbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 0; }
.mbar label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.mbar select.mpick { font: inherit; font-size: 12px; padding: 3px 6px; min-height: 30px;
  border: 1px solid var(--line, #e3ddd2); border-radius: 6px; background: #fff; color: inherit; }
.mbar .mhint { opacity: .75; }
@media (max-width: 640px) { .mbar .mhint { display: none; } }

/* The typeahead. Absolutely positioned against the document rather than the box, because the
   box sits inside a scrolling drawer and a popup clipped by its own parent is a popup nobody
   can read. It closes on any scroll for the same reason. */
.mtip { position: absolute; z-index: 90; background: #fff; border: 1px solid var(--line, #e3ddd2);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(40, 30, 10, .14); padding: 4px; max-width: 360px; }
.mtip .mtipi { display: flex; width: 100%; gap: 8px; align-items: baseline; text-align: left;
  background: none; border: 0; font: inherit; font-size: 13px; padding: 6px 8px; border-radius: 6px;
  cursor: pointer; min-height: 32px; }
.mtip .mtipi.on, .mtip .mtipi:hover { background: var(--wash, #faf6ef); }
.mtip .mtipi span { margin-left: auto; }

/* A name that reached somebody. Marked, not shouted — and only when the server resolved it,
   so an unmarked "@someone" is the page telling the truth about a name it could not place. */
.mname { color: var(--gold-ink, #8a6a1f); background: rgba(198, 160, 58, .13);
  border-radius: 4px; padding: 0 3px; font-weight: 500; }

/* The one number. Beside the open-comments count, because both answer "is anything waiting
   for me in here?" and they should not be in two different parts of the page. */
#navMine { font: inherit; font-size: 12px; cursor: pointer; border: 1px solid transparent;
  background: none; color: inherit; opacity: .8; padding: 2px 8px; border-radius: 999px; min-height: 28px; }
#navMine.mwait { opacity: 1; background: rgba(198, 160, 58, .18);
  border-color: rgba(198, 160, 58, .5); font-weight: 500; }
#navMine:hover { border-color: rgba(198, 160, 58, .7); }

#minePanel { position: fixed; right: 16px; top: 58px; z-index: 95; width: min(420px, calc(100vw - 32px));
  max-height: min(70vh, 680px); overflow: auto; background: #fff; border: 1px solid var(--line, #e3ddd2);
  border-radius: 10px; box-shadow: 0 16px 40px rgba(40, 30, 10, .18); padding: 14px 16px; }
#minePanel h4 { margin: 0 0 4px; }
#minePanel .mlist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
#minePanel .mitem { border: 1px solid var(--line, #e3ddd2); border-left: 3px solid var(--gold, #c6a03a);
  border-radius: 8px; padding: 8px 10px; }
#minePanel .mitem.done { border-left-color: var(--line, #e3ddd2); opacity: .7; }
#minePanel .mi-h { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
#minePanel .mi-h a { font-weight: 500; }
#minePanel .mi-w { margin: 2px 0 0; }
#minePanel .mi-b { margin: 6px 0 8px; font-size: 13px; white-space: pre-wrap; }
#minePanel .mi-a { display: flex; gap: 6px; flex-wrap: wrap; }
#minePanel .mdone { margin-top: 12px; }
#minePanel .mdone summary { cursor: pointer; font-size: 12px; opacity: .8; min-height: 28px; }
@media (max-width: 640px) {
  #minePanel { right: 8px; left: 8px; width: auto; top: 52px; max-height: 76vh; }
  #minePanel .mi-a .btn { min-height: 36px; }
}