.topic-event-directory { position: relative; flex: 0 0 auto; }
.topic-event-directory > summary {
  display: flex; align-items: center; justify-content: center; width: 28px;
  min-height: 28px; border: 1px solid var(--line); color: var(--muted);
  cursor: pointer; list-style: none; background: rgba(252, 251, 247, .42);
}
.topic-event-directory > summary::-webkit-details-marker { display: none; }
.topic-event-directory > summary:hover,
.topic-event-directory > summary:focus-visible { color: var(--ink); border-color: var(--ink); }
.topic-event-directory-menu {
  position: absolute; z-index: 120; top: calc(100% + 5px); right: 0;
  width: min(300px, 85vw); max-height: min(380px, 55vh); overflow-y: auto;
  padding: 10px; border: 1px solid var(--ink); background: var(--white);
  box-shadow: 0 10px 24px rgba(22, 34, 31, .12);
}
.topic-event-directory-menu p { margin: 0 0 8px; font-size: 12px; font-weight: 700; }
.topic-event-directory-menu ul { list-style: none; margin: 0; padding: 0; }
.topic-event-directory-menu a {
  display: block; padding: 7px 4px; color: var(--ink); font-size: 12px;
  line-height: 1.4; overflow-wrap: anywhere; text-decoration: none;
}
.topic-event-directory-menu a:hover,
.topic-event-directory-menu a:focus-visible { background: var(--paper); text-decoration: underline; }
.identity-overlay:has(.topic-event-directory[open]) { position: relative; z-index: 3; }
@media (min-width: 761px) {
  .topic-event-directory-menu { right: auto; left: 0; }
}
@media (max-width: 760px) {
  .topic-event-directory { position: static; }
  .topic-event-directory-menu { right: auto; left: 0; width: min(300px, calc(100vw - 44px)); }
}