/* ── Menu (generic flyout list, e.g. avatar) ──
   .menu                  block (absolute-positioned panel)
   .menu__item            clickable row
   .menu__item--danger    destructive variant (red text) */
.menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pop);
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  min-width: 140px;
  padding: 4px;
  z-index: 200;
  flex-direction: column;
  gap: 2px;
}
.menu:not([hidden]) { display: flex; }

.menu__item {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text);
  text-align: left;
  padding: 7px 10px;
  border-radius: 7px;
  transition: background 0.1s ease;
}

.menu__item:hover { background: var(--blue-light); }

.menu__item--danger {
  color: var(--red-dark);
}

.menu__item--danger:hover { background: var(--red-light); }